body {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
}

.tonestack-layout {
    margin: 0 auto;
}

a:visited {

}

a.disabled {
    pointer-events: none;
    cursor: default;
}

.navbar {
    border-bottom: 2px solid #3D9FDE;
    font-size: 13px;
    background-color: white;
}

.navbar a {
    text-decoration: none;
}

.navbar-stack {
    float: left;
}

.navbar-info {
    float: right;
}

.navbar-menu-item {
    margin: 5px;
    color: #999;
}

.navbar-menu-item.disabled {
    color: #000;
}

.navbar-menu-item-icon {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 16px;
    opacity: 0.5;
}

.navbar-menu-item.disabled .navbar-menu-item-icon {
    opacity: 1;
}

.dropdown {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.dropdown button {
    margin: 0;
    padding: 0 2px;
    color: inherit;
    background-color: inherit;
    border: none;
    font-size: 13px;
    font-family: inherit;
}

.dropdown-content {
    position: absolute;
    display: none;
    min-width: 80px;
    background-color: #f1f1f1;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 3;
}

.dropdown-content a {
    display: block;
    padding: 6px 12px;
    color: black;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-content a.disabled {
    color: white;
    background-color: #007dc1;
}

.dropdown:hover {
    color: white;
    background-color: #007dc1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .navbar-menu-item-icon {
    opacity: 1;
    filter: invert(100%);
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 32px;
    height: 22px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    border-radius: 50px;
    overflow: hidden;
    outline: none;
    border: none;
    cursor: pointer;
    background-color: #007dc1;
}

.toggle:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    width: 18px;
    height: 18px;
    background: #fff;
    left: 2px;
    top: 2px;
    border-radius: 50%;
}

.toggle:checked:before {
    left: 12px;
}

.tonestack-info {
    max-width: 1264px;
    padding: 5px;
    border: 1px solid #ddd;
}

.tonestack-image {
    width: 414px;
    padding-top: 5px;
    margin-right: 1px;
    border: 1px solid #ddd;
    vertical-align: top;
    text-align: center;
}

.tonestack-values {
    width: 152px;
    vertical-align: top;
    padding-top: 5px;
    margin: 0 2px 2px 2px;
    border: 1px solid #ddd;
}

.tonestack-values-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.tonestack-value-th-part {
    text-align: left;
    font-size: 12px;
}

.tonestack-value-th-value {
    font-size: 12px;
}

.tonestack-value-th-unit {
    font-size: 12px;
}

.tonestack-value-label {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    font-weight: bold;
}

.tonestack-value-value {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.tonestack-value-input {
    width: 95%;
    text-align: right;
    background-color: white;
}

.tonestack-value-input:read-only {
    background-color: #ebebe4;
}

.tonestack-value-unit {
    text-align: center;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
}

.tonestack-values-button {
    -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    box-shadow:inset 0px 1px 0px 0px #54a3f7;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #08D));
    background:-moz-linear-gradient(top, #007dc1 5%, #08D 100%);
    background:-webkit-linear-gradient(top, #007dc1 5%, #08D 100%);
    background:-o-linear-gradient(top, #007dc1 5%, #08D 100%);
    background:-ms-linear-gradient(top, #007dc1 5%, #08D 100%);
    background:linear-gradient(to bottom, #007dc1 5%, #08D 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#08D',GradientType=0);
    background-color:#007dc1;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    border:1px solid #124d77;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:12px;
    padding:3px 5px;
    text-decoration:none;
    text-shadow:0px 1px 0px #154682;
}

.tonestack-values-buttonhover {
    bbackground:-moz-linear-gradient(top, #08D 5%, #007dc1 100%);
    background:-webkit-linear-gradient(top, #08D 5%, #007dc1 100%);
    background:-o-linear-gradient(top, #08D 5%, #007dc1 100%);
    background:-ms-linear-gradient(top, #08D 5%, #007dc1 100%);
    background:linear-gradient(to bottom, #08D 5%, #007dc1 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#08D', endColorstr='#007dc1',GradientType=0);
    background-color:#08D;
}

.tonestack-values-button:active {
    position:relative;
    top:1px;
}

.tonestack-sliders {
    margin: 2px 2px 0 0;
    border: 1px solid #ddd;
    vertical-align: top;
}

.tonestack-slider-label {
    display: inline-block;
    width: 150px;
    margin: 0;
    text-align: center;
}

.tonestack-slider-input {
    display: inline-block;
    width: 300px;
    margin: 0 auto 0px;
}

.tonestack-slider-value {
    display: inline-block;
    width: 70px;
    margin: 0;
    text-align: center;
}

.tonestack-stats {
    margin: 2px 2px 0 0;
    border: 1px solid #ddd;
    padding: 5px;
}

.tonestack-graph-panel {
    width: 694;
    margin-left:2px;
    border: 1px solid #ddd;
    vertical-align: top;
    text-align: center;
}

.tonestack-bar {
    width: 100%;
    overflow: hidden;
}

.tonestack-graph-toggle {
    float: left;
    padding-left: 4px;
}

.tonestack-graph-button {
    float: right;
    margin-left: 4px;
}

.tonestack-graph-container {
    height: 550px;
    padding: 0 27px;
}

.tonestack-graph {
    display: block;
    height: 480px;
    width: 640px;
}

.tonestack-graph.hidden {
    display: none;
}

.tonestack-graph-value {
    width: 640px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
}

.tonestack-graph-line {

}

.tonestack-graph-axis {

}


.tonestack-select-pot {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    border: none;
    border-radius: 1px;
    background-color: #FFFFFF;
}