/* small common things */

* { box-sizing: border-box; }

a {color: teal; text-decoration:underline; cursor:pointer; white-space:nowrap; }
a.link, a[href] {color: #00f; text-decoration:underline; }
span.link { color: teal; text-decoration:underline; cursor:pointer; }
ul.info { list-style-type: circle; }
li.info { list-style: circle; }

.ptr { cursor:pointer; }
.grey { color: grey; }
.bold { font-weight: bold; }
.red { color: red; }
.vertical-text { transform: rotate(90deg); transform-origin: left top 0; }
.x1p6 { font-size: 160%; }

div strong { font-weight: bold; }

td > input[type=checkbox] { vertical-align: middle; }
td > input[type=radio] { vertical-align: middle; }

.info-circle { margin: 0 2px 0 2px; padding: 0 6px 0 6px; border-radius: 10px; background-color: #22f; color: white; font-weight: bold; cursor: pointer; }
.more-circle { margin: 0 2px 0 2px; padding: 0 5px 0 5px; border-radius: 10px; background-color: #dd0; color: green; font-weight: bold; cursor: pointer; }
.info-box { background-color: #ffe; border: 1px solid black; position: absolute; padding: 4px; border-radius: 6px; z-index: 60; }

table { border-collapse: collapse; }
.b1 td { border: 1px solid grey; padding: 2px 4px; }
.b1 td:nth-child(3) { text-align: right; }

div p, div h2 , div h3 { margin: 0.4em; } /* don't know why need this */

.cc-header { background: #eee; padding: 3px; }
.cc-body { background: white; height: 200px; overflow-y: scroll; }
.cc-outer { border: 1px solid black; }
.cc-body textarea { vertical-align: top; }

a.letter-link { background-color: teal; color: white; text-align: center; border-radius: 5px; padding: 0 3px; text-decoration: none; }

.l { text-align: left; }
.r { text-align: right; }
.c { text-align: center; }

/* big things, columns */

body { font-family: Arial, Helvetica, sans-serif; font-size: 15px; margin: 0; overscroll-behavior-y: none; }
canvas { user-select: none; }
.under-canvas { padding: 5px; position: absolute; bottom: 0; background: white; } 

div.minmax { text-align: right; position: relative; right:5px; }
div.minmaxmap { text-align: right; position: relative; right:125px; z-index:77; }

div.column { height: 100%; }
div.column-scroll { overflow: scroll; padding: 7px; }
div.column-fill { overflow: hidden; }

.jxSplitBarHorizontal {
    display: block;
    position: absolute;
    font-size: 0px;
    line-height: 0px;
    margin: 0px;
    padding: 0px;
    border: none;
    width: 5px;
    height: 100%;
/*    cursor: col-resize;*/
    background-color: #f0f0f0;
    z-index: 2;
}

.whole { /* jxSplitContainer */
	display: block; position: relative; margin: 0px; padding: 0px; border: none; overflow: hidden;
}
 
.jxSplitArea {
	display: block;
	position: absolute;
	margin: 0px;
	padding: 0px;
	border: none;
	/*overflow: hidden;*/
	z-index: 0;
} 

.side-tab { background: white; padding: 6px; border: 1px solid black; position: fixed; z-index: 33; font-size: 30px; user-select: none; }
.side-tab-l { transform-origin: 0% 0%; transform: rotate(-90deg); left: 0; }
.side-tab-r { transform-origin: 100% 0%; transform: rotate(90deg); right: 0; }
/*.side-tab-info { top: 40px;  }
.side-tab-ctrls { top: 155px;  }
.side-tab-output { top: 300px;  }*/

/* census stuff */

table.cmap { border-collapse:separate; border-spacing:1px; }
table.cmap td { padding: 0px 2px; }

.cnav-feat, .place-feat { display: block; border: 1px solid black; border-radius:4px; padding: 5pt; background-color:white; position:absolute; z-index:30; font-size: 10pt; }

.cnav-feat table { border-spacing: 9px 2px; border-collapse: separate; }

.cnav-nav { height: 250px; overflow-y: scroll; }
.cnav-nav hr { margin: 2px; }

.cadv-main { border: solid black 1px; }
.cadv-main div { margin: 3px; }
.cadv-main span { margin: 3px; padding: 2px; }

td.csel-grid { width: 22px; text-align: center; border: 1px solid black; }
td.csel-grid-empty { width: 22px;  }

.column-ioi-0 h3 { margin-top: 0.8em; text-align: center; }
.column-ioi-0 em { color: brown; font-style: normal; }
.column-ioi-0 { font-family: Merriweather, Georgia, serif; font-size: 14pt; }
h1 { font-size: 22pt; }
.column-ioi-0 h2 { font-size: 18pt; }
.column-ioi-0 a { white-space: normal; }

div.colour-scale-marker { width: 5px; height: 15px; border: solid grey 2px; border-radius: 6px; top: 15px; background-color: white; position: absolute; }

.cc-header button { float: right; padding: 0 5px; font-weight: bold; }

/* census - animation */

.anim-ctrl { border: 1px solid grey; height: 60px; }
.anim-ctrl button { margin: 7px; font-size: 20px; }
.anim-ctrl-track { display: inline-block; height: 10px; width: 40%; border: solid 1px grey; z-index: 7; }
.anim-play-wrapper { display: inline-block; width: 55px; } 

div.anim-track-tick { width: 2px; height: 9px; top: 28px; background-color: grey; position: absolute; user-select: none; }
div.anim-slider-marker { width: 8px; height: 20px; border: solid grey 2px; border-radius: 6px; top: 13px; background-color: white; position: absolute; pointer-events: none; margin-left: -3px; z-index: 15; }

/* various non-census */

.c-legend { border: 1px solid grey; height: 60px; padding: 7px; }
.c-legend button { float: right; }
.c-legend td { max-height: 1em; margin: 0 2px; }

table.form td { padding: 0px 3px; border: 1px solid grey; }
table.siteedit td { padding: 0px 3px; border: 1px solid grey; }
div.sitedesc p { margin: 6px 0; }
div.coltop { border-bottom: 1px black; }

#compo-sites > div { padding: 3px; }
#compo-sites p { padding: 5px 0; }
#compo-sites input[type=text] { width: 150px; }
#compo-sites input.search { width: 120px; }

.chs-list { padding: 2px; }
.chs-list td { padding: 2px; border: solid 1px lightgrey; }

.wp-only, #compo-article figure { display: none; }

.msg-inner { padding: 2px; border-radius: 4px; display: inline; }
.msg-outer { margin: 2px; padding: 2px; }
.msg-inner.mu { background: #def; }
.msg-inner.ma { background: #cfc;  }
.msg-outer.mu { text-align: right;  }
.msg-input { border: 2px solid grey; border-radius: 4px; width: 90%; margin-left: 4%; min-height: 1.4em; }
.msg-date { font-size: 75%; text-align: center; }

/* page view */

@media print {
    .no-print { display: none; }
    #compo-article { display: none; }
}


div.label { display: block; border: 1px solid black; border-radius:4px; padding: 1px; background-color:white; position:absolute; z-index:30; cursor:pointer; }
div.label.insel { background-color:green; }

.line { position: absolute; z-index:10; }
.line-l { border-left: solid 1.5px black; border-bottom: solid 1.5px black; }
.line-g { border-left: solid 1.5px black; border-top: solid 1.5px black; }
.line-rl { border-right: solid 1.5px black; border-bottom: solid 1.5px black; }
.line-rg { border-right: solid 1.5px black; border-top: solid 1.5px black; }
.line.insel { border-color:lightgreen; }
#things > img { position: absolute; z-index: 20; cursor:pointer; }
img.site-icon { position: absolute; z-index: 20; cursor:pointer; }
img.insel { border-style:dotted; }

div.page { page-break-before:always; position:relative; }
div.page:first-child  { page-break-before:avoid; }

/* monitor */

body.monitor > div { border: solid grey 5px; padding: 4px;  }
body.monitor > div:nth-child(2) { overflow-y: scroll; }
body.monitor .action-e { background: #f88; }
body.monitor .action-mu { background: lightgreen; }
body.monitor .action-ma { background: palegreen; color: darkgreen; text-align: right; }
body.monitor .action-pe { background: #ff4; }
body.monitor .action-pl { background: #ff4; }
body.monitor .action-cl { background: lightblue; }
body.monitor .action-ss { background: lightgrey; }
body.monitor .sp1 { padding: 0 5px; margin: 5px; }

.date-Sun { background: #5ff; }
.date-Mon { background: #5f5; }
.date-Tue { background: pink; }
.date-Wed { background: orange; }
.date-Thu { background: #7af; }
.date-Fri { background: #c74; }
.date-Sat { background: #ff4; }