/*  ---------------------------------------
	
	home.css
	````````
	home page stylesheets document for
	Urban Moto Shop
	
    ---------------------------------------  */


/*  ---------------------------------------
	Masthead
	- - - - - - - - - - - - - - - - - - - -  */
	
		#masthead {
			width: auto;
			height: auto;
		}
			/* hide mastheads */
			#masthead-options div {
				display: none;
			}
			#masthead #masthead-options {
				float: left;
				width: 667px;
			}
			#masthead #news-events {
				float: right;
				width: 287px;
				height: 237px;
				padding: 20px;
				background: #050505 url(../images/hm-news-events-bg.jpg);
				color: #ECECEC;
				font-size: 12px;
			}
				#news-events .item {
					padding: .5em 0;
					border-bottom: 1px solid #202020;
				}
				#news-events h3 {
					text-transform: uppercase;
					font-size: 17px;
				}
				#news-events h4 {
					background-color: transparent;
					color: #FE0005;
					margin-bottom: 3px;
					font-size: 13px;
				}
				#news-events p.date {
					background-color: transparent;
					color: #AAA;
				}
				#news-events p.info {
					background-color: transparent;
					color: #ECECEC;
				}
				#news-events a {
					background-color: transparent;
					color: #FE0005;
				}
				#news-events a:hover, #news-events a:hover h4 {
					background-color: transparent;
					color: #fff;
				}



/*  ---------------------------------------
	Content
	- - - - - - - - - - - - - - - - - - - -  */
	
		#content {
			margin: 0;
			width: 1026px;
		}
		
			#features {
				background: transparent url(../images/hm-features-bg.jpg) no-repeat;
				color: #2B2B2B;
				padding: 19px 34px;
				height: 141px;
				font-size: 12px;
				font-weight: bold;
				overflow: hidden;
			}
				#features .item {
					float: left;
					margin-left: 32px;
					width: 215px;
				}
					#features .first {
						margin-left: 0;
					}
					#features h4 {
						font-size: 16px;
						margin-bottom: 5px;
					}
					#features .feature-img {
						height: 100px;
						margin-bottom: 3px;
					}
						#features a {
							background-color: transparent;
							color: #3D3D3D;
						}
						#features a:hover {
							background-color: transparent;
							color: #000;
						}
						#features #feature-img-1 {
							background: transparent url(../images/feature-1.jpg) no-repeat;
							color: inherit;
						}
							#features #feature-img-1:hover {
								background: transparent url(../images/feature-1.jpg) no-repeat 0 -100px;
							}
						#features #feature-img-2 {
							background: transparent url(../images/feature-2.jpg) no-repeat;
							color: inherit;
						}
							#features #feature-img-2:hover {
								background: transparent url(../images/feature-2.jpg) no-repeat 0 -100px;
							}
						#features #feature-img-3 {
							background: transparent url(../images/feature-5.jpg) no-repeat;
							color: inherit;
						}
							#features #feature-img-3:hover {
								background: transparent url(../images/feature-5.jpg) no-repeat 0 -100px;
							}
						#features #feature-img-4 {
							background: transparent url(../images/feature-4.jpg) no-repeat;
							color: inherit;
						}
							#features #feature-img-4:hover {
								background: transparent url(../images/feature-4.jpg) no-repeat 0 -100px;
							}
		
			#scooter-list {
				display: block;
				list-style-type: none;
				border: 1px solid #d5d5d5;
				padding: 16px 0;
				height: 140px;
			}
					#scooter-list .scooter {
						text-align: center;
						display: block;
						margin: 0 23px;
					}
						#scooter-list .scooter strong {
							display: block;
							padding: 10px 0;
							border-bottom: 1px solid #c7c7c7;
							font-size: 12px;
							color: #696969;
							font-weight: normal;
						}
						#scooter-list .scooter:hover strong, #scooter-list .scooter:hover strong {
							border-bottom: 1px solid #000;
							color: #000;
						}
						
			/* jQuery Step Carousel Plugin: http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm */
			
				.stepcarousel {
					position: relative; /*leave this value alone*/
					overflow: scroll; /*leave this value alone*/
					width: 1024px;
					height: 140px; /*Height should be enough to fit largest content's height*/
				}				
				.stepcarousel .belt {
					position: absolute; /*leave this value alone*/
					left: 0;
					top: 0;
				}				
				.stepcarousel .panel {
					float: left; /*leave this value alone*/
					overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
					margin: 20px;
					width: 180px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
				}
						
			#footer {
				border-top: 0;
			}