ul{
	margin:0;
	padding:0;
}

ul.container{
	/* The topmost UL */
	width:240px;

}

li{
	list-style:none;
	text-align:left;
}

li.menu{
	/* The main list elements */
	padding:1px 0;
	width:100%;
}

li.button a {
    display: block;
    font-family: BPreplay,Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    height: 41px;
    overflow: hidden;
    padding: 25px 20px 0;
    position: relative;
    text-align: left;
    width: 195px;
}
li.button a:hover{
	/* Removing the inherited underline from the titles */
	text-decoration:none;
}

li.button a span{

	position:absolute;
	right:4px;
	top:20px;

	display:block;
}

/* Setting up different styles for each section color */
li.button a.blue:hover{ color:#882E02; background:#936903;}
li.button a.blue{background:#ffd800; color:#882E02;}
li.button a.blue span{margin:0px;}

li.button a.green:hover{ color:#882E02; background:#936903;}
li.button a.green{ color:#882E02; background:#ffd800;}
li.button a.green span{ margin:0px;}

li.button a.orange:hover{ color:#882E02; background:#936903;}
li.button a.orange{background:#ffd800;color:#882E02;}
li.button a.orange span{margin:0px;}

li.button a.red:hover{ color:#882E02; background:#936903;}
li.button a.red{background:#ffd800; color:#882E02;}
li.button a.red span{ margin:0px;}

/* The hover effects */

li.button a:hover{ background-position:bottom left;}
li.button a:hover span{ background-position:bottom right;}

.dropdown{
	/* The expandable lists */
	display:none;
	padding-top:1px;
	width:100%;
}

.dropdown li{
	/* Each element in the expandable list */
	background-color:#373128;
	border:1px solid #40392C;
	color:#CCCCCC;
	margin:5px 0;
	padding:4px 18px;
	width:197px;
}


/* The styles below are only necessary for the demo page */




a, a:visited {
	color:#FFF;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

p{
	/* The tut info on the bottom of the page */
	padding:0px;
	text-align:left;
}