/**
* Projekt: Swiss Mountain
* Datei:   Bildschirmlayout
* Typ:     Stylesheet
*
* @author webkrebse.com
* @version 1.0
*/

/**---------------------------------------------------------------------------
Farbkarte:

---------------------------------------------------------------------------*/

/**---------------------------------------------------------------------------
 Allgemeines
//	font-family: "Akzidenz Grotesk", Verdana, Arial, Helvetica, san-serif;

---------------------------------------------------------------------------*/

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

body {
	color: #0f1844;
	font-family: Arial, Helvetica, san-serif;
	font-size: 12px;
	line-height: 1.5em;
	background-color: #d7d4cf;
	background: url(../layout/bg_body.jpg) no-repeat 0 0;
}

a:link, a:visited {
	color: #e3001b;
	text-decoration: underline;
}

a:active, a:hover, a:focus {
	color: #0f1844;
	text-decoration: underline;
}

#impressum a:link, #impressum a:visited {
	color:#0f1844;
	text-decoration: none;
}

#impressum a:active, #impressum a:hover, #impressum a:focus {
	text-decoration: underline;
}
	
a img {
    border: 0px;
}

:focus { outline: 0; }

h1 {
	font-size: 16px;
	font-weight: bolder;
	padding-bottom: 18px;
	color: #ff0000;
	text-transform: uppercase;
}

p {
	margin-bottom: 18px;
}

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

#navi li {
	/* display: -moz-inline-block; Für den Mac FF3 funktioniert nicht */
	display: inline-block;
	text-align: center;
	margin-left: -5px; /* !!! nix gut */
}

#subnavi li {
	width: 100px;
	height: 35px;
	text-align: left;
	padding-left: 11px;
}

#meta li {
	width: 100px;
	height: 36px;
	text-align: right;
	padding-right: 11px;
}

#navi a, #subnavi a, #meta a,
#navi a:active, #subnavi a:active, #meta a:active,
#navi a:visited, #subnavi a:visited, #meta a:visited {
	color: #000000;
	text-transform: uppercase;
	text-decoration: none;
}

#navi a.on,
#navi a:hover, #subnavi a:hover, #meta a:hover,
#navi a:focus, #subnavi a:focus, #meta a:focus {
	color: #ffffff;
	background-color: #e3001b;
}

#navi_index img { width: 59px; height: 30px; background: url(../layout/navi_index_1.jpg) no-repeat;}
#index #navi_index a img, #navi_index a:focus img, #navi_index a:hover img { background: url(../layout/navi_index_2.jpg) no-repeat; }
#navi_produkte img { width: 91px; height: 30px; background: url(../layout/navi_produkte_1.jpg) no-repeat;}
#produkte #navi_produkte a img, #haendbaegs #navi_produkte a img, #baeckpaecks #navi_produkte a img, #navi_produkte a:focus img, #navi_produkte a:hover img { background: url(../layout/navi_produkte_2.jpg) no-repeat; }
#navi_haendbaegs img { width: 100px; height: 35px; background: url(../layout/navi_haendbaegs_1.jpg) no-repeat;}
#haendbaegs #navi_haendbaegs a img, #navi_haendbaegs a:focus img, #navi_haendbaegs a:hover img { background: url(../layout/navi_haendbaegs_2.jpg) no-repeat; }
#navi_baeckpaecks img { width: 100px; height: 35px; background: url(../layout/navi_baeckpaecks_1.jpg) no-repeat;}
#baeckpaecks #navi_baeckpaecks a img, #navi_baeckpaecks a:focus img, #navi_baeckpaecks a:hover img { background: url(../layout/navi_baeckpaecks_2.jpg) no-repeat; }
#navi_ueber img { width: 87px; height: 30px; background: url(../layout/navi_ueber_1.jpg) no-repeat;}
#ueber #navi_ueber a img, #navi_ueber a:focus img, #navi_ueber a:hover img { background: url(../layout/navi_ueber_2.jpg) no-repeat; }
#navi_haendler img { width: 81px; height: 30px; background: url(../layout/navi_haendler_1.jpg) no-repeat;}
#haendler #navi_haendler a img, #navi_haendler a:focus img, #navi_haendler a:hover img { background: url(../layout/navi_haendler_2.jpg) no-repeat; }
#navi_shop img { width: 58px; height: 30px; background: url(../layout/navi_shop_1.jpg) no-repeat;}
#shop #navi_shop a img, #navi_shop a:focus img, #navi_shop a:hover img { background: url(../layout/navi_shop_2.jpg) no-repeat; }
#navi_kontakt img { width: 100px; height: 36px; background: url(../layout/navi_kontakt_1.jpg) no-repeat;}
#kontakt #navi_kontakt a img, #erfolg #navi_kontakt a img, #navi_kontakt a:focus img, #navi_kontakt a:hover img { background: url(../layout/navi_kontakt_2.jpg) no-repeat; }
#navi_impressum img { width: 100px; height: 36px; background: url(../layout/navi_impressum_1.jpg) no-repeat;}
#impressum #navi_impressum a img, #navi_impressum a:focus img, #navi_impressum a:hover img { background: url(../layout/navi_impressum_2.jpg) no-repeat; }

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

#wrapper {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1006px;
}

#logo {
	position: absolute; /* Bezugspunkt wrapper */
	top: 0px;
	left: 0px;
	width: 583px;
	height: 120px;
	background: url(../layout/logo.png) no-repeat;
	z-index: 10;
}

#gummi {
	position: absolute; /* Bezugspunkt wrapper */
	top: 123px;
}

#inhalt {
	position: absolute;
	top: 0px;
	padding-left: 55px;
	padding-right: 58px;
	padding-top: 22px;
}

#navi {
	position: absolute;
	left: 590px;
	height: 30px;
}

#subnavi {
	position: absolute;
	top: 34px;
	left: 632px;
	height: 70px;
}

#meta {
	position: absolute; /* Bezugspunkt gummi */
	left: 794px;
	top: 362px;
	height: 72px;
}

/**---------------------------------------------------------------------------
 Seitenspezifisches
---------------------------------------------------------------------------*/

#unikate {
	background: url(../layout/bg_popup.jpg) no-repeat 0 0 #d7d4cf;
}

#baeckpaecks #logo {
	background: url(../layout/logo_bp.png) no-repeat;
}

#ueber #inhalt,
#haendler #inhalt,
#shop #inhalt,
#impressum #inhalt,
#kontakt #inhalt,
#erfolg #inhalt {
	left: 116px;
	width: 550px;
	height: 457px;
	background: url(../layout/bg_ueber.jpg) no-repeat;
}

#index #inhalt,
#baeckpaecks #inhalt,
#haendbaegs #inhalt {
	left: 36px;
	width: 933px;
	height: 308px;
}

#index #inhalt,
#haendbaegs #inhalt { 
	background: url(../layout/bg_produkte.jpg) no-repeat; 
}

#baeckpaecks #inhalt { 
	background: url(../layout/bg_baeckpaecks.jpg) no-repeat; 
}

#unikate #inhalt {
	top: 130px;
	left: 27px;
	width: 476px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 17px;
}

.spalte_links {
	float: left;
}

.spalte_rechts {
	float: left;
	margin-left: 40px;
}

#haendler .spalte_links {
	position: absolute;
	top: 22px;
	left: 55px;
	width: 245px;
	padding: 0px;
}

#haendler .spalte_rechts {
	position: absolute;
	top: 22px;
	left: 285px;
	width: 300px;
	padding: 0px;
	padding-left: 30px;
	border-left: 1px solid #6c6b69;
}

#impressum .absatz1 {
	width: 450px;		
}

#ueber #absatz1 {
	font-weight: bold;		
}

#ueber #absatz2 {
	font-weight: bold;
	margin-left: 180px;		
}

#ueber #img1 {
	position: absolute;
	top: 279px;
	left: 43px;
	width: 190px;
	height: 126px;
}

#erfolg #img1 {
	position: absolute;
	top: 78px;
	right: 69px;
	width: 170px;
	height: 145px;
}

#shop #img1 {
	position: absolute;
	top: 145px;
	right: 38px;
	width: 194px;
	height: 133px;
}

#kontakt #absatz1 {
	width: 320px;
	font-weight: bold;
}

#haendler p,
#kontakt p {
	font-weight: bold;
	margin-bottom: 9px;
}

#haendler p {
	width: 240px;
}

#haendler .hint,
#kontakt .hint {
	font-weight: normal;
	margin-bottom: 0px;
}

#shop p {
	width: 320px;
}

#index #gruppe_links {
	position: absolute; /* Bezugspunkt inhalt */
	top: -22px;
	left: 30px;
	height: 305px;
	width: 395px;
}

#index #gruppe_rechts {
	position: absolute; /* Bezugspunkt inhalt */
	top: -64px;
	left: 630px;
	height: 355px;
	width: 285px;
}

#index #stempel1 {
	position: absolute; /* Bezugspunkt inhalt */
	top: 15px;
	left: 413px;
	height: 119px;
	width: 142px;
}

#index #stempel2 {
	position: absolute; /* Bezugspunkt inhalt */
	top: 165px;
	left: 485px;
	height: 111px;
	width: 126px;
}

#teaser_links {
	position: absolute; /* Bezugspunkt inhalt */
	left: 0px;
	width: 380px;
}

#index #teaser_links {
	top: 315px;
	height: 165px;
}

#haendbaegs #gruppe_links {
	position: absolute; /* Bezugspunkt inhalt */
	top: 0px;
	left: 0px;
	height: 303px;
	width: 360px;
}

#haendbaegs #gruppe_mitte {
	position: absolute; /* Bezugspunkt inhalt */
	top: -30px;
	left: 360px;
	height: 333px;
	width: 289px;
}

#haendbaegs #gruppe_rechts {
	position: absolute; /* Bezugspunkt inhalt */
	top: 147px;
	left: 664px;
	height: 333px;
	width: 296px;
}

#haendbaegs #stempel1 {
	position: absolute; /* Bezugspunkt inhalt */
	top: -5px;
	left: 686px;
	height: 114px;
	width: 253px;
}

#baeckpaecks #gruppe_links {
	position: absolute; /* Bezugspunkt inhalt */
	top: 0px;
	left: 30px;
	height: 302px;
	width: 260px;
}

#baeckpaecks #gruppe_rechts {
	position: absolute; /* Bezugspunkt inhalt */
	top: 30px;
	left: 541px;
	height: 268px;
	width: 351px;
}

#baeckpaecks #stempel1 {
	position: absolute; /* Bezugspunkt inhalt */
	top: 15px;
	left: 305px;
	height: 114px;
	width: 136px;
}

#haendbaegs #teaser_links {
	top: 302px;
	height: 178px;
}

#baeckpaecks #teaser_links {
	top: 260px;
	height: 220px;
}

#teaser_rechts {
	position: absolute; /* Bezugspunkt inhalt */
	left: 430px;
	width: 230px;
}

#index #teaser_rechts,
#haendbaegs #teaser_rechts {
	top: 350px;
	height: 130px;
}

#baeckpaecks #teaser_rechts {
	top: 340px;
	height: 140px;
}

#index #mehr1 {
	position: absolute; /* Bezugspunkt inhalt */
	top: 23px;
	left: 123px;
}

#hint {
	position: absolute;
	top: 157px;
	left: 390px;
	width: 200px; 
}

#container {
       text-align: center;
	margin-left: 50px;
	margin-top: 25px;
	margin-bottom: 25px;
	margin-right: 50px;

}

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

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