* {margin: 0; padding: 0; border: 0;}

body {background: url(bg_body.gif) repeat-y 50% 0; font: normal 62.5% Verdana, Helvetica, Arial, sans-serif;}

/* Blocs */
#container {margin: 0 auto; padding: 130px 0 20px 0; width: 800px; background: url(bg_container.gif) repeat-x; position: relative;}

#content {margin: 0 auto; padding-top: 1px; border-bottom: 2px solid #3d3d3d; width: 572px; background: url(bg_content.gif) repeat-y; clear: both;}
#presentation #content, #exemples #content {padding-bottom: 15px;}
#contact #content {padding-bottom: 20px;}

#footer {margin: 0 auto; width: 572px;}

/* Logos */
h1 {width: 260px; height: 115px; position: absolute; top: 0; left: 0;}

#glucoz {width: 140px; height: 80px; position: absolute; top: 0; right: 0;}

/* Headers */
h2 {margin-left: -5000px; width: 5572px; height: 70px; background: url(h2.gif) no-repeat;}
#presentation h2 {background-position: 100% 0;}
#offre h2 {background-position: 100% -70px;}
#fonctionnalites h2 {background-position: 100% -140px;}
#exemples h2 {background-position: 100% -210px;}
#contact h2 {background-position: 100% -280px;}

h3, legend {margin: 15px 35px 0 35px; color: #f0c; font: italic normal 2.4em Georgia, "Times New Roman", Times, serif;}

/* liens section suivante */
.section {margin: 20px 0;}
.section a {display: block; padding-top: 50px; height: 0; background: url(liens-sections.gif) no-repeat; overflow: hidden;}

#presentation .section {margin-left: 157px; padding: 10px 0 0 0;}
#presentation .section a {background-position: 0 0;}

#presentation #catalogue.section {margin-left: 195px; padding: 10px 0 0 0;}
#presentation #catalogue.section a {background-position: 0 -200px;}

#offre .section {margin-left: 160px; clear: both;}
#offre .section a {background-position: 0 -50px;}

#fonctionnalites .section {margin-left: 220px;}
#fonctionnalites .section a {background-position: 0 -100px;}

#exemples .section {margin: 0 0 0 210px;}
#exemples .section a {background-position: 0 -150px;}

/* Contenu */
p {margin: 10px 35px;}

ul {margin: 10px 35px 10px 60px; list-style: none;}
#offre ul {margin-bottom: 15px;}

p, li {color:#D6D6D6; font-size: 1em; line-height: 1.6em;}

#content li {margin: 5px 0; padding-left: 10px; background: url(bullet.gif) no-repeat 0 0.7em;}

a {color: #f0c; text-decoration: underline;}
a:hover {text-decoration: none;}

strong {font-weight: bold;}

span.pixpaper {color: #f0c; font-size: 1.2em; font-style: italic;}

#bonnes-raisons {margin: 25px 0 0 4px; padding-top: 200px; width: 563px; height: 0; background: url(bonnes-raisons1.gif) no-repeat; overflow: hidden;}

.demo a, #ensavoirplus a {display: block; margin: 25px 0 15px 0; padding-top: 40px; height: 0; overflow: hidden;}
.demo a {margin-left: 270px; width: 230px; background: url(demo.gif) no-repeat 0 0;}
#ensavoirplus a {margin-left: 0; width: 310px; background: url(ensavoirplus.gif) no-repeat 0 0;}

ul.realisations {margin: 10px 35px 20px 35px;}
ul.realisations li {margin: 0; padding: 0; background: none;}
ul.realisations a {margin: 0 20px 20px 0; width: 207px; background: url(bg_vignettes.gif) no-repeat; float: left; text-align: center; text-decoration: none;}
ul.realisations a span {text-decoration: underline;}
ul.realisations a:hover {background-position: 0 -480px;}
ul.realisations img {margin: 4px;}

#anim {margin: 10px 6px;}

address {margin-top: 5px; color: #aaa; font-size: 1em; font-style: normal; line-height: 1.6em; text-align: center;}
address a {color: #aaa; font-weight: bold;}

/* Fonctionnalites */
#table-features {margin: 0 2px; border-top: 1px solid #3d3d3d;}

table {border: 0; border-collapse: collapse; width: 568px; font-size: 1em; color: #D6D6D6; text-align: center;}

#tb-features {width: 350px;}

th, tr.alternate td {background: #161616;}
th, td {padding: 8px; border-bottom: 1px solid #3D3D3D;}
td.leftcell {text-align: left;}

tr:hover td, tr.hover td {background: #262626;}

td span {display: block;}
td span.show {padding-left: 10px; background: url(show-hide.gif) no-repeat 1px 0.4em; cursor: pointer;}
td span.hide {padding-left: 10px; background: url(show-hide.gif) no-repeat -1000px 0.4em; cursor: pointer;}

td p {margin: 5px 0 -5px 0; padding: 5px 0; width: 334px; background: url(table_bullet.gif) no-repeat 8px 1em; color: #f0c;}

/* formulaire de contact */
form {margin: 10px 35px 0 35px;}

form p {margin: 10px 0;}
form em {color: #fff; font-weight: normal;}

label {color: #f0c; font-weight: bold; line-height: 1.4;}
input, textarea {font: normal 1.1em Verdana, Arial, Helvetica, sans-serif;}
label input, textarea {margin: 0 0 10px 0; padding: 2px 1px; border: 1px solid #464646; background: #363636; color: #FFF; max-width: 500px;}
label input:focus, textarea:focus, label input.focus, textarea.focus {border-color: #777; background: #464646;}
label input {width: 20em;}
label textarea {width: 30em; height: 10em;}

input#envoyer {padding: 2px 10px; background: #f0c; color: #fff; font-weight: bold;}

/* Navigation */
ul#nav {margin: 0 auto; width: 572px; background: url(nav_border.gif) no-repeat 0 100%; text-align: left; list-style: none;}
ul#nav li {padding-right: 5px;}
ul#nav a {padding: 2px 7px 0 7px; float: left; font-weight: bold; line-height: 2; text-decoration: none;}
#presentation ul#nav #nav-presentation a,
#offre ul#nav #nav-offre a,
#fonctionnalites ul#nav #nav-fonctionnalites a,
#exemples ul#nav #nav-exemples a,
#contact ul#nav #nav-contact a {padding: 0 5px; border: 2px solid #3d3d3d; border-bottom: 0; background: #000;}
ul#nav a:hover {padding: 0 5px; border: 2px solid #3d3d3d; border-bottom: 0; background: #363636; color: #fff;}

/* clearing */
#content:after, ul#nav:after, ul.realisations:after {display: block; content: "."; height: 0; clear: both; visibility: hidden;}