/* Running In Japan */
/* Wayne Joness HTML5 Final Project */
@font-face {
    font-family: 'gongnormal';
    src: url('gongn___-webfont.eot');
    src: url('gongn___-webfont.eot?#iefix') format('embedded-opentype'),
         url('gongn___-webfont.woff') format('woff'),
         url('gongn___-webfont.ttf') format('truetype'),
         url('gongn___-webfont.svg#gongnormal') format('svg');
    font-weight: normal;
    font-style: normal;
}


#single-div{
	position: relative;
	width: 100%;
	height:100%;
}

#single-div #img-background img.bgfade{
	top: 0;
	width: 100%;
	position: absolute;
	z-index: 1;
}

#single-div #img-background img#view1.bgfade { 
	display: none; 
}

#single-div-contents{
	position: relative;
	z-index: 10;
	padding-top:0px;
}




a img { 
	border:none;
}

aside a:link {
	color:black;
	text-decoration: none;
}
aside a:visited {
	color:black;
	text-decoration: none;
}
aside a:hover {
	color:#D80000;
}
aside a:active {
	color:black;
}
aside, fieldset, footer, figcaption, ul, h4, h5, ol, p, table  {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:11pt;
}
aside {
	color:black;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius:15px;
	font-size:14px;
}
aside a {
	text-decoration: none;
}

audio {
	width:100%;
}
body {
	background-color: #EAEAEA;
	/* background-color: #92A5AB;
	background-image: url(../_images/mt-fuji-soft.png);
	background-repeat: no-repeat;
	background-size: cover; */
}
figure {
	/* position:relative;
	padding:0px;
	margin:0px; */
}
figcaption {
	/* display:block;
	position:absolute;
	bottom:0;
	left:0;
	padding: 10px 0px;
	width: 480px; */
	color:white;
	background: rgb(153, 0, 0);
	background: rgba(153, 0, 0, 0.8);
	text-align:center;
}
footer {
	background: rgb(255,255,255);
	background: rgba(255,255,255, 0.75);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: 3px 3px 1px #191919;
	-moz-box-shadow: 3px 3px 1px #191919;
	box-shadow: 3px 3px 1px #191919;
	margin-top: 13px;
	padding:7px;
}

/* the footer links are always black, until you hover, and they change to red */
footer a:link {
  color:black;
  text-decoration: none;
  transition:all .1s ease-in-out;	
}
#footer p {
	font-size: large;
}

footer a:visited {
  color:black;
  text-decoration: none;
}
footer a:hover {
  color:rgb(153, 0, 0);
  text-decoration: none;
  font-size:120%;
}
footer a:active {
  color:black;
  text-decoration: none;
}
h1, h2, h3 {
	/* Sets the default font for all headlines is the special font gongnormal */
	font-family: gongnormal, Papyrus, fantasy;
	color: black;
	text-shadow: white 0.1em 0.1em 0.2em;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
h1 {
	font-size:31px;
}
h2 {
	font-size: 25px;
}
h3 {
	font-size: 20px;
}

h4 {
	text-align:center;
	margin:5px 0px;
	text-decoration:underline;
	color:yellow;
}
h5 {
	font-size:13pt;
	font-weight:bold;
}
h5:first-letter  {
	font-size:40px;
	float:left;
	line-height:35px;
}
h6 {
	font-size:15pt;
	text-align:center;
	margin:5px 0px;
	text-decoration:underline;
	color:black;
}
header {
	padding-top: 0px;
	padding-bottom: 21px;

}
main {
	float: left;
	height:450px;
	width:869px;
	/* The main box contains both the photogallery and the desciptive text */
	/* main is not yet widely supported, and may be removed */
}

section {
	float: left;
	height:450px;
	width:869px;
	/* The section contains both the photogallery and the desciptive text */
}
table {
	/* width:450px;
	margin-left: 10px;
	border-collapse: collapse;
	padding:8px;
	border:1px;
	font-size:13px; */
	background:white;
}
td {
    border: 1px solid black;
	padding:5px;
	font-weight:bold;
}
th {
	color: white;
	background: black;
	padding: 5px;
	border: 1px;
	border-style: solid;
	border-color: black white;
}
#allContent {

}

#audioplayer{
	/* The text align command is used to center the audio player */
	text-align: center
}

#centerText {
	background-color: rgba(255,255,255,1.00);
	border-radius: 15px;
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	padding-top: 8px;
	opacity: 0.87;
	-webkit-box-shadow: 5px 5px 2px #191919;
	box-shadow: 5px 5px 2px #191919;
}
#centerText a:link {
	color:black;
	text-decoration: none;
}
#centerText a:visited {
	text-decoration: none;
	color:black;
}
#centerText a:hover {
	text-decoration: underline;
	color:black;
}
#centerText a:active {
	text-decoration: none;
	color:black;
}
#city{
	/* The city box contains both the city name, and the photo gallery */
	width:500px;
	height:450px;
	float: left;
}
#cityname{
	/* Name of the city with drop shadow formatting */
	width:500px;
	height:75px;
	float: left;
	text-align:center;	
}
#container {
	/*Global container for all web page elements, except the background image */
	position:relative;
	height:600px;
	width:1000px;
	margin-right:auto;
	margin-left:auto;
}
#displayrss {
	background:rgb(240, 230 ,140);
	background:rgba(240, 230 ,140, 0.9);
}
#facebook {
	padding:20px;
	text-align:center
}
#guestbook {
	display:block;
	float: left;
	height:350px;
	width:480px;
	margin:5px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius:15px;
	-webkit-box-shadow: 5px 5px 2px #191919;
	-moz-box-shadow: 5px 5px 2px #191919;
	box-shadow: 5px 5px 2px #191919;
	background:white;
	opacity:0.8;
	}
#guestbook h5 {
	margin:5px;
	padding:5px;;	
	}
#guestbook p {
	margin:2px;
	padding:2px 5px;	
	}
#guestbook legend {
	font-weight:bold;
}
#guestbook form {
	padding: 0px 10px;
}
#guestbooklist {
	background: rgb(255, 255, 255);
	/*background: rgba(255, 255, 255, 0.99);*/
}

/*The following statements control the offsets for staggering the navigation boxes */
#nav_home {
	left:37px;
}
#nav_yoyogi {
	left:20px;
}
#nav_kyoto {
	left:13px;
}
#nav_suwa {
	left:3px;
}
#nav_hirakata {
	left:55px;
}
#nav_tokyo {
	left:10px;
}
#nav_okinawa {
	left:30px;
}
#nav_home, #nav_yoyogi, #nav_kyoto, #nav_suwa, #nav_hirakata, #nav_tokyo, #nav_okinawa {
	/*This single statement is used to format all the naviation boxes */
	height:87px;
	width:110px;
	position:relative;
	/* border outline disabled. */
	/* border:thin solid #000;*/
}
#rightSidebar {
	background-color: rgba(0,0,0,0.85);
	color: rgba(255,255,255,1.00);
	border-radius: 15px;
	padding-top: 8px;
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	margin-top: 13px;
}
article#rightSidebar a:link {
	color:white;
	text-decoration:underline;
}
article#rightSidebar e a:visited {
	color:SkyBlue;
	text-decoration:underline;
}
article#rightSidebar a:hover {
	color:#D80000;
	text-decoration:underline;
}


#rightSidebar article ul {
	list-style-image:url("../_images/listitem.jpg");
	margin:0px;
}
#rsshead {
	text-align:center;
	padding-bottom:4px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:18px;
	border-bottom: 1px solid black;
}
#rsshead  img{
	padding:10px 7px 0px;
}
#rungif {
	padding: 3px 0px;
	text-align: center;
}
#rungif img {
	padding-left: 10px;
	padding-right: 10px;


}
#scrollguest {
	margin: 3px;
	height:380px;
	overflow-y:scroll;
}
#scrollguest  ul{
	padding:0px 7px;
}
#slideshow {
	border: 1px solid #000;
    border-radius: 0;}
#subHead {
	padding-bottom: 20px;
}
#tableshow {
	float: left;
	width:490px;
	height:330px;
	overflow-y:scroll
}
#text {
	margin: 7px;
	height:270px;
	overflow-y:scroll;
}
#textfull {
	margin: 7px;
	height:360px;
	overflow-y:scroll;
}
#textfull p {
	margin-top:0px;
}
#textfulllong {
	margin: 7px;
	height:430px;
	overflow-y:scroll;
}
#topfive {
	/* [disabled]padding-right:20px; */
}
#topfive h4 {
	text-decoration:underline;
	font-size:13pt;
	text-align:center;
}
#wrap {
	position:absolute;
	float: left;
	height:350px;
	width:450px;
	overflow-y:scroll;
	margin-right:5px;
}
.flexImage {
	width:100%;
}
.floatright {
	float:right;
}
.floatleft {
	float:left;
}
.footer_nav {
	margin:0px;
	padding:0px;
	text-align:center;
	font-size: 11pt;
	font-weight:bold;
}
.guestalert {
	font-weight:bold;
	/*color:rgb(153, 0, 0);*/
	color:red;
	font-style:italic	
}
.hirakata {
    display:block;
	-webkit-box-shadow: 3px 3px 6px black;
	-moz-box-shadow: 3px 3px 6px black;
	box-shadow:3px 3px 6px black;
    height: 73px;
    width: 100px;
    background-image: url(../_images/hirakata_nav.png);	
    /* background-color: transparent; */
	background-color: #6ECFF6;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius:5px;
    background-position: top;  
}
.hirakata:hover {
    background-position: bottom; 
}
.home {
    display:block;
    height: 82px;
    width: 65px;
    background-image: url(../_images/home.png);	
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: top;  
}
.home:hover {
    background-position: bottom; 
}
.kyoto {
    display:block;
	-webkit-box-shadow: 3px 3px 6px black;
	-moz-box-shadow: 3px 3px 6px black;
	box-shadow:3px 3px 6px black;
    height: 73px;
    width: 100px;
    background-image: url(../_images/kyoto_nav.png);	
	background-color: #82CA9D;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius:5px;
    background-position: top;  
}
.kyoto:hover {
    background-position: bottom; 
}
.list_name {
	color:red;
	font-weight:bold;
	text-decoration:underline;
}
.list_favorite {
	color:blue;
	font-weight:bold;
	text-decoration:underline;
}
.list_date {
	color:black;
	font-weight:bold;	
	text-decoration:underline;
}
.navtext {
/* The class navtext has a z index of 2 to layer the text above the image, plus positioning and a drop shadow component */
	position:absolute;
	font-size:12pt;
	left:-6px;
	top:50px;
	z-index:2;
	color: white; 
	font-family: gongnormal, Papyrus, fantasy;
	text-shadow: black 0.1em 0.1em 0.2em
}
.okinawa {
    display:block;
	-webkit-box-shadow: 3px 3px 6px black;
	-moz-box-shadow: 3px 3px 6px black;
	box-shadow:3px 3px 6px black;
    height: 73px;
    width: 100px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius:5px;
    background-image: url(../_images/okinawa_nav.png);	
	background-color:deepskyblue;
    background-position: top;  
}
.okinawa:hover {
    background-position: bottom; 
}
.runningred {
	color:#D80000;
}
.suwa {
    display:block;
	-webkit-box-shadow: 3px 3px 6px black;
	-moz-box-shadow: 3px 3px 6px black;
	box-shadow:3px 3px 6px black;
    height: 73px;
    width: 100px;
    background-image: url(../_images/suwa_nav.png);	
    /* background-color: transparent; */
	/*background-color: #605CA8;*/
	background-color: #8882BE;	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius:5px;
    background-position: top;  
}
.suwa:hover {
    background-position: bottom; 
}
.tablename {
	width:19%;
}
.tablelink {}
.tabledescription {
	width:27%;
}
.tokyo {
    display:block;
	-webkit-box-shadow: 3px 3px 6px black;
	-moz-box-shadow: 3px 3px 6px black;
	box-shadow:3px 3px 6px black;
    height: 73px;
    width: 100px;
    background-image: url(../_images/tokyo_nav.png);	
    background-repeat: no-repeat;
    /* background-color: transparent; */
	background-color: #FBAF5C;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius:5px;
    background-position: top;  
}
.tokyo:hover {
    background-position: bottom; 
}
.yoyogi {
    display:block;
	-webkit-box-shadow: 3px 3px 6px black;
	-moz-box-shadow: 3px 3px 6px black;
	box-shadow:3px 3px 6px black;
    height: 73px;
    width: 100px;
    background-image: url(../_images/yoyogi_nav.png);	
    background-repeat: no-repeat;
    /* background-color: transparent; */
	background-color: #FFF79A;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius:5px;
    background-position: top;  
}
.yoyogi:hover {
    background-position: bottom; 
}
h3 {
	font-size: 20px;
}

@media screen and (min-width:768px){	
h1 {
	font-size:48px;
}

h2 {
	font-size: 37px;
}
h3 {
	font-size: 20px;
}
}

@media screen and (min-width:992px){

#facebook {
	padding:0px;
	text-align:left
}
	
#single-div-contents{

	padding-top:30px;
}
#slideshow {
	border-width: 8px;
}
h1 {
	font-size:60px;
}
#linksDisplay {
	height: 399px;
    overflow-y: auto;
	
}
#rightSidebar {
	margin-top: 0px;
}

#allContent {

}
}

@media screen and (min-width:1200px){
#slideshow {
	border-width: 12px;
}
h1 {
	font-size:69px;
}
#allContent {

}
#linksDisplay {
	height: 422px;
    overflow-y: auto;
}
}