/*----------------------------------------------*/

/*  Summary                 */

/*----------------------------------------------*/

/*  1- Mentions */

/*  2- Color codes  */

/*  3- Reset    */

/*  4- Base styles  */

/*  5- Video    */

/*  6- Controls     */

/*  7- Sidebar  */

/*  8- Contact  */

/*  9- Footer   */

/*----------------------------------------------*/

/*  1- Mentions             */

/*----------------------------------------------*/

/* @client : The End    */

/* @date : octobre 2012 */

/*----------------------------------------------*/

/*  2- Color codes              */

/*----------------------------------------------*/

/*----------------------------------------------*/

/*  3- Reset                */

/*----------------------------------------------*/

html, body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td {

    margin:0;

    padding:0;

}

html {

    font-size: 100%;

}

h1,h2,h3,h4,h5,h6 {

    font-size: 100%;

    font-weight: normal;

    font-style: normal;

}

fieldset,img, button {

    border: 0;

}

li {

    list-style: none;

}

textarea, table, td {

    word-wrap: break-word;

    white-space: pre-wrap; 

}

table {

    border-spacing: 0;

    border-collapse: collapse; 

}

caption,th {

    text-align: left;

} 

legend {

    color: #000;

}

blockquote:before, blockquote:after, q:before, q:after {

    content: '';

    content: none;

}

label, input[type="submit"], input[type="button"], button {

    cursor: pointer;

}

input, button, select {

    vertical-align: middle;

    font-size: 100%;

}

table, td, blockquote, textarea, input, object, embed, video {

    max-width: 100%;

}

/* HTML5 display-role reset for older browsers */

header, footer, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, figure, figcaption, time, dialog {

    display: block;

}

/*----------------------------------------------*/

/*  4- Base styles              */

/*----------------------------------------------*/

body {

    background-color: black;    

}

/*----------------------------------------------*/

/*  5- Video                */

/*----------------------------------------------*/

video {

    width: 600px;

    height: 400px;

}

/*----------------------------------------------*/

/*  6- Controls             */

/*----------------------------------------------*/

#playerContainer {

    position: relative;

    z-index: 1;

}

#controlContainer {

    position: absolute;

    z-index: 10;

    top: 200px;

    left: 0;

    right: 0;

    height: 40px; 

    overflow: hidden;

    background-color: blue;

}

#controlbar {

    position: absolute;

    /*bottom: -40px;*/

    bottom: 0;

    left: 0;

    height: 40px;

    padding: 0 50px;

    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;    

    transition: all 0.3s ease-in-out;

}

#controlContainer:hover #controlbar {

    bottom: 0;

}

.bnt {

    height: 32px;

    width: 32px;

    margin-left: 15px;

    text-indent: -99999px;  

    background-image: url(../img/player_btn.png);

}

#controlbar .bnt:first-child {

    margin-left: 0;

}   

#btnPlay {

    background-position: 0 -32px;

}

#btnPlay:hover,

#btnPlay:focus {

    background-position: 0 0;

}

#btnPaused {

    background-position: 32px -32px;

}

#btnPaused:hover,

#btnPaused:focus {

    background-position: 32px 0;

}

#btnBck {

    background-position: -96px -32px;

}

#btnBck:hover,

#btnBck:focus {

    background-position: -96px 0;   

}

#btnFwd {

    background-position: -64px -32px;   

}

#btnFwd:hover,

#btnFwd:focus {

    background-position: -64px 0;

}

#btnFullScr {

    background-position: -132px -32px;  

    width: 48px;

    }

#btnFullScr:hover,

#btnFullScr:focus {

    background-position: -132px 0;  

}

#btnHD {

    background-position: -180px -32px;

    width: 52px;

}

#btnHD:hover,

#btnHD:focus {

    background-position: -180px 0;

}

/*----------------------------------------------*/

/*  9- Footer               */

/*----------------------------------------------*/