/*
 *
 * HQ FRONT PAGE DESIGN
 * Version 2.0
 * April 2011
 *
 * This document will modify (over-write) pre-existing style definitions in the
 * main style page (style.css)
 *
 */

/*
 * Site Header - Aligning top navigation to the left
 */

#noaa-nav {
    left: 0;
    width: 100%;
}

    #noaa-nav a {
        margin: 9px 8px;
    }

.inline-list ul {
    text-align: left;
}

/* New top right site search */
.top_search {
    background: url("../images_template/tsearch_bg.png") no-repeat scroll 0 0 transparent;
    border: 1px solid #003C79;
    height: 21px;
    overflow: hidden;
    width: 242px;
    margin: 5px 3px;
    position: absolute;
    right: 0px;
    box-sizing: initial;
}

    .top_search #txtSearch {
        background: none repeat scroll 0 0 transparent;
        border: none;
        height: 22px;
        margin: 0;
        padding: 0 4px;
        width: 185px;
        position: absolute;
        left: 0;
    }

    /*-Ian*/
    .top_search #submitSearch {
        padding: 1px 6px 1px 0;
    }

    .top_search #submit-btm {
        background: url("../images_template/search_submit.png") no-repeat scroll 0 0 transparent;
        border: none;
        cursor: pointer;
        font-weight: bold;
        margin: 0 0 0 4px;
        padding: 0 0 3px 19px;
        text-indent: -9999px;
        width: 46px;
        line-height: 21px;
        height: 21px;
    }

/* Green Seperator, without search and a bit thinner */
.green_seperator {
    background-color: #a7daf5;
    clear: both;
    height: 10px;
}

.bottom-clear {
    height: 14px;
    clear: both;
}

.contentBody {
    width: 771px;
    float: left;
}

.left-side {
    margin-right: 10px;
    padding: 0px 1px 0 0;
    width: 185px;
    background: none;
    float: left;
    box-sizing: initial;
}

    .left-side .vcard {
        font-style: normal;
    }
    /*
 * Left Navigation
 */

    /*jquery-ui reset*/
    .left-side .ui-menu {
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

        .left-side .ui-menu .ui-menu-icon {
            background-image: url('/images_template/closedArrow.png') !important;
            background-position: center;
            position: absolute;
            right: 4px;
            left: auto;
            /*float: right;*/
            top: auto;
            bottom: auto;
        }

        .left-side .ui-menu .ui-menu-item ul {
            position: absolute;
        }

    .left-side .ui-state-focus {
    }


.left_navigation {
    color: #092667;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: normal;
    list-style: none
    margin: 0;
    padding: 0;
    width: 185px; /*-Ian*/
    position: relative;
    float: none !important;
}

    .left_navigation li.ui-menu-item {
        
        margin: 0 !important;
        border: 0 !important;
        padding: 0;
        background-image: url("../images_template/button_unselected.jpg") !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat;
        vertical-align: middle;
        display: table !important;
        min-height: 32px;
        background-color: #003C79;
        border-collapse: collapse;
        float: none !important;
        position: relative;
        width: 100%;
    }

        .left_navigation li ul li {
            width: 169px !important;
            background-color: #003C79;
            background-image: none;
        }

        .left_navigation li a, .left_navigation .ui-menu-item a {
            border-color: #003C79;
            border-style: solid;
            border-width: 1px 0 0;
            color: #FFFFFF;
            display: table-cell !important;
            font-family: Arial;
            font-size: 12px;
            font-weight: bold !important;
            padding: 8px 10px 8px 8px !important;
            box-sizing: border-box !important;
            background-color: transparent !important;
            background-image: none !important;
            vertical-align: middle;
        }

            .left_navigation li a:hover, .left_navigation .m_active, .left_navigation .ui-menu .ui-state-focus, .left_navigation li ui-state-active {
                border-color: #003C79 !important;
                border-style: solid !important;
                border-width: 1px 0 0 !important;
                color: #FFE090 !important;
                font-weight: bold;
                background-image: none !important;
            }

    .left_navigation .ui-state-active, .left_navigation .ui-widget-content .ui-state-active, .left_navigation .ui-widget-header .ui-state-active {
        background-image: none !important;
        border-color: #003C79 !important;
        border-style: solid !important;
        border-width: 1px 0 0 !important;
        color: white !important;
        font-weight: bold !important;
        margin: 0 !important;
    }

    .left-side .ui-menu .ui-menu-item ul li a, .left_navigation li ul li a {
        font-weight: normal !important;
    }

        .left_navigation li ul li a:hover, .left_navigation li ul li a.ui-state-active {
            background-color: #024487 !important;
            font-weight: normal !important;
        }

    .left_navigation ul {
        background-color: #003C79;
        border: 1px none #999999;
        margin: 0;
        padding: 10px 0;
        display: block;
    }

    .left_navigation.box_three {
        margin-top: 10px;
    }

        .left_navigation.box_three li {
            background-image: url("../images_template/button_selected.jpg");
        }

        .left_navigation.box_three ul li {
            background: none;
        }

    .left_navigation li.parentClose ul a {
        background: none;
    }

    .left_navigation li.parentOpen ul a {
        background: none;
    }


/*
 * News Letter Signup
 */
#newsletter {
    background: url("../images_template/news_signup_bg.jpg") no-repeat scroll 12px 4px #E7E3D7;
    margin-top: 10px;
}

    #newsletter h3 {
        margin: 0;
        padding: 4px 6px;
    }

    #newsletter p {
        font-size: 12px;
        margin-top: 0;
        padding-bottom: 7px;
        padding-left: 6px;
        width: 130px;
    }

    #newsletter a {
        color: #00968A;
        font-weight: bold;
    }

/*
 * Main Area
 */

#center {
    width: 771px;
    margin: 0;
}

/*
 * Main Slide Show Styles
 */
#slide_show h2, #slide_show p, #slide_show ul, #slide_show li {
    margin: 0;
    padding: 0;
}

#slide_show {
    width: 771px;
    height: 430px;
    background: #21497d;
    margin: 2px 0 0 0;
    position: relative;
}

    #slide_show ul {
        position: relative;
        list-style: none;
    }

    #slide_show li {
        width: 771px;
        height: 430px;
        position: absolute;
        top: 0;
        left: 0;
    }

    #slide_show .slider_image a {
        color: #fff;
        font-weight: bold;
        text-decoration: none;
    }

        #slide_show .slider_image a:hover {
            color: #fff;
            font-weight: bold;
            text-decoration: underline;
        }

    #slide_show .slider_image {
        width: 771px;
        height: 378px;
        position: relative;
    }

        #slide_show .slider_image h2 {
            background: url("../images_template/slider_title_bg.png") repeat-x scroll 0 0 transparent;
            color: #F8EAA2;
            font-size: 28px;
            height: 69px;
            line-height: 69px;
            padding-left: 25px;
            position: absolute;
            top: 269px;
            width: 746px;
        }

            #slide_show .slider_image h2 a, #slide_show .slider_image h2 a:hover {
                color: inherit;
                text-decoration: none;
            }

        #slide_show .slider_image p {
            margin: 0;
            padding: 0;
            position: absolute;
            top: 378px;
            color: #fff;
            height: 53px;
            line-height: 18px;
            padding: 7px;
            overflow: hidden;
            font-size: 12px;
            font-weight: bold;
        }

    #slide_show #number_menu {
        height: 47px;
        overflow: hidden;
        position: absolute;
        width: 761px;
        padding-right: 10px;
    }

        #slide_show #number_menu a {
            background: none repeat scroll 0 0 #2C65AA;
            color: #FFFFFF;
            display: block;
            float: right;
            font-weight: bolder;
            height: 24px;
            line-height: 24px;
            margin-right: 4px;
            margin-top: 11px;
            text-align: center;
            width: 24px;
        }

            #slide_show #number_menu a.active_t, #slide_show #number_menu a:hover {
                background: #133968;
            }

/*
 * Latest News + Regions
 */

#latest_news, #regions {
    background: #e9e9ce url(../images_template/mid_sec_bg.jpg) repeat-x;
    height: 210px;
    float: left;
}

#latest_news {
    width: 283px;
}

    #latest_news h2 {
        margin: 10px 7px 5px;
    }

    #latest_news dt {
        color: #092667;
        float: left;
        font-size: 11px;
        font-weight: bold;
        width: 65px;
    }

    #latest_news dl {
        margin: 0 7px;
    }

    #latest_news dd {
        margin-left: 65px;
        padding: 0 5px;
    }

        #latest_news dd a {
            font-size: 11px;
        }

.stay_connected {
    border: 0 none;
    float: left;
    margin: 11px;
}

#latest_news .more {
    color: #00968A;
    float: left;
    font-size: 11px;
    font-weight: bold;
    margin-top: 26px;
    text-align: right;
    width: 140px;
}

    #latest_news .more a {
        font-size: 11px;
    }


#regions {
    width: 484px;
    margin-right: 4px;
}

/* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */
.easy-accordion {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

    .easy-accordion dt, .easy-accordion dd {
        margin: 0;
        padding: 0;
    }

    .easy-accordion dt, .easy-accordion dd {
        position: absolute;
    }

    .easy-accordion dt {
        margin-bottom: 0;
        margin-left: 0;
        z-index: 5; /* Safari */
        -webkit-transform: rotate(-90deg); /* Firefox */
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: 20px 0px; /* Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        cursor: pointer;
    }

    .easy-accordion dd {
        z-index: 1;
        opacity: 0;
        overflow: hidden;
    }

        .easy-accordion dd.active {
            opacity: 1;
        }

        .easy-accordion dd.no-more-active {
            z-index: 2;
            opacity: 1;
        }

        .easy-accordion dd.active {
            z-index: 3;
        }

        .easy-accordion dd.plus {
            z-index: 4;
        }

    .easy-accordion .slide-number {
        position: absolute;
        bottom: 0;
        left: 10px;
        font-weight: normal;
        font-size: 1.1em; /* Safari */
        -webkit-transform: rotate(90deg); /* Firefox */
        -moz-transform: rotate(90deg); /* Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }


/* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */
dd p {
    line-height: 120%;
}

#regions-accordion h2 {
    margin: 10px 0 5px;
}

#regions-accordion {
    width: 470px;
    height: 160px;
    padding: 0px 7px;
}

    #regions-accordion dl {
        width: 470px;
        height: 160px;
    }

    #regions-accordion dt {
        background: url("../images_template/tab_bg.jpg") repeat-y scroll 0 0 transparent;
        color: #FFFFFF;
        font-family: arial;
        font-size: 14px;
        font-weight: bold;
        height: 24px;
        line-height: 24px;
        padding: 7px 16px 0 0;
        text-align: left;
        text-indent: 9px;
        border-bottom: 1px solid #FFFFFF;
        border-top: 1px solid #FFFFFF;
    }

        #regions-accordion dt.active {
            cursor: default;
            color: #fff;
            background: #b8ae71;
        }

        #regions-accordion dt.hover {
            color: #68889b;
        }

        #regions-accordion dt.active.hover {
            color: #fff;
        }

    #regions-accordion dd {
        border: 1px solid #dbe9ea;
        border-left: 0;
        margin-right: 3px;
    }

    #regions-accordion .slide-number {
        color: #68889b;
        left: 10px;
        font-weight: bold;
    }

    #regions-accordion .active .slide-number {
        color: #fff;
    }

    #regions-accordion a {
        color: #FFFFFF;
        font-size: 10px;
        margin: 0;
        padding: 0;
        text-decoration: underline;
    }

        #regions-accordion a:hover {
            color: #fff;
        }

    #regions-accordion dd img {
        float: right;
        margin: 0 0 0 30px;
        position: relative;
        top: -20px;
    }

    #regions-accordion dd p {
        color: #FFFFFF;
        font-size: 10px;
        margin: 0 0 0 8px;
        padding: 0;
    }

    #regions-accordion dd h2 {
        color: #FFFFFF;
        font-size: 16px;
        margin-left: 8px;
        margin-top: 118px;
        margin-bottom: 0;
    }

.alaska {
    background: url(../images_template/rg_alaska.jpg);
}

.northwest {
    background: url(../images_template/rg_northwest.jpg);
}

.pacific {
    background: url(../images_template/rg_pacific.jpg);
}

.southwest {
    background: url(../images_template/rg_southwest.jpg);
}

.southeast {
    background: url(../images_template/rg_southeast.jpg);
}

.northeast {
    background: url(../images_template/rg_northeast.jpg);
}

#fishwatch_box, #featured_image, #featured_video {
    float: left;
}

    #fishwatch_box h2, #featured_image h2, #featured_video h2 {
        margin: 10px 7px 5px;
    }


#fishwatch_box {
    width: 240px;
    background: url(../images_template/fishwatch_logo.jpg) no-repeat right bottom;
}

    #fishwatch_box p.txt {
        font-size: 100%;
        height: 129px;
        margin: 0 7px;
        overflow: hidden;
        width: 146px;
        text-indent: -9999px;
    }

#featured_image {
    width: 250px;
    margin-bottom: 10px;
}

    #featured_image .image_wrap {
        /*background: url(../images_template/featured_img_bg.jpg) no-repeat;*/
        width: 200px;
    }

    #featured_image img {
        width: auto;
        height: 100%;
    }

    #featured_image .image_wrap span {
        display: block;
        overflow: hidden;
        padding: 5px 0 0 6px;
        width: 200px;
        height: 214px;
    }

#featured_video {
    width: 265px;
}

    #featured_video img {
        margin: 0px 7px;
        border: 0;
    }

.homePlayer {
    height: 120px;
    margin: 6px 7px 5px;
}


/* Hybrid 3 Column Template */

.slider_image {
    background-size: cover !important;
}

.midGrid {
    border: 1px solid #CACACA;
    margin-top: 10px;
    min-height: 265px;
}

    .midGrid > div {
        float: left;
        width: 50%;
        box-sizing: border-box;
    }

    .midGrid h1, .midGrid h1 a {
        background: #2C65AA;
        color: white;
        font-weight: bold;
        font-size: 13px;
        padding: 6px 10px 8px 4px;
        border-bottom: 1px solid #CACACA;
        margin: 0;
        text-align: center;
    }

    .midGrid h2, .midGrid h2 a {
        background: #003C79;
        color: white;
        font-weight: bold;
        font-size: 14px;
        padding: 7px 10px 8px 5px;
        border-bottom: 1px solid #CACACA;
        margin: 0;
        text-align: center;
    }

    .midGrid div:first-child h2 {
        border-right: 1px solid #CACACA;
    }

    .midGrid div:nth-child(2) h2 {
        border-left: 1px solid #CACACA;
    }

    .midGrid a {
        font-size: 13px;
        font-weight: bold;
    }

    .midGrid dl {
        margin: 5px 10px 5px;
        display: table;
        height: 223px;
    }

        .midGrid dl dt {
            display: table-row;
        }

            .midGrid dl dt a {
                display: table-cell;
                vertical-align: middle;
            }

            .midGrid dl dt img {
                width: 64px;
                height: 64px;
                margin: 0 15px 0 0;
                vertical-align: middle;
            }

        .midGrid dl dd {
            margin: 0;
        }

    .midGrid li {
        margin: 0 10px 6px;
        list-style-type: none;
    }

    .midGrid ul {
        margin: 7px 0;
        padding: 0;
        list-style-type: none;
        text-align: center;
    }

.imageGrid {
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 !important;
    height: 233px;
}

    .imageGrid li {
        margin: 0 10px;
    }

        .imageGrid li div {
            display: table;
            box-sizing: border-box;
            width: 100%;
            text-align: left;
            vertical-align: middle;
            height: 84px;
            border-bottom: 1px solid #CACACA;
            padding: 3px 3px;
        }

        .imageGrid li:last-child div {
            border: none;
        }

        .imageGrid li div a {
            display: table-cell;
            vertical-align: middle;
            width: 100%;
        }

.midGrid img {
    display: table-cell;
    width: 120px;
    padding: 3px 10px 3px 0;
    height: 70px;
}

.lastmodified {
    font-size: 10px;
    margin-top: 8px;
    clear: both;
}