/**
 * Main layout
 */

body {
    background-color: white;
    color: #333333;
    font-size: 11px;
    line-height: 14px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin-top: 0;

}

#header {
    text-align: center;
    padding-top: 0px;
}

#main-box {
    width: 688px;
    border-style: none;
    background-image: url('/images/shadows.gif');
    border-width: 1px;
    border-color: gray;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}

a {
    color: #666666;
    font-weight: 700;

}

a img {
    border-style: none;
}

.center {
    text-align: center;
    padding: 8px;
}

.clickable {
    cursor: pointer;
}

span.element-append {
    float: left;
}

#top-nav {
    width: 658px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
    border-bottom: 1px solid #aaa;
    text-align: center;
    background-color: #f4f4f4;
}

.tab {
    color: #828282;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: -1px;
    padding: 10px;
    position: relative;
    bottom: 6px;
    padding-bottom: 6px;
    border: 1px solid #aaa;
    margin-left: 5px;
}

.tab-selected {
    color: #828282;
    background-color: #f9f9f9;
    font-family: sans-serif;    
    font-size: 16px;
    line-height: 19px;
    letter-spacing: -1px;
    padding: 10px;
    position: relative;
    bottom: 6px;
    padding-bottom: 6px;
    border: 1px solid #aaa;
    margin-left: 5px;
    border-bottom: 1px solid #f9f9f9;
}

a.tab-link {
    text-decoration: none;
}

#content {    
    width: 658px;
    padding-top: 16px;
    padding-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
    background-color: #f9f9f9;
}

#content-inner {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

#footer {
    width: 658px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 16px;
    background-color: #f4f4f4;
}

h3 {
    clear: both;    
    color: #333333;
    text-align: left;
    font-size: 17px;
    font-weight: 900;
}

h4 {
    clear: both;
    color: #333333;    
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    margin-top: 12px;
}

p {
    line-height: 16px;
}

p.confirmation-text {
    font-size: 12px;
    line-height: 24px;
}

/**
 * FAQ, Legal and Privacy
 */
 
div.question {
    margin-bottom: 12px;
    margin-left: 12px;
    line-height: 16px;
    font-weight: 600;
}

div.question big, div.answer big {
    font-size: 30px;
    font-weight: 600;
    font-family: monospace;
}

div.question big {
    color: #AD0101;
}

div.heading {
    color: black;
    margin-bottom: 12px;
    margin-right: 12px;
    line-height: 16px;
    font-weight: 600;
}

div.answer {
    margin-left: 12px;
    margin-bottom: 36px;
    line-height: 22px;
}

div.content {
    color: black;
    line-height: 20px;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 12px;
}

/**
 * Popups
 */

.popup {
    position: fixed;
    cursor: pointer;
    background-color: white;
    border-color: blue;
    border-width: 1px;
    border-style: outset;
    text-align: center;
    z-index:100;
}

#popup-container {
    margin-left: 90px;
}

.popup h3 {
    text-align: center;
    margin: 0px;
    padding: 0px;
}

/**
 * General Forms
 */

.description {    
    text-align: left;
    margin-bottom: 16px;
    display: block;
    margin-left: auto;
    margin-right: auto;    
    width: 60%;
    font-weight: 600;
}

.description ul {
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 0px;
    margin-left: 1px;
}

/* Notes that appear to the right of certain fields */
.element-append {
    padding-bottom: 1px;
    float: left;
}

.element .errors {
    float: right;
    width: 115px;
    text-align: center;
    padding: 6px;
    background-color: #FDFDB6;
    border: 1px solid gray;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
}

.errors {
    background-color: #FDFDB6;
    text-align: center;
    border: 1px solid gray;
    width: 30%;
    padding: 12px;    
    margin-left:auto;
    margin-right:auto;
}


.errors-wider-box {
    background-color: #FDFDB6;
    border: 1px solid gray;
    width: 45%;
    padding: 12px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.textarea-errors {
    width: 40%;
    clear: both;
    text-align: center;
    padding: 6px;    
    margin-left: 170px;
    margin-bottom: 20px;
    background-color: #FDFDB6;
    border: 1px solid gray;
}

label {
    display: inline;
    float: left;
    text-align: right;
    margin-bottom: 6px;
    margin-right: 6px;
    width: 30%;
}

label.blockLabel {
    text-align: left;
    display: block;
    font-weight: 400;
    float: none;
    width: 80%;
    line-height: 16px;
}

div.surveyLabel {
    min-height: 25px;
    line-height: 12px;
}

label.blockLabel big {
    font-size: 18px;
    font-weight: 700;
    font-family: monospaced;
}

.radioList label.blockLabel {
    /*font-weight: 400;*/ /*Non-survey radio list labels will also be bold, for now*/
}

fieldset {
    padding: 12px;
    margin-bottom: 12px;
}

legend {
    font-family: monospace;
    font-size: 12px;
    color: black;
    font-weight: 600;
    line-height: 30px;
}

.element {    
    min-height: 40px;
    clear: both;
}

.radioList, .checkboxList {
    margin-left: 40px;
    margin-bottom: 24px;
}

.radioOption, .checkboxOption {
    margin-left: 80px;
}

/* on div surrounding checkbox input elements */
.checkboxSurvey {
    min-height: 10px;
    margin-left: 20px;
}

/* on div surrounding radio input elements */
.radioSurvey input {
    min-height: 10px;
    margin-left: 20px;
}

/* the following four blocks are used in survey forms */
.element span.parent {
    display: block;
    text-align: center;
    font-weight: 600;
}

.element input.child1 {    
    display: block;
    margin-left: 0px;
}

/* second and third levels are, at this time, purely theoretical and untested */
.element input.child2 {
    display: block;
    margin-left: 48px;
}

.element input.child3 {
    display: block;
    margin-left: 72px;
}

.radio-column {
    float: left;
    padding-right: 10px;
}

input, select, textarea {
    float: left;
    display: block;
    margin-right: 6px;
    margin-bottom: 6px;
}

input.submit {
    margin-left: 180px;
    float: none;
    display: block;
}

.centered-submit {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

form.survey input.submit {
    margin-left: 20px;
}

/* Makes disabled field easier to read in firefox, which makes it grey on grey by default.
IE 8 ignores input field styling, but uses a more readable grey on white by default */
input[disabled="disabled"] {
    color: black;
}

div#required-field-message {
    margin-left: 180px;
    font-weight: 600;
    margin-bottom: 10px;
}

div.check-status-form-explanation {
    margin-left: 180px;
    font-weight: 600;
    margin-bottom: 10px;
    width: 160px;
}

form.survey {
    color: #444444;
}

form big {
    color: #111111
}

/**
 * Flash Messages
 */

div.flash-message {
    background-color: #77AABB;
    color: white;
    font-weight: 600;
    padding: 12px;
    border-style: solid;
    border-color: gray;
    border-width: 1px;
    text-align: center;
    margin-bottom: 12px;
}

div.flash-alert {
    background-color: #FDFDB6;
    padding: 12px;
    border-style: solid;
    border-width: 1px;
    text-align: center;
    margin-bottom: 12px;
}

/**
 * And the rest
 */

/* 
When a user changes their account info and is redirected to the 
show rebates page, all the fields they changed will have this
class (but only when they first submit the changes).
*/
.changed {
    background-color: yellow;
}

table#confirm-input, table#confirm-input th, table#confirm-input td {
    font-size: 12px;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    margin-left: 0px;
    margin-bottom: 12px;
}

/* When multiple records are found in a check-status search, this table shows their choices*/
table#multiple-records {    
    width: 100%;
}

table#multiple-records th {
    font-weight: 700;
    font-size: 12px;
}

table#confirm-input th, table#confirm-input td {
    padding: 6px;
}

table#rebates, table.pending-promos {
    border-collapse: collapse;
    text-align: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

table#rebates tr td, table.pending-promos tr td {
    padding: 6px;
}

table#rebates tr th, table#rebates tr td, table.pending-promos tr th, table.pending-promos tr td {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: solid 1px gray;
}

table#rebates td.status{    
    border-color: gray;
    width: 100px;
    font-weight: 600;
    border-bottom-style: solid;
    border-width: 1px;
}

table#rebates td.approved{    
    color: #14D54B;
}

table#rebates td.pending {
    color: blue;
}

table#rebates td.processed {
    color: #14D54B;
}

table#rebates td.invalid {
    color: red;
}

table#rebates td.unmatched {
    color: black;
}

table#rebates td.expedited {    
    color: orange;
}

div#status-key a {
    font-size: 11px;
}

div#status-key h4 {
    text-align: left;
    font-weight: 700;
    margin-left: 0;
}

div#status-key dt {
    display: block;
    width: 100px;
    margin-left: 40px;
    font-weight: 600;
    color: #14D54B;
    line-height: 24px;
}

div#status-key dd {
    width: 80%;
    margin-left: 40px;
    margin-top: 6px;
    margin-bottom: 6px;
}

div#status-key dt.pending {
    color: blue;
}

div#status-key dt.expedited {
    /*background-color: orange;*/
    color: orange;
    font-weight: 800;
}

div#status-key dt.invalid {
    color: red;
}

div#status-key dt.unmatched {
    color: black;
}

table#tickets {
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    background-color: white;
    border-collapse: collapse;
}

table#tickets tr td a {
    text-decoration: underline;
}

table#tickets tr td, table#tickets tr th {
    padding: 6px;
    border-style: solid;
    border-width: 1px;
}

table#tickets tr {
    border-style: solid;
    border-width: 1px;
}

table#tickets th, table#tickets td {
    padding-right: 12px;
    padding-left: 12px;
    text-align: center;
}

table#tickets th {
    font-size: 12px;
    background-color: white;
}


div#address {
    display: block;
    padding-top: 12px;
    padding-bottom: 12px;
    width: 60%;
}

div#address div {
    line-height: 24px;
}

div#auth_status {
    border-style: solid;
    border-color: gray;
    border-width: 1px;
    background-color: #F8F8F8;
    padding: 6px;
    line-height: 16px;
    text-align: center;
    font-size: 11px;
    margin-top: 0px;
    margin-bottom: 18px;
    float: right;
}

div#auth_status a {
    font-size: 11px;
}

div#survey, div#update-address {
    background-color: #DDDDDD;
    font-size: 11px;
    border-style: solid;
    border-width: 1px;
    width: 90%;
    padding-left: 12px;
    padding-right: 6px;
    margin-left: auto;
    margin-right: auto;
}

span.phone-number {
    font-weight: 900;
    color: black;    
}

.stressed {
    font-weight:900;    
    color: #ff8c00;
}

.tableCellButton {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
    font-size: 11px
}

/**
 * Error Page
 */
 div#error-message {
    font-size: 12px;
    border: solid 1px black;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    color: #555;
    background-color: white
}