@charset "utf-8";
/* -----------------------------------------------------

* Filename: style.css
* Description: Global Styles
* Version: 1.0.0 (2009.08.20)
* Website: www.aaronselfstorage.com
* Author: Dana Severance @ Automatit, Inc

== ANCHOR =========================================

	@reset				Standard Reset
	@general			General Declarations
	@typography			General Typography
	@header				Header Declarations
	@container			Container Declarations
	@footer				Footer Declaration

-------------------------------------------------------*/

/* @reset
-------------------------------------------------------*/
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {margin: 0; padding: 0;}
html {height: 100%; overflow-y: scroll;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;}
img {border: 0;}
a {outline: none;}

/* @general
-------------------------------------------------------*/
body {background: #ffffff url(../img/bg.png) repeat-x; color: #747474; font: 12px/16px Arial, Helvetica, sans-serif; height: 100%;}
#wrap {height: auto !important; height: 100%; margin: 0 auto; min-height: 100%; position: relative;}
	.wrap {margin: 0 auto; width: 905px;}
	.floatleft {clear: left; float: left; margin: 0 30px 10px 0;}
	.floatright {clear: right; float: right; margin: 0 0 10px 30px;}

/* @typography
-------------------------------------------------------*/
#container h1 {padding-bottom: 16px;}
#container h2 {padding: 5px 0 10px;}
#container ul, #container ol {margin-left: 30px; padding-bottom: 13px;}
	#container li {padding-bottom: 3px;}
p, address {padding: 0 0 16px 0;}
dl {margin-left: 10px; padding-bottom: 13px;}
	dt {clear: left; float: left; font-weight: bold;}
	dd {padding: 0 0 14px 80px;}
a {color: #c13a3c;}
	a:link, a:visited {text-decoration: underline;}
	a:hover, a:focus {text-decoration: none;}
.error {color: #d82727;}
.hidden {display: none;}	

/* @header
-------------------------------------------------------*/
#header {height: 441px; position: relative; width: 100%;}
	#logo {left: 0px; position: absolute; top: 18px;}
	
	/* menu styles */
	#nav {display: block; left: 302px; list-style: outside none; margin: 0; padding: 0; position: absolute; top: 29px; width: 609px; z-index: 2;}
		#nav ul {background: #a7caa9; display: none; font-size: 11px; left: 0; list-style: outside none; line-height: 13px; margin: 0; padding: 3px; position: absolute; top: 58px; z-index: 3;}
			#nav li {display: inline; float: left; margin: 0; padding: 0; position: relative;}
				#nav li a {background: url(../img/nav.png); display: block; float: left; height: 58px; }
					#nav li a.home {background-position: 0 0; width: 108px}
						#nav li a.home:hover, #nav li a.home:focus {background-position: 0 -58px;}
						#nav li a.home#current {background-position: 0 -58px;}
					#nav li a.loc {background-position: -108px 0; width: 113px}
						#nav li a.loc:hover, #nav li a.loc:focus {background-position: -108px -58px;}
						#nav li a.loc#current {background-position: -108px -58px;}
					#nav li a.pay {background-position: -221px 0; width: 119px;}
						#nav li a.pay:hover, #nav li a.pay:focus {background-position: -221px -58px;}
						#nav li a.pay#current {background-position: -221px -58px;}
					#nav li a.res {background-position: -340px 0; width: 132px}
						#nav li a.res:hover, #nav li a.res:focus {background-position: -340px -58px;}
						#nav li a.res#current {background-position: -340px -58px;}
					#nav li a.contact {background-position: -472px 0; width: 137px;}
						#nav li a.contact:hover, #nav li a.contact:focus {background-position: -472px -58px;}
						#nav li a.contact#current {background-position: -472px -58px;}
					#nav ul li {display: block; padding: 3px; text-decoration: none;}
						#nav ul li a {background: #edf5ed; color: #406a42; display: block; float: left; height: auto; padding: 5px 10px; text-decoration: none; text-indent: 0em; width: 11em;}
								#nav li:hover ul {display: block;}
									#nav ul a:hover {background: #477349; color: #ffffff; text-decoration: none;}
	#head {left: 3px; position: absolute; top: 97px;}		
		#head #head-text {background: url(../img/head-left.png); float: left; height: 346px; margin: 0; padding: 0; position: relative; width: 301px;}
			#head #head-text h2 {padding: 35px 0 5px 25px;}
			#head #head-text p {padding: 0 15px 14px 28px;}
			#head #nav-sec {list-style: none; margin: 0; padding: 0 0 0 22px;}
				#head #nav-sec li {display: block; margin: 0; padding: 0;}
					#head #nav-sec li a {background: url(../img/nav-sec.png); display: block; height: 30px; width: 261px;}
					#head #nav-sec li a.tips {background-position: 0 0;}
					#head #nav-sec li a.products {background-position: 0 -30px;}
					#head #nav-sec li a.fits {background-position: 0 -60px;}
		#head #head-img {float: right; margin: 0; padding: 0; position: relative; width: 600px;}
			#head #head-img #star {position: absolute; right: -20px; top: -20px;}
	
/* @container
-------------------------------------------------------*/
#container {background: url(../img/content-bg.png) no-repeat top; height: auto !important; overflow: auto; min-height: 217px; padding: 25px 40px 70px;}
* html #container {padding-bottom: 0; margin-bottom: 70px;} /* bottom fix for ie6 */

	/* content */
	#content {}
		#content #map_canvas {border: 1px solid #a7caa9; float: right; height: 225px; width: 500px;}
			#content #map_canvas p {display: block; font-weight: bold; margin: 10px auto 0; text-align: center;}
	
	/* index spesific declarations */
	#home #facilities {padding: 0 0 0 11px;}
		#home #facilities a {display: inline; margin: 0; padding: 0;}
		#home #facilities img {display: inline; float: left; margin: 0; padding: 0;}
	#home #container {background: url(../img/content-h-bg.png) no-repeat top; padding-right: 30px;}
		#home #content {float: left; width: 530px;}
			#home #content strong {font-style: italic; font-weight: bold;}
			#home #content img.floatright {margin: 0; position: relative; right: -10px;}
		#home #aside {float: right; width: 245px;}
			#home #aside #map {display: block; margin: 0 auto 10px;}
			#home #aside ol {
	list-style: decimal;
	margin-left: 30px;
}
			
	/* product script */
	fieldset {border: 0;}
		fieldset.btn {padding-top: 20px; text-align: center;}
	
		/* detailed alert information */
		#alert-box {min-height: 40px; margin: 0 0 13px 0;}
			#alert-box .warning {background: #fffbcc url(../img/warning.png) no-repeat 10px 50%; border: 1px solid #f7a003; color: #747474; padding: 10px 10px 10px 40px;}
			#alert-box .success {background: #ceffbf url(../img/okay.png) no-repeat 10px 50%; border: 1px solid #18b301; padding: 10px 10px 10px 40px;}
			#alert-box .error {background: #fccccc url(../img/error.png) no-repeat 10px 50%; border: 1px solid #d82727; padding: 10px 10px 10px 40px;}
			#alert-box .info {background: #bfd0ff url(../img/info.png) no-repeat 10px 50%; border: 1px solid #2462ff; padding: 10px 10px 10px 40px;}
			#alert-box .help {background: #bfd0ff url(../img/help.png) no-repeat 10px 50%; border: 1px solid #2462ff; padding: 10px 10px 10px 40px;}
	
		/* customer information form */
		form #info {list-style: none; margin: 0; padding: 0 0 10px 175px; width: 400px;}
			form #info li {overflow: auto; margin: 0; padding: 0 0 .5em 0;}
			form #info li label {float: left; padding: 4px 10px 0 0; text-align: right; width: 150px;}
			form #info li input, #info li select {width: 150px;}
	
		/* main order form */
		#products {width: 100%;}
			#products th {background: #9CC39E; color: white; padding: 5px;}
				/*#products th.price, #products th.qty, #products th.tot {text-align: center;}*/
			#products tfoot th {border-top: 1px solid #9CC39E;}
			#products td {border-top: 1px solid #9CC39E; padding: 5px; text-align: center; vertical-align: middle;}
			#products .name {width: 225px;}
				#products th.name, #products td.name {text-align: left;}
			#products .price {width: 50px;}
			#products .qty {width: 20px;}
				#products  input.qty_input {width: 20px;}
			#products .tot {width: 70px;}
				#products input.tot_input {width: 40px;}
		
		/* confirm order page */
		#confirm dl {padding-bottom: 5px;}
			#confirm dt {clear: both; float: left; font-weight: bold; padding-bottom: 5px; width: 15em;}
			#confirm dd {padding-bottom: 5px; padding-left: 15em;}
		#confirm table {padding-bottom: 10px; width: 500px;}
			#confirm table th {border-bottom: 1px solid black; padding: 5px; text-align: left;}
			#confirm table td {border-bottom: 1px dotted gray; padding: 5px;}
			#confirm table .total th {border-bottom: 0;}
			#confirm table .total td {border-bottom: 0; color: #d82727;}	
	
/* @footer
-------------------------------------------------------*/
#footer {background: #d5e5d6; bottom: 0; height: 43px; left: 0; overflow: hidden; padding-top: 13px; position: absolute; width: 100%;}
	#footer p {float: left; padding-left: 25px;}
	#footer ul {float: right; margin: 0; padding: 0 25px 0 0; width: 500px; text-align: right;}
		#footer li {display: inline; margin: 0; padding: 0;}
			#footer li a {border-right: 1px solid #828282; color: #828282; padding: 0 .55em 0 .5em;}
			#footer li a.last {border-right: none; padding: 0 0 0 .5em;}