/* Theme Name: NCCOS
===Theme URI: http://coastalscience.noaa.gov/
===Description: Responsive Theme for National Centers for Coastal Ocean Science websites
===Author: NCCOS Staff
===Author URI: http://coastalscience.noaa.gov/
*/

/******Added to align RadGrid table content to left for easier reading*******/
.RadGrid .rgFilterRow td,
.RadGrid .rgRow td,
.RadGrid .rgAltRow td {
    text-align: left !important;
}

html {
    background: #E6EAEE;
    font-size: 62.5%;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: #f3f5f6;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: transparent;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.5em;
    color: #000;
}

/* ====Begin Portfolio speciffic styles================= */
#bubbleupform {
    background-color: #f3f5f6;
    padding: 20px 20px 80px 20px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

    #bubbleupform #buttons2right {
        float: right;
        display: block;
        clear: both;
        margin-right: 20px;
    }

    #bubbleupform .label {
        font-weight: bold;
        color: #1F2429;
    }

    #bubbleupform #approved.form-text,
    #bubbleupform input.form-text,
    #bubbleupform select.form-text,
    #bubbleupform textarea.form-text {
        display: block;
        padding: 5px;
        font-size: 14px;
        border: 1px solid #3E4C5B;
        background: #fff;
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
        -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

        #bubbleupform #approved.form-text:focus,
        #bubbleupform input.form-text:focus,
        #bubbleupform select.form-text:focus,
        #bubbleupform textarea.form-text:focus {
            border: 1px solid #52A8EC;
            border-color: rgba(82, 168, 236, 0.9);
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
            background: #fff;
        }

input#txtTitle {
    width: 95%;
}

#approved {
    width: 100px;
}
/*p#floatleft {
    float:left;
    margin-right:20px;
}*/
p.floatleft {
    float: left;
    display: block;
    margin-right: 50px;
}

#bubbleupform .floatleft {
    float: left;
    display: block;
    margin-right: 20px;
    width: 182px;
}

input#txtFiscalYear1, input#txtTotalAmount1,
input#txtFiscalYear2, input#txtTotalAmount2,
input#txtFiscalYear3, input#txtTotalAmount3,
input#txtFiscalYear4, input#txtTotalAmount4 {
    margin: 0px 0px;
}

textarea#txtProjectIdeaSummary, textarea#txtOutcomes {
    border: 1px solid #3E4C5B;
    width: 95%;
}

#bubbleupsummary_display_count,
#bubbleupsummary_word_left,
#bubbleupoutcomes_display_count,
#bubbleupoutcomes_word_left {
    color: red;
}

table#rblProjectApproved tr td {
    display: block;
}

#bubbleupform .alert {
    color: red;
}

.alert {
    color: red;
}
/**?**/
table#rblProjectApproved, table#rblEntryType {
    border: 2px solid red;
    width: 100px;
}
/*********** Grid Displays for admin and my projects view Styles Start **************/
/*#listgridstyle {
   background-color: #f3f5f6;
    padding:20px;
    -moz-border-radius: 6px;
	-o-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}*/
/** **/
.gridstyle {
    width: 100%;
    background-color: #fff;
    border: solid 1px #525252;
    border-collapse: collapse;
    margin: 5px 0 10px 0;
}

    /**  **/
    .gridstyle td {
        padding: 10px 8px;
        border: solid 1px #c1c1c1;
        color: #717171;
        font-size: 1.2em;
    }

#middle #content table#gvProjectList.gridstyle td a#hlProjectIdea,
#middle #content table#gvProjectList.gridstyle2 td a#hlProjectIdea,
#middle #content table#gvProjects.gridstyle td a#hlProjectIdea,
#middle #content table#gvProjects.gridstyle2 td a#hlProjectIdea {
    text-decoration: none !important;
    border-bottom: 0;
    line-height: 1.25;
}
/* #1F2429 background: #424242 url(../imgs/grid_style/grd_head.png) repeat-x top; */
.gridstyle th {
    padding: 10px 8px;
    color: #fff;
    background: #424242 url(../imgs/grid_style/grd_head.png) repeat-x top;
    border-left: solid 1px #525252;
    font-size: 1.2em;
}
/** a color: #c3c9f8; * a color: #E6EAEE; * dkyellow#FFCE3F ltyellow#FFE766 * a:hover color: #FFC**/
#middle #content .gridstyle th a {
    color: #FFE766;
    text-decoration: none;
    border-bottom: 1px solid #FFCE3F;
}

    #middle #content .gridstyle th a:hover {
        color: #FFCE3F;
        text-decoration: none;
        border-bottom: 1px solid #FFCE3F;
    }

.gridstyle .alt {
    background: #fcfcfc url(../imgs/grid_style/grd_alt.png) repeat-x top;
}
/*.gridstyle .pgr {background: #424242 url(../imgs/grid_style/grd_pgr.png) repeat-x top; }
#middle #content .gridstyle .pgr table { margin: 5px 0; }
#middle #content .gridstyle .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }   
#middle #content .gridstyle .pgr a { color: #c3c9f8; text-decoration: none; }
#middle #content .gridstyle .pgr a:hover { color: #FFC; text-decoration: none; }*/
#middle #content .gridstyle input#middleplaceholder_maincontent_grdProducts_ct102 {
    background-color: #55304D;
}
/*********** Grid Displays for admin and my projects view Styles End **************/

/*********** Grid Insert form Styles - Start **************/
.gridstyle2 {
    width: 100%;
    background-color: #fff;
    border: solid 1px #525252;
    border-collapse: collapse;
    margin: 5px 0 10px 0;
}

    .gridstyle2 td {
        padding: 10px 8px;
        text-align: left;
        border: solid 1px #c1c1c1;
        color: #717171;
        font-size: 1.2em;
    }

    .gridstyle2 th {
        padding: 10px 8px;
        text-align: left;
        color: #fff;
        background: #3A4D64 url(../imgs/tab_hover.gif) repeat-x top;
        /*background: #424242 url(../imgs/grid_style/grd_head.png) repeat-x top;*/
        border-left: solid 1px #525252;
        font-size: 1.2em;
    }

#middle #content .gridstyle2 th a {
    color: #FFE766;
    text-decoration: none;
    border-bottom: 1px solid #FFCE3F;
}

    #middle #content .gridstyle2 th a:hover {
        color: #FFCE3F;
        text-decoration: none;
        border-bottom: 1px solid #FFCE3F;
    }

.gridstyle2 .alt {
    background: #fcfcfc url(../imgs/grid_style/grd_alt.png) repeat-x top;
}

#middle #content .gridstyle2 th {
    color: #FFE766;
    text-decoration: none;
}
/*********** Grid Insert form Styles - End **************/

/***User Listview***/
table.userlistview > tbody {
    border-right: solid .5px #E6EAEE;
}

table.userlistview > thead > tr > th {
    text-align: left;
    color: #FFE766;
    background: #3A4D64 url(../imgs/tab_hover.gif) repeat-x top;
    border-left: solid 1px #525252;
}

table.userlistview > tbody > tr > td {
    border-left: solid .5px #E6EAEE;
}

    table.userlistview > tbody > tr > td > input#txtEmail,
    table.userlistview > tbody > tr > td > input#txtfname {
        border: 1px solid #3E4C5B;
        padding: 2px;
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
        -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    table.userlistview > tbody > tr > td > select {
        border: 1px solid #3E4C5B;
        padding: 2px;
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
        -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

        table.userlistview > tbody > tr > td > input:focus,
        table.userlistview > tbody > tr > td > select:focus {
            border: 1px solid #52A8EC;
        }

        table.userlistview > tbody > tr > td > select#ddlBranch {
            width: 220px;
        }

        table.userlistview > tbody > tr > td > select#List1,
        table.userlistview > tbody > tr > td > select#ddlEmpType {
            width: 70px;
        }

        table.userlistview > tbody > tr > td > select#rbtn_Employed {
            width: 50px;
        }

table.userlistview tfoot tr.foot td div.left {
    float: left;
    width: 50%;
    text-align: left;
}

table.userlistview tfoot tr.foot td div.right {
    float: right;
    width: 50%;
    text-align: right;
}

table.userlistview tfoot tr.foot td,
table.userlistview tfoot tr.foot td a {
    color: #FFE766 !important;
    border-bottom: none !important;
}

    table.userlistview tfoot tr.foot td div.left span#lvPager a:hover,
    table.userlistview tfoot tr.foot td div.left span#lvPager span.activeitem {
        color: #FFCE3F !important;
        border-bottom: solid 1px #FFCE3F !important;
        font-weight: bold;
    }

table.userlistview tfoot tr.foot td {
    background: #3A4D64 url(../imgs/tab_hover.gif) repeat-x top;
}

    table.userlistview tfoot tr.foot td div.right span#Datapager1 strong {
        color: #FFE766 !important;
    }
/***User Listview End***/
/* ====End Portfolio speciffic styles=================== */

/* =====================================
   General Descriptions
====================================== */
.group:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.lowercase {
    text-transform: lowercase;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: normal;
    color: inherit;
    text-rendering: optimizelegibility;
    line-height: 1.2;
}

h1 {
    font-size: 32px;
    font-size: 3.2rem;
    padding: 8px 0 0 0;
}

h2 {
    font-size: 28px;
    font-size: 2.8rem;
    padding: 8px 0;
}

h3 {
    font-size: 24px;
    font-size: 2.4rem;
    color: #222;
    padding: 8px 0 6px 0;
}

h4 {
    font-size: 20px;
    font-size: 2.0rem;
    padding: 6px 0;
    color: #042E52;
}

h5 {
    font-size: 17px;
    font-size: 1.7rem;
    padding: 4px 0;
    font-style: italic;
    color: #333;
}

h6 {
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

abbr[title] {
    cursor: help;
    background-color: #F1F1F1;
    font-style: oblique;
    border-bottom: 1px dotted #B5AF95;
}

b, strong {
    font-weight: bold;
    color: #444;
}

blockquote {
    padding: 0 0 10px 24px;
    font-style: normal;
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

cite {
    font-style: normal;
}

dl, dd {
    margin-bottom: 1.5em;
}

dt {
    font-weight: bold;
}

.dl-horizontal dt {
    float: left;
    clear: left;
    width: 20.25%;
    text-align: right;
}

.dl-horizontal dd {
    margin-left: 22.78%;
}

dfn {
    font-style: italic;
}

em {
    color: #900;
    font-style: italic;
}

i {
    font-style: italic;
}

ins {
    background-color: #f3f5f6;
    color: #000000;
    text-decoration: none;
}

mark {
    background-color: #f3f5f6;
    color: #000000;
    font-style: italic;
    font-weight: bold;
}

pre, code, kbd, samp {
    font-family: Monaco, Courier New, monospace;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.5em;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

small {
    font-size: 14px;
    font-size: 1.4rem;
    color: #74412E;
    font-style: italic;
}

sub, sup {
    position: relative;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 0;
    vertical-align: baselineheight;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* =====================================
   Header Section
====================================== */
header {
    background: url(../imgs/header_bg1.png) repeat-x bottom;
    background: url(../imgs/header_bg1.png) repeat-x bottom, url(../imgs/header_bg2.png) no-repeat center top;
    /*background-color: #154072;
    background-color: #465a73;
    background-color: #3E556F;*/
    background-color: #35485F;
}

    header #top {
        /*background-color: #082A52;*/
        background-color: #172A3F;
        border-top: 3px solid #061E3B;
        color: #D8D8D8;
        margin: 0 auto;
        margin-bottom: 10px;
        -moz-border-radius: 0 0 6px 6px;
        -o-border-radius: 0 0 6px 6px;
        -webkit-border-radius: 0 0 6px 6px;
        border-radius: 0 0 6px 6px;
        zoom: 1;
        filter: alpha(opacity=80);
        opacity: 0.8;
    }

        header #top, header #top ul {
            font-size: 13px;
            font-size: 1.3rem;
        }

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

                header #top a:hover {
                    color: #FFE766;
                    text-decoration: underline;
                }

            header #top #heirarchy, header #top #search {
                padding: 4px 10px;
                font-family: Arial, Helvetica, sans-serif;
                text-shadow: 1px 1px 1px rgba(0,0,0,.8);
            }

    header #search {
        text-align: right;
    }

        header #search input[type="text"] {
            padding: 2px 8px 2px 20px;
            border: 2px solid #0A2446;
            background: #FFF url(../imgs/searchform.png) no-repeat 5px 50%;
            -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
            -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
            -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
        }

    header #top #heirarchy #linksDescription {
        float: left;
        width: auto;
        padding: 2px 0 0 0;
        text-shadow: 1px 1px 2px #000;
    }

    header #top #heirarchy #linksOrgs {
        float: left;
        display: inline;
        margin: 0;
        padding: 2px 0 0 0;
    }

        header #top #heirarchy #linksOrgs li {
            float: left;
            list-style: none;
            font-size: 100%;
            margin: 0;
        }

            header #top #heirarchy #linksOrgs li a {
                float: left;
                padding: 0 0 0 4px;
                text-shadow: 1px 1px 2px #000;
                cursor: help;
            }

            header #top #heirarchy #linksOrgs li#linkNOSabbr {
                display: none;
            }

    header #canvas .logo {
        float: left;
        display: block;
        text-indent: -9999px;
        margin-right: 10px;
        height: 58px;
        width: 199px;
        background: url(../imgs/nccos.png);
    }

    header #canvas h1 {
        color: #FFE766;
        text-shadow: 1px 1px 1px rgba(0,0,0,.8);
        font-family: 'Open Sans', Arial, Helvetica, Verdana, sans-serif;
        display: inline block;
    }

        header #canvas h1 a:hover {
            color: #FFF;
        }

    header nav[role="navigation"] {
        margin-top: 5px;
        border-bottom: none;
        padding: 0;
    }

        header nav[role="navigation"] ul {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 13px;
            line-height: 1em;
        }

        header nav[role="navigation"] li {
            float: left;
            margin: 0;
            padding: 0;
            text-align: center;
        }

            header nav[role="navigation"] li a {
                display: block;
                text-decoration: none;
                color: #F6F7F2;
                font-weight: bold;
                /*background-color: #082A52;
                background-color: #172A3F;*/
                background-color: #0053A0;
                margin: 0 0 0 2px;
                padding: 10px 20px 7px 20px;
                height: 16px;
                zoom: 1;
                filter: alpha(opacity=85);
                opacity: 8.5;
                -webkit-transition: all 0.3s ease-out;
                -moz-transition: all 0.3s ease-out;
                -ms-transition: all 0.3s ease-out;
                -o-transition: all 0.3s ease-out;
                transition: all 0.3s ease-out;
                -moz-border-radius: 6px 6px 0 0;
                -o-border-radius: 6px 6px 0 0;
                -webkit-border-radius: 6px 6px 0 0;
                border-radius: 6px 6px 0 0;
            }

            header nav[role="navigation"] li:first-child a {
                margin: 0;
            }

            header nav[role="navigation"] li a:hover,
            header nav[role="navigation"] li a:focus {
                /*background: #011A2D url(../imgs/tab_hover.gif) repeat-x top;*/
                /*background: #172A3F url(../imgs/tab_hover.gif) repeat-x top;
                background: url(../imgs/tab_hover.gif) repeat-x top;
                color: #FF9;*/
                background: #0053a0 url(../imgs/tab_selected.gif) repeat-x top;
                color: #501700;
                filter: alpha(opacity=100);
                opacity: 1.0;
            }

#overview #header2017,
#locationmanager #header2017,
#batch #header2017,
#physicalmeasure #header2017,
#data #header2017,
#export #header2017,
#login #header2017,
#error #header2017 {
    border-bottom: 2px solid #0053a0;
}

#home header nav[role="navigation"] li#lnk0 a,
#locationmanager header nav[role="navigation"] li#lnk3 a,
#batch header nav[role="navigation"] li#lnk2 a,
#physicalmeasure header nav[role="navigation"] li#lnk4 a,
#data header nav[role="navigation"] li#lnk5 a,
#export header nav[role="navigation"] li#lnk8 a
{
    background: #FFF url(../imgs/tab_selected.gif) repeat-x top;
    color: #501700;
    filter: alpha(opacity=100);
    opacity: 1.0;
}

header nav input {
    background: #FFF;
}
/* =====================================
   Middle Section
====================================== */
#middle {
    background: #FFF;
    padding-top: 20px;
    padding-bottom: 25px;
    border-bottom: 1px solid #C8D0D9;
}
    /* =====================================
   Middle Section = Bread Crumbs
====================================== */

#overview #crumbs2017 #crumbs,
#locationmanager #crumbs2017 #crumbs,
#batch #crumbs2017 #crumbs,
#physicalmeasure #crumbs2017 #crumbs,
#data #crumbs2017 #crumbs,
#export #crumbs2017 #crumbs,
#login #crumbs2017 #crumbs,
#error #crumbs2017 #crumbs {
    display: none;
}

    #middle #crumbs {
        font-size: 11.5px;
        font-size: 1.15rem;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #818285;
        padding: 0 0 6px 2px;
        border-bottom: 1px dotted #CCC;
        margin-bottom: 10px;
    }

#home #middle #crumbs {
    display: none;
}

#middle #crumbs a {
    color: #3333FF;
    text-decoration: none;
    border-bottom: none;
}

    #middle #crumbs a:hover {
        color: #900;
        border-bottom: 1px solid #900;
    }

/* =====================================
   Middle Section = Homepage
====================================== */

#middle #content a.button, #home #newspromo a.button {
    display: inline-block;
    color: #FFF;
    background: #009ADA;
    padding: 60px 10px;
    margin: 8px 0;
    border-bottom: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0,0,0,.8);
    outline: none;
    position: relative;
    zoom: 1;
    white-space: nowrap;
    overflow: visible;
    cursor: pointer;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-transition: border-color .20s;
    -moz-transition: border-color .20s;
    -o-transition: border-color .20s;
    transition: border-color .20s;
}

#middle #content a:hover.button, #home #newspromo a:hover.button {
    color: #FFDF62;
    background: #900 url(../imgs/button-gloss.png) repeat-x 0 -31px;
    border-bottom: none;
}

#home #mainpromo p.flex-caption {
    padding: 10px 13px;
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-family: Oswald, Arial, sans-serif;
    font-size: 18px;
    background: #0A2F59;
    /*filter: alpha(opacity=90);
	opacity: 0.90;	*/
    color: #FFF !important;
    line-height: 1.2;
    list-style: none;
}

    #home #mainpromo p.flex-caption a {
        color: #FFF;
        border: none;
    }

#home #otherpromo {
    line-height: 1.0 !important;
    margin: 0;
    padding: 0;
}

    #home #otherpromo ul {
        list-style-type: none;
        margin: 0 !important;
        padding: 0 !important;
    }

    #home #otherpromo li {
        list-style-type: none;
        border-bottom: 9px solid #FFF;
    }

        #home #otherpromo li:last {
            border-bottom: none;
        }

        #home #otherpromo li#item-a {
            background: /*#95402A*/ #813724;
        }

            #home #otherpromo li#item-a:hover {
                background: #6D2E1E;
            }

        #home #otherpromo li#item-b {
            background: #11585C;
        }

            #home #otherpromo li#item-b:hover {
                background: #0D4346;
            }

        #home #otherpromo li#item-c {
            background: #373737;
            border-bottom: none;
        }

            #home #otherpromo li#item-c:hover {
                background: #2A2A2A;
            }

        #home #otherpromo li#item-d {
            background: #5F1247;
        }

            #home #otherpromo li#item-d:hover {
                background: #4A0E37;
            }

        #home #otherpromo li#item-e {
            background: /*#6E4715*/ #595611;
        }

            #home #otherpromo li#item-e:hover {
                background: #44410D;
            }

        #home #otherpromo li#item-f {
            background: #373737;
            border-bottom: none;
        }

            #home #otherpromo li#item-f:hover {
                background: #2A2A2A;
            }

    #home #otherpromo a {
        color: #F2F2F2;
        display: block;
        height: 96px;
        width: 100%;
        border-bottom: none;
        background: url(../imgs/arrow.png) no-repeat 92% 50%;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

        #home #otherpromo a:hover {
            color: #FFF !important;
            background: url(../imgs/arrow-hover.png) no-repeat 97% 50%;
            text-decoration: none;
            border-bottom: none !important;
        }

        #home #otherpromo a span {
            display: block;
            padding: 25px 0 0 15px;
            font-family: "Oswald", "Open Sans", Arial, sans-serif;
            text-transform: uppercase;
            font-size: 21px;
            text-shadow: 0 1px 1px rgba(0,0,0,.8);
            line-height: 1;
        }

            #home #otherpromo a span i {
                font-family: Georgia, Arial, Helvetica, sans-serif;
                font-size: 16px;
                text-shadow: 0 1px 1px rgba(0,0,0,.8);
                color: #FFC;
                font-style: italic;
                text-transform: none;
            }

#home #blurb {
    padding: 12px 38px 12px 38px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    font-family: Georgia, Arial, Helvetica, sans-serif;
    font-style: italic;
    font-size: 120%;
    color: #0A233F;
    line-height: 1.5;
    margin: 10px 0 5px 0;
    background: url(../imgs/subnavigation_bg.png) no-repeat bottom right, url(../imgs/bg-quote.png) no-repeat 10px 8px;
    background-color: #E6EAEE;
}

    #home #blurb a {
        color: #00C;
        text-decoration: none;
        border-bottom: 1px solid #C8D0DA;
    }

        #home #blurb a:hover {
            border-bottom: 1px solid #6D829D;
        }

#home #themepromo {
    padding: 10px 0;
    margin-bottom: 10px;
}

    #home #themepromo h4, #home #newspromo h4 {
        color: #3E4C5B;
        font-size: 18px;
        font-family: "Open Sans", Arial;
        text-transform: uppercase;
        padding-left: 0;
        font-style: normal;
        font-weight: bold;
    }

    #home #themepromo .headline, #home #newspromo .headline {
        background: url(../imgs/aside_headline_bg.png) repeat-x 0 50%;
        margin-bottom: 10px;
    }

        #home #themepromo .headline h4, #home #newspromo .headline h4 {
            display: table-cell;
            background: #FFF;
            padding-right: 10px;
        }

    #home #themepromo ol.slats {
        margin: 0;
    }

        #home #themepromo ol.slats li {
            margin: 0 0 10px 0;
            padding: 0 0 10px 0;
            border-bottom: 1px solid #E6EAEE;
            list-style: none;
        }

            #home #themepromo ol.slats li:last-child {
                margin: 0;
                padding: 0;
                border-bottom: none;
            }

            #home #themepromo ol.slats li img {
                border: 4px solid #E6EAEE;
                background: #FFF;
                padding: 2px;
                float: left;
                /*max-width: 100%;*/
                height: auto;
                max-width: 150px;
            }

                #home #themepromo ol.slats li img:hover {
                    border: 4px solid #C8D0D9;
                }

            #home #themepromo ol.slats li .text {
                padding-left: 15px;
                width: auto;
                overflow: hidden;
            }

                #home #themepromo ol.slats li .text h5 {
                    font-size: 18px;
                    font-size: 1.8rem;
                    font-style: italic;
                    color: #333;
                }

                    #home #themepromo ol.slats li .text h5 a {
                        color: #123B83;
                        font-style: italic;
                        border-bottom: 1px solid #FFF;
                    }

                        #home #themepromo ol.slats li .text h5 a:hover {
                            color: #123B83;
                            border-bottom: 1px solid #C8D0DA;
                            cursor: help;
                        }

                #home #themepromo ol.slats li .text p {
                    font-size: 15px;
                    font-size: 1.5rem;
                    line-height: 1.5em;
                    line-height: 1.5;
                    padding: 5px 0 4px 0;
                }

                #home #themepromo ol.slats li .text a, #home #newspromo a {
                    color: #00C;
                    text-decoration: none;
                    border-bottom: 1px solid #C8D0DA;
                }

                    #home #themepromo ol.slats li .text a:hover, #home #newspromo a:hover {
                        color: #900;
                        border-bottom: 1px solid #900;
                    }

    #home #themepromo ul, #home #themepromo ol, #home #newspromo ul, #home #newspromo ol {
        padding: 0;
        margin: 5px 0 9px 25px;
    }

        #home #themepromo ul ul, #home #themepromo ul ol, #home #themepromo ol ol, #home #themepromo ol ul,
        #home #newspromo ul ul, #home #newspromo ul ol, #home #newspromo ol ol, #home #newspromo ol ul {
            margin-bottom: 0;
        }

    #home #themepromo ul, #home #newspromo ul {
        list-style: disc;
    }

    #home #themepromo ol, #home #newspromo ol {
        list-style: decimal;
    }

    #home #themepromo li, #home #newspromo li {
        line-height: 1.7;
    }

    #home #themepromo ul.unstyled, #home #themepromo ol.unstyled,
    #home #newspromo ul.unstyled, #home #newspromo ol.unstyled {
        margin-left: 0;
        list-style: none;
    }

/* =====================================
   Middle Section = Content and Aside
====================================== */

#middle #content h2.page-title {
    text-shadow: 1px 1px 1px #C3C3C3;
    font-family: "Open Sans", Arial, Helvetica, Verdana, sans-serif;
    color: #141414;
    padding-bottom: 15px;
}

#middle #content figure {
    border: none;
    text-align: center;
    padding-top: 5px;
    margin: 0 0 10px 0;
    border-bottom: 1px dotted #CCC;
}

    #middle #content figure img {
        margin: 0;
        padding: 0;
        border: 0 none;
    }

#middle #content figcaption, #middle #content .flex-caption {
    color: #333;
    padding: 15px 10px;
    text-align: left;
    font-family: "Overlock", Georgia, arial, sans-serif;
}

#middle #content img {
    max-width: 100% !important;
    border-width: 0;
}

    #middle #content img.floatright {
        margin: 0 0 10px 10px;
        float: right;
    }

#middle #content a {
    color: #00C;
    text-decoration: none;
    border-bottom: 1px solid #C8D0DA;
}

    #middle #content a:hover {
        color: #900;
        border-bottom: 1px solid #900;
    }
/* middle content button styles */
#middle #content .button {
    display: inline-block;
    color: #FFF;
    background: #626262;
    padding: 6px 10px 8px 10px;
    margin: 5px 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    /*text-shadow: 0 1px 1px rgba(0,0,0,.6);*/
    outline: none;
    position: relative;
    zoom: 1;
    white-space: nowrap;
    overflow: visible;
    cursor: pointer;
    border: none;
    text-decoration: none;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

#middle #content a:hover.button {
    background: #484848;
    color: #FFC;
}

#middle #content a.button.blue, #middle #content input.button.blue {
    background: #1961B0;
}

#middle #content a:hover.button.blue, #middle #content input:hover.button.blue {
    background: #0F5393;
}

#middle #content a.button.red, #middle #content input.button.red {
    background: #AE2C20;
}

#middle #content a:hover.button.red, #middle #content input:hover.button.red {
    background: #911810;
}

#middle #content a.button.red {
    background: #AE2C20;
}

#middle #content a:hover.button.red {
    background: #911810;
}

#middle #content a.button.green, #middle #content input.button.green {
    background: #063;
}

#middle #content a:hover.button.green, #middle #content input:hover.button.green {
    background: #004D26;
}

/* Add " (PDF)" text after links that go to PDFs */
#middle #content a[href$=".pdf"]:after {
    content: " (PDF)";
}

/* If file size specified as data attribute, use that too */
#middle #content a[href$=".pdf"][data-size]:after {
    content: " (PDF, " attr(data-size) ")";
}

#middle #content p {
    padding: 5px 0 4px 0;
    line-height: 1.6;
}

#middle #content ul, #middle #content ol, #middle aside ul, #middle aside ol {
    padding: 0;
    margin: 5px 0 9px 25px;
}

    #middle #content ul ul, #middle #content ul ol, #middle #content ol ol, #middle #content ol ul,
    #middle aside ul ul, #middle aside ul ol, #middle aside ol ol, #middle aside ol ul {
        margin-bottom: 0;
    }

#middle #content ul, #middle aside ul {
    list-style: disc;
}

#middle #content ol, #middle aside ol {
    list-style: decimal;
}

#middle #content li, #middle aside li {
    line-height: 1.7;
}

#middle #content ul.unstyled, #middle #content ol.unstyled,
#middle aside ul.unstyled, #middle aside ol.unstyled {
    margin-left: 0;
    list-style: none;
}

#middle #content .flexslider ul, #middle #content .flexslider ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

#middle #content div.googlemap {
    border: 4px solid #E6EAEE;
    padding: 2px;
    height: 500px;
    background: #FFF;
    margin: 8px 0;
}

/* Table = NEEDS ATTENTION!  */

table {
    width: 100%;
    font-size: 12px;
}


    table thead th {
        border-bottom: 1px solid #ccc;
    }

th, td {
    text-align: right;
    padding: 10px;
    line-height: 1.2em;
}

#middle table a {
    border-bottom: none;
}

th:first-child, td:first-child {
    text-align: left;
}

tbody th, td {
    border-bottom: 1px solid #ccc;
}

.enhanced th, .enhanced td {
    display: none;
}

    .enhanced th.essential, .enhanced td.essential {
        display: table-cell;
    }

.table-menu-wrapper {
    top: -3em;
    right: 0;
    display: none;
}

.table-menu {
    right: 0;
    left: auto;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 1.2em;
    width: 12em;
}

.table-menu-hidden {
    left: -999em;
    right: auto;
}
/*#middle #content #usamap {
	margin: 25px 0;
	width: 95%;
	height: 600px;
	}		
#middle #content #leafletmap {
	margin: 10px 0 15px 0;
	border: 4px solid #E6EAEE;
	padding: 2px;
	height: 350px;
	background: #FFF;
	margin: 8px 0;
	}	*/
#middle div.alert-box {
    background: #D9EDF7;
    padding: 8px 10px;
    border: 1px solid #AFD9EE;
    color: #2E6987;
}

#middle #content .itemholder {
    padding: 1.5%;
    margin: 5px 0;
    background: #E6EAEE;
    border: 1px solid #C8D0D9;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

    #middle #content .itemholder label {
        float: left;
        font-weight: bold;
        padding-right: 2%;
        width: 40%px;
        clear: both;
        text-align: right;
    }

    #middle #content .itemholder .txtbox {
        width: 30%;
        padding: 3px;
        background: #FFF;
        border: 1px solid #CCC;
    }

#middle #content td.reftext { /*Used to control reference text at the end of fact sheets*/
    font-size: 90%;
    line-height: 1.5;
}

#middle #content td.ref { /*Used to reference source symbols at the end of fact sheets*/
    font-size: 90%;
    width: 40px;
    text-align: center;
    color: red;
}

#middle aside h4 {
    color: #3E4C5B;
    font-size: 16px;
    font-family: "Open Sans", Arial;
    text-transform: uppercase;
    padding-left: 6px;
    font-style: normal;
    font-weight: bold;
}

#middle aside .headline {
    background: url(../imgs/aside_headline_bg.png) no-repeat 0 50%;
}

    #middle aside .headline h4 {
        display: table-cell;
        background: #FFF;
        padding-right: 10px;
    }

#middle aside .subnavigation {
    padding: 10px 10px 10px 10px;
    margin-bottom: 16px;
    color: #3E4C5B;
    background: #E6EAEE url(../imgs/subnavigation_bg.png) no-repeat bottom right;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

    #middle aside .subnavigation ul li {
        color: inherit;
        padding-left: 2px;
        font-size: 14px;
    }

        #middle aside .subnavigation ul li a, #middle aside .subnavigation ul li ul li a {
            border: none;
            color: #206B95;
        }

#middle .subnavigation ul li a:hover, #middle .subnavigation ul li ul li a:hover {
    color: #900;
}

#middle .subnavigation ul li ul {
    list-style: none;
    border-left: 2px solid #C8D0D9;
    margin-left: 0;
    margin-bottom: 7px;
}

    #middle .subnavigation ul li ul li {
        padding-left: 7px;
        margin-left: 0;
    }

/*About Us*/
#overview #middle .subnavigation ul li.pg a,
#about #middle .subnavigation ul li.pg0 a,
#search #middle .subnavigation ul li.pg1 a,
#glossary #middle .subnavigation ul li.pg2 a,
#bibliography #middle .subnavigation ul li.pg3 a,
#resources #middle .subnavigation ul li.pg4 a,
#contacts #middle .subnavigation ul li.pg5 a,
#links #middle .subnavigation ul li.pg6 a {
    font-weight: bold;
    color: #123B6B;
    text-decoration: none;
}

#middle aside .subnews {
    margin-bottom: 16px;
    font-size: 90%;
}

    #middle aside .subnews a {
        color: #00C;
        text-decoration: none;
        border-bottom: 1px solid #C8D0DA;
    }

        #middle aside .subnews a:hover {
            color: #900;
            border-bottom: 1px solid #900;
        }
/*#middle aside  .subnews ol, 
#middle aside  .subnews ul.square, 
#middle aside  .subnews ul.circle, 
#middle aside  .subnews ul.disc {
	margin-left: 18px;
	}*/

/* =====================================
   Footer
====================================== */
footer {
    margin-top: 15px;
    margin-bottom: 25px;
    color: #3E4C5B;
    font-size: 13px;
}

    footer nav[role="list"] ul, footer nav[role="link"] ul {
        list-style-type: none;
        margin: 0 auto;
        padding: 5px 0;
    }

        footer nav[role="list"] ul li, footer nav[role="link"] ul li {
            border-left: 1px solid #626262;
            padding: 0 6px;
            display: inline;
        }

            footer nav[role="list"] ul li:first-child, footer nav[role="link"] ul li:first-child {
                border: 0;
                padding: 0 6px 0 0;
            }

    footer p {
        padding: 4px 0 3px 0;
        margin: 0;
        line-height: 1.4;
    }

    footer a {
        color: #3E4C5B;
        font-weight: normal;
    }

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




/* -----------------------------------------
   Media Queries
----------------------------------------- */
@media screen and (min-width: 1220px) {
    header #top #linksDescription:after {
        content: 'The National Centers for Coastal Ocean Science deliver ecosystem science solutions to sustain thriving coastal communities and economies.';
    }

    .tinynav {
        display: none;
    }
}

@media screen and (max-width: 1220px) {

    header #top #linksDescription:after {
        content: 'The National Centers for Coastal Ocean Science deliver ecosystem science solutions to sustain thriving coastal communities.';
    }

    .tinynav {
        display: none;
    }
}


@media screen and (max-width: 1140px) {
    body {
        font-size: 14px;
        font-size: 1.4rem;
    }

    header #top #linksDescription:after {
        content: 'NCCOS delivers ecosystem science solutions to sustain thriving coastal communities.'
    }

    header nav[role="navigation"] li a {
        padding: 9px 15px 7px 15px;
    }

    .tinynav {
        display: none;
    }
}

@media only screen and (min-width: 1080px) and (max-width: 1140px) {

    #home #otherpromo a {
        height: 90px;
    }
}

@media only screen and (min-width: 1020px) and (max-width: 1080px) {

    #home #otherpromo li {
        border-bottom: 7px solid #FFF;
    }

    #home #otherpromo a {
        height: 86px;
    }
}

@media only screen and (min-width: 960px) and (max-width: 1019px) {

    #home #otherpromo a {
        height: 81px;
    }
}

@media screen and (max-width: 1000px) {
    header nav[role="navigation"] li a {
        padding: 12px 10px 10px 10px;
        margin: 0 0 0 1px;
    }
    /*.post_container img {
	max-width: 100px;
	}	*/
    .tinynav {
        display: none;
    }
}

@media only screen and (min-width: 900px) and (max-width: 959px) {
    #home #otherpromo li {
        border-bottom: 5px solid #FFF;
        border-top: none;
    }

    #home #otherpromo a {
        height: 76px;
    }

        #home #otherpromo a span {
            padding: 25px 0 0 15px;
            font-size: 21px;
        }

            #home #otherpromo a span i, #home #otherpromo a span br {
                display: none;
            }
}


@media screen and (max-width: 910px) {
    header #top #linksDescription:after {
        content: 'NCCOS delivers ecosystem science solutions to sustain thriving coastal communities.';
    }

    #home #themepromo ol.slats li img {
        display: none;
    }

    #home #themepromo ol.slats li .text {
        padding-left: 0;
    }

    .tinynav {
        display: none;
    }
}

@media only screen and (min-width: 850px) and (max-width: 899px) {
    #home #otherpromo li {
        border-bottom: 5px solid #FFF;
        border-top: none;
    }

    #home #otherpromo a {
        height: 72px;
    }

        #home #otherpromo a span {
            padding: 27px 0 0 15px;
            font-size: 21px;
        }

            #home #otherpromo a span i, #home #otherpromo a span br {
                display: none;
            }
}

@media screen and (max-width: 889px) {
    header nav[role="navigation"] li a {
        padding: 12px 7px 10px 7px;
        margin: 0 0 0 1px;
        font-weight: normal;
    }
}


@media only screen and (max-width: 849px) {
    #home #otherpromo li {
        border-bottom: 3px solid #FFF;
        border-top: none;
    }

    #home #otherpromo a {
        height: 66px;
    }

        #home #otherpromo a span {
            padding: 27px 0 0 15px;
            font-size: 21px;
        }

            #home #otherpromo a span i, #home #otherpromo a span br {
                display: none;
            }
}

@media screen and (max-width: 800px) {
    header #top #linksDescription:after {
        content: 'NCCOS delivers ecosystem science solutions to sustain thriving coastal communities.';
    }

    header #top #heirarchy #linksOrgs li#linkNOSabbr {
        display: block;
    }

    header #top #linksOrgs li#linkNOS {
        display: none;
    }

    header #canvas h1 {
        font-size: 27px;
        font-size: 2.7rem;
        margin: 10px 0 0 0;
    }

    .tinynav {
        display: block;
        width: 100%;
        padding: 3px 0;
        font-size: 16px;
        margin-bottom: 3px;
        background: #FFF;
    }

    #nav {
        display: none;
    }
    /*#middle #promo .promo-text {
	float: none;
	}	*/

}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    #home #otherpromo li {
        border-top: 9px solid #FFF;
        border-bottom: none;
    }

        #home #otherpromo li:last {
            border-top: none;
        }

    #home #otherpromo {
        margin-bottom: 10px;
    }

        #home #otherpromo a span {
            padding: 22px 0 0 15px;
            font-size: 21px;
        }
}

@media screen and (max-width: 770px) {
    header {
        border-top: 7px solid #082A52;
        border-bottom: 1px solid #082A52;
    }

        header #top {
            display: none;
        }

        header #canvas #logo {
            margin: 10px 10px 0 0;
        }

        header #canvas h1 {
            font-size: 25px;
            font-size: 2.5rem;
            padding: 15px 0 10px 0;
        }

    #middle aside .subnavigation {
        padding: 10px;
        margin-top: 15px;
    }

        #middle aside .subnavigation ul {
            font-size: 100%;
        }

    #home .blurb {
        font-size: 110%;
    }

    #home #themepromo {
        padding: 10px 0;
        margin-bottom: 10px;
    }

        #home #themepromo ol.slats li img {
            display: block;
        }

        #home #themepromo ol.slats li, #home #themepromo ol.slats li:last-child {
            margin: 0 0 10px 0;
            padding: 0 0 10px 0;
            border-bottom: 1px solid #E6EAEE;
            list-style: none;
        }

            #home #themepromo ol.slats li .text {
                padding-left: 10px;
            }

    #middle #content a.button, #home #newspromo a.button {
        margin: 10px 0;
        display: block;
    }
}


@media screen and (max-width: 600px) {
    header #canvas {
        text-align: center;
    }

        header #canvas .logo {
            display: block;
            float: none;
            margin: 0 auto;
            margin-top: 10px;
        }

        header #canvas h1 {
            display: block;
            clear: left;
            text-align: center;
            padding: 4px 0 10px 0;
        }

    #middle #crumbs {
        display: none;
    }
    /*.post_container img {
	display: none;
	}	
.post_text {
	padding-left: 0;
	}	
.post_text p {
	color: #333;
	}	*/
    #home #mainpromo p.flex-caption {
        padding: 10px 13px;
        position: absolute;
        left: 0;
        bottom: 0;
        font-family: Oswald, Arial, sans-serif;
        font-size: 18px;
    }

    #home #otherpromo a span {
        padding: 27px 0 0 15px;
        font-size: 19px;
    }

    footer {
        text-align: center;
    }

        footer p {
            text-align: center;
        }

        footer nav[role="list"] ul {
            list-style-type: none;
            margin: 0 auto;
            margin-top: 10px;
            margin-bottom: 10px;
            padding: 0;
            border-top: 1px solid #CCC;
        }

            footer nav[role="list"] ul li:first-child {
                border-top: 1px solid #CCC;
            }

            footer nav[role="list"] ul li:first-child, footer nav[role="list"] ul li {
                border-left: none;
                padding: 0;
                margin: 5px 0;
            }

                footer nav[role="list"] ul li a {
                    display: block;
                    padding: 10px 6px;
                    border-bottom: 1px solid #CCC;
                    text-align: center;
                    font-size: 14px;
                    font-weight: normal;
                    line-height: 1;
                }

                    footer nav[role="list"] ul li a:hover {
                        text-decoration: none;
                        background-color: #FFF;
                    }

        footer nav[role="link"] {
            display: none;
        }
}

@media screen and (max-width: 500px) {
    header #canvas #logo {
        background: url(../imgs/nccos.png);
        width: 199px;
    }

    #middle aside #subnavigation h5:before {
        content: '';
    }

    #home .blurb {
        font-size: 100%;
        font-style: normal;
    }
    /*
#middle .itemholder {
	display: none;
	}		
*/
    th, td {
        text-align: left;
        padding: 10px 0px;
        line-height: 1.2em;
    }
}


@media only screen and (max-width: 480px) {
    #home #otherpromo li {
        border-top: 5px solid #FFF;
        border-bottom: none;
    }

    #home #otherpromo a span {
        padding: 22px 0 0 15px;
        font-size: 21px;
    }

    #home #themepromo ol.slats li img {
        display: none;
    }

    #home #themepromo ol.slats li .text {
        padding-left: 0;
    }
}


@media screen and (min-width: 800px) {
    .enhanced th,
    .enhanced td {
        display: table-cell;
    }
}


@media screen and (min-width: 500px) {
    .enhanced th.optional,
    .enhanced td.optional {
        display: table-cell;
    }
}