/*
Theme Name: Flames Rising
Description: The Flames Rising theme, originally derived from NewsPress by WooThemes and rebuilt for current WordPress.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flames
Tags: two-columns, right-sidebar, custom-menu, custom-logo, featured-images, threaded-comments
*/

/*=== Setup ===*/
*{
    border: 0;
    margin: 0;
    padding: 0
}
body{
    background: url(images/bgr.gif) #000000 repeat-y center;
    color: #000000;
    font: .8em Arial,Tahoma,Verdana,Helvetica,Sans-Serif
}
a{
    color: #990000;
    text-decoration: none
}
a:hover{
    text-decoration: underline
}
input,select,textarea{
    border: #999999 1px solid;
    font-size: 12px;
    padding: 2px
}
select{
    padding: 0
}
li{
    list-style: none
}
h1, h2, h3{
    font-family: Georgia,"Times New Roman", Times, serif;
    font-weight: bold;
    letter-spacing: -1px
}
/*=== Layout ===*/
#page{
    margin: 0 auto;
    width: 956px
}
/*=== Header ===*/
#header{
    height: 190px
}
/*- Logo -*/
#header h1{
    background: url(images/header-Flames.png) no-repeat;
    float: left;
    text-indent: -9999px
}
#header h1 a{
    display: block;
    height: 190px;
    width: 956px;
}
/*- RSS -*/
#rss{
    float: right;
    font: 13px Georgia,"Times New Roman", Times, serif;
    padding: 20px 0 0;
    text-align: right;
    width: 295px
}
#rss a{
    color: #666666;
    text-decoration: underline
}
#rss a:hover{
    color: #990000
}
#rss ul{
    float: left;
    margin: 10px 0 0;
    width: 220px
}
#rss li{
    margin: 0 0 3px;
    padding: 0 0 5px
}
#rss img{
    float: right
}
/*========= NAVIGATION LISTS =========*/

/*- Category Navigation -*/
#catnav {
    background: url(images/navbgr.gif) no-repeat top;
    height:59px;
    width:956px;
}

.nav2, .nav2 * {
    margin:0;
    padding:0;

}
.nav2 {
    background: url(images/nav-bgr.gif) no-repeat top;
    height: 30px;
    line-height:30px;
    position:relative;
}
.nav2 ul {
    background:#fff; /*IE6 needs this*/
    float: left;
    position:relative;
}
.nav2 li {
    line-height: 30px;
    float: left;
    font-size: 12px;
    text-transform: uppercase;
    list-style:none;
    z-index:999;
}
.nav2 li.current ul {
    z-index: 999;
}
.nav2 li.sfHover ul,
ul.nav2 li:hover ul {
    z-index: 1000;
    background:none;
    color: #ffffff;
    text-decoration: none;
}
.nav2 li li {
}
.nav2 a {
    color: #000000;
    display: block;
    padding: 0 13px;
}
.nav2 li ul a {
    color:#FFF !important;
}
.nav2 li ul a:hover {
    color: #990000 !important;
}
.nav2 li ul {
    left:0;
    top:-999em;
    position:absolute;
    width:956px;
    height:29px;
    line-height:29px;
}
.nav2 li:hover,
.nav2 li.sfHover,
.nav2 li.current,
.nav2 a:focus, .nav2 a:hover, .nav2 a:active {
    color: #990000;
    text-decoration: none;
    background: #666;
}
.nav2 li.sfHover a,
.nav2 li.current a,
.nav2 a:focus, .nav2 a:hover, .nav2 a:active {
    border-bottom: none;
}
.nav2 li li.current a {
    font-weight: bold;
    color:#FFF !important;
}
.nav2 li li:hover,
.nav2 li li a:focus, .nav2 li li a:hover, .nav2 li li a:active {
    background:none !important;
}
.nav2 li:hover ul, /* pure CSS hover is removed below */
body .nav2 li.current ul, /* this must be more specific than the .superfish override below */
ul.nav2 li.sfHover ul {
    top:2.5em;
}

.nav2 li:hover li ul,
.nav2 li.sfHover li ul {
    top:-999em;
}
.nav2 li li:hover ul, /* pure CSS hover is removed below */
ul.nav2 li li.sfHover ul {
    top:2.5em;
}
/*following rule negates pure CSS hovers
so submenu remains hidden and JS controls
when and how it appears*/
.superfish li:hover ul,
.superfish li li:hover ul {
    top: -999em;
}
.nav2 li.fr{
    float: right
}
.nav2 li.last a{
    background: none
}
/*- Page Navigation -*/
#nav2{
    background: url(images/nav2-bgr.gif) no-repeat top;
    height: 29px
}
#nav2 ul{
    padding: 0 2px
}
#nav2 li{
    float: left;
    font-size: 12px;
    letter-spacing: 0px;
    line-height: 29px;
    text-transform: capitalize
}
#nav2 li.fr{
    float: right
}
#nav2 li a{
    background: url(images/nav2-sep.gif) no-repeat right;
    color: #666;
    display: block;
    padding: 0 17px;
}
#nav2 li.rss a{
    background: url(images/nav2-sep.gif) no-repeat right;
    color: #666;
    display: inline;
    padding: 0 5px;
}
#nav2 li.rss {
    background: url(images/newsfire.png) no-repeat right;
    padding: 0 20px;
}
#nav2 li.last a{
    background: none
}
#nav2 li a:hover,
#nav2 li.active a{
    color: #990000;
    text-decoration: none
}

/*=== Columns ===*/
#columns{
    margin: 15px 0 0;
    padding: 0 0 25px
}
.col1 {
    float: left;
    width: 626px
    /* width: 475px */
}
.col2 {
    float: right;
    /* width: 457px */
    width: 306px
}
#columns h1{
    border-bottom: 1px solid #E2E1DD;
    font-size: 30px;
    font-weight: normal;
    letter-spacing: -1px;
    margin: 0 0 13px;
    padding: 0 0 5px
}
#columns h2{
    color: #990000;
    font-size: 2em;
    line-height: 26px
}
#columns .col2 h2{
    font-size: 1.6em;
    margin: 0 0 5px
}
#columns p{
    line-height: 18px;
    padding: 0 0 12px
}
/*- Search -*/
#search{
    background: url(images/search-bgr.gif) no-repeat left top;
    float: right;
    height: 36px;
    margin: 0 0 10px;
    width: 306px
}
#search input{
    border: 0;
    float: left;
    margin: 8px 14px 0 15px;
    width: 186px
}
#search .btn{
    margin: 6px 0 0;
    padding: 0;
    width: auto
}

/*- SideTabs -*/
.sideTabs .idTabs{
    font-size: 12px;
    height: 28px;
    letter-spacing: -1px
}
.sideTabs .idTabs li{
    float: left;
    line-height: 28px;
    text-transform: uppercase
}
.sideTabs .idTabs li a{
    background: url(images/tab.gif) no-repeat left top;
    color: #FFFFFF;
    display: block;
    height: 28px;
    margin: 0 5px 0 0;
    text-align: center;
    width: 110px
}
.sideTabs .idTabs li.last a{
    margin: 0
}
.sideTabs .idTabs li a:hover,
.sideTabs .idTabs .selected{
    color: #990000;
    background: url(images/tab-.gif) no-repeat left top;
    text-decoration: none
}
/*--- Sub Columns ---*/
.subcol{
    border-bottom: 1px solid #E2E1DD;
    float: left;
    height: auto !important;
    height: 220px;
    margin: 0 20px 15px 0;
    min-height: 220px;
    width: 198px
}
.subcol h2{
    border-bottom: 1px solid #E2E1DD;
    padding: 0 0 4px
}
.subcol.last{
    margin: 0
}
.subcol1{
  width: 284px;
}
.subcol2{
  width: 132px;
}
/*=== Post ===*/
#columns .post h3 {
  color: #990000;
}
#columns .post img {
  margin: 10px;
}
#columns .post p {
  margin: 0 0 10px 0;
  padding: 0;
}
#columns .post .excerpt {
  clear: both;
}
#columns .post .category {
    border-bottom: 1px solid #E2E1DD;
    border-top: 1px solid #E2E1DD;
    clear: both;
    color: #666666;
    color: #666666;
    font-size: 1em;
    height: 28px;
    letter-spacing: normal;
    line-height: 28px;
    margin: 0 0 15px;
    padding: 0px !important;
}
#columns .post .category a {
    color: #666666
}
#columns .post .category span {
    float: left;
    text-transform: uppercase
}
#columns .post .category em {
    float: right;
    font-size: .85em;
    font-style: normal
}
#columns .post h2{
    color: #990000;
    font-size: 1.5em
}
/*- Featured Post -*/
.featured-cell-base {
  padding: 0 10px 0 20px;
}
.featured-cell-base a {
  display: block;
  width: 100%;
}
.featured-cell {
  background-color: #eee;
  background-image: url(images/featured-cell-bg.gif);
  background-position: left center;
  background-repeat: no-repeat;
}
.post .featured .pic{
    height: 40px;
    margin: 0 0 10px;
    padding: 140px 0 0
}
#columns .post .featured h2{
    font-size: 2em
}
#columns .post .featured .pic h3{
    background: #262626;
    border: 0;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    font-family:Helvetica, sans-serif;
    height: 32px;
    line-height: 32px;
    margin: 0;
    padding: 0 0 0 15px !important;
    text-transform: uppercase
}
#columns p.posted{
    color: #666666;
    font: 1.4em Georgia,"Times New Roman", Times, serif;
    letter-spacing: -1px
}
.post h3 { font-family:  Arial !important; }
/*=== Styling Boxes ===*/
/*- Box -*/
.box{
    background: #E2E1DD;
    clear: both;
    color: #666666;
    margin: 0 0 12px;
    width: 457px
}
.box a{
    color: #666666
}
.box-top,.box-bot{
    background: url(images/box-top.gif) no-repeat top;
    clear: both;
    height: 4px;
    overflow: hidden
}
.box-bot{
    background: url(images/box-bot.gif) no-repeat top
}
.box .spacer{
    height: 1%;
    padding: 10px 17px
}
/*- Ads -*/
.box .spacer.ads .ar{
    padding: 0 12px
}
.ads {
    text-align: center
}
.ads img{
    margin: 0 6px
}
/*=== Styling Lists ===*/
/*- List1 -*/
.list1 li{
    background: url(styles/darkred/ico-star.gif) no-repeat top left;
    font: 1em Georgia,"Times New Roman", Times, serif;
    margin: 0 0 3px;
    padding:0 0 5px 20px;
}
.list1 li a{
    padding: 0 0 0 0;
}
/*- List3 -*/
.list3{
    padding: 5px 0
}
.list3 li{
    font-size: 1.1em;
    margin: 0 0 10px 0;
}
.list3 li a{
    color: #000000
}
.list3 li  a em{
    color: #990000;
    font-size: .85em;
    font-style: normal
}
/*=== Footer ===*/
#footer{
    border-top: 1px solid #E2E1DD;
    clear: both;
    color: #666666;
    font: .95em Georgia,"Times New Roman", Times, serif;
    padding: 10px 10px;
    background: #E2E1DD;
    margin-bottom: 20px;
    line-height:22px;
}
#footer a{
    color: #666666
}
#footer img {
    vertical-align:middle;
}

/*=== Misc. ===*/
.fix{
    clear: both;
    height: 1px;
    margin: 0 0 -1px;
    overflow: hidden
}
.ar{
    text-align: right
}
a.more{
    color: #666666;
    font-weight: bold
}
a.more2{
    color: #666666;
    font: 1.4em Georgia,"Times New Roman", Times, serif;
    font-weight: bold
}
.th{
    border: 1px solid #C0C0C0;
    float: left;
    margin: 0 10px 10px 0
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.gravatar {
    float:left;
    border: 1px solid #000;
    margin-right: 10px;
}
/*========= VIDEO =========*/

.video{
    float: left;
    height: 228px;
    margin: 0 15px 0 0;
    width: 275px
}
#videolist .idTabs li{
    font: .85em Georgia,"Times New Roman", Times, serif;
    margin: 0 0 7px
}

/*========= COMMENTS =========*/

h2.commh2{
    font-size: 1.4em !important;
    padding: 0 0 5px;
    font-weight:bold !important;
    color:#000 !important;
}
ol.commentlist{
    margin: 10px 0 20px;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 20px;
}
ol.commentlist p{
    line-height: 20px;
}
ol.commentlist cite{
    font-style: normal;
    font-weight: bold;
}
ol.commentlist li{
    padding: 20px 10px 10px 10px;
}
ol.commentlist li.alt{
    padding: 10px 10px 0 10px !important;
    background:#DDD;
    border:1px solid #C0C0C0;
}

/*========= THREADED COMMENTS =========*/

#comments_wrap {
    margin:20px 0 0;
}
ol.commentlist .comment-meta{
    font-size:0.8em;
}
ol.commentlist li .avatar {
    float:left;
    border: 1px solid #000;
    margin-right: 10px;
}

ol.commentlist li{
    border:1px solid #eee;
    margin:10px 0 10px;
    padding:15px 10px 10px;
}

ol.commentlist li .even{
    background:#ffffff;
}

.commentlist li ul li {
    margin-left:10px;
    margin-right:-5px;
}

ol.commentlist li .reply {
    padding:0 0 5px 0;
}

#respond p{
    margin-bottom:10px;
    line-height: 20px;
    padding:0;
}

.post-alt p {
    padding:0;
}

/*========= SINGLE POST SPECIFIC =========*/

.singletags {
    margin-top:5px;
    font-weight:bold;
    color:#C0C0C0;
}
.singleh2 {
    font-weight:bold !important;
    font-size:1.8em !important;
}
.entry p{
    text-align:left;
    font-size:12px;
    line-height:20px !important;
    }
.entry blockquote {
    padding: 0px 10px 0px;
    border-left: 2px solid #666666;
    color:#666666;
    width:85%;
    margin: 0 auto 10px auto;
    font-style: italic;
    }
.entry blockquote p {
    font-size:12px;
    padding: 5px 0px;
    margin: 5px 0px;
    line-height: 20px;
    }
.entry img {
    padding: 2px 2px 2px 2px;
    border: 0px;
    }
.entry ul, .entry ol {
    margin-bottom:15px;
    font-size:12px;
    line-height:20px;
    }
.entry ul li ul, .entry ol li ol{
    margin-bottom:0px;
    padding-top:3px;
    }
.entry ul li {
    list-style:circle inside !important;
    margin-left:15px;
    padding:3px 0px;
    }
.entry ul li ul li {
    list-style:disc inside !important;
    }
.entry ol li {
    list-style:decimal inside !important;
    font-size:12px;
    padding:3px 0px;
    }
.entry ol li ol li {
    list-style:decimal-leading-zero inside !important;
    }

/*========= ARCHIVE SPECIFIC =========*/

#archivebox {
    background:#EEE;
    padding:10px;
    width:455px;
    margin-bottom:25px;
}
#archivebox h2 {
    font-size:1.5em;
    color:#000;
}
#archivebox h2 em{
    color:#C0C0C0 !important;
    font-style:normal;
}
.archivefeed {
    margin-top:5px;
}
.archivefeed a {
    background:url(images/newsfire.png) center left no-repeat;
    padding-left:20px;
    color:#000;
    font-weight:bold;
}
.arclist{
    border-top: 3px solid #c0c0c0;
    border-bottom: 3px solid #c0c0c0;
    margin: 0 0 15px;
    padding: 10px 0 10px;
    width: 230px;
}
.arclist h2{
    font-size:1.5em !important;
    color:#000 !important;
    padding: 0 0 10px 0 !important;
}

.arclist ul li{
    padding:0 0 7px 10px;
    color:#c0c0c0;
    font-size:14px;
    font-weight:bold;
}
/*=== Page Navigation (Next / Previous Posts) ===*/
.navigation {
}
.navigation a {
    color: #c0c0c0;
    font-size: 1.2em;
    font-weight: bold;
}
.alignleft{
    display:inline;
    float:left;
}
.alignright{
    display:inline;
    float:right;
}
.photo {
  border: none;
  float: left;
  margin: 10px;
}
.wp-notable img,
.wp-notable_image,
.wp-notable a
{
  border: none;
  margin: 0;
  padding: 0;
}

#columns .excerpt,
#columns .entry
{
  clear: both;
}
#twitter_update_list a
{
  color: #990000;
}
#columns .post p.odiogo_button
{
  margin: -10px 0 0 0;
  padding: 0;
}
.arclist .children
{
  margin: 10px 0 0 0;
}

img.noborder {
  border:none;
  background-color: #fff;
}

.indented {
  margin: 0 0 10px 50px;
}

/*========================================================================
  MODERNIZATION LAYER
  Appended so the original cascade above is preserved and these win.
  ======================================================================*/

/*- Accessibility -*/
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
    background-color: #fff;
    clip-path: none;
    color: #990000;
    display: block;
    font-size: 14px;
    height: auto;
    left: 6px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 6px;
    width: auto;
    z-index: 100000;
}

:focus-visible {
    outline: 2px solid #990000;
    outline-offset: 2px;
}

/*- Dropdown navigation (replaces superfish's .sfHover) -*/
.nav2 li.is-open > ul,
.nav-utility li.is-open > ul {
    top: 2.5em;
}

.nav2 li.is-open {
    background: #666;
}

/*- Media never overflows its column -*/
img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
}

/*- Featured rotator (replaces the old <table> layout) -*/
/*
   The original markup was a table: one tall cell for the story, and one cell
   per tab whose height was the panel height divided by the tab count, with
   valign="middle". That is what spaced the tabs evenly down the block and
   centred each label. `stretch` plus `flex: 1` on the items reproduces it.
*/
.featured-rotator .rotator {
    display: flex;
    gap: 10px;
    align-items: stretch;
    /* Set from the tallest featured thumbnail; keeps the block from resizing
       every time a panel is switched. */
    min-height: var(--flames-rotator-min-height, 200px);
}

.rotator-panels {
    flex: 1 1 420px;
    min-width: 0;
}

.rotator-panel[hidden] {
    display: none;
}

.rotator-tabs {
    flex: 0 0 170px;
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rotator-tabs li {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    list-style: none;
}

/*
   Left padding must stay at 20px: `.featured-cell` paints
   images/featured-cell-bg.gif at "left center" and the text has to clear that
   arrow. The earlier `padding: 8px 10px` here overrode the 20px from
   `.featured-cell-base` and crowded the label into the arrow.
*/
.rotator-tabs a {
    display: block;
    width: 100%;
    padding: 4px 10px 4px 20px;
}

/*- Section grids on the New Home Page template -*/
.section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.section-item {
    min-width: 0;
}

/*
   A .pic with no image behind it is just the black section header bar.
   The base rule is `.post .featured .pic` (three classes), so this has to
   match that specificity or the 140px top padding wins and leaves a large
   empty gap above every section.
*/
.post .featured .pic.pic-empty {
    height: 32px;
    padding: 0;
}

/* Section headers are links now; keep them white, not link-red. */
#columns .post .featured .pic h3 a {
    color: inherit;
    text-decoration: none;
}

#columns .post .featured .pic h3 a:hover {
    text-decoration: underline;
}

/* Restore the dropdown affordance superfish used to add. */
.nav2 li.has-submenu > a::after {
    content: " \00BB";
}

/*- Image gallery -*/
.imagegallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.imagegallery img.gallery-thumb {
    width: 100%;
    height: auto;
    display: block;
}

/*- Paginated posts and comment navigation -*/
.page-links,
.navigation,
.comments-pagination,
.pagination {
    clear: both;
    padding: 10px 0;
}

.pagination .page-numbers,
.comments-pagination .page-numbers {
    display: inline-block;
    padding: 2px 7px;
}

.pagination .page-numbers.current {
    font-weight: bold;
}

/*- Author bio block -*/
.author-bio img.th {
    float: left;
    margin: 0 10px 10px 0;
}

/*========================================================================
  RESPONSIVE SHIM
  The layout above is a fixed 956px grid. These rules let it reflow on
  narrow viewports so the width=device-width meta tag is honest, without
  disturbing the desktop rendering.
  ======================================================================*/

@media (max-width: 980px) {
    #page,
    #catnav,
    #columns,
    .nav2,
    .nav2 li ul {
        width: auto;
        max-width: 100%;
    }

    body {
        background-image: none;
    }

    #columns {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .col1 {
        flex: 1 1 380px;
        width: auto;
        min-width: 0;
    }

    .col2 {
        flex: 1 1 260px;
        width: auto;
        min-width: 0;
    }

    #catnav {
        height: auto;
        background-image: none;
    }

    .nav2,
    .nav-utility {
        height: auto;
        background-image: none;
        display: flex;
        flex-wrap: wrap;
    }

    .nav2 li,
    .nav-utility li {
        float: none;
    }

    /* Absolutely-positioned submenus do not work once items wrap. */
    .nav2 li ul {
        position: static;
        top: auto;
        height: auto;
        display: none;
    }

    .nav2 li.is-open > ul {
        display: block;
        top: auto;
    }

    .featured-rotator .rotator {
        flex-direction: column;
    }

    .rotator-tabs {
        flex: 1 1 auto;
        width: 100%;
    }

    #header h1 {
        background-size: contain;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .section-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #columns {
        flex-direction: column;
    }
}

/*
   WordPress alignment classes. The old home page template floated its
   thumbnails with the deprecated align="left" attribute; these replace it so
   body text wraps beside the image as it did before.
*/
.alignleft {
    float: left;
    margin: 0 10px 10px 0;
}

.alignright {
    float: right;
    margin: 0 0 10px 10px;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* The blanket `#columns .post img { margin: 10px }` would offset floats. */
#columns .post img.alignleft {
    margin: 0 10px 10px 0;
}

#columns .post img.alignright {
    margin: 0 0 10px 10px;
}

/* Section items must contain their floated thumbnail. */
.section-item,
.rotator-panel {
    overflow: hidden;
}

/*
   The featured rotator title.

   The original template used <h1> here, which picked up `#columns h1`:
   normal weight, 30px, and a hairline rule underneath. This template now uses
   <h2> so the page keeps a single top-level heading, so restate that styling.

   Specificity note: `#columns .post .featured h2` is one id + three classes,
   so this selector needs a fourth class to win.
*/
#columns .post .featured .rotator-panel h2 {
    border-bottom: 1px solid #E2E1DD;
    font-size: 30px;
    font-weight: normal;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0 0 13px;
    padding: 0 0 5px;
}