@import url('../libraries/reset.css');
@import url('../libraries/colorbox/colorbox.css');


body, html { height: 100%; }

body {
	background: #538dd1 url(../images/core/bg-content.jpg) center top repeat-y;
	font: 12px/20px Arial, Helvetica, sans-serif;
	color: #3d3d3d;
}

a { color: #db0f20; text-decoration: none; }
a:hover { text-decoration: underline; }


/*-----------------------------------------------------
	main container - STICKY FOOTER
-----------------------------------------------------*/
#container {
	position: relative;
	min-height: 100%;
}

* html #container {
	height: 100%;
}

#wrapper {
	padding-bottom: 196px;
}



/*-----------------------------------------------------
	header
-----------------------------------------------------*/
#header-container {
	background: url(../images/core/bg-header.gif) center top repeat-x;
	height: 116px;
}

#header {
	width: 960px; height: 116px;
	margin: 0 auto;
	position: relative;
}

#header #logo {
	background: url(../images/core/logo.gif) no-repeat;
	width: 330px; height: 60px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	position: absolute;
	top: 37px; left: 0;
}

#header #phone {
	position: absolute;
	right: 15px; top: 15px;
	color: #fff;
	font-size: 18px;
}



/*-----------------------------------------------------
	nav
-----------------------------------------------------*/
#nav {
	position: absolute;
	right: 15px; top: 50px;
}

#nav 	li {
	float: left;
	display: inline;
}

#nav a {
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	background-repeat: no-repeat;
	height: 45px;
}

#nav a:hover, 
#nav a.active { background-position: 0 -45px; }

#nav a#nav-home { background-image: url(../images/nav/home.gif); width: 55px; }
#nav a#nav-road { background-image: url(../images/nav/road.gif); width: 75px; }
#nav a#nav-mountain { background-image: url(../images/nav/mountain.gif); width: 104px; }
#nav a#nav-bmx { background-image: url(../images/nav/bmx.gif); width: 74px; }
#nav a#nav-accessories { background-image: url(../images/nav/accessories.gif); width: 165px; }
#nav a#nav-contact { background-image: url(../images/nav/contact.gif); width: 82px; }



/*-----------------------------------------------------
	slogan
-----------------------------------------------------*/
#slogan {
	width: 960px;
	margin: 0 auto;
	height: 110px;
	text-indent: -9999px;
	background: #538dd1 url(../images/core/slogan.gif) center center no-repeat;
}



/*-----------------------------------------------------
	banner 
-----------------------------------------------------*/
#banner {
	width: 960px; height: 350px;
	padding: 0 9px;
	margin: 0 auto;
	background: #538dd1;
	padding-bottom: 22px;
}

#banner #flash {
	width: 942px; height: 350px;
	background: url(../images/banner.jpg) no-repeat;
}




/*-----------------------------------------------------
	content
-----------------------------------------------------*/
#content {
	background: url(../images/core/bg-content-top.jpg) center top no-repeat;
	width: 960px;
	min-height: 500px;
	margin: 0 auto;
}

* html #content { height: 500px; }

#content #primary {
	float: left;
	display: inline;
	width: 530px;
	margin-left: 45px;
	padding-top: 45px;
}

#content #secondary {
	float: right;	
	display: inline;
	width: 308px;
	margin-right: 45px;
	padding-top: 35px;
}



/*-----------------------------------------------------
	text formatting in primary content area
-----------------------------------------------------*/
#primary h1
#primary h2, 
#primary h3, 
#primary h4 {
	font-weight: normal;
}

#primary h1 { font-size: 20px; }
#primary h2 { font-size: 16px; }
#primary h3 { font-size: 14px; }
#primary h4 { font-size: 12px; font-weight: bold; } 

#primary h1, 
#primary h2, 
#primary h3, 
#primary h4,  
#primary p, 
#primary ul, 
#primary ol, 
#primary hr, 
#primary table { margin-bottom: 25px; }

#primary hr {
	border: 0;
	border-bottom: 1px dotted #555;
	height: 1px;
}

#primary ul, #primary ol {
	margin-left: 35px;
	list-style: disc;
}

#primary ol { list-style: decimal; }




/*-----------------------------------------------------
	form 
-----------------------------------------------------*/
#form h2 {
	color: #fff;
	font-size: 18px;
	font-weight: normal;
	height: 41px; line-height: 41px;
	padding-left: 10px;
	background: url(../images/core/bg-form-heading.gif) no-repeat;
} 

#enquiryform {
	background: #fbfbfb url(../images/core/bg-form.gif) center top repeat-y;
	margin-bottom:20px;
	
}

#enquiryform fieldset {
	background: url(../images/core/bg-form-bottom.gif) center bottom no-repeat;
}

#enquiryform ol { margin: 20px 0 15px 10px; }

#enquiryform li { margin-bottom: 5px; }

#enquiryform label { display: none; }

#enquiryform input.field, 
#enquiryform textarea.field {
	background: url(../images/core/bg-form-input.gif) no-repeat;
	width: 269px; height: 23px;
	color: #999;
	font: 12px/12px Arial, Helvetica, sans-serif;
	padding: 10px 10px 0 10px;
	border: 0;
}
 
#enquiryform textarea.field {
	height: 84px;
	background: url(../images/core/bg-form-textarea.gif) no-repeat;
}



/*-----------------------------------------------------
	contact details
-----------------------------------------------------*/
#secondary #contact ul, #primary #contact ul {
	float: left;
	width: 155px;
	display: inline;
	line-height: 16px;
	margin-top: 30px;
	font-size: 11px;
	list-style: none;
	margin-left: 0;
}

#secondary #contact ul.first { width: 140px; }

#primary #contact ul {
	width: 250px;
	font-size: 12px;
	margin-top: 0;
}
 




/*-----------------------------------------------------
	gallery
-----------------------------------------------------*/
ul.gallery {
	list-style: none !important; 
	margin: 0 !important;
}


ul.gallery li {
	float: left; 
	display: inline;
	margin: 0 15px 15px 0;
}






/*-----------------------------------------------------
	misc
-----------------------------------------------------*/
.note {
	font-size: 11px;
	color: #999;
}



/*-----------------------------------------------------
	footer
-----------------------------------------------------*/
#footer-container {
	position: relative;
	margin-top: -196px;
	height: 196px;
	background: url(../images/core/bg-footer.jpg) center bottom no-repeat;	
} 

#footer {
	position: relative;
	width: 960px; 
	margin: 0 auto;
}

#footer #logos {
	position: absolute;
	left: 153px; top: 45px;
}

#footer li {
	float: left;
	display: inline;
	margin: 0 18px 0 0;
}

#footer #links {
	position: absolute;
	left: 45px; top: 135px;
	line-height: 16px;
}

#footer #links li {
	float: left; 
	display: inline;
	padding: 0 8px;
	margin: 0;
	border-left: 1px solid #aaa;
}

#footer #links li.first { border: 0; }

#footer #links a {
	 color: #777;
}

#footer p {
	position: absolute;
	left: 53px; top: 150px;
	color: #777;
}

#footer a.webfirm {
	position: absolute;
	right: 45px; top: 130px;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	width: 69px; height: 23px;
	background: url(../images/core/webfirm.gif) no-repeat;
}





/*-----------------------------------------------------
	print settings
-----------------------------------------------------*/
.printshow {
	display: none;
}