/*

Marco Angeli {design&code}

Borgo San Domenico 36

33043 CIVIDALE DEL FRIULI - ITALY

phone:+39 329/3365411

http://www.marcoangeli.net

*/






/*   E. Meyer reset  */
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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*  clearing all together  */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}








/* ---------------------------------------------------- tipography  */









strong{
	font : 100%/1.5  Arial, Verdana, Sans-Serif;
	font-weight: bold;
}







body { 
	color : #22272a;
	font : 90%/1.5  Arial, Verdana, Sans-Serif;
	background: #111;
        overflow-x: hidden;


 }
 
 






/* ---------------------------------------------------- links  */




a{
	
	color: #3b85c2;
	text-decoration: none;
	font : Arial, Verdana, Sans-Serif;

	}
	
	
a:hover{
	
	color: #bdbcbc;
	text-decoration: none;
	}










/*---------------------------------------------------- main layout */




article, aside, dialog, figure, footer, header, hgroup, nav, section {

	display : block;
 }



 


/*------------------------------------------------------ header  */ 
 
nav h5{display:none;}


header {	

	position: relative;
	padding:1.5% 0 2% 0;
	background: #111;
	}

header.transp {	

	padding:1.5% 0 0 0;


  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

  /* IE 5-7 */
  filter: alpha(opacity=80);

  /* Netscape */
  -moz-opacity: 0.8;

  /* Safari 1.x */
  -khtml-opacity: 0.8;

  /* Good browsers */
  opacity: 0.8;

	}


#header-container {
	position:relative;
	max-width : 952px;
        margin: 0 auto;
        border-bottom:1px solid #232323;

}

header h1 { 
	position : relative;
	width: 447px;
	height: 92px;
	background : transparent url(http://www.defontisarchitetto.com/images/img/defontis_logo.png) no-repeat 0 0;
	text-indent : -9999px; 
	top:-10px;
	left:0;
/* 	border:1px solid red; */

}

header h1.home { 
	top:-10px;
	left:29px;
/* 	border:1px solid red; */

}



header h1 a{

	display:block;
	width : 447px;
	height : 92px;

}

	 
	 
header nav{
	position : absolute;
	font : 90% Arial, Verdana, Sans-Serif;
	padding:0.4% 0;
	top: 36px;
	right:0;
/* 	border:1px solid red; */
}


header nav.homeNav{
	top: 50px;
	right:30px;
}	 


header nav ul{
	padding:0;


}




header nav ul li{
	display:inline;
	margin:0 0 0 25px;
/* 	background: #000; */
	padding: 5px 0;

}

header nav ul li a { 

	color:#fff;
	font-size: 100%;
	text-decoration: none;
	padding-bottom:7px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: bold;


  }
  


header nav li a:hover{ 

	color : #787171;
	
}
	

header nav li a.selected{ 

	color : #787171;
	
}




#container {
  	width:100%;
	max-width : 952px;
    margin: 0 auto;
/* 	border:1px solid blue; */
}


#container figure {
	position: relative;
	cursor: pointer;
	width: 230px;
	height:153px;
/* 	border:1px solid red; */
	float:left;
	margin: 0;
	padding: 4px;

}

.products figcaption{
	display: none;
	position: absolute;
	right: 4px;
	bottom: 28px;	
}



.products figcaption a {
	text-decoration: none;
	font-size: 11px;
	width: 190px;
	/*height: 35px;*/
	background: white;
	  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

  /* IE 5-7 */
  filter: alpha(opacity=80);

  /* Netscape */
  -moz-opacity: 0.8;

  /* Safari 1.x */
  -khtml-opacity: 0.8;

  /* Good browsers */
  opacity: 0.8;

	padding: 10px 20px;
	display: block;
	color: #999;
}

.products figcaption a h3{
	color: #262626;
}



#container figcaption a:hover {
	text-decoration: none;
	color: #262626;
}
 









 /*------------------------------------------------------ detail  */  
 
 
#container-detail {
  	width:100%;
	max-width : 952px;
        margin: 0 auto;
/* 	border:1px solid blue; */

}
 

 
 
 
article.inner{

	margin: 0 auto 3% auto;
	padding:0;
	width: 100%;


/* 	border:1px solid blue; */


} 
 
article.inner header {

	margin:0;
	padding:0;
}  
 
article.inner header h2{

	margin:3px 0 5px 0;
	color: #fff;
	font-weight: normal;
} 


.imagery{
	position:relative;
	margin-bottom: 3%;


}


article.inner figure.intro  {
	float:left;
	margin:0;
	padding:0;
 }


 figure.info  {
	float:left;
	margin:0;
	padding:8px;
 } 
 

.album_wrapper { 
	float: right;
	width:400px;
	padding:0;
	margin:0;

	
	 }




.album_wrapper a:hover {

  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
  
}

 
article.inner p{

font-size:90%;
color: #fff;
margin-bottom: 10px;

}  
 
 
article.inner p a{

color:#787171;

}  

article.inner p a:hover{

text-decoration:underline;

}  


 
/*------------------------------------------------------ footer  */ 
 



footer {	
	border-top:1px solid #232323;
	position: relative;
	margin:3% auto 2.5% auto;
	max-width : 952px;
	padding-top: 1%;
	}


footer h1{	

	font-size: 78%;
	color:#fff;
	
	}

footer p{	

	font-size: 78%;
	color:#fff;
	
	}



footer p a{	
	color:#fff;
	
	}

footer p a:hover{	
	text-decoration: underline;
	color:#b6b5b5;
	
	}



/*media queries*/

@media screen and (max-width: 1000px) {


header, footer {	

	margin-left:5%;

	}

header.transp{

	margin-left:0;

}

#container-detail {
	margin-left:5%;
	width: auto;

}


#container {
  	/*width:80%;
        margin: 0 auto;*/
	margin-left:5%;
	width: auto;
}



.album_wrapper { 
	float: left;
	width:50%;
	
	 }


 article.inner p{
 
 padding-right: 6%;
 
 
 }

 
 header nav{
 
	right:25px;
	
}

 
 
 
}




/*  ---------------------------------------------------------- solo per iPad  */

@media only screen and (max-device-width: 1024px) {
 
 
 .album_wrapper { 
	float: right;
	width:400px;
	padding:0;
	margin:0;
	
	 }

  
#container-detail {
  	width:100%;
	max-width : 952px;
        margin: 0 auto;

}
 
  
  
}






@media screen and (max-width: 700px) {


header {	

	position: relative;
	padding:1.5% 0 5% 0;
	}


header nav{
	position : relative;
	font : 90% Arial, Verdana, Sans-Serif;
	width:60%;
	padding:0;
	top: -15px;
	left:80px;


}	 

header nav.homeNav{
	top: -15px;
	left:110px;
}	 

}