@charset "UTF-8";
/* CSS Document */


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

body{
	font-family:Arial, Helvetica, sans-serif !important;
	background:#333;
}
a{
	outline:none;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif !important;	
}

p{
	color:#1e1e1e;
}
ul{
	list-style:none;	
}
h1{
    font-family: 'PT Sans',Arial,Helvetica,sans-serif !important;
    font-size: 35px;
    text-decoration: none;
	letter-spacing:0px;
	font-weight:normal;
	color:#fff;
}
h2{
	font-size:28px;
	color:#1e1e1e;	
}
h3{
	font-size:12px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
#exp_container {margin-left: -1px;}
}
#exp_container{
	width:1006px;
	height:596px;
	background:#002020;
	position:relative;
	
}
#exp_main{
	background:#fff; 
	height:506px; 
	margin-bottom:15px;
}
#sect-1, #sect-2, #sect-3 {
    background: none repeat scroll 0 0 #FFFFFF;
    display: none;
    height: 490px;
    padding: 16px 6px 0 16px;
    position: relative;
    width: 984px;
}
#forPhoto{
	float:left;	
}
#forPhoto-b{
	float:left;	
}
#forPhoto-c{
	float:left;	
}
#bottom{
	position:relative;
	width:1006px;
	height:125px;
	margin-top:15px;
	float:left;
	z-index:40;
}
#imgVids{
	width:598px;
	height:104px;
	background:#EBEBEB;
	float:left;
	border-top:solid 2px #9A9CAA;	
}
#roomcolors{
	height:104px;
	width:371px;
	float:left;	
	margin-left:11px;
	border-top:solid 2px #9A9CAA;
	background:#EBEBEB;
}
.desc{
	width:361px;
	height:347px;
	float:left;
	margin-left:11px;
	padding:0px 5px 5px 5px;
}
.desc p{
	font-size:14px;	
	margin-bottom:15px;
	color:#666;
	font-family:Arial, Helvetica, sans-serif !important;
}
.desc a{
	color:#61748F !important;
	font-weight:bold !important;
	font-family:Arial, Helvetica, sans-serif !important;
}
.desc a:hover{
	color:#333 !important;
}
.desc a:visited{
	color:#61748F !important;
}
.txtlink{
	font-weight:bold;
	margin-bottom:20px;
	position:relative;
	clear:both;
	float:left;
}
.txtlink:hover{
	color:#333;
}
.txtlink:visited{
	color:#61748F;
}
.container-a{
	position:relative;
	float:left;	
	width:597px;
	height:104px;
	z-index:50;
	
}
.container-b{
	position:relative;
	float:left;	
	width:371px;
	height:104px;
	z-index:50;
	
}
#swatches{
	position:relative;
	margin-left:10px;
	margin-top:9px;
	width:352px;
	height:86px;
}
.tipswitch{
	position:relative;
	width:70px;
	height:86px;
	float:left;	
	display:block;
	overflow:hidden;
}
.tipswitch-sm{
	position:relative;
	width:50px;
	height:86px;
	float:left;	
	display:block;
	overflow:hidden;	
}
.item{
	margin:9px 6px 11px 6px;
	float:left;	
	position:relative;
	z-index:200;
	overflow:hidden;
}
#vidbtn{
	width:343px;
	height:50px;
	background-image:url(http://media.benjaminmoore.com/WebServices/prod/DecorativeColor/images/watchVideo.png);
	background-repeat:no-repeat;
	background-position:0 0;
	display:block;
	margin-top:10px;
	float:left;
}
#vidbtnFR{
	width:343px;
	height:50px;
	background-image:url(http://media.benjaminmoore.com/WebServices/prod/DecorativeColor/images/watchVideoFR.png);
	background-repeat:no-repeat;
	background-position:0 0;
	display:block;
	margin-top:10px;
	float:left;
}
#vidbtn:hover{
	background-position:0 -50px;	
}
#vidbtnFR:hover{
	background-position:0 -50px;	
}
.vidbtn-one{
	
}

.vidbtn-two{
	
}

.vidbtn-three{
	
}

#left_col{
	width:988px;
	height:49px;
	background:#8D90A1;
	padding-top:28px;
	padding-left:18px;
	position:relative;
	background:#8D90A1;
}
#left_nav{
	width:988px;
	height:49px;
	float:left;
	list-style:none;
	/*	width:988px;
	height:49px;*/

	position:relative
}
#left_nav li{
	height:90px;
	min-width:150px;
	float:left;
}
#left_nav li a{
	color:#fff;
}

#link-sect-0 {
    font-family: 'PT Sans',Arial,Helvetica,sans-serif !important;
    font-size: 35px;
    font-weight: normal;
    letter-spacing: 0;
    margin-right: 85px;
    text-decoration: none;
}
#link-sect-1 {
    background-image: url("http://media.benjaminmoore.com/WebServices/prod/DecorativeColor/images/button_hover.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    font-size: 15px;
    height: 28px;
    padding-top: 8px;
    position: relative;
    text-align: center;
    top: 10px;
    width: 150px;
}
#link-sect-2 {
    background-image: url("http://media.benjaminmoore.com/WebServices/prod/DecorativeColor/images/button_hover.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    font-size: 15px;
    height: 28px;
    padding-top: 8px;
    position: relative;
    text-align: center;
    top: 10px;
    width: 150px;
}
#link-sect-3 {
    background-image: url("http://media.benjaminmoore.com/WebServices/prod/DecorativeColor/images/button_hover.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    font-size: 14px;
    height: 26px;
    line-height: 14px;
    padding-top: 10px;
    position: relative;
    text-align: center;
    top: 10px;
    width: 150px;
}
#link-sect-1:hover{
	background-position:0 -36px;
}
#link-sect-2:hover{
	background-position:0 -36px;
}
#link-sect-3:hover{
	background-position:0 -36px;
}
.colorname{
	font-style:italic
}
.tooltip {
	display:none;
    background:url(http://media.benjaminmoore.com/WebServices/prod/DecorativeColor/images/tool.png) no-repeat top left;
    color: #fff;
    font-size: 14px;
	height:89px;
	width:146px;
	padding: 10px 30px 10px 10px;
	position:relative;
	left:0px;
	top:0px;
	font-weight:normal;
	text-align:left;
	z-index:300;
}
.tooltip p{
	color:#fff;	
	margin-bottom:14px;
	font-size:11px;
}
.tooltip a{
	color:#ccc;	
	text-decoration:underline;
}
.tooltip a:hover{
	color:#fff;	
}
#lg{
	height:150px;
	position:relative;
	top:-40px;
	background:url(http://media.benjaminmoore.com/WebServices/prod/DecorativeColor/images/tool_lg.png) no-repeat top left;
}
.landing_copy{
	background:url(http://media.benjaminmoore.com/WebServices/prod/DecorativeColor/images/landing_text.png) no-repeat top left;
	width:303px;
	height:338px;
	padding: 15px 24px 15px 17px;
	display:block;
	font-family: 'PT Sans',Arial,Helvetica,sans-serif !important;
/*	opacity: 0;
	filter: alpha(opacity=00);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";*/
}
.landing_copy h2{
	color:#fff;
	margin-bottom:10px;
	font-size:32px;
	font-family:'PT Sans',Arial,Helvetica,sans-serif !important;
}
.landing_copy p{
	color:#fff;
	font-family: 'PT Sans',Arial,Helvetica,sans-serif !important;
	font-size:22px;
	margin-bottom:5px;
}
.landing_copy a{
	font-family: 'PT Sans',Arial,Helvetica,sans-serif !important;
	float:right;
	margin-right:15px;
	top:25px;
	position:relative;
}
.landing_copy_fr{
	background:url(http://media.benjaminmoore.com/WebServices/prod/DecorativeColor/images/landing_text.png) no-repeat top left;
	width:303px;
	height:338px;
	padding: 15px 24px 15px 17px;
	display:block;
	font-family: 'PT Sans',Arial,Helvetica,sans-serif !important;
/*	opacity: 0;
	filter: alpha(opacity=00);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";*/
}
.landing_copy_fr h2{
	color:#fff;
	margin-bottom:10px;
	font-size:28px;
	font-family: 'PT Sans',Arial,Helvetica,sans-serif !important;
}
.landing_copy_fr p{
	color:#fff;
	font-size:18px;
	margin-bottom:5px;
	font-family: 'PT Sans',Arial,Helvetica,sans-serif !important;
}
.landing_copy_fr a{
	font-family: 'PT Sans',Arial,Helvetica,sans-serif !important;
	float:right;
	margin-right:15px;
	top:35px;
	position:relative;
}
#copy-one{
	position:relative;
	left:650px;
	top:100px;
	color:#fff;

}
#copy-two{
	position:relative;
	left:25px;
	top:50px;
	color:#fff;

}
#copy-three{
	position:relative;
	left:650px;
	top:25px;
	color:#fff;
}








/* root element for tabs  */
ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;	
	border-bottom:1px solid #666;	
	height:30px;
}

/* single tab */
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	background: url(/tools/img/tabs/blue.png) no-repeat -420px 0;
	font-size:11px;
	display:block;
	height: 30px;  
	line-height:30px;
	width: 134px;
	text-align:center;	
	text-decoration:none;
	color:#333;
	padding:0px;
	margin:0px;	
	position:relative;
	top:1px;
}

ul.tabs a:active {
	outline:none;		
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	background-position: -420px -31px;	
	color:#fff;	
}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-position: -420px -62px;		
	cursor:default !important; 
	color:#000 !important;
}

/* Different widths for tabs: use a class name: s, l, xl */


/* width 1 */
ul.tabs a.s 			{ background-position: -553px 0; width:81px; }
ul.tabs a.s:hover 	{ background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l 			{ background-position: -247px -0px; width:174px; }
ul.tabs a.l:hover 	{ background-position: -247px -31px; }
ul.tabs a.l.current  { background-position: -247px -62px; }


/* width 3 */
ul.tabs a.xl 			{ background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover 	{ background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }


/* initially all panes are hidden */ 
.panes .pane {
	display:none;		
}

.panes div {
	display:none;		
	padding:15px 10px;
	
	height:100px;
	font-size:14px;
	background-color:#fff;
}





/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 1006px;
	height:516px;
	

}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.items div {
	float:left;
	width:1006px;
	height:541px;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:20px 5px 20px 21px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	width:100px;
	height:75px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}






/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
/*a.browse {
	background:url(../img/scrollable/arrow/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}*/

/* right */
/*a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } */


/* left */
/*a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }*/

/*a.up, a.down		{ 
	background:url(../img/scrollable/arrow/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}*/

/* up 
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

 down 
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


 disabled navigational button 
a.disabled {
	visibility:hidden !important;		
} */	




/* position and dimensions of the navigator */
.navi {
	position:relative;
	width:100px;
	height:20px;
	float:right;
	top:480px;
	
}


/* items inside navigator */
.navi a {
	width:16px;
	height:16px;
	float:left;
	margin:3px;
	background:#cccccc 0 0 no-repeat;
	display:block;
	font-size:1px;
	z-index:300;
	position:relative;
	border:solid 1px #666;
	cursor:pointer;
}

/* mouseover state */
.navi a:hover {
/*	background:#333 0 0 no-repeat;      
*/}

/* active state (current page state) */
.navi a.active {
	background:#666 0 0 no-repeat;   
	border:solid 1px #ccc; 
}