@charset "UTF-8";
/* CSS Document */
	
	button, body, p, label, div ,form ,a {
		font-weight: normal;
		font-style: normal;
		font-family: Arial, Gotham, "Helvetica Neue", Helvetica, "sans-serif";
		font-size: 1em;
	}
	
    .bookshelf .thumb{
        display: inline-block;
        cursor: pointer; 
        margin: 0px 0.5%; 
        width: 15% !important; 
        box-shadow:0px 1px 3px rgba(0,0,0,.6);
        max-width:160px;
		background-color: darkslategrey;
		position: relative;
		/*transform: scale(.95) skewY(-20deg);*/
    }

	
    .bookshelf .thumb img {
        width:100%; 
        display:inline-block; 
        vertical-align:top;
		position:relative;
		
    }
	
	.bookshelf .thumb img:hover {
      transform: skewY(-5deg) rotateY(5deg);
 	  transform-origin: top left;
		box-shadow:0px 2px 5px rgba(0,0,0,.4);
   /*   transform: scaleX(.85) skewY(-5deg);
 	  transform-origin: top left;*/
	}

    .bookshelf .shelf-img {
        z-index:0; 
        height: auto; 
        max-width: 89%; 
        vertical-align: top; 
        margin-top:-8px; 
    }
	
	.bookshelf .thumb .booktitle {
		padding: 5px;
		color:black;
		position: absolute;
		font-weight: bold;
		font-style: normal;
		font-family: Arial, Gotham, "Helvetica Neue", Helvetica, "sans-serif";
		font-size: .85em;
		display:inline-block;
		background-color: rgba(68,250,207,0.40);
		border-radius: 0 0 4px 4px;
		min-width: 85%;
		visibility: hidden;
		text-shadow: 1px 1px 0px rgba(255,255,255,1);
	}
	
	.bookshelf .thumb:hover .booktitle {
		visibility: visible;
  		animation-name: dropdown;
  		animation-duration: .5s; 
  		animation-timing-function:ease-in; 
  		animation-delay: 0s;
  		animation-direction:normal;
  		animation-iteration-count: 1;
  		animation-fill-mode:forwards;
  		animation-play-state:running; 
	}
	
    .bookshelf .covers{
        width:100%; 
        height:auto; 
        z-index: 99; 
        position: relative;
        text-align:center;
    }
	
    .bookshelf {
        text-align: center;
        padding: 50px 20px 0px;
    }
	
	.bookracks {
		background-color: rgba(249,249,249,0.12);
		border-radius: 23px;
	    height: auto;
		position:fixed;
		top:210px;
		bottom: 2%;
		right: 2%;
		left:2%;
		display :block;
		overflow-y: scroll;
	}
	

	.feature-change {
		background-color: rgba(240,255,5,.5);
		max-width: 65%;
		text-align: center;
		margin: 0px 0px 0px 0px;
		padding: 5px 5px;
		border-radius: 0 0 9px 9px;
		position:absolute;
		top:0px;
		right: 87px;
		min-width: 24%;
		display:block ;
	}

	.library-selection .feature-change {
		display: none !important;
		visibility: hidden;
	}

	.library-selection {
		background-image: url("../images/RA-selector2.jpg");
		background-color: #000;
		background-attachment:fixed;
		background-repeat: no-repeat;
		background-size:cover;
		background-origin: content-box;
		background-position:top left;
		vertical-align: top;
		align-content:center ;
	}
	
	.library-selection-lite {  /*  Low-Bandwidth version */
		background-image: url("../images/RA-selector-lite.jpg");
		background-color: #000;
		background-attachment:fixed;
		background-repeat: no-repeat;
		background-size:cover;
		background-origin: content-box;
		background-position:top left;
		vertical-align: top;
		align-content:center ;
	}
	
	a.headerlink {
	font-size: 1.1em;	
	padding: 4px 10px;
	border-radius:0 0 7px 7px; 
	background-color: #B35800;
	color: white;
	box-shadow: 0px 1px 3px rgba(0,0,0,.8) !important;
	/*font-family: Arial, "sans-serif";*/
	text-decoration: none;	
	border: none;
	}
	
	a.headerlink:hover {
	color:rgba(101,46,0,1.00);
	text-decoration: none;	
	border: 1px rgba(255,255,255,.5) inset;
	}
	
	#help { 
	position: fixed;
	top:-1px;
	left: 250px;
	visibility: visible;
	animation-name: pulsate;
	animation-duration: 3s; 
	animation-timing-function:linear; 
	animation-delay: 0s;
	animation-direction:normal;
	animation-iteration-count: 5;
	animation-fill-mode:forwards;
	animation-play-state:running; 
	}
	
	#websitelink { 
	position: fixed;
	top:-1px;
	left: 40px;
	visibility: visible;
/*	animation-name: pulsate;
	animation-duration: 3s; 
	animation-timing-function:ease-in-out; 
	animation-delay: 0s;
	animation-direction:normal;
	animation-iteration-count: 5;
	animation-fill-mode:forwards;
	animation-play-state:running; 
*/
	}

	#alt-versionlink { 
		position: fixed;
		top:-1px;
		right: 50px;
		visibility: visible;
		animation-name: pulsate;
		animation-duration: 3s; 
		animation-timing-function:ease-in; 
		animation-delay: 0s;
		animation-direction:normal;
		animation-iteration-count: 5;
		animation-fill-mode:forwards;
		animation-play-state:running; 

	}

    #catalog2020,
    #catalog2020lite {
		animation-name: sheen;
		animation-duration: 3s; 
		animation-timing-function:ease-in; 
		animation-delay: 1s;
		animation-direction:normal;
		animation-iteration-count: 6;
		animation-fill-mode:forwards;
		animation-play-state:running; 
    }

/********************************************
*
*     	CSS KEYFRAME ANIMATIONS
*
********************************************/
	@keyframes sheen {
		0%  {
			box-shadow: 0px -6px 6px 0px  rgba(255, 255, 255, .7);			
		}
		25% {
			box-shadow: 0px -8px 6px 0px  rgba(0,222, 0, .7);			
		}
		50% {
			box-shadow: 0px -8px 6px 0px  rgba(0,210, 255, .7);			
		}
		75% {
			box-shadow: 0px -8px 6px 0px rgba(255, 255, 0, .7);
		}
		100%  {
			box-shadow: 0px -4px 0px 0px  rgba(255, 255, 255, .7);			
		}
	}  /*sheen animation */


	@keyframes dropdown {
	  0% {
		  /* transform: translate(0, 0); */
		  top:90%;
		  opacity:0;
		 }

	  100% {
	  /*  transform: translate(0px, -150px);*/
		  top:106%;
		  opacity: 1;
	  }
	}  /*dropdown animation */



	@keyframes pulsate {
		25%, 100% {
			box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.8);			
		}
		0%, 75% {
			box-shadow: 0px 0px 12px 0px rgba(0, 255, 0, 0.9);
		}
	}/*pulsate animation */


	
	@keyframes shake {
	  10%, 90% {
		transform: translate3d(-3px, 0, 0);
	  }

	  20%, 80% {
		transform: translate3d(0px, 0, 0);
	  }

	  30%, 50%, 70% {
		transform: translate3d(-1px, 0, 0);
	  }

	  40%, 60% {
		transform: translate3d(10px, 0, 0);
	  }
	}/*shake animation */
	
/**************************** 
*
*   END of elibrary.css  
*
****************************/