@charset "utf-8";
/* (c) ONLINE1.ch */

* {margin:0; padding:0;border:0px;}
img {border:0px;}
figcaption { font-size:11px;}

body {color:#333; font-family:Verdana, Geneva, sans-serif; background: #fff url(_img1/bg_paper_shrink4.png) repeat; font-size:14px; line-height:22px;}
header, nav, footer, aside, section, article {display: block;}

a{ color: #4165a7; text-decoration:none;}
a:hover { color:#F60; text-decoration:underline;}

a[href^="http://de.wikipedia.org/"], a[href^="https://de.wikipedia.org/"], a[href^="http://en.wikipedia.org/"], a[href^="https://en.wikipedia.org/"] { padding-right:18px; background:url(_img1/icon-wikipedia.gif) no-repeat center right;}

/* layout containers */
#bg0 { width:100%;background:url(_img1/bg.png) repeat-x fixed;}
#wrap { margin:0 auto; width:100%; max-width:1200px; border:0px solid orange;}
#wrap2 { box-shadow: 0px 9px 14px 0px rgba(50, 50, 50, 0.65);background-color:#fff; border-top:1px solid #ccc; border:0px solid yellow; margin:0px 0px 6px 0px;}

header { height:100px; background-color:transparent;}
#logo { float:left; margin:12px 0px 0px 0px;}
#had { border:1px solid red; display:none; width:auto; height:60px; float:left; margin:24px 0px 0px 30px;}

/* top navigation */
#tnav {width:100%; max-width:1200px; height:30px; background:url(_img1/bgn.png) repeat-x #435e85;}
#tnav ul {list-style: none; padding: 0; margin: 0;} 
#tnav li {float:left; margin: 0;}
#tnav li a {background: url(_img1/bgn.png) repeat-x; height:22px; float: left; display: block; padding:5px 30px 0px 30px; color:#FFF}  
#tnav li a:hover { background: url(_img1/bgtnh.png) repeat-x; color:#FFF; text-decoration:none;} 

section { background-color:#fff; float:left; padding:30px; width:66%; max-width:1200px; border-right:1px solid #ccc;}
nav {width:180px; min-width:26%; padding-top:40px; float:right;}

nav a {display:block;margin:0;color:#334263;padding:5px 0px 0px 20px;text-decoration: none;}
nav a:link, a:visited, a:active, a:hover {color:#4165a7;}
nav a:hover {color: #334263;text-decoration:none;}


article {float:right; border:0px solid blue;}

aside {background-color:#fff; width:190px; float:right; padding:10px; border:0px solid orange;}

footer { clear:both; height: 180px; padding:30px; font-size:14px; background:#dedede url(_img1/bgf.png) repeat; border-top:1px solid #ccc;}
footer hr {margin:0px 0px 5px 0px;}
.ft { width:170px; float:left; margin-right:30px; padding-bottom:10px;}/* FooterTable */
.ft a {color:#435e85; display: block; padding:2px 0px 2px 15px;}  
.ft a:hover { }

h1 { margin-bottom:22px; font-size:24px; font-weight:normal; line-height:34px; color:#623241}
h2 { margin-bottom:20px; font-size:20px; font-weight:normal; line-height:24px; color:#623241}
.h2s {font-size:16px; line-height:18px;}
h3 { margin-bottom:10px; font-size:18px}
h4 { margin-bottom:10px; font-size:16px}
h5 { margin-bottom:10px; font-size:14px}
code { font-size:16px}


hr { display:block; margin:20px 0px 20px 0px; clear:both; background:url(_img1/hr.gif) repeat-x; height:10px; border:0;}
li { margin-bottom:8px;}
ul, ol { padding-left: 16px; margin-left:18px; margin:10px 0px 0px 0px;}


/* Formularfelder & Buttons */

input { border:2px solid #4165a7; padding:5px; margin:5px 0px 5px 0px; border-radius: 3px 3px; font-family:Verdana, Geneva, sans-serif; font-size:14px;}
label {padding:5px; margin:5px 0px 5px 0px;display:block;float:left;}
.res {background:url(_img1/bgf.png) bottom repeat-x; border:2px solid #aaa; font-weight:bold;} /* Result field (input?) */
fieldset { border:2px solid #4165a7; border-radius: 6px 6px; padding:12px;}
fieldset br { clear:both;}
legend { padding:2px 10px 2px 10px; margin:10px 0px 10px 0px;background: url(_img1/bgh.png) repeat; border:2px solid #4165a7; border-radius: 6px 6px; color:#222}
select {border:2px solid #4165a7; padding:5px; margin:5px 0px 5px 0px; border-radius: 3px 3px; font-family:Verdana, Geneva, sans-serif; font-size:14px;}

input[type=button], input[type=reset], input[type=submit] {
	-moz-box-shadow:inset 2px 2px 2px 0px #9fb4f2;
	-webkit-box-shadow:inset 2px 2px 2px 0px #9fb4f2;
	box-shadow:inset 2px 2px 2px 0px #9fb4f2;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7892c2), color-stop(1, #476e9e));
	background:-moz-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:-webkit-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:-o-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:-ms-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
	background-color:#7892c2;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;
}
input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #476e9e), color-stop(1, #7892c2));
	background:-moz-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:-webkit-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:-o-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:-ms-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
	background-color:#476e9e;
}
input[type=button]:active, input[type=reset]:active, input[type=submit]:active {
	position:relative;
	top:1px;
}

textarea {border:2px solid #4165a7; padding:5px; margin:5px 0px 5px 0px; border-radius: 3px 3px; font-family:Verdana, Geneva, sans-serif; font-size:14px;}



/* Allgemeine Content-classes */
.alc {text-align:center} /* align center */
.alr {text-align:right} /* align center */

.rred {color:#903;} /* red marked */
.clal {clear:both}

.flr {float:right;}
.fll {float:left;}

.imgr {float:right; margin:0px 0px 20px 22px;}
.imgl {float:left; margin:0px 22px 20px 0px;}
.ish {box-shadow: 6px 6px 3px -2px #ccc;} /* image shadow */
.ibo {border: 1px solid #999;} /* image border */

.w150 {width:150px;}/* image width Übersichtsseiten */
.ml30 {margin-left:30px;} /* margin-left=30 für inputs etc */
.mr30 {margin-right:30px;} /* margin-left=30 für inputs etc */

.ml100 {margin-left:100px;} /* margin-left=100 für inputs etc */
.mt20 { margin-top:20px;}

.s12 {font-size:12px;} /* noch schauen ob nötig */
.s10 {font-size:10px;}/* noch schauen ob nötig */
.ma0 {margin:0px;}/* noch schauen ob nötig */

.w300 { width:300px;}

.cd {background: #466796; /* Old browsers */
background: -moz-linear-gradient(top,  #466796 0%, #bdd1eb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#466796), color-stop(100%,#bdd1eb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #466796 0%,#bdd1eb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #466796 0%,#bdd1eb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #466796 0%,#bdd1eb 100%); /* IE10+ */
background: linear-gradient(to bottom,  #466796 0%,#bdd1eb 100%); /* W3C */} 

/* Gradient GRAU, used for fieldset*/
.gg {background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(221,221,221,1) 93%, rgba(193,193,193,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(93%,rgba(221,221,221,1)), color-stop(100%,rgba(193,193,193,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(221,221,221,1) 93%,rgba(193,193,193,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(221,221,221,1) 93%,rgba(193,193,193,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(221,221,221,1) 93%,rgba(193,193,193,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(221,221,221,1) 93%,rgba(193,193,193,1) 100%); /* W3C */}

/* content-div */
.disi {display: inline-block !important;} /* display inline - startseiten links 2 nebeneinander */

.bk { clear:both; color:#aaa; font-size:11px; line-height:12px;} /* bottom keywords at content bottom */

.pb { clear:both; color:#aaa; font-size:11px; line-height:12px; margin:6px 0px 6px 0px;} /* powered by... */
.pb a { color:#aaa; text-decoration:none;}
.pb a:hover, .pb a:visited { color:#aaa; text-decoration:none;}

.so {width:auto; min-height:60px; padding-left:70px; margin:10px 0px 10px 0px; background:url(_img1/icon-so-umrechnen.gif) 0px 8px no-repeat;} /* so gehts - Rechner-Anleitung */
.upi { float:right; height:25px; width:auto; margin:0px 0px 18px 18px;} /* up-arrow unten rechts */
.tmb { float:left; margin:0px 50px 20px 0px;}

/* Tables */
.datagrid {background: #fff; -webkit-border-radius:6px 6px 3px 3px; -moz-border-radius:6px 6px 3px 3px; border-radius:6px 6px 3px 3px; margin:10px 0px 20px 0px; max-width:70%;
 border:2px solid #4165a7; background:url(_img1/bgf.png) repeat-x;}

.datagrid table { border-collapse: collapse; text-align: left; width:100%} 
.datagrid table td, .datagrid table th { padding: 3px 12px; }
.datagrid table thead th {background: url(_img1/bgh.png) repeat-x;color:#222; -webkit-border-radius:5px 5px 0px 0px; -moz-border-radius:5px 5px 0px 0px; border-radius:5px 5px 0px 0px;border-left:1px solid #4165a7; border-bottom:1px solid #4165a7; } 
.datagrid table thead th:first-child { border: none; border-bottom:1px solid #4165a7; }
.datagrid table tbody td {border-left: 1px solid #4165a7; background:#eee}
.datagrid table tbody .alt td { background: #cfdef3;}
.datagrid table tbody td:first-child { border-left: none; }
.datagrid table tbody tr:last-child td { border-bottom: none; }

/* image responsive */
.imgresp {max-width:100%;height:auto;}

/* video */
.vidcont {position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.vidcont iframe, .vidcont object, .vidcont embed {position:absolute;top:0;left:0;width:100%;height:100%;}
.vidt {color:#999; font-size:12px; margin:10px 0px 20px 0px;}

/* MEDIA QUERIES */
#blum { width:100px; height:auto; padding:20px; background-color:#CCC} /* Auflösung anzeigen - später löschen */
/* Ads responsive */
.adv { width:728px; height:90px; border:0px solid red;}
.adv2 { width:310px; height:252px; border:1px solid blue;}

@media screen and (max-width: 1024px) {
	#wrap {width: 100%;}
	section{width:64%; padding:1.6%}	
	nav { width:28%; min-width:120px;}
	#blum { background-color: #FF0}
    #bg { background: url(_img1/bg.png) repeat-x scroll;}
.adv { width:100%; height:auto; border:0px solid green;}
.adv2 { width:100%; height:auto; border:0px solid green;}
}

@media screen and (max-width: 480px) {
	#wrap {width: 99%;}
	section{width:96%; padding:1.2%; float:none;}	
	nav { width:96%; float:none;}
	#blum { background-color: #F60}
    #bg { background: url(_img1/bg.png) repeat-x scroll;}
	.no480 { display:none} /* Nav Elements not displayed in 480px */
.adv { width:100%; height:auto; border:0px solid orange;}
.adv2 { width:100%; height:auto; border:0px solid orange;}

footer {height: 500px; background-image:none;}

.datagrid {max-width:100%;}

}

/* css end */