/*   
Theme Name: South Main District
Theme URI: www.southmaindistrict.com
Description: Promotional site for The District
Author: Site design & production by Industrial Brand (tech@industrialbrand.com)
Author URI: www.industrialbrand.com
Version: 1.0

Colour Pallet: 
Orange: #d6492a
Brown: #685c53

*/

/* bit of a quick reset */
* {margin: 0px;	padding: 0px;}
a:focus { outline: none; }
html, body { height: 100%; }

/* Start site specific information */ 

body {
	font-size: 62.5%; 
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif; 
	background-color: #d7d7d7;
	color: #685c53; 	
	background-image: url('../images/wrapper_bg.png');
	background-repeat: repeat-y;
	background-position: top center;
}

#wrapper {
	width: 960px; 
	margin: 0 auto;	
	background-image: url('../images/wrapper_bg.png');
	background-repeat: repeat-y;
	background-position: top center;
}

#header {
	height: 88px;
	position: relative; 	
	background-color: white;
}

#maincol {
	float: right; 
	display: inline; 
	width: 621px; 
	position: relative;
	overflow: hidden;
	xbackground-color: white; 
}

#sidecol {
	width: 339px; 
	float: left; 
	display: inline;
	overflow: hidden;
	border-top: 26px solid #685c53;
}

#mainnav {
	height: 26px; 
	background-color: #685c53;
}


/* ================================================ Header Information ========== */
	#header h1 a {
		background: url('../images/h1_bg.png') no-repeat scroll top left;
		width: 131px;
		height: 65px;
		display: block; 
		text-indent: -9999em;
		position: absolute; 
		top: 12px; left: 26px;
	}
	
	#header .tagline {
		background: url('../images/header_tagline.png') no-repeat scroll top left;
		width: 181px;
		height: 9px;
		display: block; 
		text-indent: -9999em;
		position: absolute; 
		top: 56px; left: 633px;
	}
	
	#header #btn_register a {
		background: url('../images/register_btn.png') no-repeat scroll top left;
		width: 119px;
		height: 32px;
		display: block; 
		text-indent: -9999em;
		position: absolute; 
		left: 824px; 
		top: 47px;
	}

/* ================================================ Main Nav Information ========== */
#mainnav {
	position: absolute;
	width: 621px;
	z-index: 2;
}

#mainnav li {
	float: left;	
}

#mainnav a {
	color: #ccc;
	text-decoration: none;
	text-transform: uppercase;	
	display: inline;
	margin-right: 36px;	
	letter-spacing: 0.05em;	
	float: left;
	font-size: 1.2em;
	height: 26px; 
}

#mainnav a:hover {
	color: #f9fafc;
}

#mainnav ul {
	position: relative;
	top: 5px;	
	left: 26px; 
	width: 596px;
}

#mainnav #nav_contact a {
	margin-right: 0px;
}

#mainnav li ul {
	position: absolute; 
	left: -999em; 
	top: 20px;
	font-size: 0.85em;
	list-style: none;
	z-index: 5;
}

#mainnav li:hover ul, 
#mainnav li.sfhover ul {
	left: auto;
}

#mainnav li ul li a {
	margin-right: 17px;
	height: 16px;
	padding-top: 8px;
}

#mainnav #nav_district ul {
	width: 520px;
}

#mainnav #nav_neighbourhood ul {
	width: 420px;	
}

	/* Getting the sub navs to stay active on the proper sub pages */
	#pg_district #mainnav #nav_district ul {
		left: auto;
	}

	#pg_neighbourhood #mainnav #nav_neighbourhood ul {
		left: auto;
	}
	
	/* Setting active states per page.  */
	#mainnav .current_page_item a {
		color: #f9fafc;
	}
	
	/* resets the children of the main nav to default colour */
	#mainnav .current_page_item li a {
		color: #ccc;		
	}
	
	/* give the sec nav link back its hover state */
	#mainnav .current_page_item li a:hover {
		color: #f9fafc;		
	}
	
	/* And set the one child back to the over colour */
	#mainnav .current_page_item .current_page_item a{
		color: #f9fafc;
	}

/* ================================================ Front Page Specific Information ========== */

#pg_front {
	background-image: url('../images/frontpage_body_bg.png'); /* cancels the faux column background image on inner pages */	
}

#pg_front #wrapper {
	background-image: url('../images/frontpage_wrapper_bg.gif'); 
	height: 925px;
}

#pg_front #header {
	background: url('../images/frontpage_header_bg.jpg') no-repeat scroll top left;
}

#pg_front #content #maincol {
	background: url('../images/frontpage_maincol_bg.jpg');
	background-position: 0 26px; 
	background-repeat: no-repeat; 
	height: 802px;
	background-color: white;
}

#pg_front #header .tagline {
	background-image: url('../images/frontpage_tagline.png');
}

#pg_front #header #btn_register a {
	background-image: url('../images/frontpage_register_btn.png')
}

#pg_front #content #maincol h1 {
	background: url('../images/frontpage_h1_bg.png') no-repeat scroll top left;
	width: 218px;
	height: 103px;
	position: absolute; 
	top: 308px; left: 109px;
	text-indent: -9999em;
}

#pg_front h2 {
	background: url('../images/frontpage_sidebar_h2.png') no-repeat scroll top left;
	width: 286px;
	height: 19px;
	text-indent: -9999em;
	margin: 26px auto;
}

#pg_front #sidecol h3 {
	text-transform: lowercase; 
	background-color: #d6492a;
	color: white; 
	width: 134px; 
	padding-left: 26px;
	height: 26px;
	font-size: 2.5em;
}

#pg_front #sidecol p {
	margin: 0 26px 26px 26px;
	line-height: 1.6em;
}

#pg_front #sidecol h4 {
	font-size: 1.2em;
	color: #d6492a; 
	text-transform: uppercase;
	margin: 12px 0 0 26px;
}

#pg_front #sidecol a {
	color: #d6492a;
	text-decoration: none;
}

#pg_front #sidecol a:hover {
	text-decoration: underline;
}

/* ================================================ Content Columns ========== */
#maincol_masthead {
	height: 391px;
}

#maincol h2 {
	font-size: 40px; 
	text-transform: lowercase;
	margin: 54px 26px 16px 26px ;
}

#maincol h3 {
	font-size: 14px; 
	margin: 27px 26px 8px 26px;
	text-transform: uppercase;
}

#maincol p {
	margin: 0 26px 13px 26px ;
	font-size: 1.4em; 
	line-height: 1.28em;
}
	
#maincol img {
	margin-top: 26px;
}	

#sidecol blockquote {
	color: white; 
	font-size: 1.6em; 
	line-height: 1.375em;
	font-family: georgia, serif; 
	font-style: italic;
	margin: 26px;	
	display: none; /* hides it until jquery fades it in to avoid flickr */
}

#sidecol blockquote em {
	font-style: normal;
}

#nav_socialMedia {
	font-size: 1.2em; 	
}

#nav_socialMedia li {
	background-repeat: no-repeat; 
	background-position: 0 6px;	
	padding: 10px 37px;
	margin-left: 26px;
	list-style: none;
}

#nav_socialMedia #btn_facebook {
	background-image: url('../images/socialMedia_facebook.png');	
}

#nav_socialMedia #btn_flickr {
	background-image: url('../images/socialMedia_flickr.png');	
}

#nav_socialMedia #btn_twitter {
	background-image: url('../images/socialMedia_twitter.png');	
}
	/* =========Galleria Stylings ========== */
	
	#sidecol_gallery {
		background-color: #685c53;
		height: 470px;
	}	
	
	.galleria {
		list-style:none;
		margin: 0 auto; 
		width: 320px;
	}
	
	.galleria li {
		width:54px;
		height:54px;
		overflow:hidden;
		float:left;
		border: 1px solid #685c53;
		background-color: #777;
		margin: 4px;
	}
	
	.galleria li a {
		display:none;
	}
	
	.galleria li a:hover {
		border: 1px solid #d6492a;
	}
	
	.galleria li div {
		position:absolute;
		display:none;
		top:0;
		left:180px
	}
	
	.galleria li div img {
		cursor:pointer
	}
		
	.galleria li.active div img,
	.galleria li.active div {
		display:block
	}
	
	.galleria li img.thumb {
		cursor:pointer;
	}
	
	span.caption {
		display: none;		
	}
	
	* html .galleria li div span { /* MSIE bug */
		width:400px
	} 

		/* ========= News Page ========== */
		.navigation {
			font-size: 1.2em; 	
			margin: 0 26px; 
			padding-bottom: 26px;
		}
		
		.navigation .alignleft {
			float: left; 
		}
		
		.navigation .alignright {
			float: right;
		}
		
		/* ========= Contact Page ========== */
		.contact #nav_socialMedia li {
			color: #ccc; 
		}
		
		.contact #nav_socialMedia li a {
			color: white;
		}
		
		/* ========= Interactive Map Tabs ========== */
		.tabContainer .tab {
			display: none;
			position: relative;
		}
		
		.tabContainer .current {
			display:block; 
		}
		
		.tabContainer .tab h3 {
			margin-left: 26px;
		}
		
		ul.tabNav {
			margin: 0 26px;
			padding: 0 26px;
			border-bottom: 1px solid #685c53;
			position: relative; 
			bottom: 13px;
		}
		
		ul.tabNav li {
			display: inline;
			margin-right: 26px;
		}
		
		ul.tabNav li a {
			text-transform: lowercase;
			font-size: 2em;
			text-decoration: none;
			color: #685c53;
		}
		
		ul.tabNav li a:hover {
			color: black;
			
		}
		
		ul.tabNav li.current a {
			border-top: 1px solid #685c53;
			border-left: 1px solid #685c53;
			border-right: 1px solid #685c53;
			border-bottom: 1px solid white;
			padding: 0 5px;	
		}
		
			/* Stylings for the ammenities list (table) itself */
			.tabContainer table {
				margin-left: 26px;
				font-size: 1.2em;
			}

/* ================================================ Links ========== */
a:link, a:visited, a:active {
	color: #d6492a; 
	text-decoration: none; 
}

a:hover {
	text-decoration: underline;
	
}

/*
	Did you hear the one about the king? It ruled!
*/