/*
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;
}

	/*was in 'body' above: font-size: 62.5%/1.6;*/	

.mac.gecko body {	
	-moz-opacity: 0.9999;
	/*
	leave in if there's no other way to resolve the Mac Mozilla 'fade' rendering bug:
	 <http://groups.google.com/group/jquery-en/browse_thread/theead/3392907cd85427b9>.
	<http://www.simpltry.com/2006/12/14/firefox-for-mac-and-opacity-problem/>
	
	2008.04.09: This bug is fixed in Firefox 3.0 (b5) for Mac. So at some point (after its release) this hack won't be necessary. The beauty is (or at least seems to be) that this hack can remain, since it fixes the problem in Firefox 2.0 and doen't cause any ill effects in Firefox 3.0 (apparently opacity: 0.99 isn't enough to screw with Firefox 3.0).
	
	*/
	 /*opacity: 0.99;*/
	/*thanks: http://rafael.adm.br/css_browser_selector/*/
}





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

#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;}

#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 {
	position: absolute;
	left: 0;
	bottom: -4px;
	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;
	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;	
	/*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) 0px 0px no-repeat;*/
	/*This bullet will only work if there are two exposed nav links*/
	background: url(images/nav-divider_bullet.gif) no-repeat 80px 1px;
	
	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: 28px;
	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-getshoes {width: 97px; background-position: 0 0;}
#nav li a#nav-getshoes:hover {background-position: 0 -38px;}
#nav li.ui-tabs-selected a#nav-getshoes {background-position: 0px -76px;}


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


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


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


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




/*While all of the 2010 nav links are not yet exposed, these styles make the nav links that are exposed look right.*/
/*#nav li a#nav-press {margin-left: -12px;}*/


/*#nav li a#nav-press {width: 50px; background-position: -216px 0;}
#nav li a#nav-press:hover {background-position: -216px -38px;}
#nav li.ui-tabs-selected a#nav-press {background-position: -216px -77px;}

#nav li a#nav-contact {width: 80px;}*/


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




/*#nav li.nav-dividerbullet {
	width: 27px;
	background: url(images/nav-divider_bullet.gif) no-repeat;
}*/




#nav #handmade {
	position: absolute;
	top: 0px;
	right: 0px;

	/*width: 151px;*/ /*for "handmade in america"*/
	
	width: 170px;
	height: 38px;
	text-align: center;
	text-indent: -6666em;
	background: url(images/nav-handmade_in_california.gif) no-repeat;
}

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

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

#nav a#storebutton:hover {background-position: 0px -38px;}
#nav a#storebutton:active {background-position: 0px -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.*/
	
}



/*

2008.03.31: Not needed anymore (to turn off the shadow and spotlight in IE) because I was able to add the above selector to the .htc call which makes the spotlight correctly transparent (even as a background, so long as it doesn't repeat) in IE 6.

.win.ie6 #contentcontainer #shadowcontainer,
.win.ie6 #contentcontainer #shadowcontainer #shadow {
	display: none;
}

http://rafael.adm.br/css_browser_selector/

*/




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 ABOUT */

#pagecontent #about {
	width: 850px;
	margin: 0 auto;
	clear: both;

	line-height: 1.4em;
	text-align: left;

	/*color: #9c9295;*/
	color: #7a7274;
}

/* @group Company Bio */

#pagecontent #about #companybio {
	width: 800px;
	margin: 0 auto;
	margin-top: 2em;
	/*padding-bottom: 4em;*/
	
	text-align: left;
	/*border-bottom: 3px double #655c5e;*/
	
	border-top: 1px dashed #443438;
	border-bottom: 1px dashed #443438;
}

#pagecontent #about #companybio p {
	/*margin-top: 1em;*/
	padding: 1em 1em 1em;
	margin: 0; /*because css_reset is gone*/
	
	font-size: 0.9em;
	line-height: 1.55em;
	
	text-align: justify;
	text-indent: 20px;
	/*color: #9c9295;*/
	background-color: #282224;
}

#pagecontent #about #companybio p.first {
	padding-bottom: 1em;
	
	/*font-size: 1em;
	line-height: 1.6em;
	text-align: center;*/
	
	border-bottom: 1px dashed #443438;
	background-color: transparent;
}

#pagecontent #about #companybio p em {
	color: #a3989b;
}

#pagecontent #about #companybio img {
	padding: 1px;
	border: 1px double #746c6e;
}

#pagecontent #about #companybio img.left {
	margin: 1.4em 2em 1em 1em;
	float: left;
}

#pagecontent #about #companybio img.right {
	margin: 1.4em 1em 1em 1.5em;
	float: right;
}




/*
For 2010.03.06 Update:
- Added "click here to send us your email address" link to the bottom of the "About" page.
*/


#pagecontent #about #emailcollector p {
	margin: 50px 0;
	text-indent: 0;
	text-align: center;
	
	font-size: 1.1em;
	
	border: 1px dashed #443438;
	
	-webkit-transition: background-color 0.1s linear;
}

#pagecontent #about #emailcollector p:hover {background-color: #312a2c;}
#pagecontent #about #emailcollector p em {font-family: Georgia, Times, serif;}
#pagecontent #about #emailcollector p a {color: #7a7274; text-decoration: none;}
#pagecontent #about #emailcollector p a .fauxlink {color: #a3989b; text-decoration: underline;}



/* @end */

/* @group Quotes */




#pagecontent #about #quotes {
	width: 800px;
	margin: 0 auto;
	margin-top: 4em;
	padding-bottom: 4em;
	
	/*background-color: #2a2426;*/
	
	clear: both;
}


#pagecontent #about #quotes p.intro {
	margin: 0;
	padding: 1.3em 0 1.2em 0;
	color: #7c7376;
	
	text-align: center;
	/*background: url(images/contentcontainer-shadow.png) top center no-repeat;*/
	
	
	border-top: 1px dashed #322729;
	/*border-bottom: 3px double #322729;*/
	background-color: #221618;
	font: italic 0.7em/1.5em "Lucida Grande", Lucida, Verdana, sans-serif;
}






#pagecontent #about #quotes blockquote {
	display: block;
	/*margin-top: 1em;*/
	/*padding: 1em;*/
	padding: 1.5em 1em;
	margin: 0; /*because css_reset is gone*/

	
	/*float: left;*/

	font-size: 0.9em;
	line-height: 1.55em;
	
	text-align: justify;
	
	background-color: #282224;
	border-top: 1px dashed #34282b;
	text-indent: 20px;
	
	-webkit-transition-property: background-color, color, height;
	-webkit-transition-duration: .05s;
	
}

#pagecontent #about #quotes blockquote.even {
	background-color: #2b2426;
}

#pagecontent #about #quotes blockquote:hover {
	background-color: #2e2729;
}

/*#pagecontent #about #quotes blockquote:hover {
	background-color: #2a2426;
}*/


/*#pagecontent #about #quotes blockquote.odd {
	margin-left: 7em;
	background-color: #2a2426;
	background: url(images/contentcontainer-shadow.png) top center no-repeat;
}*/

/*#pagecontent #about #quotes blockquote.even {
	background-color: #2a2426;
	background: url(images/contentcontainer-shadow.png) top center no-repeat;
}*/









#pagecontent #about #quotes blockquote .georgequote, em {
	color: #a3989b;
	
	font-size: 0.9em;
	line-height: 1.55em;
	font-style: italic;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}

/*#pagecontent #about #quotes blockquote em {
	color: #beb1b5;
}*/

#pagecontent #about #quotes blockquote .source {
	margin-top: 0.5em;
	margin-left: 1em;
	padding: 0 0.4em 0 0.2em;
	
	white-space: nowrap;
	
	font-style: italic;
	color: white;
	
	background-color: #571717;
	
}


#pagecontent #about #quotes img {
	padding: 1px;
	border: 1px #ccbfc3 solid;
	clear: both;
	/*z-index: 60;*/
}

#pagecontent #about #quotes img.left {
	display: inline; /*IE Fix?*/
	/*display: none;*/
	margin: 1em 2em 0em 1em;
	float: left;
}

#pagecontent #about #quotes img.right {
	display: inline;
	/*display: none;*/
	/*margin: 1.5em 1em 0em 2em;*/
	margin: 0em 1em 1.5em 1.5em;
	float: right;

}



/* @end */



/* @end */

/* @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;
}

/*#contact p.quote {
	display: block;
	height: 40px;
	width: 280px;
	margin-top: 60px;
	margin-left: 430px;
	
	text-indent: -6666em;
	
	background:url(images/contact-quote.gif) no-repeat;
}*/


/*
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 */


#press p.description {
	margin: 85px 0 45px 0;
	text-align: center;
	font-style: italic;
	font-size: 17px;
	color: #c1b7ba;
	text-shadow: #000 1px 1px 2px;
}

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

#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;
}

#press .magazinegroup a {
	display: block;

	width: 140px;
	height: 170px;
	
	margin-bottom: 10px;
	
	text-align: right;
	text-transform: uppercase;
	font: 9px Helvetica, Arial, Helvetica, Geneva, sans-serif;

	color: #655c5e;
	text-decoration: none;
}

#press .magazinegroup a.new strong {
	position: absolute;
	top: 0px;
	left: 3px;
	
	padding: 1px;
	
	text-align: center;
	color: black;
	font-weight: bold;
	background-color: #c1b7ba;
	border-bottom: 2px solid #726c6d;
	border-right: 2px solid #5a5556;
}


#press .magazinegroup a img {
	border: 1px solid #99958f;
	margin-left: -1px;
	margin-right: -1px;
}

#press .magazinegroup a span em {
	color: #8a7e80;
}



#press .magazinegroup a span.thumb {
	position: relative;
	display: block;
	width: 140px;
	height: 150px;
	overflow: hidden;
}

#press .magazinegroup a span.thumb img {
	position: relative;
	top: -5px;
	top: 0;
	left: -10px;
	width: 160px;
}



/* @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 */