*{margin:0; padding:0;border:0; outline:0;}

/*references the universal selector which calls all tags as once and assings no space values to all tags therfore stripping out browser's default spacing config*/ 

body{background:#f5f5f5; color:darkgrey; font-family:tahoma; padding: 0 102.5px}
/* selects window an dassigns a text style that will be inherited by all child elements on site until they overwrite the parent's specification*/

#header{height:80px; background:#222;}
/*selects a header section by id and assigns a height, note no WIDTH to conteiner so section runs accross broweser's width by default*/

#wrapper{width:960px; height:600px; margin:0 auto; border-right:1px solid black; border-left:1px solid black; color:green; font-family:temp;} 

#wrapper p{font-size:25px;} 

#left{width:259px; float:left; min-height:440px; border-right:1px solid black; padding:30px 30px 30px 30px;}

#centre{width:259px; float:left; min-height:440px; border-right:1px solid black; padding:30px 30px 30px 30px;}

#right{width:260px; float:right; min-height:440px; padding:30px;}
/* all colomns must add to the paretnt's width and height when you assign padding and border values to this section these values must be substracted from these sections's original width and height ao all values add up to the parent's width/ height(wrapper)*/

#bottom{background:#ccc; min-height:40px; clear:both; padding:30px; text-align:center; }
/* the float behaviour gets adopted in a sibling to sibling relationship if you assign a float to a container within the same parent, the next conteiner will adopt a float by default so you must clear it if you dont want to float. use the creal property alognside the value of left rihgt or both. the left value clears theleft or right float*/

#header h1{color:hotpink;font-family:temp;}
/*selects only the h1 tag inside this stated id through specificity*/ 

#footer{height:70px; background:#1b3379; text-align:center; padding-top:20px;}
/*assigns a text style that is inherited by the child elements inside this container (text-align)*/

#footer a:link{color:#fff;}
#footer a:visited{color:#fff;}
#footer a:hover{color:white;}
#footer a:active{color:red;}

/* SLOGAN SECTION*/

.sloganHolder{height:50px; background:#333;}
/* selects holder for backgroynd style by class*/

#slogan{width:960px; margin:0 auto;}
/*selects sloga section inside its holder by id and assings it a width to  match the wrapper's width so all info starts at  same horizontal line. we centre the sectiopn in the miidle of its holder with margin:0 auto*/

#slogan h2{color:white; padding:10px;}
/*selects only the h2 tag inside the slogan id through specificity.*/

/*NAVIGATION*/

#mainNav{width:960px; margin:0 auto; padding-top:20px; font-family: 'Indie Flower', cursive;}
/*selects navigation section inside the header section and centers it in the middle of this section with margin:0 auto;*/

.menu, .menu li, .menu a{display:block;}
/*HTML5 specific rule that strips out extra space and styles from containers that render extra space and styles in HTML5 tags. Normally you'd list all html tags in a list in the begging of the document to ensure that all tags that render this extra scace and styles remove these default styles with this declaration*/

/*.menu li {list-style:none}*/

.menu li{float:left; border-right:1px solid #ccc; line-height:15px;}
/*selects all li tags inside the classed 'menu' uln list and stacks them left with float. make sure you always place the border on the li tag not the a tag as a tags carry usability styles*/

.menu a{padding:8px 30px; color:white; text-decoration:none;}
/*sellects all tags inside the 'menu' ul classed list and adds space between content of tag and border with padding. removes unerline from all a tags with text-decoration noone*/

.menu a:visited{color:lightblue;}

.menu a:hover{color:hotpink;}
/*on the hover over the a tags we switch the text color from white to hotpink using a pseudo class*/

.menu a:active{color:red;}

.menu li:last-child{border-right:0;}
/*selects the last li tag within the classed 'menu' ul list using the 'last-child' pseudo class ansdd rhe bordwer right spec only on this last li tag container*/

.menu li:first-child> a {padding:8px 30px 8px 15px;}
/*  selects fist li tag's direct child <a> container using this'>' direct child selector and assigns a different padding value on this container than other <a> tags*/

.dropdown {}
.dropdown ul {}
.dropdown li {}
/*SITEMAP*/

.sitemapHolder{height:200px; background:#444; font-family: 'Indie Flower', cursive;}
/* selects f5f5f5holder by class for background style*/

#sitemap{width:960px; margin:0 auto; padding-top:60px;}
/*selects sitemap secrtion by id inside its holder and centres it with margin:0 auto*/

.sitemapUL{width:180px; float:left; margin-right:20px; margin-left:40;}
/*selects all ul lists by class in a group and stacks them left of its parent. we risize the 4 ul lists to add up to the 960 width and subtract the added margin values from each of the widths*/

.sitemapUL li{list-style:none;}
/*removes the bullet points from all of the list items inside this classed list*/

.sitemapUL a:link{color:white; text-decoration:none;}

.sitemapUL a:visited{color:lightblue;}

.sitemapUL a:hover{color:hotpink; text-decoration:underline;}

.sitemapUL a:active{color:red;}


/*FONT AWESOME*/

.fa{font-size:x-large !important; color:#fff;}
/*you can ignore the cascade and the order of the rules or source file and apply a syle regardless of this order using important declaration*/

/*img{width:50px; height:50px;}*/

/**** Navigation ****/
.navbar {overflow: hidden;background-color: #1b3379;font-family: Arial;}
.navbar a {float: left;font-size: 16px;color:#e6836d;text-align: center;padding: 14px 16px;text-decoration: none;}
.dropdown {float: left;overflow: hidden;}
.dropdown .dropbtn {font-size: 16px; border: none;outline: none;color: #e6836d;padding: 9px 16px;background-color: inherit;}
.navbar a:hover, .dropdown:hover .dropbtn {background-color: #111e5b;}
.dropdown-content {display: none;position: absolute;background-color:  #fff;min-width: 160px;	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}
.dropdown-content a {float: none;color: #1b3379;padding: 12px 16px;text-decoration: none;display: block;text-align: left;}
.dropdown-content a:hover {	background-color: #e6836d;}
.dropdown:hover .dropdown-content {display: block;}
/**** end Navigation ****/

/* Main Content */
.main{  background-image:  url('../images/logo.png');
	background-size:     contain;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;
	/* opacity: 0.5; */
	margin: 10px 0px; 
	height: auto;  
	padding:50px 40px 50px 40px; 
	background-color: #d9e6f2;
	background-repeat: no-repeat; 
	color:#000066;
	font-weight: normal;
	font-size: 120%;
	line-height: 150%; }
.main ul, .main ol {margin-left:20px;}
.main h3 {margin-bottom:10px}
/*.main li{list-style:circle;}*/

/* visited link */

th {
    text-align: left;
	font-weight:normal;
}