/* this line imports the css for the IE png fix */
@import "htc.css";

/* this CSS file sets up the design of the site */

/* -- General Layout Design -- */

body {
	background:#fff url(../images/body-bg.gif) repeat-x scroll;
	padding-top:85px;
}

#container {
	width:800px;
	margin:0 auto;
	background: url(../images/container-bg.gif) no-repeat left bottom;
	position:relative;
}

#header {
	width:800px;
	height:107px;
	background: url(../images/header-bg.jpg) no-repeat 0 0;
	position:relative;
}

#contentWrapper {
	width:780px;
	margin:10px 0 10px 10px;
	padding:0;
	background:#fff url(../images/main-content-bg.gif) no-repeat 257px 100%;
}

#sidebar {
	background-color:#F8E344;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */



/* -- General Text Design -- */

h1 {
	font-size:131%;
	font-weight:bold;
}


h3{
	font-size:108%;
	font-weight:bold;
	margin: 0 0 20px 0;
}

h4{
	color:#006;
	margin-bottom:10px;
	font-size:93%;
	font-weight:bold;
}

h5{
	font-size:93%;
	font-weight:normal;
}

h6{
	font-size:93%;
	font-weight:normal;
	font-style: italic;
}

p, ul{
	font-size: 93%;
	color: #000;
	margin: 0 0 10px 0;
	line-height: 15px;
}

a {
	text-decoration: underline;
	color: #000;
}

a:focus {
	outline: none;
}

a:hover {
	text-decoration: none;
}

#mainNav a {
	color: #fff;
	text-decoration: none;
}

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


#main a {
	color:#369;
}

#secondaryNav {}

#secondaryNav a {
	color: #83342f;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
}

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


em { font-style:italic;}

strong {font-weight:bold;}

small {font-size:90%;}

/* -- Specific Text Design -- */

#header h1 a{
	width:170px;
	height:107px;
	display:block;
	text-indent:-9999px;
}

#header a#signin {
	display:block;
	position:absolute;
	top:12px;
	right:10px;
	color:#000;
	font-weight:bold;
	font-size:90%;
}

ul#mainNav {
	width:204px;
	list-style: none;
	font-size: 100%;
	font-weight: bold;
	margin: 0;
	position:absolute;
	bottom:1px;
	right:8px;
}

#mainNav li{
	margin: 0 0 0 2px;
	float:left;
	height:28px;
}

#mainNav li.first{
	margin: 0;
}

#mainNav li a{
	display: block;
	width:100px;
	height:28px;
	line-height:27px;
	text-align:center;
	background: url(../images/main-nav-bg.jpg) no-repeat;
}
#mainNav li#card a{
	background-position: 0 0;
}
#mainNav li#contact a{
	background-position: -101px 0;
}

#mainNav li#card a:hover, #mainNav li#card a.current{
	color:#666;
	background-position: 0 -28px;
}
#mainNav li#contact a:hover, #mainNav li#contact a.current{
	color:#666;
	width:100px;
	background-position: -101px -28px;
}

#contentWrapper #content-header{
	width:780px;
	height:112px;
	he\ight:40px;
	padding-top:72px;
	background:url(../images/apsp-header-bg.jpg) no-repeat;
	position:relative;
}
#contentWrapper #content-header a{
	width:340px;
	height:72px;
	display:block;
	text-indent:-9999px;
	position:absolute;
	top:0;
	left:0;
}
#contentWrapper #content-header h2{
	width:780px;
	w\idth:516px;
	height:40px;
	padding-left:264px;
	font-size:161.6%;
	font-weight:bold;
	color:#fff;
	text-transform:capitalize;
	line-height:40px;
	margin: 0;
	background:url(../images/apsp-content-heading-bg.jpg) no-repeat;
}
#secondaryNav {
	margin-bottom: 40px;
}

#secondaryNav h4 {
	margin-bottom: 10px;

	font-size: 123.1%;
	font-weight: bold;
	text-transform: uppercase;
}

#secondaryNav h4 a {
	color: #336;
}


/* -- Flash styles -- */
#flashcontent, #no-flash {
	width:780px;
	height:190px;
}
#no-flash {
	display:none;
}

/* -- sidebar or "extra" content styles -- */

#contentWrapper #content .extra{
	width:258px;
	w\idth:237px;
	padding:18px 11px 0 10px;
	display:block;
	background:url(../images/extra-bg.gif) repeat-x 0 0;
	float:left;
}

#contentWrapper #content .extra .callout{
	width:236px;
	margin-bottom:20px;
	float:left;
}

#contentWrapper #content .extra .grey{
	background: #e6e7e8 url(../images/callout-content-bg.gif) no-repeat 0 100%;
}
#contentWrapper #content .extra .callout h3{
	width:236px;
	w\idth:212px;
	line-height:24px;
	font-size:120%;
	color:#353566;
	background: #ccc url(../images/callout-bg.gif) no-repeat 0 0;
	margin-bottom:10px;
	padding:4px 12px;
	text-transform:uppercase;
}

#contentWrapper #content .extra .callout p{
	margin-bottom:10px;
	padding:0 12px;
	font-size:95%;
}

#contentWrapper #content .extra .callout a.fuel-force{
	display:block;
	width:211px;
	height:192px;
	background: url(../images/extra-fleet-fueling-card.jpg) no-repeat 0 0;
	text-indent:-9999px;
	margin-left:10px;
	margin-top:3px;
}
#contentWrapper #content .extra .callout a.learn-more{
	background: #fff url(../images/learn-more-callout-btn.jpg) no-repeat 0 0;
}

/* -- Banner -- */

#banner {
	width: 780px;
	height: 101px;
	display: block;
	background:#ccc;
}

/* -- Main Content styles -- */
#contentWrapper #content {
	background: url(../images/content-bg.gif) no-repeat 0 100%;
	width:780px;
	padding:0 0 10px 0;
	position:relative;
	float:left;
}
#contentWrapper #content #main{
	width:522px;
	w\idth:512px;
	padding:16px 0 20px 10px;
	position:relative;
	float:left;
}
#contentWrapper #content h3{
	color:#333366;
	text-transform:uppercase;
	font-weight:bold;
	font-size:160%;
}


#contentWrapper #content h3.blue{
	color:#333366;
	padding-left:2px;
}
#contentWrapper #content h4{
	padding-left:2px;
}
#contentWrapper #content p{
	padding-right:20px;
	padding-left:2px;
	margin-bottom:20px;
}

#contentWrapper #content ul{
	list-style-type:none;
	margin-left:10px;
	margin-bottom:20px;
	display:block;
}

#contentWrapper #content ul.list-data {
	margin-bottom:16px;
}

#contentWrapper #content li{
	background: url(../images/content-list-arrow.gif) no-repeat 0 3px;
	padding-left:20px;
	padding-bottom:6px;
	margin-bottom:0;
	line-height:120%;
}
#content a.learn-more, #content a.apply-now, #content a.request-info, #content a.the-card, #content a.read-more {
	display:block;
	height:24px;
	background-color: #fff;
	text-indent:-9999px;
	float:right;
	margin-right:10px;
	margin-bottom:10px;
}
#contentWrapper #content a.learn-more{
	width:94px;
	background: url(../images/learn-more-btn.jpg) no-repeat 0 0;
}
#contentWrapper #content a.apply-now{
	width:94px;
	background: url(../images/apply-now-btn.jpg) no-repeat 0 0;
}
#contentWrapper #content a.request-info{
	width:178px;
	background: #fff url(../images/request-info-btn.jpg) no-repeat 0 0;
}
#contentWrapper #content a.the-card{
	width:85px;
	background: url(../images/the-card-btn.jpg) no-repeat 0 0;
}
#contentWrapper #content a.read-more{
	width:92px;
	background: url(../images/read-more-btn.jpg) no-repeat 0 0;
}

#contentWrapper #content #special-offers-table,
#contentWrapper #content #table-basic {
	width:470px;
}

#contentWrapper #content #special-offers-table td,
#contentWrapper #content #table-basic td {
	padding:3px;
	vertical-align:middle;
}

#contentWrapper #content #privacy h4, #contentWrapper #content #privacy ul {
	padding-bottom:8px;
}

#contentWrapper #content #privacy blockquote { padding-left:20px; }
#contentWrapper #content #privacy h4 { font-size:110%; }
#contentWrapper #content #privacy h5 { font-size:100%; font-weight:bold;padding-bottom:8px; }

/* -- Account Application Form -- */
#accountApplicationForm {
	width: 503px;
	background-color: #e6e7e8;
	padding-bottom:10px;
}

#content #accountApplicationForm h4 {
	width:503px;
	w\idth:479px;
	line-height:24px;
	font-size:120%;
	color:#353566;
	background: #ccc url(../images/form-top-bg.gif) no-repeat 0 0;
	margin-bottom:10px;
	padding:4px 12px;
	text-transform:uppercase;
}

#content #accountApplicationForm input {
	width:200px;
	margin-top:2px;
	margin-right:20px;
}

#content #accountApplicationForm textarea {
	margin-top:2px;
}

#content #accountApplicationForm input#submit {
	width:80px;
}
#content #accountApplicationForm .required-field {
	float:left;
	margin-top:6px;
}
#content #accountApplicationForm .err-label {
	background: #e6e7e8 url(../images/error.gif) no-repeat 0 0;
	padding-left:25px;
	color:red;
	font-weight:bold;	
}

#content #accountApplicationForm input.err-input {
	background-color:red;
	color:white;
}

#application-form td {
	padding:5px 0 5px 13px;
}
#errorBox {
	border:1px solid #990000;
	margin: 8px;
	width:400px;
}

#errorTitle {
	background-color:#990000;
	color:white;
	font-weight:bold;
	padding:8px;
	text-align:center;
}

#errorBox ul {
	margin-top:3px;
}


/* -- Footer Information -- */
#footer{
	background:#ccc;
	padding:0;
	font-size: 85%;
	position:relative;
}
.footerNav {
	float: right;
	list-style: none;
	margin: 0 15px 0 0;
/*	position:absolute;
	top:2px;
	right:0;*/
	padding-top: 3px;
	display:inline;
}

.footerNav li{
	margin: 0 6px 0 0;
	padding-right:6px;
	background: url(../images/footer-nav-border.gif) no-repeat 100% 60%;
	display: inline-block;
	/*font-size: 93%;*/
	float:left;
}
.footerNav li a{
	float:left;
	/*font-size: 93%;*/
	text-decoration:none;
}
.footerNav li a:hover {text-decoration:underline;}
.footerNav li.last{
	background:none;
	padding-right:0;
	margin:0;
}
#footer p{
	float:left;
	margin-bottom:0;
	padding-left:15px;
}
#footer p.questions{
	width:180px;
	position:absolute;
	top:0;
	left:310px;
	text-align:center;
	float:none;
	padding-left: 0;
	
}

#footer-corners{
	margin: 0 auto;
	width: 800px;
	padding-bottom: 20px;
}




/* -- Sitemap -- */
#content #sitemap {
	font-size: 107% !important;
	padding-top: 10px;
}

#content #sitemap ul {
	list-style-type: none;
	margin-left: 0;
}

#content #sitemap ul li {
	background: none;
	margin: 8px 0 0 30px;
	padding: 0;
}

#content #sitemap ul li.topLevel {
	margin-top: 20px;
	font-size: 107%;
}

#content #sitemap ul li.home {
	margin: 0;
}

#content #sitemap a {
	background: url(../images/content-list-arrow.gif) no-repeat 0 50%;
	padding-left: 20px;
}

.reg {
	font-size: 0.85em;
	padding-left:1px;
	font-family:arial;	
}

h3 .reg, h2 .reg {
	vertical-align:super;
	font-family:verdana;
	font-size: 7pt;
}

.disclaimer {
	font-size: 10px;
}