:root {
    --bkg_color : #001f20;
    --lightrow  : #001f40;
    --darkrow   : #001f50;
    --hoverrow  : #39c2da;
    --rowcolor  : white;
    --rowhovercolor  : black;
    --darker    : #000022;
}

body {
    background :  url('../img/TL_background.jpg') no-repeat;
    background-size : cover;
}
.ah-label {
    color : white;
}

 
.loginbutton {
    color : var(--bkg_color);
    background : white;
    width: 96px;
    min-width: 96px;
    color: black; 
    border: 0px;
    font-size : 14px;
    text-decoration: none;
    width: auto;
    transition: .5s;
}
.loginbutton:hover{
    color:white!important;
    background-color: #A1A5A9;!important;
    text-decoration: none;
    -webkit-box-shadow: 0 0 8px white; 
    -moz-box-shadow: 0 0 8px white; 
    box-shadow: 0 0 8px white;  
}
.logoutbutton {
    color : var(--bkg_color);
    background : white;
    min-width: 96px;
    color: black; 
    border: 0px;
    font-size : 14px;
    text-decoration: none;
    width: auto;
    transition: .2s;
    opacity:.8;
    position:absolute;
    top:40px;
    right:0px;
    text-align:center; 
    width:auto;"
}
.logoutbutton:hover{
    color:white!important;
    background-color: #A1A5A9;!important;
    text-decoration: none;
    -webkit-box-shadow: 0 0 8px white; 
    -moz-box-shadow: 0 0 8px white; 
    box-shadow: 0 0 8px white;  
}
.radiused {
    border : 0px;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 8px; 
    padding : 4px 8px;
}

.container{
  text-align: center;
  position: absolute;
  top: 128px;;
  left: 50%;
  width: 100%;
  transform: translate(-128px,-128px);
  -webkit-transform:translate(-128px,-128px); 
  -moz-transform:translate(-128px,-128px);
  -o-transform:translate(-128px,-128px);
}
.container span{
  display: block;
}
.title_bar{
    width : 100%;
    height: 64px;
    background: linear-gradient(to right, rgba(57,194,218,0),rgba(57,194,218,1) 50%,rgba(57,194,218,0));
}
.title_bar_text {
    color : white;
    line-height : 64px;    
    text-align : center;
}
.infoTextBOX {
    display : block;
    color : white;
    line-height : 17px;
    text-align : justify;
    padding : 32px;
}
.logintable {
    margin : 0 auto;
    width:50%;
    align-self : center;
}
.logintable td {
    padding : 4px;
    text-align : right;
}
.logintable td:first-child{
    text-align : left;
}

 .title {
    font-size : 2em;
    text-decoration: bold;
}

.logo{
  position: absolute;
  top: 64px;
  left: 64px;
  width: 288px;
  height: 64px;
  background: url('../img/tenglong_logo.png') no-repeat;
}

.text1{
  color: white;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 20px;
  background:  transparent;
  position: relative;
//  animation: text 1s 1;
}
.text2{
  font-size: 40px;
  color: #6ab04c;
  font-family: sans-serif;
}

@keyframes text {
  0%{
    color: black;
    margin-bottom: -40px;
  }
  30%{
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85%{
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
}
#visitor_tiles {
    position : absolute;
    z-index  : 0;
    width    : 620px;
    height   : 300px;
    top      : calc(50% - 150px);
    left     : calc(50% - 310px);
    opacity  : 0;
    display  : block;
    transition: .5;
}
#login-div {
    position : absolute;
    z-index  : 0;
    width    : 768px;
    height   : 360px;
    border-radius : 16px;
    top      : calc(50% - 180px);
    left     : calc(50% - 384px);
    background : var(--bkg_color);
    color    : white;
    opacity  : 0;
    display  : block;
    transition: .5;
    -webkit-box-shadow: 4px 4px 8px #555;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    4px 4px 8px #555;  /* Firefox 3.5 - 3.6 */
    box-shadow:         4px 4px 8px #555;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.opacity {
    -webkit-transition : opacity .5s ease-in-out;
    -moz-transition    : opacity .5s ease-in-out;
    transition         : opacity .5s ease-in-out;}

#titlepage {
    position : absolute;
    width    : 610px;
    height   : 304px;
    left     : calc(50% - 305px);
    top      : calc(50% - 152px);
    background : darkgrey;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity : 0;
    border-radius: 8px;
    color : black;
    padding : 16px;
    float : left;
    margin : 8px;
    font-size : 1.3em;
    font-family: "Lucida Console", "Courier New", monospace;
    text-align: center;
}

#page2 p {
    color: white;
}
.fullpage{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 0;
}

.language {
  position: absolute;
  top: 32px;
  right: 32px;
  width: auto;
  height: auto;
  z-index: 1;
}    

#main {
        position : relative;
    width : 610px;
    height : 304px;
    left : calc(50% - 305px);
    top  : calc(50% - 152px);
    z-index : 65534;
    }
    #visitor_menu {
	background : transparent;
}
    
    #logo {
        position : absolute;
        left : 32px;
        top : 32px;
        width : 272px;
        height: 64px;
        z-index: 65535;
        background-image: url("../img/tenglong_logo.png");
        background-position: center;
        background-repeat: no-repeat;
        color : white;
    }
    #employee, #guest {
        width : 256px;
        height: 256px;
	background : white;
        background-position: center bottom;
        background-repeat: no-repeat;
        opacity : .75;
        border-radius: 8px;
        color : black;
        padding : 16px;
        float : left;
        margin : 8px;
        font-size : 2em;
        font-family: "Lucida Console", "Courier New", monospace;
        webkit-transition: opacity 0.3s ease-in-out;
       -moz-transition: opacity 0.3s ease-in-out;
       transition: opacity 0.3s ease-in-out;
	    display    : block;
	z-index: 65535;
	    background-size : 160px;
	    background-position : center;
    }
    .tile {
        width : 224px;
        height: 224px;
        background-position: center bottom;
        background-repeat: no-repeat;
        opacity : .85;
        border-radius: 8px;
        color : white;
        padding : 16px;
        margin : 8px;
        font-size : 1.2em;
	text-align : center;
	float : left;
        font-family: "Lucida Console", "Courier New", monospace;
        webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
       transition: all 0.3s ease-in-out;
	background : grey;
    }
.tile {
        width : 192px;
        height: 192px;
	background : white;
        background-position: center bottom;
        background-repeat: no-repeat;
        opacity : .75;
        border-radius: 8px;
        color : black;
        padding : 16px;
        float : left;
        margin : 8px;
        font-size : 1.5em;
        font-family: "Lucida Console", "Courier New", monospace;
        webkit-transition: opacity 0.3s ease-in-out;
       -moz-transition: opacity 0.3s ease-in-out;
       transition: opacity 0.3s ease-in-out;
	    display    : block;
	z-index: 65535;
	    background-size : 160px;
	    background-position : center;
    }
    .tile:hover {
        opacity : .85;
        cursor : pointer;
 -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.05);
    }

.tiles {    
  display     : inline;
  justify-content : center;
  position: fixed;
  top: 256px;
  max-width : 1280px;
  z-index: 0;
}
    #employee:hover, #guest:hover{
        opacity : 1;
        cursor : pointer;
    }

    #employee {
            background-image: url("../img/employeelogin.png");
    }
    #guest {
            background-image: url("../img/guest.png");
    }
    #contacts {
            background-image: url("../img/contacts.png");
    }
    #back {
            background-image: url("../img/back.png");
    }


#contacts_div {
    position      : relative;
    width         : calc(100% - 128px);
    height        : calc(100% - 184px);
    left          : 64px;
    top           : 128px;
    background    : black; 
    opacity       : .75;
    border-radius : 8px;
    overflow-y    : auto;
    overflow-x    : hidden;
}


#employeetable th {
    padding : 2px;
    position: sticky;
    top : 0px;
    background : var(--bkg_color);
    color : white;
    text-align: center;
    font-size : 1vw;
}
#employeetable tr {
    width:100%;
    text-align: center;
    font-size : .8vw;
}
#employeetable tr:nth-child(2n+1) {
    background : var(--darkrow);
/*    cursor: pointer;
/*    transition : .5s;
*/    color : var(--rowcolor);
}
#employeetable tr:first-child {
    border-radius: 8px;
    cursor:default;
}
#employeetable tr:nth-child(2n+2) {
    background : var(--lightrow);
/*    cursor: pointer;
/*    transition : .5s;
*/    color : var(--rowcolor);
}
#employeetable td{
    white-space:nowrap;
    padding : 2px;
}
#employeetable tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
#employeetable tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
#employeetable th, #employeetable tr {
    text-align : left;
}
#employeetable th {
    width:100%;
}
#employeetable td {
    padding : 8px;
}

#printable th {
    padding : 8px;
    position: sticky;
    top : 0px;
    background : var(--bkg_color);
    color : white;
    text-align: center;
    font-size : 1em;
}
#printable tr {
    width:100%;
    text-align: center;
    font-size : .75em;
}
#printable tr:nth-child(2n+1) {
    background : var(--darkrow);
/*    cursor: pointer;
/*    transition : .5s;
*/    color : var(--rowcolor);
}
#printable tr:first-child {
    border-radius: 8px;
    cursor:default;
}
#printable tr:nth-child(2n+2) {
    background : var(--lightrow);
/*    cursor: pointer;
/*    transition : .5s;
*/    color : var(--rowcolor);
}
#printable td{
    white-space:nowrap;
    padding : 2px;
}
#printable td:nth-child(1) {
    text-align:left;
}
#printable td:nth-child(4), #printable td:nth-child(5), #printable td:nth-child(6), #printable td:nth-child(8), #printable td:nth-child(9) {
    text-align:right;
}
#printable tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
#printable tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
#printable th, #printable tr {
    text-align : left;
    font-size : 1em;
}
#printable th {
}
#printable td {
    padding : 8px;
}
#footer {
    position   : absolute;
    bottom     : 0px;
    left       : 0px;
    width      : 100%;
    text-align : center;
    color      : white;
    font-size  : 1em;
}