@charset "utf-8";
<style>
/*Basic reset*/
* {margin: 0; padding: 0;}

#accordian {
 background: #AF5224;
 width: 250px;
 margin: 100px auto 0 auto;
 color: white;
 /*Some cool shadow and glow effect*/
 box-shadow: 
  0 5px 15px 1px rgba(0, 0, 0, 0.6), 
  0 0 200px 1px rgba(255, 255, 255, 0.5);
}
/*heading styles*/
#accordian h3 {
 font-size: 12px;
 line-height: 34px;
 padding: 0 10px;
 cursor: pointer;
 /*fallback for browsers not supporting gradients*/
 background: #A71C0C; 
 background: linear-gradient(#A71C0C, #002535);
}
/*heading hover effect*/
#accordian h3:hover {
 text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}

/*list items*/
#accordian li {
 list-style-type: none;
}
/*links*/
#accordian ul ul li a {
 color: white;
 text-decoration: none;
 font-size: 12px;
 line-height: 27px;
 display: block;
 padding: 0 15px;
 /*transition for smooth hover animation*/
 transition: all 0.15s;
}
/*hover effect on links*/
#accordian ul ul li a:hover {
 background: #4D1A0A;
 border-left: 5px solid lightgreen;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
 display: none;
}
#accordian li.active ul {
 display: block;
}
</style>


