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

body, a, p, h1, h2, h3 { margin: 0px; padding: 0px; }
.clear { clear:both; width:0px; height:0px }
a, img { outline:none }

input[type='text'] {width: 175px; font-size:11px; border: 1px solid #666;}
textarea { width: 175px; border: 1px solid #666; overflow:auto}
.submit { border: 1px solid #666; background: #FFF; }

#extra {display:none}

#container { width: 900px; margin: 15px auto 600px; }

#impact { width:100%; height:25px; background:#949599; font: 14px/25px Arial, Helvetica, sans-serif; color: #FFF;}
#impact-left {float:left; width:50%; text-align:right;background:#949599;}
#impact-right {float:left; width:350px; background:#949599; text-align:left}
#impact-right span {background:#949599;}


#container #mainHeader { font-family: Arial, Helvetica, sans-serif; font-size: 19px; color: #888; font-weight: normal; height: 29px; margin-top: 32px; }

#container #main { float: right; width: 567px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #535454; border-top-width: 3px; border-top-style: solid; border-top-color: #e7e7e6; background-image: url(images/triangle.jpg); background-repeat: no-repeat; background-position: 15px 0px; padding-top: 25px; line-height: 18px; }
#container #main a { color: #333; text-decoration: underline; }
#container #main a:hover { color: #F90; text-decoration: none; }
#container #main h1 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #999; font-weight: normal; line-height: 36px; }
#container #main #contentPicture { float: right; border: 3px solid #e7e7e6; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #666; text-align: right; margin-left: 15px; padding: 5px; line-height: 24px; margin-bottom: 12px; }
#container #main #contentPicture a { color: #999; text-decoration: none; line-height: 12px; }
#container #main #contentPicture a:hover { color: #F90; }

#container #main .contentPicture { float: right; border: 3px solid #e7e7e6; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #666; text-align: right; margin-left: 15px; padding: 5px; line-height: 24px; margin-bottom: 12px; }

#container #mainPictures { float: right; width: 567px; background-color: #e7e7e6; margin-top: 62px; }
#container #mainPictures #picture { width: 268px; background-color: #FFF; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; height: 300px; float: left; }
#container #mainPictures #content { float: right; width: 258px; background-color: #FFF; margin-top: 10px; margin-right: 10px; margin-bottom: 5px; margin-left: 5px; height: 200px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; vertical-align: bottom; text-align: right; color: #999; padding-right: 10px; }
#container #mainPictures #content #image { padding-top: 20px; text-align: center; }
#container #mainPictures #thumbnails { float: right; width: 129px; background-color: #FFF; height: 90px; margin-right: 10px; margin-top: 5px; }

#container #productNav { height: 125px; width: 570px; float: right; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-transform: uppercase; color: #535454;  }
#container #productNav #previousProduct { float: left; height: 125px; width: 45px; cursor:pointer;  }
#container #productNav #previousProduct img { margin-top: 40px; margin-left: 19px;display: none; }
#container #productNav #nextProduct { float: right; height: 125px; width: 25px; cursor:pointer;  }
#container #productNav #nextProduct img { margin-top: 40px; display: none;}



#container #productNav #productMask { position: relative; height: 125px; width: 500px; overflow: hidden; float: left; }
#container #productNav #productMask #productGroupContainer { height: 125px; position: absolute; left: 0px; top: 0px; width: 2000px; }

#container #productNav #productMask #productGroupContainer .product { height: 125px; width: 105px; float: left; margin-right: 20px; display: none; }
#container #productNav #productMask #productGroupContainer .product img { cursor:pointer }
#container #productNav #productMask #productGroupContainer .product .arrow { height: 15px; padding-left: 46px; visibility: hidden; }

#container #productNav #productMask #productGroupContainer .product .ring { text-align: center; visibility: hidden; }


#container #mainProducts { float: right; width: 570px; height: 237px; margin-bottom: 40px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #535454; line-height: 18px; margin-top: 62px; }
#container #mainProducts #left { float: left; width: 125px; height: 235px; background: #FFF; overflow: hidden; border: 1px solid #ccc; font: 12px/15px Arial, Helvetica, sans-serif; text-align: right; display: none; }

#container #mainProducts #left #description { color: #999; padding: 5px; width: 115px; height: 202px; border-bottom: 1px solid #ccc; }
#container #mainProducts #left #pricing { color: #999; cursor:pointer; width: 115px; padding: 5px; height: 225px; }

#container #mainProducts #left #contact { height: 50px; border: 1px solid #CCC; width: 125px; margin-top: 7px; background: #FFF; }
#container #mainProducts #left #contact a { text-decoration:none; color: #535454; }

#container #mainProducts #center { float: left; height: 235px; width: 350px; margin-right: 7px; margin-left: 7px; border: 1px solid #CCC; display: none; }
#container #mainProducts #right { width: 77px; float: right; height: 237px; display: none; }
#container #mainProducts #right .thumbnails { height: 75px; width: 75px; border: 1px solid #fff; margin-bottom: 3px; }

#container #mainPictures #content #image { padding-top: 20px; text-align: center; }
#container #mainPictures #thumbnails { float: right; width: 129px; background-color: #FFF; height: 90px; margin-right: 10px; margin-top: 5px; }

#container #indexMain { float: right; width: 567px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #333; margin-top: 25px; }
#container #indexMain #indexHeroImage { height: 240px; width: 565px; overflow: hidden; }
#container #indexMain #indexBoxLeft { height: 150px; width: 185px; float: left; padding-top: 15px; }
#container #indexMain #indexBoxCenter { height: 150px; width: 185px; float: left; margin-right: 6px; margin-left: 6px; padding-top: 15px; }
#container #indexMain #indexBoxRight { height: 150px; width: 185px; float: right; padding-top: 15px; }

#container #nav { width: 330px; float: left; }
#container #nav #navPerfectPiece { font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin-left: 65px; line-height: 22px; color: #F90; display: none; }
#container #nav #navPerfectPiece a { color: #999; text-decoration: none; }
#container #nav #navPerfectPiece a:hover { color: #F90; }
#container #nav #navCommitment { font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin-left: 65px; line-height: 22px; display: none; color: #F90; margin-top: 8px; }
#container #nav #navCommitment a { color: #999; text-decoration: none; }
#container #nav #navCommitment a:hover { color: #F90; }
#container #nav #navOurStory { font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin-left: 65px; line-height: 22px; display: none; color: #F90; margin-top: 8px; }
#container #nav #navOurStory a { color: #999; text-decoration: none; }
#container #nav #navOurStory a:hover { color: #F90; }

#container #nav .social-icons { height: 36px; margin: 25px 80px 8px 45px; }

#container #nav .navItem { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #F90; letter-spacing: 1px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #e7e7e6; height: 36px; line-height: 32px; margin: 25px 80px 8px 45px; }
#container #nav .navItem img { margin-top: 7px; }
#container #nav .navItem a { text-decoration: none; color: #333; letter-spacing: 1px; }
#container #nav .navItem a:hover { color: #F90; }
#container #nav #navText { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #999; margin-right: 65px; margin-left: 45px; margin-top: 25px; line-height: 18px; }

#container #top { height: 125px; background-image: url(images/the_clarity_project_logo.jpg); background-repeat: no-repeat; background-position: left top; }

#container #top #impact .orange  { color: #f90; }
#container #main .read-more { color:#f90; text-decoration: underline; cursor: pointer; }