@font-face {
  font-family: qarmic;
  src: 
	url('images/style/font-qarmic.eot?') format('eot'), 
	url('images/style/font-qarmic.woff') format('woff'), 
	url('images/style/font-qarmic.ttf') format('truetype');
}
@font-face {
  font-family: champ;
  src: 
	url('images/style/font-champ-bold.ttf') format('truetype');
}
/* d2gbom735ivs5c.cloudfront.net  or  www.mi2f.com */           

@media all {

#links ul { padding: 0; margin: 0; }
#links li { margin:0 0 0 20px; padding: 7px 0px 7px 0px; list-style-type: none; }

html { position:relative; } /* for linear-gradient 100% height */
body { font: 15px/23px Verdana, Arial, Tahoma, sans-serif; margin: 0; padding: 0; }

p { font-size: 15px;  line-height: 23px; margin: 16px 0 25px 0; }

p a { padding: 3px; border: solid 2px #cceeff; border-radius: 12px; background-color:rgba(180,230,255,0.2); }   /* */
p a:hover { border: solid 2px #eeeeaa; background-color:rgba(250,250,200,0.4); }  

h1 { color: #003399; font-size: 23px; line-height: 30px; font-weight: normal; margin: 9px 0 20px 0; }
h2 { color: red; font: normal 23px qarmic, Verdana; margin: 60px 0 12px 0; }    
#adv h2 { color: red; font: normal 25px champ, Verdana; margin: 60px 0 12px 0; }    
h2:hover { background-color: #bbeeff; }
h3 { color: #6600cc; font-size: 18px; line-height: 27px; font-weight: normal; margin: 22px 0 10px 0; }
h4 { color: #a06000; font-size: 19px; font-weight: normal; font-variant:small-caps; margin: 22px 0 10px 0; }


ul, ol { font-size: 15px;  list-style-position: outside; display: table; margin: -5px 0 0 20px;  }
li { font-size: 15px; line-height: 24px; list-style-type: disc; padding: 0 0 5px 0px; color: #000088; }
li:hover { color: #0000ff; }

.links li { margin: auto; padding: 5px 0px 5px 2px; list-style-type: circle; color:#66ccff; }
.links li:hover { list-style-type: disc; color:#0000ff; }    

.vlist p { margin: 0 0 0 40px; padding: 4px; color:#66ccff; }
.vlist p:before { content: '\2022 \0020'; }
.vlist p:hover { color:#0000ff; }    
.vlist p a { border: solid 2px white; padding: 3px; background-color: transparent; }   
.vlist p a:hover { padding: 3px; border: solid 2px #eeeeaa; background-color:rgba(250,250,200,0.4); }   

#midul ul { margin-left: 50px; display: inline-block; list-style-position:outside; padding: 15px 40px 15px 50px; 
border: 2px solid #eeeeaa;
/*background-color: #ffffff; border: solid 1px blue;  */
background: linear-gradient(to top left, #ffffff, #ffffcc); 
border-radius: 20px; 
} 
#midul li { text-indent: 0px; }


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

td { font-size: 15px; line-height: 22px; }

.def { background: #F0FFF0; border: 1px solid #FFC070; padding: 0px 18px 0px 18px;  margin: 0 40px 0 40px; border-radius: 10px; }
.fun { background: #FFFFDD; border: 4px dotted #D9CC8C; padding: 0px 18px 0px 18px;  margin: 0 40px 0 40px; border-radius: 30px; }
.dotpoint { background-image: url(images/style/dotpoint.gif);  background-repeat: no-repeat;  background-position: 18px 3px; color: #6600cc; padding-left: 40px; margin: 30px 0px 20px 0; }  
.dotpoint, .dotpoint p { font-size: 17px; }  

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

.indent50px { margin-left: 50px; }

.hey { background: cornsilk;  padding: 0 6px 0 10px; margin: 10px 0 10px 0; border: 2px solid gold; border-radius: 10px; overflow:hidden; }

 /* Footer */      
.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-size: 10px; }
.larger { color: #000088; font-size: 17px; }
.large { color: #a06000; font-size: 19px; }
.largemono { font: 19px/26px "Courier New", Courier, monospace; }
.largest { color: Blue; font-size: 24px; font-weight: bold; }
.huge { font-size: 35px; font-weight: bold; }
.times { font: bold 130% "Times New Roman", serif; }
.uni { font: 120% "Lucida Sans Unicode", "Lucida Grande", sans-serif; } 
.hi { background-color: Yellow; border: 2px solid Yellow; }

.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: 22px; font-weight: bold; text-align: left; }
.clear td { padding: 2px; font-size: 15px; line-height: 22px; }

.flash { border: solid 2px #cceeff; padding: 3px 3px 0 3px; display: table; margin: 0 auto; border-radius: 12px; text-align: center; }
/* .noborder { border: none; } */

.simple { overflow:auto; }
.simple table { border-collapse: collapse; background: #cceeFF; }
.simple th, .simple td { border: solid 2px white; padding: 5px; }
.simple th { background: #99bbee; }

.beach { overflow:auto; }
.beach table { border-collapse: collapse; background: #F0F0C0; }
.beach th { border: solid 2px white; padding: 4px; background: #99bbee; font: 17px champ, Verdana, sans-serif; }
.beach td { border: solid 2px white; padding: 4px; font-size: 15px; }

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

.boxgen { display: inline-block; vertical-align: top; margin: 0 10px 15px 10px; }
.boxleft { display: inline-block; vertical-align: top; margin: 0 20px 15px 0; float:left; }
.boxright { display: inline-block; vertical-align: top; margin: 0 0 15px 20px; float:right; }

img.in { vertical-align: middle; border:0; }

/* 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  */
.examplex { margin: 20px 0 30px 50px; border: 0px solid #e0f0ff; border-left-width: 10px; border-right-width: 5px; background: #e0f0ff; padding: 13px; border-radius: 10px; box-shadow: 5px 5px 1px #d0d0ff; }
.example { margin: 20px 0 30px 50px; background: #e0f0ff; padding: 5px 10px 1px 15px; border-radius: 10px; box-shadow: 5px 5px 1px #d0d0ff; overflow:hidden; }
.example h3 {margin-top: 5px}
 
/* so  */
.so ul { margin-top: 6px; }
li .so { padding-left: 120px; }
.so { background: url(images/style/so.gif) no-repeat 70px 30%; padding: 0px 0px 10px 120px; color: #000088; font-size: 18px; }
/*.example .so { background-color: #ddeeff; margin: -6px 0 6px -8px; }  */

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

/* representing fractions */
.frac, .frac sup, .frac sub { vertical-align: baseline; position: relative; font-size: 13px; }
.frac sup { top: -6px; left: 0px; }
.frac sub { top: 5px; left: -1px; }

.frac-large, .frac-large sup, .frac-large sub { vertical-align: baseline; position: relative; font-size: 18px; font-weight: bold; }
.frac-large sup { top: -5px; left: 2px; }
.frac-large sub { top: 7px; left: -3px; }

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

/* worksheets addition.php etc */
.graphic img { border: 1px solid white; }
.graphic:hover img{ border: 1px solid blue; }

/* 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: 17px; font-weight: bold; background: #FFDEFF; }
.related { font-weight: bold; font-size: 17px; background: url(images/style/related-pages.jpg) no-repeat; 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; }
.related a { display: list-item; margin-left: 220px; font-size: 15px; font-weight: normal; margin-top: 2px; list-style-type: circle; }

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

/* activity */
.activity { font-size: 17px; background: #e2e2ff url(images/style/activity-div.gif) no-repeat;  padding: 10px 4px 11px 128px;  border: 1px solid #aa44aa; border-radius: 10px; margin: 35px 35px 30px 35px; }
.activity a { font-size: 17px; line-height: 26px; font-weight: normal; padding: 0; }

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

.you { background: #ffffee url(images/style/smile.gif) no-repeat 1px;  padding: 10px 4px 14px 70px; margin: 15px 40px 25px 40px; border-radius: 10px; }
.you p { margin: 10px 0px 5px 0px; color: #000088; font-size: 16px; }

/* Menu */
.menuLt { text-decoration: none; color: #888888; background: transparent url("images/style/arrow-tall-left.gif") no-repeat left center;
 height:60px; width:110px; vertical-align: middle; display: table-cell; padding: 0 0 0 25px; }
.menuRt { text-decoration: none; color: #888888; background: transparent url("images/style/arrow-tall-right.gif") no-repeat right center;
 height:60px; width:110px; vertical-align: middle; display: table-cell; padding: 0 25px 0 0; }

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

/* html5 instead of align element */
.centerfull {margin-right:auto; margin-left:auto; max-width:760px; text-align:center; }
.center {text-align: center; }
table.center {margin-right:auto; margin-left:auto; text-align: inherit;}
.left {left: 0; text-align:left}
.right {right: 0; text-align:right}

/* main layout background-color: #ccccff; */
#headerx { height: 100px; background: transparent url(images/style/header.png) no-repeat; }
#header  { height: 100px; background: transparent url(images/style/header.png) no-repeat; cursor: pointer; }
#adv #header, #header-adv { height: 100px; background: transparent url(images/style/header-adv.png) no-repeat; cursor: pointer; }



	/*   */ 
#menu { clear:both; }
#menu ul { padding: 0; margin: 0; display:inline; font-size: 0; }   
#menu li { position: relative; display: inline-block; background-color: #bbffbb; 
					padding: 6px 6px 6px 6px; color: #000000; border: 1px solid white; margin: 0; font-size: 14px; }
#menu li:hover { background-color: #cceeff; }
#menu li a { text-decoration: none; color: #000000; }
#menu li ul { top: 27px; right: 0px; position: absolute; display: block; z-index: 1; }
#menu li li { display: block; }
#menu ul ul { display: none; }
#menu ul li:hover > ul { display: block;  }       
  

/* older pages to Apr 2013 */
                                        
#menu { font-size: 12px; }           
#menu a { font-size: 14px;  }       /*        background-color: #bbffbb;
#menu a:hover { background-color: #cceeff; }       */  




#midfull { max-width: 760px; /* border: 2px solid #666600; border-radius: 8px; padding: 4px; margin: 4px; background: #ffffff; */ }
#search { position:relative; top:64px; width: 380px;  float:right;} 
#searchBox { position:relative; top:57px; width: 380px; float:right; }
#searchFld { font-size: 18px; width:260px; padding: 4px;  border-radius: 5px;}
#searchBtn { font-size: 18px; font-weight: bold; color: #ffffff; background-color: #8888ff; border: 1px solid #666600; cursor: pointer; padding: 4px 12px 4px 12px; border-radius: 5px; }
#searchBtn:hover {background-color: #aaaaff; }
#linkto { position:relative; top:5px; left: 50%; background-color: white;}
/*#linkto { position:relative; width: 360px; top:5px; left: 350px; float:right; background-color:rgba(250,250,250,0.6); border: 2px solid white; }*/
#adhide { font: 10px Verdana, serif; width:100px; position:relative; top:45px; left: 430px; }
#adhid2 { font: 10px Verdana, serif; width:70px; position:relative; top:-30px; left: 760px; }
#content { padding: 20px 5px 0px 5px; text-align: left; }
#footer { max-width: 550px; height: 50px; margin-left: auto; margin-right: auto; }
#foot-menu { clear:both; }

#linktw, #linksu, #linkfb, #linkus { background: transparent url(images/style/links.gif) no-repeat; height: 32px; width:32px; margin-right: 3px;   text-indent:-9999px; display: block; float:left;  }
#linktw { background-position: 0px 0px; }
#linksu { background-position: -50px 0px; }
#linkfb { background-position: -100px 0px; }
#linkus { background-position: -150px 0px; }


.submitBtn { font-size: 16px; font-weight: bold; background-color: #F0F0C0; border: 2px solid #ff0000; cursor: pointer; }
.submitBtn:hover {background-color: #ccccff;}


/* table replacement */
.tbl { display: table; margin-right: auto; margin-left: auto; text-align: center; }
.tblrow { display: table-row; margin-right: auto; margin-left: auto; border: 1px solid white; }
.tblrow em { display: table-cell; text-align: right; padding: 0 20px 3px 0; font-style: normal; }
.tblrow strong, .tbleqn td { display: table-cell; text-align: center; padding: 1px 1px 3px 1px; color: #0000aa; font-size: 17px; font-weight: normal; }
.tbllhs { display: table-cell; text-align: right; padding: 0 5px 3px 0; }
.tbleql { display: table-cell; text-align: center; padding: 0 5px 3px 5px; }
.tblrhs { display: table-cell; text-align: left; padding: 0 0 3px 5px; }

/* in-line "table" fractions */
.intbl { display: inline-table; text-align: center; vertical-align: middle; border-collapse:collapse; margin: 0 2px 0 2px;}
.intbl em { display: table-row; text-align: center; border-bottom:solid black 1px; font-style: inherit; font-size: 92%; }
.intbl strong { display: table-row; text-align: center; font-weight: inherit; font-size: 92%; }



/* side images */
.column {	width: 50%; position: absolute; top: 0; }
.zneg { z-index: -1; height: 100%; }
/* #leftcol { margin-right: 380px; height: 700px; background: transparent url(images/style/bg.jpg) no-repeat right top; } */
/* #rightcol { margin-left: 380px; height: 700px; background: transparent url(images/style/bg.jpg) no-repeat; } */
#bodybg { background: linear-gradient(to right, rgba(130,220,255,1) 0%, rgba(130,220,255,0) 20%, rgba(130,220,255,0) 50%, rgba(130,220,255,0) 80%, rgba(130,220,255,1) 100%); }

#leftcol { margin-right: 380px; min-height: 100%; height: 100vh; background: linear-gradient(to right, rgba(130,220,255,1) 0%, rgba(130,220,255,0) 40%, rgba(130,220,255,0) 100%); }
#rightcol { margin-left: 380px; min-height: 100%; height: 100vh; background: linear-gradient(to left , rgba(130,220,255,1) 0%, rgba(130,220,255,0) 40%, rgba(130,220,255,0) 100%); }
/* 130,220,255 is #82dcff. #66ccff, #77ddff, #88ddff, #cceeff */


	.mathsisfunresp { width: 320px; height: 50px; }
	#topads { width: 320px; height: 50px; margin: 5px auto 15px auto;  }     /* margin: -10px auto 10px auto;*/
	#adend { height: 70px; }
	
	#whi {display: inherit;}
	#wlo {display: none;}
	
}
 
@media (min-width: 500px) { 
	.mathsisfunresp { width: 468px; height: 60px; } 
	#topads { width: 468px; height: 60px; margin: 0px auto 15px auto; }
	#adend { height: 80px; }

}
@media (min-width: 800px) { 
	.mathsisfunresp { width: 728px; height: 90px; } 
	#adend { height: 110px; }
}

@media (max-width: 960px) { 
	#adhid2 { top:0px; left: 680px; }	
#bodybg {background: none;}
}

@media (max-width: 760px) {
	/* at about 760px, the browser decides that SearchBox and linkto no longer fit on one line but two, so we move to a different layout */
	#adhid2 {display: none;}

	#leftcol {display: none;}
	#rightcol {display: none;}
	#linkto { position: absolute; left: 140px; top: 5px; }

}

@media (max-width: 690px) {   
	#whi {display: none;}
	#wlo {display: inherit;}
}

@media (max-width: 480px) {   
	#searchBox { width: 310px; top:66px; }
	#searchFld { width: 190px; }
  #linkto { position: absolute; left: 5px; top: 10px; }
	#header  { height: 100px; background: #ffffff; }

	.related { padding-top: 50px; }
	.related a { margin-left: 100px; }
	.example { margin: 20px 0 30px 20px;  }
	.def { padding: 0px 10px 0px 10px;  margin: 0 20px 0 20px; }
	.vlist p { margin: 0 0 0 10px; padding: 6px;}
	.so { padding-left: 80px; background-position: 30px 30%; }

	#footer { height: 126px; }
	.footFriend a { float:none; margin: 0 auto 0 auto; height:40px; }
	.footFave a { float:none; margin: 0 auto 0 auto; height:40px; }
	.footLink a { float:none; margin: 0 auto 0 auto; height:46px; }
	
	.center80 { margin: 10px 20px 10px 20px; }

	#content img { max-width: 460px;  height:auto; }
}
	
@media print {

  .noprint {display: none;}
  .related {display: none;}
  
  #header {display: none;}
  #header-adv {display: none;}
  
  #menu {display: none;}
  #menu-adv {display: none;}   

}