/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */

body {
  color: #34495e;
}
html, button, input, select, textarea, .pure-g [class *="pure-u"] {
  /* Set your content font stack here: */
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

.key-table {
  font-size: 85%;
  border: 0;
}
.key-table td {
  padding: 0.3em 0em 0.3em 1.5em;
  border: 0;
}
.key-table th {
  font-weight: 400;
}
.key-table td:nth-child(even) {
  padding-left: 0.3em;
  /*  border-right:3px double #cbcbcb;*/
}
.key-table td:nth-child(odd) {
  font-weight: 400;
}
.key-table td:last-child {
  /*  border-right:1px solid #cbcbcb;*/
}
.key-table td:first-child {
  padding-left: 0;
  /*  border-right:1px solid #cbcbcb;*/
}
.table-note {
  margin-top: 0.4em;
  font-size: 90%;
}
.table-note:before {
  content: '(';
  font-size: 120%;
}
.table-note:after {
  content: ')';
  font-size: 120%;
}
.info h2 {
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 10px;
  color: rgb(62, 98, 142);
}
.info .usage h2 {}
.info ol, .info ul {
  padding-left: 25px;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #1b98f8;
}
.clearfix:after {
  display: block;
  clear: both;
  content: "";
}
kbd {
  font-size: 90%;
  font-family: "Open Sans", Verdana, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  line-height: 1em;
  display: inline;
  padding: .1em .4em;
  border-radius: 3px;
  background-clip: padding-box;
  border: 1px solid #888;
}
kbd.ctrl{
  padding-left:.3em;
  padding-right:.55em;
}
.gen-button .genericon{
  font-size:22px;
}
.desc-shortcut{
  font-size:90%;
  margin-left:10px;
  font-weight:300;
}
.important {
  color: rgb(240, 112, 90);
}
.important kbd {
  border-color: rgb(240, 112, 90);
}
.ads {
  margin-top: 20px;
  margin-left: -6px;
  margin-right: -10px;
}
html, body {
  width: 100%;
  height: 100%;
}
h1 {
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-top: 5px;
  margin-bottom: 8px;
  user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}
h1 a {
  color: inherit;
}
.credit {
  font-size: 110%;
  margin: 0.2em 0em;
  color: rgb(62, 98, 142);
}
@media screen and (min-width: 64em) {
  .credit {
    text-align: right;
  }
}
label, button.pure-button, select, a.download-button {
  font-family: "Open Sans", sans-serif;
}
button.pure-button, a.download-button {
  font-weight: 800;
}
.wrapper {
  height: 100%;
  width: 100%;
  margin-top: -40px;
}
#controller {
  padding-left: 6px;
  padding-right: 10px;
  background: #fff;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  font-size: 90%;
  font-weight:400;
}
#controller select {
  width: 100%;
}
#controller label{
  font-weight:600;
  margin-top:0.5em;
}
.checkboxes {
  padding-left: 1px;
}
#editor {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 40%;
  border-bottom: dotted 2px #34495e;
}
#main {
  border-left: 1px solid #34495e;
}
#render{
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 60%;
  width: 100%;
}
#imgarea {
  position: absolute;
  top: 32px;
  bottom:0;
  right: 0;
  left: 0;
  width: 100%;
  padding-top:16px;
  overflow: scroll;
}
#imgarea img{
  margin-top:1em;
  margin-left:1em;
}
.pure-form select {
  height: 2em;
  padding: 0;
}
.colorpalette {
  width: 100%;
}
.colorpalette table {
  width: 100%;
  border: 0;
  border-spacing: 0;
}
.colorpalette tr {
  border: 0;
}
.colorpalette td {
  position: relative;
  border: 0;
  padding: 0;
}
.colorpalette td, .colorpalette tr, .change-color {
  height: 18px;
}
.change-color {
  border-left: solid 1px #fff;
  border-bottom: solid 1px #fff;
  padding: 0;
  margin: 0;
  width: 100%;
  cursor: pointer;
}
.change-color:hover::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: -1px;
  margin-right: -1px;
  border: solid 2px;
  z-index: 100;
  content: " ";
}
.change-color.dark-color:hover::before {
  border-color: #fff;
}
.change-color.light-color:hover::before {
  border-color: #000;
}
.header {
  background: #666;
  height: 40px;
}

/*
 * -- HELPER STYLES --
 * Over-riding some of the .pure-button styles to make my buttons look unique
 */

.primary-button, .secondary-button {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 00px;
}
.primary-button {
  color: #fff;
  background: #1b98f8;
}
.secondary-button {
  background: #fff;
  border: 1px solid #666;
  color: #333;
  padding: 0.5em 1em;
  font-size: 80%;
}
.gen-button {
  width: 100%;
  margin-bottom: 10px;
  margin-top:5px;
}
.gen-button .genericon {}
.download-button {
  padding-left: 1px;
  padding-right: 3px;
  width: 100%;
  font-size: 12px;
}
.download-controls {
  margin-left: -3px;
  margin-right: -3px;
}
.download-col {
  position: relative;
  float: left;
  padding-left: 3px;
  padding-right: 3px;
  width: 33.33333%;
}

.marker{
  background: linear-gradient(transparent 80%, #ff0 0%);  
}
/* Move the layout over so we can fit the nav + list in on the left */

#layout {
  padding-left: 200px;
  /* "left col (nav + list)" width */
  position: relative;
  height: 100%;
}

/* These are position:fixed; elements that will be in the left 500px of the screen */

#controller {
  border-left: #333;
  top: 0;
  bottom: 0;
  overflow: auto;
  margin-left: -200px;
  /* "left col (nav + list)" width */
  width: 200px;
  height: 100%;
}

/* Show the menu items on the larger screen */

.controller-inner {
  display: block;
  padding: 2em 0;
}
.info {}
.info .item {
  padding-left: 10px;
  padding-right: 10px;
  text-align: justify
}
#main {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;
  overflow: auto;
  width: auto;
  /* so that it's not 100% */
  height: 100%;
}

/* This will take up the entire height, and be a little thinner */

#list {
  margin-left: -350px;
  width: 350px;
  height: 100%;
  border-right: 1px solid #ddd;
}
#render-settings{
  padding: 5px 10px;
  background:#ddd;
  height:32px;
}

#render-settings .format-label{
  font-weight: 600;
  display: inline-block;
  color: rgb(62, 98, 142);
  margin-right:10px;
}
#render-settings label{
  margin-right:10px;
}