html {font-family: arial; font-size: 12px; line-height: 15px;}
body {margin: 0px; background: url(img/sitebg.png) repeat-x top #EEE;}
* {margin: 0; padding: 0;}

.clear {clear: both;}
img {border: 0px;}


@media screen and (max-width : 680px){ .novis680 {display: none;} }

a {color: #552600; text-decoration: underline;}
a:hover {color: #bb6500;}

#header {width: 930px; margin: auto; height: 148px; background: url(img/header.jpg);}
	@media screen and (max-width : 930px){ #header {width: 100%; height: 0; padding-bottom: 15.914%; background: url(img/header.jpg); background-size: 100%;} }
	@media screen and (max-width : 680px){ #header {width: 100%; height: 0; padding-bottom: 14.706%; background: url(img/header2.jpg); background-size: 100%;} #header a {display: block; width: 100%; height: 0; padding-bottom: 14.706%;} }
#headbar {padding: 8px 0 0 20px; height: 22px;}
	@media screen and (max-width : 800px){ #headbar {display: none;} }
#hbox {height: 118px;}

h1 {display: inline; font-size: 12px;}


#topnav {list-style-type: none; height: 40px; margin: 0 2px 1% 2px; border-top: 1px solid #000; border-bottom: 1px solid #000;
background: #808080;
background: -moz-linear-gradient(top,  #808080 0%, #2f2f2f 53%, #000000 53%, #272727 82%, #343b3f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#808080), color-stop(53%,#2f2f2f), color-stop(53%,#000000), color-stop(82%,#272727), color-stop(100%,#343b3f));
background: -webkit-linear-gradient(top,  #808080 0%,#2f2f2f 53%,#000000 53%,#272727 82%,#343b3f 100%);
background: -o-linear-gradient(top,  #808080 0%,#2f2f2f 53%,#000000 53%,#272727 82%,#343b3f 100%);
background: -ms-linear-gradient(top,  #808080 0%,#2f2f2f 53%,#000000 53%,#272727 82%,#343b3f 100%);
background: linear-gradient(to bottom,  #808080 0%,#2f2f2f 53%,#000000 53%,#272727 82%,#343b3f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#343b3f',GradientType=0 );
}
#topnav li {float: left; height: 27px; padding: 13px 12px 0 0;}
#topnav li:hover {background: url(img/navbar.png);}
#topnav li a {text-decoration: none; font-size: 24px; font-weight: lighter; color: #ffb01e; background: url(img/arrow.png) no-repeat 4px 6px; padding-left: 33px;}
#topnav li:hover a {color: #000; background: url(img/arrow2.png) no-repeat 4px 6px;}
	@media screen and (max-width : 930px){ #topnav{margin: 0 0 1% 0;} #topnav li a {font-size: 18px; background: url(img/arrow.png) no-repeat 4px 3px;} #topnav li:hover a {background: url(img/arrow2.png) no-repeat 4px 3px;} }
	@media screen and (max-width : 860px){ #topnav{margin: 0 0 1% 0;} #topnav li a {font-size: 16px; background: url(img/arrow.png) no-repeat 4px 1px;} #topnav li:hover a {background: url(img/arrow2.png) no-repeat 4px 1px;} }
@media screen and (max-width : 680px){ #topnav {display: none;} }



#body {width: 100%; max-width: 930px; margin: auto; background: url(img/bodybg.jpg); border-bottom: 2px solid #dcdcdc; padding-bottom: 10px;}


.box {clear: both; background: #DDD; margin: 0 1% 1% 1%; padding: 1%; -moz-box-shadow: inset 0 0 0 1px #AAA, 0px 0px 4px #BBB; -webkit-box-shadow: inset 0 0 0 1px #AAA, 0px 0px 4px #BBB; box-shadow: inset 0 0 0 1px #AAA, 0px 0px 4px #BBB; text-align: justify;}





.kategorie {width: 32%; margin-left: 1%; margin-bottom: 1%; float: left; box-shadow: 0 0 7px rgba(0, 0, 0, 0.5); height: 450px;}
.kategorie img {width: 96%; display: block; margin: 0 auto 1% auto;}
.kategorie p {width: 96%; margin: auto; text-align: justify;}
.kategorie h2 {font-size: 23px !important; display: block; text-align: center;}
.kategorie h2 {color: #ffb01e; text-shadow: 1px 1px 0 #000; font-weight: lighter; height: 27px; padding-top: 6px; background: url(img/title.png); text-align: center;}
	@media screen and (max-width : 680px){
		.kategorie p {display: none;}
		.kategorie {height: auto; width: 48.5%;}
	}
	@media screen and (max-width : 400px){ .kategorie {height: auto; width: 99%; margin: 0.5%;} }





.usnav {width: 650px; margin: 30px auto; clear:both;}
.usnav_back {display: block; width: 34.154%; height: 0; padding-bottom: 8.615%; background: url(img/back.png) center top; background-size: 100%; float: left;}
.usnav_back:hover {background: url(img/back.png) center bottom; background-size: 100%;}

.usnav_home {display: block; width: 31.692%; height: 0; padding-bottom: 8.598%; background: url(img/home.png)center top; background-size: 100%; float: left;}
.usnav_home:hover {display: block; width: 31.692%; height: 0; padding-bottom: 8.598%; background: url(img/home.png)center bottom; background-size: 100%;}

.usnav_next {display: block; width: 34.154%; height: 0; padding-bottom: 8.615%; background: url(img/next.png) center top; background-size: 100%; float: left;}
.usnav_next:hover {background: url(img/next.png) center bottom; background-size: 100%;}
	@media screen and (max-width : 650px){.usnav {width: 100%; margin: 30px auto; clear:both;}}



.thinweis:after {content:"*Hinweis: Rollenspiel am Telefon durch prof. Telefonisten, kein Real-Treffen. Bilder, Namen und Texte dienen nur zur Visualisierung der Werbeangebote und zeigen nicht die tatsächliche Person."; clear: both; width: 98%; display: block; font-size: 12px; padding: 0 1%; text-align: center; color: rgba(0, 0, 0, 0.5); opacity: 0.5;}
.ttarif:after {content:"*Garantiert 1,99€/Min aus allen deutschen Netzen - Kein Abo."; width: 98%; display: block; padding: 2% 1% 1% 0; text-align: center; font-size: 12px; color: #000; text-shadow: 1px 1px 0 #FFF; clear: both;}
	@media screen and (max-width : 680px){.thinweis:after, .ttarif:after {font-size: 10px;}}

.footer {padding: 1%; text-align: center;}