/*Submitted by Hans Dusink, Curtin Univesity student 14220656 NED12 -
	Advanced Internet Design - SP3 2009 Assessment 3 - Final Web Site
	(50%) - due 27 November 2009 */


	/*According to Andrew Krespanis (2004) every browser has a slightly
	different default when it comes to margins and padding. This piece of code
	resets all margins and padding to 0*/

	*{ 
	margin: 0; 
	padding: 0; 
	}
	
	
	/*This section sets the css rules for highlighting the current page in the navigation.
	This set the text color to the same as the background, stopping users from selecting for
	example the Home page, when actually at the home page*/

	body#home a#indexnav,
	body#newsletters a#newslettersnav,
	body#aboutus a#aboutusnav,
	body#executive a#executivenav,
	body#rmhistory a#rmhistorynav
	body#rmhistory2 a#rmhistory2nav,
	body#calendar a#calendarnav,
	body#homologations a#homologationsnav,
	body#homologations2011 a#homologations2011nav,
	body#homologations2008 a#homologations2008nav,
	body#homologations2007 a#homologations2007nav,
	body#administration a#adminnav,
	body#constitution a#constitutionnav,
	body#regulations a#regulationsnav,
	body#countrylinks a#countrylinksnav,
	body#contactus a#contactusnav {
	color:#84a373;
	
	}
	
	
/*------------------------------------------------------------------------------------------------*/	
	/* Default styles for the entire web page*/
	
	body {
    font-family:verdana,sans-serif;  
	font-size:85%;/*default font size is set at 16 pixels in most browsers.(Castro p157)*/
	line-height:1.25; /* gives text a better readability*/
	color:black;
	background-color:/*#01ffff*/#3aefef;
	margin: 0 auto; /* ensures that content shows in the center of browser windows*/
	width: 990px; /*designed for a fixed width display. More info in PDF document*/
	}
	
	abbr { /*when the cursor hovers over an acronym, it displays a question mark*/
	border-bottom: 1px dotted; 
	cursor:help; 
	}
	
	h1{
	margin:1.5em;
	margin-left:150px;
	}
	
	h2{
	margin-left:75px;
	}
	
	h3 {
	margin-left:75px;
	margin-bottom:1em;
	}
	
	p {
	margin-left:75px;
	margin-right:50px;
	margin-bottom:1.0em;
	}
	
	p.introduction{
	color:#006600;
	font-size:85%;
	margin-bottom:1em;
	font-weight:bold;
	}

	p.footnote{
	color:#006600;
	font-size:85%;
	margin-top:.5em;
	margin-bottom:1em;
	}

	p.caption {
	margin-left:185px;
	margin-bottom:1em;
	font-size:90%;
	}
	p.captiondesc {
	margin-left:150px;
	margin-bottom:0px;
	font-size:85%;
	}

	p.captiondesc1{
	margin-left:110px;
	margin-bottom:0px;
	font-size:85%;
	}
	p.captiondesc2{
	margin-left:320px;
	margin-bottom:0px;
	font-size:85%;
	}

	p.captiondesc3 {
	margin-left:300px;
	font-size:65%;
	margin-top:0px;
	}
	ul{
	list-style:none;
	margin-left:75px;
	margin-bottom:20px;
	}

	img {
	margin-left:92px;
	margin-bottom:2px;
	}

	.photogroup img{
	margin-left:92px;
	}

	#photoduo img {
	margin-left: 120px;
	}
	
	#photoduo2 img {
	margin-left: 120px;
	}
	
	#photoduo3 img {
	margin-left: 120px;
	}

	.caption1 {
	margin-left:130px;
	}

	.caption2 {
	margin-left:280px;
	}

	#phototriple img {
	margin-left:50px;
	}

	.caption3 {
	margin-left:40px;
	}

	.caption4 {
	margin-left:170px;
	}

	.caption5 {
	margin-left:200px;
	}
	
	.caption6 {
	margin-left:110px;
	}

	.caption7 {
	margin-left:260px;
	}

	.caption8 {
	margin-left:100px;
	}

	.caption9 {
	margin-left:210px;
	}

	.lrm {
	color:red;
	font-family:georgia,serif;
	font-weight:bold;
	}

	


	/*create the General rules for link decoration and color in various states refer Castro Page 146*/
	a:link {
	text-decoration:none;
	color:black;
	}

	a:visited {
	text-decoration:none;
	color:#808000;
	}

	a:hover { 
	text-decoration:none;
	color:/*white;*/#008080;
	}
	
	a:active { 
	text-decoration:none;
	color:/*white;*/#008080;
	}	
	/*--------------------------------------------------------------------------------------------*/
	
	#language img {
	margin-left:900px; 
	}
	
	
	#navigation{  /* this is actually the menu for the site. I have placed to to the right
				of the main body of the page. */
	
	float:right;
	/*left:660px;*/
	width:250px;
	height:440px;
	border-top:solid 5px;
	border-color:black;
	text-align:center;
	}
	
	#nav { /*styling for the unordered list*/
	margin:1em auto; /*sets top margin and centers the list in navigation block*/
	padding:0;
	width:175px;
	font-size:1em;
	list-style:none;
	}
	/*Reverse engineers the newslist box from 456BereaStreet. See PDF for details*/	
	#nav li {  
	background:url("images/sqmenubutton.gif")0 100% no-repeat; /* positions the image */
  	display:block; /*displays each element in a new paragraph*/
  	padding:0 0 4px 0;
    margin: 8px 0 0 0 ; /*sets margin between list items*/
	position:relative; /*creates the environment to display the flyout menu in absolute positon*/
	}
	
	
	#nav h4 {
	font-size:1em;
	line-height:1em;
	font-weight:bold;
	background:url("images/sqmenubutton.gif") 0 0 no-repeat;
	margin:0;
	padding: 10px 5px 5px 10px;
	}

	
	#nav li ul { /* hides the sub menu when in link mode*/
	display:none;
	position:absolute;
	top:0;
	right:100%;
	}
	

	#nav li:hover ul { /*displays the submenu when their is a mouse over event*/
	display:block;
	clear:left;
	}
	
	



	/*Specific Division Characteristics*/
	#wrap {
	position:relative;/*set to relative to qualify to house absolute positioned items*/
	}
	
	#header {
	height:220px;
	background: url(images/rmlogo.jpg) no-repeat;
	}
	
	
	#pageheader {
	/*The text has been embeded into the image however inorder that users of screen
	readers can still acess the site I have "hidden" the actual text.
	refer Phark method by Rundle (2003)*/
	position:absolute;
	text-indent:-5000px;
	}
	
	
	/*styling of the main section of the home page. */	
	#main {
	float:left;
	width:740px;
	border-top:solid 5px;
	border-color:black;
	background:url(images/blankworldmap1.jpg) repeat-y;
	background-color:white;
	}
	
	
	#newslettermain {
	float:left;
	width:740px;
	border-top:solid 5px;
	border-color:black;
	background:url(images/blankworldmap1.jpg) repeat-y;
	background-color:white;
	}


	#letterheadtop img{
	margin-left:20px;
	}

	#letterheadbottom img{
	margin-left:0px;
	margin-bottom:-3px;/*I was having a problem with a 3 px band . The only way I could ensure
	no aqua background came through was to have a negative bottom margin.*/
	}


	#administrationmain {
	float:left;
	width:740px;
	border-top:solid 5px;
	border-color:black;
	background:url(images/blankworldmap1.jpg) repeat-y;
	background-color:white;
	}
	
	#administrationmain h1 {
	margin-left:75px;
	margin-bottom: 2px;
	}
			
	#administrationmain ul {
	list-style-image:url(images/rightarrow.gif);
	margin-left:150px;
	margin-right:75px;
	margin-top:.5em;
	margin-bottom:.5em;
	}


	
	
	#homologationsmain {
	float:left;
	width:740px;
	border-top:solid 5px;
	border-color:black;
	background:url(images/homologationsbackground.jpg) repeat-y;
	color:yellow;
	}
	#homologationsmain img { /*This image contains the detail of the Presidency*/
	margin-left:0px;
	}
	
	#homologationsmain p {
	margin-left:75px;
	margin-right:50px;
	margin-bottom:1.0em;
	}
	
	
	table { /* this table is used to display the ride results. tables are designed  for just
	this sort oof display. Tables take a lot of work to set up, but they efficiently display 
	the data.*/
	width:680px;
	text-align:left;
	margin:auto; /*centers the table on the horizontal axis*/
	margin-top: 5px;
	margin-bottom:15px;
	border-collapse:collapse;
	}
	 table td {
	 width: 25px;
	 }
	
	
	/*create a hover state on mouseover event. As suggested by R.Christie 13/8/2008
	in Smashing Magazine*/
	table tbody tr:hover td {
	background:black;
	}
	
	.ridedetail{ /*styles the heading above ech section of ride results*/
	font-weight:bold;
	font-size:1.1em;
	margin-top:50px;
	margin-left:60px;
	margin-bottom:20px;
	white-space:pre;
	font-family:arial;
	}

/* Styling for the executive page*/ 
   #executivemain {
    float:left;
	width:740px;
	border-top:solid 5px;
	border-color:black;
	background:url(images/blankworldmap1.jpg) repeat-y;
	background-color:white;
	}

   #presphoto {
   clear:both;
   float:left;
   width:220px;
   margin-top:15px;
   margin-bottom:25px;
}
   #presaddress ul{
   float:right;
   margin-right:150px;
   margin-top:50px;
   margin-bottom:25px;
   width:250px;
   list-style:none;
}
  
  .exec {
  font-weight:bold;
  }



   #vpresphoto{
	clear:both;
	float:left;
	width:220px;
	margin-bottom:25px;
	}

	#vpresaddress ul{
	float:right;
	margin-right:150px;
	margin-top:50px;
	width:250px;
	list-style:none;
	}

	#treasaddress ul{
	clear:both;
	float:left;
	width:250px;
	margin-top:50px;
	margin-bottom:25px;
	margin-left:175px;
	list-style:none;
	}
	

	


	/*Style the Country links page.I have created a division for each country. For each country 
	I have created a heading and an unordered list. I have also left space for a logo. Even though
	each country does not have a logo, I have created an img line for future use*/ 


	.club {/* used to bold the club name and if required the position of other representatives 
	example :responsible BRM:*/
	font-weight:bold;
	margin-right:100px;
	}
	
	
	#southafrica img{float:right;margin-top:25px;margin-left:40px;}
	#southafrica ul{float:left;width:45%;}
	#southafrica h2{margin-bottom:10px;margin-left:300px;}

	#germany img{clear:both;float:right;margin-top:25px;margin-left:40px;}
	#germany ul{clear:both;float:left;width:45%;}
	#germany h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#australia img{float:right;margin-top:25px;margin-left:40px;margin-right:55px;}
	#australia ul{float:left;width:45%;}
	#australia h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#austria img{clear:both;float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#austria ul{float:left;width:45%;margin-top:20px;}
	#austria h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#belgium img{float:right;margin-top:25px;margin-left:40px;margin-right:55px;}
	#belgium ul{float:left;width:45%;}
	#belgium h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#brazil img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#brazil ul{float:left;width:45%;}
	#brazil h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#bulgaria img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#bulgaria ul{clear:both;float:left;width:45%;}
	#bulgaria h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#canada h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#britishcolumbia img{float:right;margin-top:15px;margin-left:40px;margin-right:55px;}
	#britishcolumbia ul{float:left;width:45%;margin-top:20px;}
	#britishcolumbia h3{clear:both;margin-bottom:10px;margin-left:300px;}

	#montreal img{float:right;margin-top:15px;margin-left:40px;margin-right:55px;}
	#montreal ul{float:left;width:45%;margin-top:50px;}
	#montreal h3{clear:both;margin-bottom:10px;margin-left:300px;}

	#manitoba img{float:right;margin-top:15px;margin-left:40px;margin-right:55px;}
	#manitoba ul{float:left;width:45%;}
	#manitoba h3{clear:both;margin-bottom:10px;margin-left:300px;}

	#prairie img{float:right;margin-top:15px;margin-left:40px;margin-right:55px;}
	#prairie ul{float:left;width:45%;}
	#prairie h3{clear:both;margin-bottom:10px;margin-left:300px;}

	#alberta img{float:right;margin-top:15px;margin-left:40px;margin-right:55px;}
	#alberta ul{float:left;width:45%;margin-top:40px;}
	#alberta h3{clear:both;margin-bottom:10px;margin-left:300px;}

	#prairie img{float:right;margin-top:15px;margin-left:40px;margin-right:55px;}
	#prairie ul{float:left;width:45%;margin-right:55px;}
	#prairie h3{clear:both;margin-bottom:10px;margin-left:300px;}

	#ontario img{float:right;margin-top:15px;margin-left:40px;margin-right:55px;}
	#ontario ul{float:left;width:45%;margin-top:10px;}
	#ontario h3{clear:both;margin-bottom:10px;margin-left:300px;}

	#novascotia img{float:right;margin-top:15px;margin-left:40px;margin-right:55px;}
	#novascotia ul{float:left;width:45%;}
	#novascotia h3{clear:both;margin-bottom:10px;margin-left:300px;}


	#chile img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#chile ul{float:left;width:45%;}
	#chile h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#china img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#china ul{float:left;width:45%;}
	#china h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#southkorea img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#southkorea ul{float:left;width:45%;}
	#southkorea h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#croatia img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#croatia ul{float:left;width:45%;}
	#croatia h2{clear:both;margin-bottom:10px;margin-left:40px;margin-left:300px;}

	#denmark img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#denmark ul{float:left;width:45%;}
	#denmark h2{clear:both;margin-bottom:10px;margin-left:40px;margin-left:300px;}

	#spain img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#spain ul{float:left;width:45%;}
	#spain h2{clear:both;margin-bottom:10px;margin-left:40px;margin-left:300px;}

	#finland img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#finland ul{float:left;width:45%;}
	#finland h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#greece img{float:right;margin-top:35px;margin-left:40px;margin-right:55px;}
	#greece ul{float:left;width:45%;margin-top:40px;}
	#greece h2{clear:both;margin-bottom:10px;margin-left:40px;margin-left:300px;}

	#hungary img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#hungary ul{float:left;width:45%;}
	#hungary h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#india img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#india ul{float:left;width:45%;}
	#india h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#ireland img{float:right;margin-top:15px;margin-left:40px;margin-right:55px;}
	#ireland ul{float:left;width:45%;margin-top:30px;}
	#ireland h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#israel img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#israel ul{float:left;width:45%;}
	#israel h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#italy img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#italy ul{float:left;width:45%;}
	#italy h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#japan img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#japan ul{clear:both;float:left;width:45%;}
	#japan h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#luxumburg img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#luxumburg ul{float:left;width:45%;}
	#luxumburg h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#norway img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#norway ul{float:left;width:45%;}
	#norway h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#newzealand img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#newzealand ul{float:left;width:45%;}
	#newzealand h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#netherlands img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#netherlands ul{float:left;width:45%;}
	#netherlands h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#poland img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#poland ul{float:left;width:45%;}
	#poland h2{clear:both;margin-bottom:10px;margin-left:300px;}


	#UK img{float:right;margin-top:45px;margin-left:40px;margin-right:55px;}
	#UK ul{float:left;width:45%;}
	#UK h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#russia img{clear:both;float:right;margin-top:20px;margin-left:40px;margin-right:55px;}
	#russia ul{clear:both;float:left;width:45%;}
	#russia h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#singapore img{float:right;margin-top:20px;margin-left:40px;margin-right:55px;}
	#singapore ul{float:left;width:45%;}
	#singapore h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#slovenia img{clear:both;float:right;margin-top:20px;margin-left:40px;margin-right:55px;}
	#slovenia ul{clear:both;float:left;width:45%;}
	#slovenia h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#sweden img{clear:both;float:right;margin-top:20px;margin-left:40px;margin-right:55px;}
	#sweden ul{clear:both;float:left;width:45%;}
	#sweden h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#switzerland img{clear:both;float:right;margin-top:20px;margin-left:40px;margin-right:55px;}
	#switzerland ul{clear:both;float:left;width:45%;}
	#switzerland h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#taiwan img{float:right;margin-top:20px;margin-left:40px;margin-right:55px;}
	#taiwan ul{float:left;width:45%;}
	#taiwan h2{clear:both;margin-bottom:10px;margin-left:40px;margin-left:300px;}

	#ukraine img{float:right;margin-top:20px;margin-left:40px;margin-right:55px;}
	#ukraine ul{float:left;width:45%;}
	#ukraine h2{clear:both;margin-bottom:10px;margin-left:300px;}

	#USA img{float:right;margin-top:50px;margin-left:40px;margin-right:55px;}
	#USA ul{float:left;width:45%;}
    #USA h2{clear:both;margin-bottom:10px;margin-left:300px;}

/* Finish of Country link styling-----------------------------------------------------------*/

/*Styling for the contact form. See pdf for methodology*/
#form {
font-family:verdana,sans-serif;
margin: 0 0 1em 0;
}

#form p {
margin-bottom:-1em;
}

fieldset {
width:33em;
margin-bottom:1em;
margin-left:10em;
padding-top:1.5em;
background:#84a373;
}

p.legend {
background:#acacac;
color:black;
border:2px outset #acacac;
padding:.2em .3em;
font-size:1.1em;
position:relative;
margin: 1em 0 -1em 10em;
width:12em;
}

input {
margin-left:160px;
margin-bottom:.2em;
line-height:1.4em;
}

#personal label {
position:absolute;
font-size:90%;
color:white;
padding-top:1px;
margin-left:20px;
}

textarea {
font:.8em serif;
margin-left:50px;
margin-bottom:1em;
width:35em;
padding:.2em;
}
buttons {
text-align:left;
}
/*Finish Styling for contact form--------------------------------------------------------*/

/*Formatting for calendar page. I have created a div for each month that a ride is held.  If a ride
has a logo associated with it I have styled both the img and ul. All other rides only require
a ul to be styled*/
#november h2{margin-top:10px;margin-left:150px;}
#february h2{clear:both;margin-top:10px;margin-left:150px;}
#march h2{margin-top:10px;margin-left:150px;}
#june h2{margin-top:10px;margin-left:150px;}
#july h2{clear:both;margin-top:10px;margin-left:150px;}
#august h2{margin-top:10px;margin-left:150px;}
#september h2{margin-top:10px;margin-left:150px;}
#october h2{clear:both; margin-top:10px;margin-left:150px;}



#smalpine img{
float:right;
margin-top:10px;
margin-bottom:20px;
margin-right:75px;
margin-left:50px;
}
#smalpine ul {
float:left;
width:45%;
margin-top:50px;
}

#shenandoah img{
float:right;
margin-top:10px;
margin-bottom:20px;
margin-right:75px;
margin-left:50px
}
#shenandoah ul {
float:left;
margin-top:25px;
width:45%;
}


#balticstar1 {
clear:both
}

#svs h2 {
clear:both;
}

#svs ul {
float:left;
margin-top:25px;
width:45%;
}




#cascade h2{
clear:both;
}

#cascade img{
float:right;
margin-top:10px;
margin-bottom:20px;
margin-right:75px;
margin-left:50px
}
#cascade ul {
float:left;
margin-top:25px;
width:45%;
}

#miglia img{
float:right;
margin-top:10px;
margin-bottom:20px;
margin-right:75px;
margin-left:50px
}
#miglia ul {
float:left;
margin-top:25px;
width:45%;
}

#sura {
clear:both;
}

#lastchance img{
float:right;
margin-top:10px;
margin-bottom:20px;
margin-right:75px;
margin-left:50px;
}
#lastchance ul {
float:left;
margin-top:25px;
width:45%;
}

#hmh ul{margin-top:20px;}
#highlandloops ul{margin-top:20px;}
#lowlands ul{margin-top:20px;}
#vanisle ul{margin-top:20px;}
#pap ul{margin-top:20px;}

/*finish styling for the rides Calendar page----------------------------*/


	#footer { /* The footer appears at the bottom of the page. On most websites these area 
	duplicate of the main menu system.*/
	clear:both;
	width:990px;
	height:25px;
	border-top:solid 5px;
	border-color:black;
	background:url(requirementsbackground.jpg) repeat-y; 
	text-align:center;
	}
	
	#footer a link{  /*the footer items have been coloured differently for each state, so that 
	                 a user can identify that they are actually links, and that if visited will
	                 appear as a different color.*/
	text-decoration:none;
	font-weight:bold;
	color:black;
	}
	#footer a:visited {
	color:#808000;
	}
	
	#footer a:hover {
	text-decoration:none;
	color:white;
	}
	
	#footer a:active {
	color:white;
	}