/* Start of CMSMS style sheet 'Layout: Left sidebar + 1 column' **************** browsers interpret margin and padding a little differently, we'll remove all default padding and margins and set them later on ***************** */ *{margin:0;padding:0;} /* BASIC LAYOUT */ html,body { margin:0 auto; padding:0; height:100%;} body{text-align:left;font-family: Arial, Helvetica, sans-serif; font-size:75%; color: #354231; background:#e5e6e7 url(../images/homepage/bg-main1.gif) repeat-x; background-position:center top; } /* Background image for the textpage is hard-coded into the page */ p, #content-textpage li, td { font: 1em/1.8em Arial, Helvetica, sans-serif; } p, td { margin:5px 0 10px 0; } #content-textpage li { margin:5px 0 10px 0px; margin-left: -15px; } input, label { font-size: 1em; line-height: 2em; } h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; display: block; color: #999; font-weight: bold; } h1 { font-size: 2em; color: #000; line-height: 1.8em; margin-bottom: 5px;} h2 {font-size: 1.6em; color: #12958a; line-height: 1.6em; margin-bottom: 5px;} h3 { font-size: 1.4em; color: #12958a; line-height: 1.4em; margin-bottom: 5px;} h4 { font-size: 1.2em; color: #12958a; margin-bottom: 10px;} h5 { font-size: 1.1em; color: #12958a;} a { color: #469394; text-decoration: underline;} a:hover { color: #60c4c5; text-decoration: none; } #industry-news h3 { font-size: 1.2em; } div{font-size:1em;} img{border:0;} a:hover{text-decoration:none;color:#385C72;} /* center wrapper, min max width */ #shadow {width: 1012px; margin:0 auto; background: transparent url(../images/pageElements/bg-main.gif) repeat-y center top;} div#pagewrapper{width:980px; background-color:#fff;color:#000;margin:0 auto; border-left: solid 1px #fff; border-right: solid 1px #fff;} /* HEADER (hide text & replace with an image, need to assign a height for it so that the image wont cut off) */ #header { width:980px; height:144px; } #header-left { width:484px; height:144px; float: left; } #header-left a { background:#fff url(../images/pageElements/header-left.gif) no-repeat left top; display:block;height:144px;text-indent:-999em;text-decoration:none; } #header-right { float:right; width:496px; height: 144px; background:#fff url(../images/pageElements/header-right.gif) no-repeat right top; text-indent: -999em; } /* Fix for Opera 8 */ .clearb { clear: both; } /* Fix for Opera 8 */ #menuwrapper { /*overflow: hidden;*/ background-color: #fff; /*border-bottom: 1px solid #C0C0C0;*/ width: 100%; text-transform: uppercase; } #menuwrapper {display: block; width: 980px; height: 35px; clear: both;} /* Unless you know what you do, do not touch this */ #primary-nav, #primary-nav ul { font-family: arial, trebuchet ms, Helvetica, sans-serif; list-style: none; margin: 0px; padding: 0px;} #primary-nav { display:block; width: 980px; height: 35px; text-transform: uppercase; font-size: 1.2em; background:#313131 url(../images/pageElements/bg-nav.gif) repeat-x left top; font-weight: bold; clear: both;} #primary-nav ul { position: absolute; top: auto; display: none; text-align: left; z-index:10; } #primary-nav li { float: left;} #primary-nav a { display: block; padding: 3px 32px 2px 32px; text-decoration: none; color: #7f7f7f;} /*link colour for top level links */ #primary-nav li a { color: #fff; padding-top: 10px; padding-bottom: 9px; border-right: solid 1px #999;} #primary-nav li a:hover { color: #ccc; } #primary-nav li a, #primary-nav li.menuparent a { background-color: transparent; } /*background color for all links */ /* Set the width of the menu elements at second level. Leaving first level flexible. */ #primary-nav ul ul { margin-top: 1px; margin-left: -1px; left: 100%; top: 0px;} #primary-nav li li { font-size: 12px; width: 203px; padding: 0; margin-left: -1px; margin-top: 0px; float: none; line-height: 2em; position: relative; border-right: none;} #primary-nav li li a, #primary-nav li li a:link, #primary-nav li li a:visited { margin: 0; color: #ccc; border: 1px solid #999; border-bottom: none; background-color: #313131; padding: 5px 20px 5px 20px;} /* drop down menu */ #primary-nav li li a:hover { color: #fff; background-image: none; background-color: #636363;} /* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */ #primary-nav li.menuparent.menuactive a { color: #fff; } /* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */ #primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth { /* arrow for menuparents */ /* background-image: url(images/cms/arrow.gif); background-position: center right; background-repeat: no-repeat; */ } /* Styling the appearance of menu items on hover */ #primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh { /* background-color: #E7AB0B; */} /* The magic - set to work for up to a 3 level menu, but can be increased unlimited */ /* just add #primary-nav li:hover ul ul, #primary-nav li.menuparenth ul ul ul, for fourth level */ #primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, #primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul { display: none; } /* add #primary-nav ul ul ul li:hover ul, #primary-nav ul ul ul li.menuparenth ul,for fourth level*/ #primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, #primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul { display: block; } /* IE Hacks */ #primary-nav li li { float: left; clear: both; } #primary-nav li li a { height: 1%; } /* STYLING TOP LEVEL ITEMS AS IMAGE LINKS TEST #primary-nav { background: url('../images/pageElements/main-menu.gif'); } li#i58 { width: 116px; background-color:transparent; } li#i121 { width: 134px; background-color:transparent; } li#i122 { width: 158px; background-color:transparent; } li#i127 { width: 152px; background-color:transparent; } li#i126 { width: 105px; background-color:transparent; } li#i125 { width: 155px; background-color:transparent; } li#i129 { width: 160px; background-color:transparent; } #i158 a:hover { background: transparent url(../images/pageElements/main-menu.gif) 0 0 no-repeat; } #i121 a:hover { background: transparent url(../images/pageElements/main-menu.gif) -116px 0 no-repeat; } #i122 a:hover { background: transparent url(../images/pageElements/main-menu.gif) -250px 0 no-repeat; } #i127 a:hover { background: transparent url(../images/pageElements/main-menu.gif) -408px 0 no-repeat; } #i126 a:hover { background: transparent url(../images/pageElements/main-menu.gif) -560px 0 no-repeat; } #i125 a:hover { background: transparent url(../images/pageElements/main-menu.gif) -665px 0 no-repeat; } #i129 a:hover { background: transparent url(../images/pageElements/main-menu.gif) -825px 0 no-repeat; } li#i58 a, li#i121 a, li#i122 a, li#i127 a, li#i126 a, li#i125 a, li#i129 a { text-indent:-9000px; background-color:transparent; } END TEST /*Image for the ul and some height and width properties ul#primary-nav1 { width: 500px; height: 50px; margin:0; padding:0; background: url('../images/menu-sample.png'); position:relative; } /*We want li as block and to be as tall as image ul#primary-nav1 li { display:block; height:30px; margin: 0; padding: 0; list-style: none; position: absolute; top: 0; } /*a should also be block and 50px tall ul#primary-nav1 li a { display:block; height:30px; } /*This is the boring part, every link has to be positioned according to the image li#i58 { left: 0px; width: 100px; } li#i21 { left: 100px; width: 150px; } li#i22 { left: 250px; width: 150px; } li#i27 { left: 400px; width: 100px; } li#i26 { left: 500px; width: 100px; } li#i25 { left: 600px; width: 100px; } li#i29 { left: 700px; width: 50px; } li#i86 { left: 750px; width: 100px; } /* now we need hover state images on the links #i158 a:hover { background: transparent url(../images/menu-sample.png) 0 -50px no-repeat; } #i121 a:hover { background: transparent url(../images/menu-sample.png) -100px -50px no-repeat; } #i122 a:hover { background: transparent url(../images/menu-sample.png) -250px -50px no-repeat; } #i127 a:hover { background: transparent url(../images/menu-sample.png) -400px -50px no-repeat; } /* and for hiding the text ul#primary-nav12 li a { text-indent:-9000px; background-color:transparent; } /* END TOP LEVEL IMAGE LINKS */ div#content-textpage{display: block; clear: both; width: 980px; background: url(../images/pageElements/bg-content.gif) repeat-y 719px top; } .textpage-homepage div#content-textpage{background-image: none;} div#content-textpage:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; } #strapline {margin: 15px 0 0 0;} /* CONTENT TEXTPAGE */ #content-main { display: block; float: left; width: 648px; min-height: 595px; padding: 20px 40px 30px 40px; margin-right: 0px; /*background: url(../images/pageElements/bg-content-top.gif) repeat-x left top;*/ } * html #content-main { height: 520px; } #content-main ul{ margin-left: 30px; } #breadcrumb { font-size: 90%; height: 15px; color: #999; margin: 0 0 10px 0; border-bottom:1px dotted #000;padding:0 0 1.2em; } #breadcrumb a{ color: #666; text-decoration: none;} #breadcrumb a:hover{ color: #c30404;} #breadcrumb #breadcrumb-text {wdith: 500px; float: left;} #breadcrumb #print-page {width: 100px; float: right; text-align: right;} #content-main h2 {margin: 20px 0 20px 0;} /* HOMEPAGE */ .textpage-homepage #content-main { display: block; float: left; width: 948px; min-height: 610px; height: 610px; padding: 0 0 0 20px; margin-right: 0px; /*background: url(../images/pageElements/bg-content-top.gif) repeat-x left top;*/ } #homepage-products-row {height: 299px; margin: 10px 0 20px -5px;} #homepage-products-row #prod1, #homepage-products-row #prod2, #homepage-products-row #prod3, #homepage-products-row #prod4 {display: block; width: 237px; height: 299px; float: left; margin-right: 0;} #homepage-products-row #prod4 {margin-right: 0px;} #homepage-products-row #prod1 {background: url(../images/pageElements/bg-prod1.jpg) no-repeat 0 0;} #homepage-products-row #prod2 {background: url(../images/pageElements/bg-prod2.jpg) no-repeat 0 0;} #homepage-products-row #prod3 {background: url(../images/pageElements/bg-prod3.jpg) no-repeat 0 0;} #homepage-products-row #prod4 {background: url(../images/pageElements/bg-prod4.jpg) no-repeat 0 0;} .prod-heading {display: block; height: 17px; clear: both; padding: 20px 0 10px 20px; font-size: 1.6em;} .prod-subheading {display: block; height: 60px; clear: both; padding: 0 20px 20px 20px; line-height: 1.5em;} #homepage-products-row .prod-link a {display: block; width: 220px; height: 29px; margin: 0 0 0 8px; background: #3db5b6 url(../images/pageElements/find-out-more.gif) no-repeat 0 0; } #homepage-products-row .prod-link a:hover {background: #77cbcc url(../images/pageElements/find-out-more.gif) no-repeat 0 -31px; } #homepage-products-row #prod1 .prod-link a {width: 219px;} #homepage-products-row #prod2 .prod-link a {width: 221px;} #homepage-products-row .prod-link span {display: none;} /*#homepage-products-row #prod1 a:hover, #homepage-products-row #prod2 a:hover, #homepage-products-row #prod3 a:hover, #homepage-products-row #prod4 a:hover {background-position: 0 -220px;}*/ #homepage-bottom-row {display: block; width: 938px; height: 219px; clear: both; background-color: #ededed;} #homepage-bottom-row h4 {display: block; height: 20px; clear: both; padding: 0 20px 0 40px; color: #000; font-weight: normal; font-size: 1.5em;} #homepage-bottom-row #panel1 h4 {margin-bottom: 10px;} #homepage-bottom-row #panel2 h4 {padding-left: 3px;} #homepage-bottom-row #panel1, #homepage-bottom-row #panel2 {display: block; height: 180px; float: left; margin-top: 20px;} #homepage-bottom-row #panel3, #homepage-bottom-row #panel4 {display: block; width: 220px; height: 100px; float: left;} #homepage-bottom-row #panel1 {width: 470px; background: url(../images/pageElements/homepage-bottom-panel-divider.gif) repeat-y right 0;} #homepage-bottom-row #panel2 {width: 440px; margin-left: 15px; padding-left: 10px;} #homepage-bottom-row #panel3 {} #homepage-bottom-row #panel4 {} #homepage-bottom-row #panel1 #testimonial-logo {display: block; width: 140px; height: 50px; float: left;} #homepage-bottom-row #panel1 #testimonial-text {display: block; width: 380px; height: 50px; float: left; line-height: 1.6em; font-style: italic; padding: 0 0 0 40px; font-size: 1.2em;} #homepage-bottom-row #panel1 #testimonial-author { display: block; clear: bold; font-weight: bold; font-style: normal; margin-top: 5px; } #mailing-list-home form, #callback-home form { padding-left: 3px;} #mailing-list-home .nms_message {display: block; font-size:1em; padding: 0; margin-top: -5px;} #callback-home input, #mailing-list-home input {margin: 0 0 0 0; font-family: Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.5em; } #callback-home .required input, #mailing-list-home .required input {width: 165px; height: 19px; margin: 0; padding: 0 0 0 3px; margin-bottom: 2px; padding-top: 1px; } #callback-home div.required, #mailing-list-home div.required {width: 175px; float: left; } #callback-home div.submit, #mailing-list-home div.submit{width: 20px; height: 18px; float: left;} #mailing-list-home span.mailing-list-label {display: block; padding: 0 0 12px 3px;} #homepage-bottom-row #panel-support {display: block; width: 440px; height: 75px; float: left; background: url(../images/pageElements/homepage-support.gif) no-repeat 0 0px;} #homepage-bottom-row #panel-support span { display: none; } /* RIGHT PANEL */ #right-panel { display: block; float: left; width: 232px; min-height: 400px; background: url(../images/pageElements/bg-right.gif) repeat-y left top; margin: 0; padding: 0 0 0 15px;} *html #right-panel { height: 730px; } #right-panel div{ } #next-steps {margin: 15px 0 0 12px;} /*#next-steps div a { display: block; width: 192px; height: 42px; margin: 0px 0 0px -3px;} #next-steps #view-demo{ display: block; padding: 10px 0 10px 0; } #next-steps #view-demo a{ background: url(../images/pageElements/nav-right-view-demo.gif) no-repeat 0 0px;} #next-steps #view-demo a:hover{ background: url(../images/pageElements/nav-right-view-demo.gif) no-repeat 0 -44px;} #next-steps span { display: none;}*/ #callback, #brochure-req { width: 200px; overflow: hidden; } #brochure-req { margin: 10px 0 0 6px; height: 100px; border-bottom: solid 1px #fff; } #callback { margin-left: 6px; height: 120px; border-top: solid 1px #ccc; } *html #brochure-req { height: 130px; } *html #callback { height: 150px; } #callback h4, #brochure-req h4 { display: block; width: 180px; height: 22px; margin: 10px 0 10px 0; color: #000; font-weight: normal; font-size: 1.5em; } /*#callback h4 { background: url(../images/pageElements/title-callback.gif) no-repeat 12px 0;} #mailing-list h4 { background: url(../images/pageElements/title-mailing-list.gif) no-repeat 12px 0;} #callback h4 span, #mailing-list h4 span { display: none;} */ #brochure-req span.mailing-list-label {display: block; padding: 0 0 5px 2px;} #callback #form-padding, #brochure-req #form-padding, #callback .form-padding, #brochure-req .form-padding {margin: 0 15px 0 0; width: 190px; font-size: 1em; } #callback #form-padding div, #brochure-req #form-padding div, #callback .form-padding div, #brochure-req .form-padding div {font-size: 1em; } #callback .smalltext, #brochure-req #form-padding .smalltext {display: block; margin: 0 0 0 0; font-size: .9em; } #callback div.error_message { display: none;} #brochure-req .nms_message {display: block; font-size:1em; padding: 0; margin-top: -5px;} #callback input, #brochure-req input {margin: 0 0 0 0; font-family: Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.5em; } #callback .required input, #brochure-req .required input {width: 155px; height: 19px; margin: 0; padding: 0 0 0 3px; margin-bottom: 2px; padding-top: 1px; } #callback div.required, #brochure-req div.required {width: 170px; float: left; } .brochure-req-label { display: block; font-size: .9em; padding: 0 0 0 0; margin-top: -3px; margin-bottom: 3px;} #callback div.submit, #brochure-req div.submit {width: 20px; float: left;} #right-panel-support {display: block; width: 214px; height: 90px; background: url(../images/pageElements/right-panel-support.gif) no-repeat 0 0px; margin-bottom: 20px;} #right-panel-support span { display: none; } #testimonials {dislay: block; width: 216px; height: 267px; background: url(../images/pageElements/bg-testimonials.gif) no-repeat 0 0px;} #testimonials h4{ display: block; width: 175px; color: #000; font-weight: normal; font-size: 1.5em; margin: 0 0 0 20px; padding: 13px 0 10px 0; border-bottom: solid 1px #ccc;} #testimonial-animation { padding: 10px 0 0 10px;} /* NEWS */ .NewsSummaryLink{font-weight:700;padding-top:0.2em;font-size: 1.2em;} .NewsSummaryCategory{font-style:italic;margin:5px 0;} .NewsSummaryAuthor{font-style:italic;padding-bottom:0.5em;} .NewsSummarySummary,.NewsSummaryContent{line-height:140%;} .NewsSummaryMorelink{padding-top:0.5em;} .NewsSummaryPostdate, #NewsPostDetailDate{font-size:90%;margin:5px 0 10px 0;font-style: italic;} #NewsPostDetailSummary{line-height:150%; } #NewsPostDetailCategory{font-style:italic;margin-top:0.5em;padding:0.2em 0;} #NewsPostDetailContent{margin-bottom:15px;line-height:150%;} #NewsPostDetailAuthor{padding-bottom:1.5em;font-style:italic;} #NewsPostDetailTitle { display: block; font-size: 1.4em; } /* FOOTER */ div#footer-wrapper{display: block; clear: both; width:1012px; height: 100px; text-align: center; margin: 0 auto; padding: 0;background: #e5e6e7 url(../images/pageElements/bg-footer-wrapper.gif) no-repeat center top; font-size: 1em;} div#footer{margin: 0 auto; width: 982px; height: 70px; color:#01685f; background: #fff url(../images/pageElements/bg-footer.gif) repeat-x center top;} div#footer #footer-address {display: block; width: 100%; height: 47px; float: left; text-align: center;} div#footer #footer-address p{ margin: 15px 30px 0 30px;} div#footer #footer-address p a{color:#469394;} div#footer #footer-address p a:hover { color: #60c4c5; text-decoration: none; } div#footer #footer-logo {display: block; width: 200px; height: 47px; float: right; } div#footer #footer-logo img {margin: 10px 40px 0 0;} #copyright {display: block; width: 980px; height: 30px; text-align: right; margin-top: 8px; padding-right: 20px; color: #333; font-size: .9em; } #copyright a {color: #333; text-decoration: none;} #copyright #copyright-text {display: block; padding-top: 3px; } #copyright #copyright-text, #copyright #copyright-img {float: right; } /* as we hid all hr for accessibility we create new hr with extra div element */ div.hr{height:1px;border-bottom:1px dotted #000;margin:1em;padding:1em;} /* relational links under content */ div.left49{width:49%;} div.right49{float:right;width:49%;text-align:right;}