@charset "utf-8"; * { padding: 0; margin: 0; } a { outline: 0; text-decoration: none; color: #F60; } a:hover { color: #F60; text-decoration: none; } hr { visibility: hidden; height: 0; border: none; padding: 0; margin: 0; display: none;} body, html { color: #fff; font-family: Arial, Helvetica, sans-serif; background-color: #000; text-align: center; height: 100%; } body { font-size: 70%; } p { padding: 7px 0 7px 0;} h1, h2, h3, h4, h5 { font-weight: bold; padding-bottom: 5px; } h1 { font-size: 2em; } h2 { font-size: 1.4em; } h3 { font-size: 1.3em; } h1 a, #header h2 { color: #fff; } .clear { clear: both; } .clickable { cursor: pointer; } .nonClickable { cursor: default;} .upper { font-size: 60%; font-weight: normal; margin-right: 2px; } #mainContainer {width: 760px; width: 973px; margin: 0 auto; min-height: 600px; background: url(page_skin/middle_bg.jpg) repeat-y top center; text-align: left; } * html #mainContainer { height: 600px; } #header { height: 82px; background: url(page_skin/top_bg.jpg) no-repeat top center; position: relative; } .outer { margin-top: 50px; margin: 0px; padding-left: 165px; padding-left: 157px; } * html .outer {} .inner { width: 595px; width: 816px; } * html .inner { width: 100%; } .float-wrap { float: left; width: 760px; width: 973px; margin-left: -165px; margin-left: -157px; } * html .float-wrap {} #content { float: right; width: 400px; width: 816px; position: relative; } * html #content { position: relative; } .contentWrap { padding: 5px; padding: 0px; } #left { float: left; width: 157px; background: url(page_skin/left_main_bg.jpg) no-repeat top center; min-height: 400px; padding: 5px; padding: 0px; margin: 0; } * html #left { position: relative; height: 400px; } #left ul { list-style: none; padding-bottom: 4px; } #left li { padding-bottom: 2px; } #footer { width: 973px; margin: 0 auto; text-align: center; background: url(page_skin/footer_bg.jpg) no-repeat top center; height: 36px; line-height:36px; min-height: 36px; display: block; position: relative; } /*Nav Left*/ #navContainer { position: relative; left: 0px; top: 0px; background: url(page_skin/left_top_bg.jpg) no-repeat; background-position:top center; height: 181px; width: 157px; } #mainNav { position: relative; top: 40px; left: 0px; list-style: none; padding: 0; margin: 0px; } #mainNav li { line-height: 29px; height: 29px; display:block; padding: 0; margin: 0; } #mainNav li a { font-size: 0; line-height: 29px; height: 29px; display:block; text-align: left; text-indent: -9999px; } #mainNav a#about { background: url(page_button/nav/about.jpg) no-repeat left; } #mainNav a#about:hover, #mainNav a#about.selected { background-position: top right; } #mainNav a#careers { background: url(page_button/nav/careers.jpg) no-repeat top left; } #mainNav a#careers:hover, #mainNav a#careers.selected { background-position: top right; } #mainNav a#contacts { background: url(page_button/nav/contact.jpg) no-repeat top left; } #mainNav a#contacts:hover, #mainNav a#contacts.selected { background-position: top right; } #mainNav a#home { background: url(page_button/nav/home.jpg) no-repeat top left; } #mainNav a#home:hover, #mainNav a#home.selected { background-position: top right; } #mainNav a#product { background: url(page_button/nav/product.jpg) no-repeat top left; } #mainNav a#product:hover, #mainNav a#product.selected { background-position: top right; } #mainNav a#news { background: url(page_button/nav/news.jpg) no-repeat top left; } #mainNav a#news:hover, #mainNav a#news.selected { background-position: top right; } #mainNav a#login { background: url(page_button/nav/login.jpg) no-repeat top left; } #mainNav a#login:hover, #mainNav a#login.selected { background-position: top right; } #mainNav a#solution { background: url(page_button/nav/solution.jpg) no-repeat top left; } #mainNav a#solution:hover, #mainNav a#solution.selected { background-position: top right; } #mainNav a#support { background: url(page_button/nav/support.jpg) no-repeat top left; } #mainNav a#support:hover, #mainNav a#support.selected { background-position: top right; } #mainNav a#casestudy { background: url(page_button/nav/casestudy.jpg) no-repeat top left; } #mainNav a#casestudy:hover, #mainNav a#casestudy.selected { background-position: top right; } #mainNav a#usrreg { background: url(page_button/nav/usrreg.jpg) no-repeat top left; } #mainNav a#usrreg:hover, #mainNav a#usrreg.selected { background-position: top right; } /*Nav bottom*/ #navContainer2 { position: absolute; left: 0px; background: url(page_skin/left_bottom_bg.jpg) no-repeat; background-position:bottom; height: 181px; width: 157px; top: -181px; } #mainNav2 { padding: 0px; margin: 0px; list-style: none; position: absolute; top: 128px; left: 13px; width: 134px; } #mainNav2 li { line-height: 22px; height: 22px; display:block; padding: 0; margin: 0; background: #000; margin-bottom: 5px; } #mainNav2 li a { font-size: 0; line-height: 22px; height: 22px; display:block; text-align: left; text-indent: -9999px; width: 100%; } #mainNav2 a#privacy { background: url(page_button/nav/privacy.jpg) no-repeat top right; } #mainNav2 a#privacy:hover, #mainNav2 a#privacy.selected { background-position: top left; } #mainNav2 a#disclaimer { background: url(page_button/nav/disclaimer.jpg) no-repeat top right; } #mainNav2 a#disclaimer:hover, #mainNav2 a#disclaimer.selected { background-position: top left; } /*Language*/ #header #langSelection { position: absolute; top: 42px; right: 16px; height: 19px; background: #000; padding: 0px; margin: 0px; list-style: none; } #langSelection li { display:block; float: left; line-height: 19px; height: 19px; width: 25px; padding: 0; margin: 0; } #langSelection a { width: 25px; font-size: 0; line-height: 19px; height: 19px; display: block; text-align: left; text-indent: -9999px; } #langSelection a#en { background: url(page_button/lang/en.jpg) no-repeat top right; } #langSelection a#en:hover { background-position: top left; } #langSelection a#tc { background: url(page_button/lang/tc.jpg) no-repeat top right; } #langSelection a#tc:hover { background-position: top left; } #langSelection a#sc { background: url(page_button/lang/sc.jpg) no-repeat top right; } #langSelection a#sc:hover { background-position: top left; } #header h1#logo { position: absolute; top: 13px; left: 37px; width: 147px; height: 46px; background:url(/_img/logo/rodsumLogo.jpg) no-repeat top left; font-size: 0; display:block; text-align: left; text-indent: -9999px; } #header div.effect { background:url(page_skin/lightEffect.gif) no-repeat top left; height: 82px; width: 28px; position: absolute; top: 0px; left: 400px; } #content #pageTitle { background: url(page_skin/right_top_title_bg.jpg) no-repeat top left; height: 30px; line-height: 30px; display: block; position: relative; } #pageTitle h3 { margin: 0; padding: 0; font-size: 0; line-height: 28px; height: 28px; display:block; text-align: left; text-indent: -9999px; } #pageTitle h3.home { background: url(page_title/welcome.jpg) no-repeat top left; } #pageTitle h3.about { background: url(page_title/aboutus.jpg) no-repeat top left; } #pageTitle h3.product { background: url(page_title/product.jpg) no-repeat top left; } #pageTitle h3.solution { background: url(page_title/solution.jpg) no-repeat top left; } #pageTitle h3.news { background: url(page_title/news.jpg) no-repeat top left; } #pageTitle h3.support { background: url(page_title/support.jpg) no-repeat top left; } #pageTitle h3.contacts { background: url(page_title/contactus.jpg) no-repeat top left; } #pageTitle h3.careers { background: url(page_title/careers.jpg) no-repeat top left; } #pageTitle h3.login { background: url(page_title/login.jpg) no-repeat top left; } #pageTitle h3.privacy { background: url(page_title/privacy.jpg) no-repeat top left; } #pageTitle h3.casestudy { background: url(page_title/casestudy.jpg) no-repeat top left; } #pageTitle h3.disclaimer { background: url(page_title/disclaimers.jpg) no-repeat top left; } #loader { min-height: 300px; padding: 0px; margin-left: 5px; margin-right: 15px; position: relative; top: 0px; background: url(page_skin/content_bg.jpg) no-repeat top left; padding-top: 15px; } * html #loader { height: 300px; } #loader #siteBanner { position: relative; height: 185px; width: 795px; background: url(page_skin/banner_bg.jpg) no-repeat top left; margin: 0; padding: 0; top: 0px; } #loader div.sep { border-bottom: 1px solid #333 ; height: 4px; line-height: 4px; padding:0; margin: 0; margin-bottom: 5px; } #siteBanner img { position: absolute; top: 5px; left: 7px; } #content #loading { height: 25px; width: 100px; text-align: left; line-height: 25px; display: none; font-size: 90%; position: absolute; top: 150px; left: 50%; color: #CCC; margin: 0 auto; margin-left: -50px; padding-left: 30px; background: url(page_icon/loading_1.gif) no-repeat top left; } /* Sub Nav */ #loader #subNavContainer { margin-top: 7px; height: 45px; line-height: 45px; background: url(page_skin/tab_bg.jpg) repeat-x bottom; } #subNavContainer #subNav { padding: 0; margin: 0; list-style: none; } #subNav li { float: left; height: 28px; line-height: 28px; width: 112px; padding: 0; margin: 0; text-align: left; display: block; } #subNav a { width: 112px; font-size: 0; color: #fff; text-decoration: none;line-height: 28px; height: 28px; text-align: left; text-indent: -9999px; display: block; } #subNav a#profile { background: url(page_button/tab/profile.gif) no-repeat top right; } #subNav a#profile:hover, #subNav a#profile.selected { background-position: top left; } #subNav a#milestone { background: url(page_button/tab/milestone.gif) no-repeat top right; } #subNav a#milestone:hover, #subNav a#milestone.selected { background-position: top left; } #subNav a#arotrak { background: url(page_button/tab/arotrack.gif) no-repeat top right; } #subNav a#arotrak:hover, #subNav a#arotrak.selected { background-position: top left; } #subNav a#arocator { background: url(page_button/tab/arocator.gif) no-repeat top right; } #subNav a#arocator:hover, #subNav a#arocator.selected { background-position: top left; } #subNav a#aropet { background: url(page_button/tab/aropet.gif) no-repeat top right; } #subNav a#aropet:hover, #subNav a#aropet.selected { background-position: top left; } #subNav a#arocoSenser { background: url(page_button/tab/senser.gif) no-repeat top right; } #subNav a#arocoSenser:hover, #subNav a#arocoSenser.selected { background-position: top left; } #subNav a#arofinder { background: url(page_button/tab/arofinder.gif) no-repeat top right; } #subNav a#arofinder:hover, #subNav a#arofinder.selected { background-position: top left; } #subNav a#faq { background: url(page_button/tab/faq.gif) no-repeat top right; } #subNav a#faq:hover, #subNav a#faq.selected { background-position: top left; } #subNav a#download { background: url(page_button/tab/download.gif) no-repeat top right; } #subNav a#download:hover, #subNav a#download.selected { background-position: top left; } #subNav a#inquire { background: url(page_button/tab/inquire.gif) no-repeat top right; } #subNav a#inquire:hover, #subNav a#inquire.selected { background-position: top left; } #subNav a#contact { background: url(page_button/tab/contact.gif) no-repeat top right; } #subNav a#contact:hover, #subNav a#contact.selected { background-position: top left; } #subNav a#weblogin { background: url(page_button/tab/weblogin.gif) no-repeat top right; } #subNav a#weblogin:hover, #subNav a#weblogin.selected { background-position: top left; } #mainNav a#about.selected, #mainNav a#news.selected, #mainNav a#careers.selected,#mainNav a#product.selected, #mainNav a#contacts.selected, #mainNav a#home.selected, #mainNav a#support.selected, #mainNav a#solution.selected, #mainNav a#login.selected, #mainNav2 a#privacy.selected, #mainNav2 a#disclaimer.selected, #subNav a#weblogin.selected, #subNav a#contact.selected, #subNav a#inquire.selected, #subNav a#download.selected, #subNav a#faq.selected, #subNav a#arofinder.selected, #subNav a#aropet.selected, #subNav a#arotrak.selected, #subNav a#arocator.selected, #subNav a#profile.selected, #subNav a#milestone.selected { cursor: default; } #footer p { font-size: 0; line-height: 36px; height: 36px; display:block; text-align: left; text-indent: -9999px; } #pageContent, #subPageContent { padding: 10px; } #pageContent div.entry, #subPageContent div.entry { margin-top:10px; margin-bottom:10px; } #pageContent div.entryContent, #subPageContent div.entryContent { position: relative; } #pageContent h3.heading, #subPageContent h3.heading { font-size: 14px; color: #FF3300; font-weight: bold; margin-bottom: 10px; } #pageContent h3.solgan, #subPageContent h3.solgan { font-size: 13px; color: #F90; font-weight: normal; margin-bottom: 10px; } #pageContent h3.section, #subPageContent h3.section { font-size: 14px; color: #FF3300; font-weight: bold; border-bottom: 1px solid #333; padding: 0; margin: 0; margin-bottom: 0px; padding-bottom: 2px; } #pageContent div.entry div.questions, #subPageContent div.entry div.questions { padding: 10px; } #pageContent h5.question, #subPageContent h5.question { padding: 0; margin: 0; font-size: 12px; color: #FF6600; font-weight: bold; margin-bottom: 3px; margin-top: 15px; } #pageContent h5.positionTitle, #subPageContent h5.positionTitle { padding: 0; margin: 0; font-size: 115%; color: #FF6600; font-weight: bold; margin-bottom: 10px; margin-top: 15px; } #pageContent h5.loginSection, #subPageContent h5.loginSection { padding: 0; margin: 0; font-size: 110%; color: #FF6600; font-weight: bold; margin-bottom: 10px; margin-top: 15px; } #pageContent p, #subPageContent p { padding: 0px; margin: 0px; font-size: 100%; color: #FFFFFF; margin-bottom: 15px; font-style: normal; font-weight: normal; letter-spacing: 1px; line-height: 125%; } #pageContent ul, #subPageContent ul { padding: 0px; margin: 0px; list-style: none; margin-bottom: 15px; } #pageContent ul.pts, #subPageContent ul.pts { padding: 2px; margin: 20px; list-style: circle; } #pageContent ul.num, #subPageContent ul.num { padding: 2px; margin: 20px; list-style: decimal; } #pageContent ul li, #subPageContent ul li { padding-bottom: 5px; } #pageContent span.comingSoon, #subPageContent span.comingSoon { line-height: 40px; height: 40px; font-size: 100%; font-style: italic; color: #FF6600; } #loader ul.shortcut, #subLoader ul.shortcut { padding: 0; margin: 0; list-style: none; margin: 10px; display: inline-block; } #loader ul.shortcut li, #subLoader ul.shortcut li { font-size: 110%; color: #FFF; font-weight: bold; line-height: 115%; margin-bottom: 5px; width: 250px; min-width: 250px; } #loader ul.shortcut li.scHover, #subLoader ul.shortcut li.scHover { color: #F00; } #loader ul.shortcut li.selected, #subLoader ul.shortcut li.selected { color: #F30; } /* Home */ h5.home_heading, h5.home_heading { padding: 0; margin: 0; font-weight: bold; color: #F60; font-size: 120%; } ul#home_overview { list-style: none; padding: 0; margin: 0; margin-top: 10px; margin-bottom: 10px; } ul#home_overview li { float: left; display: inline-block; height:140px; width: 210px; margin: 5px; padding-left: 171px; line-height: 12px; } ul#home_overview p { width: 191px; font-style: normal; font-weight: normal; letter-spacing: 1px; color: #999; } ul#home_overview a { color: #F30; text-decoration: none; } ul#home_overview a:hover { color: #F60; } ul#home_overview li.personalcare { background-image: url(page_img/personal.gif); background-repeat: no-repeat; } ul#home_overview li.petlove { background-image: url(page_img/icon_petlove.gif); background-repeat: no-repeat; } ul#home_overview li.arocoSenser { background-image: url(page_img/arocoSenser.gif); background-repeat: no-repeat; } ul#home_overview li.showcase { background-image: url(page_img/icon_showcase.gif); background-repeat: no-repeat; } ul#home_overview li.avl { background-image: url(page_img/tracker.gif); background-repeat: no-repeat; } ul#home_overview li.care4u { background-image: url(page_img/arofinder.gif); background-repeat: no-repeat; } /* Short News*/ div#shortNews { float: left; border: 1px solid #333; width: 530px; padding: 5px; margin-bottom: 15px; } div#shortNews div.newsEntry { margin-top: 10px; padding-left: 15px; } div#shortNews div.newsEntry h5.newsDate { font-size: 100%; } div#shortNews div.newsEntry h3 { padding: 0; margin: 0; font-size: 110%; margin-bottom: 10px; } div#shortNews span.more { text-align: right; display: inline-block; padding: 5px; cursor: pointer; color: #999; } div#shortNews span.hover { color:#F90; text-decoration: underline; } /* Contact Info */ div#contactInfo { padding: 5px; float: left; width: 200px; padding-left: 25px; } div#contactInfo.contactPage { padding: 0; margin: 0; width: 550px; padding-left: 200px; height: 150px; padding-top: 5px; } div#contactInfo.tst { background:url(OfficeLocation/pic_hk.jpg) top left no-repeat; } div#contactInfo.sciencePark { background:url(OfficeLocation/pic_science.jpg) top left no-repeat; } div#contactInfo dl { margin-top: 5px; padding-bottom: 15px; } div#contactInfo dd { margin: 0px; padding: 0px; margin-left: 55px; } div#contactInfo dt { color: #909090; } div#contactInfo dl dt { margin: 0px; padding: 0px; float: left; clear: left; width: 55px; } div#contactInfo a { text-decoration: none; color: #FFF; } div#contactInfo a:hover { text-decoration: underline; } /* Product*/ #pageContent h3.productHeading, #subPageContent h3.productHeading { font-size: 110%; color: #F60; font-weight: bold; line-height: 20px; height:20px; border: 1px solid #666; padding: 0; margin: 0; margin-bottom: 15px; margin-top: 30px; text-indent: 10px; background:#333; } a.dl_leaflet { background:url(page_icon/leafletDL.gif) top right no-repeat; height: 18px; width: 135px; display: block; margin-left: 15px; font-size: 0px; text-indent: -9999px; } a.dl_leaflet:hover { background:url(page_icon/leafletDL.gif) top left no-repeat; height: 18px; width: 135px; display: block; margin-left: 15px; } span.dl_leaflet_nonActive { background:url(page_icon/leafletDLnonActive.gif) top right no-repeat; height: 18px; width: 135px; display: block; margin-left: 15px; font-size: 0px; text-indent: -9999px; cursor: default; } .productImg { margin-bottom: 5px; } /* Download */ table.userDownload { width: 100%; text-align: left; } table.userDownload thead tr { line-height: 20px; background: #F60; text-indent: 10px; color: #000; } table.userDownload tbody td { line-height: 20px; text-indent: 10px; color: #fff; font-weight: bold; } table.userDownload img { border: 0; line-height: 20px; vertical-align: middle; } table.userDownload a, table.userDownload a:hover { color: #909090; text-decoration: none; } table.userDownload span { line-height: 20px; font-size: 90%; font-weight: normal; display: inline-block; text-align: right; color: #909090; } .odd { background: #333; } .even { background: #222; } /*Login Form & Inquire Form*/ #logForm, #inqForm {} #logForm div#description, #inqForm div#description { height: 20px; line-height: 20px; margin: 10px; margin-bottom: 15px; color: #F66; } #logForm fieldset, #inqForm fieldset { border: 0 solid; } #logForm dl, #inqForm dl { margin-bottom: 10px; line-height: 20px; } #logForm dl dt, #inqForm dl dt { display: block; float: left; clear: left; width: 125px; padding: 4x 10px 0 0; font-size: 95%; text-align: right; margin-right: 10px; line-height: 20px; } #logForm dl dd input, #inqForm dl dd input { width: 200px; } #logForm dl dd input.button, #inqForm dl dd input.button { border: 1px solid #666; background: #333; color: #909090; line-height: 20px; cursor: pointer; } #logForm.userInfo dl dt { text-align: left; width: 80px; margin-left: 10px; } h3 span.logout a { color: #909090; margin:0 5px; font-size: 90%; } h3 span.logout a:hover { color: #FFF; text-decoration: underline; } h5.inquirySent { font-size: 110%; color: #F60; margin-left: 10px; margin-top: 20px; } #pageContent.login { } #pageContent.login a:hover { text-decoration: underline; } /* Milestone */ #subPageContent.milestone { background: url(page_bg/milestone_bg.jpg) bottom right no-repeat; min-height: 750px; position: relative; } * html #subPageContent.milestone { height: 750px; } h5.milestoneHeading { position: absolute; top: 0; left: 0; background: url(page_bg/milestone_heading.gif) top left no-repeat; height: 100px; width: 200px; line-height: 100px; font-size: 0; text-indent: -9999px; } ul#milestone { position: relative; top: 120px; left: 0px; margin: 0 auto; width: 600px; } ul#milestone li { font-size: 110%; font-weight: bold; line-height: 20px; padding-left: 100px; margin-top: 15px; margin-bottom: 15px; } ul#milestone li.list_odd { color: #F63; } ul#milestone li.list_even { color: #FFF; } /* News */ ul#news_main { padding: 0px; margin-left: 0px; } ul#news_main li { border-bottom: 1px solid #333; margin-bottom: 15px; } ul#news_main div.newsEntry { margin: 15px; padding-left: 10px; } ul#news_main h5.newsDate { font-size: 110%; color: #909090; height: 20px; line-height: 20px; padding: 0; margin: 0; background: url(page_icon/newsIco.gif) top left no-repeat; padding-left: 25px; } ul#news_main div.newsEntry h3 { font-size: 110%; height: 25px; line-height: 25px; padding: 0; margin: 0; color: #F60; } ul#news_main div.newsEntry p { margin-top: 10px; line-height: 15px; } ul#news_main div.newsEntry span { margin-top: 15px; line-height: 20px; height: 20px; } ul#news_main h5.newsItm { display: block; line-height: 25px; height: 25px; } ul#news_main div.newsEntry div.eventImg { padding: 0; margin: 5px 0; } ul#news_main div.newsEntry div.eventImg img { border: 2px solid #fff; margin: 5px; } /* News Shortcut */ ul#news_shortcut { padding: 0; margin: 0; padding-left: 0px; margin-left: 15px; list-style: decimal; } ul#news_shortcut li { padding: 0px; margin: 0px; margin-left: 10px; line-height: 125%; } /*Case Study*/ #pageContent.caseStudy div.floatLeft { float: left; margin-right: 20px; margin-bottom: 5px; } #pageContent.caseStudy div.floatRight { float: right; margin-left: 20px; margin-bottom: 5px; } #pageContent.caseStudy div.clear { padding: 0; margin: 0; height:0; line-height: 0; padding-bottom: 15px; } #pageContent.caseStudy span.imgCaption { color: #909090; display: block; text-indent: 5px; margin-top: 2px; } #pageContent.caseStudy img { padding: 0; margin: 0; border: 1px solid #333; padding: 1px;} #pageContent.caseStudy p { text-indent: 15px; margin-bottom: 15px; line-height:17px;} /*Product- AroFinder*/ #pageContent.arofinder h5.subTitle { line-height: 20px; height: 20px; display: block; color:#F60; font-size: 110%; margin-bottom: 10px;} #pageContent.arofinder div.floatLeft { float: left; margin-right: 20px; margin-bottom: 5px; } #pageContent.arofinder div.floatRight { float: right; margin-left: 20px; margin-bottom: 5px; } #pageContent.arofinder div.clear { padding: 0; margin: 0; height:0; line-height: 0; padding-bottom: 15px; } #pageContent.arofinder span.imgCaption { color: #909090; display: block; text-indent: 5px; margin-top: 2px; } #pageContent.arofinder img { padding: 0; margin: 0; border: 1px solid #333; padding: 1px;} #pageContent.arofinder img.noborder { border: 0px;} #pageContent.arofinder p { text-indent: 15px; margin-bottom: 15px; line-height:17px;} #mAccount { position: absolute; top: 4px; right: 0; color: #909090; }