/* Playing with fonts, just for the sake of it...*/
@font-face {
    font-family: "myfont";
    src: url("Roboto-Regular-webfont.eot");
    src: url("Roboto-Regular-webfont.woff") format('woff'),
         url("Roboto-Regular-webfont.ttf") format('truetype');
}

@font-face {
    font-family: "myfont";
    src: url("Roboto-Italic-webfont.eot");
    src: url("Roboto-Italic-webfont.woff") format('woff');
    font-style: italic;
}

html {
	height: 100%;
	width: 100%;
}

body {
	background: black;
	font-family: myfont;
	color: snow;
	min-height: 100%;
	-webkit-text-shadow: 0 1px 1px rgba(256, 256, 256, 0.5);
	        text-shadow: 0 1px 1px rgba(256, 256, 256, 0.5);
}	

a {
	text-decoration: none;
	color: snow;
	margin-bottom: 0.1em;
	padding: 0.2em;
	padding-left: 0.2em;
	padding-right: 0.2em;
	border-radius: 3px;
	transition-property: background;
	transition-duration: 0.2s;
	transition-timing-function: ease;
}			

a:hover {
	color: hsla(30, 90%, 100%, 0.8);
	background: hsla(30, 20%, 40%,0.7);
}

/* The central issue is to set the figure position and size; this is controlled
by some media queries for some known cases...

(Why doesn't that work without media queries? I wonder...)
*/

figure { 
	-webkit-transform: translate(0px, -15px);
	   -moz-transform: translate(0px, -15px);
	     -o-transform: translate(0px, -15px);
	        transform: translate(0px, -15px);
	margin: 0px;
	padding: 0px;
	text-align: center;
}

figure img {
	max-width: 100%;
	height: auto;
	border: thin ridge snow;
}			

/* Media query for the mac retina display (found on the Web) */
@media 
	only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1025px),
	only screen and (   min--moz-device-pixel-ratio: 2) and (min-device-width: 1025px),
	only screen and (   -o-min-device-pixel-ratio: 2/1) and (min-device-width: 1025px),
	only screen and (        min-device-pixel-ratio: 2) and (min-device-width: 1025px),
	only screen and (           min-resolution: 192dpi) and (min-device-width: 1025px),
	only screen and (            min-resolution: 2dppx) and (min-device-width: 1025px) {
		figure img {
			max-width: 82%;
		}			
}

/* Media query for iPhone 6, landscape */
@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 2)
{ 
		figure img {
			max-width: 55%;
		}	
		h1 {
			font-size: 140%;
		}		
}

/* Media query for iPhone 6, portrait */
@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)
{
		figure img {
			max-width: 85%;
		}			
}

/* Media query for iPad 3&4 retina, portrait */
@media only screen 
	and (device-width: 768px) 
	and (device-height: 1024px) 
	and (-webkit-device-pixel-ratio: 2)
	and (orientation: landscape) {
		figure img {
			max-width: 90%;
		}			
}

/* This *should* be the iPad, but I'm not sure it works */
@media only screen 
  and (min-device-width: 1536px)
  and (max-device-width: 2048px)
  and (orientation : landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
		figure img {
			max-width: 90%;
		}			
}

figcaption {
	font-size: 98%;
}

#creationdate {
	font-size: 80%;
}

/* This is for the CC line */

footer {
	margin-top: auto;
	margin-left: 1em;
	font-size: 75%;
}

footer img {
	-webkit-transform: translate(0px, 2px);
	   -moz-transform: translate(0px, 2px);
	     -o-transform: translate(0px, 2px);
	        transform: translate(0px, 2px);
}

/* This is the header area: title and arrows */

h1 { 
	text-align: center;
	font-style: italic;
	font-size: 140%;
}

.header {
	display: -webkit-flex;
	display:    -moz-flex;
	display:         flex;       
	-webkit-flex-flow: row nowrap;
	   -moz-flex-flow: row nowrap;
	        flex-flow: row nowrap;  
	justify-content: space-around;
}

.arrow {
	font-size: 200%;
	-webkit-transform: translate(0px, -15px);
   -moz-transform: translate(0px, -15px);
     -o-transform: translate(0px, -15px);
        transform: translate(0px, -15px);

}

.first, .previous {
	margin-left:0.3em;
}

.previous {
	margin-right: auto;
}

.next {
	margin-left: auto;
}

.last, .next {
	margin-right: 0.3em;
}