* {margin: 0; padding: 0}
html { font-size: 16px; -webkit-text-size-adjust: 16px; }
body {background: #fffef6; color: #666; font-size: 62.5%;}
h1 {font-family: verdana, sans-serif, sans-serif; font-size: 1.6em; font-weight: bold; color: #277bd1}
h2 {font-family: verdana, sans-serif, sans-serif; font-size: 1.4em; color: #277bd1}

p {font-family: verdana, sans-serif; font-size: 1.3em; line-height: 1.4; margin-top: 0px;  padding-bottom: 12px}

img {border: none}
#holder {width: 320px;  position: absolute; left: 50%; margin-left: -160px; margin-top: 5px; z-index: 1}
@media (min-width: 610px) and (max-width: 910px) {#holder {width: 600px;  position: absolute; left: 50%; margin-left: -300px; margin-top: 5px; z-index: 1}} 
@media (min-width: 910px) {#holder {width: 900px; position: absolute; left: 50%; margin-left: -450px; margin-top: 5px; z-index: 1}} 

#companylogo {
	position: absolute;
	left: 1%;
	top: -.1em;
	width: 40%;
	z-index: 3;
	visibility: hidden;
}
#companylogo img {width:126%; height: auto}
@media (min-width: 610px) and (max-width: 910px) {#companylogo img {width:90%; height: auto; visibility: visible;}}
@media (min-width: 910px) {#companylogo img {width:71%; height: auto; visibility: visible;}}

.text {padding-left: 10px; padding-right: 10px}

#prodlogo {
	position: absolute;
	left: 2%;
	top: -.2em;
	width: 342px;
}
@media (min-width: 610px) and (max-width: 910px) {#prodlogo {left:41%; top: .5em}}
@media (min-width: 910px) {#prodlogo {left:56%; top: 1em}}

#prodlogo img {width: 90%; height: auto}
@media (min-width: 610px) and (max-width: 910px) {#prodlogo img {width:100%; height: auto}}
@media (min-width: 910px) {#prodlogo img {width:110%; height: auto}}

#prodlogo2 {
	position: absolute;
	right: 20%;
	top: -.8em;
	width: 342px;
}
@media (min-width: 610px) and (max-width: 910px) {#prodlogo2 {left:41%; top: .5em}}
@media (min-width: 910px) {#prodlogo2 {left:56%; top: 1em}}

#prodlogo2 img {width: 95%; height: auto}
@media (min-width: 610px) and (max-width: 910px) {#prodlogo2 img {width:100%; height: auto}}
@media (min-width: 910px) {#prodlogo2 img {width:110%; height: auto}}

#prodlogo3 {
	position: absolute;
	right: 2%;
	top: -1em;
	width: 342px;
}
@media (min-width: 610px) and (max-width: 910px) {#prodlogo3 {left:41%; top: .5em}}
@media (min-width: 910px) {#prodlogo3 {left:56%; top: 1em}}

#prodlogo3 img {width: 100%; height: auto}
@media (min-width: 610px) and (max-width: 910px) {#prodlogo3 img {width:100%; height: auto}}
@media (min-width: 910px) {#prodlogo3 img {width:110%; height: auto}}

#prodlogo4 {
	position: absolute;
	right: 24%;
	top: 0em;
	width: 342px;
}
@media (min-width: 610px) and (max-width: 910px) {#prodlogo4 {left:41%; top: .5em}}
@media (min-width: 910px) {#prodlogo4 {left:56%; top: 1em}}

#prodlogo4 img {width: 85%; height: auto}
@media (min-width: 610px) and (max-width: 910px) {#prodlogo4 img {width:100%; height: auto}}
@media (min-width: 910px) {#prodlogo4 img {width:110%; height: auto}}

#homeimage {
	position: absolute;
	left: 1%;
	top: 15.1em;
	width: 26%;
}
@media (min-width: 610px) and (max-width: 910px) {#homeimage {left: 3%; top: 16.5em; width:24%; height: auto}}
@media (min-width: 910px) {#homeimage {left: 12%; top: 18em; width:18%; height: auto}}

#homeimage img {width: 100%}

#textholder {
	position: absolute;
	left: 32%;
	top: 14.5em;
	width: 60%;}
@media (min-width: 610px) and (max-width: 910px) {#textholder {top: 15em; width:55%; height: auto}}
@media (min-width: 910px) {#textholder {left: 35%; top: 16.5em; width:50%; height: auto}}
	
#maintext {width: 100%;
	background-color: #fff; 
	border: solid 1px #3da1ed;
	border-radius: 5px;
	padding: 8px;
	padding-top: 6px;
	padding-bottom: 0px;
	height: auto;
	box-shadow: -3px 6px 8px #dfdfdf;	
}
@media (min-width: 610px) and (max-width: 910px) {#maintext {width:100%; height: auto}}
@media (min-width: 910px) {#maintext {width:100%; height: auto}}

#maintext p {font-weight: normal;}
#pic {position: absolute; left: 20%; top: 16px}
#syntext {
	position: absolute;
	left: 1%;
	top: 14.5em;
	width: 91%;
	background-color: #fff; 
	border: solid 1px #3da1ed;
	border-radius: 5px;
	padding: 8px;
	padding-top: 6px;
	padding-bottom: 0px;
	height: auto;
	box-shadow: -3px 6px 8px #dfdfdf;		
	z-index: 4;
	visibility: hidden;
}
@media (min-width: 610px) and (max-width: 910px) {#syntext {top: 15em; left: 32%; width:55%; height: auto}}
@media (min-width: 910px) {#syntext {left: 35%; top: 16.5em; width:50%; height: auto}}

#center {
	position: absolute;
	left: 350px;
	top: 137px;
	width: 100px;
	text-align: center;
	font-weight: bold;
	color: #eeeeee
}

a:link {font-family: verdana, sans-serif; font-weight: bold; font-size: 13px; color:#277bd1; text-decoration: underline}
a:visited {font-family: verdana, sans-serif; font-weight: bold; font-size: 13px; color:#277bd1; text-decoration: underline}
a:hover {font-family: verdana, sans-serif; font-weight: bold; font-size: 13px; color:#4db1fd; text-decoration: underline}
a:active {font-family: verdana, sans-serif; font-weight: bold; font-size: 13px; color:#4db1fd; text-decoration: underline}
.bigpic {position: absolute; left: 26%; top: 15em; width: 50%; background-color: #fff; border: solid #ccc 2px; visibility: hidden; z-index: 10; padding: 1.5em; padding-bottom: 0px; padding-top: .8em}
.bigpic2 {position: absolute; left: 26%; top: 15em; width: 60%; background-color: #fff; border: solid #ccc 2px; visibility: hidden; z-index: 10; padding: 1.5em; padding-bottom: 0px; padding-top: .8em}

.bigpic img {width: 100%; padding-top: .5em}
.bigpic2 img {width: 100%; padding-top: .5em}

.bigpic p {font-size:1.2em}
.bigpic2 p {font-size:1.2em}
a:link, a:visited, a:hover, a:active  {font-size: 1em;}
#feedback {position: absolute;right:0; top: 188px; width: 195px}
#feedback p {color:#277bd1; font-size: 1.1em}
.bigpic img {padding-bottom: .6em}
.bigpic2 img {padding-bottom: .6em}

.bigpic p {font-weight: bold; color:#277bd1;}
.bigpic2 p {font-weight: bold; color:#277bd1;}

#teacherstext {
	position: absolute;
	width: 96%;
	z-index: 6;
	right: 0em;
	top: 14.5em
}
@media (min-width: 610px) and (max-width: 910px) {#teacherstext {top:15em; left:8%; width:84%}} 
@media (min-width: 910px) {#teacherstext {top: 17em; left:12%; width: 76%}} 

#teacherslink {position:absolute; left:65%; top:11.5em; z-index:9}
#teacherswhite {
	position: absolute;
	left: 0em;
	top: 36em;
	width: 90%;
	height: 20em;
	z-index: 1
}
@media (min-width: 610px) and (max-width: 910px) {#teacherswhite {top:31em;}} 
@media (min-width: 910px) {#teacherswhite {top: 32em;}} 

#teacherswhite img {padding-bottom: .8em; width: 130%}
#teachersbear {position: absolute; width: 26%; height: auto; left: 2%; top: 0em; text-align: center}
#teachersbear p {text-align: center}
@media (min-width: 610px) and (max-width: 910px) {#teachersbear {left:8%; width:20%}} 
@media (min-width: 910px) {#teachersbear {left:12%; width: 20%}} 

#teacherswind {position: absolute; width: 26%; height: auto; z-index: 12; left: 43%; top: 0em; text-align: center}
#teacherswind p {text-align: center}
@media (min-width: 610px) and (max-width: 910px) {#teacherswind {left:44%; width:20%}} 
@media (min-width: 910px) {#teacherswind {left:45%; width: 20%}} 

#teacherstroll {position: absolute; width: 26%; height: auto;left: 83%; top: 0em; text-align: center}
#teacherstroll p {text-align: center}
@media (min-width: 610px) and (max-width: 910px) {#teacherstroll {left:80%; width:20%}} 
@media (min-width: 910px) {#teacherstroll {left:77%; width: 20%}} 
.haslettimage
@media (min-width: 610px) and (max-width: 910px) {.haslettimage {top:15em; left:8%; width:84%}} 
@media (min-width: 910px) {.haslettimage {top: 17em; left:12%; width: 76%}} 

ul#teacherlinks {line-height: 1.6; list-style-type: none; text-align: left; padding-left: 0; margin-left: 0;}
#firebirdanimation {
	position: absolute;
	left: 3%;
	top: 15em;
	width: 100%
}
@media (min-width: 610px) and (max-width: 910px) {#firebirdanimation {top:15em; left:20%; width:50%}} 
@media (min-width: 910px) {#firebirdanimation {top: 17em; left:30%; width: 35%}} 

.tab {width: 195px; height: 82px; background-color: #277bd1}
.tab a:link {font-family: verdana, sans-serif; font-weight: bold; font-size: 32px; color:#9fd3ff; text-decoration: none}
.tab a:visited {font-family: verdana, sans-serif; font-weight: bold; font-size: 32px; color:#9fd3ff; text-decoration: none}
.tab a:hover {font-family: verdana, sans-serif; font-weight: bold; font-size: 32px; color:#fff; text-decoration: none}
.tab a:active {font-family: verdana, sans-serif; font-weight: bold; font-size: 32px; color:#fff; text-decoration: none}
.tab {text-align: center; margin-bottom: 15px}
.tabword {position: relative; top: -65px}

.indexslabs {
		width: 100%;
		background-color: #fff; 
		border: solid 1px #3da1ed;
		border-radius: 5px;
		padding: 8px;
		padding-top: 6px;
		padding-bottom: 0px;
		height: auto;
		box-shadow: -3px 6px 8px #dfdfdf;		
		z-index: 5;
}