/* CSS Document */

* { margin: 0; padding: 0; }
html { height: 100%; }
body { background: #1e1d1b url(../images/bg-page.jpg) 50% 0 no-repeat; background-attachment: fixed; color: #e1ded2; font-family: museo-sans, "Helvetica Neue", Arial, Helvetica, san-serif; font-size: 11px; font-weight: 300; height: 100%; line-height: 18px; position: relative; }

h1, h2, h3, h4, h5, h6, ul, ol, li, p { margin-bottom: 10px; text-shadow: 0 1px 1px #111; text-shadow: 0 1px 1px rgba(0, 0, 0, .75); }

h1 { font-family: museo-slab, "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 700; }
h2 { font-family: museo-slab, "Helvetica Neue", Arial, Helvetica, san-serif; font-size: 24px; font-weight: 300; }
h2 a { font-size: 12px; text-transform: uppercase; }
h3 { font-family: museo-slab, "Helvetica Neue", Arial, Helvetica, san-serif; font-size: 24px; font-weight: 300; }
h4 { }
h5 { }
h6 { }

p { letter-spacing: 0.05em; }

ul { }
ul li { }
ol { }
ol li { }

a:link, a:visited { color: #a08a55; text-decoration: none; }
a:hover, a:active { color: #d4bc74; text-decoration: none; }
a:focus { }

a:link img, a:visited img, 
a:hover img, a:active img { border: 0; }


#container { overflow: auto; bottom: 0; top: 0; position: absolute; left: 0; min-height: 670px; min-width: 980px; width: 100%; height: 100%; z-index: 90; overflow: hidden; }

/* Masthead */
#masthead { height: 200px; left: 50%; margin-left: -155px; margin-top: -110px; position: absolute; top: 50%; width: 310px; z-index: 1000; }
#masthead a { text-indent: -9999em; }
#masthead a:link, #masthead a:visited { }
#masthead a:hover, #masthead a:active { border: none; }
#masthead a:focus { outline: none; }
#logo { margin: 9px; }
#logo a { background: url(../images/logo-jonbalza.png) 0 0 no-repeat; display: block; height: 88px; width: 292px; }
#navigation { list-style: none; margin: 0; padding: 0; }
#navigation li { margin: 0; padding: 0; }
#navigation a { background: url(../images/bg-nav.png) 0 -7px no-repeat; display: block; height: 28px; width: 310px; position: relative; }
#navigation a span { background: url(../images/bg-nav.png) -310px -7px no-repeat; display: block; height: 28px; width: 310px; filter: alpha(opacity=0); left: 0; opacity: 0; position: absolute; top: 0; -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; -ms-transition: opacity 0.4s ease-in-out; transition: opacity 0.3s ease-in-out; zoom: 1; }
#navigation a span:hover { background: url(../images/bg-nav.png) -310px -7px no-repeat; filter: alpha(opacity=100); opacity: 1; zoom: 1; }
#nav-portfolio { }
#nav-portfolio a:link, #nav-portfolio a:visited { background-position: 0 -7px; }
#nav-portfolio a span, 
#nav-portfolio a span:hover { background-position: -310px -7px; } 
#nav-about { } 
#nav-about a:link, #nav-about a:visited { background-position: 0 -35px; }
#nav-about a span, 
#nav-about a span:hover { background-position: -310px -35px; } 
#nav-contact { }
#nav-contact a:link, #nav-contact a:visited { background-position: 0 -63px; }
#nav-contact a span, 
#nav-contact a span:hover { background-position: -310px -63px; } 

#footer { color: #4b4843; font-size: 9px; font-weight: bold; margin: 0; padding: 0; position: absolute; left: 50%; margin-left: -475px; top: 50%; margin-top: 310px; width: 950px; text-align: right; text-shadow: 0 1px 1px #000; text-shadow: 0 1px 1px rgba(0,0,0,.7); }

/* Pages */
.page { z-index: 200; width: 974px; bottom: 300px; left: 50%; margin-left: -487px; top: 50%; margin-top: -332px; position: absolute; display: none; height: 644px; }

/* Portfolio Page */
#portfolio { background: url(../images/bg-portfolio.png) 0 0 no-repeat; }
#portfolio ol { list-style: none; margin: 0; padding: 0; }
#portfolio a:focus { outline: none; }
#portfolio ol li { display: none; margin: 0; padding: 0; position: absolute; left: 11px; top: 11px; }
#portfolio ol li .desc { font-size: 14px; padding: 0; position: absolute; left: 8px; bottom: 0; display: none; }
#portfolio ol li img { -moz-box-shadow: 0 1px 5px #000; -webkit-box-shadow: 0 1px 5px #000; box-shadow: 0 1px 5px #000; filter: alpha(opacity=20); opacity: 0.2; zoom: 1; -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; -ms-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; }
#portfolio ol li img:hover { filter: alpha(opacity=80); opacity: 0.8; }

#portfolio #item1 { height: 200px; left: 492px; top: 12px; width: 310px; }
#portfolio #item2 { height: 200px; left: 12px; top: 327px; width: 310px; }
#portfolio #item3 { height: 200px; left: 652px; top: 432px; width: 310px; }
#portfolio #item4 { height: 95px; left: 12px; top: 12px; width: 310px; }
#portfolio #item5 { height: 95px; left: 652px; top: 222px; width: 310px; }
#portfolio #item6 { height: 95px; left: 172px; top: 537px; width: 310px; }
#portfolio #item7 { height: 95px; left: 172px; top: 222px; width: 150px; }
#portfolio #item8 { height: 95px; left: 652px; top: 327px; width: 150px; }
#portfolio #item9 { height: 95px; left: 492px; top: 432px; width: 150px; }
#portfolio #item10 { height: 95px; left: 332px; top: 12px; width: 150px; }
#portfolio #item11 { height: 95px; left: 332px; top: 117px; width: 150px; }
#portfolio #item12 { height: 95px; left: 172px; top: 117px; width: 150px; }
#portfolio #item13 { height: 95px; left: 492px; top: 537px; width: 150px; }
#portfolio #item14 { height: 95px; left: 812px; top: 327px; width: 150px; }
#portfolio #item15 { height: 95px; left: 12px; top: 222px; width: 150px; }
#portfolio #item16 { height: 95px; left: 332px; top: 432px; width: 150px; }
#portfolio #item17 { height: 95px; left: 812px; top: 117px; width: 150px; }
#portfolio #item18 { height: 95px; left: 12px; top: 117px; width: 150px; }
#portfolio #item19 { height: 95px; left: 12px; top: 537px; width: 150px; }
#portfolio #item20 { height: 95px; left: 812px; top: 12px; width: 150px; }

/* About Page */
#about { background: url(../images/bg-about.png) 0 0 no-repeat; }
#about h3 { color: #d4bc74; font-size: 12px; margin-bottom: 0; text-transform: uppercase; letter-spacing: 1px; }
#about-me img { -moz-box-shadow: 0 1px 5px #000; -webkit-box-shadow: 0 1px 5px #000; box-shadow: 0 1px 5px #000; position: absolute; left: 332px; top: 12px; -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; -ms-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; filter: alpha(opacity=50); opacity: 0.5; }
#about-me img:hover { filter: alpha(opacity=100); opacity: 1; }
#about-bio { height: 560px; padding: 30px; width: 250px; position: absolute; left: 12px; top: 12px; }
#about-twitter { height: 350px; padding: 30px; width: 250px; position: absolute; right: 12px; top: 12px; }
#about-twitter ol { background: url(../images/bg-hr.png) 50% 100% no-repeat; list-style: none; margin: 0; padding: 0; }
#about-twitter ol li { background: url(../images/bg-hr.png) 50% 0 no-repeat; margin: 0; padding: 8px 0 5px 0; }
#about-twitter ol p { margin: 0; padding: 0; }
#about-twitter ol p.meta { font-size: 8px; text-align: right; text-transform: uppercase; }
#about-twitter ol p.meta a:link, #about-twitter ol p.meta a:visited { color: #8e8b87; text-decoration: none; }
#about-twitter ol p.meta a:hover, #about-twitter ol p.meta a:active { color: #a08a55; text-decoration: none; }
#about-twitter p.more { background: url(../images/icon-twitter.png) 100% 13px no-repeat; margin: 0; padding: 10px 25px 10px 0; text-align: right; text-transform: uppercase; font-size: 9px; font-weight: 600; letter-spacing: 2px; }

#about-chart { height: 140px; padding: 30px; width: 570px; position: absolute; right: 12px; bottom: 12px; }
#about-chart ol { background: url(../images/bg-chart.png) 0 0 no-repeat; list-style: none; margin: 0; padding: 2px 0 0 0; width: 578px; height: 146px; position: relative; left: -10px; }
#about-chart ol li { background: rgba(142,139,133,.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0 1px 0 #000; -webkit-box-shadow: 0 1px 0 #000; box-shadow: 0 1px 0 #000; -moz-box-shadow: 0 1px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 1px 0 rgba(0,0,0,.3); color: #8e8b85; font-family: museo-slab, "Helvetica Neue", Arial, Helvetica, san-serif; font-size: 11px; font-weight: 600; line-height: 14px; margin: 4px 15px 4px 13px; padding: 2px 5px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; zoom: 1; }
#about-chart ol li.white { background-color: #92918f; background-color: rgba(142,139,133,.1); width: 120px; }
#about-chart ol li.white:hover { background-color: #c3c3c3; background-color: rgba(142,139,133,.3); }
#about-chart ol li.yellow { background-color: #b7b57b; background-color: rgba(174,167,84,.1); width: 190px; }
#about-chart ol li.yellow:hover { background-color: #b7b57b; background-color: rgba(174,167,84,.3); }
#about-chart ol li.orange { background-color: #b37b52; background-color: rgba(143,103,33,.1); width: 260px; }
#about-chart ol li.orange:hover { background-color: #b37b52; background-color: rgba(143,103,33,.3); }
#about-chart ol li.green { background-color: #2e3e33; background-color: rgba(45,129,88,.1); width: 330px; }
#about-chart ol li.green:hover { background-color: #536b5b; background-color: rgba(45,129,88,.3); }
#about-chart ol li.blue { background-color: #313e4f; background-color: rgba(48,80,129,.1); width: 400px; }
#about-chart ol li.blue:hover { background-color: #45556a; background-color: rgba(48,80,129,.3); }
#about-chart ol li.brown { background-color: #4b4337; background-color: rgba(60,51,38,.15); width: 470px; }
#about-chart ol li.brown:hover { background-color: #6c6151; background-color: rgba(60,51,38,.4); }
#about-chart ol li.black { background-color: #272625; background-color: rgba(0,0,0,.15); width: 540px; }
#about-chart ol li.black:hover { background-color: #393937; background-color: rgba(0,0,0,.4); }

#about-chart .caption { color: #55524d; margin-left: 10px; position: relative; top: -5px; left: -10px; }
#about-chart .caption strong { display: inline-block; width: 63px; float: left; padding-left: 7px; font-weight: 600; position: relative; top: -2px; }
#about-chart .caption span { display: inline-block; width: 65px; padding-right: 5px; text-align: right; text-transform: uppercase; font-size: 8px; float: left; }

/* Contact Page */
#contact { background: url(../images/bg-contact.png) 0 0 no-repeat; }
#contact-intro { height: 350px; padding: 30px; width: 250px; position: absolute; left: 12px; top: 12px; }
#contact-form { height: 560px; padding: 30px; width: 250px; position: absolute; right: 12px; top: 12px; }
#contact-form h2 { margin-bottom: 0; }
#contact-form label { color: #8e8b85; padding: 5px; }
#contact-form label.error { float: right; color: #d4bc74; padding: 5px; line-height: 10px; }
#contact-form .required { color: #a08a55; font-weight: bold; }
#contact-form .form-text, 
#contact-form .form-select, 
#contact-form .form-textarea { margin-bottom: 10px; }
#contact-form .form-buttons { text-align: right; margin-right: -2px; }
#contact-form input.text, 
#contact-form select, 
#contact-form textarea { border: 1px solid #33312e; border: 1px solid rgba(225,222,210,.05); background: #1c1b19; background: rgba(0,0,0,.05); color: #e1ded2; font-family: museo-slab, "Helvetica Neue", Arial, Helvetica, san-serif; font-size: 16px; font-weight: 300; padding: 5px; width: 240px; }
#contact-form input.text:focus, 
#contact-form select:focus, 
#contact-form textarea:focus { border: 1px solid #e1ded2; border: 1px solid rgba(225,222,210,.2); background: rgba(0,0,0,.2); color: #e1ded2; outline: none; }
#contact-form textarea { max-height: 140px; max-width: 240px; resize:none; }
#contact-info { height: 140px; padding: 30px; width: 250px; position: absolute; right: 332px; top: 12px; }
#contact-info ul { list-style: none; margin: 0; padding: 0; }
#contact-info ul li { list-style: none; margin: 0; padding: 0 0 10px 25px; }
#contact-info ul li.twitter { background: url(../images/icon-twitter.png) 0 3px no-repeat; }
#contact-info ul li.facebook { background: url(../images/icon-facebook.png) 0 3px no-repeat; }
#contact-info ul li.aboutme { background: url(../images/icon-me.png) 0 3px no-repeat; }
#contact-info ul li.linkedin { background: url(../images/icon-linkedin.png) 0 3px no-repeat; }

/* For the luddites among us. */
#ie6 { background: #242321; border: 1px solid #545350; height: 158px; left: 50%; margin-left: -155px; margin-top: -110px; padding: 20px; position: absolute; top: 50%; width: 268px; z-index: 500; }