/* Reset margins and padding for all browsers */
* {
	margin:0;
	padding:0;
}
	
 
/* Set default font style for all text */	
body {	
	font-family:Verdana, Helvetica, Arial, sans-serif;
}

/* Set header position for image and set header width, height and margins */
header {
	display:grid;
  	grid-template-columns:1fr 0.7fr 0.7fr; /* Adjust column sizes */
	align-items:center; /* Align items vertically */
	background-color:#f0f8ff;
}

a {
	outline-style:none;
	text-decoration:none;
}

/* Set styles and padding for logo */
.logo {
    display:inline-block;
	vertical-align:middle;
	padding-left:10px;
}

/* Set width, height, and padding for logo image */
.logo img {
	width:15.0em;
	height:auto;
	padding-right:30px;
}
	
/* Set attributes for first speech bubble */
.speech-bubble1 {
	position:relative;
	width:180px;
	padding-top:20px;
	padding-bottom:20px;
	background-color:#ffece6;
	text-align:center;
	/* Set styles for border around bubble */
	border:2px solid #1e2a38;
	border-radius:15px;
	color:#333;
	/* Set font type to keep font small enough for bubble */
	font-family:Arial, sans-serif;
}

/* Set attributes for border tail for bubble one */
.speech-bubble1::after {
	content:'';
	position:absolute;
	bottom:-20px; 
	left:20px; 
	width:0;
	height:0; 
	border-style:solid;
	border-width:20px 10px 0 10px;
	border-color:#1e2a38 transparent transparent transparent;
}

/* Set attributes for second speech bubble */	
.speech-bubble2 {
	position:relative;
	width:180px;
	padding-top:20px;
	padding-bottom:20px;
	background:#191970;
	/* Set colors for border around bubble two */
	border:2px solid #f7c1d9;
	border-radius:50px; /* Makes the bubble oval */
	color:#ffe6f2;
	text-align:center;
}

/* Set attributes for bubble two tail */
.speech-bubble2::after {
	content:'';
	position:absolute;
	bottom:-20px;
	left:50px;
	width:0;
	height:0;
	border-style:solid;
	border-width:20px 10px 0 10px;
	border-color:#f7c1d9 transparent transparent transparent; 
}

/* Set attributes for flexbox horizontal nav bar */
nav {
  	display:flex;
  	list-style:none;
  	padding:0;
  	margin:0;
  	background-color:#00004d; 
}

/* Set attributes and color for nav bar regular and visited links */
nav a:link,
nav a:visited {
  	padding:10px 30px;
  	color:#ffece6;
  	display:block;
}

/* Set color for hover nav bar links */
nav a:hover {
	color:#f7c1d9;
}
  

/* Start sidebar code */

/* Set sidebar wrapper */

#sidebar {
	/* Float sidebar to right */
	float:right;
	/* Set width, height, margins and padding for sidebar elements */
	width:30%;
	height:auto;
	padding-bottom:10px;		
	padding-right:20px;
	/* Align all sidebar text to left */
	text-align:left;
}
		
		
/* Set attributes for sidebar headings */		
.sidebarFormat h2 {
	margin-top:30px;
	/* Set top and bottom padding for headings */
	padding-top:25px;
	padding-bottom:15px;
	/* Set text color and size for headings */
	color:#000099;
	font-size:1.25em;
}


/* Set attributes for sidebar links */
.sidebarFormat a {
	display:block;
	/* Indent links */
	padding-left:20px;
	margin-bottom:5px;
	/* Set font attributes for all sidebar links */
	font-size:1.05em;
	font-weight:bold;
	line-height:1.4;
}
				
/* Set font color for sidebar a links and visited links */
.sidebarFormat a:link, 
.sidebarFormat a:visited {
	color:#36c;
}
		
/* Set font color for sidebar hover links */
.sidebarFormat a:hover {
	color:#ff6933;
}

		
/* Set sidebar image height and top and bottom margins */
.sidebarFormat img {
	width:45%;
	padding-left:30px;
	padding-top:10px;

}

/* Set attributes for main headers that appear above the content section */
.mainHeaders {
	width:55%;
	margin-top:40px;
	margin-bottom:35px;
	margin-left:20px;
}

/* Set attributes for the level 1 h1 header */
.mainHeaders h1 {
	padding-left:25px;
	padding-bottom:35px;
	font-size:1.5em;
	color:#00001a;
	border-bottom:1px solid blue;
}


/*Start content wrapper*/

/* Set width,height, margins, and padding for main content section */

#contentContainer {
	width:55%;
	margin-top:20px; 
	margin-left:40px;
	height:auto;
}


/* Set attributes for main content h2 headings */

.mainContent h2, h3 {
	color:#000099;
	padding-left:20px;
	padding-bottom:30px;
}
.mainContent h2 {
	font-size:1.4em;
	font-weight:bold;
	padding-top:30px;
}

.mainContent h3 {
	font-size:1.2em;
	padding-bottom:15px;
}


/* Set attributes for main content paragraphs */
.mainContent p {
	padding-top:5px;
	padding-left:20px;
	font-size:1.05em;
	line-height:1.5;
	margin-bottom:40px;
	color:#000;
}

.mainContent img {
	width:100%;
	padding-top:30px;
	padding-bottom:30px;
}

.mainContent ul {
	list-style-type:disc;
	margin-left:30px;	
	margin-bottom:30px;
	padding-left:25px;
}

.mainContent ul li {
	display:block;
	padding-bottom:5px;
	font-size:1.0em;
	font-style:italic;
}


/* Set attributes for main content a links */
.mainContent a {
	font-size:0.95em;
	font-weight:bold;
}

/* Set color for a link and visited link in main content */
.mainContent a:link,
.mainContent a:visited {
	color:#36c;
}

/* Set color for hover links in main content */
.mainContent a:hover {
	color:#ff69b4;
}


.indentedStyle {
	margin-left:20px;
}

.plays {
	text-align:center;
	margin-bottom:30px;
	padding-bottom:10px;
}

.plays img {
	width:60%;
	height:auto;
}

.summarySection {
	border-top:1px solid gray;
	padding-top:15px;
}

.summarySection p {
	padding-top:20px;
}

.bottomBar p {
	border-bottom:1.5px solid gray;
	padding-bottom:35px;
}



.listLink a {
	display:block;
	line-height:1.35;
	padding-left:25px;
	padding-bottom:10px;
	font-size:1.05em;
}


/* Set code to clear sidebar and main content sections from bottom content */
.clearer {
	clear:both;
}

/* Set margins and font size for bottom content section */
#bottomContent { 
	margin:70px 20px 40px 40px;
	font-size:0.9em;
}

/* Set top border and padding for footer */
footer {
	border-top:1px solid gray;
	padding-top:30px;
	padding-bottom:20px;
}

/* Set padding for slogan at bottom of each page */
.slogan {
	padding-bottom:30px;
	padding-top:20px;
}

.slogan a:link,
.slogan a:visited {
	color:#0000cc;
}

.slogan a:hover {
	color:#ff6933;
}

/* Set padding and bottom border for faqs link and text */
.bottom-faqs {
	padding-bottom:20px;
	border-bottom:1px solid gray;
}

/* Set attributes for links for faqs and disclaimer pages */ 
.bottom-faqs a {
	display:inline-block;
	font-weight:bold;
}

/* Set color for a link and visited link for faqs and disclaimer */
.bottom-faqs a:link,
.bottom-faqs a:visited {
	color:#000099;
}

/* Set color for hover link for faqs and disclaimer */
.bottom-faqs a:hover {
	color:#ff6933;
}
	
/* hide mobile bottom nav bar on large screens */
.mobile-bottom-bar {
	display:none;
}

/* Set media query for small phones in portrait mode with max-width of 411px */
@media screen and (max-width:411px) and (orientation:portrait) {
	
	header {
    /* Set header position for image and set header width, height and margins */
	display:grid;
  	grid-template-columns:0.7fr 0.3fr 0.3fr; /* Adjust column sizes */
}

/* Set styles and padding for logo */
.logo {
	display:inline-block;
	vertical-align:middle;
	padding-left:5px;
    }

/* Set width, height, and padding for logo image */
.logo img {
	width:9.0em;
	padding-right:20px;
    }
	
/* Set attributes for first speech bubble */
.speech-bubble1 {
	position:relative;
	width:55px;
	padding:5px;
	margin-right:10px;
	background-color:#ffece6;
	text-align:center;
	/* Set styles for border around bubble */
	border:2px solid #1e2a38;
	border-radius:15px;
	color:#333;
	/* Set font type to keep font small enough for bubble */
    font-family:Arial, sans-serif;
}

	
/* Hide speech bubble 1 tail on mobile */
.speech-bubble1::after {
	display:none;
}

/* Set attributes for second speech bubble */	
.speech-bubble2 {
	position:relative;
	width:55px;
	padding:5px;
	background:#191970;
	/* Set colors for border around bubble two */
	border:2px solid #f7c1d9;
	border-radius:50px; /* Makes the bubble oval */
	color:#ffe6f2;
	text-align:center;
}

/* Hide speech bubble 2 tail on mobile */
	.speech-bubble2::after {
	display:none;
}
	
/* Set attributes for flexbox horizontal nav bar */
nav {
  	display:flex;
  	list-style:none;
  	padding:0;
  	margin:0;
  	background-color:#00004d; 
}

/* Set attributes and color for nav bar regular and visited links */
nav a:link,
nav a:visited {
  	padding:10px 15px;
  	display:block;
	font-size:0.8em;
}

/* Set sidebar layout attributes */
#sidebar {
	display:none;
	width:0%;
} 

/* Set attributes for main headers in section above main content */
.mainHeaders {
	width:90%;
	margin-top:30px;
	margin-left:10px;
}

/* Set padding and font size for main header h1 */
.mainHeaders h1 {
	padding-left:10px;
	padding-bottom:20px;
	font-size:1.2em;
}

/* Set attributes for main content container */
#contentContainer {
	width:90%;
	margin-left:10px;
	margin-top:20px;
}

/* Set font size for main content header h2 */
.mainContent h2 {
	font-size:1.15em;
}

.mainContent p {
	font-size:0.95em;
}

.plays img {
	width:60%;
	height:auto;
}

/* Set layout and attributes for bottom content */
#bottomContent {
	width:90%;
	margin-left:15px;
	margin-right:20px;
	font-size:0.8em;
}
	
/* Set attributes for flexbox bottom nav bar for mobile */
.mobile-bottom-bar {
  	display:flex;
  	list-style:none;
  	padding:0;
  	margin:0;
}

/* Set attributes and color for bottom nav bar for mobile for regular and visited links */
.mobile-bottom-bar a:link,
.mobile-bottom-bar a:visited {
	display:block;
  	text-decoration:none;
  	padding:15px 10px 10px 5px;
	color:#00004d;
	font-size:1.0em;
	font-weight:bold;	
}

/* Set color for mobile bottom nav bar hover links */
.mobile-bottom-bar a:hover {
	color:#f7c1d9;
}

/* Set padding and bottom border for slogan */
.slogan {
	padding-bottom:20px;
	padding-top:20px;
	border-bottom:1px solid gray;
}
	
}

/* Set media query for medium sized phones in portrait mode with viewport size between 412px and 640px */

@media screen and (min-width:412px) and (max-width:640px) and (orientation:portrait) {
	
header {
    /* Set header position for image and set header width, height and margins */
	display:grid;
  	grid-template-columns:0.8fr 0.6fr 0.6fr; /* Adjust column sizes */
}

/* Set styles and padding for logo */
.logo {
	display:inline-block;
	vertical-align:middle;
	padding-left:5px;
}

/* Set width, height, and padding for logo image */
.logo img {
	width:10.0em;
	padding-right:30px;
}
	
/* Set attributes for first speech bubble */
.speech-bubble1 {
	position:relative;
	width:70px;
	padding:5px;
	margin-right:10px;
	background-color:#ffece6;
	text-align:center;
	/* Set styles for border around bubble */
	border:2px solid #1e2a38;
	border-radius:15px;
	color:#333;
	/* Set font type to keep font small enough for bubble */
	font-family:Arial, sans-serif;
}

	
/* Hide speech bubble 1 tail */
.speech-bubble1::after {
	display:none;
}

/* Set attributes for second speech bubble */	
.speech-bubble2 {
	position:relative;
	width:70px;
	padding-top:10px;
	padding:10px;
	background:#191970;
	/* Set colors for border around bubble two */
	border:2px solid #f7c1d9;
	border-radius:50px; /* Makes the bubble oval */
	color:#ffe6f2;
	text-align:center;
}

/* Hide speech bubble 2 tail */
.speech-bubble2::after {
	display:none;
}
	
/* Set attributes for flexbox horizontal nav bar */
nav {
  	display:flex;
  	list-style:none;
  	padding:0;
  	margin:0;
  	background-color:#00004d; 
}

/* Set attributes and color for nav bar regular and visited links */
nav a:link,
nav a:visited {
  	padding:10px 20px;
  	display:block;
	font-size:0.8em;
}

/* Hide sidebar on mobile */
#sidebar {
	display:none;
	width:0%;
} 

/* Set attributes for main headers */
.mainHeaders {
	width:90%;
	margin-top:30px;
	margin-left:15px;
}

/* Set padding and font size for main header h1 */
.mainHeaders h1 {
	padding-left:15px;
	padding-bottom:20px;
	font-size:1.2em;
}

/* Set width and left margin for main content container on mobile */
#contentContainer {
	width:90%;
	margin-left:20px;
}
	
/* Set font size for main content header h2 */
.mainContent h2 {
	font-size:1.1em;
}
	
/* Set font size for main content paragraphs */
.mainContent p {
	font-size:0.97em;
}

.plays img {
	width:60%;
	height:auto;
}

.banner img {
	max-width:100%;
	height:auto;
	display:block;
}


/* Set right margin and font size for bottom content */
#bottomContent {
	margin-right:20px; 
	font-size:0.85em;
}

/* Set padding and bottom border for slogan */
.slogan {
	padding-bottom:20px;
	padding-top:20px;
	border-bottom:1px solid gray;
}	

/* Set attributes for bottom nav bar for mobile */
.mobile-bottom-bar {
  	display:flex;
  	list-style:none;
  	padding:0;
  	margin:0;
}

/* Set attributes and color for bottom nav bar for mobile for regular and visited links */
.mobile-bottom-bar a:link,
.mobile-bottom-bar a:visited {
  	text-decoration:none;
  	padding:20px 14px 10px 10px;
  	color:#00004d;
  	display:block;
	font-size:0.95em;
	font-weight:bold;
}
	
}

/* Set media query for large tablets in landscape mode with viewport size between 1181px and 1300px */

@media screen and (min-width:1181px) and (max-width:1500px) and (orientation:landscape) {
	
/* Set font size for sidebar paragraphs */
.sidebarFormat p {
	font-size:1.25em;
}
	
/* Set font size for a links in sidebar */
.sidebarFormat a {
	font-size:1.2em;
}
	
/* Set font size for paragraphs in main content */
.mainContent p {
	font-size:1.3em;
}
	
/* Set font size for bottom content */
#bottomContent {
	font-size:0.9em;
}
}

/* Set media query for desktops with min width of 1501px */
@media screen and (min-width:1501px) and (orientation:landscape) {

/* Set font size for sidebar paragraphs */
.sidebarFormat p {
	font-size:1.4em;
}

/* Set font size for sidebar links */	
.sidebarFormat a {
	font-size:1.35em;
}

/* Set font size for paragraph text in main content section */
.mainContent p {
	font-size:1.5em;
}


/* Set font size for bottom content */
#bottomContent {
	font-size:1.1em;
}

/* Set top and bottom padding for footer */
footer {
	padding-top:30px;
	padding-bottom:20px;
}

.slogan {
	padding-bottom:30px;
	padding-top:20px;
}

.bottom-faqs {
	padding-bottom:20px;
}
}