/* CSS Document */

/*===================MAIN=====================*/


body {
	height: 100%;
	background-color: #333132;
	font: 85%/150% Verdana, Arial, sans-serif;
	color: white; 
	margin: 0px; 
	text-align:center;
	
	}
p {
	font: 1em/185% Verdana, Arial, sans-serif;
	margin: 2px 0 2px 0;
	text-align: left;
	padding: 0px;
	}	
ul {
	list-style: none;
	}
#content ul li {
	font: 1em/160% Verdana, Arial, sans-serif;
	color: white; 
	/*list-style: none;*/
	}
#content ol li {
	font: 1em/170% Verdana, Arial, sans-serif;
	color: #000;
	width: 480px; 
	/*list-style: none;*/
	}

h1 {
	font: 1.85em/140% Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #000;
	text-align: left;
	margin: 0px;
	width: 520px;
	text-indent: -5000px;
	height: 0px;
	}

#accessibility h2{
margin-top:10px;
}
h2 {
	font: 1em/150% Verdana, Arial, sans-serif;
	font-weight: bold;
	color: white;
	margin: 6px 0 0 0;
	text-align: left;
	}
h3 {
	font: 1.25em/135% Verdana, Arial, sans-serif;
	font-weight: bold;
	color: black; 
	margin: 0px;
	text-align: left;
	width: 490px;
	}
h4 {
	font: 1.1em/170% Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #000; 
	margin: 0px;
	text-align: left;
	width: 490px;
	}
.h1-img {
	padding: 0 0 20px 0;
	}
	
/*===================LINKS=====================*/

a:link {
	text-decoration: none; 
	color: red; 
	font-weight: normal;
	}
a:visited {
	text-decoration: none; 
	color: red; 
	font-weight: normal;
	}
a:focus {
	text-decoration: underline; 
	color: red; 
	font-weight: normal;
	}
a:hover {
	text-decoration: underline;
	color: red; 
	font-weight: normal;
	}
		
/*===================LAYOUT=====================*/

#mainwrapper{
	width:100%; 
	background-color:#000000;
	margin:0px;
	pading:0px;
}


#wrapper {
	width: 980px;
	text-align: left;
	vertical-align: top;
	background-color: #000000;
	margin: 0px auto 0 auto;
	background:url(img/riderz-logo.gif) top right no-repeat;
	}
	
#wrapper-riderz {
	width: 980px;
	height: 600px;
	text-align: left;
	vertical-align: top;
	background-color: #000000;
	margin: 0px auto 0 auto;
	background:url(img/riderz-logo.gif) top right no-repeat;
	}
	
#wrapper-flash {
	width: 980px;
	height: 500px;
	margin: 0px auto 20px auto;
	text-align: left;
	vertical-align: top;
	background-color: #000000;
	background:url(img/riderz-logo.gif) top right no-repeat;
	}
	
#content {
	float: left;
	clear: left;
	width: 706px;
	min-height:200px;
	background-color: #000000;
	margin: 100px 0px 0px 0px;
	overflow:visible;

	}
	/* for Internet Explorer bah */
	/*\*/
	* html #content {
	width: 706px;
	height:200px;
	}
	/**/
	
#content-flash {
	float: left;
	clear: left;
	width: 800px;
	min-height: 615px;
	z-index:-4000;
	background-color: #000000;
	margin: 0px;

	}
	/* for Internet Explorer bah */
	/*\*/
	* html #content-flash {
	width: 800px;
	height: 615px;
	}
	/**/	


.notopmargin{
margin: 0px 0px 0px 0px;
}

#content .leftpanel {
	float: left;
	width: 180px;
	margin: 0px;
	height: 555px;
	}
	
#content .rightpanel {
	float: left;
	margin: 70px 0px 0px 0px;
	width:520px;
	}

.whitebacking{
	background:url(img/white-circle-background.gif) no-repeat top left #000;

}

.whitebacking p {
	color:#000;
}

.whitebacking h2 {
	background-position: 0px 2px;
	height: 20px;
	float: left;
	text-indent: -5000px;
	font-size: 1.2em;
	overflow: hidden;
	display: block;
}

.videomenu{
	float:right;
	margin: 0px 80px 0px 0px;
	width:150px;
}

#flash-bg{
	background: url(img/flash-bg.jpg) no-repeat top left;
	float: left;
	clear: left;
	margin: 20px 0px 10px 0px;
	text-align: center;
}

/*H1 IMAGE STYLES*/


.jo{
background:url(img/h1-jo-profile.gif) no-repeat;
height:55px;
}

.otis{
background:url(img/h1-otis-profile.gif) no-repeat;
height:55px;
}

.josh{
background:url(img/h1-josh-profile.gif) no-repeat;
height:55px;
}

.sid{
background:url(img/h1-sid-profile.gif) no-repeat;
height:55px;
}

.zander{
background:url(img/h1-zander-profile.gif) no-repeat;
height:55px;
}



/*H2 IMAGE STYLES*/

.personality{
background:url(img/h2-personality.gif) no-repeat;
width:85px;
}
.from{
background:url(img/h2-from.gif) no-repeat;
width:40px;
}
.type{
background:url(img/h2-type.gif) no-repeat;
width:80px;
}
.favetrick{
background:url(img/h2-favetrick.gif) no-repeat;
width:75px;
}
.favemusic{
background:url(img/h2-favemusic.gif) no-repeat;
width:110px;
}
.favefilm{
background:url(img/h2-favefilm.gif) no-repeat;
width:100px;
}
.favefood{
background:url(img/h2-favefood.gif) no-repeat;
width:100px;
}
.hobbies{
background:url(img/h2-hobbies.gif) no-repeat;
width:50px;
}





#flash {
	float: left;
	clear: left;
	width: 706px;
	height: 272px;
	margin: 0px;
	text-align: center;
	}

#nav{
	width: 270px;
	height: 365px;
	margin: 150px 0 0 0;
	padding: 0px;
	float: right;
	text-align: center;
	vertical-align: top;
	}

#nav-flash{
	width: 180px;
	height: 365px;
	margin: 150px 0 0 0;
	padding: 0px;
	float: right;
	text-align: center;
	vertical-align: top;
	}

#saferscotland {
	background-image: url(img/saferscotland.gif);
	background-position: left;
	background-repeat: no-repeat;
	height: 58px;
	text-align: right; 
	}

#footer {
	background-image: url(img/footerbg.gif);
	background-repeat: no-repeat;
	width: 100%;
	height: 160px;
	text-align: center;
	clear: both;
	float:left;
	}
	
#icons {
	float: left;
	}

.clear {
	clear: both;
	height: 0px;
	}
.hr {
	clear: both;
	height: 20px;
	background-image: url(img/hr.gif);
	background-repeat: repeat-x;
	}
.news {
	margin: 0 10px 0 0;
	width: 520px;
	}
	
ul.news {
	list-style: url(img/news-bullet.gif);
	margin: 0 60px 10px 0px;
	width: 460px;
	border-bottom: 1px solid #CCC;
	}

ul.raquo {
	list-style-image: url(img/raquo-bullet.gif);
	margin: 6px 40px 10px 0px;
	width: 460px;
	vertical-align: middle;
	}
	/* for Internet Explorer */
	/*\*/
	* ul.raquo li {
	list-style-image: none;
	padding: 0px 0px 0px 12px;
	background: url(img/raquo-bullet.gif) 0 0 no-repeat;
	}
	/**/

ul.bullet {
	list-style-image: url(img/bullet.gif);
	margin: 6px 10px 10px 0px;
	vertical-align: middle;
	}
/* for Internet Explorer */
	/*\*/
	* ul.bullet li {
	list-style-image: none;
	padding: 0px 0px 0px 10px;
	background: url(img/bullet.gif) 0 0 no-repeat;
	}
	/**/

	
/*.inline-icon {	
	vertical-align: top;
	padding: 0 8px 0 0;
	}
.small {
	color: #666;
	font: 0.85em/130% Verdana, Arial, sans-serif;
	}
.spacepre {
	margin-top: 18px;
	}*/


/*===================RHS NAV=====================*/

#rhs-nav {
	width: 180px;
	padding: 0px;
	margin: 0px;
	float:right;
	}
#rhs-nav ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
	}
#rhs-nav li {
	display: inline;
	margin: 0px;
	padding: 0px;
	}
#rhs-nav #homelnk {
	background-image: url(img/rhs-nav-home.gif); 
	width: 180px;
	height: 25px;
	}
#rhs-nav #riderzlnk {
	background-image: url(img/rhs-nav-riderz.gif); 
	width: 180px;
	height: 25px;
	}
#rhs-nav #graffitilnk {
	background-image: url(img/rhs-nav-graffiti.gif); 
	width: 180px;
	height: 25px;
	}
#rhs-nav #gamelnk {
	background-image: url(img/rhs-nav-game.gif); 
	width: 180px;
	height: 25px;
	}
#rhs-nav #cyclinglnk {
	background-image: url(img/rhs-nav-cycling.gif); 
	width: 180px;
	height: 25px;
	}


#rhs-nav a {
	background-position: -70px 0px; 
	float: right; 
	text-indent: -5000px; 
	font-size: 0.9em; 
	overflow: hidden;
	display: block;
	}
#rhs-nav a:hover {
	background-position: -70px 25px;
	}

/*===========GET INTO CYCLING=============*/
#cyclingmenu{
	float: left;
	clear: left;
	width: 640px;
	height: 130px;
	margin: 0px;
	text-align: center;
	}
		/* for Internet Explorer bah */
	/*\*/
	* html #cyclingmenu {
	width: 640px;
	height: 130px;
	}
	/**/
	


.menuitem a{
	background-position: 0px 0px;
	height: 128px;
	width: 128px;
	float: left;
	text-indent: -5000px;
	font-size: 0.9em;
	overflow: hidden;
	display: block;
	margin-rigth:8px;
}


.menuitem a:link{
 background-position: 0px 0px;
}
.menuitem  a:visited {
 background-position: 0px 0px;
}
.menuitem  a:hover {
 background-position: 0px -128px;
}
.menuitem  a:active {
 background-position: 0px 0px;
}

.menuitem a:link.on{
 background-position: 0px -128px;
}
.menuitem  a:visited.on {
 background-position: 0px -128px;
}
.menuitem  a:hover.on {
 background-position: 0px -128px;
}
.menuitem  a:active.on {
 background-position: 0px -128px;
}

#toptips{background-image: url(img/menu-toptips.gif)}

#bikeit{background-image: url(img/menu-bikeit.gif)}
#choosing{background-image: url(img/menu-choosing.gif)}
#findingroute{background-image: url(img/menu-finding.gif)}
#win{background-image: url(img/menu-win.gif)}

.on{ background-position: 0px -128px;}



/*===========FOOTER NAV=============*/
	
#footer-nav {
	font: 0.8em/160% Verdana, Arial, sans-serif;
	font-weight: normal;
	color: #FFF;
	padding: 60px 0 0 0;
	margin: 0px auto;
	width: 980px;
	text-align: right;
	}
#footer-nav ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
	text-align: right;
	}
#footer-nav li {
	display: inline;
	margin: 0px;
	padding: 0px;
	}

#footer-nav a {
	font: 1em/120% Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #FFF;
	text-decoration: none; 
	}
#footer-nav a:hover {
	text-decoration: underline;
	}


/*===========CURRENT PAGE CODING FOR TOP NAV=============*/
	
body#home a#homelnk,
body#riderz a#riderzlnk,
body#graffiti a#graffitilnk,
body#game a#gamelnk,
body#cycling a#cyclinglnk,
body#comp a#complnk {
background-position: -70px 25px;
	}
	
/*---------------------------------TABLE & FORM---------------------------------*/

.compentry {
	width: 450px;
	}
.mailform {
	margin: 0px;
	padding: 0px;
	}
	
.label {
	font: 1.2em/100% Tahoma, Helvetica, Arial, sans-serif;
	color: #666;
	margin: 0 0 6px 0;
	padding: 0px;
	}
	
.field {
	width: 250px;
	font: 1.2em/100% Verdana, Helvetica, Arial, sans-serif;
	height: 20px;
	background-color: white;
	border: 2px solid red;
	margin: 0 0 4px 0;
	padding: 0px;
	}
	
.field-error {
	width: 250px;
	height: 20px;
	border: 1px solid red;
	font: 1.2em/100% Verdana, Helvetica, Arial, sans-serif;
	color: red;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	}
	
.area {
	width: 250px;
	font: 1.2em/100% Verdana, Helvetica, Arial, sans-serif;
	background-color: white;
	border: 1px solid #999;
	margin: 0 0 4px 0;
	padding: 0px;
	}
	
	
.floatright{
float:right;
}