/* Yahoo! News — Sept. 16, 2005 replica stylesheet */
/* Era rules: Arial/Verdana, 11–13px, Yahoo link blue, underlined links,
   light-blue tabs, beige modules, dotted separators, dense columns. */

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000;
  background: #fff;
  line-height: 1.35;
}
a { color: #0000CC; text-decoration: underline; }
a:visited { color: #551A8B; }
a:hover { color: #B30000; text-decoration: underline; }
a:focus { outline: 1px dotted #B30000; }
img { border: 0; }
.updated { font-size: 10px; color: #666; margin: 0 0 6px; }
.small, .s { font-size: 11px; }
.tiny, .t { font-size: 10px; }
.gray { color: #666; }
.nw { white-space: nowrap; }
b.req { color: #B30000; }
ul { margin: 4px 0; padding-left: 16px; }
li { margin: 0 0 3px 0; }

#page { max-width: 982px; margin: 0 auto; text-align: left; }

/* ---------- top utility strip ---------- */
#util {
  font-size: 11px;
  padding: 3px 6px 3px 8px;
  border-bottom: 1px solid #E3E3E3;
  background: #fff;
}
#util .l { float: left; }
#util .r { float: right; }
#util a { color: #0000CC; }
#util b a { color: #B30000; font-weight: bold; }
#util:after { content:""; display:block; clear:both; }

/* ---------- purple masthead ---------- */
#mast {
  background: #5B0080;
  background: -webkit-gradient(linear, left top, left bottom, from(#7B14A8), to(#4F0070));
  background: linear-gradient(#7B14A8, #4F0070);
  border-bottom: 1px solid #36004C;
  padding: 8px 10px 8px 12px;
  display: table; width: 100%;
}
#mast .logo { display: table-cell; vertical-align: middle; width: 340px; }
#mast .logo a { text-decoration: none; }
#mast .y {
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: 30px; font-weight: 900; font-style: italic;
  color: #fff; letter-spacing: -1px; line-height: 1;
}
#mast .y .bang { color: #FFCC33; }
#mast .news {
  font-family: Verdana, Arial, sans-serif;
  font-size: 21px; font-weight: bold; color: #E9D5F5;
  letter-spacing: 4px; vertical-align: 2px; margin-left: 2px;
}
#mast .signin {
  display: table-cell; vertical-align: middle; text-align: left;
  color: #fff; font-size: 11px; width: 170px; padding-left: 6px;
}
#mast .signin a { color: #FFD24D; }
#mast .sbox { display: table-cell; vertical-align: middle; text-align: right; }
#mast form { margin: 0; }
#mast input.q {
  font-size: 12px; padding: 2px 4px; width: 200px;
  border: 1px solid #36004C; vertical-align: middle;
}
#mast .go {
  font-size: 11px; font-weight: bold; padding: 3px 10px; margin-left: 2px;
  color: #000; background: -webkit-gradient(linear,left top,left bottom,from(#FFDE5C),to(#F5B800));
  background: linear-gradient(#FFDE5C,#F5B800);
  border: 1px solid #A87C00; cursor: pointer; vertical-align: middle;
}
#mast .srow { color: #E9D5F5; font-size: 10px; margin-top: 3px; }
#mast .srow a { color: #FFD24D; font-size: 10px; }
#mast .srow label { margin-right: 4px; }
#mast .srow input { vertical-align: -1px; }
#mast .helplinks { font-size: 10px; margin-top: 4px; }
#mast .helplinks a { color: #E9D5F5; }

/* ---------- breaking / alert strip ---------- */
#alert {
  background: #B30000; color: #fff; font-size: 11px;
  padding: 3px 8px; border-bottom: 1px solid #7A0000;
}
#alert b { color: #FFD24D; letter-spacing: 0.4px; }
#alert a { color: #fff; }

/* ---------- primary nav ---------- */
#nav1 {
  background: #DCE6F4;
  border-bottom: 1px solid #9FB6D4;
  font-size: 11px; padding: 0 4px;
}
#nav1 a {
  display: inline-block; padding: 4px 7px 3px; margin: 0 1px;
  color: #0000CC; font-weight: bold; text-decoration: none;
  border: 1px solid transparent; border-bottom: none;
}
#nav1 a:hover { color: #B30000; text-decoration: underline; }
#nav1 a.on {
  background: #fff; color: #000;
  border: 1px solid #9FB6D4; border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

/* ---------- secondary nav ---------- */
#nav2 {
  background: #F5F1E3;
  border-bottom: 1px solid #D8CFB2;
  font-size: 10px; padding: 3px 8px; color: #666;
}
#nav2 a { color: #0000CC; margin-right: 8px; }

/* ---------- 3-col layout ---------- */
#cols { display: table; width: 100%; table-layout: fixed; }
#rail-l { display: table-cell; width: 152px; vertical-align: top; padding: 6px 4px 10px 8px; }
#center { display: table-cell; vertical-align: top; padding: 6px 10px 10px; }
#rail-r { display: table-cell; width: 300px; vertical-align: top; padding: 6px 8px 10px 4px; }

/* ---------- left rail ---------- */
.rbox { margin-bottom: 14px; }
.rbox h4 {
  font-size: 11px; margin: 0 0 4px; padding-bottom: 2px;
  border-bottom: 1px dotted #999; color: #000; letter-spacing: 0.2px;
}
.rbox ul { list-style: none; margin: 0; padding: 0; }
.rbox li { margin: 0 0 4px; font-size: 11px; }
.rbox li b { font-weight: normal; }
.rbox .fc-head {
  background: #E9F0F9; border: 1px solid #C9D8EC; padding: 3px 5px;
  font-size: 11px; font-weight: bold; margin-bottom: 4px;
}
.rbox .fc-body { border: 1px solid #C9D8EC; border-top: none; padding: 4px 5px 5px; margin-top: -4px; font-size: 11px; }
.rbox .fc-body .topic { font-weight: bold; margin-bottom: 2px; }
.rbox .more { font-size: 10px; display: block; margin-top: 4px; }
.rbox .blurb { font-size: 10px; color: #444; }

/* ---------- center: top story ---------- */
.topstory { margin-bottom: 8px; }
.topstory .ts-photo { float: right; margin: 0 0 6px 10px; width: 190px; }
.topstory .ts-photo img { width: 190px; }
.topstory .cap { font-size: 10px; color: #666; margin-top: 2px; }
.topstory h1 { font-size: 17px; margin: 0 0 2px; line-height: 1.15; }
.topstory h1 a { color: #000; text-decoration: none; }
.topstory h1 a:hover { color: #B30000; text-decoration: underline; }
.topstory .wire { font-size: 10px; color: #666; font-style: italic; margin-bottom: 4px; }
.topstory .sum { font-size: 12px; }
.topstory .sum .dat { font-weight: bold; }
.topstory ul.ts-rel { margin: 5px 0 0; padding: 0; list-style: none; font-size: 11px; }
.topstory ul.ts-rel li { margin: 0 0 2px; }
.topstory:after { content:""; display:block; clear:both; }

h5.more-stories {
  font-size: 10px; color: #666; letter-spacing: 1px;
  border-top: 1px dotted #999; border-bottom: 1px dotted #999;
  padding: 3px 0; margin: 8px 0 4px;
}
ul.headlines { list-style: none; margin: 0; padding: 0; }
ul.headlines li {
  font-size: 12px; padding: 2px 0 3px; margin: 0;
  border-bottom: 1px dotted #C8C8C8;
}
ul.headlines li:last-child { border-bottom: none; }
ul.headlines .tm { color: #666; font-size: 10px; font-style: italic; }
ul.headlines.sm li { font-size: 11px; }

.personalize {
  font-size: 10px; color: #666; margin: 8px 0 10px;
  border-top: 1px dotted #999; padding-top: 4px;
}

/* ---------- section stacks ---------- */
.stack { margin-bottom: 12px; }
.stack .stk-h {
  background: #EAF1FA;
  background: -webkit-gradient(linear,left top,left bottom,from(#F2F7FD),to(#D9E6F6));
  background: linear-gradient(#F2F7FD,#D9E6F6);
  border: 1px solid #C3D4EA; border-bottom: 1px solid #9FB6D4;
  padding: 3px 6px; font-size: 13px; font-weight: bold;
}
.stack .stk-h a { color: #003399; text-decoration: none; }
.stack .stk-h a:hover { color: #B30000; text-decoration: underline; }
.stack .stk-h .r { float: right; font-size: 10px; font-weight: normal; padding-top: 2px; }
.stack .srctabs {
  border: 1px solid #C3D4EA; border-top: none;
  background: #fff; padding: 3px 6px; font-size: 10px; color: #666;
}
.stack .srctabs a { color: #0000CC; text-decoration: none; margin-right: 6px; }
.stack .srctabs a:hover { color: #B30000; text-decoration: underline; }
.stack .srctabs a.on { color: #000; font-weight: bold; text-decoration: underline; }
.stack .srclabel {
  border-left: 1px solid #C3D4EA; border-right: 1px solid #C3D4EA;
  padding: 3px 6px 0; font-size: 10px; font-weight: bold; color: #666;
  letter-spacing: 0.5px;
}
.stack .stk-body {
  border: 1px solid #C3D4EA; border-top: none; padding: 2px 6px 5px;
}
.stack .all-link { font-size: 10px; margin-top: 5px; font-weight: bold; }
.stack .morefrom { font-size: 10px; color: #666; margin: 5px 0 0; }

.wantbox {
  border: 1px solid #DCD3A8; background: #F7F5E4;
  margin: 6px 0 0; padding: 6px; font-size: 11px; text-align: center;
}
.wantbox h6 { font-size: 13px; margin: 0 0 3px; }
.wantbox .blurb { color: #333; }
.wantbox .signin { display: block; margin-top: 4px; font-weight: bold; }

/* ---------- right rail ---------- */
.adbox { margin-bottom: 12px; }
.adbox .adlabel { font-size: 9px; color: #999; text-align: center; margin-bottom: 1px; }
.adframe { border: 1px solid #C9C9C9; background: #fff; }
.ad300 { width: 100%; max-width: 300px; }
.ad160 { width: 160px; margin: 0 auto; }

.mbox { border: 1px solid #C9D8EC; margin-bottom: 12px; }
.mbox .mh {
  background: #EAF1FA;
  background: -webkit-gradient(linear,left top,left bottom,from(#F2F7FD),to(#D9E6F6));
  background: linear-gradient(#F2F7FD,#D9E6F6);
  border-bottom: 1px solid #C9D8EC;
  font-size: 11px; font-weight: bold; padding: 3px 6px;
}
.mbox .mh .r { float: right; font-weight: normal; font-size: 10px; }
.mbox .mb { padding: 4px 6px 6px; font-size: 11px; }
.mbox ul { list-style: none; margin: 0; padding: 0; }
.mbox li { margin-bottom: 4px; }
.mbox .sep { border-top: 1px dotted #999; margin: 5px 0; }
.mbox.beige { border-color: #DCD3A8; }
.mbox.beige .mh { background: linear-gradient(#FAF6E4,#EFE7C8); border-bottom-color: #DCD3A8; }
.mbox .topic { font-weight: bold; }
.mbox .tsub { font-size: 10px; color: #444; margin: 1px 0 3px; }

table.mkt { width: 100%; border-collapse: collapse; font-size: 11px; }
table.mkt td { padding: 1px 0; border-bottom: 1px dotted #DDD; }
table.mkt td.v { text-align: right; font-weight: bold; }
.up { color: #1E7A1E; } .dn { color: #B30000; }

.wxcity { display: inline-block; width: 47%; font-size: 11px; margin-bottom: 3px; }

ul.vidlist li { margin-bottom: 6px; }
ul.vidlist .dur { color: #666; font-size: 10px; }
.play {
  display: inline-block; width: 0; height: 0;
  border-left: 7px solid #B30000; border-top: 5px solid transparent;
  border-bottom: 5px solid transparent; margin-right: 4px;
}
.ph-thumb { text-align: center; }
.ph-thumb img { width: 140px; }
.ph-thumb .cap { font-size: 10px; color: #444; text-align: left; margin-top: 3px; }
.strip4 { display: table; width: 100%; }
.strip4 a { display: table-cell; padding: 0 2px; }
.strip4 img { width: 100%; }

/* ---------- article page ---------- */
.crumb { font-size: 11px; margin-bottom: 6px; color: #444; }
.crumb b { color: #000; }
.art h1.headline { font-size: 20px; line-height: 1.15; margin: 0 0 4px; }
.art .byline { font-size: 11px; color: #666; margin-bottom: 2px; }
.art .byline b { color: #333; text-transform: uppercase; }
.art .stamp { font-size: 10px; color: #888; margin-bottom: 8px; }
.art .actions {
  border-top: 1px dotted #999; border-bottom: 1px dotted #999;
  padding: 4px 0; margin-bottom: 8px; font-size: 11px;
}
.art .actions a { margin-right: 10px; text-decoration: none; }
.art .actions a:hover { text-decoration: underline; }
.art .actions .rate { float: right; }
.art .actions:after { content:""; display:block; clear:both; }
.stars { display: inline-block; cursor: pointer; font-size: 13px; letter-spacing: 1px; color: #999; }
.stars .lit { color: #E8A800; }
.stars span { cursor: pointer; }
.art .body { font-size: 12px; line-height: 1.45; }
.art .body p { margin: 0 0 9px; }
.art .body p.lead { font-size: 13px; }
.art .body .dateline { font-weight: bold; }
.art .aphoto { float: right; width: 200px; margin: 0 0 8px 12px; }
.art .aphoto .ph { border: 1px solid #C9C9C9; padding: 3px; background: #fff; }
.art .aphoto img { width: 100%; display: block; }
.art .aphoto .cap { font-size: 10px; color: #444; padding: 3px 1px 0; }
.art .aphoto .cred { font-size: 9px; color: #888; font-style: italic; padding: 1px 1px 0; }
.art:after { content:""; display:block; clear:both; }
.copynote {
  font-size: 10px; color: #666; border-top: 1px dotted #999;
  margin-top: 10px; padding-top: 6px; line-height: 1.4;
}
.relbox {
  border: 1px solid #C9D8EC; margin: 8px 0;
}
.relbox .mh { background: linear-gradient(#F2F7FD,#D9E6F6); border-bottom: 1px solid #C9D8EC; font-size: 11px; font-weight: bold; padding: 3px 6px; }
.relbox .mb { padding: 4px 6px 6px; font-size: 11px; }

/* ---------- misc pages ---------- */
.pgtitle { font-size: 16px; font-weight: bold; margin: 0 0 6px; }
.pgtitle .sub { font-size: 11px; font-weight: normal; color: #666; }
.lede { font-size: 12px; margin-bottom: 8px; }
.phgrid { display: table; width: 100%; border-collapse: collapse; }
.phgrid .row { display: table-row; }
.phgrid .cell { display: table-cell; width: 25%; padding: 0 6px 14px 0; vertical-align: top; }
.phgrid img { width: 100%; border: 1px solid #C9C9C9; }
.phgrid .cap { font-size: 10px; color: #444; margin-top: 2px; }
.phgrid .lnk { font-size: 11px; font-weight: bold; }
.result { border-bottom: 1px dotted #C8C8C8; padding: 6px 0; }
.result .rt { font-size: 13px; font-weight: bold; }
.result .rs { font-size: 11px; color: #333; margin-top: 1px; }
.result .rm { font-size: 10px; color: #666; margin-top: 1px; }
.result .rm b { color: #1E7A1E; font-weight: normal; }
.searchbar { border: 1px solid #C9D8EC; background: #F2F7FD; padding: 8px; margin-bottom: 10px; }
.searchbar input.q { font-size: 12px; padding: 3px 5px; width: 280px; border: 1px solid #999; }
.searchbar .go { font-size: 11px; font-weight: bold; padding: 4px 12px; color: #000; background: linear-gradient(#FFDE5C,#F5B800); border: 1px solid #A87C00; cursor: pointer; }
.signt {
  width: 340px; margin: 16px auto; border: 1px solid #C9D8EC; background: #fff;
}
.signt .mh { background: linear-gradient(#7B14A8,#4F0070); color: #fff; font-weight: bold; padding: 6px 8px; font-size: 13px; }
.signt .mb { padding: 10px; font-size: 12px; }
.signt input { width: 100%; font-size: 12px; padding: 4px; margin: 3px 0 8px; border: 1px solid #999; }
.signt .go { font-size: 12px; font-weight: bold; padding: 5px 16px; color: #000; background: linear-gradient(#FFDE5C,#F5B800); border: 1px solid #A87C00; cursor: pointer; }
.signt .alt { font-size: 11px; margin-top: 8px; }

.fcbar {
  border: 1px solid #B33030; background: linear-gradient(#F9EAEA,#F2D5D5);
  padding: 5px 8px; margin-bottom: 10px;
}
.fcbar h2 { font-size: 16px; margin: 0; color: #7A0000; }
.fcbar .sub { font-size: 10px; color: #666; margin-top: 1px; }

.tl { border-left: 3px solid #C9D8EC; margin-left: 6px; padding-left: 10px; }
.tl .ti { margin-bottom: 8px; font-size: 11px; }
.tl .ti b { display: block; font-size: 12px; }

/* fake video player */
.player { border: 1px solid #222; background: #000; color: #ccc; padding: 8px; width: 320px; margin: 8px auto; }
.player .scr { background: #101418; height: 180px; text-align: center; padding-top: 60px; font-size: 12px; }
.player .ctl { border-top: 1px solid #333; padding: 5px 4px 2px; font-size: 10px; color: #8a94a0; }
.player .ctl .play2 { color: #fff; }

/* popup overlay (Email/Save/Sign-in gags) */
#ovl {
  display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35); z-index: 99;
}
#ovl .box {
  width: 320px; margin: 120px auto 0; background: #fff;
  border: 1px solid #36004C;
}
#ovl .bh { background: linear-gradient(#7B14A8,#4F0070); color: #fff; font-size: 12px; font-weight: bold; padding: 5px 8px; }
#ovl .bb { padding: 10px; font-size: 12px; }
#ovl .bb input { width: 100%; font-size: 12px; padding: 4px; margin: 3px 0 8px; border: 1px solid #999; }
#ovl .bb .go { font-size: 11px; font-weight: bold; padding: 4px 12px; color: #000; background: linear-gradient(#FFDE5C,#F5B800); border: 1px solid #A87C00; cursor: pointer; }
#ovl .x { float: right; color: #FFD24D; font-weight: bold; cursor: pointer; text-decoration: none; }

/* ---------- footer ---------- */
#foot {
  border-top: 1px solid #C9D8EC; margin-top: 8px; padding: 6px 8px 14px;
  font-size: 10px; color: #666;
}
#foot .fnav { margin-bottom: 4px; }
#foot a { color: #0000CC; }
#foot .cpy { margin-top: 6px; }
#foot .cpy b { color: #333; }

/* print */
@media print {
  #util,#mast,#alert,#nav1,#nav2,#rail-l,#rail-r,#foot,.actions,.adbox { display: none !important; }
  #center { display: block; width: 100%; }
  .art .aphoto { float: none; margin: 0 0 8px; }
}

/* ---------- mobile reflow ---------- */
@media screen and (max-width: 800px) {
  #page { max-width: 100%; }
  #mast { display: block; }
  #mast .logo, #mast .signin, #mast .sbox { display: block; width: auto; text-align: left; margin-bottom: 4px; }
  #mast input.q { width: 62%; }
  #cols { display: flex; flex-direction: column; }
  #rail-l, #center, #rail-r { display: block; width: auto; }
  #center { order: 1; padding: 6px 8px; }
  #rail-l { order: 2; }
  #rail-r { order: 3; }
  .topstory .ts-photo { float: none; margin: 0 0 6px; width: 100%; }
  .topstory .ts-photo img { width: 100%; }
  .art .aphoto { float: none; width: 100%; margin: 0 0 8px; }
  .phgrid .cell { display: inline-block; width: 49%; }
  .searchbar input.q { width: 58%; }
  .player { width: 100%; }
  #nav1 a { padding: 4px 5px 3px; }
}