/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.8.0r4
*/
html{color:#333333;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}b,strong{font-weight:bold;}hr { border-color: #ccc; border-style: solid; border-width: 1px 0 0; clear: both; margin: 0 0 20px; height: 0; }

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.8.0r4
*/
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
* { outline: none; }
html,body { background:#ececec; }

/* 
 * Site & Page Layout 
 */
.wrapper {
clear:both;
position:relative;
width:980px;
margin:auto;
}

#frame
{
clear:both;
float: left;
width:980px;
margin:0;
background:#fff url( /w/i/frame-bg.gif ) no-repeat 0px 63px;
border:1px solid #cfcfcf; 
border-top:0;
-moz-box-shadow: #cfcfcf 0 5px 25px 0px;
-webkit-box-shadow: #cfcfcf 0 5px 25px 0px;
}
#header {
position:relative;
float:left;
width:100%;
overflow:hidden;
}
#logo-container {
position:relative;
width:980px;
z-index:9995;
}
#logo {
display:block;
position:absolute;
top:23px;
left:50%;
margin-left:-478px;
width:107px;
height:62px;
z-index:10000;

}
#header #m-nav-container {
clear:both;
line-height:26px;
background:#363536 url(../i/frame/m-nav-grad-dark.gif) 0 0 repeat-x;
}
#header #s-nav-container {
clear:both;
line-height:38px;
background:#e2e2e2  url(../i/frame/m-nav-grad-light.gif) 0 0 repeat-x;
}
#footer {
clear:both;
position:relative;
margin-top:1em;
font-size:10px;
color:#666;
overflow:hidden;
text-align:center;
padding-top: 8px;
}

#full-template, #default-template, #inside-template {
clear:left;
}

/*
 * Column Layouts
 *
 *
 * @class .two-col  Two column layout container
 * @class .three-col Three column layout container
 * @class .four-col Four column layout container
 * @class .span-2 Cross columns
 * @class .span-3 
 */

.bod {
float:left;
clear:both;
width:960px;
margin:20px 0 20px 20px;
overflow:hidden;
}
.two-col, .three-col, .four-col, .five-col { 
float:left;
clear:both;
width:100%;
}

.two-col .col {
width:306px;
margin-right:11px;
}
.two-col .col:last-child { /* Do not combine this rule with the one below */
width:623px; 
}
.two-col .last { /* Fix for browsers that do not support last-child */
width:623px; 
}

.three-col .col { width:306px; margin-right:11px; }
.three-col .span-2 { width: 623px !important; }

.four-col .col { width:226px; margin-right:12px; }
.four-col .span-2 { width: 464px !important; }
.four-col .span-3 { width: 702px !important; }

.five-col .col { width:178px; margin-right:12px; }
.five-col .span-2 { width:368px !important; }
.five-col .span-3 { width:558px !important; }
.five-col .span-4 { width:748px !important; }

.five-col .three-col .col { width:241px; margin-right:11px; }

#colour-coordinator img { overflow:hidden; }

.col {
float:left;
clear:none;
margin-bottom:10px;
}
.col:last-child { /* Do not combine this rule with the one below */
margin-right:0;
}
.last { /* Fix for browsers that do not support last-child */
margin-right:0 !important;
}

/*
 * Navigation Items
 *
 * @el m-nav Main Navigation
 * @el s-nav Secondary Navigation
 * @el t-nav Tertiarty Navigation 
 * @el q-nav Quick Navigation (Top Right)
 */
#m-nav-container {
position:relative;
display:block;
clear:both;
float:left;
width:100%;
}
#m-nav {
padding-left:150px;
}
#m-nav li { 
position:relative;
display:block;
float:left;
}

#m-nav a {
display:block;
padding:0 15px;
font:bold 11px/26px Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
text-shadow:0 1px 1px #000000;
}

body.fr #m-nav a {
padding:0 8px;
}

#m-nav li.selected a {
background:#ff9933 url(../i/frame/m-nav-selected.gif) 0 0 repeat-x;
text-shadow:0 1px 1px #666666;
}
#m-nav a:hover {
background:#ff9933 url(../i/frame/m-nav-selected.gif) 0 0 repeat-x;
text-shadow:0 1px 1px #666666;
}

#m-nav .arrow {
position:absolute;
bottom:-4px;
left:50%;
display:block;
width:7px;
height:4px;
margin-left:-4px;
color:#fff;
background:transparent url(../i/frame/nav-notch.gif) top center no-repeat;			
z-index:100;
overflow:hidden;
}

#s-nav-container {
position:relative;
display:block;
clear:both;
float:left;
width:100%;
height:38px;
}
#s-nav {
margin-left:150px;
}
#s-nav li { 
display:block;
float:left;
height:38px;
}

#s-nav a {
display:block;
margin-top:7px;
padding:0 8px;
border-right:1px solid #c7c7c7;
font:bold 11px/22px Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
text-shadow:0 1px 1px #FFFFFF;
}

body.fr #s-nav a {
padding:0 5px;
font:bold 10px/22px Arial, Helvetica, sans-serif;
}

#s-nav li:last-child a {
border-right:0;
}
#s-nav li.selected {
background:#ffffff url(../i/frame/s-nav-selected.gif) top right no-repeat;
color:#ff9933;
}
#s-nav li.selected a, #s-nav a:hover {
color:#ff6600;
}


#t-nav-container {
display:block;
clear:both;
width:100%;
border-top:1px solid #cccccc;
text-align:left;
background:#efefef;
}
.t-nav-heading {
margin:0px 9px;
padding:6px 0px;
line-height:18px;
font-size:12px;
font-weight:bold;
color:#ff9933;
}
#t-nav {
margin:0px 9px;
border-top:1px solid #ff9933;
}
#t-nav li {
margin-left:0;
padding:4px 0px;
border-bottom:1px dotted #999;
font-size:11px;
color:#333;
list-style:none;
}

#t-nav li a {
font-size:11px;
color:#333;
padding-left: 10px;
background: url( /w/i/frame/nav-arrow.gif ) no-repeat 0px 4px;
}

#t-nav .selected a {
padding-left: 10px;
color:#000;
font-weight:bold;
background: url( /w/i/frame/nav-arrow-orange.gif ) no-repeat 0px 4px;
}


#t-nav li a:hover {
color:#777;
text-decoration:none;
background: url( /w/i/frame/nav-arrow-orange.gif ) no-repeat 0px 4px;
}

#t-nav span {
position:relative;
top:-1.5px;
font-weight:bold;
color:#666;
}
#t-nav .selected a, #t-nav .selected span {
color:#000;
font-weight:bold;
}


#q-nav-container {
display:block;
clear:both;
float:left;
width:100%;
text-align:right;
}
#q-nav { 
float:right;
list-style:none;
}
#q-nav li { 
display:block;
float:left;
padding-top:6px;
color:#bbb;
}
#q-nav a {
color:#666;
font-size:9px;
line-height:24px;
text-decoration:none;
}
#q-nav a:hover {
color:#ff9933;
}
#breadcrumbs {
height:18px;
}
#breadcrumbs a, #breadcrumbs span {
display:inline;
font-size:11px;
line-height:18px;
color:#DFDFDF;
}
#breadcrumbs a {
color:#b4b4b4;
}
#breadcrumbs .sep {
position:relative;
top:-1px;
}
#breadcrumbs .sep:last-child {
display:none;
}

/*
 * Quick Swatches
 *
 * @desc Quick swatch functionality embedded into the nav
 * @el quickSwatches
 */

#quickSwatchContainer {
position:absolute;
top:0;
right:4px;
width:157px;
height:38px;
font-size:11px;
overflow:hidden;
}
#quickSwatchLabel, #quickSwatch, #quickSwatch div {
float:left;
clear:none;
}
#quickSwatch div {
margin-top:11px;
width:14px;
height:14px;
margin-left:7px;
border-width:1px;
border-style:solid;
line-height:8px;
background:#ffffff;
border:1px solid #999;
}

/*
 * Quick Search
 *
 * @desc Search box built into navigation
 * @el wrap-search Container
 * @el search-field Textfield
 * @el search-button Button
 */
#wrap-search {
position:absolute;
top:4px;
right:0px;
width:165px;
}
#search-field {
position:absolute;
top:0px;
left:0px;
width:130px;
padding:1px;
border:1px solid #cccccc;
font-size:11px;
background:url(../i/frame/search-grad-light.gif) 0 0 repeat;
color:#666;
}
#search-button {
position:absolute;
top:0px;
right:6px;
padding-top:2px;
border:0;
font-size:11px;
font-weight:bold;
color:#ffffff;
background:transparent;
}


/* 
 * General Element Styles
 * 
 */

h1, h1 a, h2, h2 a {
clear:both;
margin-top:0px;
margin-bottom:12px;
line-height:22px;
font-size:18px;
color:#333;
}
h1#page-title {
font-size:30px;
line-height:30px;
}
#wrap-page-title {
height:36px;
}
h3 {
margin-bottom:1em;
line-height:18px;
font-size:12px;
font-weight:bold;
}
h4 {
margin-bottom:0.25em;
line-height:18px;
font-size:14px;
font-weight:bold;
color:#666;
}
h5 {
margin-bottom:0.25em;
font-size:12px;
line-height:22px;
font-weight:bold;
color:#888;
}
p {
margin-bottom:20px;
font-size:12px;
line-height:18px;
}
a {
color:#ff6f00;
text-decoration:none;
}
a:hover {
color:#2b9dc3;
text-decoration:underline;
}
p a {
text-decoration:underline;
}

p.action {
margin-right:6px;
}
p.action a {
display:block;
padding-right:24px;
line-height:22px;
background:url(/w/i/frame/action-orange.gif) 100% 50% no-repeat;
text-decoration:none;
text-align:right;
}
p.action a.grey {
background:url(/w/i/frame/action-orange-on-grey.gif) 100% 50% no-repeat;
}
p.grey-up a {
background:url(/w/i/frame/action-grey-up.gif) 100% 50% no-repeat;
color:#999;
}
p.last {
margin-bottom:0;
}
dl, dl.fancy {
padding-left:24px;
font-size:12px;
background:url(../i/frame/action-orange.gif) 0 2px no-repeat;
}
dl.plain {
margin-left:0px;
padding-left:0px;
background:none;
}
dt {
font-weight:bold;
font-size: 12px;
line-height:20px;
}
dt a {
font-weight:bold;
font-size: 13px;
color : #ff6600;
}
dd {
font-size:11px;
line-height:16px;
padding-right: 5px;
}
.bod ul, .bod ol {
margin-top:22px;
margin-bottom:22px;
}
.bod ul li {
list-style:disc;
margin-left: 1em;
margin-bottom:0.5em;
padding-left: 0.25em;
}
.bod ul li ul li {
list-style:square;
margin-bottom:0.25em;
}
.bod ol li {
list-style:decimal;
margin-left: 1em;
margin-bottom:.75em;
padding-left: 0.5em;
}
.bod ol li ol li {
margin-bottom:0em;
list-style:upper-alpha;
}
.left {
float:left;
}
.right {
float:right;
}


/*
 *
 * Arrow Classes
 *
 */
.arrows-sm-l,
.arrows-sm-r,
.arrows-sm-u,
.arrows-sm-d,
.arrows-lg-l,
.arrows-lg-r {
display:block;
text-indent: -9999px;
background-repeat:repeat;
z-index:101;
outline:none;
cursor:pointer;
}
.arrows-sm-l,
.arrows-sm-r,
.arrows-sm-u,
.arrows-sm-d {
width:18px;
height:18px;
}
.arrows-sm-l, .arrows-sm-r {
background-image:url(/w/i/frame/arrows-sm-horz.gif);
}
.arrows-sm-l {
background-position:0px 18px;
}
.arrows-sm-l:hover {
background-position:0px 0px;
}
.arrows-sm-r {
background-position:18px 18px;
}
.arrows-sm-r:hover {
background-position:18px 0px;
}
.arrows-sm-u, .arrows-sm-d {
background-image:url(/w/i/frame/arrows-sm-vert.gif);
}
.arrows-sm-u {
background-position:0px 0px;
}
.arrows-sm-u:hover {
background-position:18px 0px;
}
.arrows-sm-d {
background-position:0px 18px;
}
.arrows-sm-d:hover {
background-position:18px 18px;
}
.arrows-lg-l,
.arrows-lg-r {
width:30px;
height:30px;
}
.arrows-lg-l, .arrows-lg-r {
background-image:url(/w/i/frame/arrows-lg-horz.png);
}
.arrows-lg-l {
background-position:0px 0px;
}
.arrows-lg-l:hover {
background-position:30px 0px;
}
.arrows-lg-r {
background-position:0px 30px;
}
.arrows-lg-r:hover {
background-position:30px 30px;
}



/*
 * Panels
 *
 * @el .one-panel One full-width column
 * @el .two-panel Two columns, larger right column
 * @el .three-panel Three equal columns
 */

.one-panel .panel, .two-panel .panel, .three-panel .panel, .four-panel .panel {
float:left;
width:100%;
}
.three-panel .panel {
position:relative;
height:83px;
}
.three-panel .panel img {
position:absolute;
left:0;
bottom:0;
z-index:10;
}
.three-panel .panel dl {
margin-top: 10px;
margin-left:83px;
padding-right:2px;
z-index:100;
}


/*
 * Section Home
 */

#section-home dl {
float:left;
width:265px;
margin-left:10px;
margin-bottom:10px;
}
#section-home .image-container {
clear:both;
}


/*
 * Product List
 */

#product-list {
}

#product-list .product {
margin-bottom:20px; 
}
#product-list .image {
margin-top:1em;
}
#product-list .name {
margin-left:190px; 
margin-bottom:8px;
font-size:16px;
font-weight:bold;
}
#product-list .usage-title {
margin-bottom:8px;
font-size:12px;
font-weight:bold;
text-transform: uppercase;
}
#product-list .usage-list {
float:left;
width:138px;
margin-top:0;
margin-left:0;
padding-left:0;
list-style:none;
}
#product-list .usage-list li {
margin-left:0;
padding-left:20px;
font-size:11px;
list-style:none;
color:#ccc;
background: url(/w/i/frame/circle-x.gif) no-repeat;
}
#product-list .usage-list li.active {
font-weight:bold;
color:#339933;
background: url(/w/i/frame/circle-checkmark.gif) no-repeat;
}
#product-list table.chart {
border-collapse : collapse;
margin-left: 1px;
}
#product-list table.chart td,
#product-list table.chart th {
padding     : 2px;
border      : 1px solid #ccc;
font        : 12px/16px arial,helvetica,clean,sans-serif;
text-align  : center;
}

#product-list table.chart th {
background : #eee;
text-transform: uppercase;
font-weight: bold;
}


/* Ideas - Color Collection */
.panels .panel {
background:#d8d8d8;
}
.panels .photo {
display:block;
width:306px;
height:195px;
border-bottom:1px solid #bbb;
}
#default-template .three-panels .photo {
width:306px;
height:195px; 
}
#default-template .four-panels .photo {
width:226px;
height:180px; 
}
#inside-template .three-panels .photo {
width:239px;
height:195px;
border:1px solid #ddd;
border-bottom:1px solid #bbb;
}
.panels .label {
display:block;
margin:10px 8px;
border:1px solid #cccccc;
background:#fff;
text-align:center;
}

.panels .action {
margin:12px 10px 12px 0;
}


/*
 *
 * Tips & Tricks
 * 
 * @el #tips-toc -- List of tip headings
 * @el #tips -- Tip list container
 * @el .tip -- Individual tip
 * 
 */

#tips-toc {
margin-top:0.5em;
}
#tips-toc li {
margin-left:0;
padding-left:0;
list-style:none;
}

#tips {
padding-top:2em;
border-top:1px solid #ccc;
}
#tips .tip {
border-bottom:1px solid #ddd;
margin:.0em 0 2em 0;
}
#tips .tip:last-child {
border-bottom:0;
}
.tip .title {
margin-bottom:0.5em;
}
.tip .copy {
margin-bottom:0.75em;
}
.tip .image-small {
width:275px;
margin:.5em 0 0.5em 0.5em;
background:#999;
}

.tip .image-large {
margin: 1em 0;
background:#ccc;
}

/* Flash */
#flash_message {
width:510px;
margin:-28px 0 18px 380px;
padding:5px 10px;
border:1px solid red;
color:red;
background:#ffecec;
}
.flash-box {
font-size:18px;
font-weight:bold;
background:url(/w/i/frame/loading.gif) 50% 50% no-repeat;
}
.flash-box span {
cursor: pointer;
}
div.colour-notice {
padding: 20px;
}

/* Shadow Elements */
.shadow {
background:#ffffff;
-moz-box-shadow:  #d3d3d3 3px 3px 3px;
-webkit-box-shadow:  #d3d3d3 3px 3px 3px;
-moz-border-radius: 4px;
}
.shadow img {
-moz-border-radius: 4px;
}
.dark-shadow {
-moz-box-shadow:  #bebebe 3px 3px 3px;
-webkit-box-shadow:  #bebebe 3px 3px 3px;
-moz-border-radius: 6px;
}
.dark-shadow img {
-moz-border-radius: 3x
}



/*
 *
 * Scroll Pane
 *
 * @version 0.1
 * @el .scroll-pane Scrollable content
 * @el .jScrollPane  Scroll Widget
 * 
 */
.scroll-pane {
padding:0;
padding-right:20px;
height: 285px;
overflow: auto;
float: left;
}

.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
padding-right:0px;
}
.jScrollPaneTrack{
position:absolute;
cursor:pointer;
right:0;top:0;
height:100%;
background:#dfdfdf;
}
.jScrollPaneDrag{
position:absolute; 
background:#ffac59;
cursor:pointer;
overflow:hidden;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}





/*
 *
 * Pagination
 *
 * @version 1.0
 * 
 */
#pagination {
border:0;
margin:0;
padding:0;
font:12px Arial, Helvetica, sans-serif;
text-align:center;
}
#pagination a,
#pagination span {
border:0; margin:0; padding:0;
font:12px Arial, Helvetica, sans-serif;
}
#pagination a {
border:solid 1px #DDDDDD;
margin-right:2px;
}
#pagination .prev-off,
#pagination .next-off {
color:#666666;
display:inline-block;
font-weight:bold;
padding:1px 4px;
}
#pagination .prev,
#pagination .prev-off {
margin-right:20px;
}
#pagination .next,
#pagination .next-off {
margin-left:20px;
}
#pagination .next,
#pagination .prev {
border:solid 1px #FFFFFF;
font-weight:bold;
}
#pagination .active{
color:#ff0084;
font-weight:bold;
display:inline-block;
padding:1px 6px;
}
#pagination a:link,
#pagination a:visited {
color:#ff5400;
display:inline-block;
padding:3px 6px;
text-decoration:none;
}
#pagination a:hover{
border:solid 1px #aaaaaa;
}

#pagination-summary {
margin-top:1em;
font-size:10px;
color:#aaa;
text-align:center;
}




/*
 * Overlayed Elements
 *
 * @author steve
 *
 */
.overlay {
display             : none;
z-index             : 10000;
background-color    : #fff;
border              : 5px solid #FF9933;
-moz-box-shadow     : 0 0 90px 5px #000;
-webkit-box-shadow  : 0 0 90px #000;
}

div#color-schemer-overlay,
div#color-schemer-overlay div.iframe-div-wrapper {
width   : 614px;
height  : 543px;
background: #fff;
}

div#schemer-iframe-wrapper {
overflow: auto;
}

div#mp-schemer-overlay,
div#mp-schemer-overlay div.iframe-div-wrapper
{
width      : 722px;
height     : 555px;
background : #fff;
}

div#mp-iframe-wrapper {
overflow: auto;
}

.overlay .close {
background-image : url(/w/i/frame/close.png);
position         : absolute;
right            : -30px;
top              : -30px;
cursor           : pointer;
height           : 35px;
width            : 35px;
}

#after-video-overlay .close {
display:none;
height:1px;
width:1px;
background-image:none;
}




/*
 *
 * sIFR versio n3
 *
 * Copyright 2006 – 2008 Mark Wubben, <http://novemberborn.net/>
 * This software is licensed and provided under the CC-GNU LGPL.
 * See <http://creativecommons.org/licenses/LGPL/2.1/>
 * 
 */

@media screen {
	.sIFR-flash {
		visibility: visible !important;
		margin: 0;
		padding: 0;
	}

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

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

	.sIFR-replaced div.sIFR-fixfocus {
		margin: 0pt; 
		padding: 0pt; 
		overflow: auto; 
		letter-spacing: 0px; 
		float: none;
	}
}

@media print {
	.sIFR-flash {
		display    : none !important;
		height     : 0;
		width      : 0;
		position   : absolute;
		overflow   : hidden;
	}

	.sIFR-alternate {
		visibility : visible !important;
		display    : block   !important;
		position   : static  !important;
		left    	   : auto    !important;
		top        : auto    !important;
		width      : auto    !important;
		height     : auto    !important;
	}
}


.sIFR-active h1 {
width          : 600px;
visibility     : hidden;
font-family    : Arial, Helvetica, sans-serif;
line-height    : 1em;
font-size      : 28px;
margin-left    : -3px;
margin-bottom  : 0px;
padding-bottom : 0px;
letter-spacing : 5px;
font-weight    : normal;
z-index        : 8000;
}



/* clear fixes */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

sup {
	vertical-align:text-top;
	font-size: .65em;
}

/* bottom of stack options */
/****************************************************************************************************************/
div.bottomnone			{ margin-bottom : 0px;  padding-bottom: 0px; }
div.bottomspacing		{ margin-bottom	: 18px;	padding-bottom: 0px; }
div.bottomline			{ margin-bottom : 18px; padding-bottom: 18px; border-bottom	: 1px solid #000000;     }
div.backtotop			{ margin-bottom : 28px; padding-bottom: 18px; text-align:right; padding-right: 20px; }