/* www.mamiawamura.com
 * --------------------------------------------------------------------------------------------------
 * commun.css - Define the CSS for commun atributes
 * --------------------------------------------------------------------------------------------------
 */
/* --------------------------------------------------------------------------------------------------
 * Definition of the commun styly of all pages
 * --------------------------------------------------------------------------------------------------
 */
/* Centralize the layout on the web browser*/
#all {
  width: 1208px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Remove borders of the images used as link */
img {
  float: left;
  border-width: 0px;
}

table {
  border-collapse: collapse;  
}

/* Background picture - Dimension 5 x 697 px */
body {
  background-image: url(pictures/main/mamiawamura-main01_01.gif);
  background-repeat: repeat-x;
  background-color: white;
  margin: 0px;
  padding: 0px;
}

/* Picture with name (Mami Awamura) on the top of the page - Dimension 220 x 50 px */
#pictureNameMamiAwamura {
  position: absolute;
  top: 120px; /*Positin picture 120px from the top border of the screen */
  left: 383px; /*Position the picture 383px from the left border of the screen*/
  width: 220px; /*Width of the picture */
  height: 50px; /*Height of the picture */
}

/* Picture with email (Mami Awamura) on the bottom of the page - Dimension 220 x 30 px */
#pictureEmailMamiAwamura {
  position: absolute;
  top: 665px; /*Positin picture 665px from the top border of the screen */
  left: 383px; /*Position the picture 383px from the left border of the screen*/
  width: 220px; /*Width of the picture */
  height: 30px; /*Height of the picture */
}

/* Class used to hide the pictures that will be preloaded */
.hiddenPic {
  display:none;
}


/* Defines the navigation bar block */
#navigationBarTitle {
  position: absolute;
  top: 287px; /* Value to adjust the height on the middle of the page */
  left: 0px;
  width: 360px; /*Width of the main picture */
  height: 23px; /*Heigh of the main picture*/
  background-color: white; /*Background of the area defined above */
}

#navigationBar {
  position: absolute;
  top: 310px; /* Value to adjust the height on the middle of the page */
  left: 0px;
  width: 360px; /*Width of the main picture */
  height: 253px; /*Heigh of the main picture x 11 */
  background-color: white; /*Background of the area defined above */
}

#navigationBarAbout {
  position: absolute;
  top: 563px; /* Value to adjust the height on the middle of the page */
  left: 0px;
  width: 360px; /*Width of the main picture */
  height: 23px; /*Heigh of the main picture*/
  background-color: white; /*Background of the area defined above */
}

a.itemOne {
	display: block;
	width: 360px;
	height: 23px;
	background: url(pictures/main/CP_both.gif) no-repeat 0 0;
  overflow: hidden;
  text-indent: -10000px;
  font-size: 0px;
  line-height: 0px;
}
a:hover.itemOne {
	background-position: 0 -23px;
}

a.itemTwo {
	display: block;
	width: 360px;
	height: 23px;
	background: url(pictures/main/CC_both.gif) no-repeat 0 0;
  overflow: hidden;   
  text-indent: -10000px;   
  font-size: 0px;   
  line-height: 0px;   
}
a:hover.itemTwo {
	background-position: 0 -23px;
}

a.itemThree {
	display: block;
	width: 360px;
	height: 23px;
	background: url(pictures/main/HD_both.gif) no-repeat 0 0;
  overflow: hidden;   
  text-indent: -10000px;   
  font-size: 0px;   
  line-height: 0px;   
}
a:hover.itemThree {
	background-position: 0 -23px;
}

a.itemFour {
	display: block;
	width: 360px;
	height: 23px;
	background: url(pictures/main/FM_both.gif) no-repeat 0 0;
  overflow: hidden;   
  text-indent: -10000px;   
  font-size: 0px;   
  line-height: 0px;   
}
a:hover.itemFour {
	background-position: 0 -23px;
}

a.itemFive {
	display: block;
	width: 360px;
	height: 23px;
	background: url(pictures/main/FF_both.gif) no-repeat 0 0;
  overflow: hidden;   
  text-indent: -10000px;   
  font-size: 0px;   
  line-height: 0px;   
}
a:hover.itemFive {
	background-position: 0 -23px;
}

a.itemSix {
	display: block;
	width: 360px;
	height: 23px;
	background: url(pictures/main/FFR_both.gif) no-repeat 0 0;
  overflow: hidden;   
  text-indent: -10000px;   
  font-size: 0px;   
  line-height: 0px;   
}
a:hover.itemSix {
	background-position: 0 -23px;
}

a.itemSeven {
	display: block;
	width: 360px;
	height: 23px;
	background: url(pictures/main/MTG_both.gif) no-repeat 0 0;
  overflow: hidden;   
  text-indent: -10000px;   
  font-size: 0px;   
  line-height: 0px;   
}
a:hover.itemSeven {
	background-position: 0 -23px;
}

a.itemEight {
	display: block;
	width: 360px;
	height: 23px;
	background: url(pictures/main/ZP_both.gif) no-repeat 0 0;
  overflow: hidden;   
  text-indent: -10000px;   
  font-size: 0px;   
  line-height: 0px;   
}
a:hover.itemEight {
	background-position: 0 -23px;
}

a.itemNine {
	display: block;
	width: 360px;
	height: 23px;
	background: url(pictures/main/Id_both.gif) no-repeat 0 0;
  overflow: hidden;   
  text-indent: -10000px;   
  font-size: 0px;   
  line-height: 0px;   
}
a:hover.itemNine {
	background-position: 0 -23px;
}

a.itemTen {
	display: block;
	width: 360px;
	height: 23px;
	background: url(pictures/main/Inv_both.gif) no-repeat 0 0;
  overflow: hidden;   
  text-indent: -10000px;   
  font-size: 0px;   
  line-height: 0px;   
}
a:hover.itemTen {
	background-position: 0 -23px;
}

a.itemEleven {
	display: block;
	width: 360px;
	height: 23px;
	background: url(pictures/main/about_both.gif) no-repeat 0 0;
  overflow: hidden;   
  text-indent: -10000px;   
  font-size: 0px;   
  line-height: 0px;   
}
a:hover.itemEleven {
	background-position: 0 -23px;
}


/* Defines the navigation arrows */
#navigationArrows {
  position: absolute;
  top: 580px;
  left: 1060px;
  width: 34px;
  height: 23px;
}
a.navigationArrowLeft {
	display: block;
	width: 17px;
	height: 23px;
	background: url(pictures/main/arrows_left.gif) no-repeat 0 0;
  overflow: hidden;   
  text-indent: -10000px;   
  font-size: 0px;   
  line-height: 0px;   
}
a:hover.navigationArrowLeft {
	background-position: 0 -23px;
}
a.navigationArrowRight {
	display: block;
	width: 17px;
	height: 23px;
	background: url(pictures/main/arrows_right.gif) no-repeat 0 0;
  overflow: hidden;   
  text-indent: -10000px;   
  font-size: 0px;   
  line-height: 0px;   
}
a:hover.navigationArrowRight {
	background-position: 0 -23px;
}


/* --------------------------------------------------------------------------------------------------
 * END
 * --------------------------------------------------------------------------------------------------
 */