@import url(reset.css);

/* Common styles */
.clear {
	clear:both;
}
a {
	color:#fff;
}
a, a:hover, a:active, a:focus {
	outline:none;
}
div#header {
	width:100%;
	height:314px;
	background-color:#f2c777;
	border-bottom:1px solid #d9bba9;
}
div.header-container {
	width:940px;
	margin:auto;
	position:relative;
}
div#logo a {
	width:221px;
	height:372px;
	display:block;
	background:url(../img/eighthour-logo.png) no-repeat 0 0;
	position:absolute;
	top:0px;
	left:-109px;
}
h1 {
	padding:0 0 0 120px;
}
h1 a {
	text-decoration:none;
}
h1 a span#one {
	font-size:66px;
	color:#262626;
	font-weight:normal;
	letter-spacing:-2px;
}
h1 a span#two {
	font-weight:bold;
	color:#ffffff;
}
h1 a span#three {
	font-size:24px;
	color:#575757;
	font-weight:normal;
}
h1 a span#four {
	color:#262626;
}
h2 {
	color:#f2c777;
	font-size:40px;
}
h3 {
	padding:0 0 20px 0;
	font-size:18px;
	color:#262626;
}
h2.sub-heading {
	margin-bottom:40px;
}
div.content {
	width:100%;
}
div.content-container {
	width:940px;
	margin:auto;
	padding:85px 10px 85px 10px;
}

/* main menu */
ul#main-menu {
	font-size:36px;
	padding: 30px 0 0 120px;
}
ul#main-menu li {
	margin-bottom:10px;
}
ul#main-menu li a {
	text-decoration:none;
	display:block;
}
li#websites-link a {
	color:#17bf60;
	width:150px;
	border-right:670px solid #17bf60;
}
li#photos-link a {
	color:#03a5a5;
	width:120px;
	border-right:700px solid #03a5a5;
}
li#about-link a {
	color:#f27b35;
	width:100px;
	border-right:720px solid #f27b35;
}
li#contact-link a {
	color:#f43929;
	width:125px;
	border-right:695px solid #f43929;
}
ul#main-menu a:hover {
	color:#fff;
}
div#footer {
	clear:both;
	width:100%;
	background-color:#f2c777;
	border-top:1px solid #d9bba9;
}
div#footer-content {
	width:940px;
	margin:auto;
	padding:40px 0 40px 0;
}
div#footer-content ul {
	float:left;
}
div#footer-content li {
	font-size:18px;
	display:inline;
}
div#footer-content a {
	text-decoration:none;
	color:#262626;
}
div#footer-content a:hover {
	text-decoration:underline;
}
div#footer-content p#copyright {
	display:inline;
	float:right;
	width:350px;
	text-align:right;
}
div#footer-content p#validate {
	width:150px;
	text-align:center;
	margin:auto;
	position:relative;
}

/* background colors */
body#home {
	background:#a54a14 url(../img/home-bg-tile.gif) repeat 0 0;
}
div#home-content {
	background:url(../img/home-bg-repeat.gif) repeat-x 0 0;
}
div#home-content .content-container {
	background:url(../img/home-bg-mid.gif) no-repeat 0 0;
}
body#websites {
	background:#17bf60 url(../img/green-bg-tile.gif) repeat 0 0;
}
div#websites-content {
	background:url(../img/green-bg-repeat.gif) repeat-x 0 0;
}
div#websites-content .content-container {
	background:url(../img/green-bg-mid.gif) no-repeat 0 0;
}
body#photos {
	background:#03a5a5 url(../img/blue-bg-tile.gif) repeat 0 0;
}
div#photos-content {
	background:url(../img/blue-bg-repeat.gif) repeat-x 0 0;
}
div#photos-content .content-container {
	background:url(../img/blue-bg-mid.gif) no-repeat 0 0;
}
body#about {
	background:#f27b35 url(../img/orange-bg-tile.gif) repeat 0 0;
}
div#about-content {
	background:url(../img/orange-bg-repeat.gif) repeat-x 0 0;
}
div#about-content .content-container {
	background:url(../img/orange-bg-mid.gif) no-repeat 0 0;
}
body#contact {
	background:#f43929 url(../img/red-bg-tile.gif) repeat 0 0;
}
div#contact-content {
	background:url(../img/red-bg-repeat.gif) repeat-x 0 0;
}
div#contact-content .content-container {
	background:url(../img/red-bg-mid.gif) no-repeat 0 0;
}
/*HOME PAGE*/

div#location {
	width:50%;
	float:left;
}
div#location img {
	margin-top:30px;
}
div#skills {
	width:50%;
	float:left;
}
div#skills ul {
	font-size:24px;
	line-height:35px;
	color:#262626;
	display:inline;
	float:right;
	width:85%;
	margin:45px 0 0 0;
}
div#skills li {
	margin:0 0 25px 0;
}
div#skills li#convert {
	margin:0 0 25px 0;
}
div#skills li#wp {
	margin:0 0 40px 0;
}
div#skills li#mag {
	margin:0 0 45px 0;
}
div#skills img {
	float:left;
	margin-top:20px;
}


/*Website page */
div.website-entry {
	margin:0 0 40px 0;
	border-bottom:1px solid #575757;
	padding-left:20px;
}
div.last-entry {
	border:none;
}
div.website-entry h3 {
	padding-left:10px;
}
div.website-entry h3 span {
	font-size:90%;
	padding-left:40px;
}
div.screen-wrapper {
	width:440px;
	height:200px;
	background: url(../img/sh-website.png) no-repeat 0 0;
	display:block;
	float:left;
	padding:0 20px 30px 0;
	margin-top:10px;
}
div.first-screen {
	clear:left;
}
div.screen-wrapper img {
	padding: 7px 0 0 9px;
}
p.project-desc {
	width:420px;
	margin-left:10px;
	float:left;
	line-height:140%;
}
div.project-details {
	display:block;
	float:left;
	width:415px;
	margin-left:40px;
}
div.project-details p {
	color:#f2c777;
	clear:both;
}
div.project-details p span {
	color:#000000;
	width:300px;
	float:right;
	padding-bottom:5px;
}
div#websites-content div.hr {
	margin-bottom:20px;
}


/* photos page */
#photos-page div.page-container {
	min-height:1020px;
}
div#gallery-wrapper {
	margin:auto;
}
div.photo-column {
	display:inline;
	width:250px;
	float:left;
	margin:0 30px 0 30px;
}
div.photo-column h3 {
	padding-left:5px;
}
div.photo-column ul{
	margin:5px 0 40px 0;
}
div.photo-column li {
	display:block;
	float:left;
	width:117px;
	height:117px;
	background: url(../img/sh-photo.png) no-repeat 0 0;
	margin:0 5px 5px 0;
}
div.photo-column img {
	padding:7px 0 0 7px;
}


/*about page */
div#about-wrapper p {
	padding-top:20px;
	line-height:1.5em;
	font-size:1em;
}


/*contact page */
div#contact-content {
	min-height:500px;
}
div#contact-content p{
	line-height:150%;
	width:40%;
}
div#contact-content p#email {
	font-weight:bold;
	font-size:16px;
	padding-top:10px;
}
div#contact_form {
	width:50%;
	float:right;
}
div#contact_form label {
	display:block;
	padding:0 0 10px 0;
	font-size:18px;
	font-weight:bold;
	color:#262626;
}
.text-input {
	border:none;
	padding:10px;
	margin-bottom:20px;
	font-size:14px;
}
div#contact_form label.error {
	font-size:14px;
	color:#03a5a5;
}
input#submit_btn {
	border:2px solid #262626;
	padding:10px;
	font-size:18px;
	color:#262626;
	cursor:pointer;
	background-color:#f2c777;
}
input#submit_btn:hover {
	background-color:#ffffff;
}
div#contact_form h2 {
	font-size:24px;
}