/* CSS Document */

/* Global Styles
--------------------------------------------------------------- */

* {
	margin: 0px;
	padding: 0px;
}

body, html {
	min-height: 101%;
}

body {
	text-align: left;
	font-size: 62.5%;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	background: url(../../images/layout/bodybg.jpg) top repeat-x #fff;
	margin: 0px;
}

a:link, a:visited, a:focus {
	color: #0000FF;
	text-decoration: underline;
	outline: none;
}

a:hover, a:active {
	color: #000;
	text-decoration: underline;
}

a img {
	border: none;
}

/* H1/H2/H3 Styles
--------------------------------------------------------------- */

h1 {
	font-size: 2.3em;
	font-weight: normal;
	color: #324959;
}

h2 {
	font-size: 1.6em;
	font-weight: normal;
	color: #324959;
}

h3 {
	font-size: 1.3em;
	font-weight: normal;
	color: #666;
}

/* Container Styles
--------------------------------------------------------------- */

#outerContainer {
	width: 100%;
	float: left;
}

#container {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	font-size: 1.2em;
}

	#contentContainer {
		width: 960px;
		background: #fff;
		border-top: 365px solid #fff;
	}
	
/* Main Styles
--------------------------------------------------------------- */

		#main {
			float: left;
			width: 630px;
			padding: 10px 10px 10px 10px;
		}
		
			#main p {
				margin: 10px 0px 10px 0px;
				font-size: 1.2em;
				line-height: 20px;
			}
			
			#main ul {
				font-size: 1.2em;
				padding: 3px 0px 3px 0px;
			}
			
				#main ul li {
					padding: 4px 30px 4px 0px;
					list-style: none;
				}
				
			#main #product-boxes {
				width:670px;
				text-align:center;
				margin-top:25px;
				margin-bottom:30px;
			}
			
				#index #main #product-boxes {
					width:500px;
					margin-left:75px;
				}
			
				#main #product-boxes img {
					margin-right:10px;
					margin-top:5px;
				}
				
			#call-us-cta {
				position:relative;
				background:url(../../images/layout/call-us-cta.jpg) no-repeat;
				width:600px;
				height:57px;
				padding:3px 10px 0px 380px;
				clear:both;
			}
				
				#call-us-cta p {
					color:#ffec00;
					font-size:3em;
				}

/* Sidebar/CTA Styles
--------------------------------------------------------------- */
		
#sidebar {
	float: right;
	width: 237px;
}

	#demonstration-cta {
		position:relative;
		background:url(../../images/layout/demonstration-cta.jpg);
		width:237px;
		height:197px;
	}
	
		#demonstration-cta p {
			color:#ffec00;
			font-size:2em;
			font-weight:bold;
			position:absolute;
			bottom:5px;
			left:24px;
		}
	
	#insurance-cta {
		position:relative;
		margin-top:20px;
		background:url(../../images/layout/insurance-cta.jpg);
		width:237px;
		height:197px;
	}
	
		#insurance-cta span {
			color:#ffec00;
			font-size:1.4em;
			line-height:18px;
			font-weight:bold;
			position:absolute;
			bottom:8px;
			left:45px;
			text-align:center;
		}
		
			#insurance-cta a {
				text-decoration:none;
			}
	
	#finance-cta {
		position:relative;
		margin-top:20px;
		background:url(../../images/layout/finance-cta.jpg);
		width:237px;
		height:300px;
	}
	
		#finance-cta p {
			color:#ffec00;
			font-size:1.5em;
			font-weight:bold;
			position:absolute;
			bottom:10px;
			left:60px;
		}
		
	#contact #finance-cta {
		display:none;
	}
		
/* Header Styles
--------------------------------------------------------------- */

#header {
	background:url(../../images/layout/headerbg.jpg) repeat-x;
	clear: both;
	width: 960px;
	height: 88px;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
}

	#logo {
		width: 223px;
		height: 77px;
		float: left;
	}
	
	#cta-top-right {
		width: 700px;
		height:55px;
		float: right;
		padding: 11px 0px 0px 0px;
		text-align: right;
		font-size: 1.6em;
		color:#324959;
		font-weight:bold;
	}
	
		#cta-top-right .phone {
			font-size:1.9em;
			color:#8b1f1f;
		}

/* Main Runner Styles
--------------------------------------------------------------- */

#main-runner {
	position:absolute;
	top:88px;
	left:0px;
	z-index:100;
	height:234px;
	width:960px;
	background:#e4f0f9;
}

#index #main-runner {
	background:url(../../images/layout/mainimg-home.jpg);
	margin-top:-17px;
	height:291px;
	width:960px;
}

#mobilityScooters #main-runner {
	background:url(../../images/layout/mainimg-mobility-scooters.jpg);
	height:234px;
	width:960px;
}

	#eco-max {
		position:absolute;
		top:140px;
		left:15px;
	}

#electricMobilityScooters #main-runner {
	background:url(../../images/layout/mainimg-elec-mobility-scooters.jpg);
	height:234px;
	width:960px;
}

#sunriseScooters #main-runner {
	background:url(../../images/layout/sunrise-scooters.jpg);
	height:234px;
	width:960px;
}

#prideScooters #main-runner {
	background:url(../../images/layout/pride-scooters.jpg);
	height:234px;
	width:960px;
}

#vanOsScooters #main-runner {
	background:url(../../images/layout/van-os-scooters.jpg);
	height:234px;
	width:960px;
}

#contact #main-runner {
	background:url(../../images/layout/mainimg-home.jpg);
	margin-top:-17px;
	height:291px;
	width:960px;
}

#family-owned-cta {
	float:right;
	margin-top:17px;
	margin-right:7px;
}

	#index #family-owned-cta {
		margin-top:34px;
	}
	
	#contact #family-owned-cta {
		margin-top:34px;
	}

	#main-runner p {
		margin-left:70px;
		margin-top:5px;
		line-height:25px;
		text-align:center;
	}
	
		#index #main-runner p {
			margin-left:60px;
			margin-top:42px;
			line-height:25px;
			text-align:center;
		}
		
		#mobilityScooters #main-runner p {
			margin-left:60px;
			margin-top:25px;
			line-height:25px;
			text-align:center;
		}
		
		#contact #main-runner p {
			margin-left:60px;
			margin-top:42px;
			line-height:25px;
			text-align:center;
		}
	
		#main-runner p span {
			display:block;
		}
		
			#main-runner p span.kw {
				color:#324959;
				font-size:4em;
			}
			
				#electricMobilityScooters #main-runner span.kw {
					font-size:3.4em;
				}
			
			#main-runner p span.location {
				color:#8b1f1f;
				font-size:4.4em;
				text-transform:uppercase;
				margin-top:30px;
			}
			
			#main-runner #divider {
				width:250px;
				position:absolute;
				height:1px;
				background:#000;
				position:absolute;
				top:135px;
				left:270px;
			}
			
			#index #main-runner #divider {
				width:250px;
				height:1px;
				background:#000;
				position:absolute;
				top:152px;
				left:270px;
			}
			
			#contact #main-runner #divider {
				width:250px;
				height:1px;
				background:#000;
				position:absolute;
				top:152px;
				left:270px;
			}
			
			#main-runner .msg {
				font-size:2.5em;
				color:#324959;
				position:absolute;
				top:150px;
				left:155px;
			}
			
			#index #main-runner .msg {
				top:130px;
				left:165px;
			}
			
			#mobilityScooters #main-runner .msg {
				top:130px;
				left:165px;
			}
			
			#contact #main-runner .msg {
				top:130px;
				left:165px;
			}
			
			#main-runner .logo {
				margin-left:225px;
			}


/* Horizontal Navigation Styles
--------------------------------------------------------------- */

#navigation {
	width: 960px;
	height: 40px;
	z-index: 110;
	position: absolute;
	right: 0px;
	top: 55px;
}

	#navigation ul {
		margin: 0px;
		padding: 0px;
		float:right;
		background:url(../../images/layout/navbg.jpg) repeat-x #00216b;
	}
	
		#navigation ul li {
			display: inline;
			list-style: none;
		}
		
			#navigation ul li span {
			display: block;
		}
			  
			#navigation ul li a {
				float: left;
				height:13px;
				border-right: 1px solid #678ba5;
				color: #ffffd6;
				text-decoration: none;
				padding: 10px 12px 10px 12px;
				font-size: 0.9em;
				font-weight:bold;
				text-align:center;
			}

				#navigation ul li a.contact-a {
					border-right: none;
					background:url(../../images/layout/nav-border-right.jpg) no-repeat right;
				}
				
				#navigation ul li a.index-a {
					background:url(../../images/layout/nav-border-left.jpg) no-repeat left;
				}

				#navigation ul li a:hover {
					color: #cae6fa;
				}

/* Footer Styles
--------------------------------------------------------------- */

#outerFooter {
	float: left;
	width: 100%;
	background:url(../../images/layout/footerbg.jpg) top repeat-x #e4f0f9;
	margin-top:50px;
}

#footer {
	clear: both;
	width: 960px;
	color: #333;
	margin: 0px auto;
	padding: 20px 0px 10px 0px;
	font-size: 1.2em;
}

	#footer .index-a,
	#footer .contact-a {
		display: none;
	}

	#footer h2 {
		font-weight: bold;
		color: #324959;
		padding: 3px 5px;
		font-size: 1.5em;
	}
		
	#footer li {
		list-style: none;
	}
	
	#footer a {
		white-space: nowrap;
		color: #324959;
		text-decoration: none;
	}
		
		#footer a:hover {
			color: #3686bd;
			text-decoration: underline;
		}

/* Footer Services Styles
--------------------------------------------------------------- */	

	#footer #footer-services {
		float: left;
		width: 300px;
		margin: 0px;
	}
	
		#footer #footer-services ul li {
			float: left;
		}
	
			#footer #footer-services ul li a {
				float: left;
				width: 190px;
				padding: 3px 5px;
				border-bottom: 1px dotted #777;
			}
		
/* Footer Areas Styles
--------------------------------------------------------------- */	

	#footer #footer-areas {
		float: left;
		width: 250px;
	}
	
		#footer #footer-areas ul {
			float: left;
			width: 150px;
		}
	
		#footer #footer-areas ul li {
			float: left;
			width: 130px;
			padding: 3px 5px;
			border-bottom: 1px dotted #777;
		}
		
/* Footer Address Styles
--------------------------------------------------------------- */	

	#footer #footer-address {
		float: left;
		width: 200px;
	}
		
		#footer #footer-address p {
			line-height: 20px;
			padding: 3px 5px;
		}
				
/* Footer Help & Advice
--------------------------------------------------------------- */	

	#footer #footer-help {
		float: right;
		width: 165px;
	}
		
			#footer #footer-help ul li {
				float: left;
			}
					
			#footer #footer-help ul li a {
				float: left;
				width: 155px;
				padding: 3px 5px;
				border-bottom: 1px dotted #777;
			}
		
		#footer #footer-help p {
			line-height: 20px;
			padding: 3px 5px;
		}
		
		#footer #footer-help .bottomLink {
			margin-bottom: 5px;
		}
		
		
/* Footer Bottom Styles
--------------------------------------------------------------- */	

		#footer #footer-bottom {
		width: 940px;
		float: left;
		margin:10px 0px 0px 0px;
		text-align: center;
	}

/* Float Styles
--------------------------------------------------------------- */

.left, .img-left {
	float: left;
}

	.img-left {
		margin: 10px 10px 10px 0px;
	}

.right, .img-right {
	float: right;
} 

	.img-right {
		margin: 10px 0px 10px 10px;
	}

	
/* Generic Styles
--------------------------------------------------------------- */

.clearfix {
	clear: both;
}