* { margin: 0; padding: 0; }

a { text-decoration: none; color: #c39831; outline: none; }
a:hover { text-decoration: underline; }
a:visited { outline: none; color: #505455; }
a:active { outline: none; }

html { height: 100%; }

body { color: #505455; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 62.5%; background: url(../img/body-bg.png); padding-top: 52px; height: 100%; }

section#page-container { display: block; margin: 0 auto; width: 960px; position: relative; padding-bottom: 30px; }

h1 { text-indent: -9999px; background: url(../img/bengourley.png) no-repeat; height: 105px; width: 422px; margin: 0 0 0 10px; }
a#contact { position: absolute; top: 0; right: 0; height: 122px; width: 239px; background: url(../img/contact.png); text-indent: -9999px; }
a#contact:hover { background-position-y: 122px; }
a#contact:active, a#contact:visited { outline-style: none; }

header { display: block; height: 70px; font-weight: 800; font-size: 2.8em; letter-spacing: -0.07em; border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; padding: 30px 10px; margin-top: 20px; background: url(../img/header-bg.png); }

ul#work { background: #d9d5c9; margin: 40px 45px; position: relative; padding: 100px 0 60px 0; }

ul#work h2 { background: url(../img/work.png); position: absolute; top: -19px; left: -45px; height: 114px; width: 240px; text-indent: -9999px; }

ul#work li { position: relative; height: 140px; list-style: none; margin: 30px 35px; background: #cbc8bd; -moz-border-radius-topright: 30px; -webkit-border-top-right-radius: 30px; border-top-right-radius: 30px; }
ul#work li:hover { background: #b1b0a7; cursor: pointer; }
ul#work li img { border: #efefef 5px solid; position: absolute; top: 0; left: 0; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); }
ul#work li h3 { position: absolute; top: 15px; left: 435px; font-size: 2.2em; text-transform: uppercase; background: #505455; color: #d9d5c9; padding: 0 5px; }
ul#work li p { position: absolute; top: 50px; left: 435px; width: 340px; font-size: 1.3em; line-height: 1.2em; font-family: Arial, Helvetica, sans-serif; font-weight: 600; }

footer { display: block; font-family: Arial, Helvetica, sans-serif; font-weight: 500; background: #c39831; position: relative; margin: 0 45px 0 80px; height: 200px; }
footer ul { font-size: 2.2em; list-style: none; font-weight: 900; position: absolute; right: 10px; top: 10px; }
footer ul li { float: left; background: #d8d8d8; color: #c39831; clear: both; padding: 3px; }
footer p { position: relative; top: 105px; padding: 0 30px; font-size: 1.4em; color: #d8d8d8; }
footer h2 { background: url(../img/about-me.png) no-repeat; width: 230px; height: 115px; position: absolute; top: -17px; left: -35px; text-indent: -9999px; }
footer p span.copy { font-size: 0.7em; font-style: italic; }


/* Form styling */
form#contact-form { display: none; position: relative; margin-top: 20px; padding-top: 20px; height: 200px; background: none; margin-bottom: -20px; border: 1px solid #d8d8d8; border-bottom: none; overflow: hidden; }
form#contact-form input, form#contact-form textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 62.5%; font-size: 1.5em; background: #f1f1f1; border: none; padding: 4px; border: 2px solid #505455; }
form#contact-form input, form#contact-form label { float: left; clear: left; width: 250px; height: 20px; margin: 0 30px; }
form#contact-form label { font-size: 1.6em; font-weight: 900; margin-top: 5px; }
form#contact-form textarea { width: 390px; height: 135px; margin: 25px 30px; }
form#contact-form input[type="submit"] { float: none; background: #cbc8bd; position: absolute; bottom: 30px; left: 760px; height: 40px; width: 140px; cursor: pointer; font-weight: bold; text-transform: uppercase; color: #505455; }
form#contact-form input[type="submit"]:hover { background: #b1b0a7; }

form#contact-form section { width: 1916px; display: block; height: 200px; position: relative; left: 0px; }

form#contact-form input.form-focus{ background: rgba(255,255,255,0.4); }
form#contact-form input.form-valid { background: #94c48d url(../img/form-valid.png) center right no-repeat; }
form#contact-form input.form-error { background: #c6928d url(../img/form-invalid.png) center right no-repeat; }

form#contact-form h2#form-message-title { position: absolute; display: block; left: 1024px; font-size: 2.2em; text-transform: uppercase; background: #505455; color: #d9d5c9; padding: 0 5px; top: 30px; }
form#contact-form p#form-message { position: absolute; left: 1024px; top: 70px; font-family: Arial, Helvetica, sans-serif; font-size: 1.4em; }
form#contact-form a#action { position: absolute; left: 1024px; top: 100px; font-size: 1.8em; }

/* Lightbox style */
div#overlay {

	position: fixed; top: 0; bottom: 0; left: 0; right: 0;
	background-color: #000; z-index: 1000; display: none;

}

div#lightbox-container { z-index: 1001; position: fixed; top: 10%; left: 0; right: 0; display: none; cursor: pointer; }
div#lightbox-container img { display: block; margin: 0 auto; border: #d8d8d8 solid 5px; border-bottom-width: 25px; cursor: pointer; width: 768px; height: 414px; }