/* CSS Document */
/** This file contains basic content element formatting used by Eurobaustoff websites as well as the embedded content modules */

/************ MENU LIST ********************/
ul.menu, ul.menu li, ul.tabNavi, ul.tabNavi li {margin:0;padding:0;list-style-type:none}

ul.menu {clear:both;line-height:1.2em;font-size:116.66%}
ul.menu a, ul.menu strong {font-weight:bold;display:block;text-decoration:none;border-bottom:1px solid #c5c5c5;padding:0.5em 0;margin-bottom:0.5em}
ul.menu strong, ul.menu a.active {font-weight:bold}
/*ul.menu li {margin-bottom:0.5em}*/
ul.menu ul {padding:0;font-size:84%;margin:0 0 2em 0;list-style:none}
ul.menu ul a, ul.menu ul strong {border:none;padding:0.15em 0;margin:0;font-weight:normal}
ul.menu ul a.active, ul.menu ul strong {font-weight:bold}
ul.menu ul li {margin-bottom:0}
ul.menu ul ul {margin-left:15px; font-size:100%}

.tabLayout-1 .menu a, .tabLayout-1 .menu strong, .layout-2 .menu a, .layout-2 .menu strong {border-color:#fff}

ul.menuStyle-2 img {margin-bottom:1em;display:block}

.menuCols-2 li, .menuCols-3 li, .menuCols-4 li {float:left;margin-bottom:3em;}
ul.menuCols-1 li.last {margin-bottom:0 !important}
ul.menuCols-2 li {width:48%}
ul.menuCols-3 li {width:31%;margin-right:3.5%}
ul.menuCols-4 li {width:23%;margin-right:2.65%}
.menuCols-2 li.first, .menuCols-3 li.first, .menuCols-4 li.first {clear:both !important}
.menuCols-2 li.last {float:right}
.menuCols-3 li.last, .menuCols-4 li.last {margin-right:-1%}
.menuCols-2 ul li, .menuCols-3 ul li, .menuCols-4 ul li {clear:none;float:none !important;width:auto;margin-bottom:0.3em}

.ltIE8 .menuCols-2, .ltIE8 .menuCols-3, .ltIE8 .menuCols-4 {zoom:1} /* boxmodel fix for ltIE8 which otherwise causes floating issues of menu items */
.ltIE8 .menuCols-2 li, .ltIE8 .menuCols-3 li, .ltIE8 .menuCols-4 li {zoom:1}


/************ Teaser Menu ********************/
.teaserMenu {margin:2em 0 0;padding:0;list-style:none}
.multicolumn .teaserMenu {margin-top:0 !important; /*needed for browsers not supporting :first-child selectors */}
.teaserMenu h3, .teaserMenu h2 {margin:0;line-height:1.1em}
.teaserMenu .thumbnail {margin-bottom:1em;display:block;height:100px;background-color:#efefef;overflow:hidden}
.teaserMenu .preview{display:block;background:#e0e0e0}
.teaserMenu img{display:block;width:100% !important; height:auto !important;}
.teaserMenu li {margin-bottom:4em;}
.teaserMenu p {margin:0.5em 0 0 0}
#teaser .teaserMenu li {margin-bottom:0}

.teaserMenuStyle-2 .thumbnail {float:left;margin:0 15px 10px 0;}
.teaserMenuStyle-2 li {margin-bottom:2em}

/************ Category Menu ********************/
.categoryMenu {margin:2em 0 1em;padding:0;list-style:none}
.categoryMenu h3 a {color:#ad1935}
.categoryMenu a {text-decoration:none}
.categoryMenu a:hover {text-decoration:underline}
.categoryMenu h3, .categoryMenu span {padding-left:40px;display:block;margin:0}
.categoryMenu h3 {margin-bottom:0.3em}
.categoryMenu h3 img {float:left;margin-left:-40px;margin-right:8px}
.categoryMenu li {margin-bottom:3em}
.categoryMenu ul, .categoryMenu ul li {float:none !important;display:inline;width:auto;margin:0;padding:0;clear:none !important}

/************ ICON STRIP ********************/
ul.iconMenu {clear:both;margin:2em 0;float:left;width:100%;font-size:166%;line-height:1.3em;font-weight:bold;list-style:none;padding:0}
ul.iconMenu li {float:left;width:31.5%;margin-right:2%}
ul.iconMenu li.last {margin-right:0}
ul.iconMenu li.first {clear:both}
ul.iconMenu a {float:left;white-space:nowrap;text-decoration:none;color:#00305e;}
ul.iconMenu a:hover {color:#ad1935}
ul.iconMenu img {display:block;margin-bottom:0.5em}

/************ TABNAVI ********************/
ul.tabNavi {float:left;width:100%;margin:1.5em 0 0;font-size:108.33%}
.tabNavi li {display:inline}
.tabNavi a, .tabNavi strong {float:left;padding:0.4em 1em;margin-right:0.5em;text-decoration:none;font-weight:bold;background:#c6c6c6}
.tabNavi .active a, .tabNavi strong, .tabNavi .current a, .tabNavi a.current {background:#ebebeb}

.tabLayout-2 .tabNavi a, .tabLayout-2 .tabNavi strong {position:relative;background:#e1e1e1}
.tabLayout-2 .tabNavi .active a, .tabLayout-2 .tabNavi strong, .tabLayout-2 .tabNavi .current a, .tabLayout-2 .tabNavi a.current {background:#fff;border:1px solid #c5c5c5;margin-top:-2px;bottom:-1px;border-bottom-color:#fff;z-index:2}
.tabLayout-2 .tabNavi a:hover {background-color:#efefef}
.tabLayout-2 .tabNavi {border-bottom:1px solid #c5c5c5;width:98%;padding-left:2%;overflow:visible}

.tabSize-small .tabNavi a, .tabSize-small .tabNavi strong {padding:0.2em 0.3em;margin-right:0.4em}

/************ PAGINATION *****************/
.pager { display:block; margin:2em 0; text-align:right; clear:both; list-style:none}
.pager .navigationLinks, .pager ul {margin:0 0 0 0.5em;padding:0;list-style:none; display:inline}
.pager li {display:inline;list-style:none;padding:0;margin:0 0.1em}
.pager .previous, .pager .next {margin:0}
.pager ul a {text-decoration:none; display:inline-block; padding:0 0.1em}
.pager dfn {cursor:inherit; border-bottom:none; font-style:normal}
#topPager .pager {margin:0;float:right}
#topPager {position:absolute; right:23px; top:0;padding-right:15px}
.fullWidth #topPager {right:15px}
.fullWidth #contentColumn #topPager {right:23px}


/************ CONTENT FORMATTING ********************/
.clearFix, .clearall {display:block;height:1px;line-height:1px;font-size:1px;overflow:hidden;clear:both;margin:-1px 0 0 0 !important}
.opaque {opacity:.92;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=92)"; filter:alpha(opacity=92); }

.tabContent {clear:both;padding:2em 20px;background:#ebebeb}
.tabLayout-2 .tabContent {padding:2em 20px 0 20px;background:#fff}

.caption  {text-align:left;font-size:100%;color:#666666;}
span.caption, span.globalCaption {clear:both;display:block;padding:0.2em;}

.imageNote {cursor:help;float:right;margin-left:0.3em;text-align:center;width:1.2em;line-height:1.2em;color:#000 !important;font-weight:normal !important;font-family:Arial, Helvetica, sans-serif;background-color:#fff;background-color:rgba(255,255,255,0.7);-moz-border-radius:0.6em;-webkit-border-radius:0.6em;border-radius:0.6em}
.ltIE8 .imageNote, .imageNote:hover {background-color:#fff;}
.identNr {font-family:Georgia, "Times New Roman", Times, serif}

.image .imageNotes {float:right;position:relative;z-index:5;margin:-1.5em 0.5em 0 0;}
.menu .imageNotes, .teaserMenu .imageNotes, .thumbnail .imageNotes {font-size:66%;float:right;position:relative;z-index:5;margin:-1.5em 0.5em 0 0.5em}
table .image img {display:block;margin:0 auto}
table .image .caption a {display:inline;display:inline-block}
table.right {text-align:right !important}


/************ VIDEO OVERLAYS ********************/
.playerButton {position:relative;display:-moz-inline-box;display:inline-block;cursor:pointer;text-decoration:none !important}
.ltIE8 .playerButton {display:inline;}

.playerButton .overlay {position:absolute;left:50%;top:50%;z-index:1;margin:-40px 0 0 -40px;width:80px;height:80px;background:transparent url('../images/button-play.png') center bottom no-repeat;/*opacity:0.6*/}
.playerButton:hover .overlay {/*opacity:1*/background-position:center top}
.playerButton.current .overlay, .current .playerButton .overlay {display:none}
.ie6 .playerButton .overlay {background-image: url('../images/button-play-ie6.png');}


/****** MESSAGE BOXES **************************/
.infoMessage {display:block;clear:both;padding:15px;margin:1em 0;border:1px solid #898989}
.infoMessage.layout-error, .infoMessage.layout-attention {/*padding-left:80px;background:#edafa6 url('../images/icon-error.png') 10px 15px no-repeat;*/background:#edafa6;color:#ad1935;border-color:#ad1935}
.infoMessage.layout-warning {background-color:#edafa6;color:#cb1a00;border-color:#edafa6}
.infoMessage h3 {margin-top:0}
.layout-error h3, .layout-warning h3 {color:#cb1a00;font-size:133.33%}


/****** ACCORDEON ******************************/
.accordeon {margin:2em 0}
.accordeon h3 {background-color:#ececec;font-size:1.1em;padding:0.7em 15px;margin:1px 0 0 0 !important;clear:both;position:relative}
.accordeon .first h3 {margin-top:0 !important}
.accordeon .pane {display:block;padding:15px}
.accordeon .pane > *:first-child {margin-top:0}
.accordeon .pane > *:last-child {margin-bottom:0}
.accordeon.jsEnhanced .pane {display:none}
.accordeon.jsEnhanced h3 {cursor:pointer}
.accordeon.jsEnhanced h3 em {display:block;position:absolute;width:15px;height:15px;right:15px;top:0.8em;vertical-align:middle;background:transparent url('../images/arrows.png') 50% -271px no-repeat;}
.accordeon.jsEnhanced h3:hover, .accordeon h3.current {background-color:#ccc;}
.accordeon h3.current em {display:none;background-image:none}


/****** FAQ ************************************/
.faq {margin:1em 0}
.faqJsEnhanced {padding:0 0 0 20px}
.faqJsEnhanced .pane {display:none}
.faq .pane p {margin:0.5em 0 1em 0}
.faqJsEnhanced h3 {margin:1em 0 0 -20px;padding-left:20px;position:relative;cursor:pointer}
.faqJsEnhanced h3 em {background:transparent url('../images/arrows.png') -10px -202px no-repeat;display:block;width:20px;height:20px;position:absolute;left:0;top:0}
.faqJsEnhanced h3.toggle-close em {background-position:-10px -270px}

.ie6 .faqJsEnhanced h3 em {left:-20px}


/****** FRAMES / HIGLIGHTS *********************/
.clearFloat {display:block;clear:both;margin:1em 0}

.highlight, .multicolumn .framed .padding {margin:1em 0; padding:20px; clear:both;overflow:hidden;zoom:1}
.multicolumn .framed .padding {margin:0}
.smallNote {display:block;font-size:0.9em !important;margin:1em 0}
.highlight.smallNote {padding:8px;background-color:#fff}
.highlight.frame-1 {padding:19px;border:1px solid #c5c5c5;background:#fff}
.highlight.layout-1, .multicolumn .framed.layout-1 {background:#ebebeb;color:#333}
.highlight.layout-2, .multicolumn .framed.layout-2 {background:#fff}
.highlight.layout-3, .multicolumn .framed.layout-3 {background:#f7e8ea;}
.highlight.layout-4, .multicolumn .framed.layout-4 {background:#ad1935;color:#fff;}
.centered {float:none !important;margin-left:auto !important;margin-right:auto !important}

.tabLayout-1 .highlight.layout-2, .tabLayout-1 .highlight.layout-1, .tabLayout-1 .framed.layout-2, .tabLayout-1 .framed.layout-1 {background:#fff}
.highlight.framed-1 {border:1px solid #B7B7B7}
.indention {padding:0 20px}
.layout-3 h1, .layout-3 h2, .layout-3 h3, .layout-3 a, .layout-4 h1, .layout-4 h2, .layout-4 h3, .layout-4 a {color:#fff}

.customBackground {background-position:bottom left !important; background-repeat:no-repeat !important}
.layout-error h3, .layout-error h2 {color:#ad1935 !important;}

.highlight > *:first-child, .padding > *:first-child {margin-top:0}
.highlight > *:last-child, .padding > *:last-child {margin-bottom:0}



/************ MULTICOLUMN **********/
.multicolumn {clear:both !important; /*width:100%;float:left;*/ margin:2em 0;overflow:hidden}
.multicolumn .col1, .multicolumn .col2, .multicolumn .col3, .multicolumn .col4, .multicolumn .col5 {float:left; height:100%;margin-left:2.65%;clear:none}
.r50_50 .col2, .r25_75 .col2, .r75_25 .col2, .r33_66 .col2, .r66_33 .col2, .r33_33_33 .col3, .multicolumn .col4, .multicolumn .col5 {float:right;margin-left:0}
.r20_20_20_20_20 .col4 {float:left;margin-left:2.65%}
.r33_33_33 .col2, .r25_25_25_25 .col2, .r25_25_25_25 .col3 {float:left}
.r33_33_33 .col1, .r33_33_33 .col3 {min-width:11em}
.r33_33_33 .col2 {margin-right:-33%}
.multicolumn .col1 {margin-left:0 !important; clear:both}

.r33_33_33 .col2, .r50_25_25 .col2, .r25_50_25 .col2, .r25_25_50 .col2 {margin-left: 3.5%}
.colW75 {width:73%}
.colW66 {width:65.5%}
.colW50 {width:48.5%}
.colW33 {width:31% !important}
.colW25 {width:23.5%}
.colW20 {width:20%;margin:0}

.multicolumn > div > *:first-child {margin-top:0}
.multicolumn > div > *:last-child {margin-bottom:0}

.ie6 .multicolumn {zoom:1}


/************ SCROLLER NAVIGATION **********/
.scrollerNavi {text-align:center;z-index:5}
.scrollerNavi li {float:left;background:transparent url('../images/background-fader.png') right top repeat-y;position:absolute;left:0;top:0;bottom:0;height:100%;width:40px;z-index:55}
.scrollerNavi dfn {display:none}
.scrollerNavi a {border:3px solid #fff;-moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; position:absolute;left:0;top:50%;height:30px;margin-top:-18px;vertical-align:middle;display:block;width:30px;cursor:pointer;text-decoration:none;background:#fff url('../images/arrows-alpha.png') 50% 0 no-repeat;}
.ie6 .scrollerNavi a {background-image: url('../images/arrows-alpha-ie6.png');}
.scrollerNavi .next a {left:auto;right:0;background-position:50% -30px}
.scrollerNavi a:hover {background-position:50% -60px}
.scrollerNavi .next a:hover {background-position:50% -90px}
.scrollerNavi .next {float:right;right:0;left:auto;background-position:left top;text-align:right}
.scrollerNavi .disabled {display:none}


/************ SCROLLER **************/
ul.scrollable, ul.scrollerNavi {list-style:none !important; margin:0;padding:0;overflow:hidden}
ul.imageScroller a img {border:1px solid #B7B7B7}

.scrollable {overflow:hidden;overflow-x:auto;height:auto;position:relative;vertical-align:middle;clear:both !important;}
ul.scrollable li, .scrollable .pane {display:inline;display:-moz-inline-box;display:inline-block;position:relative;vertical-align:baseline;margin:0;}
.ltIE8 ul.scrollable li, .ltIE8 .scrollable .pane {display:inline;}

.scrollerContainer {position:relative;background-color:#fff;margin:0 auto;clear:both}
.scrollerCanvas {position:relative;overflow:hidden;}
.scrollerContainer .scrollable {position:absolute;white-space:nowrap;overflow:visible}
.scrollerContainer .scrollable .item, .scrollerContainer .scrollable .pane {white-space:normal}
.scrollerContainer .toggle-open, .scrollerContainer .toggle-close {float:right;text-align:right;font-size:0.9em;position:absolute;right:5px;bottom:3px;z-index:998;text-decoration:none}
.scrollerContainer .toggle-open span {visibility:hidden}
.scrollerContainer .toggle-open:hover span {visibility:visible}


/* ImageStrip */
.imageStripContainer, ul.imageStrip {background-color:#ebebeb}
.imageStripContainer .scrollerNavi li {background-image: url('../images/background-fader-lightgrey.png');}
.imageStripContainer .scrollerNavi a {background-image: url('../images/arrows.png'); border:0; background-color:transparent; height:30px; width:50px; margin-top:-15px }
.imageStripContainer .scrollerNavi .next a {background-position:50% -728px}
.imageStripContainer .scrollerNavi .prev a {background-position:50% -758px}
.imageStripContainer .scrollerNavi .next a:hover {background-position:50% -788px}
.imageStripContainer .scrollerNavi .prev a:hover {background-position:50% -818px}

ul.imageStrip {clear:both;white-space:nowrap;padding:20px 10px;margin:2em auto}
.imageStripContainer .imageStrip {margin:0 11px;padding:20px 0}
.imageStrip li {vertical-align:middle;padding:0 8px;text-align:center}
.imageStrip li img {vertical-align:middle;margin:0}
.imageStrip li a img {opacity:0.8}
.imageStrip li a:hover img {opacity:1; -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear;}
.imageStrip .caption, .imageStrip .title {display:none}
.imageStrip .imageNotes {position:absolute;right:14px;bottom:4px;line-height:1.1em}
.showAll .scrollerCanvas {height:auto !important; overflow:visible}
.showAll ul.imageStrip {overflow:visible;white-space:normal}
.showAll ul.imageStrip li {margin-bottom:18px;float:left}

.ie6 .imageStrip {overflow:auto;width:100%}
.ie6 .imageStripContainer .imageStrip {overflow:none;width:auto}
.ie6 .imageStripContainer ul.scrollerNavi li {background:#ebebeb}
.ie6 .imageStrip {zoom:1}

.highlight .imageStrip, .tabContent .imageStrip {margin:0 auto;}

.accordeon ul.imageStrip {margin-left:-16px;margin-right:-16px}
.accordeon .pane .imageStripContainer {margin-left:-16px}
.accordeon .pane .imageStripContainer ul.imageStrip {margin-left:0}


/************ OVERLAYS **************/
#ebLoader {display:none;text-align:center;position:fixed;top:35%;left:50%;padding:1em;background:#fff url('../images/loading.gif') center center no-repeat;width:16em;margin-left:-9em;height:150px;font-size:1.5em}

#ebOverlayContainer .close, .lightbox .close, #errorMessage .close {position:absolute;width:45px;height:45px;top:-18px;right:-18px;background:transparent url('../images/icon-close.png') center center no-repeat;cursor:pointer;z-index:9999}
#ebOverlayContainer, #popupContainer {display:none;text-align:left;background-color:#fff;padding:40px;width:635px;min-height:300px;max-width:980px;left:auto;right:auto;overflow:visible}
#ebOverlayContainer.loading {background:#fff url('../images/loading.gif') center center no-repeat}

#ebOverlayContainer .functionBar {clear:both;margin-top:2.5em}
#ebOverlayContainer .functionBar .link-print {float:right}
#ebOverlayContainer .functionBar .link-back {margin-right:2em}

#popupContainer {display:block;margin:0 auto}

#errorMessage {position:absolute;display:none;width:400px;text-align:left}

.lightbox {background:#fff;padding:20px;text-align:center;display:none;position:absolute;left:0;min-width:100px;min-height:100px;overflow:visible !important}
.lightbox.loading {background:#fff url('../images/loading.gif') center center no-repeat}
.lightbox.loading img {display:none}
.lightbox .content {position:relative;overflow:visible;top:0;bottom:0;height:100%}
.lightbox a dfn {display:none}
.lightbox a {text-decoration:none;background-image: url('../images/transparent.png')}
.lightbox .prev, .lightbox .next {position:absolute;display:block;width:50%;padding:0 40px;top:0;bottom:0;height:100% !important;left:-80px;text-align:left;cursor:pointer}
.lightbox .next {left:auto;right:-80px}
.lightbox a.disabled {display:none !important}
.lightbox .info {/*position:absolute;bottom:9px;left:10px;right:0;*/margin:0 -20px}
.lightbox .description {padding:10px 20px 0 20px;text-align:left}
.lightbox .itemCount {text-align:left;font-size:0.9em;display:block;padding:5px 20px 20px;color:#757575}
.lightbox .prev strong, .lightbox .next strong {position:absolute;left:5px;top:50%;margin-top:-15px;height:50px;width:50px;line-height:30px;overflow:hidden;color:#666;background:transparent url('../images/arrows.png') 50% 0 no-repeat;text-align:center;font-size:2em;}
.lightbox .next strong {left:auto;right:5px}
.lightbox a:hover strong {background-position:50% -100px !important}
.lightbox .prev strong {float:left;background-position: 50% -50px}
.lightbox a.prev:hover strong {background-position:50% -150px !important}
.lightbox .imageNotes {float:right;margin:0 0 0 2em;list-style:none;padding:0}
.lightbox .imageNotes li {font-family:Arial, Helvetica, sans-serif !important; margin:0; padding:0; text-align:right}

#mediaLightbox {background-color:#000;background-color:rgba(0,0,0,0.7);color:#fff !important;}
.ie6 #mediaLightbox {background:#000 !important}
#mediaLightbox h3 {color:#fff}

.ie6 .lightbox {width:100px;height:100px}
.ie6 .lightbox .content {zoom:1;display:block !important}
.ie6 .lightbox .prev, .ie6 .lightbox .next {position:absolute;top:50%}
.ie6 #ebOverlayContainer .close, .ie6 .lightbox .close, .ie6 #errorMessage .close {background-image: url('../images/icon-close-ie6.png');z-index:999;float:right}
.ie6 #ebOverlayContainer, .ie6 #popupcontainer {height:300px}

/* boxmodel fixes for IE < 8 */
.ltIE8 .scrollContainer, .ltIE8 #lightbox, .ltIE8 #ebOverlayContainer, .ltIE8 #popupContainer, .ltIE8 .tabContent, .ltIE8 .tabNavi, .ltIE8 .scrollable, .ltIE8 #lightbox a, .ltIE8 .accordeon h3, .ltIE8 .pane, .ltIE8 .highlight {zoom:1}



@media print {
	.multicolumn img, .imagewrap {max-width:100% !important;height:auto !important}
	.ltIE8 .multicolumn img, .ie8 .multicolumn img {height:1% !important}
	.multicolumn .col1, .multicolumn .col2, .multicolumn .col3, .multicolumn .col4 {height:auto !important}

	.tabNavi li a {border:1px solid #686868;}
	.tabNavi {border-bottom:2px solid #686868}
	.tabNavi li.current a {border-width:2px;border-bottom-width:0}
	.tabNavi, .scrollerNavi, .scrollerContainer .open, .scrollerContainer .close, .accordeon h3 em {display:none !important}
	.accordeon .pane, .tabContent .pane, .tabContent h2, .faq .pane {display:block !important}
	.accordeon h3 em, .faq h3 em {display:none}
	.faq h3 {padding-left:0}
	.tabContent h2 {margin-top:2em}
	.tabContent {padding:0}

	.jukebox.jsEnhanced .teaser .current, .scrollerContainer .current {position:relative !important}
	.jukebox .teaser {position:relative;z-index:99}
	.scrollerContainer, .highlight.layout-1, .framed.layout-1 {border:1px solid #686868}
}