body
{
	 font-family:Didot, Arial, sans-serif;
	 background-color:#eee;
}

.ui-page {
 	 background-color:#eee!important;
}

.ui-content
{
	margin-left:auto;
	margin-right:auto;	
 	width:800px;
 	background-color:#1C1D20;
 	background-image:url(images/bkgnd-bw-shatter.png);
 	background-size:850px 550px;
 	background-repeat: repeat-y;
 	
}



.sub-content{
		margin-right:auto;
		margin-left:auto;
		background-color:#FF006B;
		border:3px solid #fff;
		border-radius: 10px;
		padding:7px;	
		color:#fff;	
		margin-top:10px;
		margin-bottom:5px;	
		margin-left:auto;
		margin-right:auto;			
	}	
	
.header
{
	font-size:1.5em;
	margin-right:auto;
	margin-left:auto;
	width:100%;
	text-align:center;
	text-transform:uppercase;
	border-bottom:5px solid #649B00;
        box-shadow: 5px 5px 7px #fff;
	background-color:#CCFF70;
	color:#649B00;
	letter-spacing:3px;
}

.ui-header {
	background-color:#1C1D20!important;
	color:#D7FFA4!important;
	text-transform:uppercase;
	text-align:center;
	letter-spacing:3px;
	width:100%;
	font-size:1.2em;
}
	

h2 {
	font-size:18px;
	
}

h3,h4{
	text-align:center;
	text-transform:uppercase;
	letter-spacing:3px;
}


/* LOGIN FORM */

	div.login{
		margin-right:auto;
		margin-left:auto;
		width:95%;
		/*background-color:#186DFF;*/
		background-color:#186DFF;
		border:3px solid #CCFF70;
		border-radius: 10px;
		padding:7px;	
		margin-top:10px;
		margin-bottom:5px;	
		margin-left:auto;
		margin-right:auto;			
	}	
	
th{
	font-weight:normal;
	border-bottom:1px solid white;
}

	
	.login h3 {
		text-align:center;
		
	}
	
	.login table {
		background-color:#1C1D20;
		color:#fff;
		letter-spacing:3px;
	}		


.white {
	background-color:#fff;
	color:#1C1D20;
	padding:7px;
	overflow:auto;
}

.whiteline{
	border-bottom:5px solid #fff;
	color:#fff;
	padding:7px;
	overflow:auto;	
}


.pink {
	background-color:#FF006B;
	color:#fff;
	padding:7px;
	overflow:auto;	
}

.label {
	font-size:30px;
	color:#CCFF70;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:7px;
        box-shadow: 3px 3px 5px #CCFF70;
         background-color:#1C1D20;
}

.ui-btn-custom
{
	background-color:#61739D!important;
	font-weight:normal !important;
	color:#fff !important;
}

.ui-btn-request
{
	background:green!important;
	font-weight:normal !important;
	color:#fff !important;
}

.ui-btn-remove
{
	background:red!important;
	font-weight:normal !important;
	color:#fff!important;
}

.ui-multiselect 
{
	width:100px !important;
}	


p.msgs {
	
	color:#61739D;
	padding:15px 15px 15px 0;
}	

p.error{
	text-align:center;
	background:red;
	color:#fff;
	padding:3px;

}	

p.error2,h4.error2{
	text-align:center;
	background:#FF006B;
	color:#fff;
	padding:7px;
	font-size:1.2em;

}	

p.success{
	text-align:center;
	background:#FF006B;
	color:#fff;
	padding:3px;

}	

li {
	text-decoration:none;

}

.ui-li-divider {
	text-align:center !important;
	font-weight:normal !important;
	background:#61739D !important;
	color:#fff !important;
}

#add
{
	background:#61739D;
}	

.navbar{
	background-color:#186DFF;
}


#home,#upload,#manage,#signout,#learn,.event
{
	background-color:#186DFF;
	color:#fff;
}

table {

	width:100%;	
	padding:7px;	

}



.custom-collapsible h3 a {
    border-width: 0px !important; 
    background: #61739D !important;
    color:#fff;    
}

.custom-list a {

    border: 2px solid #fff !important; 
    background-color: #CCFF70!important;
    width:90%;
    margin:3px;
}

.custom-admin h3 a {

    border: 2px solid #fff !important; 
    background-color: #D7FFA4!important;
    
}

.table h3 a {
	border:1px solid #fff!important;
	background-color: #CCFF70!important;
    
}



.footer
{
	background-color:#1C1D20;
	margin-top:180px;
	text-align:center;
	color:#fff;
	padding:7px;
	letter-spacing:3px;
	
}


/* ============================================================================================== 
This copyright notice must be kept untouched in the stylesheet at all times.
The original version of this stylesheet and the associated (x)html 
is available at http://www.script-tutorials.com/html5-audio-player-with-playlist/
Copyright (c) Script Tutorials. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
================================================================================================= */
/*
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #aaa;
}
header {
    background-color:rgba(33, 33, 33, 0.9);
    color:#fff;
    display:block;
    font: 14px/1.3 Arial,sans-serif;
    margin-bottom: 10px;
    position:relative;
}
header h2{
    font-size: 22px;
    margin: 0px auto;
    padding: 10px 0;
    width: 80%;
    text-align: center;
}
header a, a:visited {
    text-decoration:none;
    color:#fcfcfc;
}
*/

/* HTML5 Audio player with playlist styles */
.example {
    margin: 50px auto 0;
    width: 400px;
}
.player {
    background: transparent url("images/sprnew.png") no-repeat scroll center top;
    height: 162px;
    position: relative;
    width: 326px;
    z-index: 2;
}
.title, .artist {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    position: absolute;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.title {
    color: #FFFFFF;
    font-size: 14px;
    top: 0px;
    left: 125px;
}

/* tooltip */
[title]{
	position:relative;
}

[title]:after{
	content:attr(title);
	left:7px;
	font-size:12px;
	margin-left:3px;
	padding:5px;
	background-color:#000;
	font-family: Arial, Helvetica, sans-serif;
}

.artist {
    color: #EEEEEE;
    font-size: 12px;
    top: 40px;
    left: 165px;
}
.pl {
    background: transparent url("images/sprnew.png") no-repeat scroll -274px -175px;
    cursor: pointer;
    height: 34px;
    left: 270px;
    position: absolute;
    top: 20px;
    width: 32px;
}
.pl:hover {
    top: 21px;
}
.cover {
    background: transparent url("images/music_cd.png") no-repeat scroll center top;
    border-radius: 5px 5px 5px 5px;
    background-size: 100px 100px;
    left: 10px;
    position: absolute;
    top: 10px;
    color:#fff;
    height:100px;
    width:100px;
}
.cover_vid {
	background: transparent url("images/ytload.png") no-repeat;	
	background-size: 320px 160px;
    	border-radius: 5px 5px 5px 5px;
    	color:red;
}
.controls {
    cursor: pointer;
    height: 23px;
    left: 167px;
    position: absolute;
    top: 65px;
    width: 138px;
}
.controls .play, .controls .pause, .controls .rew, .controls .fwd {
    background: transparent url("images/sprnew.png") no-repeat scroll 0 0;
    float: left;
    height: 100%;
    width: 33%;
}
.controls .play {
    background-position: -8px -171px;
}
.controls .pause {
    background-position: -8px -198px;
    display: none;
}
.controls .rew {
    background-position: -54px -171px;
}
.controls .fwd {
    background-position: -100px -171px;
}
.controls .play:hover {
    background-position: -8px -170px;
}
.controls .pause:hover {
    background-position: -8px -197px;
}
.controls .rew:hover {
    background-position: -54px -170px;
}
.controls .fwd:hover {
    background-position: -100px -170px;
}
.hidden {
    display: none;
}
.controls .visible {
    display: block;
}
.volume {
    height: 11px;
    left: 186px;
    position: absolute;
    top: 96px;
    width: 112px;
}
.tracker {
    height: 15px;
    left: 20px;
    position: absolute;
    top: 126px;
    width: 285px;
}
.ui-slider-range {
    background: transparent url("images/sprnew.png") no-repeat scroll 5px -222px;
    height: 100%;
    position: absolute;
    top: 0;
}
.ui-slider-handle {
    cursor: pointer;
    height: 10px;
    margin-left: -5px;
    position: absolute;
    top: 2px;
    width: 10px;
    z-index: 2;
}
.volume .ui-slider-handle {
    background: url("images/sprnew.png") no-repeat scroll -201px -188px rgba(0, 0, 0, 0);
    height: 13px;
    width: 13px;
}
.playlist {
    background-color: #333333;
    border: 1px solid #000;
    border-radius: 5px 5px 5px 5px;
    list-style-type: none;
    margin: -10px 0 0 2px;
    padding-bottom: 10px;
    padding-top: 15px;
    position: relative;
    width: 255px;
    z-index: 1;
}
.playlist li {
    color: #EEEEEE;
    cursor: pointer;
    margin: 0 0 7px 7px;
    font-weight: normal;
}
.playlist li.active {
   font-weight: normal;
}

.notes {
	color:yellow;
}

.iframe {
	width:320px; 
	height:160px;
}


@media only screen and (max-device-width: 768px)
{
/* define mobile specific styles come here */

/*
.ui-page {
	width:80%;
}
*/

.header,.ui-header,.ui-content,.sub-content,div.login {
	width:95%;
	padding:3px;
	
}	

.custom-list,.custom-list a {
	padding-left:20px;
	width:80%;
}



img {
	width:100%;
	
}


}