/* @override http://www.rubious.co.uk/css/style.css?version=css10 http://proofs.rubious.co.uk/css/style.css?version=css10 http://www.rubious.co.uk/css/style.css?version=css10 */ /* @group CSS RESET */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;} body {line-height: 1;} table {border-collapse: collapse; border-spacing: 0;} section, article, aside, header, footer, nav, dialog, figure {display: block;} /* @end */ /* @group Font Face */ @font-face { font-family: 'ColaborateThin'; /* src: url('ColabThi.eot'); */ src: local('Colaborate-Thin Regular'), local('Colaborate-Thin'), url('ColabThi.woff') format('woff'), url('ColabThi.ttf') format('truetype'), url('ColabThi.svg#Colaborate-Thin') format('svg'); } @font-face { font-family: 'Tiresias'; /* src: url('Tiresias_Infofont.eot'); */ src: local('Tiresias Infofont Regular'), local('TiresiasInfofont'), url('Tiresias_Infofont.woff') format('woff'), url('Tiresias_Infofont.ttf') format('truetype'), url('Tiresias_Infofont.svg#TiresiasInfofont') format('svg'); } @font-face { font-family: 'Colaborate'; /* src: url('ColabReg.eot'); */ src: local('Colaborate-Regular Regular'), local('Colaborate-Regular'), url('ColabReg.woff') format('woff'), url('ColabReg.ttf') format('truetype'), url('ColabReg.svg#Colaborate-Regular') format('svg'); } @font-face { font-family: 'ColaborateBold'; /* src: url('ColabBol.eot'); */ src: local('Colaborate-Bold Regular'), local('Colaborate-Bold'), url('ColabBol.woff') format('woff'), url('ColabBol.ttf') format('truetype'), url('ColabBol.svg#Colaborate-Bold') format('svg'); font-style:normal; } body {-webkit-text-stroke: 1px transparent;} @media only screen and (max-device-width:480px) { body {-webkit-text-stroke: 0 black;} } abbr {border-bottom: 1px dashed #ccc; cursor: help;} /* @end */ /* ----------------------------------------------- */ body {background: url(../images/background.jpg) center top repeat-y #fff; background-attachment: fixed;} @media only screen and (max-device-width:480px) { body {background: #580b15} } body div.wrapper {width: 940px; margin: 0 auto; position: relative; background: url(../images/background.jpg) center top repeat-y #580b15; background-attachment: fixed; } body div.wrapper-portfolio {width: 940px; margin: 0 auto; } /* @group Header - - - - - - - - - - - - - - - - - - */ header#rubious {background-color: #fff; height: 130px; margin-bottom: 85px; position: relative; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.3); z-index: 500;} header#rubious h1 {background: url(../images/rubious-logo.gif) top left no-repeat; width: 193px; height: 88px; display: block; position: relative; left: 43px; top: 24px;} header#rubious h1 a {display: block; height: 90px; z-index: 900;} header#rubious h1 a span {display: block; text-indent: -9999px;} /* @end */ /* @group Newsletter */ aside#newsletter {width: 540px; height: 50px; background: #e8e8e8; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; position: absolute; top: 0px; right: 40px; z-index: 800;} aside#newsletter h2 {font-family: Tiresias, Geneva, "Trebuchet MS", Trebuchet, sans-serif; text-transform: lowercase; font-size: 11px; position: absolute; top: 5px; left: 9px; font-weight: normal;} aside#newsletter h2 a {text-decoration: none; color: #999; position: relative; display: block; width: 150px; padding-left: 40px; height: 40px; background: url(../images/sprite.png) -1166px -310px no-repeat;} aside#newsletter h2 a span {width: 70px; display: block; line-height: 1.2;} aside#newsletter h2 a em {display: block; position: absolute; left: 110px; top: 6px; width: 75px; height: 22px; background: url(../images/sprite.png) -420px -38px no-repeat; text-indent: -9999px;} aside#newsletter h2 a:hover em {background-position: -420px 1px;} aside#newsletter p.tel {color: #890303; font-family: Tiresias, "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif; font-size: 24px; position: absolute; top: 13px; right: 9px; opacity: 0.99;} aside#newsletter p.tel a {color: #890303;} #search {border: 1px solid #fff; width: 140px; height: 38px; padding: 12px 5px 0 10px; position: absolute; left: 200px; top: 0px; border-top: none; z-index: 700;} #search input {width: 105px; border: 1px solid #ccc; padding: 2px; color: #999;} #search button {background: url(../images/sprite.png) no-repeat; background-position: -572px 0px; border: 0; position: relative; top: -2px;width: 20px;height: 20px; text-indent: -9999px;} .ie8 #search input {position: relative;top: -5px;} #search button:hover {background-position: -572px -37px; cursor: pointer; cursor:hand;} div#powered_by {text-indent: -999px; display: block; height:00px} div#results {margin: 50px 0 0 0 ; line-height: 1.3; width: 550px;} div#did_you_mean a {color: #fff;} div#results div.description {color: #ddd; font-size: 14px;} div#results div.url {font-weight: bold; color: #ccc;} div#results a {color: #fff;} div#other_pages a {color: #fff;} div.search-results article {width: 550px; } div.search-results header p {height: 0px;} div.search-results input {padding: 5px; font-size: 15px; border: 1px solid #ccc; background: #ccc; margin-left: 8px;} div.search-results input:hover{background-color:#fff; cursor: pointer; cursor:hand} div.search-results input[type="submit"]:active{background-color:#fff; border-color: #000;} div.search-results input#query {cursor: auto; background: #fff; margin: 0;} .ie8 div.search-results input#query, .ie7 div.search-results input#query {height: 18px;} /* @end */ /* @group Nav - - - - - - - - - - - - - - - - - - - - */ nav#main {position: absolute; top: 85px; right: 42px; font-family: /*Tiresias, */Geneva, "Trebuchet MS", Trebuchet, sans-serif; font-size: 13px; z-index: 1000;} nav#main li {float: left; margin-left: 0px; margin-right: 0; list-style: none; color: #3a3a3a;} nav#main li a {color: #3a3a3a; text-decoration: none; margin-right: 4px; margin-left: 6px; padding: 10px 0px 10px 10px;} nav#main li a em {font-style: normal;} nav#main li.selected a {background: transparent url('../images/sprite.png') no-repeat 0 -471px; color: #fff;margin-right: -4px !important; white-space: nowrap;} nav#main li.selected a span {background: transparent url('../images/sprite.png') no-repeat right -471px; padding: 10px 10px 10px 0px; ;} .ie8 nav#main li.selected a {background: transparent url('../images/sprite.png') no-repeat 0 -471px; color: #fff;} .ie8 nav#main li.selected a span {background: transparent url('../images/sprite.png') no-repeat right -471px; padding: 10px 10px 10px 0;} nav#main ul li a:hover {color: #b86267;} .ie6 nav#main li.selected a, .ie7 nav#main li.selected a {background: none; color: #890303; font-weight: bold;} .ie6 nav#main li.selected a span, .ie7 nav#main li.selected a span {background: none} nav#secondary {position: absolute; right: 40px; width: 612px; top: 123px; color: #fff; height: 46px;-webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px;z-index:600} nav#secondary-single {position: absolute; right: 40px; width: 612px; top: 123px; color: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; height: 25px;z-index:1000 } .borderradius nav#secondary-single {-webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; } /* WEBKIT and MOZILLA are sorted - css3 and a gif*/ .cssgradients nav#secondary, .cssgradients nav#secondary-single {background-color: #000; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3A3A3A), to(#212121)); background-image: -moz-linear-gradient(left top, #3a3a3a, #212121);; } /* Everything else gets a bg image*/ .no-cssgradients nav#secondary, .no-cssgradients nav#secondary-single {background: url(../images/nav/nav-sub-bg.gif) top left repeat;} /* Now for the half-size! */ /* WEBKIT and MOZILLA are sorted - css3 and a gif*/ nav#secondary.hidden {display:none;} nav#secondary-single ul hr {display: none;} nav#secondary-single ul li ul li {display: none;} nav#secondary-single ul li ul#newsticker li {display: block;} nav#secondary-single.hidden {display:none;} /* Everything else gets a bg image*/ nav#secondary ul ul, nav#secondary-single ul ul {position: absolute; left: 8px;} nav#secondary ul li, nav#secondary-single ul li {float: left; margin-left: 0px; list-style: none; color: #3a3a3a;} nav#secondary ul li a, nav#secondary-single ul li a {text-decoration: none;} nav#secondary ul a, nav#secondary-single ul a {position: relative;} nav#secondary a, nav#secondary-single a {color: #999; font-family: Tiresias, Geneva, "Trebuchet MS", Trebuchet, sans-serif; font-size: 10px; text-transform: uppercase; padding: 8px 5px 3px 18px; display: block;} nav#secondary a:hover, nav#secondary-single a:hover {color: #fff;} nav#secondary ul li.selected ul a:hover, nav#secondary-single ul li.selected ul a:hover {color: #fff;} nav#secondary ul li.selected a, nav#secondary-single ul li.selected a {color: #fff;} nav#secondary ul li ul, nav#secondary-single ul li ul {display: none;} nav#secondary ul li.selected ul, nav#secondary-single ul li.selected ul {display: block; position: absolute;} nav#secondary ul li.selected ul a, nav#secondary-single ul li.selected ul a {color: #999;} nav#secondary ul li.selected ul li.selected a, nav#secondary-single ul li.selected ul li.selected a {color: #890303;} nav#secondary ul hr, nav#secondary-single ul hr {position: absolute; top: 14px; left: 19px; border: none; height: 1px; color: #3a3a3a; background-color: #3a3a3a; width: 575px;} .ie6 nav#secondary ul hr, .ie7 nav#secondary ul hr, .ie6 nav#secondary-single ul hr, .ie7 nav#secondary-single ul hr {top: 22px;} nav#secondary ul a, nav#secondary-single ul a {padding-right: 10px; padding-left: 10px;} nav#secondary ul, nav#secondary-single ul {margin-left: 8px;} nav#secondary ul ul, nav#secondary-single ul ul {margin-left: 0px;} nav#secondary ul li a span, nav#secondary ul ul li a span, nav#secondary-single ul li a span, nav#secondary-single ul ul li a span {width: 10px; height: 10px; border-right: 1px solid #3a3a3a; position: absolute; right: 0px; top: 7px;} .ie7 nav#secondary ul li a span, .ie7 nav#secondary ul ul li a span, .ie7 nav#secondary-single ul li a span, .ie7 nav#secondary-single ul ul li a span {top: 10px;} .ie8 nav#secondary ul li a span, .ie8 nav#secondary ul ul li a span, .ie8 nav#secondary-single ul li a span, .ie8 nav#secondary-single ul ul li a span {top: 8px;} nav#secondary-single ul ul#newsticker {display: block; float: left; position: absolute; left: 165px; top: 0px; height: 25px; overflow: hidden;} nav#secondary-single ul ul#newsticker li a {color: #ccc; text-transform: none;} nav#secondary-single ul ul#newsticker li a:hover {color: #fff; text-transform: none;} nav#secondary-single ul ul#newsticker li a span {color: #3a3a3a;} /* @end */ /* @group mainContent - - - - - - - - - - - - - - - - */ .wrapper {font-family: Colaborate, Trebuchet MS, Arial, sans-serif; } header#pageTitle {width: 860px; margin: 0px auto 0 auto; position: relative; clear: both; margin-top: 65px; z-index: 40;} header#pageTitle hr {border: none; height:1px;color: #4a0000; background-color: #4a0000;position: relative; top: -15px; width: 860px;} header#pageTitle h1 {font-family: Tiresias, Geneva, "Trebuchet MS", Trebuchet, Arial, sans-serif; font-size: 64px; text-transform: lowercase; display: block; clear: both; letter-spacing: -1px; color: #fff;/*text-shadow: 0px -1px 0px #000;*/; opacity: 0.99;} header#pageTitle h1 em {font-style: normal; color: #000000;/*text-shadow: 0px -1px 0px #555*/;} header#pageTitle p {font-family: Colaborate, "Trebuchet MS", Trebuchet, Arial, sans-serif; font-size: 24px; margin-top: 14px; margin-bottom: 35px; letter-spacing: -1px; color: #e8e8e8; line-height: 1.3;opacity: 0.99;} /*.no-fontface*/ .ie7 header#pageTitle p, .ie8 header#pageTitle p {font-size: 22px;} header#pageTitle p a {text-decoration: none; color: #fff;opacity: 0.99;} header#pageTitle p em, header#pageTitle p strong {font-weight: normal; font-family: ColaborateBold, Tahoma, Arial, sans-serif; font-style: normal;opacity: 0.99;} section#mainContent {width: 860px; margin: 0px auto 0 auto; position: relative; clear: both; z-index: 999; margin-bottom: 40px;} article.main {padding: 22px 32px 22px 32px; color: #fff; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; background-color: rgb(48, 0, 0); -webkit-border-radius: 10px; -moz-border-radius: 10px; position: relative;} article.main h1, div.main h1 {font-family: Colaborate, "Trebuchet MS", Trebuchet, sans-serif; font-weight: normal; text-transform: lowercase; font-size: 28px; color: #bd0000; margin-bottom: 10px;} /*.no-fontface*/ .ie7 article.main h1, .ie8 article.main h1 {font-size: 26px;} article.main h2 {font-family: Colaborate, "Trebuchet MS", Trebuchet, sans-serif; font-weight: normal; font-size: 18px; color: /*#890303*/#bd0000; margin-bottom: 4px; margin-top: 8px;;} /*.no-fontface*/ .ie7 article.main h2, .ie8 article.main h2 {font-size: 16px;} article.main div.one {width: 358px; padding-right: 40px; float: left;} article.main div.two {width: 358px; padding-left: 40px; float: left;} article.main p {font-family: Colaborate, Tahoma, Helvetica, Arial, sans-serif; font-weight: normal; margin-bottom: 15px; line-height: 1.2; font-size: 15px;} article.main ul {margin: 30px; font-family: Colaborate, Tahoma, Helvetica, Arial, sans-serif; list-style-type: square; list-style-position: outside; font-size: 15px; line-height: 1.2;} article.main ul li {margin: 0 0 10px 0;} article.main ul li {list-style-type: square; list-style-position: outside; margin: 5px 0 15px 16px; font-weight: bold; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.3;} article.main a {color: #fff;} /*.no-fontface*/ .ie7 article.main p, .ie8 article.main p {font-size: 14px; line-height: 1.4;} article.main p.more {margin-top: -10px;} article.main hr {border: none; height: 1px; color: #000; background-color: #000; margin: 22px 0px; position: static; display: block;} p.call-to-action {position: relative; height: 20px;} a.portfolio {display: block; height: 45px; width: 230px; text-indent: -9999px; background: url(../images/sprite.png) -543px -58px no-repeat; position: absolute;margin: 5px 0 0 0;} a.portfolio:hover {background: url(../images/sprite.png) -543px -109px no-repeat;} a.contact {display: block; height: 45px; width: 130px; text-indent: -9999px; background: url(../images/sprite.png) 0 -61px no-repeat; position: absolute; right: -10px; margin: 8px 0 0 0;} a.contact:hover {background: url(../images/sprite.png) 0px -112px no-repeat;} .ie6 a.portfolio {background-image: url(../images/buts/but-black-handy-work.gif);} .ie6 a.portfolio:hover {background-image: url(../images/buts/but-black-handy-work.gif);} .ie6 a.contact {background-image: url(../images/buts/but-contact.gif)} .ie6 a.contact:hover {background-image: url(../images/buts/but-contact.gif)} div.packages {background: url(../images/packages/home-packages-panel.png) top left no-repeat; width: 425px;height: 76px; position: absolute; right: -10px; top: 290px; margin: 60px auto 60px auto; z-index:10; } div.packages a {text-decoration: none; color: #000;} div.packages h3 {padding: 10px 0 0 14px; margin: 0;} div.packages p {padding: 2px 0 0 14px; width: 230px; font-size: 14px; margin: 0; line-height: 1;} div.packages a span {text-decoration: underline;} div.packages a:hover h3, div.packages a:hover span {color: #890303;} /* @group Home Page */ article#portfolio {width: 390px; height: 420px; float: left; color: #fff; text-transform: uppercase; font-size: 14px;} .portfolio-nav {position: relative;} #portfolio-output {padding: 0 0 10px 0;color: #b86267;} #portfolio-more {position: absolute; top: 0px; right: 55px;} #portfolio-prev {position: absolute; top: 0px; right: 20px;} #portfolio-next {position: absolute; top: 0px; right: 0px;} a#portfolio-more {display: block; background: url(../images/sprite.png) -180px 0px no-repeat transparent; padding: 0px 0 4px 20px; color: #ccc; width: 40px; text-decoration: none; text-indent: -9999px; height: 16px;} a#portfolio-more:hover {background-position: -180px -38px;} .ie6 a#portfolio-more {background-image: url(../images/buts/but-more-red-arrow.gif);} a#portfolio-next {display: block; background: url(../images/sprite.png) -635px 0px no-repeat transparent; padding: 0px 0 0px 0px; color: #ccc; width: 22px; text-decoration: none; text-indent: -9999px; height: 22px;} a#portfolio-next:hover {background-position: -635px -38px;} .ie6 a#portfolio-next {background-image: url(../images/buts/but-arrow-red.gif);} a#portfolio-prev {display: block; background: url(../images/sprite.png) -615px 0px no-repeat transparent; padding: 0px 0 0px 0px; color: #ccc; width: 22px; text-decoration: none; text-indent: -9999px; height: 22px;} a#portfolio-prev:hover {background-position: -615px -38px;} .ie6 a#portfolio-prev {background-image: url(../images/buts/but-arrow-red.gif);} div.testimonials-wrapper {background: url(../images/testimonials.png) top left no-repeat transparent; width: 416px; height: 235px; position: absolute; top: 35px; right: 0; } article#testimonials {width: 420px; height: 270px; position: absolute; right: 0px; top: 0px; overflow: hidden; } article#testimonials h2 {font-family: Tiresias, Geneva, "Trebuchet MS", Trebuchet, Arial, sans-serif; font-size: 26px; text-transform: lowercase; margin-bottom: 8px; color: #0s00000;} div#testimonialsImages { width: 416px; height: 234px; color: #fff; background: none; background-color: transparent; } div.testimonials-pager {position: absolute; top: 5px; right: 10px} div#testimonialsImages blockquote {width: 0px; height: 0px; line-height: 1.2; background: none; background-color: transparent; font-size: 16px;} div#testimonialsImages blockquote p {width: 330px;background: none; background-color: transparent; position: absolute; left: 52px; top: 25px;opacity: 0.99;} /*.no-fontface*/ .ie7 div#testimonialsImages blockquote, .ie8 div#testimonialsImages blockquote {font-size: 15px;} div#testimonialsImages p.cite {color: #898f8a; position: absolute; left: 52px; top: 195px; font-size: 13px; } article#get-started {width: 420px; height: 125px; position: absolute; top: 294px; right: 0px; background: url(../images/home-ball-rolling.png) top left no-repeat;} .ie6 article#get-started {background-image: url(../images/home-ball-rolling.png);} #get-started a {display: block; width: 420px; height: 125px; color: #fff; text-decoration: none;} #get-started a p {width: 320px; position: relative; top: 55px; left: 17px;} section.home p.call-to-action {position: absolute; right: 10px; top: 285px;z-index: 500;width: 405px;} /* @end */ /* @group About - People */ body.people-- header#pageTitle h1 {color: #000000; line-height: 0.9; font-size: 5.2em; margin-top: -0.5em;} body.people-- h1 span.so {display: block; font-size: 0.8em; position: relative; top: 0.3em} body.people-- h1 span.who {display: block; font-size: 1.5em;} body.people-- h1 span.exactly-are {display: block; position: relative; top: -0.1em;} body.people-- h1 span.these {font-size: 1.2em;} body.people-- h1 span.people {color: #fff; font-size: 1.2em;} body.people-- h1 span.q {font-size: 1.2em;} body.people-- article.main {width: 296px; } .ie8 body.people-- article.main p {line-height: 1.2; } #people {position: relative; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; height: 274px;} #people #profile-andrew, #people #profile-greg, #people #profile-shaun {position: absolute; top: 0px; left: 0px; display: none;} #people #profile-andrew {display: block;} #people #andrew div.photo {background-position: left bottom;} #people .photo {width: 140px; height: 140px; background: url(../images/people/greg.png) left top no-repeat;} #people #shaun .photo {background-image: url(../images/people/shaun.png)} #people #andrew .photo {background-image: url(../images/people/andrew.png)} #people a {text-decoration: none; color: #fff;} #people h2 {margin: 5px 0 5px 0;} #people h2 strong {display: block; color: #000;font-weight: normal;} #people p.email {} #people p.tel {color: #fff;} #people a:hover h2 {color: #b86267;} #people div.names {position: absolute;} #people #shaun div.names {right: 0px;} #people #greg div.names {right: 160px;} #people #andrew div.names {right: 320px;} #people p.email a span {text-indent: -9999px; display: block;} #people #shaun p.email a, #people #greg p.email a, #people #andrew p.email a {display: block; background: url(../images/sprite.png) -895px 0 no-repeat; width: 118px; height: 20px;} #people #greg p.email a {background-position: -777px 0;} #people #andrew p.email a {background-position: -660px 0;} #people #shaun p.email a:hover{background-position:-895px -38px} #people #andrew p.email a:hover{background-position: -660px -38px;} #people #greg p.email a:hover {background-position: -777px -38px;} /* @end */ /* @group About - Approach */ body.our-approach-- h1 span.keeping-things {color: #000000; } body.our-approach-- h1 span.simple {display: block; font-size: 2.2em;} body.our-approach-- article.main {width: 446px; padding: 22px 32px 22px 32px; margin: 0 0 100px 0;} body.our-approach-- article.main a {color: #fff;} /* @end */ /* @group About - Environment */ body.environment-- h1 span.mother {display: block; font-size: 2.1em;} body.environment-- h1 span.earth {display: block; font-size: 2.2em; color: #000000; position: relative; top: -20px; } body.environment-- header p, body.environment-- article.main {position: relative; top: -30px; margin: 0 0 130px 0; width: 500px;} body.environment-- article.main ul {margin: 30px; font-family: Colaborate, Tahoma, Helvetica, Arial, sans-serif; list-style-type: square; list-style-position: outside; font-size: 15px; line-height: 1.2;} body.environment-- article.main ul li {margin: 0 0 10px 0;} /* @end */ /* @group About - Testimonials */ body.testimonials-- article.main {width: 520px; padding: 0px 30px 30px 0;} body.testimonials-- article.main blockquote p {font-size: 18px;} body.testimonials-- article.main blockquote {margin-top: 50px; position: relative; padding-top: 10px; background: url(../images/quotes.png) 0px 7px no-repeat; padding: 30px 0 0 30px;} body.testimonials-- article.main blockquote:first-child{margin: 0;} body.testimonials-- article.main blockquote span.quote{display:none} body.testimonials-- article.main blockquote p.cite {color: #ccc;} body.testimonials-- header#pageTitle p {width: 580px;} body.testimonials-- header#pageTitle h1 {margin: -30px 0 0 0; font-size: 59px;} body.testimonials-- header#pageTitle h1 span {font-family: Arial, Helvetica; sans-serif; font-size:120px;position: relative;top: 17px;} /* @end */ /* @group Article Header (CMS) */ #articleHeader {position: relative;} #articleHeader header#pageTitle {width: 310px; float: left; margin: 0;} #articleHeader header#pageTitle p {margin-top: -5px;} #articleHeader header#pageTitle #features p {margin-top: 0px;} body.websites-cms #articleHeader header#pageTitle h1 {color: #000000; font-size: 7.9em; position: relative; left: -5px; } #articleHeader article.main {width: 465px; float: right;} body.websites-cms section#mainContent {margin-bottom: 14px;} #articleHeader header#pageTitle h1 em {color: #fff; text-transform: uppercase;} #articleHeader div#features {width: 310px; margin: 0 0 0 0px; float: left;} #articleHeader .ie7 div#features {width: 310px; margin: 0 0 0 0px;} body.websites-cms section#extras {height: 220px;} body.websites-cms section#extras article {min-height: 200px; height: auto !important; height: 220px} body.websites-cms section#extras article.featured-site {width: 290px;} body.websites-cms section#extras article.featured-site p {color: #000; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; margin: 5px 0 15px 0; width: 280px; margin-top: 10px; line-height: 1.4; font-size: 14px;} body.websites-cms section#extras article.bullets {padding-left: 30px; width: 420px; } body.websites-cms section#extras article.bullets ul {position: relative; bottom: -0px;} body.websites-cms section#extras article.bullets li {list-style: square; list-style-position: inside; color: #000; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; font-size: 17px; margin-bottom: 14px;} body.websites-cms section#extras div.one {width: 220px; float: left;} body.websites-cms section#extras div.two {width: 200px; float: left;} #features article p.cms-text_icon small {background: url(../images/icons/sprite-icon-info-panel.gif) -260px 0 no-repeat;} #features article p.cms-images_icon small {background: url(../images/icons/sprite-icon-info-panel.gif) -325px 0 no-repeat;} #features article p.cms-pages_icon small {background: url(../images/icons/sprite-icon-info-panel.gif) 0px -65px no-repeat;} body.websites-cms article.main p.call-to-action a {left: 0px;} /* WEB - ECOMMERCE */ body.websites-ecommerce article.main p.call-to-action a {left: 0px;} section#features article p.ecommerce-ssl_icon small {background: url(../images/icons/sprite-icon-info-panel.gif) -65px -65px no-repeat;} section#features article p.ecommerce-support_icon small {background: url(../images/icons/sprite-icon-info-panel.gif) -195px -65px no-repeat;} section#features article p.ecommerce-prices_icon small {background: url(../images/icons/sprite-icon-info-panel.gif) -130px -65px no-repeat;} /* @end */ /* @group Login / Subscribe */ /* Login */ body.login-- #articleHeader header#pageTitle {width: 340px; float: left; position: relative; top: -10px; margin: 0;} body.login-- header#pageTitle p {margin-top: -5px;} body.login-- #articleHeader header#pageTitle h1 {color: #000000; font-size: 60px; position: relative; left: -5px; margin: 0 0 30px 0;} body.login-- header#pageTitle h1 .control {color: #fff; font-size: 1.8em; position: relative; top: -5px;} body.login-- section#mainContent article.main{width: 400px;;} body.login-- .secondary-background {display: none;} /* Subscribe */ body.subscribe-- header#pageTitle {width: 340px; float: left; position: relative;} body.subscribe-- header#pageTitle p {margin-top: -5px;} body.subscribe-- header#pageTitle h1 {color: #000000; font-size: 60px; position: relative; left: -5px; margin: 0 0 30px 0; text-transform: capitalize;} body.subscribe-- header#pageTitle h1 .newsletter {display: block; color: #fff;} body.subscribe-- header#pageTitle h1 .help {color: #fff; font-size: 1.8em; position: relative; top: 8px;} body.subscribe-- section#mainContent article.main{width: 400px;;} body.subscribe-- .secondary-background {display: none;} /* @end */ /* @group Article Header (seo) */ body.websites-seo #articleHeader header#pageTitle h1 {color: #000000; font-size: 64px; position: static;} body.websites-seo h1 span.on-the {color: #000000; font-size: 0.8em;} body.websites-seo h1 span.up {font-size: 3em; display: block; position: relative; top: -40px; left: -10px; color: #fff;} body.websites-seo #articleHeader header#pageTitle p {margin-top: -30px;} body.websites-seo div.columns {font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif;} body.websites-seo div.columns ul li {list-style-type: square; list-style-position: inside; width: 220px; margin: 5px 0 15px;} body.websites-seo .columns .one {width: 40%; font-size: 15px;} body.websites-seo .columns .two {width: 40%;font-size: 15px;} body.websites-seo article.main p.call-to-action a {left: 0px;} body.websites-seo .ie7 #features {position: absolute; width: 300px; top: 320px; left: 40px;} article.feature p.seo-price_icon small {background: url(../images/icons/sprite-icon-info-panel.png) -65px 0 no-repeat;} article.feature p.seo-ppc_icon small {background: url(../images/icons/sprite-icon-info-panel.png) -130px 0 no-repeat;} /* @end */ /* @group Article Header (Email demo) */ #articleHeader header#pageTitle p {margin-top: -5px;} #articleHeader header#pageTitle #features p {margin-top: 0px;} #articleHeader header#pageTitle h1 {color: #000000; font-size: 64px; position: relative; left: -5px; } #articleHeader article.main {width: 465px; float: right;} body.email-marketing-demo #pageTitle {width: 340px; float: left; } body.email-marketing-demo #mainContent #pageTitle p {margin-top: -30px;} body.email-marketing-demo #pageTitle h1 {color: #000000; font-size: 60px; position: relative; left: -5px; margin: 0 0 30px 0;} body.email-marketing-demo #pageTitle h1 .peek {color: #fff; font-size: 2.3em; position: relative; top: -14px; left: -5px;} body.email-marketing-demo #mainContent article.main {width: 400px; float: right;} body.email-marketing-demo span.tel {font-size: 1.5em; font-weight: bold;} /* @end */ /* @group Web - Hosting */ body.websites-hosting header#pageTitle h1 {position: relative; left: -5px; color: #000;} body.websites-hosting header#pageTitle {margin-bottom: 50px;} body.websites-hosting header#pageTitle p {float: left; width: 500px;} body.websites-hosting #features {float: right; width: 350px;} body.websites-hosting header#pageTitle #features p {width: 100%;} body.websites-hosting h1 span.fast {color: #000000; text-transform: capitalize; } body.websites-hosting h1 span.low-cost {font-size: 1.1em; color: #fff; } body.websites-hosting section#extras article.featured-site {width: 234px;} body.websites-hosting section#extras article.accessibility {display: none;} body.websites-hosting div.inner-wrapper {position: relative;} body.websites-hosting article.main p.call-to-action a {left: 0px;} body.websites-hosting article.main div.one {border-right: 1px solid #300000; width: 450px;} body.websites-hosting article.main div.two {width: 250px;} /* @end */ /* @group ArticlePlus (Email Marketing) */ body.email-marketing-overview .ie7 .secondary-background {display: none;} body.email-marketing-overview header#pageTitle {width: 860px; margin: 0px 40px 0 40px; min-height: 358px;height: auto !important; height:358px;} body.email-marketing-overview h1 .targeted {color: #000000; } body.email-marketing-overview h1 .marketing {color: #000000; display: block; font-size: 1.7em;} body.email-marketing-overview header#pageTitle p {width: 530px; font-size: 28px;} #articlePlus header#pageTitle #features p {width: 100%; font-size: 12px;} #articlePlus #features {width: 310px;position: absolute; top: -20px;right: 0;;} #articlePlus article.main {float: right; width: 380px; margin: 0px 0 0 0;z-index: 999;} #articlePlus article#portfolio {width: 390px; height: 420px; float: left; color: #fff; text-transform: uppercase; font-size: 14px; } #articlePlus #features2 {width: 310px;float: left; margin-top: 150px;} body.email-marketing-overview section#extras {margin-top: 0px;} body.email-marketing-overview section#extras article.spam {padding: 0px 28px 0px 28px; float: right; min-height: 250px; height: auto !important; height: 250px; z-index: 70; width: 465px; border-left: 1px solid #ddd; padding-right: 0px;} body.email-marketing-overview section#extras article.spam h1 {font-size: 28px; font-family: Tiresias, Geneva, "Trebuchet MS", Trebuchet, sans-serif; line-height: 0.9; color: #000000; text-transform: lowercase;} body.email-marketing-overview section#extras article.spam h1 em {display: block; color: #b86267; font-style: normal;} body.email-marketing-overview section#extras article.spam a {color: #b86267;} body.email-marketing-overview section#extras article.spam h1 em a:hover {color: #b86267; text-decoration: underline;} body.email-marketing-overview section#extras article.spam h1 {color: #b86267;} body.email-marketing-overview section#extras article.spam p {color: #000; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; margin-top: 10px; line-height: 1.4; -webkit-text-stroke: 0 black; font-size: 14px;} body.email-marketing-overview section#extras article.featured-site {width: 300px;float: left; padding: 0px 0 0 0 ; z-index: 500; border: none;} body.email-marketing-overview section#extras article.featured-site h1 em {color: #000;} body.email-marketing-overview article.featured-site div {margin-top: 6px;} body.email-marketing-overview article.featured-site div img {border: 2px solid #ccc;} body.email-marketing-overview article.featured-site p.more a {width: 200px; margin-top: 10px; text-indent: -9999px; z-index: 200;} body.email-marketing-overview article.featured-site p.more a {width: 200px; margin-top: 10px; text-indent: -9999px; z-index: 200;} body.email-marketing-overview article.featured-site h1 {font-size: 28px; font-family: Tiresias, Geneva, "Trebuchet MS", Trebuchet, sans-serif; line-height: 1.1; color: #000000; text-transform: lowercase;} body.email-marketing-overview article.featured-site h1 em {display: block; color: #b86267; font-style: normal;} article.feature p.email-wysiwyg_icon small {background: url(../images/icons/sprite-icon-info-panel.gif) -325px -65px no-repeat;} article.feature p.email-subscribers_icon small {background: url(../images/icons/sprite-icon-info-panel.gif) -0px -130px no-repeat;} article.feature p.email-reports_icon small {background: url(../images/icons/sprite-icon-info-panel.gif) -65px -130px no-repeat;} article.feature p.email-cost_icon small {background: url(../images/icons/sprite-icon-info-panel.gif) -130px -130px no-repeat;} article.feature p.email-price_icon small {background: url(../images/icons/sprite-icon-info-panel.gif) -195px -130px no-repeat;} /* EMAIL - Subscriber management */ body.email-marketing-subscribers a.download {background: url(../images/sprite.png) no-repeat; background-position: -408px -60px; border: 0; width: 135px;height: 42px; text-indent: -9999px;display: block; position: absolute; right:13px; bottom: 25px;} body.email-marketing-subscribers a.download:hover {background-position: -408px -111px;} body.email-marketing-subscribers #articlePlus #features {width: 310px;position: static; float: left; margin: 15px 0 0 0px;} body.email-marketing-subscribers #articlePlus article.main {width: 430px;} body.email-marketing-subscribers #articlePlus #features .download p {width: 130px;} article.feature p.email-whitelist_icon small {background: url(../images/icons/sprite-icon-info-panel.gif) -260px -130px no-repeat;} /* @end */ /* @group ArticlePlus (graphic design) */ body.graphic-design-overview h1 .first-impressions-are {font-size: 0.8em;} body.graphic-design-overview h1 .first-impressions-are, body.graphic-design-overview h1 .dot {color: #000000; } article.feature p.graphic-starter_icon small {background: url(../images/icons/sprite-icon-info-panel.png) -325px -65px no-repeat;} article.feature p.graphic-printign_icon small {background: url(../images/icons/sprite-icon-info-panel.png) -0px -130px no-repeat;} article.feature p.graphics-business_icon small {background: url(../images/icons/sprite-icon-info-panel.png) -65px -195px no-repeat;} article.feature p.graphics-printing_icon small {background: url(../images/icons/sprite-icon-info-panel.png) 2px -195px no-repeat;} body.graphic-design-overview #articlePlus #features2 {margin-top: 170px;} body.graphic-design-overview section#mainContent {margin-bottom: 0px;} /* @end */ /* @group Marketing */ body.marketing-overview header#pageTitle h1 {font-size: 3em;} body.marketing-overview header#pageTitle p {font-size: 23px} body.marketing-overview article.main .call-to-action a {left: 0;} article.feature p.offline_icon small {background: url(../images/icons/sprite-icon-info-panel.png) -130px -195px no-repeat;} article.feature p.partnership_icon small {background: url(../images/icons/sprite-icon-info-panel.png) -195px -190px no-repeat;} /* @end */ /* @group Contact / Social */ body.contact-- #articleHeader header#pageTitle h1 {color: #000000; font-size: 50px; position: relative; left: -5px; margin: 0 0 30px 0;} body.contact-- header#pageTitle h1 .help {color: #fff; font-size: 1.8em; position: relative; top: 8px;} body.contact-- #articleHeader article.main {width: 400px; float: right;} body.contact-- span.tel {font-size: 1.5em; font-weight: bold;} body.contact-- article.main p.map_link a {background: url(../images/sprite.png) -363px 0px no-repeat; width: 60px;height: 22px; text-indent: -9999px; display: block;} body.contact-- article.main p.map_link a:hover {background-position: -363px -38px;} body.social-- header#pageTitle {width: 460px; float: left; margin: 0; } body.social-- header#pageTitle p {margin-top: -35px;} body.social-- header#pageTitle h1 {color: #fff; font-size: 90px; position: relative; left: -5px; margin: 0 0 30px 0;} body.social-- header#pageTitle h1 .help {color: #fff; font-size: 1.8em; position: relative; top: 8px;} body.social-- article.main {width: 300px; float: right; min-height: 590px;height: auto !important; height:590px} body.social-- section#extras article {min-height: 220px; height: auto !important; height: 220px} body.social-- section#mainContent {position: relative; width: 860px;} article.twitter {padding: 0px 20px 10px 20px; color: #fff; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; background-color: rgb(48, 0, 0); -webkit-border-radius: 10px; -moz-border-radius: 10px; position: absolute; width: 420px; top: 318px; left: 0px; min-height: 305px;height: auto !important; height:305px; /*padding-bottom: 86px;*/} div#social-twitter {color: #fff; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; position: relative; width: 430px; min-height: 305px;height: auto !important; height:305px; /*padding-bottom: 86px;*/ background:url(../images/background-images/twitter-panel.png) -20px 0 no-repeat;} article.twitter div.tweet_list { position: relative; left: 20px; top: 50px; width: 390px; height: 145px; overflow: hidden;} article.twitter div.tweet_list div {padding-bottom: 5px;margin-bottom: 8px; font-size: 13px; border-bottom: 0px dashed #ccc; width: 385px; max-height: 35px; overflow: hidden;} article.twitter div.tweet_list div a {color: #ddd;} article.twitter a.follow {position: absolute; bottom: 12px; left: 75px; background: url(../images/sprite.png) -495px -0px no-repeat; text-indent: -9999px; width: 75px; height: 20px;} article.twitter a.follow:hover {background-position: -495px -40px;} article.twitter div #scrollit {color: #fff; position: absolute; right: 23px; bottom: 108px; text-indent: -9999px; outline: 1px solid #ccc; width: 16px;height: 16px; display: none;} article.twitter h1 { height: 63px; width: 110px; background: url(../images/footer/footer-headers.png) -755px -137px no-repeat; text-indent: -9999px; position: relative; } /* @end */ /* @end END GROUP*/ /* @group Features (white panels) - - - - - - - - - - */ #features, #features2 {width: 860px; margin: 34px auto 0 auto; z-index: 50;} .ie6 #features, .ie7 #features, .ie6 #features2, .ie7 #features2 {margin-bottom: 55px;} #features article.feature, #features2 article.feature {background: url(../images/info-panel_bottom.png) bottom left no-repeat;font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif;width: 306px; float: left; margin-right: 20px; margin-bottom: 25px; position: relative; min-height: 100px; height: auto !important; height: 100px; z-index: 60;} #features article.feature h2, #features2 article.feature h2 {background: url(../images/sprite.png) 0px -160px no-repeat; position: relative; top: -14px; font-family: Tiresias, Tahoma, Helvetica, Arial, sans-serif; font-size: 18px; padding: 12px 70px 0 16px; line-height: 1.2; text-transform: lowercase; z-index: 20;} /*.no-fontface*/ .ie7 #features article.feature h2, .ie8 #features article.feature h2, /*.no-fontface*/ .ie7 #features2 article.feature h2, .ie8 #features2 article.feature h2 {font-size: 18px; line-height: 1;} .ie6 #features article.feature, .ie6 #features2 article.feature {background-image: url(../images/info-panel.gif);} .ie6 #features article.feature h2, .ie6 #features2 article.feature h2 {background-image: url(../images/info-panel.gif);} #features article.feature div.intro, #features2 article.feature div.intro {height: 90px;} #features article.feature p, #features2 article.feature p {display: block; position: relative; z-index: 20;} #features article.feature p.more_info, #features2 article.feature p.more_info {position: absolute; top: 0px; right: 10px; width: 300px; height: 65px; z-index: 80; /* Make this less if there are graphical problems*/} #features article.feature p.more_info small, #features2 article.feature p.more_info small {display: block; width: 65px; height: 65px; position: absolute; top: 13px; right: 6px;} #features article.feature p.basic_icon small {background: url(../images/icons/sprite-icon-info-panel.gif) -195px -1px no-repeat;} #features article.feature p.brochure_icon small {background: url(../images/icons/sprite-icon-info-panel.gif) -0px -0px no-repeat;} #features article.feature p.more_info a, #features2 article.feature p.more_info a {display: block; width: 100%; height: 105px; position: relative; top: -20px; text-decoration: none;} #features article.feature p.more_info a:hover em, #features2 article.feature p.more_info a:hover em {background-position: 0 0px;} #features article.feature p.more_info a em, #features2 article.feature p.more_info a em {display: block; position: absolute; bottom: 5px; right: 7px; color: #ccc; text-transform: uppercase; font-size: 13px; font-style: normal; background: url(../images/sprite.png) 0 -38px no-repeat; padding: 0px 0 0px 0px; text-indent: -9999px; width: 60px; height: 20px;} #features article.feature p.more_info a em.hide, #features2 article.feature p.more_info a em.hide {display: none; background: url(../images/sprite.png) -301px -38px no-repeat;} #features article.feature p.more_info a em.hide, #features2 article.feature p.more_info a em.hide {background-position: -300px 0;} .ie6 #features article.feature p.more_info a em, .ie6 #features2 article.feature p.more_info a em {background-image: url(../images/buts/but-more.gif);} #features article.feature p, #features2 article.feature p {font-family: Colaborate, Tahoma, Helvetica, Arial, sans-serif; font-size: 12px; margin: 0 0 0 16px; position: relative; top: -10px; line-height: 1.3; color: #000; letter-spacing: normal;} /*.no-fontface*/ .ie7 #features article.feature p, .ie8 #features article.feature p, /*.no-fontface*/ .ie7 #features2 article.feature p, .ie8 #features2 article.feature p {font-size: 12px; line-height: 1.3;} /*.no-fontface*/ .ie7 #features article.feature p, .ie8 #features article.feature p, /*.no-fontface*/ .ie7 #features2 article.feature p, .ie8 #features2 article.feature p {font-size: 11px;;} #features article.feature a:focus, #features2 article.feature a:focus {outline: none;} #features article.feature div.expand, #features2 article.feature div.expand {padding: 10px 10px 0 10px; margin: 0 10px 0 10px; display: none; border-top: 2px solid #ccc;} #features article.feature div.expand hr, #features2 article.feature div.expand hr {border: none; height: 2px;color: #ccc; background-color: #ccc; width: 100%; display: none;} #features article.feature div.expand p, #features2 article.feature div.expand p {position: static; margin: 0 0 0px 0; padding-bottom: 10px;} #features article.feature div.expand h2, #features2 article.feature div.expand h2 {color: #890303; font-size: 15px; margin: 15px 0 0 0; background: none; position: static; font-family: Colaborate, Tahoma, Helvetica, Arial, sans-serif; padding: 0; line-height: 1.2; text-transform: none; z-index: 20;} #features article.feature div.expand ul, #features2 article.feature div.expand ul {margin: 10px 0;} #features article.feature div.expand ul li, #features2 article.feature div.expand ul li {list-style-position: outside; list-style-type: square; color: #3a3a3a; margin-bottom: 5px; font-weight: bold; margin-left: 18px;} /*.no-fontface*/ .ie7 #features article.feature div.expand ul li, .ie8 #features article.feature div.expand ul li, /*.no-fontface*/ .ie7 #features2 article.feature div.expand ul li, .ie8 #features2 article.feature div.expand ul li {font-size:14px;} #features article.feature a, #features2 article.feature a {color: #999;} .no-js #features article.feature p.more_info em, .no-js #features2 article.feature p.more_info em {display: none;} /* @end */ /* @group Extras - - - - - - - - - - - - - - - - */ section#extras {clear: both;padding: 25px 0 35px 0; width: 820px; margin: 0 auto; z-index: 600; position: relative;} section#extras {width: 820px; margin: 0 auto; background: #fff; margin-top: 0px; height: 248px; position: relative; -webkit-border-radius: 10px; -moz-border-radius: 10px; z-index: 600; padding: 20px;} section#extras article {padding: 0px 28px 0px 28px; float: left; min-height: 255px; height: auto !important; height: 255px; z-index: 70;} section#extras article.featured-site {padding-left: 0px; width: 232px; border-right: 1px solid #ddd;} section#extras article.featured-site div {margin-top: 6px; height: 190px; overflow: hidden;width: 250px;} section#extras article.featured-site div img {border: 2px solid #ccc;} section#extras article.featured-site img.affiliate {margin-top: 10px;} section#extras article.logos {width: 225px;} section#extras article.logos img {margin-left: -13px;margin-top: 10px;} section#extras article.accessibility {width: 240px; border-left: 1px solid #ddd; padding-right: 0px;} section#extras article h1 {font-size: 26px; font-family: Tiresias, Geneva, "Trebuchet MS", Trebuchet, sans-serif; line-height: 0.9; color: #b86267; text-transform: lowercase;} section#extras article h1 em {display: block; color: #b86267; font-style: normal;} section#extras article h1 em a {display: block; color: #000; font-style: normal; text-decoration: none;} section#extras article h1 em a:hover {color: #b86267; text-decoration: underline;} section#extras article.accessibility h1 {color: #b86267;} section#extras article.accessibility p {color: #212121; font-family: Colaborate, Tahoma, Helvetica, Arial, sans-serif; margin-top: 10px; line-height: 1.4; -webkit-text-stroke: 0 black; font-size: 14px;} /*.no-fontface*/ .ie7 section#extras article.accessibility p, .ie8 section#extras article.accessibility p {font-size: 13px;} body.websites-hosting section#extras article.featured-site {width: 260px;} /* @end */ /* @group Footer (white info) - - - - - - - - - - - - */ aside#info-footer {width: 860px; margin: 0 auto; background: #fff; margin-top: 35px; height: 208px; position: relative; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-box-shadow: 0px -5px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0px -5px 5px rgba(0,0,0,0.3); z-index: 500;} aside#info-footer div.design, aside#info-footer div.email, aside#info-footer div.marketing {width: 260px; padding: 20px 2px 35px 20px; min-height: 153px; height: auto !important; height: 153px; float: left; position: relative;} aside#info-footer div.image {background: url(../images/footer/sprite-footer-w-icons.png) 0px 0px no-repeat; width: 110px; height: 110px; position: absolute; right: 20px; bottom: 10px;} aside#info-footer div.design div.image {background-position: 0px -110px;} aside#info-footer div.email div.image {background-position: 0px -330px;} aside#info-footer div.marketing div.image {background-position: 0px -220px;} aside#info-footer h1 {font-family: Tiresias, "Trebuchet MS", Trebuchet, sans-serif; font-size: 24px; text-transform: lowercase} /*.no-fontface*/ .ie7 aside#info-footer h1, .ie8 aside#info-footer h1 {font-size: 23px; line-height: 1;} aside#info-footer div.design h1, aside#info-footer div.marketing h1 {margin-bottom: 15px;} aside#info-footer div.email h1 {margin-bottom: 10px;} aside#info-footer ul {font-family: Colaborate, Tahoma, Helvetica, Arial, sans-serif; list-style: none; z-index: 100; position: relative; font-size: 14px;} /*.no-fontface*/ .ie7 aside#info-footer ul, .ie8 aside#info-footer ul{font-size: 12px; line-height: 1.3;} aside#info-footer ul a {color: #b8b8b8; padding: 1px 0 1px 0; display: block;} aside#info-footer ul a:hover {color: #000;} aside#info-footer p.more {width: 260px; position: absolute; bottom: 20px; height: 165px; border-right: 1px solid #e8e8e8; z-index: 10;} aside#info-footer p.last {border: none;} aside#info-footer p.more a {position: absolute; bottom: 0px; display: block; background: url(../images/sprite.png) -62px -38px no-repeat; padding: 2px 0 4px 20px; color: #ccc; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 12px; width: 40px; height: 16px; text-decoration: none; text-indent: -9999px;} .ie6 aside#info-footer p.more a {background-image: url(../images/buts/but-more.gif);} aside#info-footer p.more a:hover {background-position: -62px 0px;} /* HOME INFO FOOTER! */ aside#info-footer-home {width: 860px; margin: 0 auto; background: #fff; margin-top: 35px; height: 440px; position: relative; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-box-shadow: 0px -5px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0px -5px 5px rgba(0,0,0,0.3); z-index: 500; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; font-size: 14px;} div.info-footer-home-fix {position: relative; height: 440px;} aside#info-footer-home p {line-height: 1.2; width: 235px; color: #212121; margin-bottom: 4px; margin-top: 10px;} /*.no-fontface*/ .ie7 aside#info-footer-home p { font-size: 13px;} .ie8 aside#info-footer-home p { font-size: 13px;} aside#info-footer-home div.design, aside#info-footer-home div.email, aside#info-footer-home div.marketing, aside#info-footer-home div.web {width: 370px; padding: 10px 2px 0px 10px; min-height: 190px; height: auto !important; height: 200px; position: absolute;} aside#info-footer-home div.vertical-rule {height: 370px; border-right: 1px solid #e8e8e8; width: 2px; position: absolute; left: 430px; top: 25px;} aside#info-footer-home div.web {top: 10px; left: 20px; border-bottom: 1px solid #e8e8e8;} aside#info-footer-home div.marketing {top: 10px; right: 20px; border-bottom: 1px solid #e8e8e8;} aside#info-footer-home div.email {bottom: 25px; left: 20px;} aside#info-footer-home div.design {bottom: 25px; right: 20px;} aside#info-footer-home div.image {background: url(../images/footer/sprite-footer-w-icons.png) 0px 0px no-repeat; width: 110px; height: 110px; position: absolute; right: 10px; bottom: 33px;} aside#info-footer-home div.web div.image {background-position: 0px 0px; z-index: 10;} aside#info-footer-home div.design div.image {background-position: 0px -110px;} aside#info-footer-home div.email div.image {background-position: 0px -330px;} aside#info-footer-home div.marketing div.image {background-position: 0px -220px;} aside#info-footer-home h1 {font-family: Tiresias, Geneva, "Trebuchet MS", Trebuchet, sans-serif; font-size: 27px; text-transform: lowercase;z-index: 20; position: relative;opacity: 0.99;} /*.no-fontface*/ .ie7 aside#info-footer-home h1, .ie8 aside#info-footer-home h1 {font-size: 25px; text-transform: lowercase} aside#info-footer-home div.design h1, aside#info-footer-home div.web h1, aside#info-footer-home div.email h1, aside#info-footer-home div.marketing h1 {margin-bottom: 5px;} aside#info-footer-home p.more {position: absolute; bottom: 0px; left: 5px; z-index: 10;} aside#info-footer-home p.more a {position: absolute; bottom: 0px; display: block; background: url(../images/sprite.png) -60px -38px no-repeat; padding: 2px 0 4px 20px; color: #ccc; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 12px; width: 40px; height: 16px; text-decoration: none; text-indent: -9999px;} .ie6 aside#info-footer-home p.more a {background-image: url(../images/buts/but-more.gif);} aside#info-footer-home p.more a:hover {background-position: -60px 0px;} /* @end */ /* @group Footer aside */ /* @group Footer Background - - - */ aside#site-footer {width: 920px; height: 266px; margin: 0 auto; background: url(../images/footer-bg_02.png) top left repeat-x; position: relative; z-index: 1;} aside#site-footer div.footer-curve-a {width: 15px; background: url(../images/sprite.png) -1039px 0 no-repeat; position: absolute; left: -10px; top: 0px; height: 100%;} aside#site-footer div.footer-curve-b {width: 15px; background: url(../images/sprite.png) -1116px 0 no-repeat; position: absolute; right: -10px; top: 0px; height: 100%;} .ie6 aside#site-footer div.footer-curve-a, .ie6 aside#site-footer div.footer-curve-b {display: none;} .ie6 aside#site-footer {background: #000; background-image: none;} /* @end */ aside#site-footer {font-family: Colaborate, Tahoma, Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.2; color: #ccc;} /*.no-fontface*/ .ie7 aside#site-footer, .ie8 aside#site-footer {font-size: 11px;} aside .contact, aside .blog, aside .links, aside .twitter {float: left; margin: 18px 0 20px 0; border-right: 1px solid #3a3a3a; min-height: 190px; height: auto !important; height: 190px; display: inline;} aside .twitter {border: none;} aside .contact {width: 252px; margin-left: 10px; padding: 0 8px 0 12px;} aside .blog {width: 231px; padding: 0 10px 0 9px; position: relative;} aside .links {width: 152px; padding: 0 11px 0 16px;} aside .links p {margin-top: 2px; margin-bottom: 7px; font-size: 11px;} aside .links ul {list-style: none;} aside .links li {height: 27px; margin-bottom: 3px;} aside .links li a {color: #ccc; text-decoration: none; padding: 0px 0 0 33px; display: block; font-weight: bold; font-size: 14px; line-height: 1.1;opacity: 0.99;} /*.no-fontface*/ .ie7 aside .links li a, .ie8 aside .links li a {font-size: 11px;} aside .links li a:hover {color: #fff;} aside .links li a em {color: #999; display: block; padding: 0px 0 0px 0px; font-style: normal; font-weight: normal; font-size: 12px;} aside .links li a:hover span {text-decoration: underline;} aside .links li a:hover em {border: none;} aside .links li.flickr, aside .links li.facebook, aside .links li.rss, aside .links li.favourites {background: url(../images/sprite.png) -1173px 0 no-repeat;} aside .links li.facebook {background-position: -1173px -27px;} aside .links li.flickr {background-position: -1173px -0px;} aside .links li.favourites {background-position: -1173px -81px;} aside .links li.rss {background-position: -1173px -54px;} aside .twitter {width: 200px;} aside .contact h1 {text-indent: -9999px; background: url(../images/footer/footer-headers.png) -8px -5px no-repeat; height: 200px; position: absolute; width: 250px;} .ie6 aside .contact h1 {background-image: url(../images/footer/footer-headers.gif);} aside .contact div.chat {position: absolute; width: 240px; top: 50px;} aside .contact div.chat a {color: #fff;} aside .contact div.chat a.chat {display: block;text-decoration: none; background: url(../images/sprite.png) -780px -60px no-repeat; width: 240px; height: 40px; position: absolute; top: 130px;} aside .contact div.chat a:hover {background-position: -780px -111px;} aside .contact div.chat a span {text-indent: -9999px; display: block;} aside .contact div.chat img {position: absolute; top: 13px; left: 14px;} aside .contact p {margin: 0 0 10px 1px; font-size: 12px;} aside .blog h1 {text-indent: -9999px; background: url(../images/footer/footer-headers.png) -276px -5px no-repeat; height: 100px; margin-bottom: 10px;} .ie6 aside .blog h1 {background-image: url(../images/footer/footer-headers.gif);} aside .blog h2 {color: #999; font-size: 12px;} /*.no-fontface*/ .ie7 aside .blog h2, .ie8 aside .blog h2 {color: #999; font-size: 11px;} aside .blog h3 {color: #fff; font-size: 13px; margin-bottom: 2px;opacity: 0.99;} aside .blog p {color: #ccc; line-height: 1.1; font-size: 11px;} aside .blog a {text-decoration: none; color: #ccc;} aside .blog p.more {width: 60px; position: absolute; bottom: -5px; right: 16px; height: 16px;} body aside .blog a p.more span {display: block; background: url(../images/sprite.png) -60px 0 no-repeat; padding: 2px 0 4px 20px; color: #ccc; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 12px; width: 40px; text-decoration: none; text-indent: -9999px;} .ie6 aside .blog a p.more span {background-image: url(../images/buts/but-more-arrow.gif);} aside .blog a:hover p.more span {color: #fff; background-position: -60px -38px;} aside .links h1 {text-indent: -9999px; background: url(../images/footer/footer-headers.png) -533px -5px no-repeat; height: 26px;} .ie6 aside .links h1 {background-image: url(../images/footer/footer-headers.gif);} /* @group Twitter feed */ aside .twitter {background: url(../images/footer/footer-headers.png) -694px -5px no-repeat; height: 200px; border: none; position: relative; left: 8px;} /*.no-fontface*/ .ie7 aside#site-footer div#twitter-feed, .ie8 aside#site-footer .twitter {} .ie6 aside .twitter {background-image: url(../images/footer/footer-headers.gif);} div#twitter-feed {position: absolute; left: 24px; top: 13px; color: #fff; width: 143px; height: 87px; padding: 5px; line-height: 1.1; overflow: hidden; font-size: 12px;} /*.no-fontface*/ .ie7 div#twitter-feed, .ie8 div#twitter-feed {line-height: 1.2; font-size: 11px;} aside .twitter a {color: #e8e8e8;} aside .twitter span.tweet-text a {color: #ccc; text-decoration: underline;} aside .twitter p.follow {width: 200px; height: 70px; position: absolute; bottom: -10px; left: 0px;} aside .twitter p.follow a {display: block; height: 100%; position: relative;} aside .twitter p.follow a span {position: absolute; width: 78px; bottom: 0px; left: 57px; color: #ccc; text-decoration: none; text-transform: uppercase; font-size: 10px; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; display: block; height: 20px; background: url(../images/sprite.png) -494px 0 no-repeat; padding: 0; text-indent: -9999px;} aside .twitter p.follow a:hover span {background-position: -494px -40px;} /* @end */ aside .blog h2, aside .blog h3, aside .blog p {margin-left: 5px; width: 217px;} aside footer {padding: 10px 0px 0px 0px; height: 20px; margin: 0px 25px 0 22px; border-top: 1px solid #3a3a3a; width: 880px; float: left;} .ie7 aside footer {position: relative; top: -12px;} aside footer ul li {position: relative; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 11px; padding: 0} aside footer ul a {color: #999; text-decoration: none; padding: 5px 2px 5px 10px;} aside footer ul a:hover {color: #fff;} aside footer ul li {float: left; list-style: none;} aside footer ul li span {width: 10px; height: 10px; border-right: 1px solid #3a3a3a; position: absolute; right: -5px; top: 2px;} aside footer ul li.last span {display: none} aside footer ul li.first {padding-right: 10px;} /* @end */ /* @group All-purpose buttons and panels*/ p.more {width: 60px; height: 16px;} p.more a {display: block; background: url(../images/sprite.png) -180px 0 no-repeat transparent; padding: 2px 0 4px 20px; color: #ccc; width: 40px !important; text-decoration: none; text-indent: -9999px; height: 16px;} .ie6 p.more a {background-image: url(../images/buts/but-more-red-arrow.gif);} p.more a:hover {background-position: -180px -38px;} .panel-small {padding: 22px 32px 22px 32px; color: #fff; background-color: rgb(48, 0, 0); -webkit-border-radius: 10px; -moz-border-radius: 10px; width: 296px; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px;} .ie8 .panel-small {line-height: 1.2;} .panel-small p, .panel-small ul {margin: 0 0 10px 0;} .panel-small li {list-style: square; list-style-position: inside;} .panel-small h2 {margin: 0 0 5px 0;} /* @end */ /* SUBSCRIBE */ section.subscribe header h1 em {text-transform: capitalize; display: block; font-size: 1.2em;} /* @group Blog */ section#blog {width: 860px; margin: 0px auto 0 auto; position: relative; clear: both; margin-top: 65px; z-index: 400; background: #fff;} section#blog img.alignright {float: right; margin: 10px 0 10px 10px;} section#blog small {font-size: 10px;} section#blog {width: 860px; margin: 0 auto; background: #fff; margin-top: 35px; position: relative; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-box-shadow: 0px -5px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0px -5px 5px rgba(0,0,0,0.3); z-index: 10; font-family: Colaborate, Tahoma, Arial, Helvetic, sans-serif;} section#blog article {padding: 20px;} section#blog hr {border: none; color: #ccc; background-color: #ccc;height: 1px; width: 93%;} div.navigation {position: relative; left: 20px; width: 500px; height: 30px;} div.navigation a {color: #890303;} div.navigation div.alignleft {position: absolute; left: 0px; width: 250px; } div.navigation div.alignright {position: absolute; right: 0px; width: 250px; text-align: right;} section#blog article h2 {font-size: 50px; font-family: ColaborateThin, Tahoma, Arial, sans-serif; margin: 0 0 10px 0;} section#blog article h2 a {text-decoration: none; color: #890303;} div.posted_on p {padding: 3px 5px 3px 10px; color: #ccc; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;margin: 0 0 10px 0; background: #3a3a3a; position: relative; padding-left: 35px;} div.posted_on p span {background: url(../images/icons/sprite-icon-blog.png) -10px -362px no-repeat; display: inline-block; width: 26px;height: 18px; position: absolute; left: 4px; top: 2px;} p.postmetadata {} section#blog {min-height: 1600px; height: auto !important;height: 1600px;} section#blog #content {width: 490px; margin: 0 30px 0 288px; padding: 16px 25px 0 25px; border-left: 1px solid #ccc;} section#blog #content p {margin: 0 0 20px 0;line-height: 1.2;} section#blog ul li {margin: 0 0 20px 20px;line-height: 1.2;} section#blog aside ul {margin: 0px 0;} section#blog #content a {color: #890303;} section#blog aside a {color: #3a3a3a;} section#blog #content div.posted_on p a, section#blog #content p.postmetadata a {color: #b86267;} section#blog h2.pagetitle{padding-left: 20px;} div.wp-caption {padding: 5px; background: #eee; margin: 0 0 20px 0;} p.wp-caption-text {font-size: 12px; padding: 5px; margin: 0 !important;} section#blog aside {position: absolute; top: 35px; left: 30px; width: 206px; margin-top: 0px;} section#blog aside li {list-style: square; margin: 0 0 5px 27px ; } section#blog aside h1 {font-size: 99px; text-transform: lowercase; font-family: Tiresias, Arial, sans-serif; margin: 0 0 18px 0;} section#blog aside p {font-size: 22px; padding: 0 0 32px 0; color: #999;} section#blog h1 a {text-decoration: none; color: #000000;} div.sociable {width: 100%; clear: both; margin: 20px 0 0 0; } div.sociable_tagline{float: left;} div.sociable ul li {list-style: none; display: inline; margin: 0px 5px 0 5px !important; padding: 0; position: relative; top: -4px; left: 5px;} div.sociable ul {margin: 50px 0 10px 0 !important;} div.sociable ul li a {padding: 0; margin: 0;} #blog aside h3.search {font-size: 24px; text-transform: lowercase; padding: 10px 0 12px 55px; background: url(../images/icons/sprite-icon-blog.png) top left no-repeat;} #blog aside .widget_recent_entries h3 {font-size: 24px; text-transform: lowercase; padding: 10px 0 12px 55px; background: url(../images/icons/sprite-icon-blog.png) 0 -76px no-repeat; margin: 0 0 15px 0;} #blog aside .widget_rss h3 {font-size: 24px; text-transform: lowercase; padding: 10px 0 12px 48px; background: url(../images/icons/sprite-icon-blog.png) 0px -460px no-repeat; margin: 50px 0 15px 0;} #blog aside .widget_rss img {display: none;} #blog aside .widget_categories h3 {font-size: 24px; text-transform: lowercase; padding: 10px 0 12px 55px; background: url(../images/icons/sprite-icon-blog.png) 0 -182px no-repeat; margin: 50px 0 15px 0;} /* @group WP Calendar */ #calendar_wrap{background: #e8e8e8; width: 206px; margin: 0 0 00 0;} #wp-calendar a { text-decoration: none; background:#000; color: #fff !important;} #wp-calendar a:hover { color:#b86267 !important} #wp-calendar #prev a, #wp-calendar #next a { font-size: 12px; background:none; text-decoration:underline; color: #000 !important;} #wp-calendar caption { font-weight: bold;font-size: 14px; text-transform:uppercase;text-align: left;padding: 10px 5px 10px 1px;background: #e8e8e8; color: #000; border-bottom: 1px solid #999; margin: 0 0 5px 0;} #wp-calendar th { font-size:14px; text-transform: capitalize; text-align:center; font-weight: normal; padding-bottom: 7px;} #wp-calendar { empty-cells: show; margin: 0px auto; width: 160px; } #wp-calendar #next a { padding-right:0px; text-align: right; } #wp-calendar #prev a { padding-left: 0px; text-align: left; } #wp-calendar a { display: block; padding: 2px 5px ;} #wp-calendar caption { text-align: left; } #wp-calendar td { padding: 2px 5px; text-align: center; font-size:13px; } /* @end */ aside form#searchform { background: #e8e8e8; padding: 5px 18px; margin: 0 0 28px 0;} aside form#searchform label { display: none; } aside form#searchform input {width: 100px; } aside form#searchform input#searchsubmit {width: auto; } .wp_syntax { color: #100; background-color: #f9f9f9; border: 1px solid silver; margin: 0 0 1.5em 0; overflow: auto;} /* IE FIX */ .wp_syntax { overflow-x: auto; overflow-y: hidden; padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0); width: 100%;} .wp_syntax table { border-collapse: collapse;} .wp_syntax div, .wp_syntax td { vertical-align: top; padding: 2px 4px;} .wp_syntax .line_numbers { text-align: right; background-color: #def; color: gray; overflow: visible;} /* potential overrides for other styles */ .wp_syntax pre { margin: 0; width: auto; float: none; clear: none; overflow: visible; font-size: 12px; line-height: 1.333; padding:5px;} pre{padding-top:20px;} /* @end */ /* @group Sitemap */ section.sitemap article ul {color: #fff; margin: 0 0 10px 10px; font-family: Colborate, Tahoma, Arial, Helvetica, sans-serif;} section.sitemap li a {color: #fff; padding: 2px 0 2px 0; display: block;} section.sitemap li a:hover {color: #ccc;} /* @end */ /* @group Cycle Pictures */ #portfolio {overflow: hidden;} div.testimonials-pager a {display: block; float: left; width: 16px;height: 15px; text-indent: -9999px; background: url(../images/sprite.png) -1157px -116px no-repeat; margin: 0 0 0 0px;} div.testimonials-pager a.activeSlide { background-position: -1181px -116px} p.output {position: absolute; top: 0px; right: 0px;;} /* @end */ /* @group Backgrounds */ .secondary-background {background-position: top left; background-repeat: no-repeat; background-color: transparent; width: 920px; height: 800px; position: absolute; bottom: 266px; right: 10px; z-index: 10;} body.our-approach-- .secondary-background {background-image: url(../images/background-images/about-approach.png);} body.environment-- .secondary-background {background-image: url(../images/background-images/about-environment.png)} body.websites-seo .secondary-background {background-image: url(../images/background-images/seo-overview.png); bottom: 470px;} body.graphic-design-overview .secondary-background {background-image: url(../images/background-images/graphic-design.png); bottom: 470px;} body.email-marketing-overview .secondary-background {background-image: url(../images/background-images/email-overview.png);background-position: 0 -170px;} body.email-marketing-subscribers .secondary-background {background-image: url(../images/background-images/email-subscribers.png);background-position: 0 -200px; width: 880px; left: 20px;} body.email-marketing-demo .secondary-background {background: url(../images/background-images/email-demo.png) 0 -210px no-repeat;} section#features article p.offers_icon small {background: url(../images/icons/sprite-icon-info-panel.gif) -130px -65px no-repeat;} body.testimonials-- .secondary-background {background: url(../images/background-images/about-testimonials.png) 15px -35px;} /* @end */ /* @group FORMS */ form.rubious {position: relative;} form.rubious div.one {width: 110px; float: left;} form.rubious div.two {width: 200px; float: left; } .no-js form.rubious label {display: inline !important;} body.subscribe-- form.rubious div.two {position: relative; top: -19px;} form.rubious label {display: none;} body.login-- form.rubious label {display: block; padding: 0; margin: 6px 0 -9px 0;} form.rubious label.checkbox {display: inline; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif;} form.rubious input, form.rubious textarea {margin: 0 0 10px 0; padding: 2px; color: #3a3a3a; font-family: Colaborate, Tahoma, Helvetica, Arial, sans-serif; font-size: 13px;} form.rubious p {margin: 0;} form.rubious textarea {height: 115px;} input.submit_button {float: right; position: relative; left: 12px;} button.subscribe_button {background: url(../images/sprite.png) no-repeat; background-position: -135px -60px; border: 0; width: 135px;height: 42px; text-indent: -9999px;float: right; position: relative; left: 12px;} button.subscribe_button:hover {background-position: -135px -111px; cursor:pointer; cursor: hand; } button.login_button {background: url(../images/sprite.png) no-repeat; background-position: -270px -60px; border: 0; width: 135px;height: 42px; text-indent: -9999px;float: right; position: relative; left: 12px;} button.login_button:hover {background-position: -270px -111px; cursor:pointer; cursor: hand; } button.submit_button {background: url(../images/sprite.png) no-repeat; background-position: -0px -60px; border: 0; width: 135px;height: 42px; text-indent: -9999px;float: right; position: relative; left: 12px;} button.submit_button:hover {background-position: 0px -111px; cursor:pointer; cursor: hand; } /* @end */ /* @group Portfolio */ section#portfolio {min-height:500px; height: auto;z-index: 400;} body.portfolio-websites div.secondary-background {display: none;} body.portfolio-email-marketing div.secondary-background {display: none;} body.portfolio-graphic-design div.secondary-background {display: none;} div#portfolionav {height: 100px;display: block; position: absolute; top: 70px; width: 940px;z-index: 500;} div#portfolionav nav#main {position: absolute; width: 682px; top: 15px; right: -15px; color: #fff; z-index: 30;} div#portfolionav nav#main ul {position: absolute; right: 57px;} div#portfolionav nav#secondary-single {position: absolute; width: 612px; top: 53px; right: 40px; left: auto; color: #fff; z-index: 30;} section#portfolio {width: 860px; margin: 0px auto 0 auto; clear: both; margin-top: 65px; z-index: 40; background: #fff; width: 860px; margin: 0 auto; background: #fff; margin-top: 35px; z-index: 10; font-family: Colaborate, Tahoma, Arial, Helvetic, sans-serif;} section#portfolio .no-borderradius { width: 860px; height:15px; position: absolute; top: 200px;z-index: 100; background: url(../images/footer/footer-curve.png) 0 -5px no-repeat;} body.new-portfolio section#portfolio .no-borderradius { width: 860px; height:15px; position: absolute; top: -15px;z-index: 100; background: url(../images/footer/footer-curve.png) 0 -5px no-repeat;} section#portfolio article {padding: 10px;width: 840px; margin: 0 auto;} section#portfolio article h1 {text-transform: lowercase; font-size: 60px; font-family: Tiresias, "Trebuchet MS", Trebuchet, sans-serif; margin: 20px 0 10px 20px; letter-spacing: -1px;} section#portfolio article p {margin: 10px 0 10px 20px; font-size: 20px; color: #999;} section#portfolio article hr {border: none; margin: 20px 0 130px 0;} div.portfolio {} .scrollable { position:relative;overflow:hidden;width: 750px; height:145px; border:1px solid #ccc; background:url(../images/scroller/h300.png) repeat-x;} .scrollable .items {width:20000em;position:absolute;clear:both;} .scrollable img {float:left;margin:20px 5px 20px 21px;background-color:#fff; padding:2px;border:1px solid #ccc;cursor:pointer; width:150px;height:100px;-moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } .scrollable .active {border:2px solid #000; z-index:9999;position:relative;} .scrollable {float:left;} .items a { display:block; float:left; margin:0px 2px;} #portfolio .portfolio { position:relative;width: 100%; height:auto; top: -60px;} .portfolio .items {width:750px;clear:both; margin: 0 auto;} .portfolio img {float:left;margin:20px 5px 20px 21px;background-color:#fff; padding:5px;border:1px solid #ccc;cursor:pointer; width:150px;height:100px;-moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); } .portfolio a img:hover { -webkit-transform: scale(1.01); -moz-transform: scale(1.01); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); border: 1px solid #bbb;} .portfolio a img:active { -webkit-transform: scale(1.00); -moz-transform: scale(1.00); -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); } .portfolio .items img { margin:0;} .portfolio .items a { display:block; float:left; margin:10px 10px;} .portfolio .active {z-index:9999;position:relative;} .potrfolio {float:left;} a.browse {background:url(../images/scroller/hori_large.png) no-repeat; display:block; width:30px; height:30px;float:left; margin:60px 10px; cursor:pointer; font-size:1px;} a.right { background-position: 0 -30px; clear:right; margin-right: 0px;} a.right:hover { background-position:-30px -30px; } a.right:active { background-position:-60px -30px; } a.left { margin-left: 0px; } a.left:hover { background-position:-30px 0; } a.left:active { background-position:-60px 0; } a.up:hover { background-position:-30px 0; } a.up:active { background-position:-60px 0; } a.down { background-position: 0 -30px; } a.down:hover { background-position:-30px -30px; } a.down:active { background-position:-60px -30px; } a.disabled {visibility:hidden !important; } .simple_overlay {display:none;z-index:10000;background-color:#333; width:675px;min-height:200px;border:1px solid #666; -moz-box-shadow:0 0 90px 5px #000; -webkit-box-shadow: 0 0 90px #000;} .simple_overlay .close {background-image:url(../images/scroller/close.png); position:absolute; right:-15px;top:-15px; cursor:pointer; height:35px;width:35px;} #img { border:1px solid #666;} .next, .prev {position:absolute;top:40%;border:1px solid #666;cursor:pointer;display:block; padding:10px 20px; color:#fff; font-size:11px; -moz-border-radius:5px; -webkit-border-radius:5px;} .prev { left:0; border-left:0; -moz-border-radius-topleft:0;-moz-border-radius-bottomleft:0; -webkit-border-bottom-left-radius:0; -webkit-border-top-left-radius:0;} .next { right:0;border-right:0; -moz-border-radius-topright:0; -moz-border-radius-bottomright:0;-webkit-border-bottom-right-radius:0; -webkit-border-top-right-radius:0; } .next:hover, .prev:hover {text-decoration:underline;background-color:#000;} .disabled { visibility:hidden; } .info { position:absolute;bottom:0; left:0; padding:10px 15px; color:#fff; font-size:11px; border-top:1px solid #666;} body.portfolio-websites section#portfolio .info p {font-size: 12px; width: auto; margin: auto; padding: auto; height: 70px; color: #fff;} .info p a {color: #fff; display: block; margin: 0;} .info strong {display:block; font-weight: normal;} .progress { position:absolute; top:45%;left:50%;display:none;} .next, .prev, .info {background:#333 !important; background:rgba(0, 0, 0, 0.6) url(../images/scroller/h80.png) repeat-x; } #tooltip {display:none; background:url(../images/tooltip.png);font-size:12px;height:70px;width:160px; padding:25px;color:#fff;} body.portfolio-websites section#portfolio #tooltip p {font-size: 12px; width: auto; margin: auto; padding: auto; height: 70px; color: #fff;} #tooltip p a {color: #fff; display: block; margin: 3px 0 0px 0;} #gallery .disabled {visibility:visible !important;} #gallery .inactive {visibility:hidden !important;} /* @end */ /* @group Browser hacks */ #print-footer {display: none;} /* Target Firefox 2 and older */ .ie6 .secondary-background {display: none;} label.error {display: block !important; position: absolute; left: -160px; top: 10px; width: 100px; padding: 20px; background: #300000; color: #f00; -webkit-border-radius:10px; font-size: 18px; line-height: 1.1;} input.error {border: 2px solid red;} /* @end */ @media print { body {background: #fff;} body div.wrapper {background: #fff;} #site-footer, #info-footer {display: none;} #print-footer {display: block; font-family: Colaborate, Tahoma, Arial, Helvetica; font-size: 13px;} body section#information header h1, body section#information header h1 span {color: #000 !important;} body section#information header p {color: #000 !important;} div.secondary-background {display: none;} nav#main, nav#secondary, nav#secondary-single {display: none;} aside#newsletter h2, #search {display: none;} aside#newsletter {background: none;} header#rubious {height: 50px; border: none;-webkit-border-radius:0;-webkit-box-shadow:0 0 0; margin-bottom: 0;} header#rubious h1 {position: absolute; top: 5px; text-indent: 0; height: 20px;} header#rubious h1 a {text-decoration: none;color: #000; font-size: 40px;} header#rubious h1 a span {display: block; text-indent: 0px;} header#pageTitle {margin-top: 20px;} section#information {margin-top: 0px; top: -40px;} section#information header{margin-top: 70px;} section#information header a{color: #000 !important;} aside#newsletter p.tel {position: absolute; top:5px; color: #000; font-size: 30px; opacity: 0.99;} article.main {background: none; color: #000;padding-bottom: 0;outline: 1px solid #ccc;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;} article.post a:after { content: " (" attr(href) ") "; font-size: 90%; } a[href^="/"]:after { content: " (http://www.rubious.co.uk/" attr(href) ") "; } p.postmetadata a:after {content: "" !important;} div.sociable, div#rss-3, div#categories-2, div#recent-posts-3 {display: none;} section#blog {min-height: 10px !important;height: auto !important;} div.portfolio-nav a {display: none !important;} p.call-to-action {display: none;} div.testimonials-wrapper {background: none; border: 1px solid #ccc;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;} #testimonials p, #testimonials p.cite { color: #000 !important;} .panel-small {background: none; color: #000;border: 1px solid #ccc;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;} body.environment-- header h1 {font-size: 40px !important; display: inline;} body.websites-cms header h1 em{color: #000 !important;} body.websites-cms article.main, body.login-- article.main, body.subscribe-- article.main {top: 70px;} .no-borderradius{display: none;} body.websites-overview section#information header h1 {font-size: 37px !important} body.websites-overview section#information header p {font-size: 20px !important} } /* Packages - Quote */ body.builder-quote #mainContent header#pageTitle {width: 230px; z-index: 10;} body.builder-quote div.main {padding: 22px 32px 22px 32px; color: #fff; font-family: Colaborate, Tahoma, Arial, Helvetica, sans-serif; background-color: #fff; position: relative; float: right; color: #000; width: 528px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; border: 1px solid #fff;} body.builder-quote .ie6 div.main {width: 400px;} body.builder-quote .ie6 div.main .no-borderradius-top, body.builder-quote .ie7 div.main .no-borderradius-top, body.builder-quote .ie8 div.main .no-borderradius-top {width: 594px; height: 15px; position: absolute; top: -16px;left: -1px; background: url(../images/background-images/divmain592.png) top left no-repeat transparent ;} body.builder-quote .ie6 div.main, body.builder-quote .ie7 div.main, body.builder-quote .ie8 div.main {padding-top: 6px; position: relative; top: 16px;;} body.builder-quote .ie6 div.main .no-borderradius-bottom, body.builder-quote .ie7 div.main .no-borderradius-bottom, body.builder-quote .ie8 div.main .no-borderradius-bottom {width: 594px; height: 15px; position: absolute; bottom: -16px;left: -1px; background: url(../images/background-images/divmain592.png) bottom left no-repeat transparent ;} body.builder-quote div.main header {background: url(../images/packages/project-brief-builder.png) left center no-repeat; width: 450px; padding-left: 110px; position: relative; left: -12px;} body.builder-quote #mainContent .main header h1 {font-weight: bold; font-size: 32px;} body.builder-quote #articleHeader header#pageTitle h1 em {color: #fff; text-transform: none;} body.builder-quote #articleHeader header#pageTitle p {margin-top: 10px;;} body.builder-quote #articleHeader header#pageTitle h1 em.brief {font-size: 1.4em; display: inline-block; padding: 13px 0 0 0;} body.builder-quote .ie6 header#pageTitle {position: absolute; left: 0; top: 0;} body.builder-quote .ie6 #articleHeader header#pageTitle h1 {font-size: 50px;} body.builder-quote .ie6 header#pageTitle p {width: 180px;} form#quoteForm br {clear: both;} form#quoteForm legend {} form#quoteForm label {display: block; cursor: pointer; min-height: 27px; position: relative; margin: 5px 0 0 0;} form#quoteForm label:hover {color: #333;;} form#quoteForm label em {display: block; width: 140px; float: left; position: relative; top: 2px; font-weight: normal; font-style: normal;} form#quoteForm label input {display: block; float: left;font-size: 15px} form#quoteForm label input#URL {width: 395px; position: relative; top: -4px;} form#quoteForm textarea {width: 528px; height: 60px;max-height: 215px; font-size: 15px; padding: 5px;} form#quoteForm label.radio {width: auto; float: left; margin: 10px 5px 5px 5px; position: relative; top: -10px; left: 16px;} form#quoteForm label.radio em { width: auto;margin: 0 5px 0 0; border: 1px solid #eee; position: relative; left: -20px; top: 0px;padding: 20px 20px 20px 35px;-webkit-border-radius:10px; -moz-border-radius:10px;border-radius:10px} form#quoteForm label.radio input {position: absolute; top: 20px; left: -10px; z-index: 10;} form#quoteForm label.radio em:hover{background: #eee;} form#quoteForm label.radio em:active{background: #ddd; border: 1px solid #890303;} form#quoteForm strong.top em{width: 400px; display: block; margin: 0 0 10px 0;} form#quoteForm strong.top em{width: 400px; display: block; margin: 0 0 10px 0;} form#quoteForm input[type=radio]:checked + em {border: 1px solid #890303; background: #eee; color: #890303;} form#quoteForm span.tooltip {background: #000; display: none; width: 200px; color: #fff; padding: 10px; position: absolute; left: -245px; z-index: 200;} div.button {width: 200px;float: right;} form#quoteForm div.button span.tooltip {position: absolute; left: 150px;margin-top: 8px; z-index: 200;} form#quoteForm label:hover span.tooltip, form#quoteForm label input:focus + span.tooltip {} form#quoteForm span.warning {background: #B86267; display: none; width: 200px; color: #fff; padding: 10px; position: absolute; left: -245px; z-index: 150;} form#quoteForm span.crossSell {background: #c0d4a0; display: none; width: 200px; color: #fff; padding: 10px; position: absolute; left: -245px; z-index: 150;color:#000} /*form#quoteForm span.crossSell i {font-size: 0px; line-height: 0%; width: 0px;border-top: 10px solid #fff;border-bottom: 10px solid #fff;display: block;position: absolute; right: -20px; top: 2px; border-left: 20px solid #c0d4a0;}*/ /*form#quoteForm span.tooltip i {font-size: 0px; line-height: 0%; width: 0px;border-top: 10px solid #fff;border-left: 20px solid #000;border-bottom: 10px solid #fff;display: block;position: absolute; right: -20px; top: 2px;}*/ /*form#quoteForm span.warning i {font-size: 0px; line-height: 0%; width: 0px;border-top: 10px solid #fff;border-bottom: 10px solid #fff;display: block;position: absolute; right: -20px; top: 2px; border-left: 20px solid #B86267;}*/ form#quoteForm span.tooltip i, form#quoteForm span.crossSell i, form#quoteForm span.warning i {font-size: 0px; line-height: 0%; width: 28px; height: 28px; background: url(../images/icons/arrow-right.png) top left no-repeat;display: block;position: absolute; right: -20px; top: -2px;} form#quoteForm label + p {clear: both; padding: 20px 0 0 0;;} fieldset {border-top: 1px solid #890303;width: 562px;position: relative;left: -32px;padding: 25px 5px 15px 25px;margin: 20px 0 0 0;} form#quoteForm fieldset hr {color: #fff; background: #fff; border: 0; height: 1px; margin: 0;} .ie8 form#quoteForm fieldset hr, .ie7 form#quoteForm fieldset hr, .ie6 form#quoteForm fieldset hr {margin: 25px 0 0 0; width: 10px;} fieldset legend {background: #890303;border: 1px solid #890303; -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;color: #fff;padding: 4px 8px 4px 8px;font-weight: normal;text-transform: lowercase;} form#quoteForm div.one {width: 270px;float: left; padding: 0; margin: 0;} form#quoteForm div.two {width: 250px; float: left; margin: 0; padding: 0 0 0 18px;} form#quoteForm div.one strong input {width: 140px;} form#quoteForm div.one label em {display: block; width: 120px; float: left; position: relative; top: 2px; font-style: normal; font-weight: normal;} form#quoteForm div.two textarea {width: 170px; height: 110px;max-height: 215px; font-size: 15px; padding: 5px; float: right; position: relative; top: -0px; left: 55px;} form#quoteForm strong.address em{width: 100px; display: inline; margin: 0 0 0px 0; font-style: normal; font-weight: normal;} form#quoteForm h2, form#quoteForm label span.section { padding: 0 0 10px 0; margin: 20px 0 10px 0; width: 540px;display: block;font-family: Colaborate, "Trebuchet MS", Trebuchet, sans-serif; font-weight: normal; font-size: 18px; color:#bd0000; border-bottom: 2px solid #ccc;} form#quoteForm label span.section { border-bottom: 2px solid #fff;} form#quoteForm label span.selected {border-bottom: 2px solid #ccc;} .ie7 form#quoteForm input.sectionOpener {display: block; position: absolute; left: 0px; top: 20px;} .ie6 form#quoteForm input.sectionOpener {display: block; position: absolute; left: 0px; top: 0px;} .ie6 form#quoteForm label span.section, .ie7 form#quoteForm label span.section {padding-left: 30px; width: 510px;} form#quoteForm input[type="checkbox"]{width: 20px;} form#quoteForm label.error {display: block !important; position: absolute; left: -250px; top: -10px; width: 100px; padding: 10px; background: #fff;background: rgba(255,255,255,0.9); color: #f00; -webkit-border-radius:10px; font-size: 18px; line-height: 1.1; z-index: 100;} input.error {border: 2px solid red;} form#quoteForm div#remember {position: absolute; width: 200px; padding: 10px; left: -250px; bottom: 10px;background: #000; color: #fff; display: none;} form#quoteForm div#remember input {width: 180px; margin: 10px 0 0 0;} #loadingMessage {border: 1px solid #ccc; background: #fff; color: #000; display: block; position: absolute; width: 150px; height: 60px; text-align: center; top: 500px; left: 40px; } #loadingMessage p {font-size: 14px;color: #000; width: 100%;} #loadingMessage p span {position: absolute; left: 0 ; top: 0; width: 100%;} /* Enquiry form */ div.enquiry {background: #fff; color: #000; padding: 0 10px 10px 100px; position: relative; margin: 0 0 20px 0;} div.enquiry p {padding: 10px 0 0 0; margin: 0;} div.enquiry a {color:#000;} div.enquiry .ruby {} div.enquiry div {display: block; width: 54px; height: 54px; background: url(../images/packages/icons-packages.png) top left no-repeat;position: absolute; left: 18px; top: 30px;} div.enquiry .sapphire {background-position: -54px 0; } div.enquiry .emerald {background-position: -108px 0;} div.enquiry .ruby {background-position: -162px 0; } /* Packages */ body.websites-package- .secondary-background{display: none;} body.ecommerce-package- .secondary-background{display: none;} body.websites-package- .packages, body.ecommerce-package- .packages {width: 860px; margin: 60px auto 60px auto; z-index:10; min-height: 400px;height: auto !important ;height: 400px;} .packages article {width: 175px; float: left; margin: 0 13px 20px 0; padding: 15px 15px 20px 15px; } .packages article.ruby {margin-right: 0px;} .packages article.popular {position: relative; top: -20px;} .ie7 .packages article.popular {position: static; top: -20px;} #packages-4 article {background: url(../images/packages/info-panel-web_02.png) bottom left no-repeat;} .packages h2 {font-size: 30px; letter-spacing: -1px; font-family:Tiresias, Geneva, "Trebuchet MS", Trebuchet, sans-serif; ;} .packages article h2 {background: url(../images/packages/info-panel-web_01.png) top left no-repeat; position: relative; top: -23px; left: -15px;width: 205px; height:55px; z-index: 10;} .packages article h2 i {display: block; width: 54px; height: 54px; background: url(../images/packages/icons-packages.png) top left no-repeat;position: absolute; left: 22px; top: 10px; } #packages-3 article h2 i { top: 15px;} .packages article h2 span{position: absolute; top: 25px; left: 76px;} .packages article.sapphire h2 i {background-position: -54px 0; left: 13px;} .packages article.emerald h2 i {background-position: -108px 0; left: 11px;} .packages article.ruby h2 i {background-position: -162px 0; left: 30px;} .packages article.sapphire h2 span {left: 58px;} .packages article.emerald h2 span {left: 62px;} .packages article.ruby h2 span {left: 90px;} .packages ul {list-style: none;} .packages ul li:first-child {border-top:1px solid #ddd;} .packages ul li {border-bottom:1px solid #ddd; padding: 0px 0 0px 0; text-align: center; font-weight: bold; color: #b90303;font-size: 15px;} .packages ul li span { display: block; padding: 6px 0 6px 0; cursor: default; z-index: 10;} .packages ul li span.tooltip-left, .packages ul li span.tooltip-right {cursor: pointer;} .packages article ul li .tooltip {display: none; padding:10px; font-size:15px; color:#fff; border: 1px solid #000; background: #000; z-index: 100; width: 200px; } .packages article li:hover span.tooltip-left, .packages article li:hover span.tooltip-right {text-decoration: underline;} .packages .popular ul li {font-size: 17px;} .packages .popular .price {margin: 20px 0 20px 0; background: url(../images/packages/price-bubble-big.png) top center no-repeat; height: 110px;} .packages .price h4{text-transform: uppercase; font-weight: normal; font-size: 12px; text-align: center;color: #eee;} .packages .popular .call-to-action {margin: 0 0 0px 0;} #packages-3 article .tooltip h2, #packages-4 article .tooltip h2 {background: none; text-align: left; font-weight: bold; font-size: 15px; position: static; margin: 0 0 10px 0; padding: 0; height: auto; letter-spacing: 0; line-height: 1.3; width: auto;} .packages article .tooltip p {text-align: left; font-weight: normal; margin-bottom: 10px; font-size: 13px; line-height: 1.3;} .packages article .tooltip p em {font-style: italic} .packages article .tooltip ul {list-style: disc; margin: 10px 0 10px 20px;} .packages article .tooltip li:first-child {border-top:none;} .packages article .tooltip li {border-bottom:none; padding: 0px 0 5px 0; text-align: left; font-weight: normal; color: #fff; font-size: 13px; } .packages ul li i {color: #999;} .packages p.call-to-action {position: relative; top: -15px;} .packages p.call-to-action a{position: static; margin: 20px auto;} .packages .price {background: url(../images/packages/price-bubble.png) top center no-repeat; padding: 10px 0 0 0; margin: 10px 0 0 0; height: 90px;} .packages .price h3{text-transform: uppercase; font-weight: normal; font-size: 13px; text-align: center;color: #ddd;} .packages .price p {color: #fff;font-weight: bold; text-align: center; font-size: 20px; margin: 8px 0 0 0;} .packages .price p span {font-size: 26px;} body.design-package- #packages-3 {width: 900px; position: relative; left: 40px;} #packages-3 article {background: url(../images/packages/info-panel-ecom_02.png) bottom left no-repeat; width: 241px; float: left; margin: 0 15px 60px 0; padding: 15px 15px 20px 15px; } #packages-3 article h2 {background: url(../images/packages/info-panel-ecom_01.png) top left no-repeat;width: 271px; position: relative; top: -27px; left: -15px; height:55px;} #packages-3 article h2 span{position: absolute; top: 31px; left: 76px;} #packages-3 article.sapphire h2 i {background-position: -54px 0; left: 43px;} #packages-3 article.emerald h2 i {background-position: -108px 0; left: 41px;} #packages-3 article.ruby h2 i {background-position: -162px 0; left: 60px;} #packages-3 article.sapphire h2 span {left: 87px;} #packages-3 article.emerald h2 span {left: 95px;} #packages-3 article.ruby h2 span {left: 120px;} .packages article .tooltip .arrow {display: block; width: 40px; height: 40px; position: absolute; left: -25px; top: 40%; background: url(../images/icons/arrow-left.png) top left no-repeat;} .packages article .tooltip .arrow-right {display: block; width: 40px; height: 40px; position: absolute; right: -35px; top: 40%; background: url(../images/icons/arrow-right.png) top left no-repeat;} .packages article p.customise {text-align:center; margin-top:6px; font-size: 14px;} body.websites-package- .packages article p.customise a, body.ecommerce-package- .packages article p.customise a {color: #B86267;} body.websites-package- .packages article p.customise a:hover, body.ecommerce-package- .packages article p.customise a:hover {color: #890303;} body.websites-package- section#mainContent article.main h2, body.ecommerce-package- section#mainContent article.main h2 {font-size: 35px; font-weight: bold;} div.customise {width: 350px; float: right; text-align: center; height: 240px; position: relative; left: 15px; top: 16px;} div.customise img {border: 1px solid #fff;} div.customise a {display: block; height: 240px;} div.customise a span {text-decoration: none; background: url(../images/packages/but-black-brief-builder.png); width: 350px; height: 65px; display: block; text-indent: -9999px; position: relative; top: -35px;} div.customise a:hover span {background-position: 0 73px;} p.customisation {width: 350px; position: relative; top: 45px;} div.image-caption {border: 1px solid #ccc; margin: 0 0 30px 0;} div.image-caption span {color: #555; font-size: 12px; font-style: italic; display: block; position: relative; top: 18px;} body.portfolio-websites div#work2 {width: 830px !important; height: 530px !important;} body.new-portfolio section#portfolio {position: relative; overflow: visible !important;} .borderradius body.new-portfolio section#portfolio .no-borderradius {display: none;} body.new-portfolio section#portfolio { -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px;} #work2 div h2 {color: #890303; font-size: 22px;} #work2 div {width: 830px !important; display: none; } #work2 div .contents {position: absolute; top: 23px; right:25px; width: 230px !important; display: block;} #work2 div .contents a {color: #B86267;} #work2 div .contents p {font-size: 16px; margin: 5px 0 5px 0; color: #000; line-height: 1.2;} #work2 div .contents img {margin: 0px 0 10px 0;} a#work2-prev, a#work2-next {width: 61px; height: 67px; display: block; position: absolute; z-index: 100; top: 250px; } a#work2-prev span, a#work2-next span {display: none;} a#work2-prev {left: -27px; background: url(/portfolio/web2/images/arrow-left.png) 0 0 no-repeat;} a#work2-next {right: -27px;background: url(/portfolio/web2/images/arrow-right.png) 0 0 no-repeat;} a#work2-prev:hover {background-position: 0 -119px ;} a#work2-next:hover {background-position: 0 -119px;}