/*  First, definitions that either:
     - apply to screens of all sizes (and should not be overridden below)
     - apply to smallest screens (may be overridden by size-specific defns)
*/

/* Start with very general stuff, that won't be overridden. */

*{margin:0px;padding:0px}    /* General lack of surrounding space */

body{font-family:Arial, Helvetica, sans-serif;
     width:100%;
     background-color:#eeeeff;
    }

h3{ color: #000055;padding-top:10px; padding-bottom:5px;}  /* Subheadings within page */


h2{ font-size:large; color: #000055;padding-top:10px; padding-bottom:5px;}  /* Subheadings within page */

h1{ color: #000055;}

li{margin-top:2px;margin-left: 20px} /* Restores normal indenting, after the "margin:0px" above */

p{padding-top: 10px;}  /* Restores spacing suppressed by general "padding:0" above */

a:link {
	font-size: small;
	font-weight: bold;
	color: #336699;
	text-decoration: none;
	border: none;


}
a:visited {
	font-size: 14px;
	font-weight: bold;
	color: #9999CC;
	text-decoration: none;

}
a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FF6600;
	background-color: #FFFFFF;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;


}
a:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: 336699;
	font-weight: bold;

}

/* To stop IE putting border round images used as links: */
a img {
   border:none; 
}

#head
{
	clear:both      /* specifies which sides of an element floating 
                           elements are NOT allowed to float.*/ 
}


/* *** End of very general, all-size settings. *** */


/* Start of settings for WIDEST screen, to allow IE 8, etc. to work */


/* Behind full school title: */
#topbackground
{        
        z-index:2; 
	color: #000077;       /* for text */        
        background-color:#c2cce1;
        position:fixed; 
        width: 100%; 
        height:auto; 
        min-height: 28px; 
        max-height:30px;

 }

/* Full name of school: */
#longtitle {
        z-index:3; 
	font-size: 85%;
	font-style: normal;
	font-weight: bold;
	color: #000077;              
        margin-left: 14%;  
        position: fixed; 
        width:100%;
        height: auto; 
        padding-top: 5px;
	text-align:center;
} 


#maintitle{ 
    float:left;

 }

#subtitle{ 
     
      float:left;

 }

/* Navigation bar structure */
.navbar
{
  z-index:3; 
  width:60%;
  height: 20px;
  position:relative;
  margin-left: 20%;
  margin-top: 25px;
  
}

#navupper{ 
    top:1px;
 }

#navlower{ 
    top:-13px;
 }

/* Navigation button */
.linkbuttonnarrow{ 
       width:20%;
 }

/* Navigation button */
.linkbuttonwide{ 
       width:25%;
 }


/* Navigation button */
.linkbutton{ 
       border:2px solid #c2cce1;
       text-align:center;     
       min-height:18px;
       float:left;
       background-image:url("gfx/topbar.gif");
       background-repeat: repeat-x;
       padding-bottom:1%;
       padding-top:3px;
 }

/* Link on nav bar */
.menuentry{ 
       font-size:100%;
 }



/* Background for logo and short title */


#headerimages
{ 
        z-index:1;
	background-attachment: local;
        background-position: right top;
        position:relative; 
        top:25px;
        width: 100%; 
        min-height: 80px; 
        background-image: url("gfx/backgrd_faces3.jpg");
        background-repeat: no-repeat;
        max-height: 84px; 
 }

#logoposition{ 
        z-index:2;
	margin-top: 0%;
	text-decoration: none;
        position: absolute; 
        top: 0px; 
        left: 5%;
        width: 65px;
}

#bigdate{ 
        z-index:2;      
	color: #e0f2ff;     / * Used to be 000099; */  
        position:absolute;
        margin: 0 auto;
        margin-right:50px;
	letter-spacing: 0.1em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 300%;
	font-weight: bold;
	letter-spacing: 0.01em;
        height:auto;
        text-align:right;
 }

/* Main body of the page */


#main
{
        z-index:1;
        width:92%; 
        position:absolute; 
        top:105px;
	padding:20px 4% 10px 4%;  
        background-repeat: repeat;
        background-image:url("gfx/bluestripes.gif");
        font-size:small;
}

/* Block of text within the main body */

#article{
         background-color:#eeeeff; 
         margin-bottom:20px;
         width:100%;  
       }

.content{
    padding:20px;
        }

#footer         /* At bottom of page. */
{
/*   position:relative;
   bottom: 10px;
   left: 30px;      */
   float:right;
}


/* START OF SIZE-SPECIFIC DEFNS */



/* For next to largest screens, up to 995 px */

@media only screen and (max-width: 995px){


 /* Full name of school: */
 #longtitle {
	font-size: 75%;

  }

 #logoposition 
 {

        width: 60px; 
  }


#navlower{ 
    top:-15px;
 }

#bigdate{ 

        margin-right:50px;

 }


}  /* End of second-largest (up to 990) stuff */

/*  For medium-width screens  */
@media only screen and (max-width: 880px)
{


/* Behind full school title: */
 #topbackground
 {        

  }

 #longtitle {
	font-size: 75%;
        margin-left:12%; 
 } 

 #maintitle{ 
   position:relative;
   float:left;
 }

 #subtitle{ 
   position:relative;
   float:left;
 } 


/* Link on nav bar */
.menuentry{ 
       font-size:95%;
 }


 #logoposition 
 {
        width: 55px;
 }
	

} /* End of up-to-880px width stuff */


/*  For small-to-medium-width screens  */
@media only screen and (max-width: 780px)
{

 #longtitle {
	font-size: 65%;
 /*       margin-left:10%; */
        text-align:center;
 } 

 .navbar{ 
  width:75%;
  margin-left: 15%;

 }

 .homebuttonpatch{ 
     padding-top: 1%;

 }

/* Navigation button */
 .linkbuttonnarrow{ 
       width:15%;
 }

/* Navigation button */
 .linkbuttonwide{ 
       width:22%;
 }


/* Link on nav bar */
 .menuentry{ 
       font-size:85%;
 }


 #bigdate{ 
	font-size: 235%; 
        margin-right:30px;
  }

 #main{ 
  width:93%;
 }

}
/* End of up-to-780px width stuff */


/* Start of settings for SMALL screen (phones, etc.) */

@media only screen and (max-width: 650px)
{

/* Top of page, behind full school title: */
 #topbackground
 {        
  min-height:35px;
 }

/* Full name of school: */
 #longtitle 
 {
	font-size: 58%;
        margin-left:0%;
 } 

#maintitle{ 
    float:none;
    text-align:center;

 }

#subtitle{ 
    float:none;
    text-align: center;
    
 }


/* Navigation bar */

.navbar{ 
  width:85%;
  margin-left: 18%;
  margin-top:33px
 }


#navlower{ 
    top:-23px;
 }

/* Navigation button */
 .linkbuttonnarrow
 {  
  width: 12%;

 }
 .linkbuttonwide
 {  
  width: 23%;
  }
 
/* Link on nav bar */
 .menuentry
 { 
       font-size:80%;
 }


#headerimages{ 
   top:35px;

 }


 #logoposition 
 {
        width:10%;
 }

 #bigdate{ 
      font-size: 190%;
      margin-right: 14px;

 }


/* Main body of the page */

 #main
 {
        top:110px;
        font-size:small;
 }

 #footer         /* At bottom of page. */
 {
   padding-left:45%; padding-right:40%;
 
 }

}/* End of settings for SMALL screen (phones, etc.) */


/* Start of settings for very small screen (phones, etc.) */

@media only screen and (max-width: 465px)
{
	
/* Full name of school: */
 #longtitle 
 {
   font-size:50%;
 } 

.navbar{ 
  margin-left:18%;
 }


#navlower{ 
    top:-24px;
 }

/* Link on nav bar */
 .menuentry
 { 
       font-size:65%;
 }


 .homebuttonpatch{ 
     padding-top: 2%;

 }

/* Navigation button */
.linkbuttonnarrow{ 
       width:17%;
 }

/* Navigation button */
.linkbuttonwide{ 
       width:25%;
 }

 
 #logoposition 
 {

    width: 9%;
 }

#bigdate{ 
   display:none; 
 }
}/* End of settings for very SMALLEST screen (phones, etc.) */