/* 
Title: Colin Smith Architecture - Main screen stylsheet
Filename: screen.css
Author: Jim O'Neill, www.jimoneill.net
*/

/* 	Common Color Table 
--------------------------
White: 				#ffffff;
--------------------------*/

/* =Reset
------------------------ */
@import "reset.css";


/* =General
------------------------ */
html {
	font-size: 100.01%; /* Ensures font consistency across browsers */
	height: 100%; /* footer-stick */
	margin: 0;
	padding: 0;
}
body {
	background: #fff url(../images/bg/body_bg.gif) repeat-y 0 0;
	color: #333;
	font: 10px/1.5 Arial,sans-serif;
	height: 100%; /* footer-stick */
	line-height: 1.5; /* Sets base leading for lines of text */
	margin: 0;
	padding: 0;
}
body.home {
	background: #fff;
}

p {margin: 0 0 1em 0; padding: 0;}
strong {font-weight:bold}
em {font-style:italic}

input, select, th, td {font-size: 1em}

img, a img {
	border: none; /* Remove default border on linked images */
}
ul {
	list-style: square outside;
	margin: 0 0 1.0em 0;
	padding: 0 0 0 1.5em;
}
ol {
	list-style: decimal outside;
	margin: 0 0 1.0em 0;
	padding: 0 0 0 1.9em;
}
	ul li, ol li {
		margin: 0 0 0.2em 0;
		padding: 0;
	}
		ul li ul {
			color: #666;
			margin: 0.3em 0 1em 0.5em;
		}

/* Basic link styles */
a, a:link {
	color: #db3915;
	text-decoration: underline;
}
a:visited {
	color: #b2030c;
}
a:hover, a:active {
	color: #c54e02;
	text-decoration: underline;
}
a:focus {}


/* =Master
---------------------- */
#container {
	font-size: 1.2em; /* 12px (based on value from body) */
	margin: 0;
	min-height: 100%; /* footer-stick */
	padding: 0;
	position: relative; /* footer-stick */
	text-align: left; /* Normalize alignment */
}

/* Skip link: This is the very first link anywhere on the page; by tabbing to it or hitting accesskey 2, a user can skip the header/navigation of a page and go directly to the page content. It is normally 'hidden' by being positioned far, far off the page; bringing it into focus with Tab makes it visible. */
	#skiplink a {
		left: -2000px;
		position: absolute;
		top: -1000px;
	}
		#skiplink a:focus, #skiplink a:active {
			background: #000;
			color: #fff;
			display: block;
			font-weight: bold;
			left: 0;
			margin: 0;
			padding: 0;
			position: absolute;
			top: 0;
		}
		#skiplink a:hover { 
		}

/* =Branding
---------------------- */
#header {
	background: transparent url(../images/bg/header_bg.gif) repeat-x 0 21px;
	height: 28px;
	margin: 0;
	padding: 21px 0 18px;
	width: 100%;
}

#branding {
	float: left;
	display: inline;
	padding: 0;
	width: 417px;
}
	#branding-logo {
		cursor: pointer;
		width: 417px;
		height: 28px;
		margin: 0px;
	}
		#branding-logo h1 {
			line-height: 1;
			margin: 0;
			padding: 0;
			height: 100%;
			overflow: hidden;
			text-indent: -5000px;
			width: 100%;
		}
			#branding-logo h1 a {
				background: transparent url(../images/branding/csa_logo_1.gif) no-repeat 0 0; 
				display: block;
				height: 100%;
				margin: 0;
				padding: 0;
				width: 100%;
			}
			#branding-logo h1 a:hover, #branding-logo h1 a:active {
			}
/* =Nav
---------------------- */
#nav-main {
	display: inline;
	float: left;
	width: 350px;
}
	#nav-main ul {
		list-style: none outside;
		height: 21px;
		margin: 0;
		padding: 2px 0 5px;
	}
		#nav-main ul li {
			float: left;
			display: inline;
			height: 21px;
			width: auto;
		}
			#nav-main ul li a { 
				display: block;
				height: 15px;
				font-weight: bold;
				line-height: 15px;
				padding: 3px 15px;
				text-decoration: none;
			}
			#nav-main ul li a, #nav-main ul li a:link, #nav-main ul li a:visited {
				color: #786d66;
				background: #ddd;
				border-right: solid 3px #ddd;
				border-left: solid 3px #ddd;
			}
			#nav-main ul li a:hover, #nav-main ul li a:active {
				color: #db3915;
			}
			#nav-main ul li.first a, #nav-main ul li.first a:link, #nav-main ul li.first a:visited {
				border-left: solid 3px #fff;
			}
			#nav-main ul li a.current, #nav-main ul li a.current:link, #nav-main ul li a.current:visited, #nav-main ul li a.current:hover, #nav-main ul li a.current:active {
				color: #fff;
				background: #b2030c;
				border-right: solid 3px #fff;
				border-left: solid 3px #fff;
			}
			#nav-main ul li a.current:hover, #nav-main ul li a.current:active {
			}
			
					
	#nav-section {
		float: left;
		display: inline;
		padding: 25px 0 0 0;
		width: 270px;
	}
		#nav-section ul {
			line-height: 1.5;
			list-style: none outside;
			margin: 0;
			padding: 0;
			color: #fff;
		}
			#nav-section li {
				padding: 3px 0 3px 45px;
				margin: 0;
				font-weight: bold;
			}
			#nav-section li.current {
				background-color: #b2030c;
			}
				#nav-section li a, #nav-section li a:link, #nav-section li a:visited {
					color: #fff;
					text-decoration: none;
				}
				#nav-section li a:hover, #nav-section li a:active {
					text-decoration: underline;
				}
				
				#nav-section ul li ul {
					padding: 0.3em 0 0;
					margin: 0 0 0 15px;
				}
					#nav-section ul li ul li {
						line-height: 1.2;
						list-style: none outside;
						margin: 0 0 0.5em 0;
						padding: 0 15px 0 0;
						font-weight: normal;
						font-size: 0.92em; /*11px*/
					}
					#nav-section ul li ul li.current {
						list-style: disc outside;
						color: #fff;
					}
			#nav-section li.viewall {
				font-weight: normal;
				font-size: 0.92em; /*11px*/
				display: none;
			}
			

/* =Headings
---------------------- */
h1, h2, h3, h4, h5, h6 {
}
h2 {
	color: #db3915;
	font: bold 1.08em/1 Arial,sans-serif; /*13px*/
	padding: 0;
	margin: 0 0 1.0em 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}
h3 {
	color: #000;
	font: bold 1.08em/1.2 Arial,sans-serif; /*13px*/
	margin: 0 0 0.4em 0;
	padding: 0 0 0;
}
h4 {
	color: #b2030c;
	font: bold 1em/1.2 Arial,sans-serif; /*12px*/
	margin: 0 0 0.4em;
	padding: 0.6em 0 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}
h5 {
	color: #777;
	font: bold 1em/1.2 Arial,sans-serif; /*12px*/
	margin: 0 0 0.1em;
	padding: 0 0 0;
}
h6 {
	color: #999;
	font: bold 1em/1.2 Arial,sans-serif; /*12px*/
	margin: 0 0 0.1em;
	padding: 0 0 0;
}


/* =Content
---------------------- */
#content {
	float: left;
	display: inline;
	font-size: 1em; /*12px*/
	margin: 0;
	padding: 0 0 10px 30px; /* footer-stick */
	width: 660px;
}
	
	table {} /* tables still need 'cellspacing="0"' in the markup */
	
	ul.bulleted {
		list-style: none outside;
		padding: 0;
		margin: 0 0 1em 0;
	}
		ul.bulleted li {
			/* background: ; */
			margin: 0 0 0.3em 0;
			padding: 0 0 0 15px;
		}

/* JQuery Slideshow styles */
#slideshow {
    position: relative;
    height: 480px;
    background: transparent url(../images/colorbox/loading_white.gif) no-repeat 50% 200px;
}
	#slideshow div {
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: 8;
	    opacity: 0.0;
	    height: 480px;
	    background-color: #fff;
	}
	#slideshow div.active {
	    z-index:10;
	    opacity:1.0;
	}
	#slideshow div.last-active {
	    z-index:9;
	}
		#slideshow div img {
		    height: 432px;
		    display: block;
		    border: 0;
		}
		#slideshow div span {
			display: block;
			padding: 8px 0 0;
			color: #666;
		}
#controls {
	position: relative;
	padding: 0;
	margin: 0;
	top: -40px;
	text-align: right;
	width: 660px;
	z-index: 400;
}
	#controls a, #controls a:link, #controls a:visited {
		color: #999;
	}
	#controls a:hover, #controls a:active {
		color: #666;
	}


/* Normal pages */
.bicol {
	display: inline;
	float: left;
	margin-right: 2%;
	width: 48%;
}
.bicol-right {
	margin-right: 0;
}
.bicol-left2 {
	width: 190px;
	margin-right: 23px;
}
.bicol-right2 {
	width: 447px;
	margin-right: 0;
}

.tricol {
	display: inline;
	float: left;
	margin-right: 3%;
	width: 30%;
}
.tricol-right {
	margin-right: 0;
}

ol.process {}
	ol.process li {
		font-weight: bold;
	}
		ol li ul {
			margin: 0.3em 0 1.3em 0;
			font-weight: normal;
		}
			ol.process li ul li {
				font-weight: normal;
			}
ul.process {
	list-style: none outside;
	margin-left: 0;
	padding-left: 0;
}
	ul.process li {
		font-weight: bold;
		margin-left: 0;
		padding-left: 0;
	}
		ul.process li ul {
			color: #000;
			margin: 0.3em 0 0.6em 0;
			font-weight: normal;
		}
			ul.process li ul li {
				font-weight: normal;
			}

.bio .current {
	color: #666;
	font-weight: bold;
	text-decoration: none;
}
.bio-section {
	display: none;
}

img.floatimg {
	display: block;
	float: left;
	padding: 0 20px 2px 0;
	margin: 0;
	width: auto !important;
}

#csa-office {
	background: transparent url(../images/inline/office_photo1.jpg) no-repeat 0 0;
	height: 203px;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
	margin-bottom: 1em;
}
#csa-office.over {
	background: transparent url(../images/inline/office_photo1.jpg) no-repeat 0 -203px;
}


/* Homepage */
.home h1 {
	overflow: hidden;
	text-indent: -5000px;
}
ul#home-links {
	list-style: none outside;
	margin: 0 auto;
	padding: 0;
	position: relative;
	top: 23px;
	width: 500px;
	height: 450px;
	background: transparent url(../images/bg/home_links.jpg) no-repeat 0 0;
	display: none;
}
	ul#home-links li {
		position: absolute;
		top: 0;
		margin: 0;
		padding: 0;
		height: 450px;
	}
		ul#home-links li div {
			width: 100%;
			height: 100%;
			display: none;
		}
	li#link-ourwork {
		left: 0;
		width: 183px;
	}
		li#link-ourwork div {
			background: transparent url(../images/bg/home_links.jpg) no-repeat 0 -450px;
		}
	li#link-about {
		left: 186px;
		width: 136px;
	}
		li#link-about div {
			background: transparent url(../images/bg/home_links.jpg) no-repeat -186px -450px;
		}
	li#link-contact {
		left: 325px;
		width: 175px;
	}
		li#link-contact div {
			background: transparent url(../images/bg/home_links.jpg) no-repeat -325px -450px;
		}
	
		ul#home-links li a {
			display: block;
			position: absolute;
			z-index: 500;
			top: 260px;
			margin: 0;
			padding: 0;
			height: 32px;
			overflow: hidden;
			text-indent: -5000px;
		}
			li#link-ourwork a {
				left: 28px;
				width: 78px;
			}
			li#link-about a {
				left: 0;
				width: 82px;
			}
			li#link-contact a {
				left: 0px;
				width: 76px;
			}



/* =Footer
---------------------- */
#siteinfo {
	color: #777;
	font-size: 1.2em;
	height: 28px; /* footer-stick */
	line-height: 16px;
	margin: -28px 0 0 300px; /* footer-stick */
	padding: 0;
	position: relative; /* footer-stick */
	z-index: 100;
	text-align: left;
	width: 660px;
}
.home #siteinfo {
	margin: -28px auto 0; /* footer-stick */
	text-align: center;
}
	#siteinfo span {
		padding-top: 10px;
	}
	#siteinfo a:link, #siteinfo a:visited {
		color: #777;
	}
	

/* =Uni
---------------------- */
.clear {clear: left;}
.clear-both {clear: both;}
.end {height:28px;}
.hidden {display:none;}
.shown {display:block;}