@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body
{
 font-family:Arial;
 font-size:13px;
 background-color:#FFFFFF;
 margin-top:10px;
 padding-bottom:20px;
}


/* STRUCTURE START */

#pagewrap {
	width: 1100px;
	margin: 10px auto;
}
#header {
	padding: 25px 5px;
	background: url(hintergrund.gif) bottom left repeat-x;
}

#content {
	width: 760px; /* Account for margins + border values */
	float: left;
	padding: 0px 0px;
	padding-top:10px;
	margin: 0px 12px 5px 0px;
}

#right {
	width: 323px;
	padding: 0;
	float: left;
		padding-top:10px;
}
#footer {
	clear: both;
	padding: 10px 0px 0px 0px;
}

/* STRUCTURE END */	



img
{
 border:0px;
}

p
{
 margin:0px 0px 12px 0px; padding-top:0px; font-size: 13px; line-height:1.5em; text-align:justify;
}

h1
{
 font-size:21px;
 padding-bottom:0px;
 margin-bottom:10px;
 color:#2E2E2E;
 margin-left:0px;
 padding-top:3px;
 margin-top:0px;
}

h2
{
 font-size:18px;
 padding-bottom:0px;
 margin-bottom:10px;
 color:#2E2E2E;
 padding-top:8px;
 margin-left:0px;
}

h3
{
 font-size:15px;
 padding-bottom:0px;
 margin-bottom:10px;
 color:#2E2E2E;
 padding-top:0px;
 margin-top:0px;
 margin-left:0px;
}

h4
{
 font-size:14px;
 padding-bottom:0px;
 margin-bottom:6px;
 color:#2E2E2E;
 padding-top:0px;
 margin-top:0px;
 margin-left:0px;
}

li
{
 font-size:12px;
 line-height:1.35em;
 padding-top:8px;
 width:240px;
 list-style-image: url(aufzaehlung.gif);
}

ul
{
 padding-left:19px;
 margin-top:0px;
 padding-top:0px;
}


A
{
 TEXT-DECORATION: underline;
 color: #B61701;
 font-size:12px;
}

A:hover
{
 TEXT-DECORATION: underline;
 color: #B61701
}

.logo
{
 margin-top:10px;
 margin-left:0px;
 height:auto;
 width:60%;
 margin-bottom:20px;
}


div#box3, div#box4
{
 border:1px solid #DDDDDD ;
 -moz-box-shadow: inset 0 0 12px 6px #F4F4F4;
 -webkit-box-shadow: inset 0 0 12px 6px#F4F4F4;
 box-shadow: inset 0 0 12px 6px #F4F4F4;
 background-color:#ffffff;
 padding:6% 5% 3% 5%;
 margin-bottom:6px;
 display:block;

 font-size:1.0em;
}

div#box3 li, div#box4 li
{
 font-size:1.0em;
 line-height:1.35em;
 padding-top:8px;
 list-style-image: url(design/aufzaehlung.gif);
}

div#box3 ul, div#box4 ul
{
 padding-left:19px;
 margin-top:0px;
 padding-top:0px;
}

div#boxsuit
{
 border:1px solid #DDDDDD ;
 -moz-box-shadow: inset 0 0 12px 6px #F4F4F4;
 -webkit-box-shadow: inset 0 0 12px 6px#F4F4F4;
 box-shadow: inset 0 0 12px 6px #F4F4F4;
 background-color:#ffffff;
 padding:17px;
 margin-bottom:0px;
 display:block;
 padding-top:23px;
 font-size:1.0em;
}


.box_left
{
 float:left;
 width:49%;
}

.box_right
{
 float:right;
 width:49%;
}

.advertising
{
 padding-top:2px;
 padding-bottom:12px;
}


.rahmen
{
 -moz-box-shadow: 0 0px 3px rgba(34,25,25,0.3);
 -webkit-box-shadow: 0 0px 3px rgba(34,25,25,0.3);
 box-shadow: 0 0px 3px rgba(34,25,25,0.3); padding:8px; max-width:250px; width:40%; height:auto; margin-right:14px; margin-bottom:14px; float:left; margin-top:3px; margin-left:0px;
}


.footer
{
 font-size:12px;
 padding-right:14px;
}

.point
{
 background-image:url('hook.gif'); background-position:0px 3px; background-repeat:no-repeat; font-size:13px; padding-left:25px; min-height:25px; margin-bottom:6px; padding-top:4px; line-height:1.5em
}

div#box p
{
 padding-left:0px; padding-bottom:5px;
}

 .button
  {
  -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
  border:1px solid #B9B9B9;
  padding:8px;
  background-image:url('button.back.gif');
  display:inline-block;
  background-repeat:repeat-x;  
  line-height:1.0em;
  TEXT-DECORATION: none;
  color:#000000;
  font-size:1.0em;
  margin-bottom:5px;
 }

 .button:hover { color:#0F0F0F; TEXT-DECORATION: underline;  }
  
  



  
  
.infobox3
{
 background-color:#FFF5E3;
 padding:15px;
}

.infobox2
{
 background-color:#EFF4F9;
 padding:15px;
}

.infobox4
{
 background-color:#ECEDED;
 padding:15px;
}

.infobox
{
 background-color:#DFE8F2;
 padding:15px;
 padding-bottom:0px;
 padding-right:7px;
}

.result1 { padding-left:21px; padding-top:0px; text-align:middle; float:left; background: url(correct1.gif) 0px 1px no-repeat; line-height:1.35em; font-size:13px }
.result2 { padding-left:21px; padding-top:0px; text-align:middle; float:left; background: url(correct2.gif) 0px 1px no-repeat; line-height:1.35em; font-size:13px }
.result3 { padding-left:21px; padding-top:0px; text-align:middle; float:left; background: url(correct3.gif) 0px 1px no-repeat; line-height:1.35em; font-size:13px }
.result4 { padding-left:21px; padding-top:0px; text-align:middle; float:left; background: url(correct4.gif) 0px 1px no-repeat; line-height:1.35em; font-size:13px }
.result5 { padding-left:21px; padding-top:0px; text-align:middle; float:left; background: url(correct5.gif) 0px 1px no-repeat; line-height:1.35em; font-size:13px }


.go_home
{
 font-size:12px;
 padding-left:22px;
 padding-top:1px;
 height:15px;
 text-align:middle;
 background: url(start.png) 0px 1px no-repeat;
 display: block;
 line-height:1.30em;
 float:left;
 padding-right:15px;
}

.right_button1
{
 font-size:12px;
 padding-left:35px;
 padding-top:15px;
 text-align:middle;
 background: url(right_button1.gif) 0px 0px no-repeat;
 font-size:13px;
 display:block;
 width:255px;
 height:30px;
 text-decoration:none;
 color:#000000;
 margin-bottom:5px;
}

.right_button2
{
 font-size:12px;
 padding-left:35px;
 padding-top:15px;
 text-align:middle;
 background: url(right_button2.gif) 0px 0px no-repeat;
 font-size:13px;
 display:block;
 width:255px;
 height:30px;
 text-decoration:none;
 color:#000000;
 margin-bottom:15px;
}

.right_button3
{
 font-size:12px;
 padding-left:35px;
 padding-top:15px;
 text-align:middle;
 background: url(right_button3.gif) 0px 0px no-repeat;
 font-size:13px;
 display:block;
 width:255px;
 height:30px;
 text-decoration:none;
 color:#000000;
 margin-bottom:5px;
}

.right_button5
{
 font-size:12px;
 padding-left:35px;
 padding-top:15px;
 text-align:middle;
 background: url(right_button5.gif) 0px 0px no-repeat;
 font-size:13px;
 display:block;
 width:255px;
 height:30px;
 text-decoration:none;
 color:#000000;
 margin-bottom:5px;
}


.answer
{
 -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;
 border:1px solid #B9B9B9;
 padding:8px;
 padding-top:10px;
 padding-bottom:10px;
 background-image:url('button.back.gif');
 background-repeat:repeat-x;
 background-color:#F2F2F2;
 color:#323131;
 display:inline-block;
 font-size:1.063em;
 margin-left:5px;
 width:calc(100% - 50px);
 margin-bottom:6px
}

.answer:hover
{
 background-color:#eeeeee; 
 background-image:url('../images/button.back.active.gif'); background-repeat:repeat-x;
}


.error_box
{
 -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;
 border:1px solid #B9B9B9;
 background-color:#FFF5E3;
 width:calc(100% - 70px);
 background-image:url('cancel.png'); background-repeat:no-repeat;
 background-position:9px center;
 margin-left:30px;
 display:none; 
 margin-bottom:6px; 
 padding-left:30px; text-align:middle;
 padding-top:10px; padding-bottom:1px;
 padding-bottom:10px;

}

.radio_button1
{
 float:left; margin:10px; margin-right:8px; margin-left:3px;
}

.likebox
{
 float:left; padding-bottom:9px;
}




	
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 1300px or less */
@media screen and (max-width: 1150px) {

  /* STRUCTURE START */
	
	#pagewrap {
		width: 99%;
	}

	#content {
		padding: 1% 1%;
		margin: 0px 0px 5px 0px;
		width: auto;
		float: none;
	}
	
	#right {
		clear: both;
		padding: 1% 1%;
		width: auto;
		float: none;
	}

	#header, #footer {
		padding: 1% 1%;
	}

  /* STRUCTURE END */	
		
}


/* for 1000px or less */
@media screen and (max-width: 1000px) {

  /* STRUCTURE START */

	#left {
		width: auto;
		float: none;
		display: none;
	}
	
	#content {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#right {
		width: auto;
		float: none;
	}

  /* STRUCTURE END */	
  

	
}

/* for 800px or less */
@media screen and (max-width: 800px) {


.box_left
{
 float:none;
 width:100%;
}

.box_right
{
 padding-top:0px;
 clear:both;
 float:none;
 width:100%;
}

}


/* for 480px or less */
@media screen and (max-width: 480px) {

  /* STRUCTURE START */

    body, #header, #content
	{
	 padding:0px;
	 margin:0
	}
	
	.logo, h1, p, .rahmen, h2, .advertising
	{
	 margin-left:8px; margin-right:8px;
	}

	
	.logo
	{
	 margin-top:8px;
	 margin-bottom:15px;
	}
	
	div#boxsuit
	{
	 padding:8px;
	 border-left:0px;
	 border-right:0px;
	}
  
	div#boxsuit p
	{
	 margin-left:0px;
	 margin-right:0px;
	}
	
    #pagewrap
	{
	 width:100%;
	}
  
	#header {
		height: auto;
	}
	h1 {
		font-size: 1.2em;
	}


  /* STRUCTURE END */	
  
  .rahmen
{
 margin-right:9px; margin-bottom:9px; padding:5px;
}	
	
}


#left {
	background: #f8f8f8;
}

#header, #left, #content, #right {
	margin-bottom: 5px;
}