Fw: maincss.css file, part 2

[Jacques Le Roux]

Sorry missed dev ML

Jacques

----- Original Message -----
From: "Jacques Le Roux" <[hidden email]>
To: <[hidden email]>
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" <[hidden email]>
> To: "Jacques Le Roux" <[hidden email]>
> 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" <[hidden email]>
> > > > To: <[hidden email]>
> > > > 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 <[hidden email]>
> > Sykes Development Ltd
> > http://www.sykesdevelopment.com
>