/* @override http://www.brancaleonedaromana.it/wp-content/themes/brancaleone/style.css */

/* @override 
	http://localhost:8888/brancaleone/style.css
	http://brancaleonedaromana.it/wp-content/themes/brancaleone/style.css
*/

/*

Theme Name: Brancaleone
Theme URI: http://www.brancaleonedaromana.it
Description: Brancaleone da Romana, tema per WordPress
Version: 1.0
Author: Roberto Piludu
Author URI: http://www.piludu.it
Tags: fixed width

*/

/* CSS Document */

BODY{
	font-family: "Lucida Grande", Arial;
	font-size: 14px;
	color: #3e3d40;
	background: #eceded;
	margin: 0;
	padding: 0;
	text-align: center;
}

A{
	color: #1f2107;
}

A:hover{
	text-decoration: none;
}

A IMG{
	border: 0;
}

H1, H2, H3, H4, H5,
H1 A, H2 A, H3 A, H4 A, H5 A{
	color: #1f2107;
}

/*DIV{
	min-height: 20px;
	margin: 5px;
	padding: 5px;
	border: 1px solid #000;
}*/

ul.accessibility {
	position: absolute;
	top: -100%;
}

.width{
	width: 975px;
	display: inline-block;
}

/* Elementi principali */
#menu_mobile{
	display: none;
	color: #fff;
	padding: 15px;
	padding-bottom: 0px;
	width: 250px;
	margin: auto;
}

#menu_mobile_ancor{ cursor: pointer; }
#menu_mobile UL{
	margin: 0;
	padding: 0;
}

#menu_mobile LI{
	list-style-type: none;
}

#menu_mobile A{
	color: #fff;
	text-decoration: none;
	padding: 10px;
	margin-top: 10px;
	display: block;
	border-bottom: 1px solid #c0c0c0;
}

#menu_mobile UL#menu-menu-principale{
	display: none;
}

#header{
	background: url(images/sfondo_header.jpg) repeat-y center top #1f2107;
}

#page{
	display: block;
	margin: 0;
	padding: 0;
	padding-bottom: 60px;
	background: url(images/ombra_header.jpg) repeat-x left top #fffef5;
}

#footer{
	display: block;
	margin: 0;
	padding: 0;
	padding-top: 15px;
	padding-bottom: 15px;
	border-top: 2px solid #1f2107;
	font-size: 70%;
}

/* Elementi header */
#logo_sx{
	width: 29px;
	height: 20px;
	display: inline-block;
	margin: 0;
	margin-right: 15px;
	padding: 0;
	background: url(images/left_logo.png) no-repeat center bottom;
}

#logo_dx{
	width: 29px;
	height: 20px;
	display: inline-block;
	margin: 0;
	margin-left: 15px;
	padding: 0;
	background: url(images/right_logo.png) no-repeat center bottom;
}

#logo{
	display: inline-block;
	margin: 0;
	margin-top: 30px;
	margin-bottom: 30px;
	padding: 0;
}

#logo H1{
	display: inline-block;
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: 250%;
}

#logo A{
	color: #ffffff;
	text-decoration: none;
}

#image{
	width: 100%;
	display: inline-block;
	margin: 0;
	margin-bottom: 30px;
	padding: 0;
}

#slogan{
	width: 100%;
	display: inline-block;
	margin: 0;
	margin-bottom: 30px;
	padding: 0;
	font-size: 85%;
	color: #ffffff;
}

#slogan P:first-child{
	margin-top: 0;
}

#slogan P:last-child{
	margin-bottom: 0;
}

/* Elementi page */
#menu_sx{
	width: 29px;
	height: 15px;
	display: inline-block;
	margin: 0;
	margin-top: 20px;
	margin-right: 15px;
	padding: 0;
	background: url(images/left_menu.jpg) no-repeat center bottom;
}

#menu_dx{
	width: 29px;
	height: 15px;
	display: inline-block;
	margin: 0;
	margin-top: 20px;
	margin-left: 15px;
	padding: 0;
	background: url(images/right_menu.jpg) no-repeat center bottom;
}

#menu{
	display: inline-block;
	margin: 0;
	margin-bottom: 20px;
	padding: 0;
	font-size: 90%;
	list-style-type: none;
}

#menu UL{
	display: block;
	margin: 0;
	padding: 0;
}

#menu UL LI{
	display: inline-block;
	margin: 0;
	margin-left: 10px;
	padding: 0;
	padding-left: 10px;
	border-left: 1px solid #5a551c;
	list-style-type: none;
}

#menu UL LI:first-child{
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}

#menu UL LI A{
	color: #5a551c;
	text-decoration: none;
}

#menu UL LI A:hover{
	color: #000000;
	text-decoration: none;
}

/* Secondo livello */
#menu UL LI UL{
	visibility: hidden;
	display: none;
	left: -999em;
}

#menu UL LI:hover UL{
	visibility: visible;
	display: block;
	left: auto;
	position: absolute;
	width: 170px;
	margin: 0;
	margin-left: 1px;
	padding: 0;
	z-index: 99;
	text-align: left;
}

#menu UL LI UL LI,
#menu UL LI UL LI:first-child{
	display: block;
	float: none;
	margin: 0;
	margin-left: 0;
	padding: 5px;
	border-left: 0;
	color: #808285;
	font-size: 90%;
	background: #fffef5;
	list-style-type: none;
}


#separatore{
	display: inline-block;
	width: 100%;
	height: 32px;
	margin: 10px;
	padding: 0;
	background: url(images/separatore.jpg) no-repeat center top;
}

.richiamo{
	display: inline-block;
	width: 250px;
	margin: 20px;
	padding: 0;
}

#body{
	display: block;
	text-align: left;
}

#sx{
	width: 500px;
	min-height: 500px;
	display: block;
	float: left;
	margin: 0;
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: center;
}

#dx{
	width: 250px;
	/*min-height: 150px;*/
	display: block;
	float: right;
	margin: 0;
	margin-left: 20px;
	margin-bottom: 20px;
	text-align: center;
}

#bread{
	font-size: 80%;
	color: #1f2107;
}

.elenco{
	display: inline-block;
	width: 210px;
	vertical-align: top;
	margin: 15px;
	padding: 0;
	text-align: center;
	font-size: 90%;
}

.navigation{
	clear: both;
}

#zfContainer{
	width: 970px;
	height: 350px;
	margin: auto;
	border: 1px;
	border-style: solid;
	border-color: #696969;
}

/* Risoluzioni */
IMG{
	max-width: 100% !important;
	height: auto;
}

@media only screen and ( min-width: 770px ) and ( max-width: 1000px ) {
	.width{ width: 700px; }	
	#logo{ width: 540px; }
	.elenco{ width: 200px; }
	#sx{ width: 400px; }
	#menu UL LI{ font-size: 95%; margin-left: 3px; padding-left: 4px; }
	#separatore{ margin-left: 0; margin-right: 0; }
	#menu_sx{ margin-right: 5px; }
	#menu_dx{ margin-left: 5px; }
	#zfContainer{ width: 700px; }
}

@media only screen and ( min-width: 480px ) and ( max-width: 770px ) {
	.width{ width: 450px; }
	#menu_mobile{ display: block; margin-bottom: 15px; }
	#logo{ width: 340px; margin-top: 0; }
	#logo H1 A{ font-size: 30px !important; }
	#logo_dx, #logo_sx{ margin-bottom: 45px; }
	.elenco{ width: 190px; }
	#sx{ float: none; width: 430px; min-height: 0; margin: 0 10px 20px 10px; }
	#dx{ float: none; width: 100%; margin-left: 0; }
	#menu, #menu_sx, #menu_dx, #separatore{ display: none; }
	#page{ padding-top: 30px; }
	#zfContainer{ width: 480px; }
}

@media only screen and ( max-width: 480px ) {
	.width{ width: 300px; }
	#menu_mobile{ display: block; }
	#logo{ width: 200px; }
	#logo H1 A{ font-size: 18px !important; }
	#logo_dx, #logo_sx{ margin-top: 0px; margin-bottom: 20px; }
	.elenco{ width: 270px; }
	#sx{ float: none; width: 280px; min-height: 0; margin: 0 10px 20px 10px; }
	#dx{ float: none; width: 100%; margin-left: 0; }
	#menu, #menu_sx, #menu_dx, #separatore{ display: none; }
	#page{ padding-top: 30px; }
	#zfContainer{ width: 300px; }
}