/*
Theme Name: dnnsldr grunge portfolio
Author: dnnsldr
Author URI: http://denniselder.tumblr.com
Version: 1.0.02
*/
/*global resets*/
* {margin:0; padding:0}
ol, ul{list-style:none}
blockquote:before, blockquote:after, q:before, q:after{content:""}
blockquote, q{quotes:"" ""}
strong { font-weight: 700 }
em { font-style: italic }
* a { position:relative } /* Gets links displaying over a PNG background */
a { outline:none } /* Gets rid of Firefox's dotted borders */
a img { border:none } /* Gets rid of IE's blue borders */
img {border:none}
a {text-decoration: none; color: #52dfd2;}
a:hover {color: #c4fff9;}
.clear { clear: both; }
.left {	float: left; }
.right { float: right; }

html{
overflow:-moz-scrollbars-vertical;
overflow-y: scroll;
} 

body {
	color: #c6d3c2;
	font-family: "Lucida Grande", Helvetica, garamond, verdana, arial, sans-serif;
	background: url(images/blackwood.jpg) repeat;
	font-size: 14px;
}
body#lightbox-page {
	background: url(images/lightboxpage.jpg) repeat;
	width: 960px;
	border: none;
}
#lightbox-page .pagewrap {
	width: 900px;
	margin: 0 auto;
	padding-bottom: 30px;
}
#lightbox-page p.intro  {
	padding: 30px 10px 15px 0;
}
#lightbox-page .pagewrap  h2{
	padding: 10px 0 10px 0;
}
#lightbox-page .pagewrap li {
	padding-bottom: 5px;
}
#wrapper {
	width: 960px;
	/*height: 629px;*/
	margin: 0 auto;
	/*background: url(images/blackwood.jpg) repeat-y;*/
	border: none;
}
#innerwrapper {
	padding: 0 60px 0 60px;
}

#header {
	height: 170px;
}

#logo {
	background: url(images/logo.png) no-repeat;
	top: 55px;
	height: 41px;
	width: 374px;
	position: relative;
}

.face {
	background: url(images/face.png) no-repeat;
	margin-top: -41px;
	margin-left: 560px;
	height: 133px;
	width:184px;
	position: absolute;
	z-index: 1;
	float: left
}
/************logo vowel and start project sprite**********/
#projectstart {
	height: 82px;
	width: 233px;
	position: relative;
	z-index: 5;
	left: 325px;
	margin-top: -15px;
}
ul.logoarrow { background:url(images/vowels-sprite.png) }
ul.logoarrow li { float:left; list-style-type:none }
ul.logoarrow li a { height:41px; display:block; position:absolute; top:0; text-indent:-9999px; outline:none }

li.logoarrowVowel a { background:url(images/vowels-sprite.png) }

.logoarrowVowel a 			{ background-position:0 0; width:233px; left:0 }
.logoarrowVowel a:hover 		{ background-position:0 -41px }
/*******************end of vowel and start project**********/

/*Main Navigation
 ******top 
 * initial state: 0
 * rollover: 54
 *****left
 *home: 0
 *about: 80
 *contact: 165
 *myworks: 280
 *blog: 395
 *****width
 *entire navbar: 470
 *home: 80
 *about: 85
 *contact: 115
 *myworks: 115
 *blog: 75
*/
#navbar {
	position: relative;
	height: 108px;
	width: 470px;
	margin-left: -20px;
}
/*ul#nav { background:url(images/navbar-sprite.png) }*/
ul#nav li { float:left; list-style-type:none }
ul#nav li a { height:54px; display:block; position:absolute; top:0; text-indent:-9999px; outline:none }

li a.navHome , li a.navAbout , li a.navContact , li a.navPortfolio , li a.navBlog  { background:url(images/navbar-sprite.png) }

li a.navHome  			{ background-position:0 0; width:80px; left:0 }
li a.navHome:hover 		{ background-position:0 -54px }

li a.navAbout			{ background-position:-80px 0; width:85px; left:80px }
li a.navAbout:hover		{ background-position:-80px -54px }

li a.navContact 		{ background-position:-165px 0; width:115px; left:165px }
li a.navContact:hover	{ background-position:-165px -54px }

li a.navPortfolio 		{ background-position:-280px 0; width:115px; left:280px }
li a.navPortfolio:hover	{ background-position:-280px -54px }

li a.navBlog 		{ background-position:-395px 0; width:75px; left:395px }
li a.navBlog:hover	{ background-position:-395px -54px }

#main {
	width: 840px;
}

#content {
	position: relative;
	float: left;
	width: 638px;
}
.contentboxtop, .contentboxbottom {
	float:left;
	width:638px;
	height:21px;
	background:transparent url(images/big-box-bottom2.png) no-repeat; 
	}

.contentboxtop {
	background:transparent url(images/big-box-top2.png) no-repeat;
}

.contentbox {
	float:left;
	background:transparent url(images/big-box-middle2.png) repeat-y;
	width: 638px;
}

.info {
	padding: 0 30px 20px 27px;
}
.info-myworks {
	padding: 0 20px 10px 20px;
}
.info p{ padding: 10px 0 10px 0;}
.featured {
	padding-right: 20px;
}

.recentscreenshot {
	width: 235px;
	float: left;
	padding: 0 0 5px 54px;
	margin-top: -20px;
}
.screenshot {
	width: 235px;
	float: left;
	padding: 0 0 5px 35px;
}

.work-description {
	float: left;
	width: 300px
}
.work-description p {
	padding-bottom: 5px;
}
.work-description a.more {
	font-size: 12px;
	padding-top: 5px;
}
.work-description .more a:hover {
	border-bottom: 1px dotted;
}

.portfolio-description {
	float: right;
	width: 300px;
	
}
.portfolio-description li {
	padding-bottom: 10px;
}
.portfolio-description li span {
	color: #b9b558;
	font-size: 16px;
	font-weight: 600;
}
.portfolio-view ul {
	list-style: none;
	text-align: center;
}
.portfolio-view li {
	display: inline;
	padding: 0 10px 0 10px;
	font-size: 12px;
}

/********all H1 codes********/

#content h1 span {
	display: none;
}
h1.code {
	background: url(images/code-beautifully2.png) no-repeat;
	height: 38px;
	width: 294px;
	padding-bottom: 10px;
}
h1.recentwork {
	background: url(images/recent-work2.png) no-repeat;
	height: 21px;
	width: 140px;
	padding: 0 0 10px 20px;
}
h1.hireme {
	background: url(images/hire-me2.png) no-repeat;
	height: 22px;
	width: 138px;
	padding-bottom: 10px;
	margin-top: 10px;
}
h1.resume {
	background: url(images/resume2.png) no-repeat;
	height: 22px;
	width: 138px;
	padding-bottom: 10px;
	margin-top: 25px;
}
h1.aboutme {
	background: url(images/about-me2.png) no-repeat;
	height: 27px;
	width: 194px;
	padding-bottom: 10px;
}
h1.contactme {
	background: url(images/contact-me2.png) no-repeat;
	height: 27px;
	width: 217px;
	padding-bottom: 10px;
}
h1.myworks {
	background: url(images/my-works2.png) no-repeat;
	height: 38px;
	width: 200px;
}
/********launch and view screenshots sprites********
****inital state: 0
    rollover: 39px
    *****left
 *view screenshot: 0
 *lauch website: 102
 *****width
 *entire sprite: 195
 *view: 102
 *launch: 93
*/
.portfolioview {
	height: 78px;
	width: 195px;
	position: relative;
}
ul.portfolioshots { background:url(images/view-screenshot-sprite.png) }
ul.portfolioshots li { float:left; list-style-type:none }
ul.portfolioshots li a { height:39px; display:block; position:absolute; top:0; text-indent:-9999px; outline:none }

li.portfolioshotsView a, li.portfolioshotsLaunch a { background:url(images/view-screenshot-sprite.png) }

li.portfolioshotsView a 			{ background-position:0 0; width:102px; left:0 }
li.portfolioshotsView a:hover 		{ background-position:0 -39px }

li.portfolioshotsLaunch a 			{ background-position:-102px 0; width:93px; left:102px }
li.portfolioshotsLaunch a:hover		{ background-position:-102px -39px }
/********end of launch and view screenshots sprites********/

/***************sidebar***********/
#sidebar {
	width: 188px;
	float: right;
	margin-left: 1px;
}
.sidebarboxtop, .sidebarboxbottom {
	float:left;
	width:188px;
	height:15px;
	background:transparent url(images/small-box-bottom2.png) no-repeat; 
	}
.sidebarboxtop {
	background:transparent url(images/small-box-top2.png) no-repeat;
	height: 20px;
}
.sidebarbox {
	float:left;
	background:transparent url(images/small-box-middle2.png) repeat-y;
}
#sidebar h1 span {
	display: none;
}
#sidebar ul {
	padding: 0 20px 20px 20px;
}
#sidebar li {
	padding: 3px 0 3px 0;
	font-size: 14px;
}
#sidebar li a:hover {
} 

/********contact form*****/

#contact {
	float: left;
	width: 290px;
}
#contactquote {
	width: 220px;
	float: left;
}
#contactquote p {
       color: #b9b558;
       font-size: 18px;
       padding: 0 0 0 30px;
       line-height: 150%;
}
form {
  margin: 0;
  padding: 0;
  font-size: 100%;
  display: block;
}

label,input {
	display: block;
	width: 200px;
	float: left;
	margin: 10px 0 5px 0;
}
label {
	text-align: left;
	width: 75px;
}

textarea {
  height: 120px;
  width: 200px;
  margin-top: 10px;
}
.submitbutton {
	height: 24px;
	width: 79px;
	float: right;	
	background: url(images/submit.png) no-repeat;
	border: none;
	cursor: pointer;
}
.submitbutton:hover {
	background: url(images/submit_hover.png) no-repeat;
	height: 24px;
	width: 79px;	
	float: right;
	border: none;
}
ol.forms {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
ol.forms li {
clear:left;
float:left;
line-height:1.5em;
margin-bottom:0.5em;
width:100%;
}
ol.forms li.buttons {
padding-left:11%;
width:89%;
}
.alert, .error {
color:#a0a20f;
font-size: 10px;
float: right;
height: 10px;
}
h1.success {
	padding-top: 7px;
	padding-bottom: 10px;
}
#footer {
	float: left;
	padding-bottom: 30px;	
	margin-left: 60px;
}
#footer p {
	padding: 10px 0 0 0;
}
p.web-directory {
	display: none;
}