body { background-color: #fff; color: #444; -webkit-font-smoothing: antialiased; overflow: scroll; } body, textarea, input { font-size: 14px; font-family: Arial, Helvetica, sans-serif; } textarea { resize: none; } h1, h2, h3, h4, p, ul, li, form, input { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; color: #2377A4; } form {display: block; } h2 { font-size: 24px; color: #444; text-align: center; padding: 0 0 24px 0; } .hiddenSubmit { width: 0; height: 0; overflow: hidden; position: absolute; top: -10000px; } /* display none would not work with ie/chrome */ .clb { clear: both; font-size: 0; height: 0; } /* header {{{ */ .cuiHeader .header .header-main { background: #2377A4 !important; } .cuiHeader .header .header-main .header-logo-container { border-right: none; } .cuiHeader .header .header-main .header-logo-container:hover { background: inherit; } .cuiHeader .header .header-main .header-logo-container:focus { background: #13435D !important; } .cuiHeader .header .header-menu .header-menu-item { border-left: none !important; } .cuiHeader .header .header-menu .header-menu-item > a { background: #2377A4 !important; } .cuiHeader .header .header-menu .header-menu-item nav > a { background: #2377A4 !important; } .cuiHeader .header .header-menu .header-menu-item nav > a:focus { background: #13435D !important; } .cuiHeader .header .header-menu .header-menu-item .header-sub-menu a:hover, .cuiHeader .header .header-menu .header-menu-item .header-sub-menu a:focus { background: #2377A4 !important; } #Header { margin: 0 66px; height: 50px; background: url(../Images/logmein123/gradient.png) #6cb5dd 0 0 repeat-x; position: relative; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; box-shadow: 0 1px 5px #e9e9e9; -moz-box-shadow: 0 1px 5px #e9e9e9; -webkit-box-shadow: 0 1px 5px #e9e9e9; } #Header h1 { padding: 13px 0 0 19px; width: 167px; } #Header h1 span { display: block; background: url(../Images/logmein123/sprite.png) no-repeat 0 0; width: 167px; height: 25px; } #Header h1 span a { display: block; width: 167px; height: 25px; } #Header h1 span b { display: none; } /* }}} header */ /* footer {{{ */ #Footer { position: absolute; display: none; width: 100%; height: 20px; line-height: 20px; font-size: 10px; color: #767676; text-align: center; } #Footer a { padding: 2px 14px 0 0; color: #767676; text-decoration: underline; } #Footer a:hover { text-decoration: none; } /* }}} footer */ /* common page types {{{ */ .slimPage { width: 680px; margin: 0 auto; padding: 86px 0 20px 0; } .widePage { width: 650px; margin: 0 auto; padding: 80px 0 50px 0; } /* }}} common page types */ /* individual page types {{{ */ .protectPage form .submit { min-width: 102px; } .protectPage .mailSent p { text-align: center; } .downloadPage form .submit { width: 320px; background: #2377A4; border: none !important; box-shadow: none !important; } .downloadPage form.broken .submit { background: #C1CBD5; } .downloadPage .opener { font-weight: normal; font-size: 13px; padding: 14px 0 0 0; } .downloadPage .formWrap { padding-bottom: 15px; } .downloadPage .more { width: 280px; } .downloadPage .reportAbuse { padding: 24px 0 10px 0; font-size: 18px; text-align: center; color: #536D87; } .downloadPage .reportAbuse a { font-weight: bold; text-decoration: none; } .downloadPage .reportAbuse a:hover { text-decoration: underline; } .downloadPage h1 { font-size: 24px; color: #536D87; text-align: center; padding: 0 0 24px 0; } .downloadPage .trialLink div { height: 32px; width: 355px; left: 544px; top: 621px; border-radius: 0; } .downloadPage .trialLink p { font-family: 'Arial'; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; /* or 133% */ text-align: center; color: #46637C; } .downloadPage .inputLabel p { color: #536D87; text-align: center; padding-bottom: 11px; } .appletDownloadProgressPage .fakeBg { background: url(../Images/logmein123/sprite.png) 0 -191px no-repeat; height: 28px; width: 290px; margin: 0 auto; } .appletDownloadProgressPage .status { padding: 15px 0 0 0; text-align: center; } .appletDownloadProgressPage { text-align: center; } /* }}} individual page types */ /* applet download info box/page {{{ */ .appletInfoPage .formWrap p { text-align: center; font-size: 11px; line-height: 16px; padding-bottom: 15px; } .appletInfoPage .formWrap p.top { font-size: 13px; line-height: 18px; padding: 4px 25px 227px 25px; background: url(../Images/logmein123/download_window.png) 4px 83px no-repeat; } .appletInfoPage .formWrap h3 { font-size: 13px; line-height: 16px; padding: 0 0 1px 0; text-align: center; } .appletInfoPage .formWrap .endButtons { text-align: center; padding: 12px 0; } .appletInfoPage .formWrap .endButtons a.button { float: none; min-width: 90px; } /* }}} applet download info box/page */ /* connect technician more box {{{ */ .connectTechnician { color: #536D87; } .hasMore.connectTechnician .more { margin: 12px 0 0 0; font-size: 13px; line-height: 18px; padding-bottom: 11px; } .connectTechnician .opener { padding: 20px 0 0 0; font-size: 18px; } .connectTechnician .steps { padding: 4px 0 26px 0; margin: 25px 16px; font-size: 18px; font-weight: bold; } .connectTechnician .steps hr { clear:left; float: right; width: 80%; margin-right: -15px; } .connectTechnician .step { clear: left; } .connectTechnician .pic { float:left; margin-right: 1em; } .connectTechnician .text { display: block; padding-top: 30px; } .connectTechnician .step1 { margin-bottom: 60px; } .connectTechnician .step2 { margin: 60px 0 30px 0; } .connectTechnician .step1 .pic { background: url(/Images/site/customer/computer.png) no-repeat; width: 110px; height: 93px; } .connectTechnician .step2 .pic { background: url(/Images/site/customer/technician.png) no-repeat; width: 110px; height: 129px; } .connectTechnician .step2 .text { padding-top: 50px; } .connectTechnician .warning { padding: 0 0 8px 0; } .connectTechnician .learnMore { font-weight: bold; } .connectTechnician .warningNote { padding: 50px 20px 0 20px; font-size: 18px; text-align: center; } .connectTechnician a:hover { text-decoration: none; } .connectTechnician hr { background: white; height: 3px; border: none; } html.lt-ie7 .hasMore.connectTechnician .more { padding-bottom: 0; margin-bottom: 5px; zoom: 1; } /* }}} connect technician more box */ /* new anti-scammer warning page {{{ */ div.warningPage { color: #536D87; padding-top: 67px; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } .warningPage h1 { font-size: 22px; text-align: center; padding: 25px 5px; } .warningPage .button { width: 45%; height: 50px; line-height: 50px; font-size: 18px; background: #4BB7EF !important; color: white; vertical-align: middle; box-shadow: none; border: none; } .warningBox { background-color: #F3F6F8; font-size: 15px; text-align: center; padding: 35px 40px 36px 40px; width: 450px; margin: 0 auto; margin-bottom: 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .warningBox h2 { color: #536D87; font-size: 18px; font-weight: bold; padding-bottom: 0; padding-top: 20px; } .warningBox table { margin: 20px auto 0 auto; text-align: left; border: 0; border-collapse: collapse; } .warningBox td { color: #CE4563; vertical-align: middle; margin: 0; padding: 0; } .warningBox td.icon b { width: 24px; height: 24px; background: url('/Images/site/customer/ban.png') no-repeat 0 0; display: block; margin: 10px; } .warningPage .endButtons { text-align: center; margin: 0 60px; } .warningPage .endButtons a:first-child { float: left; } .warningPage .endButtons a:nth-child(2) { float: right; } .warningPage .reportAbuse { text-align: center; font-size: 15px; clear: both; margin-top: 120px; } .warningPage .reportAbuse a:hover { text-decoration: underline; } /* }}} */ /* more-less opener {{{ */ .hasMore .opener { text-align: center; } .hasMore .opener * { vertical-align: middle; } .hasMore .showMoreLess { display: inline-block; background: url('/Images/site/customer/dropdown.png') no-repeat; width: 19px; height: 19px; font-size: 0; cursor: pointer; line-height: 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .hasMore .showMoreLess:hover { box-shadow: 0 0 2px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.2); } .hasMore .more { font-size: 13px; line-height: 18px; position: absolute; width: 320px; top: -1500px; padding: 3px 0 26px 0; overflow: hidden; } .hasMore .moreWider { width: 340px !important;} .hasMore .more .inner { padding: 0 6px; } .hasMore .more h3 { font-size: 14px; padding: 0 0 6px 0; } .hasMore.alwaysVisible h2 { font-size: 24px; } .hasMore.alwaysVisible .more { display: block !important; } /* do not let anyone (js) override this! */ .done .more { position: static; } .showMoreLessWhite { border: 1px solid #fff; } .showMoreLessGray { border: 1px solid #efefef; } .showMoreLessYellow { border: 1px solid #fffdc3; } .hasMoreActive .showMoreLessWhite, .hasMoreActive .showMoreLessGray, .hasMoreActive .showMoreLessYellow { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /* }}} more-less opener */ /* language selector {{{ */ .languageSelector { width: 53px; height: 55px; position: absolute; top: 0; right: 5px; } .languageSelector .closed { width: 53px; height: 50px; display: block; background: url(../Images/logmein123/sprite.png) -54px -26px no-repeat; } .languageSelector .opened { display: none; width: 53px; height: 55px; background: url(../Images/logmein123/sprite.png) 0 -26px no-repeat; z-index: 4; position: absolute; } .languageSelector .dropdown { display: none; min-width: 60px; position: absolute; z-index: 3; top: 54px; right: 0; border: 1px solid #ccc; padding: 13px 14px; background-color: #fff; -moz-border-radius: 4px 0 4px 4px; -webkit-border-radius: 4px 0 4px 4px; border-radius: 4px 0 4px 4px; } .languageSelector .dropdown li { white-space: nowrap; } .languageSelector .dropdown li a { line-height: 20px; height: 20px; display: block; } .languageSelector .dropdown li a:hover { text-decoration: underline; } .languageSelector .dropdown li.active a { color: #444; cursor: default; } .languageSelector .dropdown li.active a:hover { text-decoration: none; } html.lt-ie7 .languageSelector .dropdown { margin-right: -1px; } .selectLang .languageSelector .closed { display: none; } .selectLang .languageSelector .opened, .selectLang .languageSelector .dropdown { display: block; } /* }}} language selector */ /* fade in css animation for the dropdown {{{ considering that doing a fade out is extremely complicated this is pretty close to something of an overkill (also note that we must not break anything for non-cssanimation enabled browsers) */ .languageSelector .transEdgeCut { display: none; } html.cssanimations .languageSelector .transEdgeCut { display: block; border-top: 3px solid #fff; height: 0; font-size: 0; width: 51px; position: absolute; top: -1px; right: 0; z-index: 3; } html.cssanimations .languageSelector .opened, html.cssanimations .languageSelector .dropdown { -webkit-transition: opacity .3s linear; -moz-transition: opacity .3s linear; transition: opacity .3s linear; } html.cssanimations .languageSelector .opened { display: block; height: 0; width: 0; opacity: 0; } html.cssanimations .selectLang .languageSelector .opened { display: block; width: 53px; height: 55px; opacity: 1; } html.cssanimations .languageSelector .dropdown { display: block; width: auto; height: 0; border: 1px solid #fff; opacity: 0; } html.cssanimations .languageSelector .dropdown ul { display: none; } html.cssanimations .selectLang .languageSelector .dropdown ul { display: block; } html.cssanimations .selectLang .languageSelector .dropdown { width: auto; height: auto; border: 1px solid #ccc; padding: 13px 14px; opacity: 1; } /* }}} fade in css animation for the dropdown */ /* forms {{{ */ .formWrapBorder, .formWrap { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .formWrapBorder { border: 1px solid #dcdcdc; background-color: #fff; padding: 1px; width: 316px; } .formWrapBorderWithReCaptcha { border: 1px solid #dcdcdc; background-color: #fff; padding: 1px; width: 340px; } .formWrap { background-color: #efefef; padding: 18px; color: #444; position: relative; } .login.formWrap { background-color: #F2F6F9; padding: 50px 67px; } html.lt-ie8 .formWrap .endButtons { height: auto; } /* only for IE7!! do NOT move this line */ .formWrap .endButtons, html.lt-ie7 .formWrap .endButtons { height: 40px; } /* the joke is that it works in ie6, ie8, ie9 */ .formWrap .footNote { color: #444; font-size: 13px; line-height: 18px; padding-left: 8px; float: left; } .formWrap .endButtons a.button { float: right; } body.lang_fr .formWrap .endButtons a.button { min-width: 70px; } /* in ie7 the text may push the button to the right, but it's okay to decrease the size a bit everywhere */ .formWrap .more { width: 545px; } .errorBox { height: 50px; } .errorBox #Content_error_msg { color: #CE4563; padding: 3px; font-weight: bold; font-size: 11px;} .errorBox #Content_success_msg { color: #44CEAA; text-align: center; font-size: 16px; } form { width: 320px; margin: 0 auto; } form .field { position: relative; } form .field input::-ms-clear { display: none; } form .field.focus label { color: #aaa; } form .field label { color: #888; position: absolute; z-index: 2; display: inline-block; padding: 6px 0 9px 8px; left: 2px; top: 2px; cursor: text; } form .field .text { height: 56px; padding: 0 15px; width: 286px; border: 2px solid #E6EBF1; color: #536D87; font-weight: bold; font-size: 2.5em; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } form .field :root .text { padding: 50px; } form .field .text::-webkit-input-placeholder { position: relative; top: -0.35em; color: #94A1B2; font-size: 0.5em; font-weight: normal; vertical-align: middle } form .field .text::-moz-placeholder { position: relative; top: -0.35em; color: #94A1B2; font-size: 0.5em; font-weight: normal; vertical-align: middle; opacity: 1 } form .field .text:-moz-placeholder { position: relative; top: -0.35em; color: #94A1B2; font-size: 0.5em; font-weight: normal; vertical-align: middle; opacity: 1 } form .field .text:-ms-input-placeholder { position: relative; color: #94A1B2; font-size: 1em; font-weight: normal; vertical-align: middle } form .fieldWithReCaptcha .text { width: 290px !important; } form .fieldWithReCaptcha .text { width: 290px !important; } form .field .text:focus { outline: 0; left: -1px; top: -1px; margin-bottom: 0; } form .field .error { background: url('/Images/site/customer/error.png') no-repeat 270px center; outline: 0; border: 2px solid #CE4563; left: -1px; top: -1px; } form .field .success { background: url('/Images/site/customer/correct.png') no-repeat 270px center white; outline: 0; border: 2px solid #44CEAA; left: -1px; top: -1px; } form .field textarea.text { min-height: 66px; line-height: 16px; } form .recaptcha { padding-bottom: 15px; } /* }}} forms */ /* buttons {{{ */ a.button { display: inline-block; height: 38px; line-height: 38px; background: #6eb7df url(../Images/logmein123/gradient.png) 0 -192px repeat-x; font-weight: bold; font-size: 13px; color: #666; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #b0b0b0; border-left: 1px solid #d8d8d5; border-right: 1px solid #d8d8d5; text-align: center; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); } a.button:hover { opacity: 0.9; } a.submit, a.primary { color: #fff; background-position: 0 -51px; border-top: 1px solid #6db3d6; border-bottom: 1px solid #317da5; border-left: 1px solid #67add1; border-right: 1px solid #67add1; } a.disabled { background-position: 0 -203px; border-top: 1px solid #d3d3d3; border-bottom: 1px solid #bababa; color: #fff; cursor: not-allowed; } a.disabled:hover { background-position: 0 -203px; } a.button.big { height: 60px; line-height: 60px; background-position: 0 -90px; font-size: 24px; } form.broken a.submit { background-position: 0 -231px; border-top: 1px solid #d3d3d3; border-bottom: 1px solid #bababa; color: #fff; border-right: 1px solid #ccc; border-left: 1px solid #ccc; cursor: not-allowed; } form.broken a.submit.big { background-position: 0 -141px; } .submitButtonWrapper { min-height: 50px; } /* }}} */ .downloadNotification { position:absolute; width: 300px; height: 150px; background-color: white; box-shadow: 0 0 20px 5px #EBEBEB; border-radius: 5px; z-index: 10 } .downloadNotification .arrow { display: inline-block; width: 100px; height: 150px; background: url('/Images/site/customer/arrow.png') center center no-repeat #48AEE4; border-radius: 5px 0 0 5px; margin-right: 0 } .downloadNotification p { width: 180px; float: right; padding: 40px 0; font-size: 16px } .downloadNotification p:focus { outline: none; } .downloadNotification.bottomLeft { left: 15px; bottom: 15px; } .downloadNotification.topRight { top: 65px; right: 15px; } .downloadNotification.bottomCenter { margin-left: auto; margin-right: auto; left: 0; right: 0; bottom: 100px; } .downloadNotification.closed { display: none; } .downloadNotification.topRight .arrow { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); border-radius: 0 5px 5px 0; } .downloadNotification .icon-close { position: absolute; top: 10px; right: 10px; cursor: pointer; } /* mediaqueries {{{ */ @media only screen and (max-width: 780px), only screen and (max-device-width: 780px) { .widePage { width: auto; } .warningBox { width: auto; margin: 0 30px; } .warningBox .hasMore p.opener, .warningBox .hasMore .more { width: auto; } .warningBox h2 { text-align: center; } #Footer a { padding-right: 4px; } .slimPage { width: 545px; } .login.formWrap { padding: 50px 0; } } @media only screen and (max-width: 520px), only screen and (max-device-width: 520px) { .slimPage, .widePage { padding-top: 80px; } .slimPage { width: 350px; } #Header { margin: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .connectTechnician .steps { width: 330px; } .connectTechnician .step1 .text { padding-top: 20px; } .connectTechnician .step2 .text { padding-top: 30px; } .warningBox { font-size: 12px; line-height: 15px; padding: 10px 10px 30px 10px; background-position: 10px 20px; min-width: 170px; } .warningBox .hasMore .more { font-size: 12px; line-height: 15px; } .warningBox h2 { font-size: 14px; line-height: 16px; } .warningBox .reportAbuse { margin-top: 10px; } .warningBox .endButtons { white-space: nowrap; } .warningPage .button { width: 100%; } .warningPage .button:first-child { margin-bottom: 20px; } .warningPage .reportAbuse { margin-top: 180px; } #Footer p { width: 80%; margin: 0 auto; } #Footer { line-height: 15px; } #Footer a { padding: 0; } .connectTechnician .warningNote { width: 350px; padding: 0; } } /* }}} mediaqueries */