/*
:root{
    --tekst: #000066;
    --papir: #F0FFFF;
}
08/02/2016 : CSS Global variables have arrived!
  background-color: var(#F0FFFF);
  color: #000066; var(--tekst);
*/
/* html { scroll-behavior: smooth; } * forvirrende ved indtastning, især på smal skærm | virker ikke i safari, nov2023 | transition top:0? */ 

body {
    background-color: #F0F0F0; /*lysgrå udenfor side*/
    margin: 2px;
    padding: 0;
    }

#side{
	max-width: 800px;
	margin: 0 auto;  /*=center*/
    /*	padding: 5px; */
	color: #000066; /*mørkblå - tekst + border*/
	background-color: #f0f7ff;  /*lysblå */
	background: #f0f7ff;
	border: 1px dotted #000066;
   }

#toppen{
	padding: 0 2.5%;
    font:    bold 1.63em arial, sans-serif;
	text-align: center;
	background-color: #b3d9ff;
}
#toppen img{ width:32%; max-width:115px; height:auto; margin: 0.5%; padding:0 2.5%em}
	
hr {
    height: 0px;
    border: 0px;
    border-top: 2px solid #000066;
    margin: 5px;
	min-width: 70%;
  }
  
div {  
   display: block;
   /* border: 1px dotted red; /* tjek */
   }

#samle{
   margin: 2px;
   /*  ~linje <hr> mellem top og samle:  */
   border-top: 2px solid;   
   margin-top: 4px;
   padding-top:2px;
}  

#vside, #mside{
   border: 1px solid;
   margin: 2px;
   padding: 4px;
   float: left;
}

#vside { width: 298px; }

#mside{ width: 470px; text-align:center; }

#hside{
   /*tom*/
   }

#bund{
   padding: 2px;
   float: left;
   background-color: #f0f7ff;  /*lysblå; hvis bund blive bredere end side på smal skærm...  */   
   }
      
/* ... 4-5 faste størrelser (480,600,768) eller 1 fast (>800) ...ændret 02-2023 */   
  
@media screen and ( max-width: 799px ) { 
  #samle, #vside, #mside{float:none; width: auto; margin: 2px 0.25%;}
}
@media screen and (max-width: 520px) { 
  #vside, #mside{border-width: 1px 0px 0px 0px;}
  
  #toppen {font-size:1.2em}
}
 
img { border: 0; }
	
/* tjek	rammer: 
table, th, td  {
    border-collapse: collapse;
	border: 1px solid;
    } */
table {
    border-collapse: collapse;
	border: 1px dotted green;  /*test*/
	text-align: left;
    }

tr {  
    padding: 8px;
	border-bottom: 1px dotted;
	}

select:disabled { opacity:1; }  /* Crome/Edge/Opera har opacity mindre end 1, så teksten bliver for lys  */	

input,select	  {  
    color: #000066;
	border: 1px solid #000066;
    border-style: solid;	
	/*height: 16px  */
    font-family:  helvetica, arial, sans serif;
    padding-left: 1px;
	margin: 2px;
    background-color: #F8FBFF;
    }
input:focus , select:focus   { 
	border-color: blue;
	background-color: white;
	}
input:hover, select:hover   { 
	border-color: blue;
	/*background-color: white; */
    }
option  {
    background: white;
    color: #000066;
    }
	
button  { 
    cursor: pointer;
    width:  70px;
    margin: 5px;	
    border: 1px solid #000066;
    color: #000066;	
	transition: color 0.15s linear;
	font-weight: bold;
	font-family:  helvetica, arial, sans serif;
	/*font: bold 12px arial, sans-serif; */
    text-align:  center; 
    background-color: #b3d9ff;
	background: #b3d9ff;
   }
button:hover { 
	color: yellow;   
   }
button:active { /* 'trykket ned' */
	background-color: #000066;	
	background: #000066;
   }
button.vises {
   border: 1px solid white;
   color: #4d4dff;
   background-color: #cce7ff;
   background: #cce7ff;
   
   }   
   
/*
input[type=submit]{  
          cursor:pointer; 
          color: green;   
		  font-weight: bold;
          text-align: center;}  */
/*http://www.w3schools.com/cssref/css_selectors.asp
http://www.w3schools.com/colors/colors_picker.asp*/

	
a:link {
    color: #000066;
    text-decoration:underline;
   }
a:visited {
    color: #008866;
    text-decoration:underline;
   }
a:active {
    color: #993300;
    text-decoration:underline;
   }
a:hover {
    color: blue;
    text-decoration:none;
   }
   
.knap3{
	display: inline-block;
	margin: 3px 0;
	border: 1px solid;
	padding: 1px 5px; 
	}
a.knap3{
    color: #000066;
	background-color: #e0edff;	
    text-decoration: none;
   }
.knap3:hover{
    border: 1px solid #000066; 
    color: #6666ff; /* forskellig border og text color */
	text-decoration: underline;
  	background-color: #f0f7ff;   
   }
.knap3graa{
	display: inline-block;
	color: #a0a0a0;
	border: 1px solid;
	padding: 1px 5px; 
	background-color: #e0edff;	
    text-decoration: none;
   }  

.hr-linje { margin:5px; border-top:2px solid; }
.hr-linje-clear { margin:5px; border-top:2px solid; clear:both; }   
				
a.graa { color: #a0a0a0 }

P.ind { text-indent: 12px; }

h2 { font-family: arial black, arial, sans-serif; }
.lille { font-size: 80%; font-weight: normal; }

.center { text-align: center; }
   
.graa { color: #a0a0a0 }
.red { color: red; }
.blaa { color: blue; }	
.sort { color: #000000; }

.fed { font-weight: bolder;	}
.kursiv { font-style:italic; }   
   
#fod {
    padding: 10px;
    font: normal 65% arial, verdana, sans-serif;
    text-align: center;
	width: 96%;
	clear: both;
	/*  ~linje <hr> mellem top og samle:  */
   border-top: 1px solid;
   margin: auto;   
   margin-top: 4px;
   }