/***************** willemse.css *****************/
/********** general and mobile first ************/
/* utf8 è */
* {
margin:0; padding:0;
box-sizing:border-box;
}
html,body {
height:100%; 
font-family:Georgia,serif;
font-size:16px;
color:#334;
}
h1 {
font-size:22px;
color:#556;
}
a {
color:#28c; 
text-decoration:none;
outline:none;
}
a:hover {
color:#334; 
text-decoration:underline;
}
img {
max-width:100%;
display:block;
margin-left:auto;
margin-right:auto;
}
img.inline {
display:inline;
margin:0;
}
hr {
display:block;
border:0;
background-color:#ddd;
}
.center {
text-align:center;
}
#wrapper {
position:relative; 
min-height:100%; 
min-width:240px;
margin:0 auto; 
background:#eee; 
border-left:2px solid #fff;
border-right:2px solid #fff;
}
#header {
height:58px;
color:#fff;
background:#036;
padding:10px;
}
.logo {
float:left;
font-size:32px;
}
.logo a {
color:#fff;
text-decoration:none;
}
.logo a:hover {
color:#bbb;
}
.menu {
float:right;
padding-top:10px;
padding-right:12px;
border:0;
}
#nav {
width:100%;
font-weight:bold;
background:#369;
border:4px solid #eee; 
}
#nav ul {
list-style-type:none;
}
#nav ul li a {
display:block;
text-decoration:none;
padding:5px;
color:#fff;
background:#369;
border-bottom:2px solid #eee;
}
#nav ul li a:hover,
#nav ul li a:focus {
background:#036;
}
#nav.chiuso {
display:none;
}
#nav.aperto {
display:block;
}
#content {
background:#eee; 
padding-bottom:30px; 
}
.article {
width:100%;
background:#fff;
padding:10px;
border:4px solid #eee; 
}
#footer {
position:absolute;
bottom:0;
height:30px;
width:100%;
color:#fff;
background:#036;
padding:5px;
}
.lfoot {
float:left;
}
.rfoot {
float:right;
}
/*********** webform elements ****************/
form {
padding:10px;
background:#ffb;
}
input,
textarea {
padding:8px;
border:1px solid #bbb;
background:#ddd;
width:100%;
font-family:Courier;
font-size:16px;
color:#334;
}
textarea {
height:150px;
line-height:20px;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
background:#fff;
border:1px solid #036;
}
input.invio {
float:right;
width:100px;
height:40px;
background:#369;
color:#fff;
font-weight:bold;
}
input.invio:hover {
background:#036;
}
@media print {
/*********** printer ****************/
html,body {
font-family:Georgia,serif;
font-size:14pt;
}
h1 {
font-size:18pt;
}
#header, 
#nav, #nav.aperto,
#footer {
display:none !important;
}
.article {
float:left;
}
.destra {
float:right;
}
.article.w20 {width:20%}
.article.w25 {width:25%}
.article.w30 {width:30%}
.article.w33 {width:33.3%}
.article.w37 {width:37.5%}
.article.w40 {width:40%}
.article.w50 {width:50%}
.article.w60 {width:60%}
.article.w66 {width:66.7%}
.article.w70 {width:70%}
.article.w75 {width:75%}
.article.w80 {width:80%}
.article.w100 {width:100%}
}
@media only screen and (min-width:640px){
/**************** desk top only *******************/
body {
background:#aaa; 
}
.menu {
display:none;
}
#wrapper {
max-width:960px;
}
#nav {
height:36px; 
}
#nav ul li {
display:inline; 
}
#nav ul li a {
float:left;
border-bottom:none;
}
.article {
float:left;
}
.article.w20 {width:20%}
.article.w25 {width:25%}
.article.w30 {width:30%}
.article.w33 {width:33.3%}
.article.w37 {width:37.5%}
.article.w40 {width:40%}
.article.w50 {width:50%}
.article.w60 {width:60%}
.article.w66 {width:66.7%}
.article.w70 {width:70%}
.article.w75 {width:75%}
.article.w80 {width:80%}
.article.w100 {width:100%}
}
@media only screen and (min-width:960px){
html {overflow-y:scroll;}
}
/****** end desk top **************/