/* CSS reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border:0;
}

/* =Fonts ----------------------------------------------------------------- */

@font-face {font-family: 'FuturaBT-BoldCondensed';src: url('fonts/futura/eot/style_610.eot');src: url('fonts/futura/eot/style_610.eot?#iefix') format('embedded-opentype'),url('fonts/futura/woff/style_610.woff') format('woff'),url('fonts/futura/ttf/style_610.ttf') format('truetype'),url('fonts/futura/svg/style_610.svg#FuturaBT-BoldCondensed') format('svg');}
@font-face {font-family: 'FuturaBT-BoldCondensed';font-style:italic;src: url('fonts/futura/eot/style_611.eot');src: url('fonts/futura/eot/style_611.eot?#iefix') format('embedded-opentype'),url('fonts/futura/woff/style_611.woff') format('woff'),url('fonts/futura/ttf/style_611.ttf') format('truetype'),url('fonts/futura/svg/style_611.svg#FuturaBT-BoldCondensedItalic') format('svg');}
/*It's repetative, but we need to do it this way in order for the italic styles to work properly in IE 6-8*/
@font-face {font-family: 'FuturaBT-BoldCondensed-Italic';src: url('fonts/futura/eot/style_611.eot');src: url('fonts/futura/eot/style_611.eot?#iefix') format('embedded-opentype'),url('fonts/futura/woff/style_611.woff') format('woff'),url('fonts/futura/ttf/style_611.ttf') format('truetype'),url('fonts/futura/svg/style_611.svg#FuturaBT-BoldCondensedItalic') format('svg');}

 
/* =Structure ------------------------------------------------------------- */

body {
    background: #f5f3ec;
    color: #3e3e3e;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 76%; /* fonts are set in ems. 1em = about 12px */
    padding: 1.25em;

}
body.noheaderfooter 
{
    background: #fff; /* background for our popup windows */
}
.futura_bold_condensed
{
	font-family: 'FuturaBT-BoldCondensed', Arial, Helvetica, Sans-Serif;

}
.futura_bold_condensed_italic, 
.futura_bold_condensed_italic em,
.futura_bold_condensed em
{
	font-family: 'FuturaBT-BoldCondensed-Italic', Arial, Helvetica, Sans-Serif;
	font-style:normal;
}


.main { /* Contains page headers, content and footer. */
    background-color: #fff;
    border: solid 1px #ded9c9;
    margin:auto;
    margin-bottom: 2em;
    padding: 2.5em;
    position:relative; 
    width: 70em;
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

/* Stuff below gives the site a responsive layout. Still need to tweak some pages to make it work nicely 
.main {
    max-width: 70em;
    min-width: 680px;
}

.header {
    max-width: 75em;
	min-width: 740px;

}


img { 
max-width: 100%;
min-width: 0;
}

*/


.page_header,
.page_header_border { /* .page_header is the optional top area of a page. Usually includes a search and marketing stuff. */
    margin:-2.5em -2.5em 3em -2.5em; /* Negative margins so you can apply gradient or other bg images that stretch to the edge of .main */
    padding: 2.5em 2.5em 0 2.5em;
    position:relative;
    zoom:1; /* So we can absolutely position items in IE */

    /* Round the top corners so bg images don't overlap .main */
    -webkit-border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topleft:6px;
    -moz-border-radius-topright:6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.page_header_border { 
    border-bottom: solid 1px #e7e5dd; 
}

.page_header h1,
.page_header_border h1 {
    color:#011960;
    font-size:1.8em;
    margin-bottom:.8em;
}



.promo_area /* Larger promo areas that stand out more. Currently on the homepage and orders page */
{
border-top: solid 1px #e7e5dd;
border-bottom: solid 1px #e7e5dd;
margin:0 -2.5em;
padding:1.5em 2.5em;
position:relative;
}

.standout 
{
    background-color:#faf8f6;
    border: solid 1px #e7e5dd;
    margin-bottom: 3em;
    padding:1.5em 1.5em 0 1.5em;
    position:relative;
    zoom:1;
    /* z-index:10; */

    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.gradient h1,
.gradient h2 {
    color:#011960; /* Make the text dark blue if the blue gradient is applied */
}

.content_with_sidebar {
    float: right;
    width: 76%;
}

.content_with_sidebar_cart { /* Cart needs more room than the standard sidebar. Also it's on the left side. */
    float:left;
    width:62%;
}

/* Changing the look and feel of upsells when they are in the cart.  */

.content_with_sidebar_cart h2 
{
    font-size:1.4em;
}

.content_with_sidebar_cart h2.divider {
border-bottom:0;
}

.content_with_sidebar_cart .supplies_upsell .more /* This is temporary until the programmers hide this in the cart only */
{
    display:none;
}


.content_with_sidebar_cart .row
{
    border-bottom: solid 1px #e7e5dd;
}



.sidebar {
    float: left;
    width: 20%;
}

.sidebar h1 { /* Sometimes the first thing in the sidebar is a more suitable h1 but should look like an h3. See moving supplies and about section. */
    font-size: 1.33em;
    margin-bottom: 1.13em;
}

.sidebar_cart {
    float:right;
    width: 34%;
}

.indent {
    margin-left:1.5em;
}



/* =Header ------------------------------------------------------------- */

.header { /* Contains the logo, cart and navigation */
    margin:auto;
    margin-bottom:2.55em; /* this is 2.55 to make safari render the same margin as other browsers (it was off by 1px). */
    width: 75em;
}

.header .row { /*  Contains the logo and cart */
    margin-bottom: .5em;
}

.header_logo { /* Main U-Haul logo and tagline. Links to homepage. */
    background: url(Images/Logo.png) no-repeat top left;
    float:left;
    height:22px; /* Width and height are the size of the bg image. */
    width:120px;
    text-indent: -9999px;
}
.header_tagline
{
	float:left;
	height:22px;
	font-size:19px;
	line-height:1;
	color:#333 !important;
	text-decoration:none;
}

.header_accountlinks li
{
    margin:.25em 0 0 2em;
    float:right;
    padding: 0;
    font-size: 1.17em;
}
.header_lookup a, .header_cart a, li.header_account
{
    padding-left:1.5em;
}
.header_lookup a
{
    background: url(Images/Icons/schedule.gif) no-repeat bottom left;
    white-space: nowrap;
}
.header_account 
{
    background: url(Images/Icons/Account.gif) no-repeat bottom left;
}
.header_cart a { /* The shopping cart in the header. */
    background: url(Images/Icons/Cart.gif) no-repeat bottom left;
    white-space: nowrap;
}

/* Positioning the transparent gifs to make the flexible rounded corners */

.nav_top_left,
.nav_bottom_left,
.nav_top_right,
.nav_bottom_right {
    position:absolute;
}

.nav_top_left {
    left:0;
    top:0;
}

.nav_bottom_left {
    bottom:0;
    left:0;
}

.nav_top_right {
    right:0;
    top:0;
}

.nav_bottom_right {
    bottom:0;
    right:0;
}

.header_navigation { /* Main orange navigation bar. */
    background: #fa4401 url(Images/NavigationBackground.jpg) repeat-x bottom left;
    overflow: hidden;
    position:relative;
    width:100%;
}

.header_navigation ul {
    float: left;
    margin-bottom:0;
}

.header_navigation li {
    float: left;
    height: 100%;
    margin:0;
    padding:0;
}

.header_navigation li a:link,
.header_navigation li a:visited {
    color: #fff;
    display: block;
    line-height: 3.1em;
    float:left;
    height: 100%;
    text-decoration:none;
    
    /* text-shadow: 0px -1px 0px #666; */
}
      
.header_navigation li a:hover,
.header_navigation li a:focus,
.header_navigation li a:active,
.header_navigation li.active a {
    background: #fb7421 url(Images/NavigationHover.jpg) repeat-x bottom left;
}

.header_navigation li a { /* Main nav links - trucks, trailers, supplies, locations */
    font-size: 1.17em;
    font-weight: bold;
    padding: 0 .85em;
}

.header_search {
    background: white url("Images/Icons/search.gif") .25em no-repeat;
    border: 0;
    color: #666;
    float: right;
    font-size: 1.1em;
    margin: .75em 1em;
    margin-right: .75em;
    padding: .25em;
    padding-left: 2em;
    

    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    border-radius:5px;
    -webkit-box-shadow: 0px -1px 0px #666;
    -moz-box-shadow: 0px -1px 0px #666;
}

.header_cart_full a { /* The shopping cart in the header. */
	padding-left:1.5em;
	background: url(/Images/Icons/Cart.gif) no-repeat bottom left;
	white-space: nowrap;
}
 
li.header_cart_empty { /* The shopping cart in the header. */
	padding-left:1.5em;
	background: url(/Images/Icons/Cart.gif) no-repeat bottom left;
	white-space: nowrap;
}

/* =Navigation ----------------------------
.navigation is a horizontal link list by default but is modified by parent containers like .sidebar and .footer. */

ul.navigation {
    list-style-type: none;
    margin-bottom:1.5em;
}

ul.navigation li {
    border-right: solid 1px #d8d6d0;
    display: inline;
    margin-right: 1em; 
    padding-left:0;
    padding-right: 1em;
}

ul.navigation li.active a 
{
    font-weight:bold;
    
}

ul.navigation li.navigation_last { /* Removes right border on last nav item. */
    border:0;
    padding-right:0;
    margin-right:0;
}

.sidebar ul.navigation {/* When navigation is in a sidebar it makes a vertical list. */
    list-style: none;
    margin-bottom:1.5em;
    padding:0;
}

.sidebar ul.navigation li {
    border:none;
    display: inline;
    margin:0;
    padding:0;
}

.sidebar ul.navigation li a {
    border-bottom: solid 1px #e7e5dd;
    display:block;
    font-weight: bold;
    padding: .83em 0;
    text-decoration: none;
    width: 100%;
}

.sidebar ul.navigation li.navigation_first a {
    border-top: solid 1px #e7e5dd;
} 


.sidebar ul.navigation li.active a,
.sidebar ul.navigation li a:hover,
.sidebar ul.navigation li a:focus,
.sidebar ul.navigation li a:active   
{ 
/* If we ever want to set a hover or active state...
background-image: url(Images/Icons/SidebarNavActive.png);
background-repeat: no-repeat;
background-position: right;
*/
    }
a.phonelink,
a.phonelink:hover,
a.phonelink:active,
a.phonelink:visited
{
	/* remove additional styling from telephone links */
	color:inherit;
	text-decoration:inherit;
}

.footer ul.navigation li { /* .navigation in the footer creates vertical link lists. */
    border:none;
    display: block;
    margin:0;
    margin-bottom: .75em;
    padding:0;
}

.footer ul.navigation li a {
    font-weight: normal;
    text-decoration:none;
}

.footer .column_last ul.navigation
{
    padding-bottom:1.5em;
}
.footer .column_last span ul.navigation /* this excludes the investing list from the rule set above */
{
    padding-bottom:0;
}

.footer_logo {
    margin-bottom:.5em;
}

.footer h5 {
    border-bottom: solid 1px #e7e5dd;
    margin-bottom:2em; 
    padding-bottom:.5em;
}




.tabs { /* Tabs are for displaying multiple info on a single thing. See locations detail page. */
    border-bottom: solid 1px #ded9c9;
    clear: both;
    height:3.2em; /* Needs height since it only has an absolutely positioned element in it. */
    margin: 0 -2.5em 3em -2.5em;
    overflow: visible;
    padding: 0 2.5em 0 2.5em;
    position:relative; /* So you can absolutely position the ul and get it to overlap the border-bottom. */
}

.tabs ul {
    bottom:-1px; /* Good browsers use this. */
    _bottom:-2px; /* IE 6 needs this */
    list-style:none;
    margin:0;
    padding:0;
    position:absolute;
}

.tabs li {
    float: left;
    margin: 0 1em 0 0; /* Right margin sets space between tabs. */
    padding-left: 0;
}

.tabs li a {
    background-color: #f2f1ef;
    border: solid 1px #ded9c9;
    color: #3e3e3e;
    display:block;
    font-size: 1.17em;
    padding: .75em 1em;
    text-decoration:none;

    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.tabs li a:visited  {
    color: #3e3e3e; /* IE 6 needs this */
}

.tabs li a:hover,
.tabs li a:focus,
.tabs li a:active {
    background-color:#faf8f6;
    color: #3e3e3e;
}
    
.tabs li.active a,
.tabs li.active a:hover,
.tabs li.active a:focus,
.tabs li.active a:active {
    background-color:#fff;
    border-bottom: solid 1px #fff; /* White border overlaps .tab border to make the tab look active. */
}

.tabs li img { /* So image resizing doesn't mess up tabs with images. See equipment res quote page. */
max-width:none;
}


/* =Tables */

table {
    border-collapse: collapse;
    margin-bottom:1.5em;
    width:100%;
}

td,
th {
    border-bottom: solid 1px #e7e5dd;
    padding:1.5em 1.5em 1.5em 0;
    text-align: left;
    vertical-align:top; 
}

table tr td.row_first,
table tr th.row_first {
    border-top: solid 1px #e7e5dd;
}

thead th,
tfoot td {
    font-size:1.33em;
    font-weight:bold;
    padding:0 1.13em 1.13em 0;
}


tbody th {
    font-weight:normal;
}

td:last-child,
th:last-child
{ /*makes things line up against the right margin automagically in everything but ie*/
    padding-right:0;
}



td.price input { /* If a button is in the price column, set it to the size it should be. */
    font-size: .9em;
}

.data_table {
    background: #fff;
    border: solid 1px #e7e5dd;
    margin: 1px 1px 1.5em 1px;
    width: 99.5%;
}

.data_table td,
.data_table th {
    border: solid 1px #e7e5dd;
    padding: 1em;
}

.data_table th {
    text-align: left;
}

/* This is needed to override the alignment in a data table to match what you defined. Otherwise, it will always inherit align left from above.*/
.data_table th.align_right,
.align_right th
{
    text-align:right;
}
.data_table th.align_center,
.align_center th
{
    text-align:center;
}


.data_table td:last-child,
.data_table th:last-child
{ 
    padding-right:.75em;
}


.data_table thead th,
.data_table tr.thead th,
.data_table tfoot td,
.data_table tr.tfoot td,
.data_table tbody tr.alternating_row th,
.data_table tbody th.alternating_row,
td.alternating_row,
tr.alternating_row td,
tr.alternating_row th {
    background: #F5F5F5;
}

.data_table thead th,
.data_table tfoot td,
.data_table tr.thead th,
.data_table tr.tfoot td {
    font-size:1.33em;
    font-weight:bold;
    padding:.75em;
}

.data_table thead th .small,
.data_table tfoot td .small,
.data_table tr.thead th .small,
.data_table tr.tfoot td .small 
{
    font-weight: normal;
    font-size: .75em;
}

 



.data_table thead + tbody th {
    border: solid 1px #e7e5dd;
    xpadding: .3em; /* why is this in here? It's makes th spacing look weird compared to other cells */ 
    background: white;
}

.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;
}

.data_table td.price 
{
    font-size: 1.33em;
}


table.no_header
{
    border-top: solid 1px #e7e5dd;
    border-collapse: separate;
}


/* =Text -------------------------- */

ul, dl {
    list-style-type: none;
    margin-bottom: 1.5em;
}
    
li, dd {
    margin-bottom: .75em;    
}

dt {
    font-weight:bold;
    margin-bottom: .75em;
}
dd {
    margin-left:1.5em;
    line-height:1.5em;
}

dd + dt 
{
    margin-top:1.5em;
    
}

ul.bullets li { /* If you want bullet points */
    background: url(Images/Icons/Bullet.gif) no-repeat 0em .15em;
    padding-left: 1.5em;
    line-height: 1.5em;
}

ul.big li /* Move the bullet point if the font is bigger */
{
    background-position: 0em .2em;

}


ol li 
{
    margin-left:3em;
}

ol 
{
   margin-bottom: 1.5em;
}


/* =Headers */

h1 {
    font-size:2em;
    margin-bottom:.75em;
}








h2 {
    font-size: 1.67em;
    margin-bottom: .9em;
}

p + h2,
ul + h2, ol + h2, dl + h2,
table + h2{ /* Adds extra space between a paragraph and a header. Doesn't work in IE 6. */
    padding-top:.9em;
}


h2.divider,
h3.divider { /* Puts a border under the h2. Mostly used to separate product rows and related supplies or services. */
    border-bottom: solid 1px #e7e5dd;
    margin-bottom: 1em;
    padding-bottom: .45em;
}

h3 {
    font-size: 1.33em;
    margin-bottom: 1.13em;
}

p + h3,
ul + h3, ol + h3, dl + h3,
table + h3{
    padding-top:1.13em;
}

h4 {
    font-size: 1.17em;
    margin-bottom: 1.29em;
}

p + h4,
ul + h4, ol + h4, dl + h4,
table + h4{
    padding-top:1.29em;
}

h5 {
    font-size: 1em;
    margin-bottom: .75em;
}

p + h5,
ul + h5, ol + h5, dl + h5,
table + h5{
    padding-top:1.5em;
}

h1 span.small /* If you want to add some additional small text to the header. See Checkout. */
{
    font-size:.5em;
    font-weight: normal;
}

h2 span.small 
{
    font-size:.65em;
    font-weight: normal;
}


p, blockquote {
    line-height: 1.5em;
    margin-bottom: 1.5em;
}

blockquote {
    background: url(Images/Quote.gif) no-repeat left top;
    padding-left: 30px;
}

blockquote.pullquote {
    background-image: none;
    font-family: Georgia, Times, "Times New Roman", serif;
    font-size: 1.4em;
    font-style: italic;
    padding: 1.5em;
    text-indent: -0.3em;
    width: 12em;
}

blockquote.float_left {
    margin-right: 1.5em;
}

blockquote.float_right {
    margin-left: 1.5em;
}

/* =Links */

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

a:visited,
a:hover,
a:focus,
a:active {
    color:#579cdc;
}

a img {
    border:none;
    vertical-align:middle; /* this fixes a bug in firefox that underlines the image if it is included with plain text in an anchor tag */
}

big,
.big { /* Usually leading text that is important and should be bigger */
    font-size: 1.17em;
}

small,
.small {
    font-size: .8em;
}

.subtle {
    color:#757575;
}

.more,
.back {
    margin-bottom:3em;
    overflow:hidden;
    zoom:1;
}

.more a {
    background: url(Images/Icons/More.gif) no-repeat top right;
    float: right;
    font-weight: bold;
    line-height: 1.2em;
    padding-right: 1.67em;
}

.back a {
    background: url(Images/Icons/Back.gif) no-repeat top left;
    float: left;
    font-weight: bold;
    line-height: 1.2em;
    padding-left: 1.67em;
}


.standout .more 
{
    margin-bottom:1.5em;
}




.nowrap { /* Use this class instead of <nobr>. Particularly when U-Haul breaks at the dash. */
    white-space:nowrap;
}

.align_right,
.align_right * {
    text-align: right;
}

.align_left,
.align_left * {
    text-align: left;
}

.align_center,
.align_center * {
    text-align: center; 
}


/* =Icons, =errors and =messages */

.message, .error_summary { /* For displaying error, success or any other messages. */
    background-color: #fffac5;
    border: solid 1px #d2cb7e;
    margin-bottom: 3em;
    overflow:hidden;
    padding:1.5em 1.5em 0 1.5em;
    zoom:1; /* So IE can contain floats */

    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.error_summary 
{
    margin-bottom: 1.5em;
}


.info, .info_summary li, .error_item, .error_summary li, 
.success, .feature_summary li, .deal_summary li, .edit, .cancel, .print, .help, .search, .alert, .deal, .account, .secure, .schedule,
.compare, .file_word, .file_pdf, .file_movie, .file_text, .news, .add, .facebook, .twitter, .youtube {
    line-height:1.5em;
    padding-left: 20px; /* Creates space for the icon. In pixels because you don't want this space to expand if text is bigger. */
    padding-bottom: 2px; /* For icons bigger than the current text size (stops them from getting cut off */

    background-repeat: no-repeat;
    background-position: 0 .1em;
}

h4.info,
h4.alert,
h4.success {
    background-position: 0 .2em; 
}

p + h4.info,
p + h4.alert,
p + h4.success {
    padding-top:0;
}

.error_item,
.error_summary li {
    background-image: url(Images/Icons/Error.gif);
    color:#831515;
    font-weight: bold;
}

.error {
    color:#831515;
    font-weight: bold;
}

.success,
.feature_summary li {
    background-image: url(Images/Icons/Success.gif);
}

.positive
{
    color:Green;
}
.highlight
{
    background:#fffac5;
}
.feature_summary li.unchecked {
    background: transparent;
    color: #898989;
}

.hide 
{
    display: none;
    visibility: hidden;
}

.info,
.info_summary li {
    background-image: url(Images/Icons/Info.gif);
}

.edit {
    background-image: url(Images/Icons/Edit.gif);
}

.cancel 
{   
    background-image: url(Images/Icons/Cancel.gif);
}

.secure { 
    background-image: url(Images/Icons/Secure.gif);
    font-weight:bold;
}

.help { 
    background-image: url(Images/Icons/Help.gif);
}

.alert { 
    background-image: url(Images/Icons/Alert.gif);

}

.add 
{
    background-image: url(Images/Icons/Add.gif);
}
.facebook{ background-image:url(/icons/facebook.gif); background-position:left top;}
.twitter{ background-image:url(/icons/twitter.gif); background-position:left top;}
.youtube{ background-image:url(/icons/youtube.gif); background-position:left top;}
ul.navigation li a.alert 
{   
    color:#22609a;
    font-weight: normal;
}

.deal,
.deal_summary li {
    background-image: url(Images/Icons/Deal.gif);
}

.schedule {
    background-image: url(Images/Icons/Schedule.gif);
}

.compare {
    background-image: url(Images/Icons/Compare.gif);
}

.print { 
    background-image: url(Images/Icons/Print.gif);
}

.account { 
    background-image: url(Images/Icons/Account.gif);
}

.file_word,
.file_pdf,
.file_movie,
.file_text {
    font-weight:bold;
}

.file_pdf {
    background-image: url(Images/Icons/FilePdf.gif);
}

.file_word {
    background-image: url(Images/Icons/FileWord.gif);
}

.file_xls {
    background-image: url(Images/Icons/FileXls.gif);
}

.file_text {
    background-image: url(Images/Icons/FileText.gif);
}

.file_movie {
    background-image: url(Images/Icons/FileMovie.gif);
}

.news {
    background-image: url(Images/Icons/News.gif);
    color:#757575;

}
.search
{
    background-image: url(Images/Icons/search.gif);
}

/*Social media icons in the top right corner of the page */
.social_media {
    position: absolute;
    top:10px;
    right:10px;
}

/* =Layout classes ---------------------------------
Use these classes to make multiple columns with equal width. Put column_last on the last column to remove margin and line up with the right side.
We need things like .column .column_2 .column so that nested columns work. Won't need this when IE supports more CSS. */

.row {
    clear: both;
    margin-bottom: 1.5em;
    overflow: hidden;
    width: 100%;
}
    
.column,
.row .column {
    float: left;
    margin-right: 3.5%;
}

.column_last,
.row .column_last {
    float:right;
    margin-right:0;
}

.column_2 .column,
.column_2 .column_last,
.column .column_2 .column,
.column_last .column_2 .column,
.column .column_2 .column_last,
.column_last .column_2 .column_last { width:48%;}

.column_3 .column,
.column_3 .column_last,
.column .column_3 .column,
.column_last .column_3 .column,
.column .column_3 .column_last,
.column_last .column_3 .column_last { width:30.8%;}

.column_3 .column_span_2,
.column .column_3 .column_span_2,
.column_last .column_3 .column_span_2 {width:65.1%;}

.column_4 .column,
.column_4 .column_last,
.column .column_4 .column,
.column_last .column_4 .column,
.column .column_4 .column_last,
.column_last .column_4 .column_last { width:22.3%;}

.column_4 .column_span_2,
.column .column_4 .column_span_2,
.column_last .column_4 .column_span_2 {width:48.1%;}
.column_4 .column_span_3,
.column .column_4 .column_span_3,
.column_last .column_4 .column_span_3{width:73.9%;}

.column_5 .column,
.column_5 .column_last,
.column .column_5 .column,
.column_last .column_5 .column,
.column .column_5 .column_last,
.column_last .column_5 .column_last { width:17%;}

.column_5 .column_span_2,
.column .column_5 .column_span_2,
.column_last .column_5 .column_span_2 {width:37.5%;}
.column_5 .column_span_3,
.column .column_5 .column_span_3,
.column_last .column_5 .column_span_3 {width:58%;}
.column_5 .column_span_4,
.column .column_5 .column_span_4,
.column_last .column_5 .column_span_4 {width:79%;}



.gradient { /* Tiles a gradient at the top of the container. Generally used on .page_header or .standout */
    background: #fff url(Images/Gradient.gif) repeat-x top left;
}

.gradient_big {
    background: #fff url(Images/GradientBig.gif) repeat-x top left;
}


/* =Cart ------------------------------ */
.cart {
    background-color: #f7f6f4;
    border: solid 1px #e7e5dd;
    margin-bottom: 1.5em;
    overflow:hidden;
    padding: 1.5em 1.5em 0 1.5em;
    zoom:1;

    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px;
    border-radius:6px;
}

.cart h2, .cart h3 {
    margin-bottom:0;
}


.cart ul.navigation {
    margin-bottom:0;
}

.cart ul.navigation li a {
    font-weight:normal;
}

.cart ul.navigation li.active a {
    font-weight:bold;
}

.cart table td 
{
line-height: 1.5em;
}

.cart td.price /* Price is a little smaller in the cart and data_table */
{
    font-size: 1.33em;
    line-height: normal;
    padding:1em 0;
}

.cart td.price p.small /* This is for additional price text - due in store, mileage, etc. */
{
    margin-bottom:0;
}

/* These tables have extra rows that look a little different */

.cart_equipment_table, .cart_mh_table
{
border-bottom: solid 1px #e7e5dd;
margin-bottom:3em;
}
    
.cart_equipment_table td, .cart_mh_table td
{
border-bottom:0;
padding-bottom:0;
}







/* =Orders ------------------------- */

.payment_code { /* Payment code you give to your moving helper */
border: dashed 2px #990000;
margin-bottom:3em;
padding: 1.5em 1.5em 0 1.5em;
}



.orders_service 
{
    width:35%;
}

.orders_service_detail
{
    width:61%;
}




.divider, .divider_first { /* Separates out stuff with a border bottom. Used on results, reviews or promos at the bottom of the page. */
border-bottom: solid 1px #e7e5dd;
margin-bottom:2em; 
padding-bottom:.5em;
}

.divider_first { /* First result needs border and padding top */
border-top: solid 1px #e7e5dd;
    padding-top: 2em;
}

/* .header_with_links /* This has to be here or it doesn't work - need to look at rearranging /* This has been replaced with the no_ below. 
{
    margin-bottom:0;
} 
*/

.map_pin {
    background: url('Images/Icons/Result.png') no-repeat 0 0;
    height: 29px;
    width: 25px;
    top: -14px;
    color: #FFFFFF;
    text-align: center;
    font-size: 10pt;
    padding-top: 3px;
    font-weight: bold;
    margin-right: 5px;
    text-decoration: none;
    cursor: pointer;
}

.map {
    border: 1px solid #bdd1ec;
    position: relative !important;
    width: 99.5% !important;
    height: 250px !important;
    overflow: hidden !important;
}
        
 /* The map icon that shows order by distance and the recommended location. */
.result_number,
.result_recommended,
.result_preferred {
    color:#fff;
    float:left;
    font-size: 12px;
    font-weight:bold;
    height:23px;
    margin-right:1.5%;
    padding-top:3px;
    text-align: center;
    text-decoration: none;
    width:23px;
}

.result_number {
    background-image: url(Images/Icons/ResultNumber.png);
}

.result_recommended {
    background-image: url(Images/Icons/ResultRecommended.png);
}

.result_preferred {
    background-image: url(Images/Icons/ResultPreferred.png);
}

.map_pin a,
.map_pin a:hover,
.map_pin a:visited,
a.result_number,
a.result_number:hover,
a.result_number:visited,
a.result_recommended,
a.result_recommended:hover,
a.result_recommended:visited,
.result_recommended a,
.result_recommended a:hover,
.result_recommended a:visited,
a.result_preferred,
a.result_preferred:hover,
a.result_preferred:visited,
.result_preferred a,
.result_preferred a:hover,
.result_preferred a:visited {
    color: #fff;
    font-size: 12px;
    text-decoration: none;

}





/* =Ratings =pictures and =products -------------------------- */

.picture, .news_caption { /* Pictures - not design elements */
    background-color: #fff;
    border: solid 1px #e7e5dd;
    margin-bottom: 1.5em;
    padding: 10px;
    text-align:center;
    font-style:italic;
}
.picture img, .news_caption img{ /* for images within a picture div... useful if you want to have a caption */
    margin-bottom:10px;
}
.picture span, .news_caption span
{
    clear:both;    
}
table .picture { /* If you have a picture in a table remove margin. See storage detail page. */
    margin: 0;
}

.news_caption.float_right,
.picture.float_right,
img.float_right {
    clear: right;
    margin-left: 1.5em;
    margin-bottom:1.5em;
}

.news_caption.float_left,
.picture.float_left,
img.float_left { 
    margin-right: 1.5em;
    margin-bottom:1.5em;
}

.tilt_right {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
}

.tilt_left {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
}

.shadow {
    -moz-box-shadow: 2px 2px 4px #999;
    -webkit-box-shadow: 2px 2px 4px #999;
    box-shadow: 2px 2px 4px #999;
}

.rounded_corners {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;    
}

.rating { /* Apply to a row with the customer's name and star rating */
    font-size: 1.17em;
}

.rating .column_last {
    width:auto; /* If you are already in a column_x this overrides set width. */
}

img.rating { /* When you have a rating and a reviews link next to it */
    margin-right: 5px;
    vertical-align:text-top;
}



/* =Thumbnails */

.thumbnail_row 
{
    clear: both;
    margin-bottom:0;
    overflow: hidden;
    width: 100%;
}


.thumbnail_row .column
{
    font-weight:bold;
    height:240px;
    text-align:center;
    width:138px;
   
 }         


.thumbnail_row .column p 
{
    margin-bottom: .75em;
   
}

.thumbnail_row .column .price
{
     font-size: 1.17em;
}

.thumbnail_row .column .success 
{
    font-weight: normal;
    padding-top:2px;
    
}

.thumbnail_row .column .stock 
{
    font-weight:normal;
} 



/* This is the table that holds the product thumbnail image. 
It's a table because getting the product image to align center and stick to the bottom of a div is a pain.
*/

table.thumbnail_image
{
    padding:0;
    margin-bottom:.75em;
}


table.thumbnail_image td 
{
    border: 0;
    padding:0;
    height:110px;
    text-align: center;
    vertical-align:bottom; 
  
   
}








.content_with_sidebar_cart .thumbnail_row .column /* Give more space to products displayed in the cart. */
{
   margin-right: 7%;
   _margin-right: 5%; /* Quick fix for IE 6. Needs this or it drops the supplies products to 2 lines. Need to investigate more. */
   
}

.column_2 .column .thumbnail_row .column, .column_2 .column_last .thumbnail_row .column
{
 
    width: 185px;
   
}


/* General thumbnails (not store products). See location pics and trucks page */

.thumbnail {
    font-weight:bold;
    text-align:center;
}

.thumbnail img {
    margin-bottom: .82em;
}

.thumbnail a span { /* Use this around the thumbnail link/title if you want an image and its title to be within the same anchor. See /Trucks */  
    margin-bottom: .75em;
    text-decoration:underline; /* When an anchor tag is around an image and some text, the text looses it's underline in some browsers */
    display:block;
}






.price, .price_small {
    font-size: 2em;
    font-weight:bold;
}

p.price {
    margin-bottom:.75em;
}


td.price, td.price_small
{
padding:.5em 0;
text-align: right;
}

.data_table td.price 
{
    padding: 1em;
}

td.price_small 
{
    font-size: 1.33em;
    padding:1em 0;
}


td.price .small, td.price_small .small { /* For additional info like mileage, handling fees, etc. */
    font-size: .65em;
    font-weight: normal;
}


.thumbnail .price {
    font-size: 1.17em;
}

.additional_media .column,
.additional_media .column_last { /* Additional photos or videos on the product detail page */
    border:solid 1px #e7e5dd;
    height:7em;
    overflow:hidden;
    position:relative; /* So you can absolutely position the Play.png icon on videos */
    width:30%;
}





/* =Slideshow ------------------------------------------------------------- */
.slideshow { 
    width:35.2em;
    margin:0 auto 1em auto;
}

.slideshow p.align_right {
    margin-bottom:.3em;
}

.slideshow_active {
    overflow:hidden;
    margin:0;
    text-align:center;
    background-color: #f6f6f6;
    border: solid 1px #e7e5dd;
}

.slideshow_active h5,
.slideshow_active p {
    margin:0 1em 1em 1em;
    text-align:left;
    /*display:none;  Comment this out if the higher-ups want to see captions. */
    /*visibility:hidden;   Comment this out if the higher-ups want to see captions. */
}

.slideshow_active img {
    max-height:400px;
    max-width:400px;
    margin:1em 1em 1em 1em;
}

.slideshow_thumbnails { 
    background-color: #f6f6f6;
    border: solid 1px #e7e5dd;
    margin-top:1em;
    overflow:hidden; /* Needed to contain floated images. */
    zoom:1; /* Needed to contain floated images in IE6 */
}

.slideshow_thumbnails ul {
    position: relative;
    overflow: hidden;
    float:left;
    margin:1em .6em 1em .9em;  
    padding:0; 
    list-style-type:none;  
}
    
.slideshow_thumbnails ul li {
    overflow:hidden;
    float:left;  
    margin:0 .3em .3em 0;
}

.slideshow_thumbnails ul li a {
    display:block;
    overflow:hidden;
    width:94px;
    height:58px;
    border: solid 2px #f6f6f6;
}

.slideshow_thumbnails li a:hover,
.slideshow_thumbnails li a:focus,
.slideshow_thumbnails li a:active {
    background:#f08e2d;
    border: solid 2px #f08e2d;
}

.slideshow_thumbnails li a.slideshow_thumbnail_active {
    background:#f67321;
    border: solid 2px #f67321;
}



/* =Forms -------------------------------------- */

.form { /* All forms need this. */
    margin-bottom:1.5em;
    overflow: hidden;
    zoom:1;
}

.action { /* Green form usually for quick actions (not large forms). */
    background-color: #cde989;
    border: solid 1px #a5c374;
    padding:1.5em 1.5em 0 1.5em;

    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px;
    border-radius:6px;
}

.action a:visited /* Our normal visited color is hard to read on the green. */
{
    color: #22609a;
}

.form .row
{ 
    display:block;
    height: auto;
    margin: 0;
    padding: 0;
}

.form .grouping {
    padding-bottom: 1.5em;
}

.form .row .grouping {
    float:left;
    margin-right:1.5em;
}


.form label.fixed {
    text-align: right;
    width: 10em;
}

.form .grouping label {
    display:block;
    font-weight: bold;
    padding:0;
    line-height: 2em; /* gives space for error_item "x" */
}

.action .grouping label {
    color: #000;
}

.form .label_beside label {
    float:left;
    padding:.2em .5em 0 0;
}


.form .label_beside label.big 
{
    font-size:1.25em;
    padding-top:0;
}

.form .label_beside select {
    margin-top:.25em;
}

.form .label_right br { /* hides asp.net's <br> in between input and label */
    display:none;
}

.form span.label_right {
    padding-bottom:.25em;
}

.form .label_right input,
.form .label_right label
 {
    float:left;
    font-weight: normal;
    line-height:1.75em;
}

.form .label_right label {
    margin-right: .42em;
    padding-top: 2px;
}

.form .column .label_right input {
    clear:both;
}

.form .column .label_right label {
    float:none;
}

.form input:focus,
.form textarea:focus {
    background-color: #FFFFCC;
}

.form textarea {
    font-family: Arial, Helvetica, sans-serif;
    overflow: auto; /* hides scrollbars in ie */    
}

.form .grouping input,
.form textarea {
    font-size: 1.17em;
    font-weight:normal;
    padding-left: .25em;
    padding-top: .25em;
}
        
.form .grouping input {
    line-height: 100%;
    height: 1.5em;
}

.align_right input /* If a form is in an align_right row make sure the text in the textbox is unaffected */
{
    text-align:left;
}

.form .row .grouping_button { /* For buttons in a horizontal form. */
    float:left;
    padding-bottom: 1.5em;
    padding-top: 2em; /* Compensates for the space labels take up. */
}

.grouping_button
{ 
    float:right;
    padding-bottom: 1.5em;
}


.form .align_right .grouping_button 
{
     display:block;
     float:right;
}

.grouping_button p 
{
    margin-top: 1.5em;
    margin-bottom:0;
}


.date_picker img /* Calendar icon on the date picker */
{
    cursor: pointer;
    padding-left:5px;
    vertical-align:top;
    
}


.form .label_context label { /* Hides labels off screen.  Great for creating compliant code without over-explaining form fields for customers that possess the gift of sight. */
    height:1px;
    width:1px;
    left:-10000px;
    overflow:hidden;
    position:absolute; 
}

.form div.label_context 
{
    padding-top:0;
}

.form span.label_context /*Fills the space created by hiding labels off screen.*/
{
    padding-top:2em;
}

.form .label_beside .grouping_button,
.form .label_context .grouping_button { /* Take off the top padding on a button if the label is hidden because it is context or the label is beside the input */
    padding-top: 0;
}




/* If you don't want bottom margin or padding on a form use class="form form_single". 
Usually this happens if you have a single dropdown in a table that already spaces things out with padding on the td. */

.form_single, 
.form_single .row,
.form_single .row .grouping,
.form_single .row .grouping_button {
    margin-bottom:0;
    padding-bottom:0;
}



fieldset {
    float: left; /* Need this to make legend behave in all browsers */
    margin-bottom:1.5em;
    
}

.fieldset_last 
{
    margin-bottom:0;
}

legend { /* IE adds extra margin to legend unless you float fieldset and then position legend to the left */

    left:0;
    position:relative;
    font-weight:bold;
    font-size: 1.33em;
    padding-bottom: 1.13em;
}

.legend_beside /* If you want the legend to the left of its associated label-input groups. See trailer rates. Doesn't work in IE 7 or 6 but degrades nicely. */
{
    float:left;
    margin-right: 1.5em;
}

.action fieldset legend 
{
    color: #000;
}



/* These classes are used to style the legends like headers. Padding is used because margin does not behave consistently on legend. */



legend.h1 {
    color:#011960;
    font-size:1.8em;
    padding-bottom: .8em;
}

legend.h2 {
    font-size: 1.67em;
    padding-bottom: .45em;
    _margin-bottom: .9em; /* IE 6 needs this because it doesn't understand the CSS below. */
}

legend.h2 + .row { /* Creates a border underneath the legend. The legend itself can't have a border that stetches across the width of its container. */
    border-top: solid 1px #e7e5dd;
    padding-top: 1.5em;
}

legend.h3 {
    font-size: 1.33em;
    padding-bottom: 1.13em;
}

legend.h4 {
    font-size: 1.17em;
    padding-bottom: 1.29em;
}


legend.h5 {
    font-size: 1em;
    padding-bottom: 1em;
}

legend.label 
{
    font-size:1em;
    line-height:2em;
    padding-bottom:0;
}

/* Styles the table rendered out by asp:CheckBoxList and asp:RadioButtonList. */

table.input_list {
    width:auto;
    margin-bottom:0;
    
}

table.input_list td { 
    border:0;
    padding:0 1.5em 1.5em 0;
}

table.input_list td input,
table.input_list td label,
.row .grouping table.input_list td input,
.row .grouping table.input_list td label,
.input_list input,
.input_list label
 {
    float:left; /* So the checkbox or radio button lines up with label. */
    padding-top:2px;
    height: auto;
}


/* =Buttons ----------------------------------- */
    
.button, .button_next, .button_previous, .button_add, .button_cancel, .button_confirm, .button_disabled, .button_next_disabled, .grouping .button {
    background-color: #f3d45f; 
    background-image: url(Images/Buttons/Button.png); /* Background transparent png creates a gradient on any color button. */
    background-position: left;
    background-repeat: no-repeat;
    border: 1px solid;
    border-bottom-color: #333;
    border-left-color: #bbb;
    border-right-color: #555;
    border-top-color: #ddd;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    height: auto;
    overflow: visible; /* ie6 removes extra spacing */
    padding: .25em .5em;
    text-decoration: none;
    width: auto; /* ie6 removes extra spacing*/
    zoom: 1; /* ie6 hasLayout */


    /* Adds rounded corners to mozilla and webkit (apple) browsers */
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px;
    border-radius: 3px;
}




.button:hover,
.button:focus, 
.button:active,  
.button_next:hover,
.button_next:focus,
.button_next:active, 
.button_previous:hover,
.button_previous:focus,
.button_previous:active, 
.button_add:hover,
.button_add:focus, 
.button_add:active,  
.button_cancel:hover,
.button_cancel:focus,
.button_cancel:active, 
.button_confirm:hover,
.button_confirm:focus,
.button_confirm:active {
    background-color: #f5e087;
}

.button:visited,  
.button_next:visited, 
.button_previous:visited, 
.button_add:visited,  
.button_cancel:visited, 
.button_confirm:visited{
    color:#000;
}

.button_next {
    background-image: url(Images/Buttons/ButtonNext.png);
    background-position: right;
    padding-right: 24px; /* Padding is in pixels because you don't want this space to increase if you increase button size */
}

.button_previous {
    background-image: url(Images/Buttons/ButtonPrevious.png);
    background-position: left;
    padding-left: 24px;
}

.button_add {
    background-image: url(Images/Buttons/ButtonAdd.png);
    background-position: left;
    padding-left: 30px;
}

.button_cancel {
    background-image: url(Images/Buttons/ButtonCancel.png);
    background-position: left;
    padding-left: 30px;
}

.button_confirm {
    background-image: url(Images/Buttons/ButtonConfirm.png);
    background-position: left;
    padding-left: 30px;
}


.button_disabled, .button_next_disabled
{
    background-color: #dfdfdf;
    border-bottom-color: #b3b3b3;
    border-left-color: #e6e6e6;
    border-right-color: #c0c0c0;
    border-top-color: #f2f2f2;
    color: #a0a0a0;
    
}

.button_disabled:hover,
.button_disabled:focus,
.button_disabled:active, 
.button_next_disabled:hover,
.button_next_disabled:focus,
.button_next_disabled:active  
{
    cursor:default;
}

.button_next_disabled 
{
    background-image: url(Images/Buttons/ButtonNextDisabled.png);
    background-position: right;
    padding-right: 24px; /* Padding is in pixels because you don't want this space to increase if you increase button size */
}

.button_link
{
    color: #22609a;
    text-decoration:underline;
    border:none;
    background:none;
    padding:0;
    display:inline;
}

.button_link:hover,
.button_link:focus,
.button_link:active
{
    color:#579cdc;
    text-decoration:underline;
    background:none;
    padding:0;
    display:inline;
    border:none;
    cursor:pointer;
}


input.big, .button_big {
    font-size:1.5em;
}


td.button /* If you have td that has a button in. Usually the last column so padding-right is removed. See storage rates. */ {
    padding-right:0;
}

.button, .button_next, .button_previous, .button_add, .button_cancel, .button_confirm { /* IE6 can't position tansparent bg pngs so it just gets a solid color and no icons. */
    _background: #f5e089; 
    _padding: .25em .5em;
}


/* =Footer and legalese --------------------------------------- */    

.footer { 
    border-top: solid 1px #e7e5dd;
    clear: both;
    padding-top: 2.5em;
    position:relative;
    zoom:1;
}

.footer h5 {
    margin-bottom: 1.5em;
}

.footer ul { /* Footer is at the botton of the page so it doesn't need margin bottom. */
    margin:0;
}

.legal { /* Legal info, languages and phone number */
    color: #51493a;
    font-size: .92em;
    margin:auto;
    max-width: 100%;
    min-width: 740px;
    text-align:center;
    width: 80em;
}

.legal ul.navigation li {
    font-weight: normal;
}


/* =Loading overlay */

.loading_overlay, .loading_icon_wrapper, .loading_overlay_iframe
{
    top:0;
    left:0;
    position:absolute;
}
.loading_overlay
{
    filter:alpha(opacity=75);
    -moz-opacity:0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
    background:white;
    z-index:10;
}
.loading_icon_wrapper{    
    z-index:20;
    width:100%;
    top:50%;
    position:fixed;
    _position:absolute;
    _top:150px;
}
.loading_overlay_iframe
{
    display:none;
    _display:block;
    _filter:mask();
}

.loading_icon
{
    width:100px;
    text-align:center;
    margin:0 auto;
    background:white;
}
.loading_icon .loading_spinner
{
    height:85px;
    background:white url(images/loading.gif) no-repeat center center;
}
.context { /* used to hide things that provide additional context for screen readers. */
    height:1px;
    left:-10000px;
    overflow:hidden;
    position:absolute;
    top:auto;
    width:1px;
}


code { /* used for writing smallcode examples - maintains the spacing as it is in the html. */
        color: #790000;
        font-size: 1.2em;
    }



/* Styles for the storage room size dealie */

/* Why are these classes in kinda camel case? -Jim */

.box_size
    {
        width: 80px;
        height: 80px;
        margin:0 auto;
        background: url(Images/BoxSizes/boxsizes.gif) no-repeat -160px -134px;
        position: relative;
    }
    .box_size .tr, .box_size .br, .box_size .tl, .box_size .bl, .box_size .border_maker
    {
        position: absolute;
    }
    .box_size .border_maker
    {
        border: 1px solid black;
        width: 78px;
        height: 78px;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .box_size .tr
    {
        top: 0;
        right: 0;
        width: 50%;
        height: 50%;
        background: url(Images/BoxSizes/tr.gif) no-repeat top left;
        z-index: 2;
    }
    .box_size .tl
    {
        top: 0;
        left: 0;
        width: 50%;
        height: 50%;
        background: url(Images/BoxSizes/tl.gif) no-repeat top right;
        z-index: 3;
    }
    .box_size .br
    {
        bottom: 0;
        right: 0;
        width: 50%;
        height: 50%;
        background: url(Images/BoxSizes/br.gif) no-repeat bottom left;
        z-index: 4;
    }
    .box_size .bl
    {
        bottom: 0;
        left: 0;
        width: 50%;
        height: 50%;
        background: url(Images/BoxSizes/bl.gif) no-repeat bottom right;
        z-index: 5;
    }
    .box_size .items
    {
        position: absolute;
    }
    .box_size .human
    {
        background:url('Images/BoxSizes/Items/human.gif') no-repeat top left;
        width:9px;
        height:30px;
        margin-left:-5px;
        margin-top:-18px;
    }
    .box_size .couch
    {
        background:url('Images/BoxSizes/Items/couch-realistic.gif') no-repeat top left;
        width:35px;
        height:30px;
        margin-left:-12px;
        margin-top:-11px;
    }
    .box_size .couch_rev
    {
        background:url('Images/BoxSizes/Items/couch-realistic_rev.gif') no-repeat top left;
        width:35px;
        height:30px;
        margin-left:-23px;
        margin-top:-11px;
        }
    .box_size .loveseat
    {
        background:url('Images/BoxSizes/Items/loveseat-realistic.gif') no-repeat top left;
        width:29px;
        height:27px;
        margin-left:-12px;
        margin-top:-11px;
        }
    .box_size .loveseat_rev
    {
        background:url('Images/BoxSizes/Items/loveseat-realistic_rev.gif') no-repeat top left;
        width:29px;
        height:27px;
        margin-left:-17px;
        margin-top:-11px;
        }
    .box_size .mediumbox
    {
        background:url('Images/BoxSizes/Items/medbox.gif') no-repeat top left;
        width:10px;
        height:9px;
        margin-left:-5px;
        margin-top:-3px;
        }

/* styles for the truck/trailer combo images */

.combo_wrapper
{
    width:500px;
}
.combo_trailer
        {
            position: relative;
            width: 178px;
            overflow: visible;
            height: 108px;
            float: left;
        }
        .combo_trailer img
        {
            position: absolute;
            right: -12px;
            bottom: 0;
        }
        .combo_truck
        {
            position: relative;
            width: 322px;
            overflow: visible;
            height: 108px;
            float: right;
        }
        .combo_truck img
        {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
        }
/* =Floats */

.float_left {
    float: left;
}

.float_right {
    float:right;
    margin-right:0;
}

.no_top {
margin-top:0;  
padding-top:0; 
}    

.no_right {
margin-right:0;  
padding-right:0; 
}  

.no_bottom, .desktop_no_bottom {
margin-bottom:0;  
padding-bottom:0; 
}  

.no_left {
margin-left:0;
padding-left:0;   
}  

.clear
{
    clear:both;
}

/* Styles to hide the spacing issues created by the table asp:formview renders */

   .form_view, .form_view td
    {
        margin:0;
        padding:0;
        border:0;
    }
    
    .form_view + h2 
    {
        padding-top:0;
    }
    
.desktop_hide, .onlymobile /* Hide things from non-mobile browsers */
{
	display:none !important;
}

/* =Print - Used to style print media  ----------------------------------------------- */

@media Print {

body {
    padding: 0;
}

.main {
    border:0;
    padding:0; 
    display: inline; 
}

.header {
    display:none;
}

.row, .message {
    overflow:visible;
}

.row:after, .message:after { /* Mozilla printing bug fix. */
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

.message, .standout, .divider, .divider_first, ul.navigation li, .sidebar ul.navigation li a, .sidebar ul.navigation li.navigation_first a, td, th, .action, h2.divider, label.h2, .tabs, .tabs li a,
.data_table, .data_table td, .data_table th
 { 
    border-color: #aaa; /* Make borders a darker color that prints better. */
}

.header, .main, .legal, .page_header, .page_header_border { 
    max-width: 100%;
    min-width:100%; 
    width:100%; 
}

.page_header, .page_header_border { 
    margin-left:0;
    margin-right:0;
    margin-top:0;
    padding:0;
    overflow:visible;
}

.tabs {
    margin-left:0;
    margin-right:0;
}

.feature_summary li { /* Feature lists use bg images so this fixes it for print */
    background: transparent;
    padding-left: 5px;
    vertical-align: middle;
}

.footer,
.legal {
    display: none;
}

*:first-child+html .feature_summary li,
* html .feature_summary li { /* for ie */
    list-style-image: url(Images/Icons/Success.gif);
    list-style-position: inside;
}

*:first-child+html .feature_summary li.unchecked,
* html .feature_summary li .unchecked { /* for ie */
    color: #666666;
    list-style-image: none;
}

.feature_summary li:before { /* for firefox because of printing bug https://bugzilla.mozilla.org/show_bug.cgi?id=133490 */
    content: url(Images/Icons/Success.gif);
}

.feature_summary li.unchecked:before {
    content: url(Images/Icons/Transparent.gif);
    padding-left: 16px;
}

.noprint {
    display: none;
}

.print_break {
    page-break-after: always;
}

.payment_code 
{
    page-break-before: always;
}

}

/* for default input text insite textbox  */
.InfieldTextDefaultMessage{

    color: #999999;
}