/* White Whale styles */

/* Reset browser defaults  */
html { font-size:100%; }
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,pre,img,form,fieldset,legend,label,iframe,blockquote,cite { margin:0; padding:0; font-size:1em; line-height:inherit; font-weight:inherit; font-style:inherit; border:none; }
input,select,textarea,button { font-size:1em; line-height:inherit; font-family:inherit; color:#222; margin:0; }
input[type=button],button { overflow:visible; }
input[disabled],select[disabled],textarea[disabled],button[disabled] { opacity:0.75; }
ul { list-style-type:none; }
.skiplink { position:absolute; top:0; left:-999px; width:9em; padding:5px; color:#00f; background-color:#ff9; border:1px solid #993; text-align:center; z-index:9999; }
.skiplink:focus { left:0; }
.hidden { display:none; }

/* Page structure */
body { background-color:#ccc; min-width:68em; max-width:1600px; font-family:Helvetica,Arial,sans-serif; font-size:0.875em; line-height:1.4; }
#page { width:100%; position:relative; overflow:hidden; background:url(/images/quotes/withoutaninternet_bg.jpg) top right; }

h1 { position:fixed; left:-0.1em; bottom:-0.3em; font-size:5.7em; line-height:1em; font-weight:bold; white-space:nowrap;  z-index:200; }
h1 a { color:#fff; text-decoration:none; }
h1 a span { margin-right:5.5em; }

#excerpt { width:450px; height:900px; position:absolute; top:0; left:0; background-image:url(/images/quotes/withoutaninternet_bg.jpg); z-index:100; }
	#excerpt blockquote { padding:10px 30px; font-size:2.4em; line-height:1.1em; font-family:Palatino,'Palatino Linotype',serif; text-align:justify; text-indent:-9999px; height:320px; background:url(/images/quotes/withoutaninternet.png) no-repeat top left; }
	#excerpt cite,#excerpt .caption { background-color:rgba(0,0,0,0.8); color:#fff; display:block; padding:1em 30px; font-size:0.9em; }
	#excerpt cite a,#excerpt .caption a { color:#fc0; text-decoration:none; }
	#image { padding:60px 30px 10px; }
	
#main { background-color:#fff; color:#444; width:495px; padding:25px 35px 5px; text-align:justify; margin-left:375px; position:relative; z-index:300; height:100%; min-height:650px; }
	
	#navigation { font-family:Palatino,'Palatino Linotype',serif; text-transform:lowercase; font-style:italic; font-size:1.4em; height:2.7em; margin-bottom:1em; border-bottom:1px solid #147; padding-left:75px; }
	#navigation li { float:left; text-align:center; height:1.3em; white-space:nowrap; }
		#navigation li#home { width:75px; margin-left:-75px; }
		#navigation li#staff { width:71px; }
			#navigation li#staff a { position:relative; left:-0.1em; }
		#navigation li#clients { width:81px; }
		#navigation li#blog { width:65px; }
		#navigation li#portfolio { width:102px; }
		#navigation li#contact { width:101px; float:right; }		
	#navigation li a { color:#222; text-decoration:none; display:block; width:100%; }
	#navigation li a:hover { color:#036; }
		.staff #staff,.clients #clients,.blog #blog,.portfolio #portfolio,.contact #contact { background-color:#036;  font-weight:bold; }
		.staff #staff a,.clients #clients a,.blog #blog a,.portfolio #portfolio a,.contact #contact a { color:#fff !important; cursor:default; }

	#content a { color:#036; font-weight:bold; text-decoration:none; }
	#content a:hover { color:#444; }

	#footer { font-size:0.9em; color:#666; text-align:center; margin-top:2.5em; clear:both; }
	#footer a { color:#555; }
	#footer a:hover { color:#036; }

/* Homepage-specific */
.homepage #main { margin-left:450px; width:420px; }

.homepage #navigation { padding-left:0; }
	.homepage #navigation li#home { display:none; }			

/* Type */
h2 { font-size:1.7em; margin:0.5em 0; }
#content h2 a { font-weight:normal; }
#content a:hover {text-decoration:underline;}
h3 { font-size:1.4em; font-family:Palatino,'Palatino Linotype',serif; color:#222; margin-top:1.5em; }
p { margin:1em 0; }
li { margin:0.5em 0; }
#content blockquote { margin:1em 2em 1em 4em; font-size:0.9em; }

/* Page-specific */
.staff #excerpt { background-image:url(/images/backgrounds/contact_left.jpg); }
.staff #page { background-image:url(/images/backgrounds/contact_right.jpg); }
	.donald #excerpt, .donald #page { background-image:url(/images/backgrounds/donald.jpg); }
	.tonya #excerpt, .tonya #page { background-image:url(/images/backgrounds/tonya.jpg); }
	.jason #excerpt, .jason #page { background-image:url(/images/backgrounds/jason2.jpg); }
	.douglas #excerpt { background-image:url(/images/backgrounds/douglas_left.jpg); }
	.douglas #page { background-image:url(/images/backgrounds/douglas_right.jpg); }
	
.clients #excerpt, .clients #page { }

.portfolio #excerpt, .portfolio #page { }
	ul.portfolio { list-style-type:none; width:515px; }
	ul.portfolio li { float:left; width:150px; margin-right:20px; height:150px; text-align:center; font-size:0.9em; }
	ul.portfolio li .screenshot { width:150px; height:100px; border:1px solid #ccc; overflow:hidden; margin-bottom:0.2em; display:block; }
	ul.portfolio li a { white-space:nowrap; }
	ul.portfolio li .location { display:block; }
	.kenyon #excerpt, .kenyon #page { background-image:url(/images/backgrounds/kenyon.jpg); }
	.southwestern #excerpt { background-image:url(/images/backgrounds/southwestern_left.jpg); }
	.southwestern #page { background-image:url(/images/backgrounds/southwestern_right.jpg); }
	.berkeleylaw #excerpt, .berkeleylaw #page { background-image:url(/images/backgrounds/berkeleylaw.jpg); }
	.newurbanarts #excerpt, .newurbanarts #page { background-image:url(/images/backgrounds/newurbanarts.jpg); }
	.haverford #excerpt, .haverford #page { background-image:url(/images/backgrounds/haverford.png); }
	
.contact #excerpt { background-image:url(/images/backgrounds/contact_left.jpg); }
.contact #page { background-image:url(/images/backgrounds/contact_right.jpg); }