/* 
header
======
- medium density: samsung galaxy tab 3
- high density: htc m8, iphone 5
*/

header {background:#0e76bd; color:white; width:100%; position:absolute; top:0px; height:3em;}
xheader {position:fixed; height:3em; z-index:10; background:#0e76bd; color:#fff; width:100%;}
xheader strong {height:100%; display:inline-block; float:left; margin-left:.5em; position:relative;}
xheader strong img {position:absolute; top:50%; height:3em; margin-top:-1.5em;}

header #logo {position:absolute; top:0; bottom:0; left:0; right:0; margin:auto auto auto 1em; height:70%; width:200px; background:url(/res/graphics/logo_with_swish.png) no-repeat; background-size: auto 100%;}

header img.loading {display:none;}
header nav {height:3em; text-align:right; margin-left:5em; overflow:auto; overflow-y:hidden;}
header nav a {height:3em; line-height:300%; display:inline-block; color:white; padding:0 1em; text-decoration:none; color:#fff; padding:0 .6em; position:relative;}
header nav a.navon,
header nav a:hover {border-bottom:.4em solid #ccc; text-decoration:none; color:#fff; border-bottom-color:white;}
header nav a.logout:hover {background:red; border-bottom:none;}
header nav a span {background:red; padding:.2em; font-size:.75em; line-height:100%;position:absolute; top:0; right:0; height:1.25em;}
header #main-menu-toggle {display:none;  color:white; float:right;background:transparent; border:none; font-size:3em;  padding:0 .5em; line-height:100%;}
header #status {display:none;}
header #status strong span {float:left; font-size:1.5em; font-weight:200; padding-top:15px;}
header #status strong span em {font-weight:700; font-style:normal;}

/* pc [narrow]  */
@media screen and (max-resolution: 96dpi) and (max-width:850px) {
    header #main-menu-toggle {display:inline-block; }
    header nav {display:none; z-index:30; position:absolute; top:3em; z-index:30; margin:0; width:100%; height:auto;}
    header nav a {width:100%; background:#0e76bd; border-top:1px solid #5B89A9; text-align:left; padding-left:2em;}
}

/* mobile [medium density] */
@media only screen (min-resolution: 160ppi) { 
    header {height:4em;}
    header #main-menu-toggle {display:inline-block; font-size:4em;}
    xheader img {width:30%; max-width:14em; height:auto !important;} 
    header nav {display:none; z-index:30; position:absolute; top:3em; z-index:30; margin:0; width:100%; height:auto;}
    header nav a {font-size:2em; width:100%; background:#0e76bd; border-top:1px solid #5B89A9; text-align:left; padding-left:2em;}
    header nav a:hover {border-bottom:none}
}

/* mobile [high density] */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution:2dppx) { 
    header #main-menu-toggle {display:inline-block;}
    header nav {display:none; z-index:30; position:absolute; top:3em; z-index:30; margin-left:0; height:auto;}
    header nav a {width:100%; background:#0e76bd; border-top:1px solid #5B89A9; text-align:left; padding-left:2em;}
    header nav a:hover {border-bottom:none}
}