/* Webcarnews.com - home2009.css
 *
 * Couleurs:
 *  - bordures  : #c7c7c7
 *  - bleu      : #3a3a3a
 *  - bleu2     : #353a64
 *  - bleu foncé: #0c0c6d
 *  - gris foncé: #3c3c3c
 *  - rouge     : #af1513
 *  - orange    : #e16319
 */

#content { padding: 3px }
#left, #right { float: left }
#left { margin-right: 5px; _margin-right: -3px /* M'énerve ce con d'IE */ }
#right { width: 301px }
#bottom { clear: left }

/* carousel */
#carousel {
  width: 677px; height: 350px; border: 1px solid #c7c7c7;
  overflow: hidden; position: relative;
  font-family: Arial, sans-serif;
}
#carousel .photo { position: absolute; top: 4px; left: 4px; width: 512px; height: 320px; cursor: pointer }
#carousel-bar {
  position: absolute; bottom: 4px; left: 4px;
  width: 669px; height: 22px; line-height: 22px;
  background: url(../images/carousel/bg.gif) repeat-x;
  text-align: center; font-size: 12px
}
#carousel-left { position: absolute; top: 0; left: 0 }
#carousel-right { position: absolute; top: 0; right: 0 }
#carousel p, #carousel h2, #carousel em, #carousel strong {
  display: block; margin: 0; padding: 0 6px 0 522px;
}
#carousel h2 { margin-bottom: 10px; font-size: 11px }
#carousel em, #carousel strong { font-size: 11px }
#carousel p { font-family: Arial; text-align: justify; height: 196px; overflow: hidden }
#carousel strong { padding-top: 4px; color: #3a3a3a }
#carousel em { font-style: normal; font-weight: bold; color: #979797 }
#carousel div.more { position: absolute; right: 8px; bottom: 32px }

/* Boîte bleue */
.box { clear: left; margin-top: 16px }
.box .title { height: 30px; background: url(../images/noir/box_title_bg.gif) repeat-x left top }
.box .title h2 {
  float: left; line-height: 30px;
  margin: 0 0 0 32px; padding-left: 10px;
  font: 15px Arial, sans-serif;
  background: url(../images/noir/box_title_left.gif) no-repeat;
}
.box .title h2 b {
  display: block; float: left; line-height: 30px;
  padding-right: 10px; color: #3a3a3a;
  background: transparent url(../images/noir/box_title_right.gif) no-repeat right top;
}
.box .title a.more { display: block; float: right; padding: 9px 30px 0 0; color: white; font-weight: bold }
#left .box { width: 678px }
/* Onglets */
ul.tabs { height: 32px; background: #353A64 }
ul.tabs li { overflow: hidden; width: 113px; height: 32px; text-align: center; float: left; background: #3a3a3a url(../images/noir/box_tab_blue.gif) no-repeat }
ul.tabs li a { color: white }
ul.tabs li a:hover { text-decoration: none }
ul.tabs li.green { background: #47820e url(../images/noir/box_tab_green.gif) no-repeat }
ul.tabs li.selected { background: white url(../images/noir/box_tab_white.gif) no-repeat }
ul.tabs li.selected a { color: #3a3a3a }
ul.tabs li b { cursor: pointer }
/* Alignement vertical (cf. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html) */
/* CSS hacks: http://www.webdevout.net/css-hacks#in_css-selectors */
ul.tabs li { overflow: hidden; position: relative }
ul.tabs>/**/ li { display: table; position: static }
ul.tabs li b { position: absolute; top: 50%; left: 50% }
ul.tabs>/**/ li b { display: table-cell; vertical-align: middle; position: static; top: auto; left: auto }
ul.tabs li b a { line-height: 10px; position: relative; top: -50%; left: -50% }
ul.tabs>/**/ li b a { left: auto }
/* Contenu des onglets */
.box-content { border: 1px solid #c7c7c7; border-top: 0; clear: left  }
.tab-content { padding: 10px 0 0 8px }
.tab-content h3 { margin: 0; padding: 0.2em 0 0.5em 0; font: bold 14px Arial, sans-serif }
/* ATTENTION: au-dessus de 167, GROS BUG sous IE6 */
.tab-content .article { position: relative; width: 157px; margin-right: 10px; height: 330px; float: left; overflow: hidden }
.tab-content .article h4 { min-height: 4em; margin: 0.1em 0 0 0; font-size: 11px }
.tab-content .article img { padding: 2px; border: 1px solid #c7c7c7; width: 151px; height: 113px; }
/*.tab-content .article p, .tab-content .article h4 { padding-right: 4px }*/
/*.tab-content .article .more { display: block; padding: 1em 3em 0 0; text-align: right }*/
.tab-content .article .more { display: block; text-align: right; position: absolute; bottom: 1px; right: 2em; background: #fff }
.tab-footer { clear: left; height: 70px; position: relative }
.tab-footer .button { position: absolute; bottom: 4px; right: 4px }
.tab-footer .ad { position: absolute; left: -1px; bottom: -1px; font-size: 0 }

/* Boutons */
a.button {
  text-decoration: none;
  display: block; width: 199px; height: 47px; line-height: 47px;
  text-align: center; font: bold 12px Arial, sans-serif; color: white
}
/* FIXME: sous FF3, obligé de remettre le line-height, pq ??? */
a.button.orange { line-height: 47px; background: url(../images/button_orange.gif) no-repeat }
a.button:hover { text-decoration: none }

/* Comparateur */
.photo-box { border: 1px solid #c7c7c7; padding: 4px; position: relative }
/*** https://developer.mozilla.org/En/Useful_CSS_tips/Color_and_Background */
.photo-box h4 {
  margin: 0; padding: 6px 12px;
  position: absolute; bottom: 4px;
  font: bold 12px Arial, sans-serif;
  background: url(../images/blend.png) repeat-x;
}
#comparateur .photo-box h4 a { color: black; display: block }
.photo-box h4 em { color: #3c3c3c; font-style: normal }
#comparateur .box-content { padding: 6px 0 6px 8px }
#comparateur .photo-box { float: left; margin-right: 6px }
#comparateur .photo-box img { display: block; width: 206px; height: 154px }
#comparateur .photo-box h4 { width: 182px }

/* Liens communication */
#bottom {
  margin: 0 10px; position: relative; top: 15px; height: 120px;
  background: url(../images/bottom_sep.gif) no-repeat 0 50px
}
#bottom div { float: left; width: 215px; padding-right: 20px; font-family: Arial, sans-serif }
#bottom div h5 {  margin: 0; padding: 0; font-size: 13px; color: #e16319 }
#bottom div p { margin: 0; padding: 0; display: inline; font-size: 10px }
#bottom div a { font-size: 10px }
#bottom .last { width: 500px; margin-top: 20px }

/* Vidéos */
#videos { margin-top: 3px }
#videos ul.tabs { height: 32px; width: 301px }
#videos ul.tabs li { height: 32px; width: 150px; background: #353a64 url(../images/videos_tabs.gif) no-repeat left -32px }
#videos ul.tabs li.first { padding-right: 1px }
#videos ul.tabs li.selected a { color: #e16319 }
#videos ul.tabs li.selected { background: #353a64 url(../images/videos_tabs.gif) no-repeat left top }
#videos ul.tabs li a { color: white }
#videos .tab-content { position: relative; height: 270px }
#videos .tab-content a.first img { width: 250px; height: 189px }
#videos .tab-content a.first {
  position: absolute; top: 10px; left: 20px; display: block;
  padding: 4px; border: 1px solid #c7c7c7;
  font-size: 0; line-height: 0; /* Mmm ? Bug de marge */
}
#videos .tab-content .more { position: absolute; top: 214px; left: 11px; display: block; }
#videos .tab-content .more a img { width: 80px; height: 60px; }
#videos .tab-content .more a { margin: 0 4px }
#videos .tab-content a.cartube { top: 27px }
#videos .tab-content a.voir { position: absolute; top: 83px; left: 87px; z-index: 100; background: url(../images/blend.png) repeat-x; width: 130px; height: 70px; line-height: 70px; text-align: center; font: bold 13px Arial, sans-serif; color: #353a64 }
#videos .tab-content.cartube a.voir { top: 100px; line-height: 70px }
#videos .tab-content.cartube a.first { top: 27px }
/* FIXME: sous FF3, obligé de remettre le line-height, pq ??? */
#videos .tab-content a.voir { line-height: 70px }

.ads-boxes { margin: 10px 0; font-size: 0 }
.ads-boxes img { padding: 5px; border: 1px solid #c7c7c7; border-bottom: 0 }
.ads-boxes img.last { padding: 5px; padding-right: 3px; border: 1px solid #c7c7c7 }

/* Partenaires, Toutes les marques, tous les thèmes */
#partners { height: 100px }
#partners img { border: 1px solid #c7c7c7 }
#partners a.more { clear: left; float: right; padding-right: 26px }
#partners ul, #brands ul, #topics ul { float: left; margin-top: 10px; margin-left: 10px }
#partners ul li, #brands ul li, #topics ul li { display: inline; float: left }
#brands ul li a, #topics ul li a { font: 11px Arial, sans-serif }
#partners ul li { width: 139px }
#brands ul li { width: 120px }
#topics ul li { width: 146px; padding-right: 15px }
#topics ul li a { font-weight: bold }
#brands a, #topics a { color: #3a3a3a }

/* Liens RSS de bas de page */
#rss {
  clear: left;
  margin-top: 10px; padding: 8px 0 8px 35px;
  background: url(../images/rss.gif) no-repeat 5px 50%;
  border-top: 1px dotted #979797
}

/* Footer */
#footer {
  margin-bottom: 1px;
  height: 93px; background: url(../images/footer.jpg) no-repeat;
}
#footer .col {
  padding: 17px 0 0 40px;
  width: 110px; float: left;
  line-height: 11px;
}
#footer .col a {
  color: #979797;
  font: 11px Arial, sans-serif;
}
#trackers { line-height: 25px; height: 25px; padding-left: 2px }
#trackers img { vertical-align: middle }

/* Skyscraper */
#ads-skyscraper { position: absolute; left: 50%; margin-left: 498px; top: 148px }