Skip to content

Instantly share code, notes, and snippets.

@schneidan

schneidan/titanic-section-page-css

Created October 31, 2013 03:09
Show Gist options
  • Save schneidan/7243853 to your computer and use it in GitHub Desktop.
Save schneidan/7243853 to your computer and use it in GitHub Desktop.
Download ZIP
This is the CSS for the Denver Post's 100-year-later Titanic section at denverpost.com/titanic
Raw
titanic-section-page-css
/* [file] redesign_sectionpage.css */
/* css for SECTION PAGE LAYOUT */
body.bodyStyle {
background-color: #0A1F40;
}
div#masthead_section {
height:auto!important;
}
div#masthead_sectiondate {
display:none!important;
}
TD.preHeaderRegion {
background: #0A1F40!important;
}
.footerRegion .adElement {
background: #0A1F40!important;
}
div#navRegistration {
display:none!important;
}
.postHeaderRegion1 div#navwrapper, .postHeaderRegion1 div#navcontainer {
background: #0A1F40!important;
}
div#navcontainer {
background: #0A1F40!important;
}
div#navwrapper {
background: #0A1F40!important;
}
div.contentStyle {
background: none repeat scroll 0 0 #0A1F40;
color:#eee;
}
div.contentStyle .region5 .boxblue h1, div.contentStyle .region4 .boxblue h1, div.contentStyle .region3 .boxblue h1, div.contentStyle .region5 .boxblue h2, div.contentStyle .region4 .boxblue h2, div.contentStyle .region3 .boxblue h2 {
color: #fff;
margin: 0 0 8px;
}
div.contentStyle .region5 .boxblue h2, div.contentStyle .region4 .boxblue h2, div.contentStyle .region3 .boxblue h2 {
font: 12px Arial, Verdana, sans-serif;
color: #fff;
margin: 0 0 8px;
}
div.contentStyle .region5 h1, div.contentStyle .region4 h1, div.contentStyle .region3 h1 {
font-size:14px;
line-height:14px;
padding: 0 0 6px;
}
div.contentStyle .region5 .boxblue h1 a:link, div.contentStyle .region4 .boxblue h1 a:link, div.contentStyle .region3 .boxblue h1 a:link, div.contentStyle .region5 .boxblue h2 a:link, div.contentStyle .region4 .boxblue h2 a:link, div.contentStyle .region3 .boxblue h2 a:link {
color: #fff;
margin: 0 0 8px;
}
div.contentStyle .region5 .boxblue a:link, div.contentStyle .region4 .boxblue a:link, div.contentStyle .region3 .boxblue a:link {
color: #fff;
margin: 0 0 8px;
}
div.contentStyle .region5 .boxblue p, div.contentStyle .region4 .boxblue p, div.contentStyle .region3 .boxblue p {
color: #fff;
}
td.region4 .complexListingBox {
background: #0A1F40!important;
margin: 0 0 25px;
width: 100%;
color:#eee;
}
td.region4, td.region3, td.region5 {
background: #0A1F40!important;
margin: 0 0 25px;
width: 327px;
color:#eee;
}
td.region4 {
border-right: none!important;
}
td.region5 .complexListingBox {
background: #0A1F40!important;
margin: 0 0 25px;
width: 100%;
color:#eee;
}
td.region1 {
background: #0A1F40!important;
line-height:0px!important;
}
td.region1 table td {
background: #0A1F40!important;
height:616px;
}
.region5 .boxblue, .region3 .boxblue, .region4 .boxblue , .region5 .boxblue .contentblock, .region3 .boxblue .contentblock, .region4 .boxblue .contentblock{
background:#0A1F40!important;
}
.region5 .boxblue ul, .region3 .boxblue ul, .region4 .boxblue ul, .region5 .boxblue .contentblock ul, .region3 .boxblue .contentblock ul, .region4 .boxblue .contentblock ul{
background:#0A1F40!important;
color: #fff;
}
.region5 .boxblue ul li, .region3 .boxblue ul li, .region4 .boxblue ul li, .region5 .boxblue .contentblock ul li, .region3 .boxblue .contentblock ul li, .region4 .boxblue .contentblock ul li {
background:#0A1F40!important;
color: #fff;
}
#redesign_default div.complexListingBox a.listingItemTitle {
color: #fff;
display: block;
padding: 10px 0 0;
}
#redesign_default .boxgrey a:visited, #redesign_default .boxwhite a:visited, #redesign_default table.complexListingBox a.listingItemTitle:visited, #redesign_default .tabbedbox .tabboxoutline li a:visited, #redesign_default table.complexListingBox a.complexListingLink:visited, #redesign_default a:visited {
color: #6E7FB3; text-decoration:none!important;
}
#redesign_default .boxgrey a:hover, #redesign_default .boxwhite a:hover, #redesign_default table.complexListingBox a.listingItemTitle:hover, #redesign_default .tabbedbox .tabboxoutline li a:hover, #redesign_default table.complexListingBox a.complexListingLink:hover, #redesign_default a:hover {
color: #6E7FB3; text-decoration:none!important;
}
#redesign_default div.contentStyle .region5 .boxblue a:hover h1, #redesign_default div.contentStyle .region5 .boxblue a:hover h2, #redesign_default div.contentStyle .region5 .boxblue a:visited h1, #redesign_default div.contentStyle .region5 .boxblue a:visited h2, #redesign_default div.contentStyle .region4 .boxblue a:hover h1, #redesign_default div.contentStyle .region4 .boxblue a:hover h2, #redesign_default div.contentStyle .region4 .boxblue a:visited h1, #redesign_default div.contentStyle .region4 .boxblue a:visited h2 {
color: #6E7FB3; text-decoration:none!important;
}
#redesign_default table.complexListingBox a.listingItemTitle:hover, #redesign_default .tabbedbox .tabboxoutline li a:hover, #redesign_default table.complexListingBox a.complexListingLink:hover, #redesign_default a:hover {
color: #6E7FB3!important;
}
/* CENTER COLUMN - blue border - left */
#redesign_sectionpage{display:block; clear:both}
td.region4 {
/*padding: 8px 0 8px 8px;
border-left: 10px solid #fff;*/
}
/* CENTER COLUMN - blue border - right
td.region13, td.region5 {
/*width: 280px;*/
}
/* CENTER COLUMN - blue border - left */
div.region4and5box{
background: #e3e6eb;
border-left: 10px solid #fff;
padding: 8px 0px 0px 8px;
}
div.region4 {
width: 292px;
/*padding: 8px 0 8px 8px;*/
background: #e3e6eb;
/*border-left: 10px solid #fff;*/
}
/* CENTER COLUMN - blue border - right */
div.region5 {
background: #e3e6eb;
/* width: 315px; */
}
div.region10 {
width: 327px;
/*background: lime;*/
float: left;
}
div.region13 {
float: left;
margin-right: 0;
padding-right: 0;
}
/*-------------------------------*/
/* MAIN headline */
.region2 img.listing3Image {
margin-right: 10px;
}
/*td.region2 .lastUpdatedDate {
color: #8d1427;
text-transform: uppercase;
font: normal 11px arial, helvetica, verdana, sans-serif;
padding-bottom: 5px;
display: block;
}*/
.region2 li.listNoImage {
margin: 0;
}
.region2 .listingItemTitle {
font-size: 16px;
}
/* fix for odd ie bug - not a problem with proper html markup (missing ul tag) */
*html .region2 li.listNoImage {
margin-left: 0px;
}
/* CENTER COLUMN - right */
/* see also .bluebox styles for the following h1 tags */
.region4 h1,
.region5 h1 {
font-family: Arial, Verdana, sans-serif;
font-size: 11px;
line-height: 12px;
text-transform: uppercase;
margin: 0 0 0 0;
padding: 0 0 3px 0;
border-bottom: 1px dashed #ccc;
width: 95%;
}
.region4 li h1,
.region5 li h1 {
font: bold 12px Arial, Helvetica, sans-serif;
color: #A8130C;
background: none;
padding: 0;
margin: 0 0 5px 0;
height: auto;
}
/* if a complexListing is used in regions 4 or 5 - style differently to go with bluebox styles */
.region4 table.complexListingBox a.complexListingTitle,
.region5 table.complexListingBox a.complexListingTitle {
font: bold 12px arial, verdana, sans-serif;
color: #eee;
padding: 0;
text-transform: uppercase;
display: block;
margin: 0 0 2px 0;
width: 300px;
border-bottom: 1px dashed #ccc;
}
.region4 table.complexListingBox .listingItemTitle,
.region5 table.complexListingBox .listingItemTitle {
padding: 0;
margin: 0;
}
.region4 table.complexListingBox a.listingItemTitle,
.region5 table.complexListingBox a.listingItemTitle {
padding: 0;
margin: 5px 0 0 0;
}
.region4 table.complexListingBox .listingArticleBlurb,
.region5 table.complexListingBox .listingArticleBlurb {
margin: 5px 0 10px 0;
padding: 0;
}
.region4 a.listingArticleLinkTo,
.region5 a.listingArticleLinkTo {
font-size: 11px;
line-height: 17px;
margin: 5px 0 0 5px;
}
.region4 a.listingArticleLinkTo img,
.region5 a.listingArticleLinkTo img {
margin: 0 5px 0 0;
}
.region4 table.complexListingBox li.listNoImage, .region4 li.listNoImage,
.region5 table.complexListingBox li.listNoImage, .region5 li.listNoImage {
list-style: none;
background:transparent url(http://extras.mnginteractive.com/live/media/site36/2008/0303/20080303_101049_bullet_gray.gif) no-repeat scroll 0pt 5px;
font: normal 12px arial, verdana, sans-serif;
line-height: 1em;
margin: 8px 0 3px 0px;
padding: 0;
display: block;
}
.region4 table.complexListingBox li.listNoImage a.complexListingLink, .region4 li.listNoImage a.complexListingLink,
.region5 table.complexListingBox li.listNoImage a.complexListingLink, .region5 li.listNoImage a.complexListingLink {
color: #eee;
display: block;
line-height: 14px;
margin-left: 10px;
padding: 0;
font: normal 12px arial, helvetica, sans-serif;
}
/* --- FIX for ie - rendering differently due to lack of ul tag --- */
*html .region4 table.complexListingBox li.listNoImage, *html .region4 li.listNoImage,
*html .region5 table.complexListingBox li.listNoImage, *html .region5 li.listNoImage {
padding: 0;
clear: both;
margin: 0 0 5px 0px; /* was margin-left: 13px */
line-height: 14px;
background:transparent url(http://extras.mnginteractive.com/live/media/site36/2008/0303/20080303_101049_bullet_gray.gif) no-repeat scroll 0pt 5px;
}
*html .region4 table.complexListingBox li.listNoImage a.complexListingLink, *html .region4 li.listNoImage a.complexListingLink,
*html .region5 table.complexListingBox li.listNoImage a.complexListingLink, *html .region5 li.listNoImage a.complexListingLink {
margin: 0;
padding: 0 0 0 10px;
text-indent: -15px;
}
/* --- END ie fix --- */
/* Edit 20061127 Joe Murphy: Reduced the bottom padding from 30px to 0px increased the top from 10px to 15px, added the margin-left declaration */
div.listingItemTitle {
padding: 15px 0 0px 0;
margin-left:0px!important;
font: normal 11px arial, helvetica, verdana, sans-serif;
color: #aaa ;
}
/* if a pollsbox is used in regions 4 or 5 - style differently to go with bluebox styles */
.region5 table.pollsBox {
margin: 10px 0 25px 0;
width: 100%;
height: 100%;
}
.region5 table.pollsBox td.pollsAnswer {
padding-left: 30px;
text-indent: -3px;
}
.region5 table.pollsBox td.pollsAnswer input {
margin-left: -20px;
}
.nobullet {
list-style-type: none;
background: none;
}
.inline
{
display: inline !important;
}
/* Edit 20061103 Joe Murphy Fixes the div.region5 float:right lack-of-margin issue on section indexes */
div.region4and5box
{
padding:10px!important;
}
/* Edit 20061109 Joe Murphy Fixes the div.region6 width issues float:right lack-of-margin issue on section indexes */
div.region6, div.region3
{
padding-left:10px!important;
_padding:0;
}
div.region3
{
_width:330px;
_padding:0 0 0 5px!important;
}
/* Edit 20070502 Joe Murphy Fixes the skinny poll width on section fronts */
table.pollsBox
{
width:300px!important;
}
a.weatherWarn {padding: 0 0 3px 0x;margin: 0;text-align: left;font: bold 11px Arial, Helvetica, sans-serif;color:red;
}
.woodyback {
position : relative;
left : 0;
top : 0;
height :480;
width : 640;
}
.woodyimage {
position : absolute;
left : 25;
top : 92;
}
/*style for red highlighted freeform headers*/
h1.red {color: #A8130C;}
/*sets the mini-nav list in the header to float right*/
/*
.region5 ul.mininav {color: #FFF; float: right;list-style: none;padding: 0;margin: 0;font: 11px Arial, Helvetica, sans-serif;}
.region5 ul.mininav li {float: left;margin: 8px 3px 0 0;line-height: 20px;}
.region5 ul.mininav li img {margin: 0 0 0 6px;padding: 4px 0 0 0;}
.region5 ul.mininav li a, ul.mininav li a:visited {color: #FFF; text-decoration: none;}
.region5 ul.mininav li a:hover {text-decoration: underline;}
*/
/*-------------------------------*/
div.clear {
clear: both;
}
p
{
font: 12px Arial, Helvetica, sans-serif;
margin-bottom:3px;
}
table.complexListingBox li.listNoImage {
background:transparent url(http://extras.mnginteractive.com/live/media/site36/2008/0303/20080303_101049_bullet_gray.gif) no-repeat scroll 0pt 8px;
font: normal 12px/15px arial, verdana, sans-serif;
margin: 0px 0 3px 2px;
padding: 0;
display: block;
}
.region2 .complexListingBox {
margin: 60px 0 0 0;
}
.region2 .complexListingTitle {
font-weight: bold;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.region2 .complexListingImage {
padding: 10px 10px 0 0;
}
.region2 .listingArticleBlurb {
margin: 0;
padding: 0;
}
.region2 table.complexListingBox a.listingItemTitle {
font-size: 24px;
}
/* MW added during Redesign 08 */
.region4 h1, .region5 h1 {
margin: 20px 0 0 0;
}
/* Special Sections CSS 8/08 MW */
.specialsection {
margin: 10px 0 0 5px;
width: 300px;
}
.specialsection h1 {
font-size: 18px;
font-family: Times, "Times New Roman", Georgia, Serif;
color: #003459;
text-transform: none;
font-weight: normal;
border: 0;
margin: 0 0 0px 0;
padding: 0;
line-height: 20px;
}
.specialsection h1 a:link,
.specialsection h1 a:visited {
text-decoration: none;
}
.specialsection h1 a:hover,
.specialsection h1 a:active {
text-decoration: none;
}
#specialmultimedia img {
background-color:#FFFFFF;
border:1px solid #A5A5A5;
padding:4px;
}
#specialmultimedia li {
height: 25px;
margin: 4px 0 0 0;
font-size: 11px;
padding: 2px 0 0 20px;
}
ol
{
margin-top:0;
}
/* Changes made to make full-span /greenbusiness CL look less wonky on the bulleted-list items */
td.region2b span#redesign_complexListing_layout5 { margin-left: 15px; display:block; }
td.region2b span#redesign_complexListing_layout5 table.complexListingBox a.complexListingLink { display:inline; }
/* sports- and business-specific breaking news widget adjustments */
#bnews-widget { width: 294px!important; _width:325px!important; margin-right:0!important; }
.region3 #bnews-widget { _width:313px!important; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment