@charset "utf-8";
/* CSS Document */

body{ background-color:#F4F4F4; margin:0px; padding:0px; font-family: roboto, Geneva, sans-serif;}
.indextableright {}
.pagewrapper {position: absolute; left: 0; top: 0; width: 100%;}
.adminbutton{ background: #888 url(/images/adminbutton.png) repeat-x; margin-top: 5px; padding: 3px 10px 3px 10px; width: 90px; height: 20px; -moz-border-radius: 3px; border-radius: 3px; border:none; color:#FFF; background: #888 url(/images/adminbutton.png) repeat-x; text-shadow: #666666 5px 5px 5px; filter: Shadow(Color=#666666, Direction=135, Strength=5);}
.adminbutton:hover{background: #888 url(/images/adminbuttonhover.png) repeat-x;}
.button{background: #e0e0e0 url(/images/overlay.png) repeat-x; padding: 6% 3px 10% 5%; text-align:left; min-width:200px;  cursor: pointer; height: 40px;}
.loginbutton{ width: 200px; height: 45px; background: #e0e0e0 url(/images/overlay.png) repeat-x; padding: 10px 30px 20px 30px; cursor: pointer;}
.indextableleft{border: none;}
.indexnav{ text-align: left;}
.user{display:inline;} 
.indextable{background-color: #bee1ec; float: left; -moz-border-radius: 6px; border-radius: 6px;  border: #667 solid thin;}
.loginwrapper, .indextable{width:100%; height: 100%; min-height: 310px; max-height: 450px; min-width:230px; max-width:450px; margin-right: auto; margin-left: auto;}
#admintitle{text-align: center; color:#999; margin-top: 5px; text-shadow:0 1px 1px rgba(255, 255, 255, 0.5); }
@font-face{ font-family: roboto; src: url('fonts/Roboto-Regular.ttf'), url('fonts/Roboto-Regular.eot'); /* IE9+ */
}

.miscbutton{width: 15%; padding: 3px 20px 3px 20px; -moz-border-radius: 6px; border-radius: 6px;}
/* needs djusting*/
/*.datepick {background:white;width:200px;height:250px;padding-left:50px;padding-top:15px;}*/
table{-moz-border-radius: 6px; border-radius: 6px;}
button.nav {width:auto;height:30px;line-height:10px;align:center;}
button.searchbutton {font-size:10px;width:auto;height:10px;line-height:5px;align:center;}
table.data { width: 95%;font-size:12px;}
table.data td {border-bottom:thin solid #333;}
input.optvalues {border:0;height:20px;width:100px;padding-top:5px;}
input.optvalues:hover {background-color:lightgray;cursor:default;}
button.tool {width:100px;height:20px;line-height:10px;align:center;font-size:10px;}
input.search {width:60px;}
div.inp {padding-top:10px;padding-bottom:10px;text-align:center;background-color: #FFFFFF;}
div.inp input {float:right;}
div.inp textarea {float:right;}
button.tool {width:100px;height:20px;line-height:10px;align:center;font-size:10px;}
button.delete {border:thin solid black;width:100px;height:20px;line-height:10px;align:center;font-size:10px;background-color: #FF6A6A;} 
button.delete:hover {border:thin solid white;width:100px;height:20px;line-height:10px;align:center;font-size:10px;background: white url(/images/erase2.png)no-repeat;} 
td.totals {border-top:1px solid black;border-bottom:1px solid black;}

/* needs adjusting */



/*Mobile Widths*/

@media screen and (min-width: 1px) and (max-width: 360px) and (orientation : portrait){ 
.indextableright{ width: 100%; height: auto; margin-top: 5px; background-color: #bee1ec; height:450px; float: left; -moz-border-radius: 6px; border-radius: 6px;  border: #666 solid thin; }
.indextableleft{ width: 100%; height: 100%;  margin-top: 5px; float: left; background-color:#DFDFDF; -moz-border-bottom-right-radius: 6px; -moz-border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border: #8A8A8A solid thin; text-align:left;}
.wrapper{ width: 100% !important; padding-right:2%;  min-width:250px; }
.indexinfo, .indexinfologin{ visibility: hidden; display:none; }
.menubar{ width: 100% !important; padding-right:2%; min-width:250px;  height: 35px; padding-top: 5px; text-align:right; color:#CCCCCC; background: #000 url(/images/menubar.png) repeat-x; max-width: 399px; display:inline-block; font-size: 0.78em;}
.indexnav{ width:100%;  height: 1000px; background-color:#DFDFDF; }
.indexiframenav{ width:100%; min-width: 250px; height:900px; }
.adminbutton{ padding: 0px 0px 5px 0px; width:60px; height:20px; font-size: 0.78em; }
.tbilling{ width: 110px; height: 26px; padding-top: 3.5px; }
button.button{ width:100%;  }
.user{ display: none; visibility:hidden; }
.homepagebutton{width: 100%;}
.feedback{ display:none; visibility:hidden;}
}

@media screen and (min-width: 1px) and (max-width: 420px) and (orientation : landscape){ 
.indexinfo, .indexinfologin{ visibility:hidden; display:none; position: absolute; top: -1000px;}
.indextableright{width: 198px; margin-top: 5px; background-color: #bee1ec; height: 800px; float: left; -moz-border-radius: 6px; border-radius: 6px;  border: #666 solid thin;}
.indextableleft{width: 200px;  height: 100%;  margin-top: 5px; float: left; background-color:#DFDFDF;-moz-border-bottom-right-radius: 6px; -moz-border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border: #8A8A8A solid thin; text-align:left;}
.wrapper{width: 100% !important; white-space:nowrap; max-width: 350px; display: inline-block;}
.indexinfo{ visibility:hidden; display:none;}
.menubar{ width: 90%; height: 35px; padding-top: 5px; text-align:right; color:#CCCCCC; background: #000 url(/images/menubar.png) repeat-x; max-width:350px; font-size: 0.87em;}
.indexnav{width: 200px;  height: 1000px; background-color:#DFDFDF;-moz-border-bottom-right-radius: 6px; -moz-border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border: #8A8A8A solid thin; }
.tbilling{width: 110px; height: 26px; padding-top: 3.5px; }
.adminbutton{ padding: 0px 0px 5px 0px; width:60px; height:20px; font-size: 0.78em; }
button.button{width:100%;}
.homepagebutton{width: 100%; font-weight: bold;}
.feedback{ display:none; visibility:hidden;}
.usersize{font-size: 0.80em;}

}

@media screen and (min-width: 420px) and (max-width: 485px) and (orientation : landscape){ 
.feedback{ display:none; visibility:hidden;}
.usersize{font-size: 0.80em;}
.adminbutton{ padding: 0px 0px 5px 0px; width:60px; height:20px; font-size: 0.78em; }
}
@media screen and (min-width: 361px) and (max-width: 640px) and (orientation : portrait){ 
.indexinfo, .indexinfologin{ visibility:hidden; display:none; }
.indexlogin{padding-top: 6%; margin-top:3%;}
.indextableright{width: 55%; margin-top: 5px; min-width: 150px; background-color: #bee1ec; height: 800px; float: left; -moz-border-radius: 6px; border-radius: 6px;  border: #666 solid thin;}
.indextableleft{width: 150px;  height: 100%;  margin-top: 5px; float: left; background-color:#DFDFDF;-moz-border-bottom-right-radius: 6px; -moz-border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border: #8A8A8A solid thin;}
.wrapper{width: 100% !important; min-width:351px; display: inline-block;} /* floating div column wrapper */
.menubar{ width: 97%; height: 35px; padding-right: 3%; padding-top: 5px; text-align:right; color:#CCCCCC; background: #000 url(/images/menubar.png) repeat-x; min-width:351px; display: inline-block;}
.indexnav{width: 200px;  background-color:#DFDFDF;-moz-border-bottom-right-radius: 6px; -moz-border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border: #8A8A8A solid thin;}
.tbilling{width: 141px; height: 33px; }
.indexiframenav{height: 800px; width:150px;}/* controls iframe on page only, use the indexnav to control the height width of the html file loaded in the iframe!! */
.button{width: 150px; }
.homepagebutton{width: 100%; font-weight:bold;}
.feedback{ display:none; visibility:hidden;}
.usersize{font-size: 0.80em;}
.adminbutton{ padding: 0px 0px 5px 0px; width:70px; height:25px; font-size: 0.80em; }

}
@media screen and (min-width: 421px) and (max-width: 640px) and (orientation:landscape){ 
.indexinfo, .indexinfologin{ visibility:hidden; display:none;}
.indexlogin{padding-top: 6%; margin-top:3%;}
.indextableright{width: 55%;  margin-top: 5px; min-width: 150px; background-color: #bee1ec; height: 800px; float: left; -moz-border-radius: 6px; border-radius: 6px;  border: #666 solid thin;}
.indextableleft{width: 200px;  height: 100%;  margin-top: 5px; float: left; background-color:#DFDFDF;-moz-border-bottom-right-radius: 6px; -moz-border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border: #8A8A8A solid thin;}
.wrapper{width: 100% !important;  min-width:351px; display: inline-block;}
.menubar{ width: 97%; height: 35px; padding-right: 3%; padding-top: 5px; text-align:right; color:#CCCCCC; background: #000 url(/images/menubar.png) repeat-x; min-width:351px; display:inline-block;}
.indexnav{width: 200px;  height: 1000px; background-color:#DFDFDF;-moz-border-bottom-right-radius: 6px; -moz-border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border: #8A8A8A solid thin;}
.tbilling{width: 141px; height: 33px; }
.indexiframenav{ height: 800px; width:200px;}/* controls iframe on page only, use the indexnav to control the height width of the html file loaded in the iframe!! */
.button{width: 150px;}
button.homepagebutton{width: 25%; float:left; font-size: 0.65em; padding-left: 0px; padding-right: 0px; text-align:center; font-weight: bold;}
.usersize{font-size: 0.80em; }
.adminbutton{ padding: 0px 0px 5px 0px; width:70px; height:25px; font-size: 0.80em;}
} 
@media screen and (min-width: 641px) and (max-width: 768px){ 
.indexinfo, .indexinfologin{ visibility:hidden; display:none;}
.indexlogin{padding-top: 6%; margin-top:7%;}
.indextableright{width: 60%; margin-top: 5px; min-width: 400px; background-color: #bee1ec; height: 800px; float: left; -moz-border-radius: 6px; border-radius: 6px;  border: #666 solid thin;}
.indextableleft{width: 200px;  height: 100%;  margin-top: 5px; float: left; background-color:#DFDFDF;-moz-border-bottom-right-radius: 6px; -moz-border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border: #8A8A8A solid thin;}
.wrapper{width: 100% !important; min-width:641px; display: inline-block;}
.menubar{ width: 97%; height: 35px; padding-right: 3%; padding-top: 5px; text-align:right; color:#CCCCCC; background: #000 url(/images/menubar.png) repeat-x; max-width:768px;}
.indexnav{width: 200px;  height: 1000px; background-color:#DFDFDF;-moz-border-bottom-right-radius: 6px; -moz-border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border: #8A8A8A solid thin;}
.tbilling{width: 141px; height: 33px; }
.indexiframenav{height: 800px; width:200px;}/* controls iframe on page only, use the indexnav to control the height width of the html file loaded in the iframe!! */
button.button{width: 200px; }/* controls iframe on page only, use the indexnav to control the height width of the html file loaded in the iframe!! */ 
button.homepagebutton{width: 25%; float:left; font-size: 0.65em; padding-left: 0px; padding-right: 0px; text-align:center;  font-weight: bold }
.adminbutton{ height: 25px;}
.usersize{font-size: 0.88em;}
}  
/*END Mobile Widths*/

@media screen and (min-width: 769px){
.indexlogin{padding-top: 6%;}
.indexinfo, .indexinfologin{ visibility:visible; text-align:left; float:left; }
.indexinfologin{margin-top:10%;}  
.menubar{width: 97%; height: 35px; padding-right: 10%;padding-top: 5px;  text-align:right; color:#CCCCCC;background: #000 url(/images/menubar.png) repeat-x; min-width:769px;}
.indextableright{height: auto; width: auto; min-width: 76%; max-width: 82%; margin-top: 5px; background-color: #bee1ec; float: left; -moz-border-radius: 6px; border-radius: 6px; border: #666 solid thin;}
.indextableleft{height: auto; width: 200px; margin-left:1%;  margin-top: 5px;  float: left; background-color:#DFDFDF;-moz-border-bottom-right-radius: 6px; -moz-border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border: #8A8A8A solid thin;}
.wrapper{width: 100% !important; min-width:769px; display: inline-block;} /* floating div column wrapper */
.indexnav{width: 200px;  height: 800px; background-color:#DFDFDF; -moz-border-bottom-right-radius: 6px; -moz-border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border: #8A8A8A solid thin;}
.tbilling{width: 141px; height: 33px; }
.indexiframenav{height: 800px; width:200px;}
button.button{width: 200px; }/* controls iframe on page only, use the indexnav to control the height width of the html file loaded in the iframe!! */ 
button.homepagebutton{width: 25%; float:left; padding-left: 0px; padding-right: 0px; text-align:center;  font-weight: bold;}
.adminbutton{font-size: 0.80em; height: 25px;}
.usersize{font-size: 0.88em;}
}
.whitetable, .maintable{ width:90%; margin: 10px 5% 10px 5%; text-align:left; padding:20px;}
.whitetable{ background-color:#333; width: 95%; margin: 0px; margin-right: auto; margin-left: auto; padding:1px; -moz-border-bottom-right-radius: 6px; -moz-border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border: #8A8A8A solid thin; display:inline-block;}
.clockbuttonwrapper{width: 80%; background-color: #FFF; border: #CCC thin solid; float:left; margin-right: auto; margin-left: auto;}
.button:hover, button:hover {background: #e0e0e0 url(/images/overlay2.png) repeat-x;}
input.button{cursor: pointer;}
.menubar a:link, .menubar a:visited, menubar a:active{ color: #CCC; text-decoration:none; }
menubar a:hover{ color: #FFF; }