﻿html {
	background:#555657;
	-webkit-font-smoothing: antialiased;
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	width: 100%;
	height: 100%;

}



a, a:hover, a:visited{
	text-decoration:underline;
	color:#000000;
	border: 0px;
	padding: 0px;
	margin: 0px;
	outline:none;
}

a:hover, .current {
	color: #6ac1e7;
	cursor:pointer;
	cursor:hand;
	text-decoration:none;
	border: 0px;
	padding: 0px;
	margin: 0px;
	outline:none;
	color:maroon;
}

body{
	margin:0px;
	border:0px;
	background:#555657;
	text-align: left;
    font-family:Arial, Helvetica, sans-serif;
	font-size: 11px;	
	color:black;
	cursor: default;
	text-decoration:inherit;
	width: 100%;
	height: 100%;
}




#main-wrapper{
	padding-left:0px;
	padding-right:0px;
}




h1{
	color:#444444;
	margin:5px 0px 10px 0px;
	text-align:center;
	font-weight:normal;
}


h2{
	color:red;
	margin:5px 0px 10px 0px;
	text-align:center;
	text-transform:uppercase;
	font-size:18px;
	font-weight:bold;
}



h3{
	font-weight:bold;
}

h4{
	color: #444444;
	margin: 5px 0px 10px 0px;
	text-align: center;
	font-size: xx-large;
	font-weight: bold;
	text-transform:uppercase;
}

.content{
	background:#eeeeee;
	padding: 0px 0px 0px 0px ;
	font-weight: normal;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 7px;
}

.content p{
	margin:5px 10px 5px 10px;	
}


.bullet_points{
	float:left;
	width:480px;
}


.bullet_points ul{
	font-size:22px;
	margin-left:40px;
	list-style:disc;
	font-weight:bold;
	color:#444444;
}


#contact{
	float:left;
	background-color:#bbbbbb; 
	border:thin #808080 groove;
	margin:20px 20px 20px 0px;;
	padding:12px;
	width:220px;
	height:520px;
	border-radius:4px 4px 4px 4px;
}


@media screen and (max-width:900px) {
	#contact{
		float:none;
		margin-left:auto;
		margin-right:auto;
	}
	
}



#contact_title{
	background-color:#555657;
	color:white;
	text-align:center;
	font-size:18px;
	margin:5px 0px 5px 0px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#959595+0,0d0d0d+46,010101+50,0a0a0a+53,4e4e4e+76,383838+87,1b1b1b+100;Black+Gloss+Pipe */
	background: #959595; /* Old browsers */
	background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
}

.contact_info{
	float:left;
	background-color:#bbbbbb; 
	border:thin #808080 groove;
	margin:20px 20px 20px 0px;;
	padding:12px;
	height:auto;
	border-radius:4px 4px 4px 4px;
}


@media screen and (max-width:900px) {
	#contact{
		float:none;
		margin-left:auto;
		margin-right:auto;
	}
	
	.contact_info{
		float:none;
		margin-left:auto;
		margin-right:auto;
	}
	
}


td.form_td{
	font-size:small;
	font-weight:normal;
}

.required{
	font-size:xx-small;
	color:red;
	vertical-align:top;
}




.form_input, textarea{
	font-size:small;
	margin:5px 5px 0px 26px;
	padding:5px 5px 0px 5px;
}



textarea{
	margin-left:0px;
}

.form_submit{

	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:5px;
	margin-bottom:10px;
}

#go{
	padding:6px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3c5bd+0,e86c57+50,ea2803+51,ff6600+75,c72200+100;Red+Gloss */
	background: #f3c5bd; /* Old browsers */
	background: -moz-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); /* IE6-9 */
	font-weight:bold;	
}


.f_norm{
	background-color:white;
	width:160px;
}
.f_error{
	background-color:lightpink;
}


.f_name{
	font-size:small;
}







 /* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin:0 auto;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align:center;
    
}

/* Float the list items side by side */
ul.topnav li {
	float: none;
    display: inline-block;
    max-width:150px;
    vertical-align:top;
}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    color: #f7f7f7;
    text-align: center;
    padding: 14px 21px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 18px;
    height:28px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

@media screen and (max-width:1025px) {
	ul.topnav li a {
	    padding: 14px 13px;
	    font-size: 12px;
	}
}


 /* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) 
@media screen and (max-width:680px) {

	ul.topnav li {
		float: left;
	}	


  ul.topnav li:not(:first-child) {
  	display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}
*/
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens 
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}


*/


.line_gray{
  content:""; 
  height:2px;
  background:-moz-linear-gradient(left, #FFFFFF 0%,black 50%,#FFFFFF 100%); 
  background:-webkit-linear-gradient(left, #FFFFFF 0%,black  50%,#FFFFFF 100%); 
  background:linear-gradient(left, #FFFFFF 0%,#160602 50%,black  100%);
  width:100%;
  display:block;
  margin:10px 0px 10px 0px;
}


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






#footer{
	
	clear:both;
}



.shadow{
    box-shadow: 10px 10px 5px grey;
}

.cost{
	color: #d42f27;
}

.service_main{
	width:100%;
	background-color:yellow;
}

.click{
	color:red;
	font-weight:bold;
	
}

a.moreinfo {
	color:#0099FF;
	color:maroon;
	font-size:11px;
	font-variant:small-caps;
	margin-left:10px;
}

a.moreinfo:hover {
	text-decoration:underline;
}






.googlemap{
	width:85%;
	max-width:650px;
	height:400px;
	margin-left:auto;
	margin-right:auto;
	border:thick black ridge;
}




@media screen and (max-width:600px) {
	.googlemap{
		width:90%;
		height:300px;
	}
	
}









.largephoto{
	width:100%;
	float:right;
	clear:none;
	max-width:900px;
}

.largephoto img{
	width:100%;
}

.bigtext{
	font-size:17px;
	color:maroon;
	font-weight:bold;
}





.smallphoto{
	float:right;
	max-width:323px;
}





.fuel_outer{
	width:700px;
	margin-left:auto;
	margin-right:auto;
}


.premium_div{
	float:left;
	background-image:url('images/premium.png');
	background-size:contain;
	background-repeat:no-repeat;
	width:350px;
	height:175px;
}

.diesel_div{
	float:left;
	background-image:url('images/diesel.png');
	background-size:contain;
	background-repeat:no-repeat;
	width:350px;
	height:175px;
}



@media screen and (max-width:845px) {
		
	.fuel_outer{
		width:350px;
		margin-left:auto;
		margin-right:auto;
	}
	
	
}







.fuel_price{
	font-size:60px;
	font-weight:bold;
	color:black;
	position:relative;
	top:70px;
	left:128px;
	width:190px;
}

.dollors{
	font-size:50px;
	position:relative;
	bottom: 5px;
}


.cents{
	font-size:60px;
}


.points{
	xdisplay:inline-block;
	font-size:30px;
	position:relative;
	bottom: 5px;
	left: 5px;
}



@media screen and (max-width:545px) {
		
	.fuel_price{
		font-size:45px;
		font-weight:bold;
		color:black;
		position:relative;
		top:70px;
		left:128px;
		width:190px;
	}
	
	.dollors{
		font-size:35px;
		  position:relative;
		  bottom: 5px;
	}
	
	
	.cents{
		font-size:45px;
	}
	
	
	.points{
		display:inline-block;
		font-size:25px;
		position:relative;
		bottom: 5px;
		left: 5px;
	}
	
	
}










.info1{
	margin-left:auto;
	margin-right:auto;
	width:880px;
	
}

@media screen and (max-width:845px) {
		
	.info1{
		width:300px;
		
	}
		
	.bullet_points{
		width:300px;
	}
	
		
	.bullet_points ul{
		font-size:18px;
	}
}


.backgrad{

knob
background: rgba(187,187,187,1);
background: -moz-linear-gradient(left, rgba(187,187,187,1) 0%, rgba(238,238,238,1) 10%, rgba(238,238,238,1) 90%, rgba(187,187,187,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(187,187,187,1)), color-stop(10%, rgba(238,238,238,1)), color-stop(90%, rgba(238,238,238,1)), color-stop(100%, rgba(187,187,187,1)));
background: -webkit-linear-gradient(left, rgba(187,187,187,1) 0%, rgba(238,238,238,1) 10%, rgba(238,238,238,1) 90%, rgba(187,187,187,1) 100%);
background: -o-linear-gradient(left, rgba(187,187,187,1) 0%, rgba(238,238,238,1) 10%, rgba(238,238,238,1) 90%, rgba(187,187,187,1) 100%);
background: -ms-linear-gradient(left, rgba(187,187,187,1) 0%, rgba(238,238,238,1) 10%, rgba(238,238,238,1) 90%, rgba(187,187,187,1) 100%);
background: linear-gradient(to right, rgba(187,187,187,1) 0%, rgba(238,238,238,1) 10%, rgba(238,238,238,1) 90%, rgba(187,187,187,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#bbbbbb', GradientType=1 );

}

.active{
	background-color:#444444;
}




.question{
	color:red;
	font-size:22px;
	font-weight:bold;
}


.answer{
	font-size:14px;
	color:dodgerblue;
}


ol.steps{
	margin-left:35px;
	padding-bottom:12px;
}


.steps li{
	font-size:14px;
	padding-bottom:12px;
	color:dodgerblue;
}

.changes{
	background-color:red;
	color:black;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	display:none;
	margin-left:auto;
	margin-right:auto;
	max-width:250px;
}
