/*------------------------------------------------------
RESET
------------------------------------------------------*/
html, body, a, img, h1, h2, h3, h4, h5, h6, ul, li, td, p, dt, dd {border:none; margin: 0; padding: 0; text-decoration: none; list-style:none}
body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #ccc;
	background-image: url(homepageArtwork/background.jpg);
	background-repeat: repeat-y;
	background-position: center center}
	
h1 {font-size: 28px; font-weight: bold}
h2 {font-size: 18px; font-weight: bold; text-align: left; width: 505px; margin:0 0 12px 0; padding-bottom: 4px; border-bottom: 1px solid #aaa}
h3 {font-size: 16px; font-weight: bold}
h4 {font-size: 14px; font-weight: bold}
h5 {font-size: 14px; font-weight: normal}

/*------------------------------------------------------
TABLE OF CONTENTS
1. Containers
2. Navigation

PAGES
3. About Us
4. Accessories
5. Contact Us
6. Coupons
7. Door Openers
8. FAQs
9. Garage Doors
10. Homepage
11. Photo Galleries
12. Safety
13. Services
14. Testimonials
15. Footer
------------------------------------------------------*/

/*------------------------------------------------------
1. CONTAINERS
------------------------------------------------------*/
.greyLine {background-color: #666; height: 1px; margin:4px 0 16px 0; display: block; width: auto}
.contact {font-size: 14px; margin: 4px; width: 14px}
.pageSubheads {font-size: 13px; line-height: 18px; padding: 0 0 18px 0}
.pagetext {font-size: 12px; margin-bottom: 15px; text-align: center; font-weight: bold}
.border{border: 1px solid #ccc}

#mainContainer {margin: 0 auto; width: 820px}
#header {background: #ccc; padding: 20px}
#mainContent {background-color: #eee; float: left; width: 820px}
#banner {background-image: url("homepageArtwork/banner.jpg"); width: 820px; height: 90px}
#content {clear: left; float: left; width: 510px; padding: 40px 20px 40px 50px}
#rightColumn {background-color:#eee; float: right; width: 190px; padding: 40px 15px 0 15px; border-left: 1px solid #ddd}
#footer {clear: both; height: 1%}



/*------------------------------------------------------
2. NAVIGATION
------------------------------------------------------*/
#navContainer {background-color:#039; width:820px; height:28px}
#navContainer ul {background-color:#039; padding-left: 35px; color: #fff; float: left}
#navContainer ul li {display: inline }
#navContainer ul li a {font-size: 12px; padding: 6px 8px; background-color: #039; color: #fff; float: left; border-right: 1px solid #fff}
#navContainer ul li a:hover {background-color: #06F; color: #fff }

.body10 {font-size: 10px; line-height: 12px}
.bold10 {font-size: 10px; font-weight: bold}
.body11 {font-size: 11px; line-height: 13px; line-height: 16px}
.bold11 {font-size: 11px; font-weight: bold}
.body12 {font-size: 12px; line-height: 18px}
.bold12 {font-size: 12px; font-weight: bold}
.bold14 {font-size: 14px; font-weight: bold}
.italic12 {font-size: 12px; font-style: italic}

/*------------------------------------------------------
3. ABOUT US
------------------------------------------------------*/
.aboutUsPhoto {background: #fff url(Artwork/truckPhoto.jpg) no-repeat 0 0; width:508px; height:284px; margin: 0 0 12px 0}
.aboutUsBox {background-color: white; border: 1px solid #ccc; width: 203px; height:165px; padding: 20px 20px 15px 20px; margin: 10px 0 0 0; float:left}
.left {margin-right: 10px}

/*------------------------------------------------------
4. ACCESSORIES
------------------------------------------------------*/
.accessoriesBoxes {background-color: #fff; border: 1px solid #ccc; width:215px; padding: 15px; margin: 0 0 15px 0; float:left}
.accessoriesClear {clear:both}
.accessoriesImage {float:right}
.marginLeft {margin-left: 15px}

/*------------------------------------------------------
5. CONTACT US
------------------------------------------------------*/
label {width: 90px; float: left; text-align: right; margin-right: 15px; display: block}
#contact p {padding: 0 0 12px 0}
#contact p .none {padding: 0}
fieldset {border: 1px solid #000}

/*------------------------------------------------------
6. COUPONS
------------------------------------------------------*/
.couponsTop {padding: 40px 0 120px 0}
.coupons img {margin:0 0 20px 40px}
.couponsTop p {margin: 0 0 10px 40px; font-size:14px}

/*------------------------------------------------------
7. DOOR OPENERS
------------------------------------------------------*/
.openerCompany {font-size: 16px; font-weight: bold; padding: 20px 0 6px 0}
.openerSpace {width:50px; height:40px}

.openerText {font-size: 12px; line-height: 18px; list-style:outside; margin-left: 18px}
.openerHeads {font-size: 12px; font-weight: bold; margin: 0}
.openerNames {font-size: 16px; font-weight: bold; width: 100%; padding: 8px 0; border-bottom: 1px solid #000; margin-bottom: 15px; float: left}
.openerImage {width: 215px; float: right; margin: 0 0 0 20px}
#authorizedDealer {background-color:#ddd; padding: 12px 0 24px 0}

#openerDescription {font-size: 12px}
#openerDescription li {padding:0 0 4px 0}
#openerDescription ul {line-height: 18px; list-style: outside; padding:0 0 12px 0; margin-left: 18px}
#openerDescription p {font-weight: bold; padding:0 0 10px 0}
.genie2 {margin-top: 10px; float: right; clear: right}

#openerBoxes a {border: 1px solid #ccc; width:245px; height:150px; margin-bottom:15px; display:block; float:left}

#lm3575 {background:url("openerArt/liftmaster.gif") no-repeat 0 0; margin-right: 10px}
#lm3575:hover{background-position: 0 -300px}

#lm3585 {background:url("openerArt/liftmaster.gif") no-repeat -245px 0}
#lm3585:hover{background-position: -245px -300px}

#lm3595 {background:url("openerArt/liftmaster.gif") no-repeat 0 -150px; margin-right: 10px}
#lm3595:hover{background-position: 0 -450px}

#lm3800 {background:url("openerArt/liftmaster.gif") no-repeat -245px -150px}
#lm3800:hover{background-position: -245px -450px}

#hormann5500 {background:url("openerArt/hormann.gif") no-repeat 0 0; margin-right: 10px}
#hormann5500:hover{background-position: 0 -150px}

#hormann7500 {background:url("openerArt/hormann.gif") no-repeat -245px 0}
#hormann7500:hover{background-position: -245px -150px}

#genieBox {width: 245px; margin-right: 10px; float: left}
#genie {background:url("openerArt/genie.gif") no-repeat 0 0; margin-right: 10px}
#genie:hover{background-position: 0 -150px}

#allstarBox {width: 245px; float: left}
#allstar {background:url("openerArt/allstar.gif") no-repeat 0 0}
#allstar:hover{background-position: 0 -150px}

/*------------------------------------------------------
8. FAQS
------------------------------------------------------*/
#FAQ {font-size: 12px; text-align: left}
.questions {font-weight: bold; margin-bottom: 4px}
.answers {margin-bottom: 10px}

/*------------------------------------------------------
9. GARAGE DOORS
------------------------------------------------------*/
.doorsLeftColumn, .doorsRightColumn, .doorsCenterColumn img {padding: 0 0 12px 0}
.doorsColumn {width:245px; padding-right:15px; float:left}
.doorsColumn2 {width:245px; float:left}
.doorsColumn .doorsColumn2 img {padding-bottom: 15px}
.doorsLeftColumn {width:auto; float:left}
.doorsRightColumn {width:auto; float:right}
.doorsCenterColumn {margin: 0 auto}
.clearboth {clear:both}

#garageDoors a {width:150px; border-color: #aaa; border-width:1px 1px 0 1px; border-style: solid}
#garageDoors dd {font-size:13px; font-weight:bold; color: #fff; text-align: center; width: 144px; background-color:#666; padding: 4px}
#garageDoors a:hover {background-position: 0 -130px}
#topRow {width: 490px; margin: 0 auto}
#topRow dl {float:left}
#topRow dl.center {margin: 15px 15px}
#topRow dt {width: 150px; display:block; clear:both}
#bottomRow {width: 320px; margin: 0 auto}
#bottomRow dl {float:left}
#bottomRow dl.right {float:right}
#bottomRow dt {width: 150px; display:block; clear:both}

.doors {width:150px; height:150px}
.doorNames {font-size:14px; color:#fff; background-color:#000; padding: 0 4px}
.steel {width:150px; height:130px; background: url(GarageDoorPage/steel.gif) 0 0 no-repeat; display:block}
.steelCH {width:150px; height:130px; background: url(GarageDoorPage/steelCH.gif) 0 0 no-repeat; display:block}
.wood {width:150px; height:130px; background: url(GarageDoorPage/wood.gif) 0 0 no-repeat; display:block}
.woodCH {width:150px; height:130px; background: url(GarageDoorPage/woodCH.gif) 0 0 no-repeat; display:block}
.fiberglass {width:150px; height:130px; background: url(GarageDoorPage/fiberglass.gif) 0 0 no-repeat; display:block}


/*------------------------------------------------------
10. HOMEPAGE
------------------------------------------------------*/
#homepageContent {clear: left; float: left; width: 530px; padding: 30px 0; margin: 0 0 0 40px; display: inline}
.homepagetype {font-size: 12px; text-align: center; margin-bottom: 6px; border: 1px solid #999}
#headline {padding: 0 0 10px 0}
#bottom li {display: inline; list-style: none}
#bottom img {border: 1px solid #ddd; margin: 10px 0 0 0}
#bottom .openers {margin: 0 8px}

#coupon {text-align: center; width: 175px; margin: 0 auto; border: 1px solid #aaa}
#coupon a .off {color: #fff; font-size: 24px; font-weight: bold; line-height: 24px; background-color: #933; display: block; width: 175px; padding: 20px 0}
#coupon a:hover .off  {background-color: #900}
#coupon a .page {font-weight: bold; color: #000; background-color:#ccc; display: block; width: 175px; padding: 6px 0}
#coupon a:hover .page {background-color: #aaa}

.garage {width: 175px; border: 1px solid #999; margin: 10px auto}
.garage a {font-size: 12px; font-weight: bold; text-align: center; width: 177px; display: block; color: #000; background-color:#ccc; display: block; width: 175px; padding: 6px 0}
.garage a:hover {background-color: #aaa}
.awards {margin: 10px 0 0 30px}
.awards2 {margin: 0 0 20px 5px; border: solid 1px #999}

/*------------------------------------------------------
11. PHOTO GALLERIES
------------------------------------------------------*/
.container {width: 520px; margin: 0 auto}
ul.tabs {width: 100%; float: left; height: 24px; border-bottom: 1px solid #999; border-left: 1px solid #999}
ul.tabs li {line-height: 15px; background: #e0e0e0; height: 23px; border: 1px solid #999; border-left: none; margin-bottom: -1px; float: left; position: relative; overflow: hidden}
ul.tabs li a {color: #000; display: block; font-size: 12px; padding: 3px 10px; border: 1px solid #f9f9f9}
ul.tabs li a:hover {background: #ccc}
html ul.tabs li.active, html ul.tabs li.active a:hover  {background: #f9f9f9; border-bottom: 1px solid #f9f9f9}
.tab_container {background: #f9f9f9; width: 100%; border: 1px solid #999; border-top: none; float: left; clear: both}
.tab_content {padding: 20px; font-size: 1.2em}
.tab_content h2 {font-size: 12px; padding-bottom: 10px; border-bottom: 1px solid #ccc}

/*------------------------------------------------------
12. SAFETY
------------------------------------------------------*/
.safetyBox {background-color: #fff; width: 465px; padding: 20px; margin: 0 0 15px 0}
.safetyHeads {font-size: 14px; font-weight: bold;}
.safetyDescriptions {font-size: 12px; padding: 0 0 8px 0}
.safetyWarning {font-size: 12px; color: #930}

/*------------------------------------------------------
13. SERVICES
------------------------------------------------------*/
.servicesBoxLeft {width:245px; background-color:#fff; float:left; margin:0 0 20px 0px}
.servicesBoxRight {width:245px; background-color:#fff; float:left; margin:0 0 20px 15px}
.servicesHeads {color:#fff; font-size: 16px; font-weight: bold; text-align: center; background-color: #666; padding: 4px 0}
.servicesDescription {font-size: 12px; padding:8px 8px 8px 10px; list-style:none}

/*------------------------------------------------------
14. TESTIMONIALS
------------------------------------------------------*/
.testimonialBox {background-color: #fff; width:365px; height:100px; margin: 0 0 20px 0; position: relative}
#googleMap {width:510px; height:300px}
.heads {font-size:14px; padding: 0 0 10px 0}
.google {position:absolute; margin: 10px 0 0 35px}
.merchantcircle {position:absolute; margin: 0 0 0 200px}
.yahoo {position:absolute; margin: 60px 0 0 190px}
.yellowpages {position:absolute; margin:60px 0 0 10px}
.example {background: #fff url(image.gif) no-repeat top left}

.Options {font-size: 14px; font-weight: bold; background-color: #000; text-indent: 10pt; color: #fff}

/*------------------------------------------------------
15. FOOTER
------------------------------------------------------*/
#bottomFooter {font-size: 9px; text-align: center; color: #fff; background-color: #666; border-top: 1px solid #999; clear: both; padding: 10px}
#topFooter {height: 200px; font-size: 11px; line-height: 18px; background-color: #ddd; border-top: 1px solid #ccc; border-bottom: 1px solid #eee; padding: 20px 0 20px 40px}
#truck {width: 300px; display:block; margin: 0 20px 0 0; float: left}
#truck img {border: 1px solid #aaa}
#serving {width: 200px; margin: 0 20px 0 0; display: block; float: left}
#services {width: 220px; display: block; float: left}
.headline {font-size: 16px; font-weight: bold; line-height: 22px; padding: 0 0 6px 0}