* {
box-sizing: border-box;
}
	
#main { 
width: 100%;
margin: 0 auto;
}

header { 
width: 100%;
padding:1.5rem;
}

footer {
width: 100%;
clear: both;
font-size: 1rem;
background-color: #66ffcc;
padding: 1rem;
}

section, article, aside {
width: 100%;
}  
aside img {
height: auto;
max-width: 100%;
}   

aside ul li { 
margin-bottom: 1.0rem;
margin-left: 1.0rem;
}
  
section ul > li {
display: 	inline; 
padding: 0.6rem; 
margin:  0.6rem;
} 

h1	{ 
font-size: 2.8rem; 
}

h2	{ 
font-size: 2.0rem; 
}

h3	{ 
font-size: 1.8rem; 
}

h4	{ 
font-size: 1.5rem; 
}

li.low {
display: block;
font-size: 0.8rem;
}

li.dikt {
display: block;
padding: 1px 8px;
}
  
li.hem {
display: block;
padding: 4px;
font-size: 1.3rem;
}

a:link		{ 
font-size: 	100%;
padding:	4px; 
color: 		#0000aa; 
background: transparent;
font-weight: bold; 
text-decoration: none;
 }
a:visited	{  
color: 		#800000;
 }
a:active	{  
color: 		#ff3333; 
 }
a:hover		{  
color: 		#8b0000;  
background: transparent; 
 }			
 
b { 
color: red;
font-weight: bold;
}

#hua { 
color: #fff;
background-color:#9400d3; 
border: 3px solid crimson;
}

strong { 
font-weight: bolder;
}

caption, tr { 
color: blue;
}

tr#svart { 
color: black;
background-color: #fff;
} 

td { 
border: 1px solid orange;
padding: 0.5rem;
margin: 1rem;
}

p { 
font-size: 1.1rem;
}	
 
p.low { 
font-size: 0.8rem; 
color: #000; 
font-weight: 700; 
}

p.bol { 
font-size: 1.2rem; 
color: teal; 
padding: 5px; 
}	

p.fet { 
font-size: 1.2rem;
font-weight: bold; 
color: #000; 
background: transparent; 
}	

p.obs { 
font-size: 1.3rem; 
color: maroon; 
font-weight: 700; 
}

p.pil { 
font-size: 1.34rem; 
margin-top:-25px;
margin-bottom:-20px;
color: #800;
background-color: transparent; 
font-weight: 800; 
}

p.eks { 
font-size: 1.34rem; 
color: #800;
background-color: transparent; 
font-weight: 800; 
}

img, video, canvas { 
max-width: 100%; 
}

img.wide {
width: 	auto;
max-width: 100%;
height:	auto;
float:	none;
}

pre { 
font-size: 1.2rem; 
}

img.line {  
height: 5px;
width: 100%;
border: 2px solid orange;
}
 
img.linjen {  
height: 5px;
width: 100%;
background-color: white;
}

.cc {
text-align:	center;
}

#alfa {
color: #0ff;
text-shadow: 3px 2px 4px #f09;
}

#beta {
color: #f0f;
text-shadow: -4px 2px #ff9;
}
/* se upp id only one */
#delta {
color: #ff6; 
text-shadow:
1px 2px rgba(0,0,0,0.4),
1px 3px rgba(0,0,0,0.4),
1px 4px rgba(0,0,0,0.4),
1px 5px 0 rgba(0,0,0,0.4);
}
.delt {
color: #ff6; 
text-shadow:
1px 2px rgba(0,0,0,0.4),
1px 3px rgba(0,0,0,0.4),
1px 4px rgba(0,0,0,0.4),
1px 5px 0 rgba(0,0,0,0.4);
}

figure { 
height: 0; 
padding-bottom: 56.25%; 
position: relative;
width: 100%;
} 
iframe { 
height: 100%; 
left: 0; 
position: absolute; 
top: 0; 
width: 96%;
}

.videoContainer { 
position: relative;
padding-bottom: 55%;
height: 0;
overflow: hidden;
}
 
.videoContainer iframe,
.videoContainer object, 
.videoContainer embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} 
		
.vita {
color:			red;
text-shadow:	1px 2px 3px #069;
}
 
.crimson {
font-family:	"Lucida Sans", "Helvetica Neue", Helvetica, Tahoma, sans-serif;
color:			#fff;
background-color:orange;
padding: 1rem;
text-shadow:	0 1px 4px crimson;
}

.container {
    overflow: hidden;
    background-color: #b8860b;
    font-family: Arial;
}

.container a {
    float: left;
    font-size: 1.2rem;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 1.3rem; 
	font-weight: bold;	
    border: none;
    outline: none;
    color: white;
    padding: 12px 16px 15px 16px;
    background-color: inherit;
}

.container a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #dff;
}

.dropdown:hover .dropdown-content {
    display: block;
}
		  
@media screen and (min-width: 900px) and (max-width: 1000px) { 
	
#main { 
width: 100%;
margin: 0 auto;
}

section {
width: 65%;
float: left;
}

section ul > li {
display: 	inline; 
padding: 0.2rem; margin:0.2rem;
} 
  
aside {
width: 33%;
float: right;
margin-right: 2px;
font-size: 1rem; 
}

aside pre { 
font-size: 0.8rem;
}
.rotate {
-webkit-transform:	rotate(-20deg);	
-o-transform:		rotate(-20deg);
-moz-transform:		rotate(-20deg);
transform:			rotate(-20deg);
}
}

@media screen and (min-width: 1001px) and (max-width: 1200px)  { 
	
#main { 
width: 96%;
margin: 0 auto;
}

section {
width: 65%;
float: left;
}

section ul > li {
display: 	inline; 
padding: 0.5rem; margin:0.5rem;
}
  
aside {
width: 34%;
float: right;
}

aside ul li {
margin: 1rem;
font-size: 1.15rem;
}

aside pre { 
font-size: 0.8rem;
}

#kol {
-webkit-column-width:	22rem;	
-o-column-width:		22rem;
-moz-column-width:		22rem;
column-width: 			22rem;
}
 
.rotate {
-webkit-transform:	rotate(-20deg);	
-o-transform:		rotate(-20deg);
-moz-transform:		rotate(-20deg);
transform:			rotate(-20deg);
}
		
.vita {
font-family:	Verdana, Tahoma, Helvetica, sans-serif;
color:			red;
text-shadow:	1px 2px 2px #006;
} 
} 

@media screen and (min-width: 1201px) and (max-width: 1900px) { 	
#main { 
width: 90%;
margin: 0 auto;
}

#eng { 
width: 80%;
margin: 0 auto;
}

section {
width: 65%;
float: left;
}

section ul > li {
display: 	inline; 
padding: 0.5rem; margin:0.5rem;
}
  
aside {
width: 34%;
float: right;
}

aside ul li {
margin: 1rem;
font-size: 1.25rem;
}

aside pre {
font-size: 1.0rem;
} 
p.bol { 
font-size: 1.3rem; 
color: teal; 
background: #fff;  
padding: 5px; 
}	

p.obs { 
font-size: 1.4rem; 
color: maroon; 
background:transparent;
font-weight: 700; 
}

.rotate {
-webkit-transform:	rotate(-20deg);	
-o-transform:		rotate(-20deg);
-moz-transform:		rotate(-20deg);
transform:			rotate(-20deg);
}
	
#kol {
-webkit-column-width:	24rem;	
-o-column-width:		24rem;
-moz-column-width:		24rem;
column-width: 			24rem;
}
}
        
@media all and (min-width: 1901px)  { 		
#main { 
width: 84%;
margin: 0 auto;
}

#eng { 
width: 70%;
margin: 0 auto;
}

section {
width: 65%;
float: left;
}

section ul > li {
display: 	inline; 
padding: 0.5rem; 
margin:0.5rem;
}
  
section table { 
font-size:  1.4rem;
}  

aside {
width: 34%;
float: right;
}

aside ul li {
margin-bottom: 1rem;
font-size: 1.35rem;
}

aside pre {
font-size: 1.0rem;
} 

footer#inde {
font-size: 1.2rem;
background-color: #66ffcc;
padding: 1.2rem;
bottom: 0;
left: 0;
position: fixed;
right: 0;
}
}

/*   kor.css - validerad obs en cssfil med samma namn (kor.css) ligger i Lenz samt i folder ray  */