/* Find a Color
---------------------------------*/
#homeowner-color #callout {
	background: url('/images/callouts/homeowner-find-a-color.jpg') no-repeat 0 0;
	min-height: 435px;
	padding: 20px 10px 0px 274px;
	width: 289px;
	position: relative;
}

* html #homeowner-color #callout {
  height: auto !important;
  height: 435px;
}

.feature {
	position: absolute;
	bottom: 42px;
	border: 9px solid #fff;
	width: 217px;
	min-height: 161px;
	padding: 10px;
	background: -webkit-gradient(radial, 80% 0%, 273, 80% 0%, 45, from(#5C2C02), to(#c89754));
	background: -moz-radial-gradient(80% 0% 45deg, circle, #c89754 25%, #5C2C02 100%);
	background-color: #BC7E39;
}

* html .feature {
  height: auto !important;
  height: 174px;
	bottom: 25px;
}

*+html .feature {
	bottom: 25px;
}

.feature h3 {
	font-size: 19px;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 10px;
	text-shadow: rgba(0,0,0,0.25) 1px 1px 7px;
}

.feature ul {
	margin-left: 5px !important;
	padding-bottom: 0 !important;
}

.feature li {
	text-shadow: rgba(0,0,0,0.25) 1px 1px 7px;
	background: url('/images/bullets/arrow-white-tight.gif') no-repeat 0 0.5em !important;
	padding: 0 0 0 12px !important;
	font-family: Verdana, sans-serif !important;
	line-height: 1.2em !important;
	margin-bottom: 5px !important;
}

.feature ul li:last-child {
	margin-bottom: 0 !important;
}

.feature.first {
	left: 30px;
}

.feature.second {
	left: 293px;
	background: -webkit-gradient(radial, 20% 0%, 273, 20% 0%, 45, from(#5C2C02), to(#c89754));
	background: -moz-radial-gradient(20% 0% 45deg, circle, #c89754 25%, #5C2C02 100%);
}

.button {
	padding: 7px 27px 7px 11px;
	color: #fff;
	text-transform: uppercase;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background: url('/images/bullets/arrow-white.png') no-repeat 95% 50%; /* Fallback for IE */
	background: url('/images/bullets/arrow-white.png') no-repeat 95% 50%, -webkit-gradient(linear, left top, left bottom, from(#F8BD28), to(#CB6716)) repeat-x top left;
	background: url('/images/bullets/arrow-white.png') no-repeat 95% 50%, -moz-linear-gradient(90deg, #CB6716, #F8BD28);
	background-color: #E1901F;
}

* html .button {
	background-image: url('/images/bullets/arrow-white-ie6.gif');
}


body.tertiary #callout h1 {
	color: #fdd461;
	font-size: 29px;
	line-height: 29px;
	-webkit-font-smoothing: antialiased;
}

body.tertiary #callout h2 {
	text-transform: none;
	font-weight: normal;
	font-size: 15px;
	margin-bottom: 20px;
	-webkit-font-smoothing: antialiased;
}

#callout h3 {
	-webkit-font-smoothing: antialiased;
}

.photo-frame {
	position: absolute;
	bottom: 0;
	left: 1px;
	border: 0;
}

.iphone-and-blackberry {
	position: absolute;
	bottom: 4px;
	right: 3px;
	border: 0;
}


/* Alt theme #1
---------------------------------*/
.alt-1#homeowner-color h1 {
	color: #ffe0be;
}

.alt-1#homeowner-color #callout {
	background-image: url('/images/callouts/homeowner-find-a-color-alt-1.jpg');
	padding: 36px 30px 0px 274px;
	width: 269px;
	min-height: 464px;
}

body.alt-1 #callout h2 {
	margin-bottom: 20px !important;
}

* html .alt-1#homeowner-color #callout {
  height: 480px;
}

.alt-1#homeowner-color .feature {
	bottom: 49px !important;
	background: -webkit-gradient(radial, 80% 0%, 273, 80% 0%, 45, from(#17133E), to(#9A97B6));
	background: -moz-radial-gradient(80% 0% 45deg, circle, #9A97B6 25%, #17133E 100%);
	background-color: #555387;
}

.alt-1#homeowner-color .feature.first {
	left: 27px;
}

.alt-1#homeowner-color .feature.second {
	left: 290px;
	background: -webkit-gradient(radial, 20% 0%, 273, 20% 0%, 45, from(#17133E), to(#9A97B6));
	background: -moz-radial-gradient(20% 0% 45deg, circle, #9A97B6 25%, #17133E 100%);
}

.alt-1#homeowner-color .photo-frame {
	left: -1px;
}

.alt-1#homeowner-color .feature h3 {
	color: #ffe0be;
}

* html .alt-1#homeowner-color .feature {
	bottom: 25px;
}

*+html .alt-1#homeowner-color .feature {
	bottom: 25px;
}


/* Colormix 2011
---------------------------------*/
#pro-color #callout {
	background: url('/images/callouts/pro-colormix-2012.jpg') no-repeat 0 0;
	min-height: 435px;
	padding: 20px 10px 0px 308px;
	width: 255px;
	position: relative;
}

* html .tertiary#pro-color #callout {
  height: auto !important;
  height: 435px;
}

#pro-color .feature {
	bottom: 41px !important;
	background: -webkit-gradient(radial, 80% 0%, 273, 80% 0%, 45, from(#28373E), to(#9EAEB5));
	background: -moz-radial-gradient(80% 0% 45deg, circle, #9EAEB5 25%, #28373E 100%);
	background-color: #4e6c7c;
	min-height: 158px;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#pro-color .feature em {
	color: #f9af15;
	font-style: normal;
}

#pro-color .feature.first {
	left: 25px;
}

#pro-color .feature.second {
	left: 290px;
	background: -webkit-gradient(radial, 20% 0%, 273, 20% 0%, 45, from(#28373E), to(#9EAEB5));
	background: -moz-radial-gradient(20% 0% 45deg, circle, #9EAEB5 25%, #28373E 100%);
}

.blackberry {
	position: absolute;
	bottom: 0;
	left: 8px;
	border: 0;
}

#pro-color #callout h1 {
	color: #4e6c7c;
}

#pro-color #callout h2 {
	color: #555555;
}

#pro-color #callout h3 {
	color: #e3f3f9;
}


/* Find a color — Stain Colors
---------------------------------*/
#tabs h3 {
	color: 333333;
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 1em;
	-webkit-font-smoothing: antialiased;
}

.swatches {
	padding-bottom: 15px;
	margin-bottom: 15px;
	margin-top: 0;
	border-bottom: 1px solid #e6e6e6;
}

.swatches:last-child {
	border-bottom: 0;
}