html, body { width: 100%; height: 100%; }

#wrapper { width: 100%; max-width: 956px; margin: 0 auto; padding-top: 20px; opacity: 0; }

#header { width: 100%; position: relative; padding-top: 90px; margin-bottom: 40px; }
#header #cart { width: 50px; height: 30px; position: absolute; top: 0px; right: 0px; background: url("../img/shoppingbag.png") top left no-repeat; background-size: 30px 30px; display: none; }
#header #cart span { width: 10px; text-align: center; position: absolute; right: 0px; top: 9px; font: bold 16px Helvetica; }

.logo { width: 200px; margin: 0 auto; display: block; }

.divider { width: 100%; height: 6px; background: url("../img/squiggle_slice.png") top left repeat-x; margin-bottom: 50px; }

#main { width: 100%; }

/* home page */
#main #products { width: 100%; }
#main #products .product { cursor: pointer; width: 22%; position: relative; float: left; margin: 0px 4% 50px 0px; }
#main #products .product:nth-child(4n) { margin-right: 0px; }
#main #products .product a { width: 100%; position: relative; }
#main #products .product a img { width: 100%; margin-bottom: 10px; }
#main #products .product .product-info { height: 60px; }
#main #products .product .product-info p { width: 100%; text-align: center; font: bold 16px Helvetica; }
#main #products .product .product-info .title { margin-bottom: 8px; }
#main #products .product .soldout { display: none; position: absolute; top: calc(50% - 30px); left: 0px; width: 100%; z-index: 2; text-align: center; font: bold 34px Helvetica; color: white; }
#main #products .product.soldout .soldout { display: block; }
#main #products .product .buyme { display: none; position: absolute; top: calc(50% - 30px); left: 0px; width: 100%; z-index: 2; text-align: center; font: bold 34px Helvetica; color: white; }
#main #products .product.available:hover .buyme { display: block; }

/* product page */
#main .breadcrumb { margin-bottom: 40px; }
#main .breadcrumb li { float: left; margin-right: 15px; font: bold 18px Helvetica; }
#main #product { width: 100%; position: relative; margin-bottom: 50px; }
#main #product .product-images { width: 40%; float: left; }
#main #product .product-images img { display: block; width: 100%; margin-bottom: 30px; }
#main #product .product-info { width: 60%; float: left; padding-left: 100px; }
#main #product .product-info h1 { margin-bottom: 20px; font: bold 30px Helvetica; }
#main #product .product-info .price { color: blue; margin-bottom: 20px; }
#main #product .product-info.available .soldout { display: none; }
#main #product .product-info.soldout .available { display: none; }
#main #product .product-info .soldout { margin-bottom: 20px; width: 100px; height: 40px; background-color: #f6f6f6; padding-top: 11px; }
#main #product .product-info .soldout p { text-align: center; font: normal 16px Helvetica; color: #b8b8b8;  }
#main #product .product-info .available { text-align: center; margin-bottom: 20px; width: 100px; height: 40px; background-color: #0037ff; padding-top: 11px; color: #FFFFFF; font: normal 16px Helvetica; display: block; }
#main #product .product-info p { margin-bottom: 20px; font: bold 16px Helvetica; line-height: 30px; }
#main #product .product-info p .rte { width: 94%; }

/* footer page */
#footer { text-align: center; }
#footer p { width: 100%; text-align: center; font: bold 16px Helvetica; }
#footer .about { width: 100%; text-align: center; font: bold 16px Helvetica; margin-bottom: 10px; display: inline-block; }
#footer .about:hover { color: blue; }

/* about page */
#about { width: 100%; }
#about h1 { text-align: center; font: bold 30px Helvetica; margin-bottom: 50px; }
#about p { text-align: center; font: bold 30px Helvetica; margin-bottom: 50px; line-height: 55px; }
#about ul { width: 410px; margin: 0 auto 50px auto; }
#about ul li { float: left; margin-right: 20px; font: bold 30px Helvetica; }
#about ul li:hover { color: blue; }
#about ul li:last-child { margin-right: 0px; }
#about a:hover { color: #0037ff; }

@media handheld, screen and (max-width: 680px) {
	#main #products .product { width: 43%; position: relative; float: left; margin: 0px 6% 50px 2.5%; }
	#main #products .product:nth-child(2n) { margin-right: 0px; }
	#main #products .product .soldout { top: calc(50% - 50px); }
	#main #products .product .available { display: none; }
	#main #products .product.available:hover .buyme { display: none; }

	#main .breadcrumb { width: 90%; margin: 0 auto 40px auto; }
	#main #product .product-images { width: 90%; float: none; margin: 0 auto; }
	#main #product .product-info { width: 90%; float: none; margin: 0 auto; padding-left: 0px; }
	
	#about h1 { font-size: 25px; }
	#about p { font-size: 25px; padding: 0px 10px; }
	#about ul { width: 348px; font-size: 25px; }
	#about ul li { font-size: 25px; }
}