@import url("layout.css");

body {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	background-color: rgb(188, 188, 151);
	background-color: #979ba1;

	background-image: url("../images/JSLbackground.png");
    background-size:auto;
	background-repeat:repeat;
	/*
			
	background: linear-gradient(to top,  darkblue, darkblue)
	background: linear-gradient(0.35turn,  rgb(155, 172, 205), rgb(14, 40, 98), rgb(0,32, 99),  rgb(155, 172, 205));;*/
	/*background: linear-gradient(0.35turn, #f69d3c, #ebf8e1, #f69d3c);
	background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);*/
}
#container {
	width: 100%;
	margin: 0 auto;
	padding: 0px;
	border-right: 2px solid white;;
	/*border-bottom: 2px solid white;*/
	border-left: 2px solid white;
	background: linear-gradient(0.95turn,  white, white, #2da2ef,    white,  white);
	
	max-width: 800px;
}
#masthead_old {
	text-align: center;
	width: 100%;
	padding: 1px;
	border: 1px dotted #725972;
	background-image: url("../images/masthead2.gif");
	background-repeat: repeat;
	background-attachment: scroll;
	background: linear-gradient(to bottom,   white,  #201df8);
}

#masthead {
	padding-top: 20px;
	text-align: center;
	background-position: top;
	width: 800px;
	background-repeat:no-repeat;
	background-image: url("../images/header.png");
	background-size:cover;
}
#navigation {
	position: relative;
	float: left;
	width: 139px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-right: 1px dotted #725972;
	background-color: #fff;
	background-image: url("../images/masthead1.gif");
	background-repeat: repeat;
}
#content {
	float: center;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	line-height: 1.5;
}
#footer_old {
	text-align: center;
	clear: both;
	width: 800px;
	cursor: pointer;
	font-size: 14px;
	height: 100px;
	border: 1px dotted #d8bfd8;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-image: url("../images/footer.png");
	color: rgb(23, 3, 72);
}
#footer {
	font-size: small;
    text-align: center;
	width: 800px;
	height: 80px;
	background-position:  bottom;
	background-repeat:no-repeat;
	background-attachment: scroll;	 
	background-image: url("../images/footer.png");
	background-size:cover;
	padding-bottom: 20px;
}
/* Masthead Styles */
#masthead h1 {
	color: #fff;
}
#masthead h3 {
	color: #402640;
}
/* Navigation Styles */
#navigation ul {
	list-style-type: none;
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
}
#navigation li {
	display: block;
	margin: 0;
	padding: 0;
	border: 1px dotted #dfb8df;
	background-color: #dfb8df;
	background-color: #fff;
	background-image: url("../images/masthead1.gif");
	background-repeat: repeat;
}
#navigation a {
	color: #402640;
	text-decoration: none;
	display: block;
	padding: 5px;
	border-bottom: 1px dotted #fff;
	background-color: #dfb8df;
	background-color: #fff;
	background-image: url("../images/masthead1.gif");
	background-repeat: repeat;

}
#navigation a:hover {
	color: #402640;
	text-decoration: none;
	background-color: #fff;
}
/* Content Styles */
#content h1,h2,h3,h4,h5,h6 {
	color: #503750;
}
#content img_no_bouder {
	padding: 0px;
}

#content img {
	padding: 0px;
	border: 0px solid #402640;
}

/* Footer Styles */
#footer p {
	color: #808080;
}
#footer a {
	color: #503750;
	text-decoration: underline;
}
#footer a:hover {
	color: #402640;
	text-decoration: none;
}
a {
	color: #402640;
	text-decoration: underline;
}
a:hover {
	color: #dfb8df;
	text-decoration: underline;
}
.style_bold {
	font-weight: bold;
}
.style_italic {
	font-style: italic;
}

/******************************************************************************/
/* BUttONS                                                                */
/******************************************************************************/

.button {
	border: none;
	color: burlywood;
	border-radius: 10px;
	padding: 16px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	height: 25px;
	font-size: 16px;
	margin: 4px 2px;
	transition-duration: 0.4s;
	cursor: pointer;
  }
 
  .JSL_menu_button {

	border-radius: 6px;
	text-decoration: none;
	display:inline;
	width: 90px;
	height: 25px;
	font-size: 14px;
	cursor: pointer;
	background-color:  #19aedf;
	color: rgb(20, 13, 64); 
	border: 1px solid #000814;
  }
  .JSL_menu_button:hover {
	background-color: rgb(15, 15, 116);
	color: white;
	border: 1px solid #4CAF50;
  }
  
  .button1 {
	background-color: burlywood; 
	color: black; 
	border: 1px solid #4CAF50;
  }
  
  .JSL_long_button {

	border-radius: 6px;
	text-decoration: none;
	display:inline;
	width: 180px;
	height: 25px;
	font-size: 14px;
	cursor: pointer;
	background-color:  #19aedf;
	color: rgb(20, 13, 64); 
	border: 1px solid #000814;
  }
  .JSL_long_button:hover {
	background-color: rgb(15, 15, 116);
	color: white;
	border: 1px solid #4CAF50;
  }
  .button1:hover {
	background-color: #5ec9e6;
	color: white;
  }
  
  .button2 {
	background-color: burlywood; 
	color: black; 
	border: 1px solid #008CBA;
  }
  
  .button2:hover {
	background-color: #008CBA;
	color: white;
  }

/******************************************************************************/
/* PLAYER                                                                     */
/******************************************************************************/
.player {
	float: left;
	width: 200px;
	margin: 1em;
}
.playerpreview {
	margin-top: 12px;
	margin-bottom: 12px;
}

#playercontroller {
	background-color: #e9f6ff;
	color: #000;
	height: 20px;
	width: 200px;
	border: solid 1px #ccc;
	margin: 0 0 1em 0;
}
#playercontroller .button {
		width: 20px;
		height: 20px;
		background-repeat: no-repeat;
		background-position: 2px 2px;
		float: left;
	}
		#playercontroller .button a {
			display: block;
			height: 20px;
			text-indent: -100em;
			overflow: hidden;
			background-image: none;
		}
	#playercontroller .timeline {
		position: relative;
	}
		#playercontroller .timeline a {
			position: absolute;
			left: 40px;
			display: block;
			height: 20px;
			width: 40px;
			text-indent: -100em;
			overflow: hidden;
			background-image: url(images/control_slider.png);
		}
		#playercontroller .timeline a:visited {
			background-image: url(images/control_slider.png);
		}
		#playercontroller .timeline a:hover {
			background-image: url(images/control_slider_blue.png);
		}
	#playercontroller .play {
		background-image: url(images/control_play.png);
	}
	#playercontroller .play:hover {
		background-image: url(images/control_play_blue.png);
	}
	#playercontroller .pause {
		background-image: url(images/control_pause.png);
		display: none;
	}
	#playercontroller .pause:hover {
		background-image: url(images/control_pause_blue.png);
	}
	#playercontroller .stop {
		background-image: url(images/control_stop.png);
	}
	#playercontroller .stop:hover {
		background-image: url(images/control_stop_blue.png);
	}