/* The Right Gear - Velocipede */
/* Newclear Designs | Nigel Duckworth 
   Fall 2005 */

/* Global Whitespace Reset */ 
* 						{ margin: 0px; padding: 0px; }

/* Layout */ 
html					{ font-size: 100.01%; }
body 					{ font-size: 1em; font-family: georgia, times, serif; font-weight: normal; color: #006; line-height: 1.8; min-width:640px; background-color: #716C87; }
#header,#content,#supp,#footer { overflow:hidden; } /* removed inline-block, was failing validation */
/* safari and opera need this */
#header,#footer { width:100%; clear: both; }
/* safari and opera need this */
#content 			{ width: 70%; float: left; }
* html #content { width: 68%; }
/* Photo Gallery no supp so widen #content. */
.Photos #content			{ width: 96%; }
* html .Photos #content			{ width: 96%; }
#supp					{ width: 28%; float: right; background: none; }
* html #supp	{ width: 28%; }
#supp div			{ padding-left: 10px; padding-right: 20px; }
#supp p.first { margin-top: 300px; }
#footer 			{ clear:left; }
div.clearer 	{ clear: both; background: transparent; font-size: 1px; line-height: 1px; height: 1px; }

/* Gfx */ 
body					{ color: #666666; font-family: georgia,times,serif; background-color: #716C87; background-image: none; }
#wrap1				{ width: 760px; margin: 0 auto; background: #EEE8D8 url(../webgfx/velocipede/bg_wrap1-left.gif) top left repeat-y; }
#wrap2				{ width: 760px; margin: 0 auto; background: url(../webgfx/velocipede/bg_wrap2-right.gif) top right repeat-y; }
#theme				{ height: 20px; color: #CCCCCC; text-align: center; }
#theme ul			{ height: 2em; }
#theme a			{ color: #CCCCCC; margin:10px; }
#theme a:hover { color: #FF9900; }
.Home #header 	{ height: 370px; background: #EEE8D8 url(../webgfx/velocipede/banner1.jpg) top right no-repeat; }
.Products #header { height: 259px; background: #EEE8D8 url(../webgfx/velocipede/banner-sec.jpg) top right no-repeat; }
.Services #header { height: 259px; background: #EEE8D8 url(../webgfx/velocipede/banner-sec.jpg) top right no-repeat; }
.Journal #header { height: 259px; background: #EEE8D8 url(../webgfx/velocipede/banner-sec.jpg) top right no-repeat; }
.News #header { height: 259px; background: #EEE8D8 url(../webgfx/velocipede/banner-sec.jpg) top right no-repeat; }
.Company #header { height: 259px; background: #EEE8D8 url(../webgfx/velocipede/banner-sec.jpg) top right no-repeat; }
.Photos #header { height: 259px; background: #EEE8D8 url(../webgfx/velocipede/banner-sec.jpg) top right no-repeat; }
.Themes #header { height: 259px; background: #EEE8D8 url(../webgfx/velocipede/banner-sec.jpg) top right no-repeat; }
.Site #header { height: 259px; background: #EEE8D8 url(../webgfx/velocipede/banner-sec.jpg) top right no-repeat; }



/* Navigation (based on Son of Suckerfish) */
#navcontainer { width: 100%; height: 1.5em; display: block; background: #006; } /* ND Addition */
#navcontainer #nav, #navcontainer #nav * { margin: 0px; padding: 0px; padding-left: 0px; border: none; color: #EEE; z-index: 99; line-height: 1.5; background: transparent; } /* clear residual styles */
#nav, #nav ul { /* all lists */
	padding: 0;
	margin-top: .5em;
	list-style: none;
	line-height: 1.2;
	background: #006;
}
/* Add padding to the subnav - ND Addition */
#nav ul ul { padding: 5px; }
#nav li li { width: 12em; font-size: 1em; border-bottom: 1px solid #000; clear: left; white-space: nowrap; padding: 1em; padding-left: 10px; }

#nav a {
	display: block;
	width: 6em; /* Was 8em. */
	color: #CCC;
	font-size: .8em; 
	text-decoration: none;
	text-transform: uppercase;
	padding-top: 5px; /* Add space around the menu links - ND Addition */
	vertical-align: center;
	text-align: center;
}
#nav li { /* all list items */
	float: left;
	width: 6em; /* Width needed or else Opera goes nuts. Was 7em. */
}
#nav li ul { /* second-level lists */
	position: absolute;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
/* ND Addition - sub nav bg */
#navcontainer #nav ul li { background: #ABA7BF; }
/* ND Addition - */
#nav ul ul a { font-size: .8em; }

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
	padding: .2em;
}


/* Nav Trail */
.navtrail a { color: #F90; }
.navtrail a:hover { #000; text-decoration: none; }

#content			{ background: transparent; }
.pad					{ padding-left: 40px; padding-right: 20px; }



/* Home - IR */
h1#hdrhome 			{ height: 60px; font-size: 3em; text-indent: -9999px; color: #716C87; background: url(../webgfx/velocipede/ir/hdr_h1-home.gif) no-repeat; }
.Home h1.subtitle { font-size: 1.2em; color: #666; text-transform: uppercase; font-weight: bold; margin-top: .2em; margin-bottom: 2em; }

/* Secondary - cycling.php and /news/index.php */
h1.hdrpage		{ 
	font: 2.8em/1em georgia, Times, serif;
	font-weight: bold;
	color: #666;
	text-transform: uppercase;
	letter-spacing: -3px; 
	margin:0;
	position: relative;
	overflow: hidden;
	float: left;
	/* 	Added width: 100% Makes hdrpage spread all the way across and solves 
			clearing issues on journal/day.php, but also spreads the layer gfx 
			in roubaix which looks a little rectangular, not random enough. 
			Probably can fix by playing with the psd. -ND
	*/
	width: 100%; 
}
h1.hdrpage span {
	position: absolute;
	width: 100%;
	height: 1.2em;
	background: url(../webgfx/velocipede/ir/wear4b.gif) 100% 50%; /* wear4.gif - is a good one */
}
h2 { clear: left; } /* Stops intro from wrapping under h1 caused by .hdrpage */
p { clear: left; } /* Stops intro from wrapping under h1 and h2 caused by .hdrpage */
p.intro { clear: none; } /* Stops intro from wrapping under h1 and h2 caused by .hdrpage */
.News p.intro { clear: left; margin-top: 1em; margin-bottom: 1em; } /* Stops intro from wrapping under h1 and h2 caused by .hdrpage */

.Home #content-1 h2, .Home #content-2 h2 { margin-top: 1em; }

#content-1		{ width: 48%; float: left; clear: both; background: transparent; }
#content-2		{ width: 48%; float: right; background: transparent; }
/* IE 5.5 Win Hack */
* html #content-1 { width: 45%; display: inline; }
* html #content-2 { width: 45%; display: inline; }

hr.spacer			{ margin-top: 1.5em; margin-bottom: 1.5em; }

/* Journal */
h2.h2dec { font-size: 1em; font-weight: bold; font-style: normal; text-transform: uppercase; text-align: center; padding-bottom: 1em; background: url(../webgfx/velocipede/bg_h2c.gif) 50% 90% no-repeat; }
.itemjournal { margin-top: 1em; border-bottom: 1px solid #C2B395; margin-top: .5em; padding-top: .5em; }
h1.hdrTitle	{
	font-size: 1.8em;
	color: #716C87;
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	line-height: 1;
	background: none;
}

h1.hdrTitle a {
	color: #716C87;
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	line-height: 1;
	background: none;
}
h1.hdrTitle a:hover {
	color: #716C87;
	text-decoration: underline;
	background: none;
	clear: both;
}
h2.hdrTopic { display: inline; clear: left; margin-top: 3em; }
h2.hdrDate { display: inline; font-size: .8em; font-weight: bold; font-style: normal; text-transform: uppercase; margin-top: 2em; background: none; }
h2.hdrTopic a { font-size: .4em; font-weight: bold; text-transform: uppercase; color: #666; margin-top: 2em; padding-right: 5px; margin-right: 5px; border-right: 1px solid #666; background: none; }

/* News (Third Party) */
.itemnews { border-bottom: 1px solid #C2B395; margin-top: .5em; padding-top: .5em; }
#content-2 h1 { margin-top: .2em; padding-bottom: .2em; border-bottom: 1px solid #CCC; line-height: .4; }
#content-2 h1.hdrTitle a {
	color: #716C87;
	font-size: .6em;
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	background: none;
}
#content-2 h1.hdrTitle a:hover {
	text-decoration: underline;
	background: none;
}
#content-2 h2.hdrDate { font-size: .7em; font-weight: bold; text-transform: uppercase; background: none; }


/* Sup News - Topics and Archive Calendar */
/* Nav Journal */
#navjournal		{ margin-top: 0em; padding-top: 140px; background: url(../webgfx/velocipede/bg_sup-journal.gif) 0px 40px no-repeat; }
#navjournal h1 { font-size: 1em; text-transform: uppercase; }
#navjournal ul { margin-left: 16px; padding-left: 0px; }
#tblarchive { padding: 2px; margin: 0; border: none; }
#tblarchive th { color: #CCC; background: #716C87; line-height: .8; padding-top: 3px; padding-bottom: 6px; }
#tblarchive th a { font-size: 1.4em; color: #EEE; text-decoration: none; }

#journalarticles { line-height: 1.2; }

.Journal #supp { background: none; } /* Hide POWRFIT promo */ 
.News #supp { background: none; } /* Hide POWRFIT promo */
.Photos #supp { background: none; } /* Hide POWRFIT promo */

#supp					{ background: url(../webgfx/velocipede/bg_powrfit.gif) no-repeat; margin-bottom: 50px; }
#supp h1#first { margin-top: 280px; } /* Space for POWRFIT gfx. */
#supp h1 			{ font-size: .8em; font-weight: bold; text-align: center; text-transform: uppercase; color: #716C87; margin-top: 3em; border-top: 1px solid #999; border-bottom: 1px solid #666; }
#supp p.first	{ font-size: .8em; font-weight: bold; color: #333; margin-top: 140px; } /* POWRFIT copy */
#supp p				{ font-size: .8em; color: #666; margin-top: 5px; }

p							{ margin-top: 1em; margin-bottom: .5em; }

a							{ color: #333; background: none;; text-decoration: underline; }
a:hover				{ color: #F90; background: none; text-decoration: none; }
a.linkPointer	{ font-size: 11px; font-weight: bold; color: #F90; text-decoration: none; text-transform: uppercase; padding-top: .2em; padding-bottom: .1em; padding-left: 45px; background: url(../webgfx/velocipede/ico_link.gif) no-repeat; }
a.linkPointer:hover { background-position: 8px; }

#network 					{ width: 100%; float: left; clear: both; padding-top: 1em; margin-top: 4em; margin-bottom: 2em; }
#network h1 			{ font-size: 24px; font-weight: bold; padding-top: 10px; border-top: 4px solid #444; margin-top: 2em; }
#col1 						{ float: left; width: 45% clear: both; }
#col2 						{ float: right; width: 45% clear: both; }
#network #col1 h1, #network #col2 h1 { border: none; margin: 0; padding: 0; }
#network #col1 h1 a, #network #col2 h1 a { font-weight: bold; font-size: 18px; color: #627081; }
#network h1 a:hover { text-decoration: underline; }
#network a				{ font-size: 12px; }
#network a:hover { text-decoration: underline; }

#footer				{ width: 100%; height: 235px; color: #333; clear: both; padding-top: 0px; margin-top: 30px; background: url(../webgfx/velocipede/bg_footer.jpg) no-repeat; }
#footer h3		{ margin-top: .5em; margin-bottom: 0em; }
#footer p			{ margin-top: .2em; margin-bottom: .2em; }
#footer li		{ display: inline; color: #333; padding-right: 10px; border-right: 1px solid #999; margin-right: 5px; line-height: 1.2; }
#footer a			{ color: #009; font-size: .8em; text-transform: uppercase; text-decoration: none; }
#footer a:hover { color: #F90; }
#footer ul.sitelinks { margin-left: 30px; margin-top: 60px; font-weight: bold; }
#footer ul.themes { margin-left: 30px; margin-top: 5px; }
#footer div.credits { margin-left: 30px; margin-top: 5px; }
#footer .pad 	{ padding-top: 0px; padding-bottom: 0px; }

.navtrail			{ font-size: 10px; text-transform: uppercase; }

h2, h3, h4		{ margin-top: 0; margin-bottom: .5em; line-height: 1; }
h1, h2, h3, h4 { font-weight: normal; font-style: normal; }
/* h2 used below page hdr */
h2						{  }
/* h3 used as a general header in the body of the page */
h3	{ color: #716C87; margin-top: 1.5em; margin-bottom: .2em; }
/* h4 */
h4	{ margin-top: 1.5em; margin-bottom: .2em; }

.intro				{ font-size: 1.2em; line-height: 1.8em; color: #716C87; font-weight: normal; margin: 0px; padding: 0px; }
#introgfx			{ width: 95px; height: 131px; float: left; margin: 10px 20px 5px 0px; background: url(../webgfx/velocipede/bg_introgfx.jpg) no-repeat; }

/* Related [at the bottom of the page] */
hr						{ height: 1px; margin-top: 20px; margin-bottom: 20px; }
#content ul		{ margin-left: 3em; }

/* Forms */
fieldset			{ border: 1px solid #AAA085; padding: 10px; margin-top: 0em; margin-bottom: 2em; }
legend				{ font-size: .8em; font-weight: bold; text-transform: uppercase; color: #716C87; margin-left: 10px; margin-right: 10px; }
fieldset p		{ font-size: .8em; }
#searchphotos { background: none; }

/* Photo/Caption Layout - Staff Bios */
#staff						{ width: 480px; float: left; padding: 0px; border: none; } /* floated to contain it's inner floats */
#staff dl 				{ width: 480px; float: left; margin: 20px 20px; margin-left: 0; margin-right: 0; display: inline; padding: 0; } /* floated to contain it's inner floats, display: inline for IE/Win double margin bug */
#staff dt					{ width: 262px; float: right; font-size: 1.6em; line-height: 1.2; letter-spacing: -2px; color: #627081; } 
* html #staff dt 	{ width: 262px; } /* IE5 should be 350 as 8px (4px + 4px) padding already taken in to account by IE */
#staff dd					{ font-size: .8em; line-height: 1.5; color: #777; margin: 0 0 0 218px; }
#staff dl dd.img 	{ margin: 0; }
#staff dd.img img { float: left; margin: 0 8px 0 0; padding: 4px; border: 1px solid #CCC; border-bottom-color: #999; border-right-color: #999; background: #FEF7ED; } /* margin-right: 20px; for gutter */
#staff p					{ clear: none; }	/* undoes the p clearing to clear hdrPage */
/* reverse direction of float */
#staff .alt dt		{ float: left; } 
#staff .alt dd 		{ margin: 0 218px 0 0; }
#staff .alt dd.img img { float: right; margin: 0 0 0 8px; }

/* Tools */
.dev					{ text-indent: -9999px; }
/*  
div { border: 1px solid #F00; }
  */