html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

/*ANDROID FIX FOR CHECKBOX HACK*/
body { 
	-webkit-animation: bugfix infinite 1s; 
} 


/*BASE STYLES*/

@font-face {
    font-family: Impact;
	src: url(../fonts/impact.eot) format("embedded-opentype"),
		 url(../fonts/impact.woff) format("woff"),
		 url(../fonts/impact.otf) format("opentype"),
         url(../fonts/impact.ttf) format("truetype");
}

body, header, footer, section, article, nav, aside, figure, figcaption {
   display: block;
   margin: 0;
   padding: 0;
}

body	{
	background: #b9bec1;
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

.clearfix	{
	clear: both;
}
	
img	{
	border: none;/*for IE*/
	width: 100%;
	display: block;
}	

body a	{
	text-decoration: none;
}

.important 	{
	font-weight: bold;
}

.credit, .foreign, .signature	{
	font-style: italic;
}	

ul.list	{
	list-style-type: circle;
}	

ul.list li	{
	line-height: 1.3;
	margin-bottom: .5rem;
}

ul.list li:last-child	{
	margin-bottom: 0;
}

dt	{
	font-size: 120%;
}

dd	{
	margin-bottom: .5rem;
}

.sr_only {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    left: -9999px;
    top: -9999px;
}


/*HEADER*/
	
header	{
	padding: 0;
	border-bottom: 6px solid #b9bec1;
	position: relative;
	height: 0px;
	background: #000000;
	background-repeat: no-repeat;
}	

.general header	{
	background-image: url(../graphics/logo.jpg);
}

.create header	{
	background-image: url(../graphics/blue.jpg);
}

.use header	{
	background-image: url(../graphics/red.jpg);
}

.investigate header	{
	background-image: url(../graphics/purple.jpg);
}

h1	{	
	/*display: none;*/
	border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

h2 {
	font-family: 'Impact', sans-serif;
	font-weight: normal;
	letter-spacing: .1rem;
	margin: 0;
	padding: 0;
	position: absolute;
}	

h2 #create a 	{	
	color: #0280ed;	
}	

h2 #use a 	{	
	color:  #eb4e33;
}	

h2 #investigate a		{	
	color: #8f4cb0;
}	

h2 #create a:hover, h2 #create a:focus, h2 #create a:active, h2 #use a:hover, h2 #use a:focus, h2 #use a:active, h2 #investigate a:hover, h2 #investigate a:focus, h2 #investigate a:active	{
	color: #ffffff;
}	

/*NAVIGATION GENERAL*/

nav ul	{
	list-style: none;
}

nav a	{
	color: #000000;
	border-bottom: 1px dotted transparent;
}

nav a:hover, nav a:active, nav a:focus {
	color: #5b6266;
	border-bottom: 1px dotted #2e3133;
}

nav a.current, nav a.current:hover, nav a.current:active, nav a.current:focus {
	color: #000000;
	border-bottom: 1px dotted #2e3133;
}

/*TOP NAVIGATION*/	

#menu nav li ul	{
	display: none;
}

/*FOOTER NAVIGATION*/

#content ~ nav > ul > li	{
	font-weight: bold;
}
	
#content ~ nav li span	{
	padding-right: 0;
}

#content ~ nav li ul li	{
	font-weight: normal;
}	

/*CONTENT*/
#content	{
	clear: both;
	margin: 0 auto;
}	

#panel	{
	clear: both;
	background: #000000;
	padding: 1rem 2rem;
	line-height: 1.5;
	color: #b9bec1;
	font-family: 'Lato', sans-serif;
}	

p.short	/*short paragraphs on the Home page*/ { 
	margin: 0;
	padding: 0;
}	

/*LINK COLORS*/

.create #panel a	{
	color: #81c0f6;
}

.use #panel a	{
	color: #f28977;
}

.investigate #panel  a	{
	color: #b488ca;
}

.general #panel a, #panel .color a	{
	color: #eed2b5;
}	

#panel a:hover, #panel a:focus	{
	color: #ffffff;
}

/*HEADINGS*/
	
h3, h4 	{
	font-family: 'Impact', sans-serif;
	font-weight: normal;
	letter-spacing: .1rem;
	margin: 0;
}

h5	{
	font-size: 100%;
	font-weight: bold;
	margin: .5rem 0;
}
	
/*FIGURES*/

#panel figure	{
	border: 1px solid #91999d;
}

figcaption	{
	margin: 0;
	background: #b9bec1;
	color: #000000;
	padding: .5rem;
	border-top: 1px solid #91999d;
	line-height: 1.3;
}	

/*ACCORDION*/

.accordion	{
	margin-top: 1rem;
}
	
.accordion label {
	display: block;
	cursor: pointer;
}

.plus, .minus	{
	color: #b9bec1;
	font-size: 1rem;
	font-weight: bold;
	border: 2px solid #b9bec1;
    border-radius: 50%;
	text-align: center;
	padding: 0 .4em .2em;
}	

.accordion label .plus	{
	display: inline;
}	

.accordion label .minus	{
	display: none;
}		

.accordion input:checked + label .plus {
	display: none;
}

.accordion input:checked + label .minus	{
	display: inline;
}

.accordion label .important	{
	margin-left: .5rem;
}

.accordion label:hover .plus, .accordion label:active .plus, .accordion label:focus .plus, .accordion label:hover .minus, .accordion label:active .minus, .accordion label:focus .minus {
	color: #ffffff;
	border: 2px solid #ffffff;
}	

.accordion input{
	display: none;
}

.accordion article{
	margin-left: 2.5rem;
	overflow: hidden;
	height: 0px;
	transition: height 0.3s ease-in-out; 
}

.accordion article p, .accordion article ul	{
	margin-top: .5rem;
}	

.accordion input:checked ~ article {
	height: auto;
	/*transition: height 0.5s ease-in-out;*/
}

/*ARTIFACTS*/

.artifacts	{
	clear: both;
	list-style: none;
	margin: 0;
	padding: 0;
}

.artifacts li	{
	margin: 0;
	padding: 0;
}

.artifacts img	{
	border: 1px solid #91999d;
	opacity: .8;
	margin: 0;
	padding: 0;
	
}	

.artifacts a:hover img, .artifacts a:focus img, .artifacts a:active img	{
	opacity: 1;
}


.six li	{
	position: relative;
	/*margin-bottom: 4rem;*/
}	

.six li span	{
	position: absolute;
	top: calc(100% + .5rem);
	left: 1px;
	right: 1px;
	display: block;
	line-height: 1.2;
	text-align: center;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}	

/*ARTIFACTS PAGE*/

.object	{
	background: #b9bec1;
	color: #1a1b1c;
	font-family: 'Georgia', 'Times New Roman', serif;
	font-size: 110%;
	border: 1px solid #91999d;
	margin-top: 3rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.object:last-child	{
	margin-bottom: 2rem;
}	

.object figure	{
	margin-bottom: 2rem;
}

.object h4	{
	margin-bottom: 1rem;
	color: #1a1b1c;
	font-family: 'Georgia', 'Times New Roman', serif;
	font-weight: normal;
	letter-spacing: 0;
}	

.tombstone	{
	list-style: none;
	line-height: 1.2;
}

.tombstone li	{
	margin-bottom: .5rem;
}	
	
.context	{
	clear: both;
	text-align: right;
	font-weight: normal;
}

#artifacts .context a	{
	color: #1a1b1c;
}
	
#artifacts .context a:hover, #artifacts .context a:focus, #artifacts .context a:active {
	color: #5b6266;
}

/*MORE (LINK IN THE BOTTOM RIGHT CORNER OF THE PAGE)*/

.more	{
	clear: both;
	text-align: right;
	margin-right: -1rem;
	padding: 1rem 3rem 1rem 0;
	background-size: 4rem;
	background-position: right bottom;
	background-repeat: no-repeat;
}

	
.more_general	{
	background-image: url(../graphics/logo.jpg);
	padding-right: 3.5rem;
}

#panel .more_general a	{
	color: #eed2b5;
}

.more_create	{
	background-image: url(../graphics/blue.jpg);
}

#panel .more_create a	{
	color: #81c0f6;
}

.more_use	{
	background-image: url(../graphics/red.jpg);
}

#panel .more_use a	{
	color: #f28977;
}	

.more_investigate	{
	background-image: url(../graphics/purple.jpg);
}

#panel .more_investigate a	{
	color: #b488ca;
}

.more a:hover, .more a:active, .more a:focus	{
	color: #ffffff !important;
}

/*COLOR QUIZ*/


/* entire container, keeps perspective */
.flip-container {
	-webkit-perspective: 600px;
	perspective: 600px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	margin-top: 2rem;
	margin-bottom: 2rem;
	position: relative;
	height: 0;
	cursor: pointer;
}

/* flip the pane when hovered */
.flip-container:hover .back, .flip-container:focus .back, .flip-container:active .back{
	-webkit-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
			transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container:focus .front, .flip-container:active .front {
	-webkit-transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
			transform: rotateY(180deg);
}

/* flip speed goes here */
.flipper {
	-webkit-transition: 0.8s;
	transition: 0.8s;
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
}

.flipper ul	{
	list-style: circle;
}	

/* hide back of pane during swap */
.front, .back {
	/*-webkit-transition: 0.8s;*/
			transition: 0.8s;
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
	position: absolute;
	
}

/* front pane, placed above back */
.front {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	z-index: 2;
	-webkit-transform: rotateY(0deg);/* for firefox 31 */
		-ms-transform: rotateY(0deg);
			transform: rotateY(0deg);
	top: 0;
	left: 0;
}

/* back, initially hidden pane */
.back {
	-webkit-transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
			transform: rotateY(180deg);
	background: #000000 !important;
	height: 0;
	padding-bottom: calc(100% - 2px);
	width: calc(100% - 2px);
	border: 1px solid #b9bec1;
}

.back h4	{
	text-align: center;
}	

.color_expanded	{
	position: fixed;
	top: 1rem;
	right: 1rem;
	bottom: 1rem;
	left: 1rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;/*enable scrolling on iPhone and iPad*/
}

.color_expanded ul	{
	list-style: circle;
}	

#panel.color_expanded figure 	{
	border: none;
}
	
.close	{
	display: block;
	font-size: 1.6rem;
	position: absolute;
	top: 0;
	right: 0;
	padding: 0 1.5rem 0 0;
	font-family: 'Verdana', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}	

.close a	{
	color: #eed2b5;
}	

.color	{
	display: none;
	padding-top: 2rem;
}

.color:target	{
	display: block;
}	

/*BIBLIOGRAPHY*/

.refs li	{
	margin-bottom: .5rem;
}	

/*GALLERY VIEWS*/

#views figure	{
	/*float: left;*/
	width: 100%;
	margin-top: 2rem;
	margin-bottom: 2rem;
}
/*
#views .tall	{
	width: 28%; 
	margin-right: calc(8% - 3px);
}

#views .tall:nth-child(3n)	{
	margin-right: 0;
}

#views .wide	{
	width: 45%; 
	margin-right: calc(10% - 4px);
}

#views .wide:nth-child(odd)	{
	margin-right: 0;
}
*/

/*COLOR MAP*/
.map	{
	position: relative;
}	

.map ul	{
	margin: 0;
	padding: 2rem 0 0;
	line-height: 1.5;
}

.map li	{
	margin-bottom: 1rem;
}	

.fact	{
	position: absolute;
	display: none;
}	

.fact:target	{
	display: block;
}

/*ALTERNATIVE LIGHTBOX*/	
/*#content.map	{
	position: relative;
}

.fact:target ~ div	{
	opacity: .2;
}	

*/

#panel figure.fact	{
	border: none;
	/*border-bottom: 1px solid #91999d;*/
}

#panel figure.fact img	{
	border: 1px solid #91999d;
	border-bottom: none;
	width: calc(100% - 2px);
}	

/*

h3 .white	{
	color: #ffffff;
}

h3 .black	{
	-webkit-text-stroke: 1px #ffffff;
	color: #000000;
	text-shadow:
		
		-1px -1px 0 #ffffff,  
		1px -1px 0 #ffffff,
		-1px 1px 0 #ffffff,
		1px 1px 0 #ffffff;
}

h3 .red	{
	color: #fe0022;
}

h3 .orange	{
	color: #ff6a06;
}

h3 .yellow	{
	color: #ffd902;
}

h3 .green	{
	color: #58cf03;
}

h3 .blue	{
	color: #00c0fe;
}

h3 .pink	{
	color: #ff5ce6;
}	

h3 .purple	{
	color: #9042e4;
}	*/
	
/*FOOTER*/

footer	{
	clear: both;
	width: 100%;
	margin-top: 1rem;
	background: #000000;
	min-height: 3rem;

}	

footer p#copyright	{
	text-align: center;
	margin: 0;
	padding: 1rem;
	font-size: 85%;
	font-family: 'Lato', sans-serif;
}	

footer p, footer a	{
	color: #b9bec1;
}

footer a:hover, footer a:focus, footer a:active	{
	color: #ffffff;
}