@import url('https://use.fontawesome.com/releases/v5.6.3/css/all.css');
@import url('http://css.wikidot.com/cssnippet:fontawesome-editor/code_');
@import url('http://css.wikidot.com/cssnippet:minimized-search-bar/code_');
@import url('http://css.wikidot.com/cssnippet:inline-hovertips/code_');


/**********************************************/
/******************NOTES*******************/
/*
Please don't make any adjustments to this block unless you're familiar with using CSS. If you know CSS, feel free
to adjust things to your hearts content! Just make sure to notate whatever changes you made. Thanks!

***
* Modification History
*
* - 2021-07-29 Dragonus: Added rating button formatting.
* - 2021-07-02 Dragonus: Comment out Pride Month banner & headers. Revert back to normal.
* - 2021-06-17 Dragonus: Better Pride Month banner & headers.
* - 2021-06-06 Dragonus: Pride Month banner.
* - 2021-06-04 Dragonus: Fix local--files/files/sbheaderbg-hover.png
* - 2021-05-14 Dragonus: "#main-content p". Remove bottom padding. "#main-content ul" Add top padding.
* - 2021-04-24 Dragonus: Removed top padding on account options li a. Min width on #container.
* - 2021-04-22 Dragonus: Change autocomplete css.
* - 2021-04-21 Dragonus: Standardize headeer colors. Small tweaks I forget. Work on Bio section. Font Adjustments. Syntax CSS.
* - 2021-04-20 Dragonus: text-rendering to body. Font face of headers & Title. Adjusted main-content margins & width. Bio card CSS.
* - 2021-04-19 Dragonus: Top Bar tweaks. Padding, borders, etc.
* - 2021-04-08 Dragonus: Removed ListPages pagination (.pager) on new line.
* - 2021-04-06 Dragonus: ListPages pagination (.pager) on new line.
* - 2021-04-06 Dragonus: Added table margin left.
* - 2021-04-05 Dragonus: Reduced main-content margin left.
* - 2021-03-31 Dragonus: Added min-width for headers.
* - 2021-03-17 Dragonus: Added .important class & --color-important color.
* - 2021-03-16 Dragonus: Adjust link colors.
* - 2021-03-10 Dragonus: Added Display Flex to H3/H4. Better wrapping.
* - 2021-03-08 Dragonus: Added Margin-Left to H4.
* - 2021-02-24 Dragonus: Added Margin-Left to Main Content paragraphs.
* - 2021-02-24 Dragonus: Removed margin from DIV P. Custom Color layout.
* - 2020-12-28 Dragonus: Added "#main-content a.newpage" style. Fixed Global a classes.
* - 2020-12-24 Dragonus: Added minimized search bar. Table selected colour.
* - 2020-12-21 Dragonus: Added content-wrap. Fixed background image. Parallax Scrolling. Menu item tweaks.
* - 2020-12-19 Dragonus: Added basic IMG styling. Adjusted table padding. Adjusted top-bar mouseover. 
* - 2020-12-18 Irisa: Propose an initial block quote style; minor tweak to top padding so that page content isn't hidden below top menubar.
* - 2020-12-17 Dragonus: Reduce main content margins (Skill tables are wider with pre-reqs).
* - 2020-12-17 Dragonus: Adjusted table margins.
* - 2020-12-17 Dragonus: Balanced margins on main-content, Table overflow suggestion (Irisa), Fixed table font-size.
* - 2020-12-16 Dragonus: Increase Main Content min-width (550px).
* - 2020-12-16 Irisa: Added color definitions.
* - 2020-12-16 Dragonus: Dark theme for tables.
* - 2020-12-16 Dragonus: Reverse sidebar & main content background colours. Added more contrast to Main Content Header Fonts.
* - 2020-12-15 Dragonus: Limited width of main content area.
* - 2020-12-15 Dragonus: Fixed CSS errors & Header background-color, top-bar font color.
* - 2020-12-14 Dragonus: Added Imports, Fixed/Styled sidebar.
* - 2020-12-05 Dragonus: Initial File
***

*/


/* ### Styles and Colors #################### */
:root {
    --bg-body-primary: #D9CA9CE3;
    --bg-button-hover: #F0EDDC;
    --bg-button: #E2DBBA;
    --bg-dropmenu: #192902;
    --bg-footer: #192902;
    --bg-header: #E2DBBA;
    --bg-input: #F0EDCC;
    --bg-link-hover: #F0EDDC;
    --bg-sidebar: #E2DBBAD0;
    --bg-sidebar-link-hover: #F0EDDC;
    --bg-table-header: #EEE;
    --bg-table-row-alt: #333;
    --bg-table-row: #444;
    --bg-table-row-selected: #000000;
    --bg-topmenu: #192902;

    --border-button: 1px solid #C5B876;
    --border-input: 1px solid #C5B876;
    --border-table-header: 1px solid #888;
    --border-table-row: 1px solid #595959;
    --border-table-row-last: 2px solid #7C7C7C;

    --color-accent: #315203; /* forest green */
    --color-accent-text: #FCF5D4;
    --color-blockquote-gradient-start: #FFFFFFB2;
    --color-body: #322E1E;
    --color-button: #322E1E;
    --color-button-hover: #635C3B;
    --color-footer: #E2DBBA;
    --color-input: #322E1E;
    --color-link: #005604;
    --color-link-hover: #192902;
    --color-link-newpage: #9B1701;
    --color-link-visited: #091501;
    --color-header: #1B2815;
    --color-sidebar: #322E1E;
    --color-table-header: #322E1E;
    --color-table-row: #EEE;
    --color-topmenu-link: #E2DBBA;
    --color-important: #C80000;

}

/*      Possible Title Fonts      */
@font-face {
  font-family: 'Ptolemy';
  
  src: url("/local--files/files/Ptolemy-GreatPrimer18.otf") format('opentype');
  src: 
    local('Ptolemy'),
    local('Ptolemy-GreatPrimer18'),
    url('fonts/Ptolemy.otf') 
    format('opentype');
}

@font-face {
  font-family: 'ATClassicRoman';

  src: url("/local--files/files/ATClassicRoman.ttf") format('truetype');
    src: 
    local('ATClassicRoman'),
    url('fonts/ATClassicRoman.ttf') 
    format('truetype');
}

@keyframes fadein {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
    
}

/* ### Global ############################### */
/* Personal classes and the like in here too (e.g. dropcap class) */
body {
    margin: 0px;    
    background-image: linear-gradient(rgb(145, 137, 129) 0%, rgb(158, 153, 148) 3%, rgb(198, 195, 190) 10%);

    font-size: 100%;
    font-family: /*"PT Sans", "PT Serif",*/ Optima, Arial, sans-serif;
    color: var(--color-body);

    text-rendering: optimizelegibility;
}
 
a {
    color: var(--color-link);
}
 
a.visited {
    color: var(--color-link-visited);
}
 
a:hover {
    color: var(--color-link-hover);
    background-color: var(--bg-link-hover);
}
 
a.newpage {
    color: var(--color-link-newpage);
    font-style: italic;
}
 
.input {
    background-color: var(--bg-input);
}
 
/* D R O P C A P */    
.drop {
    float: left;
    font-size: 3em;
    background-color: var(--bg-dropmenu);
    color: #EECB02;
    padding: 5px;
    margin: 5px 10px 5px 0px;
    font-family: "Copperplate Gothic";
    border: 1px solid var(--color-accent);
    text-align: center;
}


/* MODULES */ 

/* ###### Listpages Module ########################### */
.pager{
    /*clear: both; /* Pagination on new line. */
}
 
/* ###### Headers ########################### */
h1, h2, h3, h4, h5, h6 {
    font-family: TrajanPro-Bold, "Trajan Pro", "Times New Roman", Times, serif;
    font-weight: bold;
    letter-spacing: 0.2em;
    padding: 0px 0px 0px 10px;
    min-width: 150px;

}
 
h1, h2 {
    background: var(--color-accent);
    color: var(--color-accent-text);
    padding-left: 50px;
}
 
h3, h4 {
    border-bottom: 1px solid var(--color-accent);
    background: transparent url("/local--files/forest/leaf-Gn.png") 5px center no-repeat;
    color: var(--color-accent);
    padding-left: 50px;
    display: flex;
}
 
h5, h6 {
    text-decoration: none;
    background: transparent url("/local--files/forest/leaf-Gn.png") 5px center no-repeat;
    color: var(--color-accent);
    padding-left: 50px;
}
 
h4, h5 {
    font-size: 120%;
}
 
h2, h3 {
    font-size: 140%
}
 
h1 {
    font-size: 160%;
    font-variant: small-caps;
}

h4 {
    margin-left: 1em;
}

img {
    max-width: 100%;
    height: auto;
    margin-top: 1em;
}

.important, .important a {
    color: var(--color-important) !important;
    font-weight: bold !important;
}

#container {
    min-width: 910px;
}
 
/* ### Layout  ############################## */
/* ###### Banner ############################ */
#header {
    
    /** Pride Month 
    position: relative;
    z-index: 5;
    **/
    
    background-color: var(--bg-header);
    background-image: url("/local--files/files/Wiki%20Top%20Banner%20v5.png");
    background-repeat: repeat-x;
    background-size: auto;
    


    border-bottom:2px solid #192902;
    height:125px;
    margin:0px 0px 10px;


}


/** Pride Month **
#header::before {

    background-image: linear-gradient(to bottom, red 16%, orange 16% 32%, yellow 32% 48%, green 48% 64%, #4169e1 64% 80%, violet 80%);
    opacity: .89;

    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}**/
 
#header h1 {
    font-family: 'ATClassicRoman', 'Ptolemy', TrajanPro-Bold, "Trajan Pro", "Times New Roman", Times, serif;
    color: var(--color-header);
    font-weight: normal;
    font-size: 275%;
    margin: 0px 75px;
    padding-top: 40px;
    background-color: transparent;    
    background-image: none;
}


/** Pride Month **
#header h1 span, #header h2 span, #login-status span, #login-status a#my-account {
    font-weight:bold;

    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}**/

#header h1 a,#header h1 a:hover {
    color: var(--color-header);
    margin: 10px;
    background-color: transparent;
}

#header h2{
    color: var(--color-header);
    font-size: 130%;
    margin: 5px 75px;    
    background: transparent url("/local--files/forest/leaf-Ye.png") 5px center no-repeat;
    padding-left: 50px;
}
 
/* ###### Main Content ###################### */
#content-wrap {
    _height: 1%;
    min-height: 1px;
    
    background-image: url("/local--files/files/colosseum-690384.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center; 
}

#page-title {
    margin:25px 0 10px; 
    background: url("/local--files/forest/leaf-Gn.png") 5px 30px no-repeat;
    padding-left: 50px;
    padding-top: 0;
    color: var(--color-accent);
    border-bottom: 1px solid #C5B876;
}
 
#main-content {
    color: var(--color-body);
    background-color: var(--bg-body-primary);
    display:block;
    padding: 0px 2.5em;
    padding-top: 0.5em;
    margin-left: max(265px, 16em);
    margin-right: max(5px, 2%);
    max-width: 1340px;
    min-width: 550px;    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
 
#main-content h1 {
    font-size: 175%;
}

#main-content a.newpage {
    color: var(--color-link-newpage);
}

#main-content li a.newpage {
    color: var(--color-link-newpage);
}

#main-content p {
    margin-left: 1em;
    margin-bottom: 0px;
}

#main-content ul {
    margin-top: 0.25em;
}

/* Margin top for error messages (missing pages) */
/*
#\34 04-message {
    margin-top: 30px;
}*/
 
blockquote {
    border: none;
    padding: 0;
    border-left: 8px solid var(--color-accent);

    background: -moz-linear-gradient(left, var(--color-blockquote-gradient-start) 0%, var(--bg-body-primary) 80%), url(http://eternal-city.wdfiles.com/local--files/files/The%20Arena%20-%20Final.jpg) no-repeat;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, var(--color-blockquote-gradient-start)), color-stop(80%, var(--bg-body-primary)), color-stop(100%, var(--bg-body-primary))), url(http://eternal-city.wdfiles.com/local--files/files/The%20Arena%20-%20Final.jpg) no-repeat;
    background: -webkit-linear-gradient(left, var(--color-blockquote-gradient-start) 0%, var(--bg-body-primary) 100%), url(http://eternal-city.wdfiles.com/local--files/files/The%20Arena%20-%20Final.jpg) no-repeat;
    background: -o-linear-gradient(left, var(--color-blockquote-gradient-start) 0%, var(--bg-body-primary) 80%), url(http://eternal-city.wdfiles.com/local--files/files/The%20Arena%20-%20Final.jpg) no-repeat;
    background: -ms-linear-gradient(left, var(--color-blockquote-gradient-start) 0%, var(--bg-body-primary) 80%), url(http://eternal-city.wdfiles.com/local--files/files/The%20Arena%20-%20Final.jpg) no-repeat;
    background: linear-gradient(to right, var(--color-blockquote-gradient-start) 0%, var(--bg-body-primary) 80%), url(http://eternal-city.wdfiles.com/local--files/files/The%20Arena%20-%20Final.jpg) no-repeat;
   
    background-size: cover;

    font-style: italic;
    line-height: 1.4em;
}
blockquote blockquote {
    background: unset; /* don't repeat background for nested blockquotes */
}
blockquote p {
    margin: 0;
    padding: 1em;
    background: none;
    font-family: "PT Serif";
}
 
.page.tags span {
    border-top: 1px solid #C5B876;
}
 
#license-area {
    color: #635C3B;
}
 
/* ###### Footer ############################ */
#footer {
    background-color: var(--bg-footer);
    padding-top: 3px;
    padding-bottom: 3px;
    border-top: 2px solid var(--color-accent);
    color: var(--color-footer);
    text-align: left;
 
}
#footer p {
    padding-right: 100px;
    margin: 0px;
}
#footer a {
    color: #98A881;
}
#footer a:hover {
    border-bottom: 0px;
}
 
.page-options-bottom a, a.action-area-close{
    color: #635C3B;
    background-color: #E2DBBA; 
    text-decoration: none;
}
 
.page-options-bottom a:hover{
    background-color: var(--bg-link-hover); 
}

.no-margin p {
    margin: 0px;
} 

#license-area {
     color: #635C3B;
}
/* ### Navigation Elements ################## */
/* ###### Account ########################### */
#header #login-status, #login-status a, #login-status a:hover {
    color: var(--color-header);
    background-color: transparent;
    font-weight:bold;
    padding-top:40px;

}
 
#account-options {
    background-color: #192902;
    border: 1px solid #E2DBBA;
}
 
#account-options li a {
    color: #98A881
}
 

#account-options li a:hover {
    color: #EECB02;
    padding-top: 0;
}
 
#account-options a, a#account-topbutton{
    color: var(--color-header);
    font-weight: normal;
    background-color: transparent;
}
 
#account-options #account-options, a#account-topbutton{
    background-color: transparent;
    border-style: none;
    color: var(--color-header);
}
 
#account-topbutton {
    background-color: #F0EDDC;
    border: 1px solid #C5B876;
}
 
/* ###### Top Bar ########################### */
#search-top-box{
    display: block;
    top: 5em;
    position: absolute;

    /* Overwrite CSS Minimized Search*/
    width: 2em; 
    height: 2em;
}

#search-top-box input.text {
    /* Overwrite CSS Minimized Search*/

    color: var(--color-header);

    position: absolute;
    right: 0;
    top: 0;

    padding: 3px 3px 2px 5px;
    height: 2em;
}

#search-top-box input.text.empty {
    /* Overwrite CSS Minimized Search*/

    position: absolute;
    right: 0;
    top: 0;

    padding: 3px 3px 33px 5px;
    height: 2em;
}

#search-top-box form:before{
        /* Overwrite CSS Minimized Search*/

    content: ' ';

    padding: 5px;
    background-image:url("/local--files/files/search_icon.png"); /* Image from https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon.svg.png */
    background-size: 2em auto;
    background-repeat: no-repeat;
    background-position: left 5px bottom 5px;

}

 
#top-bar {
    background-color: var(--bg-topmenu);
    border-bottom: 2px solid var(--bg-topmenu);
    color: #98A881;
    left: 0;
    top: 125px;
    width: 100%;
}
 
#top-bar ul {
    background-color: var(--bg-topmenu);
    height: 1.2em;
    padding: 2px 5% 7px max(265px,16em);
}

#top-bar ul li {
    border: 2px solid #e8e1c6;
    border-radius: 3px;
}

#top-bar ul li a {
    padding: 0px 1em;
    font-family: TrajanPro-Bold, "Trajan Pro", "Times New Roman", Times, serif;

}

#top-bar ul li ul {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;

}
 
#top-bar ul li ul li {
    margin-left: -2px;
    border: inherit;
}


#top-bar ul li ul li:last-of-type {
    /*box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);*/
}

#top-bar ul li ul li:first-of-type {
    margin-top: 3px;
}
 
#top-bar a, #top-bar ul li ul li a {
    color: var(--color-topmenu-link);
    text-decoration: none;
    background-color: var(--bg-topmenu);
    line-height: 1.2em;
    list-style-position: inside;
    padding-top: 2px;
    padding-bottom: 4px;
    width: inherit;
}

#top-bar a:hover, #top-bar li ul li a:hover {
    text-decoration: none;
    background-color: var(--color-topmenu-link);
    color:black;
}
 
/* ###### Side Bar ########################## */
#side-bar {
    float: left;
    width: 12em;
    padding: 0em 1em 1em 1em;
    margin: 0 0 0.5em 0;
    clear: left;
    background: var(--bg-sidebar);
    /* top: 22px; */
    margin: 22px 10px 22px 22px;
    border: #393b28 solid 5px;
    border-radius: 20px;
}
 
#side-bar ul{
    display: block;
    padding: 0;
    margin: 2px 0px;
    list-style-image: url("/local--files/forest/leaf-DkBg.png");
}
#side-bar ul li{
    margin: 0;
    display:block;
}
 
#side-bar li a {
    margin: 0;
    padding-top: 2px;
    padding-bottom: 2px;
    display: block;
    padding-left: 10px;
    border-bottom: 1px solid #C5B876;
    border-top: 0;
    color: var(--color-sidebar);
    text-decoration: none;
}
#side-bar li a:hover {
    background-color: var(--bg-sidebar-link-hover);
}
 
#side-bar p {
    display: block;
    min-height: 35px;
    min-width: 182px;
    margin: 25px 0px 0px 0px;
    text-align: center;
    background-image: url("/local--files/files/sbheaderbg-hover.png");
    background-repeat: no-repeat;
    background-size:cover;
    padding: 10px 0px 0px 0px;
    text-decoration: none;
    color: #EEE4C8;
}

#side-bar p a {
    text-decoration: none;
    color: #EEE4C8;
}

#side-bar p a:hover {
    text-decoration: none;
    background-color: transparent;
    color: #EAD038;
}
 
/* ### Interface Elements ################### */
.edit-section-button {
     background-color: #F0EDDC;
}
 
.edit-section.content {
     border: 1px solid #CD8B80;
}
 
.change-textarea-size a {
     color: #322E1E;
     background-color: #F0EDDC;
     border: 1px solid #C5B876;
}
 
.preview-message {
     border: 1px dashed #C5B876;
     background-color: #E6C5BF;
}
 
#page-version-info {
     border: 1px dashed #C5B876;
     background-color: #E6C5BF;
}
 
#lock-info {
     background-color: #E2DBBA;
     border: 1px solid #C5B876;
}
 
a.action-area-close:hover {
     background-color: #E2DBBA;
}

.syntax {
    font-family: monospace;
    font-weight: bold;
    font-size: 115%;

    /* "Open Sans", Roboto, Lato, Verdana, sans-serif; */
    /* monospace */
}
 
/* ### Wiki-Specific Elements ############### */

/*  RATING BUTTON - Borrowed from SCP Foundation http://scp-wiki.wikidot.com/forum/t-869367/what-is-a-module-rate  */
/* Page Rating Module Customizations */
.page-rate-widget-box {
	display: inline-block;
	border-radius: 5px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
	margin-bottom: 10px;
	margin-right: 2em;

}

.page-rate-widget-box .rate-points {
	background-color: #633 !important;
	border: solid 1px #633;
	border-right: 0;
	border-radius: 5px 0 0 5px;
	color: white;

	padding: 2px;
}

.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
	background-color: #fff6f0;
	border-top: solid 1px #633;
	border-bottom: solid 1px #633;
	font-weight: bold;

	padding: 2px;
}

.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
	background: transparent;
	color: #633;
	padding: 0 4px;
	margin: 0 1px;

}

.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
	background: #633;
	color: #fffff0;
	text-decoration: none;


}

.page-rate-widget-box .cancel {
	background-color: #633;
	border: solid 1px #633;
	border-left: 0;
	border-radius: 0 5px 5px 0;

	padding: 2px;
}

.page-rate-widget-box .cancel a {
	background: transparent;
	text-transform: uppercase;
	color: #966;
}

.page-rate-widget-box .cancel a:hover {
	border-radius: 0 3px 3px 0;
	background: #633;
	color: #fffff0;
	text-decoration: none;
}


/* TABLES */

table.wiki-content-table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: 1em;
    font-size: 0.9em;
}

table.wiki-content-table th {
     border: var(--border-table-header);
     background-color: var(--bg-table-header);
     color: var(--color-table-header);
     text-align:center;
     padding: 0.3em;
}

table.wiki-content-table tbody tr {
    border-bottom: var(--border-table-row);
    background-color: var(--bg-table-row);
}

table.wiki-content-table tbody tr:hover {
    background-color: var(--bg-table-row-selected);
}

table.wiki-content-table tbody tr:nth-of-type(even) {
    background-color: var(--bg-table-row-alt);
}

table.wiki-content-table tbody tr:nth-of-type(even):hover {
    background-color: var(--bg-table-row-selected);
}

table.wiki-content-table tbody tr:last-of-type {
    border-bottom: 2px solid var(--bg-table-header);
}

table.wiki-content-table td {
     color: var(--color-table-row);
     border: var(--border-table-row);
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.10);
}

table.wiki-content-table td a {
     color: var(--color-table-row);
}

table.wiki-content-table td a:hover {
     background-color:transparent;
}


/* /END ###  NEW TABLE STYLES - 20201216 (Dragaxus)  ### */


/* Bio Cards */
@keyframes cardfadein {
  from {
        color: hsla(0, 0, 0, 0);
    }
  to {
        color: inherit;
    }
}


.bio-container {
    box-sizing: border-box;
    margin: 0 -5px;
}

.bio-container:after {
  /*content: "";*/
  display: table;
  clear: both;
}


.bio-container .pager {
    width: 100%;
    float: left;
}



.bio-card {
    box-sizing: border-box;
    width: 22%;
    float: left;
    padding: 0 10px;
    margin: 0.5em 5px 1.5em 5px;
    display: block;

    animation: ease;
    animation-name: fadein;
    animation-duration: 1.7s;
    transform: scale(1);

    height: 12em;
}

#main-content .bio p {
    margin: 0;
}

.bio {
    box-sizing: border-box;
    padding: 15px;
    text-align: center;
    border: solid 1px #999999;
    background-color: #F7F7E9;
    color: #444;
    overflow: hidden; /*clearfix*/
    box-shadow: 5px 5px 0 0 #999;
}




/* Responsive columns - Reduced column layout (vertical) on smaller screens */
@media screen and (max-width: 1650px) {
  .bio-card {
    width: 30%;
    margin: 5px;

  }
}

@media screen and (max-width: 1400px) {
  .bio-card {
    width: 48%;
    margin: 1em 5px 2em 5px;
  }
}

@media screen and (max-width: 800px) {
  .bio-card {
    width: 100%;
    margin: 0.5em 0;
  }
}

 /* /END     Bio Cards */


 
#toc {
     border: 1px dashed var(--color-accent);
     background-color: #F0EDDC;
}
 
.code{
    background-color: #F0EDDC;
     border: 1px dashed #C5B876;
}
 
div.wiki-note {
     border: 1px solid #C5B876;
}
 
.gallery-item {
     border: 1px solid #F0EDDC;
}
 
/* ###### History ########################### */
table.page-history td.optionstd a {
     border: 1px solid #635C3B;
}
 
.diff-table td.from, .diff-table td.to {
     border: 1px dashed #635C3B;
}
 
.inline-diff ins {
     background-color: #98A881;
}
 
.inline-diff del {
     background-color: #CD8B80;
}
 
table.page-compare td, table.page-compare th {
     border: 1px solid #635C3B;
}
 
.page-source {
     border: 1px dashed #635C3B;
}
 
.wiki-parse-error {
     color: #9B1701;
}
 
.pager a {
     border: 1px solid #635C3B;
}
 
.pager .current {
     background-color: #C5B876;
     color: #322E1E;
     border: 1px solid #322E1E;
}
 
/* ###### Files ############################# */
table.page-files .highlight {
     background-color: #F0EDDC;
}
 
/* ###### Avatar ############################ */
a.avatar-hover, a.avatar-hover:hover {
     color: #322E1E;
}
 
/* ###### Inline Widgets #################### */
.error-inline, .error-block {
     color: #9B1701;
     border: 1px solid #9B1701;
}
 
.warning-block {
     border: 1px solid #EECB02;
     color: #322E1E;
}
 
.help-block {
     border: 1px solid #98A881;
     color: #192902;
}
 
/* ###### Private Messages ################## */
.pmessage .header {
     border: 1px solid #C5B876;
     background-color: #F0EDDC;
}
 
/* ### Forms ################################ */
table.form.grid td, table.form.grid th {
     border: 1px solid #C5B876;
}
 
table.form td div.sub, form div.sub {
     color: #635C3B;
}
 
table.form tr.invalid-value-row td {
     background-color: #F6E580;
}
 
table.form div.field-error-message, tr.invalid-value-row div.field-error-message {
     color: #9B1701;
}
 
hr {
     color: #F0EDDC;
     background-color: #C5B876;
}
 
/* ###### Form Elements ##################### */
div.buttons input, input.button, button, file, a.button {
     background-color: var(--bg-button);
     color: var(--color-button);
     border: var(--border-button);
}
 
div.buttons input:hover, input.button:hover, button:hover, a.button:hover {
     background-color: var(--bg-button-hover);
     color: var(--color-button-hover);
}
 
input.button.disabled, div.buttons input.disabled {
     background-color: #F0EDDC;
     color: #635C3B; 
}
 
input.checkbox {
     background-color: #F0EDDC;
     color: #322E1E; 
}
 
input.text, textarea, select {
     border: var(--border-input);
     background-color: var(--bg-input);
     color: var(--color-input); 
}
 
input.text.invalid {
     border-color: #9B1701;
}
 
div.note {
     border: 1px solid #F0EDDC;
     background-color: #E2DBBA;
}
 
div.note-block {
     border: #9B1701;
}
 
/* ###### Useful Elements ################### */
div.site-list-item:hover {
     background-color: #F0EDDC;
}
 
.search-highlight {
     background-color: #EECB02;
}
 
.self-ads {
     border: 1px solid #C5B876;
}
 
/* ### Other Widgets ######################## */
/* ###### Foldable Lists #################### */
div.foldable-list-container li.folded {
     color: #9B1701;
}
 
div.foldable-list-container li.unfolded {
     color: var(--color-accent);
}
 
/* ###### Tabview ########################### */
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {     
     background-color: #E2DBBA;
     border-color: #C5B876;
     color: #322E1E;
}
 
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {        
     border-color: #C5B876;
}
 
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover {
     background-color: #98A881;
     color: #322E1E;
}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
     background-color: var(--color-accent);
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
      border-color: #192902;
}
 
.yui-navset .yui-content {
     background-color: #E2DBBA;
}
 
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
     border: 1px solid #C5B876;
     border-top-color: #192902;
}
 
.yui-navset-left .yui-content {
     border: 1px solid #C5B876;
     border-left-color: #192902;
}
 
.yui-navset-bottom .yui-content,
.yui-navset .yui-navset-bottom .yui-content {
     border: 1px solid #C5B876;
     border-bottom-color: #192902;
}
 
/* ###### Included Files #################### */
/* ###### text_highlighter.css ############## */
.hl-default {
color: #322E1E;
}
 
.hl-code {
color: #322E1E;
}
 
.hl-brackets {
color: #322E1E;
}
 
.hl-comment {
color: var(--color-accent);
}
 
.hl-quotes {
color: #4E0C01;
}
 
.hl-string {
color: #4E0C01;
}
 
.hl-identifier {
color: #322E1E;
}
 
.hl-builtin {
color: var(--color-accent);
}
 
.hl-reserved {
color: #987F81;
}
 
.hl-inlinedoc {
color: #4E0C01;
}
 
.hl-var {
color: var(--color-accent);
}
 
.hl-url {
color: #4E0C01;
}
 
.hl-special {
color: #4E0C01;
font-weight: bold;
}
 
.hl-number {
color: #4E0C01;
}
 
.hl-inlinetags {
color: #F6E580;
font-weight: bold;
}
 
.hl-gutter {
background-color: #E2DBBA;
color: #F0EDDC
}
 
/* ###### autocomplete.css ################## */
.yui-ac-content{
     border: 1px solid #192902;
     background: #CCC;
}
 
.autocomplete-list li.yui-ac-highlight {
     background-color: #F0EDDC;
}
 
/* ### Forum ################################ */
.forum-group div.head{
     background-color: var(--color-accent);
     color: #E2DBBA;
     border: 1px solid #192902;
}
 
.forum-group table td{
     border: 1px solid #F0EDDC;
}
 
.forum-group table td.name .description{
     color: #C5B876;
}
 
.forum-group table tr.head td{
     background-color: #F0EDDC;
}
 
/* ###### Category View ##################### */
.forum-category-box .description-block{
     border: 1px solid #E2DBBA;
     background-color: #F0EDDC;
}
.forum-category-box .description-block .statistics{
     color: #C5B876;
}
 
.forum-category-box table{
     border: 1px solid #E2DBBA;
}
.forum-category-box table td{
     border: 1px solid #F0EDDC;
}
.forum-category-box table tr.head td{
     background-color: #F0EDDC;
}
.forum-category-box table td.name .description{
     color: #C5B876;
}
 
/* ###### New Thread ######################## */
.forum-new-thread-box .description{
     border: 1px solid #E2DBBA;
     background-color: #F0EDDC;
}
.forum-new-thread-box .description .statistics{
     color: #C5B876;
}
 
/* ###### Thread View ####################### */
.forum-thread-box .description-block{
     border: 1px solid #E2DBBA;
     background-color: #F0EDDC;
}
.forum-thread-box .description-block .head{
     color: #C5B876;
}
.forum-thread-box .description-block .statistics{
     color: #C5B876;
}
 
.forum-thread-box .action-area{
     border: 1px solid #F0EDDC;
}
 
.thread-container .post .options a{
     color: #98A881;
}
.thread-container .post .head{
     background-color: #F0EDDC;
}
 
.thread-container .post .long .changes a {
     color: #98A881;
}
 
.thread-container .post .short{ display: none;
     background-color: #F0EDDC;
}
 
.thread-container .post .short .options{
     color: #98A881;
}
 
.post-container.fordelete{
     border: 2px solid #CD8B80;
}
 
div.new-post a{
     border: 1px solid #E2DBBA;
     background-color: #F0EDDC;
}
 
/* ###### Recent Posts ###################### */
.forum-mini-stat .item .info{
     color: #C5B876;
}
 
/* ### editor.css ########################### */
.wd-editor-toolbar-panel a{
background-color: #F0EDDC;
}
.wd-editor-toolbar-panel a:hover{
border-color: var(--color-accent);
}
 
.wd-editor-toolbar-panel ul li:hover ul, .wd-editortoolbar-
panel ul li.sfhover ul {
     background-color: #322E1E;
     border: 2px solid #192902;
}
.wd-editor-toolbar-panel li.hseparator{
     background-color: #322E1E;
}
 
/* ### odialog.css ########################## */
.odialog-shader{
     background-color: #322E1E;
}
 
.owindow{
     background-color: #F0EDDC;
     border: 2px solid #E2DBBA;
}
 
.owindow .title{
     background-color: #F0EDDC;
}
 
.owindow .button-bar a{
     background-color: #F0EDDC;
     border: 1px solid #E2DBBA;
}
.owindow .button-bar a:hover{
     background-color: #E2DBBA;
}
 
/* ###### Different Boxes / Dialogs ######### */
.box444{
     background-color: #F0EDDC;
}
 
.box444 .button-bar{
     background-color: #F0EDDC;
}
 
.hovertip{
     border: 2px solid #C5B876;
     background-color: #F0EDDC;
}
 
/* ### Jquery Lightbox ###################### */
#lightbox-container-image-box {
     background-color: #F0EDDC;
}
 
#lightbox-container-image-data-box {
     background-color: #F0EDDC;
}
 
#lightbox-container-image-data {
     color: #C5B876;
}
 
/* ### Navi Bar ############################# */
#navi-bar {
     background-color: #E2DBBA;
     color: #322E1E;
}
 
#navi-bar a {
     color: var(--color-accent);
}
 
#navi-bar .new-site input.empty{
     color: #C5B876;
}
 
#navi-bar .action-buttons {
     color: #322E1E;
}
 
#navi-bar .action-buttons a {
     color: #322E1E;
}
 
#navi-bar .join {
     color: #322E1E;
}
 
#navi-bar .random-site {
     background-color: #F0EDDC;
     color: #322E1E;
}
 
#navi-bar .random-site:hover {
     border-color: #322E1E;
}
 
/* ### Promo Footer ######################### */
#footer-bar {
border-top: 1px solid #E2DBBA;
}
.form-table .form-error {
border: 1px dotted #CD8B80;
}
 
.form-table .form-hinted {
color: #C5B876;
}
 
.form-table .form-message {
color: var(--color-accent);
}