@charset "utf-8";

/* CSS Document */


/* --------------------------------------
-----------------------------------------
WRITTEN BY BLUE ROOM

If you want to know about how I did something, just ask me. :)

---------------------------------------*/

html { height: 100%; }

body { height: 100%; background-color:#191919; background-image:url(../../images_css/body_bg.jpg); background-position:center top; background-repeat:no-repeat; }

#bandeau { position:absolute; left:0; top:0; }

#container { position: relative; min-height:100%; }

.png_bg { background:transparent }


/*--- TEXT ---*/
.color{color:#ff6002;}

/*  IMAGES  */
.right{float:right; margin-right:100px;}

/* --------------------------------------
HEADER
---------------------------------------*/

#logo { margin-left:185px; margin-top:0; float:left; width:568px; }

/*---THEME---*/

#theme { display:block; float:right; margin-top:10px; width:40px; height:11px; padding-right:10px; background-image:url(../../images_css/arrow.gif); background-position:right top; background-repeat:no-repeat; }

#theme a { color:#FFF; font-size:0.83em; text-decoration:none; }

#theme.active { background-position:right bottom; text-decoration:none; }

#theme a:hover { text-decoration:none; }

#log { display:block; float:right; margin-top:10px; width:85px; height:11px; padding-right:10px; background-image:url(../../images_css/arrow.gif); background-position:right top; background-repeat:no-repeat; margin-right:20px; }

#log a { color:#FFF; font-size:0.83em; text-decoration:none; }

#log.active { background-position:right bottom; text-decoration:none; }

#log a:hover { text-decoration:none; }

#theme_container { top:40px; right:0; width: 159px; height:74px; background-image:url(../../images_css/theme_bg.png); background-repeat:no-repeat; }

#theme_container a{ border-bottom:none;}

#log_container { top:40px; right:49px; width: 224px; height:189px; background-image:url(../../images_css/log_bg.png); background-repeat:no-repeat; }

#log_container a{ border-bottom: #FFF;}

#formulaire_login a{text-decoration:underline;}

#formulaire_login label{ float:left; margin-right:5px; font-size:0.70em; text-align:right; display:block; width:80px; height:15px; margin-top:10px; padding-top:5px; }

#formulaire_login .input_text{margin-top:10px;}

.bouton_login { display:block; width:114px; height:23px; background-image:url(../../images_css/login.png); background-position:0 0; float:right; margin-top:7px; margin-right:2px; }

.bouton_login:hover { background-position:0 23px; }

.toggle_container { margin:0; padding:0; overflow: hidden; clear: both; z-index:60; position:absolute; }

.bloke { margin:20px 10px 10px 10px; }

.couleurs { margin-top:5px; margin-left:10px; }

/*---RSS---*/

#rss a { display:block; float:right; width:154px; height:75px; background-image:url(images_ccs_orange/rss_orange.png); background-position:left top; background-repeat:no-repeat; margin-top:80px; margin-bottom:20px; }

#rss a:hover { background-position:bottom left; }

/*---MAIN MENU---*/

#menu { float:left; display:block; height:50px; background-image:url(../../images_css/main_menu_bg.png); background-repeat:no-repeat; width:960px; position:relative; z-index:2; }

#menu div { float:left; }

#cyber a { background-image:url(images_ccs_orange/cyber_orange.png); background-position:0 0; background-repeat:no-repeat; width:122px; height: 50px; margin-left:10px; margin-top:-50px; float:left; }

#cyber a:hover { background-position:bottom left; }

#trier {margin-left:20px;}

#jeux a { background-image:url(images_ccs_orange/jeux_orange.png); background-position:top left; width:120px; height: 50px; margin-top:-50px; float:left; }

#jeux a:hover { background-position:bottom left; }

#accessoires a { background-image:url(images_ccs_orange/accessoires_orange.png); background-position:top left; width:140px; height: 50px; margin-top:-50px; float:left; }

#accessoires a:hover { background-position:bottom left; }

.menu_subject { padding-top:50px; }

#menu div ul { position: absolute; margin:0 0 0 0; background-color:#000; line-height:35px; display:none; }

#menu ul, #menu li { margin: 0; padding: 0; list-style-type: none; list-style-position:outside; }

#menu ul li { padding:0 15px 0 27px; height:33px; font-size:0.70em; width:100px; background-image:url(../../images_css/dropdown_li_bg.gif); background-position:bottom; background-repeat:repeat-x; }

#menu ul li a { color:#c0c0c0; text-decoration: none; }

#menu ul li a:hover { color:#ff6002; }

#forum a { background-image:url(images_ccs_orange/forum_orange.png); background-position:top left; width:126px; height: 50px; float:left; }

#forum a:hover { background-position:bottom left; }

#contact a { background-image:url(images_ccs_orange/contact_orange.png); background-position:top left; width:99px; height: 50px; float:left; margin-right:10px; }

#contact a:hover { background-position:bottom left; }

/* ---FORM NEWSLETTER---*/

#form_newsletter { height:50px; display:block; }

#form_newsletter label.text{margin-top:0;}

label.text { display: block; float: left; margin-top:13px; }

.input { outline: none 0; height: 15px; width: 105px; background-color: transparent; border: none 0; }

.input_text { background:url(../../images_css/input.png) no-repeat top left; border:none; outline:0; height:14px; width:104px; margin-top:13px; padding:2px 5px 5px 5px; display:block; float:left; }

.input_text:hover { background-position:left bottom; }

.bouton_submit { display:block; width:87px; height:33px; background-image:url(../../images_css/submit.png); background-position:0 0; float:left; margin-top:7px; }

.bouton_submit:hover { background-position:0 32px; }

/* --------------------------------------
SLIDE SHOW
---------------------------------------*/
#slide_show { height:343px; background-image:url(../../images_css/slideshow_bg.png); float:left; padding:29px 80px 86px 80px; width:800px; position:relative; z-index:1}

/* GALLERY LIST */
/* IMPORTANT - Change '#photos' to the ID of your gallery list to prevent a flash of unstyled content */
#photos { visibility: hidden; }

/* GALLERY CONTAINER */
.gallery {}

/* LOADING BOX */
.loader { background: url(../../css/loader.gif) center center no-repeat #ddd; }

/* GALLERY PANELS */
.panel { margin-bottom:20px; }

/* DEFINE HEIGHT OF PANEL OVERLAY */
/* NOTE - It is best to define padding here as well so overlay and background retain identical dimensions */
.panel .panel-overlay, .panel .overlay-background { height: 60px; padding: 0 1em; }

/* PANEL OVERLAY BACKGROUND */
.panel .overlay-background { background: #222; }

/* PANEL OVERLAY CONTENT */
.panel .panel-overlay { color: white;}

.panel-overlay h3{color:#ff6002; margin:5px 0 5px 0;}

.panel-overlay p{font-size:0.70em;}

.panel .panel-overlay a { color: white; text-decoration: underline; font-weight: bold; }

/* FILMSTRIP */
/* 'margin' will define top/bottom margin in completed gallery */
.filmstrip { margin:5px;}

/* FILMSTRIP FRAMES (contains both images and captions) */
.frame { }

/* WRAPPER FOR FILMSTRIP IMAGES */
.frame .img_wrap { border: 1px solid #F06; }

/* WRAPPER FOR CURRENT FILMSTRIP IMAGE */
.frame.current .img_wrap { border-color:#ff6002; }

/* FRAME IMAGES */
.frame img { border: none; }

/* FRAME CAPTION */
.frame .caption { font-size: 11px; text-align: center; color: #888; }

/* CURRENT FRAME CAPTION */
.frame.current .caption { color: #000; }

/* POINTER FOR CURRENT FRAME */
.pointer { border-color: #000; }

/* --------------------------------------
CONTENT SECONDARY
---------------------------------------*/

.content_secondary{background-image:url(../../images_css/main_secondary_bg.gif); background-repeat:repeat-x; background-position:top left; margin-top:12px;}

.inside_div {margin-top:20px; float:left; width:100%}

.inside_div h3{color:#ff6002;}

.inside_div h4{color:#ff6002;}

/* ARTICLE */

.article{ margin-top:16px; height:165px; overflow:hidden; border-bottom:#626262 dotted 1px;}

.article_detail{ margin-top:16px; border-bottom:#626262 dotted 1px;}

.vignette{ width:201px; height:135px; background-image:url(../../images_css/vignette_bg.jpg); padding:5px 6px; margin-right:20px; float:left;}

.vignette img{border:#666 solid 1px; width:199px; height:132px}

.vignette_jeu_access{ width:101px; height:141px; background-image:url(../../images_css/vignette_jeu_bg.jpg); padding:5px; margin-right:20px; margin-bottom:20px; float:left;}

.vignette_jeu_access img{border:#666 solid 1px;width:99px; height:139px;}

.text_article{ text-align:justify;}

.article h3{color:#ff6002;}

.article_detail h3{color:#ff6002;}

.article_detail h4{color:#ff6002;}

.pages{margin-top:20px;}

/* ---FORM ACCOUNT---*/

#form_account, #form_password, #form_contact{ float:left; margin-top:30px; margin-left:30px;}

#form_account fieldset{padding:15px; border:#626262 dotted 1px; height:170px; margin:10px 20px 10px 0; }

#form_account label{width:200px; text-align:right; padding:6px 0; margin-top:10px; margin-right:5px;}

#form_account legend{color:#ff6002; padding:5px;}

select{float:left; margin-top:15px; margin-right:5px;}

#jour{width:45px;}

#mois{width:50px;}

.bouton_effacer { display:block; width:78px; height:23px; background-image:url(images_ccs_orange/effacer_orange.png); background-position:0 0; float:left; margin-top:12px; margin-right:50px; margin-left:315px; }

.bouton_effacer:hover { background-position:0 23px; }

/* ---ACCOUNT---*/

.centrer{ margin-left:41%}

#bouton_modifier {display:block; width:78px; height:23px; background:url(images_ccs_orange/modifier_orange.png) left top; float:left; margin-top:12px;}
#bouton_modifier:hover{background-position:0 23px;}

/* ---FORM PASSWORD---*/

#form_password fieldset{padding:15px; border:#626262 dotted 1px;margin:10px 20px 10px 0; }

#form_password label{width:200px; text-align:right; padding:6px 0; margin-top:10px; margin-right:5px;}

#form_password legend{color:#ff6002; padding:5px;}

/* ---FORM CONTACT---*/

#form_contact fieldset {padding:15px; border:#626262 dotted 1px;margin:10px 20px 10px 0; height:180px; }

#form_contact label {width:200px; text-align:right; padding:6px 0; margin-top:10px; margin-right:5px;}

#form_contact legend {color:#ff6002; padding:5px;}

#message {width:281px; height:71px; background:url(../../images_css/textaera_bg.png) 0 0; float:left; border:none; margin-left:26px; margin-top:8px; padding:13px 5px 5px 5px}
#message:focus, #message:hover{background-position:0 88px;}

.message {width:281px; height:71px;}

/* ---FORM COMMANDER---*/

.bouton_commander {display:block; width:100px; height:23px; background:url(images_ccs_orange/commander_orange.png) left top; float:left; margin-top:12px; margin-bottom:20px; cursor:pointer;}
.bouton_commander:hover{background-position:0 23px;}

#formulaire_commande fieldset {padding:15px; border:#626262 dotted 1px;margin:10px 20px 10px 0; /*height:290px;*/ }

#formulaire_commande label {width:150px; text-align:right; padding:6px 0; margin-top:10px; margin-right:5px; display:block; float:left; font-size:0.70em}

#formulaire_commande legend{color:#ff6002; padding:5px;}

#formulaire_commande .bouton_commander{margin-left:155px;}

.toggle_form { margin:0; padding:0; overflow: hidden; clear: both;}

/* --------------------------------------
FOOTER
---------------------------------------*/
 
#footer {background: url(../../images_css/footer_bg.png) top left no-repeat  ; margin-top:20px; height:245px; float:left;}

/* MAIN THIRD */

.content_third{background:url(../../images_css/main_third_bg.png) top left no-repeat; margin-top:15px; height:140px;}

.content_third ul{margin-top:40px;}

.content_third li { padding-left:15px; background:url(../../images_css/arrow_li.png) no-repeat; margin-left:15px; margin-bottom:5px; font-size:0.80em;}
.content_third li a{color:#FFF; text-decoration:none; border-bottom:#FFF dotted 1px;}
.content_third li a:hover{border-bottom:none;}

/* MENU FOOTER */

#menu_footer{float:left; height:60px; padding-top:10px; font-size:0.95em;}

#menu_footer ul{margin-top:15px;}

#menu_footer ul li{color:#FFF; float:left; font-size:0.70em; margin-left:35px; margin-right:12px}

#menu_footer ul li img {margin-top:-55px;}

.blueroom{margin-bottom:-3px;}

#menu_footer ul li a{color:#FFF;}
#menu_footer ul li a:hover{color:#FFF; text-decoration:none;}

.logo_footer{margin:0 12px 0 12px;}

/* GALLERY FLICR */

#gallery-flickr ul {margin-top:30px;}

#gallery-flickr li {padding-left:0; float:left;}

#gallery-flickr li a{border:none;}

#gallery-flickr li a img{border:#FFF solid 3px;}

#gallery-flickr li a img:hover{border:#666 solid 3px;}

/* GALLERY SAINT-DENIS SAINT-PIERRE */

.galerie li {padding-left:0; float:left; margin:10px;}

.galerie li a{border:none;}

.galerie li a img{border:#FFF solid 3px;}

.galerie li a img:hover{border:#666 solid 3px;}

/* MAP */

.map {padding:10px; width:603px; border-top:#CCC 1px solid; border-left:#CCC 1px solid; border-bottom:#333 1px solid; border-right:#333 1px solid; background-color:#666; margin-left:auto; margin-right:auto;}