| /* |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); |
| @font-face { |
| font-family: 'codropsicons'; |
| src:url('../fonts/codropsicons/codropsicons.eot'); |
| src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), |
| url('../fonts/codropsicons/codropsicons.woff') format('woff'), |
| url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), |
| url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); |
| font-weight: normal; |
| font-style: normal; |
| } |
| |
| .container > header, |
| .codrops-top { |
| color: #fff; |
| font-family: 'Lato', Arial, sans-serif; |
| } |
| |
| .container > header { |
| margin: 0 auto; |
| padding: 12em 2em; |
| padding-left: 370px; |
| background: rgba(0,0,0,0.05); |
| } |
| |
| .container > header a { |
| color: #566473; |
| text-decoration: none; |
| outline: none; |
| } |
| |
| .container > header a:hover { |
| color: #4f7bab; |
| } |
| |
| .container > header h1 { |
| font-size: 3.2em; |
| line-height: 1.3; |
| margin: 0; |
| font-weight: 300; |
| } |
| |
| .container > header span { |
| display: block; |
| font-size: 55%; |
| color: #74818e; |
| padding: 0 0 0.6em 0.1em; |
| } |
| |
| /* To Navigation Style */ |
| .codrops-top { |
| background: #fff; |
| background: rgba(255, 255, 255, 0.6); |
| text-transform: uppercase; |
| width: 100%; |
| font-size: 0.69em; |
| line-height: 2.2; |
| } |
| |
| .codrops-top a { |
| text-decoration: none; |
| padding: 0 1em; |
| letter-spacing: 0.1em; |
| color: #888; |
| display: inline-block; |
| } |
| |
| .codrops-top a:hover { |
| background: rgba(255,255,255,0.95); |
| color: #333; |
| } |
| |
| .codrops-top span.right { |
| float: right; |
| } |
| |
| .codrops-top span.right a { |
| float: left; |
| display: block; |
| } |
| |
| .codrops-icon:before { |
| font-family: 'codropsicons'; |
| margin: 0 4px; |
| speak: none; |
| font-style: normal; |
| font-weight: normal; |
| font-variant: normal; |
| text-transform: none; |
| line-height: 1; |
| -webkit-font-smoothing: antialiased; |
| } |
| |
| .codrops-icon-drop:before { |
| content: "\e001"; |
| } |
| |
| .codrops-icon-prev:before { |
| content: "\e004"; |
| } |
| |
| /* Demo Buttons Style */ |
| .codrops-demos { |
| padding-top: 1em; |
| font-size: 0.9em; |
| } |
| |
| .codrops-demos a { |
| text-decoration: none; |
| outline: none; |
| display: inline-block; |
| margin: 0.5em; |
| padding: 0.7em 1.1em; |
| border: 3px solid #b1aea6; |
| color: #b1aea6; |
| font-weight: 700; |
| } |
| |
| .codrops-demos a:hover, |
| .codrops-demos a.current-demo, |
| .codrops-demos a.current-demo:hover { |
| border-color: #89867e; |
| color: #89867e; |
| } |
| |
| @media screen and (max-width: 1025px) { |
| .container > header { |
| margin: 0 auto; |
| padding: 120px 50px; |
| font-size: 70%; |
| text-align: right; |
| } |
| } |
| |
| @media screen and (max-width: 740px) { |
| .codrops-icon span { |
| display: none; |
| } |
| |
| } |
| |
| html { |
| min-height: 100%; |
| position: relative; |
| } |
| |
| body { |
| height: 100%; |
| } |
| |
| *, |
| *:after, |
| *::before { |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| } |
| |
| @font-face { |
| font-weight: normal; |
| font-style: normal; |
| font-family: 'ecoicons'; |
| src: url("../fonts/ecoicons/ecoicons.eot"); |
| src: url("../fonts/ecoicons/ecoicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ecoicons/ecoicons.woff") format("woff"), url("../fonts/ecoicons/ecoicons.ttf") format("truetype"), url("../fonts/ecoicons/ecoicons.svg#ecoicons") format("svg"); |
| } |
| |
| /* Icomoon.com */ |
| |
| .gn-menu-main, |
| .gn-menu-main ul { |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| text-transform: none; |
| font-weight: 300; |
| font-family: 'Lato', Arial, sans-serif; |
| line-height: 60px; |
| } |
| |
| .gn-menu-main { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 60px; |
| font-size: 13px; |
| z-index: 100; |
| color: #ffffff; |
| background: #496274; |
| opacity: 0.9; |
| } |
| |
| .gn-menu-main a { |
| display: block; |
| height: 100%; |
| color: white; |
| text-decoration: none; |
| cursor: pointer; |
| } |
| |
| .no-touch .gn-menu-main a:hover, |
| .no-touch .gn-menu li.gn-search-item:hover, |
| .no-touch .gn-menu li.gn-search-item:hover a { |
| background: white; |
| color: #496274; |
| } |
| |
| .gn-menu-main > li { |
| display: block; |
| float: left; |
| height: 100%; |
| border-right: 1px solid #c6d0da; |
| text-align: center; |
| } |
| |
| /* icon-only trigger (menu item) */ |
| |
| .gn-menu-main li.gn-trigger { |
| position: relative; |
| width: 60px; |
| -webkit-touch-callout: none; |
| -webkit-user-select: none; |
| -khtml-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
| |
| .gn-menu-main > li:nth-last-child(2) { |
| padding-right: 10px; |
| position: absolute; |
| right: 82px; |
| overflow: hidden; |
| float: left; |
| border-left: none; |
| border-right: 1px solid #c6d0da; |
| white-space: nowrap; |
| } |
| |
| .gn-menu-main > li:last-child { |
| width: 82px; |
| float: right; |
| border-right: none; |
| border-left: none; |
| white-space: nowrap; |
| } |
| |
| .gn-menu-main > li > a { |
| padding: 0 30px; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| font-weight: bold; |
| } |
| |
| .gn-menu-main:after { |
| display: table; |
| clear: both; |
| content: ""; |
| } |
| |
| .gn-menu-wrapper { |
| position: fixed; |
| top: 60px; |
| bottom: 0; |
| left: 0; |
| overflow: hidden; |
| width: 60px; |
| border-top: 1px solid #c6d0da; |
| background: #496274; |
| -webkit-transform: translateX(-60px); |
| -moz-transform: translateX(-60px); |
| transform: translateX(-60px); |
| -webkit-transition: -webkit-transform 0.3s, width 0.3s; |
| -moz-transition: -moz-transform 0.3s, width 0.3s; |
| transition: transform 0.3s, width 0.3s; |
| } |
| |
| .gn-scroller { |
| position: absolute; |
| overflow-y: scroll; |
| width: 370px; |
| height: 100%; |
| } |
| |
| .gn-menu { |
| border-bottom: 1px solid #c6d0da; |
| text-align: left; |
| font-size: 18px; |
| } |
| |
| .gn-menu li:not(:first-child), |
| .gn-menu li li { |
| box-shadow: inset 0 1px #c6d0da; |
| } |
| |
| .gn-submenu li { |
| overflow: hidden; |
| height: 0; |
| -webkit-transition: height 0.3s; |
| -moz-transition: height 0.3s; |
| transition: height 0.3s; |
| } |
| |
| .gn-submenu li a { |
| color: white; |
| } |
| |
| input.gn-search { |
| position: relative; |
| z-index: 10; |
| padding-left: 60px; |
| outline: none; |
| border: none; |
| background: transparent; |
| color: #ffffff; |
| font-weight: 300; |
| font-family: 'Lato', Arial, sans-serif; |
| cursor: pointer; |
| } |
| |
| /* placeholder */ |
| |
| .gn-search::-webkit-input-placeholder { |
| color: #ffffff; |
| } |
| |
| .gn-search:-moz-placeholder { |
| color: #ffffff; |
| } |
| |
| .gn-search::-moz-placeholder { |
| color: #ffffff; |
| } |
| |
| .gn-search:-ms-input-placeholder { |
| color: #ffffff; |
| } |
| |
| /* hide placeholder when active in Chrome */ |
| |
| .gn-search:focus::-webkit-input-placeholder, |
| .no-touch .gn-menu li.gn-search-item:hover .gn-search:focus::-webkit-input-placeholder { |
| color: transparent; |
| } |
| |
| input.gn-search:focus { |
| cursor: text; |
| } |
| |
| .no-touch .gn-menu li.gn-search-item:hover input.gn-search { |
| color: #496274; |
| } |
| |
| /* placeholder */ |
| |
| .no-touch .gn-menu li.gn-search-item:hover .gn-search::-webkit-input-placeholder { |
| color: #496274; |
| } |
| |
| .no-touch .gn-menu li.gn-search-item:hover .gn-search:-moz-placeholder { |
| color: #496274; |
| } |
| |
| .no-touch .gn-menu li.gn-search-item:hover .gn-search::-moz-placeholder { |
| color: #496274; |
| } |
| |
| .no-touch .gn-menu li.gn-search-item:hover .gn-search:-ms-input-placeholder { |
| color: #496274; |
| } |
| |
| .gn-menu-main a.gn-icon-search { |
| position: absolute; |
| top: 0; |
| left: 0; |
| height: 60px; |
| } |
| |
| .gn-icon::before { |
| display: inline-block; |
| width: 60px; |
| text-align: center; |
| text-transform: none; |
| font-weight: normal; |
| font-style: normal; |
| font-variant: normal; |
| font-family: 'ecoicons'; |
| line-height: 1; |
| speak: none; |
| -webkit-font-smoothing: antialiased; |
| } |
| |
| .gn-icon-help::before { |
| content: "\e000" |
| } |
| |
| .gn-icon-earth::before { |
| content: "\e004" |
| } |
| |
| .gn-icon-cog::before { |
| content: "\e006" |
| } |
| |
| .gn-icon-search::before { |
| content: "\e005" |
| } |
| |
| .gn-icon-download::before { |
| content: "\e007" |
| } |
| |
| .gn-icon-photoshop::before { |
| content: "\e001" |
| } |
| |
| .gn-icon-illustrator::before { |
| content: "\e002" |
| } |
| |
| .gn-icon-archive::before { |
| content: "\e00d" |
| } |
| |
| .gn-icon-article::before { |
| content: "\e003" |
| } |
| |
| .gn-icon-pictures::before { |
| content: "\e008" |
| } |
| |
| .gn-icon-videos::before { |
| content: "\e009" |
| } |
| |
| .gn-icon-poweroff::before { |
| font-family: 'Glyphicons Halflings'; |
| font-size: 18px; |
| content: "\e017"; |
| } |
| |
| .gn-username { |
| font-family: 'Helvetica Neue', Arial, sans-serif; |
| } |
| |
| /* if an icon anchor has a span, hide the span */ |
| |
| .gn-icon span { |
| width: 0; |
| height: 0; |
| display: block; |
| overflow: hidden; |
| } |
| |
| .gn-icon-menu::before { |
| margin-left: -15px; |
| vertical-align: -2px; |
| width: 30px; |
| height: 3px; |
| background: #ffffff; |
| box-shadow: 0 3px #496274, 0 -6px white, 0 -9px #496274, 0 -12px white; |
| content: ''; |
| } |
| |
| .no-touch .gn-icon-menu:hover::before, |
| .no-touch .gn-icon-menu.gn-selected:hover::before { |
| background: #496274; |
| box-shadow: 0 3px white, 0 -6px #496274, 0 -9px white, 0 -12px #496274; |
| } |
| |
| .gn-icon-menu.gn-selected::before { |
| background: #ffffff; |
| box-shadow: 0 3px #496274, 0 -6px white, 0 -9px #496274, 0 -12px white; |
| } |
| |
| /* styles for opening menu */ |
| |
| .gn-menu-wrapper.gn-open-all, |
| .gn-menu-wrapper.gn-open-part { |
| -webkit-transform: translateX(0px); |
| -moz-transform: translateX(0px); |
| transform: translateX(0px); |
| } |
| |
| .gn-menu-wrapper.gn-open-all { |
| width: 340px |
| } |
| |
| .gn-menu-wrapper.gn-open-all .gn-submenu li { |
| height: 60px |
| } |
| |
| @media screen and (max-width: 422px) { |
| .gn-menu-wrapper.gn-open-all { |
| -webkit-transform: translateX(0px); |
| -moz-transform: translateX(0px); |
| transform: translateX(0px); |
| width: 100%; |
| } |
| |
| .gn-menu-wrapper.gn-open-all .gn-scroller { |
| width: 130% |
| } |
| } |
| |
| /* Style for toggle buttons */ |
| .toggle-btn-grp { |
| margin:3px 0; |
| padding: 0 20px 0 0; |
| } |
| .toggle-btn { |
| text-align:centre; |
| margin:5px 2px; |
| padding:0.4em 3em; |
| color:#FFF; |
| background-color:#496274; |
| display:inline-block; |
| cursor:pointer; |
| } |
| |
| .toggle-btn:hover { |
| background:#8AAAC2; |
| } |
| |
| .visuallyhidden { |
| border: 0; |
| clip: rect(0 0 0 0); |
| height: 1px; |
| margin: -1px; |
| overflow: hidden; |
| padding: 0; |
| position: absolute; |
| width: 1px; |
| } |
| |
| .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { |
| clip: auto; |
| height: auto; |
| margin: 0; |
| overflow: visible; |
| position: static; |
| width: auto; |
| } |
| |
| .toggle-btn-grp * { |
| width:20px; |
| height:20px; |
| line-height:20px; |
| } |
| .toggle-btn-grp div { |
| display:inline-block; |
| position:relative; |
| margin:5px 2px; |
| } |
| |
| .toggle-btn-grp div label { |
| position:absolute; |
| z-index:0; |
| padding:0; |
| text-align:center; |
| } |
| |
| .toggle-btn-grp div input { |
| position:absolute; |
| z-index:1; |
| cursor:pointer; |
| opacity:0; |
| } |
| |
| .toggle-btn-grp div:hover label { |
| background:#8AAAC2; |
| } |
| |
| .toggle-btn-grp div input:checked + label { |
| background: white; |
| color: #496274; |
| } |
| |
| .glass { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| z-index: 99; |
| background: transparent; |
| } |
| |
| .frame { |
| display: none; |
| position: absolute; |
| top: 60px; |
| left: 0px; |
| right: 0px; |
| bottom: 0px; |
| } |
| |
| .frame iframe { |
| width: 100%; |
| height: 100%; |
| } |
| |