/* FONTS */ @font-face { font-family: 'dosismedium'; src: url('fonts/dosis-medium-webfont.eot'); src: url('fonts/dosis-medium-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/dosis-medium-webfont.woff') format('woff'), url('fonts/dosis-medium-webfont.ttf') format('truetype'), url('fonts/dosis-medium-webfont.svg#dosismedium') format('svg'); font-weight: normal; font-style: normal; } .dosismedium{ font-family: "dosismedium"; } .bluebg{ background: #0077c0; } .liteyellowbg{ background: #fef8e4; } .liteyellowbg2{ background: #fff5e5; } .darkeryellowbg{ background: #e9e0c2; } .orangebg{ background: #fcb034; } .litegreenbg{ background: #e8f6ea; } .literedbg{ background: #e8f6ea; } .litegreybg{ background: #e5e5e5; } .litegreybg2{ background: #f2f2f2; } .bcdarkyellow{ border-color: #e2d8b8; } .blue{ color:#0077c0; } .w425{ width:425px; } .w535{ width:535px; } .mh150{ min-height: 150px; } h1{ margin-top: 20px !important; margin-bottom: 20px !important; display: block; clear:both; border-top:1px solid #ccc; padding-top:10px; } h1 strong{ font-size:18px; } img.alignleft{ float:left; margin-right:20px; } a{ color:#0077c0; } .mainContent{ width:100%; background: url( 'images/bg.jpg' ) no-repeat center top; } @media all and (max-width: 1000px) { .mainContent{ width:100%; background: url( 'images/bg.jpg' ) no-repeat center top; background-size:100% 100%; } } .mainContentInside{ width:100%; background: #f2f2f2; } .logo{ display: block; width: 463px; height: 94px; background: url( 'images/allbg.png' ) no-repeat 0 0; } .sspro{ font-family: "Source Sans Pro", Verdana; } .countries li a{ color:#fff; font-family: "Source Sans Pro", Verdana; font-size:16px; } .countries li a span{ display:block; width:12px; height:12px; background: url( 'images/allbg.png' ) no-repeat -16px -111px; margin-top:4px; margin-right:5px; float:left; } .attention{ width:28px; height:28px; background: url( 'images/allbg.png' ) no-repeat -36px -104px; } .info{ background: #fef8e4; } .icon-info{ display:inline-block; width:30px; height:30px; background: url( 'images/allbg.png' ) no-repeat -8px -144px; } .info .close{ display:table-cell; width:30px; height:30px; text-align:center; vertical-align:middle; background: #e9e0c2; background: url( 'images/allbg.png' ) no-repeat -53px -144px #e9e0c2; } .switchOn{ display:block; width:80px; height:26px; background: url( 'images/allbg.png' ) no-repeat -18px -418px; } .switchOff{ display:block; width:80px; height:26px; background: url( 'images/allbg.png' ) no-repeat -17px -453px; } a.expand{ display:block; width:26px; height:26px; background: url( 'images/allbg.png' ) no-repeat -98px -145px; } div.expanded{ width:62px; padding:5px 10px 11px 10px; margin-top:-50px; margin-right:-8px; background:#fff; position:absolute; right:0; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; text-align:center; } div.expanded a{ display:block; width:26px; height:26px; background: url( 'images/allbg.png' ) no-repeat -139px -145px; margin:0 auto; } .leftmenu li a{ display:block; padding: 5px 0 5px 5px; font-family: "Source Sans Pro"; font-size: 16px; text-decoration: none; } .leftmenu li a:hover, .leftmenu li a.selected{ background: #fcb034; color:#fff; } .bubble{ overflow:visible; position:relative; z-index:1; } .bubble:after{ border-color: #fff transparent; border-style: solid; border-width: 15px 15px 0px; content: ""; width: 0px; position:absolute; top:-10px; } .bubble.top:after{ border-color: #fff transparent; border-width: 0 15px 15px; bottom: auto; left: 20px; } .homeBlocks .cell{ background: #0077c0; min-height:150px; width:190px; text-align:left; padding:10px; position:relative; } .icon{ display:block; width:82px; height:82px; margin:0 auto; margin-top:30px; } .icon.about{ background: url( 'images/allbg.png' ) no-repeat -10px -185px; } .icon.adchoices{ background: url( 'images/allbg.png' ) no-repeat -9px -267px; } .icon.toptips{ background: url( 'images/allbg.png' ) no-repeat -106px -184px; } .icon.faq{ background: url( 'images/allbg.png' ) no-repeat -180px -176px; } .icon.goodpractice{ background: url( 'images/allbg.png' ) no-repeat -264px -171px; } .icon.downladguide{ width:104px; height:81px; background: url( 'images/allbg.png' ) no-repeat -365px -169px; } .icon.videos{ background: url( 'images/allbg.png' ) no-repeat -499px -172px; } .icon.jargon{ background: url( 'images/allbg.png' ) no-repeat -604px -168px; } .icon.complaints{ width:83px; background: url( 'images/allbg.png' ) no-repeat -699px -178px; } .homeBlocks .cell label{ position:absolute; bottom:0; padding:10px 10px 10px 0px; } .homeBlocks .cell label a{ color:#fff; font-size:14px; font-family:"Source Sans Pro";" } .legend{ width:22px; height:22px; } .legend.nocookie{ background: url( 'images/allbg.png' ) no-repeat -22px -370px; } .legend.on{ background: url( 'images/allbg.png' ) no-repeat -53px -370px; } .legend.off{ background: url( 'images/allbg.png' ) no-repeat -85px -370px; } .legend.noconnection{ background: url( 'images/allbg.png' ) no-repeat -116px -370px; } table.companies thead tr td{ background: #fff; } table.companies thead tr td{ background: #808080; color:#fff; } table.companies thead tr td{ padding-top:5px; padding-bottom:5px; } table.companies thead tr td span{ display:block; border-right:1px solid #cccccc; padding:5px 8px 5px 8px; } table.companies thead tr td.last span{ border-right:0px; } table.companies tbody tr td{ border-left:1px solid #ffffff; padding:7px; border-bottom:1px solid #ffffff; color:#1a1a1a; } table.companies tbody tr td.first{ border-left:1px solid #e6e6e6; padding:7px; } table.companies tbody tr.last td{ border-bottom:1px solid #e6e6e6; padding:7px; } table.companies tbody tr td.last{ border-left:1px solid #fff; border-right:1px solid #e6e6e6; padding:7px; } table.companies tbody tr.green td{ background: #e8f6ea; } table.companies tbody tr.red td{ background: #ffe5e5; } table.companies tbody tr.grey td{ background: #e5e5e5; } table.companies tbody tr.yellow td{ background: #fff5e5; } table.companies tbody tr.expanded td{ background: #fff; border:1px solid #cccccc; } /**************************************************/ /* mobile version */ /**************************************************/ @media only screen and (min-width: 768px) and (max-width: 959px) { .w960 { width:768px;} .mainContent { background:none; border-top: 20px solid #0177c1;} .logo {margin:0 auto;} .mainContent .w425 { width:768px;} .mainContent .w425 > div {padding:0; display:inline-block; width:375px;} .mainContent .w425 > div img { display:none;} .mainContent .w425 > div.mt10 { width:350px; height:335px; background:url(../temp/hpMobile.jpg) no-repeat center center; background-size:cover; vertical-align:top; margin:0 0 0 10px; } .mainContent .w425 > div .whitebg { padding:10px; } .mainContent .w535 { width:768px; background:url(../temp/hpBgMobile.jpg) no-repeat center center; background-size:cover; margin-top:10px; } .mainContent .w535 > div { padding:20px; margin:0;} .countries li { display:inline-block; margin:0 2.5%; white-space:pre-wrap; vertical-align: top; } .countries li:nth-child(2n) { width:34%;} .countries li:nth-child(2n+1) { width:54%;} .countries li:first-child {width:34%;} .footer { width:100%; text-align:center; padding:5px 0 15px; } } @media only screen and (min-width: 640px) and (max-width: 767px) { .w960 { width:640px;} .mainContent { background:none; border-top: 20px solid #0177c1;} .logo {margin:0 auto;} .mainContent .w425 { width:640px;} .mainContent .w425 > div {padding:0; display:inline-block; width:300px;} .mainContent .w425 > div img { display:none;} .mainContent .w425 > div.mt10 { width:300px; height:295px; background:url(../temp/hpMobile.jpg) no-repeat center center; vertical-align:top; margin:0 0 0 10px; } .mainContent .w425 > div .whitebg { padding:10px; } .mainContent .w535 { width:640px; background:url(../temp/hpBgMobile.jpg) no-repeat center center; background-size:cover; margin-top:10px; } .mainContent .w535 > div { padding:20px; margin:0;} .countries li { display:inline-block; margin:0 2.5%; white-space:pre-wrap; vertical-align: top; } .countries li:nth-child(2n) { width:34%;} .countries li:nth-child(2n+1) { width:54%;} .countries li:first-child {width:34%;} .footer { width:100%; text-align:center; padding:5px 0 15px; } table.mt30 tr td { max-width:200px;} table.mt30 tr td img { width:100%; height:auto;} } @media only screen and (min-width: 480px) and (max-width: 639px) { .w960 { width:480px;} .mainContent { background:none; border-top: 20px solid #0177c1;} .logo { margin: 0px auto; width: 400px; height: 60px; background-size: cover; background-position: 80px 14px; } .mainContent .w425 { width:480px;} .mainContent .w425 > div {padding:0; display:inline-block; width:240px;} .mainContent .w425 > div img { display:none;} .mainContent .w425 > div.mt10 { width:200px; height:200px; background:url(../temp/hpMobile.jpg) no-repeat center center; background-size:cover; vertical-align:top; margin:0 0 0 10px; } .mainContent .w425 > div .whitebg { padding:10px; } .mainContent .w425 > div .whitebg p { margin-bottom:10px;} .mainContent .w535 { width:480px; background:url(../temp/hpBgMobile.jpg) no-repeat center center; background-size:cover; margin-top:10px; } .mainContent .w535 > div { padding:10px; margin:0;} .countries li a { font-size:14px;} .countries li { display:block; margin:0 2.5%; float:left; white-space:pre-wrap; vertical-align: top; } .countries li:nth-child(2n) { width:30%;} .countries li:nth-child(2n+1) { width:60%;} .countries li:first-child {width:30%;} .footer { width:100%; text-align:center; padding:5px 0 15px; } table.mt30 tr td { max-width:200px;} table.mt30 tr td img { width:100%; height:auto;} } @media only screen and (max-width: 479px) { .w960 { width:320px;} .mainContent { background:none; border-top: 20px solid #0177c1;} .logo { margin: 0px auto; width: 300px; height: 50px; background-size: cover; background-position: 60px 15px; } .mainContent .w425 { width:320px;} .mainContent .w425 > div {padding:0; display:inline-block; width:295px;} .mainContent .w425 > div img { display:none;} .mainContent .w425 > div.mt10 { width:300px; height:300px; background:url(../temp/hpMobile.jpg) no-repeat center center; background-size:cover; vertical-align:top; margin:0 0 0 10px; } .mainContent .w425 > div .whitebg { padding:10px; } .mainContent .w425 > div .whitebg p { margin-bottom:10px;} .mainContent .w535 { width:320px; background:url(../temp/hpBgMobile.jpg) no-repeat center center; background-size:cover; margin-top:10px; } .mainContent .w535 > div { padding:10px; margin:0;} .countries li { display:inline-block; width:90%; margin:0 2.5%; } .footer { width:100%; text-align:center; padding:5px 0 15px; } table.mt30 tr td { max-width:300px; float:left;} table.mt30 tr td img { width:100%; height:auto;} .w960.mauto.mt10 .fleft.w425 { width:300px;} }