/* ===================[ layoutPopinPanel.css ]===========================
DHTML Pop-in Panels for Dacor

Author:     martin.dube[AT]nurun.com, november 2007
Updated:    
Media: 		Screen Device
Content:	Panels
			Newsletter Signup Panel (footer)
			Get direction Panel - starting address
			Get Directions Page [1.4.1]
			Browse our collections
			Add to Wish List - Confirmation Panel
			Send to a friend Panel

========================================================================== */


/* -- Do Not Display in Media Screen -- */
.printer-content,
hr.printer {
	display: none;
	}


/* =================================
	 Panels
==================================== */
	
body.panel { 
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
	line-height: 1.15em;
	color: #707070;
	background: #C0C0C0;
	}
body.panel form { 
	height: 100%;
	}

/* Refer to "container.css" for "hd" styling */
.control .hd,
.yui-panel .hd {
	background: url(../Images/UI/logo_popup.gif);
	}

#panel-container,
.control .panel-container {
	float: left;
	background: #c0c0c0 url(../Images/UI/background-panel2.gif) no-repeat top left;
	width: 100%;
	height: 100%;
	margin: 0 auto 0 auto;
	padding: 0;
	color: #707070;
	}
	
#panel-container-locate-a-dealer,
.control .panel-container-locate-a-dealer {
	float: left;
	background: #c0c0c0 url(../Images/UI/background-panel2_775x1286.gif) no-repeat top left;
	width: 100%;
	height: 100%;
	margin: 0 auto 0 auto;
	padding: 0;
	color: #707070;
	}
	
#panel-container-locate-a-dealer #panel-master-locate-a-dealer,
.control .panel-container-locate-a-dealer .panel-master-locate-a-dealer {
	float: none;
	}
	
#panel-container-locate-a-dealer .content-tools,
.control .panel-container-locate-a-dealer .content-tools {
	right:32px;
	}
	
	
#panel-container #panel-master,
.control .panel-container .panel-master {
	float: none;
	}

#panel-container .content-tools,
.control .panel-container .content-tools {
	right:32px;
	}

/* Panel's titles */
#panel-container h2,
.control .panel-container h2 {
	display:block !important;
	width: 100%;
	height: 25px;
	color: #000;
	font-size: 197%;
	font-family:"Times New Roman",Times,serif;
	background-repeat: no-repeat;
	}
#panel-container h3,
.control .panel-container h3 {
	color: #000;
	}

/* Panel's links, span and labels */
#panel-container span,
.panel-container span,
#panel-container label,
.panel-container label{
	color: #000;
	}
#panel-container .mandatory,
.panel-container .mandatory, 
#panel-container .fields-mandatory,
.panel-container .fields-mandatory {
	color: #707070;
	}
#panel-container #panel-content p span.required {
	color: #666;
	}
#panel-container #panel-content a.button, 
.control .panel-container .panel-content a.button {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
	color: #5badff !important;
	text-decoration: none;
	padding: 0 9px 0 0; 
	background: url(../Images/UI/background_panel-button.gif) no-repeat 100% 60%; 
	}


/* Panel's links, span and labels - locate a dealer */
#panel-container-locate-a-dealer span,
.panel-container-locate-a-dealer span,
#panel-container-locate-a-dealer label,
.panel-container-locate-a-dealer label{
	color: #000;
	}

#panel-container-locate-a-dealer .mandatory,
.panel-container-locate-a-dealer .mandatory, 
#panel-container-locate-a-dealer .fields-mandatory,
.panel-container-locate-a-dealer .fields-mandatory {
	color: #707070;
	}
	
#panel-container-locate-a-dealer #panel-content-locate-a-dealer p span.required {
	color: #666;
	}
	
#panel-container-locate-a-dealer #panel-content-locate-a-dealer a.button, 
.control .panel-container-locate-a-dealer .panel-content-locate-a-dealer a.button {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
	color: #5badff !important;
	text-decoration: none;
	padding: 0 9px 0 0; 
	background: url(../Images/UI/background_panel-button.gif) no-repeat 100% 60%; 
	}

/* Panel's content - locate a dealer */
#panel-container-locate-a-dealer #panel-content-locate-a-dealer,
.control .panel-container-locate-a-dealer .panel-content-locate-a-dealer {
	float: none;
	width: auto;
	padding: 16px;
	background: none;
	}
	
	

/* Panel's content */
#panel-container #panel-content,
.control .panel-container .panel-content {
	float: none;
	width: auto;
	padding: 16px;
	background: none;
	}
	

/* Panel's form zone */
#panel-container #panel-content #panel-form,
.control .panel-container .panel-content .panel-form {
	float: left;
	width: 416px;
	margin: 0 0 16px 0;
	padding:  16px;
	border: 1px solid #b0b0b0;
	background: #f0f0f0 url(../Images/UI/background-panel-content.gif) no-repeat top left;
	}
	
	
#panel-container #panel-content .formblock,
.control .panel-container .panel-content .formblock {
	float: left;
	width: 280px;
	}
	
#panel-container-locate-a-dealer #panel-content-locate-a-dealer .formblock,
.control .panel-container-locate-a-dealer .panel-content-locate-a-dealer .formblock {
	float: left;
	width: 280px;
	}
	
	

/* Panel's form table */
#panel-container #panel-content .formblock table,
.control .panel-container .panel-content .formblock table {
    float: left;
    width: auto;
    z-index:999;
    margin: 0;
    padding: 0;
	}
	
	
#panel-content .formblock table td,
.control .panel-content .formblock table td {
	width: auto;
	}

	/* .......Replace the ":first-child" attribute with <td class="left-label"> in html ......... */
	/*#panel-content .formblock table td:first-child,
	.control .panel-content .formblock table td:first-child,*/
	#panel-content .formblock table td.label,
	.control .panel-content .formblock table td.label {
		width: auto;
		}
	#panel-content .formblock table td.left-label,
	.control .panel-content .formblock table td.left-label {
		width: auto;
		text-align: right;
		}

#panel-content .formblock table tr.row-separator td {
	background-image: none;
	}


/* Panel's Errors */
#panel-container #panel-content .formblock .required { 
	border: 1px solid #f62121 !important;
	}
#panel-container #panel-content .formblock span.required { /* depreciated - should no longer affect labels */
	color: #f62121 !important;
	border: none !important;
	}
#panel-container #panel-content .formblock .error-container {
	font-size: 92%; 
	}

/* Panel's tag formatting */
#panel-container .formblock legend {
	color: #585858;
	font-weight: bold;
	}
#panel-container .formblock select {	
	width: 150px;
	border: 1px solid #c0c0c0;
	background-color: transparent;
	color: #000;
	}
#panel-container .formblock textarea {
	width: 150px;
	padding: 1px;
	margin: 0;
	border: 1px solid #c0c0c0;
	background-color: transparent;
	color: #000;
	}
#panel-container .formblock input {
	width: 150px;
	border: 1px solid #c0c0c0;
	background-color: transparent;
	color: #000;
	}
#panel-container .formblock input.submit, 
.control .panel-container .formblock input.submit, 
#panel-container .formblock input.reset, 
.control .panel-container .formblock input.reset,
#panel-container .formblock input.button, 
.control .panel-container .formblock input.button {
	border: 1px solid #b0b0b0;
	background-color: transparent;
	color: #000;
	}
#panel-container .formblock input.submit:hover, 
.control .panel-container .formblock input.submit:hover,
#panel-container .formblock input.reset:hover, 
.control .panel-container .formblock input.reset:hover, 
#panel-container .formblock input.button:hover,
.control .panel-container .formblock input.button:hover {
	background-color: #fff;
	}
#panel-container .formblock button,
.control .panel-container .formblock button {
	border: 1px solid #b0b0b0;
	background: transparent url(../Images/UI/background_panel-button.gif) no-repeat 100% 65%;
	color: #000;
	}
#panel-container .formblock button:hover,
.panel-container .formblock button:hover {
	color: #bebebe;
	}	
#panel-container #panel-secondary,
.panel-container #panel-secondary {
	float: right;
	width: 125px;
	}
#panel-container #panel-secondary p.note,
.panel-container #panel-secondary p.note {
	font-size: 85%;
	}
#panel-container #panel-secondary dl.image,
.panel-container #panel-secondary dl.image {
	float: left;
	width: 121px;
	padding: 94px 10px 1em 0;
	margin: 0;
	}
#panel-container #panel-secondary dl.image dt,
.panel-container #panel-secondary dl.image dt {
	color: #308dee;
	margin: 0;
	padding: .25em 0 0 0;
	text-transform: uppercase;
	}
#panel-container #panel-secondary dl.image dd,
.panel-container #panel-secondary dl.image dd {
	color: #000;
	margin: 0;
	padding: 0;
	}
#panel-container #panel-secondary dl.image dd.image,
.panel-container #panel-secondary dl.image dd.image {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 121px;
	height: 94px;
	background: none;
	}
#panel-container #panel-secondary dl.image dd.sku,
.panel-container #panel-secondary dl.image dd.sku {
	color: #707070;
	}

#panel-container #panel-content .related-links,
.panel-container .panel-content .related-links {
	width: 100%;
	text-align: right;
	margin: 0 0 0 0;
	padding: 1.5em 0 0 0;
	background: url(../Images/UI/line_horizontal_panel-content.gif) no-repeat 0 0;
	}
#panel-container #panel-content .related-links p,
.panel-container .panel-content .related-links p {
	color: #707070;
	}
#panel-container #panel-content .related-links,
.panel-container .panel-content .related-links {
	width: 100%;
	text-align: right;
	}
#panel-container #panel-content .related-links ul,
.panel-container .panel-content .related-links ul {
	list-style-type: none;
	}

#panel-content .content-tools li a,
.panel-content .content-tools li a {
	color: #707070;
	}
#panel-content .content-tools li a:hover,
.panel-content .content-tools li a:hover {
	color: #000;
	}	
#panel-content .content-tools li.print a,
.panel-content .content-tools li.print a,
#panel-content .content-tools li.print-preview a,
.panel-content .content-tools li.print-preview a {
	background-image: url(../Images/UI/icn_print_pop.gif);
	}


/*------------------------------------------
	Newsletter Signup Panel (footer)
--------------------------------------------*/

#footerNewsletterSignup #panel-container #panel-content .formblock {
	width: 100%;
	}
#footerNewsletterSignup #panel-container #panel-content .formblock table {
	width: 410px;
	margin: 0 auto;
	}
#footerNewsletterSignup .formblock table td.left-label {
	width: 105px;
	text-align: right;
	}
#footerNewsletterSignup .formblock table td.radio {
	width: 30px;
	text-align: right;
	}
#footerNewsletterSignup .formblock table td.label2	{ width: 70px; texte-laign: left; }
#footerNewsletterSignup .formblock table td.label3	{ width: 175px; texte-laign: left; }

#footerNewsletterSignup .formblock table td.buttons { 
	padding-top: 8px;
	text-align: center;
	}


/*------------------------------------------
	Get direction Panel - starting address
--------------------------------------------*/
#main-content #GetOriginPanel.control .panel-form .formblock table {
	width: 400px;
	}
#main-content #GetOriginPanel.control .panel-form .formblock table td {
	width: 60%;
	}
#main-content #GetOriginPanel.control .panel-form .formblock table td.left-label {
	width: 40%;
	}
#main-content #GetOriginPanel.control .panel-form .formblock table td input {
	width: 220px;
	}
#main-content #GetOriginPanel.control .panel-form .formblock table td input.radio {
	width: auto;
	}

/*------------------------------------------
	Get Directions Page [1.4.1]
--------------------------------------------*/

#panel-header {
	height: 18px;
	padding: 5px 14px 5px 18px;
	border-bottom:1px solid #FFF;
	background: black url(../Images/UI/logo_popup.gif) no-repeat 18px center;
	}
#panel-header img,
#panel-footer {
	display:none;
	}

#panel-container.wide {
	background: #c0c0c0 url(../Images/UI/background-panel-wide.gif) no-repeat top left;
	}
#panel-container.wide #panel-content #panel-form {
	width: 732px;
	height: 468px;
	padding: 0 0 0 16px;
	background: #f0f0f0 url(../Images/UI/background-panel-content-wide.gif) no-repeat top left;
	}

#panel-container #from-destination {
	float: left;
	width: 468px; 
	margin: 16px 0 1em 0;
	}
	
	#panel-container #from-destination h3 {
		font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		font-size: 100%;
		font-weight: bold;
		color: #000;
		}
	#panel-container #from-destination dl {
		font-size: 100%;
		color: #000;
		}
	#panel-container #from-destination dl dt {
		font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		font-size: 114%;
		}

#panel-container #from-destination #from {
	float: left;
 	width: 184px;
	margin-bottom: 18px;
	padding: 0 16px 0 0;
	background: url(../Images/UI/line_vertical-from_destination.gif) no-repeat right center;
	}

#panel-container #from-destination #destination {
	float: left;
 	width: 209px;
	margin-bottom: 18px;
	padding: 0 0 0 16px;
	}
#panel-container #media.map #dacor-map {
	float: left;
	clear: left;
	width: 400px;
	height: 280px;
	margin: 0 0 16px 0;
	border: 1px solid #c0c0c0;
	}
#panel-container.wide #panel-secondary {
	float: right;
 	width: 220px;
	height: 420px;
	padding: 16px 16px 32px 8px;
	overflow: auto;
	color: #000;
	background: url(../Images/UI/line_vertical-directions.gif) no-repeat left 40px;
	}
#panel-container.wide #panel-secondary h3 {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	}

#panel-content.get-directions #panel-secondary div.hr {
	width: auto;
	height: 3px;
	margin: 9px 0 0 0;
	padding: 0 0 9px 0;
	line-height: 0;
	font-size: 1px;
	background: none;
	border-top:1px solid #C0C0C0;
	}
#panel-content.get-directions #GetDirectionsError {
	padding: 16px 16px 16px 0;
	}


/*------------------------------------------
	Browse our collections
--------------------------------------------*/

#browse-collections {
	float: left;
	background: url(../Images/UI/background_wide-list-liner.gif) no-repeat 0 bottom;
	padding: 2em 0 1.5em 0;
	}
#browse-collections dl {
	float: left;
	margin: 1.5em 40px 0 0;
	}
#browse-collections dl.image dt {
	height: 32px;
	margin: auto 0;
	}

	/* event behaviour */
	#browse-collections dl.image dd.image {
		width: 129px;
		height: 102px;
		margin: 0 auto;
		background: none;
		}
	#browse-collections dl.image dd.focused {
		background: url(../Images/UI/bg_list_img_hover.gif) no-repeat;
		}
	#list dl.image dd.blurred {
		background: none;
		}

#browse-collections dl.image dd.image div {
	float: left;
	width: 121px;
	height: 94px;
	padding: 4px 0 0 0;
	margin: 0 4px 4px 4px;
	overflow: hidden;
	}


/*------------------------------------------
	Add to Wish List - Confirmation Panel
--------------------------------------------*/

#addToWishList .panel-container .panel-content dl.image {
	margin: 0;
	padding: 0;
	}
#addToWishList dl.image dt {
	float: right;
	width: 280px;
	text-align: left;
	color: black;
	}
#addToWishList dl.image dd {
	float: right;
	width: 280px;
	text-align: left;
	}
#addToWishList dl.image dd.image {
	float: left;
	clear: left;
	width: 121px;
	}

#addToWishList .panel-container .panel-content dd p {
	margin: 0;
	padding: 0;
	color: black;
	}

#addToWishList .panel-container .panel-content dd p.link {
	margin-top: 12px;
	}
#addToWishList .panel-container .panel-content dd p.link a.button {
	color: black !important;
	}
/*
#addToWishList.control .panel-container .panel-content dd .related-links {
	float: left;
	margin: 0;
	padding: 0;
	text-align: left;
	background: none;
	}
#addToWishList.control .panel-container .panel-content .related-links ul,
#addToWishList.control .panel-container .panel-content .related-links ul li {
	text-align: left;
	margin: 0;
	padding: 0;
	background: none;
	}
#addToWishList.control .panel-container .panel-content .related-links ul li a.button {
	color: black !important;
	}
*/

/*-----------------------------------
	Send to a friend Panel
------------------------------------- */

#sendToAFriend.control {
	visibility: hidden;
}
#sendToAFriend.control .bd iframe#stf-iframe {
	width: 484px; 
	height: 390px;
	}