@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width: 100%;
}
/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* The body element provides an excellent opportunity to set some default settings. I took this opportunity to set the font properties and values and allow the rest of the document to inherit the settings set here unless I override them. */

/* =============================================================================
   Start Body Elements
   ========================================================================== */
body {
	color: #354A5F;
	background-color: #D6DADF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(15px,18px);

	/* background-image: url(../images/star.gif); */
}
/*  Start Forcing Vertical Scrollbar Gutter - Prevents Page Shift  */
html {
	overflow-y: scroll;
}
/* 	End Forcing Vertical Scrollbar Gutter - Prevents Page Shift  */	

/* =============================================================================
  End Body Elements
   ========================================================================== */
   
   
/* 	Typical Media Query Breakpoints - 
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery_breakpoints  */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

pre {
	font-size: 2.7vw;
	/* 	color:#000; */
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

.wrapper {
	margin: auto;
	max-width: 1232px;
}

}
/* Start Header1  - This Header is height: 0px and holds links to:

Header1  - This Header is height: 15px and holds links to:

Colorbox:
../css/colorbox.css
../js/jquery.colorbox.js
../js/jquery.min.js (used for both the Colorbox, Golden Forms Progressive Player and Zetta Menu)
** colorbox script

Zetta Menu:
../css/zetta-menu-dark-default/quarry.css
../css/font-awesome.min.css (used for both the Golden Forms and Zetta Menu)
../css/fonts/...
../js/zm.jquery.js
** zetta-menu script
http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css

Progressive Player:
../js/mediaelement-and-player.min.js"
../css/progression-player.css"
../css/skin-default-dark.css" /> Dark Skin

*/

#header1 {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	padding-top: 40px;
	padding-bottom: 30px;
	background-color: #71808F; #5D6E7F; #85929F;
	border-radius: 10px 10px 0px 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #AEB6BF;
}
/* Header1 without logo */

/* #header1 {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	height: 8px;

} */

/* End Header1 */

/* Start Header2 - This Header is the main Zetta Navigation. The
   zetta-menu-dark-default_quarry.css looks after most of the style  */

#header2 {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}
/* End Header2 */

/*  Start Header3 - Holds the "Greeting" to Guitar Player / User 
    NOTE: The height is change to 0px to hide Header 3   */

#header3 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	height: 0px;
}
.header3_left_side {
	clear: none;
	float: left;
	display: block;
	color: #F4F4F4;
	padding-top: 6px;
}
.header3_right_side {
	clear: none;
	float: right;
	margin-left: 1%;
	display: block;
	margin-right: 4px;
	color: #F4F4F4;
	padding-top: 15px;
}
.header3_right_side a:link {
	color: #FFFFFF;
	text-decoration: none;
}
.header3_right_side a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
.header3_right_side a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
.header3_right_side a:active {
	color: #FFFFFF;
	text-decoration: none;
}
/*  End Header3 */

#content_wrapper {
	clear: both;
	background-color: #F0F3F5; /*  #EAECEF; #F0F3F5; */
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	/* 	background-repeat: repeat-x;
	background-image: url(../images/interface_content_wrapper_bg.png);
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000000; */
	padding-top: 5px;
	padding-bottom: 4px;
	margin-bottom: 2px;
	border-radius: 0px 0px 5px 5px;
}
.content {
	clear: both;
	display: block;
	margin-top: 4px;
	margin-right: 5px;
	margin-left: 5px;
	margin-bottom: 2px;
	padding-bottom: 2px;
}
.content a:link {
	color: #354A5F;
	text-decoration: underline;
	text-decoration-color: #CCCCCC;
	
}
.content a:visited {
	color: #354A5F;
	text-decoration: underline;
	text-decoration-color: #CCCCCC;
}
.content a:hover {
	color: #000000;
	text-decoration: underline;
	text-decoration-color: #CCCCCC;
}
.content a:active {
	color: #354A5F;
	text-decoration: underline;
	text-decoration-color: #CCCCCC;
}
#footer {
	text-align: center;
	padding-top: 5px;
	clear: both;
	margin-top: 2px;
	display: block;
	border: 1px solid #999999;
	background-color: #FFFFFF;
	padding-bottom: 0px;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}
/*  End footer */


/* Pagination is used with Tom-Muck Page List Servior Behavior. However, when added to a page, the extension does not display in the Dreamweaver Server Behaviors Panel  */

.pagination {
	vertical-align: middle;
	margin-left: 2px;
	border: 1px solid #999999;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: #CCCCCC;
}
.pagination_link {
	vertical-align: middle;
	margin-left: 4px;
	border: 1px solid #999999;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: #F4F4F4;
}
.pagination_link a:link {
	color: #555F61;
	text-decoration: none;
}
.pagination_link:hover {
	background-color: #CCCCCC;
	text-decoration: none;
}
.pagination_link a:visited {
	color: #555F61;
	text-decoration: none;
}
.pagination_link: active {
	background-color: #CCCCCC;
	text-decoration: none;
}
/* =============================================================================
  Start Form Content (Golden Forms .css for Form style except Form Border)
   ========================================================================== */
.form_border {
	border: 1px solid #999999;
	background: #FFFFFF;
	margin-top: 0px;
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 8px;
	margin-bottom: 8px;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}
/* Guitar Tips */
.form_border3 {
	padding-top: 6px;
	padding-bottom: 7px;
	padding-left: 8px;
	padding-right: 8px;
	border-bottom-width: 1px;
	border-bottom-color: #FFFFFF;
	border-bottom-style: solid;
	background-color: #CCCCCC;
}
/* =============================================================================
   End Form Content (Golden Forms .css for Form style except Form Border)
   ========================================================================== */
   
/* =============================================================================
   Start MyTable Content
   ========================================================================== */
table.mytable {
	width: 100%;
	margin-bottom: 3px;
	border: 1px solid #E6E6E6;
	/*  1px added for Firefox in order to view table left border */	
	margin-top: 1px;
	background: #FFFFFF;
}
caption.mytable {
	text-align: left;
	padding-top: 2px;
	background: #F4F4F4;
	padding-bottom: 5px;
	margin-bottom: 3px;
	border: 1px solid #D6D6D6;
	padding-left: 5px;
}
table.mytable, td.mytable {
	border-collapse: collapse;
	/*	line-height: 1.5;  */
	line-height: 1.6;
	border: 1px solid #D6D6D6;
}
thead.mytable th.mytable, tbody.mytable th.mytable {
	background: #F4F4F4;
	border: 1px solid #D6D6D6;
	text-align: center;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-right: 5px;
	padding-left: 5px;
}
/* thead.mytable th.mytable:hover {
	background: #E9E9E9;
} */
tbody.mytable th.mytable {
	background: #FAFAFA;
	border-top: 1px solid #D6D6D6;
	text-align: left;
}
tbody.mytable tr.mytable td.mytable {
	padding: 5px 2px 5px 5px;
}
tbody.mytable tr.mytable:hover {
	background: #F7F7F7; /* url(../images/table_tr_bck.gif) repeat; */
}
tbody.mytable tr.mytable:hover td.mytable {
}
tfoot.mytable td.mytable, tfoot.mytable th.mytable {
	border-top: 1px solid #D6D6D6;
	padding: 5px;
	background: #F4F4F4 url(../images/table_foot_bck.gif) repeat;
	text-align: center;
	border-bottom: 1px solid #CCCCCC;
}
thead.mytable th.mytable a:link {
	color: #555F61;
	text-decoration: underline;
}
thead.mytable th.mytable a:visited {
	color: #555F61;
	text-decoration: underline;
}
thead.mytable th.mytable a:hover {
	color: #000000;
	text-decoration: underline;
}
thead.mytable th.mytable a:active {
	color: #555F61;
	text-decoration: underline;
}
/* =============================================================================
   End MyTable Content
   ========================================================================== */
   
/* =============================================================================
   Start pop up for hint box
   ========================================================================== */
#hintbox {
	position: absolute;
	top: 0;
	width: 150px; /* Default width of hint. */
	padding: 3px;
	z-index: 100;
	visibility: hidden;
	background: #E9E9E9;
	text-align: left;
	border: 1px solid #CCCCCC;
	line-height: 18px;
}
.hintanchor {
	/*  CSS for link that shows hint onmouseover */
	margin: 3px 8px;
	text-decoration: none;
}
/*  CSS for show/hide form fields */
div.hideDiv {
	display: none
}
/* =============================================================================
   End pop up for hint box 
   ========================================================================== */

/* =============================================================================
    Start Switch Content
   ========================================================================== */   
.handcursor {
	cursor: pointer;
	clear: both;
}
.show_switch {
	padding: 8px 8px 4px;
	background: #F9FAFD;
	margin-bottom: 2px;
}
/* =============================================================================
    End Switch Content
   ========================================================================== */   

/* =============================================================================
   Start Comment Box 
   ========================================================================== */
.commentbox {
	background-color: #E9E9E9;
	padding: 5px;
}
.commentfooter {
	background: url(../images/comment_arrow_e9e9e9.gif) no-repeat 20px -2px;
	padding-left: 60px;
	padding-top: 5px;
	margin-bottom: 8px;
	font-size: 90%;
	color: #999999;
	padding-bottom: 5px;
}
/* =============================================================================
   End Comment Box 
   ========================================================================== */
   
/* =============================================================================
   Start Page Title spans, fonts and colors
   ========================================================================== */
.page_title1 {
	font-size: 21px;
	color: #354A5F;
	margin-left: 2px;
}
.page_title2 {
	font-size: 21px;
	color: #E54B02;
}
.page_title3 {
	color: #999999;
	font-size: 21px;
}
.page_title_left {
	float: left;
	margin-bottom: 8px;
	margin-left: 2px;
}
.page_title_left a:link {
	color: #354A5F;
	text-decoration: none;
}
.page_title_left a:visited {
	color: #354A5F;
}
.page_title_left a:hover {
	color: #000000;
	text-decoration: none;
}
.page_title_right {
	float: right;
	text-align: right;
	margin-top: 3px;
	margin-left: 2px;
	padding-right: 2px;
}
.page_title_right a:link {
	color: #354A5F;
	text-decoration: none;
}
.page_title_right a:visited {
	color: #354A5F;
	text-decoration: none;
}
.page_title_right a:hover {
	color: #000000;
	text-decoration: none;
}
.record_activity {
	font-size: 10px;
	color: #555F61;
}
.record_activity_new {
	color: #00FF00;
	font-size: 10px;
}
.record_activity_hot {
	color: #CC0000;
	font-size: 10px;
}
.record_activity_popular {
	color: #FF00FF;
	font-size: 10px;
}
.record_activity_plain {
	color: #555F61;
	font-size: 10px;
}
/* =============================================================================
   End Page Title spans, fonts and colors
   ========================================================================== */
   
/* =============================================================================
   Start Horizontal Rules 
   ========================================================================== */
/* Since I floated the page_title_left div to the left and page_title_right div to the right I will have to clear both of these floats (hr_page_title) before I can use this next div in the layout   */

.hr_page_title {
	clear: both;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #354A5F;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}
.hr_page_underline {
	border-top: 1px solid #E9E9E9;
	margin-top: 1px;
}
.hr_page_underline2 {
	border-top: 1px solid #CCCCCC;
	margin-top: 5px;
}
.hr_tabs {
	border-top: 1px solid #CCCCCC;
	margin-top: 1px;
	margin-bottom: 5px;
}
.hr_light {
	border-top: 1px solid #E9E9E9;
	margin-top: 4px;
	margin-bottom: 8px;
}
.spacer_height_15px: {
 height:15px;
 width:100%;
}
/* =============================================================================
   End Horizontal Rules 
   ========================================================================== */

/* =============================================================================
   Start Image floats 
   ========================================================================== */
.image_left {
	margin-right: 8px;
	float: left;
	margin-bottom: 2px;
	padding: 8px;
	border: 1px solid #999999;
	border-radius: 5px 5px 5px 5px;
}
.image_right {
	float: right;
	margin-left: 8px;
	border: 1px solid #CCCCCC;
	padding: 10px;
	margin-bottom: 5px;
	margin-top: 2px;
	margin-right: 3px;
	border-radius: 5px 5px 5px 5px;
}
.image_center {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	padding: 10px;
	border: 1px solid #CCCCCC;
	border-radius: 5px 5px 5px 5px;
}
.image_profile {
	border: 1px dotted #CCCCCC;
	background: #FFFFFF;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	margin-bottom: 5px;
}
.image_page_title {
	padding-left: 2px;
}
.image_left_guestbook {
	margin-right: 5px;
	float: left;
	margin-bottom: 5px;
	border: 1px solid #CCCCCC;
	padding: 5px;
	background-color: #FEFEFE;
}
/* Thumbnail images - To force image resize and keep aspect ratio when scaling an image. 
   Primarily used at song detail page   */
#wrap {
	height: 130px;
	width: 130px;
	margin-right: 30px;
	margin-bottom: 28px;
	margin-top: 4px;
	float: left;
	border-radius: 5px 5px 5px 5px;
}
#wrap img {
	max-height: 100%;
	max-width: 100%;
	padding: 10px;
	background-color: #F9FAFD;
	border: 1px solid #CCCCCC;
}
/* Thumbnail image - Primarily used for User pic (avaitar) profile */
.wrap1 {
	border: 1px solid #CCCCCC;
	padding: 10px;
	background-color: #F9FAFD;
	margin-right: 10px;
	margin-bottom: 10px;
	border-radius: 5px 5px 5px 5px;
}
.wrap1 img {
	max-height: 100%;
	max-width: 100%;
}
.wrap {
	/* height: and width: to be specified at page
(i.e. <div class="wrap" style="width:48px; height:48px;">  - User pic (avaitar) lists
<div class="wrap" style="width:48px; height:48px;">  - BT Album Image 
<div class="wrap" style="width:128px; height:128px;">  wrap1 - User Profile pic   */
	padding: 5px;
	background-color: #F9FAFD;
	border: 1px solid #CCCCCC;
}
.wrap img {
	max-height: 100%;
	max-width: 100%;
}
/* =============================================================================
   End Image floats 
   ========================================================================== */  
   
/* =============================================================================
   Start Clearing Floats 
   ========================================================================== */     
.clearit {
	clear: both;
	margin: 0px;
	padding: 0px;
}
.clearit_right {
	clear: right;
	margin: 0px;
	padding: 0px;
}
.clearit_left {
	clear: left;
	margin: 0px;
	padding: 0px;
}
/* A wrapper of sort to bind containers that exceed div containers */
.bindit {
}
/* =============================================================================
   End Clearing Floats 
   ========================================================================== */    
   
/* =============================================================================
   Start Content Holders
   ========================================================================== */
   
/* Navigation tabs for SORT BY at Song list pages */
.sortby_tabs {
	background-color: #F4F4F4;
	padding-left: 5px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #999;
	border-right-color: #999;
	border-left-color: #999;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 4px;
	padding-bottom: 4px;
	border-radius: 5px 5px 0px 0px;
}
.sortby_tabs a:link {
	color: #354A5F;
	text-decoration: none;
}
.sortby_tabs a:visited {
	color: #354A5F;
	text-decoration: none;
}
.sortby_tabs:hover {
	background-color: #CCCCCC;
	text-decoration: none;
}
.sortby_tabs:active {
	background-color: #CCCCCC;
	text-decoration: none;
}
.title_holder {
	border: 1px solid #666666;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	margin-bottom: 6px;
	margin-top: 6px;
	/** border-radius: 5px 5px 5px 5px; **/
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
	background-color: #EAECEF;
}
.title_holder a:link {
	color: #354A5F;
	text-decoration: underline;
	text-decoration-color: #999999;

}
.title_holder a:visited {
	color: #354A5F;
	text-decoration: underline;
	text-decoration-color: #999999;
}
.title_holder a:hover {
	color: #000000;
	text-decoration: underline;
	text-decoration-color: #666666;
}
.title_holder a:active {
	color: #354A5F;
	text-decoration: underline;
	text-decoration-color: #999999;
}
.header2_title {
	font-size: 20px;
}
/* The following leftDiv and rightDiv are here to 
make two DIVs Left and Right aligned inside title_holder DIV */

.leftDiv {
	float: left;
}
.rightDiv {
	/* 	width: 25%; */
	float: right;
	text-align: right;
}
.content_border {
	border: 1px solid #999999;
	background: #FFFFFF;
	margin-top: 0px;
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 8px;
	margin-bottom: 6px;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}
.content_border_links {
	border: 1px solid #CCCCCC;
	background: #FFFFFF;
	margin-top: 0px;
	padding-top: 10px;
	padding-right: 8px;
	padding-bottom: 10px;
	padding-left: 8px;
	margin-bottom: 6px;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}

.audio_player_border {
	border: 1px solid #666666;
	background: #FFFFFF;
	margin-top: 0px;
	padding-top: 15px;
	padding-bottom: 8px;
	padding-left: 7px;
	margin-bottom: 6px;
	padding-right: 15px;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
	color: #999;
}
/* Navigation tabs for Contractible Headers script at Song Detail pages */
.backgroundbox {
	background-color: #F4F4F4;
	padding-left: 5px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-left-color: #CCC;
	margin-right: 2px;
	float: left;
	padding-right: 5px;
	padding-top: 4px;
	padding-bottom: 4px;
	border-radius: 5px 5px 0px 0px;
}
.backgroundbox a:link {
	color: #555F61;
	text-decoration: none;
}
.backgroundbox a:visited {
	color: #555F61;
	text-decoration: none;
}
.backgroundbox:hover {
	background-color: #CCCCCC;
	text-decoration: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #999;
	border-right-color: #999;
	border-left-color: #999;
}
.backgroundbox:active {
	background-color: #CCCCCC;
	text-decoration: none;
}
/* =============================================================================
   End Content Holders
   ========================================================================== */

/* =============================================================================
   Start pop up for hint box
   ========================================================================== */
#hintbox {
	position: absolute;
	top: 0;
	width: 150px;
	padding: 5px;
	z-index: 100;
	visibility: hidden;
	background: #F4F4F4;
	text-align: left;
	border: 1px solid #CCCCCC;
	line-height: 18px;
}
.hintanchor {
	/*  CSS for link that shows hint onmouseover */
	margin: 3px 8px;
	text-decoration: none;
}
/*  CSS for show/hide form fields */
div.hideDiv {
	display: none
}
/* =============================================================================
   End pop up for hint box
   ========================================================================== */

/* =============================================================================
   Start Ad Box 
   ========================================================================== */
#sponsorAdDiv {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	border: 1px solid #CCCCCC;
}
/* =============================================================================
   End Ad Box
   ========================================================================== */
/* =============================================================================
   Start Tabs Menu - http://www.dynamicdrive.com/style/csslibrary/item/matt_black_tabs/ 
   used on songs_all_alt.asp and songs_by_genre_licks_alt.asp
   ========================================================================== */
.mattblacktabs {
	width: 100%;
	overflow: hidden;
}
.mattblacktabs ul {
	margin: 0;
	padding: 0;
	padding-left: 0px;
	list-style-type: none;
}
.mattblacktabs li {
	display: inline;
	margin: 0;
}
.mattblacktabs li a {
	float: left;
	display: block;
	text-decoration: none;
	color: #FFF;
	background-color: #F4F4F4;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #999;
}
.mattblacktabs li a:visited {
	color: #354A5F;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a {
	background-color: #CCCCCC;
}