body {
	background-color: #ffffff;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/* font-family: 'Courier New", Courier',monospace; */
	font-family: 'Open Sans', sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

p { 
	color: #202020;
	margin-top: 0em;
	margin-bottom: .8em;
	font-size: 1.4em;
}

h3 {
	color: #000000;
	margin-top: .6em;
	margin-bottom: .6em;
	font-size: 1.5em;
}	

.no_show, .search-engine-prefix {
	display: none;
}

/* 
* header
*/

header {
	background-color: #ffffff;
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: auto;
	z-index: 500;
	padding: 15px 0 15px 0;
}

#header-left {
	display: inline;
	color: #111111;
	font-size: .8em; 
	letter-spacing: .2em;
	float: left;
	text-align: left;
	width: auto;
	margin-left: 20px;
	/* padding: 10px 20px 10px 0; */	
}

#header-right {
	display: inline;
	float: right;
	text-align: right;
	width: auto;
	margin-right: 20px;
}

.header-links {
	color: #333333;
	font-size: .8em; 
}

.artist {
	margin-right: 20px; 
	font-weight: bold;
}

.title {
	margin-right: 20px;
}

@media only screen and (max-width: 300px) {

    #header-left {
        float: left;
        width: 100%;
    }
 
    #header-right {
        float: left;
        text-align: left;
        width: 100%;
        /* padding-top: 20px; */
    }  
    
}

/* 
* thumbnail
*/	

#thumbnail-screen {
}

#thumbnail-screen img {
}

.thumbnail-image:hover {
    cursor: pointer;
}

/* 
* thumbnail portrait 
*/
@media only screen and (orientation: portrait) {
	
	#thumbnail-screen {	
		position: absolute;
		left: 50%;      
		transform: translate(-50%, 0);
		width: auto;
		overflow: visible;
		white-space:nowrap;
	}

	#thumbnail-screen div {
		display: block;
	}
	
	#thumbnail-screen img {
		width: 60vw;  
		max-width: 500px;
		height: auto;
		margin-bottom: 80px;	
	} 
}

@media only screen and (max-width: 768px) and (orientation: portrait)  {
	#thumbnail-screen img {
		width: 100vw;  
		max-width: 500px;
		height: auto;
		margin-bottom: 40px;	
	} 

}


/* 
* thumbnail landscape 
*/
@media only screen and (orientation: landscape) {

	#thumbnail-screen {	
		position: absolute;
		top: 50%;    
		left: 80px;  
		transform: translate(0, -50%);
		height: auto;
		overflow: visible;
		white-space:nowrap;
	}

	#thumbnail-screen div {
		display: inline-block;
	}
	
	#thumbnail-screen img {
		height: 90vh;  
		max-height: 500px;
		width: auto;
		margin-right: 100px;	
	} 
	 	
}



@media only screen and (max-width: 768px) and (orientation: landscape)  {
	#thumbnail-screen img {
		height: 100vh;  
		max-height: 500px;
		width: auto;
		margin-right: 40px;	
	} 
}
/* 
* slideshow
*/	
#slideshow-screen {
	/* padding-top: 90px 0 90px 0;   */
/* 	overflow-y: auto; */
}

#left-screen {
	display: inline;
	float: left;
	text-align: left;
	width: 100px;
	height: 100%;
}

#left-screen img {
	height: 40px;  
	width: auto; 
	position: absolute;  
	top: 0;  
	bottom: 0;  
	left: 0;  
	margin: auto auto auto 30px;
}
#left-screen img:hover {
    cursor: pointer;
}



#right-screen {
	display: inline;
	float: right;
	text-align: right;
	width: 100px;
	height: 100%;
}

#right-screen img {
	height: 40px;  
	width: auto; 
	position: absolute;  
	top: 0;  
	bottom: 0;  
	right: 0;  
	margin: auto  30px auto;
}
#right-screen img:hover {
    cursor: pointer;
}


#center-screen {
/* 
	white-space: nowrap;	
	z-index: -1;
 */
	overflow: hide;
}

#slideshow-image:hover {
    cursor: pointer;
}


#center-screen img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -51%);
	-moz-transform: translate(-50%, -51%);
	-o-transform: translate(-50%, -51%);
	transform: translate(-50%, -51%);
	z-index: 500;
}

#center-screen-zoom img {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}

/* 
* slideshow portrait 
*/
@media only screen and (orientation: portrait) {

	#center-screen img {
		height: auto; 
		width: 90%;
		/* max-width: 1200px; */
	}	
	 
}


/* 
* slideshow landscape 
*/
@media only screen and (orientation: landscape) {

	#center-screen img {
		height: 70%; 
		width: auto;
		/* max-width: 1200px; */
	}	 			
 		

}


/* 
* footer
*/

footer {
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	height: auto;
	z-index: 500;
	padding: 10px 0 10px 0;
}

#footer-left {
	display: inline;
	float: left;
	text-align: left;
	width: auto;
	margin-left: 20px;
}

#footer-right {
	display: inline;
	color: #111111;
	font-size: .8em; 
	float: right;
	text-align: right;
	width: auto;
	margin-right: 20px;
}


/* icons */

#header-right img {
}

.icon {
	opacity: 0.2;
}
.icon:hover {
    cursor: pointer;
    opacity: 0.6;
}

	
#thumbnail-icon {
	width: 26px;
	height: 26px;
}

#slideshow-icon {
	width: 26px;
	height: 26px;
	margin-left: 5px;
}


#plus-icon {
	width: 30px;
	height: 30px;
	margin-left: 20px;
}

#minus-icon {
	width: 30px;
	height: 30px;
	margin-left: 20px;
}

/* 
#previous-icon {
	margin-left: 20px;
}

#next-icon {
	margin-left: 5px;
}
 */



.dragscroll:active {
	cursor : -webkit-grabbing;
	cursor : -moz-grabbing;
	cursor : -o-grabbing;
	cursor : grabbing;
}

.loader {
/* 
	border: 16px solid #f3f3f3; 
	border-top: 16px solid #3498db; 
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
 */
	
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
	
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid #3498db;
	width: 120px;
	height: 120px;
	
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;	
	
}

@-webkit-keyframes spin {
  0% { 
  	-webkit-transform: rotate(0deg); 
  }
  100% { 
  	-webkit-transform: rotate(360deg); 
  }
}

@keyframes spin {
  0% { 
  	transform: rotate(0deg); 
  }
  100% { 
  	transform: rotate(360deg); 
  }
}





/* prevent selection */
.no-select {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}