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

body, html {background-color:#000000; padding: 0px; margin: 0px; font-size: 12px; font-family:Arial, Helvetica, sans-serif; color:#000000; border: none;}

.clear {clear:both;}

#headercontainer {width: auto; height: 166px; background:url(../images/header-grad.jpg) top left repeat-x #003399; padding: 25px 0px 0px 0px; margin: 0px;}
#header {width: 964px; height: 166px; margin: 0px auto; background:url(../images/pagetop.gif) bottom left no-repeat;}
#logo {width: 129px; height: 64px; background:url(../images/logo.jpg) top left no-repeat; float:left; margin: 0px 0px 0px 15px;}
#strapline {width: 352px; height: 55px; background:url(../images/header-phone.gif) top left no-repeat; float:right; margin: 5px 20px 0px 0px;}

#menu {width: 964px; height: 60px; margin: 29px 0px 0px 10px;}
#menu ul {list-style-type: none; margin: 0px; padding: 0px;}
#menu ul li {float: left; display:inline; margin: 0px 12px 0px 3px;}
#menu ul li b {font-size: 14px;}
#menu ul li a {font-size: 12px; display: block; height: 30px; padding: 15px 0px 15px 10px; width:134px; background:url(../images/button-back.jpg) top left no-repeat; text-decoration:none; color:#FFFFFF;}
#menu ul li a:hover {background:url(../images/button-selected.jpg) top left no-repeat;}
#menu ul li a.selected {background:url(../images/button-selected.jpg) top left no-repeat;}

#menu b {font-size: 12px;}

#pointers {height: 6px; width: auto;}
#pointers .pointer{margin: 0px 12px 0px 3px; float: left; height: 6px; display:block; width:144px;}
#pointers .pointer-selected {margin: 0px 12px 0px 3px; float: left; height: 6px; width:144px; display:block; background:url(../images/button-selected-arrow.gif) 75px 0px no-repeat;}

#contentcontainer {width: auto; height: auto; background: #FFFFFF; padding: 0px; margin: 0px;}
#content { padding: 0px 10px 15px 10px; width: 944px; height: auto; margin: 0px auto;}

#pagecontent {padding: 0px; margin: 0px; width: 656px; height: auto; float:left;}
#pagecontent h1 {margin: 0px; padding: 0px; font-size: 24px; font-style:italic; font-weight:bold; color:#000066;}
#pagecontent h2 {margin: 0px; padding: 0px; font-size: 18px; font-weight:bold; color:#000066;}
#pagecontent h3 {margin: 0px; padding: 0px; font-size: 16px; font-weight:bold; color:#000066;}
#pagecontent a.features {text-decoration: none; margin: 0px 20px 0px 0px; padding : 10px; float: left; display: block; background:url(../images/features-btn.jpg) top left no-repeat #003366; color:#FFFFFF; height: 66px; width:254px;}
#pagecontent a.technical {text-decoration: none; padding : 10px; float: left; display: block; background:url(../images/technical-btn.jpg) top left no-repeat #003366; color:#FFFFFF; height: 66px; width:254px;}
#pagecontent ul.list li {margin: 0px 0px 0px 15px;}

#supportcontent {padding: 0px; margin: 0px; width: auto; height: auto;}
#supportcontent h1 {margin: 0px; padding: 0px; font-size: 24px; font-style:italic; font-weight:bold; color:#000066;}
#supportcontent h2 {margin: 0px; padding: 0px; font-size: 18px; font-weight:bold; color:#000066;}
#supportcontent h3 {margin: 0px; padding: 0px; font-size: 16px; font-weight:bold; color:#000066;}
#supportcontent a.features {text-decoration: none; margin: 0px 20px 0px 0px; padding : 10px; float: left; display: block; background:url(../images/features-btn.jpg) top left no-repeat #003366; color:#FFFFFF; height: 66px; width:254px;}
#supportcontent a.technical {text-decoration: none; padding : 10px; float: left; display: block; background:url(../images/technical-btn.jpg) top left no-repeat #003366; color:#FFFFFF; height: 66px; width:254px;}
#pagesupportcontentcontent ul.list li {margin: 0px 0px 0px 15px;}

#homeimage {width: 656px; height: 239px; background:url(../images/home-image1.jpg) top left no-repeat;}
#homeimagetext p {margin: 0px; padding: 0px;}
#homeimagetext a {text-decoration: none; display: block; margin: 0px 0px 15px 0px; padding: 10px; color: #FFF; width: 636px; height: 42px; background:url(../images/home-imagetextgrad.jpg) top left repeat-x #003399;}
#contact-prompt a {text-decoration: none; display: block; margin: 0px 0px 15px 0px; padding: 10px 80px 10px 10px; color: #FFF; width: 566px; height: 66px; background:url(../images/contact.jpg) top left repeat-x #003399;}

a.contact-prompt {text-decoration: none; display: block; margin: 20px 0px 15px 0px; padding: 10px 80px 10px 10px; color: #FFF; width: 566px; height: 66px; background:url(../images/contact.jpg) top left repeat-x #003399;} 

#measurement-image {width: 656px; height: 300px; background:url(../images/straight-measurements.gif) top left no-repeat;}

#quote {width: 173px; height: 194px; float:left; background:url(../images/quote-box.gif) top left no-repeat;}
#quote p {color: #FFFFFF; padding: 35px 30px 0px 30px; font-size:12px; font-weight:bold; line-height: 16px;}

#welcome {width: 475px; height: auto; float:right;}

#prompt {height: 54px; width: 475px; display:block; background:url(../images/home-prompt.jpg) top left no-repeat; float:right;}
#prompt p {color:#FFFFFF; padding: 0px 0px 0px 10px;}

#contactus {padding: 15px; margin: 0px; width: 240px; height: auto; float:right; background-color: #427ee3; color:#FFFFFF;}
#contactus h2 {padding: 0px 0px 10px 0px; margin: 0px;}
#contactus input {width: 168px; height: 13px; border: 1px solid #303030; background: #fefefe; padding: 4px;}
#contactus textarea {width: 168px; border: 1px solid #303030;; background: #fefefe; padding: 2px;}
#contactus .btn {margin: 15px 0px 0px 0px; width: 241px; height: 37px; border: 1px solid #97b8f0; display:block; background:url(../images/send-button.jpg) top left no-repeat #003366; color:#FFFFFF; font-weight:bold; text-transform:uppercase;}

#supportnavigation {padding: 15px; margin: 0px; width: 240px; height: auto; float:right; background-color: #427ee3; color:#FFFFFF;}
#supportnavigation h2 {padding: 0px 0px 0px 0px; margin: 0px;}
#supportnavigation ul {list-style-type: none; margin: 0px; padding: 0px;}
#supportnavigation ul li {margin: 0px; padding: 0px;}
#supportnavigation ul li a {margin: 0px 0px 2px 0px; display: block; width: 230px; height: 15px; background:#6699ff; padding: 5px; color:#FFF; text-decoration:none;}
#supportnavigation ul li a:hover {margin: 0px 0px 2px 0px; display: block; width: 230px; height: 15px; background:#000066; padding: 5px; color:#FFF; text-decoration:none;}
#supportnavigation ul li a.selected {margin: 0px 0px 2px 0px; display: block; width: 230px; height: 15px; background:#FFFFFF; padding: 5px; color:#0066CC; text-decoration:none;}

#supportnavigation ul li a.pdf {margin: 0px 0px 2px 0px; display: block; width: 207px; height: 15px; background: url(../images/pdf-sm.gif) 5px no-repeat #6699ff; padding: 5px 5px 5px 27px; color:#FFF; text-decoration:none;}
#supportnavigation ul li a.pdf:hover {margin: 0px 0px 2px 0px; display: block; width: 207px; height: 15px; background: url(../images/pdf-sm.gif) 5px no-repeat #000066; padding: 5px 5px 5px 27px; color:#FFF; text-decoration:none;}

div.intro {height: auto; width: auto; padding: 10px 10px 10px 60px; background: url(../images/warning.gif) 10px no-repeat #CCC;}
div.warning {height: auto; margin: 5px 0px 5px 0px; width: auto; padding: 10px 10px 10px 60px; background: url(../images/warning.gif) 10px no-repeat #CCC;}
div.example {height: auto; margin: 5px 0px 5px 0px;  width: auto; padding: 10px; background: #666; color:#FFFFFF;}
div.note {height: auto; margin: 5px 0px 5px 0px;  width: auto; padding: 1px 10px; background: #666; color:#FFFFFF;}
div.tools {height: auto; margin: 5px 0px 5px 0px;  width: auto; padding: 1px 10px; background: #666; color:#FFFFFF;}

div.install-image {border: 5px solid #dadada; margin: 0px 20px 0px 0px; padding: 20px; display: block; width: 150px; height:150px; float: left;}
#step-title {padding:5px; height:auto; width: auto; background-color: #427ee3; margin: 0px 0px 10px 0px;  color:#FFFFFF;}
#step-title h2{color: #FFF; font-size:16px; font-weight:bold;}
div.step-content {padding:0px 0px 0px 0px; height:auto; float: left; width: 380px;}
div.step-content-small {padding:0px 0px 0px 0px; height:auto; float: left; width: 180px;/* border: 1px solid red;*/}
div.step-content-medium {padding:0px 0px 0px 0px; height:auto; float: left; width: 260px;/* border: 1px solid red;*/}
 
table#contact td {border: none; padding: 0px 0px 4px 0px; margin: 0px; vertical-align:top;}
table#specifications td {border: none; padding: 3px; margin: 0px; vertical-align:top;}
table#specifications tr.dark {border: none; padding: 3px; margin: 0px; vertical-align:top; background:#CCC;}
table#specifications td.letter {width: 10px; border: none; padding: 3px; margin: 0px; vertical-align:top; background:#427EE3; color:#FFFFFF;}

#footercontainer {width: auto; height: 173px; background:url(../images/footer-grad.jpg) top left repeat-x #000;  padding: 0px; margin: 0px;}
#footer {width: 944px; height: 173px; margin: 0px auto; padding: 10px;}
#smallprint {color:#FFFFFF; font-size:10px;}
#smallprint p {color:#FFFFFF; font-size:10px; margin: 0px; padding: 0px;}
#smallprint b {color:#FFFFFF; font-size:12px; font-weight: bold; margin: 0px; padding: 0px;}

span.checkbox {width: 19px; height: 25px; padding: 0 5px 0 0; background: url(checkbox.gif) no-repeat; display: block; clear: left; float: left;}
span.radio {width: 19px; height: 25px; padding: 0 5px 0 0; background: url(../images/radio.png) no-repeat; display: block; clear: left; float: left;}
span.select {position: absolute; width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */ height: 21px; padding: 0 24px 0 8px; color: #fff; font: 12px/21px arial,sans-serif; background: url(select.gif) no-repeat; overflow: hidden;}