/*  

	CHDS default style sheet
	http://caters-hardy.com/
	---
	SM of CHDS, 2008


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


/* 0 - backgrounds 
--------------------- */
body { background: #9b9983 url("../images/background_glow.jpg") no-repeat center 162px; }
#top { background: transparent url("../images/header_glow.jpg") no-repeat center top; }
#container { background: transparent url("../images/header_bg.jpg") repeat-x center top; }
#masthead { background: transparent url("../images/home_main_bg.png") no-repeat center top; }

	
/* 1 - universal 
--------------------- */
body { 
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: "Georgia", "Palatino", Sans-Serif;
	text-align: center;
	}
	/* to fix the flicker in firefox */
	/*
	body.home,
	body.aboutus,
	body.websweet,
	body.buzz,
	body.contact,
	body.ourwork { filter:alpha(opacity=99); -moz-opacity:.999; opacity:.999; }
	Fixed in firefox 3.0 */
	

body, h1, h2, h3, ul, li, a, hr, div, img, table, form, fieldset { 
	margin: 0; padding: 0;
	}
hr { 
	clear: both;
	height: 1px;
	visibility: hidden;
	}
	
.hide { position: absolute; left: -9999px; }
	
	
/* 1B - colours 
--------------------- */
body { color: #412819; }


/* 2 - structure/layout
--------------------- */
#container {
	margin: 0; padding: 0;
	width: auto; height: 162px;
	}
	
#top {
	margin: 0 auto; padding: 0;
	width: auto;
	height: 162px;
	}

#logo {
	margin: 0 0 0 -423px; padding: 0;
	width: 251px; height: 57px;
	position: absolute;
	left: 50%; top: 45px;
	}
	#logo a {
		margin: 0; padding: 0;
		width: 251px; height: 57px;
		display: block;
		border: none;
		}
	#logo a img {
		margin: 0; padding: 0;
		width: 251px; height: 57px;
		display: block;
		border: none;
		}

#masthead {
	margin: 20px auto 0 auto; padding: 20px 0 0 0;
	width: 750px;
	height: 275px;
	position: relative;
	}
		
#content {
	margin: 65px auto 0 auto; padding: 0;
	width: 750px;
	text-align: left;
	position: relative;
	}
.home #content {
	margin: 20px auto 0 auto; padding: 0;
	width: 750px;
	text-align: left;
	}

/* left - right column settings & sizes for all pages */
#main {
	margin: 0; padding: 0;
	position: relative;
	float: left;
	width: 363px;
	}
#sidebar {
	margin: 0; padding: 0;
	position: relative;
	float: right;
	width: 387px;
	}

.ourwork #content { width: 750px; }
	
	.home #main 		{ width: 363px; }
	.home #sidebar 		{ width: 387px; }
	.ourwork #main 		{ width: 573px; }
	.ourwork #sidebar 	{ width: 177px; }
	.aboutus #main 		{ width: 403px; }
	.aboutus #sidebar 	{ width: 287px; }
	.buzz #main 		{ width: 463px; }
	.buzz #sidebar 		{ width: 200px; }
	.contact #main 		{ width: 363px; }
	.contact #sidebar 	{ width: 320px; }
	.websweet #main 	{ width: 363px; }
	.websweet #sidebar 	{ width: 387px; }
	.theatre #main 		{ width: 750px; }
	.theatre #sidebar 	{ /* no sidebar */ }
	.site_list #main	{ width: 750px; }


/* footer */

#footer {
	margin: 0 auto 0 auto; padding: 20px 0 80px 0;
	width: 730px; height: 50px;
	clear: both;
	text-align: left;
	background: transparent;
	}


/* 2C - home page tweaks
--------------------- */
#us {
	margin: 0; padding: 0;
	position: relative;
	float: left;
	width: 363px;
	}
	#us p a { 
		display: block; 
		background: transparent; 
		position: absolute; 
		left: 0; top: 0; 
		width: 300px; height: 130px; 
		border: none !important;
		}
	#us p a span { display: none; }
#websweet {
	margin: 0; padding: 0;
	position: relative;
	float: right;
	width: 387px;
	}
	#websweet img { border: none; }

#masthead a {
	margin: 0; padding: 0;
	width: 750px; 
	height: 290px;
	position: absolute;
	left: 0; top: 0;
	display: block;
	z-index: 10000;
	}
	#masthead a span {
		display: none;
		}

/* google maps link */
#container #sidebar a.google-maps {
	margin: 0; padding: 0;
	width: 320px; 
	height: 420px;
	position: absolute;
	left: 0; top: 0;
	display: block;
	z-index: 10000;
	border: none;
	}
	a.google-maps span { display: none; }


/* 2D - theatre page tweaks
--------------------- */
#video_nav h2 { float: left; }
#video_nav p.return { 
	float: right; 
	padding-left: 22px;
	background: transparent url("../images/icon-arrow-left.png") no-repeat 0 4px;
	}
#video_nav {
	}
	
#video_player {
	margin: 45px auto 20px auto; padding: 0;
	clear: both;
	text-align: center;
	/* border: 10px solid #fff;
	background: #fff; */
	}
	#video {
		padding: 0; margin: 0;
		}
		#video embed {
			padding: 0; margin: 0;
			}
		.video_shadow {
			margin: -3px auto 0 auto;
			}
		
.theatre #thumbnails {
	margin: 0; padding: 0;
	text-align: center;
	}
	.theatre #thumbnails p.title {
		margin: 0 0 3px 5px; 
		text-align: left;
		font-size: 12px;
		font-family: Futura Std, Futura, "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		line-height: 140%;
		color: #3a4351;
		}
	
	.theatre #thumbnails ul {
		margin: 0 0 50px 0; padding: 10px 0;
		list-style-type: none;
		/*border-top: 1px solid #ddd;
		border-bottom: 1px solid #ccc; */
		clear: both;
		}
		.theatre #thumbnails ul li {
			margin: 0; padding: 0;
			display: inline;
			background: none;
			}
		.theatre #thumbnails ul li a {
			border: none !important;
			}
		.theatre #thumbnails ul li img {
			border: none;
			}
		.theatre #footer { display: none; }


/* 2D - our work page
--------------------- */		
.ourwork #main .website {
	padding-left: 30px;
	background: transparent url("../images/icon-arrow.png") no-repeat 8px 4px;
	}


/* 2D - site_list page
--------------------- */
div.site_list {
	margin-top: 30px;
	float: left;
	}
	div.site_list h3 {
		width: auto;
		}
	div.site_list ul {
		width: 30%;
		}
		
.site_list .comment {
	font-size: 10px;
	text-transform: uppercase;
	}



/* 2E - scribbles!
--------------------- */
.scribble { display: none; }

/* mouseover trigger */
#masthead:hover .scribble,
#us:hover .scribble,
#websweet:hover .scribble,
#sidebar:hover img[class='scribble our_friends'],
#white_space:hover .scribble { display: block; }

/* position of each scribble */
#masthead .scribble 	{ position: absolute; right: -80px; top: 120px; z-index: 9000; }
#us .scribble 			{ position: absolute; left: -90px; top: -20px; z-index: 9000; }
#websweet .scribble 	{ position: absolute; right: 100px; bottom: -70px; z-index: 9000; }
#sidebar img[class='scribble our_friends'] { position: absolute; right: -140px; top: 0; z-index: 9000; }
#white_space 			{ display: block; position: absolute; right: 5px; bottom: 5px; width: 60px; height: 60px; z-index: 0; }
#white_space .scribble 	{ position: absolute; right: 20px; bottom: 20px; z-index: 0; }


/* 3 - main navigation
--------------------- */

#nav {
	margin: 0 0 0 50px; padding: 0;
	width: 400px; height: 40px;
	display: block;
	position: absolute;
	left: 50%; top: 47px;
	} 
	#nav ul {
		margin: 0; padding: 0;
		display: block;
		list-style-type: none;
		text-align: center;
		}
		#nav ul li {
			margin: 0; padding: 18px 20px 15px 20px;
			width: auto;
			display: block;
			float: left;
			text-align: center;
			height: 36px;
			}
			/* mouseover behaviour */
			#nav ul li.ourwork:hover 	{ background: transparent url("../images/nav_ourwork_hover.png") no-repeat center top; }
			#nav ul li.aboutus:hover 	{ background: transparent url("../images/nav_aboutus_hover.png") no-repeat center top; }
			#nav ul li.buzz:hover 		{ background: transparent url("../images/nav_buzz_hover.png") no-repeat center top; }
			#nav ul li.contact:hover 	{ background: transparent url("../images/nav_contact_hover.png") no-repeat center top; }
			
			/* current page focus */
			#nav ul li[class='ourwork selected'] 	{ background: transparent url("../images/nav_ourwork_hover.png") no-repeat center top; }
			#nav ul li[class='aboutus selected']  	{ background: transparent url("../images/nav_aboutus_hover.png") no-repeat center top; }
			#nav ul li[class='buzz selected']  		{ background: transparent url("../images/nav_buzz_hover.png") no-repeat center top; }
			#nav ul li[class='contact selected']  	{ background: transparent url("../images/nav_contact_hover.png") no-repeat center top; }

			#nav ul li a {
				margin: 0; padding: 15px 0 20px 0;
				}


/* 4 - anchors
--------------------- */

#nav a:link 		{ color: #bbd5f2; text-decoration: none; border: none; }
#nav a:visited 		{ color: #bbd5f2; text-decoration: none; border: none; }
#nav a:hover 		{ color: #fff; text-decoration: none; border: none; }
#nav a:active 		{ color: #bbd5f2; text-decoration: none; border: none; }

#content a:link 	{ color: #333; text-decoration: none; border-bottom: 1px dotted #666; }
#content a:visited 	{ color: #333; text-decoration: none; border-bottom: 1px dotted #666; }
#content a:hover 	{ color: #000; text-decoration: none; border-bottom: 1px dotted #333; }
#content a:active 	{ color: #333; text-decoration: none; border-bottom: 1px dotted #666; }

#sidebar a:link 	{ color: #555; text-decoration: none; border-bottom: 1px dotted #999; font-weight: lighter; }
#sidebar a:visited 	{ color: #555; text-decoration: none; border-bottom: 1px dotted #999; }
#sidebar a:hover 	{ color: #000; text-decoration: none; border-bottom: 1px dotted #333; }
#sidebar a:active 	{ color: #555; text-decoration: none; border-bottom: 1px dotted #999; }

#sidebar ul.alt_list a:link 		{ color: #555; text-decoration: none; border-bottom: none !important; font-weight: lighter; }
#sidebar ul.alt_list a:visited 	{ color: #555; text-decoration: none; border-bottom: none !important; }
#sidebar ul.alt_list a:hover 	{ color: #000; text-decoration: none; border-bottom: none !important; }
#sidebar ul.alt_list a:active 	{ color: #555; text-decoration: none; border-bottom: none !important; }

#footer a:link 		{ color: #28231c; text-decoration: none; border-bottom: 1px dotted #28231c; }
#footer a:visited 	{ color: #28231c; text-decoration: none; border-bottom: 1px dotted #28231c; }
#footer a:hover 	{ color: #857863; text-decoration: none; border-bottom: 1px dotted #857863; }
#footer a:active 	{ color: #28231c; text-decoration: none; border-bottom: 1px dotted #28231c; }

#sidebar ul li.selected a { font-weight: bolder; color: #000 !important; }

/* stripping borders off img links */
#footer img { border: none; }
#container a.no_border { border: none; }
#container a.no_border img { border: none; }

a:focus {
	outline: none;
	}

/* 5 - typography
--------------------- */

h1 {}
	#content h1 {
		margin: 0 0 10px 10px;
		font-size: 18px;
		font-weight: lighter;
		font-family: Futura Std, Futura, "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
		text-transform: lowercase;
		font-variant: small-caps;
		color: #666;
		letter-spacing: 0.02em;
		line-height: 130%;
		display: block;
		position: absolute;
		left: -50px; top: -65px;
		width: 119px; height: 57px;
		}
		
		#content h1 span { display: none; }
		
		.ourwork h1 	{ background: transparent url("../images/title-ourwork.png") no-repeat center top; }
		.aboutus h1 	{ background: transparent url("../images/title-aboutus.png") no-repeat center top; }
		.buzz h1 		{ background: transparent url("../images/title-buzz.png") no-repeat center top; }
		.contact h1 	{ background: transparent url("../images/title-contact.png") no-repeat center top; }
		.websweet h1 	{ background: transparent url("../images/title-websweet.png") no-repeat center top; }

		
h2 {}
	#content h2 {
		margin: 0 0 15px 10px;
		font-size: 20px;
		font-weight: lighter;
		font-family: Futura Std, Futura, "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
		color: #003671;
		letter-spacing: 0.00em;
		line-height: 130%;
		}
	#content p + h2 {
		margin-top: 30px;
		}
					
	#sidebar h2 {
		width: auto; margin: 0 0 15px 10px;
		font-size: 16px;
		font-weight: lighter;
		font-family: Futura Std, Futura, "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
		color: #24415f;
		letter-spacing: 0.00em;
		line-height: 130%;
		}
		
	h3 {
		margin: 0 0 25px 10px;
		font-size: 11px;
		letter-spacing: .06em;
		font-family: Futura Std, Futura, "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
		text-transform: uppercase;
		text-align: left;
		color: #333;
		}
		h2 + h3 { margin-top: -10px; }
	h5 {
		font-size: 9px;
		letter-spacing: 0;
		text-transform: lowercase;
		}
	h6 {
		font-size: 8px;
		letter-spacing: 0;
		text-transform: lowercase;
		}

p {}
	#content {
		font-size: 11px;
		color: #24415f;
		}
	#content p {
		margin: 0 0 15px 0; padding: 0 20px 0 10px;
		display: block;
		font-size: 16px;
		color: #24415f;
		line-height: 140%;
		}
	#us p {
		margin: 20px 0 15px 0; padding: 0 65px 0 10px;
		font-size: 18px;
		line-height: 138%;
		}
	#footer p {
		margin-top: 25px;
		font-size: 9px;
		color: #595344;
		line-height: 140%;
		font-family: Futura Std, Futura, "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
		}
		p strong { font-weight: bolder; }
		
	#page p em {
		}
	
	p acronym { cursor: help; border-color: #999; }
	
	#content p.warning { color: #900;  }

	/* for navs */
	#nav {
		font-size: 18px;
		line-height: 120%;
		text-transform: lowercase;
		}
		

/* 6 - lists
--------------------- */

#content ul {
	margin: 25px 0 25px 0; padding: 0;
	width: auto;
	list-style-type: none;
	}
	#content ul li {
		margin: 0 0 10px 5px; padding: 0 0 0 25px;
		font-size: 16px;
		line-height: 140%;
		color: #24415f;
		background: url('../images/icon-arrow.png') no-repeat 0 3px;
		}

#sidebar ul {
	margin: 25px 0 25px 0; padding: 0;
	width: auto;
	list-style-type: none;
	}
	#sidebar ul li {
		margin: 0 0 10px 5px; padding: 0 0 0 25px;
		font-size: 14px;
		line-height: 130%;
		color: #3a4351;
		background: url('../images/icon-arrow.png') no-repeat 0 3px;
		}
		
#sidebar ul.alt_list {
	width: auto; margin: 0 0 15px 0;
	color: #3a4351;
	list-style-type: none;
	list-style-image: none;
	}
	#sidebar ul.alt_list li {
		margin: 0 0 10px 35px; padding: 0;
		font-size: 12px;
		background: none;
		font-family: Futura Std, Futura, "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		line-height: 140%;
		}

/* 7 - images
--------------------- */

img.content-square	 	{ background: transparent url("../images/content-square-bg.png") no-repeat center center; padding: 20px; }
img.content-vertical 	{ background: transparent url("../images/content-vertical-bg.png") no-repeat center center; padding: 20px; }
img.content-horizontal 	{ background: transparent url("../images/content-horizontal-bg.png") no-repeat center center; padding: 20px; margin-bottom: 15px; }

img.thumb-vertical 		{ background: transparent url("../images/ourwork-vertical.png") no-repeat center center; padding: 20px; }
img.thumb-square 		{ background: transparent url("../images/ourwork-square.png") no-repeat center center; padding: 20px; }
img.thumb-horizontal 	{ background: transparent url("../images/ourwork-horizontal.png") no-repeat center center; padding: 20px; }
img.thumb-video		 	{ background: transparent url("../images/ourwork-video.png") no-repeat center center; padding: 20px; }
img.mosaic			 	{ background: transparent url("../images/ourwork-mosaic-bg.png") no-repeat center center; padding: 20px; margin-bottom: 15px; }
img.thumb-video-tiny 	{ background: transparent url("/images/ourwork-video-tiny-bg.png") no-repeat center center; padding: 15px; }



#sidebar ul li a img {
	margin: 0 0 -2px 3px;
	border: none;
	}
	#sidebar ul li a:hover img {
		background: #fff url("../images/") no-repeat center center;
		}

/* 7B - images tooltips
--------------------- */
#tooltip {
	position: absolute;
	z-index: 3000;
	border: none;
	background-color: #1e599b;
	padding: 5px 15px;
	opacity: 1;
	left: 5px; top: 5px;
	}
#tooltip h3, #tooltip div { 
	margin: 0; color: #fff; 
	font-size: 10px;
	font-weight: lighter;
	text-transform: lowercase;
	letter-spacing: 0.04em;
	}

/* 7C - Fancy Zoom
	(c) Cabel Sasser 
	/ Panic Inc.
--------------------- */

#ZoomImage { border: 8px solid #fff; }


/* 7D - jQuery slides
--------------------- */

#slides {  
	margin: 0 auto; padding: 0;
    width: 708px; 
    height: 252px;
	}
	#slides a {  
	    padding: 0;  
	    border: none !important;
	    width: 708px; 
	    height: 252px; 
	    top: 0; 
	    left: 0;
		display: none;
		}
		#slides a img { border: none !important; }
#slides-square {  
	margin: 0 auto; padding: 0;
    width: 384px; 
    height: 335px;
	}
	#slides-square img {  
	    border: 0;
	    width: 344px; 
	    height: 295px; 
		display: none;
		}
#static-square {  
	margin: 0 auto; padding: 0;
    width: 384px; 
    height: 335px;
	}
	#static-square img {  
	    border: 0;
	    width: 344px; 
	    height: 295px;
		}

#slides-vertical {  
	margin: 0 auto; padding: 0;
    width: 320px; 
    height: 420px;
	}
	#slides-vertical img {  
	    border: 0;
	    width: 280px; 
	    height: 380px; 
		display: none;
		}

/* 7E - Flash
--------------------- */

#container #main object {
	border: none;
	margin: 0 auto;
	}
#container #main #no_flash {
	margin: 0 auto; padding: 50px 30px;
	width: 360px;
	
	background: #fff;
	}
		
/* 8A - forms - universal
--------------------- */
#content form {
	margin: 25px 0 0 0; padding: 0;
	}
#content form fieldset {
	margin: 0; padding: 10px 10px 10px 0;
	border: none;
	}
	#content form fieldset ul {
		margin: 0; padding: 0;
		list-style-type: none;
		list-style-image: none;
		}
		#content form fieldset ul li {
			margin: 0; padding: 0 0 0 10px;
			background: none;
			}
		
#content form fieldset input {
	margin: 2px 0 10px 0; padding: 3px;
	width: 300px;
	}
#content form fieldset textarea {
	margin: 5px 0 10px 0; padding: 2px;
	width: 305px; height: 100px;
	}
	
	/* buttons */
	#content form fieldset button {
		margin: 0 0 0 10px; padding: 3px 10px;
		width: auto;
		}
	/* change background colour when element is selected */
	form fieldset .focus {	
		background: #fff ;
		background: url('../images/icon-arrow.png') no-repeat -10px 30px !important;
		}
					
	/* Typography */
	#content form fieldset label {
		font-family: "Georgia", "Palatino", Sans-Serif;
		font-size: 12px;
		text-transform: none;
		font-variant: normal;
		letter-spacing: 0;
		color: #24415f;
		}
		#content form fieldset label span {
			font-family: "Georgia", "Palatino", Sans-Serif;
			font-size: 12px;
			color: #933;
			}

		#content form fieldset input,
		#content form fieldset textarea {
		font-family: "Georgia", "Palatino", Sans-Serif;
		font-size: 12px;
		color: #222;
		}