/* CSS Document */

body {
margin: 0;
padding: 0;
background: #000000 url(../images/background_final.jpg) 0 0 no-repeat;
}

/* set the size of the definition list <dl> and add the background image 
#imap {
  display:block; 
  width:439px; 
  height:606px; 
  background:url(menu.png) no-repeat; 
  position:relative;
  left: 550px;
  top: 0px;
  }
  */
 
#imap {
  display:block; 
  width:439px; 
  height:606px; 
  background:url(../images/menu.png) no-repeat; 
  position:relative;
  left: 650px;
  top: 0px;
  }

  
  /* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {
  display:block; 
  width:439px; 
  height:0; 
  padding-top:606px; 
  overflow:hidden; 
  position:absolute; 
  left:0; 
  top:0; 
  background:transparent url(../images/menu_hover.png) no-repeat 500px 400px; 
  cursor:default;
  }
/* the hack for IE pre IE6 */
* html #imap a#title {
  height:240px;
  he\ight:0;
  }

/* the <dt><a> hover style to move the background image to position 0 0 */
#imap a#title:hover {
  background-position: 0 0; 
  z-index:10;
  }
  
  /* place the <dd>s in the correct absolute position */
#imap dd {
  position:absolute; 
  padding:0; 
  margin:0;
  }
#imap #blogpic {
  left:17px; 
  top:105px; 
  z-index:20;
  }
#imap #fatherlosspic {
  left:120px;
  top:78px;
  z-index:20;
  }
#imap #documentarypic {
  left:115px; 
  top:150px; 
  z-index:20;
  }
#imap #journeypic {
  left:320px; 
  top:126px; 
  z-index:20;
  }
#imap #solutionpic {
  left:222px; 
  top:268px; 
  z-index:20;
  }  
  #shoplink {
  left:222px; 
  top:268px; 
  z-index:20;
  }  
  
  /* style the <dd><a> links physical size and the background image for the hover */
  
  #imap a#bloglink {
  display:block; 
  width:105px; 
  height:78px; 
  background:transparent url(../images/blog_hover.gif) no-repeat -100px -100px; 
  text-decoration:none; 
  z-index:20;
  }
  
  #imap a#solutionlink{
  display:block; 
  width:149px; 
  height:148px; 
  background:transparent url(../images/solution_hover.gif) no-repeat -200px -200px; 
  text-decoration:none; 
  z-index:20;
  }
  
#imap a#documentarylink{
  display:block; 
  width:200px; 
  height:80px; 
  background:transparent url(../images/documentary_hover.gif) no-repeat -200px -200px; 
  text-decoration:none; 
  z-index:20;
  }
  
#imap a#journeylink{
  display:block; 
  width:89px; 
  height:99px; 
  background:transparent url(../images/journey_hover.gif) no-repeat -200px -200px; 
  text-decoration:none; 
  z-index:20;
  }

#imap a#fatherlosslink{
  display:block; 
  width:111px; 
  height:100px; 
  background:transparent url(../images/fatherloss_hover.gif) no-repeat -200px -200px; 
  text-decoration:none; 
  z-index:20;
  }
  
  a#shoplink{
  display:block; 
  width:111px; 
  height:30px; 
  background:transparent url(../images/fatherloss_hover.gif) no-repeat -200px -200px; 
  text-decoration:none; 
  z-index:20;
  }
  

  /* move the link background image to position 0 0 when hovered 
#imap a#bloglink:hover, #imap a#solutionlink:hover, #imap a#documentarylink:hover, #imap a#journeylink:hover, #imap a#fatherlosslink:hover {
 background-position:0 0; 
  }
  */
  
  /* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {
  display:none;
  }
  
  /* define the common styling for the span text */
#imap a:hover span {
  position:absolute;  
  width:388px; 
  display:block; 
  font-family:arial; 
  font-size:12px; 
  background:#fff; 
  color:#000; 
  border:1px solid #000; 
  padding:5px;
  }
/* the hack for IE pre IE6 */
* html #imap a:hover span {
  width:400px; w\idth:388px;
  }
  
  /* move the span text to a common position at the bottom of the image map */
#imap a#bloglink:hover span {
  left:-450px; 
  top:350px;
  }
  
  #imap a#documentarylink:hover span {
  left:-548px; 
  top:305px;
  }
  
#imap a#fatherlosslink:hover span {
  left:-553px; 
  top:379px;
  }
  
#imap a#journeylink:hover span {
  left:-753px; 
  top:331px;
  }

#imap a#solutionlink:hover span {
  left:-655px; 
  top:189px;
  }
  
  /* add the style for the link span text - first line */
#imap a span:first-line {
  font-weight:bold; 
  font-style:italic;
  }
  
#brand {
background: url(../images/uyiosa_logo.png) 0px 0px no-repeat;
height: 120px; width: 500px;
position: absolute; top: 100px; left: 10px;
}

#brand span {
position: absolute;
left: -50em;
width: 50em;
}

#main_text {
	position: absolute;
	top: 180px;
	left: 65px;
}

#main_text h2 {
	position:relative;
	text-align: center;
}

#blog_text {
	position: absolute;
	top: 20px;
	left: 20px;
}

#journey_text {
/*	position: relative;
	top: -20px;
	left: 20px;*/
	position: absolute;
	top: 20px;
	left: 20px;
}

#fatherloss_text {
	position: absolute;
	top: 20px;
	left: 20px;
}

#solution_text {
	position: absolute;
	top: 20px;
	left: 20px;
}


#documentary_text {
	position: absolute;
	top: 50px;
	left: 20px;
}

#section_title {
	position: absolute;
	top: 150px;
	left: 200px;
}

#documentary_title {
	position: absolute;
	top: 150px;
	left: 185px;
}

#journey_title {
	position: absolute;
	top: 150px;
	left: 225px;
}

#fatherloss_title {
	position: absolute;
	top: 150px;
	left: 85px;
}

#solution_title {
	position: absolute;
	top: 155px;
	left: 90px;
}

#blog_title {
	position: absolute;
	top: 150px;
	left: 225px;
}

#brand p {
position: absolute;
top: 85px;
left: 5px;
font-family:Arial, Helvetica, sans-serif;
font-weight: 900;
}

#menu {
background: url(../images/right_corner.jpg) 0px 0px no-repeat;
position: absolute; top: 0px; left: 428px; width: 400px; height: 400px;
}
/*#menu ul {margin: 0;}*/

#menu a {
font-family: "Lucida Grande", sans-serif;
position: absolute;
left: -50em;
width: 50em;
}

/*#contactlink {
font-family: "Lucida Grande", sans-serif;
position: absolute;
left: 500px;
width:800px;
*display: block;
}*/


#right_box {
background: url(../images/right_box.jpg) 0px 0px no-repeat;
position: absolute; top: 325px; left: 453px; width: 400px; height: 400px;
}

#right_box h2 {
position: relative;
/*top: 5px;*/
left: 50px;
font-family:Arial, Helvetica, sans-serif;
font-weight: 900;
text-align: center;
}

#right_box ul {
font-family:Arial, Helvetica, sans-serif;
font-weight: 100;
color: white;
position: relative;
width: 250px;
font-size: 12px;
font-weight: 500;
}

.continuation {
position: relative;
left: 215px;
font-size: 12px;
color: #FFFFFF;
}

#compact_info {
font-family:Arial, Helvetica, sans-serif;
font-weight: 100;
color: red;
position: relative;
left: 0px;
top: 550px;
width: 800px;
font-size:9px;
}

#compact_info ul {
float: left;
width: 100%
margin: 0;
/*padding: 10px 0 0 46px;*/
list-style: none;
}

#compact_info li {
float: left;
margin: 0;
padding: 0;
font-family: "Lucida Grande", sans-serif;
}

#compact_info a {
float: left;
/*display: block; */
margin: 0 1px 0 0;
padding: 1px 2px;
color: #FFFFFF;
text-decoration: none;
font-family: "Lucida Grande", sans-serif;
}

form#mailinglist {
	position: absolute;
	top: 350px;
	left: 100px;
}

span#mailinglist {
	position: absolute;
	top: 350px;
	left: 100px;
}