/* CSS Document */

.tableheader {background-color: silver;}

.odd {background-color: #EEEEEE;}

.even {background-color: #FFFFFF;}

.tablerows tr:nth-of-type(even) {
      background-color:#EEEEEE;
}

.tablerows2 tr:nth-of-type(odd) {
      background-color:#EEEEEE;
}

/*  trying to get the please wait working - this links to the menu buttons
div.show_pleasewait {display: none;}

body span[itemprop="name"]:hover {
	opacity: 0.5;
	background-color: red;
	
}

.title a:hover + show_pleasewait {
	background-color: red;
   display:block;

}
*/

/*.row :nth-of-type(even) {
      background-color:#EEEEEE;
}
*/

/* ************************************************************************************************ */
/* FOR Takings and Members.cfm */
/* ************************************************************************************************ */
.header_dept{color:navy;font-face:Arial, Helvetica, sans-serif;font-size:25px;text-align:center;font-weight:bold;font-variant:small-caps;text-decoration:underline;}
.header_emailsection{color:blue;font-face:Arial, Helvetica, sans-serif;font-size:25px;text-align:center;font-weight:bold;font-variant:small-caps;border:solid 1px #003366;}
.header_emailsection_noborder{color:blue;font-face:Arial, Helvetica, sans-serif;font-size:25px;text-align:center;font-weight:bold;font-variant:small-caps;}

/* ************************************************************************************************ */
/* HIDE specific colums when on phone - screen width less than 768px */
/* ************************************************************************************************ */

@media all and (max-width: 768px) {
    td.col_hide{
        display:none;
        width:0;
        height:0;
        opacity:0;
        visibility: collapse;       
    }
    th.col_hide{
        display:none;
        width:0;
        height:0;
        opacity:0;
        visibility: collapse;       
    } 
};


/* For Loading Icons/Pages */
/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}


/* ************************************************************************************************ */
/* CSS For Image Zoom - START */
/**THE SAME CSS IS USED IN ALL 3 DEMOS**/    
/* ************************************************************************************************ */

/**gallery margins**/  
ul.gallery{    
margin-left: 3vw;     
margin-right:3vw;  
}    

.zoom {      
-webkit-transition: all 0.35s ease-in-out;    
-moz-transition: all 0.35s ease-in-out;    
transition: all 0.35s ease-in-out;     
cursor: -webkit-zoom-in;      
cursor: -moz-zoom-in;      
cursor: zoom-in;  
}     

.zoom:hover,  
.zoom:active,   
.zoom:focus {
/**adjust scale to desired size, 
add browser prefixes**/
-ms-transform: scale(2.5);    
-moz-transform: scale(2.5);  
-webkit-transform: scale(2.5);  
-o-transform: scale(2.5);  
transform: scale(2.5);    
position:relative;      
z-index:100;  
}

/**To keep upscaled images visible on mobile, 
increase left & right margins a bit**/  
@media only screen and (max-width: 768px) {   
ul.gallery {      
margin-left: 15vw;       
margin-right: 15vw;
	}
	
	audio {width: 120px;}

/**TIP: Easy escape for touch screens,
give gallery's parent container a cursor: pointer.**/
.DivName {cursor: pointer}
}
/* ************************************************************************************************ */
/* CSS FOR IMAGE ZOOM - STOP */
/* ************************************************************************************************ */


/* ************************************************************************************************ */
/* Colour Loader 										    */
/* https://ihatetomatoes.net/create-css3-spinning-preloader             			    */ 	
/* Harry changed colours to Black/Charcoal/Grey							    */
/* ************************************************************************************************ */
/* ALTERNATE Spinner/Loader - Source: http://tobiasahlin.com/spinkit/ 				    */
/* ************************************************************************************************ */

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
/*    border-top-color: #3498db; */
    border-top-color: #000000;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 6px solid transparent;
/*    border-top-color: #e74c3c; */
    border-top-color: #696969;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 6px solid transparent;
/*    border-top-color: #f9c922; */
    border-top-color: #D3D3D3;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

/* ************************************************************************************************ */
/* End CSS for Colour Loader */
/* ************************************************************************************************ */