/* * * * * * * * * * * * */
/*                       */
/*  CSS stylesheet for   */
/*     www.keleos.fr     */
/*                       */
/*  (C)2007-2008 Keleos  */
/*  Released under GPL2  */
/*                       */
/*   :: Main sheet ::    */
/*                       */
/*        Colors         */
/*        9faa00         */
/*        752641         */
/*        e47f00         */
/*                       */
/* Works perfectly with  */
/* FF 2+, Konqueror 3.5+ */
/*     and Opera 9+      */
/*                       */
/* Some hacks are there  */
/* just for IE7 and IE6  */
/*                       */
/* * * * * * * * * * * * */



/**************/
/* Main parts */
/**************/

html{
  font-weight: lighter;
  font-family: verdana, arial, sans;
  background: #fff url(img/fond.png) 0 8em no-repeat;
}

body{
  margin: 0 0 1em 4em;
  border: 0;
  padding: 0 4em 0 0;
}

html>body{ /* Invisible for IE6 */
  background: url(img/fond-bottom.png) 100% 95% no-repeat;
}

#body{
  /* IE6 background */
  background: #fff url(img/fond-clair.png) -4em 8em no-repeat;

  color: #333;

  padding: .25em 5px 0 0;
  border-left: 2px solid #eee;
  border-right: 2px solid #eee;
  border-bottom: 2px solid #eee;
}

body>#body{ /* Invisible for IE6 */
  background: url(img/lignes.png);
}



/*********/
/* Panel */
/*********/

#main ul.panel li{
  float: left;
  display: inline;

  background-image: none;
  text-align: center;
}

#main ul.panel li ul{
  width: 100%;
  list-style-type: none;
  list-style-image: none;

  padding: 0;
  margin: 0;
}

#main ul.panel li ul li{
  display: inline;

  background-image: none;

  padding: 0;
  margin: 0;
}

#main ul.panel li ul li a{
  display: inline;
  float: left;
  text-align: center;
  width: 100px;
  height: 3.3em;

  background-position: center 10px;
  background-repeat: no-repeat;

  padding: 95px .5em .5em;
  margin: .5em;
}

#main ul.panel li ul li a:hover{
  background-color: #eee;
}



/*********/
/* Icons */
/*********/

.inter-new{
  background-image: url(/img/icons/inter-new.png);
}

.inter-list{
  background-image: url(/img/icons/inter-list.png);
}

.services-graph-new{
  background-image: url(/img/icons/services-graph-new.png);
}

.services-graph-list{
  background-image: url(/img/icons/services-graph-list.png);
}

.services-facture{
  background-image: url(/img/icons/services-facture.png);
}

.transactions{
  background-image: url(/img/icons/transactions.png);
}

.transactions-achat{
  background-image: url(/img/icons/transactions-achat.png);
}

.transactions-vente{
  background-image: url(/img/icons/transactions-vente.png);
}

.user-info{
  background-image: url(/img/icons/user-info.png);
}

.user-list{
  background-image: url(/img/icons/user-list.png);
}

.server-list{
  background-image: url(/img/icons/vitale.png);
}

.agent-list{
  background-image: url(/img/icons/agent-list.png);
}

.messages{
  background-image: url(/img/icons/messages.png);
}

.admin-messages{
  background-image: url(/img/icons/admin-messages.png);
}

.operation-list{
  background-image: url(/img/icons/services-facture.png);
}

.train-list{
  background-image: url(/img/icons/conseils.png);
}

.website-active{
  background-image: url(/img/icons/website-active.png);
}

.website-waiting{
  background-image: url(/img/icons/website-waiting.png);
}

.mail{
  background-image: url(/img/icons/mail.png);
}

.keleos{
  background-image: url(/img/icons/keleos.png);
}

.pharminfo{
  background-image: url(/img/icons/pharminfo.png);
}

.actusante{
/*  background-image: url(/img/icons/actusante.png);*/
}

.labsharing{
  background-image: url(/img/icons/labsharing.png);
}

.getyellow{
  background-image: url(/img/icons/getyellow.png);
}

.jyraphe{
  background-image: url(/img/icons/jyraphe.png);
}



/*************/
/* Main tags */
/*************/

a{
  color: #9faa00;
  text-decoration: none;
}

a:visited{
  color: #790;
}

a:hover, a:focus{
  text-decoration: underline;
}

img{
  margin: 1em;
}

strong{
  font-weight: bold;
}

dl{
  text-align: left;
}

dt{
  font-variant: small-caps;
  margin: .5em 0 0 1em;
}

ul{
  list-style-type: none;
}

ul ul{
  margin: .5em 0;
  padding: 0 0 0 1em;
}

#main ul li ul{
  list-style: square;
}

#main ul li ul li{
  background: none;

  padding: 0;
}

form{
  padding: 1em 0;
  margin: 0 10%;
  width: 75%;
}

form p{
  overflow: auto;

  padding: .5em 0;
  margin: 0;
}

form h4{
  margin: .5em 0 1em -2em;
}

table{
  width: 100%;

  border-collapse: collapse;
  margin: 0 1em 2em;
}

td{
  text-align: left;

  font-size: .85em;
}

td + td + td + td{
  text-align: right;
}

th{
  text-align: left;

  border-bottom: 1px solid #333;
  padding: 2em 0 0 0;
}

label{ /* Just for IE6 */
  float: left;
  width: 70%;

  font-variant: small-caps;

  padding: 2px 1em;
}

input{ /* Just for IE6 */
  float: left;
  clear: left;

  padding: 0;
  margin: 0;
}

select{ /* Just for IE6 */
  float: left;
  clear: left;

  width: 31%;
}

form>label{
  float: left;
  clear: both;
  width: auto;

  font-variant: small-caps;

  padding: 2px 1em;
}

input[type=radio] + label,
input[type=checkbox] + label{
  float: left;

  margin: -1em 0 -1em 3em;

  padding: 0 1em;
}

label + label{
  clear: both;
}

input[type=text],
input[type=password],
select{
  float: left;
  clear: left;

  background: #fff;
  color: #aaa;

  border: 1px solid #ccc;
  margin: 0 0 .5em 2em;
  padding: .25em;
}

input[type=radio],
input[type=checkbox]{
  float: left;
  clear: both;
  height: 1em;
  width: 1em;

  margin: .25em 0 0 2em;
}

input[type=submit]{
  float: left;
  clear: both;
  width: 100%;

  background: #fff;
  color: #aaa;

  border: 1px solid #ccc;
  margin: 1.5em 0 0;
}

textarea{
  float: left;
  clear: both;
  width: 100%;

  background: #fff;
  color: #aaa;

  border: 1px solid #ccc;
  margin: 1em 0;
}

textarea:hover,
textarea:focus{
  background: url(img/lumi.png);
}

input:hover,
input:focus{
  background: url(img/lumi.png);
}

object, embed{
  min-height: 24em;
  height: 100%;
  width: 100%;
}



/*************/
/* Headlines */
/*************/

h1{
  display: inline;
  text-align: center;
  text-transform: uppercase;
  font-weight: lighter;
  text-decoration: underline;
  font-family: "AvantGardeExtLitITCTT", trebuchet, verdana, arial, sans;
  font-size: 2.5em;

  margin: 0;
  padding: 0;
}

h1 a, h1 a:hover, h1 a:focus, h1 a:visited{
  color: #333;
  text-decoration: underline;
}

h2{
  color: #333;
  text-align: center;
  font-family: verdana, arial, sans;
  font-weight: normal;
  font-size: 1.2em;

  margin: 0;
  padding: 0;
  border: 0;
}

h3{
  color: #752641;
  font-weight: lighter;
  font-family: "AvantGardeExtLitITCTT", verdana, arial, sans;
  font-size: 1.6em;
  text-align: left;
}

h4{
  color: #e47f00;
  font-weight: normal;
  font-family: verdana, arial, sans;
  text-align: left;

  border: 0;
  padding: 0;
  margin: 0;
}

h5{
  color: #752641;
  font-weight: normal;
  font-family: verdana, arial, sans;
  text-align: left;

  border: 0;
  padding: 1em 0 0 2em;
  margin: 0;
}



/**********/
/* Header */
/**********/

#header{
  float: left; /* Who think it can disable flickering with IE6? */
  width: 100%;
  text-align: center;
  background: url(/img/logo.png) 50% 0 no-repeat;

  padding: 75px 0 1.5em;
  margin: 0 0 3em;
}

#top-menu{
  text-align: center;
  list-style-type: none;
  list-style-image: none;
  text-transform: lowercase;

  font-size: .8em;

  padding: 0;
}

#top-menu li{
  display: inline;
}

#top-menu a{
  color: #eee;
}

#top-menu a:focus,
#top-menu a:hover{
  color: #000;
}



/*************/
/* Main menu */
/*************/

#main-menu{
  float: right;
  text-align: right;
  font-weight: lighter;
  text-transform: uppercase;
  font-family: verdana, arial, sans;

  margin: -20px 0 -5px;
  border-bottom: #ddd 2px solid;
}

#main-menu ul{
  background: #9faa00;
  overflow: visible;
  list-style-type: none;
  list-style-image: none;

  padding: .5em 0;
  margin: 0;
}

#main-menu ul li{
  display: inline;

  margin: 0 1em;
}

#main-menu ul li a{
  display: inline;

  color: #fff;

  padding: .25em;
}

#main-menu ul li a:hover,
#main-menu ul li a:focus{
  text-decoration: none;

  color: #333;
}


/***************/
/* Second menu */
/***************/

#sec-menu{
  width: 25%;
  float: right;
  clear: right;

  text-align: right;
  font-size: 80%;

  border-right: .4em solid #9faa00;
  padding: 0 0 1.5em;
}

#sec-menu div{
  padding: 0 .5em;
}

#sec-menu h3{
  width: 100%;

  color: #9faa00;
  text-align: right;
  font-size: 1.4em;
  font-variant: small-caps;
  font-family: helvetica, sans;

  margin: 0 0 0 -.5em;
  padding: 1em .5em 0 0;
}

#sec-menu h3 a{
  display: block;

  font-weight: bold;

  margin: 0 -1em 0 0;
  padding: 0 1em 0 0;
}

#sec-menu h3 a:hover,
#sec-menu h3 a:focus{
  color: #fff;
  background: #9faa00;
  text-decoration: none;
}

#sec-menu h4{
  padding: 0 1em 0 0;
}

#sec-menu ul{
  list-style-type: none;
  list-style-image: none;
  font-weight: lighter;
  font-size: 125%;

  padding: 2.5em 0 1.5em;
  margin: -2em -.4em 0 0;
}

#sec-menu ul li{
  padding: .2em 0;
}

#sec-menu ul li a{
  display: block;
  color: #333;

  padding: .2em 1em;
}

#sec-menu ul li a:hover,
#sec-menu ul li a:focus{
  background: #9faa00;
  color: #fff;

  text-decoration: none;
}

#sec-menu .news{
  text-align: right;

  margin: 0 .5em 1em -.5em;
}

#sec-menu h3#logname{
  padding: 1.5em 0 0;
}

#sec-menu .news h3{
  margin: 0;
  padding: 1em 0 0;
}

#sec-menu .tip{
  background: url(/img/icons/tip.png) 100% 0 no-repeat;
}

#sec-menu .tip h3{
  margin: 0 45px 0 -45px;
}



/************/
/* Main div */
/************/

#main{
  width: 70%;
  float: left;

  padding: 2em 0 4em;
}

#main p{
  text-align: justify;

  padding: 0 1.5em .5em 1em;
}

#main h3{
  clear: both;

  text-transform: uppercase;

  margin: 0;
  padding: 1.5em 0 0 1em;
}

#main h4{
  clear: both;

  padding: 1.5em 2em 0;
}

#main div img{
  float: right;
}

#main form img{
  display: block;;
  clear: both;
  float: none;

  margin: 0;
  padding: 1em 0 0;
}

#main div{
  overflow: auto;
  clear: both;

  border: 1px solid #ccc;
  padding: .5em;
  margin: 1em;
}

#main div h4{
  padding: .5em;
}

#main div:hover{
  background: url(img/lumi.png);
}

#main li{
  min-height: 20px;

  background: url(/img/puce-services.png) 0 0 no-repeat;

  margin: .5em 0;
  padding: 0 0 0 35px;
}

/* OK, CSS's not perfect */

#main>ul>li,
#main>ul>li+li+li+li,
#main>ul>li+li+li+li+li+li+li{ 
  background: url(/img/puce-services.png) 0 0 no-repeat;
}

#main>ul>li+li,
#main>ul>li+li+li+li+li,
#main>ul>li+li+li+li+li+li+li+li{
  background: url(/img/puce-transactions.png) 0 0 no-repeat;
}

#main>ul>li+li+li,
#main>ul>li+li+li+li+li+li,
#main>ul>li+li+li+li+li+li+li+li+li{
  background: url(/img/puce-conseils.png) 0 0 no-repeat;
}

#main-menu + #main{
  width: 90%;

  text-align: center;

  margin: 0 5%;
}

#main-menu + #main h3{
  background: none;
}

#main-menu + #main ul{
  text-align: left;
}



/**********/
/* Footer */
/**********/

#footer{
  clear: both;

  text-align: center;
  font-size: .8em;

  margin: 0;
  padding: 2em 0 1em;
}

#footer ul{
  list-style-type: none;
  list-style-image: none;

  padding: 0;
  margin: 0;
}

#footer ul li{
  display: inline;
}

#footer a{
  color: #aaa;

  border: 1px solid #ccc;
  padding: 0 1em;
}

#footer a:hover,
#footer a:focus{
  text-decoration: none;

  border-color: #9faa00;
  background-color: #9faa00;
  color: #fff;
}


/********/
/* Misc */
/********/

.service, a.service{
  color: #9faa00;
}

.transaction, a.transaction{ 
  color: #752641;
}

.conseil, a.conseil{
  color: #e47f00;
}

.hidden{
/*  display: none;*/
}

.hidden a{
/*  display: none;*/

  padding: .5em;
}

.hidden a:hover,
.hidden a:focus{
  color: #555;

  text-decoration: none;
}

#main .valid{
  color: #aaa;
  font-size: .8em;

  border: 0;
  padding: 0;
  margin: 0;
}

#main .valid li{
  background: none;

  padding: 0 .5em;
  margin: 0;
}

#main .valid li:before{
  content: "→ ";
}

#main ul.graph{
  width: 100%;

  border: 0;
  padding: 0;
  margin: 0 0 4em;
  text-align: center;
}

#main ul.graph li{
  display: inline;

  background: none;

  padding: 0 .5em;
}

#main div.flash{
  min-height: 5em;

  background: url(img/guillemet.png) 0 25% no-repeat;
  color: #752641;
  font-size: 1.1em;
  font-weight: lighter;
  font-style: italic;

  margin: -.5em 10% 0;
  padding: 0 0 0 50px;
  border: 0;
}

#main div.flash p{
  background: url(img/guillemet2.png) 100% 75% no-repeat;
  text-align: center;

  padding: 0 50px 0 0;
}

#main div.info{
  background: url(img/asterisque.png) 0 1em no-repeat;
  color: #752641;
  font-size: .9em;
  font-weight: lighter;
  font-style: italic;

  margin: 1em 10% -2em;
  padding: 0 0 0 25px;
  border: 0;
}

#main div.info p{
  text-align: justify;

  padding: 0 25px;
}

#main div.ref{
  border: 0;
  margin: 2em 0 0;
}

#main div.ref:hover{
  background: none;
}

#main div.ref p{
  display: inline;
  background: #752641;
  color: #fff;

  padding: .5em;
}

#main div.sold{
  background: url(/img/vendu.png) 100% 0 no-repeat;
}

#main div.exclusive{
  background: url(/img/exclusif.png) 100% 0 no-repeat;
}

#main div.new{
  background: url(/img/nouveau.png) 100% 0 no-repeat;
}