body
   {
   background-color:#000000;
   }

div
   {
   background-color:#000000;
   width:100%;
/*   float:left;	affects all divs: causes YouTube embed to align left*/
   } 

div.Content_IMG
   {
   text-align:center;  	/* to center align image */
   margin: 0 auto;	/* may not be funtioning, but left in anyway */
   }
div.Content_IMG img
   {
   width: 1440px;	/* images changed from 1920x1080 to 1440x810 to accommodate mobile Safari */
/*   max-width:78%;	initial setting */
   max-width:66%;
   }

div.Content_IMG_AltaGas
   {
   text-align:center;  	/* to center align image */
   margin: 0 auto;	/* may not be funtioning, but left in anyway */
   }
div.Content_IMG_AltaGas img
   {
   width: 720px;
/*   max-width:65.8%;	initial setting */
   max-width:55.7%;
   }

span.Overlay
   {
   background-position:center;
   background-size:contain;
   background-repeat:no-repeat;
   display:block;	/* important */
   }

div.Nav_Buttons
   {
   text-align:center;   /* to center align Content Buttons */
   }

div.Nav_Buttons img
   {
   width:4%;
   display:inline;
   }

div.Spacer img
   {
   width:4%;
   }

p.copyright
   {
   font-family: Verdana, Arial, sans-serif;
   font-size:80%;
   text-align:right;	/* to align text right */
   margin-right:11%;	/* indent percent from right align  */
   color:#474747;
   }

p.AboutContact
   {

   font-family: Verdana, Arial, sans-serif;
   font-size:100%;
   text-align:left;	/* to align text left */
   margin-left:33%;	/* indent percent from left align  */
   margin-right:33%;	/* indent percent from right align  */
   color:#474747;
   }

p.ContentText
   {
   font-family: Verdana, Arial, sans-serif;
   font-size:80%;
   text-align:center;	/* to center align text */
   color:#474747;
   }

/* to set link styles, works outside "a.ContentLink", but not within it? */
   a { color:#474747; }
   a:link { text-decoration:none; color:#757575; }		/* to set link */
   a:visited { text-decoration:none; color:#626262; }		/* to set visited link */
   a:hover { text-decoration:underline; color:white; }		/* to set hover link */
   a:active { text-decoration:none; color:green; }		/* to set link as clicked */

a.ContentLink
   {
/* could not get above link styles to work within "a.ContentLink" */
   }

/* CSS for 'elastic' YouTube */

.video-wrapper {

	width: 1280px;		/* 720p width */
/*	max-width: 78%;		initial setting */
	max-width: 66%;
	padding: 0px;
	margin: 0 auto;
}

.video-container {

	position: relative;	
	padding-bottom: 56.25%;		/* 720/1280 = 56.25%, works ok, smaller=vid shrink, larger=gap under vid */
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin: 0px auto;
}

.video-container iframe,  /* not needed? (not using iframe), but left in anyway */
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0%;
	width: 100%;
	height: 100%;
}