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

[MEDIA:SCREEN] - CCM/Benchmark Framework

Document : Layout CSS
Author   : Damien SYREN

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

/*
- DEFAULT LAYOUT ---------------------------------------------------------------

*/

/* @import url(http://fonts.googleapis.com/css?family=Lobster&v1); */

@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: normal;
  src: local('Lobster'),url('http://themes.googleusercontent.com/static/fonts/lobster/v5/MWVf-Rwh4GLQVBEwbyI61Q.woff') format('woff');
}

body{ background-color: #000}

body.bg_2cols .body{background: #fff url('../img/cop_bg_2cols.gif') repeat-y center top;} 
body.bg_2cols .body.tpl_2colsR{background: #fff url('../img/cop_bg_1cols.gif') repeat-y center top;} 
body.bg_1col .body{background: #fff url('../img/cop_bg_1cols.gif') repeat-y center top;} 

.body {background: #fff}
/*body{ background-color: #fff}

body.bg_2cols {background: #fff url('../img/cop_bg_2cols.gif') repeat-y center top;} 
body.bg_1col {background: #fff url('../img/cop_bg_1cols.gif') repeat-y center top;}*/
.body .page{color:#303030;}

.body:after,
.page:after{
    clear:both;
    display:block;
    visibility:hidden;
    overflow:hidden;
    height:0 !important;
    line-height:0;
    font-size:xx-large;
    content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
}
.page{
    margin:0 auto;
    width:1000px;
    word-wrap:break-word; /* CSS3 permet de faire des cesure sur les long mots sans espaces */
}

/*/----> GESTION DES LAYOUTS <----/*/

/* 1 colonne centrale */
.tpl_1col .ctCols{float:none; width:100%;}
.tpl_1col .main{margin:0; padding:15px}
.tpl_1col .leftCol,
.tpl_1col .rightCol{ display:none }
.tpl_1col .timeNavWrapper .leftCol{ display: block; width: 170px; float: left}
.tpl_1col .timeNavWrapper .ctCols{ float: left; width: 830px;}

/* 2 colonnes gauche */
.tpl_2cols .ctCols{float:left; width:830px}
.tpl_2cols .main{width:100%}
.tpl_2cols .leftCol{float:left;width:170px;}
.tpl_2cols .rightCol{float:right;width:300px;} /*320*/

/* 2 colonnes droite*/
.tpl_2cols.tpl_2colsR .leftCol{ display: none;}
.tpl_2cols.tpl_2colsR .timeNavWrapper .leftCol{ display: block;}
.tpl_2cols.tpl_2colsR .ctCols{float:none; width:100%;}
.tpl_2cols.tpl_2colsR .main{ width: 640px; float: left;}

/* 3 colonnes (par defaut) */
.tpl_3cols .ctCols{float:left;width:830px;}
.tpl_3cols .main{float:left;margin:0;width:510px;}
.tpl_3cols .leftCol{float:left;width:170px}
.tpl_3cols .rightCol{float:right;width:300px;}
 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  .ctCols{
      position: relative;
      left:1px;
  } 
}

/* template hors login */
body.bg_1col.tpl_deconnected .body, 
body.bg_2cols.tpl_deconnected .body{background: #fff url('../img/cop_bg_1cols.gif') repeat-y center top;}

/*body.bg_1col.tpl_deconnected, 
body.bg_2cols.tpl_deconnected{background: #fff url('../img/cop_bg_1cols.gif') repeat-y center top;}*/

.tpl_deconnected .tpl_2cols .ctCols,
.tpl_deconnected .tpl_2cols.tpl_2colsR .ctCols,
.tpl_deconnected .tpl_3cols .ctCols{float:none; width:100%;}
.tpl_deconnected .tpl_2cols .leftCol,
.tpl_deconnected .tpl_2cols.tpl_2colsR .leftCol,
.tpl_deconnected .tpl_3cols .leftCol{ display: none}
.tpl_deconnected .tpl_2cols .main,
.tpl_deconnected .tpl_2cols.tpl_2colsR .main,
.tpl_deconnected .tpl_3cols .main,
.tpl_deconnected .tpl_3cols .contentSec .main { width: 640px; float: left;}

.tpl_deconnected .body .timeNavWrapper .leftCol{ display: block; width: 170px; float: left}
.tpl_deconnected .body .timeNavWrapper .ctCols{ float: left; width: 830px;}


.prehome .body, .errorPage .body{    
    background:#fff url('../img/cop_bg_prehome.jpg') repeat-x left bottom;
    padding: 20px 0;
}
.prehome, .errorPage{ background: #fff url('../img/cop_bg_404.jpg')}

/*
- SKIN LAYOUT ------------------------------------------------------------------
C'est ici qu'on va skinner les �l�ments sp�cifiques aux pages avec des #id.
Ce n'est pas conseiller de skinner tout le site ici car cela est contraire �la
m�thode OOCSS.
*/

.content{overflow:hidden;padding-bottom:30px;}

.contentSec{
    padding: 20px
}
.tpl_3cols .contentSec .main{ width: 470px}
.tpl_3cols .contentSec .rightCol{ width: 300px} /*305*/


/* SEARCH FORM */



/* FORMS */

.form .input{
border:solid 1px #ddd;padding:7px 5px;
-webkit-box-shadow: 0px 0px 0px 1px #fff;-moz-box-shadow: 0px 0px 0px 1px #fff;box-shadow: 0px 0px 0px 1px #fff;
-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;
zoom:1;
}

.inputTxt, textarea {
    background:none;border:none;
    color:#666;font-size:12px;
    line-height: 1.2;
    vertical-align: middle;
    width:100%;
}

*.lineError .input,{ filter:none;}


/*
<-------------- HEADER -------------->
*/

.head{
    position:relative;
    padding: 4px 0;
    *z-index: 1000;
    background: rgb(131,131,131);
    background: -moz-linear-gradient(top, rgba(131,131,131,1) 0%, rgba(105,105,105,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(131,131,131,1)), color-stop(100%,rgba(105,105,105,1)));
    background: -webkit-linear-gradient(top, rgba(131,131,131,1) 0%,rgba(105,105,105,1) 100%);
    background: -o-linear-gradient(top, rgba(131,131,131,1) 0%,rgba(105,105,105,1) 100%);
    background: -ms-linear-gradient(top, rgba(131,131,131,1) 0%,rgba(105,105,105,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#838383', endColorstr='#696969',GradientType=0 );
    background: linear-gradient(top, rgba(131,131,131,1) 0%,rgba(105,105,105,1) 100%);
    min-height: 49px;
}

.logo{float: left; margin-right: 15px; margin-top: 5px;}

.memberInfos{
    float: right;
    width: auto;
 }
.memberInfos a.wrapper{
    border:1px solid #5d5d5d;
    padding: 5px 15px;
    color:#c4c4c4;
    width: auto;
    overflow: hidden;
    background: rgb(141,141,141);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhkOGQ4ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3YjdiN2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(141,141,141,1) 0%, rgba(123,123,123,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(141,141,141,1)), color-stop(100%,rgba(123,123,123,1)));
    background: -webkit-linear-gradient(top,  rgba(141,141,141,1) 0%,rgba(123,123,123,1) 100%);
    background: -o-linear-gradient(top,  rgba(141,141,141,1) 0%,rgba(123,123,123,1) 100%);
    background: -ms-linear-gradient(top,  rgba(141,141,141,1) 0%,rgba(123,123,123,1) 100%);
    background: linear-gradient(top,  rgba(141,141,141,1) 0%,rgba(123,123,123,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d8d8d', endColorstr='#7b7b7b',GradientType=0 );

}
.memberInfos a.wrapper:hover{
    color:#c4c4c4;
    background: rgb(149,149,149);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk1OTU5NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4NDg0ODQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(149,149,149,1) 0%, rgba(132,132,132,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(100%,rgba(132,132,132,1)));
    background: -webkit-linear-gradient(top,  rgba(149,149,149,1) 0%,rgba(132,132,132,1) 100%);
    background: -o-linear-gradient(top,  rgba(149,149,149,1) 0%,rgba(132,132,132,1) 100%);
    background: -ms-linear-gradient(top,  rgba(149,149,149,1) 0%,rgba(132,132,132,1) 100%);
    background: linear-gradient(top,  rgba(149,149,149,1) 0%,rgba(132,132,132,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#848484',GradientType=0 );

    
}



.oneLineHead{line-height:37px;}
/*.head .right{ margin-top: 6px}*/

.errorPage .head{ background: #fff}
.errorPage .page{ width: 800px}

.errorPage .stamp{
    position: absolute;
    top: 20px; right: 20px;
    width: 70px;
    height: 82px;
    background-position: 0 -338px;
    color: #002942;
    font-family: Lobster;
    font-size: 23px;
    line-height: 26px;
    padding: 20px 0 0 13px;
}
.errorPage .stamp span{ font-size: 34px }

/*
<-------------- FOOTER -------------->
*/
.foot{ padding: 25px 0; background: #000; width: 100%; bottom: 0;}
.foot .col{
    border:solid #5c5c5c;
    border-width: 0 1px;
    margin-left: 3px;
    padding:0 15px;
    min-height: 180px;
}
.foot .bloc:first-child .col{padding-left: 0; margin-left: 0; border-left: none}
.foot .lastBloc .col{ border-right: 0; padding-right: 0}

/*
<-------------- TIME TRAVEL -------------->
*/

/* TIME NAV */
.timeNavWrapper{
    background: rgb(245,245,247);
    background: -moz-linear-gradient(top, rgba(253,253,255,1) 0%, rgba(236,236,238,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,253,255,1)), color-stop(100%,rgba(236,236,238,1)));
    background: -webkit-linear-gradient(top, rgba(253,253,255,1) 0%,rgba(236,236,238,1) 100%);
    background: -o-linear-gradient(top, rgba(253,253,255,1) 0%,rgba(236,236,238,1) 100%);
    background: -ms-linear-gradient(top, rgba(253,253,255,1) 0%,rgba(236,236,238,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdff', endColorstr='#ececee',GradientType=0 );
    background: linear-gradient(top, rgba(253,253,255,1) 0%,rgba(236,236,238,1) 100%);
    border: 1px solid #c9cacc;
    border-width: 1px 0;
}
.body .timeNavWrapper .leftCol, { float: left; width: 170px; display: block}
.body .timeNavWrapper .ctCols{ float: left; width: 830px}
.timeNavWrapper .ctCols{ position: relative; height: 50px; padding-bottom: 4px;}
.timeNav,.timeNav:focus{
    color:#DD1F20; /*#949496;*/
    font-family:'Lobster', Arial, sans-serif;text-decoration:none;
    display:block;
    height: 54px; 
    line-height: 54px;
    position: relative;
    padding:0 20px 0 15px;
    z-index: 100;
    font-size:18px;
}
.timeNav .arrowNav{ background-position: -218px -138px; width: 20px; height: 54px; position: absolute; top: 0; right: 0}

.timeNav:hover,.timeNav.active{color:#DD1F20; text-decoration:none;}

#timeCapsule{ 
    display: inline-block;
    margin:auto;
    -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -o-user-select: none;
   user-select: none;
}
#timeTravel,#timeCapsule {overflow:hidden;cursor:pointer}
canvas { -webkit-optimize-contrast;image-rendering:optimizeSpeed; }
.ct_1col{ background:#f1f1f1}

/* A SUPPRIMER QD NOUVEAU CIBLAGE EN PLACE */
.ct_1col .content{ width: 755px; overflow: visible; margin: auto; padding-bottom: 0}
.ct_1col .content.contentPage{ width: 100%}


/*

<-------------- NAVIGATION -------------->

.primaryNav         =   navigation principale (ul)
.primaryNav ul      =   sous-menu navigation principale
.secondaryNav       =   navigation secondaire (ul)
.subNav             =   navigation subsidiaire
.pageNav            =   navigation de page

*/

/* PRIMARY NAV */

.primaryNav{/* Maud border-bottom:solid 1px #65a3c7; */}
.primaryNav li{display:block; border-bottom: 1px solid #C9CACC}
.primaryNav li a{font-weight:bold;padding:13px 20px ;}
.primaryNav ul{padding:0 20px 10px 20px;}
.primaryNav ul li{ border-bottom: none;}
.primaryNav ul li a{font-weight:normal; font-size: 11px; padding: 4px 0}

.primaryNav li a,
.primaryNav li a:focus{display:block; text-decoration:none; *zoom:1}

.primaryNav li a:hover{ color:#303030; text-decoration:none}

.primaryNav li a.unfold,.primaryNav li a.unfold.current{
    /* Maud background: #0c4a6e;
    background: -moz-linear-gradient(top, #0c4a6e 0%, #135175 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0c4a6e), color-stop(100%,#135175));
    background: -webkit-linear-gradient(top, #0c4a6e 0%,#135175 100%);
    background: -o-linear-gradient(top, #0c4a6e 0%,#135175 100%);
    background: -ms-linear-gradient(top, #0c4a6e 0%,#135175 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c4a6e', endColorstr='#135175',GradientType=0 );
    background: linear-gradient(top, #0c4a6e 0%,#135175 100%);
    border-top-color: #0c4a6e; */}

.primaryNav li a.current{ color:#303030 }


/* SEARCH NAV */
.searchNav, .searchNav li{display:block;}
.searchNav a{
    background:url('../img/cop_separ2.gif') repeat-x center bottom;
    color:#303030;font-size:12px;text-decoration:none;
    display:block;
    padding:8px 10px;
}
.searchNav a:focus{color:#303030;}
.searchNav a.title{background-color:#fff; background-image:none;}
.searchNav a.current{font-weight:bold;}
.searchNav a:hover{text-decoration:underline;}
.searchNav a.current:hover{text-decoration:none;cursor:default}

.searchNavNotif{
    background-color:#f9f9f9;
    color:#898988;font-size:10px;font-weight:normal;text-align:center;
    padding:0 1px;
    width:20px;
}
.title .searchNavNotif{background-color:#ebebeb;}
:hover .searchNavNotif{text-decoration:none;}



/* Notifications items menu principal */
.navNotif{
    background: #c92424;/*d8d8d8*/
    font:bold 12px Arial, sans-serif; color:#fff;/*303030*/
    padding:2px 6px;
    /*text-shadow: 1px 1px 0px #ffffff;*/}

/* SECONDARY NAV */

#tabRelations .secondaryNav {margin-bottom: 15px}


.secondaryNav,
.ui-tabs .ui-tabs-nav{
    border-bottom:solid 1px #e9e9e9 !important;
}

.secondaryNav li,.ui-tabs .ui-tabs-nav li{
    display:inline;float:left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    top: 1px;
    white-space: nowrap}

.secondaryNav a,.ui-tabs .ui-tabs-nav li a{
    background:#efefef;
    display: block;
    font-size: 13px;font-weight:normal;color:#666;text-decoration: none;
    margin-left:10px;margin-bottom:0;padding:10px 12px 8px 12px;}

.secondaryNav .current,
.ui-tabs .ui-tabs-nav li.ui-tabs-selected,.ui-state-active,
.ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active{
    background:none;
    padding-bottom:0;}

.secondaryNav .current a, 
.ui-tabs .ui-tabs-nav li.current a,
.ui-tabs .ui-tabs-nav li.ui-tabs-selected.ui-state-active a{
    border: 1px solid #C9CACC;
    border-width: 0 1px;border-top:solid 4px #4583a7;
    /*font-weight:bold;*/
    color:#303030;
    background: #fff;
    padding: 6px 11px 8px 11px;
    *overflow:visible;*zoom:1;}

.secondaryNav a:hover,
.ui-state-default a:hover, .ui-widget-content .ui-state-default a:hover, .ui-widget-header .ui-state-default a:hover{
    border-top:solid 4px #9ab9cb;
    color:#303030;
    padding-top:6px;padding-bottom:8px}

.secondaryNav .current a:hover,
.ui-tabs .ui-tabs-nav .ui-tabs-selected.ui-state-active a:hover{cursor:default;border-top-color:#4583a7}

.secondaryNav li.first a{padding-left:12px;padding-right:12px;margin-left:0;}

/* secondary nav for schools */
.schoolNav li.first{padding-left:73px;}

/* UI TABS (to disable UI default styles) */
#ui-nav{padding:0;}
#ui-nav{background:none;border:none;}
#ui-nav ul,#ui-nav .ui-widget-header {background: none;border: none;}
#ui-nav .ui-tabs-nav {margin: 0;padding:0;
    margin-bottom: 15px;}
#ui-nav .ui-state-default,
#ui-nav .ui-widget-content .ui-state-default,
#ui-nav .ui-widget-header .ui-state-default {
    background: none;
    border: none;}

#ui-nav .ui-state-disabled,
#ui-nav .ui-widget-content .ui-state-disabled,
#ui-nav .ui-widget-header .ui-state-disabled {
    background-image: none;
    opacity: 1;}

#ui-nav .ui-corner-top {
    border-top-left-radius: 0;border-top-right-radius: 0;}

#ui-nav  .ui-tabs-nav li.ui-state-disabled a,
#ui-nav .ui-tabs-nav li.ui-state-processing a {cursor: pointer;}
#ui-nav .ui-tabs-nav li.ui-tabs-selected a {cursor: text;}

#ui-nav .ui-helper-reset {
    font-size: 100%;
    line-height: inherit;
    list-style: none outside none;
    text-decoration: none;}
.ui-widget{ font-size: 1em;}
.ui-tabs {
    padding: 0;
    position: relative;
}
.ui-widget-content {
    background: none;
    border: none;
}
.ui-tabs .ui-tabs-panel {
    background: none;
    border:none;
    padding: 0;
}
.ui-tabs .ui-tabs-nav {
    padding: 0
}
.ui-widget-header {
    background: none;
    border: none;
    font-weight: normal;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: none;
    border: none;
    font-weight: normal;
}
/* NAVIGATION SUBSIDIAIRE */
.ui-tabs-panel.ui-widget-content{
    padding: 0; /* maud padding: 15px 0 */
}
.ui-sub-nav.ui-tabs.ui-widget.ui-widget-content{ z-index: 1000!important}
.ui-tabs .subNav, #ui-nav .subNav.ui-tabs-nav {border: none !important; margin-bottom: 15px; z-index: 1000 !important; float: none; width: auto; overflow: hidden}
.subNav li, 
.subNav.ui-tabs-nav li.ui-state-default{display:inline;}
.subNav a, 
.subNav.ui-tabs-nav li.ui-state-default a{color:#303030;}
.ui-tabs .subNav.ui-tabs-nav li a,
.ui-tabs .subNav li a{
    background: none;
    color: #4583A7;
    display: inline;
    font-size: 12px;
    font-weight: bold;
    padding: 0;
    margin: 0 12px 0 0;
    text-decoration: none;
}
.ui-tabs .subNav.ui-tabs-nav li a:hover, .ui-tabs .subNav li a:hover{ border: none; color:#666}
.ui-tabs .subNav.ui-tabs-nav .ui-tabs-selected.ui-state-active a{
    background: none;
    border: none;
    color: #303030;
    font-weight: bold;
    padding: 0;
}
.subNav a.current:hover,
.subNav.ui-tabs-nav .ui-tabs-selected.ui-state-active a:hover{text-decoration: none;cursor: default;}


/* NAVIGATION DE PAGE */

.pageNav ul li{display:inline-block; margin: 0 1px;}
.pageNav ul li .btn{ 
    font-family: arial; 
    font-size: 12px; 
    padding: 0 4px;
    margin: 0 1px;
    font-style: normal;
    color: #4583A7}
.pageNav .btn.current{color:#303030}

/*

<-------------- TIME TRAVEL -------------->

*/

/* TIME SECTION */

.timeSection{ background: #f1f1f1; border-bottom: 1px solid #C9CACC}
.timeSection h2{color:#666;}

/*

<-------------- POSTS -------------->



*/

/* FONTS */
article h1,article .h1,
article h1 a,article .h1 a{font-size: 14px; color:#303030;font-weight: bold}

article h2, article .h2,
article h2 a, article .h2 a{font-size: 14px; color:#000;}
article h2 a:hover, article .h2 a:hover{color:#000}

article h2.lobster{ font-size: 18px;}

article h3, article .h3,
article h3 a, article .h3 a{font-size: 12px; color:#4583a7;}

/* article p{color:#666}*/



.lovePost{padding:9px 0 11px;}
.comPost{padding:5px 0 12px;}

/* VIDEO */
.icoPlayS{
    background: url('../img/copSprite_ico_new.png') no-repeat -245px 0;
    width:43px;height:42px;
    position:absolute;top:50%;left:50%;
    margin-top:-21px;margin-left:-22px;}

a:hover .icoPlayS{background-position:-288px 0;}


/*

<-------------- ASIDE -------------->

*/

/* FONTS */

.asideTitle{
    background-color:#fff;border-bottom:solid 1px #c7c7c7;
    padding:6px 10px;
    position: relative}

aside p{color:#666}
aside .copBox3 p{color:#fff}


/* GAMES [slider] */

.games ul, .games li{display:block;position:relative;}
.games li{overflow;hidden;width:281px;}

#gameControls a{
    background: url('../img/copSprite_ico.png') no-repeat -5px -145px;
    display:inline-block;width:18px;height:18px;
    position:absolute;
    *overflow:visible;*zoom:1;*display:inline;*vertical-align: middle;}

#gameControls a.prev{top:9px;right:55px;}
#gameControls a.next{background-position:-25px -145px;top:9px;right:8px;}
#gameControls a.prev:hover{background-position:-50px -145px;}
#gameControls a.next:hover{background-position:-70px -145px;}


/* REVIVAL */

.versus{position:absolute;top:55px;left:108px;}
.revivalBtn{position:absolute;bottom:10px;left:10px;}
.revivalBtn .submitBtn{width:100px;}


/*

<-------------- MEMBER PROFILE -------------->

*/

/* PROFILE BOX

.profileBox{
    background-color:#f9f9f9;
    border:solid 1px #e0e0e0;
    position:relative;
    padding:10px;}

.profileBox p{font-style: italic;line-height:1.6;}

.profileTxtShow{display:none;}

.profileBoxArrow{
    background: url('../img/copSprite_ico.png') no-repeat -10px -170px;
    display:inline-block;width:6px;height:14px;
    position:absolute;top:30px;left:-6px;
    *overflow:visible;*zoom:1;*display:inline;*vertical-align: middle;}

.profileBoxLink{
    background-color:#f9f9f9;
    padding:5px;
    position:absolute;right:0;bottom:0;}

 */
/* PHOTOS SLIDER

.classPictures ul, .classPictures li{display:block;position:relative;}
.classPictures li{margin-right:7px;overflow:hidden;}
#picturesControls{}
#picturesControls a{background: url('../img/copSprite_ico_new.png') no-repeat -410px 0;
display:inline-block;width:16px;height:54px;
cursor:pointer;
position:absolute;top:25px;
*overflow:visible;*zoom:1;*display:inline;*vertical-align: middle;}
#picturesControls .prev{left:-4px}
#picturesControls .next{background-position:-426px 0;;right:-4px;}
#picturesControls .prev:hover{background-position:-442px 0;}
#picturesControls .next:hover{background-position:-458px 0;}
 */
/* TABLES */
.table th{
    font-size:12px;font-weight:bold;
    text-transform: uppercase;
    background-color: #f0f0f0;
    border-bottom:1px solid #c7c7c7;
}

.table th, table td{color:#666; padding: 10px;}
.table tr td{ vertical-align: top}
.table tr.even td{ background:#f3f3f3 }
.table tr.picCtT td{ padding-bottom: 0 }
.table tr.picCtB td{ padding-top: 0 }

.table span{text-transform: none;}



/* ARROWS

.blueArrowS{
    background: url('../img/copSprite_ico_new.png') no-repeat -5px -30px;
    display:inline-block;width:8px;height:4px;
    margin-bottom:2px;margin-left:2px;
    *overflow:visible;*zoom:1;*display:inline;*vertical-align: middle;}

.greyArrowS{
    background: url('../img/copSprite_ico_new.png') no-repeat -5px -40px;
    display:inline-block;width:8px;height:5px;
    padding-bottom:2px;
    *overflow:visible;*zoom:1;*display:inline;*vertical-align: middle;}
 */

/* MODALS */

.ui-widget-content{color:#303030;}
.ui-dialog{
    border:solid 1px #686868;
    padding:0; 
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-radius: 0px\9; 
    filter:none;
    background: rgb(253,253,253);
    background: -moz-linear-gradient(top, rgba(253,253,253,1) 0%, rgba(239,239,239,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,253,253,1)), color-stop(100%,rgba(239,239,239,1)));
    background: -webkit-linear-gradient(top, rgba(253,253,253,1) 0%,rgba(239,239,239,1) 100%);
    background: -o-linear-gradient(top, rgba(253,253,253,1) 0%,rgba(239,239,239,1) 100%);
    background: -ms-linear-gradient(top, rgba(253,253,253,1) 0%,rgba(239,239,239,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#efefef',GradientType=0 );
    background: linear-gradient(top, rgba(253,253,253,1) 0%,rgba(239,239,239,1) 100%);
}
.ui-widget-overlay{background:#000;opacity:.5;/* for IE */filter:alpha(opacity=50);}
.ui-dialog .ui-dialog-titlebar{background:none;border:none;}
.ui-dialog .ui-dialog-title{color:#4583a7;font-size:18px;font-weight:normal;margin:0}
.ui-dialog .ui-dialog-content{padding:0;}
.ui-widget-header .ui-state-hover,
.ui-widget-header .ui-state-focus{background-color:none;border:none;}
.ui-dialog .ui-dialog-titlebar-close {
    height:18px;width:18px;
    padding:0;margin:0;
    top:35%;right:10px;}
.ui-dialog .ui-dialog-titlebar-close span.ui-icon-closethick{
    background:transparent url('../img/copSprite_ico_new.png') no-repeat -186px -45px;
    height:18px;width:18px;
    margin:0;}
.ui-dialog .ui-state-hover span.ui-icon,
.ui-dialog .ui-state-focus span.ui-icon{background-image:transparent url('../img/copSprite_ico_new.png');}
.ui-dialog span.ui-icon-closethick:focus{background-position: -222px -45px;}
.ui-dialog .ui-dialog-titlebar-close.ui-state-hover span.ui-icon-closethick{background-position: -204px -45px;}


/* SMALL MODAL */
.ui-dialog.modalS .ui-dialog-titlebar{
    background: rgb(225,225,225);
    background: -moz-linear-gradient(top, rgba(225,225,225,1) 0%, rgba(255,255,255,1) 4%, rgba(253,253,253,1) 60%, rgba(237,237,237,1) 98%, rgba(222,222,222,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(225,225,225,1)), color-stop(4%,rgba(255,255,255,1)), color-stop(60%,rgba(253,253,253,1)), color-stop(98%,rgba(237,237,237,1)), color-stop(100%,rgba(222,222,222,1)));
    background: -webkit-linear-gradient(top, rgba(225,225,225,1) 0%,rgba(255,255,255,1) 4%,rgba(253,253,253,1) 60%,rgba(237,237,237,1) 98%,rgba(222,222,222,1) 100%);
    background: -o-linear-gradient(top, rgba(225,225,225,1) 0%,rgba(255,255,255,1) 4%,rgba(253,253,253,1) 60%,rgba(237,237,237,1) 98%,rgba(222,222,222,1) 100%);
    background: -ms-linear-gradient(top, rgba(225,225,225,1) 0%,rgba(255,255,255,1) 4%,rgba(253,253,253,1) 60%,rgba(237,237,237,1) 98%,rgba(222,222,222,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e1e1', endColorstr='#dedede',GradientType=0 );
    background: linear-gradient(top, rgba(225,225,225,1) 0%,rgba(255,255,255,1) 4%,rgba(253,253,253,1) 60%,rgba(237,237,237,1) 98%,rgba(222,222,222,1) 100%);
    padding:15px 20px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
}
.ui-dialog.modalS .modalS_content{
    padding:20px;
}

/*boutons*/
.ui-dialog .ui-dialog-buttonpane{ margin: 0;padding: 15px 20px; border-radius:10px}
.ui-dialog .ui-dialog-buttonpane button{    
    margin: 0 0 0 10px;
    display: inline-block;
    vertical-align: middle;
    *overflow:hidden;*zoom:1;*display:inline;
    border:solid 1px #5083a0;
    border-top-color: #63a1c5;
    border-bottom-color:#2b4757; 
    -webkit-box-shadow: 0px 1px 0px 0px #b5b5b5;
    -moz-box-shadow: 0px 1px 0px 0px #b5b5b5;
    box-shadow: 0px 1px 0px 0px #b5b5b5;
    font-size:12px;
    text-decoration:none;
    height: 25px; 
    line-height: 25px;
    padding:0 8px;
    text-decoration: none !important;
    color:#f6f6f6;
    background: #86c4e8;
    background: -moz-linear-gradient(top, #86c4e8 0%, #63a1c5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#86c4e8), color-stop(100%,#63a1c5));
    background: -webkit-linear-gradient(top, #86c4e8 0%,#63a1c5 100%);
    background: -o-linear-gradient(top, #86c4e8 0%,#63a1c5 100%);
    background: -ms-linear-gradient(top, #86c4e8 0%,#63a1c5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86c4e8', endColorstr='#63a1c5',GradientType=0 );
    background: linear-gradient(top, #86c4e8 0%,#63a1c5 100%);
}
    .ui-dialog .ui-dialog-buttonpane button:hover{
        background: #93d6fe;
        background: -moz-linear-gradient(top, #93d6fe 0%, #6db1d9 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#93d6fe), color-stop(100%,#6db1d9));
        background: -webkit-linear-gradient(top, #93d6fe 0%,#6db1d9 100%);
        background: -o-linear-gradient(top, #93d6fe 0%,#6db1d9 100%);
        background: -ms-linear-gradient(top, #93d6fe 0%,#6db1d9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93d6fe', endColorstr='#6db1d9',GradientType=0 );
        background: linear-gradient(top, #93d6fe 0%,#6db1d9 100%);
        color:#f6f6f6;text-decoration:none;
    }
    .ui-dialog .ui-dialog-buttonpane button:focus {
        background: #64a2c6;
        background: -moz-linear-gradient(top, #64a2c6 0%, #84c2e6 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#64a2c6), color-stop(100%,#84c2e6));
        background: -webkit-linear-gradient(top, #64a2c6 0%,#84c2e6 100%);
        background: -o-linear-gradient(top, #64a2c6 0%,#84c2e6 100%);
        background: -ms-linear-gradient(top, #64a2c6 0%,#84c2e6 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64a2c6', endColorstr='#84c2e6',GradientType=0 );
        background: linear-gradient(top, #64a2c6 0%,#84c2e6 100%);
        color:#f6f6f6;text-decoration:none;
    }

/* PHOTO MODAL */
.ui-dialog.modalL{
    background: url('../img/cop_zoom_bg.jpg') repeat;
    border:none;
    padding:0;
    }

/* image dans en savoir plus */
.about img {float:right; margin-left:8px;margin-bottom: 8px;padding:2px; border:1px solid #ccc}
.about img.svg {width:200px;}


/*
- MOBILE LAYOUT ----------------------------------------------------------------
Media queries for responsive design
http://www.alistapart.com/articles/responsive-web-design
Inspired by http://html5boilerplate.com/
*/

@media all and (orientation:portrait) {
  /* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
    
  /* Prevent iOS, WinMobile from adjusting font size */
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
}

/*
- PRINT STYLES -----------------------------------------------------------------
* inlined to avoid required HTTP connection - http://www.phpied.com/delay-loading-your-print-css/
  alsacreation - http://www.alsacreations.com/astuce/lire/1160-une-feuille-de-styles-de-base-pour-le-medium-print.html
*/

@media print {
  * { background-color: #fff !important; color: #000 !important; text-shadow: none; }
  body { width: auto!important; margin: auto!important; font-family: serif; }
  a, a:visited { color: #000 !important; text-decoration: underline !important; }
  a:after { content: " (" attr(href) ")"; } /* affichage des URL des liens */
  abbr:after { content: " (" attr(title) ")"; } /* affichage des Abbreviations des liens */
  .ir a:after { content: ""; }  /* Don't show links for images */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3, blockquote { orphans: 3; widows: 3; }
  blockquote, ul, ol, img, h2, h3{ page-break-after: avoid; } /* pas de coupure dans ces élements */
  h1, h2, h3, caption { page-break-after: avoid; } /* pas de saut après ces éléments */
}
/*------------------------------------------------------------------------------

[MEDIA:SCREEN/PRINT] - CCM/Benchmark Framework

Document : Layout CSS
Author   : Damien SYREN

- Macro typographie -
http://www.slideshare.net/Mitternacht/la-macrotypographie-de-la-page-web-5499736

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

body{ font: 12px/1.4 Arial,Helvetica,default; color: #303030}
/* font style */

/* couleur de font du theme */
.copTheme1{ color:#4583a7}
/* couleur complementaire du theme (gris clair) */
.copTheme2{ color:#778793 }
/* couleur de font neutre (gris bleu) */
.copNeutre{ color: #666}
/* couleur de font du texte */
.copFont{ color: #303030}
/* couleur de font blanche */
.copWhite{ color: #fff}
/* couleur de font rouge */
.copRed{color:#dd1f20;}
/* couleur de font de facebook */
.copFb{ color: #3B5998}


.lobster{font-family: 'Lobster', Arial, sans-serif;}

.txtShadowWhite{text-shadow: 0 1px 1px #fff;}

.clearL{ clear: left;}

/* links */
a{ color:#4583a7; text-decoration:none }
a:hover, a:focus, a.wrapper .a:hover{ text-decoration:underline; cursor:pointer; }

/* default heading */
/* www.aestheticallyloyal.com/public/optimize-legibility/ */
/*h2, h3, h4, h5, h6{ font-family:tahoma,Helvetica,Arial,default; font-weight:bold; text-rendering:optimizeLegibility; }*/

/* surlignage */
::selection         { background:#4583a7; color:#fff; /* Safari and Opera */ }
::-moz-selection    { background:#4583a7; color:#fff; /* Firefox */ }

/* elements */
em, .em { /*font-style:italic;*/ color:#777 }
strong,.strong  { font-weight:bold }
.normal{ font-weight: normal;}
code,pre        { color:#0B8C8F }
sup             { color:#999; font-weight:normal; font-size:70% }
cite            { display:block; text-align:right; padding-top: 10px }
mark            { color:#000; background:none; font-weight:bold }
del             { text-decoration: line-through }
abbr[title],
dfn[title]      { border-bottom:1px dotted #000; cursor:help }
blockquote      { color:#a21460; margin:0 30px; text-indent:-21px; *text-indent:0 }
blockquote:before{ content:"\201C"; font-size:30px; font-weight:bold; line-height:0 }  /* http://www.ascii.cl/htmlcodes.htm */
blockquote:after{  content:"\201E"; font-size:30px; font-weight:bold; line-height:0 }  /* http://www.ascii.cl/htmlcodes.htm */
a img{ display: block}
.neg1L{ position: relative; left: -1px;}

/*
- HEADINGS SKIN ------------------------------------------------------------------
*/


/* .h1-.h6 doivent etre utiliser de maniere semantiques */

h1, .h1{ font-size: 22px; line-height: normal}
h2, .h2{ font-size: 20px; line-height: normal}
h3, .h3{ font-size: 18px; line-height: normal}
h4, .h4{ font-size: 16px; line-height: normal}
h5, .h5{ font-size: 14px; line-height: normal} /* Maud  font-family: 'Lobster', Arial, sans-serif;*/
h6, .h6{ font-size: 12px; line-height: normal}

/* par defaut les liens a l'interieur des titres sont de la coulaur par defaut du texte */
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a{color: #303030}
h1.copTheme1 a, .h1.copTheme1 a, 
h2.copTheme1 a, .h2.copTheme1 a, 
h3.copTheme1 a, .h3.copTheme1 a, 
h4.copTheme1 a, .h4.copTheme1 a, 
h5.copTheme1 a, .h5.copTheme1 a, 
h6.copTheme1 a, .h6.copTheme1 a{color:#4583a7}
h1.copTheme2 a, .h1.copTheme2 a, 
h2.copTheme2 a, .h2.copTheme2 a, 
h3.copTheme2 a, .h3.copTheme2 a, 
h4.copTheme2 a, .h4.copTheme2 a, 
h5.copTheme2 a, .h5.copTheme2 a, 
h6.copTheme2 a, .h6.copTheme2 a{color:#778793}
h1.copNeutre a, .h1.copNeutre a, 
h2.copNeutre a, .h2.copNeutre a, 
h3.copNeutre a, .h3.copNeutre a, 
h4.copNeutre a, .h4.copNeutre a, 
h5.copNeutre a, .h5.copNeutre a, 
h6.copNeutre a, .h6.copNeutre a{color: #666}

h1.lobster, .h1.lobster{ font-size: 24px}

.ft120{ font-size: 120%}
.clearR{ clear: right}


.charBefore:after{
    clear: both;
    content: " x ";
    font-size: xx-large;
    height: 0 !important;
    line-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    visibility: hidden;
    z-index: 2000;
}

/*
- EDITO -------------------------------------------------------------------
*/
.edito h1, .edito h2,.edito .h1, .edito .h2 {margin:0 0 15px 0; font-family: georgia;}
.edito h2,.edito .h2 { text-transform:none; color:#A21460}
.edito .diapo h2,.edito .diapo .h2 { margin: 0}
.edito p{ margin-bottom: 15px}
.edito .illustration{ display: table; width: 100px}
.edito blockquote{
    color: #A21460;
    margin: 0 30px 15px 30px;
    position: relative;
    text-indent: -21px;
}
.edito ul li,
.edito .simpleList li {
    color: #333;
    margin-bottom: 15px;
    list-style-position: inside;
}

/*
- Utilitaires -------------------------------------------------------------------
*/
.inline{ display: inline}
.baseline{ display: inline-block; *display:inline; vertical-align: baseline}
.txtC img{ margin:auto }

/*
- FOOTER -------------------------------------------------------------------
*/
.foot, .foot a, .foot a:hover{ color: #fff}
.foot .glossary a{ color:#000;}
.foot .glossary a:hover{ margin-bottom: 2px; padding: 4px 1px;}
/*
- LISTS SKIN -------------------------------------------------------------------
*/

/* Nommer les listes avec un trigrammes cop ex : copList1 */

.copListDisc{list-style: disc;}

.inlineDl dd, .inlineDl .dd{ clear: both; float: left; color: #666; text-align: right; margin-right: 15px; width: 110px}
.inlineDl dt, .inlineDl .dt{ float: none; overflow: hidden; margin-bottom: 15px;}

.glossaryTitle{ font-size: 15px; line-height: 22px; text-transform: uppercase; font-weight: bold;}
    .glossaryTitle li{ width: 20px; float: left}
    .glossaryTitle .glossaryLetters li.nbrs{ width: 32px;}
    .glossaryTitle a:hover{ color: #000; font-size: 18px; text-decoration: none; line-height: 18px;}
    
    .glossaryTitle .glossaryDbleLetters li { font-size: 12px; width: 22px; font-weight: normal; line-height: 16px;}
    .glossaryTitle .glossaryDbleLetters li a:hover{ color: #000; font-size: 13px; text-decoration: none; line-height: 12px;}
    
.glossaryList li{ margin: 10px 0}


/*
- TABLES SKIN ------------------------------------------------------------------
*/


/*
- IMAGES ------------------------------------------------------------------

*/

.imgS1, .imgS2, .imgS3, .imgS4, .imgS5{
    background: none repeat scroll 0 0 #fff;
    border:solid 1px #ccc;
    /*display: inline-block; */
    padding: 1px;
    overflow: hidden
}
a .imgS1:hover, a .imgS2:hover, a .imgS3:hover, a .imgS4:hover, a .imgS5:hover{ border-color:#4583A7}
.manageImg a.imgS1:hover, .manageImg a.imgS2:hover, .manageImg a.imgS3:hover, .manageImg a.imgS4:hover,
.manageImg a .imgS1:hover, .manageImg a .imgS2:hover, .manageImg a .imgS3:hover, .manageImg a .imgS4:hover{ border: 1px solid #4481a5}
.manageImg:hover .imgS1, .manageImg:hover .imgS2, .manageImg:hover .imgS3, .manageImg:hover .imgS4{ border: 1px solid #4481a5}

 .imgS2{padding: 2px}
 .imgS3{padding: 3px}
 .imgS4{padding: 4px}
 .imgS5{padding: 5px}
 
 .imgS0{ border: 1px solid #737373}
 .memberInfos .imgS0{ border-color:#4c514e; padding: 0;}

 /* pour la liste des albums */
 .imgBoxM { 
     display: block;
     width: 207px
 }
 .imgBoxM .imgWrapper{background: url("../img/cop_bg_diap_180x135.png") no-repeat 0 0; width: 191px; padding: 14px 0 0 16px}
 .imgBoxM .imgWrapper .img{ background:no-repeat #fff 50% 50%; width: 180px; height: 120px; background-size:cover}
 .imgBoxM .legend{ padding-left: 18px; text-align: left}
 
 
/* tailles des images standards */
.imgW26, .imgW50, .imgW100, .imgW120, .imgW140, .imgW180, .imgW450{ text-align: center; line-height: 0}
.imgW26 img, .imgW50 img, .imgW100 img, .imgW120 img, .imgW140 img, .imgW180 img, .imgW450 img{ display: block; margin: auto}
.imgW26{ width: 26px;}
.imgW35{ width: 35px;}
.imgW50{ width: 50px;}
.imgW100{ width: 100px;}
.imgW120{ width: 120px;}
.imgW140{ width: 140px;}
.imgW180{ width: 180px;}
.imgW450{ width: 450px;}

.sizeSquare, .size4-3 {background:no-repeat #efefef 50% 50%; background-size:contain; overflow: hidden}
.sizeSquare.imgW50, .sizeSquare.imgW26, .sizeSquare.imgW35{background-size:cover;} /* pour les avatars de 50px*/
.sizeSquare img, .size4-3 img{left:50%; top: 50%; position: relative}

.imgW26.sizeSquare{ height: 26px;}
.imgW35.sizeSquare{ height: 35px;}
.imgW50.sizeSquare{ height: 50px;}
.imgW100.sizeSquare{ height: 100px;}
.imgW120.sizeSquare{ height: 120px;}
.imgW140.sizeSquare{ height: 140px;}
.imgW180.sizeSquare{ height: 180px;}
.imgW450.sizeSquare{ height: 450px;}

.imgW26.size4-3{ height: 20px;}
.imgW50.size4-3{ height: 38px;}
.imgW100.size4-3{ height: 75px;}
.imgW120.size4-3{ height: 90px;}
.imgW140.size4-3{ height: 105px;}
.imgW180.size4-3{ height: 135px;}
.imgW450.size4-3{ height: 338px;}

.imgW35Cter.imgS0Cter{ width: 37px;}
.imgW100Cter.imgS2Cter{ width: 106px;}
.imgW120Cter.imgS2Cter{ width: 126px;}
.imgW120Cter.imgS4Cter{ width: 130px;}
.imgW140Cter.imgS2Cter{ width: 146px;}
.imgW140Cter.imgS4Cter{ width: 150px;}
.imgW180Cter.imgS4Cter{ width: 190px;}
.imgW50Cter.imgS2Cter{ width: 56px;}
.imgW26Cter.imgS0Cter{ width: 28px;}

/* pour affichge des photos dans un album */
.imgW140Cter .size4-3 .img{background:no-repeat #fff 50% 50%; width: 140px; height: 93px; background-size:cover }

.imgWall img{ max-width: 150px}

/* pour souvenirs */
.imgTitleH{ display: block; line-height: normal; overflow:hidden;}

.inlb img{*display:inline;}

/*
- SEPARATEURS ------------------------------------------------------------------
*/

.contenteditable strong,.contenteditable b{ font-weight:bold }
.contenteditable em,.contenteditable i{ font-style:italic }
.contenteditable u{ text-decoration:underline }
.contenteditable ul li{ list-style-type:disc; margin-left:15px }
.contenteditable ol li{ list-style-type:decimal; margin-left:20px; *margin-left:25px }

/* correction for the contentEditable firefox bug cf #*/
.contenteditable a:link:-moz-read-write{text-decoration: none !important;color: #3e93cd !important;}
.contenteditable a:focus:link:-moz-read-write,a:hover:link:-moz-read-write{text-decoration:underline !important;cursor:pointer !important}
/* because ie use <p> on enter : 
.contenteditable p {margin-bottom:0px;}*/

.dragDrop {
    background: url("../img/bg_dotted.gif") repeat scroll 0 0 transparent;
    color: #ADADAD;
    min-height: 69px;
}
.icoDragDrop {
    background: url("../img/sprite_ico.png") no-repeat scroll -6px -203px transparent;
    display: inline-block;
    height: 36px;
    vertical-align: middle;
    width: 40px;
}
.icoZoom {
    background: url("../img/sprite_ico.png") no-repeat scroll -105px -253px transparent;
    height: 20px;
    width: 26px;
}

/* Nommer les listes avec un trigramme cop ex : copSepar1 */

.separ1{background:url('../img/cop_separ1.png') no-repeat 0 0;}
.separ1S{background:url('../img/cop_separ1S.gif') no-repeat 0 0;}
.separ1M{background:url('../img/cop_separ1M.gif') no-repeat right 0;}

.separ2{background:url('../img/cop_separ2.png') repeat-x center bottom;}

.separ3{background:url('../img/cop_separ3.png') no-repeat 0 0;}

.separ3b{background:url('../img/cop_separ3.png') no-repeat center bottom;margin-bottom:-21px}

.separ4{border-right:double 1px #d2d4d5;margin-right: 10px}

.separVertical{border-left:dotted 1px #b9d7e5;}

.copSepLigneB{ border-bottom: 1px solid #e5e5e5;}
.copSepLigneT{ border-top: 1px solid #e5e5e5;}
.copSepLigneR{ border-right: 1px solid blue;}
.copSepLigneL{ border-left: 1px solid #000;} 
.copSep2cols{background:url('../img/cop_separ2cols.png') repeat-y 0 0;}
.copSep3cols{background:url('../img/cop_separ3cols.png') repeat-y 0 0;}
.copSepar1{
    border-bottom: 1px solid #e5e5e5;
    -webkit-box-shadow: 0px 7px 5px -3px rgba(239, 239, 239, 1);
    -moz-box-shadow: 0px 7px 5px -3px rgba(239, 239, 239, 1);
    box-shadow: 0px 7px 5px -3px rgba(239, 239, 239, 1);
}
.copSepar3{
    border-bottom: 1px solid #d8d8d8;
    -webkit-box-shadow: 0px 7px 5px -3px rgba(229, 229, 229, 1);
    -moz-box-shadow: 0px 7px 5px -3px rgba(229, 229, 229, 1);
    box-shadow: 0px 7px 5px -3px rgba(229, 229, 229, 1);
}
/* sur les murs */
article.copSepar1{ padding: 25px 0 20px 0;}
.copSepar2{
    border-bottom: 1px solid #e5e5e5; padding-bottom: 15px;
    -webkit-box-shadow: 0px 7px 5px -3px rgba(239, 239, 239, 1);
    -moz-box-shadow: 0px 7px 5px -3px rgba(239, 239, 239, 1);
    box-shadow: 0px 7px 5px -3px rgba(239, 239, 239, 1);}

.banfeed{
    background-image: url("../img/bg_tpClose.png");
    background-repeat: repeat;
}

/*
- EDITO ------------------------------------------------------------------
*/

.copEdito h2{ margin-bottom: 10px; color: #4583A7;}
.copEdito p{ margin-bottom: 15px;}
.copEdito img{ 
    display: block; 
    float: left; 
    margin: 0 20px 20px 0;
    padding: 2px;
    background: #fff;
    border: 1px solid #ccc;
    max-width: 755px;
}
.copEdito em{ font-style: italic; color: #303030 }

.copEdito .playerCt object, .copEdito .playerCt embed, .copEdito .playerCt iframe{ margin: auto;}

/*
- tags clearfix ------------------------------------------------------------------
*/
.tags.clearfix img{ margin: auto; max-width: 755px}

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

[MEDIA:SCREEN] - CCM/Benchmark Framework

Document : Layout CSS
Author   : Damien SYREN

Cette page recense tous les modules (objets) r�utilisables dans le site.

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

/* Quelques regles
- Ne plus utiliser le nommage .box pour les styles de boites car ca rentre
en conflit avec des class du common. Prefere : .copBox1
- Ne plus utiliser le .mod qui fait des conflits dans le common
- Faire un sprite pour toutes les icones : copSprite_ico.png

*/

/* MODULES GENERIQUES */

/* Feedback */
#feedback {
    position: fixed;
    right: 60px;
    top: 160px;
    z-index: 150;
}
#feedback a {
    display: block;
    background: url('../img/cop_sprite_feedback.png?2') no-repeat 0 0;
    height: 80px;
    width: 80px;
    opacity:0.7;
}
#feedback a:hover {
    background-position: 0 -82px;
    opacity:0.4;
}


/* Screencast */
#screencast {
    position: fixed;
    right: 60px;
    top: 260px;
    z-index: 150;
}
#screencast a {
    display: block;
    background: url('../img/cop_sprite_screencast.png?1') no-repeat 0 0;
    height: 80px;
    width: 80px;
    opacity:0.7;
}
#screencast a:hover {
    background-position: 0 -82px;
    opacity:0.4;
}

/* BOXES */ 
.copBox1{
    background:url('../img/cop_separ1.png') no-repeat 0 0;
}
.copBox2{ background: #f0f0f0; border-bottom: 1px solid #d5d5d5}
.copBox3{ background-color: rgba(0, 0, 0, 0.8);background-color: #303030 \9; color: #fff;}
.copBox4{ background-color: #ebebeb}
.copBox5{ background-color: #fff}
.copBox6{ border: 1px solid #d5d5d5; }
.copBox790{ background: url("../img/cop_separ_790.png") no-repeat center top;}

.copBoxShadow{
    -webkit-box-shadow: 0px 7px 7px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 7px 7px 2px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 7px 7px 2px rgba(0, 0, 0, 0.4);}
.copBox7{
    background-color: rgba(255, 255, 255, 0.7);
}

.copBgWhite{ background: #fff}


.box1{
    border: 1px solid #d5d5d5;
    -webkit-box-shadow: 0px 7px 7px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 7px 7px 2px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 7px 7px 2px rgba(0, 0, 0, 0.4);}
/* PUBLICITE */

.rightCol .ba{ margin-bottom: 15px;}

.rightCol .ba img{ padding:0 !important; border:none !important; }


/*

<-------------- ICONES -------------->

*/    
.ico{
    display: inline-block;
    vertical-align: middle;
    outline: none;
    background: url("../img/copSprite_ico_new.png?201203021050") no-repeat 0 0;
    *overflow:visible;*zoom:1;*display:inline;
}

.icoMore, .icoLess{
    width: 8px; height: 8px;
    background-position: -45px -5px;
}
.icoLess{
    background-position: -65px -5px;
}
.icoMoreB{
    width: 10px; height: 10px;
    background-position: -44px -16px;
    vertical-align: baseline;
}
.icoMoreArrow{
    width: 8px; height: 7px;
    background-position: -5px -28px;
    vertical-align: baseline;
}
.icoMoreArrowW{
    width: 8px; height: 8px;
    background-position: -58px -29px;
    vertical-align: baseline;
}

.icoPlay{ width: 43px; height: 43px; background-position: -428px -122px; position: absolute; top: 50%; left:50%; margin-top: -21px; margin-left: -21px;}
a:hover .icoPlay{ background-position: -428px -166px;}

.icoUp, .icoDown{ 
    background-image: url(../img/copSprite_ico_new.png?201201261619);
    width:26px; height: 146px;
    top: 0; width:26px; height: 146px; background-position:-85px -338px;
    display: block;
    position: absolute;
    left:0;
}
.icoDown{background-position:-112px -338px; left:180px;}


.icoBalloon{ width: 22px; height: 19px; background-position: -215px -5px;}
.icoBalloonB{ width: 53px; height: 60px; background-position: -417px -59px; 
    font-family: 'Lobster',Arial,sans-serif;
    text-shadow: 0 1px 1px #fff;
    text-align: center;
    font-size: 24px;
    line-height: 46px
}
.icoLiked{ width: 16px; height: 15px; background-position: -194px -5px;}

.icoHem{ width: 4px; height: 4px; background-position: -405px -69px;}

/* ICONS */
.icoRel{width:21px;height:19px;
        background-position: -170px -5px;
        position: absolute; top:10px; left: -31px;
}
.icoClock{ background-position: -195px -26px; width: 14px; height: 14px}

.icoWhatsup{ width: 22px; height: 21px; background-position: -239px -138px; position: absolute; top: 5px; left:5px}
.icoAddLink{ width: 25px; height: 18px; background-position: -262px -138px}
.icoRecognize{ width: 33px; height: 17px; background-position: -288px -138px}
.icoPictures{ width: 18px; height: 17px; background-position: -323px -181px; vertical-align: baseline}

.icoBlueArrowL, .icoBlueArrowR{width:5px; height:8px; background-position: -20px -30px}
.icoBlueArrowR{ background-position: -30px -30px}

.icoBulletArrowL, .icoBulletArrowR{width:18px; height:18px; background-position: -335px -20px}
.icoBulletArrowR{ background-position: -355px -20px}
.icoBulletArrowL.disabled{ background-position: -335px 0}
.icoBulletArrowR.disabled{ background-position: -355px 0}

.icoSearchG, .icoSearchB{background-position: -25px  -5px; width: 16px; height: 16px;}
.icoSearchB{background-position: -5px -5px}

.icoClose{ width: 18px; height: 18px; background-position: -219px -91px;}
.icoClose span{ display: none}
.icoClose:hover{background-position: -239px -91px;}

.icoEdit{ width: 18px; height: 18px; background-position: -219px -111px;}
.icoEdit span { display: none}
.icoEdit:hover {background-position: -239px -111px;}

.icoDelete{ width: 18px; height: 18px; background-position: -186px -45px;}
.icoDelete:hover{ background-position: -204px -45px;}
.icoDelete:active{ background-position: -222px -45px;}

.icoTarget{width: 18px; height: 18px; background-position: -323px -161px;}
.icoClose span{ display: none}
.icoTarget:hover{ background-position: -343px -161px;}

.icoMsg{ width: 20px; height: 12px; background-position: -380px -24px; }
.btn .icoMsg{ position: relative; top: -1px;}
.btn .icoMsgAlone{*top:3px;}

/*carte de voeux*/
.icoWishcard{ width: 33px; height: 21px; background-position: -269px -107px; }
.btn .icoWishcard{ position: relative; top: -1px;}

.manageImg{ position: relative; display: inline-block; }
.manageImg .icoDeleteImg, .manageImg .icoValidImg{ display: none; position: absolute; top:10px; left:10px; z-index: 1000}
.manageImg .icoValidImg{top:30px;}
.manageImg.picItem {margin:0 14px 14px 0;}
.manageImg.albItem .icoDeleteImg{ top:29px; left:30px;} 
.manageImg.albItem .icoValidImg{ top:49px; left:30px} 
.manageImg:hover .icoDeleteImg, .manageImg:hover .icoValidImg{ display: block;}
.icoDeleteImg, .icoValidImg{ width: 18px; height: 18px; background-position: -334px -75px}
.icoDeleteImg:hover { background-position: -354px -75px}
.icoDeleteImg:active { background-position: -374px -75px}
.icoValidImg{ background-position: -334px -139px}
.icoValidImg:hover { background-position: -354px -139px}
.icoValidImg:active { background-position: -374px -139px}

/* options */
.icoOptions{
    width:20px;
    height:21px;    
    background-position: -334px -52px;
}
    .icoOptions span{ display:none; }
a.icoOptions:hover{     background-position:-354px -52px }
a.icoOptions:active,
.icoOptionsSel{         background-position:-374px -52px }
    
/* partager */
.icoTwt, .icoFb, .icoRss, .icoDel{
    width: 53px; height: 53px;
    background-position: 0 -91px;
}
.icoFb{background-position: -54px -91px}
.icoRss{background-position: -108px -91px}
.icoDel{background-position: -162px -91px}

.icoTwt:hover{ background-position: 0 -145px}
.icoFb:hover{background-position: -54px -145px}
.icoRss:hover{background-position: -108px -145px}
.icoDel:hover{background-position: -162px -145px}

/* webmails */

.icoGmail{background-position: 0 -45px; width:35px; height:32px}
.icoHotmail{background-position: -40px -45px; width:32px; height:32px;}
.icoYahoomail{background-position: -80px -45px; width:30px; height:32px}
.icoGenericmail{background-position: -116px -45px; width:30px; height:32px}

.icoCopains{
    width: 16px; height: 16px;
    background-position: -396px -76px;
    vertical-align: top
}

.firstChoice{ width: 98px; height: 87px; background-position: -378px -346px; position: absolute; top: -3px; right: -2px }

/*

<-------------- BUTTONS -------------->

*/

/* DEFINITION DES BOUTONS */
.btnWrap{
    display: inline-block;
    vertical-align: middle;
    *overflow:hidden;*zoom:1;*display:inline;}

.btn{
    font-size:12px;
    text-decoration:none;
    display:inline-block;
    height: 20px; 
    line-height: 20px;
    padding:0 8px;
    text-decoration: none !important;
    vertical-align: middle;
    *overflow:visible;*zoom:1;*display:inline;*margin-right:-3px;}
.btn:hover{text-decoration: none !important;}
.btn.lowerCase{ text-transform: none; font-size: 11px}
.btnM.lowerCase{ font-size: 15px;}

.buttonPlus {
    margin-left: -4px;
    position: relative;
}
.buttonPlus .tickB-2 {
    position: relative;
    top: 7px;
    background: url("../img/copSprite_ico_new.png") no-repeat -5px -36px;
    display: inline-block;
    height: 8px;
    vertical-align: top;
    width: 9px;
}
/* pour affichage d'ombre d'un bouton dans un lastBlock */
.lastBlock .btnWrap, .lastBlock .btnFull{ margin-bottom: 1px;}


/* Si btn submit et pas btnM on ajoute 1px de hauteur  */
.btn[type=submit], button.btn{ height: 22px; line-height: 22px;}
.btnM, button.btnM, .btnM[type=submit]{
    height: 30px; line-height: 30px; padding: 0 10px; font-size: 16px
}
button.btn{ line-height: 20px;}

/* bouton de largeur 100% */
.btnFull, .btnFull .btn {
    display: block;
    text-align: center;
}

/* bleu */
.blueBtn{ 
    border:solid 1px #5083a0;
    border-top-color: #63a1c5;
    border-bottom-color:#2b4757; 
    -webkit-box-shadow: 0px 1px 0px 0px #b5b5b5;
    -moz-box-shadow: 0px 1px 0px 0px #b5b5b5;
    box-shadow: 0px 1px 0px 0px #b5b5b5;} 
.copBox3 .blueBtn, .head .blueBtn { -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;}

.blueBtn .btn,.pictureTag{
    background: #86c4e8;
    background: -moz-linear-gradient(top, #86c4e8 0%, #63a1c5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#86c4e8), color-stop(100%,#63a1c5));
    background: -webkit-linear-gradient(top, #86c4e8 0%,#63a1c5 100%);
    background: -o-linear-gradient(top, #86c4e8 0%,#63a1c5 100%);
    background: -ms-linear-gradient(top, #86c4e8 0%,#63a1c5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86c4e8', endColorstr='#63a1c5',GradientType=0 );
    background: linear-gradient(top, #86c4e8 0%,#63a1c5 100%);
    border:solid 1px #b3d8ee;
    border-top-color: #d3e9f7;
    color:#f6f6f6;
    *border:0 none;}

.blueBtn .btn:hover{ 
    background: #93d6fe;
    background: -moz-linear-gradient(top, #93d6fe 0%, #6db1d9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#93d6fe), color-stop(100%,#6db1d9));
    background: -webkit-linear-gradient(top, #93d6fe 0%,#6db1d9 100%);
    background: -o-linear-gradient(top, #93d6fe 0%,#6db1d9 100%);
    background: -ms-linear-gradient(top, #93d6fe 0%,#6db1d9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93d6fe', endColorstr='#6db1d9',GradientType=0 );
    background: linear-gradient(top, #93d6fe 0%,#6db1d9 100%);
    color:#f6f6f6;text-decoration:none;}

.blueBtn .btn:focus{
    background: #64a2c6;
    background: -moz-linear-gradient(top, #64a2c6 0%, #84c2e6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#64a2c6), color-stop(100%,#84c2e6));
    background: -webkit-linear-gradient(top, #64a2c6 0%,#84c2e6 100%);
    background: -o-linear-gradient(top, #64a2c6 0%,#84c2e6 100%);
    background: -ms-linear-gradient(top, #64a2c6 0%,#84c2e6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64a2c6', endColorstr='#84c2e6',GradientType=0 );
    background: linear-gradient(top, #64a2c6 0%,#84c2e6 100%);
    color:#f6f6f6;text-decoration:none;}
.blueBtn.bubble{margin-left: 3px; position: relative; font-weight: bold}
.blueBtn .pointer{ 
    background-position: -400px -59px; 
    position: absolute;
    width: 7px; height: 9px; 
    top: 50%; margin-top: -4px;
    left: -6px;
}

/* bouton gris */
.greyBtn{ 
    border:solid 1px #d5d5d5;
    -webkit-box-shadow: 0px 1px 0px 0px #8d8d8d;
    -moz-box-shadow: 0px 1px 0px 0px #8d8d8d;
    box-shadow: 0px 1px 0px 0px #8d8d8d;}

.greyBtn .btn{
    background: #fdfdfd;
    background: -moz-linear-gradient(top, #fdfdfd 0%, #f4f4f4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#f4f4f4));
    background: -webkit-linear-gradient(top, #fdfdfd 0%,#f4f4f4 100%);
    background: -o-linear-gradient(top, #fdfdfd 0%,#f4f4f4 100%);
    background: -ms-linear-gradient(top, #fdfdfd 0%,#f4f4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#f4f4f4',GradientType=0 );
    background: linear-gradient(top, #fdfdfd 0%,#f4f4f4 100%);
    border:solid 1px #fff;
    color:#303030;
    *border:0 none
}

.greyBtn .btn:hover{
    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #fbfbfb 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #fbfbfb 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#ffffff',GradientType=0 );
    background: linear-gradient(top, #fbfbfb 0%,#ffffff 100%);
    color:#303030;
    text-decoration:none}

.greyBtn .btn:focus{
    background: #f4f4f4;
    background: -moz-linear-gradient(top, #f4f4f4 0%, #fbfbfb 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#fbfbfb));
    background: -webkit-linear-gradient(top, #f4f4f4 0%,#fbfbfb 100%);
    background: -o-linear-gradient(top, #f4f4f4 0%,#fbfbfb 100%);
    background: -ms-linear-gradient(top, #f4f4f4 0%,#fbfbfb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#fbfbfb',GradientType=0 );
    background: linear-gradient(top, #f4f4f4 0%,#fbfbfb 100%);
    color:#303030;
    text-decoration:none}

/* bouton noir */
.blackBtn{
    border:solid 1px #171717;
    -webkit-box-shadow: 0px 1px 0px 0px #b5b5b5;
    -moz-box-shadow: 0px 1px 0px 0px #b5b5b5;
    box-shadow: 0px 1px 0px 0px #b5b5b5}

.blackBtn .btn{
    background: #747474;
    background: -moz-linear-gradient(top, #747474 0%, #353535 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#747474), color-stop(100%,#353535));
    background: -webkit-linear-gradient(top, #747474 0%,#353535 100%);
    background: -o-linear-gradient(top, #747474 0%,#353535 100%);
    background: -ms-linear-gradient(top, #747474 0%,#353535 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#747474', endColorstr='#353535',GradientType=0 );
    background: linear-gradient(top, #747474 0%,#353535 100%);
    border:solid 1px #adadad;
    color:#fff;
    *border:0 none;}

.blackBtn .btn:hover{
    background: #b1b1b1;
    background: -moz-linear-gradient(top, #b1b1b1 0%, #525252 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b1b1b1), color-stop(100%,#525252));
    background: -webkit-linear-gradient(top, #b1b1b1 0%,#525252 100%);
    background: -o-linear-gradient(top, #b1b1b1 0%,#525252 100%);
    background: -ms-linear-gradient(top, #b1b1b1 0%,#525252 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1b1b1', endColorstr='#525252',GradientType=0 );
    background: linear-gradient(top, #b1b1b1 0%,#525252 100%);
    color:#fff;
    text-decoration:none}

.blackBtn .btn:focus{
    background: #383838;
    background: -moz-linear-gradient(top, #383838 0%, #6e6e6e 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#383838), color-stop(100%,#6e6e6e));
    background: -webkit-linear-gradient(top, #383838 0%,#6e6e6e 100%);
    background: -o-linear-gradient(top, #383838 0%,#6e6e6e 100%);
    background: -ms-linear-gradient(top, #383838 0%,#6e6e6e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#383838', endColorstr='#6e6e6e',GradientType=0 );
    background: linear-gradient(top, #383838 0%,#6e6e6e 100%);
    color:#fff;
    text-decoration:none}

/* disabled */
.disabledBtn{ 
    border:solid 1px #b3b3b3;
    border-top-color: #c0c0c0;
    border-bottom-color:#979797; 
    -webkit-box-shadow: 0px 1px 0px 0px #b5b5b5;
    -moz-box-shadow: 0px 1px 0px 0px #b5b5b5;
    box-shadow: 0px 1px 0px 0px #b5b5b5;} 

.disabledBtn .btn, .disabledBtn .btn:hover, .disabledBtn .btn:focus{   /*,.pictureTag*/
    border:solid 1px #dbdbdb;
    background: rgb(208,208,208);
    background: -moz-linear-gradient(top, rgba(208,208,208,1) 0%, rgba(193,193,193,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(208,208,208,1)), color-stop(100%,rgba(193,193,193,1)));
    background: -webkit-linear-gradient(top, rgba(208,208,208,1) 0%,rgba(193,193,193,1) 100%);
    background: -o-linear-gradient(top, rgba(208,208,208,1) 0%,rgba(193,193,193,1) 100%);
    background: -ms-linear-gradient(top, rgba(208,208,208,1) 0%,rgba(193,193,193,1) 100%);
    background: linear-gradient(top, rgba(208,208,208,1) 0%,rgba(193,193,193,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d0d0', endColorstr='#c1c1c1',GradientType=0 );
    border-top-color: #d8d8d8;
    color:#f6f6f6;
    *border:0 none;
    cursor:text;}

/* clicked */
.clickedBtn{  border: none; box-shadow: none; padding: 1px}
.clickedBtn:hover{border:1px solid #E5E5E5; padding: 0 }
.clickedBtn .btn{ border: none; color: #303030; font-weight: bold; background: none; filter:none; padding:1px 9px}
.clickedBtn .btn:hover, .clickedBtn .btn:focus{ 
    padding:0 8px;
    border:1px solid #fff; 
    background: none; 
    color: #303030;
    background: rgb(254,255,255);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZWZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTVlNWU1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top,  rgba(254,255,255,1) 50%, rgba(229,229,229,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(254,255,255,1)), color-stop(100%,rgba(229,229,229,1)));
    background: -webkit-linear-gradient(top,  rgba(254,255,255,1) 50%,rgba(229,229,229,1) 100%);
    background: -o-linear-gradient(top,  rgba(254,255,255,1) 50%,rgba(229,229,229,1) 100%);
    background: -ms-linear-gradient(top,  rgba(254,255,255,1) 50%,rgba(229,229,229,1) 100%);
    background: linear-gradient(top,  rgba(254,255,255,1) 50%,rgba(229,229,229,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#e5e5e5',GradientType=0 );
}
.liked{ width: 55px; padding-right: 10px; text-align: right; line-height: normal;}

/* facebook bouton */
.fbBtn{ background-color:#5F78AB;}
.fbBtn a:hover{ text-decoration: none}
.fbBtn a span{
    color: #FFFFFF;
    display: block;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-weight: bold;
    margin:1px 1px 0 21px;
    padding: 3px 6px 4px 7px;
    font-size: 11px;
    line-height: 14px;
    /*border-top:1px solid #879AC0;
    border-bottom:1px solid #1A356E;*/}

.btnsCter{
    text-align: right;
    position: relative;
}
.btnCt{ position: relative}
.btnsCter .btnCt{
    display: inline-block;
    vertical-align: middle;
    *display:inline;
    margin-left: 5px;
}
/*.btnCt.btnFB{ width: 110px; height: 21px; overflow: hidden}*/
.btnCt .fb_edge_comment_widget.fb_iframe_widget  { display: none !important;} 
/*.btnCt iframe #LikePluginPagelet{ border: 1px solid red !important}*/

#facebook #LikePluginPagelet .connect_widget.button_count{ text-align: right}

/*

<-------------- PUCES -------------->

*/

.roundM{background-color:#4583a7;
        color:#fff;line-height:30px;text-align:center;
        height:30px;width:30px;margin-right:6px;
        font-family: 'Lobster',Arial,sans-serif;font-size: 14px;
        -webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;}

.roundM.inactive{background-color:#bbb;
                 color:#fff;line-height:30px;text-align:center;
                 height:30px;width:30px;margin-right:6px;
                 font-family: 'Lobster',Arial,sans-serif;font-size: 14px;
                 -webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;}

.roundS{background-color:#afcfe8;
        color:#fff;line-height:22px;text-align:center;
        display:inline-block;height:22px;width:22px;margin-left:6px;
        font-family: 'Lobster',Arial,sans-serif;font-size: 14px;
        -webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;
        *overflow:visible;*zoom:1;*display:inline;*vertical-align: middle;}

.roundL{background-color:#ebebeb;
        color:#303030;line-height:50px;text-align:center;text-transform:uppercase;
        display:inline-block;height:50px;width:50px;
        font-family: 'Lobster',Arial,sans-serif;font-size: 23px;
        -webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;
        *overflow:visible;*zoom:1;*display:inline;*vertical-align: middle;}

.roundNext{margin-top:7px;} /* to align the <p> after a round */


/*

<-------------- FORMULAIRES -------------->

*/

/*.form .clear{ margin-bottom: 0 !important}*/

.form label.marR10{ margin-right: 10px;}
.form label.marL5{ margin-left: 5px;}
.form label.marR5, .form .checkbox label.marR5, .form .radio label.marR5{ margin-right: 5px;}

/* textarea en ligne */ 
.inlineTxta{ height: 18px; width: 100% !important;}

.line.radio p {clear: both}
.line.radio p input{ float: left; margin: 2px 2px 0 0; *margin-top: 0;}
.line.radio p label{ float: none; width: auto; overflow: hidden;}
.form .checkbox .label, .form .radio .label{ margin-top: 0}

.form .copBox2 .txtEdit li.rel{ border-color: #F0F0F0;}
.form .copBox2 .txtEdit li.rel:hover{ border-right-color: #b9b9b9; border-bottom-color: #b9b9b9;}

/* RECHERCHE */

.searchMod {
    -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
    display: inline-block;
    height: 32px;
    position: relative;
    vertical-align: middle;
    zoom:1;*display:inline;
    z-index: 1000
}
.head .searchMod{ margin-top: 9px}
.head .searchModMore{ 
    margin: 7px 0 0 2px; 
    line-height: 14px;
    display: inline-block;
    vertical-align: middle;
    zoom:1;*display:inline;
}
.searchMod legend {
    display: none;
}
.searchMod .search {
    -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;
    background: #f6f6f6;
    background: -moz-linear-gradient(top, #f6f6f6 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #f6f6f6 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #f6f6f6 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #f6f6f6 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0 );
    background: linear-gradient(top, #f6f6f6 0%,#ffffff 100%);
    -webkit-box-shadow: 0px 0px 0px 1px #fff;-moz-box-shadow: 0px 0px 0px 1px #fff;box-shadow: 0px 0px 0px 1px #fff;
    border: 1px solid #ddd;
    color: #666;font-size: 12px;line-height: 18px;
    float: left;
    height: 18px;
    width: 435px;
    padding: 5px 30px 5px 5px;}

.searchMod .submit {
    background: url("../img/copSprite_ico_new.png") no-repeat -25px  -5px;
    border: medium none;
    cursor: pointer;
    margin:7px;
    height: 16px;width: 16px;
    position: absolute;right: 0;
    text-indent: -99999em;
    *padding-left:9999em; /* corrige le bug de text-indent non pris en charge sur IE */}

/*SMALL searchMod*/ 
.searchModS{ height: 26px} 
.searchModS .search{ padding: 2px 20px 2px 5px; font-size: 11px; width: 190px; height: 20px; line-height: 20px }
.searchModS .submit{ height: 12px; width: 12px; background-position: -58px -16px; margin: 7px }


.head .searchMod .search {
    border-color:#c6c8c5;
    -webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;width: 260px;}

/*.head*/ .searchMod .submit {background-position:-5px -5px;}

/* formulaire de connexion du header */

.memberInfos .colInput{ width: 150px; float: left; 
    font-size: 11px;}
.memberInfos .colInput label{ color: #fff; font-size: 11px; font-weight: normal; text-align: left; margin-top: 0}
.memberInfos .colInput .input{ 
    font-size: 11px;
    border:1px solid #575757;
    background: #f1f1f1;    
    padding: 3px 3px;
    border-radius:0px;
    box-shadow: none;
}
.memberInfos .colInput .input input{ background: none; border: none;color: #303030; width: 100% }
.memberInfos .colInput a{ color:#cfcfd1 }
.memberInfos .btnWrap.blueBtn{ margin-top: 16px;}


/* FORMULAIRE GENERIQUE COPAIN*/
.formError .lineError .msg{left: 0; right:auto}
.form .radio label.marR30{ margin-right: 30px}
.form label, .form .label{ margin-right: 0}
.form .input{ padding: 7px 5px}
.form .em{ font-size: 11px}
.form option{ padding: 0 5px}
.form .note{
    line-height: 17px;
    margin-top: 8px
}
.form .currentlyToday{ float: left; margin-top: 8px;}

/* RECHERCHE AMIS */
.searchFriendsLabel{position:absolute; top:0; left:-235px; width: 215px; /*left:-242px; width: 222px;*/}

.searchFriendsResults{ max-height: 290px; _height:290px; overflow: auto; border-left: 1px solid #D5D5D5;}
.form.searchFriendsResults .radio label{ margin-right: 0}
.form.searchFriendsResults li{ width:180px; display: inline-block; *display:inline; *zoom:1; margin:0 5px 5px 0; vertical-align: top}
.form.searchFriendsResults li input{ float: left; margin: 2px 5px 0 0;}
.form.searchFriendsResults li label{ width: auto; float: none; overflow: hidden; display: block}


.express .input{padding:8px;} /* Bigger input to express */

.comInput{
    border:solid 1px #c7c7c7;padding:5px;
    background: #fff;
    position:relative;
    font-style: normal;
}
.form textarea{ overflow: auto}
.comInput textarea{ overflow: hidden}
/* Menu deroulant sans contour */
select.light{
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    line-height: 16px;
    color:#4583A7;
}
select.light option{
    background-color: #EBEBEB;
    border: medium none;
    padding-right:10px;
    color:#303030;
}
.timeForm .inputTxt{width:82%;}

.input.whatsup{ padding-left: 0; padding-right: 0; padding-bottom: 0;}
.whatsup textarea.whatsupTxta{ padding-left: 27px; padding-bottom: 7px; margin: 0 5px}
.whatsup.focusWhatsup textarea.whatsupTxta{ padding-left: 0;}
.whatsup.focusWhatsup .icoWhatsup{ display: none;}

.whatsup .divUrlDisplayer { min-height: 146px}
.whatsup .itemImg{ width: 146px; padding: 0 30px; margin-right: 10px}
.whatsup .itemImg .imgW140Cter.imgS2Cter{ text-align: center; height: 146px; margin-bottom: 5px;}
.whatsup .itemImg img{ max-width: 140px; max-height: 140px; border: 1px solid #ccc; padding: 2px; background: #fff }
.whatsup .itemTxt textarea{ height: auto; font-weight: bold}
.whatsup .itemTxt {width:242px;word-wrap:break-word;padding-top:28px}

.form .whatsup .line{ margin-bottom: 0}

.publishable h1{ background: #f8f8f8; border: 1px dashed #ccc; padding: 8px 5px;}
.publishable .inputTxt{ *width:300px!important}

/*

<-------------- SLIDERS -------------->

*/

.diapo { overflow: hidden}

.prevBtn, .nextBtn{ 
    top: 34px;
    width: 16px;
    height: 54px; 
    background-image: url(../img/copSprite_ico_new.png?201201261619);
}
.prevBtn{ background-position: -410px 0; left: 0 }
.nextBtn{ background-position: -426px 0; right: -2px; }
.prevBtn:hover{ background-position: -442px 0 }
.nextBtn:hover { background-position: -458px 0 }

.modalSlider { height: 146px}
.modalSlider li, .modalSlider, .modalSubSlider  {
    width: 560px;
}

.modalSlider .itemImg{ width: 146px; padding: 0 30px; margin-right: 10px;}
.modalSlider .itemTxt { border: 1px solid #ddd; background: none; padding: 10px; height: 124px}

#memoryControls a.prevBtn,#memoryControls a.nextBtn{ top: 0; width:26px; height: 146px; background-position:-85px -338px;}
#memoryControls a.nextBtn{ background-position:-112px -338px; left:180px;}

#memorySubControls a.prevBtn,#memorySubControls a.nextBtn{ top: 50%; margin-top: -36px; width:26px; height: 72px; background-position:-139px -338px;}
#memorySubControls a.nextBtn{ background-position:-166px -338px;}



.modalSubSlider li{ padding: 8px; width: 54px;}


.modalSubSlider li a.sudoLink{opacity:0.5; filter : alpha(opacity=50); display: block; height: 54px; width: 54px; position: relative}
.modalSubSlider li a.current, .modalSubSlider li a.sudoLink:hover {opacity:1; filter : alpha(opacity=100);}

/*.modalSubSlider li a.sudoLink:hover .imgW50Cter.imgS1Cter,*/
.modalSubSlider li a.sudoLink.current .imgW50Cter.imgS1Cter{ width: 64px; top: -5px; left: -6px; position: absolute;}
/*.modalSubSlider li a.sudoLink:hover .imgW50Cter.imgS1Cter .imgW50.sizeSquare,*/
.modalSubSlider li a.sudoLink.current .imgW50Cter.imgS1Cter .imgW50.sizeSquare{ width: 60px; height: 60px}

/* TIMESECTION SLIDER */
.diapo.timeSectionSlider { width: 600px}

.diapo.timeSectionSlider li {     
    float: left;
    margin-right: 8px;
    width: 146px;
}
.diapo.timeSectionSlider li .itemImg {
    height: 114px;
    width: 137px;
    padding: 3px 0 5px 9px;
    background:url(../img/cop_bg_diap_126x106.png) no-repeat left top;
    position: relative;
}
.diapo.timeSectionSlider li .itemImg img{
    background: none repeat scroll 0 0 #fff;
    border:solid 1px #ccc;
    display: block; 
    padding: 1px;
    overflow: hidden;
    padding: 4px
}
.diapo.timeSectionSlider li .itemImg .copBox3{
    display: block;
    position: absolute;
    width:122px;
    padding:2px;
    bottom: 8px;
    left: 14px;
}
.diapo.timeSectionSlider li .itemBt {
    background: none;
    font-size: 13px;
    height: auto;
    position: relative;
    top: auto; left:auto;
    padding: 0;
    width: auto;
}
.diapo.timeSectionSlider li .itemBt a{ color: #303030}
.diapo.timeSectionSlider li .itemBt a:hover{ text-decoration: none;}


/* DIAPOZOOM */

.zoomPicture{min-height: 200px; _height:200px; position: relative; margin-bottom: 20px;}

/* pour controler le slider dans le header */
#diapoZoomCtControls a span{
    background-position:-42px -28px;
    width:5px;height:12px;}

#diapoZoomCtControls a.next span{background-position:-50px -28px;}



.pictureTag{
    padding:4px 8px; z-index: 5000}
.pictureTag_arrowBorder{
    border-color:transparent transparent #CFE5F3 transparent;
    border-style: solid;
    border-width: 6px;
    height:0;
    width:0;
    position:absolute;
    top:-13px;
    left:10%;
    margin-left:-6px;}
.pictureTag_arrow{
    border-color:transparent transparent #86C4E8 transparent;
    border-style: solid;
    border-width: 6px;
    height:0;
    width:0;
    position:absolute;
    top:-11px;
    left:10%;
    margin-left:-6px;
    _border-left-color: pink;
    _border-bottom-color: pink;
    _border-right-color: pink;
    _filter: chroma(color=pink);}


.contentPage .leftPart{ width: 750px}
.contentPage .picturePart img{ display: block; margin: auto; max-width: 750px}
.contentPage .bottomPart{ background: #fff url(../img/cop_bg_contentPage.png?1) repeat-x left top; padding-top: 25px; margin-bottom: 20px} 

.contentPage .prevBtn, .contentPage .nextBtn{background: url(../img/copSprite_ico_new.png?201203011213) no-repeat; top: 0; width: auto; }
.padPageControls{ padding:0 100px;}
#pageControls .prevBtn, #pageControls .nextBtn{height: 33px; line-height: 33px; color: #666; text-indent: 0;}
#pageControls .prevBtn{ background-position: -338px -248px; left: 0; padding-left: 37px; }
#pageControls .nextBtn{ background-position: -399px -282px; right: 0; padding-right: 37px; }

.recoPart{ width: 214px; position: absolute; top: 40px; right: 0;}

.recoSlider{ height: 473px; margin: 20px 0; overflow: hidden;}
.recoSlider ul{ position: relative;}
.recoSlider ul li{ margin-bottom: 5px; padding: 5px 10px 5px 14px;}
.recoSlider ul li a.icoCt{ color: #303030}
.recoSlider ul li .icoHem{position: absolute; left: 0; bottom: -4px; display:none}
.recoSlider ul li.active{
    background: #1e5799;
    background: -moz-linear-gradient(top,  #1e5799 0%, #85c3e7 0%, #63a1c5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(0%,#85c3e7), color-stop(100%,#63a1c5));
    background: -webkit-linear-gradient(top,  #1e5799 0%,#85c3e7 0%,#63a1c5 100%);
    background: -o-linear-gradient(top,  #1e5799 0%,#85c3e7 0%,#63a1c5 100%);
    background: -ms-linear-gradient(top,  #1e5799 0%,#85c3e7 0%,#63a1c5 100%);
    background: linear-gradient(top,  #1e5799 0%,#85c3e7 0%,#63a1c5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#63a1c5',GradientType=0 );
     position: relative
}
.recoSlider ul li.active, .recoSlider ul li.active a, .recoSlider ul li.active a.icoCt{ color: #fff}
.recoSlider ul li.active .icoTarget, .recoSlider ul li.active .icoTarget:hover{ background-position: -363px -161px}
.recoSlider ul li.active .icoClose, .recoSlider ul li.active .icoClose:hover{ background-position: -363px -181px}

.recoSlider ul li.active .icoHem{display:block}

#recoControls .prevBtn, #recoControls .nextBtn{ width: 190px; height: 15px; top: auto; left: 13px }
#recoControls .prevBtn{ background-position: -193px -408px; top: -20px; *top:0 }
#recoControls .nextBtn{ background-position: -193px -392px; bottom: -20px; *bottom:0; }

/* A SUPPRIMER QD NOUVEAU CIBLAGE EN PLACE */
.zoomPicture .prevBtn, .zoomPicture .nextBtn{
    position: absolute;
    top: 80px;
    background: url(../img/copSprite_bigSlider.png) no-repeat;
    width: 81px;
    height: 131px;
}
.zoomPicture .prevBtn{ background-position: 0 0; left: 20px }
.zoomPicture .nextBtn{ background-position: -85px 0; right: 20px; }
.zoomPicture .prevBtn:hover{ background-position: -171px 40%; }
.zoomPicture .nextBtn:hover { background-position: -256px 40%;  }

.zoomTxt{ background: #fff url(../img/cop_bg_contentPage.png?1) repeat-x left top; padding-top: 25px; margin-bottom: 20px}


/*
<-------------- MODULES PARTAGER -------------->
*/

/*
<-------------- MODULES ETAPES -------------->
*/

.step{ margin: 0 30px; color: #778793}
.step.stepActive{ color: #4583A7;}
.step .icoStep{ width: 29px; height: 29px; line-height: 25px; background-position: -303px -48px; text-align: center; color: #fff }
.step.stepActive .icoStep{  background-position: -269px -48px;}

/*
<-------------- MODULES MINI MODALE -------------->
*/
.miniModale.memoryYearsSelector{ right: 0 !important;}
#col_middle .miniModale.memoryYearsSelector { 
	left: 0 !important; 
	right: auto !important
}
#col_middle .right .miniModale.memoryYearsSelector { 
	left: -88px !important;
}

.miniModale{
    background: #fff;
    border: 1px solid #b9b9b9;
    padding: 10px;
    position: absolute;
    width: 230px;
    z-index: 5000;
    display: none;
    text-align: left;
    /*top: 50px;
    left: 500px*/
}
.miniModale .miniModaleCt{
    max-height: 87px;
    overflow: auto;
}
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  .miniModale .miniModaleCt{
    max-height: 85px;
  } 
}
.miniModale .miniModaleCt label{ margin-left: 2px;}

/*
<-------------- MODULES MESSAGES -------------->
*/

.messageList li{
    padding: 10px;
    border-bottom: 1px solid #c7c7c7;
}
.messageList li.noRead{
    background-color: #f5f5f5;
}
.messageList li.noRead .msgTitle{ font-weight: bold;}
.inputBox{ width: 24px; text-align: center;}
.messageList .resumeBox{ width: 639px;}
.messageList .dateBox{ width: 90px; text-align: right;}

.form .reply{ position: relative; padding-right: 80px; min-height: 23px;}
.form .reply .btnWrap{ position: absolute; top: 6px; right: 6px}

/**
 * @todo fix this css
 */
.messageList .line.marT10.marB10 {
	min-height: 154px;
}



/*.picRemember .line a{ 
    float: left; 
    display: block; 
    margin:0 0 5px 5px; 
    width: 120px;
    color: #666; 
    font-size: 11px;}
.picRemember .line a img{ width: 116px; height: 105px} */

.form .input.multi-user {
  overflow: hidden;
  height: auto;
  padding-top: 4px !important;
  padding-bottom: 0px !important;
}

.multi-user #txtUsers {
  display: block; 
  float: left; 
  margin-top: 4px;
  margin-bottom: 8px;
}

.multi-user .user { 
  display: block; 
  float: left;
  margin: 0px 4px 4px 0px;
  padding: 2px 3px 1px 3px; 
  border: 1px solid #B9B9B9; 
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-size: 11px;
  color: #666
}
.multi-user .user:hover{ border-color:#4583A7; color: #4583A7; text-decoration: none }
.multi-user .user span.deleteSelection{ position: relative; top: -1px;}
.multi-user .user:hover span.deleteSelection{background-position: -239px -91px;}

/** @todo : fix all others error msg divs**/
#divErrorUsers {
  left: auto;
  bottom: auto;
  
}

/*
<-------------- MODULES OPTIONS -------------->
*/

.tlFilterAction{
    position: absolute; 
    right: 0px; 
    top:5px; 
    height: 21px; 
    width: 21px;
}

/* bloc contenant les options */
.relative .box3{
   cursor: auto;
    display: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    min-width: 200px;
    position: absolute;
    top: 20px;
    z-index: 115;
}

/* classe deleted pour les infos qui ne sont plus suivis */
.deleted, .deleted .icoOptions:hover {
    color: #999;
}
.deleted a, .deleted a:hover, .deleted h1, .deleted .copNeutre{ color: #999}
.deleted img{ opacity:0.5;}

/* affichage du bloc lorsque l'on clique sur options' */
.list1 a, .ui-autocomplete a {
    color: #303030;
    display: block;
    padding: 3px 10px; 
    padding: 8px 10px;
    font-weight: bold;
    outline-style: none;
}
*.list1 a{color: #303030 !important;}
.ui-autocomplete a:hover, .autoComplete .ui-widget-content .ui-state-hover{    
    text-decoration: none;
    background: none;
    padding: 3px 10px;
    border: none; 
    color: #303030;
}
.list1 a:hover{
    color: #fff;
    background-color: #4583A7;
    text-decoration: none;}
*.list1 a:hover{
    color: #fff !important;
}
.sl .selected{ position: relative}
.sl .selected .icoChecked{
    background:url("../img/copSprite_ico_new.png?201202151816") no-repeat;
    background-position:-273px -95px;
    display: block;
    width: 10px;
    height: 10px;
    position: absolute; top: 11px; left:5px;
}
.sl .selected:hover .icoChecked{ background-position: -283px -95px; }
.sl a, .sl li a {
    padding-left: 20px;
}

.memberInfos a, .memberInfos a:hover, .memberInfos a:active,
.memberInfos .wrapper .a, .memberInfos .wrapper:hover .a, .memberInfos .wrapper:active .a{ color: #fff; text-decoration: none}

.memberInfos .rel .mod{ top: 49px; width: 100%}
.memberInfos .sl a, .memberInfos .sl li a {
    padding-left: 10px;
}
.memberInfos .tlOptions{ margin-right: 20px}
.memberInfos .rel.isDropDownBtn .bd{ float: none; padding: 10px 15px;}
.memberInfos .isDropDownBtn .mod{ min-width: 0;}

/*
- UPLOAD DES IMAGES -------------------------------------------------------------------
*/

/* bouton parcourir */
.filImageButton {
    position:relative;
    /*width:250px;*/
    height:32px;
    overflow:hidden;
    background: -moz-linear-gradient(center top , #FDFDFD 0%, #F4F4F4 100%) repeat scroll 0 0 transparent;
}

.filImageButton input {
    position:absolute;
    right:0;
    top:0;
    font-size:60px;
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity=0);
    cursor:pointer;
    text-align:right;
}
*.filImageButton .btn,{ position: relative; top: -33px;}

/* barre de progression */
.upProg{ 
    position: relative;
    padding-right: 20px; 
}
.upProg .icoClose{ position: absolute; top:0; right:0 }

    .inProgBar{ 
        margin-left: 10px;
        background-color: #d2d4d6; 
        border:1px solid #adadad; 
        width: 100px; 
        height: 10px; 
        line-height: 10px; 
        display: inline-block;
        *display:inline;
        *zoom:1;
        vertical-align:middle;
        overflow:hidden;
        -moz-border-radius: 4px;
        border-radius:4px;
    }
     .dwnldProgress{
        background: url(../img/cop_loader.gif) repeat-x; 
        height: 10px;
        *height:auto;
        display: inline-block; 
        *display:inline;
        *zoom:1;
     }

     
/*
- UI -------------------------------------------------------------------
*/

/* bloc auto-complete */  
.autoComplete{ 
    position: absolute; left: 0; top: 30px;
    border:1px solid #acacac;
    background: #fff;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    background: #fff;
    padding-bottom: 36px;
}
.autoComplete ul li a{
    display: block;
    padding: 5px 20px 5px 10px;
    cursor: pointer;
    position: relative;
}
.autoComplete .ui-autocomplete a{ color: #303030}
.autoComplete ul li a:hover, .autoComplete #ui-active-menuitem{ 
    background: #dfeaf4; 
    padding: 5px 20px 5px 10px;
}
    .autoComplete ul li a span.icoSearchG{ position: absolute; top:5px; right: 10px}
    .autoComplete ul li a:hover span.icoSearchG,
    .autoComplete #ui-active-menuitem span.icoSearchG{ background-position: -5px -5px}
    
    .autoComplete ul li a span.icoMoreB{ display: none;}
    .autoComplete ul li a:hover span.icoMoreB{ display: block; position: absolute; right: 10px; top: 50%; margin-top: -5px;}
    
.autoComplete .moreResults, .autoComplete .actions{ 
    position: absolute; left: 0; bottom: 0; 
    width: 100%; 
    background: #f2f2f2;
    text-align: center;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}
.autoComplete .moreResults a:hover{
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-radius: 0 0 10px 10px;
}

.autoComplete .actions{ cursor: auto;}
.autoComplete .moreResults:hover, .autoComplete .actions:hover{ background: #f2f2f2;}
/*.autoComplete .moreResults a, .autoComplete .moreResults:hover a{
    display: block;
    padding:10px;
    color: #4583A7;
}*/
.autoComplete .actions a{ color:#4583A7; display: inline-block; padding: 0}
.autoComplete .actions a.btn{ color:#fff; padding: 0 8px}
.autoComplete .actions:hover a.btn {border:solid 1px #b3d8ee;
    border-top-color: #d3e9f7;}
.autoComplete .actions a{ text-decoration: underline}
.autoComplete .actions a:hover{ text-decoration: none}
     
/* NOTIFICATIONS */

.ui-pnotify {
    position: fixed; 
    top:50px;
    bottom: auto !important;
    z-index: 5000;
    padding: 10px 15px 10px 10px;
    background: rgb(255,255,255);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,204,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,204,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,204,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,204,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,204,1) 100%);
    background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,204,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffcc',GradientType=0 );
    border: 2px solid #ccc;

}
.ui-widget-content.ui-pnotify-container {
    border:0;
    background: none;
    padding: 0;
}

    .ui-pnotify .ui-pnotify-icon{ display: none}
    
    .ui-state-highlight .ui-icon {
        background-image: url("../img/copSprite_ico_new.png?201202151816");
    }
    .ui-widget-content .ui-icon {
        background-image: url("../img/copSprite_ico_new.png?201202151816");
    }
    .ui-icon-circle-close {
        background-position: -186px -45px;
        height: 18px;
        width: 18px;
        position: absolute; top: 2px; right: 2px;
    }
    .ui-icon-circle-close:hover {
        background-position: -204px -45px;
    }
    .ui-icon-circle-close:active {
        background-position: -222px -45px;
    }
    .ui-icon {
    }
    .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a {
    color: #4583A7;
    }
    .ui-pnotify .ui-pnotify-text{ color: #747E87}

/* notifications du wall (loading) */
.ui-pnotify.flash{
    padding: 5px 10px;
    z-index: 2000;
    left: 42% !important;
    top: 42px !important;
}

/* jqueryImageTags */
/*----------------------------------------
    * Pseudo-Classes
----------------------------------------*/
.jqueryImageTags-container .clearfix:after {
    clear:both;
    content:".";
    height:0px;
    display:block;
    visibility: hidden;
}
/*----------------------------------------
    * Reset
----------------------------------------*/
.jqueryImageTags-container * {
    margin:0;
    padding:0;
    list-style:none;
    font-family:Verdana, Helvetica, sans-serif;
    font-size:10px;
    font-style:normal;
    font-weight:normal;
    text-decoration:none;
}
.jqueryImageTags-container div,
.jqueryImageTags-container img {
    border:none;
    background:none;
    outline:none;
}
/*----------------------------------------
    * Notes
----------------------------------------*/
.jqueryImageTags-container {
    position:relative;
}
.jqueryImageTags-container .tags {
    position:relative;
	margin:auto;
}
.jqueryImageTags-container .tags img {
    position:relative;
}
.jqueryImageTags-container .tags .tag {
    position:absolute;
    display: none;
}
.jqueryImageTags-container .tags .offFocus {
    opacity:0.3;
}
.jqueryImageTags-container .tags .onFocus {
}
.jqueryImageTags-container .tags:hover .tag {
    /*display:block;*/
}
.jqueryImageTags-container .tags .select {
    z-index:9990;
    
}
.jqueryImageTags-container .tags .tag .ui-resizable-handle {
    position:absolute;
    height:10px;
    width:10px;
    background:url(../img/tags/resize.png) no-repeat;
}
.jqueryImageTags-container .tags .tag .ui-resizable-ne {
    right:0;
    top:0;
    cursor:ne-resize;
    background-position:-6px 2px;
}
.jqueryImageTags-container .tags .tag .ui-resizable-nw {
    left:0;
    top:0;
    cursor:nw-resize;
    background-position:2px 2px;
}
.jqueryImageTags-container .tags .tag .ui-resizable-se {
    right:0;
    bottom:0;
    cursor:se-resize;
    background-position:-6px -6px;
}
.jqueryImageTags-container .tags .tag .ui-resizable-sw {
    left:0;
    bottom:0;
    cursor:sw-resize;
    background-position:2px -6px;
}
.jqueryImageTags-container .tags .tag .border {
    position:relative;
    width:100%;
    height:100%;
    border:1px solid #fff;
    outline:1px solid #000;
}
.jqueryImageTags-container .tags .tag .border .bg {
    position:relative;
    width:100%;
    height:100%;
    background:#fff;
    opacity:0.2;
}
.jqueryImageTags-container .tags .tag .border .bg a {
    position:relative;
    width:100%;
    height:100%;
    display:block;
}
.jqueryImageTags-container .tags .text {
    position:absolute;
    padding:5px;
    margin-top:4px;
    line-height:10px;
    display:none;
    opacity:0.9;
    z-index:9990;
}
.jqueryImageTags-container .tags .text span {
    color:#fff;
}
.jqueryImageTags-container .tags .text .author {
    font-style:italic;
}
.jqueryImageTags-container .tags .text .date {
    color:#999;
    font-size:8px;
    font-style:italic;
    display:block;
}
/*----------------------------------------
    * Loading
----------------------------------------*/
.jqueryImageTags-container .tags .layer {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:#fff;
    opacity:0.7;
    z-index:9999;
    display:none;
}
.jqueryImageTags-container .tags .loading {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:9999;
    display:none;
}
.jqueryImageTags-container .tags .loading .message {
    position:relative;
    margin:0 auto;
    width:100px;
    line-height:25px;
    padding:0 5px 0 25px;
    color:#fff;
    font-weight:bold;
    text-align:center;
    background:url(../img/tags/loader.gif) no-repeat 10px center #4583A7;
    opacity:0.9;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
/*----------------------------------------
    * Notes Formular
----------------------------------------*/
.jqueryImageTags-container .tags .tag .text-box {
    position:absolute;
    left:0;
    width:342px;
    margin-top:2px;
    z-index:9990;
}
.jqueryImageTags-container .tags .tag .text-box textarea,
.jqueryImageTags-container .tags .tag .text-box input {
    /*position:relative;
    padding:5px;
    margin-top:1px;
    width:141px;
    line-height:15px;
    font-family:verdana, sans-serif;
    font-size:10px;
    background:#fff;
    border:1px solid #777;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;*/
border:solid 1px #ddd;padding:7px 5px;
-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;
background: #f6f6f6;
background: -moz-linear-gradient(top, #f6f6f6 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #f6f6f6 0%,#ffffff 100%);
background: -o-linear-gradient(top, #f6f6f6 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #f6f6f6 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0 );
background: linear-gradient(top, #f6f6f6 0%,#ffffff 100%);
position:relative;
zoom:1;
float: left;
}
.jqueryImageTags-container .tags .tag .text-box a {
    position:relative;
    margin:5px 2px 0 2px;
    height:16px;
    width:16px;
    display:block;
    background:#4583A7;
    background-repeat:no-repeat;
    background-position:center center;
    float:left;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
}
.jqueryImageTags-container .tags .tag .text-box a.save-tag {
    background-image:url(../img/tags/save.png);
}
.jqueryImageTags-container .tags .tag .text-box a.edit-tag {
    background-image:url(../img/tags/edit.png);
}
.jqueryImageTags-container .tags .tag .text-box a.cancel-tag {
    background-image:url(../img/tags/cancel.png);
}
.jqueryImageTags-container .tags .tag .text-box a.delete-tag {
    background-image:url(../img/tags/delete.png);
}
/*----------------------------------------
    * Controller
----------------------------------------*/
.jqueryImageTags-container .controller {
    position:relative;
}
.jqueryImageTags-container .controller a {
    position:relative;
    margin:2px;
    height:16px;
    width:16px;
    display:block;
    background:#000;
    background-repeat:no-repeat;
    background-position:center center;
    float:left;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
}
.jqueryImageTags-container .controller a.counter {
    background-image:url(../img/tags/tags.png);
}
.jqueryImageTags-container .controller a.add-tag {
    background-image:url(../img/tags/add.png);
}
.jqueryImageTags-container .controller a.cancel-tag {
    background-image:url(../img/tags/cancel.png);
}
.jqueryImageTags-container .controller a.hide-tags {
    background-image:url(../img/tags/hide.png);
}
.jqueryImageTags-container .controller a.show-tags {
    background-image:url(../img/tags/show.png);
}
.jqueryImageTags-container .controller a.reload-tags {
    background-image:url(../img/tags/reload.png);
}
.jqueryImageTags-container .controller a.link {
    background-image:url(../img/tags/link.png);
}/*----------------------------------------
    * IE-Fix
----------------------------------------*/
.jqueryImageTags-container .tags .tag .border .bg,
.jqueryImageTags-container .tags .offFocus,
.jqueryImageTags-container .tags .offFocus .border {
    filter:alpha(opacity=30);
}
.jqueryImageTags-container .tags .offFocus .border {
    outline:1px solid #555;
}
.jqueryImageTags-container .tags .offFocus .border .bg {
    filter:alpha(opacity=9);
}
.jqueryImageTags-container .tags .text,
.jqueryImageTags-container .tags .tag .text-box button {
    filter:alpha(opacity=90);
}

.ui-autocomplete-input{
    }
    
    /* notifications du wall infoMsg*/
.infoMsg{
    background: rgb(255,255,255);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,204,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,204,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,204,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,204,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,204,1) 100%);
    background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,204,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffcc',GradientType=0 );
    border: 1px solid #ccc;
    padding:10px;
    color: #747E87}
	
	

/* roll over sur ligne de listContainer */

.listContainer .listItem .actions{ height: 18px;}
.listContainer .listItem .actions .ico{ display: none;}
.listContainer .listItem:hover .actions .ico{ display: inline-block;}


/* JEUX rules */

#rules h3, #rules h4, #rules p{ margin-bottom: 15px;}

#rules h4{ text-transform: uppercase; color: #666; font-size: 12px; margin-left: 0 !important}
#rules ul {padding-left: 0 !important; list-style-position: outside!important; margin:0 0 15px 30px; list-style: disc;}
#rules ul li{ margin-bottom:5px}
#rules ul ul{ margin: 0 0 0 30px;}
#rules ul ul li{ margin-bottom:0}

/*
- TIPSY ------------------------------------------------------------------------
- http://onehackoranother.com/projects/jquery/tipsy/ - 
*/
.tipsy.tour { font-family: arial; padding: 7px;}
.tipsy.tour .tipsy-inner {
    text-align: left;
    padding: 8px;
    border: 1px solid #2c2c2d;
    background: #3b3b3b;
    -webkit-box-shadow: 2px 2px 5px 2px #555;
    -moz-box-shadow: 2px 2px 5px 2px #555;
    box-shadow: 2px 2px 5px 2px #555;
}

/* style et positionnement de la flèche */
.tipsy.tour .tipsy-arrow {
    background-image: url('../img/tipsy.png');
    width: 16px;
    height: 8px;
    margin-left: -8px;
}
.tipsy-e.tour .tipsy-arrow, 
.tipsy-w.tour .tipsy-arrow {
    width: 8px;
    height: 16px;
    margin-left: 0;
    margin-top: -8px;
}
.tipsy-nw.tour .tipsy-arrow, .tipsy-sw.tour .tipsy-arrow { left: 30px; }
.tipsy-ne.tour .tipsy-arrow, .tipsy-se.tour .tipsy-arrow { right: 20px; }

/* style du bouton */
.tipsy.tour .tipsy-btn{
    font-weight: normal;
    font-size:12px;        
    border:solid 1px #bec1c4;
    background: #fefefe;
    background: -moz-linear-gradient(top,  #fefefe 0%, #e6e7e9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#e6e7e9));
    background: -webkit-linear-gradient(top, #fefefe 0%,#e6e7e9 100%);
    background: -o-linear-gradient(top, #fefefe 0%,#e6e7e9 100%);
    background: -ms-linear-gradient(top, #fefefe 0%,#e6e7e9 100%);
    background: linear-gradient(top,  #fefefe 0%,#e6e7e9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e6e7e9',GradientType=0 );
    color:#303030;
}
    
.tipsy.tour .tipsy-btn:hover{
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 20%, #e8e9eb 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#ffffff), color-stop(100%,#e8e9eb));
    background: -webkit-linear-gradient(top, #ffffff 20%,#e8e9eb 100%);
    background: -o-linear-gradient(top, #ffffff 20%,#e8e9eb 100%);
    background: -ms-linear-gradient(top, #ffffff 20%,#e8e9eb 100%);
    background: linear-gradient(top, #ffffff 20%,#e8e9eb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e9eb',GradientType=0 );
    color:#303030;
    text-decoration:none
}

.tipsy.tour .tipsy-btn:active{
    background: #e6e7e9;
    background: -moz-linear-gradient(top, #e6e7e9 0%, #fefefe 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e7e9), color-stop(100%,#fefefe));
    background: -webkit-linear-gradient(top, #e6e7e9 0%,#fefefe 100%);
    background: -o-linear-gradient(top, #e6e7e9 0%,#fefefe 100%);
    background: -ms-linear-gradient(top, #e6e7e9 0%,#fefefe 100%);
    background: linear-gradient(top, #e6e7e9 0%,#fefefe 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e7e9', endColorstr='#fefefe',GradientType=0 );
    color:#303030;
    text-decoration:none
}/*----------------------------------------
    * Pseudo-Classes
----------------------------------------*/
.jqueryImageTags-container .clearfix:after {
    clear:both;
    content:".";
    height:0px;
    display:block;
    visibility: hidden;
}
/*----------------------------------------
    * Reset
----------------------------------------*/
.jqueryImageTags-container * {
    margin:0;
    padding:0;
    list-style:none;
    font-family:Verdana, Helvetica, sans-serif;
    font-size:10px;
    font-style:normal;
    font-weight:normal;
    text-decoration:none;
}
.jqueryImageTags-container div,
.jqueryImageTags-container img {
    border:none;
    background:none;
    outline:none;
}
/*----------------------------------------
    * Notes
----------------------------------------*/
.jqueryImageTags-container {
    position:relative;
}
.jqueryImageTags-container .tags {
    position:relative;
	margin:auto;
}
.jqueryImageTags-container .tags img {
    position:relative;
}
.jqueryImageTags-container .tags .tag {
    position:absolute;
    display: none;
}
.jqueryImageTags-container .tags .offFocus {
    opacity:0.3;
}
.jqueryImageTags-container .tags .onFocus {
}
.jqueryImageTags-container .tags:hover .tag {
    /*display:block;*/
}
.jqueryImageTags-container .tags .select {
    z-index:9990;
    
}
.jqueryImageTags-container .tags .tag .ui-resizable-handle {
    position:absolute;
    height:10px;
    width:10px;
    background:url(../img/tags/resize.png) no-repeat;
}
.jqueryImageTags-container .tags .tag .ui-resizable-ne {
    right:0;
    top:0;
    cursor:ne-resize;
    background-position:-6px 2px;
}
.jqueryImageTags-container .tags .tag .ui-resizable-nw {
    left:0;
    top:0;
    cursor:nw-resize;
    background-position:2px 2px;
}
.jqueryImageTags-container .tags .tag .ui-resizable-se {
    right:0;
    bottom:0;
    cursor:se-resize;
    background-position:-6px -6px;
}
.jqueryImageTags-container .tags .tag .ui-resizable-sw {
    left:0;
    bottom:0;
    cursor:sw-resize;
    background-position:2px -6px;
}
.jqueryImageTags-container .tags .tag .border {
    position:relative;
    width:100%;
    height:100%;
    border:1px solid #fff;
    outline:1px solid #000;
}
.jqueryImageTags-container .tags .tag .border .bg {
    position:relative;
    width:100%;
    height:100%;
    background:#fff;
    opacity:0.2;
}
.jqueryImageTags-container .tags .tag .border .bg a {
    position:relative;
    width:100%;
    height:100%;
    display:block;
}
.jqueryImageTags-container .tags .text {
    position:absolute;
    padding:5px;
    margin-top:4px;
    line-height:10px;
    display:none;
    opacity:0.9;
    z-index:9990;
}
.jqueryImageTags-container .tags .text span {
    color:#fff;
}
.jqueryImageTags-container .tags .text .author {
    font-style:italic;
}
.jqueryImageTags-container .tags .text .date {
    color:#999;
    font-size:8px;
    font-style:italic;
    display:block;
}
/*----------------------------------------
    * Loading
----------------------------------------*/
.jqueryImageTags-container .tags .layer {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:#fff;
    opacity:0.7;
    z-index:9999;
    display:none;
}
.jqueryImageTags-container .tags .loading {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:9999;
    display:none;
}
.jqueryImageTags-container .tags .loading .message {
    position:relative;
    margin:0 auto;
    width:100px;
    line-height:25px;
    padding:0 5px 0 25px;
    color:#fff;
    font-weight:bold;
    text-align:center;
    background:url(../img/tags/loader.gif) no-repeat 10px center #4583A7;
    opacity:0.9;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
/*----------------------------------------
    * Notes Formular
----------------------------------------*/
.jqueryImageTags-container .tags .tag .text-box {
    position:absolute;
    left:0;
    width:153px;
    margin-top:2px;
    z-index:9990;
}
.jqueryImageTags-container .tags .tag .text-box textarea,
.jqueryImageTags-container .tags .tag .text-box input {
    position:relative;
    padding:5px;
    margin-top:1px;
    width:141px;
    line-height:15px;
    font-family:verdana, sans-serif;
    font-size:10px;
    background:#fff;
    border:1px solid #777;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.jqueryImageTags-container .tags .tag .text-box a {
    position:relative;
    margin:5px 2px 0 2px;
    height:16px;
    width:16px;
    display:block;
    background:#4583A7;
    background-repeat:no-repeat;
    background-position:center center;
    float:left;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
}
.jqueryImageTags-container .tags .tag .text-box a.save-tag {
    background-image:url(../img/tags/save.png);
}
.jqueryImageTags-container .tags .tag .text-box a.edit-tag {
    background-image:url(../img/tags/edit.png);
}
.jqueryImageTags-container .tags .tag .text-box a.cancel-tag {
    background-image:url(../img/tags/cancel.png);
}
.jqueryImageTags-container .tags .tag .text-box a.delete-tag {
    background-image:url(../img/tags/delete.png);
}
/*----------------------------------------
    * Controller
----------------------------------------*/
.jqueryImageTags-container .controller {
    position:relative;
}
.jqueryImageTags-container .controller a {
    position:relative;
    margin:2px;
    height:16px;
    width:16px;
    display:block;
    background:#000;
    background-repeat:no-repeat;
    background-position:center center;
    float:left;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
}
.jqueryImageTags-container .controller a.counter {
    background-image:url(../img/tags/tags.png);
}
.jqueryImageTags-container .controller a.add-tag {
    background-image:url(../img/tags/add.png);
}
.jqueryImageTags-container .controller a.cancel-tag {
    background-image:url(../img/tags/cancel.png);
}
.jqueryImageTags-container .controller a.hide-tags {
    background-image:url(../img/tags/hide.png);
}
.jqueryImageTags-container .controller a.show-tags {
    background-image:url(../img/tags/show.png);
}
.jqueryImageTags-container .controller a.reload-tags {
    background-image:url(../img/tags/reload.png);
}
.jqueryImageTags-container .controller a.link {
    background-image:url(../img/tags/link.png);
}

#tagAddActions {
	position:absolute;
	z-index:9992;
	height:26px;
    width: 280px; 
    background: #f2f2f2;
    text-align: right;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

.jqueryImageTags-container .tags .tag .text-box input {
    border-radius: 5px 5px 0px 0px;
}/*----------------------------------------
    * IE-Fix
----------------------------------------*/
.jqueryImageTags-container .tags .tag .border .bg,
.jqueryImageTags-container .tags .offFocus,
.jqueryImageTags-container .tags .offFocus .border {
    filter:alpha(opacity=30);
}
.jqueryImageTags-container .tags .offFocus .border {
    outline:1px solid #555;
}
.jqueryImageTags-container .tags .offFocus .border .bg {
    filter:alpha(opacity=9);
}
.jqueryImageTags-container .tags .text,
.jqueryImageTags-container .tags .tag .text-box button {
    filter:alpha(opacity=90);
}