/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Structure -> XHMTL > XML > CSS2 > em :px :pt > Web design Version: 2006 Kamayo.com - HSBC - FRONT OFFICE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* Basic --------------------------------------------------------------------------@ */ body {margin:0; padding:0;background:#fff;font: normal 12px/15px Arial, Verdana, helvetica, sans-serif;color:#111;min-height:600px;height:600px;text-align:center} h1 {margin:0;font-size: 1.9em;} p {margin:0;} p img {margin:0;} img, img a {border:none;} blockquote {margin:0 15px 0 5px;} img.images_droite {float:right;margin: 0;} img.images_droite_plan {position:absolute;top:140px;margin:0; } img.images_left {float:left;margin:0; padding:0 8px 120px 0} img.images_left_bis {float:left;margin:0; padding:0 9px 10px 15px} img.images_left_courant {float:left;margin:0; padding:0 9px 10px 0} #nav h2 {margin:0 0 12px 0;padding-bottom:9px;border-bottom: 1px solid black;font-size: 1.5em;} ul li {font-size: 95%;list-style:none;margin:0} div#remonte {margin-top:-14px} div#remonte1 {margin-top:-10px} /* nav -------------------------------------------------------------------------------------@ */ div#nav li span {display: none} div#nav {width:auto;margin:0; padding:6px 0 0 0;} div#nav ul {padding:0;margin:0;height:13px} ul#menu {padding:0;margin:0;list-style-type: none;} ul#menu li {display: inline; padding:0;margin:0;} #nav li a {margin:0 2px 0 0;text-decoration: none} #nav li#jeu a {display: block; background: url(../medias/gjeu.gif) no-repeat 6px 0; float: left; width: 124px; height: 13px;} #nav li#jeu_v a {display: block; background: url(../medias/gjeu.gif) no-repeat 8px 0; float: left; width: 131px; height: 13px;} #nav li#offre a {display: block; background: url(../medias/goffres.gif) no-repeat 7px 0; float: left; width: 112px; height: 13px;} #nav li#offre_v a {display: block; background: url(../medias/goffres_v.gif) no-repeat 10px 0; float: left; width: 120px; height: 13px;} #nav li#agence a {display: block; background: url(../medias/gagences.gif) no-repeat 6px 0;float: left; width: 122px; height: 13px;} #nav li#agence_v a {display: block; background: url(../medias/gagences_v.gif) no-repeat 0 0;float: left; width: 119px; height: 13px;} #nav li#agence a:hover, #nav li#jeu a:hover {background-position: 6px -13px} #nav li#jeu_v a:hover {background-position: 8px -13px} #nav li#offre_v a:hover {background-position: 10px -13px} #nav li#agence_v a:hover {background-position: 0 -13px} #nav li#offre a:hover {background-position: 7px -13px} body#agences li#agence a {background-position: 6px -13px} body#agences li#agence_v a {background-position: 0 -13px} body#jeux li#jeu a {background-position: 6px -13px} body#jeux li#jeu_v a {background-position: 8px -13px} body#offres li#offre a {background-position: 7px -13px} body#offres li#offre_v a {background-position: 10px -13px} /* global -------------------------------------------------------------------------------------@ */ #global {width:948px;margin:auto;text-align:left;} #global_pop {width:414px;margin:1em auto;text-align:left;} #contenu {width:948px;margin:2px 0 0 0;text-align:left;} #contenu_bis {width:948px;margin:1em 0 0 0;text-align:left;background: url(../medias/separ_gj.gif) 0 30px no-repeat;} #contenu_pop {width:370px;margin:1em auto;text-align:left;} #content {width:948px;margin:4px auto 0 auto;text-align:left;border: 2px solid #e2e5e9;height:520px;border-bottom:none} #content_pop {width:382px;margin:auto;padding: 0;text-align:left;border: 2px solid #e2e5e9;height:auto;border-bottom:none} #content_pop p {margin:0;padding:0 5px 8px 1px;width:340px;color:#868687;font-size:95%} #content_pop h2 {margin:10px 0 0 0;padding:4px 0 4px 15px;width:355px;color:#868687;font-size:95%;background: url(../medias/puce_rouge.gif) no-repeat 0 6px;} #content_pop p.texte {margin:0;padding:0 0 0 15px;color:#111;} #content_pop p {margin:0;padding:0 0 7px 15px;color:#111;text-align:justify} #content_pop span.rouge {margin:0;padding:0;color:#ed0000} span.rouge a {margin:0;padding:0;color:#ed0000} #content_pop ul {list-style:none;margin:0 0 15px 0} #content_pop ul li {margin:0;padding:0 0 0 10px;width:333px;font-size:11px;color:#111;background: url(../medias/puce_grise.gif) 0px 4px no-repeat;} #contents {width:944px;margin:1em auto 0 auto;text-align:left;border: 2px solid #e2e5e9;height:515px;} #contenterreur {width:948px;margin:1em auto 0 auto;text-align:left;border: 2px solid #e2e5e9;height:515px;} /* Logos -------------------------------------------------------------------------------------@ */ #header {width:948px;margin:0 auto;padding-top:2px;height:65px;background: url(../medias/fb.gif) top left repeat-x;text-align:left;} #head {width:948px;margin:0 auto;padding:53px 0 0 0;height:0;background: url(../medias/log_fo.gif) top left no-repeat;text-align:left;} #header h1 {margin:0;background: url(../medias/log_fo.gif) top left no-repeat;text-align:left;height:50px;} #header {position: relative;} #header h1 {margin:0;} #header h1 a {width: 430px; position: absolute; top:0px; left:0px; display: block;overflow: hidden; font-size: 0px; height: 0; padding:0 0 50px 0;color:#fff;} #header h1 span, #head h1 span {display:none;} #header h2 {float:left;margin:-30px 0 0 0;text-align:right;height:50px;font-size: 12px;width:934px;font: normal 11px/15px Arial, Verdana, helvetica, sans-serif;color:#111;} #header h2 span {font: bold 14px/15px Arial, Verdana, helvetica, sans-serif;color:#111;} /* Contenu -------------------------------------------------------------------------------------@ */ #gauche {float: left;width: 370px;margin:0; padding:0;font-size: 95%; min-height:440px;height:auto;background: url(../medias/filet_accueil.gif) top right no-repeat;} #gauchegj {float: left;width: 370px;margin:0; padding:0;font-size: 95%;min-height:440px;height:460px;height:auto;background: url(../medias/filet_jeu.gif) top right no-repeat;} #gauche_bis {float: left;width: 370px;margin:0; padding:0;font-size: 95%;min-height:440px;height:420px;height:auto; } #gauche_ami {float: left;width: 370px;margin:0; padding:0;font-size: 95%;min-height:440px;height:370px;height:auto; background: url(../medias/fond-ami.gif ) 278px 60px no-repeat;} #gauche_contact {float: left;width: 370px;margin:0; padding:0;font-size: 95%;min-height:440px;height:420px;height:auto; background: url(../medias/fond_contact.gif ) 251px 60px no-repeat;} #gauche_offre {float: left;width: 370px;margin:0; padding:0;font-size: 95%;min-height:440px;height:420px;height:auto;} #gauche_agence {float: left;width: 410px;margin:0; padding:0;font-size: 95%;min-height:440px;height:400px;height:auto;} #gauche-content {margin:0; padding:0 12px 0 15px;} #gauche-content_accueil {margin:0; padding:0 12px 0 15px;height:442px;} #gauche-content_futur {margin:0; padding:0 12px 0 15px; background: url(../medias/visuel_futur.jpg ) 20px 60px no-repeat;height:300px} #gauche-content_projets {margin:0; padding:0 12px 0 15px; background: url(../medias/visuel_projets.jpg ) 20px 60px no-repeat;height:300px} #gauche-content_monde {margin:0; padding:0 12px 0 15px; background: url(../medias/visuel_monde.gif ) 20px 60px no-repeat;height:300px} #gauche-content_quotidien {margin:0; padding:0 12px 0 15px; background: url(../medias/visuel_quotidien.jpg ) 20px 60px no-repeat;height:300px} blockquote.agence {margin:0; padding:20px 0 0 200px;width:390px !important; width /**/:590px; /* for IE5/Win */;line-height:1.5em} blockquote.agence p {margin:0; padding:0 0 0 15px;} blockquote p.puce {margin:0; padding:0 0 15px 18px;background: url(../medias/puce_rouge.gif ) 0 3px no-repeat;} blockquote p.puces {margin:0; padding:0 0 15px 18px} blockquote.agence p a {color:#868687} blockquote h3 {margin:0; padding:0;font-size:13px} blockquote.agence h3 {margin:0; padding:0 0 0 15px;background: url(../medias/puce_rouge.gif ) 0 3px no-repeat;font-size:13px} #main {margin:0 0 0 373px; padding:0;height:438px;} #main_accueil {margin:0 0 0 373px; padding:0;height:440px;} #main_bis {margin:0 0 0 370px; padding:50px 0 0 0;height:388px;} #main_offre {margin:0 0 0 480px; padding:50px 0 0 0;height:370px;} #main_agence {margin:0 0 0 615px; padding:50px 0 0 0;height:388px;} #main-content {margin:0; padding: 0.5em 1.3em 0 0.3em;font-size: 95%;} #main-content p {margin:0;} #main-content h3 {margin:0;background: url(../medias/titre_agence.gif ) 0 0 no-repeat;height:35px} #main-content h3 {margin:0;color:#ed0000;padding:2px 0 0 234px;font-size:22px} #main-content em {display:none} #main-content h4 {margin:0;padding:0 0 1px 12px;background: url(../medias/puce_rouge.gif ) 0 3px no-repeat;font-size:13px;color:#111;font-weight:bold} #main-content h5, #vignette-offre h5 {margin:0;padding:0 0 4px 0;font-size:13px;color:#111;font-weight:bold;} blockquote p.add {margin:0;padding:0 0 3px 14px;font-size:12px;color:#868687;font-weight:normal;background: url() 14px 8px no-repeat;} blockquote p {font-size:12px;color:#868687;font-weight:normal} p.conditions {margin:0;padding-left:10px;font-size:9px;color:#949496;font-weight:normal;line-height:1.1em;font-family:Arial, Verdana, helvetica, sans-serif;text-align:justify} * html p.conditions {margin:0;padding-left:10px;color:#949496;font-weight:normal;line-height:1.1em;text-align:justify} p.conditions_ami {margin:0;padding:205px 10px 0 0;font-size:10px;color:#949496;font-weight:normal;line-height:1.1em;text-align:justify} p.conditions_contact {margin:0;padding:180px 10px 0 0;font-size:9px;color:#949496;font-weight:normal;line-height:1.1em;text-align:justify} p.conditions_offre {margin:0;padding:0 0 19px 10px;font-size:9px;color:#949496;font-weight:normal;line-height:1.1em;text-align:justify} p.conditions_offre1 {margin:0;padding:0 0 19px 10px;font-size:9px;color:#949496;font-weight:normal;line-height:1.5em;text-align:justify} p.titre {margin:0;padding:0 0 0 14px;line-height:1.41em;} p.titres {margin:0;padding:0 0 0 14px;} p.bis {margin:0;padding:0 0 0 24px;} p.cilck span {margin:0;background: url(../medias/fleche-clique.gif) top left no-repeat;height:30px;padding-left:30px} p.cilck span a {margin:0;color:#ed0000;} p.cilck span a:hover {margin:0;color:#ed0000;text-decoration:none} p.inter {margin:15px 0 0 0;padding:15px 0 0 0;color:#111;font-size:11px} div#conditions_generales {position:relative; top:-25px;left:225px;font-size:9px;font-weight:normal;line-height:1.1em} div#conditions_generales p a {font-size:9px;color:#ed0000;font-weight:normal;} div#conditions_generales p a:hover {font-size:9px;color:#ed0000;font-weight:normal;text-decoration:none} div.offre_texte {position:absolute;margin:60px 0 0 0;padding-left:20px;width:680px;font-size:12px;color:#868687;font-weight:normal;} div.suites p.suite {margin:-;width:auto;cursor:pointer;padding:0 0 4px 0;font-size:12px;font-weight:normal;} p.suite span {margin:0;padding:0} div.suites p.suite a {margin:-7px 0 0 0;padding-left:75px;width:340px; height:37px;background: transparent url(../medias/suite_generique.gif) top left no-repeat;display: block;color:#868687;text-decoration:none} div.suites p.suite a:hover {background-position: 0 -45px;text-decoration: none;display: block;cursor:pointer;color:#ed0000;text-decoration:none} div.valid p.suite {margin:0;width:auto;cursor:pointer;padding:20px 0 7px 0;font-size:12px;font-weight:normal;} p.suite span {margin:0;padding:0} div.valid p.suite a {margin:0;padding-left:90px;width:360px; height:37px;background: transparent url(../medias/suite_validez.gif) top left no-repeat;display: block;color:#868687;text-decoration:none} div.valid p.suite a:hover {background-position: 0 -47px;text-decoration: none;display: block;cursor:pointer;color:#ed0000;text-decoration:none} * html #vignette-agence {width:600px;} #visuel-gauche {margin:0; } #vignette-jeu {margin:0;padding:5px 0 70px 0;} #vignette-gjeu {margin:0;padding:20px 0 0 0;} #vignette-ami {margin:0;padding:20px 80px 0 0;} #vignette-offre {margin:70px 0 0 0;padding:10px 0 0 20px; border:4px solid #bdbdbe;width:430px;height:305px;} #vignette-agence {position:absolute;top:430px;margin: 30px 0 0 20px;padding:3px 0 7px 0; border:4px solid #bdbdbe;width:610px;height:40px;text-align:center; } #visuel_plan {float:right;margin:0 10px 0 0;padding:0; } /* nav agence -------------------------------------------------------------------------------------@ */ div.suite_agence p {margin: 0;width:auto;cursor:pointer;padding:0 ;font-size:12px;font-weight:normal;} div.suite_agence p.v_agence span, div.suite_agence p.v_monde span, div.suite_agence p.v_quotidien span, div.suite_agence p.v_projets span, div.suite_agence p.v_futur span {display:none} div.suite_agence p.v_agence a {margin:0 0 0 -9px;padding:0;width:300px; height:33px;background: transparent url(../medias/h1.gif) top left no-repeat;display: block;color:#868687;text-decoration:none;} div.suite_agence p.v_monde a {margin:0 0 0 -9px;;padding:0;width:300px; height:33px;background: transparent url(../medias/h2.gif) top left no-repeat;display: block;color:#868687;text-decoration:none;} div.suite_agence p.v_quotidien a {margin:0 0 0 -9px;;padding:0;width:300px; height:33px;background: transparent url(../medias/h3.gif) top left no-repeat;display: block;color:#868687;text-decoration:none} div.suite_agence p.v_projets a {margin:0 0 0 -9px;;padding:0;width:300px; height:33px;background: transparent url(../medias/h4.gif) top left no-repeat;display: block;color:#868687;text-decoration:none} div.suite_agence p.v_futur a {margin:0 0 0 -9px;padding:0;width:300px; height:33px;background: transparent url(../medias/h5.gif) top left no-repeat;display: block;color:#868687;text-decoration:none} div.suite_agence p.v_agence a:hover, div.suite_agence p.v_monde a:hover, div.suite_agence p.v_quotidien a:hover, div.suite_agence p.v_projets a:hover , div.suite_agence p.v_futur a:hover {background-position: 0 -37px;text-decoration: none;display: block;cursor:pointer;color:#ed0000;text-decoration:none} div.suite_agence p a.actif {background-position: 0 -37px;text-decoration: none; cursor:pointer;color:#ed0000;text-decoration:none} /* Flash -------------------------------------------------------------------------------------@ */ #globalflash {position:absolute;left: 50%;top: 50%;width: 948px;height: 575px;margin-top: -290px;margin-left: -470px;} hr.cleaner {clear:both;height:1px;margin: -1px 0 0 0; padding:0;border:none;visibility: hidden;} /* Form --------------------------------------------------------------------------@ */ fieldset {margin :1px 15px 0 0 ;padding:5px 0 0 0;border: none} fieldset span {font-weight:normal;text-align:left;color:#e60000;padding-left:10px} table {margin :1px 15px 0 15px ;border: none;font-size:11px} table td.intitule {text-align:right} form {margin :0;} label {font-weight:normal;text-align:left;color:#666;font-size:11px} input, textarea {border: 1px solid #999;padding: 0.2ex;background: #FFF;color:#333} * html div#valid {top:33px;} div#valid {position:absolute;top:34px;left:160px} #search p.code {margin:0; padding-top:10px;font-size:12px;color:#fff;font-weight:normal} #search p.code a {margin:0;;font-size:12px;color:#fff;font-weight:bold; text-decoration:underline} #search p.code a:hover {margin:0;;font-size:12px;color:#fff;font-weight:bold; text-decoration:none} #search h3 {margin:0 10px 8px 0; font-size:14px;color:#fff;} #search {width: 250px; position: relative; top:-160px;left:6px; overflow: hidden; padding:0 0 0 5px;margin-bottom:-148px;} #info_jeu_haut {position:absolute;top:145px;height:50px; padding-left:50px;text-align:center;font-weight:normal;background:none;width: 250px; } * html #info_jeu_haut {position:absolute;top:148px;} p.gain {margin:0 0 15px 0;font-size:18px;font-weight:bold;color:#111;width:280px} p.lieu {margin:0 0 0 -15px;font-size:17px;font-weight:bold;color:#ea0000;line-height:1.6em;width:300px} p.lieux {margin:0 0 0 -25px;font-size:17px;font-weight:bold;color:#ea0000;line-height:1.3em;width:330px} p.lieu span {margin:0 0 8px 0;font-size:18px;font-weight:bold;color:#111;} p.adresse {margin:0;font-size:11px;text-align:center;font-weight:normal;color:#ea0000;line-height:1em} span.adresse {margin:0;font-size:11px;text-align:center;font-weight:normal;color:#ea0000;line-height:1.1em} #info_jeu_bas {width: 320px; position: relative; top:-80px;left:15px; overflow: hidden; padding:0 0 0 5px;margin-bottom:-90px;text-align:center;color:#fff;height:85px;} #info_jeu_bas h3 {margin:0;padding-top:7px;font-size:13px;color:#fff;height:35px} input.cherche {font-size:12px;color:#98989a;} input.valid, input.radio {border:none;background:none} input.envoie {border:none;margin:-2px 0 0 0;padding:0} input.cherche {border: 1px solid #999;margin:-3px 0 0 0;padding:0;background: #FFF;color:#98989a;width:155px;height:17px} blockquote#result {text-align:center;width:auto;padding:90px 0 0 90px} div#result1 {position:relative;top:-50px;margin:0px 0 0 -90px;left;text-align:center;width:auto;padding:0 0 0 90px} blockquote#result h3 {background:none;color:#e60000;} div#message {margin:0;text-align:center;width:390px} div#message h3 {margin:0 0 0 -240px;text-align:center;width:auto;font-size:18px} div#valid_result {margin:0 0 0 60px; padding:0 0 2px 0;text-align:center;width:250px;border:1px solid #bdbdbe;} * html div#valid_result {margin:0; padding:0 0 2px 0;text-align:center;width:150px;border:1px solid #bdbdbe;} * html div#valid_result table {margin:-5px -5px -8px 0; padding:0 0 2px 0;text-align:center;width:230px;} div#valid_result table {margin:-5px -3px -13px 0; padding:0 0 2px 0;text-align:center;width:255px;} #info_gj {width: 270px; position: relative; top:10px;left:6px;border:1px solid #111;height:30px} #grandjeu {position:relative;top:50px;left:-13px;width:550px;overflow:auto;height:365px;} #ami {position:relative;top:0px;left:-13px;width:auto;border-left : 1px solid #e2e5e9;} #offre_lancement {float:right;position:relative;top:50px;left:0px;width:430px;overflow:auto;height:320px;border-left : 1px solid #e2e5e9;} * html #na_agence {height:358px} #na_agence {position:relative;top:5px;left:30px;width:300px;overflow:hidden;height:373px !important; height /**/:358px ; /* for IE5/Win */;;border-left : 1px solid #e2e5e9;} /* Pied de page --------------------------------------------------------------------------@ */ #footer {width:952px;margin:0;text-align:left;background: url(../medias/fond_footer.gif) top left no-repeat;height:60px;} #footer_v {width:952px;margin:0;text-align:left;background: url(../medias/fond_footer_v.gif) top left no-repeat;height:60px;} #info {float:right;width:570px;margin:0;text-align:left;} #info h3 {float:right;width:443px;margin:0;padding:25px 0 0 0;text-align:left;} #info h4 {float:right;width:161px;margin:-15px 0 0 0;text-align:left;} #info h3, #info h4 a {text-align:left;font-size:14px;color:#ed0000;} #info h4 a:hover {text-align:left;font-size:14px;color:#ed0000;text-decoration:none;} #info h3 span, #info h4 span {color:#ed0000;text-decoration:none;font-size:12px;font-weight:normal;} #info h3 span.point, #info h4 span.point {color:#ed0000;font-size:12px;font-weight:normal} #civil {float:right;width:595px;margin:0 -3px 0 0;text-align:left;} #civil ul.civic {margin:0;padding:0} #civil ul.civic li {margin:0;display:inline;color:#868687;font-size:11px;background: url(../medias/separ_civic.gif) 0 2px no-repeat;padding-left:15px} #civil ul.civic li.english {margin:0;display:inline;color:#868687;font-size:11px;background: url(../medias/separ_civic.gif) 0 2px no-repeat;padding-left:15px} * html #civil ul.civic li.english {margin:0;display:inline;color:#868687;font-size:11px;background: url(../medias/separ_civics.gif) 0 2px no-repeat;padding-left:15px} #civil ul.civic li.accueil {margin:0;background:none} #civil ul.civic li.accueil a {margin:0;display:inline;color:#868687;font-size:11px;padding-right:58px;background: url(../medias/separ_civic.gif) 37px 2px no-repeat;} #civil ul.civic li a {margin:0;color:#868687;text-decoration:none;font-size:11px} #civil ul.civic li a:hover {margin:0;color:#ed0000;text-decoration:underline;font-size:11px} #intro {width:948px;margin:0;text-align:right;} p.intro span {display:none} #intro p.intro {float:right;margin:0;text-align:right;} #intro p.intro a {position:relative;width:130px;cursor:pointer;padding:0;height:25px;} #intro p.intro a {background: transparent url(../medias/pass_intro.gif) top left no-repeat;display: block;} #intro p.intro a:hover {background-position: 0 -28px;text-decoration: none;display: block;cursor:pointer;}