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

div{width:auto;}
#colorStoriesWrapper{width:1006px;background-color:#fff;font-family: Arial, Helvetica, sans-serif;}
#colorStoriesWrapper p, #colorStoriesWrapper a{font-family: Arial, Helvetica, sans-serif;}
.colorStoryTitle{float:left;margin:10px 0 0 15px;}
#colorStoriesWrapper hr{background: url(http://media.benjaminmoore.com/WebServices/prod/ColorStories/images/hr_shadow.png) repeat scroll 0 0 transparent;border: 0 none;clear: both;color: #CCCCCC;height: 9px;margin: 0 15px 5px;}
#colorStoriesWrapper #csBody hr{position: relative; top: 14px;}
#csHeader{height:70px;}
#csColorGrid{background-color:#efefef;clear:both;min-height:195px;padding:25px 30px;}
#csBodyLeft{clear:both;min-height:220px;margin:10px 15px 0px;}
#csBodyLeft .bannerLeft{float:left;width:45%;display:inline;padding:10px 15px;}
#csBodyLeft .bannerRight{float:right;width:51%;display:inline;}
#csBodyLeft .bannerRight #bImg1{width:260px;height:175px;overflow:hidden;position:absolute;z-index:1;margin:5px 0 0;}
#csBodyLeft .bannerRight #bImg2{width:225px;height:175px;overflow:hidden;position:absolute;right:15px;z-index:0;margin:20px 0 0;}
#csBodyRight{width:1006px;clear:both;background-color:#efefef;}
#csBodyRightTop{width:1006px;height:381px;overflow:hidden;text-align:center;}
#closeDetails {color: #A9A9A9;font-size: 10px;font-weight: bold;padding: 15px 25px;position: absolute;right: 0;z-index: 1;display:block; cursor:pointer;}
#csBodyRightTop.detail{background-image:url(http://media.benjaminmoore.com/WebServices/prod/ColorStories/images/cs_story_bg_new.png);}
#csBodyRightBottom{width:755px;height:79px;overflow:hidden;background:#999;}
#csBodyRightColors{display:none;padding:11px 0 0 18px;}
#csHeaderRight{color:#b2b2b2;float:right;font-size:12px;font-style:italic;font-weight:700;position:relative;text-align:center;width:226px;margin:40px 15px 0 0;}
#csColorGrid ul{clear:both;list-style:none outside none;margin:0 auto;padding:0;}
#csColorGrid ul li{border:1px solid #FFF;cursor:pointer;float:left;width:90px;margin:1px;}
#csColorGrid ul li a{display:block;height:58px;}
#gridCalltoAction{float:right;clear:right;display:inline;position: relative;top: -10px;margin:0 8px;}
#gridCalltoAction span{background-color:#d4d4d4;padding:5px 10px;color:#969696;font-weight:bold;}
#gridCalltoAction #gridImg1{top:2px;position: relative;}
#gridCalltoAction #gridImg2{top:4px;position: relative;}
#csInspiration{clear:both;height:205px;width:500px;padding:15px 0 0;}
#csInspiration ul{clear:both;list-style:none outside none;margin:0 15px auto;padding:0;}
#csInspiration li{float: left;height: 175px;margin: 5px 2px;overflow: hidden;width: 90px;}
#csInspiration li img{height:170px;}
#csInspiration h3{margin:0 0 0 20px !important;padding:0;}
#csBody h3{color:#636363;font-size:12px;font-weight:700;letter-spacing:0;position:relative;text-transform:uppercase;top:-10px;display:inline;margin:0;padding:0;}
#csBody .spanDetails{color:#a6a6a6;font-size:11px;top:-10px;display:inline;position:relative;margin:0;padding:0;}

/* #csBodyLeft */
.h1Mini{font:normal 5px arial;color:#ebebeb;height:0;line-height:0;overflow:hidden;}
.csBodyLeft1{background:url(http://www.benjaminmoore.com/bm/colorstories/images/arrow_up.png) no-repeat scroll 21px 6px transparent;color:#999;font-size:13px;letter-spacing:1px;padding:12px 0 10px 34px;}
.csBodyLeft2{position:relative;top:-10px;}
.csBodyLeft3 p{font:normal 12px arial;line-height:18px;color:#b2b2b2;}
.csBodyLeft3 div{color:#666;font:11px/18px arial;padding:10px 0 0;}
.csBodyLeft4{margin:20px 0;}
.csBodyLeft4 #shopVolume{background: -webkit-linear-gradient(top, #868686, #535353);
background: -moz-linear-gradient(top, #868686, #535353);
background: -ms-linear-gradient(top, #868686, #535353);
background: linear-gradient(top, #868686, #535353);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#868686', endColorstr='#535353');
border:1px solid #cecece;padding:5px 18px;font-weight:700;background-color:#535353;}
.csBodyLeft4 a{font:normal 11px arial;color:#fcfcfc;float:left;text-decoration:none;text-transform:uppercase;}

/* #csBodyRight */
#csBodyRightColors{float:left;}
#csBodyRightImages{text-align:center;}
#csBodyRightThumbnails{float:right;}
#csBodyRightThumbnails a{float:left;padding:4px;}
#csBodyRightThumbnails a.selected{float:left;border:solid 4px #666;padding:0;}
#csBodyRightImages img{display:none;}
.csBodyRightColorDetail{display:none;overflow:hidden;}
.cdLeft,.cdRight{float:left;height:381px;width:68px;overflow:hidden;outline:none;}
.cdLeft a,.cdRight a{float:left;display:block;width:68px;height:381px;background-position:22px 169px;background-repeat:no-repeat;outline:none;}
.cdRight a{background-image:url(http://www.benjaminmoore.com/bm/colorstories/images/btn_next.png);float:right;position:absolute;right:0;}
.cdLeft a{background-image:url(http://www.benjaminmoore.com/bm/colorstories/images/btn_prev.png);}
.cdM1{float: left;height: 320px;margin: 30px 25px 0 90px;width: 320px;border:8px solid #FFF;
box-shadow:0 0 5px 5px #b5b5b5;
-webkit-box-shadow:0 0 5px #b5b5b5;
-moz-box-shadow:0 0 5px #b5b5b5;
filter:progid:DXImageTransform.Microsoft.Shadow(Color=#b5b5b5,Strength=3,Direction=0), 
progid:DXImageTransform.Microsoft.Shadow(Color=#b5b5b5,Strength=3,Direction=90), 
progid:DXImageTransform.Microsoft.Shadow(Color=#b5b5b5,Strength=3,Direction=180), 
progid:DXImageTransform.Microsoft.Shadow(Color=#b5b5b5,Strength=3,Direction=270)\9;}
.cdM2{float:left;height:323px;overflow:hidden;width:285px;padding:50px 30px 0;}
.colorCode{font:normal 14px arial;color:#a9a9a9;font-style:italic;}
.colorName{font:normal 24px arial;color:#7f7f7f;line-height:24px;font-style:italic;margin:0;padding:0;}
.colorText{font:normal 14px arial;color:#666;line-height:24px;}
.colorHref{margin-top:0;padding:10px 0;text-align:center;}
.viewCCombo{background-color: #D4D4D4;margin: 10px 4px 2px;padding: 6px 0;text-align: center;text-transform: uppercase;width: 275px;}
.viewCCombo a{color:#333333;font-size:10px;font-weight:bold;display: block;}
.cdM2 .colorHref a{background: -webkit-linear-gradient(top, #868686, #535353);
background: -moz-linear-gradient(top, #868686, #535353);
background: -ms-linear-gradient(top, #868686, #535353);
background: linear-gradient(top, #868686, #535353);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#868686', endColorstr='#535353');	
border:1px solid #cecece;
font-size: 10px;margin: 0 1px 0 0;padding:5px 37px;color:#FFF;background-color:#535353;}
		
/* Color Swatched within csBodyRightColors */
.csBodyRightSmTitle { font: normal 10px arial; color: #4c4c4c; margin-bottom: 9px; }
.inspColors { float:right; display: none; }
.csSwatch { height: 30px; width: 30px; border: solid 1px #b1b1b1; float: left; }
.cdSwatchText { float: left; padding: 0 35px 0 5px; }
.cdSwatchName { color: #303030; font: normal 12px arial; line-height: 12px; font-weight:bold; }
.cdSwatchNumber { color: #a9a9a9; font: normal 9px arial; line-height:8px; }

/* dropdown */
#colorStoriesDropdownButton{float:right;position:relative;line-height:0;}
.dropdownBeak{position:relative;top:3px;left:140px;}
#colorStoriesDropdown{margin-top:10px;}
#colorStoriesDropdown ul{list-style:none outside none;margin:0;padding:0 14px 0 15px;}
#colorStoriesDropdown li{float:left;font-size:12px;font-weight:700;width:120px;padding:0 2px 0 0;}
#colorStoriesDropdown li a{color:#989898;display:block;width:60px;letter-spacing:.25px;margin:8px 0 8px 5px;}
#colorStoriesDropdown li a.selected{color:#67686a;}

.dw0 { background: #fff; }
.dw1 { background: #b9b6b0; }
.dw2 { background: #b6a699; }
.dw3 { background: #c39e83; }
.dw4 { background: #737995; }
.dw5 { background: #a2c2c9; }
.dw6 { background: #c7bd79; }
.dw7 { background: #dec385; }
.dw8 { background: #dc7e45; }
.dw9 { background: #e1dfd5; }

.copyDw0 { color: #ffffff; font-family: "PT Sans","Arial",sans-serif; font-size: 28px; font-weight: normal; margin: 0; padding: 0; text-transform:uppercase; letter-spacing: 1px;}
.copyDw1 { color: #b9b6b0; font-family: "PT Sans","Arial",sans-serif; font-size: 28px; font-weight: normal; margin: 0; padding: 0; text-transform:uppercase; letter-spacing: 1px;}
.copyDw2 { color: #b6a699; font-family: "PT Sans","Arial",sans-serif; font-size: 28px; font-weight: normal; margin: 0; padding: 0; text-transform:uppercase; letter-spacing: 1px;}
.copyDw3 { color: #c39e83; font-family: "PT Sans","Arial",sans-serif; font-size: 28px; font-weight: normal; margin: 0; padding: 0; text-transform:uppercase; letter-spacing: 1px;}
.copyDw4 { color: #737995; font-family: "PT Sans","Arial",sans-serif; font-size: 28px; font-weight: normal; margin: 0; padding: 0; text-transform:uppercase; letter-spacing: 1px;}
.copyDw5 { color: #a2c2c9; font-family: "PT Sans","Arial",sans-serif; font-size: 28px; font-weight: normal; margin: 0; padding: 0; text-transform:uppercase; letter-spacing: 1px;}
.copyDw6 { color: #c7bd79; font-family: "PT Sans","Arial",sans-serif; font-size: 28px; font-weight: normal; margin: 0; padding: 0; text-transform:uppercase; letter-spacing: 1px;}
.copyDw7 { color: #dec385; font-family: "PT Sans","Arial",sans-serif; font-size: 28px; font-weight: normal; margin: 0; padding: 0; text-transform:uppercase; letter-spacing: 1px;}
.copyDw8 { color: #dc7e45; font-family: "PT Sans","Arial",sans-serif; font-size: 28px; font-weight: normal; margin: 0; padding: 0; text-transform:uppercase; letter-spacing: 1px;}
.copyDw9 { color: #e1dfd5; font-family: "PT Sans","Arial",sans-serif; font-size: 28px; font-weight: normal; margin: 0; padding: 0; text-transform:uppercase; letter-spacing: 1px;}

/* social group */
#landing .socialbr, #csBodyRightTop .socialbr{color:#CCC;background-color:#CCC;height:1px;margin:5px 0 0px 0 !important;border:0; position:inherit !important;}
.csBodyLeft4 #socialgroup {float:left; padding:3px 10px;}
#socialgroup {float:left; padding:8px 0px;}
#socialgroup p{padding:0 0 8px;font: 11px arial;color: #666;}
#socialgroup .socialrtGP {display: inline;float: left;width: 110px;}
#socialgroup .sociallfFB {display: inline;float: left;width: 100px;}

.freestyle #colorstories{margin-top:0;height:100%;}
.maincontainer{width:auto;margin:14px -1px 0;}

@-moz-document url-prefix() {
  .maincontainer {
		margin: 14px 0 0 !important; /* Update this Style */
		width: auto;
	}
}

.fancybox-bg{background:none!important;}
#fancybox-outer{box-shadow:0 0 5px 2px #5f5f5f;-webkit-box-shadow:0 0 5px 2px #5f5f5f;-moz-box-shadow:0 0 5px 2px #5f5f5f;}
#fancybox-close{background:url(http://media.benjaminmoore.com/WebServices/prod/js/fancybox/fancy_close.png) no-repeat scroll right center transparent!important;color:#FFF;cursor:pointer;display:none;font:bold 12px arial;height:14px!important;margin-right:5px!important;padding-right:18px!important;position:absolute;right:-4px!important;top:-18px!important;z-index:1103!important;}
.fancybox-title-inside{text-align:left!important;}
#fancybox-left-ico{background-image:url(http://media.benjaminmoore.com/WebServices/prod/ColorStories/images/leftArrow.png)!important;background-position:0 0!important;}
#fancybox-left:hover span{left:10px!important;}
#fancybox-right-ico{background-image:url(http://media.benjaminmoore.com/WebServices/prod/ColorStories/images/rightArrow.png)!important;background-position:0 0!important;right:10px!important;}
#fancybox-left-ico,#fancybox-right-ico{height:64px!important;width:47px!important;top:40%!important;}

#leftTitle{color:#DC7E45;font-family:"PT Sans",Arial,sans-serif;font-size:28px;font-weight:400;float:left;width:150px;min-height:80px;margin:0;padding:0 5px;text-transform:uppercase;}
#leftTitle span{color:#5F5F5F;font-family:Arial, Helvetica, sans-serif;font-size:11px;font-weight:400;position:relative;top:-10px;margin:0;padding:0;}
#rightTitle{float:right;margin:0;padding:0 5px;}
#rightTitle a{float:left;padding:4px 3px;background:url(http://media.benjaminmoore.com/WebServices/prod/ColorStories/images/lightbox_abg.png) no-repeat;}
#rightTitle p{color:#5F5F5F;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:700;width:175px;margin:0;padding:0 0 10px;}

#landing #socialgroup .sociallfFB{display:inline;float:left;width:50%;padding:3px 0 0;}
#landing #socialgroup .leftgp{right:10px;width:40%;}
#landing #socialgroup .socialrtGP{display:inline;float:right;position:relative;right:0px;padding:3px 0 0;}
#colorGallery{color:#999;}
#colorGallery img{padding-right:5px;position:relative;top:5px;}
#landing .socialbr{margin:8px 0 0!important;}