/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}








body {
	width: 100%;
	margin: 0;
	
	text-align: center;

	font-size: 16px;
	font-family: Georgia, Times, serif;
}

a {outline: none; /*removes Firefox outlines*/ text-decoration: none;}

em {
	/*line-height: 1.55em;*/
	font-style: italic;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}



#container {
	margin: 0 auto;
	text-align: left;
	/*border: 1px solid #9f9f9f;*/
}

#header {
	width: 100%;
	height: 203px;
	text-align: center;
	background: url(images/bg-tan_textured.jpg) repeat-x;
}

#header #masthead {
	position: relative;
	margin: 0 auto;
	width: 1000px;
	height: 203px;
	text-align: center;
	text-indent: -6666em;
	background: url(images/masthead_script.jpg) no-repeat top center;
}

/*#header #masthead #videothumb {
	position: absolute;
	top: 35px;
	
	right: 90px;
	width: 180px;
	height: 135px;
	
	text-indent: 0;
		
	z-index: 100;
	background: url(images/video-thumbnail.png) no-repeat 0 0;
	text-shadow: #fff 1px 1px 0;
}*/


#header #masthead #videothumb {
	/*opacity: 0;*/
	position: absolute;
	top: 35px;
	/*right: 0px;
	left: 0px;*/
	
	width: 180px;
	height: 135px;
	
	text-indent: 0;
		
	z-index: 100;
	text-shadow: #fff 1px 1px 0;
}

#header #masthead #videothumb.left {left: 0px;}
#header #masthead #videothumb.right {right: 0px;}


/* 2010.10.07(ar) - No longer necessary since I've switch to including this image as an <img> and not via a background-image attached to <span id="thumb"></span>*/
#header #masthead #videothumb #thumb {
	width: 180px;
	height: 135px;
	background: url(images/video_handmade-thumbnail.png) no-repeat 0 0;
	/*background: url(images/video_rhythm-thumbnail.png) no-repeat 0 0;*/
}

#header #masthead #videothumb.left.rhythm #thumb { /* TEMP */
	background: url(images/video_rhythm-thumbnail.png) no-repeat 0 0;
}


#header #masthead #videothumb a {
	width: 100%;
	height: 100%;
	color: #888;
}

/*#header #masthead #videothumb a:active #thumb {
	background-position: 0px 1px;
}*/

/*#header #masthead #videothumb a:hover strong {
	text-decoration: underline;
}*/

#header #masthead #videothumb span {
	display: block;
	position: absolute;
	left: 0;
	bottom: -2px;
	text-align: center;
	width: 180px;
	font-size: 12px;
}

#header #masthead #videothumb span strong {
	display: block;
	font-size: 14px;
	color: black;
}

#header #masthead #videothumb span em {
	display: block;
	position: relative;
	top: 1px;
	color: #b1a7ac;
	font-size: 80%;
	font-style: italic;
}







#matte {
	position: relative;
	width: 100%;
	/*width: 1000px;*/ /*Necessary for iPhone*/
	height: 544px;
	
	margin: 0;
	
	overflow: hidden; /*THIS Fixed the IE6 Bug with the Navigation intermitantly loading/not loading and then reapearing when the browser windows width is changed.*/
	
	text-align: center;
	
	background: url(images/gallery-bg_matte.gif) repeat-x;
	/*background: url(horiz_measure.gif) repeat;*/
}


#matte #shoeslideshow {
	position: relative;
	margin: 0 auto;
	
	width: 700px;
	height: 544px;
	
	text-align: left;
	
	/*background-color: lightblue;*/
}

#matte #shoeslideshow img {
	margin: 0 auto;
	/*margin-top: 38px;*/
	margin-top: 40px;
		
	/*width: 700px;
	height: 466px;*/
}

/*Men/Women Style Indicator*/

#shoeslideshow p span {

	position: absolute;
	top: 250px;
	right: -90px;
	right: -110px; /*To center align with new "Buy Shoes" button*/
	right: -113px; /*To center align with new "Store" button*/
	padding: 4px;
	font-style: italic;
	font-size: 11px;
	color: #9f9c91;
	
	/*text-shadow: #c09ba9 1px 1px 0;*/
	
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	
	/*https://developer.mozilla.org/En/CSS/-moz-box-shadow*/
	
}

#shoeslideshow p.mens span {
	color: #bebaad;
	border: 1px solid #dedbd3;
}


#shoeslideshow p.womens span {
	color: #c09ba9;
	right: -121px;
	/*background-color: #edbfd0;
	background-color: white;*/
	border: 1px solid #e4d4da;
}







#matte #controller {

	display: none;
	
	position: absolute;
	margin: 0 auto;
	
	width: 100%;
	height: 45px;
	
	left: 0;
	bottom: 0;
	
	text-align: center;
	
	/*background-color: lightcyan;*/
	z-index: 100;
}



#matte #controller #buttons {
	margin: 0 auto;
	width: 111px; /*25+25+41+10+10*/
	
	/*width: 124px; temp for IE*/
	
	height: 45px;
	/*background-color: lightcyan;*/
}

#matte #controller a * {
	border: 0; /*for IE 6*/
}

#matte #controller a#play {

	display: none;
	width: 41px;
	height: 41px;
	
	margin-left: 10px;
	margin-right: 10px;
	
	float: left;
}

#matte #controller a#play:active {
	padding-top: 1px;
}

#matte #controller a#pause {
	width: 41px;
	height: 41px;
	margin-left: 10px;
	margin-right: 10px;
	
	float: left;
}

#matte #controller a#pause:active {
	padding-top: 1px;
	padding-left: 2px;
	margin-left: 8px;
}


#matte #controller a#next {
	display: block;
	width: 25px;
	height: 41px;
	
	float: left;
}

#matte #controller a#next:active {
	padding-top: 1px;
}


#matte #controller a#prev {
	display: block;
	width: 25px;
	height: 41px;
	
	float: left;
}

#matte #controller a#prev:active {
	padding-top: 1px;
}




#nav {
	margin: 0 auto;
	position: relative;
	width: 960px;
	height: 38px;
	border-bottom: 1px solid #655c5e;
	/*clear: both;*/

	background: url(images/nav.gif) no-repeat 0px -114px;
	
	z-index: 99999;
	/*background-color: red;*/
}

#nav ul {
	position: relative;
	padding: 0;
	margin: 0;
	height: 38px;
	list-style: none inside;
}

#nav li {/*height: 38px;*/ float: left;}

#nav li a {
	display: block;
	height: 38px;
	margin-right: 27px;
	text-indent: -6666em;
	background: url(images/nav.gif) no-repeat;
}

#nav li.ui-tabs-selected a {border-bottom: 1px dashed #8c8083;}

#nav li a#nav-contact {width: 82px; background-position: 0px 0;}
#nav li a#nav-contact:hover {background-position: 0px -38px;}
#nav li.ui-tabs-selected a#nav-contact {background-position: 0px -76px;}

#nav li a#nav-press {width: 53px; background-position: -109px 0;}
#nav li a#nav-press:hover {background-position: -109px -38px;}
#nav li.ui-tabs-selected a#nav-press {background-position: -109px -76px; }

#nav li a#nav-stockist {width: 85px; background-position: -189px 0;}
#nav li a#nav-stockist:hover {background-position: -189px -38px;}
#nav li.ui-tabs-selected a#nav-stockist {background-position: -189px -76px;}



/*For jQuery UI Tabs*/
.ui-tabs-hide {display: none;}




#nav a#storebutton {
	display: block;
	position: absolute;
	top: 0px;
	/*right: 5px;*/ /*"Store" button*/
	right: 5px;
	height: 100%;
	/*width: 84px;*/ /*"Store" button*/
	width: 61px;

	text-indent: -6666em;
	background: url(images/nav.gif) no-repeat -839px 0px;
}

#nav a#storebutton:hover {background-position: -839px -38px;}
#nav a#storebutton:active {background-position: -839px -76px;}





















#contentcontainer {
	position: relative;
	/*width: 1000px;*/ /*Necessary for iPhone*/
	background-color: #1b1315;
	background: url(images/contentcontainer-bg.jpg) repeat;
	text-align: left;
	clear: both;
	z-index: 1;
}

#contentcontainer #shadowcontainer {
	position: relative;
	margin: 0 auto;
	width: 1000px;
	z-index: -6666;
}

#contentcontainer #shadowcontainer #shadow {
	position: absolute;
	width: 1000px;
	height: 553px;
	text-align: center;
	margin: -40px auto 0;
	background: url(images/contentcontainer-shadow_2010.png) no-repeat center top;
	
/*note 2008.03.04: This needs to be refined, so if the page content is shorter then the shadow height, the shadow cuts and don't make the page longer then it has to be (ie: white under the "est. 1993"), And when the page is longer, the full shadow shows.*/
	
}




body #pagecontent {
	width: 960px;
	min-height: 380px;
	height: auto;
	margin: 0 auto;
	clear: both;
}


hr {
	height: 0px;
	border: none 0;
	/*border-top: 1px solid cyan;*/
	border-bottom: 1px solid gray;
}






/* @group CONTACT */

#contact {
	padding: 70px 0;
}

#contact .methods {
	margin: 0 auto;
	margin-bottom: 60px;
		
	height: 30px;
	width: 457px;
	
	color: white;
	text-indent: -6666px;
}


#contact .methods .phone {

	display: block;
	float: left;
	width: 192px;
	height: 30px;
	background: url(images/contact-method_phone_number.gif) no-repeat;
}


#contact .methods .email {
	display: block;
	float: left;
	width: 265px;
	height: 30px;
	/*background: url(images/contact-method_email.gif) no-repeat;*/
}

#contact .methods .email a {
	display: block;
	width: 100%;
	height: 100%;
	background: url(images/contact-method_email.gif) no-repeat;	
}

#contact .methods .email a:hover {
	background: url(images/contact-method_email_on.gif) no-repeat;
}

#contact p.message {
	margin: 0 auto;
	width: 550px;
	color: #9c9295;
	line-height: 1.7em;
	text-align: center;
}



/*
For 2010.03.06 Update:
- New quote.
*/
#contact p.quote {
	height: 75px;
	width: 604px;
	margin: 0 auto;
	margin-top: 60px;

	text-indent: -6666em;
	
	background:url(images/contact-quote-2010.03.06.gif) no-repeat;
	color: #aa6034;
}



#contact p.esqhouseaddr {
	display: block;
	height: 93px;
	width: 457px;
	margin: 0 auto;
	margin-top: 60px;
	
	text-indent: -6666em;
	
	background: url(images/contact-esq_house_addr.png) no-repeat;
}

#contact p.esqhouseaddr a {
	display: block;
	width: 100%;
	height: 100%;
}

/* @end */



















/* @group PRESS */

/*Special extra "space" for the "Press" page. Should be standardized for all pages.*/
#press {padding-bottom: 70px;}


/*"Below are some of the..."*/
#press p.description {
	margin-top: 85px;
	margin-bottom: 45px;
	text-align: center;
	font-style: italic;
	font-size: 17px;
	color: #c1b7ba;
	text-shadow: #000 1px 1px 2px;
}

/*"Click an image to enlarge"*/
#press p.description .instruction {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #766c6d;
}


/*"Print" & "Online*/
#press .magazinegroup h3 {
	position: relative;
	margin-top: 30px;
	margin-bottom: 15px;
	padding: 3px 0;

	color: #655c5e;
	border-bottom: 1px solid #4b4946;

	font-size: 12px;
	font-weight: bold;	
	text-transform: uppercase;
}

#press .magazinegroup h3 span {
	position: absolute;
	top: 0px;
	margin-left: 10px;
	padding: 0 8px;
	background-color: #231719;
}







/*Thumbnail container*/

/*
- 960.gs Supplant.
- This doesn't exactly follow the 960 grid.
- Based on "grid_12" container but the divisions aren't exact in order to maximize the thumbnail size vs how many fit into each row.
*/
#press .magazinegroup a {
	display: block;
	position: relative;
	float: left;
	
	width: 100px;
	height: 100px; /*This shouldn't work right. It should exclude the span.meta from :hover. But it doesn't.*/
	
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 50px;
	
	font: 9px Helvetica, Arial, Helvetica, Geneva, sans-serif;

	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
}


#press .magazinegroup a.first	{margin-left: 0;}
#press .magazinegroup a.last	{margin-right: 0;}

#press .magazinegroup a:hover {
	-webkit-box-shadow: 0 0 20px #9090a1;
	-moz-box-shadow: 0 0 20px #9090a1;
	box-shadow: 0 0 20px #9090a1;
}

#press .magazinegroup a:active {
	-webkit-box-shadow: 0 0 30px #ababbf;
	-moz-box-shadow: 0 0 30px #ababbf;
	box-shadow: 0 0 30px #ababbf;
}


/*Thumbnail <img>*/
/*was: #press .magazinegroup a .img-crop*/
#press .magazinegroup a img {
	position: relative;
	display: block;

	width: 100px;
	height: 100px;

	/*So 1px border can be added without effecting layout*/
	margin-left: -1px;
	margin-right: -1px;	

	border: 1px solid #99958f;
}




/*"New" Flag*/
#press .magazinegroup a.new strong {
	position: absolute;
	top: 0px;
	left: 3px;
	
	padding: 1px;
	
	text-align: center;
	color: black;
	font-weight: bold;

	border-bottom: 2px solid #726c6d;
	border-right: 2px solid #5a5556;

	background-color: #c1b7ba;
}

/*Title/Date*/
#press .magazinegroup a span.meta {
	display: block;
	margin-top: 3px;

	/*color: #8A7E80;*/
	color: #7c7173;
	text-transform: uppercase;
	font-size: 1.2em;
	font-weight: bold;
}

/*Date only*/
#press .magazinegroup a span.meta em {
	display: block;
	
	color: #655C5E;
	font-size: 80%;
	font-style: normal;
}

/* @end */












/* @group STOCKIST */

#stockist {padding: 40px 0 80px 0;}

/*"Below are some of the retailers wher you can find Esquivel Shoes.*/ 
#stockist .description {
	margin: 45px 0 45px 0;
	text-align: center;
	font-style: italic;
	font-size: 17px;
	color: #c1b7ba;
	text-shadow: #000 1px 1px 2px;
}

#stockist .description .instruction {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #766c6d;
}







/*Featured Retailer*/
#stockist div.featured-retailer {
	position: relative;
	width: 960px;
	height: 50px;
	margin: 80px 0;
	
	text-indent: -666em;
	direction: ltr;
	overflow: hidden;
	
	background-image: url(images/stockist-featured-Net-A-Porter.png);
	
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
	box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

#stockist div.featured-retailer a {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 58px;
	height: 27px;

	background: url(images/stockist-featured-Net-A-Porter.png) no-repeat -890px -55px;
}

#stockist div.featured-retailer a:hover {background-position: -890px -83px;}
#stockist div.featured-retailer a:active {background-position: -890px -111px;}










#stockist table {
	width: 100%;
	font-size: 12px;
	/*color: #7d7477;*/
	color: #8c8185;
}

#stockist th {
	padding: 8px;
	padding-bottom: 5px;

	color: #d8cdd0;
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;

	border-bottom: 1px solid #4b4446;
}

#stockist tbody {
	font-family: Helvetica, sans-serif;
}

#stockist tr td {
	padding: 8px;
	/*padding-left: 0;*/
		
	border-bottom: 1px dotted #353432;
	/*border-bottom: 1px solid #2c2b2a;*/
	
	/*-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;*/
}


#stockist tr:nth-child(odd) td {background-color: #2b2224;}
/*Same as above, just for IE6,7,8. Can't be chained together with a comma beacuse that screwed up IE as well.*/
#stockist tr.striped td {background-color: #2b2224;}




#stockist tbody .address a,
#stockist tbody .phone,
#stockist tbody .website a,
#stockist tbody .stock {
	/*color: #645d5f;*/ /*light*/
	/*color: #595355;*/ /*lighter*/
	color: #7f7679;
}




/*Column specific*/
#stockist .retailer {
	padding-left: 10px;
}

#stockist tbody .retailer {
	font-weight: bold;
	/*color: #d8cdd0;*/
	/*color: #989092;*/
	text-transform: uppercase;
}






/*"- Online Only - "*/
#stockist table em {
	color: #595355;
	font-size: 90%;
	text-transform: uppercase;
}





/*row :hover*/
#stockist tr:hover td {
	color: #d8cdd0;
	background-color: #352a2d;
}

#stockist tr:hover a,
#stockist tr:hover a:visited {
	color: #d8cdd0;
}


/*"Address" & "Website" links*/
#stockist tr a {
	position: relative;
	/*color: #d8cdd0;*/
	/*color: #7d7477;*/
	border-bottom: 1px solid #585355;
}

#stockist tr a:visited	{color: #695f62;}
#stockist tr a:hover	{color: white;}
#stockist tr a:active	{top: 1px; color: #7d7477;}




/* @end */












































/* @group FOOTER */

#footer {
	position: relative;
	width: 100%;
	height: 140px;
	text-align: center;
	
	clear: both;
	
	background: url(images/footer_bg.jpg) repeat-x;
}

#footer #est {
	position: relative;
	margin: 0 auto;
	width: 1000px;
	height: 140px;
	text-indent: -6666em;
	
	clear: both;
	
	background: url(images/est.jpg) no-repeat;
}

/* @end */