/*

Steven McTainsh
Web Developer
Version 30

Stylesheet

Copyright 2011 Steven McTainsh. All rights reserved.

*/

/*
 * Title font - falls back to Impact if it can't be loaded (manually specified)
 */
@font-face {
    font-family: 'KomikaAxisRegular';
    src: url('font/KOMIKAX_-webfont.eot');
    src: url('font/KOMIKAX_-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/KOMIKAX_-webfont.woff') format('woff'),
         url('font/KOMIKAX_-webfont.ttf') format('truetype'),
         url('font/KOMIKAX_-webfont.svg#Forque') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*
 * General styles
 * Styles that affect the overall style of the page - not just a particular section.
 */
body { font: 10pt Cambria, Georgia, Times New Roman, serif; margin: 0; padding: 0; position: relative; overflow: auto; }
h1, h2, h3 { font: 26pt KomikaAxisRegular, Impact, Arial Black, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0px; margin: 0; }
h2 { font-size: 18pt; }
p { font-size: 16pt; text-align: justify; line-height: 25px; } /* TODO: use section element */
abbr { cursor: help; border-bottom: 1px dotted #fff; }
.inner { width: 1000px; margin: 0 auto; }
.contentpt { position: relative; display: block; } /* Necessary for Google Chrome */

/*
 * Header styles
 * For navigation and site title
 */
#header { position: fixed; top: 0; left: 0; right: 0; background: #112b00; z-index: 5000; }
#header #logo { float: left; margin: 10px; font-family: KomikaAxisRegular, Impact, Arial Black, Helvetica, sans-serif; margin: 6px 0; }
#header #logo #name { color: #e5ffd5; text-transform: uppercase; font-size: 22pt; }
#header #logo #career { color: #b3ff80; clear: both; text-transform: uppercase; font-size: 18pt; padding-left: 5px; }

/* 
 * Navigation styles
 */
#nav ul { float: right; list-style: none; margin: 10px 0 0 0; }
#nav ul li { float: left; background-repeat: no-repeat; background-position: top center; }
#nav ul li a:link { float: left; color: #fff; text-transform: uppercase; padding: 30px 10px 5px 10px; font-size: 9pt; margin: 0 5px; color: #b3ff80; text-decoration: none; text-shadow: 0px -1px 0px #000; }
#nav ul li a:visited { color: #d8fdbf; }
#nav ul li a:hover { background: url(images/nav-over.png) no-repeat bottom center; color: #fff; }

/* Navigation items */
#home { background-image: url(images/icons/home.png); }
#about { background-image: url(images/icons/me.png); }
#blog { background-image: url(images/icons/blog.png); }
#portfolio { background-image: url(images/icons/work.png); }
#contact { background-image: url(images/icons/contact.png); }

/*
 * Generic section styles
 */
#intro, #work, #me, #forms { padding: 20px 20px 80px 20px; overflow: hidden; } 
#intro h1, #intro h2 { color: #e5ffd5; }
#intro p { color: #b3ff80; }
#work h1, #work h2 { color: #deaa87; }

#intro { padding-top: 70px; padding-bottom: 20px; background: #2d5016 url(images/divider-a.png) repeat-x bottom left; }
#work { background: #28170b url(images/divider-b.png) repeat-x bottom left; }
#me { background: #1a1a1a url(images/divider-c.png) repeat-x bottom left; }
#forms { background: #216778; }

/*
 * Introduction section
 */
#intro .inner { padding: 20px 200px 80px 0; background: url(images/portrait.png) no-repeat top right; width: 800px; }

/*
 * Work section
 */
#carousel { width: 1000px; position: relative; float: left; }
.overview { top: 0; left: 0; list-style: none; }
.overview li { width: 900px; margin: 10px 40px 10px 10px; padding-right: 30px; float: left; clear: both; }
.overview li img { float: right; margin: 10px 10px 10px 20px; border: 1px solid #fff; color: #fff; width: 300px; height: 200px; }
.overview li p { font-size: 11pt; line-height: 18px; color: #fff; }
.overview li a:link { color: #ff8e41; text-decoration: none; }
.overview li a:hover { color: #fff; }
.overview li a:visited { color: #ec8f50; } /* swap */
.overview li h2 a { color: #a05a2c; font: 20pt KomikaAxisRegular, Impact, Arial Black, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; letter-spacing: 0; }
.overview li h2 a:hover { text-shadow: 0 0 5px #deaa87; color: #fff; }

.buttons { width: 41px; height: 40px; background-image: url(images/buttons.png); display: block; position: absolute; z-index: 2000; display: none; }
.buttons span { display: none; }
.prev .disable, .prev { left: 0; top: 50%; }
.next .disable, .next { right: 0; top: 50%; }
.prev { background-position: 0 0; }
.next { background-position: 0 -40px; }
.prev.disable { background-position: -41px 0; }
.next.disable { background-position: -41px -40px; }

.testimonial { float: left; width: 475px; margin-right: 25px; font-size: 13pt; }
.quote { padding: 15px; color: #f4e3d7; background: #784421; text-shadow: 0px 1px 0px #28170b; }
.quote em { font-size: 10pt; display: block; text-align: right; margin: 10px 0 0 0; }
.closer { float: right; background: url(images/bubble.png) no-repeat top left; width: 67px; height: 27px; margin-right: 30px; }

#quotes { display: block; padding-bottom: 15px; }

/*
 * About Me section
 */
#me h1, #me h2 { color: #999; }
#me a:link { color: #999; text-decoration: none; font-style: italic; }
#me a:visited { color: #777; }
#me a:hover { color: #fff; }

#blurb { width: 700px; float: left; }
#social { width: 270px; margin-left: 30px; float: left; }
#blurb p { color: #fff; font-size: 14pt; }

#twitter { background: #333; margin-top: 30px; text-shadow: 0px 1px 0px #000; }
#tweet { padding: 20px; font-size: 16pt; overflow: hidden; color: #ccc; }
#tweet-close { width: 67px; height: 34px; float: right; background: url(images/bubble-tweet.png) no-repeat; margin-right: 30px; }
#me a#twitterlink { font-family: KomikaAxisRegular, Impact, Arial Black, Helvetica, sans-serif; text-transform: uppercase; display: block; padding-top: 10px; float: right; font-style: normal; font-size: 12pt; }

#allsocial { background: #333; clear: both; margin-top: 15px; padding: 10px 20px; float: left; color: #ccc; width: 230px; }
#allsocial a img { border: 0; }
#allsocial h3 { font-size: 12pt; }
#allsocial ul { list-style: none;}
#allsocial ul li { display: inline; }

a#cv { width: 200px; padding: 20px; display: block; float: left; margin-top: 20px; border: 0; background-color: #333; background-image: url(images/icons/cv.png); background-repeat: no-repeat; background-position: 15px 15px; padding-left: 50px; color: #ccc; font-size: 14pt; text-shadow: 0px 1px 0px #000; }
a#cv:hover { color: #333; background: #999 url(images/icons/cv.png) no-repeat 15px 15px; /* To stop the default link background */ text-shadow: 0px 1px 0px #ccc; }
 
/*
 * Forms section
 */
#forms { color: #fff; }
#forms h1 { color: #80e5ff; }
#forms h2 { color: #aaeeff; }
#forms p { margin: 10px 0 0 0; }

#common-details { width: 1000px; }
.common-col { width: 310px; padding: 10px; float: left; }
.common-col input { width: 290px; }

.form { float: left; width: 480px; padding: 10px; }
label { font-weight: bold; display: block; font-size: 14pt; padding: 10px 0; }
select, input, textarea { font: 11pt Cambria, Georgia, serif; }
select, input, textarea { background: #004455; border: 1px solid #004455; color: #fff; padding: 3px; width: 470px; }
select:focus, input:focus, textarea:focus { color: #004455; background: #fff; }
textarea { height: 100px; }

#forms p.tip { color: #aaeeff; font-size: 10pt; font-style: italic; margin: 0 0 10px 0; line-height: 12pt; }

input.finding { padding-left: 23px; width: 450px; background: #004455 url(images/finding.gif) no-repeat 3px 3px; }
input.submit { width: auto; padding: 5px 8px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: #004455 url(images/button.png) repeat-x top left; float: right; margin: 5px 0; text-shadow: 0px 1px 0px #000; }
input.submit:active { padding: 6px 8px 4px 8px; color: #fff; }
input.submit:focus { color: #fff; }
input.submit:hover { color: #fff; border: 1px solid #fff; }

input.wrong, textarea.wrong { background: #ffd5d5; border: 1px solid #fff; color: #800000; }
#error { background: #ffd5d5 url(images/cross.png) no-repeat 5px 5px; border: 1px solid #fff; color: #800000; padding: 2px 6px 2px 28px; font-size: 11pt; }
#success { background: #d5ffd5 url(images/tick.png) no-repeat 5px 5px; border: 1px solid #fff; color: #005500; padding: 2px 6px 2px 28px; font-size: 11pt; }

#sending { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; z-index: 20000; font-family: KomikaAxisRegular, Impact, Arial Black, Helvetica, sans-serif; text-transform: uppercase; padding-top: 100px; text-align: center; opacity: 0.95; filter: alpha(opacity=95); -khtml-opacity: 0.95; -moz-opacity: 0.95; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=95)'; display: none; }
#sending p { text-align: center; }

#forms form p { margin: 0; }

/*
 * Footer styles
 */
#footer { width: 100%; float: left; clear: both; margin-top: 20px; }
#footer { text-align: center; font-size: 12pt; letter-spacing: -1px; color: #aaeeff; border-top: 1px dashed #004455; padding-top: 10px; font-style: italic; }
#footer a { color: #aaeeff; }
#copyright { font-weight: bold; }

/*
 * Style overrides for 4xx and 5xx HTTP error pages
 */
#server-error { background: #d40000; }
#error-intro .inner { background: url(images/hunter.png) no-repeat 665px 50px; padding-right: 300px; width: 600px; position: relative; padding-bottom: 50px; }

#server-error #header { background: #550000; }
#server-error #nav ul li a { color: #ff8080; }
#server-error #logo #name { color: #ffd5d5; }
#server-error #logo #career { color: #ff8080; }
#server-error #error-intro { padding-top: 70px; }
#server-error h1 { color: #ffd5d5; }
#server-error p { color: #fff; }
#server-error #error-intro a, #server-error #footer a { color: #ffd5d5; text-decoration: none; font-style: italic; }
#server-error #error-intro a:hover, #server-error #footer a:hover { color: #fff; text-decoration: underline; }
#server-error #footer { color: #fff; border-color: #ff8080; padding-bottom: 30px; }

/* Styles for Hunter */
#tear { width: 16px; height: 27px; background: url(images/tear.png); position: absolute; top: 130px; right: 160px; }
.eyelid { width: 71px; height: 67px; position: absolute; background: url(images/eyelid.png); display: none; }
#eyelid-left { top: 68px; right: 126px; }
#eyelid-right { top: 66px; right: 50px; }

/*
 * Style overrides for the 'Down for maintenance' page
 */
#maintenance { background: #2d5016; text-align: center; }
#maintenance p { text-align: center; }
#maintenance a { color: #b3ff80; }
#maintenance #intro { background: transparent; }

/*
 * Special note: due to IE using non-standard CSS properties for transparency, my CSS doesn't validate entirely. From a personal standpoint, validation should be used solely as a *guide* for developing a website, not the be-all and end-all. That's why my website does not feature validation links.
 */