/*reset CSS on all browsers*/
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea blockquote{margin:0; padding:0; border:0;}

body{background-color:#E9EFD2;
    /*instructions for type*/
    font-family: 'Quicksand', sans-serif;
	color:#58B947;}
	
a{color:#0C9447;}

a:hover{color:red;}

header a, h2 a, td a, h4 a{color:#0C9447; font-style: normal; text-decoration:none;}

.circle3 a{color:#E9EFD2;}

.circle3 a:hover{color:red;}

/*making circles-used code from http://bryanhadaway.com/how-to-create-circles-with-css/ -->*/	
.circle1{width:100px;height:100px;border-radius:50px;font-size:20px;line-height:100px;text-align:center;background:#58B947;}
.circle2{width:100px;height:100px;border-radius:50px;font-size:20px;line-height:100px;text-align:center;background:#bbdb89;}
.circle3{width:100px;height:100px;border-radius:50px;font-size:20px;line-height:100px;text-align:center;background:#0C9447;}
.circle4{width:100px;height:100px;border-radius:50px;font-size:20px;line-height:100px;text-align:center;background:white;}

#container{width:960px;margin:0 auto;padding:48px 22px 0 22px;}

header{margin:0 0 98px 0;}

header h1{float:left; font-size:48px; font-weight:bold;}

header nav{float:right; text-align:right; padding:6px 0 0 0;}

header nav ul{list-style:none;}

header nav li{list-style:none; float:left; font-size:18px; width:136px; margin:0 0 0 20px;}

#content{float:left; width:250px; margin:0 98px 0 0;}

#content h1{margin-bottom: 4px;}

#content h2{font-size:25px;font-weight:bold;margin:5px 0 5px 0;}	

img {float: left;
	    margin: 5px;
	    width: 200px;
	    height: 200px;
	    overflow: hidden;
	    transition: all 0.5s ease;
	    -webkit-transition: all 0.5s ease;
	    -moz-transition: all 0.5s ease;
	    -o-transition: all 0.5s ease;
	    border-radius: 20px;}
/*this is what the transition is*/		
img:hover {width: 285px;
	          height: 285px;
	          border-radius: 20px;}


#sidebar{width:500px;float:left;margin-bottom:10px;padding: 2px 0 0 0;}
		
#sidebar h2{font-size:25px;font-weight:bold;margin:5px 0 5px 0;}

#sidebar h3{font-size:18px;font-weight:bold;margin:5px 0 5px 0;}
			
#sidebar section{margin:0 0 50px 0;}

#footer-container{clear:left;overflow:hidden;}

footer{width:916px;margin:0 auto;padding:10px 22px 50px 22px;}

/*desktop size*/		  
@media screen and (max-width:960px){#container, footer{width:758px;}
	                                #content{margin:0 20px 0 0;}
	                                #sidebar{width:212px;}
	                                #sidebar section{clear:left;}}
/*tablet size*/
@media screen and (max-width:758px){#container, footer, #sidebar{width:524px;}
		                            header nav {clear: left; float: none; overflow: hidden;}
	                                header nav li {width:auto; margin:0 25px 0 0;}
	                                header {margin:0 0 44px 0;}
	                                header h1 {margin:0 0 24px 0;}
	                                #sidebar section {float: left; clear: none;}}
/*mobile size*/	
@media screen and (max-width: 524px){#container, footer, #sidebar, #content{width:292px;}
	                                 #content article h2{font-size:24px;}}