body {margin: 0; padding: 0; background: #fff; color: #333; font: normal 62.5% Verdana, Arial, Helvetica, sans-serif;}

/* blocs */
#container {margin: 0 auto; width: 780px; min-height: 600px; background: url(paper.gif) no-repeat; position: relative;}
#header {width: 220px; position: absolute; top: 0; left: 0;}
#content {margin-left: 249px; padding: 75px 0 20px 0; width: 506px;}
#footer {margin: 0; padding: 0; width: 135px; position: absolute; top: 300px; left: 70px;}

#presentation #content {margin-left: 234px; padding-top: 70px; width: 536px;}

/* header */
h1 {margin: 35px 0 20px 20px; padding: 0;}
h1 a {display: block; padding: 62px 0 0 0; height: 0; overflow: hidden;}

/* navigation */
#nav {margin: 0 0 0 20px; padding: 0; width: 190px; list-style: none;}
#nav a {display: block; padding-top: 25px; width: 190px; height: 0; background: url(menu.gif) no-repeat; overflow: hidden;}

#nav-presentation a {background-position: 0 0;}
#nav-offre a {background-position: 0 -25px;}
#nav-fonctionnalites a {background-position: 0 -50px;}
#nav-exemples a {background-position: 0 -75px;}
#nav-contact a {background-position: 0 -100px;}

#presentation #nav-presentation a, #nav-presentation a:hover {background-position: -200px 0;}
#offre #nav-offre a, #nav-offre a:hover {background-position: -200px -25px;}
#fonctionnalites #nav-fonctionnalites a, #nav-fonctionnalites a:hover {background-position: -200px -50px;}
#exemples #nav-exemples a, #nav-exemples a:hover {background-position: -200px -75px;}
#contact #nav-contact a, #nav-contact a:hover {background-position: -200px -100px;}

/* textes */
p, ul {margin: 10px 0; padding: 0; line-height: 1.4;}

#presentation p {margin: 10px 15px;}
#offre ul {margin-bottom: 15px;}

h2, h3 {margin: 0; padding: 0;}
#presentation h3 {margin: 15px 15px 0 15px;}
#contact h2 {margin-bottom: 15px;}
#presentation h2, #exemples h2 {position: absolute; left: -9999px;}

a {color: #f35a15; font-weight: bold; text-decoration: underline;}
a:hover {text-decoration: none;}

img {border: 0;}

strong {font-weight: bold;}
em {font-style: italic;}

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

#content ul {margin-left: 20px; list-style: none;}
#content li {padding-left: 10px; background: url(bullet.gif) no-repeat 0 0.6em;}

#content ul.realisations {margin: 20px 0 0 0; padding: 0; width: 508px; background: url(realisations1.gif) repeat-y;}
#content ul.realisations li {margin: 0; padding: 0; background: transparent; clear: both;}
#content ul.realisations li img {display: block; margin: 15px;}
#content ul.realisations li a {float: left; width: 229px; height: 182px; background: url(liens-demo.gif) no-repeat; text-decoration: none;}
#content ul.realisations li a:hover {background-position: -229px 0;}
#content ul.realisations li p {padding-top: 10px; width: 255px; float: right;}
#content ul.realisations li p strong {display: block; margin-bottom: 5px; color: #f35a15; font-size: 1.2em;}
#content ul.realisations li p a {float: none; width: auto; height: auto; background: transparent; text-decoration: underline;}
#content ul.realisations li p a:hover {text-decoration: none;}

address {color: #bbb; font-style: normal; line-height: 1.4;}
address a {display: block; padding-top: 30px; height: 0; background: url(glucoz.gif) no-repeat; color: #ccc; overflow: hidden;}
address a:hover {background-position: 0 -30px;}

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

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

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

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

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

#exemples .section {margin: 15px 0 0 150px; clear: both;}
#exemples .section a {background-position: 0 -165px;}

/* tableaux */
table {border: 1px solid #eee; border-collapse: collapse; width: 100%; font-size: 1em; text-align: center;}
#tb-features {width: 300px;}
th, td {padding: 5px;}
.leftcell {text-align: left;}
th {background: #fff5f1;}
.alternate td {background: #f9f9f9;}
tr:hover td, tr.hover td {background: #f0f0f0;}
td p {margin-bottom: 0; width: 300px; color: #f35a15; font-weight: bold;}
tr th, tr td {border-bottom: 1px solid #eee;}
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;}

/* bonnes raisons */
#bonnes-raisons {
 margin: 0 0 0 20px; padding-top: 360px;
 width: 200px; height: 0;
 background: url(bonnes-raisons.gif) no-repeat;
 float: right;
 overflow: hidden;
}

/* formulaire de contact */
form, fieldset {margin: 0; padding: 0; border: 0;}
legend {display: none;}

form em {color: #333; font-weight: normal;}

label {color: #f35a15; 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 #ccc; background: #eee; color: #333; max-width: 500px;}
label input:focus, textarea:focus, label input.focus, textarea.focus {border-color: #666; background: #ddd;}
label input {width: 20em;}
label textarea {width: 30em; height: 10em;}

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

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

/* Hacks IE < 7 */
* html #container {height: 600px;}