Sorry missed dev ML Jacques
----- Original Message ----- From: "Jacques Le Roux" <[EMAIL PROTECTED]> To: <[EMAIL PROTECTED]> Sent: Wednesday, January 17, 2007 11:10 PM Subject: Re: maincss.css file, part 2 > Andrew, Adrian, Chris, all, > > I think that http://www.webmasterworld.com/forum83/8396.htm is a good > solution if we want to keep pixels > Else http://www.alistapart.com/stories/sizematters/ is another solution > > AFAIK there are no other solutions for this problem at the moment. > > Jacques > > ----- Original Message ----- > From: "Andrew Sykes" <[EMAIL PROTECTED]> > To: "Jacques Le Roux" <[EMAIL PROTECTED]> > Sent: Wednesday, January 17, 2007 10:29 PM > Subject: Re: maincss.css file, part 2 > > > > Adrian, > > > > In case there was any doubt, this is what I was referring to when I > > mentioned fonts formatted in pixels contravening UK legislation. > > > > - Andrew > > > > On Wed, 2007-01-17 at 11:22 +0100, Jacques Le Roux wrote: > > > Adrian, > > > > > > As promised : > > > > > > Problems : IE does not allow to resize fonts formatted in pixels. This > > > causes problems in number of cases depending of screen > > > resolution, visual deficiency, etc. > > > http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/ > > > http://www.thenoodleincident.com/tutorials/box_lesson/font/ (a pretty > > > complete abstract !) > > > > > > Facts : IE has a 80% of market share. Micro$oft does not consider the > > > problem above a bug (ie does not wan to fix it) > > > > > > Solution : > > > In a first attemps I looked at > > > http://www.dyn-web.com/dhtml/sizefont/index.php#examples which seemed a > > > good solution (notes the > + - > > > R blue buttons at left) but this a commercial package. > > > After I found this solution which seems to work well without bothering > > > with specific zoom tool (smart, clear, concise :o) : > > > http://www.webmasterworld.com/forum83/8396.htm > > > > > > Adrian would you mind create a Jira issue for this topic with your > > > explanation and patch and this fix ? > > > > > > TIA > > > > > > Jacques > > > > > > > > > > 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; > > > > > } > > > > > > > > > > > > > > > -- > > Kind Regards > > Andrew Sykes <[EMAIL PROTECTED]> > > Sykes Development Ltd > > http://www.sykesdevelopment.com >
