/* 
    Document   : stile
    Created on : 24-mag-2013, 17.39.53
    Author     : Pietro
    Description:
        Purpose of the stylesheet follows.
*/
/* DEFINIZIONE FONT */
@font-face {font-family: CordiaNew; src: url(fonts/cordia.ttf);}

a, p, h2 {color: white;}
a {text-decoration: none;}
a:hover, a.active {color: orange;}

/* LAYOUT GENERALE - disposizione dei blocchi */
html {background-color: #574841; background: url(immagini/sfondo1.jpg); color: white; font-family: CordiaNew, arial, sans-serif; font-size: 1.2em;} /*  */
body {}
div#container {position: fixed; top: 50%; left: 50%; width: 1100px;  margin-left: -550px; height: 600px; margin-top: -350px;}
header {padding: 0 5px; border-bottom: 1px solid white; width: 800px; margin: 0 auto; position: relative;}
div#corpo {width: 1100px; height: 500px; margin: 0 auto; position: relative; overflow-x: hidden; overflow-y: auto;}
nav{padding: 10px 0; border-top: 1px solid white; width: 800px; margin: 0 auto;}
nav#lang {border: 0;}
footer {position: absolute; bottom: 10px; width: 800px; left: 50%; margin-left: -400px;}

/* LAYOUT GENERALE - menu e zone comuni */
header h3, header p {display: inline-block; padding: 0; margin: 0;}
header div.subtitle {position: absolute; right: 0; bottom: 0;}
nav {text-align: center;}
nav a {display: inline-block; width: 155px;}
nav a.last {margin-right: 0;}
/* versione con selettori testuali */
/*nav#lang a {margin-right: 10px; padding: 5px 10px 3px 0; border-right: 1px solid white;}
nav#lang a.last {padding-right: 0; border: 0;}*/
/* versione con bandierine */
nav#lang a {margin: 0 15px; padding: 0; border: 0; width: 30px;}
nav#lang a img {width: 30px; height: 20px; box-shadow: 2px 2px 2px black;}
nav#lang a img:hover {box-shadow: 1px 1px 1px black;}

footer {text-align: center; font-size: smaller; line-height: 10px;}

/* CORPO DELLA PAGINA - visualizzazione dei contenuti */
#corpo a, #corpo p {font-size: larger;}
#corpo p {text-align: justify; line-height: 30px;}
#corpo h2 {margin-top: 10px;}
#corpo #testi {width: 500px; margin: 80px auto 0 auto;}

/* Pagina PROGETTI - versione tabellare */
/*#corpo table {margin: 30px 0;}
#corpo table th {text-align: right; padding-right: 10px;}
#corpo table td {padding: 3px;}
#corpo table td div {width: 75px; height: 60px; position: relative;}
#corpo table td div img {width: 75px; height: 60px; position: absolute; top: 0; left: 0;
                  transition-property: width, height, top, left;
                  transition-duration: 0.2s;}
#corpo table td div:hover > img {width: 140px; height: 120px;  top: -30px; left: -32px; z-index: 10; 
       border: 2px solid white;}*/

/* Pagina PROGETTI - versione div */
#corpo div#elenco {padding: 0; text-align: center; margin-top: 20px;}
#corpo div#elenco div.riga {height: 60px; margin: 10px auto; text-align: center; }
#corpo div#elenco div.riga p.categoria {width: 125px; text-align: right; padding-right: 10px; float: left;}
#corpo div#elenco div.riga div.riga_thumbs {float:left;}
#corpo div#elenco div.riga div.thumb {width: 140px; height: 120px; position: relative; display: inline-block; margin-left: 10px;}
#corpo div#elenco div.riga div.thumb img {width: 140px; height: 120px; position: absolute; top: 0; left: 0;
                  transition-property: width, height, top, left;
                  transition-duration: 0.2s;}
#corpo div#elenco div.riga a:hover > img {width: 225px; height: 180px; border: 2px solid white; top: -30px; left: -32px; z-index: 10;}
#corpo div#elenco div.riga div.thumb:hover {cursor: pointer;}
#corpo div#elenco div.avanti,#corpo div#elenco div.indietro {float:left; margin: 0 10px; background-color: black; height: 60px;}

#corpo div#elenco_categorie, #corpo div#elenco_categorie p  {margin: 40px auto; text-align: center;}
#corpo div#elenco_categorie.home {text-align: left; display: inline-block; position: absolute;}

#corpo div#elenco_categorie a:hover{text-decoration: underline;}

#corpo div#sub_menu_categorie {margin-top: 20px; text-align: center;}
#corpo div#sub_menu_categorie a {font-size: smaller; margin-left: 15px;}
#corpo div#sub_menu_categorie a.first {margin-left: 0;}

/* Animazione per far girare i thumb all'interno della div.riga_thumbs*/
/*.jcarousel {overflow-x: hidden;}
.jcarousel {position: relative; overflow-x: hidden; height: 60px; width: 330px;}
.jcarousel ul {width: 20000em; position: absolute; list-style: none; margin: 0; padding: 0;}
.jcarousel li {float: left; margin-right: 10px; width: 75px;}
.jcarousel img { width: 75px;}*/

#corpo div.descrizione {position: fixed; top: 50%; left: 50%; width: 300px; margin-left: 200px; height: 250px; margin-top: -175px;}
#corpo div.nascosto {display: none;}

#corpo div#navigatore {position: absolute; top: 0; right: 145px;}
/* slideshow */
#corpo div#slideshow_fade {position: relative; width:650px; height:490px; overflow:hidden; margin-left: 130px; display: inline-block;}
#corpo div#slideshow_fade img {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
            max-width: 600px; border: 10px solid white; box-shadow: 5px 10px 10px black; }

/*
#popup_txt { width:780px; height:40px; position:absolute; left:0px; top:440px; background-color:#000; z-index:10; opacity:0.7; padding:10px; color:#FFF;}
h4.titleImage { font-size:16px; line-height:18px; margin:0;}
*/
/* FINE slideshow */

div#titolo {margin-left: 145px;}
div#colonna_sx, div#descrizione, div#mostra {float: left;}
div#colonna_sx {}
div#colonna_sx div {width: 130px; height: 120px; margin-bottom: 10px;}
div#colonna_sx div img {width: 120px; height: 85px; border: 2px solid white;}
div#colonna_sx div img:hover {cursor: pointer;} 
div#descrizione {width: 350px; margin-left: 40px;}
div#mostra {width: 500px; max-height: 400px;}
div#mostra img {position: absolute; top: 50px; bottom: 0; left: 550px; right: 0; margin: auto;
            max-width: 500px; max-height: 400px; border: 10px solid white; box-shadow: 5px 5px 5px black; }
div.visibile {display: block;}