/* ..... global reset */

html, body, h1, form, fieldset, input {
 margin: 0;
 padding: 0;
 border: none;
 }

section, article, header, footer, nav, aside, hgroup { display:block; }

/* ...... web font embedding */

@font-face {
	font-family: 'SansationRegular';
	src: url('Sansation_Regular.eot?'),
		url('Sansation_Regular.woff') format('woff'), 
		url('Sansation_Regular.ttf') format('truetype'), 
		url('Sansation_Regular.svg#webfontLr2B6u5e') format('svg');
		
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'SansationBold';
	src: url('Sansation_Bold.eot?'),
		url('Sansation_Bold.woff') format('woff'), 
		url('Sansation_Bold.ttf') format('truetype'), 
		url('Sansation_Bold.svg#webfont8dfDl0fr') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* Finestra popup */

.navtext {
width:235px;
font-size:10pt;
font-family: 'SansationRegular', Arial, Helvetica, sans-serif;
border-width:2px;
border-style:outset;
border-color:#006BAE;
background: rgba(0,0,0,0.7);
color:white;
}


/* BODY */


body {  
font-family: 'SansationRegular', Arial, Helvetica, sans-serif; font-size:14px; color:#fff; line-height:150%; text-align:left;
background:
/*url(images/roseglitter.gif) no-repeat fixed 6% 96%,*/ 
url(images/gattoglitter.gif) no-repeat scroll 98% 1%, 
url(images/rossellapawgrigio1.png) repeat fixed 40% 40%, 
url(images/rossellapawgrigio2.png) repeat fixed 25% 55%,
/* url(images/rossellapawazzurro.png) repeat fixed 40% 40%, 
url(images/rossellapawblu.png) repeat fixed 25% 55%,
url(images/rossellapawgiallo.png) repeat fixed 15% 25%,
url(images/rossellapawrosso.png) repeat fixed 30% 10%,
url(images/rossellapawverde.png) repeat fixed 50% 20%, */
url(images/rossellasfondoelettronico.jpg) repeat fixed 40% 40%; 
background-color:#b6dffd;
 
width:960px; margin:0 auto;
}


/* TIPOGRAPHY */

h1, h2, h3, h4, h5, h6 { font-family:'SansationBold', Arial, Helvetica, sans-serif; line-height:120%; }
time { color: #0099FF; font-size:12px; }

a { text-decoration:none; }
a:link, a:visited { color:#ffCC00;}
a:hover, a:focus, a:active { color:#ffffff; }

dl { display:inline; float:left; } 
dt { float:left; display:inline; margin-right:10px; } 
dd {float:left; display:inline; margin-right:20px; }


mark { background:#33BBFF; color:#FFFFFF; }

/* HEADER */

header { width:100%; float:left; display:inline; margin-bottom:20px; }


hgroup { margin:20px 0; }
hgroup h1 { font-size: 50px; color:#FFFFFF; line-height:100%; }

hgroup h2 { font-size:24px; font-family:'SansationRegular', Arial, Helvetica, sans-serif; color:#000000;}


header > hgroup { float:left; display:inline; width:960px; 
padding:20px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
background: rgba(0,0,0,0.6);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow:0 2px 3px #000000;
-moz-box-shadow:0 2px 3px #000000;
box-shadow:0 2px 3px #000000;
}

header > nav { float:left; display:inline; width:960px; 
padding:20px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
background: rgba(0,0,0,0.2);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow:0 2px 3px #000000;
-moz-box-shadow:0 2px 3px #000000;
box-shadow:0 2px 3px #000000;
}

header > nav ul { float:left;  }
header > nav li { display:inline; float:left;  margin-left:60px;  }


header > nav li a { 
float:left; display:inline;
padding:10px 20px; 
font-size:16px; 
font-family:'SansationBold', Arial, Helvetica, sans-serif; 
-webkit-border-radius: 5px;
-moz-border-radius:5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px #000000;
-moz-box-shadow: 0 1px 2px #000000;
box-shadow: 0 1px 2px #000000;

-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}


header > nav a:link, header > nav a:visited  { 
color:#FFFFFF;  
background:rgba(0,0,0,0.4);
}

header > nav a:hover, header > nav a:focus, header > nav a:active { 
color:#ffcc00; 
background:rgba(0, 0, 0, 0.87);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  

}


/* CONTENUTI */

/* article*/


article { float:left; 
display:block; 
margin:0px 0px 20px 0px; 
width:100%; 
padding:20px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;

background: rgba(0,0,0,0.8);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow:0 2px 3px #000000;
-moz-box-shadow:0 2px 3px #000000;
box-shadow:0 2px 3px #000000;
	
}




/* section */

section { float:left; display:inline; margin:20px 20px 20px 30px; 
padding:20px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;

background: rgba(0,0,0,0.6);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow:0 2px 3px #000000;
-moz-box-shadow:0 2px 3px #000000;
box-shadow:0 2px 3px #000000;
    
width: 420px;    
}

p {
	text-align: justify;
}





/* footer */

footer { 
width:100%; 
clear:both; 
margin:0px 0px 10px 0px; 
padding:2px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
height:70px;
background: rgba(0,0,0,0.6);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow:0 2px 3px #000000;
-moz-box-shadow:0 2px 3px #000000;
box-shadow:0 2px 3px #000000;
}

footer small { float:right; display:inline; margin: 0px 0 0 0; }

footer address { text-align:left; }



/* form */


input[type="submit"], input[type="reset"], input[type="button"] {
color:#FFFFFF; 
margin:10px 10px 0 0;
background:rgba(0,0,51,0.4);
padding:5px 10px;
width:auto;

}

input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { 
background:#000033;
-webkit-box-shadow: 0 1px 2px #000000;
-moz-box-shadow: 0 1px 2px #000000;
box-shadow: 0 1px 2px #000000;
}




input.text {
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
     border:solid 1px #444;
     font-size: 14px;
     width: 90%;
     padding: 7px 8px 7px 8px;
     background: #ddd;
     background: -moz-linear-gradient(
          center bottom,
          rgb(225,225,225) 0%,
          rgb(215,215,215) 54%,
          rgb(173,173,173) 100%
     );
     background: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(225,225,225)),
          color-stop(0.54, rgb(215,215,215)),
          color-stop(1, rgb(173,173,173))
      );
      color:#333;
      text-shadow:0px 1px 0px #FFF;
      -moz-box-shadow: 0px 1px 0px #777;
      -webkit-box-shadow: 0px 1px 0px #777;
      box-shadow: 0px 1px 0px #777;
 }




@media screen and (max-width:1000px)	{
    
body {  
width:95%; margin: auto;
background-color:#b6dffd;
background:
url(images/gattoglitter.gif) no-repeat scroll 98% 1%/200px, 
url(images/rossellapawgrigio1.png) repeat fixed 40% 40%, 
url(images/rossellapawgrigio2.png) repeat fixed 25% 55%,
url(images/rossellasfondoelettronico.jpg) repeat fixed 40% 40%;
}

header { width:100%; clear:left; display:block; margin-bottom:20px; }

hgroup h1 { font-size: 40px; }


header > hgroup { clear:left; display:block; width:95%; }

header > nav { clear:left; display:block; width:95%; 
padding:20px;

}

header > nav ul { clear:left; margin:auto; }
header > nav li { display:block; clear:left;  margin:auto;  }


header > nav li a { 
clear:left; display:block;
}


section { clear: both; 
    display: block;
    width: 420px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 20px;    
    } 
    
article {
    width:95%; 
    margin-left: auto;
    }  
    
footer {
    width:95%; 
    }

}

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

hgroup h1 { font-size: 30px; }
    
section { clear:left; 
    
     width: 95%;
    margin-left: auto;
    
    } 

body {  
background:
url(images/gattoglitter.gif) no-repeat scroll 98% 1%/120px, 
url(images/rossellapawgrigio1.png) repeat fixed 40% 40%, 
url(images/rossellapawgrigio2.png) repeat fixed 25% 55%,
url(images/rossellasfondoelettronico.jpg) repeat fixed 40% 40%;
}
    
}