/*  Copyright TRUX Route Management Systems Inc. 
	Author: Sanjeev Rajput
	Created: November 08 2011 */
	
/* General Items (applicable to the whole site) */

.ui-tooltip {
    padding:0 !important; 
}

 #paymentIframe {
    width: 100%;
    height: 100%;
    border: none;
}

 .ui-dialog .ui-dialog-content {
    overflow: hidden; 
}


*{
margin:0px;
padding:0px;
}

ul {
    list-style-position: inside;
    margin: 5px;
}

body {
margin:0px;
background-color:#2c2d2c;
font-family:'myriad pro'; 
font-size:15px;
}

a {color:#005fa1; text-decoration:none;} /* Default color for all hyperlinks */

p {margin:5px;}

img {border:none}
.inline_mini_icon {vertical-align:middle; padding-right:3px;}

h1 {
font-size:28px;
color:#3f3f3f;
margin:5px;
margin-top:0px;
}

h2 {
font-size:22px;
color:#3f3f3f;
}

h2.drop_down_header {
font-size:16px;
}

.frm_error {border:1px solid red} /* highlight input boxes with errors */
.frm_error_lbl {color:red;
    width: 939px;
} /* error messages */
.close_button {vertical-align:middle; float:right;margin-right:3px;}

/* ------------- Header/Banner Area ------------------- */

#header {
width:100%;
background-image:url(../_images/blue_hdr_bckgrnd_sliver.png);
background-repeat:repeat-x;
}

#header_area {
width:979px;
height:76px;
margin: 0px auto;
}

.banner_logo {
float:left;
padding-top:24px; /* Decrease padding as logo image height increases */
}

.headerLabel {
    text-decoration: underline;
}

.bottomRight {
    position: absolute;
    bottom: 5px;
    right: 0;
}

.topRight {
    position: absolute;
    top: 5px;
    right: 0;
}

#login_status {
float:right;
width:825px;
height:15px;
padding:5px 3px 0px 0px;
text-align:right;
font-family:Tahoma;
font-size:.8em;
color:white;
}

#login_status a {color:white; text-decoration:underline;}

.hide {
display: none
}

.main_nav {
float:right;
height:51px;
padding-top:4px;
font-size:0.9em;
text-align:right;
}

.main_nav li.active a:after{
    position:absolute;
    bottom:-16px;
    left:50%;
    width:20px;
    height:20px;
    content: url("../_images/top_nav_current_page_arrow.png");
}

.main_nav img {vertical-align:middle; padding-bottom:4px;}

.main_nav a {color:white;}

.main_nav li {
    float: left;
    list-style: none;
    position:relative;
}

/* -------- Main Area and Work Area -------- */

#main_area {
width:100%;
min-height:400px;
background-color:#2c2d2c;
background-image:url(../_images/main_bckgrnd_sliver.png);
background-repeat:repeat-x;
background-position: top left;
}

#work_area {
width:949px;
margin: 0px auto;
border:1px solid #b6b8b7;
border-top:none;
background-color:white;
padding:25px 15px 45px 15px;
}

/* ----- Navigation Arrow (indicates current page) ------ */

#nav_arrow {
width:979px;
height:15px;
margin: 0px auto;
border:1px solid #b6b8b7;
border-top:none;
border-bottom:none;
background-color:white;
text-align:right;
}

#nav_arrow img {
vertical-align:top;
}

.nav_pos_1 { margin-right:675px; margin-top:-1px;}
.nav_pos_2 {margin-right:580px; margin-top:-1px;}
.nav_pos_3 {margin-right:465px; margin-top:-1px;}
.nav_pos_4 {margin-right:340px; margin-top:-1px;}
.nav_pos_5 {margin-right:240px; margin-top:-1px;}
.nav_pos_6 {margin-right:140px; margin-top:-1px;}
.nav_pos_7 {margin-right:50px; margin-top:-1px;}
.nav_pos_none {display:none;}

.w_nav_pos_4 {margin-right:330px; margin-top:-1px;}
.w_nav_pos_3 {margin-right:430px; margin-top:-1px;}

/*
.nav_pos_1 { margin-right:575px; margin-top:-1px;}
.nav_pos_2 {margin-right:445px; margin-top:-1px;}
.nav_pos_3 {margin-right:310px; margin-top:-1px;}
.nav_pos_4 {margin-right:175px; margin-top:-1px;}
.nav_pos_5 {margin-right:50px; margin-top:-1px;}
.nav_pos_none {display:none;}
*/

/* ------ Getting Started Box (only shows on My Account page) ------ */

#getting_started {
width:947px;
background-color:#eef7ff;
border:1px solid #cccccc;
font-family: 'myriad pro';
margin-bottom:20px;
}

#getting_started p {
margin-left:10px;
}

#getting_started ul {margin-left:20px}

#getting_started ul li {list-style-type:none;}

#getting_started li {font-weight:bold;}

.title_bar {
height:22px;
padding:3px 0px 0px 10px;
background-color:#00a3d3;
color:white;
}

.title_bar_blk {
height:22px;
padding:3px 0px 0px 10px;
background-color: black;
color:white;
}

.title_bar_orange {
height:22px;
padding:3px 0px 0px 10px;
background-color:#ffb401;
color:black;
font-weight:bold;
margin-bottom:20px;
}

.title_bar_orange img {
vertical-align:middle;
}

#customer_information {
float:left;
width:660px;
min-height:200px;
border:1px solid gray;
margin-bottom:30px;
}

#customer_information p {
padding-left:10px;
}

#status_bar {
width:100%;
height:22px;
padding-top:4px;
background-image:url(../_images/tbl_hdr_bckgrnd_sliver.png);
background-repeat:repeat-x;
background-position: top left;
margin-bottom:10px;
}

#status_bar p {
margin:0px;
}

#status_bar .label {
color:black;
font-weight:bold;
padding-right:8px;
}

#status_bar .data {
color:white;
font-weight:normal;
padding-right:8px;
}

.customer_address {

padding:10px;
margin-left:15px;
    left: 0px;
    right: 0px;
        word-break: break-all;
    word-wrap: break-word;
}

.customer_address td {
vertical-align:top;
padding-left:10px;
}

.customer_address .label {
text-align:right;
padding-left:5px;
}

.mailing_address {
float:right;
margin-right: 40px;
padding:10px;
}

.mailing_address td {
vertical-align:top;
padding-left:10px;
}

.mailing_address .label {
text-align:right;
padding-left:5px;
}

#bill_information {
float:right;
width:266px;
min-height:200px;
border:1px solid gray;
background-image:url(../_images/account_bckgrnd_sliver.jpg);
background-repeat:repeat-x;
background-position:bottom left;
}

#payment_info {
margin:0px auto;
}

#payment_info td {font-size:1.1em; text-align:right; padding:5px;}

#current_balance {
text-align:right;
font-weight:bold;
font-size:1.1em;
padding:10px;
border-top:1px solid gray;
}

.large_amount {
font-size:1.7em;
}

#CreditLimit {
clear:both;
width:947px;
}

#email_invoice {
clear:both;
width:947px;
}

.mGrid_titlebar {
width:100%;
height:26px;
padding-top:0px;
background-image:url(../_images/tbl_hdr_bckgrnd_sliver.png);
background-repeat:repeat-x;
background-position: top left;
background-size: 100% 100%;
}

.mGrid_titlebar p {float:left;margin:0px; padding-top:4px; margin-left:10px; font-weight:bold;}

.mGrid_titlebar_service {
width:100%;
height:26px;
padding-top:0px;
background-image:url(../_images/tbl_hdr_bckgrnd_sliver.png);
background-repeat:repeat-x;
background-position: top left;
border-bottom:1px solid black
}

.mGrid_titlebar_service p {float:left;margin:0px; padding-top:4px; margin-left:10px; font-weight:bold;}

.mGrid_titlebar_service a {color:black} 

.highlighted_info {
float:right;
padding-right:8px;
font-weight:bold;
background-image:url(../_images/highlight_tbl_hdr_bckgrnd_sliver.png); 
background-repeat:repeat-x; 
background-position:top left;
height:26px;}

.highlighted_info img {
float:left;
}

.highlighted_info p {
margin:0px;
padding-top:4px;
padding-left:10px;
}

.mGrid {
width:100%;
border:1px solid gray;
border-bottom:none;
}

.col_headers {
min-height: 25px;
background-image:url(../_images/gray_col_hdr_bckgrnd_sliver.png);
color:white;
background-position: left bottom;
background-repeat: repeat-x;
background-color: #747270;

}

.col_headers a {color:white;}
.col_headers th {text-align:left;padding-left:5px;}
.col_headers th.money {text-align:right;}
.col_headers th.route {text-align:left;padding-left:10px;}
.col_headers th.number {text-align:right;padding-right:5px;}
.col_headers th.pay_input {text-align:right; padding-right:5px;}

.mGrid td {
padding:5px;
border-bottom:1px solid #CCC;
text-align:left;
}

.gridButtonColumn 
{
    padding: 2px !important ;
}

.mGrid{
background-color:white;

}

#gvInvoiceList tr{

}

#gvTicketList tr{

}

.alt_row { 
background-color:#F3F3F3; /* Alternating row background-color on all tables */
    word-break: normal;
    word-wrap: normal;
}

.mGrid td.money {text-align:right;}
.mGrid td.approved {color:green;}
.mGrid td.declined {color:red;font-weight:bold;}
.mGrid td.pay_input {text-align:right;width:21%}
.mGrid td.route {text-align:left}
.mGrid td.number {text-align:right;}
.mGrid input {text-align:right;}
.mGrid input.text { text-align: left;}

.split_forms_left
{width:470px; float:left;margin-top:10px;}

.split_forms_right
{float:right; width:470px; margin-top:10px;}

.default_button
{
clear:both;
margin-left:260px;
width:140px;
height:31px;
background:#666666;
text-align:center;
color:#FFFFFF;
font-weight:bold;
}

.gridButton
{
    background:#666666;
    text-align:center !important;
    color:#FFFFFF;
    padding: 5px;
}



p.intro{
color:#222;
margin-bottom:20px;
border-bottom:solid 1px #ccc;
padding-bottom:10px;
}

.textfield {
float:left;
padding:4px 2px;
border:solid 1px #ccc;
margin:2px 0 20px 10px;
}

.textfield_error {
float:left;
padding:4px 2px;
border:solid 1px red;
margin:2px 0 20px 10px;
}

select {
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #ccc;
margin:2px 0 20px 10px;
}

label {
float:left;
display:block;
font-weight:bold;
text-align:right;
}

.small {
display:block;
font-size:12px;
font-weight:normal;
text-align:right;
color:#222222;
}

.checkbox {
float:none;
width:500px;
margin:0px 5px 20px 10px;
border:none;
}

.radiobutton {
float:none;
width:250px;
margin:0px 5px 20px 10px;
border:none;
}

.location {
color:#444;
}

.bottomBorder {
    border-top: 1px solid black;
}

.auto_width {
    width:100%;
    border:solid 1px #222;
    background-color:#f9f6ef;
    padding-bottom:10px;
}



/* ----------- Full Width Form ----------- */



.full_width {
width:947px;
border:solid 1px #222;
background-color:#f9f6ef;
padding-bottom:10px;
margin-top:20px;
}

.full_width label{ width:250px; }
.full_width .small{ width:250px; }
.full_width .textfield{ width:400px; margin-right:200px; }
.full_width .textfield_error{ width:400px; margin-right:200px; }
.full_width select { width:400px; margin-right:200px; }
.full_width .checkbox { margin-left:195px; }

.full_width .frm_error_lbl {margin-left:200px;color:red}
.full_width .question {float:left;padding:0px 5px 4px 5px;margin:2px 300px 20px 10px;}

/*----------- Login Form Customizations -------------*/

#login_form {
height:267px;
background-image:url(../_images/pay_bill_image2.jpg);
background-repeat:no-repeat;
background-position: bottom right;
background-color:#f9f6ef;
}

#login_form label {width:188px;}
#login_form .small {width:188px;}
#login_form .textfield {width:300px; margin-right:400px;}
#login_form .textfield_error {width:300px; margin-right:400px;}
#login_form .title_bar_blk {margin-bottom:40px;}
#login_form .default_button {margin-left:200px;}

/* ----------- Half Width Form ----------- */

.half_width {
width:460px;
border:solid 1px #222;
padding-bottom:10px;
margin-top:20px;
}

.half_width label{ width:180px; }
.half_width .small{ width:180px; }
.half_width .textfield {width:220px; margin-right:20px;}
.half_width .textfield_error {width:220px; margin-right:20px;}
.half_width select {width:230px;}
.half_width .frm_error_lbl {margin-left:130px;color:red; border:none;}

/*----------- Forgot Password Customizations -------------*/

#forgot_password {min-height:180px;}
#forgot_password .title_bar_blk {margin-bottom:40px;}
#forgot_password label {width:120px;}
#forgot_password .default_button {margin-left:130px;}

/*----------- New Registration Customizations -------------*/

#new_registration .title_bar_blk {margin-bottom:40px;}
#new_registration .default_button {margin-left:190px;}

/*----------- Select Company (during login) Customizations -------------*/

#select_company select {margin-top:20px;}
#select_company label {margin-top:20px;}
#select_company .default_button {margin-left:260px;}

/*----------- My Services -------------*/

#next_service {
float:left;height:25px;margin-top:10px;background-color:orange;padding:0px 5px 5px 5px; font-weight:bold;
}

.toolbar_icons {float:right;padding-top:3px;margin-top:10px;}
.toolbar_icons img {vertical-align:middle;padding:3px;}


/*----------- Payment Confirmation Screen -------------*/

#payment_confirm
{
padding-bottom:15px;
width:62%;
border:1px solid #ffb401;
margin:0px auto;
margin-bottom:30px;
background-color:#ffffcc;
text-align:center;
font-weight:bold;
}

#payment_confirm table {width:250px;margin:0px auto; margin-top:10px;}
#payment_confirm .label {text-align:left; color:#0066CC;}
#payment_confirm .data {text-align:right; color:#0066CC;}

#payment_confirm #company {
font-size:1.2em;
border-bottom:1px solid #ffb401;
padding-bottom:20px;
margin-bottom:15px;
}

#payment_confirm #intro_text {font-size:1.8em}
#payment_confirm #total_pay {font-size:2.4em}

.payment_option {
width:61%;
margin:0px auto;
margin-bottom:10px;
border-top:1px solid #79a8d7;
padding:10px;
padding-top:20px;
}

.payment_option input {
float:left;
margin-right:10px;
}

#option_two {
border-bottom:1px solid #79a8d7;
padding-top:20px;
}

#Credit_Card_On_File {
width:600px;
padding:10px;
margin-left:20px;
margin-top:10px;
}

#ACHOnFile span {
padding-right:10px;
padding-left:10px;
font-weight:bold;
}

#Credit_Card_On_File span {
padding-right:10px;
padding-left:10px;
font-weight:bold;
}

#Credit_Card_On_File .textfield {
	margin:0px;
	float:none;
	padding:0px;
	width:50px;
}

#New_Credit_Card {
width:555px;
padding:10px;
margin-left:0px;
margin-top:20px;
}

.cvv2_helplnk {
	padding-left:5px; 
	font-size:.8em;
}

.DropDownList
{
    margin:0;
    padding:0;
}

#New_Credit_Card #txtDriversLicense { width:55% !important}
#New_Credit_Card #ddlDriverStateProv {width: 40%;float:right;position: relative}

#New_Credit_Card #ddlStateProv {width:40%;}

#New_Credit_Card #txtFirstName {width:41%}
#New_Credit_Card #txtLastName 
{
    width:41%;
    margin:auto auto auto 2px;
}
#New_Credit_Card #txtAddress {width:85%}
#New_Credit_Card #txtCity {width:85%}
#New_Credit_Card #txtProvince {width:85%}
#New_Credit_Card #txtPostalCode {width:85%}
#New_Credit_Card #txtPhoneNumber {width:85%}
#New_Credit_Card #txtEmail {width:85%}
#New_Credit_Card #txtCountry {text-align:center}
#New_Credit_Card #ddlStateProv {width:56%}

#New_Credit_Card #txtCustomerID {width:85%}
#New_Credit_Card #txtCardNumb {width:150px}
#New_Credit_Card #txtCvv2NewCard {width:50px}
#New_Credit_Card #txtCardHFName {margin-right:8px}

#New_Credit_Card #ddlCardType {
	margin:0px;
}

#New_Credit_Card #ppInformation input {
    width: 100%;
}

#new_card {

}

#new_card td {
	padding:3px;
}

#ccInformation td {
	padding:3px;
}

#ppInformation td {
	padding:3px;
}

.lblPayNow
{
    display:inline;
    width:100px;
    float:right;
	font-weight:bold;
	text-align:right;
}

#New_Credit_Card label {
	float:none;
	font-weight:bold;
	text-align:right;
	width:100px;
}

#New_Credit_Card .textfield{
	float:none;
	padding:2px;
	border:solid 1px #ccc;
	margin:0px;
}

.tableForm {
}

.tableForm .textfield{
    	float:none;
	border:solid 1px #ccc;
	margin:0px;
    width:100%;
}

.tableForm td {
    padding:3px;
}

.tableForm label{
	float:right;
    width:auto;
    white-space:nowrap;
    
}

.tableForm .label{
    float:right;
    width:auto;
    white-space:nowrap;
    
}

.tableForm select {
float:none;
font-size:12px;
padding:4px 2px;
border:solid 1px #ccc;
margin:0px;
}

.tableForm input {
    margin: 0px 0 10px 5px;
}

.checkboxlist label {
    float:none; 
    display:inline;
    font-weight:normal;
    text-align:left;
}


#group_buttons {
width:70%;
margin:0px auto; 
margin-bottom:20px; 
padding:10px;
}

/* -------------- Payment Results ---------------------- */

#payment_results {
margin:15px 5px 10px 5px;
padding:10px;
border:1px solid #ccc;
}

#company_logo {float:left;}

#company_logo img {
margin:10px;
width:250px;
}

#company_address {float:right}
#company_address p {margin:10px;margin-top:15px;}
#company_address .label {font-weight:bold; padding-right:5px;}
#company_address .data {padding-right:5px;}

#center_title {
clear:both;
margin:0px auto;
margin-top:20px;
width:300px;
text-align:center;
font-size:1.4em; 
font-weight:bold;
}

#payment_details {
border:1px solid #222;
padding:10px;
margin-top:10px;
margin-bottom:20px;
}

#payment_details .label {font-weight:bold; padding-right:5px;}
#payment_details .data {padding-right:5px;}

#bottom_links {margin-top:15px; margin-bottom:20px;}
#bottom_links a {padding-right:10px; padding-left:10px;}

#gvInvoiceList td {padding:5px;}

/* ------ Account Aging ------- */

#account_aging {
width:946px;
margin:20px 0px 10px 0px;
border:1px solid gray;
}

#account_aging table {width:100%; background-color:black;}

#account_aging td {padding:3px;}

#account_aging .header {
color:white;
text-align:center;
padding:5px;
background-image:url(../_images/tbl_hdr_bckgrnd_sliver.png);
background-repeat:repeat-x;
background-position: top left;
}

.header .label {
	width:16%;
}

#account_aging .aging_amounts {
background-color:white;
color:black;
text-align:center;
padding:5px;
}

#OA_balance {
	margin:5px 0px 15px 0px;
	text-align:right;
	min-width:310px;
	height:30px;
	float:right;
	padding-top:5px;
	padding-right:5px;
	color:white;
	background-color:#4276a9
}

#OA_balance span {
	display:inline-block;
	border:1px solid #666;
	padding:3px;
	margin-left:5px;
	width:145px;
	vertical-align:middle;
	text-align:center;
	color:black;
	background-color:white;
}

#pay_button {
position:relative;
left:448px;
width:500px;
text-align:right;
}

#pay_button input {margin:0px;}

/* Footer */

#footer {
width:979px;
height:70px;
margin: 0px auto;
background-color:#2c2d2c;
color:white;
font-family:Tahoma;
font-size:.85em;
text-align:right;
padding-top:10px;
}

#statements .default_button {margin-left:10px;}

.pdf {
    cursor:pointer;
}

.tooltip {
    cursor:pointer;
}

.ui-tooltip, .arrow:after
{
    position: absolute !important;
}

.contactsGrid {
    width: 100%;
    position: relative;
    top: 0px;
    left: 0px;
    word-wrap: normal;
    word-break:normal;
}

.wrap {
    word-wrap: normal;
    word-break:normal;
}

.wrapword {
    word-wrap: normal;
}

.contactsGrid input[type="text"] {
    width: 100%;
}

.contactsGrid td {
    text-align: center; 
    vertical-align: middle;
}

.contactsGrid input[type="checkbox"] {
    margin: auto;
}

.containerImages {
    cursor: pointer;
}