/* ------------------------------------------ Stamford Interactive screen stylesheet V1 - 31/08/2007 Author - benbailey.com.au modified by Andrew Goldstiver April 2010 ------------------------------------------ */ /*********/ /* Reset */ /*********/ 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;} :focus {outline: 0;} body {line-height: 1; background: white;} ol, ul {list-style: none;} table {border-collapse: separate; border-spacing: 0;} /* tables still need 'cellspacing="0"' in the markup */ caption, th, td {text-align: left; font-weight: normal;} blockquote:before, blockquote:after, q:before, q:after {content: "";} blockquote, q {quotes: "" "";} hr {display: none;} /**************************/ /* Global Typography, etc */ /**************************/ /* This is where you set your desired font size. The line-heights and vertical margins are automatically calculated from this. The percentage is of 16px (0.75 * 16px = 12px). */ body {font-size: 75%; font-family: Arial, Tahoma, Verdana, sans-serif; color: #000; line-height:1.55em;} h1, h2, h3, h4, h5, h6 {color: #593708; font-weight: bold; line-height:1.25em;} h1 {font-size: 1.45em; margin-bottom: 0.75em;} h2 {font-size: 1.2em; margin-bottom: 0.25em;} h3, h4, h5, h6 {font-size: 1.1em; margin-bottom: 0.25em;} a, a:link {color: #CE1600; border-bottom: 1px dotted #CE1600; text-decoration: none;} a:visited {color: #494949; border-bottom: 1px dotted #494949; text-decoration: none;} a:focus, a:hover {color: #004372; border-bottom: 1px solid #666; text-decoration: none;} p {margin: 0 0 1.5em;} img {margin: 0 0 1.5em;} ul, ol {margin:0 1.5em 1.5em 1.5em;} ul {list-style-type: circle;} ol {list-style-type: decimal;} dl {margin: 0 0 1.5em 0;} dl dt {font-weight: bold;} dd {margin-left: 1.5em;} abbr, acronym {border-bottom: 1px dotted #666;} address {margin-top: 1.5em; font-style: italic;} del {color:#666;} blockquote {margin: 1.5em; color: #666; font-style: italic;} strong {font-weight: bold;} em,dfn {font-style: italic; background: #ffc;} dfn {font-weight: bold;} pre,code {margin: 1.5em 0; white-space: pre;} pre,code,tt {font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace; line-height: 1.5;} tt {display: block; margin: 1.5em 0; line-height: 1.5;} label abbr {color: red;} em {background: none;} strong {font-weight: bold;} em {font-style: italic;} /**********/ /* stuff */ /**********/ .hide {display:none;} .hide-if-no-JS {display:none;} .structureLabel, #skip {position:absolute; left:-9000px; width:1000px; overflow:hidden;} /**********/ /* Layout */ /**********/ #wrapper {position: relative; width: 95%; max-width: 1200px; min-width: 760px; margin: 0 auto; background: #FFF url(http://www.stamfordinteractive.com.au//i/bgWrapper2.jpg) repeat-y;} #home #wrapper {background: none;} #container {background: url(http://www.stamfordinteractive.com.au//i/bgContainer3.jpg) no-repeat left bottom;} #home #container {background: none;} /***********/ /* Content */ /***********/ #content {padding: 11px 10px 30px 10px; margin: -8px 260px 0 215px; min-height: 450px;} #home #content {margin: 0px 30px 0 620px; padding: 0; min-height: 222px;} h1.home {font-size: 1.3em; line-height: 1.5em;} #content div.screengrab {float: right; margin: 0px 0px 20px 20px; padding: 0px; border: 5px solid #D4CEC2; background-color: #D4CEC2;} #content div.screengrab img {margin: 0px; padding: 0px; width: 300px; height: 200px;} #content div.screengrab p {margin: 0px 0px 0px 0px; padding: 0px; font-size: 91.7%; font-weight: bold; text-transform: uppercase; text-align: left;} /***************/ /* Breadcrumbs */ /***************/ #breadCrumbs {padding-left: 20px; margin-left: -17px;} #breadCrumbs li {list-style-type: none; display: inline; padding: 0 0 0 15px; background: url(http://www.stamfordinteractive.com.au//i/icon_arrow.png) no-repeat 0 0.25em; color: #999; font-size: 0.95em;} #breadCrumbs li.first {padding: 0; background: none;} /**********/ /* Header */ /**********/ #header {height: 96px; background: #FFF url(http://www.stamfordinteractive.com.au//i/tag2.png) no-repeat top right;} #header p {position: absolute; left:-9000px; width:1000px; overflow:hidden;} #header a {border-bottom: 0;} /**********************/ /* Primary Navigation */ /**********************/ #primaryNavigation {background: url(http://www.stamfordinteractive.com.au//i/bgNavBar3.jpg) repeat-x; width: 100%; height: 45px;} #primaryNavigation ul {margin: 0;} #primaryNavigation li {display: inline; list-style-type: none;} #primaryNavigation a {text-indent: -9999em; display: block; float: left; height: 25px; border-bottom: 0;} #navHome {width: 78px; background: url(http://www.stamfordinteractive.com.au//i/bgNav.png);} #navHome:hover, #navHome:focus, #home #navHome {background: url(http://www.stamfordinteractive.com.au//i/bgNav.png) 0 -25px;} #navWhy {width: 128px; background: url(http://www.stamfordinteractive.com.au//i/bgNav.png) -78px 0;} #navWhy:hover, #navWhy:focus, #why_stamford #navWhy {background: url(http://www.stamfordinteractive.com.au//i/bgNav.png) -78px -25px;} #navServices {width: 92px; background: url(http://www.stamfordinteractive.com.au//i/bgNav.png) -206px 0 ;} #navServices:hover, #navServices:focus, #services #navServices {background: url(http://www.stamfordinteractive.com.au//i/bgNav.png) -206px -25px;} #navProjects {width: 89px; background: url(http://www.stamfordinteractive.com.au//i/bgNav.png) -298px 0;} #navProjects:hover, #navProjects:focus, #projects #navProjects {background: url(http://www.stamfordinteractive.com.au//i/bgNav.png) -298px -25px;} #navPeople{width: 80px; background: url(http://www.stamfordinteractive.com.au//i/bgNav.png) -387px 0;} #navPeople:hover, #navPeople:focus, #people #navPeople {background: url(http://www.stamfordinteractive.com.au//i/bgNav.png) -387px -25px;} #navBlog {width: 69px; background: url(http://www.stamfordinteractive.com.au//i/bgNav.png) -467px 0;} #navBlog:hover, #navBlog:focus, #blog #navBlog {background: url(http://www.stamfordinteractive.com.au//i/bgNav.png) -467px -25px;} #navContact {width: 108px; background: url(http://www.stamfordinteractive.com.au//i/bgNav.png) -536px 0;} #navContact:hover, #navContact:focus, #contact #navContact {background: url(http://www.stamfordinteractive.com.au//i/bgNav.png) -536px -25px;} /************************/ /* Secondary Navigation */ /************************/ #secondaryNavigation {float: left; width: 206px; margin-top: -12px; margin-bottom: 30px; background: url(http://www.stamfordinteractive.com.au//i/bgSecondaryNav2.jpg) no-repeat;} #secondaryNavigation ul {list-style-type: none; padding: 24px 0; margin: 0;} #secondaryNavigation li a {display: block; padding: 0.3em 10px 0.3em 22px; margin: 0; color: #333; border-bottom: 0; font-weight: bold;} #secondaryNavigation li a:hover, #secondaryNavigation li a:focus, #secondaryNavigation li a.current {background: #F1EFEB url(http://www.stamfordinteractive.com.au//i/bgSecondaryNavHover.png) repeat-y; border-bottom: 0;} #secondaryNavigation li a.current {background: #FFF url(http://www.stamfordinteractive.com.au//i/bgSecondaryNavHover.png) repeat-y;} /************/ /* Projects */ /************/ #projects .feature {float: left; width: 100%; background: url(http://www.stamfordinteractive.com.au//i/bgDividerHorizontal.png) repeat-x left top; padding: 10px 0 7px 0;} #projects .feature h2 {font-size: 1em; margin-bottom: 0.5em;} #projects .feature img {float: left; border: 5px solid #D4CEC2; margin: 0 10px 10px 0;} #projects .feature a img:hover {border: 5px solid #A39276;} /*************/ /* Slideshow */ /*************/ #caseStudy {position: relative; float: left; width: 580px; margin: 0 20px; height: 222px;} #caseStudy .project {display: none; width: 560px; position: absolute; z-index: 98;} #caseStudy .project:first-child {display: block;} #caseStudy .firstProject {display: block;} /* For IE6 */ #caseStudy .project h2 {color: #CB4933; font-size: 1.6666em; font-weight: normal; padding: 7px 65px 7px 20px; margin: 0 20px 0.5em -20px; width: 515px; background: url(http://www.stamfordinteractive.com.au/i/grey-dot.png) repeat-x left bottom;} #caseStudy .project h2 a {border: none;} #caseStudy .project p {font-size: 1.2em; color: #593708;} #caseStudy .project ul {position: absolute; top: 93px;} #caseStudy .project ul.recentClientLogos {height: 100%; margin: -10px 0 0 10px; position: relative; top: 0px; list-style: none; overflow: auto;} #caseStudy .project ul.recentClientLogos li {list-style: none; float: left; margin: 4px 30px 0; } #caseStudy .project ul.recentClientLogos li img {margin: 0;} #caseStudy .project.clickable:hover {cursor: pointer;} #caseStudy .project.clickable:hover h2 a {color: #004372;} #caseStudy .fadeHack {width: 560px; height: 222px; background-color: #FFF; z-index: 99; position: absolute; display: none;} ul#caseStudyButtons {position: absolute; width: 68px; right: 0; top: 1em; z-index: 101; display: none; list-style: none; margin: 0;} ul#caseStudyButtons li {float: left; padding-left: 5px;} ul#caseStudyButtons a {text-indent: -9999999px; display: block; background: #FFF url(http://www.stamfordinteractive.com.au/i/slideshow_buttons3.png) no-repeat; width: 16px; height: 16px; border: 0; overflow: hidden;} li#prevCaseStudy a {background-position: 0 0;} li#prevCaseStudy a:hover {background-position: 0 -16px;} li#playCaseStudy a {background-position: -32px 0;} li#playCaseStudy a:hover {background-position: -32px -16px;} li#pauseCaseStudy a {background-position: -48px 0;} li#pauseCaseStudy a:hover {background-position: -48px -16px;} li#nextCaseStudy a {background-position: -16px 0;} li#nextCaseStudy a:hover {background-position: -16px -16px;} li#playCaseStudy {display: none;} .featureImage {float: right; margin: 10px 15px 10px;} /*****************/ /* service icons */ /*****************/ ul.serviceIcons {margin-left: 0; height: 100px;} ul.serviceIcons li {float: left; display: block; margin: 0px 10px 0px 0px; padding: 0px; width: 64px; height: 100px; text-align: center; vertical-align: bottom;} ul.serviceIcons li a, ul.serviceIcons li span {display: block; margin: 0px; padding: 69px 0px 0px 0px; width: 64px; height: 31px; font-size: 91.7%; line-height: 120%; border: none;} li.evaluation {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/01_evaluation_64px.png) 0px 0px no-repeat;} li.expertReview {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/02_expert_review_64px.png) 0px 0px no-repeat;} li.userAnalysis {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/03_user_analysis_64px.png) 0px 0px no-repeat;} li.businessAnalysis {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/04_business_analysis_64px.png) 0px 0px no-repeat;} li.gapAnalysis {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/05_gap_analysis_64px.png) 0px 0px no-repeat;} li.stakeholderWorkshop {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/06_stakeholder_workshop_64px.png) 0px 0px no-repeat;} li.copywriting {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/07_copywriting_64px.png) 0px 0px no-repeat;} li.userTesting {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/08_user_testing_64px.png) 0px 0px no-repeat;} li.patternDesign {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/10_pattern_design_64px.png) 0px 0px no-repeat;} li.research {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/11_research_64px.png) 0px 0px no-repeat;} li.benchmarking {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/12_benchmarking_64px.png) 0px 0px no-repeat;} li.informationArchitecture {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/13_information_archi_64px.png) 0px 0px no-repeat;} li.visualDesign {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/14_visual_design_64px.png) 0px 0px no-repeat;} li.accessibilityReview {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/15_accessibility_review_64px.png) 0px 0px no-repeat;} li.changeManagement {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/16_change_management_64px.png) 0px 0px no-repeat;} li.interactionDesign {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/17_interaction_design_64px.png) 0px 0px no-repeat;} li.trainingMentoring {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/18_training_mentoring_64px.png) 0px 0px no-repeat;} li.printDeliverables {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/19_print_deliverables_64px.png) 0px 0px no-repeat;} li.prototyping {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/20_prototyping_64px.png) 0px 0px no-repeat;} li.contextualReview {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/21_contextual_review_64px.png) 0px 0px no-repeat;} li.contentAudit {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/22_content_audit_64px.png) 0px 0px no-repeat;} li.strategy {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/23_strategy_64px.png) 0px 0px no-repeat;} li.processDesign {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/24_process_design_64px.png) 0px 0px no-repeat;} li.projectManagement {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/25_project_man_64px.png) 0px 0px no-repeat;} li.cardSorting {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/26_card_sorting_64px.png) 0px 0px no-repeat;} li.coding {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/27_htmlcss_coding_64px.png) 0px 0px no-repeat;} li.iphone {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/28_iphone_dev_64px.png) 0px 0px no-repeat;} li.ucd {background: url(http://www.stamfordinteractive.com.au/images/uploads/projects/icons/29_UCD_64px.png) 0px 0px no-repeat;} /************/ /* services */ /************/ .serviceNav {margin-bottom: -25px;} h2.serviceNav {margin-left: 22px; margin-bottom: -18px; font-weight: normal; font-size: 1.3em;} .modules h3, .modules h4 {padding-left: 25px; cursor: pointer; color: #CE1600; background: url(http://www.stamfordinteractive.com.au//i/plus.png) 3px 2px no-repeat;} .modules h4 {font-weight: normal;} .modules .hdOpen {background: url(http://www.stamfordinteractive.com.au//i/minus.png) 3px 2px no-repeat;} .serviceStream {background: #FBFAF9; border: 1px solid #F2EFEC; padding: 7px; margin: 10px 20px 0 0;} .serviceModule {margin-left: 25px;} .serviceModule .serviceModule {background: none; padding-bottom: 0;} /************/ /* Profiles */ /************/ #content .profile {float: left; width: 63%; margin: 0 3% 15px 0; background: url(http://www.stamfordinteractive.com.au//i/bgDividerHorizontal.png) repeat-x left bottom;} #content .profile img {float: left; padding: 0 10px 10px 0;} #content .profileNotes {float: left; width: 33%; margin-top: 2em;} /********/ /* Blog */ /********/ .quiet, .quiet a {color:#666666; font-size: 80%;} .comment-form {padding-top: 15px;} #primary-actions dd, #primary-actions dt {margin:0; padding:0;} #primary-actions dd {padding-left: 22px; padding-bottom: 1em;} #primary-actions.twoColumnLayout .left {float: left; width: 60%;} #primary-actions.twoColumnLayout .right {float:left; width: 40%;} .section, .entry {background: url(http://www.stamfordinteractive.com.au//i/bgDividerHorizontal.png) repeat-x left bottom; padding-bottom: 1em; margin-bottom: 1.5em;} .comment {background: url(http://www.stamfordinteractive.com.au//i/bgDividerHorizontal.png) repeat-x left bottom; padding: 8px 0;} #threeColumnLayout {clear: both;} #threeColumnLayout .col {float: left; width: 33.33%;} #threeColumnLayout .last {clear: right;} #twoColumnLayout {clear: both;} #twoColumnLayout .col {float: left; width:50%;} #twoColumnLayout .last {clear: right;} li.rssFeed {margin-bottom: 9px;} li.rssFeed a {background: url(http://www.stamfordinteractive.com.au/i/icon-rss.gif) no-repeat left top; padding: 2px 0 5px 22px;} li.rssFeed acronym {border-bottom: 0;} /*********************/ /* "related" content */ /*********************/ /* related - usually the right hand column of most layouts but is the bottom row of the homepage */ #related {position: absolute; top: 146px; right: 0; width: 250px;} #related h2 {font-size: 1.2em;} #related .feature h3 {font-size: 1em;} #related .feature a img {border: 5px solid #D6D1C7;} #related .feature a img:hover, #related .feature a img:focus {border: 5px solid #A39276;} #home #related {right: 0; float: left; position: static; top: 356px; width: 100%; background: #EEEDE8 url(http://www.stamfordinteractive.com.au/i/bgGrass.jpg) repeat-x left bottom; margin-top: 0; padding: 18px 0px 0px 0px;} /*************/ /* Home page */ /*************/ #homeServices, #homeProjects, #homeBlog, #homeEndorsed, #homeMemberships, #homeCharities, #homeInitiatives {float: left; width: 29%; margin: 0px 2% 0px 2%; } #homeEndorsed, #homeMemberships, #homeCharities {padding-top: 18px; border-top: 1px dotted #666666; min-height: 320px;} #homeProjects .project {clear: left; padding-top: 3px;} #homeEndorsed {clear: left;} #homeServices img, #homeProjects img, #homeBlog img, #homeEndorsed img, #homeMemberships img, #homeCharities img {float: left; border: 5px solid #B7AA94; margin: 3px 10px 0px 0px;} #homeServices img:hover, #homeProjects img:hover, #homeBlog img:hover, #homeEndorsed img:hover, #homeMemberships img:hover, #homeCharities img:hover {border: 5px solid #A39276;} #homeServices img:focus, #homeProjects img:focus, #homeBlog img:focus, #homeEndorsed img:focus, #homeMemberships img:focus, #homeCharities img:focus {border: 5px solid #A39276;} #homeInitiatives img {float: left; padding: 0 5px 5px; margin: 3px 10px 0px 0px;} #home #related #homeBlog {background: none;} /**********/ /* Footer */ /**********/ #footer {clear: both; background: #c73b22; padding: 1.4em 0 1.4em 0; border-top: 1px solid #FFF; position: relative; top: 2.5em; left: 0;} #home #footer {clear: left; top: 0;} #footer a {color: #EEC5BD; border-bottom: 1px dotted #EEC5BD; } #footer a:hover, #footer a:focus {color: #FFF; border-bottom: 1px solid #FFF;} #footer ul {margin: 0 0 0 25px; line-height: 0;} #footer li {display: inline; list-style-type: none; font-size: 1.1em; color: #EEC5BD; margin: 0 10px 0 0; line-height: 0;} /**********/ /* Forms */ /**********/ form label {display: block;} form input, form textarea, form select {margin-bottom: 14px; margin-top: 3px; border: 1px solid #999; background: #F3F3F3;} form input:focus, form textarea:focus, form select:focus {background: #FFF;} input.submit {border: 3px double #999; border-top-color: #CCC; border-left-color: #CCC; padding: 0.25em; background-color: #FFF;} #txtMessage {height: 10em;} form dd {margin-left: 0; padding-left: 0;} #freeform legend {display: none;} /************/ /* Headings */ /************/ #homepage h1 {font-weight: normal; font-size: 1.66666em; padding: 5px 10px 0; line-height: 1.5;} #homepage h1 span {padding-bottom: 1.5em; display: block;} #homeServices h2, #homeProjects h2, #homeBlog h2, #homeEndorsed h2, #homeMemberships h2, #homeCharities h2, #homeInitiatives h2 {font-weight: normal; margin-bottom: 0.5em; font-size: 1.4em;} /****************/ /* Float clears */ /****************/ .clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} /************/ /* IE hacks */ /************/ #secondaryNavigation {_margin-top: -20px; +*margin-top: -20px;} #secondaryNavigation ul, h2.serviceNav {_position: relative; +*position: relative;} #secondaryNavigation li a {_width: 174px;} #content {_height: 450px;} #home #content {_height: 206px;} #homeServices, #homeProjects, #homeBlog {_height: 280px; _margin: 18px 2% 25px 1%;} #wrapper {width:expression(document.body.clientWidth > 1200? "1200px": "95%" );}