/**************************************************
/* Style Sheet Index
/* Note: These are DuSpec specific styles and
/* Augment the dulux styles in dulux-styles.css
/**************************************************

	Site: DuSpec
	Creation Date: 01.02.11
	
	///INDEX\\\\

	1.0 General Layout Styles
		1.1 Sticky Footer
		
	2.0 Header
		2.1 Site Options
		2.2 Logo
		2.3 Specifer & Applicator
			2.3a Specifer 
			2.3b Applicator
		2.4 Login
		2.5 Search
		
	3.0 Navigation
		3.1 Main nav
		3.2 Main nav Class = MAIN
		3.3 Main nav Class = SPECIFER
		3.4 Main nav Class = APPLICATOR
		3.5 2nd Level Nav
		3.6 Sub Nav
		3.7 Site Map
		
	4.0 Breadcrumbs
	
	5.0 Sidebar
		5.1 2nd Level
		5.2 3rd Level
		
	6.0 Content Main
		6.1 Search Results
		6.2 Search Nav
		6.3 Colour Gallery
		6.4 Spaces specific styles
		6.5 Promo
		6.6 List Page
		6.7 Footer Section
		6.8 Colour Consultant Forms
		6.9 Registration Pages
			6.9a Member Login Box
		6.10 Category Page
		6.11 Find a Retailer
		6.12 Preferred Painter
		6.13 Acratex
		
	7.0 Sub Content
	
	8.0 Form Validation
	
	9.0 Calculator
		9.1 Calculator Home Page
		9.2 Radio Buttons
		9.3 Check boxs
		9.4 Paragraphs in Froms
		9.5 Paint Results
		9.6 Error Message
		
	10.0 Promo Panel
	
	11.0 Colour Forecast
		11.1 Design Collection
	
	12.0 List Page
		12.1 Product
		
	13.0 Product Description
		13.1 Sub Content
		
	14.0 Footer
	
	15.0 Dock
		15.1 Dropznes
		15.2 Dragged icons
	
	16.0 Heading Colours
		16.1 Heading Image
		
	17.0 Javascript
	
	18.0 Project Gallery
	
	19.0 My Project
		19.1 My Project Panel
		19.2 My Scrapbook Panel
			19.2a Colour 
			19.2b Schemes
			19.2c Pictures
			19.2d Products
			19.2e Video												
		19.3 Removable
		19.4 Colour Scheme
		19.5 Visual My Colour
		19.6 My Products
		19.7 Paint Calculation
		19.8 Closest Retailer
		19.9 Receipt No.
		
	20.0 Product Selector / WPW
		20.1 Stage 1
		20.2 Stage 2
		20.3 Stage 3
		
	21.0 Generic Styles
	
	22.0 Overlay Styles
	
	23.0 HomePages
	
	24.0 Shop
	
	24.0 Flash Pages
	
	25.0 Landing Pages
		25.1 Consumer Colour
		25.2 Consumer Products
		25.3 IE6 upgrade warning
		25.4 Colour Booklets
	
	26.0 Laminex Colour Schemes Booklet Form
	
	27.0 Easter Promo Form - Dulux Greatest Hits	
	


/**************************************************
/** 1.0 General Layout Styles 
/**************************************************/
html, body {
	height: 98%;
}

#footer {
	padding: 46px 6px 0px 6px;
}

/*************
/* 2.2 Logo */
/*************/
a.logo {
	background: url(imgs/duspec_banner_logo.gif) no-repeat 0 0;
	display: block;
	float: left;
	height: 55px;
	margin-top: 20px;
	text-indent: -999em;
	width: 296px;
}

#content-main {
	float: left;
	padding: 0 0 21px 0px;
	margin-top: 0px;
}

#notLoggedIn 
{
    width: 972px;
}

/* Styling for a list of checkboxes / images in a div */
.chkBoxList{
	width:100%;
	height:auto;
	
	overflow:hidden;
	}

.chkBoxList ul{
	margin:0;
	padding:0;
	list-style:none;

}

.chkBoxList ul li{
	list-style:none;
	display:inline;
	float:left;
	margin-right:2%;
}

.chkBoxList ul li p{
		margin:0;
		padding:0;
}

.chkBoxList ul li img{
		height:45px;
		width:49px;
}

/* Duspec Specific Styles */

.modalBackground
{
 background-color: Gray; 
 filter:alpha(opacity=70); 
 opacity:0.7;
} 

.popupPanelSelector
{
    width: 850px;
    background-color: White;
    padding: 20px;
    background: #fbfbfb url(imgs/bg_body.jpg) repeat-x 0 0;
}

.popupPanelMax
{
    width: 800px;
    height: 70%;
    background-color: White;
    padding: 20px;
    background: #fbfbfb url(imgs/bg_body.jpg) repeat-x 0 0;
}

.popupPanel
{
    width: 70%;
    background-color: White;
    padding: 40px;
}

.smallPopupPanel
{
    width: 40%;
    background-color: White;
    padding: 40px;
}

.coatingPanel
{
    padding-top: 10px;
    height: 200px;
}

.coatingQuestion
{
	font-size: 1.1em;
	font-weight: bold;
}

.popupPrimaryHeading /* same colour and size as para-img */
{
	color: #00235E;
	font-size: 1.5em;
	font-weight: bold;
	padding-bottom: 15px;
}

.popupSecondaryHeading /* same colour and size as para-img */
{
	color: #00235E;
	font-size: 1em;
}

textarea,input,select, #divImpactedBy p /* took font colour and family from body */
{
	color: #2d2d2d;
	font-family: Arial, Helvetica, sans-serif, Tahoma;
	font-size: 1em;
}

.inputLiteral
{
	color: #00235E;
	font-size: 1em;
	font-weight: bold;
}

#SubstrateList .conditionHdr
{
    width: 8%;
    color: #00235E;
}

.listHeader
{
    color: #00235E;
}

/* Radio button list to allow items to be horizontal */

table.rb_centre input
{
    float:left;
}

table.rb_centre label
{	
    display:inline;
    margin-left:5px;
    margin-right:20px;
}

.rb_std input
{
    float:left;
}

.rb_std label
{	
    display:inline;
    margin-left:5px;
    margin-right:20px;
}


/* Textbox Watermark extender */
.watermarked {
/*	height:20px;
	width:150px;
	background-color:#F0F8FF;
	border:1px solid #BEBEBE;
*/
    height:14px;
	padding:2px 0px 2px 0px;
	color:gray;
    font-size: 1em;
}

/* Model Pop up extender */
 .modalPopup {
	background-color:#031754;
	border-width:3px;
	border-style:solid;
	border-color:Gray;
	padding:3px;
}

.modalBackground {
	background-color:Gray;
}

.outerListItemDiv
{
    position: relative; 
    vertical-align:top;
}

.rightInnerListItemDiv
{
    float: right; 
    padding-bottom:1em;
    vertical-align:top;
}

.leftInnerListItemDiv
{
    float: left;
    vertical-align:top;
}

.draftItemDiv
{
    display: block;
}

.watermarkedText 
{
	color:gray;
    font-size: 1em;
}

.progress
{
    position:absolute;
    vertical-align:middle;
    left: 48%;
    top: 48%;
    visibility:visible;
    border-style:inset;
    border-color:black;
    background-color:#c8d1d4;    
}

.log-in-blurb 
{
	background: url(imgs/bg_login_wide.png) no-repeat 0 0;
	height: 210px;
	padding: 14px 30px 10px 18px;
	width: 380px;
	float: left;
	margin-left: 15px;
}

#content-main .topHeading
{
    color: #00235E;
	font-size: 2.0em;
	padding-bottom: 0.6em;
}

.topHeading
{
    color: #00235E;
	font-size: 2.0em;
	padding-bottom: 0.6em;
}

.log-in 
{
	background: url(imgs/bg_login.png) no-repeat 0 0;
	height: 190px;
	padding: 14px 30px 10px 18px;
	width: 300px;
	float:left;
}

.level4Heading
{
    color: #00235E;
	font-size: 1.0em;
	font-weight: bold;
	padding-bottom: 0.6em;
	display: block;
}

.log-in-links 
{
	background: url(imgs/bg_login-small.png) no-repeat 0 0;
	height: 190px;
	padding: 14px 30px 10px 18px;
	float:right;
	width: 130px;
}


.dashboardControl
{
	background: url(imgs/bg_dashboard.jpg) repeat-x 0 0;
	padding: 12px 12px 12px 12px;
	border-color: #E8E8E8;
	border-width: 2px;
	border-style: solid;
	background-color: #EDEDED;
}

.smallHeading
{
    font-size:0.77em;
    padding-top:15px;
}

.warning
{
    font-weight: bold;
    color: red;
}

.draftWarning
{
    font-weight: normal;
    color: red;
}

.boldHeaderBar
{
    background: #00235e url(imgs/jquery/ui-bg_highlight-soft_75_00235e_1x100.png) 50% 50% repeat-x;
    /* background-color:#00235E; */
    color:White;
    padding-left: 5px;
    padding-bottom: 4px;
    padding-top: 4px;
    padding-right: 5px;
    font-size: 1em;
    margin-bottom: 10px;
}

.searchTable
{
    padding-left:15px;
}

.SearchMessage
{
    font-weight:bold;
    padding-top:40px;
}

.listMainHeading
{
	color: #003366;
	font-size: 1.8em;
	font-weight: bold;
	padding-left: 5px;
}

.listSubHeading
{
	color: #2D2D2D;
	font-weight: bold;
	padding-left: 8px;
}

.listHeadingDiv
{
	padding-top: 3px;
    padding-bottom: 10px;	
}

.singleDdl
{
    padding-left: 8px; 
    padding-bottom: 20px;
}

.singleColourSampleDiv
{
    text-align: left;
    vertical-align: bottom;
    padding:0;
    margin-left: -2.5px;
    margin-right: 0.25px; /* using the negative margins to get rid of the horizontal spaces between divs */
    margin-top:0px;
    margin-bottom:1px;
    cursor: pointer;
    display: inline-block;
}

.singleColourSampleInnerDiv
{
    vertical-align: bottom;
    margin-left: 3px;
    margin-bottom: 3px;
    margin-right: 3px;
    margin-top: 5px;
    font-family: helvetica;
    font-size: 0.7em;
    font-weight: normal;
}

.singleColourDiv
{
    display:inline;
    padding:0;
    margin:0;
}

.colourMessage
{
    font-size: 0.8em;
	color: #003366;
}

.smallColourSelectionSegment
{
    padding:0;
    margin-left: -4.0px;
    margin-right: 0.2px; /* using the negative margins to get rid of the horizontal spaces between divs */
    margin-top:0px;
    margin-bottom:0px;
    border: 1;
    cursor: pointer;
}

.profileMainHeading
{
	color: #2D2D2D;
	font-size: 1.4em;
	font-weight: bold;
	padding-left: 8px;
}

.profileSubHeading
{
	color: #003366;
	font-weight: bold;
	padding-left: 8px;
	font-size: 1.2em;
}

.profileWelcome
{
	color: #003366;
	font-weight: bold;
	padding-left: 5px;
	font-size: 1.0em;
}

.paddedMessage
{
	color: #2d2d2d;
	font-weight: bold;
	padding-left:8px;
}

.paddedWarning
{
	color: red;
	font-weight: bold;
	padding-left:8px;
}

.actionAnchor
{
	color: #003366;
	font-weight: bold;
	padding-left: 5px;
	font-size: 1.0em;
	text-decoration: underline;
}

/* Table styles used in most forms */
.stdTable
{
    width:100%;
    page-break-inside:avoid;

	border-width: 1px;
	border-spacing: 0px;
	border-style: outset;
	border-color: white;
	border-collapse: separate;
}

.stdHeader
{
    padding:4px 8px 4px 4px;
    background:#003366;
    color:White;
    
    border-width: 1px;
	border-style: inset;
	border-color: #003366;
}

.stdCell
{
    padding:6px 10px 6px 6px;
    
    border-width: 1px;
	border-style: inset;
	border-color: white;
}

.stdCellHeading
{
    padding:6px 10px 6px 6px;
    font-weight:bold;

    border-width: 1px;
	border-style: inset;
	border-color: white;
}

/* For the flyout / slider jquery effect */
.changepanel {
position: relative;
top: 20px;
left: 0;
display: none;
background: white;
border:1px solid #111111;
width: 300px;
height: auto;
padding: 15px 50px 30px 65px;
filter: alpha(opacity=85);
opacity: .85;
}

.changepanel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.changepanel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.changepanel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: white;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: relative;
display:block;
padding-left: 10px;
background: url(imgs/changes.png) 85% 55% no-repeat;
width: 53px;
height: 14px;
}

a.trigger:hover{
position: relative;
display:block;
padding-left: 10px;
background: url(imgs/changes.png) 85% 55% no-repeat;
width: 53px;
height: 14px;
}

a.active.trigger {
background: url(imgs/close.png) 85% 55% no-repeat;
width: 53px;
height: 14px;
}

/* for the activity indicator */
.overlay {
    position: fixed;
    z-index: 100000;
    top: 50%;
    left: 50%;
    background-color: #FFFFFF;
    width: 36px;
    height: 36px;
    filter: Alpha(Opacity=99);
    opacity: 0.99;
    -moz-opacity: 0.99;
}

.popupMenu {
	position:absolute;
	visibility:hidden;
	background-color:white;
	opacity:1;
	filter: alpha(opacity=100);
	padding-left: 3px;
	padding-right: 3px;
}

/* Autocomplete styling */
.autocomplete_completionListElement
{
    margin : 0px! important;
    background-color : white;
    border : solid 1px gray;
    cursor : pointer;
    text-align : left;
    list-style-type : none;
    padding : 0; 
    max-height:175px;
    overflow:auto;
    z-index:100002;
}
.autocomplete_listItem
{
	line-height:25px;
	background-color: white;
    padding : 1px; 
    padding-left:3px;
}
.autocomplete_highlightedListItem
{
	line-height:25px;
	background-color: #C8D1D4;
    padding : 1px; 
    padding-left:4px;
}

.confirmDialog
{
    display: none;
    position: absolute; 
    padding: .2em; 
    width: 300px; 
    overflow: hidden;
    width: 14px; 
    height: 14px; 
    right: 3px; 
    bottom: 3px; 
}

.confirmHeader
{
    padding: 6px;
    text-align: center;
    height:20px; 
    border: 1px solid #00235e; 
    background: #00235e url(imgs/jquery/ui-bg_highlight-soft_75_00235e_1x100.png) 50% 50% repeat-x; 
    color: #ffffff; 
    font-weight: bold;
}

.confirmButton
{
    padding: 10px;
}

.modalBackgroundLight
{
    background: url("imgs/jquery/ui-bg_flat_0_aaaaaa_40x100.png") repeat-x scroll 50% 50% #AAAAAA;
    opacity: 0.3;    
    filter:alpha(opacity=30); 
 } 

.floatRight
{
    float: right;
}

.textStyle /* took font colour and family from body */
{
	font-family: Arial, Helvetica, sans-serif, Tahoma;
	font-size: 82.5%;
}

.coatingSelectorLabel
{
	color: #00235E;
	font-size: 1em;
	font-weight: bold;
	margin-top:10px;
}

.coatingSelectorLabelThumbnail
{
    margin-bottom:5px;
}

/* Styling for product selector tab container */

/* xp theme */
.coatSelectorTab .ajax__tab_header {font-family:Arial, Helvetica, sans-serif, Tahoma;font-weight:bold;background:url("imgs/tabs/tab-line.gif") repeat-x bottom;}
.coatSelectorTab .ajax__tab_outer {padding-right:4px;background:url("imgs/tabs/tab-right.gif") no-repeat right;height:21px;}
.coatSelectorTab .ajax__tab_inner {padding-left:3px;background:url("imgs/tabs/tab-left.gif") no-repeat;}
.coatSelectorTab .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url("imgs/tabs/tab.gif") repeat-x;}
.coatSelectorTab .ajax__tab_hover .ajax__tab_outer {background:url("imgs/tabs/tab-hover-right.gif") no-repeat right;}
.coatSelectorTab .ajax__tab_hover .ajax__tab_inner {background:url("imgs/tabs/tab-hover-left.gif") no-repeat;}
.coatSelectorTab .ajax__tab_hover .ajax__tab_tab {background:url("imgs/tabs/tab-hover.gif") repeat-x;}
.coatSelectorTab .ajax__tab_active .ajax__tab_outer {background:url("imgs/tabs/tab-active-right.gif") no-repeat right;}
.coatSelectorTab .ajax__tab_active .ajax__tab_inner {background:url("imgs/tabs/tab-active-left.gif") no-repeat;}
.coatSelectorTab .ajax__tab_active .ajax__tab_tab {background:url("imgs/tabs/tab-active.gif") repeat-x;}
.coatSelectorTab .ajax__tab_body {font-family:Arial, Helvetica, sans-serif, Tahoma;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}

.projectTemplateCategoryHeading
{
	color: #003366;
	font-size: 2.5em;
	font-weight: bold;
}

.projectTemplateCategory
{
    display: block;
    margin-top:5px;
	font-size: 1.1em;
	font-weight: bold;
	color: #00235E;
}

.projectTemplateCategoryMessage
{
    margin-top:5px;
	font-size: 1.1em;
	font-weight: normal;
	color: #00235E;
}

.projectTemplateQuestion
{
	color: #00235E;
	font-size: 1.1em;
	font-weight: bold;
}

/* Styles for rotating images */
#rotating-item-wrapper {
	position: relative;
	width: 970px;
	height: 321px;
}
.rotating-item {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

.paStyle
{
	font-size: 1em;
}

.paMainHeading
{
    font-size: 1.5em;
    font-weight: bold;
}

.paLevel1Heading
{
	font-size: 1em;
    font-weight: bold;
}

.paAlphaList
{
	font-size: 1em;
    font-weight: bold;
    list-style-type: lower-alpha;
}

.paRomanList
{
	font-size: 1em;
    font-weight: bold;
    list-style-type: lower-roman;
}

.paSpan
{
	font-size: 1em;
    font-weight: normal;
}

.paText
{
	font-size: 0.9em;
}

.pnlImageSelector
{
    width: 21%;
    background-color: White;
}

.pnlImageSelectorButton
{
    margin-left:5%;
    margin-bottom: 5%;
}

/* Styles for cover page */
.coverTable
{
	border-width: 0px;
	border-spacing: 0px;
	border-style:none;
}

.coverMajor
{
    color: #00235E;
	font-size: 2.5em;
    font-family:Arial Narrow;
    font-weight:bold;
    padding:6px 6px 6px 6px;
    vertical-align:top;
}

.coverMinor
{
    color: #00235E;
	font-size: 2em;
    font-family:Arial Narrow;
    padding:6px 6px 6px 6px;
    vertical-align:top;
}

.fixedRightHandCorner
{
     position:fixed;
     bottom:0;
     right:0;
     width:200px;
     height:50px;
     color: White;
     font-size:1.25em;
     text-align:center;
}    

.projectWarning
{
    font-size: 0.9em;
	color: red;
	padding-top: 8px;
	display:block;
}