Adrian, Impressing, I will add some comments for dealing with pixels in IE (from Zeldman's book)
Thanks for your work ! Jacques ----- Original Message ----- From: "Adrian Crum" <[EMAIL PROTECTED]> To: <dev@ofbiz.apache.org> Sent: Tuesday, January 16, 2007 7:54 PM Subject: maincss.css file, part 2 > I've spent the last few days going through the maincss.css file. I have > attached > the final result to this email. Here are some of the steps performed on the > file: > > 1. Consolidated maincss.css and tabstyles.css into one file. > 2. Used CSS inheritance and contextual selectors to reduce CSS code. > 3. Changed mixed font-size assignments to a consistent format - pixels. > (Chris's idea of using em for font sizes is a great idea, and I wanted to do > that, but I ran out of time.) > 4. Changed color assignments to a consistent format - hex notation. > 5. Re-organized CSS classes into some general categories. > 6. Added helpful comments. > > My objective was to simplify and streamline the existing file, without > causing a > severe impact on OFBiz's existing look and feel. > > Anyone who wants to try out this file can simply drop it into an existing > OFBiz > installation, then rename the existing tabstyles.css file so it won't get > used. > The UI will still look very much the same, with only trivial differences that > are probably due to the font-size changes. > > This file is NOT intended to be included in the project. As was mentioned in > the > previous thread, it is too drastic of a change to include it as-is. I'm NOT > putting it out there to overwhelm or frustrate the committers. My motivation > is > purely to inspire and provoke discussion about OFBiz's style sheets. > > My hope is that we can come up with some CSS guidelines/patterns/best > practices > to use on style sheets, then start making incremental changes to the style > sheets to follow those guidelines. > > With that in mind, I'd like to toss out a few of my own suggestions for CSS > guidelines: > > 1. Make better use of CSS inheritance. This has two advantages: less CSS code, > and easier to make style changes. In the attached maincss.css file, you can > change the font-family line in the BODY class and it will affect the entire > website. In the existing version, you would have to make dozens of changes to > accomplish the same thing. > > 2. Make better use of CSS contextual selectors. Advantages: reduced HTML and > more intuitive style changes. > > Reduced HTML example: in the attached maincss.css file, find the comments > about > unnecessary style(s). If those CSS classes aren't needed, then their > corresponding HTML "class=" declarations aren't needed either. > > Style change example: let's say I don't like the look of the yellow submenu > text > in the title bars of the screenlets. So, I change the color properties of the > submenutext CSS classes to make the text light blue. Cool - now the title bar > submenus look much better. Oh wait. Oops - that changed other elements too. > That's not what I intended. It would be better if the submenutext classes were > defined within the context of the title bar, so that changes made to them only > affect the submenutext elements WITHIN the title bar. > > (Btw, I really don't like the bold yellow text on a blue background. It looks > tacky.) > > 3. Be consistent with properties. Font sizes should all be expressed the same, > colors should all be expressed the same, etc. That makes style changes easier > by > utilizing editor search & replace functions. > > 4. Don't assume the whole world reads left-to-right. To demonstrate: in the > attached maincss.css file, in the BODY class, change > > direction: ltr; > > to > > direction: rtl; > > then see what happens. I have some ideas on coding standards that would take > care of that. I'd like to see us get to the point where a section of the > maincss.css file can be uncommented to switch the entire UI from ltr to rtl. > > Okay, that's it for now. I'm going to hop off of this crusade for a few days > so > I can go fix some patches I submitted to Jira. > > Comments are encouraged and welcome. > > -Adrian > > > > -------------------------------------------------------------------------------- > /* > * Copyright 2001-2007 The Apache Software Foundation > * > * Licensed under the Apache License, Version 2.0 (the "License"); you may not > * use this file except in compliance with the License. You may obtain a copy > of > * the License at > * > * http://www.apache.org/licenses/LICENSE-2.0 > * > * Unless required by applicable law or agreed to in writing, software > * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT > * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the > * License for the specific language governing permissions and limitations > * under the License. > */ > > /* This CSS file is used for all OFBiz applications EXCEPT ecommerce. */ > /* See the "ecommain.css" file for ecommerce. */ > > /* ======================== */ > /* ===== Color Scheme ===== */ > /* ======================== */ > /* > #000000 black > #FFFFFF white > #333333 dark gray/charcoal > #666666 dark greenish-gray > #999999 medium gray > #B4B0AA medium gray > #CCCCCC light gray > #dddddd light gray > #D4D0C8 silver > #000099 blue > #ff0000 red > #99CCFF light blue > #9999CC purple/violet > #1E3C66 dark blue > #ffff00 yellow > #5886C6 light blue > #003333 dark green > */ > > /* =================================== */ > /* ===== Default styles for ========== */ > /* ===== unclassed HTML elements ===== */ > /* =================================== */ > > A { > text-decoration: none; > } > > A:hover { > text-decoration: underline; > } > > BODY { > background: #D4D0C8; > direction: ltr; > font-family: Verdana, Arial, Helvetica, sans-serif; > font-size: 10px; > margin: 0px; > text-align: left; > text-decoration: none; > } > > DIV { > border: none; > margin: 0; > padding: 0; > } > > FORM { > margin: 0px; > } > > INPUT { > background: #FFFFFF; > border: #999999 solid 1px; > font-size: 10px; > margin: 2px; > } > > /* The "smallSubmit" class can be used to decorate links (A elements) and > make them similar to form's buttons. */ > INPUT[type="submit"], .smallSubmit { > background: #FFFFFF; > border: #999999 solid 1px; > color: #000099; > font-size: 10px; > font-weight: bold; > margin: 2px; > } > > INPUT[type="submit"]:hover, .smallSubmit:hover { > color: #ff0000; > text-decoration: underline; > } > > SELECT { > background: #FFFFFF; > border: #999999 solid 1px; > font-size: 10px; > margin: 2px; > } > > UL { > margin-bottom: 0; > margin-top: 0; > } > > H1 { > color: #000099; > font-size: 16px; > font-weight: bold; > margin: 0px; > } > > H2 { > color: #000000; > font-size: 14px; > font-weight: bold; > margin: 0px; > } > > H3 { > color: #000000; > font-size: 11px; > font-weight: bold; > margin: 0px; > } > > TH, .tableheadtext { > color: #000000; > font-weight: bold; > } > > /* ===================================== */ > /* ===== <H> styles that can be ======== */ > /* ===== applied to other elements ===== */ > /* ===================================== */ > > .head1 { > color: #000099; > font-size: 16px; > font-weight: bold; > margin: 0px; > } > > .head2 { > color: #000000; > font-size: 14px; > font-weight: bold; > margin: 0px; > } > > .head3 { > color: #000000; > font-size: 11px; > font-weight: bold; > margin: 0px; > } > > /* ============================== */ > /* ===== Header Styles ========== */ > /* ============================== */ > > .headerboxoutside { > background: #FFFFFF; > padding: 0; > } > > .headerboxtop { > background: #FFFFFF; > border-color: #FFFFFF; > border-style: solid; > border-width: 1px 1px 0px 1px; > padding: 4px; > } > > .headerboxbottom { > background: #FFFFFF; > border-color: #FFFFFF; > border-style: solid; > border-width: 0px 1px 1px 1px; > padding: 0; > } > > .insideHeaderText { > color: #000000; > font-weight: bold; > } > > A.insideHeaderLink { > color: #000099; > font-weight: bold; > } > > A.insideHeaderLink:hover { > color: #000000; > } > > .insideHeaderDisabled { > color: #666666; > font-weight: bold; > } > > .headerCenter { > background: #B4B0AA; > color: #000000; > font-weight: bold; > padding-left: 10px; > padding-right: 10px; > } > > A.headerCenter { > background: #D4D0C8; > color: #000099; > font-weight: bold; > padding-left: 10px; > padding-right: 10px; > } > > A.headerCenter:hover { > background: #D4D0C8; > color: #000000; > } > > .headerCenterSelected { > background: #D4D0C8; > color: #000000; > font-weight: bold; > padding-left: 10px; > padding-right: 10px; > } > > .headerCompanyName { > color: #000099; > font-size: 16px; > font-weight: bold; > margin: 0px; > white-space: nowrap; > } > > .headerCompanySubtitle { > color: #330099; > font-size: xx-small; > margin: 0px; > white-space: nowrap; > } > > .headersmalltext { > color: #000000; > font-weight: bold; > } > > A.headersmalllink { > color: #000099; > font-weight: bold; > } > > A.headersmalllink:hover { > color: #ff0000; > } > > HR.sepbar { > background: #999999; > border-width: 0px; > font-size: xx-small; > height: 1px; > width: 100%; > } > > /* ================== */ > /* Main appbar styles */ > /* ================== */ > > .appbarleft { > /* the appbar container */ > } > > .mainblock { > /* selected tab */ > background-color: #D4D0C8; > color: #000099; > font-size: 11px; > font-weight: bold; > text-align: center; > vertical-align: top; > } > > .mainblock A { > color: #000099; > text-decoration: none; > } > > .mainblock A:hover { > color: #000000; > } > > .tabdownblock { > /* unselected tab */ > background-color: #B4B0AA; > color: #000000; > font-size: 11px; > font-weight: bold; > text-align: center; > vertical-align: middle; > } > > .tabdownblock A { > color: #000000; > text-decoration: none; > } > > .tabdownblock A:hover { > color: #000099; > } > > .tabdowncenter { > background-image: url(/images/tabs/tab_down_fill.gif); > } > > .tabdownleft { > background-image: url(/images/tabs/tab_down_left.gif); > } > > .tabdownright { > background-image: url(/images/tabs/tab_down_right.gif); > } > > .tabupcenter { > background-image: url(/images/tabs/tab_up_fill.gif); > } > > .tabupleft { > background-image: url(/images/tabs/tab_up_left.gif); > } > > .tabupright { > background-image: url(/images/tabs/tab_up_right.gif); > } > > A.tablink, A.tablink:hover, A.tablinkselected, A.tablinkselected:hover { > /* unnecessary styles - should be deprecated */ > } > > A.tablink:hover, A.tablink:active, A.tablinkselected { > /* unnecessary styles - should be deprecated */ > } > > /* ====================================== */ > /* ===== Outermost Container styles ===== */ > /* ====================================== */ > > DIV.centerarea { > /* contains the app header and contentarea */ > margin: 10px 10px 0px 10px; > } > > DIV.contentarea { > /* the "work area" container */ > background-color: #FFFFFF; > border: solid #000000 1px; > margin-top: 10px; > padding: 10px; > } > > /* ===================================== */ > /* ===== Application header styles ===== */ > /* ===================================== */ > > .centerarea .row .col A, .centerarea .row .col-right A { > /* temporary hack - should use appheaderbtn class declared below */ > color: #000099; > font-weight: bold; > padding-left: 10px; > padding-right: 10px; > text-decoration: none; > } > > .centerarea .row .col A:hover, .centerarea .row .col-right A:hover { > /* temporary hack - should use appheaderbtn class declared below */ > background: #D4D0C8; > color: #000000; > } > > .appheaderbtn A { > color: #000099; > font-weight: bold; > padding-left: 10px; > padding-right: 10px; > text-decoration: none; > } > > .appheaderbtn A:hover { > background: #D4D0C8; > color: #000000; > } > > .headerButtonLeft, .headerButtonLeftSelected { > border-right: solid #ffffff 1px; > } > > .headerButtonLeftSelected { > background: #D4D0C8; > } > > .headerButtonRight, .headerButtonRightSelected { > border-left: solid #ffffff 1px; > } > > .headerButtonRightSelected { > background: #D4D0C8; > } > > .headerButtonLeft:hover { > /* unnecessary style - should be deprecated */ > } > > .headerButtonRight:hover { > /* unnecessary style - should be deprecated */ > } > > /* ================================== */ > /* ===== Inner Container styles ===== */ > /* ================================== */ > > DIV.screenlet { > background-color: #FFFFFF; > border: 1px solid #999999; > height: auto !important; > height: 1% > margin-bottom: 10px; > } > > DIV.screenlet-header { > background-color: #000099; > height: auto !important; > height: 1% > padding: 1px 4px 3px 4px; > } > > DIV.screenlet-body { > background-color: #FFFFFF; > height: auto !important; > height: 1% > padding: 4px; > } > > .boxhead { > color: #FFFFFF; > font-size: 11px; > font-weight: bold; > margin: 0px; > } > > .boxlink { > float:right; > } > > DIV.boxtop { > background: #000099; > border: 0px solid #999999; > margin: 0 auto 0 auto; > padding-top: 1px 4px 1px 4px; > text-align: center; > } > > DIV.boxhead-left { > color: #FFFFFF; > float: left; > font-weight: bold; > width: auto; > } > > DIV.boxhead-fill { > color: #FFFFFF; > font-weight: bold; > text-align: center; > width: 0; > } > > DIV.boxhead-right { > color: #FFFFFF; > float: right; > font-weight: bold; > width: auto; > } > > .boxoutside { > background: #FFFFFF; > border: 1px solid #999999; > padding: 0px; > } > > .boxtop { > background: #000099; > border: none; > margin: 0px; > padding: 1px 4px 1px 4px; > } > > .boxbottom { > background: #FFFFFF; > border-color: #999999; > border-style: solid; > border-width: 0px 0px 0px 0px; > padding: 4px; > } > > #column-container { > background-color: #FFFFFF; > margin: auto; > position: relative; > width: 100%; > } > > #column-container .left { > float: left; > margin-right: 10px; > /* alt: position: absolute; top: 0px; left: 0px; */ > width: 220px; > } > > #column-container .right { > float: right; > margin-left: 10px; > width: 220px; > } > > #column-container .leftonly { > margin-left: 230px; > width: auto; > } > > #column-container .rightonly { > margin-right: 230px; > width: auto; > } > > #column-container .center { > margin-left: 230px; > margin-right: 230px; > width: auto; > } > > #column-container .nocolumns { > width: auto; > } > > DIV.column-left-wide { > background-color: #CCCCCC; > border: black solid 2px; > float: left; > overflow: auto; > width: 300px; > } > > /* ================================== */ > /* ===== Small Container styles ===== */ > /* ================================== */ > > DIV.row { > background-color: #B4B0AA; > margin: 0 auto 0 auto; > text-align: center; > } > > DIV.col { > float: left; > width: auto; > } > > DIV.col-fill { > font-weight: bold; > background-color: #B4B0AA; > color: #000099; > text-align: center; > width: 0; > } > > DIV.col-right { > float: right; > width: auto; > } > > DIV.endcolumns { > clear: both; > } > > DIV.simple-right-small { > float: right; > width: 20px; > text-align: right; > } > > DIV.simple-right-half { > float: right; > width: 50%; > text-align: right; > } > > /* ======================== */ > /* ===== Table styles ===== */ > /* ======================== */ > > DIV.tabletexthidden { > visibility: hidden; > } > > A.tabletext, DIV.tabletext, SPAN.tabletext, P.tabletext, .tabletext { > /* inherits default font properties */ > } > > A.tabletext:hover { > /* inherits default anchor properties */ > } > > .tabletext SPAN .buttontext, .buttontextdisabled { > background: #ffffff; > border: #999999 solid 1px; > font-size: 9px; > font-weight: bold; > margin: 1px; > padding: 1px 4px 1px 4px; > } > > .tabletextright { > text-align: right; > } > > .tabletextcenter { > text-align: center; > } > > .tablebuttontext { > color: #1E3C66; > } > > A.tableheadbutton { > color: #000000; > font-weight: bold; > } > > A.tableheadbutton:hover { > color: #ff0000; > } > > .viewOneTR1 { > background: #B4B0AA; > } > > .viewOneTR2 { > background: #D4D0C8; > } > > .viewManyHeaderTR { > background: #99CCFF; > } > > .viewManyTR1 { > background: #D4D0C8; > } > > .viewManyTR1 TD { > height: 15px; > valign: middle; > } > > .viewManyTR2 { > background: #FFFFFF; > } > > .viewManyTR2 TD { > height: 15px; > valign: middle; > } > > /* ================================= */ > /* ===== Tab/Button Bar Styles ===== */ > /* ================================= */ > > .tabContainer { > background: #FFFFFF; > padding-top: 4px; > margin-bottom: 10px; > } > > .tabContainer A { > border: solid #000099 1px; > font-weight: bold; > padding: 1px 5px 1px 5px; > text-decoration: none; > white-space: nowrap; > } > > .tabContainer A:hover { > color: #FFFFFF; > } > > .tabButton { > color: #000099; > background: #D4D0C8; > } > > .tabButton:hover { > background: #000099; > } > > .tabButtonSelected { > color: #FFFFFF; > background: #000099; > } > > .tabButtonSelected:hover { > } > > /* =================================================== */ > /* Form layout styles to simulate a table-style layout */ > /* =================================================== */ > > .formTableBordered { > /* Style For Form Widgets */ > border: 1px solid #999999; > width: 100%; > } > > .form-row { > clear: both; > padding-top: 2px; > } > > .form-label { > float: left; > padding-top: 5px; > text-align: right; > width: 180px; > } > > .form-field { > float: left; > margin-left: 10px; > text-align: left; > } > > /* ============================== */ > /* ===== Link/Button Styles ===== */ > /* ============================== */ > > A.boxheadbutton { > color: #FFFFFF; > font-weight: bold; > margin: 0px; > } > > A.boxheadbutton:hover { > color: #ff0000; > font-weight: bold; > } > > .button { > background: #dddddd; > border: 2px outset #9999CC; > padding-left: 5px; > padding-right: 5px; > } > > A.buttontext, .buttontextdisabled { > background: #ffffff; > border: 1px solid #999999; > font-weight: bold; > margin: 2px; > padding: 1px 4px 1px 4px; > } > > A.buttontext { > color: #000099; > } > > A.buttontext:hover { > color: #ff0000; > } > > A.linktext { > color: #000099; > font-weight: bold; > } > > A.linktext:hover { > color: #ff0000; > } > > .buttontextdisabled { > color: #333333; > } > > A.headerbuttontext { > color: #000099; > font-weight: bold; > } > > A.headerbuttontext:hover { > color: #000000; > } > > .submenutextinfo { > border-right: 1px solid #5886C6; > color: #ffffff; > font-size: 9px; > font-weight: bold; > padding-left: 5px; > padding-right: 5px; > } > > .submenutext, A.submenutext, A.submenutext:visited { > border-right: 1px solid #5886C6; > color: #ffff00; > font-size: 9px; > font-weight: bold; > padding-left: 2px; > padding-right: 5px; > } > > A.submenutext:hover { > color: #ffff00; > } > > .submenutextdisabled, A.submenutextdisabled { > border-right: 1px solid #5886C6; > color: #CCCCCC; > font-size: 9px; > font-weight: bold; > padding-left: 2px; > padding-right: 5px; > } > > A.submenutextdisabled:hover { > color: #ffff00; > font-weight: bold; > } > > .submenutextinforight { > color: #ffffff; > font-size: 9px; > font-weight: bold; > padding-left: 2px; > } > > .submenutextright, A.submenutextright { > color: #ffff00; > font-size: 9px; > font-weight: bold; > padding-left: 2px; > } > > A.submenutextright:hover { > color: #ffff00; > } > > .submenutextrightdisabled, A.submenutextrightdisabled { > color: #CCCCCC; > font-weight: bold; > padding-left: 2px; > } > > A.submenutextrightdisabled:hover { > color: #ffff00; > } > > A.lightbuttontext { > border: none; > color: #ffff00; > font-weight: bold; > } > > A.lightbuttontext:hover { > color: #ffff00; > } > > A.lightbuttontextsmall { > border: none; > color: #ffff00; > font-size: 8px; > font-weight: bold; > } > > A.lightbuttontextsmall:hover { > color: #ffff00; > } > > .lightbuttontextdisabled { > color: #CCCCCC; > font-weight: bold; > } > > A.buttontextbig, .buttontextbigdisabled { > background: white; > border: #999999 solid 1px; > font-size: 15px; > font-weight: bold; > margin: 2px 2px 2px 2px; > padding: 1px 4px 1px 4px; > } > > A.buttontextbig { > color: #000099; > } > > .buttontextbigdisabled { > color: #CCCCCC; > } > > A.buttontextbig:hover { > color: #ff0000; > } > > .mediumSubmit, .largeSubmit, .loginButton { > background: white; > border: 1px solid #999999; > color: #000099; > font-size: 12px; > font-weight: bold; > margin: 2px; > } > > .mediumSubmit:hover, .largeSubmit:hover, .loginButton:hover { > color: #ff0000; > } > > .smallAltSubmit, .mediumAltSubmit, .largeAltSubmit { > /* inherits default font properties */ > } > > /* =============================== */ > /* ===== Misc Content Styles ===== */ > /* =============================== */ > > .endcolumns { > clear: both; > height: 0px; > visibility: hidden; > } > > .info { > color: #000000; > margin: 0px; > } > > DIV.graybox { > background: #CCCCCC; > border: 1px solid #000000; > font-weight: bold; > margin: 2px auto; > padding: 4px; > text-align: center; > width: auto; > } > > .contenttext { > /* inherits default font properties */ > } > > A IMG.imageborder { > border: 1px solid #999999; > } > > .errorMessage { > color: #ff0000; > font-weight: bold; > margin: 0px; > } > > .eventMessage { > color: #000099; > font-weight: bold; > margin: 0px; > } > > .ontab { > background: #000000; > border-style: inset; > border-width: 3px; > padding: 2px; > } > > A.onlnk { > color: #FFFFFF; > font-weight: bold; > padding: 2px; > } > > .offtab { > background: #CCCCCC; > border-style: outset; > border-width: 3px; > padding: 2px; > } > > A.offlnk { > color: #000099; > font-weight: bold; > padding: 2px; > } > > A.offlnk:hover { > color: #ff0000; > } > > .areaheader { > background: #000000; > color: #FFFFFF; > font-weight: bold; > padding: 2px; > width: 100%; > } > > .edittable { > border-color: #000000 #000000 #003333; > border-style: solid; > border-top-width: thin; > border-right-width: thin; > border-bottom-width: thin; > border-left-width: thin > } > > .editInputBox { > background: #FFFFFF; > border: 1px solid #999999; > margin: 2px; > } > > .inputBox { > background: #FFFFFF; > border: #999999 solid 1px; > margin: 2px; > } > > .selectBox { > background: #FFFFFF; > border: #999999 solid 1px; > margin: 2px; > } > > .textAreaBox { > background: #FFFFFF; > border: #999999 solid 1px; > margin: 2px; > } > > .radioButton { > background: #FFFFFF; > } > > .checkBox { > background: #FFFFFF; > } > > .basePrice { > color: #000000; > } > > .normalPrice { > color: #00ff00; > } > > .salePrice { > color: #ff0000; > } > > .browsecategorytext { > color: #000099; > font-weight: bold; > text-indent: -10px; > } > > A.browsecategorybutton { > color: #000099; > font-weight: bold; > } > > A.browsecategorybutton:hover { > color: #000099; > } > > .browsecategorybuttondisabled { > color: #333333; > font-weight: bold; > } > > /* ===== Product Summary Styles ===== */ > .product-prevnext { > text-align: right; > } > > .productsummary-container { > border-top: #999 solid 1px; > margin-bottom: 5px; > margin-top: 5px; > } > > .productsummary { > border-bottom: #999 solid 1px; > /* using min-height as an alternative to clear: both; because that, in some > browsers, will clear the top-level columns and not just in this div (Mozilla based, namely) */ > min-height: 60px; > overflow: auto; > padding: 5px; > position: relative; > } > > .productsummary .smallimage { > float: left; > /* position: absolute; top: 5px; left: 5px; */ > margin: 0px 5px 5px 0px; > } > > .productsummary .smallimage img { > border: 1px solid #CCC; > height: 50px; > } > > .productsummary .productbuy { > float: right; > margin: 5px; > text-align: right; > width: 130px; > } > > .productsummary .productinfo { > /* margin-left: 60px; */ > text-align: left; > } > > /* ===== Product Detail Styles ===== */ > #productdetail #long-description { > border-top: #999 solid 1px; > margin-top: 10px; > padding-top: 5px; > } > > #productdetail #reviews { > border-top: #999 solid 1px; > margin-top: 10px; > padding-top: 5px; > } > > #productdetail #associated-products { > border-top: #999 solid 1px; > margin-top: 10px; > padding-top: 5px; > } > > .treeWrapper { > color: #000000; > background: #ffffff; > font-size: 16px; > font-weight: normal; > text-align: left; > margin-left: 12px; > margin-top: 2px; > border-top: 1px solid #000000; > border-left: 1px solid #000000; > } > > .lefthalf{ > left: 0; > width: 49%; > height: 1%; > margin: 0% 1% 1% 0%; > float: left; > } > > .righthalf { > float: right; > height: 1%; > width: 49%; > right: 0; > margin: 0 0 1% 1%; > } > > .leftclear{ > height:1%; > clear: left; > } > > .bothclear{ > height:1%; > clear: both; > } > > .treewrapper { > margin-left: 10px; > } > > .treeitem { > color: #0000ff; > font-size: 12px; > font-weight: bold; > border: #888888 solid 1px; > } > > .whitearea { > background-color: #FFFFFF; > } > > .blackarea { > background-color: #000000; > } > > .apptitle { > background-color: #000099; > line-height: 2; > font-size: 13px; > font-weight: bold; > color: #FFFFFF; > display: block; > width: 100%; > } > > /* ================================ */ > /* ==== Styles For The Html Log === */ > /* ================================ */ > > .DEBUG { > color: gray; > } > > .WARN { > font-weight: bold; > color: blue; > } > > .INFO{ > color:green; > } > > .ERROR { > font-weight: bold; > color: red; > border: 2px solid red; > } > >
