@gray_color: #5f5f5f; @lighter_gray_color: #8e8e8e; @link_color: #3ca1e7; @blue_color: #3ca1e7; @dark_blue_color: #0068a9; @default_width: 984px; @title_color: #618cfc; html { height: 100%; } body { width: 100%; height: 90%; margin: 0; padding: 0; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; color: #555; } body img { border: none; } body a, a:visited { text-decoration: none; color: inherit; } body a:hover { text-decoration: underline; } div.topbar { width: @default_width - 10; height: 67px; margin: auto; } div#zeropc_logo { padding: 14px 0 0 10px; float: left; } div#login { float: right; width: 220px; font-size: 13px; color: @lighter_gray_color; padding: 13px 10px 0 0; } div#login_button { width: 106px; height: 30px; background-image: url('/images/login_button.png?-26'); background-repeat: no-repeat; color: white; text-align: center; padding-top: 10px; font-size: 1.3em; text-shadow: -1px -1px rgba(0,0,0,0.7); float: left; font-size: 17px; } div#signup_link { float: right; margin-top: 13px; } div#signup_link a, div#signup_link a:visited { color: @link_color; } div.login a:hover { text-decoration: none; } div.navigation { width: 100%; float: left; } div.navigation a, div.navigation a:visited { color: inherit; } div.navigation_in { margin: auto; margin-top: 50px; width: 700px; height: 140px; border: 1px solid #dadada; border-radius: 5px; text-align: center; } div.navigation div.column { width: 140px; padding: 0 10px 0 10px; display: inline-block; vertical-align: top; } div.navigation div.column h5 { color: @gray_color; text-align: center; margin-bottom: 10px; font-weight: 300; } div.navigation div.column ul { margin: 0; padding: 0; list-style: none; color: @lighter_gray_color; font-size: 0.7em; text-align: center; } div.navigation div.column ul li { padding: 2px 0 2px 0; } div.footer { text-align: center; margin-bottom: 30px; font-size: 12px; color: @lighter_gray_color; } div.banner { width: 100%; min-width: @default_width; height: 400px; position: relative; top: -1px; } div.banner.gray { background-color: #f5f5f5; border-bottom: 1px solid #dadada; border-top: 1px solid #dadada; } div.banner.white { background-image: url('/images/banner_white_bg.png?-26'); background-repeat: repeat-x; } div.banner_in { width: @default_width - 30; margin: auto; } div.banner div.banner_in { height: 400px; overflow: hidden; } div.banner_description { width: 500px; height: 360px; padding: 20px 0 0 0; text-align: center; } div.banner.left div.banner_description, div.banner.right img { float: right; } div.banner.right div.banner_description, div.banner.left img { float: left; } div.banner_description h3 { font-weight: 300; font-size: 2em; color: @title_color; } div.banner_description p.description { font-size: 1.0em; line-height: 1.4em; color: @lighter_gray_color; } div.banner_description em { font-style: normal; font-size: 1.3em; color: #666; } div#login_popup { width: 230px; height: 430px; padding: 10px 20px 20px 20px; border-radius: 10px; position: absolute; background-color: white; display: none; -moz-box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.3); -webkit-box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.3); box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.3); font-size: 0.8em; color: #555; z-index: 1; } div#login_popup_in { margin-left: 8px; margin-right: 8px; } div#login_popup img#login_arrow { position: relative; top: -25px; left: 170px; } div#login_error { width: 100%; height: 50px; color: red; display: none; text-align: center; float: left; } div#login_error a, div#login_error a:visited { color: @link_color; } input[type="text"], input[type="password"] { width: 200px; height: 30px; margin: 5px 0 5px 0; border: 1px solid #bbb; -moz-box-shadow: inset 0 5px 5px rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 5px 5px rgba(0,0,0,0.1); box-shadow: inset 0 5px 5px rgba(0,0,0,0.1); font-size: 0.9em; color: #777; border-radius: 3px; padding-left: 10px; } ::-webkit-input-placeholder { color: #ccc; font-weight: 200; } :-moz-placeholder { color: #ccc; font-weight: 200; } div#login_rememberme { padding-top: 12px; width: 130px; float: left; } input#zd_login_widget_btn_login { margin-top: 2px; margin-right: 1px; float: right; } div.devide, div#login_last { float: left; border-top: 1px solid #ddd; width: 100%; margin: 10px 0 10px 0; text-align: center; color: #bbb; } div#login_last { padding-top: 10px; } div#login_last a { color: @link_color; line-height: 20px; } div#social_connect img { margin: 5px 0 5px 0; } input#zd_login_widget_seckey { width: 120px; float: left; } input#zd_login_widget_btn_login_sk { float: right; margin-top: 4px; } div#login_button_loading { float: right; } button { background: #228ffe; /* Old browsers */ background: -moz-linear-gradient(top, #228ffe 0%, #0077e4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#228ffe), color-stop(100%,#0077e4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #228ffe 0%,#0077e4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #228ffe 0%,#0077e4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #228ffe 0%,#0077e4 100%); /* IE10+ */ background: linear-gradient(to bottom, #228ffe 0%,#0077e4 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#228ffe', endColorstr='#0077e4',GradientType=0 ); /* IE6-9 */ -moz-box-shadow: inset 1px 1px rgba(255,255,255,0.5); -webkit-box-shadow: inset 1px 1px rgba(255,255,255,0.5); box-shadow: inset 1px 1px rgba(255,255,255,0.5); border-radius: 5px; border: 1px solid #105eac; overflow: hidden; color: white; font-size: 14px; text-shadow: -1px -1px rgba(0,0,0,0.3); } div#feedback_button { position: fixed; left: -8px; top: 500px; } @media all and (-webkit-min-device-pixel-ratio: 1.5) { div.banner.white { background-image: url('images/banner_white_bg@2x.png?-26'); background-size: 50px 6px; } div#login_button { background-image: url('/images/login_button@2x.png?-26'); background-size: 106px 40px; } } /* Cross Promotion */ .other-products { width: 100%; height: 60%; text-align: center; padding: 2em 0; } .other-products img { float: none !important; } .other-products ul { padding: 0; } .other-products a, .other-products a:visited { color: #6D6D6D; text-decoration: none; } .other-products a:hover { color: #474747; text-decoration: none; } .other-products h3 { font-size: 24px; color: #9F9F9F; font-weight: 300; } .other-products .promotion-list { display: flex; flex-wrap: wrap; width: 100%; height: 100%; table-layout: fixed; margin-top: 2em; } .other-products .promotion-list > li { flex: 1 0 280px; display: table-cell; vertical-align: top; width: 2%; padding: 10px; } .other-products .promotion-list h3 { margin-top: 0.2em; font-size: 1.2em; font-weight: normal; } .other-products .promotion-list p { font-size: 14px; color: #6D6D6D; } .other-products .platform-icons > li { width: 28px; height: 28px; display: inline-block; margin: 0 10px; } .other-products .platform-icons > li.android { background: url('../images/icon_android.png') no-repeat; background-size: 28px 28px; } .other-products .platform-icons > li.apple { background: url('../images/icon_apple.png') no-repeat; background-size: 28px 28px; } .other-products .platform-icons > li.web { background: url('../images/icon_web.png') no-repeat; background-size: 28px 28px; } .other-products .platform-icons > li.windows { background: url('../images/icon_windows.png') no-repeat; background-size: 28px 28px; } .other-products .platform-icons > li.linux { background: url('../images/icon_linux.png') no-repeat; background-size: 28px 28px; }