/*######################################################################## * * GENERAL SETTINGS * *########################################################################*/ html,body,p,h1,h2,h3,ul,ol,a,table,td,img,li,/*input,*/select { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; } /* By default our tags should have a text at the left and a white background */ body { text-align: left; background-color: #ffffff; } /* This formatting ensures for the fact that the
s do not have a visible range */ form { display: inline; margin: 0; padding: 0; } /* By default we have a white background for all tags */ table { background-color: #ffffff; } div, textarea { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; } img { border: none; } /* input { padding: 0px 2px; } */ select { border-style: solid; border-width: 1px; border-color: #7f9db9; } hr { border: 0px; /* for Firefox and Opera */ border-top: 2px solid #cbd5e1; border-bottom: transparent; } a,a:link,a:visited { color: #000000; } /*######################################################################## * * LITTLE THINGS * *########################################################################*/ .noMarginAndPadding { padding: 0; margin: 0; } .marginLeft { margin: 0px 0px 0px 5px; } .middle { vertical-align: middle; } .top { vertical-align: top; } .center { text-align: center; } .right { text-align: right; } .rightAndMiddle { text-align: right; vertical-align: middle; } .fullWidth { width: 100%; } .fullWidthAndCenter { width: 100%; text-align: center; } .fullWidthAndMiddle { width: 100%; vertical-align: middle; /* color:#ffffff;*/ } .fullWidthAndPaddingLeft { width: 100%; padding-left: 5px; } .width15PercentAndCenter { width: 15%; text-align: center; } .width20 { width: 20%; } .width200 { width: 200px; } .fullHeight { height: 100%; } .height35px { height: 35px; } /* Little trick for message rows. 1% gives them every time the lowest possible height */ .heightOnePercent { height: 1%; } .textLightBlue { color: #9dafc4; } .textMiddleLightBlue { color: #8697a7; } .cursorLikeLink { cursor: pointer; } #isCalculated { background-color: #e5eaef; padding: 2px; } #error,.error { font-weight: bold; color: #F4B21D; } #highlight,.highlight { font-weight: bold; color: #175484; } .success { font-weight: bold; color: #04B600; } .notUnderlined { text-decoration: none; } .lineAtBottom { border-bottom: 2px solid #cbd5e1; } .noPadding { padding: 0px; } .padding5 { padding: 5px; } .paddingNews { padding: 5px 60px 5px 5px; } .padding5And10 { padding: 5px 10px; } #huge { font-weight: bold; } /*######################################################################## * * BOXES * *########################################################################*/ /* New boxes */ /* Used for windows without frames or little boxes e. g. Singleview, Login */ table.box { border: 2px solid #cbd5e1; vertical-align: top; } /* */ table.boxRight { margin: 1px 0px 0px 1px; border-top: 2px solid #316B94; border-left: 2px solid #316B94; width: 99.7%; height: 99.7%; vertical-align: top; /*background-color:#e7eef0;*/ } /* */ table.boxLeft { margin: 1px 1px 0px 0px; border-top: 2px solid #316B94; border-right: 2px solid #316B94; width: 99.7%; height: 99.7%; vertical-align: top; /*background-color:#e7eef0;*/ } /* */ table.boxRightBottomBorder { margin: 1px 0px 0px 1px; border-top: 2px solid #316B94; border-bottom: 2px solid #316B94; border-left: 2px solid #316B94; width: 99.7%; vertical-align: top; /*background-color:#e7eef0;*/ } /* */ table.boxRightOnlyLeftBorder { margin: 0px 0px 0px 1px; border-left: 2px solid #316B94; width: 99.7%; vertical-align: top; /*background-color:#e7eef0;*/ } /* */ table.boxRightOnlyLeftBorderFullHeight { margin: 0px 0px 0px 1px; border-left: 2px solid #316B94; width: 99.7%; height: 99.5%; vertical-align: top; /*background-color:#e7eef0;*/ } table.boxContentWrapper { background-color: #ffffff; width: 100%; height: 1%; } /* Used for content of right frame */ table.boxNoBorderRight { margin: 1px 0px 0px 1px; border-top: 2px solid #316B94; border-left: 2px solid #316B94; width: 99.7%; height: 99%; vertical-align: top; /*background-color:#e7eef0;*/ } /* Used for content of left frame */ table.boxNoBorderLeft { margin: 1px 0px 0px 1px; border-top: 2px solid #316B94; border-right: 2px solid #316B94; width: 99.7%; height: 99%; vertical-align: top; /* background-color:d3e3ed;*/ } /* Used for ListButtons */ table.boxListButtons { margin: 1px 0px 2px 1px; border-top: 2px solid #316B94; border-bottom: 2px solid #316B94; border-left: 2px solid #316B94; width: 99.7%; vertical-align: top; } /* TODO Refactoring!!!!!! Used for item lists */ table.itemListBox { margin: 0px 0px 0px 1px; /* top right bottom left */ border-left: 2px solid #316B94; /* border-bottom: 2px solid #cbd5e1;*/ background-color: #ffffff; height: 99%; width: 99.5%; } /* DIRTY HACK FOR BASKET LIST - REFACTOR THIS!!!!!!!!! */ table.itemListBoxNoHeight { margin: 0px 0px 0px 1px; /* top right bottom left */ border-left: 2px solid #316B94; border-bottom: 2px solid #316B94; background-color: #ffffff; height: 1%; width: 99.5%; } /* DIRTY HACK FOR BASKET LIST - REFACTOR THIS!!!!!!!!! */ table.itemListBoxNoHeight2 { margin: 0px 0px 0px 1px; /* top right bottom left */ border-top: 2px solid #316B94; border-left: 2px solid #316B94; border-bottom: 2px solid #316B94; background-color: #ffffff; height: 1%; width: 99.5%; } table.basketBox { margin: 0px 0px 0px 1px; /* top right bottom left */ border-top: 2px solid #316B94; /*border-bottom: 2px solid #cbd5e1;*/ border-left: 2px solid #316B94; background-color: #ffffff; height: 99%; width: 99.5%; } table.listOfBasketsBox { margin: 0px 0px 0px 1px; /* top right bottom left */ border-top: 2px solid #316B94; border-right: 2px solid #316B94; /*border-bottom: 2px solid #cbd5e1;*/ background-color: #ffffff; height: 99%; width: 99.5%; } /*######################################################################## * * BIG HEADLINE WITH BACKGROUND PICUTRE * *########################################################################*/ td.bigHeadlineWrapper { padding: 0px; height: 32px; } /* we need a special formatting for the first accordion
-element, because this element need a border at top */ td.bigHeadlineWrapperWithTopLine { padding: 0px; height: 32px; border-top: 2px solid #316B94; } table.bigHeadline { padding: 0px 0px 0px 0px; width: 100%; height: 32px; } table.bigHeadline_a { padding: 0px 5px 0px 5px; background-image: url('../images/bg_title_active.gif'); width: 100%; height: 32px; /* color: #000000;*/ } td.bigHeadlineText, td.accordionText { padding: 0px 0px 0px 5px; /* top right bottom left */ width: 100%; vertical-align: middle; font-weight:bold; color: #FFF; background:#175484; } td.accordionText_a { padding: 0px 0px 0px 5px; /* top right bottom left */ width: 100%; vertical-align: middle; color: #000000; } /*######################################################################## * * LOGIN & TIMEOUT & WRONGBROWSER * *########################################################################*/ /**/ table.loginBackground { width: 100%; height: 541px; background: url('../images/Login_background.jpg') no-repeat; } /**/ div.loginDiv { position: absolute; top: 157px; left: 510px; } /**/ table.inputsWrapper { padding: 5px; width: 384px; } /**/ td.loginLabel { font-weight: bold; color: #7f9db9; vertical-align: top; width: 150px; } /**/ td.loginInput { vertical-align: top; } /**/ img.loginInputs { } select.loginLanguageSelect { width: 199px; height: 17px; } /**/ table.footerBox { width: 100%; height: 43px; background: url('../images/footer_bg.gif') repeat-x; } /**/ td.footerLeft { padding: 10px 10px 5px 10px; /* top right bottom left */ background: url('../images/footer_left.gif') no-repeat; font-size: 17px; color: #a2a9ae; font-weight: bold; vertical-align: top; } /**/ td.footerRight { padding: 10px 10px 5px 10px; /* top right bottom left */ width: 150px; text-align: right; vertical-align: top; background: url('../images/footer_right.gif') repeat-x; } /*######################################################################## * * TOP NAVI * *########################################################################*/ a.tabs,a.tabs:link,a.tabs:visited,a.tabs:active { font-size: 13px; color: #9dafc4; text-decoration: none; font-weight: bold; } a.tabs_a,a.tabs_a:link,a.tabs_a:visited { font-size: 13px; color: #ff9a00; text-decoration: none; font-weight: bold; } table.productBox { width: 100%; height: 43px; background: url('../images/header_bg.gif') repeat-x; } table.topNaviTabs { background-color: #ffffff; } td.productName { padding: 10px 10px 5px 10px; /* top right bottom left */ background: url('../images/header_left.gif') no-repeat; font-size: 17px; color: #a2a9ae; font-weight: bold; vertical-align: top; } span.productVersion { font-size: 9px; color: #a2a9ae; font-weight: normal; } td.logo { padding: 10px 10px 5px 10px; /* top right bottom left */ width: 150px; text-align: right; vertical-align: top; background: url('../images/header_right.gif') repeat-x; } td.topNaviTab { padding: 5px 2px 5px 10px; /* top right bottom left */ color: #9dafc4; font-size: 13px; font-weight: bold; background-color:#ffffff; } td.toolbarWrapper { vertical-align: top; } table.toolbar { background-color:#ffffff; } td.toolbar { padding: 5px 0px 0px 0px; /* top right bottom left */ vertical-align: top; } /* also used in the item list buttons sites */ td.currencyButton { padding: 0px 3px 0px 0px; /* top right bottom left */ height: 22px; text-align: center; } /* also used in the item list buttons sites */ div.currencyButton { background: url(../images/buttons/select_button_inactive.gif) no-repeat; width: 22px; height: 22px; cursor: pointer; padding-top: 4px; } /* also used in the item list buttons sites */ div.currencyButton_a { background: url(../images/buttons/select_button_active.gif) no-repeat; color: #ff9a00; width: 22px; height: 22px; cursor: pointer; padding-top: 4px;; } /*######################################################################## * * START PAGE * *########################################################################*/ td.startNews { margin: 0px 0px 0px 3px; /* top right bottom left */ border: 2px solid #cbd5e1; background-color: #ffffff; height: 100%; width: 25%; vertical-align: top; padding: 0px; } td.startSearch { margin: 0px 0px 0px 3px; /* top right bottom left */ border: 2px solid #cbd5e1; background-color: #ffffff; height: 10%; width: 75%; vertical-align: top; padding: 0px; } td.startIntLinks,td.startInfo { margin: 0px 0px 0px 3px; /* top right bottom left */ border: 2px solid #cbd5e1; background-color: #ffffff; height: 30%; width: 75%; vertical-align: top; padding: 0px; } td.startFav { margin: 0px 0px 0px 3px; /* top right bottom left */ border: 2px solid #cbd5e1; background-color: #ffffff; height: 60%; width: 37.5%; vertical-align:top; padding: 0px; } td.startExtLinks { margin: 0px 0px 0px 3px; /* top right bottom left */ border: 2px solid #cbd5e1; background-color: #ffffff; height: 100%; width: 20%; vertical-align: top; padding: 0px; } table.header { background-color: #ffffff; background: url('../images/bg_title.gif') repeat-x; width: 100%; height: 40px; } td.toolbar_header { padding: 8px 0px 0px 5px; /* top right bottom left */ height: 35px; vertical-align: top; /*color:ffffff;*/ } td.news_date { padding: 8px 0px 0px 5px; /* top right bottom left */ font-weight: bold; color: #9dafc4; /* background-color:#e7eef0;*/ } td.news_headline { padding: 0px 5px 0px 5px; /* top right bottom left */ font-weight: bold; /* background-color:#e7eef0;*/ } td.news_text { padding: 0px 5px 8px 5px; /* top right bottom left */ border-bottom: 1px solid #cbd5e1; /* background-color:#e7eef0;*/ } td.link_headline { padding: 0px 5px 0px 5px; /* top right bottom left */ font-weight: bold; } td.link_text { padding: 0px 5px 8px 5px; /* top right bottom left */ border-bottom: 1px solid #cbd5e1; } td.link_list { padding: 8px 5px 8px 5px; /* top right bottom left */ border-bottom: 1px solid #cbd5e1; width: 100%; vertical-align:top; } td.link_price{ padding:8px 5px 0px 5px; /* top right bottom left */ vertical-align:top; border-bottom: 1px solid #cbd5e1; text-align:center; } td.link_list_icon { padding: 10px 5px 8px 5px; /* top right bottom left */ border-bottom: 1px solid #cbd5e1; vertical-align: top; } td.icon_bar { padding: 3px 5px 5px 0px; /* top right bottom left */ border-bottom: 1px solid #cbd5e1; text-align: right; /*background-color:#e7eef0;*/ } input.search { font-size: 11px; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; width: 250px; padding-left: 2px; margin: 3px 5px 3px 5px; /* top right bottom left */ border-style: solid; border-width: 1px; border-color: #7f9db9; } img.list{ width:50px; } /*######################################################################## * * INFO PAGES * *########################################################################*/ td.title { margin: 0px 0px 0px 0px; /* top right bottom left */ padding-left: 4px; width: 100%; vertical-align: middle; color: #ff9a00; } td.introduction { margin: 0px 0px 0px 0px; /* top right bottom left */ padding: 20px 4px 20px 4px; width: 100%; vertical-align: top; color: #000000; } td.topic { padding: 5px 4px 5px 4px; /* top right bottom left */ vertical-align: top; /*background-color:#e7eef0;*/ } td.topictitle { padding: 5px 4px 5px 4px; /* top right bottom left */ font-weight: bold; color: #316B94; vertical-align: top; /*background-color:#e7eef0;*/ } /*######################################################################## * * TREE (tree itself & tree page elements) * *########################################################################*/ /*### TREE ITSELF ########################################################*/ /* TreeButton: */ /* - Table cell containing the button for node expansion and collapsing */ /* - Don't need a width since it is defined via its content (= button images) */ /* TreeSubItemsIndent: */ /* - */ /* TreeSubItems: */ /* - Table cell below the button cell, left of sub-items */ /* - Don't need a width since the cell above (button) already defined it via its content */ td.TreeButton,td.TreeSubItemsIndent,td.TreeSubItems { padding: 0px 0px 0px 0px; /* top right bottom left */ border-style: none; vertical-align: top; /* background-color:#d3e3ed;*/ } /*
to hold image for expand/collapse button. This must be
rather than since for Mozilla "background-image" doesn't work properly with . */ div.TreeButton { margin: 0; width: 17px; height: 16px; border-style: none; font-size: 1px; /* Necessary due to embedded   */ } /* - Table cell containing icon - Don't need a width since it is defined via img.TreeIcon (16px) plus right padding of 3px */ td.TreeIcon { padding: 0px 2px 0px 0px; border-style: none; vertical-align: top; /* background-color:#d3e3ed; */ } /*
to hold icon image. This must be
rather than since for Mozilla "background-image" doesn't work properly with . */ div.TreeIcon { margin: 0; width: 16px; height: 16px; border-style: none; font-size: 1px; /* Necessary due to embedded   */ } /* Table cell containing optional checkbox and label */ td.TreeLabel { width: 100%; padding: 0px 0px 0px 0px; /* top right bottom left */ border-style: none; vertical-align: top; /* background-color:#d3e3ed;*/ } /* containing the label itself */ span.TreeLabel { cursor: pointer; } /* Selected label */ span.TreeLabelSelected { background-color: #ffffff; color: #ff9a00; } /* for checkbox */ img.TreeCheckBox { margin: 1px 2px 0px 5px; /* top right bottom left */ width: 13px; height: 13px; border-style: none; vertical-align: top; } /* Drop target */ span.TreeLabelDropTarget { background-color: #ff6600; color: #ffffff; line-height: 16px; } /*### TREE PAGE ##########################################################*/ div.treeDivWrapper { position: relative; height: 100%; } div.treeDiv { position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; overflow: auto; } /*######################################################################## * * ITEM LIST (incl. Basket and BasketList) * *########################################################################*/ /*--- button -----------------------------------------------------------*/ td.itemListHeadline { padding-right:3px; padding-left:3px; padding-top:5px; padding-bottom:5px; background-color: #dde4ea; background-color: #B7CFE8; text-align: center; font-weight:bold; vertical-align: top; } td.itemListHeadlineFooter { padding-right:3px; padding-left:3px; padding-top:1px; padding-bottom:1px; vertical-align: top; color:#ffffff; text-align: center; } td.itemListSearchHeadline { padding: 0px; height: 32px; } span.button { margin-top: 1px; background-color: #F7E7AD; border: 1px solid #8F7414; padding: 5px 10px 5px 10px; margin-bottom: 1px; height:18px; } /* IS THIS USED???????? */ a.searchButton { width: 22px; height: 22px; padding-top: 4px; } /*--- list -----------------------------------------------------------*/ table.itemListList { background-color: #ffffff; width: 100%; } td.content { padding: 5px 5px 5px 5px; /* top right bottom left */ border-bottom: 1px solid #B2B2B2; vertical-align: top; } td.contentAlignCenter { padding: 5px 5px 5px 5px; /* top right bottom left */ border-bottom: 1px solid #b4c7d6; vertical-align: top; text-align: center; } td.topseller { padding: 5px 5px 5px 5px; /* top right bottom left */ border-bottom: 1px solid #b4c7d6; vertical-align: top; background-color: #fbf0e6; } td.contentGreyAlignRight { padding: 5px 5px 5px 5px; /* top right bottom left */ border-bottom: 1px solid #b4c7d6; vertical-align: top; background-color:#D2DDE1; text-align: right; } td.contentAlignRight { padding: 5px 5px 5px 5px; /* top right bottom left */ border-bottom: 1px solid #b4c7d6; vertical-align: top; text-align: right; } td.contentWithoutLine { padding: 5px 5px 5px 5px; /* top right bottom left */ vertical-align: top; } td.contentHighlighted { padding: 5px 5px 5px 5px; /* top right bottom left */ border-bottom: 1px solid #b4c7d6; vertical-align: top; background-color: #F2E0AE; } /*######################################################################## * * SINGLE VIEW & COMPARISON LIST * *########################################################################*/ td.contentInContent { padding: 0px 5px 5px 5px; border-bottom: 1px solid #b4c7d6; vertical-align: middle; background-color: #B7CFE8; } .singleViewContent { padding: 2px 5px 2px 5px; /* top right bottom left */ border-bottom: 1px solid #b4c7d6; vertical-align: top; } .singleViewName { padding: 2px 5px 2px 5px; /* top right bottom left */ border-bottom: 1px solid #b4c7d6; vertical-align: top; color: #8697a7; } .compareRow_a { background-color: #F2E0AE; } /*--- NOT SORTED AT THE MOMENT -----------------------------------------------------------*/ input.amount { text-align: right; width: 30px; left: -1px; } #inputButton { width: 90%; top: 2px; left: -1px; } input.header { width: 90%; top: 2px; left: -1px; } .checkbox { border-style: solid; border-width: 1px; border-color: #7f9db9; top: -2px; left: -1px; } a.button,a.button:link,a.button:visited,a.button:active { color: #9dafc4; text-decoration: none; font-weight: bold; } a.button_a,a.button_a:link,a.button_a:visited { color: #ff9a00; text-decoration: none; font-weight: bold; } /*######################################################################## * * JSF Styles * *########################################################################*/ .jsfHeader{ background-color: #B7CFE8; border-top: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1; width: 100%; } .jsfContent { padding-left: 5px; padding-top: 5px; padding-bottom: 5px; } .jsfSelectManyListbox{ width: 270px; border-style: solid; border-width: 1px; border-color: #7f9db9; padding-left: 10px; } .jsfPaddingLeft20px{ padding-left: 20px; vertical-align: top; } .jsfButton { background-color: #F2E0AE; border: 1px solid #7F9DB9; padding: 0px 10px 1px 10px; /* top right bottom left */ } /*######################################################################## * * NEW COLORS FOR THE ADMINISTRATION * *########################################################################*/ div.external_cat_box, div.external_link_box { float:left; margin:5px; } div.external_cat_box table.external_cat_box, div.external_link_box table.external_link_box { width:100%; border:1px solid; } div.external_cat_box table.external_cat_box th.catname { height:29px; padding:0 10px; text-align:left; font-size:11px; font-weight:bold; } div.external_link_box table.external_link_box th.linkname { height:29px; padding:0 10px; text-align:left; font-size:11px; } div.external_cat_box table.external_cat_box th, div.external_link_box table.external_link_box th { height:29px; padding:0 10px; text-align:right; font-size:11px; font-weight:normal; } div.external_cat_box table.external_cat_box th input, div.external_cat_box table.external_cat_box th label, div.external_link_box table.external_link_box th input, div.external_link_box table.external_link_box th label { vertical-align:middle; } div.external_cat_box table.external_cat_box th label, div.external_link_box table.external_link_box th label { white-space:nowrap; } div.external_cat_box table.external_cat_box td.divide, div.external_link_box table.external_link_box td.divide { padding:0 10px; width:100%; } div.external_cat_box table.external_cat_box td.divide hr, div.external_link_box table.external_link_box td.divide hr, table.fullwidth td.divide hr, table.itemListList td.divide hr { height:1px; border-color:transparent; border-top:1px solid; } div.external_cat_box table.external_cat_box td.form, div.external_link_box table.external_link_box td.form { padding:0 10px 10px 10px; width:100%; } div.external_cat_box table.external_cat_box td.form table, div.external_link_box table.external_link_box td.form table { width:100%; } div.external_cat_box table.external_cat_box td.image img, div.external_link_box table.external_link_box td.image img { border:1px solid; } div.external_cat_box table.external_cat_box td.form table td.divide, div.external_link_box table.external_link_box td.form table td.divide { line-height:3px; } div.external_cat_box table.external_cat_box td.form table td input.text, div.external_link_box table.external_link_box td.form table td input.text { width:100%; } div.external_cat_box table.external_cat_box td.form table td input.upload, div.external_link_box table.external_link_box td.form table td input.upload { font-size:11px; padding:2px; width:100%; } table.itemListItems td.divide, table.fullwidth td.divide { width:100%; }