/*
Aug 20, 2014:  changed line-height property in pre class program.
Aug  3, 2017:  modified for LessonMaker.java added .bottomnavigation
Aug 12, 2024:  many changes.  Added responsive design.  User % rather than em.
Jun 25, 2025:  many changes.  
Jly 31, 2025:  CSS validation
*/


/* Color Scheme:
background-color: #fdfffd;    -- color of main body of text
color: #f25239;               -- color of page heading and borders around code (orange)
color: #a030a0;               -- color of question and answer title (purple)
border-color: #a030a0;        -- dotted line around navigation buttons and entire body (purple)
background-color: #f8f8ff;    -- color of question and answer divisions, row of table headings (lavender)
color: #005000;               -- color of code (dark green)
color: white;                 -- color of program class and tables
color: green;                 -- color of table and cell borders
background-color: #f5f5ff;    -- color of navigation divisions (darker lavender)
*/

body
{
  max-width:1500px;  /* might not be a good idea.  Seems to help on really wide monitors, though */
  background-color:#fdfffd;   /* mostly white background */
  font-family:Arial,Helvetica,sans-serif; 
  margin: 0 auto 0 auto;
  border: 2px solid  #a030a0;
}

p
{
  text-align: justify;
  /*text-indent: 2em; */
  /*word-spacing: 2px; */
  line-height: 125%;
  margin-top: 1em;
  margin-right: 0em;
  margin-bottom: 1em;
  margin-left: 0em;
}


p.revisions
{
  font-size:50%;
}


.left
{
  /* max-width works better than max with small windows */
  max-width:48%; 
  float:left;
  /* margin seems to be redundant */
  /* margin: 0 auto 0 auto; */
}

.right
{
  max-width:48%;
  float:right;
  /* margin: 0 auto 0 auto; */
}


.middle
{
  max-width:70%;
  margin: auto;
}

/* used in ch 21, 32, 46 */
.leftSide
{
  max-width:55%;
  float:left;
}

/* see "code" */
.nobr  
{ 
  white-space:nowrap; 
}

/* for fill-in-the-blank questions */
.blank
{
    font-weight: bold;
    font-size: large;
    color: blue;
}
 

/* Used for file names in paragraphs */
/* rarely used: use code */
kbd
{
  font-size:1em;
  font-family:"Courier New",courier,FreeMono,monospace;   /* FreeMono for Linux */
}

blockquote
{
  margin-left: 2em;  
  line-height:1.5;
}

/* rarely used */
blockquote.display
{
  width:auto;
  margin-left:2em;
  margin-right:2em;
  padding:1.5em;
  border-width:4px;
  border-style:double;
  border-color:#f25239;
  background-color: white;
}

h2,h3,h4
{
  color: #a000f0;                 
  font-weight:bold;
}


div.lesson
{
  margin-top:1.5em;
  margin-right:1.5em;
  margin-bottom:1.5em;
  margin-left:1.5em;
  padding:0em;
}

.lesson h1
{
  color: #f25239;                
  text-align:center;
  font-size:250%;
  text-shadow: 2px 2px 2px gray; 
}


.bottomnavigation, .topnavigation
{
  background-color:#f5f8f5;
  padding:0.5em 0.5em 0.5em 0.5em;
  margin:0 0 0 0;
}

.bottomnavigation img, .topnavigation img
{
  border-style:dotted;
  border-color:transparent;
  padding: 1px;
}

.bottomnavigation img:hover, .topnavigation img:hover
{
  border-style:dotted;
  border-color:#a030a0;  /* purple */
}

.topnavigation
{
  border-width:  0 0  1px  0;
  border-style: none none dotted none;
}

.bottomnavigation
{
  border-width:1px 0 0 0;
  border-style:dotted none  none  none ;
}


.questionEcho
{
  padding-bottom: 1em;
  border-width: 1px;
  border-style: none none dotted none;
}

.answer, .question
{
  background-color:#f8faf8;
  padding:1.0em;
  margin: 0.0em;
  border-top: 1px dotted black;
  border-bottom: 1px dotted black;
}

.answer h3, .question h3
{
  color:#a030a0;  
  font-size: 150%;
  font-weight: bold;
  padding: .5em 0 0 0;
}
 
.question img
{
  border-style:none;
}

h1 code
{
  font-size:120%;
}

ul, ol
{
  padding-left: 4em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  line-height:1.5;
}

ul
{
  list-style:square;
}

ol
{
  list-style:decimal;
}

ul ul
{
  padding-left:2em;
  list-style:circle;
}

ol ol
{
  padding-left:2em;
  list-style:lower-alpha;
}

ol ul
{
  padding-left:2em;
  list-style:circle;
}

table 
{
  background-color: white;
  border: 2px;
  border-color: green;  
  border-style: solid;
  border-collapse: collapse;
  margin: 1.0em 1.0em 1.0em 1.0em;
  font-family:"Lucida Console","Courier New",courier,FreeMono,monospace;   /* FreeMono for Linux */
}

tr.headings
{
  background-color:#eaeaf5;
}

th.headings
{
  background-color:#eaeaf5;
}

th
{
  border: 1px; 
  border-style: dotted;
  border-color: green; 
  padding: 0.5em 0.5em 0.5em 0.5em;
  background-color:#eaeaf5;
}

td
{
  border: 1px; 
  border-style: dotted;
  border-color: green; 
  padding: 0.5em 0.5em 0.5em 0.5em;
}

table.layout 
{
  border: 0px;
  background-color: white;
}

table.layout th, table.layout td
{
border: 0px;
}

table.center    /* center the table */
{
margin: 1em auto 1em auto;  
}

table ul, table ol
{
margin-left:0.65em;
padding-left:0.65em;
}

table code
{
font-size:100%;
}

table pre
{
margin-left:0.4em;
margin-right:0.4em;
}
 
img.centerimage, img.center    /* center the image */
{
display: block;
margin: 1em auto 1em auto;  
}

img.rightimage
{

float:right;
margin:5em 5em;
}

.clearfloats
{
clear:both;
height: 1px;
line-height: 1px;
}

.blue
{
color:blue;
}

.red
{
color:red;
}

.green
{
color:green;
}

pre 
{
margin: 0.5em 2em 0.5em 2em;
text-align: left;
font-family:"Lucida Console","Courier New",courier,FreeMono,monospace;   /* FreeMono for Linux */
}

pre.code
{
font-family:"Lucida Console","Courier New",courier,FreeMono,monospace;   /* FreeMono for Linux */
font-size:115%;
color: #005000;
}

pre.program
{
  width:auto;
  margin-left:2em;
  margin-right:2em;
  padding:1.5em;
  border-width:4px;
  border-style:double;
  border-color:#f25239;
  background-color: white;
  font-size:90%;
  line-height: 150%;
}
 

/* Use for code in paragraphs, also for file names in paragraphs */
code
{
font-family:"Lucida Console","Courier New",courier,FreeMono,monospace;   /* FreeMono for Linux */
font-size:115%;
color: #005000;
white-space:nowrap;   /* to deal with deprecated nobr */
}

input
{
background-color: #fffffa;
color: #000000;
font-size:1.1em;
}

a
{
font-size: 100%;
font-family: "Comic Sans MS", TSCu_Comic, fantasy, Arial;  /* TSCu_Comic for Linux */
}

a:link     { color:blue; }
a:visited  { color:green; }
a:hover    { color:red; }
a:active   { color:red; }

canvas 
{
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: #E0E0E5;
    border:1px solid #000000;
}

/* responsive design */
@media screen and (max-width:900px) 
{
  pre
  {
    font-size:75%;
  }
  
  img.rightimage
  {
  float:none;
  }
}

@media screen and (max-width:650px) 
{
  div.left, div.right 
  {
    width:100%;
    float: none;
    clear: both;
  }

  pre
  {
    margin: 0em 0em 0em 0em;
    padding:0em;    
    font-size:75%;
  }
  
  pre.code
  {
    font-family:"Lucida Console","Courier New",courier,FreeMono,monospace;   /* FreeMono for Linux */
    font-size:75%;
    color: #005000;
  }
  
  pre.program
  {
    width:auto;
    border-width:1px;
    border-style:double;
    border-color:#f25239;
    background-color: white;
    font-size:75%;
    line-height: 100%;
  }

}