/* standard elements */
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: #c0c0c0 url('images/gradient.gif') repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 10px;
font-weight: normal;
text-align: left;
text-decoration: none;
}
h1 { font-size: 18px; font-weight: normal; color: #000000; margin: 0px 0 2px 0; padding: 0; border: none }
h2 { font-size: 14px; font-weight: normal; color: #000000; margin: 0px 0 2px 0; padding: 0; border: none }
h3, h4 { font-size: 12px; font-weight: normal; color: #000000; margin: 0px 0 2px 0; padding: 0; border: none }
h5, h6, dt { font-size: 11px; font-weight: normal; color: #000000; margin: 0px 0 2px 0; padding: 0; border: none }
tfoot, thead { font-size: 12px; color: #8b0000 }
a { font-size: 11px; text-decoration: none; text-align: left }
a:link { text-decoration: none; color: #4F82C7 }
a:visited { text-decoration: none; color: #4F82C7 }
a:active { text-decoration: none; color: #4F82C7 }
a:hover { text-decoration: underline; color: #4F82C7 }
a img, img { border: none }
table { border: none; border-collapse: collapse; border-spacing: 0px }
span, div { font-size: 10px; font-weight: normal font-style: normal; text-decoration: none; text-align:left; margin: 0 }
button, .button { font-size: 11px; font-weight: normal; height: 21px }
hr { color: #696969; height: 1px; text-align: left }
.hidden { height: 0px; visibility: hidden }
/* structure */
.inner-container { margin: 0 auto 0 auto; padding: 0; width: 980px }
.outer-container { padding: 10px 0px 0px 0px; margin: 0 }
/* header */
.header { height: 60px; position: relative; }
.header .menu { position: absolute; right: 5px; bottom: 3px }
.header .menu a { font-size: 11px; font-weight: 700; color: #666666 }
.header .menu span { font-size: 11px; font-weight: 700; color: #666666 }
.header .menu #shoppingcart { font-size: 13px; color: Green; }
.header .menu img { vertical-align: middle; padding-right: 3px; }
.header .logo { position: absolute; padding: 0px 0px 0px 0px; margin: 0; bottom: 0px }
/* banner - horizontal menu */
.banner .outer-menu { height: 56px; margin: 0; padding: 0 0 0 13px; background: gray url(images/2L_left.gif) 0 0 no-repeat; clear: right }
.banner .inner-menu { height: 56px; z-index: 0; margin: 0; padding: 0 13px 0 0; background: url(images/2L_right.gif) right 0 no-repeat}
.banner .main-menu { float: left; width: 100%; height: 56px; background: url(images/2L_slice.gif) 0 0 repeat-x }
/* Footer - horizontal menu */
.footer { padding-top: 10px }
.footer a { color: #F7F7F2; margin-left: 5px }
.footer .languages { float: right; color: White; font-weight: bold; font-size: 11px }
.footer .copyright { float: left; width: 100%; color: black; font-weight: normal; font-size: 10px; text-align: center; }
.footer .left-top { height: 28px; margin: 0; padding: 0 0 0 13px; background: url(images/Footer_Left_Top.gif) 0 0 no-repeat; clear: right }
.footer .right-top { height: 28px; z-index: 0; margin: 0; padding: 0 13px 0 0; background: url(images/Footer_Right_Top.gif) right 0 no-repeat}
.footer .main-top { float: left; width: 100%; height: 28px; background: url(images/Footer_Mid_Top.gif) 0 0 repeat-x; float: left; color: white; padding: 0px 0px; text-decoration: none; font-size: 12px; font-weight: normal; font-style: normal }
.footer .left-body { height: 70px; margin: 0; padding: 0 0 0 13px; background: url(images/Footer_Left_Body.gif) 0 0 repeat-y; clear: right }
.footer .right-body { height: 70px; z-index: 0; margin: 0; padding: 0 13px 0 0; background: url(images/Footer_Right_Body.gif) right 0 repeat-y}
.footer .main-body { float: left; width: 100%; height: 70px; background: #EbEbEb }
.footer .left-bottom { height: 28px; margin: 0; padding: 0 0 0 13px; background: url(images/Footer_Left_Bottom.gif) 0 0 no-repeat; clear: right }
.footer .right-bottom { height: 28px; z-index: 0; margin: 0; padding: 0 13px 0 0; background: url(images/Footer_Right_Bottom.gif) right 0 no-repeat}
.footer .main-bottom { float: left; width: 100%; height: 28px; background: url(images/Footer_Mid_Bottom.gif) 0 0 repeat-x }
/* all levels */
ul.topmenu a { float: left; color: white; padding: 7px 7px; text-decoration: none; font-size: 12px; font-weight: bold; font-style: normal }
ul.topmenu a:visited { color: white }
ul.topmenu a:hover { color: white; background: transparent url(images/2L_mouseover_slice.gif) 0 0 repeat-x }
ul.topmenu a img { float: left; padding-right: 5px; margin-top: -1px }
ul.topmenu li.active a { color: #3c3c3c; background: transparent url(images/2L_active_slice.gif) 0 0 repeat-x }
ul.topmenu li.active a:visited { color: #3c3c3c }
/* first level */
ul.topmenu, .topmenu ul { margin: 0; padding: 0; list-style-type: none; height: 28px; width: 100%; position: relative; z-index: 100 }
ul.topmenu li { float: left; display: inline; background: url(images/2L_separator.gif) right 0 no-repeat; padding-right: 1px; }
/* second level */
ul.topmenu ul { width: 100%; display: inline; visibility: hidden; position: absolute; top: 28px; left: 0; text-align: center; background: url(images/2L_slice.gif) 0 -28px repeat-x }
ul.topmenu ul li { position: relative }
ul.topmenu li.hover ul,
ul.topmenu li:hover ul { visibility: visible; z-index: 20 } /* When hovered, make submenus appear */
ul.topmenu li.active ul { visibility: visible; z-index: 10 } /* When active, make submenus appear */
ul.topmenu ul li { background: none; padding-right: 10px }
ul.topmenu ul li span.folder a { background: transparent url(images/nav_list_arrow.gif) right center no-repeat; padding-right: 15px }
ul.topmenu ul li a, ul.topmenu ul li a:visited,
ul.topmenu li.active li a { color: #3c3c3c; padding: 7px 10px; background: none; font-size: 11px; font-weight: normal; font-style: normal }
ul.topmenu ul li.active a { color: #3c3c3c; background: none; font-size: 11px; font-weight: normal; font-style: normal }
ul.topmenu ul li a:hover { color: #3c3c3c; background: none; font-size: 11px; font-weight: bold; font-style: normal }
/* third level */
ul.topmenu ul ul { width: 150px; height: auto; display: none; visibility: visible; position: absolute; top: 28px; left: 5px; background: white; border: solid 1px #8b91a0; padding: 5px }
ul.topmenu ul ul li { width: 100%; height: auto; display: block; background: white; padding: 0 }
ul.topmenu ul li.hover ul,
ul.topmenu ul li:hover ul { display: block; z-index: 20 } /* When hovered, make submenus appear */
ul.topmenu ul ul li a, ul.topmenu ul ul li a:visited, ul.topmenu ul ul li.active a,
ul.topmenu ul ul li.active a:visited { color: #4f82c7; font-weight: normal; font-style: normal }
ul.topmenu ul ul li a:hover,
ul.topmenu ul ul li.active a:hover { color: #3c3c3c; font-weight: normal; font-style: normal }
/* main */
.main { width: 100%; margin-top: 5px; background: url('images/container-slice.gif') repeat-y; z-index }
.main .main-inner { background: url('images/container-top.gif') left top no-repeat; padding: 10px 10px 10px 10px; position: relative; background-size: 90%; }
.main .main-outer { background: url('images/container-bottom.gif') left bottom no-repeat }
/* content */
.main .content { float: right; width: 750px; padding: 0; margin: 0 }
.main .content .cellpadding { float: left; border-collapse: separate; border-spacing: 0px; margin: 0px }
/* navigation */
.navigation { float: left; width: 205px; padding: 0; margin: 0 0 0 0; overflow: hidden }
.loading { padding-top: 30px; background: url('images/loading.gif') no-repeat center top }
/* printing */
a.print { background: white url('images/0075-printer.png') no-repeat center center; width: 32px; height: 32px; font-size: 0 }
a.print:hover { text-decoration: none }
/* specific eshop classes */
.textTitleLeftAlign { font-size: 11px; font-weight: bold; font-style: normal; text-align: left }
.textTitleRightAlign { font-size: 11px; font-weight: bold; font-style: normal; text-align: right }
.textDataLeftAlign { font-size: 11px; font-style: normal; text-align: left }
.textDataRightAlign { font-size: 11px; font-style: normal; text-align: right }
.tableTitleLeftAlign { font-size: 10px; font-weight: bold; font-style: normal; color: black; text-align: left; background: #dadada url(images/OP_heading_slice.gif) 0 -2px repeat-x; vertical-align: middle; white-space: nowrap; height: 15px; padding: 4px; border-bottom: solid 1px #d0d0d0; border-top: solid 1px #d0d0d0 }
.tableTitleCenterAlign { font-size: 10px; font-weight: bold; font-style: normal; color: black; text-align: center; background: #dadada url(images/OP_heading_slice.gif) 0 -2px repeat-x; vertical-align: middle; white-space: nowrap; height: 15px; padding: 4px; border-bottom: solid 1px #d0d0d0; border-top: solid 1px #d0d0d0 }
.tableTitleRightAlign { font-size: 10px; font-weight: bold; font-style: normal; color: black; text-align: right; background: #dadada url(images/OP_heading_slice.gif) 0 -2px repeat-x; vertical-align: middle; white-space: nowrap; height: 15px; padding: 4px; border-bottom: solid 1px #d0d0d0; border-top: solid 1px #d0d0d0 }
.tableDataLeftAlign { font-size: 10px; font-weight: normal; font-style: normal; color: black; text-align: left; border-bottom: dashed 1px #d0d0d0; vertical-align: middle; padding: 1px 5px 1px 5px; height: 20px }
.tableDataCenterAlign { font-size: 10px; font-weight: normal; font-style: normal; color: black; text-align: center; border-bottom: dashed 1px #d0d0d0; vertical-align: middle; padding: 1px 5px 1px 5px; height: 20px }
.tableDataRightAlign { font-size: 10px; font-weight: normal; font-style: normal; color: black; text-align: right; border-bottom: dashed 1px #d0d0d0; vertical-align: middle; padding: 1px 5px 1px 5px; height: 20px }
.article_heading { color: black; font-size: 16px; font-weight: bold; vertical-align: top; text-decoration: none }
a.article_heading:hover{ color: black; font-size: 16px; font-weight: bold; vertical-align: top; text-decoration: none }
.article_ingress { color: black; font-size: 11px; font-weight: normal; text-decoration: none }
a.article_ingress:hover{ color: black; font-size: 11px; font-weight: normal; text-decoration: none }
.article_ingress h2 { color: black; font-size: 12px; font-weight: bold }
.article_ingress img { margin: 0 0 10px 10px; float: right; }
.errorinfo, .errorInfo { color: red; font-size: 12px; font-weight: bold; text-align: left }
.wideTable { width: 100% }
.dataTable { margin: 5px 0 5px 0; border-bottom: solid 1px #d0d0d0; border-right: none; border-left: none }
.simpleTable { margin: 5px 0 5px 0 }
.propertyTable { margin: 5px 0 5px 0 }
/* Box classes */
.boxbackground { margin-bottom: 5px }
.boxheading { font-weight: bold; color: #6d6d6d; font-size: 12px; margin: 0; padding: 6px 6px 4px 6px; background: #dadada url(images/OP_heading_slice.gif) left top repeat-x; }
.boxbody { padding: 4px; border-left: solid 2px #e0e0e0; border-right: solid 2px #e0e0e0; border-bottom: solid 2px #e0e0e0 }
/* Search classes */
.Search_text { width: 100%; font-size: 12px; padding-top: 4px }
.Search_text input[type=button] { width: 17%; vertical-align: top }
.Search_text input[type=text] { width: 83%; vertical-align: top }
/* ZpiderTree */
.zpidertree { color: #000000; white-space: nowrap; width: 100% }
/* ShoppingCart */
.shoppingcart_textarea { overflow: hidden; cursor: pointer }
.shoppingcart_textarea select { width: 100% }
.emptyshoppingcart { position: relative; background: white url('images/largeshoppingcart.jpg') no-repeat center top; width: 100%; height: 150px; margin-top: 120px }
.emptyshoppingcart span { position: absolute; bottom: 0; text-align: center; width: 100% }
/* PurchaseList */
.purchaselist_textbox { overflow: hidden; color: #000000 }
#ctrl_purchaselist .search { padding: 5px 0 5px 0 }
#ctrl_purchaselist table { margin-top: 10px; border-bottom: solid 1px #bebebe } /* includes table.lastorder, table.purchaselist, table.sharedpurchase, table.sharedpurchase */
#ctrl_purchasecart .buttonpanel { margin-top: 10px }
/* InfoList */
.infolist_textbox { background-color: #ffffff; vertical-align: top; overflow: hidden }
.infolist_textbox img { vertical-align: middle }
/* Article_properties */
.title_whitebox { text-align: left; white-space: nowrap; border-bottom: dotted 1px #d0d0d0; padding-top: 4px; padding-bottom: 4px }
.data_whitebox { width: 100%; text-align: right; border-bottom: dotted 1px #d0d0d0; padding-top: 4px; padding-bottom: 4px }
.data_whitebox_bold { text-align: right; font-weight: bold; border-bottom: dotted 1px #d0d0d0; padding-top: 4px; padding-bottom: 4px }
.title_lightbox { background-color:#9CABBA; text-align:left; white-space:nowrap }
.data_lightbox { background-color:#9CABBA; color:#000000; text-align:right }
.data_lightbox_bold { background-color:#9CABBA; color:#000000; text-align:right; font-weight:bold }
/* Show window */
#enewsarea { float: right; width: 20% }
#purchaselistarea { float: right; width: 20% }
#infolistboxarea { float: right; width: 20% }
#showwindowarea { float: left; width:79% }
.productbox { float: left; clear: none; width: 183px; height: 190px; margin: 0 0 4px 0; padding: 4px; border: 1px dashed #d0d0d0; background-color: white }
}
.showelement { float: left; width: 183px; border-style: none; background-color: white }
.showelement p { margin-top: 4px; margin-bottom: 4px }
.showelement_promoprice { font-size: 12px; color: #BB0000; font-weight: bold }
.showelement_title { font-size: 10px; color: black; font-weight: bold; background-color: #FFFFFF }
/* loginprofile */
.login { position: absolute; top: 50%; left: 50%; width: 500px; height: 350px; margin: -175px 0 0 -250px }
.login input { margin-left: 10px }
.login .boxbody { padding: 50px 50px 50px 50px; background-color: white; }
.login .boxbody .boxinputrow { padding-bottom: 10px }
.login .languages { text-align: right; font-weight: normal; font-size: 12px; margin-top: 5px; }
/* article details */
.articledetails .head { border-bottom: solid 1px #cacaca; height: 32px }
.articledetails .head h1 { float: left; line-height: 32px }
.articledetails .head .print { float: right }
.articledetails .body { margin: 10px 0 10px 0 }
.articledetails .body .modulearea { width: 200px; float: right; clear: right; margin-left: 10px }
.articledetails .body .pictures { padding: 0 10px 10px 5px; vertical-align: middle }
.articledetails .body .pictures img { max-width: 260px; min-width: 0px }
.articledetails .body .properties { padding-left: 0px; width: 260px; vertical-align: middle }
.articledetails .body .properties #amount { width: 30px; height: 13px; font-size: 10px }
.articledetails .body .properties .button { width: 120px; height: 20px }
.articledetails .body .propertyline { text-align: left; clear: both; line-height: 20px; vertical-align: middle }
.articledetails .body .propertyline .title{ width: 120px; float: left }
.articledetails .body .priceline { text-align: left; clear: both; line-height: 20px; }
.articledetails .description { width: 520px; padding: 10px 5px 10px 0 }
.articledetails .bigprice { font-size: 18px; color: #BB0000; font-weight: bold }
.articledetails .mediumprice { font-size: 11px; color: #BB0000; font-weight: bold }
/* article addon - boxed */
.articleaddonbox .boxbody { padding: 4; border-bottom: solid 2px #e6e6e6 }
.articleaddonbox .boxitem { padding-top: 4px; padding-bottom: 4px; border-bottom: dotted 1px #d0d0d0; height: 58px }
.articleaddonbox .boxitem img { float:left; max-width: 50px; max-height: 45px; padding-right: 10px }
.articleaddonbox .boxitem #name { text-align: left; height: 40px; overflow: hidden }
.articleaddonbox .boxitem #price,
.articleaddonbox .boxitem #grossprice,
.articleaddonbox .boxitem #customerprice,
.articleaddonbox .boxitem #customergrossprice { float: left; display: inline; font-size: 10px; color: #BB0000; font-weight: bold }
.articleaddonbox .boxitem #currency { float: left; display: inline; padding-left: 3px; font-size: 10px; color: #BB0000; font-weight: bold }
.articleaddonbox .boxitem #addtocartbutton { text-align: right; float: right; font-size: 10px; color: #BB0000; font-weight: bold }
/* main content and navigation */
.content .loginprofile { width: 360px; height: 300px; margin: 40px auto 0 auto }
.content .loginprofile input { margin-left: 10px }
.content .loginprofile .boxbody { text-align: right; padding: 10px 20px 0 20px; background-color: white }
.content .loginprofile .boxbody .boxinputrow { text-align: right; padding-bottom: 10px }
.navigation .loginprofile .boxbody .boxinputrow { padding: 0 0 10px 0 }
.navigation .loginprofile .boxbody hr { display: none }
.systeminfo { text-align: center; height: 80px; padding-top: 50%; margin-top: -0px }
/* document details */
.documentdetails { margin-right: 20px }
.documentdetails .head { border-bottom: dashed 1px #aacada; padding-bottom: 5px; margin-bottom: 10px }
.documentdetails .head h1 { color: #005694 }
.documentdetails .head h2 { color: black; font-size: 12px; font-weight: bold; margin-top: 5px }
.documentdetails .head .print { float: right; clear: both }
.documentdetails .innhold { padding-bottom: 10px }
.documentdetails .innhold .image { float: left; margin: 0 10px 10px 10px }
.documentdetails .innhold .info { text-align: right }
.documentdetails .innhold .info span { color: #787878 }
.documentdetails .innhold .description { padding-top: 10px }
.documentdetails .download { background: #fafafa url('images/download_doc.png') no-repeat 0 0; border-top: dashed 1px #cacaca; height: 100px; margin: 15px 0 15px 0; padding: 20px 0 20px 120px; }
.documentdetails .download div { color: #787878; margin-bottom: 5px }
.documentdetails .download .title { color: black; font-size: 16px; font-weight: bold; margin-bottom: 15px; }
/* document list */
div.documentlist { margin: 0 20px 0 0; clear: both }
.documentlist .search { text-align:left; width: 100%; padding-bottom: 10px; margin: 0 }
.documentlist .item { margin: 5px 0 5px 0; border-top: dashed 1px #aacada; padding-top: 5px }
.documentlist .item .image { width: 90px; height: 80px; float: left; overflow: hidden; margin-right: 20px }
.documentlist .item .image img { height: 80px }
.documentlist .item h1 { color: #005694 }
.documentlist .item h2 { color: black; font-size: 12px; font-weight: normal; margin-top: 5px }
.documentlist .item .info span { color: #787878 }
/* debug and error*/
.debugpanel { width: 490px; height: 100%; margin: 0 auto; padding: 0 }
.debugpanel td { vertical-align: middle }
.debugpanel .boxbackground { margin: 0; padding: 0 }
.debugpanel .boxheading { font-weight: bold; color: #6d6d6d; font-size: 15px; margin: 0; padding: 6px 6px 4px 6px; background: #dadada url(images/OP_heading_slice.gif) left top repeat-x; }
.debugpanel .boxbody { padding: 5px; margin: 0 auto 0 auto; padding-left: 150px; background: white url('images/app_128x128.png') 10px 40px no-repeat; }
.debugpanel h3 { font-weight: bold; font-size: 13px; color: #6a8297; margin: 20px 0; }
.debugpanel ul { list-style: none; margin: 20px 0 10px 0; padding: 0 }
.debugpanel li { margin: 0; padding: 2px 0 }
.debugpanel li a { font-weight: bold; font-size: 13px; color: #b80a2d }
.debugpanel .adminLink { text-align: right }
.debugpanel .adminLink li { display: inline; padding-right: 10px }
/* miscelaneous */
.clearer { background: #ffffff; clear: both }
.left { float: left }
.right { float: right }
.leftalign { text-align: left }
.rightalign { text-align: right }
.flowbutton { color: Green; font-size: 14px; font-weight: bold; height: 25px }
.Input_amount { text-align: right }
.Input_text { text-align: left }
.pagination { text-align: center; width: 100%; margin-top: 10px; }
#articlediscountbox .boxbody { background-color: white }
/* Images */
.small_img { max-width: 250px;}
.large_img { max-width: 600px;}
/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */
/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
min-width: 75px;
width: 10%;
height: 100%;
/* There is a big background image and it's used to solve some problems I experienced
in Internet Explorer 6. */
background-image: url(images/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
left: 0;
/* When positioning the mouse over one of the hot spots, the cursor should change.
I've noticed that this varies from browser to browser though. */
cursor: url(images/cursors/cursor_arrow_left.cur), w-resize;
}
/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
background-image: url(images/arrow_left.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35; /* Standard CSS3 opacity setting */
-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}
/* Invisible right hotspot */
div.scrollingHotSpotRight
{
min-width: 75px;
width: 10%;
height: 100%;
background-image: url(images/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
right: 0;
cursor: url(images/cursors/cursor_arrow_right.cur), e-resize;
}
/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
background-image: url(images/arrow_right.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35;
filter: alpha(opacity = 35);
-moz-opacity: 0.35;
zoom: 1;
}
/* The scroll wrapper is always the same width and height as the containing element (div).
Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
div.scrollableArea
{
position: relative;
width: auto;
height: 100%;
}
#makeMeScrollable {float: left; clear: none; width: 581px; height: 112px; margin-bottom: 1px; padding: 4px; border: 1px dashed #d0d0d0; background-color: white}
.prodscroll {
float: left;
clear: none;
width: 140px;
height: 112px;
margin: 0px;
text-align: center;
background: #FFF;
position: relative;
}