/*==============Google font============*/

/* This is an example of how to use google fonts. You don't need to do anything 
with this code, it is just here as a reference. Notice that you include 
this @import line, and then you use the font-family like normal everywhere else 
in the document. */
@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville);

body
{
	font-family: 'Libre Baskerville', serif;
	/* Set the default font size for the body text below this comment. 
	Reference the screenshot to know what size to make this text. 
	Use "em" for font size. */
	font-size: 0.8em;
	width: 1000px;
	margin: 0px auto;
}

/*==============Web safe fonts============*/

/* Check out this site for more web safe font families 
http://www.w3schools.com/cssref/css_websafe_fonts.asp */

/* You can make a single CSS rule apply to multiple elements by using a comma 
between each selector. The following rule will apply to all the headings on 
the page (h1-h6). */

h1, h2, h3, h4, h5, h6
{
	font-family: "Arial Black", Gadget, sans-serif;
}

/*==============Header============*/

/* This rule is using a decedent selector (Take a look at page 238 in the book 
to learn more about decedent selectors). Use the screenshot */

header h1
{
	/*Write a declaration (property: value;) below this comment that will change 
	the capitalization of the h1's font without rewriting the code in the HTML. */
	text-transform: capitalize;
	
	/* Write a declaration (property: value;) below this comment to set the font 
	size of this h1 ("A Beekeeping Resource") using a percent. The exact percent 
	is not provided for you in the screenshot. Try to match the size visually. */
	font-size: 150%;
	
	/* Write a declaration (property: value;) below this comment to set the font 
	color using a hex code. You will need to use Photoshop to eyedrop this color 
	from the screenshot. */
	color: #837828;
	
	/* Write a declaration (property: value;) below this comment to set the 
	letter spacing of this h1 ("A Beekeeping Resource") using EMs. The exact 
	spacing is not provided for you in the screenshot. Try to match the 
	spacing visually. */
	letter-spacing: 0.4em;
}

/*==============Main Navigation============*/

/* The following two rules effect only the <ul>s and <li>'s in the <nav>. The 
selector "nav ul" would be read, "Find all nav tags, then find any children that 
are <ul>s, and select them." These are more specific so that other list on the 
page won't be styled the same */

header nav ul
{
	/* Write a declaration (property: value;) below this comment to change the 
	background color of this <ul> using a hex color. You will need to use 
	Photoshop to eyedrop this color from the screenshot. */
	background-color: #f2cc0f;
	width: 20px;
	height: 200px;
	padding-top: 45px;
	list-style-position: inside;
	border: 2px solid rgb(131, 120, 40);
}

header nav li
{
	/* Write a declaration (property: value;) below this comment to change the 
	background color of the <li>s using an rgba color. You will need to use 
	Photoshop to eyedrop this color from the screenshot. This might not be exactly 
	the same color since there is an opacity. */
	background-color: rgb(131, 120, 40);
	width: 220px;
	padding: 6px;
	/*padding-left: 30px;*/
	margin-bottom: 7px;
	margin-left: -8px;
	box-shadow: 2px 2px 2px black;
	list-style: none;
}

header nav a
{
	text-decoration: none;
}

/*==============LINK STYLE============*/

/* You will need to style your links using the colors defined in the screenshot. 
Use hex codes for all of these link colors. You will need to make sure that the 
other links on this page don't also get styled the same. This will work very similar 
to how the main navigation selectors work above. You need to be specific. */
nav a:link, nav a:visited
{
	color: #f8ffb0;
}

nav a:hover
{
	color: #f2cc10;
}

nav a:active
{
	color: #ffffff;
}

/*==============MAIN STYLE============*/

/*use the screenshot to make the appropriate changes to these elements*/

main
{
	background-color: #f2cc0f;
	border: 2px solid rgb(131, 120, 40);
	padding: 30px;
}

h2
{
	font-style: italic;
	font-size: 14px;
}

article h1
{
	font-style: normal;
	font-size: 28px;
}

section
{
	background-color: #f8ffb0;
	border: 1px solid rgb(131, 120, 40);
	padding: 30px;
	margin: 40px 0px;
}

section[id="blossoms"]
{
	max-height: 500px;
	overflow: scroll;
}

section h2
{
	font-style: normal;
	font-size: 20px;
	color: rgb(131, 120, 40);
	background-color: #ffffff;
	border: 1px solid rgb(131, 120, 40);
	padding: 10px;
	border-radius: 30px 30px 0px 30px;
	display: inline;
}

/*==============FOOTER STYLE============*/

footer
{
	margin: 0px 0px 20px 0px;
	padding: 5px;
	background-color: rgb(131, 120, 40);
	border-radius: 0px 0px 30px 30px;
	color: #f8ffb0;
	text-align: center;
}

footer ul
{
	padding: 0px;
	padding-bottom: 5px;
}

footer li
{
	display: inline;
	padding-right: 15px;
}