/* Fonts */

@font-face{
 font-family: 'Exo';
 src: url(../fonts/Exo2-ExtraLight.ttf) format("opentype");
 font-weight: 200;
}
@font-face{
 font-family: 'Exo';
 src: url(../fonts/Exo2-ExtraLightItalic.ttf) format("opentype");
 font-weight: 200;
 font-style: italic;
}
@font-face{
 font-family: 'Exo';
 src: url(../fonts/Exo2-LightItalic.ttf) format("opentype");
 font-weight: 300;
 font-style: italic;
}
@font-face{
 font-family: 'Exo';
 src: url(../fonts/Exo2-Light.ttf) format("opentype");
 font-weight: 300;
}
@font-face{
 font-family: 'Exo';
 src: url(../fonts/Exo2-Regular.ttf) format("opentype");
 font-weight: 500;
}
@font-face{
 font-family: 'Exo';
 src: url(../fonts/Exo2-Italic.ttf) format("opentype");
 font-weight: 500;
 font-style: italic;
}
@font-face{
 font-family: 'Exo';
 src: url(../fonts/Exo2-SemiBold.ttf) format("opentype");
 font-weight: 700;
}
@font-face{
 font-family: 'Exo';
 src: url(../fonts/Exo2-Black.ttf) format("opentype");
 font-weight: 900;
}

@font-face{
 font-family: 'SometypeMono';
 src: url(../fonts/SometypeMono-Regular.ttf) format("opentype");
 font-weight: 400;
}

/* Common Layout & Style */

body{
 margin: 0;
 font-family: 'Exo', sans-serif;
}

.navbar{
 font-weight: 300;
 font-size: 1.2em;
 line-height: 1.25em;
 padding-top: 10px;
 padding-bottom: 10px;
 margin-bottom: 2em;
 
 display: flex;
 justify-content: center;
}

.navbar ul{
 list-style-type: none;
 margin: 0;
 padding: 0;
}

.navbar li{
 display: inline;
 margin-left: 8px;
 margin-right: 8px;
}

.main{
 font-size: 1.25em;
 line-height: 1.25em;
 
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 
 overflow-wrap: break-word;
}

.maininner{
 max-width: 100%;
 width: 600px;
}

.main h1,h2,h3,p{
 margin-block-start: 0em;
 margin-block-end: 0em;
 margin-inline-start: 0px;
 margin-inline-end: 0px;
}

.main h1,h2,h3{
 font-weight: 900;
}

.main h1,h2{
 line-height: 0.95em;
}

table.spread tr{
 height: 2.1em;
}

table.compact td.cell_small{
 font-size: 0.8em;
 padding-left: 10px;
}

.main ul{
 list-style-type: none;
 margin-block-start: 0;
 margin-block-end: 0;
 margin-inline-start: 0;
 margin-inline-end: 0;
 padding-inline-start: 0;
}

.main li:not(:last-child){
 margin-top:    0;
 margin-bottom: 1em;
}

button:hover{
 cursor: pointer;
}

input[type=text]:focus{
 outline: none;
}

.key{
 white-space: nowrap; 
}

.light{
 font-weight: 200;
}

.heavy{
 font-weight: 700;
}

.italic{
 font-style: italic;
}

.bigtext{
 font-size: 1.66em;
}

.standout{
 padding-left: 20px;
 padding-right: 20px;
 font-weight: 300;
 font-style: italic;
}

.mono{
 font-family: 'SometypeMono', monospace;
 font-weight: 400;
}

a,a:hover,a:link,a:visited{
 color: inherit;
 font-style: italic;
 text-decoration-line: underline;
}
a{
 text-decoration-thickness: 2px;
}
a:hover{
 text-decoration-thickness: 4px;
}

/* Light/Dark Buttons */

.lightdark{
 display: inline-flex;
 flex-wrap: nowrap;
 flex-direction: row;
 cursor: pointer;
}
.lightdark .light,.lightdark .dark{
 width:  10px;
 height: 20px;
}
.lightdark .marker{
 display: inline-block;
 width:   8px;
 height: 16px;
}
.lightdark .light{
 display: inline-flex;
 align-items: center;
 justify-content: flex-end;
 border-radius: 10px 0px 0px 10px;
}
.lightdark .light .marker{
 border-radius: 8px 0px 0px 8px;
}
.lightdark .dark{
 display: inline-flex;
 align-items: center;
 justify-content: flex-start;
 border-radius: 0px 10px 10px 0px;
}
.lightdark .dark .marker{
 border-radius: 0px 8px 8px 0px;
}

/* 'Big' Layout */

.big{
 text-align: center;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 font-weight: 500;
}

.big h1{
 font-size: 4em;
}

.big h2{
 font-size: 2.5em;
}

.big h3{
 font-size: 2em;
}

.big p{
 margin-block-start: .5em;
 margin-block-end: .5em;
 margin-inline-start: 0px;
 margin-inline-end: 0px;
}

.big label{
 font-size: 1.3em;
}

.big input[type=text]{
 font-family: 'Exo', sans-serif;
 font-weight: 300;
 font-size: 0.9em;
 padding: 8px 12px;
 border-style: solid;
 border-width: 2px;
 border-radius: 30px;
}

.big input[type=text]:focus{
 outline: none;
}

.big button{
 font-family: 'Exo', sans-serif;
 font-weight: 500;
 font-size: 1.1em;
 padding: 8px 16px;
 border-style: solid;
 border-left-width: 1px;
 border-top-width: 1px;
 border-right-width: 3px;
 border-bottom-width: 3px;
 border-radius: 8px;
}

.big .narrow{
 font-weight: 300;
 padding-left: 30px;
 padding-right: 30px;
 text-align: left;
}

.big .narrow .narrow{
 padding-left: 30px;
 padding-right: 30px;
}

/* 'Org' Layout */

.org{
 text-align: left;
 font-weight: 300;
}

.org h1{
 font-size: 2.5em;
 margin-block-start: 0;
 margin-block-end: .3em;
}

.org h2{
 font-size: 1.75em;
 font-weight: 500;
 margin-block-start: 0;
 margin-block-end: .4em;
}

.org h3{
 font-size: 1.3em;
 font-weight: 500;
 margin-top:    15px;
 margin-bottom: 15px;
}

.org p{
 margin-block-start: .5em;
 margin-block-end: .5em;
 margin-inline-start: 0px;
 margin-inline-end: 0px;
}

.org input[type=text]{
 font-family: 'Exo', sans-serif;
 font-weight: 300;
 font-size: 0.9em;
 padding: 8px 12px;
 border-style: solid;
 border-width: 2px;
 border-radius: 30px;
}

.org button{
 font-family: 'Exo', sans-serif;
 font-weight: 300;
 font-size: 0.9em;
 padding: 4px 8px;
 border-style: solid;
 border-left-width: 1px;
 border-top-width: 1px;
 border-right-width: 2px;
 border-bottom-width: 2px;
 border-radius: 8px;
}

/* Payment Buttons */

.paybutton{
 height: 160px;
 font-family: 'Exo', sans-serif;
 font-weight: 500;
 font-size: 0.9em;
 border-style: solid;
 border-left-width: 1px;
 border-top-width: 1px;
 border-right-width: 3px;
 border-bottom-width: 3px;
 border-radius: 8px;
}
.paybutton:hover{
 cursor: pointer;
}

.payamt{
 font-size: 1.3em;
}

.paysmall{ width: 30%; }
.paybig  { width: 40%; }

.paybig{ font-size: 1.15em; }
.paybig .paytitle{ font-size: 1.2em; }

a.paylink,a.paylink:hover{
 display: table-cell;
 width: inherit;
 height: inherit;
 vertical-align: middle;
 text-align: center;
 text-decoration: none;
}
a.paylink{
 cursor: default;
}
a.paylink:hover{
 cursor: pointer;
}

/* Post Blurb Layout */

a.postlink,a.postlink:hover{
 text-decoration: none;
 font-style: normal;
}

.postbox{
 padding: 10px;
 border-radius: 10px;
 margin-top:    5px;
 margin-bottom: 5px;
 height: 80px;
 
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: flex-start;
}

div.postmedia{
 height: 60px;
 width:  60px;
 margin-left:  10px;
 margin-right: 20px;
}

div.postline1{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: flex-start;
}

h3.posttitle{
 display: inline;
 margin-top: 0;
 margin-bottom: 5px;
 margin-left: 0;
 margin-right: 0;
}

div.postdate{
 display: inline;
 font-size: 0.66em;
 font-weight: 500;
 line-height: 0.8em;
 margin-left: 10px;
}

div.postshort{
 font-size: 0.75em;
 margin-top: 5px;
 margin-bottom: 0;
 margin-left: 0;
 margin-right: 0;
}

/* Toggle Layout */

.toggle-00,.toggle-01,.toggle-10,.toggle-11,.toggle-01-dead{
 font-size: 0.9em;
 padding: 2px 8px;
 margin: 2px;
 border-style: solid;
 border-left-width: 1px;
 border-top-width: 1px;
 border-right-width: 2px;
 border-bottom-width: 2px;
 border-radius: 4px;
}

.toggle-00:hover,.toggle-11:hover{
 cursor: default;
}
.toggle-01:hover,.toggle-10:hover{
 cursor: pointer;
}
.toggle-01-dead{
 cursor: not-allowed;
}