/** global **/

body {
	margin:40px auto;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#333;
	background:#006600 url('images/body-bg.png') repeat-x;
}

* {
	margin:0;
	padding:0;
}


/** element defaults **/

table {
	width:100%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	text-align:left;
}

th,
td {
	padding:5px 10px;
}

th {
	color:#fff;
	border-top:3px solid #004400;
	background-color:#006600;
}

td {
	border-bottom:1px solid #f4f4f4;
}

code,
blockquote {
	display:block;
	border-left:5px solid #ddd;
	padding:10px;
	margin-bottom:20px;
}

blockquote p {
	font-style:italic;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin:0;
	height:1%;
}

p {
	line-height:1.9em;
	margin-bottom:20px;
}

a {
	color:#1A601A;
}

a:hover {
	color:#333;
}

a:focus {
	outline:none;
}

fieldset {
	display:block;
	border:none;
	border-top:1px solid #e0e0e0;
}

fieldset legend {
	font-weight:bold;
	font-size:13px;
	padding-right:10px;
	color:#222;
}

fieldset form {
	padding-top:15px;
}

fieldset p label {
	float:left;
	width:150px;
	font-family:Arial, Helvetica, sans-serif;
}

fieldset form input,
fieldset form select,
fieldset form textarea {
	padding:5px;
	color:#333333;
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
	border:1px solid #ddd;
}

fieldset form input.formbutton {
	margin-left:150px;
	background:#006600;
	border:none;
	border-bottom:3px solid #004400;
	color:#ffffff;
	font-weight:bold;
	padding:5px 10px;
	font-size:13px;
}


/** headings **/

h1 {
	font-size:45px;
}

h2 {
	color:#2f2f2f;
	font-family:Arial, Helvetica, sans-serif;
	font-size:30px;
	font-weight:bold;
	letter-spacing:-2px;
	padding:0 0 5px;
	margin:0;
}

h3 {
	color:#001400;
	font-size:20px;
	padding-bottom:10px;
}

h4 {
	padding-bottom:10px;
	font-size:15px;
	color:#006600;
}

h5 {
	padding-bottom:10px;
	font-size:13px;
	color:#666666;
}

ul,
ol {
	margin:0 0 35px 35px;
}

li {
	padding-bottom:5px;
}


/** wrapper **/

div#wrapper-outer {
	width:940px;
	margin:0px auto;
	background:#fff url('images/wrapper-top.jpg') no-repeat scroll top left;
}

div#wrapper {
	width:920px;
	margin:0px auto;
	padding:10px 10px 40px;
	background:transparent url('images/footer.jpg') no-repeat scroll bottom center;
}


/** sitename **/

div#sitename h1 {
	color:#549FC7;
	font-size:48px;
	font-weight:bold;
	letter-spacing:-5px;
	margin:0;
	padding:25px 10px 35px 15px;
}

div#sitename h1 a,
div#sitename h1 a:hover {
	color:#004300;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	letter-spacing:-1px;
	text-decoration:none;
}


/** nav **/

div#nav {
	background:#006600 url('images/nav-bg.jpg') repeat-x scroll top left;
	height:40px;
}

div#nav ul {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	border-right:1px solid #09232F;
}

div#nav ul li {
	float:left;
	padding-bottom:0;
	display:block;
}

div#nav ul li a,
div#nav ul li a:visited,
div#nav ul li a:active,
div#nav ul li a:link {
	color:#fff;
	display:block;
	float:left;
	text-decoration:none;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	cursor:pointer;
	text-transform:uppercase;
}

div#nav ul li.current a {
	color:#0D570C;
	background:transparent url('images/item-right.jpg') no-repeat scroll top right;
}

div#nav ul li.current a span,
div#nav ul li.current a:visited span,
div#nav ul li.current a:hover span,
div#nav ul li.current a:active span,
div#nav ul li.current a:link span {
	background:transparent url('images/item-left.jpg') no-repeat scroll top left;
	border:none;
	padding:18px 15px 16px;
}

div#nav ul li.current a {
	margin-top:-6px;
}

div#nav ul li a span {
	padding:14px 15px 14px;
	border-right:1px solid #126F11;
	border-left:1px solid #072C07;
	display:block;
	float:left;
	background:transparent none;
}

div#nav ul li a:hover span {
	background:transparent url('images/nav-bg-hover.jpg') repeat-x scroll top left;
}


/** content images **/

#content img {
	padding:5px;
	border:1px solid #000000;
}


/** body **/

div#body {
	padding:10px 5px;
	background:#fff url('images/content-bg.jpg') repeat-x scroll top left;
}


/** content+sidebar styles **/

div#content {
	width:890px;
}

div.column-left {
	float:left;
	margin-right:20px;
}

div.column-right {
	float:right;
	background:#f2feed;
}

div#sidebar {
	width:0px;
}

div#sidebar ul {
	margin:0;
	padding:0;
	list-style:none;
}

div#sidebar li ul {
	border-top:1px solid #ddd;
	margin-bottom:20px;
}

div#sidebar li ul li {
	display:block;
	padding:10px 15px;
	color:#777;
}

div#sidebar li ul li a {
	color:#006600;
	text-decoration:none;
	font-weight:bold;
}

div#sidebar li ul li a:hover {
	color:#001800;
	text-decoration:underline;
}

div#sidebar h4 {
	color:#444;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	font-weight:normal;
	margin:0;
	padding:7px 10px;
}


/** footer **/

div#footer {
	background:#004E00;
	padding:20px 20px;
	color:#fff;
	border-bottom:2px solid #001200;
}

div#footer p {
	color:#fff;
	margin:0;
	font-size:11px;
	width:50%;
}

div#footer p.left {
	float:left;
}

div#footer p.right {
	float:right;
	text-align:right;
}

div#footer p a {
	color:#fff;
	font-weight:bold;
	text-decoration:none;
	border-bottom:1px solid #fff;
}

div#footer p a:hover {
	background-color:#006600;
}


/** clear fix **/

.clear:after {
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	line-height:0;
	height:0;
}

.clear {
	display:inline-block;
}

.clear {
	display:block;
}


/* =========================================================
   PAGINA RICERCA ANNO / EVENTO
   ========================================================= */


/*
   Eliminiamo completamente la vecchia sidebar.
*/

#sidebar {
	display:none !important;
}


/*
   Il contenitore del corpo occupa tutta la larghezza.
*/

#body {
	width:100%;
	box-sizing:border-box;
}


/*
   Nuovo contenitore principale.
*/

#event-content {
	width:100%;
	box-sizing:border-box;
	background:#f2feed;
}


/*
   =========================================================
   TRE COLONNE
   =========================================================
*/

#event-layout {

	width:100%;

	display:flex;

	align-items:flex-start;

	box-sizing:border-box;

	margin:0;

	padding:0;

	/*
	   IMPORTANTISSIMO:
	   nessun overflow qui.
	   Altrimenti position:sticky può non funzionare.
	*/

	overflow:visible;
}


/*
   =========================================================
   COLONNA ANNO
   =========================================================
*/

#event-anno {

	width:63px;

	min-width:63px;

	max-width:63px;

	flex:0 0 63px;

	box-sizing:border-box;

	position:sticky;

	position:-webkit-sticky;

	top:0;

	align-self:flex-start;

	z-index:50;

	background:#FFFEC4;
}


/*
   =========================================================
   BOX ANNO / EVENTO
   =========================================================
*/

.event-box {

	width:100%;

	box-sizing:border-box;

	border:2px solid #000000;

	background:#FFFEC4;

	text-align:center;

	padding:3px 3px 5px;
}


/*
   Titolo del box.
*/

.event-title {

	text-align:center;

	padding:1px 0 3px;

	margin:0;

	white-space:nowrap;
}


/*
   Contenuto del box.
*/

.event-content {

	text-align:center;

	padding:0;

	margin:0;

}


/*
   =========================================================
   COLONNA CENTRALE
   =========================================================
*/

#event-center {

	flex:1 1 auto;

	width:auto;

	min-width:0;

	box-sizing:border-box;

	padding:5px 10px;

	background:#f2feed;

	text-align:center;

	/*
	   La parte centrale NON è sticky.
	   Deve scorrere normalmente.
	*/

	position:relative;
}


/*
   Evita che tabelle interne allarghino
   la colonna centrale.
*/

#event-center table {

	max-width:100%;

	box-sizing:border-box;
}


/*
   Immagini contenute nei risultati.
*/

#event-center img {

	max-width:100%;

	height:auto;
}


/*
   =========================================================
   COLONNA EVENTO
   =========================================================
*/

#event-evento {

	width:216px;

	min-width:216px;

	max-width:216px;

	flex:0 0 216px;

	box-sizing:border-box;

	position:sticky;

	position:-webkit-sticky;

	top:0;

	align-self:flex-start;

	z-index:50;

	background:#FFFEC4;
}


/*
   =========================================================
   CONTROLLI INTERNI
   =========================================================
*/

#event-anno select,
#event-evento select {

	max-width:100%;

	box-sizing:border-box;
}

#event-anno input,
#event-evento input {

	max-width:100%;

	box-sizing:border-box;
}


/*
   =========================================================
   EVITIAMO GLI SPAZI DELLA VECCHIA STRUTTURA
   =========================================================
*/

#event-content > p:last-child {

	margin-bottom:0;
}


/*
   =========================================================
   DESKTOP
   =========================================================
*/

@media screen and (min-width:601px) {

	#event-layout {

		width:100%;

		display:flex;

		align-items:flex-start;

		overflow:visible;
	}

	#event-anno {

		position:-webkit-sticky;

		position:sticky;

		top:0;
	}

	#event-evento {

		position:-webkit-sticky;

		position:sticky;

		top:0;
	}

}


/*
   =========================================================
   TABLET
   =========================================================
*/

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

	div#wrapper-outer {

		width:100%;
	}

	div#wrapper {

		width:100%;

		box-sizing:border-box;
	}

	#event-content {

		width:100%;
	}

	#event-layout {

		width:100%;
	}

}


/*
   =========================================================
   MOBILE
   =========================================================
*/

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

	body {

		margin:0;

		background:#fff;
	}

	div#wrapper-outer {

		width:100%;

		margin:0;

		background:#fff;
	}

	div#wrapper {

		width:100%;

		margin:0;

		padding:5px 5px 30px;

		box-sizing:border-box;

		background:#fff;
	}

	div#body {

		width:100%;

		padding:10px 2px;

		background:#fff url('images/content-bg.jpg')
			repeat-x scroll top left;
	}


	/*
	   TESTATA MOBILE
	*/

	div#sitename h1 {

		padding:15px 5px 20px;

		font-size:24px;

		letter-spacing:-1px;
	}

	div#sitename h1 img {

		width:70px;

		height:70px;
	}

	div#sitename h1 span {

		font-size:21px !important;
	}


	/*
	   MENU MOBILE
	*/

	div#nav {

		height:auto;
	}

	div#nav ul {

		float:none;

		width:100%;
	}

	div#nav ul li {

		float:none;

		width:100%;
	}

	div#nav ul li a {

		float:none;

		width:100%;

		text-align:center;
	}

	div#nav ul li a span {

		float:none;

		display:block;

		width:100%;

		box-sizing:border-box;
	}


	/*
	   TRE COLONNE MOBILE
	*/

	#event-layout {

		display:flex;

		width:100%;

		align-items:flex-start;

		overflow:visible;
	}


	/*
	   Anno rimane a sinistra.
	*/

	#event-anno {

		width:63px;

		min-width:63px;

		max-width:63px;

		flex:0 0 63px;

		position:-webkit-sticky;

		position:sticky;

		top:0;

		align-self:flex-start;
	}


	/*
	   Centro prende lo spazio disponibile.
	*/

	#event-center {

		flex:1 1 auto;

		min-width:0;

		padding:5px;
	}


	/*
	   Evento rimane a destra.
	*/

	#event-evento {

		width:120px;

		min-width:120px;

		max-width:120px;

		flex:0 0 120px;

		position:-webkit-sticky;

		position:sticky;

		top:0;

		align-self:flex-start;
	}


	/*
	   Riduzione testo laterale.
	*/

	#event-anno,
	#event-evento {

		font-size:11px;
	}

}


/*
   =========================================================
   STAMPA
   =========================================================
*/

@media print {

	body {

		margin:0;

		background:#fff;
	}

	div#wrapper-outer,
	div#wrapper {

		width:100%;

		margin:0;

		padding:0;

		background:#fff;
	}

	div#nav {

		display:none;
	}

	#sidebar {

		display:none !important;
	}

	#event-anno,
	#event-evento {

		position:static;

		background:#FFFEC4;
	}

	#event-center {

		background:#fff;
	}

	div#footer {

		background:#fff;

		color:#000;

		border-top:1px solid #000;
	}

	div#footer p,
	div#footer p a {

		color:#000;
	}

}