/* 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;
}
#contents{padding:10px;width:880px;overflow:auto;}
#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);

    -webkit-transition:padding .1s linear;
}
#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_about #link_about,
#page_login #link_login,
#page_admin #link_admin,
#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;
}
#footer .social_media{
    padding:1em;
    display:inline-block;
}
hr{border:1px solid #aaa; border-width:0 0 1px; margin:0 50px; clear:both;}
.blog_entry span.date, .segment 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.hidden{
    background-color:#FDD;
}
.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:300%;}
.comment .date{position:absolute; top:5px; right:5px; padding:5px; background:#eee; font-size:.8em;}
.comment p{margin:.5em;}
.comment h3{margin:.5em;}
.comment form{display:inline;}
.comment button{border:none;background:none;float:right;cursor:pointer;margin-top:3px;}
.comment .adminbar{
    background-color:#999;
    color:#fff;
    line-height:1.5em;
    padding-top:5px;
}
.comment .adminbar a{color:#fff;}
.comment.admin .adminbar{background-color:#2563B3;}

.taglist{float:left;}

.infobar{overflow:auto;}

#post_comment{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 button{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;
}
#page_login label{display:block;margin-top:1em;font-weight:bold;}
fieldset{border:none;}
#button_login{margin:.75em 0 0 7.9em;}

.blog_list{background:#eee;margin-top:.5em;}
.blog_list li{clear:both;padding:.5em;}
.blog_list li:nth-child(even) {background:#ccc}
.blog_list form{display:inline;}
.blog_list .edit{float:right;margin-right:.5em;}
.blog_list .delete{float:right;}
.blog_list .awesome{margin-top:-1px;}
.blog_list span.date{display:inline-block;float:right;font-size:80%;padding:.1em .5em;width:100px;text-align:center;}
.blog_list span.date.future{color:#F00;font-weight:bold;}
#blog_title, #blog_tags, #blog_date{
    font-size:130%;
    width:440px;
    border:1px solid black;
    margin-bottom:.25em;
}
#blog_body{
    font-size:110%;
    width:440px;
    height:500px;
    margin-bottom:.25em;
}

#form_post_blog button[type='submit']{
    margin:.25em 0 0 333px;
    width:110px;
}
.toolbar {
    width:400px;
    overflow:auto;
}
.toolbar button{
    width:1.5em;
    height:1.5em;
    float:left;
    clear:none;
    line-height:1.5em;
    margin:2px 2px 2px 0;
    vertical-align:top;
    display:inline-block;
}
.col{width:435px;display:inline-block;}
.col.right .blog_entry{padding-left:0;margin-left:0;}
.left{float:left;}
.right{float:right;}
.awesome, .awesome:visited {
    background: #222 url(/images/alert-overlay.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
    border:0;
    -webkit-transition: all 1s;
    transition:1s all;
}

.awesome:hover {
    background-color: #111; 
    color: #fff;
    -webkit-box-shadow:0 0 8px #000; 
    -moz-box-shadow: 0 0 8px #000; 
    box-shadow:0 0 8px #000;
}
.awesome:active {top: 1px;}
.small.awesome, .small.awesome:visited {font-size: 11px; padding:none;}
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited {font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25);}
.large.awesome, .large.awesome:visited {font-size: 14px; padding: 8px 14px 9px;}

.green.awesome, .green.awesome:visited { background-color: #91bd09; }
.green.awesome:hover { background-color: #749a02; }
.blue.awesome, .blue.awesome:visited { background-color: #2daebf; }
.blue.awesome:hover { background-color: #007d9a; }
.red.awesome, .red.awesome:visited { background-color: #dd3300; }
.red.awesome:hover { background-color: #882200; }
.magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; }
.magenta.awesome:hover { background-color: #630030; }
.orange.awesome, .orange.awesome:visited { background-color: #ff5c00; }
.orange.awesome:hover { background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited { background-color: #ffb515; }
.yellow.awesome:hover { background-color: #fc9200; }

@media screen and (max-width: 900px) {
    #page{width:100%;}
    #footer{width:100%;padding:20px 0;}
}
@media screen and (max-width: 480px) {
    #navigation li{margin:0;font-size:100%;width:100%;}
    #navigation li a{
        padding:0;
        border-bottom:none;
        background:none !important;
    }
    #navigation li a:hover{
        padding:0;
        border:none;
    }
}