/* みどり市　施設予約システム　ヘルプＣＳＳ (070604) */





/* コンテナー
======================================== */
#helpContainer {
	margin: 10px auto;
	width: 700px;
	text-align: left;
	font-size: small;
}

#helpContainer * {
	margin: 0px;
	padding: 0px;
}
#helpContainer h1,
#helpContainer h2,
#helpContainer h3 {
	font-size: 1em;
}

#helpContainer li {
	list-style: none;
}

#helpContainer .none {
	display: none;
}
#helpContainer .attention {
	color: #FF0000;
}
#helpContainer .asterisk {
	padding-left: 10px;
	background: transparent url("img/asterisk_rd.gif") no-repeat 0% 0.2em;
}
#helpContainer hr {
	color: #FFFFFF;
	border-bottom: 1px solid #D7D7D7;
}
#helpContainer hr.clear {
	clear: both;
}
#helpContainer .fontGR {
	color: #00B800;
	font-weight: bold;
}
#helpContainer span.imgBTN {
	margin: 0px;
	padding: 0px;
	vertical-align: -10px;
	_vertical-align: -5px;
}
#helpContainer span.imgBTN img {
	padding: 0px;
	margin: 0px 5px;
}

/* フッター
======================================== */
#helpContainer div#footer {
	padding: 3px 5px;
	color: #FFFFFF;
	text-align: right;
	font-size: 10px;
	background-color: #80D0FF;
	clear:both;
}


/* コンテンツ
======================================== */
/* ----- contents ----- */
#helpContainer div#contents {}



/*
■ トップページ　メインコンテンツ
============================================================================= */
div#helpContainer.helpTop div#contents {
	padding: 10px 5px;
	background: transparent url("img/bg_arrow.gif") no-repeat 0% 10px;
}
div#helpContainer.helpTop div#contents h2 {
	margin-bottom: 10px;
}
div#helpContainer.helpTop div#contents div#abtAki,
div#helpContainer.helpTop div#contents div#abtLogin {
	margin-top: 15px;
	margin-bottom: 30px;
	padding-left: 200px;
}

div#helpContainer.helpTop div#contents div p {
	margin-bottom: 5px;
	margin-left: 20px;
}
/* ----- レイアウト ----- */

div#helpContainer.helpTop div#contents div.nestBox {
	margin-top: 10px;
	margin-bottom: 20px;
	width: 335px;
}

div#helpContainer.helpTop div#contents div.nestBox#abtReserve {
	float: left;
}
	/* -- float解除 -- */
	div#helpContainer.helpTop div#footer {clear:left;}

div#helpContainer.helpTop div#contents div.nestBox#abtChusen,
div#helpContainer.helpTop div#contents div.nestBox#abtKakunin {
	margin-left: 350px;
}



/* ▼ 手順 -------------------------------------------------------- */
div#helpContainer.helpTop div#contents div#howto {
	border-top: 1px dotted #999;
}
div#helpContainer.helpTop div#contents div#howto p {
	margin: 10px 15px;
}

div#helpContainer.helpTop div#contents div.nestBox ul {
	margin: 10px 15px;
	padding-top: 15px;
	background: transparent url("img/ul_bg01.gif") no-repeat 0% 0%;
}

div#helpContainer.helpTop div#contents div.nestBox li {
	margin-bottom: 5px;
	height: 21px;
	font-size: 14px;
}
div#helpContainer.helpTop div#contents div.nestBox li.listEnd {
	margin: 0px;
	padding-bottom: 10px;
	background: transparent url("img/ul_bg02.gif") no-repeat 0% 100%;
}
div#helpContainer.helpTop div#contents div.nestBox li a {
	height: 18px;
	padding-left: 48px;
	margin-left: 20px;
	color: #666;
	line-height: 18px;
	display: block;
	text-decoration: none;
	background: transparent url("img/step_li.gif") no-repeat 0% 100%;
}
div#helpContainer.helpTop div#contents div.nestBox li a:hover,
div#helpContainer.helpTop div#contents div.nestBox li a:active{
	color: #003DD6;
	font-weight: bold;
	background-position: 0% 0%;
}
div#helpContainer.helpTop div#contents div.nestBox li a span {
	padding-right: 5px;
	font-weight: bold;
}



/* ----- < 空き状況照会と予約申込 > ------------------------------- */
div#helpContainer.helpTop div#contents div#abtAki {
	margin-top: 15px;
	padding-left: 200px;
}



/* ----- < ログインについて > ------------------------------------- */
div#helpContainer.helpTop div#contents div#abtLogin {}



/* ----- < 予約申込・照会の手順 > --------------------------------- */
div#helpContainer.helpTop div#contents div#abtReserve {}

div#helpContainer.helpTop div#contents div#abtReserve li.aki {
	height: 14px;
	margin-left: 15px;
	padding-left: 125px;
	font-size: 12px;
	line-height: 14px;
	color: #7D7D7D;
	background: transparent url("img/line01.gif") no-repeat 0% 5px;
}



/* ----- < 抽選予約 > --------------------------------------------- */
div#helpContainer.helpTop div#contents div#abtChusen {}

/* ----- < 予約内容確認 > ----------------------------------------- */
div#helpContainer.helpTop div#contents div#abtKakunin {}





/* コンテンツ ナビゲーション
======================================== */
div#helpContainer div#navigation {
	padding-top: 10px;
	width: 180px;
	float: left;
}

div#helpContainer div#navigation ul {
	margin-left: 0px;
}

div#helpContainer div#navigation li {
	margin: 0px 0px 5px;
	line-height: 22px;
	height: 22px;
}
div#helpContainer div#navigation li a {
	padding-left: 13px;
	color:#666;
	background: transparent url("img/arrow03_gy.gif") no-repeat 0% 50%;
	text-decoration: none;
}
div#helpContainer div#navigation li a:hover,
div#helpContainer div#navigation li a:active{
	color: #003DD6;
	background-image: url("img/arrow03_bl.gif");
}


div#helpContainer div#navigation li#homeNV a {
	padding-left: 18px;
	background: transparent url("img/arrow01_gy.gif") no-repeat 0% 50%;
}
div#helpContainer div#navigation li#homeNV  a:hover,
div#helpContainer div#navigation li#homeNV  a:active{
	background-image: url("img/arrow01_bl.gif");
}

div#helpContainer div#navigation li.here {
	padding-top: 5px;
	margin-bottom: 10px;
	height: 200px;
	border-top: 1px solid #CCC;
	border-bottom: 3px double #CCC;
}
	body#kakuninPage div#helpContainer div#navigation li.here {
		height: 60px;
	}



div#helpContainer div#navigation li.here strong {
	margin-left: 5px;
	padding-left: 20px;
	font-size: 14px;
	color:#00A1FF;
	background: transparent url("img/arrow02_bl.gif") no-repeat 0% 50%;
}

div#helpContainer div#navigation li.here ol{
	margin: 10px 0px;
}
div#helpContainer div#navigation li.here ol li a{
	padding-left: 0px;
	background:none;
}


div#helpContainer div#navigation li.here ol li a span {
	margin-left: 10px;
	padding-left: 25px;
	padding-right: 3px;
	background: transparent url("img/step_gr.gif") no-repeat 0% 50%;
}

div#helpContainer div#navigation li.here ol li.menuOn {
	background: #CCECFF url("img/arrow03_bl.gif") no-repeat 97% 50%;
}
div#helpContainer div#navigation li.here ol li.menuOn a {
	color: #003DD6;
}
div#helpContainer div#navigation li.here ol li.menuOn a:active,
div#helpContainer div#navigation li.here ol li.menuOn a:hover {
	padding-right: 0px;
	background: none;
}
div#helpContainer div#navigation li.here ol li.menuOn a span {
	color: #00A1FF;
	font-weight: bold;
	background-image: url("img/step_bl.gif");
}

div#helpContainer div#navigation li.here ol li a:active,
div#helpContainer div#navigation li.here ol li a:hover {
	padding-right: 11px;
	color: #003DD6;
	background: transparent url("img/arrow04_bl.gif") no-repeat 100% 2px;
}

/* ----- メインコンテンツ ----- */
#helpContainer div#mainContents {
	margin-left: 10px;
	padding: 10px 10px 10px 0px;
	width: 500px;
	background: transparent url("img/mainhead_bg.gif") repeat-x 0% 35px;
	float: left;
}
div#helpContainer div#mainHead {
	height: 55px;
}
#helpContainer div#mainHead h2 {
	padding-top: 5px;
	padding-left: 65px;
	width: 395px;
	height: 55px;
	color: #003DD6;
	font-size: 1.2em;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0% 0%;
	float: left;
}
#helpContainer div#mainHead h2 span {
	display: none;
}
#helpContainer div.step1#mainContents div#mainHead h2 {
	background-image: url("img/step1.gif");
}
#helpContainer div.step2#mainContents div#mainHead h2 {
	background-image: url("img/step2.gif");
}
#helpContainer div.step3#mainContents div#mainHead h2 {
	background-image: url("img/step3.gif");
}
#helpContainer div.step4#mainContents div#mainHead h2 {
	background-image: url("img/step4.gif");
}
#helpContainer div.step5#mainContents div#mainHead h2 {
	background-image: url("img/step5.gif");
}
#helpContainer div.step6#mainContents div#mainHead h2 {
	background-image: url("img/step6.gif");
}
#helpContainer div#mainHead ul.navi li {
	margin-top: 10px;
	width: 15px;
	float: left;
}
#helpContainer div#mainHead ul.navi li a {
	width: 15px;
	height: 14px;
	color: #7D7D7D;
	display: block;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0% 0%;
}
#helpContainer div#mainHead ul.navi li a:hover,
#helpContainer div#mainHead ul.navi li a:active{
	background-position: 0% 100%;
}
#helpContainer div#mainHead ul.navi li a span {
	display: none;
}
#helpContainer div#mainHead ul.navi li.backButton a {
	background-image: url("img/back.gif");
}
#helpContainer div#mainHead ul.navi li.nextButton a {
	margin-left:10px;
	background-image: url("img/next.gif");
}
#helpContainer div.noteBox {
	margin-top: 5px;
}
#helpContainer div#mainContents h3 {
	margin-bottom: 5px;
	padding: 5px;
	color: #003DD6;
	font-weight: normal;
	border-bottom: 1px dotted #ADADAD;
}
#helpContainer div#mainContents h3 span {
	padding-right: 5px;
	font-weight: bold;
	color: #00A1FF;
}

#helpContainer div#mainContents h4 {
	margin-top: 20px;
	margin-bottom: 10px;
	padding-left: 18px;
	color: #006FEB;
	font-size: 14px;
	line-height: 26px;
	border-top: 1px solid #CACACA;
	border-bottom: 1px dotted #DADADA;
	background: #F4F4F4 url("img/point01_bl.gif") no-repeat 0% 50%;
}


#helpContainer div.noteBox img {
	margin-top: 10px;
	margin-bottom: 5px;
}
#helpContainer div.noteBox p {
	padding: 0px 5px;
	line-height: 1.5em;
}

	
/* -- 手順 -- */
#helpContainer div.noteBox {}


#helpContainer div.noteBox div.noteText {
	margin-top: 10px;
	padding-left: 30px;
	padding-bottom: 10px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0% 0%;
}
#helpContainer div.noteBox div.noteText#noOR1 {
	background-image: url("img/or01.gif");
}
#helpContainer div.noteBox div.noteText#noOR2 {
	background-image: url("img/or02.gif");
}
#helpContainer div.noteBox div.noteText#noOR3 {
	background-image: url("img/or03.gif");
}
#helpContainer div.noteBox div.noteText#noOR4 {
	background-image: url("img/or04.gif");
}
#helpContainer div.noteBox div.noteText#noOR5 {
	background-image: url("img/or05.gif");
}
#helpContainer div.noteBox div.noteText#noOR6 {
	background-image: url("img/or05.gif");
}

#helpContainer div.noteBox div.noteText img.sampleIMG {
	margin-top: 0px;
	border: 1px solid #000000;
	float: right;
}
#helpContainer div.noteBox div.noteText p {
	width: 220px;
}

#helpContainer div.noteBox p.asterisk {
	padding-left: 10px;
	background-position: 0% 0.5em;
}

#helpContainer p.nextButton {
	text-align: right;
}
#helpContainer p.nextButton a {
	padding-right: 20px;
	background: transparent url("img/next.gif") no-repeat 100% 0%;
}