/* Styles for viewforum.php forum display */

/* forum title, note that an analogue styling exists for viewtopic */
h2.forum-title{
    margin: 1.5rem 0 1rem 0;
    color: #eee;
    font-weight: bold;
}

h2.forum-title a{
    color: #eee;
}

/*the forum image*/
img.forumimage{
    width: 275px;
    margin-bottom: 0.5rem;
}

/* the topic list background, note that an analogue styling exists for the board index*/
div.forumbg{
    padding: 0;
    border-radius: 0;
}

/* the head of the topic list containing the column headings */
div.forumbg > div.inner > ul.topiclist:first-child,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.header > dl {
    height: 28px;
    background-image: url('./img/cellpic3.gif');
    background-repeat: repeat-x;
    background-color: black;
    display: flex;
    align-items: center;
    font-size: 1.1em;
    padding: 0 0.5rem;
    color: white;
}

div.forumbg > div.inner > ul.topiclist:first-child > li.header,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.header {
    flex: 0 0 100%; /* maintain 100% width */
}

/* the "topics" column headline padding */
div.forumbg > div.inner > ul.topiclist:first-child > li.header > dl > dt > div.list-inner {
    padding: 0 0.5rem;
    text-transform: none;
}

div.forumbg > div.inner > ul.topiclist > li > dl > dt > div.list-inner > div.responsive-show a{
    color: grey;
}

div.forumbg > div.inner > ul.topiclist:first-child > li.header > dl > dd,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.header > dl > dd,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.header > dl > dt {
    text-transform: none;
    font-weight: bold;
    color: white;
}

/* the actual topic list, not that some user control panel styling is included here  */
div.cp-main > div.panel > div.inner > ul.topiclist > li.row,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.row,
div.forumbg > div.inner > ul.topiclist.topics > li.row{
    background-color: #212121;
    border-color: black;
    border-top: 0;
    color: grey;
}

/* topic pagination */
div.forumbg > div.inner > ul.topiclist.topics > li.row div.pagination {
    transform: translateY(-2px); /* move the thing up a bit..*/
}

div.forumbg > div.inner > ul.topiclist.topics > li.row div.pagination i.icon{
    color: black;
}

div.forumbg > div.inner > ul.topiclist.topics > li.row div.pagination a.button{
    background-color: #181818;
    color: #eee;
    padding: 0.3rem;
}

/* row containing a topic */
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.row-item{
    margin: 0;
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.row-item > dt{
    background-image: none !important; /* hiding the topic icon */
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.row-item > dt > div.list-inner{
    min-height: 35px;
    border-left: 1px solid black;
    margin-left: 52px;
    padding-left: 0.5rem;
}

/* topics */
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl{
    background-size: 28px;
    background-position: 13px 50%;
}

/* read topics by other users */
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_read,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.row > dl.topic_read{
    background-image: url('./img/topic_read.svg');
}


div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_read{
    background-image: url('./img/topic_read.svg');
}

div.cp-main > form > div.panel > div.inner > ul.topiclist > li.row > dl.topic_read_locked,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_read_locked{
    background-image: url('./img/topic_read_locked.svg');
}

/* own topics read */
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_read_mine,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.row > dl.topic_read_mine {
    background-image: url('./img/q3_logo_darkgey.svg');
}

div.cp-main > form > div.panel > div.inner > ul.topiclist > li.row > dl.topic_read_locked_mine,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_read_locked_mine{
    background-image: url('./img/q3_logo_darkgrey_locked.svg');
}

/* unread topics */
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_unread,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_unread_mine,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.row > dl.topic_unread,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.row > dl.topic_unread_mine{
    background-image: url('./img/q3_logo_red.svg');
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_unread_locked,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_unread_locked_mine,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.row > dl.topic_unread_locked,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.row > dl.topic_unread_locked_mine{
    background-image: url('./img/q3_logo_red_locked.svg');
}

/* hot topics */
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_unread_hot,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_unread_hot_mine,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.row > dl.topic_unread_hot,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.row > dl.topic_unread_hot_mine{
    background-image: url('./img/q3_logo_red_hot.svg');
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_read_hot,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.row > dl.topic_read_hot{
    background-image: none;
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_unread_hot,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.row > dl.topic_unread_hot{
    background-image: url('./img/q3_logo_red_hot.svg');
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_read_hot_mine,
div.cp-main > form > div.panel > div.inner > ul.topiclist > li.row > dl.topic_read_hot_mine{
    background-image: url('./img/q3_logo_red_hot.svg');
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_read_hot{
    background-image: none;
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_unread_hot{
    background-image: url('./img/q3_logo_red_hot.svg');
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_read_hot_mine{
    background-image: url('./img/q3_logo_darkgrey_hot.svg');
}

/* stickies */
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.sticky_unread,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.sticky_unread,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.sticky_unread_mine,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.sticky_read_mine,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.sticky_read{
    background-image: url('./img/q3_logo_red_sticky.svg');
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.sticky_unread_locked,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.sticky_unread_locked,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.sticky_unread_locked_mine,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.sticky_read_locked_mine,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.sticky_read_locked{
    background-image: url('./img/q3_logo_red_sticky_locked.svg');
}

/* announcement topics, local and global */
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.announce_read,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.global_read,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.announce_read_mine,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.global_read_mine,
div.cp-main > div.panel > div.inner > ul.topiclist > li.row > dl.global_read_mine{
    background-image: url('./img/announcements.png');
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.announce_unread,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.global_unread,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.announce_unread_mine,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.global_unread_mine
div.cp-main > div.panel > div.inner > ul.topiclist > li.row > dl.global_unread_mine,
div.cp-main > div.panel > div.inner > ul.topiclist > li.row > dl.announce_unread_mine,
div.cp-main > div.panel > div.inner > ul.topiclist > li.row >dl.announce_unread,
div.cp-main > div.panel > div.inner > ul.topiclist > li.row >dl.global_unread{
    background-image: url('./img/announcements_unread.gif');
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.announce_read_locked,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.global_read_locked,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.announce_read_mine_locked,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.global_read_mine_locked
div.cp-main > div.panel > div.inner > ul.topiclist > li.row {
    background-image: url('./img/announcements_locked.png');
}

/* small unread posts icon next to topic title */
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.topic_unread a.unread{
    display: none;
}

/* topic title link */
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.row-item a.topictitle{
    color: #eee;
}

/* topic poster info */
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.row-item div.topic-poster{
    color: grey;
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.row-item div.topic-poster a{
    color: #eee;
}

/* unread posts icon next to topic title */
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.row-item a.unread {
    background-image: url('./img/icon_newest_reply.gif');
    width: 1rem;
    height: 9px;
    display: inline-block;
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.row-item a.unread > i.icon{
    display: none;
}

/* replies, views and last post columns */
div.cp-main > div.panel > div.inner > ul.topiclist > li.row > dl.row-item dd,
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.row-item dd{
    border-color: black;
    color: grey;
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.row-item dd a{
    font-weight: bold;
    color: grey !important;
}

/* last post link in last post column */
div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.row-item dd.lastpost i.icon{
    background-image: url('./img/icon_newest_reply.gif');
    min-width: 1rem;
}

div.forumbg > div.inner > ul.topiclist.topics > li.row > dl.row-item dd.lastpost i.icon::before{
    content: ""
}