@charset "utf-8";

/* --------------------------------------------

Common

-------------------------------------------- */
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
}



/* --------------------------------------------

header

-------------------------------------------- */
header {}

	#globalHeader {
		background: #000000;
		padding: 15px 20px;
		height: 38px;
	}
		#globalHeader h1 { margin: 0;}

	#contentHeader {
		height: 30px;
		padding: 15px 20px;
		border-bottom: 4px solid #c51230;
	}
		#contentHeader h2 { margin: 5px 0 0; font-size: 20px; float: left;}
		#contentHeader h2 a { text-decoration: none; color: #838383; }
		#contentHeader h2 span { color: #c51230; }
	
	#backSupportTop {
		width: 188px;
		height: 22px;
		margin: 3px 0 0;
		padding: 2px;
		background: #f4f4f4;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		border-radius: 50px;
		float: right;
	}
		#backSupportTop a { font-size: 12px; color: #666666; text-decoration: none; }
		#backSupportTop a:hover { color: #c51230; }
		#backSupportTop a:before { content: url("images/back.png"); margin: 0 4px; position: relative; top: 3px;}

	#breadCrumb {
		background: #eeeeee;
		height: 12px;
		padding: 4px 20px;
		font-size: 10px;
	}
		#breadCrumb span { margin: 0 8px; }
		#breadCrumb a { color: #666666; text-decoration: none; }
		#breadCrumb a:hover { color: #c51230; text-decoration: underline; }

	#articleHeader {
		height: 20px;
		padding: 15px 20px;
		/* box-shadow */
		box-shadow: 0px 9px 12px -3px rgba(102, 102, 102, 0.13);
		-webkit-box-shadow: 0px 9px 12px -3px rgba(102, 102, 102, 0.13);
		-moz-box-shadow: 0px 9px 16px -2px rgba(102, 102, 102, 0.13);
	}
		#articleHeader h3 { margin: 0; font-weight: normal; }



/* --------------------------------------------

Content

-------------------------------------------- */
#content { padding: 20px; }
	#content h3 { color: #c51230; }
	#content h5 { font-size: 16px; margin: 0; }
	#content { line-height: 1.5em; }

#content1 { padding: 20px; }
	#content1 h3 { color: #c51230; }
	#content1 h5 { font-size: 16px; margin: 0; }
	#content1 { line-height: 0.5em; }


.guidance { height: 142px; margin: 0 0 20px;}
	.guidance img { float: left; }
	.guidance div { float: left; width: 600px; margin: 0 28px; }
	.guidance h3 { margin: 16px 0;}
	.guidance p { line-height: 1.8em; }

.selectButton { clear: left; }
	.selectButton ul { padding: 0px; list-style: none; }
		.selectButton li { float: left; margin: 0 12px 12px 0; width: 600px; height: 88px; border: 1px solid #999999; background: #eeeeee; display: }
		.selectButton li:hover { border: 1px solid #c51230; background: #fff5f7; }
	.selectButton a { text-decoration: none; color: #000000; width: 600px; display: block; }
	.selectButton a:hover { color: #c51230; }
	.selectButton img { float: left; margin: -12px 20px 0 0; }
	.sectionButton div { float: left; }
		.selectButton div h4 { margin: 12px 0 0 16px; }
		.selectButton div p { font-size: 12px; margin: 6px 0 0 16px; line-height: 1.2em; color: #666666!important;　}

.troubleshoot h4, 
.connection h4, 
.common h4, 
.setup h4 {
	font-size: 18px; color: #c51230; padding: 0 8px 8px; border-bottom: 2px solid #c51230; text-align: left;
}

.connection { margin-right: 48px; width: 800px; text-align: center; }
	.connection div { padding: 0 20px; }
	.connection img { border:1px solid #767676; }
	.connection ul { text-align: left; list-style: none; padding-left: 20px; }
	.connection ol { text-align: left; }
		.connection li { margin-bottom: 20px; }
		.aBlue:before { content:"A"; color: #fff; background: #3e64f0; padding: 5px 8px; margin-right: 8px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
		.bBlue:before { content:"B"; color: #fff; background: #3e64f0; padding: 5px 8px; margin-right: 8px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
		.cBlue:before { content:"C"; color: #fff; background: #3e64f0; padding: 5px 8px; margin-right: 8px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
		.dBlue:before { content:"D"; color: #fff; background: #3e64f0; padding: 5px 8px; margin-right: 8px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
		.bYellow:before { content:"B"; color: #fff; background: #ffcc00; padding: 5px 8px; margin-right: 8px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
		.cYellow:before { content:"C"; color: #fff; background: #ffcc00; padding: 5px 8px; margin-right: 8px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

.setup { width: 800px; }
	.setup li { margin-bottom: 12px; }

.common { width: 800px; margin-right: 48px; }
	.common div { padding: 0 20px; }
	.common ul { margin: 0 0 28px; padding: 0 28px; }
	.common li { line-height: 1.8em; }
	.common ol li { margin-bottom: 12px; }

.troubleshoot { float: left; margin-right: 48px; width: 800px; }
	.troubleshoot div { padding: 0 20px; }

.acordion {}
	.acordion dt { color: #3e64f0; display: block; cursor: pointer; margin-top: 18px;}
	.acordion dt:hover { text-decoration: underline; }
	.acordion dd { margin: 0; padding: 8px; background: #f4f4f4; line-height: 22px; display: none; }
		.acordion dd ul { padding-left: 28px; }

.important { font-size: 12px; padding: 16px; background: #fff5f7; }
	.important:before { content:"IMPORTANT: "; font-weight: bold; }

.note { font-size: 12px; margin: 0 0 20px; padding: 8px 16px!important; background: #f4f4f4; }
	.note:before { content:"NOTES: "; font-weigh: bold; }

.tips:before { content:"Tips: "; font-weight: bold;}

/* --------------------------------------------

Footer

-------------------------------------------- */
#footer {
	clear: both;
	width: 100%;
	text-align: center;
	height: 34px;
	padding-top : 14px;
	background-color: #eee;
}



/* --------------------------------------------

Style

-------------------------------------------- */
.fleft { float: left; }
.tleft { text-align: left; }
.mt24 { margin-top: 24px; }
.mt28 { margin-top: 28px; }
.mt44 { margin-top: 44px; }
.w100 { width: 100%;}



