/* CSS Document */

/* This is the Patriot Truck Leasing main CSS                                     */
/* for ease of editing and reading, look for "---" to denote start of a section   */

/* --- BEGIN CSS Reset Code --- */

/* This code puts all the browser-preset CSS back to zero where it should be */
*{margin:0;padding:0;}iframe,a img,fieldset,form,.form2,table{border:0}h6,h5,h4,h3,h2,h1,caption,th,td{font-size:100%;font-weight:normal}dd,dt,li,dl,ol,ul{list-style:none}legend{color:#000}button,select,textarea,input{font:100% serif}table{border-collapse:collapse;
	width: 469px;
}caption,th,td{text-align:left}
/* --- END CSS Reset Code --- */

/* --- General --- */
body{
	background:url(images/starbgpattern_darker.jpg) repeat 50% 0;
	font-family: Helvetica, Arial, sans-serif;
	color:#222;
	font-size:12px;
	line-height:1.5;
	padding:10px 0;
}
form#aspnetForm{ /* ASP.NET puts a form around everything.  This will make it behave properly */
    height:0;
    padding:0;
    margin:0;
}
h2{
	font-size:26px;
    font-weight:bold;
}		
h3{
	font-size:20px;
	font-weight:bold;
}
h4{
	font-size:16px;
	font-weight:bold;
}
a{
    position:relative;
	color:#20358c;
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
div{
	width:100%;
	float:left;
}	
#wrapper{
	float:none;
	position:relative;
	width:828px;
	height:auto;
	margin:0 auto;
}
#bigstar{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:460px;
	background:url(images/bigstar_darker.png) no-repeat 50% 0;
}
.content{
	float:left;
	background: url(images/bodybg_withshadow.png) repeat-y top left;
	height:auto;
}

.content_column { /* used to create a standard two column layout. Most commonly used with content_with_sidebar for two column text on uhaul.com */
        padding-left: 6em;          
		width: 48%;
		float: left;
	}
  
	.content_column_last {
		width: 40%;
		float: right;
	}
	
	

.small {
	font-size: 80%;
}

th.align_center {
	text-align: center;
}

/* --- Header --- */
#header{
	height:auto;
}
#header .top{
	float:right;
	height:53px;
	width:100%;
	background:url(images/bodytop_withshadow.png) transparent top left no-repeat;
}
#header .top .patriotlogo{
	display:block;
	position:relative;
	z-index:3;
	width:160px;
	left:42px;
	top:24px;
	height:101px;
	background:url(images/patriotlogo.gif) no-repeat top left;
}
#header .top .patriotlogo a{
	display:block;
	position:relative;
	z-index:4;
	width:160px;
	height:101px;
}
#header .top .patriotlogo a span{
	display:none;
}
#header ul#login{
	display:block;
	position:relative;
	z-index:2;
	right:40px;
	top:-78px;
	text-align:right;
}
#header ul#login .signin{
	font-size:20px;
	font-weight:bold;
}
#header ul#login .what{
	font-size:12px;
}
#header ul#login li a{
	position:relative;
	color:#222;
}
#header ul.nav{
	width:800px;
	display:block;
	height:41px;
	margin-left:13px;
	background:url(images/navbar.gif) no-repeat top left;
}
#landing #header ul.nav { /*applies a special navbar graphic for the landing page */
	background:url(images/navbar-landing.gif) no-repeat top left;		
}
#header ul.nav li{
	float:left;
	display:inline;
	height:34px;
	margin:6px 4px 0 4px;
}
#header ul.nav .first{
	margin-left:30px;
}
#header ul.nav li a{
	display:block;
	position:relative;
	height:27px;
	width:auto;
	color:#fff;
	text-decoration:none;
	font-size:18px;
	padding:5px 7px 0 7px;
}	
#header ul.nav li a:hover{
	color:#bbb;
}
#header ul.nav .selected a{
	color:#888;
}
#header .content h1{
	margin-top:11px;
	margin-left:225px;
	margin-bottom:2px;
	font-size:20px;
	font-weight:bold;
}
#header .content h1 span{
	font-size:32px;
	line-height:1;
}
#header .banner{
	height:282px;
	width:828px;
	background:url(images/body-stripesacross.gif) transparent repeat-y 14px -4px;
}
#header .bottom{
    display:none;
}
/* Flash banner and alt text */
#header .banner .special{
	display:inline;
	height:12px;
	margin:0 0 0 13px;
	width:800px;
	background:url(images/body-topshadow.gif) transparent no-repeat 1px -1px;		
}
#header .banner #flashbanner h2{
	margin:20px 20px 0 20px;
}
#header .banner #flashbanner p{
	margin:5px 20px;
	font-size:16px;
}
#header .banner #flashbanner span{
	display:block;
	margin:80px 20px 0;
	font-size:12px;
}
#header .banner #flashbanner span a{
	text-decoration:underline;
}
/* Four-column banner with truck images */
#header .banner .four_col{
	float:left;
	width:200px;
	margin-top:32px;
}
#header .banner .four_col p{
	padding-top:105px;
	font-size:16px;
	line-height:1.1;
}
#header .banner .four_col p span{
	font-size:20px;
	font-weight:bold;
}
#header .banner .four_col p sup{
	font-size:10px;
}
#header .banner .tenft{
	margin-left:7px;
	background:url(images/10fttrk.gif) no-repeat 50% 11px;
}
#header .tenft p{
	padding-left:29px;
}
#header .banner .fourteenft{
	background:url(images/14fttrk.gif) no-repeat 50% 8px;
}
#header .fourteenft p{
	padding-left:27px;
}
#header .banner .seventeenft{
	background:url(images/17fttrk.gif) no-repeat 50% 5px;
}
#header .seventeenft p{
	padding-left:25px;
}
#header .banner .twentysixft{
	background:url(images/26fttrk.gif) no-repeat 50% 0;
}
#header .twentysixft p{
	padding-left:20px;
}
#header .bestvalue p{
	background:url(images/bestvalue.png) no-repeat 50% 100%;
	padding-bottom:38px
}
/*banner for dealer page*/
#header .banner .tenft_dlr{
	margin-left:7px;
	background:url(images/10_dlr.gif) no-repeat 50% 11px;
}
#header .tenft_dlr p{
	padding-left:29px;
}
#header .banner .fourteenft_dlr{
	background:url(images/14_dlr.gif) no-repeat 50% 8px;
}
#header .fourteenft_dlr p{
	padding-left:27px;
}
#header .banner .seventeenft_dlr{
	background:url(images/17_dlr.gif) no-repeat 50% 5px;
}
#header .seventeenft_dlr p{
	padding-left:25px;
}
#header .banner .twentysixft_dlr{
	background:url(images/26_dlr.gif) no-repeat 50% 0;
}
#header .twentysixft_dlr p{
	padding-left:20px;
}

/* --- Main --- */
#main .top{display:none;}
#main .content a{
	text-decoration:underline;
}
#main .content p.gallery{
	margin-top:10px;
	text-align:center;
}
#main .content{
	padding-bottom:10px;
}
#main .content p.prevnext{
	margin-top:20px;
	text-align:center;
	font-size:16px;
}
#main .content h2.gallery{
	margin-left:30px;
	margin-top:10px;	
}
#main .content .striped h3{
	display:inline;
	float:left;
	clear:both;
	width:474px;
	margin:13px 13px 0;
}
/* quotes */
blockquote{
	display:inline;
	float:left;
	clear:both;
	width:490px;
	margin-left:10px;
	margin-bottom:45px;
	font-style:italic;
	font-weight:bold;
	font-size:16px;
}
span.author{
	display:inline;
	margin:-45px 10px 20px;
	width:300px;
	float:right;
	text-align:right;
}

/* --- Left column --- */
.col-left{
	display:inline;
	width:500px;
	margin:10px 0 0 30px;
	padding-bottom:10px;
}
.col-left h2.redbar{
	display:block;
	background: url(images/howitwk_h2.gif) no-repeat top left;
	width:100%;
	height:35px;
	text-indent:-9998px;
}
#main .content .col-left h3 a{
	color:#000;
	text-decoration:none;
}	
#main .content .col-left h3 a:hover{
	text-decoration:underline;
}
#main #flashtruck{
	position:relative;
	margin-top:10px;
	margin-bottom:-90px;
	height:100px;
	width:500px;
	z-index:2;
}
.col-left p{
	margin:2px 10px 10px 0;
}
.col-left ul{
	display:inline;
	margin-bottom:10px;
	float:left;
	width:100%;
}
.col-left li{
	margin-left:25px;
}
.col-left ul.twocol{
	margin-left:25px;
	width:170px;
}
.col-left .twocol li{
	list-style-type:disc;
}
.threecol{
	display:inline;
	float:left;
	width:150px;
	height:auto;
	margin-left:13px;
	padding:0;
	}
.threecol h2{
	display:block;
	background:none;
	text-indent:0;
	font-size:18px;
	font-weight:bold;
	margin-top:7px;
	height:auto;
}
.threecol p{
		margin-top:8px;
		margin-left:24px;
}

.contract{
    float:left;
    width:300px;
    margin: 0 26px 10px 0;
}
.contract ul{
    padding-left:20px;
}
	
/* --- Right column --- */
.col-right{
	display:inline;
	clear:right;
	float:right;
	margin:10px 33px 0 15px;
	width:250px;
}
.col-right h3{
	margin:10px 10px 0;
	font-size:18px;
	font-weight:bold;
}
.col-right ul{
	margin:10px 10px;
}
.col-right ul li{
	margin-bottom:10px;
}
.col-right p, .form p{	
	margin:5px 10px 10px;
}	
.featured h2{
	background: url(images/featured_truck.gif) no-repeat top left;
	text-indent:-9998px;
}
.latestnews h2{
	background: url(images/latestnews.gif) no-repeat top left;
	text-indent:-9998px;
}
#main .content .col-right h3{
	width:230px;
	margin:10px 10px 0;
}
h2.bluebar{
	display:block;
	background-color:blue;
	width:100%;
	height:35px;		
}
h2.redbar{
	display:block;
	background-color:red;
	width:100%;
	height:35px;		
}
#main .bottom{display:none;}

/* --- Full Column --- */
.col-full{
    display:inline;
	width:765px;
	margin:10px 0 0 30px;
    padding-bottom:10px;
}    
.col-full h3{
    margin-top:5px;
}  
.col-full h4{
    margin-top:5px;
}
.col-full ul.twocol{
    margin:10px 0 25px 25px;
    display:inline;
    float:left;
	width:300px;
}
.col-full .twocol li{
	list-style-type:none;
}		

.info_list {
	list-style-type: none;
	padding: 0;
	overflow: hidden;
}

.info_list li {
	/*---margin-bottom: 1em;---*/
	clear: both;
	overflow: hidden;
	padding-left: 9.35em;

}

.info_list li b,
.info_list li strong  { /* this creates a right-aligned table look on bolded elements within the li.  */
	width: 9em;
	display: inline;
	float: left;
	text-align: right;
	height: 1%;
	margin-left: -9.35em;
}

	
/* --- Forms --- */
.form strong{	
	font-size:18px;
	font-weight:bold;
}	
.form h2{
	background: url(images/form_h2.gif) no-repeat top left;
	text-indent:-9998px;
}
.form p{
	font-size:10px;
}
		
form, .form2{		
	margin:0 10px;	
	display:inline;	
}
div.form2{
    width:230px;
}
div.form2 table{
    margin-left:10px;
}
.form2 input, .form2 textarea, .form2 select
{
	float:left;
	margin-left:3px;
}	

input, textarea {
		margin-bottom:2px;
		float:right;
		width:145px;
		font-size:12px;
		}
select{
		margin-bottom:2px;
		float:right;
		width:149px;
		font-size:12px;
}
label{
	display:block;
	text-align:right;
	clear:both;
	float:left;
	width:77px;
	font-size:10px;
	line-height:21px;
}
.radiolist label{
    clear:none;
    float:left;
}
.radiolist input{
    float:right;
    clear:both;
    width:12px;
    height:12px;
    margin-top:5px;
    margin-right:135px;
    margin-bottom:3px;
    display:inline;
}
.whatsthis{
    margin-top:-8px; font-size:80%;
}
.checkbox input{
    margin:0; 
    width:14px; 
    height:14px;
    float:right; 
    display:inline;
    margin-top:5px;
}
.form2 label.checkbox{
    width:210px;
    display:inline;
}
.checkbox label{
    clear:none;
    float:left;
    width:210px;
    display:inline;
}
input#submit{
	width:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	padding:1px;
	margin:3px 1px 10px 0;
}
input.submitClass{
    float:right;
    display:inline;
    width:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	padding:1px;
	margin:5px 12px 10px 0;
}	
table.certificate
{
    float:right;
    border:none;
    padding:0;
    margin:0;
}
table.certificate tr, table.certificate td{
    border:none;
    padding:0;
    margin:0;
    vertical-align:middle;
}
table.certificate input
{
    margin:0 0 0 5px;
    padding:0;
}
table.certificate input.textboxUpdate
{
    margin-top:2px;
}
.txtcomments{
	height:36px;
	overflow:auto;
}
		
div.centerform{
	float:none;
	margin:30px auto;
	width:250px;
}
div.leftform{
	float:left;
	clear:left;
	margin:30px 0;
	width:250px;
}
/* special h2s - Theses are the form headers */
 h2.login{ 
	background: url(images/signin_h2.gif) no-repeat top left;
	text-indent:-9998px;
}
h2.changeaddy{ 
	background: url(images/changeaddy_h2.gif) no-repeat top left;
	text-indent:-9998px;
}
h2.edituser{ 
	background: url(images/edituser_h2.gif) no-repeat top left;
	text-indent:-9998px;
}
h2.adduser{ 
	background: url(images/adduser_h2.gif) no-repeat top left;
	text-indent:-9998px;
}
h2.paymethod{ 
	background: url(images/paymentmethod_h2.gif) no-repeat top left;
	text-indent:-9998px;
}
h2.makepayment{
    background: url(images/payment_h2.gif) no-repeat top left;
	text-indent:-9998px;
}
h2.retrievepass{
    background: url(images/retrpass_h2.gif) no-repeat top left;
	text-indent:-9998px;
}

/* --- Footer --- */
#footer{
	height:auto;
}
#footer .top{
    display:none;
}
#footer .content{
	height:90px;
	background: url(images/bodybottom_withshadow.png) no-repeat bottom left;
	padding-bottom:4px;
}
#footer .sustain-logo{
	display:inline;
	width:50px;
	height:50px;
	background:url(images/truckrecyclesmaller.gif) no-repeat bottom left;
	float:left;
	margin-top:16px;
	margin-left:28px;
	text-indent:-9998px;
}
#footer .content p{
	display:inline;
	float:left;
	margin-top:0;
	margin-left:-50px;
	font-size:18px;
}
#footer .content p a{
	display:block;
	padding-top:40px;
	padding-left:60px;
	color:#051;
}
#sustainability #footer .sustain-logo, 
#sustainability #footer .content p, 
#sustainability #footer .content p a{
    display:none;
}
#sitemap #footer .sustain-logo, 
#sitemap #footer .content p, 
#sitemap #footer .content p a{
    display:none;
}

#footer h2{
	display:inline;
	height:auto;
	float:right;
	margin-right:34px;
	margin-top:4px;
	font-size:34px;
	font-weight:bold;
	line-height:1.2;
}
#footer h3{
	display:inline;
	clear:right;
	height:auto;
	float:right;
	margin-right:34px;
	font-size:12px;
	margin-top:0;
	font-weight:normal;
}
#footer h3 a{
	text-decoration:none;
	color:#000;
}
#footer h3 a:hover{
	text-decoration:underline;
}
#footer .bottom{
	margin-top:-8px;
}
#footer .bottom p{
	width:100%;
	font-size:10px;
	text-align:center;
	margin-bottom:2px;
	color:#bbb;
}
#footer .bottom a{
	color:#fff;
	text-decoration:none;
}		
#footer .bottom a:hover{
	text-decoration:underline;
}		

/* --- Special Classes --- */
.striped{ /* makes a striped box */
	background:url(images/stripe_bk.gif) repeat top left;
	overflow:hidden;
}
.txt-mini {
	line-height:1.4em;
	color:#5E5E5E;
	padding: 5px;
	font-size:.9em;
}
.row {
	clear: both;
    padding: 0 0 2em 0;
	border: none;
	overflow: hidden;
	text-align: left;
}

.column {
	float: left;
	text-align: left;
	margin-right: 1em;
	width: 250px;
}

.column_wide 
{
	width: 425px;
}

.floatright{float:right;}
.fullwidth{width:100%;}
.clearboth{clear:both;}
.blue{color:#20358c;}
.red{color:#d42d2d;}
.center{text-align:center;}

/* --- Gallery ---*/

.gallery {
	padding: 0px;
}
div.gallery{
    display:inline;
    margin-left:35px;
    width:793px;
}
.gallery img {
	border: 1px solid #8c8c8c;
	margin-right: 5px;
}
.gallery .grouping_left,
.gallery .grouping_right 
{
    display:inline;
    margin: 10px 15px 5px 4px;
	padding: 0;
    width:350px;
  	float: left;
}
.gallery .grouping_right {
    margin-right:48px;
}
.gallery p {
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 1em;
	line-height:1.4em;
	padding: 5px 0px 0px 0px;
	margin: 0px;
}
a.next{
		background:url(images/fforward.gif) no-repeat 100% 50%;
		padding-right:21px;
		height:14px;
}
a.prev{
		background:url(images/rewind.gif) no-repeat left 50%;
		padding-left:21px;
		height:14px;
}

/* --- News - Accordion --- */

#accordian_container{
    width:100%;
    margin-bottom:10px;
}
#accordian_container div{
	width:auto;
	height:auto;
	float:none
}
.accordionHeader{
	font-family: Arial, Sans-Serif;
	font-size: 14px;
	font-weight: bold;
    cursor: pointer;
    background: url(images/plus.gif) no-repeat 5px 50%;
    padding-left:20px;
    margin-bottom:2px;
}

.accordionHeader a{
	color: #FFFFFF;
	background: none;
	text-decoration: none;
}
.accordionHeader a:hover{
	background: none;
	text-decoration: underline;
}
.accordionHeaderSelected{
    font-size: 14px;
    padding: 0 0 0 20px;
	font-weight: bold;
    background: url(images/minus.gif) no-repeat 5px 50%;
	font-family: Arial, Sans-Serif;
	cursor:pointer;
}

.accordionHeaderSelected a{
	color: #FFFFFF;
	background: none;
	text-decoration: none;
	height:auto;
}

 .accordionHeaderSelected a:hover{
	background: none;
	text-decoration: underline;
	height:auto;
}

.accordionContent{
    padding-left:30px;
    padding-bottom:5px;
    margin-bottom:5px;
    height:auto;
}


/* --- data_table --- */
/* Used on all datagrids and anywhere we display tabular data. */
.data_table {
	border: solid 1px #C2C2C2;
	margin: 1px 1px 1.2em 1px;
	width: 99.9%;
	clear:both;
}
.data_table td,
.data_table th {
	border: solid 1px #C2C2C2;
	padding: .3em; 
	background: white;
}
.data_table th {
	text-align: left;
}
.data_table th,
td.alternating_row,
tr.alternating_row td {
	background-color: #F5F5F5;
}	
td.alternating_column {
	background: #fffbf1;
}	
th.alternating_column,
.alternating_row .alternating_column {
	background: #ffffe0;
}
td.alternating_column_green {
	background: #ddffdd;
}
th.alternating_column_green {
	background: #cceecc;
}
.data_table .header_span {
	background: #e6e6e6;
}	
.data_table .header_span + .alternating_column {
	background: #e9e9b9;
}
.data_table th p { /* used when you want some normal sized text along with the header */
	font-weight: normal;
	margin-top: .3em;
	margin-bottom: .3em;
}	
.align_right {
	text-align: right;
}
.align_center {
	text-align: center;
}

/* --- Errors --- */
.error,
.alert,
.error_item,
.negative { /* for negative numbers or words ie: -200 or No */
	font-weight: bold;
	color: #c00;
}
.positive { /* for positive numbers or words */
	font-weight: bold;
	color: Green;
}
.error {
	display: block;
	margin-bottom: 1.1em;
}
.error_item { /* use this class in validation controls. puts an 'x' near the textbox etc where the error occurred */
	background: url(images/error.gif) no-repeat left;
	margin-left: 0;
	clear:none;
	float:right;
	margin-right:-150px;
	margin-top:2px;
	padding:0 0 0 0;
	z-index:1;
	height:16px;
	width:16px;
	margin-bottom:0;
}    
.error {
    clear:both;
	display: inline;
	color:#d42d2d;
	font-weight:bold;
}
.error ul { /* sets spacing when errors are returned in a bullet list by asp:ValidationSummary */
	margin-top: 0;
	margin-bottom: .8em;
}
.data_table .error { /* takes away the spacing when the error class is used in a table for data display */
	display: inline;
}

/* success class */
.success {
   display: block; /* needed so you can add margin */
   margin-bottom: .8em;
   padding-left: 18px;
   font-weight: bold;
   background: url(images/success.gif) no-repeat left;
}

/* fixes a few and opera safari issues */
/* The Safari selectors WILL NOT VALIDATE */
/* This should be the ONLY non-valid CSS in this file. */
/* It fixes a text-wrapping issue on default.aspx */
/* and a sizing issue of the textbox in the contact form */
@media all and (min-width:0px) {
			/* safari */
			body:not(:root:root) .col-left h3{
				font-size:19px;
			}
			/* opera */
			textarea{
			width:154px;
			}
			/* safari */
			body:not(:root:root) textarea{
				width:152px;
			}
	}