/* @override http://www.justinjoy.it/style_0.css */

body {
	font: 11px/1.2 Arial, Helvetica, Geneva, sans-serif;
	margin: 0;
	padding: 0;
  	text-align: center;
	background: url(imgs/footer-back.jpg) repeat;
  	outline: none;
  }
  
  
  
img {
	border: none;
}

img a {
	border: none;
}
/*links*/



h1, h2, h3, h4, h5, p, blockquote {
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 20px;
	padding: 5px 0;
	color: #fff;
}

h2 {
	font-size: 18px;
	padding: 4px 0;
}

h3 {
	font-size: 16px;
	padding: 3px 0;
}

h4 {
	font-size: 14px;
	padding: 2px 0;
}

p {
	padding: 5px 0;
}

a img {
	border: none;
}

#page {
	width: 960px;
	height: 103px;
	text-align: right;
	margin: 0 auto;
	padding: 0;
}


.gabbia {
	width: 950px;
	margin: 0 auto;

}

body#home #header, body#azienda #header, body#collezioni #header {
	height: 123px;
	margin: 0 auto;
		padding: 0;
	background: url(imgs/header-back.jpg) repeat-x 0 bottom;
}

body#azienda #contenuti h1 {
	font-size: 2.1em;
	font-weight: normal;
	font-style: normal;
	line-height: 1.4em;
	margin-top: 20px;
}


body#azienda #contenuti h2 {
	font-weight: normal;
	font-style: normal;
	line-height: 1.4em;
	font-size: 1.3em;
	color: #7e7e7e;
	padding: 0;
}









body#prodotti #header {
	height: 123px;
	margin: 0 auto;
		padding: 0;
	background: url(imgs/header-back.jpg) repeat-x 0 bottom;
}


body#prodotti #contenuti h1 {
	font-size: 2.1em;
	font-weight: normal;
	font-style: normal;
	line-height: 1.4em;
	margin-top: 100px;
}




div#logo { 
  position: relative; top: 23px; left: 0px;
  margin: 0; padding: 0;
  width: 446px; 
  height: 62px; 
  background: url(imgs/justinjoy-head-logo.jpg) no-repeat;
  float: left;
}



div#logo h1, #logo a {
	   display: block;
  	width: 446px; 
     height: 62px;
    text-indent: -9999px;
    background: none;
    text-decoration: none;
    padding: 0;
    margin: 0;

}



/*barra navigazione istituzionale*/

ul#barrahead {
	list-style-type: none;
	height: 20px;
	text-align: right;
	padding: 0;
	float: right;
	margin: 20px 0 0 0;
}


ul#barrahead li{
	float: left;
	padding-right: 15px;

	font-size: 1em;
	line-height: 2em;
}


ul#barrahead li a, ul#barrahead li a:link, ul#barrahead li a:visited{
	text-decoration: none;
	color: #959595;
}

ul#barrahead li a:hover, ul#barrahead li a:active{
	text-decoration: none;
	color: #fff;
}


li#idcontatti a, li#idcontatti a:link, li#idcontatti a:visited{
	text-decoration: none;
	color: #f00 !important;
}

li#idcontatti a:hover, li#idcontatti a:active{
	text-decoration: none;
	color: #fff !important;
}

ul#barrahead li#selected a {
	color: #fff;
	font-weight: bold;
}


/*contenuti*/




#contenuti {
	overflow: auto;
	text-align: left;
	margin: 0 auto;
	padding: 10px 0 30px 0;
	background: url(imgs/body-just-back.jpg) repeat left top;
}



#contenuti h1 {
	font-size: 2.5em;
	font-weight: normal;
	font-style: normal;
	line-height: 1.4em;
	margin-top: 80px;
}

#contenuti h2 {
	font-weight: normal;
	font-style: normal;
	line-height: 1.4em;
	font-size: 1.3em;
	color: #7e7e7e;
}


.duecolonne {
	float: left;
	width: 470px;
	color: #fff;
	line-height: 1.5em;
	font-size: 1.3em;
	height: 470px;
}

.colonnasx {
	color: #dcdcdc;
	font-size: 1.3em;
	font-style: italic;
	line-height: 1.4em;
	text-align: left;
	float: left;
	width: 470px;
}

.colonnasx p{
	margin-top: 20px;
	padding-right: 10px;
}

p.arianna {
	margin: 0;
	color: #7e7e7e;
	font-size: .85em;
	font-weight: normal;
	font-style: normal;
	padding: 0;
}

p.arianna strong {
	color: #fff;
}


.colonnadx {
	color: #bdbdbd;
	font-size: 1em;
	font-style: italic;
	line-height: 1.3em;
	text-align: left;
	float: right;
	
}

.colonnadx p{
	padding: 0 0 0 40px;

}


.descrizione {
	margin: 0 0 0 10px;
	color: #d4d4d4;
	float: left;
	width: 615px;
}


.immaginegrande {
	text-align: right;

}




.pulsantiera {
	height: 83px;
	text-align: center;
	width: 950px;
	margin: 20px auto;
	padding: 0;
}


ul.pulsantiera li {
	list-style-type: none;

}

.pulsanti {
	float: left;
	margin-right: 3px;
	padding: 10px;
	text-align: left;
	display: block;
}

a .pulsanti h3, .pulsanti h3{
	color: #fff;
	font-size: 1.3em;
	margin: 0; padding: 0;
}

a .pulsanti p, .pulsanti p {
	color: #a3a3a3;
	font-size: 1em;
	margin: 0; 
	padding: 5px 0 0 0;
}

ul.pulsantiera a{
	text-decoration: none;
}







body#collezioni #contenuti {
	height: 590px;
	text-align: left;
	margin: 0 auto;
	padding-top: 10px;
	background: url(imgs/collezioni-back.jpg) repeat left top;
}

body#collezioni #contenuti h1 {
	margin-top: 10px;
	padding-left: 10px;
	font-weight: normal;
	font-style: normal;
	color: #fff;
}




body#collezioni #contenuti h3 {
	font-weight: normal;
	font-style: normal;
	line-height: 1.4em;
	font-size: 1.6em;
	color: #7e7e7e;
	padding: 0 0 0 10px;
}



.collection {
	width: 450px;
	font-size: 1.3em;
	padding: 0 20px 20px 10px;
	float: left;
}

.collection img {
	padding: 5px 0 0 0;
	border: 0;
}

.collection h2 {
	margin-top: 30px;
	padding: 2px 0 2px 10px;
	font-weight: normal;
	font-style: normal;
	text-align: left;
	color: #fff;
	
}

.collection p{
	margin-top: 10px;
	padding: 0 10px 0 10px;
	text-align: left;
	color: #828282;
	font-style: italic;
	font-size: .9em;
}

#collbrilla h2 {
	display: block;
	background-color: #9c0c00;
	color: #fff;
	font-size: 1.2em;

}

#colltraspa h2 {
	display: block;
	background-color: #800800;
	color: #fff;
	font-size: 1.2em;
}

#collmetal h2 {
	display: block;
	background-color: #680400;
	color: #fff;
	font-size: 1.2em;
}

#collpietre h2 {
	display: block;
	background-color: #4d0200;
	color: #fff;
	font-size: 1.2em;
}

#colltraspa, #collpietre {
	padding-right: 0;
}




/*stepcarousel*/

.stepcarousel{
position: relative; 
border: none;
overflow: scroll;
width: 475px; height: 430px; 
margin-bottom: 20px;
}

.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}


.stepcarousel .panel{
text-align: left;
float: left; 
overflow: hidden; 
margin: 0; 
padding: 0;
width: 475px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */

}


.stepcarousel p {
	text-align:  right;
}

/*innerfade home*/

ul#portfolio{
position: relative; 
border: none;
width: 475px; height: 430px; 
text-align: right;
list-style-type: none;
margin: 0 auto;
padding: 0;
}

li .paneldissolv{

float: left; 
overflow: hidden; 
margin: 0 auto; 
width: 475px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}


#portfolio a, #portfolio a:link, #portfolio a:visited {
	background-color: #aeaeae;
	color: #000;
	text-decoration: none;
	display: block;
	padding: 1px 5px;
	width: 13em;
	margin-top: 2px;
	line-height: 1.3em;
}
#portfolio a:hover, #portfolio a:Active {
	background-color: #494949;
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 1px 5px;
	line-height: 1.3em;
}


/*innerfade interne*/

ul#portfolioint{
position: relative; 
border: none;
width: 950px; height: 430px; 
text-align: right;
list-style-type: none;
margin: 0 auto;
padding: 0;
}

li .paneldissolvint{

float: left; 
overflow: hidden; 
margin: 0 0 20px 0; 
width: 950px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}


#portfolioint a, #portfolioint a:link, #portfolioint a:visited {
	background-color: #aeaeae;
	color: #000;
	text-decoration: none;
	display: block;
	padding: 1px 5px;
	width: 13em;
	margin-top: 2px;
	line-height: 1.3em;
}
#portfolioint a:hover, #portfolioint a:Active {
	background-color: #494949;
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 1px 5px;
	line-height: 1.3em;
}






.handle {
	float: left;
	margin-right: 3px;
	padding: 10px;
	text-align: left;
}

.handle h3{
	color: #fff;
	font-size: 1.3em;
	margin: 0; padding: 0;
}

.handle p{
	color: #a3a3a3;
	font-size: 1em;
	margin: 0; 
	padding: 5px 0 0 0;
}


#brillanti {
	width: 215px;height: 63px;
	background: url(imgs/brillanti.jpg) repeat-x;

}

a #brillanti , a #brillanti:link, a #brillanti:visited {
	background: url(imgs/brillanti.jpg) repeat-x;
	text-decoration: none;
	display: block;
}

a #brillanti:hover, a #brillanti:active {
	background: url(imgs/brillanti-over.jpg) repeat-x;
	text-decoration: none;
	display: block;
}

a li#brillanti.pulsanti.minimi, a li#brillanti.pulsanti.minimi:link, a li#brillanti.pulsanti.minimi:visited {
		background: url(imgs/brillanti-down.jpg) repeat-x;
			display: block;
}

a li#brillanti.pulsanti.minimi:hover, a li#brillanti.pulsanti.minimi:active {
		background: url(imgs/brillanti-over.jpg) repeat-x;
		display: block;
}

#trasparenze{
	width: 215px;height: 63px;
	background: url(imgs/trasparenze.jpg) repeat-x;
}

a #trasparenze , a #trasparenze:link, a #trasparenze:visited {
	background: url(imgs/trasparenze.jpg) repeat-x;
	text-decoration: none;
}

a #trasparenze:hover, a #trasparenze:active {
	background: url(imgs/trasparenze-over.jpg) repeat-x;
	text-decoration: none;
}

a li#trasparenze.pulsanti.minimi, a li#trasparenze.pulsanti.minimi:link, a li#trasparenze.pulsanti.minimi:visited {
		background: url(imgs/trasparenze-down.jpg) repeat-x;
}

a li#trasparenze.pulsanti.minimi:hover, a li#trasparenze.pulsanti.minimi:active {
		background: url(imgs/trasparenze-over.jpg) repeat-x;
}



#metalli{
	width: 215px;height: 63px;
	background: url(imgs/metalli.jpg) repeat-x;
}

a #metalli , a #metalli:link, a #metalli:visited {
	background: url(imgs/metalli.jpg) repeat-x;
	text-decoration: none;
}

a #metalli:hover, a #metalli:active {
	background: url(imgs/trasparenze-over.jpg) repeat-x;
	text-decoration: none;
}

a li#metalli.pulsanti.minimi, a li#metalli.pulsanti.minimi:link, a li#metalli.pulsanti.minimi:visited {
		background: url(imgs/metalli-down.jpg) repeat-x;
}

a li#metalli.pulsanti.minimi:hover, a li#metalli.pulsanti.minimi:active {
		background: url(imgs/metalli-over.jpg) repeat-x;
}





#pietre{
	width: 215px;height: 63px;
	background: url(imgs/pietre-dure.jpg) repeat-x;
	margin: 0;
}

a #pietre , a #pietre:link, a #pietre:visited {
	background: url(imgs/pietre-dure.jpg) repeat-x;
	text-decoration: none;
}

a #pietre:hover, a #pietre:active {
	background: url(imgs/pietre-dure-over.jpg) repeat-x;
	text-decoration: none;
}

a li#pietre.pulsanti.minimi, a li#pietre.pulsanti.minimi:link, a li#pietre.pulsanti.minimi:visited {
		background: url(imgs/pietre-dure-down.jpg) repeat-x;
}

a li#pietre.pulsanti.minimi:hover, a li#pietre.pulsanti.minimi:active {
		background: url(imgs/pietre-dure-over.jpg) repeat-x;
}

li#brillanti.pulsanti.minimi h3, li#trasparenze.pulsanti.minimi h3, li#metalli.pulsanti.minimi h3, li#pietre.pulsanti.minimi h3{
	color: #666;
}

li#brillanti.pulsanti.minimi p, li#trasparenze.pulsanti.minimi p, li#metalli.pulsanti.minimi p, li#pietre.pulsanti.minimi p{
	color: #505050;
}



.minimi {
	width: 140px !important;
}

.massimi {
	width: 440px !important;
}


ul.menugioielli{
	list-style-type: none;
	margin-top: 10px;
	text-align: left;
	padding: 0;
}

ul.menugioielli li{
	float: left;
	padding-right: 12px;
	
}

ul.menugioielli li a, ul.menugioielli li a:active, ul.menugioielli li a:visited{
	color: #a3a3a3;
	font-weight: bold;
}

ul.menugioielli li a:hover, ul.menugioielli li a:active{
	color: #fff;
	font-weight: bold;
}

ul.menugioielli li.selected {
	color: #fff;
}






.sm {
	list-style:none; 
	width:459px; 
	height:100px; 
	display:block; 
	overflow:hidden
}


.sm li {
	float:left; 
	display:inline; 
	overflow:hidden
}




/* horizontal accordion */

.pulsantiera .handle {
	float: left;


	background:  url(../images/blade_grey.png) no-repeat;


}
.pulsantiera .handleOver{	
	background: url(../images/blade_grey_sel.png) no-repeat;
}
.pulsantiera .handleSelected{
	
	background: url(../images/blade_grey_sel.png) no-repeat;
}



/* hide container until all is ready */
.test, .test2,.test3,.test4{
	display: none;
}
/*Main Container*/
.container {
	width:100%;	
}
.container ul{
	list-style-type: none;
	margin: 0;
	padding:0;	
}
.container li{
	display: inline;
	margin: 0px;
	padding:0px;
}
/*Content Container*/
.contentContainer {
	padding-left: 0px;	
	float: left;
	width:0px;
	height: 310px;	
	overflow:hidden;
}
.contentWrapper{	
}
.contentInnerWrapper{
	text-align: justify;
	padding: 10px;
}
/* Handle*/

.handleOver{	
	background: url(../images/blade_sel.png) no-repeat;
}
.handleSelected{	
	background: url(../images/blade_sel.png) no-repeat;
}



/* gallery tutti i prodotti */

.gallery {
	margin: 30px auto;
}

.gallery h3 {
	color: #fff;
	font-size: 1.6em;
	line-height: 2em;
	margin-top: 50px;
}


.prodgallery {
	width: 223px;
	border: 1px solid #2d2d2d;
	background-color: #000;
	float: left;
	margin: 10px 15px 10px 0;
}

.prodgallery a, .prodgallery a:link, .prodgallery a:visited {
	background-image: url(imgs/trasparente.png);
}

.prodgallery a:hover, .prodgallery a:active {
	
}

.ultimo {
	margin: 10px 0 10px 0;
}

.descrprod {
	padding: 4px 10px;
	background-color: #262626;
	display: block;
	height: 120px;
}

.prodgallery h4 {
	color: #fff;
}

.descrprod p {
	color: #8e8e8e;
	font-size: 1em;
	font-style: italic;
	padding: 2px 0;
}
span.art {
	color: #fff;
	font-style: normal;
	font-weight: bold;
	margin-right: 60px;
}
span.prezzo {
	color: #f70;
	font-size: 1.3em;
	text-align: right;
	font-style: normal;
	font-weight: bold;
}



/* footer */




.clear {
	clear: both;
}

.linea {
	height: 3px;
	width: 450px;
	border-top: 2px solid #373737;
	margin-bottom: 10px;
}

#prefooter {
	background: url(imgs/pre-footer-back.jpg) repeat-x left bottom;
	height: 18px;

}

#footer {
	text-align: center;
	font-size: .8em;
	padding-top: 30px;
	background: url(imgs/footer-back.jpg) repeat;
	overflow: auto;
}

#footer h4 {
	font-weight: normal;
	font-style: normal;
	font-size: 1.5em;
	color: #fff;
	line-height: 1.5em;
}


#footer p {
	color: #787878;
	padding: 0;
	line-height: 1.4em;
	font-size: 1.2em;
	margin: 0px 0 0 1px;
}

#colfootersx {
	float: left;
}

#footer .colonne {
	float: left;
	text-align: left;
}

.indirizzo {
	width: 235px;
}
.colonnafooterdx {
	color: #bdbdbd;
	font-size: 1em;
	font-style: italic;
	line-height: 1.3em;
	float: right;
	margin-left: 500px;
}

.colonnafooterdx p{
	padding: 0 0 0 40px;
}

#formcontatto {
	margin-bottom: 30px;
	
}

div.colonne.indirizzo, div.colonne.contatti {
	font-size: 1.2em;
	margin: 0;
}

input {
	margin-bottom: 7px;
}
#formcontatto h3 {
	margin-bottom: 10px;
}



#footer p.testoinfo {
	text-align: left !important;
	font-size: 1.5em;
	color: #fff;
	line-height: 1.5em;
	font-weight: normal;
	font-style: normal;
	width: 450px;
	margin-bottom: 20px;
}
#footer span.rivenditori {
	color: #8d7118;
	text-align: left;
	
	line-height: 3em;
}



#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }