/* Apply box-sizing to all elements for layout consistency */
* {
  box-sizing: border-box;
}

/* Video and section container box */
.stephen_box video {
  height: 440px;        /* force consistent height */
  object-fit: cover;    /* crop to fill box */
  width: 100%;          /* responsive scaling */
}


/* General video box base */
[id*="video_section_"] {
  float: left;
  padding: 5px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

/* Closed (side-by-side videos) */
[id*="video_section_"].closed {
  width: 48%;              /* two per row */
  min-height: 340px;       /* align row height */
}

/* Open (full-width video on top) */
[id*="video_section_"].open {
  width: 100%;             /* full-width */
  clear: both;             /* always force a new row */
  margin-bottom: 20px;     /* visual separation */
}

/* 
  Remove bottom margin from the final video section only.

  This ensures that the last row of videos in the video panel 
  does not add unnecessary space between itself and the section below. 
  All other video rows will still retain their standard margin-bottom.
*/
[id*="video_section_"]:last-of-type {
  margin-bottom: 0 !important;
}


/* General body styling */
body {
  background-color: #333333;
  background-image: url('images/background-static.gif');
  background-repeat: no-repeat;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.2em;
  color: #ffffff;
  margin-top: 0.1em;
  margin-right: 0.1em;
  margin-bottom: 0.1em;
  margin-left: 0.1em;
}

/* Collapsible block class */
.closed {
  height: 333px;
}

/* Link styling */
a:link {
  text-decoration: none;
  color: #FF9900;
}
a:visited {
  text-decoration: none;
  color: #FF9900;
}
a:active {
  text-decoration: none;
  color: #FF9900;
}
a:hover {
  text-decoration: underline;
  color: #FF9900;
}

/* Table text defaults */
td, th {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

/* Body content text block */
.bodystyle {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.1em;
}

/* Text size variants */
.small {
  font-size: 10px;
}
.medium {
  font-size: 12px;
}
.big {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.1em;
}
.xbig {
  font-size: 24px;
}

/* Stylized spacing text */
.expanded {
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 2px;
}

/* Justified paragraph */
.justified {
  text-align: justify;
}

/* Footer small print */
.footer {
  font-size: 9px;
  color: #999999;
}

/* Content boxes */
.box1 {
  padding: 3px;
  border-width: medium;
  border-style: solid;
  border-color: #CCCCCC #666666 #666666 #CCCCCC;
}

.box2 {
  font-style: italic;
  word-spacing: 2pt;
  padding: 3px;
  border: 1px solid;
}