/* A responsive, mobile-first stylesheet for both larger- and smaller-screen devices */

body		{color:#000000; background-color:#ffffff; font-size: 75%; line-height: 160%; font-family: Verdana, Geneva, sans-serif;}
a:hover		{color:#000000; text-decoration: none; font-weight:bold;}
a:link		{color:#0000ff; text-decoration: none; font-weight:bold;}
a:active	{color:#999999; text-decoration: none; font-weight:bold;}
a:visited	{color:#000099; text-decoration: none; font-weight:bold;}
a img		{border: none;}

.text1		{font-size: 100%;}
.redtext1	{font-size: 100%; color:#cc3300;}
.redtext1dark	{font-size: 100%; font-weight: bold; color:#cc3300;}

.textbnasubnav	{font-size: 100%; font-weight: bold; font-family: Arial, Helvetica, sans-serif;}
.textdisclosure	{font-size: 100%; line-height: 120%; font-family: Arial, Helvetica, sans-serif; font-style: italic;}

.text2		{font-family: Verdana, Geneva, sans-serif; font-size: 8pt; line-height: 100%;}
.redtext2dark	{font-family: Verdana, Geneva, sans-serif; font-size: 8pt; font-weight: bold; color:#cc3300;}

/* Older classes (formerly for top nav menus) still needed for tables, etc. where I need to keep text small */
.text1b		{font-family: Arial, Helvetica, sans-serif; font-size: 95%;}
.bluetext1b	{font-family: Arial, Helvetica, sans-serif; font-size: 95%; color:#0000cc;}
.text1bdark	{font-family: Arial, Helvetica, sans-serif; font-size: 95%; font-weight: bold;}
.whitetext1bdark	{font-family: Arial, Helvetica, sans-serif; font-size: 95%; font-weight: bold; color:#ffffff;}

.redbgcolor	{background-color:#cc3300;}
.bluebgcolor	{background-color:#0033cc;}

hr		{color: #cccccc; background-color: #cccccc; border: none; height: 1px;}
h1 		{color: #cc3300; text-align: center; font-size: 130%; line-height: 120%; font-weight: bold; margin-bottom: 0;}
h2 		{color: #cc3300; text-align: center; font-size: 100%; line-height: 120%; font-weight: bold; margin-bottom: .5em; margin-top: .5em; background-color: #ffffff; padding: 1px; border: 1px solid #cccccc;}
h3 		{color: #cc3300; text-align: center; font-size: 100%; line-height: 120%; font-weight: bold; margin-bottom: 0;}
h2.news-digest	{color: #000000; text-align: left; font-size: 100%; line-height: 120%; font-weight: normal; margin-bottom: 0; padding-top: 1em; border-top: 1px solid #cccccc; border-bottom: none; border-left: none; border-right: none;}

.thinborder1	{border-right: #cccccc 1px solid;}
.thinborder2	{border-right: #cccccc 1px solid; border-top: #cccccc 1px solid; border-left: #cccccc 1px solid; border-bottom: #cccccc 1px solid;}
.thinborder3	{border-left: #cccccc 1px solid;}

.clear		{clear: both;}   /* Use whenever I need to start a paragraph below where a floating image finishes. */

/* Use whenever I want to add some featured recordings at the top of a page and want them to stand out. */
p.featured_recordings	{margin: auto; border: 2px solid #c0c0c0; width: 250px; padding: 10px; box-shadow: 5px 5px 5px #eeeeee}

li.nobullets 	{list-style-type: none;}
li.audio	{list-style-image:url(images/audio.png);}
li.ok		{list-style-image:url(images/ok.png);}
li.too-new	{list-style-image:url(images/yellow_bullet.png);}
li.too-old	{list-style-image:url(images/pink_star.png);}
li.speech-bubble	{list-style-image:url(images/speech_bubble.gif);}
li.audio-14	{list-style-image:url(images/audio-14.gif);}
li.cdrom-14	{list-style-image:url(images/cdrom-14.gif);}
li.music-14	{list-style-image:url(images/music-14.gif);}
li.vinyl-14	{list-style-image:url(images/vinyl-14.jpg);}
li.all-purpose	{list-style-image:url(images/yellow_bullet.png);}

/* A simple, no bullets, no indents responsive list of single hyperlink items with extra padding at smaller screen sizes */
ul.responsive_0		{padding-left: 0; margin-left: 0;}
ul.responsive_0 li		{border: #ffffff 1px solid; list-style-type: none;}
ul.responsive_0 li a		{display: block; padding-bottom: 20px; border: #ffffff 1px solid;}
ul.responsive_0 a span	{color: #000000; font-weight:normal;}
ul.responsive_0 li:hover	{border: #cccccc 1px solid; background-color: #eeeeee;}
@media screen and (min-width: 500px) {
	ul.responsive_0 li a	{padding-bottom: 0px;}
}

/* Same as above list with indent at larger screen sizes */
ul.responsive_1		{padding-left: 0; margin-left: 0;}
ul.responsive_1 li		{border: #ffffff 1px solid; list-style-type: none;}
ul.responsive_1 li a		{display: block; padding-bottom: 20px; border: #ffffff 1px solid;}
ul.responsive_1 a span	{color: #000000; font-weight:normal;}
ul.responsive_1 li:hover	{border: #cccccc 1px solid; background-color: #eeeeee;}
@media screen and (min-width: 500px) {
	ul.responsive_1	{padding-left: 3em; margin-left: 0;}
	ul.responsive_1 li a	{padding-bottom: 0px;}
}

/* Same as above, with a small tweek for use with nested lists, e.g., as for articles index page */
ul.responsive_1b		{padding-left: 0; margin-left: 0;}
ul.responsive_1b li		{border: #ffffff 1px solid; list-style-type: none;}
ul.responsive_1b li a		{display: block; padding-bottom: 20px; border: #ffffff 1px solid;}
ul.responsive_1b a span	{color: #000000; font-weight:normal;}
ul.responsive_1b a:hover	{border: #cccccc 1px solid; background-color: #eeeeee;}
@media screen and (min-width: 500px) {
	ul.responsive_1b	{padding-left: 3em; margin-left: 0;}
}

/* Same as above with extra space for bullets up to around 14px wide (give or take) */
ul.responsive_2		{padding-left: -1.5em; margin-left: -1.5em;}
ul.responsive_2 li		{border: #ffffff 1px solid;}
ul.responsive_2 li a		{display: block; padding-bottom: 20px; border: #ffffff 1px solid;}
ul.responsive_2 a span	{color: #000000; font-weight:normal;}
ul.responsive_2 li:hover	{border: #cccccc 1px solid; background-color: #eeeeee;}
@media screen and (min-width: 500px) {
	ul.responsive_2	{padding-left: 3em; margin-left: 0;}
	ul.responsive_2 li a	{padding-bottom: 0px;}
}

/* A simple responsive ul with bullets for list items with multiple hyperlinks */
ul.responsive_3		{padding-left: -1.5em; margin-left: -1.5em; line-height: 150%;}
ul.responsive_3 span	{line-height: normal;}
ul.responsive_3 li		{padding-bottom: 20px;}
ul.responsive_3 li a		{border: #ffffff 1px solid;}
ul.responsive_3 a:hover	{border: #cccccc 1px solid; background-color: #eeeeee;}
@media screen and (min-width: 500px) {
	ul.responsive_3	{padding-left: 3em; margin-left: 0;}
	ul.responsive_3 li a	{padding-bottom: 0px;}
}

/* A simple, no-frills, responsive ol for list items with multiple hyperlinks */
ol.responsive_1		{padding-left: 1.5em; margin-left: 0; line-height: 150%;}
ol.responsive_1 li		{padding-bottom: 20px;}
ol.responsive_1 a		{border: #ffffff 1px solid;}
ol.responsive_1 a:hover	{border: #cccccc 1px solid; background-color: #eeeeee;}
@media screen and (min-width: 500px) {
	ol.responsive_1	{padding-left: 3em; margin-left: 0;}
	ol.responsive_1 li	{padding-bottom: 0px;}
}

img		{max-width: 100%; height: auto;}
img.logo		{position: absolute; left: 0px; top: 43px;}
@media screen and (min-width: 400px) {
	img.logo		{position: absolute; left: 10px; top: 43px;}   /* for iPad-size devices and desktops */
}
img.bordered	{border: #cccccc 1px solid;}
.hangright		{float: right; margin-left: 20px; margin-bottom: 10px; border: #999999 1px solid; padding-left: 10px; padding-right: 10px; padding-top: 10px;}
.hangleft		{float: left; margin-right: 20px; margin-bottom: 10px; border: #999999 1px solid; padding-left: 10px; padding-right: 10px; padding-top: 10px;}
.hangright2	{float: right; margin-left: 20px; margin-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;}
.hangleft2		{float: left; margin-right: 10px; margin-bottom: 0px; margin-top: 10px;}

/* in use on some interviews pages, keep image to less than around 150px wide */
.small_pic_and_caption		{border: 1px solid #cccccc; padding: 3px; font: 11px/1.4em Arial, sans-serif;}
.small_pic_and_caption img		{border: 1px solid #cccccc; vertical-align: middle; margin-bottom: 3px;}
.go_right				{margin: 0.5em 0 0.5em 0.8em; float: right;}
.go_left				{margin: 0.5em 0.8em 0.5em 0; float: left;}

/* in use on some interviews pages, for pages with sidebar that floats right at 500px */
.width_200_pic_and_caption			{margin: auto; border: 1px solid #cccccc; padding: 3px; font: 11px/1.4em Arial, sans-serif;}
.width_200_pic_and_caption img		{border: 1px solid #cccccc; vertical-align: middle; margin-bottom: 3px;}
@media screen and (min-width: 400px) and (max-width: 499px), screen and (min-width: 600px) { 
	.width_200_pic_and_caption		{border: 1px solid #cccccc; padding: 3px; font: 11px/1.4em Arial, sans-serif;}
	.width_200_pic_and_caption img	{border: 1px solid #cccccc; vertical-align: middle; margin-bottom: 3px;}
	.go_right_200			{margin: 0.5em 0 0.5em 0.8em; float: right;}
	.go_left_200			{margin: 0.5em 0.8em 0.5em 0; float: left;}
}

/* in use on some interviews pages, for pages with sidebar that floats right at 500px */
.width_250_pic_and_caption			{margin: auto; border: 1px solid #cccccc; padding: 3px; font: 11px/1.4em Arial, sans-serif;}
.width_250_pic_and_caption img		{border: 1px solid #cccccc; vertical-align: middle; margin-bottom: 3px;}
@media screen and (min-width: 450px) and (max-width: 499px), screen and (min-width: 650px) { 
	.width_250_pic_and_caption		{border: 1px solid #cccccc; padding: 3px; font: 11px/1.4em Arial, sans-serif;}
	.width_250_pic_and_caption img	{border: 1px solid #cccccc; vertical-align: middle; margin-bottom: 3px;}
	.go_right_250			{margin: 0.5em 0 0.5em 0.8em; float: right;}
	.go_left_250			{margin: 0.5em 0.8em 0.5em 0; float: left;}
}

/* in use on some interviews pages, for pages with sidebar that floats right at 500px */
.width_300_pic_and_caption			{margin: auto; border: 1px solid #cccccc; padding: 3px; font: 11px/1.4em Arial, sans-serif;}
.width_300_pic_and_caption img		{border: 1px solid #cccccc; vertical-align: middle; margin-bottom: 3px;}
@media screen and (min-width: 370px) and (max-width: 499px) { /* Later: can tweek min-width some more at leisure */
	.width_300_pic_and_caption		{width: 302px; border: 1px solid #cccccc; padding: 3px; font: 11px/1.4em Arial, sans-serif;}
	.width_300_pic_and_caption img	{width: auto; border: 1px solid #cccccc; vertical-align: middle; margin-bottom: 3px;}
}
@media screen and (min-width: 500px) and (max-width: 554px) { /* for that awkward transition region */
	.width_300_pic_and_caption		{margin: auto; border: 1px solid #cccccc; padding: 3px; font: 11px/1.4em Arial, sans-serif;}
	.width_300_pic_and_caption img	{border: 1px solid #cccccc; vertical-align: middle; margin-bottom: 3px;}
}
@media screen and (min-width: 555px) and (max-width: 699px) { 
	.width_300_pic_and_caption		{width: 302px; border: 1px solid #cccccc; padding: 3px; font: 11px/1.4em Arial, sans-serif;}
	.width_300_pic_and_caption img	{width: auto; border: 1px solid #cccccc; vertical-align: middle; margin-bottom: 3px;}
}
@media screen and (min-width: 700px) { 
	.width_300_pic_and_caption		{width: 302px; border: 1px solid #cccccc; padding: 3px; font: 11px/1.4em Arial, sans-serif;}
	.width_300_pic_and_caption img	{width: auto; border: 1px solid #cccccc; vertical-align: middle; margin-bottom: 3px;}
	.go_right_300			{margin: 0.5em 0 0.5em 0.8em; float: right;}
	.go_left_300			{margin: 0.5em 0.8em 0.5em 0; float: left;}
}

/* in use on some interviews pages, for two images side-by side, for pages with sidebar that floats right at 500px */
.width_300_pic_and_caption_2		{margin: auto; border: 1px solid #cccccc; padding: 3px; font: 11px/1.4em Arial, sans-serif;}
.width_300_pic_and_caption_2 img		{border: 1px solid #cccccc; vertical-align: middle; margin-bottom: 3px;}
@media screen and (min-width: 370px) and (max-width: 499px) { /* Later: can tweek min-width some more at leisure */
	.width_300_pic_and_caption_2	{margin-bottom: 10px; width: 302px; border: 1px solid #cccccc; padding: 3px; font: 11px/1.4em Arial, sans-serif;}
	.width_300_pic_and_caption_2 img	{width: auto; border: 1px solid #cccccc; vertical-align: middle; margin-bottom: 3px;}
}
@media screen and (min-width: 500px) and (max-width: 554px) { /* for that awkward transition region */
	.width_300_pic_and_caption_2	{margin: auto; border: 1px solid #cccccc; padding: 3px; font: 11px/1.4em Arial, sans-serif;}
	.width_300_pic_and_caption_2 img	{border: 1px solid #cccccc; vertical-align: middle; margin-bottom: 3px;}
}
@media screen and (min-width: 555px) and (max-width: 969px) { 
	.width_300_pic_and_caption_2	{margin-bottom: 10px; width: 302px; border: 1px solid #cccccc; padding: 3px; font: 11px/1.4em Arial, sans-serif;}
	.width_300_pic_and_caption_2 img	{width: auto; border: 1px solid #cccccc; vertical-align: middle; margin-bottom: 3px;}
}
@media screen and (min-width: 970px) { 
	.width_300_pic_and_caption_2	{width: 302px; border: 1px solid #cccccc; padding: 3px; font: 11px/1.4em Arial, sans-serif;}
	.width_300_pic_and_caption_2 img	{width: auto; border: 1px solid #cccccc; vertical-align: middle; margin-bottom: 3px;}
	.go_right_300_2			{margin: 0; float: right;}
	.go_left_300_2			{margin: 0; float: left;}
}

/* responsive videos - cool CSS trick by tjkdesign.com */
.max_width_video_640  {
	width: 640px;
	max-width: 100%;
}
.video_container {
	position: relative;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.four_by_three_video  {
	padding-bottom: 75%;
}

.sixteen_by_nine_video  {
	padding-bottom: 56.25%;
}

.video_container iframe,  
.video_container object,  
.video_container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#footer		{clear: both;}

#sitesearch	{width: 90%; position: absolute; top: 10px; right: 10px;}
@media screen and (min-width: 600px) {  /* so that search box shrinks as screen gets larger */
	#sitesearch	{width: 38%; position: absolute; top: 10px; right: 10px;}
}

#escribe	{padding-top: 0px; display: inline;}  /* code resides in #footer to prevent crowding at the top for smaller screens */
#escribe a {text-decoration: none;}
@media screen and (min-width: 600px) {  /* so that this element goes to the top as screen gets larger */
	#escribe	{position: absolute; left: 10px; top: 10px;}
}

#top		{position: absolute; top: 0;}
#main		{font-size: 100%;}	/* an element rendered inactive to be phased out in favor of #wrap */
#wrap		{width: 90%; margin:0 auto; font-size: 100%; padding-top: 11em; max-width: 1366px;}
#content_left_2_1	{float: left; width: 64%;}
#sidebar_right_2_1	{float: right; width: 32%; padding-left: 4px; background-color: #ffffff; border-left: #cccccc 1px solid;}
#content_left_3_1	{float: left; width: 72%;}
#sidebar_right_3_1	{float: right; width: 24%; padding-left: 4px; background-color: #ffffff; border-left: #cccccc 1px solid;}

/* INFO.PHP PAGES */
#content_info_php			{width: 100%;}
#content_first_info_php			{width: 100%;}
#songs_info_php				{width: 100%;}
#featured_cds_info_php			{width: 100%;}

@media screen and (min-width: 500px) {
	#content_info_php		{width: 100%; display: table;}
	#content_first_info_php		{display: table-row;}
	#songs_info_php			{display: table-cell;}
	#featured_cds_info_php		{padding-left: 10px; display: table-cell;}
}

#artist_data				{width: 100%;}
#artist_data_row			{width: 100%;}
#artist_data_cell_all			{width: 100%;}
#artist_data_cell_LHS			{width: 100%;}
#artist_data_cell_RHS			{width: 100%;}

@media screen and (min-width: 500px) {
	#artist_data			{width: 100%; padding-bottom: 10px; display: table;}
	#artist_data_row		{display: table-row;}
	#artist_data_cell_all		{vertical-align: top; display: table-cell;}
	#artist_data_cell_LHS		{vertical-align: top; padding-right: 10px; width: 50%; display: table-cell;}
	#artist_data_cell_RHS		{border-left: 1px solid #cccccc; vertical-align: top; padding-left: 10px; width: 50%; display: table-cell;}
}

/* TOP NAVIGATION MENUS */
#topmenu_lg 		{font-family: Arial, Helvetica, sans-serif; font-size: 90.25%; line-height: 120%; font-weight: 700; background-color: #ffffff; position: absolute; top: 80px; left: 50%; margin-left: -29.5em;}
#topmenu_lg a 		{color: #ffffff; font-weight: 900; text-decoration: none;}
#topmenu_lg a:hover 	{color: #ffffff; background-color:#cccccc; font-weight: 900; text-decoration: none;}
#topmenu_lg a:active 	{color: #ffffff; font-weight: 900; text-decoration: none;}
#topmenu_lg a:visited	{color: #ffffff; font-weight: 900; text-decoration: none;}

#topmenu_sm 		{font-family: Arial, Helvetica, sans-serif; font-size: 90.25%; line-height: 120%; font-weight: 700; background-color: #ffffff; position: absolute; top: 80px; left: 50%; margin-left: -11em;}
#topmenu_sm a 		{color: #ffffff; font-weight: 900; text-decoration: none;}
#topmenu_sm a:hover 	{color: #ffffff; background-color:#cccccc; font-weight: 900; text-decoration: none;}
#topmenu_sm a:active 	{color: #ffffff; font-weight: 900; text-decoration: none;}
#topmenu_sm a:visited	{color: #ffffff; font-weight: 900; text-decoration: none;}

#topmenu_lg 		{display: none;}	/* switcharoo for top menus */
@media screen and (min-width: 43em) {
	#topmenu_lg	{display: inline-block;}
	#topmenu_sm 	{display: none;}
}

/* HOME PAGE */
/* A 3-column layout arranged width-wise as follows: 32% (col 1) - 2% (space) - 32% (col 2) - 2% (space) - 32% (col 3) */
/* For now, keep breakpoints at 500px and 700 px.  If any changes need to be made, modify elements below accordingly. */

#home_col_1		{width: 100%;}
@media screen and (min-width: 500px) {  /* so that this column floats to left as screen gets larger */
	#home_col_1	{width: 48.5%; float: left; padding-bottom: 1em;}
}

#home_col_2		{width: 100%;}
@media screen and (min-width: 500px) {  /* so that this column floats to right with a LHS border as screen gets larger */
	#home_col_2	{width: 48.5%; float: right; padding-bottom: 1em; padding-left: 1.5%; border-left: #cccccc 1px solid;}
}

#home_content		{width: 100%;}
@media screen and (min-width: 700px) {  /* so that this block floats to left as screen gets larger */
	#home_content	{width: 66.0%; float: left;}
}

#home_col_3		{width: 100%;}
@media screen and (min-width: 700px) {  /* so that this column floats to right with a LHS border as screen gets larger */
	#home_col_3	{width: 32.0%; float: right; padding-bottom: 1em; padding-left: 1.0000%; border-left: #cccccc 1px solid;}
}

/* The element below is just for midsize screens where columns 1 and 2 line up side by side above column 3. */
#home_separator		{display: none;}
@media screen and (min-width: 500px) and (max-width: 699px) {
	#home_separator	{display: block; clear: both;}  /* so that columns 1 and 2 do not spill on top of column 3 below */
}

/* BASIC STATIC PAGES LAYOUT */
/* As used for these pages: bands and artists, song titles, articles, announcements, about, etc. */
/* For now, keep breakpoints at 500px and 700 px.  If any changes need to be made, modify elements below accordingly. */

#content		{width: 100%;}
@media screen and (min-width: 500px) and (max-width: 699px) {
	#content		{float: left; width: 66%; padding-right: 1%; border-right: #cccccc 1px solid;}
}
@media screen and (min-width: 700px) {
	#content		{float: left; width: 74%; padding-right: 1%; border-right: #cccccc 1px solid;}
}

#sidebar		{width: 100%;}
@media screen and (min-width: 500px) and (max-width: 699px) {
	#sidebar		{float: right; width: 32%;}
}
@media screen and (min-width: 700px) {
	#sidebar		{float: right; width: 24%;}
}

/* BANDS AND ARTISTS NAVIGATION PAGES */
#bands_artists_nav_featured 			{width: 100%; font-size: 110%; line-height: 200%;}
#bands_artists_nav_featured_first		{width: 100%;}
#bands_artists_nav_featured_lhs			{width: 100%;}
#bands_artists_nav_featured_rhs			{width: 100%;}

@media screen and (min-width: 43em) {
	#bands_artists_nav_featured		{width: 100%; padding-bottom: 1em; display: table; font-size: 100%; line-height: 120%;}
	#bands_artists_nav_featured_first	{display: table-row;}
	#bands_artists_nav_featured_lhs		{width: 50%; display: table-cell;}
	#bands_artists_nav_featured_rhs		{display: table-cell; padding-left: 1em; border-left: #cccccc 1px solid;}
}

#bands_artists_nav_more 			{width: 100%; font-size: 110%; line-height: 200%;}
#bands_artists_nav_more_first			{width: 100%;}
#bands_artists_nav_more_lhs			{width: 100%;}
#bands_artists_nav_more_rhs			{width: 100%;}

@media screen and (min-width: 43em) {
	#bands_artists_nav_more			{width: 100%; padding-bottom: 1em; display: table; font-size: 100%; line-height: 120%;}
	#bands_artists_nav_more_first		{display: table-row;}
	#bands_artists_nav_more_lhs		{width: 50%; display: table-cell;}
	#bands_artists_nav_more_rhs		{display: table-cell; padding-left: 1em; border-left: #cccccc 1px solid;}
}

/* ANNOUNCEMENTS PAGES */
.tweet-featured {
	margin-bottom: 2em;
}
@media screen and (min-width: 800px) {
	.tweet-featured {
		float: right;
		width: 280px;
		margin-left: 1em;
		margin-bottom: 1em;
	}
}