/*************************************************************************
	CycleCity Guides
	Developed by Matthew Hill (c) 2008 -- http://www.friskdesign.com/
	for Alan Henning Graphic Design / Cycle City Guides
	MODULE: 	global.css
	PURPOSE:	all rules for site
*************************************************************************/

/* Auto float clearing for compliant browsers
*************************************************************************/
#skip:after,
#banner:after,
#nav:after,
#wrapper:after,
#content:after,
#sidebar:after,
#maptabs:after,
.mapcontainer:after,
.singlemap:after,
#footer:after {
	content: ".";
	height:0;
	display:block;
	clear:both;
	visibility:hidden;
}

/* General Rules and classes
*************************************************************************/
html {
	font-size:100%;
	height: 100%;
}
body {
	color:#4C5149;
	background:#E1E1E1;
	font: normal 0.75em/1.6em Arial,"Helvetica Neue","Helvetica",sans-serif;
	margin:0;
	padding:0;
	min-height: 101%;
}
#skipto {
	position:absolute;
	left:-1000em;
}
.floatright {
	float:right;
	text-align:right;
}
.floatleft {
	float:left;
	text-align:left;
}
.alignright {
	text-align:right;
}
.alignleft {
	text-align:left;
}
img {
	border:none;
}

/* Layout (sizes / floats / positions of main elements)
*************************************************************************/
#wrapper {
	background:#FFF url(../img/bg-content.png) repeat-x;
	margin-top:-7px;
	padding:47px 0 40px 0;
	border-top:1px solid #CCC;	
}
#main {
	width:930px;
	margin:0 auto;
}
#content {
	clear:both;
	width:610px;
	float:left;
}
#sidebar {
	float:left;
	margin:30px 0 0 30px;
	width:290px;
}


/* Content formatting
*************************************************************************/
h1,h2,h3,h4,h5,h6,blockquote {
	font: bold 1em/1 "Trebuchet MS",Arial,"Helvetica Neue",Helvetica,sans-serif;
	margin:40px 0 20px;
	padding:0 0 8px 0;
	color:#72784F;
	background:transparent url(../img/dottedline.png) bottom left repeat-x;
}
p {
	margin:0 0 20px;
}
ul,
ol,
dl {
	margin:0 0 20px 30px;
	padding:0;
}
li {
	margin:0 0 0.3em;
}
h1 {
	margin-top:0;
	font-size:2.4em;
}
h2 {
	font-size:1.7em;
}
h3 {
	font-size:1.3em;
}
a,a:link {
	color:#508CAA;
	text-decoration:underline;
}
a:visited {
	color:#939A8F;
}
a:hover {
	color:#508CAA;
}
blockquote {
	color:#526568;
	margin:0;
	padding:0;	
}
img.map {
	display:block;
	padding:5px;
	border:1px solid #DDD;
	background:#FFF;
}
img.map-top-margin {
	display:block;
	padding:5px;
	border:1px solid #DDD;
	background:#FFF;
	margin:40px 0 0 0;
}
big {
	font-size:1.2em;
	line-height:1.45em;
}

/* Skip links
*************************************************************************/
#skip {
	font-size:0.80em;
}
#skip a,#skip a:visited {
	color:#E8E6D4;
	text-decoration:none;
	position:absolute;
	left:-1000em;
	top:0;
}
#skip a:visited:hover,#skip a:hover,#skip a:focus {
	color:#526568;
	text-decoration:underline;
	left:0;
}

/* Banner
*************************************************************************/
#banner {
	height:140px;
	overflow:hidden;
	background:#828764 url(../img/bg-banner.png) right top no-repeat;
}
#banner .inner {
	width:930px;
	min-height:140px;
	margin:0 auto;
	position:relative;
}
#banner img {
	margin:14px 25px 0 30px;
	float:left;
}
#banner #sitename {
	float:left;
	text-decoration:none;
	font: bold 3em/normal "Trebuchet MS",Arial,"Helvetica Neue",Helvetica,sans-serif;
	color:#FFF;
	margin:45px 0 0 0;
}
#banner p {
	font: normal 1.5em/1 "Trebuchet MS",Arial,"Helvetica Neue",Helvetica,sans-serif;	
	color:#FFF;
	letter-spacing:1px;
	text-align:right;
	margin:15px 15px 0 0;
	position:absolute;
	top:0;
	right:0;
}

/* Top Navigation */
#banner ul {
	margin:0;
	padding:0;
	position:absolute;
	bottom:10px;
	right:0;
}
#banner ul li {
	list-style:none;
	margin:0 10px 0 0;
	padding:0;
	float:left;
	background:url(../img/bg-topnav-left.png) no-repeat;
}
#banner ul a,
#banner ul a:visited {
	font: bold 1.1em/24px "Trebuchet MS",Arial,"Helvetica Neue",Helvetica,sans-serif;	
	text-decoration:none;
	padding:0 15px;
	display:block;
	color:#FFF;	
	background:url(../img/bg-topnav-right.png) right top no-repeat;	
}
#banner ul a:hover,
#banner ul a:focus {
	text-decoration:underline;
}
#banner ul li.selected {
	background:url(../img/bg-topnav-left-select.png) no-repeat;
}
#banner ul li.selected a,
#banner ul li.selected a:visited {
	color:#4B4B41;
	background:url(../img/bg-topnav-right-select.png) right top no-repeat;
}


/* Navigation
*************************************************************************/
#nav {
	background:#FFF url(../img/bg-bannershadow.png) top left repeat-x;
	padding:10px 0 0 0;
}
#nav ul {
	width:670px;
	margin:0 auto;
	padding:0;
	list-style:none;
	position:relative;
}
#nav ul li {
	list-style:none;
	float:left;
	width:160px;
	margin:0;
	background:#CCC url(../img/bg-nav-left.png) no-repeat;
}
#nav ul li a,
#nav ul li a:visited {
	color:#4B4B41;
	font: bold 1.2em/37px "Trebuchet MS",Arial,"Helvetica Neue",Helvetica,sans-serif;	
	text-decoration:none;
	padding:0 15px;
	display:block;
	text-align:center;
	background:url(../img/bg-nav-right.png) right top no-repeat;	
}
#nav #nav-mapping {
	border-bottom:5px solid #D1812C;
}
#nav #nav-surveying {
	margin:0 10px;
	border-bottom:5px solid #76A2C3;	
}
#nav #nav-design {
	margin:0 10px 0 0;
	border-bottom:5px solid #90B84C;	
}
#nav #nav-journeyplanner {
	border-bottom:5px solid #C784A7;	
}

#nav #nav-mapping.selected,
#nav #nav-surveying.selected,
#nav #nav-design.selected,
#nav #nav-journeyplanner.selected {
	border:none;
}
#nav ul li.selected {
	background:#F2F2F2 url(../img/bg-nav-left-select.png) no-repeat;
}
#nav ul li.selected a,
#nav ul li.selected a:visited {
	background:url(../img/bg-nav-right-select.png) right top no-repeat;	
}

#nav #nav-mapping a:hover {
	color:#D1812C;
}
#nav #nav-surveying a:hover {
	color:#76A2C3;	
}
#nav #nav-design a:hover {
	color:#90B84C;	
}
#nav #nav-journeyplanner a:hover {
	color:#C784A7;	
}

/* Section colours
*************************************************************************/
.colour-mapping h1,.colour-mapping h2,.colour-mapping h3,
.colour-mapping h4,.colour-mapping h5,.colour-mapping h6,
.colour-mapping #nav ul li.selected a,
.colour-mapping #nav ul li.selected a:visited {
	color:#D1812C;
}
.colour-surveying h1,.colour-surveying h2,.colour-surveying h3,
.colour-surveying h4,.colour-surveying h5,.colour-surveying h6,
.colour-surveying #nav ul li.selected a,
.colour-surveying #nav ul li.selected a:visited {
	color:#76A2C3;
}
.colour-design h1,.colour-design h2,.colour-design h3,
.colour-design h4,.colour-design h5,.colour-design h6,
.colour-design #nav ul li.selected a,
.colour-design #nav ul li.selected a:visited {
	color:#90B84C;
}
.colour-journey h1,.colour-journey h2,.colour-journey h3,
.colour-journey h4,.colour-journey h5,.colour-journey h6,
.colour-journey #nav ul li.selected a,
.colour-journey #nav ul li.selected a:visited {
	color:#C784A7;
}


/* Sidebar
*************************************************************************/
#sidebar .panel {
	margin:30px 0 0 ;
	padding:20px;
	background:url(../img/bg-sidepanel.png) repeat-x;
}
#sidebar .panel h2 {
	margin-top:0;
	font-size:1.3em;
}

#home #sidebar {
	background:url(../img/bg-panel-grad-long.png) 0 40px no-repeat;
	width:250px;
	padding:0 20px;
	margin-top:0;
}
#home #sidebar img {
	margin:0 -10px;
}
#home #sidebar h2 {
	margin:0 -20px 10px;
	padding:10px 20px;
	font-size:1.7em;
	background:url(../img/bg-paneltitle.png) no-repeat;
	color:#4B4B41;
}
#home #sidebar h3 {
	margin-top:15px;
}
#home #sidebar .shim {
	font-size:0;
	height:6px;
	width:290px;
	margin:0 -20px;
	background:url(../img/bg-panel-bottom.png) no-repeat;	
}

/* Homepage panels
*************************************************************************/
.homepanel {
	background:url(../img/bg-panel-grad-med.png) 0 40px no-repeat;
	width:250px;
	padding:0 20px;
	float:left;
}
#home-mapping,
#home-surveying {
	margin-bottom:30px;
}
#home-design,
#home-journeyplanner {
	background:url(../img/bg-panel-grad-short.png) 0 40px no-repeat;
}
#home-mapping,
#home-design {
	margin-right:30px;
}
.homepanel h2 {
	margin:0 -20px 10px;
	padding:7px;
	font-size:1.6em;
	background:url(../img/bg-paneltitle.png) no-repeat;
	color:#4B4B41;
}
.homepanel h2 a,
.homepanel h2 a:visited {
	text-decoration:none;
	background:none;
	color:#4B4B41;
}
.homepanel h2 a:hover {
	text-decoration:none;
	color:#4B4B41;
}
.homepanel h2 img {
	vertical-align:text-bottom;
	margin:0 10px 0 0;
}
.homepanel img {
	margin:0 -10px 10px;
}
.homepanel p {
	margin:0 0 10px 0;
}
.homepanel a,
.homepanel a:visited {
	color:#508CAA;
	font-weight:bold;
	text-decoration:none;
	padding:0 10px 0 0;
	background:url(../img/arrow.png) right center no-repeat;
}
.homepanel a:hover {
	text-decoration:underline;
}
.homepanel .shim {
	font-size:0;
	height:6px;
	width:290px;
	margin:0 -20px;
	background:url(../img/bg-panel-bottom.png) no-repeat;	
}

/* Maps
*************************************************************************/
#mapselection {
	clear:both;
}
#maptabs {
	margin:0;
	padding:0;
	list-style:none;
	position:relative;
}
#maptabs li {
	list-style:none;
	float:left;
	margin:0 5px 0 0;
	background:#CCC url(../img/bg-maptab-left.png) no-repeat;
}
#maptabs li a,
#maptabs li a:visited {
	color:#4B4B41;
	font: bold 1.2em/33px "Trebuchet MS",Arial,"Helvetica Neue",Helvetica,sans-serif;	
	text-decoration:none;
	padding:0 15px;
	display:block;
	text-align:center;
	background:url(../img/bg-maptab-right.png) right top no-repeat;	
}
#maptabs li.selected {
	background:#F2F2F2 url(../img/bg-maptab-left-select.png) no-repeat;
}
#maptabs li.selected a,
#maptabs li.selected a:visited {
	background:url(../img/bg-maptab-right-select.png) right top no-repeat;	
}

.mapcontainer {
	padding:20px;
	margin:-1px 0 0 0;
	border:1px solid #CCC;
	background:#F8F8F8;
}
.mapcontainer h2 {
	margin-top:0;
	background:none;
	padding:0;
	font-weight:normal;
	font-size:1.60em;
}
.mapcontainer h2 span {
	font-size:0.90em;
	color:#999;
}
.mapcontainer .mapimage {
	width:420px;
	text-align:center;
	float:left;
	margin:0;
}
.mapcontainer .map {
	margin:0 0 10px 0;
}
.mapcontainer .mapinfo {
	width:430px;
	float:left;
	margin:0 0 0 30px;
}
.mapcontainer .mapinfo h3 {
	margin:0 0 10px 0;
	color:#666;
}
.mapcontainer .mapinfo p {
	margin:0 0 20px 0;
}
.mapcontainer .mapinfo p.services {
	margin:0;
	padding:0 0 1px 0;
}
.mapcontainer .mapinfo p img {
	vertical-align:middle;
}
.mapcontainer .mapinfo p strong {
	font: bold 1.2em/normal "Trebuchet MS",Arial,"Helvetica Neue",Helvetica,sans-serif;
	padding:0 17px 0 7px;
	color:#999;
}
.singlemap {
	padding:0 0 25px 0;
}
.border {
	border-bottom:5px solid #CCC;
	margin:0 0 25px;
}




/* Footer
*************************************************************************/
#footer {
	clear:both;
	font-size:0.90em;
	height:190px;
	background:url(../img/bg-footer.png) repeat-x;
	border-top:1px solid #DDD;
}
#footer p {
	width:930px;
	text-align:right;
	margin:25px auto;
}
#footer p span {
	font-size:0.80em;
	color:#999;
}
#footer a,
#footer a:visited {
	color:#526568;
	text-decoration:none;
}
#footer a:hover {
	color:#76A2C3;
	text-decoration:underline;	
}