body{ font: 13px/17px Verdana, Tahoma, Arial, sans-serif; margin: 0; padding: 0; }

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

h1{ color: #003399; font: 22px Verdana, sans-serif; margin: 6px 0 8px 0;}
h2{ color: #993300; font: 200 18px "Comic Sans MS", Verdana, sans-serif;    margin: 35px 0 4px 0;  }
h2:hover { background-color: Aqua; }
h3{ color: #6600cc;  font: 300 16px Verdana, sans-serif;  margin: 14px 0 8px 0;  }
h4{ font-size: 14px; color: #330033; }
p { font-size: 13px;  margin: 15px 0 18px 0;  line-height: 18px;  }

ul { font-size: 13px; color: #0000aa; margin-top: -3px; }
li { font-size: 13px; line-height: 19px; list-style-type: disc; }

.bigul ul { font-size: 15px; }
.bigul li { font-size: 15px; line-height: 19px; list-style-type: disc; margin: 14px 0px 0px 6px; padding: 2px 2px 2px 6px; }
.bigul li:hover { background-color: #FAFAD2; }

td { font-size: 13px; line-height: 17px; }

.def { background: #F0FFF0; border: 1px solid #FFC070; padding: 0px 15px 0px 15px;  margin: 0 40px 0 40px;  }
.dotpoint { background-image: url(images/style/dotpoint.gif);  background-repeat: no-repeat;  background-position: 18px 3px; color: #6600cc; padding-left: 40px; font: normal 15px Verdana, Georgia, helvetica, serif;  margin: 30px 0px 25px 0;  }  

.center80 { margin: 0 40px 10px 40px;  background: #FFF8DC;  padding: 5px 8px 5px 8px;      }
.center80 p { 	margin: 10px 0px 8px 0px; 	}

.indent50px { margin-left: 50px; }


 /* Footer */
.footLeft { display:block; float:left; width:105px; height:50px; background: url("images/style/footer.jpg") no-repeat 0 0; }
.footFriend a { display:block; float:left; width:152px; height:50px; background: url("images/style/footer.jpg") no-repeat -105px 0; }
.footFriend a:hover { background-position: -105px -50px; }
.footFave a { display:block; float:left; width:188px; height:50px; background: url("images/style/footer.jpg") no-repeat -257px 0; }
.footFave a:hover { background-position: -257px -50px; }
.footLink a { display:block; float:left; width:205px; height:50px; background: url("images/style/footer.jpg") no-repeat -445px 0; }
.footLink a:hover { background-position: -445px -50px; }


/* General */
.tiny { color: #000000; font: 10px Verdana, Georgia, helvetica, "Times New Roman", serif; }
.larger { color: #000088; font: 300 16px/21px Verdana, Georgia, helvetica, "Times New Roman", serif; }
.large { color: #880000; font: 400 17px/27px Verdana, Georgia, helvetica, "Times New Roman", serif; }
.largest { color: Blue; font: bold 21px/25px Verdana, sans-serif; }
.huge { font: bold 30px/40px Verdana, Tahoma, Arial, sans-serif; }
.times { font: bold 150% "Times New Roman", serif;   }
.hi { background-color: Yellow; border: 2px solid Yellow; }

.MenuTop { color: Black; margin: 12px 0px 0px 0px; font: bold 14px Verdana, Georgia, helvetica, serif;  text-align: center;  }
.Menu { font-size: 12px; margin: 2px 0px 0px 9px; text-indent: -5px; }

.hide { color: #FFF8DC; background-color: #FFF8DC;  border: 1px solid #FFD700; padding: 3px 15px 3px 15px; }
.hide:hover { color: #000000; background-color: #FFFFEE; border: 1px solid #FFF000; }

.clear table { border-collapse: collapse; }
.clear th { padding: 2px; font-size: 15px; line-height: 20px; font-weight: bold; text-align: left; }
.clear td { padding: 2px; font-size: 15px; line-height: 20px; }

.simple table { border-collapse: collapse; background: #e8e8FF; }
.simple th { border: solid 2px white; padding: 3px; background: #99bbee; }
.simple td { border: solid 2px white; padding: 3px; }

.beach table { border-collapse: collapse; background: #F0F0C0; }
.beach th { border: solid 2px white; padding: 3px; background: #99bbee; font: 15px "Comic Sans MS", sans-serif; }
.beach td { border: solid 2px white; padding: 3px; font-size: 13px; }

.formal table { border-collapse: collapse; background: #F0FFF0; }
.formal th { border: 1px solid #FFC070; padding: 9px; font-size: 15px; color: #003399; }
.formal td { border: 1px solid #FFC070; padding: 9px; font-size: 13px; }


img.in { vertical-align: middle; }

/* definitions */
.outdent { text-indent: -10px; margin-left: 10px; margin-bottom: 8px; }

/* sidebar */
.sidebar { border: 1px solid #aaaaaa; font-size: 90%; float: right; margin: 5px 0 5px 10px; clear: left; width: 30%; background: #f9f9f9; padding: 5px; }
.sidebar h3 { background: #ffffaa; padding: 3px 5px 3px 5px; font-size: 100%;  margin: 0 0 -8px 0;  text-align: center;   }
.sidebar p, .sidebar td { font-size: 90%; padding: 0 5px 0 5px; }

/* examples */
.example {   margin: 10px 0 15px 50px;  background: #d8d8ff;  padding: 3px;  }
.example p, .example ul, .example .head, .example h3, .example br, .example2 {   margin: -8px 0 0 -8px; background: #f0f0ff; }
.example p { padding: 4px 4px 12px 15px; }
.example ul { padding: 4px 4px 12px 45px; }
.example .head, .example h3 { padding: 4px 4px 18px 15px; font-weight: bolder; font-size: larger; }
.example br, .example2 { padding: 4px 4px 8px 15px; }
.example .indent50px { margin: -8px 0 0 -8px; background: #f0f0ff; padding: 4px 4px 18px 50px; }

/* so */
.so, p .so { background: url("images/style/so.gif") no-repeat 70px 4px;  padding: 0px 0px 7px 120px;  color: #000088; font: 300 16px/21px Verdana, Georgia, helvetica, serif;  }
.example .so { background-color: #f0f0ff; margin: -6px 0 6px -8px; padding: 0px 0px 10px 120px; }

/* forms */
input, select, textarea { border: thin solid #B0B0B0; }
input:focus, select:focus, textarea:focus { border: thin solid #000; }

/* worksheets */
.smallitalic { font: 12px "Times New Roman", Times, serif; }
.largemono { font: 18px/22px "Courier New", Courier, monospace; }
.time { color: #000000; display: inline; font: bold 16px Verdana, serif; }
.number { color: #000000; display: inline; font: normal 19px Arial, Verdana, serif; }

/* representing fractions */
.frac sup, .frac sub { vertical-align: baseline; position: relative; font: 85% Verdana, Georgia, "Courier New", serif; }
.frac sup { top: -0.5em; left: 0.20em; }
.frac sub { top: 0.15em; left: -0.15em; }

.frac-large sup, .frac-large sub { vertical-align: baseline; position: relative; font: bold 125% Verdana, Georgia, "Courier New", serif; }
.frac-large sup { top: -0.4em; left: 0.20em; }
.frac-large sub { top: 0.20em; left: -0.05em; }

/* makes a <td></td> into a black line, useful for fractions */
.black, .black td, td .black { padding: 0px; height: 1px; background: Black; }

/* create worksheets highlighting */
.graphic:hover img{ opacity:1; filter:alpha(opacity=100) }
a.graphic img { border: 0px none; }
/* 70% opacity when hovering */
.graphic img, .graphic img, .hover70:hover img { opacity:0.7; filter:alpha(opacity=70) }

/* nice buttons */
.button { border: 1px solid white; text-align: center; display: block; padding: 4px; }
.button:hover { border: 1px solid silver; }

/* related pages */
.rel-title { font-size: 15px; font-weight: bold; background: #FFDEFF; }
.related { font-weight: bold; font-size: 15px; margin-bottom: 1px; margin-top: 10px; border-top: 4px solid #ffddff; clear: none; padding-top: 20px; padding-bottom: 9px; border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #ffddff; background: url(images/related-pages.jpg) no-repeat; }
.related a { display: list-item; margin-left: 220px; font-size: 13px; font-weight: normal; margin-top: 2px; list-style-type: circle; background: White; }

/* questions */
.questions { font-size: 16px; background: #DFFFE1 url(images/style/questions.gif) no-repeat;  width: 460px;  padding: 10px 4px 11px 128px;  border: 1px solid #CD853F;  margin: 35px 35px 30px 35px;  }
.questions a { font-size: 16px; line-height: 26px; font-weight: normal; padding: 0; }

/* words */
.words { background: Aqua url(images/style/words.gif) no-repeat 1px;  width: 500px;  padding: 10px 4px 14px 70px;    margin: 15px 40px 25px 40px;       }
.words p { 	margin: 10px 0px 5px 0px; 	}

/* ads display: none/inline; */
#hideads1 { display: none; }    
#showads1 { display: none; }



/* main layout */

#header { width: 780px; height: 100px; }
#left { position:absolute; left: 0px; top: 100px; width: 116px; padding: 5px 2px 0px 2px; } 
#middle { position:absolute; left: 120px; top: 100px; max-width: 660px; background: #ffffff; }
#midfull { max-width: 780px; background: #ffffff; }
#topads { height: 60px; }
#content { padding: 20px 5px 0 5px; text-align: left; }
#footer{ max-width: 550px; height: 50px; margin-left: auto; margin-right: auto;}
#right { position:absolute; left: 780px; top: 0px; }

@media screen and (max-width: 480px) {
#left { display: none; }
#middle { left: 0px; }
#content { padding: 0; }
}