/***
Filename:		base.css
Author:			Andrei Vais
Date:			28/09/2009
Description:	Base styling for burmatex

Corporate colours:	Background: #FFFFFF - White
					Burmatex blue: #005395 - Pantone 653 C
					Burmatex grey: #938B82 - Pantone 403 C
					Carpet dark blue: #44687D - Pantone 5405 C
					Carpet beige: #B6985E - Pantone 465 C
					Carpet red: #A62D38 - Pantone 704 C
					Carpet pale blue: #92B1CD - Pantone 644 C

Colours:		Background: #FFFFFF - 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: #FFFFFF;
	color: #000000;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 90%;
	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: 960px;
}

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

#header, #logo_siteutils, #pagecontent, #footer
{
	float: left;
	width: 100%;
}

/*	Definitions for header elements	*/
#logo_siteutils a, #logo_siteutils img
{
	float: left;
}

#logo_siteutils img
{
	display: inline;
	padding: 17px 4px;
}

#siteutilities {width: 33.1%;}

#siteutilities, #search, #shoppingcart {float: right;}

#shoppingcart
{
	background: #FFFFFF  url(../Images/shoppingcart_stickman.gif) no-repeat left top;
	margin-top: 17px;
	height: 90px;
	width: 100%;
}

#shoppingcart.emptycart {visibility: hidden;}

#shoppingcart a
{
	background:  url(../Images/shoppingcart_end.gif) no-repeat right top;
	color: #938B82;
	display: inline;	
	float: left;
	height: 30px;
	margin-left: 13%;
	padding: 10px 0 0 0;
	text-align: center;
	text-decoration: none;
	width: 87%;
}

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

#shoppingcart a em
{
	font-size: 120%;
	font-style: normal;
	font-weight: bold;
}

#search fieldset, #search legend {float: left;}

#search {margin-top: -34px;}

#search legend {display: none;}

#searchterm
{
	color: #CCCCCC;
	display: inline;
	font-size: 90%;
	padding: 2px 5px;
	width: 180px;
}

#searchbtn
{
	background: #FFFFFF;
	border: 0;
	color: #92B1CD;
	display: inline;
	font-size: 150%;
	letter-spacing: -1px;
	padding: 1px 0 0 2px;
	text-transform: lowercase;
}

#mainnav
{
	float: left;
	text-transform: lowercase;
	width: 780px;
}

#mainnav li {float: left;}

#mainnav li a, #mainnav li a span
{
	color: #CCCCCC;
	display: block;
	float: left;
	font-size: 100%;
	height: 110px;
	line-height: 118%;
	padding: 16px 7px 0 17px;
	text-decoration: none;
	width: 132px;
}

#mainnav li a.smallernavitem {width: 118px;}
#mainnav li a.largernavitem {width: 146px;}

#mainnav li a span
{
	display: inline;
	font-size: 200%;
	height: auto;
	line-height: 100%;
	letter-spacing: -1px;
	padding: 0 0 3px 0;
	width: 100%;
}

#mainnav li a:hover, #mainnav li a.currentpage {background: url('../Images/mainnavitemrollover.gif') no-repeat 10px 0;}

#additionalnav
{
	display: inline;
	list-style: none;
	float: left;
	margin: 4px 0 0 10px;
	text-transform: lowercase;
	width: 155px;
}

#additionalnav li
{
	background: url('../Images/navitemarrow.gif') no-repeat left center;
	display: inline;
	float: left;
	padding: 2px 0 3px 12px;
	width: 140px;
}

#additionalnav li a
{
	font-size: 105%;
	text-decoration: none;
}

#additionalnav li a:hover, #additionalnav li a.currentpage
{
	text-decoration: underline;
}
/*	End of header elements definitions	*/

/*	Definitions for breadcrumbs	*/
#breadcrumbs
{
	float: left;
	padding: 6px 0;
	text-transform: lowercase;
	width: 100%;
}

#breadcrumbs li
{
	color: #A62D38;
	float: left;
	font-weight: bold;
	padding: 0 0 1px 4px;
}

#breadcrumbs li a
{
	background: url('../Images/breadcrumbbgimage.gif') no-repeat right center;
	color: #005395;
	float: left;
	padding-right: 10px;
}
/*	End of breadcrumbs definitions	*/

/*	Definitions for pagecontent elements	*/
#pagecontent
{
	display: inline;
	margin: 20px 0;
}

#pagecontent h2
{
	display: inline;
	float: left;
	font-size: 190%;
	font-weight: normal;
	margin: 2px 0 10px 0.2%;
	padding-bottom: 5px;
	text-transform: lowercase;
	width: 98%;
}


#pagecontent .leftcontent
{
	float: left;
	width: 241px;
}

#pagecontent .rightcontent
{
	float: right;
	width: 705px;
}

#pagecontent .leftcontent h2 {margin-left: 0.4%;}

#pagecontent .message
{
	background: #FFFFFF url('../Images/shoppingcart_stickman.gif') no-repeat left center;
	display: inline;
	float: right;
	height: 95px;
	width: 100%;
	
}

#pagecontent .message p
{
	background: url(../Images/shoppingcart_end.gif) no-repeat right top;
	color: #44687D;
	display: inline;	
	float: right;
	font-size: 85%;
	height: 37px;
	line-height: 130%;
	margin-left: 17%;
	padding: 3px 4% 0 0;
	text-align: center;
	width: 78%;
	
}
/*	End of pagecontent elements definitions	*/

/*	Definitions for footer elements	*/
#footer {padding: 6px 0 20px 0; text-transform: lowercase;}

#footer ul, #footer li, #footer a, #footer form, #footer fieldset, #footer legend, #footer span, #footer select {float: left;}

#footer span
{
	padding-top: 4px;
	padding-bottom: 1px;
}

#footer legend {display: none;}

#footer select
{
	margin: 0 0 0 5px;
	padding: 0;	
}

#footer select, #footer select option {text-transform: lowercase;}

#footer ul {width: 609px;}

#footer li 
{
	display: inline;
	float: left;
	margin: 4px 10px 10px 0;
	padding-right: 10px;
}

#footer li.last, #footer li.last-no-lang
{
	border-right: 0;
	margin-right: 0;
	padding-right: 0;
}

#footer li.last {margin: 0;}

#footer a
{
	text-decoration: none;
	padding-bottom: 1px;
}

#footer a:hover, #footer a.currentpage {text-decoration: underline;}

#footer div
{
	float: right;
	width: auto;
}

#footer div ul#SocialNetworksSites, #footer div p
{
	float: left;
	padding-right: 16px;
	width: auto;	
}

#footer div p
{
	margin-top: 4px;
	padding: 0 0 1px 16px;
}

#footer div ul#SocialNetworksSites li
{
	border: 0;
	margin: 0;
	padding: 0 0 0 8px;
}
/*	End of footer elements definitions	*/

/*	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: 1024px;
}

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

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

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

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

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

#messagebox .content li img
{
	float: left;
	margin-top: 2px; 
}
/*
	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 #burmatex {height: expression(document.getElementById("overallwrapper").offsetHeight);}
* html #messagebox .overlay { height: expression(document.getElementById("messagebox").offsetHeight);}
/*	End of message box definitions	*/

/*	Start of branding style rules	*/
#homepageimage, #content #libraryshots li a:hover span, #content #libraryshots li a.current span {background: #938B82;}
#breadcrumbs, #content .inlinebox, #imagemontage {background: #E7E6D6;}

html, body,
#mainnav li a:hover, #mainnav li a:hover span, #mainnav li a.currentpage, #mainnav li a.currentpage span,
#additionalnav li a,
#pagecontent .contentarea h3, #pagecontent .contentarea h3 a, #pagecontent .contentarea p, #pagecontent .contentarea p a,
#pagecontent h4, #pagecontent h4 a,
#pagecontent .rightcontent .productgroup h5, #pagecontent .rightcontent .productgroup h5 a,
#pagecontent #news h2, #pagecontent #casestudies h2, #pagecontent #productfocus h2, #pagecontent #designtrends h2,
#footer select, #footer a,
#pagecontent .productinfo ul li,
#pagecontent .productinfo ul.additionallinks li.button a,
#content .inlinebox h3,
#contacts .contactgroup h3, #contacts .contactgroup span,
#sectionnav li ul li, #sectionnav li ul li a,
#content #libraryshots li a span
{
	color: #938B82;
}

#pagecontent h2, #pagecontent h3, #pagecontent ul li h3, #pagecontent ul li h3 a,
#pagecontent .rightcontent h3, #pagecontent .rightcontent ul li h3, #pagecontent .rightcontent ul li h3 a,
#pagecontent .rightcontent .productgroup h4, #pagecontent .rightcontent .productgroup h4 a, #pagecontent .productinfo ul li a,
#productcolours li h4 a, #productcolours li fieldset label,
#sectionnav li, #sectionnav li a,
#contacts a,
#pagecontent form fieldset label,
#salesarea_contacts a
{
	color: #005395;
}

#shoppingcart a em, #casestudies .contentarea h3 a, #designtrends .contentarea h3 a, #colours .message em, #content li a, #content p a {color: #A62D38;}

#mainnav li a#top-navitem-1 span, #mainnav li a#about:hover span {color: #44687D;}
#mainnav li a#top-navitem-2 span, #mainnav li a#products:hover span {color: #A62D38;}
#mainnav li a#top-navitem-3 span, #mainnav li a#design:hover span {color: #B6985E;}
#mainnav li a#top-navitem-4 span, #mainnav li a#advice:hover span {color: #92B1CD;}
#mainnav li a#top-navitem-5 span, #mainnav li a#image:hover span {color: #938B82;}

#header, #logo_siteutils, #designtrends, #pagecontent .productinfo ul, #productcolours li h4 a {border-bottom: 1px dotted #938B82;}

#mainnav, #colours {border-right: 1px dotted #938B82;}
#pagecontent .productinfo ul li#ProductColourZoomedTile {border-left: 1px dotted #938B82;}

#pagecontent .rightcontent, #colours, #content, #ContactUs, #pagecontent .FormResponse, #pagecontent .PostedFormResponse, #content #libraryshots {border-left: 1px dotted #938B82;}

#footer, #news, #productfocus {border-top: 1px dotted #938B82;}

#footer li {border-right: 1px solid #938B82;}

#footer div p {border-left: 1px solid #938B82;}

#pagecontent .ranges li, #pagecontent .rightcontent .productgroup li,
#burmatex .productgroups .leftcontent .rangeroomshot,
#pagecontent .productinfo, #productcolours li,
#pagecontent .contentarea a img,
#content #libraryshots li a,
#content #libraryshots li a:hover, #content #libraryshots li a.current,
#burmatex #MessageContainer #LangSelect
{
	border: 1px solid #938B82;
}

#colours fieldset select {border: 1px solid #92B1CD; border-top-color: #938B82;}

#colours fieldset #submit {background: #E8EAE3;	border: 1px solid #938B82; color: #77786c;}

#pagecontent form fieldset .formfieldoptions {border-top: 1px dotted #938B82; border-bottom: 1px dotted #938B82;}

#f fieldset p input.button {background: #E8E9E2; border: 1px solid #B9B9B2; color: #77786C;}

#homepageimage, #burmatex .productgroups .leftcontent .rangeroomshot {background: url('../Images/loader.gif') no-repeat center center;}
#pagecontent .contentarea a, #pagecontent .rightcontent .productgroup li {background: url('../Images/loader.gif') no-repeat center top;}
#pagecontent .ranges li {background: url('../Images/loader.gif') no-repeat 25px 25px;}
#pagecontent .productinfo {background: url('../Images/loader.gif') no-repeat center 113px;}
#pagecontent .productinfo ul.coordinatingproducts li {background: url('../Images/loader.gif') no-repeat center 102px;}
#colours .colours li {background: url('../Images/loader.gif') no-repeat center 3px;}

#sectionnav li a:hover, #sectionnav li a.currentpage {background: url('../Images/arrow_bullet.gif') no-repeat 5px center;}

#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;}
/*	End of branding style rules	*/