/* ------------------- Fonts ------------------- */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic&subset=latin,latin-ext);

body {
    font: 14px/21px 'Open Sans', sans-serif;
    /*font-weight: 100;*/
    font-weight: 400;
    text-align: justify;
}

header > h1.title { 
    font-size: 3em;
    /*font-weight: 200;*/
    font-weight: 400;
    text-shadow: 3px 3px 5px rgb(0,0,0);
}

nav { 
    text-transform: uppercase; 
    letter-spacing: 2px;
    /*font-weight: 200;*/
    font-weight: 400;
    font-size: 0.9em;
}

aside h3 {
    font-size: 1em;
    /*font-weight: 200;*/
    font-weight: 400;
}

aside p {
    font-size: 12px;
    line-height: 16px;
}

aside h3:before { content: "\f071\0020"; font-family: FontAwesome; }

footer {    
    font: 12px/16px 'Open Sans', sans-serif;
    font-size: .8em;
    /*font-weight: 200;*/
    font-weight: 400;
    text-shadow: 1px 1px 1px #aaa;
}

footer a { text-decoration: none; }

#main h3 { 
    font-size: 24px; 
    /*font-weight: 200; */
    font-weight: 400;
    /* text-align: left; */
}

div.spacer { min-height: 30px; }

/* ------------------- Colors ------------------- */
body { color: #4D4E53; }

header .title {
    color: #A39D95;
}

header {
    background: linear-gradient(to bottom, #BBF2D8 0%, #F8FAEB 100%);
    /* background-color: #C63431;*/ /*#e53935; */ /* #A34C43;  #7BA2BE; */
}

footer, footer a {
    background: #ececec;
    color: #4D4E53;
}

footer { box-shadow: 0 -2px 2px #aaa;  }

nav {
    background-color: #B4BF21; /*#A82C2A;*/ /* #c62828; */ /* #6E342E; #5B829E;*/
    box-shadow: 0 5px 5px #aaa;
}

nav a:hover {
    background-color: #009688; /* #5c6bc0; */ /* #E26A6A; */
    border-bottom: solid 3px #00796b; /* #3949ab; */ /* #c0392b; */
    border-top: solid 3px #009688;
}

nav a {
    border-bottom: solid 3px #A2AD0A; /*#A82C2A;*/ /* #c62828; */ /*#5B829E;*/
    border-top: solid 3px #A2AD0A; /*#A82C2A;*/ /* #c62828; */ /*#5B829E;*/
}

aside section {
    border: #00796b solid 1px; /* #c5cae9; */ /* #E6CDB8; */
    margin-bottom: 20px;
    box-shadow: 3px 3px 3px #aaa;
    border-radius: 3px;
}

aside section h3 {
    background-color: #009688; /* #5c6bc0; */ /* #E26A6A; */
    margin: 0;
    padding: 5px 10px 5px 10px;
    color: white;
    text-align: left;
}

aside section p {
    padding: 0px 10px 0px 10px;
}

a {
    text-decoration: none;
    color: #009688; /* #5c6bc0; */ /* #E26A6A; */
}

section a {
    background-color: #F5FFF5;
}

section a .fa {
    background-color: white;
}


a:hover { text-decoration: underline; }
nav a:hover { text-decoration: none; }

.warn { 
    border: #7BA2BE solid 1px;
    border-left: #7BA2BE solid 5px; 
    padding: 5px;
    border-radius: 3px;
}

/* ------------------- Layout ------------------- */


/* --- Mobile --- */
header { height: 150px; line-height: 150px; }
header .title { padding-left: 5px; margin: 20px 10px; text-align: center; display: inline-block; vertical-align: bottom; line-height: normal; }

#main, aside { margin-left: 5px; margin-right: 5px; }

#main, aside { 
    margin-top: 10px; 
    margin-bottom: 10px;
    padding: 10px;
}


/* --- Mid size --- */
@media screen and (min-width: 769px) {
    header .title   { padding-left: 20px; text-align: justify; }    
    #main           { padding-left: 20px; padding-right: 20px; }
    aside           { padding-right: 20px; padding-left: 20px; } 
}


#main section .tablicaNastava { width: 100%; font-size: 14px; line-height: 18px; border-collapse: collapse; }
#main section .tablicaNastava th { font-weight: bold; border-bottom-width: 2px; padding: 0px; text-align: center; }

#main section .tablicaNastava td
{
    text-align: center;
    border: solid 1px #555555;
    padding: 5px;
}

/* --- Ultra wide --- */
@media all and (min-width: 1140px) {
    header .title { 
        max-width: 1026px;
        margin: 0 auto;
        display: block;
        height: 100%;
        line-height: 150px;
    }

    header .title span { 
        margin: 20px 10px; text-align: center; display: inline-block; vertical-align: bottom; line-height: normal;
    }

    #wrapper-main-aside { 
        max-width: 1026px;
        margin: 20px auto;
        display: table;
    }

    #main { display: table-cell; width: 65%;  }
    aside { display: table-cell; width: 30%;  }

    footer { clear: both; }
}


/* ------------------- Navigation ------------------- */

/* --- Wide --- */
nav > ul {
    list-style: none;
    margin: 0; 

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    
    -webkit-box-pack: center; -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: flex-end;
}

nav a {
    text-decoration: none;
    display: block;
    padding: .9em;
    color: white;
}


/* --- Mid-size --- */
@media all and (max-width: 800px) {
    nav > ul {
        -webkit-box-pack: space-around; -moz-box-pack: space-around;
        -ms-flex-pack: space-around;
        -webkit-justify-content: space-around;        
        justify-content: space-around;
    }
}

/* --- Mobile --- */
@media all and (max-width: 600px) {
    nav > ul {
        -webkit-flex-flow: column wrap;
        flex-flow: column wrap;
        padding: 0;
    }

    nav a { 
        text-align: center; 
        padding: 10px;
        border-top: 1px solid rgba(255,255,255,0.3); 
        border-bottom: 1px solid rgba(0,0,0,0.1); 
    }

    nav li:last-of-type a {
        border-bottom: none;
    }
}



/* ------------------- Footer ------------------- */
footer { 
    text-align: center; padding: 20px;
}

#wrapper-footer-inner { margin: 0 auto; display: inline-block; min-height: 100%; line-height: normal; vertical-align: middle;}

footer .logo { display: table-cell; margin-right: 10px; vertical-align: middle;  }

footer .logo img { width: 50px; height: 50px; vertical-align: middle; }
footer .copyright { display: table-cell; vertical-align: middle; }

/* --- Other --- */
.lineHeight2x { line-height: 2em; }