body { margin: 0; padding: 0; }


 #page-wrap {
	margin: 0 auto;
}
p {
	margin: 0px 0; 
}
 
	/* 
	Generic Styling, for Desktops/Laptops 
	*/
#container
{
	margin: 0 auto;
	background : #ffffff;
  height : 100%;
  font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : medium;
background-image : url(background.jpg);
background-attachment : fixed;
background : url(background.jpg) no-repeat fixed;  

} 


#header
{
font-size : 9px;

	padding-top: 0px;
	padding-left : 4px;
	padding-right : 4px;
	padding-bottom : 90px;
	min-height : 40px;
	background-image : url(logo_3.gif);
	background-position : center;
	background-repeat : no-repeat; 
	
}

#header img {padding: 20px 20px 20px 20px}

#header h1 { margin: 0; }

 h1 { 
 font-size: 15px; 
 font-weight: bold; 
 text-align: center; 
 color : #0066cc; 
 }
 h2 { 
 font-size: 10px; 
 font-weight: normal; 
 text-align: center; 
 color : #0066cc; 
 }
 
  h3 { 
 font-size: 8px; 
 font-weight: normal; 
 text-align: center; 
 color : #0066cc; 
 }

#centeredmenu {
    
   width:100%;
   background:#fff;
     margin: 0 auto;
   overflow:hidden;
    font-size : 13px;
    padding-top : 20px;
       color : #333333; 
}
#centeredmenu ul {
      width:100%;
   list-style:none;
   margin: 0 auto;
  
    
    
   text-align:center;
}
#centeredmenu ul li {
  display: inline;
     margin: 0 auto;
   list-style:none;
      width:100%;
   padding:0;
 
}
#centeredmenu ul li a {
  display : inline-block;
margin-bottom : 2px;
 margin-right : -2px;
   padding-left :  6px;
    padding-right :  6px;
     padding-bottom :  3px;
      padding-top :  1px;
   background: #0066ff;
  color : #ffffff; 
   text-decoration:none;
   line-height: 20px;
  
}
#centeredmenu ul li a:hover {
   color : #ffffff;
  background : #0099ff; 
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
margin: 0 auto;
   color:#fff;
   background:#000;
    
}



#content { 

margin: 0 auto;
 height : 100%;
padding-top : 1em;
padding-bottom : 1px;
padding-left : 6px;
padding-right : 10px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
font-weight : normal;
line-height : 35px;
text-align : center;
background : #ffffff;
color : #999999;
max-width : 659px;  

  } 
    

#content h2
{

	font-size: 11px;
	text-align : center;
}

.scroll{



margin : 0 auto;



color : #000066;





font-size : 11px; 

border: 0px solid #cccccc; 



text-align : center; 



}
 

#footer
{
 
  font-size : 9px;
	background: #0033cc;
	color : #ffffff;
	text-align: center;
	padding-bottom: 4px;
	padding-top : 4px;
	height: 12px;
	width : 100%;
	margin-top : 10%
 }
 
 
ul
{
list-style-type: none;
padding: 0px;
margin-left:  auto;
margin-right:  auto;
width : 15em;
font-size : 13px;


margin-bottom : 25px;
text-align : left;
}
li
{
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position:0px 5px;
padding-left: 16px;   
 line-height : 20px;
width : 25em;
}


   
 /*
Generic Styling, for Desktops/Laptops
*/
table {
	width: 70%;
	border-collapse: collapse;
	font-size : 9px;
  line-height : 15px;
	margin-left :  auto;
  margin-right : auto;
  line-height : 10px;
  margin-top : 60px;
   margin-bottom : 50px;
}
/* Zebra striping */
tr:nth-of-type(odd) {
	background: #eee;
}
th {
	background: #333;
	color: white;
	font-weight: bold;
}
td, th {
	padding: 6px; 
	border: 1px solid #ccc;
	text-align: left;
}

table#res {width:200px;
    margin: 0 auto;
    font-size:12px;
    border:0px solid #000000; }

 

#test{
color : #0066cc;

font-size : 12px;
font-weight : bold;
margin-top : 19px;
margin-bottom : 20px;
margin : 0 auto;

padding-top : 11px;
padding-bottom : 9px;
  width : 253px;

}
#test2 {
color : #0066cc;

font-size : 15px;
font-weight : bold;
margin-top : 19px;
margin-bottom : 20px;
margin : 0 auto;

padding-top : 20px;
padding-bottom : 20px;
  width : auto;

} 

#txt{

border:none;

font-family:verdana;

font-size:14px;

font-weight:bold;

background : #ffffff;

border: 0px solid #cccccc; 

color : #ff3300;

text-align : center;

width : 53px;

}
h4 {
color : #0066cc;
text-align : center;
font-size : 13px;
font-weight : bold;
 margin : 0 auto;
padding-top : 10px;
padding-bottom : 10px;
line-height : 30px;

}	

#name {

text-align : center;
font-size : 12px;
} 

.address {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
text-align : center;
color : #000033;
border-top : 0 solid #cccccc;
width : auto;
margin-left :  auto;
margin-right :  auto;
margin-bottom :  0px;
margin-top :  40px;

}
.scroll_1 {

margin : 0 auto; 

background : #ffffff;  

line-height : 20px;

color : #ff3300;
                   
width : 100%;  

padding-top: 19px; 


padding-bottom: 0px; 


font-size : 11px; 

border-top : 0px solid #999999; 

border-bottom : 0px solid  #999999; 

 

overflow : auto; 

height : auto; 

} 



 .responsive  {
   width : auto;
   margin-top : 15px;
   padding-right : 8px;
   padding-left : 8px;
   font-size : 11px;
   color : #000066;
  
}
	

		
tr:nth-of-type(odd) {
      background : #ffffff;
	  border: none;
 }
		

		
		.responsive th {
	background: #000066;
	color: white;
	font-weight: bold;
}
   

	

 
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media  screen
	and (min-width : 100px)
	and (max-width : 480px) {

 .scroll{



margin : 0 auto; 



color : #000066;





font-size : 11px; 

border: 0px solid #cccccc; 



text-align : center; 



}
 
#content { 
position : relative;
margin: 0 auto;
 height : 100%;
padding-top : 1em;
padding-bottom : 1px;
padding-left : 4px;
padding-right : 8px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
font-weight : normal;
line-height : 1.5;
text-align : center;
background : #ffffff;
color : #999999;
width : auto;  
  
} 

#txt{

border:none;

font-family:verdana;

font-size:14px;

font-weight:bold;

background : #ffffff;

border: 0px solid #cccccc; 

color : #ff3300;

text-align : center;

width : 53px;

} 
#header
{
font-size : 9px;

	padding-top: 0px;
	padding-left : 4px;
	padding-right : 4px;
	padding-bottom : 0px;
	height : 40px;
	background-image : url(logo_s.gif);
	background-position : center;
	background-repeat : no-repeat;
	
}

#header img {padding: 20px 20px 20px 20px}

#header h1 { margin: 0; }

ul
{
list-style-type: none;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 3px;
margin-left:  auto;
margin-right:  auto;
color : #666666;

font-size : 16px;


padding-left : 0px;
margin-bottom : 25px;
text-align : left;
}


li
{
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position : 0px 5px;
padding-left: 16px;   
 line-height : 20px;
 margin : 0 auto; 
 width : auto;
}



#centeredmenu {
    
   width: 100%;
   background:#fff;
     margin: 0 auto;
   overflow:hidden;
    font-size : 15px;
    padding-top : 10px;
   line-height: 38px; 
}
#centeredmenu ul {
      width:100%;
   list-style:none;
   margin: 0 auto;
    
 
    padding-bottom : 18px;
   text-align:center;
}
#centeredmenu ul li {
  display : inline-block;
          background-image: none;
     margin-left: 2px;
     margin-right: 2px;
     margin-bottom : 5px;
          margin-top : 5px;
   list-style:none;

   padding:0;

  
}
#centeredmenu ul li a {
  display : inline-block;
margin-bottom : 0px;
   margin-right : -2px;
    font-weight : bold;
   padding-left :  4px;
    padding-right :  4px;
     padding-bottom :  4px;
      padding-top :  4px;
 color: #ffffff;
 background: #0066ff;
   text-decoration:none;
    line-height: 28px;
    font-size : 19px;
   
}
#centeredmenu ul li a:hover {
     color : #ffffff;
  background : #0099ff; 
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
margin: 0 auto;
   color:#fff;
   background:#000;

}


 

table {
	width: auto;
	border-collapse: collapse;
	font-size : 9px;
	margin : 0 auto;
}

#test{
color : #0066cc;

font-size : 10px;
font-weight : normal;
margin-top : 11px;
margin-bottom : 0;
margin : 0 auto;

padding-top : 0;
  width : 233px;
line-height : 20px;
}

#test2 {
color : #0066cc;

font-size : 12px;
font-weight : normal;

margin-left :  auto;
margin-right :  auto;

padding-top : 0px;
padding-bottom : 0px;
  max-width : 200px;

} 

.address {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
text-align : center;
color : #000033;
border-top : 0 solid #cccccc;
width : auto;
margin-left :  auto;
margin-right :  auto;
margin-bottom :  0px;
margin-top :  20px;

}
.scroll_1 {

margin-left : auto;

margin-right : auto;
 

line-height : 20px;

color : #ff3300;
                   
width : 100%;  

padding-top: 39px; 


padding-bottom: 0px; 


font-size : 11px; 

border-top : 0px solid #999999; 

border-bottom : 0px solid  #999999; 

 

overflow : auto; 

height : auto; 

}  
table {
	width: 220px;
	border-collapse: collapse;
	font-size : 9px;
	margin-left :  auto;
		margin-right :  auto;
			margin-bottom :  20px;
			border: none;
	
}

  
th {
	background: #333;
	color: white;
		padding-left: 2px; 
		padding-right: 2px; 
     border : 1px solid  #333333; 
	text-align: left;
	font-weight: bold;
}

tr:nth-of-type(odd) {
      background : #ffffff;
	  border: none;
 }
 
           
	
		/* 
	Max width before this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	*/
	
	
		/* Force table to not be like tables anymore */
		
		.responsive,
	
.responsive thead,
.responsive tbody,
.responsive th,
.responsive td,
.responsive  tr { 
	display: block; 
}

 .responsive  {
   width : 236px;
   margin-top : 15px;
   padding-right : 0px;
   padding-left : 0px;
   font-size : 12px;
  
}
.responsive  thead tr { 
	position: absolute;
	top: -9999px;
	left: -9999px;
	
	
}
		
.responsive td:nth-of-type(odd) {
      background : #99ccff;

 }
		
.responsive td {
	/* Behave  like a "row" */
			border: none;
			 line-height : 9px;
			position: relative;
			padding-left: 30%;
			background : #ffffff;
      color : #000000;
		}
		
	.responsive	td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
				
			
		}
		
		.responsive th {
	background: #000066;
	color: white;
	font-weight: bold;
}
   

	
		/*
		Label the data
		*/

	
	.responsive		td:nth-of-type(1):before { content: "Teacher"; font-weight : bold; }
	.responsive	td:nth-of-type(2):before { content: "Location"; font-weight : bold;}
	.responsive		td:nth-of-type(3):before { content: "Phone"; font-weight : bold; }
	.responsive	td:nth-of-type(4):before { content: "Email"; font-weight : bold; }
	
	
	
}
@media  screen
	and (min-width : 481px)
	and (max-width : 700px) {
 .scroll{



margin : 0 auto;



color : #000066;





font-size : 11px; 

border: 0px solid #cccccc; 



text-align : center; 



}
 
#content { 
position : relative;
margin: 0 auto;
 height : 100%;
padding-top : 1em;
padding-bottom : 1px;
padding-left : 4px;
padding-right : 8px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
font-weight : normal;
line-height : 1.5;
text-align : center;
background : #ffffff;
color : #999999;
width : auto;  
  
} 

#txt{

border:none;

font-family:verdana;

font-size:14px;

font-weight:bold;

background : #ffffff;

border: 0px solid #cccccc; 

color : #ff3300;

text-align : center;

width : 53px;

} 
#header
{
font-size : 9px;

	padding-top: 38px;
	padding-left : 4px;
	padding-right : 4px;
	padding-bottom : 10px;
	height : 60px;
	background-image : url(logo_m.gif);
	background-position : center;
	background-repeat : no-repeat;
	
}

#header img {padding: 20px 20px 20px 20px}

#header h1 { margin: 0; }

ul
{
list-style-type: none;
padding: 0px;
margin-left:  auto;
margin-right:  auto;
color : #999999;
font-size : 12px;

padding-left : 4px;
margin-bottom : 55px;
text-align : left;
}


li
{
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position:0px 5px;
padding-left: 16px;   
 line-height : 20px;
 margin : 0 auto;
}

#centeredmenu {
    
   width: auto;
   background:#fff;
     margin: 0 auto;
   overflow:hidden;
    font-size : 13px;
    padding-top : 10px;
}
#centeredmenu ul {
      width:100%;
   list-style:none;
   margin: 0 auto;
 
    
   text-align:center;
}
#centeredmenu ul li {
  display : inline;
     margin: 0 auto;
   list-style:none;
        background-image: none;
   padding:0;
  
}
#centeredmenu ul li a {
  display : inline-block;
margin-bottom : 2px;
   margin-right : -2px;
  
   padding-left :  8px;
    padding-right :  8px;
     padding-bottom :  3px;
      padding-top :  1px;
   background: #0066ff;
  color : #ffffff; 
   text-decoration:none;
 line-height: 20px;
   
}
#centeredmenu ul li a:hover {
   color : #ffffff;
  background : #0099ff; 
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
margin: 0 auto;
   color:#fff;
   background:#000;
   
}

table {
	width: auto;
	border-collapse: collapse;
	font-size : 9px;
	margin : 0 auto;
}
#test2 {
color : #0066cc;

font-size : 13px;
font-weight : bold;
margin-top : 19px;
margin-bottom : 20px;
margin : 0 auto;

padding-top : 40px;
padding-bottom : 20px;
  width : auto;

} 
#test{
color : #0066cc;

font-size : 10px;
font-weight : normal;
margin-top : 11px;
margin-bottom : 0;
margin : 0 auto;

padding-top : 0;
  width : 233px;
line-height : 20px;
}

.address {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
text-align : center;
color : #000033;
border-top : 0 solid #cccccc;
width : auto;
margin-left :  auto;
margin-right :  auto;
margin-bottom :  0px;
margin-top :  90px;

}
.scroll_1 {

margin : 0 auto; 

background : #ffffff;  

line-height : 20px;

color : #ff3300;
                   
width : 100%;  

padding-top: 19px; 


padding-bottom: 0px; 


font-size : 11px; 

border-top : 0px solid #999999; 

border-bottom : 0px solid  #999999; 

 

overflow : auto; 

height : auto; 

} 

 .responsive  {
   width : auto;
   margin-top : 0px;
   padding-right : 8px;
   padding-left : 8px;
   font-size : 10px;
   color : #000066;
  
}
	

		
tr:nth-of-type(odd) {
      background : #ffffff;
	  border: none;
 }
		

		
		.responsive th {
	background: #000066;
	color: white;
	font-weight: bold;
}
   

 
}

@media only screen
	and (min-device-width : 701px)
	and (max-device-width : 1024px) {
 .scroll{



margin : 0 auto;



color : #000066;





font-size : 11px; 

border: 0px solid #cccccc; 



text-align : center; 



}
 
#content { 
position : relative;
margin: 0 auto;
 height : 100%;
padding-top : 1em;
padding-bottom : 1px;
padding-left : 4px;
padding-right : 8px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
font-weight : normal;
line-height : 1.5;
text-align : center;
background : #ffffff;
color : #999999;
width : auto;  
  
} 

#txt{

border:none;

font-family:verdana;

font-size:14px;

font-weight:bold;

background : #ffffff;

border: 0px solid #cccccc; 

color : #ff3300;

text-align : center;

width : 53px;

} 
#header
{
font-size : 9px;

	padding-top: 8px;
	padding-left : 4px;
	padding-right : 4px;
	padding-bottom : 10px;
	height : 60px;
	background-image : url(logo_m.gif);
	background-position : center;
	background-repeat : no-repeat;
	
}

#header img {padding: 20px 20px 20px 20px}

#header h1 { margin: 0; }

ul
{
list-style-type: none;
padding: 0px;
margin-left:  auto;
margin-right:  auto;
color : #000000;
font-size : 15px;
background : #eeeeee;
padding-left : 4px;
margin-bottom : 65px;
text-align : left;
}


li
{
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position:0px 5px;
padding-left: 16px;   
 line-height : 20px;
 margin : 0 auto;
}

.menu {
     
text-align : center;
  padding : 0px;
  background :  none; 
width : auto;
  font-size : 17px;
  margin-bottom : 20px;
   margin-top : 0px;
}
.menu ul {

background-image: none;
text-align: center;
margin-left : auto;
margin-right : auto;
 margin-bottom : 5px;
  margin-top : 5px;
}
 
  .menu li, a  {
background: #eeeeee;
  color : #0066ff; 
         margin-right : -3px;
         padding-left : 3px;
           padding-right : 5px;
  margin-bottom : 2px;
 display : inline-block;

    text-decoration : none;
 } 
  .menu  a:hover {
  color : #eeeeee;
  background : #0066ff; 
   margin-right : -3px;
         padding-left : 3px;
           padding-right : 5px;
  margin-bottom : 2px;
 display : inline-block;

    text-decoration : none;
  
  
  }
 * html .menu li,* html .menu li a{display:inline}
*+html .menu li,*+html .menu li a{display:inline}
 

table {
	width: auto;
	border-collapse: collapse;
	font-size : 9px;
	margin : 0 auto;
}
#test2 {
color : #0066cc;

font-size : 14px;
font-weight : bold;
margin-top : 19px;
margin-bottom : 20px;
margin : 0 auto;

padding-top : 40px;
padding-bottom : 40px;
  width : auto;

} 
#test{
color : #0066cc;

font-size : 10px;
font-weight : normal;
margin-top : 11px;
margin-bottom : 0;
margin : 0 auto;

padding-top : 0;
  width : 233px;
line-height : 20px;
}

.address {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
text-align : center;
color : #000033;
border-top : 0 solid #cccccc;
width : auto;
margin-left :  auto;
margin-right :  auto;
margin-bottom :  0px;
margin-top :  90px;

}
.scroll_1 {

margin : 0 auto; 

background : #ffffff;  

line-height : 20px;

color : #ff3300;
                   
width : 100%;  

padding-top: 19px; 


padding-bottom: 0px; 


font-size : 11px; 

border-top : 0px solid #999999; 

border-bottom : 0px solid  #999999; 

 

overflow : auto; 

height : auto; 

}  
}