@import "normalize.css";
@import url(http://fonts.googleapis.com/css?family=Oswald:400italic,400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(http://fonts.googleapis.com/css?family=Noto+Serif:400italic);

@backcolor: #d9a471;
@textcolor: #363636;
@linkcolor: #b36b25;
@hovercolor: #ff0000;
@boxcolor:  #eee3d4;

.syntaxhighlighter {
    max-height: 30em;
    overflow: auto;
}

.clearfix {
    *zoom: 1;
    &:before, &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}


a, a:visited {
    color: @linkcolor;
}

a:hover {
    color: @hovercolor;
}

html {
    background: @backcolor url(background.jpg) center 160px no-repeat;
}

i, em {
    font-family: "Noto Serif";
}

body {
    color: @textcolor;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 400;
    height: 100%;
    -webkit-text-size-adjust: 100%;

    margin: 0 auto 0 auto;
    width: 999px;
    min-height: 100%;
    min-width: 999px;
}

h1 {
    font-family: 'Oswald', serif;
    font-weight: 700;
    margin-bottom: 0;
}

h2 {
    font-family: 'Oswald', serif;
    font-weight: 400;
    a {
        text-decoration:none;
    }
}

h3 {
    font-family: 'Oswald', serif;
    font-weight: 400;
    font-size: 12pt;
}

#header {
    position: relative;
    background: #fcedbc;
    background: -moz-linear-gradient(top,  #fcedbc 0%, #e8be6a 50%, #e8b476 51%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcedbc), color-stop(50%,#e8be6a), color-stop(51%,#e8b476), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #fcedbc 0%,#e8be6a 50%,#e8b476 51%,#ffffff 100%);
    background: -o-linear-gradient(top,  #fcedbc 0%,#e8be6a 50%,#e8b476 51%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #fcedbc 0%,#e8be6a 50%,#e8b476 51%,#ffffff 100%);
    background: linear-gradient(to bottom,  #fcedbc 0%,#e8be6a 50%,#e8b476 51%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcedbc', endColorstr='#ffffff',GradientType=0 );
    color: white;
    padding: 1em;
    img {
        display: block;
        margin: 0px auto;
    }
}

#main {
    .clearfix;
    background: rgba(255, 255, 255, 0.6);
    position: relative;
    padding: 2em;

    .blogright {
        position: relative;
        float: right;
        width: 192px;
        padding: 1em;
        margin: 1em 0 1em 2em;
        background-color: @boxcolor;
        border: 1px solid rgba(0,0,0, 0.2);

        h3 {
            margin: 0.3em 0;
            background-color: @linkcolor;
            color: white;
            padding: 2px 8px;
        }
        .tagcloud {
            padding: 15px;
        }
        .recent {
            h2 {
                font-family: inherit;
                margin: 1em 0 0 0;
                font-style: normal;
                font-weight: bold;
                font-size: inherit;
            }

            font-size: 80%;

            .headingdate {
                display: none;
            }
        }
    }

    .footer {
        border: 1px solid rgba(0,0,0, 0.2);
        background: @boxcolor;
        margin-top: 2em;
        padding: 1em;

        .previousArticle {
            &::before {
                content: "\25c0 ";
            }
            float: left;
        }
        .nextArticle {
            float: right;
            &::after {
                content: " \25b6";
            }
        }
    }

    .headingdate {
        float: right;
        font-style: italic;
        font-size: smaller;
    }

}


#footer {
    height: 100px;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.6)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}


/**************************/

.articledate {
    position:absolute;
    right: 40px;
    top: 20px;
    font-style:italic
}

ul.doubleexpanded li, ol.doubleexpanded li {
    margin-top: 1em;
    margin-bottom: 1em;
}
ul.expanded li, ol.expanded li {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}

h3, h4, h5, h6 {
    margin: 0;
}

h4 + div div.syntaxhighlighter {
    margin-top: 0 !important;
}

.tagcloud {
    a {
        text-decoration: none;
    }
    .p0 { font-size: 9px; }
    .p1 { font-size: 11px; }
    .p2 { font-size: 13px; }
    .p3 { font-size: 15px; }
    .p4 { font-size: 17px; }
    .p5 { font-size: 18px; }
    .p6 { font-size: 19px; }
    .p7 { font-size: 20px; }
    .p8 { font-size: 21px; }
    .p9 { font-size: 22px; }
}

.right {
    float: right;
    margin-left: 1em !important;
}

.left {
    float: left;
    margin-right: 1em !important;
}

.left.clear {
    clear: left;
}

.right.clear {
    clear: right;
}

.center {
    display: block;
    margin: 0 auto !important;
}

#blogComment {
    display: none;
    background-color: white;
    color: black;
    margin: 40px 0;
    padding: 1em;
    width: 400px;
    input { 
        float: right;
        margin: 0 0 0 2em;
        width: 20em;
    }
    textarea {
        clear: both;
        width: 100%;
        height: 5em;
    }
    button {
        float: right;
        margin-left: 2em;
        width: 8em;
    }
    &.active {
        display: block;
    }
}

.blogComments {
    .comment {
        .head {
             margin: 1em 0;
        }
    }
}
.border {
    margin: 8px;
    border: 1px solid rgba(0,0,0, 0.5);
    box-shadow: 3px 3px 4px #000;
}

#popupimageholder {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color:rgba(0,0,0, 0.5);
    z-index: 100;

    &.visible {
        display: block;
        #popupimagebox {
            position: relative;
            margin: 0px auto;

            img, object {
                display: none;
            }
            img[src], object[data] {
                display: block;
                margin: 20px auto;
                border: 1px solid rgba(0,0,0, 0.5);
                box-shadow: 3px 3px 4px #000;
            }

            #popupcaption {
                position: absolute;
                width: 100%;
                top: 0px;
                background: rgba(0, 0, 0, 0.6);
                background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 40%, rgba(19,19,19,0.2) 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.8)), color-stop(40%,rgba(0,0,0,0.8)), color-stop(100%,rgba(19,19,19,0.2))); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 40%,rgba(19,19,19,0.2) 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 40%,rgba(19,19,19,0.2) 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 40%,rgba(19,19,19,0.2) 100%); /* IE10+ */
                background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 40%,rgba(19,19,19,0.2) 100%); /* W3C */
                font-size: 16px;
                color: white;
                padding: 2px;
            }
        }
    }


}

h1, h2, h3, h4 {
    margin-top: 1em;
}

table.defn {
    margin: 1em 0;
    border: 1px solid rgba(0,0,0,0.2);
    th { 
        background-color:rgba(0,0,0,0.2);
        padding-right: 2em;
    }
}

a#rss {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 24px;
    height: 24px;
    background: url(/theme/rss.png);
}