/***
Filename:		base.css
Author:			Andrei Vais
Date:			28/05/2008
Description:	Base styling for Ryalux

Colours:		Background: #FFFFFF - off white;
				Text color: #717275 - dark grey;

Dimensions:		960px wide for a 1024x768 resolution


***/

/***
Reset styles version 2 (http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/)
***/

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}

a img, :link img, :visited img {border: 0;}

table
{
	border-collapse: collapse;
	border-spacing: 0;
}

ol, ul {list-style: none;}

q:before, q:after, blockquote:before, blockquote:after {content: "";}

/* All elements 'reset' to a base level - set site base background and foreground colours */
html, body
{
	/*background: #E5E5E5;
	background: #E9D8D4;
	background-color: #ECDAC1;*/
	background: #FFFFFF;
	color: #717275;
	font: 90% Verdana,Arial,sans-serif;
	text-align: center;			/*	This is for IE6 and similar browsers who can't center elements using the margin set to auto;	*/
}

#overallwrapper
{
    margin: 0 auto;
    position: relative;
    text-align: left;			/*	Need to reset the text alignment back to left for all browsers	*/
    width: 944px;
}

#Ryalux
{
    bottom: 0;					/* will cover the entire parent */
	float: left;
    left: 0;
	margin: 15px auto;
    position: absolute;
    top: 0;						/* These positions makes sure that the overlay */
    width: 100%;
}

#SiteMainContentBackground
{
	background: #E5E5E5 url('../images/maincontentbgimage.gif') repeat-y -33.1% 0%;	/*	this uses the faux column method to ensure that the page nav and content align at the bottom	*/
	/*background-color: #E9D8D4;
	background-color: #ECDAC1;*/
	background-color: #FFFFFF;
	float: left;
	width: 100%;
}

#SiteMainContentBackground #HeadSampleBag
{
	background: #E5E5E5 url('../images/maincontentbgimage.gif') repeat-y -33.1% 0%;	/*	this uses the faux column method to ensure that the page nav and content align at the bottom	*/
	/*background-color: #E9D8D4;
	background-color: #ECDAC1;
	background-color: #9C1E3D;*/
	background-color: #9C1E3D;
	float: left;
	width: 100%;
	display:block;
	height:78px;
}

#SiteMainContentBackground #HeadSampleBag #Bag
{
	width: 50%;
	float: left;
	display: block;
	height: 78px;
}

#SiteMainContentBackground #HeadSampleBag #Bag p#BagSummary
{
	margin: 30px 0 0 222px;
	color: #FFFFFF;
}

#SiteMainContentBackground #HeadSampleBag #Bag p#BagSummary a {color: #FFFFFF;}

#MainContent
{
	float: left;
	min-height: 526px;
	width: 23.3%;
}

#MainContent h1, #SiteMainContentBackground h1
{
	top: 0;
	left: 0;
	z-index: 3;
	width: 50%;
	height: 78px;
	background: #9C1E3D url('../images/ryaluxlogo_v3.gif') no-repeat 0% 47%;
	text-indent: -9000px;
	float: left;
}

#MainContent h1 a, #SiteMainContentBackground h1 a
{
	display: block;
	height: 78px;
	background: #9C1E3D url('../images/ryaluxlogo_v3.gif') no-repeat 0% 47%;
}

#MainContent h1 a:hover, #SiteMainContentBackground h1 a:hover {text-decoration: underline;}

#MainContent p
{
	display: inline;
	float: left;
	line-height: 165%;
	margin-top: 11px;
	margin-left: 5%;
	width: 82%;
}

#MainContent p#CartSummary
{
	background: #9C1E3D;
	/*border-bottom: 15px solid #E5E5E5;*/
	border-bottom: 15px solid #FFFFFF;
	color: #FFFFFF;
	display: inline;
	font-size: 85%;
	line-height: 130%;
	margin: 24px 0 0 0;
	padding: 6px 0 9px 9%;
	width: 91%;
}

#MainContent p#CartSummary strong {font-size: 130%;}

#MainContent p#CartSummary img, #PageContent p#SummaryMessage img
{
	display: inline;
	float: left;
	margin: 2px 4px 0 2px;
}

#PageContent p#SummaryMessage img {margin-top: 0px;}

#MainContent p#CartSummary a
{
	color: #FFFFFF;
	display: inline;
	float: left;
	font-size: 100%;
	font-weight: bold;
	margin-top: 21px;
	margin-left: 4px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

#PrimaryNav
{
	display: inline;
	float: left;
	margin-top: 17px;
	padding: 0 0 9px 9%;
	width: 82%;
}

#PrimaryNav li
{
	float: left;
	margin: 6px 0 6px 0;
	width: 96%;
}

#PrimaryNav li a
{
	color: #717275;
	float: left;
	font-size: 110%;
	display: block;
	padding: 3px 0;
	text-decoration: none;
	width: 100%;
}

#PrimaryNav li ul
{
	float: left;
	margin: 0;
	padding: 2px 0 15px 0;
	width: 100%;
}

#PrimaryNav li ul li
{
	display: inline;
	float: left;
	margin: 0 0 2px 9%;
	width: 82%;
}

#PrimaryNav li ul li a
{
	font-size: 100%;
	line-height: 135%;
	text-transform: lowercase;
}

#PrimaryNav li a:hover, #PrimaryNav li a.currentpage
{
	color: #9C1E3D;
	text-decoration: underline;
}

#FeaturedProduct
{
	background-color: #FFFFFF;
	background-position: top center;
	background-repeat: no-repeat;
	display: inline;
	float: left;
	height: 114px;
	margin: 0 1.5%;
	padding-top: 597px;
	overflow: hidden;
	width: 56%;
}

/*
	don't forget this need to match the Javascipt array in imagerotator.js  - lines 24-34
*/
.style {background-image: url('../images/homepagefeaturedproducts/style.jpg');}

.shabbychic_closeup3 {background-image: url('../images/homepagefeaturedproducts/shabbychic_closeup3.jpg');}

.modern {background-image: url('../images/homepagefeaturedproducts/modern.jpg');}

.shabbychic_closeup1 {background-image: url('../images/homepagefeaturedproducts/shabbychic_closeup1.jpg');}

.classic {background-image: url('../images/homepagefeaturedproducts/classic.jpg');}

.elegant_closeup1 {background-image: url('../images/homepagefeaturedproducts/elegant_closeup1.jpg');}

.shabbychic {background-image: url('../images/homepagefeaturedproducts/shabbychic.jpg');}

.modern_closeup1 {background-image: url('../images/homepagefeaturedproducts/modern_closeup1.jpg');}

.elegant {background-image: url('../images/homepagefeaturedproducts/elegant.jpg');}

.shabbychic_closeup2 {background-image: url('../images/homepagefeaturedproducts/shabbychic_closeup2.jpg');}

.luxury {background-image: url('../images/homepagefeaturedproducts/luxury.jpg');}

.stylish_closeup1 {background-image: url('../images/homepagefeaturedproducts/stylish_closeup1.jpg');}

.contemporary {background-image: url('../images/homepagefeaturedproducts/contemporary.jpg');}

.sophisticated {background-image: url('../images/homepagefeaturedproducts/sophisticated.jpg');}

#FeaturedProduct h2
{
	display: inline;
	float: left;
	font-size: 100%;
	margin: 0 0 0 69px;
	width: 60%;
	display: none;		/*temporarly added at client's reuqest	*/
}

#FeaturedProduct a
{
	color: #FFFFFF;
	float: left;
	font-size: 285%;
	font-weight: normal;
	line-height: 125%;
	text-decoration: none;
	width: 100%;
}

#FeaturedProduct a:hover {text-decoration: underline;}
/**/
#SecondaryContent
{
	float: right;
	width: 17.6%;
}

#MainContent .ActionBox, #SecondaryContent .ActionBox
{
	background: #9C1E3D no-repeat top center;
	color: #FFFFFF;
	float: left;
	display: inline;
	height: 55px;
	margin-bottom: 15px;
	padding: 172px 0 0 2.4%;
	width: 97.5%;
}

#MainContent .ActionBox a, #SecondaryContent .ActionBox a
{
	color: #FFFFFF;
	text-decoration: none;
}

#MainContent .ActionBox a:hover, #SecondaryContent .ActionBox a:hover {text-decoration: underline;}

#MainContent .ActionBox h2, #SecondaryContent .ActionBox h2
{
	float: left;
	width: 98%;
}

#MainContent .ActionBox h2
{
	margin-top: -1px;
	margin-bottom: 1px;
}

#MainContent .ActionBox h2 a, #SecondaryContent .ActionBox h2 a
{
	float: left;
	font-weight: bold;
	font-size: 90%;
	line-height: 130%;
	margin: 0;
	padding: 0;
	width: 99%;
}

#MainContent .ActionBox h3, #SecondaryContent .ActionBox h3
{
	display: inline;
	float: left;
	font-size: 85%;
	font-weight: normal;
	line-height: 140%;
	margin: 0;
	padding: 0;
	margin-top: 3px;
	width: 98%;
}

#MainContent .ActionBox h3 {line-height: 135%;}

#MainContent #BespokeCarpet
{
	background-image: url('../images/actionboxpics/carpetrolls.jpg');
	background-position: top center;
	margin-bottom: 0;
	padding-left: 9%;
	padding-right: 4%;
	width: 87%;
}	

#SecondaryContent #WhatsNew
{
	background-image: url('../images/actionboxpics/vajewellerycollection_v2.jpg');
	padding-top: 414px;
}

#SecondaryContent #SampleService
{
	background-color: #9C1E3D;
	background-image: url('../images/actionboxpics/carpetsamples.jpg');
	color: #FFFFFF;
	margin-bottom: 0;
}

#Footer
{
	border-top: 1px dotted #717275;
	clear: both;
	color: #717275;
	float: left;
	font-size: 85%;
	margin-top: 15px;
	text-transform: lowercase;
	width: 100%;
}

#Footer ul {float: left;}

#Footer ul li
{
	float: left;
	margin-right: 4px;
	padding: 9px 0;
}

#Footer ul li#FirstFooterLink
{
	background: none;
	padding-left: 0;
}

#Footer ul li a
{
	color: #717275;
	text-decoration: none;
}

#Footer ul li a:hover, #Footer ul li a.currentpage
{
	color: #9C1E3D;
	text-decoration: underline;
}

#Footer p
{
	float: right;
	padding: 9px 0;
	white-space: nowrap;
}

#LanguageSelect
{
	font-size: 100%;
	margin-top: -6px;
	padding: 0;
	text-transform: lowercase;
}

#PageContent
{
	float: right;
	width: 76.7%;
}

#PageContent .SingleColumnContent
{
	background: #FFFFFF;
	display: inline;
	float: left;
	margin-top: 15px;
	min-height: 469px;
	padding: 11px 0;
	width: 100%;
}

#PageContent .TwoColumnsContent
{
	display: inline;
	float: left;
	margin-top: 15px;
	margin-left: 2%;
	width: 48%;
}

#PageContent .TwoColumnsContent .NestedNav {float: left;}

#PageContent .SingleColumnContent a, #PageContent .TwoColumnsContent a, #ParentCollectionDescription a
{
	color: #595A5D;
	font-size: 85%;
	font-weight: bold;
	line-height: 180%;
	text-transform: uppercase;
}

#PageContent .SingleColumnContent h3 a, #PageContent .TwoColumnsContent h3 a, #ParentCollectionDescription h3 a
{
	color: #717275;
	font-size: 100%;
	font-weight: normal;
	text-transform: none;
}

#ParentCollectionDescription a {font-size: 100%;}

#PageContent .TwoColumnsContent a:hover {color: #9C1E3D;}
#PageContent .TwoColumnsContent  h3 a:hover {color: #717275;}

#PageContent .TwoColumnsContent img.carpetsymbol
{
	display: inline;
	float: left;
	margin: 5px 10px 0 0;
}

#PageContent .SecondColumn, #PageContent .ThreeQuartersWidth
{
	background: #FFFFFF;
	display: inline;
	padding: 11px 2% 0 2%;
	min-height: 458px;
	width: 43.9%;	
}

#PageContent .OneQuarterWidth {width: 23%;}

#PageContent .ThreeQuartersWidth {width: 69%;}

#PageContent .ExtendedColumn {min-height: 942px;}

#PageContent .ExtendedColumn2 {min-height: 700px;}

#PageContent .ExtendedColumn3 {min-height: 1426px;}

#PageContent .ExtendedColumn4 {min-height: 4330px;}

#PageContent .ExtendedColumn5 {min-height: 2152px;}

#PageContent .ExtendedColumn6 {min-height: 2878px;}

#PageContent .TwoColumnsContent img
{
	float: left;
	margin-bottom: 15px;
}

#PageContent .TwoColumnsContent img.LastImage {margin-bottom: 0;}

#PageContent .TwoColumnsContent img.RightImage {margin-left: 12px;}

#PageContent h2, #PageContent h3
{
	font-size: 140%;
	font-weight: normal;
	margin-bottom: 15px;
}

#PageContent h2 img.Bag {margin-right: 5px;}

#PageContent h2.SampleHeader {line-height: 30px;}

#PageContent h2.SampleHeader img {margin-right: 5px;}

#PageContent h3
{
	line-height: 150%;
	margin-bottom: 0;
}

#PageContent p, #PageContent .SingleColumnContent ul, #PageContent .SingleColumnContent li, #PageContent .TwoColumnsContent ul, #PageContent .TwoColumnsContent li
{
	float: left;
	line-height: 160%;
	margin-bottom: 15px;
	width: 100%;
}

#PageContent p.SmallText {font-size: 80%;}

#PageContent .SingleColumnContent ul, #PageContent .TwoColumnsContent ul, #PageContent .SingleColumnContent ul li ul, #PageContent .TwoColumnsContent ul li ul
{
	float: left;
	width: 95%;
	list-style: url('../images/footerlinkdot.gif');
	margin-left: 0;
	padding-left: 3%;
}

#PageContent .SingleColumnContent li, #PageContent .TwoColumnsContent li
{
	line-height: 140%;
	margin-bottom: 0;
	padding-left: 1%;
	float: none;
	vertical-align: middle;
	width: 96%;
}

#PageContent dl, #PageContent dt, #PageContent dd
{
	float: left;
	line-height: 160%;
	width: 99%;
}

#PageContent dt
{
	font-size: 140%;
	line-height: 150%;
}

#PageContent dt.TitleWithImage
{
	display: inline;
	margin-right: 10px;
	width: auto;
}

#PageContent dd {margin-bottom: 15px;}

#PageContent .TwoColumnsContent  dl dd.Image
{
	margin-bottom: 0;
	width: auto;
}

#PageContent .TwoColumnsContent  dl dd.Image img
{
	float: left;
	margin: 0;
}

#CleaningMethodsInfo
{
	float: left;
	width: 100%;
}

#CleaningMethods
{
	float: left;
	margin-bottom: 20px;
	width: 55%;
}

#CleaningMethods caption
{	
	font-size: 140%;
	padding: 0 5px 20px 0;
}

#CleaningMethods th, #CleaningMethods td
{
	border: 1px solid #000000;
	padding: 4px 6px;
}

#CleaningMethods th
{
	font-weight: bold;
}

#CleaningMethodsLegend
{
	float: right;
	margin-bottom: 20px;
	width: 40%;
}

#CleaningMethodsLegend h4
{
	font-size: 140%;
	font-weight: normal;
	padding: 0 5px 20px 0;
}

#CleaningMethodsLegend dl
{
	float:left;
	width: 100%;
}

#CleaningMethodsLegend dt
{
	float: left;
	font-size: 100%;
	line-height: 120%;
	width: 10%;
}

#CleaningMethodsLegend dd
{
	float:left;
	line-height: 120%;
	width: 85%;
}

#PageContent .TwoColumnsContent  #SiteMap
{
	float: left;
	display: inline;
	margin-left: 15px;
	margin-bottom: 15px;
	width: 95%;
}

#PageContent .TwoColumnsContent  #SiteMap li
{
	float: left;
	margin-bottom: 5px;
	line-height: 100%;
	width: 100%;
}

#PageContent .TwoColumnsContent  #SiteMap li a {line-height: 150%;}

#PageContent .TwoColumnsContent  #SiteMap li ul {margin-bottom: 15px;}

#PageContent .vcard
{
	float: left;
	padding-bottom: 20px;
	width: 100%;
}

#PageContent .vcard p {margin-bottom: 0;}

#PageContent .vcard p span
{
	float: left;
	line-height: 140%;
	width: 90%;
}

#PageContent #hcard-Ryalux-Carpets
{
	font-size: 85%;
	padding: 0 0 15px 0;
}

#PageContent #hcard-Ryalux-Carpets p span
{
	margin-right: 5px;
	width: auto;
}

#PageContent .vcard .fn {display: none;}

#PageContent .vcard .org {font-weight: bold;}

#PageContent .vcard .adr {margin-bottom: 5px;}

#PageContent .vcard .contact {margin-bottom: 15px;}

#PageContent .vcard .contact .ContactLabel
{
	float: left;
	font-weight: bold;
	width: 30%;
}

#PageContent .vcard .contact .ContactValue
{
	float: left;
	width: auto;
}

#PageContent form
{
	 float: left;
	 padding-bottom: 0;
}

#PageContent form fieldset p
{
	margin-bottom: 3px;
	margin-top: 3px;
}

#PageContent form fieldset p label
{
	font-size: 90%;
	font-weight: bold;
}

#PageContent form fieldset p input, #PageContent form fieldset p textarea
{
	font-size: 100%;
	width: 60%;
}

#PageContent form fieldset p textarea {width: 59.5%;}

#PageContent form fieldset p input.button
{
	font-size: 90%;
	font-weight: bold;
	margin-right: 14px;
	width: auto;
}

#FindRetailer fieldset p label, #FindRetailer fieldset p select
{
	margin-bottom: 5px;
	text-align: left;
	width: 60%;
}

#FindRetailer fieldset p input.button
{
	float: left;
	margin-right: 0;
}

#SampleService {margin-bottom: 123px;}

#FactoryShopMap
{
	width: 347px;
	height: 470px;
	margin-bottom: 15px;
	background-color: white;
}

/*	Definitions of the message box that ask user to confirm the default language	*/
#messagebox
{
    float: left;
    margin: 0 auto;
    padding: 300px 0 500px 0;
    position: relative;
    width: 100%;
}

#messagebox .overlay
{
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background: #000000;
    opacity: 0.4;
    -moz-opacity: 0.4;
    filter: alpha(opacity=40);
    height: 720px;
}

#messagebox .content
{
    height: 135px;
	margin: 0 auto;
    padding: 1%;
    position: relative;			 /* Fixes the z-index */
    width: 39%;    
    filter:alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

#messagebox .content a {color: #717275;}

#messagebox .content p, #messagebox .content ul, #messagebox .content li
{
    display: inline;
    float: left;
    line-height: 140%;
    margin: 10px 0;
    padding: 0 4%;
    width: 86%;
    color: #717275;
}

#messagebox .content ul {width: 92%;}

#messagebox .content li
{
    margin: 0 0 5px 0;
    padding: 0;
    width: 100%;
}

/*
	This is for the message box that ask user to confirm the default language
    Lets use the * html hack so only IE6 reads the rule
    Let's compensate for IE6's inability to interpret top: 0; and bottom: 0;
 */

* html #Ryalux {height: expression(document.getElementById("overallwrapper").offsetHeight);}
* html #messagebox .overlay { height: expression(document.getElementById("messagebox").offsetHeight);}
/*	End of message box definitions	*/

#messagebox .content {background: #FFFFFF; border: 1px solid #44687D; color: #000000;}
#messagebox .content p.closemodalwindow a {background: #938B82;}
#messagebox .content p.closemodalwindow a:hover {background: #A62D38;}