/* ============= */
/* = Color REF = */
/* ============= */
/*  
lavender --> #AF81C5
logo type color --> #A1B55D
navMain blue --> #0A1240
header bg --> #66501C
cMain h1 --> #4D2214
cMain border --> #4D2214
cMain bg --> #F2DA91
cMain section-label --> #D96704
footer bg --> #4D2214
footer border --> #33280E

SHOP
main box product --> #F2B950
inner box product --> #F29D35


*/

/* Imports */
@import url('typography.css');
@import url('menus.css');
@import url('forms.css');
@import url('shop.css');

/* Blueprint resets */
.box {
	background: none;
}

/* debug */
.dbg {
	border: 1px solid red;
}


body {
	margin: 0; 
	background: url(../images/bg-bamboo-lavender.gif) fixed;
}

/* global classes */

.box-margin-b {
	margin: 0 0 1.5em 0;
}
.box-margin-t {
	margin: 1.5em 0 0;
}
.relative {
	position: relative;
}     
.absolute {
	position: absolute;
}
.inline li {
	display: inline;
}
.bg-white {
	background: white;
	background-image: none;
	margin-top: 0;
	border: 7px #4D3322 solid;	
}   
 
/* Header stuff */
	#wrapHeader {
		background: url(../images/bg-header.gif) top repeat-x;
	}
	#header {
		height: 145px;
	}
	/* featuredBox */
	#featuredBox {
		width: 950px;
		height: 317px;
		position: relative;
		background: url(../images/bg-featured.jpg) no-repeat;
	}
	#navContainer {
		height: 145px;
		position: relative;
	}   

/* =cMain */
	#cMain {
		margin-top: 1.5em;
		border: 7px #4D3322 solid;
		background: #f2da91 url(../images/bg-articles-gradient.gif) top repeat-x;
	} 
	#cMainSubpage {
		margin-top: 0;
		border: 7px #4D3322 solid;
		background: #f2da91 url(../images/bg-articles-gradient.gif) top repeat-x;
	}
	
	/* Shop */
	.products p {
		margin-left: 226px;
	}
    .products img {
	position: absolute;
}
/* =cSupp stuff */
	#cSupp {
		margin: 1.5em 0 0 5px;
	}  
	.c-supp-span-4 {
		text-align: center;
	}
	#networking {
		margin-bottom: 1.5em;
	}
	#tabbedWidget {
		position: relative;
		width: 348px;
		height: 233px;
		margin-bottom: 1.5em;
		background: url(../images/bg-widget-tab.png) no-repeat;
	}
	#flickrWidget {
		position: relative;
		width: 348px;
		height: 233px;
	}
	.tab-widget-content {
		position: absolute;
		top: 31px;
		left: 10px;
		width: 320px;
		height: 183px;  
		overflow: hidden;
	}
	#cardWidget {
		position: relative;
		width: 348px;
		height: 205px;
		margin-bottom: 1.5em;
		background: url(../images/bg-widget-card.png) no-repeat;
	} 
	.card-widget-content {
		position: absolute;
		top: 60px;
		left: 30px;
		width: 300px;
		overflow: hidden;	   
	}
	.border-green {
		border: 1px solid #A1B55D;
	}
/* Footer stuff */
	#wrapFooter {
		background: url(../images/bg-footer.gif) bottom repeat-x;
		height: 275px;
	}    
	#containerFooter {
	}   
	#footerLogos {
		position: relative;
		margin-top: 17px;
		padding-top:;
		height: 120px;
		width: 950px;
		background: url(../images/bg-footer-top.png) top no-repeat;
	
	}                                                              
	#footerLogos ul {
		position: absolute;
		bottom: -30px;
		list-style: none;
	}
	#footerLogos ul li {
		float: left;
	}            
	#foterLogos a {

	}  
	#siteInfo {
		position: relative;
		height: 120px;
	
	}   
	#siteInfo .nested { /*
		TODO this rule is not consistent with footerRight
	*/
		position: absolute;
		bottom: -7px;
		margin: 0 1.5em 1.5em;
	}
	
	#footerRight {
		position: relative;
		height: 120px;
	}
	#footerRight ul {
		position: absolute;
		bottom: -7px;
		right: 135px;
	}    
	
/* =custom stuff */
	/* step-carousel */
		#miniShop {
			position: absolute;
			left: 400px;
			top: 24px;
		
		}            
		.stepcarousel {
			position: relative; /*leave this value alone*/
			border: none;
			overflow: scroll; /*leave this value alone*/
			width: 534px; /*Width of Carousel Viewer itself*/
			height: 273px; /*Height should enough to fit largest content's height*/
		}

		.stepcarousel .belt{
			position: absolute; /*leave this value alone*/
			left: 0;
			top: 0;
		}

		.stepcarousel .panel{
			float: left; /*leave this value alone*/
			overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
			margin: 10px; /*margin around each panel*/
			width: 524px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
			min-height: 130px;
		}                      
		.stepcarousel .subpanel {
			position: relative;
			margin-bottom: 1em;
			height: 128px;
			overflow: hidden;
		}
		/* step carousel content */
			#miniShopTitle {
				color: #413027;
				font-weight: bold;
				text-transform: uppercase;
				position: absolute;
				z-index: 51;
				left: 410px;
				top: 15px;
/*				text-indent: -9999em;*/
/*				width: 90px;*/
/*				background: url(../images/label-featured-products.png);*/
			}
			#miniShop h1, #miniShop p {
				margin: 0 1em 0 145px;
				
			}
			#miniShop h1 {
				font-size: 175%;
			}
			#miniShop h1, #miniShop h1 a {
				color: brown;
				letter-spacing: normal;
				text-decoration: underline;
				margin-bottom: .7em;
			}
			#miniShop img {
				position: absolute;
				width: 125px;
				height: 125px;
				border: 1px solid black;
			}  
			#miniShop div.readmore {
				margin-top: .5em;
				text-align: left;
				padding-left: 145px;
			}                     
			#miniShop div.readmore a {
				padding-right: 12px;
				background: url(../images/readmore-minishop.png) right no-repeat;
				line-height: 11px;
				text-decoration: underline;
				font-weight: bold;
				color: blue;
			}                        
			#miniShop div.readmore a:hover {
				text-decoration: none;
			}
	
	/* Flickr widget */
	.flickr_badge_image {
		background: #ffffff;
		border: 1px solid #f1f1ed;
		margin: 2px 5px 5px 11px;
		padding: 5px;
		float: left;
	}