/* Layout ====================================================================*/
html {
    background: url(../img/bck.png);
}
body {
    text-align: center;
}
p {
    margin-bottom: 10px;
    color: #333;
}
#pre-header {
    position: relative;
    background: url(../img/header-mountains.png) repeat-x;
    padding: 170px 0 0 0;
}

#nav {
    position: relative;
}
#nav #menu {
    position: relative;
    width: 900px;
    margin: 0 auto;
    overflow: hidden;
}
#nav #menu li {
    float: left;
    margin-right: 20px;
}
#nav #menu li a {
    display: block;
    width: 100%;
    padding: 2px 5px;
    text-align: center;
    color: #12172a;
    text-decoration: none;
    background: #c0c0c0;
    border: transparent solid 1px;
}
#nav #menu li.active a, #nav #menu li a:hover {
/*    border-top: #c0c0c0 solid 1px;
    border-left: #c0c0c0 solid 1px;
    border-right: #d5d5d5 solid 1px;
    border-bottom: #d5d5d5 solid 1px;
*/    background: #ddd;
    color: #333;
}


#content {
    width: 900px;
    padding: 10px;
    margin: 0 auto;
}


/* Typography ================================================================*/
/* Links ---------------------------------------------------------------------*/
a {
    color: #12172A;
    text-decoration: none;
}
p a{
    color: #000099;
}
a:hover,
p a:hover {
    color: #333;
    text-decoration: underline;
}
#footer a,
#footer p{
    color: #fff;
}
#footer a{
    text-decoration: underline;
}
del{
    text-decoration: line-through;
}
/* Headings ------------------------------------------------------------------*/
h1{
    font-family: helvetica neue, helvetica, tahoma, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 600%;
    color: #333;
}
h2 {
    padding: 20px 0 10px 0;
    clear: left;
    font-family: Georgia, Times New Roman, serif;
    font-size: 189%;
    color: #12172A;
}    
h3{
    margin-bottom: 5px;
    font-family: tahoma;
    font-size: 121%;
    color: #12172A;
    padding-bottom: 5px;
}
#projects .unknown h3 {
    border: none;
    font-size: 800%;
    text-align: center;
    font-family: Georgia, Times New Roman, serif;
    color: #b6b6b6;
}

#projects h3 img {
    margin-top: 10px;
    border: 2px solid #ccc;
}

#projects a img {
    /* gets rid of underline on images */
    vertical-align: bottom;
}

/* General Theming ===========================================================*/
#header, #content, #footer {
    text-align: left;
}

#twitter a{
    position: absolute;
    top: 25px;
    right: 100px;
    padding-top: 80px;
    min-height: 40px;
    _height: 40px;
    width: 100px;
    display: block;
    background: url(../img/eagle_24.png) no-repeat 50% 10px;
}
#twitter a span{
    position: absolute;
    left: -999em;
}
#twitter a:focus,
#twitter a:hover{
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #5274bb;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
#twitter a:focus span,
#twitter a:hover span{
    position: static;
    left: 0;
}
#tw_status{
    min-height: 10px;
    text-align: left;
    background: #ddd;
}
#tw_status a {
    display: block;
    margin: 0 auto;
    text-shadow: 0px 1px 2px #fff;
    color: #666;
    width: 900px;
    padding: 5px;
    text-decoration: none;
}
#tw_status a:hover {
    text-decoration: underline;
}
#posts,
#profiles {
    overflow: hidden;
    padding-bottom: 1px;
}
#posts li,
#profiles li{
    float: left;
    width: 405px;
    padding: 10px 10px 0 10px;
    margin: 0 15px 0 0;
    background: none;
    overflow: hidden;
}
#posts .last,
#profiles .last{
    margin-right: 0;
}
#posts h3{
    background: url(../img/feed-icon.png) no-repeat top right;
}
#posts h3 a{
    display: block;
    border: none;
}
#posts ol{
    overflow: hidden;
}

#posts ol li{
    list-style-type: disc;
    padding: 0 0 0 5px;
    background: none;
    margin: 0 0 10px 20px;
    overflow: visible;
}
#profiles img {
    float: left;
    border: 1px solid #b6b6b6;
    border-top-color: #dfdfdf;
    border-left-color: #dfdfdf;
    margin: 0 10px 0 0;
    display: block;
    background: #fff;
    padding: 5px;
    display: block;
}
#projects, 
#posts, 
#profiles{
    border: 1px solid #b6b6b6;
    border-top-color: #dfdfdf;
    border-left-color: #dfdfdf;
    overflow: hidden;
    background: #fff;
    width: 898px;
}
#projects li{
    float: left;
    width: 203px;
    padding: 10px 10px 10px 0;
    margin: 10px 0 0 10px;
}
#blogs {
    margin: 5px 10px;
}
#blogs li {
    background: #848fbc;
    padding: 10px;
    margin: 5px 0 5px 5px;
}
#blogs, 
#posts {
    float: left;
}

#get-in-touch {
    margin: 0;
    overflow: hidden;
}
#get-in-touch-text, 
#get-in-touch form {
    float: left;
}
#get-in-touch-text {
    width: 440px;
    margin-right: 10px;
}
#get-in-touch form {
    background: #fff;
    border: 1px solid #b6b6b6;
    border-top-color: #dfdfdf;
    border-left-color: #dfdfdf;
    width: 398px;
    padding: 20px 20px 10px 20px;
    font-size: 110%;
    float: right;
}
#ht {
    display: none;
}
#get-in-touch form div {
    margin-bottom: 5px;
}
#get-in-touch label {
    display: block;
}
#get-in-touch .text {
    width: 15em;
}
#get-in-touch textarea {
    width: 395px;
}
.error {
    color: red;
}
.success {
    color: #333;
    padding: 5px;
    border: 2px solid #DECDBB;
    background: #fffadc;
}
#footer {
    clear: left;
    background: #12172A;
    border-top: 10px solid #ccc;
    padding: 10px;
    margin-top: 20px;
    color: #fff;
    overflow: hidden;
}
#footer p {
    float: right;
}

/* buttons ===================================================================*/

.btn {
    font-family: arial,helvetica,clean,sans-serif;
    display: inline-block;
    background: none;
    border: none;
    color: #000;
    text-decoration: none !important;
    padding: 0;
}
.btn:hover span span {
    background: #666;
    border: 1px solid #333;
    text-shadow: 0px 1px 2px #333;
    color: #fff;
}
.btn:active span span {
    background: #666;
    border: 1px solid #3366ff;
}
button.btn::-moz-focus-inner {
    padding: 0;
    border: none;
}
.btn span {
    display: inline-block;
}
.btn span span {
    padding: 0.3em 1em;
    background: #ccc;
    border: 1px solid #333;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 0px 1px 2px white;
}
.btn span span:after {
    content: " ▸";
    color: #666;
}
.btn:hover span span:after{
    color: #ccc;
}

#projects{
    position: relative;
    padding-bottom: 2em;
}
#projects li .btn{
    position: absolute;
    bottom: 10px;
}