/* Copyright Arctus Limited 2018.
// Commercial Re-use Prohibited.
//
// Created by @adrianoconnor */

body { 
  background:black; 
  color:white; 
  margin:8px; 
  padding:0;
  font-family: 'Source Sans Pro', sans-serif;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

canvas#paintCanvas {
  position:fixed;
}

h5 { 
  position:fixed;
  top:5px; 
  left:8px; 
  padding:0; 
  margin:0; 
  font-size:18px; 
}

.version_no { 
  position:fixed; 
  bottom:0px; 
  right:105px; 
  font-size:8pt; 
  color:rgba(250,250,250,0.4);
}

#resize_warning {
  position:fixed; 
  bottom:5px; 
  left:10px; 
  font-size:11pt; 
  color:rgba(250,250,250,0.9);
  padding:3px 6px;
  border:solid 1px rgba(250,250,250,0.75);
  background-color:rgba(0,0,0,0.5);
}

.toolbar { 
  position:absolute; width:78px; 
  right:10px; 
  top:20px;
  margin-left:8px;
}
.label { padding:9px 0px 4px 0px; color:#aad !important; font-size:8pt; }

.colour-button { 
  position:relative; 
  width:32px; 
  height:32px; 
  margin-bottom:0px; 
  margin-left:1px;  
  border:solid 1px black;
  border-radius:2px;
}

.colour-button.red { background-color:rgba(255,0,0,1.0); }
.colour-button.pink { background-color:rgba(255,0,200,1.0); }
.colour-button.purple { background-color:rgba(200,0,255,1.0); }
.colour-button.blue { background-color:rgba(0,0,255,1.0); }
.colour-button.green { background-color:rgba(0,255,0,1.0); }
.colour-button.yellow { background-color:rgba(200,255,0,1.0); }
.colour-button.white { background-color:rgba(255,255,255,1.0); }
.colour-button.black {background-color:rgba(0,0,0,1.0); border-color:#999; }

.colour-button.red:hover { border-color:rgba(255,0,0,1.0); }
.colour-button.pink:hover { border-color:rgba(255,0,200,1.0); }
.colour-button.purple:hover { border-color:rgba(200,0,255,1.0); }
.colour-button.blue:hover { border-color:rgba(0,0,255,1.0); }
.colour-button.green:hover { border-color:rgba(0,255,0,1.0); }
.colour-button.yellow:hover { border-color:rgba(200,255,0,1.0); }
.colour-button.white:hover { border-color:rgba(255,255,255,1.0); }
.colour-button.black:hover {border-color:rgba(0,0,0,1.0); border-color:#999; }

.colour-button.selected { 
  border:solid 2px white !important; 
  margin-left:0px;
}

.colour-button:hover { 
  border-left-width:2px; 
  border-right-width:2px; 
  margin-left:0px;
}

.toolbar_button { 
  position:relative; 
  padding-top:6px; 
  border:solid 1px #336; 
  width:32px; 
  height:24px; 
  margin-bottom:4px; 
  background-color:#000; 
  text-align:center; 
  border-radius:4px;
  font-size:14px;
  cursor:default;
  display:inline-block;
}

.toolbar_button:hover {
  background-color:#558; 
}

.toolbar_button.big {
  width:68px;
}

.toolbar_button.selected { 
  background:#336 !important;
}

#overlay {
  width:100%; 
  height:100%; 
  position:absolute; 
  z-index: 99998; 
  top:0px; 
  left:0px; 
  background:rgba(0, 0, 0, 0.65);
  display:none;
}

.panel {
  border:solid 1px white;
  position:absolute;
  z-index: 99999;
  background:#113456;
  color:rgba(255, 255, 255, 0.75);
}
.welcome_panel {
  width:50%;
  min-width: 250px;
  height:auto;
  z-index: 99999;
  top:25%;
  left:25%; 
}
.tutorial_panel {
  width:300px;
  height:auto;
  z-index: 99999;
  right:130px;
  bottom:100px; 
}

.panel h4 {
  margin:0 0 0.5em 0;
  padding:4px 8px;
  border-bottom:solid 1px #cadeef;
  background:#235689;
  position:relative;
  top:0px;
  left:0px;
  height:20px;
  cursor:default;
}
.panel p {
  margin:0 0 1em 0;
  padding:4px 16px 4px 20px;
  cursor:default;
}
.panel p.no_bottom_margin { margin-bottom:0; }

.panel .close_button {
  display:block;
  position:absolute;
  top:3px;
  right:3px;
  width:20px;
  height:20px;
  border:solid 1px rgba(255, 255, 255, 0.4);
  text-align: center;
  cursor:default;
}

.get_started_button, .get_started_button:visited {
  border-top:solid 1px white;
  border-left:solid 1px white;
  border-bottom:solid 1px #012345;
  border-right:solid 1px #012345;
  color:white;
  padding:8px 12px;
  margin:25px auto 20px auto;
  background:#456789;
  text-decoration: none;
  display:block;
  width:180px;
  text-align:center;
}

.get_started_button:hover {
  color:white;
  background:#56789A;
  text-decoration: underline;
}

.get_started_button:active {
  border-bottom:solid 1px white;
  border-right:solid 1px white;
  border-left:solid 1px #012345;
  border-top:solid 1px #012345;
  color:white;
  background:#456789;
}

.tutorial_ok_button, .tutorial_ok_button:visited {
  border-top:solid 1px white;
  border-left:solid 1px white;
  border-bottom:solid 1px #012345;
  border-right:solid 1px #012345;
  color:white;
  padding:4px 8px;
  margin:0px 10px 5px auto;
  background:#456789;
  text-decoration: none;
  display:block;
  width:40px;
  text-align:center;
}

.tutorial_ok_button:hover {
  color:white;
  background:#56789A;
  text-decoration: underline;
}

.tutorial_ok_button:active {
  border-bottom:solid 1px white;
  border-right:solid 1px white;
  border-left:solid 1px #012345;
  border-top:solid 1px #012345;
  color:white;
  background:#456789;
}