/* 
    Document   : content
    Created on : 27 mai 2011, 10:53:48
    Author     : pfisz
    Description:
        Modules de l'application JDN-EXPERTS
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/ 

/* --------------------------------------------------------- */
/*                 START BOUTONS GENERIQUES                  */
/* --------------------------------------------------------- */
/*/----> SMALL BUTTONS (from L'Internaute) <----/*/
.btnS, .btnM,
.ui-widget button{
    display:inline-block;
    vertical-align:baseline;
    -webkit-box-shadow:0 1px 0 #999;
    -moz-box-shadow:0 1px 0  #999;
    box-shadow:0 1px 0 #999;
    font-family:Arial;
    font-weight:bold;
    text-transform:uppercase;
    *overflow:visible; /* corrige un bug de taille */
    *vertical-align:middle;
    padding: 0 10px;
    height: 22px;
    line-height: 22px;
    font-size:11px;
    text-decoration:none;
    position:relative;
}
.btnS:hover, .btnM:hover{text-decoration:none}
.btnM{
    height: 33px;
    line-height: 33px;
    font-size:16px;    
}
.ui-widget button,
button.btnS,
button.btnM,
input.btnS,
input.btnM{ line-height:normal; }

/*/----> Couleur des boutons <----/*/
/* bouton gris */
.btnG,
.ui-widget button{
    color:#303030;
    border:1px solid #d5d5d5;
    background: #FFFFFF; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#F4F4F4)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F4F4F4',GradientType=0 ); /* ie */
    background: -o-linear-gradient(top, #FFFFFF 0%,#F4F4F4 100%); /* opera */
}

.btnG:hover,
.btnG:focus{    
    color:#303030;
    cursor:pointer;
    text-decoration: none;
    background: #FFFFFF; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #FBFBFB 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#FBFBFB)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FBFBFB',GradientType=0 ); /* ie */
    background: -o-linear-gradient(top, #FFFFFF 0%,#FBFBFB 100%); /* opera */
}
.btnG:active{
    outline:none;
    background: #F4F4F4; /* old browsers */
    background: -moz-linear-gradient(top, #F4F4F4 0%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F4F4), color-stop(100%,#FFFFFF)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F4F4F4', endColorstr='#FFFFFF',GradientType=0 ); /* ie */
    background: -o-linear-gradient(top, #F4F4F4 0%,#FFFFFF 100%); /* opera */
}


/* --------------------------------------------------------------------------------------- */
/*                                  B O U T O N S                                          */
/* --------------------------------------------------------------------------------------- */

.btn_type2 {
    -webkit-box-shadow:2px 2px 5px #999;
    -moz-box-shadow:2px 2px 5px #999;
    box-shadow:2px 2px 5px #999;
    -webkit-text-shadow:1px 1px 0 rgba(102, 102, 102, 0.5);
    -moz-text-shadow:1px 1px 0 rgba(102, 102, 102, 0.5);
    text-shadow:1px 1px 0 rgba(102, 102, 102, 0.5);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: none;
    height: auto;
    padding: 5px 15px;
    font-size: 13px;
    line-height: normal;
    text-transform: uppercase;
}

/*/----> Couleur des boutons <----/*/
/* bouton Bleu */
.btnB{
    color:#fff;
    background: #58bbde; /* Old browsers */
    background: -moz-linear-gradient(top, #58bbde 0%, #1e90b9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#58bbde), color-stop(100%,#1e90b9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #58bbde 0%,#1e90b9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #58bbde 0%,#1e90b9 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #58bbde 0%,#1e90b9 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58bbde', endColorstr='#1e90b9',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #58bbde 0%,#1e90b9 100%); /* W3C */
}
.btnB:hover,
.btnB:active,
.btnB:focus{
    color:#fff;
    cursor:pointer;
    text-decoration:none;
}
.btnB:hover,
.btnB:focus{
    background: #52c9e8; /* Old browsers */
    background: -moz-linear-gradient(top, #52c9e8 0%, #1ca6cf 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#52c9e8), color-stop(100%,#1ca6cf)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #52c9e8 0%,#1ca6cf 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #52c9e8 0%,#1ca6cf 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #52c9e8 0%,#1ca6cf 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52c9e8', endColorstr='#1ca6cf',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #52c9e8 0%,#1ca6cf 100%); /* W3C */
}
.btnB:active{
    background: #1e90b9; /* Old browsers */
    background: -moz-linear-gradient(top, #1e90b9 0%, #1e90b9 1%, #58bbde 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e90b9), color-stop(1%,#1e90b9), color-stop(100%,#58bbde)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1e90b9 0%,#1e90b9 1%,#58bbde 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1e90b9 0%,#1e90b9 1%,#58bbde 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #1e90b9 0%,#1e90b9 1%,#58bbde 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e90b9', endColorstr='#58bbde',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #1e90b9 0%,#1e90b9 1%,#58bbde 100%); /* W3C */
}

/*/----> BOUTONS CHAINE TV <----/*/
.btnChaineTv {
    display: inline-block;
    position: relative;
    padding: 2px;
    background: #000;
    border: 1px solid #484744;
}
.btnChaineTv:hover, .btnChaineTv:focus {
    border-color: #4e6578;
}

/* --------------------------------------------------------------------------------------- */
/*                                  I C O N E S                                            */
/* --------------------------------------------------------------------------------------- */
/* Home (for breadcrump) */
.icoHome {
    background: url("../img/sprite_ico.png") no-repeat scroll 0 -26px transparent;
    display: inline-block;
    height: 12px;
    vertical-align: baseline;
    width: 13px;
}

/* Connexion Auteur (cadenas) */
.icoCadenas {
    background: url("../img/sprite_ico.png") no-repeat scroll -23px -26px transparent;
    display: inline-block;
    width: 10px;
    height: 17px;
    vertical-align: middle;
    
}

/* Fleche Bleu */
.arrow_blue {
    width: 4px;
    height: 8px;
    background: transparent url(../img/sprite_ico.png) no-repeat 0 0;
}

/* --------------------------------------- Social ---------------------------------------- */
.icoTw, .icoFb, .icoJdn, .icoIn {
    width:14px;
    height: 16px;
    margin-right: 2px;
    background: transparent url(../img/sprite_ico.png) no-repeat 0 0;
    text-indent: -9999px;
    /* IE6+7 Fix */
    *text-indent:0;
    *font-size:0;
    *line-height:0;
    *overflow:hidden;
}
.icoTw {
    background-position: -14px 0;
}
.icoFb {
    background-position: -34px 0;
}
.icoJdn {
    background-position: -55px 0;
}
.icoIn {
    background-position: -75px 0;
}

/* --------------------------------------- Social Partage Box ---------------------------------------- */
.shareBox iframe {
    display: inline;
}
.ico {
    background: transparent url("../img/sprite_ico.png") no-repeat scroll 0 0;
    display: inline-block;
    vertical-align: baseline;
}
.icoArrowG-B {
    background-position: 0 -8px;
    height: 10px;
    width: 8px;
    *vertical-align: top;
}
.icoPrint {
    background: url("../img/sprite_ico.png") no-repeat scroll -42px -23px transparent;
    display: inline-block;
    height: 22px;
    line-height: 22px;
    width: 16px;
}
/* --------------------------------------- Bullets ---------------------------------------- */
.icoBullet {
    width: 43px;
    height: 36px;
    background: transparent url(../img/sprite_ico.png) no-repeat -99px 0;
    color: #fff;
    font-size: 18px;
}

/* Chaine TV - Fermer*/
.icoClose2 {
    width: 10px;
    height: 10px;
    background-position: -153px -53px;
}
.icoClose2:hover {
    background-position: -153px -66px;
}
/*  Chaine TV - Statut */
.icoTvStatus {
    height: 27px;
    line-height: 27px;
    background: transparent url(../img/sprite_ico.png) no-repeat 0 0;
}
    .icoLive {
        width: 41px;
        background-position: -0px -53px;
    }
    .icoReplay {
        width: 61px;
        background-position: -51px -53px;
    }


/*-----------------------------------------------------------------------*/
.icoArrow2 {
    width: 8px;
    height: 9px;
    background-position: -171px -53px;
    *vertical-align: middle;
}

.icoMiniPlay{ 
    width: 21px; 
    height: 21px; 
    background-position: -68px -26px;
    position: absolute;
    bottom: 15px;
    right: 15px
}
.icoMiniPlay2 { 
    width: 21px; 
    height: 21px; 
    background-position: -122px -53px;
}


/* position relative pour les tooltips et les dropdowns */
.rel,
.rel_z2{
    position:relative;
    display:inline-block;
    vertical-align:middle;
    *zoom:1;
    *display:inline;
}
.rel_z2{ z-index:101 }

/*
- FORMULAIRES -------------------------------------------------------------------
*/
.inlineForm{
    position:relative;
    display:inline-block;
    vertical-align:middle;
    *zoom:1;
    *display:inline;
}
    .inlineForm legend{
        display:none;
    }
    .inlineForm .input{
        border:none;
        float:left;
        width:390px;
        _width:354px;
        height:19px;
        padding:6px 37px 6px 6px;
        color:#838383;
        font-size:14px;
        line-height:19px;
        border:1px solid #dddddd;
        background: #F6F6F6; /* old browsers */
        background: -moz-linear-gradient(top, #F6F6F6 0%, #FFFFFF 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F6F6F6), color-stop(100%,#FFFFFF)); /* webkit */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F6F6F6', endColorstr='#FFFFFF',GradientType=0 ); /* ie */
        background: -o-linear-gradient(top, #F6F6F6 0%,#FFFFFF 100%); /* opera */
        -moz-border-radius:3px;
        -webkit-border-radius:3px;     
        border-radius:3px;        
    }
    .inlineForm .submit{
        position:absolute;   
        top:0;
        right:0;
        width:36px;
        height:33px;
        cursor:pointer;
        border:none;
        -moz-border-radius: 0 3px 3px 0; 
        -webkit-border-radius: 0 3px 3px 0; 
        border-radius: 0 3px 3px 0;
        z-index: 100;
    }
    .inlineForm .submit.search{
        /*background-image:url(../img/sprite_ico.png);*/
        background-image:url(http://www.journaldunet.com/studio/nouvelle_tetiere/image/recherche_bleue.png);
        background-repeat: no-repeat;
        /*background-position: -3px -162px;*/
        background-position: -8px -7px;
        text-indent:-9999em;
        *padding-left:9999em; /* corrige le bug de text-indent non pris en charge sur IE */
        _border-left:1px solid #ddd;
    }
    /* petitmoteur*/
    .smallInlineForm{
        display: block;
        position: relative;
        height:24px;
        padding: 0 24px 0 5px;
        color:#838383;
        line-height:24px;
        font-size: 12px;
        border:1px solid #666666;
        background: #F6F6F6; /* old browsers */
        background: -moz-linear-gradient(top, #F6F6F6 0%, #FFFFFF 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F6F6F6), color-stop(100%,#FFFFFF)); /* webkit */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F6F6F6', endColorstr='#FFFFFF',GradientType=0 ); /* ie */
        background: -o-linear-gradient(top, #F6F6F6 0%,#FFFFFF 100%); /* opera */
    } 
    .smallInlineForm .input{
        border:0;
        background: none;
        width: 100%;         
        height:24px;
        line-height: 24px;
    }
    .smallInlineForm .submit{
        position:absolute;     
        top:0;
        right:0;
        width:24px;
        height:24px;
        cursor:pointer;
        border:none;
    }
    .smallInlineForm .submit.search{
        text-indent:-9999em;
        background:url(../img/sprite_ico.png) no-repeat  -42px -89px;
        *padding-left:9999em; /* corrige le bug de text-indent non pris en charge sur IE */
    }
    

/*
- ARRONDIS -------------------------------------------------------------------
*/

.radius5    {-moz-border-radius:5px;            -webkit-border-radius:5px;              border-radius:5px              }
.radiusTL5  {-moz-border-radius-topleft:5px;    -webkit-border-radius-topleft:5px;      border-top-left-radius:5px     }
.radiusTR5  {-moz-border-radius-topright:5px;   -webkit-border-radius-topright:5px;     border-top-right-radius:5px    }
.radiusBL5  {-moz-border-radius-bottomleft:5px; -webkit-border-radius-bottomleft:5px;   border-bottom-left-radius:5px  }
.radiusBR5  {-moz-border-radius-bottomleft:5px; -webkit-border-radius-bottomleft:5px;   border-bottom-left-radius:5px  }
.radius10   {-moz-border-radius:10px;           -webkit-border-radius:10px;             border-radius:10px             }


/*
- MODALE DE MODIFICATION D'IMAGE -----------------------------------------------
*/     

.editImage{
    position:absolute;
    left:50%;
    top:40%;
    width:250px;    
    z-index:10;        
}    
    .editImage .hd{
        position:relative;
        background:#000;
        padding:10px 60px 10px 10px;
        color:#a8a8a8;
    }
        /* icones */
        .editImage .icoMove,
        .editImage .icoMini{
            position:absolute;
            top:50%;
            margin-top:-9px;        
            display:inline-block;
            width:18px;
            height:18px;            
        }
        .editImage .icoMove{
            right:33px;
            background:#313131 url(../img/sprite_ico.png) -66px -142px;    
        }
        .editImage .icoMove:hover{ cursor:move }
        .editImage .icoMini{        
            right:10px;        
            background:#313131 url(../img/sprite_ico.png) -84px -142px;    
        }
    .editImage .bd{
        background:#313131;
        background:hsla(0,0%,0%,.8);
        padding:0 10px 5px;
        color:#fff;
        overflow:hidden;        
    }
    .editImage .bd li{
        position:relative;
        padding-left:40px;
        zoom:1;
    }
        /* icones */
        .editImage .icoCrop,
        .editImage .icoRotate,
        .editImage .icoRedim,
        .editImage .icoLum{
            position:absolute;
            top:5px;
            left:0;            
            display:inline-block;
            width:30px;
            height:30px; 
            -moz-border-radius: 5px;
            border-radius: 5px; 
        }
        .editImage .icoCrop{    background:#1f1f1f url(../img/sprite_ico.png) -128px -237px }
        .editImage .icoRotate{  background:#1f1f1f url(../img/sprite_ico.png) -156px -237px }
        .editImage .icoRedim{   background:#1f1f1f url(../img/sprite_ico.png) -183px -236px }
        .editImage .icoLum{     background:#1f1f1f url(../img/sprite_ico.png) -209px -237px }

        
/*
- MODALE EN OVERLAY -----------------------------------------------
*/
/* objet modal */
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background: url("../img/bg_hilight.png");
  display:none;
}
#modals .window {
  position:absolute;
  left:0;
  top:0;
  width: 560px;
  display:none;
  z-index:9999;
}

/* icone fermer */
.icoClose,
.icoOptions{
    display:inline-block;
    vertical-align:middle;
    width:20px;
    height:21px;
    background:url(../img/sprite_ico.png) no-repeat 0 -117px;
}
.icoClose span,
.icoOptions span{ display:none }
a.icoClose:hover,
a.icoClose:focus,
a.icoClose.selected{ background-position:-20px -117px }
a.icoClose:active{   background-position:-40px -117px }

/* options */
.icoOptions{            background-position:0 -138px }
a.icoOptions:hover{     background-position:-20px -138px }
a.icoOptions:active,
.icoOptionsSel{         background-position:-40px -138px }

#modals h2 {
    font-size: 22px;
    color: #303030;
}

/*
- TAGS DEPOT CHRONIQUE -----------------------------------------------
*/
#liste_suggestion_motcle li{
    background-color:#34A5CD;
    display:inline-block;
    position:relative;
    margin:5px 10px 5px 0;
    
}
#liste_suggestion_motcle li a{
    color:#fff;
    cursor:pointer;
    display:block;
    padding:5px 20px
}