/* playstone for Joomla 6: the Joomla 1.0 stylesheet of futbolsala.cat, with
   its selectors mapped onto the markup Joomla 6 modules and com_content emit. */

/* --- General ------------------------------------------------------------- */
body {
	margin: 8px 0;
	text-align: center;
	background: #fff url(../images/page_bg.gif) repeat-x;
	font-family: verdana, Helvetica, sans-serif;
	font-size: 10px;
	color: #333;
}

div, main, nav { text-align: left; }

ul, li { margin: 0; padding: 0; list-style: none; text-align: left; }

a:link, a:visited { color: #1b5fba; text-decoration: none; text-transform: uppercase; }
a:hover { color: #1b5fba; text-decoration: underline; }

/* --- Layout ------------------------------------------------------------- */
#container { margin: 0 auto; width: 750px; text-align: left; }
#header { float: left; width: 750px; }

#toplink {
	float: left;
	width: 750px;
	height: 150px;
	padding-top: 4px;
	background: url(../images/linkback_bg.png) repeat-x;
}

#trenner {
	float: left;
	width: 750px;
	height: 4px;
	overflow: hidden;
	background: url(../images/golden.png) repeat;
}

#box {
	float: left;
	width: 750px;
	margin: 0;
	padding: 0;
	color: #fff;
	background: url(../images/boxback_id.png) repeat;
}

#sidebar { float: left; width: 130px; }

#sidebar .moduletable {
	float: left;
	width: 130px;
	margin: 5px 0 0;
	padding-top: 5px;
	background: url(../images/oben.png) no-repeat;
}

#content {
	float: left;
	width: 550px;
	overflow: hidden;
	padding-top: 10px;
}

#bottom {
	position: relative;
	float: left;
	width: 750px;
	height: 120px;
	background: url(../images/bottom_back.gif) repeat-x;
}

.bottomin { float: left; width: 630px; padding-top: 80px; }
.bottomin2 { float: left; width: 50px; padding-top: 80px; }

/* --- Logo --------------------------------------------------------------- */
.ihrlogo {
	float: left;
	width: 150px;
	height: 80px;
	padding-top: 70px;
	padding-left: 205px;
	line-height: 100px;
	font-size: 28px;
}
.ihrlogo a:link, .ihrlogo a:visited, .ihrlogo a:hover { color: #1b5fba; text-decoration: none; text-transform: none; }

/* --- Top menu (Inici, Fòrum, FCF, Contacta): floated right, so the
       DB order Contacta→Inici reads Inici→Contacta on screen ---------- */
.here { color: #fff; }
.here li { float: right; height: 150px; }
.here li a:link, .here li a:visited {
	display: block;
	width: 80px;
	height: 150px;
	line-height: 245px;
	text-align: center;
	color: #fff;
	background: url(../images/linkback.png) no-repeat 0% 100%;
}
.here li a:hover {
	color: #ccc;
	text-decoration: none;
	background: url(../images/linkback_hover.png) no-repeat 0% 100%;
}

/* --- Search ------------------------------------------------------------- */
.top { float: left; padding: 0; color: #fff; }
.search { margin: 0; }
.inputbox {
	width: 104px;
	margin: 0;
	padding: 1px 2px;
	border: 1px solid #333;
	color: #333;
	font-family: verdana, Helvetica, sans-serif;
	font-size: 10px;
}
.button {
	height: 15px;
	margin: 0 0 0 -4px;
	padding: 0 6px;
	border: 1px solid #333;
	background: #fff;
	color: #333;
	font-family: verdana, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 13px;
	cursor: pointer;
}

/* --- Side menu (the old a.mainlevel / a.sublevel) ------------------------ */
#sidebar .mod-menu > li > a:link, #sidebar .mod-menu > li > a:visited { color: #333; }
#sidebar .mod-menu > li > a:hover { color: #1b5fba; text-decoration: none; }
#sidebar .mod-menu > li.active > a { color: #000; }
/* Joomla's menu.js collapses submenus behind a toggle button; playstone just
   shows the active league's groups */
#sidebar .mod-menu__toggle-sub { display: none; }
#sidebar .mod-menu ul { display: block !important; padding: 0 0 0 4px; }
#sidebar .mod-menu ul li { padding-left: 9px; background: url(../images/indent1.png) no-repeat 0 3px; }
#sidebar .mod-menu ul li.current > a { text-decoration: underline; }

/* --- Content ------------------------------------------------------------ */
.page-header { margin: 0; }
#content h1, #content h2, .page-header h1, .page-header h2 {
	margin: 0 0 12px;
	padding: 0;
	font-size: 13px;
	font-weight: normal;
	color: #666;
	text-transform: uppercase;
}

/* Team lists (the old weblinks tables) */
.team-links { margin: 0 0 0 15px; }
.team-links li { margin-bottom: 3px; padding-left: 6px; background: url(../images/indent1.png) no-repeat 0 4px; }
.team-links-url, .team-links-desc { display: block; color: #333; }

/* Smart Search results */
.com-finder input, .com-finder button { font-size: 10px; }
.com-finder .result__title { font-size: 11px; margin: 8px 0 2px; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* System messages */
#system-message-container { margin-bottom: 10px; }

/* --- Phones: the 750px desktop layout stacks into one column ------------ */
@media (max-width: 760px) {
	*, *::before, *::after { box-sizing: border-box; }
	html, body { max-width: 100%; overflow-x: hidden; }
	body { margin: 0; font-size: 13px; }
	#container, #header, #toplink, #trenner, #box, #bottom { float: none; width: 100%; }
	#sidebar, #content, #bottom { clear: both; }
	#toplink { height: auto; padding-top: 0; background-size: cover; background-position: left center; }
	.ihrlogo { float: none; width: auto; height: auto; padding: 60px 12px 6px; line-height: 1.2; font-size: 24px; }
	.here { float: none; clear: both; }
	.here ul { display: flex; flex-direction: row-reverse; justify-content: space-evenly; flex-wrap: wrap; background: rgba(27, 95, 186, 0.85); }
	.here li { float: none; height: auto; }
	.here li a:link, .here li a:visited, .here li a:hover { width: auto; height: auto; padding: 10px 6px; line-height: 1.2; background: none; font-size: 12px; }
	.top { float: none; padding: 6px 12px; }
	.inputbox { width: 70%; font-size: 14px; padding: 4px; }
	.button { height: auto; font-size: 14px; padding: 4px 10px; line-height: 1.2; }
	#sidebar, #sidebar .moduletable { float: none; width: auto; }
	#sidebar .moduletable { padding: 8px 12px; }
	#sidebar .mod-menu { display: flex; flex-wrap: wrap; gap: 4px 14px; }
	#sidebar .mod-menu > li > a { font-size: 13px; line-height: 1.8; }
	#sidebar .mod-menu > li.deeper { flex-basis: 100%; }
	#sidebar .mod-menu ul { display: flex !important; flex-wrap: wrap; gap: 2px 14px; }
	#sidebar .mod-menu ul li { background-position: 0 8px; }
	#content { float: none; width: auto; padding: 10px 12px; }
	#content h1, #content h2 { font-size: 16px; }
	.team-links { margin-left: 0; }
	.team-links li { margin-bottom: 10px; font-size: 13px; }
	#bottom { height: 90px; background-size: auto 90px; }
	.bottomin { display: none; }
	.bottomin2 { float: right; width: auto; padding: 60px 12px 0; }
}