body {  background-image: url(images/trees.png); /*sets background image behind wrapper*/
		font-family: Verdana, Arial, sans-serif; /* sets font typeface */
		font-size: 1.0em; /*sets font size of text */
		color: #000000; /* sets font color to black */
		
	  }
#wrapper { 	width: 80%; /*sets width of main website area to 80% of the screen size*/
			margin: 0 auto; /* left and right margin auto centers content in wrapper */
			/*min-width: 860px;*/ max-width: 1024px; /*sets the minimum and maximum width of the wrapper*/
			background-color: #ccff66; /* sets background wrapper color to yellow green*/
			border: 1px ridge #330033; /* sets wrapper border 1 pixel with ridges*/
            border-radius: 10px; /* ch4 - makes corners of wrapper rounded */
            box-shadow: 5px 5px 5px #828282; /* ch 4 - creates dark gray drop shadow effect on wrapper border */
            overflow: hidden; /*causes extra column height to be hidden*/
          }  
header, nav, #rightcol, #tcolright, #middle, footer { display: block; } /* ch6 - makes compatible with most old browsers */

header { background-color: #99cc66; /* sets background wrapper color to green */
		 background-image: url(images/picasso.png); /*displays image in background of header */
         background-position: right; /*displays image on right side of header */
         background-repeat: no-repeat; /* only displays image once */
         border-top-right-radius: 10px; /* ch4 - makes upper right corner rounded */
	     border-top-left-radius: 10px; /* ch4 - makes upper left corner rounded */
	     padding: 5px 10px; 
	     color: #ccff99; /* sets heading 1 font color to white */
		 border-bottom: 10px; /* ch6 - prevents Internet Display issue */
		 		 }
h3 { text-align: center; } /*centers text*/
nav { float: left; /*floats to left of right column */
	  width: 156px; /* sets width of right navigation column to 155 pixels */
	  margin-top: 0; /* elimates top margin */
	   }

nav ul { list-style-type: none; /*ch6 - to not display the list marker */
	     margin: 0; /* removes browser default settings */
		 padding: 0; /* removes browser default settings */
}

nav a { text-decoration: none; /*ch6 - eliminates underlining of hyperlink */ 
		display: block; /*ch6 allows the web page visitor to click anywhere on the anchor button to activate hyperlink*/
		border-bottom: 1px solid #ffff99; /*adds an off white border to separate the links */
		padding: 20px 15px; /* adds padding to make area all around text a link */
}

nav a:link, nav a:visited { color: #666633; } /* ch6 -default text color for nav unvisited link is brown */
nav a:hover { color: #ffff99; /* ch 6 -color changes to off white when hovering over link */
	          background-color: #666633; /*sets color to brown when hovering over navigation links*/
		      font-weight: bold; /* ch6 - text is bold while hovering over link */
}
#rightcol { margin-left: 157px; /* right column begins a few pixels after the left column ends */
	        margin-bottom: 0 ;
	        margin-top: 0;
		    background-color: #ffffff; /*right column color is white*/
		    padding: 0 10px 10px 20px; /*no padding on top of right column, but need padding on sides and bottom */
		    border-bottom-right-radius: 10px; /* ch4 - makes bottom corner rounded */
	        box-shadow: 5px 5px 5px #828282; /* ch 4 - creates dark gray drop shadow effect on wrapper border */
		    overflow: hidden; /*helps hide overflow of right column*/
}
#tcolright { float: right; /*ch7 - column floats to the right of the main column */
        width: 405px; /*sets width of right column in 3 column page */
        padding: 1px 10px 99999px 10px; /*large pixel bottom of 99999 helps with aligning left, right, and middle columns */
        background-color: #ffffff; /*background color of right column in 3 column page is set to  white */
        }
#middle { margin: 0 415px 0 157px; /* ch7 - This is start of middle column of three column page */
           padding: 1px 10px 99999px 10px; /*large pixel bottom of 99999 helps with aligning left, right, and middle columns */
           background-color: #ffffff; /*background color of middle column in 3 column page is set to  white */
}
nav, #tcolright, #middle { margin-bottom: -99999px; } /*helps with making column heights equal*/

.center { margin: auto; /*centers content */
          width: 40%; }
.name { font-style: italic;  }

 table { width: 500px; /* Ch 8 - sets with of table*/
             border: 3px solid #339999; /*table border is solid blue line*/
             margin: auto; /*centers table*/
      }
 caption { font-weight: bold; } /*table title is set to bold font*/
 thead { background-color: #99ffff } /*header background is light blue*/
 tbody td { border-top: 1px solid #339999; /*each cell has a top solid blue thin border */
                padding: .2em; /*sets padding in cell*/
     }
#pic { float: left; /*ch 6 - chameleon picture floats to the left of the paragraphs*/
       margin: 0 5px 0 5px; /*sets top and bottom margins to 0 and right and left margins to 5 px*/
       border: 1px solid #99ffff; /*adds 1 px solid blue border around image */
	} 

.clearleft { clear: left; } /*ch 6 - clears the left float*/
.clearright { clear: right; } /*ch 6 - clears the right float*/
footer { text-align: center; /*centers text*/
         font-size: .70em; /*small font size for footer */
         clear: both; /*clears floats */
  }

/*@media only screen allows for easier viewing on tablets */ 
@media only all and (min-width: 769px) and (max-width: 1024px) { 
	body { margin: 0; }/* ch7 media query sets body margin to 0 for mobile devices */	    
	#wrapper { width: auto; } /* ch7 media query sets wrapper to auto for mobile devices */
	}
	p { font-size: 90%; } /*font size reduced to allow more words on page*/	 
/*@media only screen allows for easier viewing on phones */
@media only all and (max-width: 768px) { 
	body { margin: 0; /* ch7 media query sets body margin to 0 for mobile devices */
		   		  }
	#wrapper { width: auto; } /* ch7 media query sets wrapper to auto for mobile devices */
	header { background-image: none; /*do not diplay background image as it will overlap with header text */
		     margin: 0; /* ch7 - no margin on mobile device */
			 width: auto; /*ch7- width set to auto rather than a set width for smaller devices */
			 padding: 1px; /*ch7 - padding is reduced for mobile device */
			 font-size: 55%; } /*ch7- header font-size reduced for mobile device */
	nav li { display: block; } /*ch7 - navigation set for block display instead of in a horizontal line for mobile device viewing */
	nav a { display: block; /*ch7 - navigation set for block display instead of in a horizontal line for mobile device viewing */
		    padding: 0.5em 0; /* ch 7 -padding is reduced for mobile devices */
		    border-bottom: 2px ridge #333333; } /* ch 7-adds a line at the bottom of each navigation page link to show separation of links on mobile device */
    background-image { display: none; } /* ch 7- do not diplay background image in mobile device */
    nav, #rightcol, #tcolright, #middle, footer  { float: none; /* ch7- no floats to make columns align into one */
                                 				   margin: 0; /*ch 7- margin set to 0 for columns on multiple device */
    				             				   padding: 1px; /* ch 7 -padding is reduced for mobile devices */
    				                               text-align: left; /* text aligned to left for viewing on mobile device */
    				                               width: auto; } /* width automatically adjusts on mobile device */
    figure, table, .center { margin-right: 0; /* margins left and right changed to 0 so that it no longer centers */
    	            margin-left: 0;
                    text-align: left; } /* text aligned to left for viewing on mobile device */
    p { font-size: 90%; } /*font size reduced to allow more words on page*/        
    h1, h3 { text-align: left; } /* text aligned to left for viewing on mobile device */
}