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

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin: 0; padding: 0; border: 0;}
.clear {clear: both; height: 15px; }
	
body {font: 80% Arial, Helvetica, sans-serif; color: #000;} 

p {margin-bottom: 15px}
.bold {font-weight: bold;}
.greenbold {font-weight: bold; color: #74A439;}

#wrapper {width: 770px; margin: auto auto;}
	
.sentence {font: 10px Verdana, Arial, Helvetica, sans-serif; color: #999; text-align: center; padding: 5px;}
.sentence a:link, .sentence a:visited {font-weight: normal; color: #999; text-decoration: underline;}
.sentence a:hover {text-decoration: none;}

.header {background: url(images/header.jpg) no-repeat; width: 770px; height: 308px; position: relative;}
.ext {background: url(images/header_ext.jpg) no-repeat; width: 770px; height: 308px; position: relative;} 
.header img.logo {margin-top: 16px;}
.header ul {margin-top: 9px;}
.header ul li {list-style: none; padding: 4px 0px 5px 0px; margin-left: 5px; display: block; width: 300px; height: 16px; position: relative;}
.header ul li a:link, .header ul li a:visited {font: bold 11px Arial, Helvetica, sans-serif; line-height: 14px;color: #FFF; text-decoration: none;padding-left: 30px; width: 300px; display: block;}
.header ul li a:hover {background: url(images/nav-hover.gif) no-repeat left; font-weight: bold; color: #80B83E;}
.header ul li.selected {background: url(images/nav-hover-s.gif) no-repeat left; font-weight: bold; color: #80B83E; width: 300px;}
.header ul li.selected a:hover {background: none; font-weight: bold; color: #80B83E;}

.header ul li#whats {height: 39px; padding: 0; text-indent: -9999px; background: url(images/whatsup.gif) no-repeat left; width: 350px; margin-left: 0;}
.header ul li#whats a:link, .header ul li#whats a:visited {line-height: 39px; width: 350px;}
.header ul li#whats a:hover, .header ul li#whats.selected {background: url(images/whatshover.gif) no-repeat left;}






.header ul li em {font-size: 12px;}

.header img.flaUk {position: absolute; border: 1px solid #fff; left: 675px; top: 8px;}
.header img.flaEsp {position: absolute; border: 1px solid #fff; left: 675px; top: 40px;}




.tel {background: url(images/tel-bkg.jpg) no-repeat; width: 756px; text-align: right; font: bold 12px Arial, Helvetica, sans-serif; color: #FFF; padding: 5px 7px; height: 24px; display: block;}
.tel a:link, .tel a:visited {font-weight: bold; color: #FFF;}
.tel a:hover {text-decoration: none;}

.content {padding: 20px 30px 15px 30px;}
.content h2 {font: 600 200% Arial, Helvetica, sans-serif; background: url(images/line-bkg.gif) no-repeat; width: 770px; height: 80px; margin-bottom: 10px;}
.content h2.whatsbin {background: url(images/h3bg_whats.gif) no-repeat; text-indent: -9999px;}

.content h2 span {font: 70% Arial, Helvetica, sans-serif;}
.content h3 {font: 600 120% Arial, Helvetica, sans-serif; border-bottom: 1px solid #74A439; margin-bottom: 10px; padding-bottom: 10px;}
.content .lefthpimg {width: 232px; float: left;}
.content .righthpimg {width: 232px; float: right;}
.content .hptext {width: 460px; height: 300px; margin-left: 242px; margin-top: 40px; background: url(images/circ-leisure.jpg) right bottom no-repeat;}
.content ul.smllist {margin-bottom: 30px;}
.content ul.smllist li {line-height: 18px; background: url(images/list-pointer.jpg) no-repeat left top; list-style-type: none; text-indent: 15px;}

.footer {font: 10px Verdana, Arial, Helvetica, sans-serif; color:#80B83E; border-bottom: 1px solid #80B83E; margin-bottom: 3px; padding-bottom: 10px; clear: both;}

.rightcol {float: right; width: 250px; text-align: right; margin-left: 20px; margin-bottom: 60px;}
.rightcol img {margin-bottom: 15px;}
.rightcol p {border-top: 1px dotted #80B83E; width: 250px; display: block; padding-top: 10px; padding-bottom: 10px; margin-bottom: 0px;}
.rightcol p.last {border-bottom: 1px dotted #80B83E;}
.content a:link, .content a:visited {font-weight: bold; color: #74A439;}
.content a:hover {font-weight: bold; color: #666; text-decoration: none;}

img.xten {border: 1px dotted #80B83E;}

td.contact {background: #F3F9EE; text-align: right; font-weight: bold; color: #74A439; border-right: 1px dotted #80B83E; vertical-align: text-top; width: 150px;}
td {padding: 3px 10px;} 

.smlgrey {font: 10px Verdana, Arial, Helvetica, sans-serif; color: #666;}

.testimonial {border: 1px solid #80B83E; background: #F3F9EE; padding: 15px 15px 0px 15px; margin-bottom: 15px;}
p.by {font: bold 10px Verdana, Arial, Helvetica, sans-serif; text-align: right;}
p.by span {font-weight: normal;}
.testimoniallong {border: 1px solid #80B83E; background: #F3F9EE; padding: 15px 15px 0px 15px; margin-bottom: 15px; height: 165px;}
.testimoniallonger {border: 1px solid #80B83E; background: #F3F9EE; padding: 15px 15px 0px 15px; margin-bottom: 15px; height: 250px;}
.left {float: left; width: 180px; margin-right: 15px;}
.right {float: right; width: 160px; font: 10px Verdana, Arial, Helvetica, sans-serif; color: #80B83E; text-align: right;}
.right img {float: right; border: 1px solid #80B83E; }



.bikebinspic {float: left; width: 424px; margin-right: 15px;}

p.question {border: 1px solid #DEEDCB; background: #DEEDCB; font-weight: bold; color: #000; padding: 3px;margin-bottom: 0px;}
p.answer {border: 1px solid #DEEDCB; background: #F3F9EE; font-weight: normal; color: #000; padding: 3px; margin-bottom: 15px;}

table.productcolors td {padding: 0px;}
table.productcolors img {margin: 0px;}
td.smlgrey {text-align: left; font: 10px Verdana, Arial, Helvetica, sans-serif; color: #666; text-indent: 5px;}

.uses {height: 175px;}
.uses img {float: left; margin-bottom: 15px;}
.usestext {padding: 10px; float: left; width: 490px;}
.usesinttext {float: left; width: 360px;}
ul.largelist {margin-bottom: 30px; margin-top: 30px;}
ul.largelist li {line-height: 18px; list-style-image: url(images/list-pointer.jpg); list-style-position: outside; margin-left: 20px;margin-bottom: 15px;}

.bikebinleft {float: left; width: 180px; height: 350px; margin-right: 40px;}

#specifications-img {width: 486px; height: 500px; background: url(images/spec.jpg) no-repeat;}
p.specifications {float: left; width: 180px; height: 150px; margin-right: 10px; text-indent: -3000px;}

#fitting-img {width: 476px; height: 402px; background: url(images/fitting.jpg) no-repeat;}
p.fitting {float: left; width: 180px; height: 150px; margin-right: 10px; text-indent: -3000px;}

.detailsright {float: right; width: 150px; text-align: right; margin-left: 35px; margin-bottom: 60px; margin-top: 20px;}
.detailsright img {margin-top: 15px;}
.detailsright p {border-top: 1px dotted #80B83E; width: 150px; display: block; padding-top: 10px; padding-bottom: 10px; margin-bottom: 0px; font-weight: bold;}
.detailsright p.last {border-bottom: 1px dotted #80B83E;}
.clear {clear: both;}

.pdfdownload {clear: both; border: 1px solid #80B83E; background: #F3F9EE; padding: 15px 15px 0px 15px; margin-bottom: 15px;}
.pdfdownload img.adobe {float: right; width: 112px; position: relative; top: -25px; right: -5px;}

.pdfdownloadflyer {width: 460px; border: 1px solid #80B83E; background: #F3F9EE; padding: 15px 15px 0px 15px; margin-bottom: 15px; height: 40px; display: block;}
.pdfdownloadflyer img.adobe {float: right; width: 112px; position: relative; top: -25px; right: -5px;}

input, select, textarea {border: 1px solid #80B83E; background: #F3F9EE; padding: 3px; font: 11px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px;}

table.order {clear: both; margin-top: 30px;}

ul.ordersteps {margin-bottom: 15px;}
ul.ordersteps li {border: 1px solid #64A22D; background: url(images/ordersteps-bkg.jpg) repeat-x; font: bold 11px Verdana, Arial, Helvetica, sans-serif; color: #FFF; padding: 5px 10px 7px 10px; display: block; float: left ; margin-right: 15px;}
ul.ordersteps li.last {margin-right: 0px;}
ul.ordersteps li.lastnotactive {margin-right: 0px; background: #F3F9EE; border: 1px solid #80B83E; font-weight: bold; color: #80B83E;}
ul.ordersteps li.notactive {background: #F3F9EE; border: 1px solid #80B83E; font-weight: bold; color: #80B83E;}

.nextstep {border: 1px solid #64A22D; background: #64A22D url(images/ordersteps-bkg.jpg) repeat-x; font: bold 11px Verdana, Arial, Helvetica, sans-serif; color: #FFF; padding: 5px 10px 7px 10px;}

td.bottom {font: bold 11px Verdana, Arial, Helvetica, sans-serif;}
td.bottom img {position: relative; top: 4px;}
td.righticon {text-align: right; width: 139px;}
td.righticon a:link, td.righticon a:visited {border: 0px;}
td.nopad {padding: 0px;}
.smltext {font: 11px Verdana, Arial, Helvetica, sans-serif;}

a.ordernow:link, a.ordernow:visited {background: url(images/ordernow.jpg) repeat-x; border: 1px solid #64A22D; font-weight: bold; color: #FFF; display: block; text-align: right; padding: 9px 10px 7px 10px; height: 19px; text-decoration: none;}
a.ordernow:hover {background: #64A22D;}
.smlgreen {font: 10px Verdana, Arial, Helvetica, sans-serif; color: #64A22D;}
.lgertxt {font: 600 140% Arial, Helvetica, sans-serif; color: #64A22D;}
.lgertxtblk {font: 600 140% Arial, Helvetica, sans-serif; font-weight: bold; color: #000;}

.team {border: 1px solid #80B83E; background: #F3F9EE; font: bold 10px Verdana, Arial, Helvetica, sans-serif; color: #000; text-align: right; float: left; width: 250px; padding: 5px; margin-right: 15px; margin-bottom: 15px;}
.team img {margin-bottom: 5px;}

/* Photo Montage */

#montage {position: relative; width: 710px; margin-bottom: 15px;}
#montage img {margin: 0 6px 6px 0; float: left; display: inline;}
#montage img.alt {margin: 0 0 6px 0;}
#montage img.altalt {margin: 0;}


/* Ordering Styles */

table .price {font-size: 14px; color: #80B83E; margin-bottom: 5px; font-weight: normal;}
table .pricesmall {font-size: 12px; font-weight: normal; color: #80B83E;}

h3.gap {margin-top: 15px;}
.subproducts {
	width: 710px;
	margin-bottom: 10px;
	padding: 0;
	margin-top: 5px;
	border-bottom: 1px dashed #D5D5D4;
	height: 90px;
}
.subproducts p {margin-bottom: 2px;}
.subproducts p.price {font-size: 18px; color: #80B83E; margin-bottom: 5px;}
.subproducts p .pricesmall {font-size: 12px;}
.subproducts img {
	margin-bottom: 0;
	padding: 0;
	margin-top: 2px;
	margin-right: 20px;
	margin-left: 20px;
	float: left;
}
.subprodis {
	float: left;
	margin: 0;
	padding: 0;
	position: relative;
}
.qty {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	font-weight: bold;
	color: #666666;
	margin-left: 75px;
	margin-right: 10px;
	position: absolute;
	height: 25px;
	width: 80px;
	top: 45px;
	left: 200px;
}

form#paypal {font-weight: bold; }
form#paypal select, input {margin: 0 15px 5px 7px;}
form#paypal input#button {border: none; background: none; margin-left: 0;}