/* === Design/CSS/HTML by RossInteractive.com === */

header, nav, section, article, dialog, aside, footer { display:block; }

body { color: #565656; font: .8em/1.4 Arial, Helvetica, sans-serif; background: #EEE; }
#wrap { width: 944px; margin: 0 auto; background: #FFF url(../img/bg-wrap.gif) repeat-y 50% 0; }
#colWrap { width: 894px; margin: 0 25px; background: url(../img/bg-cols.gif) repeat-y; }


/*-------------------------------------------------
=TEXT / STYLES
-------------------------------------------------*/
@font-face { font-family: DIN; src: url('../fonts/DIN.ttf'); }
a { color: #e65e25; text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: .1em 0 1em; }
small { font-size: .8em; }
ol { margin-left: 22px; padding-left: 1px; }
#content ul { margin-left: 14px; }
ol li { margin-bottom: 1em; }
#content ul li { list-style: circle; margin: 0 0 .5em .1em; } 
hr { display: none; }
blockquote { padding: 1em; background: #ffe9cd; margin: 2em 0 .75em; }
blockquote p { margin: 0; }
cite { padding-left: 1em; }

h1, h2, h3, h4, h5, h6 { color: #4c9b1b; font-weight: normal; line-height: 1.2; margin: .75em 0 .1em; font-family: DIN, Arial, Helvetica, sans-serif; }
h1 { font-size: 1.75em; padding-bottom: .4em; border-bottom: 3px solid #EEE; margin: 1em 0 .5em; }
h2 { font-size: 1.4em; padding-bottom: .4em; border-bottom: 3px solid #EEE; margin: 2em 0 .4em; }
h3 { font-size: 1.2em; font-weight: bold; margin: 2.5em 0 .6em; }
#content h3 { margin: 1.75em 0 .1em; }
h4 { font-size: 1em; font-weight: bold; }
h5 { font-size: .9em; }


/*-------------------------------------------------
=HEADER
-------------------------------------------------*/
header { background: #FFF; width: 874px; height: 94px; padding: 10px 0 0 20px; margin: 0 25px; position: relative; }
header img { margin-top: 8px; }
header h3 { display: block; text-indent: -9999px; width: 182px; height: 30px; position: absolute; right: 0; bottom: 3px; background: url(../img/tagline.gif) no-repeat; }
header small { text-align: right; position: absolute; right: 0; font-size: 95%; }
header a { color: #444; }
header a.contact { padding-left: 14px; background: url(../img/icn-star.gif) no-repeat 0 50%; }

/* =Masthead */
section#masthead { width: 894px; height: 176px; margin: 0 25px; }
section#masthead img { float: left; }

/* =Navigation */
nav ul { width: 894px; height: 38px; background: url(../img/nav.gif) no-repeat; margin: 0 25px 5px; padding: 0; list-style: none; position: relative; }
nav ul li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
nav ul li, nav ul li a { height: 38px; display: block; text-indent: -9999px; overflow: hidden; }

#nav1 { left: 0px; width: 178px; }
#nav2 { left: 178px; width: 118px; }
#nav3 { left: 296px; width: 118px; }
#nav4 { left: 414px; width: 85px; }
#nav5 { left: 499px; width: 112px; }
#nav6 { left: 611px; width: 142px; }
#nav7 { left: 753px; width: 141px; }

#nav1 a:hover, #b-experience #nav1 a {
    background: transparent url(../img/nav.gif)
	0px -38px no-repeat; }
#nav2 a:hover, #b-guarantee #nav2 a {
    background: transparent url(../img/nav.gif)
	-178px -38px no-repeat; }
#nav3 a:hover, #b-environmental #nav3 a {
    background: transparent url(../img/nav.gif)
	-296px -38px no-repeat; }
#nav4 a:hover, #b-about #nav4 a {
    background: transparent url(../img/nav.gif)
	-414px -38px no-repeat; }
#nav5 a:hover, #b-testimonials #nav5 a {
    background: transparent url(../img/nav.gif)
	-499px -38px no-repeat; }
#nav6 a:hover, #b-products #nav6 a {
    background: transparent url(../img/nav.gif)
	-611px -38px no-repeat; }
#nav7 a:hover, #b-demo #nav7 a {
    background: transparent url(../img/nav.gif)
	-753px -38px no-repeat; }


/*-------------------------------------------------
=CONTENT
-------------------------------------------------*/
section#content { width: 550px; float: left; display: inline; margin: 20px 0 20px 20px; }
section#content h1:first-child { margin-top: .25em; }

div.stepIn { margin: .75em 0; }
div.stepIn dl { width: 170px; float: left; display: inline; margin: 10px 20px 10px 0; }
div.stepIn dl.lastDL { margin-right: 0; }
div.stepIn a img { padding: 3px; background: #e65e25; }
div.stepIn dd { margin-top: .25em; }

table { width: 550px; margin: 0 0 2em; font-size: 90%; clear: both; }
table th { width: 230px; text-align: left; padding: 5px 10px; background: #e8e8e8; color: #333; }
table td { width: 230px; padding: 5px 10px; border-bottom: 1px solid #EEE; }
tr:nth-child(even) { background: #F9F9F9; }
table caption { font-size: 110%; font-weight: bold; color: #FFF; background: #4c9b1b; width: 550px; padding: .4em 0; margin-top: 1em; }
table tfoot { color: #1d7fcf; }
table tfoot td { border: none; }

table.linkGroup { width: 550px; font-size: 90%; margin-bottom: -1em; }
table.linkGroup.genre { margin-bottom: .5em; }
table.linkGroup td { width: 160px; padding: .25em; border: none; }
table.linkGroup a { padding-left: 7px; background: url(../img/arrow-sm.gif) no-repeat 0 .35em; }
table.linkGroup tr:nth-child(even) { background: #FFF; }

/* =Contact */
form { margin: 1em 0; padding-top: 2em; width: 550px; border-top: 1px solid #EEE; clear: both; }
form input { vertical-align: middle; }
form input.txt { border: 2px solid #DDD; font-size: 100%; padding: .25em; width: 400px; margin-right: 3px; }

div.col { width: 250px; float: left; display: inline; margin: 0 25px 10px 0; }
#content div.col h3 { margin-top: 1em; font-size: 110%; }


/*-------------------------------------------------
=SIDEBAR
-------------------------------------------------*/
#sidebar { font-size: 90%; width: 244px; margin: 0 0 0 40px; padding: 0 20px 40px; float: left; display: inline; }
#sidebar ul { float: left; width: 90px; margin-right: 10px; }
#sidebar ul.last-child { width: 130px; margin-right: 0; }
#sidebar ul li { margin-bottom: .3em; }
#sidebar ul li a { padding-left: 7px; background: url(../img/arrow-sm.gif) no-repeat 0 .35em; }


/*-------------------------------------------------
=FOOTER
-------------------------------------------------*/
footer { width: 854px; padding: 35px 45px; margin: 0 auto; background: url(../img/bg-cap.gif) no-repeat; }
footer a { color: #565656; text-decoration: underline; }
footer small { width: 570px; display: block; float: left; font-size: 85%; line-height: 1.6; }
footer #logos { width: 243px; float: right; margin-top: 5px; }


/*-------------------------------------------------
=EXTRAS
-------------------------------------------------*/
p#skipNav { position: absolute; left: -9999px; font-size: small; z-index: 5555; }
p#skipNav a:focus { display: block; position: absolute; top: 20px; left: 10000px; background: #FFF; border: solid 1px black; padding: 10px; width: 10em; }


/* === Design/CSS/HTML by RossInteractive.com === */