* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  margin: 0;
  font-family: 'Arial', 'Helvetica', sans-serif;
  background-color:#cbb5a6;
  text-align: center;
  font-size: 16px; /* specifying the standard so ems and rems are sure */
}

.container {
  width: 95%;
  max-width: 768px;
  margin: 0 auto;
}

.clear {
  content: '';
  display: block;
  clear: both;
}

.clearfix::after,
  section::after,
  footer::after {
  content: '';
  display: block;
  clear: both;
}

.inline {
  display: inline;
}

.block {
  display: block;
}

.strong {
  font-weight: 300;
}

.floatleft {
	float:left;
}

.floatright {
	float:right;
}

hr {
  border-style: solid;
  border-color: black;
  border-width: 1px 0 0 0;
}

.hr-margin {
  margin:.5rem 0 .5rem 0;
}

hr.new1 {
  width:700px;
  border-style: solid;
  border-color: black;
  border-width: 1px 0 0 0;
  margin: auto;
}

a {
 font-weight: 300;
 text-decoration: none;
 font-size: .5rem;
 /* padding: .5em; */
 color: #111;
 hover: #3a4500;
}

a:hover,
a:focus {
  font-weight: 900;
  color: #0000FF;
}

center {
  text-align:center;
}

/* TYPOGRAPHY
======================= */

/*
From "the default stylesheet for HTML 4. The W3C recommends using these styles as the default."

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

*/

/*
normal
    Normal font weight. Same as 400.
bold
    Bold font weight. Same as 700.
lighter
    One relative font weight lighter than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.
bolder
    One relative font weight heavier than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.
<number>
    A <number> value between 1 and 1000, inclusive.
*/

h1 {
  font-weight: 500;
  font-size: 2rem;
  margin: .4rem;
  padding:.4rem:
}

h2 {
  font-weight: 300;
  font-size: 1.5rem;
  margin: .4rem;
  padding:.4rem:
}

h3 {
  font-weight: 300;
  font-size: 1.17rem;
  margin: .4rem;
  padding:.4rem:
}

h4 {
  font-weight: 300;
  font-size: 1.12rem;
  margin: .4rem;
  padding:.4rem:
}

h5 {
  font-weight: 300;
  font-size: .83rem;
  margin: .4rem;
  padding:.4rem:
}

h6 {
  font-weight: 300;
  font-size: .75rem;
  margin: .4rem;
  padding:.4rem:
}

p {
  margin-top: 0;
  color: 111;
  text-align: justify;
  text-justify: inter-word;
}

p:last-of-type {
  margin-bottom: 0;
}

.enhance1 {
  font-weight: bold;
}

.title {
font-size: 2.5rem;
}

.title span {
  font-weight: 300;
  display: block; /* keep each part of the statement on its own line */
                 /* 2019-12 no longer using the span with this text but */
                 /* keeping this code and note here for now during the learning */
  font-size: .9em;
}

.spacer {
  clear:both;
  margin: .75rem 0 0 0;
}

@media (min-width: 55rem){
  .title {
    font-size: 3.7rem; /* copying from tutorial */
  }
}


/* Underscore Underline
======================= */

.underline {
	text-decoration:underline;
}

.underline1 {
	border-bottom-style:solid;
    border-width:1px;
    padding:0px 0px 0.5px 0px;
}

.underline2 {
	border-bottom-style:solid;
    border-width:1px;
    padding:0px 0px 1px 0px;
}



/* HEADER
======================= */

header {
  /* position: absolute; */
  left: 0;
  right: 0; /* needed only for a large background image or pattern */
  margin: 0;
}

header h3 {
  font-size: 1.35rem;
}

.header-logo {
  margin: 2em 0 0 0;
  height: 50%;
  width: 50%;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin: 0em;
}

nav a {
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .8rem;
  padding: .5em;
  color: #ea4500;
}

nav a:hover,
nav a:focus {
  color: #0000FF;
}

@media (min-width: 55rem){
  .logo {
    float: left; /* copying from tutorial; just a test */
  }
  nav {
    float: right; /* copying from tutorial; just a test */
  }

}

.updated-box {
  margin: 0 auto;
  padding: .3rem;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  max-width: 500px;
  background-color: rgba(111, 0, 0, .25);
}

.bundle-name-box {
  margin: 0 auto;
  padding: .3rem;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  max-width: 500px;
  background-color: rgba(111, 0, 0, .25);
}

.bundle-name-box2 {
  margin: 0 auto;
  padding: .3rem;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  max-width: 600px;
  background-color: rgba(111, 0, 0, .25);
}

.bundle-name-box2b {
  margin: 0 auto;
  padding: .3rem;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  max-width: 650px;
  background-color: rgba(111, 0, 0, .25);
}



/* Bulletin Sections
============================================= */

.bulletin-box {
  margin: 2rem auto;
  padding: .5rem .5rem .75rem .5rem;
  border-style: solid;
  border-radius: 11px;
  border-width: 1px;
  border-color: black;
  max-width: 768px;
  background-color: rgba(255, 255, 255, .15);
}

.bulletin-box-sample {
  margin: 2rem auto;
  padding: .5rem 2rem .75rem 2rem;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  max-width: 900px;
  background-color: #dddddd;
}

.sample {
	font-size: 1rem;
	line-height: 1.7;
  padding:.4rem:
}

.bulletin-box h4 {
  text-align: left;
  margin: 0;
  margin-top: .1rem;
  font-size: 1.1rem;
  font-weight: bold;
}

.bulletin-box h5 {
  text-align: left;
  margin: 0 0 .5rem 0;
  margin-top: .1rem;
  font-size: 1.1rem;
}

.bulletin-box p {
  text-align: justify;
  margin: 0 .5rem 0 .75rem;
  font-size: 1rem;
  font-weight: 100;
  padding: 0 .3rem;
}

.image-wrapper {   
  display: inline-block;   /* inline block allows side-by-side elements and respects top/bottom padding or margins  [www.w3schools.com/css/css_inline-block.asp] */
  padding:.75rem 0 0 0;
  margin: 0 auto;
}

.image-wrapper2 {   
  text-align:center;
  width:700px;
  display: inline-block;   /* inline block allows side-by-side elements and respects top/bottom padding or margins  [www.w3schools.com/css/css_inline-block.asp] */
  padding:.25rem 0 0 0;
  margin: .25rem 0 0 0;
}

.image-wrapper2a {
  text-align:center;
  width:700px;
  display: inline-block;   /* inline block allows side-by-side elements and respects top/bottom padding or margins  [www.w3schools.com/css/css_inline-block.asp] */
  padding:.25rem 0 0 0;
  margin: .25rem 0 0 0;
}

.image-wrapper2b {
  background-color:#c9b3a4;   
  text-align:center;
  width:700px;
  display: inline-block;   /* inline block allows side-by-side elements and respects top/bottom padding or margins  [www.w3schools.com/css/css_inline-block.asp] */
  padding:.25rem 0 0 0;
  margin: .25rem 0 0 0;
}

.image-wrapper3 {   
  display: inline-block;   /* inline block allows side-by-side elements and respects top/bottom padding or margins  [www.w3schools.com/css/css_inline-block.asp] */
  padding:0 0 0 0;
  margin: 0 auto;
}

.image-link {
	padding: 0 0 0 0;
	float:left;
	margin: .75rem 0 0 0;	
}

.clip-info-box {
  float:left;
  padding:0 0 0 .75rem;
}

.clip-text {
  float:left;
  font-size:1rem;
  color:black;
}

.download {   /* separate from <p> tag + its conditionals; this is used in <span> tag */
  margin: .3rem 0 0 0;
  padding: 0 0 0 0;
  float:left;
  font-size: 1rem;
  color: brown;
  text-decoration: underline;
}

.download2 {   /* separate from <p> tag + its conditionals; this is used in <span> tag ; same as above but without the top margin*/
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  float:left;
  font-size: 1rem;
  color: brown;
  text-decoration: underline;
}

.download-links {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	float:left;
}

.download-links p {    */ conditional: these settings are added to download-links basic settings when <p> condition is satisfied */
  margin: 0;
  font-size: 1rem;
  color: #111;
  text-align: center;
}

.download-links a p {  */ conditional: these settings are added to download-links basic settings when <a> and <p> conditions are both satisfied */
  font-size: 1rem;
  color: brown;
  text-align: center;
  text-decoration: underline;
}

.stat-image {
  height:150px;
}

.screenshot-item {
  float:left;
  margin: 0 .5rem 0 0;
}

.thumbnail-item {
  width:150px;
  float:left;
  margin: 0 .5rem 0 0;
}

.thumbnail-item a p {
	text-align: center;
	}
	
.thumbnail-item2 {
  width:175px;
  float:left;
  margin: 0 .5rem 0 0;
}

.thumbnail-item2 a p {
	text-align: center;
	}
	
.thumbnail-border {
  border-style: solid;
  border-width: 1px;
  border-color: black;
}
	
.before_after {
  float:left;
  margin: 0 .5rem 0 0;
}

.before_after p {
	text-align: center;
	}

.screenshot-description {
  left: 1rem;
  right: 1rem;
  color: white;
  background: rgba(0,0,0,.15);
  padding: .1rem;
}



@media (min-width: 600px) {

  }

/* ********************************************************* LINES */

.line800 {
	width:800px;
	border-bottom-width:1px;
	border-bottom-style:solid;
	border-bottom-color:#000000;
}

.line20 {
	line-height:20px;
}

.line22 {
	line-height:22px;
}

.line22 {
	line-height:22px;
}

.line23 {
	line-height:23px;
}

.line24 {
	line-height:24px;
}

.line25 {
	line-height:25px;
}

.line30 {
	line-height:30px;
}

.line35 {
	line-height:35px;
}

.line40 {
	line-height:40px;
}

.line45 {
	line-height:40px;
}

.line50 {
	line-height:50px;
}


/* FOOTER - Not sure yet if one is needed on this Page
====================================================================== */


footer {
  margin: 0 auto;
}

footer p {
  font-size: 2em;
  color: brown;
  text-align:center;
}










/* Temporary BITS
========================= */

.borderblack1 {
	border-color:#000000;
	border-width:1px;
	border-style:solid;
	padding:0px;
}