/*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;
}


/* CLOUD SAVE AND LOAD Form Container styling to blend cleanly with the site */

/* =========================================================
   HEADER STYLING (Forced Left Alignment)
   ========================================================= */
#univ-form-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dee2e6; 
    
    /* We use Flexbox here to forcefully push the title to the left edge */
    display: flex; 
    justify-content: flex-start;
    width: 100%;
}

.univ-form-title {
    margin: 0;
    color: #6c757d; 
    font-size: 16px; 
    font-weight: 600;
    text-align: left;
}

/* =========================================================
   BUTTON & DESCRIPTION ROW (Fixed Overflow & Wrapping)
   ========================================================= */
.univ-submit-group {
    display: flex;
    flex-wrap: wrap; /* Allows text to wrap neatly under buttons on very small screens */
    align-items: center; 
    gap: 15px; 
    margin-top: 5px;
    
    /* THE FIX: Forces this specific row to take up 100% of the width on its own line */
    flex: 1 1 100% !important; 
    width: 100%;
}

.univ-form-desc {
    margin: 0;
    color: #555;
    font-size: 13px; 
    line-height: 1.4;
    text-align: left;
    
    /* Tells the text to fill the remaining horizontal space, but wrap if needed */
    flex: 1 1 250px; 
    min-width: 0; 
}

.univ-form-desc strong {
    color: #dc3545; 
}



#univ-form-container {
    width: 100%;
    background: #f8f9fa; /* Light, clean gray background */
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-bottom: 20px;
}

/* The magic of Flexbox */
.univ-horizontal-form {
    display: flex;
    flex-wrap: wrap; /* Allows inputs to wrap to the next line if the screen is too small */
    gap: 15px; /* Spaces everything out perfectly without needing margins */
    align-items: flex-end; /* Bottom-aligns the buttons with the input boxes, not the labels */
}

/* Base flex settings for input columns */
.univ-form-group {
    display: flex;
    flex-direction: column;
    flex: 1 1 130px; /* Grow to fill available space, shrink if needed, start at 130px wide */
    min-width: 0; /* Prevents overflow issues */
}

/* Give the email field a slightly larger base width since emails are long */
.univ-email-group {
    flex: 2 1 180px; 
}

/* Labels */
.univ-form-group label {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Input Fields */
.univ-form-group input {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus state for accessibility and visual feedback */
.univ-form-group input:focus {
    border-color: #2E8B57; /* BioManBio Green */
    box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.2);
}

/* Button Container */
.univ-submit-group {
    flex: 0 0 auto; /* Forces buttons to only take up exactly as much space as they need */
    flex-direction: row;
    gap: 10px;
}

/* Buttons */
.univ-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.univ-btn:active {
    transform: scale(0.96); /* Satisfying click effect */
}

.univ-btn-save {
    background-color: #2E8B57; /* SeaGreen */
    color: white;
}

.univ-btn-save:hover {
    background-color: #246B43;
}

.univ-btn-load {
    background-color: #007BFF; /* Bright Blue */
    color: white;
}

.univ-btn-load:hover {
    background-color: #0056b3;
}

/* =========================================================
   RESPONSIVE SNAP (For small screens and mobile devices)
   ========================================================= */
@media (max-width: 850px) {
    .univ-horizontal-form {
        flex-direction: column; /* Snaps everything to a vertical stack */
        align-items: stretch; /* Forces inputs to full width */
    }

    .univ-form-group {
        flex: 1 1 100%; 
    }

    .univ-submit-group {
        flex-direction: column; /* Stacks the save/load buttons */
    }

    .univ-btn {
        width: 100%;
        padding: 14px; /* Slightly taller buttons for easier mobile tapping */
    }
}
/* End of CLOUD SAVE AND LOAD Form Container styling to blend cleanly with the site */