/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

h1 {
    font-family: Arial;
    color: white;
    font-size: 26px;
    margin-top: 3px;
    margin-bottom: 20px;
}

    h1 a {
        color: #ff4f00;
        padding-top: 22px;
    }

body {
    background-color: #111010;
    padding-top: 10px;
}

.top-nav-desktop {
    display: none;
}

.top-nav-mobile {
    display: none;
    width: 360px;
    margin-top: 10px;
}

.logo {
    position: fixed;
    top: 10px;
    left: 323px;
}

a {
    text-decoration: none;
}

    a:visited .title {
        color: #bebebe;
    }

ul {
    margin-top: 3px
}

/* mobile: */
.article {
    width: 360px;
    margin-bottom: 20px;
    border-bottom: 1px solid #232529;
}

.title {
    font-size: 18px;
    font-family: Arial;
    color: #DDD;
    font-weight: normal;
}

.description {
    font-size: 12px;
    font-family: apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    color: #808f95;
}

.source {
    font-size: 10px;
    font-family: apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    color: #808f95;
    font-weight: bold;
}

.image {
    width: 350px;
}

/* desktop design ideas
        .article     { width:360px; margin-bottom:20px; border-bottom:1px solid #232529; float:left; width:380px; height:460px; }
        .title       { font-size:21px; font-family:Arial; color:#bebebe; font-weight:normal; }
        .description { font-size:16px; font-family:Arial; color:#808f95;}
        .source      { font-size:10px; font-family:Arial; color:#808f95; font-weight:bold;}
        .image { width:350px; }
        */


/*

.image { max-height: 196px; }  // to try: crop rather than resize
.article { float: left; height: 393px; margin-right: 18px; margin-bottom:0px; border-bottom:0px; }
.title { font-size: 21px; }
h1::before { content: "\a"; white-space: pre; padding-left: 1600px; }
//h2::before { content: "\a"; white-space: pre; padding-left: 1600px; }
h4::before { content: "\a"; white-space: pre; padding-left: 1600px; }
tr.titleBox { height: 14% }
tr.descriptionBox { height: 100%;}
table.top-headlines { float:left; margin-right:30px; }
.stats { width:100% }
.stats .image { max-height:100px; }
.top-words { float:left; margin-right:10px; width: 430px; padding-right:25px; }

*/


.nav {
    font-size: 13px;
    font-family: Arial;
    color: #ff4f00;
    background-color: black;
    position: fixed;
    bottom: 0;
    float: left;
    padding: 4px;
    width: 100%;
}

    .nav a {
        color: #ff4f00;
    }

        .nav a:visited {
            color: #ff4f00;
        }

.topnav {
    font-size: 18px;
    font-family: Arial;
    color: #ff4f00;
    margin-top: 0px;
}

    .topnav a {
        color: #ff4f00;
    }

        .topnav a:visited {
            color: white;
        }
/* color: #ff4f00; */

.separator {
    color: #808f95;
}

.stats {
    font-size: 13px;
    font-family: Arial;
    color: #808f95;
    width: 360px;
}

    .stats ul {
        padding-left: 18px;
        margin-bottom: 0;
    }

    .stats li {
        color: white;
    }

    .stats h4 {
        margin-bottom: 8px;
        color: white;
    }

/* DarkSky Embed */
.dayExtras {
    color: #bebebe;
}

/* covid-19 */
.covid-19 {
    font-family: Arial;
    color: white;
    padding-bottom: 20px;
    font-size: 14px;
}

.covid-red {
    color: red;
}

.covid-green {
    color: green;
}

.covid-dark {
    color: #666666;
}

.covid-stats td, th {
    padding: 2px;
    text-align: right;
    padding-right: 8px;
}

.covid-location {
    font-size: 14px;
}

/* Modal */
#modal {
    left: 50%;
    margin: -250px 0 0 -32%;
    opacity: 0;
    position: absolute;
    top: -50%;
    visibility: hidden;
    width: 65%;
    box-shadow: 0 3px 7px rgba(0,0,0,.25);
    box-sizing: border-box;
    transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    font-family: Arial;
}

    #modal:target {
        opacity: 1;
        top: 50%;
        visibility: visible
    }

    #modal .header, #modal .footer {
        border-bottom: 1px solid #1ABC9C;
        border-radius: 5px 5px 0 0
    }

    #modal .footer {
        border: none;
        border-top: 1px solid #e7e7e7;
        border-radius: 0 0 5px 5px
    }

    #modal h2 {
        margin: 0;
        color: #fff
    }

    #modal .btn {
        float: right
    }

    #modal .copy, #modal .header, #modal .footer {
        padding: 10px;
        color: black;
    }

.modal-content {
    background: #333333;
    position: relative;
    z-index: 20;
    border-radius: 5px;
    color: #fff
}

#modal .copy {
    background: white;
}

#modal .overlay {
    background-color: #000;
    background: rgba(0,0,0,.8);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10
}

.copy a {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: green;
}


.settings {
    position: fixed;
    top: 7px;
    width: 350px;
    padding: 5px;
    background-color: white;
    color: black;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}

    .settings button {
        margin-bottom: 5px;
        font-size: 18px;
    }

    .settings label {
        font-family: Arial;
        font-size: 18px;
    }

/* CUSTOM CHECKBOX */
.customCheckboxContainer {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    /* Customize the label (the container) */
    .customCheckboxContainer input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
/* Hide the browser's default checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}
/* Create a custom checkbox */
.customCheckboxContainer:hover input ~ .checkmark {
    background-color: #ccc;
}
/* On mouse-over, add a grey background color */
.customCheckboxContainer input:checked ~ .checkmark {
    background-color: #2196F3;
}
/* When the checkbox is checked, add a blue background */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Create the checkmark/indicator (hidden when not checked) */
.customCheckboxContainer input:checked ~ .checkmark:after {
    display: block;
}
/* Show the checkmark when checked */
.customCheckboxContainer .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* Style the checkmark/indicator */

.blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

.topWord {
    color: white;
    background-color: #222;
    border: 1px solid #333;
    margin-bottom: 4px;
    font-size: 12px;
    font-family: Arial;
    margin-right: 0px;
    margin-left: 0px;
}

.topNavMobile {
    color: white;
    background-color: #222;
    border: 1px solid #333;
    margin-bottom: 4px;
    font-size: 17px;
    font-family: Arial;
    margin-right: 0px;
    margin-left: 0px;
}

.nova-stats {
    border-collapse: collapse;
    background-color: #222222;
}

    .nova-stats th {
        background-color: white;
        color: black;
        padding: 4px;
    }

    .nova-stats td {
        color: darkgrey;
        border: 1px solid #111111;
        padding: 4px;
    }

/* loading.io */
.lds-loader {
    display: inline-block;
    position: relative;
    width: 70px;
    height: 70px;
}

    .lds-loader div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 40px;
        height: 40px;
        margin: 0px;
        border: 4px solid #ff4f00;
        border-radius: 50%;
        animation: lds-loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: #ff4f00 transparent transparent transparent;
    }

        .lds-loader div:nth-child(1) {
            animation-delay: -0.45s;
        }

        .lds-loader div:nth-child(2) {
            animation-delay: -0.3s;
        }

        .lds-loader div:nth-child(3) {
            animation-delay: -0.15s;
        }

@keyframes lds-loader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}



/* 
    http://jsfiddle.net/Jeremyjjbrown/rv5PR/   
    http://provide.smashingmagazine.com/smashingmag-3d/example1.html
.rotateY img { -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
.example div { background-color: rgba(255,0,0,0.2); float: left; height: 150px; margin-right: 20px; -moz-perspective: 200px; -ms-perspective: 200px; -o-perspective: 200px; -webkit-perspective: 200px; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; width: 150px; }
.example div:last-child { margin-right: 0; }
.example img { pointer-events: none; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; }
.example div:hover img { -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; }
    */