<style> .main-tabs { font: 18px Arial, Calibri, Helvetica, Tahoma; } .Tabs-Homepage { float: left; margin-left: 35px; margin-top: 37px; } .pink-color { color: #db4b80 !important; } .blue-color { color: #336699 !important; } .blue-bg { background-color: #336699 !important; } .red-color { color: #ff7071 !important; } .red-bg { background-color: #ff7071 !important; } .green-color { color: #788a41 !important; } .green-bg { background-color: #788a41 !important; } .grey-color { color: #666666 !important; } .home-separator { color: #d9d9d9 !important; font-size: 18px; margin: 0 10px; float: left; width: 1px; } .community-tab { margin-left: 35px; } #HP-Logo { padding-left: 23px; padding-top: 24px; float: left; } .Main-Button { display: block; width: 159px; height: 41px; color: #ffffff; float: right; margin: 0 5px; } .Tabs-Homepage a { float: left; height: 39px; font-weight: normal; } .Tabs-Homepage a.Selected-Tab { font-weight: bold; background: url(http://static.webjam.com/Images/homepage/09B/grey-arrow.gif) no-repeat 50% 100%; height: 39px; } .Tabs-Homepage a:hover { text-decoration: none !important; color: #ff0000 !important; } #Main-Block-Content { _padding-bottom: 5px; padding-top: 6px; } .Main-Block-Right { position: absolute; left: 675px; width: 310px; height:304px; } .Main-Block-Video { background-color: #000000; } .Main-Video { background-color: #000000; } #Premium, #Branded { } .Sell-Left { display: block; width: 525px; padding-left: 42px; margin-right: 20px; height: 256px; } .Main-Header { color:#A6C21F; display:block; font-family:Calibri,Arial,Helvetica !important; font-size:18px !important; font-size-adjust:none !important; font-stretch:normal !important; font-style:normal !important; font-variant:normal !important; font-weight:bold !important; line-height:normal !important; padding-left:188px; padding-top:10px; } .Section-Content-Free, .Section-Content-Premium, .Section-Content-Branded { font: 17px Calibri, Arial, Helvetica, Tahoma !important; line-height: 18px !important; display: block; margin: 54px 20px 2px 20px; height: 159px; } .Section-Content-Free { color: #670124; } .Section-Content-Premium { color: #194d7f; } .Section-Content-Branded { color: #4e601c; } .Branded-Button, .Branded-Button:hover, .Free-Button, .Free-Button:hover, .Premium-Button, .Premium-Button:hover { display: block; width: 193px; height: 47px; background: transparent url(http://static.webjam.com/Images/homepage/09/branded-button.gif) no-repeat; border: none; margin-top: 0px; margin-left: 0px; cursor: pointer; } .Free-Button, .Free-Button:hover { background: transparent url(http://static.webjam.com/Images/homepage/09/free_button.jpg) no-repeat !important; } .Branded-Button, .Branded-Button:hover { background: transparent url(http://static.webjam.com/Images/homepage/09/branded_button.jpg) no-repeat !important; } .Premium-Button, .Premium-Button:hover { background: transparent url(http://static.webjam.com/Images/homepage/09/premium_button.jpg) no-repeat !important; } .Button-Action { color: #fff; font: 14px Arial, Helvetica; position: absolute; top: 189px; height: 22px; cursor: pointer; font-weight: bold; display: block; width: 159px; text-align: center; } a#Button-Action:hover { text-decoration: none; color: #fff !important; } .Button-Action:hover { text-decoration: none; color: #fff !important; } .Button-Menu { font: 14px Arial, Helvetica, Tahoma; display: block; float: left; height: 29px; text-align: center; background-color: #f7f6f2; padding-top: 20px; } .Large-Button { width: 170px; } .Selected { color: #333333 !important; } #who-we-are { width: 127px; } #who-we-are.Selected { background: url(http://static.webjam.com/Images/homepage/09C/buttons/corners1.gif) no-repeat 0 0; width: 127px; } #media, #brands { width: 128px; } #media.Selected, #brands.Selected { background: url(http://static.webjam.com/Images/homepage/09C/buttons/corners2.gif) no-repeat 0 0; width: 128px; } #organisations.Selected { background: url(http://static.webjam.com/Images/homepage/09C/buttons/corners.gif) no-repeat 0 0; width: 170px; } #directories.Selected { background: url(http://static.webjam.com/Images/homepage/09C/buttons/corners5.gif) no-repeat 0 0; width: 123px; } .Buttons-Container { float: left; } #Organisations { display: none; } .Button-Menu a { text-decoration: none !important; } .Button-Menu a img { vertical-align: -3px; } .Main-Text { color: #3d3d3d; font-size: 14px; font-weight: normal !important; padding-left: 188px; } #Page-Content #Column-0 { background: url( "http://static.webjam.com/Images/homepage/09C/homepage-gradient.gif" ); background-color: #ffffff ! important; } .Content-Section { width: 525px; } .White-Color { color: #fff ! important; } /*----------------------*/ #slideshow { overflow:hidden; position:relative; background-color:#00000; } #slideshow .slides ul { width: 5640px; } #slideshow .slides li { background-position:right top; background-repeat:no-repeat; float:left; padding:25px 0 15px; margin-left: 0; position:relative; width:675px; list-style-type:none; height: 262px; _height: 304px ! important; } #slideshow .slides { overflow:hidden; /* position:relative; */ width:676px; } #slideshow .slides-nav { width:681px; position: absolute; top:253px; _top: 258px; z-index: 10; } #slideshow .slides-nav li { float:left; height:29px; _height: 46px; list-style-type:none; margin:0; padding-top:20px; position:relative; width:132px; _width: 125px; text-align: center; } #slideshow .slides-nav li.nav-el { background-color:#F7F6F2; } #slideshow .slides-nav li a img { vertical-align: -5px; } #slideshow .Slide-Content { width: 615px; margin: 0 30px; } * { margin:0; padding: 0; } #slideshow .slides li#slide-one { background: url("http://static.webjam.com/Images/homepage/09C/BGImages/brands_scr.jpg") no-repeat 0 0; } #slideshow .slides li#slide-two { background: url("http://static.webjam.com/Images/homepage/09C/BGImages/org_scr.jpg") no-repeat 0 0; } #slideshow .slides li#slide-three { background: url("http://static.webjam.com/Images/homepage/09C/BGImages/whoweare_scr.jpg") no-repeat 0 0; } #slideshow .slides li#slide-four { background: url("http://static.webjam.com/Images/homepage/09C/BGImages/media_scr.jpg") no-repeat 0 0; } #slideshow .slides li#slide-five { background: url("http://static.webjam.com/Images/homepage/09C/BGImages/directory_scr.jpg") no-repeat 0 0; } #Holder .bl { padding:3px 6px 6px ! important; _padding:1px 6px 6px ! important; } .slides-nav li a:hover { text-decoration: none ! important; } #slideshow .slides-nav li.No-Selected { background-color:#F7F6F2; } .slides-nav li a { font:14px Arial, Helvetica, Tahoma; } .slides-nav li#nav2,.slides-nav li#nav3 { width:130px; } .slides-nav li#nav4 { width: 140px; } .slides-nav li#nav5 { width: 143px; _width: 158px; } #nav2.Selected, #nav3.Selected, #nav2.on, #nav3.on { background:transparent url(http://static.webjam.com/Images/homepage/09C/buttons/corners2.gif) ! important; } #nav4.Selected, #nav4.on { background:transparent url(http://static.webjam.com/Images/homepage/09C/buttons/corners2A.gif) ! important; } .slides-nav li#nav5.No-Selected { background:transparent url(http://static.webjam.com/Images/homepage/09C/buttons/corners4A.gif) no-repeat 0 0; width: 135px; } .slides-nav li#nav4.on a, .slides-nav li#nav2.on a, .slides-nav li#nav1.on a, .slides-nav li#nav3.on a, .slides-nav li#nav5.on a { color: #fff ! important; } .slides-nav li#nav4.on a:hover, .slides-nav li#nav2.on a:hover, .slides-nav li#nav1.on a:hover, .slides-nav li#nav3.on a:hover, .slides-nav li#nav5.on a:hover { color:#fff ! important; } .slides-nav li#nav4 a:hover, .slides-nav li#nav2 a:hover, .slides-nav li#nav1 a:hover, .slides-nav li#nav5 a:hover, .slides-nav li#nav3 a:hover { color:#788a41 ! important; } #nav5.Selected, #nav5.on { background:transparent url(http://static.webjam.com/Images/homepage/09C/buttons/corners5.gif) ! important; } #nav1.Selected, #nav1.on { background:transparent url(http://static.webjam.com/Images/homepage/09C/buttons/corners2.gif) ! important; } .Main-Button a:hover { color:#fff ! important; } .Learn-More { position: absolute; top: 187px; font-size:14px; font-weight:normal !important; margin-left:188px; width: 280px } </style> <script> $slideshow = { context: false, tabs: false, timeout: 10000, // time before next slide appears (in ms) slideSpeed: 1000, // time it takes to slide in each slide (in ms) tabSpeed: 300, // time it takes to slide in each slide (in ms) when clicking through tabs fx: 'fade', // the slide effect to use init: function() { // set the context to help speed up selectors/improve performance this.context = $('#slideshow'); // set tabs to current hard coded navigation items this.tabs = $('ul.slides-nav li', this.context); // remove hard coded navigation items from DOM // because they aren't hooked up to jQuery cycle this.tabs.remove(); // prepare slideshow and jQuery cycle tabs this.prepareSlideshow(); }, prepareSlideshow: function() { // initialise the jquery cycle plugin - // for information on the options set below go to: // http://malsup.com/jquery/cycle/options.html $("div.slides > ul", $slideshow.context).cycle({ fx: $slideshow.fx, timeout: $slideshow.timeout, speed: $slideshow.slideSpeed, fastOnEvent: $slideshow.tabSpeed, pager: $("ul.slides-nav", $slideshow.context), pagerAnchorBuilder: $slideshow.prepareTabs, before: $slideshow.activateTab, pauseOnPagerHover: true, pause: true }); }, prepareTabs: function(i, slide) { // return markup from hardcoded tabs for use as jQuery cycle tabs // (attaches necessary jQuery cycle events to tabs) return $slideshow.tabs.eq(i); }, activateTab: function(currentSlide, nextSlide) { // get the active tab var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context); // if there is an active tab if(activeTab.length) { // remove active styling from all other tabs $slideshow.tabs.removeClass('on'); // add active styling to active button activeTab.parent().addClass('on'); } } }; $(function() { // initialise the slideshow when the DOM is ready $slideshow.init(); }); </script> <!--- New slide show code--> <div id="slideshow"> <div class="Main-Block-Right Main-Block-Video"> <div class="Main-Video"> <script src="http://www.webjam.com/js/swfobject1.5.js" type="text/javascript"></script> <embed width="320" height="301" flashvars="fullscreen=true&amp;file=http://static.webjam.com/videos/homepage/video_1.flv&amp;image=http://static.webjam.com/videos/homepage/image.gif&amp;skin=http://www.longtailvideo.com/files/skins/grungetape.swf&controlbar=none" wmode="opaque" allowfullscreen="true" quality="high" name="single" id="single" style="" src="http://player.longtailvideo.com/player.swf" type="application/x-shockwave-flash"/> </div> </div> <div class="slides"> <ul> <li id="slide-one"> <div class="Slide-Content"> <span class="Main-Header red-color">Improve efficiency, engage with your employees and manage your online reputation</span> <br /> <p class="Main-Text White-Color"> Webjam’s enterprise social media software allows you to create your own social intranet, share ideas and insights, and connect your employees. <br /> <br /> </p> <span class="Main-Button White-Color" ><a class="Button-Action " href="http://www.webjam.com/about_us" style="color: #fff"><img src="http://static.webjam.com/Images/homepage/09C/buttons/red-button.gif" alt="Learn more" title="Learn more" /></a></span> <p class="Learn-More White-Color"> </p> </div> </li> <li id="slide-two"> <div class="Slide-Content"> <span class="Main-Header White-Color">Enterprise Social Media </span> <br /> <p class="Main-Text White-Color"> Develop one destination for all employees to share information, facilitate learning, foster innovation and connect with colleagues and experts. <br /> <br /> </p> <span class="Main-Button"><a class="Button-Action " href="http://www.webjam.com/solutions/socialintranets" style="color: #fff"><img src="http://static.webjam.com/Images/homepage/09C/buttons/green-button.gif" alt="Learn more" title="Learn more" /></a></span> <p class="Learn-More White-Color"> </p> </div> </li> <li id="slide-three"> <div class="Slide-Content"> <span class="Main-Header White-Color">Market Insights for Research </span> <br /> <p class="Main-Text White-Color"> Capturing, exchanging and discussing insights from observations and experiences through real-time and informal conversations. <br /> <br /> </p> <span class="Main-Button"><a class="Button-Action " href="http://www.webjam.com/solutions/insights" style="color: #fff"><img src="http://static.webjam.com/Images/homepage/09C/buttons/green-button.gif" alt="Learn more" title="Learn more" /></a></span> <p class="Learn-More White-Color"> </p> </div> </li> <li id="slide-four"> <div class="Slide-Content"> <span class="Main-Header White-Color">Social Innovation</span><br /> <p class="Main-Text White-Color"> Transforming online conversations and shared ideas into tangible business programmes via a result-driven process from idea generation to execution. <br /> <br /> </p> <span class="Main-Button"><a class="Button-Action " href="http://www.webjam.com/solutions/innovation" style="color: #fff"><img src="http://static.webjam.com/Images/homepage/09C/buttons/blue-button.gif" alt="Learn more" title="Learn more" /></a></span> <p class="Learn-More White-Color"> </p> </div> </li> <li id="slide-five"> <div class="Slide-Content"> <span class="Main-Header White-Color">Reputation </span> <br /> <p class="Main-Text White-Color"> Webjam Solutions for social publishing and engagement enable you to engage with your customers to manage your online reputation and grow your brand virally. <br /> <br /> </p> <span class="Main-Button"><a class="Button-Action " href="http://www.webjam.com/solutions/reputation" style="color: #fff"><img src="http://static.webjam.com/Images/homepage/09C/buttons/blue-button.gif" alt="Learn more" title="Learn more" /></a></span> <p class="Learn-More White-Color"> </p> </li> </ul> </div> <ul class="slides-nav"> <li class="nav-el on" id="nav1"> <a style="color: #788a41" href="#slide-one"> What we do</a> </li> <li class="nav-el No-Selected" id="nav2"> <a style="color: #788a41" href="#slide-two"> Social intranets</a> </li> <li class="nav-el No-Selected" id="nav3"> <a style="color: #788a41" href="#slide-three"> Insights</a> </li> <li class="nav-el No-Selected" id="nav4"> <a style="color: #788a41" href="#slide-four"> Innovation</a> </li> <li class="nav-el No-Selected" id="nav5"> <a style="color: #788a41" href="#slide-five" > Reputation</a> </li> </ul> </div> <br clear="all" />FalseTrueFalse201a6295-7d9e-4f20-8aa9-625f72d22d82HTMLHTMLPublicPublicTrue