/* The shared CSS for Windows and Mac after these specific CSS for each #ECE8DF;*/ 
/* ---------- WINDOWS ------------- */
.topMENUitems a:hover { background-color: #8b7259; }

#topIntro,#topXHTML,#topCSS,#topXML,#topJS,#topDESIGN,#topGRAPHICS,#topSERVER,#topMap
{ padding:3px 0px 5px 0px; text-decoration:none; color:white; }

#topMENU { background-color:#AA9471; border-right: thin solid #7B623A; font-size: 9pt}
.menuBG      { background-image: url('../images/web-Menu-Over.png');   color:#4e3f23 } 
.menuOverBG  { background-image: url('../images/web-Menu-Normal.png'); color:white } 
.menuClickBG { background-image: url('../images/web-Menu-Click.png');  color:white } 
/* ----------- MACINTOSH ------------ */
/* .menuBG      { background-color:#AA9471 ; color:white }    */
/* .menuOverBG  { background-color:#E4DDD2 ; color:#4e3f23 }  */
/* .menuClickBG { background-color:#EFEAE3 ;  color:#4e3f23 } */
/* ----------- SHARED ------------ */

body { 
    background-color: #ffffff;
    color: #000000;
    margin:0px;
    font-family: verdana,arial,helvetica;
    font-size:1em;
}
#topWebPage {background-color:#AA9471;
            color:white;
            text-align:center;
            font-size:10pt;
            font-family:arial,sans-serif;
}
.menuHide, .menuDisplay {   font-size:10pt; 
                            font-family:sans-serif; 
                            border-collapse:collapse; 
                            border:#5B421A 1px solid; 
                            position:absolute}
.menuHide    { display:none }
.menuDisplay { display:block; }
#menuIntro      {left: 160px; top:18px; cursor:hand }
#menuXHTML      {left: 235px; top:18px; cursor:hand }
#menuCSS        {left: 300px; top:18px; cursor:hand }
#menuXML        {left: 370px; top:18px; cursor:hand }
#menuJS         {left: 440px; top:18px; cursor:hand }
#menuDESIGN     {left: 500px; top:18px; cursor:hand }
#menuGRAPHICS   {left: 570px; top:18px; cursor:hand }
#menuSERVER     {left: 690px; top:18px; cursor:hand }
#bookCrease {
    background: url(../images/web-booktile-X.jpg);
    background-color: transparent;
    border-top: thin solid #7B623A;
    border-left: thin solid #7B623A;
}
.bookPage {
    padding:15px 0px 20px 40px;
    border-top: thin solid #7B623A;
    background: url(../images/web-logoBookPage.png);
    background-repeat:no-repeat;
    }
#topLogo{ /* WebDNA in left scan column */
          height:55px;
          background: url(../images/web-logo.jpg);
          background-repeat:no-repeat; 
}
#topLogoWebApps{ /* WebDNA in left scan column */
          height:55px;
          background: url(../images/webAppLogo.jpg);
          background-repeat:no-repeat; 
}
#topLogoPage{ color: #7B5A3A; font-style:italic; font-weight: bold;
                font-size: 12pt;
                margin-left: 2px;
                margin-top: 10px;
                text-align: center;
}
/*
#topLogoPage{ color: white;
                font-size: 12pt;
                font-family: Arial,sans-serif;
                margin-left: 4px;
                text-align: center;
}
*/
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 }

#looseMenu { position:absolute; 
             top:42px;      /* MUST be coordinated with function looseMenuHome(){ */ 
             left:10px;
}

#looseMenu { position:absolute; 
             top:42px;      /* MUST be coordinated with function looseMenuHome(){ */ 
             left:10px;
}
#looseMenu ul { list-style-type:none;           /* list menus in left scan column */
                padding-left: 5px;             
                margin-left:5px;                 /* was 10px */
                margin-top: 10px;
                margin-bottom: 10px;
                line-height: 130%;
                font-size: 9pt;
                font-family:Verdana,sans-serif;
}
#looseMenu ul a {
                color:white;
                text-decoration:none;
}
#looseMenu ul a:hover{ color:white;
                       text-decoration:underline;  /* font-size: 9pt; */                      
                       font-family:Verdana,sans-serif;
}
.looseIn { margin-left:10px }
td#leftColumn { background-color:#AA9471;     /* left scan column AA9471 */
                padding:0px;
                margin-top:0px;
                font-size: 9pt;
}
#looseMenu .LH { font-weight:bold; padding-left:0px; line-height:220%; font-style:italic; } /* left Headings */
li.linkOut  {   color: #7B5A3A; font-weight:bold; font-size: 11pt;                 /* #7B5A3A; */
                font-style:italic; margin-bottom: 10px
}
/*
li.linkOut  {   color:#7B5A3A;
                font-style:italic;
}
*/
.footer { text-align:right;
}
.footer a{ text-decoration:none;
          color:#4e3f23;
}
.footer a:hover{ text-decoration:underline;
          color:#4e3f23;
}
.figure a{ text-decoration:none;
          color:#4e3f23;
}
.figure a:hover{ text-decoration:underline;
          color:#4e3f23;
}
.new { font-weight: bold; font-family:cursive; color: white} /* #FFFF3C */
hr.head { color: #c0c0c0; width:440px;height:1px;margin:-3px 0px 0px -20px; } /* #776E5F  */
.doNotPrint { display:block }
@media print { #leftColumn {display:none}
                #bookCrease {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 }
}
address {   font-size:smaller;
            line-height:120%;
            color: white;
            margin-left: 20px;
}
h1 { 
font-family: "Times New Roman", Times, serif;
font-size: 200%; 
font-weight: bold;
color:#776E5F;
margin-left:-60px;  /* this compensates for left margin */
margin-top: -3px;
text-align: center;
margin-bottom:1em;
}
h2 {  
font-family: Arial, sans-serif;
font-size: 150%; 
font-weight: bold; 
color:#7B5A3A; 
margin-left:-20px;
margin-top:0em;
margin-bottom:0em;
cursor: hand
}
h3 {
font-family: Arial, sans-serif;
color:#776E5F;    /* #776E5F; */
font-size: 130%;
font-weight: bold;
margin-top:-1em;   /* this compensates for <br />, which gives needed (!!) whitespace  */
margin-bottom:0em;
margin-left:-15px;
cursor: hand
}
h4 {
font-family: Arial, sans-serif;
color:#7B5A3A; */
font-size: 130%;
margin-top:1em
margin-bottom:01em;
cursor: hand
}
h2 span {
font-size:7pt;
font-weight:normal;
padding-left: 2em;
color:#776E5F;
font-family: Verdana, Tahoma, Helevetica, Arial, sans-serif;
}
h3.lessontopics { margin: 0px 0px -15px 4px }
ol.lessontopics { font-size:smaller;list-style-type:none;line-height:140%;margin-left:5px}
p {
width:440px
}
div p {
width: 440px
}
dl {
width: 440px
}
blockquote {
width: 440px
}
dt {
margin-top: 1em;
line-height:130%;
font-size: 100%;
color:#59482B;
}
cite {
font-weight: normal;
font-decoration: italics;
}
ul,ol {
list-style-position:outside;
line-height: 130%;
}
hr {
color:#7B623A;
}
/*  <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
*/   
pre {
line-height:100%;
font-size:100%; 
color: #000000;
}
pre em {
color: #993333;
font-style: normal
}
pre span {
color: #008000
}
pre strong {
color: #3333CC;
font-weight:normal
}
pre span.hot {
color: #FF0000;
font-weight:normal
}
.hot { font-family: cursive; color:red }
/* 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 {
font-family: "Lucida Console",Tahoma, Arial, Helvetica, sans-serif; 
line-height:100%;
font-size:100%; 
color:#59482B;
}
code em {
color: #993333;
font-style: normal
}
code span {
color: #008000
}
code strong {
color: #3333CC;
font-weight:normal
}
a:link    {color:blue;text-decoration:underline } /* {color:#776E5F; } */
a:active  {color:blue;text-decoration:underline }
a:visited {color:#776E5F;text-decoration:underline }
a:hover   {color:red;    text-decoration:underline }    /* {color:#800000; } */

.notation {
font-family:arial,sans-serif;
font-weight:normal;
color:#776E5F;
font-size:8pt;
}
span.default {
color:#7B5A3A;
text-decoration:underline;
}
.reinforce {
padding:10px 12px 8px 13px;
border: 1px ridge #CC9933;
width:370px;
}
.reinforce legend {
font-family:  Arial, Helvetica, sans-serif; 
color:#7B623A;             
font-size: 130%;
font-weight: bold;
padding-left:5px;
padding-right:5px;
}
.caption {  
font-family:  Arial, Helvetica, sans-serif; 
font-size: 75%; 
color:#59482B;
font-style: italic; 
line-height: 1.2em
}
.example {  
font-family: Arial, Helvetica, sans-serif; 
font-size: 80%; 
color: #000000
}
.highlight { 
color:#59482B;
}
.discussion {  
font-family: Arial, Helvetica, sans-serif; 
font-size: 0.9em; 
color:#59482B;
background-color: whitesmoke;
border: 1px ridge #7B623A;
padding:5px 4px 6px 10px; 
}

.discussion td { 
padding:7px 12px 8px 10px;
vertical-align:top;
}
.discussion h1 { 
color: #CC6633;
margin-bottom:0em;
}
.discussion td ul {
margin-left: 1.5em;
}
.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
}
#pulldownMap {
background-color:#ECE8DF;
color:#7B623A;
margin-top:6px;
}
.runin  {   color: #776E5F;
            font-size: 1em;
            font-weight:bold;
}
.indent {
margin-left:18px;
}
textarea#inputHTML { padding:4px 0px 4px 4px }

.tryout { background-color: #AA9471; color:white }   /* buttons */

table {
border-collapse:collapse;
padding: 6px; 
border-color:#AA9471;
}
table.discussion {
border-collapse:collapse;
padding:7px 12px 8px 10px;
border: 2px solid #7B623A;
vertical-align:top;
}
table.data {
font-family: Verdana, Tahoma, Helevetica, Arial, sans-serif;
}
th {
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 100%; 
background-color:#ECE8DF;
/* background-color:#CABCA2; */
/* background-color:#993333; */
color: #59482B;
line-height: 130%; 
font-weight: bold; 
text-align:left;
vertical-align:top;
padding-top:8px;
padding-bottom:12px;
padding-left:6px;
}
td.sectionheading {
color: #59482B;
font-weight:bold;
background-color:#DDD4C5;
/* background-color:#DDD4C5; */
/* background-color:#FFCC66; */
text-align:left;
padding-top:6px;
padding-bottom:6px;
}
td {
vertical-align: top;
text-align:left;
padding:4px 4px 4px 6px;
line-height: 130%; 
font-size: 100% ;
}