/*
colors:
	light blue: #42adda
	dark blue:	#002663
	light gray:	#e8e8e8
	dark text:	#666666

*/

/* =global styles ***********************************/
body { font-family: Lucida Grande, Lucida Sans Unicode, sans-serif; background: #e8e8e8; color: #666; background: #e8e8e8 url(../_images/content-bg-small.jpg) 0 0 repeat-x;}

#home, #portfolio { background: #e8e8e8 url(../_images/content-bg.jpg) 0 0 repeat-x; }

h2, h3, h4 { color: #002663; }

h2 { font-size: 1.5em; line-height: 2em;}

a { color: #666; text-decoration: none; border: 1px dotted #666; border-width: 0 0 1px 0;}

.clear { clear: both; }

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
	
/* =all pages ***************************************/
#branding, #content, #footer { width: 980px; margin: 0 auto; background: #fff;}

#content { line-height: 1.5em; overflow: auto;}

#footer { font-size: 70%; line-height: 1.5em; overflow: auto; margin-bottom: 50px;}

.divider { border: 1px solid #ccc; border-width: 1px 0 0 0; margin: 30px 0 30px 35px; clear: both;}

/* =branding ****************************************/
#branding { height: 141px; background: url(../_images/header-bg.jpg) top left repeat-x; }
	#branding a { border: none;}
	#branding h1 { width: 275px; float: left; position: relative;}
		#branding h1 span { display: block; width: 220px; height: 141px; position: absolute; top: 0; left: 0; background: url(../_images/header-logo.jpg) top left no-repeat;}
	#branding h2 { float: left;}
	#branding #nav { float: left; width: 705px; font-size: 90%; border: 1px solid #d6d6d6; border-width: 1px 0 0 0; margin: 40px 0 0 0;}
		#branding #nav a { display: block; padding: 15px 10px 5px 15px; color: #808080; }
			#branding #nav a:hover { color: #002663;}
			#branding #nav a.current { color: #002663;}
		#branding #nav ul li { float: left;}
		#branding #nav #nav-main { float: left;}
		#branding #nav #nav-sub { float: right; font-size: 80%;}
			#branding #nav #nav-sub a { color: #999; margin: 2px 0 0 0;}
	
	#branding #nav #nav-main li ul { position: absolute; z-index: 100; width: 166px; background: url(../_images/menu-bg.png) bottom left no-repeat; padding: 0 0 10px 0; display: none;}
		#branding #nav #nav-main li:hover { background: url(../_images/menu-item-bg.gif) bottom left no-repeat;}
			#branding #nav #nav-main li:hover ul { display: block;}
		#branding #nav #nav-main li ul li { float: none; font-size: 90%;}
			#branding #nav #nav-main li ul li a { padding: 5px 0 0 15px; }
				#branding #nav #nav-main li ul li a:hover { color: #002663; }

/* =page styles **************************************/
.page .first-column { width: 255px; padding: 0 0 0 35px;}

.page #content { }

	.page #content #content-main { float: right; width: 690px; font-size: 85%; color: #000;}
		.page #content #content-main h2 { line-height: 1em; font-size: 2em;}
		.page #content #content-main h3 { font-size: 110%; margin: 0 0 -.8em 0; padding-top: 10px; }
		.page #content #content-main p { margin: 1em 50px 1em 0; }
		
		.page #content #content-main-inset { float: right; width: 180px; height: 280px; background: url(../_images/content-inset-bg.jpg) top left no-repeat; margin: 0 0 0 40px;}
		
		.page #content #content-main blockquote { width: 500px; display: block; position: relative; left: 190px; border: 1px solid #dcdcdc; border-width: 1px 0; font-size: 130%; color: #002663; }
			.page #content #content-main blockquote p { margin: 1em 40px 1em 3px;}

/* =landing pages ************************************/
.landing #content #content-main { font-size: 100%; color: #808080; line-height: 2em;}

/* =submenu on pages *********************************/
.subnav #content-sub { background: #d1d1d1 url(../_images/submenu-bg.jpg) bottom right no-repeat; width: 245px; min-height: 380px; font-size: 70%; }
	.subnav #content-sub #content-sub-nav {}
		.subnav #content-sub #content-sub-nav li { width: 100%; line-height: 3.5em; font-weight: bold; } 
			.subnav #content-sub #content-sub-nav li a { display: block; border-color: #666; padding-left: 30px; background: url(../_images/submenu-arrow.gif) 15px center no-repeat; }
				.subnav #content-sub #content-sub-nav li a.last { border: 0;}
				.subnav #content-sub #content-sub-nav li a:hover { background: url(../_images/submenu-arrow-hover.gif) 15px center no-repeat; color: #002663;}
				.subnav #content-sub #content-sub-nav li a.current { background: #f5f5f5 url(../_images/submenu-arrow-hover.gif) 15px center no-repeat; color: #002663; }
			.subnav #content-sub #content-sub-nav ul { background: #fcfcfc; padding: 15px 0; border: 1px dotted #666; border-width: 0 0 1px 0;}
				.subnav #content-sub #content-sub-nav ul li { line-height: 1.8em; }
					.subnav #content-sub #content-sub-nav ul li a { background: transparent; padding-left: 0; margin: 0 30px; color: #808080; }
						.subnav #content-sub #content-sub-nav ul li a:hover { background: transparent; }
						.subnav #content-sub #content-sub-nav ul li a.current { background: transparent; color: #000;}
			
.subnav-small #content-sub { background: #d1d1d1 url(../_images/submenu-small-bg.jpg) bottom right no-repeat; width: 245px; min-height: 280px; font-size: 70%; }
.subnav-small #content-sub #content-sub-nav {}
	.subnav-small #content-sub #content-sub-nav li { width: 100%; line-height: 3.5em; font-weight: bold; } 
		.subnav-small #content-sub #content-sub-nav li a { display: block; border-color: #666; padding-left: 30px; background: url(../_images/submenu-arrow.gif) 15px center no-repeat; }
			.subnav-small #content-sub #content-sub-nav li a.last { border: 0;}
			.subnav-small #content-sub #content-sub-nav li a:hover { background: url(../_images/submenu-arrow-hover.gif) 15px center no-repeat; color: #002663;}
			.subnav-small #content-sub #content-sub-nav li a.current { background: #f5f5f5 url(../_images/submenu-arrow-hover.gif) 15px center no-repeat; color: #002663; }
		.subnav-small #content-sub #content-sub-nav ul { background: #fcfcfc; padding: 15px 0; border: 1px dotted #666; border-width: 0 0 1px 0;}
			.subnav-small #content-sub #content-sub-nav ul li { line-height: 1.8em; }
				.subnav-small #content-sub #content-sub-nav ul li a { background: transparent; padding-left: 0; margin: 0 30px; color: #808080; }
					.subnav-small #content-sub #content-sub-nav ul li a:hover { background: transparent; }
					.subnav-small #content-sub #content-sub-nav ul li a.current { background: transparent; color: #000;}

/* =footer *******************************************/				
#footer { font-size: 60%; background: #fff url(../_images/footer-bg.gif) bottom right no-repeat; min-height: 133px;}
	#footer h3 { float: left; }
		#footer h3 a { color: #000;}
	
	#footer .contact-info, #footer #copyright { margin: 0 0 0 290px;}
	
	#footer .contact-info p { float: left; color: #000; margin-right: 20px;}
	
	#footer #copyright { padding: 7px 0 0 0;}
			
/* =home page ***************************************/
#home .first-column { width: 255px; padding: 0 0 0 35px;}

#home #content { overflow: hidden; font-size: 80%;}
	#home #content h3 { color: #000;}
	#home #content #content-main { height: 380px; position: relative; background: url(../_images/content-main-bg.jpg) top left repeat-x; }
		#home #content #content-main div { float: left; }
		#home #content #content-main #intro-text { width: 220px; position: absolute; bottom: 22px; left: 35px; line-height: 1.8em; }
			#home #content #content-main #intro-text h2 { font-size: 1.7em; line-height: 1.8em;}
		#home #content #content-main .intro-photo { margin: 0 0 0 290px; position: relative;}
			
		#home #content #content-main .intro-photo-label { position: absolute; right: 0; bottom: 22px; height: 67px; width: 250px; background: url(../_images/label-bg.png) bottom left no-repeat; font-size: 90%;}
			#home .intro-photo-label h3 { margin: 13px 15px 0 15px; background: url(../_images/label-arrow.gif) center right no-repeat; }
			#home .intro-photo-label p { margin: 0 15px 0 15px;}
		
		#photo-slideshow { position: relative;}
		#photo-slideshow li { position: absolute; top: 0; left: 0;}
		
	#home .button { background: url(../_images/read-button.png) center left no-repeat; display: block; height: 22px; width: 84px; font-size: 90%; color: #000; border:0; text-align: center; margin: 15px 0 0 0;}
		
	#home #content #content-sub { padding: 0 0 30px 0; font-size: 90%; color: #000;}
		#home #content #content-sub h3 { float: left;}
		#home #content #content-sub h4 { margin: 0 0 10px 0; font-size: 115%;}
		#home #content #content-sub .entry { float: left; width: 220px; padding: 0 10px 0 0;}
			#home #content #content-sub .entry a { padding: 0 14px 0 0; background: url(../_images/link-arrow.gif) center right no-repeat; color: #666;}
		
/* =history page ************************************/
#history #content { }

/* =portfolio page **********************************/
#portfolio #content { }
	#portfolio #content #content-main { padding: 0 0 0 15px; }
		#portfolio #content #content-main #portfolio-photos { height: 366px; background: url(../_images/portfolio-photo-bg.png) bottom left no-repeat; padding: 14px 0 0 15px; margin: 0 0 40px -15px;}
		#portfolio #content #content-main h2 { margin-bottom: 0; line-height: 1em; font-size: 1.6em;}
		#portfolio #content #content-main h3 { margin: 0; padding: 0; font-size: 90%; color: #999; }
		
		#portfolio #content #content-main #project-description { width: 490px; float: left; }
		#portfolio #content #content-main #project-meta { font-size: 80%; width: 190px; float: right; }
			#portfolio #content-main #photo-links { margin: 0 0 45px 0; }
				#portfolio #content-main #photo-links li { float: left; }
				#portfolio #content-main #photo-links a { display: block; height: 19px; width: 20px; text-indent:-9999px; border: 0; background: url(../_images/photo-link-box.jpg) top left no-repeat;}
					#portfolio #content-main #photo-links a.selected { background: url(../_images/photo-link-selected.jpg) top left no-repeat;}
			#portfolio #project-meta dl { }
			#portfolio #project-meta dt { font-weight: bold; line-height: 1em; margin: 2em 0 0;}
			#portfolio #project-meta dd { line-height: 1em; color: #666; padding: 3px 0; }
				#portfolio #project-meta dd a { color: #666;}
				
/* =staff page **************************************/
#staff #content { }
	#staff #content #content-main h2 { }
	#staff #content #content-main h4 { color: #808080; }
	
/* =about page *************************************/
#about #content { }
	#about #content-main { }
		#about #content-main #about-photo { background: url(../_images/about-photo-bg.jpg) bottom left no-repeat; height: 280px; overflow: auto; margin-left: -15px; }
			#about #content-main #about-photo .image-wrapper { height: 250px; background: #f5f5f5; margin: 15px 0 15px 15px; }
				#about #content-main #about-photo .image-wrapper img { }
				
	#about #content-main h2 { margin: 30px 0 20px 0;}