@charset "utf-8";
/* CSS Document */

/*GLOBAL*/
body {
background-color:#f7f7f7;	
  font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
	margin: 0;
    padding: 0;
}
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
	font-size: 32px;
	line-height: 1em;
	}
h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
	font-size: 24px;
	}
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
	font-size: 16px;
	}

html, body {
margin:0px;
height: 100%;

}

#header, #footer {
      		min-width:100%;
			}


.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -63px;
}
.footer, .push {
height: 63px;
}
a:link {
color: #f5f5f5;
text-decoration: none;
}
a:visited {
color: #f5f5f5;
text-decoration: none;
}
a:hover {
color: #ffffff;
}
 /*styles For pages --------------------------------------------------------*/
  .style5 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
 	color: #000000;
	font-size:13px;
	font-weight:bold;
}
 .style22 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
 	color: #ffffff;
	font-size:24px;
}
 .style23 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
 	color: #ffffff;
	font-size:30px;
	font-weight:bold;
}
.style10 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }
.style25 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; color: #09c; font-weight:bold; }
.style30 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #FFFFFF; }
.style31 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #FFFFFF; }
.style32 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #FFFFFF; }
.style33 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; }
.style34 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; }
.style35 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #FF0000; }
.style40 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #444444; }
.style45 {font-family: "Times New Roman", Times, serif; font-size: 20px;}
.style50 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #0099cc; }
.pageTitle {font-size: 40px; color: #FFFFFF; font-weight:bold;}
 
  /* ------------BUTTONS---------------------------------------------------------------------------- */	 
button.css3button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	padding: 5px 20px;
	 background: #65a9d7;
    outline: none;
   background: -ms-linear-gradient(top, #42aaff, #003366);
   background: -o-linear-gradient(top, #42aaff, #003366);
		background: -moz-linear-gradient(
		top,
		#42aaff 0%,
		#003366);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#42aaff),
		to(#003366));
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 2px solid #003366;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.7),
		0px 1px 0px rgba(255,255,255,0.3);
}
  button.css3button:hover {
     border: 2px solid #002244;
	 cursor:pointer;
	 color: #eeeeee;
    }
.blue2022 {
		font-size: 16px;
	color: #ffffff;
	padding: 5px 10px;
	 background: #17b;
	 width:256px;
    outline: none;
	border:0px;
	transition: 0.3s;
		
}
.blue2022:hover {
	 cursor:pointer;
	 background: #28c;	
	border:0px;		
}
button.css3buttonSml {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	padding: 3px 7px;
	width:80%;
	max-width: 200px;
	 background: #65a9d7;
    outline: none;
   background: -ms-linear-gradient(top, #42aaff, #003366);
   background: -o-linear-gradient(top, #42aaff, #003366);
		background: -moz-linear-gradient(
		top,
		#42aaff 0%,
		#003366);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#42aaff),
		to(#003366));
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	border-radius: 1px;
	border: 1px solid #003366;
	margin:3px;
	}
  button.css3buttonSml:hover {
	 cursor:pointer;
	 background: #28c;	
    }
button.more {
	display:inline-block;
	font-size: 13px;
	color: #ffffff;
	padding: 8px 10px;
	 background: #2B62A3;
	 border-radius: 3px;
	border: 1px solid #000;
	margin:6px;
	min-width:120px;
	font-weight:bold;
 }
 button.more:hover {
    background-color: #17b;
	 cursor:pointer; 
}
		  
  /* BOXES FOE LINKS AND MENU floating box for the menu icon, box 2 for front page links to Gradegorilla + home  ----------------------------------------------------------------------- */
	.floating-box {
    position: fixed;
	top:0px;
	right:0px;
     padding: 38px 15px;
	 border:0px;
	z-index:2;
	background-color:#2B62A3;
}
 .floating-box:hover {
    background-color: #17b;
}
.floating-box2 {
    display: inline-block;
       color: white;
	   height:20px;
    text-decoration: none; 
   float:right;
       text-align: center;
	   font-size: 13px;
	  	  padding: 40px 10px;
		  min-width: 40px;
	z-index:2;
}
 .floating-box2:hover {
    background-color: #17b;
}
	
.floating-box-Acc {
    display: none;
       color: white;
	   font-weight: bold;
	   height:20px;
    text-decoration: none;
	 border-left:1px;
	 border-color:#666;
   float:right;
       text-align: center;
	   font-size: 12px;
	  	  padding: 40px 10px;
		  min-width: 40px;
	z-index:2;
}
 .floating-box-Acc:hover {
    background-color: #17b;
}
	
/* for question answers======================= */
.targetDiv { background-color:#eee; display: none; padding: 10px 10px 10px 50px;}
/* for examples======================= */
.exampleDiv{ background-color:#eee;  padding: 10px 10px 10px 50px;}

/* ----------new box format----------------------------------------------- */	  

	div.blockWhite {
	display: block;
	position: relative;
		margin: auto;
	width:88%;
	max-width: 1000px;
	background-color:#fff;
	padding:3%;
	line-height: 1.7em;
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
	}
	.formulaBox {
    margin: auto;
	background-color:#dfd;
    width: 95%;
	max-width:500px;
    border: 2px solid #000;
    padding: 10px;
	font-size:1em;
} 
	.formulaBox2 {
    margin: auto;
	background-color:#adf;
    width: 95%;
	max-width:500px;
    border: 2px solid #000;
    padding: 10px;
	font-size:1em;
} 
@media screen and (max-width: 700px){
	div.blockWhite {
	width:94%;
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2);	
	}
}
.GGlinkBox {
width: 96%;
text-align: center;
background-color: #BBD8F3;
padding: 2%;
border:0.5px solid black;	
}
  /* --------------------------------------------------------------------------- */	
  
  .header2
   {
	   width:100%;
	   padding:10px;
	 	   border:none;
	   		 margin-left: auto;
    margin-right: auto;
	
	
 	  }
.header1
   {
	   width:100%;
	   padding:10px;
	 	   border:none;
	   		 margin-left: auto;
    margin-right: auto;
	background-color:#3355aa;
	opacity:0.80;
	 filter:alpha(opacity=80); /* For IE8 and earlier */
 	  }	 
	  
/* For BANNER HEADINGS */	  
	  
div#parent { position:relative; width:100%; height:100px; vertical-align:bottom; background-color:#2B62A3; }
div#titleBlock{
	position: absolute;
	width: 100%;
	height: 100px;
	z-index: -1;
	background-color: #2B62A3;
	left: -2px;
}
div#gglogo { z-index:2;  padding:10px; border:none; float:left; display: inline-block; }
div#gglogo2 { z-index:2;  padding:10px; border:none; float:left; display: none; }		   
div#title {  z-index:2;  padding:10px; border:none; text-align:center; margin-left:5%; width:30%; display: inline-block;}	
div#links2 {   right: 0px; z-index:2; border:none;  color: #FFFFFF;  float:right; display: inline-block;}	
@media screen and (min-width: 1100px){
	div#gglogo { z-index:2;  padding:10px; border:none; float:left; display: inline-block; width:31%; }
div#title {  z-index:2;  padding:10px; border:none; text-align:center; margin-left:0%; width:34%; display: inline-block;}		
}
@media screen and (max-width: 850px){
div#gglogo {
display: none;
}
div#gglogo2 {
display: inline-block;
}
div#title {
width:40%;	
margin-left:15%;
}
h1 {
font-size: 24px;
	}
h2 {
font-size: 20px;
	}
.style22 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
 	color: #ffffff;
	font-size:16px;
}
.SmallText {font-size:13px}
}
@media screen and (max-width: 550px){
div#title {
	margin-left:5%;
}
.SmallText {font-size:10px}
}
/* Global page changes - menu, triple */	
.triple{
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.syllabus  {
border: 2px solid black;
border-collapse:collapse;
}
.syllabus td, th {
	border-right:1px solid black;
}
.syllabus  th {
	border-bottom:1px solid black;
}
.row{
	display: table;
		margin: auto;
	width:100%;
		}

 .column {
	 display: table-cell;
   padding: 1%;
     width:48%;
vertical-align: top;
	}
/* ------------MENU and row-column model for resizing ------------------------------ */	

.box{
  position:fixed;
    top:40px;
    left:2%;
    right:2%;
    z-index:101;
	display: none;
}
.box2{ 
background-color:#fff;
border:1px solid black;	
margin:auto;
display:block;
width:100%;
 max-width:500px; 
vertical-align:top;
color:black;
box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.4);
}	

.menuTopBar {
width:100%;
padding: 0px 0px 0px 4px;
background-color:#fff;
	 color: black;	
border-bottom: 1px solid #555;	
}
  a.menuLinkTop {
    display: inline-block;
    text-align: center;
	width:100%;
padding:20px 0px;
	 color: black; 
	 transition:0.3s; 
   }
 a.menuLinkTop:hover {
    background-color: #17b;
	color:white; 
	cursor:pointer;
}
  .menuLink {
    display: inline-block;
	width:100%;
padding:4px 0px;
	 color: black; 
	 transition:0.2s;
	 font-size:12px;
   }
 .menuLink:hover {
    background-color: #17b;
	color:white; 
	cursor:pointer;
}

.menuChapter {
font-size:14px;
display: inline-block;
 font-weight:bold;
padding:9px 0px 9px 3px;
box-sizing: border-box;		
width:100%;
border-right:1px solid #555;
	
}
 .menuChapter:hover {
cursor:pointer;
background-color: #ccc;	 
}
.menuLeftBar {display:inline-block; width:50%; height:360px; vertical-align:top; background-color:#fff; box-sizing: border-box; }
.menuRightBar{display:inline-block; width:50%; height:360px; vertical-align:top; background-color:#eee; box-sizing: border-box;	}
.menuRightTable {width:100%; padding:0px}
.menuRightTable a{width:100%; padding:5px 0px 5px 3px; color:black}
.menuRightTable td{width:100%; padding:1px 0px}

.overlay{
	background: rgba(110, 110, 110, 0.7);
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
}



a.boxclose{
	display: inline-block;
	width:40px;     
}
a.boxclose:hover{
	cursor:pointer;    
}
@media (max-width:800px) {
    .column {
        display: block;
        width: 98%;
		padding: 1%;
	      }
	.menuChapter {font-size:13px;} 
	.box { position:absolute;}
	.box2{ 
width:96%;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.4);
}	
} 
/* ------------youtube video framing ------------------------------ */	
.videoOuter {width: 100%; max-width:560px; display:block; margin:auto}
.video-container iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;}
.video-container {position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden;}
 .pracBox {
    margin: auto;
	background-color:#e0edff;
    width: 95%;
	padding: 10px;
}  
 
.tierbox{
  position:fixed;
    top:40px;
    left:2%;
    right:2%;
    z-index:101;
	display: none;

}
.tierInner{ 
background-color:#fff;
border:1px solid black;	
margin:auto;
display:block;
width:100%;
 max-width:500px; 
vertical-align:top;
color:black;
box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.4);
}	


@media (max-width:800px) {
.tierbox { position:absolute;}		
}
	a.blue {color:blue;}

@media screen and (max-width: 500px){
	.xtraText{
		display: none;
	}	
	}