/* --------------------------------------------------------------
    Contents:
    01 Reset
    02 Base styles
    03 Helper styles
    04 Page structure
    05 Page components
    06 Overrides
---------------------------------------------------------------*/

/*---------------------------------------------------------------
01 Reset (see http://meyerweb.com/eric/tools/css/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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	background: transparent;
}

img
{ vertical-align: middle; }

body
{ line-height: 1; }

ol, ul
{ list-style: none; }

blockquote, q
{ quotes: none;  }

blockquote:before, blockquote:after,
q:before, q:after
{
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus
{ outline: 0; }

/* remember to highlight inserts somehow! */
ins
{ text-decoration: none; }

del
{ text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table
{
	border-collapse: collapse;
	border-spacing: 0;
}

/*---------------------------------------------------------------
02 Base styles
---------------------------------------------------------------*/
body
{
    font: 62.5%/1.4 Arial, Helvetica, sans serif;
    color: #013014;
    background-color: #fff;
}

h1
{
    margin-bottom: 0.281em;
    font-size: 5.8em;
    line-height: 1;
    font-family: Tahoma, Verdana, Arial, Geneva, Sans-Serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
}

h2
{
    margin-bottom: 0.588em;
    font-size: 1.7em;
    font-family: Tahoma, Verdana, Arial, Geneva, Sans-Serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #017335;
}

h3
{
    margin-bottom: 0.714em;
    font-size: 1.4em;
    font-family: Tahoma, Verdana, Arial, Geneva, Sans-Serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #017335;
}

p
{
    margin-bottom: 0.714em;
    font-size: 1.4em;
}

ul,
ol
{
    margin-bottom: 0.714em;
    font-size: 1.4em;
}
    
ol
{
    list-style: decimal outside;
    margin-left: 1.142em;
}

	ul ul,
	ul ol,
	ol ul,
	ol ol
	{ font-size: 1em; }

ul.horizontal
{ overflow: hidden; }

    ul.horizontal li
    {
        float: left;
        padding: 0 5px;
    }

    ul.horizontal li.first
    { padding-left: 0; }

a
{
    color: #017335;
    text-decoration: none;
    cursor: pointer;
}

a:hover,
a:focus
{ text-decoration: underline; }

strong
{ font-weight: bold; }

em
{ font-style: italic; }

/*---------------------------------------------------------------
03 - Helper styles
---------------------------------------------------------------*/
/* any element with this class will be hidden off screen, but should still be seen by screen readers */
.nonVisual
{
    position: absolute !important;
    left: -9000px !important;
    top: 0 !important;
}

/* unfortunately, legends don't play well with the above rules */
legend.nonVisual
{
    display: none !important;
    visibility: hidden !important;
}

.leader
{ margin-bottom: 0; }

/*---------------------------------------------------------------
04 - Page structure
---------------------------------------------------------------*/
div#page
{
    width: 940px;
    margin: 0 auto;
}

div#header
{
	position: relative;
	z-index: 10;
    width: 940px;
	height: 344px;
	background: #7BCA2E url('../../images/layout/bg1_header.gif') 0 0 no-repeat;
	overflow: hidden;
}

div#siteLogo
{
	position: absolute;
	right: 0;
	top: 0;
	width: 150px;
	height: 90px;
}

div#primaryNavigation
{
	width: 940px;
	padding-top: 28px;
}

	div#primaryNavigation ul
	{
		width: 940px;
		padding: 1px 0 1px 5px;
		margin: 0;
		background: #EAEAEA url('../../images/layout/primaryNavigation_ul.gif') 0 0 repeat-x;
		overflow: hidden;
	}

		div#primaryNavigation ul li
		{
			float: left;
			padding: 0 15px;
			border-right: 1px solid #E0E0E0;
			border-left: 1px solid #F0F0F0;
		}    

		div#primaryNavigation ul li a
		{    	
    		display: block;
			line-height: 2.071;
			padding: 0 20px;
			font-family: Tahoma, Verdana, Arial, Geneva, Sans-Serif;
			text-transform: uppercase;
		}

		div#primaryNavigation ul li.home
		{ border-left: 0; }

		div#primaryNavigation ul li.selfish_hour
		{ border-right: 0; }

		div#primaryNavigation ul li.home a:hover,
		body.home div#primaryNavigation ul li.home a
		{
			color: #fff;
			text-decoration: none;
    		background: transparent url('../../images/layout/primaryNavigation_home-active.gif') 0 0 no-repeat;
		}

		div#primaryNavigation ul li.itsgoodtobeselfish a:hover,
		body.itsgoodtobeselfish div#primaryNavigation ul li.itsgoodtobeselfish a
		{
			color: #fff;
			text-decoration: none;
			background: transparent url('../../images/layout/primaryNavigation_itsGoodToBeSelfish-active.gif') 0 0 no-repeat;
		}

		div#primaryNavigation ul li.bathAndShowerTime a:hover,
		body.bathAndShowerTime div#primaryNavigation ul li.bathAndShowerTime a
		{
			color: #fff;
			text-decoration: none;
    		background: transparent url('../../images/layout/primaryNavigation_bathAndShowerTime-active.gif') 0 0 no-repeat;
		}

		div#primaryNavigation ul li.selfish_hour a:hover,
		body.selfish_hour div#primaryNavigation ul li.selfish_hour a
		{
			color: #fff;
			text-decoration: none;
    		background: transparent url('../../images/layout/primaryNavigation_bathAndShowerTime-active.gif') 0 0 no-repeat;
		}
    
div#breadcrumb
{
	padding-left: 50px;
	margin-bottom: 30px;
	background: transparent url('../../images/layout/bg1_breadcrumb.png') 0 0 repeat;
}
    
	div#breadcrumb p
	{
		font-size: 1.2em;
		line-height: 1.666;
	}
	
	    div#breadcrumb p img
	    {
	        width: 13px;
	        height: 20px;
	        vertical-align: top;
	    }
        
	    div#breadcrumb p,
	    div#breadcrumb p a
	    { color: #fff; }
        
	    div#breadcrumb p span.separator
	    { padding: 0 4px; }

div#body
{
	position: relative;
	z-index: 20;
    width: 800px;
    padding: 45px 70px 20px 49px;
	background: #fff url('../../images/layout/bg1_body.gif') 0 0 repeat-x;
}

div#footer
{
    width: 860px;
    padding: 5px 40px 20px;
	background: #fff url('../../images/layout/footer.gif') 50% 0 no-repeat;
	overflow: hidden;
}

	div#footer p#sharePage
	{
		float: left;
		width: 290px;
		margin: 0;
		font-size: 1.1em;
		line-height: 1.454;
	}

	div#footer div#legal
	{
		float: left;
		width: 440px;
		padding: 3px 0 2px;
		overflow: hidden;
	}

		div#footer div#legal p
		{
			float: left;
			margin: 0;
			padding-right: 10px;
			font-size: 1.1em;
			line-height: 1;
			color: #ADB0B4;
		}

		div#footer div#legal ul
		{
			float: left;
			margin: 0;
			font-size: 1.1em;
			line-height: 1;
		}

			div#footer div#legal ul li
			{
				float: left;
				padding: 0 10px;
				border-left: 1px solid #DADCDF;
			}

				div#footer div#legal ul li a
				{ color: #ADB0B4; }

	div#footer p#tagLine
	{
		float: right;
		width: 130px;
		margin: 0;
		font-family: Tahoma, Verdana, Arial, Geneva, Sans-Serif;
		font-size: 1.1em;
		line-height: 1.454;
		font-weight: bold;
		text-transform: uppercase;
		text-align: right;
		color: #017335;
	}

/*---------------------------------------------------------------
05 Page components
---------------------------------------------------------------*/
div.intro
{
	width: 785px;
	padding-left: 50px;
}

	div.intro p
	{
		margin-bottom: 1em;
		font-size: 2em;
		font-weight: bold;
		font-family: Tahoma, Verdana, Arial, Geneva, Sans-Serif;
		text-transform: uppercase;
		color: #fff;
	}
	
div#catalogueNavigation
{
	width: 900px;
	height: 80px;
	margin-left: 20px;
}
	div#catalogueNavigation ul
	{
		width: 900px;
		margin:0;
		overflow:hidden;
	}
	
		div#catalogueNavigation ul li
		{
			float: left;
			padding-left: 68px;
			font-weight: bold;
			text-align: center;
			text-transform: uppercase;
			background: transparent url('../../images/layout/catalogue-nav-arrow.png') 60px 50% no-repeat;
		}
		
		div#catalogueNavigation ul li.position1
		{
			padding-left: 28px;
			background-position: 20px 50%;
		}
	
div.singleColumn
{ width: 550px; }

div.leftColumn
{
	float: left;
	width: 470px;
}

div.leftColumnShort
{
	float: left;
	width: 315px;
}

rightColumnWide
{
	float: left;
	width: 780px;
	padding-top: 90px;
	padding-left: 10px;
}

div.rightColumn
{
	float: left;
	width: 310px;
	padding-top: 90px;
	padding-left: 10px;
}

	.rightColumn div.feature
	{ width: 290px; }
	
	.rightColumn div.feature p
	{ width: 290px !important; }
	
	.rightColumn div.feature p.featureLink img
	{ float: left; }

	p.featureLink img.pdf
	{ margin-left: 10px;}
		
	.rightColumn p.featureLink span
	{ 
		float: left;
		font-size: 0.85em; 
	}
		
	.rightColumn p.featureLink a
	{ width: 230px !important; }

div.PageBottom
{
    clear:both;
}

div.hero
{
    position: absolute;
    top: -150px;
    right: 30px;
}

div.novella 
{
	position: relative;
	width: 800px;
	margin: 20px 70px;
	overflow: hidden;
}

	div.novella div.transcript
	{
		float: right;
		width: 380px;
	}

		div.novella div.transcript h2
		{ font-size: 2em; }

		div.novella div.transcript p.categoryLink a 
		{
			padding-left: 8px;
			font-weight: bold;
			text-transform: uppercase;
			background: transparent url('../../images/layout/catalogue-nav-arrow.png') 0 50% no-repeat;
		}
		
	div.novella div.categoryImage,
	div.novella div.novellaImage
	{
		position: absolute;
		float: left;
		width: 380px;
		padding: 0 30px 0 20px;
	}
	
	div.novella div.categoryImage
	{
		left: 0;
		top: 30px;
		z-index: 40;
	}

	div.novella div.novellaImage
	{
		left: 60px;
		top: 30px;
		z-index: 30;
	}

div.category
{
	width: 800px;
	margin: 0 70px 10px;
	overflow: hidden;
}
	
	div.category div.info
	{
		float: right;
		width: 380px;
		padding-right: 60px;
	}

		div.category div.info h2
		{ font-size: 2em; }
		
div.products
{
	margin-top: -100px;
	width: 940px;
	padding-bottom: 20px;
}

div.product 
{
	position: relative;
	width: 800px;
	height: 340px;
	margin: 0 70px 10px;
	overflow: hidden;
}
	
	div.product div.info
	{
		position: absolute;
		left: 360px;
		bottom: 0;
		width: 380px;
		padding-right: 60px;
	}

		div.product div.info h2
		{ font-size: 2em; }

		div.product div.info p
		{ margin: 0; }

	div.product div.productImage
	{
		float: left;
		width: 360px;
		padding-left: 40px;
	}

div.homePageIntro
{
	width: 340px;
	margin-bottom: 30px;
}

div.gallery
{
	width: 800px;
	overflow: hidden;
}

div.feature
{
	float: left;
	width: 248px;
	min-height: 400px;
	padding-right: 18px;
}

div.feature.Position1
{ padding-left: 0; }

	div.feature p.featureIntro
	{
		margin: 30px 0 15px;
		padding: 0;
		font-size: 1.2em;
	}

	div.feature h3
	{
		margin-bottom: 20px;
		padding: 0;
		font-size:1.2em;
	}
	
		div.feature h3 a
		{
			padding-left: 8px;
			font-weight: bold;
			text-transform: uppercase;
			background: transparent url('../../images/layout/catalogue-nav-arrow.png') 0 50% no-repeat;
		}

	div.feature p.featureLink
	{
	    width: 240px;
	    overflow: hidden;
	}

	    div.feature p.featureLink a
	    {
		    float: left;
		    width: 150px;
		    padding-top: 16px;
		    font-size: 0.85em;
		    font-weight: bold;
		    line-height: 1.3;
		    text-transform: uppercase;
	    }

div.article
{
    width: 800px;
    overflow: hidden;
}

    div.article div.story
    {
        float: left;
        width: 520px;
        padding-right: 10px;
    }

    div.article div.image
    {
        float: right;
        width: 270px;
    }
	
ul#sitemap h2,
ul#sitemap h3
{
	margin: 0;
	font-size: 1.142em;
	text-transform: none;
}
	
ul#sitemap p
{ font-size: 0.857em; }
	
	ul#sitemap ul
	{ margin-left: 1.428em; }

ul#basic 
{
	list-style-type: disc;
	list-style-position: outside;
	margin-left: 1.142em;
}

div#simplemodal-overlay
{
    background-color: #000;
    cursor: wait;
}

div#simplemodal-container
{
    position: relative;
    width: 450px;
    text-align: left;
}

    div#simplemodal-container div.simplemodal-content
    {
        padding: 20px;
        background-color: #017335;
    }

        div#simplemodal-container div.simplemodal-content h2,
        div#simplemodal-container div.simplemodal-content p,
        div#simplemodal-container div.simplemodal-content a
        { color: #fff; }
        
        div#simplemodal-container div.simplemodal-content a
        { text-decoration: underline; }

    div#simplemodal-container a.modalCloseX
    {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 1.6em;
        line-height: 1;
        font-weight: bold;
        text-decoration: none;
        color: #fff;
    }

/*---------------------------------------------------------------
06 Overrides
---------------------------------------------------------------*/
body.bg1 div#header
{ background-image: url('../../images/layout/bg1_header.gif'); }
    
body.bg1 div#breadcrumb
{ background-image: url('../../images/layout/bg1_breadcrumb.png'); }

body.bg1 div#body
{ background-image: url('../../images/layout/bg1_body.gif'); }

body.bg2 div#header
{ background-image: url('../../images/layout/bg2_header.gif'); }
    
body.bg2 div#breadcrumb
{ background-image: url('../../images/layout/bg2_breadcrumb.png'); }

body.bg2 div#body
{ background-image: url('../../images/layout/bg2_body.gif'); }

body.bg3 div#header
{ background-image: url('../../images/layout/bg3_header.gif'); }
    
body.bg3 div#breadcrumb
{ background-image: url('../../images/layout/bg3_breadcrumb.png'); }

body.bg3 div#body
{ background-image: url('../../images/layout/bg3_body.gif'); }

body.bg4 div#header
{ background-image: url('../../images/layout/bg4_header.gif'); }
    
body.bg4 div#breadcrumb
{ background-image: url('../../images/layout/bg4_breadcrumb.png'); }

body.bg4 div#body
{ background-image: url('../../images/layout/bg4_body.gif'); }

body.bg5 div#header
{ background-image: url('../../images/layout/bg5_header.gif'); }
    
body.bg5 div#breadcrumb
{ background-image: url('../../images/layout/bg5_breadcrumb.png'); }

body.bg5 div#body
{ background-image: url('../../images/layout/bg5_body.gif'); }

body.bg6 div#header
{ background-image: url('../../images/layout/bg1_header.png');
  height:673px;
  background-color:#ffffff;
}
    
body.bg6 div#breadcrumb
{ background-image: url('../../images/layout/bg1_breadcrumb.png'); }

body.bg6 div#body
{ 
	background-image: none !important;
}

body.bg6 p.LastLine
{
	margin-top:40px;
}

body.bg6 .intro a
{	
	display:block;	
	width:600px;
	height:300px;
	margin-left:280px;
}

body.bathAndShowerTime div#body 
{
	width: 940px;
	padding: 10px 0 0 0;
}

html.hasFlash
{
	height: 100%;
}

	html.hasFlash body
	{ height: 100%; }