/* app css stylesheet */

body{
  font-size: 16px;
  font-family: arial, sans-serif;
  background-color: #fff;
}

#main{
  font-size: 14px;
}

html,
body,
#main,
#first,
#left,
#right {
  height: 100%;
  padding: 0;
  margin: 0;
}

#top-right{
  position:absolute;
  top:0;
  right:0;
}

ul#menu{
  margin-top:0;
}

ul#menu li a{
  text-decoration: none;
}

ul.two-row-menu li{
  width:100px;
}

.col {
  float: left;
}
.content, .pure-content {
  display: block;
}

.block{
  padding-bottom:10px;
}

.colblock{
  padding: 5%;
  width:80%;
}

#header #menu{
  float: right;
}

#left .content, #left .pure-content {
  height: 100%;
}

#right .content, #top-right .content, #right .pure-content, #top-right .pure-content{
  min-width: 270px;
  padding: 0 20px 20px;
}

.right{
  float:right;
}

.w5{
  width:5%;
}

.w10{
  width:10%;
}

.w15{
  width:15%;
}

.w20{
  width:20%;
}

.w25{
  width:25%;
}

.w30{
  width:30%;
}

.w35{
  width:35%;
}

.w40{
  width:40%;
}

.w45{
  width:45%;
}

.w50{
  width:50%;
}

.w55{
  width:55%;
}

.w60{
  width:60%;
}

.w65{
  width:65%;
}

.w70{
  width:70%;
}

.w75{
  width:75%;
}

.w80{
  width:80%;
}

.w85{
  width:85%;
}

.w90{
  width:90%;
}

.w95{
  width:95%;
}

.w100{
  width:100%;
}

.purple{
  background-color:rgba(128, 0, 128, 1);
}

.purple-l{
  background-color:rgba(128, 0, 128, 0.3);
}

.orange{
  background-color:rgba(255, 165, 0, 1);
}

.orange-l{
  background-color:rgba(255, 165, 0, 0.3);
}

.blue{
  background-color:rgba(173, 216, 230, 1);
}

.blue-l{
  background-color:rgba(173, 216, 230, 0.3);
}

.green{
  background-color:rgba(0, 128, 0, 1);
}

.green-l{
  background-color:rgba(0, 128, 0, 0.3);
}

.yellow{
  background-color:rgba(255, 255, 0, 1);
}

.yellow-l{
  background-color:rgba(255, 255, 0, 0.3);
}

.red{
  background-color:rgba(255, 0, 0, 1);
}

.red-l{
  background-color:rgba(255, 0, 0, 0.3);
}

.message{
  border: 1px outset white;
  border-radius: 2%;
  margin-bottom: 0.25em;
}

.message .text{
  margin:1.5% 2%;
  font-style: italic;
  font-weight: bold;
}

.message.red .text, .message.green .text{
  color: white;
}

.message .close{
  cursor: pointer;
  float:right;
  display: inline-block;
  clear:none;
  text-align: right;
  padding:1% 2% 0;
  font-size: 1em;
  font-family: monospace;
  color:#333;
}

.message .spinner{
  float:right;
  clear:none;
  display:inline-block;
  padding:1% 2% 0;
}

.spinner {
  width: 26px;
  text-align: center;
}

.spinner > div {
  width: 6px;
  height: 6px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 2s infinite ease-in-out;
  animation: bouncedelay 2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.content button, .content select {
  background-color:#f9f9f9;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  border:1px solid #dcdcdc;
  display:inline-block;
  color:#666666;
  font-size:0.875em;
  width: 37%;
  margin-right:1%;
}
.content button{
  cursor:pointer;
  text-decoration:none;
  padding:6px 6px;
}
button:hover {
  background-color:#e9e9e9;
}
button:active {
  position:relative;
  top:1px;
}
button[disabled], button:disabled{
  background-color:#ffffff;
  color:#cccccc;
}
button.small{
  padding:3px 0px;
  height:24px;
  width:24%;  
}

.content input, .content select{
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  border:1px solid #dcdcdc;
  height:20px;
}
.content select.previews{
  height:27px;
  margin-top:-1px;
  margin-bottom:1px;
}

input.right, select.right{
  float:right;
}

hr.clear{
  height:auto;
}

br.clear{
  width:100%;
  clear:both;
  height:1px;
  line-height:1px;
}

.zoom-controls{
  background-color:#f9f9f9;
  display: inline-block;
}

.zoom-controls span{
  color:#666666;
  font-size:1em;
  margin:0 4px;
}

.zoom-controls button{
  width:25px;
  min-width:25px;
  max-width:25px;
  padding:3px 5px;
  margin-right: 0;
  text-align: center;
}

.beamstatus{
  width:93%;
  color:#666666;
}

.beamstatus legend{
  font-weight: bold;
}

.beamstatus p{
  margin-top:0;
  margin-bottom:6px;
}

.beamstatus textarea{
  width: 98%;
  height:5em;
  margin-bottom:6px;
}

.aspect50{
  width:100%;
  display:inline-block;
  position:relative;
}

.aspect50:after{
  padding-top:50%;
  display:block;
  content:'';
}

.aspect70{
  width:100%;
  display:inline-block;
  position:relative;
}

.aspect70:after{
  padding-top:70%;
  display:block;
  content:'';
}

.aspect75{
  width:100%;
  display:inline-block;
  position:relative;
}

.aspect75:after{
  padding-top:75%;
  display:block;
  content:'';
}

.aspect80{
  width:100%;
  display:inline-block;
  position:relative;
}

.aspect80:after{
  padding-top:80%;
  display:block;
  content:'';
}

.aspect100{
  width:100%;
  display:inline-block;
  position:relative;
}

.aspect100:after{
  padding-top:100%;
  display:block;
  content:'';
}

#map-canvas {
  /*height: 100%;*/
  /*height:350px;
  width:700px;*/
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

ul.simplelist {
  padding: 0;
  list-style-type: none;
}

ul.simplelist li{
  margin-bottom:3px;
}

ul.simplelist li.block-input{
  margin-bottom:12px;
  display:block;
  width:93%;
  clear:both;
}

.switches button.small{
  margin-right:30%;
  width:20%;
}

label{
  display:block;
}

#left label{
  display:inline-block;
}

.pad{
  padding:20px;
}

table th, table td{
  text-align:left; 
  border:1px solid #eee;
  padding:4px;
}

table td.invisibleborder{
  border-color:#fff;
}

.form-error{
  color:red;
}

.field-inline label{
  display:inline;
}

.field-inline input{
  display:inline;
}

input.search-table{
  width:96%;
  margin-top:5px;
  margin-bottom:5px;
  height:75%;
}

.small{
  font-size: 0.8em;
}

.extlink:after{
  content:'';
  display: inline-block;
  width:13px;
  height:13px;
  margin-left:5px;
  background-image:url(../img/extlink.png);
}

.preview{
  text-decoration: none;
  color:inherit;
}

.preview:after{
  content:'';
  display: inline-block;
  width:13px;
  height:13px;
  margin-left:5px;
  background-image:url(../img/extlink.png);
}

.preview-images{
  margin-top:1em;
  margin-bottom:1em;
  padding-left:10px;
}

.preview-images>ul>li>img{
  margin-bottom:1em;
}

.iframe-source{
  margin-top:0.25em;
}

.gjmap .aspect100 { height: 100%; display: block; }
.gjmap .aspect100:after { padding-top: 0; }

#layermanager {}
#layermanager h2, #layermanager h3 { font-size: 1em; text-align: left; }
h4{
  margin-top:0;
  margin-bottom:6px;
}
.layer-manager { width: 100%; box-sizing: border-box; position: relative; padding: 0; margin: 0; list-style: none; }
.layer-control { list-style: none; margin: 5px 0; padding: 5px; width: 100%; box-sizing: border-box; background: white; border: 1px solid #F0f0f0; }
.layer-bar { display: inline-block; box-sizing: border-box; width: 80%; vertical-align: middle; }
.layer-gain { display: inline-block; box-sizing: border-box; width: 20%; vertical-align: middle; min-width: 30px; text-align: center; }
.layer-control .layer-bar .bar { float: right; min-height: 20px; min-width: 30px; overflow: hidden; background: orange; color: white; padding: 2px; box-sizing: border-box; }
.layer-control.editing{border-style: dashed; border-color: orange; background-color:rgba(255, 165, 0, 0.2); }
.gain-control { box-sizing: border-box; width: 80%; margin: 0 auto; text-align: center; }
.placeholder { background: #f0f0f0; height: 20px; } 
.dragged { position: absolute; opacity: 0.75; left: 0 !important; }
li .layer-bar { cursor: pointer; }
li .layer-bar:active { cursor: ns-resize; }
.layer-control:hover,.layer-control.hover { border: 1px solid black; } 
.saved { -webkit-animation: saved 1s; -moz-animation: saved 1s; animation: saved 1s; }
.notsaved { -webkit-animation: notsaved 1s; -moz-animation: notsaved 1s; animation: notsaved 1s; }

@keyframes saved {
  from { background: #CFC; }
  to { background: white; }
}
@-webkit-keyframes saved {
  from { background: #CFC; }
  to { background: white; }
}
@-moz-keyframes saved {
  from { background: #CFC; }
  to { background: white; }
}
@keyframes notsaved {
  from { background: #FCC; }
  to { background: white; }
}
@-webkit-keyframes notsaved {
  from { background: #FCC; }
  to { background: white; }
}
@-moz-keyframes notsaved {
  from { background: #FCC; }
  to { background: white; }
}

.fadeout{
  -webkit-animation: fadeout 0.3s; -moz-animation: fadeout 0.3s; animation: fadeout 0.3s;
}

@keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}
@-webkit-keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}
@-moz-keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}

#canvas {
    border: 3px solid red;
}