/* CSS file for all apps in HHLWeb */

/* ********************************************************************** */
/* Rules for all instances of an HTML element type.
/* ********************************************************************** */
/* FRED: why doesn't this highest level of css have the general rules like:
?? If they were only needed for mobile, I put them there initially.
?? Feel free to move them from mobile to here if you want them to be more
?? universal.  Please move (don't copy) them.  Let's avoid duplicates
?? as much as possible.  --Fred


body, input, select, option, td {
    font-family: Arial,Helvetica,sans-serif;
    color: #333333;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
}

I'm confused about the hierachy; my panel.base extends copy of mobile_base.css,
which imports your mobils.css, which has:
body, input, select, option, th, td {
    font-family: Arial,Helvetica,sans-serif;
    color: #333333;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
}
this messed me up b/c in my panelized data_conversion I want <th> to be bold

whereas I started with an 'independent' data conversion, complete with its own
data_conversion_base.html, once I panelized it, the css in that data_conversion_base.html
is not even referenced anymore.

So how did I get data_conversion th to be bold? I put it in panel.css..and now all panels
have to live with that. How would a downstream app override it? This may
be a higher level issue with how panels incorporates css ...

?? CSS = Cascading Style Sheets.  The "Cascading" refers to the way the
?? rules cascade through the system, overriding each other.  Generally:
?? - Specified more locally is higher precedence: style attribute on an
??   HTML element overrides a <style> tag in the same HTML file, which
??   overrides an external CSS file.
?? - Specified more specifically is higher precedence: rules for an id
??   (#id-name) override rules for a class name (.class-name), and rules
??   with more context (table tr td) override rules with less context (td),
??   etc.
?? It's been about a decade since I looked at the rules closely.
?? Firebug does a good job of showing all rules and which are being
?? overridden.
?? Also, the order of the external files matters.  I think the last one wins
?? in case of a tie..
?? A downstream app would probably override by listing the general file
?? before the more specific one.  Or by using more specific rules.
?? --Fred

*/

body {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
}

label {
    /*font-weight: bold;*/
}

p {
    margin-top : 0px;
    margin-bottom: 0px;
}

input[type='radio'],
input[type='checkbox'] {
    /* Setting the width in terms of em units causes radio button/checkbox
       to grow with its label on Ctrl-Plus/Minus in Mac Firefox.
    */
    width: 1.0em;
    height: 1.0em;
    /* Override default margins and padding, which in some browsers may be
       non-zero on some sides.  Can see in Android that, by default, they
       have more whitespace inside highlight on tap/click than below.
    */
    padding: 0;
    margin: 0;
}
input[type='radio'] {
    /* Played with a bunch of these settings, but abandoned them all in
       favor of simply setting width:10.0em above.  These had odd effects
       like causing the radio buttons to overlap.  Had to add margins to
       avoid that.  Also even a single setting like -webkit-transform had
       different effects in different browsers (Safari, Chrome, Android,
       iPhone).  Never worked it all out.  Switched to tables for vertical
       alignment and the padding/margin/width/height settings above, and
       gave up on this.  --Fred 3/20/2013
    /*-ms-transform: scale(1.0); *//* IE */
    /*-moz-transform: scale(1.0); *//* FF */
    /*-webkit-transform: scale(1.0); *//* Safari, Chrome, Android, iPhone */
    /*-o-transform: scale(1.0); *//* Opera */
    /*margin-top: 10px;*/
    /*margin-bottom: 10px;*/
    /*margin-right: 10px;*/
}
input[type='checkbox'] {
    /*-ms-transform: scale(1.0); *//* IE */
    /*-moz-transform: scale(1.0); *//* FF */
    /*-webkit-transform: scale(1.0); *//* Safari, Chrome, Android, iOS */
    /*-o-transform: scale(1.0); *//* Opera */
    /*margin-top: 10px;*/
    /*margin-bottom: 10px;*/
    /*margin-right: 10px;*/
}
/* Played with this also, as a way to vertically center labels of radio buttons.
   Looks good on Mac Firefox, Mac Chrome, Mac Safari, but only until the user
   grows the font via Ctrl-Plus/Minus.
   Looks bad on Motorola Droid, spacing the radio buttons too far apart.
   Abandoned this approach and switched to tables for vertical alignment.
li label {
    line-height: 2em;
}
*/

/* Placeholders (prompts inside of input fields)
   Note: Do NOT combine into one CSS rule.  If a browser does not
         recognize a selector, it ignores the entire rule, and different
         browsers recognize different ones of these selectors, which is
         why we have to use all of them.
   Note: Firefox 19+ uses the double-colon version, no longer single colon.
   Note: If we ever have trouble with the colors being overridden by the
         non-placeholder colors in FF and IE, we may have to use:
              color: #999999 !important;
         instead of simply:
              color: #999999;
   See: http://stackoverflow.com/questions/2610497
        /change-an-inputs-html5-placeholder-color-with-css
   HHL-350: Kim says go with font size 14px and non-italics
*/
::-webkit-input-placeholder {
    color:      #999999;
    /*font-style: italic;*/
    font-size: 14px;
}
:-moz-placeholder {
    color:      #999999;
    /*font-style: italic;*/
    font-size: 14px;
}
::-moz-placeholder {
    color:      #4C4C4C;  /* Creates same effect as #999999 in others */
    /*font-style: italic;*/
    font-size: 14px;
}
:-ms-input-placeholder {
    color:      #999999;
    /*font-style: italic;*/
    font-size: 14px;
}
.com-bristle-placeholder {
    color:      #999999;
    /*font-style: italic;*/
    font-size: 14px;
}

/* ********************************************************************** */
/* Rules for Django-generated CSS classes
/* ********************************************************************** */

.errorlist {
    list-style-type:none;
    margin-left: 0em;
    padding-left: 0em;
    padding-bottom: 0em;
    margin-bottom: 0em;
    margin-top: 0em;
    color:red;
}

/* ********************************************************************** */
/* Rules for jQuery widgets
/* ********************************************************************** */

.ui-autocomplete-loading {
    background: white url("images/ui-anim_basic_16x16.03ce3dcc84af.gif") right center no-repeat;
}

/* Limit height and make a scroll-down for the selection menu */
.ui-autocomplete {
    max-height: 6em;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}
/* IE 6 doesn't support max-height
*  We use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
    height: 6em;
}

.autocomplete-input-field {
    position:relative;  /* Otherwise, z-index is ignored */
    z-index:3000;       /* The dropdown list of choices shown by the
                           autocomplete widget automatically uses a z-index
                           that is one more than the value of this input field.
                           So this causes the dropdown to be 3001, which makes
                           it overlay, not underlay the menus (1000) and the
                           main image overlay (2000).
                        */
}

/* ********************************************************************** */
/* Rules for classes that also act as a flag to control JS decisions.
/* ********************************************************************** */

label.hidden_label_flag {
    display: none;
}

/* ********************************************************************** */
/* Rules for generic CSS classes of HHLWeb
/* ********************************************************************** */

.hidden {
    display: none;
}

.bold {
    font-weight: bold;
}

.indented {
    margin-left: 2em;
}

/*?? Doesn't work.  Had to use deprecated <center> instead.  Why? */
.horizontally_centered {
    text-align: center;
}

.top_align {
    vertical-align: top;
}

.large_text {
    font-size: 20px;
    font-weight: bold;
}

.medium_text {
    font-size: 16px;
}

.grouping_box {
    background-color: #E4F4F8;
    border-style: solid;
    border-width: 1px;
    border-color: lightgrey;
    padding-left: 0.2em;
    padding-right: 0.2em;
    padding-top: 0em;
    padding-bottom: 0.5em;
    color: #333333;
}

.vertical_spacer {
    height: 1em;
    border-style: none;
    border-width: 0;
}

.section_header {
    background-color: #95d6e2;
    height: 2.7em;
    border-style: none;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

.section_header span {
    color: #FFFFFF;
    font-family: Arial;
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    vertical-align: middle;
}

.ok_cancel_button,
.right_pointing_button {
    background-color: #76B3C2;
    border: 1px solid #76B3C2;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    color: #FFFFFF;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    margin-top: 0.5em;
    margin-right: 0.5em;
    margin-bottom: 0em;
    margin-left: 0em;
    padding-top: 0.2em;
    padding-right: 0.5em;
    padding-bottom: 0.2em;
    padding-left: 0.5em;
}

.right_pointing_button {
    background-image: url("images/mobile_link_arrow.994eb826d989.png");
    background-size: 1em 1em;
    background-repeat: no-repeat;
    background-position: right;
    display: block;
    text-align: left;
}

.ok_cancel_button {
    text-align: center;
}

.blue_button {
    border-style: none;
    border-radius: 0.4em 0.4em 0.4em 0.4em;
    font-size: 20px;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    margin-top: 0.5em;
    margin-right: 0.0em;
    margin-bottom: 0em;
    margin-left: 0em;
    padding-top: 0.4em;
    padding-right: 0.5em;
    padding-bottom: 0.4em;
    padding-left: 0.5em;
    text-align: center;
    cursor:pointer;
    color: #00AEB3;
    background-color: #BDE7EC;
}

.full_width_button,
.force_full_width_button {
    display: block;
}

.force_full_width_button {
    width: 100%;
}

/*?? Doesn't work.  See JS function hideLiBulletsForRadioButtons for why not.
*/
li input[type="radio"] {
    list-style-type: none;
}

.no_li_bullet {
    list-style-type: none;
    margin-left: 0em;
    padding-left: 0em;
    /* Pull the list items a little more left to cancel the indent caused
       by the <UL>, if for some reason we have to use no_li_bullet on the
       <LI> instead of using no_ul_bullet on the <UL>, which otherwise
       seems like a better solution.  This negative indent causes the
       radio buttons to move too far left when the user hits Ctrl-Plus
       to scale the font of the Web page.

    text-indent: -2.9em;
     */
    text-indent: 0em;
}

.no_ul_bullet {
    list-style-type: none;
    margin-left: 0em;
    padding-left: 0em;
}


.input_field_in_radio_button {
    margin-left: 0.8em;
}

.view_full_site_link {
    /*?? Top padding and margin ignored. Why? */
/*    padding-top: 100px; */
    font-size:14px;
    font-weight: bold;
    color: #A4BAC5;
    text-decoration: none;
}

.version_number {
    font-size: 0.8em;
    color: lightgrey;
}

/* ********************************************************************** */
/* Rules for laying out forms as tables of labels and input fields
/* ********************************************************************** */

/* Prompts should stay a fixed width while input fields grow to fill
   remaining available width
*/
table.table_of_input_fields th {
    /* Note: Don't hardcode a size, even in em units.  Too limiting.
             It is best to let the widths float.  This was an attempt to
             use most of the available width for the data entry fields
             and only as much as necessary for the prompts.  It was also
             to keep the prompts from wrapping unnecessarily.  Caused
             problems with dropdown fields that have no prompt because
             the prompt is one of the dropdown values.  The dropdown
             box width was too tightly constrained and words got chopped
             off.
             So far, it's working better to not specify.
    */
    /*width: 10em;*/
}
table.table_of_input_fields td {
    /* Not necessary if we don't specify a width for the TH.  Harmless?
       Note: this shows up as pycharm error, but it is not
    */
    width:*;
}

/* Labels left of input fields should be right aligned, but labels above
   input fields should be left aligned.
*/
table.table_of_input_fields th {
    text-align:right;
    vertical-align: top;
    margin-top: 0;
}
table.table_of_input_fields th.label_above_input_field {
    text-align:left;
    vertical-align: bottom;
    margin-bottom: 0;
}

table.table_of_input_fields label {
    font-size: 16px;
}

/* Input fields that are directly inside a td, not part of a list of options
   or something inside the td, should grow to fill the full available width.
   To make that available space as wide as the screen, have to also grow
   the table that contains them.
   Note: Use 99% width, not 100%, for the input and the table (doesn't
         matter for the select), to avoid horizontal scrollbar at the
         bottom of the "Contact & Billing Information" panel of the Donate
         page.  Why?
*/
td > input[type=text],
td > select,
table.table_of_input_fields {
    width: 99%;  /* Not 100%  See above */
    margin-left: 0px;
    margin-right: 0px;
}
/* Vertically align radio buttons with their labels, which are in the same
   table row.
*/
table.table_of_radio_buttons td {
    vertical-align: middle;
}
/* Bold the labels of radio buttons.
   Note: Don't bold the entire td containing the label (by combining with
         the rule above, for example, because the td might also contain
         an error message which should not be bold.
   table row.
*/
table.table_of_radio_buttons label {
    font-weight: bold;
    font-size: 16px;
}


/* ********************************************************************** */
/* Rules for specific object types in the HHLWeb data model
/* ********************************************************************** */

.patient_name {
    color: #009999;
    font-size: 20px;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
}

.need_is_greatest_name {
    font-size: 16px;
    color: #333333;
}

.fund_name, .city_state {
    color: #999999;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
}

.total_donation_computation_label {
    font-weight:bold;
    font-size: 16px;
}

.total_donation_computation_value {
    font-weight: normal;
    font-size: 16px;
}

.site-alert {
    font-weight: bold;
    font-size: 20px;
    color: red;
}

#id_hhl_logo {
    border: none;
}

.icon-group img {
    border: none;
}

/* ********************************************************************** */
/* Thank You page                                                         */
/* Note: This has to be here for now, not in panel.css, because the       */
/*       HTML of the Thank You page does not link to panel.css            */
/* ********************************************************************** */

.thank-you-warning,
.thank-you-warning-do-not-click
{
}

.thank-you-warning-do-not-click
{
    color: red;
    text-decoration: underline;
}