@charset "UTF-8";
/* ***********************************
	TABLE OF CONTENTS
---------------------------------
	1. Project Details, Color, and Typography Info
	2. CSS Reset
	3. Global Styles (Tags, Basic Styling)
	4. Header and Nav
	5. Main Body Content
	6. Table Styles
	7. Generic Selectors (Shared Page Class Styles)
	8. Footer Content
	9. Media Queries
*********************************** */
/* ***********************************
**************************************
	1. PROJECT DETAILS, COLOR, AND TYPOGRAPHY GUIDELINES

			PROJECT DETAILS
Author: Sarah Strand
Project: Lesson 12 Website (Optimized CSS)
Version: 1.2
Last Updated: 5/20/2019
Notes: This update is located within a subdirectory for Lesson 12.
---------------------------------
			COLOR GUIDE
blue (navbar background): #006699
yellow (link, visited AND footer text): #FFFFCC
white (link, hover AND header text): #FFFFFF
bright green (header text): #00FF00
blue (navbar background): #006699
medium green (header, footer background): #009900
pale green (sidebar background): #CFC
---------------------------------
			TYPOGRAPHY GUIDE
headings - Impact, sans-serif
body - source-sans-pro, sans-serif
tagline - "Lucida Grande", sans-serif
article - patua-one
**************************************
*********************************** */
/* ***********************************
**************************************
	2. CSS RESET (ERIC MEYER, MODIFIED)

   http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)

**************************************
*********************************** */
* {
	border: 0;
	font: inherit;
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
/* ***********************************
**************************************
	3. GLOBAL STYLES
**************************************
*********************************** */
body { font: normal 400 14px/1.45em source-sans-pro, sans-serif; }
ol, ul { list-style: inside; }
/* ***********************************
**************************************
	4. HEADER & NAV
**************************************
*********************************** */
/* Header Styles*/
header h2 {
	color: #00FF00;
	font: 350%/1.1em Impact, sans-serif;
	text-align: center;
	text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.40);
}
header h2 a:link, header h2 a:visited {
	color: inherit;
	text-decoration: none;
}
.logowhite { color: #FFFFFF; }
.row header {
	background: url(../images/fern.png) 47% center / auto 80% no-repeat, url(../images/stripe.png) left top / auto auto repeat-x #009900;
	border-top: 5px solid #FD5;
	border-bottom: 5px solid #FD5;
	margin-top: 52px;
	padding: 20px 0px;
}
#tagline {
	color: #FFFFFF;
	font: bold 100%/1.46em "Lucida Grande", sans-serif;
	letter-spacing: 0.5em;
	text-align: center;
	text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.50);
	text-transform: uppercase;
}
/* Navigation Styles */
.row .navbar { margin-bottom: 0px; }
.row .navbar-default {
	background-color: #006699;
	background-image: -webkit-linear-gradient(270deg, rgba(0, 102, 153, 1.00) 0%, rgba(0, 136, 170, 1.00) 100%);
	background-image: -moz-linear-gradient(270deg, rgba(0, 102, 153, 1.00) 0%, rgba(0, 136, 170, 1.00) 100%);
	background-image: -o-linear-gradient(270deg, rgba(0, 102, 153, 1.00) 0%, rgba(0, 136, 170, 1.00) 100%);
	background-image: linear-gradient(180deg, rgba(0, 102, 153, 1.00) 0%, rgba(0, 136, 170, 1.00) 100%);
}
.row .nav.navbar-nav {
	float: none;
	margin: 0px auto;
	width: 715px;
}
/* Navigation Link Styles */
.row .nav.navbar-nav > li > a, .row .nav.navbar-nav > li > a:link, .row .nav.navbar-nav > li > a:visited, .row .nav.navbar-nav > li > a:hover {
	border-top: solid 1px #00AAEE;
	border-right: solid 1px #003377;
	border-bottom: solid 1px #003377;
	border-left: solid 1px #00AAEE;
}
.row .nav.navbar-nav > li > a:link, .row .nav.navbar-nav > li > a:visited {
	color: #FFFFCC;
}
/* a:hover must be styled last */
.row .nav.navbar-nav > li > a:hover {
	background-image: -webkit-linear-gradient(90deg, rgba(0, 102, 153, 1.00) 0%, rgba(0, 136, 170, 1.00) 100%);
	background-image: -moz-linear-gradient(90deg, rgba(0, 102, 153, 1.00) 0%, rgba(0, 136, 170, 1.00) 100%);
	background-image: -o-linear-gradient(90deg, rgba(0, 102, 153, 1.00) 0%, rgba(0, 136, 170, 1.00) 100%);
	background-image: linear-gradient(0deg, rgba(0, 102, 153, 1.00) 0%, rgba(0, 136, 170, 1.00) 100%);
	color: #FFFFFF;
}
#top .dropdown-menu { padding: 0px; }
#top .dropdown-menu > li > a {
	background-color: #08A;
	border-top: solid 1px #09E;
	border-bottom: solid 1px #069;
	color: #ffc;
	padding: 10px;
	text-align: center;
}
#top .open > a, #top .open > a:visited { background-color: #069; }
/* ***********************************
**************************************
	5. MAIN BODY CONTENT
**************************************
*********************************** */
.flt_lft {
	float: left;
	margin-right: 10px;
}
.flt_rgt {
	float: right;
	margin-left: 10px;
}
main.row article h1 {
	font: normal 400 300%/1em patua-one;
	margin: 0px 0px 15px;
}
main.row aside {
	border-top: solid 5px #069;
	border-bottom: solid 3px #069;
	font-size: 95%;
	line-height: 1.4;
	margin: 1em 0px;
	padding: 1em 0px;
}
main.row aside blockquote {
	border: none;
	font-size: 100%;
	margin: 0px 0px 20px 0px;
	padding: 0px;
}
main.row aside blockquote cite {
	display: block;
	font-style: italic;
	padding: 0px 10px;
	text-align: right;
}
main.row aside blockquote p {
	margin: 0px 0px 5px 0px;
	padding: 0px 5px;
	text-indent: -0.5em;
}
section #accordion1 {
	border: solid 1px #060;
	border-radius: 5px;
}
section h2, section h3 {
	color: #090;
	font-size: 170%;
	font-weight: bold;
	margin-top: 15px;
	margin-bottom: 5px;
}
.panel-title a:hover, .panel-title a:focus { text-decoration: none; }
section .panel-body { background-color: #CFC; }
section .panel-default > .panel-heading {
    background-color: #090;
    background-image: -o-linear-gradient(90deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%);
    background-image: -webkit-linear-gradient(90deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%);
    background-image: -moz-linear-gradient(90deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%);
    background-image: linear-gradient(0deg, rgba(0, 102, 0, 1.00) 0%, rgba(0, 204, 0, 1.00) 100%);	
	color: #FFC;
}
section .panel-default > .panel-heading:hover {
    background-color: #090;
    background-image: -o-linear-gradient(90deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 99.88%);
    background-image: -webkit-linear-gradient(90deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 99.88%);
    background-image: -moz-linear-gradient(90deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 99.88%);
    background-image: linear-gradient(180deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 99.88%);
    color: #FFF;
}
.sidebar2 { background-color: #CFC; }
.sidebar2, .sidebar2 h2, .sidebar2 h4, .sidebar2 p { padding: 0px 10px; }
.sidebar2 h2, .sidebar2 h4 {
	font-size: 130%;
	line-height: 1.4em;
	margin-top: 10px;
}
.sidebar2 h2, .sidebar2 h4, .sidebar2 p { margin-bottom: 5px; }
.sidebar2 p { line-height: 1.3em; }
.sidebar2 section figure figcaption, .sidebar2 section h3 { margin: 5px 10px 15px 10px; }
.sidebar2 section h5 {
	font-style: italic;
	margin-left: 5px;
}
.sidebar2 section figure img {
	display: block;
	margin: 0px auto;
}
/* ***********************************
**************************************
	6. TABLE STYLES
**************************************
*********************************** */
/* travel.html styles */
article table h3 {
	margin-top: 0px;
	margin-bottom: 5px;
	font: 130% “Arial Narrow”, sans-serif;
}
table h3 a:link, table h3 a:visited {
	color: #090;
	font-weight: bold;
}
/* events.html styles */
section table {
	border-bottom: solid 3px #060;
	font: 90% 'Arial Narrow', sans-serif;
	margin-bottom: 4em;
	width: 100%;
}
section td, section th {
	border-top: solid 1px #090;
	padding: 4px;
	text-align: left;
}
section th {
	background-color: #090;
	border-bottom: solid 6px #060;
	color: #ffc;
	text-align: center;
}
section .class { width: 10em; }
section .cost, section .day, section .length {
	text-align: center;
	width: 4em;
}
section .date {
	width: 6em;
}
section .description {}
section .event {}
section .location {}
table caption {
	color: #090;
	font-size: 160%;
	font-weight: bold;
	line-height: 1.2em;
	margin-top: 20px;
	padding-bottom: 10px;
	text-align: center;
}
.tableh2 {
	text-align: center;
	text-transform: uppercase;
}
/* ***********************************
**************************************
	7. GENERIC SELECTORS
**************************************
*********************************** */
.ctr {
	margin-top: 15px;
	text-align: center;	
}
.profile {
	border-bottom: solid 10px #CADAAF;
	border-left: solid 2px #CADAAF;
	margin: 0px 25px 15px 25px;
	padding-left: 10px;
}
/* ***********************************
**************************************
	8. FOOTER
**************************************
*********************************** */
footer {
	background-color: #090;
	background-image: -webkit-linear-gradient(90deg, rgba(0, 102, 0, 1.00) 0%, rgba(0, 204, 0, 1.00) 100%);
	background-image: -moz-linear-gradient(90deg, rgba(0, 102, 0, 1.00) 0%, rgba(0, 204, 0, 1.00) 100%);
	background-image: -o-linear-gradient(90deg, rgba(0, 102, 0, 1.00) 0%, rgba(0, 204, 0, 1.00) 100%);
	background-image: linear-gradient(0deg, rgba(0, 102, 0, 1.00) 0%, rgba(0, 204, 0, 1.00) 100%);
	color: #FFC;
	padding: 1em 0px;
}
/* ***********************************
**************************************
	9. MEDIA QUERIES
**************************************
*********************************** */
@media (max-width:426px) {
	/* Header & Nav */
	.row header {
		background-image: url(../images/fern.png), url(../images/stripe.png);
		background-size: 75% auto, auto auto;
		font-size: 89.9%;
		line-height: 1.4em;
		padding: 10px 0px;
	}
	#tagline { letter-spacing: 0.1em; }
	/* Main Body Content */
	.flt_lft, .flt_rgt {
		display: block;
		float: none;
		height: auto;
		margin: 0px auto;
		max-width: 95%;
	}
	main.row article h1, main.row article h2 { line-height: 1.1em; }
	main.row article h1 {
		font-size: 185%;
		padding-top: 15px;
		text-align: center;
	}
	main.row article h2 { font-size: 150%; }
	/* Table Styles */
	section table {
		margin-left: auto;
		margin-right: auto;
	}
	section td, section th { display: block; }
	section th {
		border: none;
		font-size: 0;
		height: 0;
		margin: 0;
		overflow: hidden;
		padding: 0;
	}
	section tr { border-bottom: solid 2px #060; }
	section tr:nth-of-type(even) { background-color: #d4ead4; }
	section .class, section .cost, section .date, section .day, section .description, section .event, section .length, section .location {
		padding-left: 30%;
		position: relative;
		text-align: left;
	}
	table .hide_ad { display: none; }
	td:before {
		color: #060;
		display: block;
		font-weight: bold;
		left: 1em;
		padding-right: 10px;
		position: absolute;
		top: 6px;
		white-space: nowrap;
		width: 25%;
	}
	td.class:before { content: 'Class: '; }
	td.cost:before { content: 'Cost: '; }
	td.date:before { content: 'Date: '; }
	td.day:before { content: 'Day: '; }
	td.description:before { content: 'Description: '; }
	td.event:before { content: 'Event: '; }
	td.length:before { content: 'Length: '; }
	td.location:before { content: 'Location: '; }
	/* Generic Selectors */
	.profile {
		border-top: solid 10px #CADAAF;
		border-bottom: solid 10px #CADAAF;
		border-left-style: none;
		margin: 5px 0px;
		padding: 5px 0px;
	}
}