/*==============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. */
    /*w3schools:  The auto Value - You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:*/

    font-size: .8em; 
    width: 1000px; 
    margin: auto;
    padding: 20px;

}

/*==============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 descendent selector (Take a look at page 238 in the book to learn more about descendent 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: 165%; /*rubric showed 170% - my guess looked better so I kept it*/

	/* 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: #928342; /* spending hours - what I came up with color: #978341; shown is rubric - they are nearly the same*/ 

	/* 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.3em; /* this is what I came up with:  Rubric shows 0.4em but it's too big, so I kept it 3 because 3 matches the proportions in the image*/

}

/*==============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 lists 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. */
    
    width: 20px;
	
	height: 200px;
	
	padding-top: 45px;
    
    background-color: #f2cc10; /* my background-color: #ffcc00; I spent hours on this one. They are similar - should have thought of looking at rubric first */
    
    /*list-style-position: inside;*/
    
    list-style-type: none;
    
    border: 2px solid #928342;

}

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. */
		
    width: 220px;
	
    padding: 6px;
	
   /*last week:  padding-left: 30px;*/
    
    padding-left: 10px;
	
    margin-bottom: 7px;
	
    margin-left: -8px;
    
    background-color: rgb(135,117,45); /* Last weeks: This is what I came up with:  rgba(151,131,65,0.9);*/ 
    
    box-shadow: 3px 3px #000000;
   

}

/*==============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{
    
    font-weight: bold;
    color: #f8ffb0; /*my guess: #c5bd76; this the best I could get from the PS eyedropper - spent 30 minutes trying to get it to look yellow - thought of rubric when it was time to turn in*/
    text-decoration: none;
    
}

nav a:visited{
    
    color: #f8ffb0; /*chgd to match rubric*/   
    
}

nav a:hover{
    
    color: #f2cc10; /* PS eyedropper #cc9933:*/
    
}
nav a:active{ 
    
    color: #ffffff; /* PS eyedroppe #cccccc:*/
    
}


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

/*use the screenshot to make the appropriate changes to these elements*/
main{
    background: #f2cc10; /*#ffcc00;*/
    padding: 45px 30px 30px 30px;
    border: 2px solid #928342;
}

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

section h2{
    
    font-size: 20px;
    font-style: normal;
   
        
}

#bees{
    background-color: #ffffcc;
    border: 1px solid #928342;
    padding: 30px;
    margin: 55px auto 25px auto;
    height: 195px;
    line-height: 1.4em;
}

#blossoms{
    background-color: #ffffcc;
    border: 1px solid #928342;
    padding: 30px;
    overflow: scroll;
    max-height: 500px;
    margin: 40px auto 20px auto;
           
}

#bees h2{
    padding: 10px;
    display: inline;
    background-color: #ffffff;
    color: #928342;
    border: 1px solid #928342;
    border-radius: 25px;
    border-bottom-right-radius: 0px;
}

#blossoms h2{
    padding: 10px;
    display: inline;
    background-color: #ffffff;
    color: #928342;
    border: 1px solid #928342;
    border-radius: 25px;
    border-bottom-right-radius: 0px;
}

footer{
    color: #f8ffb0;
    text-align: center;
    background-color: #928342;
    padding: 8px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    margin-bottom: 20px;
}


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

footer nav a:link{
    text-decoration: underline;
}