@charset "utf-8";
/*  ---------------------------------------
	
	main.css
	````````
	main stylesheets document for
	JSQAURE Architecture
	
    ---------------------------------------  */


/*  ---------------------------------------
	Global Reset
	- - - - - - - - - - - - - - - - - - - -  */

		html, body, div, span, applet, object, iframe,
		h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code,
		del, dfn, em, font, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td {  
			margin: 0;
			padding: 0;
			border: none;
			list-style: none;
			text-decoration: none;
		}



/*  ---------------------------------------
	Global rules and typography
	- - - - - - - - - - - - - - - - - - - -  */
	
		body {
			font: 12px "trebuchet MS", helvetica, sans-serif;
			color: #ccc;
			background-color: #4D4D4D;
			padding-top: 50px;
			behavior:url("http://jsquare.glidedesign.com/assets/scripts/csshover.htc");
		}
		
		#container {   /* Find best way to center this vertically */
			width: 100%;
		}
			#container.jay-bio {
				background: url('../images/jays-bio-bg.gif') no-repeat center 100px;
			}
			#container.elaine-bio {
				background: url('../images/elaine-bio-bg.jpg') no-repeat center 100px;
			}
			#container.james-bio {
				background: url('../images/james-bio-bg.gif') no-repeat center 100px;
			}
			#container.justin-bio {
				background: url('../images/justin-bio-bg.gif') no-repeat center 100px;
			}			
			#container.generic-bio {
				background: url('../images/jamesold-bio-bg.gif') no-repeat center 100px;
			}
			#container.khan-bio {
				background: url('../images/khan-bio-bg.jpg') no-repeat center 100px;
			}
			#container.mimi-bio {
				background: url('../images/mimi-bio-bg.jpg') no-repeat center 100px;
			}
		
		.clear-fix { overflow: hidden; }
		* html .clear-fix { height: 1%; }
		.hidden { display: none; }
		.no-border { border: none; }
		
		h2 { font-size: 20px; }
		h5 {
			font-size: 12px;
			display: block;
			padding-top: 5px;
			padding-bottom: 5px;
			font-style: italic;
			font-weight: normal;
		}



/*  ---------------------------------------
	Header  ( header-logo & main-nav )
	- - - - - - - - - - - - - - - - - - - -  */
	
		#header {
			width: 750px;
			margin: 20px auto 30px auto;
			padding: 0 10px;
		}
			h1#header-logo {
				display: block;
				float: left;
				height: 37px;
				width: 191px;
				background: url('../images/header-logo.gif') no-repeat;
			}
				#header-logo a {
					display: block;
					text-indent: -3000px;
					height: 37px;
					width: 191px;
				}
			
			ul#main-nav {
				display: block;
				float: left;
				margin-top: 10px;
				margin-left: 50px;
			}
				#main-nav li {
					display: block;
					float: left;
					border-right: 1px solid #999;
					height: 20px;
				}
					#main-nav li a {
						display: block;
						float: left;
						padding: 2px 10px;
						line-height: 16px;
						font-size: 14px;
						color: #fff;
					}
					#main-nav li.current a {
						font-weight: bold;
						text-decoration: underline;
					}
					#main-nav li a:hover { background: #6D6D6D; }
						#main-nav li.current a:hover { background: none; }
					#main-nav li.last { border: none; }



/*  ---------------------------------------
	Footer  ( footer-info & footer-nav
			  & footer-legal & credits )
	- - - - - - - - - - - - - - - - - - - -  */
	
		#footer {
			width: 750px;
			margin: 20px auto;
			border-top: 2px solid #939393;
			padding-top: 20px;
		}
			#footer-info {
				display: block;
				float: right;
				width: 200px;
				font-size: 11px;
				text-align: right;
				padding-right: 10px;
			}
				#footer-info .footer-number strong { color: #aaa; }
			
			ul#footer-nav {
				display: block;
				float: left;
				font-size: 12px;
				padding-bottom: 20px;
			}
				#footer-nav li {
					display: block;
					float: left;
				}
					#footer-nav li a {
						display: block;
						float: left;
						border-right: 1px solid #ccc;
						color: #ccc;
						padding: 0 10px;
					}
						#footer-nav li a:hover {
							color: #fff;
							text-decoration: underline;
						}
			
			ul#footer-legal {
				display: block;
				padding-bottom: 20px;
				float: left;
				clear: left;
				color: #A8A8A8;
				font-size: 11px;
				width: 450px;
			}
				#footer-legal li { display: inline; padding: 0 10px; }
					#footer-legal li a {
						text-decoration: underline;
						color: #A8A8A8;
					}
						#footer-legal li a:hover { color: #fff; }
						
			
			p#credits {
				color: #A8A8A8;
				padding-left: 10px;
				display: block;
				float: left;
				clear: left;
				font-size: 11px;
				width: 450px;
			}
				#credits a { color: #A8A8A8; text-decoration: underline; }
					#credits a:hover { color: #fff; }



/*  ---------------------------------------
	Content
	- - - - - - - - - - - - - - - - - - - -  */
	
		#content-body {
			width: 750px;
			margin: 0 auto;
			position: relative;
		}
			#content-body.normal { position: static; }
			#content-body.home { width: 100%; }
		
		#content-right {
			float: right;
			width: 440px;
		}
			
			#content-right p {
				padding: 10px 0 5px 0;
			}
			#content-right h3 {
				padding: 15px 0 0 0;
				font-size: 16px;
			}
			#content-right a {
				color: #E2E2E2;
				border-bottom: 1px solid #666;
			}
				#content-right a:hover {
					color: #fff;
					border-bottom-color: #999;
				}
			
			#content-right #sub-nav {
				display: block;
				padding: 10px 0 0 0;
				margin-top: 10px;
				border-top: 2px solid #939393;
				border-left: none;
				margin: 0 0 10px 0;
			}
				#content-right #sub-nav.withsubsub { margin-bottom: 0; }
				#content-right #sub-nav li {
					display: block;
					float: left;
					height: 1%;
					padding: 0;
				}
					#content-right #sub-nav li a {
						display: block;
						float: left;
						text-align: center;
						color: #fff;
						font-size: 14px;
						background: url('../images/grey-single.gif') repeat-y left;
						border: medium none;; padding-left:18px; padding-right:18px; padding-top:3px; padding-bottom:3px
					}
						#content-right #sub-nav li:hover { background: #6d6d6d; }
						#content-right #sub-nav li.current a { background: #939393; }
			
			#content-right #sub-sub-nav {
				display: block;
				background: #6d6d6d;
				font-size: 11px;
				margin: 0 0 20px 0;
				padding: 0;
				border-left: none;
			}
				#content-right #sub-sub-nav li {
					display: block;
					height: 1%;
					float: left;
					padding: 0;
				}
					#content-right #sub-sub-nav li a {
						display: block;
						float: left;
						line-height: 22px;
						text-align: center;
						color: #000;
						padding: 2px 15px;
						text-decoration: underline;
						border: none;
					}
						#content-right #sub-sub-nav li.last a { background: none; }
						#content-right #sub-sub-nav li:hover a { background: #939393; }
						#content-right #sub-sub-nav li.current a,
						#content-right #sub-sub-nav li.current a:hover { background: #878787; }
		
		#content-left {
			float: left;
			width: 300px;
		}
			#content-left h3 {
				font-size: 18px;
				padding: 10px 0 3px 0;
			}
				#content-left h3 em {
					font-style: normal;
					font-size: 14px;
					color: #b2b2b2;
					padding: 0 5px;
				}
			#content-left h4 {
				padding: 10px 0 10px 0;
				font-size: 14px;
				font-weight: bold;
			}
			#content-left a {
				color: #E2E2E2;
				border-bottom: 1px solid #666;
			}
			#content-left p {
				padding-right: 30px;
			}
			#content-left.bio img {
				margin-top: 50px;
				border: 5px solid #fff;
			}
			#project-thumbs {
				display: block;
				width: 300px;
			}
				#project-thumbs li {
					display: block;
					float: left;
					padding: 0 20px 20px 0;
				}
					#project-thumbs li.vacant {
						padding: 0; height: 100px;
						width: 100px;
					}
				#project-thumbs li a { border: none; }
					#project-thumbs img {
						border: 2px solid #ccc;
						height: 76px;
						width: 76px;
					}
					#project-thumbs .proj-info {
						display: none;
						position: absolute;
						left: 310px;
						top: 115px;
						background: #4D4D4D;
						width: 440px;
						padding-bottom: 200px;
					}
					#project-thumbs li:hover .proj-info { display: block; }
					#project-thumbs li:hover img {
						border: 1px solid #ccc;
						padding: 1px;
					}
					#project-thumbs h3 {
						padding-bottom: 5px;
					}
					#project-thumbs p.click-image {
						display: inline;
						padding: 2px 4px;
						border-top: 1px solid #6e6e6e;
						font-size: 11px;
						background: #525252;
					}
				
			#firm-slideshow {
				width: 300px;
				height: 1%;
			}
			#contact-info {
	margin-right: 30px;
	padding: 10px 0;
			}
			
		#content-body.resources #content-right { width: 500px; }
			#content-body.resources #content-right p strong { color: #fff; }
		
		a.external {
			padding-right: 14px;
			background: url('../images/grey-arrow-right.gif') no-repeat right;
			margin-bottom: 2px
		}
		
		#content-body.with-sidebar #content-left { width: 200px; }
		
		#content-body.with-sidebar #content-right { width: 520px; }
		
		ul.sidebar-nav {
			list-style-type: none;
			margin-top: 40px;
		}
			ul.sidebar-nav li {
				display: block;
				padding-bottom: 2px;
				width: 180px;
			}
				ul.sidebar-nav li a {
					display: block;
					background: #666;
					border-bottom: 1px solid #333;
					display: block;
					font-size: 12px;
					padding: 5px;
				}
					ul.sidebar-nav li a strong { color: #333; }
					ul.sidebar-nav li a:hover {
						background-color: #999;
					}
						ul.sidebar-nav li a:hover strong { color: #333; }
					
					ul.sidebar-nav li.current { width: 190px; }
						#content-left ul.sidebar-nav li.current a { background: #CCC; color: #333; }
						
		h4 {
			display: block;
			padding-top: 10px;
			padding-bottom: 3px;
			font-size: 14px;
			color: #fff;
		}
			#content-right.sitemap h4 { font-size: 12px; color: #999; }
			#content-right.sitemap h4 a {
				font-size: 14px;
				color: #FFF;
			}
		#content-right ul {
			display: block;
			margin-top: 5px;
			margin-bottom: 10px;
			padding-left: 10px;
			margin-left: 10px;
			border-left: 1px solid #999; 
			list-style-type: none;
		}
			#content-right ul li { padding-bottom: 4px; }
			#content-right.sitemap ul li a { font-weight: bold; font-size: 12px; padding-bottom: 2px; }
				#content-right.sitemap ul li ul li a { font-weight: normal; padding-bottom: 0; font-size: 12px; }
		
			#content-right.sitemap ul:hover { border-left-width: 2px; margin-left: 9px; border-left-color: #fff; }
			
			#content-right #map span.box-info { color: #333; }
			#content-right #map a { color: #660000; }
			#content-right #map { color: #333; }