/*
	Name: Kyle Gracey Dot Com
	Date: June 2010
	Description: Kyle Gracey's Portfolio and Blog
	Version: 1.0
	Author: Kyle Gracey
	Author URI: http://kylegracey.com
*/

/* Imports */
@import url("reset.css");

/***** Global *****/
/* Body */
	body {
		background: #222;
		font-family: Georgia, "Book Antiqua", Palatino, "Times New Roman", Times, serif;
		color: #fff;
		font-size: 14px;
		line-height: 1.429;
		margin: 0;
		padding: 0;
		width: 100%
		text-align: left;
	}
	
.clear {

	clear:both;

}

/* Headings */
h1 {font-size: 40px; font-weight: bold; line-height: 1; text-shadow: 1px 1px 1px #000;}
h2 {font-size: 24px;}	
h3 {font-size: 22px; font-weight: bold;text-shadow: 1px 1px 1px #000;}
h4 {font-size: 20px;}
h5 {font-size: 16px;}
h6 {font-size: 12px;}

h2, h3, h4, h5, h6 {
	line-height: 1.1;
	margin-bottom: .8em;
}

/* Anchors */
a {
	
	outline: 0; 
	
}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
	color: rgb(0,168,255);
	padding: 0 1px;
	text-decoration: none;
	-webkit-transition: color 0.2s ease-in; /*safari and chrome */
	-o-transition: color 0.2s ease-in; /* opera */
}
a:hover, a:active {
	color: #d73242;
}

.blue{
	color: rgb(0,168,255);
	padding: 0 1px;
	text-decoration: none;
	-webkit-transition: color 0.2s ease-in; /*safari and chrome */
	-o-transition: color 0.2s ease-in; /* opera */
}
.blue:hover{
	color: #d73242;
}

/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}

strong, b {font-weight: bold;}
em, i {font-style: italic;}

::-moz-selection {background: #C74350; color: #fff;}
::selection {background: #C74350; color: #fff;}

/* Lists */
ul {
	list-style: none;
	margin: 0;
}

ol {
	list-style: outside decimal;
	margin: 0;
}

dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}

/* Quotes */
blockquote {font-style: italic;}
cite {}

q {}

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}

/* Internet Explorer */

#ie{display: none;}

/***** General Layout *****/

.body {clear: both; margin: 0 auto; width: 960px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: left; margin: 0 0 2em 2em;}
img.border{border: 1px; border-style: solid; border-color: #fff;}
.left{float: left;}
.right{float: right;}
.textcenter{text-align: center;}
.static {
	clear: both; 
	margin: 0 auto; 
	width: 100%; 
	position: fixed; 
	background: #222; 
	border-bottom: 1px;
	border-bottom-style: solid;
	border-bottom-color: #fff;
}
.static a{

	color:white;

}

.static a:hover, a:active {text-decoration:underline;}

/***** Navigation *****/

nav li{display: inline;}
nav img{vertical-align: middle;}
nav.left{float: left;}
nav.left li{margin-right: 40px;}
nav.right{float: right;}
nav.right li{margin-left: 40px;}


/***** Header *****/

#mainnav {padding: 60px 0 8px 0; z-index: 99;}

/***** Banner *****/

#banner {
	height: 200px;
	width: 100%; 
	padding-top: 205px;
	background-color: #000;
	border-bottom: 1px;
	border-bottom-style: solid;
	border-bottom-color: #fff;
}
#banner p{margin: 0; padding: 0;}
#banner h2{margin-bottom: 5px; padding-left: 10px;}
#banner h5{padding-left: 10px;}

#beheard {

	height: 200px;
	width: 100%;
	padding-top: 205px;
	background: url('../images/banners/beheard.jpg') center bottom no-repeat;
	background-color: #f5ddad;
	border-bottom: 1px;
	border-bottom-style: solid;
	border-bottom-color: #fff;
	color: #222;
	z-index: 50;

}

#beheard .contentbg {
	
	width: 600px;
	background: rgba(255,255,255,0.7);
	padding: 10px;
}

#beheard p{margin: 0; padding: 0;}
#beheard h2{margin-bottom: 5px; padding-left: 10px;}
#beheard h5{padding-left: 10px;}

#collaboration {

	height: 200px;
	width: 100%;
	padding-top: 205px;
	background: url('../images/banners/collaboration.jpg') center bottom no-repeat;
	background-color: #fff;
	border-bottom: 1px;
	border-bottom-style: solid;
	border-bottom-color: #fff;
	color: #222;
	z-index: 50;

}

#collaboration .contentbg {
	
	width: 600px;
	background: rgba(255,255,255,0.7);
	padding: 10px;
}

#collaboration p{margin: 0; padding: 0;}
#collaboration h2{margin-bottom: 5px; padding-left: 10px;}
#collaboration h5{padding-left: 10px;}

#area23 {

	height: 200px;
	width: 100%;
	padding-top: 205px;
	background: url('../images/banners/area23.jpg') center bottom no-repeat;
	background-color: #000;
	border-bottom: 1px;
	border-bottom-style: solid;
	border-bottom-color: #fff;
	color: #fff;
	z-index: 50;

}

#area23 .contentbg {
	
	width: 600px;
	background: rgba(34,34,34,0.7);
	padding: 10px;
}

#area23 p{margin: 0; padding: 0;}
#area23 h2{margin-bottom: 5px; padding-left: 10px;}
#area23 h5{padding-left: 10px;}

/***** Banner Rotator *****/
.jshowoff {
	width: 100%;
	}
	
.jshowoff-slidelinks a, .jshowoff-controls a {
	color: #fff;
	padding: 5px 7px 5px;
	margin: 5px 0 0 5px;
	outline: none;
	font-size: 11px;
	line-height: 14px;
	}

.jshowoff-controls {

	position: relative;
	z-index: 10;
	
	}

.controls-container {

	width: 40px;
	display: block;
	position: absolute;
	top: 200px;
	left: 50%;
	margin-left: 425px;
	text-align: left;
	z-index: 10;
}

#previousbutton {

	margin-bottom: 80px;
	z-index: 10;

}

/***** Featured Work *****/

#featured {padding-top: 30px; padding-bottom: 30px; border-bottom: 1px dotted #949494;}
#featuredheader {margin-bottom: 10px; text-align: right;}
#featured ul{width: 100%;}
#featured li{display: inline; width: 226px; float: left; margin-right: 18px;}
#featured li:last-child {margin-right: 0;}
#featured h3{margin: 0;}

/***** Content *****/

#content {
	display: block;
	padding-top: 40px;
	padding-bottom: 20px;
}

.entry img{

	height: 200px;
	width : auto;
	padding-left: 20px;

}

.comments{
	
	background: url(../images/comments.jpg) 0 100% no-repeat;
	width: 31px;
	text-align: center;
	font-size: 26px;
	float: left;
	margin-right: 10px;
	
}

.comments a{

	color: #222;

}

#postcontent{
	height: 580px;
	width: 500px;
	display: block;
	position: relative;
	float: left;
}

#postrotator {margin-bottom: 10px; margin-top: 15px;}

h6.date {margin-top: 8px;}

.white a{color: #fff;}

#featuredposts, #twitter{width: 340px; display: block; float: right;}
#featuredposts ul{margin-top: 20px;}
#featuredposts li{margin-bottom: 15px; padding-left: 15px; font-size: 12px;}
#featuredposts a{margin:0; font-size: 22px; font-weight: bold;}

#twitter{margin-top: 20px;}
#twitter ul{margin-top: 20px;}
#twitter li{margin-bottom: 20px; padding-left: 15px; font-size: 12px;}
#twitter .twitter-author{font-size: 14px; font-weight: bold;}


/***** Post Rotator *****/

.jpost {
	width: 560px;
	display: block;
	overflow: hidden;
	}
#postwrapper {
	height: 540px; 
	overflow: hidden;
	}
	
.jpost-slidelinks a, .jshowoff-controls a {
	color: #fff;
	padding: 5px 7px 5px;
	margin: 5px 0 0 5px;
	outline: none;
	font-size: 11px;
	line-height: 14px;
	}

.postcontrols-container {

	width: 560px;
	display: block;
}

#nextpost {

	float: right;

}

ul.featured {

	margin-left: 30px;

}

.featured {

	font-size: 12px;

}

.featured a{

	font-size: 20px;
	font-weight: bold;
	margin-left: -15px;

}

/***** Resume *****/

#resume{
	display: block;
	padding-top: 40px;
	padding-bottom: 40px;
	border-bottom: 1px dotted #949494;
}

#resume h3{margin:0;}

#quickresume{width: 590px; float: left;}

#quickresume p{

	margin-left: 30px;

}

#experience {width: 340px; display: block; float: right;}
#experience li{margin-top: 8px; padding-left: 15px;}


/***** Bottom Navigation *****/

#bottomnav {clear:both; background: #fff; color: #222;}
#bottomnav a{color: #000;}
nav.footer ul{margin-bottom: 15px;}
nav.footer li{display: inline;}
nav.footer img{vertical-align: middle;}
nav.footer{float: left; margin-top: 10px;}
nav.footer li{margin-right: 40px;}
#backtotop{margin-top: 10px;}
#toplight a{
	color: #fff;
	padding: 0 1px;
	text-decoration: none;
	-webkit-transition: color 0.2s ease-in; /*safari and chrome */
	-o-transition: color 0.2s ease-in; /* opera */
}
#toplight a:hover{
	color: #d73242;
}

#topdark a{
	color: #222;
	padding: 0 1px;
	text-decoration: none;
	-webkit-transition: color 0.2s ease-in; /*safari and chrome */
	-o-transition: color 0.2s ease-in; /* opera */
}
#topdark a:hover{
	color: #d73242;
}


#quote{
	margin-bottom: 15px;
	padding: 5px 20px 5px 20px;
	border-top: 1px; 
	border-top-style: solid; 
	border-top-color: #222; 
	border-bottom: 1px; 
	border-bottom-style: solid; 
	border-bottom-color: #222;
}
#quote h4{margin:0}
.centered{text-align: center; margin-bottom: 10px;}

#searchform {

	padding-bottom: 15px;

}

.searchwrapper {

	width: 446px;
	height: 35px;
	margin: 0 auto;
	background: #222;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;

}

.search_input {

	width: 352px;
	height: 30px;
	font-size: 17px;
	font-family: Georgia, "Book Antiqua", Palatino, "Times New Roman", Times, serif;
	vertical-align: middle;
	padding-left: 10px;
	margin-top: 2px;

}

.searchbutton {height: 31px; vertical-align: middle; margin-top: 2px}


/***** Footer *****/

#footer a{color:white; font-size: 12px;}
#footer li{line-height: 1.8;}
#favoriteprojects {margin-right: 60px;}
#sitesilike {margin-right: 70px;}
#peopleirespect {display: block; margin-right: 60px;}



/***** ------------------- Portfolio Page Specific ------------------- *****/


.pbody {clear: both; margin: 0 auto; width: 880px;}

.pobject1{width: 870px; background: rgba(0,0,0,0.7); padding: 3px; padding-top: 6px; text-align: center; margin-bottom: 2px; display: block; float: left;}

.pobject2{width: 431px; background: rgba(0,0,0,0.7); padding: 3px; padding-top: 6px; text-align: center; float: left; margin-right: 2px; margin-bottom: 2px;}

.pobject2last{width: 431px; background: rgba(0,0,0,0.7); padding: 3px; padding-top: 6px; text-align: center; float: left; margin-bottom: 2px;}

.pobject3{width: 285px; background: rgba(0,0,0,0.7); padding: 3px; padding-top: 6px; text-align: center; float: left; margin-right: 2px; margin-bottom: 2px;}

.pobject3last{width: 284px; background: rgba(0,0,0,0.7); padding: 3px; padding-top: 6px; text-align: center; float: left; margin-bottom: 2px;}

.title {float: left; display: block; margin-right: 15px;}

.description{display: block; }

#contentwrapper {

	padding-top: 94px;

}

#jumpto {

	background: url('../images/portfolionavbg.jpg') center repeat-x;
	border-bottom: 1px solid #fff;

}

#listwrapper{margin-bottom: 0; margin-top: 2px;}
.portfolionav li{float: left; height: 135px; margin-bottom: 2px;}
#jumptopic {padding-top: 10px;}

#area23section {

	background: url('../images/portfolio/area23/area23bg.jpg') top left;
	border-bottom: 1px solid white;
	padding: 50px;

}

#area23wrapper .pobject3, .pobject3last{margin-bottom: 10px;}

#sharpiesection {

	background: url('../images/portfolio/sharpie/bg.jpg') top left;
	border-bottom: 1px solid white;
	padding: 50px;
	color: #222;

}

#sharpiewrapper .pobject2{margin-bottom: 10px;}
#sharpiewrapper .pobject2last{margin-bottom: 10px;}

#collaborationsection {

	background: #fff;
	border-bottom: 1px solid white;
	padding: 50px;
	color: #222;

}

#collaborationwrapper .pobject2{margin-bottom: 10px;}
#collaborationwrapper .pobject2last{margin-bottom: 10px;}

#demosection {	background: #141414;
	padding: 50px;
	border-bottom: 1px solid white;
}

#demowrapper .pobject1{margin-bottom: 10px;}

#pandorasection {

	background: #fff;
	border-bottom: 1px solid white;
	padding: 50px;
	color: #222;

}

#pandorawrapper .pobject2{margin-bottom: 10px;}
#pandorawrapper .pobject2last{margin-bottom: 10px;}

#fluidsection {

	background: #222;
	border-bottom: 1px solid white;
	padding: 50px;

}

#fluidwrapper .pobject2{margin-bottom: 10px;}
#fluidwrapper .pobject2last{margin-bottom: 10px;}

#fedexsection {

	background: #fff;
	border-bottom: 1px solid white;
	padding: 50px;
	color: #222;

}

#fedexwrapper .pobject2{margin-bottom: 10px;}
#fedexwrapper .pobject2last{margin-bottom: 10px;}

#wondersection {

	background: #222;
	border-bottom: 1px solid white;
	padding: 50px;

}

#wonderwrapper .pobject2{margin-bottom: 10px;}
#wonderwrapper .pobject2last{margin-bottom: 10px;}

#oneoffssection {

	background: #fff;
	border-bottom: 1px solid white;
	padding: 50px;
	color: #222;

}

#oneoffswrapper .pobject2{margin-bottom: 10px;}
#oneoffswrapper .pobject2last{margin-bottom: 10px;}


#websection {	background: #222;
	padding: 50px;
	border-bottom: 1px solid white;
}

#webwrapper .pobject1{margin-bottom: 10px;}


/***** ------------------- Blog Specific ------------------- *****/

#contentheader{

	background: #000;
	border-bottom: 1px solid white;

}

#chcontent{

	padding-top: 50px;
	padding-bottom: 50px;

}

#chcontentp{

	padding-top: 50px;
	padding-bottom: 20px;

}

#chtitle{

	display: block;
	float: left;
	width: 385px;
	padding-left: 20px;

}

#chdescription {

	display: block;
	padding-top: 15px;

}

#abcontent{

	padding-top: 50px;
	padding-bottom: 30px;

}

#abtitle {

	display: block;
	float: left;
	width: 275px;
	padding-left: 20px;

}

#abdescription {

	display: block;
	padding-top: 5px;

}

#blogstream {

	width: 630px;
	background: #2b2b2b;
	float: left;
	display: block;
	padding: 20px;
	border-left: 1px dotted #949494;
	border-right: 1px dotted #949494;

}

#blogstream h1{

	margin-top: 25px;

}

#singlepost {

	width: 630px;
	background: #2b2b2b;
	float: left;
	display: block;
	padding: 20px;
	border-left: 1px dotted #949494;
	border-right: 1px dotted #949494;

}

#singlepost h1{
	
	margin-top: 10px;
	margin-bottom: 25px;

}

#singlepost ul{

	padding-left: 50px;
	list-style: circle;

}

#singlepost li{

	margin-bottom: 25px;

}

.entry {padding-left: 30px; padding-right: 30px; font-size: 16px;}

#sidebarwrapper {

	width: 260px;
	padding: 10px;
	float: right;

}

h2.widgettitle{

	text-decoration: underline;
	margin-top: 15px;
	margin-bottom: 5px;

}

h2.widgettitle a{

	color: #fff;

}

li.cat-item {

	margin-left: 10px;

}

ul.twitter li{

	margin-left: 10px;
	margin-bottom: 10px;

}

#archives-3 ul{

	margin-left: 10px;

}

.entry {

	margin-bottom: 20px;

}

ul.postnavigation li{

	margin-bottom: 25px;
	margin-left: 10px;

}

.postnavigationlink {

	margin-bottom: 4px;
	text-decoration: underline;

}

#commentswrapper {

	padding-top: 30px;

}

textarea#comment {
width: 600px;
}


/***** ------------------- About Page Specific ------------------- *****/

#statuswrapper {

	padding-top: 30px;
	padding-bottom: 30px;
	border-bottom: 1px dotted #949494;

}

#status {

	display: block;
	background:url('../images/statusbg.jpg') center no-repeat;
	width: 960px;
	height: 150px;
	color: #222;
	text-align: center;
	padding-top: 65px;

}

#status h1{letter-spacing: -2px;}

#aboutwrapper {

	padding-top: 30px;
	padding-bottom: 30px;
	border-bottom: 1px dotted #949494;

}

#aboutleftcolumn {

	width: 600px;
	display: block;
	float: left;
	font-size: 16px;
	padding-top: 25px;

}

#aboutleftcolumn h3{

	font-weight: normal;
	line-height: 1.8;
	padding-left: 15px;

}

.aboutdescription {

	padding-left: 30px;

}

#findme {

	padding-top: 40px;

}

#findmedetails {

	display: block;
	background: #2b2b2b;
	border: 1px dotted #949494;
	margin-left: 50px;
	margin-right: 50px;
	margin-top: 20px;
	padding: 15px;

}

#findmedetails ul{

	padding-bottom: 10px;

}

#aboutrightcolumn {

	float: right;
	width: 270px;
	background: #2b2b2b;
	border: 1px dotted #949494;
	padding: 30px;

}

#whatido li{

	line-height: 2.5;
	font-size: 12px;
	margin-left: 10px;
	padding-left: 5px;

}

li.workclass{

	padding-top: 30px;

}

ul.check{list-style-image: url('../images/check.jpg');}

#contactleftcolumn{

	display: block;
	float: left;
	width: 600px;

}

#contactrightcolumn{
	
	float: right;
	width: 360px;

}

#contactrightcolumn p{

	margin-left: 25px;

}

#contactme{

	padding-top: 30px;
	padding-bottom: 30px;

}

#contactform{

	background: #2b2b2b;
	border: 1px dotted #949494;
	width: 430px;
	margin-top: 15px;
	margin-left: 50px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 15px;

}

#lookingfor{


}

/***** ----- Clean Contact ----- *****/

.CleanContact { text-align: left; width: 30em; display: block; border:0; padding-top: 1em;}
.CleanContact input[type="text"] { width: 100%; margin-bottom: .5em; }
.CleanContact label { clear: none; display: inline; text-align: left; font-size: 20px;}
.CleanContact textarea{ width: 100%; height: 15em; margin-bottom: .5em; font-size: 1.2em}
.CleanContact label em { font-weight: bold; font-style: normal; color: red; }
.CleanContact_msg { font-weight: bold;  padding: 1em; -moz-border-radius: 5px; -webkit-border-radius: 5px;  }
.CleanContact_msg.ok{ background-color: #8dff87; border: solid 1px #e6f4d7; color: #000; margin: 2em 0 2em 0;}
.CleanContact_msg.err{ background-color: #ff9595; border: solid 1px #fff; color: #000;}


/***** ------------------- Shadow Box Settings ------------------- *****/


#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{color #fff}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url('../images/loading.gif') no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url('../images/close.png');}
#sb-nav-next{background-image:url('../images/next.png');}
#sb-nav-previous{background-image:url('../images/previous.png');}
#sb-nav-play{background-image:url('../images/play.png');}
#sb-nav-pause{background-image:url('../images/pause.png');}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}