/* 4 font weights added from here http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans     */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600italic,400,600,700);
/* the above seems to be loading loads of foreign glyhs as well...in a file called css (see dev tools resourses) how to I avoid this */


/* this from    https://stackoverflow.com/questions/1202425/making-the-main-scrollbar-always-visible
to stop poping on of scrollbar when vid opens
*/
html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}


#page_wrap{
	max-width: 1200px;
	margin-left: auto;
    margin-right: auto;
	overflow: hidden;
}


#debug_switch_on {     /*this toggles the display of panel on and off */
	z-index: 9999;     /*all the way forward */
	opacity: 0;
	display: inline-block; /*inline-block will cause the element to be considered as text. now you can avoid using float right*/
	background-color: red;
	position: absolute;
	height: 32px;
	width: 32px;
	right: 0px;
	top: 0px;
	margin: 0;
}


#debug_panel {
	z-index: 9998;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: rgba(85,85,85,0.60);
	color: white;
	padding: 10px;
	cursor: pointer;
	line-height: 1.5em;
    font-size: 0.9em;
	font-weight: 400;
	color: white;
}

#logo {
     padding-left: 20px;
}

#mini_logo_only {
	padding: 0px; /* reset padding inheritwfrom list */
	padding-top: 5px;
	padding-right: 10px;
	padding-left: 10px;
}

#mini_logo_only > img {
	opacity: 0;       /* initially not to be seen */
	transform: rotate(-180deg); /* initially upside down */
}

#extra_controls {
	line-height: 1.5em;
    font-size: 0.9em;
	font-weight: 400;
	background-color: #CBCBCB;
	color: black;
}

body{
    padding: 0px;
    margin: 0px;
	font-family: 'Open Sans', sans-serif; font-weight: 600;
	background: url('../images/background.jpg') repeat;
    }

header{    /* this bit carrys title bar */
    background-color: rgba(0,0,0,0.45);
    width: 100%;
    padding: 5px 0;
    color: white;
    text-align: left;
	overflow: hidden;
}
	
header h1 {
	padding-left: 5%;
}

a{
    text-decoration:none;
    color:inherit;
    }
	

/* By default, all HTML elements have a static position, and cannot be moved.
To manipulate the position, remember to first set the CSS position property
of the element to relative, fixed, or absolute   */	
.fixed {          /* this class gets added to sticky elements such as nav.....see line 91 in index##  */
  	position: fixed;
	width: 100%;
  	top:0;
  	z-index:9997;   /* all the way forward */
}


#spacer {   /*needs to be same heigh as the nav */
	z-index:9996;   /* all the way forward */
    opacity: 0;
	height: calc(1.2em + 20px + 19px);	
}


nav {
	overflow: hidden;
}

	

nav ul{
	list-style-type: none; /* i tried to force bullets on, but doesnt work */
	width: 1500px ; /*needs to be extra wide, extra length is cropped by nav (parent) cos overflow is hidden (see above) */
    background-color: rgba(50,60,100,0.65);
    overflow: hidden;
	left: -80px;   /* push it left off screen */
    color: white;
    padding-left: 30px;;
    text-align: left;
    margin: 0;
	position: relative;  /* enables me to shift it off left relative to its parent */
    -webkit-transition: max-height 0.4s;
    -ms-transition: max-height 0.4s;
    -moz-transition: max-height 0.4s;
    -o-transition: max-height 0.4s;
    transition: max-height 0.4s;
}

nav ul li{
    float: left;  /* list items to display in a single line horizonatlly */
    padding-top: 20px; /*pad 15 around each list item */
	padding-bottom: 19px; /*pad 15 around each list item */
	padding-left: 15px; /*pad 15 around each list item */
	padding-right: 15px; /*pad 15 around each list item */
}

nav ul li:hover{
	
    /*background: #399077; /*colour block when hover over menu item*/
	background-color: rgba(70,80,150,0.65);
}


    
section{
    line-height: 1.5em;
    font-size: 0.9em;
    padding: 30px 0px 30px 0px;   /* top right bot left */
    margin: 0 auto;
	font-weight: 400;
	color: white;
}


.handle{              /* the bar that opens the menu when on narrow mobile view */
    width: 100%;
    background-color: rgba(50,60,100,0.65);   /*same colour as behind nav*/
    text-align: left;   /* the text aligns to the left */
    box-sizing: border-box;
    padding: 15px 15px;  /* top&bottom  left&right */
    cursor: pointer;
    color: white;
    display: none; /*hidden by default */
}

#cpBtn{              /*menu hamburger button   inpiration from    http://www.developphp.com/view.php?tid=1418  */
	float: right;    /*style the outer box for the icon*/
	width: 20px;
	height: 28px;
	/* background: linear-gradient(#FFF,#DDD); */
	/*border: #AAA 1px solid;*/   /*a border box around the 3 lines */
	border-radius: 3px;
	padding: 0px 18px;   /* top&bottom  left&right */
	cursor: pointer;
}

#cpBtn > div{        /*style the lines within the icon*/
	width: 22px;
	height: 3px;
	background: #FFF;
	margin: 3px 0px;
	border-radius: 4px;
}

/*---------------DYNAMIC CONTENT----------------*/

 




#videowrap {      /* this is for loading html content into */
	/*  added 2 lines as per      http://coolestguidesontheplanet.com/videodrome/videojs/   for responsive */
	max-width: 1200px;	
	position: relative;
	margin: 0px auto;
	background-color: rgba(0,0,0,0); /*colour of block under video has 0 opacity*/
	text-align: right;
	color: white;  /* text colour */
	font-family: 'Open Sans', sans-serif; font-weight: 400;	
}

#videopadding {
	padding: 25px 0 15px 0;  /*  top right bot left */
}

.slideup {
	max-height: 0;            
	overflow-y: hidden;
	-webkit-transition: max-height 2.0s ease-in-out;
	-moz-transition: max-height 2.0s ease-in-out;
	-o-transition: max-height 2.0s ease-in-out;
	transition: max-height 2.0s ease-in-out;
}

.slidedown {            
	overflow-y: hidden;
	-webkit-transition: max-height 2.5s ease-in-out;
	-moz-transition: max-height 2.5s ease-in-out;
	-o-transition: max-height 2.5s ease-in-out;
	transition: max-height 2.5s ease-in-out;          
	/*max-height: 900px ;  removed 9 oct 2025   */            
}  


#vidtext {
	/*float: right; */
	text-align: left;
	position: relative;
    top: 20px;
    padding-bottom: 20px;
}

.outer {
	    margin-left: auto;   /* these lines center the stuff */
    	margin-right: auto;
		width: 90%; /* 90 percent of its parents width */
		background-color: rgba(0,0,0,0); /*colour of block under video */
		text-align: left;
}



.make_it_show {   /*used for the close prev and next buttons*/
	opacity: 1 !important;    /*important can override natural precedence in css */
	transition: opacity 1s;
	-moz-transition: opacity 1s;
	-webkit-transition: opacity 1s;
}

.make_it_hide {   /*used for the close prev and next buttons*/
	opacity: 0 !important;    /*important can override natural precedence in css */
	transition: opacity 1s;
	-moz-transition: opacity 1s;
	-webkit-transition: opacity 1s;
}

/*separated closeBtn in 2 sections to get fade over to work */

#closeBtn {
	z-index: 8040; /* layered over the video*/
	opacity: 1;
	right: 0px;
	position: absolute;
	margin: 0;
	cursor: pointer;
	padding: 12px 0px 12px 0px; /* top right bot left*/
	
}

#closeBtn:before {    /*using pseudo class to insert content */
	font-family: VideoJS;
	content: "\e017";  /* close icon*/
	font-size: 1.8em;
	color: white;
	background-color: black;
	background: rgba(0,0,0,0.3);	
	padding: 12px 15px 12px 15px; /* top right bot left*/
	
}

#nextBtn {
	z-index: 8040;
	opacity: 1;
	right: -55px;
	position: absolute;
	margin: 0;
	cursor: pointer;	
	padding: 6px 0px 12px 0px; /* top right bot left*/
}

#nextBtn:before {
	font-family: VideoJS;
	content: "\e015"; /* chevron right */
	font-size: 1.5em;
	color: white;
	padding: 6px 0px 12px 6px; /* top right bot left */
}

#prevBtn {
	z-index: 8040;
	opacity: 1;
	right: -35px;
	position: absolute;
	margin: 0;
	cursor: pointer;	
	padding: 6px 0px 12px 0px; /* top right bot left*/
}

#prevBtn:before {
	font-family: VideoJS;
	content: "\e016"; /* chevron left */
	font-size: 1.5em;
	color: white;
	padding: 6px 15px 12px 15px; /* top right bot left*/
}



/*-----------------NEWS SECTION-------------------*/
/* indicate that a news item is clickable to load a clip*/
.warwick {
	cursor: pointer;
	
}


/*---------------GALLERY SECTION----------------*/

.gallerysection {   /* this is parent conatiner for all the items */
	margin: 0 auto;
	list-style: none;
	text-align:center;    /* this centres the image within parent
	/* border: .1em solid #0fd;	 */
	background-color: rgba(0,0,0,0.45);
	padding: 10px 5px;  /*10 at top&bot    5 at left&right  */
}

.gallerysection li {   /*each icon is a list item, and each list item has padding all around it*/
	display: inline-block;
	width: 210px;   /* the width of each icon and caption, images will resize if this is reduced, but text stays same size*/
	margin: 0px; /*gaps around each item */
	padding: 5px 5px 10px 5px; /* top  ?  bot  ?  note that gallerysection padding will override this*/
	text-align: left; /* caption text sticks to the left side*/
	position: relative;
}

.gallerysection figure {
	cursor: pointer;
	overflow: hidden;   /*crops the elements within  i.e the img and caption when they move up*/
	margin: 0;
	position: relative;
	/*border: 6px solid #fff; */
	/*box-shadow: 0 0 5px rgba(0, 0, 0, .3); */
}

.gallerysection figure img {
	/*max-width: 100%; not sure why I put max width here*/
	width: 100%; /*strangely this fixes img being to narrow wjhen single icon across width */
	display: block;
	position: relative;
	-webkit-transition: all;
	-o-transition: all;
	transition: all;
}



.gallerysection li figure figcaption {   /*styling the text within the caption*/
	padding-left: 15px;  /* pads the caption away from left side */
	font-weight: 400;
	position: absolute;   /*fixes the caption over the image area within the figure*/
	top: 0; /*align it to top*/
	right: 0; /*align it to left*/
	background: rgba(75,68,68,0.5);  /*color of the block under the text*/
	color: #fff; /*white color of text on the caption block */
}

.rollovericon figure img {   /* img elements within div within boxsection */
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s; /*sets the speed of the image move*/  
	/*    width: 150px;   you can alter the size of the image here */
}


.rollovericon figure:hover img {    /* the whole div area is reacts to the cursor, the img is the bit that moves*/
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

.rollovericon figure:hover figcaption {
	opacity: 1; /*the description appears when hovered over*/
	-webkit-transform: translateY(202%);
	-moz-transform: translateY(202%);
	-ms-transform: translateY(202%);
	transform: translateY(202%);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s;
	transition: transform 0.4s, opacity 0.1s;    /*caption move is completed in 0.4secs, opacity is up is .1secs */
}

figcaption span { /*styling the top 'span' text within the caption*/
	font-weight: 600;
}



.rollovericon figcaption {
	height: 34%; /*sets the height of the caption box area*/
	width: 100%; /*needs to be icon width - 2x padding */
	/* top: auto; /* Aligns my caption block to top of the img*/
	left: 0;
	top: 0;
	opacity: 0.5; /* By default you cant see it */
	-webkit-transform: translateY(300%); /*push off down by whole height of the img*/
	-moz-transform: translateY(300%);
	-ms-transform: translateY(300%);
	transform: translateY(300%);    /*caption is all the way off when is cursor is not hovering over*/ 
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
	transition: transform 0.4s, opacity 0.1s 0.3s; /*the default (not hover) caption moves off over .4secs */
}



	
	








@media screen and (max-width:580px){        /*Switch to Mobile NAV */
    nav ul{
    max-height: 0;    /*whole nav list hidden by default on mobile view*/	
    }

	/*
	nav > ul {
		left: 0px;    bring mini logo and all items on screen 
	}*/
    
    .showing{
    max-height: 20em;   /*nav list reveals when showing class is added by javascript */
	/*left: 0px !important; */
    }
    
    nav ul li{
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    text-align: left;
    }
	
	section{     /*dynamically change the font size in section if smaller width - by JON*/
    line-height: 1.3em;
    font-size: 1.2em;
	}
    
    .handle{
    display: block;
    }
	
	.rollovericon figure figcaption {
	opacity: 1; /*HAVE ALL THE CAPTIONS APPEAR WHEN IN A MOBILE SIZE VIEWPORT*/
	-webkit-transform: translateY(200%);
	-moz-transform: translateY(200%);
	-ms-transform: translateY(200%);
	transform: translateY(200%);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s;
	transition: transform 0.4s, opacity 0.1s;    /*caption move is completed in 0.4secs, opacity is up is .1secs */
	}
}  /* END OF MOBILE NAV styling */


@media screen and (max-width:5000px){   /*IF IT SMALLER THAN 5000px */  
	body {
		margin-left: auto;
    	margin-right: auto;
		max-width:1380px;
		/*   background-color: #b0e0e6;    try changing bg color to check scope */
	}
	.gallerysection li{
	width:18.5%    /*up to this width, room for 4 in a row to float horizontally*/
	}
}

@media screen and (max-width:1380px){     
	.gallerysection li{
	width:18.5%    /*up to this width, room for 5 in a row to float horizontally*/ 
	}
}

@media screen and (max-width:1240px){   /*when page wrap nearly fills width 1200 move text away from the edge*/  
	#vidtext, section {
		padding-left: 20px;
		padding-right: 20px;
	}
	header > a > img {   /* the ibox logo */
		padding-left: 20px;
	}
}



@media screen and (max-width:1150px){     
	.gallerysection li{
	width:22.5%    /*up to this width, room for 4 in a row to float horizontally */
	}
}

@media screen and (max-width:920px){     
	.gallerysection li{
	width:30.5%    /*up to this width, room for 3 in a row to float horizontally*/
	}
}


@media screen and (max-width:690px){     
	.gallerysection li{
	width:45%    /*up to this width, room for 2 in a row to float horizontally */
	}
}

@media screen and (max-width:460px){
	.gallerysection li{
	width:94%    /*up to this width, room for 1 in a row to float horizontally */
	}
}