/* If there's no background image, at least differentiate 
Note that the actual background image is set on each project page itself
*/

#wrapper {
	background-color: #cedae2;
	background-image: -moz-linear-gradient(top, #cedae2 0%, #28bef0 100%);
	background-image: -webkit-linear-gradient(top, #cedae2 0%,#28bef0 100%);
	background-image: linear-gradient(to bottom, #cedae2 0%,#28bef0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedae2', endColorstr='#28bef0',GradientType=0 );
}

/* Main sections see also 770px breakpoint */

#main .projinfo,
#main .pictures {
	margin-left:1em;
	margin-top:1em;
	box-sizing:border-box;
	text-transform:uppercase;
	width:400px;
	max-width:100%;
}

/*		Project Information  See also 1000px breakpoint */

#main .projinfo  {
	background-color:white;
	padding:1em;
	opacity:0.9;
	clear:left;
	width:auto;
	margin-right:1em;
	position:relative;
}

#main .projinfo dt {
	font-weight:bold;
	color:black;
}

#main .projinfo dt.location {
	display:none;
}

#main .projinfo dt.location + dd {
	text-transform:capitalize;
}

#main .projinfo a {
	text-decoration:none;
}

/* 			Reset the headings */
#main .projinfo h3,
#main .projinfo h2 {
	font-weight:inherit;
	color:inherit;
	font-size:inherit;
	clear:none;
	border:none;
	margin-bottom:0;
	padding-bottom:0;
}

/*		Small pictures  See also 1000px breakpoint */

#main .pictures {
	background-color:transparent;
	width:auto;
	padding:0;
	text-transform:none;
	margin-bottom:1em;
	top:1.5em;
}

#main .pictures figure {
	width:250px;
	box-sizing:border-box;
	text-transform:none;
	margin-top:1em;
}

#main .pictures figure img {
	box-shadow: 5px 5px 10px black;
	margin-bottom:5px;
	border:3px solid black;
}


#main .pictures figcaption,
#main .pictures p {
	background-color:#999999;
	color:white;
	opacity:0.8;
	padding:0.5em;
	text-align:center;
	border:1px solid black;
}

/*		Actual project See also 770px breakpoint */

/*			Main project text is hidden until shown through the Read More link */


#main #proj {
	position:static;
	overflow:initial;
	clip:initial;
	clear:left;
	margin-right:1em;
	margin-left:1em;
	opacity:0.9;
	width:auto;
	height:auto;
}

#main #proj > div {
	background-color:white;
	padding:1em;
}

#main #proj h4 {
	color:#999999;
}

#main #proj h5 {
	font-style:italic;
}

#projend {
	padding:0.5em;
	padding-left:0.75em;
}


@media (min-width:770px) {
	
	/* Pictures - see also 1000px breakpoint */
	#main .pictures figure {
		float:left;
	}
	
	#main .pictures figure + figure {
		margin-left:1em;
	}
	
	/* Actual project See also 1000px breakpoint */
	#main #proj { 
		margin-right:0;
	}

}


@media (min-width:1000px) {
	
	/*	Small pictures */
	#main .pictures {
	width:400px;
	float:left;
	clear:left;
	margin-top:0;
	}
	
	#main .pictures figure {
		float:none;
		
		width:300px;
		text-align:center;
	}
	
	#main .pictures figure:first-child {
	margin-top:0;
	}
	
	#main .pictures figure + figure {
		margin-left:0;
	}
	
	/* Project information */
	#main .projinfo {
		margin-left:450px;
		clear:none;
		z-index:2;
		margin-bottom:1.5em;
		width:400px;
	}
	
	/* Actual project */
	#main #proj {
		margin-left:450px;
		margin-right:1em;
		padding-top:3em;
		position:relative;
		clear:none;
		min-height:75vh;
	}
	
	/* Shift the PDF link */
	#projend {
		position:absolute;
		right:1em;
		top:0;
		background-color:#CCC;
		color:white;
		margin:0;
		opacity:0.8;
		z-index:1;
		padding:0.2em;
	}
	
	#main #proj:target+#projend {
		bottom:1em;
		left:1em;
		top:auto;
		right:auto;
	}
		
}