/*html, body {
//    height: 100%;
//}
//html {
//    overflow-y: hidden;
//}
//body {
//    overflow-y: scroll;
//}*/
body {font-family: Lato, Roboto, "Open Sans", "Trebuchet MS", Georgia, Arial, Helvetica, Verdana, sans-serif;}

h1, h2, h3, h4, h5, h6 {
        text-align: left;
}

p.fat {
    margin: 2px 0px 2px 0px;
    padding: 0px 0px 0px 0px;
}
.container {
    max-width:594px;/*550*/
    margin-left:auto;
    margin-right:auto;
    position: relative;
    text-align: left;
    padding-bottom: 50px;
}

.aboutcontainer {
    max-width:594px;/*550*/
    margin-left:auto;
    margin-right:auto;
    position: relative;
    text-align: left;
    padding-bottom: 50px;
    /*background-size: cover; height:480px; padding-top:80px;*/
    background-image: url('/images/aboutbkg.png');
    background-repeat: no-repeat;
    background-position: 50% 100%;
     -webkit-background-size: 100%; 
     -moz-background-size: 100%; 
     -o-background-size: 100%; 
     background-size: 100%; 
}
.pars {
    max-width:490px;/*390*/
    margin-left:20px;
    margin-right:20px;
    position: relative;
    text-align: left;
}
.expire {
    max-width:490px;
    margin: 20px 20px 20px 20px;
    position: relative;
    text-align: left;
    padding: 20px;
    border-radius: 25px;
    border: 10px dotted red;
}
.copyrights {
    max-width:490px;
    margin: 0px 0px 0px 0px;
    position: relative;
    text-align: left;
    padding: 0px;
    border-collapse:collapse;
    border-spacing:0px;
    font-family:Arial, sans-serif;
    font-size:13px;
    font-style: italic;
    color: grey;
}
.disclaimer {
    max-width:490px;
    margin: 0px 0px 0px 0px;
    position: relative;
    text-align: left;
    padding: 0px;
    border-collapse:collapse;
    border-spacing:0px;
    font-family:Arial, sans-serif;
    font-size:13px;
    font-style: italic;
    color: grey;
}

.policyRule {
    max-width:490px;
    margin: 0px 0px 0px 0px;
    position: relative;
    text-align: left;
    padding: 0px;
    border-collapse:collapse;
    border-spacing:0px;
    font-family:Arial, sans-serif;
    font-size:13px;
    font-style: italic;
    color: grey;
}
.visiting {
    max-width:490px;
    margin: 0px 0px 0px 0px;
    position: relative;
    text-align: left;
    padding: 0px;
    border-collapse:collapse;
    border-spacing:0px;
    font-family:Arial, sans-serif;
    font-size:13px;
    font-style:normal;
    color: grey;
}

.container2 {
    width:100%;
    height:auto;
    padding:1%;
}
.iconDetails {
    margin-left:2%;
    float:left; 
    height:68px;
    width:68px; 
}
.h4 { 
    margin:0;
}
table.center {
    margin-left:auto; 
    margin-right:auto;
    background-color:#fff;
    font-family:sans-serif;
    width: 100%;
    /*border: 10px dashed blue;*/
    border-collapse:collapse;
    border-spacing:0px;
    /*
    border-collapse:collapse;
    border-spacing:0px;
    border-width:0px;*/
    /*font-size:20pt;*/
    color:navy;
}
.tableslessContainer  {background-color:#fff;width:100%;border-collapse:collapse;border-spacing:0px;border-spacing:5px;border-style:solid;border-width:0px;}
.tablesContainer  {border-collapse:collapse;border-spacing:0;border-color:#ddd;}
.tablesContainer td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#bbb;text-align:center}
.tablesContainer th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:5px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;text-align:center}
.tablesContainer .tablesContainer-wr72{width:50%; font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;text-align:top;vertical-align: top;}
.tablesContainer .tablesContainer-wr27{width:50%; font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;text-align:center;align:center}

.dateNumLg {
           width: 160px;
           height: 171px;
           background-image: url('../images/luck-ji-141x105o.gif');
           /*background-image: url('../images/triangledownfill141x105A.gif');*/
           background-repeat: no-repeat;
           background-position: 50% 100%;
            -webkit-background-size: 100%; 
            -moz-background-size: 100%; 
            -o-background-size: 100%; 
            background-size: 100%; 
}
.dateNumLg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;text-align:center; padding:4px 2px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#bbb;}
.dateNumLg td{font-family:Arial, sans-serif;font-size:14px;padding:4px 4px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#bbb;}

.dateNumLg .dateNumLg-blank{text-align:center}
.dateNumLg .dateNumLg-topleft{text-align:right}
.dateNumLg .dateNumLg-topright{text-align:left}
.dateNumLg .dateNumLg-midleft{text-align:center}
.dateNumLg .dateNumLg-midright{text-align:center}
.dateNumLg .dateNumLg-center{text-align:center}

.dateNumFul {
           width: 160px;
           height: 171px;
           background-image: url('../images/luck-ji-141x105o.gif');
           /*background-image: url('../images/triangledownfill141x105A.gif');*/
           background-repeat: no-repeat;
           background-position: 50% 45%;
            -webkit-background-size: 100%; 
            -moz-background-size: 100%; 
            -o-background-size: 100%; 
            background-size: 100%; 
}
.dateNumFul th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;text-align:center; padding:4px 2px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#bbb;}
.dateNumFul td{font-family:Arial, sans-serif;font-size:14px;padding:4px 4px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#bbb;}

.dateNumFul .dateNumFul-blank{text-align:center}
.dateNumFul .dateNumFul-topleft{text-align:right}
.dateNumFul .dateNumFul-topright{text-align:left}
.dateNumFul .dateNumFul-midleft{text-align:center}
.dateNumFul .dateNumFul-midright{text-align:center}
.dateNumFul .dateNumFul-justify{text-align:justify}
.dateNumFul .dateNumFul-center{text-align:center}

.block9Grid {width:126px;border-color:#0b0;border-color:#eee;border-style:solid;border-width:1px;}
.block9Grid th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;text-align:center;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#bbb;color:#493F3F;background-color:#9DE0AD;}
.block9Grid td{font-family:Arial, sans-serif;font-size:14px;text-align:center;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#0b0;color:#594F4F;background-color:#E0FFEB;}
.block9Grid .luckyGridCell{text-align:center; vertical-align: top; font-weight: bold; font-style: italic; text-decoration: underline;}
.miniGeoTable {width:126px;border-color:#0b0;border-color:#eee;border-style:solid;border-width:0px;}
.miniGeoTable th{font-family:Arial, sans-serif;font-size:15px;font-weight:normal;text-align:center;padding:5px 2px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#bbb;color:#493F3F;background-color:#9DE0AD;}
.miniGeoTable td{font-family:Arial, sans-serif;font-size:15px;text-align:center;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#0b0;color:#594F4F;background-color:#E0FFEB;width:15px;height:15px}

.direction {
           width: 141px;
           /*height: 170px;*/
           background-image: url('../images/directions100lightgreenfill.gif');/*di1rections100,directions100green,directions100lightgreen*/
           background-repeat: no-repeat;
           background-position: 50% 75%;
}
.direction th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;text-align:center; padding:5px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#bbb;}
.direction td{font-family:Arial, sans-serif;font-size:14px;padding:0px 0px;height:39px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
.direction .direction-n{text-align:center; vertical-align: top;}
.direction .direction-n-b{text-align:center; vertical-align: top; font-weight: bold; font-style: italic; text-decoration: underline;}
.direction .direction-ne{text-align:center; vertical-align: bottom;}
.direction .direction-ne-b{text-align:center; vertical-align: bottom; font-weight: bold; font-style: italic; text-decoration: underline;}
.direction .direction-e{text-align:right; vertical-align: middle;}
.direction .direction-e-b{text-align:right; vertical-align: middle; font-weight: bold; font-style: italic; text-decoration: underline;}
.direction .direction-se{text-align:center; vertical-align: top;}
.direction .direction-se-b{text-align:center; vertical-align: top; font-weight: bold; font-style: italic; text-decoration: underline;}
.direction .direction-s{text-align:center; vertical-align: bottom;}
.direction .direction-s-b{text-align:center; vertical-align: bottom; font-weight: bold; font-style: italic; text-decoration: underline;}
.direction .direction-sw{text-align:center; vertical-align: top;}
.direction .direction-sw-b{text-align:center; vertical-align: top; font-weight: bold; font-style: italic; text-decoration: underline;}
.direction .direction-w{text-align:left; vertical-align: middle;}
.direction .direction-w-b{text-align:left; vertical-align: middle; font-weight: bold; font-style: italic; text-decoration: underline;}
.direction .direction-nw{text-align:center; vertical-align: bottom;}
.direction .direction-nw-b{text-align:center; vertical-align: bottom; font-weight: bold; font-style: italic; text-decoration: underline;}
.direction .direction-c{text-align:center; vertical-align: middle;}
.direction .direction-c-b{text-align:center; vertical-align: middle; font-weight: bold; font-style: italic; text-decoration: underline;}

/***.clockBackgnd {
           width: 190px;
           height: 237px;
           background-size: 130px 130px;
           background-position: 50% 50%;
***/
.clockTbl {
           width: 180px;
           height: 180px;
           background-image: url('../images/clockHandlessGreen.gif');
           background-size: 130px 130px;
           background-repeat: no-repeat;
           background-position: 50% 50%;
}
.clockTbl th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;text-align:center; padding:0px 0px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#bbb;}
/*.clockTbl th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;text-align:center; padding:4px 2px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#bbb;}*/
.clockTbl td{font-family:Arial, sans-serif;font-size:12px;padding:0px 0px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#bbb;}
/*.clockTbl td{font-family:Arial, sans-serif;font-size:14px;padding:6px 6px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#bbb;}*/
.clockTbl .clock-blank{text-align:center}
.clockTbl .clockTbl-n{text-align:center; vertical-align: top;}
.clockTbl .clockTbl-ne{text-align:center; vertical-align: middle;}
.clockTbl .clockTbl-e{text-align:right; vertical-align: middle;}
.clockTbl .clockTbl-se{text-align:center; vertical-align: middle;}
.clockTbl .clockTbl-s{text-align:center; vertical-align: bottom;}
.clockTbl .clockTbl-sw{text-align:center; vertical-align: middle;}
.clockTbl .clockTbl-w{text-align:left; vertical-align: middle;}
.clockTbl .clockTbl-nw{text-align:center; vertical-align: middle;}
.clockTbl .clockTbl-c{text-align:center; vertical-align: middle;}
/**
.clockTbl .clock-blank{text-align:center}
.clockTbl .clockTbl-n{text-align:center; vertical-align: top;}
.clockTbl .clockTbl-ne{text-align:center; vertical-align: middle;}
.clockTbl .clockTbl-e{text-align:right; vertical-align: middle;}
.clockTbl .clockTbl-se{text-align:center; vertical-align: middle;}
.clockTbl .clockTbl-s{text-align:center; vertical-align: bottom;}
.clockTbl .clockTbl-sw{text-align:center; vertical-align: middle;}
.clockTbl .clockTbl-w{text-align:left; vertical-align: middle;}
.clockTbl .clockTbl-nw{text-align:center; vertical-align: middle;}
.clockTbl .clockTbl-c{text-align:center; vertical-align: middle;}
**/
.clockBackgnd {
           width: 180px;
           height: 180px;
           background-image: url('../images/clockHandlessGreen.gif');
           background-size: 130px 130px;
           background-repeat: no-repeat;
           background-position: 50% 50%;
}
.luckyHour1 {
           width: 180px;
           height: 180px;
           background-image: url('../images/clockArc1.gif');
           background-size: 130px 130px;
           background-repeat: no-repeat;
           background-position: 50% 50%;
}
.luckyHour2 {
           width: 180px;
           height: 180px;
           background-image: url('../images/clockArc2.gif');
           background-size: 130px 130px;
           background-repeat: no-repeat;
           background-position: 50% 50%;
}
.luckyHour3 {
           width: 180px;
           height: 180px;
           background-image: url('../images/clockArc3.gif');
           background-size: 130px 130px;
           background-repeat: no-repeat;
           background-position: 50% 50%;
}
.luckyHour4 {
           width: 180px;
           height: 180px;
           background-image: url('../images/clockArc4.gif');
           background-size: 130px 130px;
           background-repeat: no-repeat;
           background-position: 50% 50%;
}
.luckyHour5 {
           width: 180px;
           height: 180px;
           background-image: url('../images/clockArc5.gif');
           background-size: 130px 130px;
           background-repeat: no-repeat;
           background-position: 50% 50%;
}
.luckyHour6 {
           width: 180px;
           height: 180px;
           background-image: url('../images/clockArc6.gif');
           background-size: 130px 130px;
           background-repeat: no-repeat;
           background-position: 50% 50%;
}
.luckyHour7 {
           width: 180px;
           height: 180px;
           background-image: url('../images/clockArc7.gif');
           background-size: 130px 130px;
           background-repeat: no-repeat;
           background-position: 50% 50%;
}
.luckyHour8 {
           width: 180px;
           height: 180px;
           background-image: url('../images/clockArc8.gif');
           background-size: 130px 130px;
           background-repeat: no-repeat;
           background-position: 50% 50%;
}
.bigWhiteShadow {
    color: white; font-size: 45px; font-style: bold; text-shadow: rgb(3, 3, 3) -1px 4px 9px;
}

.blinking {
  text-align: center;
  color: red;
  opacity: 0;
  animation: blinking 1s linear infinite;
}
.blinking5s {
  text-align: center;
  color: red;
  opacity: 0;
  animation: blinking 5s linear infinite;
}
.blinkingGrey {
  text-align: center;
  color: grey;
  opacity: 0;
  animation: blinking 1s linear infinite;
}
.blinkingGrey3s {
  text-align: center;
  color: grey;
  opacity: 0;
  animation: blinking 3s linear infinite;
}

@keyframes blinking {
  from,
  49.9% {
    opacity: 0;
  }
  50%,
  to {
    opacity: 1;
  }
}

.redFont {
    font-weight: bold;
    color: red;
}
.largeboldredFont {
    font-size: large;
    font-weight: bold;
    color: red;
}

.xxlargeFont {
    font-size: xx-large;
}

.xlargeFont {
    font-size: x-large;
}

.xlargeRedFont {
    font-size: x-large;
    color: red;
}

.largeFont {
    font-size: large;
    text-align:left;
}

.xxlargeBoldFont {
    font-size: xx-large;
    font-weight: bold;
}

.xlargeBoldFont {
    font-size: x-large;
    font-weight: bold;
}

.largeBoldFont {
    font-size: large;
    font-weight: bold;
}

.mediumFont {
    font-size: medium;
}

.smallFont {
    font-size: small;
}

.xsmallFont {
    font-size: x-small;
}

.longbtn {
    border-radius: 10px;
    background-color: #4CAF50; /*#4CAF50;*/
    color: whitesmoke;/*white;*/
    padding-left: 9px;
    padding-right: 9px;
    font-size: 16px;
    font-weight: 700;
    border: 2px solid #2C8F30;
    cursor: pointer;
    -webkit-appearance: button;
}

.redLongbtn {
    border-radius: 3px;
    background-color: #FF8888; 
    color: whitesmoke;/*white;*/
    padding-left: 9px;
    padding-right: 9px;
    font-size: 16px;
    font-weight: 700;
    border: 2px solid #FF3333;
    cursor: pointer;
    -webkit-appearance: button;
}

.dropbtn {
    background-color: #3399ff; /*#4CAF50;*/
    color: red;/*white;*/
    padding: 9px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    right: 0;
}

.dropdown-content a {
    color: darkblue;/*black;*/
    font-size: 16px;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: lightsteelblue;/*#3e8e41;*/
}

/*
https://stackoverflow.com/questions/16615403/css-how-to-draw-circle-with-text-in-middle
The main issue I had was text would often break the bounds of the circle. 
To solve this I ended up using 4 divs. One rectangular container that specified 
the max (fixed) boundaries of the circle. Inside that would be the div that 
draws the circle with its width and height set to 100% so changing the size of 
the parent changes the size of the actual circle. Inside that would be another 
rectangular div which, using %'s, would create a text boundary area preventing 
any text leaving the circle (for the most part) Then finally the actual div for 
the text and vertical centering.
*/
/* Main Container -  this controls the size of the circle */
.circle_container
{
	width : 128px;
	height : 128px;
	margin : 0;
	padding : 0;
/*	border : 1px solid red; */
}

/* Circle Main draws the actual circle */
.circle_main
{
	width : 100%;
	height : 100%;
	border-radius : 50%;
	border : 2px solid black;	/* can alter thickness and colour of circle on this line */
	margin : 0;
	padding : 0;
}

/* Circle Text Container - constrains text area to within the circle */
.circle_text_container
{
	/* area constraints */
	width : 70%;
	height : 70%;
	max-width : 70%;
	max-height : 70%;
	margin : 0;
	padding : 0;

	/* some position nudging to center the text area */
	position : relative;
	left : 15%;
	top : 15%;
	
	/* preserve 3d prevents blurring sometimes caused by the text centering in the next class */
	transform-style : preserve-3d;
	
	/*border : 1px solid green;*/
}

/* Circle Text - the appearance of the text within the circle plus vertical centering */
.circle_text
{
	/* change font/size/etc here */
	font: 11px "Tahoma", Arial, Serif;	
	text-align : center;
	
	/* vertical centering technique */
	position : relative;
	top : 50%;
	transform : translateY(-50%);
}

.flexdisplay {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex: 1;  /* Safari 6.1+ */
  -ms-flex: 1;  /* IE 10 */    
  flex: 1;
}
#metal {
  background: linear-gradient(#FFD700, #DAA520);
}
#silver {
  background: linear-gradient(#C0C0C0, #C4C7CE);
}
#white {
  background: linear-gradient(#EEEEEE, #FFFFFF);
  color: #333;
}
#black {
  background: linear-gradient(#010101, #000000);
}
#darkblue {
  background: linear-gradient(#00008B, #000080);
}
#green {
  background: linear-gradient(#90EE90, #00FF00);
}
#red {
  background: linear-gradient(#FF0000, #800000);
}
#orange {
  background: linear-gradient(#FF8C00, #FF4500);
}
#purple {
  background: linear-gradient(#B19CD9, #800080); /*, #551A8B);*/
}
#pink {
  background: linear-gradient(#ffb6c1, #ff69b4);
}
#grey {
  background: linear-gradient(#D3D3D3, #808080);
}
#lightbrown {
  background: linear-gradient(#B57E1D, #B5651D);
}
#beige {
  background: linear-gradient(#CCCC77, #F5F5DC);
}
.circle-with-text {
  background: linear-gradient(orange, red);
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  margin: 5px 3px;
  font-size: 15px;
  font-weight: bold; 
  padding: 3px;
  display: flex;
  height: 79px;
  width: 79px;
  color: #fff;
}
.multi-line-text {
  font-size: 12px;
}

/* https://www.html.am/html-codes/marquees/scrolling-text.cfm */
.scroll-left-160 {
 height: 160px;	
 overflow: hidden;
 position: relative;
}
.scroll-left-160 p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: justify;
 font-size: 27px;
/* Starting position */
 -moz-transform:translateX(50%);
 -webkit-transform:translateX(50%);	
 transform:translateX(50%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 18s linear infinite;
 -webkit-animation: scroll-left 18s linear infinite;
 animation: scroll-left 18s linear infinite;
}
.scroll-left-160 span {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: justify;
 font-size: 27px;
/* Starting position */
 -moz-transform:translateX(50%);
 -webkit-transform:translateX(50%);	
 transform:translateX(50%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 9s linear infinite;
 -webkit-animation: scroll-left 9s linear infinite;
 animation: scroll-left 9s linear infinite;
}

.scroll-left-160 s {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: justify;
 font-size: 27px;
/* Starting position */
 -moz-transform:translateX(50%);
 -webkit-transform:translateX(50%);	
 transform:translateX(50%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 27s linear infinite;
 -webkit-animation: scroll-left 27s linear infinite;
 animation: scroll-left 27s linear infinite;
}

.scroll-left {
 height: 50px;	
 overflow: hidden;
 position: relative;
/* Starting position */
 -moz-transform:translateX(50%);
 -webkit-transform:translateX(50%);	
 transform:translateX(50%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 29s linear infinite;
 -webkit-animation: scroll-left 29s linear infinite;
 animation: scroll-left 29s linear infinite;
}
.scroll-left p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: justify;
 font-size: 27px;
}
.scroll-left span {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 36px;
 text-align: justify;
 font-size: 18px;
}
.scroll-left span160 {
 height: 160px;	
 overflow: hidden;
 position: relative;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: justify;
 font-size: 27px;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}

.scroll-right-160 {
 height: 160px;	
 overflow: hidden;
 position: relative;
/* Starting position */
 -moz-transform:translateX(50%);
 -webkit-transform:translateX(50%);	
 transform:translateX(50%);
 /* Apply animation to this element */	
 -moz-animation: scroll-right 29s linear infinite;
 -webkit-animation: scroll-right 29s linear infinite;
 animation: scroll-right 29s linear infinite;
}

/* Move it (define the animation) */
@-moz-keyframes scroll-right {
 100%   { -moz-transform: translateX(-100%); }
 0% { -moz-transform: translateX(100%); }
}
@-webkit-keyframes scroll-right {
 100%   { -webkit-transform: translateX(-100%); }
 0% { -webkit-transform: translateX(100%); }
}
@keyframes scroll-right {
 100%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 0% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
.greenbackgnd {
 margin: .3em;
 padding: .3em;
 background: #DDEEDD;
 border: 1px dashed #CCEECC;
}
/* https://www.html.am/html-codes/marquees/bouncing-text.cfm */
.greenAdv {
 height: 27px;	
 overflow: hidden;
 position: relative;
 background: #DDEEDD;
 color: darkblue;
 border: 1px dashed #66CC66;
}
.greenAdv p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: .2em;
 padding: .2em;
 line-height: 18px;/*27*/
 text-align: justify;
 font-size: 16px;/*24*/
 /* Starting position */
 /*-moz-transform:translateX(20%);
 -webkit-transform:translateX(20%);	
 transform:translateX(20%);*/
 /* Apply animation to this element */	
 /*-moz-animation: horizontally 9s linear infinite alternate;
 -webkit-animation: horizontally 9s linear infinite alternate;
 animation: horizontally 9s linear infinite alternate;*/
}

.horizontally {
 height: 27px;	
 overflow: hidden;
 position: relative;
 background: #99EE99;
 color: darkblue;
 border: 1px dashed #66CC66;
}
.horizontally p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 18px;/*27*/
 text-align: justify;
 font-size: 16px;/*24*/
 /* Starting position */
 -moz-transform:translateX(20%);
 -webkit-transform:translateX(20%);	
 transform:translateX(20%);
 /* Apply animation to this element */	
 -moz-animation: horizontally 9s linear infinite alternate;
 -webkit-animation: horizontally 9s linear infinite alternate;
 animation: horizontally 9s linear infinite alternate;
}
/* Move it (define the animation) */
@-moz-keyframes horizontally {
 0%   { -moz-transform: translateX(50%); }
 100% { -moz-transform: translateX(-50%); }
}
@-webkit-keyframes horizontally {
 0%   { -webkit-transform: translateX(50%); }
 100% { -webkit-transform: translateX(-50%); }
}
@keyframes horizontally {
 0%   { 
 -moz-transform: translateX(50%); /* Browser bug fix */
 -webkit-transform: translateX(50%); /* Browser bug fix */
 transform: translateX(50%); 		
 }
 100% { 
 -moz-transform: translateX(-50%); /* Browser bug fix */
 -webkit-transform: translateX(-50%); /* Browser bug fix */
 transform: translateX(-50%); 
 }
}
/* Tooltips example in HTML
*  <div class="tooltip">Hover over me
*       <span class="tooltiptext">Tooltip text</span>
*  </div> 
*/
 /* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.nobluelink
{
   color:darkgrey;
   /*text-decoration: none; remove underline*/
   background-color: none;
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close "x" */
.closemodal {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.closemodal:hover,
.closemodal:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

ul, #myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.caret {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */
  transform: rotate(90deg);  
}

.nested {
  display: none;
}

.active {
  display: block;
}
.button-show2D { 
    border:0px; 
    padding: 5px 5px; 
    width: 49px;
    background-color: #fff; 
    color: #999; 
}
.button-show2D:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}
.imgindexdiv {
  max-width:727px;
  max-height:727px;
  overflow:auto;
  border-color: green; /* #66CC66;*/
  border-width: 7px;
  border-style: solid;
  text-align: center;
}
/*
ul  {
  list-style: none;
}

ul li::before {
  content: "\2022";
  color: red;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}
*/