/* Global Resetting */
html{	
	width: 100%;
	height: 100%;
	background:url(../images/body_bg.gif) repeat;
}
body{height: 100%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px;}
.logo{clear:both; margin: 25px auto 0; width: 712px; height:auto; text-align: left;}
.logo_static{clear:both; margin: 15px auto 0; width: 712px; height:auto; text-align: left;}
.container{color: #000000; width: 700px; height:auto; min-height: 630px; text-align: left; background-color: #ffffff; border: 3px solid #005095;}
.navigation{clear:both; margin: 0 auto 10px; background-image: url(../images/menu_bkground.gif); width: 710px; height:32px; padding: 0px; text-align: left; z-index:100;}
.navigation_static{clear:both; margin: 10px auto 30px; background-color: #005095; width: 700px; height:20px; padding: 0px; text-align: left; border: 3px solid #005095; z-index:100;}
.environment{clear:both; margin: 10px auto 30px; background-color:#8FAFDE; background-image: url(../images/gulf_environment.jpg); background-repeat: no-repeat; color:#FFFFFF; width: 170px; height:140px; text-align: center; border: 1px solid #005095;}
.retail{clear:both; margin: 10px auto 10px; background-color:#F68A2C; color:#005095; width: 160px; height:auto; padding: 7px; text-align: left; border: 1px solid #005095;}
.blue{clear:both; margin: 10px auto 10px; background-color:#B3DBF3; color:#005095; width: 160px; height:auto; padding: 7px; text-align: left; border: 1px solid #005095;}
.lubricants{clear:both; margin: 10px auto 10px; background-color:#F68A2C; color:#005095; width: 160px; height:auto; padding: 7px; text-align: left; border: 1px solid #005095;}
.distribution{clear:both; margin: 10px auto 10px; background-color:#F68A2C; color:#005095; width: 160px; height:auto; padding: 7px; text-align: left; border: 1px solid #005095;}
.footer{clear:both; margin: 0px auto 10px 0px; width: 700px; height:auto; padding: 7px; text-align: center; font-size: 10px; color: #005095;}

.orange {color: #F68A2C;}
* {
	font-size: 1em;
	/* reset font-sizes to 1em == 10px */
	padding: 0;
	margin: 0;
	font-family:Verdana,Helvetica,sans-serif;
	list-style:none;
}
a img{
	border:0;
}
.clear{
	clear:both;
}

/* Layout CSS */
#Main {
	margin:0px auto;
	width:700px;
}
#Header {
	clear:left;
}
	#Header h1 {
		color:#000000;
		font-size:1.5em;
		line-height:4.5em;
		padding-left:20px;
	}
	
#Search_Box {
	float: right;
}

/* Navigation */
.menu {width:700px; height:32px; font-size:11px; position:relative; z-index:100; font-weight: bold; padding-top: 1px;}
/* hack to correct IE5.5 faulty box model */
* html .menu {width:700px; w\idth:745px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding-right:10px;margin:5px;list-style-type:none;}
.menu ul ul {width:149px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;position:relative;}
/* style the links for the top level */
.menu a, .menu a:visited {display:block; font-size:11px; text-decoration:none; color:#FFFFFF; height:20px; border:1px solid #005095; border-width:1px 0 1px 1px; border-right: 1px solid #FFFFFF; background:#005095; padding:0 10px 0 10px; line-height:19px;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background-color:#005095;}
/* style the second level hover */
.menu ul ul a.drop:hover{background-color:#005095;}
.menu ul ul :hover > a.drop {background-color:#005095;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background-color:#D2F1F7; color: #005095;}
/* style the third level hover */
.menu ul ul ul a:hover {background-color:#005095; color: #FFFFFF;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:17px;left:0; width:149px;}
/* another hack for IE5.5 */
* html .menu ul ul {top:30px;t\op:31px;}

/* position the third level flyout menu */
.menu ul ul ul{left:175px; top:-1px; width:100px;}

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-180px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background:#F68A2C; color:#FFFFFF; height:auto; line-height:1em; padding:5px 10px; width:160px; border:1px solid #FFFFFF; border-width:0 0 1px 0; font-weight:normal;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}

/* style the top level hover */
.menu a:hover {color:#F68A2C; background:#005095; text-decoration: none;}
.menu :hover > a, .menu ul ul :hover > a {color:#F68A2C; background:#005095; text-decoration: none;}

.menu ul ul a:hover{color:#FFFFFF; background:#005095; text-decoration: none;}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}

/* Links */
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a.active {text-decoration: none;}
a.copyright:link {text-decoration: none; color:#005095;}
a.copyright:visited {text-decoration: none; color:#005095;}
a.copyright:hover {text-decoration: underline; color:#005095;}
a.copyright:active {text-decoration: none; color:#005095;}
a.white:link {text-decoration: none; color:#FFFFFF;}
a.white:visited {text-decoration: none; color:#FFFFFF;}
a.white:hover {text-decoration: underline; color:#FFFFFF;}
a.white:active {text-decoration: none; color:#FFFFFF;}


/* Headings */
h1, h2, h3 {clear: both; color: #005095; }
h1 { font-size: 150%; margin-left: 10px;}
h2 { font-size: 140%;}
h3 { font-size: 130%;}
h4 { font-size: 100%; display: inline; color: #005095; margin-left: 10px;}
h5 { font-size: 100%; display: inline; color: #FFFFFF;}
h6 { font-size: 100%; display: inline; margin: 5px; color: #FFFFFF;}


#ContentContainer {
	overflow: auto;
}

#HomeContainer {
	width: 490px;
	margin-top: 0px;
	margin-left: 10px;
}

#HomeContainer a{
	color: #005095;
	text-decoration: none;
}

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

#HomeContainer a:visited{
	color: #005095;
	text-decoration: none;
}

#ContentRight {
	overflow: auto;
	width: 180px;
	float:right;
	margin-top: -955px;
	margin-right: 2px;
}

#Menu2 {margin-left: 0;	width: 17em; float:left; background:#f0f0f0; border:1px solid #ddd;	padding:10px 10px 10px 10px;}
#Menu2 li {padding-left:15px; background:url(../images/menu2_arrow.gif) no-repeat left center;}
#Menu2 a {color:#005095; font-weight:bold; font-size:1em; line-height:1.6em; text-decoration:none;}
#Menu2 a:hover {text-decoration:underline;}
#Menu2 li.current a,
#Menu2 li.section a {color:#0083C8;}

#Menu3 {margin-left: 0;	width: 17em; float:left; background:#f0f0f0; border:1px solid #ddd;	padding:10px 10px 10px 10px;}
#Menu3 li {padding-left:15px; background:url(../images/menu2_arrow.gif) no-repeat left center;}
#Menu3 a {color:#005095; font-weight:bold; font-size:1em; line-height:1.6em; text-decoration:none;}
#Menu3 a:hover {text-decoration:underline;}
#Menu3 li.current a,
#Menu3 li.section a {color:#0083C8;}

#Content {float: left; width:69%; height: 100%}
#Content2 {float: left; width:73%;}
#Content3 {float: left; width:100%;}

div.breadcrumbs {margin-bottom:10px; font-size:1em;	color:#666;}
div.breadcrumbs a {text-decoration:none;}

#NewsList {background:#f0f0f0; width: 650px; border:1px dotted #ccc; padding:10px;}
#StaffList {background:#f0f0f0; width: 435px; border:1px dotted #ccc; padding:10px;}
#NewsList li,
#StaffList li {margin: 0; list-style-type: none;}
#NewsList li.newsDateTitle span {color:#666; line-height:2em;}
#NewsList li.newsDateTitle a {font-size:1.3em; font-weight:bold; color:#005095;	text-decoration:none; padding-left:20px; background:url(../images/treeicons/news-file.gif) no-repeat left center;}
#NewsList li.newsDateTitle a:hover {border-bottom:1px dotted #0083C8;}
#NewsList li.newsSummary {margin-bottom:20px; padding-left: 10px; color: #005095;}
#NewsList li.newsSummary span {font-size:1.1em; line-height:1.5em; color:#005095;}
#NewsList li.newsSummary a.readMoreLink {color:#005095;	text-decoration:none;}
#NewsList li.newsSummary a.readMoreLink:hover {border-bottom:1px dotted #005095;}

div.newsDetails {margin-bottom:10px; padding-left: 10px;}

div.newsDetails p {color:#666; margin:0; font-size:1em;}

div.pageComments {background:#f0f0f0; border:1px dotted #ccc; padding:10px;}

#StaffList .staffname {clear: both;	padding-left: 60px;	height: 1.2em;}
#StaffList .lubricantname {clear: both;	padding-left: 60px;	height: 1em; font-size: 12px;}
#StaffList .staffphoto {float: left; margin-left: 0; margin-top: -1.2em;}     
#StaffList .staffphoto img {border:1px solid #005095;}
#StaffList .staffdescription {margin-left: 60px; margin-bottom:30px;}
#StaffPhoto {float: left; margin-left: 10px; margin-right: 10px;}
#StaffPhoto img {border:1px solid #005095;}

#PageComments {list-style:none;	background:#e9e9e9;	border:1px solid #ccc; border-bottom:0; padding:0; margin:0;}
#PageComments li {list-style:none; padding:5px;	margin:0; font-size:1em; border-bottom:1px dotted #bbb;}
#PageComments li p span {font-style:italic;}
#PageComments a.deletelink {font-weight:bold;}
			
#PageNumbers {font-weight:bold;	color:#333;	font-size:1.1em; text-align:center;	padding:5px; border:1px solid #ddd;	background:#e9e9e9;}
#PageNumbers * {padding:0 5px; line-height:1.5em;}
#PageNumbers a {color:#0083C8; text-decoration:none;}
#PageNumbers a:hover {text-decoration:underline;}

#Header form {float:right; width:160px;	margin:0px 0px 20px 25px;}
#Header form * {display:inline !important;}
#Header form div {	}
#Header form input.text {width:110px; color:#000; background:#f0f0f0; border:1px solid #aaa; padding:3px;}
#Header form input.action {font-weight:bold;}

.searchResults h2 {font-size:2.2em; font-weight:normal;	color:#0083C8;	margin-bottom:15px;}
.searchResults p.searchQuery {color:#333; margin-bottom:10px;}
.searchResults ul#SearchResults li {margin-bottom:20px;}
ul#SearchResults p {font-size:1.1em; font-weight:normal; line-height:2em; color:#333;}
ul#SearchResults a.searchResultHeader {font-size:1.3em; font-weight:bold; color:#0083C8; text-decoration:none; margin:20px 0 8px 0;	padding-left:20px; background:url(../images/treeicons/search-file.gif) no-repeat left center;}
ul#SearchResults a {text-decoration:none; color:#0083C8;}
ul#SearchResults a:hover {border-bottom:1px dotted #0083C8;}
		
#sitemap-list {padding:0 0 0 10px; margin:0; list-style:none; font-weight:bold; line-height:150%} /*1st level list*/
#sitemap-list li {list-style:none; padding:10px; margin-top:10px; font-size:13px; background:#f0f0f0;} /*1st level items*/
#sitemap-list ul {margin:5px 10px 5px 10px; padding:5px 10px; font-weight:normal; background:#f8f8f8;} /*2nd level lists*/
#sitemap-list li li {padding:0; margin:0; list-style:none; font-weight:bold; font-size:11px; line-height:18px; background:none} /*2nd level items*/
#sitemap-list ul ul {margin-left:10px;padding:5px 10px;  background:#fff;} /*3rd level lists*/
#sitemap-list li li li {font-size:11px; font-weight:normal;} /*3rd level items*/
#sidebar_news {background: #f0f0f0; width: 170px; border: 1px solid #ccc; padding: 5px 0 5px 5px; right: 2px; top: 0;}

.sidebar_date {font-size: 0.7em; float:right; margin-top: 0px; margin-right: 2px;}
.sidebar_summary {font-size: 0.9em;}
.sidebar_readmore {font-size: 0.9em; color: #F68A2C;}
.sidebar_title a {font-size:0.9em; font-weight:bold; color:#005095; text-decoration:none;}
.sidebar_title a:hover {font-size:0.9em; font-weight:bold; color:#005095; text-decoration:none; border-bottom:1px dotted #0083C8;}
	
#NewsTable li {margin: 0; list-style-type: none;}
			
.Title {font-size:1.7em; font-weight:bold; color:#005095; text-decoration:none; padding-left: -10px;}

#FindOil{width: 170px; height: 150px; background: #FFFFFF; margin: 537px 6px 0 13px; border: 1px solid #ccc; padding: 5px 0 5px 5px; position: absolute; right: 2px; top: 0; text-align: center; vertical-align: bottom;}
#FuelCard{width: 170px; height: 150px; background: #FFFFFF; margin: 240px 6px 0 13px; border: 1px solid #ccc; padding: 5px 0 5px 5px; position: absolute; right: 2px; top: 0; text-align: center; vertical-align: bottom;}

#ProductList {background:#005095; width: 300px; border:1px dotted #F68A2C; padding:10px;}
#ProductList a {color: #FFFFFF; font-weight: bold;}
#ProductList a:hover {color: #F68A2C; font-weight: bold;}
#ProductList li.current a{color: #F68A2C; font-weight: bold;}
#ProductList li.section a{color: #F68A2C; font-weight: bold;}
#ProductList .lubricantname {clear: both;	padding-left: 60px;	height: 1em; font-size: 12px;}
#ProductList .staffphoto {margin-left: 0; margin-top: -1.2em;}     
#ProductList .staffphoto img {border:1px solid #005095; background-color: #005095;}

.pdf_links ul li,
.pdf_links ol li,
.pdf_links a {
	color:#0083C8;
	font-size:1em;
	padding-top:10px;
}

.wrapper-top-menu{ margin:11px 0 9px 0; width: 165px;}
.wrapper-top-menu .border-top {background:url(../images/orange_border_top.gif) repeat-x top #F68A2C;}
.wrapper-top-menu .border-bottom {background:url(../images/orange_border_bottom.gif) repeat-x bottom;}
.wrapper-top-menu .border-left {background:url(../images/orange_border_left.gif) repeat-y left;}
.wrapper-top-menu .border-right {background:url(../images/orange_border_right.gif) repeat-y right;}
.wrapper-top-menu .corner-top-left {background:url(../images/orange_top_left.gif) no-repeat left top;}
.wrapper-top-menu .corner-top-right {background:url(../images/orange_top_right.gif) no-repeat right top;}
.wrapper-top-menu .corner-bottom-left {background:url(../images/orange_bottom_left.gif) no-repeat left bottom;}
.wrapper-top-menu .corner-bottom-right {background:url(../images/orange_bottom_right.gif) no-repeat right bottom;}
.box_content {padding: 10px; min-height: 200px;}

.wrapper-top-menublue{ margin:11px 0 9px 0; width: 165px;}
.wrapper-top-menublue .border-top {background:url(../images/blue_border_top.gif) repeat-x top #B3DBF3;}
.wrapper-top-menublue .border-bottom {background:url(../images/blue_border_bottom.gif) repeat-x bottom;}
.wrapper-top-menublue .border-left {background:url(../images/blue_border_left.gif) repeat-y left;}
.wrapper-top-menublue .border-right {background:url(../images/blue_border_right.gif) repeat-y right;}
.wrapper-top-menublue .corner-top-left {background:url(../images/blue_top_left.gif) no-repeat left top;}
.wrapper-top-menublue .corner-top-right {background:url(../images/blue_top_right.gif) no-repeat right top;}
.wrapper-top-menublue .corner-bottom-left {background:url(../images/blue_bottom_left.gif) no-repeat left bottom;}
.wrapper-top-menublue .corner-bottom-right {background:url(../images/blue_bottom_right.gif) no-repeat right bottom;}

.wrapper-top-menu-login{ margin:11px 0 9px 0; width: 170px;}
.wrapper-top-menu-login .border-top {background:url(../images/orange_border_top.gif) repeat-x top #F68A2C;}
.wrapper-top-menu-login .border-bottom {background:url(../images/orange_border_bottom.gif) repeat-x bottom;}
.wrapper-top-menu-login .border-left {background:url(../images/orange_border_left.gif) repeat-y left;}
.wrapper-top-menu-login .border-right {background:url(../images/orange_border_right.gif) repeat-y right;}
.wrapper-top-menu-login .corner-top-left {background:url(../images/orange_top_left.gif) no-repeat left top;}
.wrapper-top-menu-login .corner-top-right {background:url(../images/orange_top_right.gif) no-repeat right top;}
.wrapper-top-menu-login .corner-bottom-left {background:url(../images/orange_bottom_left.gif) no-repeat left bottom;}
.wrapper-top-menu-login .corner-bottom-right {background:url(../images/orange_bottom_right.gif) no-repeat right bottom;}
.box_content {padding: 10px;}

.wrapper-top-menumain{ margin:11px 0 9px 0; width: 710px; background-color: #FFFFFF;}
.wrapper-top-menumain .mainborder-top {background:url(../images/main_border_top.gif) repeat-x top;}
.wrapper-top-menumain .mainborder-bottom {background:url(../images/main_border_bottom.gif) repeat-x bottom;}
.wrapper-top-menumain .mainborder-left {background:url(../images/main_border_left.gif) repeat-y left;}
.wrapper-top-menumain .mainborder-right {background:url(../images/main_border_right.gif) repeat-y right;}
.wrapper-top-menumain .maincorner-top-left {background:url(../images/main_top_left.gif) no-repeat left top;}
.wrapper-top-menumain .maincorner-top-right {background:url(../images/main_top_right.gif) no-repeat right top;}
.wrapper-top-menumain .maincorner-bottom-left {background:url(../images/main_bottom_left.gif) no-repeat left bottom;}
.wrapper-top-menumain .maincorner-bottom-right {background:url(../images/main_bottom_right.gif) no-repeat right bottom;}
.mainbox_content {padding: 10px; height:100%;}
.mainbox_content2 {padding: 10px; min-height: 500px;}

a.mainbox_content:link, a.mainbox_content:visited{ color: #005095; text-decoration: none;}
a.mainbox_content:hover{ color: #005095; text-decoration: underline;}

#NewsContent{
	padding: 0px 0 0 0px;
	position: relative;
	width: 100%;
	float: left;
	margin-bottom: 30px;
}

#NewsContent h4{
  	position: relative;
  	top: 4px;
  	font-size: 12px;
  	line-height: 25px;
  	color: #006699;
  	margin-bottom: 20px;
  	border-bottom: 1px dotted #877A7A;
}

#NewsContent .content{
  	padding: 0px;
  	margin: 10px 0 20px 0;
	color: #006699;
}

#NewsContent .date_posted{
	float:right;
	color: #006699;
}

#NewsContent .post{
  	margin-bottom: 20px;
}

#NewsContent .post li{
	padding-top: 10px;
}

#NewsContent a {
	color: #F68A2C;
	text-decoration: none;
}

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

#NewsContent .post .date{
  	position: absolute;
  	right: 1px;
  	top: 0px;
  	line-height: 40px;
  	color: #AFAFA4;
  	font-weight: bold;
}

#NewsContent .readmore{
	margin-top: -10px;
	float: right;
	list-style: none;
}

/* Sign Up Form */

#signup form {
	width:150px;
	margin: 0px;
}
#signup form fieldset {
	border:0;
	padding:10px;
}
#signup .message {
	color: #FF0000;
	padding:5px;
	margin:5px;
	font-weight: bold;
}
#signup span.message {
	width: 140px;
}
#signup form div {
	width:100%;
}
#signup form label {
	display: none;
}
#signup form label.left {
	float:left;
	width:130px;
}
#signup form label.FormHeading {
	font-size:1em;
	color:#006699;
	font-weight:bold;
	float: left;
	margin: 30px 0 10px 0;
}
#signup form input.text,
#signup form textarea,
#signup form select {
	width:150px;
	color:#006699;
	border:1px solid #aaa;
	height: 1.5em;
}

#signup form input.numeric {
	width:20px;
	background:#f0f0f0;
	border:1px solid #aaa;
	padding:3px;
	color:#000;
	margin-right:4px;
}
#signup form input.year {
	width:35px;
}
#signup form p.Actions {
	text-align:right;
	padding:0 22px 15px 0;
}
#signup form p.Actions input {
	padding:2px;
}
#signup form input.action {
	font-weight:bold;
}

/* Log In Form */
#login {
	padding: 5px;
}
#login form {
	width:160px;
	margin: 0px;
}
#login form fieldset {
	border:0;
}
#login .message {
	color: #FF0000;
	padding:5px;
	margin:5px;
	font-weight: bold;
}
#login span.message {
	width: 140px;
}
#login form div {
	width:100%;
}
#login form label {
}
#login form label.left {
	float:left;
	width:130px;
}
#login form label.FormHeading {
	font-size:1em;
	color:#006699;
	font-weight:bold;
	float: left;
	margin: 30px 0 10px 0;
}
#login form input.text,
#login form textarea,
#login form select {
	width:140px;
	color:#006699;
	border:1px solid #aaa;
	height: 1.5em;
}

#login form input.numeric {
	width:20px;
	background:#f0f0f0;
	border:1px solid #aaa;
	padding:3px;
	color:#000;
	margin-right:4px;
}
#login form input.year {
	width:35px;
}
#login form p.Actions {
	text-align:right;
	padding:0 22px 15px 0;
}
#login form p.Actions input {
	padding:2px;
}
#login form input.action {
	font-weight:bold;
}