﻿* {
    border-width: 0px;
	box-sizing:border-box;
}

body {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color: #6699FF;
	color: #ecebe8;
	font-size:15px;
}

header {
	text-align: right;
	width: 100%;
	padding: 2px 0px 2px 0px;
	display: inline-block;
	background-color: #0E3904;
	height: 25px;
	max-height: 25px;
}

footer {
	text-align: right;
	width: 100%;
	padding: 2px 0px 2px 0px;
	display: inline-block;
	background-color: #0E3904;
	height: 25px;
	max-height: 25px;
}

a, a:hover {
/*	color: #ecebe8;*/
	color:inherit;
	text-decoration: underline;
}

a:link, a:visited, a:active {}

h3 {
	font-size: 1.4em;
}

.welcome {
	display: block;
	font-size: 1.5em;
	color: gold;
	font-weight: bold;
	padding-top: 10px;
	width: 100%;
	text-align: left;
}

h4 {
	font-size: 1.2em;
}
h5 {
	font-size: 1.0em;
}
h3.highlight {
	border-bottom: 1px #66e1ff solid;
}

h4.highlight {
	border-bottom: 1px #F7E02E solid;
}

input, select {
	height:25px;
}

dl.numbered {
	counter-reset:section;
}

dt.numbered:before {    
	counter-increment: section;
	content: counter(section) ". ";
}
dd.numbered {
/*	margin-left:20px;*/
	text-indent:each-line;
}
dd.numbered:before {
	counter-increment: section;
	content: counter(section) ". ";
}

dt {
	font-weight:bold;
	color:#F7E02E;
	margin-top:1.0em;
}

dd {
	margin-left: 0px;
	margin-bottom: 0.8em;
}

.row {
	width:100%;
	float:left;
}

.row:after {
	content: "";
	clear: both;
	display: block;
}
.Bookmark {
	text-decoration: none;
}

.Headline {
	width: 100%;
	display: inline;
	float: left;
	padding-top: 15px;
	padding-bottom: 20px;
}

.Question {
	color: #FFCC00;
	padding: 3px 0px 3px 0px;
	font-weight: bold;
}
.HeaderImgStyle {
	padding: 3% 7% 3% 3%;
	width: 100%;
}
.MenuButImgStyle {
}

.HeaderElement {
	font-size: 0.7em;
	padding-right: 10px;
	display: inline;
}

.Image-100 {
	border-style: none;
	width: 100%;
	float: left;
}
.Image-100_padding {
	border-style: none;
	width: 100%;
	float: left;
	padding: 10px;
}
.GreenBoard {
	background-color: #114505;
	padding: 0px;
	display: inline-block;
	float: left;
	min-height:600px;
}

.Overlay {
	position: absolute;
	left: 78%;
	width: 22%;
	display: none;
}
.Overlay_Image {
	width:100%;
}

.td_25pct {
	width: 25%;
	color: #CCFF99;
}

.high1ight {
	display:none;
}

[class*="col-"] {
    float: left;
}


/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

.Background {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
}

.Foreground {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
}

.LeftSpacer {
	display: none;
}

.Button {
	border-style: none;
	width: 50%;
	float: left;
	padding: 1%;
}
.SmallNavButton {
	height: 25px;
	font-size: .75em;
}
.GotoButton {
	text-align: right;
	float: none;
	margin-top: 20px;
}
#ErrorMessage {
		width: 100%;
		max-width:480px;
		margin:20px auto 20px auto;
	}
	#ErrorMessage td {
		vertical-align:central;
	}
	#ErrorMessage td:first-child {
		width:25%;
		
	}
	#ErrorMessage td:last-child {
		width:75%;
		padding-left:10px;
		padding-right:10px;
	}

[class*="show-on-"] {
	display:none;
}


/* For Smartphones: */
@media all and (max-width: 479px) { 
	
	/* Seiteninhalt */
	.col-s-0 {display:none;}
	.col-s-1 {width:8.333%;}
	.col-s-2 {width:16.666%;}
	.col-s-3 {width:24.999%;}
	.col-s-4 {width:33.332%;}
	.col-s-5 {width:41.665%;}
	.col-s-6 {width:49.998%;}
	.col-s-7 {width:58.331%;}
	.col-s-8 {width:66.664%;}
	.col-s-9 {width:74.997%;}
	.col-s-10 {width:83.330%;}
	.col-s-11 {width:91.663%;}
	.col-s-12 {width:99.996%;}

	.show-on-smartphone {
	display: inline-block;

	}
	
}

/* For Tablets: */
@media 	all 
		and (min-width: 480px) 
		and (max-width: 800px) {

	/* Hintergrund */
	.Background {
		display: none;
	}

	/* Vordergrund */

	.LeftSpacer {
		display: none;
	}

    .col-MainArea {
		width: 100%;
		float: left;
		display: inline-block;
	}
	
	/* Seiteninhalt */
	.col-m-1 {width:8.333%;}
	.col-m-2 {width:16.666%;}
	.col-m-3 {width:24.999%;}
	.col-m-4 {width:33.332%;}
	.col-m-5 {width:41.665%;}
	.col-m-6 {width:49.998%;}
	.col-m-7 {width:58.331%;}
	.col-m-8 {width:66.664%;}
	.col-m-9 {width:74.997%;}
	.col-m-10 {width:83.330%;}
	.col-m-11 {width:91.663%;}
	.col-m-12 {width:99.996%;}
	
	.Button {
		width: 100%;
		float: left;
	}

	.MenuBar {
		padding: 5px 10px 0px 0px;
	}

	.ContentArea {
		padding: 0px 0px 0px 30px;
	}

	.show-on-tablet {
		display:block;
	}

}

/* Sonderfall: Smartphone landscape */
@media 	all 
		and (min-width: 480px) 
		and (max-width: 800px) 
		and (orientation: landscape) {

	.show-on-tablet {
		display:none;
	}

}


/* For desktop: */
@media all and (min-width: 801px) { 

	/*Hintergrund*/
	.Background {
		top: 0px;
		left: 0px;
		width: 100%;
		height: auto;
		position: absolute;
		display: block;
	}

	.bg-left {
		width: 20.5%;
		float: left;
		display: block;
	}
	
	.bg-center {
		width: 61.9%;
		float: left;
		display: block;
	}
	
	.bg-right {
		width: 17.6%;
		float: left;
		display: block;
	}
	
	/* Vordergrund */

	.LeftSpacer {
		width: 17%;
		float: left;
		height: 50px;
	}
	
    .col-MainArea {
		width: 64.8%;
		float: left;
		display: inline-block;
	}
	
	/* Seiteninhalt */
	.col-1 {width:8.333%;}
	.col-2 {width:16.666%;}
	.col-3 {width:24.999%;}
	.col-4 {width:33.332%;}
	.col-5 {width:41.665%;}
	.col-6 {width:49.998%;}
	.col-7 {width:58.331%;}
	.col-8 {width:66.664%;}
	.col-9 {width:74.997%;}
	.col-10 {width:83.330%;}
	.col-11 {width:91.663%;}
	.col-12 {width:99.996%;}

	.Button {
		width: 100%;
		float: left;
	}

	.MenuBar {
		padding: 5px 10px 0px 0px;
	}
	
	.ContentArea {
	padding: 0px 0px 0px 30px;
}

	.show-on-desktop {
		display:block;
	}

}
/* Screen control: */
@media all and (max-width: 1280px) { 

	.ScreenArea {
		width: 100%;
		display: inline-block;
		position:absolute;
		top: 0px;
		left: 0px;
	}
}
@media all and (min-width: 1281px) { 

	.ScreenArea {
		width: 1280px;
		position: absolute;
		left:50%;
		margin-left:-640px;
		top:0px;
	}
}

/* FONT SIZE CONTROLL */
@media all and (min-width: 480px) { 

	body {
		font-size:16px;
	}
