body, html{height:100%;
background: -webkit-radial-gradient(circle, rgb(80, 80, 80), rgb(0, 0, 0));
background: -o-radial-gradient(circle, rgb(80, 80, 80), rgb(0, 0, 0));
background: -moz-radial-gradient(circle, rgb(80, 80, 80), rgb(0, 0, 0));
background: radial-gradient(circle, rgb(80, 80, 80), rgb(0, 0, 0));
}
body{padding:0px;margin:0px;font-family: tahoma;font-size:12px;color:#bbb}
sup{font-size:0.5em}
form{margin:0}
h3{font-weight:normal;color:#eee}
h2{color:#ccc}
.loginLogo{margin:auto;background:url(../images/billstation_loginlogo.png) center -26px no-repeat transparent;height:140px}
.nav ul{list-style:none;margin:0 auto 20px;padding:0;text-align:center;width:400px;}
.nav>ul>li{display:inline-block;margin:0 3px;}
.nav>ul>li>a{display:block;padding:5px 10px;text-decoration:none;color:#999;background:rgba(0,0,0,0.3);border-radius:3px;border:1px solid rgba(255, 255, 255, 0.1);box-shadow:0 0 2px rgba(0,0,0,0.5);width:60px;text-transform:uppercase;outline:none}
.nav>ul>li>a:hover{background:rgba(0,0,0,0.5);}
.nav>ul>li>a.on,#emailForm input.submit{background:rgba(0,0,0,0.8);color:#fff}
.nav li .current {text-decoration: none; font-family: arial; color: #000; padding: 0px 10px; font-size: 19px; text-transform: uppercase;font-family: Aparajita; border-color: #800001;}
.toggleMobile{display: none;}
.navCont{padding:5px 20px}
.loginContainer{width:620px;height:380px;background:rgba(0,0,0,0.4);margin: 0 auto;padding:5px 0;border-radius:5px;border:1px solid rgba(255, 255, 255, 0.1);box-shadow:0px 0px 3px #000;position:relative; text-align: justify;}
img {float: left;padding: 4px 8px 2px 0;width: 200px;}
.loginContainer h3{margin-left:20px;}
.toggleMobile{display: none;}
#mobileMenu{position: fixed;top: 0;left: 0;width: 100%;display: none;}
#mobileMenu ul{margin:0;padding:0}
#mobileMenu ul li{display:block;background-color:#423f3f;color: #fff;letter-spacing: 0.1em;text-align: center;text-transform: uppercase;border-bottom: 1px solid #bbb;font-family: trebuchet ms;}
#mobileMenu ul li a{padding: 10px 0;display:block;color:#fff;font-size:1.2em ; }
#mobileMenu ul li a.on{background-color:#000;}
.nano.navCont{padding:0}
.nano {position :relative;height:80%;overflow:hidden;}
.nano .content {position: absolute;overflow: scroll;overflow-x:hidden;top:0;right:0;bottom:0;left:0;border:none;padding:5px 20px}
.nano .content::-webkit-scrollbar {visibility: hidden;}
.has-scrollbar .content::-webkit-scrollbar {visibility: visible;}
.nano > .pane {background : rgba(80,80,80,.25);position:absolute;width:7px;right: 0;top: 0;bottom: 0;opacity: .01;}
.nano > .pane > .slider {background: rgba(0,0,0,.5);position: relative;margin: 0 1px;border-radius: 3px;}
.nano:hover > .pane, .pane.active, .pane.flashed {visibility : visible\9; /* Target only IE7 and IE8 with this hack */opacity : 0.99;}
.optimization {text-align:center;margin-top:20px;color: #aaa;font-size:0.8em}
#features ul{padding-left:0px}
#features ul h2{display:inline;margin:0;font-size:1.1em;text-transform:uppercase;}
#features ul li{margin:6px 0;list-style:none}
#contact{text-align:center}
.contact_us{width:48%;padding:2% 1%;float:left}
.contact_us h1{font-size:12px; font-family:Trebuchet MS;color:#bbb; text-transform:uppercase;}
#emailForm input{margin:5px 0;border:solid 1px #666;background-color:transparent;padding:3px 5px;border-radius:2px;color:#bbb;width:200px;font-family:arial;font-size:1em}
#emailForm input.field{width:403px}
#emailForm input.submit{width:auto;padding:3px 8px;cursor:pointer}
.clientList{list-style:none;padding:0;margin:0}
.clientList h3{font-weight:normal;font-size:1em;margin:0}
.clientList h2{font-weight:bold;font-size:1em;margin:0; text-transform:uppercase;}
.clientList li{float:left;width:45%;padding:1%;margin-bottom:1%;box-shadow:1px 1px 3px rgba(0,0,0,0.3)}
.clientList li:nth-child(even){float:right}
.hr{border:solid 1px #333;border-width:1px 0;border-bottom-color:#161616;margin:10px;}
.facebook{background:url(../images/f.png) center center no-repeat transparent;width:25px;height:25px;display:block;margin:10px auto 0}
.footer,.optimization {text-align:center;margin-top:6px;color: #aaa;font-size:0.8em}
.footer a{color:#fff; text-decoration:none;}
/*mobile CSS*/
@media only screen and (max-width:500px)
{
.nav{display:none;}
#mobileMenu{display: block;z-index: 99;}
.toggleMobile{position: fixed;top:5px;left:5px;display: block;width:30px;height:28px;cursor: pointer;z-index: 999;}
.toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3
{display: block;position: absolute;width:30px;height:6px;left: 0;background:#fff;
-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}
.toggleMobile span.menu1{top: 0;}
.toggleMobile span.menu2{top: 10px;}
.toggleMobile span.menu3{top: 20px;}
.toggleMobile.active span.menu1
{top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}
.toggleMobile.active span.menu2
{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}
.toggleMobile.active span.menu3
{
opacity: 0;
-webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}
.loginContainer { width: auto; height:auto;}
img {width:100%}
.nano { height: 400px;}
.optimization{display:none;}
.clientList li {width:100%; text-align:center; margin:2px auto 10px; box-sizing:border-box;}
#emailForm input.field{width:200px}
.contact_us { margin: auto; width: 100%;padding:4px;}
.footer { margin: 4px auto 0; text-align: center; width: 70%;}
.clientList li,.clientList li:nth-child(2n){float:none}
.loginContainer h3{}
}