/************************ * COLOURS * * BLUE: #1c75bc * * text: #252525 * * light grey: #f8f8f8 * ************************/ /* @license * MyFonts Webfont Build ID 2301019, 2012-05-31T04:21:26-0400 * * The fonts listed in this notice are subject to the End User License * Agreement(s) entered into by the website owner. All other parties are * explicitly restricted from using the Licensed Webfonts(s). * * You may obtain a valid license at the URLs below. * * Webfont: Newhouse DT Condensed by DTP Types * URL: http://www.myfonts.com/fonts/dtptypes/newhouse-dt/condensed/ * Copyright: Copyright (c) 1996-2006 DTP Types Limited. All rights reserved. NewhouseDTCond is a trademark of DTP Types Limited. * Licensed pageviews: 10,000 * * * License: http://www.myfonts.com/viewlicense?type=web&buildid=2301019 * * © 2012 Bitstream Inc*/ @font-face { font-family: 'NewhouseDTCond'; src: url('../fonts/NewhouseDTCond.eot'); src: url('../fonts/NewhouseDTCond.eot?#iefix') format('embedded-opentype'), url('../fonts/NewhouseDTCond.woff') format('woff'), url('../fonts/NewhouseDTCond.ttf') format('truetype'), url('../fonts/NewhouseDTCond.svg#wf') format('svg'); font-weight:normal; font-style:normal; } /************************ * STANDARD ELEMENTS ************************/ /* GENERAL */ html, body {margin:0; padding:0; background:#f8f8f8; color:#252525; } body {font-size:86%; font-family:NewhouseDTCond,"Tw Cen MT Condensed","Arial Narrow",Arial,Helvetica,sans-serif; } p {font-size:1em; margin:0.8em 0; line-height:1.25; text-align:left;} div {position:relative;} strong {font-weight:normal; font-size:1.2em; line-height:0.83333333;} img {image-rendering:optimizeQuality; -ms-interpolation-mode:bicubic;} /* LINKS */ a {color:#1c75bc; position:relative;} /*#navigation a, #header a, #banner a, #container a.nourl, #CN_CompactNavigator a, h2 a, h3 a, h1 a, h4 a {margin:0; padding:0; background:none; }*/ a:active, a:focus, a:hover {text-decoration:underline;color:#2e3092} a, a:focus, a:active {outline:none;} /* Removes the dotted line around links */ a img {border:none;} /*a:focus {outline:#ff00ff dotted 2px !important; xxxbackground:#ff00ff} TESTING ONLY */ /* HEADERS */ h1,h2,h3,h4,h5 {font-weight:normal; color:#1c75bc; line-height:1; margin:20px 0 10px; position:relative;} h1 {font-size:2.4em; display:inline-block; margin:5px 0 0;} h1 span {position:absolute; display:block; height:4px; overflow:hidden; width:100%; background:#1c75bc; top:-10px; left:0;} h2 {font-size:1.75em; } h3 { font-size:1.4em; margin:20px 0 -0.4em;} h3 {color:#252525; font-size:1.4em; margin:20px 0 -0.4em;} /* GENERAL CLASSES */ .u {position:absolute !important; display:block !important; height:10px !important; width:10px !important; text-indent:-999em !important; direction:ltr; margin:-10px 0 0 -10px !important; list-style:none !important; overflow:hidden !important; padding:0 !important;text-align:left !important; background:none !important;} /* Hides the element from view */ .clear {clear:both;} .cursor-link {cursor:pointer;} .highlight {color:#1c75bc;} .highlight p, p.highlight {font-size:1.5em; line-height:1; } .followup {background:yellow;} .nomarg-top {margin-top:0;} .cover {position:absolute; display:block; bottom:0; right:0; width:100%; height:100%; background:url(../images/blank.gif); padding:0; text-indent:-999em;} /* background required for IE 5-8 and Opera. Don't get me started. */ .cover:hover, .cover:active, .cover:focus, .cover.hover {} .cover:focus {background:rgba(255,255,255,0.3);} /* HOVERS & FOCUS & EXTRAS */ input:focus, textarea:focus {background:#fffef4;} ::selection { background:#b7b7b7;} ::-moz-selection { background:#b7b7b7;} /* CSS3 Transitions the following elements */ #logo a, #mainnav span, #mainnav a, #home-links h2, #p-slider .slide h3, #p-slider .text {-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;transition:all 0.3s ease-out;} /************************ * STRUCTURAL ************************/ @media (max-width:767px){ .container {width:440px;} } @media (max-width:440px){ .container {width:280px;} } /* CONTENT & FOOTER */ #content {font-size:133.72%; background:#fff; overflow:hidden;} #content .container {margin:30px auto 50px; min-height:300px;} /************************ * HEADER & LOGO ************************/ #logo strong {position:absolute; display:block; padding:0; margin:0; width:225px; height:131px; left:0; top:20px; z-index:17;} #logo a {display:block;} #logo a:hover, #logo a:focus, #logo a:active {-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-ms-transform:rotate(-5deg);-o-transform:rotate(-5deg);transform:rotate(-5deg);} #logo-viz {position:absolute; left:-20px; top:0; width:401px; height:340px; background:url(../images/logo-behind.png) no-repeat 100% 0; z-index:16; opacity:0.6;} #banner {overflow:hidden; background:#fff;} #header-image {height:340px; margin:0 -20px; overflow:hidden; } .slidei {position:absolute; left:-490px !important; margin-left:50%;display:block;height:100%;} .slidei img {display:block;} .slidei strong {display:block; position:absolute; top:170px; left:50%; margin-left:-228px; width:455px; height:170px; color:#fff; text-align:center;} /* TODO: needs to move above viz-logo */ .slidei strong .main {display:block;font-size:63px; line-height:63px; text-transform:uppercase; text-shadow:0 0 10px rgba(0,0,0,0.5);} .slidei strong .sub {position:relative;background:rgba(0,0,0,0.6); display:block;font-size:1.2em; line-height:1.2; padding:20px;} .slidei strong .sub .viz {position:absolute; top:0; width:170px; left:50%; margin-left:-85px; height:4px; background:#fff; } @media (min-width:768px) and (max-width:979px){ #logo {margin-top:35px;} #logo img {width:180px; height:104.8px;} #logo-viz {width:321px; } } @media (max-width:767px){ #logo {margin-top:35px;} #logo img {width:165px; height:98px;} #logo-viz {width:300px;} .slidei strong {width:400px; margin-left:-200px;} #banner .container, #logo .container {width:100%} } @media (max-width:440px){ #logo {margin-top:50px; } .slidei strong {width:260px; margin-left:-130px; font-size:1.2em;} /*height of banner on iphone */ #header-image, #logo-viz {height:240px;} .slidei {left:-346px !important;} .slidei img {height:240px; width:692px;} .HomePage #header-image, .HomePage #logo-viz {height:340px;} .HomePage .slidei {left:-490px !important;} .HomePage .slidei img {height:340px; width:980px;} } /************************ * HOME ************************/ #home-links {margin-bottom:16px;} #home-links .span3 {height:170px; background:#252525; overflow:hidden;} #home-links img {width:100%; height:100%;} #home-links h2 {position:absolute; width:92%; left:4%; bottom:7px; height:50px; margin:0; background:#1c75bc; background:rgba(28,117,188,0.8); } #home-links h2 .head {position:absolute; bottom:9px; left:6%; text-transform:uppercase; color:#fff; font-size:0.6857em; line-height:1; } #home-links h2 .viz {position:absolute;width:30px; left:6%; top:0; background:#fff; height:4px;} #home-links div:hover h2 {background:#fff; background:rgba(255,255,255,0.8); height:154px;} #home-links div:hover h2 .head {color:#1c75bc;} #home-links div:hover h2 .viz {background:#1c75bc;} @media (min-width:768px) and (max-width:979px){#home-links .span3{width:352px; height:265px; margin-bottom:20px;}} @media (max-width:767px){#home-links .span3{width:440px; height:380px; margin-bottom:20px;}} @media (max-width:440px){ #home-links .span3 {width:280px; height:215px;} } /************************ * mo-vanity ***********************/ .mo-vanity {margin:30px 0 0; padding:30px 0 0;} .mo-vanity .viz {position:absolute; background:#1c75bc; width:2.2em; height:30px; top:0; } .mo-vanity dl {margin:5px 0;} .mo-vanity dt, .mo-vanity dd {display:inline-block; vertical-align:baseline; color:#1c75bc; font-weight:normal; line-height:1.25; margin:0; padding:0; } .mo-vanity dt {font-size:1.5em;} .mo-vanity dd {padding:0 0 0 0.5em;} .mo-vanity dd:before {content:'—'; padding:0 0.5em 0 0;} @media (max-width:767px){ .mo-vanity dd {display:block; padding:0;} } /************************ * CONTACT ***********************/ .vcard {display:none; padding:0 0 0 280px; min-height:140px; margin:0 0 10px;} .vcard .map {display:block; position:absolute; top:4px; left:0; margin:0;} .vcard .map a {margin:-2px -2px; padding: 2px 2px;} .contact-staff-details {} .contact-staff-details h3 {margin:0 0 5px; color:#252525;} .contact-staff-details h3 a {color:#252525;} .contact-staff-details ul {margin:0 0 20px;padding:0 0 0 20px;} .contact-staff-details li {margin:0;padding:0; list-style:none;} /************************ * STAFF MEMBER ***********************/ .staff-member {padding:0 0 0 230px; min-height:200px; margin:0 0 40px 0;} .staff-member img {display:block; position:absolute; left:0; top:0; } .contact-details {position:relative; padding-top:10px; margin-top:10px;} .contact-details .viz {position:absolute; width:35px; left:0; top:0; background:#1c75bc; height:4px;} @media (max-width:767px){ .staff-member {padding:0;} .staff-member img {position:relative; } } /************************ * TAB PANELS ************************/ #tab {background:#f8f8f8; margin:15px -20px 0.8em; padding:0 20px; overflow:hidden; min-height:300px;} #tab-nav {display:none; margin:0 -20px; padding:0 20px; line-height:1; background:#fff;} .js #tab-nav {display:block;} #tab-nav li {display:inline-block; list-style:none; vertical-align:top;margin:0 4px 4px 0; } #tab-nav li .viz {position:absolute;width:30px; left:6%; top:0; background:#1c75bc; height:4px;} #tab-nav a {display:block; position:relative; text-align:left; text-decoration:none; padding:20px 15px 15px; width:135px; background:#f8f8f8; } #tab-nav .active {padding-bottom:35px; margin-bottom:-20px;} #tab-nav a:hover, #tab-nav a:focus, #tab-nav a.active, #tab-nav a:active {background:#1c75bc;color:#fff; } #tab-nav a:hover .viz, #tab-nav a:focus .viz, #tab-nav a.active .viz, #tab-nav a:active .viz {background:#fff;} .tab {margin:40px 0 20px;} @media (max-width:767px){#tab-nav {display:none !important;} #tab .tab {display:block !important;}} /************************ * PROJECT SLIDER ***********************/ #p-slider {width:810px; margin-left:65px; } #p-slider .slides {padding:0; margin:0 -15px 0 0;} #p-slider .slide {min-height:480px; margin:0 15px 15px 0; list-style:none; position:relative; width:260px; vertical-align:top; display:inline-block; background:#f8f8f8;} #p-slider .head {background:#252525; height:200px;} #p-slider .head h3 {position:absolute; width:80%; left:4%; bottom:4%; height:50px; margin:0; background:#1c75bc; background:rgba(28,117,188,0.8); color:#fff; padding:15px 6% 0; font-size:1.1em;} #p-slider .head .viz {position:absolute; width:35px; left:6%; top:0; background:#fff; height:4px;} #p-slider .hasLink {padding:0 0 42px; min-height:438px; } #p-slider .hasLink:hover h3 {color:#1c75bc; background:#fff; background:rgba(255,255,255,0.8); height:166px;} #p-slider .hasLink:hover h3 .viz {background:#1c75bc;} #p-slider .content {padding:15px; overflow:hidden;} #p-slider p {margin:0; font-size:0.9em; line-height:1;} #p-slider h4 {margin:0 0 5px;} #p-slider .highlight {font-size:1.1em; margin:0 0 5px;} #p-slider .cover {text-indent:0; font-size:0.9em;} #p-slider .text {position:absolute; display:block; left:0; bottom:0; width:230px; padding:13px 15px 12px; line-height:1;} #p-slider acronym {text-transform:uppercase;} #p-slider .text .viz {position:absolute; width:35px; left:15px; top:0; background:#1c75bc; height:4px;} #p-slider .cover:hover .text, #p-slider .cover:focus .text {background:#1c75bc; color:#fff;} #p-slider .cover:hover .viz, #p-slider .cover:focus .viz {background:#fff;} .flex-direction-nav {margin:0; position:absolute; top:0; left:0; width:100%;} .flex-direction-nav li {margin:0; padding:0; list-style:none;} .flex-direction-nav li a {display:block; position:absolute; top:0;left:-55px; width:41px; height:73px; top:194px; background:url(../images/nav.png) no-repeat; text-indent:-999em;} .flex-direction-nav .flex-next {left:auto; right:-55px; background-position:100% 0;} .flex-direction-nav .flex-next:hover, .flex-direction-nav .flex-next:focus {background-position:100% 100%;} .flex-direction-nav .flex-prev:hover, .flex-direction-nav .flex-prev:focus {background-position:0 100%;} @media (min-width:768px) and (max-width:979px){#p-slider {width:535px;margin-left:95px;}} @media (max-width:767px){#p-slider {width:260px; margin-left:90px;}#p-slider .slide {width:260px !important;}} @media (max-width:440px){ #p-slider {margin-left:10px;} .flex-direction-nav li a {background:url(../images/nav-sml.png) no-repeat;left:-25px; width:21px; height:37px; top:211px; } .flex-direction-nav .flex-next {right:-25px;} } /************************ * PAGE IMAGES ***********************/ .page-image {padding:0; margin:0 0 20px 20px; line-height:1; clear:both; float:right;} .page-image li {margin:0; list-style:none; display:inline;} .page-image .caption, .captionImage .caption {display:block; padding:8px 5px; margin:0; line-height:1.2; font-weight:700;} /************************ * NAVIGATION ************************/ /*MAIN NAV*/ .navbar {position:absolute; top:0; right:0; width:100%; margin:0; text-align:right;z-index:16; } .navbar-static-top .container {width:980px; background:#1c75bc;} .navbar-inverse .navbar-inner {background:none; -webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none; padding:0; margin:0; background:none; border:0;} .navbar-inverse .btn-navbar {cursor:pointer; text-transform:uppercase; margin:0; padding:0 5px; height:35px; line-height:35px; background:none; box-shadow:none; border:0; text-decoration:none; text-shadow:none;} .navbar-inverse .btn-navbar:hover, .navbar-inverse .btn-navbar:active, .navbar-inverse .btn-navbar:focus {background:#fff; background:rgba(255,255,255,0.6); color:#1c75bc;} .navbar-inverse .btn-navbar span {display:block; border-top:4px solid #fff; height:31px;} .navbar-inverse .collapsed span {} /* Main level links styles */ #mainnav {display:inline-block; vertical-align:top; position:relative; height:35px; margin:0; padding:0 10px 0 0;} #mainnav li {position:relative; list-style:none; display:inline-block; vertical-align:top; } #mainnav a {display:block; position:relative; text-decoration:none; height:35px; line-height:35px; text-transform:uppercase; margin:0; padding:0 10px; color:#fff; z-index:13; z-index:100; } #mainnav span {display:block; border-top:4px solid #1c75bc; } #mainnav li:hover a span, #mainnav li:focus a span, #mainnav .hover a span, #mainnav .current a span, #mainnav .section a span {border-color:#fff;} /* SUB level links styles */ #mainnav ul {display:block; position:absolute; z-index:18; width:14em; top:35px; left:0; margin:0; padding:0; background:#fff;} #mainnav ul li {height:auto; width:100%; text-align:left; } #mainnav ul li:nth-child(odd) {background:#f8f8f8; } #mainnav ul a {height:auto; border:0; overflow:hidden; line-height:1; padding:9px 10px 5px; color:#1c75bc;} .navbar #mainnav ul a {background:transparent;} #mainnav ul li:hover a, #mainnav ul li:focus a, #mainnav ul li:active a, #mainnav ul .hover a, #mainnav ul .current a, #mainnav ul .section a {color:#fff; background:#3283c3;} #mainnav ul { margin-left: -999em; } #mainnav li:hover>ul, #mainnav li.hover>ul, #mainnav a:focus+ul { margin-left: 0; } #mainnav .hover ul { margin-left: 0; } /* IE doens't understand this if it's included with the above */ @media (min-width:980px){ .navbar-static-top .container {background:url(../images/mainnav.png) no-repeat 100% 0;} #mainnav {background:#1c75bc;} } @media (min-width:768px) and (max-width:979px){.navbar-static-top .container {width:764px; text-align:center;}} @media (max-width:767px){ #mainnav {display:block; height:auto; background:#fff; margin:0;} #mainnav li {display:block;height:auto; width:100%; text-align:left; } #mainnav li:nth-child(odd) {background:#f8f8f8; } #mainnav a {border-bottom:1px solid #7d7d7d; padding:2px 10px 0; color:#1c75bc;text-align:left;} #mainnav a span {border:none; } #mainnav li:hover a, #mainnav li:focus a, #mainnav li:active a, #mainnav .hover a {color:#fff; background:#1c75bc;} #mainnav ul {} .navbar #mainnav ul li a {border-bottom:1px solid #7d7d7d; padding-left:30px; color:#1c75bc; background:none;} .navbar #mainnav ul li:hover a, .navbar #mainnav ul li:focus a, .navbar #mainnav ul li:active a, .navbar #mainnav ul .hover a, .navbar #mainnav ul .current a, .navbar #mainnav ul .hover a {color:#fff; background:#3283c3;} #mainnav li:hover>ul, #mainnav li.hover>ul, #mainnav a:focus+ul, #mainnav .hover ul { position:relative; width:auto; top:auto; left:auto; margin:0} .navbar-static-top .container {width:100%;} .navbar {z-index:10000;} .navbar-inverse .btn-navbar {margin-right:20px;} } @media (max-width:440px){ .navbar-static-top .container {width:100%; } .navbar-inverse .btn-navbar {height:50px; } .navbar-inverse .btn-navbar span {height:46px;line-height:46px;font-size:1.5em; } } /************************ * ALL FORMS ************************/ form {display:block; position:relative; } form input.checkbox {border:none;} form div.field {position:relative;} form p {margin:0 0 10px 50px; line-height:1.1; } form .help {margin:0 0 10px 100px; font-size:0.8em; margin-top:-5px;} form #Remember {margin-left:100px;overflow:hidden;} form #Remember input {margin:0 10px 0 0; float:left; width:auto; } form #Remember label {width:auto; margin-top:2px; float:left; } form #ForgotPassword {position:absolute; line-height:1; height:2.1em; top:0; right:140px; text-decoration:none; font-size:0.9em; margin-left:0;} form #ForgotPassword a {text-decoration:none; padding:8px 10px; } form .hiddenField, form .spamhoneypot {display:none;} /* hides spam protection field */ form .spamhoneypot.holder-error {display:block;} form .spamhoneypot.holder-error label, form .spamhoneypot.holder-error .middleColumn {display:none;} form fieldset {border:none; margin:0; padding:0} form input, form textarea, form select {border:#002652 1px solid; margin:0; font-size:0.95em; font-family:NewhouseDTCond,"Tw Cen MT Condensed","Arial Narrow",Arial,Helvetica,sans-serif; color:#000; padding:4px 5px; width:100%;} form textarea {height:150px;} form .middleColumn {margin:0 12px 0 0; display:block;} form div.field {clear:left; margin-bottom:10px;} form label {display:block; line-height:1.2; margin:0.2em 0; } .inFieldLabel {position:absolute; top:4px; left:7px; margin:0;z-index:5; color:#212121;} form .requiredField label.right {display:inline-block; vertical-align:top; color:red;margin:0 0 0 5px;padding:0;width:auto;} form div.optionset {overflow:hidden;} form .optionset input {width:auto;} form ul.optionset label {width:auto !important;} form ul.optionset {margin-left:170px;} form ul.optionset li {clear:left; list-style:none;} form ul.optionset li input {float:left; margin:0.2em 5px 0 0; } form div.optionset ul {padding:0; list-style:none; margin:0; overflow:hidden;} form .checkbox input, form .optionset input {border:0;} /* Required */ form span.required, form span.message, form label.required, form label.message {background:#ffcaca; color:#000; display:block;line-height:1.1; font-size:0.9em; padding:3px; margin:0 0 5px 0; width:356px} /* Required */ #Form_FormRespond_error, form p.message, form p.required {color:#212121;display:block;line-height:1.1;padding:6px; margin:5px 0 0;} /* Action */ form .Actions {margin:10px 0 10px 0; padding:0; border:0; text-align:right; } form .Actions input{font-size:1em;width:auto;padding:5px 20px;background-color:#eee;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eee), color-stop(100%, #ccc));background-image:-webkit-linear-gradient(top, #eee, #ccc);background-image:-moz-linear-gradient(top, #eee, #ccc);background-image:-ms-linear-gradient(top, #eee, #ccc);background-image:-o-linear-gradient(top, #eee, #ccc);background-image:linear-gradient(top, #eee, #ccc);border:1px solid #ccc;border-bottom:1px solid #bbb;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#333;line-height:1;text-align:center;text-shadow:0 1px 0 #eee} form .Actions input:hover{background-color:#ddd;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ddd), color-stop(100%, #bbb));background-image:-webkit-linear-gradient(top, #ddd, #bbb);background-image:-moz-linear-gradient(top, #ddd, #bbb);background-image:-ms-linear-gradient(top, #ddd, #bbb);background-image:-o-linear-gradient(top, #ddd, #bbb);background-image:linear-gradient(top, #ddd, #bbb);border:1px solid #bbb;border-bottom:1px solid #999;cursor:pointer;text-shadow:0 1px 0 #ddd} form .Actions input:active{border:1px solid #aaa;border-bottom:1px solid #888;-webkit-box-shadow:inset 0 0 5px 2px #aaa, 0 1px 0 0 #333;-moz-box-shadow:inset 0 0 5px 2px #aaa, 0 1px 0 0 #333;box-shadow:inset 0 0 5px 2px #aaa, 0 1px 0 0 #333} /************************ * Footer ***********************/ #footer {padding-bottom:30px; z-index:10; background:#f8f8f8; line-height:1.5; border-top:#7d7d7d solid 1px; min-height:4em;} #footer p {padding:20px 0 10px 20px; margin:0; text-align:left; display:inline-block; vertical-align:top;} #footer a {display:inline-block;} #footer a.nourl {color:#252525; text-decoration:none !important;} #footer a:hover, #footer a:focus, #footer a:active {} #footer #vanity {position:absolute; right:0; top:0; text-align:right; display:block;} #footer ul {padding:20px 0 0; margin:0; display:inline-block; vertical-align:top; text-align:left;} #footer li {padding:0 12px 0 0;margin:0;list-style:none;vertical-align:top; display:inline-block; line-height:1.25;} #footer li:before {display:block; position:absolute; margin-left:-7px; content:"|"; color:#252525; } #footer li.first:before {content:''; padding:0;} @media (max-width:767px){ #footer #vanity {padding-left:0; position:relative; text-align:left;} } /************************ * WYSIWYG EDITOR ALIGNMENT CLASSES ************************/ #container p.left {text-align:left;} #container p.center {text-align:center;} #container p.right {text-align:right;} #container p img.center {margin:0 auto 10px auto; display:block} #container p img.right {float:right; margin:0 0 10px 20px;} #container p a.right {float:right; padding:0;background:none;} #container img.large {margin-top:-40px;margin-right:-10px;} #container img.leftAlone {text-align:left; display:block; margin-bottom:10px;} #container img.left {float:left; margin-right:20px;} #container p.MsoNormal, #container p.MsoBodyText {margin: 0;}