body {

	font-size:1em;line-height:1.375em;font-family:Georgia,serif;color:#333;background-color:#fff
}

/* BODY has scrolling disabled and no margins or padding */

.treesaver body {
  overflow: hidden;
  margin: 0;
  border: 0;
  padding: 0;
}

/* CHROME is the treesaver application space
	Must be absolutely positioned, overflow hidden, all positions set to 0 */

.chrome, .viewer, .grid, .column, .container {
  /* Manually position everything */
  position: absolute;
  /* Make sure seams aren't visible */
  overflow: hidden;
  /* Set the base vertical grid */
  line-height: 2em;
}

.chrome {
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	z-index:10;
	background: #222;
}

	/* CHROME-SMALL is for small screens / mobile devices */
	
	.chrome-small {
		max-width: 480px;
		min-width: 0;
	}

	.chrome.chrome-small {
		background:none;
	}

/* VIEWER is the treesaver canvas
	Here is uses absolute positioning to create padding inside the treesaver chrome */

.viewer {
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background: #FFFfff;
}

	.chrome-small .viewer {
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
	}

/* GRID is each "page" in a treesaver document 
	GRID is set to 10% opacity to fade non-current pages */

.grid {
  width: 300px;
  margin: 0 2px;
  min-height: 30px;
  opacity: .1;
  -webkit-transition-timing-function:ease-out;
  -webkit-transition-duration: 0.3s;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

	/* opacity for current page */

	#currentPage {
	  opacity: 1;
	  -webkit-transition-timing-function:ease-out;
	}

/* grid-single / double used to restrict narrower grids from use in wider viewports */

.grid-single {
	max-width:500px;
}

.grid-double {
	max-width:768px;
}

/* COLUMNS and CONTAINERS for laying out the content */

.column, .container {
	width:300px;
	top: 0px;
	bottom: 48px;
	left: 0;
}

	.chrome-small .grid .column, .chrome-small .grid .container {
		  top: 12px;
		  bottom: 12px !important;
	}

/* position 2nd and 3rd columns */

.col-2 {
	left: 320px;
}

.col-3 {
	left: 640px;
}

/* set widths for wider containers and grids */

.cols-2 {
	width: 620px;
}

.cols-3 {
	width: 960px;
}

.container.cols-2 {
	width: 620px;
}

.container.cols-3 {
	width: 960px;
}

.grid .column,.grid .container{top:0;bottom:36px}

/* PAGE NUMBERING SYSTEM */

.pagenumbers {
	display: block;
	position:absolute;
	width:100%;
	bottom:00px;
	z-index:50;
	text-align: center;
	color: #777;
	font-size: 12px;
	font-weight: normal;
}

	.chrome-small .pagenumbers {
		bottom:12px;
	}

/* CONTROL BAR with buttons for next / prev buttons */
	
.controls {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index:100;
  height: 0px;
  line-height: 16px;
}



.controls .pagewidth {
	margin: 0 auto;
	position: relative;
}

.controls .next {
	position: absolute;
	right: 20px;
	top: 5px;
}

	.chrome-small .controls .next {
		right: -10px;
	}
	
	.nextArticle {
transform:rotate(-90deg); -ms-transform:rotate(-90deg);  -webkit-transform:rotate(-90deg);
	position: absolute;
	color:#999;
	right: -10px;
	top: 245px;
		background-color: Transparent;
            background-repeat:no-repeat;
            border: none;
            cursor:pointer;
            overflow: hidden;
}
.chrome-small  .nextArticle {
transform:rotate(-90deg); -ms-transform:rotate(-90deg);  -webkit-transform:rotate(-90deg);
	position: absolute;
	color:#999;
	right: -16px;
	top: 245px;
		background-color: Transparent;
            background-repeat:no-repeat;
            border: none;
            cursor:pointer;
            overflow: hidden;
}

.controls .prev {
	position: absolute;
	left: 20px;
	top: 5px;
}

	.chrome-small .controls .prev {
		left: -10px;
	}

.prevArticle {
transform:rotate(-90deg); -ms-transform:rotate(-90deg);  -webkit-transform:rotate(-90deg);
	position: absolute;
	color:#999;
	left: -16px;
	top: 245px;
		background-color: Transparent;
            background-repeat:no-repeat;
            border: none;
            cursor:pointer;
            overflow: hidden;
}

.chrome-small .prevArticle {
	transform:rotate(-90deg); -ms-transform:rotate(-90deg);  -webkit-transform:rotate(-90deg);
	position: absolute;
	color:#999;
	left: -16px;
	bottom: 5px;
		background-color: Transparent;
            background-repeat:no-repeat;
            border: none;
            cursor:pointer;
            overflow: hidden;
	}
	
button {
	height:30px;
	width:40px;
	position: relative;
	border:0;
	color: #fff;
	font-size:11px;
	margin:0;
	background:#666;
	-moz-border-radius:5px;
	border-radius:5px;
}

	button:hover {
		background-color:red;
	}

/* LEFT SIDE NAV, revealed by hover on tab */

nav {
	width: 180px;	
	position: absolute;
	top: 0px;
	left:-170px;
	z-index:1000;
	-webkit-transition: left .2s ease-out;
	z-index: 200;
}

nav .listings {
	background:#eee;
	padding-right:25px;
	-moz-box-shadow: 0px 2px 5px #000;
	-webkit-box-shadow: 0px 2px 5px #000;
	box-shadow: 0px 2px 5px #000;
	-moz-border-top-right-radius:5px;
	-moz-border-bottom-right-radius:5px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
}

nav h4 {
	font-size:12px;
	line-height:14px;
	font-weight:normal;
	text-transform:uppercase;
	padding:10px;
	padding-bottom:0;
	margin:0;
	text-align:center;
	}
	
	nav h4 a {
		color:#222;
		text-decoration:none;
	}

nav #navTab {
	position:absolute;
	top:35px;
	right:0;
	margin-right:-60px;
	width:80px;
	height:60px;
	background:url(button_ribbon_horz_plain.png) no-repeat transparent;
}

nav:hover {
	left:0px;
}

nav ul {
	list-style: none;
	min-height:60px;
	margin:0;
	padding:10px 10px 0;
	text-align:center;
}

nav li {
	clear: both;
	font-size: 12px;
	line-height: 14px;
	border-top:1px dotted #aaa;
}

nav li a {
	display: block;
	padding: 10px;
	color: #666;
	text-decoration:none;
}

nav li a:hover {
	color: #000;
}

nav p {
	font-size:10px;
	font-style:italic;
	line-height:18px;
	text-align:center;
	text-indent:0;
	padding:10px 0;
	margin: 0 10px;
	color:#999;
	border-top:1px dotted #aaa;
}

	nav p a {
		color: #666;
		text-decoration:none;
	}

/* LOADING and ERROR indicators */

#loading {
	text-align:center;
	width:100%;
	position:absolute;
	top:49%;
}

.loading, .error {
	position: absolute;
	top: 30px;
	left: 30px;
	width:100%;
	height:50px;
	color: #222;
	text-indent:-9000px;
	background:url(img_loading_40x50.png) no-repeat center center;
}

.error {
	background-image:url(img_error_40x50.png);
}

/* BEGIN CONTENT STYLES */

h1{font-family:'Bevan', serif;line-height:45px;font-size:36px;font-weight:400;color:#3b5998;margin:0}
h1 a{color:#3b5998;text-decoration:none}
.container h1{margin-top:10px;margin-bottom:0;font-weight:400}
h2{font-family:Georgia,serif;font-size:1.5em;line-height2em;margin-bottom:1em;color:#555;font-variant: small-caps;}
h2 a{font-family:Georgia,serif;font-weight:400;text-decoration:none;margin:0 0 1em}
.container h2{font-weight:400;margin-top:120px;margin-bottom:0}
h1 .sommario{font-family:Georgia,serif;display:block;font-size:.5em;line-height:1.375em;font-weight:700;border-bottom:1px solid #aaa;}
.grigio{color:#3b5998}
h3 a{font-weight:400;color:#3b5998;text-decoration:none}
h3{font-family:Georgia,serif;color:#3b5998;font-size:14px;line-height:18px;font-weight:400;margin:0}
h3 a:hover{color:#3b5998;text-decoration:underline;font-weight:400}
.pullquote{font-family:'Bevan', serif;font-style:italic;font-size:20px;color:#3b5998;margin:0}

p {
  margin: 0;
  text-indent: 24px;
}

p.indice p.leadGraf {
	text-indent:0;
}
a  {
text-decoration:none;
}

p.sectionBreak {
	margin-top:1em;
}

blockquote {
	margin:1em 0;
	padding:0;
	font-style:italic;
}

	blockquote p:first-child {
		text-indent:0;
	}

	blockquote.centered {
		text-align:center;
	}
	
	blockquote.centered p {
		text-indent:0;
	}
	
/* illustration containers and captions */

.container.illo {
	text-align:left;
}
	
	.container.illo img {
		text-align:center;
		display:inline-block;
	}
	
	.container.illo p.caption {
		text-transform:uppercase;
		margin:0em 0;
		font-size:12px;
		line-height:16px;
	}
	.container.adv {
	text-align:center;
}
	
	.container.adv img {
		text-align:center;
		display:inline-block;
	}
	
	.grid .keeptogether{display:block;margin-bottom:.1em}
	.overflow{overflow:visible}
.group{position:absolute;top:0;bottom:0;padding:0}

/* cover styles */

.cover, .cover h1, .cover h2 {
	text-align:center;
	margin-top:50px;
}

	.cover  h1 {
		font-size:30px;
		line-height:44px;
		margin-bottom:2em;
		margin-top:30px;
	}
		.cover h1 span {
			font-size:14px;
			font-style:italic;
		}
		
		.chrome-small .cover h1 {
		}
		
	.cover h2 {
		font-size:22px;
		line-height:2em;
	}
		.cover h2 span {
			font-size:12px;
			font-style:italic;
		}
		
		.chrome-small .cover h2 {
			font-size:14px !important;
		}
	
	.cover p {
		text-indent:0;
		text-transform:none;
		font-size:12px;
		margin-top:3em;
		line-height:22px;
	}
	
		.cover p a {
			font-style:italic;
			text-decoration:none;
			color:#222;
		}

/* table of contents styles */

.toc h1, .toc h1 a, .toc h2, .toc h2 a {
	color:#222;
	text-decoration: none;
	font-weight:normal;
	font-size:22px;
	line-height:24px;
	text-transform:uppercase;
	text-align:center;
}

	.grid-double.toc h2 {
		text-align:left;
	}

.toc h3 {
	font-weight:normal;
	text-align:left;
	margin:0;
	margin-bottom:10px;
	font-size:16px;
	line-height:22px;
}

	.toc .column h3 {
		margin-bottom:0 !important;
	}

.toc h3 a {
	color: #222;
	text-decoration:none;
	margin:0;
	display:block;
	border-bottom:1px dotted #aaa;
}

	.toc .column h3 a {
		border-bottom:none;
		text-align:center;
		font-size:14px;
	}
	
	.toc.grid-double .column h3 a {
		text-align:left;
	}

	@media screen and -webkit-device-pixel-ratio 1 and device-width 1024px and orientation landscape,screen and -webkit-device-pixel-ratio 1 and device-width 600px and orientation portrait{html{font-size:18px}
}
@media screen and -webkit-device-pixel-ratio 15 and device-width 683px and orientation landscape,screen and -webkit-device-pixel-ratio 15 and device-width 400px and orientation portrait{html{font-size:12px}
}
@media screen and min-width 321px and max-width 480px{.sidebar{width:480px}
}
@media all and min-width 35em{html.no-treesaver article div.no-treesaver,html.no-treesaver article iframe.no-treesaver,html.no-treesaver article object.no-treesaver,html.no-treesaver a {width:60%;padding-right:2em}
}
@media screen and max-width 320px{.sidebar{width:320px}
html{font-size:ew;line-height:14px;font-family:Georgia,serif;color:#333;background-color:#fff}
h3{font-size:14px;line-height:14px;font-weight:400;margin:0}

h1{line-height:16px;font-size:16px}
}
.editoriale{color:#9cf}
.cover{color:#900}
.idee{color:#060}
.economia{color:#666}
.sport{color:#07474d}
.leisure{color:#c97300}
.digital{color:#e9446b} //639
.marketing{color:#906}
.grigio,.fare{color:#3b5998}
@media screen and -webkit-device-pixel-ratio 1 and device-width 1024px and orientation landscape,screen and -webkit-device-pixel-ratio 1 and device-width 600px and orientation portrait{html{font-size:18px}
}
@media screen and -webkit-device-pixel-ratio 15 and device-width 683px and orientation landscape,screen and -webkit-device-pixel-ratio 15 and device-width 400px and orientation portrait{html{font-size:12px}
}
@media screen and min-width 321px and max-width 480px{.sidebar{width:480px}
.smallscreen.mobile .mobile.grid{opacity:1!important;width:300px;min-width:280px;margin:0;padding:18px;background-color:#fff;}
.smallscreen.mobile .column,.smallscreen.mobile .container{width:300px;min-width:280px}
h1 .sommario{font-family:"Bevan",Georgia,serif;display:block;font-size:14px;line-height:14px;font-weight:700;margin:10px;border-bottom:1px solid #aaa;}
h1{line-height:16px;font-size:16px}
}
@media all and min-width 35em{html.no-treesaver article div.no-treesaver,html.no-treesaver article iframe.no-treesaver,html.no-treesaver article object.no-treesaver{width:60%;padding-right:2em}
}
@media screen and max-width 320px{.sidebar{width:320px}
html{font-size:ew;line-height:14px;font-family:Exo,Georgia,serif;color:#333;background-color:#fff}
h3{font-size:14px;line-height:14px;font-weight:400;margin:0}
h1 .sommario{font-family:"Bevan",Georgia,serif;display:block;font-size:14px;line-height:14px;font-weight:700;margin:10px}
h1{line-height:16px;font-size:16px}
}
.smallscreen.mobile  h1{line-height:22px;font-size:24px}
.smallscreen.mobile  h1 .sommario{line-height:20px;font-size:22px}