/* ######################################## */
/* ###	CSS: layout.css					       ###	*/
/* ###									               ###	*/
/* ###									               ###	*/
/* ######################################## */
/* Order: 	1. overflow, float...
			2. position
			3. margin, padding
			4. witdh, height
			5. border
			6. background
			7. font...
*/

/*#####################################*/
/*########## Layout Settings ##########*/
/*#####################################*/

/*/// Abstan auf 10px zur Distanzierung ///*/
body {
	/* Entwicklungshintergrund */
	/*background-image: url("../images/layout/pixelraster.png");
	background-repeat: no-repeat;*/
	margin: 0;
  padding: 10px;

	font-size: 62.5%; /* Resets 1em to 10px */
  font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
  color: #222;

  text-align: center;
}

/*/// mittig Ausrichten, maximale und minimale Breite ///*/
div#page {
	margin: 0 auto; /* TODO: lte IE6 kanns nicht. Korrektur unter body. */

	width: 900px;
	/*min-width: 750px;
	max-width: 900px;*/

	text-align: left;
}

/*/// Container für den Headerbereich ///*/
/*///////////////////////////////////////*/
div#header {
	padding: 5px 5px 0 5px;

	position: relative;

	width: auto;

	height: 300px;

	background-color: #83c5ff;
	background-image: url("../images/layout/background.jpg");
	background-position: top left;
	background-repeat: no-repeat;
}

/*/// Menue am Anfang der Seite///*/
div#header_menue {
	padding: 3px 5px;

	text-align: right;
}

#header_menue form {
  display: inline;
  }

/*##### Banner #####*/
/*/// Seitenüberschrift ///*/
#header h1,#header h1 a, #header h1 a:hover, #header h1 a:visited{
  text-decoration: none;
	color: white;
}

#header h1{
  margin: 30px 0 0 150px;
  font-size: 4em;
}

#header .description {
  margin: 0 0 0 150px;

	font-size: 1.4em;
	text-align: center;
	color: white;
	}

/*/// Bildbereich für Dinge ///*/
img#banner_event {
	position: absolute;
	bottom: 10px;
	right: 20px; /* TODO: Position finden */
	border: none;
}

/*/// fester Bildbereich für Logo der CSU etc. ///*/
img#logo1 {
	position: absolute;
	bottom: 5px;
	right: 15px;
}
img#logo2 {
	position: absolute;
	bottom: 60px;
	right: 15px;
}
/*##### Banner END #####*/



/*/// Container für das Menü ///*/
/*//////////////////////////////*/
div#navigation {
	width: auto;

	border-bottom: 2px solid #e3e3e3;

	background-color: #134481;
	background-image: url("../images/menue/menue.png");
	background-repeat: repeat-x;
	background-position: top left;
}



/*##### Content-Area #####*/

/*/// Container für den Contentbereich ///*/
/*///////////////////////////////////////*/
div#wrapper	{
	position: relative;

	background-image: url("../images/layout/back_fix.gif");
	background-position: 75% 0;
	background-repeat: repeat-y;

	font-size: 1.2em;
}

div#col1    {
	float: left;

	width: 74.99%;

	background-color: #fff;
}

div#col2    {
	float: right;

	width: 25%;

	background-color: #caffc8;
}

div#content {
	padding: 25px 20px 15px 30px;

	width: auto;

	background-color: #fefefe;

	/*line-height: 1.6em;*/
}

div#extras {
    padding: 15px 5px 150px 5px; /* Unten +50px +57px aufgrund des LOGOs */

    width: auto;
    font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
#extras form {
	margin: 0;
}

/*##### Content-Area END #####*/



div#footer {
	padding: 3px 10px 3px 10px;

	width: auto;
	height: 19px;

	border-top: 2px solid #e3e3e3;

	background-color: #0c5182;
	background-image: url("../images/layout/footer.png");
	background-repeat: repeat-x;
	background-position: top left;

	font-size: 1em;
	text-align: center;
}



/*########## Randeffekt ##########*/
div#page {
	background-image:  url("../images/layout/rand_l.gif");
	background-repeat: repeat-y;
	background-position: left;
}

div#box {
	margin: 0 0 0 5px;
	padding: 0 5px 0 0;

	background-image:  url("../images/layout/rand_r.gif");
	background-repeat: repeat-y;
	background-position: right;
}

div#shadow-top {
	overflow:hidden;

	margin-bottom: -15px;

	width: auto;
	height: 20px;

	background-image:  url("../images/layout/rand_o.gif");
	background-repeat:repeat-x;
	background-position:top left;

	font-size:0;
}

div#shadow-bottom {
	overflow:hidden;

	margin-top: -15px;

	width: auto;
	height: 20px;

	background-image:  url("../images/layout/rand_u.gif");
	background-repeat:repeat-x;
	background-position:bottom left;

	font-size:0;
}

div#shadow-corner-lo {
	float:left;

	width: 20px;
	height: 20px;

	background-image:  url("../images/layout/rand_lo.gif");
	background-position: top left;

	font-size:0;
}

div#shadow-corner-ro {
	float:right;

	position:relative; /* IE Fix | z-index */

	width: 20px;
	height: 20px;

	background-image:  url("../images/layout/rand_ro.gif");
	background-position: top right;

	font-size:0;
}

div#shadow-corner-lu {
	float:left;

	width: 20px;
	height: 20px;

	background-image:  url("../images/layout/rand_lu.gif");
	background-position: bottom left;
}

div#shadow-corner-ru {
	float:right;

	position:relative; /* IE Fix | z-index */

	width: 20px;
	height: 20px;

	background-image:  url("../images/layout/rand_ru.gif");
	background-position: bottom right;
}
/*########## Randeffekt END ##########*/



/*########## Float-Cleaner ##########*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

	/* Hide from IE-mac \*/
	   * html .clearfix {height: 1%;}
	   .clearfix {display: block;}
	/* hide from IE-mac END */

.clear {
	clear: both;
}

/*########## Float-Cleaner END ##########*/


/*########## Entwicklungsbereich ##########*/
span.develop {
	font-size: 10px;
	visibility: hidden;
}