/*
	Southside Dance version 2.0 by Craig Robertson
 	http://www.southsidedance.co.uk

	Contents
	
	1. Structure
	2. Header
	3. Navigation
	4. Content
	5. Form Elements
	6. Dropdown Menu by Chris Coyier

---------------------------------------------------------------
	1. Structure
------------------------------------------------------------ */

	html>body, html>body #container {
		height: auto;
	}
	body {
		background: url("../img/body.jpg") top center no-repeat fixed;
		margin: 0;
		padding: 0;
	}
	#container {
		background: url("../img/dance-images.jpg") no-repeat;
		position: relative;
		width: 100%;
		max-width: 1280px;
		margin: 0;
		padding: 0;
	}
	#main-content {
		padding: 30px 60px;
		overflow: hidden;
	}
	#homepage #main-content {
		width: 50%;
		float: left;
		padding: 30px 0 30px 60px;
	}
	#latest-news, #useful-links {
		width: 35%;
		float: right;
		padding: 30px 60px 0 0;
	}
	h1#branding-logo a {
		background: url("../img/branding-logo.png") no-repeat;
		position: absolute;
		top: 29px;
		left: 9px;
		height: 252px;
		width: 193px;
		text-indent: -999px;
	}
	
/* ------------------------------------------------------------
	2. Header
------------------------------------------------------------ */

	#header {
		background: url("../img/gradient.jpg") repeat-x;
		width: 100%;
		height: 187px;
	}
	#header span {
		position: absolute;
		top: 0;
		right: 0;
		background: url("../img/dance-images.jpg") no-repeat;
		height: 160px;
		width: 650px;
	}
		
/* ------------------------------------------------------------
	3. Navigation
------------------------------------------------------------ */

	p#accessibility {
		display: none;
	}
	#primary-navigation {
		position: absolute;
		top: 160px;
		right: 0;
		width: 650px;
		height: 25px;
	}
	#secondary-navigation {
		position: absolute;
		top: 0;
		left: 60px;
	}
	#secondary-navigation li {
		float: left;
		list-style: none;
		margin-right: 25px;
	}
	#secondary-navigation a:hover {
		text-decoration: underline;
	}
	
/* ------------------------------------------------------------
	4. Content
------------------------------------------------------------ */
	
	#classes-list img,
	#facilities-list img {
		float: left;
		margin-right: 15px;
	}
	#facilities-list img {
		border: 3px solid #666;
		padding: 2px;
	}
	#classes-list li,
	#facilities-list li,
	#teachers-list li,
	#gallery li {
		display: inline-block;
		margin-left: 0;
		float: left;
		list-style-image: none;
	}
	#gallery li {
		margin-right: 15px;	
	}
	#children-faqs,
	#adult-faqs {
		width: 45%;
		float: left;
	}
	#mid-physio-logo {
		background: url("../img/mid-physio-logo.gif") 0 8px no-repeat;
		padding-left: 110px;
	}
	#istd-logo {
		background: url("../img/istd-logo.gif") 0 8px no-repeat;
		padding-left: 110px;
	}
	#teachers-list li img {
		float: left;
		margin-right: 15px;
		border: 3px solid #CCC;
		padding: 2px;
		width: 133px;
		height: 200px;
	}
	#uniforms #main-content img {
		border: 1px solid #666;
		padding: 2px;
	}
	.uniform-details {
		border: 1px solid #999;
		background-color: #F2F2F2;
		float: left;
		overflow: hidden;
		padding: 15px;
		margin: 0 15px 15px 0;
		width: 29%;
		height: 500px;
	}
	#uniforms #main-content li {
		margin-bottom: 0;
	}

/* ------------------------------------------------------------
	5. Form Elements
------------------------------------------------------------ */
	
	label {
		width: 100px;
		float: left;
	}
	input[type="text"], textarea {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 13px;
		width: 300px;
		padding: 2px;
	}
	input[type="submit"], input[type="reset"], input[type="button"] {
		padding: 2px 4px;
	}
	.comments {
		vertical-align: top;
	}
	
/* ------------------------------------------------------------
	6. Tables
------------------------------------------------------------ */

	table {
		margin: 0 0 15px 1px;
		padding: 0;
	}
	th {
		border-bottom: 1px solid #97ACBD;
	}
	tr {
		border-bottom: 1px solid #97ACBD;
	}
	tr:hover {
		/*background-color: #FED3FF;*/
	}
	td {
		border-bottom: 1px solid #97ACBD;
		padding: 5px;
		margin: 0;
	}
	thead th {
		border-bottom: 2px solid #000;
		border-top: 0;
		padding: 5px;
		color: #000;
	}
	tbody th {
		padding: 5px;
	}
	tbody td {
		padding: 5px;
	}
	.timetable-header {
		padding-top: 50px;
	}
	
/* ------------------------------------------------------------
	6. Dropdown Menu by Chris Coyier	
	http://css-tricks.com/simple-jquery-dropdowns/
------------------------------------------------------------ */
	
	ul.dropdown li {
		font-weight: bold;
		float: left;
		zoom: 1;
		list-style: none;
		margin-left: 0; 
	}	
	ul.dropdown a:hover {
		background-color: rgba(0,0,0,.1);
	}
	ul.dropdown a:active {
		color: #ffa500;
	}
	ul.dropdown li a { 
		display: block;
		width: 128px;
		padding: 3px 0;
		border-left: 1px solid #999;
		border-right: 1px solid #FFF;
		color: #222;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-weight: bold;
		text-align: center;
		color: #000;
		text-decoration: none;
	}
	ul.dropdown li:last-child a { /* Doesn't work in IE */
		/*border-bottom: none; */
	} 
	ul.dropdown li.hover, ul.dropdown li:hover {
		background: #F6F6F6;
		position: relative;
	}
	ul.dropdown ul {
		width: 128px;
		visibility: hidden;
		position: absolute;
		top: 27px;
		left: 0;
	}
	ul.dropdown ul li {
		font-weight: normal;
		background: #F6F6F6;
		color: #000;
		margin: 4px 0;
		float: none;
		border: 1px solid #CCC;
	}
	ul.dropdown ul li a {
		width: 100%;
		display: inline-block;
		margin: 0;
		border: none;
	}