/*   
Theme Name: ShawnHubbard.net
Theme URI: http://www.shawnhubbard.net
Description: blog and portfolio template for ShawnHubbard.net
Author: Shawn Hubbard
Author URI: http://www.shawnhubbard.net
Version: 1.0
.
.
*/

@import url(css/reset.css);

/*** UTILITY ***/

.float-left {float: left;}
.float-right {float: right;}
.clear {clear: both;}
.hidden {visibility: hidden;}

.rounded-corners {
    /*rounded corners*/
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/*** BASIC AND HTML STYLING ***/

body{
	background-color: #061623;
	margin: 0;
	padding: 0;
	font-size: 62.5%;
}

div {position:relative;}

code, legend, label, pre, abbr, acronym {color: #fff; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;}

p {
	font-family: Helvetica Neue, Arial, Helvetica, sans-serif;	
	font-size: 1.3em;
	text-align: left;
	color: #fff;
	line-height: 1.55em;
	letter-spacing: .1em;
	margin: 20px 0;
}

blockquote {
	width: 400px;
	height: auto;
	padding: 20px;
	margin: 20px 0 20px 40px;
	background: url(images/sidebar-box-bg.png) repeat;
	color: #fff;
	font-style: italic;
	
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

blockquote p {text-align: center;}

small {
	text-transform: uppercase;
	font-family: Helvetica Neue, Arial, Helvetica, sans-serif;	
	font-size: 1em;
}

	small.date {
		display: block;
		background: url(images/date-pointer.png) no-repeat;
		margin-top: 10px;
		margin-right: 10px;
		padding: 4px 0 4px 6px;
		width: 131px;
		height: 13px;
		float: left;
		color: #2f373d;
	}

em {
	font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	line-height: 1.5em;
	color: #ebebeb;
}

strong {
	font-family: Helvetica Neue, Arial, Helvetica, sans-serif;	
	font-size: 1.1em;
	line-height: 1.5em;
}

h1 {
	font-size: 3em;
	font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
	margin: 10px 0;
	color: #fff;
}

h2 {
	font-size: 2.6em;
	font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
	margin: 10px 0;
	color: #fff;
}
	
	#welcome > h2 {color: #f5d793;	font-size: 5em;}
	
h3 { /* This is used for the Cufon transformed section headings as well as the specified colors below */
	font-size: 2.3em;
	font-family: Helvetica Neue, Arial, Helvetica, sans-serif;	
	margin: 10px 0;
	color: #fff;
}
	#blog-activity h3 {color: #f5d793; margin: 0;}
	#blog-activity h3 a {color: #f5d793; text-decoration: none; border: none;}
	#blog-activity h3 a:link, a:visited, a:hover {color: #f5d793; text-decoration: none; border: none;}
	#share-tags h3 {color: #f5d793; margin: 0;}
	#sidebar h3 {color: #f5d793;}

h4 {
	color: #fff;
	font-size: 1.6em;
	font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
	margin: 10px 0;
}

h5 {
	color: #fff;
	font-size: 1.4em;
	font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
	margin: 10px 0;
}

h6 {
	color: #fff;	
	font-size: 1.2em;
	font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
	margin: 10px 0;
}

a {
	color: #f5d793;
	font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
	text-decoration: none;
}

a:link {
	color: #f5d793;
	text-decoration: none;
	border-bottom: 1px dotted #f5d793;
}

a:hover {
	color: #ffffcc;
	text-decoration: none;
	border-bottom: 1px dotted #ffffcc;
}

a:visited {
	color: #f5d793;
	text-decoration: none;
	border-bottom: 1px dotted #f5d793;
}

form {
	width: auto;
	height: auto;
	margin: 5px;
	padding: 0px;

		/*rounded corners*/
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

	form.search {
		width: 100%;
		margin: 5px 0 10px 0;
	}

input {
	width: auto;
	margin: 5px;
	padding: 4px 4px 4px 6px;
	color: #333;
	border: none;
	outline: none;
}

	input.submit {
		width: 104px;
		background: url(images/button-bg.jpg) bottom repeat-x #315e8b;
		height: 25px;
		margin: 5px 0 10px 5px;
		color: #f5d793;
		border: none;
	}	
	
		input.submit:hover {background: #315d8a; color: #dddddd;}
	
	input.search {
		background: url(images/text-input-bg.jpg) bottom repeat-x #ebebeb;
		width: 155px;
		height: 17px;
		margin: 5px 0 10px 10px;
		float: left;
		clear: both;
		border: none;
		outline: none;
	}
	
		input.search:hover {background: #ebebeb;}
	
	input.text {
		background: url(images/text-input-bg.jpg) bottom repeat-x #ebebeb;
		width: 200px;
		height: 17px;
		float: left;
		clear: both;
		border: none;
		outline: none;
	}
	
		input.text:hover {background: #ebebeb;}

textarea {
	width: 100%;
	height: 7em;
	margin: 5px;
	padding: 6px;
	background: url(images/text-input-bg.jpg) bottom repeat-x #ebebeb;
	color: #333;
	border: none;
}

	textarea:hover {background: #ebebeb;}

label, legend {
	color: #fff; 
	font-size: 1.3em; 
	font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
	text-align: left;
}

label.search {display: none;}

ol {
	margin: 20px 0 20px 60px;
}

ol li {
	display: list-item;
	list-style-type: decimal;
	font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
	color: #fff; 
	margin: 5px 0;
}

ul {
	height: 100%;
	margin: 20px 0 20px 60px;
}

ul li {
	display: list-item;
	list-style-type: circle;
	font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
	color: #fff; 
	margin: 5px 0;
}

img {margin: 10px;}

/*** LAYOUT AND BOX-SPECIFIC TEXT STYLES ***/

.content-wrap{
	width: 880px;
	margin: 0 auto;
	padding:0 10px;
	height: 1%;
	overflow: hidden;
} 

#header{
	background: url(images/top.jpg) top center no-repeat;
	height: auto !important; 
	height: 100%;
	min-height: 142px;
	margin: 0 auto;
}

	#header h1#logo {
	    background: url(images/signature-logo.png) no-repeat;
	    width: 237px;
	    height: 134px;
	    text-indent: -9999px;
	    float: left;
	    position: relative;
	    top: 10px;
	    left:0; /*needed for IE compatibility */
	    margin: 0;
	}
	
	#header h1#logo a {display: block; width: 100%; height: 100%;}
	
	ul#nav {
		width: 472px;
		height: 42px;
		float: right;
		position: relative;
		top: 70px;
	    list-style: none;
	}
	
	ul#nav li {
		float: left;
	   	display: inline;
	   	list-style-type: none;
	    margin: 0 0 0 10px;
	}
	
	ul#nav li a {
	    display: block;
	    text-decoration: none;
	    border: none;
	    height: 100%;
	}
	
	ul#nav li a#about-me {
	    height: 42px;
	    width:114px;
	    background:url(images/nav-sprite.png) -0px -0px no-repeat;
	    text-indent: -9999px;
	}
	
	ul#nav li a#blog {
	    height: 42px;
	    width:80px;
	    background:url(images/nav-sprite.png) -128px -0px no-repeat;		
	    text-indent: -9999px;
	}
	
	ul#nav li a#portfolio {
	    height: 42px;
	    width: 103px;
	    background:url(images/nav-sprite.png) -223px -0px no-repeat;	
	    text-indent: -9999px;
	}
	
	ul#nav li a#contact-me {
	    height: 42px;
	    width:135px;
	    background:url(images/nav-sprite.png) -336px -0px no-repeat;
	    text-indent: -9999px;
	}

#feature {
	background: url(images/feature.jpg) top center no-repeat;
	min-height: 359px;
	height: auto !important; 
	height: 100%;
}

	#welcome {
		width: 357px;
		top: 30px;
		float: left;
	}
		
		#welcome > span {
		    font-size: 1.9em;
			font-family: Helvetica Neue, Arial, Helvetica, sans-serif;	    
			color: #fff;
		    font-weight: normal;
		    line-height: .8em;
		    text-align: justify;
		}
		
	#feature ul {
	    margin: 0;
	    padding: 0;
	}
		
		#feature ul li {
		    float: left;
		    display: inline;
		    list-style: none;
		    margin: 18px 10px 0px 0px;
		}
		
		#feature ul li#learn-more a {
		    background: url(images/learn-more.png) no-repeat;
		    display: block;
		    width:142px;
		    height:41px;
		    text-indent: -9999px;
		    text-decoration: none;
		    border: none;
		}
		
		#feature ul li#welcome-contact-me a {
		    background: url(images/contact-me.png) no-repeat;
		    display: block;
		    width:140px;
		    height:42px;
		    text-indent: -9999px;
		    text-decoration: none;
		    border: none;
		}
		
	#image-rotator {
    	background: url(images/image-rotator-bg.png) no-repeat;
    	width: 455px;
    	height: 289px;
    	float: right;
    	top: 10px;
    	padding: 27px 27px 26px 32px;
	}

#blog-post {
	background: url(images/content-bg-tile.jpg) top center repeat-y;
	min-height: 359px;
	height: auto !important; 
	height: 100%;
}
	
	#the-content {
		width: 526px;
		min-height: 359px;
		height: auto !important;
		height: 100%;
		top: 20px;
		margin-bottom: 40px;
		float: left;
		clear: both;
	}
	
	.post {
		float: left; 
		clear: both; 
		width: 526px; 
		height: auto; 
		margin-bottom: 10px;
	}
	
	#sidebar {
		width: 324px;
		min-height: 350px;
		height: auto !important;
		height: 100%;
		top: 30px;
		float: right;
		color: #fff;
		margin: 0 0 40px 0;
	}
	
		.sidebarBox {
			background: url(images/sidebar-box-bg.png);
			margin: 0 5px;
		}
		
		#sidebar ul {
			margin: 0;
			padding: 10px;
			list-style: none;
		}
		
		#sidebar ul li {
			height: auto;
			width: 100%;
			margin: 0 0 20px 0;
			list-style: none;
			display: block;
		}

		#sidebar h3 {
			margin: 5px 0 10px 10px;
		}

#blog-activity {
	background: url(images/recent-post.jpg) no-repeat top center;
	min-height: 308px;
	height: auto !important; 
	height: 100%;
}

	#blog-activity h3 a {text-decoration: none; border: none; width: auto;}
	#blog-activity h3 a img {float: right; margin: 5px 0 0 5px;}

	#latest-blog-post {
		width:477px;
		height:284px;
		float: left;
		margin-right: 10px;
	}
		#latest-blog-post a {color: #fff; border-bottom: 1px dotted #fff;}
		#latest-blog-post a:link {color: #fff; border-bottom: 1px dotted #fff;}
		#latest-blog-post > h4 {margin: 10px 0px 2px 0px;}
		#latest-blog-post > p {margin: 10px 0;}
		
		#latest-blog-post .post-meta-info {
			width:auto;
			height: 32px;
			background: url(images/recent-posts-li-bg.png);
			margin: 10px 0;
			padding: 0 8px;
			line-height: 32px;
			
			/*rounded corners*/
			-moz-border-radius: 8px;
			-webkit-border-radius: 8px;
			border-radius: 8px;
		}

		#latest-blog-post .post-meta-info > span > p {line-height: 32px; margin: 0;}

	#recent-posts {
		width: 384px;
		height: 284px;
		float:right;
	}
				
		ul#recent-posts-list {
			margin: 0;
			list-style: none;
			width: auto;
			height: auto;
		}
			
			ul#recent-posts-list li {
				width: 100%;
				height: 32px;
				list-style-type: none;
				display: block;
				background: url(images/recent-posts-li-bg.png);
				margin: 10px 0 0 0;
				
				/*rounded corners*/
				-moz-border-radius: 8px;
				-webkit-border-radius: 8px;
				border-radius: 8px;
			}
			
			ul#recent-posts-list li a {
				display: block;
				color: #fff;
				line-height: 32px;
				margin-left: 8px;
				text-decoration: none;
				border: none;
			}
			
			ul#recent-posts-list li a:link {color: #fff; text-decoration: none;}
			ul#recent-posts-list li a:hover {color: #ebebeb; text-decoration: none;}
			
#share-tags {
	background: url(images/share-tags-bg.jpg) no-repeat top center;
	min-height: 128px;
	height: auto !important;
	height: 100%;
}

	#share {
		width:506px;
		min-height:128px;
		float: left;
		margin-right: 10px;
	}
		
		ul.share-links{
			margin: 0;
			width: auto;
			height: 60px;
			position: relative;
			top: 5px;
			background: url(images/sidebar-box-bg.png) repeat;
		}
		
		ul.share-links li{
			list-style: none;
			float: left;
			margin: 20px 24px;
		}
		
		
	#tags {
		width: 324px;
		min-height: 128px;
		float: right;
	}
	
		.tag-cloud{
			width: 304px;
			height: auto;
			position: relative;
			top: 5px;
			background: url(images/sidebar-box-bg.png) repeat;
			padding: 10px;
		}

#comments {}
		
#footer {
	background: url(images/footer-bg.jpg) no-repeat top center;
	min-height: 327px;
	margin: 0 auto;
	top: 0px;
}
	
	#footer ul {
		padding: 0;
		margin: 0 auto;
		list-style: none;
	}
	
	#footer ul li {
		float: left;
		display: inline;
		list-style: none;
	}
	
	#footer .twitter {
		width: 260px;
		height: 139px;
		margin-top: 15px;
		margin-right: 46px;
		padding: 18px 60px;
		text-align: center;
		background: url(images/twitter-bg.png) no-repeat;
	}
	
		#footer .twitter em {
			font-size: 1.4em;
			color: #ebebeb;
		}
	
	#footer .social {
		width:197px;
		height:auto;
		margin-top: 15px;
		margin-right: 46px;
		padding: 10px;
		background: url(images/footer-box-bg.png);
	}
	
	#footer .about-this-site {
		width:168px;
		height:auto;
		margin-top: 15px;
		padding: 10px;
		background: url(images/footer-box-bg.png);
	}