/* Reset
------------------------------------------- */
* {margin: 0; padding: 0; color: #8a8a8a; font-family: "Lucida Grande", "Lucida sans unicode", "Lucida Sans", Lucida, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5em;}
a, span, strong {font-size: 1em;}
span {color: inherit;}
a, a:visited {color: #91a947; text-decoration: none; outline: none;}
a:hover {color: #9FCDE5; text-decoration: underline;}
img {border: none;}
html {height: 100.01%;}

/* basic text elements #9FCDE5 #487791 */
h1 {margin-bottom: 1em; font-size: 1.7em; font-weight: 400; font-family: Trebuchet MS, Arial, Helvetica, sans-serif;}
h2 {margin: 1em 0; color: #9FCDE5; font-size: 1.6em; font-weight: normal; font-family: Trebuchet MS, Arial, Helvetica, sans-serif;}
h3 {margin: 1em 0 -0.5em 0; color: #6699b8; font-size: 1.2em; font-family: Trebuchet MS, Arial, Helvetica, sans-serif;}
h4 {margin: 1em 0; font-size: 1.1em; font-family: Trebuchet MS, Arial, Helvetica, sans-serif;}
p {margin: 1.3em 0;}
ul, ol {margin: 1em 0 1em 0;}
ul li {margin: 0 0 0 20px;}
ol li {margin: 0 0 0 20px;}
sup {color: inherit; font-size: 0.7em; line-height: 1em;}
strong {color: #ccc;}

/* basic form elements */
fieldset {border: none;}
legend {display: none;}
label {display: block; float: left; clear: left; width: 150px; margin: 15px 0 10px 0; padding: 10px 0 0 0;}
.column form input, .column form textarea, .column form select {width: 260px; margin: 0 0 5px 0; padding: 2px; border: 1px solid #444; background: #252525;}
.column form textarea {height: 150px; background-position: 0 -20px;}
.column form input:focus, .column form textarea:focus, .column form select:focus {border: 1px solid #aaa;}
	input.chk, input.radio {width: 16px; border: none; background: none; vertical-align: middle;}
.column form button {margin: 5px 0 5px 150px; padding: 0 5px; border: 1px solid #444; background: url(../images/button-back.jpg) left 0 repeat-x; color: #999; cursor: pointer;}
.column form button:hover, .column form button:focus {border: 1px solid #888; background-position: 0 -22px; color: #ccc;}


/* layout
------------------------------------------- */
html {background: #000;}
body {padding-bottom: 150px; background: url(../images/bkg-bottom.jpg) left 550px repeat-x;}
.root {background: url(../images/bkg-top.jpg) left -50px repeat-x;}
.header {position: relative; width: 980px; height: 152px; margin: 0 auto; padding: 0;}
.header h1 {margin: 0; padding: 0;}
.header h1 img {position: absolute; left: -1px;  bottom: 1px;}
.logo {display: block; position: absolute; left: 0; bottom: 1px; overflow: hidden; width: 300px; height: 87px; background: url(../images/logo.jpg) left bottom no-repeat; text-indent: -1000px;}
.main {height: 397px; background: url(../images/bkg-middle.jpg) center top repeat-x;}
.main * {margin: 0; padding: 0;}
.content {overflow: hidden; position: relative; width: 960px; height: 397px; margin: 0 auto; padding: 0 110px; background: url(../images/bkg-main.jpg) center top no-repeat;}
.stuff {display: none; position: absolute; left: 110px; top: 0; z-index: 5; overflow: hidden; width: 960px; height: 397px;}
.contact form {margin-top: 50px;}
.footer {width: 960px; margin: 0 auto;}
.footer p {margin-top: .5em; color: #666; font-size: .9em; text-align: center;}

.mainmenu {position: absolute; overflow: hidden; right: 0; bottom: 5px; list-style: none; width: 670px; height: 35px; margin: 0;}
.mainmenu li {float: right; height: 35px; margin: 0; padding: 0 0 0 10px;}
.mainmenu li a, .mainmenu li a:visited {display: block; float: right; height: 40px; padding: 0 15px 0 40px; background: url(../images/icons.png) no-repeat; color: #fff; font-size: 1.3em; font-weight: bold; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; line-height: .7em; opacity: 0.5; }
.mainmenu li a span, .mainmenu li a:visited span {font-family: "Lucida Grande", "Lucida sans unicode", "Lucida Sans", Lucida, Arial, Helvetica, sans-serif; font-size: .8em; font-weight: normal;}
.mainmenu li a:hover, .mainmenu li a.current, .mainmenu li a.current:visited {color: #fff;  text-decoration: none; opacity: 1;}
.mainmenu li a:hover span, .mainmenu li a.current span, .mainmenu li a.current:visited span {color: #fff;}
.mainmenu li a#link-contact {background-position: 0 -85px;}
.mainmenu li a#link-portfolio {background-position: 0 -43px;}
.mainmenu li a#link-about {background-position: 0 -5px;}

.column {overflow: hidden; position: relative; z-index: 5; float: left; width: 440px; margin: 0; padding: 20px;}
.column h2 {margin-bottom: 20px;}
.column h3 {margin: 20px 0 5px 0;}

.photostream {position: absolute; left: 0; bottom: 20px; z-index: 5; margin: 15px 20px 0 20px;}
.photostream ul {margin: 10px 0 0 0;}
.photostream li {list-style: none; float: left; margin: 0 10px 5px 0;}
.photostream li a {padding: 0; border-bottom: 0;}
.photostream li a img {float: left; padding: 1px; border: 2px solid #333; opacity: 0.5;}
.photostream li a:hover img {border: 2px solid #91a947; opacity: 1;}

/* portfolio
------------------------------------------- */

.back {position: absolute; top: 0; left: 0; z-index: 1; width: 960px; height: 397px; background: #000; opacity: 0.7;}

ul#projects-list {display: block; position: absolute; bottom: 0; left: 0; z-index: 2;  width: 960px; height: 100px; padding: 10px 20px;}
ul#projects-list li {list-style: none; float: left; margin-right: 18px;}
ul#projects-list li a img, .projects-list li a:visited img {padding: 1px; border: 2px solid #888; opacity: 0.4;}
ul#projects-list li a:hover img, ul#projects-list li a.current img, .projects-list li a.current:visited img {border: 2px solid #fff; opacity: 1;}

#projects-details {position: absolute; top: 20px; left: 0; z-index: 2;  width: 960px; height: 277px; list-style: none;}
#projects-details li {display: none; float: none; position: absolute; left: 0; top: 0; width: 920px; height: 267px; margin: 0; padding: 0 20px;}
#projects-details li img {float: left; clear: left; overflow: hidden; margin: 0 30px 0 0; padding: 2px; border: 2px solid #888;}
#projects-details li p {margin: 1em 0; color: #eee;}
#projects-details li a.external, #projects-details li a.external:visited {display: block; float: right; padding: 5px; background: #000; font-weight: bold; }
#projects-details li a.external:hover {color: #fff; text-decoration: none;}
#projects-details li h2 a.close, #projects-details li h2 a.close:visited {display: block; overflow: hidden; position: absolute; right: 10px; top: 5px; width: 17px; height: 17px; padding: 0; background-position: -1px -182px; background-repeat: no-repeat; text-indent: -10001px;}
#projects-details li h2 a.close:hover {background-position: -1px -162px;}

.visit-site {float: right; font-weight: bold;}
h3.flickr {color: #2973de; font-family: Arial, Helvetica, sans-serif;}
h3.flickr span {color: #ff0b7c; font-size: 1em; font-family: Arial, Helvetica, sans-serif;}
.ok {margin: 20px 0; padding: 10px 10px 10px 40px; border: 2px solid #91a947; background: #111 url(../images/ok.png) 10px 10px no-repeat; color: #91a947; font-weight: bold;}
.error {margin: 20px 0; padding: 10px 10px 10px 40px; border: 2px solid #a00; background: #111 url(../images/error.png) 10px 10px no-repeat; color: #a00; font-weight: bold;}

#projects-details li ul.todo {float: left; list-style-image: url(../images/tick.png);}
#projects-details li ul.todo li {display: list-item; position: static; width: auto; height: auto; margin: 2px 25px; padding: 0;}

#tooltip {position: absolute; z-index: 3000;border: 1px solid #91a947; background-color: #111; color: #91a947; padding: 0 10px; font-weight: normal; opacity: 0.80;}
#tooltip h3, #tooltip div {margin: 0; color: #91a947;}