/*DEFAULTS*/

/*EFFECTS EVERYTHING*/

* {
  padding: 0px;
  margin: 0px;
  line-height: 1.5;
  box-sizing: border-box; 
}

.oldlineht {line-height: 1.25;}/*to fix styling broken by changing lineheight to 1.5 kinda late in the game*/

/*THIS ZEROS OUT BROWSER DEFAULTS SO PAGE WILL LOOK THE SAME ON ALL BROWSERS*/

html, body {
  margin: 0px;
  padding: 0px;
}

html {
  overflow-y: scroll;
}

body {
     font-family: Microsoft JhengHei,Microsoft Sans Serif,Arial,sans-serif;/*web-safe font stack matched to Arial's length and line spacing*/
     font-size: 100%;
     text-align: center; /*DON'T CHANGE THIS!!! Combined with #layout below it makes the page centered in screen 
       but text is left-aligned by default*/
     color: #000000;
     font-weight: normal;
     background-color: transparent;
}

#layout{
   max-width: 770px; /*changed from 750 to 770px 2017-07-19 so page will be wider than menustrip; changed to MAX-width for responsiveness 7/21**/
   display: block;
   margin-left: auto;
   margin-right: auto;
   text-align: left; /*if something won't center using 'margin: 0 auto;' it's often bec. of this so change elements to 'text-align: center;' as needed*/
   margin-bottom: 20px;
}

/*this section breaks the top menustrip (dropdown menu) but is needed for the bottom menustrip (?still needed?)*/
/*these defaults have to be overridden on dropdown css page*/

ul,li,a {
  text-decoration: none;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

li {float: left;} /* NEVER DO THIS! */

/*************************/

p {font-size: 1.2em; margin: 20px 40px 20px 40px;}

.fine-print {font-size: .85em;}

h1 {font-size: 1.75em; line-height: 1.4em; text-align: center;}

h2 {font-size: 2em; text-shadow:5px 5px 40px purple; padding: 10px;}

h3{font-size: 1.5em; text-shadow:5px 5px 40px purple; margin-left: 0; margin-bottom: 10px; text-align: center;}

h4 {font-size: 1.2em;}

h5{font-size: 1.7em; color: #DDCCBA; text-shadow:0 0 1px black;}

h6 {font-size: .85em;}

/*DEFAULT TABLE (not table of contents which is a UL)*/

#t01 {color: black; font-family: Calibri; max-width: 100%;}

th {
    background-color: gray; 
    color: #DDCCBA; 
    font-weight: bold; 
    width: 14.3%;
}

td, th {padding: 10px; border: 2px solid gray;}

table#t01 tr:nth-child(even) {background-color: #DDCCBA;}

table#t01 tr:nth-child(odd) {background-color: #A49180;}

table {
    border: 1px solid black; 
    border-spacing: 0; /*border-spacing > 0 ignored if borders are collapsed see below*/
    background-color: rgb(5, 23, 91); 
    background-color: rgba(5, 23, 91, 0.3);
} 
    
table, th, td {border-collapse: collapse;}

/*end of default table style*/

/**MEDIA QUERIES MOVED HERE FROM DROPDOWN.CSS 2017-10-21**/



/*******RESPONSIVE SWITCHEROO AND SMALL SCREEN STUFF************/


option.pad {padding: 3px; font-size: 1em; margin-left: 3px; margin-bottom: 5px;}
select option {color: blue;}

.biggle {display: block;}
.widdle {display: none;}
#cloaker {display: block;}
#tutorzone {display: block;}

@media screen and (max-width: 765px) {
    .biggle {display: none;}
    .widdle {display: block;}
    #cloaker {display: none;}
    #tutorzone {display: none;}/*for milestone chapters and contents.html, blank space at top of page*/
    body {font-size: .75em;}
}

select:required:invalid {
  color: #999;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: blue;
}

.prevnextleft {padding: 0 .5em; margin-right: 15px;}
.prevnextright {padding: 0 .5em; margin-left: 15px;}
.prevnextbackdrop {padding-top: .5em; text-align: center;}
.selectspace {padding-bottom: .75em; text-align: center;}
.selecthead {margin: 0; padding: .5em 0; font-weight: bold; text-align: center;}

/***************no background pic small screen*******************/

@media screen and (max-width: 500px) {
    #bbkcss, #mppcss, #fdlcss, #tbdcss, #flmcss, #gpxcss, #hkycss, #kggcss, #po3css, #rundick, #asphalt {background: #DDCCBA;} 
    .titlearea000 {height: 0;}
    .disappear-smallscreen {display: none;}    
}