*, html { margin: 0px; padding: 0px; font-family: arial, verdana, sans-serif; font-size: 12px; position: relative; }
body { background: url(../images/bg.png) left top repeat transparent; text-align: center; }

a:link, a:visited, a:hover, a:active { color: #3F71AA; }

#content { text-align: left; width: 800px; margin: 0px auto; }

#header { width: 100%; height: 50px; margin-top: 30px; border-bottom: 1px solid #000000; }
#header div { height: 100%; vertical-align: bottom; }
#header #header_right { width: 350px; text-align: right; }
#header h1 { font-size: 26px; }
#social_media_bar { width: 100%; text-align: right; margin: 7px 0px 0px 0px; }
#social_media_bar a { margin-left: 3px; }
#social_media_bar #twitter { margin-left: 0px; }
#social_media_bar #fb { margin-left: 3px; }
#social_media_bar #gplus { margin-left: 5px; }

ul#nav { position: absolute; bottom: 3px; right: 0px; }
ul#nav li { display: inline; padding: 0px 0px 0px 20px; text-align: center; }
ul#nav li a { font-size: 16px; text-decoration: none; }
ul#nav li a:hover, ul#nav li a.active { border-top: 2px solid #3F71AA; }

#main { padding: 0px 10px; }
#main h2 { font-size: 18px; }
#main h3.header { font-size: 14px; text-decoration: underline; }

.work_item { width: 460px; height: 185px; padding: 20px; margin-bottom: 30px; color: #fff; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 2px 5px #777; box-shadow: 2px 2px 5px 0px #777; -webkit-transition: transform 0.3s; transition: transform 0.3s; }
.work_item > h3 { position: absolute; left: 20px; bottom: 35px; }
.work_item > h2 { position: absolute; left: 20px; bottom: 15px; }
.work_item .fade_overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(50,50,50,1) 0%, rgba(255,255,255,0) 100%); -webkit-border-radius: 10px; border-radius: 10px; }
.work_item:hover, .work_item:active { -webkit-transform: scale(1.05); transform: scale(1.05); }

#thrombin.work_item { background: url(../images/thrombin.png) no-repeat scroll top transparent; background-size: 500px 281px;  }
#hot_shot.work_item { background: url(../images/hs_logo.png) no-repeat scroll top transparent; background-size: 500px 288px;  }
#growers_edge.work_item { background: url(../images/ge_fm.png) no-repeat scroll top transparent; background-size: 500px 245px;  }
#blue_note.work_item { background: url(../images/bnt_bg.png) no-repeat scroll top transparent; background-size: 500px 249px;  }

.work_item_blurb { opacity: 0; background-color: rgba(21, 22, 74, 0.75); color: #fff; display: block; position: absolute; top: 0px; left: 0px; width: 460px; height: 185px; -webkit-border-radius: 10px; border-radius: 10px; padding: 20px; }
.work_item_blurb:hover, .work_item_blurb:active { -webkit-animation: work_item_hover_anim_in 0.3s forwards; animation: work_item_hover_anim_in 0.3s forwards; }
.work_item_blurb h3 { font-size: 18px; }
.work_item_blurb ul { padding-left: 20px; }

@keyframes work_item_hover_anim_in { from { opacity: 0; } to { opacity: 1; } }

.work_item_link { display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }

.subsection, .personal_subsection { background: url(../images/subsection_bg.png) left top repeat transparent; margin-bottom: 30px; -webkit-border-radius: 7px; width: 630px; border-radius: 7px; -webkit-box-shadow: 1px 1px 3px #777; box-shadow: 1px 1px 3px 0px #777; padding: 5px; }
.subsection_inner_wrapper { width: 630px; border: 1px solid #eee; -webkit-border-radius: 7px; border-radius: 7px; }
.subsection_inner { width: 608px; border: 1px solid #bbb; -webkit-border-radius: 7px; padding: 10px; border-radius: 7px; }
.subsection_inner .description { width: 250px; float: left; }
.subsection_inner .description p.created_for em { font-size: 10px; }
.subsection_inner img { -webkit-box-shadow: 2px 2px 6px #555; box-shadow: 2px 2px 6px 0px #555; }
.subsection_inner ul { padding-left: 20px; }

.personal_subsection { width: 375px; margin-bottom: 10px; }
.personal_subsection .subsection_inner_wrapper { width: 375px; }
.personal_subsection .subsection_inner { width: 353px; }
.personal_subsection img { margin-top: 25px; }

#about_content { width: 100%; }
#about_content #blurb { width: 400px; float: left; }
#about_content img { float: right; }

#footer { width: 100%; border-top: 1px solid #000000; margin-top: 50px; padding-top: 5px; margin-bottom: 20px; }
#footer .left { width: 390px; }
#footer .left, #footer .left * { font-size: 9px; }

.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }