/***
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: #555555
					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: Helvetica, Arial, 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
{
	height: 72px;
	position: relative;
}
#logo_siteutils img {padding: 17px 10px;}

#siteutilities
{
	height: 36px;
	position: absolute;
	right: 10px;
	top: 19px;
	width: 50%;
}

#logo_siteutils #sampleLink
{
	background: url('../Images/shoppingbasket.gif') no-repeat 0 0;
	color: #555555;
	font-weight: bold;
	padding-left: 33px;
	position: absolute;
	right: 0;
	text-decoration: none;
}

#logo_siteutils #sampleLink:hover
{
	background-position: 0 -15px;
	text-decoration: underline;
}
#logo_siteutils #sampleLink em {color: #000000;}

#logo_siteutils #sampleLink.emptycart {display: none;}

#additionalNav
{
	bottom: 0;
	list-style: none;
	position: absolute;
	right: 0;
	text-transform: lowercase;
}

#additionalNav li
{
	color: #000000;
	display: inline;
	padding: 2px 0 3px 12px;
}

#additionalNav li a
{
	color: #000000;
	float: none;
	text-decoration: none;
}

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

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


#shoppingcart a
{
	background:  url(../Images/shoppingcart_end.gif) no-repeat right top;
	color: #555555;
	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, #search fieldset {float: left;}

#search {padding-bottom: 16px;}

#search legend {display: none;}

#searchterm
{
	background: #eeeeee;
	border: 1px solid #999999;
	color: #666666;
	display: inline;
	float: left;
	font-size: 90%;
	margin-top: 0;
	padding: 3px 5px;
	width: 220px;
}

#searchterm.empty
{
	border-color: #eeeeee;
	color: #bbbbbb;
}

#mainnav
{
	float: left;
	height: 51px;
	text-transform: lowercase;
	width: 960px;
}

#mainnav li
{
	float: left;
	position: relative;
	width: 160px;
	z-index: 1000;
}

#mainnav li span
{
	display: block;
	padding: 12px 7px 13px 10px;
	width: 143px;
}

#mainnav li span.synopsis
{
	background: #ffffff;
	border-bottom: 1px solid #000000;
	display: none;
	padding-top: 8px;
	position: absolute;
	top: 48px;
	z-index: 1001;
}
#mainnav li span.hover {display: block;}

#mainnav li span a
{
	display: block;
	font-size: 100%;
	line-height: 100%;
	text-decoration: none;
}

#mainnav li span.navname a
{
	font-weight: bold;
	font-size: 200%;
	max-height: 51px;
}

/*#mainnav li span.navname a[lang='it'] {font-size: 180%;}*/

#mainnav li span.navname span {display: none;}

#mainnav li span.synopsis a
{
	color: #555555;
	line-height: 135%;
}

#header .additionalcontent
{
	border-top: 1px solid black;
	clear: both;
	height: 26px;
	padding: 19px 0px 15px;
}
/*	End of header elements definitions	*/

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

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

#breadcrumbs li a
{
	background: url('../Images/breadcrumbbgimage.gif') no-repeat right center;
	float: left;
	padding-right: 14px;
}

#header .newsBreadcrumbs #breadcrumbs {text-transform: none;}
/*	End of breadcrumbs definitions	*/

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

.imagegallerypagecontent {height: 865px;}
.ProductTypeId_10 {height: 1611px;}

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

#pagecontent .newsarticlepage h2 {text-transform: none;}

#pagecontent h2.underline { border-bottom: 1px solid #000000; }

#pagecontent p.top-instructions 
{
	margin: 10px;
	padding-bottom: 15px;
	padding-top: 40px;
}

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

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

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

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

/*	Definitions for footer elements	*/
#footer {padding: 15px 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
{
	margin-left: 10px;
	width: 750px;
}

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

#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 p
{
	float: left;
	margin-top: 4px;
	padding: 0 10px 1px 16px;
	width: auto;	
}
/*	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%;
}

#messagebox .content
{
    color: #FFFFFF;
    height: 170px;
    margin: 0 auto;
    padding: 0;
    position: relative;			 /* Fixes the z-index */
    width: 38%;
    
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

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

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

#messagebox .content p.closemodalwindow
{
    color: #FFFFFF;
    display: inline;
    float: right;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 120%;
    font-weight: bold;
    margin: 0 -1px 0 0;
    padding: 0;
    width: auto;
}

#messagebox .content p.closemodalwindow a
{
	float: left;
	line-height: 100%;
	margin: 0;
	padding: 0 5px 5px 5px;
	text-decoration: none;
}

#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 #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,
#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 .product p 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, #Twitter a
{
	color: #555555;
}
#mainnav li a, #mainnav li a:hover, #mainnav li a.currentpage,
#pagecontent #news h2, #pagecontent #casestudy h2, #pagecontent #Facebook a, #pagecontent #productfocus h2,
#footer select, #footer a, #footer span, #footer p,
#mainnav li a span, #mainnav li a:hover span, #mainnav li a.currentpage span,
#pagecontent ul#SiteMap li ul, #pagecontent ul#SiteMap li a, #pagecontent ul.searchresults li a {color: #000000;}
#mainnav li a span.synopsis, #mainnav li a:hover span.synopsis, #mainnav li a.currentpage span.synopsis {color: #555555;}

#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,
#pagecontent .productinfo ul.techspec li strong, #productcolours li h4 a, #productcolours li fieldset label,
#pagecontent #ProductCoordinatedColours li h4,
#sectionnav li, #sectionnav li a,
#contacts a,
#pagecontent form fieldset label,
#salesarea_contacts a,
#news .contentarea h3 a,
#casestudy .contentarea h3 a,
#productfocus .contentarea h3 a,
#breadcrumbs li, #breadcrumbs li a,
#content .copy_with_inlinebox div.vcard a,
#pagecontent .guides li h4
{
	color: #000000;
}

#shoppingcart a em, #colours .message em, #content li a, #content p a, #pagecontent .image-gallery-welcome p a {color: #000000;}

#header, #logo_siteutils, #pagecontent .productinfo ul, #productcolours li h4 a {border-bottom: 1px solid #000000;}

#logo_siteutils {border-bottom: 3px solid #000000;}

#pagecontent .productinfo ul li#ProductColourFullTile, #colours  {border-right: 1px solid #000000;}

#colours, #content, #ContactUs, #pagecontent .FormResponse, #pagecontent .PostedFormResponse, #content #libraryshots {border-left: 1px solid #000000;}

#footer, #casestudy, #productfocus, #Facebook, #Twitter {border-top: 1px solid #000000;}

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

#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 #000000;
}

#homepageimage img {border: 10px solid #000000;}

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

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

#pagecontent form fieldset .formfieldoptions {border-top: 1px solid #000000; border-bottom: 1px solid #000000;}

#f fieldset p input.button {background: #E8E9E2; border: 1px solid #000000; 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: #000000; border: 17px dotted #938B82;}
#messagebox .content p.closemodalwindow a {background: #938B82;}
#messagebox .content p.closemodalwindow a:hover {background: #A62D38;}
/*	End of branding style rules	*/


/*	Modify sIFRed elements	*/
/* These are standard sIFR styles... do not modify */
.sIFR-flash
{
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {visibility: visible !important;}

span.sIFR-alternate
{
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {display: none !important;}

/* These "decoy" styles are used to hide the browser text before it is replaced...
the negative-letter spacing in this case is used to make the browser text metrics
match up with the sIFR text metrics since the sIFR text in this example is so much narrower... 
your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash #news h2, .sIFR-hasFlash #Facebook h2, .sIFR-hasFlash #Twitter h2,
.sIFR-hasFlash #casestudy h2, .sIFR-hasFlash #productfocus h2
{
	font-size: 85%;
	visibility: hidden;
	width: 100%;
}
.sIFR-hasFlash #Facebook h2 {width: 80%;}

.sIFR-hasFlash #mainnav li span.navname {font-size: 100%;}

#sectionnav li span { margin-right: 4px; width: 5px; height: 15px; }

#sectionnav li.collection-2 a { background: url("../Images/Uploads/ProductCatalogue/Ranges/Thumbnails/Structure_Arrow.jpg") no-repeat scroll -30px center transparent; }
#sectionnav li.collection-2 span { background: url("../Images/Uploads/ProductCatalogue/Ranges/Thumbnails/Structure_Tab_Small.jpg") no-repeat scroll left top transparent; }
#sectionnav li.collection-2 a:hover, #sectionnav li.collection-2 a.currentpage { background-position: 5px center; }

#sectionnav li.collection-4 a { background: url("../Images/Uploads/ProductCatalogue/Ranges/Thumbnails/Fibre_Arrow.jpg") no-repeat scroll -30px center transparent; }
#sectionnav li.collection-4 span { background: url("../Images/Uploads/ProductCatalogue/Ranges/Thumbnails/Fibre_Tab_Small.jpg") no-repeat scroll left top transparent; }
#sectionnav li.collection-4 a:hover, #sectionnav li.collection-4 a.currentpage { background-position: 5px center; }

#sectionnav li.collection-6 a{ background: url("../Images/Uploads/ProductCatalogue/Ranges/Thumbnails/Tufted_Arrow.jpg") no-repeat scroll -30px center transparent;}
#sectionnav li.collection-6 span { background: url("../Images/Uploads/ProductCatalogue/Ranges/Thumbnails/Tufted_Tab_Small.jpg") no-repeat scroll left top transparent; }
#sectionnav li.collection-6 a:hover, #sectionnav li.collection-6 a.currentpage { background-position: 5px center; }

#sectionnav li.collection-10 a { background: url("../Images/Uploads/ProductCatalogue/Ranges/Thumbnails/Fibre_Arrow.jpg") no-repeat scroll -30px center transparent; }
#sectionnav li.collection-10 span { background: url("../Images/Uploads/ProductCatalogue/Ranges/Thumbnails/Entrance_Tab_Small.jpg") no-repeat scroll left top transparent; }
#sectionnav li.collection-10 a:hover, #sectionnav li.collection-10 a.currentpage { background-position: 5px center; }

#sectionnav li.collection-15 a { background: url("../Images/Uploads/ProductCatalogue/Ranges/Thumbnails/Vinyl_Arrow.jpg") no-repeat scroll -30px center transparent; }
#sectionnav li.collection-15 span { background: url("../Images/Uploads/ProductCatalogue/Ranges/Thumbnails/Vinyl_Tab_Small.jpg") no-repeat scroll left top transparent; }
#sectionnav li.collection-15 a:hover, #sectionnav li.collection-15 a.currentpage { background-position: 5px center; }