/*reset delle impostazioni di default per tutti i browser*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul, menu { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; float: left; }
/*fine reset*/
.clear { clear: both; }
.clearfix:before, .clearfix:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
strong, b { font-weight: bold; font-weight: 500; }
i, em { font-style: italic; font-weight: 300 }
p { margin: 0 0 1.250em;}
a, input[type="button"], input[type="submit"] { cursor: pointer; }
a { text-decoration: underline; color:#4F695C; }
a:hover { color: #FFF; }
textarea { resize:vertical;}
body {background: url(../img/bg_body.jpg) repeat-x center 134px,#96B0A5; min-width: 1190px; /*background: #96B0A3;*/ line-height:1.5em ; font-family:'Roboto', sans-serif;  font-weight: 400; color: #4B291A; }
input, textarea { line-height:1.5em ; font-family:'Roboto', sans-serif; font-weight: 400; color: #333; font-size: 1em; }

.left { float: left; }
.right { float: right; }
.center { text-align: center; }
.hide { display: none; }
.block { display: block;}
#wrapper { margin-top: 20px; /*background: url(../img/bg_body.jpg) repeat-x center 114px;*/}
header { }
hgroup { float: left; padding: 0 20px;margin-left: -100%; position: relative; z-index: 5;width: 338px;}
h1 a { line-height: 0; width: 338px; height:338px; display: block; position: relative;}
h1 a span { text-indent: -9999px; display: block; }
h1 a #pt1,h1 a #pt2, h1 a #pt3  { width: 338px; height:338px; position: absolute; }
h1 a #pt1 { background: url(../img/logo-pt1.png) no-repeat; z-index: 1;}
h1 a #pt2 { background: url(../img/logo-pt2.png) no-repeat; z-index: 2;}
h1 a #pt3 { background: url(../img/logo-pt3.png) no-repeat; z-index: 3;}
h1 span { color:#87871a;}
h2 { font-weight: 300; font-size: 0.75em; line-height: 1em; margin: 6px 10px; float: left; display:none;}
.box { margin-bottom: 30px;}
header .cont_banner { float: left; width: 100%;}
.banner_728 { width:728px; height: 90px; margin-left: 400px;}
.banner_300-250 { width:300px; margin: 0 auto 30px;}
.banner_300-600 { width:300px; margin: 0 auto; }

#super_container { margin-top: -90px; float: left; width: 100%; padding-bottom: 20px;}
#leftColumn {float: left; width: 378px; margin-left: -100%; margin-top: 125px; }
#rightColumn {float: left; width: 378px; margin-left: -378px; margin-top: 125px;}
#centerColumn { width: 100%; float: left;}
#innerCenterColumn {margin: 0 370px 0 370px; max-width: 460px;}
#prefooter {float: none; width: 378px;}
.innerPadding { padding: 10px;}
#content, #sidebar {float: left; position: relative; }
#content { max-width: 1366px; /*width: 100%;*/}
#sidebar { width: 320px;}

#cont_menu { font-family: 'Bigelow Rules', cursive; letter-spacing: 0.5px; position: absolute; top: 156px;}
#noadsadvice {    font-family: 'Bigelow Rules', cursive; letter-spacing: 0.8px; line-height: 1; font-size: 32px; text-align: center;}

menu { margin: 0 0 0 400px; min-width: 378px;}
menu li { display: inline-block; margin-right:40px; line-height: 2em; }
menu li a { text-decoration: none; }
menu li a span, menu li span { font-size: 2.1875em; color: #4B291A; }
menu li a:hover span { color: #FFF; }
menu li a i { font-size: 2.25em; color: #F1E0BF; padding-right: 10px; }
menu li a:hover i { color: #4B291A; }
menu li#share_menu a:hover i { color: #D5654C; }



.container.title { text-indent: -9999px; height: 88px; background: url(../img/need_some.png) no-repeat center;}
.container.title.cookies { height: 102px; background: url(../img/place_it.png) no-repeat center; margin-bottom: 10px;}
.container.title.done { height: 102px; background: url(../img/done_grab.png) no-repeat center; margin-bottom: 10px;}
.container.title.place { height: 102px; background: url(../img/place_it.png) no-repeat center; margin-bottom: 10px;}
.container.title.changelog { height: 102px; background: url(../img/changelog.png) no-repeat center; }
.container.title.favic-o-meter { height: 102px; background: url(../img/favic-o-meter.png) no-repeat center; }
.container.title.donate { height: 102px; background: url(../img/favic-o-donate.png) no-repeat center; } /* manca */
.container .conversation { font-weight: 700; font-size: 1.125em;}
.container .desc { font-weight: 300; font-size: 0.90em; padding-left: 30px;}

.cont_bubble#done .container .desc {width: 200px; margin: -5px 0 0;}

.cont_bubble#bubble_upload { margin-bottom: 80px;}

#options_link, #detailsButton { font-weight: 300; text-align: center; margin-top: 15px;}
#detailsButton { margin: 1.75em 0; }
#options_link a, #detailsButton a { text-decoration: none; border-radius: 1em; border: 1px solid #6C8779;padding: 3px 6px; }
#options_link a i, #detailsButton a i { font-size: 1.125em;}
#options_link a:hover, #detailsButton a:hover { background: #6C8779; color:#96B0A3;  }

.tasto { display: inline-block; border:0; border-radius:3px; padding: 0px 10px; text-decoration:none; background-color: #F1E0BF; border-bottom: 2px solid #CBBEA3; color: #D5654C; min-height:15px; min-width:17px; text-align:center; -webkit-appearance: none;font-family: 'Bigelow Rules', cursive; position:relative; }
.tasto i { font-size:2.25em; color: #92AB9E; margin-right: 10px;}
.tasto.tasto_piccolo i { font-size:1.75em;}
.tasto .text {  display: inline-block; font-size: 1.875em; line-height: 1.665em;}
.tasto:hover , .tasto.hover{ box-shadow:0 2px 2px rgba(0,0,0,0.3); }
.tasto:active { box-shadow:none !important; }

.rosso, .verde, .arancio, .azzurro { display:block; border-radius:4px; padding:5px; margin-bottom:15px; font-weight:bold; }
.colore_verde { color:#6D9B24; }
.colore_rosso { color:#B73747; }
.colore_coffee { color: #F1E0BF; }

.testo_verde { color:#090;}
.testo_rosso { color:#900;}

.cont_tasto { display: inline-block; background:#8AA296; border-radius: 3px;}
.cont_tasto .tasto { margin: 10px;}
.cont_tasto_upload { border-radius: 5px;}
.tasto#tasto_upload { padding: 10px 20px;  text-transform: none; position:relative;}
.tasto#tasto_upload .text {  font-size: 3.125em; line-height: 1em; }
.tasto#tasto_upload:hover { color: #F1E0BF; background-color: #D5654C; border-bottom-color: #A03F2E;}
.tasto#tasto_upload:hover i { color: #4B291A;}

.tasto#tasto_copy.hover { color: #F1E0BF; background-color: #73A873; border-bottom-color: #587F58;}
.tasto#tasto_copy.hover i { color: #587F58;}

.tasto#retrieveTitle { display: none; background-color: #D5654C; border-bottom-color: #A03F2E; padding: 4px 10px; position: absolute; top: -1px; margin-left: 10px; }
.tasto#retrieveTitle i, .tasto#faviconTest i { font-size: 1.25em; color: #4B291A; position:relative; top: 1px; margin: 0;}

a.help { text-decoration: none; font-size: 0.875em; color: #D5654C; }
a.help:hover { color:#FFF; }

#options {  display:none; }
#options_content { margin: 0 0 20px; background-color: #F1E0BF;border-radius: 3px;box-shadow: 0 -1px 2px #6C8779;}
#inner_options_content { box-shadow: 0 0 0 5px #F1E0BF; padding: 6px; border: 1px dashed #6C8779; margin:5px; float: left; border-radius: 3px;}
#inner_options_content .box { margin-bottom: 20px; }
.options_group_label { font-weight: 700;}
.options_group { position: relative; }
#options .box:last-child { margin-bottom: 0;}
#options .input { border: 0; background: #FFF; margin: 0; padding:3px; color:#D5654C;}
#options .input#websiteURL, #options .input#IEtilefeed, #options .input#IEtiletitle { width: 83%;}
#options .input#IEtilecolor { width: 4.5em; text-transform: uppercase;}
.options_group#sizes_preset_group .clearfix, .options_group#sizes_group .single_option { margin-bottom: 5px; display: inline-block; width: 33.3%;}
.options_group#sizes_preset_group .clearfix.last-item, .options_group#sizes_group .single_option.last-item { margin-right: 0;}
.options_group#sizes_group .row { margin-bottom:5px;}
.options_group#sizes_group .row:last-child { margin-bottom:0;}

.checkbox, .radio {width: 19px;	height: 25px;padding: 0 5px 0 0;background: url(../img/checkbox.png) no-repeat;display: inline-block; position:relative; top: 6px;}
.radio {background: url(../img/radio.png) no-repeat;}
#options_content .radio {background: url(../img/radio2.png) no-repeat;}
.radio.selected, .checkbox.selected, #options_content .radio.selected { background-position: 0 -50px;}

.options_group .warning { position: absolute; right: 20%; top: 4px; -webkit-transition: text-shadow 1s linear; -moz-transition: text-shadow 1s linear; -ms-transition: text-shadow 1s linear; -o-transition: text-shadow 1s linear; transition: text-shadow 1s linear; }
.options_group .warning a.help i { font-size: 1.125em;  color: red;}
.options_group .warning:hover, .options_group .warning.glow {text-shadow: 0 0 10px #D5654C;}

#quote { font-size: 1.25em; line-height: 1em; color: #BBB; text-shadow: 0 1px 0 #FFF; margin-top: 3em; margin-bottom: 2em; text-align: center;}

footer { background-color: #8AA296; text-transform: uppercase; font-size: 0.875em; letter-spacing: 2px; }

footer #credits { text-align: right; float:right; width: 50%;}
footer #feedback { text-align: left; float:left; width: 50%;}
footer #feedback a { margin-right: 17px;}
footer .innerPadding { padding: 10px 39px; }
footer a { text-decoration: none; display: inline-block;}

textarea#code { padding: 3px; width:100%; height: 225px; font-family: "Courier",monospace;white-space: pre;  word-wrap: normal; font-size: 0.75em;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius:5px; background: #C1D6CB; border: 0; margin-bottom: 5px; resize: none; }

#inner_donate_content { box-shadow: 0 0 0 5px #F1E0BF; padding: 6px; border: 1px dashed #6C8779; margin:5px; border-radius: 3px;}
#inner_donate_content .box { margin-bottom: 20px; }


#box_donate { background:#FFF; box-shadow: 0 1px 6px rgba(0,0,0,0.2); margin-top: 5px;}
#box_donate .container { padding: 10px;}
#box_donate .container .conversation, #box_donate .container .desc { display: block; margin-bottom: 10px;}
.tasto#tasto_donate { line-height:1em; text-align: left;}
.tasto#tasto_donate i { font-size: 5.25em; margin-top: 8px; margin-bottom: 8px;}
.tasto#tasto_donate .text { line-height: 1.28em; font-size: 2.2em; }
.tasto#tasto_donate:hover { color: #F1E0BF; background-color: #4B291A; border-bottom-color: #26150E;}
.tasto#tasto_donate:hover i { color: #FFF;}

.tasto#tasto_repeat { padding-top: 10px;}
.tasto#tasto_repeat i { display: block; margin: 0; font-size: 2.5625em;}
.tasto#tasto_repeat:hover { color: #F1E0BF; background-color: #D5654C; border-bottom-color: #A03F2E;}
.tasto#tasto_repeat:hover i { color: #4B291A;}



.ui-tooltip { font-family: "Roboto", sans-serif; font-size: 0.95em; border: 0; background: #333; color: #FFF; font-weight: 300;box-shadow: 0 1px 6px rgba(0,0,0,0.2); }
.ui-tooltip .title { font-weight: 700; font-size: 1.125em; margin-bottom: 10px;}

#progress { position: fixed;top: 0;left: 0;right: 0; z-index: 5; }
#progress .bar { background-color:#D5654C; height: 3px; width: 0px; border-radius: 5px; box-shadow: 0 0px 5px #A03F2E;}

.no-m-bottom { margin-bottom: 0;}

#contShare {position: absolute; top: 7px; left: 100%; width: 400px; }
#contShare div.fb-like { margin-left: 20px; top: -7px; }
.colorpicker { z-index: 3;}

.colorpicker .colorpicker_submit { width: 53px; left: 291px; background: url(../img/colorpicker_submit.png) top; cursor: pointer; }

#quick_settings { margin: 0 auto; text-align: center; }
#quick_settings .item { margin: 0 20px 10px; display: inline-block; text-align: left;vertical-align:top;}

#what { padding:0 39px; color:#6C8779; font-weight: 300; }
#what .container.title { height: 39px; background: url(../img/what_about.png) no-repeat left; margin-bottom: 15px;}

ul.list li { margin-bottom: 1.250em;}
ul.list li span { display: inline-block; margin-bottom: 1.250em;}
ul.list li span.date { font-weight: 700; }
ul.list li.first-level { margin-bottom: 2.5em;}
.centerBox-404 { width:318px; height: 318px; position: absolute; top: 50%; left: 50%; margin-left: -159px; margin-top: -159px;}

#giveFeedback { position:absolute; padding: 3px 0; background: #F1E0BF; border-radius: 3px;} 
#giveFeedback .cont:after {content:""; position: absolute; bottom: -10px; left: 50%; margin-left: -10px; width: 0; height: 0; border-left: 10px solid transparent;	border-right: 10px solid transparent; border-top: 10px solid #F1E0BF;} 
#giveFeedback a { margin: 0 10px; text-decoration: none; float: left; color: #D5654C;} 
#giveFeedback a:hover { color: #4B291A;} 
#giveFeedback a i { display: block; font-size: 2.35em; text-align: center;} 
.onethird { width: 33%;}
#three_choices .onethird { text-align: center;}
#three_choices .onethird div.desc { margin-bottom: 10px;}
#three_choices .onethird i { font-size: 1.875em; margin: 2px 0; }

pre { font-family: monospace; }

form#faviconTestForm { position: relative;}

input#checkURL { border: 0; border-radius: 3px; background: #FFF; margin: 0; padding:0 3px; color:#D5654C; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 2.5em; line-height: 2.5em;}
.tasto#faviconTest { display: inline-block; background-color: #D5654C; border-bottom-color: #A03F2E; padding: 0; text-align: center; position: absolute; top: 0; right: 0; height:2.5em; border-bottom: 0; border-radius: 0 3px 3px 0; width: 2.5em; line-height: 2.5em; }
::-webkit-input-placeholder { color: #6C8779;}
:-moz-placeholder { color: #6C8779; }
::-moz-placeholder { color: #6C8779;}
:-ms-input-placeholder { color: #6C8779;}

#result { margin-top: 30px;}
#result h3 { text-align: center; margin-top: 30px;}
#result .cont_message { margin-bottom: 10px; }
#result .cont_message .fa, #result .cont_message .fas { margin-right: 10px;}
#result .OK, #result .KO, #result .WARNING {border-radius:3px;}
#result .cont_message .cont { padding: 10px; position: relative; padding-right: 50px; }
#result .cont_message .showDetails { position: absolute; right: 10px; top: 50%; height: 2.15em; margin-top: -1.075em; }
#result .cont_message .showDetails i.fa,#result .cont_message .showDetails i.fas { font-size: 0.875em; float: right;line-height: 2.15em;}
#result .OK { background: #5E9E79; color:#F1E0BF;}
#result .KO { background: #A03F2E; color: #F1E0BF;}
#result .WARNING { background: #E4B96B; color: #4E5E55;}

#messagePercent.greenMessage { color: #F1E0BF;}
#messagePercent.redMessage { color: #A03F2E;}
#messagePercent.orangeMessage { color: #4E5E55; }

#result .KO a { color: #F1E0BF; }
#result .WARNING a { color: #4E5E55; }
#result .colorSwatch { width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 50px; border-radius: 3px; border: 1px solid #6C8779;}
#result .details { display: none; margin: 0 20px; background: #B2C5BC; padding: 10px; border-radius: 0 0 3px 3px;}
#result .details img { max-width: 100%; margin: 0 auto; display: block;}
#result #filters { margin-bottom: 10px; text-align: right;}

#progressResult { overflow: hidden; border-radius: 3px; position: relative; }
#messagePercent { display: none; font-family:'Bigelow Rules', cursive; letter-spacing: 2px; line-height: 1em; color: #4E5E55; font-size: 3em; letter-spacing:0px; text-align: center; margin: 0.5em 0; }
#progressResult .percent { float: left; height: 2.5em; width: 0%; overflow: hidden; }
#progressResult .percent .fa, #progressResult .percent .fas { display: block; text-align: center; line-height: 1.65em; font-size: 1.5em;}
#progressResult #percentKO  {background-color: #A03F2E; color: #F1E0BF;}
#progressResult #percentWARNING  {background-color: #E4B96B;color: #4E5E55; }
#progressResult #percentOK  {background-color: #5E9E79; color: #F1E0BF; }

#makeItAwesome { text-align: center; display: none; }


@-webkit-keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.rotating { -webkit-animation: rotating 8s linear infinite; -moz-animation: rotating 8s linear infinite; -ms-animation: rotating 8s linear infinite; -o-animation: rotating 8s linear infinite; animation: rotating 8s linear infinite; }

@media all and (min-width: 1px) and (max-width: 1024px) {
    body { min-width: 0px; font-size: 200%;}
    #wrapper { background-position:center 210px;}
    hgroup { float: none; padding: 0; margin: 0 auto; width: 338px;}
    header .cont_banner { float: none; margin-bottom: 7px;}
    .banner_728 { margin: 0 auto;}
    #cont_menu { position: absolute; left:378px; top:139px; width: 100%;}
    menu { min-width: 1px; margin: 0; padding: 0 20px; text-align: center;}
    menu li { margin: 0 20px;}
    #contShare {position: static; width: auto !important; padding: 10px 20px 30px; text-align: center; }
    #contShare div.fb-like { top: -14px; }
    #super_container { margin-top: 0px;}
    #leftColumn {float: none; width: auto; margin: 0 auto 20px; padding: 0 20px;}
    #rightColumn {float: none; width:auto; margin: 0 auto; padding: 0 20px;}
    #centerColumn { float: none; /*margin-bottom: 20px; padding: 0 20px; width: auto;*/}
    #innerCenterColumn {margin: 30px; max-width: none !important;}
    #prefooter {float: none; width: auto; margin: 0 auto 20px; padding: 0 20px;}
    .innerPadding { padding: 10px;}
    #content {float: none; /*margin: auto; width: 485px;*/}
    #what { padding:0;max-height: 100000px;}
    #result { margin-top: 1.250em; }
    #changelog_list li {max-height:100000px; }
}