/* 
	DirtyKnickersOnline Core CSS Document
	October 2006
	Mike Hearfield
*/


/*--------------------------------------------------------------------------- BASICS */
*{
	margin:0px;
}

body{
	font-family:Arial, sans-serif;
	font-size:0.9em;
	color:#000000;
	background-color:#FFFFFF;
}

a{
	color:#7B7C7C;
}
a:link{
	text-decoration:underline;
}
a:hover, a:visited:hover{
	text-decoration:none;
}

/* style for the "more" link in bordered boxes */
a.m{
	position:absolute;
	bottom:7px;
	right:7px;
	font-size:0.8em;
	color:#FF0000;
}

a.big{
	color:#FFFFFF;
	font-size:1.2em;
	font-weight:bold;
}
a.big:link, a.big:visited{
	text-decoration:none;
}
a.big:hover, a.big:visited:hover{
	text-decoration:underline;
}

ul{
	list-style:none;
	list-style-position:inside;
	padding:0px;
}

img{
	border:none;
	padding:0px;
}

h1{
	display:none;
}

p{
	padding:0px 5px 0px 5px;
}

hr{
	color:#7B7C7C;
	background-color:#7B7C7C;
	border:none;
	height:1px;
	padding:0px;
	margin:0px;
}

strike{
	color:#7B7C7C;
}
/*---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------- FORM BASICS */
form{
	margin-top:10px;
}
form div.col1{
	width:378px;
	float:left;
	margin-right:10px;
}
form div.info{
	float:right;
	width:171px;
	border-left:1px solid #FFFFFF;
	}
form div.infobig{
	float:right;
	width:521px;
	border-left:1px solid #FFFFFF;
	}
	form div.info h4{
		background:url(images/misc/info.gif) 3px 2px no-repeat;
		padding-left:21px;
		line-height:20px;
	}
fieldset{
	border:none;
	margin-top:10px;
}
legend{
	font-size:1em;
	font-weight:bold;
	color:#FFFFFF;
	margin-bottom:5px;
}
select{
	margin-bottom:5px;
/*	background-color:#7B7C7C;
	color:#999999;*/
}
optgroup{
	font-style:normal;
}
.required input.txt, form .required select{
	border-left:2px solid #BD002B;
}
.required label{
	font-weight:bold;
}
input.txt, form select{
	width:210px;
}
label{
	width:140px;
	float:left;
	}
	label img{
		vertical-align:bottom;
	}
label.wide{
	width:371px;
	float:left;
}
input.narrow, select.narrow{
	width:105px;
}
.colb label{
	width:80px;
}
textarea.wide{
	width:355px;
	margin-top:5px;
}

.narrowBordered p.formRow{
	padding:0px;
	margin:0px;
	}
	.narrowBordered p.formRow input.withButton{
		width:147px;
		margin:0px 0px 5px 5px;
	}
	.narrowBordered p.formRow img{
		margin:0px 0px 5px 5px;
	}
	
	.narrowBordered input.fullWidth{
		width:177px;
		margin:0px 5px 5px 5px;
	}

/*---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------- PAGE STRUCTURE AND MENUS */
/*
	Constant elements are the top nav (135px), left column (197px) and right column (197px). Left and right columns only have outer margins.
*/
/*
	The layouts are basically (ignoring the menu and side cols) 1 col or 3 cols. 1 col things can have either 2, 3, 4 or 6 cols within them.
*/

#div_outer{
	position:relative;
	width:996px;
	margin:0px auto 0px auto;
}

#div_topNav{
	width:986px;
	margin:0px 5px 10px 5px;
	}
	#div_banner{
		/* Set a min height here so that the imgs can get bigger without cocking things up. Reduce this if the images go below 47px high. */
		height:auto !important;
		height:67px;
		min-height:67px;
		}
		#div_banner img{
		/* Assumed that the images are 47px high. */
			margin:10px 5px 10px 5px;
		}
	#div_mainMenu{
		height:38px;
		}
		#div_mainMenu ul.links{
			margin-left:3px;
			}
			/* Menu tabs. Class="selected" for a li gives the same effect as a hovered tab without having to be a link - neater. */
			#div_mainMenu ul.links li{
				float:left;
				width:161px;
				height:auto !important;
				height:19px;
				min-height:19px;
				line-height:19px;
				margin-right:2px;
				text-align:center;
				font-weight:bold;
				font-size:1em;
				font-weight:bold;
				overflow:hidden;
			}
			#div_mainMenu ul.links li a{
				float:left;
				width:161px;
				background:url(images/menu/tab.gif) 0 0 no-repeat;
				text-decoration:none;
				color:#FFFFFF;
			}
			#div_mainMenu ul.links li a:hover, #div_mainMenu ul.links li.selected, #div_mainMenu ul.links li.selected a{
    				background:url(images/menu/tab.gif) 0 -220px no-repeat;
			}

		#div_mainMenu #div_subText{
			position:relative;
			width:996px;
			left:-5px;
			height:auto !important;
			height:19px;
			line-height:19px;
			min-height:19px;
			background-color:#7B7C7C;
		}
		/* The text that goes beneath the page title is an H2. Float it so it's on the same line as any sublinks */
		#div_mainMenu #div_subText h2{
			padding-left:15px;
			text-align:left;
			float:left;
			font-size:1em;
			font-weight:normal;
			}
			#div_mainMenu #div_subText ul.subLinks li{
				float:right;
				height:auto !important;
				height:19px;
				min-height:19px;
				line-height:19px;
				margin-right:2px;
				text-align:center;
				font-weight:bold;
				font-size:1em;
				font-weight:bold;
				width:160px;
			}
			#div_mainMenu #div_subText ul.subLinks li a{
				background:none;
				float:right;
				font-size:0.8em;
				text-decoration:underline;
				font-weight:normal;
				margin-left:3px;
				color:#FFFFFF;
			}
			#div_mainMenu #div_subText ul.subLinks a:hover{
				text-decoration:none;
			}
		
#div_leftCol{
	width:187px;
	float:left;
	margin:0px 10px 0px 10px;
	display:inline;
	}
	#div_subMenu{
		}
		#div_subMenuInner{
			width:167px;
			margin:10px;
			font-size:0.9em;
			}
			#div_subMenuInner h4{
				font-weight:bold;
				font-size:1em;
				display:inline;
			}
				#div_subMenuInner h4 a{
					width:152px;
					float:left;
				}
				#div_subMenuInner h4 a:hover{
					color:#FFFFFF;
				}
			#div_subMenuInner img{
				clear:left;
				float:left;
				padding:4px 4px 0px 0px;
			}	
			#div_subMenuInner a, #div_subMenuInner .subMenuTitleOpen, #div_subMenuInner .subMenuTitleClosed{
				color:#BD002B;
				font-weight:bold;
				font-size:1em;
				text-decoration:none;
				background-color:#000000;
			}
			#div_subMenuInner .subMenuTitleOpen, #div_subMenuInner .subMenuTitleClosed{
				vertical-align: middle;
				color: #BD002B;
				cursor:pointer;
				line-height:19px;
				}
			#div_subMenuInner .subMenuSubOpen{
				margin-left:10px;
				}
				#div_subMenuInner .subMenuSubOpen li{
					float:left;
					width:157px;
				}
				#div_subMenuInner .subMenuSubOpen a{
					float:left;
					width:157px;
					color:#7B7C7C;
					}
					#div_subMenuInner .subMenuSubOpen a:hover, #div_subMenuInner .subMenuSubOpen a:visited:hover, #div_subMenuInner .subMenuSubOpen a.selected{
						color:#FFFFFF;
					}
		.subMenuSubClosed{
			clear:both;
			display: none;
			}
		#div_subMenuInner img{
			margin:0px !important;
		}
	
	
	
#div_contentHolder{
	width:581px;
	float:left;
	display:inline;
}

#div_rightCol{
	width:187px;
	float:left;
	display:inline;
	margin-left:10px;
	}
	#div_rightCol a{
		color:#FFFFFF;
	}	

#div_footer{
	clear:both;
	background-color:#7B7C7C;
	font-size:0.8em;
	color:#000000;
	padding:4px 10px 6px 10px;
	margin-top:10px;
	}
	#div_footer div.col1{
		width:360px;
		float:left;
		}
		#div_footer ul#footer_links li{
			float:left;
			}
			#div_footer ul#footer_links li a{
				color:#000000;	
			}
	#div_footer div.col2{
		width:280px;		
		float:left;
		}
		#div_footer p#p_cards{
			text-align:center;
			margin-top:2px;
		}
	#div_footer div.col3{
		width:302px;
		float:right;
		text-align:right;
	}
	#div_footer p#p_footerLogo{
		margin-top:3px;
	}
	
/*---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------- BORDERED BOXES */
/*
	Boxes with borders and maybe titles
*/
/*
	Narrow, light bordered. Use h3 to put a header bar in, use h4 for a curved top with no title.
*/
	.narrowBordered{
		position:relative;
		display:inline;
		/* If you apply a margin to a floated thing to push it in the same direction as the float, IE doubles it for you. Display:inline fixes this. */
		width:187px;
		background:url(images/boxes/nDkBody.gif) 0 100% repeat-y;
		margin:0px 0px 10px 0px;
		padding-bottom:5px;
		float:left;
		color:#FFFFFF;
		}
		.narrowBordered h3{
			height:auto !important;
			height:21px;
			min-height:21px;
			font-weight:bold;
			font-size:1em;
			padding:5px 2px 0px 5px;
			background:url(images/boxes/nDkHead.gif) 0 0 no-repeat;
			margin-bottom:10px;
		}
		.narrowBordered h6{
			height:7px;
			max-height:7px;
			font-size:0em;
			line-height:0px;
			background:url(images/boxes/nDkHead2.gif) 0 0 no-repeat;
			margin-bottom:5px;
		}
		.narrowBordered p{
			margin:0px 5px 3px 5px;
		}
		.narrowBordered img{
			margin:0px 10px 10px 10px;
		}
		/* We need to pad out any narrowBordered divs inside the main content area */
		#div_contentHolder div.narrowBordered{
			margin-right:10px;
		}
		#div_contentHolder div.narrowBordered.end{
			margin-right:0px;
		}
	
/*
	Narrow, dark bordered. Use h3 to put a header bar in, use h4 for a curved top with no title.
*/
	.narrowBordered.light{
		background:url(images/boxes/nLtBody.gif) 0 100% repeat-y;
		}
		.narrowBordered.light h3{
			background:url(images/boxes/nLtHead.gif) 0 0 no-repeat;
		}
		.narrowBordered.light h6{
			height:7px;
			max-height:7px;
			font-size:0em;
			line-height:0px;
			background:url(images/boxes/nLtHead2.gif) 0 0 no-repeat;
		}

/*
	Wide, dark bordered. Use h3 to put a header bar in, use h4 for a curved top with no title.
*/
	.wideBordered{
		position:relative;
		width:581px;
		background:url(images/boxes/wDkBody.gif) 0 100% repeat-y;
		margin:0px 0px 10px 0px;
		color:#FFFFFF;
		clear:both;
		}
		.wideBordered h3{
			height:auto !important;
			height:21px;
			min-height:21px;
			font-weight:bold;
			font-size:1em;
			padding:5px 2px 0px 5px;
			background:url(images/boxes/wDkHead.gif) 0 0 no-repeat;
			margin-bottom:10px;
		}
		.wideBordered h6{
			height:7px;
			max-height:7px;
			font-size:0em;
			line-height:0px;
			background:url(images/boxes/wDkHead2.gif) 0 0 no-repeat;
			margin-bottom:5px;
		}
		.wideBordered p{
			margin:0px 5px 8px 5px;
			}
		.wideBordered img{
			margin:0px 10px 10px 10px;
		}
		/* Wide content with 2 internal columns. Mark up the columns as "col2" */
		.wideBordered .col2{
			width:280px;
			margin-right:5px;
			float:left;
			display:inline;
			}
			.wideBordered .col2 img{
				margin:0px 0px 10px 0px;
			}
	/* Wide content with 3 internal columns. Mark up the columns as "cola", "colb", "colc" */
		.wideBordered .cola, .wideBordered .cola_bskt{
			width:175px;
			float:left;
			display:inline;
			margin-right:5px;
			}
			.wideBordered .cola img{
				margin-right:0px;
			}
			.wideBordered .cola_bskt img{
			 	margin:0px;
			 }
		.wideBordered .cola_bskt{
			width:185px;
		}
		.wideBordered .colb, .wideBordered .colb_bskt{
			width:215px;
			float:left;
			display:inline;
			}
			.wideBordered .colb p, .wideBordered .colb_bskt p{
				padding:0px;
			}
		.wideBordered .colb_bskt{
			width:270px;
			}
		.wideBordered .colc, .wideBordered .colc_bskt{
			width:170px;
			float:right;
			margin-right:5px;
			display:inline;
			}
		.wideBordered .colc_bskt{
			width:90px;
			}
		.wideBordered hr{
			clear:both;
			width:561px;
			margin:5px 10px 5px 10px;
			color:#474848;
			background-color:#474848;
		}

		/* Wide content with 4 internal columns. Mark up the columns as "col4" */
		.wideBordered .col4{
			width:125px;
			margin-right:5px;
			float:left;
			display:inline;
			}
	
	
	/* 3 columns without borders. Mark up the columns as "col3" */
	.col3{
		position:relative;
		width:187px;
		margin:0px 0px 10px 0px;
		float:left;
		display:inline;
		font-size:1.1em;
		font-weight:bold;
		}
		.col3 img{
			margin-bottom:5px;
		}
		.col3 p.price{
			font-size:0.9em;
			font-weight:normal;
			color:#7B7C7C;
			margin-bottom:10px;
		}
		/* We need to pad out any col3 divs inside the main content area */
		#div_contentHolder div.col3{
			margin-right:10px;
		}
		#div_contentHolder div.col3.end{
			margin-right:0px;
		}


/*---------------------------------------------------------------------------*/


/*---------------------------------------------------------- SHOPPING BASKET SUMMARY*/
#div_basketSummary{
	}
	#div_basketSummary a, #div_basketSummary span.left, #div_basketSummary p.saving span, #div_basketSummary p.promocode span{
		float:left;
		width:110px;
	}
	#div_basketSummary b{
		float:right;
	}
	#div_basketSummary p{
		line-height:20px;
		}
		#div_basketSummary p img{
			margin:5px 0px 5px 0px;
		}
		#div_basketSummary p.saving{
			color:#7B7C7C;
			font-weight:bold;
		}
		#div_basketSummary p.promocode{
			color:#FF0000;
			font-weight:bold;
		}
	#div_basketSummary fieldset{
		border:none;
		padding:0px 5px 0px 5px;
	}
	#div_basketSummary fieldset select{
		width:177px;
	}

	#div_deliverySummary fieldset{
		border:none;
		padding:0px 10px 0px 10px;
	}
	#div_deliverySummary fieldset select{
		width:167px;
	}
/*---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------- TEXT */
.small{
	font-size:0.8em;
}
.medium{
	font-size:1.1em;
}
.big{
	font-size:1.3em;
}
.grey{
	color:#7B7C7C;
}
.white{
	color:#FFFFFF;
}
/*---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------- ANCHORS / FORM BUTTONS */
/* link paragraph */
p.link{
	clear:both;
	padding:5px 0px 0px 0px;
	margin:0px;
	cursor:pointer;
}

/* Back button */
a.back{
	display:block;
	height:16px;
	line-height:16px;
	border:1px solid #BD002B;
	color:#BD002B;
	font-weight:bold;
	text-decoration:none;
	background:#000000 url(images/misc/arrowBack_red.gif) 5px 5px no-repeat;
	padding:3px 10px 3px 23px;
	float:left;
	cursor:pointer;
}

/* Grey button */
a.grey{
	display:block;
	height:16px;
	line-height:16px;
	border:1px solid #7B7C7C;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
	background-color:#474848;
	padding:3px 10px 3px 10px;
	float:right;
	width:130px;
	cursor:pointer;
}

/* White button */
a.white{
	display:block;
	height:16px;
	line-height:16px;
	border:1px solid #7B7C7C;
	color:#000000;
	font-weight:bold;
	text-decoration:none;
	background-color:#FFFFFF;
	padding:3px 10px 3px 10px;
	float:right;
	width:130px;
	cursor:pointer;
}

/* Black button */
a.black{
	display:block;
	height:16px;
	line-height:16px;
	border:1px solid #7B7C7C;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
	background-color:#000000;
	padding:3px 10px 3px 10px;
	float:right;
	width:130px;
	cursor:pointer;
}

/* Red button */
a.red{
	display:block;
	height:16px;
	line-height:16px;
	border:1px solid #7B7C7C;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
	background:#BD002B url(images/misc/arrowGo_red.gif) 100% 5px no-repeat;
	padding:3px 23px 3px 10px;
	float:right;
	width:130px;
	cursor:pointer;
}

/* Green button */
a.green{
	display:block;
	height:16px;
	line-height:16px;
	border:1px solid #7B7C7C;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
	background:#339900 url(images/misc/arrowGo_green.gif) 100% 5px no-repeat;
	padding:3px 23px 3px 10px;
	float:right;
	width:130px;
	cursor:pointer;
}

/* Buy button */
a.buy{
	height:16px;
	line-height:16px;
	border:1px solid #7B7C7C;
	color:#FFFFFF;
	font-size:1.1em;
	font-weight:bold;
	text-decoration:none;
	background-color:#BD002B;
	padding:3px 30px 3px 30px;
	cursor:pointer;
}

/* Go! button */
input.go{
	height:24px;
	border:1px solid #7B7C7C;
	text-decoration:none;
	background:#BD002B url(images/misc/arrowGo_red.gif) 100% 5px no-repeat;
	padding:1px 27px 3px 7px;
	text-align:left;
	font-family:Arial, sans-serif;
	font-size:107%;
	font-weight:bold;
	color:#FFFFFF;
	width:160px;
	float:right;
	cursor:pointer;
}
/* Green Go! button */
input.gog{
	height:24px;
	border:1px solid #7B7C7C;
	text-decoration:none;
	background:#339900 url(images/misc/arrowGo_green.gif) 100% 5px no-repeat;
	padding:1px 27px 3px 7px;
	text-align:left;
	font-family:Arial, sans-serif;
	font-size:107%;
	font-weight:bold;
	color:#FFFFFF;
	width:160px;
	float:right;
	cursor:pointer;
}
/* Black button */
input.black{
	height:24px;
	border:1px solid #7B7C7C;
	text-decoration:none;
	background:#000000 url(images/misc/arrowGo_black.gif) 100% 5px no-repeat;
	padding:1px 27px 3px 7px;
	text-align:left;
	font-family:Arial, sans-serif;
	font-size:107%;
	font-weight:bold;
	color:#FFFFFF;
	width:160px;
	float:right;
	cursor:pointer;
}
/* Green button */
input.green{
	height:24px;
	border:1px solid #7B7C7C;
	text-decoration:none;
	background:#339900 url(images/misc/arrowGo_green.gif) 100% 5px no-repeat;
	padding:1px 27px 3px 7px;
	text-align:left;
	font-family:Arial, sans-serif;
	font-size:107%;
	font-weight:bold;
	color:#FFFFFF;
	width:160px;
	float:right;
	cursor:pointer;
}
/*---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------- ADVERTS*/
.img_ad{
	margin:0px 0px 10px 0px;
}
/*---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------- FORMATTING CHEATS*/
.floatLeft{
	float:left;
}
.floatRight{
	float:right;
}
.imageLeft {
	float:left;
}
.imageRight {
	float: right;
}
.left{
	text-align:left;
}
.right{
	text-align:right;
}
.center{
	text-align:center;
}
/*
	Minimum height, can be applied to most things
*/
.minHt{
	height:auto !important;
	height:130px;
	min-height:130px;
}

.minHt2{
	height:auto !important;
	height:260px;
	min-height:260px;
}

.minHt3{
	height:auto !important;
	height:390px;
	min-height:390px;
}
/*---------------------------------------------------------------------------*/

/* errors */

.error{
	color:#FF0000;
}

/*--------------------------------------------------------------------------- UTILITIES */
.hide{
	width:0px !important;
	height:0px !important;
	clear:both;
	line-height:0px;
	font-size:0px;
	display:none;
}
.clr{
	clear:both;
	line-height:0px;
	height:0px;
	font-size:0px;
}
/*---------------------------------------------------------------------------*/