body { color: white; font-family: arial, helvetica, sans-serif; font-size: 1em; background-color: white; behavior: url(includes/csshover.htc); } * {margin:0; padding:0;} ul { margin: 0; padding: 0; } li { margin: 0; padding: 0; } a:link { color: black; text-decoration: none; } a:visited { color: black; text-decoration: none; } a:hover { color: black; text-decoration: none; } a:active { color: black; text-decoration: none; } #wrapper { text-align: center; position: relative; width: 699px; margin: auto; } #header { width: 696px; height: 153px; margin-top: 20px; padding: 0; } #header h1 { color: #034ea2; font-size: 1em; margin: 0; padding: 2px; } #header p { color: black; font-size: 0.75em; margin-top: 10px; margin-right: 20px; margin-left: 20px; } #headnav { font-size: 0.8em; text-align: right; position: absolute; top: 10px; left: 445px; } #navcolumn { font-size: 1em; width: 169px; float: left; min-height: 494px; } /* Position Hack for IE Win \*/ /* End of Hack */ #navcolumn ul { } #navcolumn li { font-size: 1em; line-height: 1.2em; padding-bottom: 5px; list-style-type: none; } #navcolumn a { display: block; padding: 3px 6px; color: black; font-size: 1em; text-decoration: none; text-align: left; } #navcolumn img { float: left; margin-left: -2px; } #navcolumn a:hover, #navbar a:active, #navbar a:focus { color: silver; font-size: 1em; text-align: left; padding: 3px 6px; } #navcontactinfo { color: black; font-size: 0.9em; text-align: left; vertical-align: bottom; position: relative; margin-top: 100px; padding: 3px 6px; } /* Position Hack for IE Win \*/ /* End of Hack */ #maincontent { background-image: url(../images-pres/welcome_body.jpg); background-repeat: no-repeat; background-position: left top; text-align: left; position: relative; width: 528px; height: 495px; float: left; min-height: 495px; border-left: 1px solid white; border-bottom: 1px solid white; border-right: 1px solid white; border-top-width: 0; display: inline; } #maincontent h1 { color: black; font-size: 1.5em; text-align: left; margin: 10px 20px 20px; } #maincontent p { color: black; font-size: 1em; margin: 10px 20px 20px; } #maincontent ul { font-size: 0.95em; text-align: left; position: relative; top: 20px; left: 125px; width: 265px; height: 188px; margin: 0; padding: 0; list-style-position: outside; } #maincontent ul li { margin-bottom: 15px; } /* List Hack for IE Win \*/ /* End of Hack */ #mainboxtext { text-align: left; position: relative; top: 2px; width: 525px; float: left; min-height: 497px; border-left: 1px solid white; border-bottom: 0 solid white; border-right: 0 solid white; border-top-width: 0; display: inline; } #mainboxtext h1 { font-size: 1.5em; font-weight: bold; text-align: left; position: relative; } #mainboxtext h2 { font-size: 1em; font-weight: bold; text-align: left; margin-left: 20px; position: relative; margin-top: -16px; } #mainboxtext p { font-size: 0.9em; line-height: 1.6em; text-align: left; position: relative; } /* List Hack for IE Win \*/ * html div#mainboxtext { height: expression( this.scrollHeight < 494 ? "495px" : "auto" ); /* sets min-height value for all standards-compliant browsers */} /* End of Hack */ #maincontent1 { background-image: url(../images-pres/bg_tile.gif); background-repeat: repeat-y; background-position: left 0; text-align: left; position: relative; width: 696px; border-left: 1px solid white; border-bottom: 1px solid white; border-right: 1px solid white; border-top-width: 0; } /* Position Hack for IE Win \*/ * html div#maincontent1 { height: expression( this.scrollHeight < 494 ? "495px" : "auto" ); /* sets min-height value for all standards-compliant browsers */} /* End of Hack */ #maincontent1 h1 { color: black; font-size: 1.5em; text-align: left; margin: 10px 20px 20px; } #maincontent1 p { color: black; font-size: 0.9em; margin: 10px 20px 20px; } /* List Hack for IE Win \*/ /* End of Hack */ #services { text-align: left; width: 510px; float: left; } #services h1 { font-size: 1em; text-align: left; margin-bottom: 15px; } #services p { font-size: 0.9em; line-height: 1.6em; margin-bottom: 20px; } #services ul { font-size: 0.9em; width: 350px; margin-bottom: 30px; margin-left: 20px; } #services ul li { margin-bottom: 8px; } #beforeafter { text-align: center; position: relative; width: 145px; float: left; margin-left: 5px; } #beforeafter h1 { font-size: 1em; text-align: center; margin-top: 10px; margin-right: 0; margin-left: 0; padding: 0; } #beforeafter h2 { font-size: 0.9em; text-align: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid silver; } #beforeafter p { font-size: 0.9em; text-align: center; margin: 0; padding: 0; } #beforeafter img { margin: 2px; border: solid 1px black; } /* List Hack for IE Win \*/ /* End of Hack */ #beforeafter_bottom { text-align: center; position: relative; width: 520px; clear: left; margin-left: 169px; border-left: 1px solid white; } #beforeafter_bottom h1 { font-size: 1em; text-align: center; margin-top: 10px; margin-right: 0; margin-left: 0; padding: 0; } #beforeafter_bottom h2 { font-size: 0.9em; text-align: center; margin-top: 10px; margin-right: 10px; margin-left: 10px; padding-top: 10px; border-top: 1px solid silver; } #beforeafter_bottom h3 { font-size: 0.9em; text-align: center; margin-top: 10px; margin-right: 10px; margin-left: 10px; padding-top: 10px; } #beforeafter_bottom p { font-size: 0.9em; text-align: center; margin: 0; padding: 0; } #beforeafter_bottom img { margin: 2px; border: solid 1px black; } #samples { text-align: left; width: 526px; float: left; border-left: 1px solid white; } #samples h1 { font-size: 1em; text-align: left; margin-bottom: 15px; } #samples h4 { font-size: 1em; font-weight: normal; text-align: left; margin-bottom: 15px; margin-left: 20px; } #samples p { font-size: 0.9em; line-height: 1.4em; margin-bottom: 20px; margin-left: 35px; } #samples ul { font-size: 0.9em; margin-bottom: 30px; margin-left: 20px; } #samples ul li { margin-bottom: 8px; } #testimonials { text-align: left; width: 526px; float: left; border-left: 1px solid white; } #testimonials h4 { font-size: 1em; font-weight: normal; text-align: left; margin-top: 20px; margin-left: 115px; } #testimonials p { font-size: 0.9em; line-height: 1.6em; position: relative; width: 490px; margin-top: 20px; margin-right: 10px; margin-bottom: 10px; } #testimonials ul { font-size: 0.9em; position: relative; width: 460px; clear: left; margin-left: 35px; padding-top: 20px; } #testimonials ul li { margin-bottom: 8px; } #testimonials img { } #testimonials hr { color: black; background-color: white; width: 500px; clear: both; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; } #forms { text-align: left; float: left; border-left: 1px solid white; } #forms h1 { font-size: 1em; text-align: left; margin-bottom: 15px; } #forms h4 { font-size: 1em; font-weight: normal; text-align: left; margin-bottom: 5px; margin-left: 20px; } #forms p { font-size: 0.9em; line-height: 1.4em; margin-bottom: 20px; margin-left: 55px; } #forms ul { font-size: 0.9em; margin-bottom: 30px; margin-left: 20px; } #forms ul li { margin-bottom: 8px; } #forms a:hover, #navbar a:active, #navbar a:focus { color: black; font-size: 0.9em; text-align: left; margin-left: 20px; padding: 3px 6px 3px 20px; } #forms a { color: silver; font-size: 0.9em; background-image: url(../images-pres/pdficon_small.gif); background-repeat: no-repeat; background-position: left 0; text-align: left; margin-left: 20px; padding: 3px 6px 3px 20px; } #getacrobat a { color: silver; font-size: 0.9em; text-align: left; float: right; margin-top: 10px; margin-right: 10px; margin-left: 10px; } #links { text-align: left; float: left; border-left: 1px solid white; } #links h1 { font-size: 1em; text-align: left; margin-bottom: 15px; } #links h4 { font-size: 1em; font-weight: normal; text-align: left; margin-bottom: 5px; margin-left: 20px; } #links p { font-size: 0.9em; line-height: 1.4em; margin-bottom: 20px; margin-left: 55px; } #links ul { font-size: 0.9em; margin-bottom: 30px; margin-left: 20px; } #links ul li { margin-bottom: 8px; } #links a:hover, #navbar a:active, #navbar a:focus { color: black; font-size: 0.9em; text-align: left; margin-left: 20px; padding: 3px 6px 3px 20px; } #links a { color: silver; font-size: 0.9em; background-image: none; background-repeat: no-repeat; background-position: left 0; text-align: left; margin-left: 20px; padding: 3px 6px 3px 20px; } .gallery table { float: left; margin: 10px 5px 5px 27px; } .gallery table { border-collapse: collapse; } .gallery table td { padding: 0; } .gallery table caption { font-size: 80%; } .gallery img { border: solid 1px gray; } #footer { background-color: #00349a; width: 696px; height: 30px; clear: left; margin-right: auto; margin-left: auto; padding-top: 10px; } #footer p { color: white; font-size: 0.85em; text-align: center; padding-top: 2px; padding-bottom: 2px; } #footer h1 { color: white; font-size: 0.95em; text-align: center; } #spacerdiv { background-image: url(../images-pres/1pixtrans.gif); background-repeat: no-repeat; width: 20px; height: 2px; border: solid 2px silver; display: inline; } #coupon { } #coupon p { text-align: center; vertical-align: middle; position: relative; top: 180px; margin-right: auto; margin-left: auto; } #coupon img { float: left; margin-top: 8px; margin-left: 8px; } /*NAVIGATION BAR*/ #contacttext { font-size: 0.9em; padding: 9px 0 0 9px; } #thankyou { color: black; font-size: 0.9em; text-align: center; margin-top: 200px; padding: 0; } #contacttable { margin: 0 auto; padding-right: 20px; padding-left: 20px; } #contacttable h1 { font-size: 1em; font-weight: bold; text-align: left; margin: 0; padding: 0; } #contacttable p { font-size: 0.8em; text-decoration: none; text-align: left; } #contacttable img { position: relative; float: left; margin: 2px 10px 2px 2px; border: solid 1px gray; } #contacttable td { text-align: left; padding: 20px; } .fm-optional { display: none; } .cleardiv { clear: both; } /* THE HORIZONTAL MENU STARTS HERE */ div#listmenu { width:100%; /* makes the div full width */ float:left; border-top:1px solid #069; /* draws line on top edge of div */ border-bottom:1px solid #069; /* draws line on bottom edge of div */ font-size:0.8em; /* SET FONT-SIZE HERE */ /* background-color:#CCF; /* colors the div */ text-align: center; position: relative; top: -15px; z-index: 2; /* TEMPORARY - pushes the div away from the top of the browser for clarity in this example*/ } div#listmenu ul { width: 620px; margin: 0 auto; padding: 0;/* indents ul from edge of container - NOTE: diff value for IE in hacks below */ } div#listmenu li { float:left; /* causes the list to align horizontally instead of stack */ position:relative; /* positioning context for the absolutely positioned drop-down */ list-style-type:none; /* removes the bullet off each list item */ border-right:1px solid #069; /* creates dividing lines between the li elements */ } div#listmenu li:first-child { border-left:1px solid #069; /*the first vertial line on the menu */ } div#listmenu li:hover { background-color:#FFF; /*sets the background of the menu items */ } div#listmenu a { display:block; padding:1px 6px; /*creates space each side of menu item's text */ text-decoration:none; /* removes the underlining of the link */ color:black; /* sets the type color */ } div#listmenu a:hover { color:black; } /* the menu ends here */ /* the drop-down starts here */ div#listmenu ul li ul { margin:0; z-index:10; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */ position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */ width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/ border-right:0 none; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */ left:-1px; /*aligns the drop exactly under the menu */ } div#listmenu ul li ul li {padding:0; width:100%; /* makes the list items fill the list container (ul) */ border-left:1px solid #069; /* three sides of each drop-down item */ border-bottom:1px solid #069; border-right:1px solid #069;} div#listmenu ul li ul li a {padding:1px .5em;} div#listmenu ul li ul li:first-child { border-top:1px solid #069; /*the top edge of the dropdown */ } /* make the drop-down display as the menu is rolled over */ div#listmenu ul li ul {display:none;} /* conceals the drop-down when menu not hovered */ div#listmenu ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */ /* pop-out starts here */ body div#listmenu ul li ul li ul { position:absolute; visibility:hidden; /* same effect as display:none in this situation */ top:-1px; left:10em; } div#listmenu ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */ /* second level popouts start here*/ div#listmenu ul li ul li:hover ul li ul {visibility:hidden;} div#listmenu ul li ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */ /* THE HACK ZONE - */ /* hack for IE (all flavors) so the menu has a vertical line on the left */ * html div#listmenu ul { float:left; /* makes the ul wrap the li's */ border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */ margin-left:15px; /* IE doubles the given value above - why? */ } /* add a top line to drops and pops in IE browsers - can't read :first-child */ * html div#listmenu ul li ul { border-top:1px solid #069; border-left:0px; /* stops the drop inheriting the ul border */ } /* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */ * html div#listmenu ul li ul li ul { left:9.85em; voice-family: "\"}\""; voice-family:inherit; left:10em; } /* and the "be nice to Opera" rule */ html>body div#listmenu ul li ul li ul { left:10em; } /* an Opera-only hack to fix a redraw problem by invisibly extending the ul */ /* the first-level drop stays open for 100px below the bottom but at least it works */ /* this can be reduced to as little as 22px if you don't have pop-outs */ /* the pop-out menu stays open for 22px below the bottom but at least it works */ @media all and (min-width: 0px){ body div#listmenu ul li ul {padding-bottom:100px;} body div#listmenu ul li ul li ul {padding-bottom:22px;} ul li ul li ul li ul li:hover {visibility:visible;} /* same effect as display:block in this situation */ } /*end Opera hack */ /* END OF HACK ZONE */ /* the drop-down ends here */ /* END OF LIST-BASED MENU */ /* finally after feeding values to all others, we deal with MAc5 IE */ /* IE5 Mac can't do drop-downs so we need to present the info in a different way*/ /* we present the drop down choices in a row and never show any second-level drops */ /* this stylesheet is read by IE5 Mac only - hack omits 'url' and leave no space between @import and (" */ @import("includes/ie51_menu_hack.css"); /* DROPDOWN MENU SECTION COLORS */ /* START OF THE FORM CSS */ div#formcontainer { text-align: left; position: relative; width:500px; float: left; } div#formcontainer p { color: black; font-size: 0.9em; width: 450px; margin-left: 30px; } div#formcontainer h3 {font-weight:bold; font-size:0.8em;} /* adjust top margin for your context */ div#formcontainer h4 {font-weight:normal; font-size:0.8em;} div#formcontainer form { width: 420px; margin-left: 20px; } /* the top border is visually 1 px thicker because it touches the div.clearfix bordertop */ div#formcontainer div.clearfix {padding:5px 0; vertical-align:top;} /* adds the line above each section and provides vertical spacing */ div#formcontainer form label {width:120px; float:left;font-size:0.9em; color: black; margin:0 10px 15px;} .clearlabel {width:120px; font-size:0.9em; color: black; margin:0 10px;} /* this is the text label on the left of each input */ /*some extra styles for the checkbox and radio button sets*/ div#formcontainer div.buttongroup {float:left; margin:0px; padding:0px;} /* a container for a groups of buttons - suppresses the clearfix div top border on the divs around the radio buttons/checkboxes */ div#formcontainer div.buttongroup div {margin-bottom:5px; font-size:0.8em;} /* wrapper for the INPUT and its text - margin-bottom sets the vertical distance between buttons */ div#formcontainer div.buttongroup input {margin-right:5px;} /* set the distance between button and its label text */ /* postions the submit button by selecting a div with attribute type SUBMIT - IDWIMIE */ div#formcontainer input[type="submit"] {display:block; margin-left:auto; margin-right:10px;} /* END OF THE FORMS CSS*/ /* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */ /* simply add the clearfix class to any containter that must enclose floated elements */ /* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */ .clearfix:after { content: "."; /* the period is placed on the page as the last thing before the div closes */ display: block; /* inline elements don't respond to the clear property */ height: 0; /* ensure the period is not visible */ clear: both; /* make the container clear the period */ visibility: hidden; /* further ensures the period is not visible */ } .clearfix {display: inline-block;} /* a fix for IE Mac */ /* next a fix for the dreaded Guillotine bug in IE6 */ /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* end of "no-extra-markup" clearing method */