/* Fonts
     ``````````````````````````````````````````````````````````````````````````` */

    @font-face {
        font-family: 'AvenirLTStd45Book';
        src: url('../fonts/avenirltstd-book-webfont.eot');
        src: local('☺'), url('../fonts/avenirltstd-book-webfont.woff') format('woff'), url('../fonts/avenirltstd-book-webfont.ttf') format('truetype'), url('../fonts/avenirltstd-book-webfont.svg#webfontYF4mpMpy') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'AvenirLTStd85Heavy';
        src: url('../fonts/avenirltstd-heavy-webfont.eot');
        src: local('☺'), url('../fonts/avenirltstd-heavy-webfont.woff') format('woff'), url('../fonts/avenirltstd-heavy-webfont.ttf') format('truetype'), url('../fonts/avenirltstd-heavy-webfont.svg#webfontuHLUCMpJ') format('svg');
        font-weight: normal;
        font-style: normal;
    }

html {
        background: #FFFFFF url("../images/bg-home.png") repeat-x;
    }
	
body {
        background: url("../images/banniere.png") no-repeat top center;
        font-family:"Century Gothic";
        font-size: 12px;
        color: #000;
    }
	
	   h1 { font: italic 50px Georgia, "Times New Roma"; }
    h4 { font: italic 26px Georgia, "Century Gothic"; color:#AB2C79 }
    h5 { font: italic 24px Georgia, "Times New Roma"; color: #AB2C79; font-weight:bold; }
    h6 { font: italic 16px Georgia, "Times New Roma"; }
	
	    h7 { font: italic 26px Georgia, "Century Gothic"; color:#E5432E }
		
		
	a { text-decoration: none; cursor: pointer; color: #00aff0; }
    a:hover { text-decoration: underline; }

    p { line-height: 24px; }
	
	
	
	  #page {  }
        #header { width: 1000px; margin: 0 auto; position: relative; height: 400px; }
	
	
	  #header h1 { margin-left: 15px; }

            #menu-top { float: right; display: inline; margin: 13px -30px 0 0; }
            #menu-top ul li { font-family:"Century Gothic"; margin: 0 15px; font-size: 15px; float:left; display: inline;  }
            #menu-top a { color:#F39F1B; height: 40px; display: block; text-decoration: none; }
			#menu-top a:hover{ color:#000000; }
            #menu-top li.active a { color:#FFFFFF; }
            #menu-top li.active a, #menu-top li.active a { background: url("../images/menu-top-arrow.png") ; width: 115px; height: 25px; text-align:center; }

            #logo { margin: 9px 0 0 20px; float: left; display: inline; width: 400px; height: 157px; background: url("../images/logo_eclat_dafrique.png") no-repeat; text-indent: -7777em; }
            #logo a { width: 400px; height: 157px; display: block; }

			#logo1 { margin: 9px 0 0 20px; float: left; display: inline; width: 296px; height: 116px; background: url("../images/logo_eclat_dafrique1.png") no-repeat; text-indent: -7777em; }
            #logo1 a { width: 296px; height: 116px; display: block; }
			
            #text { position: absolute; top: 150px; left: 20px; width: 300px; height: 165px; background: url("../images/text-wecreateunique.png") no-repeat; text-indent: -7777em; }
			

  #center { background: #fff; overflow: hidden; padding-bottom: 45px; }
        #container { width: 1000px; margin: 0 auto; overflow: hidden; padding-top: 20px; width: 960px; }


            #container .title { border-bottom: 1px solid #F39501; margin-bottom: 10px; padding-bottom: 6px; }
			    #container .title1 { border-bottom: 1px solid #E5432E; margin-bottom: 10px; padding-bottom: 6px; }
            #container .title .circle { float: right; display: inline; margin: 13px 35px 0 0; }
            #container p { line-height: 24px; color: #3d3d3d; font-size: 16px; }
            
            #container .column-right { width: 458px; margin-right: -20px; padding-right: 10px; float: right; display: inline; }
 
            #container .column-right ul#services { height: 170px; width: 458px; }
            #container .column-right dl { overflow: hidden; }
            #container .column-right dl dt { width: 156px; float: left; display: inline; }
            #container .column-right dl dd { width: 295px; float: left; display: inline; }
            #container .column-right dl dd h4 { font-style: normal; margin-bottom: 10px; }
            #container .column-right dl dd p { font-size: 16px; margin-bottom: 19px; }


            #container .column-left { width: 450px; float: left; display: inline; overflow: hidden; }
			#container .column-left p { font-size: 18px; }
			
			  #container .column-left1 { width: 960px; float: left; display: inline; overflow: hidden;  }
			
			
    /* Underside
     ``````````````````````````````````````````````````````````````````````````` */

    .underside { background-image: url("../images/bg-2.gif"); background-repeat: repeat-x;   }
    .underside body { background-image: url("../images/bg-2.gif"); background-repeat: repeat-x;  }
    .underside #header { height: 250px!important; background: url("../images/header-bg.gif") no-repeat 50% 100%;}
    .underside #header h1 { position: absolute; top: 260px; left: 0; color: #AB2C79; font-size:30px; }
    .underside #header .button-contactus { position: absolute; top: 76px; right: -10px; color: #fff; }

    .underside .column-left { width: 520px!important; }
    .underside .fs28 { margin-bottom: 30px; color: #000; font-size: 15px!important; line-height: 20px!important; text-align:justify; }
	.underside .fs30{  color: #000; font-size: 15px!important; line-height: 40px!important; }
	
	
	
    .underside .column-right { width: 380px!important;    }
    .underside .column-right .contact { width: 300px!important;  }
    .underside .column-right .contact h5 { margin-bottom: 10px; font-style: normal; color: #000; font-size:20px; }
    .underside .column-right .contact a { text-decoration: underline; color:#000000;}

    /* section - about, software
     ``````````````````````````````````````````````````````````````````````````` */

    .about { overflow: hidden; }
    .about dt { width: 520px; float: left; display: inline; }
    .about dd { width: 520px; float: left; display: inline; }
    .about dd h4 { margin-bottom: 17px; }
    .about dd p { text-align: justify; font-size: 15px!important; margin-bottom: 15px; line-height: 20px!important;}

    .software { overflow: hidden; margin-left: -20px; margin-top: 20px; position: relative; }
    .software dt { width: 480px; float: left; display: inline; }
    .software dd { width: 500px; float: left; display: inline; }
    .software dd h4 { margin-bottom: 17px; }
    .software dd p { text-align: justify; font-size: 16px!important; margin-bottom: 15px; }

    /* section - software
     ``````````````````````````````````````````````````````````````````````````` */

    #software { overflow: hidden; padding-bottom: 0px; }
    #software .head { overflow: hidden; }
    #software #tab-spinner { position: absolute; top: 80px; left: 50px; width: 100%; }

    /* section - portfolio
     ``````````````````````````````````````````````````````````````````````````` */

    #portfolio { overflow: hidden; margin-right: -20px; margin-left: -7px; }
    #portfolio li { padding: 10px 3px 10px 10px; margin-right: -2px; float: left; display: inline; width: 230px; height: 234px; background: url("../images/portfolio-li-bg.png") no-repeat; overflow: hidden; }
    #portfolio li dl { width: 219px; margin: 0 auto; text-align: center; }
    #portfolio li dt { text-align: center; position: relative; }
    #portfolio li dt span { width: 220px; height: 140px; position: absolute; top: 1px; left:  1px; z-index: 100; }
    #portfolio li dd { margin: 5 0 0 0; }
    #portfolio li dd h6 { font-style: normal; margin-bottom: 8px; color:#F39F1B;  font-size:15px; }
    #portfolio li dd p { line-height: 16px; color: #737373; font-size: 12px; }
    #portfolio  .info { color: #F39F1B; font-size: 30px; text-align:center; margin: 25px 0 0 0; line-height: 35px; padding-bottom: 8px; }
    #portfolio  .info span { color: #F39F1B; }
    #portfolio  .info a { color: #F39F1B; border-bottom: 1px dotted #F39F1B; text-decoration: none; padding-bottom: 4px; }
    #portfolio .info a:hover { border-bottom: 0; }



    /* other
     ``````````````````````````````````````````````````````````````````````````` */

    .circle { overflow: hidden; }
    .circle li { cursor: pointer; margin-right: 2px; float: left; display: inline; height: 50px; width: 10px; background: url("../images/icon-circle.gif") no-repeat -13px 0; text-indent: -7777em;}
    .circle li.active { background-position: 0 0; }

    blockquote { background: #F39F1B;  min-height: 165px; position: relative; overflow:visible; }
    blockquote p { position: relative; width: 98%; font-size: 18px; color:#AC348E!important; position: relative; font-weight:bold; text-align:justify;  }
    blockquote p.author { margin: 20px 0 0 0; text-align: right; color: #000!important; }
    blockquote p.author span { color: #6c6c6c!important; }
    blockquote .quation { font-size: 48px; position: absolute; width: 10px; height: 10px; display: block; }
    blockquote .quation.top { top: 13px; left: -31px; }
    blockquote .quation.bottom { bottom: 00px; right: -10px; }
    blockquote .arrow { width: 37px; height: 38px; background: #000 url("../images/blockquote-arrow.gif") no-repeat; position: absolute; left: 63%; bottom: -37px;  }




    .box-1 { height: 161px; background: url("../images/box-1-bg.gif") repeat-x; }
    .box-1 p { font-size: 44px!important; font-family: 'AvenirLTStd85Heavy'; color: #000!important; margin: 66px 0 0 25px; float: left; display: block; }
    .box-1 .button-contactus-2 { float: right; display: inline; margin: 40px 30px 0 0; }

    .three-info { overflow: hidden; margin-right: -60px; margin-top: 30px; }
    .three-info li { width: 304px; float: left; display: inline; padding-right: 30px; }
    .three-info li p { font-size: 16px; }
    .three-info li h4 { font-style: normal; padding: 15px 0 15px 77px; margin-bottom: 15px; }
    .three-info li.one h4 { background: url("../images/icon-number-circle-one.gif") no-repeat; }
    .three-info li.two h4 { background: url("../images/icon-number-circle-two.gif") no-repeat; }
    .three-info li.three h4 { background: url("../images/icon-number-circle-three.gif") no-repeat; }

 /* buttons
     ``````````````````````````````````````````````````````````````````````````` */
  
	 .button-findoutmore { display: block; width: 152px; height: 33px; background: url("../images/buttons.png") no-repeat 0 -74px; text-indent: -7777em; }
    .button-findoutmore:hover { background-position: -153px -74px; }
    .button-getintouch { display: block; width: 154px; height: 36px; background: url("../images/buttons.png") no-repeat 0 -113px; text-indent: -7777em; }
    .button-getintouch:hover { background-position: -153px -113px; }
    .button-contactus { display: block; width: 206px; height: 58px; background: url("../images/buttons.png") no-repeat 0 -235px; text-indent: -7777em; }
    .button-contactus:hover { background-position: -210px -235px; }
    .button-contactus-2 { display: block; width: 316px; height: 76px; background: url("../images/buttons.png") no-repeat 0 -151px; text-indent: -7777em; }
    .button-contactus-2:hover { background-position: -320px -151px; }
	
	
#footer { width: 100%; margin: 0;  }

		 #footer .footer-top { height:5px; background-color:#F39501; }
 			#footer .footer-top p { color:#000000; margin: 0; text-align:left; }
 
  #footer-middle2 { width: 1000px; margin: 0 auto; padding-top:20px; }
  
  		#footer .col { width: 180px; float: left; display: inline;  }
        #footer .col-2 { width: 550px;  float: left; display: inline; }
		
		      #footer .col-2 a { text-decoration:none; color:#ADC555;  font-weight:bold;}
			  #footer .col-2 a:hover { border-bottom: 1px dotted #FFFFFF;}
			  
		    #footer h5 { color: #289806; margin-bottom: 14px; }
        #footer p { color: #909090; font-size: 14px; margin-bottom: 18px; }
		
		#footer ul li { margin-bottom: 7px; font-size: 16px; background: url("../images/icon-2.png") no-repeat 0 50%; padding-left: 30px;  }
        #footer ul li a { text-decoration: none; color: #909090; border-bottom: 1px dotted #5f5f5f; padding-bottom: 2px; }
        #footer ul li a:hover { border-bottom: 0px dotted #5f5f5f; }
		
		
        #footer .button-getintouch { float: left; display: inline; }
        #footer h6 { float: left; display: inline; margin: 4px 0 0 20px; }
        #footer h6 a { color: #64c232; border-bottom: 1px dotted #64c232; text-decoration: none; }
        #footer h6 a:hover { border-bottom: 0px dotted #64c232; }
		
  #footer .footer-middle {  background-color:#FFFFFF; height:200px; background: url("../images/empreinte.png") no-repeat right;  }
 #footer .footer-middle p { color:#000000; margin: 0; text-align:center; }
 
 #footer .footer-bottom { padding-top: 20px; padding-bottom:20px; background-color:#F39501; }
 #footer .footer-bottom p { color:#000000; margin: 0; text-align:center; }
 
  /* inputs, forms
     ``````````````````````````````````````````````````````````````````````````` */

    input, textarea { border: 1px solid #bababa; padding: 3px; background: #fff; font-size: 11px; font-family: inherit; color: #3d3d3d; }
    select { border: 1px solid #bababa; padding: 3px 2px; background: #f6f6f6; font-size: 11px; font-family: inherit; color: #3d3d3d; }

    input[type="checkbox"], input[type="radio"] { width: 20px; border: 0; padding: 0; margin: 0; background: none; }

    .button { border: 0; padding: 0!important; background: none; width: auto!important; height: auto!important; }
    
    form ul { overflow: hidden; margin-left: 0px; margin-right: -100px; margin-bottom: 10px; }
    form ul li { overflow: hidden;  }
    form ul li span { color: #ff6600; vertical-align: top; display: block; float: left; margin: 0 5px 0 00px }
    form ul li input { float: left; padding: 5px 6px 5px 6px; width: 235px; border: 1px solid #b1b1b1; font-size: 14px; margin-right: 20px; }
    form ul li textarea { padding: 4px 10px 4px 5px; width: 500px; height: 200px; border: 1px solid #b1b1b1; font-size: 14px; }
    form ul li texteara:focus { border-color: #0b8cb2; }

    .noselected { border: 1px solid #b1b1b1; }
    .selected { border: 1px solid #0b8cb2; }

    form ul li.file { width: 535px; background: #efefef; padding: 12px 10px 12px 10px; margin: 8px 0 8px 0px; }
    form ul li.file label { display: block; font-size: 12px; margin-bottom: 4px; }
    form ul li.file label span { color: #b4acc4; }
    form ul li.file input { width: 250px!important; }

    form input[type="image"] { margin-top: 20px; }

    form button.send { cursor: pointer; border: 0; padding: 0; margin: 0; text-indent: -7777em; width: 135px; height: 57px; background: url("../images/buttons.png") 0 -302px;  }
    form button.send:hover { background: url("../images/buttons.png") -136px -302px;  }

    .errors { font-size: 18px; overflow: hidden; padding-left: 0px; margin: 20px 0 10px 0px; }
    .errors li { margin-bottom: 3px; color: #ff6600; text-align: left; }

    .error.ok { background: url("../images/icon-error-0.gif") no-repeat 0 50%; font-size: 18px; color: #11B000!important; padding: 5px 0 5px 30px; margin-bottom: 15px; }