GUI Code refactor

GUI Code refactor for the sun release code.

Issue-Id : CLIENT-11

Change-Id: I771cc25ff3c8ff7a4e939ce7baef7dd94a67974b
Signed-off-by: seshukm <seshu.kumar.m@huawei.com>

1 files changed, 838 insertions, 838 deletions

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;

+	}

+}

+