/* --------------------- for debugging size */
/* .TS, .TR, .MR, #sliderFrame, .CA, .OT, .MI., .PC, .TA, */
h1
{
/*	border : 1px solid blue;  */
}
/* --------------------- tabs in a tab control */
.TA
{
	background-color : #F6F6F9 ;
	border : 1px solid #999 ; /*This color can be different from color #2 */
	border-bottom : none ;
	border-radius : 5px 5px 0 0 ;
	color : #333;
	display : inline-block;    
	font : normal 12px Verdana ;
	line-height : 25px ;/* height #1 */
	margin-right : -1px ; /*distance between tabs*/
	outline : none;
	padding : 14px 16px; /* edit 16px for different tab width */
	position : relative ;
}

/* --------------------- tab panel content */
.PC
{
	background-color :  #bd3c18 ; /*color #2  */
	border : 1px solid #BBB ; /*color #1*/ 
	border-radius : 4px ;
	box-shadow : 0 0 8px #CCC ;
	margin : 0px ;
	padding : 0px ;
	position : relative ;    
}










a, body, div, html, img, span
{
	margin : 0 ;
	padding : 0 ;
	border : 0 ;
	font : inherit ;
	font-size : 100% ;
	vertical-align : baseline ;
}

a
{
	color : #ddd6d4 ;
	text-decoration : none ;
}

a:link
{
	color : #ddd6d4 ;
}

a:visited
{
	color : #ddd6d4 ;
}

a:hover
{
	color : #ffffff ;
}

body
{
	font-family : "Open Sans" ;
	font-weight : 400 ;
	font-size : 12px ;
	line-height : 150% ;
}

option, select
{
	font-family: monospace;
	font-size: 14px ;
	letter-spacing : 1px ;
	border : 1px solid black ;
}

td
{
	padding : 12px 6px ;
	text-size : 14px ;
	color : black ;
	background-color : white ;
	font-weight : bold ;
	letter-spacing : 1px ;
}
table
{
	background-color : white ;
}







/* --------------------- align left */
.AL
{
	text-align : left ;
}

/* --------------------- align center */
.AC
{
	text-align : center ;
}

/* --------------------- big text */
.BT
{
	font-size : 18px ;
	line-height : 150% ;
}

.c1
{
	background-color : #484846 ; /* dark gray */
}

.c2
{
	background-color : #008000 ; /* green */
}

.c3
{
	background-color : #bd3c18 ; /* brown */
}

.c4
{
	color : #ffffff ; /* white */
}

.c5
{
	background-color : #f1f0eb ; /* very pale gray */
}

/* --------------------- Used to color menu item */
.cast
{
	color : red;
}

/* --------------------- dropcap */
.DC
{
	float : left ;
	font-size : 60px ;
	line-height : 44px ;
	padding-right : 8px ;
	margin-left : -5px ;
	font-weight : bold ;
}

/* --------------------- Facebook */
.FA
{
	vertical-align : top ;
	margin : 0px ;
	border : 0px ;
}

.FB
{
	font-weight : bold ;
}

/* --------------------- content holder full width of screen, contains CA */
.FW
{
	margin : 0 auto ;
	width : 100% ;
}

/* --------------------- image of set height */
.IT
{
	height : 240px ;
	width : 1px ;
	float : left ;
}

/* --------------------- Menu Item */
.MI
{
	display : inline-block ;
	padding : 14px 18px ;
	margin : 0px 0px 3px 0px ;
	font-size : 16px ;
	border-bottom : 2px solid #008000 ;
}

/* --------------------- Menu Rectangle */
.MR
{
	display : inline-block ;
	line-height : 1 ;
	margin: 0 ;
	padding : 0 ;
	vertical-align : top ;
}

/* --------------------- Unselectable text */
.NS
{
	-webkit-touch-callout : none ;
	-webkit-user-select : none ;
	-khtml-user-select : none ;
	-moz-user-select : none ;
	-ms-user-select : none ;
	user-select : none ;
}

/* --------------------- Used in archive display */
.role
{
	color : red ;
	font-style : italic ;
}

/* --------------------- Required field */
.RQ
{
	border : 1px solid black;
	color : red ;
	font-size : 24x ;
	height : 20px ;
	width : 14px;
	text-align : center;
}

.SH
{
	-webkit-box-shadow : 0px 0px 30px 0px rgba(0,0,0,0.75) ;
	-moz-box-shadow : 0px 0px 30px 0px rgba(0,0,0,0.75) ;
	box-shadow : 0px 0px 30px 0px rgba(0,0,0,0.75) ;
}

/* --------------------- small text */
.ST
{
	font-size : 12px ;
	line-height : 150% ;
	letter-spacing : 1px ;
}

/* --------------------- tab content */
.TC
{
	display : none ;
	max-width : 320px ;
	padding: 6px ;
}

/* --------------------- text input */
.TX
{
	width : 200px ;
	height : 20px ;
	border : 1px solid black ;
}

/* ----------------------------------------------------------------------------------------------- laptop/desktop */
/* --------------------- content area centered in screen */
	h1
	{
		background-color : #484846 ;
		color : white ;
		font-size : 48px ;
		line-height : 100% ;
		margin: 0px auto ; 
		padding : 20px 0px;
	}

	#PH
	{
		background-color : #484846 ;
		color : white ;
		font-size : 48px ;
		font-weight : bold ;
		line-height : 100% ;
		margin: 0px auto ; 
		padding : 20px 0px;
	}

	.CA
	{
		width : 924px ;
		margin : 0 auto ;
		padding : 0 ;
	}

/* --------------------- text square */
	.TS
	{
		color : white ;
		display : inline-block ;
		line-height : 1.45 ;
		margin: 20px ;
		max-width : 250px ;
		padding : 4px ;
		vertical-align : top ;
		width : 250px ;
	}

/* --------------------- text rectangle */
	.TR
	{
		color : white ;
		display : inline-block ;
		line-height : 1.45 ;
		margin: 20px 20px 0px 20px;
		max-width : 850px ;
		padding : 4px ;
		vertical-align : top ;
		width : 850px ;
	}

/* --------------------- Other text */
	.OT
	{
		color : white ;
		display : inline-block ;
		line-height : 1.45 ;
		margin: 20px ;
		max-width : 40% ;
		padding : 4px ;
		vertical-align : top ;
	}

	#sliderFrame 
	{
		display: inline-block;
		padding : 7px 40px 7px 40px;
		margin: 20px ;
	}

	#songFrame 
	{
		display: none;
	}

	.HR1
	{
		width : 80px ;
		margin : 10px auto ;
	}

/* ----------------------------------------------------------------------------------------------- iPhone 5 landscape */
@media only screen and (min-width : 0px) and (max-width : 568px)
{
	h1
	{
		background-color : #484846 ;
		color : white ;
		font-size : 36px ;
		line-height : 100% ;
		margin: 0px auto ; 
		padding : 10px 0px 30px 0px;
	}

	#PH
	{
		background-color : #484846 ;
		color : white ;
		font-size : 24px ;
		font-weight : bold ;
		line-height : 100% ;
		margin: 0px auto ; 
		padding : 8px 0px;
	}

	.CA
	{
		width : 100% ;
		margin : 0 auto ;
		padding : 0px;
	}

	.TS
	{
		color : white ;
		display : inline-block ;
		line-height : 1.45 ;
		margin: 0px auto;
		max-width : 100% ;
		padding : 20px 0px ;
		vertical-align : top ;
		width : 250px ;
	}

	.TR
	{
		color : white ;
		display : block ;
		line-height : 1.45 ;
		margin: 10px auto;
		max-width : 100% ;
		padding : 4px ;
		vertical-align : top ;
		width : 250px ;
	}

/* --------------------- Other text */
	.OT
	{
		color : white ;
		display : block ;
		float : left ;
		line-height : 1.45 ;
		margin: 5px 0px ;
		max-width : 100% ;
		padding : 0px ;
		vertical-align : top ;
	}

	#sliderFrame
	{
		display : none ;
	}

	#songFrame 
	{
		color : white ;
		display : inline-block ;
		line-height : 1.45 ;
		margin: 0px auto;
		max-width : 100% ;
		padding : 20px 0px ;
		vertical-align : top ;
		width : 250px ;
	}

	.HR1
	{
		width : 170px ;
	}
}

/* ----------------------------------------------------------------------------------------------- iPad portrait */
@media only screen and (min-width : 569px) and (max-width : 768px)
{
	.CA
	{
		width : 100% ;
		margin : 0 auto ;
		padding : 0 ;
	}

	.TS
	{
		color : white ;
		display : inline-block ;
		line-height : 1.45 ;
		margin: 10px ;
		max-width : 250px ;
		padding : 4px ;
		vertical-align : top ;
		width : 250px ;
	}

	.TR
	{
		color : white ;
		display : inline-block ;
		line-height : 1.45 ;
		margin: 10px ;
		max-width : 550px ;
		padding : 4px ;
		vertical-align : top ;
		width : 550px ;
	}

	#sliderFrame
	{
		display : inline-block ;
		padding : 7px 40px 7px 40px ;
		margin: 20px ;
	}

	#songFrame 
	{
		display: none;
	}

	.HR1
	{
		width : 170px ;
	}

	.ST
	{
		font-size : 14px ;
		line-height : 150% ;
		letter-spacing : 1px ;
	}
}

/* ----------------------------------------------------------------------------------------------- iPad landscape */
@media only screen and (min-width : 769px) and (max-width : 1040px)
{
	.CA
	{
		width : 100% ;
		margin : 0 auto ;
		padding : 0 ;
	}

	.TS
	{
		color : white ;
		display : inline-block ;
		line-height : 1.45 ;
		margin: 10px ;
		max-width : 250px ;
		padding : 4px ;
		vertical-align : top ;
		width : 250px ;
	}

	.TR
	{
		color : white ;
		display : inline-block ;
		line-height : 1.45 ;
		margin: 10px ;
		max-width : 850px ;
		padding : 4px ;
		vertical-align : top ;
		width : 850px ;
	}

	#sliderFrame
	{
		display : inline-block ;
		padding : 7px 40px 7px 40px;
		margin: 20px ;
	}

	#songFrame 
	{
		display: none;
	}

	.HR1
	{
		width : 80px ;
		margin : 10 ;
	}
}