/* FFMOBILE MATERIALDAY SKIN */

#html_home {margin:auto}

body {font: 14px/150% 'Roboto', Trebuchet MS, Tahoma, Sans-serif; color: #616161; background-color: #ECECEC}
a {color: #000; text-decoration: none} a:hover {color: #001868}
.last-post a *, .web * {color: #4285F4 !important}
.male {color: #146AAE} .female {color: #CC6688}

.footer {color: #333}
.footer a {font-weight: bold; color: #333}

/* SIDEBAR */
.user_details .avatar img, .user_details .avatar {width: 75px;
height: 75px;
border-radius: 50px; -moz-border-radius: 50px}
li.user_details a.nickname {padding: 0!important}
li.user_details {background: url(http://upload.forumfree.net/i/ff9767406/a_material_day/mobile/userbg.png)no-repeat;
height: 110px;
display: block;
width: auto !important;
padding-left: 16px!important; padding-top: 16px!important}
.sidebar {background-color: #FFF;
box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28)}
.sidebar a {color: #212121}
.sidebar li {line-height: normal; color: #212121}
.side_title {background-color: #FFF;
color: #363636;
border-top: 1px #E0E0E0 solid;
padding-left: 16px}
#overlay {background-color: rgba(0, 0, 0, 0.2)}
li.user_details a.nickname {display: inline !important}
#left > ul {overflow:none}
.submenu > li {min-height: 38px!important; line-height: 28px!important; padding: 5px 5px 5px 12px!important; color: #212121!important}

/*Classe shadowed*/
.shadowed {box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26)}

/*.submenu > li, .login > li, #ff_links, .search {border-bottom: 1px solid #DDD} */
#ff_links, .search {border-top: 0}
/* menu utente */
.menu > li {color: #999}
.menu .nickname {margin-top: 10px;
font-size: 18px;
color: #FFF !important}
.sidebar em {font-weight: bold; color: #FFF; background-color: #4285F4}
/* login */
.login input {color: #444; border: 1px solid #DDD}
.login input[type=submit] {background: #0085B2; color: #FFF; font-weight: bold} .login input[type=submit]:hover {background: #006789}
/* cerca */
.search {background-color: #FFF}
.search input {padding-left: 10px;
padding-right: 10px;
margin-top: 8px;
color: #212121!important;
font-weight: bold!important;
font-size: 12px!important;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 2px!important; -moz-border-radius: 2px!important;
background: none!important}

/* NAV */
.menuwrap_bg {background-color: #4285F4}
.menuwrap em {background-color: #BCE8F1}
div.menuwrap_bg {height: 56px}
nav {height: 56px}
nav button {height: 56px}
#side_left_button span {background:url('http://image.forumfree.it/9/2/4/9/2/7/4/1423781510.png'); margin-top: 0 !important}
/* nome forum */
#nav-title span {color: #FFF; font-size: 18px; font-weight: normal}

/* HEADER, LOGO */
.header {background: #4285F4;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26)}
.logo {padding-top: 8px; background-position: center center; background-repeat: no-repeat; background-size: contain}

/* SEZIONI */
.list-group > *, .stats_bottom li, .u_info dl {background-color: #FFF; padding: 8px 16px 8px 16px}
.stats_list > li:last-child {border-bottom: 0}
.title {text-align: left;
font-weight: normal;
font-size: 14px;
background: #ECECEC;
margin-top: 7px;
top: -2px;
color: #999;
font-weight: normal;
font-family: "Helvetica"}

.web a {font-size: 19px; font-weight: bold} .forum .web a {font-size: 17px}

.list-group-item {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.26); -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.26); border-top: 1px solid #DDD}

/* mantenere "!important" per evitare problemi di visualizzazione */
.desc, .desc * {color: #777 !important}
.last-post {color: #888}
.board .last-post a, .board .last-post a * {font-size: 14px !important; font-weight: normal}
.forum .last-post {margin-top: 7px}
.board {box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none}
.topics, .replies, .views {font-size: 12px; color: #535353}
span.timeago {color: #999 !important} .topic .timeago {color: #666}
.no-time {font-style:italic; color: #999}
.popupago {text-align: center; background-color: #000; color: #FFF; border-radius: 5px; -moz-border-radius: 5px}

/* sottosezioni */
.reserved-link {font-size: 13px; color: #333}

/* .on, .annuncio, .importante */
.on {border-left: 5px solid #4285F4}
.annuncio {background-color: #F7F3E1; border-top: 1px solid #FFF; border-bottom-color: #E2D9AE}
.importante {background-color: #EAF0FA; border-top: 1px solid #FFF; border-bottom-color: #C5D0E0}

/* SELEZIONE RIGA: Moderazione */
li.selected {background-color: #479CFC !important; border-bottom-color: #2684F0 !important} .selected *, .selected .web *, .selected .desc, .selected .desc *, .selected .last-post * {color: #FFF !important}

/* MESSENGER */
#mp-option label, #mp-delete {background-color: #FFF; color: #007299; font-weight: bold; font-size: 14px}
#mp-option label {border-right: 1px solid #DDD}

/* DISCUSSIONI, ARTICOLI */
.details a, .cancelled {font-size: 18px; font-weight: bold; color: #4285F4}
.cancelled {padding-left: 5px; font-weight: normal; color: #444}
.topic .group {color: #999; font-size: 13px}
.color {color: #3F3F3F; text-align: justify}
.color a {font-weight: bold; text-decoration: underline}
.edit {font-size: 10px; font-style: italic; color: #666}
.topic .option, .article .option {background-color: #EEE; border-top: 1px solid #CCC}
.topic .like {color: #666}
/* etichette, firma ffmobile*/
.tags, .ffmsign {font-size: smaller; font-style: italic}
.tags {margin-bottom: 0}
.tags a, .ffmsign a {text-decoration: none; font-weight: normal}
/* alert, info, success */
.alert {background-color: #F2DEDE; color: #B94A48; border-color: #EED3D7}
.info {background-color: #D9EDF7; color: #3A87AD; border-color: #BCE8F1}
.success {background-color: #DFF0D8; color: #468847; border-color: #D6E9C6}
.alert a, .info a, .success a {color: #3A87AD; text-decoration: none; font-weight: bold} .alert a {color: #B94A48} .success a {color: #468847}
/* allegati */
.attachment {text-align: center; position: relative}
.attachment > a {display: inline-block; padding: 7px}

/* popup moderazione post */
.topic .pop ul {background-color: #EEE; border: 1px solid #CCC; box-shadow: 0 0 5px rgba(0, 0, 0, .3); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .3); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3)}
.topic .pop li, .pop #t_like {border-color: #CCC} .topic .pop li:last-child {border: 0}
.topic .pop a {font-size: 14px; color: #333}

/* ONLINE, OFFLINE, ANONIMO */
.online {background-color: #6FC400}
.offline {background-color: #E74C3C}
.anonimo {background-color: #BDC3C7}

/* SONDAGGIO */
.poll-bar {background-color: #D0E3ED; border-radius: 2px; -moz-border-radius: 2px; color: #002C44}
.poll-bar div {background-color: #68BADD; border-radius: 2px 4px 4px 2px; -moz-border-radius: 2px 4px 4px 2px; color: #003A54}
.poll-max .poll-bar div {background-color: #088CC8}

/* PAGINAZIONE */
.pages, .nolink:hover {border: 1px solid #CCC; background-color: #FFF !important}
.pages li a {color: #666; font-size: 17px; box-shadow: 1px 0 0 #CCC, inset 1px 0 0 #CCC; -moz-box-shadow: 1px 0 0 #CCC, inset 1px 0 0 #CCC; -webkit-box-shadow: 1px 0 0 #CCC, inset 1px 0 0 #CCC}
.pages li > a:first-child {box-shadow: -1px 0 0 #CCC; -moz-box-shadow: -1px 0 0 #CCC; -webkit-box-shadow: -1px 0 0 #CCC}
.pages li a:hover {background-color: #EEE}

/* CITAZIONI, SPOILER e CODICI annidati */
.quote_top, .quote, .code_top, .code {margin: 10pt 0 0; border-left: 3px solid #6999B5}
.quote_top, .code_top {font-size: 11px; color: #518CAC; padding-left: 7px}
.code {font-family: 'Courier New', Sans-serif}
.quote_top a {padding: 0 10px; background: transparent url('https://img.forumfree.net/index_file/q.png') center no-repeat; text-decoration: none}
.quote, .code {padding: 5px 0 5px 10px; margin-top: 0; font-size: 9pt; line-height: 120%; color: #656565; text-align: justify}

/* PROFILO */
header.profile {padding: 15px 0; color: #FFF}
.profile .avatar {border-radius: 90px; -moz-border-radius: 90px; border-width: 5px; margin-bottom: 20px; background-color: #FFF}
.u_nick {font-size: 25px; font-weight: bold; color: #FFF}
.u_group {font-size: 15px}
.u_stats > table td {border-left: 1px solid #DDD}

.profile .title, li.u_info, li.u_signature, li.u_friends {margin: 0 7px; border: 1px solid #CCC}
.profile .title {margin-top: 7px; padding: 3px 8px; font-weight: bold; border-bottom: 0}
.u_info dl {padding: 4px 7px} .u_info dl:last-child {border-bottom: 0}
/* miniature avatar amici */
.friend_avatar {border: 1px solid #8A8A8A; border-radius: 5px; -moz-border-radius: 5px}
.friend_avatar img {border-radius: 5px; -moz-border-radius: 5px}
.friend_nickname {background: #222; color: #FFF; font-size: 10px; line-height: 15px; text-align: center; border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px}

/* STATISTICHE */
.stats {text-align: center; color: #888; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important; -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important}
.user_online a, .groups_list a {font-weight: bold}
.groups_list {padding: 10px 5px}
.stats_list {text-align: left} .stats_list > li {padding: 3px 10px; font-weight: bold}

/* INPUT e BOTTONI */
.codebuttons, .forminput, .textinput, #allegati input {font-size: 1em; margin: 3px; padding: 5px 8px; background-color: #F0F0F0; color: #222; border: 1px solid #CCC; border-radius: 3px; -moz-border-radius: 3px}
/* mantenere separato il selettore per evitare problemi di visualizzazione */
#allegati input::-webkit-file-upload-button {font-size: 1em; margin: 3px; padding: 5px 8px; background-color: #F0F0F0; color: #222; border: 1px solid #CCC; border-radius: 3px; -moz-border-radius: 3px}
.codebuttons:hover, #send-button:hover {background: #4285F4;
border-color: #4285F4;
color: #FFF}
.textinput {margin: 10px 0;
font-size: 18px;
background-color: transparent;
border: 1px #DDD solid;
border-radius: 0; -moz-border-radius: 0;
width: 100%}
/* bagliore azzurro */
.textinput:focus {outline: none}

#mod_options {color: #777; border: 1px solid #CCC; padding: 3px}
#send-button {background: #EEE; font-size: 15px; color: #444; font-weight: bold}

.buttons a {padding: 7px 0; color: #212121; font-weight: bold; font-size: 14px; text-transform: uppercase}
.buttons a:hover {background-color: rgba(0, 0, 0, 0.06)}

a.new-topic {color: #212121;
text-transform: uppercase;
background-color: transparent}
a.new-topic:hover {background-color: rgba(0, 0, 0, 0.06);
color: #212121}
a.reply {color: #4285F4}
a.delete {background-color: #C25554; color: #FFF}
a.delete:hover {background-color: #A53635}


over {background-color: #A53635}



/* ShoutBox */
.shoutbox .list-group {border-top: 1px #DDD solid}
.shoutbox .bottom {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.26); -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.26)}
.list-group {margin: 0!important}

/* Utenti Connessi */
li.user_online {border-top: 1px #DDD solid;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.26); -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.26)}

/* PULSANTE POLYMER */
.fab {position: absolute;
bottom: 10px;
right: 10px;
display: inline-block;
width: 46px;
height: 46px;
border-radius: 50%; -moz-border-radius: 50%;
color: #FFF;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26)}

.fab.all {background-color: #4285F4}

.fab.action {position: fixed;
bottom: 16px;
right: 16px;
background-color: #4285F4;
width: 56px !important;
height: 56px !important;
z-index: 9;
-webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1);
transition: all .2s cubic-bezier(.4, 0, .2, 1)}

.fab.action:hover {background-color: #DB4437}

.fab.action img {-webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1);
transition: all .2s cubic-bezier(.4, 0, .2, 1)}
.fab.action:hover img {-webkit-transform:rotate(180deg); -webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1);
transition: all .2s cubic-bezier(.4, 0, .2, 1); opacity: 0}

.fab:active {box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
transition-delay: 0s}

.fab > img::shadow path {fill: #FFF}

/*WIP*/
.sub-fab {position: absolute;
display: inline-block;
overflow: hidden;
width: 56px;
height: 56px;
background: url(http://i.imgur.com/3BdewyA.png);
border-radius: 100%; -moz-border-radius: 100%;
color: #FFF;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: visibility .4s, opacity .4s, all .2s;
visibility: hidden;
opacity: 0;
background-repeat: no-repeat;
background-size: 80% 80%;
background-position: center;
-webkit-transform:rotate(-180deg)}

.fab.action:hover .sub-fab {visibility:visible; opacity: 1; z-index: 9; -webkit-transform:rotate(0deg)}

.sub-btn {position: absolute;
display: inline-block;
overflow: hidden;
height: 20px;
width: 20px;
border-radius: 100%; -moz-border-radius: 100%;
bottom: 80px;
margin-left: 17px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
background: #4285F4;
transition: visibility .4s, opacity .4s, all .2s;
-webkit-transition: visibility .4s, opacity .4s, all .2s;
-moz-transition: visibility .4s, opacity .4s, all .2s;
-o-transition: visibility .4s, opacity .4s, all .2s;
visibility: hidden;
opacity: 0;
background-repeat: no-repeat;
background-size: 70% 70%;
background-position: center}
.fab.action:hover .sub-btn {visibility: visible;
opacity: 1;
height: 40px;
width: 40px;
margin-left: 8px}

.fab-panel {position:fixed; margin: 0; padding: 0; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: #EEE; visibility:hidden; opacity: 0; transition:visibility .2s, opacity .2s; z-index: 8}
.fab.action:hover ~ .fab-panel {visibility:visible; opacity: 0.8}

.sub-txt {position: fixed;
margin: 0;
line-height: 15px; /*40 - 1(border) - 8*2(margin top e bottom) - 4*2(padding)*/
right: 80px;
background: #FFF;
border-radius: 3px; -moz-border-radius: 3px;
color: #787878;
font-weight: bold;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
border-top: solid 1px #EEE;
padding: 4px 8px;
margin: 8px 0;
text-align: right}

.sub-menu {position: absolute;
bottom: 0}
.fab.action:hover .sub-menu {bottom: 0; -webkit-transition: all 0.2s ease}