/* CONTENTS -
 * 
 * Main structural elements
 * Admin
 * Buttons
 * General theme (e.g. headings, tables, lists)
 * Specific classes (e.g. warnings)
 * Forms
 * Page specific
 * Flexible boxes
 * Results page specific form and tables
 * CSS Menu 
 * 
 * 
 * */



/* MAIN STRUCTURE ---------------------------------------------------------------------------------------------------------------------*/

html {
    background-color: #F2F5F7;
  
}


body {
  font-family: Whyte, "Pathway Gothic One", Helvetica, Arial, sans-serif;
  padding: 0px;
  margin: 0px;
  border: 0px;
  vertical-align: baseline;

}


#feedback {
    background-color: #000000;
    margin-top: 0px;
    margin-top: 0px;
    color: #F2F5F7;
    margin-left: 2px;
    margin-right:2px;
    padding-left: 1%;
    padding-right: 1%;

}


#banner {
  background-color: #510D0A;
  margin-top: 0px;
  margin-top: 0px;
  color: #F2F5F7;
  margin-left: 2px;
  margin-right:2px;

}

#strip {
       
}
#strip img {
    width: 100%;
    max-width:2355px;
    max-height:202px;
}

#sponsor {
	font-size:80%;
	color: white;
	float: right;
	margin-right: 1%;
	padding-top:10px;
	padding-bottom: 2px;
	}
        
#bannerLogo {
	font-size:80%;
	color: white;
	float: left;
	margin-right: 1%;
        margin-left: 1%;
	padding-top:10px;
	padding-bottom: 2px;
	}
	
#banner h1 {
	line-height:1.2;
	font-family: Whyte,"Pathway Gothic One", Helvetica, Arial, sans-serif;
	font-size:44px;
	color:#F2F5F7;
	text-decoration:none;
	padding-top:10px; 
        margin-top: 0px;
	font-weight:400;
/*	text-transform:uppercase;  */
	letter-spacing:2px;   
	display:block;   
	padding-left: 2%;

	}
    

#banner a {
	color: #F2F5F7;
	text-decoration: none;
	 
}
#banner a:visited {
	color: #F2F5F7;
	text-decoration: none;
	 
}
#cssmenu a {
	color: black;
	text-decoration: none;
	 
}

#cssmenu a:visited {
	color: black;
	
	text-decoration: none;
	 
}


#adminBanner {
  background-color: #510D0A;
  color: #ffffff;
  padding: 5px;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 1px;
 

}

#main {
    margin-left: 1%;
    margin-right:1%;
    line-height:1.4;

    }
    

#footer {
  background-color: #510D0A;
  margin-top: 0px;
  margin-left: 1%;
  margin-right:1%;
 
}



/* Admin  ---------------------------------------------------------------------------------------------------------------------*/

.admin, .admin a {
    background-color: #1C3144;
    color: #F2F5F7;
    padding: 5px;
    border: 2px;
    border-color: #C98686; 
}

ul.admin a { 
    display:block;
}

/* Buttons  ---------------------------------------------------------------------------------------------------------------------*/
a.button {
    display:block;
    background-color: #1C3144;
    color: #F2F5F7;
    padding: 5px;
    border: #F3F6F7;
}

a.button:hover {
    background-color: #510D0A;
}

a.ibutton {
    background-color: #1C3144;
    color: #F2F5F7;
    padding: 5px;
    border: #F3F6F7;
}

a.ibutton:hover {
    background-color: #510D0A;

}

/* Buttons used as menu on info page  ---------------------------------------------------------------------------------------------------------------------*/
ul.button {
    list-style: none;
    float:left;
    clear:left;
    padding-left: 0px;
    padding-right:0px;
    margin-right: 5px;
    
 
}

ul.button li {
    list-style: none;
    display:block;
    background-color: #1C3144;
    color: #F2F5F7;
    padding: 1px;
    margin: 1px;
    border:none;
}

ul.button a {
    text-decoration:none;
    display:block;
    background-color: #1C3144;
    color: #F2F5F7;
    padding: 1px;
    margin: 1px;
    border:none;
}

ul.button a:hover {
    text-decoration:underline;
    display:block;
    background-color: #1C3144;
    color: #F2F5F7;
    padding: 1px;
    margin: 1px;
    border:none;
}




/* General theme  ---------------------------------------------------------------------------------------------------------------------*/

h1 {
    font-family:Whyte,"Pathway Gothic One", Helvetica, Arial, sans-serif;
    font-weight:400;
/*    text-transform:uppercase; */

}


h2 {
    font-family:Whyte,"Pathway Gothic One", Helvetica, Arial, sans-serif;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:2px; 
}

table {
    border-collapse: collapse;
}

th {
    font-weight: 800;
}

td {
    margin-left:40px;
    margin-right: 40px;
    margin-bottom:20px;
}

li {
    margin-bottom:5px;
}


p{
    line-height:1.4;

}

img.wide {
        max-width: 95%;
}

/* Specific classes (warnings)  ---------------------------------------------------------------------------------------------------------------------*/


p.redtext {
    color: red;
    }

.warnings {
    color: red;
    font-weight: 500;

}

/* FORMS ---------------------------------------------------------------------------------------------------------------------*/
form {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 3px;
    font-size: 16px; /* Increase font-size */ 
    }
    
#feedback form {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 3px;
    font-size: 16px; /* Increase font-size */ 
    }

form div  {
    display: table;

    }
    
form p, .row0, .row1 , .row {
    display: table-row;  
    padding: 10px;

    }
    
.row1 {
   background-color: #E6ECEF;
}
    
input[type = submit] {
    background-color: #1C3144;
    color: #F2F5F7;
    border-color:#F2F5F7;

}

input[type = hidden] {
    display: none; 

}

div.captcha_wrapper {
    display: table-row; 
    }
div.captcha_wrapper div {
    display: table-cell; 
    column-span: all;
    }

div label  {
    display: table-cell; 
    padding: 5px;
    margin: 5px;

    }
    
div input  {
    display: table-cell;
    padding: 5px;
    margin: 5px;

    }

div select  {
    display: table-cell;
    padding: 5px;
    margin: 5px;
    }

/* Page specific ---------------------------------------------------------------------------------------------------------------------*/



.trophies {
	border-collapse: collapse;
}

.trophies tr,td, th {
	border-top: 1px solid #510D0A;
	border-bottom: 1px solid #510D0A;
	margin: 0px;
	padding: 5px 5px;
        vertical-align: text-top;
}

.trophies img {
        max-width: 25%;
        max-height: auto;
        padding-right: 5px;


}

.trophies img:hover {
        max-width: 100%;
        max-height: auto;
        padding-right: 5px;


}

.schoolinfo h4 {
    color: #1C3144;
    padding-top: 0;
    margin-top:0;
    
    }


.schoolinfo tr, td, th {
    text-align: left;
    vertical-align: top;
    font-size: 100%;
    border: none;
    }
    
.newsbox h3 {
    color: #1C3144;
    padding-top: 0;
    margin-top:0;
    
    }
    



/*Flexible boxes - used on home page for news,  on info page, and on manage schools page to breakup the page 
---------------------------------------*/

.newsbox div {
		border: none;
		background-color: #E6ECEF;
		flex: 1;
		margin-right:1%;
		margin-top:1%;
		margin-bottom:1%;
		padding: 1%;
		}
		
.schoolinfo div {
		border: none;
		background-color: #E6ECEF;
		flex: 1;
		margin-right:1%;
		margin-top:1%;
		margin-bottom:1%;
		padding: 1%;
		}
                
div.photo img {
                max-width: 90%;


}




@media (min-width: 768px) {
	.newsbox {
		border: none;
		display: flex;
		flex-wrap:wrap;

		}
	
	.newsbox div {
		border: none;
		background-color: #E6ECEF;
		flex: 1;
		flex-basis:45%;
		margin-right:1%;
		margin-top:1%;
		margin-bottom:1%;
		padding: 1%;
		}

	.schoolinfo {
		border: none;
		display: flex;
		flex-wrap:wrap;

		}
	
	.schoolinfo div {
		border: none;
		background-color: #E6ECEF;
		flex: 1;
		flex-basis:45%;
		margin-left: 0%;
		margin-right:0%;
		margin-top:1%;
		margin-bottom:1%;
		padding: 1%;
		}
		
	div.final {
		margin-right: 1%
	}
		
	.newsbox .fullwidth {
		flex-basis:95%;
		}

}

@media (min-width: 1400px) {
	.schoolinfo {
		border: none;
		display: flex;
		flex-wrap:wrap;

		}
	
	.schoolinfo div {
		border: none;
		background-color: #E6ECEF;
		flex: 1;
		flex-basis:22%;
		margin-left: 0%;
		margin-right:0%;
		margin-top:1%;
		margin-bottom:1%;
		padding: 1%;
		}
		
	 div.final {
		margin-right: 1%
	}   
		
	.fullwidth {
		flex-basis:90%;
		}

}

td.sectionHead {
    font-weight: 700;
}

/*Results page  ---------------------------------------------------------------------------------------------------------------------------------------------------------*/

#searchBoxes {
    border: 1px solid #510D0A; /* Add a grey border */
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 3px;
    font-size: 16px; /* Increase font-size */

}

#searchBoxes label {
    padding-right: 10px;
    display: inline;
}

#searchBoxes input {
    display: inline;
}



#searchBoxes div {
    margin-bottom: 12px;
    margin-left: 2%;
    margin-right: 2%;
}

#searchBoxes div.textSearch {
    margin-bottom: 0px;

}



#loadingMsg {
    font-size: 150%; /* Increase font-size */
    font-weight: 500;
}

#firstname ,  #surname, #school {
  width: 95%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
  
}

#Ymin, #Ymax {
  
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
  
}

#ajaxTable {
  border-collapse: collapse; /* Collapse borders */
  width: 100%; /* Full-width */
  border: 1px solid #ddd; /* Add a grey border */
  font-size: 18px; /* Increase font-size */
}

#ajaxTable th, #ajaxTable td {
  text-align: left; /* Left-align text */
  padding: 12px; /* Add padding */
}

#ajaxTable tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

#ajaxTable tr.header, #ajaxTable tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #f1f1f1;
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE" 
}

/*CSS Menu -------------------------------------------------------------------------------------------------------------------*/

#cssmenu
{
    width:auto;
    display:block;
    text-align:left;
    font-family:"Pathway Gothic One", Helvetica, Arial, sans-serif;
    line-height:1.2;
    border-top: 2px solid #510D0A;
    border-bottom: 2px solid #510D0A;
    margin-left: 2px;
    margin-right: 2px;
    clear:both; 
   
    
}
#cssmenu ul
{
    width:auto;
    display:block;
    font-size:0;
    text-align:left;
    color:#000000;
    background-color: #FFFFFF;
    border: transparent;
    margin:0; 
    padding:0;
    list-style:none;
    position:relative;
    z-index:999999990;
    
} 

#cssmenu li
{
    display:inline-block;
    position:relative;    
    font-size:0; 
    margin:0;
    padding:0;
}

/*Top level items
---------------------------------------*/

#cssmenu >ul>li>span, #cssmenu >ul>li>a 
{   
    font-size:22px;
    color:inherit;
    text-decoration:none;
    padding:20px 20px; 
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:2px;   
    display:block;   
    position:relative;
    transition:all 0.3s;
}
#cssmenu li:hover > span, #cssmenu li:hover > a
{  
    color:#FFFFFF;
    background-color:#1C3144;
}

/*Sub level items
---------------------------------------*/
#cssmenu .dropdown
{
    text-align:left;
    left:0;
    font-family:inherit;
    color: #222222;
    background-color:#FFFFFF;
    border:none;
    position:absolute;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    display:none;
    opacity:0;
    cursor:default;
}

#cssmenu .dropdown li {
    display: block;  
}

#cssmenu .dropdown li > span, #cssmenu .dropdown li > a, #cssmenu .clm a, #cssmenu .clm h3 
{
    font-size:16px;
    font-weight:400;
    font-family:inherit;
    margin:0;
    padding:8px 20px; 
    display:block;
    color:inherit;
    text-decoration:none;
}
#cssmenu .clm h3 {
    font-size:20px;
    font-weight:700;
}
#cssmenu .sub-item {
    background-color:#FFFFFF;
    position:relative;       
    transition:all 0.3s;
}

#cssmenu .dropdown li:hover > span, #cssmenu .dropdown li:hover > a
{

    color:#ffffff;
    background-color:#1C3144;
}

#cssmenu .clm a:hover
{
    color:#000000;
    transition:color 0.2s;
}

#cssmenu .dropdown.right0 {left:auto;right:0;} 
#cssmenu .dropdown li > .dropdown.right0 {left:auto;right:100%;} 
       
#cssmenu li.full-width{
    position:static;
}
#cssmenu li.full-width .dropdown{
    width:100%;
    left:0;
    box-sizing:border-box;
}  

#cssmenu li:hover > .dropdown
{
    display:block;
    opacity:1;
    z-index:1;
}

#cssmenu .dropdown li > .dropdown
{
    left:100%; right:auto;
    top:0;
}

#cssmenu ul.dropdown
{
    min-width:240px; /* Sub level menu min width */
}

#cssmenu div.dropdown  {
    text-align:center;
}

/* each column */
#cssmenu .clm
{
    text-align:left;
    margin:20px;
    vertical-align:top;/*or middle*/
    width:auto;
    min-width:240px;
    display:inline-block;
    *display:inline;*zoom:1;
}

#cssmenu .clm a:hover
{
    color:#000000;
    text-decoration:underline;
}

/*-----------Arrows----------------*/
#cssmenu .arrow {
    color:inherit;
    border-style:solid; border-width:2px 2px 0 0; padding:5px; transform:rotate(135deg);margin-top:-10px;margin-left:5px;
    position:relative;
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align:middle;
    overflow:hidden;/*for IE6*/
}
        
#cssmenu .dropdown .arrow {
    transform:rotate(45deg);
    top:50%;margin-top:-7px;
    position:absolute;left:auto;right:20px;
} 


@keyframes topItemAnimation{
  from {opacity: 0;  transform:translate3d(-16%, 0, 0);}
  to {opacity: 1; transform:translate3d(0, 0, 0);}
}
#cssmenu li a {animation:none;}
#cssmenu.active li a { animation: topItemAnimation 0.5s ease 0.5s backwards;}
#cssmenu.active li:nth-of-type(1) a { animation: topItemAnimation 0.5s ease 0.08333333333333333s backwards;}
#cssmenu.active li:nth-of-type(2) a { animation: topItemAnimation 0.5s ease 0.16666666666666666s backwards;}
#cssmenu.active li:nth-of-type(3) a { animation: topItemAnimation 0.5s ease 0.25s backwards;}
#cssmenu.active li:nth-of-type(4) a { animation: topItemAnimation 0.5s ease 0.3333333333333333s backwards;}
#cssmenu.active li:nth-of-type(5) a { animation: topItemAnimation 0.5s ease 0.4166666666666667s backwards;}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #cssmenu.active li a{animation:none!important;}}