/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style Template

version:   2.0
author:    David Wranovics
website:   http://www.eyestormstudio.com/



/* UNCATEGORIZED MUMBOJUMBO
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.clear {
    clear:both;
}

img {
    border: 0;
}

html, body, form, fieldset {
    margin: 0;
    padding: 0;
}


/* TYPOGRAPHY
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body {
      font: 80%/1.3  "Trebuchet MS", "Segoe UI", 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
      background-color: #24282a;
      color:#333;
}

a {
    color:#789840;
}

ol {
    list-style:none;
    padding:0;
    margin:0;
}

a:hover {
    color:#3C4B61;
    font-weight:bold;
}

#heading_wrapper h2 {
    font-size:20px;
    color:#b7da6b;
    font-family: 'Gill Sans', Georgia, serif;
    letter-spacing: -1px;
    font-weight:bold;
    margin:0;
    padding:10px 0 0 0;
}

#content_wrapper h3 {
    color:#62758F;
    font-size:20px;
    font-family: "Gill Sans",Georgia, serif;
    letter-spacing: -1px;
    margin:0 0 3px 0;
    font-weight:bold;
}

div.hprojects h4 {
    color:#789840;
    font-weight:bold;
    font-size:120%;
    margin:5px 0 0 0;
}

span.small {
    color:#24282A;
    font-size:80%;
}


/* HEADER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.wrapper {
    width:770px;
    margin: 0 auto;
}

#logo_wrapper {
    background:#3c4b61 url(../images/logo_bg.gif) repeat-x;
    height:85px;
}

#logo_wrapper h1 {
    width:221px;
    height:85px;
    text-indent:-5000px;
    background:url(../images/logo.gif) no-repeat;
    float:left;
    margin:0;
}

/* NAV
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#topnav {
    float:right;
    height:85px;
    he\ight:65px;
    padding-top:20px;
}

#topnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 35px;
    width: 328px;
}
    
#topnav ul li {
    margin: 0; 
    padding: 0;
    display: inline;
    list-style-type: none;
}

#topnav ul a {
    float: left;
    padding: 35px 0 0 0;
    overflow: hidden;
    height: 0px !important; 
    height /**/:35px; /* for IE5/Win */
    background: url(../images/navSprite.png) no-repeat;    
}
    
#topnav ul a#portfolio {
    width: 61px;
}

#topnav ul a:hover#portfolio {
    background-position: 0 -35px;
}

#topnav ul a#blog {
    width: 58px;
    background-position:0 -210px; 
}

#topnav ul a:hover#blog {
    background-position: 0 -245px;
}

#topnav ul a#hire {
    width: 69px;
    background-position:0 -140px;   
}

#topnav ul a:hover#hire {
    background-position: 0 -175px;
}

#topnav ul a#home {
    width: 71px;
    background-position:0 -70px;      
}

#topnav ul a:hover#home {
    background-position: 0 -105px;
}

#topnav ul a#clients {
    width: 69px;
    background-position:0 -280px;   
}

#topnav ul a:hover#clients {
    background-position: 0 -315px;
}


/* INTRO
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#heading_wrapper {
    background-color:#24282a;
    height:135px;
    border-top:2px solid #191c1d;
    border-bottom:1px solid #fff;
    color:#fff;
}

#heading_wrapper img {
    float:left;
    padding:10px 20px 0 28px;
}

#heading_wrapper p {
    margin-top:7px;
}

/* CONTENT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#content_wrapper {
    background:#fafafa url(../images/content_bg.gif) repeat-x;
    width:100%;
    border-bottom:2px solid #d7e2ef;
}

#column {
    float:right;
    width:190px;
}

#content {
    float:left;
    width:560px;
    margin-right:20px;
}


/* SUBCONTENT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#subColumn {
    float:right;
    width:180px;
    height:150px;
}

#subContent {
    float:left;
    width:360px;
    height:150px;
}

#subColumn.available {
    color:green;
}

#subColumn.available strong{
    background:url(../images/check.gif) no-repeat;
    padding-left:25px;
}

#subColumn.notavailable {
    color:maroon;
}

#subColumn.notavailable strong{
    background:url(../images/x.gif) no-repeat;
    padding-left:25px;
}

#content div.hprojects {
    float:left;
    width:180px;
    height:230px;
}

div.hprojects a img {
    padding:4px;
    background-color:#fff;
    border:2px solid #D2EB90;
    margin-top:5px;
    width:170px;
}

div.hprojects a:hover img {
    border:2px solid #8D9EB1;
}

div.notice {
    background-color:#DFEEFF;
    padding:5px;
    border-top:1px dashed #A4C8EF;
    border-bottom:1px dashed #A4C8EF;
}

#portfolio .portfolio_image {
    float:left;
    width:190px;
    clear:both;
    padding-top:20px;
}

#portfolio .portfolio_right {
    margin-left:210px;
    padding-top:20px;
}

#portfolio .portfolio_image img{
    padding:4px;
    background-color:#fff;
    border:2px solid #efefef;
}

#portfolio .portfolio_image a img {
    padding:4px;
    background-color:#fff;
    border:2px solid #D2EB90;
}

#portfolio .portfolio_image a:hover img {
    border:2px solid #8D9EB1;
}

#tweet {
    font-size:90%;
}

#tweet ul, #tweet ol {
    list-style:none;
    padding:2px;
}

#tweet a {
    text-decoration:none;
}

#tweet span {
    color:#C28B3F;
    font-weight:bold;
}

#t_follow {
    background:url(../images/twitter.png) no-repeat;
    padding-left:20px;
    display:block;
    height:20px;
    line-height:20px;
    font-size:90%;
}


/* FOOTER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#footer_wrapper {
    background:#8d9eb1;
    border-top:2px solid #fafafa;
    color:#fff;
}

#footer_wrapper strong {
    color:#3B3C5F;
}

#footer_wrapper ul {
    margin:10px 0 0 0;
    padding:0;
}

#footer_wrapper li {
    display:block;
    background: url(../images/link.gif) .5%  no-repeat;
    padding-left:30px;
    padding-top:2px;
}

#footer_wrapper li a {
    color:#fff;
}

#footer_wrapper li a:hover {
    font-weight:bold;
}

#links {
    float:left;
    width:220px;
    height:130px;
}

#favorites {
    float:left;
    width:220px;
    height:130px;
}

#copyright_wrapper {
    color:#77929F;
    font-size:90%;
    background-color:#24282a;
    height:20px;
    border-top:2px solid #191c1d;
    padding:2px;
}

/* BLOG
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
pre {
    white-space:normal;
}

#column.wp {
    float:right;
    width:174px;
    background:#E3EFFF;
    border-right:1px solid #EBF3FD;
    border-left:1px solid #EBF3FD;
    border-top:2px solid #D7E2EF;
    padding:20px 7px 25px 7px;
    height:100%;
}

#column.wp ul {
    list-style:none;
    margin:0;
    padding:0;
}

#column.wp h3{
    padding-top:5px;
}