/*  =========================================================
Stylesheet für die handy.ch Seite  
Stand:  0.2
Datei:  bildschirm.css
Media:  screen 
Datum:  16. April 2008
Autor:  WEH 
Aufbau  1. Farbdefinitionen
		2. Kalibrierung und allgemeine Styles 
		3. Absolut positionierte Elemente
        4. Styles für Layoutbereiche    
        5. Sonstige Styleklassen
        6. Einmalige Module  
========================================================== */

/* ====================================== 
   1. Farbdefinitionen 
   ====================================== */
/*  
	Rot Töne
	#7C1611 Primäres Rot
	#492626 Weinrot (Hintergrund)
 	#583837 Pastell-Weinrot (Hintergrund)
 	#E6DCDB Hellrot (Content-Flächen-Hintergrund)
 	#DCD0CF Hellrot mit 27% Weinrot
 	
 	Grau Töne
 	#c5c6c8 Dunkelgrau 
 	#dddee0 Grau 
 	#f6f7fa Hellgrau 

	Cremefarbiger Hintergrund
	#DBD6C1 Listboxen etc.

 	Text
 	#FFFFFF Weiss
 	
 	----- eigene Farben aus den PSD Files
 	#C9BEBD Hintergrund Spalte Links / Rechts
*/

/* ====================================== 
   2. Kalibrierung und allgemeine Styles 
   ====================================== */

/* Kalibrierung der wichtigsten Abstände */
*  { padding: 0; margin: 0; }
h2, h3, p { margin-bottom: 0.1em; }  
ul ul { margin-bottom: 0;}  

/* Allgemeine Selektoren */

html { height: 101%; } 
body { 
   background: url("../pict/background/root.png") repeat-x ;
   font-family: Arial, Helvetica, Verdana, sans-serif; 
   font-size: 7pt; 
}
h1 { font-size: 10pt; color: white; } 
h2 { font-size: 8pt; }
h3 { font-size: 7pt; }
p {font-size: 7pt; }

/* Hyperlinks */
a { text-decoration: none; outline: none;} 
a:link { color: black; } 
a:visited { color: black; }
a:active { color: black; }
a img { border: none; }

li { list-style: none; }

/* Allgemeine Klassen und IDs */
.skiplink { 
   position: absolute; 
   left: -3000px; 
   top: -2000px; 
   width: 0px; 
   height: 0px; 
   overflow: hidden; 
   display: inline; 
}
.floatleft { float:left; }
.floatright { float:right; }
.clearing { clear: both; }
.center { margin: 0px auto; }


/* ====================================== 
   3. Absolut positionierte Elemente
   ====================================== */
#logo { 
	position:absolute;
	top: 10px;
	left: 15px;
}
#circles { 
	position: absolute;
}
#circles img {
	width: 822px;
	margin: 0px auto;
}



/* ==================================== 
   4. Styles für die  Layoutbereiche 
   ==================================== */
#wrapper { 
   	color: black; 
   	background-color: white;
        background: url("../pict/background/3columns.gif") repeat-y ;
   	width: 824px;  
   	margin: 5px auto;
}
/* ==================================== 
   4.1 Kopf Bereich 
   ==================================== */ 
#head {
/*
   	border: 1px solid black;
	border-bottom: none;
*/
	position: relative;
	height: 120px;
   	background: url("../pict/background/banner.gif") no-repeat;
	
}
#head #langselect {
	margin-top: 70px;
	float: right;
	background-color: yellow;
}
/* ==================================== 
   4.2 Linke Spalte 
   ==================================== */ 
#columnleft { 
   float: left; 
   padding: 0px 10px 10px;
   width: 140px; 
} 
/* für IE6 */
* html #columnleft { width: 140px; }

/* ==================================== 
   4.3 Content Bereich
   ==================================== */ 
#textbereich {
   border-right: 1px solid black;
   float: right; 
   width: 662px;  
   min-height: 465px;
}
#columncenter { 
   	float: left; 
	padding: 0px 10px 10px;
   	width: 480px;
}
/* ==================================== 
   4.3 Rechte Spalte 
   ==================================== */
#columnright {  
   	float: right;  
   	padding: 0px 10px 10px;
   	width: 140px; 
}
/* für IE6 */
* html #columnright { width: 140px; }

/* ==================================== 
   4.4 Fussbereich
   ==================================== */  
#footer {
   	clear: both; 
   	color: black;  
	background-color: white;
   	border-top: 1px solid black; 
	padding-top: 3px;
   	height: 20px;
}
#footer div {
	border-top: 10px solid #b3adaa;
}


/* ==================================== 
   5. Sonstige Style Klassen 
   ==================================== */

/* ==================================== 
   5.1 Tabs im Kopf und Fussbereich
   ==================================== */
.tablist li {
	float: left;
	display: inline;
	height: 30px;
	padding: 0 0 0 12px;
	background: url("../pict/background/door_left.gif") no-repeat 0% -125px;
}
.tablist li:hover {
	background-position: 0% 100%;
}

.tablist a {
    float: left;
	display: block;
	height: 25px;
	padding: 5px 7px 0 0;
	background: url("../pict/background/door_right.gif") no-repeat 100% -125px;
}
.tablist form {
	width: 200px;
	height: 30px;
	padding: 0px 7px 0 0;
	background: url("../pict/background/door_right.gif") no-repeat 100% -125px;
}
.tablist form select {
	width: 80px;
	color: white;
	background-color: #B3ADAA;
	border: 1px solid #616161;
}

.tablist li:hover a,
.tablist li:hover form {
	background-position: 100% 100%;
}

/* ==================================== 
   5.2 Titelbalken rot/grau
   ==================================== */

.titlebar {
	/* Roter Titelbalken */
	padding-top: 2px;
	padding-left: 4px;
	
/*	width: 482px; */
	height: 20px;
	
	font-size: 5pt;
	font-style: normal;
	font-weight: bold;
	text-align: left;
	
	background: url("../pict/menu/blackbar.gif");
}

.titlebar img {
	margin-left: -25px;
	margin-top: -15px;
}

.titlebar span {
	float:right;
	margin-right:5px;
	margin-top: 2px;
	font-size: 7pt;
	color: white;
}

.titlebar span.handset {
	float: none;
	position: relative;
	bottom: 23px;
}

.titlebar a {
    color: white;
}


/* ==================================== 
   5.3 Teaser Box für linke / rechte spalte
   ==================================== */
.teaserbody_1, .teaserbody_2 {
	background: #FFFFFF;
}
.teaserfootertable_1, .teaserfootertable_2 {
	width: 100%;
}

.teasercontent_1, .teasercontent_2 {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

.teasercontent_1 div table, .teasercontent_2 div table {
	width: 100%;
}

#teaserhead_1, #teaserhead_2 {
	margin-top: 10px;
	margin-bottom: 2px; 
	padding: 3px;
	height: 17px;
	background: url("../pict/menu/blackbar.gif") ! important;
}

.mn_tree_head_title {
	font-size: 10pt;
	font-weight: bold;
	color: white;
}


/* ==================================== 
   5.4 Containerbox für Content Bereich
   ==================================== */
.largebox {
	margin-top: 10px;
	width: 481px;
	height: auto; 
}

/* ==================================== 
   5.5 Cover Box für Games, Videos, Pics
   ==================================== */
.coverbox {
	float: left;
	margin: 2px 1px 0px 1px;
	width: 118px;
	height: auto;
	
	text-align: center;
	background-color: black;
}

.coverbox img.cover {
    float: left;
	border: 1px solid #fff;
	margin: 7px 7px 2px;
}

.coverbox div {
	margin: 0px auto;
	width: 101px;
	height: 27px;
}
.coverbox div span {
	color: white;
	float: left;
	width: 80px;
	text-align: left;
}
div#videobox .coverbox {
    height: 120px;
}
div#videobox .coverbox img.cover {
	border: none;
	margin-left: 0px;
	margin-right: 0px;
	width: 118px;
	height: 86px;
}
div#mmsbox .coverbox img.cover {
	width: 101px;
	height: 80px;
}
div#gamebox .coverbox {
    height: 157px;
}
div#gamebox .coverbox img.cover {
	width: 101px;
	height: 119px;
}
div#themebox .coverbox {
    height: 173px;
}
div#themebox .coverbox img.cover {
	width: 101px;
	height: 134px;
}

/* ==================================== 
   5.6 Cover Box Realtones
   ==================================== */
.rcbox {
	border: 1px solid black;
	float:left;
	margin: 2px 0px 0px 1px;
	padding: 4px;
	width: 227px;
	background-color: white;
}
.rcbox div.floatright {
	text-align: right;
	width: 22px;
	padding: 0px;
}

.rcbox span {
	font-size: 8pt;
	padding-left: 5px;
	width: 150px;
}
.rcbox span.title {
	font-weight: bold;
}

.rcbox img.cover {
	width: 45px;
	height: 45px;
}

/* ==================================== 
   5.7 Listen Box für Poly / Funsounds
   ==================================== */
.lbox {
	margin: 2px 2px 0px 0px;
	padding: 4px;
	width: 228px;
	height: 20px;
	background-color: #c5c6c8;
}
.lbox div.floatright {
	text-align: right;
	height: 22px;
	width: 44px;
	padding: 0px;
}
.lbox.red {
	 background-color: white; 
}
.lbox.alt {
	 background-color: white; 
}
.lbox span.tune {
	margin-top: 2px;
	width: 175px;
	padding-left: 5px;
	font-size: 9pt;
	font-weight: bold;
}

/* ==================================== 
   5.8 Text Box für AGB Impressum Hilfe,...
   ==================================== */
.textbox {
	color: black;
}
.textbox p, .textbox h2 {
	padding-left: 3px;
	margin-bottom: 10px;
}

.textbox address {
	padding-left: 3px;
	color: black;
	font-style: normal;
}
.textbox address span {
	font-weight: bold;
}

div.content {
   	margin-top: 2px;
	width: 122px;
	padding: 9px;
	background-color:#FFFFFF;
}

/* ==================================== 
   5.9 Text Box wenn kein Content vorhanden
   ==================================== */
.nocontent {
  margin-top: 5px;
  padding: 5px;
  text-align: center;
  background-color:#DBD6C1;
}


/* ==================================== 
   6. Einmalige Module 
   ==================================== */
/* ==================================== 
   6.1 Hauptmenu Box im Kopfbereich
   ==================================== */
#mainnav {
	padding-top: 92px; 
	height: 25px;
	
}
#mainnav div {
	height: 25px;
 	width: 822px;
	background: url("../pict/menu/header.gif"); 
	border: 1px solid black;
	border-bottom: none;
	border-top: none;

}
#mainnav ul {
	/* border: 1px solid green; */
	position: relative; 
    z-index:3;
	margin-left: 160px;
	float: left;
	height: 25px;
	padding-right: 4px;
}
#mainnav li {
	float: left;
	height: 25px; 

}
#mainnav a {
	padding: 6px 5px 6px 5px;
	display: block;
	float: left;
	height: 13px;
	font-size: 10pt;
	font-weight: bold;
	color: black;
}
#mainnav a:hover, #mainnav .selected {
	color: white;
	background: url("../pict/menu/header_selected.gif");
}

/* ==================================== 
   6.2 Rubrikenmenu in der linken Spalte 
   ==================================== */
/*
    #c5c6c8 Dunkelgrau 
 	#dddee0 Grau 
 	#f6f7fa Hellgrau 

	#fcc200 Dunkelgelb 
 	#fcd600  
 	#fcea00 Hellgelb

	#99141b selected / hover

	*/
#mbox {
	margin-top: 10px;
}
#mbox div.content {
	width: 140px;
	padding: 0px;
	background-color: transparent;
} 
#mbox li { 
	padding-left: 5px; 
	border-bottom: 2px solid white ; 
	background-color: white;
	/* #4C4C4C */
	/* #BF0B12 */
}
#mbox li li {  
	margin-left: -5px;
	padding-left: 10px;
}
#mbox li li li{
	margin-left: -10px;
	padding-left: 20px;
}
#mbox li li li li{
	margin-left: -20px;
	padding-left: 30px;
}
#mbox li a {
   	display: block;
	height: 15px;
	padding-top: 2px;
}
#mbox li.selected {
   	background-color: #fcc200;
}
#mbox li:hover {
	background-color: #fcc200;
}
/* ==================================== 
   6.3 Page Navigation
   ==================================== */
#pagenav {
  height: 19px;
  margin-top: 2px;
  background-color: #c5c6c8;
}
#pagenav div {
  margin-top: 2px;
  width: 100%;
  text-align: center;
}
#pagenav div p {
  padding-top: 2px;
}
#pagenav div img {
  margin-left: 2px;
  margin-right: 2px;
}

#pagenav #pagenav_L {
  width: 150px;
  height:2px;
  text-align: right;
	
}
#pagenav #pagenav_R {
  width: 147px;
  height:2px;
  text-align: left;
  padding-right: 3px;
}
.pagenav_actual_number {
  padding-left: 3px;
  padding-right: 3px;
  margin-left: -3px;
  margin-right: -3px;
  font-weight: bold;
  background-color: #FFFFFF;
  /* #7C1611 */
}
.pagenav_separator {
  padding-left: 5px;
  padding-right: 5px;
}


/* ==================================== 
   6.4 Search Box 
   ==================================== */
#sbox {
	margin-top: 10px;
}
#sbox div.content {
	padding: 0px 9px;
}
#sbox div.content input {
	width: 115px;
}
#sbox div.content input#submit {
	float:right;
	width: 38px;
	padding: 1px;
	margin: 2px 0px 3px;
	
	border: none;
	color: white;
	background-color: #4C4C4C;

	font-size: 10pt;
	font-weight: bold;
}
#sbox div.content label { 
   display: block; 
   cursor: pointer; 
   padding-top: 5px;
   padding-bottom: 2px;
   font-size: 8pt;
}

/* ==================================== 
   6.5 Handy Selektor Infobox 
   ==================================== */
#hsbox {
	margin-top:10px;
	text-align: center;
}
#hsbox div.content {
	width: 140px; 
	padding: 9px 0px; 
}
#hsbox .handset {
	float: left;
	margin: 0px 5px 0px;
	width: 45px;
	height: 83px;
    background-color: white;
}
#hsbox #text {
	float: left;
	width: 80px;
	text-align: left;
}
#hsbox #text a {
	display: block;
	padding-top: 5px;
}
#hsbox #nohandset {
  border: 3px solid #B3ADAA;
  background-color: white;
}

/* ==================================== 
   6.6 Handy Selektor 
   ==================================== */
#manufacturer {
	padding: 5px;
	background-color: #DBD6C1;
}
#manufacturer ul li {
  padding: 5px 10px;
  float: left;
}
#manufacturer a {
	font-size: 8pt;
}
#manufacturer span {
  font-size: 8pt;
  font-weight: bold;
}
#handsets {
	margin-top: 5px;
	padding: 0px 5px 10px;
	height: 100%;
	background-color: #DBD6C1;
}
.handsetbox {
	float: left;
	width: 113px;
	margin: 5px 2px;
}
.handsetbox.selected {
	margin: 3px 0px;
    border: 2px dotted #B3ADAA;
}
.handsetbox .handset {
  float: left;
  width: 50px;
  height: 92px;
  text-align: center;
  border: 3px solid #B3ADAA;
  background-color: white;
}
.handsetbox .text {
	float: left;
	width: 50px;
	padding-top: 20px;
	padding-left: 5px;
}

/* ==================================== 
   6.7 Player Box 
   ==================================== */
#pbox {
	margin-top: 10px;
	width: 140px;	
	text-align: left;
}
#pbox div.content {
	padding: 0px;
	width: 140px;
}
#pbox div.content p,
#pbox div.content h3 {
    padding: 5px;
}
#pbox div.content h3.flash {
	padding: 5px;
	margin-left: 45px;
}
#pbox div.content a {
  padding: 2px;
}
#pbox #player {
  border: 3px solid white;
  margin-left: 1px;
  width: 132px;
  height: 40px;
}
#pbox #player iframe {
	width: 132px;
	height: 40px;
}
#pbox #flashplayer {
  width: 40px;
  height: 40px;
  padding-top: 3px;
  margin-left: 3px;
  float: left;
}

/* ==================================== 
   6.8 SMS Orderbox auf Detail Seite
   ==================================== */
#smsorderbox {
  float: right;
  width: 170px;
  padding: 5px;
  text-align: center;
  background-color:#e6e6e6;
}
#smsorderbox p {
  padding-bottom: 3px;
}



/* ==================================== 
   6.10 Container für Contentbereich
   ==================================== */
div#realbox {
  width: 476px;
}
div#funbox {
	margin-right: 5px;
	float: left;
	width: 237px;
}
div#polybox {
	float: left;
	width: 237px;
}

	
div#impressum div, div#agb div {
	padding-top: 3px;
	margin-top: 3px;
}

div#impressum .titlebar.grey h1{
	font-size: 8pt;
	font-weight: normal;
}

#detailbox .content {
  width: auto;
  background-color: #c5c6c8;
}

#detailbox .description {
  float: left;
  margin-left: 10px;
  padding: 0px 5px 0px;
  }
  .description p {
  margin-bottom: 4px;
  font-size: 8pt;
}

#detailbox .truetone .description {
  width: 210px;
  }
  .truetone img {
  width: 45px;
  height: 45px;
}

#detailbox .picture .description {
  width: 150px;
  }
  .picture img {
  width: 101px;
  height: 80px;
}
#detailbox .application .description ,
#detailbox .theme .description,
#detailbox .video .description,
#detailbox .ringtone .description,
#detailbox .funsound .description {
  width: 250px;
  margin-top: 10px;
}

.highlight {
  font-size: 8pt;
  font-weight: bold;
}

#detailbox img {
  border: 1px solid #B3ADAA;
}

#detailbox fieldset {
  margin-top: 10px;
  padding: 10px;
  }
  fieldset img {
  margin-right: 15px;
  margin-bottom: 10px;
  }
  fieldset p {
  font-size: 8pt;
  }
  fieldset p.copyright {
  font-size: 7pt;
}

#detailbox .video fieldset div {
  float:right;
  width: 170px;
  }
  #detailbox .video div#videoplayer {
  float: left;
  width: 250px;
  }
  #videoringer {
  margin-top: 30px;
  }
  #videoinfo {
  height: 150px;
  padding: 25px 0px;
}

#infobox {
  margin-top: 5px;
  width: 455px;
  padding: 2px;
  border: 1px solid #B3ADAA;
}
#infobox div {
  width: 430px;
}
#infobox img {
  border: none;
  width: 23px;
  height: 31px;
}

#polypage div.lbox {
    float: left;
}
#polypage .left,
#polypage .right {
  width: 238px;
}
#polypage .left {
  margin-right: 1px;
}



/* ======================================= 
   E N D E   D E S   S T Y L E S H E E T S 
   ======================================= */