/*
Theme Name: Metlen
Author: Martín Celis
Tags: mantle color, variable width, two columns, widgets

*/

* {margin:0; padding:0; font-family:Georgia, "Times New Roman", Times, serif;}


body {
	
	margin:0;
	background:#F9F9F9;

	font-size:80%;
	font-weight:normal;	
	color:#333;
	line-height:180%;	
	background:url(../graphics/bg.jpg);

}


a {color:#A9A9A9;}


.hidden {
	
display:none;

}


/*

-------------------------
Layout
--------------------------

*/
	
#wrapper {
	width:990px;
	height:700px; 
	background:url() bottom no-repeat;
	float:left;

	}

#container {
	width:750px;
	height:auto;
	padding:40px 0 0 40px;
	
	}

#logo{ 
	margin:12px 0px 40px 20px; 
	font-size:18px; 
	}

#leftColumn{
	float:left; 
	width: 450px; 
	height:590px; 
	z-index:1;
	}

#rightColumn{
	float:right; 
	width:250px; 
	height:620px; 
	padding:10px; 
	}

#screenshot{
	position:absolute;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	z-index:10;
	}
	


#featured {

width:800px;
float:left; 
margin:15px 0 0 -160px;


}

	
	
#featured h3 {

color:#F4F1E7;
color:#999;
text-align:center;
margin-top:65px;
font-weight:100;

	
}
	



div.landing-window{
	position: relative;
	width: 255px;
	height: 169px;	
	background-color:#111;
	float:left;
	}


div.landing-image {
	position: relative;
	width: 255px;
	height: 169px;	
	background-color: black;
	}

div.landing-caption {
	position: absolute;
	top: 24px;
	left: 0;
	padding: 0 20% 2px 3px; 
	height: 16px;	
	background-color:#222;
	display: none;
	font-size:13px;
	color:#000;
	color:#FFF;
	z-index:999;
	font-style:italic;
	}
	

/*

-------------------------
Main Accordion
--------------------------

*/
	
#accordion { 
	width:425px; 
	margin:0 0 0 21px; 
	border:none; 
	float:left; 
	outline:none;
	}

#accordion h2, h2.home {
	margin:0px 0 6px 0; 
	color:#A9A9A9; 
	font-weight:normal; 
	cursor:pointer; 
	outline:none; 

	border-bottom: 1px dotted #ccc;
	width:200px;
	font: 14px "Times New Roman", Times, serif;
	letter-spacing: 0.2em;
	margin: 15px 0 2px 0;
	padding-bottom: 2px;
	
	
	}	

h2.home {
	
	margin:5px 0 0 21px; 	
	
	
}


h2.selected, h2.home:hover {
	
	color:#000; 
	
}

.acc-head {
	margin:7px 0 2px 0; 
	outline:none; 
	clear:both; 
	float:left;
	}

.acc-head h3 { 
	cursor:pointer; 
	font-size:13px; 	
	font-weight:normal; 
	font-style:italic; 
	color:#A9A9A9;  
	display:inline; 
	}

.acc-head h3:hover, 
#accordion h2:hover { color:#000; }

.acc-head h3, 
#nest ul{ padding-left:18px;}

.subnav {
	padding:3px;
	margin:3px 0 3px 15px;
	width:350px;
	height:19px;
	background-color:#E3E3DA;
	background-color:#E9E9DD;
	}

.subnav a{ 
	margin:0 6px 0 2px;
	display:inline; 
	line-height:0;
	font-size:12px;
	color:#8D8667;
	font-style:normal; 
	text-decoration:none;

	

	}
	
	
	
.ui-state-active h3,
#accordion .ui-state-active {color:#000; }

.text-content {
	width:425px; 
	margin:0; 
	clear:both; 
	float:left;
	
	
	}

p.contact {
	color:#A9A9A9;
	
	}

a.contact {
	color:#000;
	text-decoration:none;
	}
	
a:hover.contact {
	color:#A9A9A9;
	text-decoration:none;
	}


/*

-------------------------
Nested Accordion
--------------------------

*/
	

#nest {margin:0; height:440px; position:relative;}

#nest li {display:inline;}

#nest a {font-style:italic; text-decoration:none;}

#nest a:hover { color:#333;}

a.selected { color:#333;}

a.activeSlide {color:#000;}

.title, .sub {display:inline;}

.hidden { height:1px; display:none; }	

.nested-list { clear:both; float:left;}


	
/*

-------------------------
Slideshow
--------------------------

*/


#slideshow, a {cursor:pointer; cursor: hand; }

.pics img { padding: 12px;  background-color: #fff; top:0; left:0}


/*

-------------------------
Piece Info
--------------------------

*/


#description-wrap {margin-top:15px; width: 290px; float:left; clear:both;}

#description { width:220px; height: 0px; margin:21px 0 4px 50px; background-color:#333;padding:11px 11px 4px 11px; line-height:160%; 
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	 float:left; clear:both;
	position:absolute;
	 top:267px;}
	
#description p{font-size:12px; color:#CCC; padding:0px 0px 0px 0px;  	}
#description h4{font-family:Arial, Helvetica, sans-serif;  color:#fff; font-weight:100;  font-size:15px;}

#prev { 
float:left;
margin-left:200px;
	width: 45px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev.png) no-repeat 0 0;
	opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	 position:absolute;
	 top:408px;}



#next { 
float:right;
    width: 45px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next.png) no-repeat 0 0;
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50); 
	position:absolute;
	top:408px;
	left:250px;}

#prev:hover, #next:hover {
    background-position: 0 -25px;}


/*

-------------------------
Footer
--------------------------

*/

#footer {clear:both; margin:53px 0px 5px 21px;  color:#A9A9A9;}
#footer p{font-size:12px; }
#footer a {text-decoration:none; color:#A9A9A9; font-style:italic;}
#footer a:hover {color:#333;}