/**
* Projekt: Webkrebse
* Typ:     Stylesheet
*
* @author webkrebse.com
* @version 1.1
*/

/**---------------------------------------------------------------------------
Farbkarte:
Krebs-Orange:	       #f29719
WZ-Orange: 		#f48215
Krebsblau: 		#161c43
Schrift:		#0f1844
helle Schrift: 	#6f7387
Lichtgrau: 		#f8f8f8
Hellgrau:		#d8d9df
dunkelgrau: 	       #babcc8
---------------------------------------------------------------------------*/

/**---------------------------------------------------------------------------
 Allgemeines
---------------------------------------------------------------------------*/

/** weil die Browser dies so unterschiedlich besetzen */
* {
	padding:0;
	margin:0;
}

body {
	color: #0f1844;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, san-serif;
	font-size: 14px;
	line-height: 1.5em;
	background-color: #f29719;
}

a, a:active, a:visited {
	color: #6f7387;
	text-decoration: none;
}

a:hover, a:focus {
	color: #6f7387;
	text-decoration: underline;
}

h1, h1 a, h1 a:active, h1 a:visited, h1 a:hover, h1 a:focus {
	color: #f48215;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 20px;
}

h2, h2 a, h2 a:active, h2 a:visited, h2 a:hover, h2 a:focus {
	color: #0f1844;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 5px;
}

h3, h3 a, h3 a:active, h3 a:visited, h3 a:hover, h3 a:focus {
	color: #0f1844;
	font-size: 1em;
	font-weight: bold;
}

#inhalt p, #inhalt ul, #inhalt ol, #inhalt cite {
	max-width: 365px;
	margin-bottom: 10px;
}

#inhalt li {
	text-align: left;
	line-height: 1.5em;
	background: url(../layout/bullet.gif) no-repeat left 4px;
	list-style: none;
	padding-left: 1.3em;
}

#inhalt .blanko {
	background: none;
}

#inhalt .blanko li {
	background: none;
	padding-left: 0;
}

#inhalt .links li{
	background: url(../layout/raquo.gif) no-repeat left 6px;
	padding-left: 0.8em;
}

#inhalt .check li{
	background: url(../layout/check.gif) no-repeat left 6px;
	padding-left: 1.3em;
}
#inhalt .links li.screen { background: url(../layout/screen.gif) no-repeat; }
#inhalt .links li.slides { background: url(../layout/slides.gif) no-repeat; }
#inhalt .links li.print  { background: url(../layout/print.gif) no-repeat; }
#inhalt .links li.video  { background: url(../layout/video.gif) no-repeat; }
#inhalt .links li.audio  { background: url(../layout/audio.gif) no-repeat; }
#inhalt .links li.pdf    { background: url(../layout/pdf.gif) no-repeat; }
#inhalt .links li.screenintern { background: url(../layout/screenintern.gif) no-repeat; }
#inhalt .links li.screen,
#inhalt .links li.slides,
#inhalt .links li.print,
#inhalt .links li.video,
#inhalt .links li.audio,
#inhalt .links li.pdf,
#inhalt .links li.screenintern {
	padding-left: 22px;
	background-position: 0px 3px;
}

#inhalt .upper-alpha li {
	list-style-type: upper-alpha;
	background: none;
	margin-left: 1.55em;
	padding-left: 0.5em;
}

img {
	border: none;
}

:focus { outline: 0; }

.img, .img_r, .img_l, .img_ruo, .img_luo, .img_ru,
.img_klein, .img_klein_r, .img_klein_l, .img_klein_ruo, .img_klein_luo {
	width: 200px;
	height: 127px;
	display: block;
	background: url(../layout/rahmen.png) no-repeat;
	padding-top: 8px;
	padding-left: 8px;
	padding-bottom: 7px;
	padding-right: 7px;
	float: left;
	margin-top: -2px;
	margin-left: -2px;
	margin-bottom: -1px;
	margin-right: -1px;
}

.img_r, .img_ruo, .img_ru,
.img_klein_r, .img_klein_ruo {
	margin-right: 19px;
	clear: both;
}

.img_l, .img_luo,
.img_klein_l, .img_klein_luo {
	margin-left: 10px;
	float: right;
	clear: both;
}

.img_ruo, .img_luo,
.img_klein_ruo, .img_klein_luo{
	margin-top: 9px;
}

.img_ru {
	margin-bottom: 9px;
}

.img_klein, .img_klein_r, .img_klein_l, .img_klein_ruo, .img_klein_luo {
	width: 157px;
	background: url(../layout/rahmen_klein.png) no-repeat;
}

.thumb, .thumb_r, .thumb_ru {
	width: 78px;
	height: 50px;
	display: block;
	background: url(../layout/rahmen_thumb.png) no-repeat;
	padding-top: 5px;
	padding-left: 5px;
	padding-bottom: 4px;
	padding-right: 4px;
	float: left;
	margin-top: -2px;
	margin-left: -2px;
	margin-bottom: -1px;
	margin-right: -1px;
}

#inhalt table {
	display: block;
	margin-left: -5px;
	border-collapse: collapse;
	margin-bottom: 10px;
}
#inhalt td,
#inhalt th {
	padding-left: 5px;
	padding-right: 5px;
}
#inhalt .rahmen td,
#inhalt .rahmen th {
	border: 1px solid #f8f8f8;
}

a:active .thumb,
a:hover .thumb,
a:active .thumb_r,
a:hover .thumb_r,
a:active .thumb_ru,
a:hover .thumb_ru {
	background: url(../layout/rahmen_thumb_active.png) no-repeat;
}

.thumb_r, .thumb_ru {
	margin-right: 9px;
}

.thumb_ru {
	margin-bottom: 9px;
}

.spalte, .spalte_r, .spalte_kk, .spalte_k, .spalte_img {
	max-width: 365px;
	float: left;
	position: relative;
}

.spalte_r {
	margin-right: 60px;
}

.spalte_k {
	max-width: 235px;
}

.spalte_img {
	width: 215px;
    margin-right: 19px;
}

.absatz {
	float: left;
	margin-bottom: 40px;
}

.absatzz {
	margin-bottom: 40px;
}

.abschnitt {
	float: left;
	margin-top: 10px;
	margin-bottom: 60px;
}

.linie_unten {
	border-bottom: 1px solid white;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.url,
.small {
	font-size: 12px;
}

/**---------------------------------------------------------------------------
 Navigation
---------------------------------------------------------------------------*/

/** Hauptnavi */

#navi li, #subnavi li, #meta li {
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}

#aktuelles #navi_aktuelles,
#referenzen #navi_aktuelles {
	height: 101px; /* pro Navipunkt +24px */
}

#ueber #navi_ueber,
#partner #navi_ueber,
#team #navi_ueber {
	height: 101px; /* pro Navipunkt +24px */
}

#navi a, #subnavi a {
	height: 24px;
	display: block;
	padding-left: 27px;
	line-height: 1.7em;
	color: #0f1844;
	text-decoration: none;
}

#navi li, #subnavi li {
	width: 125px;
	background: url(../layout/navi_trenner.png) 9px bottom no-repeat;
}

#navi .last, #subnavi .last {
	background: none;
}

#navi ul {
	background: url(../layout/bg_navi.png) repeat-y;
}

#subnavi ul {
	background: url(../layout/bg_subnavi.png) repeat-y;
}

/** Rollover */
#navi a:hover, #navi a:focus,
#subnavi a:hover, #subnavi a:focus {
	background: url(../layout/bg_navi_over.png) 9px top no-repeat;
}

#meta a:hover, #meta a:focus {
	text-decoration: underline;
}

/** Selected */
#index #navi_index a,
#seiten #navi_seiten a,
#design #navi_design a,
#hosting #navi_hosting a,
#aktuelles #navi_aktuelles a,
#aktuelles #navi_subaktuelles a,
#referenzen #navi_aktuelles a,
#referenzen #navi_referenzen a,
#ueber #navi_ueber a,
#partner #navi_partner a,
#team #navi_team a {
	background: url(../layout/bg_navi_over.png) 9px top no-repeat;
}

/** Metanavi */

#meta ul, #meta li {
	display: inline;
}

#meta #navi_kontakt, #meta #navi_newsletter, #meta #navi_impressum, #meta #navi_datenschutz {
	background: url(../layout/meta_trenner.png) right bottom no-repeat;
}

#meta a {
	display: inline;
	height: 18px;
	color: #0f1844;
	text-decoration: none;
	padding-left: 6px;
	padding-right: 9px;
}

/** Rollover */
#meta a:hover, #meta a:focus {
	text-decoration: underline;
}

/** Selected */
#kontakt #navi_kontakt a,
#newsletter #navi_newsletter a,
#impressum #navi_impressum a {
	text-decoration: underline;
}

/**---------------------------------------------------------------------------
 Bereiche
---------------------------------------------------------------------------*/

#wasserzeichen {
	position: absolute;
	top: 0;
	left: 50%;
	width: 930px;
	height: 645px;
	margin-left: -460px;
	background: url(../layout/wasserzeichen.png) no-repeat;
}

#wrapper {
	position: absolute;
	top: 24px;
	left: 50%;
	width: 876px;
	margin-left: -448px;
}

#kopf {
	position: absolute; /* Bezugspunkt wrapper */
	top: 26px;
	left: 36px;
	width: 876px;
	height: 515px;
	background: url(../layout/bg_kopf.png) no-repeat;
}

#logo {
	position: absolute; /* Bezugspunkt wrapper */
	top: 0px;
	left: 0px;
	width: 328px;
	height: 100px;
	background: url(../layout/wk_logo.png) no-repeat;
}

#gummi {
	position: absolute; /* Bezugspunkt wrapper */
	top: 145px;
	left: 0;
	width: 876px;
	margin-top: 370px;
	background: url(../layout/bg_mitte.png) repeat-y;
}

#inhalt {
	margin-left: 226px;
	margin-top: -378px;
	margin-bottom: 50px;
	width: 600px;
	min-height: 285px;
}

#zurueck {
	position: absolute; /* Bezugspunkt gummi */
	left: 174px;
	bottom: 55px;
	display: block;
}

#index #zurueck,
#leistungen #zurueck,
#design #zurueck,
#hosting #zurueck,
#kontakt #zurueck,
#newsletter #zurueck {
	display: none;
}

#zumgewinnspiel {
	position: absolute; /* Bezugspunkt gummi */
	left: 7px;
	top: -410px;
	display: none;
}

#index #zumgewinnspiel,
#sammelkarte #zumgewinnspiel {
	display: block;
}

#welle {
	position: absolute; /* Bezugspunkt gummi */
	bottom: 0px;
	left: 43px;
	width: 824px;
	height: 24px;
	background: url(../layout/bg_welle.png) bottom no-repeat;
}

#fuss {
	position: absolute; /* Bezugspunkt gummi */
	bottom: -15px;
	width: 876px;
	height: 15px;
	background: url(../layout/bg_fuss.png) bottom no-repeat;
}

#navi {
	position: absolute;
	top: 139px;
	left: 25px;
	width: 125px;
	font-size: 14px;
}

#navi_top {
	height: 15px;
	background: url(../layout/bg_navi_top.png) no-repeat;
}

#navi_bot {
	height: 15px;
	background: url(../layout/bg_navi_bot.png) no-repeat;
}

#aktuelles #subnavi,
#referenzen #subnavi {
	position: absolute;
	top: 249px;
	left: 48px;
	width: 182px;
	font-size: 14px;
}

#ueber #subnavi,
#team #subnavi,
#partner #subnavi {
	position: absolute;
	top: 273px;
	left: 48px;
	width: 182px;
	font-size: 14px;
}

#subnavi_top {
	height: 15px;
	background: url(../layout/bg_subnavi_top.png) no-repeat;
}

#subnavi_bot {
	height: 15px;
	background: url(../layout/bg_subnavi_bot.png) no-repeat;
}

#login {
	position: absolute;
	top: 15px;
	left: 614px;
	height: 55px;
	width: 200px;
	background: url(../layout/bg_login.png) no-repeat;
	font-size: 12px;
	padding-top: 11px;
	padding-left: 22px;
}

#meta {
	position: absolute;
	bottom: -22px;
	left: 136px;
	height: 27px;
	width: 377px;
	background: url(../layout/bg_meta.png) no-repeat;
	font-size: 13px;
	line-height: 13px;
	padding-top: 11px;
	padding-left: 23px;
}

#copy {
	position: absolute;
	bottom: -25px;
	right: 95px;
	font-size: 10px;
}

/**---------------------------------------------------------------------------
 Startseite
---------------------------------------------------------------------------*/

#index h1 {
	color: #0f1844;
	font-size: 24px;
	line-height: 30px;
	padding-top: 40px;
	width: 11.5em;
	text-align: right;
	display: block;
}

.startbild {
	display: block;
	position: absolute;
	bottom: 0px;
	right: -80px;
}

/**---------------------------------------------------------------------------
 Sammelkarten
---------------------------------------------------------------------------*/

.sammelkartenbild {
	display: block;
	position: absolute;
	top: -421px;
	right: 50px;
}

#sammelkarte #inhalt {
	width: 480px;
}

#sammelkarte h1 {
	font-size: 20px;
	margin-top: 20px;
	margin-bottom: 10px;
}

#sammelkarte .absatz {
	margin-top: 20px;
	margin-bottom: 20px;
}

#sammelkarte .img_klein_l {
	margin-left: 70px;
	margin-right: 10px;
}

#sammelkarte .img_klein {
	margin-right: 10px;
	margin-left:  10px;
}

#sammelkarte .spalte_k {
	width: 215px;
}

#sammelkarte .spalte_kk {
	width: 275px;
}

#sammelkarte .stern_l,
#sammelkarte .stern_r {
	position: absolute;
	top: -28px;
	width: 136px;
	height: 135px;
	background: url(../layout/stern.png) no-repeat;
	text-align: center;
	padding-top: 30px;
}

#sammelkarte .stern_l {
	left: 4px;
}

#sammelkarte .stern_r {
	left: 114px;
}

#sammelkarte .stern_l h2,
#sammelkarte .stern_l h3,
#sammelkarte .stern_l p,
#sammelkarte .stern_r h2,
#sammelkarte .stern_r h3,
#sammelkarte .stern_r p {
	padding: 0;
	margin: 0;
}

#sammelkarte .stern_l h3,
#sammelkarte .stern_r h3 {
	padding-top: 10px;
	padding-left: 18px;
	padding-right: 18px;
	font-size: 13px;
	line-height: 1.2em;
	height: 30px;
}

#sammelkarte .stern_l .zweizeilig,
#sammelkarte .stern_r .zweizeilig {
	padding-top: 0px;
	height: 40px;
}
#sammelkarte .stern_l p,
#sammelkarte .stern_r p {
	padding-left: 18px;
	padding-right: 18px;
	font-size: 10px;
	line-height: 1.1em;
	font-weight: bold;
}

#sammelkarte #sammelkartenpreisraetsel {
	margin-left: -53px;
	padding-left: 53px;
	padding-top: 20px;
	width: 543px;
	background: url(../layout/bg_sammelkarten.png) no-repeat;
}

#sammelkarte .specialloesung {
	margin-bottom: 370px;
}

/**---------------------------------------------------------------------------
 Newsletter
---------------------------------------------------------------------------*/

.newsletter h2 {
	border-top: 1px solid #babcc8;
	padding-top: 10px;
}

/**---------------------------------------------------------------------------
 Spezielles
---------------------------------------------------------------------------*/

.clearing { clear: both;}
.preload { visibility: hidden;}
.left { float: left;}
.right { float: right; text-align: right;}