/*	------------------------------

	SportPark CSS
	
	1. Typography
	2. Navigation
	3. Main layout
	4. Forms
	5. General classes and IDs
	6. Specific layouts and styles
		6.1. Newsletter sign up
		6.2. List with thumbnail photo
		6.3. News and events (main content)
		6.4. Latest news (sidebar)
		6.5. Contact page
		6.6. Google Map
		6.7. Main news article link
		6.8. Main news article link
		6.9. Home key points
		6.10. Slideshow
		6.11. Meet the team
		6.12. Home page organisation logos
		6.13. Travel Plan download
		6.14. Home page themes
		6.15. About page tours
		6.16. Newsletter archive
		6.17. Video
	
----------------------------------  */

@import url("reset.css");

#accessibility {
	position: absolute;
	left: -9999px;
}

html {
	height: 100%;
}

body {
	font: 75%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #555;
	height: 100%;
	background: url(../img/body-bg.png) repeat-x left 490px;
}


/*	--------------------

1. Typography
	
------------------------  */

h1 a {
	text-indent: -9999px;
	width: 240px;
	height: 62px;
	background: url(../img/logo.png) no-repeat left top;
	margin-bottom: 8.25em;
	z-index: 100;
	display: block;
	border: 0;
	float: right;
}

h2 {
	color: #c03;
	font-size: 1.75em;
	margin: 0 0 0.5em;
	letter-spacing: -0.04em;
	line-height: 1.75em;
	position: relative;
}

h3 {
	color: #c03;
	font-size: 1.25em;
	margin: 0 0 0.75em;
}

	h3 strong {
		color: #555;
	}

h4 {
	font-size: 1em;
	margin: 0 0 1.5em;
	color: #c03;
}

p {
	margin: 0 0 1.5em;
}

ul {
	list-style-type: disc;
	margin: 0 1.5em 1.5em 1.5em;
}

	li ul {
		margin: 0 1.5em;
		list-style-type: circle;
	}

a {
	color: #46066a;
	border-bottom: 1px dotted #46066a;
	text-decoration: none;
}

a:hover,
a:focus {
	color: #875d9e;
}

p img.right {
	float: right;
	margin: 3px 0 1.5em 1.5em;
}

p img.left {
	float: left;
	margin: 3px 1.5em 1.25em 0;
}

sup {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
	font-size: 75%;
	bottom: 1ex;
}


/*	--------------------

2. Navigation

------------------------  */
	
#nav {
	list-style-type: none;
	margin: 0;
	position: absolute;
	right: 0;
	top: 135px;
	font-size: 1.167em;
	font-weight: bold;
	z-index: 10;
}

	#nav li {
		float: left;
		margin-left: 12px;
	}
	
		#nav li a {
			color: #330066;
			text-decoration: none;
			padding: 0 5px 3px 4px;
			display: block;
			border: 0;
		}
		
		#nav li a:focus,
		#nav li a:hover {
			color: #306;
			border-bottom: 3px solid #306;
		}
		
		.home-page #nav #nav-home a, .home-page #nav #nav-home a:focus, .home-page #nav #nav-home a:hover,
		.about-page #nav #nav-about a, .about-page #nav #nav-about a:focus, .about-page #nav #nav-about a:hover,
		.visiting-page #nav #nav-visiting a, .visiting-page #nav #nav-visiting a:focus, .visiting-page #nav #nav-visiting a:hover,
		.orgs-page #nav #nav-orgs a, .orgs-page #nav #nav-orgs a:focus, .orgs-page #nav #nav-orgs a:hover,
		.facilities-page #nav #nav-facilities a, .facilities-page #nav #nav-facilities a:focus, .facilities-page #nav #nav-facilities a:hover,
		.news-page #nav #nav-news a, .news-page #nav #nav-news a:focus, .news-page #nav #nav-news a:hover,
		.jobs-page #nav #nav-jobs a, .jobs-page #nav #nav-jobs a:focus, .jobs-page #nav #nav-jobs a:hover,
		.contact-page #nav #nav-contact a, .contact-page #nav #nav-contact a:focus, .contact-page #nav #nav-contact a:hover {
			border-bottom: 3px solid #c03;
			color: #c03;
			cursor: default;
		}
		

/*	--------------------

3. Main layout
	
------------------------  */

#container {
	min-height: 100%;
	position: relative;
}

#main {
	width: 960px;
	margin: 0 auto;
	padding: 0 0 185px;
	overflow: hidden;
	position: relative;
}

#header {
	height: 515px;
	margin: 0 0 1.5em;
	padding: 30px 0 0;
	width: 100%;
}

#header #header-content {
	width: 960px;
	margin: 0 auto;
	position: relative;
	background: url(../img/lines-figures.png) no-repeat left top;
}

	#header #banner,
	#header #map-banner {
		position: relative;
		width: 960px;
		height: 300px;
		margin: 0;
		padding: 30px 0 0;
		overflow: hidden;
		clear: both;
	}
	
		#header #banner span {
			width: 960px;
			height: 300px;
			display: block;
			background: url(../img/photo-border.png) no-repeat left top;
			position: absolute;
			left: 0;
			top: 30px;
		}
	
	#header #flashcontent {
		border: 2px solid #ddd;
		padding: 3px 2px;
		overflow: hidden;
	}
	
		#header #flashcontent embed {
			float: left;
		}

#content {
	float: left;
	font-size: 1.083em;
	padding-bottom: 2em;
	width: 620px;
}

#sidebar {
	width: 265px;
	float: right;
	padding: 12px 0 12px 45px;
	background: url(../img/sidebar-bg-bottom.png) no-repeat left bottom, url(../img/sidebar-bg.png) no-repeat left top;
}

#sidebar h3 {
	margin-bottom: 0.75em;
}

#footer {
	width: 100%;
	padding: 12px 0 0;
	position: absolute;
	bottom: 0;
	clear: both;
	background: url(../img/footer-bg.png) repeat-x left top;
}

	#footer h2 {
		color: #c03;
		line-height: 1;
		margin: -1.405em 0 0.5em;
	}
	
	#footer .logos {
		float: left;
		padding: 3px 0 2.5em;
		margin: 0;
	}
	
		#footer .logos a {
			margin-right: 20px;
			border: 0;
		}
	
	#footer .lu-logo {
		float: right;
		padding-top: 12px;
		margin: 0;
	}
	
		#footer .lu-logo a {
			margin-right: 10px;
			border: 0;
		}
	
	#footer .vcard {
		background: #333;
		clear: both;
		color: #bbb;
		line-height: 1.25;
		padding: 9px 0 11px;
	}
	
		#footer .vcard p {
			width: 960px;
			margin: 0 auto;
			padding: 0;
		}
	
	#footer #footer-content {
		width: 960px;
		margin: 0 auto;
	}
	
	#footer span {
		padding: 0 0 0 22px;
		margin-left: 15px;
	}
	
	#footer .tel {
		background: url(../img/icon-tel2.png) no-repeat left center;
	}
	
	#footer .email {
		background: url(../img/icon-email2.png) no-repeat left center;
		padding-left: 25px;
	}
	
	#footer a {
		border: 0;
		color: #bbb;		
	}
	
	#footer a:focus,
	#footer a:hover {
		color: #ddd;
	}	
	
	
/*	--------------------

4.	Forms

------------------------  */

form p {
	margin: 0 0 0.75em;
	overflow: hidden;
	clear: both;
}

label {
	float: left;
	width: 100px;
	padding-top: 4px;
}

input.text {
	color: #777;
	float: left;
	width: 200px;
	padding: 4px 5px 5px;
	border: 1px solid #cbcbcb;
	font: 100% "Helvetica Neue", Helvetica, Arial, sans-serif;
}

textarea {
	color: #777;
	float: left;
	width: 250px;
	padding: 4px 5px 5px;
	border: 1px solid #cbcbcb;
	font: 100% "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.submit {
	padding: 0.5em 0 0.25em 0;
	margin-bottom: 0;
}
	
	.submit input {
		color: #fff;
		font: 100% "Helvetica Neue", Helvetica, Arial, sans-serif;
		background: #306 url(../img/button-overlay.png) repeat-x left 50%;
		border: 0;
		font-weight: bold;
		line-height: 1.25;
		padding: 4px 10px 5px;
		display: block;
		min-width: 100px;
		-moz-border-radius: 3px;
	    -webkit-border-radius: 3px;
	}
	
	.submit input:focus,
	.submit input:hover {
		cursor: pointer;
		background: #306;
	}

#contact {
	width: 580px;
	background: #f9f9f9;
	padding: 8px 18px 12px;
	border: 1px solid #ebebeb;
}

	#contact fieldset {
		width: 290px;
		float: left;
	}

#directions {
	margin: 0 0 0.25em;
	overflow: hidden;
}

	#directions label {
		font-weight: bold;
		display: block;
		width: 100%;
		margin: 0 0 0.5em;
	}
	
	#directions input.text {
		margin: 0 10px 0.25em 0;
		width: 203px;
	}
		
	#directions .submit {
		float: left;
		clear: none;
		padding: 0;		
	}
	
		#directions .submit input {
			width: 40px;
			min-width: 20px;
			float: left;
			display: inline;									
		}
			
	
/*	--------------------

5.	General classes and IDs

------------------------  */

.download {
	margin-left: 24px;
	position: relative;
}

	.download img {
		position: absolute;
		left: -24px;
		top: 0;
		padding-right: 8px;
	}

.seperator em {
	color: #bbb;
	font-style: normal;
	padding: 05px;
}

.border {
	border-top: 1px solid #eee;
	padding-top: 1em;
}

.border-bottom {
	border-bottom: 1px solid #eee;
	padding-bottom: 1.75em;
}

/*	--------------------

6.	Specific layouts and styles

------------------------  */

/*	6.1. Newsletter sign up  */

#newsletter {
	background: #fcfcfc url(../img/newsletter-border.png) no-repeat left bottom;
	border-top: 1px solid #ebebeb;
    padding: 12px 20px;
    width: 220px;
}

	#newsletter h3 {
		color: #c03;
		font-size: 1.167em;
	}
	
	#newsletter label {
		font-weight: bold;
		width: 50px;
	}	
	
	#newsletter input.text {
		width: 155px;
		border-color: #dbdbdb;
	}
	
	#newsletter .submit {
		padding-left: 50px;
		margin: 0 0 1em;
	}


/*	6.2. List with thumbnail photo  */

.two-cols {
	margin: 0;
	padding: 0;
	list-style-type: none;
	border-top: 1px solid #eee;
	padding-top: 1em;
}

	.two-cols li {
		border-bottom: 1px solid #eee;
		position: relative;
		padding: 0 0 1em 130px;
		margin: 0 0 1em;
		width: 490px;
	}
	
	.two-cols img {
		position: absolute;
		left: 0;
		top: 5px;
	}
	
	.two-cols h3,
	.two-cols p {
		margin: 0 0 0.5em;
	}
	
		.two-cols h3 a {
			color: #c03;
			border: 0;
		}
		
		.two-cols h3 a:focus,
		.two-cols h3 a:hover {
			color: #c03;
			border-bottom: 1px dotted #c03;
		}
		

/*	6.3. News and events (main content)  */

.two-cols.news h3 {
	margin: 0;
}

.two-cols.news .date,
#news-article .date {
	color: #999;
}

.two-cols.news a img {
	position: absolute;
	left: 0;
	top: 3px;
	border: 2px solid #ddd;
}

.two-cols.news a:focus img,
.two-cols.news a:hover img {
	border-color: #bbb;
}

#news-article h2 {
	margin-bottom: 0;
}


/*	6.4. Latest news (sidebar)  */

#sidebar #news {
	margin: 0 0 2em;
	padding: 0;
	list-style-type: none;
	width: 260px;
}

	#sidebar #news li {
		position: relative;
		padding: 0 0 0 66px;
		margin: 0 0 1.25em;
		width: 194px;
		clear: both;
	}
	
	#sidebar #news a {
		display: inline;
	}
	
	#sidebar #news img {
		position: absolute;
		left: 0;
		top: 2px;
		border: 1px solid #ebebeb;
	}
	
	#sidebar #news img:focus,
	#sidebar #news img:hover {
		border-color: #cbcbcb;
	}
	
	#sidebar #news h4 {
		margin: 0;
		padding: 0;
	}
	
	#sidebar #news p {
		margin: 0;
	}


/*	6.5. Contact page  */

#content .vcard {
	border-bottom: 1px solid #eee;
	margin-bottom: 1em;
	overflow: hidden;
	padding-bottom: 1.5em;		
}

#content .vcard.visiting {
	border-bottom: 0;
	margin-bottom: 1.5em;
	padding-bottom: 0;
}

	#content .vcard a {
		border: 0;		
	}

	#content .vcard .email {		
		background: url(../img/icon-email-contact.png) no-repeat left center;
		font-size: 1.154em;
		font-weight:  bold;
		padding: 5px 20px 5px 35px;		
	}
	
	#content .vcard .tel {
		background: url(../img/icon-tel-contact.png) no-repeat left center;
		font-size: 1.154em;
		font-weight:  bold;
		padding: 5px 20px 5px 35px;
	}
	
	#content .vcard .adr {
		background: url(../img/icon-address.png) no-repeat left 1.75em;
		float: left;
		padding: 1.5em 0 0 35px;
		width: 400px;
	}
	
	#content .vcard.visiting .adr {
		background: none;
		padding: 0;
	}
	
		#content .vcard .adr a {
			border: 0;
			color: #444;
			display: block;
		}
		
		#content .vcard .adr a:hover {
			cursor: text;	
		}
		
	#content .vcard .vcard-download {
		background: #f9f9f9 url(../img/icon-vcard.png) no-repeat 10px center;
		border: 1px solid #ebebeb;
		display: block;
		line-height: 1;
		float: right;
		margin: 1.25em 0 0;
		padding: 12px 10px 13px 46px;
	}
	
	#content .vcard .vcard-download:focus,
	#content .vcard .vcard-download:hover {
		background-color: #fcfcfc;
	}
	

/*	6.6. Google Map  */

#map_canvas {
	width: 956px;
	height: 296px;
	position: relative;
	border: 2px solid #ddd;
	clear: both;
}

#map_canvas a {
	border: 0;
}

#header #banner #map_canvas span {
	width: auto;
	height: auto;
	display: inline;
	background: none;
	position: relative;
}

/*	6.7. Main news article link  */

#banner a {
	background: url(../img/banner-link-bg.png) repeat left top;
	position: absolute;
	right: 0;
	bottom: 50px;
	width: 320px;
	padding: 10px 20px 15px;
	border: 0;
	color: #ddd;
	font-size: 1.083em;
}

#banner .wide {
	width: 420px;
}

#banner .low {
	bottom: 30px;
}

#banner a:focus,
#banner a:hover {
	color: #aaa;
}

	#banner a strong {
		display: block;
		font-size: 1.231em;
		color: #fff;
		margin: 0;
		border: 0;
	}
	
	#banner a:focus strong,
	#banner a:hover strong {
		color: #bbb;
	}
	
	#banner em {
		font-style: normal;
		color: #aaa;
		display: block;
		margin: 0 0 0.5em;
	}
	
	#banner a:focus em,
	#banner a:hover em {
		color: #777;
	}
	
	
/*	6.8. Main news article link  */	

#sidebar #about {
	margin: 0 0 2em;
	padding: 0;
	list-style-type: none;
}

	#sidebar #about li {
		position: relative;
		margin: 0 0 15px;
		width: 194px;
		padding: 0 0 0 66px;
	}
	
	#sidebar #about img {
		position: absolute;
		left: 0;
		top: 2px;
		border: 1px solid #ebebeb;
	}
	
	#sidebar #about img:focus,
	#sidebar #about img:hover {
		border-color: #cbcbcb;
	}
	
	#sidebar #about .active {
		background: #f8f8f8;
		margin: -5px -25px 8px -25px;
		width: 194px;
		padding: 5px 25px 7px 91px;
	}
	
	#sidebar #about .active img {
		position: absolute;
		left: 25px;
		top: 7px;
		border: 1px solid #ebebeb;
	}
	
	#sidebar #about .active img:focus,
	#sidebar #about .active img:hover {
		border-color: #cbcbcb;
	}	
	
	#sidebar #about h4 {
		margin: 0 0 0.25em;
		font-size: 1.083em;
	}
	
	#sidebar #about p {
		margin: 0;
	}
	

/*	6.9. Home key points  */

#key-headings {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

	#key-headings li {
		margin: 0;
		padding: 0 0 0 25px;
		width: 595px;
	}
	
		#key-headings #building {
			background: url(../img/icon-home-building.png) no-repeat left 4px;
		}
		
		#key-headings #access {
			background: url(../img/icon--home-access.png) no-repeat left 4px;
		}
		
		#key-headings #support {
			background: url(../img/icon--home-support.png) no-repeat left 4px;
		}
	
	
		#key-headings li h3 {
			margin: 0;
		}
		
		#key-headings li p {
			margin-top: 0;
		}	


/*	6.10. Slideshow  */

#header #slideshow-wrapper {
	position: relative;
	width: 960px;
	height: 300px;
	margin: 0;
	clear: both;
	padding: 30px 0 0;
}

	#header #slideshow-wrapper span {
		width: 960px;
		height: 300px;
		display: block;
		background: url(../img/photo-border.png) no-repeat left top;
		position: absolute;
		left: 0;
		top: 30px;
	}
	
#header #slideshow {
	z-index: -10;
	overflow: hidden;
	width: 960px;
	height: 300px;
}

#header #next {
	position: absolute;
	top: 153px;
	right: -50px;
	width: 54px;
	height: 54px;
	display: block;
	text-indent: -9999px;
	background: url(../img/slideshow-nav.png) no-repeat -54px top;
	border: 0;
}

#header #next:focus,
#header #next:hover {
	background-position: -54px -54px;
}

#header #prev {
	position: absolute;
	top: 153px;
	left: -50px;
	width: 54px;
	height: 54px;
	display: block;
	text-indent: -9999px;
	background: url(../img/slideshow-nav.png) no-repeat left top;
	border: 0;
}

#header #prev:focus,
#header #prev:hover {
	background-position: left -54px;
}


/*	6.11. Meet the team  */

.two-cols.team li {
	width: 490px;
}

.two-cols.team img {
	border: 1px solid #ddd;
}

.two-cols.team h3 {
	margin: 0;
}

.two-cols.team span {
	padding: 0 0 0 22px;
	margin-right: 10px;
}

.two-cols.team .tel {
	background: url(../img/icon-tel.png) no-repeat left center;
}

.two-cols.team .email {
	background: url(../img/icon-email.png) no-repeat left center;
}

.two-cols.team blockquote {
	background: url(../img/quote-begin.png) no-repeat left 2px;
	padding: 0 0 0 15px;
	font-style: italic;
	color: #777;
	width: 450px;
}


/*	6.12. Home page organisation logos  */

#orgs ul {
	margin: 0 0 0 -16px;
	width: 636px;
	padding: 0;
	list-style-type: none;
}

	#orgs li {
		float: left;
		margin: 0 0 1.5em 16px;		
	}
	
	#orgs .blank {
		width: 90px;
		height: 68px;
		background: url(../img/logo-bg.png) no-repeat left -68px;
	}
	
		#orgs li a {
			border: 0;
			width: 90px;
			height: 68px;
			display: block;
			background: url(../img/logo-bg.png) no-repeat left top;
		}
		
		#orgs li a:focus,
		#orgs li a:hover {
			background-position: -90px top;
		}
		
			#orgs li a img {
				border: 0;
				width: 90px;
				height: 68px;
			}


/*	6.13. Travel Plan download  */

#travel-plan {
	padding-top: 1.25em;
}

	#travel-plan a {
		text-decoration: none;
		color: #333;
		display: block;
		border: 0;
		border: 2px solid #e2e2e2;
		padding: 14px 50px 16px 78px;
		position: relative;
		background: url(../img/arrow-down.png) no-repeat 210px center;
	}
	
	#travel-plan a:focus,
	#travel-plan a:hover {
		text-decoration: none;
		color: #666;
	}
	
		#travel-plan a strong {
			display: block;
			text-transform: uppercase;
			color: #46066a;
			font-size: 110%;
		}
		
		#travel-plan a:focus strong,
		#travel-plan a:hover strong {
			color: #875d9e;
		}
	
	#travel-plan img {
		position: absolute;
		left: -8px;
		top: -10px;
		border: 0;
	}


/*	6.14. Home page themes  */

#themes {
	margin: 0 0 1em -22px;
	padding: 0;
	list-style-type: none;
	width: 642px;
	overflow: hidden;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	padding: 1.5em 0 1em;
}

	#themes li {
		margin: 0 0 0 22px;
		width: 192px;
		float: left;
	}
	
		#themes li > a {
			border: 0;
		}
		
		#themes li img {
			border: 1px solid #ccc;
			margin-bottom: 0.25em;
		}
	
		#themes li h3 {
			margin-bottom: 0.25em;
			text-transform: uppercase;
		}
		
			#themes li h3 a {
				color: #c03;
				border: none;
			}
		
		#themes li p {
			margin-bottom: 0.5em;
		}


/*	6.15. About page tours  */

#tours {	
	font-size: 0.923em;
	font-weight: bold;
	list-style-type: none;
	margin: 0 0 0 -20px;
	overflow: hidden;
	padding: 0;		
	width: 640px;
}

	#tours li {		
		margin: 0 0 0 20px;
		padding-bottom: 1.5em;
		width: 140px;
		float: left;
		text-align: center;
	}
	
		#tours li a,
		#sb-nav a {
			border: 0;
		}
		
		#tours li a:focus,
		#tours li a:hover {
			color: #c03;
		}
		
			#tours li a img {
				border: 2px solid #ccc;
				display: block;
				margin-bottom: 0.5em;
			}
			
			#tours li a:focus img,
			#tours li a:hover img {
				border-color: #c03;
			}


/*	6.15. Meeting rooms gallery  */

#gallery {
	background: #fcfcfc;
	border: 1px solid #ebebeb;
    float: right;
    margin-left: 20px;
    padding: 12px 20px 0;
    width: 260px;
}

	#gallery ul {	
		font-size: 0.923em;
		font-weight: bold;
		list-style-type: none;
		margin: 0 0 0 -10px;
		overflow: hidden;
		padding: 0;		
		width: 270px;
	}
	
		#gallery ul li {		
			margin: 0 0 0 10px;
			padding-bottom: 1.5em;
			width: 80px;
			float: left;
			text-align: center;
		}
		
			#gallery ul li a {
				border: 0;
			}
			
			#gallery ul li a:focus,
			#gallery ul li a:hover {
				color: #c03;
			}
			
				#gallery ul li a img {
					border: 2px solid #ccc;
					display: block;
					margin-bottom: 0.5em;
				}
				
				#gallery ul li a:focus img,
				#gallery ul li a:hover img {
					border-color: #c03;
				}

/*	6.16. Newsletter archive  */

#newsletter-archive {
	list-style-type: none;
	margin: 0 0 2em -19px;
	overflow: hidden;
	padding: 0;
}

	#newsletter-archive li {
		float: left;
		margin: 0 0 0 19px;
		padding-bottom: 0.5em;
		width: 123px;
	}
	
		#newsletter-archive li a {
			background: url(../img/icon-newsletter.png) no-repeat 3px center;
			border: 0;
			display: block;
			padding-left: 20px;
			width: 103px;			
		}

/*	6.17. Video  */

div.video {
	margin: 0 0 2em;
	position: relative;
}

	div.video a {
		border: 0;
	}
	
		div.video a strong {
			background: url(../img/icon-play.png) no-repeat left top;
			display: block;
			left: 85px;
			height: 63px;
			position: absolute;
			top: 24px;
			width: 90px;
		}
		
		div.video a:focus strong,
		div.video a:hover strong {
			background-position: left -437px;
		}