/* Graniterock Stone Catalog CSS */

body {
	margin: 0 auto;
	width: 800px;
	height: 172px;
}

#wrapper {
	width: 800px;
	margin: 0 auto;
	text-align: center;
}

#header {
	margin: 0 auto;
	width: 800px;
}

#headerLogo {
	width: 800px;
	height: 122px;
}

#headerLogo img {
	border: 0;
}

#headerSearch {
	margin: 20px 0px 0px 450px;
	width: 350px;
}

#headerMenu {
	width: 800px;
	height: 50px;
}

.breadcrumb {
	padding-left: 17px;
	margin-bottom: 10px;
	margin-top: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	color: #9c9a9a;
	text-align: left;
	
}

.breadcrumb a {
	text-decoration: none;
	color: #9c9a9a;
}

.breadcrumb a:hover {
	color: #727070;
	text-decoration: underline;
}


.menuItem {
	border: 0px;
	margin: 0px;
	padding: 0px;
}

#content {
	width: 800px;
	margin: 0 auto;
	text-align: left;
}


/* front page content */

.frontPageRow {
	width: 800px;
	height: 186px;
	clear: both;
}

.frontPageRowSpacer {
	width: 800px;
	height: 40px;
	clear: both;
}

ul.frontPageBlocks {
	display: inline;
	margin: 0px;
	padding: 0px;
}

.frontPageImg {
	width: 240px;
	height: 186px;
	float: left;
}

.frontPageImg img {
	border: 0;
}

.frontPageImgCaption {
	background-color: #e3decd;
	width: 240px;
	height: 25px;
	color: #000000;
}

.frontPageImgSpacer {
	background-color: #FFFFFF;
	width: 39px;
	height: 186px;
	float: left;
}


/* Category content */

#categoryRow {
	width: 800px;
	clear: both;
}

#categoryRowSpacer {
	width: 800px;
	height: 40px;
	clear: both;
}

#categoryImgBlock {
	float: left;
	width: 180px;
}

#categoryImg {
	width: 180px;
}

#categoryImg img {
	border: 0;
	width: 180px;
}

#categorySpacer {
	float: left;
	width: 20px;
}

#categoryMainBox {
	float: left;
	width: 600px;
	margin-left: 20px;
}

#categoryTitleBox {
	text-align: left;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	width: 600px;
	height: 25px;
	border-bottom: 1px #000000 solid;
	margin-bottom: 10px;
}

#categoryTitle {
	position: relative;
	left: 0;
	vertical-align: top;
}

#categoryTitle a {
	/* color: inherit;  inherit does not work with IE7, piece of crap */
	color: #000000;
	text-decoration: none;
	display: block;
}

#categoryTitle a:hover {
	text-decoration: underline;
}

#categoryDescription {
	float: left;
	width: 310px;
}

#categoryProductLinks {
	float: left;
	width: 280px;
	margin-left: 10px;
	
}

#categoryProductLinks td {
	width: 50%;
	border: 0;
	/* background-color: #e3decd; */
	background-color: #cbd8d2;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
}

#categoryProductLinks td a {
	/* color: inherit;  inherit does not work with IE7 */
	color: #000000;
	text-decoration: none;
}

#categoryProductLinks td a:hover {
	text-decoration: underline;
}

/* end category content */


/* Type content */

#typeCatHeader {
	background-color: #e3decd;
	width: 100%;
	height: 25px;
	line-height: 25px;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin-bottom: 15px;
	/* margin-top: 25px;  DEBUG: makes big space on view-cat.php, used anywhere else? */
}

#typeCatHeader span {
	padding-left: 15px;
	line-height: 26px;
	height: 25px;
	display: block;
}

#typeWrapper {
	width: 100%;
}

#typeProductWrapper {
	float: left;
	width: 580px;
	padding-right: 20px;
}

#typeInfoBox {
	float: left;
	width: 200px;
}

#typeInfoBoxEntry {
	width: 180px;
	border: 1px #000 solid;
	padding: 10px;
}

#typeInfoBoxEntryGuts {
	border: 5px #FFF solid;
	background-color: #e3decd;
	padding: 5px;
}

#typeProductRow {
	width: 580px;
	margin-bottom: 20px;
}

#typeProductImgBox {
	float: left;
	width: 200px;
	padding-right: 20px;
}

#typeProductImgBox img {
	width: 200px;
	border: 0;
}

#typeProductDescriptionBox {
	float: left;
	width: 360px;
}

#typeProductDescriptionHeader {
	width: 100%;
	height: 25px;
	text-transform: uppercase;
	border-bottom: 1px #000 solid;
}

#typeProductDescriptionHeader a {
	/* color: inherit; inherit does not work on IE7 */
	color: #000000;
	text-decoration: none;
}

#typeProductDescriptionHeader a:hover {
	text-decoration: underline;
}

#typeProductDescription {
	width: 100%;
}



/* end type content */


/* Product Page content */

#productStatusBar {
	width: 100%;
	height: 15px;
	vertical-align: middle;
	text-align: right;
	color: #949599;
	font-size: 12px;
}

#productCatHeader {
	background-color: #e3decd;
	width: 100%;
	height: 25px;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	vertical-align: middle;
	margin-bottom: 15px;
	/* margin-top: 25px; */
}

#productCatHeader a {
	/* color: inherit; */
	color: #000000;
	text-decoration: none;
}

#productCatHeader a:hover {
	text-decoration: underline;
}

#productCatHeader span {
	padding-left: 15px;
	line-height: 26px;
	height: 25px;
	display: block;
}

#productWrapper {
	width: 100%;
}

#productImagesBox {
	float: left;
	width: 400px;
	margin: 0px;
}

#productImagesBox img {
	/* width: 180px; */
	padding: 5px;
	vertical-align: top;
}

#productInfoBox {
	float: left;
	width: 400px;
	padding-left: 0px;
	margin: 0px;
}

#productDescriptionHeader, #productTableHeader {
	width: 400px;
	height: 25px;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	border-bottom: 1px #000 solid;
}

#productDescription {
	width: 400px;
	padding-top: 5px;
	padding-bottom: 15px;
}

#productTable {
	padding-top: 10px;
}

#productTable table {
	width: 100%;
}

#productTable th {
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: left;
	border-top: 2px #EAEAEA dotted;
	padding: 2px 0px;
}

#productTable td {
	padding: 2px 0px;
	background-color: white;
}

.cellCat {
	width: 40px;
	text-align: center !important;
}

.cellDescription {
	/* width: 150px; */
}

.cellSpacer {
	width: 10px;
}

.cellThickness {
	/* width: 105px; */
}

.cellCoverage {
	width: 105px;
}

.cellList img {
	text-align: center;
}

.cellASTM1 {
	/* width: 150px; */
}

.cellASTM2 {
	/* width: 70px; */
}

.cellASTM3 {
	width: 100px;
}

.cellASTM4 {
	width: 60px;
}

.cellSieve {
}

.cellList {
	width: 45px;
	text-align: center !important;
}

#productTable tr {
	/* height: 24px; */
}

#productTable td {
	/* height: 24px; */
	text-align: left;
	border-top: 2px #EAEAEA dotted;
	padding: 2px 0px;
}


#footerSpacer {
	width: 800px;
	height: 100px;
}

.catalogTable, .catalogImageTable {
	background-color: #FFFFFF;
	width: 490px;
	
	/* 
	 * these replace cellpadding="0", cellspacing="0", border="0"
	 * "border" and "margin" may be unnecessary
	 */
	border-spacing: 0;
	border-collapse: collapse;
	padding: 0;
}

.catalogImageTable td, .catalogImageTable th {
	padding : 0;
}

.catalogTableColumn1 {
	width: 251px;
	height: 19px;
	vertical-align:	top;
	color: #000;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 15px;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #88ac99;
	padding: 7px 0px 0px 15px;
}

.catalogTableColumn2 {
	width: 110px;
	height: 19px;
	vertical-align:	top;
	color: #000;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 15px;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #88ac99;
	padding: 7px 0px 0px 15px;
}

.catalogTableColumn3 {
	width: 129px;
	height: 19px;
	vertical-align:	top;
	color: #000;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 15px;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #88ac99;
	padding: 7px 0px 0px 15px;
}

/* the following are also in granite.css */

.available {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	color: #234131;
	padding-top: 16px !important;
	padding-bottom: 12px !important;
}

.chart {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 15px;
  color: #000000;
  border-bottom-width: thin;
  border-bottom-style: solid;
  border-bottom-color: #88ac99;
  padding: 7px 0px 0px 15px;
  height: 19px;
  vertical-align: top;
}

.greenbox {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 18px;
  text-transform: uppercase;
  color: #FFFFFF;
  background-color: #234131;
  padding-top: 12px !important;
  padding-right: 5px !important;
  padding-bottom: 4px !important;
  padding-left: 15px !important;
  letter-spacing: 0.5em;
  height: 52px;
  vertical-align: middle;
}

/* Site map */

.sitemapTitle {
	width: 100%;
	margin: 10px 0px 5px 0px;
	padding: 4px 0px 4px 5px;
	background: #E3DECD;
	font-size: 12px;
	text-align: left;	
}

.sitemapTitle a {
	color: #000;	
	text-transform: uppercase;
}

.sitemapCat {
	font-size: 12px;
}

.sitemapProd {
	font-size: 11px;
	margin-left: 4px;
}

.sitemapCat a {
	color: #000;
	font-size: 12px;
	text-transform: uppercase;
}

.sitemapProd a {
	color: #9c9a9a;
	font-size: 11px;
}

.sitemapCat a:hover, .sitemapProd a:hover, .sitemapTitle a:hover {
	text-decoration: underline;
}

#sitemapContainer {
	width: 100%;
	text-align: left;
}

.sitemapCell {
	float: left;
	width: 33%;	
}

/* Stone Usage */
.stoneUsageTitle {
	width: 100%;
	margin: 10px 0px 5px 0px;
	padding: 4px 0px 4px 5px;
	background: #E3DECD;
	font-size: 12px;
	text-align: left;	
}

.stoneUsageUsageName {
	font-size: 12px;
	margin-bottom: 2px;
	text-transform: uppercase;
}

.stoneUsageCat {
	font-size: 11px;
	margin-left: 4px;
}

.stoneUsageProd {
	font-size: 11px;
	margin-left: 24px;
}

.stoneUsageTitle a {
	color: #000;	
	text-transform: uppercase;
}

.stoneUsageCat a {
	color: #000;
	font-size: 11px;
	text-transform: uppercase;
}

.stoneUsageProd a {
	color: #9c9a9a;
	font-size: 11px;
}

.stoneUsageCat a:hover, .stoneUsageProd a:hover, .stoneUsageTitle a:hover {
	text-decoration: underline;
}

#stoneUsageContainer {
	width: 100%;
	text-align: left;
}

.stoneUsageCell {
	float: left;
	width: 33%;	
}

/* My List */


.myList {
	width: 100%;
	font-size: 12px;
}

.myList td, th {
	padding-left: 17px;
}

.myListHeader {
	background-color: #e3decd;
	width: 100%;
	height: 25px;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	vertical-align: middle;
	text-align: left;
}

.myListCell1 {
	padding: 10px 0px 10px 17px;
	text-transform: uppercase;
}

.myListCell2 {
	padding: 10px 0px 10px 17px;
}

.myListCell3 {
	padding: 10px 0px 10px 17px;
}

.myListRow1 {
	padding: 10px 0px 10px 0px;
	background-color: #FFFFFF;
}

.myListRow2 {
	padding: 10px 0px 10px 0px;
	background-color: #CCCCCC;
}

#showMailTo, #showForwardToGraniterock {
	border: 0;
}

.forwardToGraniterock, .mailTo {
	font-size: 12px;
	text-align: left;
}

.forwardToGraniterock h2, .mailTo h2 {
	text-align: center;
}

.mailForm {
	padding-left: 120px;
	padding-right: 120px;
	line-height: 18px;
}

.listFooter {
	font-size: 10px;
	text-align: center;
}


/* clear fix */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

.gr_gallery_item {
	border: 0 none;
	outline: 0 none;
	cursor: hand;
}


.ui-state-highlight {
	height: 1.5em;
	line-height: 1.2em;
	width: 100%;
	display: block;
	background-color: #E3DECD;
}