/* ==========================================================================
   Global:
   

   bleu: #0070b1
   argenté : #cbc1bf
      
   ========================================================================== */

/* CLEARFIX  http://nicolasgallagher.com/micro-clearfix-hack/ */
 
/* For modern browsers */
.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    *zoom:1;
}



/* BASE ===================================================================== */



body {
	font-size: 62.5%;
	font-family: arial, sans-serif;
	letter-spacing: 0.1em;
	color: #ccc;
	background-color: #000;
	}
::-moz-selection { background: #000; color: #fff;}
::selection { background: #000; color: #fff;}


	 
a {text-decoration: none; color: #fff;}
a:link { }
a:visited {}
a:hover {border-bottom: 1px dotted  #fff;
}
a, a:focus; :focus {}

img {vertical-align: middle;} /*Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */

h1 {font-size:2em}
h2 {font-size:1.6em}
h3 {font-size:1.1em}
h4 {font-size:1em; font-weight: bold; margin-bottom: 5px;}
h1,h2,h3 {margin:1em 0;}

h1,h2,h3,h4,h5,h6 {font-weight: normal; color: #cbc1bf;}


abbr,acronym { border-bottom:1px dotted #000; cursor:help;} 
em {font-style: italic;}
strong { font-weight: bold;}
blockquote,ul,ol,dl {}
ol,ul,dl {}
ol li {list-style: decimal inside;}
ul li {list-style: disc inside;}

dl dd {margin-left:1em;}
th,td {border:0; padding:.5em;}
th {font-weight:bold; text-align:center;}
caption { margin-bottom:.5em; text-align:center;}
p,fieldset,table {margin-bottom:1em;}
textarea { resize: vertical;}/* Allow only vertical resizing of textareas.*/
hr {
	height: 1px;
  margin: 20px 0;
  padding: 0;
  color: #F00;
  background-color: #e8e8e8;
  border: 0;
  clear: both;
}


img.autoscale { max-width:100%; max-height:100%;}



#wrapper {margin: 0; padding: 0;}

.easy_slides_container {
    overflow:hidden;
    position:relative;
    margin: 0 auto;
    max-width: 700px;
    height: 420px;
}
.easy_slides_img1, .easy_slides_img2{display:none;top:0;position:absolute;}
.easy_slides_img1 {z-index:2;}
.easy_slides_img2 {z-index:1;}
.easy_slides_caption {display: none;}
#slideshow_container {margin: 0 auto;}
#slideshow_container img {width: 100%;height: auto;}

small a{color:#000;}/* PLAYER ===================================================================== */
#content {text-align: center; position: relative;}

/* PLAYER ===================================================================== */
#player {
	width: 320px;
   height: 400px;
   margin: 20px auto;
   
   z-index: 100;
   
   position: absolute;
   top: 0;
   left: 0;
   margin: 0;
   
}

.contain_canvas {margin:0;}
.subtitle { font-size:0.75em;}
.track_name { font-size:1em; color:#cbc1bf; text-transform: uppercase; height: 30px; margin-top: 20px;
}
.track_timecode { margin-top:20px; font-size:0.75em; color:#Fc0;}

#manuel { position: absolute; top: 50%; left: 50%; margin-left: -98px; margin-top: -250px;
	z-index: 800; font-size: 1.2em; font-family: georgia, serif; font-style: italic;
	color: #fc0;
	-moz-box-shadow: 3px 3px 6px #333;
		-webkit-box-shadow: 3px 3px 6px #333;
		box-shadow: 3px 3px 6px #333;
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#333333')";
		/* For IE 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#333333');
	cursor: pointer;
	display: none;
}
#manuel em {font-size: 0.8em; display: block; margin-top: 10px;
}
.bubble {
position: relative;
width: 180px;
height: 100px;
padding: 10px;
border: #cbc1bf solid 6px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #2c363a;
}

.bubble:after{
content: "";
position: absolute;
bottom: -15;
left: 84.5px;
border-style: solid;
border-width: 15px 15px 0;
border-color: #2c363a transparent;
display: block;
width: 0;
z-index: 1;
}

.bubble:before {
content: "";
position: absolute;
top: 126px;
left: 79.5px;
border-style: solid;
border-width: 20px 20px 0;
border-color: #cbc1bf transparent;
display: block;
width: 0;
z-index: 0;
}

/* ASIDE ===================================================================== */
#aside {background: #0070b1; color: #cbc1bf; text-align: center; text-transform: uppercase; margin: 0; z-index: 200; padding-bottom: 30px;
}
#aside #header, #aside p {max-width: 500px; margin: 0 auto ; }
#aside #header {margin: 10px auto 20px auto; padding: 20px; position: relative;}
#aside p {margin: 2em auto 4em auto; padding: 0 20px; font-size: 1.1em; line-height: 1.5em ;}
#aside img {width: 100%;height: auto; }
.smaller {font-size: 0.8em; color: #999;}
#aside .download  {font-size: 0.8em; margin: 0; padding: 5px; text-transform: none; color: #fff;
}
#tooltip { font-size: 0.7em; text-transform: none;
	width: 70px; text-align: center;
	padding: 3px; color: #0070b1; position: fixed; bottom: 10px; right: 20px; background: #fff; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; z-index: 500;
opacity: 0.3;
 }
/* FORM ===================================================================== */
input[type=text], input[type=email] {
	width: 180px;
	margin:20px 10px;
	padding: 10px 5px 6px 5px ;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	border: 1px dashed #fff;
	background-color: #0070b1;
	color: #fff;
	font-size: 1.2em;
	letter-spacing: 0.1em;
	-webkit-appearance:none;
	}
	
	input[type=text]:focus {
	background: #000;
	color: #cbc1bf;
	border: 1px solid #fff;
	}

.button {
  background-color: #0070b1;
   border-radius: 5px;
  border: 1px dashed #fff;
  color: #ffffff;
  display: inline-block;
  font-size: 1em;
  margin: auto;
  padding: 3px;
  text-decoration: none;
}
.button:hover {
border: 1px solid #ffffff;
}

.round_button {
display: inline-block;
text-align: center;
border-width: 1px;
border: 1px solid #fff;
text-transform: uppercase;
text-decoration: none;
line-height: 1.1em;
font-weight: normal;
font-family: sans-serif;
color: #fff;
font-size: 16px;
background-color: #0070b1;
 -webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
padding: 4px;	

  width: 28px;
}

round_button:hover {
  color: #cbc1bf;
  background-color: #000;
 }

round_button:active {
  color: #cbc1bf;
  background-color: #f00;
}

/* ==========================================================================
   Media Queries
========================================================================== */
@media screen and ( max-width: 480px ) {
	/* are previous styles*/
}

/* entre 481px et 1024px de large  */
@media screen and (min-width: 481px) {
.easy_slides_container {
    height: 650px;
}

#player {
	width: 480px;
   height: 480px;
   margin: 20px auto;
   }
}

/* iPads (portrait) ----------- */
@media screen and (min-width : 768px) and (orientation : portrait) {
.easy_slides_container {
    height: 650px;
}

#player {
	width: 480px;
   height: 480px;
   margin: 20px auto;
   
   position: absolute;
   top: 10%;
   left: 20%;
   margin: 0;
   
}
}

/* iPads (landscape) ----------- */
@media screen and (min-width: 768px) and (orientation : landscape) {
#content {float: left; width: 75%;  position: fixed;}
#aside { float: left; width: 25%; min-width: 330px; background: #0070b1; position: absolute; right: 0;}
.easy_slides_container {
    height: 650px;
}
#player {
	width: 480px;
   height: 480px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -250px 0 0 -240px;
   padding: 10px;
   
   z-index: 100;
}

}

/* a partir de 1024px */
@media screen and (min-width : 1024px) {
	#content {float: left; width: 75%;  position: fixed;}
	#aside { float: left; width: 25%; min-width: 330px;  background: #0070b1; position: absolute; right: 0; }
	.easy_slides_container {
	    height: 650px;
	}
	
	#player {
		width: 480px;
	   height: 480px;
	   position: absolute;
	   top: 50%;
	   left: 50%;
	   margin: -250px 0 0 -240px;
	   padding: 10px;
	   
	   z-index: 100;
	}
}


@media screen and (-webkit-min-device-pixel-ratio: 1.5),
       screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}