header, nav, main, footer, aside { display: block; }
* { box-sizing: border-box;}
body { margin:0;
       background-color: #ffffff; }
#container { background-color: #eeeeee;
             color: #006600;
             min-width: 960px;
             font-family: Verdana, Arial, sans-serif; }
header { background-color: #636631;
         background-image: url(showybg.jpg);
         background-position: bottom;
         background-repeat: repeat-x;
         height: 120px;
         color: #cc66cc;
         text-align: right;
         padding: 0 20px;
         border-bottom: 2px solid #000000; }	

.skipcontent {
   display:inline;
}
		 
nav { float: left;
      width: 150px; }
aside { float: right;
        width: 200px; }
main { margin: 0 210px 0 160px;
        padding: 1px 10px 20px 10px;
        background-color: #ffffff;
        color: #006600; }
footer { 
         background-color: #ffffff;
         padding-top: 10px;
         clear: both; }	

.footertxt {
font-size: .70em;
         text-align: center;
         color: #006600;
		 font-weight:bold;
}	
h1 { margin-top: 0;
     font-size: 3em;
     text-align: left;
     text-shadow: 2px 2px 2px #000000; }	 
header a {font-size: 0.80em; }
header a:link, header a:visited { color: #ffffff; }
header a:focus, header a:hover { color: #eeeeee; }
nav ul { margin-top: 20px;
         list-style-type: none; }
nav a { text-decoration: none;
        font-size: 1.2em; }
nav a:link { color:#006600;}
nav a:visited { color: #003300; }
nav a:focus, nav a:hover { color: #cc66cc; }
nav a:active { color: #000000;}
nav img { margin: 30px;}
.flower {display:inline;}

main p { margin: 20px; }
main h2, main h3 { color: #cc66cc;
                   background-color: #ffffff; }
.floatright { margin: 10px;
              float: right; }
aside h3 { padding-bottom: 2px;
           border-bottom: 1px solid #000000;
           margin: 10px;
           font-size: 0.90em;
		   color: #cc66cc; }
.news { font-size: 0.80em;
        margin: 10px; }	
		
	
		/* for desktop */

.tablet 	{	display: none; }
.mobile 	{	display: none; }
.desktop	{ 	display: block; }
	
@media only screen and (max-width: 1024px) {

	body {
		min-width: 500px;
	}
	
	header h1	{
		text-align: center;
		padding: .5em;
	}
	nav {
		width: 100%;
		height: 70px;
		/*text-align: center;*/
			/* centering */
		text-align: center;
		background-color: #eeeeee;
		border: 1px solid #000000;
		margin: auto;
		padding: 1.5em;	/* top and bottom */
	}
	nav a {
		font-size: 1.25em;
		padding: 2em; /* left and right */
	}
	main {
		margin-left: 0px;
		margin-top: 4em;
		padding: 1em;
	}
	.green_highlighter {
		background-color: #f8fdf7;
	}
	.pink_highlighter {
		background-color: #fff9fd;
	}	
	
	#container {
		background-color: #ffffff;
	}
	aside {
		background-color: #cccccc;
	}

			/* for tablet */
	.tablet 	{	display: block; }
	.mobile 	{	display: none; }
	.desktop	{ 	display: none; }

	
}	



@media only screen and (max-width: 768px) {
			/* for tablet */
			
	body {
		min-width: 100px;
		max-width: 768px;
	}


	header h1	{
		text-align: left;
		font-size: 2em;
		padding-top: 1.25em;
	}		
		
	nav {
		padding: 0px;
	}
	
	nav a {
		text-align: left;
		width: 100%;
		height: 30px;
		background-color: #b5deb6;
		border: 1px dotted #175116;
		font-size: 1em;
		padding-left: 2em;
		padding-top: .25em;
		padding-bottom: .25em;
		border-radius: 1px;
		display: block; 	
		margin: 0px;

	}
	nav ul { margin: 0px; padding: 0px;	}
	
	aside { float: none;
			width: 55%; 
			background-color: #ffffff; 
			border: 2px solid #175116; 
			padding: 1px 10px 20px 10px;
			margin-top: 180px;
			margin-left:	25px; 	
			margin-bottom:	25px; 				
		}
		
	main {
		width: 55%; 
		border: 2px solid #175116; 
		padding: 1px 10px 20px 10px;
		margin-left:	25px; 	
		margin-top: 0px;
		margin-bottom: 25px;
	}	

	#container {
		background-color: #eeeeee;
	}	
		
	footer {
		width: 100%;
		background-color: #175116;
		color: #ffffff;
		text-align: center; 
	}
	.footertxt {
		width: 100%;
		background-color: #175116;
		color: #ffffff;
		text-align: center; 
	}

	.tablet 	{	display: none; }
	.mobile 	{	display: block; }
	.desktop	{ 	display: none; }

}