body {
    margin:0;
    padding:0;
    background-color:#456;
    background-image:url('img/bg.png');
    font:14px tahoma;
    color:#000;
}

a {
    text-decoration:none;
    color:#00A;
}

a:hover,
a:active {
    background-color:rgba(0,0,192,0.1);
}

img {
    border:0;
    vertical-align:middle;
}

iframe {
    vertical-align:middle;
}

#container {
    max-width:800px;
    margin:auto;
}


.genericBox {
    display:block;
    background-color:#F0F0F0;
    border:2px solid #000;
    margin:8px 4px;
    padding:4px;
    border-radius:8px;
    box-shadow:4px 4px 8px;
}




/*********************************************************************** root */
#root > a {
    display:block;
    text-align:center;
    font-weight:bold;
    font-size:80%;
}




/********************************************************************* header */
#header {
    position:relative;
}


#header > h1 {
    font-size:150%;
    padding:0;
    margin:0;
    font-weight:bold;
}




/********************************************************************* footer */
#footer {
    font-size:80%;
    text-align:center;
}








#login {
    position:absolute;
    top:4px;
    right:4px;
}

#login > * {
    font-size:80%;
}

.tab {
    position:relative;
    margin-top:32px;
}

.tab:after {
    content:"";
    display:block;
    background-color:#F0F0F0;
    border:2px solid #000;
    width:48px;
    height:48px;
    top:-26px;
    left:-26px;
    margin:-0px 4px;
    border-radius:24px;
    position:absolute;
    z-index:-1;
    box-shadow:4px 4px 8px;
}

.post {
    background-color:rgb(248,248,248);
    border:2px solid #000;
    margin:4px;
    padding:0;
    overflow:hidden;
}


.post > .postHeader {
    background-color:#CCC;
    font-size:80%;
    text-align:right;
    padding:4px;
}

.post > h2 {
    font-size:100%;
    padding:2px 4px;
    margin:0;
    background-color:#CCC;
    font-weight:bold;
    border-bottom:2px solid #AAA;
}

.post > .body {
    padding:4px 8px;
    text-align:justify;
}




/* post formatting tags *
.post > .body .customTag,
.post > .body .customTag * {
    max-width:100%;
}


.post > .body .customTag.inline {
    display:inline-block;
    max-width:calc(100% - 8px);
}
.post > .body .customTag.block {
    display:block;
    max-width:calc(100% - 8px);
    padding:4px;
    margin:4px auto;
}


.post > .body a.customTag {
    background-color:rgba(0,0,255,0.1);
}
.post > .body a.customTag:hover {
    background-color:rgba(255,64,0,0.1);
}
.post > .body a.customTag.inline {
    padding:0 2px;
}
.post > .body a.customTag.block {
    padding:4px;
}


.post > .body .customTag.bold {
    font-weight:bold;
}


.post > .body .customTag.imgblocklink,
.post > .body .customTag.imgblock {
    text-align:center;
    padding:4px;
    border:1px solid #000;
}


.post > .body pre.customTag {
    border:1px solid #000;
    background-color:#DDD;
    overflow:auto;
}


.post > .body .customTag.quote {
    border:1px solid #000;
    background-color:#FFD;
}


.post > .body .customTag.youtube {
    margin:4px auto;
    border:1px solid #000;
}




/**************************************************************** poster form */
#poster {
    text-align:center;
}

#poster input,
#poster textarea,
#poster button {
    display:block;
    width:90%;
    margin:4px auto;
}

#poster textarea {
    height:400px;
}


#poster .customTagList {
    text-align:left;
    display:table;
    border-collapse:collapse;
    margin:auto;
}
#poster .customTagList > * {
    display:table-row;
}
#poster .customTagList > * > * {
    display:table-cell;
    border:1px solid #000;
    padding:2px 4px;
}




/******************************************************************* archives */
#archives h2 {
    text-align:center;
}

#archives .time {
    font-size:80%;
    color:#000;
}



#archives .title {
}

#archives .current {
    font-weight:bold;
}




/********************************************************************** stats */
#stats {
    margin:8px;
    font-size:95%;
    margin-bottom:150px;
}

#stats .header {
    padding:2px 4px;
    background-color:#F0F0F0;
    border:1px solid #000;
}

#stats .graph {
    border:1px solid #000;
    display:inline-block;
    height:300px;
    white-space:nowrap;
    padding:4px 2px 0 2px;
    background-color:#F0F0F0;
    position:relative;
}

#stats .graph > .line {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    border-top:1px solid #000;
}

#stats .graph > .line > .bar {
    font-size:0;
}

#stats .graph > .line > .label {
    position:absolute;
    right:0px;
    border:1px solid #000;
    top:-1px;
    right:-100px;
    width:94px;
    height:100%;
    text-align:right;
    background-color:#F0F0F0;
    padding:0 2px;
}

#stats .graph > .column {
    display:inline-block;
    position:relative;
    vertical-align:bottom;
}

#stats .graph > .column.pusher {
    width:0;
    height:100%;
}

#stats .graph > .column > * {
    background-color:#44F;
}

#stats .graph > .column:nth-child(2n) > * {
    background-color:#06F;
}

#stats .graph > .column > .bar {
    font-size:0;
    display:inline-block;
    width:16px;
    height:100%;
    margin:0 2px;
    vertical-align:top;
}

#stats .graph > .column > .label {
    position:absolute;
    z-index:-100;
    left:50%;
    bottom:-2px;
    left:6px;
    transform:rotate(45deg);
    transform-origin:0% 50%;
    font-size:90%;
    padding-left:12px;
}




#monthReport > div:nth-child(2n) {
    background-color:rgba(0,0,0,0.1);
}
#monthReport .hits {
    font-family:monospace;
    white-space:pre;
}
#monthReport .bar {
    display:inline-block;
    border:1px solid rgba(0,0,0,0.5);
    width:400px;
    height:8px;
}
#monthReport .bar > span {
    display:block;
    background-color:rgba(0,0,255,0.25);
    height:100%;
}




#statsItems {
}

#statsItems .period {
    background-color:#F0F0F0;
}

#statsItems .period .header {
    font-weight:bold;
    background-color:#CCC;
    padding:0 4px;
}

#statsItems .list {
    display:table;
    width:100%;
}

#statsItems .list > * {
    display:table-row;
}

#statsItems .list > * > * {
    display:table-cell;
    padding:0 2px;
}

#statsItems .list > * + * > * {
    border-top:1px solid #888;
}

#statsItems .list > * > * + * {
    border-left:1px solid #888;
}

#statsItems .list > * > *:nth-child(1) {
    text-align:right;
    width:0;
}


#statsChartContainer {
}
#statsChart {
    display:block;
    width:100%;
    max-width:100%;
}




/******************************************************************************/
.table {
    display:table;
}
.tableRow {
    display:table-row;
}
.tableCell {
    display:table-cell;
}




/******************************************************************************/
.editor {
    margin:auto;
    width:90vw;
    height:80vh;
    position:relative;
}
.editor > div {
    position:absolute;
    width:45vw;
    max-width:100%;
    height:80vh;
    max-height:90vh;
    overflow:auto;
}
.editor > div:first-child {
    right:50%;
}
.editor > div:last-child {
    left:50%;
}




/******************************************************************************/
.post .body.raw {
    white-space: pre;
}

.post .body h1,h2,h3,h4,h5,h6 {
    margin:2px 0;
    padding:2px 2px;
}

.post .body img {
    max-width:10%;
    /**border:1px dotted #888;/**/
    margin:2px;
}

.post .body hr {
    border-color:#000;
    border-style:dashed;
    padding:0;
    margin:16px 0;
}

.post .body blockquote > p {
    padding:2px 4px;
    margin:2px 4px;
}

.post .body blockquote,
.post .body pre {
    border-style:solid;
    border-width:1px;
    border-left-width:4px;
    padding:0;
    margin:8px 4px;
    overflow:auto;
    max-height:600px;
}

.post .body pre > code {
    display:block;
}

.post .body blockquote {
    background-color:rgb(255,255,220);
    border-color:rgb(240,200,120);
}

.post .body code {
    background-color:rgb(224,224,224);
    padding:2px 4px;
}

.post .body pre {
    border-color:rgb(128,128,128);
}

 .post .body p.singleImage > img
,.post .body p > iframe
{
    display:block;
    margin:auto;
    max-width:90%;
}

.post .body p.singleImageLinked
{
    text-align:center;
}

.post .body p.singleImageLinked > a
{
    display:inline-block;
    max-width:90%;
}

.post .body p.singleImageLinked > a > img
{
    display:block;
    margin:auto;
    max-width:100%;
}

/*
.post .body p > a.single.image {
    display:block;
    margin:auto;
    max-width:90%;
    background-color:#FF0;
}

.post .body p > a.single.image > img {
    display:block;
    margin:auto;
    max-width:100%;
}
*/