引入 spreadjs，修改自定义皮肤

css/spreadjs/sheets/gc.spread.sheets.excel2013darkGray.10.0.1.css

@@ -0,0 +1,855 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2013;
+}
+.gc-grayArea {
+    background-color: #dedede;
+}
+.gc-corner-hover {
+    background-color: #dedede;
+}
+.gc-corner-selected {
+    background-color: #dedede;
+}
+.gc-corner-normal {
+    background-color: #dedede;
+}
+.gc-corner-triangle-normal {
+    background-color: #b3b3b3;
+    background-image: -webkit-linear-gradient(top, #b3b3b3, #b3b3b3); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #b3b3b3, #b3b3b3); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #b3b3b3, #b3b3b3); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #b3b3b3, #b3b3b3); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #b3b3b3, #b3b3b3); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #9e9e9e;
+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #217346;
+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-columnHeader-normal {
+    color: black;
+    background-image: none;
+    background-color: #dedede;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-hover {
+    color: black;
+    background-image: none;
+    background-color: #9fd5b7;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-selected {
+    color: #217346;
+    background-image: none;
+    background-color: #d3f0e0;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-highlight {
+    color: #217346;
+    background-image: none;
+    background-color: #bdbdbd;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-rowHeader-normal {
+    color: black;
+    background-color: #dedede;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-hover {
+    color: black;
+    background-color: #9fd5b7;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-selected {
+    color: #217346;
+    background-color: #d3f0e0;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-highlight {
+    color: #217346;
+    background-color: #bdbdbd;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-horizontal-scrollbar {
+    box-sizing:content-box;
+    background: #dedede;
+    border-top: 1px solid #999999;
+    height: 18px;
+    padding: 4px 0px 5px 0px;
+    margin: 0;
+}
+.gc-vertical-scrollbar {
+    box-sizing:content-box;
+    background: #dedede;
+    border-left: 1px solid #999999;
+    width: 18px;
+    padding: 0px 5px 0px 4px;
+    margin: 0;
+}
+.gc-footer-corner {
+    background-color: #dedede;
+}
+.gc-selection {
+    background-color: rgba(20, 20, 20, 0.2);
+    border-color: #217346;
+    color: rgba(240,240,240,0.7);
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #d4d4d4;
+}
+.gc-group {
+    background-color: #dedede;
+    color: #999999;
+}
+.gc-group-box {
+    background-color: #dedede;
+    color: #464646;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #525252;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #439467;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #dedede, #dedede); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #dedede, #dedede); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #dedede, #dedede); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #dedede, #dedede); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #dedede, #dedede); /* Standard syntax; must be last */
+    background-color: #dedede;
+    border-color: #999999;
+}
+.gc-tabStripResizeBarInner {
+    color: #5e5e5e;
+}
+.gc-navMoreButton-highlight {
+    border-color: #5e5e5e;
+}
+.gc-navMoreButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-highlight {
+    border-color: #525252;
+}
+.gc-navButton-normal {
+    border-color: #9e9e9e;
+}
+.gc-tab-normal {
+    color: #262626;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #252627;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#fcfdfd;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #a7abb0;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;  
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 3px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    border-radius:3px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left: 13px;
+    margin-bottom: 5px;
+    float: left;
+}
+#gc-filterCancel {
+    margin-bottom: 5px;
+    float: left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: white;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: white;    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: white;    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #bababa;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: white;
+    border-style:solid;
+    border-color: #ababab;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+    
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#ababab;
+    background:  white;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+
+.gc-scroll-arrow:active,
+.gc-scroll-bar:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#777777;
+    background: #e1e1e1;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+/*-----scrollbar end-----*/
+

css/spreadjs/sheets/gc.spread.sheets.excel2013lightGray.10.0.1.css

@@ -0,0 +1,857 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2013;
+}
+.gc-grayArea {
+    background-color: #f1f1f1;
+}
+.gc-corner-hover {
+    background-color: #f1f1f1;
+}
+.gc-corner-selected {
+    background-color: #f1f1f1;
+}
+.gc-corner-normal {
+    background-color: #f1f1f1;
+}
+.gc-corner-triangle-normal {
+    background-color: #c6c6c6;
+    background-image: -webkit-linear-gradient(top, #c6c6c6, #c6c6c6); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #c6c6c6, #c6c6c6); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #c6c6c6, #c6c6c6); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #c6c6c6, #c6c6c6); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #c6c6c6, #c6c6c6); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #9e9e9e;
+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #217346;
+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+}
+.gc-columnHeader-normal {
+    color: #262626;
+    background-image: none;
+    background-color: #f1f1f1;
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-hover {
+    color: #262626;
+    background-image: none;
+    background-color: #9fd5b7;
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-selected {
+    color: #217346;
+    background-image: none;
+    background-color: #d3f0e0;
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-highlight {
+    color: #217346;
+    background-image: none;
+    background-color: #d4d4d4;
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-rowHeader-normal {
+    color: #262626;
+    background-color: #f1f1f1;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-hover {
+    color: #262626;
+    background-color: #9fd5b7;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-selected {
+    color: #217346;
+    background-color: #d3f0e0;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-highlight {
+    color: #217346;
+    background-color: #d4d4d4;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+    border-right-color: #ababab !important;
+}
+.gc-horizontal-scrollbar {
+    box-sizing:content-box;
+    background: #f1f1f1;
+    border-top: 1px solid #ababab;
+    height: 18px;
+    padding: 4px 0px 5px 0px;
+    margin: 0;
+}
+.gc-vertical-scrollbar {
+    box-sizing:content-box;
+    background: #f1f1f1;
+    border-left: 1px solid #ababab;
+    width: 18px;
+    padding: 0px 5px 0px 4px;
+    margin: 0;
+}
+.gc-footer-corner {
+    background-color: #f1f1f1;
+}
+.gc-selection {
+    background-color: rgba(20, 20, 20, 0.2);
+    border-color: #217346;
+    color: rgba(240,240,240,0.7);
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #d4d4d4;
+}
+.gc-group {
+    background-color:#f1f1f1;
+    color: #ababab;
+}
+.gc-group-box {
+    background-color:#f1f1f1;
+    color: #606060;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #5e5e5e;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #439467;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #f1f1f1, #f1f1f1); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f1f1f1, #f1f1f1); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f1f1f1, #f1f1f1); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f1f1f1, #f1f1f1); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f1f1f1, #f1f1f1); /* Standard syntax; must be last */
+    background-color: #f1f1f1;
+    border-color: #ababab;
+}
+.gc-tabStripResizeBarInner {
+    color: #5e5e5e;
+}
+.gc-navMoreButton-highlight {
+    border-color: #5e5e5e;
+}
+.gc-navMoreButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-highlight {
+    border-color: #005a2b;
+}
+.gc-navButton-normal {
+    border-color: #ababab;
+}
+.gc-tab-normal {
+    color: #444444;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #252627;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#fcfdfd;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #a7abb0;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;  
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 0px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left:13px;
+    margin-bottom:5px;
+    float:left;
+}
+#gc-filterCancel {
+    margin-bottom:5px;
+    float:left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;
+    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: white;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: white;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;
+    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: white;    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #d9d9d9;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: white;
+    border-style:solid;
+    border-color: #ababab;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+    
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#ababab;
+    background:  white;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+
+.gc-scroll-arrow:active,
+.gc-scroll-bar:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#777777;
+    background: #e1e1e1;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+/*-----scrollbar end-----*/
+

css/spreadjs/sheets/gc.spread.sheets.excel2013white.10.0.1.css

@@ -0,0 +1,850 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2013;
+}
+.gc-grayArea {
+    background-color: white;
+}
+.gc-corner-hover {
+    background-color: white;
+}
+.gc-corner-selected {
+    background-color: white;
+}
+.gc-corner-normal {
+    background-color: white;
+}
+.gc-corner-triangle-normal {
+    background-color: #dfdfdf;
+    background-image: -webkit-linear-gradient(top, #dfdfdf, #dfdfdf); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #dfdfdf, #dfdfdf); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #dfdfdf, #dfdfdf); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #dfdfdf, #dfdfdf); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #dfdfdf, #dfdfdf); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #9e9e9e;
+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #217346;
+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+}
+.gc-columnHeader-normal {
+    color: #444444;
+    background-image: none;
+    background-color: white;
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-hover {
+    color: #444444;
+    background-image: none;
+    background-color: #9fd5b7;
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-selected {
+    color: #217346;
+    background-image: none;
+    background-color: #d3f0e0;
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-highlight {
+    color: #217346;
+    background-image: none;
+    background-color: #e1e1e1;
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-rowHeader-normal {
+    color: #444444;
+    background-color: white;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-hover {
+    color: #444444;
+    background-color: #9fd5b7;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-selected {
+    color: #217346;
+    background-color: #d3f0e0;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-highlight {
+    color: #217346;
+    background-color: #e1e1e1;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #ababab !important;
+}
+.gc-horizontal-scrollbar {
+    background-color: #f6f6f6;
+    border-top-color: #ababab;
+}
+.gc-vertical-scrollbar {
+    background-color: #f6f6f6;
+    border-left-color: #ababab;
+}
+.gc-footer-corner {
+    background-color: #f6f6f6;
+}
+.gc-selection {
+    background-color: rgba(20, 20, 20, 0.2);
+    border-color: #217346;
+    color: rgba(240,240,240,0.7);
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #d4d4d4;
+}
+.gc-group {
+    background-color: white;
+    color: #ababab;
+}
+.gc-group-box {
+    background-color: white;
+    color: #666666;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #777777;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #439467;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #f6f6f6, #f6f6f6); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f6f6f6, #f6f6f6); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f6f6f6, #f6f6f6); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f6f6f6, #f6f6f6); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f6f6f6, #f6f6f6); /* Standard syntax; must be last */
+    background-color: #f6f6f6;
+    border-color: #ababab;
+}
+.gc-tabStripResizeBarInner {
+    color: #b3b3b3;
+}
+.gc-navMoreButton-highlight {
+    border-color: #0a6332;
+}
+.gc-navMoreButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-highlight {
+    border-color: #0a6332;
+}
+.gc-navButton-normal {
+    border-color: #c6c6c6;
+}
+.gc-tab-normal {
+    color: #444444;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #252627;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#fcfdfd;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #a7abb0;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;  
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 0px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left:13px;
+    margin-bottom:5px;
+    float:left;
+}
+#gc-filterCancel {
+    margin-bottom:5px;
+    float:left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;
+    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: white;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: white;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;
+    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: white;
+    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #eaeaea;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: white;
+    border-style:solid;
+    border-color: #ababab;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+    
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#ababab;
+    background:  white;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#ababab;
+    background: #f0f0f0;
+}
+
+.gc-scroll-arrow:active,
+.gc-scroll-bar:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#777777;
+    background: #f0f0f0;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+/*-----scrollbar end-----*/
+

css/spreadjs/sheets/gc.spread.sheets.excel2016colorful.10.0.1.css

@@ -0,0 +1,857 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2016;
+}
+.gc-grayArea {
+    background-color: #e6e6e6;
+}
+.gc-corner-hover {
+    background-color: #e6e6e6;
+}
+.gc-corner-selected {
+    background-color: #e6e6e6;
+}
+.gc-corner-normal {
+    background-color: #e6e6e6;
+}
+.gc-corner-triangle-normal {
+    background-color: #b4b4b4;
+    background-image: -webkit-linear-gradient(top, #b4b4b4, #b4b4b4); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #b4b4b4, #b4b4b4); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #b4b4b4, #b4b4b4); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #b4b4b4, #b4b4b4); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #b4b4b4, #b4b4b4); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d6d6d6 !important;
+    border-right-color: #9b9b9b !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #9e9e9e;
+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d6d6d6 !important;
+    border-right-color: #9b9b9b !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #217346;
+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d6d6d6 !important;
+    border-right-color: #9b9b9b !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-columnHeader-normal {
+    color: black;
+    background-image: none;
+    background-color: #e6e6e6;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-hover {
+    color: black;
+    background-image: none;
+    background-color: #9fd5b7;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-selected {
+    color: #217346;
+    background-image: none;
+    background-color: #d3f0e0;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-highlight {
+    color: #217346;
+    background-image: none;
+    background-color: #d2d2d2;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-rowHeader-normal {
+    color: black;
+    background-color: #e6e6e6;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-hover {
+    color: black;
+    background-color: #9fd5b7;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-selected {
+    color: #217346;
+    background-color: #d3f0e0;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-highlight {
+    color: #217346;
+    background-color: #d2d2d2;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-horizontal-scrollbar {
+    box-sizing:content-box;
+    background: #e6e6e6;
+    border-top: 1px solid #999999;
+    height: 18px;
+    padding: 4px 0px 5px 0px;
+    margin: 0;
+}
+.gc-vertical-scrollbar {
+    box-sizing:content-box;
+    background: #e6e6e6;
+    border-left: 1px solid #999999;
+    width: 18px;
+    padding: 0px 5px 0px 4px;
+    margin: 0;
+}
+.gc-footer-corner {
+    background-color: #e6e6e6;
+}
+.gc-selection {
+    background-color: rgba(20, 20, 20, 0.2);
+    border-color: #217346;
+    color: rgba(240,240,240,0.7);
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #d4d4d4;
+}
+.gc-group {
+    background-color: #e6e6e6;
+    color: #999999;
+}
+.gc-group-box {
+    background-color: #e4e4e4;
+    color: #646464;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #777777;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #439467;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #e6e6e6, #e6e6e6); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #e6e6e6, #e6e6e6); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #e6e6e6, #e6e6e6); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #e6e6e6, #e6e6e6); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #e6e6e6, #e6e6e6); /* Standard syntax; must be last */
+    background-color: #e6e6e6;
+    border-color: #999999;
+}
+.gc-tabStripResizeBarInner {
+    color: #b3b3b3;
+}
+.gc-navMoreButton-highlight {
+    border-color: #0a6332;
+}
+.gc-navMoreButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-highlight {
+    border-color: #0a6332;
+}
+.gc-navButton-normal {
+    border-color: #c6c6c6;
+}
+.gc-tab-normal {
+    color: #444444;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #252627;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#ffffff;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #c6c6c6;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;  
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 0px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    border-radius:3px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left:13px;
+    margin-bottom:5px;
+    float:left;
+}
+#gc-filterCancel {
+    margin-bottom:5px;
+    float:left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #c5c5c5;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: white;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: white;    
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;    
+    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: white;    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #dbdbdb;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: white;
+    border-style:solid;
+    border-color: #ababab;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+    
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#ababab;
+    background:  white;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#ababab;
+    background: #f0f0f0;
+}
+
+.gc-scroll-arrow:active,
+.gc-scroll-bar:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#777777;
+    background: #f0f0f0;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+/*-----scrollbar end-----*/
+

css/spreadjs/sheets/gc.spread.sheets.excel2016darkGray.10.0.1.css

@@ -0,0 +1,850 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2016;
+}
+.gc-grayArea {
+    background-color: #6a6a6a;
+}
+.gc-corner-hover {
+    background-color: #6a6a6a;
+}
+.gc-corner-selected {
+    background-color: #6a6a6a;
+}
+.gc-corner-normal {
+    background-color: #6a6a6a;
+}
+.gc-corner-triangle-normal {
+    background-color: #f0f0f0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #f0f0f0); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #f0f0f0); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #f0f0f0); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #f0f0f0); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #f0f0f0); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #999999 !important;
+    border-right-color: #d3d3d3 !important;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #ffffff;
+    background-image: -webkit-linear-gradient(top, #ffffff, #ffffff); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ffffff, #ffffff); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ffffff, #ffffff); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ffffff, #ffffff); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ffffff, #ffffff); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #999999 !important;
+    border-right-color: #d3d3d3 !important;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #217346;
+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #999999 !important;
+    border-right-color: #d3d3d3 !important;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+}
+.gc-columnHeader-normal {
+    color: #ffffff;
+    background-image: none;
+    background-color: #6a6a6a;
+    border-style:solid;
+    border-left-color: #9c9c9c !important;
+    border-right-color: #d2d2d2 !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-hover {
+    color: #ffffff;
+    background-image: none;
+    background-color: #0a6332;
+    border-style:solid;
+    border-left-color: #9c9c9c !important;
+    border-right-color: #d2d2d2 !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-selected {
+    color: #ffffff;
+    background-image: none;
+    background-color: #217346;
+    border-style:solid;
+    border-left-color: #9c9c9c !important;
+    border-right-color: #d2d2d2 !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-highlight {
+    color: #ffffff;
+    background-image: none;
+    background-color: #262626;
+    border-style:solid;
+    border-left-color: #9c9c9c !important;
+    border-right-color: #d2d2d2 !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-rowHeader-normal {
+    color: #ffffff;
+    background-color: #6a6a6a;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-hover {
+    color: #ffffff;
+    background-color: #0a6332;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-selected {
+    color: #ffffff;
+    background-color: #217346;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-highlight {
+    color: #ffffff;
+    background-color: #262626;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+    border-right-color: #999999 !important;
+}
+.gc-horizontal-scrollbar {
+    background-color: #6a6a6a;
+    border-top-color: #999999;
+}
+.gc-vertical-scrollbar {
+    background-color: #6a6a6a;
+    border-left-color: #999999;
+}
+.gc-footer-corner {
+    background-color: #6a6a6a;
+}
+.gc-selection {
+    background-color: rgba(20, 20, 20, 0.2);
+    border-color: #217346;
+    color: rgba(240,240,240,0.7);
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #d4d4d4;
+}
+.gc-group {
+    background-color: #6a6a6a;
+    color: #999999;
+}
+.gc-group-box {
+    background-color: #e4e4e4;
+    color: #646464;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #f0f0f0;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #86bfa0;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #6a6a6a, #6a6a6a); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #6a6a6a, #6a6a6a); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #6a6a6a, #6a6a6a); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #6a6a6a, #6a6a6a); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #6a6a6a, #6a6a6a); /* Standard syntax; must be last */
+    background-color: #6a6a6a;
+    border-color: #999999;
+}
+.gc-tabStripResizeBarInner {
+    color: #f0f0f0;
+}
+.gc-navMoreButton-highlight {
+    border-color: #f0f0f0;
+}
+.gc-navMoreButton-hover {
+    border-color: #86bfa0;
+}
+.gc-navButton-hover {
+    border-color: #86bfa0;
+}
+.gc-navButton-highlight {
+    border-color: #f0f0f0;
+}
+.gc-navButton-normal {
+    border-color: #a3a3a3;
+}
+.gc-tab-normal {
+    color: #ffffff;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #ffffff;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#f0f0f0;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #acacac;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;  
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 0px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left:13px;
+    margin-bottom:5px;
+    float:left;
+}
+#gc-filterCancel {
+    margin-bottom:5px;
+    float:left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;
+    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #969696;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: #f0f0f0;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: #f0f0f0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;
+    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: #f0f0f0;
+    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #575757;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: #999999;
+    border-style:solid;
+    border-color: #3b3b3b;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+    
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#3b3b3b;
+    background: #999999;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#101010;
+    background: #b3b3b3;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#101010;
+    background: #b3b3b3;
+}
+
+.gc-scroll-arrow:active,
+.gc-scroll-bar:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#101010;
+    background: #c4c4c4;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+/*-----scrollbar end-----*/
+

css/spreadjs/sheets/gc.spread.sheets.excelsmartcost.css

@@ -0,0 +1,851 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2013;
+}
+.gc-grayArea {
+    background-color: white;
+}
+.gc-corner-hover {
+    background-color: white;
+}
+.gc-corner-selected {
+    background-color: white;
+}
+.gc-corner-normal {
+    background-color: white;
+}
+.gc-corner-triangle-normal {
+    background-color: #dfdfdf;
+    background-image: -webkit-linear-gradient(top, #dfdfdf, #dfdfdf); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #dfdfdf, #dfdfdf); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #dfdfdf, #dfdfdf); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #dfdfdf, #dfdfdf); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #dfdfdf, #dfdfdf); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #9e9e9e;
+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #73a2e3;
+    background-image: -webkit-linear-gradient(top, #73a2e3, #73a2e3); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #73a2e3, #73a2e3); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #73a2e3, #73a2e3); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #73a2e3, #73a2e3); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #73a2e3, #73a2e3); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+}
+.gc-columnHeader-normal {
+    color: #444444;
+    background-image: none;
+    background-color: white;
+    border-style:solid;
+    border-left-color: #dee2e6 !important;
+    border-right-color: #dee2e6 !important;
+    border-bottom-color: #dee2e6 !important;
+}
+.gc-columnHeader-hover {
+    color: #444444;
+    background-image: none;
+    background-color: #f5f5f5;
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #73a2e3 !important;
+}
+.gc-columnHeader-selected {
+    color: #73a2e3;
+    background-image: none;
+    background-color: #f5f5f5;
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-highlight {
+    color: #73a2e3;
+    background-image: none;
+    background-color: #f5f5f5;
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-rowHeader-normal {
+    color: #444444;
+    background-color: white;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #dee2e6 !important;
+}
+.gc-rowHeader-hover {
+    color: #73a2e3;
+    background-color: #f5f5f5;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #73a2e3 !important;
+}
+.gc-rowHeader-selected {
+    color: #73a2e3;
+    background-color: #f5f5f5;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #dee2e6 !important;
+    border-bottom-color: #dee2e6 !important;
+    border-right-color: #dee2e6 !important;
+}
+.gc-rowHeader-highlight {
+    color: #73a2e3;
+    background-color: #f5f5f5;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #ababab !important;
+}
+.gc-horizontal-scrollbar {
+    background-color: #efefef;
+    border-top-color: #efefef;
+}
+.gc-vertical-scrollbar {
+    background-color: #efefef;
+    border-left-color: #efefef;
+}
+.gc-footer-corner {
+    background-color: #fff;
+}
+.gc-selection {
+    background-color: rgba(204, 204, 204, 0.3);
+    border-color:#73a2e3
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #dee2e6;
+}
+.gc-group {
+    background-color: white;
+    color: #ababab;
+}
+.gc-group-box {
+    background-color: white;
+    color: #666666;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #777777;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #439467;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #ffffff, #ffffff); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ffffff, #ffffff); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ffffff, #ffffff); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ffffff, #ffffff); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ffffff, #ffffff); /* Standard syntax; must be last */
+    background-color: #ffffff;
+    border-color: #ababab;
+}
+.gc-tabStripResizeBarInner {
+    color: #b3b3b3;
+}
+.gc-navMoreButton-highlight {
+    border-color: #0a6332;
+}
+.gc-navMoreButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-highlight {
+    border-color: #0a6332;
+}
+.gc-navButton-normal {
+    border-color: #c6c6c6;
+}
+.gc-tab-normal {
+    color: #444444;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #252627;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#fcfdfd;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #a7abb0;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 0px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left:13px;
+    margin-bottom:5px;
+    float:left;
+}
+#gc-filterCancel {
+    margin-bottom:5px;
+    float:left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;
+    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: white;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: white;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;
+    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: white;
+    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #efefef;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: #efefef;
+    border-style:solid;
+    border-color: #efefef;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#bfbfbf;
+    background:  #bfbfbf;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#a7a7a7;
+    background: #a7a7a7;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#a7a7a7;
+    background: #a7a7a7;
+}
+
+.gc-scroll-arrow:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#a7a7a7;
+    background: #a7a7a7;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.gc-scroll-bar:active{
+  border-color:#777777;
+  background: #777777;
+}
+/*-----scrollbar end-----*/

my-Library-detail2.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="css/font-awesome/font-awesome.min.css">
+	<link rel="stylesheet" href="css/spreadjs/sheets/gc.spread.sheets.excelsmartcost.css">
 </head>
 
 <body>
@@ -68,89 +69,7 @@
 					<div class="c-body">
             <div class="row">
               <div class="col-5">
-                <div class="sjs-height-1">
-                  <table class="table table-bordered table-sm table-hover">
-                    <tr>
-                      <th></th>
-                      <th>项目节编号</th>
-                      <th>名称</th>
-                      <th>单位</th>
-                      <th>数量</th>
-                      <th>合价</th>
-                    </tr>
-                    <tr>
-                      <td>1</td>
-                      <td>1</td>
-                      <td>第一部分 建筑安装工程费</td>
-                      <td>公路公里</td>
-                      <td></td>
-                      <td>1045756</td>
-                    </tr>
-                    <tr>
-                      <td>2</td>
-                      <td>1-1</td>
-                      <td>临时工程</td>
-                      <td>公路公里</td>
-                      <td></td>
-                      <td>50000</td>
-                    </tr>
-                    <tr class="table-primary">
-                      <td>3</td>
-                      <td>1-1-1</td>
-                      <td>临时道路</td>
-                      <td>km</td>
-                      <td></td>
-                      <td></td>
-                    </tr>
-                    <tr>
-                      <td>4</td>
-                      <td>1-1-2</td>
-                      <td>临时便桥</td>
-                      <td>m/座</td>
-                      <td></td>
-                      <td></td>
-                    </tr>
-                    <tr>
-                      <td>5</td>
-                      <td>1-1-3</td>
-                      <td>临时轨道铺设</td>
-                      <td>km</td>
-                      <td></td>
-                      <td></td>
-                    </tr>
-                    <tr>
-                      <td>6</td>
-                      <td>1-1-4</td>
-                      <td>临时电力线路</td>
-                      <td>km</td>
-                      <td></td>
-                      <td></td>
-                    </tr>
-                    <tr>
-                      <td>7</td>
-                      <td>1-1-5</td>
-                      <td>临时电力线路</td>
-                      <td>km</td>
-                      <td></td>
-                      <td></td>
-                    </tr>
-                    <tr>
-                      <td>8</td>
-                      <td>1-1-6</td>
-                      <td>临时码头</td>
-                      <td>km</td>
-                      <td></td>
-                      <td></td>
-                    </tr>
-                    <tr>
-                      <td>9</td>
-                      <td>1-1-7</td>
-                      <td>临时道路修建、养护与拆除（包括原道路的养护费）</td>
-                      <td>km</td>
-                      <td></td>
-                      <td></td>
-                    </tr>
-                  </table>
+                <div class="sjs-height-1" id="bills-spread" style="overflow:hidden">
                 </div>
               </div>
               <div class="col-7">
@@ -158,9 +77,10 @@
                   <table class="table table-bordered table-sm table-hover">
                     <tr>
                       <th>指标编号</th>
-                      <th>项目或费用名称</th>
-                      <th colspan="2">指标单位</th>
-                      <th>合价（元）</th>
+                      <th>项目或费用name</th>
+                      <th colspan="2">指标unit</th>
+                      <th>total_price
+                          （元）</th>
                       <th>计算规则</th>
                       <th>指标计算</th>
                       <th>经济指标</th>
@@ -181,7 +101,8 @@
                       <td>元</td>
                       <td>公路公里</td>
                       <td></td>
-                      <td>合价/路线总长度</td>
+                      <td>total_price
+                          /路线总长度</td>
                       <td>10000/500</td>
                       <td>20</td>
                     </tr>
@@ -191,7 +112,8 @@
                       <td>元</td>
                       <td>km</td>
                       <td></td>
-                      <td>km指临时道路长度，合价/临时道路长</td>
+                      <td>km指临时道路长度，total_price
+                          /临时道路长</td>
                       <td></td>
                       <td></td>
                     </tr>
@@ -201,7 +123,8 @@
                       <td>元</td>
                       <td>m2</td>
                       <td></td>
-                      <td>合价/（临时道路长度×路基均宽）</td>
+                      <td>total_price
+                          /（临时道路长度×路基均宽）</td>
                       <td></td>
                       <td></td>
                     </tr>
@@ -211,7 +134,8 @@
                       <td></td>
                       <td>%</td>
                       <td></td>
-                      <td>合价/临时工程费用</td>
+                      <td>total_price
+                          /临时工程费用</td>
                       <td></td>
                       <td></td>
                     </tr>
@@ -243,7 +167,7 @@
                     <table class="table table-bordered table-sm table-hover">
                       <tr><th colspan="4" class="text-center">1-1 项目节 参数</th></tr>
                       <tr>
-                        <th>参数名称</th><th>绑定分项节点</th><th>参数数值</th>
+                        <th>参数name</th><th>绑定分项节点</th><th>参数数值</th>
                       </tr>
                       <tr>
                         <td>总造价</th><td></td><td><input class="form-control form-control-sm"></td>
@@ -322,6 +246,204 @@
     <script type="text/javascript">
     autoFlashHeight();
     </script>
+    <script src="js/spreadjs/sheets/gc.spread.sheets.all.10.0.1.min.js"></script>
+<script>
+  $(document).ready(function () {
+      const data = [
+          {
+              code: '1',
+              name:'第一部分 建筑安装工程费',
+              unit:'公路公里',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1',
+              name:'临时工程',
+              unit:'公路公里',
+              quantity: 0,
+              total_price: 50000,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }, {
+              code: '1-1-1',
+              name:'临时道路',
+              unit:'km',
+              quantity: 0,
+              total_price: 1045756,
+          }
+      ];
+      const spread = new GC.Spread.Sheets.Workbook($('#bills-spread')[0], {
+          sheetCount: 1
+      });
+      spread.getActiveSheet().setDataSource(data);
+  })
+</script>
 </body>
 
 </html>

template.html

@@ -48,7 +48,7 @@
       <div class="panel-sidebar">
         <div class="panel-title">
           <div class="title-bar">
-            <h2 class="">项目节 <a href="#upload" data-toggle="modal" data-target="#upload" class="pull-right mr-3" title="导入项目节"><i class="fa fa-upload"></i></a></h2>
+            <h2 class="">指标节点 <a href="#upload" data-toggle="modal" data-target="#upload" class="pull-right mr-3" title="导入项目节"><i class="fa fa-upload"></i></a></h2>
 
           </div>
         </div>