* {margin: 0; padding: 0;} body {padding: 8px 0 20px; background: #fff url(../i/bg_gradient.jpg) 0 0 repeat-x; color: #333; font: normal 62.5%/1.4 Arial, Helvetica, lucida, sans-serif;} table {font: normal 1em Arial, Helvetica, lucida, sans-serif;} a {outline: 0; color: #004a3d; text-decoration: none;} a:hover {text-decoration: underline;} a img {border: none;} fieldset {border: none;} input, select, textarea {padding: 2px; font: normal 1.2em Arial, Helvetica, lucida, sans-serif;} input.text {border: 1px solid #004a3d; width: 156px;} select {border: 1px solid #004a3d; padding: 1px; width: 162px;} textarea {height: 100px; width: 350px; border: 1px solid #004a3d;} input.button {border: 1px solid #7ca29b; padding: 3px 4px 2px; background: #004a3d; color: #fff; cursor: pointer; font-size: 1.1em; text-transform: uppercase;} .clear {clear: both; overflow: hidden; height: 0;} #headerBg {height: 27px; width: 784px; margin: 0 auto; background: url(../i/bg_top.png) 0 0 no-repeat;} #wrapper {width: 760px; margin: 0 auto; padding: 0 12px; background: url(../i/bg_mid.png) 0 0 repeat-y;} #footerBg {height: 24px; width: 784px; margin: 0 auto; background: url(../i/bg_bottom.png) 0 0 no-repeat;} #header {position: relative; padding: 0 15px 12px;} #reserveSpace {position: absolute; right: 15px; top: 0; height: 38px; width: 357px; background: url(../i/reserve_your_space.png) 0 0 no-repeat; text-indent: -10000px;} #reserveSpace a {position: absolute; right: 37px; top: 5px; height: 20px; width: 113px;} #reserveSpace a.go {position: absolute; right: 0; top: 0; height: 34px; width: 34px;} #navMain, #navAccount {position: absolute; top: 52px; right: 9px; font-size: 1.2em;} #navAccount {top: 22px; color: #004A3D;} #navMain a, #navAccount a {padding: 0 6px;} #navAccount a.logout {color: #900;} #contentArea {overflow: hidden; width: 680px; height:100%; margin: 0 15px 20px; padding: 20px 25px 0; border:0px solid #FF0033; background: url(../i/bg_content_area.png) 0 0 no-repeat;} #contentArea h2.header {overflow: hidden; height: 30px; padding: 0 0 5px; text-indent: -10000px;} #contentArea #title-createYourAccount {height: 28px; width: 230px; padding: 0 0 7px; background: url(../i/create_your_account.png) 0 0 no-repeat;} #contentArea #title-ourLocations {height: 28px; width: 230px; padding: 0 0 7px; background: url(../i/our_locations.png) 0 0 no-repeat;} #contentArea #title-aboutUs {height: 28px; width: 230px; padding: 0 0 7px; background: url(../i/about_us.png) 0 0 no-repeat;} #contentArea #title-reqInfoChange {width: 318px; background: url(../i/request_info_change.png) 0 0 no-repeat;} #contentArea #title-contactSiteManager {width: 245px; background: url(../i/contact_site_manager.png) 0 0 no-repeat;} #contentArea #title-changePassword {width: 201px; background: url(../i/change_password.png) 0 0 no-repeat;} #contentArea #title-makePayment {width: 189px; background: url(../i/make_a_payment.png) 0 0 no-repeat;} #contentArea #title-billing {width: 73px; background: url(../i/billing.png) 0 0 no-repeat;} #contentArea #title-reserveYourSpace {height: 48px; width: 225px; padding: 0 0 18px; background: url(../i/reserve_your_space_easy.png) 0 0 no-repeat;} #contentArea #title-manageUnits {width: 155px; background: url(../i/manage_units.png) 0 0 no-repeat;} #contentArea h3 {margin: 0 0 .8em; font-size: 1.2em; color: #004a3d;} #contentArea h3 em {font-style: normal; font-weight: normal;} #contentArea p.intro {margin: 0 0 1.5em; color: #004a3d; font-size: 1.2em;} #contentArea p.basic {margin: 1.5em 0; font-size: 1.2em;} #contentArea a {text-decoration: underline;} #contentArea a:hover {text-decoration: none;} #contentArea a.action, #contentArea td.action a {color: #900;} #contentArea form.basic {color: #004a3d; padding: 0 0 25px;} #contentArea form#changePassword {padding: 0 0 100px;} #contentArea form.basic p {padding: 0 0 .8em; font-size: 1.2em;} #contentArea form.basic div.field {clear: both; float: left; overflow: hidden; position: relative; padding: 0 15px 5px 0;} #contentArea form.basic div.textarea {width: 100%; padding: 0 0 5px;} #contentArea form.basic label {display: block; font-size: 1.2em; padding: 0 0 8px;} #contentArea form.basic div.field label {display: inline; float: left; width: 115px; padding: 3px 6px 0 0; text-align: right;} #contentArea form.basic div.field label strong.req {position: absolute; right: 0; top: 5px; color: #900;} #contentArea form.basic div.buttons {clear: both; padding: 0 0 0 121px;} #contentArea form.basic div.nopadding {padding: 15px 0 0;} #contentArea form.basic #amountOfMonths {width: 135px; margin: -4px 0 8px 16px;} #contentArea form.basic div.cvv label {width: 96px; padding-right: 25px; background: url(../i/cvv.png) 101px 3px no-repeat;} #contentArea form.basic div.cvv label span {display: none;} #contentArea form.basic div.cvv input {width: 50px;} #contentArea form.basic #cardtype {width: 108px;} #contentArea form.basic #expmonth {width: 45px;} #contentArea form.basic #expyear {width: 60px;} #login, #activate {overflow: hidden; height: 175px; width: 293px; margin: 83px 0 80px 169px; padding: 105px 25px 0; background: #1c5448 url(../i/bg_login.jpg) 0 0 no-repeat; color: #fff; text-align: center;} #login h2, #activate h2 {overflow: hidden; height: 0; text-indent: -10000px;} #login p, #activate p {padding: 0 5px 10px; font-size: 1.2em; font-weight: bold;} #login .field, #activate .field {padding: 0 25px 8px 0; text-align: right;} #login .field label, #activate .field label {padding: 0 6px 0 0; font-size: 1.2em;} #login label.checkbox {font-size: 1.1em;} #login form p {padding: 10px 0 0;} #login a {color: #fff; font-size: .93em; font-weight: normal; text-decoration: underline;} #login a:hover {text-decoration: none;} #activate {height: 205px; background: url(../i/bg_activate.jpg) 0 0 no-repeat;} #activate div.buttons {float: right; width: 162px; padding: 0 25px 0 0; text-align: left;} #spotlight {overflow: hidden; position: relative; height: 281px; width: 730px; margin: 0 15px 15px; background: url(../i/home_intro.jpg) 0 0 no-repeat; text-indent: -10000px;} #spotlight p.info {position: absolute; left: 72px; top: 135px; width: 400px; color: #c6d3d0; font-size: 1.2em; text-indent: 0;} #spotlight-reserveSpace a {position: absolute; left: 68px; top: 172px; height: 40px; width: 225px;} #left {display: inline; float: left; width: 350px; margin-left: -25px;} #left h3, #right h3 {overflow: hidden; height: 26px; margin: 0; text-indent: -10000px;} #title-address {width: 215px; background: url(../i/title_address.png) 0 0 no-repeat;} #title-officeHours {width: 146px; background: url(../i/title_office_hours.png) 0 0 no-repeat;} #title-specials {width: 74px; background: url(../i/title_specials.png) 0 0 no-repeat;} #title-features {width: 74px; background: url(../i/title_features.png) 0 0 no-repeat;} #contentArea .sectionContent {padding: 16px 0 1.5em 10px; background: url(../i/section_shadow.png) 0 0 no-repeat;} #contentArea .addressContent {padding: 16px 0 1.5em 10px; } #right .sectionContent {padding-left: 13px;} #contentArea .sectionContent dl {clear: both; overflow: hidden; font-size: 1.2em;} #contentArea .sectionContent dt {float: left; width: 60px;} #contentArea .sectionContent dd {margin-left: 70px;} #contentArea .sectionContent p {font-size: 1.2em;} #contentArea .sectionContent li {list-style-position: inside; color: #004a3d; font-size: 1.2em;} #contentArea .sectionContent li span {color: #333;} #contentArea .sectionContent table {font-size: 1.2em;} #contentArea .sectionContent th, #contentArea .sectionContent td {padding: 0 20px 0 0; font-weight: normal; text-align: left;} #left iframe {border: 1px solid #c0c0c0; margin: 0 0 0 10px;} #right {float: left; width: 350px;} table.basic {border-collapse: collapse; font-size: 1.1em; width: 100%; margin: 0 0 2em;} table.manageUnits {margin: 0 0 5px;} table.basic thead tr {border-bottom: 1px solid #fff; background: #004a3d; color: #fff; font-weight: bold; text-align: left;} table.basic tbody th {text-align: left; font-weight: normal;} table.basic th, table.basic td {padding: 6px 8px;} table.basic tr.odd {background: #dcdddf;} table.basic #units {width: 120px;} table.basic #dueDate {width: 300px;} table.basic td.action {width: 160px;} table.basic td.manageActions {width: 300px} table.basic th.unitInfo {width: 260px;} table.basic th.manageActions {text-align: right;} table.basic a.print {float: right; color: #fff; font-weight: normal; padding: 0 0 0 18px; background: url(../i/icon_print.png) 0 1px no-repeat;} ol.striped {list-style-type: none; font-size: 1.1em;} ol.striped li {padding: 5px 8px;} ol.striped li.odd {background: #dcdddf;} h3#step-chooseLocation {overflow: hidden; height: 36px; width: 164px; margin: 0 0 8px; background: url(../i/choose_a_location.png) 0 0 no-repeat; text-indent: -10000px;} h3#step-selectUnit {overflow: hidden; height: 36px; width: 128px; margin: 0 0 8px; background: url(../i/select_a_unit.png) 0 0 no-repeat; text-indent: -10000px;} h3#step-makeReservation {overflow: hidden; height: 36px; width: 161px; margin: 0 0 8px; background: url(../i/make_reservation.png) 0 0 no-repeat; text-indent: -10000px;} #reserveYourSpace-steps {padding: 0 0 20px; color: #004a3d;} #reserveYourSpace-steps h3 a {display: block; height: 100%; width: 100%;} #reserveYourSpace-steps h3.selected, #addUnits h3.selected {background-position: 0 -36px;} #reserveYourSpace-steps ul.location, #addUnits ul.location {list-style-type: none; margin: 0 0 20px 41px; font-size: 1.2em;} #reserveYourSpace-steps ul.location li {margin: 0 0 .3em;} #reserveYourSpace-steps ul.location a {text-decoration: none;} #reserveYourSpace-steps ul.location a:hover {text-decoration: underline;} #reserveYourSpace-steps select {margin: 0 0 15px 41px;} #reserveYourSpace-steps table {width: 640px; margin: 0 0 15px 41px;} #reserveYourSpace-steps td.action {width: 90px; text-align: right;} #reserveYourSpace-steps p {margin: 0 0 10px 41px; font-size: 1.2em;} #addUnits {color: #004a3d;} #addUnits-location {float: left; width: 180px;} #addUnits-selectUnit {float: left; width: 210px;} #addUnits-makeReservation {float: left; width: 290px; padding: 0 0 50px;} #addUnits-selectUnit table {margin-left: 33px; width: 170px;} #addUnits-makeReservation form {margin-left: 41px; font-size: 1.2em;} #addUnits-makeReservation ul {margin: 0 0 12px;} #addUnits-makeReservation select {width: 95%; margin: 0 0 3px; font-size: 1em;} #addUnits-makeReservation .field {margin: 0 0 12px;} #addUnits-makeReservation input {font-size: .93em;} #promo {margin: 0 0 -11px; background: #004a3d url(../i/promo_mid_bg.png) 0 0 repeat-y;} #promoWrapper {padding: 15px 0 0; background: url(../i/promo_top_bg.png) 0 0 no-repeat;} #promoContent {overflow: hidden; padding: 14px 15px 22px; background: url(../i/promo_bottom_bg.png) 0 100% no-repeat; color: #bfd2ce;} #monthFreeToJoin {float: left; position: relative; width: 175px; padding: 0 10px 25px 12px;} #monthFreeToJoin h3 {height: 48px; width: 166px; background: url(../i/month_free_title.png) 0 0 no-repeat; text-indent: -10000px;} #monthFreeToJoin p {padding: 3px 5px 0 2px; font-size: 1.1em;} #monthFreeToJoin a.go {display: block; position: absolute; bottom: 3px; right: 10px; height: 37px; width: 37px; background: url(../i/month_free_go.png) 0 0 no-repeat; text-indent: -10000px;} #contactUs {float: right; width: 175px; padding: 0 10px 0 12px;} #contactUs h3 {height: 26px; width: 114px; margin: 1px 0 3px; background: url(../i/promo_contact_title.png) 0 0 no-repeat; text-indent: -10000px;} #contactUs p {margin: 0 0 1em; font-size: 1.2em;} #contactUs ul {color: #ffb71c;} #contactUs ul * {color: #bfd2ce;} #contactUs a {color: #bfd2ce;} #features {float: left; width: 284px; padding: 0 25px 0 27px; background: url(../i/promo_homefeatures_bg.png) 134px 36px no-repeat;} /*#features {float: left; width: 284px; padding: 0 25px 0 27px; background: url(../i/promo_features_bg.png) 164px 32px no-repeat;}*/ #features h3 {height: 30px; width: 203px; margin: 1px 0 3px; background: url(../i/promo_features_title.png) 0 0 no-repeat; text-indent: -10000px;} #features li {margin: 0 0 0 20px; color: #ffb71c; font-size: 1.2em;} #features li strong {color: #bfd2ce; font-weight: normal;} #featureshome {float: left; width: 284px; padding: 0 25px 0 27px; background: url(../i/promo_homefeatures_bg.png) 134px 36px no-repeat;} #featureshome h3 {height: 30px; width: 203px; margin: 1px 0 3px; background: url(../i/promo_features_title.png) 0 0 no-repeat; text-indent: -10000px;} #featureshome li {margin: 0 0 0 20px; color: #ffb71c; font-size: 1.2em;} #featureshome li strong {color: #bfd2ce; font-weight: normal;} #footer {position: relative; z-index: 11; top: 11px; padding: 12px 15px; background: #f8f9f9; font-size: 1.2em;} #navFooter {margin: 0 0 0 -6px; color: #004a3d;} #navFooter a {padding: 0 6px;} #footer #centershift {display: block; position: absolute; top: 12px; right: 15px; background: url(../i/);} .popup {position: absolute; left: 200px; top: 200px; width: 271px;} .popupTop {overflow: hidden; height: 9px; width: 100%; background: url(../i/popup-top.png) 0 0 no-repeat;} .popupContent {width: 240px; padding: 0 20px 0 11px; background: url(../i/popup-mid.png) 0 0 repeat-y;} .popupFooter {overflow: hidden; height: 13px; width :100%; background: url(../i/popup-bottom.png) 0 0 no-repeat;} .hidden {position: static; display: none;} a.popupClose {display: block; float: right; overflow: hidden; height: 12px; width: 12px; margin-top: -3px; background: url(../i/popup-close.gif) 3px 3px no-repeat; cursor: pointer;} .popupContent h3 {font-size: 1.2em;} .popupContent p {padding: 0 0 8px; font-size: 1.1em;} .popupContent select {margin: 0 3px 8px 0;} .popupContent select.month, .popupContent select.day {width: 50px;} .popupContent select.year {width: 60px;} .popupContent .buttons {margin: 8px 0;} .popupContent dl.listing {clear: both; margin: 0 0 3px; font-size: 1.1em;} .popupContent dl.listing dt {display: inline; float: left; width: 120px; padding-right: 10px; font-weight: bold; text-align: right;} .popupContent a.button {border: 1px solid #7ca29b; padding: 3px 4px 2px; background: #004a3d; color: #fff; cursor: pointer; font-size: 1em; text-transform: uppercase;} /* NEW */ .location-single{width:320px; height:100%; padding-left:30px; border:0px solid #CCCCCC; float:left; color: #333; font: normal 12px/1.4 Arial, Helvetica, lucida, sans-serif;} .subheading{ Arial, Helvetica, lucida, sans-serif; color:#00715d; font-size:14px; font-weight:bold; } .main-text{ Arial, Helvetica, lucida, sans-serif; color:#333333; font-size:12px; } /* MAIN FACILITY IMAGE */ #contentArea .facility-layton {overflow: hidden; position: relative; height: 281px; width: 730px; margin: -20px -25px 20px; background: url(../i/facility_layton.jpg) 0 0 no-repeat; text-indent: -10000px;} #contentArea .facility p.info {position: absolute; left: 25px; top: 60px; width: 430px; font-size: 1.2em; line-height: 1.3; text-indent: 0;} #contentArea #facility-reserveSpace a {position: absolute; left: 18px; top: 124px; height: 40px; width: 225px; text-indent: -10000px;} #contentArea .facility {overflow: hidden; position: relative; height: 281px; width: 730px; margin: -20px -25px 20px; background: url(../i/facility_north_ogden.jpg) 0 0 no-repeat; text-indent: -10000px;} #contentArea .facility p.info {position: absolute; left: 25px; top: 60px; width: 430px; font-size: 1.2em; line-height: 1.3; text-indent: 0;} #contentArea #facility-reserveSpace a {position: absolute; left: 18px; top: 124px; height: 40px; width: 225px; text-indent: -10000px;} #contentArea .facility-ogden {overflow: hidden; position: relative; height: 281px; width: 730px; margin: -20px -25px 20px; background: url(../i/facility_ogden.jpg) 0 0 no-repeat; text-indent: -10000px;} #contentArea .facility p.info {position: absolute; left: 25px; top: 60px; width: 430px; font-size: 1.2em; line-height: 1.3; text-indent: 0;} #contentArea #facility-reserveSpace a {position: absolute; left: 18px; top: 124px; height: 40px; width: 225px; text-indent: -10000px;} #contentArea .facility-bountiful {overflow: hidden; position: relative; height: 281px; width: 730px; margin: -20px -25px 20px; background: url(../i/facility_bountiful.jpg) 0 0 no-repeat; text-indent: -10000px;} #contentArea .facility p.info {position: absolute; left: 25px; top: 60px; width: 430px; font-size: 1.2em; line-height: 1.3; text-indent: 0;} #contentArea #facility-reserveSpace a {position: absolute; left: 18px; top: 124px; height: 40px; width: 225px; text-indent: -10000px;} #contentArea .facility-clinton {overflow: hidden; position: relative; height: 281px; width: 730px; margin: -20px -25px 20px; background: url(../i/facility_clinton.jpg) 0 0 no-repeat; text-indent: -10000px;} #contentArea .facility p.info {position: absolute; left: 25px; top: 60px; width: 430px; font-size: 1.2em; line-height: 1.3; text-indent: 0;} #contentArea #facility-reserveSpace a {position: absolute; left: 18px; top: 124px; height: 40px; width: 225px; text-indent: -10000px;} #contentArea .facility-clearfield {overflow: hidden; position: relative; height: 281px; width: 730px; margin: -20px -25px 20px; background: url(../i/facility_clearfield.jpg) 0 0 no-repeat; text-indent: -10000px;} #contentArea .facility p.info {position: absolute; left: 25px; top: 60px; width: 430px; font-size: 1.2em; line-height: 1.3; text-indent: 0;} #contentArea #facility-reserveSpace a {position: absolute; left: 18px; top: 124px; height: 40px; width: 225px; text-indent: -10000px;} #contentArea .facility-aboutus {overflow: hidden; position: relative; height: 330px; width:730px; margin: -20px -25px 0px; background: url(../i/aboutus_intro.jpg) 0 0 no-repeat;} #contentArea .facility p.info {position: absolute; left: 25px; top: 60px; width: 430px; font-size: 1.2em; line-height: 1.3; text-indent: 0;} #contentArea #facility-reserveSpace a {position: absolute; left: 18px; top: 124px; height: 40px; width: 225px; text-indent: -10000px;} #contentArea .facility-features {overflow: hidden; position: relative; height: 330px; width:730px; margin: -20px -25px 0px; background: url(../i/features_intro.jpg) 0 0 no-repeat;} #contentArea .facility p.info {position: absolute; left: 25px; top: 60px; width: 430px; font-size: 1.2em; line-height: 1.3; text-indent: 0;} #contentArea #facility-reserveSpace a {position: absolute; left: 18px; top: 124px; height: 40px; width: 225px; text-indent: -10000px;} #contentArea .facility-contactus {overflow: hidden; position: relative; height: 330px; width:730px; margin: -20px -25px 0px; background: url(../i/contactus_intro.jpg) 0 0 no-repeat;} #contentArea .facility p.info {position: absolute; left: 25px; top: 60px; width: 430px; font-size: 1.2em; line-height: 1.3; text-indent: 0;} #contentArea #facility-reserveSpace a {position: absolute; left: 18px; top: 124px; height: 40px; width: 225px; text-indent: -10000px;} ul.custom { margin-top: 0px; margin-bottom: 0px; margin-left: 15px; padding:5px; line-height: 90%; list-style-position: outside; } li { margin: 0px; padding: 0px; padding-bottom: 4px; line-height: 16px; } #contentArea #title-features {height: 28px; width: 230px; padding: 0 0 7px; background: url(../i/features.png) 0 0 no-repeat;} #contentArea #title-contactus {height: 28px; width: 230px; padding: 0 0 7px; background: url(../i/contactus.png) 0 0 no-repeat;} #contentArea #title-reserveaspace {height: 28px; width: 230px; padding: 0 0 7px; background: url(../i/reserveaspace.png) 0 0 no-repeat;} #contentArea #title-sitemap {height: 28px; width: 230px; padding: 0 0 7px; background: url(../i/sitemap.png) 0 0 no-repeat;} .borderit img{ border: 1px solid #ffffff; } .borderit:hover img{ border: 1px solid #0ac7e4; } .borderit:hover{ color: navy; /* irrelevant definition to overcome IE bug */ }