/* Selectors */

body { margin: 0; font-family: verdana, arial, helvetica, sans-serif; line-height: 20px; background: url("../images/bg_jacks.jpg") top center repeat-y #e7e7e7; }

h1, h2, h3, h4, h5, h6, p, ul, ol, img { margin: 0 0 20px 0; padding: 0; }

h1, h2, h3, h4, h5, h6 { font-family: myriad pro, arial, helvetica; }
h2 { padding: 20px 0 0 15px; margin: 0; font-size: 30px;}
h4 { font-size: 15px; color: #666666; letter-spacing: 1px;}

p, ul, ol, select { font-size: 11px; color: #000; }

ul, ol { padding: 0 0 0 15px; }

input, select, textarea { font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; color: #000; line-height: 20px; }
select, input { width: 150px; height: 20px; padding: 1px; border: none; background: url("../images/field.gif") left top no-repeat; }
option { padding: 0 0 4px 0; }

a { padding: 0 0 1px 0; color: #dc241f; text-decoration: none; } /* BEWARE THAT ALL NORMAL ANCHOR LINKS HAVE 1 PIXEL BOTTOM PADDING UNLESS RESET */
a img { border: none; }

#container { width: 960px; margin: 0 auto; font-size: 11px; color: #000; }

/* Header */

#header { width: 960px; height: 100px; margin: 0 auto 20px auto; }
#header h1 { float: left; width: 210px; height: 100px; margin: 0 0 0 15px; padding: 0; text-indent: -9999px; overflow: hidden; }
#header h1 a { display: block; width: 100%; height: 100%; background: url("../images/logo_jacks_03.jpg") left top no-repeat #fff; }

/* 210 - 135 - 15 margin = 75 */

#nav { float: left; width: 735px; height: 17px; margin: 10px 0 0 0; padding: 0; list-style: none; }
#nav li { display: inline; }
#nav li a { float: right; display: block; height: 60px; margin: 0 0 0 10px; padding: 0; font-size: 16px; color: #333; text-decoration: none; text-indent: -9999px; overflow: hidden; display: inline; }
#nav li a:hover, #nav li#home a:hover, #nav li a#on, #nav li#home a#on { background-position: left -60px; border: none; }

#nav li#home a { margin: 0 0 0 42px; width: 66px; height: 60px; background: url("../images/btn_home.gif") left top no-repeat; }
#promotions a { width: 108px; background: url("../images/btn_promotions.gif") left top no-repeat #fff; }
#paint a { width: 60px; background: url("../images/btn_paint.gif") left top no-repeat #fff; }
#hardware a { width: 95px; background: url("../images/btn_hardware.gif") left top no-repeat #fff; }
#diy a { width: 104px; background: url("../images/btn_diy.gif") left top no-repeat #fff; }
#contractors a { width: 111px; background: url("../images/btn_contractors.gif") left top no-repeat #fff; }
#news a { width: 61px; background: url("../images/btn_news.gif") left top no-repeat #fff; }
#blog a { width: 54px; background: url("../images/btn_blog.gif") left top no-repeat #fff; }
#contact a { width: 81px; background: url("../images/btn_contact.gif") left top no-repeat #fff; }

#subnav {
	float:right; 
	width: 240px; 
	background:#FDE101; 
	height: 28px;
	-moz-border-radius-bottomleft: 8px;
	-moz-border-radius-bottomright: 8px;
	-khtml-border-radius: 8px;
	-webkit-border-top-left-radius: 0;
	-webkit-border-top-right-radius: 0;
	-webkit-border-bottom-left-radius: 8px;
	-webkit-border-bottom-right-radius: 8p;}
#subnav li { display: inline; }
#subnav li a { float: left; display: block; height: 22px; margin: 0 6px 0 6px; padding: 4px 6px; font-size: 12px; text-transform:uppercase; color: #333; text-decoration: none; display: inline; }
#subnav li a:hover { background:#DB251A; color:#FFFFFF }

#paintnav {float: right; margin: 5px 48px 0 0; background:#FDE101; width: 200px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
#paintnav li { display:list-item; list-style:none; }
#paintnav li a { float: left; display: block; height: 22px; margin: 0 6px 0 6px; padding: 4px 6px; font-size: 12px; text-transform:uppercase; color: #333; text-decoration: none; text-align:left; }
#paintnav li a:hover { background:#DB251A; color:#FFFFFF; border-bottom:none!important; }

/* Layout structure */

#feature_tabs { width: 755px; height: 320px; float:left; margin: 0; }
#feature h3 { padding: 80px 0 0 0; }
#feature { width: 100%; height: 300px; margin: 0 auto; text-align: center; }
#feature_paint {width: 964px; height: 300px; margin: 0 auto; background:url(../images/feature_paint.jpg) no-repeat top left;}
#feature_contractors {width: 964px; height: 300px; margin: 0 auto; background:url(../images/feature_contractors.jpg) no-repeat top left;}
#promo { width: 205px; height: 320px; float:left; }

#content, #quicklinks { clear: both; width: 960px; margin: 0 auto; font-size: 11px; color: #000; }
#content.feature_shadow, #quicklinks { background: url("../images/bg_feature_shadow.jpg") left top no-repeat; }
#content.feature_shadow_no_divide { background: url("../images/bg_feature_shadow_no_divide.jpg") left top no-repeat; }
#content.feature_shadow_sidebar { background: url("../images/bg_feature_shadow_sidebar.jpg") left top no-repeat; }
#content.feature_shadow_paint_full { background: url("../images/bg_feature_shadow_paint_full_width.jpg") left top no-repeat; }
#content.feature_shadow_paint { background: url("../images/bg_feature_shadow_paint.jpg") left top no-repeat; }

#content.feature_shadow_hardware { background: url("../images/bg_feature_shadow_hardware.jpg") left top no-repeat; }

#content h3 { font-size: 18px; color: #da251c; }

.column { float: left; width: 240px; }
.column.span_2 { width: 480px; }
.column.span_3 { width: 720px; }
.column.span_4 { width: 960px; }
.column .wrapper { padding: 20px 15px 20px 15px; }

#application_form_wrapper { padding: 15px; background: url("../images/bg_appform.gif") left top no-repeat; }
#application_form  ul { list-style: none; padding: 0; }
#application_form ul li { margin: 0 0 20px 0; }
#application_form input { width: auto; vertical-align: middle; border: none; background: none; }

.tbl_contact td { padding: 0 0 20px 0; vertical-align: top; letter-spacing: -0.5px; }
.tbl_contact label { float: left; width: 60px; display: block; }
.tbl_contact input { float: left; }
.tbl_contact textarea { float: left; width: 374px; border: solid 1px #ccc; }
.tbl_contact .button { float: none; width: 70px; height: 25px; font-weight: bold; font-size: 12px; background: url("../images/btn_rounded.gif") left top no-repeat #ccc; }
.tbl_contact .button:hover { cursor: pointer; }

a.button { display: block; width: 95px; height: 25px; padding: 0; font-weight: bold; font-size: 12px; color: #666; line-height: 25px; text-align: center; background: url("../images/btn_rounded_large.gif") left top no-repeat #ccc; }
a.button:hover { border: none; cursor: pointer; }

input.button { float: none; width: 70px; height: 25px; font-weight: bold; font-size: 12px; padding-bottom: 2px; background: url("../images/btn_rounded.gif") left top no-repeat #ccc; }
input.button:hover { cursor: pointer; }

#search_archive input.button { width: 40px; background: url("../images/btn_rounded_small.gif"); }

.table_calc { margin: 80px 0 0 65px; }
.table_calc input.button {  width: 95px; height: 25px; background: url("../images/btn_rounded_large.gif") left top no-repeat #ccc; }

#quicklinks h3 { color: #333; }

#branches { background: url("../images/home_branches.jpg") 255px bottom no-repeat; }
#branches table td { height: 40px; vertical-align: top; }
#branches .button { width: auto; height: 20px; margin: 0; padding: 0 20px 0 0; font-weight: bold; color: #000; border: none; background: url("../images/btn_arrow.gif") right no-repeat; }
#branches .button:hover { cursor: pointer; }
#franchises .button { display: inline; width: auto; height: 20px; margin: 0; padding: 0 20px 0 0; font-weight: bold; color: #000; border: none; background: url("../images/btn_arrow.gif") right no-repeat; }
#franchises .button:hover { cursor: pointer; }

#contractors {background:url(../images/quicklink_contractors.png) top left no-repeat;}
#contractors h4 {padding-left: 150px}
#contractors p {padding-left: 150px}

#franchise_promo { float: left; margin: 0 15px 20px 0; /* border-bottom: solid 2px #ccc; */ }

/* Footer - Is very tricky and convoluted, but necessary. */

#footer { clear: both; width: 960px; margin: 0 auto; background: #333; }
#footer .column .wrapper { padding: 25px 30px 0 30px; }
#footer .column .wrapper h3 { margin: 0 0 5px 0; font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 0.2em; }
#footer .column#affiliates .wrapper { padding: 25px 30px 0 30px; }
#footer .column#affiliates .wrapper img { margin: 10px 30px 0 0; }
#footer .column#affiliates .wrapper img.last-child { margin: 10px 0 0 0; }
#footer a { padding: 0; color: #666; text-decoration: none; }
#footer a:hover { color: #dc241f; border: none; }
#footer #credits { clear: both; padding: 0 0 15px 30px; font-size: 10px; color: #888; width: 400px; display:block; }
#footer #credits .link { font-weight: bold; }
#footer #credits a { color: #888; }
#footer #credits a:hover { color: #888; }
#footer #credits a:hover .link { color: #dc241f; }
#footer a img { margin: 0 5px 0 0; border: none; vertical-align: middle; }
#footer #tollfree { font-size: 14px; color: #888; }
#footer #tollfree img { margin: 0 5px 0 0; vertical-align: middle; }

/* News */

.news_item { margin: 0 0 20px 0; border-bottom: solid 1px #ccc; }
.news_item.last-child { border-bottom: none; }
#content .news_item h3 a { padding: 0; color: #333; }
#content .news_item h3 a:hover { color: #dc241f; border: none; }
.news_item .metadata { margin-top: -20px; font-style: italic; color: #888; }
.news_item img { float: left; margin: 0 30px 0 0; }
.news_item .jump { clear: both; display: block; text-align: right; }

.news_image { float: left; margin: 0 30px 0 0; }

#news_recent { list-style: none; margin: 0; padding: 0;}
#news_recent li { margin: 0 0 10px 0; }

/* advice */

.advice_thumb {float:left; width:210px; height:120px; margin-right:10px;}

/* Miscellaneous */

img.border { border-bottom: solid 2px #ccc; }
.adobe { color: #ff0000; }

.address { font-size: 18px; line-height: 25px; }

.calculator, .calculator_roof { width: 420px; height: 450px; margin: 0 auto; background: url("../images/bg_calculator.jpg") left top no-repeat; border-top: solid 1px #fff; } /* border fixes IE */
.calculator_roof { background: url("../images/bg_calculator_roof.jpg") left top no-repeat; }

.calculator .table_calc .button, .calculator_roof .table_calc .button { background-image: none; background: #ccc; }

#franchiseBox {
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF;
	background-image: url("../images/jacks_building_sm.jpg");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-color: #333333;
	padding: 8px;
	margin: 5px 15px 15px 30px;
	width: 296px;
	height: 150px;
	float: right;
	color: #FFFFFF;
}

#franchiseBox a, #franchiseBox a:visited {
	color: #EFDD01;
	text-decoration: none;
}

#franchiseBox a:hover {
	text-decoration: none;
	color: #FF0000!important;
}

/* Utils */

.clear { clear: both; }
.clear.border { border-top: solid 1px #ccc; }

/* promotions */

.promo_download {
	display:block;
	width:360px;
	height: 44px;
	padding: 10px 40px 10px 20px;
	margin: 15px 0;
	background: url(../images/adobe_pdf_icon.png) #E9E9E9 top right no-repeat;
	border-top: 2px #FDE101 solid;
	border-bottom: 2px #FDE101 solid;
}

p.promo_download a {
	text-transform: uppercase;
	font-size: 13px;
	margin-top: 10px;
}

#promoBox {
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF;
	background-color: #333333;
	padding: 8px 8px 4px 8px;
	margin: 5px 15px 15px 30px;
	width: 300px;
	float: right;
	color: #FFFFFF;
}

/* stores */

.storeinfo {float:right; width: 450px; height: 250px; overflow:auto;}

/* paint pages */

.swatch_table td {
	width: 132px;
	text-align: center;
	margin: 0;
	padding: 2px;
	color:#666666;
	font-size:11px;
	
} 

.swatch_table img {
	margin:0;
	border: 1px solid #E8E8E8;
}

.painttype {background: #FDE101; padding: 5px 10px; margin-top: 30px; border-bottom:solid 2px #DF2322; color:#000000}
	
div#feature_list {
	width: 755px;
	height: 320px;
	overflow: hidden;
	position: relative;
	background:#fde101;
}

div#feature_list h3 {
	margin: 0;	
	padding: 10px 0 0 0;
	font-size: 16px!important;
	text-transform: uppercase;
}

div#feature_list ul {
	position: absolute;
	top: 0;
	list-style: none;	
	padding: 0;
	margin: 0;
}

ul#tabs {
	left: 0;
	z-index: 2;
	width: 350px;
}

ul#tabs li {
	font-size: 12px;
	font-family: Arial;
}

ul#tabs li img {
	padding: 0px;
	border: none;
	float: left;
	margin: 0 5px 0 0;
}

ul#tabs li a {
	color: #333333;
	text-decoration: none;	
	display: block;
	padding: 10px;
	height: 60px;
	outline: none;
}

ul#tabs li a:hover {
	text-decoration: underline;
}

ul#tabs h3.current {
	color:#FFFFFF;
}


ul#tabs li a.current {
	background:  url('../images/feature-tab-current.png');
	color: #FFF;
}

ul#tabs li h3.current {
	color: #FFF;
}

ul#tabs li a.current:hover {
	text-decoration: none;
	cursor: default;
}

ul#output {
	right: 0;
	width: 438px;
	height: 320px;
	position: relative;
}

ul#output li {
	position: absolute;
	width: 438px;
	height: 320px;
}

ul#output li a {
	position: absolute;
	bottom: 22px;
	left: 75px;
	padding: 8px 12px;
	text-decoration: none;
	font-size: 11px;
	color: #FFF;
	background: #da251c;
	text-transform:uppercase;
	-moz-border-radius: 5px;
}

ul#output li a:hover {
	background: #D33431;
}