/* ==========================================================================
   RIQUADRO MOBILE — archivio e forum su schermo stretto
   --------------------------------------------------------------------------
   Su desktop il sito e' la matrice 2010 intatta: header, due colonne da 157px,
   scatola centrale da 510px, footer. Questa CSS non tocca nulla sopra i 720px.
   Sotto, sulle sole pagine che la chiedono (body.rq, messo da _proto.html
   quando la vista passa archivio=True o forum=True), la cornice sparisce e
   resta la scatola centrale a tutta larghezza: stessa carta, stessi titoli,
   stesse classi .arc-/.fr-, solo le larghezze fisse diventano fluide.
   La barra .rq-barra (in _proto.html) sostituisce header e menu di colonna.
   Le altre pagine del sito non hanno viewport ne' classe .rq: sul telefono
   restano la pagina 2010 rimpicciolita, come prima.
   ========================================================================== */

.rq-barra { display: none; }

@media screen and (max-width: 720px) {

	/* ---- la cornice va via ---- */
	/* all.css mette min-width:930px anche su html: senza questa riga la pagina
	   resta larga 930 e il telefono scorre in orizzontale (body a 0 non bastava) */
	html:has(#bodyy.rq) { min-width: 0; }
	#bodyy.rq { min-width: 0; background: #120a04; }
	.rq #sbatti { background: none; transform: none !important; visibility: visible; }
	.rq #page { overflow: visible; }
	.rq .header-wrapper,
	.rq .col-1,
	.rq .col-3,
	.rq .shadow,
	.rq #footer ul,
	.rq #footer .gameforge4d { display: none; }

	/* ---- barra compatta al posto dell'header ---- */
	.rq .rq-barra {
		display: block;
		background: #1c1008 url(../img/header-bg.jpg) no-repeat 50% -70px;
		border-bottom: 1px solid #6b4a1c;
		padding: 0 12px;
		position: relative;
		height: 46px;
	}
	.rq .rq-logo {
		color: #f2d38c;
		float: left;
		font: bold 18px/46px Georgia, "Times New Roman", serif;
		letter-spacing: .04em;
		text-decoration: none;
		text-shadow: 0 1px 2px #000;
	}
	.rq .rq-menu { float: right; }
	.rq .rq-menu summary {
		color: #f2d38c;
		cursor: pointer;
		font: bold 13px/46px Arial, Helvetica, sans-serif;
		list-style: none;
		padding: 0 4px 0 20px;
		position: relative;
	}
	.rq .rq-menu summary::-webkit-details-marker { display: none; }
	/* tre righe disegnate col bordo: niente immagini, niente icone esterne */
	.rq .rq-menu summary::before {
		border-bottom: 2px solid #f2d38c;
		border-top: 2px solid #f2d38c;
		content: "";
		height: 4px;
		left: 2px;
		position: absolute;
		top: 18px;
		width: 12px;
	}
	.rq .rq-menu nav {
		background: #fbf6ea;
		border: 1px solid #c9b18c;
		box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
		position: absolute;
		right: 8px;
		top: 44px;
		width: 200px;
		z-index: 20;
	}
	.rq .rq-menu nav a {
		border-bottom: 1px solid #e6dcc5;
		color: #7b1300;
		display: block;
		font: bold 13px/1 Arial, Helvetica, sans-serif;
		padding: 12px 14px;
		text-decoration: none;
	}
	.rq .rq-menu nav a:last-child { border-bottom: 0; }

	/* ---- la scatola centrale a tutta larghezza ---- */
	.rq .container-wrapper { background: none; float: none; padding: 0 0 16px 0; width: auto; }
	.rq .container { width: auto; }
	.rq .col-2 {
		display: block;
		float: none;
		margin: 0;
		width: auto;
		/* il sito e' scritto a 11px per la scatola da 481px: sul telefono si legge
		   ingrandendo la scatola intera, cosi' ogni proporzione del 2010 resta com'e' */
		zoom: 1.2;
	}
	.rq .content { background: #fbf6ea; width: auto; }
	.rq .content .content-bg,
	.rq .content .content-bg-bottom { background: none; }
	.rq .content .content-bg-bottom { padding: 0 10px 10px 10px; width: auto; }
	.rq .content h2 { background-color: #efe3c6; margin-top: 0; }

	.rq .arc-inner,
	.rq .fr-inner { padding: 0; width: auto; }

	/* ---- tutto quello che aveva 481px scritto dentro ---- */
	.rq .fr-tab { width: 100%; }
	.rq .fr-tab col.c-n,
	.rq .fr-tab col.c-n2 { width: 40px; }
	.rq .fr-tab col.c-u,
	.rq .fr-tab col.c-u2 { width: 86px; }
	.rq .fr-barra { height: auto; overflow: hidden; }
	.rq .fr-briciole { float: none; width: auto; white-space: normal; }
	.rq .fr-cerca { float: none; padding: 4px 0 0 0; }
	.rq .fr-inner ul.fr-numeri li { width: 50%; }
	/* solo gli svg con viewBox: le icone del forum (<use> senza viewBox) con
	   height:auto prendevano i 150px di default e uscivano dal loro quadratino */
	.rq .col-2 img,
	.rq .col-2 svg[viewBox],
	.rq .col-2 video { max-width: 100%; height: auto; }
	.rq .col-2 table { max-width: 100%; }

	/* ---- footer: resta solo lo switcher delle lingue ---- */
	.rq .footer-wrapper { background: none; float: none; height: auto; margin: 0; }
	.rq #footer { width: auto; }
}