/*font-family: 'Sarabun', sans-serif;
font-family: 'Kalam', cursive;*/
* {
    margin: 0;
    padding: 0
}
.ad {
    /*width:728px;
    height:90px;
    background-color:darkslategray;*/
    margin: 10px auto 10px auto;
}
body {
    font-family: 'Sarabun', sans-serif;
    background-color: #313a3b;
    color: #7e9fa3;
    background-image: url('../IMG/background_gradient.png');
    background-attachment: fixed;
    background-position: center;
}
.bookbutton {
    margin: 20px 0px 20px 0px;
    min-width: 200px;
    padding: 5px 10px 5px 10px;
    background-color: #f8dea7;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    color: rgb(52, 42, 32);
    font-family: 'Sarabun', sans-serif;
    font-size: 20px;
}
.bookbuttonmobile {
    margin: 16px 0px 16px 0px;
    min-width: 200px;
    padding: 4px 8px 4px 8px;
    background-color: #f8dea7;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    color: rgb(52, 42, 32);
    font-family: 'Sarabun', sans-serif;
    font-size: 12pt;
}
    .bookbutton:hover {
        background-color: #ffeeca;
    }
.buttonreadthis{
    color:white;
}
.content {
    min-height: 900px;
    text-align: center;
    padding: 20px
}
.contentmobile {
    min-height: 900px;
    text-align: center;
    padding: 4px
}
.contenttextbox{
    resize: none;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: 140px;
    padding: 10px;
    font-family: 'Sarabun', sans-serif;
    font-size: 11pt;
}
.commentbox {
    width: 90%;
    background-color: #849b9d;
    border-radius: 10px;
    text-align: left;
    padding: 10px;
    margin: 10px auto
}
.defaultdivheader {
    width: 96%;
    background-color: #2d4144;
    font-size: 16pt;
    margin: 20px auto 0 auto;
    height: 44px;
    border: 2px solid #305A60;
}
.footersmallbar {
    width: 1010px;
    margin: 0px auto 20px auto;
    background-color: #14292e;
    min-height: 5px;
}
.footersmallbarmobile {
    width: 360px;
    margin: 0px auto 20px auto;
    background-color: #14292e;
    min-height: 2px;
}

.icon {
    margin: 2px 4px 0px 4px
}
.line{
    padding:10px 20px 10px 20px;
}
.linedistant {
    margin: 15px;
    padding: 5px 20px 5px 20px;
}
.linedistantmobile {
    padding: 10px 20px 0px 20px;
}
.linenormal {
    font-family: 'Sarabun', sans-serif;
    font-size: 12pt;
}
.inputline {
    padding: 5px 40px 5px 20px;
    text-align:right;
}
.inputlinemobile {
    padding: 5px 20px 5px 10px;
    text-align: right;
}
.loginbox {
    margin: 50px auto 50px auto;
    width: 416px;
    border: 2px solid #22494f;
    background-color: #101211
}
.loginboxmobile {
    margin: 5px auto 5px auto;
    width: 340px;
    border: 2px solid #22494f;
    background-color: #101211
}
.loginform{
    margin-left:30px;
    padding:10px;
    width:200px;
    height:12px;
    font-size:14px;
    background-color:lightgrey;
}
.loginformmobile {
    margin-left: 20px;
    padding: 10px;
    width: 160px;
    height: 12px;
    font-size: 14px;
    background-color: lightgrey;
}
.main {
    width: 1000px;
    margin: 0px auto 0px auto;
    background-color: #0f1f23;
    border-left: 5px solid #14292e;
    border-right: 5px solid #14292e;
}
.mainmobile {
    width: 356px;
    margin: 0px auto 0px auto;
    background-color: #0f1f23;
    border-left: 2px solid #14292e;
    border-right: 2px solid #14292e;
}
.mesajuyari{
    background-color:#be3434;
    color:lightyellow;
    padding:10px;
}
.numericbutton1 {
    background-color: #7e9fa3;
    margin: 2px;
    padding: 10px;
    background-color: #008797;
    text-decoration: none;
    color: white;
    font-size: 14pt;
}
.page {
    float: left;
    width: 320px;
    min-height: 460px;
    font-family: 'Kalam', cursive;
    font-size: 13pt;
    color: #181a1a;
    text-align: justify;
    padding: 100px 40px 100px 120px;
}
.pagemobile {
    float: left;
    width: 260px;
    min-height: 400px;
    font-family: 'Kalam', cursive;
    font-size: 13pt;
    color: #181a1a;
    text-align: justify;
    padding: 50px 20px 50px 60px;
}
.pagenotebookmobile {
    background-image: url('../IMG/notebookLineMobile.jpg');
    float: left;
    width: 260px;
    min-height: 400px;
    font-family: 'Kalam', cursive;
    font-size: 13pt;
    color: #181a1a;
    text-align: justify;
    padding: 36px 30px 50px 60px;
}
.pagenumber {
    font-family: 'Kalam', cursive;
    padding-top: 4px;
    font-size: 16pt;
    color: #181a1a;
    text-align: center;
}
.rightpage {
    text-align: center;
    padding: 100px 100px 100px 50px;
}
.rightpagemobile {
    text-align: center;
    padding: 60px 50px 50px 25px;
}

.rightpageright {
    text-align: right;
    padding: 80px 100px 100px 50px
}
.rightpagecontent1 {
    font-family: 'Sarabun', sans-serif;
    font-size: 13pt;
    font-style: italic;
    color: #828282
}
.storybox {
    float: left;
    margin: 50px 30px 50px 30px;
    width: 416px;
    min-height: 520px;
    border: 2px solid #22494f;
    background-color: #101211
}
.storyminibox {
    float: left;
    margin: 30px 15px 5px 15px;
    width: 286px;
    height: 420px;
    border: 2px solid #22494f;
    background-color: #101211
}
.storyminiboxmobile {
    float: left;
    margin: 15px 5px 5px 5px;
    width: 334px;
    height: 420px;
    border: 2px solid #22494f;
    background-color: #101211
}
.sboxheader {
    background-color: #305a60;
    min-height: 20px;
    padding: 10px;
}
.sboxtitle {
    font-family: 'Kalam', cursive;
    font-size: 14pt;
    font-weight: bold;
    min-height: 20px;
    padding: 15px 5px 5px 5px;
}
.sboxtext {
    padding: 20px;
    font-family: 'Kalam', cursive;
    font-size: 12pt;
    min-height: 220px;
    border-bottom: 1px dotted black;
}
.sboxfootertext {
    padding: 10px;
    font-family: 'Sarabun', sans-serif !important;
    font-family: 'Kalam', cursive;
    font-size: 11pt;
    text-align: left;
    color: #7e9fa3;
    min-height: 40px;
}
.sboxbutton {
    float: right;
    padding: 10px 30px;
    background-color: #008797;
    text-decoration: none;
    color: white;
    border-radius: 10px;
    font-size: 13pt;
}
.sboxbuttonnofloat {
    padding: 10px;
    background-color: #008797;
    text-decoration: none;
    color: white;
    border-radius: 10px;
}
.simplelinkbutton {
    padding: 10px;
    color: white;
}
.tableheader{
    font-size:18px;
    border-bottom:1px solid #7e9fa3;
    min-height:30px;
}
.tablewide{
    width:70%;
    margin:auto;
}
.tablewide td {
    padding: 10px;
}
.tablewidegolden {
    width: 100%;
    color: lightgoldenrodyellow;
    background-color: #111611;
    border: 1px solid lightgoldenrodyellow;
    margin:auto;
}
.tablewidegolden td {
    padding: 10px;
}
.topheader {
    position: fixed;
    width: 100%;
}
.top {
    height: 80px;
    width: 1000px;
    margin: 0px auto 0px auto;
    background-color: #22494f;
    border-left: 5px solid #14292e;
    border-right: 5px solid #14292e;
}
.topmobile {
    height: 70px;
    width: 356px;
    margin: 0px auto 0px auto;
    background-color: #22494f;
    border-left: 2px solid #14292e;
    border-right: 2px solid #14292e;
}
.toplogo {
    float: left;
    margin: 8px 8px 0 8px
}
.topleftbutton {
    float: left;
    padding: 28px 15px;
    color: #7e9fa3;
    text-decoration: none;
    font-size: 18px;
    border-right: 1px solid #101211;
}
    .topleftbutton:hover {
        background-color: #21464a
    }
.topleftbuttonmobile {
    float: left;
    padding: 20px 8px;
    color: #7e9fa3;
    text-decoration: none;
    text-align: center;
    font-size: 17pt;
    border-right: 1px solid #101211;
    width: 28px;
}
    .topleftbuttonmobile:hover {
        background-color: #21464a
    }
.toprightbutton {
    float: left;
    width: 198px;
    padding: 8px;
    color: #7e9fa3;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
}
    .toprightbutton:hover {
        background-color: #21464a
    }
.toprightbuttonmobile {
    float: left;
    width: 40px;
    padding: 5px 4px;
    color: #7e9fa3;
    text-decoration: none;
    text-align: center;
    font-size: 14pt;
}

    .toprightbuttonmobile:hover {
        background-color: #21464a
    }
.toprightlogin {
    float: left;
    width: 198px;
    padding: 8px;
    color: #7e9fa3;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
}
.thebook {
    background-image: url('../IMG/book.png');
    min-height: 662px;
}
.thebookmobile {
    background-image: url('../IMG/bookMobile.png');
    min-height: 488px;
}

.updateinfo {
    margin: 15px 5px;
    text-align: left
}
.writername {
    font-family: 'Sarabun', sans-serif;
    font-size:13pt;
    padding-top: 40px;
    color: #828282;
    text-align: right
}