/* $Header: /var/cvsroot2svn/libtchibo/src/templates/css/layout.css,v 1.19 2010-06-02 09:25:36 matthiasm Exp $ */
/* layout.css */

/* misc */
*{
	margin: 0;
}

body {
	background: url(img/bg_body.gif) 0 0 repeat-y;
	font-family: Verdana, Arial, Tahoma;
	font-size: 12px;
	line-height: 17px;
	color: #303A63;
	margin: 6px 0 0 7px;
	padding: 0;
}

/* Schriftzuweisung */
label {
	font-size: 12px;
	line-height: 14px;
}

.textSmall {
	font-size: 11px;
	line-height: 14px;
}

.textItalic {
	font-style: italic;
}

/*
INPUT-section
note: all INPUT types have no left/right-margins, add inputSpacer-class for correct spacing to class-defintion
note: each INPUT field should have only one class (execption: inputSpacer can be added)
*/
.stdTextarea,
.textfield,
.inputZip,
.inputStreetNr,
.inputCity,
.inputStreet,
.char2,
.char4,
select,
textarea {
	font-family: Verdana, Arial, Tahoma;
	font-size: 11px;
	line-height: 14px;
	color: #303A63;
}

.inputSpacer {
	margin-right: 4px; /*(jh) 4px makes a spacing of 5px, because the inputs still have a white line around them*/
}

.stdTextarea {
	width: 336px;
	height: 140px;
}

.textfield{
	height: 16px;
	width: 187px;	/* results in 194px width for input */
	padding: 0 0 0 4px;
}

.inputZip{
	height: 16px;
	width: 54px !important;
	padding: 0 0 0 4px;

}

.inputStreetNr {
	height: 16px;
	width: 36px;
	padding: 0 0 0 4px;
	margin-left: 4px;
}

.inputCity,
.inputStreet{
	height: 16px;
	width: 121px !important;
	padding: 0 0 0 4px;
}

.char2{
	height: 16px;
	width: 21px !important;
	padding: 0 0 0 4px;
}

.char4{
	height: 16px;
	width: 36px !important;
	padding: 0 0 0 4px;
}

.invisible, .invisible img{
	padding: 0 !important;
	margin: 0 !important;
	height: 0 !important;
	line-height: 0 !important;
}

/*for tr's with labels and selectbox in one row*/
.rowSelectbox{
	line-height: 22px !important;
}

/* use this for standard formular table */
.stdFormular td {
	padding-bottom: 11px !important; /* (km) spacing betweens labels = 33px */
	padding-right: 14px !important;
}

td.stdLabel {
	vertical-align:top;
	padding-top: 3px;
}


/*
styles for radio-button-rows
see: magazineorder for example
*/

.radioRow td {
	padding-bottom: 16px !important;
}

.radio {
	padding-top: 0px;
	position: relative;
	top: -1px;
	height: 15px;
	margin-left: -5px;
	margin-right: 0px;
}

.radioTable, .radioTable td {
	padding: 0px !important;	/* (km) remove padding from outer table */
	position: relative;
	top: 1px;
	
}

.radioTable label {
	position: relative;
	top: -1px;
}

/*
styles for newsletter-rows
see: magazineorder/memocreate for example
*/
td.newsletter{
	vertical-align: top !important;
	padding-top: 4px !important;
}

.newsletterCheckbox{
	display: block;
	float: left;
	margin-top: 0px;
	margin-left:-4px;
}

.newsletter_wrapper {
	padding-top: 1px;
}

.newsletter_advice{
	font-size: 11px;
	line-height: 16px;
	float:left;
	width:400px;
	padding-top: 2px;
}

.newsletter_advice_grey{
	font-size: 11px;
	line-height: 16px;
	color: #87868b;
}




/* Forms ohne paddings */
form {
	padding: 0;
}

/* Default Linkfarbe und Dekoration */

a, a:link, a:visited, a:focus, a:active, a:hover {
	text-decoration: underline;
	color: #303A63;
}

img {
	border: 0px;
}

p {
	margin: 0;
}

/* std. Text Laufweite */
.stdTracking {
	width: 540px;
}

/* TabellenZellen ohne padding */
td.nopadding{
	padding: 0 !important;
}


/* --- Header --- */
#header {
	/* Verlauf im Header */
	background: #00204F url(img/bg_header.gif) 0 72px repeat-x;
	position: relative;
	width: 971px;
	height: 83px;
	color: white;
}

/* Tchibo-Logo oben links */
#logo {
   position: absolute;
	top: 10px;
	left: 19px;	
	z-index: 99;
}
#xmaslogo_left {
   position: absolute;
	top: 0px;
	left: 0px;	
	z-index: 99;
}

#xmaslogo_right {
   position: absolute;
	top: 0px;
	left: 185px;	
	z-index: 99;
}
/* ENDE header */

/*
*	Error
*/
.error, a.error, a.error:hover {
	font-size: 11px;
	line-height: 14px;
	color: #cc0000;
}

.errorLarge,
label.error {
	font-size: 12px;
	line-height: 14px;
	color: #cc0000;
}

select.error,
input.error {
	font-size: 11px;
	line-height: 14px;
	border-color: #cc0000;
	color: #303A63;
	border-style: solid;
	border-bottom-width: 1px;
	border-right-width: 1px;
	padding: 0 0 1px 4px;
	height: 16px;
}

/* IE special errror handling: decorate textareas/selectbox with 1px red border */
.errorDeco {
	margin: 0px;
	padding: 0px;
 	border-color: #cc0000;
 	color: #303A63;
	border: 1px solid #cc0000;
	display: table;	/* Firefox needs this, otherwise span has only line-height height*/
}
/* (mm) remove if use anymore please contact me
p.error, .error a{
	color:#cc0000;
	font-weight:bold;
	font-size:11px;
}
*/

#errorBooking,
#errorGlobal,
#errorGlobal a{
	color: #cc0000;
	font-size: 12px;
	line-height: 14px;
	font-weight: bold;
}

#errorBooking,
#errorGlobal {
	padding: 12px 0 15px 21px;
	margin-top: -1px;
	width: 561px; /* 540 content + 21 paddingLeft */
}

#errorBooking div,
#errorGlobal div{
	padding-top: 8px;
}

#errorBooking { /* padding-correction for bookingsteps */
	padding-top: 0 !important;
}

/* metanav rechts oben im Header -  MeinKonto, Bestellschein, Ueber Tchibo  */
#metanav {
	position: absolute;
	left: 370px;			/* Fr?her 482px */
	top: 10px;	
	height: 19px;
}

#metanav a {
	color: #b3bdcb;
	text-decoration: underline;
	display: block;
}

#metanav .icon_arrow
{
	background: #00204F url(img/txtl_arrow_metanav.gif) 16px 6px no-repeat;
	padding: 0 0 0 10px;
	margin: 0 9px 1px 0;
}
/* --- ENDE Header --- */



/* --- master-layout --- */
/* Main Table for Content and Services on the right */
/* Gesamtbreit 971 Pixel, Abstand zum Subheader */
	
#container 
{
/*###############################################################################################*/
	/*position: relative;*/
/*###############################################################################################*/
	width: 971px;
	margin: 0;
}

/* Content-Bereich (u.a. Phasennavigation) 771 Pixel breit */
#container .mainContent
{
	width: 771px;
	vertical-align: top;
	background: #fffeee url( img/bg_left_line.gif ) left top repeat-y;
}



#container .spacer 
{
	width: 11px;
	vertical-align: top;
}

/* rechte Spalte Warenkorb, ABEs */
#container .service 
{
	width: 189px;
	vertical-align: top;
}

/* main content 771px with left grey pixel line */
#content
{
	width: 771px;
	float: left; 
	background: #fffeee url( img/bg_left_line.gif ) repeat-y;
    background-position: left top;
	min-height: 470px;	/* for Mozilla */
	_\height: 470px;	/* for IE */
}

/* 
*	contains global paddings for subsites
*/
.contentBorders
{
	padding-left: 24px;
	padding-right: 24px;
}

/* Main Container Content fuer alle ContentSeiten mit gestrichelter Linie oben und unten */
.TopContainer, .BottomContainer {
	background-repeat: repeat-x;
	background-position: left top;
	padding-top: 3px;
	width: 771px;
	background-color: #FBFBFC;
}

/* gestrichelte Linie unten */
.BottomContainer {
	background-position: left bottom;
	padding-top: 0;
}

/* --- ende master-layout --- */


/* --- button --- */

.link{
/*  FIXME karim silke*/
	padding: 6px 0 6px 21px;
/* 	FIXME karim silke*/
	text-decoration: underline;
	font-size: 11px;
}

a.link {
    display: inline;
}

.link div.secondline 
{
	width: 100px;
	height:13px;
	padding-left:22px;
	text-decoration:underline;
	cursor:pointer;
}

.icon_arrow 
{
	padding-top: 0;
	padding-left: 22px;
	background: transparent url(img/txtl_arrow_abe.gif) 10px 5px no-repeat;
}

/*	special handling of arrow class for li */
li.icon_arrow 
{
	background: transparent url(img/txtl_arrow_abe.gif) 10px 7px no-repeat;
}

.icon_gotop {
	padding-top: 0;
	padding-left: 19px;
	background: transparent url(img/btn_to_top.gif ) 0px 1px no-repeat;
}

.icon_dummy_full {
	background: transparent url(img/icon_dummy_full.gif) left center no-repeat;
}


.icon_change {
	background: transparent url(img/icon_change.gif) left center no-repeat;
}

.icon_save {
	background: transparent url(img/icon_save.gif) left center no-repeat;
}

.icon_delete{
	background: transparent url(img/icon_delete.gif) left center no-repeat;
}

.icon_logout{
	background: transparent url(img/icon_logout.gif) left center no-repeat;
}

.icon_info{
	background: transparent url(img/icon_info.gif) left center no-repeat;
}

.icon_pass{
	background: transparent url(img/icon_email.gif) left center no-repeat;
}

.icon_memo{
	background: transparent url(img/icon_addnote.gif) left center no-repeat;
}

.icon_print{
	background: transparent url(img/icon_print_dblue.gif) left center no-repeat;
}

.icon_print_white{
	background: transparent url(img/icon_print_white.gif) left center no-repeat;
}

.icon_close{
	background: transparent url(img/icon_close_dblue.gif) left center no-repeat;
}

.icon_close_white{
	background: transparent url(img/icon_close_white.gif) left center no-repeat;
}

.icon_close_grey{
	background: transparent url(img/icon_close_lightgreyblue.gif) left center no-repeat;
}

.icon_enlarge{
	background: transparent url(img/icon_enlarge.gif) left center no-repeat;
}

.icon_email{
	background: transparent url(img/icon_email.gif) left center no-repeat;
}

.icon_download{
	background: transparent url(img/icon_download.gif) left center no-repeat;
}

.icon_remind_password{
	background: transparent url(img/icon_remind_password.gif) left center no-repeat;
}

.icon_remind_travel{
	background: transparent url(img/icon_remind_travel.gif) left center no-repeat;
}

.icon_alert{
	background: transparent url(img/icon_alert_grey.gif) left center no-repeat;
}

.icon_adobe{
	background: transparent url(img/icon_adobe.gif) left center no-repeat;
}

.icon_movie{
	background: transparent url(img/icon_movie.gif) left center no-repeat;
}

.icon_tv{/* Flashmovies */
	background: transparent url(img/icon_tv.gif) left 7px no-repeat;
	padding-left: 27px;
}




/* --- end-buttons --- */


/* master-template ABE */
td.service a, td.service a:hover {
	text-decoration: underline;
}


/* --- footer --- */
/* Tabellenzelle footer */
#footer 
{
	width: 771px;
	height: 32px;
}


#footer ul {
  list-style: none;
  padding: 0 0 8px 0;
  margin: 3px 0 0 12px;

}

#footer li
{
  list-style: none;
  display: inline;
}

#footer li .link
{
	margin-left: 0px;
	margin-right: 4px;
}

#footer .icon_arrow
{
	background: transparent url(img/txtl_arrow_abe.gif) 1px 5px no-repeat;
/*	_\height: 1%;*/
	padding-left: 7px;
	margin-left: 10px;
}

/* Link nach oben */
#footer .icon_gotop
{
	padding-right: 65px; /* (km) defines spacing between top and first element*/
						/* (jh) aligned to Tchibo Welten all in all 211px*/
}

#doubleDashedFooter {
	font-size: 1px; 	/* (km) needed to adjust height */
	height: 5px;
	min-height: 5px;
	background: url(img/bg_dashed_double_white.gif) left top repeat-x;
}

.alignDoubleDashFooter{
	vertical-align: bottom !important;
}
/* --- ENDE footer --- */

/* kein Rahmen f?r Buttons */
.noborder {
	border: 0px !important;
}

/* definiert den abstand zum jeweils unteren button */
.buttonspace {
	margin: 0 0 6px 0;
}


img.noblock {
	display: inline !important;
}


/* --- dottedLinies --- */
				
.dashed, ul.teaser, .TopContainer, .BottomContainer
{ 
	background-image: url(img/bg_dashed.gif);
}

/* doppelt gestrichelte Linie  */
.doubledashed, li.filled 
{ 
	background-image: url(img/bg_dashed_double.gif)!important;
}

div.topline {
	background-repeat: repeat-x;
	background-position: left top;	
}

div.bottomline {
	background-repeat: repeat-x;
	background-position: left bottom;	
}

.dotline {
	height: 3px;
	background-position: left top;
	background-repeat: none;	
	background-color:  #FBFBFC !important;
}

/* 
*	723px line for content separation 
*	(needed on several subsites)
*/
.dashedLine723px
{
	background-image: url(img/bg_dashed.gif);
	height: 3px;
	width: 723px;
	margin: 0;
	padding: 0;
	background-position: left top;
	background-repeat: repeat-x;
	overflow: hidden;
	background-color: #fffeee;
}


/* --- end-dottedLinies --- */
	


/*
(km) headings for subsites (image contains top-margin and bottom-margin)
	add background-image: url( img/hl_SUBSITE.gif ); in subsite css
	#heading_typo50_BOB : booking pages ONLY
	#heading_typo50 : pages with intro-text like Reisecheckliste, MagazineOrder
	#heading_typo60 : normal content
*/
#heading_typo50_BOB {
	height: 50px;
	min-height: 50px;
	background-repeat: no-repeat;
}

#heading_typo50 {
	height: 50px;
	min-height: 50px;
	margin: 0 0 0 21px;
	background-repeat: no-repeat;
}

#heading_typo60 {
	height: 59px;
	min-height: 59px;
	margin: 0 0 0 21px;
	background-repeat: no-repeat;
}

#heading_typo50_BOB h1,
#heading_typo50 h1,
#heading_typo60 h1{
	display: none;
}

h1#heading_typo50_BOB,
h1#heading_typo50_std,
h1#heading_typo60_std{
	font-family:Arial,Verdana,Tahoma;
	font-size:16px;
	line-height:17px;
	margin:27px 0px 6px 21px; 
}

h1#heading_typo60_std{
	margin:27px 0px 15px 21px;
}


/* rechte Spalte der PV 
h1 = Produktbezeichnung
h2 = Preis
*/
h1, h2 {
	font-size: 12px;
	line-height: 17px;
    padding: 0;
    margin: 0;
    color: #303A63;
}

/* Hochgestellte Zeichen - Z.B.: PV Mobilfunk */
h2 sup {
	font-size: 9px;
}

/* Kaffee KG-Auszeichnung */
h2 span {
	font-weight: normal;
	font-size: 11px;
	color: #6E7480;
}

/* header selectboxes */
#metanav .traveltype {
	width : 148px;
	font-size : 11px;
	height : 17px;
}

#metanav .travelto {
	width : 147px;
	font-size : 11px;
	height : 17px;
}

#metanav .catalog {
	width : 147px;
	font-size : 11px;
	height : 17px;
}

.navi_dropdown{
	vertical-align: top;
}

/* footer for content */
#contentFooter{
	width:723px;
	padding: 24px 0 43px 24px;
	float:left;
}

#contentFooter p{
	/*width: 383px;*/
	width: 423px;
	padding: 2px 30px 0 21px;
	font-size: 11px;
	line-height: 14px;
	color: #87868b;
	float: left;
}


#contentFooter .buttonFooter{
	width:243px;
	margin:5px 0 0 0;
	float:left;
}

#contentFooter .buttonFooter a{
	margin:0;
}

#contentFooter .buttonFooter p.advice a{
	margin-top: 2px;
	margin-bottom: 2px;
	color: #87868b;
	display: block;
}
	
#contentFooter .buttonFooter input{
	margin:0;
	padding:0;
}

#contentFooter .buttonFooter ul{
	list-style:none;
}

#contentFooter .buttonFooter li{
	margin-bottom:5px;
}

#contentFooter .buttonFooter li.link{
	margin-bottom:4px;
}

#contentFooter .buttonFooter .advice{
	margin-left:0px;
	line-height: 14px;
}

/* (km) for text under link-buttons */
#contentFooter .buttonFooter p.advice{
	width: auto;
	padding: 0;
}

a.passlink{
 	background-image: url( img/icon_contact.gif );
	background-repeat: no-repeat; 	
	background-position: left center;
	padding-left: 20px;
}
/* end footer for content */

.cleanup
{
	clear:both;
	height:0;
	width:0;
	line-height:0;
	font-size:0;
}


/*
*	TCHContentModule
*/

/*
for pages with heading_typo50 (text only pages)
like Reisecheckliste, MagazineOrders
*/
.contentText
{
	font-size: 12px;
	line-height: 17px;
	margin-left: 21px;
	margin-bottom: 14px;
}

/*
for pages with heading_typo50 (text only pages)
*/
.contentTextOnly
{
	font-size: 12px;
	line-height: 17px;
	margin-left: 21px;
	margin-bottom: -2px;
}

.contentModule
{
	margin-top: 0px;
	margin-bottom: 28px;
}


.contentModuleSubheader,
.contentModuleSubheaderInfo,
.contentModuleSubheaderBlock,
.contentModuleSubfooter
{
	padding: 5px 21px 6px 21px;
	background-color: #f5f6fa;
	font-size: 11px;
	font-weight: normal;
}

.contentModuleSubheader,
.contentModuleSubheaderBlockItem
{
	font-weight: bold;
	font-size: 12px;
}

.contentModuleSubheaderInfo
{
	color: #87868b;
	background-color: #ffffff;
	font-size: 11px;
	font-weight: normal;
}

.contentModuleSubfooter
{
	background-color: #fffeee;
	color: #87868b;
}

.contentModuleSubheaderBlock
{
	position: relative;
	background-color: #f5f6fa;
	font-size: 12px;
	font-weight: bold;
	height: 21px;
	padding-bottom: 2px;
}

.contentModuleSubheaderBlockItem
{ 
	position: absolute;
	left: 0;
}


.contentModuleContent
{
	/* (km) 11.07.06: changed from 16 to 15 */
	padding: 15px 21px 17px 21px;
	background-color: #fff;
}

.contentModuleContentItem
{
	float : left;
}

.contentModuleFormularFormForm {
	padding: 18px 0px 6px 21px;
}

.contentModuleFormularTextForm {
	/* (mm) please implement class */
}




/*
*	advice (Hinweistext)
*/

.advice,
.advice a{
	font-size: 11px !important;
	line-height: 14px !important;
	color: #87868b !important;
}



/*
.content_section
look at help or detail-page
override .content_section in separate css 
*/

.content_section {
	padding-left: 0px;
	padding-right: 0px;
}



.content_section ul {
	line-height: 22px;
	list-style:none;
	margin: 5px 0 0 0;
	padding:0;
}

.content_section ol {
	line-height: 22px;
	margin: 5px 0 0 0;
	padding:0;
}

.content_section li {
	padding-left: 14px;
	margin-left: 5px;
	margin-bottom: 5px;
	line-height: 17px;
	background: transparent url(img/bg_list_plus_big.gif) 0px 8px no-repeat;
}

.content_section ol li{
	background-image: none;
	padding:0;
	margin:0;
	margin-bottom: 5px;
	margin-left:23px;
}


/*
	price formatting
*/

.price{
	position: relative;
	float: left;
	/*width: 86px;*/
	width: auto;
}

.price .euro{
	width: 9px;
	float: left;
}

.price .preComma{
	text-align: right;
	/*width: 56px;*/
	float: left;
}

.price .comma{
	width: 4px;
	float: left;
}

.price .postComma{
	width: 17px;
	text-align: left;
	float: left;
}


/*
	promotion teasers
	on pages booked (travels) and receipt (flowers)
*/

#promotion_teaser_block{
	width: 725px;
	float:left;
	padding: 41px 0 25px 29px;
}

#promotion_teaser_block img.promotion_teaser_headline{
	height: 40px;
	width: 719px;
}

#promotion_teaser_block a{
	text-decoration: none;
}

#promotion_teaser_block a img.promotion_teaser{
	width: 235px;
	height: 124px;
	border: 0;
	float: left;
	padding-right: 4px;
	padding-bottom: 24px;
}

#promotion_teaser_block a img.promotion_teaser_double {
	width: 474px;
	height: 124px;
	border: 0;
	float: left;
	padding-bottom: 24px;
}

#promotion_teaser_block a img.promotion_teaser_big{
	width: 713px;
	height: 142px;
	border: 0;
	float: left;
	padding-bottom: 24px;
}

#promotion_teaser_block a img.promotion_teaser_big_thin{
	width: 713px;
	height: 124px;
	border: 0;
	float: left;
	padding-bottom: 24px;
}

#promotion_teaser_block div.promotion_teaser a img{
	width: 139px;
}

.mousePointer{
	cursor: pointer;
}

/*AT: Stock Stiege Tür*/
.stockWidth{
	width: 55px !important;
}


/*
	loading animation (e.g. for ajax-requests)
*/
.loadingCircle
{
	background: transparent url( img/ani_loading.gif ) 0px 0px no-repeat;
	width: 19px;
	height: 19px;
}

.loadingCircle_yellow
{
	background: transparent url( img/ani_loading_yellow.gif ) 0px 0px no-repeat;
	width: 19px;
	height: 19px;
}

#EXAPxl{
	display:none;
}