/**************************************************************************************
	I. Variables/Mixins/HTML5 Fix
 **************************************************************************************/
/* Colors */
@color_1 : #073648; /* Blue 1 */
@color_2 : #041a22; /* Blue 2 */
@color_3 : #0f81a4; /* Cyan */
@color_4 : #FFF; /* Cyan */
@color_5 : #FFF; /* Cyan */
@color_6 : #68b84b;


.rgb(@alpha: 0.83){ background-color:#020c10; background-color:rgba(0,0,0, @alpha); }

/* HTML5 */

/* External classes */
@import "classes.less";
@import "typo.less";


input, textarea {
    border:2px solid @color_1;
    padding:5px;
    color:@color_1;
    .reading-font;
}

::-webkit-input-placeholder { color:@color_1; }
input:-moz-placeholder { color:@color_1; }

button, a.button {
    /* General */
    padding:5px 10px;
    background-color: @color_6;
    border-top:1px solid rgba(250,250,250,0.5);
    cursor:pointer;
    /* Text */
    .sub-heading-font;
    color:#FFF;
    .fz-m;
    text-shadow:0px 0px 4px rgba(0, 0, 0, 0.8);
    /* CSS3 */
    .gradient(@color_6, #8ce16d);
    .rounded();
    .shadow(0, 0, 4px, 1px);

    &:hover{
        border:none;
        text-shadow:0px 1px 4px rgba(0, 0, 0, 0.8);
          -webkit-box-shadow:inset 0 1px 6px 1px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 0 1px 1px  rgba(0, 0, 0, 0.8);
        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8);
    }
}

.clearfix:after { content: "."; visibility: hidden; display: block; clear: both; height: 0; font-size: 0; }
.clearfix { zoom: 1;_height: 1%;}
.clear { clear:both}




/**************************************************************************************
	III. STRUCTURE
 **************************************************************************************/
body { background:@color_1 url('../img/wrapper-bg.jpg') no-repeat center top; }
#global-wrap{ background:@color_1 url('../img/large-bg.jpg') no-repeat;}

body#coming-soon { background:@color_1 url('../img/coming-soon-wrap.jpg') no-repeat center top; }
#coming-wrap{ background:@color_1 url('../img/coming-soon-bg.jpg') no-repeat; height:1000px;  position:relative;}

#coming-wrap p {
    padding-top:380px;padding-left:50px;
    font-size:18px;
   
}

 #coming-wrap #player{
        background:url('../img/player.png');
        width:480px;
        height:183px;
        position:relative;
        z-index:2;

        position:absolute;
        top:490px;
        left:120px;
        h2{
            text-indent:-9999px;
            position:absolute;
            background:url('../img/live-header.png');
            width:253px;
            height:125px;
            top:160px;
            left:180px;
        }
        object { margin:35px 0 0 140px;}
 }

header {
    position:relative;
    h1{
         a {
            background:url('../img/logo.png') no-repeat 0 10px;
            display:block;
            height : 170px;
            text-indent:-9999px;
        }
         &:after{
            background : url('../img/sticker.png');
            content : '';
            height:69px;
            margin : -65px 0 0 190px;
            position:absolute;
            width:114px;
        }
    }

    nav{
        border-bottom : 1px solid #000;
        float:right;
        margin-top:60px;
        padding:5px;
        .rgb(0.63);
        .rounded-tl;.rounded-tr;

        li {
            background : url('../img/nav.png') no-repeat;
            float:left;
            height:25px;
            line-height:30px;
            padding-right:20px;
            padding-left:26px;
            position:relative;
        }

        li#accueil{ background-position:0 0; }
        li#programme{ background-position:0 -25px; }
        li#emissions{ background-position:0 -50px; }
        li#about {background-position:0 -75px; }
        li#forum {background-position:0 -100px; }

        a {
            color : @color_4;
            .heading-font;
            .fz-m;
            &:hover{
                color:@color_3;
            }
        }
    }

     menu{
        position:absolute;
        top:250px;
        left:-200px;

        li {
            padding-left:40px;
            margin-bottom: 15px;
            color:@color_2;
            .sub-heading-font;
            .fz-s;
        }

        img {
            width:35px;
            float:left;
            margin : 0 5px 0 -40px;
            .rounded();
        }


        div {
            margin-top:5px;
            color:@color_4;
            .ts;
            .reading-font;
            font-size:24px;
            font-weight:bold;
        }

        a {
            color:@color_2;
        }

        #contact  {
            text-indent: -9999px;
            display: block;
            img {
                width:70px;
            }

        }
    }

    /*************************** Slider **********************************/
    #slider {
        float:left;
        width:620px;
        height:310px;
        overflow : hidden;
        padding : 10px;
        position:relative;
        z-index:0;
        border-top:1px solid rgba(250,250,250,0.2);
        border-bottom:1px solid rgba(0,0,0,0.5);
        .rgb(0.9);

        .caption-container{
            padding:10px;
            position:absolute;
            z-index:999;
            .rgb(0.9);
            .shadow(-1px, 1px, 7px, 2px, rgba(0,0,0,0.8));

            h3{ margin-left:30px; .heading-font;.fz-ml;}
            h4{ margin-left:90px; .script-font; color:@color_4; .ts}
        }

        &:before{
            content:'';
            background:url('../img/hearphone.png');
            height:59px;
            margin: -19px 0 0 -52px;
            width:78px;
            position:absolute;
            z-index:1;
        }

        &:after{
            content:'';
            background:url('../img/slider-shadow.png') no-repeat;
            height:76px;
            width:930px;
            position:absolute;
            top:330px;
            z-index:-1;
        }
    }

     section {

        border-top:1px solid rgba(250,250,250,0.2);
        height:290px;
        float:right;
        padding:20px;
        width:280px;
        .rgb(0.9);
        .ts;

        h2 { .fz-l ;}
    }

     /*************************** Player **********************************/
    #player{
        background:url('../img/player.png');
        width:480px;
        height:183px;
        top:470px;
        right:0px;
        position:absolute;
        z-index:2;

        h2{
            text-indent:-9999px;
            position:absolute;
            background:url('../img/live-header.png');
            width:253px;
            height:125px;
            top:160px;
            left:180px;
        }
        object { margin:35px 0 0 140px;}

       
        #on-air {
            color:@color_3;
            height:80px;
            margin: -90px 0 0 260px;
            padding:15px;
            width:160px;
            .heading-font;
            .fz-ms;
            span{
                margin-left:10px;
                .fz-s;
                .reading-font;
                color:@color_4;
                display:block;
            }
        }
    }
}
#primary-content {


    margin-top:160px;
    margin-bottom:100px;
    #articles{
        height:770px;
        position:relative;
        article {

            .details {
                width : 350px;
            }

            position: absolute;
            border:5px solid @color_2;
            .shadow(0, 0, 4px , 2px, rgba(0,0,0,0.8));

            &:hover img.hover{
                opacity : 0;
            }

            img {
                position:absolute;
                max-height:300px;
                min-height:260px;
                opacity:1;
            }

            #articles  h3 {
                position:absolute;
                z-index:888;
                bottom:5px;
                left:5px;
                width:100%;
                padding:10px;
                color:#FFF;
                .fz-s;
                background-color: rgba(0,0,0,0.8);
                .shadow();
            }
        }

        #article-1  {
            height:130px;
            left:90px;
            width:170px;
            z-index:6;
            img { clip: rect(0, 170px, 130px, 0); }
        }

        #article-2  {
            width:250px;
            height:200px;
            left:280px;
            z-index:4;
            img {clip: rect(0, 250px, 200px, 0);}
        }

        #article-3  {
            width:260px;
            height:260px;
            top:200px;
            z-index:5;
            img {clip: rect(0, 260px, 260px, 0);}
        }

        #article-4 {
            width:180px;
            height:140px;
            top:270px;
            left:280px;
            z-index:2;
            img { clip: rect(0, 180px, 140px, 0); }

        }
        #article-5 {
            width:170px;
            height:170px;
            top:480px;
            left:90px;
            z-index:3;
            img { clip: rect(0, 170px, 170px, 0); }

        }
        #article-6  {
            width:260px;
            height:260px;
            top:430px;
            left:280px;
            z-index:1;
            img { clip: rect(0, 260px, 260px, 0);}

        }

        &:before{
            content : "";
            position : absolute;
            width:811px;
            height:741px;
            background:url('../img/actu.png');
            top:-14px;
            left:-285px;
            z-index:1;
        }

        button {
            position : absolute;
            right:50px;
            top:740px;
        }

        h3 {
            position:absolute;
            z-index:998;
            background-color: #000;
            background-color: rgba(0,0,0,0.8);
            bottom:10px;
            right:0;
            padding:10px;
            color:@color_4;
            .heading-font;
            text-shadow : 0 0 0;
            .shadow(0, 0, 3px, 2px , rgba(0,0,0,0.9));
        }

    }

    aside {
        padding-bottom : 60px;
        section {
            border-bottom:10px solid @color_2;
            padding:20px 0;
            &:last-child {
                border-bottom:none;
            }
        }

        #player-download {
            position:relative;
            height:130px;
            h2 {
                text-indent:-9999px;
                background:url('../img/download-player-header.png') no-repeat;
                position:absolute;
                top:100px;
                left:-5px;
                width:137px;
                height:63px;
            }
            img , a{ margin-left: 130px; }
        }

        #next {

            p {
                width : 200px;
            }

            li {
                position:relative;
                float:left;
                margin-right:5px;
                overflow:hidden;
                width:90px;
                height:90px;
            }

            img {
                width: 80px;
                padding:5px;
                background-color: @color_2;
                position:absolute;
            }

            .caption-title {
                position:absolute;
                top:5px; left:5px;
                background-color: rgba(0,0,0,0.6);
                width:80px;
                height:80px;
                 h6 { .fz-l; .sub-heading-font;margin-bottom:0;}
                 h3 { .fz-s; .sub-heading-font;}
            }
            .current .caption-title {
                top:5px;
            }
        }

        #title-search input {
            border-color:@color_2;
        }

        #registration-reminder{
            display: block;
            background:url('../img/registration-reminder.png');
            width:273px;
            height:115px;
        }

        #last-activity {
             li {
                padding : 10px;
                &:not(:last-child){ border-bottom:1px solid #000; }
                &:not(:first-child){ border-top:1px solid @color_3; }

            }

            h3{
                 .fz-s;
                text-shadow : 0 0 0;
                text-transform:uppercase;
                color:@color_4;

                a { text-transform:none; }

            }

            p { text-shadow : 0 0 0; margin-bottom:4px; }
        }
    }

    #podcasts {
        padding-right:60px;
        width:250px;
        li {
            position:relative;
            cursor:pointer;
            padding:5px 0 5px 70px;
            &:not(:last-child){ border-bottom:1px solid #000; }
            &:not(:first-child){ border-top:1px solid @color_3; }

            .download {
                display:block;
                width:20px;
                height:20px;
                background-color: #68b84b;
                background-image:url('../img/blue_arrow_down.png');
                background-repeat:no-repeat;
                background-position: 50% 50%;
                position:absolute;
                top:5px;right:0;
                .rounded(50px);
                &:hover{
                    background-color: #8ce16d;
                    .shadow;
                }
            }
            img {
                width:50px;
                padding:5px;
                background:@color_2;
                margin-left:-70px;
                float:left;
            }
        }
        a { margin-right : 15px; }
    }

    #registration-reminder a{
        background:url('../img/registration-reminder.png') no-repeat;
        display:block;
        text-indent:-9999px;
        width:273px;
        height:115px;
    }

    #love {

        li{
            display:inline-block;
            margin:0 10px 10px 0;
            width:120px;
            height:120px;
            img {
                padding:5px;
                background-color:
                @color_2;
                width: 110px;
                height:110px;
                position:absolute;
            }
        }
    }

    #zoom {
        padding-left:120px;
        margin-bottom : 30px;
        position:relative;
        overflow:hidden;
        min-height:175px;
        h2 {
            margin-left:-120px; 
        }
        img {
            border:5px solid @color_2;
            float:left;
            width:100px;
            margin-left:-120px; position:absolute;
        }
           
    }
}

#footer-wrapper {
    background:#010305 url('../img/footer.jpg') no-repeat center top;
    footer{

        a{
            color:#FFF;
            &:hover{
                color:@color_3;
            }
        }

        background: #010305 url('../img/inner-footer.jpg') repeat-x;
        width:960px;
        margin:0 auto;
        padding-top:260px;
        position:relative;

        #logo-download {
            position:absolute;
            top:70px;
            right:10px;
            img{width:180px;
                padding:5px;
                background-color: @color_2;
                .shadow(0, 0, 4px, 1px, rgba(0,0,0,0.7));
            }
            h2{
                text-indent:-9999px;
                background:url('../img/logo-donwload-header.png') no-repeat;
                width:303px;
                height:69px;
                position:absolute;
                left:120px;
                top:-30px
                
            }
            
        }

        #contact-form{
            width:330px;
            position:relative;
            float:left;
            margin-right:40px;
            h2{

                text-indent:-9999px;
                background:url('../img/contact-header.png') no-repeat;
                width:141px;
                height:51px;
                position:absolute;
                top:30px;
            }
        }

        form {
            background:url('../img/contacts-bg.png') no-repeat right;            
            padding:95px 0 40px 0;
            textarea { height: 70px; }

            input, textarea{
                width:200px;
                margin-bottom:15px;
            }

            button {
                bottom:0px;
                right:110px;
            }

        }

        button, .button {
                 position : absolute;
                 bottom:0;
                 right:0;
                 .fz-ms;
            }

        div { float:right;
            overflow:hidden;
            background:url('../img/end.png') no-repeat right bottom;
        }

        #sponsors {
            overflow:hidden;
            width:575px;
            height:auto;
            padding-bottom:20px;
            background:url('../img/sponsors-bg.png') repeat-x left bottom;

            ul {
                margin:0;padding:0;
            }

            li {
               display:inline-block;
               margin: 0 10px 10px 0;
               width:80px;
               height:80px;
            }
            img {
                padding:5px;
                background-color: @color_2;
                width:70px;
                position:absolute;
            }
        }

        #subscribe {
            margin-top:30px;
            width:240px;
            ul{
                list-style-image:url('../img/mini-rss-icon.png');
                margin-left:30px;
            }
        }

        #copyright{
            clear:both;
            padding-top:30px;
            img{width:30px;margin-right:15px;}
            p{float:left;}
            nav {
                float:right;
                li{float:left;padding-right:15px}
            }
        }
    }
}

.debugger {
    position:fixed;
    top:20px;
    left:20px;
    z-index:999;
    width:200px;
    height:35px;
    background-color: rgba(0,0,0,0.8);
}

.details {
   display:none;
   background-color: @color_2;
   padding:10px;
   position:absolute;
   z-index:999;
    border : 1px solid #012d3d;
    .shadow(0, 0, 4px , 1px , rgba(0,0,0,0.8));
   .rounded();

   h6 {
       .heading-font();
       background-color: @color_3;
       padding:10px;
       margin-top:15px;
       color:@color_2;
        .rounded();
   }
}

.details h3 , h3.details {
   .heading-font;
}




#blog article{
    overflow:hidden;
    padding:20px;
    padding-left:220px;
    border-bottom:1px solid #000; 
    border-top:1px solid @color_3;
    position:relative;
    &:first-child { border-top:none;}
    &:last-child { border-bottom:none;}
}



#blog h3 {
    .fz-l;
    .heading-font;
    color:#FFF;
    margin-bottom:10px;
}

#blog .post-metas {
    margin-bottom:30px;
    color: #ccc;
}

#blog object {
   display:inline;
   margin-bottom:25px;
}

#blog a.download {
                display:block;
                width:20px;
                height:20px;
                background-color: #68b84b;
                background-image:url('../img/blue_arrow_down.png');
                background-repeat:no-repeat;
                background-position: 50% 50%;
                position:absolute;
                top:55px;left:390px;
                .rounded(50px);
                &:hover{
                    background-color: #8ce16d;
                    .shadow;
                }
}

#blog img {
    width:180px;
    margin-left:-220px;
    float:left;
    border:5px solid @color_2;
}

#blog .post-text .continue{
    display:block;
    float:right;
    margin-top:25px;
}

img.original { opacity:1;}
img.hover { .transition(opacity, 0.3s); }
img.hover:hover { opacity:0;}

ul, li {
    list-style: none;
}

#programme img {
    width:25px;
}

#programme ul{
    display:inline-block;
    zoom:1;
}

/* Datepicker
----------------------------------*/
.ui-datepicker { font-size:10px; width: 210px; padding: 5px 0 5px 0; font-weight: bold; border-top: 1px solid #ffffff; background: #fff; border: 3px solid @color_2; display:none;  }
#calendar .ui-datepicker { display: block; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; color:@color_2 }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: .4em; text-align: center; font-size:14px; color: #4b4f5d; cursor: pointer; }
.ui-datepicker .ui-datepicker-prev a, .ui-datepicker .ui-datepicker-next a { font-size:12px;}
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left: 6px; }
.ui-datepicker .ui-datepicker-next { right:17px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 210px; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: center; text-decoration: none; color: #4b4f5d; text-shadow:0 1px 0 #ebebeb; border: 1px solid transparent; }
.ui-datepicker td span, .ui-datepicker td.ui-datepicker-current-day a, .ui-datepicker td span, .ui-datepicker td.ui-datepicker-current-day a:hover {
	background: #666666;
	color: #ffffff;
	text-shadow: 1px 0 0 #000000;
}
.ui-datepicker td a:hover { background: #ccc; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; }

/* RTL support */
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }

.ui-datepicker-cover {
    display: none; /*sorry for IE5*/
    display: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}

#playlist ul{
    margin-top:30px;
}

#playlist li h2{
    margin:0;
}

#playlist li p{
    margin-left: -70px;
    float:left;
    font-size:20px;
    font-weight:bold;
}

#playlist li {
    padding:10px;
    padding-left:80px;
    overflow:hidden;
    border-bottom:1px solid #000;
    border-top:1px solid @color_3;
    &:first-child { border-top:none;}
    &:last-child { border-bottom:none;}
}