* {margin: 0; padding: 0; border: 0;}
html, body {height: 100%;}
body {background: #FFF;}
header, section, footer, article, nav {display: block;}
a {color: #666; text-decoration: none;}
.clear {clear: both;}
img {vertical-align: middle;}
.float-left {float: left;}
.float-right {float: right;}
.width45 {width: 45%;}
.width48 {width: 48%;}
.required {font-style: italic; color: #111;}
textarea, input {color: #006991; padding: 0 4px; font: 12px Arial;}

/* pers main settings */
body {font: 15px 'Voltaire', Arial; color: #333; text-align: center; background: url(body_sf.jpg) top center no-repeat;}
#sito {text-align: center; min-height: 100%; position: relative;}
.flower {position: absolute; left: 50%; margin-left: -50px; width: 100px; height: 180px;}
#redflower {background: url(flower_red.png) bottom center no-repeat;}
#blueflower {background: url(flower_blue.png) bottom center no-repeat;}
#orangeflower {background: url(flower_orange.png) bottom center no-repeat;}
#greenflower {background: url(flower_green.png) bottom center no-repeat;}
#lang, #menu, #corpo {margin: 0 auto; text-align: left; width: 444px;}
.wrapper {padding: 0 0 190px 0;}
#corpo {padding-top: 30px;}
#footer {height: 180px; position: absolute; bottom: 0; width: 100%; background: url(footer.png) bottom left repeat-x;}

/*header*/
#lang {padding-top: 10px; text-align: right; color: #BCBCBC; font-size: 13px;}
#lang a, #lang span {padding: 0 4px;}
#logo img  {margin: 10px auto 30px;}
#mobilemenu {display: none;}

/* menu */
#menu ul {list-style: none; border: 1px solid #D3D3D3; height: 235px; width: 443px;}
#menu ul li {display: inline; float : left; border-right: 1px solid #D3D3D3; height: 235px; width: 110px; text-align: center;}
#menu ul li#menu4 {border: 0;}
#menu ul li a {line-height: 235px; text-transform: uppercase; font-size: 18px; display: block; -webkit-transition: background-color 700ms linear; -moz-transition: background-color 700ms linear; -o-transition: background-color 700ms linear; -ms-transition: background-color 700ms linear; transition: background-color 700ms linear;}
#menu ul li a:hover {-webkit-transition: background 700ms linear; -moz-transition: background 700ms linear; -o-transition: background 700ms linear; -ms-transition: background 700ms linear; transition: background 700ms linear; color: #FFF; background: url(flower.png) bottom center no-repeat;}
#menu ul li a.selected {background: none; color: #FFF;}
#menu ul li#menu1 a.selected, #menu ul li#menu1 a:hover {background-color: #C22C2E;}
#menu ul li#menu2 a.selected, #menu ul li#menu2 a:hover {background-color: #1682DD;}
#menu ul li#menu3 a.selected, #menu ul li#menu3 a:hover {background-color: #1DA52D;}
#menu ul li#menu4 a.selected, #menu ul li#menu4 a:hover {background-color: #C48F0F;}

/*corpo home*/
#corpo h1 { text-transform: uppercase; font-size: 22px; line-height: 36px; font-weight: normal; padding-bottom: 20px;}
.home h1 {text-align: center; color: #C22C2E; padding-bottom: 0;}
.hatme h1, .mailme h1, .artwork h1 {text-align: left;}
.hatme {color: #1682DD;}
.hatme a {text-decoration: underline;}
.hatme b {font-weight: normal; color: #0D1D7D;}
.mailme {color: #C48F0F;}
.portfolio h1 {color: #1DA52D; text-align: center;}

/*artwork*/
#slider {position: relative; overflow: hidden; width: 480px; height: 280px; float: left; margin: 0 0 0 -20px; z-index: 2;}
#slider .items {width: 20000em; position: absolute; clear: both; z-index: 1;}
.items div.artwork {float: left; width: 400px; padding: 0 40px;}
div.browse {position: absolute; background:url(arr_left.png) no-repeat; display: block; width: 40px; height: 60px; float: left; cursor: pointer; font-size: 1px; margin-top: 100px; z-index: 11;}
div.right {background:url(arr_right.png) no-repeat; clear: right; margin-left: 440px;}
.singleaw {float: left; width: 170px; margin: 0 15px; text-align: center;}
.singleaw img {margin: 0 auto; width: 150px; border: 7px solid #1DA52D;}
.singleaw h2 {font-size: 17px; text-transform: uppercase; color: #666; font-weight: normal; margin: 12px 0 7px;}
.singleaw a {display: block; color: #1DA52D; text-decoration: none;}
.singleaw span {display: block; color: #9F9F9F; text-transform: uppercase; padding-top: 8px;}

/*form*/
input, textarea {background: #EAEAEA;}
form input {line-height: 22px; height: 22px; width: 99%; margin: 4px 0 8px;}
form input.wauto {width: auto; height: auto;}
form .required {margin: 0 0 20px;}
textarea {width: 99%; margin: 4px 0 10px; height: 75px;}
.buttlink a {text-decoration: none; color: #FFF;}
.buttlink {background: #C48F0F; margin: 10px 0 0 1px; padding: 4px 8px;}

/* message */
#trattdati, #messagetouser {display: none; position: absolute; z-index: 100; top: 200px; left: 50%; margin-left: -100px; width: 200px; height: 50px; text-align: center; background: #FFF;}
#messagetouser {padding: 5px;}
#trattdati {margin-left: -200px; width: 410px; height: 120px; text-align: left;}
#trattdati p {height: 110px; max-height: 110px; overflow-y: auto; padding: 5px;}
.closeme {position: absolute; background: url(closeme.png) top left no-repeat; height: 30px; width: 30px; margin-left: 399px; margin-top: -18px; cursor: pointer;}

@media all and (max-width: 450px) {
body {background: #FFF;}
#logo {float: left; height: 80px;}
#logo img  {margin: 5px 10px 0 25px; width: 100px;}
.flower {margin-left: -25px; width: 50px; height: 90px;}
#lang, #menu, #corpo {width: 100%; margin: 0; text-align: left;}
#lang {float: right; width: auto;}
#mobilemenu {display: block; position: fixed; top: 0; left: 0; width: 24px; height: 24px; background: #333; color: #FFF; cursor: pointer; font-size: 20px; line-height: 24px;}
#menu {position: fixed; top: 0; left: -150px; width: 150px; height: 100%; background: #333;}
#menu ul {border: 0; height: auto; width: 100%;}
#menu ul li {display: block; float: none; width: 100%; height: 30px; border: 0; border-bottom: 1px solid #666;}
#menu ul li a {line-height: 30px; background: none; text-align: left; padding: 0 7px; color: #FFF;}
#menu ul li a:hover {background: none;}
#corpo {padding-top: 90px; width: 96%;}
#footer {height: 90px; background-size: 50% 50%;}
#redflower, #blueflower, #orangeflower, #greenflower {background-size: 50px 90px;}
.mailme, .hatme {padding: 0 2%;}
.mailme form div {float: none; display: block; width: auto;}
.mailme textarea, .mailme input {width: 95%;}
.buttlink {margin-right: 2%;}

/*artwork*/
#slider {position: static; overflow: hidden; width: 100%; height: auto; float: none; margin: 0;}
#slider .items {width: 100%; position: static; clear: both;}
.items div.artwork {float: none; width: 100%; padding: 0; display: block;}
div.browse {display: none;}
.singleaw {float: none; text-align: center; margin: 0 auto; width: 100%; margin-bottom: 30px;}
.singleaw img {width: 70%; border: 1% solid #1DA52D; min-width: 170px;}
.singleaw h2 {font-size: 14px;}
}