@charset "UTF-8";

/* CSS Document */

/* First we are just defining some global styling using the body element -- font, and line height */

body{
	font-family:Verdana, Geneva, sans-serif;
	line-height:1.5;
}

/* Now we begin defining the columns that will display in full-sized browser windows */

header {
	margin:0;
	padding:0;
	border:solid #e8ebf6 1px;
	background-color:#e8ebf6;
	height:106px;
}

#logo{
	margin-left:auto;
	margin-right:auto;
	xmargin-top:5px;
	display:block;
	width:474px;
}

#logo img {
	margin:5px;
}

#nav-div{
	border:solid maroon 1px;
	background-color:#a81f38;
	margin:0;
	padding:0;
	overflow:hidden;
}

nav{
	width:960px;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
}

/***** NAV CODE ******/

.topnav {
  overflow: hidden;
  background-color: #a81f38;
}

.topnav a {
  float: left;
  display: block;
  xcolor: #f2f2f2;  /* original color */
  color:white;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight:bold;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

/* NAV bar changes at 920 px */

@media screen and (max-width: 920px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/*********************/

main{
  width:1040px; /* Original width: 960 */
  color:maroon;
  margin-right:auto;
  margin-left:auto;
  display:block;
}

article{
  width:720px; /* Original width: 640 */
  background-color:white;
  color:black;
  padding:15px 10px 15px 10px;
  margin:0;
  float:left;
  box-sizing:border-box;
}

aside{
  margin-top:20px;
  margin-bottom:20px;
  width:290px;
  background-color:#e8ebf6;
  border:solid black 1px;
  color:black;
  padding:15px;
  float:right;
  box-sizing:border-box;
}

/*** h4 is the HEADING text for list of posts ***/

aside h4 {
  font-family:Arial, Helvetica, sans-serif;
  font-size:1.1rem;
  line-height:1.3;
  margin:20px 0 20px 0;
  font-weight:bold;
  font-style:italic;
  text-align:left;
  text-transform:none;
  color:#a81f38;
}

/*** p is the TEXT for the list of posts ***/

aside p {
  font-family:Verdana, Geneva, sans-serif;
  font-size:1rem;
  line-height:1.3;
  margin:20px 0 20px 0px;
  font-weight:normal;
}

aside p a {
  text-decoration:none;
  color:black;
}

aside p a:hover {
  text-decoration:underline;
}

/*** h5 is the BOTTOM TEXT items ***/

aside h5 {
  font-family:Arial, Helvetica, sans-serif;
  font-size:1.1rem;
  line-height:1.3;
  font-weight:normal;
  text-align:center;
  color:#a81f38;
  border:none;
  margin:0;
}

aside h5 a {
  text-decoration:none;
  font-weight:bold;
  color:#a81f38;
}

aside h5 a:hover {
  text-decoration:underline;
}

/******* FOOTER *******/

.footer-div {
  clear:both;
  background-color:#4d4e4e;
  overflow:auto;
}

footer{
  width:500px;
  margin-left:auto;
  margin-right:auto;
  background-color:#4d4e4e;
  color:white;
  overflow:auto;
}

footer p {
  font-family:Arial, Helvetica, sans-serif;
  font-size:15px;
  line-height:1.5;
  margin:20px 0 20px 0;
  color:white;
}

footer a {
  text-decoration:none;
  color:white;
}

.footer-box{
  float:left;
  width:47%;
  box-sizing:border-box;
  padding-left:30px;
  color:white;
}

@media (min-width:481px) and (max-width:1069px){  /* Original max-width: 989 */

nav{
    width:100%;
}

main{
    position:relative;
    width:95%; /*We are changing the width from a pixel value to a relative value to resize in different tablets*/
}

article{
    float:left; /*We are removing the float*/
    width:67%; /*We are defining the width with a relative value */
}
	
    aside{
    margin-top:20px;
	background-color:#e8ebf6; /*We are changing the background color of column b to yellow for tablet viewports*/
    float:right;
    width:30%; /*We are sizing the width to be about half the width of section a*/
}

footer{
	float:none;
    width:95%;
}
}

@media (max-width:480px){
	
#logo{
	width:97%;
}

#logo img {
	width: 97%;
	padding: 0px;
}

header{
    float:none;
    width:100%;
    }
	
#nav-div{
    width:100%;
    }

nav{
    width:100%;
    }

main{
   width:100%; /*We are allowing the device to define the width -- the <main> will fill the entire width of the device*/
   margin:0px;
   padding:0px;
}

img{
   float:none; /*We are floating images in sections for a more compact smartphone design*/
   text-align:left;
}

article{
   margin-top:0;
   float:none; /*We are removing the float*/
   width:97%; /*We are defining the width with a relative value*/
   margin-left:auto;
   margin-right:auto;
   background-color:white;
   color:black;
}

aside{
   float:none; /*We are removing the float*/
   width:97%; /*We are defining the width with a relative value*/
   margin-left:auto;
   margin-right:auto;
   background-color:#e8ebf6;
   color:maroon;
}
   
footer{
	width:97%
}
}

/********** VIDEO **********/

video { 
	width: 100%; 
	height: auto; 
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 2px;  /* was 25px */
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/********** PHOTO **********/

.resp-photo {
	display:block;
	width:97%;
	margin-right:auto;
	margin-left:auto;
	margin-top:20px;
	margin-bottom:20px;
	max-width:800px;
}

.resp-photo img {
	width:100%;
	border:solid black 1px;
}

.width85 {
	width:85%;
}

.width75 {
	width:75%;
}

.noborder img { border:none; }
.border2 img { border: solid black 2px; }
.border3 img { border: solid black 3px; }

/***** PLACE PHOTO LEFT or RIGHT of TEXT *****/

.placephoto-right {
	display:flex; 
	flex-direction:row-reverse; 
	flex-wrap:nowrap; 
	align-items:center; 
	margin-top:20px; 
	margin-bottom:20px;
}

.placephoto-left {
	display:flex; 
	flex-direction:row; 
	flex-wrap:nowrap; 
	align-items:center; 
	margin-top:20px; 
	margin-bottom:20px;
}

.placephoto-image {
	display:inline-block;
}

.placephoto-image img {
	padding:0;
	border:solid black 1px;
}

.placephoto-text {
	display:inline-block; 
	margin:10px;
}

/* changes at 900 px */

@media screen and (max-width: 900px) {

.placephoto-right {
	display:block; 
	width:100%;
	margin-top:20px; 
	margin-bottom:20px;
	text-align:center;
}

.placephoto-left {
	display:block; 
	width:100%;
	margin-top:20px; 
	margin-bottom:20px;
	text-align:center;
}

.placephoto-image img {
	width:75%;
}

.placephoto-text {
	display:inline-block;
	width:70%;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	margin-top:0;
	margin-bottom:0;
}

.width85 {
	width:97%;
}

.width75 {
	width:97%;
}

}

/*** POST LISTINGS w/PHOTO ***/

.p-group {
	margin:0;
	padding:0;
}

.p-wrap {
	clear:both;
	xpadding-top:20px;
	margin-top:10px;
	display:block;
	width:100%;
}

.p-pic {
	padding-right:5px;
	float:left;
	box-sizing:border-box;
	margin-bottom:20px;
}

.p-pic img {
	width:100%;
	padding:0;
	border:solid black 1px;
}

.noborder img { border:none; }
.border2 img { border: solid black 2px; }
.border3 img { border: solid black 3px; }

.p-text {
	padding-left:5px;
	float:right;
	box-sizing:border-box;
	font-size:1.1rem;
	line-height:1;
	margin-bottom:20px;
}

.p-text h5 {
	font-style:normal;
	margin:0; 
	padding:0; 
	border:none; 
	letter-space:1em;
}

.p-text h5 a {
	text-decoration:none;
	color:black;
}

.p-text h5 a:hover {
	text-decoration:underline;
	color:black;
}

.pdate { 
	font-weight:bold; 
	font-style:normal; 
	xpadding-right:8px; 
	display:inline;
}

.pdate::after {
	content:" - ";
}

.pdesc {
	display:inline; 
}

.plabel {
	display:none;
}

.label .plabel {
	font-family:Arial, Helvetica, sans-serif;
	color:dimgray;
	display:block;
}

/*--- PP0 --*/

.pp0 .p-pic {
width:100%;
padding:0;
float:none;
margin-right:auto;
margin-left:auto;
box-sizing:border-box;
margin-bottom:5px;
}

.pp0 .p-pic img {
margin-right:auto;
margin-left:auto;
display:block;
}

.pp0 .p-text {
width:100%;
padding:0;
float:none;
xdisplay:inline-block;
box-sizing:border-box;
margin-bottom:20px;
}

.pp0 p.pdate { display:none; }

/*--- PP1 --*/

.pp1 .p-pic {
	width:44%;  /* Original width: 49% */
}

.pp1 .p-text {
	width:54%;  /* Original width: 49% */
}

.pp1 p.pdate { display:none; }

/*--- PP2 --*/

.pp2 .p-pic {
	width:30%;
}

.pp2 .p-text {
	width:67%;
}

.pp2 h5 a {
	font-size:1.6rem;
}

/*--- PP3 --*/

.pp3 .p-pic {
	display:none;
}

.pp3 .p-text {
	float:none;
	width:100%;
}

.pp3 .p-text h5 {
	font-size:1.4rem;
	line-height:1.0;
}

/*--- PP3a --*/

.pp3a .p-pic {
	display:none;
}

.pp3a .p-text {
	float:none;
	width:100%;
}

.pp3a .p-text h5 {
	font-size:1.4rem;
	line-height:1.0;
}

.pp3a p.pdate { display:none; }

/*--- PP4 --*/

.pp4 .p-pic {
	display:none;
}

.pp4 .p-text {
	float:none;
	width:100%;

}

.pp4 .pdate::after {
	content:"";
}

.pp4 .p-text h5 {
	font-size:1.4rem;
	line-height:1.0;
}

.pp4 .pdate { font-weight:normal; }

.pp4 .pdesc { display:none; }

/*--- PP5 --*/

.pp5 .p-pic {
	display:none;
}

.pp5 .p-text h5 {
	font-size:1.4rem;
	line-height:1.0;
}

.pp5 .pdate { display:none; }

.pp5 .pdesc { display:none; }


@media screen and (max-width: 800px) {

.pp1 .p-pic {
	width:80%;
	padding:0;
	float:none;
	margin-right:auto;
	margin-left:auto;
	box-sizing:border-box;
	margin-bottom:5px;
}

.pp1 .p-pic img {
	margin-right:auto;
	margin-left:auto;
	display:block;
}

.pp1 .p-text {
	width:100%;
	padding:0;
	float:none;
	box-sizing:border-box;
	margin-bottom:20px;
}

.pp2 .p-pic {
	width:30%;
	margin-bottom:3px;
	margin-right:10px;
}

.pp2 .p-text {
	float:none;
	width:100%;
	display:compact;
	padding-top:0;
	margin-top:0;
}

.pp2 .p-text h5 {
	font-size:1.4rem;
}

.pp3 .p-text h5 {
	font-size:1.4rem;
}

.pp3a .p-text h5 {
	font-size:1.4rem;
}

.pp4 .p-text h5 {
	font-size:1.4rem;
}

.pp5 .p-text h5 {
	font-size:1.4rem;
}

}

/*** End POST LISTINGS w/PHOTO **/

/* ========= Hilite / Colors ========== */

.hilite { background-color:#FFFF66; }
.color_red { color:red; }
.color_blue { color:blue; }
.color_navy { color:navy; }
.color_green { color:green; }
.color_maroon {color:#a81f38; }

.redlite { color:red; font-weight:bold; }

/*=== Bullets, etc. ===*/

ul li {list-style-type: disc; }
ul.ul_arrow_lnk  { list-style-image:url("/system/images/arrow2_blue.GIF"); }
ul.ul_square3_lnk  { list-style-image:url("/system/images/square3_blue.GIF"); }
ul.ul_disc_lnk  { list-style-image:url("/system/images/disk2_blue.GIF"); }
ul.linklist  { list-style-image:url("/system/images/arrow2.GIF"); }
ul.ul_disc  { list-style-image:url("/system/images/disk2.GIF"); }
ul.ul_arrow  { list-style-image:url("/system/images/arrow2.GIF"); }
ul.ul_square3  { list-style-image:url("/system/images/square3.GIF"); }
ul.ul_square2  { list-style-image:url("/system/images/square2.GIF"); }
ul.ul_box      { list-style-image:url("/system/images/box3.GIF"); }

/*=== MORE ===*/

.bdr { border:solid black 1px; }

.no-bdr { border:none; }

.floatright { float:right; margin-left:8px; }

/* ========= Links ========== */

.plainlink a:link    { color:navy; text-decoration:none; font-style:normal; font-weight:bold;}
.plainlink a:visited { color:navy; text-decoration:none; font-style:normal; font-weight:bold;}
.plainlink a:hover   { color:navy; text-decoration:underline; font-style:normal; font-weight:bold;}

.smalllink { font-family:Arial, Helvetica, sans-serif; font-size:14px; margin:0; padding:0; }
.smalllink a:link    { color:navy; text-decoration:none; font-style:normal; font-weight:bold;}
.smalllink a:visited { color:navy; text-decoration:none; font-style:normal; font-weight:bold;}
.smalllink a:hover   { color:navy; text-decoration:underline; font-style:normal; font-weight:bold;}

/* ========================== */