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;
}
body {
    line-height: 1;
}
ol, ul {
    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;
}

.clearfix {clear: both;}
.hidden {display: none !important;}

.darked {background-color: #161616;opacity: 0.9;filter:alpha(opacity=90);}

.color-white {color: #fff;}
.color-black {color: #000;}

body {
	background-color: #000;
	overflow: hidden;
	font-family: Arial;
	font-size: 12px;
}

/* Z INDEXes */
#bg 		  		{z-index: 0;}
#wrapper .r-left,
#wrapper .r-right	{z-index: 6;}
#wrapper .over{z-index:1}
#body				{z-index: 2;}
#news				{z-index: 3;}
#top, #bottom   	{z-index: 20;}
#loading			{z-index: 13;}



#wrapper { 
	position: relative;
	width: 100%; height: 100%;
/*	min-width: 1024px; */
	margin: 0px auto;
	overflow: hidden;
}

#wrapper .r-left {
	display: block; width: 103px; height: 100%;
	background: url("../resources/images/r-left.png") no-repeat center left;
	position: fixed; top: 15px; left: 0px; 
}
#wrapper .r-right {
	display: block; width: 93px; height: 100%;
	background: url("../resources/images/r-right.png") no-repeat center right;
	position: fixed; top: 15px; right: 0px; 
}

#bg {
	overflow: hidden;
	position: absolute; top: 0px; left: 0px;
	width: 100%; 
	height: 100%;
	/*background: url("../resources/images/body-bg.jpg") no-repeat;*/
} 

#loading {	
	position: absolute;
	width: 32px; height: 100%;
	/*margin: 0px auto;*/
	display: none;
	top:0;
	left:50%;
}
#loading .ico {
	position: fixed;
	display: block; width: 32px; height: 100%;
	background: url("../resources/images/ajax-loader.gif") no-repeat center left;
}

#legend{
	display: none;
    cursor: pointer;
    margin: 0 auto;
    position: relative;
    width: 100%; height: 100%;
    z-index: 25;
    opacity: 0.8;
    filter: alpha(opacity=80);
    background: #000;
}
#legend .img{
	position: fixed;
	height: 100%;
    width: 100%;
    display:none;
}
#legend .vertical{
    background: url(../resources/images/istruzioni.png) no-repeat center center
}
#legend .horizontal{
    background: url(../resources/images/istruzioni-horizontal.png) no-repeat center center
}

.filler{height: 106px; position: absolute; top: 0pt; left: 0pt; z-index: 1; display: block; width: 100%;}
#top { 
	position: fixed; 	
	width: 100%; height: 134px; padding: 0px; top: 0px; left:0px;
}

#top .logo {
	display: block; width: 374px; height: 75px;
	background: url("../resources/images/jm-logo.png") no-repeat 21px 17px;
	cursor: pointer;position: absolute;z-index: 2;top:0;left:0;text-indent:-9999px;
}

#top .menu { position: absolute; right: 0px; top: 48px; height: 86px; width: 100%; z-index: 2;}

#bottom {
	position: fixed; 	
	width: 100%; height: 71px; padding:0px; bottom: 0px; left:0px;
}

#bottom .menu {position: absolute; right: 0px; top: 0px; height: 57px; width: 100%;}
#bottom .info {color: #fff !important; font-family: "Myriad Pro", arial; font-size: 10px; padding-left: 20px; margin-top: 2px;}
#bottom .info a{color: #fff !important}


#breadcrumbs {
	display: none;
	position: fixed; top: 106px; left: 0px;
	width: 100%;
	height: 50px;
	color: #fff;
	background-color: #161616;
}
#breadcrumbs .text {
	line-height: 50px;
	font-size: 15px;
	font-family: "Myriad Pro";
	padding-left: 15px;
	font-weight: normal;
}

.menu A, .menu SPAN.chiudi {
	display: block; width: 195px; height: 28px;
	line-height: 28px; padding: 0px;
	font-size: 16px;
	text-align: right;
	text-decoration: none;
	font-family: "Myriad Pro", Arial;
	cursor: pointer;
	position: absolute; 
	z-index: 2;
}
.menu SPAN.chiudi {z-index: 1; opacity: 0; filter:alpha(opacity=0);cursor: pointer;}
.menu SPAN.arrow { display: block; width: 25px; height: 28px;float:right; padding: 0px;}
.menu SPAN.arrow.white { background: url("../resources/images/arrow-left-white.png") no-repeat 8px 8px; }
.menu SPAN.arrow.black { background: url("../resources/images/arrow-left-black.png") no-repeat 8px 8px; }

.menu SPAN.cross { 
	background: url("../resources/images/cross.png") no-repeat 8px 8px;
	display: block; width: 25px; height: 28px;
	float:right; padding: 0px;
}
	
.menu .communication { background-color: #da0001; 	top: 0px; right: 0px;}
.menu .design 		 { background-color: #b6d901; 	top: 29px; right: 0px;}
.menu .clienti 		 { background-color: #6c6c6c; 	top: 0px; right: 0px;}
.menu .studio 		 { background-color: #fff; 		top: 29px; right: 0px;}

.menu .chiudi		 { background-color: #fff; 		top: 29px; right: 0px;}




#body {
	position: fixed;
	width: 100%; height: 100%;
	top: 0px;
	bottom: 0px;
}

#body .page {
	overflow: hidden;
	display: none;
}


#body .current{
	display: block;	
}


#body .page .riga-wrapper {
	position: absolute;	
	width: 100%;
}
#body .page .riga {
	position: absolute; 
	width: 100%;
}
#body .page .riga .section {float: left;}

#body .page .noabs{position:static;}
#body .page .bcrumb{top:156px;}


/* HOME */
#home {display:none;}
#home #home-content{position: absolute; bottom: 14px; left: 0pt; z-index: 2; display: block;}
#home #home-content img{position: absolute; bottom: 0pt; left: 0pt; z-index: 3;}
#home #home-content div{position: absolute; z-index: 10; bottom: 80px; left: 500px; width:500px;}
#home #home-content div p{ color:#000; font-size: 13px;font-weight:bold;margin: 0 0 10px 0;font-family: "Myriad Pro",Arial;}
#home #home-content div.black p{color:#000;}
#home .news-container{
	background-color: #1f1f1f;
	position: fixed; 
	bottom: 93px; left: 20px;
	width: 535px; height: 125px;
	overflow:hidden;display:none !important;
}
#home .news-wrapper {
	position: absolute; top:0;left:0;
	height: 125px;
	z-index: 1;
}

#home .news-wrapper UL {
	color: #fff !important;
	border: 0px none !important;
	padding: 0px !important;
	margin: 0px !important;
	width: 100%;
	height: 125px;
	display: inline-block;
}

#home .news-wrapper UL LI {
	color: #fff !important;
	border-top: 0px none !important;
	border-bottom: 0px none !important;
	list-style-type: none !important;
	padding: 0px !important;
	background-image: none !important;
	display: block !important;
	margin: 0px !important;
	width: 535px;
	float: left;
}
#home #news-slider-list{
	position: absolute;
	top: 0;
	left:0;
	margin-left: 0;
	z-index: 6;
}

#home .news-wrapper UL LI .loading{
	width: 535px; height: 124px;
}
#home .news-wrapper UL LI .loading img{
	margin:48px auto 0 auto;	
	display:block;
}

#home .news-wrapper .item {
	display: block; width: 535px; height: 124px;	
	position: relative;
}
#home .news-wrapper .item .img {
	float: left; width: 178px !important; height: 124px !important;	
}
#home .news-wrapper .item .text {
	float: left; width: 350px !important; height: 124px !important;
	font-size: 11px;
	font-family: "Myriad Pro", Arial;
	color: #838383;
	position: relative;
}
#home .news-wrapper .item .text .title {font-weight: bold; padding: 10px 0px 15px 10px; text-transform: uppercase;}
#home .news-wrapper .item .text .abstract {font-weight: normal !important; padding-left: 10px; height: 45px; line-height: 15px; overflow: hidden;}
#home .news-wrapper .item .text .detailLink {
	font-weight: normal !important;
	text-decoration: underline;
	display: block;
	position: absolute; left: 10px; bottom: 10px;
}
#home .news-wrapper .item A.coverlink {
	display: block; width: 535px !important; height: 124px !important;
	position: absolute; top: 0px; left: 0px;
	padding: 0px; margin: 0px;
	background-color: #1f1f1f;
	opacity: 0; filter: alpha(opacity=0);
}
.video-background {
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index:3 !important;
}
.video-background video{opacity:0;filter:alpha(opacity=0);}
.video-background .ui-video-background{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity:0.75;
	filter:alpha(opacity=75);
	display:none;
	z-index:4 !important;
}
.ui-video-background-controls li{width:80px;height:80px;display:inline-block;float:left;margin:0 10px;}
.ui-video-background-controls{width:200px;height:80px;position:absolute;top:50%;left:50%;z-index:1000;text-align: center;margin-left: -100px;margin-top: -40px}
.ui-icon{width:80px;height:80px;display:block;}
.ui-icon-pause{background:url('http://localhost/SITE_V2.3.5_JonnyMole/resources/images/video/pause.png') top left no-repeat;}
.ui-icon-play{background:url('http://localhost/SITE_V2.3.5_JonnyMole/resources/images/video/play.png') top left no-repeat;}
.ui-icon-volume-on{background:url('http://localhost/SITE_V2.3.5_JonnyMole/resources/images/video/suono-off.png') top left no-repeat;}
.ui-icon-volume-off{background:url('http://localhost/SITE_V2.3.5_JonnyMole/resources/images/video/suono-on.png') top left no-repeat;}
.ui-icon-replay{background:url('http://localhost/SITE_V2.3.5_JonnyMole/resources/images/video/rivedi.png') top left no-repeat;}
.ui-video-background-controls li.ui-hidden{display:none}

#home #home-content #ui-video-background{position:static;bottom:inherit;left:inherit;}
/* NEWS DETAIL */
#newsDetail .riga-wrapper {
	width: 100%; left: 0px;
	overflow: hidden ; height:450px;
	background-color: #000;
}
#newsDetail .riga {
	position: relative !important;
	width: 100%;
	background-color: #000;
	padding: 0px;
  	margin: 10px auto 0px;
	width: 840px !important;
	height: 400px; padding: 25px 0px;
}

#newsDetail .riga .text {
	background-color: #000;	
	width: 320px; height: 400px;
	padding: 0px 15px;
	float: right;
	color: #fff;
}
#newsDetail .riga .news-cufon-title {
	font-size: 24px;
	height: 60px; margin-bottom: 1px;
	background-color: #fff;
	color: #000;
	padding: 3px 4px;
}
#newsDetail .riga .text .content {
	padding: 30px 0px 0px 0px !important;
	font-size: 11px !important;
	font-family: "Myriad Pro", Arial;
	font-weight: normal !important;
	line-height: 15px !important;
	height:330px;
	overflow: auto;
	margin-top:10px;
}

#newsDetail .riga .img-wrapper {
	background-color: #000;
	width: 450px; height: 400px; padding: 0px 15px;
	float: right; overflow: hidden;
	position: relative;
}
#newsDetail .riga .img-wrapper .img {
	position: absolute; top: 0px; left: 15px;
	width: 450px; height: 400px;
	z-index: 1;
}
#newsDetail .riga .img-wrapper .opaque-covering {	
	width: 480px; height: 400px;
	position: absolute; top: 0px; left: 0px;
	background-color: #000;
	opacity: 0.8;
	filter: alpha(opacity=80);
	z-index: 2;
}
#newsDetail .riga .img-wrapper .loading {
	position: absolute; top: 0px; left: 0px;
	display: block; width: 480px; height: 400px;
	background: url("../resources/images/ajax-loader-small.gif") no-repeat center center;	
	z-index: 3;
}



/* STUDIO */
#studio .riga-wrapper {
	height: 420px;
}
#studio .riga {
	width: 2000px;
	height: 416px; 
	padding: 0;
} 
#body #studio .riga .section{
	width: 490px;
	background-color: #fff;
	height: 416px;
}
#body #studio .riga .section .text,#body #studio .riga .section .cufon-studio-title{
	margin-left:60px;margin-right:30px;
}
#body #studio .riga .section .cufon-studio-title.uppercase{text-transform:uppercase}
#studio .studiopad{width:150px;height:416px;float: left;}
#studio .studiopad-big{width:350px}
#body #studio .riga .img-holder {
	margin-left: 15px;
	width: 601px;
	background-color: #fff;
	height: 416px; 
	overflow: hidden;
	position: relative;
}
#studio .riga .img-holder .img {
	position: absolute; top: 0; left: 0;
	z-index: 1;
}
#studio .riga .img-holder .img IMG {
	height:416px;
}
#studio .riga .img-holder .opaque-cover {
	position: absolute; top: 0; left: 0;
	width: 601px; 
	height: 416px; 
	background-color: #000;
	opacity: 0.8;
	filter: alpha(opacity=80);
	z-index: 2;
}
#studio .riga .img-holder .loading {
	display: block;
	position: absolute; top: 0; left: 0;
	width: 601px; 
	height: 416px;
	background: url("../resources/images/ajax-loader-small.gif") no-repeat center center;
	z-index: 3;
}



#studio .riga .descr { 
	width: 590px;
	background-color: #fff;
	height: 416px;
}
#studio .riga .cufon-studio-title{
	margin-top:20px;
	display:block;
}
#studio .riga .descr .title {
	display: block; width: 229px; height: 18px;
	background: url("../resources/images/studio-title.png") no-repeat;
	padding-bottom :3px;
}
#studio .riga .text {
	padding-top: 10px;
	margin-left: 3px;
	font-family: "Myriad Pro", Arial;
	font-size: 11px; 
	font-weight: normal;
	line-height: 18px;
	color: #000;
	background-color: #fff;
	border-top: 1px solid #000;
}
#studio .riga .borderless{
	/*border-top: 0;*/
	margin-right:60px;
}

#studio .riga .descr .awards {
	display: block; 
	width: 95px; 
	height: 18px;
	margin-top: 30px;
	padding-bottom :3px;
}
#studio .riga .descr .awards-list {
	padding-top: 10px;
	margin-left: 3px;
}
#studio .riga .descr .awards-list .item {float: left; margin-right: 15px;}
#studio .riga .descr .awards-list .acd 	{display: block; width:50px; height: 50px; background: url("../resources/images/studio-awards-acd.jpg") no-repeat;}
#studio .riga .descr .awards-list .pencil {display: block; width:50px; height: 50px; background: url("../resources/images/studio-awards-pencil.jpg") no-repeat;}
#studio .riga .descr .awards-list .cup 	{display: block; width:50px; height: 50px; background: url("../resources/images/studio-awards-cup.jpg") no-repeat;}
#studio .riga .descr .awards-list .rose 	{display: block; width:50px; height: 50px; background: url("../resources/images/studio-awards-rose.jpg") no-repeat;}

#studio .riga .whatwedo { 
	height: 496px;
}
#studio .riga .whatwedo .title {
	display: block; width: 181px; height: 18px;
	background: url("../resources/images/studio-whatwedo.png") no-repeat;
	padding-bottom :3px;
}
#studio .cufon-studio-title {
	color: #000; font-size: 23px; 
}

/* CLIENTI */
#clienti {}
#clienti .riga-wrapper {
	width: 100%; left: 0px;
	overflow: hidden ; height:450px;
	background-color: #000;
}
#clienti .riga {
	position: relative !important;
	width: 100%;
	background-color: #000;
	padding: 0px;
  	margin: 10px auto 0px;
	width: 840px !important;
	height: 400px; padding: 25px 0px;
}
#clienti .riga .section {
	width: 380px; height: 430px; /*w: 340 h:410*/
	margin: 0px;
	position: relative;
}
#clienti .riga .section .title {
	display: block; width:360px; height: 28px; padding: 0px 10px; /*w: 320*/
	color: #fff; 
	line-height: 28px;	
	padding-right: 10px;
	font-size: 16px;
	text-align: right;
	text-decoration: none;
	font-family: "Myriad Pro", Arial;	position:absolute; top:0;left:0;z-index:100;
}
#clienti .riga .section .title.red {background-color: #da0001;}
#clienti .riga .section .title.green {background-color: #b6d901;}
#clienti .riga .section .title.white {background-color: #fff; color: #000;}

#clienti .riga .section .list {left:0;top:28px;position:absolute;z-index:10;width: 380px; height: auto; overflow: hidden;}/*w: 340 h:360*/
/*
#clienti .riga .section .list P {
	display: block; width: 160px; height: 35px; float:left;
	color: #fff; font-family: "Myriad Pro", Arial; font-size: 15px; line-height: 35px;
}*/
#clienti .riga .section .list UL {
	color: #fff !important;
	border: 0px none !important;
	padding: 0px !important;
	margin: 0px !important;
}

#clienti .riga .section .list UL LI {
	color: #fff !important;
	border-top: 0px none !important;
	border-bottom: 0px none !important;
	list-style-type: none !important;
	padding: 0px !important;
	background-image: none !important;
	

	display: block !important;
	width: 154px !important;/*w: 136*/
	margin: 0px !important;
	height: 25px !important;
	line-height: 15px !important;/*l:25*/
	float: left;
}
#clienti .riga .section .list UL LI A { 
	color: #fff !important; 
	text-decoration: none; 
	font-size: 12px !important;/*s: 12*/
	padding: 0px;/*p:0 10*/
	margin: 0px !important;
	cursor: pointer;
}




/* PROJECT DETAIL */

.projectDetailPage .riga-wrapper {
	height: 410px;
}
.projectDetailPage .riga {
	width: 100%;
	height: 410px; padding: 0px; overflow:hidden;
}
.projectDetailPage .riga .text {
	background-color: #fff;
	width: 430px;
	height: 300px;
	_height: 330px; 
	/*padding: 15px 20px 15px 10px;*/
	padding: 56px 43px;
	float: left;
	color: #000;
	position: relative;

}
.projectDetailPage .riga .project-cufon-title {
	font-size: 32px;
	height: 60px; margin-bottom: 1px;
	background-color: #000;
	color: #fff;
	padding: 3px 4px;
	text-transform:uppercase;
	font-weight: bold;
}
.projectDetailPage .riga .text .content {
	padding: 0px !important;
	font-size: 12px !important;
	font-family: Arial !important;
	font-weight: normal !important;
	line-height: 19px !important;
	height:305px;
	color:#000;
	overflow: auto;
	margin-top:0px;
}
.projectDetailPage .riga .text .content .client span,
.projectDetailPage .riga .text .content .year span{
	font-weight:bold;
}
.projectDetailPage .riga .text .content .client{
	margin-top:12px;
}
.projectDetailPage .riga .text .corrLink {
	display: block; width:195px; height: 28px;
	position: absolute; bottom: 15px; left: 252px; /* left: 15px; */
	text-decoration: none;
	background: url("../resources/images/btnRelated.png") no-repeat;
	cursor: pointer;
}

.projectDetailPage .riga .img {
	background-color: #fff;
	padding: 0;
	overflow:hidden;
	float: left;
	line-height: 410px;
	position: relative;
	height:410px;
}
.projectDetailPage .riga .img img{
	display:block;
	height:410px;
}
.projectDetailPage .riga .img .imgloader{width:16px;height:16px;display:block;visibility:hidden;position: absolute;z-index:10;top:50%;left:50%;margin-top: -8px;margin-left: -6px;}

.projectDetailPage .riga .video{background-color: #FFFFFF;float: left;height: 500px;overflow: hidden;padding: 15px 20px 15px 20px;width: auto;}

.projectDetailPage .riga .nextPrj-wrap {
	width: 500px; height: 440px;
	float: left;
}
.projectDetailPage .riga .nextPrj-wrap A.nextPrj {
	display: block; width: 500px; height: 440px;
	background: url("../resources/images/prjDetail-nextArrow.png") no-repeat center center;
	cursor: pointer;
}






/* SEZIONI LISTA PROGETTI */

.project-list {
/*	background-color: #000; */
}
.project-list .riga-wrapper {
	width: 100%; left: 0px;
	overflow: hidden;
}
.project-list .riga {
	width: 100%;
/*	background-color: #000; */
	padding: 0px;
}

.project-list .riga UL {
	color: #fff !important;
	border: 0px none !important;
	padding: 0px !important;
	margin: 0px !important;
}

.project-list .riga UL LI {
	color: #fff !important;
	border-top: 0px none !important;
	border-bottom: 0px none !important;
	list-style-type: none !important;
	padding: 0px !important;
	background-image: none !important;	

	display: block !important; overflow: hidden;
	width: 204px !important;
	height: 204px !important;
	margin: 0px !important;
	float: left; 
}
.project-list .riga UL LI A { 
	color: #fff !important; 
	text-decoration: none; 
	padding: 0px;
	margin: 0px !important;
}
.project-list .item {
	width: 204px; height: 204px;
	overflow: hidden;
	position: relative;	
	display: none;
	cursor: pointer;
}
.project-list .item .img,
.project-list .item .text,
.project-list .item .opaque-cover,
.project-list .item .coverlink,
.project-list .item .loading {
	position: absolute; top:0px; left: 0px;
	width: 204px; height: 204px;
	overflow: hidden;
}
.project-list .img {
	z-index: 1;
}
.project-list .item .opaque-cover {
	background-color: #000;
	opacity: 0.8;
	filter: alpha(opacity=80);
	z-index: 2;
}
.project-list .item .text {
	display: none;
	font-size: 11px; font-family: "Myriad Pro", Arial;
	color: #fff; font-weight: normal;
	z-index: 3;
}
.project-list .item .text .progetto {
	padding: 15px 10px 0px 10px;	
}
.project-list .item .text .abstract {
	padding: 10px;	
	font-style: italic;
}
.project-list .item .text .cliente {
	position: absolute; bottom: 45px; left: 10px;	
}
.project-list .item .text .anno {
	position: absolute; bottom: 34px; left: 10px;
}

.project-list .item .coverlink {
	background-color: #ff9900;
	opacity: 0; filter: alpha(opacity=0);
	padding: 0px !important;
	z-index: 4;
}
.project-list .item .loading {
	background: url("../resources/images/ajax-loader-small.gif") no-repeat 86px 86px;
	z-index: 5;
}

a{outline:none}
#bottom .info a.nextep{;color:#fff !important;text-decoration:none}