/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			prosilver Special Edition
	Based on style:		prosilver (the default phpBB 3.2.x style)
	Original author:	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		phpBB Limited ( https://www.phpbb.com/ )
    --------------------------------------------------------------
*/

/* colours.css changes */
html, body {
	background-color: #cfe8ff;
	background-image: url("./hintergrundgrafik.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	/* font-size: 10px; */
	margin: 0;
	padding: 17px 0;
}

body.simple {
	min-height: 100%;
	padding: 0 5px;
}

.wrap {
	max-width: 850px;
	margin: 0 auto;
	padding: 13px 23px;
	border: 2px solid #FFF;
	border-radius: 15px;
	box-shadow: 0 0 22px 4px #aad1f5, inset 0 5px 48px rgba(97, 156, 222, .65);
}

.search-header {
	box-shadow: 0.2px -0.5px 4px #0f518d73;
}

.headerbar {
	background-color: #7C8891;
	background-image: url("./images/bg_header.gif");
}

.navbar {
	background-color: #e5f0fe;
}

.forabg, .forumbg {
	background-color: #c8d9ec;
	background-image: url("./images/bg_list.gif");
}

.copyright a {
	color: #000000 !important;
}

li.row {
	background-color: #ecf3f7;
}

li.row:hover {
	background-color: #EBEFF1;
}

li.row.bg3 {
	background-color: #F0F4F6;
}

li.row.bg3:hover {
	background-color: #F4F8FA;
}

/* responsive.css changes */
@media only screen and (max-width: 920px), only screen and (max-device-width: 920px) {
	html, body {
		background-color: #FFF;
		background-image: none;
	}

	body {
		padding-left: 5px;
		padding-right: 5px;
	}

	#wrap {
		width: 850px;
		padding: 0;
		border-width: 0;
		border-radius: 0;
		box-shadow: none;
	}
}

@media only screen and (max-width: 860px), only screen and (max-device-width: 860px) {
	#wrap {
		width: auto;
	}
body {
	padding: 5px;
}
}
/* --- RESTORED WORKING VERSION --- */

/* 1. Target the actual TOPICS specifically */
/* Reverting to the selector that successfully worked for you */
ul.topiclist.topics dt {
    background-repeat: no-repeat !important;
    background-position: 10px 50% !important; /* Set to 10px (Safe distance) */
    background-size: auto !important;
    display: block !important;
}

/* 2. Reinforcement for glued classes */
.row-itemtopic_read dt, 
.row-itemtopic_unread dt,
.row-itemtopic_moved dt,
.row-itemsticky_read dt,
.row-itemsticky_unread dt {
    background-position: 10px 50% !important;
}

/* 3. Text Spacing */
/* Restored to 40px to ensure text doesn't crowd the icon */
ul.topiclist.topics .list-inner {
    padding-left: 40px !important;
    display: block !important;
}

/* 4. Kill default icons */
ul.topiclist.topics dt::before {
    content: none !important;
    display: none !important;
}

/* 5. Mobile Adjustments */
@media (max-width: 700px) {
    ul.topiclist.topics .list-inner {
        padding-left: 45px !important;
    }
}
/* --- FIX FOR BROKEN HTML TAG & ICON SPACING --- */

/* 1. Target the icon by its file path */
/* We look for any image inside .postbody that comes from the 'icons/misc' folder */
.postbody img[src*="icons/misc/"] {
    padding-right: 6px !important;  /* The gap you need */
    display: inline-block !important;
    vertical-align: middle !important;
    border: none !important;
    width: auto !important; /* Ensures it doesn't get stretched */
}

/* 2. Fallback: Try to target the broken tag directly */
/* Browsers might interpret the typo as a custom tag named 'h3class' */
h3class img,
.first img {
    padding-right: 6px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 3. Mobile Adjustment */
@media (max-width: 700px) {
    .postbody img[src*="icons/misc/"] {
        padding-right: 10px !important;
    }
}

/* --- FIX FOR INVISIBLE FLASH FILES (0x0 size) --- */

/* 1. Force the Flash Object/Embed to have a size */
.postbody object,
.postbody embed,
.postbody ruffle-player {
    width: 550px !important;  /* Standard width for older Flash */
    height: 400px !important; /* Standard height */
    max-width: 100% !important; /* Responsive width for mobile */
    display: block !important;
    margin: 10px 0;
}

/* 2. Mobile Adjustment: Adjust height for phones so it isn't huge */
@media (max-width: 700px) {
    .postbody object, .postbody embed, .postbody ruffle-player {
        height: 300px !important;
    }
}

/* --- MANUAL INHERITANCE & GLUE FIX --- */

/* 1. Reveal the icon area */
dl[class*="row-item"] dt .list-inner {
    padding-left: 50px !important;
}

/* 2. Map the "glued" names to the prosilver images */
/* We use ../../prosilver/theme/images/ to pull from the parent style */
.row-itemforum_read, .forum_read { 
    background-image: url("../../prosilver/theme/images/forum_read.gif") !important; 
}
.row-itemforum_unread, .forum_unread { 
    background-image: url("../../prosilver/theme/images/forum_unread.gif") !important; 
}
.row-itemforum_read_subforum, .forum_read_subforum { 
    background-image: url("../../prosilver/theme/images/forum_read_subforum.gif") !important; 
}
.row-itemforum_unread_subforum, .forum_unread_subforum { 
    background-image: url("../../prosilver/theme/images/forum_unread_subforum.gif") !important; 
}

/* 3. General alignment */
dl[class*="row-item"] {
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    background-size: 32px 32px !important;
}

/* --- FINAL NAVBAR & LAYOUT RESTORATION --- */

/* 1. Force the Navbar to be a horizontal bar */
.navbar .nav-main {
    display: block !important;
    width: 100% !important;
    clear: both !important;
}

/* 2. Align Menu Items (Quick Links, FAQ, etc.) to the Left */
.nav-main > li {
    display: inline-block !important;
    float: left !important;
    width: auto !important;
    margin-right: 15px !important;
    list-style: none !important;
    height: 36px !important;
    line-height: 36px !important;
}

/* 3. Align User Menu, PMs, and Notifications to the Right */
.nav-main > li.rightside,
li#username_logged_in {
    float: right !important;
    margin-left: 15px !important;
    margin-right: 0 !important;
}

/* 4. Fix for any remaining 'Glued' tags (lidata) */
/* This ensures that even if the server still glues some tags, they won't break the layout */
lidata-last-responsive,
lidata-skip-responsive {
    display: inline-block !important;
    float: left !important;
    width: auto !important;
    margin-right: 15px !important;
    list-style: none !important;
}

/* 5. Hide the Mobile "Hamburger" on Desktop View */
.nav-main .icon.fa-bars {
    display: none !important;
}

/* 6. Mobile Responsiveness: Stacking for small screens */
@media (max-width: 700px) {
    .nav-main > li, 
    .nav-main > li.rightside,
    lidata-last-responsive {
        float: none !important;
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        margin: 5px 0 !important;
    }
    .nav-main .icon.fa-bars {
        display: inline-block !important;
    }
}