/*
                                __      _ _                   _   
                               / _|    | (_)                 | |  
 _ __ ___   __ _ _ __ ___ ___ | |_ ___ | |_  ___   _ __   ___| |_ 
| '_ ` _ \ / _` | '__/ __/ _ \|  _/ _ \| | |/ _ \ | '_ \ / _ \ __|
| | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | |  __/ |_ 
|_| |_| |_|\__,_|_|  \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__|
                                                                  
*/



/* BASIC RESET */
ul, ol, li, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
    margin: 0;
    padding: 0;
}

#top-header {
    /*
    -moz-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: gray(100%);
    filter: grayscale(100%);
    */
} 


/* HTML ELEMENTS */ 

h1 {
    font-family: circularbold, tahoma, arial, verdana, sans-serif;
    color: #000;
    font-size: 27px;
    line-height: 29px;
    letter-spacing: 0px;
    padding: 0px;
}

    h1 small {
        font-size: 24px;
        display: block;
        color: #636363;
    }

h2 {
    font-family: circularbold, tahoma, arial, verdana, sans-serif;
    color: #000;
    font-size: 24px;
    line-height: 27px;
    letter-spacing: 0px;
    padding: 0px;
}

h3 {
    font-family: circularbold, tahoma, arial, verdana, sans-serif;
    color: #000;
    font-size: 21px;
    line-height: 25px;
    letter-spacing: 0px;
    padding: 0px;
}

#comment_message {
    background-color: #ffffff;
    background-image: none;
    color: #333333;
}

.mcetiny {
    font-size: 17px;
    padding: 4px;
    background-color: #ffffff;
}

.txtbox {
    padding: 4px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #ffffff;
}

.border-it img {
    border-style: solid;
    border-width: 2px;
    border-color: #e0e0e0;
    border-radius: 5px;
}
    .border-it img:hover {
        border-style: solid;
        border-width: 2px;
        border-color: #aaaaaa;
        border-radius: 5px;
    }


/* COMMON CLASSES */
.break {
    clear: both;
}



/* destop computer and labtop computer */
@media (min-width: 451px) {
    body { width: 900px; margin: 0 auto; }

    img {
        max-width: 98%;
        height: auto;
        border-radius: 5px;
    }

    iframe {
        max-width: 96%;
    }

    table {
        max-width: 100%;
    }

    .info-font {
        font: normal 14px circularregular, tahoma, arial, verdana, sans-serif;
        color: #999999;
    }

    .container1 {
        margin: 0 auto;
        width: 900px;
        display: table;
        border-spacing: 4px;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.8);
    }

    .container1_table {
        width: 100%;
        padding: 4px;
        border-width: 0px;
        border-style: dashed;
        border-color: #cccccc;
        margin-bottom: 4px;
    }

    .container2 { margin: 0 auto; width:900px; display:table; border-spacing:4px; border-radius:5px; background-color: rgba(255, 255, 255, 0.8);}
    .container2_row { display:table-row; }    
    .left65-35 { display:table-cell; width: 50%;padding:4px; border-width:0px;border-style:dashed;border-color:#fdb900;border-radius:0px; }
    .right65-35 { display:table-cell; width: 50%;padding:4px; border-width:0px;border-style:dotted;border-color:#cccccc;border-radius:0px;border-left-width:1px; }

    .cont3 {
        margin: 0 auto;
        width: 98%;
        display: table;
        border-spacing: 4px;
        border-radius: 5px;
        border-width: 1px;
        border-style: dotted;
        border-color: #fdb900;
        background-color: rgba(0, 0, 0, 0.0);
    }

    .cont3_row {
        display: table-row;
    }

    .cont3_left {
        display: table-cell;
        width: 33.33%;
        padding: 4px;
        border-width: 0px;
        border-style: dashed;
        border-color: #fdb900;
        border-radius: 0px;
    }

    .cont3_mid {
        display: table-cell;
        width: 33.34%;
        padding: 4px;
        border-width: 0px;
        border-style: dotted;
        border-color: #cccccc;
        border-radius: 0px;
        border-left-width: 0px;
    }

    .cont3_right {
        display: table-cell;
        width: 33.33%;
        padding: 4px;
        border-width: 0px;
        border-style: dotted;
        border-color: #cccccc;
        border-radius: 0px;
        border-left-width: 0px;
    }

}

/* tablet  */
@media (min-device-width : 600px) and (max-device-width : 1024px) and (orientation : portrait) {

    body {
        width: 100%;
        margin: 0 auto;
    }

    img {
        max-width: 98%;
        height: auto;
        border-radius: 5px;
    }

    iframe {
        max-width: 96%;
    }

    table {
        max-width: 100%;
    }

    .info-font {
        font: normal 14px circularregular, tahoma, arial, verdana, sans-serif;
        color: #999999;
    }

    .container1 {
        margin: 0 auto;
        width: 98%;
        display: table;
        border-spacing: 4px;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.8);
    }

    .container1_table {
        width: 100%;
        padding: 4px;
        border-width: 0px;
        border-style: dashed;
        border-color: #cccccc;
        margin-bottom: 4px;
    }

    .container2 {
        margin: 0 auto;
        width: 98%;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.8);
    }

    .left65-35 {
        width: 50%;
        padding: 4px;
        border-width: 0px;
        border-style: dashed;
        border-color: #cccccc;
        margin-bottom: 4px;
    }

    .right65-35 {
        width: 50%;
        padding: 4px;
        border-width: 0px;
        border-style: dashed;
        border-color: #cccccc;
        margin-bottom: 4px;
    }

    .cont3 {
        margin: 0 auto;
        width: 98%;
        display: table;
        border-spacing: 4px;
        border-radius: 5px;
        border-width: 1px;
        border-style: dotted;
        border-color: #fdb900;
        background-color: rgba(0, 0, 0, 0.0);
    }

    .cont3_row {
        display: table-row;
    }

    .cont3_left {
        display: table-cell;
        width: 33.33%;
        padding: 4px;
        border-width: 0px;
        border-style: dashed;
        border-color: #fdb900;
        border-radius: 0px;
    }

    .cont3_mid {
        display: table-cell;
        width: 33.34%;
        padding: 4px;
        border-width: 0px;
        border-style: dotted;
        border-color: #cccccc;
        border-radius: 0px;
        border-left-width: 0px;
    }

    .cont3_right {
        display: table-cell;
        width: 33.33%;
        padding: 4px;
        border-width: 0px;
        border-style: dotted;
        border-color: #cccccc;
        border-radius: 0px;
        border-left-width: 0px;
    }
}

/* mobile */
@media (max-width:450px) {
    body { width: 100%; margin: 0 auto; }

    img {max-width:98%; height:auto;border-radius:5px;}
    iframe {max-width:96%; }
    table {max-width:100%;}

    .info-font {
        font: normal 14px circularregular, tahoma, arial, verdana, sans-serif;
        color: #999999;
    }

    .container1 {
        margin: 0 auto;
        width: 98%;
        display: table;
        border-spacing: 4px;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.8);
    }

    .container1_table {
        width: 100%;
        padding: 4px;
        border-width: 0px;
        border-style: dashed;
        border-color: #cccccc;
        margin-bottom: 4px;
    }

    .container2 { margin: 0 auto; width:98%; border-radius:5px; background-color: rgba(255, 255, 255, 0.8);}
        .left65-35 { width: 96%;padding:4px; border-width:0px;border-style:dashed;border-color:#cccccc;margin-bottom:4px; }
        .right65-35 { width: 96%;padding:4px; border-width:0px;border-style:dashed;border-color:#cccccc;margin-bottom:4px; }

    .cont3 {
        margin: 0 auto;
        width: 98%;
        display: table;
        border-spacing: 4px;
        border-radius: 5px;
        border-width: 1px;
        border-style: dotted;
        border-color: #fdb900;
        background-color: rgba(0, 0, 0, 0.0);
    }

    .cont3_row {
        display: table-row;
    }

    .cont3_left {
        display: table-cell;
        width: 33.33%;
        padding: 4px;
        border-width: 0px;
        border-style: dashed;
        border-color: #fdb900;
        border-radius: 0px;
    }

    .cont3_mid {
        display: table-cell;
        width: 33.34%;
        padding: 4px;
        border-width: 0px;
        border-style: dotted;
        border-color: #cccccc;
        border-radius: 0px;
        border-left-width: 0px;
    }

    .cont3_right {
        display: table-cell;
        width: 33.33%;
        padding: 4px;
        border-width: 0px;
        border-style: dotted;
        border-color: #cccccc;
        border-radius: 0px;
        border-left-width: 0px;
    }

}

body {
    font: normal 17px/23px circularregular, tahoma, arial, verdana, sans-serif;
    color: #333333;
    background: #cccccc;
    background-image: url("../images/PhoenixLogo_gray_small.gif");
}

table {
    font: normal 17px/23px circularregular, tahoma, arial, verdana, sans-serif;
    color: #333333;
}

a {
    text-decoration: none;
}

    a:link, a:visited {
        color: #1d64c1;
    }

    a:hover, a:active {
        color: #6687dd;
        text-decoration: underline;
    }

.imgbox {
    position: relative;
    display: inline-block; /* Make the width of box same as image */
}

    .imgbox .text {
        position: absolute;
        z-index: 999;
        margin: 0 auto;
        left: 0;
        bottom: 15px; /* Adjust this value to move the positioned div up and down */
        text-align: left;
        width: 86%; /* Set the width of the positioned div */
        color: #cdcdcd;
        padding: 4px;
        background: rgba(0, 0, 0, 0.4);
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
    }