/*Style Sheet for Vilex Inc.*/ /*Date Created: June 26, 2009*/ /*Author: Daniel Saint Auguste - www.saintauguste.com*/ /*This controls the body background and alignment.*/ BODY { background-color:#ececed; text-align:center;} /*This controls the page container's size, position, and properties.*/ #container{ position: relative; float:none; width:960px; background-color:#FFFFFF; margin: 0px auto; border:1px solid #cccccc; text-align:left;} /*This controls size, position, and properties of the header on the page.*/ #header{ width:930px; height:100px; background-color:#ffffff; margin:15px 15px 0 15px; background-image:url(../images/masthead.jpg); border-bottom:1px solid #ffffff;} /*This controls the Top Navigations - 4 sets (Blue, Red, Black, LightBlue). */ /*This controls the Top Navigation set Blue.*/ #topNavBlue{width:930px; height:30px; margin:0 15px 0; background-image:url(../images/topNavBlue.jpg);} #topNavBlue ol{ margin:0px 0px 0px 20px; padding:5px 0px 0px 0px;} #topNavBlue li{ display:inline; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff; text-transform:uppercase; padding-right:32px; font-weight:normal;} #topNavBlue a{color:#ffffff; text-decoration:none;} #topNavBlue a:hover{color:#6dcff6;} #topNavBlue .active a{color:#6dcff6;} /*This controls the Top Navigation set Red.*/ #topNavRed{width:930px; height:30px; margin:0 15px 0; background-image:url(../images/topNavRed.jpg);} #topNavRed ol{ margin:0px 0px 0px 20px; padding:5px 0px 0px 0px;} #topNavRed li{ display:inline; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff; text-transform:uppercase; padding-right:32px; font-weight:normal;} #topNavRed a{color:#ffffff; text-decoration:none;} #topNavRed a:hover{color:#fcd3c1;} #topNavRed .active a{color:#fcd3c1;} /*This controls the Top Navigation set Black.*/ #topNavBlack{width:930px; height:30px; margin:0 15px 0; background-image:url(../images/topNavBlack.jpg);} #topNavBlack ol{ margin:0px 0px 0px 20px; padding:5px 0px 0px 0px;} #topNavBlack li{ display:inline; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff; text-transform:uppercase; padding-right:32px; font-weight:normal;} #topNavBlack a{color:#ffffff; text-decoration:none;} #topNavBlack a:hover{color:#939598;} #topNavBlack .active a{color:#939598;} /*This controls the Top Navigation set LightBlue.*/ #topNavLightBlue{width:930px; height:30px; margin:0 15px 0; background-image:url(../images/topNavLightBlue.jpg);} #topNavLightBlue ol{ margin:0px 0px 0px 20px; padding:5px 0px 0px 0px;} #topNavLightBlue li{ display:inline; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff; text-transform:uppercase; padding-right:32px; font-weight:normal;} #topNavLightBlue a{color:#ffffff; text-decoration:none;} #topNavLightBlue a:hover{color:#c7eafb;} #topNavLightBlue .active a{color:#c7eafb;} /*This controls the size, position and properties of the breadcrumbs on the page.*/ #breadcrumbs {width:930px; height:20px; background-color:#ffffff; margin:0 15px 0 15px; color:#999999; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding-top:4px; text-indent:20px; } #breadcrumbs ol{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;} #breadcrumbs li{ display:inline; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; padding-right:5px; font-weight:normal;} #breadcrumbs a {color:#333333; text-decoration:none;} #breadcrumbs a:hover {color:#ee1c24; text-decoration:underline;} #breadcrumbs .active {color:#777777; font-style:italic;} #breadcrumbs .breadCarrot{color:#333333; font-size: 14px;} /*This controls the size of the main graphic on the page.*/ #mainImage{width:930px; height:289px; background-color:#ffffff; margin:0 15px 15px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;} #mainImageSplash{width:930px; height:319px; background-color:#ffffff; margin:0 15px 15px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;} /*This controls the about page main graphic's images and text*/ #mainImage .about { background-image:url(../images/heroAbout.jpg); background-repeat:no-repeat; height:289px; width:930px;} .subText{position:relative; float:right; width:400px; margin:10px 0px 10px 0px;} .subText p{padding: 5px 15px 0px 15px; font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:18px; color:#333333;} /*This controls the contact page main graphic's images and text*/ #mainImage .contact { background-image:url(../images/heroContact.jpg); background-repeat:no-repeat; height:289px; width:930px;} .contact .subText{ width:300px;} .contact p{padding: 5px 0 25 0; font-family:Arial, Helvetica, sans-serif; font-size:12px;color:#333333;} /*This controls the products pages main graphic's images and links*/ #mainImage .products { background-image:url(../images/heroProduct.jpg); background-repeat:no-repeat; height:289px; width:930px;} /*This controls the Catalog page's main graphics*/ #mainImage .catalog { background-image:url(../images/heroCatalog.jpg); background-repeat:no-repeat; height:289px; width:930px;} /*This controls the Sales Reps page's main graphics*/ #mainImage .salesReps { background-image:url(../images/heroSalesRep.jpg); background-repeat:no-repeat; height:289px; width:930px;} /*This controls all page's main graphics except for the ones with navigation*/ #mainimageGeneric { width:930px; height:auto; background-color:#dee5e8; margin:0 15px 15px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;} #mainimageGeneric2 { width:930px; height:319px; margin:0 15px 15px; background-image:url(../html/products/images/flash_background.jpg); background-repeat:no-repeat;} #body_Image{width:930px; height:500px; background-color:#ffffff; margin:0 15px 15px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;} /*This controls the navigation on the right side of the main graphics*/ .subNav { position:relative; float:right; height:289px; width:400px;} .subNav ul{ margin:0px 0px 0px 0px; padding:15px 0px 0px 20px;} .subNav li{ display:block; padding: 5px 5px 5px 20px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-image:url(../images/arrow.png); background-repeat:no-repeat; background-position:left; color:#0066cc;} .subNav a { text-decoration:none; color:#0066cc;} .subNav a:hover { text-decoration:underline; color:#ee1c24;} /*This controls the navigation on the right side of the main graphics*/ .subNav2 { position:relative; float:right; height:200px; width:225px;} .subNav2 ul{ margin:0px 0px 0px 0px; padding:15px 0px 0px 20px;} .subNav2 li{ display:block; padding: 5px 5px 5px 20px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-image:url(../images/arrow_white.png); background-repeat:no-repeat; background-position:left; color:#ffffff;} .subNav2 a { text-decoration:none; color:#ffffff;} .subNav2 a:hover { text-decoration:none; color:#ffcc00;} .subNav2 li .active { text-decoration:none; color:#ffcc00} /*This controls the mini navigation below the main graphics on the page*/ #MiniNavBox{ width:928px; height:25px; border:1px solid #cccccc; margin:15px 15px 15px; font-family:Arial, Helvetica, sans-serif; font-size:12px;} /*This controls the mini navigation's left side*/ #MiniNavBoxHeader{ position:relative; float:left; width:200px; Height:25px; background-image:url(../images/miniNavArrow.jpg); background-repeat:no-repeat; background-position:right; background-color:#666666; color:#ffffff; padding:0px 0px 0px 20px; font-weight:bold;} #MiniNavBoxHeader ol{ margin:0px 0px 0px 0px; padding:5px 0px 0px 0px;} #MiniNavBoxHeader li{ display:inline; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff; padding-right:0px; font-weight:normal;} #MiniNavBoxHeaderLong{ position:relative; float:left; width:300px; Height:25px; background-image:url(../images/miniNavArrow.jpg); background-repeat:no-repeat; background-position:right; background-color:#666666; color:#ffffff; padding:0px 0px 0px 20px; font-weight:bold;} #MiniNavBoxHeaderLong ol{ margin:0px 0px 0px 0px; padding:5px 0px 0px 0px;} #MiniNavBoxHeaderLong li{ display:inline; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff; padding-right:0px; font-weight:normal;} /*This controls the mini navigation's right side*/ #MiniNavBoxText{ position:relative; float:left; width:auto; Height:25px; background-color:#ffffff; color: #999999;} #MiniNavBoxText ol{ margin:0px 0px 0px 20px; padding:5px 0px 0px 0px;} #MiniNavBoxText li{ display:inline; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#999999; padding-right:20px;} #MiniNavBoxText a { text-decoration:none; color:#666666;} #MiniNavBoxText a:hover { text-decoration:underline; color:#ec141d;} /*This controls the size and position of the flash navigation scroller.*/ #iconNav{width:930px; height:120px; background-color:#999999; margin:0 15px 15px;} #threeColumnPhotoContainer{width:930px; height:170px; background-color:#ffffff; margin:0 15px 15px;} .threeColumnPhoto{position:relative; float:left; width:310px; height:170px; background-color:#ffffff; border:0px; } .oneColumnPhoto{position:relative; float:left; width:930px; height:170px; background-color:#ffffff; border:0px; } /*Thumbnail properties*/ #thumbnailContainer{width:930px; height:170px; background-color:#ffffff; margin:0 15px 45px;} /*One Column Thumbnail properties*/ .oneColumnthumnail{position:relative; float:left;width:930px;} .oneColumnthumbnailText{position:relative; float:left; width:100%; height:25px; font-size:18px; font-weight:normal; color:#666666; background-color:#ffffff; border-bottom:1px solid #cccccc; margin-bottom:10px; text-align:left; font-family:"Times New Roman", Times, serif;} .oneColumnthumbnailPhoto{position:relative; float:left; width:930px; height:170px; background-color:#ffffff; border:0px;} .oneColumnthumnailSpacer{position:relative; float:left; width:15px; height:auto;} /*Three Column Thumbnail properties*/ .threeColumnthumnail{position:relative; float:left;width:300px;} .threeColumnthumbnailText{position:relative; float:left; width:100%; height:25px; font-size:18px; font-weight:normal; color:#666666; background-color:#ffffff; border-bottom:1px solid #cccccc; margin-bottom:10px; text-align:left; font-family:"Times New Roman", Times, serif;} .threeColumnthumbnailPhoto{position:relative; float:left; width:300px; height:170px; background-color:#ffffff; border:0px;} .threeColumnthumnailSpacer{position:relative; float:left; width:15px; height:auto;} /*Four Column Thumbnail properties*/ .fourColumnthumnail{ position:relative; float:left;width:225px;} .fourColumnthumbnailText{ position:relative; float:left; width:100%; height:25px; font-size:18px; font-weight:normal; color:#666666; background-color:#ffffff; border-bottom:1px solid #cccccc; margin-bottom:10px; text-align:left; font-family:"Times New Roman", Times, serif;} .fourColumnthumbnailPhoto{ position:relative; float:left; width:225px; height:170px; background-color:#ffffff; border:0px;} .fourColumnthumnailSpacer{ position:relative; float:left; width:10px; height:auto;} .fourColumnText{ position:relative; float:left; width:220px; font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:20px; padding:20 20 20 20; margin-bottom:20px;} .twoColumnthumnail{ position:relative; float:left;width:300px;} .twoColumnthumbnailText{ position:relative; float:left; width:100%; height:25px; font-size:18px; font-weight:normal; color:#666666; background-color:#ffffff; border-bottom:1px solid #cccccc; margin-bottom:10px; text-align:left; font-family:"Times New Roman", Times, serif;} .twoColumnthumbnailPhoto{ position:relative; float:left; width:300px; height:170px; background-color:#ffffff; border:0px;} .twoColumnthumnailSpacer{ position:relative; float:left; width:10px; height:auto;} .twoColumnText{ position:relative; float:left; width:300px; font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:20px; padding:20 20 20 20; margin-bottom:20px; text-align:justify;} /*This controls the page content properties*/ .pageContent { width:930px; background-color:#ffffff; margin:0px 15px 0px 15px; border-top:1px solid #cccccc;} /*This controls the Section Header*/ .sectionHeader { width:910px; background-color:#ffffff; border-bottom:2px solid #333333; margin-top:10px; margin-left:20px; font-size:24px;} /*This controls the size, position and properties of the left nav on the page.*/ #leftColumnContainer{ float:left; width:200px; height:auto; background-color:#ffffff; margin-top:15px; margin-left:20px;} #leftnav { background-color:#ffffff; color:#999999; font-family:Arial, Helvetica, sans-serif; font-size:12px; display:block;} #leftNav ol{ margin:0px 0px 100px 0px; padding:0px 0px 0px 0px; } #leftNav li{display:block; list-style:none; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; padding-bottom:5px; padding-top:5px; font-weight:normal; border-bottom:1px solid #cccccc; text-align:left;} #leftNav a {color:#333333; text-decoration:none;} #leftNav a:hover {color:#ff0000; text-decoration:none;} #leftNav .active {color:#ff0000; font-style:normal;} #leftNav .leftNav{color:#333333; font-size: 14px;} .secondary{margin-left:20px;} .secondary a {color:#333333; text-decoration:none;} .secondary a:hover {color:#ff0000; text-decoration:none;} .secondary .active {color:#ff0000; font-style:normal;} .leftColumnCaptions{ float:left; width:200px; height:auto; background-color:#ffffff; margin-top:15px; margin-left:18px; font-family:"Times New Roman", Times, serif; font-size:17px; color: #003366; line-height:20px; margin-bottom:25px;} .panelHeader{width:200px;background-color:#ffffff; margin:0px 0px 10px 0px; padding-bottom:2px; border-bottom:2px solid #333333; color:#333333;} .panelHeaderNav{width:200px;background-color:#ffffff; margin:0px 0px 0px 0px; border-bottom:2px solid #333333; color:#333333;} .leftLinkIcons{background-color:#ffffff; margin:0px 0px 25px 0px; color:#999999; padding-top:4px; text-align:center;border:0px;} .leftLinkIcons ol{margin:0px 0px 10px 0px; padding:0px 0px 0px 0px;border:0px;} .leftLinkIcons li{list-style:square;font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#cc0000; padding-bottom:5px; padding-top:5px; font-weight:normal; border-bottom:0px solid #cccccc;text-align:left; margin-left:15px;border:0px;} .leftLinkIcons a {color:#333333; text-decoration:none; border:0px;} .leftLinkIcons a:hover {color:#ff0000; text-decoration:none;border:0px;} .leftLinkIcons .active {color:#ff0000; font-style:normal;border:0px;} .leftLinkIcons .leftNav{color:#333333; font-size: 14px;border:0px;} .leftLinkIcons2{width:200px;background-color:#FFFFFF;/*background-image: url(../html/products/power_equipment_and_accessories/handpieces_and_accessories/images/rotary-accessories.jpg); padding-top:125px; background-repeat: no-repeat;*/} .leftLinkIcons2 ol{margin:0px 0px 10px 0px; padding:0px 0px 0px 0px; border:0px;} .leftLinkIcons2 ol a{color:#333333; text-decoration:none; } .leftLinkIcons2 ol a:hover{color:#ff0000; text-decoration:none;} .leftLinkIcons2 li{list-style:square;font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#cc0000; padding-bottom:5px; padding-top:5px; font-weight:normal; border-bottom:0px solid #cccccc;text-align:left; margin-left:25px;} .leftLinkIcons2 li a{ color:#0066cc;} .leftLinkIcons2 li a:hover{ color:#ff0000;} /*This controls the size, position and properties of the right column on the page.*/ #rightColumnContainer{ float:right; width:690px;height:auto; background-color:#ffffff; margin-top:16px; margin-left:20px; } .pageHeader { width:690px; background-color:#ffffff; border-bottom:1px solid #333333; font-size:20px; margin-bottom:10px;} .pagePhoto { width:690px; background-color:#ffffff; border:0px solid #cccccc; margin-bottom:15px;} .rotary { width:690px; height:200px; background-color:#ffffff; border:0px solid #cccccc; margin-bottom:15px; background-image: url(../html/products/power_equipment_and_accessories/handpieces_and_accessories/images/rotary-accessories-mainPhoto.jpg); background-repeat: no-repeat;} .oscillating { width:690px; height:200px; background-color:#ffffff; border:0px solid #cccccc; margin-bottom:15px; background-image: url(../html/products/power_equipment_and_accessories/handpieces_and_accessories/images/oscillatingsaws-accessories-mainPhoto.jpg); background-repeat: no-repeat;} .sagittal { width:690px; height:200px; background-color:#ffffff; border:0px solid #cccccc; margin-bottom:15px; background-image: url(../html/products/power_equipment_and_accessories/handpieces_and_accessories/images/Sagittal-Saw-Accessories_mainPhoto.jpg); background-repeat: no-repeat;} .pageCopy { width:690px; background-color:#ffffff; font-size:12px; margin:0px 0 25px 0; font-family:Arial, Helvetica, sans-serif; line-height:20px;} .twoColumnSidebySideWrapper { position:relative; float:left; width:690px; margin-bottom:25px;} .photoTextWrapper{ width:690px;} .sidebysidePhoto{ float:left; width:225px; margin-right:20px;} .sidebysideText{ float:left; width:445px;} /*This controls the size, position, and properties of the footer.*/ #footer {clear:both; width:930px; height:20px; background-color:#ffffff; border-top:1px solid #cccccc; margin:0 15px 0 15px; font-size:11px; font-family:Arial, Helvetica, sans-serif; padding-top:4px; text-align:center; color:#999999;} /* Tables*/ .tableTitle{ width:100%; height:25px; font-size:18px; font-weight:normal; color:#333333; background-color:#ffffff; border-bottom:1px solid #333333; margin-bottom:0px; text-align:left; font-family:"Times New Roman", Times, serif;} .th{ text-align:center; height:25px; font-size:12px; font-weight:normal; color:#ffffff; background-color:#999999; text-indent:5px; } .tr{ text-align:center; height:25px; font-size:12px; font-weight:normal; color:#333333; background-color:#e3e7eb; border-right:1px solid #000; text-indent:5px; } .tr_alt{ text-align:center; height:25px; font-size:12px; font-weight:normal; color:#333333; background-color:#f0f0f0; border:1px solid #000; text-indent:5px; } .tr_subHead{ text-align:left; font-size:11px; font-weight:bold; color:#333333; background-color:#cccccc; text-indent:5px; } .h1{ font-family:"Times New Roman", Times, serif; font-size:18px; Color:#ff0000; margin-bottom:10px; } .subText .h1{ font-family:"Times New Roman", Times, serif; font-size:18px; Color:#ff0000; margin-bottom:0px; margin-top:5px; } .h2{ font-family:"Times New Roman", Times, serif; font-size:15px; Color:#ff0000; margin-bottom:5px; margin-top:5px; } .events{ font-size:11px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; color:#666666;} .events ol{margin:0px 0px 0px 15px; padding:0px 0px 0px 0px; border:0px;} .events .body{padding-bottom:10px; } .events .header{ font-size:11px; color:#ee1c24; font-weight:bold;} /*This controls the style of the paragraphs.*/ p{margin:0px;} a{ color:#0066cc;} a:hover { text-decoration:underline; color:#ee1c24;}