/*
 * Project: CirclePlayer
 * http://www.jplayer.org
 *
 * Copyright (c) 2011 Happyworm Ltd
 *
 * This CSS is for the demonstration page
 *
 * Author: Mark J Panaghiston
 * Date: 6th May 2011
 */
h1{
position: fixed;
top: 0;
left: 0;
right: 0;
pointer-events: none;
background: rgba(255,255,255,.7);
margin: 0;
padding: 10px;
text-align: center;
color: #444;
}

body {
	background-color:#f0f0f0;
	background-image: url(concrete_wall_3.png);
	background-repeat: repeat;
	background-position: center center;
	margin:0;
	padding: 0;
	font-family: helvetica, sans-serif;
} 
@media (-webkit-min-device-pixel-ratio: 1.5){ 
    body{
        background: url(concrete_wall_3_@2X.png) repeat center center;
        background-size: 300px 224px;
    }
}
body#general .cp-controls{
	background-color: #342AA2;
	background-color: rgba(52, 42, 162, 0.8);
}
body#general .cp-controls a:hover{
	color: #FA6666;
	color: #FFD739;
	color: #C28FBD;
}

body#soldater .cp-controls{
	background-color: #FF5151;
	background-color: rgba(255, 81, 81, 0.8);
}
body#soldater .cp-controls a:hover{
	color: #F4F976;
}

#cp_container_1{
	position: fixed;
	top: 0;
	z-index: 200;
}
.jp-current-time{
	display: none;
}

#img_container{
	position: absolute;
	top: 42px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
}
#img_container img{
	max-width: 110%;
	max-height: 105%;
	display: block;
	margin: 0 auto;
}

.cp-container {
  position: relative;
  font-family: 'Source Sans Pro', sans-serif;
  text-align: left;
  width: 100%;
  height: 60px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #7e3400;
  color: #01233E;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0;
  line-height: 0;
}
.cp-controls {
  left: 0;
  position: absolute;
  padding: 0;
  list-style-type: none;
  top: 0;
  width: 60px;
  height: 100%;
  background-color: #ff6a00;
  background-color: #51B7FF;
  background-color: rgba(81, 183, 255, 0.8);
}
.cp-controls a {
  text-decoration: none;
  font-size: 30px;
  padding-left: 16px;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  color: #7e3400;
  color: #DEF4FC;
}
.cp-controls a:hover {
  color: #ffd850;
  color: #76F4F9;
}
.cp-controls a:before {
  display: inline-block;
  font-family: flat-audio;
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
  font-variant: normal;
  text-transform: none;
  speak: none;
  width: 60px;
  line-height: 60px;
  text-align: center;
  opacity: 1;
}

body#grunhorse #img_container img {
    max-height: none;
}
body#grunhorse .cp-controls{
  background-color: rgba(13, 143, 26, 0.8);
}
body#grunhorse .cp-controls a:hover{
  color: #76F979;
}