/* standard reset code */

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style:square; }
q:before, q:after { content:''; }

/* end reset code */

body {
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    display: none;
}

h1 {
    font-size: 2.5em;
    font-weight: bold;
}

.page {
    padding-top: 15px;
    padding-bottom: 1px;
    margin-top: 25px;
    margin-bottom: 25px;
    border-top: dotted 4px #2c7;
    clear: left;
}

#page-0 {
    border-top: 0;
    margin-top: 5px;
}

.left-column {
    float: left;
    width: 0;
    margin-top: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    
    -webkit-transition: all 0.7s ease;
       -moz-transition: all 0.7s ease;
        -ms-transition: all 0.7s ease;
         -o-transition: all 0.7s ease;
            transition: all 0.7s ease;
}

.palettes-found {
}

.successful-keywords {
    font-weight: bold;
}
.palette-list {
    font-size: 1em;
    margin-top: 20px;
}

.palette-container {
    margin-top: 40px;
    cursor: pointer;
}

.palette-container:first-child {
    margin-top: 0px;
}

.palette-container img {
    border: solid 3px #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  
}

.palette-container img.selected {
    border: solid 3px #d37;
}

.palette-container p {
    padding-right: 4px;
}

.palette-title {
    font-weight: bold;
    font-size: 1.1em;
}

.palette-info {
    padding-top: 1px;
}

.palette-description {
    padding-top: 10px;
}

.main-box-wrapper {
    min-width: 730px;
    
    -webkit-transition: margin-left 0.7s ease;
       -moz-transition: margin-left 0.7s ease;
        -ms-transition: margin-left 0.7s ease;
         -o-transition: margin-left 0.7s ease;
            transition: margin-left 0.7s ease;
}

.main-box {
    margin: 0 auto;
    text-align: center;
}

.header {
}

.search-label {
    font-size: 1em;
}
.search-field {
    width: 150px;
}
.status-report {
    color: red;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 20px;
}

.color-panels-container {
}

.current-palette-title {
  font-weight: bold;
}

.current-palette-header {
    margin-top: 15px;
    font-size: 1.2em;
}

.color-panels {
    overflow: hidden;
    margin: auto;
    width: 700px;
}

.color-panel {
    background-color: #486D57;
    width: 90px;
    height: 45px;
    padding: 5px;
    margin: 10px;
    border: solid 10px #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    float: left;
    cursor: pointer;

    -webkit-transition: background-color 0.7s ease;
       -moz-transition: background-color 0.7s ease;
        -ms-transition: background-color 0.7s ease;
         -o-transition: background-color 0.7s ease;
            transition: background-color 0.7s ease;
}

.color-panel.selected {
    border: solid 10px #d37;
}

.canvas-container {
    margin: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.brush-size-label {
    font-size: 0.8em;
}

.clear-canvas, .restore-canvas {
    margin-top: 0px;
    margin-left: 30px;
}

.canvas {
    margin-top: 20px;
    margin-bottom: 10px;
    border: solid #2c7 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}