/** * www.dx3.net main stylesheet * * @package www.dx3.net * @subpackage style * @author Dave Redfern * @copyright DX3 Technologies Ltd. * @version 0.1 */ /** * Global style declarations */ html,body { margin: 0px; padding: 0px; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 13px; color: #fff; } html { height: 100%; margin-bottom: 1px; } body { height: 100%; background: #433D37 url(/theme/dx3/images/bgFade.png) repeat-y top center; } h1, h2, h3, h4, h5, h6 { margin: 0px; padding: 0px; color: #FFF; font-weight: bold; } img { border: 0px; } a { color: #FF7A00; font-weight: bold; text-decoration: none; } a:hover { color: #999; text-decoration: underline; } .clear { clear: both; } .hidden { visibility: hidden; display: none; } .centre { text-align: center; } .left { text-align: left; } .right { text-align: right; } .error { color:red } .orange { color: #FF7A00; } p { text-align: justify; } div#content ul.background { list-style-type: none; } div#content ul.background li { display: block; padding-left: 25px; padding-bottom: 3px; background: url(/theme/dx3/images/bullet.png) no-repeat top left; margin-bottom: 5px; } /** * Positioning */ div#headerContainer { height: 165px; } div#header { width: 990px; height: 165px; margin-left: auto; margin-right: auto; text-align: center; background: url(/theme/dx3/images/headerBg.png) no-repeat 0 0; } h1#dx3Logo { display: block; float: right; width: 152px; height: 66px; margin-right: 14px; margin-top: 73px; background: url(/theme/dx3/images/logo.png) no-repeat; } h1#dx3Logo span { display: none; } div.title { width: 700px; height: 30px; float: left; margin-left: 7px; margin-top: 120px; text-align: left; } html>body div.title { margin-left: 14px; } div#bodyContainer { } div#body { min-height: 500px; height:auto !important; height:500px; width: 990px; margin-left: auto; margin-right: auto; text-align: center; border-top: 0px; } div#menuContainer { float: left; width: 165px; padding-left: 16px; text-align: left; } div#content { width: 560px; float: left; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: left; } div#jobsContent, div#newsContent { width: 800px; float: left; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: left; } div#podContainer { padding-left: 0px; width: 232px; float: right; margin-right: 2px; } html>body div#podContainer { padding-left: 5px; width: 236px; float: right; margin-right: 0px; } /** * Titles * * Image replacement on the title to maintain the font, yet keep the text searchable */ div.title p { display: none; } div#titleHome { background: url(/theme/dx3/images/titles/titlePuttingDigital.png) no-repeat; } div#titleAbout { background: url(/theme/dx3/images/titles/titleAboutUs.png) no-repeat; } div#titleViewpoints { background: url(/theme/dx3/images/titles/titleViewpoints.png) no-repeat; } div#titleTechnology { background: url(/theme/dx3/images/titles/titleTechnology.png) no-repeat; } div#titleClients { background: url(/theme/dx3/images/titles/titleClients.png) no-repeat; } div#titleContact { background: url(/theme/dx3/images/titles/titleContact.png) no-repeat; } div#titleJoinUs { background: url(/theme/dx3/images/titles/titleJoinUs.png) no-repeat; } div#titleWhatWeDo { background: url(/theme/dx3/images/titles/titleWhatWeDo.png) no-repeat; } div#titleOurWork { background: url(/theme/dx3/images/titles/titleOurWork.png) no-repeat; } div#titleUsePowerOfDigital { background: url(/theme/dx3/images/titles/titleUsePowerOfDigital.png) no-repeat; } div#titleDigitalServiceProvider { background: url(/theme/dx3/images/titles/titleDigitalServicesProvision.png) no-repeat; } div#titleMarketingWithDigitalContent { background: url(/theme/dx3/images/titles/titleMarketingWithDigitalContent.png) no-repeat; } div#titleNews { background: url(/theme/dx3/images/titles/titleNews.png) no-repeat; } /** * Main content area */ div#content h2 { font-size: 20px; margin: 0px; } div#content h3 { font-size: 18px; } div#content dl {} div#content dl dt { display: block; height: 18px; line-height: 18px; padding-left: 20px; background: url(/theme/dx3/images/bullet.png) no-repeat left; font-weight: bold; font-size: 18px; color: #fff; } div#content dl dd { padding-left: 20px; margin: 0px; margin-bottom: 5px; } div#content dl dd p { margin: 0px; } div#newsContent div.whiteBox div.whiteBoxBody h3 { color: #999; font-size: 14px; font-weight: bold; padding-left: 10px; } div#content div.whiteBox, div#newsContent div.whiteBox { margin-top: 5px; } div#content div.whiteBox p,div#newsContent div.whiteBox p { padding-left: 10px; } div#content div.whiteBox div.whiteBoxBody, div#newsContent div.whiteBox div.whiteBoxBody { color: #000; background-color: #fff; } div#content div.whiteBox div.whiteBoxHeader, div#newsContent div.whiteBox div.whiteBoxHeader { display: block; background: url(/theme/dx3/images/whiteBgHeader.png) no-repeat top right; height: 15px; } div#content div.whiteBox div.whiteBoxFooter, div#newsContent div.whiteBox div.whiteBoxFooter { display: block; background: url(/theme/dx3/images/whiteBgFooter.png) no-repeat; height: 15px; } div#content div.whiteBox div.whiteBoxBody dl { margin: 0px; padding: 5px 0px 5px 10px; } div#content div.whiteBox div.whiteBoxBody dl dt { margin: 0px; background: url(/theme/dx3/images/bulletOrange.png) no-repeat; color: #FF7A00; } div#content ul.clientsPartners { margin: 0px; padding: 0px; list-style-type: none; } div#content ul.clientsPartners li { display: block; float: left; margin: 5px; margin-right: 15px; padding: 0px; background: none; } div#content ul.clientsPartners li img { height: 70px; border: 0px; } div#content div.viewpointHeader dl dt { font-size: 16px; padding-left: 0px; background: none; } div#content div.viewpointHeader dl dd { font-size: 14px; padding-left: 0px; background: none; } div#content div.banner { width: 560px; height: 170px; border: 0px; padding: 0px; margin: 0px; } div#content div.banner img { width: 560px; height: 170px; border: 0px; padding: 0px; margin: 0px; } div#jobsContent div.banner, div#newsContent div.banner { width: 800px; height: 170px; border: 0px; padding: 0px; margin: 0px; } div#jobsContent div.banner img, div#newsContent div.banner img { width: 800px; height: 170px; border: 0px; padding: 0px; margin: 0px; } div#newsContent div.whiteBox div.whiteBoxBody h4 { margin-left: 10px; margin-right: 10px; padding-top: 0px; margin-bottom: 5px; color: #FF7A00; font-weight: bold; border-bottom: 1px solid #000; } /** * Menu * * We use image replacement to maintain the font on the menu items */ ul.menu { list-style-type: none; text-align: left; margin: 0; padding: 0; } ul.menu a.menuItem { display: block; margin: 0px; padding: 0px; width: 153px; height: 20px; margin-bottom: 6px; } ul.menu li.menuItem { display: block; margin: 0px; padding: 0px; width: 153px; height: 20px; margin-bottom: 6px; } ul.menu a.menuItem { text-decoration: none; } ul.menu a.menuItem span { display: none; } ul.menu li.menuItem a { display: none; } ul.menu a.menuHome { background: url(/theme/dx3/images/menu/menuHome.png) no-repeat; } ul.menu a.menuAbout { background: url(/theme/dx3/images/menu/menuAboutUs.png) no-repeat; } ul.menu a.menuView { background: url(/theme/dx3/images/menu/menuViewpoints.png) no-repeat; } ul.menu a.menuWhat { background: url(/theme/dx3/images/menu/menuWhatWeDo.png) no-repeat; } ul.menu a.menuOurWork { background: url(/theme/dx3/images/menu/menuOurWork.png) no-repeat; } ul.menu a.menuWhatPromos { height: 40px; background: url(/theme/dx3/images/menu/menuContentMarketingServices.png) no-repeat; } ul.menu a.menuWhatDsp { height: 40px; background: url(/theme/dx3/images/menu/menuDigitalServicesProvision.png) no-repeat; } ul.menu a.menuTechnology { background: url(/theme/dx3/images/menu/menuTechnology.png) no-repeat; } ul.menu a.menuClients { background: url(/theme/dx3/images/menu/menuClients.png) no-repeat; } ul.menu a.menuContact { background: url(/theme/dx3/images/menu/menuContactUs.png) no-repeat; } ul.menu a.menuJobs { background: url(/theme/dx3/images/menu/menuJoinUs.png) no-repeat; } ul.menu a.menuNews { background: url(/theme/dx3/images/menu/menuNews.png) no-repeat; } ul.menu a.menuHome:hover { background: url(/theme/dx3/images/menu/menuHomeOver.png) no-repeat; } ul.menu a.menuAbout:hover { background: url(/theme/dx3/images/menu/menuAboutUsOver.png) no-repeat; } ul.menu a.menuView:hover { background: url(/theme/dx3/images/menu/menuViewpointsOver.png) no-repeat; } ul.menu a.menuWhat:hover { background: url(/theme/dx3/images/menu/menuWhatWeDoOver.png) no-repeat; } ul.menu a.menuOurWork:hover { background: url(/theme/dx3/images/menu/menuOurWorkOver.png) no-repeat; } ul.menu a.menuWhatPromos:hover { background: url(/theme/dx3/images/menu/menuContentMarketingServicesOver.png) no-repeat; } ul.menu a.menuWhatDsp:hover { background: url(/theme/dx3/images/menu/menuDigitalServicesProvisionOver.png) no-repeat; } ul.menu a.menuTechnology:hover { background: url(/theme/dx3/images/menu/menuTechnologyOver.png) no-repeat; } ul.menu a.menuClients:hover { background: url(/theme/dx3/images/menu/menuClientsOver.png) no-repeat; } ul.menu a.menuContact:hover { background: url(/theme/dx3/images/menu/menuContactUsOver.png) no-repeat; } ul.menu a.menuJobs:hover { background: url(/theme/dx3/images/menu/menuJoinUsOver.png) no-repeat; } ul.menu a.menuNews:hover { background: url(/theme/dx3/images/menu/menuNewsOver.png) no-repeat; } ul.menu li.menuHomeSelected { height: 29px; background: url(/theme/dx3/images/menu/menuHomeOn.png) no-repeat; } ul.menu li.menuAboutSelected { height: 29px; background: url(/theme/dx3/images/menu/menuAboutUsOn.png) no-repeat; } ul.menu li.menuAboutSelected:hover { height: 29px; background: url(/theme/dx3/images/menu/menuAboutUsOn.png) no-repeat; } ul.menu li.menuViewSelected { height: 29px; background: url(/theme/dx3/images/menu/menuViewpointsOn.png) no-repeat; } ul.menu li.menuWhatSelected { height: 29px; background: url(/theme/dx3/images/menu/menuWhatWeDoOn.png) no-repeat; } ul.menu li.menuOurWorkSelected { height: 29px; background: url(/theme/dx3/images/menu/menuOurWorkOn.png) no-repeat; } ul.menu li.menuWhatSelected:hover { height: 29px; background: url(/theme/dx3/images/menu/menuWhatWeDoOn.png) no-repeat; } ul.menu li.menuWhatPromosSelected { height: 40px; background: url(/theme/dx3/images/menu/menuContentMarketingServicesOver.png) no-repeat; } ul.menu li.menuWhatDspSelected { height: 40px; background: url(/theme/dx3/images/menu/menuDigitalServicesProvisionOver.png) no-repeat; } ul.menu li.menuTechnologySelected { height: 29px; background: url(/theme/dx3/images/menu/menuTechnologyOn.png) no-repeat; } ul.menu li.menuClientsSelected { height: 29px; background: url(/theme/dx3/images/menu/menuClientsOn.png) no-repeat; } ul.menu li.menuContactSelected { height: 29px; background: url(/theme/dx3/images/menu/menuContactUsOn.png) no-repeat; } ul.menu li.menuJobsSelected { height: 29px; background: url(/theme/dx3/images/menu/menuJoinUsOn.png) no-repeat; } ul.menu li.menuNewsSelected { height: 29px; background: url(/theme/dx3/images/menu/menuNewsOn.png) no-repeat; } /** * Pods * * Pods are the right hand side info items. Again we use image replacement so that the text is searchable */ div.pod { margin-bottom: 5px; width: 232px; text-align: left; color: #fff; background-color: #433d37; } div.pod div p { text-align: left; margin-top: 0px; margin-bottom: 0px; } div.pod div p, div.pod div p a { color: #fff; font-size: 14px; margin: 0px; } div.pod div p a:hover { color: #444; } div.pod div ul { margin: 0px; padding: 0px; } div.pod div ul li { margin-left: 12px; padding: 0px; font-weight: bold; } div.pod div h4 { color: #fff; font-weight: bold; font-size: 15px; border-bottom: 1px solid #fff; padding-bottom: 10px; margin-bottom: 10px; } div.pod div dl { margin: 0px; padding: 0px; } div.pod div dt { padding-bottom: 3px; font-weight: bold; } div.pod div dt span { font-size: 14px; } div.pod div dt a { color: #fff; font-weight: bold; } div.pod div dt a.selected { color: #000; } div.pod div dt a:hover { color: #444; } div.pod div dd { margin: 0px; padding-bottom: 8px; } div.pod div dd.selected { color: #000; } div.pod div.podHeader { padding:0px; margin: 0px; height: 10px; display: block; background: url(/theme/dx3/images/pods/podOrangeHeader.png) no-repeat; } div.pod div.podHeader span { padding:0px; margin: 0px; height: 10px; display: block; margin-left:10px; padding-right: 25px background: url(/theme/dx3/images/pods/podOrangeHeader.png) top right no-repeat; } div.pod div.podBg { padding-left: 10px; padding-right: 10px; background-color: #FF7A00; margin: 0px; } div.pod div.podFooter { margin: 0px; display: block; height: 10px; background: url(/theme/dx3/images/pods/podOrangeFooter.png) no-repeat; } div.pod div.podFooter span { display: block; height: 10px; background: url(/theme/dx3/images/pods/podOrangeFooter.png) top right no-repeat; margin-left: 10px; } div.pod.Orange div.podHeader {background: url(/theme/dx3/images/pods/podOrangeHeader.png) no-repeat; background-color:#FF7A00 } div.pod.Orange div.podHeader span {background: url(/theme/dx3/images/pods/podOrangeHeader.png) top right no-repeat; } div.pod.Orange div.podBg {border-left:1px solid #FF7A00; border-right:1px solid #FF7A00; background-color:#FF7A00 } div.pod.Orange div.podFooter {background: url(/theme/dx3/images/pods/podOrangeFooter.png) no-repeat; } div.pod.Orange div.podFooter span {background: url(/theme/dx3/images/pods/podOrangeFooter.png) top right no-repeat ; } div.pod.White div.podHeader { background: url(/theme/dx3/images/pods/podWhiteHeader.jpg) no-repeat; background-color:white} div.pod.White div.podHeader span {background: url(/theme/dx3/images/pods/podWhiteHeader.jpg) top right no-repeat; } div.pod.White div.podBg { background: 0; border-left:1px solid #FF7A00; border-right:1px solid #FF7A00; background-color:white } div.pod.White div.podFooter { background: url(/theme/dx3/images/pods/podWhiteFooter.jpg) no-repeat; } div.pod.White div.podFooter span { background: url(/theme/dx3/images/pods/podWhiteFooter.jpg) top right no-repeat ; } div.pod.Grey div.podHeader { background: url(/theme/dx3/images/pods/podGreyHeader.png) no-repeat; background-color:#999999 } div.pod.Grey div.podHeader span {background: url(/theme/dx3/images/pods/podGreyHeader.png) top right no-repeat; } div.pod.Grey div.podBg { background: 0; border:0; background-color:#999999 } div.pod.Grey div.podFooter { background: url(/theme/dx3/images/pods/podGreyFooter.png) no-repeat; } div.pod.Grey div.podFooter span { background: url(/theme/dx3/images/pods/podGreyFooter.png) top right no-repeat ; } div.pod.OrangeLine div.podHeader { background: url(/theme/dx3/images/pods/podOrangeLineHeader.jpg) no-repeat; background-color:#433d37 } div.pod.OrangeLine div.podHeader span {background: url(/theme/dx3/images/pods/podOrangeLineHeader.jpg) top right no-repeat; } div.pod.OrangeLine div.podBg {border-left:1px solid #FF7A00; border-right:1px solid #FF7A00; background-color:#433d37 ; background: 0; } div.pod.OrangeLine div.podBg h4 { color: #FF7A00;border-bottom: 1px solid #FF7A00; } div.pod.OrangeLine div.podFooter { background: url(/theme/dx3/images/pods/podOrangeLineFooter.jpg) no-repeat; } div.pod.OrangeLine div.podFooter span { background: url(/theme/dx3/images/pods/podOrangeLineFooter.jpg) top right no-repeat ; } /** * Fixed pods with graphics */ div#podPdfIntroduction { height: 85px; background: url(/theme/dx3/images/pods/podPdfIntroduction.png) no-repeat; } div#podPdfIntroduction div { display: none; } /** * buttons */ a.button {width:50px;float:right; display:block; color:white; height:32px ; padding-right:30px; line-height:25px} a.button:hover {text-decoration: none; } a.button {background: url(/theme/dx3/images/voucherButton.jpg) top right no-repeat;} a.button:hover {background: url(/theme/dx3/images/voucherButtonOver.jpg) top right no-repeat; } a.button.browngrey {background: url(/theme/dx3/images/voucherBrowngreyButton.jpg) top right no-repeat;} a.button.browngrey:hover {background: url(/theme/dx3/images/voucherBrowngreyButtonOver.jpg) top right no-repeat; } a.button.download {line-height:18px; height:20px; background: url(/theme/dx3/images/voucherDownload.jpg) top right no-repeat; color:#FF7A00 ; padding-right:40px;} a.button.download:hover {background: url(/theme/dx3/images/voucherDownloadOver.jpg) top right no-repeat; color:#433d37 } /** * News items */ div#newsItems { background-color: #fff; color: #000; padding: 5px 0px 5px 10px; } div#newsItems div.newsDate { color: #FF7A00; display: block; clear: right; width: 180px; float: right; font-size: 12px; font-style: italic; margin-left: 5px; padding-right: 10px; vertical-align: middle; } div#newsItems div.newsTitle { font-weight: bold; color: #999; margin-left: 0px; display: block; font-size: 14px; vertical-align: middle; } div#newsItems div.newsContent { background-color: #fff; border-top: 1px solid #cdcdcd; border-bottom: 2px solid #000; margin-bottom: 5px; margin-right: 5px; padding: 5px; color: #000; min-height: 10px; } div#newsItems div.newsContent h2, div#newsItems div.newsContent h3, div#newsItems div.newsContent h4, div#newsItems div.newsContent h5 { color: #433d37; } div#newsItems div.newsContent p { font-size: 12px; font-weight: normal; } /** * Portfolio items */ div.portfolioBanners { margin-top: 5px; } div.portfolioBanners div.project { margin-bottom: 3px; margin-top: 3px; } div.portfolioBanners div.project span.portfolioTitle { font-size: 18px; font-weight: bold; } table.portfolioItems { margin: 10px; padding: 10px; } html>body table.portfolioItems { margin: 0px; } table.portfolioItems thead th { border-bottom: 2px solid #000; } table.portfolioItems thead th.title { width: 550px; } table.portfolioItems thead th.date { width: 100px; text-align: center; } table.portfolioItems tbody td { border-bottom: 1px solid #ccc; } table.portfolioItems tbody td.date { text-align: center; } div.portfolioFile { float: left; display: block; margin-left: 10px; } p.portfolioHome { margin-top: 10px; }