@media all {
  .page-break  { display: block; height: 1px; width: 100%; border: solid 1px #000; }
}
@media print {
  .page-break  { display: block; page-break-before: always; }
}

.toolBoxAckTable {border-collapse: collapse; width: 100%;}
.toolBoxAckTable th {vertical-align: bottom;}
.toolBoxAckTable td {vertical-align: top;}
.toolBoxAckTable td.border {border-collapse: collapse; border: solid 1px #fff;}
.toolBoxAckTable td.deletePlaceHolder {border-collapse: collapse; border: solid 1px #fff; background-color: #ff3322;}
.toolBoxAckTable input {width: 95%;}
.toolBoxAckTable td.color1 {background-color: #444;}
.toolBoxAckTable td.color2 {background-color: #000;}

#jobsTable {border-collapse: collapse;}
#jobsTable th {vertical-align: bottom;}
#jobsTable td {vertical-align: top;}
#jobsTable td.border {border-collapse: collapse; border: solid 1px #fff;}
#jobsTable td.deletePlaceHolder {border-collapse: collapse; border: solid 1px #fff; background-color: #ff3322;}
#jobsTable input {width: 95%;}
#jobsTable td.color1 {background-color: #444;}
#jobsTable td.color2 {background-color: #000;}

#wrapper {
    /*width: 1010px; */
    width:1200px;    
    margin:0 auto;
    padding: 0;
}            
#detailsContainer {width:1200px; text-align: center;}
#header {width: 800px; margin: 0 auto;}
#menu {width: 850px; margin: 0 auto;}

/* Boiler */            
div.pane{
    overflow:auto;
    clear:left;
    margin: 10px 0 0 10px;
    position:relative;
    width:1010px;
    /*height:400px;*/
}

/* BEGIN: The Hours Page -------------------------------------- */
iframe {border: none;}
#formHolder {text-align: center; width: 600px;}
#hoursTable {width: 600px; margin: 0 auto 0 auto;}
.leftCellHours {width: 50%; text-align: right; padding-right: 2px; font-weight: bold;}
.rightCellHours {width: 50%; text-align: left; padding-left: 2px;}
.wideButton {width: 200px; text-align: center; margin: 0 auto;}
.errorSpan {color: #fff; font-weight: bold; border: solid 1px #f11; padding: 6px 10px; margin: 0 auto 0 auto; display: none; background-color: #f77; width: 80%;}
#dateToday {font-weight: bold;}
.editFlag {color: red;}
.hoursEditBox {width: 90%;}
.disabled {text-align: center; border: solid 2px #777; padding: 6px 10px; margin:0; display: inline-block; background-color: #333;}
.disabled:link { color: #555; font-weight: bold; background-color: #333; width:95%;}        
.disabled:visited { color: #555; font-weight: bold; background-color: #333;}
.disabled:active { color: #555; font-weight: bold; background-color: #333;}

/* END: The Hours Page   -------------------------------------- */


#mainCheckboxes {margin: 10px 0;}
#checkboxesTableMain {margin: 0 auto; width: 850px;}
.leftBorder {border-left: solid 1px #444;}
.rightBorder {border-right: solid 1px #444;}
.topBorder {border-top: solid 1px #444;}
.bottomBorder {border-bottom: solid 1px #444;}
.typeCheckBoxSpan {width: 125px; display: inline-block;}
.boilerInputBox {width: 100px; margin-right: 5px;}
.boilerInputBoxLabel { width: 50px;}

.equipmentCell {width: 190px; text-align: left;}
.minusCol {width: 40px;}
.plusCol {width: 25px;}

.boilerMainBoxLabel {text-align: left; padding: 0 15px 0 0;}
.checkboxHolderMain {text-align: left; padding: 0 15px 0 0;}

.boilerPane {float: left; width: 1006px; height: 380; background-color: #222; border:solid 2px #444;}            
.boilerBoxLabel {text-align: right; width: 250px;}
.boilerTypeHeader {text-align: right;}
.boilerTypeHeaderCenter {text-align: center; padding: 5px 0;}
.checkboxHolder {width: 300px; text-align: left;}
.checkboxBox {display: inline-block; width: 25px; text-align: center;}
.headerBox {display: inline-block; width: 25px; text-align: center;}
/* Stop delete details from showing up */
/*#deleteDetails {display: none;}    */         
/* Headers */
h1 {margin: 10px 0;}
h3 {margin: 10px 0;}
/* Link Styling */
a {text-decoration: none;}
a:link {color: #ecc447;}
a:visited {color: #ecc447;}
a:hover {color: #FFF;}
a:active {color: #ecc447;}           

/* Reports - Contract Equipment Details */
.ceDetailsTable {width: 750px; margin: 0; padding: 0; border: none; float: left;}
.ceTempsTable {width: 550px; margin: 0; padding: 0; border: none; float: left;}
.ceCompressorTable {width: 200px; margin: 0; padding: 0; border: none;}
.ceRowBDetail {width: 100px; padding: 0 2px;}
.ceRowBDetail input {width: 100%;}
.ceRowCDetail {width: 100px;   padding: 0 2px;}
.ceRowCDetail input {width: 100%;}
.ceRowDDetail {width: 700px;}
.ceRowDDetail input {width: 100%;}

/* Reports - Equipment Details */
.eDetailsTable {width: 750px; margin: 0; padding: 0; border: none;}
.eRowBDetail {width: 100px; padding: 0 2px;}
.eRowBDetail input {width: 100%;}
.eRowCDetail {width: 100px;   padding: 0 2px;}
.eRowCDetail input {width: 100%;}
.eRowDDetail {width: 700px;}
.eRowDDetail input {width: 100%;}

#invoicedContainer {font-size: bold; font-size: 1.5em; padding: 10px 0 0 0;}            
.usersDD {width: 140px;}
.engineerSubArea {width: 110px;}
#email {width: 200px;}
.editClientFirstCol {text-align: left; max-width: 100px;  min-width: 100px;  width: 100px;}
.editClientFirstColLabel {text-align: right;  max-width: 150px;  min-width: 150px;  width: 150px;}
.editClientSecondCol {text-align: left;  max-width: 225px;  min-width: 225px;  width: 225px;}
.editClientSecondColLabel {text-align: right;  max-width: 150px;  min-width: 150px;  width: 150px;}
.editButtonCell {border: none;}            
.deleteButtonCell {border: none;}
.buttonCell {border-width: 0;}
.error {font-weight: bold; color: red;}
.equipmentRowDetails {padding-left: 0px; font-size: 10pt;}
.mainHeader {border-left: solid 1px #fff; border-right: solid 1px #fff;}
.subHeaderLeft {border-left: solid 1px #fff;}
.subHeaderRight {border-right: solid 1px #fff;}
.equipmentDetails table {border-spacing:0; border-collapse:collapse;}
.equipmentDetails table td {padding: 0 2px 0 2px;}
.ceDetailsTable {border-spacing:0; border-collapse:collapse;}
.ceDetailsTable td {padding: 0 2px 0 2px;}

#error {width: 100%;}
 .timeSheetError {
     border: solid 2px #ff4444;
     margin: 15px auto 10px auto;
     padding: 3px 5px;
     display: inline-block;
     background-color: #771111;
     width: 800px;
     color: #ff4444;
     text-align: center;
     font-weight: bold;
     display: block;
     font-size: 1.5em;
 }   
#contractEquipmentContainer {display: none;}
#contractEquipmentTable thead th {padding: 1px 4px;}
table td {padding: 1px 2px;}
legend {color: #fff;}
.subTextbox {display: none;}
/* located in demo.css and creates a little calendar icon
 * instead of a text link for "Choose date"
 */
a.dp-choose-date {
    float: left;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 5px 3px 0;
    display: block;
    text-indent: -2000px;
    overflow: hidden;
    background: url(calendar.png) no-repeat; 
}
a.dp-choose-date.dp-disabled {
    background-position: 0 -20px;
    cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
    width: 140px;
    float: left;
}        
/* Remove border around image links */
a img {border: none;}

#filterContainer {margin: 0 auto 10px auto;}
textarea {
    border: 3px solid #cccccc;
    }
    


#reportsMenu {list-style: none; text-align: left;}

/* Get rid of this tableMain*/
#tableMain {border: none;  width: 800px; margin: 0 auto;} 
#tableSub
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
margin: 10px auto;
width: 100%;
text-align: left;
border-collapse: collapse;
}        
#tableSub th
{
font-size: 14px;
font-weight: bold;
padding: 10px 8px;
/*color: #fff;*/
color: #444;
}       
#tableSub th.border
{
border-style: solid;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
border-bottom: 2px solid #aaa;
border-top: 1px solid #aaa;
/*background-color: #060b3b;*/
background-color: #ccc;
}


#tableSub td
{
padding: 2px 4px;
color: #fff;            
}
#tableSub td.border
{
border-style: solid;
border-bottom: 1px solid #aaa;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
}

#tableSub td.addButton
{         
padding: 5px;      
border-style: solid;
border-bottom: 1px solid transparent;
border-top: 1px solid #aaa;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
font-weight: bold;
font-size: 16px;
text-align: center;   
}
#tableSub td.color1
{
color: #fff;
font-style: normal;
background-color: #444;
border-style: solid;
border-bottom: 1px solid #aaa;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
}
#tableSub td.color2
{
color: #fff;
font-style: normal;
background-color: #000;
border-style: solid;
border-bottom: 1px solid #aaa;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
}
.deactivated
{
color: #000;
font-style: italic;
background-color: #711;
border-style: solid;
border-bottom: 1px solid #aaa;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
}

/*#tableSub td {border: solid 1px #fff; border-spacing: 0;}*/

#usersDiv {padding: 5px 10px; border: solid 5px #fff;}
#deleteDetails {padding: 5px 10px; border: solid 5px #fff;}
.deleteData {text-align: left; padding-left: 5px;}
.deleteLabel {text-align: right; font-weight: bold;}
.deleteDetailsTable {margin: 0 auto;}
#details {padding: 5px 10px; border: solid 5px #fff; text-align: center;}
#details legend {color: #fff;}
.detailsMisc {padding: 5px 10px; border: solid 5px #fff; text-align: center;}
.detailsData {text-align: left; padding-left: 5px;}
.detailsLabel {text-align: right; font-weight: bold;}
.detailsTable {margin: 0 auto;}
#equipmentHistory {margin: 0 auto;}

/*  Buttons */
/*.button a:link {color: #fff;}
.button a:visited {color: #fff;}
.button a:active {color: #fff;}
.button a:hover {color: #ffa;}*/


.logout {border: solid 2px #ccc; margin: 0px 5px; padding: 3px 5px; display: inline-block; background-color: #333;}  
.date {border: solid 2px transparent; margin: 0px 5px; padding: 3px 5px; display: inline-block; background-color: #000;}  
td.plusCol {width: 30px;}
td.minusCol {width: 30px;}
.plusCol a {border: solid 2px #ccc; margin: auto 3px; padding: 1px 5px; display: inline-block; background-color: #333; font-weight: bold;}  
.minusCol a {border: solid 2px #ccc; margin: auto 3px; padding: 1px 5px; display: inline-block; background-color: #333; font-weight: bold;}          
.show {border: solid 2px #ccc; margin: auto 3px; padding: 1px 5px; display: inline-block; background-color: #333;}  
.hide {border: solid 2px #ccc; margin: auto 3px; padding: 1px 5px; display: inline-block; background-color: #333;}  
.menubutton {border: solid 2px #ccc; margin: 15px 3px 0px 3px; padding: 3px 5px; display: inline-block; background-color: #333;}  

.genericbutton {border: solid 2px #ccc; margin: 0px 3px 0px 3px; padding: 3px 5px; display: inline-block; background-color: #333;}  
.genericbutton:hover {cursor: pointer;}  
.genericbuttonNB {display: inline-block;}  
.genericbuttonNB:hover {cursor: pointer;}  
.wide {width: 95%;}

.mainbutton {border: solid 2px #ccc; margin: 15px 3px 10px 3px; padding: 3px 5px; display: inline-block; background-color: #333; width: 100%;}  
.mainbutton:hover {cursor: pointer;}  
.disabledbutton {border: solid 2px #000; margin: 15px 3px 10px 3px; padding: 3px 5px; display: inline-block; background-color: #000; width: 100%; color: #000;}  
.disabledbutton:hover {cursor: default;}  

.assign {text-align: center; border: solid 2px #ccc; padding: 3px 5px; margin:0; display: block; background-color: #333;}
.viewequipment {text-align: center; border: solid 2px #ccc; padding: 3px 5px; margin:0; display: block; background-color: #333;}
.history {text-align: center; border: solid 2px #ccc; padding: 3px 5px; margin:0; display: block; background-color: #333;}
.edit {text-align: center; border: solid 2px #ccc; padding: 3px 5px; margin:0; display: block; background-color: #333;}
.buttonLink {text-align: center; border: solid 2px #ccc; padding: 3px 5px; margin:0; display: block; background-color: #333; color: #ecc447;}
.buttonLink:hover {cursor: pointer; color: #ffffff;}  
#engineerTable {margin-top: 10px;}
.add {text-align: center; border: solid 2px #ccc; padding: 6px 10px; margin:0; display: block; background-color: #333;}
.addengineer { font-weight: bold;}

.delete {text-align: center; border: solid 2px #ccc; padding: 3px 5px; margin:0; display: block; background-color: #333;}
.cancel {text-align: center; border: solid 2px #ccc; padding: 3px 5px; margin:0 10px 0 0; display: inline-block; background-color: #333;} /* ***************** HOURS PAGE */
.save {text-align: center; border: solid 2px #ccc; padding: 3px 5px; margin:0; display: inline-block; background-color: #333;} /* ***************** HOURS PAGE */
.invoice {text-align: center; border: solid 2px #ccc; padding: 3px 5px; margin:0; display: block; background-color: #333;}

.detailsLink {border: solid 1px #fff; padding: 6px 10px; margin: 3px 0; display: inline-block; background-color: #333;}
.detailsLinkDraft {border: solid 1px #fff; padding: 6px 10px; margin: 3px 0; display: inline-block; background-color: #333;}
/* Style for the DIV that is displayed before the data is finished loading */
.preload {color: #00FF00; font-size: 1.5em; font-weight: bold;}

#detailsLink {border: solid 1px #fff; padding: 6px 10px; margin: 3px 0; display: inline-block; background-color: #333; cursor: pointer;}
#detailsLinkDraft {border: solid 1px #fff; padding: 6px 10px; margin: 3px 0; display: inline-block; background-color: #333; cursor: pointer;}
a #detailsLink:link { color: #fff; font-weight: bold; cursor: pointer;}        
a #detailsLink:visited { color: #fff; font-weight: bold; cursor: pointer;}
a #detailsLink:hover { color: #fff; font-weight: bold; cursor: pointer;}
a #detailsLink { color: #fff; font-weight: bold; cursor: pointer;}
a #detailsLinkDraft { color: #fff; font-weight: bold; cursor: pointer;}
a #detailsLinkDraft:link { color: #fff; font-weight: bold; cursor: pointer;}
a #detailsLinkDraft:visited { color: #fff; font-weight: bold; cursor: pointer;}
a #detailsLinkDraft:active { color: #fff; font-weight: bold; cursor: pointer;}
.filterLink {border: solid 1px #fff; padding: 3px 5px; margin: 5px 0; display: block; background-color: #333; color: #fff; font-weight: bold; }
.filterLink a:link { color: #fff; font-weight: bold; }

.clear{
clear:both;
}


#buttons li{
float:left;
padding: 0;
margin:0 10px;
height: 2em;
line-height: 2em;
width: 10em;
display: block;
}


#buttons {
list-style:none;
margin:0 auto;
display:block;
}


#loginmenu {
float:right;
}


#welcomeleft {
float:left;
text-align:left;
padding: 0;
width: 350px;
}


#welcomeright {
float:right;
text-align: right;
width: 450px;
}


#headerimg {
padding: 5px 0 10px 0;
width: 800px;
/* top left bottom right*/
}


.white {
font-size: 14px;
font-style: italic;
color:#FFF
}


.orange {
font-size: 24px;
color:#ba9216
}


.orangesm {
font-size: 18px;
color:#ba9216
}


.whiteTitle {
font-size: 16px;
color:#FFF
}


.whiteFoot {
font-size: 20px;
color:#FFF
}


.whiteBody {
font-size: 32px;
color:#FFF
}


body {    
background-color: #000;
color: #fff;
text-align: center;
}


white {
color: #FFF;
}


.WhiteFont {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-style: normal;
color: #FFF;
}


.WhiteLG {
font-size: 36px;
font-style: normal;
color: #FFF;
}


.QuestionText {
font-family:Lucida Sans, Arial, Helvetica, Sans-Serif;
font-size: 20px;
font-style: normal;
width: 600px;
color: #b0b1b3;
}


.Green {
font-family:Lucida Sans, Arial, Helvetica, Sans-Serif;
font-size: 28px;
font-style: normal;
color: #01a54f;
}


.Button {
font-family:Lucida Sans, Arial, Helvetica, Sans-Serif;
font-size: 28px;
font-style: normal;
color: #000;
}


.ButtonTxt {
font-family:Lucida Sans, Arial, Helvetica, Sans-Serif;
font-size: 28px;
font-style: normal;
color: #FFF;
}


.Blue {
font-size: 24px;
font-style: normal;
color: #90dcff;
}

.center {
text-align: center;            
}

/* the div that holds the date picker calendar */
.dpDiv {
}


/* the table (within the div) that holds the date picker calendar */
.dpTable {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
color: #505050;
background-color: #ece9d8;
border: 1px solid #AAAAAA;
}


/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
}


/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
}


/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
}


/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
}


/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
border: 1px solid #ece9d8;
}


/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
}


/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
background-color: #aca998;
border: 1px solid #888888;
cursor: pointer;
color: red;
}


/* the table cell that holds the name of the month and the year */
.dpTitleTD {
}


/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
}


/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
}


/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
color: white;
}


/* additional style information for the text that indicates the month and year */
.dpTitleText {
font-size: 12px;
color: gray;
font-weight: bold;
}


/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
.dpDayHighlight {
color: #4060ff;
font-weight: bold;
}


/* the forward/backward buttons at the top */
.dpButton {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
color: gray;
background: #d8e8ff;
font-weight: bold;
padding: 0px;
}


/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
color: gray;
background: #d8e8ff;
font-weight: bold;
}


.outOfCntract {color: #ff5555; font-weight: bold;}
.underContract {color: #99ff99; font-weight: bold;}

#errors {border: solid 2px #ff8888; background-color: #aa2222; font-weight: bold; margin-top: 10px; display: none;}
#information {border: solid 2px #88dd88; background-color: #227722; font-weight: bold; margin-top: 10px; display: none;}

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}