/* 
 * Extend bootstrap for ArtlogicCMS sites
 * Artlogic Media Ltd - http://www.artlogic.net/
 *
 */


 /* general global bootstrap overrides */

 body {
     overflow-x: hidden; /* prevent horizontal scrollbar issues */
}

 .modal-backdrop {
     background-color: #ccc;
}

.modal .modal-body {
    overflow: scroll; /* especially for android */
    -webkit-overflow-scrolling: touch; /* to improve scrolling on ios */
}

/* general global bootstrap extends */

.form.compact .control-group, .form-horizontal.compact .control-group,
.form.form-compact .control-group, .form-horizontal.form-compact .control-group {
    margin-bottom: 5px;
}

.form-search input.modal-large, .form-inline input.modal-large, .form-horizontal input.modal-large,
.form-search textarea.modal-large, .form-inline textarea.modal-large, .form-horizontal textarea.modal-large,
.form-search select.modal-large, .form-inline select.modal-large, .form-horizontal select.modal-large,
.form-search .help-inline.modal-large, .form-inline .help-inline.modal-large,
.form-horizontal .help-inline.modal-large, .form-search .uneditable-input.modal-large,
.form-inline .uneditable-input.modal-large, .form-horizontal .uneditable-input.modal-large,
.form-search .input-prepend.modal-large, .form-inline .input-prepend.modal-large,
.form-horizontal .input-prepend.modal-large, .form-search .input-append.modal-large,
.form-inline .input-append.modal-large, .form-horizontal .input-append.modal-large {
    width: 90%;
}

/* general utility classes for ArtlogicCMS */

.hidden {
    display: none;
}

.padded {padding: 10px;}
.padded10 {padding: 10px;}
.padded30 {padding: 20px;}
.padded40 {padding: 20px;}
.padded50 {padding: 50px;}

.pr {padding-right: 5px;}
.pr3 {padding-right: 3px;}
.pr5 {padding-right: 5px;}
.pr8 {padding-right: 8px;}
.pr10 {padding-right: 10px;}
.pr15 {padding-right: 15px;}
.pr20 {padding-right: 20px;}
.pr25 {padding-right: 25px;}
.pr30 {padding-right: 30px;}
.pr40 {padding-right: 40px;}
.pr50 {padding-right: 50px;}

.mb {margin-bottom: 10px;}
.mb5 {margin-bottom: 5px;}
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb25 {margin-bottom: 25px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}

.fs11 {font-size: 11px;}
.fs12 {font-size: 12px;}
.fs13 {font-size: 13px;}
.fs14 {font-size: 14px;}
.fs15 {font-size: 15px;}
.fs16 {font-size: 16px;}
.fs17 {font-size: 17px;}
.fs18 {font-size: 18px;}
.fs19 {font-size: 19px;}
.fs20 {font-size: 20px;}

.ellipsis {
    /* contents are truncated with an ellipsis */
    width: auto; /* use this NOT 100% */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 2px;
}

.strong {
    font-weight: bold;
}

.em {
    font-style: italic;
}

.lighter {
    opacity: 0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
}

.light {
    opacity: 0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
    height: 1px;
    overflow: hidden;
    margin-top: -1px;
}

a.inherit
{
    color: inherit;
    font-weight: inherit;
}

.two-column, .two-column-10 {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
}

.two-column-5 {
    -moz-column-count: 2;
    -moz-column-gap: 5px;
    -webkit-column-count: 2;
    -webkit-column-gap: 5px;
    column-count: 2;
    column-gap: 5px;
}



/* MEDIA QUERIES




/* misc objects */

/* prevent tables from extending out of containers
 * see: https://github.com/twitter/bootstrap/issues/2321
 * Wrap your table with a div.scroll-x etc.
 * Beware: popu-ups may be hidden in the container object!
 */
.scroll {
  overflow: auto;
}
.scroll-x {
  overflow-x: auto;
}
.scroll-y {
  overflow-y: auto;
}


/* star-rating */

.icon-star.icon-star-off {
    opacity: 0.2;
    filter:alpha(opacity=20); /* For IE8 and earlier */
}

.dropdown-menu li div.star-rating > .icon-star {
    margin-top: 3px;
    margin-right: 9px;
    cursor: pointer;
}

.dropdown-menu li div.star-rating > .icon-star:nth-of-type(1) {
    margin-left: 20px;
}


/* aol-responsive-divtable - experimental! Works like a table but is composed
   of span2 span4, etc */

.container {
    position: relative;
}

.aol-responsive-divtable {
    position: relative;
}

.aol-responsive-divtable:before {
    position: absolute;
    top: 0;
    left: -30px;
    height: 100%;
    width: 25px;
    content: "";
    background-color: #fff;
}

.aol-responsive-divtable .row.row-processed > div {
    /*opacity: 0.1;
    filter:alpha(opacity=10); *//* For IE8 and earlier */
}

.aol-responsive-divtable .row {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* prevent darkening on tap */
}

.aol-responsive-divtable .header-row {
    background: #ffffff;
}

.aol-responsive-divtable .header-row > div > div {
    /* contents are truncated with an ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 0;
    font-weight: 700;
}

.aol-responsive-divtable .header-row > div {
    font-weight: 700;
}

.aol-responsive-divtable .row.current-row {
    background: #fafafa !important;
}

.aol-responsive-divtable .header-row,
.aol-responsive-divtable .row {
    padding: 6px 0;
    border-bottom: 1px solid #aaa;
}

.aol-responsive-divtable .header-row {
    padding: 3px 0;
}

.aol-responsive-divtable.compact .header-row:nth-child(even),
.aol-responsive-divtable.compact .row:nth-child(even) {
    /*background-color: #fafafa;*/
}


/* debug media queries - send ?debug=1 to the page */

body.debug:after {
    content: "no-media-query";
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    position: fixed;
    bottom: 0;
    right: 0;
    background: #fff;
    color: #000;
    font-size: 13px;
    line-height: 16px;
    padding: 3px;
    border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;
}


/* Large desktop */
@media (min-width: 1200px) {

    body.debug:after {content: "large-desktop";}

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {

    body {
        padding-top: 60px;
    }

    body.debug:after {content: "Portrait tablet to landscape and desktop";}

}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

    body.debug:after {content: "Landcape phone to portrait tablet";}

    .em-tablet {
        font-weight: bold;
        font-size: 110%;
    }

    /* responsive tables */

    table.table-responsive td:first-child,
    table.table-responsive td:last-child {
        border-top: none;
    }

    table td, table.table-nowrap th {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

}

/* Landscape phones and down */
@media (max-width: 480px) {

    body.debug:after {content: "Landscape phones and down";}

    .em-phone {
        font-weight: bold;
        font-size: 110%;
    }

    /* responsive tables */

    table.table-responsive td:first-child,
    table.table-responsive td:last-child {
        border-top: none;
    }

    table td, table.table-nowrap th {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .modal .modal-body {
        max-height: 280px;
        overflow: scroll; /* especially for android */
        margin-left: 20px;
    }

    .two-column-collapse-phone {
        -moz-column-count: 1;
        -moz-column-gap: none;
        -webkit-column-count: 1;
        -webkit-column-gap: none;
        column-count: 1;
        column-gap: none;
        padding-right: 0;
    }

    .pr-reset-phone {padding-right: 0}
    .pr0-phone {padding-right: 0;}
    .pr3-phone {padding-right: 3px;}
    .pr5-phone {padding-right: 5px;}
    .pr8-phone {padding-right: 8px;}
    .pr10-phone {padding-right: 10px;}
    .pr15-phone {padding-right: 15px;}
    .pr20-phone {padding-right: 20px;}
    .pr25-phone {padding-right: 25px;}
    .pr30-phone {padding-right: 30px;}
    .pr40-phone {padding-right: 40px;}
    .pr50-phone {padding-right: 50px;}

    .mb-phone {margin-bottom: 10px;}
    .mb0-phone {margin-bottom: 0;}
    .mb5-phone {margin-bottom: 5px;}
    .mb10-phone {margin-bottom: 10px;}
    .mb15-phone {margin-bottom: 15px;}
    .mb20-phone {margin-bottom: 20px;}
    .mb25-phone {margin-bottom: 25px;}
    .mb30-phone {margin-bottom: 30px;}
    .mb40-phone {margin-bottom: 40px;}
    .mb50-phone {margin-bottom: 50px;}

    /* super-fast scrolling on iphone */

    /* disabled for now, until it is perfected!
    
    body {
        width: auto;
        height: 100%;
    }

    #scroll-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 20px;
        right: 20px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

    #scroll-container-inner {
        position: relative;
        -webkit-overflow-scrolling: touch;
    }

    */

}

/* overthrow - see http://filamentgroup.github.com/Overthrow/ -
add class of 'overthrow' to elements which would not otherwise scroll
correctly, e.g. scrollable divs on Android -3.0. Not only will this enable
scrolling to work on early Android, but it will also enable native scrolling
on iOS. */
.overthrow-enabled .overthrow {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* small tablets and phones (added by Peter) */
@media (max-width: 767px), (max-width: 480px) {

    body.debug:after {content: "small-tablets-and-phones";}

    .aol-responsive-divtable .header-row {
        display: none;
    }

    .aol-responsive-divtable .row, .aol-responsive-divtable.compact .row {
         padding: 30px 0;
    }

    .aol-responsive-divtable .row {
         border-bottom: 1px solid #aaa;
    }

    .aol-responsive-divtable .row.data-row:nth-of-type(2) {
         border-top: 1px solid #aaa;
    }

    .aol-responsive-divtable > div.row > div[class^="span"] > div {
        position: relative;
        padding-left: 70px;

    }

    .aol-responsive-divtable > div.row > div[class^="span"] > div:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 0;
        left: 0px;
        width: 70px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        font-weight: 700;
        content: ""; /* content is added on the page, as follows: .aol-responsive-divtable > div.row > div[class^="span"]:nth-of-type(1) > div:before { content: "Label";} */
    }

    .aol-responsive-divtable > div.row > div[class^="span"] input,
    .aol-responsive-divtable > div.row > div[class^="span"] textarea,
    .aol-responsive-divtable > div.row > div[class^="span"] .uneditable-input {
        margin: 0;
        padding: 2px !important;
        width: 90%;
    }

}


/* PRINT */

.print, .visible-print {
    display: none;
}

@media only print {

    .print, .visible-print {
        display: block;
    }

    .no-print, .hidden-print {
        display: none;
    }

    body {
        padding-top: 0;
        padding-bottom: 0;
    }

    .aol-responsive-divtable .header-row,
    .aol-responsive-divtable .row {
        padding: 4px 0;
        border-bottom: 0.5pt solid #ccc;
    }
}