@charset "utf-8";

    /*table {
        width: 100%;
        float: left;
        clear: both;
        border-style: none;
    }

    th, td {
        border-bottom-width: 0.1em;
        border-bottom-style: solid;
        border-bottom-color: lightgrey;
    }
    tr {
        border-style: none;
    }*/
    body {
        background-color: rgb(252,252,252);
    }
    .meny {
        /*max-width: 1200px;*/
        padding-left: 15px;
        padding-right: 15px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        margin-bottom: 15px;
        background: rgb(250,250,250);  
        border: solid;
        border-width: 0.05rem;
        border-color: gainsboro;
        border-radius: 6px;
    }
    .container {
        background-color: white;
        box-shadow: 0px 0px 9px 3px #e8e8e8;
        padding-top: 1.5em;
        padding-bottom: 1.5em;
        padding-left: 2.5em;
        padding-right: 2.5em;
        margin-bottom: 15px;
        min-height: 80%;
        border-radius: 6px;
    }
    footer {
        position: relative;
        clear: both;
        max-width: 1140px;
        padding: 15px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        margin-bottom: 15px;
        background: rgb(250,250,250);  
        border: solid;
        border-width: 0.05rem;
        border-color: gainsboro;
        border-radius: 6px;
    }
    table.vaer th {
        min-width: 10%;
        width: 14%;
        max-width: 14%;
    }
    .data {
        width: 5%;
        text-align: center;
    }
    .data1 {
        width: 3%;
    }
    .ikon {
        position: relative;
        top: 7px;
    }
    .noborder {
        border: none;
    }
    select {
        border-radius: 4px;
        padding: 2px;
    }
    input[type=submit], input[type=date], button {
        border-radius: 4px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 2px;
        padding-bottom: 2px;
        border: 1px solid #ccc;
    }
    input[type=text] {
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        margin-top: 1px;
        margin-bottom: 1px;
        padding: 2px;
    }
    .bilde {
        padding-right: 0.5em;
        width: 13%;
        height: 130px;
        max-height: 130px;
    }
    #spilles {
        width: auto;
        clear: right;
    }
    .sanger {
        width: 100%;
        }
    .sangheader {
        padding-right: 0.5em;
        width: 6%;
    } 
    .sanginfo {
        width: 78%;
    }
    .canvas {
        width: 335%;
        overflow: auto;
    }
    .chart {
        width: 1000px;
        height: 600px;
        overflow: auto;
    }
    @media only screen  
        and (max-device-width : 480px) {
            .meny {
                margin: auto;
                width: 100%;
            }
            .container {
                margin: auto;
                width: 100%;
                padding-bottom: 0.5em;
                padding-left: 0.5em;
                padding-right: 0.5em;
                padding-top: 0.5em;
                margin-bottom: 0;
            }
            footer {
                margin-left: auto;
                margin-right: auto;
                margin-top: 0;
                margin-bottom: 0;
                width: 100%;
                height: 10%;
                padding-bottom: 0em;
                padding-left: 0.5em;
                padding-right: 0.5em;
                padding-top: 0.5em;
            }
            .bilde {
                float: left;
                width: 75px;
                height: 75px;
                padding-right: 0.5em;
                margin-bottom: 4em;
                clear: both
            }
            .sangheader {
                float: left;
                width: 100%;
                clear: both;
            }
            .sanginfo {
                float: left;
                clear: both;
                overflow: hidden; 
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 275px;
            }
            .canvas, .graf {
                position: relative;
                height: 110%;
                width: 300%;
                overflow: auto;
            }
	}
    @media (min-width:576px){
        .container, .meny, footer {
            max-width:540px
        }
    }
    @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 800px) {
        .meny {
            margin: auto;
            width: 100%;
        }
        .container {
            max-width:720px;
            margin:none;
            padding: none;
        }
        .bilde {
            padding-right: 0.5em;
        }
        .sanginfo {
            float: left;
            clear: both;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 600px;
        }
    }
    @media (min-width:992px){
        .container, .meny, footer {
            max-width:960px
        }
   }
    @media (min-width:1200px){
        .container, .meny, footer {
            max-width:1140px
        }
    }
    #klokke {
        clear:both;
        margin-top: 0.5em;
    }
    hr {
        color:#eee;
    }
    .nummer {
        width: 3%;
        border-right-width: 0.1em;
        border-right-style: solid;
        border-right-color: darkgrey;
        padding-right:0.5em;
    }
    .artist {
        width: 25%;
        padding-left: 0.5em;
    }
    .tittel {
        width: 67%;
        padding-left: 1em;
        padding-right: 1em;
    }
    .panel-heading {
        font-size: 1.2em;
        font-weight: bold;
    }
    #fm {
        float:left;
        padding: 1em;
    }
    #nettradio {
        float: left;
        padding: 1em;
    }
    #driftsmeldinger {
        float: left;
        clear: both;
        width: 100%;
    }
    #vaersok {
        min-width: 50%;
    }
    #vaerknapp {
        background:none;
        border:none; 
        padding:0;
        cursor:pointer;
    }
    #vaerknapp:hover {
        text-decoration:underline;
    }