* {
    box-sizing: border-box;
}
/* Mobile sizing first */

/* General*/

html {
	-webkit-text-size-adjust: 100%;
}

body{
	margin: 0;
	padding: 0;
	font-family: "Helvetica";
	font-size: 10pt;
	line-height: 2;
}

h1 {
	font-size:120%;
	text-align: center;
	color:rgb(47, 75, 133);
	border-width:0px;
}

h2 {
	font-size:100%;
	font-weight: bold;
	text-align: left;
	margin-left:5%;
	color:rgb(47, 75, 133);
	border-width:0px;
}

p {
	width:90%;
	margin:auto;
	text-align:justify;	
}


/* Group page: group member name (in bold) */
p.groupmember{
	text-align: center;
	font-weight: bold;
	color:rgb(47, 75, 133);
}

/* Group page: group member description (not in bold) e.g. 'DPhil student'*/
p.groupmemberdesc{
	text-align: center;
	color:rgb(47, 75, 133);
}

/* Smaller, grey text for use in footer */
p.footer_grey{
	margin-top:10px;
	font-size:6pt;
	text-align: center;
	color:rgb(185,185,185);
}

/* Normal text appearance for hyperlinks */
a{
	text-decoration: none;
	color:black;
}
/* Underline hyperlinks on hover */
a:hover{
	text-decoration: underline;
}

.bluebox a {
	color:rgb(47, 75, 133);
	text-decoration: underline;
}

/* Modal box (for Tim Aardvark) */
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.0); /* Transparent */
}

/* Modal Content/Box */
.modal-content {
  background-color: rgba(0,0,0,0.0);
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: none;
  width: 80%; /* Could be more or less, depending on screen size */
  text-align: center;
  max-width: 100%;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Containers and columns */
.content{
	height:100%;
}

.container {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 0px;
}

.row{
	width:100%;
	float: left;
}  

/* All columns occupy full page width in mobile display */
.col {
	width: 100%;
	padding:5px 1%;
	float: left;
	margin-bottom:10px;
	text-align: center;
} 	

/* Column for dates on DJD CV page */
.date.col {
	margin-left:5%;
	width:15%;
	text-align:right;
}

/* Column for info on DJD CV page */
.info.col {
	margin-left:1%;
	width:70%;
	text-align:left;
}

/* Column for group member image - at larger screen sizes this will have padding to make it fall in line with the paragraph when columns are side-by-side */
.groupmemberimage {
	margin-left:0px;
	padding-top:0px;
}

/* Column for footer. Blue background, white text */
.footer.col {
	background-color: rgb(47, 75, 133);
	color:#ffffff;
	margin-top:20px;
	margin-bottom:0px;
	padding-top:20px;
}


#sidebar {
	width:100%;
	text-align:center;
	padding-left:10%;
	padding-right:10%;
	margin-top:25px;
}

p.sidebar {
	background-color:rgb(255,225,124);
	padding:10px;	
	border-radius:5px;
}

#sidebar b {
	color:rgb(47, 75, 133);
}

/* Navigation */
#navbar {
	width:100%;
	text-align: center;
	background-color: rgb(47, 75, 133);
	height:60px;
	position:fixed;
	top:0;
	z-index: 10;
}

ul.nav {
	list-style: none;
	text-align:center;
	position: relative;
	display: block;
	margin:0;
	padding:0;
	line-height: 60px;
	background-color: rgb(47, 75, 133);	
}

ul.nav>li>a{
	color:#ffffff;
	background-color: rgb(47, 75, 133);
	text-decoration: none;
	padding:2px;
	text-transform: uppercase;
	display: none;
}

ul.nav>li>a.open{
	display: block;
	padding:2px;
}

ul.nav>li>a:hover{
	display: block;
	padding:0px;
	border:solid white 2px;	
}

ul.nav>li.icon {
	color:#ffffff;
	font-weight: bold;
}

/* Header and Banner */

/* Different header size necessary for correct page-filling of banner image, see 800px and 1500px break points */

#header {
	width:100%;
	height:100px;
	margin:0 auto;
}

#noheader {
	width:100%;
	height:100px;
	margin:0 auto;
}

#banner {
	height:100%;
	margin-top:60px;
	background:url(img/Bridge_Banner.JPG);
	background-position: center center;
	background-size: cover;
}

hr.header_rule {
	margin-top:-5px;
	width:90%;
	color:rgb(47, 75, 133);
	border:1px solid rgb(47, 75, 133);
}

/* Images */
img.frontpage{
	border-radius: 10px;
	width:90%;
}

img.rounded{
	width:100%;
	max-width: 200px;
	border-radius: 10px;
	margin-bottom: 5px;
}

img.individual{
	width:100%;
	max-width: 300px;
	border-radius: 10px;
	margin-bottom: 5px;
}

img.newmembernews{
	width:100%;
	max-width: 175px;
	border-radius: 10px;
	margin-bottom: 5px;
}

img.biggernews{
	width:100%;
	max-width: 350px;
	border-radius: 10px;
	margin-bottom: 5px;
}

.publication_image{
	text-align: center;
	width:90%;
	margin:auto;
	margin-top:5px;
	margin-bottom:10px;
}

img.publication_image_style {
	max-width: 360px;
	width:100%;
	display: inline-block;
}

.newsimage{
	text-align: center;
}

img.news {
	max-width: 360px;
	width:100%;
	margin-top:10px;
}

img.research {
	margin-top:10px;
	max-width: 360px;
	width:100%;
	display: inline-block;
}

img.groupphoto{
	display:none;
}

img.galleryphoto{
  border-radius: 10px;
  margin-bottom: 2px;
  object-fit: contain;
  max-width: 100%;
  max-height: auto;
}

/* News */
.morenews{
	text-align: center;
	color:rgb(47, 75, 133);
	font-weight: bold;
	margin-top:20px;
}

.newsmonth{
	width:90%;
	margin-top:20px;
	font-weight: bold;
	text-align: left;
	margin-left:auto;
	margin-right:auto;
}

.newsitem{
	width:80%;
	text-align:justify;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	padding-bottom:5px;
}


/* Content */

#overview {
	width:100%;
	max-width: 400px;
}
.publication {
	text-align: justify;
	width:88%;
	margin:auto;
}

#positionsavailablehomepage {
	margin-bottom: 20px;
	background-color:rgb(255,225,124);
	padding: 10px 0px;
	border-radius: 5px;
	width:90%;
	margin-left:5%;
	}

#positionsavailablehomepage b {
	color:rgb(47, 75, 133);
}

#positionsavailable {
	margin-bottom: 20px;
	background-color:rgb(255,225,124);
	padding:5px;
	border-radius: 5px;
	width:90%;
	margin-left:5%;
	}

#positionsavailable b {
	color:rgb(47, 75, 133);
}

p.yellowbox {
	margin-bottom: 20px;
	text-align: center;
	background-color:rgb(255,225,124);
	padding:5px;
	border-radius: 5px;
	}

.yellowbox b {
	color:rgb(47, 75, 133);
	padding:10px;
}

p.bluebox {
	margin-bottom: 20px;
	text-align: center;
	background-color:rgb(153,204,225);
	padding:5px;
	border-radius: 5px;
	}

.bluebox b {
	color:rgb(47, 75, 133);
	padding:10px;
}

#footer{
	margin-left:100px;
}


/* For devices larger than 500px
Need to modify the columns so that the quarter page sized columns occupy half a page */
@media (min-width: 500px) {
  
/* Different header size necessary for correct page-filling of banner image */

#header {
	width:100%;
	height:200px;
	margin:0 auto;
}

	.cquarter.col { 
		width: 50%;
		height:300px;
	}

	.chalf.col {
		width: 50%;
	}

	.date.col { 
		margin-left:5%;
		width:15%;
		text-align:right;
	}
	.info.col {
		margin-left:1%;
		width:70%;
		text-align:left;
	}	

	/* Images */
	img.frontpage{
		border-radius: 10px;
		width:450px;
	}

	img.publication_image_style {
		max-width: 500px;
		width:100%;
		display: inline-block;
	}
	img.news {
		max-width: 500px;
		width:100%;
		margin-top:20px;
	}

	img.research {
		max-width: 450px;
		width:100%;
		display: inline-block;
	}

	img.groupphoto{
		display:inline-block;
		width:90%;
		border-radius: 10px;
		margin-bottom: 5px;
	}

	
	#overview {
		width:100%;
		max-width: 500px;
	}


}

/* For devices larger than 700px */
@media (min-width: 800px) {
	/* Full navigation menu */

/* Different header size necessary for correct page-filling of banner image */

#header {
	width:100%;
	height:250px;
	margin:0 auto;
}

	hr.header_rule {
		width:95%;
	}
	
	img.publication_image_style {	
		max-width: 600px;	
		width:100%;	
		display: inline-block
		image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
	}

	img.recent_pubs_image_sharpened {
		image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
	}

	img.research {
		max-width: 500px;
		width:100%;
		display: inline-block;
	}

	#djd {
		margin-left:10%;
	}

	ul.nav {
		list-style: none;
		text-align:center;
		position: relative;
		display: inline-block;
		margin:0;
		padding:0;
		line-height: 60px;
		background-color: rgb(47, 75, 133);
	}

	ul.nav>li{
			display: inline;
		}

	ul.nav>li>a:hover{
		display: inline;
		border:solid white 2px;
		padding:8px;
		
	}

	ul.nav>li>a{
		color:#ffffff;
		background-color: rgb(47, 75, 133);
		text-decoration: none;
		padding:10px;
		text-transform: uppercase;
		display: inline;
	}

	ul.nav>li>a.open{
		color:#ffffff;
		background-color: rgb(47, 75, 133);
		text-decoration: none;
		padding:10px;
		text-transform: uppercase;
		display: inline;
	}

	ul.nav>li.icon {
		display:none;
	}


	.row{	
		width:100%;
		
		float: left;
	
	}  

	.col {
		width: 100%;
		padding:5px ;
		float: left;
		margin-bottom:10px;
		box-sizing: border-box; 
		text-align: center;
	} 	

	.c1.col            { width: 8.333%; 	}
	.c2.col            { width: 16.666%; 	}
	.c3.col            { width: 25%;      	}
	.c4.col            { width: 33.333%; 	}
	.c5.col            { width: 41.666%; 	}
	.c6.col            { width: 50%;       	}
	.c7.col            { width: 58.333%; 	}
	.c8.col            { width: 66.666%; 	}
	.c9.col            { width: 75.0%;    	}
	.c10.col           { width: 83.333%; 	}
	.c11.col           { width: 91.666%; 	}
	.c12.col           { width: 100%;		}

	.cquarter.col {
		width: 25%; 
		padding-left:3%; 
		padding-right:3%; 
		height:300px;
	}

	.cthird.col {
		width: 30%;
		margin-left:5%;
		text-align: right;
	}
	.ctwothirds.col {
		width: 60%;
		text-align: left;
	}	

	.chalf.col { 
		width: 50%;
	}

	.date.col {
		margin-left:5%;
		width:15%;
		text-align:right;
	}

	.info.col {
		width:70%;
		text-align: left;
	}

	.groupmemberimage {
		margin-left:5%;
		
	}
	#positionsavailablehomepage {
		margin-top:50px;
		margin-bottom: 20px;
		background-color:rgb(255,225,124);
		padding:10px;
		border-radius: 5px;
		width:90%;
		margin-left:5%;
	}


}


@media (min-width: 1500px) {
/* Sidebar */

/* Different header size necessary for correct page-filling of banner image */

#header {
	width:100%;
	height:300px;
	margin:0 auto;
}

/* Higher quality (narrow) banner images for desktop */

#banner {
	height:100%;
	margin-top:60px;
	background:url(img/Garden_Banner_Desktop.JPG);
	background-position: center center;
	background-size: cover;
}


	#sidebar {
		width:15%;
		float:right;
		margin-top:50px;
		margin-right: 1%;
		padding-left:0;
		padding-right:0;
		text-align:center;
	}

	#sidebar {
	width:100%;
	
	padding-left:10%;
	padding-right:10%;
	margin-top:25px;
}
	p.sidebar {
		background-color:rgb(255,225,124);
		padding:10px;	
	}
}