@page rotated { size : landscape }

/* =nav (days)
-------------------------------------------------------*/

#dayNav {
    margin: 10px 10px -2px;
    padding: 0;
}

#observationContent .dayNav {
    box-sizing: border-box;
    margin: 10px 10px -9px;
}

#observationContent .dayNav .tabActive {
    width:10% !important;
}

#observationContent .dayNavTab {
    border-bottom: 0 !important;
    margin-bottom: 7px;
    text-align: center;
}

#fcContent .dayNavTab {
    border-bottom: 0 !important;
    padding: 0 !important;
}

.tabActive > .dayNavTab {
    color: #292929;
    padding-left: 0;
    margin-bottom: 0;
}

.dayNav .tabActive {
    width:13%;
    z-index: 200;
}

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

.dayNav .tabDayValues {font-weight:400; margin:20px 12px 0; text-align:left}
.dayNav[data-tabs="8"] .tabDayValues {margin:20px 2px 0 5px} /* Make tabs slightly narrower when there's 8 tabs */
.dayNav .tabDayValues .short-date {display:none}
.dayNav .tabDayValues .long-date {display:inline}
.dayNav .tabActive .tabDayValues .long-date {font-weight:bold}

.dayNav .tabDayTemp {margin: 10px 0}
.dayNav .tabDayTemp p {font-size: .8150em; margin: 8px 0 18px;}
.dayNav .tabDayTemp span {display:inline-block; vertical-align: top; font-size: 1.17em;}
.dayNav .tabDayTemp span:first-child { font-size:1.3em;}
.dayNav .tabDayTemp span sup {top:-0.25em;}

.dayNav .tabActive .tabDayTemp span {font-weight: bold; font-size: 1.3em}

.dayNav .icon {
    float: right;
    margin-top: -8px;
}
.dayNav .tabActive .icon {
    height: 56px;
    width: 56px;
}

.dayNav .warnBox {
    background-color: #545454;
    color: white;
    margin: 10px 2px 0 2px;
    padding: 8px 0;
}
.dayNav .tabActive .warnBox {
    background-color: #151515;
    padding: 12px 0;
    margin-top: 10px;
}

.warningImg {
    float: left;
    text-align: center;
    width:40%;
}

.warnMainIcon {
     margin: 6px auto 0;
}

.dayNav .dayTabWarningText {
    font-size: 0.9em;
    font-weight: bold;
    float: left;
    line-height: 1.3em;
    width: 60%;
}
.dayNav .tabActive .dayTabWarningText {
    font-size: 1em;
}

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

/* =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: #CCE4EE}
#weatherHolder th {background-color:#e9e9e9; border-bottom: 4px solid #fff; font-size:0.92em; padding:0.7em 1em}

#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 b {color:#000; font-weight: 400; vertical-align: middle}
#weatherHolder th em {font-style:normal; margin:0 20px 0 0}



#weatherHolder tr img.expandIcon {float:right; height:20px; margin-right:10px; width:20px;}

@keyframes showRotate {
    0% {transform: rotate(0deg);}
}
@keyframes hideRotate {
    0% {transform: rotate(180deg);}
}
#weatherHolder tr img.expandIcon {
    animation-duration:0.3s;
    animation-iteration-count:1;
    animation-timing-function:ease-out;
}
#weatherHolder tr[data-panel="hide"] img.expandIcon {transform: rotate(180deg);
    animation-name:showRotate;}
#weatherHolder tr[data-panel="show"] img.expandIcon {transform: rotate(0deg);
    animation-name:hideRotate;}

#weatherHolder td {border-bottom: 4px solid #fff; color:#000; cursor: auto; font-size:0.8750em; margin:0; min-width:5px; padding:2px 0; text-align:center}
#weatherHolder .weatherSpacer {border-bottom:0; border-right:1px solid #ddd}
#weatherHolder .weatherTime td {border-bottom:0; border-right:1px solid #ddd; color:#000; padding-top:2em; vertical-align:bottom; font-weight:400}
#weatherHolder .weatherTime sup {top:-0.25em;}
#weatherHolder .weatherWX td {border-bottom:0; border-right: 1px solid #ddd; padding-bottom:1.5em; font-size:1em}
#weatherHolder .weatherWarnings td {border-bottom:0; border-right:1px solid #ddd}
#weatherHolder .weatherWarningBars td {border-bottom:0; border-right:1px solid #ddd; height:18px}
#weatherHolder .weatherWarningDetails td {border-bottom:0; border-right:1px solid #ddd; position: relative}
#weatherHolder .weatherTemp td {border-right:1px solid transparent; padding:30px 2px 10px 2px; 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 .icon {font-size: 0.9em}

#weatherHolder .weatherTime td:last-child,
#weatherHolder .weatherWX 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}
#weatherHolder th.expandAllHeader div {background:#c3c3c3;cursor:pointer;font-size:1em;padding:0.5em 0;text-align:center}
#weatherHolder th.expandAllHeader span {vertical-align:middle}
#weatherHolder th.expandAllHeader img {margin-left:10px;vertical-align:middle}

#weatherHolder th.expandAllHeader img {
    animation-duration:0.3s;
    animation-iteration-count:1;
    animation-timing-function:ease-out;
}
#weatherHolder th.expandAllHeader .tabCollapse img {transform: rotate(180deg);animation-name:showRotate;}
#weatherHolder th.expandAllHeader .tabExpand img {transform: rotate(0deg);animation-name:hideRotate;}
#weatherHolder th.expandAllHeader div:hover {background-color:#cce4ee}

/* 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:0.5em 0}
.sunHolder .sunInner {display:inline-block; font-size:0.8750em; 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:16px; 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 em { 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"] em { opacity:0; visibility:hidden;  }
div#weatherHolder tr[data-panel="hide"] em { 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;}

/*Striped table rows - this table is on UK Forecast and Observation pages only */
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9;
}

/* forecast table footer */
#weatherTableFooterLeft {
    float: left;
    width: 50%;
}

#weatherTableFooterRight {
    float: right;
    width: 50%;
}

/* 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 !important}
    #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 0; 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 th b {display:block; font-weight:400; height:auto; margin:0; padding:0; position:static;}
    #weatherHolder th em {font-style:normal;}
    #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);
    }
}