@charset "utf-8";
* {margin: 0; padding:0; }

body {
background-image:url(../images/4pxdiag.gif);
background-attachment:fixed;
font: 80% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */
padding: 0;
text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
color: #000;

}
.main #container {
width: 800px;  /* ce paramétrage crée un conteneur dont la largeur est 80 % de celle du navigateur */
margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
border: 1px solid #e0e0e0;
}
.main #mainContent {
 /*  ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
}

.main #smallContainer{
background-image:url(../images/mainbkg.gif);
background-repeat: repeat-x;
background-position:top;
background-color: #fff9fd;
margin: 0 auto;
width: 800px;
}


.main #header {
background-color:#003366;
background-image:url(../images/header.gif);
background-position: top left;
background-repeat: no-repeat;
height: 100px;
width: 100%;
}

.main #header img {
float: left;
}

.main #header form {
float: right;
margin-top: 30px;
margin-right: 10px;
}


.main #menu {
background-image:url(../images/subbkg.gif);
background-position: top;
background-repeat: no-repeat;
left:0;
height: 90px;
width: 100%;
}


.main #menu #nav {
float: left;
margin-top: 5px;
width: 450px;
}

.main #menu #nav ul {
list-style-type: none;
width: 100%;
}

.main #menu #nav li {
float: left;
margin-left: 20px;
}
.main #menu #nav li a {
display: block;
color: #666;
}

.main #footer {
width: 100%;
text-align:center;
margin-top: 25px;
}



.main #blogroll {
width: 30%;
float: right;
background-image:url(../images/borderleft.gif);
background-position: top left;
background-repeat:repeat-y;
padding: 15px;
}

.main #blogroll ul {
list-style-type:none;
margin: 0 auto;
padding:0;
}
.main #blogroll li.push {
margin-top: 30px;
}
.main #blogroll li a {
color: #333;
}

.main #blogroll li h4 {
background-color: #ff3399;
width: 100%;
padding:3px;
color: #fff;
margin-bottom: 10px;
}




#intermediate  #rss {
float: right;
margin-top: 10px;
}

.main #posts {
color: #000;
padding-left: 15px;
width: 60%;
}
.main #posts #post_body {
margin-top: 25px;
}


.main .seperator {
height:0px;
clear: both;
width: 100%;
font-size: 1px;
}

.main button {
background-color: #000;
border:0;
cursor: pointer;
margin-left: 5px;
}

.main .button {
background-color:  #000;
color: #ff33ff;
border: 0px;
font-weight:bold;
padding:5px;
}

.main .textbox {
border: 1px solid #cdcdcd;
padding:1px;
}

.main .bubble {
background-image:url(../images/comments.gif);
background-repeat: no-repeat;
display: block;
float: right;
font-weight: bold;
height: 35px;
padding-top: 5px;
width: 40px;
text-align: center;
}

.main .tags {
float: left;
margin-top: 15px;
color: #999;
}

.main .text1 {color: #ff33ff}
.main .text2 {color: #b1ec01}
.main .text3 {color: #33ccff}
.main .white {color: #fff;}
.main .black {color: #000;}



.main .comment_body {
border-left: 1px solid #dfdfdf;
margin-top: 0.7em;
padding:1em;
width: 98%;
}
.main .comment_date {
padding-top: 0.5em;
font-style: italic;
margin-top: 10px;
}
.main .comment_action {
width: 98%;
text-align: center;
}
.main .comment_zone {
margin-top: 25px;
}

.main .notify_window {
background-image:url(../images/4pxdiag.gif);
border:1px solid #eee;
font-size: 1.3em;
font-weight: bold;
height: 3em;
line-height: 3em;
margin-bottom: 25px;
text-align: center;
padding-bottom: 5px;
}


.main .post label {
display: block;
float: left;
margin-top:5px;
width: 30%;
}

.main .post textarea {
width: 95%;
}

.main .post .captcha {
text-align:center;
font-size: 1.2em;
height: 25px;
width: 111px;
}

.main .post #captcha {
text-align: center;
}

.main a:hover {
text-decoration: none;
}

.main .width80 {width: 80px; }
.main .width100 {width: 100px; }
.main .width120 {width: 120px; }
.main .width200 {width: 200px; }
.main .width220 {width: 220px; }
.main .width260 {width: 260px; }
.main .width300 {width: 300px; }

.main .highlight {
background-color:#000;
color:#fff;
}