/* 
 * My CSS style stuff
 *
 *  The idea here is to come up with something that looks good
 *  initially on mozilla. Then we'll cut out all the stuff that
 *  doesn't work on netscape 4.x, All the cut out stuff will go
 *  into a newbrowser.css file that get's imported.
 *
 *
 *  This is getting very close to a nice looking page on Netscape
 *  4.7x while still mostly working with Geko based browsers.
 *  A couple of issues remain:
 *
 *    1) NN4 doesn't seem to allow tag#id structures. So you can't
 *       have a style id associated with a specific tag, they are
 *       all global.
 *
 *    2) Image in links. The only way to get rid of the board with
 *       with NN4 is to use the depreciated border="0" attribute.
 *
 *    3) <span> vs. <div>, <span> doesn't work with NN4. <div> 
 *       works much better but in some cases it isn't really what
 *       we want. (see the sectionhead class)
 *
 *    4) borders. I don't know what's going on with the borders
 *       around blocks. Sometimes they work, sometimes they don't
 *       and I haven't figured out what the trick is.  I'd like
 *       to get the borders working consistently.
 *
 *  Colors.  What are we going to do about colors?  Right now they
 *  are spread out in each section. Other ideas are to move them
 *  all into a separate section (or even a separate file).
 */


/* define some classes that will hide elements from older browsers
 *
 * if we add this class to an element, it is hidden. To unhide this
 * for newer browsers, we'll need to re-define these latter in a css
 * file that only gets loaded by newer browsers (@import)
 */


.oldblock, .oldinline, .pic {
    display: none;
}

/* Here are all the standard style definitions. Everything here should
 * be pretty much browser independent.
 */

html {
    margin: 0; padding: 0;
}

body {
    background: rgb(100%,100%,100%) url(/images/carsbackground.png) left bottom no-repeat fixed;
    color : #000040;
    font-family : Arial, Helvetica, Verdana, Geneva, sans-serif;
    font-size: 14px;
    margin: 0; 
    padding: 0;
}

div, span, p, blockquote, ol, ul, dl, li, dt, dd, td {
    color : #000040; 
    font-family : Arial, Helvetica, Verdana, Geneva, sans-serif;
}

div b, span b, p b, blockquote b, ol b, ul b, dl b, li b, dt b, dd b, td  b {
    font-weight : 900; 
}

div strong, span strong, p strong, blockquote strong, ol strong, ul strong, dl strong, li strong, dt strong, dd strong, td  strong {
    font-weight : 900; 
}


a:link img, a:visited img {
    border: none;
}

pre, code {
    font: 103% "Andale Mono", "Courier New", Courier, monospace; line-height: 1em;
}

/*
 * Should the header be a class or an ID?  
 *
 * Right now it's a class, but it really should only be used once in the
 * document so that would mean that an ID would be a better choice.
 *
 * border color 'none' doesn't seem to work with nn4. We don't get any
 * background color when we do that.  Maybe for nn4 we could just do
 * a thin bottom border? Nope, that doesn't seem to work either.
 */

.header {
    color: rgb(49,49,99);
    background: rgb(50%,50%,70%);
/*    layer-background-color: rgb(50%,50%,70%); */
    margin-top: 0px;
    margin-left: 0px;
    padding: 0px; 
    border: 0.1px solid none;
}


/* Can only have one footer area */
#footer {
    background: rgb(87%,90%,93%);
    layer-background-color: rgb(87%,90%,93%);
    border: 1px solid rgb(30%,30%,50%); 
    text-align: right; 
    font-size: 90%; 
    clear: both;
    margin: -1px;
    padding: 0.1em 0.4em 0.0em; 
}

/* Only one content area */
#content {
    margin: 0 4% 0 19%; 
    top: -30px;
    padding: 0.5em 2% 1em 2%;
    position: relative;
    border: 0.1px solid none;
}

#content p {
    margin: 0.66em 0 1em 1.75em; 
    padding: 0;
    text-align: left; 
    line-height: 1.1;
    border: 0.1px solid none;
}

#content p.desc {
    float: right;
    border: 0.1px solid none;
}

#content ul, #main ol {
    margin: 0.75em 0 1em 1.75em;
    padding: 0 0 0 2.5em;
    border: 0.1px solid none;
}

/* 
 * Transparent bgcolor doesn't work with NN4. It turns the background
 * a nice shade of black!
 */

#navigation {
    margin: 0 1% 0 0; /* Top left bottom right */
    width: 19%;
    padding: 0; 
    float: left;
    max-width: 155px;
    min-width: 100px;
    text-align: left;
    font-size: 90%; 
    border: 0.1px solid none;

}


#navigation h4 {
    margin: 2.5em 2px 0 2px; 
    padding: 0;
    font-size: 1em; 
    font-weight: bold; 
    line-height: 1.25em;
    text-align: left; 
    text-transform: lowercase;
    border-bottom: 2px solid;
    color: rgb(30%,30%,50%);
    border-color: rgb(30%,30%,50%);
}


#navigation h4#header {
    margin-top: 1em;
}

#navigation form {
    margin: 0 2px; 
    border-style: solid; 
    border-width: 0 0 0 1px;
    padding: 0.25em 0.66em;
}

#navigation p {
    margin: 0 2px; 
    border-style: solid; 
    border-width: 0 1px 0 0;
    line-height: 1.1em; 
    text-align: left;
    padding: 4px 5px 2px;
    border-color: rgb(30%,30%,50%);
}

#navigation b {
   display: none;
}

#navigation p.subhead {
    font-size: 95%; 
    font-style: italic;
    line-height: 1em;
    text-align: left; 
    margin: 0 0 0 2px;
    padding: 4px 5px 2px;
    color: rgb(50%,50%,75%);
    border-style: solid; 
    border-width: 0 1px 0 0;
    outline-width: 0;
    border-color: rgb(30%,30%,50%);
}

/*
 * The border-width is what really causes problems for NN4. Which can
 * be fixed by wrapping the links in <div> blocks.  But this makes 
 * it funny for other browsers.  I think it might be best to leave it
 * like this and see if something else will work for NN4.
 */
#navigation a {
    display: block;
    outline-width: 0;
    padding-top: 4px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 2px;
    border-color: rgb(30%,30%,50%);
    border-style: solid; 
/*
    border-width: 1px
*/
}

#navigation a:link {
    color: rgb(20%,20%,80%);
}

#navigation a:visited {
    color: rgb(80%,20%,20%);
}

/* div#navigation a:hover { */
/*
 *  So why doesn't the border-width mess up NN4 here? Because NN4
 *  doesn't recognize :hover!
 *  Hmm, seems like the only thing that should change is the border
 *  width and color.
 */
#navigation a:hover {
    border-right-width: 5px;
    padding-right: 0px;
    border-color: rgb(30%,30%,60%);
    text-decoration: underline;
}

#navigation a:visited:hover {
    padding-right: 0px;
    border-color: rgb(50%,50%,60%);
}

navigation img {
    width: 95%; 
    max-width: 150px; 
    margin: 3px 0 5px; 
    border: 1px solid;
}

div.subnav {
    /*
    border-left: 1px solid; 
    margin: 0 1em 0 2px;
    background: transparent;
    */
    border-right: 1px solid; 
    margin: 0 2px 0 8px;
    background: transparent;
    border-left: none;
    border-color: rgb(30%,30%,50%);
}

#navigation div.subnav a {
    /*
    border-left: 3px double;
    margin-left: 1px; 
    padding-left: 3px; 
    padding-top: 2px;
    */
    border-right: 1px double;
    margin-right: 0px; 
    padding-right: 5px; 
    padding-top: 2px;
    border-left-color: rgb(50%,65%,85%);
}

#navigation div.subnav a:hover {
    /*
    border-left: 4px solid;
    margin-left: 0; 
    padding-left: 3px;
    */
    border-right: 4px solid;
    margin-right: 0px; 
    padding-right: 1px; 
    /*margin-left: 1em; */
    border-left-color: rgb(50%,60%,80%);
}

#navigation div.subnav a:visited:hover {
    border-left-color: rgb(60%,60%,80%);
}

#general {
    margin: 2em 0 0.5em; 
    padding: 0;
    border-color: rgb(40%,40%,60%);
}

#general div.entry p {
    margin: 0.5em 0 1em 1.75em;
}

#general h4 {
    border: 1px solid rgb(40%,40%,60%); 
    margin: 0; 
    padding: 0.25em 1em 2px 0;
    font-style: italic; text-align: right;
    background: rgb(80%,80%,100%); 
    layer-background-color: rgb(80%,80%,100%);
}

div.section {
    border-top: 1px solid;
    padding: 0; 
    margin: 0 0 2.5em;
    border-color: rgb(50%,50%,66%);
    }

/* Span is really what we want for this, but NN4 doesn't handle */
/* it right. I'm not sure the improvement on NN4 is worth the   */
/* loss on everything else.                                     */
span.sectionhead {
    position: relative; 
    border-style: solid; 
    border-width: 1px 1px 1px 2px; 
    border-color: rgb(40%,40%,60%);
    top: -0.66em;
    margin: 0; 
    padding: 1px 0.5em;
    font-weight: bold;
    /* background-color: rgb(220,220,255); */
    background: rgb(220,220,255);
    color: rgb(25%,25%,25%);
}

/* To move the sectionhead up in NN4, set top: -30px */
/* For everything else, this should be 0px?          */
div.sectionheadx {
    position: relative;
    border: 1px solid rgb(40%,40%,60%);
    /*
    border-style: solid; 
    border-width: 1px 1px 1px 2px; 
    border-color: rgb(40%,40%,60%);
    top: -0.66em;
    */
    top: -30px;
    margin: 0px 0px 0px 0px; 
    width: auto;
    padding: 1px 0.5em;
    font-weight: bold;

    /* background-color: rgb(220,220,255); */
    background: rgb(220,220,255);
    layer-background-color: rgb(220,220,255);
    color: rgb(25%,25%,25%);
}



/* Colors */

body { color: #000040; }
div, p, blockquote, ol, ul, dl, li, dt, dd, td { color: #000040; }
.header {
    color: rgb(99,99,49);
    background: rgb(80%,20%,20%);    /* Red */
    layer-background-color: rgb(80%,20%,20%);
}

#footer {
    background: rgb(88%,89%,93%);  /* Silver */
    layer-background-color: rgb(88%,89%,93%);
    border: 1px solid rgb(30%,30%,50%); 
}

#general h4 {
    background: rgb(93%,95%,100%); 
    layer-background-color: rgb(93%,95%,100%);
}

span.sectionhead {
    background: rgb(100%,60%,60%);
    color: rgb(15%,15%,15%);
}