/* styles.css */

/* =========================================
 * Base
 * =========================================
 */

/**
 * 1. Prevent system color scheme's background color being used in Firefox, IE,
 *    and Opera.
 * 2. Prevent system color scheme's text color being used in Firefox, IE, and
 *    Opera.
 * 3. Set default font family to sans-serif.
 * 4. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
    background: #666666; /* 1 */
    color: #000000; /* 2 */
    font-family: sans-serif; /* 3 */
    -ms-text-size-adjust: 100%; /* 4 */
    -webkit-text-size-adjust: 100%; /* 4 */
}

/**
 * Remove default margin.
 */
body {
	margin: 0px;
	padding: 0px;
	border: none;
	text-align: center; /* Center for IE */
}

/**
 * 	Special defined tags
 */
.imgWithShadow img {
	border:none;
	
	/* shadow*/
	-moz-box-shadow:1px 1px 5px #292929; /* Firefox */
	-webkit-box-shadow:1px 1px 5px #292929; /* Chrome, Safari */
	-khtml-box-shadow:1px 1px 5px #292929; /* Konqueror */
	box-shadow:1px 1px 5px #292929; /* CSS3 */
}

.linkTag a {
	/*color: rgb(158,70,87);*/ /* Hex: 9e4657 */
	color: rgb(142,43,65); /* Hex: 8e2b41 */
	font-family: sans-serif;
	font-size: 1.0em;
	text-decoration: none;
}

.linkTag a:hover {
	color: rgb(169,91,105); /* Hex: a95b69 */
	font-family: sans-serif;
	font-size: 1.0em;
	text-decoration: underline;
}

.linkTag a:focus {
	color: rgb(169,91,105); /* Hex: a95b69 */
	font-family: sans-serif;
	font-size: 1.0em;
}

/* =========================================
 * Wrappers
 * =========================================
 */

/*
 * Main wrapper is centered to the middle of the screen
 */
.wrapper_main {
	width: 955px;
	height: 705px;
	padding: 0px;

	text-align: left; /* Content is back to left for IE */
	border: none;
	
	/*
	 * Centering the website
	 */
	position: absolute;
	top: 50%;
	margin-top: -352px;
	left: 50%;
	margin-left: -477px;
	background-color: #666666;
	
}

.wrapper_shadow_top {
	width: 955px;
	height: 15px;
	padding: 0px;
	margin: 0px auto;
	background-color: #ffffff;
	background-image: url(../img/allgemein/shadow_top.png);
	background-repeat: no-repeat;	
}

.wrapper_header {
	width: 955px;
	height: 100px;
	padding: 0px;
	margin: 0px auto;
	background-color: #ffffff;
	background-image: url(../img/allgemein/header.png);
	background-repeat: no-repeat;
	display: block;
	float: left;
}

.wrapper_content {
	width: 955px;
	height: 550px;
	padding: 0px;
	margin: 0px auto;
	background-color: #ffffff;
	background-image: url(../img/allgemein/content.png);
	background-repeat: no-repeat;
	display: block;
	float: left;
}

.wrapper_shadow_bottom {
	width: 955px;
	height: 10px;
	padding: 0px;
	margin: 0px auto;
	background-color: #ffffff;
	background-image: url(../img/allgemein/shadow_bottom.png);
	background-repeat: no-repeat;
	display: block;
	float: left;
}

.wrapper_footer {
	width: 955px;
	height: 30px;
	padding: 0px;
	margin: 0px auto;
	background-color: #ffffff;
	background-image: url(../img/allgemein/footer.png);
	background-repeat: no-repeat;
}

/* =========================================
 * Detailed wrappers
 * =========================================
 */

.wrapper2_contentSingle {
/* Original size is 570px x 550px and margin-left 30px */
	width: 895px; /* original size is 585px, with the margin to the left content side(-15px) now 570px */
	height: 540px;
	margin-left: 30px; /* +15px for outer shadow, +15px margin to left - start for galery images */
	background-color: rgb(255,255,255);
	
	/*overflow:auto;*/
	overflow-x:hidden;
	overflow-y:auto;
	-ms-overflow-x:hidden;
	-ms-overflow-y:auto;
	/*white-space: nowrap;*/
}

.wrapper2_contentLeftGalery {
	/* Original size is 570px x 550px and margin-left 30px */
	width: 550px; /* original size is 585px, with the margin to the left content side(-15px) now 570px */
	height: 540px;
	margin-left: 30px; /* +15px for outer shadow, +15px margin to left - start for galery images */
	background-color: rgb(255,255,255);
	float: left;
	
	/*overflow:auto;*/
	overflow-x:auto;
	overflow-y:hidden;
	-ms-overflow-x:auto;
	-ms-overflow-y:hidden;
	/*white-space: nowrap;*/
}

/*
 * Galery for images. The galery has a matrix from 5 x 5 images
 * with a format from 90x90px without a shadow,
 * with a shadow 95x95px (= 90px from the image + 5px from the shadow).
 */
.wrapper2_contentLeft {
	/* Original size is 570px x 550px and margin-left 30px */
	width: 550px; /* original size is 585px, with the margin to the left content side(-15px) now 570px */
	height: 540px;
	margin-left: 30px; /* +15px for outer shadow, +15px margin to left - start for galery images */
	background-color: rgb(255,255,255);
	float: left;
	
	overflow:auto;
}

.wrapper2_contentRight {
	/* Original size is 325px x 550px and margin-left 600px */
	width: 325px; /* original size is 340px, with the margin to the right(-15px) now 325px */
	height: 540px;
	margin-left: 600px;
	background-color: rgb(255,255,255);
	overflow: auto;
}

/* =========================================
 * Navigation in the header
 * =========================================
 */

.wrapper2_navigation {
	width: 340px;
	height: 25px;
	margin-left: 600px;
	margin-top: 75px;
	display: block;
	color: rgb(0,0,0);
	font-family: sans-serif;
	font-size: 1.0em;
}

.wrapper2_navigation a {
	/*color: rgb(158,70,87);*/ /* Hex: 9e4657 */
	color: rgb(142,43,65); /* Hex: 8e2b41 */
	font-family: sans-serif;
	font-size: 1.0em;
	text-decoration: none;
	margin-top: 4px;
	padding-right: 12px;
	display: block;
	float: left;
}

.wrapper2_navigation a:hover {
	color: rgb(169,91,105); /* Hex: a95b69 */
	font-family: sans-serif;
	font-size: 1.0em;
}

.wrapper2_navigation a:focus {
	color: rgb(169,91,105); /* Hex: a95b69 */
	font-family: sans-serif;
	font-size: 1.0em;
}

/* =============================================
 * Content single - frame has the complete width 
 * =============================================
 */

.contentSingle {
	/*
	 * This content frame has the full size of the website.
	 * Components can get selective position and separate definings.
	 */
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	/*padding-right:10px;*/
	color:rgb(0,0,0);
	font-family:sans-serif;
	font-size:0.95em;
	line-height:1.5em;
}

.contentSingle a {
	color:rgb(142,43,65); /* Hex: 8e2b41 */
	font-family:sans-serif;
	font-size:0.95em;
	text-decoration:none;
}

.contentSingle a:hover {
	color:rgb(169,91,105); /* Hex: a95b69 */
	font-family:sans-serif;
	font-size:0.95em;
	text-decoration:underline;
}

.contentSingle a:focus {
	color:rgb(169,91,105); /* Hex: a95b69 */
	font-family:sans-serif;
	font-size:0.95em;
	text-decoration:none;
}

.contentSingle img {
	border:none;
	
	/* shadow*/
	/*-moz-box-shadow:1px 1px 5px #292929;*/ /* Firefox */
	/*-webkit-box-shadow:1px 1px 5px #292929;*/ /* Chrome, Safari */
	/*-khtml-box-shadow:1px 1px 5px #292929;*/ /* Konqueror */
	/*box-shadow:1px 1px 5px #292929;*/ /* CSS3 */
}

/* =============================================
 * Content left (only for text or other content)
 * =============================================
 */

.contentLeft {
	/*
	 * SET THE WIDTH OF THE HORIZONTAL SCROLLING DIRECT IN THE DIV-TAG FROM IN HTML!!!
	 * TAKE A VERY HIGH VALUE FOR A LONG WIDTH FOR SCROLLING.
	 * e.g.
	 * width:6000px;
	 * 
	 */
	padding-top:30px;
	padding-left:20px;
	padding-right:20px;
	color:rgb(0,0,0);
	font-family:sans-serif;
	font-size:0.95em;
	line-height:1.5em;
}

.contentLeft img {
	border:none;
	
	/*
	/* shadow*/
	/*-moz-box-shadow:1px 1px 5px #292929;*/ /* Firefox */
	/*-webkit-box-shadow:1px 1px 5px #292929;*/ /* Chrome, Safari */
	/*-khtml-box-shadow:1px 1px 5px #292929;*/ /* Konqueror */
	/*box-shadow:1px 1px 5px #292929;*/ /* CSS3 */
}

/* =========================================
 * Galery = Content left
 * =========================================
 */

.contentLeftGalery {
	/*
	 * SET THE WIDTH OF THE HORIZONTAL SCROLLING DIRECT IN THE DIV-TAG FROM IN HTML!!!
	 * TAKE A VERY HIGH VALUE FOR A LONG WIDTH FOR SCROLLING.
	 * e.g.
	 * width:6000px;
	 * 
	 */
	padding-top:10px;
	color:rgb(0,0,0);
	font-family:sans-serif;
	font-size:0.95em;
	line-height:1.5em;
}

/*
 * Column for 5 images
 */
.galeryImageColumn {
	width:95px;
	height:auto;
	margin-right:15px;
	float:left;
}

/*
 * Wrappper for single image for galery with included width and height for shadow
 */
.galeryImageRect {
	width:95px;
	height:95px;
	margin-bottom:8px;
	border:none;
	text-align:center;
	vertical-align:middle;
}

.galeryImage {
	display:table-cell;
	width:95px;
	height:95px;
	text-align:center;
	vertical-align:middle;
}

/* .contentLeftGalery img {*/
.galeryImage img {
	display:inline-block;
	text-align:center;
	vertical-align:middle;
	
	border:none;
	
	/* shadow*/
	-moz-box-shadow:1px 1px 5px #292929; /* Firefox */
	-webkit-box-shadow:1px 1px 5px #292929; /* Chrome, Safari */
	-khtml-box-shadow:1px 1px 5px #292929; /* Konqueror */
	box-shadow:1px 1px 5px #292929; /* CSS3 */
}

/* =========================================
 * Content right - Details
 * =========================================
 */

.contentRight {
	padding-top:12px; /* old: 30px */
	padding-left:0px; /* 10px */
	color:rgb(0,0,0);
	font-family:sans-serif;
	font-size:0.95em;
	line-height:1.5em;
}

.contentRight a {
	color:rgb(142,43,65); /* Hex: 8e2b41 */
	font-family:sans-serif;
	font-size:0.95em;
	text-decoration:none;
}

.contentRight a:hover {
	color:rgb(169,91,105); /* Hex: a95b69 */
	font-family:sans-serif;
	font-size:0.95em;
	text-decoration:underline;
}

.contentRight a:focus {
	color:rgb(169,91,105); /* Hex: a95b69 */
	font-family:sans-serif;
	font-size:0.95em;
	text-decoration:none;
}

/* =========================================
 * Footer - Details
 * =========================================
 */

.footer {
	margin-left:30px;
}

.footer a {
	color:rgb(206,206,206);
	font-family:sans-serif;
	font-size:1.0em;
	text-decoration:none;
	padding-right:12px;
}

.footer a:hover {
	color:rgb(179,179,179);
	font-family:sans-serif;
	font-size:1.0em;
	text-decoration:underline;
}

.footer a:focus {
	color:rgb(179,179,179);
	font-family:sans-serif;
	font-size:1.0em;
	text-decoration:none;
}