@charset "utf-8";
body {
	font: 103% Verdana, Geneva, sans-serif;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f1f1f1+0,b8bac6+100,fefefe+100 */
background: #f1f1f1; /* Old browsers */
background: -moz-linear-gradient(top,  #f1f1f1 0%, #b8bac6 100%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(100%,#b8bac6), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f1f1f1 0%,#b8bac6 100%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f1f1f1 0%,#b8bac6 100%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f1f1f1 0%,#b8bac6 100%,#fefefe 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f1f1f1 0%,#b8bac6 100%,#fefefe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */

	margin: 0;
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #222;
/*	height:100%; /*for sticky footer*/

}
/*html{height:100%;}/*for sticky footer*/
#contact {
    color: #fff;
    float: right;
    font-size: 18px;
    width: 190px;
	margin-top: 46px;
	text-align: left;
	
}
#mainContent a{color:#a00; font-weight:700;}
#mainContent a:link{color:#a00; text-decoration:none; }
#mainContent a:visited{color:#a00; text-decoration:none;}
#mainContent a:hover{
	color:#fff;
	background:#a00;
	}
#or { 
text-align:center;
float: left;
width: 65px;
margin-top: 10px;
margin-left: 10px;
background: #a00;
color: #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

}
#or h2 {color: #fff;}

 .container {
	 padding:0;
	width: 1000px; 
	
		margin-left: auto;
	margin-right: auto;/* the auto margins (in conjunction with a width) center the page */
		text-align: left; /* this overrides the text-align: center on the body element. */

/*these 4 lines for sticky footer
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin-bottom: -100px; /*twice height of footer nav*/
}
.headerContainer
{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4789e0+0,002289+100 */
background: #4789e0; /* Old browsers */
background: -moz-linear-gradient(top,  #4789e0 0%, #002289 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4789e0), color-stop(100%,#002289)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #4789e0 0%,#002289 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #4789e0 0%,#002289 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #4789e0 0%,#002289 100%); /* IE10+ */
background: linear-gradient(to bottom,  #4789e0 0%,#002289 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4789e0', endColorstr='#002289',GradientType=0 ); /* IE6-9 */


	/*background-size:auto 3000px;*/

}
 #header {
	width:1000px;
	height:100px;
	text-align:center;
	/*background: #33F url(images/header.png) no-repeat; */ 
	padding:30px 0 0 0;
	color:#060;
}
#title
{
	/*margin-top:22px;
background:url(images/halnon-oils-gorey-header.png) no-repeat;
width:562px;
height:88px;*/

	text-shadow: 4px 4px 2px rgba(102, 102, 102, 1);
}
#bannor
{
	width: 400px;
	font-size:50px;
	border-top: 1px solid white;
}
#subtitle
{
	margin-top:20px;
margin-right:15px;
text-align:center;
width:143px;
float:right;
color:#FF0;
font-weight:800;
font-size:14px;
}


#tag
{
	margin-top:-20px;;
	float:right;
	width:193px;
	height:140px;
	padding-right:75px;
}

#navContainer
{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3838+0,aa0000+100 */
background: #ff3838; /* Old browsers */
background: -moz-linear-gradient(top,  #ff3838 0%, #aa0000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3838), color-stop(100%,#aa0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff3838 0%,#aa0000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff3838 0%,#aa0000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff3838 0%,#aa0000 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ff3838 0%,#aa0000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3838', endColorstr='#aa0000',GradientType=0 ); /* IE6-9 */



}
#headernav {

	width: 1000px; 
	font-size:15px; 
	font-weight:bold;
	/*background: #33f url(images/headernav.png) no-repeat; */
	height:40px;
	text-align:center;
	padding:0px 0 10px 0; 
	margin-left: auto;
	margin-right: auto;
	margin-top:30px;

}
 #banner{
	width:1000px;
	padding:0; 
	margin:0;
/*	background: #fff url(images/banner.jpg) no-repeat; */
	height:150px;
}
#headernav a{color:#fff; text-decoration:none;}
#headernav a:link{color:#fff; text-decoration:none;}
#headernav a:visited{color:#fff; text-decoration:none;}
#headernav a:hover
{
	background-color:#fff; 
	color:#a00; 
	display:inline-block; /*allows background color to show*/
}

#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	margin:0;
	color:#fff;
}

 #mainContent {
	margin-top:150px;
	margin-left:10px;
	margin:0;
	padding: 0px;
	font-size: 12px;
	min-height:700px;
	text-align: left;
}
#footerContainer /*This container is used to apply a background to the footer*/
{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4789e0+0,002289+100 */
background: #4789e0; /* Old browsers */
background: -moz-linear-gradient(top,  #4789e0 0%, #002289 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4789e0), color-stop(100%,#002289)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #4789e0 0%,#002289 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #4789e0 0%,#002289 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #4789e0 0%,#002289 100%); /* IE10+ */
background: linear-gradient(to bottom,  #4789e0 0%,#002289 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4789e0', endColorstr='#002289',GradientType=0 ); /* IE6-9 */

	padding-top: 10px;
}
#footer 
{ 
 	margin:0;
	padding:0;
	width:100%;
	/*background:#06F url(images/footer_slice.jpg) repeat-x;*/
	height:50px;
} 
/*.push{height:50px;}/*height of footer*/
 #footer p {
	width:1000px;
	
	 font-size:14px;
	 color:#fff;
	 text-align:center;
	margin: 0 auto; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 0px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
#payment_logos
{
	position: relative;
    top: 10px;
}
#mainContent h1, h1 {
	text-align:left;
	font-size:20px;
	color:#a00;
}
#mainContent h2 {text-align:center; font-size:18px; color:#a00;}
h2 { font-size:18px; color:#a00;}
h2 a {color: #a00; text-decoration:none}
#mainContent h3, h3 {
	font-size:16px;
	color: #a00;
}



#headernav ul {
	margin-left:5px;
	padding-left:0px;
	padding-top:15px;}
#headernav ul li{
	display:inline;
	list-style-image: none;
	list-style-type: none;
	padding-right: 40px;
	padding-left: 5px;
	margin:0;
}
#sideBar{
	float:right;
	width: 270px;
	padding: 0;
	margin: 8px 0 15px 15px;
	text-align:center;
	font-size:12px;
	padding-left: 0px;
	/*background:url(images/side_bar_background.jpg) no-repeat top left;*/
	height:550px;

	}

	/*Backgrounds for sideBar, order, query & box200*/
	#sideBar, #order, #query, .box200
	{
		border: #a00 5px solid;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f6f6+0,dbdce2+48,b8bac6+100,f5f6f6+100 */
background: #f5f6f6; /* Old browsers */
background: -moz-linear-gradient(top,  #f5f6f6 0%, #dbdce2 48%, #b8bac6 100%, #f5f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f6), color-stop(48%,#dbdce2), color-stop(100%,#b8bac6), color-stop(100%,#f5f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f5f6f6 0%,#dbdce2 48%,#b8bac6 100%,#f5f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f5f6f6 0%,#dbdce2 48%,#b8bac6 100%,#f5f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f5f6f6 0%,#dbdce2 48%,#b8bac6 100%,#f5f6f6 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f5f6f6 0%,#dbdce2 48%,#b8bac6 100%,#f5f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */




		/*Bevel the corners*/
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
#sideBar table {
	 /*border: solid #ff9 medium;*/
	 /*width:85%px; if set this to px or % value it creates blank space to right of header & footer on page! /*/
	/* margin-left:10%; margin-right:10%;*/
	 border-spacing:0px;
	 padding:0;
	 border: none 0px;
	 text-align:left;
	padding-left:10px;
	 
	 }
	 
#sideBar table b{font-size:11px;}
td.right{text-align:right;}
tr.heading{
	font-weight:bold;
	font-size:20px;
	height:40px;
}
#sideBar img{ margin:0; padding:0; border:none;}
th 
{text-align:center;; 
font-size:16px;}

td, th {
	/*border: 1px solid #ff9;*/
	padding:3px;
	margin: 3px;
	border-spacing:0px 0px;

}

td {
	font-size:11px;
	height:20px;
	
}


.float-right{float:right; padding:10px; }

#query{
	margin: 10px 5px 10px 0;
	float:left;
	width: 285px;
	/*background: #FFED33;*/ /*Old Background*/
	padding: 7px 15px 8px 5px;

	}
#query h2 {margin-top: -10px; margin-bottom: 0px; }	
#order {
	width: 255px; 
float: right;
	/*background: #FFED33;*/ /*Old Background*/
color: #fff;
margin: 10px 0 10px 5px;
padding: 5px 10px 0 10px;


}	

.lock{
background: #fff;
overflow:hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #00F;
margin-left: 22px;
margin-bottom: 15px;
float:left;
border: thin #ccc solid;
}
#oilmonitor{
	background-image:url(images/apollo_ultrasonic.png);
	background-repeat:no-repeat;
	width: 241px; 
height: 241px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #00F;
margin-left: 22px;
float:left;
border: thin #ccc solid;
}	
#oilmonitor h2 {margin-top: 1px; font-size: 17px;}
#oilmonitor h2 a:link {text-decoration: none; }
#sideContact {font-size: 18px; line-height: 35px; margin-top: 20px;}

#order h2 {margin-top: -1px; margin-bottom: -1px;}
.form-border{	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-color: #FF9;
	border-right-color: #ff9;
	border-bottom-color: #ff9;
	border-left-color: #ff9;
	background:#ffc;
}
#rightside{width:220px; float:right; padding-right:10px; }
#rightside img {padding: 5px 0px 5px 10px;}

.table-border{
	border:thin #ccc solid; 
	border-collapse:collapse;

	 
}

.container #mainContent table tr td p { /*T&C table padding for text*/
	padding-left: 10px;
	padding-right: 10px;
}
.container #sideBar form {
	/*background-color: #FFEB20;*/
}
.clearfloat{clear:both;}
/*#sideBar a img, #sideBar img a:link, #tag  a img, #tag  a:link img{border:none 0px; vertical-align:bottom;}
#sideBar a:hover img, #tag  a:hover img{border:none; color:#fff;}
*/


	
	.clearfloat {clear:both;}
	
.container #mainContent #orderform table tr td label #submit { /*submit button*/
	background:#00F;
	color:#fff;
	font-weight:bold;
	height:30px;
	width:150px;
}

#hometext{float: left; width: 240px; text-align:justify;}

.imageLink {
filter:alpha(opacity=100);
opacity:1.0;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.imageLink:hover, .tank:hover {
filter:alpha(opacity=75);
opacity:0.75;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#slideshow
{
	float:right;
	width: 450px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	overflow:hidden;
}

#order img a, #order img a:link {border: none;}

.box200
{
	margin: 10px 13px 10px 0;
	float:left;
	width: 200px;
		/*background:#FFED33;*/ /*Old background*/
	padding: 5px;
	text-align:center;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: #fff;
	
	}
.box200 h3 {margin-bottom: 0px; margin-top: 0px; text-align:center;}
.tank{
float:left;
width:220px;
margin: 0 15px 10px 0;
background: #fff;
border: #999 solid 1px;
text-align:center;
}
.tank h4{
font-size: 10px;
}
.tank:hover {
filter:alpha(opacity=75);
opacity:0.75;border: #999 solid 1px;}

.tank h4 a {text-decoration:none;}