/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }


/* BODY */
html { height: 100%; }
body {
	background: #fff url('/images/bg_tile.jpg') repeat top left;
	color: #000;
	font: normal .8em Arial, Helvetica, sans-serif;
	height: 100%;
}

/* IMAGES */
img, a img { border: 0; }
img.png24 { behavior: url('/images/pngfix.htc') }

/* LINKS */
a, a:link, a:visited { color: #f63; text-decoration: none; }
a:hover, a:active { color: #666; text-decoration: none; }

/* TEXT */
p { margin: 1em 0; }
b, strong { font-weight: bold; }
i { font-style: italics; }
em { font-style: italic; }
small { font-size: 0.9em; }

/* HEADERS */
h1 { font-size: 2.5em; }
h2 { font-size: 2.3em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.0em; }

/* LISTS */
ul, ol { list-style: none; }
ul.bulleted li { margin-left: 1.5em; list-style: disc; }
ol.numbered li { margin-left: 2em; list-style: decimal; }

/* FORMS */
form div { margin-bottom: 0.25em; }
form p { margin-bottom: 1em; }

input[type=text], input[type=password], select, textarea {
	border: 1px solid #999;
	padding: 0.2em;
}
input[type=submit] {}
input[type=button] {}

select option { padding-right: 1em; }

fieldset {
	border: 1px solid;
	border-color: #666 #666 #777;
	margin: 1em 0;
	padding: 0.75em;
}
fieldset legend { color: #999; }

/* TABLES */
table tr { vertical-align: top; }
table.midcells tr, table tr.midcells { vertical-align: middle; }
table.padded tr th, table.padded tr td, th.padded, td.padded { padding: 0.2em; }

/* DATA TABLES */
table.data {
	width: 100%;
	border-collapse: collapse;
}
table.data tr th {
	text-align: left;
	border-bottom: 1px solid #333;
	background-color: #666;
	color: #fff;
	font-weight: bold;
}
table.data tr  { vertical-align: top; }
table.data tr td  { }
table.data tr th, table.data tr td { padding: 0.3em; }
table.data tr.odd td { background-color: #eee; }
table.data tr.even td { background-color: #ccc; }


/* UTILITIES */
.clear_both { clear: both; }
.clear_left { clear: left; }
.clear_right { clear: right; }
.float_left { float: left; }
.float_right { float: right; }
.text_center { text-align: center; }
.text_left { text-align: left; }
.text_right { text-align: right; }
.debug { border: 1px solid #0c3; }
.debugbg { background-color: #cfc; color: #000; }

/* NOTICE/ERRORS */
#notice, #error, #errorExplanation {
	margin: 1em 0;
	padding: 1em;
	font-size: 1.5em;
	color: #000;
	z-index: 99;
}
#notice {
	border: 1px solid #0f0;
	background-color: #cfc;
}
#error, #errorExplanation {
	border: 1px solid #f00;
	background-color: #fcc;
}
#notice a.confirm, #error a.confirm {
	float: right;
}

/* ADMIN CODE HELP */
#codehelp {
	clear: both;
	float: right;
	width: 450px;
	margin: 10px 0;
	border: 1px solid #666;
	background-color: #eee;
	padding: 10px;
	color: #333;
	font-size: 10px;
}
span.code { color: #f00; }

.muted { color: #666; }


/* LAYOUT */

/* region selector */
#shadowbox_content { color: #FFF; }
#region_select ul {
  list-style: none;
  margin: 20px auto;
  padding: 0;
  font-size: 1.2em;
  width: 120px;
}


#container_border { width: 990px; min-height:100%; margin: 0 auto; background:url(/images/bg_main_border.png) center repeat-y; }
#container { width: 852px; margin: 0 auto; padding: 0px 45px; background: #fff url(/images/bg_content_white.gif) left repeat; }
#header { height: 70px; position: relative; }
#header #languages { text-align: right; font-size: 0.85em; position: absolute; top:5px; right:0px; }
#header #nav { 
	font-size: 12px; 
	font-weight :bold; 
	position: relative;
	top: 37px;
	text-transform: uppercase;
	z-index: 100;
}
#footer #nav_footer { 
	background: #666;
	border-top: 3px solid #333;
	font-size: 10px; 
	font-weight: bold;
	height: 28px; 
	position: relative;
	text-transform: uppercase;
	z-index: 110;
}
/* new nav styles */
/* remove the list style */
#nav, #nav_footer {
	margin:0; 
	padding:0; 
	list-style:none;
}	
	
	/* make the LI display inline */
	/* it's position relative so that position absolute */
	/* used in submenu */
	#nav li {
		background:#666666 url(/images/nav_bg.gif) repeat-x scroll left top;
		border-bottom:3px solid #333333;
		display:block;
		float:right;
		margin-left:1px;
		padding:0 5px;
		position:relative;
		z-index:500;
	}
	#nav li.wide, #nav li.wide ul.dropdown li {
		/* width: 105px; */
	}
	#nav_footer li {
		border-right: 1px solid #999;
		float: right;
		margin-bottom: 10px;
		margin-top: 5px;
		padding: 0;
		z-index: 500;
	}
	/* this is the parent menu */
	#nav li a { 
		color: #fff; 
		display: block; 
		padding: 10px 5px 0 5px; 
		font-weight:700;  
		height: 21px; 
		text-decoration: none;
		text-align: center; 
	}
  #nav_footer li a { 
		color: #fff; 
		display: block; 
		padding: 2px 10px; 
		font-weight:700; 
		text-decoration: none;
		text-align: center; 
	}
	#nav li a:hover, #nav_footer li a:hover {
		color: #f63;
	}
	#nav li.selected {
		border-bottom: 3px solid #f63;
	}
	#nav_footer li.selected a {
		color: #f63;
	}
	#nav li#skates {
		width: 80px;
	}
	#nav li#accessories {
		width: 95px;
	}

	#nav li.selected ul li a:hover, #nav_footer li.selected ul li a:hover {
		color: #f63;
	}
		/* submenu, it's hidden by default */
		#nav li ul {
			position:absolute; 
			left:0; 
			display:none; 
			margin:0 0 0 -1px; 
			padding:0; 
			list-style:none;
		}
		
		/* display block will make the link fill the whole area of LI */
		#nav li ul a {
			display: block;  
			height: 12px;
			padding: 8px 5px;
		}
		
		#nav li ul a:hover {
			text-decoration: none;	
		}
		#nav li ul.dropdown {
			border-right: 1px solid #fff;
			left: -1px;
			margin-top: 3px;
			position: absolute;
		}
		#nav li ul.dropdown_accy {
			border-right: 1px solid #fff;
			left: -1px;
			margin-top: 3px;
		}
		#nav li ul.dropdown li {
			border-bottom: 1px #fff solid;
			border-top: none;
			border-right: 1px solid #fff;
			border-left: 1px solid #fff;
			font-size: 11px;
			width: 140px;
		}
		#nav li ul.dropdown_accy li {
			border-bottom: 1px #fff solid;
			border-top: none;
			border-right: 1px solid #fff;
			border-left: 1px solid #fff;
			font-size: 11px;
			width: 95px;
		}

/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul, *html #nav_footer ul {
	margin:0 0 0 -2px;
}
#social_icons {
	position: absolute;
	right: -45px;
	text-align: center;
	top: 70px;
	width: 45px;
	z-index: 100;
}
#news_list li {
	 margin-top: 4px; 
	 padding-bottom: 4px; 
	 border-bottom: 1px #ccc solid;
}
#footer { text-align: center; font-size: 0.85em; }

#content { 
	width: 800px; 
	min-height: 400px;
	padding: 25px;
	background-color: #fff; 
	border-left: #ccc 1px solid;
	border-right: #ccc 1px solid;
}
#content #main { float: left; width: 460px; padding-right: 20px; }
#content #side { float: right; width: 320px; }
#content #side .side_hdr { 
	background-color: #f63;
	color: #fff;
	height: 18px;
	padding: 5px 10px;
	text-align: right;
	width: 300px;
}
#content #main #title, .underlined {
	border-bottom: 1px #ccc solid;
}
.underlined {
	margin-bottom: 10px;
}
#content #side .side_hdr #title {
	float: left;
	font-size: 16px;
	font-style: italic;
}
#content #side .side_hdr #title a {
	color: #fff;
}
#content #side .side_content {
	width: 290px; 
	background: #eee url('../images/bg_boxfade.jpg') repeat-x bottom left;
	padding:15px;
}
#banners {
	height: 150px;
}
#banners img {
	float: left;
}
.grayline {
	background-color: #333;
	height: 3px;
	width: 852px;
}

/* DEALERS */

#distributor {float: right;}