/*----------------------------
    Default element styles
----------------------------*/

/* Normal, standard links. */
a:link, a:visited
{
	color: #005177;
	text-decoration: none;
}

a:hover
{
	color: #cc3333;
	text-decoration: underline;
	cursor: pointer;
}

/* Links that open in a new window. */
a.new_win:link, a.new_win:visited
{
	color: #346;
	text-decoration: none;
}
a.new_win:hover
{
	text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
	empty-cells: show;
}

/* By default (td, body..) use Verdana in black. */
body, tr
{
    color: #000000;
    font-size: small;
    font-family: verdana, sans-serif;
}

body
{
	background: #AFC6DB url(../images/colour-background.gif);
}

/* Standard horizontal rule.. */
hr
{
    color: #6394bd;
    background-color: transparent;
}
/* A more colorful hr.. */
.hrcolor
{
    height: 1px;
    border: 0;
    color: #6394bd;
    background-color: #6394bd;
}

p /* keep paragraphs from stretching out too far */
{
    max-width: 60em;
}

/*-----------------
    List styles
-----------------*/

/* a quick reset list class. */
ul.reset, ul.reset li
{
	padding: 0;
	margin: 0;
	list-style: none;
	color: #000;
}

ul.icons
{
    display: flex;
    flex-direction: row;
	padding: 0;
	margin: 0;
	list-style: none;
}
ul.icons li
{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}   
ul.icons li img
{
    margin: 2px;
}

ul.horz
{
	padding: 0;
	margin: 0;
	list-style: none;
	color: #000;
}

ul.smalltext,
ul.left_admmenu
{
    padding: 0;
	margin: 0;
	list-style: none;
}

dt {
    font-weight: bold;
    margin: 0;
    white-space: nowrap;
}

dd {
    padding: 0.2em;
    margin: 0;
}

/*---------------------
    Standard styles
---------------------*/

.fillspace
{
    flex: 1;
}

.normaltext
{
	font-size: 1em;
	line-height: 1.2em;
}

.clear
{
	clear: both;
}

/*
.content {
    padding: 0.5em;
}
*/

.flexrow {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
}

/*------------------------------
    Standard dropdown menus.
------------------------------*/

div#main_menu
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    padding: 0.1em;
}

ul.dropmenu, ul.quickbuttons
{
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
	list-style: none;
	line-height: 1em;
	padding: 0;
	margin: 0;
}

ul.quickbuttons>li>a, ul.dropmenu>li>a
{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    margin: 0px 2px;
}

ul.quickbuttons>li>a>span, ul.dropmenu>li>a>span
{
    grid-row: 1/2;
    grid-column: 1/2;
    z-index: 1;

	background: lightgrey;
    border: 1px solid black;
    border-radius: 2px;

	color: #000;
	text-decoration: none;
    white-space: nowrap;

    padding: 1px 2px 2px 2px;
    margin-top: 6px;
}

ul#dropdown_menu_1>li>a>span
{
    margin: 0;
}

ul.quickbuttons>li>a>img, ul.dropmenu>li>a>img
{
    position: absolute;
    z-index: 2;
    margin-left: 3px;
}

/* the hover effects */
ul.dropmenu>li>a:hover, ul.quickbuttons>li>a:hover
{
	color: #000;
	cursor: pointer;
	text-decoration: none;
}

ul.quickbuttons>li>a:hover>span, ul.dropmenu>li>a:hover>span
{
	background: #eee;
}

ul.dropmenu>li>a.active>span
{
	color: #fff;
	font-weight: bold;
	background: #456;
}

/*--------------------------------
    Second level dropdown menu
--------------------------------*/

ul.dropmenu li div.submenu2
{
    position: absolute;
	z-index: 90;
	display: none;
    padding: 0.2em;
}

ul.dropmenu li:hover div.submenu2
{
    display: inline-block;
}

div.submenu2 ul
{
    display: flex;
    flex-direction: column;
	list-style: none;
	font-weight: normal;
    background: lightgrey;
	padding: 0;
    margin: 0;
    border: 1px solid #005A8C;
}

div.submenu2 li
{
    display: flex;
    flex-direction: row;
    white-space: nowrap;
}

div.submenu2 li a
{
    flex: 1;
    display: flex;
    flex-direction: row;
}

div.submenu2 li a span
{
    flex: 1;
	display: block;
	padding: 0.2em;
}

/* the hover effects on level2 and 3 */
div.submenu2 li a:hover /*, div.submenu2 li:hover a*/
{
	color: #000;
	text-decoration: none;
}

div.submenu2 li a:hover span
{
	background: #fff;
}

/*-------------------------------
    Third level dropdown menu
-------------------------------*/

div.submenu2 li div.submenu3
{
    height: 1em;
    width: 0em;
	display: none;
}

div.submenu2 li:hover div.submenu3
{
    display: block;
}

div.submenu2 li div.submenu3 div.padding
{
    display: inline-block;
    padding-left: 0.4em;
}

div.submenu3 ul
{
    display: flex;
    flex-direction: column;
	list-style: none;
	font-weight: normal;
    background: lightgrey;
	padding: 0;
    margin: 0;
    border: 1px solid #005A8C;
}

.dropmenu li li.additional_items
{
	background-color: #718dad;
	border-top: 1px dashed #005A8C;
}

/*---------------------------------------- 
   Styles for the standard button lists
----------------------------------------*/

/* 0.4em around whole list + 0.1em around each button = 0.5em total = 0.2em between buttons */
.buttonlist
{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 4px;
}

.buttonlist ul {
    margin: 0;
    padding: 0;
    float: right;
}

.buttonlist ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}

span.rounded_button
{
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 100px;
    border: solid black 1px;
    padding: 0.25em 0.5em 0.25em 0.5em;
    height: 1.6em;
    background-image:
        -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.05, rgb(225,225,225)),
        color-stop(0.95, rgb(175,175,175))
    );
    color: black;
	line-height: 1em;
	font-family: verdana, sans-serif;
}

span.rounded_button_container
{
    margin: 1px;
}

/* don't underline links when hovering */
span.rounded_button_container a:hover
{
	text-decoration: none;
}

.buttonlist span a
{
	color: #000000;
	font-size: 90%;
	font-weight: bold;
	cursor: pointer;
}

/*----------------------
    Main page loyout
----------------------*/

/* This division wraps the entire forum when a forum width is set. */
div#wrapper
{
	margin: 0 auto;
	min-width: 764px;
	max-width: 2300px;
}

/* the framing graphics */
div#header
{
	background: #FFFFFF;
	border: 1px solid #6E94B7;
	margin-bottom: 1em;
}

div#top_section
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 1px solid #6E94B7;
}

img#smflogo
{
    width: 341px;
    height: 50px;
    margin: 8px;
}

img#flaglogo
{
    width: 44px;
    height: 33px;
    margin: 8px 16px 8px 8px;
}

div#upper_section
{
    background: yellow;
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 1px solid #6E94B7;
}

/* Shows user's info in upper section */
div.user
{
    display: flex;
    justify-content: center;
    flex-direction: column;

    margin: 8px;
}

div.user ul
{
	padding: 0;
	margin: 0;
	list-style: none;
}

.news
{
    padding: 0.4em;
    border-top: 1px solid #6E94B7;
}

#info_msg
{
	padding: 1.0em;
	background: #FFFFFF;
	border: 1px solid #6E94B7;
    margin-bottom: 0.5em;
}

/* the content section */
#content_section
{
	display: flex;
    flex-direction: column;
    align-items: center;

	background: #FFFFFF;
	border: 1px solid #6E94B7;

	padding: 0.5em;
    margin-bottom: 0.5em;
}

.section_wrapper
{
    display: flex;
    flex-shrink: 1;
    flex-direction: column;

    align-items: stretch;
    margin: 0 auto;
}

.section_wrapper>div
{
    margin: 0.5em;
}

/* The navigation list (i.e. linktree) */
.navigate_section ul
{
	display: flex;
    flex-direction: column;

	margin: 0;
	font-size: 0.9em;
    padding: 0;
	overflow: hidden;
	list-style: none;
	clear: both;
	width: 100%;
}
.navigate_section ul li
{
	display: flex;
    flex-direction: row;
    align-items: center;
	font-weight: bold;
}
.navigate_section ul li a
{
	color: #000000;
	white-space: pre;
}

#quick_login_bar {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

/* The footer wih copyright links etc. */
#footer_section
{
	text-align: center;
}

/*------------------------
    Title bar, Cat bar
------------------------*/

div.tr
{   
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    padding: 0.0em;
}
    
div.td
{   
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.4em;
    row-gap: 0.4em;
}

div.td > p
{
    margin: 0;
}

div.td.border, div.tr.border
{   
    outline: 1px solid #6e94b7;
} 

div.title_bar, div.cat_bar, .pagesection, .pagesection_top, .pagesection_bottom
{
    display: flex;
    justify-content: space-between;
    align-items: center; /* vertical alignment */
}

div.bottom_section
{
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* vertical alignment */
}

.title_bar, .cat_bar, .pagesection
{
	border-right: 1px solid #6e94b7;
	border-bottom: 1px solid #6e94b7;
}

.pagesection_top
{
	border-top: 1px solid #6e94b7;
	border-right: 1px solid #6e94b7;
	border-left: 1px solid #6e94b7;
}

.pagesection_bottom
{
	border-right: 1px solid #6e94b7;
	border-left: 1px solid #6e94b7;
	border-bottom: 1px solid #6e94b7;
}

/* title_bar: dark blue title bar */
.titlebg, .title_bar, .title_bar th, .title_bar a:link, .title_bar a:visited
{
	background: #6e94b7;
	color: rgb(214,224,234);
	color: #f6f9fb;
}

.title_bar a:link, .title_bar a:visited
{
	color: #f6f9fb;
    font-weight: bold;
}

.title_bar a:hover
{
	color: #cc3333;
	color: #f6f9fb;
	text-decoration: underline;
	cursor: pointer;
}

/* cat_bar: light blue half rounded section bar */
.catbg, .cat_bar, .pagesection, .pagesection_top, .pagesection_bottom
{
	color: #005177;
    background: rgb(214,224,234);
    background-image:
        -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.05, rgb(191,208,226)),
        color-stop(0.95, rgb(214,224,234))
    );
}

.title_bar h1
{
	font-family: verdana, arial, helvetica, sans-serif;
    padding: 12px;
    margin: 0;
}


.titletext, .title_bar h3, .cat_bar h3, .pagelinks, th
{
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 1.1em;
    padding: 4px;
    margin: 0;
}

.cat_bar h4, .pagesection h4, .pagesection img, h4
{
	font-family: verdana, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 0.9em;
    padding: 4px;
	margin: 0;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg, #preview_body
{
	color: #000;
	background: #AFC6DB;
}
.windowbg2
{
	color: #000;
	background: #f8f8f8;
}
.windowbg3
{
	color: #000;
	background-color: #cacdd3;
}

/* Sticky topics get a different background */
.stickybg
{
	color: #000;
	background: #8EADC9;
}
.stickybg2
{
	background: #D8E1E7;
}

/* Locked posts get a different shade, too! */
.lockedbg
{
	background: #d4dce2;
	font-style: italic;
}
.lockedbg2
{
	background: #d8e1e7;
	font-style: italic;
}

/* Messages that somehow need to attract the attention. */
.alert, .error
{
	color: red;
}

.errorbox
{
    /*justify-self: start;*/
    border: 1px solid #cc3344;
    color: red;
    font-weight: bold;
    background-color: #ffe4e9;
    margin: 0.5em;
    padding: 0.5em;
}
.errorbox dl
{
    margin: 0;
    padding: 0;
}
.errorbox dl dt
{
    white-space: normal;
}

.warningbox
{
    /*justify-self: start;*/
    border: 1px solid #998822;
    color: #998822;
    font-weight: bold;
    background-color: #fff4e9;
    margin: 0.5em;
    padding: 0.5em;
}

.confirmbox
{
    border: 1px solid #33cc44;
    color: green;
    font-weight: bold;
    background-color: #e4ffe9;
    margin: 0.5em;
    padding: 0.5em;
}
.confirmbox ul, .infobox ul, .errorbox ul, .warningbox ul
{
    padding-left: 1.25em;
    margin: 0;
}

.confirmbox dd, .infobox dd, .errorbox dd, .warningbox dd
{
    padding: 0;
    margin: 0;
}

.infobox
{
	border: 1px solid #34c;
    color: blue;
	background: #e4e9ff;

    font-weight: bold;
    padding: 0.5em;
}

/*-------------------------
    Borders and Margins
-------------------------*/

.tborder
{
	border-top: 1px solid #6E94B7;
	border-left: 1px solid #6E94B7;
}

.bborder
{
	border-right: 1px solid #6E94B7;
	border-bottom: 1px solid #6E94B7;
}

.topmargin
{
    margin-top: 1em;
}

.botmargin
{
    margin-bottom: 1em;
}

.content_box {
    flex: 1; /* fill available space in parent */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 4px;
}

.pad
{
    padding: 0.4em;
}

/* a general table class */
table.table_grid
{
    width: 100%;
	border-collapse: collapse;
}
table.table_grid td
{
	padding: 0.5em;
	border-bottom: 1px solid #6E94B7;
	border-right: 1px solid #6E94B7;
}

/*
table.table_grid thead tr.catbg th
{
	white-space: nowrap;
}

.table_grid tbody.header td.catbg
{
	padding-right: 9px;
	color: #005177;

    background: rgb(214,224,234);
    background-image:
        -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.05, rgb(191,208,226)),
        color-stop(0.95, rgb(214,224,234))
    );

	font-size: 0.9em;
	overflow: hidden;
}
*/

/* GenericList */

/*
.table_grid th.lefttext
{
	padding: 0 0.7em;
}
.lefttext
{
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}
*/

td.stats
{
	text-align: center;
}

td.lastpost
{
	vertical-align: middle;
}

div.lastpost_row
{
    display: flex;
    flex-direction: row;
}


div.subject_col
{
    display: flex;
    flex-direction: column;
}

div.lastpost_col
{
    display: flex;
    flex-direction: column;
}

span.lastpost
{
    white-space: nowrap;
    vertical-align: middle;
}

span.lastpost span
{
    vertical-align: middle;
}

span.lastpost img
{
    vertical-align: middle;
}

/* a descriptive style */
.description, .description_board, .plainbox
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;

	padding: 0.4em;
	font-size: 0.9em;
	line-height: 1.4em;
	border: 1px solid #bbb;
	background: #f5f5f0;

    margin: 0;
}

.clearbox
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;

}

.jump_to
{
    margin-left: auto;
}

/* Selects are a bit smaller, because it makes them look even better */
select
{
    font-size: 8pt;
    font-weight: normal;
    color: #000000;
    font-family: verdana, sans-serif;
    background-color: #afc6db;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea
{
    font-size: 9pt;
    color: #000000;
    font-family: verdana, sans-serif;
    background-color: #afc6db;
}

input.disabled textarea.disabled
{
    font-size: 9pt;
    color: #333333;
    font-family: verdana, sans-serif;
    background-color: #afafaf;
}

/* Checkboxes shouldn't have a background color. */
input.check
{
    background-color: transparent;
}

/*-------------------
   Admin Sections
   - Profile
   - Moderate
   - PM
-------------------*/

div#admin_wrapper_sidebar
{
    /*align-self: center;*/
    display: grid;
    grid-template-columns: 0fr 1fr;
    grid-gap: 0.25em 0.5em;
    grid-template-areas:
        ". linktree"
        "sidebar main";
}

div#admin_wrapper_dropdown
{
    /*align-self: left;*/
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 0.25em;
    grid-template-areas: "linktree" "dropdown" "main";
}

.navigate_section
{
    grid-area: linktree
}

/* horizontal container used by pages with the side menu */
div#main_container
{
    display: contents;
    /*
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    */
}

#left_admsection
{
    grid-area: sidebar;
    align-self: start;
    /*margin-right: 0.5em;*/
}

#main_admsection
{
    grid-area: main;
}

ul.left_admmenu
{
    padding: 4px;
	border-bottom: 1px solid #6e94b7;
	border-right: 1px solid #6e94b7;
}

ul.left_admmenu li
{
    white-space: nowrap;
}

div#admin_menu
{
    grid-area: dropdown;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    
    /*padding: 4px;*/
}

span#admin_menu
{
    padding: 0;
    margin: 0;
}

/*
#admin_menu ul.dropmenu
{
    margin-left: 0.2em;
}

#admin_menu ul.dropmenu li a.firstlevel
{
    margin: 0.2em 0.2em 0.2em 0.2em;
    padding: 0.0em 0.2em 0.0em 0.2em;
}
*/

/*--------------------
      Profile
--------------------*/

#profileview #detailedinfo dt, #profileview #detailedinfo dd
{
    min-width: 150px;
}

#basicinfo
{
    
}

/*------------------+
|      Forms        |
+------------------*/

dl
{
    margin: 0;
}

fieldset
{
    border: 0;
    margin: 0;
    padding: 0;
}

div.input_row
{
    align-self: flex-start;
    /*min-width: 400px;*/

    display: flex;
    flex-direction: row;

    justify-content: flex-start;
    align-items: center;
}

div.input_row select {
    height: 20px;
}

div.input_row input, div.input_row select{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

div.input_row dt {
    display: flex;
    flex-direction: row;

    font-weight: bold;
    text-align: right;
    padding: 0.2em;
    margin: 0;

    white-space: nowrap;
}

div.input_row dd {
    display: flex;
    flex-direction: row;

    padding: 0.2em;
    margin: 0;
}

/*----------------------
   Post Messsage Page   
----------------------*/


    .post_section
    {
        align-self: center;
    }

    dl#post_header {
        margin: 0;
        padding: 0.2em;
    }

    dl#post_header dt {
        width: 120px;
        flex-grow: 0;

        font-weight: bold;
        text-align: left;
        float: left;
        padding: 0.2em;
        margin: 0;
        white-space: nowrap;
    }

    dl#post_header dd {
        width: 560px;
        flex-grow: 1;

        display: flex;
        align-items: center;
        padding: 0.2em;
        margin: 0;
    }

    dl#post_header dd input.input_text {
        box-sizing: border-box;
        width: 100%;
    }

    dl#post_header dd img {
        padding: 0;
        margin-left: 0.5em;
    }

    /*------------------+
    |    Attachments    |
    +------------------*/

        ul.attachments
        {
            display: flex;
            align-items: flex-end;
            flex-wrap: wrap;
            list-style: none;
            line-height: 1em;
            padding: 0;
            margin: 0;
        }

        ul.attachments dt
        {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }
        

    /*------------------+
    |   Poll elements   |
    +------------------*/

        #edit_poll
        {
            display: flex; 
            flex-direction: column;
            align-items: flex-start;
            overflow: hidden;
        }

        #edit_poll fieldset#poll_main
        {
            display: flex;
            flex-direction: column;
            margin: 0;
            padding: 0.5em;
        }

        #edit_poll ul.poll_main
        {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #edit_poll ul.poll_main li
        {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 0;
        }

        #edit_poll ul.poll_main li input
        {
            margin-left: 0.5em;
        }

        #edit_poll div#poll_question
        {
            display: flex;
        }

        #edit_poll div#poll_question input
        {
            flex: 1;
        }

        #edit_poll fieldset#poll_options
        {
            /*align-self: flex-start;*/
            margin: 0;
            padding: 0.5em;
            
        }

        #edit_poll dl.poll_options
        {
            margin: 0;
            padding: 0;
        }

        #edit_poll dl.poll_options div.poll_input
        {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        #edit_poll dl.poll_options div.poll_input dt {

            width: 212px;
            flex-grow: 1;

            font-weight: bold;
            padding: 0.2em;
            margin: 0;
            white-space: nowrap;
        }

        #edit_poll dl.poll_options div.poll_input dd {

            width: 324px;
            flex-grow: 1;
            
            /*
            flex-basis: 300px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            */

            margin: 0;
            padding: 0.2em;
        }

        #edit_poll dl.poll_options dd div
        {
            width: 100%;
            height: 100%;

            display: flex;
            flex-direction: row;
            align-items: center;
                
        }

        #edit_poll dl.poll_options dd div input
        {
            margin: 0.2em;
        }

        #edit_poll dl.poll_options dd div label
        {
            white-space: nowrap;
        }

    /*-------------------+
    |  Message elements  |
    +-------------------*/

        div#bbcBox_message {
        /*
            display: flex;
            flex-direction: row;
            flex-wrap: wrap; 
            align-items: center;
        */
        }

        div#bbcBox_message div {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap; 
            align-items: center;
            margin: 0.1em;
        }

        div#bbcBox_message div img {
            margin: 0.1em;
        }

        div#bbcBox_message div select {
            margin: 0.1em;
        }

        div#bbcBox_message select {
            
        }

        div#smileyBox_message {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap; 
            align-items: center;
        }

        div#smileyBox_message div {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap; 
            align-items: center;
            margin: 0.1em;
        }

        div#smileyBox_message div img {
            margin: 0.1em;
        }

        div#message_area textarea {
            /*width: 60%;*/
            box-sizing: border-box;
        }

        ul.post_options
        {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: 0;
            padding: 0;
            list-style: none;
            overflow: hidden;
        }
        ul.post_options li
        {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 0;
        }

        dl#postAttachment, dl#postAttachment2
        {
            display: flex;
            align-self: flex-start;

            flex-direction: column;
            align-items: stretch;
            justify-items: flex-start;

            margin: 0.4em;
            padding: 0.2em;
            border: 1px solid #6E94B7;
        }


        dl#postAttachment dt, dl#postAttachment dd
        {
            flex: 1;
            padding: 0.2em;
            margin: 0;
            white-space: nowrap;
        }
        dl#postAttachment dd
        {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 0;
        }

        dl#postAttachment2 dt, dl#postAttachment2 dd
        {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.2em;
            margin: 0;
            white-space: nowrap;
        }

        dl#postAttachment dt, dl#postAttachment2 dt
        {
            font-weight: bold;
            text-align: left;
        }

        p#shortcuts, p#post_confirm_buttons
        {
            align-self: center;
            margin: 0;
            padding: 0.2em;
        }

        /*
        #recent div.catbg
        {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            
            color: #005177;
            background: rgb(214,224,234);
            background-image:
                -webkit-gradient(
                linear,
                left top,
                left bottom,
                color-stop(0.05, rgb(191,208,226)),
                color-stop(0.95, rgb(214,224,234))
            );

            border-right: 1px solid #6E94B7;
            border-bottom: 1px solid #6E94B7;

            font-family: verdana, arial, helvetica, sans-serif;
            font-weight: bold;
            font-style: normal;
            font-size: 1.0em;
            overflow: hidden;

            padding: 0.4em;
        }
        */

        #recent div.content
        {
            display: flex;
            flex-direction: column;
        }

        #recent div.content ul {
            align-self: flex-end;
        }

        /*
        #recent div.content ul li {
            display: flex;
            flex-direction: row;
            align-content: flex-end;
        }
        */

        /*
        ul.quickbuttons li a span {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: row;
            align-content: flex-end;
        }
        */


/*--------------------
    Register Page     
--------------------*/

.register_section
{
    align-self: center;
}

#confirm_buttons
{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;

    padding: 4px;
	border-right: 1px solid #6E94B7;
	border-bottom: 1px solid #6E94B7;
}

dl.register_form
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    align-items: center;
}

dl.sndb_news
{
    display: grid;
    grid-template-columns: 0fr 1fr;
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    align-items: center;
    border: none;
}

fieldset.content
{
    margin: 0;
    padding: 0;
    border: 0;
}

/*--------------------
      Login Page      
--------------------*/

.login_section
{
    align-self: center;
}

.login_section .input_row
{
    justify-content: center;
}

.login_section .input_row dt, .login_section .input_row dd
{
    min-width: 200px;
}

.login_section .input_row dt
{
    text-align: right;
}

.nowrap
{
    white-space: nowrap;
    vertical-align: middle;
}

dl#login
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 0.5em;
    grid-row-gap: 0.5em;

    align-items: center;
}

dl#login dt {
    justify-self: stretch;
    text-align: right;
    padding: 0;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}

dl#login dd {
    justify-self: stretch;
    padding: 0;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

dl#login dd input {
    margin: 0;
    padding: 0;
}

dl#login dd input.stretch {
    box-sizing: border-box;
    width: 100%;
}

/*--------------------
      Home Page
--------------------*/

/* horizontal container used by pages with the side menu */
div#home_page
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
}

div#home_page #left_section
{
    flex-shrink: 1;
    flex-grow: 0;
    flex-basis: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.5em;

    background: #ebf0f5;

	border-right: 1px solid #6E94B7;
	border-bottom: 1px solid #6E94B7;
    
}

div#cpms_link, div#forum_link
{
    text-align: center;
    font-size: 13px;
}

div#home_page #right_section
{
    padding: 0.5em;
    flex-grow: 1;
    background: #f8f8f8;

	border-right: 1px solid #6E94B7;
	border-bottom: 1px solid #6E94B7;
}

div#home_page #right_section div
{
    margin-top: -17px;
    margin-bottom: -13px;
}

div#home_page #right_section h1,
div#home_page #right_section h2,
div#home_page #right_section h3
{
    color: #4F87B5;

}

/*--------------------
      Board Page
--------------------*/

.table_grid tbody.content td.info a.subject
{
	font-weight: bold;
	font-size: 1.1em;
	font-family: verdana, sans-serif;
}

span.moderators
{
	font-size: 0.8em;
	font-family: verdana, sans-serif;
}

span.lastpost
{
	font-size: x-small;
	/*font-family: verdana, sans-serif;*/
}

span.board_desc
{
    font-size: 1.0em;
	font-family: verdana, sans-serif;
}

div#infocenter
{
    /*align-self: stretch;*/
}

div.infocenter_row
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /*top*/
}

div.infocenter_icon
{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;

    min-width: 36px;

    border-right: 1px solid #6E94B7;
    border-bottom: 1px solid #6E94B7;
}

div.infocenter_content
{
    flex: 1; /* fill available space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px;

    border-right: 1px solid #6E94B7;
    border-bottom: 1px solid #6E94B7;
}

/*----------------------
       Help Page
----------------------*/

/*
div#help_container
{
    padding: 0;
    margin: 0;

	border-left: 1px solid #6E94B7;
	border-top: 1px solid #6E94B7;
}
*/

/* Only to be used with children such as p, ul, etc which have top and bottom margins of 1em */
div.textblock
{
    margin-top: -1em;
    margin-bottom: -1em;
}

div.textblock > *
{
    margin-top: 1em;
    margin-bottom: 1em;
}

div.textblock > ul {
	padding-left: 1.5em;
}

div#help_container div#helpmain {

    /* gets background from parent windowbg2 */

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.4em;

    /* we can assume that on top there will be some kind of cat_bar with it's own border */
	/*border-left: 1px solid #6E94B7;*/
	border-right: 1px solid #6E94B7;
	border-bottom: 1px solid #6E94B7;
}

div#help_container div#helpmain p {
    padding: 0.2em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

div#help_container div#helpmain ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding-left: 1.8em;
}

/*----------------------
      Search Page
----------------------*/


div.search_section
{
    align-self: center;
}

fieldset#advanced_search, fieldset#simple_search, fieldset#search_boards
{
    align-self: flex-start;

    border: 0;
    padding: 0;
    margin: 0;
}

fieldset#advanced_search
{
    margin-bottom: 0.5em;
}

#advanced_search dt
{
    min-width: 10em;
}

#advanced_search dd.options ul
{
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: column nowrap;
    align-content: flex-start;
	list-style: none;
    align-self: flex-start;
}

#advanced_search dd.options ul li
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
}

#advanced_search dd.options ul li label
{
    padding: 0.2em;
}

#advanced_search dd.between
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
}
#advanced_search dd.between span
{
    padding: 0.2em;
}

#search_boards .title_bar a
{
    align-self: flex-start;
    padding: 0.5em;
    margin: 0;
    display: flex;
    align-items: center;
}

#search_boards .title_bar a strong
{
    margin-left: 0.5em;
}

#searchBoardsExpand
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

#searchBoardsExpand ul.ignoreboards, #searchBoardsBottom ul
{
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: column nowrap;
    align-content: flex-start;
	list-style: none;
    align-self: flex-start;
}

#searchBoardsExpand ul.ignoreboards li.category, #searchBoardsBottom ul li
{
    padding: 0.5em;
    min-width: 24em;
}

#searchBoardsBottom
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#searchBoardsExpand ul.ignoreboards ul
{
    margin: 0;
    padding: 0;
	list-style: none;
}

#searchBoardsExpand ul.ignoreboards ul li.board
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
}

#searchBoardsExpand ul.ignoreboards ul li.board label
{
    padding: 0.0em 0.5em;
}

#searchBoardsBottom #submitButton
{
    padding: 0.5em;
}

/* Search Results */

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

.topic_details h5
{
    margin: 0;
}

.topic_details .counter
{
    margin-right: 0.5em;
}

.topic_details > span.smalltext
{
    margin-left: auto;
}

/*----------------------
   Message Index Page
----------------------*/

#messageindex
{

}

#topic_icons
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    grid-auto-flow: column;
}


/*-------------------------
     Personal Messages
-------------------------*/

#personal_messages
{
    display: flex;
    flex-direction: column;
    justify-items: flex-start;
    align-items: stretch;
}

#personal_messages .capacity_bar
{
	background: #f0f4f7;
	display: block;
	margin: 0;
	height: 1em;
	border: 1px solid #adadad;
	width: 10em;
}
#personal_messages .capacity_bar span
{
	border-right: 1px solid #adadad;
	display: block;
	height: 1em;
}
#personal_messages .capacity_bar span.empty
{
	background: #a6d69d;
}
#personal_messages .capacity_bar span.filled
{
	background: #eea800;
}
#personal_messages .capacity_bar span.full
{
	background: #f10909;
}

/*--------------------
     Display Page
--------------------*/

/* navbar contains linktree and previous/next links */
.navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
}

/* navbar contains linktree and previous/next links */
.navbar_bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
}

.nextlinks, .nextlinks_bottom
{
    margin-left: auto;
}

/* author and topic informaton */
#messages
{
    display: flex;
    flex-direction: column;
}

/* leaves 20px for icon on left side */
span.icon, .icontext
{
    padding: 0px 0px 0px 20px;
    height: 16px;
}

span.author
{
	font-weight: bold;
	font-style: normal;
}

.msg_header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /*left*/
}

.msg_row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /*left*/
}

.msg_author {
    width: 15%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.5em;
}

.msg_content {
    flex: 1; /* fill available space in parent */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.5em;
}

div.attachment {
    display: inline-block;
    padding: 0.5em;
}

/*--------------------------
     Post template page
--------------------------*/

form
{
    margin: 0;
    padding: 0;
}
div.roundframe, div.core_posts
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 

    padding: 0.5em;

    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 0.5em;

	border-right: 1px solid #6E94B7;
	border-bottom: 1px solid #6E94B7;
}

div.roundframe>*
{
    margin: 0;
}

div.roundframe form
{
    display: contents;
}

div.roundframe form>*
{
    margin: 0;
}

div.roundframe p:first-child,
div.roundframe form p:first-child
{
    margin-top: 0;
}

div.roundframe p:last-child,
div.roundframe form p:last-child
{
    margin-bottom: 0;
}

div.roundframe p
{
    max-width: 60em;
}

div.roundframe h3,
div.roundframe h5
{
    margin-left: auto;
    margin-right: auto;
}

.messagewrapper
{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 5px solid black;
}

.keyinfo
{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.messageheader
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    /* leave 20px for icon */
    padding: 0px 0px 0px 20px;
}

.messageaction
{
    /* push action buttons all the way to the right */
    margin-left: auto;
}

.messagesubject
{
	font-weight: bold;
}

.post
{
    flex: 1;
}

.postarea div.flow_hidden
{
	width: 100%;
}

.moderatorbar_top
{
    width: 100%;
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end; /* bottom */
    padding: 0.5em 0 0 0;
}

.moderatorbar
{
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
}

#moderationbuttons
{
	overflow: hidden;
	font-size: 1.0em;
}

/* The "Quote:" and "Code:" header parts... */
.codeheader, .quoteheader
{
	color: #666;
	font-size: x-small;
	font-weight: bold;
	padding: 0 0.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature /*, .attachments */
{
	/*line-height: 1.0em;*/
	font-size: 0.80em;
}
.custom_fields_above_signature
{
	line-height: 1.0em;
	font-size: 0.80em;
}

/*-------------------
      Calendar
-------------------*/

#calendar {
    align-self: center;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-items: stretch;
}

#month_grid {
    margin-right: 8px;
}

.calendar_table
{
	margin-bottom: 8px;
	border: 1px solid #6E94B7;
}

/* Used to indicate the current day in the grid. */
.calendar_today
{
	background-color: #6394bd;
}

#month_grid
{
	width: 200px;
	text-align: center;
	float: left;
}
#month_grid div.cat_bar
{
	height: 25px;
}
#month_grid h3.catbg
{
	height: 25px;
	line-height: 27px;
}
#month_grid table
{
	width: 200px;
}
#main_grid table
{
	width: 100%;
}
#main_grid table h3.catbg
{
	text-align: center;
	height: 29px;
	border-top: 2px solid #fff;
	border-bottom: none;
}
#main_grid table.weeklist td.windowbg
{
	text-align: center;
	height: 50px;
	width: 25px;
	font-size: large;
	padding: 4px;
	/*border-bottom: 2px solid #fff;*/
}
#main_grid table.weeklist td.weekdays
{
	height: 49px;
	/*width: 100%;*/
    min-width: 600px;
	padding: 4px;
	text-align: left;
	vertical-align: middle;
	/*border-bottom: 2px solid #fff;*/
}
#main_grid h3.weekly
{
	text-align: center;
	padding-left: 0;
	font-size: large;
	height: 29px;
}
#main_grid h3 span.floatleft, #main_grid h3 span.floatright
{
	display: block;
	font-weight: bold;
}
#main_grid table th.days
{
    min-width: 100px;
	padding: 4px 0;
}
#main_grid table.weeklist h4.titlebg
{
	margin: 0 0 0 0;
	height: 23px;
	line-height: 25px;
	vertical-align: middle;
}
#main_grid table td.weeks
{
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
	font-size: large;
	border-top: 1px solid #6E94B7;
}
#main_grid table td.days
{
	vertical-align: top;
	text-align: center;
}

a.modify_event
{
	color: red;
}

span.hidelink
{
	font-style: italic;
}

#calendar_navigation
{
	text-align: center;
}

/*--------------------------------------
    Common classes for easy styling.
--------------------------------------*/

.floatright
{
	float: right;
}
.floatleft
{
	float: left;
}

.flow_auto
{
	overflow: auto;
}
.flow_hidden
{
	overflow: hidden;
}
.flow_hidden .windowbg, .flow_hidden .windowbg2
{
	/*margin-top: 2px;*/
}
.clear
{
	clear: both;
}
.clear_left
{
	clear: left;
}
.clear_right
{
	clear: right;
}
.overflow_auto
{
	overflow: auto;
}
.bottom_border
{
	border-bottom: 1px solid #6E94B7;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext, tr.smalltext th
{
	font-size: 0.85em;
	font-family: verdana, sans-serif;
}

.tinytext
{
	font-size: 0.75em;
	font-family: verdana, sans-serif;
}
.middletext
{
	font-size: 0.9em;
	line-height: 1em;
	font-family: verdana, sans-serif;
}
.normaltext
{
	font-size: 1em;
	line-height: 1.2em;
}
.largetext
{
	font-size: 1.4em;
}
.centertext
{
	margin: 0 auto;
	text-align: center;
}
.righttext
{
	margin-left: auto;
	margin-right: 0;
	text-align: right;
}
.lefttext
{
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}
.double_height
{
	line-height: 2em;
}
/* some common padding styles */
.padding
{
	padding: 0.3em 0.7em;
    padding: 4px;
}

/*------------------------------
    Some BBC related styles.
------------------------------*/

/* A quote, perhaps from another post. */
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote
{
	font-size: x-small;
	color: #000;
	line-height: 1.4em;
	background: url(../images/theme/quote.png) 0.1em 0.1em no-repeat;
	border: 1px solid #000;
	padding: 1.1em 1.4em;
	margin: 0.1em 0 0.3em 0;
	overflow: auto;
}

/* Alterate blockquote stylings */
blockquote.bbc_standard_quote
{
	background-color: #dee7ef;
}
blockquote.bbc_alternate_quote
{
	background-color: #daeafc;
}

/* A code block - maybe PHP ;). */
code.bbc_code
{
	display: block;
	font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
	font-size: x-small;
	background: #eee;
	border-top: 2px solid #999;
	border-bottom: 2px solid #999;
	line-height: 1.5em;
	padding: 3px 1em;
	overflow: auto;
	white-space: nowrap;
	/* Show a scrollbar after about 24 lines. */
	max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.codeheader, .quoteheader
{
	color: #666;
	font-size: x-small;
	font-weight: bold;
	padding: 0 0.3em;
}

/* For links to change the code stuff... */
.codeoperation
{
	font-weight: normal;
}

/* Styling for BBC tags */
.bbc_link:link, .bbc_link:visited
{
	color: #778899;
}
.bbc_size
{
	line-height: 1.4em;
}
.bbc_color a
{
	color: inherit;
}
.bbc_img
{
	border: 0;
}
.bbc_table
{
	font: inherit;
	color: inherit;
}
.bbc_table td
{
	font: inherit;
	color: inherit;
	vertical-align: top;
}
.bbc_u
{
	text-decoration: underline;
}
.bbc_list
{
	text-align: left;
}
.bbc_tt
{
	font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
	cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
	color: red;
}

/* Highlighted text - such as search results. */
.highlight
{
	font-weight: bold;
	color: #ff7200 !important;
	font-size: 1.1em;
}

/* A more discreet highlight color, for selected membergroups etc. */
.highlight2
{
	background-color: #D1E1EF;
	color: #000 !important;
}


div.listcolumns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 0.5em;

    /*
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    */
}

div.listcolumns div {
    justify-self: start;
    /*
    flex-basis: 0;
    flex-grow: 1;
    grid-row-gap: 4px;
    grid-col-gap: 4px;
    */
}

td.institutional {
   background-color: #dddddd;
}

td.error {
   background-color: #faa;
}

td.noentry {
    color: #eee;
    border: solid 1px black;
    background-color: #333;
}

td.newentry {
    color: #eee;
    border: solid 1px black;
    background-color: #777;
}

td.newentry {
    color: #eee;
    border: solid 1px black;
    background-color: #777;
}