/* + Commune + Global Styles + Don Brown + http://www.donb.co.uk */ /* ########## Body ########## */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;} /* remember to define focus styles! */ :focus{outline:0;} body{font-size:62.5%;line-height:1.5em;} ol,ul{list-style:none;} /* tables still need 'cellspacing="0"' in the markup */ table{border-collapse:separate;border-spacing:0;} caption,th,td{text-align:left;font-weight:normal;} blockquote:before,blockquote:after,q:before,q:after{content:"";} blockquote,q{quotes:"" "";} /* Start of Specific Styles */ body{margin:0 auto;font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#444;} /* ########## General ########## */ img,input,select,option{vertical-align:middle;} p{font-size:14px;line-height:20px;padding-bottom:10px;} h1{font-size:18px; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; font-style:italic; color:#444; line-height:20px;} h2{font-size:2em;color:#6EC3E1;line-height:1.2em;margin-bottom:15px;} h3{font-size:1.7em;} h4{font-size:1.2em;} em, i {font-style:italic;} strong, b {font-weight:bold;} /* ########## Links ########## */ a{color:#444;text-decoration:none;} a:hover{text-decoration:underline;} /* ########## Useful ########## */ .errors {color:#FF0000;} .left{float:left;} .right{float:right;} .clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clear{display:inline-table;} /* Hides from IE-mac \*/ * html .clear{height:1%;} .clear{display:block;} /* End hide from IE-mac */ .clear{clear:both;} #wrapper {width:100%; min-height:1472px; height:auto !important; height:1472px;} .main {margin:0 auto; width: 950px; position:relative;} #commune img {margin:25px 0 0 0px;} #experience_top {margin:10px 0 0 2px; clear:both;} #questions {position:relative; margin:-45px 0 0 0px;} .yes, .no {cursor:pointer;} .yes:hover, .no:hover {text-decoration:underline;} .q2, .q3 {display:none;} .question {font-family:Georgia, "Times New Roman", Times, serif; font-size:29px; font-style:italic; color:#fff; margin:25px 0; width:400px; line-height:31px;} .question span p, .question span {font-family:Georgia, "Times New Roman", Times, serif; font-size:29px; font-style:italic; color:#fff; line-height:31px;} .response {font-family:Arial, Helvetica, sans-serif; font-size:17px; color:#fff; margin-bottom:18px;} .skip a {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#fff;} .a2, .a3 {display:none;} .answer {font-family:Georgia, "Times New Roman", Times, serif; font-size:29px; font-style:italic; color:#fff; margin:25px 0; width:400px; line-height:31px; display:none;} .answer span p, .answer span {font-family:Georgia, "Times New Roman", Times, serif; font-size:29px; font-style:italic; color:#fff; line-height:31px;} .answer a {text-decoration:underline; color:#fff;} #general-page {margin:10px 0 0 192px;} #general-page h1 {padding-bottom:15px;} #general-page textarea {width:300px; height:100px;} #newsletter {position:absolute; top:90px; right:170px; cursor:pointer; z-index:10;} #overlay {background-color:#fff; width:100%; height:1472px; position:absolute; display:none; z-index:99;} #newsletter-wrapper {width:100%; height:100%; position:absolute; z-index:100; display:none;} #newsletter-box {width:554px; height:411px; background:url(../images/newsletter-bg.png) no-repeat; position:absolute; top:170px; left:102px;} #newsletter-box form {position:relative; margin:65px 0 0 31px;} #newsletter-box label {font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#444; display:block; margin-bottom:18px;} #newsletter-box .input {width:229px; height:18px; border:#aaa solid 1px; display:block; margin-bottom:22px;} #newsletter-box .signup {position:absolute; top:30px; left:30px;} #newsletter-box .close {position:absolute; cursor:pointer; font-family:Arial, Helvetica, sans-serif; top:10px; right:15px; font-size:12px; color:#605f5f;} #newsletter-box .submit {position:absolute; cursor:pointer; font-family:Arial, Helvetica, sans-serif; color:#605f5f; font-size:14px; bottom:-15px; right:15px; background:none; border:none; cursor:pointer;} #nav {position:absolute; top:126px; left:3px; height:10px; z-index:9;} #nav ul {list-style:none;} #nav li {float: left; height:38px; background:url(../images/seperator.gif) center right no-repeat;} #nav li a {background:url(../images/nav_new.gif); display:block; text-indent:-5000px; overflow:hidden; height:10px; margin:12px 15px 0 15px;} #nav .n-home a {width:37px; background-position:0 0; margin-left:0;} #nav .n-home a:hover {background-position:0 -10px;} #nav .n-home .selected {background-position:0 -10px;} #nav .n-work a {width:67px; background-position:473px 0;} #nav .n-work a:hover {background-position:473px -10px;} #nav .n-work .selected {background-position:473px -10px;} #nav .n-what a {width:81px; background-position:384px 0;} #nav .n-what a:hover {background-position:384px -10px;} #nav .n-what .selected {background-position:384px -10px;} #nav .n-exp a {width:73px; background-position:279px 0;} #nav .n-exp a:hover {background-position:279px -10px;} #nav .n-exp .selected {background-position:279px -10px;} #nav .n-links a {width:43px; background-position:183px 0;} #nav .n-links a:hover {background-position:183px -10px;} #nav .n-links .selected {background-position:183px -10px;} #nav .n-news a {width:36px; background-position:119px 0;} #nav .n-news a:hover {background-position:119px -10px;} #nav .n-news .selected {background-position:119px -10px;} #nav .n-contact a {width:58px; background-position:58px 0;} #nav .n-contact a:hover {background-position:58px -10px;} #nav .n-contact .selected {background-position:58px -10px;} #body {position:relative; padding-top:140px; height:300px; width:100%;} #homepage {position:relative; width:329px; left:0px; top:50px;} #homepage h1 {padding-bottom:10px;} #home-testimonials {position:absolute; width:196px; margin:0 0 0 460px;} #home-testimonials h2 {padding-bottom:10px; margin-bottom:0; font-size:18px; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; font-style:italic; color:#444; line-height:20px;} #home-testimonials li {margin-bottom:15px; font-size:11px; line-height:15px;} #home-testimonials li a {font-weight:bold; font-size:11px;} #contact {position:relative; background:url(../images/contact-bg.gif) no-repeat; width:482px; height:388px; top:70px; left:0px; font-family:Georgia, "Times New Roman", Times, serif;} .youcan {color:#e911b2; background:#e4e127; font-size:13px; font-weight:bold; font-style: italic; left:41px; position:absolute; top:-10px; letter-spacing:-0.5px;} .emailus {position:absolute; right:190px; top:41px;} .writetous {color:#393939; font-size:14px; position:absolute; top:50px; left:50px; text-align:center; width:206px; letter-spacing:-2px; letter-spacing:-1px;} .writetous span {color:#e911b2;} .comealong {color:#010101; font-size:14px; font-style:italic; position:absolute; top:195px; left:265px; text-align:center; letter-spacing:-0.5px; line-height:18px;} .comealong a {color:#ff0000; text-decoration:underline;} #homepage p {font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#444; line-height:20px;} #whatwedo {width:565px; margin:50px 0 0 0px; position:relative;} #whatwedo img {margin-bottom:15px;} #whatwedo .case_studies_btn {position:absolute; right:-150px; top:250px;} #whatwedo .case_studies_btn:hover {opacity:0.9;} #whatwedo p {font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#444; line-height:20px; margin-bottom:25px;} #whatwedo-list p {font-family:Georgia, "Times New Roman", Times, serif; font-size:24px; line-height:26px; color:#000; font-style:italic;} #experience {margin:50px 0 0 0px;} #experience img {margin-bottom:15px;} #experience p {font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#444; line-height:20px; margin-bottom:15px; width:555px;} #exp_cats {list-style:none; margin:0 0 35px 25px;} #exp_cats li {font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000; float: left; width: 220px; height:40px; margin-right: 20px; text-transform:uppercase;} #exp_holder {clear:both; border-top:#000 dotted 1px; width:841px;} .exp-cat h2 {font-family:"Myriad Pro", Arial, Helvetica, sans-serif; font-size:16px; color:#000; margin:0; text-transform:uppercase;} .exp-cat ul {margin-top:5px;} .exp-cat .padder {padding:20px;} .exp-cat .padder ul {list-style:none;} .exp-cat .padder li {color:#0e0b09; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; font-style:italic; font-size:13px; float:left; width:240px; margin-right:15px; display:inline;} .exp-subcats {display:none;} #subnav {position:absolute; margin:-57px 0 0 181px;} #subnav ul {list-style:none;} #subnav li {background:url(../images/subnav-seperator.gif) right center no-repeat; float:left; display:inline; padding:0 10px; height:38px;} #subnav li a {font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; color:#343434; position:relative; top:8px;} #work-info {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; width:160px; line-height:18px; float:left; display:inline; margin:35px 10px 20px 0;} #work-info p {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; line-height:18px;} #work-info h2 {font-size:12px; font-weight:bold; color:#333333; margin-bottom:0px; line-height:18px; text-transform:uppercase;} #work-image {width:700px; overflow:hidden; float:left; position:relative;} #work-image img {border:#a9aaac solid 2px;} #image-nav {width:900px; height:71px; background:url(../images/image-nav.png) no-repeat; position:relative;} #image-nav .prev {position:absolute; left:55px; top:-10px; cursor:pointer;} #image-nav .next {position:absolute; left:137px; top:-10px; cursor:pointer;} #thumbnails {margin:3px 0 0 225px; position:absolute; height:40px; overflow:hidden; width:581px;} #thumbnails ul {list-style:none; width:3000px;} #thumbnails li {float:left; display:inline; margin-right:2px; height:40px;} #thumbnails li img {cursor:pointer;} #clients {position:absolute; margin:85px 0 0 795px; z-index:10;} #clients span {cursor:pointer;} #clients a {color:#343434; font-family:Georgia, "Times New Roman", Times, serif; font-size:13px; line-height:19px;} #clients h2 {font-size:13px; font-weight:bold; color:#333333; margin-bottom:0px; line-height:18px; text-transform:uppercase;} #testimonials {width:565px; margin:50px 0 0 0px; font-size:13px; line-height:20px;} #testimonials .t-client {font-size:15px; text-transform:uppercase;} #testimonials .t-client:hover {text-decoration:none;} #testimonials img {margin-bottom:50px;} #testimonials .full {display:none;} #testimonials span {cursor:pointer;} #featured {position:relative; width:600px; margin:30px 0 0 166px;} .feature {width:222px; height:285px; margin-right:47px; position:relative; float:left; display: inline;} .feature h3 {font-family:"Myriad Pro",Arial, Helvetica, sans-serif; font-size:18px; color:#000; position:absolute; top:14px; left:14px; z-index:2; width:165px;} .feature .img {position:absolute; z-index:1;} .feature .panel {position:absolute; z-index:2;} .feature .more {position:absolute; bottom:0; left:8px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:12px; color:#fff; background:#000; padding:4px 30px 4px 6px; z-index:2;} .feature .more:hover {text-decoration:underline;} #links li {display:block; width:300px; overflow:hidden; position:relative; margin-bottom:10px;} #links .link {position:absolute; margin:0 0 0 10px; bottom:0px; font-size:14px; font-weight:bold;} #links .link a {font-size:14px; font-weight:bold; text-decoration:underline;} #links .link a:hover {text-decoration:none;} #news {margin:50px 0 0 0px; width:565px;} #news.news-detail {width:480px; overflow:hidden;} #news.news-detail h1 {font-family:"Myriad Pro", Arial, Helvetica, sans-serif; font-size:18px; color:#4c4c4c; text-transform:uppercase; font-weight: normal; font-style:normal; border-bottom:1px solid #aaa; padding-right:55px; height:auto; position:relative;} #news.news-detail h1 img {position:absolute; right:0px; bottom:-10px;} #news.news-detail img.mainImg {padding-top:20px;} #news.news-detail .extract {padding-top:15px; text-align:justify; font-size:14px; font-style:italic;} #news.news-detail .content {font-size:12px; text-align:justify; margin-top:5px; padding-top:5px; border-top:1px dashed #ccc;} #news.news-detail .content p {font-size:12px; text-align:justify; padding-bottom:10px;} #news.news-detail .content strong {font-weight:bold;} #news.news-detail .content a {font-weight:bold; text-decoration:underline;} #news.news-detail .content i {font-style:italic;} #news.news-detail .back {font-family:"Myriad Pro", Arial, Helvetica, sans-serif; font-size:14px; color:#222; text-transform:uppercase; font-weight: bold; font-style:normal;} .news-article {height:150px; margin-top:20px; position:relative; width:565px;} .news-article img {float:left; display:inline; margin-right:20px;} .news-article .news-extract {float:left; width:346px; position:relative;} .news-article .news-extract h2 {margin:2px 0 10px 0; line-height:12px;} .news-article .news-extract h2 a {font-family:"Myriad Pro", Arial, Helvetica, sans-serif; font-size:16px; color:#222; text-transform:uppercase; line-height:16px;} .news-article .news-extract p {text-align:justify; font-size:12px;} .news-article .news-extract .readmore {font-weight:bold; font-size:11px; position:absolute; right:0;}