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

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

Document : Content CSS
Author   : Damien SYREN

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

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

/* maxvoltar.com/archive/-webkit-font-smoothing */
html { -webkit-font-smoothing:antialiased }

/* #333 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
body, select, input, textarea { color:#333 }

body{
    /* le line-height doit etre environ egale à 140 - 150% de la taille de la font */
    font-size:14px;
    line-height:1.4; 
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    /* CSS3 permet de faire des cesure sur les long mots sans espaces */
    word-wrap:break-word;
}

/*
- EDITORIAL SPACING ------------------------------------------------------------
*/

.edito h1{ margin-bottom:15px }
.edito h2,.edito h3,.edito h4,.edito h5,.edito h6,.edito h7{ margin:30px 0 15px 0 }
.edito h1 + h2{ margin-top:15px }
.edito ul,.edito ol,.edito blockquote{ margin:15px 0 }
.edito img{ max-width:100% !important } /* evite le probleme d'overflow */
.edito .toc li,.toc li{ list-style:none; margin-left:0; text-indent:-15px; padding-left:20px }

/* espacement pour le ccmeditor */
.content iframe{ margin:0 auto }

/*
- CCMEDITOR --------------------------------------------------------------------
*/

/* positionnement en left des images par defaut */
figure{ float: left; margin:10px 15px 10px 0 } 

/* surcharge des images de contenu ds les posts ou commentaires qui sont stockées en bdd */
.edito img.floatLeft,
.cmtline img.floatLeft,
a.fancy img.floatLeft,
.edito img.left,
.cmtline img.left,
a.fancy img.left,
figure.left{ margin:10px 15px 10px 0 }
.edito img.floatRight,
.cmtline img.floatRight,
a.fancy img.floatRight,
.edito img.right,
.cmtline img.right,
a.fancy img.right,
figure.right{ margin:10px 0 10px 15px }
.edito img.center,
.cmtline img.center,
img.center,
figure.center{ float: none; margin:10px auto }
.edito img.full,
.cmtline img.full,
a.fancy img.full,
figure.full{ float: none; margin: 10px auto }
figure.full img{ max-width:100% !important; width: 100% !important; }
.edito a:hover img,
.cmtline a:hover img,
a:hover.fancy img{ border-color:#3e93cd }

/* gestion des legendes et credits */
figure{     
    display:block;
    border:1px solid #CCCCCC; 
    background-color: #FFFFFF; 
    padding:3px;             
    position:relative;                
}
figure:hover{
    border-color:#3e93cd;
}           
/* on reset les styles des images */
figure img, 
.edito .content figure img, 
figure a.fancy img{
    border:none;
    margin:0;
    padding:0;
    display:block;            
}
figure figcaption {             
    position:relative;        
}        
figure figcaption p {    
    position:absolute;
    padding: 5px;
    font-size:85%;                
    left:0; 
    right:0; 
    bottom:0;                               
    color:#fff;
    font-weight: bold;                
    background-color:#000;
    background-color:rgba(0,0,0,.5);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */                
    margin:0 !important;
}             
figure .author{         
    float: right;        
    color: #999999;
    font-size: 12px;        
}

/** BOITE DE SOMMAIRE DS L'EDITEUR WYSIWYG '@DS : needs some refactoring ? **/
.edito .summary{ width: 150px }
.edito .summary.left{ margin:10px 15px 10px 0 }
.edito .summary.right{ margin:10px 0 10px 15px }
.edito .summary ul{ margin:10px 0 }
.edito .summary li{ list-style-type:none; margin:0 0 5px }
.edito .summary li a{ color: #303030; }
.edito .summary li.selected a{ font-weight:bold }

/* 
- FAMILLE DE FONTS -------------------------------------------------------------
*/

.ftA{ font-family:Helvetica,Arial,sans-serif }
.ftG{ font-family:georgia,Helvetica,Arial,sans-serif }

.ftTahoma{ font-family:tahoma, arial }
.ftArial{ font-family:arial }
.ftVerdana{ font-family:verdana }

/* couleur de font par defaut */
.fcFont{ color:#333 }

/*
- FONT SIZE --------------------------------------------------------------------
*/

.ft150{ font-size:150% }
.ft130{ font-size:130% }
.ft115{ font-size:115% } /* equivaut a 16px */
.ft100{ font-size:100% }
.ft85{ font-size:85% }   /* equivaut a 12px */
.ft90{ font-size:90% }
.ft75{ font-size:75% }
.ft60{ font-size:60% }
.ft55{ font-size:55% }
.ft50{ font-size:50% }

/*
- LINE HEIGHT ------------------------------------------------------------------
*/

.lh100{ line-height:100% }
.lh120{ line-height:120% }
.lh150{ line-height:150% }
.lh170{ line-height:170% }
.lh200{ line-height:200% }
.lh220{ line-height:220% }
.lh250{ line-height:250% }

/*
- ICONES (fleches) -------------------------------------------------------------
*/

/* gestion des icones plus lien textuel */
.icoCt:hover,.icoCt:focus,.icoCt.ud{ text-decoration:none }
.icoCt.ud .icoTxt{ text-decoration:underline }
.icoCt:hover .icoTxt{ text-decoration:underline }
.icoCt.ud:hover .icoTxt{ text-decoration:none }

/*
- STYLES DE FONT ---------------------------------------------------------------
*/

.txt            { color:#333                }
.ud             { text-decoration:underline }
.ud:hover,
a:hover .ud     { text-decoration:none      }
.ftBold         { font-weight:bold          }
.ftNormal       { font-weight:normal        }
.ftItalic       { font-style:italic         }
.ftUpp,
.uppercase      { text-transform:uppercase     }
.lowercase      { text-transform:lowercase     }
.ftScaps        { font-variant:small-caps      }
.ftDelete       { text-decoration:line-through }
.ftDelete:hover { text-decoration:none         }
.hidden         { overflow: hidden             }
.nwr            { white-space:nowrap           }  
.lhNormal       { line-height:normal           }

/*
- LINKS WRAPPER -------------------------------------------------------------------
*/

/* application de .wrapper sur le a englobant */
a.wrapper,
a.wrapper:focus, 
a.wrapper:hover{ text-decoration:none; cursor:pointer; display: block;} /*  corrige un bug sur ie7 background:url(#) */

/* simulation du comportement d'un lien dans la class .wrapper */
a.wrapper .a{text-decoration: none;}
a.wrapper:hover .a{ text-decoration: underline}

/* simulation du comportement d'un lien dans la class .wrapper */
a.wrapper .a.ud, a.wrapper .a.ftUnderline, a.wrapper .a.ftUd{text-decoration: underline;}
a.wrapper .a.ud:hover, a.wrapper .a.ftUnderline:hover, a.wrapper .a.ftUd:hover,
a.wrapper .a.ud:focus, a.wrapper .a.ftUnderline:focus, a.wrapper .a.ftUd:focus{ text-decoration: none}

/*
- LISTS SKIN -------------------------------------------------------------------
*/

/* numbered list */
.edito ol li,
ol.simpleList li{list-style-type:decimal; margin-left:20px; *margin-left:25px}
/* standard list */
.edito ul li,
ul.simpleList li{list-style-type:disc; margin-left:15px;}

/*
- GESTION ALIGNEMENT -----------------------------------------------------------
*/

.txtC, .data .txtC td, .data .txtC th{ text-align:center     }
.txtL, .data .txtL td, .data .txtL th{ text-align:left       }
.txtR, .data .txtR td, .data .txtR th{ text-align:right      }
.txtJ, .data .txtJ td, .data .txtJ th{ text-align:justify    }
.txtT, .data .txtT td, .data .txtT th{ vertical-align:top    }
.txtB, .data .txtB td, .data .txtB th{ vertical-align:bottom }
.txtM, .data .txtM td, .data .txtM th{ vertical-align:middle }

/*
- IMAGE DANS LE DIAPO ----------------------------------------------------------
*/

.encartDiapo{    
    display:table;
    width:1px;    
    margin:0 auto;    
    *width:auto;
}
    .encartDiapo img{ display:block }
    .encartDiapo .icoZoom{ position:absolute; bottom:15px; left:15px }

.encartDiapo .ico_sldL,
.encartDiapo .ico_sldR{
    position:absolute;
    top:50%;    
    margin-top:-27px;
}
.encartDiapo .ico_sldL{ left:-4px }
.encartDiapo .ico_sldR{ right:-4px }

/*--------------------------------------------------------------------
	Fonts & Colors de CCM
--------------------------------------------------------------------*/

/* NE PAS UTILISER POUR AUTRES SITES QUE CCM */        
        
/*
- FONTS ------------------------------------------------------------------------
*/

/* couleurs et graisse */
.ftNone{ text-decoration:none !important }
.ftNone:hover{ text-decoration:none !important }
.ftUnderline{ text-decoration:underline !important }
.ftUnderline:hover{ text-decoration:none !important }
.ftNext{
    white-space:nowrap;
    padding-right:12px;
    background:url(../img/ico_arrowNext.gif?201012141612) right center no-repeat;
}

.ftBlack, .ftBlack a          { color:#303030 !important }
.ftGrey, .ftGrey a            { color:#666    !important }
.ftGrey2, .ftGrey2 a          { color:#999    !important }
.ftGrey3, .ftGrey3 a          { color:#ccc    !important }
.ftOrange, .ftOrange a        { color:#ff6b00 !important }
.ftRed, .ftRed a              { color:#d6071b !important }
.ftGreen, .ftGreen a          { color:#58A61E !important }
.ftPink, .ftPink a            { color:#d90b5d !important }
.ftBlue, .ftBlue a            { color:#3487BC !important }
.ftPurple, .ftPurple a        { color:#4f1c81 !important }
.ftWhite, .ftWhite a          { color:#fff    !important }
.ftBrown, .ftBrown a          { color:#9a7c63 !important }
.ftTurquoise, .ftTurquoise a  { color:#00a5b6 !important }

.ftTheme, .ftTheme a{ color:#d6071b !important }

/* taille de la police */
.ftSize9 { font-size:9px  }
.ftSize10{ font-size:10px }
.ftSize11{ font-size:11px }
.ftSize12{ font-size:12px }
.ftSize13{ font-size:13px }
.ftSize14{ font-size:14px }
.ftSize15{ font-size:15px }
.ftSize16{ font-size:16px }
.ftSize17{ font-size:17px }
.ftSize18{ font-size:18px }
.ftSize20{ font-size:20px }
.ftSize22{ font-size:22px }
.ftSize24{ font-size:24px }
.ftSize26{ font-size:26px }
.ftSize28{ font-size:28px }
.ftSize30{ font-size:30px }

/* line */
.nowrap{ white-space:nowrap !important }
.nowrapNormal{ white-space:normal !important }

/* alignement */
.ftAlignC{ text-align:center }
.ftAlignR{ text-align:right }
.ftAlignJ{ text-align:justify }