/* responsive design */
img{
 max-width:100%;
}

input[type="text"], input[type="textbox"]{
     max-width:85% !important;
   /*background-color:red;*/
}

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

/*
pre.programm input{
 max-width:60%;
 background-color: red;
}
*/

@media screen and (max-width:1050px) {
  div.left, div.right, .leftSidexl, .leftsidexl, .leftSidex, .leftxl, .rights, .rightsmall{
    max-width:100%;
    float: none;
    clear: both;
  }
  p, pre, pre.code, textarea, blockquote, li{
   font-size:1.6vw !important;
  }
  pre.program{
   font-size:1.6vw !important;
  }
  p.revisions{
   font-size:1.0vw !important;
  }
}

@media screen and (min-width:1051px) {
   .left{
    max-width:48%;
    float:left;
   }
   .right{
    max-width:48%;
    float:right;
   }
   .middle{
    max-width:60%;
    text-align:center;
    margin: 0 auto 0 auto;
   }
   /*stand alone side*/
   .leftSide, .leftside{
    width:75%;
    float:left;
   }

   /*pre.programm + small text column .rightsmall*/
   .leftSidexl, .leftsidexl, .leftxl, .leftx {
    max-width:64%;
    float:left;
   }
   .rights, .rightsm, .rightsmall{
    max-width:35%;
    float:right;
   }
   /*small text column .leftsmall* + pre.programm .rightxl*/
   .leftsmall, .lefts{
    max-width:35%;
    float:left;
   }
   .rightxl, .rightx{
    max-width:64%;
    float:right;
   }

   .leftxxl, .leftxx {
    max-width:80%;
    float:left;
   }
   p, pre.code, textarea, td, th, blockquote, li{
   font-size:1em !important;
   }
   pre.program, pre{
    font-size:0.9em !important;
   }
   code.small{
    font-size:0.9em !important;
   }
   p.revisions{
    font-size:0.7em !important;
   }
}

@media screen and (max-width:850px) {
  h1{
   font-size:3vw !important;
  }
  p, pre, pre.code, textarea, td, th, blockquote, li{
   font-size:2.0vw !important;
  }
  pre.program{
   font-size:1.8vw !important;
  }
  p.revisions{
   font-size:1.2vw !important;
  }
}


@media screen and (max-width:650px) {
  h1, h2, h3{
   font-size:2.8vw !important;
  }
  p, pre, pre.code, textarea, td, th, blockquote, li{
   font-size:2.2vw !important;
  }
  pre.program{
   font-size:2.0vw !important;
  }
  p.revisions{
   font-size:2.0vw !important;
  }


}

@media screen and (max-width:550px) {
  h1, h2, h3{
   font-size:3.0vw !important;
  }
  p, pre, pre.code, textarea, td, th, blockquote, li{
   font-size:2.4vw !important;
  }
  pre.program{
   font-size:2.4vw !important;
  }
  p.revisions{
   font-size:1.4vw !important;
  }
}

@media screen and (max-width:450px) {
  h1, h2, h3{
   font-size:3.1vw !important;
  }
  p, pre,  textarea, td, th, blockquote, li{
   font-size:2.6vw !important;
  }
  pre.program{
   font-size:2.6vw !important;
  }
  pre.code{
   font-size:2.6vw !important;
  }

  p.revisions{
   font-size:1.5vw !important;
  }
}

ol, ul, li, pre{
 margin-left:1.1vw !important;
}

blockquote{
 margin-left:0.1vw;
}



/* 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: #fcfcff;    -- 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
*/

.left
{
max-width:48%;
float:left;
}

.right
{
max-width:48%;
float:right;
}

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

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


/* Don't use:  see code */
.tt
{
font-size:1em;
font-family:"Courier New",courier,FreeMono,monospace;   /* FreeMono for Linux */
}


/* Don't use:  see code */
kbd
{
font-size:1em;
font-family:"Courier New",courier,FreeMono,monospace;   /* FreeMono for Linux */
}

body
{
background-color:#fdfffd;
font-family:Arial,Garuda,Helvetica,sans-serif;   /* Garuda: font for Linux */
padding: 0px 0px 0px 0px;
margin: 0px auto 0px auto;
border: 2px solid  #a030a0;
}

p
{
text-align: justify;
/*font-size: 1em;*/
line-height: 125%;
margin-top: 1em;
margin-right: 0em;
margin-bottom: 1em;
margin-left: 0em;
}

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;
font-size:1.0em;
}

h2,h3,h4
{
/*color: #a000f0;*/
color:#8c311e;
font-weight:bold;
}


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

.lesson h1
{
color:#8c311e;
text-align:center;
font-size:2em;
}

h1 code
{
font-size:1.2em;
}

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;
}

ul ol
{
padding-left:2em;
}

p.revisions
{
font-size:0.66em;
}

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

.answer, .question
{
background-color:#fcfcff;
padding:1.0em;
margin: 0.0em;
}

.answer
{
border-bottom: 1px dotted black;
}

.answer h3, .question h3
{
color:#a030a0;
font-size: 1.5em;
font-weight: bold;
padding: .5em 0 0 0;
}


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.0vw;
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:1.0em;
}

table pre
{
margin-left:0.4em;
margin-right:0.4em;
}


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

img.centerimage, img.centerImage, img.center    /* center the image */
{
display: block;
margin: 1em auto 1em auto;
}

img.rightimage, img.rightImage
{
display: block;
float:right;
margin:2em 4em auto 1em;
}

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

.question
{
border-top: 1px dotted black;
}

.question img
{
border-style:none;
}

.bottomnavigation, .bottomNavigation, .topnavigation, .topNavigation
{
padding:0.5em 0.5em 0.5em 0.5em;
margin:0 0 0 0;
}

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

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

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

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

.blue
{
color:blue;
}

.red
{
color:red;
}

.green
{
color:green;
}

.gray
{
color:gray;
}

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:1em;
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:0.90em;
line-height: 150%;
}


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

textarea{
max-width:95%;
font-size:1.2em;
}

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

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

/* auskommentiert
pre.dos, pre.dos3, pre.dos4, pre.dos5, pre.dos6, pre.dos7, pre.dos8, pre.dos9{
 padding:5px;
 margin-left:3em;
 font-family:"Lucida Console","Courier New",courier,FreeMono,monospace;
 color:white;
 background-color:black;
 border:ridge 6px #8F8F8F;
 font-size:0.8em;
}

pre.dos3, pre.dos { max-width:30%; }
pre.dos4 { max-width:40%; }
pre.dos5 { max-width:50%; }
pre.dos6 { max-width:60%; }
pre.dos7 { max-width:70%; }
pre.dos8 { max-width:80%; }
pre.dos9 { max-width:90%; }
pre.dos1 { max-width:100%; }
*/

pre.dos3, pre.dos, pre.dos4, pre.dos5, pre.dos6, pre.dos7, pre.dos8, pre.dos9{
 max-width:80%;
 font-size:small;
}


textarea.dos
{
 font-family:"Lucida Console","Courier New",courier,FreeMono,monospace;   /* FreeMono for Linux */
 color:white;
 background-color:black;
 border:ridge 6px #8F8F8F;
 font-size:10px;
}


span.eyecatch, span.highlight{
 background-color:yellow;
 /*font-style:italic;*/
}

span.eyecatchCode{
 font-family:"Lucida Console","Courier New",courier,FreeMono,monospace;   /* FreeMono for Linux */
 background-color:yellow;
 /*font-size:1.3em;*/
 padding:2px;
}

span.eyecatchCodeBig, span.bigbraces ,span.bb{
 font-family:"Lucida Console","Courier New",courier,FreeMono,monospace;   /* FreeMono for Linux */
 background-color:yellow;
 font-size:1.2em;
 font-weight:bold;
 padding:3px;
}

span.eyecatchErr{
 color:red;
 /*background-color:#FFB2E6; pink*/
 /*font-style:italic;*/
}

span.big{
 font-size:1.5em;
}

blockquote.box{
 border-style:dotted;
 padding: 10px 10px 10px 10px;
}

.border{
 border-style: dotted;
 padding: 10px 10px 10px 10px;
 border-color:green;
}

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