/* reset 
*******************************************************************************/

* {margin:0;padding:0} iframe,a img,fieldset,form,table {border:0} h6,h5,h4,h3,h2,h1,caption,th,td {font-size:100%;font-weight:normal}
dd,dt,li,dl,ol,ul {list-style:none} legend {color:#000} button,select,textarea,input {font:100% serif} table {border-collapse:collapse} caption,th,td{text-align:left}



/* rough layout: mobile first 
*******************************************************************************/

body {
	padding-top: 52px;
	background: url("header52.png") repeat-x;
}
	
#menu {
	margin-bottom: 1em;
	padding: 0.5em 0 0.5em 1em;
	border-bottom: 1px solid #000;
}
	
#menu li {
  display: inline-block;
  padding-right: 0.5em;
}
#menu li a, #menu li a:visited {
	color: #444444;
	font-size: 14px;
}

#content {
	padding: 0em 1em 0em 1em;	
}	

#content p img {
    max-width: 100%;
    height: auto;
}

#footer {
	margin: 1.5em 0 2.5em 0;
	border-top: 1px solid #888;
	padding: 0.5em 0 0.5em 1em;
	color: #888;
	font-size: 13px;
}
#footer a, #footer a:visited {
	color: #888;
}

/* rough layout: desktop second 
*******************************************************************************/

@media only screen and (min-width: 640px) {
	body {
		padding-top: 73px;
		background: url("header73.png") repeat-x;
	}
	#menu {
		text-align: center;
		padding: 0.8em;		
	}
	#menu li {
	  padding-right: 1.0em;
	}
	#menu li a, #menu li a:visited {
		font-size: 16px;
	}	
	#content {	
		margin: 0 auto;
		width: 75%;
		min-width: 580px;
		max-width: 800px;
	}
	#footer {
		text-align: center;
		padding: 0.8em;
	}	
}


/* colors etc. 
*******************************************************************************/



/*space between content elements*/
#content p, #content ul, #content h2, #content h6 {
	margin: 1em 0;
}

#content h2:not(:first-child) {
	margin-top: 1.5em;
}

/*content columns*/
.box {
	background-color: #EEE;
	border-right: 1em solid white; 
	padding: 0.1em 1em;
	margin: 1em 0;
}
@media only screen and (min-width: 800px) {
	.boxes {
		display: table;
		width: 100%;
		margin-top: 2em;
		margin-bottom: 2em;
	}
	.box {	
		display: table-cell;
		width: 48%;
		padding: 0 1em;
	}
}


/*colors*/

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.7em;
	color: #000;
}

#content ul {
	margin-left: 1.5em;
}

#content ul li {
	list-style: disc outside;
	margin: 1em 0;	
}

#content ul.condensed li {
	margin: 0;	
}

#content h2 {
	
	font-weight: normal;
	font-size: 22px;
    letter-spacing: 2px;
	color: #000;
}

#content h6 { /* h6 wird nur fuer die FAQ verwendet */
	font-weight: bold;
}
#content h6:before {
	content: "? ";
	color: #eee;
	font-size: 27px;
	position: relative;
	bottom: -3px;
}

a, a:visited {
	color: #0063DC;
	text-decoration: none;
}

a:hover {
	color: #0063DC;
	text-decoration: underline;	
}

.noscreen {
	display: none;
}

/*input stuff*/
input, select, textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
}
input[type=submit] {
	min-width: 10em;
}
.note {
	padding: 1em;
	background-color: #ffc0cb;
}





/* buy */
table.layout {
	border-collapse: collapse;
}

td.layouthead {
	background-color: #ddd;
	border-top: 1px solid #ddd;
	border-bottom: 2px solid #ddd;	
	color: #000;
	font-weight: normal;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 3px;
	padding-bottom: 2px; /*2px as wider borders have a higher priority on collapse*/
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	line-height: 1em;
	text-align: left;
}

td.layouthead a, td.layouthead a:visited, td.layouthead a:hover {
	color: #000;
}

td.layoutcell, td.layoutcell2 {
	border-top: 1px solid #888;
	padding: 4px;
	border-right: 0px;
	border-left: 0px;
}

@media only screen and (min-width: 640px) {
	.buycol:after {
		clear: both; content: "."; display: block; height: 0; visibility: hidden;
	} 
	.buycol1 {
		float: left; width: 48%; /* 1% für rahmen etc., bei Bedarf anpassen */
		padding-right: 1em;
	}
	.buycol2 {
		float: left; width: 48%;	
	}
}