@charset "utf-8";
/*----- form reset -----*/
input, textarea { border: 0; margin: 0; padding: 0; float: left; font: inherit; color: inherit; line-height: 0; resize: none; }
input:focus { outline: none; }

* { -webkit-text-size-adjust: none; }

html, body { height: 100%; }
html { overflow-y: scroll; }
body { font: 11px/20px helvetica, arial, sans-serif; color: #333; background: #e8e8e8; }
body > .container_12 { min-height: 100%; height: auto !important; height: 100%; margin-bottom: -41px; }
a, a:visited { color: #a00; text-decoration: none; }
a:hover { color: #800; }
h1 { /*border-top: solid 5px #000; padding-top: 15px;*/ width: 70px; height: 70px; float: left; }
h1 a, h1 a:visited { background: url(/images/logo_70x70.png) no-repeat left top; display: block; text-indent: -9999px; width: 100px; height: 100px; width: 70px; height: 70px; }
h1 a:hover { background-position: left bottom; }
h2 { font-weight: bold; font-size: 70px; line-height: 76px; letter-spacing: -4px; color: #000; text-shadow: 5px 5px #ccc; }
h3 { font: bold 24px/24px helvetica, arial, sans-serif; color: #000; margin-bottom: 20px; }
h4 { font-weight: bold; text-transform: uppercase; color: #000; }
p { margin-bottom: 20px; }
strong { color: #000; }
ul { margin-bottom: 20px; }

#header { overflow: hidden; padding: 15px 0; border-top: solid 5px #000; }
#header div { margin-top: 25px; display: none; }
#header ul { margin-top: 26px; float: right; margin-bottom: 0; }
#header ul li { float: left; margin-left: 20px; }
#header ul li a { display: block; /*padding: 3px 7px; background: #ccc;*/ color: #aaa; text-transform: uppercase; font-weight: bold; }
#header ul li a:hover, #home #header ul #home_nav a, #project #header ul #home_nav a, #about #header ul #about_nav a, #contact #header ul #contact_nav a, #resume #header ul #resume_nav a, #mylifeincharts #header ul #my-life-in-charts_nav a { /*background: #000; color: #e8e8e8; border-bottom: solid 3px #000;*/ color: #000; }
#header ul li a:active { /*background: #333;*/ margin-top: 1px; }
#header ul li a em { display: none; color: #888; text-transform: lowercase; font-weight: normal; }
#footer { overflow: hidden; padding: 10px 0; background: #333; color: #777; font-size: 11px; border-top: solid 1px #000; clear: left; }
#footer a { color: #aaa; }
#footer ul { margin-bottom: 0; }
#footer ul li { float: right; }
#footer ul li a { margin-left: 10px; }
#title { text-align: center; padding: 40px 0; border-bottom: solid 1px #ccc; border-top: solid 1px #ccc; margin-bottom: 20px; }
#title .amp { font: italic 300 74px/60px Baskerville, 'Goudy Old Style', 'Palatino', 'Book Antiqua', serif; }
#title span { font-size: 16px; }
#top_link { border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; padding: 10px 0; margin-bottom: 40px; text-align: center; margin-top: 20px; }
#top_link a { background: url(/images/topofpage.png) no-repeat top left; display: block; width: 30px; height: 30px; text-indent: -9999px; margin: 0 auto; }
#top_link a:hover { background-position: bottom left; }
#subnav { background: #ccc; padding: 3px 10px; width: 920px; }
#subnav li { float: left; margin-right: 10px; }
#subnav li a { color: #777; border-left: solid 1px #aaa; padding-left: 10px; }
#subnav li:first-child a { border: 0; padding: 0; }
#subnav li.active a, #subnav li a:hover { color: #000; }

#home #content { margin-top: 20px; }
#home #content > ul > li { margin-bottom: 20px; }
#home #content > ul > li.alpha { clear: left; }
#home #content > ul > li a img { width: 210px; height: 150px; display: block; border: solid 5px #fff; margin-bottom: 10px; -moz-box-shadow: 0 1px 2px #333; box-shadow: 0 1px 2px #333; -webkit-box-shadow: 0 1px 2px #333; }
#home #content > ul > li strong { display: block; text-align: center; font-size: 18px; }
#home #content > ul > li .techs { display: block; color: #888; text-align: center; }
#home #content.listview { margin-bottom: 40px; padding-top: 0; margin-top: 0; }
#home #content.listview img { height: 31px; width: 50px; float: left; margin-right: 90px; margin-bottom: 0; }
#home #content.listview > ul > .grid_3 { width: 940px; margin-right: 0; margin-left: 0; margin-bottom: 0; border-top: solid 1px #ccc; }
#home #content.listview > ul > .grid_3:first-child { padding-top: 0; border: 0; }
#home #content.listview > ul > .grid_3 > a { display: block; padding: 10px 0 10px 1px; overflow: hidden; }
#home #content.listview > ul > .grid_3 > a:hover { background: #eee; }
#home #content.listview strong, #home #content.listview .techs { text-align: left; line-height: 41px; float: left; }
#home #content.listview strong { width: 420px; display: block; margin-right: 20px; }
#home #content.listview .techs {  }
#home #projectview { border-bottom: solid 1px #ccc; overflow: hidden; margin-bottom: 0; }
#home #projectview li { float: right; margin: 10px 0 10px 10px; }
#home #projectview li a { background: no-repeat top left; display: block; width: 30px; height: 30px; text-indent: -9999px; }
#home #projectview li a#listviewtoggle { background-image: url(/images/listtoggle.png); width: 23px; }
#home #projectview li a#gridviewtoggle { background-image: url(/images/gridtoggle.png); }
#home #projectview li a:hover, #home #projectview li a.active { background-position: bottom left; }
#home #projectview li a.active { cursor: default; }
#home #title { margin-bottom: 0; }

#project .list { overflow: hidden; }
#project .list li { width: 50%; float: left; }
#project #inner_nav { overflow: hidden; margin-top: 24px; }
#project #inner_nav li { float: left; margin-left: 10px; width: 40px; height: 40px; }
#project #inner_nav li:first-child { margin-left: 0; }
#project #inner_nav li a { background: url(/images/inner_project_nav.png) no-repeat top left; display: block; width: 40px; height: 40px; text-indent: -9999px; }
#project #inner_nav li a#prev_project:hover { background-position: left bottom; }
#project #inner_nav li a#home_project { background-position: center top; }
#project #inner_nav li a#home_project:hover { background-position: center bottom; }
#project #inner_nav li a#next_project { background-position: right top; }
#project #inner_nav li a#next_project:hover { background-position: right bottom; }
#project .container_12 .grid_12.imagewrap { height: 340px; overflow: hidden; width: 930px; border: solid 5px #fff; margin-bottom: 20px; -moz-box-shadow: 0 1px 2px #333; box-shadow: 0 1px 2px #333; -webkit-box-shadow: 0 1px 2px #333; }
#project .container_12 .grid_12.imagewrap > img { width: 930px; }
#project .container_12 .grid_4.imagewrap { border: solid 5px #fff; width: 290px; -moz-box-shadow: 0 1px 2px #333; margin-bottom: 20px; }
#project .container_12 .grid_4.imagewrap.alpha { clear: left; }
#project .container_12 .grid_4.imagewrap img { display: block; width: 290px; }

#about .section { border-top: solid 1px #ccc; padding-top: 20px; }
#about #contact { margin-bottom: 20px; }
#about #skills { padding-bottom: 20px; }

#about #skills > div { height: 200px; width: 179px; }
#about #skills #frontend { background: url(/images/icons/frontend.png) no-repeat 0 4px; padding-left: 40px; }
#about #skills #backend { background: url(/images/icons/backend.png) no-repeat 0 4px; padding-left: 40px; }
#about #skills #server { background: url(/images/icons/server.png) no-repeat 10px 4px; padding-left: 50px; }
#about #skills #cms { background: url(/images/icons/cms.png) no-repeat 0 4px; padding-left: 40px; }
#about #skills #apis { background: url(/images/icons/apis.png) no-repeat 0 14px; padding-left: 40px; }
#about #skills #misc { background: url(/images/icons/misc.png) no-repeat 10px 4px; padding-left: 50px; }
#about #skills #mobile { background: url(/images/icons/mobile.png) no-repeat 0 14px; padding-left: 40px; }
#about #skills #software { background: url(/images/icons/software.png) no-repeat 10px 4px; padding-left: 50px; }

/*#about #aboutheadimg { margin-bottom: 20px; border: solid 5px #fff; width: 930px; overflow: hidden; -moz-box-shadow: 0 1px 2px #333; box-shadow: 0 1px 2px #333; -webkit-box-shadow: 0 1px 2px #333; }
#about #aboutheadimg > div { height: 260px; overflow: hidden; }
#about #aboutheadimg > div img { margin-top: -225px; }*/
/*#about #header { border-bottom: solid 1px #ccc; margin-bottom: 20px; }
#about { background: #e8e8e8 url(/images/profile_cutout_bw.png) no-repeat center 156px; }*/
#about img { display: block; border: solid 5px #fff; margin-bottom: 10px; -moz-box-shadow: 0 1px 2px #333; box-shadow: 0 1px 2px #333; -webkit-box-shadow: 0 1px 2px #333; width: 930px; margin-bottom: 20px; }

#contact form ul li { width: 404px; }
#contact img { border: solid 5px #fff; -moz-box-shadow: 0 1px 2px #333; margin-bottom: 20px; -webkit-box-shadow: 0 1px 2px #333; box-shadow: 0 1px 2px #333; }
#contact #contact_form { background: #fff; width: 420px; padding: 20px 20px 23px; -moz-box-shadow: 0 1px 2px #333; -webkit-box-shadow: 0 1px 2px #333; box-shadow: 0 1px 2px #333; margin-bottom: 20px; }
#contact form ul { margin-bottom: 0; }

label, input { display: block; color: #000; }
label { cursor: pointer; float: left; }
.textbox, .textarea { width: 404px; padding: 7px; border: 1px solid #ccc; background: #e8e8e8; margin-bottom: 10px; font: 12px/18px helvetica, arial, sans-serif; height: 15px; }
.textarea { height: 127px; line-height: 18px; }
input.error { border-color: #a00; }
#submit { width: auto; text-transform: uppercase; margin-top: 5px; cursor: pointer; border: 0; background: #000; color: #fff; line-height: 1; padding: 5px; box-shadow: 3px 3px 0 #ccc; -webkit-box-shadow: 3px 3px 0 #ccc; -moz-box-shadow: 3px 3px 0 #ccc; }
#submit:hover { background: #a00; }
.contact_label { float: right; color: #888; font-style: italic; }
::-moz-selection { color: #fff; background: #000; }
::selection { color: #fff; background: #000; }
.container_12 { padding-top: 0; padding-right: 10px; padding-left: 10px; }
.pR10 { padding-right: 10px; }
.pL10 { padding-left: 10px; }
.pT10 { padding-top: 10px; }
.pB10 { padding-bottom: 10px; }
.mR10 { margin-right: 10px; }
.mL10 { margin-left: 10px; }
.mT10 { margin-top: 10px; }
.mB0 { margin-bottom: 0; }
.mB10 { margin-bottom: 10px; }
.mB20 { margin-bottom: 20px; }
.mB40 { margin-bottom: 40px; }
.bR { border-right: solid 1px #ccc; }
.bL { border-left: solid 1px #ccc; }
.bT { border-top: solid 1px #ccc; }
.bB { border-bottom: solid 1px #ccc; }
.cL { clear: left; }
.bG1 { background-position: 0 10px; padding-left: 40px; }
.square_list { list-style: square outside; margin-left: 13px; color: #aaa; font-size: 12px; }
.square_list li span { color: #333; font-size: 11px; }
.grid_3.square_list { width: 212px; }
.borderTopHeader { border-top: solid 1px #ccc; padding-top: 20px; }
.tTU { text-transform: uppercase; }
.hide { display: none; }

#photos .post { border-top: solid 1px #ccc; padding-top: 40px; padding-bottom: 40px; }
#photos .post .title { margin: 5px; position: absolute; background: rgba(0, 0, 0, 0.5); color: #fff; width: 750px; padding: 0 10px; height: 30px; text-transform: uppercase; font-size: 14px; display: none; }
#photos .post .title * { line-height: 30px; }
#photos .post .title h3 { margin-bottom: 0; color: #fff; font-size: 14px; float: left; margin-right: 10px; }
#photos .post .title a { float: right; color: #fff; opacity: 0.5; }
#photos .post .title a:hover { opacity: 1.0; }
#photos .post div:hover .title { display: block; }
#photos .img { border: solid 5px #fff; float: left; -moz-box-shadow: 0 1px 2px #333; box-shadow: 0 1px 2px #333; -webkit-box-shadow: 0 1px 2px #333; }
#photos object { display: block; margin: -1px 0 0 -1px; }
#photos img { border: solid 5px #fff; -moz-box-shadow: 0 1px 2px #333; box-shadow: 0 1px 2px #333; -webkit-box-shadow: 0 1px 2px #333; }
#photos img.grid_12 { width: 930px; }
#photos img.grid_10 { width: 770px; }

#sitemap ul.grid_4.suffix_4 > li, #sitemap ul.grid_4.suffix_4 > li > a { font-weight: bold; color: #000; }
#sitemap ul li ul { margin-left: 20px; margin-bottom: 0; font-weight: normal; }
#sitemap ul li ul li { font-weight: normal; }

#zombie #title { border-top: 0; }
#zombie #subnav { margin-bottom: 0; }

/*#profile_img { background: #000; height: 468px; background: #e8e8e8 url(/images/profile_cutout_bw.png) no-repeat left top; }
#profile_img:hover { background: none; }
#profile_img #one, #profile_img #two, #profile_img #three, #profile_img #four { width: 25%; float: left; height: 468px; }
#profile_img #one { z-index: 4; }
#profile_img #two { z-index: 3; }
#profile_img #three { z-index: 2; }
#profile_img #four { z-index: 1; }
#profile_img #one img, #profile_img #two img, #profile_img #three img, #profile_img #four img { z-index: -1; position: relative; display: none; }
#profile_img #one img { margin-left: -53px; margin-top: -96px; }
#profile_img #two img { margin-left: -170px; margin-top: -63px; }
#profile_img #three img { margin-left: -281px; margin-top: -110px; }
#profile_img #four img { margin-left: -406px; margin-top: -62px; }
#profile_img #one:hover img, #profile_img #two:hover img, #profile_img #three:hover img, #profile_img #four:hover img { display: block; }*/

.container_12 .area { background: #fff; padding: 20px; -moz-box-shadow: 0 1px 2px #333; -webkit-box-shadow: 0 1px 2px #333; box-shadow: 0 1px 2px #333; margin-bottom: 20px; }
.container_12 .grid_6.area { width: 420px; }
.container_12 .area > img { display: block; }
.container_12 .area .borderBottomCcc, .container_12 .area > img { border-bottom: solid 1px #ccc; padding-bottom: 19px; margin-bottom: 20px; }
.container_12 .area .color { float: left; margin-top: 3px; margin-right: 4px; width: 12px; height: 12px; }
.container_12 .area ul { margin-bottom: 0; }
.container_12 .area ul li span span { color: #a00; }
.container_12 .area.pie ul li:hover { color: #000; cursor: help; }
.container_12 .area.text .big_text { font-size: 94px; color: #a00; line-height: 100px; display: block; border-bottom: solid 1px #ccc; margin-bottom: 20px; padding-bottom: 19px; }
.container_12 .area.text.quote .big_text { font-size: 40px; line-height: 40px; }
.container_12 .area.horiz_bar ul li { /*margin-top: 20px;*/ }
.container_12 .area.horiz_bar ul li:first-child { margin-top: 0; }
.container_12 .area.horiz_bar ul li strong { font-size: 20px; line-height: 20px; color: #a00; margin-right: 5px; float: left; }
.container_12 .area.horiz_bar ul li .count { color: #888; float: left; line-height: 12px; margin-top: 6px; }
.container_12 .area.horiz_bar ul li .fullWidth { display: block; height: 7px; background: #e8e8e8; margin-bottom: 13px; clear: left; }
.container_12 .area.horiz_bar ul li .partWidth { display: block; height: 7px; background: #a00; }

.contact_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; }
.form { position: absolute; background: #000; top: 0; right: 0; width: 320px; height: 100%; }

.show_code { background: #000; color: #aa0; }
.show_code code { display: block; }

.rules { margin-bottom: 0; }
.rules h4, .note { color: #777; }