/* ------------------------------------------------------------ Title: Advertising Age master styles for screen media Updated: Nov 5 2005 ------------------------------------------------------------ */ body { margin: 0 0 0 15px; padding: 0; font-family: Verdana, Arial, sans-serif; font-size: small; background: #fff; } a:link, a:visited { color: #c60; } a:hover { color: #c00; text-decoration: underline; } a:link.nav-right, a:visited.nav-right { color: #c60; } a:hover.nav-right { color: #c00; text-decoration: underline; } /* ------------------------------------------------------------ page structure ------------------------------------------------------------ */ #wrap { width: 920px; font-size: 95%; background: url(http://adage.com/img/wrap-bg.gif) repeat-y top right; } #main { float: left; width: 920px; margin: 0; background: url(http://adage.com/img/main-bg.gif) repeat-y top left; } #main-body { float: right; width: 747px; } #content { float: left; width: 430px; padding: 15px; border-top: 1px solid #ddd; } #sidebar { float: right; width: 287px; } #nav { float: left; width: 173px; background: #404040; } #nav-right { float: left; width: 287px; background: #dddddd; } #footer { clear: both; padding: 10px 0 0 0; background: #fff; } #footer-nonav { clear: both; border-top: 4px solid #fff; padding: 10px 0 0 0; background: #eee; } /* ------------------------------------------------------------ header ------------------------------------------------------------ */ #header { position: relative; width: 920px; padding: 0 0 6px 0; background: url(http://adage.com/img/header-bg.gif) no-repeat bottom left; } #header:after { /* self-clear float */ content: "."; display: block; height: 0; clear: both; visibility: hidden; } #header-nonav { position: relative; width: 920px; padding: 0 0 6px 0; background: url(http://adage.com/img/header-bg-nonav.gif) no-repeat bottom left; } #header-nonav:after { /* self-clear float */ content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* logo */ #logo { position: absolute; bottom: 6px; left: 0; } /* top message */ p#top-message { margin: 0; padding: 10px; } p#top-message a { font-family: Georgia, serif; font-weight: bold; } /* sign in and search */ #dashboard { float: right; width: 257px; margin: 0 0 15px 0; padding: 15px 15px 18px 15px; } #dashboard p { margin: 0 0 30px 0; padding: 0; font-family: Georgia, serif; } #dashboard a:link, #dashboard a:visited { color: #369; } #dashboard a:hover { color: #c00; } /* search form */ form.search { margin: 0; padding: 0; } form.search strong { display: block; } form.search input { vertical-align: middle; } form.search input.search-text { width: 180px; color: #666; } form.search em { display: block; margin: 5px 0 0 0; font-size: 90%; font-style: normal; } form.search em a:link, form.search em a:visited { color: #369; } form.search em a:hover { color: #c00; } /* ------------------------------------------------------------ main (more from, advertising) ------------------------------------------------------------ */ div#rlcontainer { } div#rlcontainer #left { float: left; white-space:nowrap; } div#rlcontainer #right { float: right; padding-right: 10; white-space:nowrap; } dl#morefrom { width: 717px; height: 21px; margin: 0; padding: 0 15px 15px 15px; font-family: Georgia, serif; font-size: 90%; border-bottom: 2px solid #fff; background: #ebebeb url(http://adage.com/img/morefrom-bg.gif) repeat-x bottom left; } dl#morefrom:after { /* self-clear float */ content: "."; display: block; height: 0; clear: left; visibility: hidden; } dl#morefrom dt { float: left; margin: 0 10px 0 0; padding: 0; font-weight: bold; } dl#morefrom dt a { color: #000; } dl#morefrom dd { float: left; margin: 0 10px 0 0; padding: 0; } /* ------------------------------------------------------------ content styles ------------------------------------------------------------ */ /* "READ MORE" global link style */ strong.more { display: block; margin: 2px 0 10px 0; padding: 0; font-weight: normal; text-align: left; } strong.more a { padding: 0 0 0 13px; font-size: 90%; line-height: 1.4em; text-decoration: none; background: url(http://adage.com/img/icon-more-arrow.gif) no-repeat 0 50%; } strong.more a:hover { text-decoration: underline; } strong.playvideo a { padding: 3px 0 3px 24px; font-size: 100%; text-decoration: none; background: url(http://adage.com/img/play.gif) no-repeat 0 50%; } strong.playvideo a:hover { text-decoration: underline; } /* "MORE" blue bar section links */ #content h3.more-link { margin: 0; padding: 0; font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 100%; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; text-align: right; } #content h3.more-link a:link, #content h3.more-link a:visited { display: block; padding: 1px 3px; text-decoration: none; color: #fff; background: #369; } #content h3.more-link a:hover { background: #c60; } #content h2.landing-link a:link, #content h2.landing-link a:visited { text-decoration: none; font-family: "Georgia", serif; font-size: 87%; text-transform: uppercase; letter-spacing: 1px; padding: -10px; font-weight: normal; color: #369; } #content h2.landing-link a:hover { text-decoration: underline; color: #c00; } /* Section Archive */ #content div.archive { margin: 0; padding: 10px 0; font-size: 90%; color: #666; border-top: 1px solid #fff; border-bottom: 1px solid #bbb; } #content div.archive h4 { margin: 0; padding: 0; font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 130%; line-height: 1.2em; } #content div.archive h5 { margin: 0; padding: 0; font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 100%; line-height: 1.2em; } #content div.archive h4 a:link, #content div.archive h4 a:visited { color: #000; text-decoration: none; } #content div.archive h4 a:hover { text-decoration: underline; color: #c00; } #content div.archive div.date { color:#666; font-size: 80%; padding: 0 0 0 0px; } /* graphic header (special reports) */ div.sr-header { margin: 0 0 0 0; padding: 0 0 10px 0; border-bottom: 1px dashed #999; } /* ------------------------------------------------------------ home page styles (also shared on other pages) ------------------------------------------------------------ */ /* top story */ div.story-top { color: #666; border-bottom: 1px solid #9a9a9a; } div.story-top p { clear:left; } div.story-sub { clear:left; } div.story-top h1, div.story-top h2, div.story-sub h1 { margin: 0 0 10px 0; padding: 0; color: #000; font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 220%; line-height: 1.1em; } div.story-top h2 { font-size: 200%; } div.story-top h1 a:link, div.story-top h1 a:visited, div.story-top h2 a:link, div.story-top h2 a:visited, div.story-sub h1 a:link, div.story-sub h1 a:visited { color: #000; text-decoration: none; } div.story-top h1 a:hover, div.story-sub h1 a:hover, div.story-top h2 a:hover, div.story-top h2 a:hover { text-decoration: underline; color: #c00; } div.story-top p { margin: 10px 0; padding: 0; line-height: 1.5em; } /* sub story */ div.story-sub { margin: 0; padding: 10px 0 0 0; color: #666; border-bottom: 1px solid #9a9a9a; } div.story-sub:after { /* self-clear floats */ content: "."; display: block; height: 0; clear: both; visibility: hidden; } div.story-last { /* add if no border is desired */ border-bottom: none; } div.story-sub h2 { margin: 0; padding: 0; font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 180%; line-height: 1.1em; } div.story-sub h3 { margin: 0; padding-top: 7px; font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 125%; line-height: 1.1em; } div.story-sub h2 a:link, div.story-sub h2 a:visited { color: #000; text-decoration: none; } div.story-sub h2 a:hover { text-decoration: underline; color: #c00; } div.story-sub p { margin: 10px 0; padding: 0; line-height: 1.5em; } /* full column headers */ div.tvspots { padding: 6px; width: 417; font-size: 135%; font-weight: bold; color: #CCCC00; background: #990033; } div.specialcoverage { padding: 6px; width: 417; font-size: 135%; font-weight: bold; color: #CCFF00; background: #999900; } div.listing { width: 417px; height: 360px; padding: 0px; overflow: auto; } /* framed large photos */ div.story-photo { float: left; /*width: 420px;*/ margin: 5px 0 0 5px; padding: 0 7px 7px 0; /* hide from IE/Mac \*/ background: url(http://adage.com/img/shdw-big.gif) no-repeat bottom right; /* end hide */ } div.story-photo-abstract { float: left; /*width: 420px;*/ margin: 5px 15px 15px 5px; padding: 0 7px 7px 0; /* hide from IE/Mac \*/ background: url(http://adage.com/img/shdw-big.gif) no-repeat bottom right; /* end hide */ } div.video-thumb { float: left; /*width: 80px;*/ margin: 5px 0 0 5px; padding: 0 7px 7px 0; /* hide from IE/Mac \*/ background: url(http://adage.com/img/shdw-big.gif) no-repeat bottom right; /* end hide */ } /* this will need to be tweaked for shadowing */ div.video-thumb img.thumb { float: left; display: block; position: relative; margin: -5px 0 0 -5px; border: 1px solid #666; } div.video-caption { float: right; width: 300px; margin: 0; padding: 10; font-family: Verdana, Arial, sans-serif; font-size: 90%; } div.subsect-hdr { width: 410px; margin-bottom: 10px; padding: 5px; font-family: Verdana, Arial, sans-serif; color: #ffffff; font-weight: bold; background: #444444; } div.subsect-hdr-sub { width: 407px; margin-bottom: 0px; padding: 5px; font-family: Verdana, Arial, sans-serif; color: #ffffff; font-weight: bold; background: #444444; } div.group-columns { float: right; width: 300px; margin: 0; padding: 10; font-family: Verdana, Arial, sans-serif; font-size: 90%; } div.group-columns ul { margin: 0; padding: 0; list-style: none; } div.group-columns ul li { margin: 0 0 3px 0; padding: 0 0 0 13px; background: url(http://adage.com/img/icon-arrow-blu.gif) no-repeat 0 5px; } div.column { border-bottom: 1px solid #9a9a9a; } div.story-sub div.story-photo { float: left; /*width: 130px;*/ margin: 5px 20px 0 5px; } div.story-photo img { position: relative; margin: -5px 0 0 -5px; padding: 4px; border: 1px solid #ccc; background: #fff; } /* two-column group (structure) */ div.no-group { margin: 15px 0; padding: 12px 0; font-size: 90%; } div.group { margin: 15px 0; padding: 12px 0; font-size: 90%; background: url(http://adage.com/img/group-bg.gif) repeat-y 50% 0; } div.group:after, div.no-group:after { /* self-clear floats */ content: "."; display: block; height: 0; clear: both; visibility: hidden; } div.group-one { float: left; width: 200px; } div.group-two { float: right; width: 200px; margin: 0 0 0 15px; } /* for same styles, but one column */ div.single { position: relative; background: none; } /* two-column group (text styles) */ div.group h2, div.no-group h2 { margin: 0 0 20px 0; padding: 0; font-family: Georgia, serif; font-size: 150%; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; line-height: 1.1em; color: #369; } div.group h2 a:link, div.group h2 a:visited, div.no-group h2 a:link, div.no-group h2 a:visited { color: #369; text-decoration: none; } div.group h2 a:hover, div.no-group h2 a:hover { text-decoration: underline; color: #c00; } div.group h3, div.no-group h3 { clear:left; margin: 0 0 10px 0; padding: 0 0 2px 0; font-size: 90%; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; color: #369; background: url(http://adage.com/img/subhead-dots.gif) repeat-x bottom left; } div.group h3 a:link, div.group h3 a:visited, div.no-group h3 a:link, div.no-group h3 a:visited { color: #369; text-decoration: none; } div.group h3 a:hover, div.no-group h3 a:hover { text-decoration: underline; color: #c00; } div.group em.callout, div.no-group em.callout { display: block; margin: 0 0 10px 0; padding: 0; font-family: "Trebuchet MS", Verdana, sans-serif; font-weight: bold; font-style: italic; color: #999; } div.group h4, div.no-group h4 { margin: 0; padding: 0; font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 130%; line-height: 1.2em; } div.group h4 a:link, div.group h4 a:visited, div.no-group h4 a:link, div.no-group h4 a:visited { color: #000; text-decoration: none; } div.group h4 a:hover, div.no-group h4 a:hover { text-decoration: underline; color: #c00; } div.group p, div.no-group p { margin: 0 0 5px 0; padding: 0; line-height: 1.4em; color: #666; border-bottom: 1px solid #9a9a9a; } div.group ul, div.no-group ul { margin: 0; padding: 0; list-style: none; } div.group ul li, div.no-group ul li { margin: 0 0 3px 0; padding: 0 0 0 13px; background: url(http://adage.com/img/icon-arrow-blu.gif) no-repeat 0 5px; } /* framed small photos */ div.photo-sm { float: left; margin: 10px 10px 0 5px; padding: 0 6px 6px 0; background: url(http://adage.com/img/shdw-sm.gif) no-repeat bottom right; } div.photo-sm img { float: left; display: block; position: relative; margin: -5px 0 0 -5px; border: 1px solid #666; } /* no border on last item */ div.group p.last { border-bottom: none; } /* search at bottom */ form#searchb, form#searchl { margin: 0; padding: 20px 0; border-top: 2px solid #ccc; } form#searchl { /* landing page */ padding-top: 0; border-top: none; } form#searchad input.search-text { /* advanced search */ width: 300px; } /* upsell message */ div.message { font-size: 90%; color: #666; } div.message p { margin: 0 0 6px 0; padding: 0; } /* landing page title */ h1.landing { margin: 0 0 15px 0; padding: 0; font-family: Georgia, serif; font-size: 130%; font-weight: normal; text-transform: uppercase; text-align: left; letter-spacing: 1px; line-height: 1.1em; color: #369; } #content h1.landing a:link, #content h1.landing a:visited { text-decoration: none; color: #369; } #content h1.landing a:hover { text-decoration: underline; color: #c00; } /* ------------------------------------------------------------ advertising banner ------------------------------------------------------------ */ div.ad728 { clear: both; margin: 0; padding: 10px 0 0 0; background: #fff; } div.ad728 div.child { margin: 0 0 0 15px; padding: 2px; border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; } /* when it's above #content */ div.top { padding: 0 0 3px 0; border-top: 1px solid #ddd; } div.top div { border-top: none; padding-top: 3px; } /* when it needs to stick to the bottom */ div.bottom { margin-left: 173px; } /* ------------------------------------------------------------ nav (left column) ------------------------------------------------------------ */ #nav { font-family: Georgia, serif; } #nav div#date { color:#bbb; font-size: 90%; padding: 0 0 0 10px; } /* sections */ #nav div.sect { margin: 0; padding: 8px 0 10px 0; background: url(http://adage.com/img/side-sect-bg.gif) no-repeat bottom left; } #nav div.last { background: none; } #nav-right div.sect { margin: 0; padding: 8px 0 10px 0; } /* section headers */ #nav div.sect h3 { margin: 0 10px; padding: 0; font-size: 130%; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; color: #69c; background: url(http://adage.com/img/side-h3-dots.gif) repeat-x bottom left; } #nav div.sect h3 a:link, #nav div.sect h3 a:visited { display: block; padding: 2px 0; text-decoration: none; color: #69c; } #nav div.sect h3 a:hover { color: #ddd; } #nav div.sect h3.active { margin: 0; } #nav div.sect h3.active a:link, #nav div.sect h3.active a:visited { padding-left: 10px; color: #fff; background: #369 url(http://adage.com/img/icon-side-arrow.gif) no-repeat 0 50%; } #nav div#nav-home h3 { /* no dots on home */ position: relative; background-image: none; } #nav-right div.sect h3 { margin: 0 10px; padding: 0; font-size: 130%; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; color: #000000; background: url(http://adage.com/img/side-h3-dots.gif) repeat-x bottom left; } #nav-right div.sect h3 a:link, #nav-right div.sect h3 a:visited { display: block; padding: 2px 0; text-decoration: none; color: #000000; } #nav-right div.sect h3 a:hover { color: #000000; } #nav-right div.sect h3.active { margin: 0; } #nav-right div.sect h3.active a:link, #nav-right div.sect h3.active a:visited { padding-left: 10px; color: #000000; } #nav div#nav-home h3 { /* no dots on home */ position: relative; background-image: none; } /* section lists */ #nav div.sect ul { margin: 8px 0 0 0; padding: 0; list-style: none; } #nav div.sect ul li { margin: 0; padding: 0; } #nav div.sect ul li.special { margin-top: 20px; } #nav div.sect ul li a { display: block; padding: 1px 10px 1px 20px; text-decoration: none; color: #ddd; background: url(http://adage.com/img/icon-arrow-ora.gif) no-repeat 10px 5px; } #nav div.sect ul li a:hover { color: #fff; background-color: #333; } #nav div.sect ul li.active a { color: #fff; background: #369 url(http://adage.com/img/icon-side-arrow.gif) no-repeat 0 50%; } #nav div.sect ul li.special-active a { color: #fff; margin-top: 20px; background: #369 url(http://adage.com/img/icon-side-arrow.gif) no-repeat 0 50%; } #nav-right div.sect ul { margin: 8px 0 0 0; padding: 0; list-style: none; } #nav-right div.sect ul li { margin: 0; padding: 0; } #nav-right div.sect ul li.special { margin-top: 20px; } #nav-right div.sect ul li a { display: block; padding: 1px 10px 1px 0px; text-decoration: none; color: #ddd; } #nav-right div.sect ul li a:hover { color: #000000; } #nav-right div.sect ul li.active a { color: #000000; } /* ad banner */ #nav div.ad { clear: right; float: left; width: 173px; margin: 15px 0; text-align: center; } /* ------------------------------------------------------------ sidebar (right column) ------------------------------------------------------------ */ #sidebar div.sect { margin: 0; padding: 10px 0; font-size: 90%; color: #666; border-top: 1px solid #fff; border-bottom: 1px solid #bbb; } #sidebar div.sect strong.more { margin-bottom: 0; } #sidebar div.sect h2 { margin: 0 15px 10px 15px; padding: 0; font-family: Georgia, serif; font-size: 140%; font-weight: normal; text-transform: uppercase; text-align: left; letter-spacing: 1px; line-height: 1.1em; color: #369; } #sidebar div.sect h2 a:link, #sidebar div.sect h2 a:visited { text-decoration: none; color: #369; } #sidebar div.sect h3 { margin: 0 15px; padding: 0; font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 130%; text-align: left; color: #000000; } #sidebar div.sect h3 a:link, #sidebar div.sect h3 a:visited { text-decoration: none; color: #000000; } #sidebar div.sect h2 a:hover, #sidebar div.sect h3 a:hover { text-decoration: underline; color: #c00; } #sidebar div.sect p { margin: 5px 15px 0 15px; padding: 0; line-height: 1.4em; text-align: left; } #sidebar div.sect div.photo { margin: 5px 0px 0 15px; padding: 0; text-align: left; } #sidebar div.sect div.photo img { border: 1px solid #666; } #sidebar div.sect ul { position: relative; margin: 0 15px; padding: 0; list-style: none; } #sidebar div.sect ul li { margin: 0 0 3px 0; padding: 0 0 0 13px; background: url(http://adage.com/img/icon-arrow-blu.gif) no-repeat 0 5px; } #list div.sect ul { position: relative; margin: 0 1px; padding: 0; list-style: none; } #list div.sect ul li { margin: 7px 0 3px 0; padding: 0 0 0 13px; font-size: 13px; line-height: 15px; background: url(http://adage.com/img/icon-arrow-blu.gif) no-repeat 0 5px; } #sidebar div.sect ol { margin: 5px 15px 0 2em; padding: 0 0 0 12px; } #sidebar div.sect ol li { margin: 0 0 4px 0; padding: 0; } /* ad blocks */ #sidebar div.ad { margin: 0; padding: 18px 0; text-align: center; background: url(http://adage.com/img/side-ad-bg.gif); } #sidebar div.side-top { /* if the ad is the first block of the column */ border-top: none; border-bottom: 1px solid #bbb; } #sidebar div.whead { /* if the ad has a heading above it */ padding-top: 10px; } /* ------------------------------------------------------------ Form elements ------------------------------------------------------------ */ input#username, input#password, input#submit { font-size: 1.2em; } #submit { text-align:center; align:center; } /* ------------------------------------------------------------ footer ------------------------------------------------------------ */ #footer { font-family: Georgia, serif; } #credits_title { font-family: Georgia, serif; color: #ffffff; font-size: 10px; } #credits_text { font-family: verdana, sans-serif; color: #000000; font-size: 10px; } #footer #portal { margin: 0; padding: 15px 0; background: #eee; } #footer #portal:after { /* self-clear floats */ content: "."; display: block; height: 0; clear: both; visibility: hidden; } #footer #portal div { margin: 0 0 20px 0; } #footer #portal div:after { /* self-clear floats */ content: "."; display: block; height: 0; clear: both; visibility: hidden; } #portal h4 { float: left; width: 173px; margin: 0 15px 0 0; padding: 0; font-size: 120%; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; text-align: right; color: #369; } #portal ul { float: right; width: 732px; margin: 0; padding: 0; list-style: none; } #portal ul li { float: left; margin: 0 4px 0 0; padding: 0 4px 0 0; line-height: 1.4em; border-right: 1px solid #369; } #portal ul li.last { border-right: none; } /* more from links */ #footer dl { margin: 0 0 0 188px; padding: 0; font-family: Georgia, serif; font-size: 90%; } #footer dl dt { float: left; margin: 0 8px 0 0; padding: 0; font-weight: bold; } #footer dl dt a { color: #000; } #footer dl dd { float: left; margin: 0 4px 0 0; padding: 0 4px 0 0; line-height: 1.4em; border-right: 1px solid #369; } #footer dl dd.last { border-right: none; } /* copyright line */ #footer #copyright { clear: both; margin: 0; padding: 10px 0 30px 0; text-align: right; color: #666; background: #fff; } #footer-nonav #copyright { clear: both; margin: 0; padding: 0px 10px 10px 0; text-align: right; color: #666; background: #eee; } /* ------------------------------------------------------------ "special report" wider sidebar style (300px) ------------------------------------------------------------ */ body.sr #wrap { background-image: url(http://adage.com/img/wrap-bg-sr.gif); } body.sr #header { background-image: url(http://adage.com/img/header-bg-sr.gif); } body.sr #header-nonav { background-image: url(http://adage.com/img/header-bg-sr-nonav.gif); } body.sr #dashboard { width: 270px; } body.sr #content { width: 417px; } body.nonav #content { width: 580px; } body.sr div.article div.story-photo { width: 407px; } body.sr #sidebar { width: 300px; } /* ------------------------------------------------------------ misc. ------------------------------------------------------------ */ .hide, hr { display: none; } a img { border: none; } /* ------------------------------------------------------------ Tables ------------------------------------------------------------ */ .row { background-color:#eeeeee; } .label { background-color:#dddddd; width: 150px; font-size: 90%; font-weight: bold; font-family: Georgia, serif; } .row_data { background-color:#eeeeee; padding: 8px; } .row_offer { background-color:#CCFFCC; } .row_selected { background-color:#DFDFFB; } .row_dimin { background-color:#dddddd; } .row_comments { background-color:#fff; } .row_comments_spacer { width:420px; height:1px; padding-bottom:5px; background: url(http://adage.com/img/eeeeee-border.gif) repeat-x; } .row:hover { background-color:#DFDFFB; } div.quote { background: url(http://adage.com/img/quote.gif) no-repeat top left; padding: 10px; } td.top { vertical-align:top; } td.right { text-align:right; } td.center { text-align:center; padding:4px; } td.question { padding:10px; font-family: Georgia, serif; font-size: 150%; line-height: 1.4em; width: 417px;} td.dimin { padding:10px; font-family: Arial, sans-serif; font-size: 100%; width: 417px;} th.right { text-align:right; } th.middle { vertical-align:middle; } th.bottom { vertical-align:bottom; text-align:left; } .red, .req { color:#ff0000; } /* general elements */ #message div.border { border-bottom: 1px solid #bbb; }