/* Load Browser Resets */

@import url("reset.css");

/* Main Elements */

body { background: #202020 url(../images/bg-body.jpg) top center no-repeat; background-attachment: fixed; }
#container { width: 850px; margin: 0 auto; position: relative; }
#leftCol { width: 200px; height: 400px; position: fixed; padding-top: 60px; }
#main { width: 600px; position: absolute; top: 0px; right: 0px; padding-top: 60px; }
#topBar { width: 100%; height: 30px; position: fixed; top: 0px; background-color: #333; z-index: 999; opacity: 0.8; }
#bottomBar { width: 100%; height: 30px; position: fixed; bottom: 0px; background-color: #333; z-index: 999; opacity: 0.8; }

/* Typography */

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; color: #DDD; }
h1 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1.8em; letter-spacing: -0.05em; color: #999; margin: 0px 0px 12px 0px; }
p { margin: 0px 0px 12px 0px; color: #999; font-size: 0.8em; line-height: 1.4em; }
ul { color: #999; font-size: 0.8em; line-height: 1.4em; }
a { color: #BBB; text-decoration: none; }
a:hover { color: #CCC; }
span.highlight { color: #FFF; }

/* Top Bar */

#topBar #topWrap { width: 850px; height: 20px; margin: 0 auto; color: #FFF; position: relative; }
#topBar #topWrap #nav { width: 300px; height: 20px; position: absolute; left: 0px; }
#topBar #topWrap #nav a { color: #AAA; text-decoration: none; margin: 0px 0px 0px 0px; font-size: 0.7em; text-transform: uppercase; background: transparent; display: block; float: left; padding: 9px 10px 8px 10px; }
#topBar #topWrap #nav a:hover { color: #FFF; background: #202020; }

/* Bottom Bar */

#bottomBar #bottomWrap { width: 850px; height: 20px; margin: 0 auto; color: #FFF; position: relative; }
#bottomBar #bottomWrap #copyright { width: 300px; height: 22px; position: absolute; left: 0px; top: 0px; padding: 8px 0px 0px 0px; font-size: 0.6em; color: #999; }
#bottomBar #bottomWrap #links { width: 58px; height: 30px; position: absolute; right: 0px; top: 0px;  }
#bottomBar #bottomWrap #links a { color: #AAA; text-decoration: none; margin: 0px; font-size: 0.7em; text-transform: uppercase; background: transparent; display: block; float: left; padding: 9px 10px 8px 10px; }
#bottomBar #bottomWrap #links a:hover { color: #FFF; background: #202020; }

/* Left Column (Fixed) */

#logo { width: 200px; height: 180px; position: absolute; }

/* Main Content */

#homeHeading { width: 600px; height: 230px; }
#intro { width: 600px; }
#intro .multi-col { -moz-column-gap: 30px; -moz-column-width: 285px; -webkit-column-gap: 30px; -webkit-column-width: 285px; }
#intro .multi-col p { }

/* Portfolio */

#portfolio { min-height: 200px; position: relative; margin-top: 800px; padding-top: 60px; }
#portfolioHeading { height: 75px; width: 600px; }

#portfolio .project { width: 600px; margin-top: 40px; }
#portfolio .project .artwork { width: 580px; height: 280px; padding: 10px; background: #FFF; -webkit-border-radius: 0.75em; -moz-border-radius: 0.75em; border-radius: 0.75em; margin-bottom: 10px; }
#portfolio .project .client { width: 580px; padding: 10px; background: #333; -webkit-border-radius: 0.75em; -moz-border-radius: 0.75em; border-radius: 0.75em; }
#portfolio .project .client ul { list-style-type: none; }
#portfolio .project .client a { color: #999; }
#portfolio .project .client a:hover { color: #FFF; }

/* About */

#about { height: 480px; position: relative; margin-top: 800px; padding-top: 60px; }
#aboutHeading { height: 75px; width: 600px; }
#about ul { margin: 0px 0px 20px 30px; list-style-type: disc; }
#about li { margin: 0px 0px 6px 0px; }
#about-experience { width: 600px; position: absolute; top: 130px; left: 0px; }
#about-skills { width: 150px; position: absolute; top: 320px; left: 0px; }
#about-software { width: 150px; position: absolute; top: 320px; left: 150px; }
#about-personal { width: 260px; position: absolute; top: 320px; left: 320px; }

/* Contact */

#contact { min-height: 200px; position: relative; margin-top: 800px; margin-bottom: 600px; padding-top: 60px; }
#contactHeading { height: 75px; width: 600px; }

form#contactForm { position: relative; }
form#contactForm ul { list-style-type: none; margin: 0px; padding: 0px; }
form#contactForm li { margin: 0px 0px 10px 0px; }
form#contactForm input { width: 400px; border: solid 2px #202020; background: #FFF; padding: 6px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; color: #666; -webkit-border-radius: 0.75em; -moz-border-radius: 0.75em; border-radius: 0.75em; }
form#contactForm textarea { width: 400px; height: 150px; border: solid 2px #202020; background: #FFF; padding: 6px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; color: #666; -webkit-border-radius: 0.75em; -moz-border-radius: 0.75em; border-radius: 0.75em; }
form#contactForm input:focus, form#contactForm textarea:focus { border: solid 2px #0099FF; }
form#contactForm input#submit { width: 75px; position: relative; left: 2px; font-size: 1em; padding: 5px; border: none; }
form#contactForm input#submit:hover { background: #DDD; cursor: pointer; }
form#contactForm input#reset { width: 110px; position: relative; left: 12px; font-size: 1em; padding: 5px; border: none; }
form#contactForm input#reset:hover { background: #FF0000; color: #FFF; cursor: pointer; }

form#contactForm input#name { background: #FFF url(../images/form-name.gif) 365px 5px no-repeat; padding-right: 75px; width: 331px; }
form#contactForm input#email { background: #FFF url(../images/form-email.gif) 367px 5px no-repeat; padding-right: 75px; width: 331px; }
form#contactForm input#subject { background: #FFF url(../images/form-subject.gif) 352px 5px no-repeat; padding-right: 75px; width: 331px; }
form#contactForm textarea#message { background: #FFF url(../images/form-message.gif) 344px 5px no-repeat; padding-right: 75px; width: 331px; }

#contact #messageBubble { width: 110px; height: 130px; background: url(../images/messageBubble.png) top left no-repeat; position: absolute; top: 270px; right: 76px; z-index: 999; }

/* Misc */

p.yellow-pencil { float: right; margin: 0px 5px; }