.accordion{
  /* ширина в % для резинового макета, 
  * можно определить фиксированное
  * значение в px 
  */
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
.toggle-box {
  /* по умаолчанию скрыт */
  display: none;
}
 
/* формируем внешний вид панелей аккордеона */
 
.toggle-box + label { 
  background: #11595E;
  background: -moz-linear-gradient(top,  #0c066e 10%, #110836 90%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#738384), color-stop(100%,#0B484D));
  background: -webkit-linear-gradient(top,  #11595E  10%,#0B484D 90%);
  background: -o-linear-gradient(top,  #11595E 10%,#0B484D 90%);
  background: -ms-linear-gradient(top,  #11595E 10%,#0B484D 90%);
  background: linear-gradient(top,  #11595E 10%,#425252 90%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#738384', endColorstr='#0B484D',GradientType=0 ); 
  color: #FFFFFF;
  cursor: pointer;
  display: block;
  font: normal 15px Helvetica, Arial, sans-serif;
  line-height: 21px;
  padding: 8px 22px; 
  margin-bottom: 0px;
}
label a, a:hover{color: #C7F7ED;}

/* формируем внешний вид панелей при наведении */
 
.toggle-box + label:hover{opacity: 0.9;} 
 
/* формируем внешний вид панелей при нажатии на них */
 
.toggle-box + label:active{
  background: #011416;
  background: -moz-linear-gradient(top,  #011416 1%, #06484B 11%, #163032 84%, #4b4d51 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#06484B), color-stop(11%,#06484B), color-stop(84%,#756d73), color-stop(100%,#4b4d51));
  background: -webkit-linear-gradient(top,  #011416 0%,#06484B 11%,#163032 84%,#4b4d51 100%);
  background: -o-linear-gradient(top,  #011416 1%,#06484B 11%,#163032 84%,#4b4d51 100%);
  background: -ms-linear-gradient(top,  #011416 1%,#06484B 11%,#163032 84%,#4b4d51 100%);
  background: linear-gradient(to bottom,  #011416 1%,#06484B 11%,#163032 84%,#4b4d51 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06484B', endColorstr='#4b4d51',GradientType=1 );    
}
 
/* содержание блоков скрыто */
 
.toggle-box + label + div {
  display: none;
}
 
/* при обработке флажка (checkbox) показываем блок с содержанием */
 
.toggle-box:checked + label + div {
  display: block;
}
 
/* формируем внешний вид кнопки переключателя на панели справа */
 
.toggle-box + label:before {
  background: #03211F;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  color: #F6FBFB;
  content: "+";
  display: block;
  float: right;
  font-size: 15px;
  font-weight: bold; 
  height: 20px;
  line-height: 20px;
  margin: 2px 2px 0px;
  text-align: center;
  width: 18px;
  box-shadow: inset 1px 1px 1px rgba(0,0,0, 0.2), 1px 1px 1px rgba(255,255,255,0.1); 
  -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, 0.2), 1px 1px 1px rgba(255,255,255,0.1); 
  -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, 0.2), 1px 1px 1px rgba(255,255,255,0.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: #031110;
  line-height: 1.2;
}
 
/* значения встраиваемых картинок в блоки */
 
.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;}