@page rotated { size : landscape }

/* Day tab overrides
-------------------------------------------------------*/
#fcContent .largeTabInner {
    padding: 0;
}

.largeTabNav .icon.wx {
    float: right;
    height: 46px;
    width: 46px;
}

/* Styles for the first forecast tab
-------------------------------------------------------*/
#fcContent .largeTabNav > li:first-child {
    flex: 1.4; /* First tab on the forecast table is wider */
}

#fcContent .largeTabNav > li:first-child .icon.wx {
    height: 70px;
    width: 70px;
    margin-top: -20px;
}

#fcContent .largeTabNav > li:first-child .long-date {
    font-size: 19px;
}

#fcContent .largeTabNav > li:first-child .warnBox {
    margin-top: -8px;
}

#fcContent .largeTabNav > li:first-child.tabActive .warnBox {
    margin-top: 12px;
}


.largeTabNav .tabActive + li > .largeTabInner {border-left: 0} /* First tab after the active one */

.largeTabNav .tabDayValues {font-weight:400; margin:12px 12px 0; text-align:left}
.largeTabNav[data-tabs="8"] .tabDayValues {margin:12px 2px 0 6px;} /* Make tabs slightly narrower when there's 8 tabs */
.largeTabNav .tabDayValues .long-date {display:inline; font-size: 15px}

.largeTabNav .tabActive .tabDayValues .long-date{font-weight: bold;}
.largeTabNav .tabDayTemp {margin: 10px 0}
.largeTabNav .tabDayTemp p {font-size: .8150em; margin: 0;}
.largeTabNav .tabDayTemp span {display:inline-block; vertical-align: top;}
.largeTabNav .dayTemp {font-size: 18px; font-weight: bold}
.largeTabNav .nightTemp{font-size: 15px}
.largeTabNav .tabDayTemp span sup {top:-0.25em;}

.largeTabNav .warnBox {
    background-color: #151515;
    color: white;
    margin: 5px 5px 10px 5px;
}

.dayNav .tabActive .warnBox {
    margin-top: 20px;
}

.warningImg {
    float: left;
    padding-top: 4px;
    text-align: center;
    width:40%;
}

.warnMainIcon {
     margin: 0 auto;
}

.dayNav .dayTabWarningText {
    font-weight: bold;
    float: left;
    line-height: 1.3em;
    width: 60%;
    padding-top: 5px;
    font-size: 14px;
}

.forecastNav .spacer { height: 75px; }
.forecastNav .tabActive .spacer { height: 84px; }


.forecastNav .dayNavTab {
    height: 110px;
}
.forecastNav .tabActive .dayNavTab {
    height: 120px!important;
}

.forecastNav.isTaller .dayNavTab {
    height: 147px;
}
.forecastNav.isTaller .tabActive .dayNavTab {
    height: 157px!important;
}

.tabUV.uvTD .icon,
.tabPollen.pollenTD .icon {
    width: 25px;
    height: 25px;
    float: left;
    font-size: 0.7em;
}

.tabUV > div, .tabPollen > div {
    margin: 4px;
}

.tabUV span, .tabPollen span {
    position: relative;
    margin-left: 5px;
    line-height: 25px;
}

.tabPollenUV {
    display: flex;
    font-weight: bold;
}

#fcContent .tabUV.uvTD, #fcContent .tabPollen.pollenTD {
    border: 1px solid #ccc;
    width: 50%;
    margin: 0 2px 0;
}

#fcContent .tabUV span, #fcContent .tabPollen span {
    margin-left: 2px;
}
    /* =weather (table)
	-------------------------------------------------------*/

#weatherViewport { clear: both; margin:0; overflow:hidden; position:relative; }
#weatherViewport > ul li {position:absolute; top:0;	height:1000px; overflow:hidden;	text-indent:100%; white-space:nowrap; width:3em; z-index:100; display:none;}

#weatherWindow  {overflow-x:auto; overflow-y:hidden;	width:100%;	clear:both;}
#weatherHolder {
    padding: 10px 4px 0;
}
#weatherHolder table {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    border: 0;
    border-spacing:0;
    width:100%;
}
#weatherHolder col.hover {background-color: rgba(226, 237, 240, 0.5);} /* #e2edf0 */
#weatherHolder th {background:#E2EDF0; border-bottom: 4px solid #fff; font-size:0.92em; padding:0.25em 0.75em;font-style:normal; margin:0 20px 0 0; font-weight: normal;}
#weatherHolder th:hover {background:#D7E6EB;}

#weatherHolder .weatherDate {display: none}
#weatherHolder .weatherDate th {background:#202A2C;	border-bottom:1px solid #161E1F; border-top:1px solid #161E1F; color:#fff; padding: 10px; text-align: left}

#weatherHolder th > div > span {flex:auto;}
#weatherHolder th > div { display: flex; align-items: center; }

#weatherHolder td {color:#000; cursor: auto; font-size:0.8750em;
    font-family: FSEmericWeb-Regular, Arial, sans-serif; margin:0; min-width:5px; text-align:center}

#weatherHolder .weatherTime td {color:#000; vertical-align:bottom; font-size: 0.75em; padding:.5em 0;}
#weatherHolder .weatherWX td { padding: 7px 0;}
#weatherHolder .weatherWarningBars td {height:1em;}
#weatherHolder .weatherRain td {color: #1C7499;}
#weatherHolder .weatherRain .sig {font-weight: bold; text-shadow: 0 6px 10px rgba(28, 116, 153, 0.36);}
#weatherHolder .weatherTemp td {border-right:1px solid transparent; padding:30px 0 10px 0; vertical-align:middle}
#weatherHolder .weatherWind td {font-size:1em; vertical-align:top}
#weatherHolder .weatherWind span {font-size:0.750em; display:block}
#weatherHolder .weatherShoreWind td {padding:5px 0}
#weatherHolder .weatherUV td {font-size:1em; vertical-align:middle}
#weatherHolder .weatherUV span {font-size:0.8750em; vertical-align:middle}
#weatherHolder .weatherAQ td {font-size:1em; vertical-align:middle}
#weatherHolder .weatherAQ span {font-size:0.8750em; vertical-align:middle}
#weatherHolder .weatherSeaState td {border-right:1px solid #ddd; font-size:small}

#weatherHolder td .icon {font-size: 0.9em}
#weatherHolder td .icon[data-type="windSpeed"] {font-size: 0.85em;}
#weatherHolder td .icon[data-type="uv"] {font-size: 0.8em;}

#weatherHolder .weatherTime td,
#weatherHolder .weatherWX td,
#weatherHolder .weatherRain td,
#weatherHolder .weatherWarnings td,
#weatherHolder .weatherWarningBars td,
#weatherHolder .weatherWarningDetails td,
#weatherHolder .weatherSeaState td {border-right: 1px solid #ddd;}

#weatherHolder .weatherTime td:last-child,
#weatherHolder .weatherWX td:last-child,
#weatherHolder .weatherRain td:last-child,
#weatherHolder .weatherWarnings td:last-child,
#weatherHolder .weatherWarningBars td:last-child,
#weatherHolder .weatherWarningDetails td:last-child,
#weatherHolder .weatherSeaState td:last-child{border:0}

#weatherHolder th.expandAllHeader {padding:0; font-weight:bold; }
#weatherHolder th.expandAllHeader div {color:#fff;background:#8D9697;cursor:pointer;font-size:1em;padding:0.25em 0.75em;display: flex;
    align-items: center;}
#weatherHolder th.expandAllHeader div:hover {background-color: #798283;}
#weatherHolder th.expandAllHeader span {flex:auto;}

/* Warnings related styles on forecast table */
.warningDetailHolder {
    left: 130px;
    position: absolute;
    text-align: left;
    width: 700px;
    z-index: 100;
}

/* Forecast footer row */
.sunHolder {text-align:center; margin:1em 0}
.sunHolder .sunInner {display:inline-block; height:auto; position:relative; left:0; right:0; margin:0 1em; z-index:101;}
.sunHolder .sunInner > span {display:inline-block; margin:0 1em; text-align:left; white-space:nowrap;}
.sunHolder i {display:inline-block;	font-size:12px; vertical-align:middle;}
.sunInnerLeft {margin-right: -0.5em;}
.sunInnerRight {margin-left: -0.75em;}

/* =general elements
-------------------------------------------------------*/

#weatherHolder tr {border:0;}
#weatherHolder tr[data-panel]:hover { cursor:pointer; }
#weatherHolder tr[data-panel="show"] + tr[class*="weather"] { display:none; }
#weatherHolder tr.issue b {margin:-2em 0 0 0;}
#fadeLeft, #moInclude #fadeRight {display:none !important;}

div.dayModule tr th { padding:0.3em 1em; }
div#weatherHolder tr [data-unit-symbol] { transition:opacity .5s cubic-bezier(0.000, 0.5, 0.5, 1.00), visibility .5s cubic-bezier(0.000, 0.5, 0.5, 1.00); }
div#weatherHolder tr[data-panel="show"] [data-unit-symbol] { opacity:0; visibility:hidden;  }
div#weatherHolder tr[data-panel="hide"] [data-unit-symbol] { opacity:1; visibility: visible; }

/* tables */
.table > thead > tr > th {vertical-align: bottom; border-bottom: 2px solid #ddd;}
.table > thead > tr > td {border-top: none}
.table > tbody > tr > th {border-top: none}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
    border-top: 0;
}
.table > tbody + tbody {border-top: 2px solid #ddd;}
.table .table {background-color: #fff;}

/* forecast table footer */
.weatherTableFooter {
    border-top: solid 1px #ccc;
    overflow: hidden;
    margin: 0 -4px;
    padding: 8px;
}

.weatherTableFooter > .left {
    float: left;
    width: 33%;
    text-align: left;
}

.weatherTableFooter > .center {
    float: left;
    margin-top: 4px;
    width: 33%;
    text-align: center;
}

.weatherTableFooter > .right {
    float: right;
    width: 33%;
    text-align: right;
}

/* Off shore sea state text
-------------------------------------------------------*/
.offShoreSeaStateText p {
    font-size: 0.9em;
    margin-top: 10px;
    padding: 0 10px;
}

/* =screen
-------------------------------------------------------*/
@media screen {
    .titleTemp {
        display:none;
    }
}

/* =print
-------------------------------------------------------*/
@media print {
    .dayNav {display: none;}
    #weatherViewport {border:0; margin:0; overflow:visible}
    #weatherViewport ul, #weatherHolder th.expandAllHeader {display:none !important;}
    .no-js {display:block !important; font-size:1.25em !important;}
    #weatherWindow {margin:0 0 2em; overflow:visible}
    #weatherHolder table {border-collapse:collapse}
    #weatherHolder th {background:none;	border:1px solid #cecece; font-weight:400; padding:0.5em; text-align:left;}
    #weatherHolder th:before {content:''; margin:0;}
    #weatherHolder td {border:1px solid #cecece !important;	padding:.5em !important; min-width:40px; width:10%;}
    #weatherHolder tr.issue td {border:none !important;}
    #weatherHolder tr[data-panel="show"]{display:none;}
    #weatherHolder .weatherContent {display:table-row !important;}
    #weatherHolder .weatherDate th {background:none; border-bottom:1px solid #cecece; border-top:1px solid #cecece; color:#000;}
    #weatherHolder .weatherTime td {color:#000;	font-size:0.8750em;}
    #weatherHolder .weatherWX td {font-size:0.8750em; vertical-align:top;}
    #weatherHolder .weatherWind .direction {display:block;}
    .icon[data-type="temp"] {-webkit-animation-name: none !important; animation-name:none !important; background:none !important; display:block !important; color:#000 !important; font-size:0.8750em; margin:0 !important; padding:0 !important;}

    .listLinks {display:none !important;}

    a {
        color: black !important;
        text-decoration: underline !important;
    }


    .dayModule {
        display: block !important;
        margin-bottom: 10px;
    }

    thead.weatherDate {
        display: table-header-group !important;
    }

    thead.weatherDate th {
        font-weight: bold !important;
        font-size: 1.2em !important;
    }

    thead.weatherDate th span {
        font-weight: normal;
    }

    div#weatherHolder tr[data-panel="show"] em {
        opacity:1;
        visibility: visible;
    }

    tr.wxContent > th i.icon { display:none !important; }

    .weatherTemp i.icon[data-type="temp"].icon {
        background: none;
    }

    .weatherTemp i.icon:after, #weatherHolder td[data-type="temp"]:after {
        content: attr(data-unit);
    }
    .videoContainer,
    .largeTabNav {display:none;}
}