/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */	

/* #Site Styles
================================================== */


/* #header
================================================== */


#header {
	border-top: 30px solid #026584;
	background:url(../images/header_sfondo_home.jpg) no-repeat 0 0;
	height: 290px;
	position:relative;
}

#header h1 {
	width: 259px;
	height: 92px;
	background: url(../images/logo_metatis.png) no-repeat  0 0;
	margin: 0 0 0 18px;
	padding: 0px;
}

#header h1 a {
	width: 259px;
	height: 92px;
	display:block;
	text-indent: -9999px;
}

#header h2 {
	font: 50px/50px "YanoneKaffeesatzRegular", Arial, Helvetica, sans-serif;
	color: #FFB515;
	position:absolute;
	left: 115px;
	bottom: -5px;
	margin: 0px;
}

.didascalia {
	background-color:#FFFFFF;
	width: 245px;
	position:absolute;
	top:15px;
	right:20px;
	color:#666666;
	font-style:normal;
	font: 13px/18px "PTSansRegular", Arial, Helvetica, sans-serif;	
	padding: 10px 15px 12px 20px;
	border: 1px dashed #666666;
    box-shadow: 1px 1px 3px #333333;
}

/* #slogan
================================================== */


#slogan {
	 background-color: #ececec;
	 border-top: 4px solid #026584;
 	border-bottom: 1px solid #cfcfcf;
	position:relative;
}

body.interna #slogan {
	height: 20px;
}

#slogan .angolo {
	width: 63px;
	height: 40px;
	background:url(../images/slogan_angolo.png) no-repeat 0 0;
	position:absolute;
	left: 30px;
	top: -36px;
}

#slogan h3 {
	 font: 20px/23px "PTSansItalic",  Arial, Helvetica, sans-serif;
	 color: #3F3F3F;
	 padding: 0 300px 0 110px;
	margin: 11px 0px;	 
}

/* #content
================================================== */

#content {
	padding: 20px 0 0 0;
}

#content h3 {
	font: 43px/1em "YanoneKaffeesatzRegular", Arial, Helvetica, sans-serif;
	margin: 0px;
	
}

#content h4 {
	font: 20px/1.1em "PTSansItalic", Arial, Helvetica, sans-serif;
	margin: 0.4em 0;
	color:#868686;
}

#content p {
	font: 16px/22px "PTSansRegular", Arial, Helvetica, sans-serif;
	color: #3F3F3F;

}

#content p strong {
	font: 16px/22px "PTSansBold", Arial, Helvetica, sans-serif;
	color: #3F3F3F;

}

	font-family: "PTSansBold", Arial, Helvetica, sans-serif;

#content p a {
	color: #026584;
	text-decoration:underline;
	float:right;
	margin: 10px 0 0 0;
}

.one-third .cosa
 {
	margin-top: 25px;
	padding: 0 0 0 60px;
	overflow:hidden;
}




.one-third .come {
	margin-top: 25px;
	padding: 0 20px 20px 25px;
}

.one-third .perche {
	margin-top: 25px;
	padding: 0 60px 0 5px;
	overflow:hidden;
}

.come {
	border-left: 1px dashed #999999;
	border-right: 1px dashed #999999;
}	

#content .cosa h3 {
	color: #026584;
}


#content .come h3 {
	color: #77abb9;
}

#content .perche h3 {
	color: #a4ccd6;
}


body.home .one-third a {
	color:#026584;
	float:right;
	padding: 10px;
}


/* #interna
================================================== */

body.cosa #header {
	background:url(../images/header_sfondo_cosa.jpg) no-repeat 0 0;
}

body.come #header {
	background:url(../images/header_sfondo_come2.jpg) no-repeat 0 0;
}

body.perche #header {
	background:url(../images/header_sfondo_perche.jpg) no-repeat 0 0;
}



body.interna #content {
	background:url(../images/sidebar_sfondo.png) repeat-y 630px 345px;
}

.two-thirds .main {
	margin: -5px 0 0 60px;
	padding: 15px 30px 0 0;
	border-top: 1px dashed #999999;
	border-right: 1px dashed #999999;
	
}

body.interna .two-thirds h3 {
	color: #026584;
	padding: 25px 25px 0 60px;
	line-height: 43px;
	background-color:#FFFFFF;
	display:inline-block;
	
}


/* #menu
================================================== */


.one-third .menu {
	margin-top: 25px;
	padding: 30px 60px 0 5px;
	overflow:hidden;
}

.one-third .menu li {
	margin: 0px;
	padding: 0px;	
}

.one-third .menu li a {
	font: 33px/42px "YanoneKaffeesatzRegular", Arial, Helvetica, sans-serif;
	margin: 0px;
	color: #79adbd;
	text-decoration: none;	
	padding: 0 0 0 25px;
	display:block;
	border-left:none!important;
	border-right:none!important;
	
}

body.cosa .one-third .menu li a.cosa,
body.come .one-third .menu li a.come,
body.perche .one-third .menu li a.perche {
	background:url(../images/menu_freccia.png) no-repeat 0 50%;
}

.one-third .menu li a:hover {
	color: #026584;
	text-decoration: none;	
}

.one-third  img.cornice {

    background-color: #FFFFFF;
    border: 1px solid #D8CED2;
    box-shadow: 1px 1px 3px #D8CED2;
    display: block;
    margin: 0 0 15px 5px;
    padding: 5px;
}

/* #footer
================================================== */


#footer {
	border-top: 10px solid #3f3f3f;
	background:url(../images/footer_sfondo.png) repeat-x 0 0;
	color: #d7e7ec;
	padding: 0 0 20px 0;
}

#footer .contatti {
    width: 310px;
    display: inline;
    float: right;
    margin-left: 10px;

}

#footer .contatti p {
	margin: 0px;
	line-height: 18px;
	padding: 0 0 0 20px;	
	
}

#footer .contatti p strong {
	font-family: "PTSansBold", Arial, Helvetica, sans-serif;
	color: #e3eff2;
	font-weight:normal;
	font-size:14px;
}

#footer .contatti p.link {
	background-color: #3f3f3f;
	font: 33px/42px "YanoneKaffeesatzRegular", Arial, Helvetica, sans-serif;
	margin: 0 0 5px 0;
	overflow:hidden;
	padding-bottom: 5px;
}

#footer .contatti p.link a {
	color:#FFFFFF;	
	text-decoration: none;
}

#footer .contatti p.link .email {
	float:left;
	margin: 0 10px 0 0;
}


#footer .contatti p.link .google {
	width: 32px;
	height: 32px;
	background:url(../images/google_plus.png) no-repeat 0 0;
	text-indent: -9999px;
	float:left;
	margin: 0 10px 0 0;	
}

#footer .contatti p.link .twitter {
	width: 32px;
	height: 32px;
	background:url(../images/ico-twitter.png) no-repeat 0 0;
	text-indent: -9999px;
	float:left;	
	margin: 0 10px 0 0;	
}

#footer .contatti p.link a:hover  {
	opacity: 0.7; /* safari, chrome, opera */
}

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {

		.container {background: url(../images/home_sfondo_768.png) repeat-y 50% 0 #FFFFFF }
		#slogan h3 { padding: 0 100px 0 110px;	}
		
		#footer .contatti {	width: 246px;}

		body.interna #content {
			background:url(../images/sidebar_sfondo.png) repeat-y 502px 345px;
		}


		.one-third .cosa {
			margin-top: 20px;
			padding: 0 0 20px 50px;
			overflow:hidden;	
			}
		
		.one-third .come {
			margin-top: 20px;
			padding: 0 20px 20px 25px;	
			overflow:hidden;
			}
		
		.one-third .perche {
			margin-top: 20px;
			padding: 0 50px 20px 5px;	
			overflow:hidden;
			}
			
		.one-third  img.cornice {
			width: 190px;
			height: auto;
		}
			
		body.interna #header {
			background-size: cover;
		}
			

	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		.container {background: url(../images/home_sfondo_768.png) repeat-y 50% 0 #FFFFFF }
		#slogan h3 { padding: 0 100px 0 110px;	}
		
		#footer .contatti {	width: 246px;}

		.one-third .cosa {
			margin-top: 20px;
			padding: 0 0 0 50px;}
		
		.one-third .come {
			margin-top: 20px;
			padding: 0 20px 20px 25px;	}
		
		.one-third .perche {
			margin-top: 20px;
			padding: 0 50px 0 5px;	}
	
	
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {

		body {background: url(../images/home_sfondo_420.png) repeat-y 50% 0 #f4f4f4 }

		.didascalia {display:none;}

		#header {
			border-top: 20px solid #026584;
			height: 220px;
			background:url(../images/header_sfondo_home.jpg) no-repeat -160px -20px;
			
		}

		#header h1 {
			width: 259px;
			height: 92px;
			background: url(../images/logo_metatis.png) no-repeat  0 0;
			margin: 0 0 0 8px;
			padding: 0px;
		}
		


		#header h2 {
			bottom: -5px;
			color: #FFB515;
			font: 35px/44px "YanoneKaffeesatzRegular",Arial,Helvetica,sans-serif;
			left: 0;
			margin: 0;
			position: absolute;
			background:url(../images/gradient_header.png) no-repeat 0 0;
			padding: 10px 0 0 70px;
			width:420px;
		}		
		
		#slogan h3 {
			 font: 18px/20px "PTSansItalic",  Arial, Helvetica, sans-serif;
			 color: #3F3F3F;
			 padding: 0 10px 0 70px;
			margin: 10px 0px;	 
		}
		
		#slogan .angolo {
			width: 40px;
			height: 25px;
			background:url(../images/slogan_angolo.png) no-repeat 0 -40px;
			position:absolute;
			left: 20px;
			top: -22px;
		}
		
		
		#content h3 {
			font: 40px/1em "YanoneKaffeesatzRegular", Arial, Helvetica, sans-serif;
			margin: 0px;
			
		}
		
		#content p {
			font: 15px/21px "PTSansRegular", Arial, Helvetica, sans-serif;
			color: #3F3F3F;
		
		}
		
		#content p a {
			color: #026584;
			text-decoration:underline;
			float:right;
			margin: 10px 0 0 0;
		}
		
		.one-third .cosa {
			margin-top: 15px;
			padding: 0 20px 5px 30px;
			border-bottom: 1px dashed #999999;
			
		}
		
		
		.one-third .come {
			margin-top: 15px;
			padding: 0 20px 5px 30px;
			border-bottom: 1px dashed #999999;
			
		}
		
		.one-third .perche {
			margin-top: 15px;
			padding: 0 20px 5px 30px;
		}
		
		.come {
			border-left: none;
			border-right: none;
		}	
		
		.two-thirds .main {
			margin: -5px 20px 0 30px;
			padding: 15px 10px 0 0;
			border-top: 1px dashed #999999;
			border-right: none;
			
		}
		
		body.interna .two-thirds h3 {
			padding: 15px 15px 0 30px;
		}		
		
		
		.one-third img.cornice {
			display: none;
		}		
		
		.one-third .menu {
			margin-top: 0px;
			overflow: hidden;
			padding: 0px 30px 0 30px;
		
		
		}		
		
		.one-third .menu li {
			margin: 0;
			padding: 0 0 0 10px;
			background:url(../images/menu_sfondo_mobile.png) repeat-x 0 0;
		}
		
		.one-third .menu li a {
			border: none;
		}


	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	
		body {background: url(../images/home_sfondo_420.png) repeat-y 50% 0 #f4f4f4 }

		.didascalia {display:none;}

		#header {
			border-top: 20px solid #026584;
			height: 220px;
			background:url(../images/header_sfondo_home.jpg) no-repeat -160px -20px;
			
		}

		#header h1 {
			width: 259px;
			height: 92px;
			background: url(../images/logo_metatis.png) no-repeat  0 0;
			margin: 0 0 0 8px;
			padding: 0px;
		}
		


		#header h2 {
			bottom: -5px;
			color: #FFB515;
			font: 35px/44px "YanoneKaffeesatzRegular",Arial,Helvetica,sans-serif;
			left: 0;
			margin: 0;
			position: absolute;
			background:url(../images/gradient_header.png) no-repeat 0 0;
			padding: 10px 0 0 70px;
			width:420px;
		}		
		
		#slogan h3 {
			 font: 18px/20px "PTSansItalic",  Arial, Helvetica, sans-serif;
			 color: #3F3F3F;
			 padding: 0 10px 0 70px;
			margin: 10px 0px;	 
		}
		
		#slogan .angolo {
			width: 40px;
			height: 25px;
			background:url(../images/slogan_angolo.png) no-repeat 0 -40px;
			position:absolute;
			left: 20px;
			top: -22px;
		}
		
		
		#content h3 {
			font: 40px/1em "YanoneKaffeesatzRegular", Arial, Helvetica, sans-serif;
			margin: 0px;
			
		}
		
		#content p {
			font: 15px/21px "PTSansRegular", Arial, Helvetica, sans-serif;
			color: #3F3F3F;
		
		}
		
		#content p a {
			color: #026584;
			text-decoration:underline;
			float:right;
			margin: 10px 0 0 0;
		}
		
		.one-third .cosa {
			margin-top: 15px;
			padding: 0 20px 5px 30px;
			border-bottom: 1px dashed #999999;
			
		}
		
		
		.one-third .come {
			margin-top: 15px;
			padding: 0 20px 5px 30px;
			border-bottom: 1px dashed #999999;
			
		}
		
		.one-third .perche {
			margin-top: 15px;
			padding: 0 20px 5px 30px;
		}
		
		.come {
			border-left: none;
			border-right: none;
		}	
	
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		body {background: url(../images/home_sfondo_320.png) repeat-y 50% 0 #f4f4f4 }

		.didascalia {display:none;}
		
		#header {
			border-top: none;
			height: auto;
			background:none #dcdcdc;
			padding: 0 0 5px 0;
		}

		body.interna #header {
			border-top: none;
			height: auto;
			background:none #dcdcdc;
			padding: 0 0 5px 0;
		}


		#slogan .angolo {display: none;}
		
		#header h2 {
			color: #026584;
			font: 28px/33px "YanoneKaffeesatzRegular",Arial,Helvetica,sans-serif;
			margin: 0;
			padding: 0;
			background:none;
			text-align:center;
			position:static;
			width: auto;
		}		

		
		#slogan  {
			border-top: none;
			border-bottom: none;
		}


		#slogan h3 {
			 font: 16px/19px "PTSansItalic",  Arial, Helvetica, sans-serif;
			 color: #ffffff;
			 padding: 10px  15px;
			margin: 0;	 
			background-color: #026584;
			border-bottom: 1px dashed #FFFFFF;
		}


		body.interna #slogan  {
			background-color: #026584;
			height: 10px;
			border-bottom: 1px dashed #FFFFFF;
		}

		#content h3 {
			font: 37px/1em "YanoneKaffeesatzRegular", Arial, Helvetica, sans-serif;
			margin: 0px;
			
		}



		.one-third .cosa,
		.one-third .come,
		.one-third .perche				 {
			padding: 0 20px 5px 20px;
			
		}

		body.interna .two-thirds h3 {
			padding: 15px 15px 0 20px;
		}		
		.two-thirds .main {
			border-right: medium none;
			border-top: none;
			margin: 0px 20px 0 20px;
			padding: 2px 0 0 0;
		}

		.one-third .menu {
			margin-top: 0;
			overflow: hidden;
			padding: 0 ;
			margin: 0px;
		}

		#header h1 {
			width: 259px;
			height: 82px;
			background: url(../images/logo_metatis.png) no-repeat  0 0;
			margin: 5px auto;
			padding: 0px;
		}
		
		#header h1 a {
			width: 259px;
			height: 82px;
			display:block;
			text-indent: -9999px;
		}

		#footer .contatti {
			width: 300px;
			display: inline;
			float: left;
			margin-left: 0;
		
		}
	
	
	
	
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

@font-face {
    font-family: 'YanoneKaffeesatzRegular';
    src: url('../fonts/yanonekaffeesatz-regular-webfont.eot');
    src: url('../fonts/yanonekaffeesatz-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/yanonekaffeesatz-regular-webfont.woff') format('woff'),
         url('../fonts/yanonekaffeesatz-regular-webfont.ttf') format('truetype'),
         url('../fonts/yanonekaffeesatz-regular-webfont.svg#YanoneKaffeesatzRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'PTSansRegular';
    src: url('../fonts/pt_sans-web-regular-webfont.eot');
    src: url('../fonts/pt_sans-web-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/pt_sans-web-regular-webfont.woff') format('woff'),
         url('../fonts/pt_sans-web-regular-webfont.ttf') format('truetype'),
         url('../fonts/pt_sans-web-regular-webfont.svg#PTSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'PTSansBold';
    src: url('../fonts/pt_sans-web-bold-webfont.eot');
    src: url('../fonts/pt_sans-web-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/pt_sans-web-bold-webfont.woff') format('woff'),
         url('../fonts/pt_sans-web-bold-webfont.ttf') format('truetype'),
         url('../fonts/pt_sans-web-bold-webfont.svg#PTSansBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'PTSansItalic';
    src: url('../fonts/pt_sans-web-italic-webfont.eot');
    src: url('../fonts/pt_sans-web-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/pt_sans-web-italic-webfont.woff') format('woff'),
         url('../fonts/pt_sans-web-italic-webfont.ttf') format('truetype'),
         url('../fonts/pt_sans-web-italic-webfont.svg#PTSansItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}