/*
CSS for Glen Erler
© Mike Laye 03/05/2016
*/

* {	
margin: 0;
padding: 0;
border: 0;
}

html {
	font-size: 62.5%;
}

body {
/* background-color: #EDE1C9; "Butter" */
background-color: #EFE5E5;
/* background-color: #9d9587; */
font-family: "Roboto Mono", "Doppio One", courier, sans-serif;
font-size: 1.15rem;
/*color: #cfc4ac;*/
/* color: #b2a997; "Butter" */
color: #43464b;
}

img {
	vertical-align: top;
	}
	
a {
	text-decoration: none;
/*color: #cfc4ac;*/
/* color: #b2a997; "Butter" */
color: #43464b;

}
	
a:hover, 
#folio-title:hover, 
#folio-word-link:hover, 
#folio-image-link:hover, 
#brand a:hover,
#words-area:hover {
/* color: #b2a997; */
/* color: #9d9587; "Butter" */
color: #5b5f66;
}

#wrapper {
/*	background-color: #EDE1C9; "Butter" */
	background-color: #EFE5E5;
	width: 96rem;
	height: 60rem;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -30rem 0 0 -48rem;
/* 		background-color: red; */
}

#nav {
	float: left;
	width: 25%;
/* 	height: 75%; */
/* 	margin-left: 10%; */
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 10.4%;
/* 	background-color: cyan; */
}

#brand {
	padding-bottom: 2.5%;
}	


#detail ul,
#links-area ul {
list-style: none;
/* padding-left: 0; */
}

#detail>ul,
#links-area>ul {
padding-left: 3rem;
}


#detail ul#sections,
#detail ul#titles
 {
	padding-top: 5%;
	font-size: 1.1rem;
}

#detail ul#archives
 {
/* 	padding-left: 1rem; */
/* padding-left: 0; */
padding-bottom: 0.7em;
	font-size: 1.1rem;
}

#detail li {
line-height: 1.4em;
}

#folio-title {
	cursor: pointer;
	font-size: 1.1rem;	
}

#folio-word-link,
#folio-image-link {
	cursor: pointer;
	text-decoration: underline;
	font-size: 1.1rem;
}

#links-area {
/*
	margin-left: 10%;
	margin-top: 10.4%;
*/
	display: none;
/* 		background-color: magenta; */
}

#links-area ul
 {
	padding-top: 4%;
	font-size: 1.1rem;
}

/*
#links-area #articles-exhibitions {
	display: none;
}
*/

#links-area li:first-child {
	margin-bottom: 0.5rem;
}

#stage {
float: left;
position: relative;
/* margin-left: 35%; */
margin-top: 10.4%;
width: 59.4%;
width: 60%;
height: 76.5%;
/* 	background-color: blue; */
}

#image-area {
	height: 100%;
	width: 100%;
	display: table;
/* 	background-color: green; */
}

#sample-image {
	display: table-cell;
	text-align: center;
	vertical-align: bottom;
}

#sample-image {
	position: relative;
}

#sizeInfo {
	position:absolute;
	color: #fff;
	font-size: 1.3rem;
	font-weight: bold;
	top: 40rem;
	left: 22rem;
}

#sample-image.vT {
		vertical-align: top;
}

#sample-image.vM {
		vertical-align: middle;
}

#sample-image.vB {
		vertical-align: bottom;
}

#sample-image.hL {
	text-align: left;
}

#sample-image.hR {
	text-align: right;
}

#sample-image.hC {
	text-align: center;
}

/* added to fix wrong semantic on h */
#sample-image.hM {
	text-align: center;
}

#sample-image.sS img {
	width: 34.1rem;
	height: auto;
}

#sample-image.sM img {
	width: 36.8rem;
	height: auto;
}

#sample-image.sL img {
	width: 40.4rem;
	height: auto;
}

#sample-image.sX img {
	width: 46.7rem;
	height: auto;
}

#sample-image.fP.sS img {
	height: 34.1rem;
	width: auto;
}

#sample-image.fP.sM img {
	height: 36.8rem;
	width: auto;
}

#sample-image.fP.sL img {
	height: 40.4rem;
	width: auto;
}

#sample-image.fP.sX img {
	height: 46.7rem;
	width: auto;
}

/*
#sample-image1 {
	display: table-cell;
	text-align: center;
	vertical-align: bottom;
}

#sample-image1 img {
	width: 50%;
	height: auto;

}

#sample-image2 {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

#sample-image2 img {
	width: 60%;
	height: auto;

}

#sample-image3 {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

#sample-image3 img {
	width: 75%;
	height: auto;

}

#sample-image4 {
	display: table-cell;
	text-align: right;
	vertical-align: middle;
}

#sample-image4 img {
	width: 50%;
	height: auto;

}

#sample-image5 {
	display: table-cell;
	text-align: right;
	vertical-align: bottom;
}

#sample-image5 img {
	width: 60%;
	height: auto;

}

#sample-image6 {
	display: table-cell;
	text-align: right;
	vertical-align: bottom;
}

#sample-image6 img {
	width: 75%;
	height: auto;

}
*/

#words-area {
	position:absolute;
/* 	bottom: 0; */
	top: 10%;
	left: 0;
	padding-top: 10px;
	font-size: 1.1rem;
	text-align: justify;
	font-family: "Roboto";
}

#image-nav {
/*
	display: none;
	position: absolute;
	left: 20px;
	bottom: 0px;
	width: 920px;
	height: 40px;*/
	padding-top: 10px;
	text-align: center;
	font-size: 1.5rem;
}

/* COMMON */
.hidden {
	display: none;
}

/* iPad */
/*
@media only screen
and (max-width: 1024px) {html {font-size: 50%;}	}
*/

/* MacBook Pro */
/*
@media only screen
and (min-width: 1024px)
and (max-width: 1280px) {
html { font-size: 62.5%;}}
*/

/* MacBook Pro Retina */
@media only screen
and (min-width: 1281px)
/* and (max-width: 1600px)  */{

html {font-size: 75%;}
/* 	body {background-color: #FF9;}	 */
}

@media only screen
and (min-width: 1601px) {

html {font-size: 100%;}	
/* body {background-color: #FFC;} */
	
}

@media only screen
and (min-width: 2300px) {

html {font-size: 125%;}	
/* body {background-color: #FFF;} */
	
}