/******Rod's Music*********/
/*** last update 26.07.2024 ****/
/*** new layout 4 acrooss and 3 across 29.10.2024 ***/

*	 {
  margin: 0;
  padding: 0;
  outline: none;
  }
  
#container {
	width: 850px;  
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	}
#content {
	position: absolute;
	overflow: visible;
	top: 0px; height: auto; width: 850px;
	}
#centre {
	position: absolute;
	overflow: visible; 
	z-index: 50;
	top:50px; height: 2350px; width: 100%;
	}
#header {
	position: fixed;
	z-index: 200;
	top: 0px; height: 100px;
	width: 850px;  
	}
#audio_container {
	position: absolute;
	top: 120px;
	left: 72%;
	width: 220px;
	height: 60px;
	}
	#audio-player { 
	width: 95%;
	}
#volume {
	position: absolute;
	top: 20px; left: 150px; 
	}
#buttons {
	width: 220px;
	display: block;
	margin-left: 10px;
	margin-top: 5px;
	}
button#play, button#pause, button#stop {
	width: 50px;
	height: 50px;
	background: url(../images/play-x_50x50.png) 50% no-repeat;
	float: left;
	margin: 0 0 0 10px;
	border: none;
	}
button#pause {
	background: url(../images/pause-x_50x50.png) 50% no-repeat;
	}
button#stop {
	background: url(../images/stop-x_50x50.png) 50% no-repeat;
	margin-left: 10px;
	}
#tracker {
	position: absolute;
	width: 155px;
	top: 21px;
	left: 150px;
	}
#duration {
	font-size: 14px;
	font-weight: normal;
	color: rgb(115, 15, 70); 
	}
#footnote {
	position: absolute;
	top: 520px;
	left: 10%; right: 20%;
	}	
#fixed-pane {
	position: fixed;
	z-index: 190;
	top: 100px; height: 120px;
	width: 850px; 
	}
#moving-pane-3 {
	position: absolute;
	z-index: 180;
	top: -80px; height: auto;
	width: 850px; 
	display: none	
	}
#moving-pane-4 {
	position: absolute;
	z-index: 180;
	top: -90px; height: auto;
	width: 850px;		
	}
#audio-info, #miniheader, #calc_container {
	position: absolute;
	width: 60%;
	top: 300px;
	left: 8%;
	height: auto;
	z-index: 60;
	padding: 10px 0px 25px 25px;
    margin: 0px 0px 0px 0%;
	}
#miniheader, #audio-info	{
	left: 10%;
	top: 20px;
	width: 50%;
	height: 50px;
	padding: 0px 10px 30px 25px;
	}	

#playlistA1_container, #playlistA2_container, #playlistA3_container, #playlistA4_container, #playlistB1_container, #playlistB2_container, #playlistB3_container, #playlistB4_container, 
#playlistC1_container, #playlistC2_container, #playlistC3_container, #playlistC4_container, #playlistD1_container, #playlistD2_container, #playlistD3_container, #playlistD4_container,   
#playlistE1_container, #playlistE2_container, #playlistE3_container, #playlistE4_container, #playlistF1_container, #playlistF2_container, #playlistF3_container, #playlistF4_container, 
#playlistG1_container, #playlistG2_container, #playlistG3_container, #playlistG4_container, #playlistH1_container, #playlistH2_container, #playlistH3_container, #playlistH4_container, 
#playlistJ1_container, #playlistJ2_container, #playlistJ3_container, #playlistJ4_container, #playlistK1_container, #playlistK2_container, #playlistK3_container, #playlistK4_container, 
#playlistL1_container, #playlistL2_container, #playlistL3_container, #playlistL4_container, #playlistM1_container, #playlistM2_container, #playlistM3_container, #playlistM4_container, 
#playlistN1_container, #playlistN2_container, #playlistN3_container, #playlistN4_container, #playlistZ1_container, #playlistZ2_container, #playlistZ3_container, #playlistZ4_container {
	position: absolute;
	width: 30%;
	height: auto;
	z-index: 60;
	padding: 10px 0px 25px 25px;
    margin: 0px 0px 0px 0%;
	}
	
#playlistA1_container, #playlistB1_container, #playlistC1_container, #playlistD1_container, #playlistE1_container, #playlistF1_container, #playlistG1_container,  
#playlistH1_container, #playlistJ1_container, #playlistK1_container, #playlistL1_container, #playlistM1_container, #playlistN1_container, #playlistZ1_container {
	left: 7%;
		}	
#playlistA2_container, #playlistB2_container, #playlistC2_container, #playlistD2_container, #playlistE2_container, #playlistF2_container, #playlistG2_container,
#playlistH2_container, #playlistJ2_container, #playlistK2_container, #playlistL2_container, #playlistM2_container, #playlistN2_container, #playlistZ2_container  {
	left: 30%;
		}
#playlistA3_container, #playlistB3_container, #playlistC3_container, #playlistD3_container, #playlistE3_container, #playlistF3_container, #playlistG3_container,
#playlistH3_container, #playlistJ3_container, #playlistK3_container, #playlistL3_container, #playlistM3_container, #playlistN3_container, #playlistZ3_container {
	left: 53%;
		}	
#playlistA4_container, #playlistB4_container, #playlistC4_container, #playlistD4_container, #playlistE4_container, #playlistF4_container, #playlistG4_container,
#playlistH4_container, #playlistJ4_container, #playlistK4_container, #playlistL4_container, #playlistM4_container, #playlistN4_container, #playlistZ4_container  {
	left: 76%;
		}		
		
	
#playlistZ1_container, #playlistZ2_container, #playlistZ3_container, #playlistZ4_container {
	top: 2720px;
}		
#playlistA1_container, #playlistA2_container, #playlistA3_container, #playlistA4_container {
	top: 2530px;
}	
#playlistB1_container, #playlistB2_container, #playlistB3_container, #playlistB4_container {
	top: 2340px;
}
#playlistC1_container, #playlistC2_container, #playlistC3_container, #playlistC4_container  {
	top: 2150px;
	}
#playlistD1_container, #playlistD2_container, #playlistD3_container, #playlistD4_container {
	top: 1960px;
	}
#playlistE1_container, #playlistE2_container, #playlistE3_container, #playlistE4_container {
	top: 1770px;
	}
#playlistF1_container, #playlistF2_container, #playlistF3_container, #playlistF4_container {
	top: 1580px;
	}
#playlistG1_container, #playlistG2_container, #playlistG3_container, #playlistG4_container {
	top: 1390px;
	}
#playlistH1_container, #playlistH2_container, #playlistH3_container, #playlistH4_container {
	top: 1200px;
	}
#playlistJ1_container, #playlistJ2_container, #playlistJ3_container, #playlistJ4_container {
	top: 1010px;
	}
#playlistK1_container, #playlistK2_container, #playlistK3_container, #playlistK4_container {
	top: 820px;
	}
#playlistL1_container, #playlistL2_container, #playlistL3_container, #playlistL4_container {
	top: 630px;
	}
#playlistM1_container, #playlistM2_container, #playlistM3_container, #playlistM4_container {
	top: 440px;
	}
#playlistN1_container, #playlistN2_container, #playlistN3_container, #playlistN4_container {
	top: 250px;
	}	

#footer_ndl  {
	position: absolute;
	right: 0; left: 0; height: 30px; bottom: 0px;
	z-index: 80;
	display: inline
	}

/*************
Backgrounds
**********************/ 
body {
	background: url(../images/bg_a2.jpg) 0% 0% repeat;
	background: rgb(0,0,50);
	}
#header {
	background: url(../images/guitarneck_1100.jpg) 0% 0% no-repeat;
	}	
#centre, #fixed-pane {
	background: rgb(0,0,80);
	}
#footer_ndl, #footer_dl{
	background: rgb(210,210,220);
	}

/*************
Borders 
**********************/ 
#header {
	border-left: rgb(50, 50, 50) 3px solid;
	border-bottom: rgb(50, 50, 50) 3px solid;
	}
#centre {
	border-top: rgb(100, 100, 80) 1px solid;
	border-right: rgb(100, 100, 80) 1px solid;	
	border-left: rgb(100, 100, 80) 1px solid;
	border-bottom: rgb(100, 100, 80) 1px solid;
	}
#audio-info, #miniheader {
	border-top: rgb(100, 100, 80) 1px solid;
	border-bottom: rgb(100, 100, 80) 1px solid;
	}
#footer_ndl {
	border-top: rgb(100, 100, 80) 1px solid;
	}

/*************
Shadows and corner radii 
**********************/ 
#header {
	border-bottom-left-radius:9px;  
	border-bottom-right-radius:9px; 
	box-shadow: -6px 7px 10px rgb(30, 30, 25);
	}
#footer_ndl, #centre  {
	border-bottom-left-radius:7px;  
	border-bottom-right-radius:7px; 
	box-shadow: -2px 2px 5px rgb(50, 50, 40); 
	}
.Plist, .Plist_DL {
	border-radius:5px; 
	box-shadow: -5px 5px 7px rgb(50, 50, 40);
	}
.clearfix { clear: both; }

 /*#header text and layout*/
 #header h1  {
	font: bold 24px Arial, Helvetica,  "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
	margin: 2px 0 0 70px;
	color: rgb(252,252, 252);
	letter-spacing: 2px;
	text-align: left
	} 
#header h1 em {
	font: bold 18px Arial, Helvetica,  "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
	margin: 0 0 0 20px;
	color: rgb(252,252, 252);
	letter-spacing: 2px;
	text-align: left
	} 
#header P  { 
	font: bold 11px Verdana, Kalimati, "DejaVu Sans", Tahoma, Geneva, sans-serif;
	margin: 10px 0 0 50px;
	color: rgb(250,250,252);
	}

.header_icons { 
	text-align: right;
	margin: 30px 20px 0 0
	}
.header_subtitle { 
	text-align: left;
	margin: 0 0 0 0
	}
.header_right {
	position: fixed;
	top: 10px;
	left: 60%;
	}
	/***main text area***/	
body {
	font: normal 12px Verdana, Kalimati, "DejaVu Sans", Tahoma, Geneva, sans-serif;
	color: rgb(0, 0, 90)
	}
.style_A P {
	margin:  5px 0px 5px 110px;
		}
.style_A P em {
	font-style: normal;
	font-weight: bold
	}
/***intro texts and layout****/

#miniheader p, #miniheader p em { 
	color: rgb(220,220,220);
	}
#miniheader P {
	font: normal 12px Arial, Helvetica,  "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
	font-style: normal;
	}
#miniheader p em { 
	font: bold 13px Verdana, Kalimati, "DejaVu Sans", Tahoma, Geneva, sans-serif;
	}

/***audio-info text and layout****/
.tunetitle {
	font: bold 14px Arial, Helvetica,  "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
	 margin: 20px 0px 20px -20px;
	 color: rgb(115, 15, 70);
	 color: rgb(220, 220, 220);

	}
.tunedesc {
	font: normal 13px Arial, Helvet;	
	color: rgb(220, 220, 220);	
	}
	
.tunedesc2 {
	font: italic 11px Arial, Helvetica,  "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
	 color: rgb(115, 15, 70);
	 color: rgb(220, 220, 220);
	}
#duration {
	font: bold 18px Arial, Helvetica,  "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
	}
/***play-list text and layout (LHS)****/	

#playlist1 li, #playlist_download li   {
  cursor: pointer;
  margin: 6px 10px 0px 120px;
  padding: 5px;
  list-style: none;
	}

#playlist1 p , #playlist_download p  {
	font-size: 11px;
	font-weight: bold;
	margin: 0px 10px 0px 20px;
	}
#playlist1 p {
	color: rgb(220, 220, 220)
	}


#playlist1 h2, #playlist_download h2, .minihead h2    {
	font-size: 15px;
	margin: 0px 0px 0px 20px;
	font-weight: bold;
	color: rgb(115, 15, 70); 
	} 
	
#playlist_download p{
	margin: 10px 0px 10px 0px;
}	
.minihead h2    {
	margin: 0px 0px 0px -20px;
	font: bold 13px Arial, Helvetica,  "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
	} 	

.mini_image {
	float: left;
	margin:  -10px 0px 0px -60px;
	height: 30px;
	width: 30px;
	} 
.YouT_Link {
	float: left;
	margin:  -30px 0px 0px 70px;
	height: 25px;
	width: 28px;
	} 
.SC_Link   {
	float: left;
	margin:  -25px 0px 0px 70px;
	height: 23px;
	width: 24px
	} 
.Plist, .Plist_DL  {
	margin:  0px 0px 0px -100px;
	height: 140px;
	width:  150px;
	border: rgb(100, 100, 80) 1px solid;
	z-index: 75;
	}
	.Plist_DL  {
	margin:  -100px 0px 0px 0px;
	}


.Plist_YouT_Link, .Plist_YouT_Link_hide {
	float: left;
	position:absolute;
	margin:  -40px 0px 0px 140px;
	height: 25px;
	width: 28px;
	z-index: 85;
	} 
.Plist_Play_Link {
	float: left;
	position:absolute;
	margin:  110px 0px 0px -140px;
	height: 25px;
	width: 25px;
	z-index: 85;
	} 
	
/*****#footer text and layout*****/	
#footer_ndl P, #footer_ndl P a:link, #footer_ndl P a:visited, #footer_ndl P a:active, #footer_dl P, #footer_dl P a:link, #footer_dl P a:visited, #footer_dl P a:active {
	font: bold 9px Verdana, Kalimati, "DejaVu Sans", Tahoma, Geneva, sans-serif;
	text-decoration: none;
	text-align: center;
	Margin: 10px 0 0 0;
	color: rgb(0, 0, 110)
	}
.textmob1, .textmob2, textdesk2 {
	display: none
	}

	/**********  SCREEN RESIZING  *************************
	
	/**********  SCREEN RESIZING  *************************

	/****** 800px < screen-width =< 1000px *******maybe not needed************/

@media only screen and (min-width:801px) and (max-width:999px) {
	
	#moving-pane-4 {
	right: 7%
	}
		}

/**** screen-width > 999px **********************/

@media only screen and (min-width:1000px) {
	#container, #content, #header{
		width: 950px;  
		}
	#header {
			background: url(../images/guitarneck_1100.jpg) 0% 0% no-repeat;
		}
	}
	
/****** 480px < screen-width =< 800px *******************/

@media only screen and (min-width:481px) and (max-width:800px) {
	.textmob1 {
		display: block
		}
	#container, #content, #header, #fixed-pane {
		width: 755px;  
		}
	#centre {
		top:70px; height: 2900px; 
		}
	#moving-pane-3 {
		display: initial;
		top: -110px
	}
	#moving-pane-4 {
		display: none
	}
	#audio_container {
	left: 62%;
	}
	#header h1  {
		font: bold 23px Arial, Helvetica,  "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
		margin: 10px 0 0 70px;
		} 
	#header P  { 
		font: bold 10px Verdana, Kalimati, "DejaVu Sans", Tahoma, Geneva, sans-serif;
		margin: 7px 0 0 30px;
		}
	.header_icons { 
		text-align: right;
		margin: -20px 0 0 0
		} 
	.header_subtitle { 
	text-align: left;
	margin: 10px 0 0 0
	}

	.title  {
	display: none
		}
	.style_A P {
		margin:  5px 0px 5px 90px;
			}
	
	#footnote {
	top:1400px
		}
	#playlistA1_container, #playlistB1_container, #playlistC1_container, #playlistD1_container, #playlistE1_container, #playlistF1_container, #playlistG1_container,
	#playlistH1_container, #playlistJ1_container, #playlistK1_container, #playlistL1_container, #playlistM1_container, #playlistN1_container, #playlistZ1_container {
	left: 5%;
		}	
	#playlistA2_container, #playlistB2_container, #playlistC2_container, #playlistD2_container, #playlistE2_container, #playlistF2_container, #playlistG2_container,
	#playlistH2_container, #playlistJ2_container, #playlistK2_container, #playlistL2_container, #playlistM2_container, #playlistN2_container, #playlistZ2_container  {
	left: 32%;
		}
	#playlistA3_container, #playlistB3_container, #playlistC3_container, #playlistD3_container, #playlistE3_container, #playlistF3_container, #playlistG3_container,
	#playlistH3_container, #playlistJ3_container, #playlistK3_container, #playlistL3_container, #playlistM3_container, #playlistN3_container, #playlistZ3_container {
	left: 59%;
		}
	}  

	


/*********END**********/