* {margin:0; padding:0; border:0; font-family: 'Lato', sans-serif;}

body {
	width:100%;
	background: #127DD6 url(../bbb-1.gif) top center fixed;
	font-size:15px;
	color:#39436F;
}

h1, h2, h3, h4, h5 {margin:0 0 10px 0;}
p {padding:0px 0 20px 0; line-height:160%;}
ul, ol {margin:15px 0 20px 20px;}
li {padding:0 0 10px 5px; color:#0C9DED; font-size:18px;}
a {color:#65C83B; text-decoration:none; font-weight:600;}
a:hover {color:#0C9DED;}
strong {color:#39436F;}


a,
input,
li {
	-webkit-transition: .2s all ease-in-out;
	-o-transition: .2s all ease-in-out;
	transition: .2s all ease-in-out;
}

h1 {
	color:#fff;
	font-size:36px;
	font-weight:300;
	margin-top:20px;
	}
h1 span {font-weight:700;}

h2 {
	color:#fff; 
	    font-size: 24px;
		text-align:center;
}
h3 {
	color:#fff;
    font-size: 18px;
	text-align:center;	
}
header {
	margin:20px auto 0; 
	max-width:980px; 
	width:100%;
	overflow:hidden;
	}
	
	header img {
		float:left;
		max-width:100%;
		margin-right:40px;
		margin-bottom:20px;
		}

		p {color:#fff; text-align:Center;}
		
#top-container {
	max-width:920px; 
	margin:0 auto;
	padding:30px;

	}
	
li {
    list-style-type: none;
}

#wrapper {max-width: 460px; margin: 0 auto;}
     
ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #fff; max-width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }

ol li {
    position: relative;
    margin: 0 0 2px 0;
    padding: 0;
    cursor: pointer;
    background: #1d498e;
}
ol li:hover {background:#093579;}
      ol li a { display: block; padding: 15px 15px 15px 40px; }
  
  @-webkit-keyframes blink {
    0%   { background-color: #65C83B; }
    49% { background-color: #63d632; }
    50% { background-color: #81de2f;}
    99% { background-color: #65C83B; }
    100% { background-color: #63d632; }
  }
  @-moz-keyframes blink {
    0%   { background-color: #65C83B; }
    49% { background-color: #63d632; }
    50% { background-color: #81de2f;}
    99% { background-color: #65C83B; }
    100% { background-color: #63d632; }
  }
  @keyframes blink {
    0%   { background-color: #63d632; }
    49% { background-color: #65C83B; }
    50% { background-color: #81de2f;}
    99% { background-color: #65C83B; }
    100% { background-color: #63d632; }
  }
     
	  li.playing { 
		  color: #f5f5f5; 
		  -webkit-animation: blink 2s infinite;
		  -moz-animation:    blink 2s infinite;
		  animation:         blink 2s infinite;	  
	  }
	 
	 li.playing:hover {background:#65C83B; }
      li.playing a { color: #fff; }

	  li.playing:before {
		content: '♬';
		width: 20px;
		height: 20px;
		padding: 3px;
		line-height: 14px;
		margin: 0px;
		position: absolute;
		left: 10px;
		top: 15px;
		color: #fff;
		font-size: 20px;
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
}

p.update {padding:15px 15px 15px 40px; background:#255ba0; color:#4a8cbf; margin-bottom:2px; text-align:left;}
     
	  .duration {color:#ccc;}
      #shortcuts { position: fixed; bottom: 0px; width: 100%; color: #666; font-size: 0.9em; margin: 60px 0px 0px; padding: 20px 20px 15px; background: #f3f3f3; background: rgba(240, 240, 240, 0.7); }
      #shortcuts div { width: 460px; margin: 0px auto; }
      #shortcuts h1 { margin: 0px 0px 6px; }
      #shortcuts p { margin: 0px 0px 18px; }
      #shortcuts em { font-style: normal; background: #d3d3d3; padding: 3px 9px; position: relative; left: -3px;
        -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
        -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }
      @media screen and (max-device-width: 480px) {
        #wrapper { position: relative; left: -3%; }
        #shortcuts { display: none; }
      }
	
	a[role=button] {
		display:block;
		background:#65C83B;
		color:#fff;
		text-decoration:none;
		text-align:center;
		font-size:18px;
		font-weight:800;
		letter-spacing:1px;
		text-transform:uppercase;
		cursor:pointer;
		padding:30px 10px;
		margin:0 auto;
		max-width:960px;
	}	
	
	a[role=button]:hover {background:#0C9DED;}
	

	
.displayformat {
	font-size:12px; 
	padding:5px;
	}


footer {max-width:960px; margin:30px auto 10px;}
footer p {
	color:rgba(255,255,255,.7); 
	text-align: center; 
	letter-spacing:1px; 
	font-size:12px;
	}

.colorDefinition {
	color : #FFFFFF;   
}

.size_xl {
   font-size:50px;
   border-width: 8px;
   border-radius: 6px;
}

.size_lg {
   font-size:20px;
}

.size_md {
   font-size:30px;
   border-width: 5px;
   border-radius: 4px;
}

.size_sm {
   font-size:20px;
   border-width: 3px;
   border-radius: 3px;
}

.size_xs {
   font-size:15px;
   border-width: 2px;
   border-radius: 2px;
}



@media only screen and (max-width: 768px) {

.displayformat {
	display:block;
	padding-left:0;
	}	

header img {
    float: left;
    max-width: 30%;
    margin-right: 30px;
    margin-left: 30px;
}	

li {
    padding: 0 0 10px 5px;
    font-size: 16px;
}

}

@media only screen and (max-width: 720px) {

header h1 {
    font-size: 28px;
    margin-top: 20px;
}
}

@media only screen and (max-width: 600px) {

li {

    font-size: 14px;
}

}

@media only screen and (max-width: 570px) {

header h1 {
    font-size: 26px;
    margin-top: 20px;
}

}

@media only screen and (max-width: 510px) {

header h1 {
    font-size: 22px;
    margin-top: 10px;
	padding-right:20px;
}


@media only screen and (max-width: 460px) {

header h1 {
    font-size: 22px;
    margin-top: 5px;
	padding-right:10px;
}
}

@media only screen and (max-width: 440px) {

header h1 {
    font-size: 20px;

}

input[type="submit"] {font-size:18px}

}
@media only screen and (max-width: 410px) {

header h1 {
    font-size: 16px;
}

}