/* Default tab style */ @font-face { font-weight: normal; font-style: normal; font-family: 'stroke7pixeden'; src:url('fonts/stroke7pixeden/stroke7pixeden.eot?u58ytb'); src:url('fonts/stroke7pixeden/stroke7pixeden.eot?#iefixu58ytb') format('embedded-opentype'), url('fonts/stroke7pixeden/stroke7pixeden.woff?u58ytb') format('woff'), url('fonts/stroke7pixeden/stroke7pixeden.ttf?u58ytb') format('truetype'), url('fonts/stroke7pixeden/stroke7pixeden.svg?u58ytb#stroke7pixeden') format('svg'); } .tabs { position: relative; overflow: hidden; margin: 0 auto; width: 100%; font-weight: 300; font-size: 1.25em; } /* Nav */ .tabs nav { text-align: center; } .tabs nav ul { position: relative; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; margin: 0 auto; padding: 0; max-width: 1200px; list-style: none; -ms-box-orient: horizontal; -ms-box-pack: center; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .tabs nav ul li { position: relative; z-index: 1; display: block; margin: 0; outline:0; text-align: center; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .tabs nav a { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 2.5; text-decoration:none; outline:0; } .tabs nav a span { vertical-align: middle; font-size: 0.75em; } .tabs nav li.tab-current a { color: #74777b; } .tabs nav a:focus { outline: 0; box-shadow:none; } /* Icons */ .icon::before { z-index: 10; display: inline-block; margin: 0 0.4em 0 0; vertical-align: middle; text-transform: none; font-weight: normal; font-variant: normal; font-size: 1.3em; font-family: 'stroke7pixeden'; line-height: 1; speak: none; -webkit-backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-upload::before { content: "\e68a"; } .icon-tools::before { content: "\e60a"; } .icon-plug::before { content: "\e69a"; } .icon-display::before { content: "\e65e"; } .icon-date::before { content: "\e660"; } .icon-config::before { content: "\e666"; } .icon-box::before { content: "\e674"; } /* Content */ .content-wrap { position: relative; } .content-wrap section { display: none; margin: 0 auto; padding: 1em; max-width: 1200px; text-align: left; color:#01769A; background:#fefefe; border-top:1px solid #00a0d2; font-weight:bold; } .content-wrap section.content-current { display: block; } .content-wrap section p { margin: 0; padding: 0.75em 0; color: rgba(40,44,42,0.05); font-weight: 900; font-size: 4em; line-height: 1; } /* Fallback */ .no-js .content-wrap section { display: block; padding-bottom: 2em; border-bottom: 1px solid rgba(255,255,255,0.6); } .no-flexbox nav ul { display: block; } .no-flexbox nav ul li { min-width: 15%; display: inline-block; } @media screen and (max-width: 58em) { .tabs nav a.icon span { display: none; } .tabs nav a:before { margin-right: 0; } } .container > section { padding: 0; font-size: 1.25em; min-height: 100%; border:1px solid #00A0D2; } .container > section > footer p { display: inline-block; padding:0 10px; } .container > section > footer { background: #fff; border-top: 1px solid #00A0D2; } .container > section > footer p:last-child { display: inline-block; float: right; padding: 8px; margin: 0; } @media screen and (max-width: 30em) { .container > section { padding: 3em 0; } } .plugin-pro { display: block; padding: 5px 10px; background: #ffef63; border: 1px solid #00023a; margin-bottom: 1%; } .hire-btn { display: inline-block; padding: 4px 10px; text-align: center; text-decoration: none; background: #449a48; margin: 0 10px; color: #fff; border-radius: 4px; border: 1px solid #256328; -webkit-box-shadow: 0 1px 0 #256328; box-shadow: 0 1px 0 #256328; } a.hire-btn:focus,a.hire-btn:hover { background: #4c9e50; margin: 0 10px; color: #eee; border-radius: 4px; border: 1px solid #388e3c; }