@charset "UTF-8";
/* CSS-document för U2 */

html, body, div, header, nav, main, section, footer {margin: 0; padding: 0;}
header, nav, main, footer, section {display: block;}

header {background-image: url(pics/gif);
background-repeat: no-repeat; height: 140px;background-position:center}

body {background-color: #555; color:#000; font-family: "Times New Roman", Times,
serif;font-size: 12px;}
#wrapper {max-width: 800px; margin:0 auto; background-color:#111;}
#thisPage {background-color: #AAA; color: #000;}
#question{ font-size:1.2em;}
#floatImg{float: right;padding: 10px; max-width: 200px;}

main h2, h3 {color:#00F;}
main h3 {border-top:1px solid #999; padding-top: 10px; clear:right;}
main {padding:10px;margin-left: 17.5%;background-color: #AAA}
main:after {content:""; display: block; clear:both;}
header h1, h3 {margin: 0px; padding: 10px;color: #999;}
/* väljer en färg som finns i bakgrundsbilden #EF5F0F och en skuggning*/

nav {float: left; width: 17.5%; padding-top: 20px; }
nav ul {list-style:none; padding-left:15px; }
nav ul li {display:block; margin-bottom:25px;}
nav a {text-decoration: none;padding: 10px;display: block;}
nav a:link, nav a:visited {background-color: #CCC; color:#000;}
nav a:hover, nav a:active {background-color: #AAA; color:#FFF;}
#question {background-color: #FFF;border: solid;border-color:
    #666;border-radius: 10px;padding:10px;width:80%;margin:0 auto;
    box-shadow: 3px 3px #333}
th, td {border: 1px solid #666;padding: 5px;}
table {border-collapse:collapse;box-shadow: 3px 3px #999;margin-bottom: 15px;}
tr {background-color: #FFF;}
th {background-color: #000; color:#FFF;}
tr:nth-child(even){background-color: #CCC}
main h3:before {content: "---";}
img {max-width: 100%}
@media screen and (max-width:640px)
    {
    nav {float: none;width:100%;}
    nav ul {list-style:none; padding: 0; }
    nav ul li {display:inline;}
    nav a {padding: 5px;display: inline-block;}
    main {margin-left:0;padding:2px}
    header {height:200px;background-size: auto 100px}
    }
@media screen and (max-width:360px)
    {
    nav {margin:0;padding:0;}
    nav ul {padding:0;margin:0; }
    nav ul li {display:block;padding:0;margin:0;}
    nav a {padding: 0px;display:block;text-align: center;width: auto;border:3px outset #900}
    main {margin-left:0;padding:0px}
    } @media screen and (max-width:340px)
    {
    th, td {display: block;}
    table {box-shadow: 0px 0px #999;width:100%;}
    tr {border-bottom:2px solid #333;}
    } 
@media screen and (max-width:280px)
    {
    #floatImg{float: none;}
    } 

footer {background-color: #000; color:#FFF;text-align:
center;padding: 10px; clear: both;}