/********************************************
   AUTHOR:     Erwin Aligam 
   WEBSITE:      http://www.styleshout.com/
 TEMPLATE NAME:  Refresh
   TEMPLATE CODE:  S-0002
   VERSION:          1.0           
 *******************************************/
 
/********************************************
   HTML ELEMENTS
********************************************/ 

/* Top Elements */
* { margin: 0;padding: 0;}

body {
/* background: #CCCCCC; */
 background-image: url("../img/fond.jpg");
 background-repeat: no-repeat;
 background-attachment: fixed;
 font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
 color: #000000;
 text-align: center;
}

/* links */
a, a:visited {
 text-decoration: none;
 color: #DD002E;
 background: inherit;
}
a:hover {
 color: #909ACC;
 background: inherit;
}

/* headers */
h1 { /* Titres du menu de navigation. */
 font-family: Tahoma, Verdana, 'Trebuchet MS', Sans-serif;
 font-weight: Bold;
 font-size: 120%;
 padding: 10px;
 margin: 0;
}
h2 { /* Titres des pages. */
 text-align: center;
 margin: 20px 0 0 0;
 padding: 0 0 0 10px;
 font: bold 1.3em Verdana, 'Trebuchet MS', Sans-serif;
 color: #FFFFFF;
 background-color: #000000;
 border: 1px solid #353535;
}
h3 { /* Sous-titre des pages. */
 text-align: center;
 margin: 10px 10px 0 10px;
 padding: 0 0 0 10px;
 font: bold 1.1em Verdana, 'Trebuchet MS', Sans-serif;
 color: #FFFFFF;
 background-color: #000000;
 border: 1px solid #353535;
}
/* h4 utilisé dans Infos techniques. */

/* images */
img {
 border: 0px solid #CCC;
}
img.float-right {
  margin: 5px 0px 10px 10px;
}
img.float-left {
  margin: 5px 10px 10px 0px;
}

p {
 padding: 10px;
 margin: 0;
}
ul, ol {
 margin: 5px 20px;
 padding: 0 20px;
 color: #B74343;
}
ul span, ol span {
 color: #D3D3D3;
}

code {
 margin: 5px 0;
 padding: 10px;
 text-align: left;
 display: block;
 overflow: auto;
 font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
 /* white-space: pre;*/
 background: #353535;
 border: 1px solid #212121;
}
acronym {
 cursor: help;
 border-bottom: 1px solid #777;
}
p.blockquote {
 margin: 10px;
 padding: 5px 5px 5px 40px;
 border: 1px solid #212121;
 background: #353535 url(../img/quote.gif) no-repeat 5px 5px;
 font-style: italic;
}

/* form elements */
/*form {
 margin:10px;padding: 0 5px;
 border: 1px solid #212121;
 background-color: #353535;
}*/
label {
 display: block;
 font-weight: bold;
 margin: 5px 0;
}
input {
 padding: 2px;
 border: 1px solid #eee;
 font: normal 1em Verdana, sans-serif;
 color: #000000;
 background: #8E8E8E;
}
textarea {
 width: 400px;
 padding: 2px;
 font: normal 1em Verdana, sans-serif;
 border: 1px solid #eee;
 height: 100px;
 display: block;
 color: #000000;
 background: #8E8E8E;
}
input.button { 
 margin: 0;
 font: bolder 12px Arial, Sans-serif;
 border: 1px solid #CCC;
 padding: 2px 3px;
 background: #8E8E8E;
 color: #000;
}

/* search */
form.search {
 position: absolute;
 top: 35px;
 right: 25px;
 background: transparent;
 border: none;
} 
form.search input.textbox {
 margin: 0;
 padding: 1px 2px;
 width: 120px;
 background: #FFF;
 color: #333;
}
form.search input.button {
 background: #CCC url(../img/headerbg.gif) repeat-x;
 color: #333;
 border: none;
 width: 70px;height: 21px;
}

/********************************************
   LAYOUT
********************************************/ 
#wrap {
 width: 820px;
 margin-top: 0;
 margin-left: 100px;
 text-align: left;
}
#content-wrap {
 clear: both;
 width: 760px;
 padding: 0 30px;
 margin: 0;
 background: url(../img/content.png) repeat-y center top;
 overflow: auto;
}
#header {
 width: 820px;
 position: relative;
 height: 160px;
 background: url(../img/header.png) no-repeat center top;
 padding: 0;
 font-size: 14px;
 color: #FFF;
}
#header h1#logo-text {
 position: absolute;
 margin: 0;padding: 0;
 font: bolder 3.3em 'Trebuchet MS', Arial, Sans-serif;
 letter-spacing: -2px;
 color: #FFF;
 text-transform: none;
 
 /* change the values of top and left to adjust the position of the logo*/
 top: 28px;left: 50px;
}
#header h2#slogan {
 position: absolute;
 margin: 0;padding: 0;
 font: normal .8em 'Trebuchet MS', Arial, Sans-serif;
 text-transform: none;
 color: #FFF;
 
 /* change the values of top and left to adjust the position of the slogan*/
 top: 74px;left: 58px;
}

/* Menu */
#menu {
 clear: both;
 margin: 0;
 padding: 0 40px 0 0;
 background: url(../img/menu.png) repeat-y center top;
 font: bold 12px/26px Verdana, Arial, Tahoma, Sans-serif;
 height: 26px;
}
#menu ul {
 float: right;
 list-style: none;
 margin:0;padding: 0;
}
#menu ul li {
 display: inline;
}
#menu ul li a {
 display: block;
 float: left;
 padding: 0 8px;
 color: #FFF;
 text-decoration: none;
}
#menu ul li a:hover {
 background-color: #ECECEC;
 color: #333;
}
#menu ul li#current a { 
 background-color: #FFF;
 color: #333;
}

/* Main Column */
#main {
 float: right;
 width: 72%;
 padding: 0;
 margin: 0;
 margin-top: 10px;
}
#main h1 {
 margin-top: 10px;
 font: Bold 125% Verdana, 'Trebuchet MS', Sans-serif;
 color: #C1C1C1;
 padding: 5px 0 5px 25px;
 border-bottom: 1px solid #353535;
 background: #1E1E1E url(../img/square-red.png) no-repeat 3px 50%;
}
#main img.photo_principale {
 border: solid 1px #000000;
}

.post-footer {
 background-color: #353535;
 padding: 5px;margin: 20px 10px 0 10px;
 border: 1px solid #212121;
 font-size: 95%;
}
.post-footer .date {
 background: url(../img/clock.gif) no-repeat left center;
 padding-left: 20px;margin: 0 10px 0 5px;
}
.post-footer .comments {
 background: url(../img/comment.gif) no-repeat left center;
 padding-left: 20px;margin: 0 10px 0 5px;
}
.post-footer .readmore {
 background: url(../img/page.gif) no-repeat left center;
 padding-left: 20px;margin: 0 10px 0 5px;
}

/* Sidebar */ 
#sidebar {
 float: left;
 width: 26.5%;
 padding: 0;margin: 0;
} 
#sidebar h1 {
 margin-top: 10px;
 padding: 5px 0 5px 10px;
 font: bold 1.1em Verdana, 'Trebuchet MS', Sans-serif;
 color: #FFFFFF;
 /*background: #EEF0F1 url(../img/headerbg.gif) repeat-x left bottom;*/
 background : #000000;
 border: 1px solid #353535;
}
#sidebar .left-box {
 border: 1px solid #353535;
 margin: 0 0 5px 0;
 background-color: #FFFFFF;
}
#sidebar .left-box-partenaires {
 text-align: center;
 padding: 10px 0;
}
#sidebar .left-box-rss {
 text-align: center;
 border: 0;
 background: none;
}
#sidebar .left-box-update {
 text-align: center;
 font-style: italic;
 border: 0;
 background: none;
}
#sidebar ul.sidemenu {
 list-style: none;
 text-align: left;
 margin: 3px 0 8px 0;padding: 0;
 text-decoration: none;
}
#sidebar ul.sidemenu li {
 border-bottom: 1px solid #353535;
 background: url(../img/go.gif) no-repeat 5px 5px;
 padding: 2px 0 2px 25px;
 margin: 0 2px;
}
#sidebar ul.sidemenu a {
 font-weight: bolder;
 text-decoration: none;
 background-image: none;
}

/* Footer */ 
#footer {
 color: #000000;
 background: url(../img/footer.png) no-repeat center top;
 clear: both;
 width: 820px;
 height: 55px;
 text-align: center;
 font-size: 80%;
}
#footer a { text-decoration: none;}

/* alignment classes */
.float-left  { float: left;}
.float-right { float: right;}
.align-left  { text-align: left;}
.align-right { text-align: right;}

/* display and additional classes */
.clear { clear: both;}
.gray { color: #CCC;}

/* Résultats */
table.resultat {
 border-collapse: collapse;
 width: 90%;
 border: solid 1px #353535;
 margin: 10px auto 10px auto;
}

table.resultat th {
 border: solid 1px #353535;
 text-align: center;
 background-color: #DDDDDD;
}

table.resultat td {
 padding: 0 0 0 5px;
 border: solid 1px #353535;
 background-color: #FFFFFF;
}

table.resultat td.center {
 padding: 0;
 text-align: center;
}

/* Infos techniques */
h4 {
 font-weight: bold;
}

/* Vidéos et photos */
div.groupe-video,
div.contenu-photos {
 display: none;
 text-align: center;
 margin: 0px 10px 0 10px;
 padding: 10px 0 10px 0;
 border-style: solid;
 border-width: 0 1px 1px 1px;
 border-color: #000000;
 background-color: #FFFFFF;
}

/* Commun */
div.contenu {
 margin: 10px 20px;
}

/*================================*/

#popup {
 position: absolute;
 width: 550px;
 height: 300px;
 margin: 100px 0 0 200px;
 border: solid 3px #000000;
 background-color : #353535;
}

div.popup-close {
 font-size: 10px;
 text-align: left;
}

div.popup-contenu {
 text-align: center;
 margin-top: 70px;
 font-style: italic;
 font-size: 20px;
}

/*================================*/

div.news {
 border: solid 1px #333333;
 background-color: #FFFFFF;
 margin: 10px 0 10px 0;
}

div.news div.entete {
 height: 30px;
 /*background: url(../img/headerbg.gif);*/
 background: #000000;
}

div.news div.entete div.titre {
 float: left;
 height: 30px;
 line-height: 30px;
 background: url(../img/square-red.png) no-repeat 8px 8px;
 padding: 0 10px 0 30px;
 font-size: 1.1em;
 font-weight: bold;
 font-family: Verdana, 'Trebuchet MS', Sans-serif;
 color: #FFFFFF;
}

div.news div.entete div.infos {
 height: 30px;
 line-height: 30px;
 font-size: 8px;
 color: #FFFFFF;
}

div.news div.contenu {
 padding: 0px;
}

div.pilote-gauche {
 float: left;
 margin: 60px 50px 0 30px;
}

div.pilote-droite {
 margin: 30px 0 0 0;
}

div.derouler {
 position: relative;
 float: right;
 top: 0px;
 right: 0px;
 font-size: 9px;
 font-weight: normal;
 font-style: italic;
 cursor: pointer;
}

div.signature {
 position: relative;
 float: right;
 top: 0px;
 right: 0px;
 font-weight: normal;
 }