/************Reset**************/
	* { 
		-moz-box-sizing: border-box; 
		-webkit-box-sizing: border-box; 
		 
	}

	body, h1, h2, h3, p, img, ul, li, div{ 
		margin: 0; 
		padding: 0; 
		border: 0;
	} 

	li, ul { 
		list-style: none;
		margin: 0;
		padding: 0;
	} 

		header, footer, navigation, content, col-right, sidebar-left {
		display: block;	
	}
	

	/************End Reset**************/

	/*the above is a very basic reset rule.  Every browser has a slightly different default for HTML tags.  By using this simple CSS reset, all the more glaring styles 
		are reset and can now be set to whatever properties that would suit your website best. */
	
 	/************Global**************/

	body{
		background:#eaf8fb;	/* a light blue background color. */
		font-family:Arial, Helvetica, sans-serif; 

		/* the font family for all text on the web page is now either arial, helvetica or a sans-serif font if those two are not available */

		font-size:.81em; /* all normal text on the web page has a base font size of 14px now */
	}

	h1 {
		font-size: 3em;
		line-height: 1;
		letter-spacing: -0.02em;
		margin-bottom: 0.2em;
	}

	h2 {
		font-size: 2em;
		line-height: 1.1;
		margin-bottom: 0.2em;
	}
		
	p{
		letter-spacing:.04em; /* letter spacing sets the horizontal spacing (kerning) between letters in a block of text. */
		line-height:1.31em; /* line height sets the vertical spacing between lines of text. */
	}
	
	/************End Global**************/

	/************ Header **************/
		
	div#header{
		background-color:#333; /* a more specific way to set a background color */
		background-image:url(images/headerbkgd.png); /* sets a background image in the header and the position it should sit */
		background-repeat:no-repeat; /* sets a background image to repeat, repeat-x, repeat-y or not at all as written in this rule */
		background-position:left bottom;/* sets a background image position */
		color:#fff;	/* sets the the color of all header text to white */
		-webkit-border-bottom-right-radius: 4px;
		-webkit-border-bottom-left-radius: 4px;
		-moz-border-radius-bottomright: 4px;
		-moz-border-radius-bottomleft: 4px;
		border-bottom-right-radius: 4px;
		border-bottom-left-radius: 4px;	/* these 6 lines of border-radius code make rounded corners for the bottom work in firefox, safari, chrome, opera and IE9 */
		margin:0 auto; /* by declaring a width on any block element (like a div), giving it a css property of margin:0 auto will center that block element on page */
		min-height:14%;	/* setting a minimum height of an element means that it can grow to be bigger, if there is a lot of content in it. However, if it doesn't have enough content, it will be at the very least (in this example) 130 pixels tall */
		padding:45px 15px 15px;	/* by setting a padding, the content within a HTML element will not touch the edges of that element (by adding padding to an element, it actually makes that element appear wider and/or taller.  In this case, the header div is now 15px wider and taller on each side. */
		width:96%;	/* sets the width of the div to 900px. Remember that if you add padding to this element it will increase the size by the number of pixels in the padding. In this example the width is 900px and we have 15px to the left and right so the total width of the header will be (870px + 15px+15px=930px */
		
	}
	
	/*********** End Header *************/


	/*********** Navigation *************/
		
	ul.navigation {
		list-style:none;	/* this removes the bullets from list elements */
		margin-top:20px;	/* giving the ul a top margin of 20px */
	}
					
	ul.navigation li{
		display:inline-block; /* an inline block element can have width and height applied to it / and if not, they only take up as much space as the content within allows */
		margin:0 3px 5px;	/* this code adds a 3px margin to the left and right of the list elements, and 5px to the bottom of the list elements */
					}
					
	ul.navigation li a{
		background:#4a4a4a;	/* this is a dark grey background for the link */
		color:#fff;	/* this makes the link text white */
		-moz-border-radius:2px; 
		webkit-border-radius:2px; 
		border-radius:2px;	/* these 3 lines of border-radius code make rounded corners work in firefox, safari, chrome, opera and IE9 */
		border:1px solid #595959; /* this adds a light grey solid border of 1px width around the link */
		padding:3px 10px;	/* as the name implies, this adds extra padding around the link, so that the borders don't bump up against the link text */
		text-decoration:none; /* this removes the normal underline that links usually have */
	}
						
	ul.navigation li a:hover{
		background-color:#000; /*this is a hover pseudo class.  By designating a different background color, than the class for the a tag above, when a mouse hovers over these particular links, in the navigation bar, the background color will change to what's defined here */
		
	}
	
	/*********** End Navigation *************/

	/************Container[div] Structure**************/	

	div.content{
		margin:.93em auto; /* this adds a margin of 15px to the top and bottom of the div with the class of content.  The auto margin applies to the left and right side of the div which is what centers the div in the middle of the page. */
		width:100%;
	}
				
	div.col-right{
		float:right;
		width:73%;
		}
		
	div.sidebar-left{
		float:left;
		padding:0 .62em;
		width:22%;	/* when floating content next to each other, applying set widths will make the content play nice with each other. Change the width of the siebar, or take away the width of the above "div.col-right" and see what happens to get a better idea of how widths effect floats */
		}
		
	div.sidebar-left a{
		color:#445e64;	/* this redefines all links in the left sidebar to this new color, as opposed to the default blue link color */
	}
	
	div.sidebar-left a:hover{
		text-decoration:none
	}	/* when hovering over a link, in the sidebar, this turns off the underline */

	/************End Container**************/
	
	/************Classes**************/

	.list{
		border-bottom:1px solid #c3dce1; /* adds a border to the bottom of the list to further divide the content for easier segragation */
		padding:0 0 1.25em .93em;	/* adds spacing to the bottom of the list to further divide the content for easier segragation */
	}

	.list li{
		margin-bottom:1em
	}

	.list li a{
		font-weight:bold;	/* this makes all anchor classes with .list bold without using <strong>  */
		text-transform:uppercase;	/* this makes all anchor classes with .list uppercase  */
		font-size:1em;	/* this makes all anchor classes with .list applied 11px tall  */
	}

	.float-left{
		float:left;	/* use this on an element (like an image) to make it float to the left of it's containing HTML element */
		margin:0  .62em .62em 0;
	}

	.float-right{
		float:right;	/* use this on an element (like an image) to make it float to the right of it's containing HTML element */
	}

	.float-right img{
		margin:0 0 .62em .62em;	/* use this on an element (like an image) to make it float to the right of it's containing HTML element */
	}

	.clear{
		clear:both; /* this clears floats.  This would be used to cancel out a float's behavior on content below it.  */
	}

	/************End Classes**************/
		
	/*Footer*/
		
	div#footer{
		background-color:#c4d5d9;
		margin:0 auto;
		padding:.92em;
		text-align:center;
		width:100%;
	}

	/*End Footer*/


/* Start Media Queries */

/* Large Laptops */

@media only screen and (min-width: 85em) and (max-width:180em){
    
/* Header */

  	div#header{
		
		min-height:9.7%;	
		width:90.3%;			
  	}
	
	body{
		background:white;			
	}

	h1 {
		font-size: 3em;
		color:red;
		line-height: 1.1;
		letter-spacing: -0.02em;
		margin-bottom: 0.3em;
	}

	h2 {
		font-size: 1.2em;
		line-height: 1.1;
		margin-bottom: 0.3em;
	}

/* Navigation */

      ul.navigation {
		margin-top:2.5em;			
	}
								
	ul.navigation li a{
		
		font-size: 1.2em;
		color:yellow;
		font: 2em arial, sans-serif;
		font-weight: bold;
		letter-spacing: -0.001em;
		padding:.75em 4em;		
	}
						
	ul.navigation li a:hover{
		background-color:grey; 
		
	}
	
	.list{
		font-size:1.2em;
		padding:0 0 .62em .46em;	
	}
	.list li{
		margin-bottom:auto
	}
	.list li a{
		padding:1em;	
		font-size:.75em;
		color:blue;
		padding:0 0 .62em .46em;
		margin:0 0 .62em .62em;	
	}    
  
	.float-left img{
		float:left;	
		margin:0  .62em .62em 0;
		width:90%;
	}
	

 /* Main Content */
    
    div.content{
		margin:.93em auto; 
		width:90%;
	}
				
	div.col-right{
		font-size:1.2em;
		margin:0 auto;
		padding:.93em;
		width:73%;
		}
		
	div.sidebar-left{
		font-size:1.2em;
		margin:0 auto;
		padding:.93em;
		width:27%;	
	}
	
	div#footer{
		font-size:1.2em;
		background-color:#c4d5d9;
		color:green;
		margin:0 auto;
		padding:.93em;
		text-align:center;
		width:90%;
	}	

       
}

/* Bigger tablets and smaller Laptops*/
@media screen and (max-width:128em){
    
      /* Header */

  	div#header{
		
		min-height:9.7%;	
		width:90.3%;			
  	}
	
	body{
		background:white;			
	}

	h1 {
		font-size: 3em;
		color:red;
		line-height: 1.1;
		letter-spacing: -0.02em;
		margin-bottom: 0.3em;
	}

	h2 {
		font-size: 1.2em;
		line-height: 1.1;
		margin-bottom: 0.3em;
	}
    
    /* Navigation */

      ul.navigation {
		margin-top:2.5em;			
	}
								
	ul.navigation li a{
		
		font-size: 1.2em;
		color:yellow;
		font: 2em arial, sans-serif;
		font-weight: bold;
		letter-spacing: -0.001em;
		padding:.75em 4em;		
	}
						
	ul.navigation li a:hover{
		background-color:grey; 
		
	}
	
	.list{
		font-size:1.2em;
		padding:0 0 .62em .46em;	
	}
	.list li{
		margin-bottom:auto
	}
	.list li a{
		padding:1em;	
		font-size:.75em;
		color:blue;
		padding:0 0 .62em .46em;
		margin:0 0 .62em .62em;	
	}    
  
	.float-left img{
		float:left;	
		margin:0  .62em .62em 0;
		width:90%;
	}
	
    
    /* Main Content */
    
    div.content{
		margin:.93em auto; 
		width:90%;
	}
				
	div.col-right{
		font-size:1.2em;
		margin:0 auto;
		padding:.93em;
		width:73%;
		}
		
	div.sidebar-left{
		font-size:1.2em;
		margin:0 auto;
		padding:.93em;
		width:27%;	
	}
	
	div#footer{
		font-size:1.2em;
		background-color:#c4d5d9;
		color:green;
		margin:0 auto;
		padding:.93em;
		text-align:center;
		width:90%;
	}	

   
}

/* Bigger Smartphones */
@media only screen and (min-width: 50em) and (max-width:67.5em){
    
     /* Header */

  	div#header{
		
		min-height:9.7%;	
		width:90.3%;			
  	}
	
	body{
		background:white;			
	}

	h1 {
		font-size: 3em;
		color:red;
		line-height: 1.1;
		letter-spacing: -0.02em;
		margin-bottom: 0.3em;
	}

	h2 {
		font-size: 1.2em;
		line-height: 1.1;
		margin-bottom: 0.3em;
	}
    
    /* Navigation */

      ul.navigation {
		margin-top:2.5em;			
	}
								
	ul.navigation li a{
		
		font-size: 1.2em;
		color:yellow;
		font: 2em arial, sans-serif;
		font-weight: bold;
		letter-spacing: -0.001em;
		padding:.75em 4em;		
	}
						
	ul.navigation li a:hover{
		background-color:grey; 
		
	}
	
	.list{
		font-size:1.2em;
		padding:0 0 .62em .46em;	
	}
	.list li{
		margin-bottom:auto
	}
	.list li a{
		padding:1em;	
		font-size:1em;
		color:blue;
		padding:0 0 .62em .46em;
		margin:0 0 .62em .62em;	
	}    
  
	.float-left img{
		float:left;	
		margin:0  .62em .62em 0;
		width:90%;
	}
	
    
    /* Main Content */
    
    div.content{
		margin:.93em auto; 
		width:90%;
	}
				
	div.col-right{
		font-size:1.2em;
		margin:0 auto;
		padding:.93em;
		width:98%;
		}
		
	div.sidebar-left{
		font-size:1.2em;
		margin:0 auto;
		padding:.93em;
		width:98%;	
	}
	
	div#footer{
		font-size:1.2em;
		background-color:#c4d5d9;
		color:green;
		margin:0 auto;
		padding:.93em;
		text-align:center;
		width:90%;
	}	
   
}


/* Smartphones and Small Tablets*/

@media only screen and (min-width: 15em) and (max-width:50em){
    
  /* Header */

  	div#header{
		
		min-height:9.7%;	
		width:90.3%;			
  	}

	body{
		background:white;
					
	}

	h1 {
		font-size: 2.5em;
		color:red;
		line-height: 1;
		letter-spacing: -0.02em;
		margin-bottom: 0.3em;
	}

	h2 {
		font-size: 1em;
		line-height: 1;
		margin-bottom: 0.3em;
	}
    
    /* Navigation */
      ul.navigation {
		margin-top:2.5em;	
			
	}
								
	ul.navigation li a{
		
		font-size: 1.2em;
		color:yellow;
		font: 2em arial, sans-serif;
		font-weight: bold;
		letter-spacing: -0.001em;
		padding:.75em 1.8em;		
	}
						
	ul.navigation li a:hover{
		background-color:grey; 
		
	}
	
	.list{
		font-size:1.2em;
		padding:0 0 .62em .46em;	
	}
	.list li{
		margin-bottom:auto
	}
	.list li a{
		padding:1em;	
		font-size:1em;
		color:blue;
		padding:0 0 .62em .46em;
		margin:0 0 .62em .62em;	
	} 

	.float-left{
		float:center;	/* use this on an element (like an image) to make it float to the left of it's containing HTML element */
		margin:0  2em 2em 0;
		width:90%;
	}   
 
    /* Main Content */
    
    div.content{
		margin:.93em auto; 
		width:90%;
	}
				
	div.col-right{
		font-size:1.2em;
		margin:0 auto;
		padding:.93em;
		width:98%;
		}
		
	div.sidebar-left{
		font-size:1.2em;
		margin:0 auto;
		padding:.93em;
		width:98%;	
	}
	
	div#footer{
		font-size:1.2em;
		color:green;
		background-color:#c4d5d9;
		margin:0 auto;
		padding:.93em;
		text-align:center;
		width:90%;
	}	

      	/*********** Animation ***********/

	div#ani{
		width: 9.37em;
		heigh: 9.37em;
		padding: 1.56em;
		background:#ff6600;
		text-align:justify;
		position:absolute;
		top:45%;
		left:45%;
		border-radius:200px;
		transition: all ease 1s;

	}

	div#ani:hover{
		top:10%;
		background:#f00;
		box-shadow: 0 0 2.18em 0.93em #f00;
	}

	/*********** End Animation *********/
}