body, div, p, h1, h2, h3 {
	border: 0;
	margin: 0;
	padding: 0;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #204a87; /* magenta */
	background-color: #204a87; /* dark blue */
}

p, .right, .left {
	margin-bottom: 5px;
}

h1 {
	font-size: 24px;
}
h2 {
	font-size: 20px;
	width: 314px;
	text-align: right;
}
h3 {
	font-size: 18px;
	width: 526px;
	margin-top: 20px;
	margin-bottom: 5px;
}
hr {
	border: 0px;
	border-top: 1px #204a87 dotted;
	margin-bottom: 20px;
}

a:link, a:visited {
	color: #a52a60;
	font-weight: normal;
	text-decoration: none;
	border-bottom: 1px dotted #a52a60;
}
a:focus, a:hover, a:active {
	color: #a52a60;
	font-weight: normal;
	text-decoration: none;
	border-bottom: 1px solid #a52a60;
}

#mobileMenu {
	display: none;
}

#fadeTop {
	width: 900px;
	height: 50px;
	margin: 0 auto; /* centering */
	background-image: url("./background-top-900.png");
	background-color: #204a87;
}
#fadeBottom {
	width: 900px;
	height: 50px;
	margin: 0 auto; /* centering */
	background-image: url("./background-bottom-900.png");
	background-color: #204a87;
}
#content {
	width: 900px;
	margin: 0 auto; /* centering */
	background-image: url("./background-900.png");
	background-color: white;
}
#contact .left p {
	margin-bottom: 7px;
}

.contentBlock {
	/*
	border: 1px solid green;
	*/
	width: 840px;
	margin: 0 auto; /* centering */
	
	padding: 10px;
	margin-bottom: 30px;
	
	/* floating inside other divs...: http://stackoverflow.com/questions/2062258/floating-stuff-within-a-div-floats-outside-of-div-why */
	/* alternative solution: <div style="clear: both"></div> afterwards */
	overflow: hidden;
}
.left {
	/*
	border: 1px dashed green;
	*/
	width: 309px; /* 344-30 "border"-5 padding */
	float: left;
	text-align: right;
	padding-right: 5px;
}
.right {
	/*
	border: 1px dashed magenta;
	*/
	width: 521px; /* 556-30 "border"-5 padding */
	float: right;
	padding-left: 5px;
}
.hidden {
	display: none;
}

#header {
	padding-top: 0px;
	text-align: right;
}
#alivLogo {
	width: 300px;
	height: auto;
	margin-bottom: 5px;
}
#contact {
	/*
	border: 1px solid yellow;
	*/
}
#imprint {
	margin-bottom: 0px;
}


/* --------------------------------------------------------------------------------------------------------- */
/* ABOVE: maximum resolution, with a fixed width of 900px / sectio aurea (1,618) 900px: 344 resp. 556
/* --------------------------------------------------------------------------------------------------------- */

/* ############################################################################### */
@media only screen and (min-width: 768px) and (max-width: 899px) { /* sectio aurea (1,618) 768px: 293 resp. 475 */
	#content {
		width: 768px;
	}
}
/* --------------------------------------------------------------------------------------------------------- */

/* ############################################################################### */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#mobileMenu { display: block; }
	
	#content {
		width: 480px;
	}
}
/* --------------------------------------------------------------------------------------------------------- */

/* ############################################################################### */
@media only screen and (max-width: 479px) { /* min:320 */
	#mobileMenu { display: block; }
	
	#content {
		width: 320px;
	}
}
/* --------------------------------------------------------------------------------------------------------- */