@charset "utf-8";

/* CSS Document */

/* ---------- All Pages Body style ---------- */

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

.MainContainer {
	background-color: #d4b291 /* Light Brown */;
	border : 10px solid #906446; /* Dark Brown */
	width: calc(100% - 20px); /* 10px margin either side */
	height: calc(100% - 20px); /* 20px Border */
	position: relative;
	min-height:670px; /* Left-Menu-500 + Minus Header Height-145 + Header Border-5 + MainContainer Border-20*/
}

.Header {
	border-bottom: 5px solid #000000;
	height: 145px;
	width: 100%;
}

.Left-Menu {
	background-color: #906446;
	border-Right: 5px solid #000000; /* #333333 */
	width: 200px; /* calc(18% - 5px);  Minus Right-Border of Left-Menu */
	height: calc(100% - 170px ); /* Minus Header Height-145 + Header Border-5 + MainContainer Border-20*/
	float: left;
	display: inline-block;
	min-height:500px; 
	min-width: 100px;
}

.Content {
	background-color: #e4ccaf;
	width: calc(100% - 205px); /* Minus Left-Menu Width*/
	height: calc(100% - 170px);
	float: left;
	display: inline-block;
	position: absolute;
	overflow-style: auto;
	overflow-y: scroll;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}

.Div_Footer {
	background-color: #d4b291;
	width: 100%;
	height: 20px;
}

table.menu #menu a {
	font-size: 2vmax;
	text-align: center;
	background-color: #d4b291;
	color: #000000;
	font-variant: small-caps;
	text-decoration: none;
}

table.menu #menu, table.menu #menu a:hover, table.menu #menu a-active, table.menu #menu a-active:hover {
	font-size: 2vmax;
	text-align: center;
	background-color: #906446;
	font-weight: bold;
	color: #FFFFFF;
}

table.menu .menu { background-color: #906446; }
		
.TD_Header { 
background-color: #eee2d2; 
}
.Light_Input {
background-color: #eee2d2; border: 1px dashed #999;
}
.TD_Title { 
background-color: #d4b291; 
}
.Dark_Input {
background-color: #e4ccaf; border: 1px dashed #999;
}

.Footer { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; line-height: 22px; color: #333333; }

.legal-Copyright { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; text-decoration: none; margin-right: 5px; }

.legal-Copyright:hover { color: #C9C9C9; }

/* END */



/* ---------- Ticker Code CSS ---------- */

.ticker-wrap {
width: 100%;
color: #e4ccaf;
font-size: 18px;
overflow: hidden;
height: 30px;
line-height: 30px;
background-color: rgba(0, 0, 0, 0.6);
box-sizing: content-box;
}

.blink {
  animation-name: blinker;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  }

@keyframes blinker {
  50% {
    opacity: 15%;
  }
}

.glow {
  animation-name: glow;
  animation-duration: .9s;
  animation-iteration-count: infinite;
}
@keyframes glow {
	/* text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit  */
 from {
	 text-shadow: 0 0 2px black, 0 0 4px black, 0 0 6px black, 0 0 8px black, 0 0 10px black, 0 0 12px black, 0 0 14px black, 0 0 16px black, 0 0 18px black;
 	}
 to {
	 text-shadow: 0 0 2px black, 0 0 4px black, 0 0 6px black, 0 0 8px black, 0 0 10px black, 0 0 12px black, 0 0 14px black, 0 0 16px black, 0 0 18px black;
 	}
	
}

.slide {
  animation-name: slider;
  animation-duration: 35s;
  animation-iteration-count: infinite;
  animation-timing-function: Linear; 
}

@keyframes slider {
	
from {
	  transform: translate3d(102%,0,0); 
	  
}
to {
	 transform: translate3d(-54%,0, 0); 
	
}
}
  	
/* END */

/* ---------- All Link Styles ---------- */
.Special a:link { color: #000000; text-decoration: underline; text-decoration-thickness: 2px; }

.Special a:visited { text-decoration: underline; color: #121212; }

.Special a:hover { text-decoration: underline; color: #FFFFFF; }

.Special a:active { text-decoration: underline; color: #906446; }

.Special { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }

/* END */

/* ---------- Div Table Tags ---------- */
.rTable {
   display: block;
   width: 100%;
}
.rTableHeading, .rTableBody, .rTableFoot, .rTableRow{
   clear: both;
}
.rTableHead, .rTableFoot{
   background-color: #C8C1B9;
   font-weight: bold;
}
.rTableCell {
   border: 0px solid #999999;
   float: left;
   height: 25px;
   padding: 0px 0px;
   width: 24%;
}
.rTableHead {
   border: 0px solid #999999;
   float: left;
   height: 25px;
   padding: 0px 0px;
   width: 15%;
}
.rTable:after {
   visibility: hidden;
   display: block;
   font-size: 0;
   content: " ";
   clear: both;
   height: 0;
}
/* END */

#preview, #Gallery{
		display: flex;
		width: 575px;
		display: inline-block;
		margin: 0 auto;
    }
    #preview img, #Gallery img{
        /*width: 85px;
        height: 85px;*/
		
	max-width:85px;
    max-height:85px;
    width: auto;
    height: auto;

        border-radius: 10px;
        box-shadow: 
		  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12),
  0 0 8px rgba(0,0,0,0.2);
	opacity: 85%;
    }

.zoom {
			display:inline-block;
			position: relative;
		}
		
		/* magnifying glass icon */
		.zoom:after {
			content:'';
			display:block; 
			width:33px; 
			height:33px; 
			position:absolute; 
			top:0;
			right:0;
			background:url(icon.png);
		}

		.zoom img {
			display: block;
		}
.ImageShadows {
display: grid;
  justify-content: center;
  align-items: center;
  text-align: center;
  vertical-align: middle;
margin: 3px 3px; /* Outside Padding */
padding: 2px;  /* Inside Padding */
border: solid 2px; 

/* Image Box Height & Width */
width:100px; 
height:116px;
line-height: 116px;

float: left;  /* Float Box to Left of Last one */
background-color: #eee2d2;
}

.zoom img::selection { background-color: transparent; }