/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Fichier: style.css * Type: XHTML 1.0 Transitional * Auteur: Expansion - www.expansion.be - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ /* BODY - HTML ==========================================================================================================================================================*/ * { margin: 0; padding: 0; } html,body { height: 100%; } body { background: #fff; margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: 10px; overflow: hidden; } /* FIN BODY - HTML */ /* ELEMENTS ==========================================================================================================================================================*/ a { text-decoration: underline; outline: none; } a:hover { text-decoration: none; } .clear { clear: both; } img { border: 0; } img.imgleft { float: left; display: inline; margin: 0 20px 10px 0; border: 0; } /* FIN ELEMENTS */ /* BLOCS STRUCTURE ==========================================================================================================================================================*/ #site { position: absolute; z-index: 98; width: 980px; height: 720px; left: 50%; top: 20px; margin: 0 0 0 -490px; } #bottom { position: absolute; z-index: 5; bottom: 0; left: 0; background: url(../images/bg_bottom.png) repeat-x; width: 100%; height: 273px; } #bg_inscription { background: url(../images/background_inscription.png) no-repeat 0 0; width: 507px; height: 251px; margin: 2px 0 0 -453px; position: absolute; left: 50%; } #logo { position: absolute; display: block; bottom: 230px; left: 0; background: url(../images/logo.png) no-repeat 0 0; width: 315px; height: 520px; } #drag { position: absolute; z-index: 1000; top: 0; right: 0; width: 630px; margin: 70px 0 0 35px; overflow: hidden; } /* Scroll horizontal */ #scroll { width: 630px; overflow: hidden; position: relative; z-index: 1001; } .panelContainer { width: 25000px; } .panelContainer .panel { float: left; position: relative; z-index: 1001; width: 590px; padding: 0 20px 0 20px; overflow: hidden; } .panelContainer .page { background: url(../images/bg_content.png) repeat 0 0; } /* Scroll vertical */ .scrollInside { width: 630px; height: 620px; overflow: hidden; position: relative; z-index: 1001; } .panelContainerInside { width: 620px; height: 25000px; } .panelContainerInside .panelInside { position: relative; z-index: 1001; width: 590px; height: 620px; overflow: hidden; } /* FIN BLOCS STRUCTURE */ /* HOMEPAGE ==========================================================================================================================================================*/ #home { display: block; background: url(../images/home.jpg) no-repeat 0 0; position: absolute; top: 50%; left: 50%; width: 717px; height: 445px; margin: -222px 0 0 -358px; cursor: pointer; } #inscription { display: none; width: 305px; height: 223px; padding: 20px 0 0 10px; position: absolute; bottom: 0; } #inscription h1 { color: #fff; font-weight: bold; font-size: 26px; padding: 0 0 10px 0; } #inscription h1 span { font-size: 14px; } #inscription p { font-size: 12px; color: #fff; } #bouton_inscription { display: block; background: url(../images/bouton_inscription.png) no-repeat 0 0; width: 277px; height: 62px; margin: 10px 0 0 0; cursor: pointer; } #bouton_inscription:hover { background: url(../images/bouton_inscription.png) no-repeat 0 -60px; } #header_home { position: absolute; margin: 0 0 0 45px; bottom: 300px; } #blocs_home { position: absolute; bottom: 5px; margin: 0 0 0 30px; } #blocs_home h1 { display: none; font-size: 16px; color: #fff; text-align: center; display: block; height: 40px; line-height: 40px; margin: 0 0 30px 0; } #blocs_home h1 a { color: #fff; text-decoration: none; } #blocs_home p { display: none; font-size: 12px; color: #fff; padding: 15px 10px 0 10px; line-height: 14px; margin: 0; } #blocs_home p.more a { display: block; background: #0778a7; color: #fff; font-weight: bolder; text-align: center; text-decoration: none; padding: 1px 0 1px 0; margin: 5px 0 0 0; } #blocs_home div { float: left; display: inline; background: url(../images/bg_bloc.png) no-repeat 0 0; width: 159px; height: 231px; padding: 5px 10px 0 10px; } /* FIN HOMEPAGE */ /* CONTENU ==========================================================================================================================================================*/ .panel a { color: #126387; font-weight: bold; } .panel h2 { font-size: 17px; color: #126387; margin: 10px 0 5px 0; text-transform: uppercase; } .panel h2 span { color: #98bf0e; } .panel h3 { font-size: 14px; color: #126387; margin: 15px 0 5px 0; } .panel h4 { font-size: 13px; color: #126387; margin: 15px 0 5px 0; } .panel h4 span { color: #98bf0e; } .panel p { font-size: 11px; color: #707070; line-height: 16px; margin: 5px 20px 10px 0; } .panel p span { color: #126387; font-weight: bold; } .panel p.fleches { background: url(../images/fleches.png) no-repeat 0 0; padding: 6px 0 0 20px; } .panel ul li { color: #707070; font-size: 11px; margin: 5px 0 5px 30px; } .colonne_gauche,.colonne_droite { display: inline; float: left; padding: 0; width: 295px; } #fleche_top { display: block; background: url(../images/fleches_top.png) 0 0 no-repeat; position: absolute; z-index: 2000; top: 10px; right: 10px; width: 24px; height: 24px; } #fleche_bottom { display: block; background: url(../images/fleches_bottom.png) 0 0 no-repeat; position: absolute; z-index: 2000; bottom: 10px; right: 10px; width: 24px; height: 24px; } #fleche_top:hover,#fleche_bottom:hover { background-position: 0 -24px; } label.error { color: #ff0000; font-size: 11px; padding: 0 0 0 5px; } span.FBConnectButton_Simple { background: none; } span.FBConnectButton_Text_Simple { margin: 0; } p.wallonia_more a { position: relative; margin: 15px auto; width: 300px; background: #126387; color: #fff; padding: 2px; display: block; text-decoration: none; text-align: center; } p.wallonia_more a:hover { background: #98bf0e; } div.programmec { float: left; display: inline; width: 224px; margin: 5px 15px 0 15px; padding: 10px 14px 10px 14px; background: #126387; color: #fff; } div.programmec h3 { margin: 0; padding: 0 0 10px 0; color: #fff; } div.programmec h4 { background: url(../images/fleches.png) no-repeat 0 0; margin: 0; padding: 7px 0 0 20px; color: #98bf0e; } div.programmec p { color: #fff; } div.programmec p a { color: #fff; } #tab2{ clear: both; } #tab2 tr ul { list-style: none; } .list{ float: left; margin-top: 60px; margin-left:20px; } ul.tabs { left: 350px; padding: 0; float: right; list-style: none; height: 32px; width: 98%; position:absolute; } ul.tabs li { float: left; margin: 0 5px 0 0; padding: 0; height: 31px; line-height: 31px; background: #aaa; overflow: hidden; position: relative; } ul.tabs li a { text-decoration: none; color: #fff; display: block; font-size: 14px; font-weight: bolder; padding: 0 20px; outline: none; } ul.tabs li a:hover { background: #ddd; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: #126387; } .tab_content { font-size: 1.2em; } /* FIN CONTENU */ /* SOUS MENU ==========================================================================================================================================================*/ #onglets { position: absolute; margin-left: 980px; margin-top: 90px; z-index: 9999; overflow: hidden; width: 0px; } #onglets .onglet { display: block; clear: both; width: 30px; margin: 0 0 5px 0; text-decoration: none; text-align: center; color: #fff; font-weight: bolder; font-size: 13px; } #onglets #onglet1 { background: url(../images/onglet_wal.png) no-repeat 0 center; } #onglets #onglet1:hover { background: url(../images/onglet_wal.png) no-repeat -30px center; } #onglets #onglet1.onglet_active { background: url(../images/onglet_wal.png) no-repeat -30px center; } #onglets #onglet2 { background: url(../images/onglet_plan.png) no-repeat 0 center; } #onglets #onglet2:hover { background: url(../images/onglet_plan.png) no-repeat -30px center; } #onglets #onglet2.onglet_active { background: url(../images/onglet_plan.png) no-repeat -30px center; } #onglets #onglet3 { background: url(../images/onglet_vid.png) no-repeat 0 center; } #onglets #onglet3:hover { background: url(../images/onglet_vid.png) no-repeat -30px center; } #onglets #onglet3.onglet_active { background: url(../images/onglet_vid.png) no-repeat -30px center; } #onglets #onglet4 { background: url(../images/onglet_pro.png) no-repeat 0 center; } #onglets #onglet4:hover { background: url(../images/onglet_pro.png) no-repeat -30px center; } #onglets #onglet4.onglet_active { background: url(../images/onglet_pro.png) no-repeat -30px center; } #onglets #onglet5 { background: url(../images/onglet_in.png) no-repeat 0 center; } #onglets #onglet5:hover { background: url(../images/onglet_in.png) no-repeat -30px center; } #onglets #onglet5.onglet_active { background: url(../images/onglet_in.png) no-repeat -30px center; } #onglets #onglet6 { background: url(../images/onglet_real.png) no-repeat 0 center; } #onglets #onglet6:hover { background: url(../images/onglet_real.png) no-repeat -30px center; } #onglets #onglet6.onglet_active { background: url(../images/onglet_real.png) no-repeat -30px center; } /* FIN SOUS MENU */ /* PARTENAIRES ==========================================================================================================================================================*/ .slide p { text-align: center; font-size: 12px; font-weight: bolder; } a.cases { position: absolute; display: block; z-index: 999; width: 16px; height: 16px; text-decoration: none; cursor: pointer; color: #fff; font-weight: bolder; text-align: center; line-height: 15px; background: #aacb23; } #case1 { display: none; } #case2 { top: 186px; left: 290px; } #case3 { top: 185px; left: 318px; } #case4 { top: 166px; left: 387px; } #case5 { top: 180px; left: 257px; } #case6 { top: 114px; left: 480px; } #case7 { top: 144px; left: 483px; } #case8 { top: 180px; left: 348px; } #case9 { top: 166px; left: 502px; } #case10 { top: 147px; left: 464px; } #case11 { top: 167px; left: 278px; } #case12 { top: 174px; left: 198px; } #case13 { top: 362px; left: 486px; } #case14 { top: 160px; left: 116px; } #case15 { top: 100px; left: 95px; } #case16 { top: 201px; left: 265px; } #case17 { top: 212px; left: 336px; } #case18 { top: 144px; left: 444px; } #case19 { top: 114px; left: 502px; } #case20 { top: 182px; left: 526px; } .caption { position: absolute; z-index: 1000; color: #fff; font-weight: bolder; width: 143px; height: 139px; padding : 5px; margin: 0; background: url(../images/mouse.png) no-repeat 0 0; } .caption img { margin: 3px 0 0 0; } #caption1 { display: none; } #caption2 { margin: -2px 0px 0px 200px; } #caption3 { margin: -2px 0px 0px 230px; } #caption4 { margin: -21px 0px 0px 299px; } #caption5 { margin: -5px 0px 0px 170px; } #caption6 { margin: 100px 0px 0px 392px; background: url(../images/mouse2.png) no-repeat 0 0; padding : 20px 5px; height: 124px; } #caption7 { margin: 130px 0px 0px 394px; background: url(../images/mouse2.png) no-repeat 0 0; padding : 20px 5px; height: 124px; } #caption8 { margin: -7px 0px 0px 259px; } #caption9 { margin: -21px 0px 0px 414px; } #caption10 {margin: 132px 0px 0px 374px; background: url(../images/mouse2.png) no-repeat 0 0; padding : 20px 5px; height: 124px; } #caption11 { margin: -19px 0px 0px 189px; } #caption12 { margin: -14px 0px 0px 110px; } #caption13 { margin: 180px 0px 0px 398px; } #caption14 { margin: -26px 0px 0px 29px; } #caption15 { margin: 88px 0px 0px 8px; background: url(../images/mouse2.png) no-repeat 0 0; padding : 20px 5px; height: 124px; } #caption16 { margin: 15px 0px 0px 178px; } #caption17 { margin: 30px 0px 0px 249px; } #caption18 { margin: 131px 0px 0px 357px; background: url(../images/mouse2.png) no-repeat 0 0; padding : 20px 5px; height: 124px; } #caption19 { margin: 100px 0px 0px 412px; background: url(../images/mouse2.png) no-repeat 0 0; padding : 20px 5px; height: 124px; } #caption20 { margin: 0px 0px 0px 438px; } /* FIN PARTENAIRES */ /* COCKTAIL ==========================================================================================================================================================*/ #cocktail { position: relative; z-index: 9998; padding: 10px 0 0 0; } #cocktail p { margin: 0 0 5px 0; padding: 0; } #cocktail p span { margin: 0 0 5px 0; padding: 0 5px 0 0; float: left; width: 70px; font-weight: bolder; text-align: right; } #cocktail p span strong { color: #D82145; } #cocktail input { color: #707070; border: 1px solid #f1f1f1; width: 200px; padding: 1px 3px 1px 3px; background: #fff; } #cocktail input.checkbox { width: 20px; color: inherit; border: none; padding: inherit; background: none; } #cocktail #submit { background: #98bf0e; float: right; border: 0; width: inherit; color: #fff; padding: 5px 3px 5px 3px; margin: 10px 0 0 0; cursor: pointer; font-weight: bolder; text-transform: uppercase; font-size: 11px; } /* FIN COCKTAIL */ /* SCROLL PARTENAIRES ==========================================================================================================================================================*/ .control { display: block; width: 24px; height: 24px; cursor: pointer; text-indent: -2500px; } #leftControl { float: left; background: url(../images/fleches_left.png) no-repeat 0 0; } #leftControl:hover { background-position: 0 -24px; } #rightControl { float: right; background: url(../images/fleches_right.png) no-repeat 0 0; } #rightControl:hover { background-position: 0 -24px; } #slidesContainer { font-size: 13px; float: left; width: 542px; text-align: center; overflow: hidden; } #slidesContainer a { position: relative; margin: 0 auto; width: 300px; background: #126387; color: #fff; padding: 5px; display: block; text-decoration: none; } #slidesContainer a:hover { background: #98bf0e; } /* FIN SCROLL PARTENAIRES */ /* BACKGROUNDS ==========================================================================================================================================================*/ #slider { position: absolute; top: 0; left: 0; z-index: 1; } .tf_bg{ width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; } .tf_bg img{ position: absolute; top: 0px; /*-482px; -(imgh/2 - wh/2) */ left: 0px; /* calculate a negative value to center horizontally */ width: 100%; /* windowwidth plus negative value of left */ /*height:1650px; /* windowheight plus negative value of top */ z-index: 1; display: none; } /* FIN BACKGROUNDS */ /* MENU ==========================================================================================================================================================*/ #menu { position: absolute; z-index: 20; top: 0; right: 0; width: 635px; padding: 15px 0 0 30px; } #menu ul { list-style-type: none; margin: 0; padding: 0; } #menu ul li { float: left; display: inline; margin: 0; padding: 0; } #menu ul li a { float: left; display: block; background: url(../images/bg_menu.png) repeat-x 0 0; margin: 0 0 0 15px; padding: 20px 1px 0 1px; color: #000; text-decoration: none; font-weight: bold; text-transform: uppercase; font-size: 12px; } #menu ul li a:hover { background: url(../images/bg_menu_hover.png) repeat-x 0 0; color: #0072a1; } #menu ul li.active a { background: url(../images/bg_menu_hover.png) repeat-x 0 0; color: #0072a1; } /* FIN MENU */ /* LOADING ==========================================================================================================================================================*/ .QOverlay { background-color: #015f86; z-index: 9999; } .QLoader { background-color: #fff; height: 1px; } .QAmt { color: #fff; font-family: "Trebuchet MS",Arial,Helvetica,sans-serif; font-size: 40px; font-weight: bold; line-height: 50px; height: 50px; width: 100px; margin: -60px 0 0 -50px; } /* FIN LOADING */