Stylized CSS accordian

<style>
/*OTHER CSS, BODY, BACKGROUND ETC WOULD GO HERE*/

/*Slides*/

/*Position, location, colors, font face can all be edited below. Size can also be adjusted.  */

.accordion {
Position: absolute;
top:58%;
left:35%;
 font: 500 100% 'Raleway', 'Questrial';
 color: #444;
 font-size: .75em;
 border-color: #393952;
 border-style: solid;
 border-width: 4px;
 margin: 0 auto;
 height: 230px; /*SIZE*/
 width: 415px; /*SIZE*/
 -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
 -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
 box-shadow:0 0 20px rgba(0,0,0,0.8);
-webkit-transition: all 2.0s ease-in-out;
-moz-transition: all 2.0s ease-in-out;
-o-transition: all 2.0s ease-in-out;}

.accordion > ul > li,
.accordion-title,
.accordion-content,
.accordion-separator {
 float: left;
}

.accordion > ul > li {
 background-color: #393952;
 margin-right: -290px; /*SIZE can be adjusted. If you change the overall size of the Accordian*/
 margin-bottom: 0;
 }

.accordion-select:checked ~ .accordion-separator {
 margin-right: 290px; /*SIZE can be adjusted. If you change the overall size of the Accordian*/
 margin-bottom: 0;
}

/*Can be edited below for Font Title, color and background*/
.accordion-title,
.accordion-select {
 background-color: #b83c4d;
 color: #CCC;
 width: 25px;
 height: 230px;
 font-size: 12px;
 font-family: 'Questrial';}

.accordion-title span {
 margin-bottom: 15px;  /*Can be edited below for Font Title, color and background*/
 margin-left: 20px; /*Can be edited below for Font Title, color and background*/
}

.accordion-select:hover ~ .accordion-title,
.accordion-select:checked ~ .accordion-title {
 background-color: #393952;  /*COLOR can be adjusted.*/
background-image: url(http://rs385.pbsrc.com/albums/oo296/EmO_TEnTAi/Falling%20objects/1_070216wd103_m_cola71a.gif~c200);  /*Background of Open Tab. Transparent Gif works well here*/
}


.accordion-title span {
 transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -ms-writing-mode: lr-bt;
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 margin-left: 0;
 line-height: 30px;
}

.accordion-content {
 background-color: #dcd1d8;  /*Color & Size can be adjusted. If you change the overall size of the Accordian*/
 height: 195px;
 width: 250px;
 padding: 20px;
}


/* Do not change following properties, they aren't
generated automatically and are common for each slider. */
.accordion {
 overflow: hidden;
}

.accordion > ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 101%;
}

.accordion > ul > li,
.accordion-title {
 position: relative;
}

.accordion-select {
 cursor: pointer;
 position: absolute;
 opacity: 0;
 top: 0;
 left: 0;
 margin: 0;
 z-index: 1;
}

.accordion-title span {
 display: block;
 position: absolute;
 bottom: 0;
 width: 100%;
 white-space: nowrap;
}

.accordion-content {
 position: relative;
 overflow-x: hidden;
 overflow-y: auto; }

.accordion-separator {
 transition: margin 0.3s ease 0.1s;
 -o-transition: margin 0.3s ease 0.1s;
 -moz-transition: margin 0.3s ease 0.1s;
 -webkit-transition: margin 0.3s ease 0.1s;
}

</style>

<div class="accordion">
 <ul>
 <li>
 <input type="radio" name="select" class="accordion-select" checked />
 <div class="accordion">
 <ul>
 <li>
 <input type="radio" name="select" class="accordion-select" checked />
 <div class="accordion-title">
 <span>CHANGE ME</span>
 </div>
 <div class="accordion-content">

INSERT CONTENT HERE ********

 </div>
 <div class="accordion-separator"></div>
 </li>
 <li>
 <input type="radio" name="select" class="accordion-select" />
 <div class="accordion-title">
 <span>CHANGE ME</span>
 </div>
 <div class="accordion-content">

 INSERT STUFF HERE******

 </div>

 <div class="accordion-separator"></div>
 </li>

<li>
 <input type="radio" name="select" class="accordion-select" />

<div class="accordion-title">
 <span>CHANGE ME</span>
 </div>

<div class="accordion-content">

INSERT STUFF HERE******

</div>

 <div class="accordion-separator"></div>
 </li>

<li>
 <input type="radio" name="select" class="accordion-select" />
 <div class="accordion-title">
 <span>CHANGE ME</span>
 </div>
 <div class="accordion-content">

INSERT STUFF HERE******

</div>
 <div class="accordion-separator"></div>
 </li>

<li>
 <input type="radio" name="select" class="accordion-select" />
 <div class="accordion-title">
 <span>CHANGE ME</span>
 </div>
 <div class="accordion-content">

INSERT STUFF HERE******

 </div>
 <div class="accordion-separator"></div>
 </li>
 </ul>
</div></div>