HTML { height: 100%; }

BODY { font-family: "Arial"; min-height: 100%; margin: 0px; text-align: center; }

div.clearer {

	clear: both; 
	line-height: 0px; 
	height: 0px;
	font: normal 0px "Trebuchet MS", "Arial"; 
	margin: 0px;
	padding: 0px;
	border: 0px solid red;

}

#navMenu {

	width: 870px;
	height: 140px;
	margin-left: -5px;
 	z-index: 999; 
	-webkit-transition: 0.6s all;
    -moz-transition: 0.6s all;
    text-align: center;
    background: url(_head_bg_big.png) no-repeat; 
    background-position: center bottom;
    position: relative;

}

#footer {

	margin-top: 40px;
	width: 870px;
	height: 140px;
	margin-left: -5px;
	text-align: left;
	overflow: hidden;
	position: relative;

}

.ie7 #footer { border: 0px solid green; }

.footerBot {

	height: 100px; 

	width: 860px;
	bottom: 0px;
	background-color: #555; 

	margin-left: 5px; 

	z-index: 9999;
	position: absolute;

}

.ie7 .footerBot { left: 0px; border: 0px solid red;  position: relative; }
.ie7 #footer .inner { border: 0px solid yellow; z-index: 99999; margin-top: 0px;  }

.footerBot .inner {

	padding: 10px;

}

.footerBot H3 {
 
	margin-top: 20px;
	margin-bottom: 14px;
	font-family: "chunk", serif;
	color: #FFF;
	font-size: 12px;
	font-weight: normal;
	text-transform: uppercase;
}

.footerBot .left {

	float: left;
	width: 50%;
	margin-left: -20px;
	text-align: left;

}

.ie7 .footerBot .left { margin-top: -25px; }

.footerBot .left INPUT[type=text]{

	background-color: #EEE;
	padding: 10px;
	width: 220px;
	border: none;
	float: left;
	font-size: 14px;
	color: #999;

}

.footerBot .left INPUT[type=text]:focus, INPUT[type=text]:focus, INPUT[type=email]:focus, textarea:focus { outline-color: #1cb2ea; }

.footerBot .left INPUT[type=submit]{

	padding: 12px 18px;
	border: none;
	float: left;
    background: url(_submit.png) no-repeat; 
    background-position: center center;
	background-color: #1cb2ea;
	text-transform: uppercase;
	text-indent: -9999px;
	margin-left: -4px;
	line-height: 12px;

}

.ie7 .footerBot .left INPUT[type=submit]{ width: 40px; }

.footerBot .right {

	float: left;
	width: 50%;
	position: absolute;
	margin-top: 5px;
	right: 20px;
	text-align: right;
	color: #FFF;
	font-size: 12px;

}

.footerBot .right IMG { width: 40px; height: 40px; margin-bottom: 10px; }

#footer IMG.paper { 

	margin-top: -25px;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=6);
	z-index: 1;

}



#footer .footerBot IMG {

	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);

}

#navMenu A:hover, #navMenu LI:hover A, #navMenu A.active { text-decoration: none; color: #4b9b2f; text-shadow: none; z-index: 9999; }

#navMenu SPAN { 
	display: block; 
	height: 60px;	
}

#navMenu SPAN.logo A { 

	text-align: left; 
/*	background: url(_new_logo.png) no-repeat;*/
	background-position: center center;
	display: block;  
	height: 100%;
	width: 100%;
	text-indent: -9999px; 
	overflow: hidden; 
	
}

UL.mainMenu { 


	margin-top: 5px; 
	margin-left: 0px;
	padding-bottom: 0px; 
	margin-bottom: 0px; 
	padding-left: 0px;
	height: 40px;
	background-color: #bebda9;
	box-shadow: 2px 2px 3px rgba(0,0,0,.5);
	z-index: 3;
	position: absolute;
	top: 60px;
	width: 100%;
	
}

.ie7 UL.mainMenu { left: 0px; }

.ie7 UL.mainMenu LI:first-child { margin-left: 90px; }

.mainMenu LI:last-child { border-right: 1px solid #555; }

.mainMenu LI { 

	font-family: "chunk", serif;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 18px;
	width: 120px;
	text-align: center;
	margin: 0px;
	display: inline-block;
	position: relative;
	list-style-type: none;
	
}

.ie7 .mainMenu LI { float: left; }

#navMenu .mainMenu LI A { 

	display: block;
	text-decoration: none; 
	color: #555555; 
	border-left: 1px solid #555;
	border-right: 1px solid #cecebf;
	padding: 13px 0px 9px 0px;
	
}

#navMenu .mainMenu LI A:hover, #navMenu .mainMenu LI:hover A {

	background-color: #1cb2ea;
	color: #FFF;
	border-right: 1px solid #1cb2ea;

}

#navMenu .mainMenu LI A.active, #navMenu .mainMenu LI.active A { 
background-color: #555;
	border-right: 1px solid #555;
	color: #FFF;
	
} 

.search {

	position: absolute; 
	width: 40px;
	height: 40px;
	left: 0px;
	top: 70px;
	background: url(_search.png) no-repeat;
	background-position: center center;
	background-color: #000;
	z-index: 2;
	-webkit-transition: 0.1s all;
    -moz-transition: 0.1s all;

}

.cart {

	position: absolute; 
	width: 40px;
	height: 40px;
	right: 0px;
	top: 70px;
	background: url(_cart.png) no-repeat;
	background-position: center center;
	background-color: #000;
	z-index: 2;

}

.cart:hover, .search:hover, .cart.active, .search.active { background-color: #1cb2ea; }
.cart A, .search A { 

	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	text-align: left;

 }

#global {
	width: 940px;
	padding: 0px 10px;
	margin: 0px auto; 

}

#global .inner {

	padding: 0px 40px;
	position: relative;

}

.grid {

	text-align: center;

}

.image {

	display: inline-block;
	margin: 10px;
	background-color: #EFEFEF;
	position: relative;
	vertical-align: top;
	box-shadow: 1px 4px 10px rgba(0,0,0,.2);

}

.ie7 .image { float: left; display: block; width: 150px; height: 200px; }

.image.single { width: 160px; }
.image.double { width: 210px; }
.image.triple { width: 280px; }

.image A {

	display: inline-block !important;
	width: 100%;
	height: 100%;

	overflow: hidden;

}


.image A IMG { margin-bottom: -4px; }

.ie7 .image A IMG { max-width: 100%; } 

.clip {

	width: 7px;
	height: 12px;
	background: url(_clip.png) no-repeat;
	position: absolute;
	top: -6px;
	opacity: .7;
	box-shadow: 1px 1px 1px rgba(0,0,0,.1);

}

.clip.left { left: 9px;}
.clip.right { right: 9px;}

.filters {

	font-family: "Helvetica";
	font-size: 12px;
	color: #444;
	text-align: left;
	display: block;
	padding-top: 5px;
	min-height: 20px;

}

.filters A {

	margin: 0px 5px;
	margin-bottom: 5px;
	display: inline-block;
	background: #999;
	padding: 4px 8px;
	border-radius: 11px;
	color: #FFF;
	text-decoration: none;

}

.filters A.active { background-color: #444; }
.filters A:hover { background-color: #1cb2ea; }

.detail { padding-top: 15px; }

.detail .images {

	width: 420px; 

	float: left; 
	margin-right: 10px; 
	padding-right: 10px; 
	min-height: 500px; 
	margin-bottom: 10px;

}

.detail .info {

	width: 264px; 
	float: left; 
	margin-right: 10px; 
	padding-left: 15px; 
	min-height: 500px; 
	text-align: left; 
	font-size: 12px; 
	line-height: 18px; 
	font-family: "Helvetica";

}

.detail .info A:hover { color: #555; }

.detail .info A {

	text-decoration: none;
	color: #1cb2ea;

}

.detail .info UL {

	padding-left: 0px; 
	margin-bottom: 15px;

}

.detail .info UL LI { margin-bottom: 5px; }

.detail .info INPUT[type=submit], #search-submit, .submit, .btn {

	padding: 12px 10px 10px 10px; 
	border: 1px solid #FFF; 
	font-family: "chunk"; 
	color: #FFF; 
	background: url() no-repeat;
	background-color: #1cb2ea; 
	text-transform: uppercase; 
	cursor: pointer;

}

.btn.remove-from-cart, .btn.update { background-color: #CCC; }
.btn.remove-from-cart:hover, .btn.update:hover { background-color: #CCC; color: #999; }

.detail .info INPUT[type=submit]:hover, #search-submit:hover, .submit:hover, .btn:hover { background-color: #555; }

.detail H1, .detail H2, .detail H3, .detail P.price { 

	margin-top: 0px; 
	font-family: "chunk", serif;
	font-weight: normal;
	text-transform: uppercase;
	color: #555;
	
}

.detail H1, .detail H2, .detail P.price { font-size: 20px; }
.detail H3 { font-size: 10px; }
.detail H3 SPAN { color: #bebda9; }

.detail .also {

	width: 120px; 
	float: left; 
	padding-left: 10px; 
	border-left: 1px solid #555; 
	min-height: 500px; 
	text-align: left;

}

#sharing { margin: 0px; padding: 0px; width: 300px; }
#sharing LI { margin: 0px; padding: 0px;  list-style-type: none; float: left; display: inline; padding-right: 0px; width: 100px !important;  }

.detail .also .fpo {

	background-color: #555; 
	width: 100px; 
	height: 150px; 
	margin-bottom: 15px;

}

.entry {

	text-align: left; 
	margin: 10px 80px; 
	border-bottom: 1px solid #666; 
	position: relative;

}

.process {

	text-align: left; 
	margin: 10px 10px; 
	border-bottom: 1px solid #666; 
	position: relative;

}

UL.slideshow LI { list-style-type: none; }

.entry H1 {

	float: left; 
	width: 30%; 
	margin-top: 0px;
	font-family: "chunk", serif;
	color: #555;
	font-size: 16px;
	font-weight: normal;
	text-transform: uppercase;
}

.process H1 {
 
	margin-top: 20px;
	margin-bottom: 14px;
	font-family: "chunk", serif;
	color: #555;
	font-size: 16px;
	font-weight: normal;
	text-transform: uppercase;
}

.entry H1 A:hover, .process H1 A:hover { color: #1cb2ea; }
.entry H1 A, .process H1 A { text-decoration: none; }

.entry H1 SPAN {

	text-transform: none;
	font: bold 12px "Helvetica", "Arial";
	display: block;
	margin-top: 10px;

}

.post {

	float: right; 
	width: 60%; 
	display: block; 
	padding-bottom: 20px;
	font: normal 12px "Helvetica", "Arial";
	line-height: 18px;

}

.process .post { margin-top: 10px; }

.process .post LABEL {

	position: absolute;
	font-weight: bold;
	left: 0px;

}

.post A:hover  { text-decoration: underline; color: #555; }
.post A { text-decoration: none; color: #1cb2ea; }

.post IMG {

	display: block; 
	width: 100%; 
	margin-bottom: 10px;

}

.process IMG {

	width: 100%;

}

UL.slideshow { 

	width: 100%;
	margin: 0px;
	padding: 0px;	
}

UL.slideshow LI {

	width: 100%;
	height: 511px;
	margin: 0px;
	padding: 0px;
	
}

.bx-prev {

	position: absolute;
	right: 0px;
	top: -45px;
	display: block;
	width: 40px;
	height: 40px;
	background: url(_down.png) no-repeat;
	background-position: center center;
	background-color: #bebda9;
	text-indent: -9999px;

}

.bx-next {

	position: absolute;
	right: 42px;
	top: -45px;
	display: block;
	width: 40px;
	height: 40px;
	background: url(_up.png) no-repeat;
	background-position: center center;
	background-color: #bebda9;
	text-indent: -9999px;

}

.bx-wrapper, .bx-window { width: 100% !important; }

.bx-next:hover, .bx-prev:hover { background-color: #1cb2ea; }

.paging {

	text-align: right;
	position: relative;
	padding-top: 15px;

}

.paging UL { margin: 0px; padding: 0px; }

.paging UL LI { list-style-type: none; display: inline; }

.more-info-collection { position: absolute; left: 0px; }

.paging .pager A { 

	background: url(_link_arrows.png) no-repeat;
	text-decoration: none;
	text-align: left;
	background-color: none;
	border-radius: none;
	color: #333;

}

.pager.prev:hover A { background-position: 0px bottom; color: #1cb2ea; } 
.pager.prev A { 

	background-position: 0px 0px;
	padding: 5px 2px 5px 32px;

}

.pager.next:hover A { background-position: right bottom !important; color: #1cb2ea; } 
.pager.next A { 

	background-position: right 0px !important;
	padding: 5px 32px 5px 2px;

}

#placards {
	
	height: 300px; 
	background: url(placard_bg.jpg) no-repeat; 
	margin-bottom: -70px;
	
}

/*#placards:hover .placard A, #placards:hover .placard A h2, #placards:hover .placard A IMG { opacity: .6; }*/

.placard {
	
	height: 210px; 
	margin-top: 50px; 
	width: 285px; 
	border-right: 1px solid #CCC; 
	border-left: 1px solid #CCC; 
	float: left;
	
}

.placard A:hover, .placard A:hover h2, .placard A:hover IMG { opacity: 1 !important; color: #1cb2ea; }
.placard A { text-decoration: none; }

.placard A H2 { 
	
	margin-top: 0px; 
	text-transform: uppercase;
	font-family: "chunk", serif;
	font-size: 14px;
	font-weight: normal;
	
}

.placard A IMG { height: 150px; display: block; margin: 5px auto; }

.placard.start { border-left: 0px; }
.placard.end { border-right: 0px; }

/*///////////////////////////////////////////////////////////////////////////////////////////////
/IPAD PORTRAIT///////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////*/


@media only screen and (min-width: 768px) and (max-width: 970px) {

	BODY {width: 100%; }
	
	#global {
		width: 750px;
		padding: 0px 10px;
		margin: 0px auto; 
	
	}
	#carousel { margin-left: -5px; }
	#carousel, 
	#carousel .items > li{
	  width: 750px;
	  height: 456px;
	  }
	
	#global .inner {
	
		padding: 0px 0px;
		position: relative;
	
	}
	
	#navMenu {
	
		width: 750px;
		height: 140px;
	
	}
	
	.mainMenu LI { width: 114px; }
	
	.cart {
	
		right: 5px;
		top: 65px;
		z-index: 1000;
	
	}
		
	.search {
	
		left: -5px;
		top: 65px;
		z-index: 1000;
	
	}
	
	#footer {  margin-left: 0px; width: 750px; height: 100px; overflow: hidden; }
	
	.footerBot { margin-right: 0px; z-index: 999; margin-left: -2px; height: 100px; }
	
	.footerBot .left { margin-left: 30px; }
	.footerBot .right { position: absolute; left: 615px; width: 120px; }
		
	.detail .also {
	
	
		float: none; 
		clear: both;
		width: auto;
		padding-top: 10px; 
		margin-top: 10px; 
		border-left: 0px solid #555; 
		border-top: 1px solid #555; 
		min-height: 150px; 
		text-align: left;
	
	}
	
	.detail .also .fpo {
	
		background-color: #555; 
		float: left;
		width: 100px; 
		height: 150px; 
		margin-bottom: 15px;
		margin-right: 15px;
	
	}
	
	.entry { margin: 10px 40px;  }
	
	UL.slideshow LI { height: 444px; }
	
	.bx-wrapper, .bx-window { height: 444px !important; }
	
	#placards {

		height: 270px; 
		background: url(placard_bg.jpg) no-repeat; 
		margin-bottom: -70px;

	}

	.placard {

		height: 180px; 
		margin-top: 50px; 
		width: 245px; 
		border-right: 1px solid #CCC; 
		border-left: 1px solid #CCC; 
		float: left;

	}
	
	.placard A IMG { height: 100px; }

}

/*///////////////////////////////////////////////////////////////////////////////////////////////
/IPHONE PORTRAIT/////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-device-width: 320px) {

	BODY { width: 100%; } 
	
	#global {
		width: 320px;
		padding: 0px 0px;
		margin: 0px auto; 
	overflow: hidden;
	
	}
		#carousel { margin-left: 0px; }
		#carousel, 
		#carousel .items > li{
		  width: 320px;
		  height: 194px;
		  }
	
	#global .inner {
	
		padding: 0px 0px;
		position: relative;
	
	}
	
	#navMenu {
	
		width: 325px;
		height: 145px;
		background-position: center bottom;
	
	}
	
	UL.mainMenu { height: 80px; margin-top: -20px; margin-left: 1px;}
	
	.mainMenu LI { width: 107px; border-bottom: 1px solid #555; }
	
	.cart {
	
		right: 0px;
		top: 0px;
		z-index: 1000;
		height: 40px;
	
	}
	
	.search {
	
		left: auto;
		right: 41px;
		top: 0px;
		z-index: 1000;
		height: 40px;
	
	}
	
	#navMenu SPAN { 
	
		display: block; 
		height: 40px;
	
	}

	#navMenu SPAN.logo A { 
	
		text-align: left; 
	 	background: url(_logo_small.png) no-repeat !important; 
		background-position: 10px center !important;
		display: block;  
		height: 100%;
		width: 100%;
		text-indent: -9999px; 
		overflow: hidden; 
		
	}
	
	.grid { text-align: center; }
	
	.image { float: none; display: inline-block; }
	
	#footer { margin-left: -5px; width: 325px; overflow: hidden; }

	.footerBot { margin-right: 0px; height: 150px; }
	
	.footerBot .left { margin-top: -15px; margin-left: 0px; text-align: center; width: auto; float: none; }
	.footerBot .left FORM { display: block; margin: 0px auto; margin-left: 30px; }
	
	.footerBot .right { width: 320px; margin-left: 0px; margin-top: 65px; float: none; text-align: center; position: relative; left: 0px; }
	.footerBot .right  IMG{ margin-bottom: 4px; }
	
	.detail { padding: 15px; border: 0px solid red; }
	
	.detail .also { display: none; }
	
	.detail .images { width: auto; float: none; text-align: center; margin-right: 0px; }

	.entry { margin: 10px 0px;  }
	
	.entry H1 { float: none; width: auto; margin: 20px; }
	.entry .post { float: none; width: auto; margin: 20px; }
	
	UL.slideshow LI { height: 190px; }
	
	
	.bx-wrapper, .bx-window { height: 190px !important; }
	
	.process .post { width: 100%; }
	.process .post LABEL { position: relative; display: block; margin-bottom: 5px; }
	
	
	.placard.start { padding-top: 30px; }
	.placard {

		height: auto; 
		margin-top: 20px; 
		padding-bottom: 20px;
		width: 100%; 
		border-right: 0px solid #CCC; 
		border-left: 0px solid #CCC; 
		border-bottom: 1px solid #CCC;
		float: none;

	}
	
	.placard A  IMG { display: none; }

	
}

/*///////////////////////////////////////////////////////////////////////////////////////////////
/IPHONE LANDSCAPE////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////*/

@media only screen and (min-width: 480px) and (max-width: 767px) {

	BODY { width: 100%; } 
	
	#global {
		width: 480px;
		padding: 0px 0px;
		margin: 0px auto; 
		overflow: hidden;
	
	}
		#carousel { margin-left: 0px; }
		#carousel, 
		#carousel .items > li{
		  width: 480px;
		  height: 291px;
		  }
		
	#global .inner {
	
		padding: 0px 0px;
		position: relative;
	
	}
		
	#navMenu {
	
		width: 485px;
		height: 175px;
		background-position: center bottom;
	
	}
	
	#navMenu SPAN.logo A { background: none no-repeat; background-position: center bottom !important; padding-top: 10px; }
		
	UL.mainMenu { height: 80px; margin-top: 4px; margin-left: 0px; }
		
	.mainMenu LI { width: 135px; border-bottom: 1px solid #555; }
		
	.cart {
		
		right: 0px;
		top: 65px;
		z-index: 1000;
		height: 80px;
	
	}
		
	.search {
		
		left: -5px;
		top: 65px;
		z-index: 1000;
		height: 80px;
	
	}
		
	#footer { margin-left: 0px; width: 480px; overflow: hidden; }
	
	#footer IMG.paper { display: none; }

	.footerBot { margin-right: 0px; margin-left: -4px; height: 120px; }
	
	.footerBot .left {

		float: left;
		width: 50%;
		margin-left: -20px;
		text-align: left;
		margin-top: 5px;

	}

	.footerBot .right {
	
		float: left;
		width: 150px;
		position: absolute;
		margin-top: 30px;
		left: 320px;
		text-align: right;
		color: #FFF;
		font-size: 12px;
	
	}
	
	.footerBot .left  FORM { margin-left: 0px; }
	.footerBot .left { margin-left: 30px; width: 70%; }
	
	.detail .also { display: none; }
	
	.detail .images { width: auto; float: none; text-align: center; }	
	
	.entry { margin: 10px 0px;  }
	
	.entry H1 { float: none; width: auto; margin: 20px; }
	.entry .post { float: none; width: auto; margin: 20px; }
	
	UL.slideshow LI { height: 280px; }
	
	.bx-wrapper, .bx-window { height: 280px !important; }
	
	.process .post { width: 100%; }
	.process .post LABEL { position: relative; display: block; margin-bottom: 5px; }
	
	
	.placard.start { padding-top: 30px; }
	.placard {

		height: auto; 
		margin-top: 20px; 
		padding-bottom: 20px;
		width: 100%; 
		border-right: 0px solid #CCC; 
		border-left: 0px solid #CCC; 
		border-bottom: 1px solid #CCC;
		float: none;

	}
	
	.placard A  IMG { display: none; }
	
}

