/* components/css/index.css */
/* @import url(http://fonts.googleapis.com/css?family=Ubuntu|Armata|Lora); */
/* We need the fonts locally for the Firefox/ChromeOS app anyway */
/* Modified http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu'),
         url('../fonts/Ubuntu.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Ubuntu.woff') format('woff'),
         url('../fonts/Ubuntu.ttf')  format('truetype');
}
@font-face {
    font-family: 'Armata';
    font-style: normal;
    font-weight: 400;
    src: local('Armata'), local('Armata-Regular'),
         url('../fonts/Armata.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Armata.woff') format('woff'),
         url('../fonts/Armata.ttf')  format('truetype');
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    src: local('Lora'),
         url('../fonts/Lora.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Lora.woff') format('woff'),
         url('../fonts/Lora.ttf')  format('truetype');
}

body {
    font-family: "Ubuntu","Verdana","Helvetica Neue",Helvetica,Arial,sans-serif;
    background:#fff;
    color:#111;
    /* Chrome needs this instead of just "height:100%;" like Firefox,
       either here on in "body > div". */
    position:absolute; top:0; bottom:0; left:0; right:0;
}
body > div {
    height:100%;
}

sat-layer > address, map-layer > address, overlay > address {
    margin:0 0 0.5em 1em;
}
.btn-toolbar > .btn-group { margin-top:0; margin-left:6px; }
.query-toolbar, .page-toolbar {
    clear:right;
    text-shadow:none;
}
.query-toolbar > .well {
    padding:0 4px 4px 0; margin:0 0 4px 0;
    text-align:left; /* Keep the add filter button and cloud menu right-aligned */
}
.query-toolbar > .well > .btn-group:first-child { margin-left:4px; }
.query-toolbar > .well > .btn-toolbar { float:right; }
.dropdown-menu { /* Counteract the .query-toolbar > .well rule above */
    text-align:left;
    text-shadow:none;
}
.query-toolbar > div { margin-top:4px; }
.navbar .brand > span { color:green; }
.navbar .brand > div { font-size:45%; text-transform:uppercase; }
.navbar .brand > div > a > img:hover {
    border-bottom:1px solid blue;
    margin-bottom:-2px;
    padding-bottom:1px;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus { color:#050; /* Darker than darkGreen */ }

.page-toolbar { text-align:right; }
.login { display:inline-block; vertical-align:top; }
.login a.btn { margin-top:0; }
form.btn-group { margin-bottom:0 !important; }
.pending-commits { background:yellow; }

detail-view, table-view, workflow-view, map-view { display:block; }
map-view {
    position:absolute;
    top:0;bottom:0;left:0;right:0;
}
map-view > .leaflet-control-container {
  position:absolute;
  max-height:100%;
  top:0; bottom:0;
  left:0; right:0;
  overflow:visible;
  pointer-events:none;
}
.leaflet-top .details-control {
    margin:0;
    padding:0 0.3em;
    border:0.2em solid transparent;
}
.leaflet-left .details-control, .leaflet-right {
    max-height:100%;
    box-sizing:border-box;
    overflow:auto;
}
/* ::-webkit-scrollbar
{
    pointer-events:all !important;
} */
.info-control > .progress {
    margin:0;
}
.info-control > .progress > .bar {
    width:auto;
    padding-left:1em;
    padding-right:1em;
}
.leaflet-bottom.leaflet-left { /* Make it into a side panel, top to bottom. */
    top:0;
    padding:10px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.leaflet-control-container > .leaflet-top.leaflet-left {
    /* Make it into a side panel, top to bottom. */
    left:10px; top:10px; bottom:10px;
    padding:0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin-left:0;
    transition:margin-left 0.2s;
}
.map-view-get-coordinates {
    cursor:crosshair !important;
}
.map-view-get-coordinates > .leaflet-objects-pane,
.map-view-get-coordinates > .leaflet-markers-pane {
    pointer-events:none;
}
detail-view.leaflet-control {
    width:25.5em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    float:none;
    position:absolute; left:-26em; top:0;
}
.filter-control {
    margin-left:36em;
}
.leaflet-top.leaflet-right {
    /* Push on top of the other control panes to ensure menus remain visible. */
    z-index:1001;
}
.leaflet-right.leaflet-bottom {
    /* Keep it below other controls. */
    z-index:999;
}
.leaflet-right.leaflet-bottom:hover {
    /* Make it come up when hovering. */
    z-index:1002;
    box-shadow:0 0 5px #777;
}
.leaflet-control-attribution {
    padding-right:1em;
}
.leaflet-control-attribution:hover {
    background-color:#fff;
}
.leaflet-control-container {
    margin-left:0;
}
.leaflet-control-container.leaflet-control-sidebar > .leaflet-top.leaflet-left {
    margin-left:26em;
}

detail-view > div > div {
    display:block;
    clear:both;
    margin:0.4em 0.2em;
}
detail-view > div > div[ng-repeat] + div {
    margin-top:0.5em;
    border-top:0.4em solid #555;
    padding-top:0.5em;
}
detail-view .details-edit > div {
    margin-right:8px; margin-bottom:2px;
}

select, textarea, input[type], .uneditable-input { margin-bottom:0; }
.details-edit .btn,
input[type], .details-edit .add-on { padding:1px 4px !important; }
label > input[type] {
    vertical-align:baseline;
}

li > select { margin-top:4px; margin-bottom:0; }

.hide-all-controls > .leaflet-top {
    bottom:0; left:0;
    overflow:auto;
    text-align:right;
    /* Override this rule from LeafletJS
       which causes the right panel scrolling not to work
       in Chrome 34 (worked up to Chrome 33).
       */
    pointer-events:auto;
}
.hide-all-controls > * > .leaflet-control {
    display:none;
    margin-left:10px;
    margin-bottom:10px;
}
/* This is for content pages inserted into the navbar */
.hide-all-controls > * > .leaflet-control.filter-control {
    display:inline-block;
}
.hide-all-controls > * > .info-control {
    margin:1%;
    max-width:98%;
    box-sizing:border-box;
}
#content-pages-overlay {
    clear:both;
}

detail-view h3 { padding:0; margin:0; font-size:110%; line-height:inherit; }
detail-view h3.dropdown > a { color:inherit; }
detail-view .spillid { font-family:monospace; text-align:right; }
.verbalization {
    color:#b00;
    font-weight:normal; font-size:110%;
    padding-bottom:0;
    margin-bottom:0;
}
detail-view .number-bbl:after { content:" bbl";font-weight:normal; }
detail-view .number-m3:after  { content:" m³"; font-weight:normal; }
detail-view .number-km2:after { content:" km²";font-weight:normal; }
/* detail-view .number-latlon {  } */
/* AngularBootstrap’s date pickers use block tables which make the date
   field appear below its label. */
.details-edit table { display: inline-table; }
.datepicker-month-grid { margin-top:4px; padding:0 1px 0 0; min-width:13.5em; }
/* .datepicker-year {  } */
.datepicker-month { width:2.5em; }
.datepicker-day {
    width:1.5em;
    float:left;
    border-radius:0;
    margin-right:-1px;
    margin-top:-1px; }
.datepicker-day.first-in-week { clear:left; }

.info-control {
    background:rgba(255,255,255,0.9);
    color:#111;
    padding:0.2em 0.4em;
    text-shadow:0px 0px 3px #fff;
    box-shadow:0 0 10px #777;
    border-radius:4px;
}
.filter-control {
    padding-bottom:0;
    z-index:10;
}
.baseLayer-switch {
    padding-left:6px;
    padding-right:6px;
    width:40px;
}
.overlay-control { margin-bottom:3em; /* Clear the attribution line */ }
.overlay-control .btn {
    position:relative;
    padding-left:0.5em;
    padding-right:0.5em;
    text-align:left;
    background:rgba(0,0,0,0.4);
    color:#eee;
    text-shadow: 0 1px 1px #000;
    border-color:transparent;
}
.overlay-control .btn:hover { background:#000; }
.overlay-control .btn.active { background:rgba(0,0,0,0.5); color:#fff; }
.overlay-control .btn.active:after { position:absolute; right:0; content:"◂"; color:#ccc; }
.overlay-control .btn > svg, .overlay-control .btn > img {
    width:12px;
    height:12px;
    margin:-1px 2px 2px -2px;
    vertical-align:middle;
}
.overlay-control > .btn-group-vertical > .btn + .btn {
    margin-top:0;/* Avoid bouncing due to the tooltip div inserted inbetween. */
}

.leaflet-control-zoomslider-wrap,
.leaflet-control-zoomslider-in,
.leaflet-control-zoomslider-out {
    opacity:0.75;
}

table-view {
    position:absolute; bottom:0; left:0; right:0;
    max-height:100%;
    overflow:auto;
    z-index:1000;
    background-color:#fff;
    background-color:rgba(255,255,255,0.7);
    color:#111;
}
table-view > div { border:thin solid #ddd; }
table-view > div {
    overflow:auto;
}
table-view > div > div { overflow:auto; } /* Each part scrollable independently */
table-view > div > .pagination {
    margin:4px 3px; padding:0;
    display:inline-block;
    vertical-align:middle;
}
table-view > div > .pagination > ul { vertical-align:middle; }
/*.table-container { margin: 0; }*/
table-view .table { margin:0; }
table-view a { cursor:default; }
table-view .selected, workflow-view .selected { font-weight:bold; }

table-view .table th {
    display:table-cell;
    padding:0;
}
table-view .table th .btn {
    border-top:none; border-left:none;
    vertical-align:top;
     -moz-box-shadow:none; -webkit-box-shadow:none;
    box-shadow:none;
}
table-view .table th > div {
    position:relative;
    padding:24px 0.2em 0.2em 0.2em;
    line-height:1.2em;
}
table-view .table th > div > .btn {
    position:absolute;top:0;left:0;right:0;width:100% /* for Firefox */;
    text-align: left;
    border-radius: 0;
    border-right: none;
}

table-view td {
    background:#fff;
    white-space: nowrap; max-width:32em; overflow:hidden; text-overflow:ellipsis;
}
td.folded  { border-top-style:none; border-left:thin dashed #ddd; border-right:thin dashed #ddd; }
td.error   { background:#faa; }
td.warning { background:#ffa; }
.table .table-field-id { font-family:monospace; }
.table .table-field-date { white-space:nowrap; }
.table .table-field-latlon {
    font-family:monospace;
    max-width:4em; overflow:hidden; text-overflow:ellipsis;
}
.table .table-field-number { text-align:right; }
.table th { text-align:center; font-weight:normal; }
.table tr:hover > td { background-color:#cfc !important; color:black; }

workflow-view {
    position:absolute; top:0; bottom:0; right:0;
    width:20em;
    max-width:100%;
    overflow-x:auto;
    overflow-y:scroll;
    background-color:#eee;
    color:#111;
    padding:1em;
}

graph-view {
    display:block;
    text-align:center;
}
graph-view object, graph-view table.table {
    display:inline-block;
    vertical-align: top;
    margin:0.5em;
}
graph-view table.table {
    width:auto;
}
graph-view object {
    width:40%;
    min-width:20em;
    max-width:40em;
}
graph-view object > h2 {
    border:thin solid #ddd;
    padding:0.1em;
    background:rgba(255,255,255,0.2);
}
graph-view svg {
    display:inline-block;
    margin-right:10px;
}
.graph-category > rect:hover { fill:black; }
graph-view .table .category-name {
    text-align:left;
}
graph-view .table .total th {
    border:none;
    text-align:right;
}
graph-view .table th {
    padding-left:1em;
}
graph-view .table th.title {
    border-top:none;
    font-size:110%;
    font-weight:bold;
}
graph-view .table td {
    font-weight:bold;
}
graph-view .table .btn { border:none; }
.chart-missing-info {
    width:5em;
    height:1em;
    display:inline-block;
    vertical-align:top;
    margin:0.3em 0 0 0.5em;
    /* Until here only has an effect on the SVG element */
    /*stroke:#ddd;*/
    fill:none;
}
.chart-missing-info-bar {
    height:1em;
    fill:#000;
}
.c3-tooltip { text-align:left; }
.c3 { text-shadow:none; }

.workflow-selection {
    text-align:left;
    max-height:20em;
    overflow-y:auto;
    background: #fff;
    padding: 0.5em;
    border-radius: 0.25em;
}
.workflow-selection:empty:before {
    content: "No incidents."
}

.content-page {
    clear:both;
    padding:10px;
    font-size:110%;
    text-align:left;
    -moz-columns:2 26em;
    -webkit-columns:2 26em;
    columns:2 26em;
    max-width:60em;
}
.single-column {
    -moz-columns:1;
    -webkit-columns:1;
    columns:1;
}

/* http://stackoverflow.com/questions/19350291/use-font-awesome-icon-in-placeholder#answer-19483084
   This does not work if all the selectors are put together in one rule,
   I guess because the parser rejects other selectors as invalid and
   discards the whole rule.
*/
input[type="search"]::-webkit-input-placeholder::before {
    font-family: fontAwesome; content:'\f002  '; color: #69f;
}
input[type="search"]::-moz-placeholder::before /* firefox 19+ */ {
    font-family: fontAwesome; content:'\f002  '; color: #69f;
}
input[type="search"]:-ms-input-placeholder::before /* ie */ {
    font-family: fontAwesome; content:'\f002  '; color: #69f;
}
input[type="search"]:-moz-placeholder::before {
    font-family: fontAwesome; content:'\f002  '; color: #69f;
}

footer {
    padding:10px; text-align:left;
    clear:both;
}
footer > div { float:left; padding-right:1em; }
.leaflet-clickable.selected-marker {
    stroke-opacity: 1.0;
}

/* Overrides for Bootstrap: */
input, button, select, textarea { font-family:inherit; }

.navbar .brand {
    margin:0;
    padding:0px 8px 0px 4px;
    color:black;
    text-shadow:inherit;
    clear:both;
    text-align:left;
}
.navbar-inner {
    /*text-align:right;*/
    background:none;
    border:none;
}
.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner
{ box-shadow:none; }
.navbar .nav {
    margin:0;
    float:right;
    text-align:right;
}
.navbar .nav > li {
    line-height:120%;
    display:inline;
    float:none;
}
.navbar .nav > li > a {
    display:inline-block;
    padding:0.2em 0;
    text-shadow:inherit;
}
.navbar .nav > li + li > a:before {
    content:"| ";
    color:#ccc;
    padding:0 0.3em 0 0.2em;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
    background:transparent;
    box-shadow:none;
}
.navbar-inner { padding:0; min-height:0; }
.container-fluid { padding:0; }
.btn-toolbar { margin:5px 0 0 0; display:inline-block; }
.btn > .label { vertical-align:middle; }
.btn-group > input {
    margin:0;
    border-right:none;
    border-top-right-radius:0;
    border-bottom-right-radius:0;
}
.btn-group > input + input {
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}
.btn * + .caret { margin-left:0.5em; }
div.dropdown-menu { padding:0.5em; }
.dropdown-menu {
    min-width:4em;
    cursor:default;
    z-index:10000;/* Because of the map component LeafletJS */
}
ol.dropdown-menu {
    max-height:23em;
    overflow:auto;
}
.dropdown-menu > li > span {
    padding:3px 20px;/* same as <a></a> */
    white-space:nowrap;/* for the e-mail address */
}
.dropdown-menu form { margin:0; }

.version-display {
    text-align:right;
    font-size:75%;
    color:#555;
    line-height:inherit;
    padding:0 4px;
}
.version-display + .version-display {
    background:yellow;
}

.pagination ul > li > a, .pagination ul > li > span {
    padding:4px 6px;
    min-width:2em;
    text-align:center;
}
.pagination a, .btn {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
h1 { font-size:130%; line-height:130%; padding-left:0.2em; }
h2 { font-size:120%; line-height:120%; padding-left:0.2em; }
h3 { font-size:110%; line-height:110%; padding-left:0.2em; }
footer a { color:#005C04; font-weight:bold; }

/* Overrides for Leaflet: */
.leaflet-container { font-family:inherit; }
.leaflet-popup-content-wrapper { border-radius:4px; }
.leaflet-popup-content { margin:0.4em; }
.leaflet-container a.leaflet-popup-close-button { padding:2px 0 0 0; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: rgba(0, 0, 80, 0.75);
    color: rgba(255, 255, 200, 1.0);
    box-shadow: 0 0 6px rgba(255, 255, 200, 0.75);
    text-shadow:0px 0px 3px #000;
}
.leaflet-popup-content a { color:#7af; }
.leaflet-popup-content .field-label       { color: #8080ff; }
.leaflet-popup-content .field-label:hover { color: #a0a0ff; }

/*.leaflet-control-geocoder-form { margin:0; display:inline-block; }
.leaflet-control-geocoder-form * { vertical-align:middle; margin:0 !important; }*/

.baseLayer-control { z-index:8; }/* Other controls have 7 */


/* Media adaptations */
@media (max-width: 32em) {
    detail-view.leaflet-control { /* Make it into a side panel, top to bottom. */
        left:-14em;
        width:13.5em;
    }
    .leaflet-control-container.leaflet-control-sidebar > .leaflet-left.leaflet-top {
        margin-left:14em;
    }
}
@media (max-width: 980px) {
    .navbar-text.pull-right { float:none; padding-left:5px; padding-right:5px; }
}
@media (max-width: 400px) {
    .navbar .brand { display:none; }
    .nav { text-align:right; }
    .nav:before { font-family:FontAwesome; content:'\f0c9'; }
    .nav:hover:after { content:'' }
    .navbar .nav > li { display:none; }
    .nav > li.active, .nav:hover > li { display:inline; }
    map-view .detail-view-field { display:none; }
}
@media (max-height: 400px) {
    .navbar .brand { display:none; }
}

@media print {
    /* We are all important here. */
    .nav, .page-toolbar { display:none !important; }
    .section-home .leaflet-control-container {
        position:static !important;
        float:right;
    }
    .leaflet-control, .leaflet-popup-content-wrapper {
        background:white !important;
        border:thin solid #000 !important;
    }
    .section-summary .leaflet-control {
        border:none !important;
    }
    .leaflet-control-scale { border:none !important; background:transparent !important; }
    .info-control.filter-control { display:block; float:left; }
    detail-view { max-height:initial !important; }
    /* In Chrome, .leaflet-container musb have overflow:visible for the map too. */
    .section-summary .leaflet-container,
    .leaflet-top, .info-control, .navbar, .content-pages-overlay {
        overflow:visible !important;
    }
    .leaflet-control-zoomslider, .baseLayer-control { display:none; }
    .leaflet-bottom.leaflet-right { position:fixed; }

    .section-summary .leaflet-map-pane,
    .overlay-control .btn:not(.active),
    .overlay-control .btn.active:after,
    graph-view > .controls { display:none; }

    .navbar-inner { float:left; }
    .query-toolbar .btn, .query-toolbar .well {
        font-size:8pt; border:none; background:none; padding:0;
    }
    .query-toolbar .icon-remove,
    .query-toolbar .caret,
    .query-toolbar .btn-toolbar {
        display:none;
    }
    graph-view > div,
    graph-view table,
    graph-view tr,
    graph-view td { page-break-inside:avoid; position:relative; }
    body { margin:0; }
}
/*@page {
    size:auto;
    margin:1cm;
}*/