/*--------------------------------------------------------------------------------------- Website: President Buildings Author: Allen Design Group Created: April 2010 ---------------------------------------------------------------------------------------*/ @import "default.css"; html { height: 100%;} body { background: #3886ac; height: 100%;} /*--------------------------------------------------------------------------------------- Base Typography ---------------------------------------------------------------------------------------*/ /*------------------------------------ Links ------------------------------------*/ a:link { color: #6acdf6;} a:visited { color: #6acdf6;} a:hover { color: #eda1a7;} /*------------------------------------ Type ------------------------------------*/ body { font: 62.5% "Trebuchet MS", Arial, Helvetica, sans-serif; color: #808080;} #container { font-size: 1.3em; line-height: 1.4em; text-align: left;} p { padding: 0 0 1.4em 0;} /*------------------------------------ Headers ------------------------------------*/ /* Inner h2 */ h1 { font-size: 2.4em; color: #6acdf6; padding: 25px 0 20px; text-transform:uppercase;} h2 { font-size: 1.3em; color: #6acdf6; padding: 10px 0 5px; text-transform:uppercase;} /* SideCol h3 */ #sideCol h3 { height: 45px; width: 248px; padding: 0 0 0 23px; border-bottom: 1px solid #fff; line-height: 45px; text-transform:uppercase; color: #fff; font-size: 1.1em; background: url('../images/perfect-match_h3.png') no-repeat transparent;} /*--------------------------------------------------------------------------------------- Layout ---------------------------------------------------------------------------------------*/ /*------------------------------------ Container ------------------------------------*/ #outerContainer { height: 100%; position: relative;} #container { position: absolute; width: 850px; top: 0; left: 50%; margin: 0 0 0 -470px; background: #fff; padding: 0 45px 20px;} /* Page Background */ #backgroundWrap { position: absolute; height: 100%; width: 100%; } #background{ position:fixed;} #background img {height:100%;width:100%;position:absolute;z-index: 0;} /*------------------------------------ Header ------------------------------------*/ #header {overflow: hidden; background: url('../images/header.png') repeat-x; height: 98px;} #logo { margin: 30px 0 0 189px; width: 471px; height: 41px; display: block;} address { float: right; font-style: normal; font-size: 1.2em; margin-top: 65px;} ul#mainNav { list-style: none; margin: 5px 0 0 0; padding: 0; width: 100%; overflow: hidden; font-size: 1.1em; text-transform:uppercase;} ul#mainNav li { display: inline; float: left; padding: 0; border-right: 1px solid #8edbf9;} ul#mainNav li.last { border-right: 0;} ul#mainNav li a { float: left; display: block; width: 140px; line-height:35px; color: #fff; text-decoration: none; background: url('../images/mainnav_bg.png') no-repeat top center #2ca6eb; text-align: center;} ul#mainNav li.first a { width: 143px;} ul#mainNav li.last a { width: 142px;} ul#mainNav li a:hover { background-position: 50% -35px; } ul#mainNav li a.selected { background-position: 50% -70px; color: #cbdce4;} /*------------------------------------ Cols ------------------------------------*/ #cols { margin-top: 16px; width: 100%; } #cols:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;} #cols {display:inline-block;} #mainCol { float: left; width: 558px; position: relative;} #mainCol #contentText { margin-top: 16px; padding: 0 10px;} #sideCol { float: right; width: 271px; background: url('../images/sideCol_bg.png') no-repeat 0 0 #3a9de9; color: #fff;} /* Pefect Match */ #sideCol #perfectMatch { width: 248px; min-height: 162px; padding: 15px 0 132px 23px; background: url('../images/perfect-match-img.png') no-repeat bottom left;} #sideCol #perfectMatch h4 { color: #fff; font-size: 1.2em; padding-bottom: 10px; background: transparent;} #sideCol #perfectMatch .telephone { font-size: 2.2em; line-height: 1.2em; font-weight: bold; display: inline-block; padding: 3px 0 10px;} #sideCol #perfectMatch a { color: #fff; text-decoration: underline; background: transparent;} #sideCol #perfectMatch a:hover { color: #b6e1f3;} /* Features */ #features { margin-top: 16px; font-size: 1.1em;} #features div { float: left; width: 271px; height: 122px; margin-right: 18px;} #features div.last { margin-right: 0;} #features div img { position: absolute;} #features div.gettingHere img { top: -11px; left: 0;} #features div.availability img { top: -6px; left: 9px;} #features div.whosHere img { top: -11px; left: 5px;} #features div a { display: block; width: 271px; height: 122px; background: url('../images/feature_bg.png') no-repeat; text-align: right; position: relative; color: #6dcff6; text-decoration: none;} #features div a:hover { background-position: bottom left;} #features div a span { display: block; position: absolute; bottom: 17px; right: 14px; cursor: pointer;} #features div a strong { color: #fff; font-size: 1.4em; padding-bottom: 5px; display: block; background: transparent;} /*------------------------------------ Footer ------------------------------------*/ #footer { overflow: hidden; padding: 19px 0 0; font-size: 11px; color: #939598;} ul#footerInfo { float: left; list-style: none; margin: 0; padding: 0;} ul#footerInfo li { display: inline; float: left; padding: 0 7px 0 0; margin-right: 7px;} ul#footerInfo li span { color: #6dcff6;} ul#footerInfo li a { float: left; color: #939598; text-decoration: none;} ul#footerInfo li a:hover { } ul#footerInfo li a.selected { } ul#minorNav { float: right; list-style: none; margin: 0; padding: 3px 0 0;} ul#minorNav li { display: inline; float: left; padding: 0 8px 0 0; margin-right: 8px; border-right: 1px solid #c4c4c4; line-height: 1.1em;} ul#minorNav li.last { padding-right: 0; margin-right: 0; border: 0;} ul#minorNav li a { float: left; color: #939598; text-transform:uppercase; text-decoration: none;} ul#minorNav li a:hover { color: #6acdf6; } ul#minorNav li a.selected { color: #6acdf6; font-weight: bold;} /*--------------------------------------------------------------------------------------- Page Contents ---------------------------------------------------------------------------------------*/ /*------------------------------------ SCROLLABLE ------------------------------------*/ /* Base */ .scrollable { position:relative; overflow:hidden; width:469px; height:528px;} .scrollable .items { width:20000em; position:absolute; clear:both;} .scrollable .items img { float: left;} /* Controls */ .scrollable .scrollControls { } .scrollable .scrollControls div { position: absolute; top: 0; width: 38px; height: 354px; text-indent: -9999px; overflow: hidden; z-index: 99; cursor: pointer;} .scrollable .prevPage { left: 0; background: url('../images/scroll_left.png') no-repeat;} .scrollable .nextPage { right: 0; background: url('../images/scroll_right.png') no-repeat;} .scrollable .scrollControls div:hover { background-position: bottom left;} /* Conetent */ .scrollable .items .item { float: left;} /*------------------------------------ HOME ------------------------------------*/ #mainImg { width: 558px; height: 354px; position: relative; overflow: hidden;} #mainImg .textOverlay { position: absolute; z-index: 30; bottom: 0; left:0; width: 516px; height: 63px; padding: 21px; background: url('../images/overlay_bg.png') transparent; font-size: 1.4em; color: #fff; line-height: 1.2em;} #mainImg .textOverlay h1 { font-size: 1.1em; color: #6acdf6; padding: 0; text-transform:none;} ul#imgfade { list-style: none; margin: 0; padding: 0;} ul#imgfade li { padding: 0;} /*------------------------------------ LOCATION ------------------------------------*/ #map { width: 558px; height: 354px;} dl.directions { padding-bottom: 1.4em;} dl.directions dt { padding-bottom: 5px;} dl.directions dd { padding: 0 0 0px 20px; } dl.directions a { color: #808080;} dl.directions .selected { font-weight: bold; color: #6acdf6; } /*------------------------------------ OCCUPIERS ------------------------------------*/ #occupiers { } #occupiers .item { overflow: hidden; padding: 20px 0 15px; border:1px solid #7E7E7E; border-left: 0; border-right: 0; margin-bottom: 4px;} #occupiers .item .abstract { float: left; width: 400px; font-size: .9em; line-height: 1.3em;} #occupiers .item .abstract h3 {color: #6dcff6; text-transform:uppercase; font-size: 1.1em; font-weight: bold; padding-bottom: 12px; } #occupiers .item .abstract .additionalInfo { position: relative;} #occupiers .item .abstract .additionalInfo a { color: #808080;} #occupiers .item .abstract .additionalInfo .close { position: absolute; bottom: 0; right: -128px;} #occupiers .item .links { float: right; width: 102px;} #occupiers .item .links a { display: block; width: 92px; height: 32px; line-height: 32px; padding-right: 10px; margin-bottom: 7px; text-align: right; color: #fff; text-decoration: none; text-transform:uppercase; font-size: .9em; background: transparent;} #occupiers .item .links .showOnMap { background: url('../images/button_show-on-map.png') no-repeat;} #occupiers .item .links .readMore { background: url('../images/button_read-more.png') no-repeat;} #occupiers .item .links a:hover { background-position: bottom left;} ul#occNav { margin: 0 0 0 30px; padding: 20px 0 35px 0; } ul#occNav li { padding: 2px 0;} ul#occNav li a { color: #fff; text-decoration: none; background: transparent;} /* Back */ a.backLink { position: absolute; top: 380px; right: -151px;} /* 3d View */ #officePlan { background: url('../images/3d.png') no-repeat center left; padding: 20px 0 20px 75px; position: absolute; top: 420px; left: 580px; float: left; white-space:nowrap;} /*------------------------------------ AVAILABILITY ------------------------------------*/ #interactiveMap { width: 552px; height: 352px; background: url('../images/map_bg.png') no-repeat;} #interactiveMap #floor1 { } #interactiveMap #floor2 { display: none;} #interactiveMap #floor3 { display: none;} .legend { position: absolute; top: 104px; left: 124px; display: none;} .legend .currentFloor { color: #921f23; font-size: 1.6em;} .legend .selectFloor { color: #939598; padding: 10px 0 0 3px;} .legend .selectFloor span { font-size: .8em;} .legend .selectFloor ul { list-style: none; margin: 0; padding: 0; overflow: hidden;} .legend .selectFloor ul li { padding: 0; display: inline; float: left; border-right: 1px solid; padding-right: 4px; margin-right: 4px; line-height: .9em;} .legend .selectFloor ul li.last { margin-right: 0; padding-right: 0; border-right: 0;} .legend .selectFloor ul li a { float: left; text-decoration: none; font-weight: bold;} #interactiveMap ul.units { padding: 0; margin: 0; list-style: none;} #interactiveMap ul.units li { padding: 0; display: block; text-align: center; background: #29c6ff; color: #215263; text-decoration: none; position: absolute; font-weight: bold; cursor:default; z-index: 2;} #interactiveMap ul.units li.avail { background:#c42d3e; color: #fff;} #interactiveMap ul.units li#u1, #interactiveMap ul.units li#u1-2, #interactiveMap ul.units li#u1-3 { width: 64px; height: 27px; line-height: 27px; left: 369px; top: 264px; z-index: 10;} #interactiveMap ul.units li#u2, #interactiveMap ul.units li#u2-2, #interactiveMap ul.units li#u2-3 { width: 52px; height: 27px; line-height: 27px; left: 316px; top: 264px; z-index: 10;} #interactiveMap ul.units li#u3, #interactiveMap ul.units li#u3-2, #interactiveMap ul.units li#u3-3 { width: 51px; height: 27px; line-height: 27px; left: 264px; top: 264px; z-index: 10;} #interactiveMap ul.units li#u4, #interactiveMap ul.units li#u4-2, #interactiveMap ul.units li#u4-3 { width: 56px; height: 27px; line-height: 27px; left: 207px; top: 264px; z-index: 10;} #interactiveMap ul.units li#u4 span.fill, #interactiveMap ul.units li#u4-2 span.fill, #interactiveMap ul.units li#u4-3 span.fill { display: block; width: 28px; height: 22px; position: absolute; bottom: 27px; left: 0; background: #29c6ff; z-index: 10;} #interactiveMap ul.units li#u5, #interactiveMap ul.units li#u5-2, #interactiveMap ul.units li#u5-3 { width: 46px; height: 27px; line-height: 27px; left: 160px; top: 264px; z-index: 10;} #interactiveMap ul.units li#u6, #interactiveMap ul.units li#u6-2, #interactiveMap ul.units li#u6-3 { width: 52px; height: 27px; line-height: 27px; left: 107px; top: 264px; z-index: 10;} #interactiveMap ul.units li#u7, #interactiveMap ul.units li#u7-2, #interactiveMap ul.units li#u7-3 { width: 61px; height: 27px; line-height: 27px; left: 45px; top: 264px; z-index: 10;} #interactiveMap ul.units li#u8, #interactiveMap ul.units li#u8-2, #interactiveMap ul.units li#u8-3 { width: 27px; height: 27px; line-height: 27px; left: 127px; top: 191px; z-index: 9;} #interactiveMap ul.units li#u9, #interactiveMap ul.units li#u9-2, #interactiveMap ul.units li#u9-3 { width: 57px; height: 27px; line-height: 27px; left: 69px; top: 191px;z-index: 8;} #interactiveMap ul.units li#u10, #interactiveMap ul.units li#u10-2, #interactiveMap ul.units li#u10-3 { width: 27px; height: 21px; line-height: 21px; left: 69px; top: 169px;z-index: 7;} #interactiveMap ul.units li#u11, #interactiveMap ul.units li#u11-2, #interactiveMap ul.units li#u11-3 { width: 27px; height: 19px; line-height: 19px; left: 69px; top: 149px;z-index: 6;} #interactiveMap ul.units li#u12, #interactiveMap ul.units li#u12-2, #interactiveMap ul.units li#u12-3 { width: 27px; height: 22px; line-height: 22px; left: 69px; top: 126px;z-index: 5;} #interactiveMap ul.units li#u14, #interactiveMap ul.units li#u14-2, #interactiveMap ul.units li#u14-3 { width: 27px; height: 25px; line-height: 25px; left: 69px; top: 100px;z-index: 4;} #interactiveMap ul.units li#u15, #interactiveMap ul.units li#u15-2, #interactiveMap ul.units li#u15-3 { width: 27px; height: 18px; line-height: 18px; left: 69px; top: 81px;z-index: 3;} #interactiveMap ul.units li#u16, #interactiveMap ul.units li#u16-2, #interactiveMap ul.units li#u16-3 { width: 58px; height: 27px; line-height: 27px; left: 69px; top: 52px;} #interactiveMap ul.units li#u17, #interactiveMap ul.units li#u17-2, #interactiveMap ul.units li#u17-3 { width: 29px; height: 27px; line-height: 27px; left: 128px; top: 52px;} #interactiveMap ul.units li#u18, #interactiveMap ul.units li#u18-2, #interactiveMap ul.units li#u18-3 { width: 31px; height: 27px; line-height: 27px; left: 158px; top: 52px;} #interactiveMap ul.units li#u19, #interactiveMap ul.units li#u19-2, #interactiveMap ul.units li#u19-3 { width: 31px; height: 27px; line-height: 27px; left: 190px; top: 52px;} #interactiveMap ul.units li#u20, #interactiveMap ul.units li#u20-2, #interactiveMap ul.units li#u20-3 { width: 37px; height: 27px; line-height: 27px; left: 222px; top: 52px;} #interactiveMap ul.units li#u21, #interactiveMap ul.units li#u21-2, #interactiveMap ul.units li#u21-3 { width: 64px; height: 27px; line-height: 27px; left: 260px; top: 52px;} #interactiveMap ul.units li#u22, #interactiveMap ul.units li#u22-2, #interactiveMap ul.units li#u22-3 { width: 41px; height: 27px; line-height: 27px; left: 325px; top: 52px;} #interactiveMap ul.units li#u23, #interactiveMap ul.units li#u23-2, #interactiveMap ul.units li#u23-3 { width: 28px; height: 27px; line-height: 27px; left: 367px; top: 52px;} #interactiveMap ul.units li#u24, #interactiveMap ul.units li#u24-2, #interactiveMap ul.units li#u24-3 { width: 59px; height: 27px; line-height: 27px; left: 396px; top: 52px;} #interactiveMap ul.units li#u25, #interactiveMap ul.units li#u25-2, #interactiveMap ul.units li#u25-3 { width: 27px; height: 28px; line-height: 28px; left: 428px; top: 81px;} #interactiveMap ul.units li#u26, #interactiveMap ul.units li#u26-2, #interactiveMap ul.units li#u26-3 { width: 27px; height: 28px; line-height: 28px; left: 428px; top: 110px;} #interactiveMap ul.units li#u27, #interactiveMap ul.units li#u27-2, #interactiveMap ul.units li#u27-3 { width: 27px; height: 26px; line-height: 26px; left: 428px; top: 138px;} #interactiveMap ul.units li#u28, #interactiveMap ul.units li#u28-2, #interactiveMap ul.units li#u28-3 { width: 27px; height: 25px; line-height: 25px; left: 428px; top: 165px;} #interactiveMap ul.units li#u29, #interactiveMap ul.units li#u29-2, #interactiveMap ul.units li#u29-3 { width: 66px; height: 27px; line-height: 27px; left: 389px; top: 191px;} #interactiveMap ul.units li:hover, #interactiveMap ul.units li#u4:hover span.fill, #interactiveMap ul.units li#u4-2:hover span.fill, #interactiveMap ul.units li#u4-3:hover span.fill, #interactiveMap ul.units li.active, #interactiveMap ul.units li#u4.active span.fill, #interactiveMap ul.units li#u4-2.active span.fill, #interactiveMap ul.units li#u4-3.active span.fill { background: #c9eaf8;} #interactiveMap ul.units li.avail:hover, #interactiveMap ul.units li#u4.avail:hover span.fill, #interactiveMap ul.units li#u4-2.avail:hover span.fill, #interactiveMap ul.units li#u4-3.avail:hover span.fill { background: #d75866;} .popupContainer { width: 142px; background: url('../images/popup_bottom.png') no-repeat bottom left; padding-bottom: 22px; position: absolute; left: 50%; margin-left: -38px; z-index: 9999; display: none; color: #939598;} .popup { width: 112px; background: url('../images/popup_top.png') no-repeat; padding: 10px 15px; line-height: 1.4em; text-align: left; z-index: 9999;} .popup .unit { color: #ae2333; text-decoration: underline; margin-right: 5px; font-size: 1em; text-transform:uppercase;} .popup .floor { color: #ae2333; text-decoration: underline; font-size: .8em; text-transform:uppercase; display: none;} .popup .space { } .popup a { font-size: .8em; color: #939598;} p#mapFootnote { padding: 20px 0 5px; color: #939598; text-align: center;} p#mapFootnote span.blue { color: #6dcff6;} p#mapFootnote span.red { color: #af2333;} body#availPage #sideCol #perfectMatch { min-height: 225px;} #legend { overflow: hidden; padding-left: 170px;} #legend div { line-height: 15px; padding-bottom: 5px; text-align: center; float: left;} #legend .occ { margin-right: 50px;} #legend span { display: inline-block; width: 15px; height: 15px; margin-right: 5px; vertical-align: middle;} #legend .occ span { background: #29c6ff; } #legend .avail span { background: #c42d3e;} /*------------------------------------ SITEMAP ------------------------------------*/ body#sitemapPage #contentText { margin-top: 0;} /*------------------------------------ PRIVACY POLICY ------------------------------------*/ body#privacyPolicyPage #contentText { margin-top: 0;} /*------------------------------------ CONTACT ------------------------------------*/ #sideCol #contactForm { width: 248px; padding: 15px 0 0 23px;} #sideCol #contactForm label { display: block; padding: 0 0 4px 0;} #sideCol #contactForm .input { padding: 5px 10px; font-size: 16px; color: #333; width: 204px;} #sideCol #contactForm textarea { padding: 3px 10px; font-size: 16px; color: #333; height: 75px; width: 204px;} #sideCol #contactForm .submitButton { padding: 5px 0 15px 0;} #sideCol #contactForm .submit { background: #3a9de9; color: #fff; border: 0;} a#coh { display: block; width: 225px; height: 157px; margin-top: 10px; background: url('../images/coh.png') no-repeat; text-indent: -9999px; overflow: hidden;} /*--------------------------------------------------------------------------------------- Misc. ---------------------------------------------------------------------------------------*/ /*------------------------------------ ErrorPage ------------------------------------*/ body#errorPage #mainCol { width: 100%;} body#errorPage p#errorMessage { padding: 100px 0; text-align: center;} /*----------------------------------- Commonly Used ------------------------------------*/ p.footnote { margin-top: 1.4em;} p.smallFootnote { font-size: .9em; line-height: 1.4em; margin-top: 2em;} .intro { font-size: 1.1em;} .intro span { color: #6acdf6;} /*------------------------------------ Colorbox ------------------------------------*/ /* ColorBox Core Style*/ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:visible;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} /* Colorbox Skin */ #cboxOverlay{background:#000;} #colorbox{} #cboxTopLeft{width:14px; height:14px; background:url('../images/colorbox/controls.png') 0 0 no-repeat;} #cboxTopCenter{height:14px; background:url('../images/colorbox/border.png') top left repeat-x;} #cboxTopRight{width:14px; height:14px; background:url('../images/colorbox/controls.png') -36px 0 no-repeat;} #cboxBottomLeft{width:14px; height:43px; background:url('../images/colorbox/controls.png') 0 -32px no-repeat;} #cboxBottomCenter{height:43px; background:url('../images/colorbox/border.png') bottom left repeat-x;} #cboxBottomRight{width:14px; height:43px; background:url('../images/colorbox/controls.png') -36px -32px no-repeat;} #cboxMiddleLeft{width:14px; background:url('../images/colorbox/controls.png') -175px 0 repeat-y;} #cboxMiddleRight{width:14px; background:url('../images/colorbox/controls.png') -211px 0 repeat-y;} #cboxContent{background:#fff;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url('../images/colorbox/loading_background.png') center center no-repeat;} #cboxLoadingGraphic{background:url('../images/colorbox/loading.gif') center center no-repeat;} #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url('../images/colorbox/controls.png') 0px 0px no-repeat; width:23px; height:23px; text-indent:-9999px;} #cboxPrevious{left:0px; background-position: -51px -25px;} #cboxPrevious.hover{background-position:-51px 0px;} #cboxNext{left:27px; background-position:-75px -25px;} #cboxNext.hover{background-position:-75px 0px;} #cboxClose{right:0; background-position:-100px -25px;} #cboxClose.hover{background-position:-100px 0px;} .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;} .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}