/* ************************************* */
/* Common styles for the theme           */
/* ************************************* */
/* Normal, standard links. */
#com_smf a:link {
    color: #476C8E;
    text-decoration: none
    }
#com_smf a:visited {
    color: #476C8E;
    text-decoration: none
    }
#com_smf a:hover {
    text-decoration: underline
    }
/* Tables should show empty cells. */
#com_smf table {
    empty-cells: show
    }
/* set a fontsize that will look the same in all browsers. */
#com_smf body {
    font: 95%/90% Verdana, Helvetica, sans-serif;
    background: #E5E5E8;
    margin: 0;
    padding: 12px 0 4px 0
    }
/* use dark grey for the text, leaving black for headers etc */
#com_smf body, #com_smf td, #com_smf th, #com_smf tr {
    color: #444444
    }
/* lets give all forms zero padding/margins */
#com_smf form {
    padding: 0px;
    margin: 0px
    }
/* Input boxes - just a bit smaller than normal so they align well. */
#com_smf input, #com_smf textarea, #com_smf button {
    color: #000000;
    font-family: verdana, sans-serif
    }
#com_smf input, #com_smf button {
    font-size: 90%
    }
#com_smf textarea {
    font-size: 100%;
    color: #000000;
    font-family: verdana, sans-serif
    }
/* All input elements that are checkboxes or radio buttons. */
#com_smf input.check {
    border: none
    }
/* Selects are a bit smaller, because it makes them look even better 8). */
#com_smf select {
    font-size: 90%;
    font-weight: normal;
    color: #000000;
    font-family: verdana, sans-serif
    }
/* Standard horizontal rule.. ([hr], etc.) */
#com_smf hr, #com_smf .hrcolor {
    height: 1px;
    border: 0;
    color: #666666;
    background-color: #666666
    }
/* By default set the color on these tags as black. */
#com_smf h1, #com_smf h2, #com_smf h3, #com_smf h4, #com_smf h5, #com_smf h6, #com_smf h7 {
    color: black;
    font-size: 1em;
    margin: 0;
    padding: 0
    }
/* No image should have a border when linked. */
#com_smf a img {
    border: 0
    }
/* No lines around buttons in Firefox! */
#com_smf a {
    outline: none
    }
/* Reset all lists. */
#com_smf ul, #com_smf ul li {
    padding: 0;
    margin: 0;
    list-style: none
    }
/* We can define lists to be lists tho! */
#com_smf ul.normallist {
    padding-left: 2em
    }
#com_smf ul.normallist li {
    list-style: disc
    }
/* ************************************* */
/* Some handy custom classes             */
/* ************************************* */
#com_smf .floatright {
    float: right
    }
#com_smf .floatleft {
    float: left
    }
/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
#com_smf .smalltext {
    font-size: 0.8em;
    font-family: verdana, sans-serif
    }
#com_smf .middletext {
    font-size: 0.85em
    }
#com_smf .normaltext {
    font-size: 1em
    }
#com_smf .largetext {
    font-size: 1.4em
    }
/* This style will make sure all headers use the same padding throughout. */
#com_smf .headerpadding {
    padding: 0.5em
    }
/* smaller padding used in paragraphs, sections etc */
#com_smf .smallpadding {
    padding: 0.2em
    }
/* larger padding used in paragraphs, sections etc */
#com_smf .largepadding {
    padding: 0.7em
    }
/* A small space to the next section. */
#com_smf .marginbottom {
    margin-bottom: 1em
    }
/* On the top too. */
#com_smf .margintop {
    margin-top: 1em
    }
/* remove bold/italic styles */
#com_smf span.plainstyle {
    font-weight: normal;
    font-style: normal
    }
/* float a list horizontally */
#com_smf ul.horizlist {
    width: 100%
    }
#com_smf ul.horizlist li {
    float: left;
    padding: 0.2em 0.4em 0.2em 0.4em;
    vertical-align: top
    }
/* make a inline-list */
#com_smf ul.nolist li {
    display: inline
    }
/* Helping style to clear floated items. */
#com_smf .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
    }
#com_smf .clearfix {
    display: inline-block
    }
/* Hides from IE-mac. \*/
#com_smf * html .clearfix {
    height: 1%
    }
#com_smf .clearfix {
    display: block
    }
/* End hide from IE-mac. */
/* ************************************* */
/* Some specific SMF elements            */
/* ************************************* */
/* A quote, perhaps from another post. */
#com_smf blockquote {
    color: #000000;
    background-color: #D7DAEC;
    border: 1px solid #000000;
    margin: 1px;
    padding: 1px;
    font-size: x-small;
    line-height: 1.4em
    }
/* A code block - maybe even PHP ;). */
#com_smf code {
    color: #000000;
    background-color: #dddddd;
    display: block;
    font-family: "courier new", "times new roman", monospace;
    font-size: x-small;
    line-height: 1.3em;
    /* Put a nice border around it. */
    border: 1px solid #000000;
    margin: 1px auto 1px auto;
    padding: 1px;
    width: 99%;
    overflow: auto;
    white-space: nowrap;
    /* Stop after about 24 lines, and just show a scrollbar. */
    max-height: 24em
    }
/* The "Quote:" and "Code:" header parts... */
#com_smf .quoteheader, #com_smf .codeheader {
    color: #000000;
    text-decoration: none;
    font-style: normal;
    font-weight: bold;
    font-size: x-small;
    line-height: 1.2em;
    width: 100%
    }
/* For links to change the code stuff... */
#com_smf .codeoperation {
    font-weight: normal
    }
/* Styling for BBC tags */
#com_smf .bbc_color a {
    color: inherit
    }
#com_smf .bbc_img {
    border: 0
    }
#com_smf .bbc_list {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 2em
    }
#com_smf .bbc_list li {
    list-style: disc
    }
#com_smf .bbc_list li li {
    list-style: circle
    }
#com_smf .bbc_size {
    line-height: 1.3em
    }
#com_smf .bbc_table {
    font: inherit;
    color: inherit
    }
#com_smf .bbc_table td {
    font: inherit;
    color: inherit;
    vertical-align: top
    }
#com_smf .bbc_u {
    text-decoration: underline
    }
/* Generally, those [?] icons.  This makes your cursor a help icon. */
#com_smf .help {
    cursor: help
    }
/* /me uses this a lot. (emote, try typing /me in a post.) */
#com_smf .meaction {
    color: red
    }
/* The main post box - this makes it as wide as possible. */
#com_smf .editor {
    width: 96%
    }
/* Highlighted text - such as search results. */
#com_smf .highlight {
    background-color: yellow;
    font-weight: bold;
    color: black
    }
/* A more discreet highlight colour, for selected membergroups etc. */
#com_smf .highlight2 {
    background-color: #B3F4B0;
    color: black
    }
/* ************************************* */
/* Real common classes                   */
/* ************************************* */
/* Alternating backgrounds for posts, and several other sections of the forum. */
#com_smf .windowbg, #com_smf #preview_body {
    color: #000000;
    background-color: #ECEDF3
    }
#com_smf .windowbg2 {
    color: #000000;
    background-color: #F6F6F6
    }
#com_smf .windowbg3 {
    color: #000000;
    background-color: #E0E1E8
    }
/* Color for background of posts requiring approval */
#com_smf .approvebg {
    color: #000000;
    background-color: #F6E0D4
    }
/* Color for background of *topics* requiring approval */
#com_smf .approvetbg {
    color: #000000;
    background-color: #E4A17C
    }
/* the today container in calendar */
#com_smf .calendar_today {
    background-color: #FFFFFF
    }
/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
#com_smf .titlebg, #com_smf tr.titlebg th, #com_smf tr.titlebg td, #com_smf .titlebg2, #com_smf tr.titlebg2 th, #com_smf tr.titlebg2 td, #com_smf #credits h3 {
    color: black;
    font-style: normal;
    background: url(images/titlebg.jpg) #E9F0F6 repeat-x;
    border-bottom: solid 1px #9BAEBF;
    border-top: solid 1px #FFFFFF;
    padding-left: 10px;
    padding-right: 10px
    }
#com_smf .titlebg, #com_smf .titlebg a:link, #com_smf .titlebg a:visited {
    font-weight: bold;
    color: black;
    font-style: normal
    }
#com_smf .titlebg a:hover {
    color: #404040
    }
/* same as titlebg, but used where bold text is not needed */
#com_smf .titlebg2 a:link, #com_smf .titlebg2 a:visited {
    color: black;
    font-style: normal;
    text-decoration: underline
    }
#com_smf .titlebg2 a:hover {
    text-decoration: underline
    }
/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers. */
#com_smf .catbg, #com_smf tr.catbg td, #com_smf .catbg3, #com_smf tr.catbg3 td {
    background: url(images/catbg.jpg) #88A6C0 repeat-x;
    color: #ffffff;
    padding-left: 10px;
    padding-right: 10px
    }
#com_smf .catbg2, #com_smf tr.catbg2 td {
    background: url(images/catbg2.jpg) #A1BFD9 repeat-x;
    color: #ffffff;
    padding-left: 10px;
    padding-right: 10px
    }
#com_smf .catbg, #com_smf .catbg2, #com_smf .catbg3 {
    border-bottom: solid 1px #375576
    }
#com_smf .catbg, #com_smf .catbg2 {
    font-weight: bold
    }
#com_smf .catbg3, #com_smf tr.catbg3 td, #com_smf .catbg3 a:link, #com_smf .catbg3 a:visited {
    font-size: 95%;
    color: white;
    text-decoration: none
    }
#com_smf .catbg a:link, #com_smf .catbg a:visited, #com_smf .catbg2 a:link, #com_smf .catbg2 a:visited {
    color: white;
    text-decoration: none
    }
#com_smf .catbg a:hover, #com_smf .catbg2 a:hover, #com_smf .catbg3 a:hover {
    color: #e0e0ff
    }
/* This is used for tables that have a grid/border background color (such as the topic listing.) */
#com_smf .bordercolor {
    background-color: #ADADAD;
    padding: 0px
    }
/* This is used on tables that should just have a border around them. */
#com_smf .tborder {
    padding: 1px;
    border: 1px solid #696969;
    background-color: #FFFFFF
    }
/* Posts and personal messages displayed throughout the forum. */
#com_smf .post, #com_smf .personalmessage {
    overflow: auto;
    line-height: 1.3em;
    width: 100%
    }
#com_smf .postarea .post {
    clear: right;
    float: left
    }
/* add a visual divider between subject and post */
#com_smf .post .inner {
    padding-top: 0.7em;
    border-top: solid 1px #888
    }
/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
#com_smf .signature {
    clear: right;
    padding: 1em 0 3px 0;
    border-top: solid 1px #888;
    width: 100%;
    overflow: auto;
    line-height: 1.3em
    }
/* Sometimes there will be an error when you post */
#com_smf .error {
    color: red
    }
/* Messages that somehow need to attract the attention. */
#com_smf .alert {
    color: red
    }
/* Calendar colours for birthdays, events and holidays */
#com_smf .birthday {
    color: #920AC4
    }
#com_smf .event {
    color: #078907
    }
#com_smf .holiday {
    color: #000080
    }
/* Colours for warnings */
#com_smf .warn_mute {
    color: red
    }
#com_smf .warn_moderate {
    color: orange
    }
#com_smf .warn_watch {
    color: green
    }
#com_smf a.moderation_link, #com_smf a.moderation_link:visited {
    color: red;
    font-weight: bold
    }
#com_smf .openid_login {
    background: white url(images/openid.gif) no-repeat;
    padding-left: 18px
    }
/* The AJAX notifier */
#com_smf #ajax_in_progress {
    background: #32CD32;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 18pt;
    padding: 0.4em;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0
    }
#com_smf #ajax_in_progress a {
    color: white;
    text-decoration: underline;
    font-size: smaller;
    float: right
    }
/* ************************************* */
/* Buttons and menus                     */
/* ************************************* */
#com_smf .buttonlist ul, #com_smf .buttonlist_bottom ul {
    background: url(images/maintab_first.gif) no-repeat bottom left;
    padding-left: 10px
    }
#com_smf .buttonlist ul li, #com_smf .buttonlist_bottom ul li {
    margin: 0;
    padding: 0;
    display: inline
    }
#com_smf .buttonlist ul li a, #com_smf .buttonlist ul li a:visited, #com_smf .buttonlist_bottom ul li a, #com_smf .buttonlist_bottom ul li a:visited {
    float: left;
    display: block;
    color: white;
    font-size: 0.8em;
    font-family: tahoma, sans-serif;
    text-transform: uppercase
    }
#com_smf .buttonlist ul li a:hover, #com_smf .buttonlist_bottom ul li a:hover {
    color: #e0e0ff;
    text-decoration: none
    }
#com_smf .buttonlist ul li a span, #com_smf .buttonlist_bottom ul li a span {
    background: url(images/maintab_back.gif) repeat-x bottom left;
    display: block;
    padding: 0.1em 0.5em 0.5em 0.5em
    }
#com_smf .buttonlist ul li a.active, #com_smf .buttonlist_bottom ul li a.active {
    background: url(images/maintab_active_last.gif) no-repeat bottom right;
    padding-right: 8px
    }
#com_smf .buttonlist ul li a.active span em, #com_smf .buttonlist_bottom ul li a.active span em {
    padding: 0.1em 0.5em 0.5em 0.5em;
    display: block;
    font-style: normal;
    background: url(images/maintab_active_back.gif) repeat-x bottom right
    }
#com_smf .buttonlist ul li a.active span, #com_smf .buttonlist_bottom ul li a.active span {
    background: url(images/maintab_active_first.gif) no-repeat bottom left;
    padding: 0 0 0 8px
    }
#com_smf .buttonlist ul li a span.last, #com_smf .buttonlist_bottom ul li a span.last {
    background: url(images/maintab_last.gif) no-repeat bottom right;
    padding: 0.1em 1.5em 0.5em 0.5em
    }
/* For links that are basically submit buttons. */
#com_smf .buttonlist_submit {
    background: transparent;
    color: white;
    text-transform: uppercase;
    vertical-align: top;
    text-decoration: none;
    font-size: 9px;
    font-family: tahoma, sans-serif;
    border: 0
    }
#com_smf .buttonlist_submit:hover {
    color: #e0e0ff
    }
/* ..for the "bottom" menu */
#com_smf .buttonlist_bottom ul {
    background: url(images/mirrortab_first.gif) no-repeat top left
    }
#com_smf .buttonlist_bottom ul li a span {
    padding: 0.5em 0.5em 0.1em 0.5em;
    background: url(images/mirrortab_back.gif) repeat-x top left
    }
#com_smf .buttonlist_bottom ul li a.active {
    background: url(images/mirrortab_active_last.gif) no-repeat top right
    }
#com_smf .buttonlist_bottom ul li a.active span em {
    background: url(images/mirrortab_active_back.gif) repeat-x top right
    }
#com_smf .buttonlist_bottom ul li a.active span {
    background: url(images/mirrortab_active_first.gif) no-repeat top left
    }
#com_smf .buttonlist_bottom ul li a span.last {
    padding: 0.5em 1.5em 0.1em 0.5em;
    background: url(images/mirrortab_last.gif) no-repeat top right
    }
/* the old type of menu, with images */
#com_smf .oldbuttonlist {
    text-align: right;
    padding: 0.5em
    }
/* ************************************* */
/* The below is deprecated.              */
/* ************************************* */
/* definitions for the main tab, active means the tab reflects which page is displayed */
#com_smf .maintab_first, #com_smf .maintab_back, #com_smf .maintab_last, #com_smf .maintab_active_first, #com_smf .maintab_active_back, #com_smf .maintab_active_last {
    color: white;
    text-transform: uppercase;
    vertical-align: top
    }
#com_smf .maintab_back, #com_smf .maintab_active_back {
    color: white;
    text-decoration: none;
    font-size: 9px;
    vertical-align: top;
    padding: 2px 6px 6px 6px;
    font-family: tahoma, sans-serif
    }
#com_smf .maintab_first {
    background: url(images/maintab_first_prev.gif) left bottom no-repeat;
    width: 10px
    }
#com_smf .maintab_back {
    background: url(images/maintab_back.gif) left bottom repeat-x
    }
#com_smf .maintab_last {
    background: url(images/maintab_last_prev.gif) left bottom no-repeat;
    width: 8px
    }
#com_smf .maintab_active_first {
    background: url(images/maintab_active_first.gif) left bottom no-repeat;
    width: 6px
    }
#com_smf .maintab_active_back {
    background: url(images/maintab_active_back.gif) left bottom repeat-x
    }
#com_smf .maintab_active_last {
    background: url(images/maintab_active_last.gif) left bottom no-repeat;
    width: 8px
    }
/* how links behave in main tab. */
#com_smf .maintab_back a:link, #com_smf .maintab_back a:visited, #com_smf .maintab_active_back a:link, #com_smf .maintab_active_back a:visited {
    color: white;
    text-decoration: none
    }
#com_smf .maintab_back a:hover, #com_smf .maintab_active_back a:hover {
    color: #e0e0ff;
    text-decoration: none
    }
/* definitions for the mirror tab */
#com_smf .mirrortab_first, #com_smf .mirrortab_back, #com_smf .mirrortab_last, #com_smf .mirrortab_active_first, #com_smf .mirrortab_active_back, #com_smf .mirrortab_active_last {
    color: white;
    text-transform: uppercase;
    vertical-align: top
    }
#com_smf .mirrortab_back, #com_smf .mirrortab_active_back {
    color: white;
    text-decoration: none;
    font-size: 9px;
    vertical-align: bottom;
    padding: 6px 6px 2px 6px;
    font-family: tahoma, sans-serif
    }
#com_smf .mirrortab_first {
    background: url(images/mirrortab_first_prev.gif) no-repeat;
    width: 10px
    }
#com_smf .mirrortab_back {
    background: url(images/mirrortab_back.gif) repeat-x
    }
#com_smf .mirrortab_last {
    background: url(images/mirrortab_last_prev.gif) no-repeat;
    width: 6px
    }
#com_smf .mirrortab_active_first {
    background: url(images/mirrortab_active_first.gif) no-repeat;
    width: 6px
    }
#com_smf .mirrortab_active_back {
    background: url(images/mirrortab_active_back.gif) repeat-x
    }
#com_smf .mirrortab_active_last {
    background: url(images/mirrortab_active_last.gif) no-repeat;
    width: 8px
    }
/* how links behave in mirror tab. */
#com_smf .mirrortab_back a:link, #com_smf .mirrortab_back a:visited, #com_smf .mirrortab_active_back a:link, #com_smf .mirrortab_active_back a:visited {
    color: white;
    text-decoration: none
    }
#com_smf .mirrortab_back a:hover, #com_smf .mirrortab_active_back a:hover {
    color: #e0e0ff;
    text-decoration: none
    }
/* These are for the auto suggest floating div type thing. */
#com_smf .auto_suggest_div {
    border: 1px solid #505050;
    position: absolute;
    font-size: .7em
    }
/* An auto suggest item */
#com_smf .auto_suggest_item {
    background-color: #FAFAFA;
    padding: 2px
    }
/* hovered auto suggest item */
#com_smf .auto_suggest_item_hover {
    background: url(images/autosuggest_back.gif) repeat-x;
    background-color: #7897B4;
    padding: 2px;
    cursor: pointer;
    color: white
    }