/*HTML*/
html{
	background-color: #A4A4A4;
	font-family: sans-serif;
}

html.JR_East{
	background-color: #0B8E0E;
}

html.JR_Kyushu{
	background-color: #FF0000;
}

html.Kanto{
	background-color: #87EF79;
}

html.Tobu{
	background-color: #005BAC;
}

html.Tokyo_Metro{
	background-color: #00ADDC;
}

/*Container*/
.container{
	margin: -1% 15% 0% 15%;
	background-color: #FFF;
	padding: 1%;
	border-right: solid 2px #E6E6E6;
	border-left: solid 2px #E6E6E6;
	height: 100%;
	width: 70%;
	position: relative;
}

/*Navigatie Balk*/
ul#nav{
	list-style: none;
	font-weight: bold;
	float: left;
	width: 100%;
	position: absolute;
	margin: 0;
	background: #FA5858;
	width: auto;
	padding: 0;
}

#nav li{
	float: left;
	position: relative;
	list-style: none;
	z-index: 999;
	margin: 0;
}


#nav a{
	display: block;
	padding: 5px;
	color: #000;
	text-decoration: none;
	padding: 7px;
}


#nav a:hover{
	color: #000;
	background-color: #FA5858;
	text-decoration: none;
}

#nav ul{
	list-style: none;
	position: absolute;
	display: none;
}

#nav ul li{
	padding-top: 1px;
	float: none;
}

#nav li ul li{
	z-index: 0;
	width: 150%;
}

#nav li:hover ul{
	display: block;
	padding: 0px;
}

#nav li:hover a{
	background: #82FA58;
	text-decoration: none;
}
#nav li:hover ul a{
	text-decoration: none;
}
#nav li:hover ul li a:hover{ 
	background: #FA5858;
}

#nav li:hover ul li{
	display: block;
}

/*Sidebar*/
#sidebar{
	float: left;
	position: fixed;
	z-index: 9999;
	width: 200px;
	margin: 10% 0 0 -1%;
	opacity: 0.95;
	padding: 0;
}

#sidebar ul{
	margin-left: -15%;
}

#sidebar li{
	list-style: none;
	background-color: #FFF;
	margin-left: 0;
	padding: 3px;
}

#sidebar li:hover{
	background-color: #DDD;
}

#sidebar a:hover{
	text-decoration: none;
}

.active{
	font-weight: bold;
}

/*Website Content*/
a{
	color: #000;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

div.content{
	margin: 0% 5% 5% 3%;
	font-size: 98.3%;
}

ul.content{
	/*margin-top: 0%;
	margin-left: -2%;*/
	display: block;
}

ul.content li{
	list-style: none;
	/*border-top: 1px solid #D8D8D8;
	border-bottom: 1px solid #D8D8D8;*/
}

ul.content li a{
	color: black;
	text-decoration: none;
}

ul.content#metro li a{
	vertical-align: -webkit-baseline-middle;
}

ul.content li a:hover{
	color: black;
	text-decoration: underline;
}

ul.content li a:active{
	color: black;
	text-decoration: none;
}

#prefecture_item{
	float: left;
	margin: 1%;
	display: flex;
	flex-wrap: wrap;
	/*border: 1px solid #000;*/
}

#prefecture_box{
	display: table;
	width: 100%;
}

.color{
	height: 50%;
	width: 50%;
	border: 1px solid #000;
}

.ginza{
	height: 30px;
	width: 30px;
	background: url("../../../IMG/Tokyo-Metro_Letter-Strip-Small_30px.gif") 0 0;
	display: inline-block;
}

.marunouchi{
	height: 30px;
	width: 30px;
	background: url("../../../IMG/Tokyo-Metro_Letter-Strip-Small_30px.gif") 270px 0;
	display: inline-block;
}

.marunouchi_branch{
		height: 30px;
	width: 30px;
	background: url("../../../IMG/Tokyo-Metro_Letter-Strip-Small_30px.gif") 240px 0;
	display: inline-block;
}

.hibiya{
	height: 30px;
	width: 30px;
	background: url("../../../IMG/Tokyo-Metro_Letter-Strip-Small_30px.gif") 210px 0;
	display: inline-block;
}

.tozai{
	height: 30px;
	width: 30px;
	background: url("../../../IMG/Tokyo-Metro_Letter-Strip-Small_30px.gif") 180px 0;
	display: inline-block;
}

.chiyoda{
	height: 30px;
	width: 30px;
	background: url("../../../IMG/Tokyo-Metro_Letter-Strip-Small_30px.gif") 150px 0;
	display: inline-block;
}

.yurakucho{
	height: 30px;
	width: 30px;
	background: url("../../../IMG/Tokyo-Metro_Letter-Strip-Small_30px.gif") 120px 0;
	display: inline-block;
}

.hanzomon{
	height: 30px;
	width: 30px;
	background: url("../../../IMG/Tokyo-Metro_Letter-Strip-Small_30px.gif") 90px 0;
	display: inline-block;
}

.namboku{
	height: 30px;
	width: 30px;
	background: url("../../../IMG/Tokyo-Metro_Letter-Strip-Small_30px.gif") 60px 0;
	display: inline-block;
}

.fukutoshin{
	height: 30px;
	width: 30px;
	background: url("../../../IMG/Tokyo-Metro_Letter-Strip-Small_30px.gif") 30px 0;
	display: inline-block;
}


li.metro{
	height: 30px;
}

img.up{
	width: 25px;
	margin: 1px 1px -5px 2px;
}

.top{
	position: fixed;
	z-index: 9999;
	margin: 1% 0 0 95%;
}

.normal{
	font-size: 100%;
	font-weight: normal;
}

h2{
	padding-top: 1%;
	margin: 0% 0% -0.1%;
	font-size: 125%;
}

h2.metro{
	vertical-align: -webkit-baseline-middle;
}

p{
	font-size: 105%
}

ul.content-ul{
	margin-left: -2%;
	list-style: disc;
}

	/*Table*/

	.img{
		float: right;
		margin: 3% 2% 2% 2%;
		border: 1px solid #ccc;
		clear: right;
		padding: 3px;
		background-color: #f9f9f9;
		text-align: center;
		overflow: hidden;
		width: 300px;
	}

	.table_name{
		margin-bottom: 1%;
		padding: 1%;
		font-size: larger;
	}
		/*JR_East-Table*/
		#table_yamanote{
			border-top: 5px solid #9ACD32;
			border-bottom: 5px solid #9ACD32;
		}

		#table_keihin-tohoku{
			border-top: 5px solid #00BFFF;
			border-bottom: 5px solid #00BFFF;
		}

		#table_chuo_rapid{
			border-top: 5px solid #FE642E;
			border-bottom: 5px solid #FE642E;
		}

		#table_chuo-sobu{
			border-top: 5px solid #FFD400;
			border-bottom: 5px solid #FFD400;
		}

		#table_saikyo{
			border-top: 5px solid #2E8B57;
			border-bottom: 5px solid #2E8B57;
		}

		/*Tobu-Table*/
		#table_isesaki{
			border-top: 5px solid #FF0000;
			border-bottom: 5px solid #FF0000;
		}

		#table_skytree{
			border-top: 5px solid #1E90FF;
			border-bottom: 5px solid #1E90FF;
		}

		#table_urban_park{
			border-top: 5px solid #00BFFF;
			border-bottom: 5px solid #00BFFF;
		}

		#table_nikko{
			border-top: 5px solid #FFA500;
			border-bottom: 5px solid #FFA500;
		}
		
		/*Tokyo_Metro-Table*/
		#table_ginza{
			border-top: 5px solid #FFA500;
			border-bottom: 5px solid #FFA500;
		}

		#table_marunouchi{
			border-top: 5px solid #FF0000;
			border-bottom: 5px solid #FF0000;
		}

		#table_hibiya{
			border-top: 5px solid #C0C0C0;
			border-bottom: 5px solid #C0C0C0;
		}

		#table_tozai{
			border-top: 5px solid #00A7DB;
			border-bottom: 5px solid #00A7DB;
		}

		#table_chiyoda{
			border-top: 5px solid #009944;
			border-bottom: 5px solid #009944;
		}

		#table_yurakucho{
			border-top: 5px solid #DAA520;
			border-bottom: 5px solid #DAA520;
		}

		#table_hanzomon{
			border-top: 5px solid #9370DB;
			border-bottom: 5px solid #9370DB;
		}

		#table_namboku{
			border-top: 5px solid #48D1CC;
			border-bottom: 5px solid #48D1CC;
		}

		#table_fukutoshin{
			border-top: 5px solid #8B4513;
			border-bottom: 5px solid #8B4513;
		}

/*Rolling Stock*/

.img-rolling_stock{
	float: left;
	margin: 3% 2% 2% 2%;
	border: 1px solid #ccc;
	clear: right;
	padding: 3px;
	background-color: #f9f9f9;
	text-align: center;
	overflow: hidden;
	width: 150px;
}

.rolling_stock{
	display: flex;
	flex-wrap: wrap;
}

/*Table Outlook*/

.title{
	background-color: lightgrey;
}

.table{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.table_info{
	font-size: 90%;
	padding: 5px;
	text-align: center;
	width: 45%;
}

.station_table{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: 5%;
	width: 50%;
	text-align: center;
}

.station_table#chuo_rapid_station{
	width: 75%;
}

.station_table_info{
	padding: 5px;
	text-align: center;
	border-top: 1px solid #B2B2B2;
	border-bottom: 1px solid #B2B2B2;
}

.station_table_info a{
	color: #000;
	text-decoration: none;
}

.station_table_info a:hover{
	text-decoration: underline;
}

	/*JR East*/
	.station_table#yamanote_station .station_table_info{
		width: 40%;
	}

	.station_table#keihin-tohoku_station .station_table_info{
		width: 30%;
	}

	.station_table#chuo_rapid_station .station_table_info{
		width: 10%;
	}

	.station_table#chuo-sobu_station .station_table_info{
		width: 40%;
	}

/*Links*/

.intext{
	color: black;
	text-decoration: none;
}

.intext:hover{
	color: black;
	text-decoration: underline;
}

.intext:active{
	color: black;
	text-decoration: none;
}

video{
	width: 50%;
}

audio{
	margin: 1% 0 0 0;
}

/*Mobile Portrait*/
@media screen and (max-device-width: 375px) {
	#nav{
		z-index: 999 !important;
	}
	#nav li{
		float: none !important;
		position: static !important;
	}

	.container{
		margin: -2% 9% 0% 8% !important;
		width: 80% !important;
	}

	div.content{
		margin: 50% 5% 5% 3% !important;
	}

	ul.content{
		margin-left: -15% !important;
	}

	.img{
		margin: 8% 1% 5% -3%!important;
		width: 235px !important;
		float: inherit;
	}

	.img-rolling_stock{
		float: left;
		margin: 3% 2% 2% 2%;
		border: 1px solid #ccc;
		clear: right;
		padding: 3px;
		background-color: #f9f9f9;
		text-align: center;
		overflow: hidden;
		width: 200px !important;
	}

	img{
		width: 100% !important;
	}

	.metro img{
	width: 50px !important;
	margin: 0% 0 -7% 0 !important;
	}


	img.up{
		width: 25px !important;
	}

	.top{
		margin: 1% 0 0 88% !important;
	}

	#metro .metro img{
	margin: 7% 0 -8% 0 !important;
	}

	h1{
		font-size: 165% !important;
	}

	h2{
		font-size: 141% !important;
		margin: 15% 0 0 -2% !important;
	}

	h2.east{
		font-size: 130% !important;
	}

	#marunouchi .line img{
		margin: 0 0% -0% 0 !important;
	}

	#marunouchi .line img.small{
		margin: 0 12% 0% 0 !important;
	}

	#metro .metro{
		font-size: 115%;
	}

	video{
		width: 100% !important;
	}

	audio{
		width: 112%;
		margin: 0 0 0 -5%;
	}
}