/* Code inspired by http://www.hongkiat.com/blog/css-content-accordion/
   Realization by Mathias Bader (10. November 2012)
*/

/* Define Accordion box */
.text-accordion { 
     width:830px;
     overflow:hidden; 
     margin:10px auto; 
     color:#474747; 
     background:#414141; 
     padding:10px; 
}

.text-accordion div.acc_elem { 
      float:left;
      overflow:hidden; 
      color:#333; 
      cursor:pointer; 
      background: #333; 
      margin:3px; 
}
.text-accordion div.acc_elem:hover {
      background:#444;
}

.text-accordion div.acc_elem p { 
      display:none; 
}

.text-accordion div.acc_elem:after{
      position:relative;
      font-size:24px;
      color:#000;
      font-weight:bold;
}
.text-accordion div.acc_elem:nth-child(1):after{ content:'1'; }
.text-accordion div.acc_elem:nth-child(2):after{ content:'2'; }
.text-accordion div.acc_elem:nth-child(3):after{ content:'3'; }
.text-accordion div.acc_elem:nth-child(4):after{ content:'4'; }
.text-accordion div.acc_elem:nth-child(5):after{ content:'5'; }

.text-accordion div.acc_elem:target { 
      background:#FFF; 
      padding:10px;
}
.text-accordion div.acc_elem:target:hover { 
      background:#FFF; 
}
.text-accordion div.acc_elem:target h2 {
      width:100%;
}
.text-accordion div.acc_elem:target h2 a{ 
      color:#333; 
      padding:0;
}
.text-accordion div.acc_elem:target p {
      display:block;
}
.text-accordion div.acc_elem h2 a {
      padding:8px 10px;
      display:block; 
      font-size:16px; 
      font-weight:normal;
      color:#eee; 
      text-decoration:none; 
}

.horizontal div.acc_elem { 
      width:5%; 
      height:250px; 
      -moz-transition: width 0.2s ease-out; 
      -webkit-transition:width 0.2s ease-out;
      -o-transition:width 0.2s ease-out;
      transition:width 0.2s ease-out;
}

/* Position the number of the slide */
.horizontal div.acc_elem:after {
      top:140px;
      left:15px;
}

/* Header of closed slide */
.horizontal div.acc_elem h2 { 
     -webkit-transform:rotate(90deg);
     -moz-transform:rotate(90deg);
     -o-transform: rotate(90deg);
     transform: rotate(90deg);
     width:240px; 
     position:relative; 
     left:-100px; 
     top:85px;
} 
/* On mouse over open slide */
.horizontal :target {
     width:73%;
     height:230px; 
}
.horizontal :target h2 { 
     top:0px;
     left:0;
     -webkit-transform:rotate(0deg);
     -moz-transform:rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg); 
}

.vertical div.acc_elem{ 
     width:100%; 
     height:40px; 
     -webkit-transition:height 0.2s ease-out;
     -moz-transition:height 0.2s ease-out;
     -o-transition:height 0.2s ease-out;
     transition:height 0.2s ease-out;
}

/* Set height of the slide */
.vertical :target{ 
     height:250px; 
     width:97%;
}

.vertical div.acc_elem h2 { 
     position:relative; 
     left:0; 
     top:-15px; 
}

/* Set position of the number on the slide */
.vertical div.acc_elem:after{ 
      top:-60px;
      left:810px;
}
.vertical div.acc_elem:target:after{ 
      left:-9999px;
}