*, div, p, td, div, h1, h2, h3, input, select, textarea, form, img {
    vertical-align: top;
    border: 0px solid black;
    padding: 0px;
    margin: 0px;
    border-collapse: collapse;
}

body {
    color: #000000;
    background-color: #252f58;
    font-size: 34px;
    font-family: Helvetica, Arial, sans-serif;
    text-align: left;
    overflow: hidden;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
clear {
    display: block;
    clear: both;
}

/* ---- Basic styles ---- */
a { text-decoration: none; color: inherit;}
ul { margin: 0px 0px 0px 20px; }
p { margin-bottom: 10px; }
h1 {
    font-size: 125%;
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: normal;
    text-align: right;
    float: right;
    margin-left: -100%;
}

/* ---- Basic styles ---- */
#container {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#prototype, #layers {
    display: none;
}
#output, #header, #input {
    overflow: hidden;
}
#menu h1 { float: left; font-size: 100%;}
#menu a { float: right; }

#outputContent div {
    display: block;
    border-bottom: 1px solid black;
}
#outputContent div div {
    padding: 0px;
    margin: 0px;
    border-width: 0px;
}
#outputContent div.to {
    text-align: right;
}
.button {
    display: block;
    float: left;
    text-align: center;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#outputContent .button {
    float: none;
    display:inline-block
}
#input table {
    width: 100%;
}
#input .button {
    float: none;
}
.border {
    border: 1px solid black;
}
input {
    font-size: inherit;
    color: inherit;
    display: block;
    width: 100%;
    border: 1px solid black;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
input.colorChoice {
    width: auto;
    display: inline;
}
table.color {
    display: inline;
}
#error {
    position: fixed;
    font-size: 70%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #fee;
    display: none;
}
#error .close {
    background: #fee;
    font-weight: bold;
    text-align: right;
}
#error .content {
    background: white;
    margin: 10px;
    padding: 10px;
    border: solid red 1px;
}
#header, #input {
    padding: 4px;
    color: #f5f5f5;
}
#output {
    background-color: #f5f5f5;
}
#outputContent {
    padding-bottom: 4px;
}
#outputContent div {
    border-color: #dddddd;
    padding: 4px;
    margin: 4px;
}
.fade {
    color: #acacac;
}
.input {
    margin: 4px;
}
input {
    color: #000000;
    background-color: #dddddd;
    border-color: #000000;
    height: 38px;
}
.button {
    color: #252f58;
    background-color: #f5f5f5;
    margin: 4px;
    padding: 0px 8px;
    height: 38px;
    line-height: 38px;
}
.square {
    width: 38px;
}
.button .fa {
    margin-top: 4px;
}
.button:hover {
    background-color: #8d92a7;
}
#header .button {
    position: relative;
}
#outputContent .button {
    color: #f5f5f5;
    background-color: #252f58;
    padding: 4px;
    margin: 4px;
}
#outputContent .button:hover {
    background-color: #8d92a7;
}
table.color td {
    padding: 16px;
}
#header {
    height: 46px;
}
