/* CSS Style Sheet for BreathFlute.com - Mobile version
   Exploratory work 10/2/2017 to make it responsive and more mobile-friendly.
   Converted from FluteHaven.com on 8/6/2018.
   Extensive overhaul 2/5/2019 to bring it in line with the later
   Kurinto and FluteHarvest web sites, which use a structure of
   ((Desktop OR Mobile) AND Common).
*/


/* Responsive Video sizing */
/* https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */

.videoWrapper_16x9 {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper_16x9 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Responsive Images! */

.rImg {
	width: 100%;
	height: auto;
}

/* Top bar of each page */

#header_wrap {
	/*border-top: #34140a 4px solid;*/
	/*background: url(../img/nfsHeaderGreen_Tall_c20.jpg) repeat-x center top;*/
	width: 100%;
}

#header {
	/*border-top: #34140a 4px solid;*/
	/*background: url(../img/nfsHeaderGreen_Tall_c20.jpg) no-repeat center top;*/
	background-color: #187852;
	/*height: 118px;*/
	margin: -4px auto 0px;
	overflow: hidden;
	position: relative;
	/*width: 960px;*/
}
#header H1 {
	margin: 0px 0px 0px 25px;		/* Top Right Bottom Left */
	padding: 5px 0px 15px 0px;		/* Top Right Bottom Left */
	/*width: 220px;*/
}
#header H1 A {
	background: url(../img/BreathFlute_Logo1_RB_r2x1_RGB_0228x114_c10.jpg) no-repeat;
	background-position: center;
	color: #ffffff;
	display: block;
	height: 120px;
	text-indent: -99999px;
	/*width: 429px;*/
}
#header H1 IMG {
	display: block;
	overflow: hidden;
	width: 0px;
	height: 0px;
}

#header IMG {
	vertical-align: top;
}
#header LABEL {
	display: block;
	height: 0px;
	overflow: hidden;
	width: 0px;
}

/* Styles for the links to various flute school web sites on the upper right of the header bar */

#header P {
	color: #ffdc52;
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-weight: bold;
	font-size: 16;
	/*line-height: 24px;
	margin-top: 8px;
	margin-right: 6px;*/
	text-align: center;
}
#header A {
	color: #000033;
	font-weight: normal;
}
#header A:visited {
	color: #000033;
	font-weight: normal;
}
#header A:hover {
	color: #000066;
	font-weight: normal;
}

/* Navigation bar */

#NavBarWrap {
	background-color: #004026;
	border-top: #005A36 2px solid;
	border-bottom: #005A36 0px solid;
	width: 100%;
}
#NavBar {
	background-color: #004026;
	border-top: #005A36 5px solid;
	border-bottom: #005A36 5px solid;
	/* Font attributes for the text in the NavBar "buttons" */
	font-size: 15;
	font-weight: normal;
	margin: -5px auto;
	width: "100%";
}
#NavBar .current {
	background-color: #005a36;
	color: #ffffff;
}
#NavBar A {
	color: #ffdc52;
	display: block;
	padding: 8px 10px 8px 10px;		/* Top Right Bottom Left */
	text-align: center;
	white-space: nowrap;
}
#NavBar A:hover {
	background-color: #007747;
	color: #ffffff;
	/*text-decoration: underline;*/
}

/* Main page content */

#ContentTable {
	/* This controls the primary text font size in paragraph text for this site */
	font-size: 18px;
	/*float: left;*/
	padding: 0px 0px 0px 0px;		/* Top Right Bottom Left */
	width: "100%";
}


#content {
	background-color: #fcfaf5;
	/* Top border set to zero to remove unnecessary vertical padding */
	border-top: #005A36 0px solid;
	color: #665544;
	width: "100%";
}


/* Area of rotating photos just below the navigation bar. On many, but not all pages. */

#RotatorPanoramic {
	position: relative;
	width: "100%";
}
#RotatorPanoramic IMG {
	text-align: center;
}

UL#Rotator * {
	cursor: pointer;
	margin: 0px;
	padding: 0px 0px 0px 0px;		/* Top Right Bottom Left */
}
UL#Rotator {
	background: #000000;
	cursor: pointer;
	/*float: center;*/
	height: 240px;
	margin: 0px;
	padding: 0px 0px 0px 0px;		/* Top Right Bottom Left */
	overflow: hidden;
	width: "100%";

}
UL#Rotator LI {
	height: 240px;
	width: "100%";
}
UL#Rotator IMG {
	height: 240px;
	width: "100%";
}

/* Page footer styles */

#footer {
	width: "100%";
}