@charset "utf-8";

html{
    height:100%;
}

body{
    font-family: 'Open Sans', sans-serif;
    font-weight:400;
    font-size:12px;
    background-color: #eeeeee;
    color:#3c3c3c;
    height:100%;
    width:100%; 
    margin:0;
    padding:0;
    line-height: 150%;
    
    position:relative;
}

input, select, textarea{
    font-family: 'Open Sans', sans-serif;
    font-size:14px;
    color:#2c2c2c;
}

button{
    font-family: 'Open Sans', sans-serif;
}
ul{
    margin:0;
    padding:0;
}
p{
    margin:10px 0;
}

a{
    color:inherit;
    text-decoration:none;
    cursor:pointer;
}

.container{
    max-width:1000px;
    width:320px;
    margin:0 auto;
}


.clearrow{
    display:block;
    clear:both;
    width:100%;
}

.submitrow{
    text-align:right;
}

.ptbutton{
    background-color: #009d00;
    line-height:140%;
    color:white;
    padding:5px 20px;
    display:inline-block;
    border:none;
    font-weight:900;
    text-transform:uppercase;
    font-size:14px;
    width:120px;
    text-align:center;
    cursor:pointer;
    margin-bottom:5px;
    box-sizing:content-box;
} 

.ptorange{
    background-color: #7ac1d3;
    
    color:white;
    text-transform:uppercase;
    font-size:24px;
    
    font-weight:900;
    padding:10px 20px;
    
overflow:hidden;
}


.content{
    margin:5px auto;
}
.content .tab{
    position:fixed;
    top:150px;
    left: -60px;
    width:94px;
    text-align:center;
    margin:20px auto;
    background-color: White;;
    color:white;
    text-shadow: 0 1px 1px #8a1b0f;
    font-weight:700;
    font-size:20px;
    padding:20px 40px;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
    -webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

.help{
    position:fixed;
    left:-944px;
    top:100px;
    border: 2px solid #f28151;
    background-color:white;
    width:900px;
    padding:20px;
    min-height:150px;
    max-height:500px;
    overflow:auto;
    
    -webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

.infopage{
    background-color:white;
}

.ptbox{
    padding:20px;
}

.content h1 i{
    cursor:pointer;
}
.fullscreen i{
    cursor:pointer;
}
.reportpage i{
    cursor:pointer;
}

.boxpadding{
    padding:20px;
}

.foot{
    margin:5px auto;
    background-color:#333333;
    color:white;
    font-weight:700;
    padding:10px 20px;
    overflow:hidden;
}
.foot a{
    text-decoration:underline;
}
.foot .mode{
    float:right;
    margin: 10px 0;
}
.foot .mode a{
    text-decoration:none;
}

.status{
    margin:5px auto;
    background-color: #333333;
    color:white;
    font-weight:700;
    padding:10px 20px;
    overflow:hidden;
}
.status .lname{
    float:left;
}
.status .rightlink{
    float:right;
    margin-left:40px;
    text-decoration:underline;
} 
.status .cart{
    float:right;
    margin-left:40px;
}

.text ul, .help ul{
    margin-left:30px;
}

/* SERVICE LIST */
.switchcont{
    margin:4px;
} 
.switch{
    display:inline-block;
    width:148px;
    background-color:#cccccc;
    padding:3px 3px;
    text-transform:uppercase;
    font-size: 16px;
}
.switch.active{
    background-color:#f2cd46;
}


.tableitem{
    margin:4px;
    background-color:#eeeeee;
    display:block;
}

.infoform{
    width:100%;
}

.line{
    display:table;
    width:100%;
    
}
.line > div{
    display:table-cell;
    padding:1px 3px;
}
.desc{
    position:relative;
    overflow:hidden;
    height:18px;
    padding:1px 3px;        
}
.servicename{
    position:absolute;
    right:0;
    top:0;
    padding: 1px 3px;
    height:18px;
    background-color:white;
    font-weight:bold;
}
.tableitem .customer{
    font-weight:bold;
}
.tableitem .date{
    text-align:right;
}
.tableitem .address{
    font-size:11px;
    padding:1px 3px;
}
.tableitem .contact{
    font-size:11px;
}

.tableitem .phone{
    color:#009d00;
    font-size:11px;
    font-weight:600;
}

.title{
    background-color: #7ac1d3;
    color:white;
    font-weight:700;
    text-transform:uppercase;
    font-size:18px;
    line-height:120%;
    padding:5px;
    display:block;
    margin-bottom:2px;
}
.subtitle{
    background-color: #f2cd46;
    color:#333333;
    font-weight:500;
    text-transform:uppercase;
    font-size:16px;
    line-height:120%;
    padding:5px;
    display:block;
    margin-bottom:2px;
}
.col{
    margin-bottom:10px;
}
/* INFOFORM */

.infoform{
    display:table;
    border-spacing:2px;
}
.row{
    clear:both;
    margin:5px 0;
    overflow:hidden;
    display:table-row;
}
.row .label{
    text-transform: uppercase;
    display:table-cell;
}
.row .item{
    background-color: #eeeeee;
    min-height:21px;
    display:table-cell;
    padding:2px;
}

/* FORM */

.hide{
    display:none; 
}

.ui-spinner{
    width:40px;
}

.ujselect{
    background-color: #f1f1f1;
    border: 2px solid #ddd;
    font-size: 14px;
    max-height:200px;
    overflow: auto;
    list-style-type:none;
}
.ujselect li { 
    border-bottom: 2px solid #ddd;
    padding: 3px;
    cursor:pointer;
}
.ujselect li.selected {
    background-color: #f2cd46;
}
.ujselect li:hover {
    background-color:white;
} 
.ujselect li.active {
    background-color: #f2cd46;
}
.device{
    text-transform:none;
}
.device .deviceid{
    font-weight:bold;
    text-transform:uppercase;
    display:block;
}
.device .devicename{
    display:block;
}
.device .deviceaddress{
    font-size: 11px;
    display:block;
}
.metertable{
    padding: 5px;
}
.metertable table{
    border-spacing:0;
    width:100%;
}
.metertable table td{
    padding:2px 4px;
    border-bottom:1px solid #ddd;   
}
.metertable table th{
    background-color:#ddd;
    text-align:left;
}
/* ORDER */

.orderpage{
    font-size:14px;
}

.orderpage .text{
    margin-bottom:20px;
}
.orderpage .billing{
    display:inline-block;
    width:465px;
    vertical-align:top;
}
.orderpage .shipping{
    display:inline-block;
    width:450px;
    vertical-align:top;
}

.orderpage .cart{
    margin-top:40px;
}

.formRow{
    padding:5px;
} 

.formRow .formInfo{
    font-size:16px;
    font-weight:700;
}

.formRow .formItem{
    display:inline-block;
    width:150px;
}

.content .formRow .formLabel, .content .formRow .formItem{
    display:block;
    width:auto;
    text-transform:uppercase;
    text-align:left;
    color:#3c3c3c;
}

.formText, .formTextarea, .formSelect{
    
    
    font-size:14px;
    padding:3px;
    width:350px;
    border: 2px solid #ddd;
    background-color:#f1f1f1;
}

.content .formText, .content .formTextarea, .content .formSelect{
    width:300px;
}

.formTextarea{
    height:100px;
}

.content .formLine{
    width:150px;
}
.content .formQty{
    width:30px;
}

.qty-minus, .qty-plus, .removeline{
    display:inline-block;
    width:20px;
    padding:5px;
}
.hidebutton{
    display:none;
}

.ui-loader{
    display:none;
}







/* LOGIN */
.loginBox{
    width:320px;
    padding:0;
    margin:200px auto;
}
.loginBox .formLabel{
    width:60px;
}
.loginBox .formText{
    width:170px;
}

.loginBox .error{
    color:rgba(208,26,16,1);
    font-weight:600;
    font-size:18px;
    text-align:center;
}