@import url("reset.css");

/* -------- Journey css ---------- **/
/* ----------------- by SJJ ---------------- */


* { font-family: Arial, Verdana, Tahoma, sans-serif; line-height: 110%;}
body {background: #ecedee url(../img/bg/body-bg.gif) center top no-repeat; padding-top: 0px; color: #2e2e2e;  }

hr { text-align: right; width: 100%; height: 1px; color: #d4dee8; border: none;  margin: 15px 0px;} /* For Internet Explorer */
html>body hr { margin-right: 0; width: 100%; height: 1px; background-color: #d4dee8; border: none; margin: 15px 0px;} /* For Gecko-based browsers */
html>body hr { margin-right: 0; width: 100%; height: 1px; background-color: #d4dee8; border: 0px solid #d4dee8; margin: 15px 0px;} /* For Opera and Gecko-based browsers */

.clear {clear: both;}
.left {float: left;}
.right {float: right;}

#wrapper {width: 960px; height: 580px; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: auto; background-position: top left; background-repeat: no-repeat; position: relative; }
div.home {background-image: url(../img/bg/page/home-bertie.jpg);}
div.all-about-you-and-us {background-image: url(../img/bg/page/all-about-you-and-us.jpg);}
div.dos-and-donts {background-image: url(../img/bg/page/dos-and-donts.jpg);}
div.lovely-work {background-image: url(../img/bg/page/lovely-work.jpg);}
div.happy-clients {background-image: url(../img/bg/page/happy-clients.jpg);}
div.really-useful-stuff {background-image: url(../img/bg/page/really-useful-stuff.jpg);}
div.reach-us {background-image: url(../img/bg/page/reach-us.jpg);}
div.latest-news {background-image: url(../img/bg/page/latest-news2.jpg);}

#carflash {top: 20px; left: 0px; position: absolute;}

#content {position: absolute; bottom: 0px; right: 0px; height: 283px; width: 780px; margin-right: 10px; margin-bottom: 62px; }


/* ------ Left Col -----*/
#leftcol {width: 155px; height: 329px; float: left; background-color: #ffffff;}
#leftcol a.logo {width: 155px; height: 58px; background: url(../img/logo.jpg) top left no-repeat; display: block; text-indent: -9999px; margin-bottom: 20px;}
#leftcol a.logo img {display: none;} 

#leftcol ul {margin: 0px 10px; width: 135px;}
#leftcol ul li {padding: 2px 0px;}
#leftcol ul li a {text-decoration: none; font-size: 75%; color: #58595b; font-weight: bold;}
#leftcol ul li a:hover {color: #fd5137}
#leftcol ul li.active a {color: #fe3997;}
#leftcol ul.misc {margin-top: 65px;}



/* ------ Main Col -----*/
#maincol {width: 579px; height: 235px; margin-top: 58px; float: left; padding: 18px; background: url(../img/bg/maincol.png) top left repeat; }

#scroll {overflow: auto; width: 579px; height: 235px;} 
#scroll h1 {font-weight: bold; font-size: 85%; margin-bottom: 10px; color: #fe2b12;}
#scroll p {margin-bottom: 10px; font-weight: bold; font-size: 75%; color: #333333;}
#scroll p.small {font-size: 70%;}
#scroll a {font-weight: bold; font-size: 100%; color: #333333; text-decoration: underline;}
#scroll p a {font-size: 100%;}
#scroll a: hover {text-decoration: none;}

#scroll ul li {font-weight: bold; font-size: 75%; color: #333333; padding-left: 9px; background: url(../img/bg/arrow.gif) 0px 5px no-repeat; margin-bottom: 3px; line-height: 15px;}

#left {float: left; width: 257px; margin-right: 10px;}
#right {float: left; width: 258px; margin-left: 10px;}


/* ------ home page specific -----*/
/*div.home #content {height: 265px} 
div.home #leftcol {height: 308px;}
div.home #leftcol ul.misc {margin-top: 44px;}*/
div.home a.bertie {display: block; width: 147px; height: 147px; text-indent: -9999px; outline: none; position: absolute; top: 185px; left: 804px;}


/* ------ do's and don'ts page specific -----*/
div.dos-and-donts #left {width: 297px;}
div.dos-and-donts #right {width: 218px;}
div.dos-and-donts #scroll ul.we-do {width: 169px; float: left;}
div.dos-and-donts #scroll ul li {margin-bottom: 2px;}
div.dos-and-donts #scroll ul.categories li {font-size: 70%; color: #fe2b12; margin-bottom: 1px; line-height: 11px; background: none;}

/* ------ lovely work page specific -----*/
div.lovely-work #left {width: 510px;}
div.lovely-work #scroll #left h1 {width: 390px;}
div.lovely-work #scroll ul.work li {background: none; float: left; font-size: 110%; width: 150px; padding-left: 0px; padding-right: 30px;}
div.lovely-work #scroll ul.work li h2 {color: #fe2b12; margin-top: 5px; margin-bottom: 10px;}
div.lovely-work #scroll ul.work li a {color: #333333;}
div.lovely-work #scroll ul.work li a:hover {text-decoration: none;}
div.lovely-work #scroll ul.work li span {font-size: 75%;}
div.lovely-work #scroll ul.work li.last {padding-right: 0px;}

/* ------ happy clients page specific -----*/
div.happy-clients #scroll ul {float: left; width: 129px; padding-right: 20px;}
div.happy-clients #scroll ul.last {padding-right: 0px;}
div.happy-clients #scroll ul li {background: none;}
div.happy-clients #scroll ul li a {color: #fe2b12; text-decoration: none; border-bottom: 1px solid #333333; padding-bottom: 0px;}
div.happy-clients #scroll ul li a:hover {border-bottom: none;}

/* ------ really useful stuff page specific -----*/
div.really-useful-stuff #left {width: 165px;}
div.really-useful-stuff #right {width: 350px;}
div.really-useful-stuff #right table.downloads {float: left; width: 200px;}
div.really-useful-stuff #right table.downloads tr td {font-weight: bold; font-size: 75%; color: #333333;}
div.really-useful-stuff #right #pnlForm {width: 150px; float: left;}
div.really-useful-stuff #right #pnlForm span {margin-top: 10px; display: block; font-size: 75%; font-weight: bold; color: #333333;}
div.really-useful-stuff #right #pnlForm input.textbox {width: 150px; border: none;}
div.really-useful-stuff #right #pnlForm input.button {margin-top: 10px; display: block; width: 56px; height: 19px; background: url(../img/bg/request.gif) top left no-repeat; text-indent: -9999px; border: none; cursor: pointer; cursor: hand; }

/* ------ reach us page specific -----*/
div.reach-us #left {width: 200px;}
div.reach-us #right {width: 315px;}
div.reach-us #left p, div.reach-us #left a {font-size: 85%;}
div.reach-us #left p.small {font-size: 70%; margin-top: 70px;}
div.reach-us #right #pnlForm ul.left {width: 157px; float: left;}
div.reach-us #right #pnlForm ul.right {width: 158px; float: left;}
div.reach-us #right #pnlForm ul li {background: none; margin-right: 10px;}
div.reach-us #right #pnlForm span {margin-top: 10px;}
div.reach-us #right #pnlForm input.textbox {width: 150px; border: none;}
div.reach-us #right #pnlForm textarea.textarea {width: 150px; border: none; height: 60px;}
div.reach-us #right #pnlForm input.button {margin-top: 10px; float: right; display: block; width: 56px; height: 19px; background: url(../img/bg/send.gif) top left no-repeat; text-indent: -9999px; border: none; cursor: pointer; cursor: hand; }

/* ------ portfolio page specific -----*/
div.branding-digital-print #left {width: 255px;}
div.branding-digital-print #right {width: 260px;}
div.branding-digital-print #scroll ul.work {width: 100px; float: left;}
div.branding-digital-print #scroll ul.work li, div.branding-digital-print #scroll ul.case-studies li {background: none;}
div.branding-digital-print #scroll ul.work li a, div.branding-digital-print #scroll ul.case-studies li a {text-decoration: none; border-bottom: 1px solid #333333;}
div.branding-digital-print #scroll ul.work li a:hover, div.branding-digital-print #scroll ul.case-studies li a:hover {border-bottom: none;}
div.branding-digital-print #scroll ul.work li.active a, div.branding-digital-print #scroll ul.case-studies li.active a {color: #fe2b12;}

div.branding-digital-print #image-nav {float: right;}
div.branding-digital-print #image-nav ul li {float: left; background: none; padding-left: 0px; padding-right: 3px;} 
div.branding-digital-print #image-nav #page {padding-left: 3px; padding-right: 0px;}
div.branding-digital-print #image-nav ul li.divider {padding-left: 4px; padding-right: 4px;}
div.branding-digital-print #image-nav ul li a.previous, div.branding-digital-print #image-nav ul li a.next {text-indent: -9999px; display: block; width: 9px; height: 12px;} 
div.branding-digital-print #image-nav ul li a.previous {background: url(../img/bg/previous.gif) 0px 3px no-repeat;}
div.branding-digital-print #image-nav ul li a.next {background: url(../img/bg/next.gif) 0px 3px no-repeat;}
div.branding-digital-print #scroll p.small span {color: #fe2b12; display: block;}