* {
    box-sizing: border-box;
}

.row:after {
    content: "";
    clear: both;
    display: block;
}
	
[class*="col-"] {
	float: left;
	padding: 5px;
	/* border: 1px solid red; */
}

@font-face {
  font-family: 'DejaVuSans';
  src: url('../font/DejaVuSans.eot?#iefix') format('embedded-opentype'),  
       url('../font/DejaVuSans.woff') format('woff'), 
	   url('../font/DejaVuSans.ttf')  format('truetype'), 
	   url('../font/DejaVuSans.svg#DejaVuSans') format('svg');
  font-weight: normal;
  font-style: normal;
}

html 	{ 
	font-family:DejaVuSans,Arial,sans-serif; 
	background-color: rgb(245, 237, 214); 
	font-weight: normal;
	color: navy;
	margin:0px;
} 

img { border:none; 
	vertical-align:middle; 
	text-align:center;
	margin-right:3px; 
	max-width: 100%;
    height: auto;
}

hr 	{ 
	color:rgb(049,099,156); 
}

.rechts {
	float:right;
}

.center {
	text-align:center;
}

footer {
	font-size: 0.6em;
	color: gray;
}

/* Abschnitt wurde selektiert */
.selected { 
	background-color:rgb(000,128,128); 
	color:rgb(213,204,187); 
	text-shadow: 0px 0px;
} 
.mselect     { color:rgb(220,0,0); } 
                                      /* #0066cc 00 = 000 66 = 102 cc = 204 */
a:link    { font-weight:bold; color:rgb(098,067,253); text-decoration:none; } /* noch nicht besuchte Ziele */
                                      /* #0099ff 00 = 000 99 = 153 ff = 255 */
a:visited { font-weight:bold; color:rgb(098,067,253); text-decoration:none; } /* besuchte Ziele */
                                      /* #ff6600 ff = 255 66 = 102 00 = 000 */
a:hover   { font-weight:bold; color:rgb(007,141,023); text-decoration:none; } /* Verweise bei "MouseOver" */
                                      /* #ff6600 ff = 255 66 = 102 00 = 000 */
a:active  { font-weight:bold; color:rgb(098,067,253); text-decoration:none; } /* Angeklickte Verweise */
                                      /* #ff6600 ff = 255 66 = 102 00 = 000 */
a:focus   { font-weight:bold; color:rgb(098,067,253); text-decoration:none; } /* Verweise, die Fokus erhalten */

/* For mobile phones: and (orientation: portrait|landscape) */
	[class*="col-"] {
		width: 100%;
	}
	.col-2 {width: 16.66%;}
	.col-10 {width: 83.33%;}

	header {
		/* border: 1px solid red; */
		padding: 2px;
		font-size:0.6em;
		text-shadow: 2px 2px 5px #555555;
		box-shadow: 5px 3px 25px #555555;
	}

	/* linker Header  */
	.lheader {
		text-align: left;
	}

	/* mittlerer Header  */
	.mheader {
		text-align: left;
	}
	/* rechter Header */
	.mheader {
		text-align: left;
	}

	nav {
		padding: 2px;
		padding-top: 15px;
		font-size:0.6em;
		/* width:20%; */
		text-align:center;
		/* border: 1px solid red; */
	}

	main {
		padding: 3px;
		font-size:0.8em;
		width:75%;
		/* border: 1px solid red; */
	}

/* For tablets: and (orientation: portrait|landscape) */
@media only screen and (min-width: 600px) {
	.col-m-1 {width: 8.33%;}
	.col-m-2 {width: 16.66%;}
	.col-m-3 {width: 25%;}
	.col-m-4 {width: 33.33%;}
	.col-m-5 {width: 41.66%;}
	.col-m-6 {width: 50%;}
	.col-m-7 {width: 58.33%;}
	.col-m-8 {width: 66.66%;}
	.col-m-9 {width: 75%;}
	.col-m-10 {width: 83.33%;}
	.col-m-11 {width: 91.66%;}
	.col-m-12 {width: 100%;}
}

/* for desktops */
@media only screen and (min-width: 768px) {
	header {
		padding: 5px;
		font-size:1.1em;
	}
	
	/* mittlerer Header  */
	.mheader {
		text-align: center;
	}
	/* rechter Header */
	.rheader {
		text-align: right;
	}
	nav {
		padding: 5px;
		padding-top: 20px;
		font-size:0.8em;
    }

	.main {
		padding: 5px;
		font-size:1.0em;
	}

	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
}