/*
 * @CSS3 Tabstrip
 * @author Martin Ivanov
 * @website http://wemakesites.net
 * @blog http://acidmartin.wordpress.com/
 * @twitter https://twitter.com/wemakesitesnet
 **/
 
/*
 * Width should be set to the outermost element
 * if you have multiple tabstrips on a single page
 * you can set dimensions using for example additional class names
 * or IDs. In this case, I am applying width and height to the 
 * base CSS class.
 **/



.usrq_overlay {     
    display: none;
    /*visibility: visible;*/
     position: fixed; /* Stay in place */
     padding-top: 100px;/*  Location of the box  */
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     /*text-align:center;*/
     z-index: 1000;
    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 */
     
}

.usrq_content {
    /*visibility: hidden;*/
    /*display: inherit;*/
    /*display: none;*/
    position: relative;
    margin:auto;
    padding: 0px;
    width:75%;
    /*height:150px;*/   
    
    /*position: fixed;*/
     /*background-color: #fff;*/
     border:3px solid orange;
     /*text-align:center;*/    
    
    background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient( orange ,white  ,white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient( orange ,white  ,white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient( orange ,white  ,white); /* For Firefox 3.6 to 15 */
    background: linear-gradient( orange ,white  ,white ); /* Standard syntax */    
    
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;

    -moz-animation-name: animatetop;
    -moz-animation-duration: 0.4s;

    animation-name: animatetop;
    animation-duration: 0.4s;
  
}
/* Add Animation */
@-webkit-keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

@-moz-keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0px; opacity: 1}
}

@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

.usrq_table{
    table-layout:fixed;
    text-align: left; 
    width: 100%; 
    height:100%;   
    /*border: 10px;*/
    /*padding: 10px;*/ 
    border-spacing: 2px;
    border-collapse: separate;
    /*border: 5px;*/
    border-color: green;
    /*border-collapse: collapse;*/
}
.usrq_table td{
    padding: 3px;    
}

.usrq_table button{
    /*padding: 7px;*/    
    font-size: 16px;
    /*font-weight: bold;*/
    font-family: Arial; 
    color: blue;
    width: 100%;    
    /*visibility: hidden;*/
    
}
.usrq_table td.title{
    color: white;    
    /*width: 100%;*/    
    background-color: darkorange;
    font-size: 18px;
    font-family: Arial; 
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid;
    border-bottom-color: white;
}

.usrq_table td.text{
    color: blue;
    /*width: 100%;*/
    font-size: 16px;
    font-weight: normal;
    font-family: Arial; 
    border-bottom: 1px solid;
    border-bottom-color:orange;
/*    padding-top: 20px;
    padding-bottom: 20px;*/
    text-align: left;
}

/*======================================================*/
td{font-family: Arial; font-size: 11pt;}
label.setting{
    color:darkblue;
    padding-left: 5px;
    font-size: 15px;
}

button.save
{
    color:blue;    
    font-size: 15px;
    padding: 3px;
    margin: 2px;
    width: 65px;    
}
button.geo
{
    color: indigo;    
    font-size: 15px;
    font-weight: bold;
    padding: 3px;
    margin: 2px;
    width: 65px;    
}
button.setgeo
{
    color: indigo;    
    font-size: 15px;
    font-weight: normal;
    padding: 3px;
    margin: 2px;
    width: 110px;    
}


button.delete
{
    font-size: 15px;
    color:darkred;    
    padding: 4px;
    margin: 2px;
    margin-left: 10px;
    width: 65px;
}

table.setting
{
   text-align: left; 
   font-size: 18px; 
   width: 330px;
   border-bottom: 1px solid lightblue;
   margin-top: 10px;
   padding:3px;
   background: white; /* For browsers that do not support gradients */
   background: -webkit-linear-gradient(lightblue,white ); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(lightblue,white ); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(lightblue,white ); /* For Firefox 3.6 to 15 */
   background: linear-gradient(lightblue,white ); /* Standard syntax */    
   
}

input
{
    border-radius: 5px;
    border-color: lightgrey;
    border-collapse: collapse;    
    padding-top: 1px;
    padding-bottom: 1px;        
    text-indent: 5px;
    margin: 2px;
    
    
}
select
{
    text-align: left; 
    font-size: 20px; 
    width: 220px;
    margin: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    color: blue;
    border-radius: 8px;
    border-color: lightgrey;
    border-collapse: collapse;
    border-width: 2px;    
    text-indent: 5px;
    background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(lightgrey,white ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(lightgrey,white ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(lightgrey,white ); /* For Firefox 3.6 to 15 */
    background: linear-gradient(lightgrey,white ); /* Standard syntax */     
}
select.setting
{
    text-align: left; 
    font-size: 18px; 
    width: 150px;
    margin: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    color: blue;
    border-radius: 8px;
    border-color: lightgrey;
    border-collapse: collapse;
    border-width: 2px;    
    text-indent: 5px;
    background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(lightgrey,white ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(lightgrey,white ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(lightgrey,white ); /* For Firefox 3.6 to 15 */
    background: linear-gradient(lightgrey,white ); /* Standard syntax */ 
    
}


table.guest
{
    border: 1px solid lightgray;
    padding-top: 10px;
        
}

td.bottom
{
    border-bottom: 0px solid blue;
    font-size: 15px;
    font-family:Arial;
}
tr.guest
{
    background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(lightblue,white ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(lightblue,white ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(lightblue,white ); /* For Firefox 3.6 to 15 */
    background: linear-gradient(lightblue ,white ); /* Standard syntax */    
}
tr.guestred
{
    background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(red,white ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red,white ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red,white ); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, white ); /* Standard syntax */       
}

tr.guestorange
{
    background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(orange,white ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(orange,white ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(orange,white ); /* For Firefox 3.6 to 15 */
    background: linear-gradient(orange, white ); /* Standard syntax */       
}

tr.guestyellow
{
    background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(yellow,white ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(yellow,white ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(yellow,white ); /* For Firefox 3.6 to 15 */
    background: linear-gradient(yellow, white ); /* Standard syntax */       
}
tr.guestgreen
{
    background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(lightgreen,white ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(lightgreen,white ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(lightgreen,white ); /* For Firefox 3.6 to 15 */
    background: linear-gradient(lightgreen, white ); /* Standard syntax */       
}



td.guest
{
    text-align: left;
    font-family: Arial; 
    font-size: 12pt;
    font-weight: bold;
    width: 70px;
    color: blue;    
}


button.drink{
    width: 60px;
    height:60px;
    background-repeat: no-repeat;
    font-family: Arial; 
    font-size: 20pt;
    vertical-align: text-bottom;
    text-align: left;   
    padding-left: 6px;
    background:  no-repeat;    
    background-size: 60px, 60px;
    background-position: center;
    color:white;   
    border-width: 0px; 
    
}
button.resetsmall{
    width: 60px;
    height:60px;
    font-family: Arial; 
    font-size: 20pt;
    text-align: left;
    padding-left: 1px; 
    background:  no-repeat;    
    background-size: 40px 40px;    
    background-position: center; 
    border-width: 0px; 
    color:white;   
}


.css3-tabstrip
{
    width: 100%;
    height: 1000px;
}    
 
.css3-tabstrip ul,
.css3-tabstrip li
{
    margin: 0;
    padding: 0;
    list-style: none;
}
 
.css3-tabstrip,
.css3-tabstrip input[type="radio"]:checked + label
{
    position: relative;
}
 
.css3-tabstrip li,
.css3-tabstrip input[type="radio"] + label
{
    display: inline-block;
}
 
.css3-tabstrip li > div,
.css3-tabstrip input[type="radio"]
{
    position: absolute;
}
 
.css3-tabstrip li > div,
.css3-tabstrip input[type="radio"] + label
{
    border: solid 1px #ccc;
}
 
.css3-tabstrip
{
    font: normal 18px Arial, Sans-serif;
    color: #404040;
}
 
.css3-tabstrip li
{
    vertical-align: top;
}
 
.css3-tabstrip li:first-child
{
    margin-left: 8px;
}
 
.css3-tabstrip li > div
{
    top: 33px;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 4px;
    overflow: auto;
    background: #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 
.css3-tabstrip input[type="radio"] + label
{
    margin: 0 2px 0 0;
    padding: 0 18px;
    line-height: 32px;
    background: #f1f1f1;
    text-align: center;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
 
.css3-tabstrip input[type="radio"]:checked + label
{
    z-index: 1;
    background: #fff;
    border-bottom-color: #fff;
    cursor: default;
}
 
.css3-tabstrip input[type="radio"]
{
    opacity: 0;
}
 
.css3-tabstrip input[type="radio"] ~ div
{
    display: none;
}
 
.css3-tabstrip input[type="radio"]:checked:not(:disabled) ~ div
{
    display: block;
}
 
.css3-tabstrip input[type="radio"]:disabled + label
{
    opacity: .5;
    cursor: no-drop;
}