@charset "utf-8";

/*
#######################################

	INTERVIEW CSS

#######################################
*/

html,body {
	height:100%;
	background-color: #000;
}

body {
	font: 12px/160% "Lucida Grande", 'メイリオ', Meiryo, sans-serif;
	padding: 20px 0 20px 0;
	color: #333;
}
/* IE6*/
* html body {
	letter-spacing: 1px;
	vertical-align:baseline;
	font: 12px Verdana, "MS P ゴシック", sans-serif;
}

/* IE7*/
*:first-child+html body { 
	font: 12px 'メイリオ', Meiryo, sans-serif;
}

h1 {
	/*15px */
	font-size:137%;
	margin:0 0 30px 0;
}
h2 {
	/*14px*/
	font-size:127%;
	margin:25px 0 15px 25px;
}
h3 {
	/*13px*/
	font-size:118%;
}

ol, ul, dl {
	/*bringing lists on to the page with breathing room */
	margin-left:2em;
}
ol li {
	/*giving OL's LIs generated numbers*/
	list-style: decimal outside;
}
ul li {
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
}

a {
	color: #FFF;
	text-decoration: none;
}

a:focus{
	outline:none;
}

p {
	line-height: 180%;
}
p.note {
	font-size: 90%;
}


/* ------------------------------------
  Layout
------------------------------------ */
#container {
	width: 950px;
	margin: 0 auto;
}
#header {
	margin: 0;
	padding: 0;
}
#mainContents {
	width: 950px;
}
#footer {
	clear: both;
	margin: 15px 0 0 0;
	padding: 0;
}



/* ------------------------------------
  Header Area
------------------------------------ */
.headerLogo {
	margin: 0 0 10px 0;
	float: left;
}
.metrocsHeaderLogo {
	width: 152px;
	height: 40px;
}

/* ------------------------------------
  Global Navigation
------------------------------------ */
#navigation {
	margin: 0;
	padding: 0;
}
.nav {
	margin: 0;
	padding: 0;
	text-indent: -9999px;
}
.nav ul {
	margin: 0;
	padding: 0;
}
.nav li {
	margin: 0;
	float:left;
	list-style: none;
}
.nav a {
	display: block;
	height: 48px;
	background:url(../image/common/nav.png);
}
#episodeOne a {
	width: 237px;
}
#episodeTwo a {
	width: 237px;
	background-position: -237px 0;
}
#episodeThree a {
	width: 237px;
	background-position: -474px -0;
}
#episodeFour a {
	width: 239px;
	background-position: -711px 0;
}
#episodeOne a:hover, #episodeOne a.this {
	background-position: 0 -48px;
}
#episodeTwo a:hover, #episodeTwo a.this {
	background-position: -237px -48px;
}
#episodeThree a:hover, #episodeThree a.this {
	background-position: -474px -48px;
}
#episodeFour a:hover, #episodeFour a.this {
	background-position: -711px -48px;
}


/* ------------------------------------
  Breadcrumb List
------------------------------------ */
#breadcrumb {
	padding: 6px 0 6px 10px;
	background-color: #000;
	color: #CCC;
	font-size: 11px;
}
#breadcrumb a {
	text-decoration: none;
}


/* ------------------------------------
  UL Navigation
------------------------------------ */
.ulHorizontally {
	margin: 0;
	padding: 0;
}
.ulHorizontally li {
	float: left;
	list-style-type: none;
}
.ulHorizontally li img {
	vertical-align: top;
}


/* ------------------------------------
  Footer Contents
------------------------------------ */
#footerNav {
	margin: 0 0 20px 0;
	width: 950px;
}
#footerNav a {
	text-decoration: none;
}
#footerNav a:hover {
	text-decoration: underline;
}
#footerNav ul {
	margin: 0 0 0 0;
}
.footerLink li a {
	margin: 0 5px 0 0;
	padding: 0 10px 0 0;
	border-right: 1px solid #666;
	color: #666;
}
#copyright {
	clear: both;
	text-align: left;
	color: #666;
}


/* ------------------------------------
  Fonts
------------------------------------ */
.tRed {
	color: #E2000F;
}
.tOrange {
	color: #FFCC00;
}
.tBlue {
	color: #0066FF;
}
.tBeige {
	color: #D6BA94;
}
.tBold {
	font-weight: bold;
}
.tNormal {
	font-weight: normal;
}


/* ------------------------------------
  Various
------------------------------------ */
.noticeBox {
	border: 3px solid #999;
	padding: 30px;
	text-align: center;
}
.tDecoNone {
}
.tDecoNone li {
	text-decoration: none;
}

.separateLine {
	clear: both;
	border: none;
	border-top: 1px solid #CCC;
	height: 1px;
	margin: 10px 0;
}
.markerTriangleList li a {
	background:url(../img/icon/triangle.png) no-repeat left center;
	padding-left: 6px;
	margin-right: 6px;
}
.markerTriangle {
	background:url(../img/icon/triangle.png) no-repeat left center;
	padding-left: 6px;
	margin-right: 6px;
}

.lineTop {
	border-top: 1px solid #CCC;
}
.lineBtm {
	border-bottom: 1px solid #CCC;
}
.textDecoNone {
	text-decoration: none !important;
}
.borderNone {
	border: none !important;
}
.borderNoneR {
	border-right: none !important;
}
.listStyleNone {
	margin: 0;
}
.listStyleNone li {
	list-style: none outside;
}
.listStyleNone li img {
	vertical-align: top;
}
.textC {
	text-align: center;
}
.textR {
	text-align: right !important;
}
.textL {
	text-align: left !important;
}
.mgn0 {
	margin: 0 0 0 0 !important;
}
.mgnTop0 {
	margin-top: 0 !important;
}
.mgnTop5 {
	margin-top: 5px !important;
}
.mgnTop15 {
	margin-top: 15px !important;
}
.mgnTop30 {
	margin-top: 30px !important;
}
.mgnTop60 {
	margin-top: 60px !important;
}
.mgnTop300 {
	margin-top: 300px !important;
}
.mgnL20 {
	margin-left: 20px !important;
}
.mgnR0 {
	margin-right: 0 !important;
}
.mgnR10 {
	margin-right: 10px !important;
}
.mgnR20 {
	margin-right: 20px !important;
}
.mgnBtm5 {
	margin-bottom: 5px !important;
}
.mgnBtm7 {
	margin-bottom: 7px !important;
}
.mgnBtm10 {
	margin-bottom: 10px !important;
}
.mgnBtm15 {
	margin-bottom: 15px !important;
}
.mgnBtm20 {
	margin-bottom: 20px !important;
}
.mgnBtm30 {
	margin-bottom: 30px !important;
}
.mgnBtm60 {
	margin-bottom: 60px !important;
}
.pdgTop20 {
	padding-top: 20px !important;
}
.clear {
	clear: both;
}
.floatL {
	float: left;
}
.floatR {
	float: right;
}

.valignMdl {
	vertical-align: middle;
}
.letSpace1em {
	letter-spacing: 1em;
}


/* clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
	* html .clearfix { /* IE6 */
		zoom: 1;
	}
	*:first-child+html .clearfix { /* IE7 */
		zoom: 1;
	}