/**
  * WLM
  * 
  * Defines styles for the various accordions used on wlm
  * 
  * @project         WLM
  * @package         WLM.Accordion
  *                  
  * @copyright       Neue Digitale / Razorfish 
  * @author          martin.krause@neue-digitale.de
  * @license         
  * 
  * @version         0.95
  * @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
  */
.one-two-three,
.one-two-three div {
	margin: 0 !important;
	padding: 0 !important;
}

.one-two-three {
	left: 0;
	height: 456px;
	overflow: hidden !important;
	position:relative;
	top:0;
	z-index:9;
}

.one-two-three 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: 788px; 
}

/* use h3 as clickable area */
.one-two-three div.content h3 {
	color: #fff;
	font-size:1px;
	height: 456px; 
	left: 721px; 
	text-indent: -9999em;
	position: relative; 
	width: 67px; 
	cursor:pointer;
}

/**
  * @subsection      type: 1-2-3, content styles
*/
.guide { position:relative; left:20px; top:15px; width:710px; height:430px; float:left; }
* html .accordion_vertical h3.tab { left:8px; }
*+html .accordion_vertical h3.tab { 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/1-2-3_guides/blue_textbox_top.png) no-repeat top left; }
.guide .helperbox .text { float:right; width:226px;  background:transparent url(/images/1-2-3_guides/blue_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/1-2-3_guides/blue_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/1-2-3_guides/blue_textbox_bottom.png',sizingMethod='image');
    }
* html .guide .helperbox .top {
        background: none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/1-2-3_guides/blue_textbox_top.png',sizingMethod='image');
    }

.one-two-three  div.content .guide {
	background: #ffffff !important; 
}


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

/* creates round edges on the left hand side */
.one-two-three 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: 5;
}

/* create stacked elements by setting slider positions and z-index */
.one-two-three div.content.one {
	left: -0;
	z-index: 4;
}

.one-two-three div.content.two {
	left: 51px;
	z-index: 3;
}

.one-two-three div.content.three {
	left: 98px;
	z-index: 1;
}

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

.one-two-three div.content.two h3 {
	background: url(../images/accordion/123.png) -67px -1368px no-repeat !important;
}

.one-two-three div.content.three h3 {
	background: url(../images/accordion/123.png) -134px -912px no-repeat !important;
}

.one-two-three div.one-two {
	position: relative;
	z-index: 2;
}

/**
  * @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/123.png) 0 -912px no-repeat !important;
}

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

.state-one div.content.three h3{
	background: url(../images/accordion/123.png) -134px -912px no-repeat !important;
}

/**
  * @subsection      state: two sliders on the left side, 
  *                  moved both at the same time => slided the wrapper.
*/
.state-one-two div.content.mask {
	display: none;
}

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

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

.state-one-two div.content.three h3{
	background: url(../images/accordion/123.png) -134px 0 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/123.png) 0 -1368px no-repeat !important;
}

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

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


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

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

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

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

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

/**
  * IE can't handle the absolute positioned 1-2-3 elements during the vertical accordion sliding.
  * So we're going to hide elements  .two. .three, set the background faking their presence
  * and repositioning the .one-two, .one elements using position: static
  *
  * @workaround
  * @affected        IE6, IE7
  * @css-for         IE6, IE7
  * @valid           yes, setting class using js
  */

.fixIe {
	background: #fff url(../images/accordion/123.png) 721px -2280px no-repeat !important;
	position: static!important;
}

.fixIe .one-two {
	position: static !important;
}
.fixIe .one {
	position: static !important;
}

 
/**
  * Fix positons on static content "one"
  *
  * @workaround
  * @affected        IE6
  * @css-for         IE6
  * @valid           yes
  */
* html .fixIe .one .guide {
	margin-top:15px !important;
	position: static !important;
}

/**
  * Fix positons on static content "one"
  *
  * @workaround
  * @affected        IE7
  * @css-for         IE7
  * @valid           yes
  */
* + html .fixIe .one .guide {
	margin-top:15px !important;
	margin-left:20px !important;
	position: static !important;
}


.fixIe .one .guidewrapper {
	position: static !important;
}

.fixIe .one .guidewrapper .helperbox {
	margin-top: 120px !important;
	position: static !important;
}
	
.fixIe .one h3,
.fixIe .two,
/*.fixIe *,*/
.fixIe .three {
	display: none;
}

/**
  * 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.one-two-three 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%;
}

.guide .guidewrapper{
	width:704px;
	height:440px;
	background-color:#fff;
}





/**
  * messenger fuers handy adjustments
  */
div#content div.body dl.accordion_vertical dd div.wrapper h3 { font-size: 12px; }
div#content div.body dl.accordion_vertical dd div.wrapper img.left { margin-right: 30px; }
div#content div.body dl.accordion_vertical dd div.wrapper ul.mobiles { list-style-type: none; margin-top: 20px; }
div#content div.body dl.accordion_vertical dd div.wrapper ul.mobiles li { background: none; float: left; margin: 0 20px 0 0; padding: 0; text-align: center; width: 75px; }