@charset "utf-8";
/* Company: Euroweb Internet GmbH */

/*==================================================
    => global tags
==================================================*/

* {
	padding:0;
	margin:0;
}
html {
	height:552px;
	margin:0;
	padding:0;
}
body {
	height:100%;
	margin:0;
	padding:0;
}
html {
	background: #414c55 url(../images/html-bg.gif) repeat-x center 0;
}
body {
	color: #3b3b3b;
	vertical-align:baseline;
	text-align: left;
	background:  url(../images/body-bg.jpg) no-repeat center 0;
	font-family:	Tahoma, Helvetica, Verdana, Arial;
	font-size:  12px;
}
ol, ul, dl {
	list-style:none;
	margin-bottom:15px;
}
body#alurahmensystem div#contentMain ul li ul {
	list-style:none;
	margin-bottom:15px;
	margin-left: 10px;
}
a {
	outline:none;/* disable dotted active-link borders */
	text-decoration: underline;
	color: #005cc2;
}
a:hover, a:focus, a:hover span {
	color:#005cc2;
	text-decoration:underline;
}
p {
	clear:both;
	margin-bottom:10px;
}
img, img a {
	border: none;
	-ms-interpolation-mode: bicubic;
}
hr {
	border: 1px solid transparent;
	margin: 6px 0px 6px 0px;
	clear:both;
}
html>body hr {
	border-top: 1px solid transparent;
	margin: 11px 0px 11px 0px;
}
h2 {
	padding-top: 10px;
	margin-bottom: 10px;
	font-size:16px;
	font-family:"Myriad Pro", Arial;
	color:#05060a;
	font-weight: bold;
	text-transform:uppercase;
}
h3 {
	margin-bottom: 5px;
	font-size:12px;
	color:#3b3b3b;
	font-weight: bold;
	clear:both;
}
h4 {
	padding:10px 0 3px;
	font-size:11px;
	color:#3b3b3b;
	font-weight: bold;
	clear:both;
}
.contentColumnAktuelles h2 {
padding:0 0 20px 0; color:#FFFFFF;}
.contentColumnAktuelles {
	background: url(../images/aktuelles.gif) no-repeat 0 0;
	height: 131px;
	width:192px;
	padding-left:16px;
	padding-right:20px;
	margin-bottom:1px;
	padding-top:5px;
}
.datei {
	clear:both;
	float:left;
	background: url(../images/icon_downloads.gif) no-repeat 0 0;
	height: 26px;
	width:100%;
	padding-left: 25px;
	padding-bottom: 6px;
	color: #ffffff;
}
.bestseller a{	background: url(../images/bestseller.jpg) no-repeat 0 0;
	height: 28px;
	width:192px; display:block; text-indent:-9999px;}
	
	.gesamtkatalog a{	background: url(../images/gesamtkatalog.jpg) no-repeat 0 0;
	height: 28px;
	width:192px; display:block; text-indent:-9999px;}
.dateiLeft {
	clear:both;
	float:left;
	background: url(../images/icon_downloads.gif) no-repeat 0 0;
	height: 26px;
	width:100%;
	font-weight:bold;
	font-size:14px;
	padding-left: 25px;
	padding-bottom: 6px;
	color: #0063b9;
}
.liste {
	float:left;
}
.liste li {
	background: url(../images/list.gif) no-repeat 0 2px;
	line-height:10px;
	padding-left:15px;
	width:auto;
	margin-bottom: 5px;
}
.none {
	background: none !important;
}

#events {	background: #005cc2; position:absolute; left: 0; top:115px;
 }

#eventsContent {color: #ffffff!important; padding:20px; font-weight:bold; font-size:18px; display: none;}



#eventsW {	background:url(../images/aktion.png) 0 0 no-repeat; position:absolute; left: 480px; top:44px; width:179px; height:159px; padding-top: 45px;
 }

#eventsContentW {color: #000000!important;  font-size:13px; height:135px!important; display:block; text-align: center;}







/*==================================================
    => global classes
==================================================*/

.clear {
	clear:left;
	float:none;
}
p.highlight {
	background: url(../images/icon-link-grey.gif) no-repeat 3px center;
	border-bottom: solid 1px #e0e3eb;
	border-top: solid 1px #e0e3eb;
	padding: 2px 0 2px 20px;
	color: #30467a;
}
.floatLeft {
	float:left;
}
.floatRight {
	float: right;
}
.externalLink {
	background: url(../images/icon-external-link.gif) no-repeat right center;
	padding: 0px 20px 0px 0px;
}
.gototop {
	position:fixed;
	right:10px;
	bottom:10px;
	font-size:10px;
	text-decoration:none;
	background:url(../images/icon-top.png) no-repeat left center;
	padding: 0 0 0 15px;
	_display:none;
}
dl.imprintList {
	margin-bottom: 20px;
	float:left;
}
dl.imprintList dt {
	font-weight: bold;
	float:left;
	display:block;
	width: 130px;
}
dl.imprintList dd {
	float:left;
	display:block;
	width: 270px;
	margin-bottom: 5px;
}
/*==================================================
    => container
==================================================*/


div#container {
	position:relative;
	margin: 0 auto;
	width:960px;
}
div#contentContainer {
	width:536px;
	float:left;
}
div#contentMain {
	float:left;
	width:482px;
	margin-top: 93px;
	min-height: 450px;
	height: auto !important;
	height: 450px;
	background: #9ca8ae url(../images/h2-bg.gif) repeat-x 0 0;
	padding-left: 24px;
	padding-right: 30px;
	margin-bottom: 50px;
}
div#contentSidebar {
	float:left;
	width: 196px;
	padding-top: 394px;
}
div#contentColumn {
	float:left;
	width: 228px;
	padding-top: 425px;
	height:200px;
}
/*==================================================
    => footer   
==================================================*/
div#footer {
}
/*==================================================
    => header  
==================================================*/

div#header {
	height: 394px;
	float:left;
	width: 536px;
}
div#anschrift {
	float:left;
	line-height:15px;
	color:#000000;
	width:208px;
	padding-top: 20px;
	padding-left: 20px;
}
/*------------------ =branding  ------------------*/

h1#branding {
	width: 226px;
	height: 87px;
	position:absolute;
	top: 19px;
	right: 86px;
}
h1#branding a {
	text-indent:-9999px;
	width: 226px;
	height: 87px;
	display:block;
}
ul.rahmen li div a.ewcms_edit_link {
	background:#FFFFFF none repeat scroll 0 0;
	border:1px solid #E2E1E1;
	clear:both;
	display:block;
	float:none;
	height:30px;
	line-height:30px;
	margin:3px 0;
	text-decoration:none;
	text-transform:uppercase;
}
ul.rahmen {
	float:left;
	list-style-type:none;
	margin-bottom:10px;
}
ul.rahmen li {
	width:135px;
	/*	height:140px; */
	float:left;
	margin-right: 10px;
	margin-bottom: 10px;
}
ul.rahmen li.last {
	margin-right: 0px;
}
ul.rahmen li a {
	position:relative;
	/*	width:90px;
	height:140px; */
	display:block;
	text-decoration:none;
}
ul.rahmen li a:hover {
	text-decoration:none;
	padding:0 !important;
}
ul.rahmen li a span.bild-rahmen {
	background:url(../images/bild-rahmen.gif) 0 0 no-repeat;
	position:absolute;
	/*	width:90px;
	height:140px; */
	display:block;
	top:0;
	left:0;
	text-indent: -9999px;
	cursor:pointer;
}
.bildgroesse {
/*		width:90px;
	height:140px; */
}
.floatLeftBild {
	float:left;
	width: 190px;
	padding-right:10px;
}
.floatLeftText {
	float:left;
	width: 250px;
}
/*==================================================
    => naviTop 
==================================================*/



ul#naviTop {
	background:url(../images/navi/naviTop-bg.gif) 0 0 no-repeat;
	width:536px;
	height:92px;
	position:absolute;
	top: 394px;
}
ul#naviTop li {
	float:left;
	margin-right: 1px;
	margin-bottom:1px;
}
ul#naviTop li.prospektstaender, ul#naviTop li.klapprahmen, ul#naviTop li.xxl-grossformatdrucke {
	margin-right: 0px;
}
ul#naviTop li a {
	height:30px;
	width:178px;
	text-indent: -9999px;
	display:block;
}
ul#naviTop li.falt-popupdisplays a:hover, body#falt-popupdisplays ul#naviTop li.falt-popupdisplays a {
	background:  url(../images/navi/falt-popupdisplays.gif) no-repeat 0 0;
}
ul#naviTop li.outdoordisplays a:hover, body#outdoordisplays ul#naviTop li.outdoordisplays a {
	background:  url(../images/navi/outdoordisplays.gif) no-repeat 0 0;
}
ul#naviTop li.prospektstaender a:hover, body#prospektstaender ul#naviTop li.prospektstaender a {
	background:  url(../images/navi/prospektstaender.gif) no-repeat 0 0;
}
ul#naviTop li.bannerdisplays a:hover, body#bannerdisplays ul#naviTop li.bannerdisplays a {
	background:  url(../images/navi/bannerdisplays.gif) no-repeat 0 0;
}
ul#naviTop li.alurahmensystem a:hover, body#alurahmensystem ul#naviTop li.alurahmensystem a {
	background:  url(../images/navi/alurahmensystem.gif) no-repeat 0 0;
}
ul#naviTop li.klapprahmen a:hover, body#klapprahmen ul#naviTop li.klapprahmen a {
	background:  url(../images/navi/klapprahmen.gif) no-repeat 0 0;
}
ul#naviTop li.rollupdisplays a:hover, body#rollupdisplays ul#naviTop li.rollupdisplays a {
	background:  url(../images/navi/rollupdisplays.gif) no-repeat 0 0;
}
ul#naviTop li.theken-counter a:hover, body#theken-counter ul#naviTop li.theken-counter a {
	background:  url(../images/navi/theken-counter.gif) no-repeat 0 0;
}
ul#naviTop li.xxl-grossformatdrucke a:hover, body#xxl-grossformatdrucke ul#naviTop li.xxl-grossformatdrucke a {
	background:  url(../images/navi/xxl-grossformatdrucke.gif) no-repeat 0 0;
}
/*==================================================
    => navi 
==================================================*/
ul#navi {

	position:absolute;
	width:196px;
	height:226px;
	padding-left:13px;
	padding-top:17px;
}
ul#navi li {
	width: 176px;
	border-bottom:1px solid #f7fafa;
	padding-top:6px;
}
ul#navi li.impressum,
ul#navi li.druckanforderungen {

	border-bottom:0;

}

ul#navi li.druckanforderungen a {
	margin-bottom:27px;
}
*html ul#navi li.druckanforderungen a {
	margin-bottom:23px;
}
ul#navi li a {
	margin-bottom:9px;
	height:9px;
	display:block;
font-size:12px;
color:#ffffff;
text-transform:uppercase;
text-decoration:none;
padding-left:17px;
	background:  url(../images/navi/navi.png) no-repeat 0 3px;
}
* html ul#navi li a {
	margin-bottom:5px;
}

ul#navi li.kontakt,
ul#navi li.anfahrt {
	border-bottom:1px solid #4d4d4d;
}

ul#navi li.kontakt a,
ul#navi li.anfahrt a,
ul#navi li.impressum a{
color:#4d4d4d;
	background:  url(../images/navi/naviSub.png) no-repeat 0 3px;
}
body#produktion ul#navi li.produktion a,
body#octanorm ul#navi li.octanorm a,
body#werbetechnik ul#navi li.werbetechnik a, 
body#referenzen ul#navi li.referenzen a,
body#links ul#navi li.links a,
body#aktuelles ul#navi li.aktuelles a,
body#druckanforderungen ul#navi li.druckanforderungen a,
body#kontakt ul#navi li.kontakt a,
body#anfahrt ul#navi li.anfahrt a,
body#impressum ul#navi li.impressum a,
body#index ul#navi li.index a, 
ul#navi li a:hover {
color: #0054ca;
text-decoration:none;
	background:  url(../images/navi/navi-aktiv.png) no-repeat 0 3px;
}



/* =headlines */


/* =image */
img {
	border: 0;
}
/* =imprint */

dl.imprintTypeOfBusiness, dl.imprintAddress {
	line-height: 20px;
	margin: 15px 0;
}
dl.imprintTypeOfBusiness dt, dl.imprintAddress dt {
	display: block;
	width: 120px;
	color: #909090;
	float:left;
}
dl.imprintTypeOfBusiness dd, dl.imprintAddress dd {
	clear:right;
}
#btnImprint, #newField {
	display:none;
}
/*==================================================
    => clearfix   
==================================================*/

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block; /* for IE/Mac */
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;/*zoom: 1; *//* triggers hasLayout */
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */




/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main Accordion container. For our default style,
 * we draw borders on the left, right, and bottom. The top border of the Accordion
 * will be rendered by the first AccordionPanelTab which never moves.
 *
 * If you want to constrain the width of the Accordion widget, set a width on
 * the Accordion container. By default, our accordion expands horizontally to fill
 * up available space.
 *
 * The name of the class ("Accordion") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * Accordion container.
 */
.Accordion {
	/*border-left: solid 1px gray;
	border-right: solid 1px black;
	border-bottom: solid 1px gray;*/
	overflow: hidden;
}
/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("AccordionPanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel container.
*/
.AccordionPanel {
	margin: 0px;
	padding: 0px;
}
/* This is the selector for the AccordionPanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open a specific panel.
 *
 * The name of the class ("AccordionPanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel tab container.
 */
.AccordionPanelTab {
	background: #000000;
	float: right;
	color: #ffffff;
	width: 100%;
	line-height: 15px;
	/*border-top: solid 1px black;
	border-bottom: solid 1px gray;*/
	/*padding: 4px 0 0 20px;*/
	padding: 4px 0 0 0px;
	font-weight: bold;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
	text-indent: 0;
	font-size: 12px;
}
/* This is the selector for a Panel's Content area. It's important to note that
 * you should never put any padding on the panel's content area if you plan to
 * use the Accordions panel animations. Placing a non-zero padding on the content
 * area can cause the accordion to abruptly grow in height while the panels animate.
 *
 * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
 * Content container.
 *
 * The name of the class ("AccordionPanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel content container.
 */
.AccordionPanelContent {
	overflow: hidden;
	margin: 0px;
	padding: 0;
	clear: both;
	padding-top:5px;
}
/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "AccordionPanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the Accordion.
 */
.AccordionPanelOpen .AccordionPanelTab {
	background: #ffffff;
	color: #000000;
}
/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.AccordionPanelTabHover {
	color: #000000;
}
.AccordionPanelOpen h3.Spry-h3-text {
	background-color: transparent;
	color: #000000;
	width: 214px;
	line-height: 15px;
	float: left;
	padding-left: 5px;
	cursor: pointer;
	text-indent: 0;
	font-size: 12px;
	font-weight: bold;
}
.AccordionPanelOpen .Spry-h3-text {
	color: #000000 !important;
}
.AccordionPanelClosed .Spry-h3-text {
	color: #ffffff !important;
	padding-left: 5px;
}
.AccordionPanelOpen .AccordionPanelTabHover {
	color: #000000;
}
/* This is an example of how to change the appearance of all the panel tabs when the
 * Accordion has focus. The "AccordionFocused" class is programatically added and removed
 * whenever the Accordion gains or loses keyboard focus.
 */
.AccordionFocused .AccordionPanelTab {
	/*background-color: #cad8e2;*/
	background-color: #669933;
}
/* This is an example of how to change the appearance of the panel tab that is
 * currently open when the Accordion has focus.
 */
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
	/*background-color: #cad8e2;*/
	background-color: #669933;
}
div#contentContainer div.SprytextContainer {
	background: url(../images/layout/text-bg.png) 0 0 repeat;
	padding: 25px;
	margin-bottom: 30px;
	width: 538px;
}
div#contentContainer div.textContainer {
	padding-bottom: 30px;
}
/*div#contentContainer h3.Spry-h3-text {
	background-color: transparent;
	color: #000000;
	width: 214px;
	line-height: 15px;
	float: left;
	padding-left: 5px;

	cursor: pointer;
	text-indent: 0;
	font-size: 12px;
	font-weight: bold;

}*/

#ewcms_edit_controller {
	display: block;
	position: fixed;
	bottom: 5px;
}
div#contentContainer div#contentContainerRefrenzen div.textContainer div.refImage img {
}
div#contentContainer div#contentContainerRefrenzen div.textContainer div.refImage img.ewcms_edit_img {
	width: auto;
	height: auto;
}
.ewcms_loopend {
	display: block;
	position: relative;
	height: 50px;
	background: #fff;
	color: #000;
}


/*==================================================
    => Schnellkontakt- Newsletter  + Kontakt  
==================================================*/
body#newsletter div#schnellnewsletter {
	display:none;
}
 div#schnellnewsletter {
position:absolute;
	width: 185px;
top:730px;
	background: url(../images/newsletter.gif) 0 0 no-repeat;
	height:125px;


}
 div#schnellnewsletter label {
	font:inherit;
	color:#dbe1e2;
	margin:0 0 0 0;
	padding:0;
	display:block;
	float:left;
	padding-left:14px;
}
 div#schnellnewsletter input, div#schnellnewsletter textarea {
	font:inherit;
	color:#dbe1e2;
	padding:3px;
	display:block;
	float:left;
	border:0;
	width:173px;
	margin-bottom: 8px;
		background: none !important;
}
div#schnellnewsletter input, div#schnellnewsletter textarea {
	width:144px;
}
 div#schnellnewsletter legend{
	
	width:144px;
	height:10px;
	text-indent:-9999px;
	padding-bottom: 10px;

}

 div#schnellnewsletter fieldset {
	border:none;
	padding:0 0 0 0;
}
div#schnellnewsletter input#submitColumn {
	width:176px;
	height: 25px;
	float: left;
	background: none !important;
	color:#dbe1e2;
	font-weight:bold;
	text-transform:uppercase;
	cursor:pointer;
	border:none;
	text-indent:-9999px;
}
div#schnellnewsletter input#submitColumnK {
	width:178px;
}
div#schnellnewsletter fieldset#submitboxColumn {
	padding:0 0 0 0;
	clear:both;
}
div#schnellnewsletter fieldset#adresseColumn {
	margin:0 0 0 0;
	padding-top:44px;
	padding-left:16px;
}


div#schnellkontakt element.style,
 div#schnellnewsletter  element.style {
	display:inline;
}
div#schnellkontakt label.placeholder,
div#schnellnewsletter  label.placeholder {
}

div#schnellkontakt label.placeholder span,
 div#schnellnewsletter  label.placeholder span {
	color:#dbe1e2;
	padding:3px;
	position:absolute; 	margin-bottom: 8px;
	text-shadow:none;
	padding-left:0px;
}

div#schnellkontakt br, div#schnellnewsletter br {
	clear:left;
}
div#schnellnewsletter element.style {
	display:inline;
}