html{ 
     background-color: #FFFFFF; 
     font-size: 100%;
     -webkit-text-size-adjust: 100%;
}

body, input, select, textarea { 
     font-family:  'Verdana',Arial,'Liberation Sans',FreeSans,sans-serif; 
     color: #404040; 
} 

table { 
     border-collapse: collapse; 
}

h1 { 
     color: #404040;  
} 

img#imgDumpsterRental { 
     float: left; 
     margin: 10px; 
} 

label {
     cursor: pointer; 
}
 
header { 
     background-image: url('/images/LogoTM.png'); 
     background-repeat: no-repeat;
     background-size: 165px;
     margin-bottom: 20px;
} 

div#mNavControl {
     float: right;
     display: inline-block;
     position: relative;
}

div#mNavControl > div {
     width: 35px;
     height: 5px;
     background-color: blue;
     border-radius: 6px;
     margin: 5px 0;
}

div.mNavControlExpand > div {
     background-color: #6e6f72!important;
}


input, select, button, textarea {
     border-radius: 5px;
     border: 1px solid #AEAEAE;
     margin: 2px 0px;
}

#divMain { 
     background-color: #FFFFFF; 
     border-radius: 10px; 
     padding: 10px;  
} 

hr { 
     color: #808080; 
     border: 1px solid #808080; 
} 

a, a:visited { color: #0000FF; }

div#masterNav {
     display: inline-block;
     position: relative;
     width: 100%;
     height: 2.1em;
}

div#navMenuWrapper {
     position: absolute;
     width: 100%;
     min-width: 324px;
     background-color: white;
     border-top: 2px solid #b9b9b9;
     border-bottom: 2px solid #b9b9b9;
     z-index: 1;
}

#navMenu a { 
     text-decoration: none; 
     color: #404040;
     text-shadow: 2px 2px 5px rgba(0,0,0, 40%);   
}

#navMenu a:visited { 
     color: #404040; 
}
 
#navMenu div.selected { 
     background-color: #edeff3;
}

nav.navMenuCompress div.unselected {
     display: none;
}

#asdTestimonials { 
     width: calc(100% - 36px);; 
     font-size: 0.86em;
     padding: 5px;
     margin: auto;  
     border: 1px solid #808080;   
     border-radius: 8px;  
     box-shadow: 2px 2px 5px #000000; 
}

footer { 
     text-align: center; 
     background-color: #20201D; 
     color: #FFFFFF;
     font-size: 5.3pt;
     z-index: 3;
} 

footer a {
     margin-left: 10px;  
     color: #7F89BF; 
     text-decoration: none; 
} 
footer a:visited { 
     color: #7F89BF; 
     text-decoration: none; 
} 

footer a:hover { 
     text-decoration: underline; 
}


/* index.html */
#contractor-dispatcher-dumpster { 
     width: calc(100% - 36px);
     display: block; 
     margin: auto; 
}

div#maintMode { 

     width: 300px; 
     background-color: yellow;
     padding: 10px; 
     border-radius: 10px;     
     border: 2px solid #AEAEAE; 
     font-weight: bold; 
     box-shadow: 5px 5px 10px #000000; 

}

 
/* log in */ 
#divLogIn input  { 
     text-align: center; 
     border-radius: 5px; 
}

#divPhone { 
     font-size: 0.665em; 
     display: inline-block;
}

div.migrationMessage { 
     background-color: yellow; 
     padding: 10px; 
     border: 1px solid #808080; 
     border-radius: 10px; 
     box-shadow: 5px 5px 10px #000000; 
}


/* sign up */

#btnSignUp {
     font-size: 0.86em;
     border-radius: 7px;
     margin-left: 7px;
     border-radius: 20px; 
     font-size: 20pt;
     padding: 10px 20px;  
     cursor: pointer;
}


/* contact */
#asdOfficeHours { 

     font-size: 0.86em;
     border: 1px solid #CACACA;
     border-radius: 5px; 
     padding: 5px; 
     box-shadow: 5px 5px 10px #000000;   

}

#asdOfficeHours > div { 
     background-color: #CACACA; 
     margin: 5px;
     padding: 5px;  
     font-size: 12px; 
     font-weight: bold; 
     text-align: center;
     border-radius: 5px;  
}

#contactSource { 
     border: none;
}

/* Cost Calculator */
.colPriceCalc1      { width: 450px; } 
.colPriceCalc2      { width: 450px; } 
.colPriceCalc3      { width:  50px; } 
.colPriceCalc4      { width: 235px; } 
.colPriceCalc5      { width:  75px; } 
.colPriceCalc6      { width: 200px; } 
.colPriceCalc7      { width: 100px; } 
.colPriceCalc8      { width:  75px; } 

.totalRow { 
     border-top: 5px double #808080; 
}

fieldset { 
     border-radius: 5px; 
     margin: 20px; 
}
input[type=textbox] { 
     border-radius: 5px; 
     padding: 2px; 
}

#txtFName, #txtLName { 
     width: 104px;
     font-size: 0.86em;  
}

#txtCompany, #txtEmail { 
     width: 221px; 
     font-size: 0.86em;  
}

#btnQuote { 
     border-radius: 7px; 
     font-size: 0.86em; 
}

/* quote */
.colQuote1     { width: 300px; }
.colQuote2     { width:  75px; }
.colQuote3     { width: 100px; }
.colQuote4     { width: 300px; }
.colQuote5     { width:  75px; }
.colQuote6     { width: 100px; }

#divQuoteWrapper { 
     width: 900px; 
}

#divQuoteSignUp {
     float: right;  
     width: 235px; 
     margin: 20px; 
     border: 1px solid #AEAEAE; 
     border-radius: 10px; 
     box-shadow: 5px 5px 10px #000000; 
     padding: 8px;
}

#divQuoteSignUp h2 {
     margin: 5px; 
}
     
 #btnSignUp { 
     background-color: #fffdbe; 
     font-weight: bold; 
}

/* bulletins */

#imgBulletin {
     position: relative;
     top: 20px;
     right: -250px;
}

.icon { height: 25px; }

.totalRow { 
     border-top: 5px double #808080; 
}

.odd { 
     background-color: #EEEEEE; 
}

.small { font-size: 0.86em; }

.highlighted { 
     background-color: yellow; 
}

@media only screen and (min-width:420px) {
     #divPhone {
          font-size: 0.775em;
     }

     header {
          background-size: 180px;
     }

     footer {
          font-size: 6.2pt;
     } 
}

@media only screen and (min-width:440px) {
     #divPhone {
          font-size: 0.86em;
     }

     header {
          background-size: 200px;
     }
}

@media only screen and (min-width:490px) {
     footer {
          font-size: 0.61em;
     }
}

@media only screen and (min-width:555px) {
     footer {
          font-size: 0.69em;
     }
}

@media only screen and (min-width:620px) {
     footer {
          font-size: 0.775em;
     }
}

@media only screen and (min-width:685px) {
     footer {
          font-size: 0.86em;
     }
}

@media only screen and (min-width:975px) {
     div#mNavControl {
          display: none;
     }

     div#masterNav {
          height: auto;
     }

     div#navMenuWrapper {
          border-top: 0px;
          border-bottom: 2px solid #b9b9b9;
          position: relative;
          width: auto;
     }

     nav#navMenu > div {
          float: left;
          margin-right: 10px;
          padding: 5px 10px;
          border-radius: 30px;
     }

     nav#navMenu div.selected {
          background-color: white;
          border-top: 3px solid blue;
     }

     nav.navMenuCompress div.unselected {
          display: block;
     }
}