/* COMMON AND GLOBAL */ body { font:62.5%/1.6 arial, verdana, helvetica, sans-serif; margin:0; padding:50px 0; background:#2f2723 url(/images/bodyBg.gif) 0 0 repeat-x; color:#363636; text-align:center; } td, textarea, input, select { font:100% arial, verdana, helvetica, sans-serif; } /* ----- IDS ----- */ #container { width:940px; margin:0 auto; text-align:left; font-size:120%; background:#e7e4e4;} #container #header { width:940px; height:142px; background:url(/images/headerBg.gif) 0 0 repeat-x; position:relative; border-bottom:1px solid #ffffff;} #container #header #logo { position:absolute; top:27px; left:17px;} #container #header #tagline { position:absolute; top:98px; left:170px;} #container #header #contactInfo { position:absolute; top:14px; left:657px; color:#743130;} #container #header #contactInfo a { color:#743130;} #container #header #searchBar { position:absolute; top:93px; left:649px;} #container #header #searchBar #search { background:url(/images/searchInputBg.gif) 0 0 no-repeat; width:177px; height:23px; padding:2px 0 0 25px; float:left; margin-right:7px;} #container #header #searchBar #searchInput { width:150px; border:1px solid #ffffff;} #container #header #searchBar #btnSearch { width:54px; height:14px; margin-top:5px;} #container #contentArea { padding:10px 14px 20px 14px;} #container #contentArea #leftCol { float:left; width:614px;} #container #contentArea #rightCol { float:right; width:260px;} #container #contentArea #leftColNarrow { float:left; width:600px;} #container #contentArea #rightColNarrow { float:right; width:258px;} #container #contentArea #rightCol #newsBox { border:1px solid #bbbbbb; background:#ffffff; margin-bottom:20px;} #container #contentArea #rightCol #newsBox .newsPadding { padding:6px;} #container #contentArea #rightCol #newsBox .newsArticle { padding:0 0 35px 0; margin-bottom:20px; background:url(/images/blueDots.gif) bottom left repeat-x; width:246px;} #container #contentArea #rightCol #newsBox .newsArticleLast { padding:0 0 35px 0; margin-bottom:20px; background:none; width:246px;} #container #contentArea #rightCol #newsBox p { padding:0 0 10px 0; margin:0; line-height:16px;} #container #contentArea #rightCol #newsBox a { font-size:11px; color:#6d9fb6;} #container #contentArea #rightCol #newsBox .articleImage { padding-bottom:5px;} #container #contentArea #rightCol #newsBox .showHideLink { background:url(/images/plusIcon.gif) right 0 no-repeat; padding:0 18px 0 0; margin:0;} #container #contentArea #rightCol #newsBox .newsTitle { font-size:14px; font-weight:bold; color:#853838; text-transform:uppercase; background:url(/images/titleBg.gif) 0 0 repeat-x; padding:4px 10px;} #container #contentArea #rightCol #newsBox .newsArticleTitle { font-size:16px; font-weight:bold; padding:0 0 20px 0; line-height:20px;} #container #contentArea #bannerArea { width:912px; height:256px;} #container #contentArea #bannerArea ul li{ width:912px; height:256px;} #container #contentArea #thumbs {margin-bottom:10px;} #container #contentArea #thumbs .thumb { float:left; margin:0 4px 10px 0;} #container #contentArea #thumbs .lastThumb { float:left; margin:0 0 10px 0;} #container #contentArea #relatedProjectsBox { width:238px; background:#61762d url(/images/relatedProjectsBoxBg.gif) 0 0 repeat-x; padding:10px; color:#ffffff; margin-bottom:5px;} #container #contentArea #relatedProjectsBox ul { list-style:none; padding:0; margin:0 0 10px 0;} #container #contentArea #relatedProjectsBox ul li { padding:0;} #container #contentArea #relatedProjectsBox ul li a { color:#FFFFFF; background:url(/images/relatedProjectsArrow.gif) 0 1px no-repeat; padding:0 0 0 20px;} #container #contentArea #projectLinks {} #container #contentArea #projectLinks .project { float:left; width:190px; margin:0 10px 20px 0; display:block; } #container #contentArea #projectLinks .project:hover { text-decoration:none;} #container #contentArea #projectLinks .lastProject { float:left; width:170px; margin:0 0 20px 0; clear:right;} #container #contentArea #projectLinks .lastProject:hover { text-decoration:none;} #container #contentArea #projectLinks .projectTitle { color:#1d2a62; font-weight:normal; font-size:10px; text-transform:uppercase; width:170px; height:25px;} #container #contentArea #projectLeft { float:left; width:350px;} #container #contentArea #projectLeft .projectMainTitle { color:#7c3434; font-size:18px; font-weight:bold;} #container #contentArea #projectLeft .projectInfo { color:#6391a6; padding:0 0 10px 0;} #container #contentArea #projectRight { float:right; width:510px;} #container #contentArea #projectRight .projectMainImage { margin:0 0 3px 0;} #container #contentArea #projectRight .projectThumb { float:left; margin:0 3px 0 0;} #container #contentArea #projectRight .lastProjectThumb { float:left; margin:0 0 0 0;} /* ----- HOME PRODUCT JUMPS ----- */ .productJump { width:612px; margin-bottom:10px;} .productJump .jumpPadding { padding:0 15px;} .productJump .jumpTitle { font-size:16px; font-weight:bold; line-height:18px;} .productJump .prdLogo { float:left; margin-right:40px; margin-left:25px;} .productJump .prdPicSmall { float:left; margin-right:5px;} .productJump .prdPicLarge { float:left;} .productJumpTopGreen { width:612px; height:10px; background:url(/images/prdJumpTopGreen.gif) 0 0 no-repeat; font-size:0;} .productJumpBodyGreen { width:612px; background:url(/images/prdJumpBodyGreen.gif) 0 0 no-repeat;} .productJumpBottomGreen { width:612px; height:27px; background:url(/images/prdJumpBottomGreen.gif) 1px 0 no-repeat;} .productJumpTopGrey { width:612px; height:12px; background:url(/images/prdJumpTopGrey.gif) 0 0 no-repeat; font-size:0;} .productJumpBodyGrey { width:612px; background:url(/images/prdJumpBodyGrey.gif) 0 0 no-repeat;} .productJumpBottomGrey { width:612px; height:28px; background:url(/images/prdJumpBottomGrey.gif) 1px 0 no-repeat;} .productJumpTopOrange { width:612px; height:10px; background:url(/images/prdJumpTopOrange.gif) 0 0 no-repeat; font-size:0;} .productJumpBodyOrange { width:612px; background:url(/images/prdJumpBodyOrange.gif) 0 0 no-repeat;} .productJumpBottomOrange { width:612px; height:26px; background:url(/images/prdJumpBottomOrange.gif) 1px 0 no-repeat;} .productJumpTopRed { width:612px; height:10px; background:url(/images/prdJumpTopRed.gif) 0 0 no-repeat; font-size:0;} .productJumpBodyRed { width:612px; background:url(/images/prdJumpBodyRed.gif) 0 0 no-repeat;} .productJumpBottomRed { width:612px; height:27px; background:url(/images/prdJumpBottomRed.gif) 1px 0 no-repeat;} .productJump p {margin-right:5px;} /* ----- BUTTONS ----- */ .btnView { width:309px; height:32px; display:block; background:url(/images/btnViewProductRange.gif) 0 0 no-repeat; margin:0;} .btnView:hover { background:url(/images/btnViewProductRange.gif) 0 -32px no-repeat;} .btnMoreNews { width:272px; height:32px; display:block; background:url(/images/btnMoreNews.gif) 0 0 no-repeat; margin:0;} .btnMoreNews:hover { background:url(/images/btnMoreNews.gif) 0 -32px no-repeat;} .btnChecklist { width:272px; height:32px; display:block; background:url(/images/btnChecklistHome.gif) 0 0 no-repeat; margin:0;} .btnChecklist:hover { background:url(/images/btnChecklistHome.gif) 0 -32px no-repeat;} /* ----- LISTS ----- */ #sectionLinks { list-style:none; padding:0; margin:0 0 20px 0;} #sectionLinks li { padding:0; margin:0;} #sectionLinks li a { color:#637e2c; text-transform:uppercase; font-size:10px; font-weight:bold; background:url(/images/sectionListArrow.gif) 0 4px no-repeat; padding:0 0 0 8px;} #contentLinks { list-style:none; padding:0; margin:0;} #contentLinks li { float:left; padding:0; display:block;} #contentLinks li a { float:left; display:block; color:#6d9fb6; font-size:10px; font-weight:bold; text-transform:uppercase; padding:0 4px; border-left:1px solid #6d9fb6; line-height:12px;} #contentLinks li a:hover { color:#6d9fb6; text-decoration:underline;} #contentLinks li a.first { border-left:none; padding:0 4px 0 0; background:none;} ul { padding:0; margin:0 0 20px 15px;} ul li { padding:0;} /* ----- PRODUCT BG IMAGE CLASSES ----- */ .fibreCBg { background:url(/images/fibreCBgImage.gif) bottom left no-repeat; padding:0 0 380px 0;} /* ----- CLASSES ----- */ .clear { clear:both; } .hide { display:none; } .show { display:block; } .printShow { display:none; } .float_left { float:left !important; } .float_right { float:right !important; } .align_left { text-align:left !important; } .align_center { text-align:center !important; } .align_right { text-align:right !important; } .align_justify { text-align:justify !important; } .align_bottom { vertical-align:bottom !important; } .image_right { float:right; padding:0 0 15px 15px; } .image_left { float:left; padding:0 15px 15px 0; } .image_center { margin:0 auto;} .relative { position:relative; } .inline {display:inline;} .hand { cursor:pointer;} .bold { font-weight:bold;} .textIndent15 { padding-left:15px;} .boxPadding10 { padding:10px;} .boxPadding13 { padding:13px;} .marB1 { margin-bottom:1px;} .marB5 { margin-bottom:5px;} .marB10 { margin-bottom:10px;} .marB20 { margin-bottom:20px;} .marB30 { margin-bottom:30px;} .marB40 { margin-bottom:40px;} .marB50 { margin-bottom:50px;} .rightColImg { border:1px solid #cccbcb; padding:5px; background:#ffffff; margin-bottom:10px;} .width600 { width:600px;} /* ----- HEADINGS & PARAGRAPHS ----- */ h1, h2, h3, h4, h5, h6 { margin:0; padding:0 0 10px 0; font-size:100%; font-weight:bold;} .pageTitle { color:#853838; font-size:25px; font-weight:bold; line-height:26px;} .pageTitleBlue { color:#1d2961; font-size:18px; font-weight:bold; line-height:20px;} .pageSubTitle { font-weight:bold; text-transform:uppercase; font-size:14px; padding:0;} .downloadTitle { font-weight:bold; font-size:14px; padding:0; clear:both;} .downloadTitle img { float:left; padding:2px;} .prdSubTitle { font-size:14px; color:#1d2961; font-weight:normal;} .boxTitle { font-size:18px; font-weight:bold; padding:0 0 5px 0; line-height:20px;} /* ----- TOP NAVIGATION ----- */ #topNav { width:938px; height:25px; border-left:1px solid #ffffff; border-right:1px solid #ffffff;} #topNav ul { list-style:none; padding:0; margin:0;} #topNav ul li { float:left; padding:0; display:block; margin-right:16px;} #topNav ul li a { float:left; display:block; color:#292322; font-size:16px; font-weight:bold; text-transform:uppercase; padding:5px 15px 3px 15px; line-height:16px;} #topNav ul li a:hover { background:#628fa4; color:#ffffff; text-decoration:none;} #topNav ul li.activenavitem a{ background:#628fa4; color:#ffffff; text-decoration:none;} /* ----- TOP SUB NAV NAVIGATION ----- */ #SubNav li { float:left; padding:0; display:block; margin:0 !important; z-index:999; position:relative;} #SubNav li a { float:left; display:block !important; color:#ffffff !important; font-size:10px !important; font-weight:normal; text-transform:uppercase; padding:0 10px !important; border-left:1px solid #ffffff; line-height:10px !important; margin-top:10px; margin-left:5px !important; margin-right:5px !important;} #SubNav li:first-child a { border-left:none;} #SubNav li a:hover { color:#ffffff !important; text-decoration:underline !important; background:none !important;} #SubNav li a.first { border-left:none; padding:0 10px 0 0;} /* ----- TOP SUB NAV NAVIGATION ----- */ #subNav { width:940px; height:23px; background:url(/images/subNavBg.gif) 0 0 repeat-x;} #subNav ul { list-style:none; padding:9px 0 0 15px; margin:0;} #subNav ul li { float:left; padding:0; display:block; border-left:1px solid #ffffff;} #subNav ul li a { float:left; display:block; color:#ffffff; font-size:10px; font-weight:normal; text-transform:uppercase; padding:0 10px; line-height:10px;} #subNav ul li a:hover { color:#ffffff; text-decoration:underline;} #subNav ul li a.first { border-left:none; padding:0 10px 0 0;} /* ----- BREADCRUMBS ----- */ #breadcrumbs { width:940px; height:28px; border-bottom:1px solid #ffffff;} #breadcrumbs ul { list-style:none; padding:7px 0 0 15px; margin:0;} #breadcrumbs ul li { float:left; padding:0; display:block;} #breadcrumbs ul li { float:left; display:block; color:#838383; font-size:10px; font-weight:normal; text-transform:uppercase; padding:0 6px 0 8px; background:url(/images/breadcrumbsArrow.gif) 0 6px no-repeat;} #breadcrumbs ul li a { float:left; display:block; color:#838383;} #breadcrumbs ul li a:hover { color:#838383; text-decoration:underline;} #breadcrumbs ul li a.first { border-left:none; padding:0 6px 0 0; background:none;} /* ----- BOTTOM NAV ----- */ #bottomNav { width:940px; height:27px; background:#d1cccc;} #bottomNav ul { list-style:none; padding:7px 0 0 15px; margin:0;} #bottomNav ul li { float:left; padding:0; display:block;} #bottomNav ul li a { float:left; display:block; color:#733130; font-size:13px; font-weight:bold; text-transform:uppercase; padding:0 8px; border-left:1px solid #733130; line-height:13px;} #bottomNav ul li a:hover { color:#733130; text-decoration:underline;} #bottomNav ul li a.first { border-left:none; padding:0 8px 0 0; background:none;} /* ----- FOOTER ----- */ #footer { width:910px; height:37px; background:url(/images/footerBg.gif) 0 0 repeat-x; color:#6d9fb6; font-size:9px; padding:10px 15px 0 15px; text-transform:uppercase;} #footer p { padding:0;} #footer ul { list-style:none; padding:0; margin:0; float:left;} #footer ul li { float:left; padding:0; display:block;} #footer ul li a { float:left; display:block; color:#6d9fb6; font-size:9px; font-weight:normal; text-transform:uppercase; padding:0 8px; border-left:1px solid #6d9fb6; line-height:10px;} #footer ul li a:hover { color:#6d9fb6; text-decoration:underline;} #footer ul li a.first { border-left:none; padding:0 8px 0 0; background:none;} #footer #builtBy { float:right; line-height:10px; color:#6d9fb6;} /* ----- GLOBAL ----- */ img { display:block; border:0; } p { padding:0 0 15px 0; margin:0; line-height:18px;} address { font-style:normal;} /* ----- LINKS ----- */ a { color:#363636; font-weight:normal; text-decoration:none; outline:none;} a:hover { text-decoration:underline; } /* ----- FORMS ----- */ form { padding:0; margin:0; } fieldset { padding:0; margin:0; border:0px none; display:block; } legend { padding:0; margin:0; display:inline; } label { display:block; width:260px; float:left; } input, textarea { width:200px; font-size:11px !important; color:#6c6c6c;} .required { border-color:#B0232A !important;} .checkRadio { width:20px; position:relative; left:-7px;} #frmContact { margin-bottom:15px;} #frmContact p { padding:7px 0;} #frmContact select { width:204px;} #frmContact div { margin-bottom:10px;} #submit { width:55px; border:none;} .error{font-weight:bold;font-size:18px;margin:10px;padding:10px;background-color:#B0232A;color:#ffffff;} /* ----- TABLES ----- */ table { border-collapse:collapse; } table p { padding:0px; } #imagefader {position:absolute;} #imagefader ul {} #imagefader ul li {float:left;display:none;position:absolute;top:0;left:0;list-style:none;} #imagefader ul li h3{background-image:url(/images/white-trans.png);width:491px;text-align:right;padding:12px 17px 12px 0;position:absolute;} #imagefaderthumbs {position:relative;margin-top:340px;} #imagefaderthumbs ul{margin:0;} #imagefaderthumbs ul li {float:left;margin-right:3px;list-style:none;} #imagefaderthumbs ul li a{margin-top:1px !important;} .display { display:block !important; } .hilite{background:#cacaca;} .nomargin{margin:0 !important;} #download-list{} #download-list li{ list-style:none; } #download-list li img { float:left;margin-right:10px; } #steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px;} #steps li {font-size:24px; float:left; padding:10px; color:#b0b1b3;} #steps li span {font-size:11px; display:block;} #steps li.current { color:#000;} .prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none;} .prev:hover, .next:hover { background-color:#000; text-decoration:none;} .prev { float:left;} .next { float:right;} #rightButton {left:898px;position:absolute;top:111px;z-index:110;} #leftButton {position:absolute;top:111px;z-index:100;} .lightbox{margin-top:75px;margin-bottom:85px;display:block;} .dlButton{width:262px;height:38px;background-image:url(/images/btn_dl.png);background-repeat:no-repeat;display:block;padding-left:16px;padding-top:8px;font-family:Arial;font-size:18px;font-weight:bold;color:#ffffff;text-decoration:none;margin-left:-2px;}/* ColorBox Core Style The following rules are the styles that are consistant between all ColorBox themes */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:visible;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} /* ColorBox example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, in hope that this will make the relationship easier to understand. Thanks, jack@colorpowered.com */ #cboxOverlay{background:url(/images/cb/overlay.png) 0 0 repeat;} #colorbox{} #cboxTopLeft{width:21px; height:21px; background:url(/images/cb/borderTopLeft.png) 0 0 no-repeat;} #cboxTopCenter{height:21px; background:url(/images/cb/borderTopCenter.png) 0 0 repeat-x;} #cboxTopRight{width:21px; height:21px; background:url(/images/cb/borderTopRight.png) 0 0 no-repeat;} #cboxBottomLeft{width:21px; height:21px; background:url(/images/cb/borderBottomLeft.png) 0 0 no-repeat;} #cboxBottomCenter{height:21px; background:url(/images/cb/borderBottomCenter.png) 0 0 repeat-x;} #cboxBottomRight{width:21px; height:21px; background:url(/images/cb/borderBottomRight.png) 0 0 no-repeat;} #cboxMiddleLeft{width:21px; background:url(/images/cb/borderMiddleLeft.png) 0 0 repeat-y;} #cboxMiddleRight{width:21px; background:url(/images/cb/borderMiddleRight.png) 0 0 repeat-y;} #cboxContent{background:#fff;} #cboxLoadedContent{margin-bottom:28px;} #cboxTitle{position:absolute; bottom:3px; left:0; text-align:center; width:100%; color:#949494;} #cboxCurrent{position:absolute; bottom:3px; left:58px; color:#949494;} #cboxSlideshow{position:absolute; bottom:3px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(/images/cb/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxPrevious.hover{background-position:-25px -25px;} #cboxNext{position:absolute; bottom:0; left:27px; background:url(/images/cb/controls.png) 0px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxNext.hover{background-position:0px -25px;} #cboxLoadingOverlay{background:url(/images/cb/loading_background.png) center center no-repeat;} #cboxLoadingGraphic{background:url(/images/cb/loading.gif) center center no-repeat;} #cboxClose{position:absolute; bottom:0; right:0; background:url(/images/cb/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxClose.hover{background-position:-50px -25px;} .formError { position:absolute; top:300px; left:300px; width:150px; padding-bottom:15px; display:block; z-index:5000; } .formError .formErrorContent { width:100%; background:#000; color:#fff; font-family:tahoma; font-size:10px; box-shadow: 1px 1px 6px #000; -moz-box-shadow: 1px 1px 6px #000; -webkit-box-shadow: 1px 1px 6px #000; padding:4px 10px 4px 10px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } .formError .formErrorArrow{ position:absolute; bottom:0;left:20px; width:15px; height:15px; } .formError .formErrorArrow div{ box-shadow: 1px 4px 5px #000; -moz-box-shadow: 1px 4px 5px #000; -webkit-box-shadow: 1px 1px 5px #000; font-size:0px; } .formError .formErrorArrow .line10{width:15px;height:1px; background:#000;margin:0 auto; font-size:0px; display:block;} .formError .formErrorArrow .line9{width:13px;height:1px; background:#000;margin:0 auto;display:block;} .formError .formErrorArrow .line8{width:11px;height:1px; background:#000;margin:0 auto;display:block;} .formError .formErrorArrow .line7{width:9px;height:1px; background:#000;margin:0 auto;display:block;} .formError .formErrorArrow .line6{width:7px;height:1px; background:#000;margin:0 auto;display:block;} .formError .formErrorArrow .line5{width:5px;height:1px; background:#000;margin:0 auto;display:block;} .formError .formErrorArrow .line4{width:3px;height:1px; background:#000;margin:0 auto;display:block;} .formError .formErrorArrow .line3{width:1px;height:1px; background:#000;margin:0 auto;display:block;} #contactform label{display:block;width:200px;float:left;} #contactform input{display:block;width:200px;padding:2px;border:1px solid #999999; font-size:18px !important;} #contactform input:hover{border:1px solid #000;} #contactform input:focus{background-color:#eee;border:1px solid #000;} #contactform input[type="checkbox"]{display:block;width:auto;float:left;margin-right:20px;} #contactform textarea {display:block;width:400px;height:100px;padding:2px;border:1px solid #999999;} #contactform textarea:hover {border:1px solid #000;} #contactform textarea:focus {background-color:#eee;border:1px solid #000;} #contactform legend {font-size:1.25em;color:#759d45;} #contactform p {margin-left:10px;margin-top:15px;margin-bottom:15px;clear:both;} #contactform input[type="submit"]{display:block;margin-left:220px;margin-top:20px;} #contactform select{width:200px; font-size:18px !important;} #contactform a.dp-choose-date {float: left;width: 16px;height: 16px;padding: 0;margin: 3px 0 15px 8px;display: block;text-indent: -2000px;overflow: hidden;background: url(/images/calendar.png) no-repeat; clear:right;} #contactform a.dp-choose-date.dp-disabled {background-position: 0 -20px;cursor: default;} #contactform input.dp-applied {width: 140px;float: left;} #checklistform label{display:block;width:200px;float:left;} #checklistform input{display:block;width:200px;padding:2px;border:1px solid #999999; font-size:18px !important;} #checklistform input:hover{border:1px solid #000;} #checklistform input:focus{background-color:#eee;border:1px solid #000;} #checklistform input[type="checkbox"]{display:block;width:auto;float:left;margin-right:20px;} #checklistform textarea {display:block;width:400px;height:100px;padding:2px;border:1px solid #999999;} #checklistform textarea:hover {border:1px solid #000;} #checklistform textarea:focus {background-color:#eee;border:1px solid #000;} #checklistform legend {font-size:1.25em;color:#759d45;} #checklistform p {margin-left:10px;margin-top:15px;margin-bottom:15px;clear:both;} #checklistform input[type="submit"]{display:block;margin-left:220px;margin-top:20px;} #checklistform select{width:200px; font-size:18px !important;} #checklistform a.dp-choose-date {float: left;width: 16px;height: 16px;padding: 0;margin: 3px 0 15px 8px;display: block;text-indent: -2000px;overflow: hidden;background: url(/images/calendar.png) no-repeat; clear:right;} #checklistform a.dp-choose-date.dp-disabled {background-position: 0 -20px;cursor: default;} #checklistform input.dp-applied {width: 140px;float: left;} table.jCalendar { border: 1px solid #000; background: #aaa; border-collapse: separate; border-spacing: 2px; } table.jCalendar th { background: #333; color: #fff; font-weight: bold; padding: 3px 5px; } table.jCalendar td { background: #ccc; color: #000; padding: 3px 5px; text-align: center; } table.jCalendar td.other-month { background: #ddd; color: #aaa; } table.jCalendar td.today { background: #666; color: #fff; } table.jCalendar td.selected { background: #f66; color: #fff; } table.jCalendar td.selected.dp-hover { background: #f33; color: #fff; } table.jCalendar td.dp-hover, table.jCalendar tr.activeWeekHover td { background: #fff; color: #000; } table.jCalendar tr.selectedWeek td { background: #f66; color: #fff; } table.jCalendar td.disabled, table.jCalendar td.disabled.dp-hover { background: #bbb; color: #888; } table.jCalendar td.unselectable, table.jCalendar td.unselectable:hover, table.jCalendar td.unselectable.dp-hover { background: #bbb; color: #888; } /* For the popup */ /* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */ div.dp-popup { position: relative; background: #ccc; font-size: 10px; font-family: arial, sans-serif; padding: 2px; width: 171px; line-height: 1.2em; } div#dp-popup { position: absolute; z-index: 199; } div.dp-popup h2 { font-size: 12px; text-align: center; margin: 2px 0; padding: 0; } a#dp-close { font-size: 11px; padding: 4px 0; text-align: center; display: block; } a#dp-close:hover { text-decoration: underline; } div.dp-popup a { color: #000; text-decoration: none; padding: 3px 2px 0; } div.dp-popup div.dp-nav-prev { position: absolute; top: 2px; left: 4px; width: 100px; } div.dp-popup div.dp-nav-prev a { float: left; } /* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */ div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a { cursor: pointer; } div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled { cursor: default; } div.dp-popup div.dp-nav-next { position: absolute; top: 2px; right: 4px; width: 100px; } div.dp-popup div.dp-nav-next a { float: right; } div.dp-popup a.disabled { cursor: default; color: #aaa; } div.dp-popup td { cursor: pointer; } div.dp-popup td.disabled { cursor: default; }