/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
    display: none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {}

.tabberlive {
    margin-top: 1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav {
    margin: 0;
    padding: 3px 0;
    border-bottom: 1px solid #778;
    font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li {
    list-style: none;
    margin: 0;
    display: inline;
}

ul.tabbernav li a {
    padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #778;
    border-bottom: none;
    background: #DDE;
    text-decoration: none;
}

ul.tabbernav li a:link {
    color: #448;
}

ul.tabbernav li a:visited {
    color: #667;
}

ul.tabbernav li a:hover {
    color: #000;
    background: #AAE;
    border-color: #227;
}

ul.tabbernav li.tabberactive a {
    background-color: #fff;
    border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover {
    color: #000;
    background: white;
    border-bottom: 1px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
    padding: 5px;
    border: none
        /*1px solid #aaa; */
        /* border-top:0; */

        float: left;

    /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

    /* height:200px; */

    /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

    /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
    display: none;
}

.tabberlive .tabbertab h3 {
    display: none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {}

.tabberlive#tab2 {}

.tabberlive#tab2 .tabbertab {
    height: 200px;
    overflow: auto;
}

/* idasu */

* {
    -webkit-appearance: none;
}

.maxw {
    width: 96%;
    max-width: 1000px;
    margin: auto;
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.5);
}

.font {
    font-family: 'Kanit', sans-serif;

}

h1 {
    font-size: 24pt;
    color: #003F72;
}

p {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 12pt;
}

.main {
    margin: 0;
    padding: 15px 0px;
    text-align: center;
    color: #fff;
    background: #C60C30;
    line-height: 35px;
}

.headerLink {
    font-size: 10pt;
    padding: 0px 0px 10px 0px;
    display: block;
    text-decoration: none;
    text-align: center;
    font-family: 'Kanit', sans-serif;
    color: white;
    background: #C60C30;
}

.headerLink:hover {
    text-decoration: underline;
}

canvas {
    display: block;
    margin: auto;
}

.main span {
    font-size: 12pt;
}

.tabbertab {
    margin: auto;
    width: 80%;
}

#params {
    max-width: 450px;
}

#paramtable {
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 450px;
    margin: auto;
    text-align: left;
    border: 0;
    padding: 30px 0px;
}

#paramtable th {
    color: #003F72;
    width: 200px;
    text-align: center;
    border: 0;
}

#paramtable td {
    color: #003F72;
    padding: 0px 15px;
    border: 0;
}

#params input {
    padding: 2px 5px;
    text-align: center;
    margin-bottom: 5px;
    font-family: 'Kanit', sans-serif;
}

#tempos {
    width: 90%;
    max-width: 300px;
    margin: 20px auto;
    padding: 10px;
}

#tempos tr,
#tempos th,
#tempos td {
    border: none;
}

#tempos th {
    padding-right: 15px;
}

#styles {
    text-align: left;
    width: 90%;
    max-width: 800px;
    margin: auto;
}

#styles p {
    margin: 0;
}

#styles input {
    padding: 5px;
    border: 1;
}

.one {
    margin: 10px 0px 10px 30px;
}

.two {
    margin: 10px 0px 10px 17px;
}

.three {
    margin: 10px 0px 10px 14px;
}

.four {
    margin: 10px 0px 10px 22px;
}

#styles table {
    padding: 10px;
}

#styles tr,
#styles th,
#styles td {
    border: none;
}

#reset {
    margin: 5px 0px 20px 0px;
    background: #C60C30;
    border: 1px solid #c60c30;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    color: #efefef;
    padding: 10px 15px;
}

#reset:hover {
    background: white;
    color: #c60c30;
    border: 1px solid #c60c30;

}

#export {
    display: block;
    width: 90%;
    margin: auto;
}

#export table {
    margin: auto;
}

#export textarea {
    display: block;
    width: 100%;
    max-width: 500px;
}

#expImg {
    display: block;
    width: 100px;
}

#export button {
    border: 1px solid #1e1e1e;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    background: #1e1e1e;
    color: #efefef;
    padding: 10px 15px;
}

#export button:hover {
    background: white;
    border: 1px solid #1e1e1e;
    color: #1e1e1e;
}

#help h1 {
    width: 90%;
    margin: auto;
    padding-top: 50px;
}

#help p {
    width: 90%;
    margin: 0px auto;
}

.heading {
    display: block;
    margin-top: 15px;
}

.example {
    border: 1px solid;
    padding: 0px 10px;
    margin: 20px auto;
}

.example tr {
    text-align: left;
}

.example th {
    padding-right: 10px;
    border: none;
}

.example td {
    border: none;
    text-align: center;
    padding: 6px;
}

.final {
    padding-bottom: 50px;
}

#idasu a {
    text-decoration: none;
}

#idasu img {
    display: inline-flex;
    height: 13px;
}

.information {
    padding: 30px 0px;
}

.information a {
    display: block;
    text-decoration: none;
    color: #1e1e1e;
    font-family: 'Kanit', sans-serif;
}

.information a:hover {
    text-decoration: underline;
}

.information a,
.information h1,
.information h2,
.information p {
    display: block;
    margin: auto;
    width: 95%;
}

.infoP {
    padding-bottom: 20px;
}

.information h2 {
    padding-bottom: 20px;
}