/*Next "box-sizing" line prevents break in layout when user zooms out in browser (this would happen because borders were added to widths of elements)*/

* {
  box-sizing: border-box;
}

body{
	margin:0px;
	 
	max-width:100%
}
img {
	margin-left:5px; margin-right:5px;
}

#masthead img{
	margin-left:0px; margin-right:0px;
}
#wrapper {
	margin-right: auto;
	margin-left: auto;
	width: 1000px;
	height: auto;
	
}

#memberlogin{
height: 50px; width: 120px;border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; float:left; padding:4px 4px 4px 4px; font-size:medium;
	
}

#masthead {
	padding: 1px;
	margin-right: auto;
	margin-left: auto;
	width: 280px;
	margin-top: 0px;
	height:auto; 
	max-width: 40%;
}

#adtop{
	width: 728px; max-width:100%; margin-left:auto;margin-right:auto; margin-bottom:20px;
}
#adbottom{
	width: 728px; max-width:80%; margin-left:auto;margin-right:auto; margin-bottom:20px; margin-top:10px;
}

#topnav {
	height:35px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
}

.topnav{
	max-width:100%;
}

#leftnav {
	background-color: #427DCE;
	border: thin solid #FFCC00;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	font-weight: bold;
	color: #FFFFFF;
	padding: 0px;
	width: 160px;
	position: inherit;
}
#content {
	border: thin solid #FFCC00;
	background-color: #FFFFFF;
	margin-right: auto;
	margin-left: auto;
	width: 640px;
	height: 100%;
	max-width:100%;
	 	
	
}

.intrinsic-container {
  position: relative;
   height: 0;
  overflow: hidden;  
  /* to get padding-bottom divide the numbers of aspect ratio */
  padding-bottom: 75%;
  margin-left: auto;
  margin-right: auto;
   width: 100%;
    border:thin yellow solid;


}

.intrinsic-container iframe {
  position: absolute;
  top:0;
  left:0;
  border:thin yellow solid;
  margin:0px;
   width: 100%; 
   height:100%;
   touch-action: none;
 }


#rightnav {
	width: 300px;
	float: right;
	padding: 0px;
	position:absolute; 
	right:5px;
}

.alignleft {
	border-width: 0px;
	padding: 2px;
	margin: 1px;
	float: left;
}

.alignright {
	position: absolute;
	width: 250px; 
	height: 118px;
	top:0;
	right:0;
	overflow:hidden;
}

.aligncenter {
	width: 728px;
	max-width: 80%;
	margin-right: auto;
	margin-left: auto;
	
}

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px; height: 0; overflow: hidden;
margin-left:auto;
margin-right:auto;
width: 100%;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0px;
}

#alert{
	position:relative; 
	margin-left:auto; 
	margin-right:auto; 
	margin-top: 5px; 
	margin-bottom:5px; 
	width:630px; 
	padding:5px 5px 5px 5px; 
	border:medium #427DCE solid; 
	background-color: white
}

/*  start media query 1 to make single column if narrow (note: this removes the rightnav and leftnav divs and facebook like etc. */
@media all and (orientation:portrait) {

#rightnav {
display: none;
}

 #leftnav{
	display: none;
}



#wrapper {
width:100%;
}

.alignright{
	display:none;
}

.aligncenter {
	display:block;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	
}



#adbottom{
	display:block; width:80%; margin-left:auto;margin-right:auto;
}

/*#content {
float:left;
margin:0px;
width: 100%;
}
*/

#content {

margin-left:auto;
margin-right:auto;
width: 96%;
}


p {
	font-size:large;	
	display:inline-block;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:20px;
	padding:10px 10px 10px 10px;
}

h4{
font-size: large;		
	
}

.buttontext{
font-size:24px;	
}

.button{
	width:100px;
}

 #alert{
	width:96%;
	font-size: 14px;
}
#adtop{
	display:none;
}



}/* end media query 1 */








/*  start media query 2 for small device landscape */
@media all and (max-width:1024px) and (orientation:landscape) {


#wrapper{
width:100%;
margin: 0px;

}


.alignright{
	/* position:static;
	float:left;
	clear:both;*/
	display:none;
}


#rightnav {
	width: 120px;
	float: right;
	padding: 0px;
	position: inherit;


}


}
/*  end media query 2 for small device landscape */

/*  start media query 3 to get rid of social media if width below 950 (otherwise the format gets wonky */
@media (max-width:950px){
.alignright{
	display:none;
}
}
/*  end media query 3 to get rid of social media if width below 950 (otherwise the format gets wonky */


/*  start media query 4 for less than 1023 px width (remove #leftnav)   */

@media (max-width:1023px) {
#leftnav {
	display: none;
}
}
/*  end media query 4 for less than 1023 px width (remove #leftnav)  */

/*  start media query 5 for less than 900 px width (remove #rightnav)  */
@media (max-width:900px) {
#rightnav {
	display: none;
}
}
/*  end media query 5 for less than 900 px width (remove #rightnav)  */



/*  start media query 6 for Chromebook sized laptop landscape */
@media all and (max-width:1260px) and (orientation:landscape) and (min-width:1025px) {



#rightnav {
	width: 160px;
	float: right;
	padding: 0px;
	position: inherit;
	margin-left: 0px;
	margin-right: 0px;

}


}
/*  end media query 6 for Chromebook sized laptop landscape */


h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: bold;
	color: #FFCC00;
	padding: 2px;
	width: 100px;
	font-style: italic;
	margin-right: auto;
	margin-left: auto;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: underline;
	color: #FFFFFF;
	margin-bottom: 20px;
	width: 160px;
}

h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	color: #427DCE;
	font-weight: bold;
	margin-right: auto;
	margin-left: auto;
	width: 445px;
	max-width:100%;
	text-align: center;
	text-decoration: underline;
	padding-left:5px;
	padding-right:5px;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: bold;
	color: #427DCE;
	text-decoration: underline;
	margin-left:10px;
}

/* h5 is for "Sponsored" message above ads */

h5{
text-align:center;
	color:white;
	font-family:Arial, Helvetica, sans-serif;
	font-size:small;
	background-color: #427DCE;	
	margin-top:0px;
	margin-bottom:0px;
	margin-left:auto;
	margin-right:auto;
	width:95%;
	max-width:640px;
	
	
}


p {
	border-bottom: thin solid #CCFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: normal;
	padding:10px 10px 10px 10px;
	height: auto;
	border-left-color: #CCFFFF;
	border-left-width: thin;
	border-right-color: #CCFFFF;
	border-right-width: thin;
	border-top-color: #CCFFFF;
	border-top-width: thin;
	display:inline-block;

}


.hyperlinkblue {
	color: #427DCE;
	text-decoration: underline;
}


.listheading {
	color: #427DCE;
	font-size: small;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-variant: normal;
	text-decoration: underline;
}

	

a {
	color: #FFFFFF;
	text-decoration:none;
		
}


.button{
	background: #7BA5E7; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#7BA5E7, #BDD6FF); /* For Safari 5.1 to 6.0 gradient*/
    background: -o-linear-gradient(#7BA5E7,#BDD6FF); /* For Opera 11.1 to 12.0 gradient*/
    background: -moz-linear-gradient(#7BA5E7, #BDD6FF); /* For Firefox 3.6 to 15 gradient*/
    background: linear-gradient(#7BA5E7, #BDD6FF); /* Standard syntax gradient*/
	height: 33px;
	width: 100px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	line-height: normal;
	text-align: center;
	color: #FFFFFF;
	border-left:1px #5A84C6 outset;
	border-right:1px #5A84C6 solid;
	border-top:1px #D6E7FF solid;
	border-top-left-radius: 8px; 
	border-top-right-radius: 8px; 
	padding: 0 px;

}

.button:hover{
    background: #5A84C6; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#5A84C6, #BDD6FF); /* For Safari 5.1 to 6.0 gradient*/
    background: -o-linear-gradient(#5A84C6,#BDD6FF); /* For Opera 11.1 to 12.0 gradient*/
    background: -moz-linear-gradient(#5A84C6, #BDD6FF); /* For Firefox 3.6 to 15 gradient*/
    background: linear-gradient(#5A84C6, #BDD6FF); /* Standard syntax gradient*/
}

.button:active{
    background: #5A84C6;
}


.buttontext {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1em;
	font-family:  "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-weight:bold;
}


ul {
    display: block;
    list-style-type: none;
    
    width:600px;
    margin: auto;
    padding: 0;

}



/* next list is for topnav styling*/
.topnav li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
/* end list for topnav styling*/
.appstoreimage {
	border-width: 0px;
	margin: 10px 252px 18px 252px;
	position: relative;
}
/* Next for Responsive YouTube Embed*/
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Flexbox styling to split Ex.Co ad and Topics Covered info STARTS*/
* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item-left {

  padding: 10px;
  flex: 30%;
}

.flex-item-right {
  padding-top:5px;
  flex: 70%;

}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 640px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}
/* Flexbox styling to split Ex.Co ad and Topics Covered info Ends*/

/* memberscreen styling for member login div is shown below*/

#memberscreen{
	z-index: 9; display:block; position:absolute; width:100%; height:100%; top:0px;left:0px; margin:0px 0px 0px 0px; overflow:hidden;
}
/* memberscreen styling for member login div END*/

/* Privacy Policy Page Styling*/
li a.privacypolicy {
    display: inline;
    padding: 0;
}
    

/* Apply styling to all UL and OL within privacypolicy */
ul.privacypolicy ,
ol.privacypolicy  {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    padding-left: 1.5em;   /* indentation for bullets/numbers */
    margin-bottom: 1em;    /* spacing after lists */
    list-style-position: outside; /* bullets/numbers outside text */
}

/* Ensure unordered lists have bullets */
ul.privacypolicy {
    list-style-type: disc !important;  /* override global none */
    padding-left: 1.5em !important;   /* restore indentation for bullets */
    margin-bottom: 1em;               /* optional spacing */
}

/* Ensure ordered lists have numbers */
ol.privacypolicy {
    list-style-type: decimal;
    text-decoration:none;
}