@import 'gotham.css';
/*
      Created by Keith Donegan of Code-Sucks.com
	  
	  E-Mail: Keithdonegan@gmail.com
	  
	  You can do whatever you want with these layouts,
	  but it would be greatly appreciated if you gave a link
	  back to http://www.code-sucks.com
	  
*/



* { padding: 0; margin: 0; }


body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #FFFFFF url(../images/lg-fp_r1_c1.jpg) repeat-x;
}


.lien {
color:#0270A0;
text-decoration:none;
}

.lien:hover {
color:#FF33CC ;
text-decoration: underline;
}


h3
{
font-family: "Gotham Black", "Gotham Condensed", "Gotham Condensed Book", "Gotham Condensed Light", ,"Gotham HTF Light";
text-align: center;
font-size:18px;
color:#0270A0;
margin:5px;
padding: 5px;
}

#wrapper { 
 margin: 0 auto;
 width: 922px;

}

#header {
 color: #333;
 width: 922px;
 float: left;
 height: 132px;
 margin: 5px;
 background: url(../images/lg-fp_r1_c2.jpg) no-repeat;
 margin-top: 0px;
}

 .sauvons_la_cote_divoire a
{
 color: #333;
 width: 276px;
 float: right;
 height: 52px;
 margin-top: -80px;
 background: url(../images/Sauvons.jpg) no-repeat;
 position: relative;
}

.sauvons_la_cote_divoire a:hover
{
 color: #333;
 width: 276px;
 float: right;
 height: 52px;
 margin-top: -80px;
 background: url(../images/Sauvons_hover.jpg) no-repeat;
 position: relative;
}

#container {
border:  #CCCCCC solid 1px;
background: #E9E9E9;
width: 922px;
float: left;
}

#navigation {
 float: left;
 width: 900px;
 color: #333;
 padding: 10px;
 margin: 0px 0px 5px 0px;
 background:#FFFFFF;
}

#leftcolumn { 
 color: #333;
 margin: 5px 0px 0px 0px;
 padding: 10px;
 width: 582px;
 float: left;
 line-height: 1.5em;
}
#rightcolumn { 
 float: right;
 color: #333;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 width: 250px;
 display: inline;
 }



/* Reseaux sociaux  from OBAMA */
#stay-connected-tout{ background:#F5F7F9 url(../images/reseau_sociaux.png) repeat-x;padding:15px 0 0 0;margin:0; height: 142px;}

#stay-connected-tout h3
{
font-family: "Gotham Black", "Gotham Condensed", "Gotham Condensed Book", "Gotham Condensed Light", "Gotham HTF Light";
text-align: center;
font-size:18px;
color:#0270A0;
}

.tout{border:4px solid #e1e8ee;padding:13px 15px 2px 15px;margin:0 0 15px 0;}

#stay-connected-tout h3{height:36px;}

#stay-connected-tout ul{width:108px;float:left;margin:0;padding:0; margin-top: 15px; padding-top: 15px; }
#stay-connected-tout li{width:40%;float:left;list-style:none;padding-left:14px;margin:0 0 12px 0;font-size:.917em;letter-spacing:0.03em;font-weight:bold;}
#stay-connected-tout li a{ color:#0270A0; padding:4px 0 4px 29px;float:left;}#stay-connected-tout li a:hover{color: #FF33CC /* #336699;*/ }
#stay-connected-tout li.facebook a{background:url(../images/icons-get-connected.gif) 0px 0px no-repeat;}
#stay-connected-tout li.facebook a:hover{background:url(../images/icons-get-connected.gif) 0px -23px no-repeat;}
#stay-connected-tout li.twitter a{background:url(../images/icons-get-connected.gif) -115px 0px no-repeat;}
#stay-connected-tout li.twitter a:hover{background:url(../images/icons-get-connected.gif) -115px -23px no-repeat;}
#stay-connected-tout li.flickr a{background:url(../images/icons-get-connected.gif) -240px 0px no-repeat;}
#stay-connected-tout li.flickr a:hover{background:url(../images/icons-get-connected.gif) -240px -23px no-repeat;}
#stay-connected-tout li.myspace a{background:url(../images/icons-get-connected.gif) -381px 0px no-repeat;}#stay-connected-tout li.myspace a:hover{background:url(../images/icons-get-connected.gif) -381px -23px no-repeat;}#stay-connected-tout li.youtube a{background:url(../images/icons-get-connected.gif) -550px 0px no-repeat;margin-left:12px;}#stay-connected-tout li.youtube a:hover{background:url(../images/icons-get-connected.gif) -551px -23px no-repeat;}#stay-connected-tout li.dailymation a{background:url(../images/icons-get-connected.gif) -733px 0px no-repeat;margin-left:12px;}#stay-connected-tout li.dailymation a:hover{background:url(../images/icons-get-connected.gif) -733px -23px no-repeat;}#stay-connected-tout li.viadeo a{background:url(../images/icons-get-connected.gif) -875px 0px no-repeat;margin-left:12px;}#stay-connected-tout li.viadeo a:hover{background:url(../images/icons-get-connected.gif) -875px -23px no-repeat;}#stay-connected-tout li.linkedin a{background:url(../images/icons-get-connected.gif) -1017px 0px no-repeat;margin-left:12px;}#stay-connected-tout li.linkedin a:hover{background:url(../images/icons-get-connected.gif) -1017px -23px no-repeat;}
/* */

#footer { 
 width: 922px;
 clear: both;
 text-align: center;
 padding: 10px 0px 50px 20px;
 color:#999999;
 margin: 0 auto;
   }

#footer .copyrigth{
color:#999999;
font-size:8px;
}   
 
   
#footer a{
color:#0270A0;
}

#footer a:hover {
color:#FF5FD7;
}

#footer ul{
padding-left: 0;
margin: 0;
float: left;
font: bold 80% Verdana;
margin-left: -5px;
}

* html #footer ul{ /*IE only rule. Add extra margin-bottom*/
margin-bottom: 1em;
}

#footer ul li{
display: inline;
}


#footer ul li a, #footer ul li span{
float: left;
color:#0270A0;
font-weight: bold;
padding: 7px 13px 8px 6px;
text-decoration: none;

}

#footer ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}

/* autre balise  */

.pensee_du_jour {
width: 100%;
margin-left: 5px;
padding-top:25px;
}

.pensee_du_jour .gbagbo_photo{
width: 137px;
height:98px;
background: url(../images/Laurent_gbagbo.jpg) no-repeat;
float:left;
}

.pensee_du_jour .pense{
width: 437px;
float:left;
background:#E9E9E9;
color:#343434;
padding: 5px;
}


.pensee_du_jour .date{
color:#343434;
margin-top: 40px;
padding-top: 40px;
padding-left: 70px;
margin-left: 70px;
font-style:italic;
text-align: left
}



.pensee_intox{
width: 100%;
height: 195px;
margin-left: 5px;
}

.pensee_intox ul{
text-align: right;
list-style:none;
float:left;
}

.pensee_intox ul li{
margin-left: 22px;
margin-right: 22px;
width: 250px;
float:left;
text-align: left;
}

.pensee_intox ul li a{
font-size:13px;
color:#0270A0;
text-decoration: none;
text-align: left;
}

.pensee_intox ul li a:hover {
color:#FF5FD7;
}

.commentbox{
background-color: #FFD6F5;
width: 480px;
padding: 10px;
margin-top: 15px;
}

.commentfooter{
background: url(../images/arrow.gif) 20px 0 no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/
padding-left: 65px;
margin-left: 65px;
padding-top: 1px;
margin-bottom: 2em;
font-size: 90%;
color: #0270A0;
font-weight:bold;
}

.show
{
color:#0270A0;
font-weight:bold;
}

#actualite_tire a
{
font-family: "Gotham Black";
text-align:justify;
font-size:18px;
margin:5px;
color:#0270A0;
text-transform:uppercase;
text-decoration:none;
}

#actualite_tire a:hover
{
color:#FF5FD7;
}

.auteur
{
margin-left: 5px;
font-style:italic;
}

#lireplus a
{
font-family: "Gotham Black";
font-size:14px;
margin:5px;
color:#0270A0;
margin-top: 10px;
padding-top: 10px;
margin: 5px;
text-decoration:none;
}

.pagination ul li
{
float:left;
list-style-type:none;
}

.pagination ul li a
{
font-family: "Gotham Black";
float: left;
color:#0270A0;
font-weight: bold;
padding: 3px;
margin: 2px;
text-decoration: none;
background:#FFFFFF; border: solid 1px #CCCCCC;
}

.pagination ul li a
{
font-family: "Gotham Black";
float: left;
color:#0270A0;
font-weight: bold;
padding: 3px;
margin: 2px;
text-decoration: none;
background:#FFFFFF; border: solid 1px #CCCCCC;
}

.pagination .active 
{
font-family: "Gotham Black";
float: left;
color:#FF33CC;
font-weight: bold;
padding: 3px;
margin: 2px;
text-decoration: none;
background:#FFFFFF; border: solid 1px #CCCCCC;
}

#lireplus a:hover
{
color:#FF5FD7;
}

#shiftcontainer{
position: relative;
left: 5px; /*Number should match -left shadow depth below*/
top: 5px; /*Number should match -top shadow depth below*/
float:left;
line-height: 1.5em;
}

#shadowcontainer{
width: 620px; /* container width*/

}

#shadowcontainer #innerdiv{
/* Add container height here if desired */
background-color: white;
padding: 15px;
position: relative;
left: -5px; /*shadow depth*/
top: -5px; /*shadow depth*/
border:  #EBEBEB solid 1px;

}



#shadowcontainer #innerdiv #g160{ position:relative; height:480px; float:left; width:275px; margin:5px;    } 
#shadowcontainer #innerdiv #clear{height:10px; position:relative; clear:left;}

/* shadow */
.shadow{
box-shadow: 5px 5px 8px #D1D1D1;
-webkit-box-shadow: 5px 5px 8px #D1D1D1;
-moz-box-shadow: 5px 5px 8px #D1D1D1;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#D1D1D1, offX=5, offY=5, positive=true);}

/* DIGIT */

#countdown_dashboard {
	height: 83px;
	margin: 0 auto;
	margin-top: -10px;
	width: 270px;
	}

.dashjour {
	height: 83px;
	text-align:center;
	margin-left: 60px;
	font-size: 85px;
	font-weight: bold;
	float: left;
	text-align: center;
	font-family: "Gotham Black",Times,Georgia,"Arial Black", "Times New Roman", Times, serif;
	position: relative;
	color:#FFFFFF;
	vertical-align:middle;
	}


.dashjour .digit {
	font-size: 85px;
	font-weight: bold;
	float: left;
	text-align: center;
	font-family: "Gotham Black",Georgia, "Times New Roman", Times, serif;
	position: relative;
	color:#FFFFFF;
	height: 83px;
	vertical-align:middle;
}

.dashjour_title {
	position: absolute;
	display: block;
	bottom: 0px;
	right: 6px;
	font-size: 12pt;
	color: #FFFFFF; 
	font-weight:bold;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.dash {
	width: 110px;
	height: 63px;
	background: transparent url('../images/dash.png') 0 0 no-repeat;
	float: left;
	margin-left: 30px;
	position: relative;
	
	}

.dash .digit {
	font-size: 100pt;
	font-weight: bold;
	float: left;
	width: 55px;
	text-align: center;
	font-family:"Gotham Black";
	position: relative;
}


/* document css */
.ecran_vieo{
	width		: 240px; /*width of menu*/
	background      : #FFF  url(../lib-img/ajax-loader.gif) center center no-repeat;
	border          : 1px #d8d8d8 solid;
	padding         : 4px;
	margin          : 30px auto;
	-webkit-box-shadow  : 0 0 15px rgba(0, 0, 0, .4); 
	-moz-box-shadow     : 0 0 15px rgba(0, 0, 0, .4); 
	box-shadow          : 0 0 15px rgba(0, 0, 0, .4);
}

.ecran_detail{
	width		: 425px; /*width of menu*/
	border          : 1px #d8d8d8 solid;
	padding         : 4px;
	margin          : 30px auto;
	-webkit-box-shadow  : 0 0 15px rgba(0, 0, 0, .4); 
	-moz-box-shadow     : 0 0 15px rgba(0, 0, 0, .4); 
	box-shadow          : 0 0 15px rgba(0, 0, 0, .4);
	
}


.arrowlistmenu{
	width		: 240px; /*width of menu*/
	background      : #FFF  url(../lib-img/ajax-loader.gif) center center no-repeat;
	border          : 1px #d8d8d8 solid;
	padding         : 4px;
	margin          : 30px auto;
	-webkit-box-shadow  : 0 0 15px rgba(0, 0, 0, .4); 
	-moz-box-shadow     : 0 0 15px rgba(0, 0, 0, .4); 
	box-shadow          : 0 0 15px rgba(0, 0, 0, .4);
}

.arrowlistmenu ul{
list-style-type: none;
margin: 2px;
padding: 2px;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color:#0270A0;
background: url(../images/document.gif) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 4px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
font-size: 90%;
text-align:left;
}

.arrowlistmenu ul li a:visited{
color:#0270A0;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #FF33CC;
}

/* --------     titre  ---------------   */
#pagetitle h1 { font-family: "Gotham Black", "Gotham Condensed", "Gotham Condensed Book", "Gotham Condensed Light", "Gotham HTF Light"; color:#0270A0; clear:left; text-indent:15px; font-size:120%; font-weight:bold; }

#videotitre {  color:#0270A0; text-decoration:none; }
#videotitre:hover {  color:#FF33CC; text-decoration: underline; }

#videoimg img { margin:3px; padding:3px;  opacity:1;filter:alpha(opacity=100); }
#videoimg img:hover {  opacity:0.3;filter:alpha(opacity=30); }


.print_and_overs
{
border-top:  #E6E6E6 solid 1px;
border-bottom: #E6E6E6 solid 1px;
margin: 5px;
height: 32px;
margin-bottom: 25px;
}

.print_and_overs ul li 
{
list-style-type:none;
float:left;
margin: 2px;
padding: 2px;
}

.print_and_overs ul li a
{
list-style-type:none;
float:left;
margin: 2px;
padding: 2px;
}

/* ######### CSS for PHP Photo Album itself ######### */
#videotheque 
{
margin-left: 70px;
font-size: 11px;
}
.photodiv{ /*CSS for DIV containing each image*/
float: left;
margin-right: 10px;
margin-bottom: 10px;
}

.photodiv img{ /*CSS for each image tag*/
border: 0;
/*width: 200px;
height: 106px;*/
cursor: hand;
cursor: pointer;
}


.president ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 100%; /* Width of Menu Items */

}

#president_content{
/* Add container height here if desired */
padding: 15px;
margin: 15px;
}

	
	
.president ol li {
padding-bottom: 2px;
padding-top: 2px;
list-style-image:url(../images/arrow-list.gif);
text-transform:uppercase;
}


.president ul li {
list-style-type:disc;
padding-left: 10px;
margin-left: 10px;
list-style: none;
text-transform: lowercase;
}	

.president ol li a {
color:#0270A0;
font-size:16px;
font-weight:bold;

}

/* photo */
.mosaiqy1 * {
    margin      : 0;
    padding     : 0;
}


.mosaiqy1 ul {
    list-style      : none;
    padding         : 0;
    margin          : 0;    
    position        : relative;
    z-index         : 1;
    overflow        : hidden;
}

.mosaiqy1 span {
color:#0270A0;
}


.mosaiqy1 li  {
	float		: left;
	position	: relative;
	z-index		: 1;
}


.mosaiqy1 li:hover {
    z-index             : 20;    
}


.mosaiqy1 img {
    display         : block;
    border          : 0;
	opacity:1;filter:alpha(opacity=100);
}

.mosaiqy1 img:hover{
opacity:0.3;filter:alpha(opacity=30);
}

.mosaiqy1 li {
      -moz-transition-property              : all;
      -moz-transition-timing-function       : ease-out;
      -moz-transition-delay                 : 0s;
      
      -o-transition-property                : all;
      -o-transition-timing-function         : ease-out;
      -o-transition-delay                   : 0s;
      
      -webkit-transition-property           : all;
      -webkit-transition-timing-function    : ease-out;
      -webkit-transition-delay              : 0s;
      
      transition-property                   : all;
      transition-timing-function            : ease-out;
      transition-delay                      : 0s;
}

.mosaiqy1  {
    border          : 1px #d8d8d8 solid;
    padding         : 4px;
    margin          : 30px auto;
    -webkit-box-shadow  : 0 0 15px rgba(0, 0, 0, .4); 
	-moz-box-shadow     : 0 0 15px rgba(0, 0, 0, .4); 
	box-shadow          : 0 0 15px rgba(0, 0, 0, .4);
	background: #FFFFFF;
}

.mosaiqy1 li,
.mosaiqy1 img {
    width           : 120px;
    height          : 90px;
}

.mosaiqy li a {
    display         : block;
    height          : 100%;
    width           : 100%;
    text-decoration : none;
}

/*  Message d'erreur */
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('../images/info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('../images/success.png');
}
.warning {
color: #FF00FF;
background-color: #FFD6F5;
background-image: url('../images/warning.png');
}
.error {
color: #D8000C;
background-color:  #FF33CC;
background-image: url('../images/error.png');
}