/* CSS reset - best to start from scratch */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	
}

ol, ul, li{
	list-style: none;
}

/***************************************************
 these tags below have to be declared as block level elements
for browsers to render them (E.g - bloody IE!)
****************************************************/

header, nav, footer, section {
	
	display: block;	
	
}

/**********************/

body {

	background:url("shrewback.jpg");
background-color: yellow;	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;	
}
#wrapper{
	margin:0 auto;
	width: 1200px;
	height: auto;
	
}	

h1 { /* position:absolute; margin-left:150px; margin-top:20px; display:inline;*/color:blue; background:transparent; font-size:50px; font-weight:bold; font-family:"Splendid", "Monotype Corsiva","Arial";  }
h2 { /* position:absolute; margin-left:130px; display:inline; */  color:blue; background:transparent; font-size:50px; font-weight:bold; font-family:"Splendid", "Monotype Corsiva","Arial";  }
h3 {text-align:center; color:blue; background:transparent; font-size:50px; line-height:170%; font-family:"Splendid", "Monotype Corsiva","Arial";}
h4{margin-top:0px; margin-bottom:0px; text-align:left; color:blue; background:transparent; font-size:30px; font-family:"Splendid", "Monotype Corsiva","Arial"; line-height:150%;}
h5 {/*position:absolute; margin-left:180px;display:inline;*/   color:#847308; background:transparent; font-size:20px; font-family: "Splendid","Monotype Corsiva","Arial";  }
p {margin-top:10px; margin-bottom:0px; text-align:justify;color:blue;background:transparent; font-size:24px; line-height:100%;  font-family: "Splendid","Monotype Corsiva","Arial"}

#header{
margin: 40px 30px 40px 30px;

		
height:130px; 
background-color: yellow; 

border-style:groove; 
border-width:10px; 
border-color:blue; }

.head1 {  text-align:center; margin-top:15px; }
.head2 {text-align:center; margin-top:5px;}
#flag {float:left; height:110px; margin-top:10px;  margin-left:10px;border-style:solid; border-width:1px;}
#logo  {float:right; width:100px; height:110px; /*display:inline;*/ margin-top:10px;  margin-right:10px;}
#words {
	float: left; margin-top:120px; margin-left:100px;}
aside {
	float: right;
	height: auto;
	width: 450px;
	margin: 15px 50px 0px 0; 
	display:inline;
}
#thumb1 {margin-right:10px; margin-left:0px; margin-top:90px; border-style:solid; border-width:1.5px;
}
#thumb2 {margin-right:10px; margin-left:10px; margin-top:90px; border-style:solid; border-width:1.5px; 
}
#thumb3 {margin-right:10px; margin-left:0px; margin-top:20px; margin-bottom:40px; border-style:solid; border-width:1.5px;
}
#thumb4{margin-right:10px; margin-left:10px; margin-top:20px; margin-bottom:40px; border-style:solid; border-width:1.5px;
}
#foot{
margin-left:100px;
margin-top:30px;
margin-bottom:70px;
}



footer {
	clear:both;
	width:1200px;
	height:75px;
	}
	
nav {
		margin-left:		20px;
		margin-right:		20px;
	}	
nav ul {
		margin:				0 20px 0 75px;
		padding:			0;
	}	
nav ul li {
		list-style:			none;
		margin:				20px;
		padding:			10px;
		float:				left;
	}
nav ul li a {
		text-decoration: 	none;
		font: 				18px 'Droid Sans', sans-serif;
		font-weight: 		bold;
		
		text-shadow: 		rgba(255,255,255,.5) 0 1px 0;
		
		-webkit-transition:all .1s ease-in-out;
		
        -moz-transition: 	all .1s ease-in-out;
		
         transition: 	all .1s ease-in-out;
		
		padding: 			.5em 1.2em .4em 1.2em;
		display: 			inline-block;	
		
		/* effects */
		border-top: 		1px solid rgba(255,255,255,0.8);
		border-bottom: 		1px solid rgba(0,0,0,0.1);

		
		background: 		-webkit-gradient(radial, 50%, 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) ));
		background: 		-moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
		background: 		gradient(radial, 50%, 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) ));
		-webkit-transition: all .1s ease-in-out;
		-moz-transition: 	all .1s ease-in-out;
		transition: 		all .1s ease-in-out;
		
		/* color */
		color: 				blue  ! important;
		background-color: 	yellow;
	
		-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(166,166,166,0.15) 0 -0.3em .3em,
						hsl(0, 0%, 65%) 0 .1em 3px, hsl(0, 0%, 45%) 0 -.3em 1px, 
						rgba(166,166,166,0.9) 0 -.3em 5px; 
		-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(166,166,166,0.15) 0 -0.3em .3em,
						hsl(0, 0%, 65%) 0 .1em 3px, hsl(0, 0%, 45%) 0 -.3em 1px, 
						rgba(166,166,166,0.9) 0 -.3em 5px; 
		box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(166,166,166,0.15) 0 -0.3em .3em, 
						hsl(0, 0%, 65%) 0 .1em 3px,	hsl(0, 0%, 10%) 0 .1em 3px, 
						rgba(166,166,166,0.9) 0 -.3em 5px;
	}
	nav ul li a:hover {	

		-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(166,166,166,0.2) 0 -0.1em .3em,  
								rgba(166,166,166,0.9) 0 0em 0px; 
		-moz-box-shadow: 	inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(166,166,166,0.2) 0 -0.1em .3em,  
								rgba(166,166,166,0.9) 0 .2em 6px;
	     box-shadow: 		inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(166,166,166,0.2) 0 -0.1em .3em,  
								rgba(166,166,166,0.9) 0 .2em 6px; 

		-webkit-transform: 	translateY(-.3em);
		-moz-transform: 	translateY(-.3em);
		transform: 			translateY(-.3em);
	}
	.current {
			
		border-bottom: 		5px solid rgba(248,55,14,0.7);
}	


.words-left {width:500px; float: left;
margin:40px 0 0 30px;
border:5px; border-style:groove; border-color:blue; padding:10px 15px 10px 10px; background:yellow;
-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.picr {
float:right; width:520px;
display:inline; margin:40px 30px 0px 0px; background:yellow;
font-size:20px; font-family:"Splendid", "Monotype Corsiva","Arial"; text-align:center; color:blue;
border:5px;  border-style:groove; border-color:blue; padding:0px 0px 5px 0px;

    -moz-border-radius-bottomright:  20px;
    border-bottom-right-radius:  20px;
	 -moz-border-radius-bottomleft:  20px;
    border-bottom-left-radius:  20px;
}
.words-right {width:500px; float: right;
margin:40px 30px 0px 0px;
border:5px; border-style:groove; border-color:blue; padding:10px 15px 10px 10px; background:yellow;
-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.picl{
float:left; width:520px;
display:inline; margin:40px 0px 0px 30px; background:yellow;
font-size:20px; font-family:"Splendid", "Monotype Corsiva","Arial"; text-align:center; color:blue;
border:5px;  border-style:groove; border-color:blue; padding:0px 0px 5px 0px;
-moz-border-radius-bottomright:  20px;
    border-bottom-right-radius:  20px;
	 -moz-border-radius-bottomleft:  20px;
    border-bottom-left-radius:  20px;
}
.picrport {
float:right;  width:390px; 
display:inline; margin:40px 100px 0 0px; background:yellow;
font-size:20px; font-family:"Splendid", "Monotype Corsiva","Arial"; text-align:center; color:blue;
border:5px;  border-style:groove; border-color:blue; padding:0px 0px 5px 0px;

    -moz-border-radius-bottomright:  20px;
    border-bottom-right-radius:  20px;
	 -moz-border-radius-bottomleft:  20px;
    border-bottom-left-radius:  20px;
}
.piclport{
float:left; width:390px;
display:inline; margin:40px 0px 0 100px; background:yellow;
font-size:20px; font-family:"Splendid", "Monotype Corsiva","Arial"; text-align:center; color:blue;
border:5px;  border-style:groove; border-color:blue; padding:0px 0px 5px 0px;
-moz-border-radius-bottomright:  20px;
    border-bottom-right-radius:  20px;
	 -moz-border-radius-bottomleft:  20px;
    border-bottom-left-radius:  20px;
}