/* ------------    NEW styles,  no color and no backgrounds here------------- */
body {font-family: verdana,arial,helvetica,sans-serif;}
#ss { margin-top: 6px; }
#looseMenu { position:relative;
                     top:-20px;      /* MUST be coordinated with function looseMenuHome(){ */
                     left:3px;
                     width:228px;
}
#looseMenu table.m { position:relative;top:0px;left:4px }
#looseMenu table.m td { font-size:8pt; width:215px; padding: 2px 1px 1px 3px; }
#looseMenu table.m td a{ text-decoration: none;
                                       display: block; width: 180px;
                                       line-height:130% }
/* -----------------  OLD styles, no color here------------------- */
.leftHeading{ font-style:italic; font-weight: bold;  font-size: 12pt; margin: 5px 0px 5px 0px; text-align: left; }
table#FAQ { margin-left:-12px }
#FAQ h3   { margin-left:5px }
#FAQ UL   { list-style-type:none;position:relative;left:-36px;top:0px;font-size:10pt;white-space:nowrap }
td { vertical-align: top;text-align:left;padding:4px 4px 4px 6px;line-height: 130%;  }
.discussion td { padding:7px 12px 8px 10px; vertical-align:top;}
.discussion td ul { margin-left: 1.5em; }
.undisplayed { display: none }
.displayed { display: block }
/* - ---------- color and background styles here--------------------- */

body { color: rgb(0,0,0); background-color:rgb(74,118,127); } /* rgb(63,114,152); */
/* #banner { background:url(../images/SpringBanner10.jpg) left center no-repeat } */
#banner { background:url(../images/FallBanner1.jpg) left center no-repeat }

/*  #ss td {border:1px red solid}       */ 

#looseMenu .LH { font-weight:bold; padding-left:0px; line-height:220%; font-style:italic; } /* left Headings */

#looseMenu { background:url(../images/BGtestRightFall.png) repeat-y rgb(255,255,255)}
#looseMenu table.m td a{ color:black; background-color:transparent }  

.leftHeading{ color: rgb(63,114,152); background-color:transparent    } /*    background:url(../images/BGtestRight.png) repeat-y  */

#leftColumn{ color: rgb(84,146,146);  background:url(../images/BGtestRightFall.png) repeat-y rgb(255,255,255); padding-left:10px;padding-top:4px }
/*  #leftColumn{ color: rgb(84,146,146);  background:url(../images/BGtestRight.png) repeat-y rgb(255,255,255); padding-left:10px;padding-top:4px } */
.bookPage {
    font-size:1em;
    background-color: rgb(255,255,255); color: rgb(0,0,0); padding:15px 0px 20px 40px;
}

#topIntro,#topXHTML,#topCSS,#topXML,#topJS,#topDESIGN,#topGRAPHICS,#topSERVER,#topMap
                { padding:3px 0px 5px 0px; text-decoration:none; background-color:rgb(255,255,255); color:rgb(51,102,102); }
/* --- font-size:10pt --- this was inserted for top menus in function topWEBpage() 6/6/2004 -- */
/* #topWebPage {  text-align:center;   font-size:10pt;  font-family:Verdana,Tahoma,arial,sans-serif; } */
#topMENU       { background:rgb(255,255,255);}
.menuBG        { cursor: pointer; background: url(../images/BGtestRight.png) rgb(255,255,255);   color: dimgray}
.menuOverBG  { background: url(../images/web-Menus-Normal.png) rgb(255,255,255); color:rgb(0,0,0)  }
.menuClickBG  { background: url(../images/web-Menus-Click.png) rgb(255,255,255);  color:rgb(0,0,0)  }
/*
.menuBG        { background: url(../images/web-Menus-Over.png) rgb(255,255,255);   color:rgb(0,0,0)}
*/
.menuHide, .menuDisplay{ position:absolute; top: 0px; left: 0px; border-collapse:collapse;  border:gainsboro 1px solid;} 
.menuHide    { display:none }
.menuDisplay { display:block; }
.menuDisplay td { padding-left:6px; padding-right:8px; }
#menuIntro, #menuXHTML, #menuCSS, #menuXML, #menuJS, #menuDESIGN, #menuGRAPHICS, #menuSERVER 
                    { top:108px; cursor: pointer;font-size:8pt;  font-family:Verdana,sans-serif;  background: url(../images/BGtestRight.png); background-color: rgb(255,255,255);  }        
#menuIntro      {left: 275px }
#menuXHTML      {left: 300px }
#menuCSS        {left: 415px }
#menuXML        {left: 490px }
#menuJS         {left: 545px }
#menuDESIGN     {left: 610px }
#menuGRAPHICS   {left: 683px }
#menuSERVER     {left: 790px }

#pulldownMap { background-color: whitesmoke;color: teal ; margin-top:6px; font-size: 8pt; }
address {  font-size:8pt;   line-height:120%; color: rgb(0,0,0); }

.footer { text-align:right; }
.footer a { text-decoration:none; color: rgb(255,0,0) ;} /*  #4e3f23; */
.footer a:hover { text-decoration:underline; color: rgb(255,0,0) ; } /*  #4e3f23; */
.figure a { text-decoration:none;  color: rgb(255,0,0) ; } /*  #4e3f23; */
.figure a:hover{ text-decoration:underline;  color: rgb(255,0,0) }  /*  #4e3f23; */
.new { font-weight: bold; font-family:cursive; color: rgb(255,0,0) }
.runin  { color:rgb(63,114,152); font-weight:bold; }
/* hr.head { color: rgb(84,146,146) ; width:440px;height:1px;margin:-3px 0px 0px -20px; } */
hr { color: rgb(84,146,146) }

h1 { font-family: Arial, sans-serif; font-size: 200%;
    color: rgb(0,51,102); /* rgb(60,104,104); */
    margin-top: 4px;
    text-align: center;
    margin-bottom:18px;cursor: pointer 
}
/*
h2 {  font-family: Arial, sans-serif; font-size: 150%; font-weight: bold;
        margin-left: -6px; margin-top:0em; margin-bottom:0em;
        color:rgb(63,114,152);cursor: hand 
}
*/
h2 {  font-family: Arial, sans-serif; font-size: 150%; font-weight: bold;
        margin-left: -6px; margin-top:0em; margin-bottom:0em;
        color:rgb(63,114,152);cursor: pointer;
        width: 540px; padding-bottom:3px ;border-bottom: 1px solid rgb(84,146,146)
}
h2 span { font-size:7pt; font-weight:normal;padding-left: 2em;
    color:rgb(58,137,143);
}
h3 { font-family: Arial, sans-serif;font-weight: bold;font-size: 130%;
    margin-top:-1em;   /* this compensates for <br />, which gives needed (!!) whitespace  */
    margin-bottom:0em; margin-left: 0px;
    color: rgb(80,136,136);cursor: pointer 
}
h4 { font-family: Arial, sans-serif; font-size: 130%;margin-top: 1em ;margin-bottom: 1em;
    color:rgb(58,137,143);cursor: pointer 
}

.tryout { background-color: rgb(63,114,152); color:rgb(255,255,255); margin-top:10px; padding-top: 3px;padding-bottom: 5px}   /* buttons */
a:link    {color:blue;text-decoration:underline }
a:active  {color:blue;text-decoration:underline }
a:visited {color:rgb(63,114,152);text-decoration:underline }
a:hover   {color:red;    text-decoration:underline }
.reinforce { padding:10px 12px 8px 13px;
                  border: 1px ridge rgb(80,136,136);
                   width:370px;
}
.reinforce legend { font-family:  Arial, Helvetica, sans-serif; color:rgb(63,114,152);         
                            font-size: 130%; font-weight: bold; padding-left:5px; padding-right:5px; }
th { background-color:azure; color: rgb(0,0,0);
        line-height: 130%; font-weight: bold; text-align:left; vertical-align:top;
        padding:8px 0px 12px 6px;}                            
td.sectionheading {font-weight:bold; color: black; background: url(images/BKGR-tealDots.gif) azure;
                            text-align:left; padding-top:6px 0px 6px 0px; }
.discussion {  font-family: Verdana, Arial, Helvetica, sans-serif; 
                    font-size: 0.9em; padding:5px 4px 6px 10px; 
                    color: rgb(60,104,104); 
                    background-color: whitesmoke;
                    border: 1px ridge rgb(80,136,136); }
table.discussion {  font-family: Verdana, Arial, Helvetica, sans-serif; 
                    font-size: 0.9em; padding:5px 4px 6px 10px; 
                    color: rgb(60,104,104); 
                    background-color: whitesmoke;
                    border: 1px ridge rgb(80,136,136); }                    
.discussion h1 { color: rgb(60,104,104); margin-bottom:0em; }
table { border-collapse:collapse; border-color: gainsboro; }
body.iframe { color: rgb(0,0,0); background-color: rgb(255,255,255) }
code { line-height:100%; font-size:100%; color:darkslateblue; }
pre { line-height:100%; font-size:100%;  color: darkslateblue; }            
span.default { color:dimgray; text-decoration:underline; }
.notation { font-size:8pt; font-weight:normal; color:dimgray; }
pre em { color: #993333; font-style: normal }
pre span { color: #008000 }
pre strong { color: black; font-weight:normal }
pre span.hot { color: #FF0000; font-weight:normal }
.hot { font-family: sans-serif; color:red }
.highlight { color:#59482B; }
/* code used for code samples mark up
       inside a code container, use <em> for red
       use <span> for green, and <strong> for blue
       -- use to set off or highlight parts of code
*/
code em { color: #993333; font-style: normal }
code span { color: #008000 }
code strong { color: #3333CC; font-weight:normal }
dt {   margin-top: 1em;  line-height:130%;  font-size: 100%;  color:rgb(0,51,102) }

/* ---------------------  -------------------------------- */

table#FAQ { margin-left:-12px }
#FAQ h3   { margin-left:5px }
#FAQ UL   { list-style-type:none;position:relative;left:-36px;top:0px;font-size:9pt;white-space:nowrap }

li.linkOut  {   color: #7B5A3A; font-weight:bold; font-size: 11pt;                 /* #7B5A3A; */
                font-style:italic; margin-bottom: 10px
}
/*
li.linkOut  {   color:#7B5A3A;
                font-style:italic;
}
*/
.doNotPrint { display:block }
@media print { #leftColumn {display:none}
                #topMENU {display:none}
                .hometop {display:none}
                #topShadow{display:none}
                #topWEBPage{display:none}
                .bookPage h1 {text-align:left }
                #navFooter {display:none}
                .doNotPrint {display: none }
}

h3.lessontopics { margin: 0px 0px -15px 4px }
ol.lessontopics { font-size:8pt;list-style-type:none;line-height:140%;margin-left:5px}
p { width:440px ; margin-left: 10px}
div p { width: 440px }
dl { width: 440px }
blockquote { width: 440px }
cite { font-weight: normal; font-decoration: italics; }
ul,ol { list-style-position:outside; line-height: 130%; }

/*  <pre> used for code samples mark up
    inside a <pre> container, use <em> for red
    use <span> for green, and <strong> for blue
    within the <pre> containers
*/   


.data {  
font-family:  Arial, Helvetica, sans-serif; 
font-size: 80%; 
color: #000000; 
line-height: 120%; 
}
.datatitle {  
font-family:  Arial, Helvetica, sans-serif; 
font-size: 100%; 
line-height: 120%; 
font-weight: bold;
padding: 6px 0px 6px 4px;
background-color:whitesmoke;
color: #000000
}
.indent { margin-left:18px; }
textarea#inputHTML { padding:4px 0px 4px 4px }
table#ss { border-collapse:collapse; }

table.data {
font-family: Verdana, Tahoma, Helevetica, Arial, sans-serif;
}