/*
* Author: 		Trevor Morris
* Contact:		contact@trovster.com
* Version:		0.2
* Updated:		15/06/2009
* Notes:		This is the core file for the entire site.
*
* CONTENTS
* -------------------------
* =s  Sprites
* =l  Layout
* =m  Main Site
* =mE Main Site - Extra
* =oC Other - Crossfader
* =oT Other - Toggle
*
*/


/* =s
* @section Sprites
--------------------------------------------------------------------------------------------------*/
#containter-site,
#header,
#header h1 a,
#images li a:visited,
#container a.toggle,
#footer p, #footer p.contact a,
#images li a,
body.cms #thumbnails .options li a,
body.cms #toolbox .toolkit li a,
#popup-form input.submit {
	background: url(img/sprite.png) no-repeat 0 0;
}


/* =l
* @section Layout
--------------------------------------------------------------------------------------------------*/
html,
body,
#wrapper,
#container {
	height: 100%;
	background-color: #fff;
}
body {
	overflow: hidden;
	min-height: 500px; height: 100%;
	color: #666; font-size: 9px; line-height: 16px; font-family: "04b-03", Verdana, mono, sans-serif; text-decoration: none; font-weight: bold;
	background-color: #fff;
	text-shadow: 0 0 0 #151515;
}
div.side,
div.top {
	position: absolute; top: 0; z-index: 500;
	height: 100%; width: 10px;
	background-color: #ccc;
}
div.top {
	left: 0;
	width: 100%; height: 10px;
}
div.left {
	left: 0;
}
div.right {
	right: 0;
}
#container {
	width: auto;
	margin: 0;
}
a {
	outline: 0;
}
#containter-site {
	position: relative; z-index: 500;
	float: left;
	width: 200px;
	margin: 0 0 0 50px;
	background-position: -9999px -9999px;
}
body.hide #containter-site {
	background-position: 0 0;
}
#header,
#site {
	padding: 0 10px;
}

#header {
	z-index: 501;
	height: 100px;
	margin: 0;
	background-position: -210px 0;
}
	#header h1 a {
		position: relative; z-index: 501;
		margin: 0 0 0 45px;
		height: 90px; width: 80px;
		background-position: -215px -99px;
	}
	body.show #header h1 a:hover,
	body.show #header h1 a:focus,
	body.show #header h1 a:active {
		background-position: -295px -99px;
	}
	body.hide #header h1 a:hover,
	body.hide #header h1 a:focus,
	body.hide #header h1 a:active {
		background-position: -375px -99px;
	}

#header ul.nav {
	position: absolute; top: 0; left: 0;
	width: 200px; height: 90px;
}
#header a.toggle-previous,
#header a.toggle-next {
	position: absolute; top: 30px; z-index: 502;
	height: 30px; width: 29px; 
}
#header a.toggle-previous {
	left: 26px;
	background-position: -427px -30px;
}
#header a.toggle-previous:hover,
#header a.toggle-previous:focus,
#header a.toggle-previous:active {
	background-position: -427px -70px;
}
#header a.toggle-next {
	right: 36px;
	background-position: -454px -30px;
}
#header a.toggle-next:hover,
#header a.toggle-next:focus,
#header a.toggle-next:active {
	background-position: -454px -70px;
}

#header a.toggle-hide,
#header a.toggle-show {
	display: none;
}


#footer {
	position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 499;
	height: 100%; width: 100%;
}
	#footer-info {
		position: absolute; bottom: 0; left: 0;
		height: 40px; width: 100%;
		background-color: #ccc;
	}
	#footer p {
		height: 100%;
		margin: 0 50px;
	}
	#footer p {
		float: left;
		width: 334px;
		background-position: -205px -350px;
	}
	#footer p.contact {
		float: right; position: relative;
		width: 313px;
		background-position: -205px -400px;
	}
	#footer p.contact a {
		position: absolute; top: 0; right: 0;
		display: block;
		height: 40px; width: 150px;
		background-position: -4000px -4000px;
	}
	#footer p.contact a:focus,
	#footer p.contact a:hover,
	#footer p.contact a:active {
		background-position: -368px -440px
	}


#preview-text,
h2 {
	font-size: 10px; text-transform: uppercase; color: #666;
}


/* =m
* @section Main Site
--------------------------------------------------------------------------------------------------*/
body.js #site {
	display: none;
}
#site {
	top: 100px;
	background-position: 0 -100px;
	padding-top: 10px; padding-bottom: 10px;
}
#portfolio div.toggle {
	padding: 0 0 5px;
}
	
#preview,
#preview img {
	position: relative; clear: both;
	display: block;
}
#preview-text {
	float: left;
	margin: 0 0 5px;
}
#preview img {
	margin: 0;
}


#overlay {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 300;
	background: rgba(0,0,0,0.6);
	height: 100%; width: 100%;
	display: none !important;
}

	
#images {
	overflow: hidden;
	zoom: 1;
	display: block !important;
	margin-top: 10px;
}
	#images li {
		float: left;
		margin: 0 4px 4px 0;
	}
	#images li.r {
		margin-right: 0;
	}
		#images li a {
			width: 19px; height: 19px;
			outline: 0;
			background-position: -230px -200px;
		}
		#images li a:hover,
		#images li a:focus,
		#images li a:visited:hover,
		#images li a:visited:focus,
		#images li.active a,
		#images li.active a:hover,
		#images li.active a:focus,
		#images li.active a:active,
		#images li.active a:visited {
			background-position: -230px -219px;
		}
		#images li a:active,
		#images li a:visited {
			background-position: -259px -200px;
		}

#pagination {
	display: none;
}

div.extra,
div.extra a,
#site div.extra.active h2,
#site div.extra.active h2 a,
div.extra a:hover,
div.extra a:focus,
div.extra a:active,
div.extra ul li.active a,
#site div.active-section h2,
#site div.active-section h2 a {
	color: #fff; font-weight: bold;
	outline: 0;
}
div.extra h2 {
	padding: 1px 0;
}
div.extra h2, 
div.extra h2 a,
div.extra ul li a {
	color: #666;
}
div.extra h2 a,
div.extra ul a {
	text-decoration: none;
}
div.extra div.toggle {
	padding: 5px 0 15px;
}
div#extra-other-work ul li a {
	display: block;
	padding-left: 15px;
}
div#extra-biography p {
	margin: 0 0 10px;
}
div#extra-biography h3 {
	margin: 0 0 5px;
	font-weight: bold;
}


#client-login,
#client-login input {
	text-transform: uppercase;
}
	#client-login label {
		display: block;
	}
	#client-login input {
		width: 160px;
		padding: 2px 8px; margin: 0 0 6px;
		background-color: #666 !important; color: #fff !important;
		border: 2px solid #333;
	}
	#client-login .submit {
		width: auto;
		margin: 2px 0 0;
		background-color: #000 !important;
	}

body.js #client-login label {
	display: none;
}
body.js #client-login .submit {
	margin-top: -1px;
}


/* =oC
* @section Other
* @subsection Crossfader
--------------------------------------------------------------------------------------------------*/
#supersize, #supersize img,
#preview img {
	position: absolute; top: 0; left: 0;
	text-align: center;
}
div.loader {
	position: absolute; top: 50%; left: 50%; z-index: 250;
	display: block;
	height: 42px; width: 42px;
	margin: -126px 0 0 -26px;
	background: url(img/loader.gif) no-repeat 0 0;
}
div.loader-small {
	margin-top: -26px;
	background-image: none;
}
#preview, #preview img {
	overflow: hidden; zoom: 1;
	height: 113px; width: 180px;
}



/* =ie6
--------------------------------------------------------------------------------------------------*/
* html #containter-site,
* html #header,
* html #header h1 a,
* html #images li a:visited,
* html #container a.toggle,
* html #footer p,
* html #images li a {
	background-image: url(/css/img/sprite.gif);
}
* html div#extra-other-work ul li a {
	display: inline-block;
}
* html #footer-info {
	left: 10px; bottom: 0;
}
* html #footer-info p {
		display: inline;
}
* html #client-login input {
	border-color: #444;
}
* html #containter-site {
	display: inline;
}