pipeshop
html {
font-size: 100%; 
}
body {
margin: 0;
padding: 10px 20px; 
font: .8em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif; 
line-height: 1.25; 
color: #F0E39E;
background: #717958;
}
a {
color: #006633;
}
a:hover, a:focus {
color: #FF4C00;
}
/* Page */
#global {
width: 900px;
border: 1px solid #f8f5c8;
margin: 0 auto; 
}
/* Bloc central */
.image {
border: 0px;
}
.div {
margin: 8px auto 0 78px;
}
#down {
float: left;
border: 0px solid #f8f5c8;
width: auto;
margin: -20px 0 0 210px;
padding: 6px;
}
#centre {
background: url(/images/col2.png) repeat-y; 
width: 100%;
overflow: hidden;
}
#centre2 {
background: url(/images/col.png) repeat-y; 
width: 100%; /* -> 4 */
overflow: hidden; /* -> 4 */
}
/* Contenu principal */
#principal {
float: left; /* -> 5 */
width: 560px;
margin-left: 168px;
color: #181A12;
background: #cbd888; /* -> 2 */
}
#principal a {
color: #505050;
}
#principal a:hover, #principal a:focus {
color: #841025;
}
#principal strong {
color: #181A12;
}
/* Colonnes opus 1 */
div#col1 { 
float: left; 
width: 185px; 
margin-right: 40px; 
background: transparent; 
} 
div#col2 { 
float: right; 
width: 150px; 
margin-left: -20px; 
background: transparent; 
} 
div#col3 { 
overflow: hidden; 
background: transparent; 
}
/* Contenu secondaire */
#secondaire {
float: right;
width: 560px;
margin: 10px 2px 10px 0px;
background: #f8f5c8; /* -> 2 */
border: 1px solid #000000;
}
.audio {
margin: -35px 0 15px 500px;
}
/* --- POSITIONNEMENT --- */
/* En-tête */
#entete {
background: url(/images/ban.gif) no-repeat; /* Voir -> Note 1 */
width: 900px;
height: 225px;
padding: 0px;
}
#entete h1 {
margin: 0px;
}
#entete h1  {
float: left;
margin: 160px 20px 10px 580px;
}
/* entete-titre */
.h1 {
float: right;
font: italic 2.2em  Lucida Calligraphy, Georgia, "Bitstream Vera Serif", Norasi, serif; 
color: #f8f5c8;
width: 300px;
overflow: auto;
border: 0px solid #ffffff;
margin: -70px 140px 0px 0px;
}
/* Menu de navigation */
#navigation {
background: #181A12;
padding: 12px 15px;
}
#navigation ul {
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
#navigation li.gauche {
float: left;
margin-right: 18px;
font: italic 1.3em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
}
#navigation li.droite {
float: right;
margin-right: 0;
margin-left: 10px;
padding: 3px 0;
}
#navigation a {
color: #FF6533;
padding: 6px;
line-height: 1.5;
font-size: 0.9em;
text-decoration: none;
}
#navigation a:hover, #navigation a:focus {
color: #B22C00;
background: #f8f5c8;
}
.message {
font: bold 1.3em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
text-align: center;
text-decoration: none;
color:  #505050;
margin: 10px 0 0 175px;
}
.message:hover {
font: bold 1.3em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
text-align: center;
text-decoration: none;
color: #841028;
margin: 10px 0 0 175px;
}
/* Mention de copyright */
#copyright {
background: #f8f5c8;
border-top: 50px solid #000000;
height: 30px;
margin: 0px;
padding: 8px;
font: .85em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
text-align: center;
color: #848F63;
}
#copyright a {
color: #848F63;
text-decoration: none;
}
#copyright a:hover, #copyright a:focus {
text-decoration: underline;
}
/* formulaire*/
form {
background: transparent;
border: 0px solid #505050;
margin-left: 340px;
padding: 4px;
width: 204px;
}
/* mise en page */
h1 {
font: italic 2.2em  Georgia, "Bitstream Vera Serif", Norasi, serif; /* -> 8 */
color: #f8f5c8;
}
h2 {
font: bold 1.3em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
margin: 15px 0 0 8px;
}
.h2 {
font: bold 0.9em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
margin: 15px 0 0 8px;
color: #841028;
}
h3 {
font: bold 1.2em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
margin: 10px 0 0 10px;
}
h4 {
font:  0.85em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
margin: 10px 0 10px 10px;
}
/* Listes */
ul, ol {
margin: .75em 0 .75em 10px;
padding: 0; 
}
ul {
list-style: none;
}
li {
margin: 0;
padding: 0;
}
/* Paragraphes */
p {
margin: 10px 8px 20px 8px;
text-align: justify;
}
.demo{
font: bold 0.85em  Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
margin: 10px 8px -6px 8px;
text-align: justify;
}
.join{
font: bold 1.0em  Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
margin: 10px 8px 20px 8px;
text-align: justify;
}
.font {
margin: 10px 8px 8px 0;
text-align: justify;
color: #416118;
}
.p {
float: right;
font: bold 0.9em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
width: 375px;
margin: 0px -85px 10px 0px;
text-align: justify;
}
.free {
float: right;
font: bold 0.9em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
width: 175px;
margin: -15px  10px 10px 0px;
text-align: justify;
}
.listen {
float: right;
font: bold 0.9em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
width: 300px;
margin: -10px -75px 10px 0px;
text-align: justify;
}
.info {
float: right;
font: bold 0.9em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
width: 175px;
margin: 0px  -55px 10px 0px;
text-align: justify;
}
.down {
float: right;
font: bold 1.0em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
width: 350px;
margin: 0px 88px 40px 0px;
text-align: justify;
}
.back {
float: right;
font: bold 0.9em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
width: auto;
margin: 15px 0px 25px 400px;
text-align: justify;
}
.link {
float: right;
font: bold 0.75em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
width: auto;
margin: 10px 0px 0px 0px;
text-align: justify;
}
li p, blockquote p {
margin: .5em 0;
}
/* Citations */
blockquote, q {
font-size: 1.1em;
font-style: italic;
font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
}
blockquote {
margin: .75em 0 .75em 24px;
}
cite {
font-style: italic;
}
/* Liens */
a {
color: #0000CD;
text-decoration: underline;
}
a:hover, a:focus {
color: #DC143C;
}
/* Divers éléments de type en-ligne */
em {
font: italic 0.9em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
color: #416118;
}
.em {
font: italic 1.0em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
color: #416118;
}
strong {
font: bold  0.9em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
color: #696969;
}
.strong {
font: bold  1.1em  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
color: #000000;
margin: 20px 0 6px 6px;
}
#bground {
background: #555;
border: 1px solid #fff;
margin: px;
}
/* --- Les espaces --- */
.space {
margin: 50px;
}
.space1 {
margin: 60px 0 0 0;
border-bottom: 1px dotted #505050;
}
.space2 {
margin: 40px 0 0 0;
border-bottom: 1px dotted #505050;
}
.spacedown {
margin: 60px;
}
.spacebas {
margin: 100px;
}
/* --- Styles pour certains contenus des gabarits --- */
pre, code {
font-size: 100%;
font-family: "Bitstream Vera Mono", "Lucida Console", "Courier New", monospace;
}
pre {
width: 63%;
overflow: auto;
margin: 10px 83px;
padding: 12px;
background: #eee;
color: #555;
}
pre strong {
font-weight: normal;
color: black;
}