/*--------------------------------------------------

LAYOUT CSS

Styles for the main layout components, navigation
elements, and template related styles.

--------------------------------------------------*/

/* CONTAINERS
--------------------------------------------------*/
#page {
	margin: 0 auto;
	text-align: left;
	width: 100%;
}

#header {
	background: url(../images/global/akzonobel_tag.gif) no-repeat top right;
	margin: 0 auto;
	min-height: 139px;
	width: 980px;
}

* html #header {
	height: 139px;
}

#body {
	margin: 12px auto 24px;
	width: 980px;
}

#content {
	width: 980px;
	min-height: 400px;
	float: left;
}
* html #content {
	overflow-x: hidden;
	display: inline;
}
#aside {
	width: 260px;
	min-height: 100px;
	float: left;
}
* html #aside {
	height: 100px;
}

#footer {
	background: url(../images/canvas/footer.gif) repeat-x;
	clear: both;
	margin: 0 auto;
	overflow: hidden;
	width: 100%;
	height: 290px;
}

/* CONTAINERS - Header
--------------------------------------------------*/
#logo {
	float: left;
	margin: 11px 13px
}
* html #logo {
	display: inline; /*@ WIE6 : DFM @*/
}

/* NAVIGATION - Utility
--------------------------------------------------*/
.utility-nav {
	display: inline;
	margin: 0;
	list-style-type: none;
}
.utility-nav li {
	background: url(../images/global/pipe.gif) no-repeat 0 2px;
	margin: 0 0 0 7px;
	padding: 0 0 0 8px;
	float: left;
}
.utility-nav li.first-child {
	background: none;
	margin: 0;
	padding: 0;
}
.utility-nav a:link,
.utility-nav a:visited,
.utility-nav a:active {
	text-decoration: none;
}
.utility-nav a:hover {
	text-decoration: underline;
}
#utility-nav {
	display: inline;
	float: right;
	margin: 16px 30px 0 0;
	list-style-type: none;
}

/* NAVIGATION - Primary 
--------------------------------------------------*/
#nav {
	clear: both;
	background: url(../images/canvas/nav.gif) repeat-x 0 -80px;
	float: left;
	height: 40px;
	width: 980px;
}
#nav ul {
	background: url(../images/canvas/nav.gif) no-repeat;
	float: left;
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 720px;
}
#nav li {
	margin: 0;
	padding: 0;
	float: left
}
#nav li a {
	background: url(../images/canvas/nav.gif) no-repeat 0 40px;
	display: block;
	float: left;
	height: 0;
	margin: 0 3px 0 0;
	overflow: hidden;
	padding: 40px 0 0;
	width: 117px;
}
* html #nav li a {
	display: inline;
}
#nav li a:hover {
	background-position: 0 -40px;
}
li#nav-colour a {
	width: 103px;
}
li#nav-environment a {
	width: 127px;
}
li#nav-advice a {
	width: 89px;
}
li#nav-news a {
	width: 82px;
}
li#nav-literature a {
	width: 103px;
}
li#nav-colour a {
	width: 103px;
}
li#nav-contact a {
	width: 95px;
}
li#nav-products.active a {
	background-position: 0 -40px;
}
li#nav-colour.active a,
li#nav-colour a:hover {
	background-position: -120px -40px;
}
li#nav-environment.active a,
li#nav-environment a:hover {
	background-position: -226px -40px;
} 
li#nav-advice.active a,
li#nav-advice a:hover {
	background-position: -356px -40px;
}
li#nav-news.active a,
li#nav-news a:hover {
	background-position: -448px -40px;
}
li#nav-literature.active a,
li#nav-literature a:hover {
	background-position: -533px -40px;
}
li#nav-contact.active a,
li#nav-contact a:hover {
	background-position: -226px -40px;
}

/* NAVIGATION BLUE HEADER
--------------------------------------------------*/
#header-blue {
	background: #fff url(../images/global/img_logo_an.gif) no-repeat top right;
	margin: 12px auto;
	min-height: 113px;
	width: 980px;
}
#header-blue #nav {
	clear: both;
	background: #085694;
	float: left;
	height: 62px;
	width: 980px;
	margin:0 0 12px;
}
#header-blue #nav ul {
	background: url(../images/canvas/nav_blue.gif) no-repeat;
	float: left;
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 868px;
}
#header-blue #nav li a {
	background: url(../images/canvas/nav_blue.gif) no-repeat 0 62px;
	display: block;
	float: left;
	height: 0;
	margin: 0 3px 0 0;
	overflow: hidden;
	padding: 62px 0 0;
	width: 90px;
}
* html #header-blue #nav li a {
	display: inline;
}

#header-blue #nav li a:hover {
	background-position: 0 -62px;
}

#header-blue #nav li#nav-home a {
	width: 96px;
}
#header-blue #nav li#nav-products a {
	width: 112px;
}
#header-blue #nav li#nav-colours a {
	width: 95px;
}
#header-blue #nav li#nav-specifiers a {
	width: 104px;
}
#header-blue #nav li#nav-decorators a {
	width: 126px;
}
#header-blue #nav li#nav-environment a {
	width: 129px;
}
#header-blue #nav li#nav-support a {
	width: 103px;
}
#header-blue #nav li#nav-news a {
	width: 79px;
}
#header-blue #nav li#nav-products a:hover {
	background-position: -99px -62px;
}
#header-blue #nav li#nav-colours a:hover {
	background-position: -214px -62px;
}
#header-blue #nav li#nav-specifiers a:hover {
	background-position: -312px -62px;
}
#header-blue #nav li#nav-decorators a:hover {
	background-position: -419px -62px;
}
#header-blue #nav li#nav-environment a:hover {
	background-position: -548px -62px;
}
#header-blue #nav li#nav-support a:hover {
	background-position: -680px -62px;
}
#header-blue #nav li#nav-news a:hover {
	background-position: -786px -62px;
}

#header-blue #search-bar {
	float: right;
	margin:10px 230px 0 0;
}

#header-blue #search-bar .form-btn {
	vertical-align: bottom;
}

/* NAVIGATION BLUE FOOTER
--------------------------------------------------*/

#footer-blue {
	background:#085694;
	margin: 12px auto;
	min-height: 50px;
	width: 980px;
}
#footer-blue ul {
	float: right;
	list-style: none;
	margin:0;
	padding: 0;
}
#footer-blue ul li {
	float: left;
	border-right: 1px solid #fff;
	margin:18px 0;
	padding:0 10px;
}

#footer-blue ul li.last-child {
	border-right: none;
}

#footer-blue ul li a {
	color: #fff;
	text-decoration: none;
}

#footer-blue ul li a:hover {
	text-decoration: underline;
}

/* NAVIGATION - Aside
--------------------------------------------------
#aside ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#aside li {
	margin: 0;
	padding: 0;
}
*/

/* NAVIGATION - Footer
--------------------------------------------------*/
#footer .content {
	margin: 0 auto;
	text-align: left;
	width: 980px;
}
#footer a:link,
#footer a:visited,
#footer a:active,
#footer a:hover {
	color: #818181;
	text-decoration: none;
}
#footer a:hover {
	text-decoration: underline;
}
.footer-nav {
	float: left;
	margin: 0 0 17px;
	padding: 25px 0 0;
	min-height: 215px;
	width: 240px;
}
* html .footer-nav {
	height: 215px;
}
.footer-nav h6 {
	background: url(../images/headings/footer_nav.gif) no-repeat 0 0;
	height: 0;
	padding: 21px 0 0;
	margin: 0 0 16px;
	overflow: hidden;
	width: 240px;
	font-size: 120%;
}
#footer .utility-nav {
	display: block;
	float: left;
}

/* Useful tools
-------------------------*/
#userful-tools a:link,
#userful-tools a:visited,
#userful-tools a:active,
#userful-tools a:hover {
	color: #AEDD27;
	display: block;
	font-weight: normal;
	text-decoration: underline;
}
#userful-tools a:hover {
	text-decoration: none;
}
#userful-tools li {
	background: url(../images/canvas/footer_tools.png) no-repeat 0 0;
	clear: left;
	float: left;
	font-weight: bold;
	height: 39px;
	padding: 0 0 0 35px;
	width: 205px;
}
* html #userful-tools li {
	background-image: url(../images/canvas/footer_tools.gif);
}
#userful-tools .f-duspec {
	background-position: 0 -39px;
}
#userful-tools .f-design-hub {
	background-position: 0 -78px;
}
#userful-tools .f-store-finder {
	background-position: 0 -117px;
}

#interior-designers h6 {
	background-position: 0 -21px;
}

/* interior-designers
-------------------------*/
#interior-designers li {
	background: url(../images/canvas/footer_nav_sprite.gif) no-repeat -37px -4px;
	padding: 0 0 5px 12px;
}

/* help-advice + about-ici
-------------------------*/
#help-advice h6 {
	background-position: 0 -63px;
}
#about-ici h6 {
	background-position: 0 -42px;
}
#about-ici span,
#help-advice span {
	background: url(../images/canvas/footer_nav_sprite.gif) no-repeat;
	display: block;
	float: left;
	height: 19px;
	margin: 0 7px 0 0;
	width: 16px;
}
#about-ici li,
#help-advice li {
	clear: left;
}
#footer .f-storefinder span {
	background-position: -16px -4px;
}
#footer .f-legal span {
	background-position: -16px -24px;
}
#footer .f-colour-accuracy span {
	background-position: -16px -46px;
}
#footer .f-accessibility span {
	background-position: -16px -66px;
}
#footer .f-privacy span {
	background-position: -16px -88px;
}
#footer .f-family span {
	background-position: -16px -109px;
}
#footer .f-contact span {
	background-position: 0 -4px;
}
#footer .f-specifying span {
	background-position: 0 -25px;
}
#footer .f-training span {
	background-position: 0 -45px;
}
#footer .f-business span {
	background-position: 0 -66px;
}
#footer .f-experts span {
	background-position: 0 -87px;
}
#footer .f-faq span {
	background-position: 0 -107px;
}
#footer .f-glossary span {
	background-position: 0 -130px;
}

.footer-nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.footer-nav li {
	margin: 0;
	padding: 0;
}
.footer-nav a em {
	display: block
}

#colophon {
	float: right;

}
.footer-section-1,
.footer-section-2,
.footer-section-3,
.footer-section-4 {
	float: left;
	margin: 0 6px;
	width: 308px;
	text-align:left;
}

.footer-section-1 ul,
.footer-section-2 ul,
.footer-section-3 ul,
.footer-section-4 ul { 
	margin:20px 0; 
	padding:0; 
	list-style:none; 
	line-height:21px;
}

.footer-section-1 {
	width: 231px;
	margin-left: 0;
}
.footer-section-2 {
	width: 231px;
}
.footer-section-3 {
	width: 231px;
}
.footer-section-4 {
	width: 231px;
	margin-right: 0;
}

/* NAVIGATION - Breadcrumb
--------------------------------------------------*/
#breadcrumb {
	float: left;
	margin: -3px 0 10px;
	position: relative;
	width: 732px;
}
.sections #breadcrumb {
	width: 100%;
	position: static;
}
#breadcrumb p {
	position: absolute;
	left: -999em;
}
#breadcrumb ol {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#breadcrumb li {
	color: #919191;
	margin: 0 0 0 6px;
	padding: 0 0 0 9px;
	float: left;
	background: transparent url(../images/canvas/breadcrumb_stroke.gif) no-repeat 0 5px;
}
#breadcrumb li.first-child {
	margin: 0;
	padding: 0;
	background: none;
}
#breadcrumb em {
	font-style: normal;
}
#breadcrumb a:link,
#breadcrumb a:visited,
#breadcrumb a:active {
	color: #919191;
	text-decoration: none;
}
#breadcrumb a:hover {
	color: #919191;
	text-decoration: underline;
}

/*--------------------------------------------------

LAYOUT CONFIGURATION

The layout templates available to the site.

--------------------------------------------------*/

/* PAGE SECTIONS - default style
--------------------------------------------------*/
.page-section-1,
.page-section-2,
.page-section-3,
.page-section-4 {
	float: left;
	margin: 0 6px;
	width: 308px;
	min-height: 10px;
	display: inline; /* WIE6 - DMF */
}

/* PAGE SECTIONS - debug
--------------------------------------------------*/
.debug .page-section-1 {
	background: #FCE177;
}
.debug .page-section-2 {
	background: #C9CEFF;
}
.debug .page-section-3 {
	background: #BAFEC5;
}
.debug .page-section-4 {
	background: #FFD4D4;
}


/* LAYOUTS - 1 column
--------------------------------------------------*/

/* LAYOUT 1
   |****|
   Full width
-------------------------*/
.page-layout-1 .page-section-1 {
	width: 960px;
	margin-left: 0;
	margin-right: 0;
}

/* LAYOUT 1 A
   |**|--|
   One half
-------------------------*/
.page-layout-1-a #body {
	background: url(../images/canvas/layout_2_a.gif) repeat-y;
}
.page-layout-1-a #content {
	width: 732px;
	margin-left: 248px;
	display: inline;
}

/* LAYOUT 1 B
   |***|-|
   Looks like 3 columns.
-------------------------*/
.page-layout-1-b #content,
.page-layout-1-b .page-section-1 {
	width: 530px;
	margin-left: 249px;
}
body.page-layout-1-b #body {
	background: url(../images/canvas/layout_3_b.gif) repeat-y;
}

/* LAYOUT 1 C
   |*|--|
   One third
-------------------------*/
.page-layout-1-c .page-section-1 {
	width: 312px;
	margin-left: 0;
}
/* LAYOUT 1 D
   |**|-|
   Two thirds
-------------------------*/
.page-layout-1-d .page-section-1 {
	width: 353px;
	margin-left: 0;
}

/* Layouts - 2 columns
--------------------------------------------------*/

/* LAYOUT 2 
   |**|-|**|
   One half | One half
-------------------------*/
.page-layout-2 .page-section-1, 
.page-layout-2 #content {
	width: 474px;
	margin-left: 0;
}
.page-layout-2 .page-section-2 {
	width: 474px;
	margin-right: 0;
}

/* LAYOUT 2 A
   |*|-|****|
   One quarter | Three quarters
-------------------------*/
.page-layout-2-a #body {
	background: url(../images/canvas/layout_2_a.gif) repeat-y;
}
.page-layout-2-a .page-section-1,
.page-layout-2-a #aside {
	width: 236px;
	margin: 0;
}
.page-layout-2-a .page-section-2,
.page-layout-2-a #content {
	width: 732px;
	margin-right: 0;
	margin-left: 12px;
}
body.page-layout-2-a #body,
#body .page-layout-2-a {
	background: url(../images/canvas/layout_2_a.gif) repeat-y;
}
* html #body .page-layout-2-a {
	height: 1%;
}
body.page-layout-2-a #body {
	float: none;
}
#body .page-layout-2-a .page-section-2 {
	overflow: hidden;
}

/* LAYOUT 2 C
   |****|-|*|
   Lines on right section
-------------------------*/
.page-layout-2-c .page-section-1,
.page-layout-2-c #content {
	width: 779px;
	margin: 0 25px 0 0;
}
.page-layout-2-c .page-section-2 {
	width: 176px;
	margin: 0;
}

/* LAYOUT 2 D
   |****|-|*|
   No lines
-------------------------*/
.page-layout-2-d .page-section-1,
.page-layout-2-d #content {
	width: 792px;
	margin: 0 12px 0 0;
}
.page-layout-2-d .page-section-2 {
	width: 176px;
	margin: 0;
}

/* LAYOUT 2 E
   |*|-|****|
   One quarter | Three quarters no borders
-------------------------*/
.page-layout-2-e .page-section-1,
.page-layout-2-e #aside{
	width: 236px;
	margin: 0;
}
.page-layout-2-e .page-section-2,
.page-layout-2-e #content {
	width: 738px;
	margin-right: 0;
	margin-left: 6px;
	overflow: hidden;
}



/* Layouts - 3 columns
--------------------------------------------------*/

/* LAYOUT 3 
   |*|-|*|-|*|
   One third | One third | One third 
-------------------------*/
.page-layout-3 .page-section-1 {
	width: 312px;
	margin-left: 0;
}
.page-layout-3 .page-section-2,
.page-layout-3 #content  {
	width: 312px;
}
.page-layout-3 .page-section-3 {
	width: 312px;
	margin-right: 0;
}

/* LAYOUT 3 A
   |**|-|****|-|*|
   Has line on the left side between #aside and #content.
   ? | ? | ? 
-------------------------*/
.page-layout-3-a #aside,
.page-layout-3-a #product-aside,
.page-layout-3-a .page-section-1 {
	width: 224px;
	margin: 0 12px 0 0;
}
.page-layout-3-a .page-section-2,
.page-layout-3-a #content {
	width: 544px;
	margin: 0 12px;
}
.page-layout-3-a .page-section-3 {
	padding: 29px 0 0;
	width: 176px;
	margin: 0;
}
body.page-layout-3-a #body {
	background: url(../images/canvas/layout_3_a.gif) repeat-y;
}
#body .page-layout-3-a {
	background: url(../images/canvas/layout_3_a.gif) repeat-y;
	overflow: hidden;
}
body.page-layout-3-a #body {
	float: none;
}

.page-layout-3-a .page-section-3 img {
	margin-bottom: 24px;
}

.page-layout-3-a .page-section-3 div img {
	margin-bottom: 0;
}

/* LAYOUT 3 B
   |**|-|****|-|*|
   Same as 3-a but has two parallel lines.
-------------------------*/
.page-layout-3-b #aside,
.page-layout-3-b #product-aside,
.page-layout-3-b .page-section-1 {
	width: 236px;
	margin: 0;
}
.page-layout-3-b .page-section-2,
.page-layout-3-b #content {
	width: 530px;
	margin: 0 25px 0 13px;
}
.page-layout-3-b .page-section-3 {
	padding: 29px 0 0;
	width: 176px;
	margin: 0;
}
body.page-layout-3-b #body,
#body .page-layout-3-b {
	background: url(../images/canvas/layout_3_b.gif) repeat-y;
	overflow: hidden;
}
body.page-layout-3-b #body {
	float: none;
}

/* LAYOUT 3 C
   |**|-|****|-|*|
   No vertical lines.
-------------------------*/
.page-layout-3-c #aside,
.page-layout-3-b #product-aside,
.page-layout-3-c .page-section-1 {
	width: 224px;
	margin: 0 12px 0 0;
}
.page-layout-3-c .page-section-2,
.page-layout-3-c #content {
	width: 532px;
	margin: 0 24px 0 6px;
}
.page-layout-3-c .page-section-3 {
	padding: 29px 0 0;
	width: 176px;
	margin: 0;
}

/* LAYOUT 3 D
   |*|-|****|-|*|
   No vertical lines - left and right are equal widths - 236px;
-------------------------*/
.page-layout-3-d {
	overflow: hidden;
}
.page-layout-3-d .page-section-1,
.page-layout-3-d .page-section-3 {
	width: 236px;
	margin: 0;
}
.page-layout-3-d .page-section-2 {
	width: 484px;
	margin: 0 12px;
}
#content .page-layout-3-d {
	clear: both;
}

/* LAYOUT 3 E
   |*|-|**|-|***|
   No lines - used for colour futures
-------------------------*/
.page-layout-3-e {
	overflow: hidden;
}
.page-layout-3-e .page-section-1 {
	width: 236px;
	margin: 0;
}
.page-layout-3-e .page-section-3 {
	width: 408px;
	margin: 0 0 0 12px;
}
.page-layout-3-e .page-section-2 {
	width: 310px;
	margin: 0 12px 0 0;
}

/* Layouts - 4 columns
--------------------------------------------------*/

/* LAYOUT 4
   |*|-|*|-|*|-|*|
   One quarter | One quarter | One quarter | One quarter 
-------------------------*/
.page-layout-4 .page-section-1 {
	width: 231px;
	margin-left: 0;
}
.page-layout-4 .page-section-2,
.page-layout-4 #content  {
	width: 231px;
}
.page-layout-4 .page-section-3 {
	width: 231px;
}
.page-layout-4 .page-section-4 {
	width: 231px;
	margin-right: 0;
}


/*--------------------------------------------------

SECTION COLUMS

Columns that can be used to contain the section
boxes and other content.

--------------------------------------------------*/

/* SECTIONS - Half
--------------------------------------------------*/
.content-section-half {
	float: left;
	width: 490px;
}
.page-layout-2-a .content-section-half {
	width: 372px;
}


/* SECTIONS - third
--------------------------------------------------*/
.content-one-third,
.content-third {
	float: left;
	width: 326px;
}
.sections .content-third {
	width: 318px;
}
.sections .content-third .sections {
	width: 330px;
}
.sections .content-third .sections .section {
	width: 292px;
}

/* SECTIONS - Quarter
--------------------------------------------------*/
.content-section-quarter {
	float: left;
	width: 245px;
}
.page-layout-2-a .content-section-quarter {
	width: 186px;
}


/*--------------------------------------------------

SECTION CONFIGURATION

The sections are the boxes of content used on the
site.

Extend the sections with classes to add the 
features you want.

--------------------------------------------------*/

/* SECTIONS - Wrapper for a section to prevent scrolling
--------------------------------------------------*/
.sections {
	overflow: hidden;
	width: 993px; /* 992 + 1 for odd widths for a section-third layout */
}
.page-layout-2-a .sections {
	width: 744px;
}
.page-layout-2-d .page-section-1 .sections {
	width: 804px;
}
.page-layout-3-d .page-section-2 .sections {
	width: 484px;
}
.page-layout-3-d .page-section-1 .sections,
.page-layout-3-d .page-section-3 .sections {
	width: 236px;
}
.page-layout-3-e .page-section-2 .sections {
	width: 322px;
}
.page-layout-1 .section-half .sections {
	width: 458px;
}
.page-layout-1 .content-section-half .sections {
	width: 470px;
}
.page-layout-2-e .sections {
	width: 750px;
}
.page-layout-3-a .sections {
	width: 556px;
}

/* SECTIONS - Default style
--------------------------------------------------*/
.section {
	border: 1px solid #DEDEDE;
	background : #fff;
	float: left;
	margin: 0 12px 12px 0; 
	padding: 9px 12px 12px; 
}
* html .section {
	display: inline; /* IE6 - DFM */
}
.page-layout-3-a .page-section-3 .section-image {
	border:1px solid #DEDEDE;
	float:left;
	margin:0 12px 12px 0;
	padding:3px;
}
.section h3 {
	color: #575757;
	font-size: 2.1em;
	margin: 0 0 9px;
}
.section .detail {
	margin: 0;
}
.section .detail a:link,
.section .detail a:visited,
.section .detail a:active {
	color: #AEDD27;
}
.section .detail a:hover {
	color: #AEDD27;
}
.page-layout-2-a .section {
	width: 706px;
}
.page-layout-2-d .section {
	width: 792px;
}
.page-layout-2-d .page-section-1 .section {
	width: 766px;
}
.page-layout-3-d .page-section-2 .section {
	width: 458px;
}
.page-layout-3-d .page-section-1 .section, 
.page-layout-3-d .page-section-3 .section {
	width: 210px;
}
.page-layout-3-a .page-section-3 .section {
	width: 150px;
}
#aside .section {
	width: 198px;
}
.page-layout-3-e #content .section,
.page-layout-3-e .page-section-2 .section {
	width: 284px;
}

.page-layout-2-e .page-section-2 .section {
	width: 712px;
}

/* SECTIONS - Other flavours of the section box
--------------------------------------------------*/

/* Quote 
<div class="section quote">
	<blockquote>

	</blockquote>
</div>
--------------------------------------------------*/
.quote {
	background: url(../images/canvas/section_quote.gif) no-repeat top right;
}
.quote blockquote {
	font-size: 1.4em;
	padding: 0 50px 0 0;
}
.quote blockquote p {
	color: #B5B5B5;
	font-weight: bold;
	margin: 0 0 6px;
}
.quote p {
	color: #575757;
}
.quote cite em {
	font-weight: bold;
	display: block;
	font-style: none;
}
.quote .details {
	border-top: 1px solid #DEDEDE;
	padding: 8px 0 0;
	text-align: right;
}

/* Content-section - make .section without padding and border but same spacing
--------------------------------------------------
.page-layout-1 .section-content-half {
	float: left;
	margin: 0 12px 12px 0;
	width: 484px;
}
.page-layout-1 .section-content-half .sections {
	width: 496px;
}
.page-layout-1 .section-content-half .sections .section-half {
	width: 210px;
}
*/

/* Clean - no visible border
<div class="section clean">
</div>
--------------------------------------------------*/
#body .clean,
.sections .clean,
.section-clean {
	border-color: transparent;
}
* html #body .clean,
* html .sections .clean, /* http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/ */
* html .section-clean {
	border-color: pink;
	filter: chroma(color=pink);
}

/* Decorated - have an <img> positioned behind content

<div class="section decorated">
	<div class="content">

	</div>
	<img src="#" alt="" />
</div>
--------------------------------------------------*/
.decorated {
	background-repeat: no-repeat;
	background-position: bottom right;
	overflow: hidden;
	position: relative;
}
.decorated .content {
	position: relative;
	z-index: 1;
}
.decorated img {
	bottom: 0;
	position: absolute;
	right: 0;
}
.decorated .content img {
	position: static;
}


/* SECTION - Whole width
--------------------------------------------------*/
.page-layout-1 .section {
	width: 954px;
}

/* ASIDE SECTIONS - Section that appear in the asides
--------------------------------------------------*/
#aside,
.page-layout-2-c .page-section-2 .section {
	margin-right: 0;
}
.page-layout-2-c .page-section-2 .section {
	width: 150px;
}

/* SECTION - One Half
--------------------------------------------------*/
.content-section-half .section,
.section-half,
.section-one-half {
	width: 466px;
}
body .content-section-half .section-half {
	width: 215px;
}
.page-layout-1 .sections .section-half {
	width: 458px;
}
	.page-layout-1 .sections .section-half .section-half {
		width: 217px;
	}

.page-layout-1-a .content-section-half .section,
.page-layout-1-a .sections .section-half,
.page-layout-1-a .sections .section-one-half,
.page-layout-2-a .content-section-half .section,
.page-layout-2-a .sections .section-half,
.page-layout-2-a .sections .section-one-half {
	width: 334px;
}
.page-layout-2-d .content-section-half .section,
.page-layout-2-d .sections .section-half,
.page-layout-2-d .sections .section-one-half {
	width: 364px;
}
.page-layout-1 .content-section-half .section-half {
	width: 217px;
}
.page-layout-2-e .content-section-half .section,
.page-layout-2-e .sections .section-half,
.page-layout-2-e .sections .section-one-half {
	width: 337px;
}

/* SECTION - One Quarter
--------------------------------------------------*/
.content-section-quarter .section,
.section-quarter,
.section-one-quarter {
	width: 209px;
}
body .content-section-half .section-quarter {
	width: 122px;
}
.page-layout-2-a .content-section-quarter .section,
.page-layout-2-a .sections .section-quarter,
.page-layout-2-a .sections .section-one-quarter {
	width: 148px;
}

.page-layout-1 .section-quarter {
	width: 210px;
}
.page-layout-2-e .page-section-2 .section-quarter {
	width: 149px;
}


/* SECTION - One Third
--------------------------------------------------*/
.page-layout-1 .content-section-third .section,
.page-layout-1 .section-third,
.page-layout-1 .section-one-third {
	width: 292px;
	margin-right: 13px;
}
.page-layout-2-a .content-section-third .section,
.page-layout-2-a .sections .section-third,
.page-layout-2-a .sections .section-one-third {
	width: 210px;
}
.page-layout-2-d .content-section-third .section,
.page-layout-2-d .sections .section-third,
.page-layout-2-d .sections .section-one-third {
	width: 210px;
}

/* SECTION - image on the left, text on the right
--------------------------------------------------*/
/* Older style (old method) */
.section-hero .content {
	padding: 0 0 0 98px;
}
.section-hero .content img {
	float: none;
	margin: 0;
}
.section-hero img {
	float: left;
	margin: 0 12px 0 0;
	display: inline; /* IE6 - DFM */
}

/* Newer style */
.sections .hero .content {
	float: right;
	width: 70%;
}
.sections .hero .content img,
.sections .hero .content img {
	float: none;
	margin: 0;
}
.sections .hero-reverse img,
.sections .hero img {
	float: left;
	margin: 0 12px 0 0;
	display: inline; /* IE6 - DFM */
}
.sections .hero-reverse .content {
	float: left;
	width: 70%;	
}
.sections .hero-reverse img {
	float: right;
}


/*--------------------------------------------------

PRODUCT NAV

Product accordian and navigation.

--------------------------------------------------*/

/* Generic style
--------------------------------------------------*/
.aside-nav,
.accordian-nav {
	float: left;
	margin: 0 0 15px;
	width: 224px;
}
.accordian-content {
	float: left;
	margin: 0 0 15px;
	width: 100%;
}
.aside-nav ul,
.accordian-nav ul,
.accordian-content ul{
	list-style: none;
	margin: 0;
}
.aside-nav li,
.accordian-nav li {
	clear: left;
	float: left;
	width: 224px;
	background: #F4F4F4 url(../images/canvas/aside_icons_sprite.png) no-repeat  197px 0;
	min-height: 30px;
}
.accordian-content li {
	clear: left;
	float: left;
	width: 100%;
	background: #F4F4F4;
	min-height: 30px;
}
* html .aside-nav li,
* html .accordian-nav li,
* html .accordian-content li{
	height: 30px;
}
.accordian-nav .content li,
.accordian-content .content li{
	background: none;
	height: auto;
	padding: 0;
	width: auto;
}
.accordian-content .content {
	padding: 0 6px;
}
.aside-nav li li,
.accordian-nav li li {
	float: none;
}
.accordian-content li.active .header {
	background-position: 100% -44px;
}
.aside-nav li.active .header,
.accordian-nav li.active .header {
	background-position: 197px -30px;
}
.aside-nav a:link,
.aside-nav a:visited,
.aside-nav a:active,
.aside-nav a:hover,
.accordian-nav a:link,
.accordian-nav a:visited,
.accordian-nav a:active,
.accordian-nav a:hover {
	color: #575757;
	text-decoration: none;
}

.aside-nav li li a:link,
.aside-nav li li a:visited,
.aside-nav li li a:active,
.accordian-nav li li a:link,
.accordian-nav li li a:visited,
.accordian-nav li li a:active {
	color: #919191;
	text-decoration: none;
}
.aside-nav li li a:hover,
.accordian-nav li li a:hover {
	color: #919191;
	text-decoration: underline;
}
.aside-nav h3,
.accordian-nav h3 {
	font-size: 2em;
}
/*
.aside-nav h3,
.accordian-nav h3 {	
	background: url(../images/headings/aside_nav.gif) no-repeat 12px 0;
	height: 0;
	margin: 0 0 6px;
	overflow: hidden;
	padding: 22px 0 0;
	width: 198px;
}

#your-account h3 {
	background-position: 12px -44px;
}

#news-nav h3 {
	background-position: 12px 0;
}

*/
.accordian-content .header {
	cursor: pointer;
	background: #F4F4F4 url(/files/images/canvas/accordian_icons.png) no-repeat  100% 0;
}
.accordian-nav .header {
	background: #F4F4F4 url(../images/canvas/aside_icons_sprite.png) no-repeat  197px 0;
	height: 30px;
	padding: 0 0 0 12px;
}
.accordian-nav .nth-child-odd,
.aside-nav .nth-child-odd, 
.accordian-nav .nth-child-odd .header,
.accordian-content .nth-child-odd,
.accordian-content .nth-child-odd .header {
	background-color: #E5E5E5;
}

.accordian-content h4 {
	color: #575757;
	height: 30px;
	font-size: 1em;
	font-weight: bold;
	line-height: 27px;
	margin: 0;
	padding: 0 0 0 6px;
}
.accordian-nav h4 {
	background: url(../images/canvas/aside_icons_sprite.png) no-repeat 0 60px;
	color: #575757;
	height: 30px;
	font-size: 1em;
	font-weight: normal;
	line-height: 27px;
	margin: 0;
	padding: 0 0 0 35px;
}
.accordian-nav h4 a {
	background: none;
	margin: 0 0 0 -25px;
	padding: 0;
}

#body .accordian-nav li ul {
	margin: 0 0 0 38px;
	padding: 6px 0;
	width: 186px;
}
#body .accordian-nav .content li {
	padding-bottom: 4px;
	min-height: 0;
}
* html .accordian-nav .content li {
	height: auto;
}

/* SUB SUB NAV
--------------------------------------------------*/
#body .accordian-nav ul ul ul {
	margin-left: 0;
	padding: 6px 0 0;
}
#body .accordian-nav ul ul ul li {
	background: url(../images/global/bullet.gif) no-repeat 2px 5px;
	padding-left: 12px;
}


/* SPRITE POSITIONS
--------------------------------------------------*/
#product-nav .dulux-trade h4 {
	background-position: 0 -60px;
}
#product-nav .cuprinol-trade h4 {
	background-position: 0 -90px;
}
#product-nav .polycell-trade h4 {
	background-position: 0 -150px;
}
#product-nav .hammerite h4 {
	background-position: 0 -179px;
}
#product-nav .sikkens h4 {
	background-position: 0 -300px;
}
#product-nav .glidden-trade h4 {
	background-position: 0 -119px;
}
#featured-nav .ecosure h4 {
	background-position:0 -210px;
}
#featured-nav .light-space h4 {
	background-position:0 -240px;
}
#featured-nav .voc-2010 h4 {
	background-position:0 -269px;
}
#featured-nav .diamond-range h4 {
	background-position:0 -300px;
}


/* NORMAL LINKS
--------------------------------------------------*/
.accordian-nav a,
.aside-nav a {
	background: url(../images/canvas/aside_icons_sprite.png) no-repeat 0 60px;
	color: #575757;
	display: block;
	height: 30px;
	font-size: 1em;
	font-weight: normal;
	line-height: 27px;
	padding: 0 0 0 10px;
	margin: 0 0 0 12px;
}
.aside-nav a {
	background: none;
	padding-left: 0;
}
.accordian-nav .content a {
	background: none;
	display: inline;
	height: auto;
	line-height: 1em;
	padding: 0;
	margin: 0;
}

/* PRODUCT NAV
--------------------------------------------------*/
#product-nav a {
	padding-left: 35px;
}
#product-nav li ul a {
	padding-left: 0;
}
#body #product-nav li ul {
	margin-left: 48px;
	width: 176px;
}

/* ACCORDIAN ENHANCEMENT
--------------------------------------------------*/
.accordian-nav .header {
	cursor: pointer;
}

/* UKISA.WIDGET.ACCORDION CORE
--------------------------------------------------*/	
.accordian-nav h4 {
	cursor: pointer;
}			
.accordian-nav .content {
	float: left;
	background: #FFF;
}

/* FEATURED PRODUCTS
--------------------------------------------------*/
#featured-products-nav h3 {
	background-position: 0 -22px;
}


/*--------------------------------------------------

FORM LAYOUT

Standard form layout styles.

DO NOT CHANGE UNLESS YOU KNOW WHAT YOU ARE DOING!

--------------------------------------------------*/
.form {
	float: left;
	width: 100%;
}
.form fieldset {
	float: left;
	width: 100%;
}
.form dl {
	float: left;
	margin: 0;
	width: 100%;
}
.form dt {
	clear: left;
	float: left;
	padding: 5px 0;
	min-height: 16px;
	width: 108px;	
}
* html .form dt {
	height: 21px;
}
.form dd input {
	height: 21px;
	padding: 5px 6px 0 0;
	width: 226px;
}
.form dt em {
	position: absolute;
	left: -999em;
}
.form dd textarea {
	height: 150px;
	overflow: auto;
}
.form dd select {
	margin: 3px 0 0;
}
.form dd {
	color: #979797;
	min-height: 26px;
	padding: 0 0 5px 108px;
}
* html .form dd {
	height: 26px;
}
.form dd p {
	padding: 5px 0 0;
	margin: 0;
}
.form label em {
	background: url(../images/global/required.gif) no-repeat;
	height: 0;
	overflow: hidden;
	display: inline-block;
	padding: 1em 0 0;
	width: 3px;
	position: static;
	left: 0;
}

#content .form .submit {
	clear: both;
	margin: 0 0 0 108px;
}
* html #content .form .submit {
	margin-left: 111px;
}

#content .form dd input.submit {
	width: auto;
	margin: 0;
	height: auto;
	padding: 0;
}

/* Change the form style to fit into boxes
--------------------------------------------------*/
.section-half .form dd input {
	width: 215px;
}

/* Form option list
--------------------------------------------------*/
.form dd li .form-skin {
	background: none;
	padding: 0;
	float: left;
}
.form dd li input {
	background: none;
	width: auto;
	height: auto;
	padding: 0;
}
.form dd ul {
	list-style: none;
	margin: 0;
}
.form dd li input {
	float: left;
}
.form dd li label {
	color: #575757;
}
.form dd li p {
	color: #575757;
	padding: 0 0 0 5px;
	float: left;
	width: 350px; /* FF - neesd width or it drops down */
}
.form dd ul {
	float: left;
}
.form dd li {
	clear: left;
	float: left;
	margin: 0 0 5px;
}
* html .form dd li {
	float: none;
}

/* Form elements skins 
--------------------------------------------------*/
.form-skin {
	background: url(../images/canvas/form_skin_sprite.gif) no-repeat;
	display: inline-block;
	padding: 0 0 0 6px;
}
.form-skin input {
	background: url(../images/canvas/form_skin_sprite.gif) no-repeat 100% -26px;
	border: 0;
	float: left; /* IE - this fixes the 1px drop down with the input */
	height: 21px;
	padding: 5px 6px 0 0;
}
.form .form-skin textarea {
	background: url(../images/canvas/form_skin_sprite.gif) no-repeat 0 -52px;
	border: 0;
	margin: 0 0 0 -6px;
	height: 138px;
	width: 342px;
	float: left;
	padding: 4px 6px;
}

/* Custom form elements
--------------------------------------------------*/
.form dd input.postcode {
	width: 148px;	
}

/* ASIDE STYLES
--------------------------------------------------*/
/* This breaks Cufon
#aside .section h3,
.page-section-3 .section h3 {
	background-image: url(../images/headings/aside_nav.gif);
	height: 0;
	margin: 0 0 6px;
	overflow: hidden;
	padding: 22px 0 0;
	width: 198px;
}
*/
#aside .section,
.page-section-3 .section {
	margin-right: 0;
	padding-top: 12px;
}
.page-section-3 .section ul {
	margin-left: 13px;
	padding: 0;
}

/* Advice Glossary list
--------------------------------------------------*/

ul#glossary-terms {
	float: left;
	width: 150px;
}

ul#glossary-terms li {
	float: left;
	margin-right: 8px;
}

ul#glossary-list {
	margin:0 0 12px;
	list-style:none;
	float: left;
	padding:12px 0 12px 12px;
	width:530px;
	border: 1px solid #DEDEDE;
}

ul#glossary-list li {
	float: left;
	margin-right: 8px;
}

/*--------------------------------------------------

INLINE FORM

Style for a form that has only a single box and a 
submit button - like a search box. The HTML should
be:

<form>	
	<div class="form inline">
		<fieldset>
			<legend>Search</legend>

			<p>
				<label for="searchString">Keywords or product code <em>Required</em></label>
				<span class="form-skin">
					<input type="text" id="search-field" name="searchString" class="field" value="Search..." />
				</span>
				<input type="image" src="/web/images/buttons/search.gif" alt="Submit search" class="submit" />
			</p>

		</fieldset>	
	</div>
</form>

--------------------------------------------------*/
form.inline {
	float: left;
}
.inline p {
	float: left;
	margin: 0;
}
.inline label {
	float: left;
}
.inline span.form-skin {
	float: left;
}
.inline input.field {
	float: left;
}
#page #content .inline input.submit {
	clear: none;
	margin: 0 0 0 3px;
	float: left;
	width: 26px;
	display: block;
}

/* NAV - lists of links - default stlye - not "details" class
--------------------------------------------------*/
ul.nav {
	list-style: none;
	margin-left: 0;
}
ul.nav li {
	padding: 0 0 3px;
}


/*--------------------------------------------------

COLOUR PALETTE

--------------------------------------------------*/

ul#colour-palette {
	display: inline;
	float:left;
	width: 371px;
	margin: 0 0 12px;
	padding:2px;
	border: 1px solid #cdcdcd;
	list-style:none;
}

ul#colour-palette li {
	float: left;
	margin: 3px;
}

/*--------------------------------------------------

SWATCHES

<span class="swatch">
	<a href="#">
		<img src="/web/images/swatch/small/african_adventure_3.jpg" alt="African Adventure 3" />
		<em>10GY 74/325</em>
		<strong>African Adventure 3</strong>
	</a>
</span>

--------------------------------------------------*/

.swatch {
	position: relative;
	height: 62px;
	width: 111px;
	display: inline-block;
}
span.light em,
span.light a:link,
span.light a:visited,
span.light a:hover,
span.light a:active {
	color: #575757;
}
.swatch a:link,
.swatch a:visited,
.swatch a:hover,
.swatch a:active {
	color: #FFF;
	text-decoration: none;
}
	.swatch a {
		background: url(/web/images/canvas/swatch.png) no-repeat bottom right;
		padding: 0 1px 2px 0;
		display: inline-block;
		font-size: .9em;
		color: #FFF;
		position: absolute;
	}
	* html .swatch a {
		background-image: url(/web/images/canvas/swatch.gif);
	}
		.swatch img {
			border: 1px solid #71726F;
			padding: 3px;
			height: 54px;
			width: 103px;
			vertical-align: bottom;
		}
		.swatch strong {
			position: absolute;
			left: -999em;
		}
		.swatch em {
			position: absolute;
			left: 7px;
			bottom: 6px;
			color: #FFF;
			width: 97px;
			display: block;
		}	


/* OLD SWATCH STYLE
--------------------------------------------------*/
.open-swatch {
	background: url(/web/images/canvas/swatch_old.gif) no-repeat;
	height: 105px;
	float: left;
	padding: 12px 1px 0;
	width: 76px;
}
.open-swatch img {
	height: 46px;
	margin: 0 0 3px;
	width: 71px;
}
.open-swatch em {
	display: block;
	padding: 0 5px;
	width: 61px;

	white-space: pre; /* CSS2 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap; /* HP printers */
	white-space: -o-pre-wrap; /* Opera 7 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}
.open-swatch strong {
	position: absolute;
	left: -999em;
}
.open-swatch a:link,
.open-swatch a:visited,
.open-swatch a:hover,
.open-swatch a:active {
	color: #808080;
	font-size: 10px;
}


/* LARGE SWATCH
--------------------------------------------------*/
.large-swatch {
	background: url(../images/canvas/swatch_large.gif) no-repeat;
	width: 123px;
	height: 139px;
	padding: 19px 1px 0;
}


/* SWATCH LAYOUT
--------------------------------------------------*/
ul.palette {
	list-style: none;
	margin: 0;
	float: left;
	width: 100%;
}
ul.palette li {
	float: left;
	margin: 0 6px 6px 0;
}

/*--------------------------------------------------

STRIPE CARD LAYOUT

--------------------------------------------------*/

.stripecard {
	float: left;
	background: transparent url(../images/canvas/stripecard_old.gif) no-repeat scroll 0 0;
	height: 368px;
	margin: 0 6px 0 0;
	padding: 12px 1px;
	list-style: none;
}
.stripecard ul {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0 0 4px;
}
.stripecard li {
	margin: 0 0 4px 0;
	float: left;
	clear: left;
}
.stripecard p {
	margin: 0;
	text-align: center;
	clear: left;
}


/* STRIPE CARD TOOLTIPS
--------------------------------------------------*/
#stripecard-tooltip .bd {
	padding: 12px;
	border: 1px solid #DEDEDE;
	font-size: 1.1em;
}


/*--------------------------------------------------

MOOD MASTHEAD

--------------------------------------------------*/
.mood-section {
	background-repeat: no-repeat;
	height: 479px;
	overflow: hidden;
	padding: 12px;
	width: 956px;
}
.mood-section .sections {
	width: 956px;
}
.mood-section .section {
	background: url(/web/images/canvas/mood_section.png);
	min-height: 67px;
	border: 0;
	width: 932px; /* This has no border minus container padding. */
}
* html .mood-section .section {
	height: 67px;
}

.mood-section .sections .clean {
	background: none;
}

.mood-section .content-section-half {
	width: 478px;
}
.mood-section .content-section-half .sections {
	width: 478px;
}
.mood-section .content-section-half .section {
	min-height: 167px;
	width: 454px;
}
*html .mood-section .content-section-half .section {
	height: 167px;
}
.mood-section .content-section-half .section-half {
	min-height: 67px;
	width: 203px;
}
* html .mood-section .content-section-half .section-half {
	height: 67px;
}
.mood-section .section-quarter {
	width: 206px;
}

.mood-section .section h3 em {
	color: #5587D1;
}
.mood-section .details a:link,
.mood-section .details a:visited,
.mood-section .details a:hover,
.mood-section .details a:active {
	color: #575757;
}

.mood-section .hero {
	position: relative;
}
.mood-section .hero .content {
	position: relative;
	float: left;
	width: 100%;
	z-index: 1;
}
.mood-section .hero .footer {
	overflow: hidden;
}
.mood-section .hero .footer img {
	position: absolute;
	bottom: 0;
	right: 0;
}
/* IE6 - Rounding issue for odd dimensions of containers  will require this fix on it
* html .mood-section .hero .footer img { 
	bottom: -1px;
}
*/

/* MOOD SECTION NAVIGATION
--------------------------------------------------*/
.mood-section-nav {
	background: url(/web/images/canvas/mood_section_nav_sprite.gif) repeat-x 0 -117px;
	float: right;
	position: relative;
}
.mood-section-nav ul {
	background: url(/web/images/canvas/mood_section_nav_sprite.gif) no-repeat 100% -39px;
	list-style: none;
	float: left;
	height: 39px;
	margin: 0;
	padding: 0 4px 0 0;
}
.mood-section-nav li {
	background: url(/web/images/canvas/mood_section_nav_sprite.gif) no-repeat 0 -78px;
	float: left;
	height: 39px;
	font-size: 1.6em;
	line-height: 39px;
	padding: 0 18px 0 20px;
}
.mood-section-nav a:link,
.mood-section-nav a:visited,
.mood-section-nav a:hover,
.mood-section-nav a:active {
	color: #626262;
	display: block;
	text-decoration: none;
}
.mood-section-nav li.first-child {
	background-position: 0 0;
	padding-left: 24px;
}


/*--------------------------------------------------

LITERATURE ASIDE SECTION

<div class="section literature-download">
	<h5>Download our policy report</h5>

	<p>For further information download "Sustainability in Action 2009 - How we are delivering on our vision" (PDF, 1.32MB)</p>

	<p class="details"><a rel="external" href="/web/pdf/brochures/sustainability09.pdf"><img src="../web/images/buttons/get_adobe_reader.gif" alt="Get Adobe Reader"/></a></p>
</div>



--------------------------------------------------*/
.literature-download {
	background-repeat: no-repeat;
	background-position: 12px 35px;
}
.literature-download p {
	font-size: .9em;
	padding: 0 0 4px 86px;
}
.literature-download p.details {
	padding: 0;
}


/*---------------------------------------------------

TABS

---------------------------------------------------*/
#body .yui-nav {
	border-bottom: 1px solid #B8BBBE;
	padding-left: 12px;
}
.yui-navset .yui-nav li {
	margin-right: 3px;
}
.yui-nav li a {
	background: transparent url(/web/images/canvas/tab.gif) no-repeat 100% -100px;
	padding: 0 12px 0 0;
	height: 28px;
	line-height: 28px;
	text-decoration: none;
}
.yui-nav li a em {
	background: transparent url(/web/images/canvas/tab.gif) no-repeat 0 0;
	padding: 0 0 0 12px;
}
.yui-nav li.selected {
	position: relative;
	top: 1px;
	height: 29px;
}
.yui-nav li a:hover,
.yui-nav li.selected a {
	background-position: 100% -150px;
}
.yui-nav li.selected em, 
.yui-nav li a:hover em {
	background-position: 0 -50px;
}


div.foot-note {
	color: #999999;
	clear: both;
	font-size: .8em;
}


/* FEATURED ITEMS */

#body ul.featured-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

#body ul.featured-items li img {
	display:inline;
	float:left;
	margin:0 10px 0 0;
}
#body ul.featured-items li p {
	float: left;
	width: 110px;
}

#body ul.featured-items li {
	border-bottom: 1px solid #dedede;
	overflow: hidden;
	padding: 10px 0 0;
}
#body ul.featured-items li.first-child {
	padding-top: 0;
}

#body ul.featured-items li.last-child {
	border-bottom: none;
}