/*
 * Простой блок "Аккордеон" на CSS и HTML
 * http://dbmast.ru/blok-akkordeon-na-css3-eksperimenty-prodolzhayutsya
 *
 * Copyright (c) 2014 Andrew (shurawi) - http://dbmast.ru
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 */

.accordion{
  /* ширина в % для резинового макета, 
  * можно определить фиксированное
  * значение в px 
  */
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
.toggle-box {
  /* по умаолчанию скрыт */
  display: none;
}

/* формируем внешний вид панелей аккордеона */

.toggle-box + label { 
  background: #6c6e74;
  background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
  background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c6e74', endColorstr='#4b4d51',GradientType=0 ); 
  color: #C9C9C9;
  cursor: pointer;
  display: block;
  font: normal 14px Helvetica, Arial, sans-serif;
  line-height: 21px;
  padding: 8px 22px; 
  margin-bottom: 0px;
}

label a, a:hover{color: #ddd;}

/* формируем внешний вид панелей при наведении */

.toggle-box + label:hover{opacity: 0.9;} 

/* формируем внешний вид панелей при нажатии на них */

.toggle-box + label:active{
  background: #6c6e74;
  background: -moz-linear-gradient(top,  #6c6e74 0%, #545359 11%, #756d73 84%, #4b4d51 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(11%,#545359), color-stop(84%,#756d73), color-stop(100%,#4b4d51));
  background: -webkit-linear-gradient(top,  #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
  background: -o-linear-gradient(top,  #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
  background: -ms-linear-gradient(top,  #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
  background: linear-gradient(to bottom,  #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545359', endColorstr='#4b4d51',GradientType=0 );    
}

/* содержание блоков скрыто */

.toggle-box + label + div {
  display: none;
}

/* при обработке флажка (checkbox) показываем блок с содержанием */

.toggle-box:checked + label + div {
  display: block;
}

/* формируем внешний вид кнопки переключателя на панели справа */

.toggle-box + label:before {
  background: #404247;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  color: #C9C9C9;
  content: "+";
  display: block;
  float: right;
  font-size: 14px;
  font-weight: bold; 
  height: 18px;
  line-height: 18px;
  margin: 2px 5px 0px;
  text-align: center;
  width: 18px;
  box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); 
  -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); 
  -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}

.toggle-box:checked + label:before {
  content: "\2212";
}

/* оформляем блок с содержанием */

.box{
  background: #fefefe;
  border-left: rgba(0,0,0,0.1) solid 1px;
  border-right: rgba(0,0,0,0.1) solid 1px;
  border-bottom: rgba(0,0,0,0.1) solid 1px;
  padding: 10px 10px 10px;
  font: 14px Helvetica, Arial, sans-serif;
  color: #333;
  line-height: 1.5;
}

/* значения встраиваемых картинок в блоки */

.box img{
  height: auto;
  border: rgba(0,0,0,0.3) solid 1px;
}

.left-img{  
  float: left; 
  margin: 5px 10px 0px 0px;
}

.right-img{
  float: right; 
  margin: 5px 0 0 10px;
}

.large-img {width: 100%;margin-bottom: 5px;}