@charset "UTF-8";
/*-------------------------------------------------------
CSS for Joshua Holland's Personal Website - jbhdesign.com
---------------------------------------------------------*/

*{ margin:0; padding:0; }

::selection{background:rgba(1, 176, 240, 0.4);}
::-moz-selection{background:rgba(1, 176, 240, 0.4);}
::-webkit-selection{background:rgba(1, 176, 240, 0.4);}

html, body{ background:#eee; font-family:lucida, arial, sans-serif; }

h1 		{ width:205px; height:95px; overflow:hidden; } /* used for page titles */
h2 		{ font:bold 11px/3em 'Lucida Grande'; color:#444; letter-spacing:0.1em; text-align:left; } /* used for footer */
h3 		{ font-size:9px; letter-spacing:0.2em; font-weight:normal; padding-top:2px; } /* used for colophon */
a  		{ text-decoration:none; color:#999; }
a:hover 	{ text-decoration:underline; }
.floatright	{ float:right; }
.floatleft 	{ float:left; }
.clearboth	{ clear:both; }

#wrapper{
	width:1020px;
	margin:0 auto;
	background:#fff;
	box-shadow: 0 0 25px rgba(200,200,200,0.7);
	-webkit-box-shadow: 0 0 25px rgba(200,200,200,0.7);
	-moz-box-shadow: 0 0 25px rgba(200,200,200,0.7);
}

#headerWrap{
        background:url('images/header_bg.jpg') no-repeat;
        width:1000px;
	height:90px;
	margin:0 auto 20px auto;
}

#logo{
	float:left;
	background:url('images/jh_logo.png') no-repeat;
	width:47px;
	height:90px;
        overflow:hidden;
        margin-left:110px;
}

#logo a img{
	border:none;
}

#pageTitle{
	position:absolute;
	z-index:10;
	margin:50px 0 0 207px;
}


/*------------START LAVALAMP NAVTOP------------*/
#navTopWrap 		{ float:right; margin:25px 120px auto auto; }

ul#navTop 		{ width:400px; height:40px; position:relative; list-style:none; padding:0 10px; overflow:auto; }
ul#navTop li		{ font:10px/1.8em 'Cantarell'; list-style:none; float:left; letter-spacing:0.3em; }
ul#navTop li span	{ position: relative; z-index: 5; }
ul#navTop li.backLava 	{ position:absolute; z-index:3; border-top:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; }
ul#navTop li a 		{ position:relative; z-index:5; display:block; outline:none; padding:9px 5px 9px 10px; color:#333; text-decoration:none; }
ul#navTop li a.babyBlue	{ color:#01B0F0; }
/*------------END LAVALAMP NAVTOP------------*/


#midWrap { float:left; } /*contains nav2 and mainContent*/


/*------------START LAVALAMP NAVLEFT------------*/
#navLeftWrap		{ float:left; }

ul#navLeft 		{ position:relative; outline:none; width:100px; list-style:none; margin:0; padding:10px; overflow:auto; }
ul#navLeft li		{ font:10px 'Cantarell'; list-style:none; margin:3px 5px; padding:0; float:left; letter-spacing:0.3em; }
ul#navLeft li span 	{ position: relative; z-index: 5; }
ul#navLeft li.backLava 	{ position:absolute; z-index:3; border-left:1px solid #e1e1e1; }
ul#navLeft li a 	{ display:block; padding:4px 12px 5px 10px; position:relative; z-index:5; color:#333; text-decoration:none; margin: auto 0; }
ul#navLeft li a.babyBlue{ color:#01B0F0; }
/*------------END LAVALAMP NAVLEFT------------*/


#contentWrap{ width:900px; float:left; }

#aboutBg{
	background-image:url('images/about_bg.png');
	width:460px;
	height:292px;
	float:left;
	margin:70px 0 0 47px;
}

.about{
	padding-top:33px;
	width:400px;
	height:123px;
	float:left;
	font:13px/1.8em 'Lucida Grande';
	letter-spacing:0.015em;
}

#demo{
	width:250px;
	float:left;
	margin-left:20px;
}

#demo a img{
	border:none;
}

.thanks{
	margin:100px 0;
	color:#333;
	letter-spacing:0.009em;
	text-align:center;
}


/*------------START RESUME------------*/
#resWrap	{ width:800px; margin:25px 0 0 47px; line-height:17px; }
#resWrap li 	{ font-size: 12px; margin-left:25px; list-style-type:square; }
#resWrap h4 	{ font:bold 14px 'Lucida Grande'; }
#resWrap h4 span{ color:#666; font:lighter 13px sans-serif; }

dt			{ border-right:1px solid #aaa; width:160px; float:left; padding-right:15px; font:15px 'Lucida Grande'; text-align:right; letter-spacing:0.05em; }
dd			{ width:540px; float:left; padding-left:15px; text-align:left; font-size:14px; letter-spacing:0.035em; }
dt span, dt span a	{ color:#666; font:lighter 13px sans-serif; }
dd.space		{ width:100%; clear:both; float: none; margin:0; height:15px; }
dd.clear 		{ width:100%; clear:both; float:none; margin:0; }
.col1, .col2, .col3	{ letter-spacing:0.035em; float:left; font-size:14px; }
.col1			{ width:170px; padding-left:15px; text-align:left; }
.col2			{ width:400px; font-size:12px; padding-left:15px; text-align:left; }
.col3			{ width:700px; text-align:right; }
.col3 a			{ color:#666; }
/*------------END RESUME------------*/


/*------------START CONTACT FORM------------*/
.cleanform{ margin:30px 0 0 47px; }

/* form elements */
.cleanform fieldset 					{ border:none;}
.cleanform label 					{ color:#777; font:14px 'Lucida Grande'; }
.cleanform fieldset input, .cleanform fieldset textarea { width:400px; padding:0.5em; font:14px 'Lucida Grande'; }
.cleanform input, .cleanform textarea, .cleanform select{ display:block; border:1px solid #e1e1e1; padding:0.15em; margin:3px 1em 1em 0; }

/* form button */
button::-moz-focus-inner{ border: 0; }
.cleanform button 	{ border:1px solid #e1e1e1; background-color:#eee; cursor:pointer; padding:0.5em; color:#444; font:14px 'Lucida Grande'; }
.cleanform button:hover	{ background-color:#fff; border:1px solid #e1e1e1; }

/* form info */
.cleanform .formInfo { margin-bottom:1em; padding-bottom:0.5em; border-bottom:0.1em solid #ddd }
/*------------END CONTACT FORM------------*/


/*------------START FOOTER LINKS------------*/
#footerBlock		{ width:900px; height:50px; margin-left:73px; background:url('images/footer_top.png') no-repeat; clear:both; }
#footer			{ width:947px; height:150px; padding-left:73px; background:url('images/footer_bg.jpg') repeat-x; }

ul#footerLinks			{ width:105px; padding:10px 0 0 63px; float:left; }
ul#footerLinks li		{ text-align:left; list-style:none; }
ul#footerLinks li a		{ font-size:9px; letter-spacing:0.3em; color:#444; text-decoration:none; }
ul#footerLinks li a:hover	{ color:#01B0F0; }
ul#footerLinks li a:active	{ border-top:1px solid #777; border-bottom:1px solid #777; }
/*------------END FOOTER LINKS------------*/


#colophon{
	background:url('images/colophon_bg.png') no-repeat;
	position:fixed;
	bottom:0;
	width:900px;
	height:16px;
	margin-left:73px;
	text-align:center;
}