:root {
    --background-color: #faf3eb;
    --background-color-transparent: #faf3eb00;
    --note-color: #E3E2E0;
    --text-color: #462d86;
    --border-color: #ddd;
    --border-line-color: #CDC7C1;
    --edit-box-color: #FAE7D2;
    --edit-line-color: #F4F4F4;
    --pop-color: #F400F4;
    --link-hover-color: #c24165;
    --link-active-color: #bd4cbd;
    --border-radius: 4px;
    --text-width-max: 50em;
    --text-box-width-max: 40em;
    --text-size-header: 117.5%;
}

.CodeMirror {
    background-color: var(--edit-box-color);
    min-height: 0;  
}

.CodeMirror-scroll {
    min-height: 0;
    height: auto;
}

.CodeMirror-lines {
    padding-right: 1em;
    min-width: 75%;
}

.as-CodeMirror {
    font-size: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    background: var(--edit-line-color);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}
.as-CodeMirror-top {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

/**********************/
/*   User accessible  */
.xxl {  font-size: 235%;        /* 200 */   }
.xl {   font-size: 175%;        /* 150 */   }   h1 {    font-size: 175%;    font-weight: 900;   } 
                                                h2 {    font-size: 155%;    font-weight: 900;   }
.l {    font-size: 135%;        /* 112.5 */ }   h3 {    font-size: 135%;    font-weight: 800;   } 
                                                h4 {    font-size: var(--text-size-header);  font-weight: 600;   }
.m {    font-size: 100%;        /* 100 */   }   h5 {    font-size: 100%;    font-weight: 500;   } 
.s {    font-size: 72%;         /* 80 */    }   h6 {    font-size: 72%;     font-weight: 400;   } 
.xs {   font-size: 52.5%;       /* 62.5 */  }
.xxs {  font-size: 37.5%;       /* 56 */    }
 
.pop {
    color: var(--pop-color);
    font-weight: bold;
}
.tight {
    margin: 0;
    padding: 0;
    line-height: 0;
    vertical-align: bottom;
}

.newlines {
	white-space: pre-line;
}

.as-bg {
    background: var(--background-color);
    outline: none;
}

.note {
    background: var(--note-color);
    text-indet: 1em;
    display: block;
    max-width: var(--text-width-max);
}

.red {
    color: red;
}

.itemBox { 
margin-top: 25px;
margin-bottom: 51px;
margin-left: 9px;
margin-right: 9px;
max-width: var(--text-box-width-max);
border: initial;
background-color: white;
/*background-color: white;*/
border-image-outset: 25px 17px;
border-image-repeat: stretch;
border-image-slice: 150 200 150 200;
border-image-width: 47px;
border-image-source: url(dnd/img/white-border.png);
/* border-image-source: url(dnd/img/clear-border.png); */
border-style: double;
}

div.itemBox img {
    display: block;
    margin:auto;
}

/**********************/
/*   Link Styling     */
a:visited {     text-decoration: underline;    color: var(--text-color);        text-decoration-color: rgba(215, 209, 203, 0);} /*D7D1CB*/
a:link {        text-decoration: underline;    color: var(--text-color);        text-decoration-color: rgba(215, 209, 203, 0);}
a:hover {       text-decoration: underline;    color: var(--link-hover-color);  text-decoration-color: rgba(215, 209, 203, 0);}
a:active {      text-decoration: underline;    color: var(--link-active-color); text-decoration-color: rgba(215, 209, 203, 0);}


/**********************/
/*   Main Styling     */

body {
    font-family: 'proxima-soft'; 
    font-style: normal;
    background: var(--background-color);
    margin: 1em 1em 1em 2em;
}

h2 {    margin-right: 0em;   text-indent: 1rem; }
h3 {    max-width: var(--text-width-max) }
h4 {    max-width: var(--text-width-max); width: auto; display: inline-block; }
h1 {    margin-left: 0.0rem; color: var(--text-color);    margin-top: .3em;    margin-bottom: .3em;    }
h2 {    margin-left: 0.0rem; color: var(--text-color);    margin-top: .3em;    margin-bottom: .3em;    }
h3 {    margin-left: 0.0rem; color: var(--text-color);    margin-top: .3em;    margin-bottom: .3em;    }
h4 {    margin-left: 0.0rem; color: var(--text-color);    margin-top: .3em;    margin-bottom: .3em;    }
h5 {    margin-left: 0.0rem; color: var(--text-color);    margin-top: .3em;    margin-bottom: .3em;    }
h6 {    margin-left: 0.0rem; color: var(--text-color);    margin-top: .3em;    margin-bottom: .3em;    font-style: italic; }

hr {
    max-width: var(--text-width-max);
    text-align: left;
    margin-left: 0px;
}
ul {
    margin-top: 4px;
    margin-bottom: 4px;
}
body > h2 {
    margin-left: -1.3em; text-indent: .5em;
}
.itemBox > h2 {
    margin-left: -.35em; text-indent: .5em;
}
body > h3 {
    margin-left: -0.5em;
}

.as-h3 {  
    font-size: 135%;
    font-weight: 800;
    color: var(--text-color);  
}

p {
    max-width: var(--text-width-max);
    margin-top: 4px;
    margin-bottom: 4px;
}

li {
    max-width: var(--text-width-max);
}


blockquote > p {
    max-width: 90%;
}
textarea {
    font-family: inherit;
        /*color: var(--text-color);*/ 
    border: 1px solid var(--border-line-color); 
    background-color: var(--edit-box-color); 
        border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);

}
input {
    /*color: var(--text-color);*/
    border: 1px solid var(--border-line-color); 
    background-color: var(--edit-box-color);
}

.click-button {
    display:inline;
    /*float: right;*/
    padding: 8px;
    background-color: #FFFFFF;
    border: 1px solid #dedede;
    border-top: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;    
    font-size: 100%;
    font-weight:bold;
    color: var(--text-color);
    cursor:pointer;
    min-width: 6em;
}

.click-button-tiny {
    display:inline;
    /*float: right;*/
    padding: 4px;
    background-color: #FFFFFF;
    border: 1px solid #dedede;
    border-top: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;    
    font-weight:bold;
    color: var(--text-color);
    cursor:pointer;
}

.hoverbox-input-field {
    text-indent: .5em;
    background-color: white;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

table {
    border-collapse: collapse;
}
 
th {
    text-align: left;
    font-weight: bold;
    font-size: var(--text-size-header);
    color: var(--text-color);
}

.as-th {
    text-align: left;
    font-weight: bold;
    font-size: var(--text-size-header);
    color: var(--text-color);
}

.default-th {
    vertical-align: top;
}


th, td {
    padding: .3em;
    vertical-align: top;
}

table, th, td {
    border: solid lightgray 1px;
}

tbody tr:nth-child(odd) {
    background-color: var(--border-color);
}

.cleanTable {
    border: 0;
    background-color: var(--background-color);
}

.cleanTable tr:nth-child(odd) {
    background-color: var(--background-color);
}

.cleanTable td {
    border: solid white 0;
}


.title {
    text-align: left;
    font-weight: bold;
    font-size: 115%;
    background: darkgrey;
}

            
h2 {    background: linear-gradient(to top right, var(--border-line-color), var(--background-color-transparent),var(--background-color-transparent));        }
h3 {    border-bottom-style: solid;    border-bottom-width: 1px;    border-bottom-color: var(--border-line-color); }
h4 {    border-bottom-style: solid;    border-bottom-width: 1px;    border-bottom-color: var(--border-line-color); }

blockquote {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    box-shadow: 0 .25em .5em 0 rgba(0, 0, 0, 0.25);
    background-color: #f0e9e1;
    max-width: var(--text-width-max);
}

blockquote p {
    padding: .75em;
}
blockquote cite {
    padding: .75em;
}

.card {
    box-shadow: 0 .25em .5em 0 rgba(0, 0, 0, 0.25);
    transition: 0.3s;
    background-color: #f0e9e1;
    margin: .75em;
    padding: .3em;
    display: inline-block;
    width: 9em;
    text-align: center;
}

.card-path {
    font-size:  52.5%;
    word-wrap: break-word;
}

.visible-icon {
    float: right;
    opacity: 0.33;
}

.visible-icon-hidden {
    float: left;
    opacity: 0.0;
}

.public-icon {
    float: left;
    opacity: 0.75;
}

.public-icon-hidden {
    float: right;
    opacity: 0.0;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 .5em 1em 0 rgba(0, 0, 0, 0.25);
}

.defaultTd td {
    padding: inherit;
    border-bottom: 1px solid #888;
}
.edit-button-bar {
    text-align: right;
}

.submit-button-bar {
    text-align: center;
}

.edit-single-row {
    background-color: var(--edit-box-color);
}

.comfy {
    padding: 8px;
}

.table-grey {
    /*border: 1px solid red;*/
    background-color: #EEEEEE;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.table-button {
    display: inline;
}

.table table {
    padding: inherit;
    border-collapse: inherit;
    display: table;
}

.table > * {
    padding: .25em;
    display: table-row;
}

.table > * > * {
    padding: .25em;
    display: table-cell;
}

.hoverbox {
    position: fixed;
    top: .15em;
    text-align: center;
    right: 0;
    margin-right: .75em;
    padding: .2em;
    background-color: #EEEEEE;
    border: .15em solid #666666;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);

}

.timebox {
    position: fixed;
    bottom: 0;
    text-align: center;
    right: 0;
    padding: .25em;
    margin: 0;
    background-color: lightgrey;
    border: 1px solid black;
}

.clock {
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
}

.content_two_col {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

@font-face{
    font-family:'proxima-soft';
    src:url('/font/n2 thin.ttf');
    font-weight: 100;
}
@font-face{
    font-family:'proxima-soft';
    src:url('/font/n3 light.ttf');
    font-weight: 200;
}
@font-face{
    font-family:'proxima-soft';
    src:url('/font/n4 regular.ttf');
    font-weight: 300;
}
@font-face{
    font-family:'proxima-soft';
    src:url('/font/n5 medium.ttf');
    font-weight: 400;
}
@font-face{
    font-family:'proxima-soft';
    src:url('/font/n6 semibold.ttf');
    font-weight: 500;
}
@font-face{
    font-family:'proxima-soft';
    src:url('/font/n7 bold.ttf');
    font-weight: 700;
}
/*@font-face{
    font-family:'proxima-soft';
    src:url('/font/n8 extrabold.ttf');
    font-weight: 800;
}
@font-face{
    font-family:'proxima-soft';
    src:url('/font/n9 black.ttf');
    font-weight: 900;
}
@font-face{
    font-family:'proxima-soft';
    src:url('/font/3291C4_3_0.eot');
    src:url('/font/3291C4_3_0.eot?#iefix') format('embedded-opentype'),
    url('/font/3291C4_3_0.woff2') format('woff2'),
    url('/font/3291C4_3_0.woff') format('woff'),
    url('/font/3291C4_3_0.ttf') format('truetype');
    font-style:normal;
    font-weight:400
}
@font-face{
    font-family:'proxima-soft';
    src:url('/font/3291C4_0_0.eot');
    src:url('/font/3291C4_0_0?#iefix') format('embedded-opentype'),
    url('/font/3291C4_0_0.woff2') format('woff2'),
    url('/font/3291C4_0_0.woff') format('woff'),
    url('/font/3291C4_0_0.ttf') format('truetype');
    font-style:normal;
    font-weight:500
}
@font-face{
    font-family:'proxima-soft';
    src:url('/font/3291C4_1_0.eot');
    src:url('/font/3291C4_1_0.eot?#iefix') format('embedded-opentype'),
    url('/font/3291C4_1_0.woff2') format('woff2'),
    url('/font/3291C4_1_0.woff') format('woff'),
    url('/font/3291C4_1_0.ttf') format('truetype');
    font-style:normal;
    font-weight:600
}
@font-face{
    font-family:'proxima-soft';
    src:url('/font/3291C4_2_0.eot');
    src:url('/font/3291C4_2_0.eot?#iefix') format('embedded-opentype'),
    url('/font/3291C4_2_0.woff2') format('woff2'),
    url('/font/3291C4_2_0.woff') format('woff'),
    url('/font/3291C4_2_0.ttf') format('truetype');
    font-style:normal;
    font-weight:900
}*/