/* Hubing Design v2.1 | Copyright 2009 | Matt Hubing */


/* RESET */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, font, img, ins, q, samp, var, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
background:transparent none repeat scroll 0 0;
border:0 none;
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
vertical-align:baseline;
}
ol, ul {list-style-image:none; list-style-position:outside; list-style-type:none;}
blockquote, q {}
sub, sup {font-size:0.7em; line-height:0; vertical-align:super;}
abbr, acronym, cite , dfn {border-bottom:1px dotted #999999; cursor:help;}
cite, var {font-style:italic;}
dfn {font-style:normal;}
strong {font-weight:bold;}
em {font-style:italic;}
ins {text-decoration:underline;}
del {text-decoration:line-through;}
table {border-collapse:collapse; border-spacing:0;}
input:focus, button:focus {outline-color:-moz-use-text-color; outline-style:none; outline-width:0;}

/* MAIN CONTENT */
a {color:#70B050; text-decoration:none; border-bottom:1px dotted #70B050;}
a:link {}
a:visited {color:#68A848;}
a:hover {color:#59b224; border-bottom:1px dotted #59b224;}
a:active {color:#fe000c; outline:none;}
a:focus {color:#fe000c; outline:none;}
a img {border:none;}

html {background:#102030 url(/_img/mosaic.png) repeat 30% 0;}
body {background:transparent; min-width:900px; padding: 0;}

h1, h2, h3, h4, h5, h6, #brand a, #topnav a  {font-family: Helvetica, Arial, sans-serif;}
li, #overview {font-family: Georgia, "Times New Roman", serif;}
code, pre, samp, var {font-family: "Courier New", Courier, monospace;}

h1 {color:#203040; font:bold 26px/1.66em Helvetica, Arial, sans-serif;}
h2 {color:#304050; font:bold 22px/1.66em Helvetica, Arial, sans-serif;}
h3 {color:#303030; font:bold 20px/1.66em Helvetica, Arial, sans-serif;}
h4 {color:#000; font:bold 18px/1.66em Helvetica, Arial, sans-serif;}
h5 {color:#000; font:bold 16px/1.66em Helvetica, Arial, sans-serif;}
h6 {color:#000; font:bold 14px/1.66em Helvetica, Arial, sans-serif;}
p {color:#333; font:normal 14px/1.66em  Georgia, "Times New Roman", serif; margin-bottom:.66em;}

li {color:#333; font-weight:normal; font-size:14px; line-height:1.35em; padding:0 0 .35em 0;}
ul li {list-style-type:square;}
ol li {list-style-type:decimal;}
dl dt {}
dl dd {}
.clear {clear:both;}

/* WRAPPER */
#wrapper {background:url(/_img/top-gradient.png) no-repeat 35% top; margin:0 auto;}


/* HEADER */
#header {background:transparent;}
#header .container {background:transparent; padding:0;}
#brand {margin-bottom:0;}
#brand a {display:block; position:absolute; top:0; left:20px; height:90px; width:285px; font-weight:bold; font-size:26px; line-height:90px; background: transparent url(/_img/hubingdesign2.png) left center no-repeat; text-indent:-9999px; border:none;}


/* TOP NAVIGATION */
#topnav {display:block; float:right; height:90px; margin:0 20px 0 0;}
#topnav li {list-style:none; float:left; margin:0; padding:0;}
#topnav a {display:block; float:left; margin:25px 10px 25px 0; padding:10px; font-weight:normal; font-size:16px; line-height:20px; text-decoration:none; border-bottom:none; color:#80d030;}
#topnav a:hover, #topnav a:active, #topnav a:focus {color:#ff0;}
#page_home #nav_home a, #page_about #nav_about a, #page_services #nav_services a, #page_portfolio #nav_portfolio a, #page_resume #nav_resume a, #page_contact #nav_contact a {color:#fff; background:rgba(0,0,0,.4);-moz-border-radius:10px; -webkit-border-radius:10px;}


/* CONTENT */
#content {background:url(/_img/bg-top.png) no-repeat top center; padding-top:10px; margin:0 auto; width:860px}
#content .container {background:#fff;}
h1.super {font-size:46px; line-height:1.15em; letter-spacing:-.03em;}
span.drop {color:#203040; display:inline; float:left; font-size:3.5em; line-height:.4em; margin:0; padding:.3em .1em 0 0; text-transform:capitalize;}
.imgcontainer a {border:none;}
.imgcontainer img {display:block;}
.imgcontainer span {color:#000; font:normal 11px/1.5em Helvetica, Arial, sans-serif; display:block; background:#eee; padding:.5em;}
ul.checkmarks {margin-left:20px;}
ul.checkmarks li {list-style-image:url(/_img/checkmark.png);}
span.bold {font-weight:bold;}
span.italic {font-style:italic;}


/* FOOTER */
#footer {background:transparent;}
#footer .container {background:transparent url(/_img/bg-bottom.png) no-repeat top center; padding-top:25px; padding-bottom:0;}
#footer p {font-size:12px; font-family: Helvetica, Arial, sans-serif; color:#8090a0;}
#footer h5 {color:#A0B0C0;}
#footer li {list-style-type:none;}
#search {margin-bottom:1em;}
#search input {padding:5px;}
#search .textbox {border:1px solid #405060; color:#000; background:#fff;}
#search .button {font-weight:bold; border:none; color:#fff; background:#405060;}
#search .button:hover, #search .button:focus {background:#8090a0;}
#iewarning {background:#ff0; padding:5px;}


/* GRID */
.container {width:860px; margin:0 auto; position:relative; padding:20px 0;}
.full {width:820px;}
.onethird {width:260px;}
.twothirds {width:540px;}
.onefourth {width:190px;}
.onehalf {width:400px;}
.threefourths {width:610px;}
.full {margin:0 20px 20px 20px; clear:both;}
.onethird, .twothirds, .onefourth, .onehalf, .threefourths {float:left; display:inline; margin:0 0 20px 20px;}
.lonethird {margin-left:300px;}
.ltwothirds {margin-left:580px;}
.lonefourth {margin-left:230px;}
.lonehalf {margin-left:440px;}
.lthreefourths {margin-left:650px;}
.ronethird {margin-right:280px;}
.rtwothirds {margin-left:560px;}
.ronefourth {margin-left:210px;}
.ronehalf {margin-left:420px;}
.rthreefourths {margin-left:630px;}


/* HOME */
#page_home {}
#overview {padding:20px 0; color:#002030; font-weight:normal; font-size: 22px; line-height:1.75em;}


/* ABOUT */
#page_about {}


/* SERVICES */
#page_services {}


/* PORTFOLIO */
#page_portfolio {}
#page_portfolio .project, #page_home .project {display:block; width:260px; height:120px; position:relative; border:none; background-color: #000; background-repeat:no-repeat; background-position:center center;}
.projectoff {display:none;}
#page_portfolio .project span, #page_home .project span {display:none; position:absolute; bottom:0; left:0; background:#333; background:rgba(0,0,0,.8); color:#fff; width:250px; padding:5px; font: 12px/1.5em normal helvetica,arial,sans-serif;}
/*#page_portfolio .project:visited {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity: 0.4; opacity:.4;}*/
#page_portfolio .project:hover span, #page_home .project:hover span {display:block; cursor:pointer;}
#page_portfolio #sw_eaves {background-image:url(/_img/sw_eaves1_sm.jpg);}
#page_portfolio #sw_fhbc {background-image:url(/_img/sw_fhbc1_sm.jpg);}
#page_portfolio #sw_mag {background-image:url(/_img/sw_mag1_sm.jpg);}
#page_portfolio #sw_fad {background-image:url(/_img/sw_fad1_sm.jpg);}
#page_portfolio #sw_kand {background-image:url(/_img/sw_kand1_sm.jpg);}
#page_portfolio #sw_chair {background-image:url(/_img/sw_chair1_sm.jpg);}
#page_portfolio #sw_robo {background-image:url(/_img/sw_robo1_sm.jpg);}
#page_portfolio #mh_violin {background-image:url(/_img/mh_violin1_sm.jpg);}
#page_portfolio #hz_web {background-image:url(/_img/hz_web1_sm.jpg);}
#page_portfolio #pc34 {background-image:url(/_img/_sm.jpg);}
#page_portfolio #xpdx {background-image:url(/_img/_sm.jpg);}
#page_portfolio #hl_web {background-image:url(/_img/hl_web1_sm.jpg);}
#page_portfolio #rcc_logo {background-image:url(/_img/_sm.jpg);}
#page_portfolio #rcc_web {background-image:url(/_img/rcc_web1_sm.jpg);}
#page_portfolio #ib_web {background-image:url(/_img/ib_web1_sm.jpg);}

/* PROJECT */
#page_project .meta {margin:0 0 1em 0;}
#page_project .meta li {list-style:none;}
#page_project .meta span {font-weight:bold;}
#page_project .title {}
#page_project .date {}
#page_project .type {}
#page_project .client {}
#page_project .screenshots {margin: 0 0 1em 0;}
#page_project .screenshots img {display:block; padding:10px;}
#page_project .description {}
#page_project .responsibilities {margin:0 0 1em 1em;}
#page_project .responsibilities li {}
#page_project .disclaimer {color:#aaa; font:12px/1.3em normal Georgia, "Times New Roman", serif;}
#project_nav {height:26px; padding: 0 10px 10px 10px;}
#project_nav li {list-style:none; float:left; font:13px/16px normal Helvetica, Arial, sans-serif; margin:0 2px 0 0; padding:0;}
#project_nav a {display:block; padding:5px 10px; border:none; margin:0; background:#445566; color:#fff}
#project_nav a:hover {background:#556677;}
#project_nav #view_website {float:right; margin:0 0 0 2px;}
#project_nav #view_website a {}

#portfolio_nav {background:url(/_img/portfolio_nav.png); padding:0 10px; margin:20px 0 0 0;}
#portfolio_nav ul {}
#portfolio_nav ul li {list-style:none; padding:0; margin:0; display:inline;} /* needs float:left or display:inline? */
#portfolio_nav ul li a {display:block; float:left; padding:10px; margin:0 5px 0 0; border:none; text-align:center; font-size:13px; line-height:22px;}
#portfolio_nav ul li a:hover, #portfolio_nav ul li a:focus {background:rgba(0,0,0,.05);}
#portfolio_nav ul li a#next, #portfolio_nav ul li a#prev {float:right; margin:0 0 0 5px;}
.project_ib_web #ib_web,
.project_rcc_web #rcc_web,
.project_hl_web #hl_web,
.project_hz_web #hz_web,
.project_mh_violin #mh_violin,
.project_sw_robo #sw_robo,
.project_sw_chair #sw_chair,
.project_sw_kand #sw_kand,
.project_sw_fad #sw_fad,
.project_sw_mag #sw_mag,
.project_sw_fhbc #sw_fhbc,
.project_sw_eaves #sw_eaves {background:rgba(0,0,0,.05);}

/* RESUME */
#page_resume .name {padding-bottom:1em;}
#page_resume .summary {font: italic normal 20px/1.4em georgia;}
#page_resume .section {text-align:right; font-size:20px; font-weight:normal; color:#507080;}
#page_resume .company {font-weight:normal; text-transform:uppercase; font-size:.8em; padding-top:.2em; letter-spacing:.03em;}
#page_resume .timeframe {font-size:14px; font-weight:normal; color:#a0a0a0;}
#page_resume #content ul {padding-left:1em;}
.recommendation blockquote p  {text-align:left;}
.recommendation p  {text-align:right;}

/* CONTACT */


/* VCARD */
dl.address {color:#333; font:normal 14px/1.66em  Georgia, "Times New Roman", serif;}
dl.address dt {float:left; display:inline; width:50px; padding:0 10px 0 0; font-style:italic; text-align:right;}
dl.address dd {float:left; display:inline; clear:right; padding: 0 0 .3em 0;}
.twothirds dl.address dd {width:480px;} /* different widths for different columns */
.onethird dl.address dd {width:200px;} /* different widths for different columns */

/* CONTACT FORM */
#contactform {background:#E8f0f0; padding:20px; border:1px solid #C0D0D0; -moz-border-radius:10px; -webkit-border-radius:10px;}
#contactform div {clear:both; padding:0 0 1em 0;}
#contactform div.collapse {padding:0;}
#contactform label {position: absolute; display:block; width:130px; color:#8090a0; font:bold 14px/18px Helvetica, Arial, sans-serif; padding:5px 0;}
#contactform abbr {border-bottom:none;}
#contactform input, #contactform textarea, #contactform select {margin:0 0 0 140px; display:block; padding:5px; width:350px; border:1px solid #C0D0D0;}
#contactform input {}
#contactform select {width:362px;}
#contactform textarea {width:350px;}
#contactform input.hide {display:none; margin:0; padding:0;}
#contactform #formfilled {text-align:right;}
#contactform input.button {color:#FFFFFF; background:#333;}
#contactform input.button:hover, #contactform input.button:focus {background:#555; cursor:pointer; outline:none;}


/* COLUMNS */


/* IMG FLOATS */
img.img_left {float:left; padding:0 20px 20px 0;}
img.img_right {float:right; padding:0 0 20px 20px;}


/* ANCHOR BUTTONS */
div.abutton {width:100%; overflow:hidden; margin: 0 0 1em 0;}
div.abutton a {background: transparent url(/_img/abutton_a.png) no-repeat scroll top right; color: #fff; display: block; float: left; font: bold 13px Helvetica, Arial, sans-serif; height: 22px; margin-right: 6px; padding-right: 10px; border:none;}
a.left {float:left;}
a.right {float:right;}
div.abutton strong {background: transparent url(/_img/abutton_strong.png) no-repeat; display: block; line-height: 14px; padding: 4px 0 4px 10px;}
div.abutton a:hover, div.abutton a:focus {background-position: bottom right; color: #e0f0e0;}
div.abutton a:hover strong, div.abutton a:focus strong {background-position: bottom left; padding: 5px 0 3px 10px;}


/* TWITTER */
#content #twitter_div ul {margin:0; padding:0;}
#twitter_div ul li {list-style:none;}