@charset "UTF-8"; /* CSS Document */ /* ---------------------------- RESET ____________________________ */ body,img,p,h1,h2,h3,h4,h5,h6,form,table,td,ul,ol,li,fieldset { margin:0; padding:0; border:0; } p,h1,h2,h3,h4,h5,h6,ul,ol { margin:15px 0; } ul,ol { padding-left: 20px; } input,select { vertical-align: middle; } /* ---------------------------- HTML SELECTORS ____________________________ */ body { background: #dd291e; font:12px/18px "Avant Garde", "Century Gothic", "HelveticaNeue-Light", "Calibri", Helvetica, Arial, sans-serif; color:#6d6e71; } label { display: block; } input, textarea { padding: 3px; width: 200px; font-weight: bold; } textarea { height: 150px; width: 400px; } /* ---------------------------- TYPOGRAPHY ____________________________ */ body { font:12px/18px "Myriad Pro", "Calibri", Helvetica, Arial, sans-serif; } h1,h2,h3,h4,h5,h6,#client-categories a, #people-categories a, #discipline-categories a, #work-categories a, #campaign-categories ul a, #footer a { font-family: "Avant Garde", "Century Gothic", "HelveticaNeue-Light", Helvetica, Arial, sans-serif; } h1 { font-size: 18px; } h2,h3,h4 { font-size: 14px; } h5,h6 { font-size: 12px; } a { color: #dd291e; font-weight: bold; text-decoration: none; } /* ---------------------------- LAYOUT ____________________________ */ #wrapper { width:920px; padding:0 20px 20px; margin: 0 auto 20px; background: #6d6e71 url(/media/layout/bottom_curve.jpg) bottom left no-repeat; } #navigation { padding: 0 20px; background-color:#fff; } #share { background-color: #fff; text-align: right; padding: 0 20px; } #share a { color: #555; } #header,#header-work { position:relative; padding: 10px 20px; min-height: 240px; background: #fff url(/media/layout/bottom_curve_header.jpg) bottom left no-repeat; } #header-work { height: 260px; } a#logo { width: 179px; height: 122px; position: absolute; bottom:10px; left: 20px; background: url(/media/layout/logo.gif) no-repeat; text-indent: -9999px; } #header-pic, #header-pic-work, #header-pic-client-work { position: absolute; right:20px; width: 650px; height:237px; } #header-pic-client-work { background: url(/media/images/header-pic-client-work.jpg) no-repeat; } #main { } #footer { margin: 0 auto 20px; padding: 0 0 20px 80px; width: 880px; color:#ddd; text-align: right; } #footer ul { margin: 5px 0 10px; padding: 0; list-style: none; float: right; width: 100%; } #footer ul li { padding: 0 0 0 25px; float: right; } #footer ul li a { color: #fff; text-decoration: none; font-weight: normal; } #social-links { clear:both; margin: 0; list-style: none; padding: 0 0 20px 50px; } #social-links li { float: right; padding: 0 10px 0 0; } /* ---------------------------- PAGE/SECTION SPECIFIC ____________________________ */ /* Home */ #home-news, #home-story, #home-work, #home-blog, #home-latest { float: left; margin:20px 0 7px; width: 273px; padding: 0 0 20px 20px; height: 380px; color:#ddd; background: url(/media/layout/bottom_curve_line.jpg) bottom left no-repeat; overflow: hidden; } #home-news, #home-story, #home-blog { margin-right: 20px; } #home-news h2, #home-story h2, #home-work h2, #home-blog h2, #home-latest h2 { font-weight: normal; font-size: 20px; margin-top: 0; line-height: 24px; } #home-news h2, #home-story h2, #home-work h2, #home-blog h2, #home-latest h2, #home-news a, #home-story a, #home-work a, #home-blog a, #home-latest a { color:#fff; } #home-work, #home-latest, #home-blog { position: relative; } /* OLD */ #home-work #innovation-controls { position: absolute; bottom: 10px; right: 10px; } #home-work #innovation-controls a { font-size: 14px; color: #ccc; padding: 0 5px; } #home-work #innovation-controls a.selected { color: #fff; } #home-work .innovation { display: none; } #home-work #innovation1 { display: block; } /* NEW */ .post-controls { position: absolute; top: 3px; right: 0; } #main .post-controls a { font-size: 14px; color: #ccc; padding: 0 5px; } #main .post-controls a.selected { color: #fff; } .home-article { display: none; } #home-blog #blog-post1, #home-latest #news-article1 { display: block; } /* promo panel */ #homeBannerWrapper{float: right; width: 650px;} #homeBanner{} #homeBannerNav{position: relative; top: -30px; left: -10px; z-index: 50; float: right;} #homeBannerNav a {padding: 7px 10px 10px 9px; color:#fff; text-decoration:none; margin:0 0 0 5px; background: url('/media/layout/promo-panel-gray.png') no-repeat top left;} #homeBannerNav a.activeSlide, #homeBannerNav a:focus {background: url('/media/layout/promo-panel-red.png') no-repeat top left; color:#fff;} #homeBannerLogo{float: left; width: 200px; } #homeBannerLogo img{margin-top: 117px;} /* Static Pages */ #content { width: 690px; min-height: 250px; padding:0 50px 40px; margin-top: 30px; float: right; background: #e7e8e9 url(/media/layout/bottom_curve_content-grey.jpg) bottom left no-repeat; } #discipline-categories { padding: 0; margin-top: 30px; list-style: none; float: left; width: 120px; } #discipline-categories li a { color:#ccc; display: block; text-align: right; padding:3px 15px 3px 0; } #discipline-categories li a:hover { color:#fff; } #discipline-categories li a.selected { color:#fff; background: url(/media/layout/dot.gif) right center no-repeat; } ul#discipline-subcategories{font-size:10px; margin:0 10px 0 0; padding:0;} /* Blog & News */ #blog, #news, #shoptalk { padding: 10px 20px; margin-bottom: 12px; background: #fff url(/media/layout/bottom_curve_header.jpg) bottom left no-repeat; } a#blog-logo, a#news-logo { display:block; width: 179px; height: 122px; padding-right: 20px; float: left; background: url(/media/layout/logo.gif) no-repeat; text-indent: -9999px; } a#shoptalk-logo { display:block; width: 140px; height: 95px; padding-right: 20px; float: left; background: url(/media/layout/logo-shoptalk.gif) no-repeat; text-indent: -9999px; } #shoptalk-main { float: right; width: 719px; } #shoptalk-content { border: 2px solid #6d6e71; border-width: 0 2px; float: left; width: 360px; padding: 0 20px; } #shoptalk-sidebar { float: right; width: 300px; } #shoptalk-sidebar ul { list-style: none; padding: 0 0 5px 5px; border-bottom: 1px solid #ccc; } #blog-main { float: right; width: 680px; } #news-main { float: right; width: 658px; padding-left: 20px; border-left: 2px solid #6d6e71; } #blog-content { border: 2px solid #6d6e71; border-width: 0 2px; float: left; width: 470px; padding: 0 20px; } #blog-sidebar { float: right; width: 150px; } #blog-sidebar ul { list-style: none; padding: 0 0 5px 5px; border-bottom: 1px solid #ccc; } #blog .article, #news .article { border-bottom: 2px solid #6d6e71; margin-bottom: 20px; } #blog h2, #blog h6, #news h2, #news h6 { margin: 0 0 5px; } #blog h6, #news h6 { font-style: italic; font-weight: normal; text-transform: lowercase; } #blog h1 a, #blog h2 a, #news h1 a , #news h2 a { color:#333; text-decoration: none; } #blog #video-holder, #news #video-holder { margin: 15px 0; } #blog-comments .comment { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 2px solid #6d6e71; } #blog-comments .comment h6 { margin: 0 0 3px; } #blog-comments .comment p { margin: 0 0 15px; } #twitterfeed { padding: 5px 0 0; border-top: 1px solid #ccc; } #twitterfeed h3 { margin:5px 0; } #twitterfeed p { margin: 5px 0; padding: 0 0 5px; border-bottom: 1px solid #ccc; } #twitterfeed p a { color:#555; font-weight: normal; display: block; } #twitterfeed p a:hover { color:#dd291e; } /* tweets on home page and shoptalk */ .tweet { display: block; margin-bottom: 15px; clear: both; } .tweet ul.tweet_list { margin: 0; padding: 0; list-style: none; } .tweet ul.tweet_list li { padding: 5px 0; clear: both; line-height: 1.2em; } .tweet ul.tweet_list li, .tweet ul.tweet_list li span, .tweet ul.tweet_list li a { font-weight: normal; } .tweet ul.tweet_list li img { float: left; margin: 0 10px 20px 0; border: 1px solid #ccc; } ul#social_bookmarks { list-style: none; padding-left: 0; } ul#social_bookmarks li { display: inline; padding: 5px; } /* FMP Map Locator */ #fmp-map { padding: 10px 20px; margin-bottom: 12px; background: #fff url(/media/layout/bottom_curve_header.jpg) bottom left no-repeat; } #fmp-map-logos { width: 179px; float: left; } a#fmp-logo { display: block; width: 179px; height: 211px; margin-top: 40px; clear: left; float: left; background: url('/media/layout/fmp-logo.jpg') no-repeat; text-indent: -9999px; } /* Work */ /* Work - Clients */ #client-categories { padding: 0; margin-top: 30px; list-style: none; float: left; width: 120px; } #client-categories li a { color:#ccc; display: block; text-align: right; padding:3px 15px 3px 0; } #client-categories li a:hover { color:#fff; } #client-categories li a.selected { color:#fff; background: url(/media/layout/dot.gif) right center no-repeat; } #client-list { width: 790px; padding-bottom: 30px; margin-top: 30px; float: right; background: url(/media/layout/bottom_curve_line.jpg) bottom left no-repeat; } #client-list ul { list-style: none; margin: 0; } #client-list ul li { float:left; width: 33%; color:#999; } #client-list ul li, #client-list ul li a { text-transform: lowercase; } /* People */ #people-categories { padding: 0; margin-top: 30px; list-style: none; float: left; width: 120px; } #people-categories li a { color:#ccc; display: block; text-align: right; padding:3px 15px 3px 0; } #people-categories li a:hover { color:#fff; } #people-categories li a.selected { color:#fff; background: url(/media/layout/dot.gif) right center no-repeat; } #people-list { width: 750px; padding:0 20px 40px; margin-top: 30px; float: right; background: #e7e8e9 url(/media/layout/bottom_curve_content-grey.jpg) bottom left no-repeat; } #people-list ul { list-style: none; margin: 0; } #people-list ul li { float:left; margin-top:10px; width: 89px; text-indent: -9999px; background-position:0 0; background-repeat: no-repeat; } #people-list ul li a { display: block; width: 75px; height: 74px; overflow: hidden; text-indent: -9999px; background-position:0 0; background-repeat: no-repeat; } /* #people-list ul li a:hover { background-position-y: -74px; } */ /* Work */ #work-categories { padding: 0; margin-top: 30px; list-style: none; float: left; width: 120px; } #work-categories li a { color:#ccc; display: block; text-align: right; padding:3px 15px 3px 0; } #work-categories li a:hover { color:#fff; } #work-categories li a.selected { color:#fff; background: url(/media/layout/dot.gif) right center no-repeat; } #client-list li.selected * { color:#fff; } #client-list li a { color:#fff; font-weight: normal; } #header-pic-work #slideshow { position: relative; height:267px; width: 650px; } #header-pic-work #slideshow img { position:absolute; top:0; left:0; z-index:8; } #header-pic-work #slideshow img.active { display: block; z-index:10; } #header-pic-work #slideshow img.last-active { z-index:9; } #header-pic-work #slideshow #controls { position:absolute; bottom:5px; left:300px; z-index:20; margin:0; padding:0; } #header-pic-work #slideshow #controls a, #header-pic-work #slideshow #enlarge { color:#6d6e71; text-decoration: none; } #header-pic-work #slideshow #enlarge { position:absolute; bottom:5px; right:5px; z-index:21; } #header-pic-client-work #showcase { position: relative; height:267px; width: 650px; } #header-pic-client-work #showcase #client-detail { position: absolute; top:20px; left:20px; width: 200px; } #header-pic-client-work #showcase #client-detail h1 { margin: 0 0 10px; font-size: 14px; } #header-pic-client-work #showcase img { border: 20px solid #808080; border-width: 20px 20px 19px; position: absolute; right: 0; top:0; } #header-pic-client-work #showcase #enlarge { position:absolute; bottom:30px; right:20px; z-index:21; color:#eee; font-size: 11px; } #header-pic-client-work #showcase #controls { position:absolute; bottom:5px; right:20px; z-index:20; margin:0; padding:0; } #header-pic-client-work #showcase #controls span { padding: 0 3px 0 10px; font-size: 14px; } #header-pic-client-work #showcase #controls a { padding: 0 2px; } #header-pic-client-work #showcase #controls a:hover, #header-pic-client-work #showcase #controls a.selected { color:#777; } /* Campaigns */ #header-pic-work #campaigns-wrapper { padding-top: 40px; } #header-pic-work #campaigns { width:635px !important; margin-bottom: 20px; height: 156px; overflow: hidden; } #header-pic-work #campaigns ul { margin: 0; padding: 0; list-style: none; } #header-pic-work #campaigns ul li { float: left; } #header-pic-work #campaigns a { display: block; width: 127px; float: left; text-align: right; text-transform: lowercase; } #header-pic-work #campaigns a span { display: block; color: red; line-height: 14px; height: 45px; padding-left: 20px; } #header-pic-work #campaigns-wrapper #prevbtn, #header-pic-work #campaigns-wrapper #nextbtn { position: absolute; bottom: 5px; } #header-pic-work #campaigns-wrapper #prevbtn { left: 0; } #header-pic-work #campaigns-wrapper #nextbtn { left: 60px; } #header-pic-work #campaigns #enlarge { position:absolute; bottom:5px; right:5px; z-index:21; } #campaign { background: #fff url(/media/layout/campaign-body-bg.jpg) no-repeat -74px bottom; } #campaign a#campaign-logo { display: block; } #campaign-categories { float: left; width: 121px; } #campaign-categories ul { padding: 0; margin-top: 30px; list-style: none; float: left; width: 100px; } #campaign-categories ul li a { color:#ccc; display: block; text-align: right; padding:3px 15px 3px 0; } #campaign-categories ul li a:hover { color:#fff; } #campaign-categories ul li a.selected { color:#fff; background: url(/media/layout/dot.gif) right center no-repeat; } #campaign-viewer { float: right; width: 740px; padding: 20px 20px 20px 0; } #campaign-viewer a#view-all { float: right; text-transform: lowercase; } #campaign-viewer h2 { margin: 0; text-transform: lowercase; } #campaign-viewer h2 span { display: block; margin-top: 3px; font-size: 14px; font-weight: normal; } #campaign-viewer p#campaign-controls { margin: 5px 0; } #campaign-viewer p#campaign-controls a { font-size: 14px; } #campaign-viewer p#campaign-controls a.selected { color: black; } #campaign-viewer .piece { display: none; text-align: center; } #campaign-viewer #piece1 { display: block; } #bio h1 { position: absolute; left:260px; top:10px; font-weight: normal; font-size: 12px; width: 100px; color: #fff; text-transform: lowercase; } #bio h1 span { display: block; padding-top: 10px; width: 85px; } #bio #bioWithQuote { position: absolute; left:645px; top:25px; font-weight: normal; font-size: 12px; color: #fff; width: 250px; } #bio #bioWithQuote #bioHolder { width: 250px; height:210px; overflow: auto; float: left; text-align: center; } #bio #bioWithQuote h2 { font-size: 12px; font-weight:normal; color: #fff; margin-top: 0; } #bio #bioWithQuote h2 span { display: block; padding-top: 10px; } /* ---------------------------- CLASSES ____________________________ */ div.clear { overflow:hidden; height:1px; clear:both; } img.alignRight { float:right; margin:0 0 15px 15px; } img.alignLeft { float:left; margin:0 15px 15px 0; } .error { color: red; } .pdf { padding-left: 15px; background: url(/media/layout/pdf_icon.jpg) no-repeat left 50%; } .rss { padding-left: 15px; background: url(/media/layout/rss.jpg) no-repeat left 50%; } .twitter { padding-left: 15px; background: url(/media/layout/twitter.jpg) no-repeat left 50%; } .myspace { padding-left: 15px; background: url(/media/layout/myspace.jpg) no-repeat left 50%; } .facebook { padding-left: 15px; background: url(/media/layout/facebook.jpg) no-repeat left 50%; } /* /telecom/ */ #soworkgallery{padding-bottom: 60px; background: #fff url('/media/layout/bottom_curve_header.jpg') bottom left no-repeat;}