/*** general, mobile first ***/
* {margin:0; padding:0; box-sizing:border-box}
html {height:100%; overflow-y:scroll}
body {height:100%; font-family: Helvetica, sans-serif; font-size:14px; color:#333; margin:0px}
h1 {font-family:Verdana,sans-serif; font-size:26px; color:#fff} 
h2 {font-family:Verdana,sans-serif; font-size:22px; color:#fff} 
h3 {font-size:18px; color:#339}
small {font-size:12px}
hr {height:4px; background:#bbb}
a {color:#48d; font-weight:bold; text-decoration:none}
a:hover {color:#333; text-decoration:underline}
img {max-width:100%; display:block; margin-left:auto; margin-right:auto}
img.inline {display:inline; margin:0}
#wrap {position:relative; min-height:100%; margin:0 auto; background:#fff;
  border-left:3px solid #fd9; border-right:3px solid #fd9}
#head {height:120px; background:#ca8; padding:10px; background-image:url("img/spazzacam.jpg")}
#hamb {display:block} 
#tit1 {display:none}
#tit2 {display:block}
#nav {text-align:center; background:#222}
#nav ul {list-style-type:none}
#nav ul li a {display:block; text-decoration:none; padding:4px; color:#333; background:#def;
  border-radius:5px; margin-left:auto; margin-right:auto; border-bottom:2px solid #333; width:90%; max-width:240px}
#nav ul li a:hover {background:#aaa; color:#fff}
#nav.si {display:block} #nav.no {display:none}
#main {background:#fff} 
#sec {width:400px}
#push {height:35px}
#foot {position:absolute; bottom:0; height:35px; width:100%; 
  color:#ccc; background:#222; padding-top:4px}
.c {text-align:center} 
.r {text-align:right}
.outline {text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}
.art {background:#fff; padding:10px}
.ccc {background:#ccc}
.blu {background:#def}
.pnk {background:#fdd}
.grn {background:#dfd}

/*** webform ***/
form {padding:10px; background:#ffb; max-width:600px}
input, textarea {padding:8px; border:1px solid #bbb; border-radius:6px; background:#ddd;
  width:100%; font-family:Courier; font-size:15px; color:#334}
textarea {height:100px; line-height:20px}
input:hover, textarea:hover, input:focus, textarea:focus {background:#fff; border:1px solid #036}
input.invio {float:right; width:90px; height:40px; background:#369; color:#fff; font-weight:bold}
input.invio:hover {background:#036}

/*** desktop e tablet ***/
@media only screen and (min-width:680px){
body {background:#333}
#wrap {max-width:980px}
#tit1 {display:block}
#tit2 {display:none}
#hamb {display:none}
#nav {height:40px; padding-top:10px}
#nav ul li {display:inline-block; width:120px} 
#nav ul li a {display:inline-block; width:120px}
.art {float:left}
.w33 {width:33.3%} .w50 {width:50%} .w67 {width:66.7%} .w100 {width:100%}
.w20 {width:20%} .w25 {width:25%} .w30 {width:30%} .w40 {width:40%} .w60 {width:60%}
}
/*** eof ***/