﻿body {
	margin: 0;
	background-color: #f2f2f2;
	padding:0;
	width:100%;	
}
div {
width:845px;
margin:0 auto;
}

/*
DEFINISCO IL DIV PRINCIPALE CONTENITORE DEGLI ALTRI DIV
*/
#MAIN {
	width: 845px;
	height: 100%;
	background-color: #FFFFFF;
}
#TOP {
	text-align: left;

	font-weight: bold;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 10px;
	width: 825px;
	background-image: url('css/sfondotop.jpg');
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	color: #cad1cb;
	text-transform: uppercase;
}
.photo {
    padding: 20px;
    width: 800px;
    height: 360px;
    text-align: left;
    background-color: #ffffff;
}
.photo h1 {font-size:14px; font-weight:normal; color:#fc0; margin:0 0 0 5px; padding:0;}
/*quadratino blu con thumbnails
*/
.photo ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 216px;
	border: 1px solid #666;
	position: relative;
	height: 310px;
	background-image: url('css/sfondotop.jpg');
}
.photo ul li {display:inline; width:60px; height:38px; float:left; margin:6px;}
.photo ul li a {display:block; width:60px; height:38px; cursor:default; background:url(css/arrow.gif) no-repeat; text-decoration:none;}
.photo ul li a b {display:none;}
.photo ul li a img {display:block; width:60px; height:38px; border:1px solid #666; border-top-color:#ccc;}
 
.photo ul li a:hover {white-space:normal;position:relative;}
 
.photo ul li a.vert:hover img {position:absolute; left:-8px; top:-20px; width:60px; height:82px; border-color:#fc0;}
.photo ul li a.hor:hover img {position:absolute; left:-20px; top:-12px; width:100px; height:63px; border-color:#fc0;}
 
.photo ul li a:active, .photo ul li a:focus {position:static; outline:0;}
/*foto grande in verticale
*/ 
.photo ul li a:focus.vert img, .photo ul li a:active.vert img {
	background-color: #000;
	position: absolute;
	left: 380px;
	top: 0;
	width: 280px;
	height: 380px;
	border: 1px solid #fc0;
	padding: 5px 45px;
	background-image: url('css/sfondorighe.jpg');
}
/*foto grande in orizzontale
*/
.photo ul li a:focus.hor img, .photo ul li a:active.hor img {
	background-color: #000;
	position: absolute;
	left: 300px;
	top: 0;
	width: 500px;
	height: 315px;
	border: 1px solid #fc0;
	padding: 35px 5px 35px 5px;
	background-image: url('css/sfondorighe.jpg');
}
/*trafiletto dove compaiono le didascalie
*/
.photo ul li a:focus b, .photo ul li a:active b {
	font-weight: normal;
	display: block;
	position: absolute;
	width: 204px;
	height: 50px;
	border: 1px solid #666;
	top: 350px;
	left: 0;
	color: #000066;
	padding: 6px;
	font: oblique normal normal 100% "Berlin Sans FB";
	background-color:#ebebeb;
}
#CONTATTI {
	text-align: right;
	padding-top: 20px;
	padding-bottom: 10px;
	width: 825px;
	padding-right: 20px;
	color: #19388a;
	font-family: Arial;
	font-size: small;
}
#CONTATTI img {
    float:right;
}
#CONTATTI a {
    font-family: "Brush Script MT";
	font-size: medium;
}
/**indietro**/
#BACK {
    font: italic normal normal 20px Arial;
    padding: 5px 0 5px 0;
    background-image: url('css/sfondotop.jpg');
    text-align: center;
    color: #ebebeb;
}
#BACK a {text-decoration:none; color:#ebebeb;}
#BACK a:hover {color:#ebebeb; text-decoration:underline;}
#BACK a:visited {color:#ebebeb; text-decoration:none;}

/********** footer **********/
.footer {
    margin: 0;
    padding: 10px 0 0 0;
}
.footer_resize {
    margin: 0 auto;
    padding: 10px 0;
    width: 965px;
    border-top: 1px solid #cecece;
    background-color: #f2f2f2;
    height: 50px;
}
.footer ul { margin:0; padding:20px 10px 10px 10px; list-style:none; float:left;}
.footer img { display:inline; margin:5px 10px; padding:0;}
.footer ul li { margin:0; padding:0 10px; float:left;}
.footer p {
    margin: 0;
    padding: 20px 20px 10px 20px;
    float: right;
    color: #6d6d6d;
    font: normal 10px Arial, Helvetica, sans-serif;
    line-height: 1.8em;
}
.footer a { color:#6d6d6d; font:normal 12px  Arial, Helvetica, sans-serif; text-decoration:none; line-height:1.8em;}
.footer a:hover { text-decoration:underline;}
