/* Begin :: Init */
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, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, button { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1.3em; font-family: sans-serif;
	color: #777; background: #000 url(./home-bg.png) 0 2.1em no-repeat; -webkit-font-smoothing: antialiased;
	padding:0; margin:0; overflow:scroll;}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { background: #ffc; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
/* End :: Init */

/* Begin :: Logo */
#outer-logo-box {display:none;}
#logo-box {width:35%;margin:0 0 1em 3%;padding: 0 0 1em 0}
#logo-box a, #logo-box a:hover {text-decoration:none;border:none;color: #fff;background-color:inherit;}
div.line-one {font-size:2em; font-weight:bold}
div.line-two {font-size:0.9em;margin-top:0.5em}
/* End */

/* Begin :: Type */

h1, h2, h3, h4, h5 { font-weight: normal; color: #484a50; line-height: 1.2em; max-width: 750px; }
h1 { font-size: 1.6em; line-height: 1em; max-width: 100%; color: #2883C2; }
h2 { font-size: 1.4em; margin: 1em 0 0.5em; }
h3 { font-size: 1.2em; margin: 1em 0 0.25em; }
h4, h5, h6 { font-size: 1.1em; }
h1 .subhead { font-size: 0.4em; color: #484a50; line-height: 0.5em; }
h3 .subhead { color: #888; padding-left: 0.25em; }
p { max-width: 750px; font-size: 0.875em; padding-right:1em;}
p + p { text-indent: 2em; }
.acronym { text-transform: uppercase; font-size: 0.875em; }
h1 .acronym, h2 .acronym, h3 .acronym, h4 .acronym, h5 .acronym { font-size: 0.75em; }
p.intro { font-size: 1.1em; line-height: 1.5em; margin-top: 2.5em; margin-bottom:1.5em;}
p.intro:first-letter { color: #777; font-size: 3em; display: block; float: left; margin: 0em 0.05em 0.05em 0}
#ieroot p.intro:first-letter { margin-bottom: -0.1em; }
#ieseven p.intro:first-letter { color: #444 !important; font-size: 1em !important; font-family: sans-serif !important; }
#primary ul { max-width: 750px; list-style: square; margin: 1em 10% 0.5em 1.5em; }
#primary li { font-size: 0.875em; padding-bottom: 0.5em; margin-left: 1.125em; }

/* End :: Type */

/* Begin :: Links and Buttons */

a:link, a, a:visited { text-decoration: none; color: #2883C2; }
a:hover {color:#2883C2;}
.arrow { display: none; }

/* End :: Links and buttons */

/* Begin :: Primary Navigation */
#nav a:hover {border-top:3px solid #eee;}
#nav {width:100%;float:left;position:relative;padding:0;margin:0;}
#nav, #toggle-nav { margin: 0 auto; font-size: 1.0em}
#nav li { margin: 0 1em 0 0; display: block; float: left;
	clear: none; text-align:center;
	font-size:1em}
#nav li a {padding:0.125em 0.5em;border-top:3px solid #ccc;}
#nav li:last-child { margin-right: 0; }
#nav a { display: block; color: #555; }
#nav #contact-li {float:right} #nav #contact-li a {border-top:3px solid #ccc;}

#page-nav {clear: left; color:#fff;
	background: #2883C2; 
	background: rgba(40,131,194,0.75);
	width: 26%; 
	float:left;
	position:relative; z-index: 4; margin-left:6%; margin-right:-15%; margin: 3% -15% 1% 6%; padding: 0}
} 

#nav a.active { color: #2883C2; }
#nav a.active:hover { border-color: #2883C2; color:#fff}

#page-nav a { display: block; padding: 0.25em 0.5em 0.4em 0.5em; color: #fff}

#page-nav a:hover, #page-nav a.active-album { border-bottom: none; background-color: #777; background-color: rgba(119,119,119, 0.75);}
#page-nav a.active-album {color: #555; background-color: #eee;}

#page-nav a.active { color: #fff; border-bottom: none; }
#page-nav li {border-bottom: 1px solid #ddd;text-transform:lowercase;}
#page-nav li:last-child {border-bottom:none;}

/* End :: Primary Navigation */

/* Begin :: Layout */

.flux { width: 92%; padding: 0.5em 4%; }

.inner { width: 100%; position: relative; }

#header-flux {background-color:#eee;min-height:2em;}
#header-flux, #contact { background-color: #ccc; width: 100%; padding: 0;}

#contact { background: #2883C2; display: none; }
#contact a {color:#fff; text-decoration:none}
#contact a:hover {color:#fff; text-decoration:none;}

#header-wrap, #contact-wrap { width: 100%; max-width: 1600px; margin-top:0; margin-bottom;0}

#header, #contact-info { padding-left: 3%; width: 94%; max-width: 1500px}

#ieseven { padding-bottom: 0.5em; }

#main { width: 92%; padding: 2em 4% 0; max-width: 1600px; }

#primary { background: #fff; background: 
	rgba(255,255,255,0.85); width: 58%; 
	float: right; padding: 0 0 6em 18%; margin: 0 4% 1em 0;
	font-size:1.1em;}

#secondary, #secondary-inline {	clear: left; color:#fff;
		background: #2883C2; 
		background: rgba(40,131,194,0.75);
		width: 23%; 
		float:left;
		position:relative; z-index: 4; margin: 3% -15% 1% 6%; padding: 3% 2.5%}
#secondary-inline {display:none;}
#bbox {clear:left;float:left;width:30%; position:relative;
	z-index: 5;margin: 0 -20% 0 6%; padding: 0}
#pop-nav {position:absolute; top:0; left:35%;background-color: #2883C2; background-color: rgba(40,131,194,0.75);;width:40%;}
#pop-nav li {line-height:1em;font-size:0.8em;}
#pop-nav li a {color:#fff; border-bottom:1px solid #ddd;display:block;padding:0.5em 0.75em;}
#pop-nav li a.last {border-bottom:none;}
#pop-nav li a:hover {background-color: #777; background-color: rgba(119,119,119, 0.75);}
#pop-nav li:last-child {border-bottom:none;}

/* End :: Layout */

/* Begin :: Contact */

#contact-info { color: #fff; padding: 0.5em 0 1.25em 3%; position: relative}

.org { color: #fff; margin: 0.25em 3% 0 4%; float: left; width: 27%}

.org i { font-style: normal;}

.org .subhead { color: #fff; text-transform: uppercase; font-size: 0.7em;}

.modern { float:right; text-align: right;margin-top: 0.45em;}

.modern div { text-align:left; }

table.resume td.date, .label { text-transform: lowercase; font-variant: small-caps; color: #eee; }

a.email { color: #fff; }

a.email:hover { color: #fff; border-color: #fff; }

#contact-close { background: #484a50; color: #fff; padding: 0 0.5em 0.25em; position: absolute; bottom: 1em; right: 1em; width: 5em; text-transform: lowercase; font-variant: small-caps; font-weight: bold; }

#ieseven #contact-close { padding-bottom: 0; }

#contact-close:hover { background: #777; cursor: pointer; }

/* End :: Contact */
/* Begin :: Content */

#main h1 { position: relative; padding-left: 3%; margin:0; line-height: 1.3em; float:left}
#ieseven #main h1 { line-height: 1.2em; }
#main h2.introductory { margin: -1.2em 0 0; position: relative; top: -2em; padding-left: 3%; }

/* End :: Content */

/* Begin :: Primary */
.page-teaser { position: relative; }
.page-teaser p { width: 73%}
.page-teaser h2 {font-size:1.2em; width:69%;padding-top:0.3em;}
.page-teaser .moreinfo {position: absolute; bottom: 0.4em; right: -10%; margin: 0; display: block; width: 28%; text-indent: 0; font-size: 0.9em; font-weight: bold; line-height: 1.3em; }
.page-teaser .moreinfo a { display: block; color: #fff; background: #2883C2 url(./arrow.png) 96% 50% no-repeat; 
	background: rgba(40,131,194,0.75) url(./arrow.png) 90% 50% no-repeat; padding: 0.75em 1.25em 0.75em 0.6em;
	width: 82%; }
.page-teaser .moreinfo a:hover { background-color: #777; background-color: rgba(119,119,119, 0.75);; border: none; }
.page-teaser .moreinfo img { width: 80%; padding-bottom: 0.75em; }
.sidebar { display: block; float: right; background: #484a50; 
	background: rgba(72,74,80,0.75);
	padding: 1em 1em 0.5em; margin: 0.75em 3% 0.25em 1.5em;
	font-size: 0.875em; width: 40%; color: #fff; border:3px solid white;}
.sidebar h3 { margin: 0 0 0.5em; color: #fff; }
#primary .sidebar li { color: #fff; margin-left: 1.25em; }

img { display: block; }

.right { float: right; margin: 0.25em 0 0.25em 1em; }

.sidebar p.caption { margin:0 auto; line-height:1em;padding-top:0.5em;}

/* End :: Primary */

/* Begin :: Footer */

#footer-flux { padding-top: 1.5em; }
#footer {color: #eee; font-size: 1em; padding-bottom: 1em; z-index: 0; max-width: 1600px;}
p.copyright {background: inherit; padding: 0; margin-left:20%; max-width: none; float:left;}
p.page-info {color:#777;float:right;font-size:0.9em;padding-right:4%;}
#footer a {color:#eee}
#footer a:hover {background-color:none}
#footer p span.dt, #winx, #winy {font-size:0.8em;}

/* End :: Footer */

/* Begin :: Final items */
p.note {line-height:1.3em;font-size:0.7em; width:70%; position:absolute; bottom:0; padding:1em 3% 4% 0;text-indent:0;}
p.quote, p.lyrics {font-style:italic;}
p.by {font-variant: small-caps; font-size:0.8em}
p.by cite, p.by span {font-variant: normal;}
p.by cite {white-space:nowrap;}
body.random div.quote {margin:0 2em 0 0;line-height: 1em;}
body.random div.quote p.by {margin:0 2em 1em 2em;text-align:left;}
#secondary div.quote p.by {text-align:right;}
#about-slide {white-space:nowrap;}

#main div.cap {
	padding:0 2% 2em 2em;
	width:175px;
	line-height:0.9em}
#main div.left {padding:0 2em 2em 2%}
#main div.v {width:131px}
#main div.cap p {font-size:0.7em; padding-top:0.5em}
#main div.padt {padding-top:3%}

.right {float: right;}
.left {float:left;}

blockquote.def {
	color:white;
}
blockquote.def p.term {
	margin-bottom:0.5em;
	font: bold 2em monospace;
}
blockquote.def span {font-size:0.5em; white-space:nowrap}
blockquote.def p + p, div.quote p + p {font-size:0.8em; text-indent:0;}
blockquote.def ol {list-style-type:decimal;margin:0 2em;}
blockquote.def ol li {font-size:0.9em;}

span.bull {font-size:0.5em;}

div.random-item { margin-bottom: 1.5em; margin-right:4%;}
.inline {display:inline;}
#search-popup {background: #fff; background: rgba(255,255,255, 0.5);
	padding:1em 0 1em 0;display:none;white-space:nowrap;}
#search-popup img {vertical-align:middle;margin:auto;}
#search-popup div {margin:auto;}
a.ext-search:hover {background-color:inherit;}
#search-popup p {font-size:0.6em;text-align:center; color:#000; background-color:#eee; padding:0.125em; width:64px;}
.noshow {display:none;}
#toggle-nav {display:none;margin:0;padding:0;position:relative;width:100%}
body.random #random,
 	body.home #index,
	body.about #about,
	body.dream #dream,
	body.gallery #gallery,
	body.projects #projects,
	body.links #links,
	body.resume #resume {border-top:3px solid #777; color:#2883C2}
#page-nav li.noline {border-bottom:none;}
#inner-nav {float:right;background-color:#777;margin:0;padding:0 0.5em;border-bottom:1px solid #333;border-left:1px solid #333;}
#inner-nav, #inner-nav a {color:#fff;text-transform: lowercase; font-variant: small-caps; font-size:0.9em;font-weight:bold;}
p, h2, h3 {padding: 0 5% 0 2%;}
h3.org {padding-left:0;}
p.tbc {font-size:2em;font-style:italic;margin:0;padding:1.5em 0; text-indent:0;}
p.lyrics {text-indent:0;margin:0; padding:1.5em 5em 1.5em 3em;}
p.indent {text-indent:2em;}
p.noindent {text-indent:0;}

/* End :: Final Items */
/* Begin :: Links */
#main div.links {margin-top:1.5em;}
#main div.link {margin-bottom: 1em;}
#main div.link p {line-height:1.1em; font-size:0.9em;}
#main div.detail p {padding-left:2em;}

body.resume #primary {font-size:1em;}
table.resume {margin:2em}
table.resume p {line-height:1.2em; text-indent:0; padding-bottom: 0.75em;}
table.resume td {padding:0.5em 0.5em 0 0.5em;vertical-align:top;}
table.resume td.head {background-color: #2883C2; background-color: rgba(40,131,194,0.75);; font-weight:bold;padding:0.25em 0.5em 0.5em 0.5em; color:#fff;}
table.resume td.date, table.resume td.data 
	{background-color: #FFF; background-color: rgba(255,255,255,0.75);; color: #777; border:1px solid #ddd;}
table.resume td.date {border-right:none;}
table.resume td.data {border-left:none;}
table.resume td.date {font-size:0.8em;white-space:nowrap;color:#2883C2;}
#main table.resume li {margin:0 2em;padding:0}
#main table.resume ul {margin:0;padding:0;}
#main table.resume ul + p {margin-top: 1em;}
#main table.resume ul.pad {margin-bottom:1.5em;}

/* @group MEDIA QUERIES */
@media only screen and (max-width: 3000px) {
	body {font-size:1.2em};
}

@media only screen and (max-width: 1600px) {
	body {font-size:1.1em};
}


@media only screen and (max-width: 1150px) {
	body {font-size:1.0em};		
	.statement { font-size: 2em}
	#main div.cap {width:35%}
	#main div.v {width:25%}
}

@media only screen and (max-width: 860px) {
	body {font-size:1em};
	.statement { font-size: 1.5em; }
	#main div.cap p {
		font-size:0.6em;
	}
}

@media only screen and (max-width: 767px) {
	
	body {
		-webkit-text-size-adjust: 100%;
		background: #000 !important;
		font-size:1.1em;
	}
	body.album h1.album-title {padding-bottom:0.5em;}
	p {padding: 0 2% 0 2%;}
	#toggle-nav {position:relative;display:block; width:100% }
	#show-nav, #show-logo, #logo-box {display:none;}
	#header {padding:0;width:100%;}
	
	#outer-logo-box {
		display:block; width:100%; font-size:0.8em;margin:0; padding:1em 0;
		margin-left: 50%; position: relative; left: -100px; float:none;clear:both}
	#nav a.toggle-contact {background-image:none;}	
	#nav { margin: 0; padding: 0; float:none;clear:both}
	#nav li {line-height:1.5em; margin: 0; display: block; width: 100%; clear: none;text-align:left;}
	
	#nav a { padding: 6px 0 8px; text-indent: 10px; 
		color: #fff; background: #2883C2 url(./arrow.png) 96% 50% no-repeat; border-top: 1px solid rgb(255,255,255); }
	#nav #contact-li a {background-image:none;}
	#toggle-nav li {width:100%;padding:0;line-height:1.5em;}
	#toggle-nav li a {display:block;padding: 2px 0 3px 5px; text-indent: 0.75em;
			color: #fff; background: #2883C2; border-top: 1px solid rgb(255,255,255)}
	
	#nav a:hover, 
		#toggle-nav li a:hover,
	{ border-bottom: none;background: rgba(194,100,40,1.0) }
	
	#nav a.active { color: #fff; background: rgba(72,74,80,0.75) url(./arrow.png) 96% 50% no-repeat; border-top-color: rgb(72,74,80); }
	
	#header-flux { background-color: #000; width: 100%; padding: 0;}
	
	#contact-info { padding-left: 5%; width: 95%; max-width: 1500px; }
	
	/*.flux { width: 100%; padding: 0.5em 0; }*/
	
	#main { width: 100%; padding: 0; margin:0;}
	
	#main h1 { margin: 0; top: 0; display:block;clear:both;float:none;
		padding: 0.5em; border-top:2px solid #777; border-bottom: 1px solid #2883C2; background-color: #ddd;}
		
  #main h2.introductory { margin: 0; top: 1em; padding-left: 3%; }
	h2 {color:#ccc;}

	#primary { background: none; width: 100%; float: right; padding: 0; margin: 0; color:#fff}
/*	#primary p, #primary h3, #primary h2 {padding: 10%;}
	#primary p + p {padding: 0 4% 0 4%;margin:0;}
	*/
	#primary h3 {color:#bbb}

  #secondary { display: none; background: #2883C2;
	background: rgba(40,131,194,0.75); width: 90%; float: right; clear: both; margin: 0 0 0;}
  #secondary-inline {display:block; float:none;clear:both; width:90%; margin: 1em 0 auto; padding:1em;}
 
	h2.sep {border-top:1em solid #2883C2; padding-top:1em;}
  p.intro { margin-top: 0.5em; color:#fff; font-size:inherit;}
  
  p.intro:first-letter { color: #fff; font-size: 1em; display: inline; float: none; margin: 0;}
	#primary div.page-teaser {margin:0; padding-top:0}
	#primary div.first-teaser {margin-top:1.5em;}
  	#primary .page-teaser p {width:96%;}
	#primary .page-teaser .moreinfo {position:static;clear:both;
		float:none;display:block;
		width:100%;margin:3% 0 0 0;padding:0;}
	p.intro {}
	.moreinfo a {font-size:1.0em; font-weight:normal;padding:0}
	.page-teaser .moreinfo a, .page-teaser .moreinfo a:hover {border-bottom:1px solid #aaa;
		width:96%;background: #333 url(./arrow.png) 96% 40% no-repeat; 
		padding:0.25em 2%}
	.page-teaser h2 {font-weight:bold;border:none;
		border-top:2px solid #777; background: #2883C2; width:96%;padding:1% 2%; color:#fff;margin-top:0;}

	.sidebar { display: block; float: none; background: none; padding: 0; margin: 0.75em 0 0.25em 0 !important;
		font-size: 0.875em; width: auto; }

  .sidebar h3 { margin: 0; color: #ddd); }
	
	#primary .sidebar li { color: #444; margin-left: 1.25em; }	
	
	/* @group CONTACT */

	#contact-info { color: #fff; padding: 0.5em 0 1.25em 3%; position: relative; font-size:0.8em}
    
  .org, .modern, .adr { width: 100%; }
  .org {float:none;clear:both; width:100%;}
	#contact-info div {}
	#com-block {padding:0.5em 4%;margin:0;float:none;clear:both;}
  
  .adr { margin-top: 1em; }
  
  #contact-close { background: #a3a4a7; background: rgba(255,255,255,0.25); color: #fff; padding: 0 0.5em 0.25em; position: absolute; bottom: 1em; right: 0; width: 5em; text-transform: lowercase; font-variant: small-caps; font-weight: bold; }
  
  /* @end */
	#footer {font-size:0.5em}
	p.copyright { background: none; padding: 0; margin: 0;}
	p.page-info { color:#555; padding:0;}	
	#album {clear:both; margin:0 3% 0 3%; border:7px solid #aaa; width:90%;height:100%;}
	body.album p.copyright {margin-left:0.25em;}
	body.random #primary div.quote {margin:0;line-height: 1em;}
	body.random #primary div.quote p.by {margin:0 0 2em 2em;text-align:left;}
	p.note {position:relative; padding:6% 3% 2% 2%; width:95%;}
	.nomobile {display:none;}
	#com-block {line-height:1.1em;}
	#page-nav { background: #000; width: 100%;
		margin: 0; padding:0;
		position: relative; border-top:2px solid #777;border-bottom:1px solid white;
		font-size:1em;}
	#page-nav li {width:100%}
	#page-nav a {display:block;}
	#nav li a, #nav #contact-li a {border-top:1px solid white;}
	#nav, #toggle-nav {font-size:1.2em;}
	body.random #random,
	 	body.home #index,
		body.about #about,
		body.gallery #gallery,
		body.projects #projects,
		body.links #links {border-top:1px solid #777; color:#2883C2; font-weight:bold;}
	#nav a:hover {border-top:1px solid #eee;}
	h1.album-title {font-size:0.9em;padding:0.5em 0 0 0;margin:0;width:97%;}
	a:active {background-color:inherit}
	p.lyrics {padding:1.5em 7%}
	#bbox {display:none;}
	table.resume {margin:0}	
	#album-back {display:none;}
}
@media only screen and (max-width: 501px) {
	#album {height:85%;width:90%;float:none;clear:both;margin:0 auto}
}
/* EOF */