/*Written by Iain Clark, Iain's IT Solutions, Dec 2011*/
html{
	overflow-y:scroll;
}

body, textarea{
	font-family: sans-serif;
	color: #2d2a85;
	font-size: 11pt;
}

h1{
	font-size: 20pt;
	margin-bottom: 10px;
}

h2{
	font-size: 18pt;
}

h3{
	font-size: 16pt;
}

h4{
	font-size: 14pt;
	margin-bottom: 5px;
}

p{
	margin-bottom: 15px;
}

.p-small-margin{
	margin-bottom: 5px;
}

.p-last{
	margin-bottom: 0px;
}

a{
	border-style:none;
	outline: none; 
}	

a:link{
	color: #2d2a85;
}

a:visited{
	color: #2d2a85;
}

a:hover{
	color: #2c9be0;
}

a:active{
	color: #2c9be0;
}

.title-link{
	text-decoration: none;
}

.title-link:hover{
	text-decoration: underline;
}

table , tr, td, th{
	border-style: solid;
	border-color: #cccccc;
	border-width: 1px;
	border-collapse: collapse;
	padding: 5px;	
	vertical-align: middle;
}

th{
	text-align:center;
	font-weight: bold;
}

input, textarea{
	padding: 3px;
}

ul {
	list-style: disc;
}

li{
	margin: 0px 0px 10px 30px;
	padding: 0px 0px 0px 10px;
}

.clear{
	clear: both;
}

.centered{
	text-align: center;
}

.red{
	color: #ff0000;
}

.hidden{
	display: none;
}

.title{
	width: 960px;
	padding-left: 10px;
	padding-right: 10px;
	height: 150px;
	margin: 0 auto;
}

.title-logo{
	background-image: url("../images/title-bg.png");
	background-repeat: no-repeat;
	width: 300px;
	height: 150px;
	float: left;
	text-align: center;
	color: #ffffff;
	font-size: 20pt;
}

.title-logo img{
	margin-top: 30px;
}

.title-right{
	height: 150px;
	float: left;
	backgrdound-color: blue;
}

.title-address{
	height: 112px;
	wdidth: 350px;
	padding: 15px 0px 0px 80px;
	text-align: right;
	backgrdound-color: red;
	float: left;
	
}

.title-we-buy{
	float: left;
	height: 65px;
	width: 202px;
	margin-left: 80px;
	background: url("../images/we-buy-bg.png") no-repeat;
	color: #ffffff;
	text-align: center;
	padding-top: 8px;
	margin-top: 15px;
	line-height: 130%;
	font-weight: bold;
}



/*Nav menu*/
.nav-menu{
	height: 30px;
	margin-left: 20px;
	clear: left;
}

.nav-menu-item{
	float: left;
	padding: 2px 20px 0px 20px;
	letter-spacing: 1px;
	font-size: 14pt;
}

.nav-menu-item:active{
	padding-top: 3px;
}

.nav-menu .selected{
	background-color: #DEE9F5;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}



/*General pages*/
.main-body{
	width: 960px;
	min-height: 300px;
	padding: 20px 10px 0px 10px;
	margin: 0 auto;
}

.footer{
	background-color: #000522;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	width: 960px;
	height: 105px;
	padding: 15px 0px 0px 0px;
	margin: 30px auto 0px auto;
	color: #DEE9F5;
	font-size: 10pt;
}

.footer .top{
	height: 90px;
}

.footer .column{
	width: 200px;
	/*Makes the empty divs visible and take up space. 
	If all 4 columns are populated, this can be removed*/
	min-height: 10px;
	padding-left: 20px;
	padding-right: 20px;
	float: left;
	
}

.footer .bottom{
	font-size: 7pt;
	text-align: center;
}

.footer a:link, .footer a:visited{
	color: #DEE9F5;
}

.footer a:hover, .footer a:active{
	color: #AEEEEE;
}

.footer p{
	margin-bottom: 10px;
}

.half-pane{
	float: left;
	width: 480px;
}

.third-pane{
	float: left;
	width: 320px;
}

.two-third-pane{
	float: left;
	width: 640px;
}



/*The subscribe to mailing list form*/
.subscribe-form label{
	width: 60px;
	float: left;
	text-align: right;
	clear:left;
	margin: 5px 10px 0px 10px;
}

.subscribe-form .text-box{
	padding: 3px;
	margin-top: 3px;
	clear:right;
	float: left;
	margin-bottom: 5px;
	width: 300px;
}

.subscribe-form .button{
	margin-top: 10px;
	/*Only way I could see to reduce the gap between the subscribe
	image button and the bottom of the light blue pane*/
	margin-bottom: -5px; 
}

.subscribe-form .subscribe-title{
	text-align: center;
	font-weight: bold;
}

.subscribe-form .last-name{
	display: none;
}

/*Home page*/
.large-text{
	text-align: center;
	margin-top: 30px;	
	margin-bottom: 30px;
}

.large-text h1{
	font-size: 26pt;
}

/*Currently breaking*/
.banner-title{
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
}

.banner-title h3{
	font-size: 18pt;
}

.banner{
	width: 350px;
	min-height: 120px;
	margin-left: 64px;
	margin-bottom: 20px;
	border: 1px solid #c0c0c0;
	border-radius: 10px;
	float: left;
}

.banner .image{
	width: 150px;
	float: left;
	margin: 10px;
}

.banner .text{
	width: 170px;
	float: left;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	font-size: 10pt;
}

.pane{
	background-color: #DEE9F5;
	margin-bottom: 30px;
	padding: 20px;
	border-radius: 10px;
}

.thumbs-pane{
	/*Negative as the pane above has a bottom margin of 30px, but I want this thumbs pane
	to sit closer below it.  It was either this or adding an inline style margin-bottom 0px 
	to the pane div on the page*/
	margin: -15px 0px 0px 0px;
	padding: 0px;
}

.thumbs-pane img{
	margin: 0px 5px 12px 0px;
	cursor: pointer;
	border: 1px solid #ffffff;
}

.thumbs-pane .image-selected{
	border-color: #ff0000;
}

/*Model/bikes for sale listing*/
.item-box{
	position: relative;
	border: 1px solid #c0c0c0;
	border-radius: 5px;
	width: 150px;
	height: 180px;
	margin: 0px 15px 20px 15px;
	float: left;
	overflow: hidden;
	padding: 5px;
}

.item-box .photo{
	text-align: center;
}

.item-box .name{
	position: absolute;
	bottom: 0px;
	width: 150px;
	text-align: center;
	background-color: #ffffff;
	border-color: #ffffff;
	padding: 5px 0px 5px 0px;
}



/*Parts listing*/
.part-box{
	position: relative;
	border: 1px solid #c0c0c0;
	border-radius: 5px;
	width: 100px;
	height: 160px;
	margin: 0px 4px 20px 4px;
	float: left;
	overflow: hidden;
	padding: 5px;
}

.part-box .photo{
	text-align: center;
}

.part-box .name{
	position: absolute;
	bottom: 0px;
	width: 100px;
	text-align: center;
	background-color: #ffffff;
	border-color: #ffffff;
	padding: 5px 0px 5px 0px;
	font-size: 10pt;
}

.part-search{
	float: right;
	margin-top: -4px; /*Makes the search box sit centrally in the pane div*/
}

.part-search .text{
	width: 147px;
}



/*cms*/
.cms-nav-item{
	margin-right: 20px;
}



/*Bikes for sale*/
.disclaimer{
	font-size: 10pt;
	text-align: center;
	/*This sits above the footer - which has a top margin of
	30px - but I don't want such a big margin between this 
	disclaimer and the footer - but I do want the big margin
	on all other pages*/
	margin: 30px 0px -25px 0px;
}