html{
  height:100%;
  min-width:320px;
}
ul>li{
  margin-bottom:8px;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
  supported by Chrome and Opera */
}
.center{
  text-align:center;
}
.clear{
  clear:both;
}
.relative{
  position:relative;
}
a.asc:after{
  content:" \25B4";
}
a.desc:after{
  content:" \25BE";
}
div.header-nav{
  position:relative;
  margin-bottom:20px;
}
div.header-nav .primary-box{
  padding:10px;
  background-color:#337ab7;
  color:#BDE1FB;
  border-bottom-left-radius:4px;
}
div.header-nav .primary-box h3{
  margin:0 0 20px 0;
  padding:0 0 5px;
  border-bottom:1px solid #BDE1FB;
}
div.header-nav .btn-group:after{
  clear:both;
}
div.header-nav h1,div.header-nav h2,div.header-nav h3{
  position:relative;
  margin-bottom:0;
}
div.header-nav .btn-group{
  float:right;
}
div.header-nav .btn-group .btn{
  border-top-left-radius:0;
  border-top-right-radius:0;
  border-top-width:0;
}
.centered-axis-xy{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.note{
  font-style:italic;
}
header.title,footer.bottom{
  background-color:#1273b9;
  color:#e0eff6;
}
header{
  margin-bottom:30px;
}
figure{
  padding:3px;
  text-align:center;
  margin:5px;
  border:1px solid #ddd;
}
figcaption{
  padding:0 0 5px;
  font-size:18px;
  font-size:smaller;
  font-style:italic;
}
main{
  margin-bottom:30px;
}
main h1{
  margin:0 0 30px;
  padding:20px 0 9px;
  border-bottom:1px solid #DDD;
}
main h2{
  margin:0 0 20px;
  padding:15px 0 9px;
  border-bottom:1px solid #DDD;
}
.dimension-thumbs{
  position:relative;
  width:100%;
}
.dimension-thumbs>div.thumb{
  float:left;
  margin-right:2%;
  position:relative;
}
.dimension-thumbs>div.thumb>label{
  border:1px solid #CCC;
  box-sizing:border-box;
  width:100%;
}
.dimension-thumbs>div.thumb>label>div.title{
  width:100%;
  padding:5px;
  font-weight:normal;
  border-bottom:1px solid #CCC;
}
.dimension-thumbs>div.thumb>label>div.img-container{
  position:relative;
  height:100px;
  width:100px;
}
.dimension-thumbs>div.thumb>label>div.img-container>div.img{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.dimension-thumbs>div.thumb>label>div.input{
  text-align:center;
  border-top:1px solid #ccc;
}
p{
  margin-bottom:15px;
}
form{
  margin-bottom:20px;
}
.form-inline div.select label{
  margin-right:10px;
}
.right{
  float:right;
}
#title{
  padding:10px;
}
section.header {
  padding:30px 0;
}
section.header h1{
  margin:25px 0 35px;
}
section.header p{
  font-size:20px;
  color:#8ABCE0;
  margin:25px 0;
}

body{
  position:relative;
  min-height:100%;
  height:auto;
  padding-bottom:40px;
}
footer.bottom{
  bottom:0;
  left:0;
  right:0;
  position:absolute;
  height:40px;
  line-height:14px;
  font-size:14px;
  padding:13px 0;
}
.table>tbody>tr>td.tile-parent, .table>tbody>tr>td.tile-crop{
  padding:2px;
}
.tile-parent img,.tile-crop img{
  height:1cm;
}
tr.removed,tr.removed a{
  text-decoration:line-through;
  background-color:#ccc;
  color:#AAA;
}
#viewer{
  position:relative;
  max-width:100%;
  max-height:90%;
  margin:auto;
  overflow:hidden;
}
#result{
  position:absolute;
  bottom:0;
  right:0;
  border-top:1px solid #AAA;
  border-left:1px solid #AAA;
  z-index:100;
  max-width:25%;
}
#viewer div#map-nav{
  position:absolute;
  top:10px;
  left:10px;
  width:72px;
  height:240px;
  z-index:101;
  background-color:rgba(0,0,0,0.5);
  border-radius:5px;
}
#open-image{
    z-index:10;
    display:block;
    position:absolute;
    top:0;
    right:0;
    width:300px;
    border:2px solid #CCC;
}
#open-image>span{
    display:inline-block;
    width:50%;
    padding:3px;
    background:#EEE;
    text-align:center;
    font-weight:bold;
    text-transform:uppercase;
    color:#AAA;
    cursor:pointer;
}
#open-image>span:hover{
    background:#DDD;
    color:#333;
}
#open-image>img{
    width:100%;
    height:auto;
}
#map-nav>#movements{
  position:absolute;
  top:5px;
  left:5px;
  height:62px;
  width:62px;
  position:absolute;
  background-color:#CCC;
  border-radius:31px;
}
#movements>.move:hover{
  background-color:white;
}
#movements>.move{
  color:#AAA;
  cursor:pointer;
  width:14px;
  height:14px;
  position:absolute;
  background-color:#eee;
  box-sizing:border-box;
  text-align:center;
  font-weight:bold;
  line-height:14px;
  font-size:8px;
  border-radius:3px;
}
#movements>.move.left{
  top:24px;
  left:4px;
}
#movements>.move.right{
  top:24px;
  right:4px;
}
#movements>.move.up{
  top:4px;
  left:24px;
}
#movements>.move.down{
  bottom:4px;
  left:24px;
}
#scale{
  position:absolute;
  top:100px;
  left:5px;
  width:62px;
  height:130px;
}
#scale .dummy-bar{
  z-index:102;
  position:absolute;
  left:0;
  width:100%;
  cursor:pointer;
}
#scale>.bar{
  background-color:#ccc;
  width:2px;
  position:absolute;
}
#scale>.bar.large{
  width:30px;
  height:2px;
  left:16px;
}
#scale>.bar.small{
  left:21px;
  width:20px;
  height:1px;
}
#scale>.vertical{
  top:0;
  bottom:0;
  left:30px;
}
#scale>.bar.bottom{
  bottom:0;
}
#scale>.bar.bar-1{
  top:33.3%;
}
#scale>.bar.bar-2{
  top:66.6%;
}
#scale>.bar.top{
  top:0;
}
#scale>.bar.bottom{
  bottom:0;
}
#scale>.vertical{
  top:0;
  bottom:0;
  left:30px;
}
#scale>.vertical{
  top:0;
  bottom:0;
  left:30px;
}
#scale #indicator{
  cursor:pointer;
  background-color:blue;
  height:8px;
  width:30px;
  position:absolute;
  top:0;
  left:16px;
}
#viewer img{
  width:100%;
}
#viewer div.tile-container{
  position:absolute;
  top:0;
  left:0;
  width:200%;
  height:200%;
  background-image:url('../img/bg2.jpg');
}
#viewer span.tile{
  position:absolute;
  box-sizing:border-box;
  background-size:cover;
  background-repeat:no-repeat;
}
#viewer span.tile>span.fill{
  z-index:1;
}
#viewer span.tile>span{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
#viewer{
  background-size:cover;
}
div.position-div{
  box-sizing:border-box;
  background-color:rgba(255,255,255,0.5);
  border:1px solid red;
  position:absolute;
  top:0;
  left:0;
}

.bs-callout {
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
}
.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 15px;
}
.bs-callout p {
  margin-top: 0;
  margin-bottom: 5px;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout code {
  border-radius: 3px;
}
.bs-callout+.bs-callout {
  margin-top: -5px;
}
.bs-callout-default {
  border-left-color: #777;
}
.bs-callout-default h4 {
  color: #777;
}
.bs-callout-primary {
  border-left-color: #428bca;
}
.bs-callout-primary h4 {
  color: #428bca;
}
.bs-callout-success {
  border-left-color: #5cb85c;
}
.bs-callout-success h4 {
  color: #5cb85c;
}
.bs-callout-danger {
  border-left-color: #d9534f;
}
.bs-callout-danger h4 {
  color: #d9534f;
}
.bs-callout-warning {
  border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
  color: #f0ad4e;
}
.bs-callout-info {
  border-left-color: #5bc0de;
}
form .rangeSlider{
  min-height:34px;
  padding-top:7px;
}
form .rangeSlider .span-wrapper{
  vertical-align:middle;
}
form .rangeSlider .slider-wrapper .slider{
  width:100%;
}
form .rangeSlider .slider .slider-track-high{
  background-color:#EEE;
}
form .rangeSlider .slider .slider-selection {
  background: #BABABA;
}
form .rangeSlider span{
  display:table;
  margin:0 auto;
  text-align:center;
  padding:3px 10px;
  line-height:100%;
  font-size:14px;
  border-radius:10px;
  background-color:white;
  color:#337ab7;
  border:1px solid #337ab7;
}
form .rangeSlider .slider-handle,.slider-handle.round{
  background-image: -webkit-linear-gradient(top,#6ab8fb  0,#337ab7 100%);    position: absolute;
  width: 20px;
  height: 20px;
  background-color: #337ab7;
  background-image: -webkit-linear-gradient(top,#6ab8fb  0,#337ab7 100%);
  background-image: -o-linear-gradient(top,#6ab8fb  0,#337ab7 100%);
  /* background-image: linear-gradient(to bottom,#6ab8fb  0,#337ab7 100%); */
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6ab8fb ',endColorstr='#ff337ab7',GradientType=0);
  filter: none;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
  border: 0 solid transparent;
}
#status{
  color:#AAA;
}
#status.success{
  color:#3c763d;
}
#status.error{
  color:red;
}