/* These styles have been split off of our main stylesheet, website.css,
   because they pertain only to the home page, and loading them on every
   page is wasteful of bandwidth.
*/

p.p_factoid { 
    color: #636d3d;
    font: bold italic 10pt Arial, Helvetica, sans-serif;
    line-height: 18pt;
}

p.p_factoid:before { 
    /* icing -- in some browsers this 
    adds a bullet to factoid at start of 
    paragraph (...but not in IE6 or IE7) */
    content: url(/images/bulletb.gif);
    padding-right: 3px;
}

.special-projects {
    padding: 4px 0 21px;
}

.space-bx-blocks {
    padding: 10px 0 10px;
}


.sidebar {
    padding-top: 16px;
}


/* MIDDLE (NEWS AREA) */

/* area1 = top of column */

.area1 {
    min-height: 10px;
}

.area1 ul {
    margin-bottom: 0px;
}

.area1 hr {
    margin-top: 20px;
    margin-bottom: 5px;
}

.area1 h1 {
    font-size: 13pt;
    line-height: 15pt;
}

.area1 h2 {
    font-size: 14pt;
    line-height: 16pt;
}

.area1 .emphasize-block,
.area2 .emphasize-block {
    width:345px; 
    padding-bottom: 8px
}

.snow {
    width:331px; 
    background-color:#f4f0e3;
    margin:15px 0 20px;
    padding:9px 7px 1px;
}
.snow.emergency {
    border: medium double #ee1c24;
}
.snow.emergency h1 {
    color: #ee1c24;
}
.snow.alert {
    border: medium double #f66606;
}
.snow.alert h1 {
    color:  #ca5500;
}
.snow.watch {
    border: medium double #f9c263;
}
.snow.watch h1 {
    color:  #000;  /*#ca5500;*/
}


/* area2 = top stories, under area1 <hr /> 
   - with padding for 105pt wide picture at left) */

.area2 {
    margin-top: 0px;
    margin-bottom: 15px;
    }

.area2 h3 {
    padding: 0 0 0 117px;
    font-size: 14pt;
    line-height:1.2em;
    }

.area2 h4 {
    padding: 0 0 0 117px;
    margin-top: 23px;
    line-height:1.2em;
    }

.area2 p {
    padding: 0 0 0 117px;
    }

.area2 ul {
    padding: 0 0 0 135px;
    margin-bottom: 0px;
    }

.area2 img {
    margin: 3px 0 0 0;
    float:left;
    width: 105px;
    height: 140px;
    }

.area2 img.no-resize,
.area2 img.xlink-img {
    width: auto; 
    height: auto;
    float: none;
    text-decoration: none;
    }

.area2 div.story {
    margin-bottom: 10px;
    min-height:145px;
    }

.area2 div.clear {
    clear:both; /* This keeps pictures from 
    extending down too far when the text is 
    shorter than the img */
    }

/* area3 = "CityWEB highlights," under area2 and <hr /> 
   - with padding for 66pt wide picture at left) */

.area3 {
    margin-top: 15px;
    margin-bottom: 0px;
    }

.area3 h3 {
    padding: 0 0 0 78px;
    font-size: 12pt;
    line-height:1.2em;
    }

.area3 h4 {
    padding: 0 0 0 78px;
    margin-top: 23px;
    line-height:1.2em;
    }

.area3 p {
    padding: 0 0 0 78px;
    }

.area3 ul {
    padding: 0 0 0 96px;
    margin-bottom: 0px;
    }

.area3 img {
    margin: 3px 0 0 0;
    float:left;
    width: 66px;
    height: 88px;
    }

.area3 img.no-resize,
.area3 img.xlink-img {
    width: auto; 
    height: auto;
    float: none;
    text-decoration: none;
    }

.area3 div.story {
    margin-bottom: 6px;
    min-height:98px;
    }

.area3 div.clear {
    clear:both; /* This keeps pictures from 
    extending down too far when the text is 
    shorter than the img */
    }

/* This can be used in area2 or area3 to provide a tan background to a special story 
   Usage: <div class="special story"> */ 
div.story.special {
    background-color:#F4F0E3;
    padding:12px 2px 8px 4px;
    margin-bottom:18px;
    }