la media query è alla fine
codice:
* {
margin: 0;
padding: 0;
}
.container {
margin-right: auto;
margin-left: auto;
font-size:100%;
max-width: 60em;
}
@font-face {
font-family: Cardinal Alternate;
src: url(../font/Cardinal-Alternate.ttf);
}
body {
background-color:black;
}
/* Intestazioni */
header {
overflow:hidden;
height:9.895%;
width:100%;
}
.logo{
float:left;
width:21.875%;
}
.Titolo{
float:left;
width:78.125%;
}
.logo img{
width:95px;
height:95px;
}
h1{
font-size:2.0625em;
text-align:left;
font-family: Cardinal Alternate;
color:white;
margin-top:4.166%;
}
h3 {
font-family: Palatino Linotype;
font-size:1.875em;
margin-bottom:12.5%;
text-align:center;
}
h4{
font-family: Palatino Linotype;
font-size:1.5625em;
margin-bottom:1.086%;
text-align:center;
}
/* Menu di Navigazione*/
#nav {
list-style:none;
text-align:center;
margin-bottom:1.041%;
}
#nav li {
display:inline-block;
width:155px;
height:45px;
background: -webkit-linear-gradient(#F5BD9D, #F58E62); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#F5BD9D, #F58E62); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#F5BD9D, #F58E62); /* For Firefox 3.6 to 15 */
background: linear-gradient(#F5BD9D, #F58E62); /* Standard syntax */
position:relative;
z-index:500;
-webkit-transition: all 0.1s ease-in-out;
}
#nav li.first {
border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
}
#nav li.last {
border-radius:0 5px 5px 0;
-moz-border-radius:0 5px 5px 0;
}
#nav li li.last {
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
}
#nav li a {
display:block;
font-weight:700;
line-height:2.5em;
font-size:1.125em;
text-decoration:none;
text-align:center;
color:black;
}
#nav li :hover {
background: -webkit-radial-gradient(#F5A46E,#F5BD8C,#F5BA93); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(#F5A46E,#F5BD8C,#F5BA93); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(#F5A46E,#F5BD8C,#F5BA93); /* For Firefox 3.6 to 15 */
background: radial-gradient(#F5A46E,#F5BD8C,#F5BA93); /* Standard syntax */;
}
#nav li a:hover{
color:#C00;
}
#nav li li:hover {
-webkit-transform: translate(+10px,0);
}
#nav a.selected {
color:#C00;
}
#nav ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}
#nav ul li {
width:200px;
float:left;
border-top:1px solid black;
background: -webkit-linear-gradient(#F5BD9D, #F58E62); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#F5BD9D, #F58E62); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#F5BD9D, #F58E62); /* For Firefox 3.6 to 15 */
background: linear-gradient(#F5BD9D, #F58E62); /* Standard syntax */
}
#nav ul a {
display:block;
line-height:1.875em;
padding: 8px 5px;
color:black;
}
/* fix ie6, meglio inserirlo in un file .css separato */
*html #nav ul {
margin:0 0 0 -2px;
}
.toggle-nav{
display:none;
}
/*Contenuto delle pagine */
section {
background-color:#FFFBBD;
min-height:190px;
}
section div {
overflow:hidden;
}
div.tagline{
float:left;
width:45.833%;
padding:2.083%;
text-align:center;
}
div.tagline p{
font-family:Palatino Linotype;
font-size:1.4375em;
}
#map{
float:right;
width:50%;
}
#map iframe{
width:100%;
height:375px;
border:0;
}
.archivio {
padding:2.083%;
}
caption {
font-family:Palatino Linotype;
font-weight:700;
font-size:1.25em;
border-top:2px solid;
border-left:2px solid;
border-right:2px solid;
border-radius:5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
background: -webkit-linear-gradient(#FF6E63,#FF1F1F); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FF6E63, #FF1F1F); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FF6E63, #FF1F1F); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FF6E63, #FF1F1F); /* Standard syntax */
}
caption:hover{
background: -webkit-radial-gradient(#FF4B45,#FF6E63,#FFB3B3); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(#FF4B45,#FF6E63,#FFB3B3); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(#FF4B45,#FF6E63,#FFB3B3); /* For Firefox 3.6 to 15 */
background: radial-gradient(#FF4B45,#FF6E63,#FFB3B3); /* Standard syntax */;
}
table {
margin-right: auto;
margin-left: auto;
text-align:center;
border:2px solid black;
font-family:Palatino Linotype;
font-size:1.125em;
font-weight:700;
background-color:#5C5C5C;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px ;
}
td{
width:6.25%;
height:2.604%;
border:2px solid;
padding:0.208%;
background-color:#D1D1D1;
border-radius:5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
table.elenco td{
width:23.437%;
height:2.604%;
border:2px solid;
padding:0.520%;
text-align:left;
background-color:#D1D1D1;
border-radius:5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
table.estemporanee td{
width:26.041%;
height:55px;
text-align:left;
border:2px solid;
padding:0.312%;
background-color:#D1D1D1;
border-radius:5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
a[href]{text-decoration:none;
color:black;
}
a:hover {color:#1F1F1F}
div#bibliografia{
font-family:Palatino Linotype;
font-size:1.0625em;
padding:3.125%;
}
div#bibliografia li{
list-style-type:circle;
margin-bottom:3.125%;
}
div#bibliografia li span {
font-weight:900;
}
div.description{
width:47.916%;
float:left;
padding:1.041%;
}
div.description p{
font-family:Palatino Linotype;
font-size:1.0625em;
}
div.description p> span {
font-weight:900;
}
div.ringraziamenti{
width:50%;
height:380px;
float:left;
}
div.ringraziamenti img{
width:480px;
height:380px;
}
div.infiorata{
width:50%;
float:left;
height:600px;
}
div.infiorata img{
width:480px;
height:600px;
}
div.citazioni{
width:50%;
float:left;
height:800px;
}
div.citazioni img{
width:480px;
height:800px;
}
img.contatti {
-moz-border-radius: 180px;
-webkit-border-radius: 180px;
border-radius: 180px;
width:200px;
height:200px;
}
div.galleria{
text-align:center;
padding:2.083%;
overflow:hidden;
position:relative;
}
div.galleria p{
text-align:left;
position:absolute;
top:20px;
left:20px;;
}
div.galleria li{
display:inline-block;
margin-left: 1.354%;
}
div.galleria img{
margin-top:10px;
border:2px solid;
border-radius:10px;
box-shadow:5px 5px 3px 3px ;
width:150px;
height:150px;
}
/* Piè di pagina*/
footer {
background: -webkit-linear-gradient(#FF7247, #FF5E36); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FF7247, #FF5E36); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FF7247, #FF5E36); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FF845E, #FF5E36); /* Standard syntax */
width:97.916%;
padding:1.041%;
margin-top:1.041%;
font-weight:strong;
border-radius:5px;
}
footer div {
overflow:hidden;
width:97.916%;
font-family:Palatino Linotype;
font-size:19px;
font-weight:bold;
}
footer div .contatti{
float:left;
width:71.385%;
}
footer div .master{
float:left;
width:26.531%;
}
footer p {
text-align:center;
margin-top:3.125%;
font-family:Palatino Linotype;
font-size:1.125em;
font-weight:bold;
}
/*============================*/
/*=== Stili per lo slider ===*/
/*============================*/
#slider {
height:380px;
margin:0px auto;
float:left;
width:50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
width:480px;
height:380px;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(../images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(../images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
@media screen and (min-width: 768px) {
.toggle-nav{display:block};
#nav {display:none}
}