@charset "utf-8";
/*
-----------------------------------------------
		 Kelly Springfield Trucking 
			
				CSS Document
-----------------------------------------------
*/


:link,:visited {text-decoration: none;}
ul,ol {list-style: none;}
h1,h2,h3,h4,h5,h6,pre,code,p {font-size: 1em;}
ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin: 0; padding: 0;}
a img,:link img,:visited img {border: none;}
address {font-style: normal;}
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
.clear { clear: both; }



body {
	background: #1e1e1e;
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	font-size: 12px;
}


.inner {
	width: 960px;
	position: relative;
	margin: 0 auto;
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
	font-size: 26px;
	color: #333333;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0 0 20px 0;
	font-family: Arial, Helvetica, sans-serif;
}

	.services {
		padding: 0 0 0 30px;
		background: url('../i/icon_service.png') no-repeat top left;
	}
	
	.camera {
		padding: 0 0 0 40px;
		background: url('../i/icon_camera.png') no-repeat top left;
	}

h2 {
	font-size: 22px;
	font-weight: normal;
	color: #333333;
}

h3 {
	font-size: 20px;
}

h4 {
	font-size: 18px;
	text-transform: none;
	font-weight: normal;
	color: #333333;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 14px;
	text-transform: none;
}

#content p {
	margin: 0 0 20px 0;	
	line-height: 20px;
}

#content ul, #content ol {
	line-height: 20px;
}

	.content > ul, .content > ol {
		margin: 0 0 20px 0;	
	}


#content a {
	color: #7e0015;
}

#content a:hover {
	text-decoration: underline;
}	

	#content ul,
	#content ol {
		margin-left: 20px;
	}
	
		#content ul > li {
			list-style: disc;
		}
		
			#content ul > li > ul > li {
				list-style: circle;
			}
			
				#content ul > li > ul > li > ul > li {
				list-style: square;
			}
		
		#content ol > li {
			list-style: decimal;
		}

.underline {
	text-decoration: underline;
}


/* Buttons */

.button {
	display: block;	
}

.button * {
	color: #e2e2e2!important;
	text-decoration: none!important;
}

	.button a {
		display: block;
		width: 100%;
		text-align: center;
	}
		
		.button a:hover {
			color: #FFFFFF!important;
		}

.red {
	background: url('../i/bg-button-red.png');
	width: 149px;
	height: 57px;
	line-height: 57px;
	font-size: 14px;
}

#slideshow .red {
	text-transform: uppercase;
}


/* Free Quote Button */

.red.big {
	background: url('../i/bg-button-red-big.png') no-repeat top center;
	width: 170px;
	height: 63px;
	line-height: normal;
	padding: 15px;
	overflow: hidden;
	margin: 0 0 20px 0;
}

	.red.big * {
		font-size: 14px;
		line-height: 16px;
	}
	
	.red.big h1 {
		font-size: 18px;
		margin: 0 0 8px 0;
	}
	
	.red.big a {
		display: inline;
		text-align: left;
	}
	
		.red.big a:hover {
			text-decoration: underline;
		}
	
	.red.button p span {
		font-size: 16px;
		font-weight: bold;
	}


/* Gray Button */

.gray {
	width: 135px;
	height: 37px;
	line-height: 37px;
	background: url('../i/bg-button-gray.png') no-repeat top center;
}



/* Header */

#header {
	width: 100%;
	background: url('../i/bg-header.jpg') no-repeat top center;
}

#header .inner {
	height: 121px;
}

#header .logo {
	position: absolute;
	top: 16px;
	left: 0px;
}

#header .phone {
	position: absolute;
	top: 16px;
	right: 0px;
	width: 255px;
	text-align: right;
	background: url('../i/icon_phone.png') no-repeat center left;
	padding: 4px 0 0 0 ;
}

#header .navbar {
	position: absolute;
	right: 0px;
	bottom: 30px;
	height: 31px;
}

	#header .navbar > ul > li {
		display: inline-block;
		float: left;
		margin: 0 0 0 10px;
		line-height: 31px;
		height: 31px;
		padding-left: 10px;
		font-size: 15px;
		text-transform: uppercase;
		font-weight: bold;
		position: relative;
	}
	
	#header .navbar > ul > li > div > a {
		color: #FFFFFF!important;
		display: block;
		padding: 0px 3px;
		margin-right: 10px;
	}
	
	#header .navbar > ul > li.arrow > div {
		background: url('../i/bg-navbar-arrow.png') no-repeat right top
	}
	
	#header .navbar > ul > li.current,
	#header .navbar > ul > li:hover {
		background: url('../i/bg-navbar-current-left.png') no-repeat top left;
	}
	
	#header .navbar > ul > li.current > div,
	#header .navbar > ul > li:hover > div {
		background: url('../i/bg-navbar-current-right.png') no-repeat top right;
		display: block;
		height: 31px!important;
		line-height: 31px;
		width: 100%;
	}
	
		#header .navbar > ul > li.current > div > a,
		#header .navbar > ul > li:hover > div > a {
			display: block;
			color: #520000!important;
			background: url('../i/bg-navbar-current.png') repeat-x top center;
			line-height: 31px;
			height: 31px;
		}
	
		#header .navbar > ul > li.current.arrow > div {
			background-image: url('../i/bg-navbar-current-right-arrow.png');
		}
		
		#header .navbar > ul > li.arrow:hover > div {
			background-image: url('../i/bg-navbar-current-right-arrow.png');
		}
		
			#header .navbar > ul > li.arrow > div > a {
				margin-right: 20px;
			}
	
	
	/* Sub Menu */
	
	#header .navbar > ul > li > ul {
		display: none;
	}
	
	#header .navbar > ul > li:hover > ul {
		display: block;
		width: 200px;
		position: absolute;
		top: 30px;
		left: 0px;
		padding-top: 12px;
		z-index: 999;
		border-bottom: #CCCCCC 1px solid;
	}
	
		#header .navbar > ul > li:hover > ul > li {
			background: #EFEFEF;
			padding: 0px 10px;
			border: #CCCCCC 1px solid;
			border-bottom: 0px;
			font-size: 12px;
			text-transform: none;
			padding: 0px!important;
			
		}
		
			#header .navbar > ul > li:hover > ul > li:hover {
				background: #FFFFFF;
			}
				#header .navbar > ul > li:hover > ul > li:hover > a {
					color: #000000;
				}
		
		#header .navbar > ul > li:hover > ul > li > a {
			display: block;
			color: #333333;
			padding: 0px 10px!important;
			color: #666666;
		}
		





/* Slideshow */

#slideshow {
	width: 100%;
	background: url('../i/bg-slideshow.jpg') no-repeat top center;
}

#slideshow .inner {
	height: 45px;
}

	.home #slideshow .inner {
		height: 392px;
		overflow: hidden;
	}



#slideshow .controls {
	position: absolute;
	top: 165px;
	height: 60px;
	width: 60px;
	z-index: 5;
}

	#slideshow #btnPrev {
		background: url('../i/slideshow-arrow-left.png') no-repeat top center;
		left: 0px;
	}
	
	#slideshow #btnNext {
		background: url('../i/slideshow-arrow-right.png') no-repeat top center;
		right: 0px;
	}

#slideshow ul {
	width: 960px;
	height: 344px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 2;
	overflow: hidden;
}

	#slideshow ul > li {
		position: relative;
		height: 344px;
		overflow: hidden;
		width: 960px;
		height: 344px;
	}
	
	#slideshow ul > li > img {
		position: absolute;
		top: 0px;
		left: 25px;
		background: url('../i/bg-slideshow-img.png') no-repeat top center;
		padding: 7px 7px 35px 7px;
	}
	
	#slideshow ul > li > .text {
		position: absolute;
		top: 40px;
		right: 90px;
		width: 290px;
	}
	
		#slideshow ul > li > .text h1, 
		#slideshow ul > li > .text h2,
		#slideshow ul > li > .text,
		#slideshow ul > li > .text a {
			color: #FFFFFF;
		}
		
		#slideshow ul > li > .text h1, 
		#slideshow ul > li > .text h2,
		#slideshow ul > li > .text p {
			margin-left: 5px;
		}
		
		#slideshow ul > li > .text h1,
		#slideshow ul > li > .text h2 {
			margin-bottom: 5px;	
		}
		
		#slideshow ul > li > .text p {
			margin-bottom: 15px;
		}

#slideshow > .inner > p {
	display: block;
	width: 100%;
	text-align: right;
	height: 45px!important;
	line-height: 45px!important;
	font-size: 14px;
	text-transform: uppercase;
}

#slideshow > .inner > p,
#slideshow > .inner > p > a {
	color: #FFFFFF!important;
}





/* Content */

#content {
	position: relative;
	z-index: 4;
	background: #FFFFFF!important;
}

#content .inner {
	padding-top: 35px;
	padding-bottom: 35px;
}




/* Columns */

#col-left {
	float: left;
}

	.home #col-left {
		width: 200px;
		margin: 0 30px 0 0;
	}
	
	.home #col-left ul {
		margin-bottom: 20px;
	}

#col-right {
	float: right;
}

	.home #col-right {
		width: 300px;
	}

.content {
	float: left;
	width: 100%;
}

	.home .content {
		width: 410px;
		margin: 0 auto;
	}
	
	#col-right p {
		margin-left: 30px;
	}



/* List with Red Quotes */
ul.arrows {
	margin-left: 20px!important;
}

ul.arrows li {
	list-style: url('../i/icon_raquo.png')!important;
}



/* Home Page Gallery */

.gallery {
	width: 100%;
	margin: 0 0 20px 0;
}

	.gallery .image {
		float: left;
		width: 130px;
		height: 130px;
		overflow: hidden;
		position: relative;
		margin-bottom: 5px;
		padding: 3px;
		border: #CCCCCC 1px solid;
	}
	
	.gallery .image img {
		width: 130px;
		height: 130px;
	}
	
	.gallery .image.first {
		margin: 0 5px 0 0;
	}
	
		.gallery .image p {
			background: url('../i/bg-gallery-title.png');
			position: absolute;
			bottom: 3px;
			left: 3px;
			padding: 7px;
			margin: 0!important;
			color: #e2e2e2;
			text-align: center;
			width: 116px;
		}





/* Footer */

#footer {
	clear: both;
	background: url('../i/bg-footer.jpg') repeat-x top center;
}

#footer .inner {
	height: 167px;
}

#footer * {
	color: #7f7f7f;
}

#footer a:hover {
	color: #FFFFFF!important;
}	

	#footer .logo {
		position: absolute;
		top: 18px;
		left: 0px;
	}
	
	#footer .columns {
		position: absolute;
		left: 230px;
		top: 18px;
		width: 410px;
		height: 61px;
	}
	
		#footer .columns .col {
			width: 50%;
			float: left;
		}
		
		#footer .columns .col strong {
			color: #FFFFFF;
		}
	
	#footer .social {
		position: absolute;
		right: 0px;
		top: 30px;
		width: 290px;
		height: 43px;
	}
	
		#footer .social h2 {
			float: left;
			text-align: right;
			font-size: 18px;
			height: 43px;
			line-height: 43px;
		}
		
		#footer .social ul {
			float: right;
			margin: 0px!important;
		}
	
		#footer .social ul li {
			display: inline;
			float: right;
		}
		
			#footer .social ul li img {
				margin-left: 2px;
			}
	
	#footer .copyright {
		position: absolute;
		bottom: 18px;
		left: 0px;
	}
	
		#footer .copyright ul {
			margin: 0 0 5px 0;
			display: block;
			width: 100%;
			float: left;
		}
		
			#footer .copyright ul li {
				display: inline-block;
				float: left;
				padding-left: 10px;
				line-height: 14px;
			}
			
			#footer .copyright ul li:first-child {
				padding: 0 10px 0 0;
				border-right: #7f7f7f 1px solid;
			}
			
			#footer .copyright p {
				clear: both;
			}
	
	
	#footer .navbar {
		position: absolute;
		bottom: 25px;
		right: 0px;
		height: 15px;
	}

	#footer .navbar > ul > li {
		display: inline-block;
		float: left;
		line-height: 15px;
		height: 15px;
		padding: 0px 10px;
		font-size: 15px;
		text-transform: uppercase;
		border-right: #7f7f7f 1px solid;
	}
	
		#footer .navbar > ul > li:last-child {
			border: 0px;
			padding-right: 0px;
			margin-right: 0px;
		}
	
	#footer .navbar > ul > li > a {
		color: #7f7f7f;
		display: block;
	}





/* Images */

.content img {
	padding: 3px;
	border: #CCCCCC 1px solid;
}

.content .right {
	margin: 0 0 10px 10px;
	float: right;
}

.content .left {
	margin: 0 10px 10px 0;
	float: left;
}

	.content .right.image,
	.content .left.image  {
		padding-bottom: 37px;
		background: url('../i/bg-image.png') no-repeat bottom center;
	}




/* HR */

hr {
	width: 100%;
	clear: both;
	border: 0px;
	color: #FFFFFF;
	background: url('../i/bg-separator.png') no-repeat top center;
	height: 9px;
	margin: 20px 0!important;
}





/* Contact Form */
fieldset {
	border: 0px;
}
label {
	float: left;
	display: inline-block;
	width: 250px;
	clear: both;
}

label span {
	color: #990000;
}

label, input, textarea, select {
	margin: 5px 0 5px 0;
}

input, textarea, select {
	border: #999999 1px solid;
	background-color: #F7F7F7;
	color: #666666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	display: inline-block;
	width: 200px;
	height: 18px;
	line-height: 18px;
	padding: 3px;
}

textarea {
	width: 350px;
	height: 200px;
}

input:focus, textarea:focus, select:focus,
input:hover, textarea:hover, select:hover {
	border-color: #990000;
	color: #990000;
}



/* Checkboxes */

input[type=checkbox] {
	width: 13px;
	height: 13px;
	margin: 0 4px 0 6px;
	padding: 0px;
	clear: both;
	float: left;
	background: none;
	border:none;
}


/* Submit Button */
#buttons {
	padding-left: 250px;
}
input[type=submit],
input[type=reset] {
	display: block;
	float: left;
	clear: none;
	width: 80px;
	height: 30px;
	line-height: 30px;
	padding: 1px;
}



/* Captcha */

#captcha input {
	margin: 0 0 0 250px;
	width: 105px;
}

#captcha img {
	margin: 5px 5px 5px 0 !important;
	border: #CCCCCC 1px solid;
	padding: 5px;
}


/* Error Message */

.error {
	color: #990000;
	background-color: #FFEAEA;
	border: #990000 1px solid;
	padding: 5px;
}

.error strong {
	color: #990000;
}

.success {
	color: #003300;
	background-color: #E4F3E7;
	border: #003300 1px solid;
	padding: 5px;
}




/* Gallery */
.gallery {
	text-align: center;
}

.gallery img {
	margin: 10px;
}

#col-right .gallery img {
	margin: 0px!important
}