/*  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%;
    }

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 */

.loud{font-size:1.5em; color:#000055}   /* Suitable for error messages, etc. */

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: normal;
	font-weight: bold;
	color: #336699;
	text-decoration: none;
	border: none;


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

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


}
a:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: normal;
	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.*/ 
}


.fleximage {
    max-width:95%
}


/* From  http://thenewcode.com/124/Web-Multimedia-Embedding-YouTube-Video  --
wrappers round iframes to make responsive: */

.responsive-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } 

.responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Longer named version for backward compatibility, temporarily.
  Shorter version, below, for long term use.
*/

.respdiv { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } 

.respdiv iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Drop down menu */


/* Based on 
http://cssmenumaker.com/blog/tutorials/css3-drop-down-menu-tutorial
 */

#menu{ 
 border:none;
 position:fixed;
 top: 10px;
 right: 5%;
/* absence of a background value gives total transparency */
 width:6%;       /* of ground behind menu icon */
 margin:0;
 padding:1px;     /* Around the icon */
 z-index:3;
}


/*
#menu:hover{ 
 background:#c2cce1;     /* top/bottom of  menu icon when hovered. /
 padding: 1px;        /* Around the icon /
 }
*/

#menubody{ 
  z-index:3;
 }


#menubody a:hover {  /* Suppress hover effect for the <a> item under icon */
 background:none;
 }

#menubody a{      
color:#000077;    /*    labels on entries when dropped down */
display:block;
font-weight:lighter; 
line-height:50px;
margin:0px;
text-align:center;
text-decoration:none;
}

/*
#menubody:hover{          /* menu li a:hover /
background:#c2cce1;         /* behind menu icon when hovered /
text-decoration:none;
}
  
*/
                       
#menubody li:hover a{           /* when hover over top (main) icon */
 background:#0FF;
 text-decoration:none;
}

#menubody ul{   
display:none;
height:auto;
/* padding:0px; */
padding-top: 1px;   /* gap between icon and dropped down entries */
margin:0px;
border:0px;
position:absolute;
width:100px;

}

#menubody:hover ul{ 
/* top:50px;  */
display:block;
left:-5%;        /* Offset for dropped entries, to stop protusion to right */
}

#menubody li {     /*   for entries when dropped down  */
display:block;
float:none;
margin:0px;
width:100px;      /* Was 100px; changed 30/10/19 for comparison with year pages */
       background-image:url("gfx/topbar.gif");
       background-repeat: repeat-x;
/* background:#c2cce1; */
border-radius:5px;
}

#menubody:hover li a{  
background:none;
}


#menubody ul a{  
display:block;
height:20px;
font-size:16px; /* Was 16px; changed 30/10/19 for comparison with year pages */
font-style:normal;
font-weight: bold; /* Inserted 30/10/19 for comparison with year pages */
margin-left:1px;  /* Was 10px; changed 30/10/19 for comparison with year pages */
padding-bottom:20px; 
text-align:center; 
position:relative;
top:-7px;
color: #000066;
}

#menubody ul a:hover, #menubody ul li:hover a{  
border:0px;
color:#c2cce1;          /* text label when hover over that entry */
text-decoration:none;
background:none;     /* when hover over that entry, let next defn handle it */
border-radius:5px;
border: 0;
}

#menubody li:hover{            
  background: #000077;  /* covers whole button, incl. left padding area */
  }
  
#menuicon{
  width:150%; 
 }
 
#menuicon:hover{
  width:160%; 
 }
 
 



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


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


/* Top of page, behind full school title: */
#topbackground
{        
        z-index:2; 
	     color: #000077;       /* for text */        
        background-color:#c2cce1;
        margin-top: 0px;
        position: fixed; 
        top: 0px; 
        left: 0px;
        width: 100%; 
        height:auto; 
        min-height: 68px; 
        max-height:86px;
 }

/* Full name of school: */
#longtitle {
        z-index:3; 
	font-size: 100%;
	font-style: normal;
	font-weight: bold;
	color: #000077;              
	text-align: center;
        vertical-align: middle;
        margin-top: 8px;
        position: fixed; top: 40px;
        width: 100%; 
        height: auto; 
        min-height: 35px;      /* Commented out 6 Feb 2019 with no apparent effect */
        max-height:44px;      /* Commented out 6 Feb 2019 with no apparent effect */
} 

/* Navigation bar */
#nav
{
  z-index:3; 
  background-color:#c2cce1; 
  width:97%;
  height: 20px;
  top:35px;
  position:relative;
  bottom:-35px;
  padding-left:7%;
  /* border-bottom:2px solid #c2cce1; */

}

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


.menuentry{ 
       font-size:100%;
 }

#nav a:hover{ 
       font-size:150%;
 }


/* Background for logo and short title */


#headerimages
{ 
        z-index:2;
        position: fixed;
	     background-attachment: local;
        background-position: right top; 
        background-color: #fcfcfe;
        top:0px;
        left: 0px;
        width: 100%; 
        height: 80px; 
        background-image: url("gfx/backgrd_faces2.jpg");
        background-repeat: no-repeat;
        min-height: 54px; 

 }


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

}


#shorttitle {
        z-index:3;        
	font-family: Arial, Helvetica, sans-serif;
	font-size: 170%;
	font-weight: bold;
   /* margin: 0 auto;  */
   text-align: center;
	color: #000099;
	letter-spacing: 0.3em;
   height:auto;
   position:fixed; 
   /* left:25%; */
   top:10px; 
   width: 100%;
   
}


/* Main body of the page */

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

/* Block of text within the main body */

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

.content{
    padding:20px;
        }

#footer         /* At bottom of page. */
{
   float:left;
}

#socialmedia        /* At bottom of page. */
{
   float:left;
}

#designcredit       /* At bottom of page. */
{
   float:right;
}


/* START OF SIZE-SPECIFIC DEFNS */



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

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

 /* Top of page, behind full school title: */
 #topbackground
  {        
/*    min-height: 70px;  */
  }
 
 .menuentry{ 
       font-size:90%;
 }

 #headerimages
 { 
       /* top:58px; */
 }

 #logoposition 
 {
	margin-top: 1%;
        width: 60px; 
  }

 #shorttitle 
 {
        /* left:20%; */
        /* top:25%;  */
 }

 #main
 {
   /* top: 80px; */
   padding:20px 4% 20px 4%; 
 }

#menubody:hover ul{  
 left:-22%;        /* Offset for dropped entries, to stop protusion to right */
}


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

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

 #headerimages
 {
    background-image: url("gfx/backgrd_faces3.jpg"); /* Paler background */
 }
 
/* Top of page, behind full school title: */
 #topbackground
 {        
       min-height: 60px; 
  }
 
 .menuentry{ 
       font-size:80%;
 }

 #longtitle {
    left:0%;          /* 6 Feb 2019 tried 8% ; 7 Feb 2%; no apparent effects;  */
	font-size: 70%;   /* 4 Feb 2019 tried 60% */
 } 

/* Navigation bar */
 #nav
 {
  top:34px; 
  padding-left:8%;
 }

 #logoposition 
 {
        top: 2%; 
        width: 50px;  /* 4 Feb 2019 tried 40px */
 }

 .linkbutton{ 
    /*   font-size:100%; */
       padding-bottom:0%;
 }

 #header
 {
  background-color:#c2cce1;	
 }

 #main
 {
     /*   top:138px; */
 }
	
 #shorttitle 
 {
	font-size: 110%;
	color: #000077;
 /*       left:20%;
        top:30%;     */
 }


#menubody:hover ul{  
 left:-70%;        /* Offset for dropped entries, to stop protusion to right */
}

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


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

@media only screen and (max-width: 650px)
{
   
#logoposition 
 {
        top: 2%; 
        width: 40px;  
 }

#menubody:hover ul{  
 left:-150%;        /* Offset for dropped entries, to stop protusion to right */
}


}/* End of settings for SMALL screen (up to 650) */


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

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

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

/* Full name of school: */
 #longtitle 
 {
   top: 25px;
	font-size: 50%;  /* 6 Feb 2019 tried 40%; no real improvement */
   max-height:64px;
   /* color: #eeeeff; */  
 } 

/* Navigation bar */
 #nav
 {
  top:30px;
  padding-left:6%;
 }

/* Navigation button */
 .linkbutton
 { 
       padding-bottom:1%;
 }

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

/* Background for logo and short title */

 #headerimages
 { 
      /*  top:56px; */
        height: auto; 
 }


 #logoposition 
 {
	margin-top: 10px;
   width:40px;   /* 26-01-19: decreased 40px to 35px; 8 Feb back to 40px */
   top: 0px;
 }

 #shorttitle 
 {
	font-size: 80%;
	/* color: #eeeeff;  */
    /*    left:20%; */
   /*     top:40%; */
 }

/* Main body of the page */

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

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


 #menu{ 
  /* top:45px; */
  right: 6%;
  width: 7%;   /* 26-01-19: was 10% */
  }


#menubody li {     /*   for entries when dropped down  */

width:90px;

}

#menubody:hover ul{  
 left:-120%;        /* Offset for dropped entries, to stop protusion to right */
}

#menubody a a:link{  
    color: #000066;
}


#menubody ul a{  
  font-size:14px;
  }
 
 /*
#menubody ul a{  
 text-align:center; 
 height:20px;
 font-size:14px;
 font-weight: bold;
 color: #000066;
}
*/

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


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

@media only screen and (max-width: 390px)
{
	
/* Full name of school: */
 #longtitle 
 {
     /* left:0%;	     /* 26-01-19: was 4%; tried 2%, iPhone still not OK; */
	font-size: 50%;  /* 26-01-19: changed 50% to 40%; didn't help the iPhone */
 } 
 
/* Link on nav bar */
 .menuentry
 { 
       font-size:55%;
 }

 #logoposition 
 {
    width: 20px;
 }

 #menu{ 
  width:8%;
 }

 #menubody:hover ul
 {  
 left:-50px;      /* Offset for dropped entries, to stop protusion to right */
 }
 
}/* End of settings for very SMALLEST screen (phones, etc.) */