@charset "UTF-8";
/*CSS Document*/

@font-face{
    font-family: ComicSans;
    src: url(ComicSansMS.woff);
}


@font-face{
    font-family: ComicSans-Bold;
    src: url(ComicSansMS-Bold.woff);
}

@font-face{
    font-family: Myriad-Bold;
    src: url(MyriadPro-Bold.woff);
}

@font-face{
    font-family: Myriad-BoldCond;
    src: url(MyriadPro-BoldCond.woff);
}

@font-face{
    font-family: Myriad-Cond;
    src: url(MyriadPro-Cond.woff);
}

@font-face{
    font-family: Myriad-Reg;
    src: url(MyriadPro-Regular.woff);
}

* {
    box-sizing: border-box;
    font-family: Myriad-Reg;
}

h2 {
    font-size: 20px;
    font-family: Myriad-Bold;
    color: #036;
    font-weight: 100;
    margin: 10px 0;
}
    h2 a:link{
        font-size: 20px;
    }
    h2 i {
        font-family: Myriad-Bold;
        font-weight: inherit;
    }


h3 {
    font-size: 16px;
    font-family: Myriad-Bold;
    color: #369;
    font-weight: 100;
    margin: 4px 0;
}
    h3 a:link{
        font-size: 16px;
    }
    h3 i {
        font-family: Myriad-Bold;
        font-weight: inherit;
    }

a:link, a:visited {
    color: #036;
    font-weight: bold;
}
a:hover, a:active {
    color: #369;
}


i {
    font-style: italic;
    font-size: inherit;
    font-weight: inherit;
}

.study h2 {
    font-size: 18px;
    font-family: Myriad-Bold;
    margin: 3px 0 3px 0;
    color: #369;
}

.subheader {
    float: left; font-size: 22px;
    font-family: ComicSans-Bold;
    font-weight: 100;
    color: #036;
    text-shadow: 2px 2px 3px #aaa;
    width: 100%;
    padding: 0;
    margin: 0;
    border-top: solid 2px #036;
}

em { font-size: inherit; font-weight: inherit; font-family: inherit;}

p {
    font-size: 14px;
}

table {
    margin: 0;
    border-collapse: collapse;
    padding: 0;
    border: none;
    font-size: 12px;
    min-width: 100px;
    width: 100%;
}
th, thead {
    background-color: #369;
    color: #fff;
    font-family: Myriad-Bold;
    font-weight: normal;
    padding: 2px 2px;
    border: solid 1px #369;
}
tbody { border: none; font-family: Myriad-Reg;}

td {
    border: none;
    border-bottom: solid 1px #888;
    padding: 2px 2px;
}


.col-1 {width: 8.33%; float: left; position: relative; }
.col-2 {width: 16.66%; float: left; position: relative; }
.col-24 {width: 20%; float: left; postion: relative;}
.col-3 {width: 25%; float: left; position: relative; }
.col-4 {width: 33.33%; float: left; position: relative; }
.col-5 {width: 41.66%; float: left; position: relative; }
.col-6 {width: 50%; float: left; position: relative;}
.col-7 {width: 58.33%; float: left; position: relative; }
.col-8 {width: 66.66%; float: left; position: relative; }
.col-9 {width: 75%; float: left; position: relative; }
.col-10 {width: 83.33%; float: left; position: relative; }
.col-11 {width: 91.66%; float: left; position: relative; }
.col-12 {width: 100%; float: left; position: relative; }
.col-auto { width: auto; float: left; position: relative; }
.col {
    max-width: 48%;
}
.colAuto { position: relative; width: auto; }

@media  only screen and (max-width: 500px){
    [class*="col-"] {
        width: 100%;
    }
    .graphic {
        width: 100%;
    }
    .col {
        width: 100%;
    }
}

.fl_rt { float: right; padding-left: 8px;}
.fl_lt { float: left; padding-right: 8px;}
.fl_ct { margin: 0 auto; text-align: center; }
.right { text-align: right; }
.left { text-align: left; }
.centre { text-align: center; }
.pad_top_4 { padding-top: 4px; }
.pad_top_20 { padding-top: 20px; }
.pad_bottom_20 { padding-bottom: 20px; }
.pad_right_10 { padding-right: 10px; }
.pad_left_20 { padding-left: 20px; }
.margin_top_4 { margin-top: 4px; }
.margin_left_8 { margin-left: 8px; }
.top_line { border-top: solid 1px #369; margin-top: 8px; padding-top: 4px; }
.top_line2 { border-top: solid 2px #036; margin-top: 8px; padding-top: 4px; }
.bottom_line { border-bottom: solid 1px #ccc; }
.rt_line { border-right: solid 1px #369; margin-right: 4px; padding-right; 4px; }
.comment {font-size: 11px; line-height: 13px; font-style: italic; }

ol {
    margin-left: 10px;
}


/* Display Div border styles */
.brd_top_1{ border-top: solid 1px #369; }
.brd_top_2{ border-top: solid 2px #369; }
.brd_bot_1{ border-bottom: solid 1px #369; }
.brd_bot_2{ border-bottom: solid 2px #369; }


strong {
    font-family: Myriad-Bold;
    font-weight: normal;
}

.border_none{
    border: none;
}
.photo_border_thin {
    border: solid 1px #000;
}
.quiz li {
    list-style-type: lower-alpha;
    margin-top: 12px;
}

.quizAns {
     position: absolute;
     border: solid 2px #369;
     background-color: #fff;
     box-shadow: 2px 2px 2px #555;
     padding: 10px 30px;
     width: 80%;
     left: 300px;
     bottom: 100px
}

.quizButs{
    font-family: Myriad-Reg;
}
    .quizButs a{
        text-decoration: none;
    }

note:defined {
    font-weight: bold;;
    color: Chocolate;
}
.note{
    font-weight: bold;
    color: Chocolate;
}

fig_caption:defined{
    float: left;
    font-size: 12px;
    color: #666;
    padding: 0 2% 0 3px;
}
.fig_caption {
    float: left;
    font-size: 12px;
    color: #666;
    padding: 0 2% 0 3px;
    margin-bottom: 6px;
}
.caption {
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
    color: #666;
    padding: 0 2% 0 3px;
    margin-bottom: 6px;
}
    .caption em {
        font-size: 12px;
        font-weight: inherit;
        font-family: inherit;
    }

.courtesy {
    font-size: 10px;
    color: #000;
    text-align: right;
    padding-right: 2px;
}
courtesy:defined {
    font-size: 10px;
    color: #000;
    text-align: right;
    padding-right: 2px;
}


.blueDotNum{
    width: 30px;
    height: 30px;
    background-color: #4B00E1;
    color: #fff;
    font-size: 18px;
    text-align: center;
    border-radius: 10px;
}

blueDotNum:defined{
    width: 30px;
    height: 30px;
    background-color: #4B00E1;
    color: #fff;
    font-size: 18px;
    text-align: center;
    border-radius: 10px;
}


thead {
    background-color: #369;
    color: #fff;
    font-weight: bold;
}

.keywords {
    font-size: 12px;
    line-height: 12px;
    font-style: italic;
}
.bot_border_none{
    border-bottom: none;
}

.credit {
    font-size: 12px;
}

.redX {
    font-family: ComicSans-Bold;
    color: #c00;
    font-size: larger;
    text-shadow: 2px 2px 2px #444;
}

.intro { /* blockType class */
    font-family: Myriad-Reg;
    color: #000;
    font-size: 14px;
    margin: 4px 0;
    padding: 4px 0;
    text-shadow: none;
}
.study { /* blockType class */
    margin: 8px 0;
    border-top: solid 2px #369;
    font-size: 14px;
}
    .study ol, ul{
        padding-left: 60px;
    }


/* BUTTON STYLES */

.btn {
    border: none;
    color: #fff;
    font-weight: bold;
    background-color: #369;
    cursor: pointer;
    margin: 0px 2px 2px 0px;
    padding: 0 3px 2px 3px;
}
    .btn:hover{
        background-color: #036;
        box-shadow: 2px 2px 2px #666;
    }

.btn_edit{
    background-color: #497463;
}

.btn_cancel{
    background-color: #7d405f;
}

.btn_del{
    background-color: #6c2828;
}

.btn_add{
    background-color: #4a417c;
}