@charset "utf-8";
/* CSS Document */



.wrap {
	width: 993px;
	margin: auto;
	background: #fff;
	border: 1px solid #000;
}


body {
	margin: 0; padding: 1em; /* Set the margin & padding to zero so there is no space around the outside of the design */
	background:url(images/body-bg.jpg) fixed;/* Set the body background (outside background) to an background image*/ 
	font: 0.8em "Arial", sans-serif; /* Set the body font to small & choose Arial font as default, if Arial not available choose a sans-serif font */
}


a {
	text-decoration: none; /* By default any hyperlink will have an underline, here I am setting the hyperlink font to have no underline */
}


a img {
	border: none;
}

.red {
	color: #F00;
}

.bold {
	font-weight: bold;
}

.large {
	font-size:1.2em;
	font-weight:bold;
}

.x-large {
	font-size:1.5em;
	font-weight:bold;
}

.h1 {
	font-size:1.5em;
	font-weight:bold;
}	

.quote {
	font-weight: bold;
	font-style: italic;
}

.terms-conditions ol{
	font-size: 0.8em;
	font-weight: bold;
}

#map {
	width: 462px; 
	height: 222px; 
	border: 1px solid #000;
}

#navlinks {
	margin: 0; padding: 0.5em 2em; /* Creating the Navbar, set margin to zero and add 0.5em top/bottom & 2em left/right padding to ensure links are not placed right at the edge of the Navbar */
	background: url(images/navbar-bg.jpg) repeat-x; 
	color: #fff; /* Set the Navbar text colour to white */
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	font-size: small;
	text-align: center;
}

#navlinks li {
	display: inline; /* Set Ordered list to be display in a line rather than as a list */
	margin-right: 0.5em; padding-right: 0.75em; /* Add right margin and right padding to separate the navlink items */
	border-right: 1px solid #fff; /* Add a 1px border to the right of each navlink to act as a visual divider */
	font-weight: bold; /* Set the Navlinks Bold */  
}
 
#navlinks li.last {
	border-right: 0; /* The last navlink was given a class of "last", By setting the right border to zero on this navlink only makes the right borders on all the navlinks appear as just a visual divider between them i.e. no divider needed after the last navlink */
}

#navlinks a{
	color: #fff; /* Set the text colour of the navlinks to white */
}

#navlinks a:hover{
	color: #9cf; /* Set the text colour of the navlinks to change from white to light blue when hovered upon to give a visual hint to the user that they are hovering over a hyperlink */
}

#you-are-here p {
	font-size: smaller;
	font-weight: bold;
}

#you-are-here a:hover {
	text-decoration: underline;
	color: #06f;
}

#main-content {
	margin: 0px 240px;
	padding: 2em;	
}

#main-content li {
	padding-bottom: 0.5em;
}


#main-content a {
	text-decoration: none;
	border: none;
	color: #06f;
}

.illus {
	float: left; /* Floats any images within the content div to the left so the text wraps around it */
	margin: 0em 1em 0em 0em; /* Added a 1em margin right and bottom to give space between the image and the wrapped text */
	border: 1px solid #000; /* Added a 1px black border around any images within the content div */
}

.illus1 {
	float: left; /* Floats any images within the content div to the left so the text wraps around it */
	margin: 0em 1em 0em 0em; /* Added a 1em margin right and bottom to give space between the image and the wrapped text */
}

.illus2 {
	float: right; /* Floats any images within the content div to the left so the text wraps around it */
	margin: 0em 0em 0em 1em; /* Added a 1em margin right and bottom to give space between the image and the wrapped text */
	border: 1px solid #000; /* Added a 1px black border around any images within the content div */
}

.illus3 {
	float: right; /* Floats any images within the content div to the right so the text wraps around it */
	margin: 0em 1em 0em 0em; /* Added a 1em margin right and bottom to give space between the image and the wrapped text */
}

#left-sidebar {
	float: left;
	width: 220px;
	padding: 20px 10px 10px 10px;
	font-weight: bold;
}

#left-sidebar li {
	margin-left: -1.5em;
	padding-bottom: 0.5em;
}

#left-sidebar a {
	color: #06f;
}

#right-sidebar {
	float: right;
	width: 220px;
	padding: 20px 10px 10px 10px;
	font-weight: bold;
}

#right-sidebar a {
	text-decoration: none;
	color: #000;
}

.sidebar-content {
	padding: 0.8em;	
	background: #ccc;
}

ul.wheel {
	font-weight: bold;
	list-style-type:none;
	margin-left: -1em;
}

ul.wheel a {
	text-decoration: underline;
	color: #06f;
}

ul.wheel li {
	margin: 0.5em 0;
	padding-left:25px;
	background: url(images/wheel.png) no-repeat;
}

ul.wheel li a:hover {
	text-decoration: underline;
	color: #06f;
}

ul.pass-plus {
	font-weight: bold;
	list-style-type:none;
	margin-left: -1em;
}

ul.pass-plus li {
	margin: 0.5em 0em;
	padding-left:25px;
	background: url(images/pass-plus-small.png) no-repeat;
}

#footer {
	clear: both; /* Clears the footer below the floated content and sidebar */
	padding: 0.5em 2em; /* Set top/bottom padding to 0.8em to give background space, Set left right padding to 3em to match the content and navbar */ 
	background: url(images/navbar-bg.jpg) repeat-x;
	border-top: 1px solid #000;
}

#footer p {
	text-align: center;
	font-weight: bold;
	color: #fff; /* Set footer text to white */
	margin: 0; /* Remove the top/bottom margins to centre the footer text within the footer background */
}

#footer-links p {
	text-align: center;
	padding: 0.5em;
	color:#fff;
	font-size: 0.8em;
	font-weight: bold;
}

#footer-links a {
	color:#fff;
}

#footer-links a:hover {
	color:#0080FF;
}