/* 
Title:		Jel Claws
Author: 	David Boyer
Email:		david.boyer[at]26tigers.com
Created: 	March 17th, 2007
Updated:	September 9, 2008
*/

/* Design Notes:

Colors: 
	#B6272F - Reddish/Pink Background color
	#FEFF04 - Jel Claws Yellow
	#D19937 - Gold Link
	#960E1C - Red Link

*/

/*--[Global]----------------------------------------------------------*/
html, body, form, fieldset, legend, input, select, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, dt, dd, address, img {
	margin:0;
	padding:0;
}
ul, li {
	list-style-type:none;
}
body {
	background: #B6272F url(../../images/mrpink/bg_body.gif) repeat-x; 
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	font-size: small;
	line-height: 1.1em;
	color: #333333;
	text-align: center; /* KLUDGE: IE5.5 and IE6 in quirks mode doesn't understand auto marging. IE misunderstands text-align: center and centers everything. Must reset text to the left in the wrapper tag. */
	min-width: 800px; /* KlUDGE: Keeps Netscape 6 from spilling off the side of the page when viewport is reduced beloew wrapper width. */
}

* html body {
	font-size: x-small; /* for IE5/Win */
	f\ont-size: small; /* for other IE versions */
}
hr { /* Used to clear floats */
     border: 0;
     clear: both;
     display: block;
     float: none;
     margin: 0;
     overflow: hidden;
     visibility: hidden;
     width: 0;
     height: 0;
}			
img {
	border:0;
}	

/*--[Set Common Elements]----------------------------------------------------------*/
.tiny {
	font: xx-small Arial, Helvetica, sans-serif;
}
.clear {
	clear: both;
}
.centered {
	text-align:center;
}
.right {
	float: right;
}
.left {
	float: left;
}

/*--[Set Generic Link Rules]----------------------------------------------------------*/
a:link {
	color:#960E1C;
	text-decoration: none;
}
a:visited {
	color: #960E1C;
	text-decoration: none;
}
a:hover {
	color:#000;
	text-decoration: none;
}

/*--[wrapper]---------*/
#wrapper {
	width: 780px;
	margin: 0 auto;
	text-align: left; /* KLUDGE: Realigns text to the left for the IE fix. */
	background: url(../../images/mrpink/bg_wrapper.gif) no-repeat 0 201px;
	min-height:786px;
	height:auto !important;
	height:786px;
}

/*--[Masthead]----------------------------------------------------------*/
#masthead {
	margin: 0;
	padding: 0;
	background: url(../../images/mrpink/bg_header.jpg) no-repeat;
	height: 201px; 
	width: 780px;
	position: relative; /* Needed to allow for the absolute postioned nav tabs otherwise the tabs would postion relative to the viewport. */
	overflow:hidden;
}
	#masthead h1 {
		width: 311px;
		height: 143px;
		background: url(../../images/mrpink/img_logo_jelclaws.jpg) no-repeat 0 0;
		text-indent: -9926px;
		position: absolute;
		top: 0;
		left: 0;
	}
		#masthead h1 a {
			display: block;
			height: 143px;
			background: url(../../images/mrpink/img_logo_jelclaws.jpg) no-repeat 0 0; /* Logo needs to be repeated in order to prevent flickering in IE on mouse over. */
		}

/*--[Column Layout]--------*/
#wrapper_content {
	float: right;
	width: 565px;
	background: url(../../images/mrpink/bg_wrapper_content.gif) repeat-y;
}
#wrapper_contentsec {
	float: left;
	width: 215px;
}

/*--[Navigation Bar]----------*/
ul#navbar {
	padding: 0;
	margin: 0;
	list-style: none;
	float: right;
	position: absolute;
	width: 780px;
	top: 148px;
	right: 0;
}
	ul#navbar li {
		float: right; /* Float left to display link hoziontally. Need to float the parent as well. */
	}
		ul#navbar li a {
			font: bold 110%/1.8em "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
			display: block;
			text-transform: capitalize;
			text-decoration: none;
			background: url(../../images/mrpink/bg_navbar_divider.gif) no-repeat 0 2px;
			padding: 0 10px;
			float: left;
			color: #FFF;
		}
			ul#navbar li a:visited{
				color: #FFF; 
			}
			ul#navbar li a:hover {
				color: #FEFF04; /* Jel Claws Yellow */
			}
			ul#navbar li a:active {
				color: #FEFF04;
			}
			
/*----------Secondary Navigation  ----------*/	
#navsec {
	width: 215px;
	background: url(../../images/mrpink/bg_navsec_menu.gif) repeat-x top;
}
	#navsec ul {
		list-style: none;
		width: 215px;
		padding: 10px 0 15px 0;
		margin: 0;
	}
		#navsec ul li  {
			display: inline; /* :KLUDGE: Removes large gaps in IE/Win */
		}
			#navsec ul li a {
				font: bold 100% "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
				display: block;
				text-align: right;
				margin: 0 0 4px 0;
				background: #4B0000 url(../../images/mrpink/bg_navtriangle.gif) no-repeat right center;
				padding-right: 23px;
				line-height: 25px;
				border-bottom: 1px solid #8F0B12;
			}
			#navsec ul li a:link, #navsec ul li a:visited {
				color: #FFF;
				text-decoration: none;
			}	
			#navsec ul li a:hover {
				color: #FEFF04;
			}

/*--[Headlines]----------*/
h2.frontpic {
	height: 248px;
	background: url(../../images/mrpink/bg_frontpic.jpg) no-repeat 0 0;
	text-indent: -9926px;
}	
h2.contenttitle {
	font: bold 170%/1.1em "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
	color: #333;
	padding: 10px;
}
h2.gen_title {
	font: bold 200%/1.1em "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
	padding: 10px;
}
h4.cattitle {
	font: bold 170%/1.1em "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
}
h4.prodtitle {
	font: normal 150%/1.1em "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
}

/*--[Images]----------*/
img.contentright {
	float: right;
	border: 1px solid #434343;
	margin: 10px;
	background-color: #300407;
	padding: 5px;
}
img.contentleft {
	float: left;
	border: 1px solid #FFF;
	margin: 15px;
	background-color: #999;
	padding: 5px;
}
.thumb {
	border: 1px solid #BACBDB;
	margin-left: 10px;
	background-color: #CCC;
	padding: 3px;
}

/*--[Text Bits]----------*/
p.price {
	font-weight: bold;
	text-transform: uppercase;
}
p.priceb {
	font: bold 105% Arial, Helvetica, sans-serif;
	color: #4B0000;
	padding: 5px 0;
}
.smalltext {
	font-size: 75%;
	padding: 3px 0;
}
.notebox {
	border: 1px solid #999;
	background-color: #DDD;
	margin: 10px 15px;
	padding: 5px;
}
	.notebox p {
		font-size: 75%;
	}
.optionbox {
	border: 1px solid #999;
	background-color: #DDD;
	margin: 10px 15px;
	padding: 5px;
}
	.optionbox p {
		font-size: 75%;
		padding: 3px 15px;
		
	}
/*--[Button Bits}--------*/
.stdbutton {
	margin: 0 0 10px 10px;
}

/*--[Link Bits]--------*/
.blocked a {
	display: block;
	padding: 5px 0 5px 3px;
}
.blocked a:hover {
	background-color: #CCC;
}

/*--[List Bits]---------*/
ul.pdfs {
	width: 500px;
	margin: 0 auto;
	padding-bottom: 30px;
}
	ul.pdfs li {
		display: inline;
	}
		ul.pdfs li a {
			display: block;
			background: url(../../images/mrpink/icon_pdf.gif) no-repeat 0 50%;
			padding: 5px 0 5px 25px;
			font-size: 85%;		
		}
		
/*--[Content Area]--------*/
#content_area {
	width: 549px;
	margin: 0 auto;
}
#content_area p.emphasis {
	font-size: 125%;
	line-height: 1.3em;
	padding: 0 0 7px 0;
}

/*--[Front Columns]--------*/
#fcol {
	float: left;
	width: 183px;
	padding-bottom: 15px;	
}
	#fcol h4 {
		background: url(../../images/mrpink/bg_columnheader.jpg) no-repeat 0 0;
		font: 135% "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
		font-weight: normal;
		color: #5B5B5B;	
		padding: 0 3px 0 34px;
		line-height: 41px; 
	}	
	.frontcontent_generic {
		font-size: 75%;
		padding: 10px;
	}
#fcol_big {
	float: right;
	width: 366px;
	padding-bottom: 15px;	
}
	#fcol_big h4 {
		background: url(../../images/mrpink/bg_columnheader_big.jpg) no-repeat 0 0;
		font: 135% "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
		font-weight: normal;
		color: #5B5B5B;	
		padding: 0 3px 0 34px;
		line-height: 41px; 
	}
	
ul.std {
	padding: 4px 0;
	font-size: 105%;
}
	ul.std li {
		padding: 2px 0 2px 20px;
		background: url(../../images/mrpink/bullet_orange.gif) no-repeat 0 50%;
	}
		
	
/*---------- Side Block Styling ----------*/	
.side_block {
	padding: 5px 5px 15px 5px;
}
	.side_block p {
		font-size: 75%;
		padding: 5px 0 0 10px;
		text-align: right;
		color: #FFF;
	}
		
/*--[Teaser Listings]--------*/
.teaser_scoll {
	width: 140px;
	float: left;
	padding: 5px 0;
}
.teaser_scolr {
	width: 206px ;
	float: right;
	margin: 0 -3px 15px 0;
	padding: 5px 0;
	border-bottom: 1px solid #A3A3A3;	
}
	.teaser_colr p {
		font-size: 80%;
		line-height: 1.3em;
	}
h4.teaser_entry {
	font: bold 135%/1.3em Arial, Helvetica, sans-serif;
	padding: 0 0 3px 0;
}
	h4.teaser_entry a:link, h4.teaser_entry a:visited {
		color: #E4C600;
	}
	h4.teaser_entry a:hover {
		color: #FFFF00;
		text-decoration: none;
	}
.teaser_thumb {
	border: 1px solid #A3A3A3;
	margin-left: 10px;
	background-color: #CCC;
	padding: 3px;
}
.teaser_price {
	padding: 8px 0 3px 0;
	font-weight: bold;
}
.teaser_gobutton {
	float: right;
	padding-bottom: 3px;
	padding-right: 3px;
}

/*--[Interior Columns]--------*/
.icol_left {
	width: 140px;
	float: left;
	padding: 10px 0;
}
.icol_right {
	width: 389px;
	float: right;
	margin: 0 0 0 0;
	padding: 10px 0;
	border-bottom: 1px solid #CCC;	
}

/*--[Content Columns]----------*/
.content_col_l {
	float: left;
	width: 220px;
	padding-top: 5px;	
	margin-left: 10px;
	display: inline; /*KLUGDE: Fixes double margin float bug in IE6 */
}

.content_col_r {
	float: right;
	padding-top: 5px;
	width: 309px;
	margin-right: 10px;
	display: inline; /*KLUGDE: Fixes double margin float bug in IE6 */
}

/*--[FAQs]---------*/
ul.faqs {
	padding: 0 15px 15px 15px;
}
	ul.faqs li {
		display: inline;
	}
			ul.faqs li a {
				display: block;
				background: url(../../images/mrpink/bullet_orange.gif) no-repeat 0 0;
				padding: 3px 0 3px 28px;
				font-weight: bold;
			}
				ul.faqs li a:link, ul.faqs li a:visited {
					color: #A21820;
				}
				ul.faqs li a:hover {
					text-decoration: underline;
				}
h5.question {
	background: url(../../images/mrpink/bg_q.gif) no-repeat 0 50%;
	padding: 25px 0 5px 35px;
	font: bold 115% Arial, Helvetica, sans-serif;
	margin: 0 0 0 15px;
}
div.answer {
	background: url(../../images/mrpink/bg_a.gif) no-repeat 0 10%;
	margin: 0 0 0 40px;
	padding: 10px 0 0 25px;
}
	div.answer p {
		font-size: 75%;
		padding: 5px 15px;
	}
	
/*--[Footer Wrapper]-------*/
#wrapper_footer {
	float: right;
	width: 565px;
	background: url(../../images/mrpink/bg_wrapper_footer.gif) no-repeat 0 0;
	padding: 15px 0; 
	font-size: 75%;
	text-align: right;
	color: #FFF;
}