@import url("base.css");

/*====================================================
------------------------------------------------------
	�� structure.css ��
------------------------------------------------------
====================================================*/

/*================= contents menu ============

	1: base
		- body
		- [pageID]

---area = flame---

	2: -areaA(header)
			- h1
			- .logo
			- .contactBt 07_Contact
			- .globalNavi
				- #gN00	index.shtml
				- #gN01	01_Toilet
				- #gN02	02_ToiletUnitA
				- #gN03	03_ToiletUnitB
				- #gN04	04_Faq
				- #gN05	05_OderForm


	3: -areaB(topSwf)


	4: -areaC(space)--non


	5: -areaD(main)
			- swfCont
				- h2
				- p
			- h3
			- dl.news
			- .pageTop


	6: -areaE(foots)
			- .footLink
			- .copy

	7: -etc
			- .pmOr(list)
			- .pmBlue(list)
			- .pmGr(list)
			- .pmGray(list)




============================================== */



/*====================================================
	1: - base
====================================================*/

body { background: url(../c_img/bodyBg.gif) #fff repeat-x; margin: 0;}


/*====================================================
	2: -areaA(header)
====================================================*/
#areaA { width: 800px; height: 120px; background: url(../c_img/areaABg.gif) no-repeat; margin: 0 auto; padding: 0; position: relative;}

h1 { height: 25px; color: #999; padding-left: 10px;}

/* enbridge */
h1 strong	{
	font-weight:normal;
}

.logo a { display: block; width: 440px; height: 35px; background: url(../c_img/logoDown.gif) no-repeat; margin: 0 0 0 10px;}
.logo a:hover { background-color: #fff; /* IE6�p */}
.logo a:hover img { visibility: hidden; }


.contactBt a { display: block; width: 125px; height: 25px; background: url(../c_img/contactBtDown.gif) no-repeat 0 0; position: absolute; top: 35px; left: 665px;}
.contactBt a:hover {background-color: #fff; /* IE6�p */}
.contactBt a:hover img { visibility: hidden; }
#contact .contactBt img { visibility: hidden; }

#areaA ul { display: block; width: 780px; height: 50px; list-style-type: none; background: url(../c_img/globalNavi.gif) no-repeat; margin: 0 auto; position: relative;}
#areaA ul:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
/*\*//*/
     #areaA ul {
         display: inline-table;
     }
 /**/
#areaA ul a { float: left; display: block;}
#areaA ul li { display: block; text-indent: -9876em; overflow:hidden;}
/*\*//*/
 overflow:auto;
/**/

#areaA ul li#gN00 { width: 60px; height: 50px; position:absolute; top: 0; left: 0px;}
#areaA ul li#gN01 { width: 130px; height: 50px; position:absolute; top: 0; left: 60px;}
#areaA ul li#gN02 { width: 145px; height: 50px; position:absolute; top: 0; left: 190px;}
#areaA ul li#gN03 { width: 160px; height: 50px; position:absolute; top: 0; left: 335px;}
#areaA ul li#gN04 { width: 160px; height: 50px; position:absolute; top: 0; left: 495px;}
#areaA ul li#gN05 { width: 125px; height: 50px; position:absolute; top: 0; left: 655px;}

#areaA ul li#gN00 a { width: 60px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat 0 0;}
#areaA ul li#gN01 a { width: 130px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat -60px 0;}
#areaA ul li#gN02 a { width: 145px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat -190px 0;}
#areaA ul li#gN03 a { width: 160px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat -335px 0;}
#areaA ul li#gN04 a { width: 160px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat -495px 0;}
#areaA ul li#gN05 a { width: 125px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat -655px 0;}

#areaA ul li#gN00 a:hover { width: 60px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat 0 -50px;}
#areaA ul li#gN01 a:hover { width: 130px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat -60px -50px;}
#areaA ul li#gN02 a:hover { width: 145px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat -190px -50px;}
#areaA ul li#gN03 a:hover { width: 160px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat -335px -50px;}
#areaA ul li#gN04 a:hover { width: 160px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat -495px -50px;}
#areaA ul li#gN05 a:hover { width: 125px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat -655px -50px;}

#top #areaA ul li#gN00 a { width: 60px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat 0 -50px;}
#toilet #areaA ul li#gN01 a { width: 130px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat -60px -50px;}
#toiletUnitA #areaA ul li#gN02 a { width: 145px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat -190px -50px;}
#toiletUnitB #areaA ul li#gN03 a { width: 160px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat -335px -50px;}
#faq #areaA ul li#gN04 a { width: 160px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat -495px -50px;}
#orderForm #areaA ul li#gN05 a { width: 125px; height: 50px; background: transparent url(../c_img/globalNavi.gif) no-repeat -655px -50px;}



/*====================================================
	3: -areaB(topSwf)
====================================================*/
#areaB { width: 920px; height: 445px; background: url(../img/areaTopBBg.gif) no-repeat; margin: 0 auto; }

#topSwf { width: 800px; height: 445px; background: url(../img/topSwfBg.jpg) no-repeat; margin: 0 auto;}
.swfCont { width: 430px; padding: 3em 0 0 10px; margin: 0 10px 0 auto;}
h2 { font-size: 130%; font-weight: bold; margin: 0 0 .5em 0;}
.swfCont p { width: 90%; padding: 0 0 2em 3em;}


/*====================================================
	4: -areaC(space)
====================================================*/



/*====================================================
	5: -areaD(mainContents)
====================================================*/
#areaD { width: 798px; border-bottom: 1px solid #666; border-left: 1px solid #666; border-right: 1px solid #666; margin: 0 auto; padding: 0 0 70px 0; position: relative;}
#areaD:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
/*\*//*/
     #areaD {
         display: inline-table;
     }
 /**/



h3 { width: 800px; height: 25px; background: url(../img/h3_00.gif) no-repeat; text-indent: -9876em; margin: 0 auto;}
dl.news { padding: 1em 0 5px 30px ; text-align: left;}
dl.news:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
/*\*//*/
    dl.news {
         display: inline-table;
     }
 /**/
dl.news dt { float: left; width: 10em; background: url(../c_img/pmOr.gif) no-repeat 0 .5em; padding: 0 0 0 1.5em; font-weight: bold; color: #333333;}
dl.news dd { margin: 0 0 1em 12em; padding: 0 0 0 1em; border-left: 1px solid #003366; }

.pageTop a { display: block; width: 235px; height: 30px; background: url(../c_img/pageTopDown.gif) no-repeat 0 0; position: absolute; bottom: 25px; right: 9px;}
.pageTop a:hover {background-color: #fff; /* IE6�p */}
.pageTop a:hover img { visibility: hidden; }

/*====================================================
	6: -areaE(footer)
====================================================*/
#areaE { width: 780px; margin: 0 auto; font-size: 85%;}

ul.footLink { width: 750px; margin: 15px auto; color: #003366; text-align: center;}
ul.footLink li.first { display: inline; padding: 0 10px; border: none;}
ul.footLink li { display: inline; padding: 0 10px; border-left: 1px solid #003366;}

.copy { width: 780px; display: block; color: #666666; text-align: left; margin: 30px auto; font-size: 130%; line-height: 150%; color: #333; }
.copy a { font-size: 120%; }
.copy a:link { color: #333; text-decoration: none;}
.copy a:visited { color: #333; text-decoration: none;}
.copy a:hover	{ color: #FF8C00;}
.copy a:active { color: #FF8C00;}