@import 'reset.css';

/**!
 * textile3D By Mayer Fabrics
 *
 * Main stylesheet for Textile 3D by Mayer Fabrics. Combines layout/color/typography in one 
 * stylesheet.
 *
 * @project		Textile 3D Template
 * @version		1.0 ( 08-03-09 )
 * @package		Main Stylesheet
 * @author		Tony Dewan ( tdewan{at}bladv.com )
 * @media		Screen
 * @copyright	copyright 2009 Mayer Fabrics
 *
 * @colordef	#39312C; Dark Brown (body bg)
 * @colordef	#cbd8e4; Light Blue (form bg)
 * @colordef	#5f88a2; Dark Blue (various borders)
 */


/* ---( globals )------------------------------- */ /** @section Globals */

body{
	background: #39312C url('images/bg.gif') top left repeat-x;
	font: 1.0em/1.2 Helvetica, Arial, sans-serif;}


#container{
	width: 967px;
	height: 550px;
	background: #fff;
	margin: 15px auto;
	overflow: auto;
	position: relative;}

em{font-weight: bold;}

#modal, #overlay{
	display: none;}


/* ---( splash )------------------------------- */ /** @section Splash */

#splash{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	background: white url('images/loading.gif') center center no-repeat;
	width: 967px;
	height: 550px;}

#splash .logo, #splash form, #splash .about{
	float: left;
	height: 375px;
	border: 1px solid #c4c2c0;}

#splash div.man{
	width: 100%;
	margin: 1.5em 0;}

#splash div.man img{
	display: block;
	margin: 0 auto;}

#splash .wrapper{
	height: 377px;
	width: 942px;
	/*overflow: auto;*/
	-webkit-box-shadow: 0px 0px 5px #666;
	-moz-box-shadow: 0px 0px 5px #666;
	box-shadow: 0px 0px 5px #666;
	margin-left: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;}

#splash .logo{
	width: 268px;
	border-right: none;
	background: #dde5ed url('images/splash_logo.bg.jpg') top right repeat-y;	
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-top-left-radius: 10px; 
	-webkit-border-bottom-left-radius: 10px;
	border-top-left-radius: 10px; 
	border-bottom-left-radius: 10px;}
	
	#splash .logo img{
		display: block;
		margin: 75px auto 0 auto;}
		
#splash .about{
	width: 380px;
	height: 335px;
	border-left: none;
	padding: 20px;
	background: #f3f4f4 url('images/splash_about.bg.jpg') top left repeat-y;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-top-right-radius: 10px; 
	-webkit-border-bottom-right-radius: 10px;
	border-top-right-radius: 10px; 
	border-bottom-right-radius: 10px;}
	
	#splash .about h2{
		color: #d37728;
		font-weight: bold;
		font-size: 20px;}
	
	#splash .about p{
		color: #666666;
		font: 12px/20px Helvetica, Arial, sans-serif;}
	
	#splash .about img{
		display: block;
		margin: 15px auto 10px auto;}

#splash form{
	width: 250px;
	border-left: 1px solid #5f88a2;
	border-right: 1px solid #5f88a2;}
	
	#splash form div.title{margin: 40px 0 15px; width: 250px; font-size: 14px;}
	#splash form div.constraint{width: 250px;}
	#splash form div.constraint.check{width: 236px;}
	#splash form div.constraint.text{width: 243px;}
	#splash form select, #splash form div.constraint.text input{width: 220px;}


#splash p.timeout{
	text-align: center;
	margin-top: 300px;
	color:#3B332E;
	font-size:14px;}

/* ---( app )------------------------------- */ /** @section Application */

#app{
	position: absolute;
	top: 0;
	left: 0;}

/* ---( header )------------------------------- */ /** @section Header */

#header{
	position: absolute;
	left: 0;
	top: 0;
	width: 175px;}

#man{
	height: 133px;
	position: relative;}

#man img{
	display: block;
	margin: 0 auto;
	padding-top: 20%;}

/* ---( header >> search )------------------------------- */ /** @section Header @subsection Search Form */
	
form.productSearchForm{
	height: 415px;
	width: 175px;
	border: 1px solid #5f88a2;
	border-bottom: none;
	background: #cbd8e4 url('images/form.bg.jpg') top left repeat-x;}

form.productSearchForm label{
	display: none;}

form.productSearchForm label.check{
	display: inline;
	color: #446e89;
	font-size: 11px;}
	
form.productSearchForm .title{
	width: 175px;
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	color: #5e88a2;
	font-size: 13px;
	margin-bottom: 5px;}

form.productSearchForm div.constraint {
	width: 175px;
	border-top: 1px solid #628599;
	clear:both;
	padding-bottom: 5px;}

	form.productSearchForm div.constraint select {
		float:left;
		margin: 10px 9px;
		width:155px;}

	form.productSearchForm div.constraint.check {
		padding: 10px 0 10px 15px;
		width:160px;}
		
	form.productSearchForm div.constraint.text {
		padding: 15px 0 10px 8px;
		width:168px;}

		form.productSearchForm div.constraint.text input {
		width: 149px;}

	
form.productSearchForm button {
		background:transparent url('images/button.productsearch.gif') no-repeat scroll center bottom;
		border: 0 none;
		cursor:pointer;
		height:23px;
		line-height:0;
		text-indent: -9999px;
		width:76px;
		float: right;
		margin: 5px 10px 0 0;}


/* ---( general content  )------------------------------- */ /** @section Content Styling */

#content{
	position: absolute;
	top: 0;
	left: 177px;
	width: 790px;
}

#details, #chair{
	height: 389px;
	width: 370px;
	float: left;}	

/* ---( general content >> details  )------------------------------- */ /** @section Content Styling @subsection Details */

#details{
	padding: 10px 0 0 15px;
	height: 379px;}
	
	.patternDetails{
		margin: 0.5em 0 0 0;
		color: #666;}
	
	.patternDetails .img{
		width: 223px;
		height: 212px;
		overflow: hidden;
		background: #fff url('images/loading.gif') center center no-repeat;
		margin-bottom: 7px;}

	.patternDetails .img img{
		width: 223px;}
		
	.patternDetails span{
		display: block;
		font-size:11px;
		line-height: 16px;}

	.patternDetails span.stock{
		margin-bottom: 0.25em;}

		.patternDetails span.color{display: none;}

	.patternDetails a{
		display: block;
		color: #608b9f;
		font-size: 0.625em;
		text-decoration: none;
		line-height: 1.75;}

	.patternDetails a:hover{
		color: #5785BF;}

	span.name{
		color: #333;
		font-size: 1.0em;}

	.patternDetails span.name{
		font-size: 1.0em;}

	span.itemnum {
		font-size: 0.60em;}

	span.collection, span.colors, span.category, span.product_number{
		font-size: 0.75em;}

	.patternDetails div.right{
		float: right;
		width: 180px;}
	
	.patternDetails a.order{
		display: block;
		width: 132px;
		height: 34px;
		margin-top: 5px;
		text-indent: -9999px;
		background: transparent url('images/button.order.sprite.jpg') top left no-repeat;}
	
		.patternDetails a.order:hover{
			background: transparent url('images/button.order.sprite.jpg') 0 -35px no-repeat;}
	
	.patternDetails span.properties{
		line-height: 14px;}
	
		a.button{
			display: block;
			background: transparent url('images/generic.button.bg.gif') 0 0 no-repeat;
			color: #5e88a2;
			height: 24px;
			line-height: 24px;
			width: 148px;
			text-align: center;}
		
			a.button:hover{
				background: transparent url('images/generic.button.bg_hover.gif') 0 0 no-repeat;}


#otherColors{
	float: right;
	width: 96px;
	margin: 10px 30px 0 4px;}

	#otherColors .results{
		height: 136px;
		width: 96px;
		width: 100px;
		margin-left: 0;
		position: relative;
		float: left;
		overflow: hidden;}
	
	#otherColors .results > div{
		position: absolute;}
	
	#otherColors span.title{
		font-size: 11px;
		color: #666666;
		text-align: center;
		width: 100px;
		font-weight: bold;}

	#otherColors span.arrow{
		cursor: pointer;
		width: 100px;
		float: left;
		display: block;
		text-indent: -999px;}

		#otherColors span.arrow.up{
			background: transparent url('images/arrow.sprite.gif') 0 0 no-repeat;}

			#otherColors span.arrow.up:hover, #otherColors span.arrow.up.stop{
				background: transparent url('images/arrow.sprite.gif') -100px 0 no-repeat;}

		#otherColors span.arrow.down{
			background: transparent url('images/arrow.sprite.gif') 0 -20px no-repeat;}

			#otherColors span.arrow.down:hover, #otherColors span.arrow.down.stop{
				background: transparent url('images/arrow.sprite.gif') -100px -20px no-repeat;}

		

#otherColors div.results > div .img{
	width: 38px;
	height: 36px;
	overflow: hidden;
	background: #fff url('images/loading.gif') center center no-repeat;
	cursor: pointer;
	display: block;
	float: left;
	margin: 2px;
	padding: 2px;
	border: 1px solid white;}

#otherColors div.results .img img{
	display: block;
	margin: 0 auto;
	width: 36px;
	cursor: pointer;
	height: 34px;}
	
#otherColors div.results .img.active{	
	border: 1px solid #5E88A2;}
	
/* ---( general content >> chair  )------------------------------- */ /** @section Content Styling @subsection Chair */

#chair{
	height: 375px;
	height: 364px;
	margin: 15px 0 11px 15px;
	overflow: hidden;
	position: relative;
	border-bottom: 1px solid #ccc;}

#chairs{
	width: 368px;
	border-bottom: 1px solid #ccc;
	position:absolute;
	margin-top: 2px;}
	
	#chairs div.zoom{
		width: 373px;
		height: 338px;}

	#chairs > div{
		position: absolute;
		z-index: 20;
		height: 18px;
		height: 363px;
		border: 1px solid #ccc;
		background: #fff;
		width: 368px;
		overflow: hidden;}
	
		#chairs > div > div{
			height: 345px;
			overflow-y: scroll;
			overflow-x: hidden;}
	
			#chairs > div > div .chair{
				height: 86px;
				width: 84px;
				float: left;
				margin-right: 2px;
				border: 1px solid #fff;
				overflow: hidden;
				background: #ffffff url('images/loading.gif') 50% 50% no-repeat;}
			
				#chairs > div > div .chair.active, #chairs > div > div .chair:hover{
					border: 1px solid #5e88a2;}
				
				#chairs > div > div .chair img{
					display: block;
					margin: 0 auto;
					max-width: 84px;
					height: 86px;}
			
	#chairs a{
		display: block;
		height: 18px;
		font-size: 10px;
		line-height: 18px;
		padding: 0 0 0 5px;
		text-decoration: none;
		background: #ccc url('images/more_chairs.sprite.png') 350px 0px no-repeat;
		text-transform: uppercase;
		color: #333333;}
	
	#chairs a.up{
		background: #ccc url('images/more_chairs.sprite.png') 350px -22px no-repeat;}

		#chairs a:hover{
			background-color: #aaa;}


/* ---( general content >> results  )------------------------------- */ /** @section Content Styling @subsection Search Results */


#searchResults{
	width: 782px;
	height: 152px;
	overflow: hidden;
	background: #eef5fb;
	border-top: 1px solid #628599;
	padding: 4px 4px 0;}

	#crumb{
		font-size: 10px;}
	
	#searchResults .results{
		height: 98px;
		height: 120px;}
	
	#searchResults .results.loading{
		background: transparent url('images/loading.gif') center center no-repeat;}
	
		.results .result{
			cursor: pointer;
			float: left;
			width: 75px;
			height: 98px;
			border: 1px solid #eef5fb;
			margin: 5px 10px 5px 0;
			padding: 5px 0 5px 10px;}

			.results .result.active, .results .result:hover{
				border: 1px solid #5e88a2;}
			
			.results .result .img{
				background: #fff url('images/loading.gif') center center no-repeat;
				height: 67px;
				width: 65px;
				overflow: hidden;
				padding-bottom: 2px;}
			
			.results .result img{
				height: 67px;
				width: 65px;}
	
			.results .result .title, .results .result .grade{
				display: block;
				font-size: 10px;
				line-height: 11px;
				color: #608196;
				overflow: hidden;
				width: 100%;}
				
				.results .result .grade{
					padding-top: 3px;
					font-weight: bold;}
			
			.results .empty{
				width: 782px;
				height: 98px;
				margin: 17px 10px 5px 0;
				font-size: 14px;
				text-transform: uppercase;
				text-align: center;
				color: #628499;}

	.pagination{
		clear: both;
		width: 100%;
		color: #466f88;
		font-size: 10px;
		line-height: 18px;}

	.pagination .wrapper{
		margin: 0 auto;
		height: 18px;}

	.pagination a{
		color: #466f88;
		text-decoration: none;}

	.pagination a:hover{
		color: #A2B3BE;}

	.pagination a.active{
		font-weight: bold;
		text-decoration: underline;}

	.pagination a.previous, .pagination a.next{
		display: block;
		float: left;

		width: 18px;
		height: 18px;
		margin: 0 1em;

		text-indent: -9999px;}

	.pagination a.next{
		background: transparent url('images/page.arrows.gif') 0 0 no-repeat;	}

	.pagination a.next:hover{
		background: transparent url('images/page.arrows.gif') 0 -20px no-repeat;	}

	.pagination a.previous{
		background: transparent url('images/page.arrows.gif') 0 -40px no-repeat;	}

	.pagination a.previous:hover{
		background: transparent url('images/page.arrows.gif') 0 -62px no-repeat;	}

	.pagination .pages{
		float: left;
		overflow: auto;}

	.pagination a.resultpage{
		padding: 0 0.25em;
		border: none;}



/* ---( footer )------------------------------- */ /** @section Footer */

#footer{
	clear: both;
	width: 967px;
	margin: 0 auto;
	color: #fff;
	font-size: 9px;}

#footer a{
	color: #fff;
	text-decoration: none;}

#footer a:hover{color: #999;}

#footer p{float: right;}