/*
  CSS 
  W3C Mobile Web: Best Practices
  Author: Miguel A. Rodriguez-Garcia
*/

/* GOOGLE FONTS */
@import url(http://fonts.googleapis.com/css?family=Redressed);

/* GENERAL STYLES */
html, body{
	font-family: Verdana;
	font-size: 12px;
	margin: 0px;
}

h1{
	font-family: 'Redressed', cursive;
	color: #FFFFFF;
	padding: 10px;
	margin: 0px;
	font-weight: normal;
}

ul{
	padding: 0px;
	margin: 0px;
}

ul li{
	list-style-type: none;
}

.clearfix{
	clear: both;
}


/* MAIN CONTAINER */
div#main-container{
	padding-bottom: 10px;
}

	/* HEADER */
	header{
		text-align: center;
		background-color: #000000;
		padding-top: 5px;
	}

	nav#main-navigation{
		padding: 0px;
		background-color: #CCCCCC;
		box-shadow: inset 0px 5px 5px -5px rgba(0, 0, 0, 1); 
		/*The layer grows with the content*/
		float: left;
		width: 100%;
	}


		nav#main-navigation ul li{
			padding: 5px 0px;
			float: left;
			width: 33%;
			text-align: center;
		}	

		nav#main-navigation ul li a{
			padding: 10px 10px 10px 10px;
			background-color: #a90329;
			display: block;
			margin: 5px;
			text-decoration: none;
			color: #FFFFFF;
			height: 35px;
			border-radius: 5px;
		}	

		nav#main-navigation ul li a:hover{
			background-color: #000000;
		}	

	/* MAIN CONTENT */
	article#main-content{
		text-align: center;
	}

		section#symphonies{

		}

			section#symphonies dl{
				text-align: left;
				padding: 0px 20px 20px 20px;
				margin: 0px;
			}

			section#symphonies dl dt{
				margin-top: 10px;
				font-size: 15px;
				background-color: #E1E1E1;
				padding: 10px;	
			}

			section#symphonies dl dd{
				margin: 0px;
				background-color: #CECECE;
				font-size: 10px;
			}

				section#symphonies dl dd ul li{
					padding: 5px 20px;
				}

	/* FOOTER */
	footer nav ul li{
		border-bottom: 1px solid #600000;
		border-top: 1px solid #600000;

		/*gradient*/		
		background: -webkit-linear-gradient(top,  #a90329 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #a90329 0%,#6d0019 100%); /* Opera 11.10+ */
		background: linear-gradient(to bottom,  #a90329 0%,#6d0019 100%); /* W3C */
	}
	
		footer nav ul li a{
			display: block;
			width: 90%;
			padding: 20px 5%;
			text-decoration: none;
			color: #FFF;
			font-weight: bold;
		}

		footer nav ul li a:hover,
		footer nav ul li ul li a:hover{
			text-decoration: underline;
		}

		footer nav ul li:hover{
			/*gradient*/
			background: -webkit-linear-gradient(top,  #6d0019 0%,#a90329 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  #6d0019 0%,#a90329 100%); /* Opera 11.10+ */
			background: linear-gradient(to bottom,  #6d0019 0%,#a90329 100%); /* W3C */
		}		

		footer nav ul li ul li{
			width: 95%;
			margin: 10px auto;
			border: 1px dotted #FFFFFF;
			background: #600000;
		}

		footer nav ul li ul li:hover{
			background: #430000;
		}