From f0b211f269df2b0bb10d5552d14aeb8991a750ed Mon Sep 17 00:00:00 2001 From: seshukm Date: Fri, 20 Jan 2017 17:43:08 +0530 Subject: GUI Code refactor GUI Code refactor for the sun release code. Issue-Id : CLIENT-11 Change-Id: I771cc25ff3c8ff7a4e939ce7baef7dd94a67974b Signed-off-by: seshukm --- .../main/webapp/common/css/style-ict-bootstrap.css | 1676 ++++++++++---------- 1 file changed, 838 insertions(+), 838 deletions(-) (limited to 'openo-portal/portal-common/src/main/webapp/common/css/style-ict-bootstrap.css') diff --git a/openo-portal/portal-common/src/main/webapp/common/css/style-ict-bootstrap.css b/openo-portal/portal-common/src/main/webapp/common/css/style-ict-bootstrap.css index cbf38b49..36d50b25 100644 --- a/openo-portal/portal-common/src/main/webapp/common/css/style-ict-bootstrap.css +++ b/openo-portal/portal-common/src/main/webapp/common/css/style-ict-bootstrap.css @@ -1,838 +1,838 @@ -/** - * Copyright 2016, CMCC Technologies Co., Ltd. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -@font-face { - font-family: 'Lato'; - font-style: normal; - font-weight: 400; - src: local('Lato Regular'), local('Lato-Regular'), url(9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff'); -} -html, body, div, span, applet, object, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 1em; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - background: rgba(231, 231, 231, 0.43); - line-height: 1.125em; - color: white; - max-width: 1920px; - margin: 0 auto; - position: relative; - font-family: 'Lato', Helvetica, Arial, Tahoma; - text-shadow: 1px 1px 0 rgba(0,0,0,0.3); -} -ol, ul { - padding: 0 10px; - margin: 0 10px; - line-height: 1.5em; -} -h1, h2, h3, h4, h5, h6 { - text-shadow: 1px 1px 0 rgba(0,0,0,0.5); - font-family: 'Lato', Georgia, Helvetica, Tahoma; - margin: 10px 0; - font-weight: normal; -} -h1 { - font-size: 1.875em; -} -h2 { - font-size: 1.6em; - line-height: 1em; -} -h3 { - font-size: 1.25em; -} -h4 { - font-size: 1.125em; -} -h5 { - font-size: 1em; -} -h6 { - font-size: 0.875em; -} -a { - text-decoration: none; - color: white; -} -a:hover { - color: white; - opacity: 0.9; -} -a:visited { - color: white; -} -h2 { - cursor: pointer; -} -code, pre { - font-family: Monaco, Menlo, Consolas; - font-size: 1em; - color: #FFFFDE; - padding: 0 3px 2px; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -.header { - /*padding: 14px 0; - background-color: rgb(19, 17, 17); - background-color: #006a3f; - background-image: - radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), - radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), - radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), - radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%); - background-image: - -webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), - -webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), - -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), - -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%); - background-position: 0 0px, 4px 4px, 0 1px, 4px 5px; - background-size: 8px 8px; - border-bottom: 1px solid rgb(41, 41, 41);*/ - margin-top: 1%; - /* margin-left: 10%; */ - margin-left: 90px; -} -@media (min-width: 1600px){ - .header { - margin-top: 1%; - margin-left: 95px; - } -} - -.header div.float-left { - /*padding-left: 2%;*/ -} - -@media (min-width: 769px) and (max-width: 1024px) { - .header div.float-left { - /*padding-left: 5%;*/ - } -} - -.header a { - font-size: 35px; - color: white; - display: block; - opacity: 0.8; -} -.header a:first-letter { - font-size: 60px; - line-height: 40px; - font-weight: bold; -} -.header .target { - margin-left: 5px; - margin-bottom: 20px; -} - -.header .reponsive-block { - list-style: none; - margin: 0px; - padding: 50px 2% 0 0; -} - -.header .reponsive-block li { - display: inline-block; - float:left; -} - -.header .reponsive-block a { - display: inline-block; - margin: 0 5px; - cursor: pointer; - background: url(../i/reponsive.png) no-repeat; -} - -.header .reponsive-block a.desktop { - background-position: 3px 0; - width: 34px; height: 26px; -} - -.header .reponsive-block a.tablet-landscape { - background-position: -49px 0; - width: 22px; - height: 22px; -} - -.header .reponsive-block a.tablet-portrait { - background-position: -90px 0; - width: 18px; - height: 24px; -} - -.header .reponsive-block a.iphone-landscape { - background-position: -129px 0; - width: 20px; - height: 20px; -} - -.header .reponsive-block a.iphone-portrait { - background-position: -166px 0; - width: 16px; - height: 26px; -} - -.header .reponsive-block a.desktop:hover, -.header .reponsive-block a.desktop.active { - background-position: 3px -34px; -} - -.header .reponsive-block a.tablet-landscape:hover, -.header .reponsive-block a.tablet-landscape.active { - background-position: -49px -34px; -} - -.header .reponsive-block a.tablet-portrait:hover, -.header .reponsive-block a.tablet-portrait.active { - background-position: -91px -33px; -} - -.header .reponsive-block a.iphone-landscape:hover, -.header .reponsive-block a.iphone-landscape.active { - background-position: -128px -33px; -} - -.header .reponsive-block a.iphone-portrait:hover, -.header .reponsive-block a.iphone-portrait.active { - background-position: -166px -33px; -} -.free-wall { - margin: auto; -} - -.free-wall-logo { - margin: auto; - height: 420px; -} -.size2-2 { - width: 80px; - height: 80px; -} - -.size11 { - height: 160px; - width: 160px; -} - -.size12 { - width: 160px; - height: 320px; -} - -.size21 { - width: 320px; - height: 160px; -} - -.size22 { - height: 320px; - width: 320px; -} - -.size13 { - width: 160px; - height: 480px; -} - -.size31 { - width: 480px; - height: 160px; -} - -.size23 { - width: 320px; - height: 480px; -} - -.size24 { - width: 320px; - height: 640px; -} - -.size32 { - width: 480px; - height: 320px; -} - -.size33 { - width: 480px; - height: 480px; -} - -.size34 { - width: 480px; - height: 640px; -} - -.size43 { - width: 640px; - height: 480px; -} - -.size35 { - width: 480px; - height: 800px; -} - -.size53 { - width: 800px; - height: 480px; -} - -.size36 { - width: 480px; - height: 960px; -} - -.size41 { - width: 270px; - height: 160px; -} -.size42 { - width: 270px; - height: 320px; -} -.size41-1024 { - width: 213px; - height: 133px; -} -.size42-1024 { - width: 213px; - height: 275px; -} -.size41-1366 { - width: 278px; - height: 156px; -} -.size42-1366 { - width: 278px; - height: 332px; -} -.size41-1440 { - width: 310px; - height: 168px; -} -.size42-1440 { - width: 310px; - height: 340px; -} -.size41-1600 { - width: 330px; - height: 173px; -} -.size42-1600 { - width: 330px; - height: 354px; -} - -.donate form { - height: 100%; - width: 100%; - background: rgb(44, 62, 80); -} - -.donate form .paypal { - display: block; - margin: auto; - padding: 20px 0px 0px 0px; - outline: 0; -} - -.img-demo { - vertical-align: bottom; - list-style: none; - margin:0; - padding: 0; -} - -.img-demo li { - float: left; - width: 25%; - text-align: center; -} - -.img-demo li img { - border: 2px solid white; - width: 98px; - height: 98px; -} - -.float-left { - float: left; -} - -.float-right { - float: right; -} - -.clearfix:before, -.clearfix:after { - content: ""; - display: table; -} - -.clearfix:after { - clear: both; -} - -.clearfix { - zoom: 1; /* For IE 6/7 (trigger hasLayout) */ -} - -.rest-left { - margin-left: 244px; -} - -.desc h1, -.desc h2, -.desc h3, -.desc h4, -.desc h5, -.desc h6 { - font-weight: bold; -} - -.desc h2 { - border-bottom: 1px solid rgba(0,0,0,0.1); - margin-top: 0px; - margin-bottom: 0px; - padding-bottom: 50px; -} - -.desc h2 span { - float: left; - display: block; - line-height: 50px; -} - -@media (max-width: 1024px) { - .brick { - height:140px; - } -} - -.brick { - margin-top:10px; - background-color: white; - /* float: left; */ - cursor: default; - overflow: hidden; - background-repeat: no-repeat; - background-size: cover; - background-position: center; - height:160px; -} - -@media (min-width: 1440px) { - .brick { - height:180px; - } -} - -.brick .cover { - overflow: hidden; - margin: 20px; - margin-top: 25%; - font-size: 30px; - float: right; - text-align: right; -} - -.brick .read-more { - position: absolute; - display: none; - bottom: 0px; - left: 0px; - right: 0px; - padding: 12px; - background: rgb(0, 0, 0); - background: rgba(0, 0, 0, 0.45); -} - -.brick:hover .read-more { - display: block; - cursor: pointer; -} - -.brick .desc { - display: none; -} - -.full-width .float-left { - display: none; -} - -.full-width .desc { - display: block; -} - -.full-width.brick { - box-shadow: none; - overflow: visible; - border: none !important; - background: none !important; -} - -.full-width.brick .cover { - margin: 0px 20px; - color: #333; -} - -.full-width.brick .cover * { - text-shadow: none; -} - -.full-width.brick .cover code { - color: #666; -} - -.open .float-left { - display: none; -} - -.open .desc { - display: block; -} - -.example { - width: 0px; - height: 0px; - overflow: visible !important; /* for ie7 */ -} - -.example-draggable { - cursor: move; -} - -.example-draggable * { - cursor: move; -} - -.example-draggable a { - cursor: pointer; -} - -.cell { - background-position: center center; - background-repeat: no-repeat; - background-size: cover; - position: absolute; - background-color: #222; -} - -[class*="-share"] { - cursor: pointer; - margin: 20px 0; - line-height: 30px; - padding-left: 30px; -} - -.facebook-share { - background: url(../i/fb.png) no-repeat left center; -} - -.twitter-share { - background: url(../i/tw.png) no-repeat left center; -} - -.google-share { - background: url(../i/gp.png) no-repeat left center; -} - -.download-icon { - background: url(../i/download.png) no-repeat left center; - display: block; - margin: 0 0 10px 0; - line-height: 30px; - padding-left: 30px; -} - -.js-icon { - background: url(../i/js.png) no-repeat left center; - display: block; - line-height: 30px; - padding-left: 30px; -} - -.fork { - float: right; - width: 100%; - height: 100%; - display: block; - background: url(../i/forkme.png) no-repeat top right; -} - -.back-button { - position: fixed; - z-index: 9999; - padding: 1%; - bottom: 2%; - right: 2%; - display: none; - background: black; -} - -.back-button .back-icon { - background: url(../i/back.png) no-repeat top center; - width: 45px; - height: 27px; - display: block; -} - -.back-button .back-icon:hover { - background: url(../i/back.png) no-repeat bottom center; -} - -@media (min-width: 1600px) { - .main-content-wrapper{ - width:100%; - margin-left:95px; - margin-right: 1%; - } -} - -@media (min-width: 1441px) and (max-width: 1599px) { - .main-content-wrapper{ - width:100%; - /*margin-left: 0%; */ - margin-left:75px; - margin-right: 1%; - } -} - -@media (min-width: 1367px) and (max-width: 1440px) { - .main-content-wrapper{ - width:100%; - margin-left: 75px; - margin-right: 1%; - } -} - -@media (min-width: 1281px) and (max-width: 1366px) { - .main-content-wrapper{ - width:100%; - /*margin-left: 2%; */ - margin-left:75px; - margin-right: 2%; - } -} - -@media (min-width: 1025px) and (max-width: 1280px) { - .main-content-wrapper{ - width:100%; - /*margin-left: 4%;*/ - margin-left:75px; - margin-right: 1%; - } -} - -@media (min-width: 769px) and (max-width: 1024px) { - .main-content-wrapper{ - width:100%; - /*margin-left: 6%;*/ - margin-left:75px; - margin-right: 1%; - } -} - -@media (min-width: 641px) and (max-width: 768px) { - .main-content-wrapper{ - width:100%; - margin-left: 10%; - margin-right: 1%; - } -} - -@media (min-width: 481px) and (max-width: 640px) { - .main-content-wrapper{ - width:100%; - margin-left: 0%; - margin-right: 1%; - } -} - -@media (max-width: 480px) { - .main-content-wrapper{ - width:100%; - margin-left: 9%; - margin-right: 1%; - } -} - -body{ - font-family: microsoft yahei; - background: #484747; -} - -.skyBlue-mainpage{ - background: -moz-linear-gradient(left top, #1cadd9, #20c0f0); - background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #1cadd9), color-stop(1, #20c0f0)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1cadd9', endColorstr='#20c0f0', GradientType='0'); - background: linear-gradient(to bottom right,#1cadd9, #20c0f0); -} -.golden-mainpage{ - background-image: -moz-linear-gradient(left top, #bca374, #d9cf7a); - background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #bca374), color-stop(1, #d9cf7a)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bca374, endColorstr=#d9cf7a, GradientType=0); - background: linear-gradient(to bottom right,#bca374, #d9cf7a); -} -.manLieONCloud-image{ - background-image: url('../image/mainpage/pic/1.png'); -} -.orange-mainpage{ - background-image: -moz-linear-gradient(left top, #f09c0a, #f4be35); - background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f09c0a), color-stop(1, #f4be35)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f09c0a, endColorstr=#f4be35, GradientType=0); - background: linear-gradient(to bottom right,#f09c0a, #f4be35); -} -.pinkishRed-mainpage{ - background-image: -moz-linear-gradient(left top, #e03655, #ef3a5b); - background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #e03655), color-stop(1, #ef3a5b)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e03655, endColorstr=#ef3a5b, GradientType=0); - background: linear-gradient(to bottom right,#e03655, #ef3a5b); -} -.magicCube-image{ - background-image: url('../image/mainpage/pic/4.png'); -} -.magicThought-image{ - background-image: url('../image/mainpage/pic/5.png'); -} -.grassGreen-mainpage{ - background-image: -moz-linear-gradient(left top, #008b04, #03a501); - background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #008b04), color-stop(1, #03a501)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#008b04, endColorstr=#03a501, GradientType=0); - background: linear-gradient(to bottom right,#008b04, #03a501); -} -.meeting-image{ - background-image: url('../image/mainpage/pic/3.png'); -} -.earth-image{ - background-image: url('../image/mainpage/pic/2.png'); -} -.toolsImageBrokenLine{ - background-image: url('../image/mainpage/icon/1.png'); - height: 150px; - width: 120px; - margin-top: 15%; - margin-left:-5px; -} -.toolsImageHierachy{ - background-image: url('../image/mainpage/icon/2.png'); - height: 150px; - width: 120px; - margin-top: 15%; - margin-left:-5px; -} -.toolsImageGear{ - background-image: url('../image/mainpage/icon/3.png'); - height: 150px; - width: 120px; - margin-top: 15%; - margin-left:-5px; -} -.toolsImagePresent{ - background-image: url('../image/mainpage/icon/4.png'); - height: 150px; - width: 120px; - margin-top: 15%; - margin-left:-5px; -} -.toolsImageFile{ - background-image: url('../image/mainpage/icon/5.png'); - height: 150px; - width: 120px; - margin-top: 15%; - margin-left:-5px; -} -.toolsImageBriefcase{ - background-image: url('../image/mainpage/icon/6.png'); - height: 150px; - width: 120px; - margin-top: 15%; - margin-left:-5px; -} -.contentTip{ - opacity:0; - display:block; - padding: 20px; - text-align: left; - line-height: inherit; - text-indent: 2em; - position: absolute; -} -.contentTipShow{ - display:block; - padding: 20px; - text-align: left; - line-height: inherit; - text-indent: 2em; - position: absolute; -} -.coverHidden{ - display:none; -} -.coverShrink{ - width:0px !important; - height:0px !important; -} -/* -.brick .contentToggle{ - -webkit-transition: opacity 1s ease-in-out; - -moz-transition: opacity 1s ease-in-out; - -o-transition: opacity 1s ease-in-out; - transition: opacity 1s ease-in-out; -} -.brick .cover :hover{ - opacity:0; -} -*/ -.hideSideMenuForMainPage { - display: none! important; -} -.fullFillDiv { - width:100%; - height:100%; -} -@media screen and (min-width: 992px)and (max-width: 1280px) { - .brick .cover { - font-size:25px; - } -} - +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +@font-face { + font-family: 'Lato'; + font-style: normal; + font-weight: 400; + src: local('Lato Regular'), local('Lato-Regular'), url(9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff'); +} +html, body, div, span, applet, object, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 1em; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + background: rgba(231, 231, 231, 0.43); + line-height: 1.125em; + color: white; + max-width: 1920px; + margin: 0 auto; + position: relative; + font-family: 'Lato', Helvetica, Arial, Tahoma; + text-shadow: 1px 1px 0 rgba(0,0,0,0.3); +} +ol, ul { + padding: 0 10px; + margin: 0 10px; + line-height: 1.5em; +} +h1, h2, h3, h4, h5, h6 { + text-shadow: 1px 1px 0 rgba(0,0,0,0.5); + font-family: 'Lato', Georgia, Helvetica, Tahoma; + margin: 10px 0; + font-weight: normal; +} +h1 { + font-size: 1.875em; +} +h2 { + font-size: 1.6em; + line-height: 1em; +} +h3 { + font-size: 1.25em; +} +h4 { + font-size: 1.125em; +} +h5 { + font-size: 1em; +} +h6 { + font-size: 0.875em; +} +a { + text-decoration: none; + color: white; +} +a:hover { + color: white; + opacity: 0.9; +} +a:visited { + color: white; +} +h2 { + cursor: pointer; +} +code, pre { + font-family: Monaco, Menlo, Consolas; + font-size: 1em; + color: #FFFFDE; + padding: 0 3px 2px; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +.header { + /*padding: 14px 0; + background-color: rgb(19, 17, 17); + background-color: #006a3f; + background-image: + radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), + radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), + radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), + radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%); + background-image: + -webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), + -webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), + -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), + -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%); + background-position: 0 0px, 4px 4px, 0 1px, 4px 5px; + background-size: 8px 8px; + border-bottom: 1px solid rgb(41, 41, 41);*/ + margin-top: 1%; + /* margin-left: 10%; */ + margin-left: 90px; +} +@media (min-width: 1600px){ + .header { + margin-top: 1%; + margin-left: 95px; + } +} + +.header div.float-left { + /*padding-left: 2%;*/ +} + +@media (min-width: 769px) and (max-width: 1024px) { + .header div.float-left { + /*padding-left: 5%;*/ + } +} + +.header a { + font-size: 35px; + color: white; + display: block; + opacity: 0.8; +} +.header a:first-letter { + font-size: 60px; + line-height: 40px; + font-weight: bold; +} +.header .target { + margin-left: 5px; + margin-bottom: 20px; +} + +.header .reponsive-block { + list-style: none; + margin: 0px; + padding: 50px 2% 0 0; +} + +.header .reponsive-block li { + display: inline-block; + float:left; +} + +.header .reponsive-block a { + display: inline-block; + margin: 0 5px; + cursor: pointer; + background: url(../i/reponsive.png) no-repeat; +} + +.header .reponsive-block a.desktop { + background-position: 3px 0; + width: 34px; height: 26px; +} + +.header .reponsive-block a.tablet-landscape { + background-position: -49px 0; + width: 22px; + height: 22px; +} + +.header .reponsive-block a.tablet-portrait { + background-position: -90px 0; + width: 18px; + height: 24px; +} + +.header .reponsive-block a.iphone-landscape { + background-position: -129px 0; + width: 20px; + height: 20px; +} + +.header .reponsive-block a.iphone-portrait { + background-position: -166px 0; + width: 16px; + height: 26px; +} + +.header .reponsive-block a.desktop:hover, +.header .reponsive-block a.desktop.active { + background-position: 3px -34px; +} + +.header .reponsive-block a.tablet-landscape:hover, +.header .reponsive-block a.tablet-landscape.active { + background-position: -49px -34px; +} + +.header .reponsive-block a.tablet-portrait:hover, +.header .reponsive-block a.tablet-portrait.active { + background-position: -91px -33px; +} + +.header .reponsive-block a.iphone-landscape:hover, +.header .reponsive-block a.iphone-landscape.active { + background-position: -128px -33px; +} + +.header .reponsive-block a.iphone-portrait:hover, +.header .reponsive-block a.iphone-portrait.active { + background-position: -166px -33px; +} +.free-wall { + margin: auto; +} + +.free-wall-logo { + margin: auto; + height: 420px; +} +.size2-2 { + width: 80px; + height: 80px; +} + +.size11 { + height: 160px; + width: 160px; +} + +.size12 { + width: 160px; + height: 320px; +} + +.size21 { + width: 320px; + height: 160px; +} + +.size22 { + height: 320px; + width: 320px; +} + +.size13 { + width: 160px; + height: 480px; +} + +.size31 { + width: 480px; + height: 160px; +} + +.size23 { + width: 320px; + height: 480px; +} + +.size24 { + width: 320px; + height: 640px; +} + +.size32 { + width: 480px; + height: 320px; +} + +.size33 { + width: 480px; + height: 480px; +} + +.size34 { + width: 480px; + height: 640px; +} + +.size43 { + width: 640px; + height: 480px; +} + +.size35 { + width: 480px; + height: 800px; +} + +.size53 { + width: 800px; + height: 480px; +} + +.size36 { + width: 480px; + height: 960px; +} + +.size41 { + width: 270px; + height: 160px; +} +.size42 { + width: 270px; + height: 320px; +} +.size41-1024 { + width: 213px; + height: 133px; +} +.size42-1024 { + width: 213px; + height: 275px; +} +.size41-1366 { + width: 278px; + height: 156px; +} +.size42-1366 { + width: 278px; + height: 332px; +} +.size41-1440 { + width: 310px; + height: 168px; +} +.size42-1440 { + width: 310px; + height: 340px; +} +.size41-1600 { + width: 330px; + height: 173px; +} +.size42-1600 { + width: 330px; + height: 354px; +} + +.donate form { + height: 100%; + width: 100%; + background: rgb(44, 62, 80); +} + +.donate form .paypal { + display: block; + margin: auto; + padding: 20px 0px 0px 0px; + outline: 0; +} + +.img-demo { + vertical-align: bottom; + list-style: none; + margin:0; + padding: 0; +} + +.img-demo li { + float: left; + width: 25%; + text-align: center; +} + +.img-demo li img { + border: 2px solid white; + width: 98px; + height: 98px; +} + +.float-left { + float: left; +} + +.float-right { + float: right; +} + +.clearfix:before, +.clearfix:after { + content: ""; + display: table; +} + +.clearfix:after { + clear: both; +} + +.clearfix { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +.rest-left { + margin-left: 244px; +} + +.desc h1, +.desc h2, +.desc h3, +.desc h4, +.desc h5, +.desc h6 { + font-weight: bold; +} + +.desc h2 { + border-bottom: 1px solid rgba(0,0,0,0.1); + margin-top: 0px; + margin-bottom: 0px; + padding-bottom: 50px; +} + +.desc h2 span { + float: left; + display: block; + line-height: 50px; +} + +@media (max-width: 1024px) { + .brick { + height:140px; + } +} + +.brick { + margin-top:10px; + background-color: white; + /* float: left; */ + cursor: default; + overflow: hidden; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height:160px; +} + +@media (min-width: 1440px) { + .brick { + height:180px; + } +} + +.brick .cover { + overflow: hidden; + margin: 20px; + margin-top: 25%; + font-size: 30px; + float: right; + text-align: right; +} + +.brick .read-more { + position: absolute; + display: none; + bottom: 0px; + left: 0px; + right: 0px; + padding: 12px; + background: rgb(0, 0, 0); + background: rgba(0, 0, 0, 0.45); +} + +.brick:hover .read-more { + display: block; + cursor: pointer; +} + +.brick .desc { + display: none; +} + +.full-width .float-left { + display: none; +} + +.full-width .desc { + display: block; +} + +.full-width.brick { + box-shadow: none; + overflow: visible; + border: none !important; + background: none !important; +} + +.full-width.brick .cover { + margin: 0px 20px; + color: #333; +} + +.full-width.brick .cover * { + text-shadow: none; +} + +.full-width.brick .cover code { + color: #666; +} + +.open .float-left { + display: none; +} + +.open .desc { + display: block; +} + +.example { + width: 0px; + height: 0px; + overflow: visible !important; /* for ie7 */ +} + +.example-draggable { + cursor: move; +} + +.example-draggable * { + cursor: move; +} + +.example-draggable a { + cursor: pointer; +} + +.cell { + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + position: absolute; + background-color: #222; +} + +[class*="-share"] { + cursor: pointer; + margin: 20px 0; + line-height: 30px; + padding-left: 30px; +} + +.facebook-share { + background: url(../i/fb.png) no-repeat left center; +} + +.twitter-share { + background: url(../i/tw.png) no-repeat left center; +} + +.google-share { + background: url(../i/gp.png) no-repeat left center; +} + +.download-icon { + background: url(../i/download.png) no-repeat left center; + display: block; + margin: 0 0 10px 0; + line-height: 30px; + padding-left: 30px; +} + +.js-icon { + background: url(../i/js.png) no-repeat left center; + display: block; + line-height: 30px; + padding-left: 30px; +} + +.fork { + float: right; + width: 100%; + height: 100%; + display: block; + background: url(../i/forkme.png) no-repeat top right; +} + +.back-button { + position: fixed; + z-index: 9999; + padding: 1%; + bottom: 2%; + right: 2%; + display: none; + background: black; +} + +.back-button .back-icon { + background: url(../i/back.png) no-repeat top center; + width: 45px; + height: 27px; + display: block; +} + +.back-button .back-icon:hover { + background: url(../i/back.png) no-repeat bottom center; +} + +@media (min-width: 1600px) { + .main-content-wrapper{ + width:100%; + margin-left:95px; + margin-right: 1%; + } +} + +@media (min-width: 1441px) and (max-width: 1599px) { + .main-content-wrapper{ + width:100%; + /*margin-left: 0%; */ + margin-left:75px; + margin-right: 1%; + } +} + +@media (min-width: 1367px) and (max-width: 1440px) { + .main-content-wrapper{ + width:100%; + margin-left: 75px; + margin-right: 1%; + } +} + +@media (min-width: 1281px) and (max-width: 1366px) { + .main-content-wrapper{ + width:100%; + /*margin-left: 2%; */ + margin-left:75px; + margin-right: 2%; + } +} + +@media (min-width: 1025px) and (max-width: 1280px) { + .main-content-wrapper{ + width:100%; + /*margin-left: 4%;*/ + margin-left:75px; + margin-right: 1%; + } +} + +@media (min-width: 769px) and (max-width: 1024px) { + .main-content-wrapper{ + width:100%; + /*margin-left: 6%;*/ + margin-left:75px; + margin-right: 1%; + } +} + +@media (min-width: 641px) and (max-width: 768px) { + .main-content-wrapper{ + width:100%; + margin-left: 10%; + margin-right: 1%; + } +} + +@media (min-width: 481px) and (max-width: 640px) { + .main-content-wrapper{ + width:100%; + margin-left: 0%; + margin-right: 1%; + } +} + +@media (max-width: 480px) { + .main-content-wrapper{ + width:100%; + margin-left: 9%; + margin-right: 1%; + } +} + +body{ + font-family: microsoft yahei; + background: #484747; +} + +.skyBlue-mainpage{ + background: -moz-linear-gradient(left top, #1cadd9, #20c0f0); + background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #1cadd9), color-stop(1, #20c0f0)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1cadd9', endColorstr='#20c0f0', GradientType='0'); + background: linear-gradient(to bottom right,#1cadd9, #20c0f0); +} +.golden-mainpage{ + background-image: -moz-linear-gradient(left top, #bca374, #d9cf7a); + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #bca374), color-stop(1, #d9cf7a)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bca374, endColorstr=#d9cf7a, GradientType=0); + background: linear-gradient(to bottom right,#bca374, #d9cf7a); +} +.manLieONCloud-image{ + background-image: url('../image/mainpage/pic/1.png'); +} +.orange-mainpage{ + background-image: -moz-linear-gradient(left top, #f09c0a, #f4be35); + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f09c0a), color-stop(1, #f4be35)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f09c0a, endColorstr=#f4be35, GradientType=0); + background: linear-gradient(to bottom right,#f09c0a, #f4be35); +} +.pinkishRed-mainpage{ + background-image: -moz-linear-gradient(left top, #e03655, #ef3a5b); + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #e03655), color-stop(1, #ef3a5b)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e03655, endColorstr=#ef3a5b, GradientType=0); + background: linear-gradient(to bottom right,#e03655, #ef3a5b); +} +.magicCube-image{ + background-image: url('../image/mainpage/pic/4.png'); +} +.magicThought-image{ + background-image: url('../image/mainpage/pic/5.png'); +} +.grassGreen-mainpage{ + background-image: -moz-linear-gradient(left top, #008b04, #03a501); + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #008b04), color-stop(1, #03a501)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#008b04, endColorstr=#03a501, GradientType=0); + background: linear-gradient(to bottom right,#008b04, #03a501); +} +.meeting-image{ + background-image: url('../image/mainpage/pic/3.png'); +} +.earth-image{ + background-image: url('../image/mainpage/pic/2.png'); +} +.toolsImageBrokenLine{ + background-image: url('../image/mainpage/icon/1.png'); + height: 150px; + width: 120px; + margin-top: 15%; + margin-left:-5px; +} +.toolsImageHierachy{ + background-image: url('../image/mainpage/icon/2.png'); + height: 150px; + width: 120px; + margin-top: 15%; + margin-left:-5px; +} +.toolsImageGear{ + background-image: url('../image/mainpage/icon/3.png'); + height: 150px; + width: 120px; + margin-top: 15%; + margin-left:-5px; +} +.toolsImagePresent{ + background-image: url('../image/mainpage/icon/4.png'); + height: 150px; + width: 120px; + margin-top: 15%; + margin-left:-5px; +} +.toolsImageFile{ + background-image: url('../image/mainpage/icon/5.png'); + height: 150px; + width: 120px; + margin-top: 15%; + margin-left:-5px; +} +.toolsImageBriefcase{ + background-image: url('../image/mainpage/icon/6.png'); + height: 150px; + width: 120px; + margin-top: 15%; + margin-left:-5px; +} +.contentTip{ + opacity:0; + display:block; + padding: 20px; + text-align: left; + line-height: inherit; + text-indent: 2em; + position: absolute; +} +.contentTipShow{ + display:block; + padding: 20px; + text-align: left; + line-height: inherit; + text-indent: 2em; + position: absolute; +} +.coverHidden{ + display:none; +} +.coverShrink{ + width:0px !important; + height:0px !important; +} +/* +.brick .contentToggle{ + -webkit-transition: opacity 1s ease-in-out; + -moz-transition: opacity 1s ease-in-out; + -o-transition: opacity 1s ease-in-out; + transition: opacity 1s ease-in-out; +} +.brick .cover :hover{ + opacity:0; +} +*/ +.hideSideMenuForMainPage { + display: none! important; +} +.fullFillDiv { + width:100%; + height:100%; +} +@media screen and (min-width: 992px)and (max-width: 1280px) { + .brick .cover { + font-size:25px; + } +} + -- cgit 1.2.3-korg