/* CSS Document */
/* NOTES
1. Layout is floated right.
	This is done because pullquotes/summaries and 'introductory' text is listed first in HTML for rank purposes.
	This CSS document tries to describe things in the same order -- right to left; top to bottom.
2. Elements which are co-dependant are (hopefully) descibed here AND where they apear.
3. Main body margins remeber to change margins in:
	a. headlines
	b. ul li (margin lines up to text
	c. ol
	d. mainbody h1 are padded out by margin amount
	e. sIFR styles
	f. padding of inArtImg
4. IE6 clears left col [icomplete]
	a. is width of h3s and ul small enough to fit? 
6. sIFR
	a. Set a with to you sIFR elements, they seem to ignore containing boxes in IE6
	b. Hs in #mainBody must clear, or else sIFR goes nuts.
7. Right Column
	a. to initiate sIFR use blockquote p, otherwise use p.caption
	b. To give extra spacing between elements, use .firstItem
Antek Wodzynski*/

/*-------------------------------------------------------------------------------------
	BASICS : GENERAL STYLE AND TITLE IMAGE 
-------------------------------------------------------------------------------------*/
body { 
	padding: 0; 
	margin: 0; 
	background: #fff url(../images/top-bar.jpg) repeat-x; 
	color: #333;
	font-family: Arial, sans-serif; /* more compatible with OP8.5 */
}
img {
	border: 0px;
	padding: 0px;
	margin: 0px;
}
blockquote {
	padding: 0px;
	margin: 0px;
}
h1#mainTitle {
	padding: 0px;
	margin: 0px;
}
h1#mainTitle a {
	display:block;
 	height: 80px;
	width: 534px;
	overflow: hidden;
	position: relative;
	top: 5px;
}
h1#mainTitle a img {
	border: 0px;
	position: relative;
	top: -5px;
	left: 0px;
}
h1#mainTitle a:hover img {
	position: relative;
	top: -90px;
}
#home h1#mainTitle a:hover img {
	position: relative;
	top: 0px;
	cursor: default;
}
#wrap {
	overflow: visible;
	width: 1000px;
	/*height: auto; /* or IE 6 crops to leftCol height */
	/*background: url(../images/glass-tile-caliper.jpg) no-repeat 625px 0px;*/
	background: url(../images/glass-tile-caliper.jpg) no-repeat 625px 0px;
	margin: 0 auto 0 auto;
} #searchPg #wrap { background: none; }

/*-------------------------------------------------------------------------------------
 RIGHT COLUMN
 -------------------------------------------------------------------------------------*/
#rightCol {
	width: 375px;
	float: right;
}
#rightCol blockquote p,  #rightCol p, #rightCol h3 {
	padding: 0px;
	margin-left: 70px;
	font-size: 16px;
	line-height: 30px;
	color: #adb9c3;
	width: 275px;
} 
#rightCol .firstItem {
	margin-top: 231px;
}
#rightCol p.caption { /* caption is also used in mainBody */
	font-size: 75%;
	font-style: normal;
	line-height: 18px;
	color: #454545;
}
.caption img {
	padding-bottom: 3px;
}

/*-------------------------------------------------------------------------------------
  MAIN COLUMN - BODY
  -------------------------------------------------------------------------------------*/
#mainBody {
	width: 400px;
	float: right;
	margin-top: 35px;
}

/* IMAGE HANDLING IN ARTICLES AND SLIDESHOW PREVIEW */
.imgLarge, .imgMed, .imgSmall {
	width: 160px;
	padding: 5px 10px 0px 3px;
	margin: 0px;
	float: left;
} .imgLarge {width: 183px;} .imgSmall { width: 118px; padding-bottom: 8px;}

.imgLarge a img, .imgMed a img, .imgSmall a img {
	border: 1px solid #999;
}
.imgLarge a:hover img, .imgMed a:hover img, .imgSmall a:hover img {
	border: 1px solid #000;
}

/* TEXT */
#mainBody h1 {
	width: 365px;
	margin: 0px 0px 10px 4px;
	font-size: 32px;
	line-height: 38px;
	clear: left;
	color: #994E6C;
	border-left: 9px solid #994E6C;
}
#mainBody h2 {
	margin-bottom: 0px;
	padding-bottom: 0px;
	color: #994e6c;
	width: 372px;
	font-size: 16px;
	clear:left;
} body.installation h2.xtraSpace { float: left; width: 100%; margin-top: 20px; }
#mainBody h2 a {
	color: #994e6c;
	text-decoration: none;
}
#mainBody h3 {
	width: 372px;
	font-size: 14px;
	clear: left;
}
#mainBody p, #mainBody ul.inArt{
	padding: 0px;
	margin: 2px 0px 18px 3px;
	font-size: 12px;
	line-height: 18px;
} #mainBody ul.inArt { margin-left: 15px; margin-right: 20px; }
#mainBody ul.inArt li {
	padding: 0px 0 6px 0;
}
#mainBody blockquote p {
	color: #000;
	margin: 0 20px 15px 15px;
} #mainBody blockquote p.caption { margin: 0 20px 15px 15px; }

strong {
	font-weight: normal;
	color: #000;
}
#mainBody p.caption { /* p caption is described in rightCol */
	margin: 0;
	padding: 0 0 5px 0;
	color: #adb9c3;
}
p a, li a {
	color: #003399;
	text-decoration: none;
	border-bottom: 1px solid #ccc;
}
p a.endArt { border-bottom: 1px solid #fff; /* nec or else img can jump when it gets a border on hover*/}
p a:hover, li a:hover {
	background-color: #e3edec;
	text-decoration: none;
	color: #CC0033;
	border-bottom: 1px solid #000;
} p a.endArt:hover { background-color: #fff;}
a:visited {
	color: #993333;
}
a.moreLink {
	color: #003399;
	text-decoration: none;
	border-bottom: 3px solid #ccc;
}
a.moreLink:hover {
	color: #000;
	padding-bottom: 3px;
	border-bottom: 0px;
	background: #e3edec url("../images/navTop-arrow.gif") repeat-x bottom center;
}
h4 {
	font-size: 12px;
	padding: 0px 0px 3px 0px;
	margin: 0px;
	margin-left: 3px;
}

/* NOTES */
.note {
	font-size: 75%;
	position: relative;
	top: -5px;
}
ul#notes {
	font-size: 12px;
	padding: 0px;
	margin: 0px 0px 5px 0.25em;
	list-style: none;
}
ul#notes li {padding: 2px 0px 2px 0px; margin: 0px 0px 0px 10px; position: relative; /* so that this is position */}
ul#notes li a.noteNum {
	display: block;
	position: absolute;
	left: -10px;
}
#links ul.linksList {
	margin: 0px 0px 10px 3px;
	font-size: 12px;
}
#links li {
	padding: 2px 0px 2px 0px
}
#links li a {
	text-decoration: none;
}
/* form p */
form p {
	margin: 0px;
	padding: 0px;
}

/* slideshow 
	buttons  are in nav */
#imageWrap {
	width: 400px;
	margin-left: 3px;
}
#imageWrap img {
	display: block;
	margin: auto;
}
/* search */
#searchPg #leftCol {
	margin: 0px;
	padding: 0px;
}
.hide {
	display: none;
}


/*-------------------------------------------------------------------------------------
  LEFT COLUMN
  -------------------------------------------------------------------------------------*/
#leftCol { /* no width no float or else some browsers clear*/
	margin: 0px 0px 0px 2px; /*carefull here, more margin causes clear in IE6 */
	padding-top: 60px;
	/*border: 1px dotted red;*/
	/*display: block; /* IE 6, doesn't hurt other browsers */
}

#leftCol h3 {
	margin-bottom: 0px;
	margin-left: 4px;
	width: 170px; /* or else sIRF takes over whole column */
	font-size: 16px;
	color: #adb9c3;
}
#leftCol ul {
	width: 170px; /* or else sIRF takes over whole column */
	padding: 0px;
	margin: 0px;
	margin-left: 4px;
	/*border: 1px dotted red;*/
}
#leftCol ul li {
	padding: 0px;
	padding-top: 2px;
	padding-bottom: 2px;
	margin: 0px;
	list-style: none;
}
#leftCol ul li a {
	margin: 0px;
	padding: 0px;
	border-left: 3px solid #999; /* change a:hover */
	border-bottom: 0px;
	padding-left: 3px;
	display: block;
	font-size: 12px;
	text-decoration: none;
}
#leftCol ul li a:hover, /*general rule */
#NewHotelPg li#newHotel a, /* current article rules */
#floorsSunPG li#floorsSun a,
#drouinPG li#drouin a,
#recycledPG li#recycled a,
#chooseShapePG li#chooseShape a,
#furniturePG li#furniture a,
#authWorthPG li#authWorth a,
#varProcPg li#varProc a,
#glassAppealPg li#glassAppeal a,
#terrazzoPg li#terrazzo a,
#smaltiPg li#smalti a,
#faheyPg li#fahey a,
#artGlassArticlePg li#artGlassArticle a,
#glassBlockPg li#glassBlock a,
#futureproofing li#futureproofing a,
#bathPg li#bathroom a, /* current slideshow/type rules */
#foyerPg li#foyer a,
#kitchenPg li#kitchen a,
#poolPg li#pool a,
#floorPg li#floor a,
#waterPg li#water a,
#reflectionsPg li#reflections a,
#creeksidePg li#creekside a,
#opioPg li#opio a,
#interstylePg li#interstyle a,
#vetrotilePg li#vetrotile a,
#hakataiPg li#hakatai a,
#artGlassPg li#artGlass a,
#communMosaicPg li#communMosaic a,
#futureproofingPg li#futureproofing a,
#hoopesPg li#hoopes a,
#overviewPg li#overview a, /* current installation rules */
#mosaicSheetsPg li#mosaicSheets a,
#scoreToolPg li#scoreTool a,
#clearSheetPg li#clearSheet a,
#drillingPg li#drilling a,
#fixturePg li#fixture a,
#wetsawPg li#wetsaw a,
#scoringToolPg li#scoringTool a,
#membranePg li#membrane a,
#whereTurnPg li#whereTurn a,
#oneStepPg li#oneStep a,
#varThickPg li#varThick a,
#pickGroutPg li#pickGrout a,
#drilling2Pg li#drilling2 a,
#cuttingPg li#cutting a,
#introducingPg li#introducing a,
#makingrecycledPg li#makingrecycled a,
#fusedPg li#fused a,/* types */
#smaltiPg li#smalti a,
#terrazzoPg li#terrazzo a,
#castPg li#cast a,
#slumpedPg li#slumped a,
#etchedPg li#etched a

{
	background: #e3edec url("../images/navVert-arrow.gif") no-repeat left center;
	padding-left: 6px; /* reg padding + border */
	border: 0px; }
#NewHotelPg li#newHotel a:hover, /* current article rules */
#floorsSunPg li#floorsSun a:hover,
#water li#water a:hover,
#creeksidePg li#creekside a:hover,
#recycledPG li#recycled a:hover,
#chooseShapePG li#chooseShape a:hover,
#furniturePG li#furniture a:hover,
#authWorthPG li#authWorth a:hover,
#futureproofingPg li#futureproofing a: hover,
#varProcPg li#varProc a:hover,
#glassAppealPg li#glassAppeal a:hover,
#terrazzoPg li#terrazzo a:hover,
#drillingPg li#drilling a:hover,
#smaltiPg li#smalti a:hover,
#faheyPg li#fahey a:hover,
#artGlassArticlePg li#artGlassArticle a:hover,
#glassBlockPg li#glassBlock a:hover,
#futureproofing li#futureproofing a:hover,
#bathPg li#bathroom a:hover, /* current slideshow rules */
#foyerPg li#foyer a:hover, 
#kitchenPg li#kitchen a:hover,
#poolPg li#pool a:hover,
#floorPg li#floor a:hover,
#reflectionsPg li#reflections a:hover,
#opiocolorPg li#opiocolor a:hover,
#interstylePg li#interstyle a:hover,
#vetrotilePg li#vetrotile a:hover,
#hakataiPg li#hakatai a:hover,
#artGlassPg li#artGlass a:hover,
#drouinPG li#drouin a:hover,
#communMosaicPg li#communMosaic a:hover,
#hoopesPg li#hoopes a:hover,
#overviewPg li#overview a:hover, /* current installation rules */
#mosaicSheetsPg li#mosaicSheets a:hover
#scoreToolPg li#scoreTool a:hover,
#clearSheetPg li#clearSheet a:hover,
#membranePg li#membrane a:hover,
#whereTurnPg li#whereTurn a:hover,
#oneStepPg li#oneStep a:hover,
#varThickPg li#varThick a:hover,
#pickGroutPg li#pickGrout a:hover,
#cuttingPg li#cutting a:hover,
#faqPg li#faq a:hover,
#fusedPg li#fused a:hover,/* types */
#smaltiPg li#smalti a:hover,
#terrazzoPg li#terrazzo a:hover, 
#castPg li#cast a:hover,
#slumpedPg li#slumped a:hover,
#etchedPg li#etched a:hover
{ cursor: default; color: #993333; }
		
		
/*-------------------------------------------------------------------------------------
  MISC
  -------------------------------------------------------------------------------------*/
/* IE guillotine cure. And used in installation page */
.clearBoth {
	clear: both;
}
#leftCol p.caption {
	font-size: 75%;
	padding-top: 0; margin-top: 0;
}