/* Reset Styles */
*{margin:0; padding:0;}
a{text-decoration:none;}
a{color:#2563B3}
small{font-size:8pt; font-style:italic; color:#888;}
a img{border:none;}
p{margin:1em 0;}
html{
    background:#333;
    text-align:center;  
    font-family: Verdana, Geneva, sans-serif;
    color:#333;
}
#page{
    background:#FFF;
    width:900px;
    margin:25px auto;
    text-align:left;
    border:15px solid #999;
    border-width:15px 0;
}
#navigation{
    list-style-type:none;
    font-size:115%;
    font-weight:bold;
    padding-bottom:10px;
}
#navigation li{
    display:inline-block;
    margin-left:10px;
    padding-top:.25em;
}
#navigation li a{
    background:#eee;
    border-bottom:#999 solid 10px;
    padding:.25em 1em;
    text-shadow:1px 1px 1px rgba(0,0,100,.4);
}
#navigation li a:hover{
    padding-bottom:.75em;
    background:#ccc;
    border-bottom:#555 solid 10px;
}
#navigation li a:active,
#page_resume #link_resume,
#page_blog #link_blog,
#page_projects #link_projects,
#page_bio #link_bio,
#page_contact #link_contact{
        background:#555;
        border-bottom-color:#ccc;
        color:#eee;
        padding-bottom:.75em;
        cursor:default;
        outline:0;
}

#footer{
    background:#eee;
    border-top:#999 solid 10px;
    width:860px;
    margin:0 auto;
    padding:20px;
    font-size:8pt;
}
hr{border:1px solid #aaa; border-width:0 0 1px; margin:0 50px; clear:both;}
span.date{
    display:block;
    background:#eee;
    position:absolute;
    right:20px;
    top:5px;
    text-align:center;
    line-height:1.5em;
    font-size:8pt;
    padding:.4em 1em;
    font-family: 'Arial Black', Gadget, sans-serif;
}

/*****************\
 * Projects Page *
\*****************/

#page_projects #categories{
    list-style-type:none;
    text-align:center;
    background:#eee;
    border-bottom:1px solid #aaa;
    padding:10px 0;
}
#page_projects #categories li{display:inline-block; margin:0 10px;}
#page_projects #categories li a{padding:10px 5px;}
#page_projects #categories li a:hover{
    background:#ccc;
}
#page_projects #categories li a.selected,
#page_projects #categories li a:active{
    background:#555;
    color:#eee;
    outline:0;
}
#page_projects .category{padding:1em;}
#page_projects .project{
    margin:1em 0 1em 2em;
    position:relative;
    overflow:auto;
}
#page_projects .project h3, 
#page_projects .description{margin-left:160px;}
#page_projects .project .description ul{margin-left:1em;}
#page_projects .category .screenshot{float:left; width:150px;}
#page_projects .used{
    margin-top:1em;
    font-style:italic;
    font-size:90%;
    color:#888;
}

/*****************************\ 
 *        Resume Page        *
\*****************************/

#page_resume .photo{float:left;margin-right:10px;}
#page_resume .photo img{
    height:100px;
    border:1px solid #BBB; 
    padding:7px; 
    background:#DDD;
}
#page_resume h1{font-size:250%;}
#page_resume h2{font-size:150%;}
#page_resume h1,h2{padding-top:10px;}
#page_resume h3{color:#2563B3}
#page_resume #head{
    position:relative;
    padding:20px;
    background:#eee;
    border-bottom:1px solid #aaa;
    overflow:auto; /* same as "clearing" floated elements inside #head */
    width:860px;
}
#page_resume #contact{
    position:absolute;
    right:25px;
    top:5px;
    font-size:10pt;
}
#page_resume #contact label{font-weight:bold;}
#page_resume .adr{margin-top:1em;}
#page_resume #profile{clear:both;height:100px;}
#page_resume #social_media{
    padding:5px;
    margin-top:10px;
    text-align:right;
}
#page_resume .section{padding:20px;padding-left:250px;position:relative;}
#page_resume .section ul{margin:5px 0 0 20px;}
#page_resume .section h2{
    width:210px;
    margin-left:-230px;
    float:left;
    font-family: 'Bookman Old Style', serif;
    font-size:170%;
    font-style:italic;
    padding:0;
}
#page_resume .section h3{
    font-size:150%;
    font-family:Tahoma, Geneva, sans-serif;
    font-weight:normal;
}
#page_resume .section h2, #page_resume .section h3{text-shadow:1px 1px 1px rgba(0,0,0,.4);}
#page_resume .section h4{
    font-family: 'Bookman Old Style', serif;
    font-size:120%;
    font-style:italic;
    margin-bottom:1em;
}
#page_resume .section hr{margin:1em 50px;}
#page_resume .segment{position:relative;}

/******************************\ 
 *        Contact Page        *
\******************************/

#page_contact #head{
    margin:1em;
}

#page_contact .adr{margin:1em 0;}

#page_contact .photo,
#page_contact .title{display:none;}

/***************************\ 
 *        Blog Page        *
\***************************/

.blog_entry{
    position:relative;
    margin:1em;
}
.blog_entry h1{color:#2563B3;}
.blog_entry a.comments{float:right; padding-right:1em;}
.blog_entry ul{margin-left:1em;}
.blog_entry ul br{display:none;}
.blog_entry ul li br{display:block;}

.comment{
    border:5px solid #999;
    border-left-width:45px;
    margin:1em;
    position:relative;
}
.comment.admin{border-color:#2563B3}
.comment_list{padding:1em;}
.comment .number{position:absolute; top:-15px; left:-48px; color:#fff; font-size:200%;}
.comment .date{position:absolute; top:5px; right:5px; padding:5px; background:#eee; font-size:.8em;}
.comment p{margin:.5em;}
.comment h3{margin:.5em;}

.taglist{float:left;}

.infobar{overflow:auto;}

#post_comment{overflow:auto; width:800px; margin:0 2em 2em; padding:1em; border:none;}

#post_comment legend{font-size:1.5em; font-weight:bold; display:block;}

#post_comment label{
    float:left;
    display:block;
    width:100px;
    text-align:right;
    padding-right:5px;
}
#post_comment label span{color:#F00;}
#post_comment br{clear:both;}
#post_comment input[type="text"],
#post_comment textarea{
    width:200px;
    border:1px solid #DDD;
    outline:none;
}
#post_comment textarea{height:6em; margin-top:1px;}

#comment_form{width:310px;}
#post_comment input[type="submit"]{float:right;}

.page_bar{overflow:auto; margin:1em; font-size:1.3em; background:#eee; padding:.2em .4em; font-weight:bold;}
.previous_link{float:left}
.next_link{float:right;}

/****************************\ 
 *        Error Page        *
\****************************/

#page_error #page h1,
#page_error #page p{
    margin:10px;
    padding:0;
}