/* @override 
	http://cp.local/styles.css
	http://localhost:4567/styles.css
*/

html, body {
	font-family: Georgia;
	font-style: italic;
	font-size: 12px;
	margin: 0;
	padding: 0;
	background-image: url(images/background1.jpg);
	background-repeat:repeat;
}

/* @group Divs */

#wrapper{
	width: 800px;
	margin: 10px auto 0;
	position: relative;
}

div#content > div{
	border-top: 1px solid #d5d5d4;
	padding-top: 20px;
	margin-top: 20px;
}

div.left-column{
	width: 520px;
}

div.left-column img{
	width: 510px;
	margin: 0 0 10px 0;
	padding: 0;
}

div.right-column{
	width: 260px;
	float: right;
}

/* @end */

.all-right{
  text-align: right;
}

/* @group Gallery thumbs */

/* An extra width is needed to allow the third image's picture to fit in the width */

div#gallery{
	margin-top: 5px;
	width: 820px;
	height: 505px;
}

div#gallery a{
	border: none;
}

div#gallery img{
	width: 253px;
	padding: 0;
	/* effective margin is 10 pixels right and bottom.
	offset to 15 and -5 to compensate for margins */
	margin: 0 15px 10px -5px;
	float: left;
	border: 5px white solid;
}

div#gallery img:hover{
	border: 5px yellow solid;
}

/* see also http://css-tricks.com/image-rollover-borders-that-do-not-change-layout/ for a possible solution */

/* @end */

div#gallery-large{
	margin-top: 5px;
	margin-bottom: -35px;
}

/* @group Header styles */

#header{
	padding-bottom: 0;
	margin-bottom: 20px;
	height: 125px;
}

#header img{
	float: left;
}

#header h2{
	padding-top: 30px;
	text-align: center;
	color: #FF0000;
	font-size: 16px;
	height: 90px;
	width: 385px;
	margin-left: 25px;
	border-left: 1px solid #d5d5d4;
	border-right: 1px solid #d5d5d4;
	float: left;
}

#header h2 span{
	display: block;
	font-size: 12px;
	color: black;
	font-weight: normal;
	padding-top: 1em;
}

#header #social-media{
	width: 30px;
	position: absolute;
	top: 0;
	right: 0;
}

#header #social-media img{
	padding-top: 10px;
}

#header ul{
	margin: 0;
	padding: 18px 25px 25px;
	float: left;
	background: url(images/navbg.jpg) no-repeat left center;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
}

#header ul li a{
	color: #21C49F;
	font-size: 14px;
	text-decoration: none;
}

#header ul li a:hover{
	color: #ffd200;
	font-size: 14px;
	text-decoration: underline;
}

/* @end */

/* @group Tweet Group */

#content .tweet{
	font-size: 10px;
	width: 248px;
	float: right;
	margin-left: 22px;
	color: #FF0000;
	font-style: normal;
	font-family: Arial;
	padding-left: 22px;
	padding-top: 0;
}

.tweet ul{
	margin: 0;
	padding: 0;
}

.tweet li{
	font-family: Georgia;
	font-size: 11px;
	font-style: italic;
	padding: 1em 0 0 0;
	color: #21C49F;
}

.tweet li a{
	color: inherit;
	text-decoration: none;
}

.tweet li a:hover{
	color: #ffd200;
	text-decoration: underline;
}

/* @group Tweet Group */

#content .tweet{
	font-size: 10px;
	width: 248px;
	float: right;
	margin-left: 22px;
	color: #FF0000;
	font-style: normal;
	font-family: Arial;
	padding-left: 22px;
	padding-top: 0;
}

.tweet ul{
	margin: 0;
	padding: 0;
}

.tweet li{
	font-family: Georgia;
	font-size: 11px;
	font-style: italic;
	padding: 1em 0 0 0;
	color: #21C49F;
}

.tweet li a{
	color: inherit;
	text-decoration: none;
}

.tweet li a:hover{
	color: #ffd200;
	text-decoration: underline;
}

/* @end */

/* @end */

/* @group FAQ page (in 'columns') */

/* for the items on the left */

h3 {
	color: #FF0000;
	width: 250px;
	font-size: 18px;
	float: left;
	margin-top: 0;
	font-weight: normal;
}

/* first paragraph of each group (except first first <p>) and non-first h3 gets extra padding */

p + h3{
	padding-top: 20px;
}

/* all paragraphs after an h3 tag */

h3 ~ p {
	margin: 0 0 0 290px;
	padding-bottom: 20px;
}

#faq-text hr{
	width: 700px;
	border: 0;
}

/* the FAQ list */

h3 + ul {
	margin: 0 0 0 290px;
	padding: 0;
}

h3 + ul li{
	list-style: none;
}

h3 + form{
	margin: 0 0 0 290px;
	padding: 0;	
}

h3 + form p{
	background-color: #F2F1EC;
	padding: 5px 10px;
}

h3 + form p label{
	width: 100px;
	display: block;
	float: left;
	padding: 0;
	margin: 0;
}

.texta {
	background-color: silver;
	border: 1px solid #1a1918;
	text-decoration: none;
	font-style: italic;
	color: black;
	font-family: Georgia;
}

.button {
	background-color: white;
	text-decoration: none;
	color: #21C49F;
	border: 1px hidden white;
	font: italic 14px Georgia;
}
/* @end */

/* @group Bike info */

dt{
	margin: 0;
	color: #27B0C2;
}

dd{
	margin: 0 0 1em 0;
}

/* @end */


/* @group Footer */

#footer{
	border-top: 1px solid #d5d5d4;
	margin-top: 60px;
	padding: 0;
	clear: both;
	width: 800px;
	color: #808181;
	text-align: center;
}

#footer p{
	padding-bottom: 20px;
	padding-top: 20px;
	margin: 0;
}

#footer img{
	display: block;
	margin: auto;
}

/* @end */

/* @group Default styles */

h2{
	font-size: 18px;
	color: #FF0000;
	font-weight: normal;
	padding: 0;
	margin: 0;
}

h2 span{
	color: black;
}

h4{
	font-size: 14px;
	font-weight: normal;
	margin-top: 0;
}

p{
	margin-top: 0;
}

p span{
	color: #808181;
}

p span em{
	color: #27B0C2;
}

p strong{
	color: #000;
	font-size: 13px;
}

a{
	color: #21C49F;
	text-decoration: none;
}



a:hover{
	color: #ffd200;
	text-decoration: underline;
}

a img { border: none; } 

li{
	list-style: none;
}

.current_size_link{
	color: #21C49F;
	text-decoration: none;
}

.hline {
	border-bottom: 1px solid #bfbfbf;
}

/* @end */

/* @group ScrollImages */

/*--Main Container--*/
.main_view {
	float: none;
	position: relative;
}
/*--Window/Masking Styles--*/
.window {
	height:400px;	
	width: 800px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
	
}
.image_reel img {
	float: left;
}

/*--Paging Styles--*/
.paging {
	position: absolute;
	bottom: 40px; right: -7px;
	width: 177px; height:40px;
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	line-height: 35px;
	background-color: black;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow:0px 0px 10px #333;
	-moz-box-shadow:0px 0px 10px #333;
	-webkit-box-shadow:0px 0px 10px #333;
}
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #fff;
}
.paging a.active {
	border-bottom-style: solid;
	border-bottom-width: 2px;
	color: #ffd200;
}
.paging a:hover {
	color: #ffd200;
}



/* @end */