/*******************/ /* Resolution LOW */ /*****************/ @media screen { #schema { width:827px; height:597px; } /* Positionnement des images */ #i0 { width: 686px; height: 249px; left: 0px; top: 348px; background-image: url('img/low/0-SCHEMA-BASE.png'); } /* 0-SCHEMA-BASE */ #i2 { width: 121px; height: 58px; left: 75px; top: 455px; background-image: url('img/low/2-CDE-CIRCUL.png'); } /* 2-CDE-CIRCUL */ #i3 { width: 21px; height: 48px; left: 146px; top: 500px; background-image: url('img/low/3-BOUTEILLE.png'); } /* 3-BOUTEILLE */ #i4 { width: 271px; height: 249px; left: 556px; top: 159px; background-image: url('img/low/4-CHARGE-N-2.png'); } /* 4-CHARGE-N-2 */ #i5 { width: 353px; height: 196px; left: 474px; top: 348px; background-image: url('img/low/5-CHAUDIERE-n-3.png'); } /* 5-CHAUDIERE-n-3 */ #i6 { width: 86px; height: 56px; left: 134px; top: 382px; background-image: url('img/low/6-BALLON1.png'); } /* 6-BALLON1 */ #i7 { width: 86px; height: 56px; left: 416px; top: 382px; background-image: url('img/low/7-BALLON3.png'); } /* 7-BALLON3 */ #i8 { width: 86px; height: 56px; left: 677px; top: 382px; background-image: url('img/low/8-BALLON2.png'); } /* 8-BALLON2 */ #i9 { width: 186px; height: 166px; left: 154px; top: 240px; background-image: url('img/low/9-CHARGE-MAITRE.png'); } /* 9-CHARGE-MAITRE */ #i10 { width: 291px; height: 166px; left: 275px; top: 240px; background-image: url('img/low/10-PISCINE.png'); } /* 10-PISCINE */ #i11 { width: 40px; height: 33px; left: 643px; top: 80px; background-image: url('img/low/11-REPORT-ALARME.png'); } /* 11-REPORT-ALARME */ #i12 { width: 58px; height: 33px; left: 643px; top: 14px; background-image: url('img/low/12-SONDE-EXTERIEURE.png'); } /* 12-SONDE-EXTERIEURE */ #i13 { width: 291px; height: 338px; left: 275px; top: 68px; background-image: url('img/low/13-ZONE3.png'); } /* 13-ZONE3 */ #i14 { width: 291px; height: 406px; left: 275px; top: 0px; background-image: url('img/low/14-Z2.png'); } /* 14-Z2 */ #i15 { width: 253px; height: 332px; left: 87px; top: 74px; background-image: url('img/low/15-MODZONE2.png'); } /* 15-MODZONE2 */ #i16 { width: 78px; height: 28px; left: 453px; top: 508px; background-image: url('img/low/16-BOUCLE2.png'); } /* 18-BOUCLE2 */ #i17 { width: 72px; height: 28px; left: 726px; top: 508px; background-image: url('img/low/17-BOUCLE1.png'); } /* 17-BOUCLE1 */ #i18 { width: 155px; height: 7px; left: 664px; top: 556px; background-image: url('img/low/18-TEXTE-MATERIEL.png'); } /* 18-TEXTE-MATERIEL */ #i19 { width: 86px; height: 56px; left: 134px; top: 382px; background-image: url('img/low/6-BALLON1.png'); } /* 6-BALLON1 */ #i20 { width: 86px; height: 56px; left: 416px; top: 382px; background-image: url('img/low/7-BALLON3.png'); } /* 7-BALLON3 */ #i21 { width: 86px; height: 56px; left: 677px; top: 382px; background-image: url('img/low/8-BALLON2.png'); } /* 8-BALLON2 */ #i22 { width: 31px; height: 23px; left: 750px; top: 14px; background-image: url('img/low/BOX-FRISQUET.png'); } /* BOX-FRISQUET */ /* Positionnement des zones de clic */ #z2 { width: 44px; height: 38px; left: 75px; top: 453px; } #z3 { width: 15px; height: 50px; left: 155px; top: 495px; } #z4 { width: 233px; height: 151px; left: 591px; top: 159px } #z5 { width: 98px; height: 99px; left: 726px; top: 352px; } #z6 { width: 28px; height: 53px; left: 135px; top: 382px; } #z7 { width: 26px; height: 54px; left: 416px; top: 381px; } #z8 { width: 28px; height: 54px; left: 675px; top: 381px; } #z9 { width: 129px; height: 102px; left: 155px; top: 239px; } #z10 { width: 198px; height: 102px; left: 366px; top: 239px; } #z11 { width: 34px; height: 30px; left: 647px; top: 84px; } #z12 { width: 54px; height: 28px; left: 647px; top: 19px; } #z13 { width: 198px; height: 157px; left: 366px; top: 73px; } #z14 { width: 198px; height: 58px; left: 366px; top: 1px; } #z15 { width: 196px; height: 158px; left: 88px; top: 73px; } #z16 { width: 63px; height: 29px; left: 469px; top: 504px; } #z17 { width: 72px; height: 30px; left: 731px; top: 504px; } #z18 { width: 54px; height: 28px; left: 746px; top: 19px; } #z19 { width: 35px; height: 28px; left: 80px; top: 460px; } /* Positionnement selecteurs */ #s1 { left: 116px; top: 461px; } #s2 { left: 374px; top: 461px; } #s3 { left: 583px; top: 479px; z-index:100; } #s4 { left: 20px; top: 437px; z-index:100; } #s5 { left: 302px; top: 437px; z-index:100; } #s6 { left: 565px; top: 437px; z-index:110; } /* Positionnement selecteurs quantites */ #q1 { left: 730px; top: 497px; } /* Dimension input */ span.selected, span.selectArrow, span.selectOption { height: 15px; font-size: 9px; line-height: 15px; text-indent: 0; border-width: 1px; } span.selected { width: 222px; padding: 0 0 0 4px; border-width: 1px 0 1px 1px; } span.selectArrow { width: 15px; } div.selectOptions { top: 16px; border-width: 1px; max-height:105px; width:288px; } span.selectOption { padding: 0 0 0 4px; width:268px; } #q1 span.selected { width:75px; } #q1 div.selectOptions { width:95px; } #q1 span.selectOption { width:75px; } /* 1ers enfants non grisés */ #s4 span.selectOption:first-child { color:#333; } #s4 span.selectOption:first-child:hover { color:#fff; } #s5 span.selectOption:first-child { color:#333; } #s5 span.selectOption:first-child:hover { color:#fff; } #s6 span.selectOption:first-child { color:#333; } #s6 span.selectOption:first-child:hover { color:#fff; } #q1 span.selectOption:first-child { color:#333; } #q1 span.selectOption:first-child:hover { color:#fff; } } /*******************/ /* Resolution MID */ /*****************/ @media screen and (min-width: 1041px) and (min-height: 750px) { #schema { width:996px; height:717px; } /* Positionnement des images */ #i0 { width: 827px; height: 299px; left: 0px; top: 418px; background-image: url('img/mid/0-SCHEMA-BASE.png'); } #i2 { width: 146px; height: 70px; left: 91px; top: 547px; background-image: url('img/mid/2-CDE-CIRCUL.png'); } #i3 { width: 24px; height: 57px; left: 177px; top: 601px; background-image: url('img/mid/3-BOUTEILLE.png'); } #i4 { width: 325px; height: 299px; left: 671px; top: 191px; background-image: url('img/mid/4-CHARGE-N-2.png'); } #i5 { width: 425px; height: 236px; left: 571px; top: 418px; background-image: url('img/mid/1-CHAUDIERE-n-3.png'); } #i6 { width: 103px; height: 66px; left: 163px; top: 460px; background-image: url('img/mid/6-BALLON1.png'); } #i7 { width: 103px; height: 66px; left: 502px; top: 460px; background-image: url('img/mid/7-BALLON3.png'); } #i8 { width: 103px; height: 66px; left: 816px; top: 460px; background-image: url('img/mid/8-BALLON2.png'); } #i9 { width: 224px; height: 199px; left: 186px; top: 288px; background-image: url('img/mid/9-CHARGE-MAITRE.png'); } #i10 { width: 349px; height: 198px; left: 332px; top: 289px; background-image: url('img/mid/10-PISCINE.png'); } #i11 { width: 47px; height: 40px; left: 775px; top: 95px; background-image: url('img/mid/11-REPORT-ALARME.png'); } #i12 { width: 70px; height: 40px; left: 775px; top: 16px; background-image: url('img/mid/12-SONDE-EXTERIEURE.png'); } #i13 { width: 349px; height: 406px; left: 332px; top: 81px; background-image: url('img/mid/13-ZONE3.png'); } #i14 { width: 349px; height: 487px; left: 332px; top: 0px; background-image: url('img/mid/14-Z2.png'); } #i15 { width: 304px; height: 399px; left: 106px; top: 88px; background-image: url('img/mid/15-MODZONE2.png'); } #i16 { width: 87px; height: 33px; left: 570px; top: 611px; background-image: url('img/mid/16-BOUCLE2.png'); } #i17 { width: 87px; height: 33px; left: 874px; top: 611px; background-image: url('img/mid/17-BOUCLE1.png'); } #i18 { width: 188px; height: 8px; left: 799px; top: 668px; background-image: url('img/mid/18-TEXTE-MATERIEL.png'); } #i19 { width: 103px; height: 66px; left: 163px; top: 460px; background-image: url('img/mid/6-BALLON1.png'); } #i20 { width: 103px; height: 66px; left: 502px; top: 460px; background-image: url('img/mid/7-BALLON3.png'); } #i21 { width: 103px; height: 66px; left: 816px; top: 460px; background-image: url('img/mid/8-BALLON2.png'); } #i22 { width: 41px; height: 32px; left: 882px; top: 20px; background-image: url('img/mid/BOX-FRISQUET.png'); } /* Positionnement des zones de clic */ #z2 { width: 53px; height: 45px; left: 92px; top: 546px; } #z3 { width: 18px; height: 61px; left: 188px; top: 596px; } #z4 { width: 280px; height: 181px; left: 711px; top: 193px; } #z5 { width: 117px; height: 118px; left: 874px; top: 425px; } #z6 { width: 33px; height: 65px; left: 164px; top: 460px; } #z7 { width: 32px; height: 65px; left: 501px; top: 460px; } #z8 { width: 33px; height: 64px; left: 813px; top: 460px; } #z9 { width: 155px; height: 122px; left: 187px; top: 289px; } #z10 { width: 238px; height: 122px; left: 441px; top: 289px; } #z11 { width: 40px; height: 35px; left: 779px; top: 103px; } #z12 { width: 64px; height: 33px; left: 779px; top: 25px; } #z13 { width: 238px; height: 188px; left: 441px; top: 90px; } #z14 { width: 238px; height: 70px; left: 441px; top: 3px; } #z15 { width: 235px; height: 190px; left: 108px; top: 89px; } #z16 { width: 86px; height: 35px; left: 575px; top: 610px; } #z17 { width: 87px; height: 37px; left: 879px; top: 607px; } #z18 { width: 41px; height: 32px; left: 882px; top: 20px; } #z19 { width: 45px; height: 35px; left: 95px; top: 555px; } /* Positionnement selecteurs */ #s1 { left: 147px; top: 555px; } #s2 { left: 436px; top: 555px; } #s3 { left: 720px; top: 555px; z-index:100; } #s4 { left: 23px; top: 526px; z-index:100; } #s5 { left: 360px; top: 526px; z-index:100; } #s6 { left: 680px; top: 526px; z-index:110; } /* Positionnement selecteurs quantites */ #q1 { left: 885px; top: 576px; } /* Dimension input */ span.selected, span.selectArrow, span.selectOption { height: 18px; font-size: 11px; line-height: 18px; text-indent: 0; border-width: 1px; } span.selected { width: 250px; padding: 0 0 0 4px; border-width: 1px 0 1px 1px; } span.selectArrow { width: 19px; } div.selectOptions { top: 19px; border-width: 1px; max-height:105px; width:325px; } span.selectOption { padding: 0 0 0 4px; width:305px; } #q1 span.selected { width:85px; } #q1 div.selectOptions { width:109px; } #q1 span.selectOption { width:88px; } /* 1ers enfants non grisés */ #s4 span.selectOption:first-child { color:#333; } #s4 span.selectOption:first-child:hover { color:#fff; } #s5 span.selectOption:first-child { color:#333; } #s5 span.selectOption:first-child:hover { color:#fff; } #s6 span.selectOption:first-child { color:#333; } #s6 span.selectOption:first-child:hover { color:#fff; } #q1 span.selectOption:first-child { color:#333; } #q1 span.selectOption:first-child:hover { color:#fff; } } /******************/ /* Resolution HI */ /****************/ @media screen and (min-width: 1291px) and (min-height: 930px) { #schema { width:1231px; height:887px; } /* Positionnement des images */ #i0 { width: 1021px; height: 369px; left: 0px; top: 517px; background-image: url('img/hi/0-SCHEMA-BASE.png'); } #i2 { width: 180px; height: 86px; left: 112px; top: 677px; background-image: url('img/hi/2-CDE-CIRCUL.png'); } #i3 { width: 31px; height: 71px; left: 218px; top: 743px; background-image: url('img/hi/3-BOUTEILLE.png'); } #i4 { width: 402px; height: 371px; left: 829px; top: 236px; background-image: url('img/hi/4-CHARGE-N-2.png'); } #i5 { width: 526px; height: 291px; left: 705px; top: 517px; background-image: url('img/hi/5-CHAUDIERE-n-3.png'); } #i6 { width: 128px; height: 83px; left: 200px; top: 568px; background-image: url('img/hi/6-BALLON1.png'); } #i7 { width: 127px; height: 83px; left: 620px; top: 568px; background-image: url('img/hi/7-BALLON3.png'); } #i8 { width: 128px; height: 83px; left: 1007px; top: 568px; background-image: url('img/hi/8-BALLON2.png'); } #i9 { width: 277px; height: 246px; left: 229px; top: 357px; background-image: url('img/hi/9-CHARGE-MAITRE.png'); } #i10 { width: 432px; height: 246px; left: 410px; top: 357px; background-image: url('img/hi/10-PISCINE.png'); } #i11 { width: 59px; height: 49px; left: 957px; top: 118px; background-image: url('img/hi/11-REPORT-ALARME.png'); } #i12 { width: 86px; height: 50px; left: 957px; top: 20px; background-image: url('img/hi/12-SONDE-EXTERIEURE.png'); } #i13 { width: 432px; height: 502px; left: 410px; top: 101px; background-image: url('img/hi/13-ZONE3.png'); } #i14 { width: 432px; height: 603px; left: 410px; top: 0px; background-image: url('img/hi/14-Z2.png'); } #i15 { width: 375px; height: 494px; left: 131px; top: 109px; background-image: url('img/hi/15-MODZONE2.png'); } #i16 { width: 108px; height: 43px; left: 685px; top: 754px; background-image: url('img/hi/16-BOUCLE2.png'); } #i17 { width: 108px; height: 43px; left: 1090px; top: 754px; background-image: url('img/hi/17-BOUCLE1.png'); } #i18 { width: 232px; height: 9px; left: 987px; top: 827px; background-image: url('img/hi/18-TEXTE-MATERIEL.png'); } #i19 { width: 128px; height: 83px; left: 200px; top: 568px; background-image: url('img/hi/6-BALLON1.png'); } #i20 { width: 127px; height: 83px; left: 620px; top: 568px; background-image: url('img/hi/7-BALLON3.png'); } #i21 { width: 128px; height: 83px; left: 1007px; top: 568px; background-image: url('img/hi/8-BALLON2.png'); } #i22 { width: 46px; height: 35px; left: 1100px; top: 30px; background-image: url('img/hi/BOX-FRISQUET.png'); } /* Positionnement des zones de clic */ #z2 { width: 66px; height: 57px; left: 110px; top: 676px; } #z3 { width: 22px; height: 75px; left: 230px; top: 739px; } #z4 { width: 348px; height: 225px; left: 881px; top: 237px; } #z5 { width: 146px; height: 147px; left: 1083px; top: 526px; } #z6 { width: 41px; height: 80px; left: 200px; top: 570px; } #z7 { width: 39px; height: 81px; left: 620px; top: 569px; } #z8 { width: 41px; height: 80px; left: 1007px; top: 569px; } #z9 { width: 193px; height: 152px; left: 229px; top: 357px; } #z10 { width: 296px; height: 152px; left: 545px; top: 357px; } #z11 { width: 50px; height: 44px; left: 965px; top: 125px; } #z12 { width: 80px; height: 42px; left: 965px; top: 28px; } #z13 { width: 296px; height: 234px; left: 545px; top: 109px; } #z14 { width: 296px; height: 87px; left: 545px; top: 1px; } #z15 { width: 293px; height: 236px; left: 130px; top: 108px; } #z16 { width: 94px; height: 43px; left: 699px; top: 753px; } #z17 { width: 108px; height: 45px; left: 1090px; top: 753px; } #z18 { width: 46px; height: 35px; left: 1100px; top: 30px; } #z19 { width: 55px; height: 45px; left: 120px; top: 685px; } /* Positionnement selecteurs */ #s1 { left: 180px; top: 688px; } #s2 { left: 545px; top: 688px; } #s3 { left: 890px; top: 688px; z-index:100; } #s4 { left: 36px; top: 652px; z-index:100; } #s5 { left: 453px; top: 652px; z-index:100; } #s6 { left: 850px; top: 652px; z-index:110; } /* Positionnement selecteurs quantites */ #q1 { left: 1113px; top: 715px; } /* Dimension input */ span.selected, span.selectArrow, span.selectOption { height: 22px; font-size: 12px; line-height: 22px; text-indent: 0; border-width: 1px; } span.selected { width: 312px; padding: 0 0 0 4px; border-width: 1px 0 1px 1px; } span.selectArrow { width: 22px; } div.selectOptions { top: 23px; border-width: 1px; max-height:155px; width:339px; } span.selectOption { padding: 0 0 0 4px; width:330px; } #q1 span.selected { width:89px; } #q1 div.selectOptions { width:116px; } #q1 span.selectOption { width:101px; } /* 1ers enfants non grisés */ #s4 span.selectOption:first-child { color:#333; } #s4 span.selectOption:first-child:hover { color:#fff; } #s5 span.selectOption:first-child { color:#333; } #s5 span.selectOption:first-child:hover { color:#fff; } #s6 span.selectOption:first-child { color:#333; } #s6 span.selectOption:first-child:hover { color:#fff; } #q1 span.selectOption:first-child { color:#333; } #q1 span.selectOption:first-child:hover { color:#fff; } }