﻿/* Images */

body {
    width: 100%;
    height: 100%;
    margin: auto;
    background:
        url(../img/bg_img.jpg) no-repeat;
    background-size: 100% 100%;
}

#bg_star {
    position: absolute;
    top: 10px;
    left: 0;
    height: auto;
    z-index: 4;
}


/* Page controls */

a.prev_next, a.prev_next:visited {
    border: none;
    text-decoration: none;
    color: #000;
    font-family: Times New Roman, Times, serif;
    font-style: normal;
    text-decoration: underline;
}

a.prev_next:hover {
    text-decoration: underline;
    color: #000;
    text-shadow: 
        1px 1px 6px #000;
    -webkit-text-shadow: 
        1px 1px 6px #000;
    -moz-text-shadow: 
        1px 1px 6px #000;
    -ms-text-shadow: 
        1px 1px 6px #000;
    -o-text-shadow: 
        1px 1px 6px #000;
}

a.prev_next {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 25px;
    font-size: 22pt;
    z-index: 5;
}

a, p {
    z-index: 50;
}


/* Table */

.container {
    margin: 0 auto;
    padding: 0;
    margin-bottom: 100px;
    width: 100%;
}

.row {
    margin: 0; 
    padding: 0;
}

#top_title {
    text-align: center;
    width: 100%;
}

#top_title p {
    display: block;
    width: 100%;
    margin: 20px auto 0 auto;
    padding: 0;
    color: rgb(88, 33, 9);
    font-family: Arial;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: -1px;
    text-shadow: 
        1px 1px 10px 
        rgb(88, 33, 9);
    -webkit-text-shadow: 
        1px 1px 10px 
        rgb(88, 33, 9);
    -moz-text-shadow: 
        1px 1px 10px 
        rgb(88, 33, 9);
    -ms-text-shadow: 
        1px 1px 10px 
        rgb(88, 33, 9);
    -o-text-shadow:
        1px 1px 10px 
        rgb(88, 33, 9);
}

#top_title p:nth-child(2n) {
    margin: 0 auto;
    font-weight: normal;
}

#tbl_docs tr {
    padding-top: 10px;
}

#tbl_docs div[class*="col-"] {
    padding-left: 70px;
    width: 100%;
}

#left_div {
    float: left;
    width: 29px;
    padding: 6px;
}

#right_div {
    margin-left: 35px;
    width: 100%;
}

#tbl_docs .fa-book {
    position: relative;
    display: block;
    float: left;
    vertical-align: center;
    width: 29px;
    padding: 6px;
    line-height: 29px;
    color: #000;
    z-index: 50;
}

#tbl_docs .btn, 
#tbl_docs .btn:visited {
    display: block;
    padding: 6px 6px;
    float: left;
    white-space: normal;
    border: none;
    color: #000;
    font-size: 16pt;
    font-family: 
        Times New Roman, Times, serif;
    text-decoration: none;
    text-align: left;
    text-shadow: 
        1px 1px 6px #000;
    -webkit-text-shadow: 
        1px 1px 6px #000;
    -moz-text-shadow: 
        1px 1px 6px #000;
    -ms-text-shadow: 
        1px 1px 6px #000;
    -o-text-shadow:
        1px 1px 6px #000;
}

#tbl_docs .btn:hover, 
#tbl_docs .btn:active {
    text-decoration: underline;
    color: #000060;
}

.sub_items {
    display: none;
}


/** Media **/

@media (min-width: 0) {
    #tbl_docs .btn, 
    #tbl_docs .btn:visited {
        font-size: 10pt;
        /*color: red;*/
    }
    #bg_star {
        width: 130px;
    }
    .container {
        max-width: 400px;
    }
    #top_title {
        height: 90px;
    }
    #top_title p {
        font-size: 14pt;
    }   
    #top_title p:nth-child(2n) {
        font-size: 12pt;
    }
}

@media (min-width: 600px) {
    #tbl_docs .btn, 
    #tbl_docs .btn:visited {
        font-size: 12pt;
        /*color: blue*/;
    }
    #bg_star {
        width: 140px;
    }
    .container {
        max-width: 550px;
    }
    #top_title {
        height: 100px;
    }
    #top_title p {
        font-size: 16pt;
    }   
    #top_title p:nth-child(2n) {
        font-size: 14pt;
    }
}

@media (min-width: 700px) {
    #tbl_docs .btn, 
    #tbl_docs .btn:visited {
        font-size: 14pt;
        /*color: gree*/n;
    }
    #bg_star {
        width: 150px;
    }
    .container {
        max-width: 650px;
    }
    #top_title {
        height: 120px;
    }
    #top_title p {
        font-size: 18pt;
    }   
    #top_title p:nth-child(2n) {
        font-size: 16pt;
    }
}

@media (min-width: 800px) {
    #tbl_docs .btn, 
    #tbl_docs .btn:visited {
        font-size: 16pt;
        /*color: oran*/ge;
    }
    #bg_star {
        width: 180px;
    }
    .container {
        max-width: 750px;
    }
    #top_title {
        height: 130px;
    }
    #top_title p {
        font-size: 20pt;
    }   
    #top_title p:nth-child(2n) {
        font-size: 18pt;
    }
}

@media (min-width: 900px) {
    #tbl_docs .btn, 
    #tbl_docs .btn:visited {
        font-size: 16pt;
        /*color: cyan*/;
    }
    #bg_star {
        width: 210px;
    }
    .container {
        max-width: 800px;
    }
    #top_title {
        height: 130px;
    }
    #top_title p {
        font-size: 22pt;
    }   
    #top_title p:nth-child(2n) {
        font-size: 20pt;
    }
}

@media (min-width: 1000px) {
    #tbl_docs .btn, 
    #tbl_docs .btn:visited {
        font-size: 16pt;
        /*color: yell*/ow;
    }
    #bg_star {
        width: 240px;
    }
    .container {
        max-width: 900px;
    }
    #top_title {
        height: 150px;
    }
    #top_title p {
        font-size: 23pt;
    }   
    #top_title p:nth-child(2n) {
        font-size: 21pt;
    }
}

@media (min-width: 1100px) {
    #tbl_docs .btn, 
    #tbl_docs .btn:visited {
        font-size: 16pt;
        /*color: purp*/le;
    }
    #bg_star {
        width: 270px;
    }
    .container {
        max-width: 900px;
    }
    #top_title {
        height: 170px;
    }
    #top_title p {
        font-size: 24pt;
    }   
    #top_title p:nth-child(2n) {
        font-size: 22pt;
    }
}

@media (min-width: 1200px) {
    #tbl_docs .btn, 
    #tbl_docs .btn:visited {
        font-size: 16pt;
        /*color: red;*/
    }
    #bg_star {
        width: 300px;
    }
    .container {
        max-width: 1000px;
    }
    #top_title {
        height: 200px;
    }
    #top_title p {
        font-size: 25pt;
    }   
    #top_title p:nth-child(2n) {
        font-size: 23pt;
    }
}
