ul { margin:0; padding:0; }
ul.container { /* The topmost UL */ width:530px; margin:0; padding:0px; }
li { list-style:none; text-align:left; }
li.menu { /* The main list elements */ padding:5px 0 15px; width:100%; }
li.button a { /* The section titles */ display:block; overflow:hidden; padding:5px 5px 5px 25px; position:relative; width:530px; font: bold 12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 0px; background: url(../../images/picto_vert.gif) no-repeat 5px; text-transform: uppercase; }
li.button a:hover { /* Removing the inherited underline from the titles */ text-decoration:none; background: url(../../images/picto_vert.gif) no-repeat 5px; }
li.button a span { /* This span acts as the right part of the section's background */ height:30px; position:absolute; right:0; top:0; width:4px; display:block; }
/* Setting up different styles for each section color */


.dropdown { /* The expandable lists */ display:none; padding-top:5px; width:100%; }
.dropdown li { /* Each element in the expandable list */ margin:0px; padding:0px; color: #585570; font-size: 13px; line-height: 15px; }
/* The styles below are only necessary for the demo page */

h1 { font-family:"Myriad Pro", Arial, Helvetica, sans-serif; font-size:36px; font-weight:normal; margin-bottom:15px; }
h2 { font-family:"Myriad Pro", Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; padding-right:140px; right:0; text-align:right; text-transform:uppercase; top:15px; }
.clear { clear:both; }
#main { /* The main container */ margin:15px auto; text-align:center; width:920px; position:relative; }
a, a:visited { color:#518303; text-decoration:none; outline:none; }
a:hover { text-decoration:underline; }
p { /* The tut info on the bottom of the page */ padding:10px; text-align:center; }