/**
  * WLM
  * 
  * Defines styles for the various accordions used on wlm
  * 
  * @project         WLM
  * @package         WLM.flipbook
  *                  
  * @copyright       Neue Digitale / Razorfish 
  * @author          martin.krause@neue-digitale.de
  * @license         
  * 
  * @version         1.5
  * @media           screen
  *
  * @todo            test on all
  * @todo            validate
  * 
  * @valid           yes 
  * @tested          yes
  * 
  * @revision        $Revision$
  * @lastmodified    $Date$
  * 
  */




#content .body .introtext {
	margin:0 0 30px 0 !important;
}

/**
  * @section         basic vertical accordion
  *
  * vertical accordion with just one open element
  * 
  * @see             WLM.accordion
  */


.accordion_vertical {
	background: #d9e6ee url(../images/accordion/dl-bg.png) 0 100% no-repeat;
	padding-bottom: 32px;
	width: 915px;
	margin: 0 0 0 -15px;
}


/**
  * Enlage element. IE6 substracts negative margins from element's width
  *
  * @bugfix
  * @see             
  * @affected        IE6
  * @css-for         IE6
  * @valid           yes
  */
* html .accordion_vertical {
	width: 915px !important;
}

.last_element { margin-bottom: 45px; }

.accordion_vertical dt {
	background: #d9e6ee url(../images/accordion/dt-bg.png) 0 0 no-repeat;
	color: #807f84;
	cursor: pointer;
	font-size: 13px;
	line-height: 15px;
	padding: 7px 15px;
}

.accordion_vertical dt.firstChild {
	background: #d9e6ee url(../images/accordion/dt-firstchild-bg.png) 0 0 no-repeat;
}

.accordion_vertical dd {
	background: #d9e6ee url(../images/accordion/dd-bg.png) 0 0 no-repeat;
	display: none;
	overflow: hidden;
	padding: 0 15px 0 15px;
}

/**
  * additional wrapper sets rounded bottom and top / bottom margin, cause we can't use parent's padding due to animations
  *
  * @workaround
  * @affected        all
  * @css-for         all
  * @valid           yes
  */
.accordion_vertical dd div.wrapper {
	background: #fff url(../images/accordion/dd-divwrapper-bg.png) 0 100% no-repeat;
	margin-bottom: 8px; /* colored bottom, color is set by parents background */
	margin-top: 25px; /* pushes content down to show parents background image */
	padding: 0 25px 25px 25px;
}

/* open / active accordion */
dt.active {
	cursor:default;
}
dd.active {
 display: block;
}
 

/**
  * set hasLayout
  *
  * @bugfix
  * @see             
  * @affected        IE6
  * @css-for         IE6
  * @valid           yes
  */
* html .accordion_vertical dd {
	height: 1%;
}


/**
  * @section         accordion "1-2-3"
  *
  * horizontal accordion, type 1-2-3
  */
.flipBook,
.flipBook div {
	margin: 0 !important;
	padding: 0 !important;
}

.flipBook {
	left: 0;
	height: 456px;
	overflow: hidden !important;
	position:relative;
	top: 0;
	z-index:9000;
}

.flipBook div.content {
	/* remove background color due to transparency */
	/*background: #ffffff;*/
	list-style: none;
	height: 456px;
	margin: 0;
	overflow: hidden;
	padding: 0 !important;
	position:absolute;
	width: 695px; 
}

/* use h3 as clickable area */
.flipBook div.content h3 {
	color: #fff;
	cursor:pointer;
	font-size:1px;
	height: 456px; 

	text-indent: -9999em;
	
	width: 67px; 
	float:left; 
}
 
/**
  * @subsection      type: 1-2-3, content styles
*/
.flipBook div.guide { 
	margin-left:20px ! important; 
	margin-top:15px ! important; 
	width: 608px; 
	height:415px; 
	float:left; 
 
}
/*
* html .accordion_vertical h3  { left:8px; }
*+html .accordion_vertical h3  { left:11px; }
*/
/*
.guide img.guid_content_img {float:left; z-index:1; position:relative;}

*/
 
.guide .helperbox { width:300px; float:right; z-index:10; position:relative; top:120px; margin:0; padding:0; }
.guide .helperbox .top { float:right; width:286px; height:25px; background: transparent url(/images/flipbook/textbox_top.png) no-repeat top left; }
.guide .helperbox .text { float:right; width:226px;  background:transparent url(/images/flipbook/textbox_middle.png) repeat-y top left; color:#FFFFFF; padding:5px 30px 5px 30px !important;  }
.guide .helperbox .bottom { float:right; width:286px; height:26px; background:transparent url(/images/flipbook/textbox_bottom.png) no-repeat top left; }

.guide .helperbox .text a { color: #ffffff !important; font-weight: bold; text-decoration: underline; }

* html .guide .helperbox .bottom {
        background: none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/flipbook/textbox_bottom.png',sizingMethod='image');
    }
* html .guide .helperbox .top {
        background: none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/flipbook/textbox_top.png',sizingMethod='image');
    }

.flipBook  div.content .guide {
	background: #ffffff !important; 
}
 
.flipBook  div.content .guidewrapper {
	height: 430px;
}


/**
  * @subsection      state: no element on the left side. default state
*/

/* creates round edges on the left hand side */
.flipBook div.content.mask {
	background: url(../images/accordion/123-ul-mask.png) 0 0 no-repeat !important;
	height: 456px;
	padding: 0 ! important;
	width: 4px;
	z-index: 9000;
}

/* create stacked elements by setting slider positions and z-index */
.flipBook div.content.one {
	left: 0;
	top:0;
	z-index: 1060 ! important;
}

.flipBook div.content.two {
	left: 51px;
	top:0;
	z-index: 1050 ! important;
}

.flipBook div.content.three {
	left: 98px;
	top:0;	
	z-index: 1040 ! important;
}

.flipBook div.content.four {
	left: 145px;
	top:0;	
	z-index: 1030 ! important;
}

.flipBook div.content.five {
	left: 192px;
	top:0;	
	z-index: 1020 ! important;
}



/* set background images on h3 */
.flipBook div.content.one h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) 0 -456px no-repeat !important;
}

.flipBook div.content.two h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -67px -456px no-repeat !important;
}

.flipBook div.content.three h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -134px -456px no-repeat !important;
}


.flipBook div.content.four h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -201px -456px no-repeat !important;
}

.flipBook div.content.five h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -268px -456px no-repeat !important;
	background-color: #d9e6ee ! important;
}	


/**
  * @subsection      state: one slider on the left side
*/
.state-one div.content.mask {
	display: none;
}
 
.state-one div.content.one h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) 0 -912px no-repeat !important;
}

.state-one div.content.two h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -67px -912px no-repeat !important;
}




/**
  * @subsection      state: two sliders on the left side,
  *                  moved both individually.
*/
.state-two div.content.mask {
	display: none;
}

.state-two div.content.one h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) 0 -1368px no-repeat !important;
}

.state-two div.content.two h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -67px -1368px no-repeat !important;
}

.state-two div.content.three h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -134px -1368px no-repeat !important;
}

/**
  * @subsection      state: three sliders on the left side,
  *                  moved all individually.
*/
.state-three div.content.mask {
	display: none;
}

.state-three div.content.one h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) 0 -1824px no-repeat !important;
}

.state-three div.content.two h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -67px -1824px no-repeat !important;
}

.state-three div.content.three h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -134px -1824px no-repeat !important;
}

.state-three div.content.four h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -201px -1824px no-repeat !important;
}


/**
  * @subsection      state: four sliders on the left side,
  *                  moved all individually.
*/
.state-four div.content.mask {
	display: none;
}

.state-four div.content.one h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) 0 -2280px no-repeat !important;
}

.state-four div.content.two h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -67px -2280px no-repeat !important;
}

.state-four div.content.three h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -134px -2280px no-repeat !important;
}

.state-four div.content.four h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -201px -2280px no-repeat !important;
}

.state-four div.content.four h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -201px -2280px no-repeat !important;
}

/**
  * @subsection      state: animation. show animation grafik, 
  *                  override cascade.
*/
.animation .two div.content.mask {
	display: none;
}

body div .animation div.content.one h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) 0 0 no-repeat !important;
}

body div .animation div.content.two h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -67px 0 no-repeat !important;
}

body div .animation div.content.three h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -134px 0 no-repeat !important;
}

body div .animation div.content.four h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -201px 0 no-repeat !important;
}
/*
body div .animation div.content.five h3 {
	background: url(../images/accordion/sprite-flipbook-h3-bg.png) -268px 0 no-repeat !important; 
}
*/

/**
  * IE can't handle png transparency. Using gif instead
  *
  * @workaround
  * @affected        IE6
  * @css-for         IE6
  * @valid           yes
  */
* html body div#wrapper div#content div.body dl.accordion_vertical dd.active div.flipBook div.content h3 {
	background-image:url(../images/accordion/123.gif) !important;
}
 
.onerow {
	background:#D9E6EE url(../images/accordion/dl-bg-bottom.png) no-repeat scroll 0 100%;
}