/*
Indice
1. Boilerplate Html 5
2. Media print 242
3. Stile mobile 267
4. Stile >768px 576
5. Stile >1024px 807
6. Stile >1200px 829
7. FlexSlider 849
*/
/*
* HTML5 ✰ Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==== Normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display: block;}
audio, canvas, video {display: inline-block; *display: inline; *zoom: 1;}
audio:not([controls]) {display: none;}
[hidden] {display: none;}
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html {font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body {margin: 0; line-height: 1.231;}
body, button, input, select, textarea {font-family: sans-serif; color: #222;}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
::-moz-selection {background: #3AC3E0; color: #fff; text-shadow: none;}
::selection {background: #3AC3E0; color: #fff; text-shadow: none;}
/* =============================================================================
Links
========================================================================== */
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active {outline: 0;}
/* =============================================================================
Typography
========================================================================== */
abbr[title] {border-bottom: 1px dotted;}
b, strong {font-weight: bold;}
blockquote {margin: 1em 40px;}
dfn {font-style: italic;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
ins {background: #ff9; color: #333; text-decoration: none;}
mark {background: #ff0; color: #333; font-style: italic; font-weight: bold;}
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp {font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em;}
/* Improve readability of pre-formatted text in all browsers */
pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word;}
q {quotes: none;}
q:before, q:after {content: ""; content: none;}
small {font-size: 85%;}
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
/* =============================================================================
Lists
========================================================================== */
ul, ol {margin: 1em 0; padding: 0 0 0 40px;}
dd {margin: 0 0 0 40px;}
nav ul, nav ol {list-style: none; list-style-image: none; margin: 0; padding: 0;}
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
*/
img {border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle;}
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) {overflow: hidden;}
/* =============================================================================
Figures
========================================================================== */
figure {margin: 0;}
/* =============================================================================
Forms
========================================================================== */
form {margin: 0;}
fieldset {border: 0; margin: 0; padding: 0;}
/* Indicate that 'label' will shift focus to the associated form element */
label {cursor: pointer;}
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend {border: 0; *margin-left: -7px; padding: 0;}
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea {font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;}
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
*/
button, input {line-height: normal; *overflow: visible;}
/*
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
*/
table button, table input {*overflow: auto;}
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
*/
button, input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer; -webkit-appearance: button;}
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] {box-sizing: border-box;}
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}
input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;}
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea {overflow: auto; vertical-align: top; resize: vertical;}
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid {background-color: #f0dddd;}
/* =============================================================================
Tables
========================================================================== */
table {border-collapse: collapse; border-spacing: 0;}
td {vertical-align: top;}
/* ==== Non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir {display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr;}
.ir br {display: none;}
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {display: none !important; visibility: hidden;}
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;}
/* Hide visually and from screenreaders, but maintain layout */
.invisible {visibility: hidden;}
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after {content: ""; display: table;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
/* ==== Print styles =======================================================
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print
{
* {background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important;}
/* Black prints faster: h5bp.com/s */
a, a:visited {text-decoration: underline;}
a[href]:after {content: " (" attr(href) ")";}
abbr[title]:after {content: " (" attr(title) ")";}
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {content: "";} /* Don't show links for images, or javascript/internal links */
pre, blockquote {border: 1px solid #999; page-break-inside: avoid;}
thead {display: table-header-group;} /* h5bp.com/t */
tr, img {page-break-inside: avoid;}
img {max-width: 100% !important;}
@page {margin: 0.5cm;}
p, h2, h3 {orphans: 3; widows: 3;}
h2, h3 {page-break-after: avoid;}
}
/* == Fine HTML5 ✰ Boilerplate == */
/* ***** Stili di base - Mobile first ***** */
body
{
font-size: 100%;
font-family: Lucida Grande, Optima-Regular, Verdana, sans-serif;
color: #333;
background: #fff;
margin: 0;
padding: 0;
}
h1,h2,h3 {font-weight: 600;}
a
{
color: #3AC3E0;
text-decoration: none;
}
p
{
font-size: 0.875em;
line-height: 1.4375;
margin: 0 0 0.35em 0;
}
p a:hover
{
color: #3AC3E0;
text-decoration: underline;
}
ul
{
margin: 0;
padding: 0;
list-style: none;
}
#container
{
width: 95%;
margin: 0 auto;
padding: 0;
}
header
{
width: 100%;
border-bottom: 1px solid #D1D3D4;
}
#logo
{
margin: 0;
padding: 0.35em 0;
}
#logo img {max-width: 100%;}
nav
{
font-size: 1.0625em;
font-weight: 500;
border-top: 1px solid #D1D3D4;
padding: 0.625em 0;
}
nav ul li
{
background-color: #D8F3F9;
width: 100%;
height: 1.8em;
margin: 0;
border-top: 1px solid #D1D3D4;
border-left: 1px solid #D1D3D4;
border-right: 1px solid #D1D3D4;
}
nav ul li:last-child {border-bottom: 1px solid #D1D3D4;}
nav ul li a
{
display: block;
color: #333;
line-height: 1.8;
text-decoration: none;
width: 100%;
height: 1.8em;
padding-left: 4%;
}
nav ul li a:hover {color: #3AC3E0;}
nav.collapsible > h2
{
background-color: #D8F3F9;
color: #333;
font-size: 1.0625em;
line-height: 1.7;
width: 97%;
height: 1.7em;
margin: 0;
border: 1px solid #D1D3D4;
padding-left: 2.77%;
cursor: pointer;
}
nav.collapsible > h2.minus
{
background-color: #333;
color: #D8F3F9;
}
#main
{
width: 100%;
padding: 0.625em 0 0 0;
}
article
{
width: 100%;
border-top: 1px solid #D1D3D4;
padding: 0.925em 0 0.625em 0;
}
article:first-of-type
{
border: 0;
padding-top: 0;
}
article time
{
font-size: 0.6875em;
color: #ADAFB2;
}
article h2
{
font-weight: 500;
font-size: 1.1875em;
margin: 0 0 0.925em 0;
}
article h2 a {color: #333;}
article h2 a:hover
{
color: #3AC3E0;
}
article img
{
display: block;
max-width: 100%;
height: auto;
margin-bottom: 0.625em;
}
article .fluid-width-video-wrapper {margin: 0 auto 10px auto;}
#around
{
margin: 0.3125em auto;
border-bottom: 1px solid #D1D3D4;
padding-bottom: 0.625em;
}
#around > h2
{
background-color: #333;
color: #D8F3F9;
font-size: 1.0625em;
line-height: 1.8;
width: 97%;
height: 1.8em;
margin: 0 0 0.625em 0;
border: 1px solid #D1D3D4;
padding: 1.5%;
}
#around ul li {margin: 0.3125em 0 0.3125em 1.5%;}
#ricerca
{
text-align: center;
margin: 0 0 0.625em 0;
border-bottom: 1px solid #D1D3D4;
padding: 2.70%;
}
#ricerca input[type=text]
{
font-size: .875em;
font-family: Lucida Grande, Verdana, sans-serif;
width: 60%;
border: 1px solid #3AC3E0;
padding: 2.25%;
}
#ricerca input[type=text]:focus {outline: none;}
#ricerca input#button
{
font-family: Lucida Grande, Verdana, sans-serif;
background: #3AC3E0;
color: #333;
border: 1px solid #D1D3D4;
padding: 2.25%;
}
aside ul {margin-bottom: 1.25em;}
aside h3
{
padding-bottom: 0.625em;
font-weight: 500;
font-size: 1.0625em;
border-bottom: 1px solid #D1D3D4;
margin-bottom: 0.625em;
}
aside a
{
color: #333;
transition: color 0.25s;
-moz-transition: color 0.25s;
-webkit-transition: color 0.25s;
}
aside a:hover {color: #3AC3E0;}
aside .social-widget
{
font-size: 0.875em;
margin: 0;
}
aside .social-widget ul {margin-bottom: 0;}
aside .social-widget ul li
{
padding: 0.5em 0 0.3em 0;
border-bottom: 1px solid #D1D3D4;
}
aside .social-widget ul li:first-child {padding-top: 0;}
aside .social-widget ul li:last-child {border: 0;}
aside .social-widget a
{
display: block;
height: 1.75em;
line-height: 1.8em;
padding: 0 0 0 30px;
background-position: 0 0;
background-repeat: no-repeat;
}
aside .social-widget a:hover {color: #3AC3E0;}
aside .social-widget #twitter {background-image: url(../grafica/icone_social/twitter.png);}
aside .social-widget #facebook {background-image: url(../grafica/icone_social/facebook.png);}
aside .social-widget #mailinglist {background-image: url(../grafica/icone_social/email.png);}
aside .social-widget #feed {background-image: url(../grafica/icone_social/rss.png);}
footer
{
width: 100%;
font-size: 0.75em;
border-top: 1px solid #D1D3D4;
padding: 1em 0 1.25em 0;
}
footer #legal li
{
padding: 0.225em 1.3% 0.225em 0;
margin-right: 1.3%;
}
footer a
{
color: #333;
transition: color 0.25s;
-moz-transition: color 0.25s;
-webkit-transition: color 0.25s;
}
footer a:hover {color: #3AC3E0;}
/* Nascondiamo le sezioni che non vogliamo visualizzare su smartphone */
aside .ultimi-commenti-widget,
aside#secondaria, .flexslider
{
display: none;
}
/* == Media queries (breakpoint) ===== */
/* -----------------------------------
IPAD PORTRAIT
------------------------------------ */
@media only screen and (min-width: 768px)
{
/* Mostriamo le sezioni prima nascoste */
aside .ultimi-commenti-widget,
aside#secondaria, .flexslider
{
display: block;
}
/* Nascondiamo le sezioni che non vogliamo visualizzare su tablet e desktop */
nav > h2, #around {display: none;}
#container
{
position: relative;
max-width: 900px;
padding: 0 1.06382978723404%;
margin: 0 auto;
}
header
{
margin-bottom: 0.625em;
padding-bottom: 1.25em;
}
nav ul li
{
float: left;
margin: 0 16px 5px 0;
background-color: #fff;
width: auto;
height: auto;
border: none;
}
nav ul li:last-child {border: none;}
nav ul li a
{
color: #333;
transition: color 0.25s;
-moz-transition: color 0.25s;
-webkit-transition: color 0.25s;
width: auto;
height: auto;
line-height: normal;
padding: 0;
}
nav ul li a:hover {color: #3AC3E0;}
.flexslider
{
clear: left;
margin-bottom: 3.125em;
}
#content
{
width: 100%;
margin-top: 30px;
}
#main
{
float: left;
width: 75%;
border-right: 1px solid #D1D3D4;
padding: 1.25em 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
article {width: 95%;}
article img
{
box-sizing: border-box;
padding: 5px;
border: 1px solid #D1D3D4;
}
aside
{
float: left;
border-top: 0;
width: 25%;
padding-left: 1.8%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
aside h3
{
padding-left: 5.45%;
color: #3AC3E0;
}
#ricerca
{
text-align: center;
margin: 0 0 0.625em 0;
border-bottom: 1px solid #D1D3D4;
padding: 10px;
}
#ricerca input[type=text]
{
box-sizing: border-box;
padding: 3.25%;
}
#ricerca input[type=text]:focus {outline: none;}
#ricerca input#button
{
font-size: .875em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 3.25%;
}
aside .social-widget
{
font-size: 0.75em;
margin: 1.25em 0 1.30em 0;
}
aside .social-widget ul li {padding: 0.5em 0;}
aside .social-widget ul li:last-child {border-bottom: 1px solid #D1D3D4;}
aside .ultimi-commenti-widget h3
{
padding-bottom: 0;
margin-bottom: 1em;
border: 0;
}
aside .ultimi-commenti-widget div.commenti
{
width: 100%;
font-size: 0.70em;
padding: 0;
margin-bottom: 1em;
background-color: #D8F3F9;
}
aside .ultimi-commenti-widget div.commenti:last-child {margin: 0;}
aside ul.lista-commenti {margin: 0;}
aside .lista-commenti li
{
padding: 3%;
border-bottom: 1px solid #D1D3D4;
margin-bottom: 0.625em;
line-height: 1.4;
}
aside .lista-commenti li:last-child
{
border: 0;
margin: 0;
}
aside .lista-commenti span.autore-commenti a {color: #ba0202;}
aside .categorie-widget ul {font-size: 0.875em;}
aside .categorie-widget li
{
padding: 0.5em 0 0.5em 5.48%;
border-bottom: 1px solid #D1D3D4;
}
aside .categorie-widget a
{
display: block;
height: 1.30em;
line-height: 1.30em;
}
aside .categorie-widget a:hover {color: #3AC3E0;}
footer
{
clear: left;
float: none;
position: relative;
width: auto;
height: 3em;
line-height: 3em;
padding: 0 2%;
background-color: #EFEFEF;
border: 1px solid #E3E3E3;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 1.5em;
font-size: 0.8125em;
}
footer #legal {height: 4em;}
footer #legal li,
footer #legal li:last-child
{
float: left;
margin-right: 10px;
padding: 0 0 0 14px;
}
footer #legal li:first-child
{
padding: 0;
margin-right: 10px;
}
}
/* -----------------------------------
IPAD LANDSCAPE + NETBOOK
------------------------------------ */
@media only screen and (min-width: 1024px)
{
#container {max-width: 960px;}
#ricerca
{
position:absolute;
top: 30px;
right: 0;
border: none;
}
aside .social-widget {font-size: 0.875em;}
aside .ultimi-commenti-widget div.commenti {font-size: 0.775em;}
/* Qui la seconda colonna laterale è già ignorata */
}
/* -----------------------------------
DESKTOP
------------------------------------ */
@media only screen and (min-width: 1200px)
{
/* Il contenitore principale occupa il 75% dello spazio, la colonna laterale il 25%. La seconda colonna laterale non la uso. */
#container {max-width: 1140px;}
#main {width: 74%;}
aside {width: 24%;}
/*aside#secondaria
{
margin-left: 1%;
border-left: 1px solid #D1D3D4;
}*/
}
/* == FLEXSLIDER ===================================== */
.flex-container a:active,
.flexslider a:active
{
outline: none;
}
.slides,
.flex-control-nav,
.flex-direction-nav
{
margin: 0;
padding: 0;
list-style: none;
}
.flexslider
{
width: 100%;
margin: 0 0 3.125em 0;
padding: 0;
}
.flexslider .slides > li {display: none;}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img
{
max-width: 100%;
display: block;
}
.flex-pauseplay span {text-transform: capitalize;}
/* Clearfix for the .slides element */
.slides:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html .slides {display: block;}
* html .slides {height: 1%;}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child
{
display: block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider
{
background: #fff;
position: relative;
zoom: 1;
}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}
/* Caption style */
/* IE rgba() hack */
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}
p.flex-caption a {color: #fff;}
p.flex-caption a:hover {color: #fff, text-decoration: none;}
/* Direction Nav */
.flex-direction-nav li a
{
position: absolute;
right: -2%; /* 14px / 700px */
width: 41px; /* 29px / 700px */
height: 41px; /* 29px / 248px */
max-width: 29px;
max-height: 29px;
display: block;
background-color: #3AC3E0;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index: 1000;
}
.flex-direction-nav li a:hover {background-color: #72D3E9;}
.flex-direction-nav li .next
{
background-image: url(img/global/button-arrow.png);
background-position: 11px 7px;
top: 38.73239436619718%; /* 110px / 284px */
}
.flex-direction-nav li .prev
{
background-image: url(img/global/button-back-arrow.png);
top: 51.05633802816901%; /* 145px / 284px */
}
.flex-direction-nav li .disabled
{
opacity: .3;
filter:alpha(opacity=30);
cursor: default;
}
/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -35px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 10px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 10px; height: 10px; display: block; background: url(img/flexslider/pagination-dots.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -10px;}
.flex-control-nav li a.active {background-position: 0 -20px; cursor: default;}