html,
body {
    overflow: hidden;
    height: 100%;
}

.widget {
    height: 100%;
    background: #3781ae;
    padding: 15px;
    font-family: 'Arimo', sans-serif;
    font-size: 10px;
    min-width: 300px;
}

.widget .scrollbar-inner {
    height: 100%;
}

.widget .location_block {
    margin: 5px 0 30px;
    overflow: hidden;
}

.widget .location_block .tides_list {
    display: inline-block;
    width: 300px;
}
.widget .location_block .list_item{
    margin-bottom: 10px;
}

.widget .location_block .station_list{
    width: 100%;
}

.widget .location_block .location_list{
    width: 100%;
}

.widget_header {
    background: #fff;
    width: 75%;
    margin: 0 auto 10px;
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding: 5px 0;
}

.widget .widget_box {
    margin-bottom: 30px;
}

.widget .widget_box > .content {
    padding: 5px;
    background: #fff;
}

.widget .widget_footer a{
    display: block;
    color: #fff;
    text-transform: uppercase;
    text-decoration: underline;
    font-weight: bold;
    font-size: 10px;
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.04em;
    padding: 13px 50px 13px 15px;
    background: #fe8335 url('../images/fish_logo.png') no-repeat right 8px center;
    border-radius: 0 0 8px 8px;
}

.widget .header .location {
    text-transform: uppercase;
    font-size: 24px;
    font-weight: bold;
    margin: 0 auto 20px;
    text-align: center;
}

.widget .header .date_list {
    width: 270px;
    margin: 0 auto 20px;
    padding: 15px;
    border: 1px solid #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 25px;
    text-align: center;
    box-sizing: border-box;
}

.widget .content .bold_text {
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.widget .content .section {
    overflow: hidden;
}

.widget .content .break {
    border-bottom: 1px dotted #ccc;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.widget .content .item_more_info {
    padding-top: 10px;
    border-top: 1px dotted #ccc;
    margin-top: 10px;
}

.widget .content .item_more_info.open_info {
    display: block;
}

.widget .content .degree .slide_info_link {
    font-size: 20px;
    font-weight: normal;
    height: 40px;
    vertical-align: middle;
    cursor: pointer;
    text-align: center;
}

.widget .content .degree span {
    line-height: 40px;
}

.widget .content .info_block > div {
    margin-bottom: 7px;
}

.widget .content .item_degree {
    overflow: hidden;
}

.widget .content .rating_block {
    width: 40%;
    float: left;
    font-size: 18px;
    color: #fe8335;
    line-height: 50px;
}

.widget .content .degree_block {
    margin-left: 45%;
    font-size: 24px;
    white-space: nowrap;
    padding: 8px 0 8px 40px;
    overflow: hidden;
}

.widget .content .sun {
    background: url('../images/sun.png') left center no-repeat;
}

.widget .content .rain {
    background: url('../images/rain.png') left center no-repeat;
}

.widget .content .cloudy {
    background: url('../images/cloudy.png') left center no-repeat;
}

.widget .content .partly_cloudy {
    background: url('../images/partly_cloudy.png') left center no-repeat;
}

.widget .content .patchy_rain {
    background: url('../images/patchy_rain .png') left center no-repeat;
}

.widget .content .degree_block .up {
    color: #99da7e;
    text-align: center;
}

.widget .content .degree_block .down {
    color: #d695a9;
    text-align: center;
}

.widget .content .item_info {
    overflow: hidden;
}

.widget .content .moon_block {
    float: left;
    width: 28%;
    line-height: 40px;
    white-space: nowrap;
}

.widget .content .feeding_block {
    margin-left: 28%;
}

.widget .content .feeding_block .major_block {
    width: 50%;
    float: left;
}

.widget .content .feeding_block .major_block > div {
    white-space: nowrap;
}

.widget .content .feeding_block .minor_block {
    width: 50%;
    float: left;
}

.widget .content .moon {
    width: 28px;
    height: 28px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #333;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.widget .content .moon svg {
    display: block;
    top: 0 !important;
    left: 0 !important;
}

.widget .moon_value {
    font-size: 18px;
    vertical-align: middle;
}

.widget .info {
    margin-bottom: 7px;
}

.widget .graph {
    height: 150px;
    width: inherit;
}

.widget .stations {
    overflow: hidden;
}

.widget .station_box {
    float: right;
    font-size: 15px;
    width: 60%;
}

.widget .station_box .station_list {
    width: 100%;
}

.station_name {
    overflow: hidden;
    white-space: nowrap;
    font-size: 15px;
    width: 100%;
}

.station_name .station_text {
    margin-right: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.station_name .station_distance {
    float: right;
    color: #fff;
    width: 45px;
}

.widget .margin-10 {
    margin-bottom: 10px;
}

.widget .margin-15 {
    margin-bottom: 15px;
}

.widget .no-padding {
    padding: 0 !important;
}

.code_print {
    padding: 30px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 20px;
}

.widget .conditions{
    white-space: nowrap;
}

.wind_arrow span {
    display: inline-block;
    vertical-align: middle;
}

.nne { transform: rotate(22.5deg); }
.ne { transform: rotate(45deg); }
.ene { transform: rotate(67.5deg); }
.e { transform: rotate(90deg); }
.ese { transform: rotate(112.5deg); }
.se { transform: rotate(135deg); }
.sse { transform: rotate(157.5deg); }
.s { transform: rotate(180deg); }
.ssw { transform: rotate(202.5deg); }
.sw { transform: rotate(-135deg); }
.wsw { transform: rotate(-114.5deg); }
.w { transform: rotate(-90deg); }
.wnw { transform: rotate(-69.5deg); }
.nw { transform: rotate(-45deg); }
.nnw { transform: rotate(-24.5deg);}

@media (max-width: 450px) {

    .widget .content .degree {
        font-size: 30px;
    }

    .widget .content .degree .slide_info_link {
        font-size: 16px;
    }

    .widget .station_box {
        width: 100%;
    }
}

.morris-hover {
    position: absolute;
    z-index: 1000
}

.morris-hover.morris-default-style {
    border-radius: 10px;
    padding: 6px;
    color: #666;
    background: rgba(255, 255, 255, 0.8);
    border: solid 2px rgba(230, 230, 230, 0.8);
    font-family: sans-serif;
    font-size: 12px;
    text-align: center
}

.morris-hover.morris-default-style .morris-hover-row-label {
    font-weight: bold;
    margin: 0.25em 0
}

.morris-hover.morris-default-style .morris-hover-point {
    white-space: nowrap;
    margin: 0.1em 0
}

.pln {
    color: #000
}

@media screen {
    .str {
        color: #080
    }

    .kwd {
        color: #008
    }

    .com {
        color: #800
    }

    .typ {
        color: #606
    }

    .lit {
        color: #066
    }

    .pun, .opn, .clo {
        color: #660
    }

    .tag {
        color: #008
    }

    .atn {
        color: #606
    }

    .atv {
        color: #080
    }

    .dec, .var {
        color: #606
    }

    .fun {
        color: red
    }
}

@media print, projection {
    .str {
        color: #060
    }

    .kwd {
        color: #006;
        font-weight: 700
    }

    .com {
        color: #600;
        font-style: italic
    }

    .typ {
        color: #404;
        font-weight: 700
    }

    .lit {
        color: #044
    }

    .pun, .opn, .clo {
        color: #440
    }

    .tag {
        color: #006;
        font-weight: 700
    }

    .atn {
        color: #404
    }

    .atv {
        color: #060
    }
}

pre.prettyprint {
    padding: 2px;
    border: 1px solid #888
}

ol.linenums {
    margin-top: 0;
    margin-bottom: 0
}

li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
    list-style-type: none
}

li.L1, li.L3, li.L5, li.L7, li.L9 {
    background: #eee
}