/*   
Theme Name: Sagan
Theme URI: http://www.thenotesofwoe.com
Description: Space theme for use with my portfolio.
Author: Chris Monaccio
Author URI: http://www.chrismonaccio.com
Version: 3.0
*/

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.8.0r4
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{font-size:100%;}

/* =Typography
  ---------------------------------------------------------------------- */

body{
	font-size:75%;
	font-family:"Verdana", sans-serif;
}

html>body{
	font-size:12px;
}

div{
	line-height:1.5em;
}

h1{
	font-size:2em;
	line-height:1.5em;
	vertical-align:text-bottom;
}

h2{
	font-size:1.333em;
	line-height:1.125em;
}

h3{
	font-family:"Nuetra Text", "Century Gothic", sans-serif;
	font-size:2em;
	line-height:1.286em;
}

h4{
	font-size:1em;
	line-height:1.5em;
	margin-top:1.5em;
	margin-bottom:1.5em;
}

h5{
	font-size:0.833em;
	line-height:1.8em;
	margin-top:1.8em;
	margin-bottom:1.8em;
}

h6{
	font-size:0.666em;
	line-height:2.25em;
	margin-top:2.25em;
	margin-bottom:2.25em;
}

p{
	font-size:0.8em;
	line-height:1.5em;
	margin-top:1.5em;
	margin-bottom:1.5em;
}

em{
	font-style:italic;
}

strong{
	font-weight:bold;
}

li{
	line-height:1.5em;
}

/* =Layout
  ---------------------------------------------------------------------- */
  
html{
	background: url(images/starry-bg.jpg) repeat fixed top left;
	color:white;
	height:100%
}

body{
	padding-bottom:200px;
}

.group:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.left {
	float:left;
}

.right {
	float:right;
}

#masthead{
	position:fixed;
	left:50%;
	color:white;
	width:960px;
	height:160px;
	padding-top:15px;
	margin-left:-480px;
	z-index:90;
	background:url(images/nebula-overlay.png) no-repeat center 0px;
}

#title{
	background: url(images/chris-monaccio-header.png) no-repeat center;
	text-indent:-9999px;
	margin:0 auto;
	height:52px;
	width:829px;
}

/* =Navigation
  ---------------------------------------------------------------------- */

.navBtns{
	position:relative;
	width:468px;
	height:31px;
	margin:1em auto;
}

.navBtns a * {
	display:none;
}

.navBtns a {
	height:31px;
	position:relative;
	display:block;
	cursor:pointer;
}

.navBtns a.portfolioBtn{
	background:url(images/portfolio-btn.png) no-repeat 0px 0px;
	width:215px;
	margin-right:75px;
	opacity:0.3;
	-moz-transition:opacity .25s linear;
	-webkit-transition:opacity .25s linear;
	-o-transition:opacity .25s linear;
	transition:opacity .25s linear;
}

.navBtns a.aboutBtn{
	background:url(images/about-btn.png) no-repeat 0px 0px;
	width:128px;
	opacity:0.3;
	-moz-transition:opacity .25s linear;
	-webkit-transition:opacity .25s linear;
	-o-transition:opacity .25s linear;
	transition:opacity .25s linear;
}

.navBtns a.aboutBtn:hover, .navBtns a.portfolioBtn:hover{
	opacity: 1.0;
	-moz-transition:opacity .25s linear;;
	-webkit-transition:opacity .25s linear;
	-o-transition:opacity .25s linear;
	transition:opacity .25s linear;
}

.navBtns a.activeBtn{
	opacity: 1.0;
}

/* =Nebula Background
  ---------------------------------------------------------------------- */

#nebula{
	background:url(images/nebula-large.jpg) no-repeat center 0px;
	position:fixed;
	width:100%;
	height:1080px;
}

/* =Content
  ---------------------------------------------------------------------- */

#content{
	position:relative;
	width:960px;
	height:100%;
	padding-top:152px;
	margin:0 auto;
	z-index:80;
}

/* =Section Headers
  ---------------------------------------------------------------------- */

h2{
	text-indent:-9999px;
	text-align:center;
	width:100%;
	height:60px;
	margin:0 auto 10px;
}

#portfolio, #about{
	position:relative;
}

#aboutTitle{
	background:url(images/section-titles_thin.png) no-repeat center -63px;
}

.section {
	position:relative;
	width:860px;
	margin:0 auto 25px;
}

/* =Project Slideshow
  ---------------------------------------------------------------------- */

.projShowcase{
	position:relative;
}

.projShowcase a{
	outline:none;
}

.projSlides, .projOneSlide, .projNoSlides{
	background-color: black;
	border:1px solid #4b4b4b;
	position:relative;
	overflow:hidden;
	width:858px;
	height:480px;
}

.projSlides{
	cursor:pointer;
}

.projSlides .slides{
	position:absolute;
	width:2000em;
	height:480px;
}

.projOneSlide .slides, .projNoSlides .slides{
	position:absolute;
	width:858px;
	height:480px;
}

.projNoSlides .slides p{
	color:rgba(256, 256, 256, 0.6);
	text-align:center;
	padding:90px 110px;
	font-size:4em;
}

/* =Slideshow Navigation
  ---------------------------------------------------------------------- */

.slideNav{
	position:relative;
	float:left;
	overflow:hidden;
	width:858px;
	height:20px;
	top:453px;
	left:1px;
	padding-top:10px;
	margin-bottom:-28px;
	z-index:85;
	background:none;
	background:rgba(0, 0, 0, 0.3);
}

.slideNav div.aContainer{
	position:relative;
	float:left;
	left:50%;
	height:18px;
	text-align:center;
}

.slideNav div.aContainer a{
	position:relative;
	display:block;
	float:left;
	width:19px;
	height:18px;
	right:50%;
	background:url(images/pager.png) no-repeat -20px 0;
	opacity:0.5;
	outline:none;
	cursor:pointer;
}

.slideNav div.aContainer a:hover{
	opacity:1.0;
}

.slideNav div.aContainer a.active{
	background-position:0 0;
	opacity:1.0;
	outline:none;
}

/* =Project Description/Meta
  ---------------------------------------------------------------------- */

.description{
	width:858px;
	border:1px solid #4B4B4B;
	border-top:none;
	background:rgba(0, 0, 0, 0.7) repeat-y left top;
}

.subject{
	width:178px;
	text-align:right;
	padding:20px 26px 20px 14px;
}

.subject *{
	margin:8px 0;
}

.subject h3{
	margin:0 0 12px;
	padding-right:0px;
}

.subject h3 span{
	padding:2px 4px;
	background:rgba(0, 0, 0, 0.6);
}

.subject p{
	color:#b7b7b7;
	font-size:1.2em;
}

.details{
	position:relative;
	width:587px;
	padding:0 26px;
	margin:20px 0;
	border-left:1px solid #4b4b4b;
}

.postContent{
	position:relative;
	color:#b7b7b7;
	font-size:1.2em;
	text-shadow: -1px 1px 0 #000;
}

.postContent p{
	margin:0;
	margin-bottom:10px;
}

.postContent p:last-child{
	margin-bottom:0;
}

.postContent a:link, .postContent a:visited{
	color:#B7B7B7;
	border-bottom:1px dotted;
	text-decoration:none;
}

.postContent a:hover{
	border-bottom:0;
}

.postContent a:focus{
	outline:none;
}

.postContent a.contentLink{
	display:inline-block;
	position:relative;	
	padding:3px 9px 3px 11px;
	margin:18px 0 0;
	border:0;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	-o-border-radius:20px;
	border-radius:20px;
	outline:none;
	background:white;
	color:#7d7d7d;
	font-weight:bold;
	font-size:11px;
	line-height:18px;
	text-decoration:none;
	opacity:0.5;
	-moz-transition:opacity .25s linear, margin-left .25s linear;
	-webkit-transition:opacity .25s linear, margin-left .25s linear;
	-o-transition:opacity .25s linear, margin-left .25s linear;
	transition:opacity .25s linear, margin-left .25s linear;
}

a.contentLink span{
	text-shadow:none;
}

a.contentLink span.linkArrow{
	position:relative;
	text-indent:-9999px;
	background:url(images/linkArrow.gif) no-repeat 0 -11px;	
	border-bottom:none;	
	width:15px;
	height:11px;
	top:4px;
	margin-left:10px;
}

a.contentLink:hover{
	opacity:1;
	margin-left:2px;
	-moz-transition:opacity .025s linear, margin-left .025s linear;
	-webkit-transition:opacity .025s linear, margin-left .025s linear;
	-o-transition:opacity .025s linear, margin-left .25s linear;
	transition:opacity .025s linear, margin-left .025s linear;
}

a.contentLink:hover span{
	color:black;
	border-bottom:none;
}

a.contentLink:hover span.linkArrow{
	background-position:0 0;
}

/* =About Section
  ---------------------------------------------------------------------- */

#about .description{
	background:url(images/col-bg.jpg) repeat-y 0 0;
	border-top:1px solid #4b4b4b;
}
  
#about .subject #contactDetails h4{
	font-size:1.25em;
}
  
#about .subject #contactDetails ul li a{
	color:#b7b7b7;
	text-decoration:none;
	border-bottom:1px dotted #999;
}

#about .subject #contactDetails ul li a:hover{
	color:white;
	border-bottom:none;
} 
  
#about .subject img{
	border:1px solid #4b4b4b;
	padding:0px;
}

#about .details{
	padding: 20px 26px;
	margin:0;
	border:none;
	background:black url(images/about-bg.jpg) no-repeat left top;
}

#about .postContent{
	margin-bottom:142px;
	width:400px;
}

#about .postContent a.contentLink{
	line-height:17px;
	padding-bottom:4px;
	opacity: 1.0;
	color:#7D7D7D;
	border-bottom:0;
}

#eeryPlanet{
	position:absolute;
	background:url(images/about-planet.png) no-repeat left top;
	width:640px;
	height:122px;
	bottom:1px;
	left:219px;
	z-index:50;	
}