/* custom.css */

/* STYLE CHB : background and ink
------------------------------------------------------------------------------*/
.bg_jaune {
	background-color: #ffee74;
}
.bg_rouge {
	background-color: #aa0000;
}
.bg_vert {
	background-color: #ddffdd;
}
.bg_blanc {
	background-color: white;
}
.bg_bleu {
	background-color: #cceeff;
}
.bg_rose {
	background-color: #ffcccc;
}
.bg_gris {
	background-color: #eaeaea;
}
.encre_rouge, .ink_rouge {
	color: #aa0000;
}
.encre_grise, .ink_gray {
	color: gray;
}

/* OMBRAGE
------------------------------------------------------------------------------*/
.shadow {
  box-shadow: 5px 5px 5px #999;
}

/* STYLE CHB : Textes
------------------------------------------------------------------------------*/
.texte_center {
	text-align: center;
}
.gris {
  color: gray;
}

/* STYLE CHB : bande en marge droite
------------------------------------------------------------------------------*/
.bande-rouge {
	padding-left: 12px; 
	border-left: 12px solid #AA0000; 
	margin-left: 32px;
}
.bande_rouge {
	border-left: 12px solid #000; 
}
/* BOX TEXT WITH IMAGE FLOAT LEFT
------------------------------------------------------------------------------*/
/* STYLE CHB : BOITES */
/* use with this code for sample :
	<div class="boite_color">
		<img src="images.png" alt="image" align="right" title="image" />
		<div>Text of content</div>
	</div>
*/
.boite-jaune, 
.boite-bleue,
.boite-rose,
.boite-violette {
	padding: 0.5em;
	text-align: justify;
	margin: 0.5em 0;
}

.boite-jaune {
	background-color: #FFEE74;
	color: #AA0000;
	border:1px solid #AA0000;
}
.boite-bleue {
	background-color: #CCEEFF;
	color: #1E90FF;
	border: 1px solid #1E90FF;
}
.boite-shadow {
	box-shadow: 4px 4px 8px gray;
}

/* STYLE CHB : BOITES */
/* use with this code for sample :
	<div class="boite_color">
		<img src="images.png" alt="image" align="right" title="image" />
		<div>Text of content</div>
	</div>
*/
/* STYLE DE REPERAGE BALISES OBSOLETTES */
.boite_bleue, .boite_bleu, .boite_blue,
.boite_jaune, .boite_grise, .boite_rose, .boite_verte, .boite_violette {
	background-color: #F5DEB3;
	color: Peru;
	border:1px solid #D2B48C;
	padding: 0.4em;
	text-align: justify;
	margin: 0.4em 0;
}
.boite_bleue h3, .boite_bleue h4, .boite_bleue h5,
.boite_bleu h3, .boite_bleu h4, .boite_bleu h5,
.boite_blue h3, .boite_blue h4, .boite_blue h5,
.boite_grise h3, .boite_grise h4, .boite_grise h5, .boite_grise h6,
.boite_jaune h3, .boite_jaune h4, .boite_jaune h5, .boite_jaune h6,
.boite_rose h3, .boite_rose h4, .boite_rose h5, .boite_rose h6, 
.boite_verte h3, .boite_verte h4, .boite_verte h5, .boite_verte h6,
.boite_violette h3, .boite_violette h4, .boite_violette h5, .boite_violette h6 {
  color: Peru;
	padding: 0;
}
.boite_shadow {
	box-shadow: 4px 4px 8px gray;
}

/* BOX STYLES */
.boxtoon-txt h5,
.boxtoon-txt p {
  padding:0; 
  border: none;
  margin:0;
}

/* Common property */
.boxtoon-bleu, .boxtoon-jaune {
	padding: 0.4em;
	text-align: justify;
	margin: 0.4em 0;
}

/* Color property */
.boxtoon-bleu {
  background-color: #cceeff;
  color: blue;
  border: 1px solid blue;
}
.boxtoon-jaune {
	background-color: #FFEE74;
	color: #AA0000;
	border:1px solid #AA0000;
}
.boxtoon-grise {
	background-color: #DCDCDC;
	color: Gray;
	border: 1px solid Gray;
}
.boite-rose, 
.boxtoon-rose {
	background-color: #ffcccc;
	color: #aa0000;
	border: 1px solid #aa0000;
}
.boxtoon-verte {
	background-color: #ccff99;
	color: green;
	border: 1px solid green;
}
.boite-violette,
.boxtoon-violette {
	background-color: #d8bfd8;
	color: #4b0082;
	border:1px solid #4b0082;
}

/* h3 Color */
.boite-bleue h5, .boite-bleue h3, 
.boxtoon-bleu h5 {
	color: blue;
	padding: 0;
}
.boxtoon-gris h5 {
	color: black;
	padding: 0;
}
.boxtoon-jaune h5 {
	color: #aa0000;
	padding: 0;
}
.boite-rose h5, .boite-rose h3, 
.boxtoon-rose h5 {
	color: #aa0000;
	padding: 0;
}
.boxtoon-verte h5 {
	color: green;
	padding: 0;
}
.boite-violette h5, .boite-violette h3, 
.boxtoon-violette h5 {
	color: #4b0082;
	padding: 0;
}
.boxtoon-box div p {
	padding: 0;	
}

/* TABLE : Trombinoscope
------------------------------------------------------------------------------*/
div#programme-tv {
  text-align: center;
  max-width: 132px;
  margin: 0 auto;
}
div#programme-tv img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* TABLE : Trombinoscope
------------------------------------------------------------------------------*/
/* Trombinoscope */
table.trombinoscope {
	margin: 0 auto;
	border-spacing: 3px;
	border-collapse: separate;
	}
table.trombinoscope th {
	background-color: #aa0000;
	color: white;
	font-size: 0.9em;
	font-weight: bold;
	text-align: center;
	padding: 3px;
	border: 1px solid #AA0000;
}
table.trombinoscope th.right {
	text-align: right;
}
table.trombinoscope th.left {
	text-align: left;
}
table.trombinoscope td {
	color: #aa0000;
	font-size: 0.8em;
	font-weight: bold;
	text-align: center;
	padding-bottom: 6px;
	border: 1px solid #AA0000;
	width: 105px; /* 8 + 89 + 8 */
}
table.trombinoscope td img {
	margin: 0.5em auto;
}

/* Classement */
table.classement {
  background: #FFF;
  font-size: 12px;
  margin: 0.5em auto;
}
table.classement th, table.classement td {
  padding: 3px;
  border: 1px solid #AA0000;
}
table.classement th.title {
  text-align: center;
  letter-spacing: 1px;
  font-weight: bold;
  padding: 6px 3px;
}
table.classement th {
  background: #AA0000;
  color: #FFF;
  font-weight: normal;
  text-align: right;
}
table.classement td {
  text-align: right;
}
table.classement th.team,
table.classement td.team {
  text-align: left;
}
table.classement tr.param th {
  border: 1px solid #AA0000;
  border-right: 1px solid #FFF;
}
table.classement tr.param th:last-child {
  border-right: 1px solid #AA0000;
}
table.classement th.title:last-child {
  border-bottom: 1px solid #FFF;
}

table.classement th.left,
table.classement td.left {
  text-align: left;
}
table.classement th.right,
table.classement td.right {
  text-align: right;
}
table.classement th.center,
table.classement td.center {
  text-align: center;
}

/* Table scores */
table.scores {
  background: #FFF;
  font-size: 12px;
  margin: 0.5em auto;
}
table.scores th, table.scores td {
  padding: 0.5em;
  border: 1px solid #AA0000;
}
table.scores th {
  background: #AA0000;
  color: #FFF;
  font-weight: normal;
  text-align: center;
  border-bottom: 1px solid #FFF;
  border-right: 1px solid #FFF;
}
table.scores th:last-child {
  border-right: 1px solid #AA0000;
}
table.scores td {
  text-align: center;
}

/* Table Entainement */
table.chb {
  background: #FFF;
  margin: 1em auto;
}
table.chb tr {}
table.chb th {
  background: #AA0000;
  color: #FFF;
  font-weight: normal;
  padding: 0.25em;
  border: 1px solid #AA0000;
  border-right: 1px solid #FFF;
}
table.chb th:last-child {
  border-right: 1px solid #AA0000;
}
table.chb td {
  padding: 0.25em;
  border: 1px solid #AA0000;
  vertical-align: top;
}

table.chb th.left,
table.chb td.left {
  text-align: left;
}
table.chb th.right,
table.chb td.right {
  text-align: right;
}
table.chb th.center,
table.chb td.center {
  text-align: center;
}
table.chb th.middle,
table.chb td.middle {
  vertical-align: middle;
}
table.chb th.top,
table.chb td.top {
  vertical-align: top;
}
table.chb th.bottom,
table.chb td.bottom {
  vertical-align: bottom;
}

/* Styles pour diagramme batons horizontaux
=================================================== */
table.effectiftable {
}
table.effectiftable th { 
	text-align: center; 
}
table.effectiftable td { 
	text-align: left; 
}
table.effectiftable td div { 
	background-color: #FFEE74; 
	border: 1px solid #AA0000; 
	color: #AA0000; 
	font-weight: bold; 
	text-align: right; 
	padding: 3px;
}

/* INTERVIEW
=================================================== */
dl.interview {
	border: 1px solid silver;
	margin: 12px 0;
	padding: 12px;
	background-color: #EEE8AA;
}
/* journalist - Question */
dl.interview dt {	
	color: #AA0000;
	text-align: justify;
}
/* interviewed - answer */
dl.interview dd {	
	color: black;
	padding-bottom: 6px;
	text-align: justify;
}
dl.interview div.identity-right {
}
dl.interview div.identity-left {
	margin-left: 6px;
}
/* BOX TEXT WITH IMAGE FLOT LEFT
=================================================== */
.lettre {
	background-color: #F5F5F5;
	padding: 12px 24px 12px 64px; 
	border:1px solid gray; 
	margin: 12px;
	-moz-box-shadow: 4px 4px 8px gray;
	-webkit-box-shadow: 4px 4px 8px gray;
	box-shadow: 4px 4px 8px gray;
}
.courrier {
	background-color: #F5F5F5;
	padding: 12px 24px; 
	border:1px solid gray; 
	margin: 12px;
	-moz-box-shadow: 4px 4px 8px gray;
	-webkit-box-shadow: 4px 4px 8px gray;
	box-shadow: 4px 4px 8px gray;
}
.courrier div.courrier-texte {
	padding-left: 40px;	
}

/* STYLE CHB : OMBRAGE PHOTO IDENTITY
=================================================== */
.identity_shadow {
	background-color: #F5F5F5;
	text-align: center;
	padding-bottom: 4px;
	border: 1px solid silver;	
	box-shadow: 2px 4px 10px gray;

}

div.identity_shadow {
	font-size: 0.8em;
	color: #AA0000;
}
.identity_shadow td {
	font-size: 0.8em;
	color: #AA0000;
}
.identity_shadow img {	
	border: 1px solid silver;
	margin: 6px 6px 2px 6px;
}
.identity_right {
	margin: 12px 0 12px 12px;
	float: right;
}
.identity_left {
	margin: 12px 12px 12px 0;
	float: left;
}
.identity_center {
	margin: 12px auto;
}

/* STYLE CHB : lettrine
=================================================== */
p.lettrine {
	padding-bottom: 6px;	
	text-align: justify;
	margin-left: 40px;
}
p.lettrine:first-letter {
	color: #AA0000;
	font-size: 2.6em;
	font-weight: bold;
	font-family: "Courier New", Courier, monospace;
	float: left;
	padding-top: 6px;
	padding-right: 8px;
}

/* PHOTO
------------------------------------------------------------------------------*/	
/* Common property */
.photo-center,
.photo-right, 
.photo-left {
  background: #FFF;
  border: 0.875em solid #FFF;
  display: block;
}
.photo-center {  
  margin: 1.5em auto 1.5em auto;
}
.photo-right {
  margin: 1em 0 1em 1em;
  float: right;
}
.photo-left {
  margin: 1em 1em 1em 0;
  float: left;
}
/* Shadow */
.photo-shadow {
  box-shadow: 2px 4px 10px gray;
}
/* Legend */
.photo-center p,
.photo-right p, 
.photo-left p {
  color: #743000;
  font-size: 0.857em;
  text-align: center;
  margin: 0.25em 0 0 0;
}
/* image responsive */
.photo-center img,
.photo-right img, 
.photo-left img {
  width: 100%;
  height: auto;
  }
/* photo width */
.photo-160 { width: 160px; }
.photo-180 { width: 180px; }
.photo-200 { width: 200px; }
.photo-220 { width: 220px; }
.photo-240 { width: 240px; }
.photo-260 { width: 260px; }
.photo-280 { width: 280px; }
.photo-300 { width: 300px; }
.photo-320 { width: 320px; }
.photo-340 { width: 340px; }
.photo-360 { width: 360px; }
.photo-380 { width: 380px; }
.photo-400 { width: 400px; }
.photo-420 { width: 420px; }
.photo-440 { width: 440px; }
.photo-460 { width: 460px; }
.photo-480 { width: 480px; }
.photo-500 { width: 500px; }
.photo-520 { width: 520px; }
.photo-540 { width: 540px; }
.photo-560 { width: 560px; }
.photo-580 { width: 580px; }
.photo-600 { width: 600px; }

/* IMAGES : Icons
------------------------------------------------------------------------------*/
/* Position image */
.image-center {
  margin: 0 auto;
  display: block;
}
.image-right { 
  margin-left: 1em; 
  display: inline-block;
  float: right;
}
.image-left { 
  margin-right: 1em;
  display: inline-block;
  float: left;
}
/* image responsive */
.image-center img,
.image-right img,
.image-left img {
  width: 100%;
  height: auto;
}
/* Dimensions images */
.image-016 { width: 16px; }
.image-024 { width: 24px; }
.image-032 { width: 32px; }
.image-040 { width: 40px; }
.image-048 { width: 48px; }
.image-056 { width: 56px; }
.image-064 { width: 64px; }
.image-072 { width: 72px; }
.image-080 { width: 80px; }
.image-088 { width: 88px; }
.image-096 { width: 96px; }
.image-104 { width: 104px; }
.image-112 { width: 112px; }
.image-120 { width: 120px; }
.image-128 { width: 128px; }
.image-136 { width: 136px; }
.image-144 { width: 144px; }
.image-152 { width: 152px; }
.image-160 { width: 160px; }
.image-168 { width: 168px; }
.image-176 { width: 176px; }
.image-184 { width: 184px; }
.image-192 { width: 192px; }
.image-200 { width: 200px; }
.image-208 { width: 208px; }
.image-216 { width: 216px; }
.image-224 { width: 224px; }
.image-232 { width: 232px; }
.image-240 { width: 240px; }
.image-248 { width: 248px; }
.image-256 { width: 256px; }