:root {
    --blue: #102c54;
    --bluetransparent: rgba(16, 44, 84, .8);
    --gold: #ab8b5d;
    --optinblue: #00aeef;
}

footer h1,
#smaa {
    color: #202020;
    font-family: 'Permanent Marker', cursive;
}
footer h1 a,
#smaa a {
    text-decoration: none;
    color: #202020;
}

.bluesep {
    background-color: var(--blue);
    height: 42px;
}

* {
    box-sizing: border-box;
}
body, html {
    padding: 0;
    margin: 0;
    /* background-color: #ececec; */
    background-color: #ffffff;
    color: #252525;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
}

header {
    z-index: 99999;
    text-align: center;
    width: 100%;
    top: 0;
    left: 0;
    transition: background-color .4s ease;
    transition: font-size .4s ease;
    background-color: rgba(255, 255, 255, .5);
}
header h1 {
    margin: 0;
    padding: 0;
}
header h1 a {
    color: #000000;
    text-decoration: none;
}

main {
    margin: 0;
    padding: 0;

    /* lure to content */
    /* transition: all 1000ms ease; */
    /* -webkit-filter: brightness(60%); */
    /* background-color: #e3e8eb; */
    /* --------------- */
}
main a {
    text-decoration: none;
    color: var(--bluetransparent);
}
main a:hover {
    color: var(--gold);
}

.content {
    /* position: relative; */
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {}

#content h1 {
    font-family: 'Kanit', sans-serif;
    font-weight: 900;
}
h2 {
    color: #102c54;
    font-family: 'Kanit', sans-serif;
    font-weight: 900;
}
h3 {
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
}


.sitemapentry {
    border-top: 1px solid #000000;
    margin: 20px auto;
}
.sitemapentry h1 {
    margin-bottom: 0;
}

.sitemapentry h1 a {
    font-size: 12pt;
    color: #000000;
    text-decoration: none;
}
.sitemapentry h1 a:hover {
    text-decoration: underline;
}

.sitemapentry h2 {
    font-size: 10pt !important;
    font-weight: normal;
    margin: 0;
    text-indent: 20px;
    position: relative;
}
.sitemapentry h2:before {
    position: absolute;
    left: -20px;
    top: -1px;
    color: #225c87;
    content: "\21AA";
}

.sitemapentry h3 {
    font-size: 10pt;
    font-weight: normal;
    margin-top: 10px !important;
    margin: 0;
}

.errors {
    color: red;
    border: 1px solid red;
}

.important {
    display: none !important;
}

table.rank {
    width: 100%;
    margin-bottom: 20px;
}
table.rank tr:first-child td {
    background-color: var(--blue);
    color: #ffffff;
    font-weight: 600;
    width: 100px;
}
table.rank td {
    border: 1px solid #888888;
    padding: 5px;
}
table.rank th {
    padding: 5px;
    border: 1px solid #888888;
    font-weight: normal;
    text-align: left;
    width: 12%;
    min-width: 100px;
    font-family: 'Kanit', sans-serif;
}

/* table.rank tr:nth-child(even) { */
/*     background-color: #c8c8c8; */
/* } */

#bios table.rank th {
    width: 250px;
}

#articles > div {
    margin-bottom: 30px;
    padding-bottom: 30px;
    /* border-bottom: 1px solid var(--bluetransparent); */
}
#articles h3 {
    margin-bottom: 0;
}
#articles p {
    margin-top: 10px;
}
#articles h3 a {
    text-decoration: underline;
}

#linkchildren {
    position: relative;
}

#linkchildren img {
    position: relative;
    top: 17px;
}

footer {
    clear: both;
    margin-top: 5vh;
}
footer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-weight: 600;
}

#fkanji a {
    text-decoration: none;
}

#events h2 {
    margin-top: 0;
}

#paymentitems > div {
    border: 1px solid var(--blue);
    background-color: #ffffff;
    padding: 1%;
    margin-bottom: 2%;
}

#paymentitems > div {
    display: inline-block;
    width: 48%;
    vertical-align: top;
}

#contact form {
    border: 2px solid var(--blue);
    background-color: #ffffff;
    color: #ffffff;
}
#contact form h3 {
    background-color: var(--blue);
    margin-top: 0;
    padding: 1%;
}
#contact form p {
    color: var(--blue);
    padding: 0 2%;
}
#contact form textarea,
#contact form input:not([type=submit]) {
    width: 100%;
    font-size: 16px;
    padding: 5px;
}

.contentblockfiletext {
    font-size: 14pt;
    font-weight: bold;
}

#smaajournals {
    display: flex;
    flex-flow: row wrap;
    list-style-type: none;
    text-align: center;
}
#smaajournals li {
    margin: 2% 4%;
}
#smaajournals a {
    display: block;
}

#socialmedia img {
    width: 45px;
    margin: 4px;
    display: inline-block;
}

#optinwrapper {
    margin: 40px auto;
    padding-top: 20px;
}
#optin {
    padding: 20px;
    border: 2px solid var(--blue);
    color: #ffffff;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/img/smaa-cta.jpg);
    background-size: cover;
    width: 100%;
    text-shadow: 3px 2px 2px #000000;
}
#optin span {
    color: var(--optinblue);
}

#optin ul {
    margin: 0;
    padding: 0;
}
#optin li {
    display: inline-block;
    list-style-type: disc;
}

#optin input {
    font-size: 16px;
    width: 100%;
    border-radius: 10px;
}
#optin button {
    border-radius: 40px;
    width: 100%;
}
#optin h2 {
    color: #ffffff;
    margin: 0;
    font-weight: 600;
    /* text-shadow: 1px 1px 2px #000000; */
}
#optin u {
    text-decoration: none;
    display: inline-block;
    position: relative;
}
#optin u:after {
    content: "";
    border-bottom: 1px solid var(--optinblue);
    position: absolute;
    left: 10%;
    bottom: -2px;
    width: 80%;
    text-align: center;
}

#optin input::placeholder {
    text-align: center;
    color: gray;
    font-weight: 100;
}
#optin button {
    background-color: var(--optinblue);
    border: none;
    font-weight: bold;
    color: #ffffff;
    display: inline-block;
    width: auto;
    margin-auto;
}

#smaaaside > div {
    border: 1px solid black;
    padding: 0 20px 20px 20px;
}


.backshadow {
    /* transform: rotate(-3deg); */
    box-shadow: 4px 4px 10px #000;
}

article#listarticles > article {}
article#listarticles > article div {}
article#listarticles > article:after {
    clear: both;
    height: 10px;
    content: "";
    display: block;
}
article#listarticles > article header {
    display: block;
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    height: auto;
    padding: 0;
    background-color: transparent;
}
article#listarticles > article header a {
    text-align: left;
    text-decoration: none;
    display: block;
    padding: 8px;
    font-size: 14pt;
    background-color: var(--blue);;
    color: #ffffff;
}
article#listarticles > article header a:hover {
    background-color: var(--gold);
}
article#listarticles > article img {
    float: left;
    margin-right: 20px;
    max-width: 100%;
}
article#listarticles > article a.readmore {
    /* color: #502a2b; */
    text-decoration: none;
}

article#listarticles > article a.readmore:hover {
    text-decoration: underline;
}