/* Global */
* {margin: 0; padding: 0;}
html {background-color: #1C2C45; background-image: url(../img/bg.gif), url(../img/gradient.gif); background-repeat: no-repeat, repeat-x; background-position: top center, top left;}
body {-webkit-text-size-adjust: none; font: 12px Arial, Helvetica, sans-serif; width: 470px; margin: 0 auto; line-height: 1.5em; color: #222222;}

header, nav, section, article, aside, hgroup, footer {display: block;}

a {color: #84b2c2; text-decoration: none; font-weight: bold; outline: none;}
a:hover {color: #c0d8e0; text-decoration: underline;}
li {list-style-type: none;}
img {border: none; vertical-align: middle;}

/* Header */
header {margin: 18px 20px;}
header h1 a {display: block; text-indent: -9000px; overflow: hidden; height: 29px; width: 148px; background: url(../img/title.gif) no-repeat top left;}

/* Nav */
nav ul {overflow: hidden; margin-bottom: 20px; display: box; box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; display: -moz-box; -moz-box-orient: horizontal; width: 100%;
}
nav ul li {box-flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; text-align: center; background: url(../img/nav_bg.gif) repeat-x bottom left;}
nav ul li a {padding-bottom: 8px; color: #5B5A3E; display: block;}
nav ul li a:hover {text-decoration: none; background: url(../img/nav.gif) no-repeat bottom center; color: #5B5A3E;}

#home #nav_home a, #blog #nav_blog a, #portfolio #nav_portfolio a, #about #nav_about a {background: url(../img/nav.gif) no-repeat bottom center;}

/* Container */
body > section {background: #D9D9B8; min-height: 400px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 0 0 10px #121d2d; -moz-box-shadow: 0 0 10px #121d2d; -webkit-box-shadow: 0 0 10px #121d2d; padding: 20px;}

/* Page Content */
article h1 {text-indent: -9000px; overflow: hidden; margin-bottom: 20px;}
article a {color: #1C2C45;}
article a:hover {color: #2E3C56;}

/* Footer */
footer {text-align: center; color: #FFF; margin-top: 15px;}
footer h1 {font-size: 100%; font-weight: normal;}
footer h1 a[href^='http://www.facebook.com'] {margin-left: 2px; padding-left: 18px; background: url(../img/facebook.gif) no-repeat center left;}
footer h1 a[href^='http://twitter.com']  {margin-left: 2px; padding-left: 18px; background: url(../img/twitter.gif) no-repeat center left;}
footer h2 {margin: 5px 0; font-size: 80%; font-weight: normal;}

/* Home */
#home article h1 {height: 121px; background: url(../img/pitch.gif) no-repeat top center;}
#home article section {border-top: 5px dotted #a1a071; padding-top: 10px; display: box; box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; display: -moz-box; -moz-box-orient: horizontal;}
#home article section > a {display: block; width: 80px;}
#home article section p {padding-left: 20px; box-flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1;}

#home article ul {background: #c0bf87; color: #5B5A3E; margin: 20px; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#home article #portfolio_pitch {margin-bottom: 20px;}
#home article aside {background: url(../img/quote_left.gif) no-repeat top left; margin: 0 10px; font-size: 125%;}
#home article aside p {background: url(../img/quote_right.gif) no-repeat bottom right; padding: 0 30px; font-style: italic;}
#home article #news_more {text-align: right; margin: 0 40px 20px 0;}

/* Blog */
#blog article h1 {background: url(../img/blog.gif) no-repeat top center; height: 57px;}

/* Portfolio */
#portfolio article h1 {background: url(../img/portfolio.gif) no-repeat top center; height: 57px; text-indent: -9000px; overflow: hidden;}
#portfolio article h2 {font-size: 100%; font-weight: bold;}
#portfolio article ul {margin-bottom: 20px;}
#portfolio article #projects {margin-bottom: 20px;}

/* About */
#about article h1 {background: url(../img/about.jpg) no-repeat top left; width: 430px; height: 287px;}

#about article #bio p {margin-bottom: 20px;}
#about article #bio img {float: right; margin-left: 20px;}

#about article #contact {border-top: 5px dotted #a1a071; padding-top: 10px; margin-top: 10px; display: box; box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; display: -moz-box; -moz-box-orient: horizontal; width: 100%;}
#about article #contact #address {}
#about article #contact #address p {font-weight: bold;}
#about article #contact #info {box-flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1;}
#about article #contact #info span {font-weight: bold;}
#about article #contact #info #ym a {margin-left: 2px; padding: 2px 0 2px 20px; background: url(../img/ym.gif) no-repeat center left;}
#about article #contact #info #aim a {margin-left: 2px; padding: 2px 0 2px 20px; background: url(../img/aim.gif) no-repeat center left;}