/* mobile first definitions */
body {
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;
	background:#fff;
	z-index: 1;

}
p {
	margin-top: 0.5rem;
	line-height:1.2;
	margin-bottom:0.5rem;
}

.no-leading {
	margin-top:0;
	margin-bottom:0;
}

em, i {
	font-style:italic;
}

strong {
	font-weight:bold;
}

img {
    max-width: 100%;
    /*height: auto;*/
	display:block;
	margin: 0 auto;
}

h1, h2, h3, h4  {
	font-size:120%;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	line-height: 1;
	margin-top: 0.5rem;
}
h2 {
	font-size: 110%;
}

h2 .nav-brand img {
	display:inline;
	margin 0.625rem;
	}
	
h3 {
	font-size: 100%;
}
h4 {
	font-size:100%;
	font-weight:normal;
	font-style:italic;
}

.style3 {text-align:center;}
.centre {text-align: center;}
.smaller {font-size: 87.5%;}

#main, #wrapper {
	width: 98%;
	max-width:80rem;
	min-width:20rem;
	padding:0;
	margin: 0 auto;
	position: static;
}
#header {
	position:static;
	clear:both;
	float:left;
	width:100%;
	border-bottom: solid 1px gray;
	margin-bottom: 0.5rem;
	z-index: 9999;
}

#content {
	/* position:absolute;
	z-index: -1; */
}

#footer {
	/*display:inline-block;
	position:absolute;
	bottom:0.5rem;*/
	left:0;
	clear: both;
	width: 100%;
	margin-top: 1.5rem;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.75rem;
	text-align: center;
	color: #999;
}
.col1, .col2, .col3 {padding: 1rem 0;}
.HighlightBox {
	
	width: 85%;
	margin:auto;
	margin-top:1rem;
	margin-bottom: 1rem;
	border: 0.25rem;
	padding:0.5rem;
	border-style:solid;
	border-color:#FFCC00;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.footer-text {

	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.75rem;
	text-align: center;
	color: #999;
}

.float-right-33 {
	float: right;
	width:33.33333333333%;
	margin: 1rem 1rem 3rem 3rem;
}

.float-left-33 {
	float: left;
	width:33.33333333333%;
	margin: 1rem 1rem 3rem 3rem;
}

.float-right-40 {
	float:right;
	width:40%;
	margin: 1rem 1rem 3rem 3rem;
}

float-left-33 img {
	max-width: 100%;
	}
	
.clear-both {
	clear: both;
}
.one-third-column {
	width: 100%;
	margin-bottom: 1.5rem;
}

.half-column {
	width:100%;	
	margin-bottom: 1rem;
}
.pagenavbar {
	width: 100%;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	}
	
.pagenavbar img, .pagenavbar780 img {
	display:inline-block;
}

.pagenavbar780 {
	max-width: 780px;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	}
	
.current {
	background-color:#0F0;
	}

table p {
	padding-right:2rem;
}

table {
	width:100%;
	max-width:50rem;
}

.source {
	width:100%;
	font-size:0.75rem;
	text-align:right;
}

.lyrics {
	font-size:0.875rem;
	font-style:italic;
}

.lyricsplain {
	font-size:0.875rem;
	font-style:normal;
	}

.rightjustify {
	float: right;
}
.leftjustify {
	float: left;
}

.no-centre-list li {
	text-align:center;
}

.no_underline {
	text-decoration: none;
}

a.button {
	display:inline-block;
	width:8rem;
	text-decoration:none;
	text-align:center;
	background-color:#ff9;
	border: 1px solid #fb3;
	border-radius:0.4rem;
	color:gray;
	margin-right:0.75rem;
	margin-top:0.5rem;
	padding:0.5em;
}

#bottom-menu {
	display:block;
	width:auto;
	max-width:80rem;
	margin:auto;
	text-align:center;
}

.caption, .caption1{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.75rem;
	font-weight: bold;
	text-align:center;
}

.poster-box {
	margin: 1rem;
	border: solid 1px black;
	float: left;
	width: 12rem;
	height: 20rem;
	text-align:center;
}

cite {
	font-style:italic;
}

blockquote {
	text-align:center;
	font-style:italic;
}

#imagebox {
	text-align:center;
	}
	
#imagebox img {
	display:inline-block;
	margin:1rem;
	}

#content ol, #content ol li {
	 list-style-type: decimal;
	 list-style-position: outside;
	 line-height: 1.2;
	 margin: 0.2rem 0 0.3rem 0.5rem;
	 }
	 
.inlineflag {
	display:inline;
	
	vertical-align: middle;
	margin: 0.2rem;
}
.inline_email {
	display:inline;
	vertical-align: -50%;
	
}
	 
#rotate {
	margin: auto;
	width: 10em;
	text-align:center;
}

#memberbox {
	width: 88%;
	padding: 0.625rem;
	background-color: #FFFF99;
	border-radius: 25px;
	-moz-box-shadow: 10px 10px 5px #888;
	-webkit-box-shadow: 10px 10px 5px #888;
	box-shadow: 10px 10px 5px #888;
	margin-bottom:1rem;
	msrgin-top: 1rem;
}

.half-column {
	width:100%;	
}

#wrapper ul {
	list-style-type:disc;
	list-style-position:inside;
	line-height:normal;
}
#wrapper ul li ol {
	list-style-type:decimal;
	list-style-position:inside;
	margin-left:12px;
}
.schedule {
	margin: auto;
	width: 100%;
}

.google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
	.fixture-table table, tr, td {
	border: 1px solid #CCC;
	padding-bottom: 2px;
	padding-top: 2px;
}

.TokyoLogo {
	width: 50%;
	margin: 1rem auto;
	
}


.half-container {
	display: flex;
	flex-basis: 100%;
	box-sizing:border-box;
}
.half-width {
	flex-basis:50%
}

/* only for desktops */
@media only screen and (min-width:40rem) {
/* reduce less important font size for desktop only */
.style3 {font-size: 0.875rem;}
		
		
.column-container {
	display: flex;
	flex-basis: 100%;
	justify-content: space-between;
	box-sizing:border-box;
	text-align:justify;
}
/*This sets the width to 100% and signals that Flexbox will be used. The last line ensures that the three columns will be equally spaced across the container. Text is justified with the default of auto, which ought to result in interword justification.*/

.main-column {
	flex-basis: 46%;
	order: 1;
}
/*This gives the central column a width of just under half the width of the container, leaving 2% either side for a margin between the columns. The order is 0, 1, 2 so this column appears second on a window of the correct size.*/

.left-column {
	background:#f4f4f4;
	flex-basis: 25%;
	order: 0;
	padding: 0 0.5rem 0 0.5rem;
}
/*Both the left and right columns have a light grey background, half a rem padding left and right and a width of a quarter of the container. This one has order 0 so it appears first (that’s not necessary as the default is zero, but it’s there to emphasise where it is in the order).*/

.right-column {
	background:#f4f4f4;
	flex-basis: 25%;
	order: 2;
	padding: 0 0.5rem 0 0.5rem;
}

	
	/* column container */
	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
		/* z-index:-2; fixed hidden drop down problem ID - try removing 24 Dec 2017 and it worked!! */
	}
	a {
		z-index:100;
	}
	/* common column settings */
	.colright,
	.colmid,
	.colleft {
		float:left;
		width:100%;			/* width of page */
		position:relative;
	}
	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:1rem 0 1rem 0;	/* no left and right padding on columns, we just make them narrower instead 
						only padding top and bottom is included here, make it whatever value you need */
		overflow:hidden;
		text-align: center;
	}
	
#main .colmask.threecol .colmid .colleft .col1 p,
#main .colmask.threecol .colmid .colleft .col2 p, 
#main .colmask.threecol .colmid .colleft .col3 p {
		text-align: center;
	}	
	/* 3 Column settings */
	.threecol {
		background:#eee;		/* right column background colour */
	}
	.threecol .colmid {
		right:25%;			/* width of the right column */
		background:#fff;		/* center column background colour */
	}
	.threecol .colleft {
		right:50%;			/* width of the middle column */
		background:#f4f4f4;	/* left column background colour */
	}
	.threecol .col1 {
		width:46%;			/* width of center column content (column width minus padding on either side) */
		left:102%;			/* 100% plus left padding of center column */
	}
	.threecol .col2 {
		width:21%;			/* Width of left column content (column width minus padding on either side) */
		left:31%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
	}
	.threecol .col3 {
		width:21%;			/* Width of right column content (column width minus padding on either side) */
		left:85%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

.one-third-column {
	width: 30%;
	margin-right: 3.33333333333%;
	float:left;
}

.half-column {
	width:44%;
	max-width:38rem;
	min-width:18rem;
	padding: 2% 1rem;
	margin:0;
	float:left;	
}

.one-quarter {
	width: 23%;
	float:left;
}

/* Desktop only: three columns*/



}

@media only screen and (min-width:35rem) {
	#rotate {
		display: none;
}

@media print {

   .dontPrint {
       display:none;
    }

    }