/*
Custom or edited styles
*/

/* Main page layout */
html {overflow-y:scroll;}
body {min-width:300px;}

a {text-decoration:none;color:#243d7c;}

a:hover {text-decoration:underline;color:#243d7c;}

/*.w3-main-cci{margin-left:360px;margin-right:360px;min-width:600px;}*/
.w3-main-cci{margin-left:305px;margin-right:5px;padding:0px 5%;}

.headImg {margin-right:0;margin-left:auto;width:300px;}

.headImg img {float:right;height:60px;margin-right:8px;border-radius:5px;}
.headImg img.last {margin-right:0px}

.cci-blue{color:#fff!important;background-color:#243d7c!important}
#cciTopMenu.cci-blue:hover{color:#fff!important;background-color:#1d3163!important;opacity:0.95!important}
#cciSidebar.w3-button:hover{color:#000!important;background-color:#ccc!important}
#cciSidebar a {color:#fff;}
#cciSidebar a:hover{text-decoration:none;}

/* The following prevents scrolling on touchscreen interfaces :( */
/* #cciSidebar {overflow-y:hidden;} */
#cciSidebar a {font-size:85%;} 
   
#cciSidebar img {width:100%;margin-left:auto;margin-right:auto;display:block;margin-bottom:30px;}
.cci-text-blue,.hover-cci-text-blue:hover{color:#243d7c!important;}
/*#cciTopMenu img {height:100%;}*/
#cciFooter div {margin-top:40px;}
#cciFooter img {float:right; margin:50px 5px 5px 5px; clear:right; padding:0px;width:230px;}
.w3-bar .w3-bar-item{padding:8px 36px;float:left;width:auto;border:none;outline:none;display:block}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 36px;text-align:left;border:none;outline:none;white-space:normal}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}

.biglink {font-family:monospace;word-wrap:break-word;text-align:center;text-decoration:underline;}

/*
Encode custom horizontal bars
*/
.hline-80 { width:80%; height:2px; background: #DEDEDE; margin: 2em auto;padding:0; }
.hline-100 { width:100%; height:1px; background: #DEDEDE; margin: 2em auto;padding:0; }
.cci-hr {border-radius:4px;width:80px;border:5px solid #243d7c;text-align:left;margin-left:0;}


/* ---------------------------------------------------- */
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
a.sidebar-accord.active, a.sidebar-accord:hover {
    color:#000!important;
	background-color:#fff!important
	}
	
/* Add a class to make the menu pop open automatically  on equ pages */
.sidebar-equActive {
color:#000!important;
background-color:#fff!important
}
	
div.sidebar-panel-hide{
display:none;
}	
div.sidebar-panel {
	margin-left:20px;
    padding: 10px 40px;
    background-color: #374b98;
}
div.sidebar-panel a {text-decoration:none;}

div.sidebar-panel ul {padding:0px;margin:0px;font-size:95%;list-style-type:none;}
div.sidebar-panel ul li {padding:5px 0;margin:5px 0;}
div.sidebar-panel ul li:hover {background-color: #243d7c;}

.bar-item-custom{
display: block;
padding: 8px 36px;

}

/* ---------------------------------------------------- */


/* Rules for frontpage */
.focuson {margin-top:80px;}
.focuson img {width:100px;display:inline-block;float:left;margin:10px;border-radius:10px;}
.focuson-content {display:hide;width:85%;max-width:800px;border:2px solid #DEDEDE;border-radius:12px;padding-left:20px;padding-right:20px;margin-left:auto;margin-right:auto;}

.w3-badge {cursor:pointer;height:13px;width:13px;padding:0}


/*
Rules for gallery
*/
.galThumb {border: 2px solid #dedede;border-radius:8px;padding:8px;margin-bottom:16px;}
.galThumb a {text-decoration: none;}
.galThumb h3 {text-align:center;text-decoration: none;}
.galThumb img {margin:5px auto; display:block; max-width:300px; width:80%;}
.galThumb img:hover {cursor: -moz-zoom-in; cursor: -webkit-zoom-in;cursor: zoom-in;}
.galThumb video {margin:5px auto; display:block; max-width:300px; width:80%;}
.readmore {font-size:80%;font-style: italic;text-align:right;}

/* Colours for trophies. Gold and Silver same as HTML colour codes, bronze is SaddleBrown */
.gold {color:#FFD700;}
.silv {color:#C0C0C0;}
.bron {color:#8B4513;}

/* Fix iFrame sizing */
.pres {
    position: relative;
	/*16:9 video*/ 
    padding-bottom: 56.25%;
	/*4:3 video*/
	/*padding-bottom: 75%;*/
/*     padding-top: 35px;*/
    height: 0;
    overflow: hidden;

}

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

/* Whole Window */
.w3-modal{z-index:3;display:none;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.8);}
/* Just the modal element */
.w3-modal-content{margin:auto;position:relative;padding:20px;outline:0;width:80%;max-width:800px;background-color:rgba(0,0,0,0.3);border-radius:10px;}
.w3-modal-content img{width:100%;margin-left:auto;margin-right:auto;display:block;}
/* .w3-modal-content img:hover {cursor: -moz-zoom-out; cursor: -webkit-zoom-out;cursor: zoom-out;} */
.w3-modal-content p{color:#EEE;}
.w3-modal-content a{color:#93a4d4;}

/*
Rules for equipment page
*/
.equThumb {border: 2px solid #dedede;border-radius: 5px;padding:5px;}
.equThumb a,a:hover {text-decoration: none;}
.equThumb h3 {text-align:center;text-decoration: none;color:#000;}
.equThumb img {margin:5px auto; display:block; max-width:300px; width:80%;}
.equ_hover :hover {background:#dbe0f0;}
/* Main image for individual equipment pages */
.equ_img {width:70%;max-width:500px;margin:0px auto;display:block;border-radius:5px;}

/*
Rules for individual equipment page
*/

div.equipPage h3{margin-top:30px;text-align:center;}

div.props {
	display:block;
	/* width:700px; */
	margin-left:auto;
	margin-right:auto;
	margin-bottom:30px;
	padding:0 0 12px 0;
	text-align:center;
	}
	div.props ul, div.props li {
		margin:0;
		padding:0;
		list-style:none;
		display:block;
		}
div.props li {
	/* Inline-block stops overlaps when they wrap to next line */
	display:inline-block;
	margin:6px;
	
	}
/* div.props li.last{
	margin-right:0px;
	} */
	div.props ul.laser li{
	padding:5px;
	border-width:3px;
	border-radius:8px;
	border-style:solid;
	}
	
div.apps {
/* width:80%; */
text-align:justify;
margin-left:auto;
margin-right:auto;
font-size:105%;
}
div.apps img {
display:block;
margin-left:auto;
margin-right:auto;
width:80%;
/* max-width is overridden inline on certain elements that are only 300px wide */
max-width:800px;
}
/* Add a class to deal with images on equipment pages you want to scale (spectra etc) */
.scaleImg {max-width:450px;width:80%}

/* Styles for epi which has additional category for filter sets */

div.props_filters {
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:30px;
	padding:0 0 12px 0;
	text-align:center;
	}

div.props_filters  ol{
list-style:decimal outside none;
	}
	
/*
Styles for contact page
*/

.cci-people {width:90%;margin-left:auto;margin-right:auto;margin-top:15px;max-width:800px;}
.cci-people  p{margin-top:20px;margin-bottom:0px;text-align:left;}
.cci-people  img{
height:95px;
/* margin-top:15px; */
margin-left:auto;margin-right:auto;
border-width:1px;
border-color:#DBDBDB;
border-radius:8px;
border-style:solid;
border-color: #DEDEDE;
}
.cci-speaker h3 span {color:#777;}

.obfuscate span { 
display: none; 
}

/* Resource page specific styles */
.cci-res img{
width:80%;border-radius:8px;max-width:100px
}


/* Imaging day specific styles */

div.navlist{	
text-align:center;
margin-left:auto;
margin-right:auto;
border:1px solid #DEDEDE;
width:250px;
/* width:40%;
max-width:300px;
min-width:200px; */
	}
	
ul.cci-program{
		list-style:none;
		margin-left:20px;
		padding-left:0;

}	


.cci-speaker img {border:#ccc 1px solid;}
	
/* Rules for Facility page */
	
.cci-facility .w3-row img{margin-left:auto;margin-right:auto;max-width:250px;width:90%;padding:10px;display:block;}
	
/*
- Fix top nav title on small screens ( Centre for Cell Imaging --> CCI )
- Center footer image
- hide long titles
*/
@media (max-width:380px){
.titleShort { display:default;}
.titleLong { display:none;}
.shiftUL {padding-left:10px;margin-left:5px}
.headImg img {height:40px;border-radius:5px;}
.headImg {margin-left:auto;margin-right:auto;width:200px;}
#cciFooter a{margin-left:auto;margin-right:auto;float:none;}
#cciFooter p{text-align:center;}
.cci-speaker img {float:none;display:block;margin-left:auto;margin-right:auto;}
.cci-speaker h3 {text-align:center;margin-top:16px;}
}


@media (min-width:380px){
.titleShort { display:none;}
.titleLong { display:default;}
.shiftUL{padding-left:40px;margin-left:40px}
.cci-speaker img {float:left;display:inline-block;margin-right:16px;margin-bottom:16px;}
.cci-speaker h3 {text-align:left;margin-top:0px;}
}

/* Hide Title when sidebar disappears */
@media (max-width:992px)
{.cciHideMed { display:none;}
.w3-main-cci{min-width:305px!important;}
}

@font-face {
    font-family: 'poppinsregular';
    src: url('../fonts/poppins-regular.woff2') format('woff2'),
         url('../fonts/poppins-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/* Use this to show or hide Imaging workshop page on all sidenavs */
.cci-iw-hide{
/* display:none!important; */
}

/* General use classes for common formatting */
.hide{
display:none!important;
}
.txtcen{
text-align:center;
}

/* Scroll to top */

.scroll-top-wrapper {
    position: fixed;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	text-align: center;
	z-index: 99999999;
    background-color: none;
	color: #243d7c;
	width: 60px;
	height: 60px;
	line-height: 58px;
	right: 30px;
	bottom: 30px;
	padding-top: 2px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}

.scroll-top-wrapper.show {
    visibility:visible;
    cursor:pointer;
	opacity: 1.0;
}
.scroll-top-wrapper i.fa {
	line-height: inherit;
	opacity:0.5;
}
.scroll-top-wrapper i.fa:hover {
	opacity:0.8;
}