/*  
Version: 1.0
Author: TargetScope Inc.
Author URI: http://www.targetscope.com
*/

/*____________________________________________________________
Import other styles
____________________________________________________________*/

@import url(lib/typography.css);
@import url(lib/reset.css);
@import url(lib/lists.css);
@import url(lib/tables.css);
@import url(lib/forms.css);
@import url(lib/sIFR-screen.css);


/*____________________________________________________________
Some base styles for sizing/shapping etc.
____________________________________________________________*/


.FloatLeft { float: left; }

.ClearAll   { clear:both;line-height:0px;}
.ClearLeft  { clear:left; height:1px; line-height:0px;padding:0px;margin:0px;}
.ClearRight { clear:right; height:1px; line-height:0px;}

.left {float:left;}
img.left {margin-right:15px;margin-bottom:15px;padding:0px;}
.right {float:right;}

#contentequalizer{
    width:0px;
    float:right;
	height:350px;
}



/*____________________________________________________________
Page Extras
____________________________________________________________*/
#breadcrumbs{	color:#3E3E3E;
	padding:4px 4px 4px 0px;
	background:url(../images/layout/divider_topandbottom.gif) top left no-repeat;
	font-family:Arial, Helvetica, sans-serif;
}
#breadcrumbs a {color:#3E3E3E;text-decoration:none;}
#breadcrumbs a:hover{text-decoration:underline;color:#3E3E3E;}

a#selected, a:hover#selected {color:#F38F0C;}

.hr { width:466px;height:1px;margin:15px 0px;background:transparent url(../images/layout/horizontaldivider_graydot.gif) bottom left repeat-x;}
.shorter .hr {width:50%;}
.normal { width:75%;}

#learncontent > #breadcrumbs {margin-bottom:12px;}

/*____________________________________________________________
Main Container
____________________________________________________________*/
#mainContainer{
	width:100%;
	margin:0 auto;
	padding:0;
	}
	
	
/*____________________________________________________________
Header
____________________________________________________________*/

#headerContainer {
	/*min-height:160px;*/
	background:#fff url(../images/layout/background_gradient.jpg) bottom center repeat-x;
	padding:0;
	margin:0;width:100%;
	}

#header {
	min-height:160px;
	width:718px;
	margin:0 auto;
	padding:0;
	}
	
/*set the header image background*/
.welcomebanner {background:#fff url(../images/banners/banner_shop.jpg) bottom center no-repeat; }
.shopbanner{background:#fff url(../images/banners/banner_productlist.jpg) bottom center no-repeat; }
.learnbanner{background:#fff url(../images/banners/banner_learn.jpg) bottom center no-repeat; }
.mapbanner{background:#fff url(../images/banners/banner_map.jpg) bottom center no-repeat; }

a#homelink {display:block;width:185px;height:136px;}
a#homelink span {display:none;}

.rightinfo {
	float:right;
	margin-bottom:87px;
	width:507px;
	}
.learn #topnav {margin-top:39px;}

#myc{
	color:#fff;
	font-size:9px;
	padding-top:5px;
	/*min-height:22px;*/
	background:transparent url(../images/layout/myc_stretcher.gif) top right repeat-y;
	}

.myc_info {
	background:transparent url(../images/layout/myc_footer.gif) bottom center no-repeat;
	padding-bottom:5px;
	
	}
.mycBtn {margin-right:10px;}




/*_______________________________________________ _____________
Nav
____________________________________________________________*/

#topnav {height:34px;width:507px;margin:0px;padding:0px;vertical-align:bottom;}
#topnav ul {margin:0px;padding:0px; list-style-type:none;}
#topnav li {float:right;padding:0;margin:0px 20px 0px 0px;background:none;}



#btn_aboutus{ 
	width:45px;
	background-image: url(../images/nav/btn_aboutus.gif);
	}
#topnav li.btn_aboutus {margin-top:0px;background:#fff url(../images/nav/btn_aboutus.gif);}
#topnav a#btn_aboutus:hover{margin-top:0px;background-position:100% -34px;z-index:50;}

#btn_jobs{ 
	width:23px;
	background-image: url(../images/nav/btn_jobs.gif);
	}
#topnav li.btn_jobs {margin-top:0px;background:#fff url(../images/nav/btn_jobs.gif);}
#topnav a#btn_jobs:hover{margin-top:0px;background-position:100% -34px;z-index:50;}

#btn_franchise{ 
	width:123px;
	background-image: url(../images/nav/btn_franchise.gif);
	}
#topnav li.btn_franchise {margin-top:0px;background:#fff url(../images/nav/btn_franchise.gif);}
#topnav a#btn_franchise:hover{margin-top:0px;background-position:100% -34px;z-index:50;}

#btn_contact{ 
	width:56px;
	background-image: url(../images/nav/btn_contact.gif);
	}
#topnav li.btn_contact {margin-top:0px;background:#fff url(../images/nav/btn_contact.gif);}
#topnav a#btn_contact:hover{margin-top:0px;background-position:100% -34px;z-index:50;}

#btn_blog{ width:24px;background-image: url(../images/nav/btn_blog.gif);}
#topnav li.btn_blog {margin-top:0px;background:#fff url(../images/nav/btn_blog.gif);}
#topnav a#btn_blog:hover{margin-top:0px;background-position:100% -34px;z-index:50;}


#btn_aboutus, #btn_jobs, #btn_franchise, #btn_contact, #btn_blog
{
	display:block;
	float:left;
	height: 34px;
	
}
#btn_aboutus:hover, #btn_jobs:hover, #btn_franchise:hover, #btn_contact:hover, #btn_blog:hover
{background-position:100% -34px;}

#btn_aboutus span, #btn_jobs span, #btn_franchise span, #btn_contact span, #btn_blog span
{display:none;}

.topnav_activebtn{
	background-position:100% -34px;
}



/*____________________________________________________________
Containers
____________________________________________________________*/


#bodyContainer{ width:736px;margin:0 auto;padding:0px;}
#productContainer{ width:736px;margin:0 auto;padding-top:20px;}
#welcomeContainer{ width:718px;margin:0 auto;padding-top:20px;}


/*____________________________________________________________
3 Col Layout
____________________________________________________________*/

#col1 {
	padding-right:15px;
	float:left;
	width:220px;
	background:transparent url(../images/layout/verticaldivider.gif) top right repeat-y;
	min-height:450px;
	}
*html #col1 {padding-right:13px;}	

#col2 {
	padding-right:15px;
	float:left;
	padding-left:14px;
	width:220px;
	background:transparent url(../images/layout/verticaldivider.gif) top right repeat-y;
	min-height:450px;
	}
/**html #col2 {padding-right:10px;padding-left:10px;}	*/

#col3 {
	padding-left:13px;
	width:220px;
	float:right;
	}
*html #col3 {padding-left:10px;}






/*____________________________________________________________
2 Col Layout
____________________________________________________________*/
#title {width:100%;padding-bottom:5px;}
#title h1 {width:370px;float:left;}

#learncontent >#title h1 {float:none;width:490px;}

#column1 {float:left;width:490px;background-position:right;background-repeat:no-repeat;}
*html #column1 {width:470px;}

#list, #learncontent {float:left;padding-left:16px;width:490px;background-position:top right;background-repeat:no-repeat;}
*html #list, * html #learncontent {width:470px;}
#list p {display:block;margin:12px 0px;padding-right:20px;}
#learncontent p {margin-bottom:12px;padding-right:5px;width:415px;}
#learncontent p.narrow {width:220px;float:left;}
p.narrow {width:220px;}

.guy #learncontent {background-image:url(../images/layout/background_learnguy.jpg);width:100%;padding-left:18px;}
*html .guy #learncontent {position:relative;left:20px;}

#column2 {float:right;width:238px;}


.printbtn {float:right;margin-top:8px;margin-right:30px;}
*html .printbtn {margin-right:10px;}


/*____________________________________________________________
Checkout Column 1 Content
____________________________________________________________*/

#content >#title h1 {float:none;width:490px;}



#content {float:left;padding-left:16px;width:700px;background-position:top right;background-repeat:no-repeat;}
* html #content {width:690px;}

#content p {margin-bottom:12px;margin-top:10px;}

p.checkout, p.checkout2 {margin-right:15px;width:220px;float:left;}


* html p.checkout2 {width:220px;margin-right:0px;}


/*____________________________________________________________
Product List
____________________________________________________________*/

.sub-Title{font-weight:normal;color:#9A1402;font-size:12px;}
.align-list{margin-bottom:12px;}

#smproductbucket {
	/*width:100%;*/
	background:transparent url(../images/layout/horizontaldivider.gif) bottom left no-repeat;
	padding-bottom:15px;
	line-height:1.3em;
	margin-top:15px;
	position:relative;
	}
	
#smproductbucket img {float:left;margin:0px 10px 10px 0px;}

#smproductbucket .cost {  }
#smproductbucket .terms { font-size: 10px; color:#666666; font-style: italic; }
#smproductbucket .statereqs { display:none; }


a.add, a.magnify, a.start {
	float:left;
	font-weight:bold;
	margin:10px 10px 0px 0px;
	padding:3px 0px 0px 22px;
	height:18px;
	color:#333;
	font-size:9px;
	}

a.magnify 	{background: url(../images/layout/icon_glass.gif) top left no-repeat;}
a.start		{background: url(../images/layout/icon_star.gif) top left no-repeat;}
a.add		{background: url(../images/layout/icon_add.gif) top left no-repeat;}



.sort{
	
	padding:4px 4px 4px 0px;
	background:url(../images/layout/divider_topandbottom.gif) top left no-repeat;
	color:#961F14;
	font-size:9px;
	font-weight:bold;
}

.sort a {color:#666;text-align:left;margin:0px 10px;}
.sort a:hover {color:#333;}
a.selectedsort {border-bottom:1px solid #961F14;color:#333;}

.listcontrols {color:#333;font-weight:bold;font-size:9px;height:15px;margin-top:5px;width:470px;}
.listcontrols span {color:#961F14;float:left;width:72%;text-align:center;}
.listcontrols span a {color:#666;padding:0px 2px;}
.listcontrols span a:hover {color:#000;}

a.previous 	{background: url(../images/layout/arrow_gray_left.gif) top left no-repeat;width:60px;float:left;padding-left:10px;}
a.next		{background: url(../images/layout/arrow_gray.gif) top right no-repeat;float:right;width:45px;text-align:right;padding-right:10px;}


/*____________________________________________________________
Product Detail
____________________________________________________________*/



#detailinfo {width:100%;}
#detailinfo .detailphoto {float:left;margin:0px 15px 0px 0px;padding:0px;} /*http://colortyme-beta.onthetarmac.com/shop/email.aspx*/
*html #detailinfo .detailphoto {margin:0px 7px 10px 0px;}

#detailinfo a {float:left;padding:0px;margin:0px;} 
*html #detailinfo a img{padding:0px;margin:0px;} 


#detailinfo .cost { font-size: 14px; font-weight: bold; }
#detailinfo .terms { font-size: 10px; color:#666666; font-style: italic; }
#detailinfo .statereqs { color:#666666; font-style: italic; font-size: 9px; display: block;  }


#detailinfo h5 {margin:10px 0px 0px 0px;}
#detailinfo h5.cost {margin:0px;}
#detailinfo p {padding-right:25px;margin-top:10px;}

.detailinfoheader {margin:10px 0px 16px 0px;}

.detailinfoheader h2 {float:left;width:345px;margin:0px;padding:0px;}
*html .detailinfoheader h2 {width:330px;}

#detailinfo .hr {height:1px;margin-left:285px;width:170px;}
*html #detailinfo .hr {height:1px;margin-left:275px;width:170px;padding:0px;margin:0px;}

#detailinfo .detaillinks {float:right; width:100px;margin:5px 33px 0px 0px;text-align:right;}
*html #detailinfo .detaillinks {margin-right:7px; }
#detailinfo .detaillinks a {
	font-weight:bold;
	text-decoration:underline;
	color:#333;
	font-size:9px;
	display:block;
	text-align:right;
	float:right;
	padding:0px;
	}
#shoppinglistinfo span{padding:0px 5px 0px 10px;float:left;text-align:left;font-weight:bold;margin:0px;font-size:10px;}
#shoppinglistinfo .right {font-size:10px;}


/*____________________________________________________________
Buckets
____________________________________________________________*/
.bucketContainer	  {width:220px;}
#column2 .bucketContainer {margin-left:10px;}

.bucket 	  {width:220px;padding-top:31px;background-position:top left; background-repeat:no-repeat;}

.start .bucket {width:100%; background:#F4E6C7 url(../images/layout/title_start.gif) top left no-repeat; }


.specials .bucket {width:100%; background-image:url(../images/layout/title_specials.gif); }
.message .bucket {
	width:86%;
	color:#115A28;
	background:#D1E9DA url(../images/layout/title_message.gif) top left no-repeat;
	padding:40px 15px 2px;
	}
.message .bucket p {font-size:9px;margin-top:11px;}
.difference .bucket {padding-top:42px;width:100%; background-image:url(../images/layout/title_difference.gif); }
.learn .bucket {padding:45px 8px 10px 11px;width:200px; background:#E1E1E1 url(../images/layout/title_learnguy.gif) top left no-repeat;margin-top:15px; }
* html .learn .bucket {background:#E1E1E1 url(../images/layout/title_learnguy.gif) top left no-repeat;}

img#managerphoto {border:2px solid #115A28; float:left;width:59px;height:49px;margin:0px 9px 9px 0px;}



/*____________________________________________________________
Promos
____________________________________________________________*/
.promos {margin-top:9px;}

/*____________________________________________________________
Find a Store
____________________________________________________________*/
#mapicons {
	margin:0px 5px 5px 0px;
	padding-left:115px;
	width:335px;
	}

#mapcontainer {border:1px solid #010101;width:450px;height:368px;padding:0px;margin:0px;}

#storeresultscontainer {background:url(../images/layout/background_shopfinder.jpg) bottom left no-repeat;width:220px;height:482px;margin:0px 0px 0px 10px;}
#storeresultscontainer a.prevlink, #storeresultscontainer a.nextlink
{
	color: White;
	font-weight: bold;
	text-align: right;
	}




#shopwidget {background:url(../images/layout/header_shopwidget.jpg) top left no-repeat;height:32px;padding:58px 10px 0px 10px;}
#learnshopwidget {background:url(../images/layout/header_shopwidget.jpg) top left no-repeat;height:32px;padding:58px 10px 0px 10px;margin:0px 0px 0px 10px;}

#storeresults { margin: 15px 9px 0px 9px;}
* html #storeresults {margin-left:0px;}
#storeresults ul {
	
	list-style-type:none;
	padding-left:0px;
	margin-left:0px;

}
#storeresults li {
	width:190px;
	padding:10px 0px 10px 10px;
	border-top:1px solid #000;
	line-height:1.25em;
	margin:0px;
	background:none;
	color:#F38B0D;
	font-size:10px;
	
	}


#storeresults li span {color:#fff;}

#storeresults li:hover  {background-color:#4B0000;cursor:pointer;}

/*____________________________________________________________
Careers
____________________________________________________________*/

.jobsearch{ width:150px; }
.jobTitle{ font-weight:bold; }
.default-red{ width:180px; font-weight:bold; }

/*____________________________________________________________
Footer
____________________________________________________________*/

#footerContainer {margin:28px auto;width:718px;font-size:10px;}

#flashContainer {height:33px;}

.copyrightContainer {
	text-align:left;
	margin-top:18px; 
	padding:10px 22px;
	background:#CFCFCF url(../images/layout/copyright_top.gif) top left no-repeat;
	}
	
.copyrightContainer span {
	text-align:right;
	float:right;
	width:300px;
	color:#0D2D84;
	font-weight:bold;
	font-size:11px;
	}
	
.sitelinks {
	text-align:center;
	margin-top:18px;
	color:#666;
	}
.sitelinks a {padding:0 5px;color:#666;}
.sitelinks a:hover {color:#000;}


table[id="ctl00_Content_GridView1"] th
{
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}
table[id="ctl00_Content_GridView1"] td
{
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}

.sale
{
	position:absolute;
	left:0;	
}
.seoFooter h1{
	color:#F38F0C;
	font-size:12px;
	margin-bottom:0.3em;
	padding-top:23px;
}
.seoFooter h2{
	font-size:12px;
	padding-top:20px;
}

.seoFooter{
	text-align:left;
	margin-top:18px; 
	padding:10px 22px;
	clear:left;
}

#columnLeft, #columnRight{
	float:left;
	padding-right:30px;
	width:45%;
}

.onlinePaymentTermsLink { text-align:center;padding-top:3px; }