/*
 * Project: CirclePlayer
 * http://www.jplayer.org
 *
 * Copyright (c) 2012 Happyworm Ltd
 *
 * Author: Silvia Benvenuti
 * Edited by: Mark J Panaghiston
 * Date: 2nd October 2012
 * Artwork inspired by: http://forrst.com/posts/Untitled-CJz
 */

/* style Radio Campus */
@font-face {
    font-family: 'Raisonne';
    src: url('../skin/circle.skin/fonts/raisonne_demibold.eot');
    src: url('../skin/circle.skin/fonts/raisonne_demibold.eot') format('embedded-opentype'),
         url('../skin/circle.skin/fonts/raisonne_demibold.woff') format('woff'),
         url('../skin/circle.skin/fonts/raisonne_demibold.ttf') format('truetype'),
         url('../skin/circle.skin/fonts/raisonne_demibold.svg#RaisonneDemiBold') format('svg');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../skin/circle.skin/fonts/Montserrat-Regular.ttf') format('truetype'),
	url('../skin/circle.skin/fonts/Montserrat-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: bold;
  font-weight: 700;
  src: url('../skin/circle.skin/fonts/Montserrat-Bold.ttf') format('truetype'),
      url('../skin/circle.skin/fonts/Montserrat-Bold.woff') format('woff');
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0em 0 0.5em;
  font-weight: inherit;
  font-family: 'Raisonne';
}

body, html {
    font-family: "Montserrat", sans-serif;
	background: white;
}

a {
    color: black;
    text-decoration: none;
}
a:hover {
    color: black;
    text-decoration: underline;
  color: #555;
}
a:visited {
  color: #333;
}

/* thème player */

.cp-container {
	position:relative;
	width:168px; /* 200 - (2 * 48) */
	height:188px;
	background:url("bgr.jpg") 0 0 no-repeat;
	padding:5px 20px;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	margin:0;
}

.cp-container :focus {
	border:none;
	outline:0;
}

.cp-buffer-1,
.cp-buffer-2,
.cp-progress-1,
.cp-progress-2 {
	position:absolute;
	top:0;
	left:0;
	width:167px;
	height:167px;
	clip:rect(0px,83px,167px,0px);

	-moz-border-radius:83px;
	-webkit-border-radius:83px;
	border-radius:83px;
}

.cp-buffer-1,
.cp-buffer-2 {
	background:url("buffer.png") 0 0 no-repeat;
}


/* FALLBACK for .progress
 * (24 steps starting from 1hr filled progress, Decrease second value by 104px for next step)
 * (It needs the container selector to work. Or use div)
 */

.cp-container .cp-fallback {
	background:url("progress_sprite.jpg") no-repeat;
	background-position:0 167px; 
}

.cp-progress-1,
.cp-progress-2 {
	background:url("progress.png") 0 0 no-repeat;
}

.cp-buffer-holder,
.cp-progress-holder,
.cp-circle-control {
	position:absolute;
	width:167px;
	height:167px;
} 

.cp-circle-control {
	cursor:pointer;
}

.cp-buffer-holder,
.cp-progress-holder {
	clip:rect(0px,167px,167px,84px);
	display:none;
}


/* This is needed when progress is greater than 50% or for fallback */

.cp-buffer-holder.cp-gt50,
.cp-progress-holder.cp-gt50,
.cp-progress-1.cp-fallback{
	clip:rect(auto, auto, auto, auto);
}

.cp-controls {
	margin:0;
	padding:71px;
}

.cp-controls li{
	list-style-type:none;
	display:block;

	/*IE Fix*/
	position:absolute;
}

.cp-controls li a{
	position:relative;
	display:block;
	width:25px;
	height:25px;
	text-indent:-9999px;
	z-index:1;
	cursor:pointer;
}

.cp-controls .cp-play {
	background:url("controls.png") 0 0 no-repeat;
}

.cp-controls .cp-play:hover {
	background:url("controls.png") -25px 0 no-repeat;
}

.cp-controls .cp-pause {
	background:url("controls.png") 0 -25px no-repeat;
}

.cp-controls .cp-pause:hover {
	background:url("controls.png") -25px -25px no-repeat;
}

.cp-jplayer {
	width:0;
	height:0;
}

/* Valentin */

body {
	margin : auto;
}
 


#campus_player {
	position: absolute;
	top: 20px;
	left: 0;
}

#time_list {
	width : 100%;
	float : left;
}


/* ajustements de démarrage */
#main-play {
    display: none;
}

#hour {
  font-size: 8px;
  text-align: center;
  line-height: 10px;
  height: 10px;
  display: block;
}

#image-podcast{
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  overflow: hidden;
  position: absolute;
  margin: 0px auto;
  left: 0;
  right: 0;
  text-align: center;
  display: none;
  height: 150px;
  width: 150px;
  top: 13px;
}
#image-podcast img {
  opacity: .3;
  z-index: -1;
  margin: auto;
}

#date_of_podcast, #center_description {
	position: absolute;
	width: 300px;
	height: 70px;
	left: 220px;
	padding-right: .5em;
	text-align: right;
	z-index: -2;
	overflow: hidden; 
}

#center_description {
	top: 100px;
	height: 100px;
}


#dl_podcast {
	position: absolute;
	width: 100px;
	height: 24px;
	top: 40px;
	left: 180px;
}
#reseauxsociaux {
	position: absolute;
	width: 300px;
	height: 24px;
	top: 190px;
	left: 220px;
	padding-right: .5em;
}
#reseauxsociaux div {
	float: right;
	width: 90px;
	margin-right: 5px;
}

#directlink {
	position: absolute;
	width: 100px;
	height: 24px;
	top: 10px;
	left: 180px;
}



#dl_podcast a, #directlink a {
  display: block;
  border: 2px solid black;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  font-size: 80%;
  text-decoration: none;
}

#description_of_podcast {
	font-size: 150%;
}
#ecoutes_of_podcast {
	font-size: 70%;
}

#hour_of_podcast {
	position: absolute;
	left: 80px;
	top: 5px;
	font-size: 9px;
	z-index: 10;
	text-align: center;
	display: block;
	width: 50px;
	height: 15px;
}