html {
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font: normal 10pt 'Open sans', sans-serif;
    background: #F0EFE2;
    color: #000;
}

p {
    padding: 0 0 20px 0;
    line-height: 1.7em;
}

img {
    border: 0;
}

h1, h2, h3, h4, h5, h6 {
    font: normal 175% 'Open Sans', sans-serif;
    color: #43423F;
    margin: 0 0 15px 0;
    padding: 15px 0 5px 0;
}

h2 {
    font: normal 175% 'Open Sans', sans-serif;
    color: #43423F;
}

h3 {
    font: normal 140% 'Open Sans', sans-serif;
    color: #43423F;
}

h4, h5, h6 {
    margin: 0;
    padding: 0 0 5px 0;
    font: normal 120% 'Open Sans', sans-serif;
    color: #1293EE;
}

h5, h6 {
    font: italic 95% 'Open Sans', sans-serif;
    padding: 0 0 15px 0;
    color: #000;
}

h6 {
    color: #362C20;
}

a, a:hover {
    outline: none;
    text-decoration: underline;
    color: #A4AA04;
    color: steelblue;
}

    a:hover {
        text-decoration: none;
    }

tr {
    vertical-align: top;
}

.clear {
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
    width: auto;
    margin-left: 10px;
}

.center {
    display: block;
    text-align: center;
    margin: 20px auto;
}

blockquote {
    margin: 20px 0;
    padding: 10px 20px 0 20px;
    border: 1px solid #E5E5DB;
    background: #FFF;
}

ul {
    margin: 2px 0 22px 17px;
}

    ul li {
        list-style-type: circle;
        margin: 0 0 6px 0;
        padding: 0 0 4px 5px;
    }

ol {
    margin: 8px 0 22px 20px;
}

    ol li {
        margin: 0 0 11px 0;
    }

#main, #logo, #menubar, #site_content, #footer, #flyer {
    margin-left: auto;
    margin-right: auto;
}

#header {
    background: #29425E;
    height: 200px;
}


#logo {
    width: 825px;
    position: relative;
    height: 128px;
    background: #667F03 url(../../images/logo.png) no-repeat;
}

    #logo #logo_text {
        position: absolute;
        top: 20px;
        left: 0;
    }

    #logo h1, #logo h2 {
        font: normal 300% 'century gothic', arial, sans-serif;
        border-bottom: 0;
        text-transform: none;
        margin: 0;
    }

#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
    padding: 22px 0 0 0;
    color: #FFF;
    letter-spacing: 0.1em;
    text-decoration: none;
}

    #logo_text h1 a .logo_colour {
        color: #CDF63E;
    }

#logo_text h2 {
    font-size: 100%;
    padding: 4px 0 0 0;
    color: #DDD;
}

#menubar {
    width: 877px;
    height: 72px;
    padding: 0;
    background: #29415D url(../../images/menu.png) repeat-x;
}

ul#menu, ul#menu li {
    float: left;
    margin: 0;
    padding: 0;
}

    ul#menu li {
        list-style: none;
    }

        ul#menu li a {
            letter-spacing: 0.1em;
            font: normal 100% 'lucida sans unicode', arial, sans-serif;
            display: block;
            float: left;
            height: 37px;
            padding: 29px 26px 6px 26px;
            text-align: center;
            color: #FFF;
            text-transform: uppercase;
            text-decoration: none;
            background: transparent;
        }

            ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover {
                color: #FFF;
                background: #1C2C3E url(../../images/menu_select.png) repeat-x;
            }

#site_content {
    width: 837px;
    overflow: hidden;
    margin: 0 auto 0 auto;
    padding: 6px 24px 20px 37px;
    background: #FFF url(../../images/content.png) repeat-y;
}

.body_content {
    padding: 0 0 0 20px;
}

.sidebar {
    float: right;
    width: 190px;
    padding: 0 15px 20px 15px;
}

    .sidebar ul {
        width: 178px;
        padding: 4px 0 0 0;
        margin: 4px 0 30px 0;
    }

    .sidebar li {
        list-style: none;
        padding: 0 0 7px 0;
    }

        .sidebar li a, .sidebar li a:hover {
            padding: 0 0 0 40px;
            display: block;
            background: transparent url(../../images/link.png) no-repeat left center;
        }

            .sidebar li a.selected {
                color: #444;
                text-decoration: none;
            }

#content {
    text-align: left;
    width: 595px;
    padding: 0;
}

    #content ul {
        margin: 2px 0 22px 0px;
    }

        #content ul li {
            list-style-type: none;
            background: url(bullet.png) no-repeat;
            margin: 0 0 6px 0;
            padding: 0 0 4px 25px;
            line-height: 1.5em;
        }

#footer {
    width: 878px;
    /*font: normal 100% 'lucida sans unicode', arial, sans-serif;*/
    height: 33px;
    padding: 16px 0 0px 0;
    text-align: center;
    background: #667F03;
    color: #FFF;
    font-weight:500;
    
    letter-spacing: 0.1em;
}

    #footer a {
        color: #FFF;
        text-decoration: none;
    }

        #footer a:hover {
            color: #FFF;
            text-decoration: underline;
        }

.search {
    color: #5D5D5D;
    border: 1px solid #BBB;
    width: 134px;
    padding: 4px;
    font: 100% arial, sans-serif;
}

#colours {
    height: 0px;
    text-align: right;
    padding: 66px 16px 0px 300px;
}

.separator {
    width: 100%;
    height: 0;
    border-top: 1px solid #D9D5CF;
    border-bottom: 1px solid #FFF;
    margin: 0 0 20px 0;
}


#masthead_content {
    width: 861px;
    overflow: hidden;
    margin: 0 auto 0 auto;
    padding: 0px 0px 10px 37px;
    background: #FFF url(../../images/content.png) repeat-y;
}


#header_divider {
    width: 868px;
    margin: 0 auto 0 auto;
    border-top: 1px solid #777;
    height: 1px;
}

.divider {
    width: 868px;
    height: 1px;
    border-top: 1px solid #777;
}

.top_header {
    background: #667F03;
    height: 91px;
}

.top_line {
    width: 879px;
    height: 91px;
    background: #667F03 url(../../images/txdotheadingnew.png) no-repeat; /* #29425E; */
    margin-left: auto;
    margin-right: auto;
}


.top_header_narrow {
    background: #667F03;
    height: 41px;
}

.top_line_narrow {
    width: 879px;
    height: 41px;
    background: #667F03 url(../../images/txdotheadingnarrownew.png) no-repeat;
    margin-left: auto;
    margin-right: auto;
}



.text11box {
    width: 240px;
    font-size: 11pt;
    padding: 4px;
    border: 1px solid #ccc;
}

.table_header {
    background: #e0e4d2;
    /*color: #000;*/
    padding: 8px 4px 7px 4px;
    text-align: left;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 14px;
}

.table_column, .table_column_correction {
    background: #F0EFE2;
    color: #000;
    padding: 5px 4px;
    text-align: left;
}

.table_column_correction {
    background: #fee;
}

a.top_menu, a.top_menu:hover {
    outline: none;
    text-decoration: none;
    font-size: 10pt;
    color: #222;
}

    a.top_menu:hover {
        color: #005090;
        text-decoration: underline;
    }

a.top_name, a.top_name:hover {
    outline: none;
    text-decoration: none;
    font-size: 10pt;
    color: #555;
}

    a.top_name:hover {
        color: #747A04;
        text-decoration: underline;
    }




a.blue, a.blue:hover {
    outline: none;
    text-decoration: underline;
    font-size: 11pt;
    color: #1293EE;
}

    a.blue:hover {
        color: #1293EE;
        text-decoration: none;
    }

a.darkerblue, a.darkerblue:hover { outline: none; text-decoration: underline; font-size: 11pt; color: #1273BE; }
    a.darkerblue:hover { color: #1263AE; text-decoration: none; }

/*    a.darkerblue, a.darkerblue:hover {
        outline: none;
        text-decoration: underline;
        font-size: 11pt;
        color: steelblue;
    }

        a.darkerblue:hover {
            color: #12539E;
            text-decoration: none;
        }*/



a.bluereverse, a.bluereverse:hover {
    outline: none;
    text-decoration: none;
    font-size: 11pt;
    color: #1293EE;
}

    a.bluereverse:hover {
        color: #1293EE;
        text-decoration: underline;
    }

a.gold, a.gold:hover {
    outline: none;
    text-decoration: none;
    font-size: 11pt;
    color: #A4AA04;
}

    a.gold:hover {
        color: #A4AA04;
        text-decoration: underline;
    }


.label {
    font-weight: bold;
}

.value {
    color: #666;
}


.button {
    background: #00a6fc;
    display: inline-block;
    text-align: center;
    padding: 9px 32px 9px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
    font-family: 'Open Sans', sans-serif;
    position: relative;
    cursor: pointer;
    border: none;
    border-radius: 3px;
    outline:none;
}

    .button.nice {
        /*background: #00a6fc url(images/button-gloss.png) repeat-x 0 -34px;*/
        /*background: #00a6fc url(images/button-gloss.png) repeat-x 0 -34px, -moz-linear-gradient(top, rgba(255,255,255,.4) 0%, transparent 100%);
        background: #00a6fc url(images/button-gloss.png) repeat-x 0 -34px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.4)), color-stop(100%,transparent));*/
        /*-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);*/
        text-shadow: 0 -1px 1px rgba(0,0,0,0.28);
        border: 1px solid #0593dc;
        border-radius:3px;
        -webkit-transition: background-color .15s ease-in-out;
        -moz-transition: background-color .15s ease-in-out;
        -o-transition: background-color .15s ease-in-out;
    }

    .button.radius {
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }

    .button.round {
        -moz-border-radius: 1000px;
        -webkit-border-radius: 1000px;
        border-radius: 1000px;
    }

    .button.full-width {
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center;
    }

    .button.left-align {
        text-align: left;
        text-indent: 12px;
    }

    .button:active {
    }

/* Sizes ---------- */

.small.button {
    font-size: 11px;
    padding: 9px 20px;
    width: auto;
}

.medium.button {
    font-size: 12.5px;
    padding: 9px 32px;
    width: auto;
}

.large.button {
    font-size: 18px;
    padding: 12px 48px;
    width: auto;
}


.nice.small.button {
    background-position: 0 -36px;
}

.nice.medium.button {
    background-position: 0 -33px;
}

.nice.large.button {
    background-position: 0 -30px;
}


.blue.button {
    background-color: #00a6fc;
}

.red.button {
    background-color: #e91c21;
}

.white.button {
    background-color: #e9f9e9;
    color: #676;
}

.black.button {
    background-color: #141414;
}

.nice.blue.button {
    border: 1px solid #0593dc;
}

.nice.red.button {
    border: 1px solid #b90b0b;
}

.nice.white.button {
    border: 1px solid #cacaca;
    text-shadow: none !important;
}

.nice.black.button {
    border: 1px solid #000;
}

.button:hover {
    background-color: #0192dd;
    color: #fff;
}

.blue.button:hover {
    background-color: #0192dd;
}

.red.button:hover {
    background-color: #d01217;
}

.white.button:hover {
    background-color: #dadada;
    color: #333;
}

.black.button:hover {
    background-color: #000;
}

/*
.apply { background-color: #00BFFF !important; color: white; border-width: 1; }
    .apply:hover, apply:focus { color: white; background-color: #00AEEE !important; }*/

.placeholder {
    color: #aaa;
}

/* =====================
   Static Alerts (success, failure)
   ====================*/


div.alert-box {
    padding: 6px 7px;
    font-weight: 500;
    font-size: 12px;
    background: #eee;
    border: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 12px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    position: relative;
    display: none;
}

.alert-box.success {
    background-color: rgb(144, 205, 70, .2);
    color: #040;
}

.alert-box.warning {
    background-color: rgba(240, 0, 0, .1);
    color: #fff;
}

.alert-box.failure {
    background-color: rgba(240, 0, 0, .1);
    color: #700;
}

.alert-box a.close {
    color: #000;
    position: absolute;
    right: 4px;
    top: -3px;
    font-size: 18px;
    opacity: 0.7;
    padding: 4px;
    text-decoration: none;
}

    .alert-box a.close:hover {
        opacity: 1;
    }




/* =====================
   Toasts
   ====================*/

.alert-toast {
    z-index: 1200;
    display: inline-block;
    padding: 5px 24px;
    font-size: 13px !important;
    font-weight: 400;
    border-radius: 3px;
    border-width: 0px;
}

.alert-toast-absolute {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    /*right: 0;
    margin-left: auto;
    margin-right: auto;*/
    top: -50px;
    width: fit-content;
    min-width: 130px;
    text-align: center;
}

.alert-toast-success {
    background-color: forestgreen; 
    min-width: 160px; 
    padding: 7px 11px;
    color: white; 
    font-weight: 600;
    border: 1px solid green; 
    border-radius: 2px; 
    text-align: center; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.alert-failure {
    background-color: #DC143C;
    border-color: #DC143C;
    color: white;
}


/* =====================
   Crumbs
   ====================*/

.crumbs {
    height: 24px;
}

a.crumb, a.crumb:hover {
    margin: 0 6px;
    outline: none;
    text-decoration: underline;
    font-size: 11px;
    color: #999;
}

    a.crumb:hover {
        color: #222;
        text-decoration: underline;
    }

.crumb_end {
    margin: 0 6px;
    font-size: 11px;
    color: #444;
}

.highlight_normal {
    text-align: center;
    color: #000;
}


.highlight_green {
    color: Green;
    text-align: center;
}

.highlight_red {
    color: #b00;
    text-align: center;
}

.text_green {
    color: Green;
}

.text_red {
    color: Red;
}

.text_normal {
    color: black;
}


a.ccotab:link, a.ccotab:visited, a.ccotab:hover, a.ccotab:active {
    outline: none;
    color: #A4AA04;
    font-size: 11pt;
    border: 1px solid #bbb;
    font-weight: bold;
    padding: 5px 10px;
    background: #ffe;
    text-decoration: none;
}

a.ccotab:hover {
    border: 1px solid #777;
    color: #646A00;
    background: #ffc;
}

a.ccotab-selected:link, a.ccotab-selected:visited, a.ccotab-selected:hover, a.ccotab-selected:active {
    outline: none;
    text-decoration: none;
    font-size: 11pt;
    border: 1px solid #777;
    font-weight: bold;
    padding: 5px 10px;
    background: #ffe;
    color: #646A00;
    background: #ffc;
}

a.ccotab-selected:hover {
    border: 1px solid #333;
}


a.top_cco_selected, a.top_cco_selected:hover {
    outline: none;
    border: 1px solid #666;
    border-bottom: 0px solid #666;
    text-decoration: none;
    font-size: 13.5px;
    color: #333;
    padding: 5px 10px;
    margin: 0px;
}

    a.top_cco_selected:hover {
        color: #333;
        background: #F6F6E9;
        /*text-decoration:underline;*/
    }

a.top_cco, a.top_cco:hover {
    outline: none;
    border: 1px solid #666;
    text-decoration: none;
    font-size: 13.5px;
    color: #444;
    padding: 5px 10px 4px 10px;
    margin: 0px;
    background: #F0EFE2;
}

    a.top_cco:hover {
        color: #333;
        background: #fff;
        padding: 5px 10px;
        border-bottom: 0px solid #666;
        
    }



.col {
    background: white;
    text-align: center;
    padding: 2px 0 2px 0;
}

textarea {
    font-family: Arial, Verdana, sans-serif;
}

input[type=text], input[type=password], select, textarea {
    background: white;
    padding: 4px;
    outline: 0;
    border: 2px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    input[type=text]:focus, input[type=text]:active,
    input[type=password]:focus, input[type=password]:active,
    select:focus, select:active,
    textarea:focus, textarea:active {
        border: 1px solid #76a7ee;
        outline: 0;
        box-shadow: 0 0 0 0.16rem rgba(3, 100, 243, 0.25);
    }

input[type=checkbox] {
    width: 17px;
    height: 17px;
    accent-color: steelblue;
}

input[type='radio'] {
    width: 17px;
    height: 17px;
    accent-color: steelblue;
}

.error {
    color: crimson;
    padding: 3px 0;
    font-size: 12px;
    display: none;
}


.field-validation-error {
    color: crimson;
    padding: 3px 0;
    font-size: 12px;
}

.shadow {
    /*box-shadow: rgba(80, 80, 91, 0.2) 0px 7px 20px 0px;*/
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    background: #fff;
}

::placeholder {
    color: #999;
    opacity: 1; /* Firefox */
}

/* =====================
   Tooltips
   ====================*/

.tooltip {
    position: relative;
    display: inline-block;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 170px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 7px !important;
        position: absolute;
        z-index: 100;
        bottom: 115%; /* At the bottom of the tooltip */
        left: 50%;
        margin-left: -60px; /* Half of the width of the tooltip */
    }

        /*.tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;*/ /* At the top of the tooltip arrow */
            /*left: 42%;

            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #333 transparent transparent transparent;
        }*/

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

.menu-link {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    padding: 4px 9px 8px 9px;
    background: white; /*#F6F5E8*/
    display: block;
    border-bottom: 3px solid #ddd;
}

    .menu-link:hover, .menu-link.selected {
        border-bottom: 3px solid #667;
    }

    .menu-link:hover {
        color: #666;
    }