* { 
    box-sizing: border-box; 
}
html, body { 
    font-family: Arial, Helvetica, sans-serif; 
    color: black; 
    height: 100%;
}
a { 
    text-decoration: none; 
    color: black;
}

header::after,
header .top::after,
.left-col > section::after,
.middle-col > section::after,
.right-col > section::after { 
    content:""; 
    display:block; 
    clear:both; 
}


header,
.left-col, .middle-col, .right-col { 
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
}


header .top {
  position: relative;
  padding: 10px 12px 6px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgb(207, 200, 200);
}
header .top .left   { 
    float: left;  
    margin-right: 8px; 
    background: white;
    color: black;
    border: none;
}
header .top .right  { 
    float: right; 
    margin-left: 20px;
}
.top ul{
    list-style: none;
}


header .top .center{
  position: absolute;
  text-align: center;
  border: 1px solid black;
  margin-left: 400px;
  margin-top: 10px;
  padding-left: 20px;
  font-size: 13px;
  color: rgb(137, 126, 126);
}



header .top li{
  font: inherit;
  padding: 6px 10px;
  border: 1px solid black;
  color: white
}
header .top .right { 
    background: white;
    color: black; 
    border-color: black; 
}

header > section {
  text-align: center;
  padding: 8px 0 10px;
}
header h1{
  margin: 6px 0 4px;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: .3px;
}
header > section p{
  margin: 0;
  color: #666;
  font-size: 13px;
}

/* Row 3: section navigation */
header nav{
  border-top: 1px solid black;
  margin: 0;
  font-size: 12px; 
}

header nav ul{
  list-style: none;
  margin: 0;
  padding-top: 10px;

}
header nav li{
  float: left;
  margin: 0 18px 8px 0;
  font-weight: 600;
  font-size: 14px;
}

.left-col, .middle-col, .right-col { 
    padding: 12px;
    border-top: 1px solid gray;
    min-height: 100vh;
}


.left-col{ 
    float: left;  
    width: 20%; 
    
}
.middle-col{ 
    float: left;  
    width: 40%; 
   
}
.right-col{ 
    float: right; 
    width: 40%; 

}

/* spacing between stacks in each column */
.left-col  article, .middle-col article, .right-col article, .right-col section { 
    margin-bottom: 16px; 
}

/* light rules like NYT */
.left-col article, .middle-col article, .right-col article { 
    border-bottom: 1px solid rgb(219, 212, 212);
    padding-bottom: 12px; 
}

.article1 h2{
  margin: 0 0 6px;
  font-size: 12px; 
  font-weight: 700; color:black; 
  text-transform: uppercase; 
  border-bottom: 2px solid gray;
}
.article1 p, .article2 p, .article4 p, .article5 p{
    color: lightgrey;
    font-size: 12px;
    text-transform: uppercase;
}
.article1 time, .article2 time, .article4 time, .article5 time{
    color: red;
}
.article1 h3{
  margin: 0 0 6px; 
  font-size: 32px; 
  line-height: 1.06; 
  font-weight: 700;
}
.article1 ul{ 
    margin: 8px 0 0; 
    padding-left: 18px; 
}
.article1 li{ 
    margin: 6px 0; 
    font-size: 16px; 
}

.article2 span{
  display:inline-block; 
  margin-bottom:4px; 
  font-size:12px; 
  font-weight:700; 
  color: gray; 
  text-transform: uppercase;
}
.article2 h3{ 
    margin:0 0 6px; 
    font-size:22px; 
    line-height:1.18; 
}
.article2 p+p{
    color: black;
}


/*MIDDLE COLUMN */
.article3{
  border: 1px solid lightgray;
  background: rgb(147, 135, 135) center/cover no-repeat;
  background-image: url("data:image/jpeg;base64,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");
  min-height: 200%; 
  padding-bottom: 70.25%;
  position: relative;
  display: block;
}
.article3 img{
    display: none;

}
.article3{
   
    position: relative;
    width: 100%;
    color: white;
    max-width: 600px;
}

.ontop>h3+p{
    padding-top: 100px;

}
.article4 p{
    color: black;
    
}
.article4 li{
    border-right: 1px solid gray;
    
}
.article4 li+li+li+li{
    border-right: none;
}
.article4 ul li{
    padding-right: 15px;
    padding-left: 15px;
    width: 22%;
    color: black;
}

.middle-col .article3 + h3{ 
    display:block; 
    margin-top:10px; 
    font-size:26px; 
    line-height:1.15; 
    font-weight:700; 
}
.middle-col .article3 + h3 + p{ 
    margin:4px 0 6px; 
    color:rgb(188, 182, 182); 
}
.middle-col .article3 + h3 + p + p{ 
    margin:0 0 10px; 
}

.article4 h3{ 
    margin:0 0 6px; 
    font-size:24px; 
}
.article4 p{ 
    margin:0 0 8px; 
}
.article4 ul>li+li, .article4 ul>li+li+li, .article4 ul>li+li+li+li{
  list-style:none;
}
.article4 ul li{
    padding:0; 
    margin:8px 0 6px;
}
.article4 li{
  float:left;              
  margin:0 14px 8px 0;
  color:#326891;          
}
.article4::after{ 
    content:""; 
    display:block; 
    clear:both; 
}
.article5 p+p, .article5 li{
    color: black;
}

.article5 h4, .article6 h4 { 
    margin:0 0 6px; 
    font-size:18px; 
}
.article5 a{ 
    color:rgb(64, 64, 199); 
}
.article6 p{
    color: lightgrey;
}
.article6 time{
    color: red;
}

/*RIGHT COLUMN (Opinion) */
.right-col{
    border-left: 1px solid lightgray;
}

.right-col > section > h4{
    margin:0 0 8px; 
    font-size:16px; 
    padding-bottom:8px;
    text-align: center;
}
.moveleft{
    float: left; 
    width: 50%;
    border-right: 1px solid lightgray;
}
.moveright{
    float: right; 
    width: 50%;
    
}
.right-col .article7, .right-col .article8, .right-col .article9, .right-col .article10{
    border: none;
}

.article7, .article8, .article9, .article10{
  overflow: hidden;
  padding-top: 8px;
}
.article7 img, .article8 img, .article9 img, .article10 img{
  float:right; 
  width:56px; 
  height:56px; 
  background: lightgray; 
  margin:2px 10px 6px 0;
}
.article7 h3, .article8 h3, .article9 h3, .article10 h3{ 
    margin:0 0 4px; 
    font-size:18px; 
    line-height:1.2; 
    font-weight:700; 
}
.article7 span, .article8 span, .article10 span{ 
    display:block; 
    font-size:12px; 
    color: gray; 
}
.article8 h3+p{
    color: lightgray;
}
.article8 ul li, .article10 ul li{
    font-weight: 600;
}


.aside1{
   clear: both;
   float: left;
   width: 50%;
   height: 100%;
   border-right: 1px solid lightgray;
}
.aside2{
    float: right;
    width: 50%;
    height: 100%;
}

.aside1 h4{
    color: rgb(79, 73, 73);
    border-left: none;
    border-right: none;
}


.aside2 h4{
    color: rgb(82, 76, 76);
}
.aside2 p{
    font-weight: 700;
}

.aside1, .aside2{
  border-top:1px solid lightgray; 
  padding:10px 12px;
}

.aside2 img{ 
    float:right; 
    width:44px; 
    height:44px; 
    background:lightgray; 
    margin:0 10px 6px 0; 
}

.aside3, .aside4{
    clear: both;
    overflow: hidden;
    margin-bottom: 15px;
}
.aside3 span, .aside4 span{
    float: left;
    width: auto;
    margin-right: 8px;

}
.aside3 p, .aside4 p{
    margin: 0;
}


.aside3 img, .aside4 img{ 
    float: right;
    width:18%; 
    margin-left: 10px;
}
.aside3 .bold, .aside4 .bold{
    font-weight: bold;
}
.aside3, .aside4{
    border-top: 1px solid lightgray;
    padding-top: 15px;
}

/*for tablets*/
@media (max-width: 1024px) {

  header .top { 
    padding: 10px 10px 6px; 
}
  header .top .center {
    position: static;        
    display: block;
    margin: 6px auto 0;
    padding: 0;
    border: 0;
    text-align: center;
    color: gray;
    font-size: 12px;
  }

  header nav ul { 
    padding-top: 8px; 
}
  header nav li { 
    margin: 0 12px 8px 0; 
    font-size: 13px; 
}

  header h1 { 
    font-size: 36px; 
}
  header > section p { 
    font-size: 12px; 
}

 
  .left-col  { 
    width: 28%; 
}
  .middle-col{ 
    width: 72%; 
}
  .right-col { 
    float: none; 
    width: 100%; 
    border-left: 0; 
    margin-top: 16px; 
}


  .moveleft, .moveright { 
    float: left; 
    width: 50%; 
}
  .moveleft { 
    border-right: 1px solid white; 
}

  /* Times Insider and Crossword side-by-side */
  .aside1, .aside2 { 
    float: left; 
    width: 50%; 
}
  .aside1 { 
    border-right: 1px solid white; 
}

  .article3 { 
    max-width: none; 
}
  .article3 { 
    padding-bottom: 60%; 
} 

  /* Prevent huge white columns on shorter tablets */
  .left-col, .middle-col, .right-col { 
    min-height: auto; /*prevent huge white columns on shorter devices*/
}
}

/*Small phones */
@media (max-width: 767.98px) {

  html, body { 
    overflow-x: hidden; 
}

  /* Top bar: we stack everything */
  header .top .left,
  header .top .right {
    float: none;
    display: inline-block;
    margin: 4px 6px;
    border: 1px solid #000;
  }
  .top ul { 
    text-align: center; 
    padding: 0; 
}
  header .top .center { 
    margin-top: 8px; 
}

  header h1 { 
    font-size: 28px; 
}
  header > section p { 
    font-size: 12px; }


  /* Section nav wraps to multiple lines */
  header nav li { 
    float: none; 
    display: inline-block; 
    margin: 0 10px 8px 0; 
}

  /* Stack all columns */
  .left-col, .middle-col, .right-col {
    float: none;
    width: 100%;
    padding: 10px 12px;
    min-height: auto;              
    border-top: 1px solid #e0e0e0;
  }
  .right-col { 
    border-left: 0; 
}

  /* Middle hero: full width and taller text overlay spacing */
  .article3 { 
    padding-bottom: 65%; 
}
  .ontop > h3 { 
    font-size: 20px; 
}
  .ontop > h3 + p { 
    padding-top: 16px; 
    font-size: 12px; 
}

  /* “10 Key Moments” links: make them wrap nicely */
  .article4 ul li {
    float: none;
    display: inline-block;
    width: auto;
    padding: 0 10px;
    margin: 6px 0;
    border-right: 1px solid #ccc;
  }
  .article4 ul li .tv {
    border-right: 0; 
}


  .moveleft, .moveright {
    float: none;
    width: 100%;
    border-right: 0;
  }

  /* Insider and Crossword: stack */
  .aside1, .aside2 {
    float: none;
    width: 100%;
    border-right: 0;
  }
  .article7 img, .article8 img, .article9 img, .article10 img {
    width: 44px; 
    height: 44px;
  }
  .article7 h3, .article8 h3, .article9 h3, .article10 h3 {
    font-size: 16px;
  }

  
  .aside3 img, .aside4 img { 
    width: 64px; 
    height: auto; 
}
  .article5 h4, .article6 h4 { 
    font-size: 16px; }
}