/**
 * Resets und Globale
 */
HTML {
	height:100%;
}
BODY {
	background:#fff;
	height:100%;
	font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans","Trebuchet MS",Arial,Helvetica,sans-serif;
	font-size:75%;
	line-height:1.4em;
	margin:0;
	padding:0;
}
BODY.greyBackground {
	background:#fff url(../img/layout/html_grey_bg.gif) repeat-y 0 0;
}
DIV,DL,DT,DD,UL,LI,H1,H2,H3,H4,H5,H6,PRE,FORM,FIELDSET,INPUT,TEXTAERA,P,BLOCKQUOTE,TH,TD { 
	margin:0;
	padding:0;
}
TABLE {
	border-collapse:collapse;
	border-spacing:0;
}
FIELDSET,IMG,INPUT,TEXTAREA,ABBR,ACRONYM,BUTTON { 
	border:0;
}
SELECT {
	border:1px solid #cacaca;
}
UL {
	list-style:none;
}
OL {
	margin:0;
	padding:0 0 0 1.5em;
}
H1,H2,H3,H4,H5,H6 {
	font-size:100%;
	font-weight:normal;
}
Q:before,Q:after {
	content:'';
}
INPUT,TEXTAREA,BUTTON,SELECT {
	font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans","Trebuchet MS",Arial,Helvetica,sans-serif;
	font-size:1em;
}
A {
	outline:0;
	color:#686868;
	text-decoration:none;
}
A:hover {
	color:#000;
}
STRONG,B {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
}
.clearfix:after,
.marginalItem:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clr {
	clear:both;
}
.floatLeft {
	float:left;
}
.floatRight {
	float:right;
}
.clearBoth {
	clear:both;
}
.noMargin {
	margin:0;
}
.noBorder {
	border:0;
}
.marginTop {
	margin-top:0.5em;
}
.marginBottom {
	margin-bottom:1.5em;
}
.alignLeft {
	text-align:left;
}
.alignRight {
	text-align:right;
}
.linie {
	font-size:1px;
	line-height:1px;
	border-bottom:1px solid #ccc;
	padding-top:10em;
	margin-bottom:5em;
}
.smalltext {
	font-size:0.85em;
}
.date {
	font-size:0.85em;
	color:#686868;
}
.red, A.red {
	color:#ac0000;
}
.grey, A.grey {
	color:#686868;
}
.greyBackground {
	background-color:#f3f3f3;
}
.whiteBackground {
	background-color:#ffffff;
}
.imgBorderWhite {
	border:1px solid #fff;
}
.imgBorder {
	border:1px solid #cacaca;
}
.hidden {
	display:none;
}
.visible {
	display:block;
}
INPUT.iText {
	padding:3px 0 2px 0;
	background:#FFFFFF url(/_inc/img/layout/pt_line.gif) repeat-x scroll left bottom;
}
INPUT.iText:focus,
TEXTAREA.iText:focus,
SELECT.iText:focus {
	background-color:#f3f3f3;
}
SELECT.iText:focus  {
	border:1px solid #cacaca;
}
TEXTAREA.iText {
	border:1px solid #cacaca;
}
/**
 * JS-Selectoren
 */
.slideShow {}  /* Erzeugt einen Slideshow */
.scrollShow {} /* Erzeugt Scrollenden Content */
.withToolTip {}  /* Hängt einen Tooltip an dieses Element (rev=Id-des-Tooltipps) */
.clearOnFocus {}  /* Leert Value onFocus */
.targetBlank {}   /* Öffnet in neuem Fenster */
.openWin{} /* Öffnet Popup ohne Scrollbars mit Größe aus attribut rel="500x400" */
.removeFromCard {} /* Artikel aus Wako löschen */
.addToCard{} /* Artikel in den Warenkorb legen */
.removeFromNote {} /* Artikel aus Merkzettel löschen */
.addToNote{} /* Artikel in den Merkzettel legen */
.maximizeCover {} /* Öffnet Großansicht eines Covers */
.linkPrint { display:none } /* Print Link im Footer */
.linkRecommend { display:none } /* Empfehlen Link im Footer */
.gotoHref{ display:none } /* Select-Menu Weiterleitung */
.toggleElement { display:none } /* Element ein/ausblenden */
.addHover {} /* Fügt einen Bildhover hinzu. Hoverbild endet mit *_h.* */
.confirmSignedBook {} /* Frägt ob man die signierte Variante bestellen möchte */
/*
 * Buttons -> TODO zusammenfassen dann noch
 */
A.btnGrey,
A.btnWhite,
A.btnGreyWide {
	display:block;
	width:165px;
	height:24px;
	line-height:22px;
	text-align:center;
	color:#000;
}
A.btnGrey {
	background:url(../img/layout/btn_bg_grey.gif) no-repeat top left;
}
A.btnWhite {
	background:url(../img/layout/btn_bg_white.gif) no-repeat top left;
}
A.btnGreyWide {
	width:178px;
	background:url(../img/layout/btn_bg_grey_wide.gif) no-repeat top left;
}
A.btnGrey:hover,
A.btnWhite:hover,
A.btnGreyWide:hover {
	background-position:bottom left;
}
A.btnGreySmall,
A.btnWhiteSmall {
	display:block;
	width:118px;
	height:24px;
	line-height:22px;
	text-align:center;
	color:#000;
}
A.btnGreySmall {
	background:url(../img/layout/btn_bg_grey_small.gif) no-repeat top left;
}
A.btnWhiteSmall {
	background:url(../img/layout/btn_bg_white_small.gif) no-repeat top left;
}
A.btnGreySmall:hover,
A.btnWhiteSmall:hover {
	background-position:bottom left;
}
A.btnGreyCE,
A.btnWhiteCE {
	display:block;
	width:140px;
	height:24px;
	line-height:22px;
	text-align:center;
	color:#000;
}
A.btnGreyCE {
	background:url(../img/layout/btn_bg_grey_ce.gif) no-repeat top left;
}
A.btnWhiteCE {
	background:url(../img/layout/btn_bg_white_ce.gif) no-repeat top left;
}
A.btnGreyCE:hover,
A.btnWhiteCE:hover {
	background-position:bottom left;
}
BUTTON.btnGreyWide {
	display:block;
	width:178px;
	height:24px;
	text-align:center;
	color:#000;
	background:url(../img/layout/btn_bg_grey_wide.gif) no-repeat 0 0px;
}
BUTTON.btnGreyWide:hover {
	background:url(../img/layout/btn_bg_grey_wide.gif) no-repeat 0 -24px;
}
BUTTON.btnWide {
	display:block;
	width:178px;
	height:24px;
	text-align:center;
	color:#000;
	background:url(../img/layout/btn_bg_white_wide.gif) no-repeat 0 0px;
}
BUTTON.btnWide:hover {
	background:url(../img/layout/btn_bg_white_wide.gif) no-repeat 0 -24px;
}
BUTTON SPAN {
	position:relative;
	top:-2px;
}
/**
 * Navigation
 */
DIV#navigation {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	width:210px;
	background:#000 url(/_inc/img/layout/hatje-cantz_logo.gif) no-repeat center bottom;
	color:#999999;
	z-index:10;
	text-align:right;
	line-height:1em;
}
/* wenn zu wenig Platz in der Höhe */
DIV#navigation.fallback {
	position:absolute;
	bottom:auto;
}
DIV#navigation UL {
	position:relative;
	padding:35px 0 0 0; 
	margin:0 30px 70px 0;
	background:#000;
	z-index:1;
}
DIV#navigation A {
	color:#c3c3c3;
}
DIV#navigation A:hover {
	color:#fff;
}
/* Erstes Submenu */
DIV#navigation UL UL {
	margin:0.4em 0 0.6em 0;
	padding:0 8px 0 0;
	border-right:1px dotted #909090;
	display:none;
}
DIV#navigation UL LI.open A {
	color:#fff;
}
DIV#navigation UL LI.open UL A {
	color:#c3c3c3;
}
DIV#navigation UL LI.open UL,
DIV#navigation UL LI.alwaysOpen UL {
	display:block;
}
DIV#navigation UL LI.open A.selected {
	color:#fff;
	font-weight:bold;
}
/* Zweites Submenu */
DIV#navigation UL LI.open UL UL,
DIV#navigation UL LI.alwaysOpen UL UL {
	margin:0.4em 0 0.6em 0;
	padding:0 8px 0 0;
	border-right:1px dotted #909090;
	display:none;
}
DIV#navigation UL LI.open UL LI.open A {
	color:#fff;
	/* font-weight:bold; */
}
DIV#navigation UL LI.open UL LI.open UL A {
	color:#c3c3c3;
	/* font-weight:normal; */
}
DIV#navigation UL LI.open UL LI.open UL A.selected {
	color:#fff;
	font-weight:bold;
}
DIV#navigation UL LI.open LI.open UL {
	display:block;
}
DIV#navigation LI {
	margin-bottom:0.4em;
}
DIV#navigation LI.spaceTop {
	margin-top:1em;
}
DIV#navigation A#logoLink {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:80px;
}
/**
 * Content Container
 */
DIV#content {
	position:relative;
	width:770px;
	min-height:100%;
	padding:0 0 0 210px;
}
DIV#content.greyBackground {
	background-image:url(../img/layout/html_grey_bg.gif)
}
/**
 * BreadCrumb
 */
UL.headCrumb {
	padding:35px 0 0 0;
	background:#fff;
	margin:0 0 0 25px;
	height:1.7em;
	border-bottom:1px solid #cccccc;
}
UL.headCrumb LI {
	float:left;
	height:1.7em;
	border-left:1px solid #cccccc;
}
UL.headCrumb LI A {
	padding:0 0.7em 0 0.6em;
}
UL.headCrumb LI.firstItem {
	border-left:0;
}
UL.headCrumb LI.firstItem A {
	padding:0 0.7em 0 0;
}
UL.headCrumb LI.selected {
	padding:0 0 0 0.7em;
}
UL.headCrumb LI.selected A {
	color:#000;
	padding:0;
}
/**
 * Navi im Header
 */
DIV.headNavi {
	position:absolute;
	padding:35px 0 0 0;
	top:0;
	right:0;
	height:1.7em;
}
DIV.headNavi SELECT {
	position:relative;
	float:right;
	border:0;
	width:190px;
	background:#f3f3f3;
	margin:-3px 0 0 10px;
}
DIV.headNavi SELECT.gotoHref {
	display:none;
}
DIV.headNavi LI {
	float:left;
	height:1.7em;
	border-left:1px solid #cccccc;
	white-space:nowrap;
	margin:0 0 0 0.7em;
}
DIV.headNavi LI A {
	padding:0 0 0 0.6em;
}
DIV.headNavi LI A:hover {
	color:#000;
}
DIV.headNavi LI.firstItem {
	border:0;
}
DIV.headNavi LI.lastItem A {
	padding:0 0 0 0.6em;
}
DIV.headNavi LI.selected A,
DIV.headNavi LI A.selected {
	color:#000;	
}
/**
 * Column Main
 */
DIV.columnMain {
	position:relative;
	left:25px;
	float:left;
	width:525px;
	padding-bottom:70px;
}
/**
 * Column Right
 */
DIV.columnRight {
	position:relative;
	float:right;
	width:190px;
	margin-bottom:45px;
}
/**
 * Footer
 */
DIV#footer {
	position:relative;
	background:#fff;
	width:745px;
	width:525px;
	height:44px;
	margin:-45px 0 0 235px;
	padding:0 0 0 0;
	border-top:1px solid #ccc;
	overflow:hidden;
}
DIV#footer LI {
	float:left;
	padding:0.2em 0.5em 0 0;
}
DIV#footer LI A {
	padding:0 0.5em 0 0;
}
DIV#footer LI.lastItem,
DIV#footer LI.lastItem A {
	padding:0.2em 0 0 0;
}

/**
 * ContentStyles
 */
H1.headCrumb {
	display:block;
	font-size:1em;
	font-weight:normal;
	border-bottom:1px solid #ccc;
	height:1.7em;
}
UL.headNavi {
	position:absolute;
	top:0;
	right:0;
}
UL.headNavi LI {
	float:left;
	height:1.7em;
	border-left:1px solid #cccccc;
}
UL.headNavi LI A {
	padding:0 0.7em 0 0.6em;
}
UL.headNavi LI A:hover {
	color:#000;
}
UL.headNavi LI.firstItem {
	border:0;
}
UL.headNavi LI.lastItem A {
	padding:0 0 0 0.6em;
}
UL.headNavi LI.selected A,
UL.headNavi LI A.selected {
	color:#000;	
}
/**
 * Searchbox
 */
DIV#searchBox {
	margin:20px 0 0 0;
	padding:6px;
	background:#f3f3f3;
	border-bottom:1px solid #fff;
}
DIV#searchBox INPUT {
	width:174px;
	padding:2px 2px;
	margin:0 0 3px 0;
	color:#686868
}
/**
 * Merkzettel
 */
DIV#noteCart {
	padding:3px 6px;
	background:#f3f3f3;
	border-bottom:1px solid #fff;
}
DIV#noteCart DIV.wrapper { }
DIV#noteCart UL.items {
	padding:0 0 3px 0;
	margin:3px 0 0 0;
	line-height:1.2em;
}
DIV#noteCart UL.items LI {
	position:relative;
	padding:2px 0 3px 0;
}
DIV#noteCart UL.items LI A {
	display:block;
	width:165px;
}
DIV#shoppingCart A.removeFromCart {
	display:block;
	width:9px;
	height:13px;
}
DIV#noteCart IMG.trashcan {
	position:absolute;
	top:2px;
	right:0;
	width:9px;
	height:13px;
}
/**
 * Shopping Card
 */
DIV#shoppingCart {
	padding:3px 6px;
	background:#f3f3f3;
	border-bottom:1px solid #fff;
}
DIV#shoppingCart DIV.wrapper { } 
DIV#shoppingCart UL.items {
	padding:0 0 3px 0;
	margin:3px 0 0 0;
	line-height:1.2em;
}
DIV#shoppingCart UL.items LI {
	position:relative;
	padding:2px 0 3px 0;
}
DIV#shoppingCart UL.items LI A {
	display:block;
	width:165px;
}
DIV#shoppingCart A.btnGreyWide,
DIV#shoppingCart UL.items LI A.btnGreyWide {
	margin:7px 0 0 0;
	width:180px;
}
DIV#shoppingCart UL.items LI A.removeFromCart {
	display:inline;
	width:9px;
	height:13px;
}
DIV#shoppingCart IMG.trashcan {
	position:absolute;
	top:2px;
	right:0;
	width:9px;
	height:13px;
}
/**
 * Marginal Items
 */
DIV.marginalItem {
	margin:1.2em 0 0 0;
	font-size:0.9em;
	line-height:1.4em;
}
DIV.marginalItem STONG,
DIV.marginalItem B {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
DIV.marginalItem H1 {
	position:relative;
	padding:0 0 0.3em 0;
	border-bottom:1px solid #ccc;
}
DIV.marginalItem H1 SPAN {
	position:absolute;
	right:0;
}
DIV.specialOffer H1,
DIV.specialOffer A {
	color:#900000
}
DIV.marginalItem H2 {
	padding:0.5em 0 0 0;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	line-height:1.4em;
}
DIV.marginalItem H2 SPAN {
	font-weight:normal;
	margin-bottom:0.5em;
	font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans","Trebuchet MS",Arial,Helvetica,sans-serif;
}
DIV.marginalItem H2.news IMG,
DIV.marginalItem .withImgRight IMG {
	float:right;
	width:50px;
	margin:4px 0 0 10px;
}
DIV.marginalItem DIV.greyBackground H2 {
	padding:0 0 0 0;
}
DIV.marginalItem P {
	line-height:1.4em;
}
DIV.marginalItem P.interview {
	padding:0.5em 0 0 0;
}
DIV.marginalItem P.interview IMG {
	width:190px;
	margin:5px 0;
}
DIV.marginalItem DIV.grey,
DIV.marginalItem DIV.greyBackground {
	background:#f3f3f3;
	padding:7px;
}
DIV.marginalItem UL.downloadList {
	margin:0;
	padding:0.4em 0 0 0;
}
DIV.marginalItem UL.downloadList LI {
	margin:0 0 0 0;
	padding:0 0 0.4em 1em;
	font-size:0.9em;
	line-height:1.3em;
	background:url(../img/layout/ul_bullet_download.gif) no-repeat left 4px;
}
DIV.marginalItem DIV.bookItem {
	margin:10px 0 20px 0;
}
DIV.marginalItem P.priceInfo {
	font-size:0.9em;
	line-height:1.4em;
	padding:0.5em 0 0 0;
}
DIV.marginalItem DIV.item {
	margin:10px 0 20px 0;
}
/*
 * Content zweispaltig
 */
DIV.contentHeader {
	position:relative;
	clear:both;
	margin:20px 0 0 0;
}
DIV.greyBackground DIV.contentHeader {
	position:relative;
	clear:both;
	margin:20px 20px 0 20px;
}
DIV.contentHeader DIV.headNavi {
	padding:0;
}
DIV.contentHeader H1 {
	padding:0 0 0.3em 0;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	border-bottom:1px solid #cacaca;
}
DIV.contentBody H1.withLine,
DIV.contentImage H1.withLine {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	display:block;
	font-size:1em;
	border-bottom:1px solid #ccc;
	margin-bottom:0.5em;
	padding:0 0 0.3em 0;
}
DIV.contentImage {
	clear:both;
	float:left;
	width:166px;
	margin:20px 0 0 0;
	padding:0 15px 0 0;
}
DIV.greyBackground DIV.contentImage {
	margin:20px 0 20px 20px;
	width:146px;
}
DIV.contentBody {
	float:left;
	width:330px;
	margin:20px 0 20px 0;
}
DIV.greyBackground DIV.contentBody {
	float:left;
	width:310px;
	margin:20px 20px 20px 0;
}
DIV.greyBackground DIV.attentionBorder {
	margin:20px 20px 20px -20px;
	padding-left:10px;
	border-left:10px solid #e8e8e8;
}
DIV.contentImage P,
DIV.contentBody P {
	padding:0 0 0.5em 0;
}
DIV.contentImage H2 {
	font-weight:normal;
}
DIV.contentBody UL {
	padding-bottom:0.5em;
}
DIV.contentBody UL LI:before {
    content: "» ";
}
DIV.contentTeaser {
	margin:20px 0 20px 0;
}
/*
 * Content Formular
 */
DIV.contentForm {
	margin:20px 0 0 0;
}
DIV.contentForm P {
	padding:0 0 0.5em 0;
}
DIV.contentForm LABEL {
	clear:both;
	width:166px;
	padding:0 15px 0.5em 0;
	float:left;
}
DIV.contentForm INPUT.iText {
	float:left;
	width:335px;
}
DIV.contentForm INPUT.smallField {
	width:60px;
	margin-right:8px;
}
DIV.contentForm INPUT.mediumField {
	width:270px;
	margin-right:8px;
}
DIV.contentForm TEXTAREA.iText {
	width:332px;
}
DIV.contentForm .textIndent {
	display:block;
	margin:3px 0 0 180px;
	line-height:1.1em;
}
DIV.contentForm INPUT.iCheck {
	display:block;
	float:left;
	margin:1px 5px 0 0;
}
DIV.contentForm BUTTON {
	margin-top:2em;
}
/* Ausnahmen Prospektbestellung */
DIV.contentForm INPUT.nrField {
	width:60px;
	margin-right:8px;
	float:none;
	text-align:right;
	margin:0;
}
DIV.contentForm SPAN.label {
	display:block;
	width:166px;
	text-align:right;
	float:left;
	margin:0 15px 0 0;
}
DIV.contentForm SPAN.labelText {
	display:block;
	float:left;
	width:335px;
	font-size:0.9em;
	line-height:1.2em;
}
DIV.contentForm P.formerror {
	padding:0 0 2em 0;
}
/*
 * Content Tabelle
 */
TABLE.contentTable {
	border:0;
	margin:20px 0 0 0;
}
TABLE.contentTable TH {
	text-align:left;
	border-bottom:1px solid #cacaca;
	padding:2px 0 0.3em 0;
}
TABLE.contentTable TD {
	vertical-align:top;
	padding:0.3em 0 0.3em 0;
}
TABLE.contentTable TD.firstItem {
	width:170px;
	padding-right:15px;
}
/*
 * Profisuche - Umbauen auf Tabellen los irgendwann.
 */
TABLE.contentTableSearch {
	padding:0;
	margin:20px 0 0 0;
}
TABLE.contentTableSearch TH {
	text-align:left;
	border-bottom:1px solid #cacaca;
	padding:2px 0 0.3em 0;
	font-weight:normal;
}
TABLE.contentTableSearch TD {
	padding:0 0 2px 0;
}
TABLE.contentTableSearch TD.firstItem {
	width:170px;
	padding-right:15px;
}
TABLE.contentTableSearch INPUT[type=checkbox] {
	margin-top:2px;
}
/**
 * ZitatSplash
 */
DIV#zitat {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#fff;
	z-index:5000;
	display:none; /* wird per js block geschaltet */
}
DIV#zitat TABLE {
	border:0;
	width:100%;
	height:100%;
}
DIV#zitat TABLE TH {
	width:270px;
	height:100%;
	background:#000 url(/_inc/img/layout/hatje-cantz_logo.gif) no-repeat center bottom;
	text-align:right;
	line-height:1.3em;
	color:#fff;
}
DIV#zitat TABLE TH H1 {
	font-weight:normal;
	padding:0 2.5em 0 0;
}
DIV#zitat TABLE TD {
	width:auto;
	height:100%;
	background:#fff;
	text-align:left;
	line-height:1em;
	color:#000;
}
DIV#zitat TABLE TD H2 {
	font-weight:normal;
	padding:0 0 0 1em;
	font-size:1.6em;
	line-height:1.2em;
}

/**
 * Twitter Items
 */
DIV.marginalItem DIV#tweets {
	padding:0 0 30px 0;
}
DIV.marginalItem DIV#tweets DIV.item {
	margin:10px 0 0 0;
}
/* Wenn nur ein Eintrag angezeigt wird - Abstände verringern*/
DIV.marginalItem DIV#tweets.HatjeCantz-1 DIV.item {
	margin:5px 0 0 0;
}
DIV.marginalItem DIV#tweets P SPAN {
	font-size:10px;
	color:#686868;
	text-transform:uppercase;
}