/* hkm Personalauswahl style file 1.0*/
/* Author Christian Maurer*/


header, nav, section, footer,body {
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	width: 900px;
margin:auto;
}

h1, h2, h3 {
	color:7583C0;
	}

#page-wrap{
margin:auto;
}


body
{
	background-position: center;
	background-position: top;
    background-color: FFFFFF;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size: 16pt;
	color: 111734;
    height: auto;
    background-color: #FFF;
	margin: auto;
}


/*links*/
a
{
    color: 7583C0;

}

/*Maus über link ändert farbe*/
a:hover
{
    color: 111734;    
}
a img
{
   
}

/*einfügen der container*/
    header
    {
	margin-bottom: 0px;
	height: 180px;
	float: left;
	color: #7583C0;
    }

	.head_title
		{
			
	height: 45px;
	width: 900px;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	float: inherit;
	border-style:	solid;
	border-width: thick;
	border-top-color : #ffffff;
	border-bottom-color: #ffffff;
	border-left:hidden;
	border-right:hidden;
	font-size: 20px;
	line-height: 42px;
	padding-left:0px;
	padding-top:0px;
	padding-bottom:0px;
	
		}

	.head_img_left
		{
	padding-left:00px;

	width: 400px;
	height: 165px;
	margin-top:10px;
	margin-bottom: 10px;
	margin-left:auto;
	margin-right:auto;
	border-style:none;
		}

/*	.head_logo
		{
	width: 130px;
	height: 165px;
	margin-top: 20px;
	margin-left: 150px;
	float: inherit;
	border-style:none;
		}*/

    nav
    {
		background-color: #fff;
		display: block;
         height: 50px;
		 float:left;
		 border-style:	solid;
		border-width: thick;
		border-top-color : #111734;
		border-bottom-color: #111734;
		border-left:hidden;
		border-right:hidden;
		margin-top:0px;
		font-size: 16px;
		line-height: 20px;

    }


#menuToggle input
{
display: none;
}

.clear { 
	clear:both; 
}
.stick {
	position:fixed;
	top:0px;
	z-index: 10000;
}
		
		ul#navi_main li
		{
			display: table-cell;
			width: 180px;
			text-align:left;
			white-space: nowrap;
			border-right: 1px solid #fff;
			list-style:	none;
			padding-top:0px;
		}
		
		ul#navi_main li a
		{
			color: #7583C0;
			text-decoration:none;
		}
		 
		 ul#navi_main li a:hover
		{
			color: #111734;
			text-decoration:none;
			font-size: 20px;
			line-height: 16px;
			margin: 0 -10px 0 - 10px;
		}
		
		ul#navi_main li ul.dropdown_navi
		{
			margin: auto;
			padding: 10px 10px 10px 20px;
			width: 193px;
		}
		
		ul#navi_main li ul.dropdown_navi li
		{
			list-style: none;
			border: 0px solid #CCC;
			background: #664800;
			margin: 3px;
			padding: 3px;
			height: 20px;
			opacity:1.0;
		}
		

  
    section
    {
        background-color: #FFF;
		margin-left: 00px;
         width: 900px;
	
         float: left;
    }
        .content_text
        {
	width: 500px;
	background-color: #fff;
	float: inherit;
	padding: 20px; 
	font-size: 14px;
	position: relative;
        }
		
	.spacer{
		height:50px;
		position: relative;
		float: inherit;

	}
	
	.content_img
        {
	width: 320px;
	background-color: #fff;
	float:	inherit;
	font-size: 12px;
	position: relative;
	padding-top: 20px;
				

        }
		ul#img_impression li
		{
		display: table-row;
		padding: 10px;
		list-style: none;
		text-align:left;
		margin-bottom: 200px;	
	
			
			}
		
	#content_main_table
	{
		color: #03192a;
		padding: 5px;
	}

    footer
    {
	background-color: #FFFFFF;
	margin-left: 00px;
	width: 900px;
	height: 45px;
	float: right;
	font-size: 10px;
	text-align:center;
		 border-style:	solid;
		border-width: thick;
		border-top-color : #111734;
		border-bottom-color: #111734;
		border-left:hidden;
		border-right:hidden;
		bottom:0px;
		position:fixed;
		z-index:10000;
	}
	
	#footer_main_container a
	{
		color: #0a538a;
	}
	
	
	#footer_main_container a:hover
	{
		color: #8da33c;
	}




@media (min-width: 600px) and (max-width: 910px)
{
body
{
	background-position: center;
	background-position: top;
    background-color: #FFFFFF;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size: 16pt;
	color: 111734;
	width: 600px;
    height: auto;
    background-color: #FFF;
	margin: auto;
}

/*links*/
a
{
    color: 7583C0;
}

/*Maus über link ändert farbe*/
a:hover
{
    color: 111734;    
}
a img
{
   
}

/*einfügen der container*/

header
    {
	background-color:  #FFFFFF;
	margin-bottom: 0px;
	height: 117px;
	width: 600px;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;

	float: left;
	color: #7583C0;
    }

.head_title
		{
			
	height: 36px;
	width: 600px;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	float: inherit;
	border-style:	solid;
	border-width: thick;
	border-top-color : #ffffff;
	border-bottom-color: #ffffff;
	border-left:hidden;
	border-right:hidden;
	font-size: 18px;
	line-height: 32px;
	padding-left:0px;
	padding-top:0px;
	padding-bottom:0px;
	
		}
.head_img_left
		{
	padding-left:00px;

	width: 210px;
	height: 105px;
	margin-top:00px;
	margin-left: auto;
	margin-right: auto;
	border-style:none;
		}
.head_logo
		{
	width: 80px;
	height: 5px;
	margin-top: 5px;
	margin-left: 50px;
	float: inherit;
	border-style:none;
		}
nav
    {
		background-color: #fff;
		display: block;
         width: 600px;
         height: 45px;
		 float:left;
		 border-style:	solid;
		border-width: thick;
		border-top-color : #111734;
		border-bottom-color: #111734;
		border-left:hidden;
		border-right:hidden;
		
		font-size: 16px;
		line-height: 20px;

    }


.clear { 
	clear:both; 
}
.stick {
	position:fixed;
	top:0px;
	z-index: 10000;
}

#menuToggle
{
display:block;
position:relative;
top:10px;
left:20px;
z-index:1;
-webkit-user-select:none;
user-select:none;
}

#menuToggle input
{
display:block;
width:40px;
height:32px;
position:absolute;
top:-7px;
left:-5px;
curser:pointer;
opacity:0;
z-index:2;
-webkit-touch-callout:none;
}

#menuToggle span
{
display:block;
width:33px;
height:4px;
margin-bottom:5px;
position:relative;

background: #111734;
border-radius: 3px;

z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0)
	background 0.5s cubic-bezier(0.77,0.2,0.05,1.0)
	opacity 0.55s ease
}

#menuToggle span:first child
{
transform-origin:0% 0%;
}
		
#menuToggle span:nth-last child(2)
{
transform-origin:0% 100%;
}


#menuToggle input:checked ~ span
{
opacity: 1;
transform:rotate(45deg) translate(0px, -2px);
background:#7583C0;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform:rotate(0deg) scale(0.2,0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
transform:rotate(-45deg) translate(0px, -2px);
}

ul#navi_main
{
position:absolute;
width:300px;
margin: -100px 0 0 -50px;
padding:50px;
padding-top:125px;

background:#ffffff;
list-style-type:none;
-webkit-font-smoothing:antialiased;

transform-origin: 0% 0%;
transform:translate(-100%,0);

transfition:transform0.5s cubic-bezier(0.77,0.2,0.05,1.0)
}


ul#navi_main li
		{
			padding: 10px 0;
			display:block
		}


#menuToggle input:checked ~ ul
		{
			transform:none;
		}
/*
		
		ul#navi_main li
		{
			display: block;
			width: 180px;
			text-align:left;
			white-space: nowrap;
			border-right: 1px solid #fff;
			list-style-type:	none;
		}
		
		ul#navi_main li a
		{
			color: #7583C0;
			text-decoration:none;
		}
		 
		 ul#navi_main li a:hover
		{
			color: #111734;
			text-decoration:none;
			font-size: 20px;
			line-height: 16px;
			margin: 0 -10px 0 - 10px;
		}
		
		ul#navi_main li ul.dropdown_navi
		{
			margin: auto;
			padding: 10px 10px 10px 20px;
			width: 193px;
		}
		
		ul#navi_main li ul.dropdown_navi li
		{
			list-style: none;
			border: 0px solid #CCC;
			background: #664800;
			margin: 3px;
			padding: 3px;
			height: 20px;
			opacity:1.0;
		}*/
		

   section
    {
        background-color: #FFF;
		margin-left: 00px;
         width: 600px;
         float: left;
    }
        .content_text
        {
	width: 560px;
	background-color: #fff;
	float: inherit;
	padding: 20px; 
	font-size: 16px;
	position: relative;
        }
		
	.spacer{
		height:50px;
		position: relative;
		float: inherit;

	}
	
	.content_img
        {
	width: 300px;
	background-color: #fff;
	float:	inherit;
	font-size: 14px;
	position: relative;
	padding: 20px;
				

        }
		ul#img_impression li
		{
		display: table-row;
		padding: 10px;
		list-style: none;
		text-align:left;
		margin-bottom: 200px;	
	
			
			}
		
	#content_main_table
	{
		color: #03192a;
		padding: 5px;
	}
    footer
    {
	background-color: #FFFFFF;
	margin-left: 00px;
	width: 600px;
	height: 45px;
	float: right;
	font-size: 10px;
	text-align:center;
		 border-style:	solid;
		border-width: thick;
		border-top-color : #111734;
		border-bottom-color: #111734;
		border-left:hidden;
		border-right:hidden;
		bottom:0px;
		position:fixed;
		z-index:10000;
	}
	
	#footer_main_container a
	{
		color: #0a538a;
	}
	
	
	#footer_main_container a:hover
	{
		color: #8da33c;
	}
}

@media (max-width: 599px)
{
header, nav, section, footer {
	width: 300px;
}


body
{
	background-position: center;
	background-position: top;
width:300px;
    background-color: #FFFFFF;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size: 18pt;
	color: 111734;
    height: auto;
    background-color: #FFF;
	margin: auto;
}

/*links*/
a
{
    color: 7583C0;

}

/*Maus über link ändert farbe*/
a:hover
{
    color: 111734;    
}
a img
{
   
}

/*einfügen der container*/

header
    {
	background-color:  #FFFFFF;
	margin-bottom: 0px;
	height: 66px;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;

	float: left;
	color: #7583C0;
    }

.head_title
		{
			
	height: 33px;
	width: 300px;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	float: inherit;
	border-style:	solid;
	border-width: thick;
	border-top-color : #ffffff;
	border-bottom-color: #ffffff;
	border-left:hidden;
	border-right:hidden;
	font-size: 18px;
	line-height: 32px;
	padding-left:00px;
	padding-top:0px;
	padding-bottom:0px;
	
		}
.head_img_left
		{
	padding:5px;

	width: 100px;
	height: 63px;
	margin:00px;
	margin-left: auto;
	margin-right: auto;
	border-style:none;
		}
.head_logo
		{
	width: 40px;
	height: 0px;
	margin-top: 10px;
	margin-left: 41px;
	float: inherit;
	border-style:none;
		}
nav
    {
		background-color: #fff;
		display: block;
	         height: 40px;
		 float:left;
		 border-style:	solid;
		border-width: thick;
		border-top-color : #111734;
		border-bottom-color: #111734;
		border-left:hidden;
		border-right:hidden;
		
		font-size: 16px;
		line-height: 20px;

    }


.clear { 
	clear:both; 
}
.stick {
	position:fixed;
	top:0px;
	z-index: 10000;
}


#menuToggle
{
display:block;
position:relative;
top:10px;
left:20px;
z-index:1;
-webkit-user-select:none;
user-select:none;
}

#menuToggle input
{
display:block;
width:40px;
height:32px;
position:absolute;
top:-7px;
left:-5px;
curser:pointer;
opacity:0;
z-index:2;
-webkit-touch-callout:none;
}

#menuToggle span
{
display:block;
width:33px;
height:4px;
margin-bottom:5px;
position:relative;

background: #111734;
border-radius: 3px;

z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0)
	background 0.5s cubic-bezier(0.77,0.2,0.05,1.0)
	opacity 0.55s ease
}

#menuToggle span:first child
{
transform-origin:0% 0%;
}
		
#menuToggle span:nth-last child(2)
{
transform-origin:0% 100%;
}


#menuToggle input:checked ~ span
{
opacity: 1;
transform:rotate(45deg) translate(0px, -2px);
background:#7583C0;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform:rotate(0deg) scale(0.2,0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
transform:rotate(-45deg) translate(0px, -2px);
}




ul#navi_main
{
position:absolute;
width:300px;
margin: -100px 0 0 -50px;
padding:50px;
padding-top:125px;

background:#ffffff;
list-style-type:none;
-webkit-font-smoothing:antialiased;

transform-origin: 0% 0%;
transform:translate(-100%,0);

transfition:transform0.5s cubic-bezier(0.77,0.2,0.05,1.0)
}


ul#navi_main li
		{
			padding: 10px 0;
			display:block
		}


#menuToggle input:checked ~ ul
		{
			transform:none;
		}







/*		ul#navi_main li
		{
			display: block;
			width: 180px;
			text-align:left;
			white-space: nowrap;
			border-right: 1px solid #fff;
			list-style:	none;
		}
		
		ul#navi_main li a
		{
			color: #7583C0;
			text-decoration:none;
		}
		 
		 ul#navi_main li a:hover
		{
			color: #111734;
			text-decoration:none;
			font-size: 20px;
			line-height: 16px;
			margin: 0 -10px 0 - 10px;
		}*/
		


		/*
ul#navi_main li ul.dropdown_navi
		{
			margin: auto;
			padding: 10px 10px 10px 20px;
			width: 193px;
		}
		
		ul#navi_main li ul.dropdown_navi li
		{
			list-style: none;
			border: 0px solid #CCC;
			background: #664800;
			margin: 3px;
			padding: 3px;
			height: 20px;
			opacity:1.0;
		}
*/
		

   section
    {
        background-color: #FFF;
		margin-left: 00px;
         float: left;
    }
        .content_text
        {
	width: 300px;
	background-color: #fff;
	float: inherit;
	padding: 0px; 
	font-size: 14px;
	position: relative;
        }
		
	.spacer{
		height:50px;
		position: relative;
		float: inherit;

	}
	
	.content_img
        {
	width: 240px;
	background-color: #fff;
	float:	inherit;
	font-size: 12px;
	position: relative;
	padding-top: 0px;
				

        }
		ul#img_impression li
		{
		display: table-row;
		padding: 10px;
		list-style: none;
		text-align:left;
		margin-bottom: 200px;	
	
			
			}
		
	#content_main_table
	{
		color: #03192a;
		padding: 5px;
	}
    footer
    {
	background-color: #FFFFFF;
	margin-left: 00px;
	height: 40px;
	float: right;
	font-size: 10px;
	text-align:center;
		 border-style:	solid;
		border-width: thick;
		border-top-color : #111734;
		border-bottom-color: #111734;
		border-left:hidden;
		border-right:hidden;
		bottom:0px;
		position:fixed;
		z-index:10000;
	}
	
	#footer_main_container a
	{
		color: #0a538a;
	}
	
	
	#footer_main_container a:hover
	{
		color: #8da33c;
	}
}