/**************Site layout**************/

	* {
		box-sizing: border-box;
	}
	

	html { height: 100%; }

	body
	{
		margin:0px;
		padding:0px;
		border:0px;
		overflow:auto;
		font-family:Arial, Helvetica, sans-serif;
	
		display:flex;
			flex-direction:column;
			height:100vh;
	}

	header
	{
		background-color:white;
		border-bottom:1px solid black;
		display:flex;
			justify-content:center;
		flex-grow:0;
		position:relative;		
		z-index:10;
	}
	
		header #logo {
			display:flex;
				align-items:center;
				justify-content:center;
			padding-top:12px;
			min-width:185px;
		}

			header #logo img {
				width:174px;
			}

		header #menu {		
			display:flex;
				align-content:space-around;
				align-items:center;
				flex-direction:row;
				justify-content:flex-start;		
		}
		
			header #menu .menu_dropdown {
				display:flex;
					flex-direction:row;		
			}

			/* Style the Menu */
			.dropbtn {
				background-color: #669966;
				border: none;
				border-radius:0px;
				color:white !important;
				cursor: pointer;
				display:flex;
					align-items:center;
					justify-content:center;
				height:20px;
				font-size: 11px;
				font-weight: bold;
				margin: 0px;
					margin-right:1px;
				min-width:60px;
				padding:0px 10px;
				text-align:center;
				text-decoration:none;
				white-space:nowrap;
			}

			/* The container <div> - needed to position the dropdown content */
			.dropdown {
				position: relative;
				display: inline-block;
				padding:0px;
			}

			/* Dropdown Content (Hidden by Default) */
			.dropdown-content {
				border:1px solid #669966;
				display: none;
				position: absolute;
				/*background-color: #f9f9f9;*/
				background-color:#EAEBD8;
				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				z-index: 1;
			}

			/* Links inside the dropdown */
			.dropdown-content a {
				color: #669966 !important; /*black;*/
				font-size: 11px;
				padding: 5px 10px;
				text-decoration: none;
				display: block;
				white-space:nowrap;

				width:auto;
			}

			/* Change color of dropdown links on hover */
			.dropdown-content a:hover {
				background-color: #006633; /*#49A3FF;*/
				color: #FFF !important;
			}

			/* Show the dropdown menu on hover */
			.dropdown:hover .dropdown-content {
				display: block;
			}

			/* Change the background color of the dropdown button when the dropdown content is shown */
			.dropdown:hover .dropbtn {
				background-color: #006633;
			}


	#main 
	{		
		flex-grow:1;
		flex-shrink:0;
	}

	footer
	{
		border-top:1px solid black;
		background-color:white;
		flex-shrink:0;
	}
	
		#footer_container
		{
			text-align:center;
			font-size:13px;
			color:black;
			background-color:transparent;
			height:30px;
			margin-left:auto;
			margin-right:auto;
		}
	
			#footer_container span
			{
				display:inline-block;
				padding-top:5px;
			}
	
	.content_link
	{
		font-size:13px;
		margin-top:20px;
		text-align:center;	
	}
	
	/*****Special Formatting for Specific Menu*****/
	.menu_blog_sections 
	{ 
		display:block;
		width:100%;
		background-color:lightgrey;
		text-align:center;
		font-size:11px;
		font-weight:normal;
		color:grey;
		padding:2px 0px 2px 0;
		border-top:1px dotted #669966;
	}
	
	.menu_music { 
		border-bottom:1px dotted #669966; 
		height:auto; 
		/*white-space:normal !important;*/
		
		display:flex !important;
			flex-direction:row;
		max-width:vw;
	}
	
		.menu_music .album { 
			font-style:italic; 
			font-size:12px; 
		}
	
		.menu_music .artist { 
			margin-left:3px; 
			font-size:12px; 
		}
	
		.menu_music .genre { 
			color:grey;
			font-size:10px; 
			margin-left:10px; 
		}
		
		.menu_music .mrow {
		
		}
	
		.menu_music .music_img { 
			/*display:none;*/ 
			width: 42px; 
			margin-right:3px; 
			text-align:center; 
		}
		
			.menu_music .music_img img { 
				max-width:40px;
				max-height:40px; 
				border:0px; 
			}
	
		.menu_music .rate { 
			color:red; 
			vertical-align:middle; 
		}
	
		.menu_music .rate_lbl { 
			font-size:10px;
			margin-left:10px;
		}
		
		.menu_music .text { 
			display:flex;
				flex-direction:column;
		}
	
	.menu_separated { border-top:1px dotted #669966; }
	.menu_separated_bot { border-bottom:1px dotted #669966; }
	
	@media screen and (max-width: 700px) {
	
		header #menu {
			flex-direction:column;
			justify-content:center;
			width:100%;
		}
	
		header #menu .menu_dropdown {
			flex-direction:column;
			justify-content:center;
			margin-bottom:5px;
			width:calc(100% - 10px);
		}
	
		header #logo {
			margin:5px 0px;
			padding:0px;
		}
		
		.dropbtn {
			margin-right:0px;
			margin-bottom:3px;
			width:100%; /*calc(100% - 16px); /*16px is button padding*/
		}

		/* The container <div> - needed to position the dropdown content */
		.dropdown {

		}

		/* Dropdown Content (Hidden by Default) */
		.dropdown-content {

		}

		/* Links inside the dropdown */
		.dropdown-content a {

		}

		/* Show the dropdown menu on hover */
		.dropdown:hover .dropdown-content {
			display: none;
		}
	
	}

		
/**********Responsive Web Design**********/
	.row {

	}

	.row::after {
		content:"";
		clear:both;
		display:block;
	}

	[class*="col-"] {
		float:left;
		padding-top:10px;
	}

	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}

	@media screen and (max-width: 700px) {

		[class*="col-"] {
			padding:5px 0px;
			width:100%;
		}
	
	}


/**********General Formatting/Page Layout**********/
	#page_container
	{
		display:flex;
			flex-direction:column;
			height:100%;  /*calc(100% - 31px);  /*reduce by height of footer*/
		margin-left:auto;
		margin-right:auto;
		max-width:768px;
		min-width:0px;
		padding:0px;
	}

	#page_content
	{
		margin-top:20px;
		margin-bottom:20px;
		
		flex-grow:1;
		flex-shrink:0;
		flex-basis:auto;
	}
	
		#message
		{
			color:red;
			margin-top:15px;
			text-align:center;
		}

	#page_header
	{
		margin-top:10px;
		margin-bottom:10px;
	}

		#page_title
		{
			font-size:24px;
			font-weight:bold;
			text-align:center;
		}
		
		#page_title_notrail
		{
			font-size:24px;
			font-weight:bold;
			margin-top:20px;
			text-align:center;
		}
		
		#page_desc
		{
			border:0px dotted blue;
			font-family:"Comic Sans MS", fantasy, sans-serif;
			font-size:13px;
			margin-left:auto;
			margin-right:auto;
			margin-top:10px;
			text-align:center;
			width:80%;
		}

		#trail
		{
			font-size:12px;
			margin-left:10px;
			margin-bottom:10px;
		}
		
	@media screen and (max-width: 700px) {	
		
		#page_container {	
			padding:0px 10px;
		
			height:auto;
		}
		
		#page_content {
			margin-top:0px;
			width:100%;
		}
		
		#page_desc
		{
			width:100%;
		}
		
		#page_header {
			width:100%;
		}

		#trail {
			margin-left:0px;
		}

	}
	
	/**********General Formatting, Elements**********/
	a:visited {color: #009900; }
	a:link {color: #009900; }
	a:active {color: #009900; }
	a:hover {color: #006633; }
	
	button
	{
		background-color:white;
		border:1px solid lightgrey;
		border-radius:4px;
		box-shadow:3px 3px 3px #888888;
		color:black;
		cursor:pointer;
		font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
		font-size:13px;
		font-weight:normal;
		/*text-shadow:lightgrey 0.1em 0.1em 0.2em;*/
	}
	
		button:active
		{
			color:darkgreen;
		}
		
		button:hover
		{
			box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
			/*box-shadow:3px 3px 3px green;*/
		}
		
	form {
		margin-bottom:0px;
		padding:0px;	
	}
		
	textarea { font-family:Arial, Helvetica, sans-serif; font-size:13px; padding:3px; }
	
	.captcha {
	
	}
		.captcha a {
			display:inline-block;
			font-size:10px;
			text-align:left;
			vertical-align:top;
		}
		
		.captcha input {
			width:150px !important;
				min-width:150px !important;
				max-width:150px !important;
		}
	
		.captcha #captcha {
			border:1px solid black;
			height:50px;
			width:150px;
		}
		
		.captcha #captcha_code {
			display:block;
		}
	
	.feed 
	{
		margin-left: 3px;
		padding: 0 0 0 19px;
		background: url("/Images/feed.png") no-repeat 0 50%;
	}
	
	.form_basic {
	
	}

	.img_new 
	{ 
		height: 9px !important;
		border: 0px !important;
		width: 24px !important;
	}
	
	.rating { color: rgb(153,0,0); }	
	.rating_img { height:10px !important; border:0px !important; }
	.rating_img_large { height:15px !important; border:0px !important; }

	/*basic formatting*/
	.bold { font-weight:bold; }
	.italic { font-style:italic; }
	.normal { font-style:normal; font-weight:normal;}
		
	.cBlack { color:black !important; }
	.cBlue { color:blue !important; }
	.cDarkGreen { color:darkgreen !important; }
	.cGreen { color:green !important; }
	.cGrey { color:grey !important; }
	.cRed { color:red !important; }
	
	.center { margin-left:auto; margin-right:auto; text-align:center;}
	.left { text-align:left; }
	.right { text-align:right; }
	
	.nomargin-bottom { margin-bottom:0px !important; }

	.nopadding-top { padding-top:0px !important; }
	
	.w100 { width:100px; min-width:100px; }
	.w115 { width:115px; min-width:115px; }
	.w120 { width:120px; min-width:120px; }
	
	/*page index*/
	.index
	{
		font-size:13px;
		margin-top:20px;
		margin-bottom:20px;
		text-align:center;
	}
	
		.index_item
		{
			display:inline-block;
		}
	
	@media screen and (max-width: 700px) {
		
	}


/**************Home Page Style***********/
	.home
	{
		color:white;
		font-family:"Comic Sans MS", fantasy, cursive, sans-serif;
		font-weight:bold;
		text-shadow:black 0.1em 0.1em 0.2em;
		position:relative;
		background-color:transparent;
			height: 100%; /*calc(100% - 31px);  /*min height of menu 50px + height of footer 31px*/
		background-attachment:fixed;
		background-repeat:no-repeat;
		background-size:100% 100%;
		
		max-width:768px;
		margin-left:auto;
		margin-right:auto;
	}
	
		.home a:visited {color:white;}
		.home a:link {color: white;}
		.home a:active {color:white;}
		.home a:hover {color:#E6E6E6;}

		.home img
		{
			position:fixed;
				/*top:50px;*/
				left:0px;
				bottom:31px;
			/*height:100%;*/
			height: calc(100% - 81px);  /*min height of menu 50px + height of footer 31px*/
			max-width:768px;
			z-index:-50;
		}
	
	#home_text
	{
	
	}
	
	.home .title
	{
		font-size:32px;
		font-style:italic;
		/*height:45px;*/
		margin-left:0px;
		margin-top:0px;
		padding-top:25px;
		position:relative;
		text-align:center;
		z-index:1;
	}
	
	.home .subtitle
	{
		display:relative;
		font-size:18px;
		/*height:25px;*/
		margin-left:0px;
		margin-top:10px;
		text-align:center;
		white-space:normal;
	}
	
	.home_err {
		position:fixed;
		color:red;
		
		font-family:"Comic Sans MS", fantasy, cursive, sans-serif;
		font-weight:bold;
		margin-top:200px;
		text-align:center;
		text-shadow:black 0.1em 0.1em 0.2em;
		width:100%;
		z-index:1000;
	}
		
	@media screen and (max-width: 700px) {		
		.home {
			padding:0px 10px;
		}
		
		.home .subtitle {

		}
		
		.home .title {
			/*margin-top:65px;*/		
		}
	}
	
/**********Store Page Style**********/
	.stores {
		border:0px solid lightgrey;
		margin-left:auto; 
		margin-right:auto;
		text-align:center; 
		width:100%;
			max-width:800px;
			
		display:flex;
			align-items:center;
			flex-direction:row;
			flex-wrap:wrap;
			justify-content:center;
			
			
	}
	
	.stores .store {
		border:1px solid lightgrey;
		border-radius:8px;
		box-shadow:3px 3px 3px #888888;
		display:flex;
			align-items:center;
			justify-content:center;
		margin:10px;
		padding:5px;
		
		width:138px;
	}
	
		.stores .store:hover
		{
			box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
			/*box-shadow:3px 3px 3px green;*/
		}
		
		.stores .store a {
			color:black;
			text-decoration:none;
		}
	
		.stores .store img {
			border-radius:4px;
		}
		
		.stores .store .storename {
			font-size:12px;
			text-decoration-line:none;
		}
	
	
	
/**********Callout Box - http://mrcoles.com/blog/callout-box-css-border-triangles-cross-browser/
	To use (with border up facing notch):
	<div class="callout callout-border">
		This is a callout box!
		<div class="notch-border-up notch up"></div>
		<div class="notch up"></div>
	</div>
	
	To use (without border, up facing notch):
	<div class="callout">
		This is a callout box!
		<div class="notch up"></div>
	</div>
**********/

	.callout
	{
		position:relative;
		margin:18px 0;
		padding:18px 20px;
		background-color:#eef4f9;
		border-radius:6px;
		box-shadow:3px 3px 3px grey;
	}

	.callout .notch 
	{
		position: absolute;
		margin: 0;
		padding: 0;
		width: 0;
		height: 0;
	}

	.callout .up
	{
		top: -10px;
		left: 20px;
		border-top: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid #eef4f9;
	}

	.callout .up_right
	{
		top: -10px;
		right: 20px;
		border-top: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid #eef4f9;
	}

	.callout .down
	{
		bottom: -10px;
		left: 20px;
		border-bottom: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid #eef4f9;
	}

	.callout .left
	{
		left: -10px;
		top: 15px;
		border-left: 0;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-right: 10px solid #eef4f9;
	}

	.callout .right
	{
		right: -10px;
		top: 15px;
		border-right: 0;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 10px solid #eef4f9;

	}

	.callout-border { border: 1px solid lightgrey; padding: 17px 19px; box-shadow:none; }
	.callout-border .notch-border-left { border-right-color: lightgrey; left: -11px; }
	.callout-border .notch-border-right { border-left-color: lightgrey; right: -11px; }
	.callout-border .notch-border-up { border-bottom-color: lightgrey; top: -11px; }
	.callout-border .notch-border-down { border-top-color: lightgrey; bottom: -11px; }

/**********Expanding textarea**********/
	/*https://alistapart.com/article/expanding-text-areas-made-elegant*/
	
	.expandingArea textarea, 
	.expandingArea pre {
	  margin: 0px;
	  padding: 0;
	  outline: 0;
	  border: 0;
	}
	
	.expandingArea {
	  position: relative;
	  border: 1px solid lightgrey;
	  background-color: #fff;
	}
	
	.expandingArea > textarea,
	.expandingArea > pre {
	  padding: 5px;
	  background-color: transparent;
	  font: 400 13px/16px helvetica, arial, sans-serif;
	  /* Make the text soft-wrap */
	  white-space: pre-wrap;
	  word-wrap: break-word;
	  
  	  min-height:100px;
	}
	
	.expandingAreaSmall > textarea,
	.expandingAreaSmall > pre {
	  
  	  min-height:50px;
	}
	
	.expandingArea > textarea {
	  /* The border-box box model is used to allow
	   * padding whilst still keeping the overall width
	   * at exactly that of the containing element.
	   */
	  -webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
		  -ms-box-sizing: border-box;
			  box-sizing: border-box;
	  width: 100%;
	  /* This height is used when JS is disabled */
	  height: 100px;
	}
	
	.expandingArea.active > textarea {
	  /* Hide any scrollbars */
	  overflow:hidden;
	  position:absolute;
	  	top:0;
	  	left:0;
	  height: 100%;
	  /* Remove WebKit user-resize widget */
	  resize:none;
	}
	
	.expandingArea > pre {
	  display: none;
	}
	
	.expandingArea.active > pre {
	  display: block;
	  /* Hide the text; just using it for sizing */
	  visibility: hidden;
	}

	
/**********To MOve to individual stylesheets**********/

.music_title a:visited {color: #009900; text-decoration: none; }
.music_title a:link {color: #009900; text-decoration: none; }
.music_title a:active {color: #009900; text-decoration: underline; }
.music_title a:hover {color: #006633; text-decoration: underline; }

.blogcover {border: 0px solid blue; padding: 15px; padding-top: 10px;}
.blogcover_section {border-style: solid; border-width: 3px; border-bottom-width: 5px; margin-bottom: 15px;}
.blogcover tr {height: 100px; }
.blogcover td {width: 373px; border: 1px solid black; border-collapse: collapse;}
.blogcover_sectionname {text-align: center; padding: 2px; font-size: 90%; font-weight: bold; margin-bottom: 5px;}
.ad 
{
	transform: scale(0.65,0.65);
	transform-origin: 50% 15%;
	-ms-transform: scale(0.65,0.65); /* IE 9 */
	-ms-transform-origin: 50% 15%;
	-webkit-transform: scale(0.65,0.65); /* Safari and Chrome */
	-webkit-transform-origin: 50% 15%;
}
.ad_desc a:visited {color: black; text-decoration: none; }
.ad_desc a:link {color: black; text-decoration: none; }
.ad_desc a:active {color: black; text-decoration: none; }
.ad_desc a:hover {color: black; text-decoration: none; }

.blogcover_indiv tr {height: 0px;}