/* General form styles */
button {border:none;}
input
  { border: 1px solid #bfbfbf; border-top: 1px solid #919191; margin: 5px; width: 15em; }
input.highlight { border: 3px solid #fa0; }
input.thin { width: 5em; }
input[type=file]
  { border: none; }
input[type=checkbox]
  { width: auto; }
input[type=radio]
  { width: auto; }

/* Default inputs to have a font-size proportional to their context */
input, select, textarea { font-size: 1em; }

label
  { cursor: pointer; }

p label {font-weight: bold; color: #494949; }

form th
  { color: hsl(0, 0%, 30%); vertical-align: top; }

textarea {border:1px solid #858585;margin:5px;font-family:Arial;color:#585858;}
.helptext { display: block; font-size:80%;font-style:italic;color:#666666;}
ul.errorlist {list-style:none; margin: 0; padding: 0; }
.errorlist li {display:block;font-size:80%;color:#ff0000;font-style:italic; margin: 0; padding: 0; }

button, a.button, input[type=submit]
  { color: white; font-size: 12px; font-weight: bold; margin: 20px 5px; border: none; cursor: pointer;
    font-size: 14px; display: table-cell; vertical-align: middle; text-align: center; line-height: 0.8em;
    font-family: Verdana, sans-serif; }
button, input[type=submit]
  { background: url('../images/buttons/button-bg-blue.png') repeat-x; height: 41px;
    border: 1px solid #062966; border-radius: 10px; }
button, input[type=submit] { padding: 0 10px; }
a.button {
    background: url('../images/buttons/button-bg-blue.png') repeat-x; border: 1px solid #062966;
    height: 25px; border-radius: 10px; padding: 6px 15px 8px 15px; }
  button .subtext, a.button .subtext
    { font-size: 0.8em; font-weight: normal; }
a.button-arrow {background-image: url('../images/buttons/button-blue-arrow.png'); text-align: left; width: 122px; padding-left: 15px;}
a.button-green-wide
    { background: url('../images/buttons/button-bg-green.png') center repeat-x; background-size: 100%;
      width: 270px; height: 43px; font-size: 16px; margin: 0px; padding: 0px; border: 1px solid #477321;}
button.small { background: url('../images/buttons/button-bg-blue-small.png') repeat-x; width: 97px; height: 28px; }
button.inactive, a.button.inactive, input[type=submit].inactive,
button[disabled], a.button[disabled], input[type=submit][disabled]
    { background-image: url('../images/buttons/button-grey.png'); }

.engine-section button, button.engine, a.button.engine, .engine-section a.button
  { background: url('../images/buttons/button-bg-brown.png') repeat-x;
    border: 1px solid #593713;
  }

button.assembly-action { border: none; }
button.call-to-action
  { background-image: url('../images/buttons/button-green.png'); }

button.two-liner, a.button.two-liner
  /* Ensure that both lines line up on two-line buttons */
  { text-align: left; }

button.add-another
  { background: url('../images/buttons/add-another-blue-2.png') no-repeat;
    width: 165px; height: 27px; line-height: 25px; padding-right: 25px; padding-left: 0;
    font-size: 0.9em; font-weight: normal; text-align: center; margin: 0; border: none;}
.engine-section button.add-another
  { background: url('../images/buttons/add-another-brown-2.png') no-repeat; }
button.add-another.neutral
  { background-image: url('../images/buttons/add-another-grey-2.png'); }
button.add-another.engine
  { background-image: url('../images/buttons/add-another-brown-2.png'); }

button.add-another.large
  { background: url('../images/buttons/add-another-large-blue.png') no-repeat; height:43px; }
button.add-another.large.neutral
  { background-image: url('../images/buttons/add-another-large-grey.png'); }
button.add-another.large.engine
  { background-image: url('../images/buttons/add-another-large-brown.png'); }

button.plain, button.link
  { display: inline; background: none; text-align: inherit; margin: 0; padding: 0; }

.smallbutton-delete {cursor:pointer;}

.ll-wrapper td
  { position: relative; }
.ll-wrapper input[type=text], .ll-wrapper input[type=number]
  { width: 75px; }

/* Also override .ll-wrapper's default input width and .dashboard's default input padding-right: */
input.datepicker, #dashboard input.datepicker
  { width: 120px; text-align: center; cursor: pointer; font-size: 0.8em; padding-right: 20px; border-radius: 8px;
    background: url('../images/icons/calendar-gradient-right.png') no-repeat center right;
    }
.ll-wrapper input.datepicker {
    width:120px; text-align: left; font-size:1.0em; height: 20px; padding-left:5px;
}

select#id_position
  { margin: 5px; }

select
  {

    padding: 5px 10px 5px 10px;
    margin: 5px; } /* *** I am aware the 5px margin could make stuff look ugly, I'm just experimenting */
select:focus
  { outline: none; }

.nextwrapper {padding-bottom:20px;}
/* Add aircraft */
.form-label {font-size:14px;font-weight:bold;padding-top:10px;width:220px;}
.form-label-thin {font-size:14px;font-weight:bold;padding-top:10px;width:100px;}
.form-label-inline {font-size:14px;font-weight:bold;padding:10px 10px 0px 0px;}
.form-sublabel {font-size:13px;margin:0px 10px 0px 10px;}

input[type=text], input[type=number], input[type=password], textarea
  { padding: 0px 5px 0px 5px; color: #585858; }
input[type=text], input[type=number], input[type=password]
  { height: 28px; line-height: 28px; }
textarea.addac-full
  { padding: 5px; }

input.addac-full, textarea.addac-full {width:200px;}
input.addac-thin, textarea.addac-thin {width:100px;}
select.item-engpos {margin:5px;}


#id_manufacture_date {margin:5px;width:230px;}

#search-button {margin:5px;}

select.service_type
  { font-size: 10px; font-weight: bold; padding: 2px; border-radius: 0; }

#terms-and-conditions
  { height: 5em; overflow: auto; width: 100%; border: 1px solid #666; padding: 10px; }

#additional-users
  { }
  #additional-users input
    { width: 8em; }

select[name=threshold_red] {background: #ffaaaa;}
select[name=threshold_yellow] {background: #ffffaa;}
select[name=threshold_green] {background: #aaffaa;}


/* Widgets: */

.popout-info
  { font-size: 0.8em; position: absolute; background: #292929; border-radius: 10px; padding: 20px 30px; right: -36em; width: 34em; color: white; }
  .popout-info.left-pointer:before
    { background: url(../images/panels/popout-pointer-left.png);  content: " "; width: 12px; height: 23px;
      display: block; position: absolute; left: -12px; top: 20px; }
  .popout-info.right-pointer:before
    { background: url(../images/panels/popout-pointer-right.png);  content: " "; width: 12px; height: 23px;
      display: block; position: absolute; right: -12px; top: 20px; }

/* Expand/contract icons */
.expand-icon {width:26px;height:11px;background:url('../images/controls/ac-box-expand.png') center no-repeat;margin:0px auto 0px auto;cursor:pointer;}
.expand {background:url('../images/controls/ac-box-expand.png') center no-repeat;}
.contract {background:url('../images/controls/ac-box-contract.png') center no-repeat;}

.popup
  { position: fixed; top: 20%; margin: auto;
    padding: 18px 25px 18px 25px; border-radius: 5px; 
    display: none; z-index: 120; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5); overflow: visible; }
  /* Important to use the :before as the dark page background, and the :after as the light
   * popup background, not the reverse, because otherwise (in some scenarios, eg edit-flight-log
   * popups part way down the page, only in Safari), a position: absolute popup will have its
   * :after over top of of its :before, even if we specify a lower z-index, because they have
   * different stacking contexts, so their z-indexes don't realy relate to each other.
   */
  .popup:before { content: ""; position: fixed; background: hsla(0, 0%, 0%, 0.3); z-index: -2; top: 0; left: 0; bottom: 0; right: 0; pointer-events: none; }
  .popup:after { content: ""; border-radius: 5px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: white; z-index: -1; }

.popup.notify { padding: 30px 60px 30px 30px; min-width: 400px; max-width: 700px; font-size: 16px; color: #777; }
  .popup.notify .buttons { text-align: center; margin-top: 20px; }
  .popup.notify button { border: none; border-radius: 5px; margin: 0 10px; padding: 0 30px; }
  .popup.notify button[name=confirm] { background: #306599; }
  .popup.notify button[name=cancel] { background: #a5a5a5; }
  .popup.notify.warning button[name=confirm] { background: #cc0000; }
  .popup.notify:before { background: hsla(0, 0%, 0%, 0.6); }

/* For popups that explicitly are just containers for an internal content block, don't 
 * have an automatic background element. This gives us more control over each one.
 */
.popup.popup-container { background: hsla(0, 0%, 0%, 0.3); position: fixed; top: 0; left: 0; bottom: 0; right: 0;  }
  .popup.popup-container:before { display: none; }
  .popup.popup-container:after { display: none; }
  .popup.popup-container .content { border-radius: 5px; background: white; top: 50%; left: 50%;
                                    transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
                                    padding: 18px 25px 18px 25px; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5); }

.close, .delete
  { background: url('../images/icons/cancel-grey.png') center no-repeat; width: 20px; height: 20px; position: absolute; right: 20px; top: 20px; cursor: pointer; }
td > .close, td > .delete
  { position: static; }

.delete.mini
  { background-image: url('../images/icons/cancel-grey-mini.png'); }

.attachment
  { padding: 3px 0px 3px 16px; min-height: 10px; max-width: 210px; line-height: 10px; display: inline-block;
    background: url('../images/icons/attachment-white.png') left top no-repeat; word-wrap: break-word;
    color: #306599; font-size: 8px;
  }

img.calendar-mini {margin-top:10px;margin-left:25px;}

.pagination {padding-bottom:20px;color:#2A548D;}
  .pagination * {font-weight:bold;}
  .pagination .rounded {padding: 5px 10px 5px 10px;border-radius:15px;}
  .pagination .bookend {color:#ffffff;background:#bbbbbb;}
  .pagination .numlink-current, .pagination a:hover {color:#ffffff;background:#2A548D;}
a.quickselect
    { float: left; margin: 0px 20px 20px 0px; padding: 20px; color: #222222;
      width: 140px; border-radius: 10px; border: 1px solid #888;}

  a.quickselect h3 { color: #222222; margin-top: 0px;}
a.quickselect:hover { background: #306599; color: #ffffff; }
  a.quickselect:hover h3 { color: #ffffff; }

/* Action icons */
.action-icon {width: 23px; height: 26px; display: inline-block; margin: 0px 5px 0px 5px; cursor: pointer;}
  .action-edit {background:url('../images/icons/edit-white.png') 0px 1px no-repeat;}
  .action-detach {background:url('../images/icons/detach-component.png') 0px 1px no-repeat;}
  .action-done {background:url('../images/icons/done-tick.png') 0px 0px no-repeat;position:relative;}
  .action-remove {background:url('../images/icons/cancel-grey.png') 1px 5px no-repeat;}
  .action-delete {background:url('../images/icons/cancel-grey.png') 1px 5px no-repeat;}
  .action-service {background:url('../images/icons/overhaul-grey.png') 0px 0px no-repeat;}
/* Coloured status boxes */
.statusbox {border-radius:6px;padding:6px 8px 6px 8px;margin:5px;}
  .statusbox-green {background:#b4cd69;color:#000000;}
  .statusbox-yellow {background:#febf00;color:#000000;}
  .statusbox-red {background:#a40707;color:#ffffff;}
  .statusbox-red.extended { color: inherit; border: 2px dashed #a40707; color: #a40707; background: transparent; }

/* Fancy checkboxes */
.fc-checkbox, .fc-techlog-checkbox {height:31px;width:24px;cursor:pointer;}
  .fc-checkbox-checked, .fc-techlog-checkbox-checked {background:url('../images/controls/checkbox-checked.png') center no-repeat;}
  .fc-checkbox-unchecked, .fc-techlog-checkbox-unchecked {background:url('../images/controls/checkbox-unchecked.png') center no-repeat;}

/* Styled radio-buttons */
.radiobuttons [rel] {float:left;height:40px;line-height:40px;font-size:15px;font-weight:bold;padding:0px 20px 0px 40px;cursor:pointer;}
.radiobuttons [rel] {color:#656565;background:url('../images/controls/radio-unselected.png') -30px center no-repeat;border:1px #b9b9b9 solid;}
.radiobuttons [selected] {color:#ffffff;background:url('../images/controls/radio-selected.png') -30px center no-repeat;border:1px #6899c1 solid;}
.radiobuttons [rel]:first-child {border-radius:20px 0px 0px 20px;}
.radiobuttons [rel]:nth-last-child(2) {border-radius:0px 20px 20px 0px;}
.radiobuttons [selected][rel=engine] {
    background-image: url('../images/controls/radio-selected-brown.png');
    border-color: #B48F67
}

/* YMD Widget */
.ymd-widget
    { font-size: 12px; width: 150px; }
    .ymd-widget select
        { padding: 3px 0px 3px 0px; width: 48px; border: 1px solid #929292; background:#d2d2d2;
          border-radius: 0; font-weight: normal; margin: 0; } /* Explicitly zero the margin, as generic select {} elements have been given margin. */

    /* Days Total */
    .days-total
        { color: #306599; }