p
{
text-align: justify;	
}



#container
{
width:1024px;
margin: 0 auto; 
}



#header
{
height:128px;
width:1024px;
background-color:#077e82;
float:left;
}

#header ul
{
/*specify here a width for a horizontal menu at fixed measure*/
list-style:none;/*1. remove the default list bullets*/
overflow:hidden;/*2. method to avoid that the background of the div container collapse with floated elements*/
/*width:100%;/*3. in relation to the above method, for Internet Explorer 6, we need to specify a width of 100%*/
margin:0;/*4. margin value to null – needed for Internet Explorer*/
padding:0px; /*5. a space (padding) of 1 px between the list border and its content*/
background-color:#077e82;/*6. the background color of the menu*/
/*border:1px solid #437E7E;/*7. a border of 1px around the menu*/
}

#header li
{
display:inline;
}

#header a
{
display:block;/*1. convert the link from inline to block element so that we can next specify width/height*/
float:left;/*2. the float left that will align the links horizontally*/
/*3. a fixed width for al the links*/
width:481px;/*for links adaptable in width to its text content, using padding-right without the width*/
height:128px;/*4. the height*/
/*margin-left:1px;/*5. an empty space to the left ofz	 each link*/
padding-left:15px;/*6. and a left space (padding) between the border and the text link*/
padding-right:15px;
background-color:#077e82;/*7. background color of the links*/
border-right:1px solid #015b66;/*8. a left border of 10px*/
/*font-family:arial;/*9. the font family*/
font-size:32px;/*10. the font size*/
/*text-transform:uppercase;/*11. convert the font to capital letter*/
text-decoration:none;/*12. remove the text underline added by default to the links*/
color:#FFFFFF;/*13. the color of the text links*/
line-height:120px;/*14. vertical align of the text link (value equal to the height)*/
font-weight:normal;
text-align: center;
}

#header a:hover
{
background-color:#015b66;
}



#content
{
background-color:#EEEEEE;
height:586px;
overflow: auto;
width:984px;
padding-left:20px;
padding-right:20px;
float:left;
}



#footer
{
background-color:#077e82;
float:left;
height:27px;
width:1024px;
}

#footer ul
{
/*specify here a width for a horizontal menu at fixed measure*/
list-style:none;/*1. remove the default list bullets*/
overflow:hidden;/*2. method to avoid that the background of the div container collapse with floated elements*/
/*width:100%;/*3. in relation to the above method, for Internet Explorer 6, we need to specify a width of 100%*/
margin:0;/*4. margin value to null – needed for Internet Explorer*/
padding:0px; /*5. a space (padding) of 1 px between the list border and its content*/
background-color:#077e82;/*6. the background color of the menu*/
/*border:1px solid #437E7E;/*7. a border of 1px around the menu*/
}

#footer li
{
display:inline;
}

#footer a
{
display:block;/*1. convert the link from inline to block element so that we can next specify width/height*/
float:right;/*2. the float left that will align the links horizontally*/
/*3. a fixed width for al the links*/
/*width:160px;/*for links adaptable in width to its text content, using padding-right without the width*/
height:27px;/*4. the height*/
/*margin-left:1px;/*5. an empty space to the left of each link*/
padding-left:15px;/*6. and a left space (padding) between the border and the text link*/
padding-right:15px;
background-color:#077e82;/*7. background color of the links*/
border-right:1px solid #015b66;/*8. a left border of 10px*/
/*font-family:arial;/*9. the font family*/
/*font-size:10px;/*10. the font size*/
/*text-transform:uppercase;/*11. convert the font to capital letter*/
text-decoration:none;/*12. remove the text underline added by default to the links*/
color:#FFFFFF;/*13. the color of the text links*/
line-height:27px;/*14. vertical align of the text link (value equal to the height)*/
font-weight:normal;
}

#footer a:hover
{
background-color:#015b66;
}