/************************************************** THE URBAN LANDSCAPE LAB Screen Styles Site Design & Development by HeaderFooter Design http://headerfooter.com/ **************************************************/ /* GLOBAL STYLES ---------------------------------------------- */ * {margin: 0;} body {min-width: 1008px; font-family: "helvetica neue", arial, sans-serif; font-size: 10px; color: #000; background: url(/themeImages/backgroundPattern.png) top left repeat;} ul, ol, dl {margin: 0; padding: 0;} p, li {margin-bottom: 1.1em; line-height: 1.67em; font-size: 1.2em; color: #333;} p img {margin: 6px 7px 0 0;} li {margin-bottom: 0;} a {color: #3c3; text-decoration: underline;} a:visited {color: #3c9;} a:hover {color: #000;} a:active {text-decoration: none;} img {border: none;} h1, h2, h3, h4 {clear: both; color: #000; line-height: 150%;} h1 {font-size: 4.8em; font-weight: normal; letter-spacing: -0.0175em; line-height: 130%;} h2 {min-height: 40px; margin: 1.15em 0 0; font-size: 2.8em; letter-spacing: -0.04em; font-weight: 700; color: #000;} h3 {margin: 1em 0 0.4em; font-size: 1.6em;} h4 {margin: 2.15em 0 0.25em; font-size: 1.4em; font-weight: normal; color: #666;} h5 {margin: .3em 0 .5em; font-size: 1.5em;} hr {clear: both; margin: 2.5em -2px .75em; height: 5px; background-color: #000; border-color: #000;} .fullBackground {display: block; background: #fff; overflow-x: hidden;} .aboveHeader {padding-bottom: 3px !important; font-size: 2.5em; line-height: 1.1em; font-weight: 300; color: #000;} .aboveHeader object {display: block;} .boldHeader {padding-bottom: 3px !important; font-size: 2.5em; line-height: 1.1em; font-weight: 700; color: #000;} .boldHeader object {display: block;} .hidden {display: none;} .clear {clear: both;} .intro, .intro p {font-size: 16px; line-height: 150%; margin-bottom: 1.2em;} .limit {width: 520px;} .attribution {display: block; padding: 0.3em 0 0 3.2em; font-size: .85em; line-height: 125%; text-indent: -16px; color: #999;} .floatRight, .alignright {float: right; margin-bottom: 1%;} .floatLeft, .alignleft {float: left; margin-bottom: 1%;} .alignleft + .alignleft {margin-right: 0;} .alignleft + .alignleft + .alignleft {margin-right: 7px;} .alignleft + .alignleft + .alignleft + .alignleft {margin-right: 0;} .alignleft + .alignleft + .alignleft + .alignleft + .alignleft {margin-right: 7px;} .alignleft + .alignleft + .alignleft + .alignleft + .alignleft + .alignleft {margin-right: 0;} .alignleft + .alignleft + .alignleft + .alignleft + .alignleft + .alignleft + .alignleft {margin-right: 7px;} .half {width: 49.5%;} .third {width: 31.25%;} .twoThirds {width: 65%;} .goldenLarge {width: 68%;} .goldenSmall {width: 31%;} .nomargin {margin: 0 !important;} .marginTop {margin-top: 1%;} .marginRight {margin-right: 1%;} .marginBottom {margin-bottom: 1%;} .marginLeft {margin-left: 1%;} .marginRight2 {margin-right: 2.5%;} .marginLeft2 {margin-left: 2.5%;} .noPaddingBottom {padding-bottom: 0 !important;} .downloadArticleButton {width: 200px; height: 48px; display: block; text-indent: -9999px; background-image: url(/themeImages/downloadArticleButton.png); background-position: top center; background-repeat: no-repeat; outline: none;} .downloadArticleButton:hover {background-position: center;} .downloadArticleButton:active {background-position: bottom center;} /* HEADER ---------------------------------------------- */ #header {height: 162px; margin: 0 0 12px; padding: 9px 0 0 18px; background: url(/themeImages/header.png) 0 -33px repeat;} #header h1 a {float: left; width: 162px; height: 72px; margin: 0 12px 0 0; text-indent: -9999px; background: url(/themeImages/ullLogoHeader.png) 0 0 no-repeat;} #menu ul {display: block; margin-top: 9px; padding-left: 17px !important;} #menu li {float: left; margin-right: 8px; list-style-image: none; list-style-position: outside; list-style-type: none; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #menu li:hover {background: transparent url(/themeImages/transparentStripesCross.png) repeat;} #menu li:active {background: #9f3 url(/themeImages/transparentStripesDark.png) repeat; outline: none;} #menu li a {display: block; height: 28px; padding: 12px 15px 14px; text-indent: -9999px; outline: none;} #menu li:hover a {background-position: center !important;} #menu li:active a {background-position: center bottom !important; outline: none;} #menu .current_page_item {background: transparent url(/themeImages/transparentStripesCross.png) repeat;} #menu .current_page_item a {background-position: center !important;} #menu .page-item-35 a {background: url(/themeImages/navNews.png) center top no-repeat; width: 104px;} #menu .page-item-44 a {background: url(/themeImages/navWork.png) center top no-repeat; width: 116px;} #menu .page-item-538 a {background: url(/themeImages/navEncyclopedia.png) center top no-repeat; width: 274px;} #menu .page-item-2 a {background: url(/themeImages/navAbout.png) center top no-repeat; width: 125px;} /* FOOTER ---------------------------------------------- */ #footer {position: relative; height: 200px; font-size: 15px; color: #fff; background: url(/themeImages/whiteFooter.png) 0 0 repeat-x;} .grayFooter #footer {background-image: url(/themeImages/grayFooter.png);} #footer #websiteBy {position: absolute; top: 143px; right: 12px;} #footer #contactUs {position: absolute; top: 143px; left: 12px;} #footer #contactUs address {font-style: normal;} /* LIQUID CONTAINER ---------------------------------------------- */ .liquidContainer {width: auto; min-height: 800px; padding: 0 0 0 25px;} #encyclopedia .liquidContainer {padding-top: 9px; padding-right: 9px; background: #fff;} /* STATIC CONTAINER ---------------------------------------------- */ .staticContainer {width: 700px; padding: 0 0 26px 32px;} #work .staticContainer, #encyclopedia .staticContainer {width: 980px;} /* HOMEPAGE ---------------------------------------------- */ .home .staticContainer {height: 390px;} /* NEWS INDEX PAGE ---------------------------------------------- */ #newsIndex {padding-top: 16px;} #newsIndex h3 {margin-top: 0;} #newsIndex h3 span {display: block;} #newsIndex .post {clear: both; margin: 0 0 26px 47px; padding: 12px 0 0 3px; border-top: 1px solid #ccc;} #newsIndex .projectThumb {float: left; width: 40px; height: 38px; margin-left: -50px; background-position: center; background-repeat: no-repeat;} #newsIndex .date {margin-bottom: 16px; font-size: 11px; line-height: 13px; text-transform: uppercase; color: #888;} #newsIndex .post ol, #newsIndex .post ul, #newsIndex .post dl {margin-left: 18px;} /* WORK INDEX PAGE ---------------------------------------------- */ #filters {clear: both; margin: 0 0 24px -4px;} #filters a {display: inline-block; padding: 2px 4px; font-size: 15px;} #filters a:hover {background-color: #ffc;} #filters a:active, #filters a.current {color: #fff !important; background-color: #000;} #work .liquidContainer {clear: both; display: block;} #work h2 {margin-bottom: 15px;} #work .post {position: relative; float: left; width: 230px; height: 437px; margin: 0 14px 14px 0; padding: 0; text-decoration: none; background: #eee url(/themeImages/transparentStripesLight.png) repeat; overflow: hidden; cursor: pointer;} #work .post img {display: block; width: 230px !important; height: 218px !important; margin: 0 0 20px; opacity: 0.975; filter: alpha(opacity = 97);} #work .post img.projectOverlay {position: absolute; z-index: 10; top: 0; left: 0; width: 230px !important; height: 437px !important; margin: 0; opacity: 1; filter: alpha(opacity = 100);} #work .post .title {margin: 0; padding: 0 14px 1px; line-height: 108%; font-size: 13px; font-weight: bold; color: #1A1A1A; text-transform: none;} #work .post p {margin: 0; padding: 8px 14px 12px; font-size: 11px; line-height: 135%; color: #666;} #work .post span {display: block; padding: 0 14px; font-size: 11px; line-height: 135%; color: #999;} #work .post .date {position: absolute; top: 18px; right: 9px; padding: 4px 5px; line-height: 1em; text-transform: uppercase; font-weight: bold; color: #fff; background-color: #444; opacity: 0.75; filter: alpha(opacity = 75);} #work .post:hover {background-color: #1A1A1A;} #work .post:hover img {opacity: 0.96; filter: alpha(opacity = 96);} #work .post:hover img.projectOverlay {opacity: 1; filter: alpha(opacity = 100);} #work .post:hover h3 {color: #fff;} #work .post:hover p {color: #F3F3F3;} #work .post:hover span {color: #E5E5E5;} #work .post:hover .date {color: #fff; background-color: #1A1A1A;} #work .post:active {background-color: #000;} #work .post:active h3 {color: #fff;} #work .post:active p {color: #F3F3F3;} #work .post:active span {color: #E5E5E5;} #work .post:hover .date {color: #fff; background-color: #000;} #work .partners {display: none !important;} /* WORK INDIVIDUAL PAGES ---------------------------------------------- */ .singleBackground, .work #header {margin-bottom: 0; background-color: #ebebeb;} #projectContainer .projectTopBottom {position: static; display: block; width: 739px; height: 11px; margin-left: 70px; background-image: url(/themeImages/deepCapsuleTopBottom.png); background-repeat: no-repeat;} #projectContainer .projectTop {background-position: top left;} #projectContainer .projectBottom {background-position: bottom left;} #projectContainer {position: relative; min-height: 800px; padding: 13px 0 16px;} #projectContainer .projectLayout {width: 617px; margin: 0 0 0 70px; padding: 0 61px 28px; background-color: #fff;} #projectContainer .projectLayout #whoWhereWhen+h2 {margin: 0 0 .39em; padding: .71em 0 0; font-size: 4.8em; line-height: 1.2em; overflow: hidden;} #projectContainer .projectLayout li, #projectContainer .projectLayout p {overflow: hidden;} #projectContainer .projectLayout li {margin: 0 0 12px 18px; list-style-position: outside;} #projectContainer .projectLayout ul li {list-style-type: disc; margin-bottom: 1px;} #projectContainer .projectLayout ol li {list-style-type: decimal;} #projectContainer .projectLayout img+p, #projectContainer .projectLayout p+img, #projectContainer .projectLayout p+img+img {margin-top: 1.5em;} #projectContainer .projectLayout .intro+img {margin-top: 0;} #projectContainer .projectLayout .intro {margin-bottom: 1.5em; font-size: 1.8em; line-height: 1.52em;} #projectContainer .projectLayout .intro+p {margin-top: -1em;} #whoWhereWhen {position: relative; clear: both; margin-left: -7px; padding-top: 10px;} #whoWhereWhen .who {clear: left; float: left; width: 104px; height: 29px; padding: 15px 7px 7px 61px; font-size: 1.4em; background-color: #fff; background-position: 7px 7px; background-repeat: no-repeat; border: 1px solid #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #whoWhereWhen .who:hover {background-color: #fafafa; border: 1px solid #f3f3f3;} #whoWhereWhen .whereWhen {position: absolute; top: 18px; right: 0;} #whoWhereWhen .whereWhen span {display: block; margin-top: 1px; text-align: right; font-size: 1.4em; font-weight: normal; color: #ccc;} #whoWhereWhen .whereWhen a {display: none;} .s-category-bcarch #whoWhereWhen .whereWhen #bcArch {display: block;} .s-category-gsapp #whoWhereWhen .whereWhen #gsapp {display: block;} #projectContainer .projectNavigation a {position: absolute; z-index: 1; top: 36px; bottom: 61px; display: block; text-decoration: none; background-color: #f5f5f5;} #projectContainer .projectNavigation a:hover {background-color: #e5e5e5;} #projectContainer .projectNavigation a:active {background-color: #444;} #projectContainer #previousProject a {left: 0; width: 35px;} #projectContainer #nextProject a {right: 0; left: 844px;} #projectContainer .projectNavigation a .title {display: none; font-weight: bold; text-transform: uppercase; color: #fff;} #projectContainer .projectNavigation a .direction {position: fixed; z-index: 1; top: 250px; width: 35px; height: 224px; text-indent: -9999px; background: url(/themeImages/projectNavigationBars.gif) no-repeat;} #projectContainer #previousProject a .direction {margin-left: 0; background-position: 0 0;} #projectContainer #previousProject a:hover .direction {background-position: -35px 0;} #projectContainer #previousProject a:active .direction {background-position: -70px 0;} #projectContainer #nextProject a .direction {background-position: -105px 0;} #projectContainer #nextProject a:hover .direction {background-position: -140px 0;} #projectContainer #nextProject a:active .direction {background-position: -175px 0;} #projectContainer .projectNavigation a .projectTopBottom {position: absolute; left: 0; right: 0; width: auto; max-width: 739px; margin-left: 0;} #projectContainer .projectNavigation a .projectTop {top: -11px; margin-top: 0;} #projectContainer .projectNavigation a .projectBottom {bottom: -11px;} #projectContainer #previousProject .projectTop {background-position: -1443px 0;} #projectContainer #previousProject .projectBottom {background-position: -1443px -12px;} #projectContainer #previousProject a:hover .projectTop {background-position: -2182px 0;} #projectContainer #previousProject a:hover .projectBottom {background-position: -2182px -12px;} #projectContainer #previousProject a:active .projectTop {background-position: -2921px 0;} #projectContainer #previousProject a:active .projectBottom {background-position: -2921px -12px;} #projectContainer #nextProject .projectTop {background-position: -739px 0;} #projectContainer #nextProject .projectBottom {background-position: -739px -12px;} #projectContainer #nextProject a:hover .projectTop {background-position: -1478px 0;} #projectContainer #nextProject a:hover .projectBottom {background-position: -1478px -12px;} #projectContainer #nextProject a:active .projectTop {background-position: -2217px 0;} #projectContainer #nextProject a:active .projectBottom {background-position: -2217px -12px;} #projectContainer #nextProject .projectTopWideCover, #projectContainer #nextProject .projectBottomWideCover {position: absolute; z-index: 4; left: 725px; display: block; width: 800px; height: 30px; background-color: #f5f5f5;} #projectContainer #nextProject .projectTopWideCover {top: -11px;} #projectContainer #nextProject .projectBottomWideCover {bottom: -11px;} #projectContainer #nextProject a:hover .projectTopWideCover, #projectContainer #nextProject a:hover .projectBottomWideCover {background-color: #e5e5e5;} #projectContainer #nextProject a:active .projectTopWideCover, #projectContainer #nextProject a:active .projectBottomWideCover {background-color: #444;} #projectContainer #comments {margin-top: 18px; padding-top: 9px; font-size: 10px; color: #333; border-top: 1px solid #ccc;} #projectContainer #comments h3 {margin-top: 0;} #projectContainer #comments .form-label {clear: left; float: left; width: 15%; margin-top: 8px; font-size: 12px;} #projectContainer #comments .form-input, #projectContainer #comments .form-textarea {float: left; width: 61%; margin-top: 8px; font-size: 12px;} #projectContainer #comments .form-submit {clear: both; display: block; margin-left: 15%; padding-top: 12px;} #projectContainer #comments .comment-author {font-size: 15px;} #projectContainer #comments .comment-meta {float: right; color: #666;} #projectContainer #comments p {font-size: 12px;} #projectContainer #comments li {margin-top: 9px; padding-top: 6px; border-top: 1px solid #ebebeb;} /* ENCYCLOPEDIA INDEX PAGE ---------------------------------------------- */ #encyclopedia p {margin: 0 1px 1px 0; padding: 0 11px 5px; font-size: 14px; line-height: 150%; color: #333;} #encyclopedia .plarge {font-size: 11px;} #encyclopedia .psmall {font-size: 11px;} #encyclopedia p:first-letter {font-size: 1.13em;} #encyclopedia img {width: 100% !important; height: auto !important;} #encyclopedia .column {float: left; margin-right: 1.25%; padding-bottom: 15px;} #encyclopedia .subColumn {margin: 0 0 1px 1px;} #encyclopedia .one {width: 26.334%;} #encyclopedia .two {width: 15.99%;} #encyclopedia .three {width: 26.334%;} #encyclopedia .four {width: 26.334%;} #encyclopedia .post {margin-bottom: 5%;} #encyclopedia .post-content {clear: both; display: block;} #encyclopedia .exit-link {position: relative; display: block; margin: 0 0 1px 1px; text-decoration: none; overflow: hidden;} #encyclopedia .exit-link img {display: block; margin: 0;} #encyclopedia .subColumn .exit-link {float: left; width: 50%; margin: 0; padding: 0; background-color: #fff; opacity: .97; filter: alpha(opacity = 90); cursor: pointer;} #encyclopedia .subColumn .exit-link img {display: block;} #encyclopedia .subColumn .exit-link:hover {background-color: #eee; opacity: 1; filter: alpha(opacity = 100);} #encyclopedia .subColumn .exit-link:active {background-color: #ccc;} #encyclopedia .exit-link .title {position: absolute; top: 11px; right: 7px; max-width: 68%; padding: 4px 5px; font-size: 18px; font-weight: bold; line-height: 1em; text-align: right; text-transform: uppercase; color: #fff; color: #000; opacity: 0.90; filter: alpha(opacity = 70);} #encyclopedia .exit-link:hover .title {background-color: #000; color: #fff;} #encyclopedia .exit-link:active .title {background-color: #000; opacity: 1;} #encyclopedia .play-button {position: absolute; z-index: 2; top: 50%; left: 50%; display: block; width: 82px !important; height: 84px !important; margin-top: -43px !important; margin-left: -43px !important; background: url(/themeImages/play-button.png) top center no-repeat;} #encyclopedia a:hover .play-button {background-position: center;} #encyclopedia a:active .play-button {background-position: bottom center;} /* ABOUT PAGE ---------------------------------------------- */ #about h3 {clear: none; margin: 11px 0 4px;} #about h4 {clear: none; margin: -5px 0 10px; color: #888;} #about img.alignleft {clear: left; margin-right: 20px;} #friendsOfTheLab * {line-height: 1.25em;} #friendsOfTheLab li {list-style-image: none; list-style-position: outside; list-style-type: none; padding: 0 0 17px;} #friendsOfTheLab a {border: 1px solid #FFFFFF; display: block; text-decoration: none;} #friendsOfTheLab a: hover {text-decoration: underline;} a#janette {background-image: url(/themeImages/people/janetteSmall.jpg); display: none;} a#kate {background-image: url(/themeImages/people/kateSmall.jpg); display: none;} a#glen {background-image: url(/themeImages/people/glenSmall.jpg); display: none;} .s-category-janettekim a#janette {display: block;} .s-category-kateorff a#kate {display: block;} .s-category-glencummings a#glen {display: block;} /* CLEARFIXES ----------------------------------------------*/ .liquidContainer:after, .staticContainer:after, .column:after, #projectContainer .projectLayout:after, .column .post .post-content:after {content: " "; display: block; clear: both; visibility: hidden;} *+html .liquidContainer, *+html .staticContainer, *+html .column, *+html #projectContainer .projectLayout, .column .post .post-content {display: inline-block;} /***************************************************************************** scalable Inman Flash Replacement (sIFR) version 3. Copyright 2006 – 2008 Mark Wubben, Older versions: * IFR by Shaun Inman * sIFR 1.0 by Mike Davidson, Shaun Inman and Tomas Jogin * sIFR 2.0 by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben See also and . This software is licensed and provided under the CC-GNU LGPL. See *****************************************************************************/ .sIFR-flash {visibility: visible !important; margin: 0; padding: 0; line-height: 1em;} .sIFR-replaced, .sIFR-ignore {visibility: visible !important;} .sIFR-alternate {position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden;} .sIFR-replaced div.sIFR-fixfocus {margin: 0; padding: 0; overflow: auto; letter-spacing: 0; float: none;} /************************************************** Thickbox JQuery Plugin Styles Plugin by Cody Lindley http://jquery.com/demo/thickbox/ Style Changes by Evan Sharp http://evansharp.com/ **************************************************/ #TB_window {font-family: "lucida grande", "lucida sans unicode", arial, sans-serif; font-size: 1.1em; color: #000;} #TB_secondLine {display: block; padding-top: 1px; font-size: 1em; color: #999;} #TB_overlay {position: fixed; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; margin: 0;} .TB_overlayMacFFBGHack {background: url(../js/macFFBgHack.png) repeat;} .TB_overlayBG {opacity: 0.75; filter: alpha(opacity=75); background: #000;} #TB_window {position: fixed; z-index: 3; top: 50%; left: 50%; display: none; padding: 0; text-align: left; background: #fff;} #TB_window img#TB_Image {display: block; margin: 15px 0 0 15px; border: 1px solid #888;} #TB_window div {float: none; width: auto; margin: 0;} #TB_caption {float: left !important; height: 25px; margin: 0; padding: 7px 30 10 60;} #TB_window #TB_closeWindow {position: relative; top: 5px; right: -12px; float: right; height: 25px; padding: 11px 25px 10 0;} #TB_window #TB_closeAjaxWindow {float: right; margin-bottom: 1px; padding: 7px 10 5px 0; text-align: right;} #TB_window #TB_closeWindowButton {position: relative; bottom: 6px; float: right; width: 19px; height: 19px; margin-left: 5px; text-indent: -9999px; background: url(/themeImages/thickbox/close.gif) top center no-repeat;} #TB_window #TB_closeWindowButton:hover {background-position: center;} #TB_window #TB_closeWindowButton:active {background-position: bottom center;} #TB_window #TB_closeWindowButton span {display: none;} #TB_window #TB_orESC {display: block; position: absolute; bottom: 6px; right: 15px;} #TB_ajaxWindowTitle {float: left; margin-bottom: 1px; padding: 7px 0 5px 10;} #TB_title {height: 27px; background-color: #e8e8e8;} #TB_ajaxContent {clear: both; padding: 2px 15px 15px; text-align: left; line-height: 1.4em; overflow: auto;} #TB_ajaxContent.TB_modal {padding:15px;} #TB_ajaxContent p {padding:5px 0 5px 0;} #TB_load {position: fixed; z-index: 103; top: 50%; left: 50%; display: none; width: 208px; height: 13px; margin: -6px 0 0 -104px !important; padding: 0 !important; border: 0 !important;} #TB_HideSelect {position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); background-color: #fff; border: none;} #TB_iframeContent {margin-top: 1px; margin-bottom: -1px; _margin-bottom: 1px; clear: both; border: none;} #TB_next a {position: absolute; bottom: 20; left: 34px; width: 19px; height: 19px; margin: 0 0 0 2px; text-indent: -9999px; background: url(/themeImages/thickbox/right.gif) top center no-repeat;} #TB_next a:hover {background-position: center;} #TB_next a:active {background-position: bottom center;} #TB_next a strong {display: none;} #TB_prev a {position: absolute; bottom: 20; left: 15px; width: 19px; height: 19px; text-indent: -9999px; background: url(/themeImages/thickbox/left.gif) top center no-repeat;} #TB_prev a:hover {background-position: center;} #TB_prev a:active {background-position: bottom center;} #TB_prev a strong {display: none;} #TB_of {position: absolute; bottom: 6px; left: 15px;} /* IE6 Travesties of Injustice -------------------------------------------------*/ * html #TB_window {position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');} * html #TB_load {position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');} * html #TB_HideSelect {position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');} * html #TB_overlay {position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}