/* stylesheet for mah site */

/*******************RESET CSS*******************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, cite, font, img, small, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0;border: 0;outline: 0;vertical-align: baseline;background: transparent; font-size: 100%; line-height: 1em; list-style: none; }
ul { list-style: none; }
ol  { list-style: decimal; }
table {border-collapse: collapse; border-spacing: 0;}
input, select, textarea {font-family: "Helvetica Neue", Helvetica, Arial, sans serif;}
legend {display: none;}
/****************END RESET*********************/

/*Globals*/
body { background: #112; font: normal 1em/1.4em Georgia; color: #ccc; }
a, a:link, a:visited { color: #fff; text-decoration: none; }
a, a:link, a:visited { color: rgba(255,255,255,.7); }
a:hover { color: #ddd; }
.clear { clear: both; }
.cleft { clear: left; } .cright { clear: right; }

/*Bg colors*/
.reset { background-color: #000; } /* original background color */

.bg-2 { background-color: #200; }
.bg-2 #content h2, .bg-2 #content h3, .bg-2 #sidebar dt { background-color: rgba(232, 100, 50, 0.55) !important; }

.bg-1 { background-color: #888; color: rgba(51,51,51,0.8) !important; }
.bg-1 #content h2, .bg-1 #content h3, .bg-1 #sidebar dt { background-color: rgba(51,51,51,0.8) !important; }
.bg-1 #content p { color: rgba(251,251,251,0.9) !important; }

/* Containers ========================================================== */
#container { width:960px; margin:0 auto; }
#header { width:100%; margin-bottom:2em; padding-top:1.5em; border-bottom:5px solid #ddd; border-color:rgba(233,233,233,0.7); position:relative; }
#sidebar { float: right; width: 200px; margin-left: 20px; }

/* Header ============================================================= */
#header h1 { font: normal 2.2em/1em "Helvetica Neue"; color: #fff; color: rgba(255,255,255,0.7); background: transparent; float: left; margin-bottom: 7px; width:75%; }
#header h1 a { font: normal 1.5em/0.9em "Helvetica Neue"; color: #ddd; text-shadow: -.04em .04em .025em #333; }
#header h1 a:hover { color:#eee; text-shadow: -.03em .03em .02em rgba(255,160,0,1); }
#header h2 { float: left; clear: left; font: normal 1.2em/1.9em "Helvetica Neue"; }
#header ul#nav { float: right; width: 12.5em; margin-bottom:.8em; }
#header ul#nav li { float: left; }
#header ul#nav li a { float: left; margin: 0 .3em 0 0; padding:.25em .4em; width:4em; font: normal 1.2em/1.00em "Helvetica Neue"; }
#header ul#nav li a:hover { background: #ddd; background: rgba(223,223,223,0.7); color: #333; }
#color-picker { position: absolute; bottom: -15px; left: 0; -moz-box-shadow: 0 0 30px rgba(181,181,181,0.55); margin-top: 8px; width: 60px; }
#color-picker ul li a { float: left; width: 20px; height: 15px; display: block; margin: 0; text-indent: -999em; opacity: 0.95; cursor: pointer; }
#color-picker ul li a:hover { opacity: 1; }

/* Sticky Footer ======================================================= */
/** { margin: 0; }
html, body { height: 100%; }
#container { margin-bottom: -18px; min-height: 100%; height: auto !important; height: 100%; }
#footer, #push { height: 15px; }
#footer { background: #ddd; color: #333; position: relative; padding-bottom:3px; }
#footer .wrap { margin: 0 auto; }
#footer .wrap ul li { float: left; }
*/
/* Portfolio =========================================================== */
.portfolio #sidebar { display:none; }
.porfoltio #container { overflow:hidden; }

/** temporary under construction bull */
.tbd {}
.tbd h2 { margin:0 auto; text-align:center; font: italic normal normal 5em/120% Georgia; height:100%; width:100%; margin:10% 0 0; text-shadow:-.03em .03em .01em #000, .01em -.01em .01em #000; }
.tbd p { margin:0 auto; padding:0 7em; text-align:center; font:normal 1.5em/150% Georgia; margin:3em 0; text-shadow:-.03em .03em .1em #000, .01em -.01em .1em #000; }

/* Take three
*************
.portfolio #content { border:0 none; width:100%; padding:0; height:150px; position:relative; overflow:hidden; }
.portfolio #content ul { width:200%; height:150px; overflow:hidden; }
.portfolio #content ul li { width:9%; margin: 0 .5%; float:left; }
.portfolio #content ul li h3, .portfolio #content ul li .text { display:none; }
.portfolio #content ul li img { width:100%; }

.portfolio #content ul #diptyque:target { width:50%; position:absolute; top:0; left:0; }

/* Take two
***********
.portfolio #content { border:0 none; width:100%; padding:0; position:relative; overflow:hidden; }
.portfolio #content ul li { width:100%; position:relative; display:block; margin:0 0 3em; }
.portfolio #content ul li h3 a { font:normal 1.8em/1.8em "Century Gothic"; padding: 0.25em 4em 0.25em 0.5em; background: #333; background: rgba(231,231,231, 0.25); color:#fff; width:100%; display:block; z-index:2; float:left; border-bottom:1px solid #fff; margin:0 0 .5em; -webkit-transition:color,background 0.5s linear; }
.portfolio #content ul li h3 a:hover { background:rgba(231,231,231,.8); color:#333; }
.portfolio #content ul li img { width:47%; margin:0 .25em 0 0; clear:left; float:right; z-index:1; position:relative; }
.portfolio #content ul li .text { display:block; text-align:left; width:45%; float:none; }
.portfolio #content ul li .text { padding:0 .25em 1em; } 
.portfolio #content ul li .text .info li { display:none; }
.portfolio #content ul li .text .info li { display:none; }
.portfolio #content ul li .text .info { padding:1em 0 1em 1em;  }
.portfolio #content ul li .text .info h4 { font:italic 1.2em/1.3em Georgia; padding:.3em .5em; border-bottom:1px solid #fff; margin:0 0 .25em; color:#fff; }
.portfolio #content ul li .text .info p {  }


/* Home ================================================================ */
.home #content { position: relative; border: none; padding: 1em 0 1em 6.5em; width:auto; float: none; }
.home img.face { -webkit-box-shadow: 0 0 20px rgb(117,76,36); -moz-box-shadow: 0 0 20px rgb(117,76,36); opacity: 0.50; width: 23%; position: absolute; top: 0; left: 0.5%; z-index: 10; -webkit-transition: background,display 1s ease-in; }
.home #content h2, .home #content h3, .home #content p { z-index: 30; position: relative;  }
.home #content h2 { margin-bottom: 1.5em; text-shadow:-.15em .15em .1em #111; -webkit-box-shadow:-.15em .15em .1em #333; }
.home #content h2 span { max-width:750px; display:block; font: normal 2.6em/1.2em "Helvetica Neue"; color: #fff }
.home #content h3 { margin: 35px 0 5px; font: normal 1.5em/1em "Helvetica Neue"; color: #fff; color: rgba(255,255,255,0.75); text-shadow:-.05em .05em .08em #000; -webkit-box-shadow:-.10em .10em .1em #333; }
.home #content h2, .home #content h3 { padding: 0.25em 4em 0.25em 1em; background: #333; background: rgba(231,231,231, 0.25); }
.home #content p { font: italic 1.4em/1em Georgia; color: #ddd; margin: 8px 0 8px 1em; color: rgba(255,255,255,0.55); text-shadow:-.07em .07em .06em #333; }
.home #content p a, .home #content p a:visited { color: #fff; color: rgba(255,255,255,1); font:italic 1.5em/1.5em Georgia; padding: 0 5px; text-shadow:-1px 1px 1px rgba(110,110,110,0.8);  }
.home #content p a:hover { background: #333; background: rgba(231,231,231,0.25); text-shadow:-2px 2px 1px #000; }
.home #content div { float: left; width: 33%; margin-right:4.3em; }
.home #supes { display:none; position:fixed; top:0; left:0; width:100%; height:100%; opacity:1; background:#000; background:rgba(0,0,0,0.7); z-index:1000; }
.home #supes:target { display:block; }
.home #supes img { position:absolute; top:50%; left:50%; width:40%; margin:-40% 0 0 -20%; border:5px solid #fff; }

/* Contact ============================================================= */
.contact #content h2 { font: normal 25px/30px "Helvetica Neue"; color: #fff; margin-bottom: 20px; }

.contact #content ul li a { font:bold italic 1.3em/1.8em Georiga; display: block; }
.contact #content ul li a:hover { background: rgba(255,255,255,0.1); }

.contact ul#social { margin-bottom: 10px; }
.contact #sidebar ul#social li a { ; padding: 3px; font: normal 14px/18px Georgia; }
.contact #sidebar p { margin: 10px 0 15px; font: normal 14px/16px Georgia; }

/****************** TRICKY MEDIA QUERY STUFF ************************/

/* globals for @media query supporting browsers */
@media screen and (min-width:0px) {
	body{ position:relative; }
	#sexophone { display:none; position:absolute; top:12.5%; left:12.5%; width:75%; height:75%; }
	#container { width:90%; }
	/*.home #content { -webkit-transition:opacity 0.5s linear; }*/
	.home #content div { width:45%; }
	.home #content div:last-child { margin-right:0em; }
}

/* 1200px+ view, biggest case */
@media screen and (min-width: 1200px) {
	body { font-size:110%; }
	.home #content { padding: 15px 0 0; width:100%; }
	.home #content .face { right: 10px; top: -10px; right:2%; top:-2%; left:auto; width:37%; max-width: 525px; max-height:700px; background-color:#f00; }
	.home #content div { width:28%; }
	.home #supes:target img { width:30%; margin:-30% 0 0 -15%; }
	.home #content h2 span { max-width:730px; }
}

/* 800px view */
@media screen and (max-width: 800px) {
	body { font-size:85%; }
	#header ul#nav { float:none; clear:both; width:auto; }
	#header ul#nav li a { margin:0 8px 0 0; padding:5px; width:auto; font-size:1.3em; }
	#header ul#nav li.cleft { clear:none; }
	#header h2 { display:none; }
	.home #content .face { background-color:#fa0; }
	.home #content div { float:none; margin-right:0; width:100%; }
}

/* Mobile landscape */
@media screen and (max-width: 500px) {
	body { font-size: 70%; }
	#header { margin-bottom:1.5em; }
	#container { overflow:hidden; }
	.home #content h2, .home #content h3 { padding:5px; }
	.home #content h2 span { font-size:2em; }
	.home #content h3 { font-size:1.2em; }
}

/* Mobile vertical */
@media screen and (max-width: 330px) {
	#header h1 { font-size:1.5em; }
	.home #content .face { display:none; }
	.home #content { padding-left:0; }
}

/* easter egg goodies */
/*@media screen and (min-width: 1200px) and (max-width:1250px) and (min-height:600px) and (max-height:650px) { */	
@media screen and (min-width:1280px) {
	#sexophone { display:block !important; }
	/*.home #content { opacity:0.1; }*/
}