@charset "utf-8";

/* @license
 * MyFonts Webfont Build ID 2484500, 2013-02-19T16:25:25-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: P22 Mucha by IHOF
 * URL: http://www.myfonts.com/fonts/ihof/p22-mucha/p22-mucha/
 * Copyright: (c) 2001 P22 type foundry, Inc. All rights reserved.
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2484500
 * 
 * © 2013 MyFonts Inc
*/


/* @import must be at top of file, otherwise it will not work */
/* @import url("//hello.myfonts.net/count/25e914"); */
@font-face {
	font-family: 'P22Mucha';
	src: url('webfonts/25E914_0_0.eot');
	src: url('webfonts/25E914_0_0.eot?#iefix') format('embedded-opentype');
	src: url('webfonts/25E914_0_0.woff') format('woff');
	src: url('webfonts/25E914_0_0.ttf') format('truetype');
	font-display: auto;
}

/* https://developers.google.com/fonts/docs/material_icons */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(webfonts/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(webfonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(webfonts/MaterialIcons-Regular.woff) format('woff'),
    url(webfonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons
{
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  -webkit-font-smoothing: antialiased;  		/* Support for all WebKit browsers. */
  text-rendering: optimizeLegibility;  			/* Support for Safari and Chrome. */
  -moz-osx-font-smoothing: grayscale; 			/* Support for Firefox. */
  font-feature-settings: 'liga';  				/* Support for IE. */
}


h1, h2, h3, h4, h5, h6 {
	color: #FFFFFF;
	font-weight: normal;
	text-align: left;
	background: transparent;
	font-family: P22Mucha, "Trebuchet MS", Tahoma, Geneva, sans-serif;
	letter-spacing: 0.05em;
	line-height: 1;
	margin-top: 0em;
}

h1 {margin-bottom: 0.0em; font-size: 2.6em }
h2 {margin-bottom: 0.2em; font-size: 2.0em }
h3 {margin-bottom: 0.2em; font-size: 1.8em }
h4 {margin-bottom: 0.4em; font-size: 1.0em; font-family: "Trebuchet MS", Tahoma, Geneva, sans-serif; letter-spacing: 0.03em}

@media (max-width: 640px)
{
h1, h2, h3, h4, h5, h6 { margin-left: 0.1em; }
}




small {
	font-size: 0.7em;
	line-height: 1.5em;
	color: #999999;
}
/* For the iframe */
.video-container iframe,  
.video-container object,  
.video-container embed,
.video-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
 	height: 100%;
}

/* For the div that wraps the iframe or video */
.video-container {
	position: relative;
	padding-bottom: 56.25%;	/* % of enclosing div width, for 640 x 360 size, padding is 360 * 100% / 640 = 56.25% */
	height: 0;
	overflow: hidden;
}


.video-wrapper {		/* For the div that wraps the div and caption span */
	width: 640px;
	max-width: 100%;
	margin-top: 50px;
	margin-bottom: 150px;
	text-align: right;
}

.video-wrapper #w320{		/* For the div that wraps the div and caption span */
	width: 640px;
	max-width: 100%;
	margin-top: 100px;
	text-align: right;
}

.video-wrapper2 {		/* For the div that wraps the div and caption span, or plain <video>. Needs style="max-width:800px;" or whatever */
	margin-top: 50px;
	margin-bottom: 150px;
	text-align: right;
}

.copylink
{
	text-align: left;
	float: left;
	font-size: 83%;
	margin-top: 8px;
	
	background-image: linear-gradient(#f7f8fa, #e7e9ec);		/* background-image: linear-gradient(#f7f8fa ,#e7e9ec); */
	border-radius: 3px;
}

button.copylink img
{
	width: 20px;
	vertical-align: -30%;
}

.flex_size { max-width: 100%; height:auto; }

img.Pic
{
	margin-top: 50px;
	margin-bottom: 150px;
	max-width: 100%;
	height:auto;
	display:block;			/* Force image to be on a line on its own. Override with style="display:inline" in the <img> tag */
}


/* Container div for pic/video and caption span */
.captioned {
	margin-top: 50px;
	margin-bottom: 100px;
}

.caption {
	color: white;
	font-weight: bolder;
	text-align: right;
	background: transparent;
	font-size: 85%;
	margin-top: 0.1em;
}


/* Large first letter of paragraph */
p.big_first:first-letter { font-size:180%; }

div.quote {
	font-weight: lighter;
	padding-left: 40px;
	margin-top: 30px;
}

div.attrib {
	font-style:italic;
	font-size: 90%;
	color:#B8B8B8;
	padding-left: 40px;
	margin-top: 5px;
}


/* hr line: header */
#TopLine {
	color: #CCCCCC;
	background-color: #CCCCCC;
	height: 0.1em;
	width: 100%;
	border-width:0;
}

/* hr line: footer */
#UnderLine {
	color: #CCCCCC;
	background-color: #CCCCCC;
	height: 1px;
	width: 40%;
	border-width:0;
	text-align: left;
	margin-left: 0;
}


/* Photo collage on Circle Dance page */
#C_ContainerOuter  {	height: 880px; }
#C_Container  { position: relative; }			/* Need to make this absolute (with no co-ordinates specified) to make C1-C4 position relative to it */
#C1 {
	position: absolute;
	top: 0px;
	left: 3%;
}
#C2 {
	position: absolute;
	top: 28px;
	left: 37%;
}
#C3 {
	position: absolute;
	top: 525px;
	left: 42%;
}
#C4 {
	position: absolute;
	top: 302px;
	left: 21%;
}
#C5 {
	position: absolute;
	top: 616px;
	left: 10%;
}


/* (Un-)ordered Lists */
li { margin-bottom: 0.5em }
li.index { padding-bottom: 0.35em }
/* ul.sample {	list-style-image: url(http://flatworld.band/note.png); } */


/* Definition Lists */
dd { margin-top: 0; margin-bottom: 0 } /* opera 3.50 */
dt { margin-top: 0; margin-bottom: 0.45em }

dt.person_tech { color: white; padding-top: 1.0em; font-size: 115%; font-weight: bolder;  margin-bottom: 0em }

/* Sheet Music page */
dl.tune { margin-top: -2.0em; }									/* Remove padding for first tune in list */
dt.tune { padding-top: 3.5em; font-weight: bolder }		/* Title */
dt.tune2 { padding-top: 0.5em; font-weight: bolder }		/* Title of second and subsequent tunes in set */


/* Track descriptions on CD page */
dl.track { margin-top: 0em; }								/* Remove padding for first tune in list */
dt.track { padding-top: 1.5em; font-weight: bolder; letter-spacing: 0.07em; }	


/* Tune samples */
audio.sample { background-color: #1b1b1b; width:100%; }
a.sample    { background-color: black; line-height: 50px; }

col.index {	width: 110px; }


/* For gig listings */
.unconfirmed {	color: #999999; }
a.unconfirmed { color: #999999; }
.unconfirmed a { color: #999999; }
.closer {margin-bottom: 0.2em; }

/* Gigs Table */
/* Every cell */
#gigstab td 
{
	padding-top: 0px;
    padding-bottom: 5px;
	padding-left: 0px;
	padding-right: 6px;
	vertical-align: top;
}

.archive td 
{
	padding-top: 0px;
    padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 6px;
	vertical-align: top;
}

/* right hand column must be 100% to make the others shrink-to-fit content */
td.rhs
{
	width: 100%;
}

/* Whole table */
table#gigstab
{
	border-spacing: 0px 10px;		/* 10px vertical space between rows */
}

table.archive
{
	border-spacing: 0px 7px;		/* 10px vertical space between rows */
}


/* Non-menu links */
:link, :visited  { color: white; font-weight: 600; } 					/* D0646F */

/* Remove underline from links except when hovering */
a:link, a:visited, a:active{ text-decoration: none; }
a:hover { text-decoration: solid underline; }

/* No border on img links */
a:link img, a:visited img { border-style: none } 
a.with_border:link img    { border-color: white; border-style: solid; border-width: 1px; }
a.with_border:visited img { border-color: white; border-style: solid; border-width: 1px; }

/* Special for tech check links in the footer */
a.foot:link, a.foot:visited { color: inherit; font-weight: inherit; }

@media (max-width: 640px)		/* Mobile */
{
	.button-content
	{
		width: 100%;
		max-width: 160px;
		display: flex;
		justify-content: space-evenly;
	    align-items: center;
	    vertical-align: center;
	}
	
	.menu-bar
	{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 10px;
	}
}
@media (min-width: 640px)		/* Desktop */
{
	.button-content
	{
		margin-top: 15px;
		max-width: 100%;

		display: flex;
		justify-content: space-evenly;
		align-items: center;
	    vertical-align: center;
	}
	
	.menu-bar
	{
		display: flex;
		flex-direction: column;
	}
}

.button
{
	height: 30px;
	width: 30px;
	vertical-align: bottom;
	display:inline;
}



/* Menu links */

.dropbtn
{
	display: flex;
    align-items: center;		
	text-align: left;
	color: #CCCCCC;
	font-size: 110%;
}


.dropdown
{
	/* position: relative; */
	display: inline-block;
}

.dropdown-content
{
    display: none;
    position: absolute;
    padding: 12px 16px;
    z-index: 1;
}


@media (max-width: 640px)		/* Browser window < 640px */
{
	.dropdown:hover .dropdown-content { display: block; background-color: black; }
}

@media (min-width: 640px)		/* Browser window > 640px */
{
	.dropbtn { display: none; }
	.dropdown-content { display: block; position: static }
}


a.index {
	padding-bottom: 0.07em;
	margin-bottom: 0.5em;
	font-variant: small-caps;
	font-size: 1.3em;
	font-weight: bolder;
	max-width: 100%;		/* 8em */
}
a.subindex1 {
	padding-bottom: 0.07em;
	margin-bottom: 0.3em;
	font-variant: normal;
	font-size: 0.9em;
	font-weight: normal;
	max-width: 8em;
	margin-left: 2em;
}
/* Browser window < 640px */
@media (max-width: 640px)
{
	a.index     { max-width: 100%; }
	a.subindex1 { max-width: 100%; display:none; }
}
/* Browser window > 640px
@media (min-width: 640px)
{
	a.index     { max-width: 8em; }
	a.subindex1 { max-width: 8em; }
}
 */


 /* display: block; makes the style fill the containing block */
a.index:link, a.subindex1:link    { color: white; display: block; background-color: #1b1b1b; }
a.index:visited, a.subindex1:visited { color: white; display: block; background-color: #1b1b1b; }
a.index:hover, a.subindex1:hover   { color: black; display: block; background-color: #cccccc; text-decoration: none; }

.twoColHybLtHdr #sidebar1 dl {
	margin-right: 1.5em;
}

dt.person { padding-top: 1.0em; font-size: 115%; font-weight: bold }

/* Container for twin_col and pannel. */
.cont
{
	height: auto;
	width: 100%;
	padding: 0;
	margin: 0;
}

.bandcamp-player-4
{
	border:0;
	width:100%;
	height:406px;
}


@media (max-width: 640px)			/* Mobile */
{
	.twin_col_row
	{
		display: flex;
		flex-direction: column;
	}
	
	.twin_col_col
	{
		width: 100%;
		padding-bottom: 20px;
	}

	.bandcamp-player-4
	{
		height:300px;
	}
}

@media (min-width: 640px)			/* Desktop */
{
	.twin_col_row
	{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.twin_col_col
	{
		width: 45%;
		padding-bottom: 20px;
	}
}

.form_field
{
	width:100%;
	resize: vertical; 
	background-color:lightgrey;
	line-height: 125%;
	font-weight:Normal;
	font-size: 100%;
	font-family: inherit;
	margin-top: 0.1em;
	margin-bottom: 0.5em;
}

label
{
}


.table_pannel {
	background-color: #1b1b1b;
	vertical-align: top;
}

/* NB Space above headings, <h1> etc, will push the panel down within its container so that it overruns the bottom edge */
.pannel
{
	background-color: #1b1b1b;
 	height: 100%;
	margin: 0px 0px 0px 0px; 
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 5px;
	padding-bottom: 10px;
}

h2.in_pannel {
	margin-top: 0px; 
	padding-top: 0px;
}


/* The orange "Photos" tag on gig lists */
.photo_sticker {
	color: #FFFFFF;
	font-size: 90%;
	display: inline;
	background-color: #C66300;
}

a.photo_sticker:hover { text-decoration: none; font-weight: bolder; }
a.photo_sticker:link { color:#FFFFFF }
a.photo_sticker:visited { color:#FFFFFF }


body  {
	font: 100% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	background: #252525;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	line-height: 145%;
	color: #e0e0e0;
}
.twoColHybLtHdr #container { 
	background: #252525;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	max-width: 1000px
}




#logo	/* "Flatworld" e49a1d*/
{
	color: #e49a1d;
	font-family: P22Mucha, "Trebuchet MS", Tahoma, Geneva, sans-serif;
	font-size: 3.5em;
	font-weight: 900;
	letter-spacing: 0.05em;
	text-shadow: 1px 1px 2px grey;
	line-height: 1;
	margin-top: 0.1em;
	padding: 0;
}

/* Tag line in header a9baf3*/
#tagline 
{
	color: #c2d0d9;
	font-style: italic;
	text-shadow: 1px 1px 2px black;
}

@media (max-width: 500px)
{
#tagline { font-size: 3.5vw; }		/* 1 vw = 1% of viewport width */
}
@media (min-width: 500px)
{
#tagline { font-size: 110%; }
}

@media (max-width: 640px)		/* Browser window < 640px */
{
.twoColHybLtHdr #container { width: 97%; }
.twoColHybLtHdr #header    { text-align: center; }
.twoColHybLtHdr #header  h1  { text-align: center; }
#tagline { line-height: 1.75vw; }		/* 1 vw = 1% of viewport width */

/* .twoColHybLtHdr #sidebar1  { text-align:center; } */
}
@media (min-width: 640px)		/* Browser window > 640px */
{
.twoColHybLtHdr #container { width: 90%; }
.twoColHybLtHdr #header    { text-align: left; }
.twoColHybLtHdr #sidebar1  { text-align: left; }
}

.twoColHybLtHdr #header { 
	margin-top:0.5em;
} 

.twoColHybLtHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

/* Tips for sidebar1:
1. Since we are working in relative units, it's best not to use padding on the sidebar. It will be added to the overall width for standards compliant browsers creating an unknown actual width. 
2. Since em units are used for the sidebar value, be aware that its width will vary with different default text sizes.
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColHybLtHdr #sidebar1 p" rule.
*/
/* Browser window < 640px */
@media (max-width: 640px)
{
.twoColHybLtHdr #sidebar1    { width: 100%; }
.twoColHybLtHdr #sidebar1    { padding-top: 0.5em; }
.twoColHybLtHdr #mainContent { padding-top: 0.5em; }
}
/* Browser window > 640px */
@media (min-width: 640px)
{
.twoColHybLtHdr #sidebar1    { width: 12em; float: left; }
.twoColHybLtHdr #sidebar1    { padding-top: 2em; }
.twoColHybLtHdr #mainContent { padding-top: 2em; }
}

/* Tips for mainContent:
1. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. Be aware it is possible to cause float drop (the dropping of the non-floated mainContent area below the sidebar) if an element wider than it can contain is placed within the mainContent div. WIth a hybrid layout (percentage-based overall width with em-based sidebar), it may not be possible to calculate the exact width available. If the user's text size is larger than average, you will have a wider sidebar div and thus, less room in the mainContent div. You should be aware of this limitation - especially if the client is adding content with Contribute.
3. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This may help avoid several IE-specific bugs.
*/
.twoColHybLtHdr #mainContent { 
	margin: 0px 0px 20px; /* 13em top right bottom left */ /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
}
/* Browser window < 640px */
@media (max-width: 640px)
{
.twoColHybLtHdr #mainContent { margin-left: 0; }
} 
/* Browser window > 640px */
@media (min-width: 640px)
{
.twoColHybLtHdr #mainContent { margin-left: 13em; }
}

.twoColHybLtHdr #footer { 
	padding: 0 10px 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
} 
.twoColHybLtHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


/* CSS */
.button-14 {
  background-image: linear-gradient(#f7f8fa ,#e7e9ec);
  border-color: #adb1b8 #a2a6ac #8d9096;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
  box-shadow: rgba(255,255,255,.6) 0 1px 0 inset;
  box-sizing: border-box;
  color: #0f1111;
  cursor: pointer;
  display: inline-block;
  height: 29px;
  outline: 0;
  overflow: hidden;
  padding: 0 11px;
  text-decoration: none;
  text-overflow: ellipsis;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
}

.button-14:active {
  border-bottom-color: #a2a6ac;
}

.button-14:active:hover {
  border-bottom-color: #a2a6ac;
}

.button-14:hover {
  border-color: #a2a6ac #979aa1 #82858a;
}

.button-14:focus {
  border-color: #e77600;
  box-shadow: rgba(228, 121, 17, .5) 0 0 3px 2px;
  outline: 0;
}