/* 
Default Style

*/

@import 'settings';
@import 'toc';
@import 'codehilite';

@function menu-color($color, $amt) {
    @if $use-dark-menu { 
        @return lighten($color, $amt);
    } @else { 
        @return darken($color, $amt);
    }
}

@function body-color($color, $amt) { 
    @if $use-dark-body { 
        @return lighten($color, $amt);
    } @else { 
        @return darken($color, $amt);
    }
}
html, body { 
    margin: 0; padding: 0; 
    font-size: 1.0em;
    font-family: $primary-font;
    background: $body-bg-color;
    text-align: center;
    color: $text-color;
}
html { 
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 ($footer-height + 15px); 
}
h1, h2, h3 { 
    font-family: $heading-font;
    color: $heading-color;
    margin-top: -$menu-height;
    padding-top: $menu-height;
    padding-bottom: 0;
    margin-bottom: 0;
}

h1:target, h2:target, h3:target {
    color: body-color($heading-color, 5);
    border-bottom: 2px solid body-color($heading-color, 5); 
}
pre { 
    background: transparent;
}
code { 
    font-family: $code-font; 
}

/* Icons */
.icon-link { 
    line-height: 1.5em;
}
.big-icon { 
    font-size: 1.5em;
    vertical-align: middle;
}

/* Social */
.social-div { 
    display: inline-block;
    margin-right: 5px;
    border-radius: 5px;
    background-color: menu-color($primary-color, 5);
    height: 1.5em;
    line-height: 1.5em;
    padding: 4px;
}

/* Alerts */
.alert {
    padding: 15px;
    color: $text-color;
}
.alert-info {
    background-color: $alert-info-color;
    color: body-color($alert-info-color, 40);
}
.alert-warning {
    background-color: $alert-warning-color;
    color: body-color($alert-warning-color, 30);
}
.alert-error {
    background-color: $alert-error-color;
    color: body-color($alert-error-color, 30);
}

.post-content p code, .post-content li code { 
    background: $code-bg-color;
    color: $code-color;
    border: 1px solid darken($code-bg-color, 5);
    border-radius: 5px;
    padding: 1px; margin: 2px;
    font-family: $code-font; 
} 
[class*="fontawesome-"]:before { 
    font-family: "FontAwesome", sans-serif;
}
.codehilitetable pre {
    font-family: $code-font;
}
.codehilitetable .code { width: 100%; }
.codehilite pre {
    background: $code-bg-color;
    color: $code-color;
    font-family: $code-font;
    padding: 10px;
    overflow-x: auto;
}
.container {
    max-width: $container-max-width;
    margin: auto;
    text-align: left;
}
.color-div { 
    border: 1px solid menu-color($primary-color, 5);
    background: menu-color($primary-color, 10);
}
#content {
    width: 100%;
}

#footer {
    position: absolute;
    background: $primary-color;
    color: $primary-text-color;
    border-top: 1px solid lighten($primary-color, 5);
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 0.8em;
    height: $footer-height;
    left: 0; bottom: 0; right: 0;
}
#footer a { 
    text-decoration: none;
    color: menu-color($primary-color, 25);
}
#footer a:hover {
    color: $primary-link-hover-color;
}
.post {
    text-align: left; 
    padding: 15px;
    color: $text-color;
}

.pager ul { 
    list-style-type: none;
    margin: 0; padding: 0;
}
.pager ul li { 
    float: left;
}
.pager a {
    display: block;
    padding: 5px;
    color: menu-color($primary-color, 25);
    background: $primary-color;
    min-width: 25px;
    text-align: center;
    text-decoration: none;
    margin: 0;
}
.pager a:hover {
    color: $primary-link-hover-color;
    background: menu-color($primary-color, 5);
}
.pager ul li.active a {
    background: menu-color($primary-color, 5);
    color: $primary-link-hover-color;
}
.pager ul li:first-child a { 
    border-radius: 5px 0 0 5px;
}
.pager ul li:last-child a {
    border-radius: 0 5px 5px 0;
}
.list-post { 
    padding: 15px;
    margin: auto;
    margin-bottom: 5px;
    margin-top: 5px;
    text-align: left;
    border: 1px solid darken($body-bg-color, 5);
    word-wrap: break-all;
}
.list-post p { word-wrap: break-word; }
.post a, .list-post a {
    text-decoration: none;
    color: $secondary-color;
}
.post a:hover, .list-post a:hover { 
    color: lighten($secondary-color, 5);
}
/* Post tag block */
.post-tags {
}

.post-tags a, .tag { 
    color: menu-color($secondary-color, 20);
    background: $secondary-color;
    border: 1px solid $secondary-color;
    border-radius: 3px;
    margin: 2px; padding: 2px; margin-left: 0px;
    display: block;
    text-decoration: none;
    float: left;
}

.post-tags a:hover, .tag:hover { 
    color: $primary-link-hover-color;
    background: menu-color($secondary-color, 5);
}

.post-author-block {
    background: darken($body-bg-color, 2);
    color: lighten($text-color, 35);
    font-size: 0.9em;
}

.post-date { 
    float: right;
}


/* Top Menu Stuff */
.top-menu {
    background: $primary-color;
    font-family: $menu-font;
    overflow: hidden;
}
.top-menu-mob { text-align: right; }
.top-menu a.top-menu-link, .top-menu a.top-menu-parent {
    color: menu-color($primary-color, 35);
    text-decoration: none;
    height: $menu-height;
    line-height: $menu-height;
    min-width: 100px;
    display: block;
    padding-left: 5px; padding-right: 5px;
}
.top-menu a:hover, .top-menu-link:hover, .top-menu-parent:hover {
    color: $primary-link-hover-color;
    background: menu-color($primary-color, 5);
}

.top-menu a.active { 
    background: menu-color($primary-color, 5);
}

.input-text, .button { 
    line-height: 30px;
    padding-left: 10px;
    padding-right: 5px;
    margin-top: -2px;
}
.input-text { 
    width: 210px;
}
.button { 
    min-width: 50px;
    padding-left: 5px;
    padding-right: 5px;
    cursor: pointer;
}

.top-menu-search-field, .post-search-field, .post-search-btn {
    border-radius: $default-border-radius;
}

.top-menu-search-field {
    border: 1px solid menu-color($primary-color, 15);
    color: $text-color;
    background: $body-bg-color;
    @if $hide-top-menu-search { display: none; }
    height: 25px; line-height: 25px;
}
.post-search-field {
    border: body-color($body-bg-color, 15);
    background: $body-bg-color;
    color: $text-color;
    height: 30px; line-height: 30px;
}
.post-search-btn { 
    border: menu-color($primary-color, 25);
    color: menu-color($primary-color, 25);
    background: $primary-color;
}
.submenu {
    display: none;
    background: menu-color($primary-color, 5);
}
.submenu a { 
    color: menu-color($primary-color, 25);
    text-decoration: none;
    display: block;
    padding: 2px;
    padding-left: 10px;
}
.submenu a:hover { 
    color: $primary-link-hover-color;
    background: menu-color($primary-color, 1);
}
.submenu-item { 
    color: $primary-text-color;
    font-weight: bold;
    padding: 2px;
    padding-left: 9px;
    padding-right: 9px;
}
.submenu-section {
    display: inline-block;
    padding: 5px;
    margin: 5px;
    background: menu-color($primary-color, 7);
}

/* Date list stuff */
.date-wrap {
    margin-top: 10px;
    padding: 0;
    width: 100%;
}
.date-group {
    margin-bottom: 5px;
    width: 100%;
}
.date-title { 
    width: 100%;
    margin: 0; padding: 0; 
}
.date-title h4 { 
    padding: 0; margin: 0;
    width: 100%;
}
.date-title a {
    padding: 0;
    margin: 0;
    color: menu-color($primary-color, 25);
    background: $primary-color;
    text-decoration: none;
    border-radius: $default-border-radius;
    border: 1px solid body-color($primary-color, 5);
    display: block;
    padding: 10px;
}
.date-title a:hover { 
    color: $primary-link-hover-color;
    background: menu-color($primary-color, 5);
}
.date-list { 
    display: none;
}
.date-list a { 
    color: $secondary-color;
    display: block;
    padding: 10px;
    
}
.date-list a:hover { 
    color: lighten($secondary-color, 10);
}
.date-list ul {
    list-style-type: none;
    margin: 0; padding: 0;
}

.data-table { 
    width: 100%;
    border-collapse: collapse;
}
.data-table th {
    border-bottom: 2px solid #666;
}
.data-table tr { 
    border-bottom: 1px solid #aaa;
}

.data-table td { 
    border-left: 1px solid #bbb;
    border-right: 1px solid #aaa;
    padding: 3px;
}

/* Thumbnail related */
.center { 
    text-align: center;
}
.well { 
    margin: auto;
    width: 80%;
    background: body-color($body-bg-color, 10);
    border: 1px solid body-color($body-bg-color, 10);
    padding: 10px;
}
.thumb { 
    width: 100%;
}
.image-link {
    border: 2px solid body-color($body-bg-color, 10);
    display: block;
    padding: 0;
    line-height: 0;
}

.col { padding: 15px; }
.clear { clear: both; padding:0; margin:0; }


@media screen and (min-width: $small-page-width) {

    .top-menu-parent, .top-menu-link { 
        text-align: center;
    }
    .top-menu-item { 
        float: left;
    }
    .top-menu-item-right { 
        float: right;
        line-height: $menu-height;
        padding-right: 20px;
    }
    .toc ul li ul li ul li ul {
        display: none;
    }
    .post-wrap {
        width: 100%;
    }
    .post-content { 
    }
    #content { 
        margin-top: $menu-height; 
        padding-top: 5px; 
    }
    .top-menu-mob { display: none; }
    .top-menu-full { display: block; }
    
    .top-menu {
        position: fixed;
        z-index: 5;
        top: 0; left: 0; right:0;
        height: $menu-height;
    }
    
    .submenu { 
        position:fixed;
        top: $menu-height;
        min-width: 200px;
        z-index: 10;
    }
    .row { display: table; width: 100%; }
    .col { display: table-cell; }
    .col-2 { width: 16%; min-width: 16%; }
    .col-3 { width: 25%; min-width: 25%; }
    .col-4 { width: 33%; min-width: 33%; }
    .col-5 { width: 41%; min-width: 41%; }
    .col-6 { width: 50%; min-width: 50%; }
    .col-8 { width: 66%; min-width: 66%; }
    .col-9 { width: 75%; min-width: 75%; }
    .col-10 { width: 83%; min-width: 83%; }
    .col-12 { width: 100%; min-width: 100%; }
}

@media screen and (min-width: 1px) and (max-width: $small-page-width) {
    .top-menu { position: relative; }
    .container { max-width: 100%; }
    .top-menu-item, .top-menu-item-right {
        display: block; 
        width: 100%;
    }
    .top-menu-search-field {
        width: 90%;
        margin: 5px;
    }
    .top-menu-parent,.top-menu-link { padding-left: 10px; padding-right: 10px; } 
    .top-menu-mob { display: block; }
    .mob-hidden { display: none; }
    .submenu { 
        position:relative; 
        top:0; 
        width:100%; 
        margin:0;
        border:0; 
        border-radius:0;
        padding-bottom: 10px;
        box-shadow: none;
    }
    .submenu-section { 
        display: block;
    }
    .submenu a {
        margin: 0px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .col { display: block; } 
}



