/*========================================================================================
  Define relevant css to apply globally.
  ========================================================================================*/
@media print {
    /* manually used in specific pages for print
       switch related css in between 'screen' media placed in cer.css and 'print' media here */
    .visible-print {
        display: inherit !important;
    }
    .hidden-print  {
        display: none !important;
    }
    .screen_span6 {
        /* do nothing */
    }
    .print_span3 {
        width: 220px;
    }

    body {
        padding-top: 0px;
    }

    /* hide all unnecessary sections for print */
    #header, #left-sidebar, #menubar, #skip-to-content {
        display: none;
    }

    @page {
        size: auto;
        margin: 1cm .6cm 1cm .6cm;
    }

    div.print-header {
        width: 100%;
    }

    /* override css */
    h1, h2 {
        font-weight: bold !important;
    }

    h1, h2, h3 {
        color: #186843 !important;
    }

    abbr[title]:after {
        content: "";
    }

    div.search-section div.legend {
        background-color: #ffffff !important;
    }

    div.print-expand div.search-section > div {
        display: block !important;
    }

    .form-subheading {
        color: #186843 !important;
    }

    #page-title {
        margin-left: -15px;
        font-size: 35px;
        line-height: 30px;
    }

    /* hide all unnecessary section buttons */
    .section-buttons, .btn {
        display: none !important;
    }

    #outer-container {
        margin: 0px 0px 0px 0px;
        min-width: 0px;
    }

    /* expand width of main content to fit in */
    #content {
        width: 99.5% !important;
        font-size: 10px;
    }

    div.left-padding, div.right-padding {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .padded {
        padding: 0px 0px 0px 0px !important;
    }

    input, textarea, select, button, pre, label {
        font-size: 10px !important;
    }

    /* expand all accordions */
    .accordion .accordion-group .accordion-body {
        display: inline !important;
    }

    /* expand width of span8 for application-details */
    .accordion-inner .container-fluid .row .span8 {
        width: 100%;
    }

    .collapse a {
        visibility: visible;
    }

    /* hide tabs */
    ul.nav-tabs {
        display: none;
    }

    /* expand all tabs */
    .tab-content .tab-pane {
        display: block;
    }

    /* expand all tabs */
    .fade {
        opacity: 1;
    }

    /* hide the link information */
    a:link:after, a:visited:after {
        content: normal;
    }

    /* hide the horizontal scrollbar on dataTables */
    .data-table-container, .stc-data-table-container, .lgc-data-table-container {
        overflow-x: hidden;
    }

    /* repeat table headers in each pages
       It works in IE and FireFox but does not work in Chrome which identified as a bug
       https://code.google.com/p/chromium/issues/detail?id=24826
       A workaround for Chrome but complicated
       http://stackoverflow.com/questions/7211229/having-google-chrome-repeat-table-headers-on-printed-pages/25737442#25737442
    */
    table.dataTable thead {
        display: table-header-group;
    }

    /* break words on dataTables only for search to fit in */
    table.dataTable {
        width: 100% !important;
        height: 100%;
        word-break: keep-all;
        border-collapse: separate;
    }

    table.dataTable thead th {
        padding: 3px 5px !important;
    }

    table.dataTable td {
        padding: 3px 5px !important;
    }

    /* show calculation results properly on stc calculator pages printed */
    #calculator-results {
        width: 90%;
        margin-left: 40px;
    }

    /* hide textarea with id 'note' */
    textarea[id$='note'] {
        display: none !important;
    }

    div:not(.unstyled) > .dl-horizontal dt, div:not(.unstyled) > .dl-horizontal dd {
        float: left;
        line-height: 2em;
    }

    div:not(.unstyled) > dl dd, ul:not(.unstyled) > dl dd {
        margin-left: 2em !important;
    }

    .cer-label {
        color: #fff !important;
        background-color: #186843 !important;
        font-size: 10px !important;
    }

    .breadcrumb {
        border: 1px solid #f5f5f5 !important;
        background-color: #f5f5f5 !important;
    }

}