/**
 * Reset ==============================================================
 * Based on http://meyerweb.com/eric/tools/css/reset
 */

html,
body,

/* Structures */
div,
span,
applet,
object,
iframe,

/* Text */
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,

/* Lists */
dl,
dt,
dd,
ol,
ul,
li,

/* Forms */
fieldset,
form,
input,
select,
textarea,
label,
legend,

/* Tables */
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin:0px;
  padding:0px;
  border:0px;
  outline:0px;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  line-height:inherit;
  }

ol,
ul,
.item-list ul,
.item-list ul li {
  list-style:none;
  }

blockquote,
q { quotes:none; }

blockquote:before,
blockquote:after,
q:before, q:after {
  content:'';
  content:none;
  }

/* remember to define focus styles! */
:focus { outline:0px; }

/* remember to highlight inserts somehow! */
ins { text-decoration:none; }
del { text-decoration:line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse:collapse;
  border-spacing:0px;
  }

/**
 * Font reset =========================================================
 *
 * Specifically targets form elements which browsers oftentimes give
 * special treatment.
 */
input,
select,
textarea,
body { font: 12px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; }

/*
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
*/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

@font-face {
  font-family:DroidSans;
  src:url('../fonts/DroidSans.ttf');
  }

@font-face {
  font-family:DroidSans;
  font-weight:bold;
  src:url('../fonts/DroidSansBold.ttf');
  }

@font-face {
  font-family:DroidSansMono;
  src:url('../fonts/DroidSansMono.ttf');
  }


/* It would be great if we could apply this style to selects too, but a bug
   in Safari prevents us unfortunately. See 
   http://redrata.com/2011/07/safari-woff-select-field-crash/ */
input,
textarea,
body { font-family:DroidSans,'Lucida Grande',sans-serif; }

textarea.code,
code,
pre,
div.CodeMirror { font-family:DroidSansMono,monospace; }

p code {
  font-size:12px;
  line-height:20px;
  background:#f0f8fa;
  padding:2px;
}

body {
  background:#eee;
  color:#222;
  }

#page {
  left:60px;
  padding:20px;
  }

.overlay > .mask,
.loading > .mask,
.fill,
.fill-s,
.fill-n,
.fill-w,
.fill-e {
  position:absolute;
  left:0px;
  top:0px;
  bottom:0px;
  right:0px;
  display:block;
  }

body.overlay > .mask,
body.loading > .mask { position:fixed; }

.fill-s { top:auto; }
.fill-n { bottom:auto; }
.fill-w { right:auto; }
.fill-e { left:auto; }

.scrolling { overflow:auto; }

.warning-red {color:red;}

.warning {
  padding:4px;
  border:1px solid #DC3F19;
  box-shadow:rgba(0,0,0,.1) 0px 1px 3px;
  }

.warning-text {
  color:#DC3F19;
  font-size:11px;
  }

a {
  color:#222;
  text-decoration:none;
  }

h1, h2, h3, h4, h5, h6,
label { font-weight:normal; }
.required { color:#c30; }
.description { color:#999; }
.dependent {display:none; }
.centered { text-align:center; }
small { font-size:11px; }

/**
 * Generic loading, overlay classes
 */
.overlay,
.loading { overflow:hidden; }

.overlay > .mask,
.loading > .mask {
  background:url(../images/mask-0-50.png);
  z-index:100;
  }

.overlay .overlay > .mask,
.loading .loading > .mask,
.overlay .loading > .mask,
.loading .overlay > .mask { background:url(../images/mask-0-25.png); }

.loading:after {
  content:'Loading ...';
  text-indent:-9999px;
  overflow:hidden;
  position:absolute;
  left:50%;
  top:50%;
  margin:-20px 0px 0px -20px;
  width:20px;
  height:20px;
  padding:10px;
  background:#444 url(../images/spinner-reverse.gif) 50% 50% no-repeat;
  z-index:101;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  }

.restartable:after {
  width:100px;
  padding:15px 15px 15px 45px;
  background-position:15px 50%;
  margin:-25px 0px 0px -80px;
  }

.pane > a.restart {
  display:none;
  position:absolute;
  width:100px;
  margin:-15px -70px 0px 0px;
  right:50%;
  top:50%;
  z-index:102;
  }

.restartable > a.restart { display:block; }

/**
 * Pagewide modal messages
 */
#modal {
  display:none;
  position:fixed;
  left:50%;
  top:50%;
  background:url(../images/mask-48-90.png);
  color:#ccc;
  width:480px;
  margin:-120px 0px 0px -240px;
  z-index:102;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  }

#modal.active { display:block; }

#modal a { color:#fff; }

#modal a.close {
  top:10px;
  right:10px;
  position:absolute;
  }

#modal .content {
  padding:20px;
  font-size:16px;
  overflow:hidden;
  color:#fff;
  }

#modal .content pre {
  font-size:13px;
  max-height:250px;
  padding-right:20px;
  white-space:pre;
  /* http://labnol.blogspot.com/2006/10/html-css-trick-for-displaying-code.html */
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  max-height:300px;
  overflow-y: auto;
  }

#modal .bug {
  border-top:1px solid #666;
  padding:4px 10px 5px;
  text-align:right;
  }

#modal .buttons {
  border-top:1px solid #666;
  padding:9px 10px 10px;
  text-align:center;
  }

#modal .buttons input {
  background:#222;
  color:#fff;
  border-color:#666;
  line-height:30px;
  height:30px;
  margin:0px 5px;
  width:80px;
  text-align:center;
  font-size:16px;
  box-shadow:none;
  }

#modal .buttons input:active {
  box-shadow:inset #666 0px 0px 5px;
  background:#444;
  }

/**
 * Sliding panes
 */
#popup {
  position:fixed;
  bottom:-100%;
  left:50%;
  margin-left:-361px;
  width:720px;
  height:90%;
  z-index:102;
  border:1px solid #666;
  border-bottom:0px;
  border-radius:5px 5px 0px 0px;
  -moz-border-radius:5px 5px 0px 0px;
  -webkit-border-radius:5px 5px 0px 0px;
  transition:bottom .25s;
  -moz-transition:bottom .25s;
  -webkit-transition:bottom .25s;
  }

#popup.active { bottom:0%; }
#modal.active + #popup {
  z-index:99;
  border-color:#ccc;
  }

#drawer {
  position:absolute;
  left:0px;
  top:0px;
  bottom:0px;
  right:50%;
  z-index:-1;
  opacity:0;
  overflow:hidden;
  width:auto;
  margin:10px;
  transition:z-index 100ms, opacity 100ms;
  -moz-transition:z-index 100ms, opacity 100ms;
  -webkit-transition:z-index 100ms, opacity 100ms;
  }

#drawer.active {
  z-index:102;
  opacity:1;
  }

#drawer.mini {
  top:auto;
  right:auto;
  min-width:280px;
  }

#drawer.mini > .content {
  position:relative;
  overflow:visible;
  top:0px;
  padding:0px;
  }

.pane { background:#fff; }

.pane > h2.title {
  height:20px;
  font-size:16px;
  white-space:nowrap;
  padding:10px 10px 9px;
  border-bottom:1px solid #eee;
  }

.pane > a.close {
  position:absolute;
  top:10px;
  right:10px;
  }

.pane > .content { top:40px; }

.pane .pane-actions {
  position:absolute;
  top:-30px;
  right:50px;
  }

/**
 * Header
 */
.bleed {
  position:fixed;
  left:0px;
  top:0px;
  bottom:0px;
  width:60px;
  z-index:11;
  background:#444;
  box-shadow:inset rgba(0,0,0,0.1) -1px 0px;
  }

.bleed a {
  font-weight:bold;
  font-size:10px;
  color:#888;
  text-shadow:rgba(0,0,0,0.5) 0px -1px;
  display:block;
  position:relative;
  width:60px;
  padding:30px 0px 10px;
  height:20px;
  overflow:hidden;
  text-align:center;
  }

.bleed a:hover {
  background:#555;
  box-shadow:inset #444 0px 0px 20px 10px;
  }

.bleed a.active {
  background:#333;
  color:#fff;
  box-shadow:
    inset rgba(0,0,0,0.4) 0px 0px 10px,
    inset rgba(255,255,255,0.2) 0px -1px;
  }

.bleed a.disabled,
.bleed a.disabled:hover {
  color:#666;
  background:transparent;
  box-shadow:none;
  text-shadow:none;
  }
.bleed a.disabled .i30 { opacity:0.2; }

.bleed a .i30 {
  position:absolute;
  left:15px;
  top:5px;
  opacity:0.5;
  }

.bleed a.active .i30 { opacity:1; }

.bleed a small { display:none; }
.bleed a:hover small {
  margin:5px;
  border-radius:3px;
  display:block;
  position:relative;
  z-index:1;
  }

.header {
  padding:10px 10px 10px 15px;
  height:20px;
  }

.header h1 { font-size:16px; }

.header .name { font-size:16px; }

.header .project-status { color: #62A0AF; padding: 10px; font-size:12px; }
.preview_image {
  padding:5px;
  }

.header .spinner {
  position:fixed;
  right:215px;
  top:10px;
  background:url(../images/spinner.gif) no-repeat;
  visibility:hidden;
  }

.saving .header .spinner { visibility:visible; }

.header .actions {
  z-index:2;
  position:fixed;
  top:10px;
  right:10px;
  height:20px;
  }

.button.dropdown {
  width:100px;
  position:relative;
  }

.dropdown .menu {
  display:none;
  position:absolute;
  top:19px;
  left:-1px;
  width:98px;
  background-color:#7c7c7c;
  border:1px solid #666;
  border-top:0px;
  border-radius:0px 0px 3px 3px;
  }

.dropdown:active .menu,
.dropdown.active .menu { display:block; }

.dropdown .menu a {
  display:block;
  padding:0px 10px;
  color:#fff;
  }

.dropdown .menu a.divfloor { border-bottom:1px solid #666; }
.dropdown .menu a.divceil { border-top:1px solid #666; }

.dropdown .menu a:hover { background-color:#666; }

/**
 * Projects
 */
ul.projects { margin:0px -5px; }

.projects span.actions {
  display:block;
  padding:14px 9px;
  height:30px;
  border:1px solid #ccc;
  margin:0px 5px 10px;
  }

.projects a.thumb {
  display:block;
  padding:9px 9px 9px 69px;
  height:40px;
  margin:0px 5px 10px;
  position:relative;
  overflow:hidden;
  }

.projects a.thumb:hover {
  border-color:#6bc;
  box-shadow:
    #8ef 0px 0px 5px,
    rgba(0,0,0,0.1) 0px 1px 3px;
  }

.projects a.thumb .thumb {
  width:50px;
  height:50px;
  left:4px;
  top:4px;
  position:absolute;
  border-radius:2px;
  background:#fff url(../images/bg.png) 100% 0%;
  box-shadow:inset rgba(0,0,0,0.1) 0px 0px 3px 1px;
  }

.projects a.thumb .icon {
  opacity:0.5;
  position:absolute;
  right:9px;
  top:19px;
  }

.projects a.thumb .icon.info {
  top:30px;
}

.projects a.thumb .icon:hover { opacity:1; }

.projects a.thumb small.description {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 20px;
  height: 40px;
}

/**
 * Project
 */
.project .map { background:#fff url(../images/bg.png) 100% 0%; }

.project .map,
.project .workspace {
  top:0px;
  width:50% !important;
  height:auto !important;
  }

.project .workspace { border-left:1px solid #ccc; }

.project.fullscreen .palette { display:none; }
.project.fullscreen .map,
.wax-fullscreen-map {
  position:fixed;
  left:60px;
  right:0px;
  z-index:100;
  width:auto !important;
  }

#map {
  width:auto !important;
  height:auto !important;
  }

/* Metadata mode */
#meta { position:absolute; display:none; z-index:100; }
#meta-map {
  right:320px;
  background:#fff url(../images/bg.png) 100% 0%;
  height:auto !important;
  }

.project.meta > * { display:none; }
.project.meta > #meta { display:block; }

#meta ul {
  width:320px;
  border-left:1px solid #ccc;
  }

#meta ul li {
  padding-left:80px;
  border-color:#ddd;
  }

#meta ul .i40 { position:absolute; right:10px; }

#meta ul li.text { padding-left:20px; }
#meta ul li.buttons { padding-left:20px; }
#meta ul li label { font-size:11px; width:60px; margin-left:-70px; }

#meta .syncHelp { display:block; margin:10px 0px; }


.project.meta .zoomin {
  border-radius:0px 3px 3px 0px;
  -moz-border-radius:0px 3px 3px 0px;
  -webkit-border-radius:0px 3px 3px 0px;
  }

#meta .key {
  padding:2px 8px;
  background:#fff;
  border-color:#ddd #ccc #ccc;
  border-style:solid;
  border-width:2px 2px 4px;
  border-radius:2px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  }

.bboxForm {
  margin:0px 0px 5px;
  height:78px;
  position:relative;
  }

.bboxForm * {
  position:absolute;
  width:60px;
  border:0px;
  font-size:11px;
  background:rgba(255,255,255,0.5);
  box-shadow:none;
  text-align:center;
  }

.bboxForm .n,
.bboxForm .s {
  left:50%;
  margin-left:-30px;
  }

.bboxForm .w,
.bboxForm .e {
  top:50%;
  margin-top:-10px;
  }

.bboxForm .n { top:0%; }
.bboxForm .s { bottom:0%; }
.bboxForm .w { left:0%; }
.bboxForm .e { right:0%; }

.boxselector-box {
  position:absolute;
  box-shadow:
    inset rgba(255,255,255,0.25) 0px 0px 10px,
    rgba(0,0,0,0.5) 0px 0px 0px 2000px;
  }

/* Tooltip container */
.boxselector-instructions-tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.boxselector-instructions-tooltip .tooltiptext {
  visibility: hidden;
  width: 190px;
  background-color: #555;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 5px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 120%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.boxselector-instructions-tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.boxselector-instructions-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Remove this not very helpful instruction which also changes cursor behavior on the box edges.
.boxselector-box:after {
  content:'shift + drag';
  position:absolute;
  right:0px;
  bottom:-20px;
  background:rgba(0,0,0,.75);
  color:#ccc;
  display:block;
  padding:0px 5px;
  font-size:11px;
  white-space:nowrap;
  border-radius:0px 0px 3px 3px;
  }
*/

.wax-point-div {
  text-align:center;
  font-weight:bold;
  line-height:35px;
  font-size:11px;
  background:url(../images/sprite.png) -240px -320px no-repeat;
  margin:-36px 0px 0px -20px;
  width:40px;
  height:40px;
  position:absolute;
  }

/**
 * Layers
 */

ul.layers {
  max-height:500px;
  min-height:500px;
  min-width: 420px;
  }

.layers li {
  position:relative;
  border-bottom:1px solid rgba(0,0,0,0.1);
  padding:5px 130px 4px 30px;
  overflow:hidden;
  white-space:nowrap;
  min-width:260px;
  max-width:260px;
  }

.layers li.status-off { color:#999; }
.layers li.status-off .icon.geometry { opacity:0.5; }
.layers li.status-off .icon.visibility { background-position:-700px -180px; }

.layers .ui-sortable-helper {
  background:#fe8;
  padding-top:4px;
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
  box-shadow:rgba(0,0,0,.1) 0px 1px 3px;
  }

.layers li .icon { background-color:transparent; }
.layers li .punc { color:#999; }

.layers li .handle {
  width:20px;
  cursor:move;
  }

.layers li .handle,
.layers li .actions { padding:5px; }
.layers li .handle .icon,
.layers li .actions .icon { float:left; }
.layers li .actions .icon { opacity:0.5; }
.layers li .actions .icon:hover { opacity:1; }

.layers li .actions {
  display: none;
}


.palette {
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:12;
  width:40px;
  }

.palette a {
  display:block;
  width:20px;
  height:20px;
  padding:10px 10px 9px;
  position:relative;
  background:rgba(48,48,48,0.95);
  border-bottom:1px solid #555;
  }

.palette a:hover { background:rgba(56,56,56,0.95); }
.palette a:first-child { border-radius:3px 0px 0px 0px; }
.palette a:last-child { border-radius:0px 0px 0px 3px; }

.palette a.active:after {
  content:'';
  text-indent:-9999px;
  overflow:hidden;
  position:absolute;
  right:-11px;
  bottom:5px;
  width:20px;
  height:30px;
  background:url(../images/sprite.png) 0px -250px no-repeat;
  }

/* ### Colors ### */
.editor.overlay { overflow:visible; }
.colors {
  height:20px;
  position:absolute;
  left:5px;
  bottom:5px;
  overflow:hidden;
  }

.colors.active,
.colors:hover {
  z-index:101;
  overflow:visible;
  }

.swatch {
  cursor:pointer;
  position:relative;
  background:url(../images/sprite.png) -20px -220px no-repeat;
  width:20px;
  height:20px;
  float:left;
  }

.swatch .color {
  background:#fff url(../images/sprite.png) 0px -220px no-repeat;
  display:block;
  width:20px;
  height:20px;
  }

#colorpicker {
  border-radius:3px;
  background:url(../images/mask-48-90.png);
  color:#ccc;

  cursor:default;
  display:block;
  position:absolute;
  left:-100px;
  bottom:30px;
  width:200px;
  padding:10px;
  z-index:1;
  }

#colorpicker .caret {
  width:30px;
  height:15px;
  background:url(../images/sprite.png) -40px -385px no-repeat;
  position:absolute;
  top:-15px;
  left:50%;
  margin-left:-15px;
  }

#colorpicker .buttons { text-align:center; }

#colorpicker .button {
  background:#222;
  border-color:#666;
  box-shadow:none;
  width:80px;
  }

#colorpicker .button:active {
  box-shadow:inset #666 0px 0px 5px;
  background:#444;
  }

#colorjack_square canvas {
  position:static !important;
  top:auto !important;
  left:auto !important;
  }

#colorjack_square { height:175px !important; }
#colorjack_square br { display:none; }
#colorjack_square .hexBox { display:none; }
#colorjack_square .hexClose { display:none; }
#colorjack_square .hexString { display:none; }

/**
 * Tabs
 */
.tabs-bar .move-button {
  padding: 1px 2px;
  float: left;
  height: 23px;
  margin: 6px 0 0 0;
}

.tabs-bar .add {
  float: right;
  margin-top: 6px;
  margin-right: 5px;
}

.tabs-container {
  overflow: hidden;
  float: left;
}

.tabs {
  white-space: nowrap;
  position:relative;
  height:30px;
  top: 3px;
  }

.tabs li {
  display: inline-block;
  position:relative;
  top: 5px;
  }

.tabs li a.tab {
  position:relative;
  border:1px solid #ccc;
  border-bottom:0px;
  border-radius:3px 3px 0px 0px;
  box-shadow:
    inset rgba(255,255,255,0.4) 0px 0px 0px 1px,
    inset rgba(0,0,0,0.1) 0px -10px 20px -5px,
    rgba(0,0,0,0.1) 0px 1px 2px;

  padding:4px 29px 5px 9px;
  margin:0px 2px 0px 0px;
  background:#eee;
  color:#888;
  }

.tabs li a.tab:hover { background-color:#eee; }

.tabs li a.tab.active {
  background:#fff;
  box-shadow:rgba(0,0,0,0.1) 0px 1px 2px;
  color:#222;
  z-index:1;
  }

.tabs li a.tab.error { background:#fe8; }

.tabs + a.add { margin:5px 3px 0px; }

.tabs li a.icon {
  opacity:0.5;
  position:absolute;
  right:5px;
  top:0px;
  z-index:1;
  }

.tabs li a.icon:hover { opacity:1; }

/* Layer form */
.layer form.active { display:block; }

/* Templates */
form.templates { margin:60px 10px 10px; overflow:hidden; }
form.templates .templates {
  display:none;
  padding:30px 0px 0px;
  bottom:160px;
  }
form.templates .templates.active { display:block; }
form.templates .templates-legend { bottom:0px; }
form.templates .templates input[type=text],
form.templates .templates textarea { width:100%; }
form.templates .templates textarea { height:100%; resize:none; }
form.templates .templates-options {
  display:none;
  background:#fff;
  padding-top:10px;
  }
form.templates .templates-options.active { display:block; }
form.templates .templates-tokens {
  margin:10px 0px;
  height:60px;
  background:#eee;
  font-size:10px;
  }

/**
 * CodeMirror
 */
.editor .code {
  overflow:hidden;
  top:69px;
  bottom:30px;
  background:#fff;
  border-top:1px solid #ccc;
  box-shadow:rgba(0,0,0,.1) 0px 0px 3px;
  }

.editor .CodeMirror,
.editor .CodeMirror-scroll {
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  height:auto!important;
  }

.editor .CodeMirror {
  background:#fff;
  z-index:-1;
  }

.editor .CodeMirror.active { z-index:0; }

.editor .status {
  background:#fe8;
  border-top:1px solid #ccc;
  padding:9px 60px 10px 10px;
  display:none;
  }

.editor .status.active { display:block; }
.editor .status a.close {
  position:absolute;
  right:10px;
  top:10px;
  }

/**
 * Icons
 */
.icon {
  display:block;
  padding:0px;
  width:20px;
  height:20px;
  text-indent:-9999px;
  background:transparent url(../images/sprite.png) 20px 20px no-repeat;
  }

a:hover .icon,
li:hover .icon { display:block; }

.button .icon,
.button:hover .icon {
  float:left;
  display:block;
  margin:-1px -5px;
  background-color:transparent;
  }

.button .icon.labeled,
.button:hover .icon.labeled { margin-right:5px; }

.button .icon.right,
.button:hover .icon.right {
  float:right;
  margin:-1px -10px -1px 0px;
  }

.icon.left {
  float:left;
  }

.icon.right {
  float:right;
  }

.icon.edit           { background-position:0px -180px; }
.icon.extent         { background-position:-20px -180px; }
.icon.delete         { background-position:-60px -180px; }
.icon.visibility     { background-position:-640px -180px; }
.icon.color-picker   { background-position:-40px -180px; }
.icon.close          { background-position:-80px -180px; }
.icon.fonts          { background-position:-100px -180px; }
.icon.legend         { background-position:-280px -180px; }
.icon.prev           { background-position:-140px -180px; }
.icon.next           { background-position:-160px -180px; }
.icon.add            { background-position:-180px -180px; }
.icon.plus           { background-position:-180px -180px; }
.icon.export         { background-position:-420px -180px; }
.icon.reference      { background-position:-320px -180px;}
.icon.dropdown       { background-position:-300px -180px; }
.icon.settings       { background-position:-260px -180px; }
.icon.folder         { background-position:-340px -180px;}
.icon.minus          { background-position:-380px -180px; }
.icon.info           { background-position:-400px -180px; }
.icon.geometry-linestring { background-position:-200px -180px; }
.icon.geometry-point      { background-position:-220px -180px; }
.icon.geometry-polygon    { background-position:-240px -180px; }
.icon.geometry-multilinestring { background-position:-200px -180px; }
.icon.geometry-multipoint      { background-position:-220px -180px; }
.icon.geometry-multipolygon    { background-position:-240px -180px; }
.icon.geometry-raster     { background-position:-360px -180px; }
.icon.layers            { background-position:-520px -180px; }
.icon.file              { background-position:-540px -180px; }
.icon.postgis           { background-position:-660px -180px; }
.icon.sqlite            { background-position:-560px -180px; }
.icon.tooltip           { background-position:-580px -180px; }
.icon.star              { background-position:-600px -180px; }
.icon.cloud             { background-position:-620px -180px; }
.icon.eye               { background-position:-640px -180px; }
.icon.upload            { background-position:-680px -180px; }
.icon.inspect           { background-position:-720px -180px; }

.reverse.edit           { background-position:0px -200px; }
.reverse.inspect        { background-position:-20px -200px; }
.reverse.delete         { background-position:-60px -200px; }
.reverse.color-picker   { background-position:-40px -200px; }
.reverse.close          { background-position:-80px -200px; }
.reverse.fonts          { background-position:-100px -200px; }
.reverse.legend         { background-position:-280px -200px; }
.reverse.prev           { background-position:-140px -200px; }
.reverse.next           { background-position:-160px -200px; }
.reverse.add            { background-position:-180px -200px; }
.reverse.plus           { background-position:-180px -200px; }
.reverse.export         { background-position:-420px -200px; }
.reverse.reference      { background-position: -320px -200px;}
.reverse.dropdown       { background-position:-300px -200px; }
.reverse.settings       { background-position:-260px -200px; }
.reverse.folder         { background-position:-340px -200px;}
.reverse.minus          { background-position:-380px -200px; }
.reverse.info           { background-position:-400px -200px; }
.reverse.geometry-linestring { background-position:-200px -200px; }
.reverse.geometry-point      { background-position:-220px -200px; }
.reverse.geometry-polygon    { background-position:-240px -200px; }
.reverse.geometry-multilinestring { background-position:-200px -200px; }
.reverse.geometry-multipoint      { background-position:-220px -200px; }
.reverse.geometry-multipolygon    { background-position:-240px -200px; }
.reverse.geometry-raster     { background-position:-360px -200px; }
.reverse.layers         { background-position:-520px -200px; }
.reverse.file           { background-position:-540px -200px; }
.reverse.postgis        { background-position:-660px -200px; }
.reverse.sqlite         { background-position:-560px -200px; }
.reverse.tooltip        { background-position:-580px -200px; }
.reverse.star           { background-position:-600px -200px; }
.reverse.cloud          { background-position:-620px -200px; }
.reverse.eye            { background-position:-640px -200px; }
.reverse.upload         { background-position:-680px -200px; }

/* Export status icons */
.icon.processing { background-position:-40px -220px; }
.icon.complete   { background-position:-60px -220px; }
.icon.error      { background-position:-80px -220px; }
.icon.waiting    { background-position:-100px -220px; }
.i40 .icon  { margin-top:20px; }

/* Favorite */
.icon.favorite   { background-position:-140px -220px; }
.icon.favorite.active { background-position:-120px -220px; }

.icon.i30 {
  width:30px;
  height:30px;
  background-position:30px 30px;
  }

.i30.editor   { background-position:0px 0px; }
.i30.projects { background-position:-30px 0px; }
.i30.manual   { background-position:-60px 0px; }
.i30.settings { background-position:-90px 0px; }
.i30.plugins  { background-position:-120px 0px; }

.icon.i40 {
  width:40px;
  height:40px;
  background-position:40px 40px;
  }

.i40.png     { background-position:0px -320px; }
.i40.jpeg    { background-position:0px -320px; }
.i40.tiff    { background-position:0px -320px; }
.i40.webp    { background-position:0px -320px; }
.i40.svg     { background-position:-40px -320px; }
.i40.pdf     { background-position:-40px -320px; }
.i40.mbtiles { background-position:-80px -320px; }
.i40.zip     { background-position:-120px -320px; }
.i40.upload  { background-position:-200px -320px; }
.i40.sync    { background-position:-200px -320px; }
.i40.center  { background-position:-240px -320px; }
.i40.bounds  { background-position:-280px -320px; }

/**
 * Form elements
 */
select,
input[type=text],
textarea {
  line-height:18px;
  height:20px;
  background:#f8f8f8;
  border:1px solid #ccc;
  border-color:#ccc #ddd #ddd;
  padding:0px 2px;
  box-shadow:inset #ddd 0px 2px 3px;
  -moz-box-shadow:inset #ddd 0px 2px 3px;
  -webkit-box-shadow:inset #ddd 0px 2px 3px;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  }

input[type=text].stretch,
textarea.stretch,
select.stretch { width:100%; }

textarea {
  height:auto;
  resize:vertical;
  }

.badge,
.button,
input[type=button],
input[type=submit] {
  font-size:11px;
  border:1px solid #888;
  line-height:20px;
  height:20px;
  cursor:pointer;
  padding:0px 10px;
  background:#999;
  box-shadow:
    inset rgba(255,255,255,0.1) 0px 0px 0px 1px,
    inset rgba(255,255,255,0.2) 0px 10px 20px -5px,
    inset rgba(255,255,255,0.3) 0px 1px 0px,
    rgba(255,255,255,0.5) 0px 1px 0px,
    rgba(0,0,0,0.05) 0px 2px 1px;
  color:#fff;
  border-radius:3px;
  display:inline-block;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  }

.badge {
  cursor:default;
  box-shadow:none;
  color:#888;
  background:#eee;
  border-color:#ddd;
  }

.button:hover,
input[type=button]:hover,
input[type=submit]:hover {
  background-color:#6bc;
  border-color:#59a;
  }

.button.disabled,
input[type=button].disabled,
input[type=submit].disabled,
.button.disabled:active,
input[type=button].disabled:active,
input[type=submit].disabled:active {
  background:#ccc;
  border-color:#bbb;
  }

.button:active,
.button.active,
input[type=button]:active,
input[type=submit]:active {
  background-color:#378;
  border-color:#267;
  box-shadow:
    inset rgba(0,0,0,0.5) 0px 1px 3px,
    inset rgba(255,255,255,0.2) 0px 10px 20px -5px;
  }

input.cancel,
input.cancel:hover {
  background:#fff;
  color:#666;
  border-color:#ccc;
  }

#popup input.cancel,
#drawer input.cancel { background:#eee; }

input.cancel:active {
  background:#ddd;
  border-color:#999;
  }

.button.destructive,
.button.restart {
  background-color:#a22;
  border-color:#822;
  }

.button.destructive:active,
.button.destructive.active,
.button.restart:active,
.button.restart.active {
  background-color:#822;
  border-color:#711;
  }

/* Joined buttons */
.joined > * {
  float:left;
  border-radius:0px;
  border-right-width:0px;
  }

.joined > *:first-child { border-radius:3px 0px 0px 3px; }
.joined > *:last-child {
  border-right-width:1px;
  border-radius:0px 3px 3px 0px;
  }
.joined > *:only-child { border-radius:3px; }

.pill {
  white-space:nowrap;
  padding:10px 10px 9px;
  border-bottom:1px solid #eee;
  background:#f4f4f4;
  }

.sunken .pill { background:transparent; }

.pill .button {
  float:none;
  width:100px;
  margin-left:0px !important;
  margin-right:0px !important;
  display:inline-block !important;
  text-align:left !important;
  }

/* Forms */
ul.form h2 { font-size:16px; }

ul.form li {
  padding:10px 20px 9px 120px;
  border-bottom:1px solid #eee;
  background:#fff;
  transition:padding .1s, height .1s;
  -moz-transition:padding .1s, height .1s;
  -webkit-transition:padding .1s, height .1s;
  }

ul.form li.text,
ul.form li.buttons { padding-left:20px; }

ul.form li .inline {
  vertical-align:top;
  display:inline-block;
  }

ul.form li label {
  float:left;
  width:100px;
  margin-left:-110px;
  text-align:right;
  white-space:nowrap;
  }

ul.form .buttons { text-align:center; }

.button.large,
ul.form .buttons .button,
ul.form .buttons input {
  display:inline-block;
  padding-top:4px;
  padding-bottom:4px;
  height:30px;
  margin:0px 5px;
  min-width:100px;
  text-align:center;
  font-size:13px;
  }

ul.form small.description { display:block; }
ul.form select + span.description,
ul.form input + span.description { margin-left:10px; }
ul.form select { width: 200px; }

#page ul.form li { background:transparent; }

/* Progress bar */
.progress,
.progress .bar {
  height:10px;
  padding:0px;
  }

.progress {
  background:#ddd;
  position:relative;
  max-width:200px;
  margin:5px 0px;
  }

.progress .bar {
  background:#6bc;
  position:absolute;
  }

.progress,
.progress .bar {
  border-radius:3px;
  box-shadow:
    inset rgba(0,0,0,0.2) 0px 0px 0px 1px,
    inset rgba(0,0,0,0.2) 0px 1px 3px,
    inset rgba(255,255,255,0.5) 0px 10px 20px -10px;
  }

/* Slider widget */
.ui-slider,
.ui-slider:before,
.ui-slider-handle,
.ui-slider-range {
  height:16px;
  padding:0px;
  }

.ui-slider {
  position:relative;
  max-width:200px;
  margin:2px 20px;
  }

.ui-slider:before,
.ui-slider-range {
  border-radius:3px;
  box-shadow:
    inset rgba(0,0,0,0.2) 0px 0px 0px 1px,
    inset rgba(0,0,0,0.2) 0px 1px 3px,
    inset rgba(255,255,255,0.5) 0px 10px 20px -10px;
  }

.ui-slider-range {
  background:#6bc;
  position:absolute;
  }

.ui-slider:before {
  content:'';
  text-indent:-9999px;
  overflow:hidden;
  position:absolute;
  left:-20px;
  right:-20px;
  top:0px;
  bottom:0px;
  background:#eee;
  display:block;
  }

.ui-slider-handle {
  width:40px;
  color:#fff;
  font-size:10px;
  line-height:16px;
  text-shadow:rgba(0,0,0,0.5) 0px 1px;
  text-align:center;
  background:#666;
  box-shadow:
    inset rgba(0,0,0,0.2) 0px 0px 0px 1px,
    inset rgba(255,255,255,0.5) 0px 4px 8px -4px;
  border-radius:3px;
  position:absolute;
  top:0px;
  }

.ui-slider-range,
.ui-slider-range-min { left:-20px; padding-right:20px; }
.ui-slider-handle:first-of-type,
.ui-slider-handle:last-of-type { margin-left:-20px; }

/* Small variant */
.ui-slider.small { margin:2px 10px; }
.ui-slider.small:before { left:-10px; right:-10px; }
.small .ui-slider-range,
.small .ui-slider-range-min { left:-10px; padding-right:10px; }
.small .ui-slider-handle { width:20px; }
.small .ui-slider-handle:first-of-type,
.small .ui-slider-handle:last-of-type { margin-left:-10px; }

/* Libraries */
ul.form a.icon.favorite {
  display:inline-block;
  margin-left:-25px;
  }

ul.form .cache.hidden { visibility:hidden; }
ul.form .sublayer.hidden { visibility:hidden;display:none; }
ul.form a.icon.favorite.hidden { visibility:hidden; }

ul.form.expand li {
  visibility:hidden;
  overflow:hidden;
  height:0px;
  padding-top:0px;
  padding-bottom:0px;
  border:0px;
  }

ul.form.expand li.expand {
  visibility:visible;
  overflow:visible;
  height:auto;
  padding-top:10px;
  padding-bottom:9px;
  border-bottom:1px solid #eee;
  }

ul.form .browser {
  display:none;
  top:110px;
  border-radius:0px;
  -moz-border-radius:0px;
  -webkit-border-radius:0px;
  }

ul.form.expand .browser { display:block; }

.library .breadcrumb {
  position:absolute;
  top:40px;
  left:10px;
  }

.library .breadcrumb * {
  float:left;
  padding:5px;
  }

.library .breadcrumb a:active { color:#000; }

.library .assets {
  top:70px;
  padding:0px 10px 10px;
  }

.library .assets a,
.library .assets div.description {
  display:block;
  padding:5px 10px 4px 30px;
  margin:0px 0px 1px;
  background:#eee;
  position:relative;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  }

.library .assets a:active { background:#ccc; }

.library .assets div.description {
  padding-left:10px;
  text-align:center;
  }

.library .assets a .icon {
  position:absolute;
  top:5px;
  left:5px;
  }

.library .assets a .icon.folder { opacity:.5; }

.library .assets a.with-size {
  padding-right: 100px;
  }

.library .assets a .size {
  position:absolute;
  top:5px;
  right:5px;
  }

/* Carto reference */
.reference .page,
.fonts .page {
  left:110px;
  padding:10px;
  }

.reference .section { display:none; }
.reference .section.active { display:block; }

.reference ul li {
  border-top:1px solid #eee;
  padding:9px 0px 10px;
  }

.reference .types .type {
  display:inline-block;
  padding:0px 5px;
  background:#fe8;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  }

/* Features inspection table */
table {
  font-size:11px;
  width:100%;
  }

td,
th {
  border-collapse:collapse;
  padding:0px 10px;
  width:25%;
  overflow:hidden;
  white-space:nowrap;
  }

td { border:1px solid #eee; }

tr.min td,
tr.max td,
tr.min:hover td,
tr.max:hover td {
  color:#222;
  background:#eee;
  border-color:#ddd;
  }

td.Number {
  color:#393;
  text-align:right;
  }

th.header { cursor:pointer; }

.features .description,
.features .buttons {
  text-align:center;
  padding:10px;
  }

/* Font reference */
div.fonts {
  padding:0px 0px 0px 80px;
  overflow:hidden;
  }

.fonts .navigation { text-align:center; }
.fonts .navigation .col { float:left; width:50px; }
.fonts .navigation .col-1 { width:49px; margin-right:1px; }

.fonts .font {
  display:none;
  position:relative;
  padding:5px 10px 4px;
  border-bottom:1px solid #eee;
  overflow:hidden;
  height:20px;
  }

.fonts .font.active { display:block; }

/* Unstyle font selection inputs */
.fonts .font input {
  cursor:pointer;
  display:block;
  border:0px;
  padding:0px;
  width:100%;
  background:transparent;
  box-shadow:none;
  text-indent:0px;
  }

.fonts .font .description {
  visibility:hidden;
  position:absolute;
  text-align:right;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  padding:5px 10px 4px;
  }

.fonts .font.insert .description { visibility:visible; }

/* Exports */
.exports li {
  position:relative;
  padding:5px 10px 4px 50px;
  border-bottom:1px solid #eee;
  }

.exports li.complete,
.exports li.error {
  /*color:#999; Make export filename standout more */
  background:#f8f8f8;
  height: 40px;
  }

.exports .i40 {
  position:absolute;
  left:5px;
  top:5px;
  }

.exports .status,
.exports .description { font-size:11px; }

.exports .status {
  position:absolute;
  right:30px;
  top:15px;
  }

.exports .waiting .status,
.exports .processing .status {
  text-align:right;
  top:5px;
  }

.exports .delete {
  opacity:0.5;
  position:absolute;
  right:5px;
  top:15px;
  }

.exports li:hover .delete { opacity:1; }

.progress {
  margin-left:0px;
  margin-right:0px;
  width:120px;
  }

/* Exports preview */
.preview .button { vertical-align:middle; }
#preview {
  background:#eee url(../images/bg.png) 0% 0% repeat;
  border:1px solid #ccc;
  margin:70px 20px 20px;
  width:auto !important;
  height:auto !important;
  }

/* Error page */
.empty {
  text-align:center;
  font-size:20px;
  padding:40px 20px;
  max-width:680px;
  margin:0px auto;
  }

li .empty {
  padding:10px;
  font-size:13px;
  }

/* Hover */
tr:hover td,
tr:hover th,
.fonts .font:hover {
  background-color:#f0f8fa;
  border-color:#e0e8ea;
  }

/* Manual */
.prose a { color:#5ab; }

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-weight:bold;
  font-size:16px;
  margin:0px 0px 20px;
  }

.prose ol,
.prose ul,
.prose pre,
.prose img,
.prose .CodeMirror,
.prose p { margin:0px 0px 20px; }

.prose .CodeMirror-scroll { height:auto; }
.prose .CodeMirror-lines { padding:0px 0px 0px 20px; }
.prose pre { padding:0px 0px 0px 20px; }

.prose img {
  box-shadow:#ddd 0px 2px 5px;
  -moz-box-shadow:#ddd 0px 2px 5px;
  -webkit-box-shadow:#ddd 0px 2px 5px;
  }

div.manual { margin-right:180px; }

.manual .navigation {
  right:20px;
  position:fixed;
  width:170px;
  padding:10px 0px;
  }

.manual pre { font-size:13px; }

.manual .md { max-width:600px; padding:20px; }

.manual .md ul ul { margin:0px; }

.manual .md h2 { font-size:16px; }
.manual .md h3 { font-size:14px; }
.manual .md h4 { font-size:13px; }

.manual .md ul li { padding-left:20px; }
.manual .md ol li {
  list-style-type:decimal;
  margin-left:20px;
  }

/* About */
.about {
  background:#ddd url(/assets/tilemill/images/tilemill.png) 20px 50% no-repeat;
  margin:0px 0px 10px;
  padding:19px 19px 19px 79px;
  }

.about h2 { font-size:16px; }

.sunken {
  background-color:#ddd;
  border:1px solid #ccc;
  box-shadow:
    inset rgba(0,0,0,0.1) 0px 1px 3px,
    rgba(255,255,255,1) 0px 1px;
  border-radius:3px;
  }

.sunken .sunken {
  background-color:#eee;
  box-shadow:
    inset rgba(255,255,255,1) 0px 1px,
    rgba(255,255,255,1) 0px 1px;
  }

.raised {
  border:1px solid #ccc;
  background:#fff;
  border-radius:3px;
  box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
  }

/* ### Navigation */
.navigation span { color:#aaa; }

.navigation span,
.navigation a {
  background:#eee;
  display:block;
  padding:2px 10px;
  margin:0px 0px 1px;
  border-radius:3px;
  }

.navigation a:hover { background:#ddd; }

.navigation a.active {
  background:#6bc;
  color:#fff;
  box-shadow:
    rgba(255,255,255,1) 0px 1px,
    inset rgba(0,0,0,0.5) 0px 1px 3px,
    inset rgba(255,255,255,0.2) 0px 10px 20px -5px;
  }

.pane .navigation {
  position:absolute;
  left:10px;
  top:10px;
  font-size:11px;
  width:100px;
  border-radius:3px;
  }

.pane .navigation a,
.pane .navigation span { border-radius:0px; }
.pane .navigation a:first-child { border-radius:3px 3px 0px 0px; }
.pane .navigation a:last-child { border-radius:0px 0px 3px 3px; }
.pane .navigation .col *:first-child { border-radius:0px; }
.pane .navigation .col *:last-child { border-radius:0px 0px 3px 0px; }
.pane .navigation .col-1 *:last-child { border-radius:0px 0px 0px 3px; }

.manual .navigation a { padding:5px 10px; }

/* Plugins */
ul.form.sunken { margin:0px 0px 10px; }
ul.form li.plugins { border:0px; padding:0px; }
ul.form li.plugins ul { min-height:80px; padding:9px 4px 0px; }
ul.form li.plugins .empty { padding:34px 0px 35px; }
ul.form.installed,
ul.form.available { position:relative; }

.plugin {
  margin:0px 5px 10px;
  padding:9px 19px;
  position:relative;
  }

.plugin .description { display:block; }

.plugin .actions {
  position:absolute;
  right:9px;
  top:9px;
  }

.plugin .error { color:#c33; }

/* Grid list */
ul.grid li {
  float:left;
  padding:0px;
  border:0px;
  width:50%;
  transition:width 200ms;
  -moz-transition:width 200ms;
  -webkit-transition:width 200ms;
  }

@media (max-width:600px) { ul.grid li { width:100%; } }
@media (min-width:1000px) { ul.grid li { width:33.33%; } }
@media (min-width:1400px) { ul.grid li { width:25%; } }

/* Screen-size adjustments */
@media (min-width:1300px) {
  #drawer { right:45%; }
  .project .map { width:55% !important; }
  .project .workspace { width:45% !important; }
  .wax-fullscreen-view .project .map { width:auto !important; }
}
@media (min-width:1400px) {
  #drawer { right:40%; }
  .project .map { width:60% !important; }
  .project .workspace { width:40% !important; }
  .wax-fullscreen-view .project .map { width:auto !important; }
}

/* Fix for sprite-clipping fail in webkit : | */
.exports .status a,
.features .buttons a,
.pane .pane-actions a { position:relative; }

/* Swap retina graphics */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5) {

  .icon,
  .wax-point-div,
  .swatch,
  .swatch .color,
  #colorpicker .caret,
  .palette a.active:after {
    background-image:url(../images/sprite_2x.png);
    background-size: 800px 480px;
  }

  .about {
    background-image:url(/assets/tilemill/images/tilemill_2x.png);
    background-size: 40px 45px;
  }

  .loading:after {
    background-image:url(../images/spinner-reverse_2x.gif);
    background-size: 20px 20px;
  }

  .header .spinner {
    background-image:url(../images/spinner_2x.gif);
    background-size: 20px 20px;
  }
}

.wax-legends,
.wax-tooltip {
  position:absolute;
  z-index:9;
  right:10px;
  }

.wax-legends { bottom:10px; }
.wax-tooltip { top:10px; }

.wax-legend,
.wax-tooltip {
  font:normal 13px/20px Arial,sans-serif;
  color:#222;
  min-width:100px;
  max-width:280px;
  max-height:400px;
  padding:4px 9px;
  border:1px solid #ccc;
  background:transparent url(../images/mask.png) repeat;
  overflow:auto;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
  -moz-box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
  -webkit-box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
  }

.wax-tooltip .close,
.wax-fullscreen,
.zoomer {
  text-indent:-9999px;
  overflow:hidden;
  display:block;
  position:absolute;
  border:1px solid #ccc;
  text-indent:-9999px;
  overflow:hidden;
  }

.wax-tooltip .close:active,
.wax-fullscreen:active,
.zoomer:active {
  margin-top:1px;
  border-color:#bbb;
  background-color:#ddd;
  box-shadow:inset rgba(0,0,0,0.1) 0px 1px 3px;
  -moz-box-shadow:inset rgba(0,0,0,0.1) 0px 1px 3px;
  -webkit-box-shadow:inset rgba(0,0,0,0.1) 0px 1px 3px;
  }

.wax-tooltip .close {
  top:4px;
  right:4px;
  width:18px;
  height:18px;
  background:#fff url(../images/controls.png) -6px -6px no-repeat;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  }

.wax-fullscreen,
.zoomer {
  left:10px;
  top:10px;
  z-index:2;
  width:28px;
  height:28px;
  background:#fff url(../images/controls.png) 30px 30px no-repeat;
  box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
  -moz-box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
  -webkit-box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
  }


@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5) {
    .wax-tooltip .close,
    .wax-fullscreen,
    .zoomer {
      background-image:url(../images/controls_2x.png);
      background-size: 120px 30px;
    }
}

.zoomout {
  background-position:-61px -1px;
  border-radius:3px 0px 0px 3px;
  -moz-border-radius:3px 0px 0px 3px;
  -webkit-border-radius:3px 0px 0px 3px;
  }

.zoomin {
  background-position:-31px -1px;
  left:39px;
  }

.wax-fullscreen {
  left:68px;
  background-position:-91px -1px;
  border-radius:0px 3px 3px 0px;
  -moz-border-radius:0px 3px 3px 0px;
  -webkit-border-radius:0px 3px 3px 0px;
  }

.zoombox-box {
  margin:0;
  padding:0;
  border:1px dashed #888;
  background:url(../images/mask-0-25.png);
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  display: none;
  }

.zoombox-box-container,
.pointselector-box-container {
  margin:0;
  padding:0;
  position:absolute;
  background: url(blank.gif);
  top:0;
  left:0;
  }

.zoom-display {
  width:88px;
  background:url(../images/mask-48-90.png);
  position:absolute;
  left:10px;
  top:35px;
  padding:5px 0px 0px;
  text-align:center;
  color:#fff;
  z-index:1;
  font-size:11px;
  text-transform:uppercase;
  border-radius:0px 0px 3px 3px;
  -moz-border-radius:0px 0px 3px 3px;
  -webkit-border-radius:0px 0px 3px 3px;
  box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
  }

  .maplayer-selection {
    position: absolute;
    top: 44px;
    z-index: 101;
    left: 10px;
    box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
    height:22px;
    width: 120px;
    border: 1px solid #ccc;
  }


/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: black;
}

/* PADDING */

.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}

.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }

/* CURSOR */

.CodeMirror-cursor {
  border-left: 1px solid black;
  border-right: none;
  width: 0;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0;
  background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}

.cm-animate-fat-cursor {
  width: auto;
  border: 0;
  -webkit-animation: blink 1.06s steps(1) infinite;
  -moz-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
  background-color: #7e7;
}
@-moz-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@-webkit-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}

/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {}

.cm-tab { display: inline-block; text-decoration: inherit; }

.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}

.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3 {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}

.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}

.CodeMirror-composing { border-bottom: 2px solid; }

/* Default styles for common addons */

div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white;
}

.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 30px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -30px; margin-right: -30px;
  padding-bottom: 30px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
}
.CodeMirror-sizer {
  position: relative;
  border-right: 30px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none;
}
.CodeMirror-vscrollbar {
  right: 0; top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.CodeMirror-hscrollbar {
  bottom: 0; left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
  right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
  left: 0; bottom: 0;
}

.CodeMirror-gutters {
  position: absolute; left: 0; top: 0;
  z-index: 3;
}
.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -30px;
  /* Hack to make IE7 behave */
  *zoom:1;
  *display:inline;
}
.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: none !important;
  border: none !important;
}
.CodeMirror-gutter-background {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 4;
}
.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}
.CodeMirror-gutter-wrapper {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.CodeMirror-lines {
  cursor: text;
  min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre {
  /* Reset some styles that the rest of the page might have set */
  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}
.CodeMirror-wrap pre {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  overflow: auto;
}

.CodeMirror-widget {}

.CodeMirror-code {
  outline: none;
}

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.CodeMirror-cursor { position: absolute; }
.CodeMirror-measure pre { position: static; }

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3;
}
div.CodeMirror-dragcursors {
  visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible;
}

.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

.cm-searching {
  background: #ffa;
  background: rgba(255, 255, 0, .4);
}

/* IE7 hack to prevent it from returning funny offsetTops on the spans */
.CodeMirror span { *vertical-align: text-bottom; }

/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}

/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }

@font-face {
  font-family:DroidSansMono;
  src:url('../fonts/DroidSansMono.ttf');
  }

div.CodeMirror {
  height:100%;
  background:#fff;
  color:#222;
  padding:0px;
  margin:0px;
  font:12px/18px DroidSansMono,monospace;
  }

div.CodeMirror-lines,
div.CodeMirror-gutter-text { padding:5px; }

div.CodeMirror .errors, div.CodeMirror .search {
  width: 12px;
}

div.CodeMirror .error-marker {
  background-color: #822;
  width: 8px;
  height: 16px;
  cursor: pointer;
}

div.CodeMirror .search-marker {
  background-color: #009928;
  width: 8px;
  height: 16px;
}

span.cm-carto-variable           { color:#708; }
span.cm-carto-color-variable     { color:#B60049; }
span.cm-carto-unit               { color:#281; }
span.cm-carto-value              { color:#708; }
span.cm-carto-valid-value        { color:#B60049; }
span.cm-carto-selector           { color:#b64f90; }
span.cm-carto-identifier         { color:#999; }
span.cm-carto-valid-identifier   { color:#333; }
span.cm-carto-important          { color:#03c; }
span.cm-carto-colorcode          { color:#048; }
span.cm-carto-punctuation        { color:#666; }
span.cm-carto-comment            { color:#999; }
span.cm-carto-string             { color:#8010a0; }
span.cm-carto-filter             { color:#66475B; }