/* Les liens
-------------------------------------------------------- */
a {
text-decoration: none;
}
a:link {
color: #33CCFF;
text-decoration: none;
}
a:active {
color: #33CCFF;
text-decoration: none;
}
a:hover {
color: #CC3300;
text-decoration: underline;
}
a:visited {
color: #2589C5;
text-decoration: none;
}
/* Structure globale
-------------------------------------------------------- */
body {
background-color: #2589C5;
text-rendering: optimizeLegibility;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, San Serif; 
font-size: 13px;
line-height: 1.5em;
color: #CCCCCC; 
text-align: center;
margin: 0;
padding: 0;
}
#page {
background-color: #11415D;
border: none;
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: justify;
}
#main {
background-color: #000000;
width: 81%;
text-align: justify;
float: right;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*td img {display: block;}*/

td, th {
padding: 0;
margin: 0;
font-size: 13px;
line-height: 1.5em;
}
td .intro {
padding: 10px;
margin: 0;
font-size: 13px;
line-height: 1.5em;
text-align: justify;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
.title {
font-size: 24px;
text-align: center;
padding: 10px 0 20px 0;
position: relative;
line-height: 1.5em;
}
.title2 {
font-size: 20px;
text-align: center;
padding: 10px 0 20px 0;
position: relative;
line-height: 1.5em;
}
.smalltext {
font-family: Tahoma, Arial, Helvetica, San Serif;
font-size: 11px;
font-weight: normal;
text-align: center;
}
.smalltext2 {
font-family: Tahoma, Arial, Helvetica, San Serif;
font-size: 11px;
font-weight: normal;
}
.barre {
background: transparent url(blueline.gif) repeat-x;
height: 3px;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
img {
border: none;
}
input,textarea {
border: 1px solid #474747;
}
textarea {
width: 100%;
font-size: 1em;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}
#navigation {
display: block;
padding: 20px 0 20px 0;
margin: 0;
height: 30px;
}
#share {
float: right;
margin: 10px;
}
.left {
float:left;
padding-left: 200px;
}
.right {
float:right;
padding-right: 200px;
}
/* Bannière
-------------------------------------------------------- */
#header {
width: 1000px;
margin-left: auto;
margin-right: auto;
background: transparent url(genie.jpg) left top repeat-x;
height: 120px;
}
.bgtitle {
height: 120px;
}
.space {
background: transparent url(bgtitle.jpg) repeat-x;
width: 5px;
height: 120px;
border: none;
}
.banner {
background: transparent url(rimbaud-epe.gif) right top no-repeat;
filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;
height: 120px;
border: none;
}
/* Barre de navigation
-------------------------------------------------------- */
#nav{
height: 20px;
margin: 0;
padding: 0;
background: url(bluetitle.jpg) left top repeat-x;
}
#navsidebar{
height: 20px;
margin: 0;
padding: 0;
background: url(bluetitle.jpg) left top repeat-x;
text-align: center;
}
#navbottom {
height: 20px;
margin: 0;
padding: 0;
background: url(bluetitle.jpg) left top repeat-x;
text-align: center;
}
.navtitle{
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
/* Le contenu
-------------------------------------------------------- */
#content {
background-color: #000000;
padding: 10px 10px 40px 10px;
}
#sidebar {
width: 19%;
float: left;
margin: 0;
padding-bottom: 4em;
background-color: #11415D;
}
#sidebar div ul{
list-style-type: disc;
}
#sidebar h2, #sidebar h3 {
font-size: 13px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
text-align: center;
height: 20px;
width: 100%;
background: url(bluetitle.jpg) left top repeat-x;
}
#sidebar div#recherche{
background: transparent;
color: inherit;
}
#recherche fieldset, #recherche p{
margin: 0;
padding: 0;
text-align: center;
}
#query{
padding-left: 18px;
background: #FFFFFF url(q.png) no-repeat 4px center;
}
/* Le lexique
-------------------------------------------------------- */
dt, dt.open {
font-weight: bold;
margin: 10px 0 10px 0;
padding: 0;
}
dd {
margin: 10px 0 10px 10px;
padding: 0;
}
/* Le pied de page
-------------------------------------------------------- */
#footer div{
padding: 10px;
}
.bgfooter {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
}
/* Ecrans inférieurs à 800px
-------------------------------------------------------- */
@media screen and (max-width: 800px) 
{
#page {
width: 100%;
position: relative;
}
#main {
width: 100%;
}
.barre {
width: 100%;
}
img {
height: auto; width: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
max-width: 100%;
}
textarea, table, td, th, code, pre, samp {
word-wrap: break-word; /* passage à la ligne forcé */
-webkit-hyphens: auto; /* césure propre */
-moz-hyphens: auto;
hyphens: auto;
}
code, pre, samp {
white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
}
/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
#blognav, #blogextra {
float: none;
width: auto;
}
#sidebar {
width: 100%;
margin: auto;
}
#sidebar h2, #sidebar h3, #nav {
width: 100%;
margin: auto;
background: url(bluetitle.jpg) top repeat-x;
}
/* masquer les éléments superflus */
#applet, .hide_mobile {
display: none !important;
}
/* Un message personnalisé
body:before {
content: "Version mobile du site";
display: block;
color: #CCCCCC;
text-align: center;
font-style: italic;
}
} */
/* Ecrans inférieurs à 480px
-------------------------------------------------------- */
@media screen and (max-width: 480px) 
{
#header {
width: 100%;
margin-left: auto;
margin-right: auto;
background: transparent url(mini-genie.jpg) left top repeat-x;
height: 77px;
}

.bgtitle {
height: 77px;
}
.space {
background: transparent url(mini-bgtitle.jpg) repeat-x;
width: 5px;
height: 77px;
border: none;
}
.banner {
background: transparent url(mini-rimbaud-epe.gif) right top no-repeat;
filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;
height: 77px;
border: none;
}
img {
max-width: 100%;
height: auto;
}
.photo {
display: none;
}
table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
max-width: 100%;
}
}
/* Ecrans supérieurs à 480px et inférieurs à 800px
-------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 800px) 
{
#header {
width: 100%;
margin-left: auto;
margin-right: auto;
background: transparent url(med-genie.jpg) left top repeat-x;
height: 100px;
}
.bgtitle {
height: 100px;
}
.space {
background: transparent url(med-bgtitle.jpg) repeat-x;
width: 5px;
height: 100px;
border: none;
}
.banner {
background: transparent url(med-rimbaud-epe.gif) right top no-repeat;
filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;
height: 100px;
border: none;
}
img {
max-width: 100%;
height: auto;
}
.photo {
display: none;
}
table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
max-width: 100%;
}
}