/**
* WWW Stylesheet
* http://diy.org/
*
* /css/www/stylesheet.css
*/
/**
* Base
*/
/**
* Typography - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
/**
* Background Colors - - - - - - - - - - - - - - - - - - - - - - - - -
*/
/**
* Breakpoints - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
/**
* Whitespace - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
/**
* Libraries
*/
/*
* Bootstrap v2.0.2
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
a:hover,
a:active {
outline: 0;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}
button,
input,
select,
textarea {
margin: 0;
font-size: 100%;
vertical-align: middle;
}
button,
input {
*overflow: visible;
line-height: normal;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
input[type="search"] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
textarea {
overflow: auto;
vertical-align: top;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.hide-text {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.input-block-level {
display: block;
width: 100%;
min-height: 28px;
/* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 22px;
color: #333333;
background-color: #ffffff;
}
a {
color: #3290d8;
text-decoration: none;
}
a:hover {
color: #1e679f;
text-decoration: underline;
}
.row {
margin-left: -20px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
margin-left: 20px;
}
.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
.span12 {
width: 940px;
}
.span11 {
width: 860px;
}
.span10 {
width: 780px;
}
.span9 {
width: 700px;
}
.span8 {
width: 620px;
}
.span7 {
width: 540px;
}
.span6 {
width: 460px;
}
.span5 {
width: 380px;
}
.span4 {
width: 300px;
}
.span3 {
width: 220px;
}
.span2 {
width: 140px;
}
.span1 {
width: 60px;
}
.offset12 {
margin-left: 980px;
}
.offset11 {
margin-left: 900px;
}
.offset10 {
margin-left: 820px;
}
.offset9 {
margin-left: 740px;
}
.offset8 {
margin-left: 660px;
}
.offset7 {
margin-left: 580px;
}
.offset6 {
margin-left: 500px;
}
.offset5 {
margin-left: 420px;
}
.offset4 {
margin-left: 340px;
}
.offset3 {
margin-left: 260px;
}
.offset2 {
margin-left: 180px;
}
.offset1 {
margin-left: 100px;
}
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid > [class*="span"] {
float: left;
margin-left: 2.127659574%;
}
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid > .span12 {
width: 99.99999998999999%;
}
.row-fluid > .span11 {
width: 91.489361693%;
}
.row-fluid > .span10 {
width: 82.97872339599999%;
}
.row-fluid > .span9 {
width: 74.468085099%;
}
.row-fluid > .span8 {
width: 65.95744680199999%;
}
.row-fluid > .span7 {
width: 57.446808505%;
}
.row-fluid > .span6 {
width: 48.93617020799999%;
}
.row-fluid > .span5 {
width: 40.425531911%;
}
.row-fluid > .span4 {
width: 31.914893614%;
}
.row-fluid > .span3 {
width: 23.404255317%;
}
.row-fluid > .span2 {
width: 14.89361702%;
}
.row-fluid > .span1 {
width: 6.382978723%;
}
.container {
margin-left: auto;
margin-right: auto;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
content: "";
}
.container:after {
clear: both;
}
.container-fluid {
padding-left: 20px;
padding-right: 20px;
*zoom: 1;
}
.container-fluid:before,
.container-fluid:after {
display: table;
content: "";
}
.container-fluid:after {
clear: both;
}
p {
margin: 0 0 11px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 22px;
}
p small {
font-size: 12px;
color: #999999;
}
.lead {
margin-bottom: 22px;
font-size: 20px;
font-weight: 200;
line-height: 33px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-family: inherit;
font-weight: bold;
color: inherit;
text-rendering: optimizelegibility;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-weight: normal;
color: #999999;
}
h1 {
font-size: 30px;
line-height: 44px;
}
h1 small {
font-size: 18px;
}
h2 {
font-size: 24px;
line-height: 44px;
}
h2 small {
font-size: 18px;
}
h3 {
line-height: 33px;
font-size: 18px;
}
h3 small {
font-size: 14px;
}
h4,
h5,
h6 {
line-height: 22px;
}
h4 {
font-size: 14px;
}
h4 small {
font-size: 12px;
}
h5 {
font-size: 12px;
}
h6 {
font-size: 11px;
color: #999999;
text-transform: uppercase;
}
.page-header {
padding-bottom: 21px;
margin: 22px 0;
border-bottom: 1px solid #eeeeee;
}
.page-header h1 {
line-height: 1;
}
ul,
ol {
padding: 0;
margin: 0 0 11px 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li {
line-height: 22px;
}
ul.unstyled,
ol.unstyled {
margin-left: 0;
list-style: none;
}
dl {
margin-bottom: 22px;
}
dt,
dd {
line-height: 22px;
}
dt {
font-weight: bold;
line-height: 21px;
}
dd {
margin-left: 11px;
}
.dl-horizontal dt {
float: left;
clear: left;
width: 120px;
text-align: right;
}
.dl-horizontal dd {
margin-left: 130px;
}
hr {
margin: 22px 0;
border: 0;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #ffffff;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
.muted {
color: #999999;
}
abbr[title] {
border-bottom: 1px dotted #ddd;
cursor: help;
}
abbr.initialism {
font-size: 90%;
text-transform: uppercase;
}
blockquote {
padding: 0 0 0 15px;
margin: 0 0 22px;
border-left: 5px solid #eeeeee;
}
blockquote p {
margin-bottom: 0;
font-size: 16px;
font-weight: 300;
line-height: 27.5px;
}
blockquote small {
display: block;
line-height: 22px;
color: #999999;
}
blockquote small:before {
content: '\2014 \00A0';
}
blockquote.pull-right {
float: right;
padding-left: 0;
padding-right: 15px;
border-left: 0;
border-right: 5px solid #eeeeee;
}
blockquote.pull-right p,
blockquote.pull-right small {
text-align: right;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
content: "";
}
address {
display: block;
margin-bottom: 22px;
line-height: 22px;
font-style: normal;
}
small {
font-size: 100%;
}
cite {
font-style: normal;
}
form {
margin: 0 0 22px;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 33px;
font-size: 21px;
line-height: 44px;
color: #333333;
border: 0;
border-bottom: 1px solid #eee;
}
legend small {
font-size: 16.5px;
color: #999999;
}
label,
input,
button,
select,
textarea {
font-size: 14px;
font-weight: bold;
line-height: 22px;
}
input,
button,
select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
label {
display: block;
margin-bottom: 5px;
color: #333333;
}
input,
textarea,
select,
.uneditable-input {
display: inline-block;
width: 210px;
height: 22px;
padding: 4px;
margin-bottom: 9px;
font-size: 14px;
line-height: 22px;
color: #555555;
border: 1px solid #cccccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.uneditable-textarea {
width: auto;
height: auto;
}
label input,
label textarea,
label select {
display: block;
}
input[type="image"],
input[type="checkbox"],
input[type="radio"] {
width: auto;
height: auto;
padding: 0;
margin: 3px 0;
*margin-top: 0;
/* IE7 */
line-height: normal;
cursor: pointer;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border: 0 \9;
/* IE9 and down */
}
input[type="image"] {
border: 0;
}
input[type="file"] {
width: auto;
padding: initial;
line-height: initial;
border: initial;
background-color: #ffffff;
background-color: initial;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
width: auto;
height: auto;
}
select,
input[type="file"] {
height: 28px;
/* In IE7, the height of the select element cannot be changed by height, only font-size */
*margin-top: 4px;
/* For IE7, add top margin to align select with labels */
line-height: 28px;
}
input[type="file"] {
line-height: 18px \9;
}
select {
width: 220px;
background-color: #ffffff;
}
select[multiple],
select[size] {
height: auto;
}
input[type="image"] {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
textarea {
height: auto;
}
input[type="hidden"] {
display: none;
}
.radio,
.checkbox {
padding-left: 18px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: left;
margin-left: -18px;
}
.controls > .radio:first-child,
.controls > .checkbox:first-child {
padding-top: 5px;
}
.radio.inline,
.checkbox.inline {
display: inline-block;
padding-top: 5px;
margin-bottom: 0;
vertical-align: middle;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
margin-left: 10px;
}
input,
textarea {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
input:focus,
textarea:focus {
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.input-mini {
width: 60px;
}
.input-small {
width: 90px;
}
.input-medium {
width: 150px;
}
.input-large {
width: 210px;
}
.input-xlarge {
width: 270px;
}
.input-xxlarge {
width: 530px;
}
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input {
float: none;
margin-left: 0;
}
input,
textarea,
.uneditable-input {
margin-left: 0;
}
input.span12, textarea.span12, .uneditable-input.span12 {
width: 930px;
}
input.span11, textarea.span11, .uneditable-input.span11 {
width: 850px;
}
input.span10, textarea.span10, .uneditable-input.span10 {
width: 770px;
}
input.span9, textarea.span9, .uneditable-input.span9 {
width: 690px;
}
input.span8, textarea.span8, .uneditable-input.span8 {
width: 610px;
}
input.span7, textarea.span7, .uneditable-input.span7 {
width: 530px;
}
input.span6, textarea.span6, .uneditable-input.span6 {
width: 450px;
}
input.span5, textarea.span5, .uneditable-input.span5 {
width: 370px;
}
input.span4, textarea.span4, .uneditable-input.span4 {
width: 290px;
}
input.span3, textarea.span3, .uneditable-input.span3 {
width: 210px;
}
input.span2, textarea.span2, .uneditable-input.span2 {
width: 130px;
}
input.span1, textarea.span1, .uneditable-input.span1 {
width: 50px;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
background-color: #eeeeee;
border-color: #ddd;
cursor: not-allowed;
}
.control-group.warning > label,
.control-group.warning .help-block,
.control-group.warning .help-inline {
color: #c09853;
}
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
color: #c09853;
border-color: #c09853;
}
.control-group.warning input:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus {
border-color: #a47e3c;
-webkit-box-shadow: 0 0 6px #dbc59e;
-moz-box-shadow: 0 0 6px #dbc59e;
box-shadow: 0 0 6px #dbc59e;
}
.control-group.warning .input-prepend .add-on,
.control-group.warning .input-append .add-on {
color: #c09853;
background-color: #fcf8e3;
border-color: #c09853;
}
.control-group.error > label,
.control-group.error .help-block,
.control-group.error .help-inline {
color: #b94a48;
}
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
color: #b94a48;
border-color: #b94a48;
}
.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus {
border-color: #953b39;
-webkit-box-shadow: 0 0 6px #d59392;
-moz-box-shadow: 0 0 6px #d59392;
box-shadow: 0 0 6px #d59392;
}
.control-group.error .input-prepend .add-on,
.control-group.error .input-append .add-on {
color: #b94a48;
background-color: #f2dede;
border-color: #b94a48;
}
.control-group.success > label,
.control-group.success .help-block,
.control-group.success .help-inline {
color: #468847;
}
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
color: #468847;
border-color: #468847;
}
.control-group.success input:focus,
.control-group.success select:focus,
.control-group.success textarea:focus {
border-color: #356635;
-webkit-box-shadow: 0 0 6px #7aba7b;
-moz-box-shadow: 0 0 6px #7aba7b;
box-shadow: 0 0 6px #7aba7b;
}
.control-group.success .input-prepend .add-on,
.control-group.success .input-append .add-on {
color: #468847;
background-color: #dff0d8;
border-color: #468847;
}
input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid {
color: #b94a48;
border-color: #ee5f5b;
}
input:focus:required:invalid:focus,
textarea:focus:required:invalid:focus,
select:focus:required:invalid:focus {
border-color: #e9322d;
-webkit-box-shadow: 0 0 6px #f8b9b7;
-moz-box-shadow: 0 0 6px #f8b9b7;
box-shadow: 0 0 6px #f8b9b7;
}
.form-actions {
padding: 21px 20px 22px;
margin-top: 22px;
margin-bottom: 22px;
background-color: #eeeeee;
border-top: 1px solid #ddd;
*zoom: 1;
}
.form-actions:before,
.form-actions:after {
display: table;
content: "";
}
.form-actions:after {
clear: both;
}
.uneditable-input {
display: block;
background-color: #ffffff;
border-color: #eee;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
cursor: not-allowed;
}
:-moz-placeholder {
color: #999999;
}
::-webkit-input-placeholder {
color: #999999;
}
.help-block,
.help-inline {
color: #555555;
}
.help-block {
display: block;
margin-bottom: 11px;
}
.help-inline {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
vertical-align: middle;
padding-left: 5px;
}
.input-prepend,
.input-append {
margin-bottom: 5px;
}
.input-prepend input,
.input-append input,
.input-prepend select,
.input-append select,
.input-prepend .uneditable-input,
.input-append .uneditable-input {
*margin-left: 0;
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.input-prepend input:focus,
.input-append input:focus,
.input-prepend select:focus,
.input-append select:focus,
.input-prepend .uneditable-input:focus,
.input-append .uneditable-input:focus {
position: relative;
z-index: 2;
}
.input-prepend .uneditable-input,
.input-append .uneditable-input {
border-left-color: #ccc;
}
.input-prepend .add-on,
.input-append .add-on {
display: inline-block;
width: auto;
min-width: 16px;
height: 22px;
padding: 4px 5px;
font-weight: normal;
line-height: 22px;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
vertical-align: middle;
background-color: #eeeeee;
border: 1px solid #ccc;
}
.input-prepend .add-on,
.input-append .add-on,
.input-prepend .btn,
.input-append .btn {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-prepend .active,
.input-append .active {
background-color: #a9dba9;
border-color: #46a546;
}
.input-prepend .add-on,
.input-prepend .btn {
margin-right: -1px;
}
.input-append input,
.input-append select .uneditable-input {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-append .uneditable-input {
border-left-color: #eee;
border-right-color: #ccc;
}
.input-append .add-on,
.input-append .btn {
margin-left: -1px;
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.input-prepend.input-append input,
.input-prepend.input-append select,
.input-prepend.input-append .uneditable-input {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child {
margin-right: -1px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child {
margin-left: -1px;
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.search-query {
padding-left: 14px;
padding-right: 14px;
margin-bottom: 0;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
.form-search input,
.form-inline input,
.form-horizontal input,
.form-search textarea,
.form-inline textarea,
.form-horizontal textarea,
.form-search select,
.form-inline select,
.form-horizontal select,
.form-search .help-inline,
.form-inline .help-inline,
.form-horizontal .help-inline,
.form-search .uneditable-input,
.form-inline .uneditable-input,
.form-horizontal .uneditable-input,
.form-search .input-prepend,
.form-inline .input-prepend,
.form-horizontal .input-prepend,
.form-search .input-append,
.form-inline .input-append,
.form-horizontal .input-append {
display: inline-block;
margin-bottom: 0;
}
.form-search .hide,
.form-inline .hide,
.form-horizontal .hide {
display: none;
}
.form-search label,
.form-inline label {
display: inline-block;
}
.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
margin-bottom: 0;
}
.form-search .radio,
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
padding-left: 0;
margin-bottom: 0;
vertical-align: middle;
}
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: left;
margin-left: 0;
margin-right: 3px;
}
.control-group {
margin-bottom: 11px;
}
legend + .control-group {
margin-top: 22px;
-webkit-margin-top-collapse: separate;
}
.form-horizontal .control-group {
margin-bottom: 22px;
*zoom: 1;
}
.form-horizontal .control-group:before,
.form-horizontal .control-group:after {
display: table;
content: "";
}
.form-horizontal .control-group:after {
clear: both;
}
.form-horizontal .control-label {
float: left;
width: 140px;
padding-top: 5px;
text-align: right;
}
.form-horizontal .controls {
margin-left: 160px;
/* Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls */
*display: inline-block;
*margin-left: 0;
*padding-left: 20px;
}
.form-horizontal .help-block {
margin-top: 11px;
margin-bottom: 0;
}
.form-horizontal .form-actions {
padding-left: 160px;
}
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url("../../images/lib/bootstrap/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
*margin-right: .3em;
}
[class^="icon-"]:last-child,
[class*=" icon-"]:last-child {
*margin-left: 0;
}
.icon-white {
background-image: url("../../images/lib/bootstrap/glyphicons-halflings-white.png");
}
.icon-glass {
background-position: 0 0;
}
.icon-music {
background-position: -24px 0;
}
.icon-search {
background-position: -48px 0;
}
.icon-envelope {
background-position: -72px 0;
}
.icon-heart {
background-position: -96px 0;
}
.icon-star {
background-position: -120px 0;
}
.icon-star-empty {
background-position: -144px 0;
}
.icon-user {
background-position: -168px 0;
}
.icon-film {
background-position: -192px 0;
}
.icon-th-large {
background-position: -216px 0;
}
.icon-th {
background-position: -240px 0;
}
.icon-th-list {
background-position: -264px 0;
}
.icon-ok {
background-position: -288px 0;
}
.icon-remove {
background-position: -312px 0;
}
.icon-zoom-in {
background-position: -336px 0;
}
.icon-zoom-out {
background-position: -360px 0;
}
.icon-off {
background-position: -384px 0;
}
.icon-signal {
background-position: -408px 0;
}
.icon-cog {
background-position: -432px 0;
}
.icon-trash {
background-position: -456px 0;
}
.icon-home {
background-position: 0 -24px;
}
.icon-file {
background-position: -24px -24px;
}
.icon-time {
background-position: -48px -24px;
}
.icon-road {
background-position: -72px -24px;
}
.icon-download-alt {
background-position: -96px -24px;
}
.icon-download {
background-position: -120px -24px;
}
.icon-upload {
background-position: -144px -24px;
}
.icon-inbox {
background-position: -168px -24px;
}
.icon-play-circle {
background-position: -192px -24px;
}
.icon-repeat {
background-position: -216px -24px;
}
.icon-refresh {
background-position: -240px -24px;
}
.icon-list-alt {
background-position: -264px -24px;
}
.icon-lock {
background-position: -287px -24px;
}
.icon-flag {
background-position: -312px -24px;
}
.icon-headphones {
background-position: -336px -24px;
}
.icon-volume-off {
background-position: -360px -24px;
}
.icon-volume-down {
background-position: -384px -24px;
}
.icon-volume-up {
background-position: -408px -24px;
}
.icon-qrcode {
background-position: -432px -24px;
}
.icon-barcode {
background-position: -456px -24px;
}
.icon-tag {
background-position: 0 -48px;
}
.icon-tags {
background-position: -25px -48px;
}
.icon-book {
background-position: -48px -48px;
}
.icon-bookmark {
background-position: -72px -48px;
}
.icon-print {
background-position: -96px -48px;
}
.icon-camera {
background-position: -120px -48px;
}
.icon-font {
background-position: -144px -48px;
}
.icon-bold {
background-position: -167px -48px;
}
.icon-italic {
background-position: -192px -48px;
}
.icon-text-height {
background-position: -216px -48px;
}
.icon-text-width {
background-position: -240px -48px;
}
.icon-align-left {
background-position: -264px -48px;
}
.icon-align-center {
background-position: -288px -48px;
}
.icon-align-right {
background-position: -312px -48px;
}
.icon-align-justify {
background-position: -336px -48px;
}
.icon-list {
background-position: -360px -48px;
}
.icon-indent-left {
background-position: -384px -48px;
}
.icon-indent-right {
background-position: -408px -48px;
}
.icon-facetime-video {
background-position: -432px -48px;
}
.icon-picture {
background-position: -456px -48px;
}
.icon-pencil {
background-position: 0 -72px;
}
.icon-map-marker {
background-position: -24px -72px;
}
.icon-adjust {
background-position: -48px -72px;
}
.icon-tint {
background-position: -72px -72px;
}
.icon-edit {
background-position: -96px -72px;
}
.icon-share {
background-position: -120px -72px;
}
.icon-check {
background-position: -144px -72px;
}
.icon-move {
background-position: -168px -72px;
}
.icon-step-backward {
background-position: -192px -72px;
}
.icon-fast-backward {
background-position: -216px -72px;
}
.icon-backward {
background-position: -240px -72px;
}
.icon-play {
background-position: -264px -72px;
}
.icon-pause {
background-position: -288px -72px;
}
.icon-stop {
background-position: -312px -72px;
}
.icon-forward {
background-position: -336px -72px;
}
.icon-fast-forward {
background-position: -360px -72px;
}
.icon-step-forward {
background-position: -384px -72px;
}
.icon-eject {
background-position: -408px -72px;
}
.icon-chevron-left {
background-position: -432px -72px;
}
.icon-chevron-right {
background-position: -456px -72px;
}
.icon-plus-sign {
background-position: 0 -96px;
}
.icon-minus-sign {
background-position: -24px -96px;
}
.icon-remove-sign {
background-position: -48px -96px;
}
.icon-ok-sign {
background-position: -72px -96px;
}
.icon-question-sign {
background-position: -96px -96px;
}
.icon-info-sign {
background-position: -120px -96px;
}
.icon-screenshot {
background-position: -144px -96px;
}
.icon-remove-circle {
background-position: -168px -96px;
}
.icon-ok-circle {
background-position: -192px -96px;
}
.icon-ban-circle {
background-position: -216px -96px;
}
.icon-arrow-left {
background-position: -240px -96px;
}
.icon-arrow-right {
background-position: -264px -96px;
}
.icon-arrow-up {
background-position: -289px -96px;
}
.icon-arrow-down {
background-position: -312px -96px;
}
.icon-share-alt {
background-position: -336px -96px;
}
.icon-resize-full {
background-position: -360px -96px;
}
.icon-resize-small {
background-position: -384px -96px;
}
.icon-plus {
background-position: -408px -96px;
}
.icon-minus {
background-position: -433px -96px;
}
.icon-asterisk {
background-position: -456px -96px;
}
.icon-exclamation-sign {
background-position: 0 -120px;
}
.icon-gift {
background-position: -24px -120px;
}
.icon-leaf {
background-position: -48px -120px;
}
.icon-fire {
background-position: -72px -120px;
}
.icon-eye-open {
background-position: -96px -120px;
}
.icon-eye-close {
background-position: -120px -120px;
}
.icon-warning-sign {
background-position: -144px -120px;
}
.icon-plane {
background-position: -168px -120px;
}
.icon-calendar {
background-position: -192px -120px;
}
.icon-random {
background-position: -216px -120px;
}
.icon-comment {
background-position: -240px -120px;
}
.icon-magnet {
background-position: -264px -120px;
}
.icon-chevron-up {
background-position: -288px -120px;
}
.icon-chevron-down {
background-position: -313px -119px;
}
.icon-retweet {
background-position: -336px -120px;
}
.icon-shopping-cart {
background-position: -360px -120px;
}
.icon-folder-close {
background-position: -384px -120px;
}
.icon-folder-open {
background-position: -408px -120px;
}
.icon-resize-vertical {
background-position: -432px -119px;
}
.icon-resize-horizontal {
background-position: -456px -118px;
}
.dropdown {
position: relative;
}
.dropdown-toggle {
*margin-bottom: -3px;
}
.dropdown-toggle:active,
.open .dropdown-toggle {
outline: 0;
}
.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000000;
opacity: 0.3;
filter: alpha(opacity=30);
content: "";
}
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
}
.dropdown:hover .caret,
.open.dropdown .caret {
opacity: 1;
filter: alpha(opacity=100);
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu .divider {
height: 1px;
margin: 10px 1px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
*width: 100%;
*margin: -5px 0 5px;
}
.dropdown-menu a {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 22px;
color: #333333;
white-space: nowrap;
}
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: #ffffff;
text-decoration: none;
background-color: #3290d8;
}
.dropdown.open {
*z-index: 1000;
}
.dropdown.open .dropdown-toggle {
color: #ffffff;
background: #ccc;
background: rgba(0, 0, 0, 0.3);
}
.dropdown.open .dropdown-menu {
display: block;
}
.pull-right .dropdown-menu {
left: auto;
right: 0;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
border-top: 0;
border-bottom: 4px solid #000000;
content: "\2191";
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
.typeahead {
margin-top: 2px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fade {
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-ms-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
opacity: 0;
}
.fade.in {
opacity: 1;
}
.collapse {
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-ms-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
position: relative;
overflow: hidden;
height: 0;
}
.collapse.in {
height: auto;
}
.close {
float: right;
font-size: 20px;
font-weight: bold;
line-height: 22px;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
filter: alpha(opacity=20);
}
.close:hover {
color: #000000;
text-decoration: none;
opacity: 0.4;
filter: alpha(opacity=40);
cursor: pointer;
}
.btn {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
padding: 4px 10px 4px;
margin-bottom: 0;
font-size: 14px;
line-height: 22px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
border: 1px solid #cccccc;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: pointer;
*margin-left: .3em;
}
.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
background-color: #e6e6e6;
}
.btn:active,
.btn.active {
background-color: #cccccc \9;
}
.btn:first-child {
*margin-left: 0;
}
.btn:hover {
color: #333333;
text-decoration: none;
background-color: #e6e6e6;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn.active,
.btn:active {
background-image: none;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
outline: 0;
}
.btn.disabled,
.btn[disabled] {
cursor: default;
background-image: none;
background-color: #e6e6e6;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn-large {
padding: 9px 14px;
font-size: 16px;
line-height: normal;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.btn-large [class^="icon-"] {
margin-top: 1px;
}
.btn-small {
padding: 5px 9px;
font-size: 12px;
line-height: 20px;
}
.btn-small [class^="icon-"] {
margin-top: -1px;
}
.btn-mini {
padding: 2px 6px;
font-size: 12px;
line-height: 18px;
}
.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ffffff;
}
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-primary {
background-color: #6c6788;
background-image: -moz-linear-gradient(top, #757093, #5e5977);
background-image: -ms-linear-gradient(top, #757093, #5e5977);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#757093), to(#5e5977));
background-image: -webkit-linear-gradient(top, #757093, #5e5977);
background-image: -o-linear-gradient(top, #757093, #5e5977);
background-image: linear-gradient(top, #757093, #5e5977);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757093', endColorstr='#5e5977', GradientType=0);
border-color: #5e5977 #5e5977 #3b394b;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
background-color: #5e5977;
}
.btn-primary:active,
.btn-primary.active {
background-color: #474459 \9;
}
.btn-warning {
background-color: #faa732;
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: -ms-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(top, #fbb450, #f89406);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
border-color: #f89406 #f89406 #ad6704;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
background-color: #f89406;
}
.btn-warning:active,
.btn-warning.active {
background-color: #c67605 \9;
}
.btn-danger {
background-color: #da4f49;
background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
background-image: linear-gradient(top, #ee5f5b, #bd362f);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
border-color: #bd362f #bd362f #802420;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
background-color: #bd362f;
}
.btn-danger:active,
.btn-danger.active {
background-color: #942a25 \9;
}
.btn-success {
background-color: #5bb75b;
background-image: -moz-linear-gradient(top, #62c462, #51a351);
background-image: -ms-linear-gradient(top, #62c462, #51a351);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
background-image: -webkit-linear-gradient(top, #62c462, #51a351);
background-image: -o-linear-gradient(top, #62c462, #51a351);
background-image: linear-gradient(top, #62c462, #51a351);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
border-color: #51a351 #51a351 #387038;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
background-color: #51a351;
}
.btn-success:active,
.btn-success.active {
background-color: #408140 \9;
}
.btn-info {
background-color: #49afcd;
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(top, #5bc0de, #2f96b4);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-info:hover,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
background-color: #2f96b4;
}
.btn-info:active,
.btn-info.active {
background-color: #24748c \9;
}
.btn-inverse {
background-color: #414141;
background-image: -moz-linear-gradient(top, #555555, #222222);
background-image: -ms-linear-gradient(top, #555555, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222));
background-image: -webkit-linear-gradient(top, #555555, #222222);
background-image: -o-linear-gradient(top, #555555, #222222);
background-image: linear-gradient(top, #555555, #222222);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0);
border-color: #222222 #222222 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-inverse:hover,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
background-color: #222222;
}
.btn-inverse:active,
.btn-inverse.active {
background-color: #080808 \9;
}
.btn.icon {
position: relative;
width: 12px;
text-indent: -1000em;
overflow: hidden;
}
.btn.icon:after,
.btn.icon:before {
display: block;
position: absolute;
z-index: 2;
top: 1px;
left: 1px;
font-size: 23px;
font-family: Icons;
color: #fff;
text-indent: 0;
}
.btn.text-icon {
padding-left: 2.2em;
}
.btn.text-icon:before {
display: inline-block;
font-size: 23px;
font-family: Icons;
color: #fff;
position: absolute;
top: 4px;
left: 6px;
}
.btn.save:before {
content: '^';
}
.btn.reply:after {
content: 'M';
font-size: 16px;
top: 1px;
left: 3px;
}
.btn.emoji:after {
content: '9';
margin: 1px 0 0 -1px;
}
button.btn,
input[type="submit"].btn {
*padding-top: 2px;
*padding-bottom: 2px;
}
button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {
padding: 0;
border: 0;
}
button.btn.btn-large,
input[type="submit"].btn.btn-large {
*padding-top: 7px;
*padding-bottom: 7px;
}
button.btn.btn-small,
input[type="submit"].btn.btn-small {
*padding-top: 3px;
*padding-bottom: 3px;
}
button.btn.btn-mini,
input[type="submit"].btn.btn-mini {
*padding-top: 1px;
*padding-bottom: 1px;
}
.btn-group {
position: relative;
*zoom: 1;
*margin-left: .3em;
}
.btn-group:before,
.btn-group:after {
display: table;
content: "";
}
.btn-group:after {
clear: both;
}
.btn-group:first-child {
*margin-left: 0;
}
.btn-group + .btn-group {
margin-left: 5px;
}
.btn-toolbar {
margin-top: 11px;
margin-bottom: 11px;
}
.btn-toolbar .btn-group {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
}
.btn-group .btn {
position: relative;
float: left;
margin-left: -1px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.btn-group .btn:first-child {
margin-left: 0;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.btn-group .btn:last-child,
.btn-group .dropdown-toggle {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .btn.large:first-child {
margin-left: 0;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
}
.btn-group .btn.large:last-child,
.btn-group .large.dropdown-toggle {
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;
}
.btn-group .btn:hover,
.btn-group .btn:focus,
.btn-group .btn:active,
.btn-group .btn.active {
z-index: 2;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
-webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
*padding-top: 3px;
*padding-bottom: 3px;
}
.btn-group .btn-mini.dropdown-toggle {
padding-left: 5px;
padding-right: 5px;
*padding-top: 1px;
*padding-bottom: 1px;
}
.btn-group .btn-small.dropdown-toggle {
*padding-top: 4px;
*padding-bottom: 4px;
}
.btn-group .btn-large.dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
}
.btn-group.open {
*z-index: 1000;
}
.btn-group.open .dropdown-menu {
display: block;
margin-top: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.btn-group.open .dropdown-toggle {
background-image: none;
-webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn .caret {
margin-top: 7px;
margin-left: 0;
}
.btn:hover .caret,
.open.btn-group .caret {
opacity: 1;
filter: alpha(opacity=100);
}
.btn-mini .caret {
margin-top: 5px;
}
.btn-small .caret {
margin-top: 6px;
}
.btn-large .caret {
margin-top: 6px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000000;
}
.btn-primary .caret,
.btn-warning .caret,
.btn-danger .caret,
.btn-info .caret,
.btn-success .caret,
.btn-inverse .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
}
.nav {
margin-left: 0;
margin-bottom: 22px;
list-style: none;
}
.nav > li > a {
display: block;
}
.nav > li > a:hover {
text-decoration: none;
background-color: #eeeeee;
}
.nav .nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: 22px;
color: #999999;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.nav li + .nav-header {
margin-top: 9px;
}
.nav-list {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
background-color: #3290d8;
}
.nav-list [class^="icon-"] {
margin-right: 2px;
}
.nav-list .divider {
height: 1px;
margin: 10px 1px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
*width: 100%;
*margin: -5px 0 5px;
}
.nav-tabs,
.nav-pills {
*zoom: 1;
}
.nav-tabs:before,
.nav-pills:before,
.nav-tabs:after,
.nav-pills:after {
display: table;
content: "";
}
.nav-tabs:after,
.nav-pills:after {
clear: both;
}
.nav-tabs > li,
.nav-pills > li {
float: left;
}
.nav-tabs > li > a,
.nav-pills > li > a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom: -1px;
}
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 22px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
border-color: #eeeeee #eeeeee #dddddd;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
color: #555555;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
.nav-pills > li > a {
padding-top: 8px;
padding-bottom: 8px;
margin-top: 2px;
margin-bottom: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.nav-pills > .active > a,
.nav-pills > .active > a:hover {
color: #ffffff;
background-color: #3290d8;
}
.nav-stacked > li {
float: none;
}
.nav-stacked > li > a {
margin-right: 0;
}
.nav-tabs.nav-stacked {
border-bottom: 0;
}
.nav-tabs.nav-stacked > li > a {
border: 1px solid #ddd;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.nav-tabs.nav-stacked > li:first-child > a {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.nav-tabs.nav-stacked > li:last-child > a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.nav-tabs.nav-stacked > li > a:hover {
border-color: #ddd;
z-index: 2;
}
.nav-pills.nav-stacked > li > a {
margin-bottom: 3px;
}
.nav-pills.nav-stacked > li:last-child > a {
margin-bottom: 1px;
}
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu {
margin-top: 1px;
border-width: 1px;
}
.nav-pills .dropdown-menu {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.nav-tabs .dropdown-toggle .caret,
.nav-pills .dropdown-toggle .caret {
border-top-color: #3290d8;
border-bottom-color: #3290d8;
margin-top: 6px;
}
.nav-tabs .dropdown-toggle:hover .caret,
.nav-pills .dropdown-toggle:hover .caret {
border-top-color: #1e679f;
border-bottom-color: #1e679f;
}
.nav-tabs .active .dropdown-toggle .caret,
.nav-pills .active .dropdown-toggle .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.nav > .dropdown.active > a:hover {
color: #000000;
cursor: pointer;
}
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > .open.active > a:hover {
color: #ffffff;
background-color: #999999;
border-color: #999999;
}
.nav .open .caret,
.nav .open.active .caret,
.nav .open a:hover .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 1;
filter: alpha(opacity=100);
}
.tabs-stacked .open > a:hover {
border-color: #999999;
}
.tabbable {
*zoom: 1;
}
.tabbable:before,
.tabbable:after {
display: table;
content: "";
}
.tabbable:after {
clear: both;
}
.tab-content {
display: table;
width: 100%;
}
.tabs-below .nav-tabs,
.tabs-right .nav-tabs,
.tabs-left .nav-tabs {
border-bottom: 0;
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
.tabs-below .nav-tabs {
border-top: 1px solid #ddd;
}
.tabs-below .nav-tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
.tabs-below .nav-tabs > li > a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.tabs-below .nav-tabs > li > a:hover {
border-bottom-color: transparent;
border-top-color: #ddd;
}
.tabs-below .nav-tabs .active > a,
.tabs-below .nav-tabs .active > a:hover {
border-color: transparent #ddd #ddd #ddd;
}
.tabs-left .nav-tabs > li,
.tabs-right .nav-tabs > li {
float: none;
}
.tabs-left .nav-tabs > li > a,
.tabs-right .nav-tabs > li > a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}
.tabs-left .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
}
.tabs-left .nav-tabs > li > a {
margin-right: -1px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.tabs-left .nav-tabs > li > a:hover {
border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}
.tabs-left .nav-tabs .active > a,
.tabs-left .nav-tabs .active > a:hover {
border-color: #ddd transparent #ddd #ddd;
*border-right-color: #ffffff;
}
.tabs-right .nav-tabs {
float: right;
margin-left: 19px;
border-left: 1px solid #ddd;
}
.tabs-right .nav-tabs > li > a {
margin-left: -1px;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.tabs-right .nav-tabs > li > a:hover {
border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}
.tabs-right .nav-tabs .active > a,
.tabs-right .nav-tabs .active > a:hover {
border-color: #ddd #ddd #ddd transparent;
*border-left-color: #ffffff;
}
.navbar {
*position: relative;
*z-index: 2;
overflow: visible;
margin-bottom: 22px;
}
.navbar-inner {
padding-left: 20px;
padding-right: 20px;
background-color: #2c2c2c;
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.navbar .container {
width: auto;
}
.btn-navbar {
display: none;
float: right;
padding: 7px 10px;
margin-left: 5px;
margin-right: 5px;
background-color: #2c2c2c;
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
border-color: #222222 #222222 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
}
.btn-navbar:hover,
.btn-navbar:active,
.btn-navbar.active,
.btn-navbar.disabled,
.btn-navbar[disabled] {
background-color: #222222;
}
.btn-navbar:active,
.btn-navbar.active {
background-color: #080808 \9;
}
.btn-navbar .icon-bar {
display: block;
width: 18px;
height: 2px;
background-color: #f5f5f5;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.btn-navbar .icon-bar + .icon-bar {
margin-top: 3px;
}
.nav-collapse.collapse {
height: auto;
}
.navbar {
color: #999999;
}
.navbar .brand:hover {
text-decoration: none;
}
.navbar .brand {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
line-height: 1;
color: #ffffff;
}
.navbar .navbar-text {
margin-bottom: 0;
line-height: 40px;
}
.navbar .btn,
.navbar .btn-group {
margin-top: 5px;
}
.navbar .btn-group .btn {
margin-top: 0;
}
.navbar-form {
margin-bottom: 0;
*zoom: 1;
}
.navbar-form:before,
.navbar-form:after {
display: table;
content: "";
}
.navbar-form:after {
clear: both;
}
.navbar-form input,
.navbar-form select,
.navbar-form .radio,
.navbar-form .checkbox {
margin-top: 5px;
}
.navbar-form input,
.navbar-form select {
display: inline-block;
margin-bottom: 0;
}
.navbar-form input[type="image"],
.navbar-form input[type="checkbox"],
.navbar-form input[type="radio"] {
margin-top: 3px;
}
.navbar-form .input-append,
.navbar-form .input-prepend {
margin-top: 6px;
white-space: nowrap;
}
.navbar-form .input-append input,
.navbar-form .input-prepend input {
margin-top: 0;
}
.navbar-search {
position: relative;
float: left;
margin-top: 6px;
margin-bottom: 0;
}
.navbar-search .search-query {
padding: 4px 9px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 1;
color: #ffffff;
background-color: #626262;
border: 1px solid #151515;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.navbar-search .search-query:-moz-placeholder {
color: #cccccc;
}
.navbar-search .search-query::-webkit-input-placeholder {
color: #cccccc;
}
.navbar-search .search-query:focus,
.navbar-search .search-query.focused {
padding: 5px 10px;
color: #333333;
text-shadow: 0 1px 0 #ffffff;
background-color: #ffffff;
border: 0;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
outline: 0;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding-left: 0;
padding-right: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
}
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
}
.navbar .nav.pull-right {
float: right;
}
.navbar .nav > li {
display: block;
float: left;
}
.navbar .nav > li > a {
float: none;
padding: 10px 10px 11px;
line-height: 19px;
color: #999999;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar .nav > li > a:hover {
background-color: transparent;
color: #ffffff;
text-decoration: none;
}
.navbar .nav .active > a,
.navbar .nav .active > a:hover {
color: #ffffff;
text-decoration: none;
background-color: #222222;
}
.navbar .divider-vertical {
height: 40px;
width: 1px;
margin: 0 9px;
overflow: hidden;
background-color: #222222;
border-right: 1px solid #333333;
}
.navbar .nav.pull-right {
margin-left: 10px;
margin-right: 0;
}
.navbar .dropdown-menu {
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.navbar .dropdown-menu:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 9px;
}
.navbar .dropdown-menu:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 10px;
}
.navbar-fixed-bottom .dropdown-menu:before {
border-top: 7px solid #ccc;
border-top-color: rgba(0, 0, 0, 0.2);
border-bottom: 0;
bottom: -7px;
top: auto;
}
.navbar-fixed-bottom .dropdown-menu:after {
border-top: 6px solid #ffffff;
border-bottom: 0;
bottom: -6px;
top: auto;
}
.navbar .nav .dropdown-toggle .caret,
.navbar .nav .open.dropdown .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar .nav .active .caret {
opacity: 1;
filter: alpha(opacity=100);
}
.navbar .nav .open > .dropdown-toggle,
.navbar .nav .active > .dropdown-toggle,
.navbar .nav .open.active > .dropdown-toggle {
background-color: transparent;
}
.navbar .nav .active > .dropdown-toggle:hover {
color: #ffffff;
}
.navbar .nav.pull-right .dropdown-menu,
.navbar .nav .dropdown-menu.pull-right {
left: auto;
right: 0;
}
.navbar .nav.pull-right .dropdown-menu:before,
.navbar .nav .dropdown-menu.pull-right:before {
left: auto;
right: 12px;
}
.navbar .nav.pull-right .dropdown-menu:after,
.navbar .nav .dropdown-menu.pull-right:after {
left: auto;
right: 13px;
}
.modal-open .dropdown-menu {
z-index: 2050;
}
.modal-open .dropdown.open {
*z-index: 2050;
}
.modal-open .popover {
z-index: 2060;
}
.modal-open .tooltip {
z-index: 2070;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop,
.modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 1050;
overflow: auto;
width: 560px;
margin: -250px 0 0 -280px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
/* IE6-7 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.modal.fade {
-webkit-transition: opacity .3s linear, top .3s ease-out;
-moz-transition: opacity .3s linear, top .3s ease-out;
-ms-transition: opacity .3s linear, top .3s ease-out;
-o-transition: opacity .3s linear, top .3s ease-out;
transition: opacity .3s linear, top .3s ease-out;
top: -25%;
}
.modal.fade.in {
top: 50%;
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
}
.modal-header .close {
margin-top: 2px;
}
.modal-body {
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
.modal-form {
margin-bottom: 0;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
*zoom: 1;
}
.modal-footer:before,
.modal-footer:after {
display: table;
content: "";
}
.modal-footer:after {
clear: both;
}
.modal-footer .btn + .btn {
margin-left: 5px;
margin-bottom: 0;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1010;
display: none;
padding: 5px;
}
.popover.top {
margin-top: -5px;
}
.popover.right {
margin-left: 5px;
}
.popover.bottom {
margin-top: 5px;
}
.popover.left {
margin-left: -5px;
}
.popover.top .arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000000;
}
.popover.right .arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #000000;
}
.popover.bottom .arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #000000;
}
.popover.left .arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #000000;
}
.popover .arrow {
position: absolute;
width: 0;
height: 0;
}
.popover-inner {
padding: 3px;
width: 280px;
overflow: hidden;
background: #000000;
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
.popover-title {
padding: 9px 15px;
line-height: 1;
background-color: #f5f5f5;
border-bottom: 1px solid #eee;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.popover-content {
padding: 14px;
background-color: #ffffff;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.popover-content p,
.popover-content ul,
.popover-content ol {
margin-bottom: 0;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.hide {
display: none;
}
.show {
display: block;
}
.invisible {
visibility: hidden;
}
.modal {
text-align: left;
}
/**********************************************************
* Buttons *
**********************************************************/
.btn {
font-family: ApexRounded, sans-serif;
-webkit-font-smoothing: antialiased;
color: #fff;
background-color: #b9b9b9;
background-image: -moz-linear-gradient(top, #b9b9b9, #b9b9b9);
background-image: -ms-linear-gradient(top, #b9b9b9, #b9b9b9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b9b9b9), to(#b9b9b9));
background-image: -webkit-linear-gradient(top, #b9b9b9, #b9b9b9);
background-image: -o-linear-gradient(top, #b9b9b9, #b9b9b9);
background-image: linear-gradient(top, #b9b9b9, #b9b9b9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9b9b9', endColorstr='#b9b9b9', GradientType=0);
border-color: #b9b9b9 #b9b9b9 #939393;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
border-bottom: 2px solid #b0b0b0;
border-width: 0 0 2px 0;
}
.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
background-color: #b9b9b9;
}
.btn:active,
.btn.active {
background-color: #a0a0a0 \9;
}
.btn:hover {
background-color: #b4b4b4;
background-image: -moz-linear-gradient(top, #b4b4b4, #b4b4b4);
background-image: -ms-linear-gradient(top, #b4b4b4, #b4b4b4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b4b4b4), to(#b4b4b4));
background-image: -webkit-linear-gradient(top, #b4b4b4, #b4b4b4);
background-image: -o-linear-gradient(top, #b4b4b4, #b4b4b4);
background-image: linear-gradient(top, #b4b4b4, #b4b4b4);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b4b4b4', endColorstr='#b4b4b4', GradientType=0);
border-color: #b4b4b4 #b4b4b4 #8e8e8e;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
border-bottom: 2px solid #b0b0b0;
color: #fff;
}
.btn:hover:hover,
.btn:hover:active,
.btn:hover.active,
.btn:hover.disabled,
.btn:hover[disabled] {
background-color: #b4b4b4;
}
.btn:hover:active,
.btn:hover.active {
background-color: #9b9b9b \9;
}
.btn.active {
text-shadow: 0 1px 0 #1687cf;
background-color: #3a9be4;
background-image: -moz-linear-gradient(top, #3a9be4, #3a9be4);
background-image: -ms-linear-gradient(top, #3a9be4, #3a9be4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3a9be4), to(#3a9be4));
background-image: -webkit-linear-gradient(top, #3a9be4, #3a9be4);
background-image: -o-linear-gradient(top, #3a9be4, #3a9be4);
background-image: linear-gradient(top, #3a9be4, #3a9be4);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a9be4', endColorstr='#3a9be4', GradientType=0);
border-color: #3a9be4 #3a9be4 #1974b8;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #fff;
}
.btn.active:hover,
.btn.active:active,
.btn.active.active,
.btn.active.disabled,
.btn.active[disabled] {
background-color: #3a9be4;
}
.btn.active:active,
.btn.active.active {
background-color: #1c82cf \9;
}
.btn,
.btn-group .btn.dropdown-toggle {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:active {
margin-top: 1px;
margin-bottom: -1px;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.btn-group .btn:active {
margin-top: 0;
margin-bottom: 0;
}
.btn-focus,
.btn-focus:hover {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
color: #fff !important;
}
.btn-focus.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-focus {
background-color: #17c592;
background-image: -moz-linear-gradient(top, #17c592, #17c592);
background-image: -ms-linear-gradient(top, #17c592, #17c592);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#17c592), to(#17c592));
background-image: -webkit-linear-gradient(top, #17c592, #17c592);
background-image: -o-linear-gradient(top, #17c592, #17c592);
background-image: linear-gradient(top, #17c592, #17c592);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#17c592', endColorstr='#17c592', GradientType=0);
border-color: #17c592 #17c592 #0f805f;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
border-bottom-color: #00af7e;
}
.btn-focus:hover,
.btn-focus:active,
.btn-focus.active,
.btn-focus.disabled,
.btn-focus[disabled] {
background-color: #17c592;
}
.btn-focus:active,
.btn-focus.active {
background-color: #129770 \9;
}
.btn-focus:hover {
background-color: #00b180;
background-image: -moz-linear-gradient(top, #00b180, #00b180);
background-image: -ms-linear-gradient(top, #00b180, #00b180);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00b180), to(#00b180));
background-image: -webkit-linear-gradient(top, #00b180, #00b180);
background-image: -o-linear-gradient(top, #00b180, #00b180);
background-image: linear-gradient(top, #00b180, #00b180);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b180', endColorstr='#00b180', GradientType=0);
border-color: #00b180 #00b180 #006549;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-focus:hover:hover,
.btn-focus:hover:active,
.btn-focus:hover.active,
.btn-focus:hover.disabled,
.btn-focus:hover[disabled] {
background-color: #00b180;
}
.btn-focus:hover:active,
.btn-focus:hover.active {
background-color: #007e5b \9;
}
.btn-focus.disabled,
.btn-focus.disabled:hover,
.btn-fb.disabled,
.btn-fb.disabled:hover {
background-color: #d0d0d0;
background-image: -moz-linear-gradient(top, #d0d0d0, #d0d0d0);
background-image: -ms-linear-gradient(top, #d0d0d0, #d0d0d0);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d0d0d0), to(#d0d0d0));
background-image: -webkit-linear-gradient(top, #d0d0d0, #d0d0d0);
background-image: -o-linear-gradient(top, #d0d0d0, #d0d0d0);
background-image: linear-gradient(top, #d0d0d0, #d0d0d0);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0d0d0', endColorstr='#d0d0d0', GradientType=0);
border-color: #d0d0d0 #d0d0d0 #aaaaaa;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
border-bottom-color: 2px solid #c5c5c5;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3) !important;
}
.btn-focus.disabled:hover,
.btn-focus.disabled:hover:hover,
.btn-fb.disabled:hover,
.btn-fb.disabled:hover:hover,
.btn-focus.disabled:active,
.btn-focus.disabled:hover:active,
.btn-fb.disabled:active,
.btn-fb.disabled:hover:active,
.btn-focus.disabled.active,
.btn-focus.disabled:hover.active,
.btn-fb.disabled.active,
.btn-fb.disabled:hover.active,
.btn-focus.disabled.disabled,
.btn-focus.disabled:hover.disabled,
.btn-fb.disabled.disabled,
.btn-fb.disabled:hover.disabled,
.btn-focus.disabled[disabled],
.btn-focus.disabled:hover[disabled],
.btn-fb.disabled[disabled],
.btn-fb.disabled:hover[disabled] {
background-color: #d0d0d0;
}
.btn-focus.disabled:active,
.btn-focus.disabled:hover:active,
.btn-fb.disabled:active,
.btn-fb.disabled:hover:active,
.btn-focus.disabled.active,
.btn-focus.disabled:hover.active,
.btn-fb.disabled.active,
.btn-fb.disabled:hover.active {
background-color: #b7b7b7 \9;
}
.btn-primary,
.btn-active-on-hover:hover .btn-primary {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important;
background-color: #2f93dc;
background-image: -moz-linear-gradient(top, #2f93dc, #2f93dc);
background-image: -ms-linear-gradient(top, #2f93dc, #2f93dc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2f93dc), to(#2f93dc));
background-image: -webkit-linear-gradient(top, #2f93dc, #2f93dc);
background-image: -o-linear-gradient(top, #2f93dc, #2f93dc);
background-image: linear-gradient(top, #2f93dc, #2f93dc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f93dc', endColorstr='#2f93dc', GradientType=0);
border-color: #2f93dc #2f93dc #1b6aa3;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
border-bottom-color: #1687cf;
color: #fff !important;
}
.btn-primary:hover,
.btn-active-on-hover:hover .btn-primary:hover,
.btn-primary:active,
.btn-active-on-hover:hover .btn-primary:active,
.btn-primary.active,
.btn-active-on-hover:hover .btn-primary.active,
.btn-primary.disabled,
.btn-active-on-hover:hover .btn-primary.disabled,
.btn-primary[disabled],
.btn-active-on-hover:hover .btn-primary[disabled] {
background-color: #2f93dc;
}
.btn-primary:active,
.btn-active-on-hover:hover .btn-primary:active,
.btn-primary.active,
.btn-active-on-hover:hover .btn-primary.active {
background-color: #1f78b9 \9;
}
.btn-primary:hover,
.btn-active-on-hover:hover .btn-primary:hover {
background-color: #277dbf;
background-image: -moz-linear-gradient(top, #277dbf, #277dbf);
background-image: -ms-linear-gradient(top, #277dbf, #277dbf);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#277dbf), to(#277dbf));
background-image: -webkit-linear-gradient(top, #277dbf, #277dbf);
background-image: -o-linear-gradient(top, #277dbf, #277dbf);
background-image: linear-gradient(top, #277dbf, #277dbf);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#277dbf', endColorstr='#277dbf', GradientType=0);
border-color: #277dbf #277dbf #1a537f;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-primary:hover:hover,
.btn-active-on-hover:hover .btn-primary:hover:hover,
.btn-primary:hover:active,
.btn-active-on-hover:hover .btn-primary:hover:active,
.btn-primary:hover.active,
.btn-active-on-hover:hover .btn-primary:hover.active,
.btn-primary:hover.disabled,
.btn-active-on-hover:hover .btn-primary:hover.disabled,
.btn-primary:hover[disabled],
.btn-active-on-hover:hover .btn-primary:hover[disabled] {
background-color: #277dbf;
}
.btn-primary:hover:active,
.btn-active-on-hover:hover .btn-primary:hover:active,
.btn-primary:hover.active,
.btn-active-on-hover:hover .btn-primary:hover.active {
background-color: #1e6195 \9;
}
.btn-danger {
font-weight: bold;
color: #fff;
background-color: #e97256;
background-image: -moz-linear-gradient(top, #e97256, #e97256);
background-image: -ms-linear-gradient(top, #e97256, #e97256);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e97256), to(#e97256));
background-image: -webkit-linear-gradient(top, #e97256, #e97256);
background-image: -o-linear-gradient(top, #e97256, #e97256);
background-image: linear-gradient(top, #e97256, #e97256);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e97256', endColorstr='#e97256', GradientType=0);
border-color: #e97256 #e97256 #d73f1c;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
border-bottom-color: #db654b !important;
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
background-color: #e97256;
}
.btn-danger:active,
.btn-danger.active {
background-color: #e34c29 \9;
}
.btn-danger:hover {
background-color: #da644a;
background-image: -moz-linear-gradient(top, #da644a, #da644a);
background-image: -ms-linear-gradient(top, #da644a, #da644a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#da644a), to(#da644a));
background-image: -webkit-linear-gradient(top, #da644a, #da644a);
background-image: -o-linear-gradient(top, #da644a, #da644a);
background-image: linear-gradient(top, #da644a, #da644a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#da644a', endColorstr='#da644a', GradientType=0);
border-color: #da644a #da644a #b33e25;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-danger:hover:hover,
.btn-danger:hover:active,
.btn-danger:hover.active,
.btn-danger:hover.disabled,
.btn-danger:hover[disabled] {
background-color: #da644a;
}
.btn-danger:hover:active,
.btn-danger:hover.active {
background-color: #c84629 \9;
}
.btn-fb {
color: #fefefe;
text-shadow: 0 1px 0 #2d3b53;
background-color: #30528d;
background-image: -moz-linear-gradient(top, #30528d, #30528d);
background-image: -ms-linear-gradient(top, #30528d, #30528d);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#30528d), to(#30528d));
background-image: -webkit-linear-gradient(top, #30528d, #30528d);
background-image: -o-linear-gradient(top, #30528d, #30528d);
background-image: linear-gradient(top, #30528d, #30528d);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30528d', endColorstr='#30528d', GradientType=0);
border-color: #30528d #30528d #1d3154;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
border-bottom-color: #21467f;
}
.btn-fb:hover,
.btn-fb:active,
.btn-fb.active,
.btn-fb.disabled,
.btn-fb[disabled] {
background-color: #30528d;
}
.btn-fb:active,
.btn-fb.active {
background-color: #233c67 \9;
}
.btn-fb:hover {
background-color: #2c4d87;
background-image: -moz-linear-gradient(top, #2c4d87, #2c4d87);
background-image: -ms-linear-gradient(top, #2c4d87, #2c4d87);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2c4d87), to(#2c4d87));
background-image: -webkit-linear-gradient(top, #2c4d87, #2c4d87);
background-image: -o-linear-gradient(top, #2c4d87, #2c4d87);
background-image: linear-gradient(top, #2c4d87, #2c4d87);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c4d87', endColorstr='#2c4d87', GradientType=0);
border-color: #2c4d87 #2c4d87 #192c4d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
}
.btn-fb:hover:hover,
.btn-fb:hover:active,
.btn-fb:hover.active,
.btn-fb:hover.disabled,
.btn-fb:hover[disabled] {
background-color: #2c4d87;
}
.btn-fb:hover:active,
.btn-fb:hover.active {
background-color: #1f3761 \9;
}
.btn-tooltip,
.btn-tooltip-loading,
.nav-tabs-tooltip {
display: block;
z-index: 99;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
-o-transition: -o-transform 0.3s, opacity 0.3s;
}
.btn-tooltip.on,
.btn-tooltip-loading.on,
.nav-tabs-tooltip.on {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate(0, 5px);
-moz-transform: translate(0, 5px);
-ms-transform: translate(0, 5px);
-o-transform: translate(0, 5px);
transform: translate(0, 5px);
}
.btn-tooltip.replace {
-webkit-transform: translate(0, 5px);
-moz-transform: translate(0, 5px);
-ms-transform: translate(0, 5px);
-o-transform: translate(0, 5px);
transform: translate(0, 5px);
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.btn-tooltip:before,
.btn-tooltip-loading:before,
.nav-tabs-tooltip:before {
content: ' ';
position: absolute;
left: 50%;
top: -8px;
width: 0;
height: 0;
margin: 0 0 0 -8px;
border-style: solid;
border-width: 0 8px 8px 8px;
border-color: transparent transparent #2f93dc transparent;
}
.btn-tooltip:hover:before {
border-color: transparent transparent #277dbf transparent;
}
.btn-tooltip:after {
content: ' ';
display: block;
position: absolute;
left: -10px;
top: -10px;
right: -10px;
bottom: -10px;
}
.btn-danger.btn-tooltip:before {
border-color: transparent transparent #e97256 transparent !important;
}
.btn-danger.btn-tooltip:before:hover {
border-color: transparent transparent #da644a transparent !important;
}
.btn-tooltip-loading {
background: #e8e8e8;
width: 28px;
height: 28px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.btn-tooltip-loading:before {
border-color: transparent transparent #e8e8e8 transparent;
}
.btn.back:before {
content: 'R';
font-family: Icons;
margin: 0 5px 0 0;
}
/**********************************************************
* Tabs *
**********************************************************/
.nav-tabs {
border: 0 none;
overflow: hidden;
background: #f7f7f7;
margin-bottom: 0;
float: left;
}
.nav-tabs > li > a:hover {
background: none;
}
.nav-tabs a,
.nav-tabs a:hover {
position: relative;
font-family: ApexRounded, sans-serif;
font-size: 17px !important;
line-height: 17px !important;
width: 55px !important;
height: 50px !important;
margin: 0 !important;
padding: 14px 0 0 0 !important;
border: 4px solid #d0d0d0 !important;
-webkit-border-radius: 4px !important;
-moz-border-radius: 4px !important;
border-radius: 4px !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
box-sizing: border-box !important;
overflow: hidden;
color: #f7f7f7;
color: rgba(0, 0, 0, 0);
}
.nav-tabs a:hover {
border-color: #c8c8c8 !important;
}
.nav-tabs .active a,
.nav-tabs .active a:hover {
width: auto !important;
padding-left: 14px !important;
padding-right: 14px !important;
color: #fff !important;
background: #b9b9b9 !important;
border-color: #b9b9b9 !important;
margin: 0 !important;
}
.nav-tabs .active a:before,
.nav-tabs.nav-buttons a:before {
width: auto !important;
color: #fff !important;
position: relative;
top: auto;
left: auto;
right: auto;
line-height: 100%;
margin-right: 8px !important;
}
.nav-tabs a:before {
font-weight: normal;
font-family: Icons;
margin: -4px 7px 0 0;
display: inline-block;
vertical-align: middle;
position: absolute;
top: 14px;
left: 0;
width: 100%;
text-align: center;
text-indent: 0 !important;
font-size: 24px !important;
line-height: 24px !important;
color: #b9b9b9 !important;
}
.nav-tabs li:first-child {
padding-left: 10px !important;
}
.nav-tabs li {
padding: 10px 10px 10px 0 !important;
height: 50px;
position: relative;
}
.nav-tabs .count {
position: absolute;
top: 5px;
right: 7px;
background: #f7fd61;
font-family: ApexRounded, sans-serif;
font-size: 16px;
line-height: 16px;
padding: 3px 3px 0;
z-index: 1;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.nav-tabs:first-child {
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
}
.nav-tabs:last-child {
-webkit-border-radius: 0 4px 0 0;
-moz-border-radius: 0 4px 0 0;
border-radius: 0 4px 0 0;
}
.nav-tabs:first-child:last-child {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.nav-tabs.nav-buttons {
background: #b9b9b9;
}
.nav-tabs.nav-buttons li a {
border-width: 0 0 3px 0 !important;
height: 48px !important;
width: auto !important;
padding: 16px 18px !important;
border-bottom-color: #1687cf !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ffffff;
background-color: #6c6788;
background-image: -moz-linear-gradient(top, #757093, #5e5977);
background-image: -ms-linear-gradient(top, #757093, #5e5977);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#757093), to(#5e5977));
background-image: -webkit-linear-gradient(top, #757093, #5e5977);
background-image: -o-linear-gradient(top, #757093, #5e5977);
background-image: linear-gradient(top, #757093, #5e5977);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757093', endColorstr='#5e5977', GradientType=0);
border-color: #5e5977 #5e5977 #3b394b;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important;
background-color: #2f93dc;
background-image: -moz-linear-gradient(top, #2f93dc, #2f93dc);
background-image: -ms-linear-gradient(top, #2f93dc, #2f93dc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2f93dc), to(#2f93dc));
background-image: -webkit-linear-gradient(top, #2f93dc, #2f93dc);
background-image: -o-linear-gradient(top, #2f93dc, #2f93dc);
background-image: linear-gradient(top, #2f93dc, #2f93dc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f93dc', endColorstr='#2f93dc', GradientType=0);
border-color: #2f93dc #2f93dc #1b6aa3;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
border-bottom-color: #1687cf;
color: #fff !important;
}
.nav-tabs.nav-buttons li a:hover,
.nav-tabs.nav-buttons li a:active,
.nav-tabs.nav-buttons li a.active,
.nav-tabs.nav-buttons li a.disabled,
.nav-tabs.nav-buttons li a[disabled] {
background-color: #5e5977;
}
.nav-tabs.nav-buttons li a:active,
.nav-tabs.nav-buttons li a.active {
background-color: #474459 \9;
}
.nav-tabs.nav-buttons li a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
}
.nav-tabs.nav-buttons li a:hover,
.nav-tabs.nav-buttons li a:active,
.nav-tabs.nav-buttons li a.active,
.nav-tabs.nav-buttons li a.disabled,
.nav-tabs.nav-buttons li a[disabled] {
background-color: #2f93dc;
}
.nav-tabs.nav-buttons li a:active,
.nav-tabs.nav-buttons li a.active {
background-color: #1f78b9 \9;
}
.nav-tabs.nav-buttons li a:hover {
background-color: #277dbf;
background-image: -moz-linear-gradient(top, #277dbf, #277dbf);
background-image: -ms-linear-gradient(top, #277dbf, #277dbf);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#277dbf), to(#277dbf));
background-image: -webkit-linear-gradient(top, #277dbf, #277dbf);
background-image: -o-linear-gradient(top, #277dbf, #277dbf);
background-image: linear-gradient(top, #277dbf, #277dbf);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#277dbf', endColorstr='#277dbf', GradientType=0);
border-color: #277dbf #277dbf #1a537f;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
background-color: #277DBF;
border-color: #277DBF #277DBF #1A537F !important;
}
.nav-tabs.nav-buttons li a:hover:hover,
.nav-tabs.nav-buttons li a:hover:active,
.nav-tabs.nav-buttons li a:hover.active,
.nav-tabs.nav-buttons li a:hover.disabled,
.nav-tabs.nav-buttons li a:hover[disabled] {
background-color: #277dbf;
}
.nav-tabs.nav-buttons li a:hover:active,
.nav-tabs.nav-buttons li a:hover.active {
background-color: #1e6195 \9;
}
.nav-tabs-tooltip {
background: #ddd;
font-family: ApexRounded, sans-serif;
font-size: 14px;
line-height: 14px;
padding: 10px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.nav-tabs-tooltip:before {
border-color: transparent transparent #e0e0e0 transparent;
}
/**********************************************************
* Settings *
**********************************************************/
/*
* Components
*/
/**********************************************************
* Common Settings *
* Used on all domains (except mobile) *
**********************************************************/
body,
html {
min-height: 100%;
}
li {
margin-bottom: 11px;
}
ul,
ol {
margin-left: 50px;
}
form {
*zoom: 1;
margin: 0;
}
form:before,
form:after {
display: table;
content: "";
}
form:after {
clear: both;
}
.modal {
display: none;
}
html .no-fbauth,
html .fbauth {
visibility: hidden;
}
html.fbauth .fbauth,
html.no-fbauth .no-fbauth {
display: block;
visibility: visible;
}
html.fbauth .no-fbauth,
html.no-fbauth .fbauth {
display: none;
visibility: visible;
}
h1,
h2,
h3 {
font-family: ApexRounded, sans-serif;
}
blockquote p {
font-weight: normal;
}
/**********************************************************
* Basic Settings *
* Used on all domains + mobile *
**********************************************************/
body {
-webkit-font-smoothing: antialiased;
font-family: Helvetica, arial, sans-serif;
}
a:focus {
outline: none;
}
a:hover {
text-decoration: none;
}
button::-moz-focus-inner {
border: 0;
}
::selection {
background: #f3e5d5;
}
::-moz-selection {
background: #f3e5d5;
}
.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
opacity: 0;
}
50% {
-webkit-transform: scale(1.5);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes pulse {
0% {
-webkit-transform: scale(1);
opacity: 0;
}
50% {
-webkit-transform: scale(1.5);
opacity: 1;
}
100% {
-moz-transform: scale(1);
}
}
@-o-keyframes pulse {
0% {
-webkit-transform: scale(1);
opacity: 0;
}
50% {
-webkit-transform: scale(1.5);
opacity: 1;
}
100% {
-o-transform: scale(1);
}
}
@keyframes pulse {
0% {
-webkit-transform: scale(1);
opacity: 0;
}
50% {
-webkit-transform: scale(1.5);
opacity: 1;
}
100% {
transform: scale(1);
}
}
.pulse {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-o-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: .2s;
-moz-animation-duration: .2s;
-o-animation-duration: .2s;
animation-duration: .2s;
}
/**********************************************************
* Step CTAs *
**********************************************************/
.step {
margin-bottom: 10px;
}
.step label {
display: inline;
font-family: ApexRounded, sans-serif;
font-weight: bold;
font-size: 22px;
}
.step .number {
background: #3ecea0;
border: 4px solid #96e3cb;
color: #fff;
font-size: 22px;
font-weight: bold;
font-family: ApexRounded, sans-serif;
display: inline-block;
width: 40px;
height: 40px;
padding: 6px;
text-align: center;
margin-right: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
}
.step.complete .number {
text-indent: -1000em;
overflow: hidden;
background-image: url(/images/www/gra_step_checked.png);
background-position: center center;
background-repeat: no-repeat;
}
.step.error .number {
background: #ff6334;
border-color: #ff9170;
}
/**********************************************************
* Generic Controls *
**********************************************************/
input.big,
textarea.big {
font-family: ApexRounded, sans-serif;
font-size: 20px;
padding: 8px;
}
.control-label {
font-family: ApexRounded, sans-serif;
font-size: 22px;
color: #454545;
margin-bottom: 15px;
}
.form-horizontal .control-label {
font-size: 17px;
margin-bottom: 0;
}
input[type=text],
input[type=password],
textarea,
.custom-control,
.emoji-wysiwyg-editor {
color: #333333;
background: #fefefe;
border: 2px solid #e0e0e0;
height: auto;
padding: 10px;
width: 100%;
font-size: 16px;
font-family: ApexRounded, sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
input[type=text]:focus,
input[type=password]:focus,
textarea:focus,
.custom-control.focus {
border-color: #bab6d1 !important;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px 3px rgba(186, 182, 203, 0.98);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px 3px rgba(186, 182, 203, 0.98);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px 3px rgba(186, 182, 203, 0.98);
}
input.error,
textarea.error,
.custom-control.error {
border-color: #eb6940 !important;
}
input.error:focus,
textarea.error:focus,
.custom-control.error {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px 3px rgba(235, 105, 64, 0.3);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px 3px rgba(235, 105, 64, 0.3);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px 3px rgba(235, 105, 64, 0.3);
}
/**********************************************************
* Custom Controls *
**********************************************************/
.custom-control .loading {
color: #d0d0d0;
}
.custom-control .loading:before {
content: ' ';
display: inline-block;
width: 22px;
height: 22px;
vertical-align: middle;
margin: -4px 5px 0 0;
background: url(/images/www/spinners/22x22_000_FFF.gif) 0 0 no-repeat;
opacity: 0.15;
filter: alpha(opacity=15);
}
.custom-select.loaded {
padding: 0;
}
.custom-select ul {
list-style: none;
margin: 0;
padding: 5px;
background: #f6f6f6;
*zoom: 1;
}
.custom-select ul:before,
.custom-select ul:after {
display: table;
content: "";
}
.custom-select ul:after {
clear: both;
}
.custom-select li {
padding: 10px;
border: 3px solid #fff;
margin: 5px;
background: #fff;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.custom-select li:hover,
.custom-select li.selected {
border-color: #3290d8;
}
.custom-select li.selected {
-webkit-box-shadow: 0 0 10px #96c7ff;
-moz-box-shadow: 0 0 10px #96c7ff;
box-shadow: 0 0 10px #96c7ff;
}
/**********************************************************
* Input Placeholders *
**********************************************************/
.placeholder {
color: #d0d0d0;
}
::-webkit-input-placeholder {
color: #d0d0d0;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #d0d0d0 !important;
}
/**********************************************************
* Error Messages *
**********************************************************/
span.error {
color: #eb6940;
display: block;
font-weight: bold;
}
/**********************************************************
* File Upload Buttons *
**********************************************************/
.file-button {
position: relative;
display: inline-block;
vertical-align: middle;
width: 140px;
height: 50px;
overflow: hidden;
cursor: pointer;
}
.file-button:hover a {
text-decoration: none;
background-position: 0 -10px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.file-button:active a {
top: 1px;
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}
.file-button a,
.file-button input {
position: absolute;
width: 100%;
}
.file-button a {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
padding: 4px 10px 4px;
margin-bottom: 0;
font-size: 14px;
line-height: 22px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border: 1px solid #cccccc;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: pointer;
*margin-left: .3em;
-webkit-font-smoothing: antialiased;
color: #fff;
background-color: #b9b9b9;
background-image: -moz-linear-gradient(top, #b9b9b9, #b9b9b9);
background-image: -ms-linear-gradient(top, #b9b9b9, #b9b9b9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b9b9b9), to(#b9b9b9));
background-image: -webkit-linear-gradient(top, #b9b9b9, #b9b9b9);
background-image: -o-linear-gradient(top, #b9b9b9, #b9b9b9);
background-image: linear-gradient(top, #b9b9b9, #b9b9b9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9b9b9', endColorstr='#b9b9b9', GradientType=0);
border-color: #b9b9b9 #b9b9b9 #939393;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
border-bottom: 2px solid #b0b0b0;
border-width: 0 0 2px 0;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ffffff;
background-color: #6c6788;
background-image: -moz-linear-gradient(top, #757093, #5e5977);
background-image: -ms-linear-gradient(top, #757093, #5e5977);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#757093), to(#5e5977));
background-image: -webkit-linear-gradient(top, #757093, #5e5977);
background-image: -o-linear-gradient(top, #757093, #5e5977);
background-image: linear-gradient(top, #757093, #5e5977);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757093', endColorstr='#5e5977', GradientType=0);
border-color: #5e5977 #5e5977 #3b394b;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important;
background-color: #2f93dc;
background-image: -moz-linear-gradient(top, #2f93dc, #2f93dc);
background-image: -ms-linear-gradient(top, #2f93dc, #2f93dc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2f93dc), to(#2f93dc));
background-image: -webkit-linear-gradient(top, #2f93dc, #2f93dc);
background-image: -o-linear-gradient(top, #2f93dc, #2f93dc);
background-image: linear-gradient(top, #2f93dc, #2f93dc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f93dc', endColorstr='#2f93dc', GradientType=0);
border-color: #2f93dc #2f93dc #1b6aa3;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
border-bottom-color: #1687cf;
color: #fff !important;
font-size: 20px;
font-family: ApexRounded, sans-serif;
padding: 10px 25px;
z-index: 1;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.file-button a:hover,
.file-button a:active,
.file-button a.active,
.file-button a.disabled,
.file-button a[disabled] {
background-color: #e6e6e6;
}
.file-button a:active,
.file-button a.active {
background-color: #cccccc \9;
}
.file-button a:first-child {
*margin-left: 0;
}
.file-button a:hover,
.file-button a:active,
.file-button a.active,
.file-button a.disabled,
.file-button a[disabled] {
background-color: #b9b9b9;
}
.file-button a:active,
.file-button a.active {
background-color: #a0a0a0 \9;
}
.file-button a:hover,
.file-button a:active,
.file-button a.active,
.file-button a.disabled,
.file-button a[disabled] {
background-color: #5e5977;
}
.file-button a:active,
.file-button a.active {
background-color: #474459 \9;
}
.file-button a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
}
.file-button a:hover,
.file-button a:active,
.file-button a.active,
.file-button a.disabled,
.file-button a[disabled] {
background-color: #2f93dc;
}
.file-button a:active,
.file-button a.active {
background-color: #1f78b9 \9;
}
.file-button a.disabled {
background: rgba(0, 0, 0, 0.04) !important;
border: 1px solid #f8f8f8;
color: #b8b8b8;
text-shadow: none;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}
.file-button input {
z-index: 2;
top: 0;
right: 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(3);
-moz-transform: scale(3);
-ms-transform: scale(3);
-o-transform: scale(3);
transform: scale(3);
}
/**********************************************************
* Bottom Buttons *
**********************************************************/
.form-actions {
background: rgba(200, 200, 200, 0.08);
border-top: 1px solid #e8e8e8;
}
.form-actions .saving,
.form-actions .saved,
.form-actions .save-error {
font-weight: bold;
font-family: ApexRounded, sans-serif;
font-size: 15px;
vertical-align: middle;
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
margin: 2px 0 0 14px;
}
.form-actions .saving {
color: #808080;
}
.form-actions .saved {
color: #24a265;
}
.form-actions .save-error {
color: #df4a1c;
}
#top-strip {
background-color: #38cdff;
background-image: -moz-linear-gradient(left, #6b4aaa, #38cdff);
background-image: -ms-linear-gradient(left, #6b4aaa, #38cdff);
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#6b4aaa), to(#38cdff));
background-image: -webkit-linear-gradient(left, #6b4aaa, #38cdff);
background-image: -o-linear-gradient(left, #6b4aaa, #38cdff);
background-image: linear-gradient(left, #6b4aaa, #38cdff);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b4aaa', endColorstr='#38cdff', GradientType=1);
height: 8px;
}
#top.outer {
z-index: 5;
height: auto;
margin: 0;
position: relative;
color: rgba(0, 0, 0, 0.4);
text-shadow: 0 -1px rgba(255, 255, 255, 0.05);
font-family: ApexRounded, sans-serif;
font-weight: normal;
background-color: #38cdff;
background-image: -moz-linear-gradient(left, #6b4aaa, #38cdff);
background-image: -ms-linear-gradient(left, #6b4aaa, #38cdff);
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#6b4aaa), to(#38cdff));
background-image: -webkit-linear-gradient(left, #6b4aaa, #38cdff);
background-image: -o-linear-gradient(left, #6b4aaa, #38cdff);
background-image: linear-gradient(left, #6b4aaa, #38cdff);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b4aaa', endColorstr='#38cdff', GradientType=1);
-webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
}
#top.outer a:active {
margin-top: 1px !important;
margin-bottom: -1px !important;
}
#top.outer #navbar {
padding: 24px 0 15px 0;
}
#top.outer #navbar #logo {
float: left;
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/logo/60x63.png');
width: 60px;
height: 63px;
margin-top: -3px;
}
#top.outer #navbar #logo:active {
margin-top: -2px !important;
}
#top.outer #navbar #nav-user {
margin: 15px 0 0 25px;
float: left;
font-size: 16px;
line-height: 16px;
}
#top.outer #navbar #nav-user .btn {
font-size: 16px;
padding: 6px 15px 4px;
margin: 0 5px;
}
#top.outer #navbar #nav-user .btn.signin:before {
content: '<';
font-family: Icons;
margin: 0 5px 0 0;
}
#top.outer #navbar #nav-user .btn.join:before {
content: 'T';
font-family: Icons;
margin: 0 5px 0 0;
}
#top.outer #navbar #nav-user .user {
display: block;
margin: -5px 0 9px 0;
}
#top.outer #navbar #nav-user .user .username {
background-color: #000000;
background-color: rgba(0, 0, 0, 0.12);
zoom: 1;
background-color: transparent\9;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1f000000, endColorstr=#1f000000)";
font-size: 19px;
line-height: 20px;
color: #fff;
padding: 2px 5px 0 5px;
margin-left: -5px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#top.outer #navbar #nav-user .diy-icn {
color: rgba(0, 0, 0, 0.3);
font-size: 1.4rem;
}
#top.outer #navbar #nav-user .diy-icn:hover {
color: rgba(0, 0, 0, 0.4);
}
#top.outer #navbar #nav-user .cog-icn {
position: relative;
top: 0.06em;
}
#top.outer #navbar #nav-user .user .label {
font-size: 13px;
display: block;
margin: -19px 0 6px 0;
text-transform: uppercase;
}
#top.outer #navbar #nav-user .signout {
color: #38a9ff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
#top.outer #navbar #nav-user .signout:hover {
color: #289cf5;
}
#top.outer #navbar #nav {
float: right;
margin: 0;
padding: 0;
list-style: none;
*zoom: 1;
}
#top.outer #navbar #nav:before,
#top.outer #navbar #nav:after {
display: table;
content: "";
}
#top.outer #navbar #nav:after {
clear: both;
}
#top.outer #navbar #nav li {
position: relative;
height: 100px;
width: 90px;
float: left;
font-size: 18px;
margin: -15px 0;
text-align: center;
}
#top.outer #navbar #nav a {
position: relative;
display: inline-block;
padding: 55px 0 0 0;
color: #396a9a;
color: rgba(0, 0, 0, 0.35);
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
}
#top.outer #navbar #nav a:before {
color: rgba(0, 0, 0, 0.3);
}
#top.outer #navbar #nav a:hover {
color: #34608c;
color: rgba(0, 0, 0, 0.45);
}
#top.outer #navbar #nav a:hover:before {
color: rgba(0, 0, 0, 0.4);
}
#top.outer #navbar #nav li.active {
margin: -15px 0;
width: 105px;
background: #535b98;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#top.outer #navbar #nav li.active:after {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
right: 0;
height: 10px;
background: url(/images/www/ui_nav_jaggies.png?4) top left repeat-x;
}
#top.outer #navbar #nav li.active a,
#top.outer #navbar #nav li.active a:before {
color: #fff;
}
/**********************************************************
* Navigation Icons (@font-face) *
**********************************************************/
.fontface #nav li {
position: relative;
}
.fontface #nav li a:before {
font-family: Icons;
line-height: 45px;
text-align: center;
width: 100%;
display: block;
position: absolute;
left: 0;
top: 9px;
}
.fontface #nav .skills a:before {
content: 'L';
font-size: 42px;
}
.fontface #nav .stream a:before {
content: '.';
font-size: 42px;
}
.fontface #nav .explore a:before {
content: 'P';
font-size: 40px;
}
.fontface #nav .settings a:before {
content: 'E';
font-size: 42px;
}
.fontface #nav .dashboard a:before {
content: ':';
font-size: 42px;
top: 8px;
}
.fontface #nav .portfolio a:before {
content: 'N';
font-size: 40px;
}
.fontface #nav .blog a:before {
content: '/';
font-size: 40px;
left: -10px;
}
.global-footer {
position: fixed;
bottom: 0;
z-index: 1030;
width: 100%;
line-height: 18px;
font-size: 13px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
/**********************************************************
* Purple Links Section *
**********************************************************/
}
.global-footer .wrapper > .colophon,
.global-footer .wrapper > .links .content {
width: 1000px;
margin: 0 auto !important;
text-align: left;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
*zoom: 1;
}
.global-footer .wrapper > .colophon:before,
.global-footer .wrapper > .links .content:before,
.global-footer .wrapper > .colophon:after,
.global-footer .wrapper > .links .content:after {
display: table;
content: "";
}
.global-footer .wrapper > .colophon:after,
.global-footer .wrapper > .links .content:after {
clear: both;
}
.global-footer .colophon {
height: 55px;
position: relative;
padding-left: 75px;
}
.global-footer .colophon .pull-right {
text-align: right;
}
.global-footer .colophon .logo {
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/ui_footer_diylogo.png');
width: 60px;
height: 63px;
position: absolute;
top: -15px;
left: 0;
}
.global-footer .colophon a.logo:active {
top: -14px;
}
.global-footer .colophon .tagline {
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/gra_footer_tagline.png');
width: 478px;
height: 20px;
margin: 11px 0 0 0;
}
.global-footer .colophon .join {
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-family: ApexRounded, sans-serif;
font-size: 20px;
padding: 8px 20px;
}
.global-footer .wrapper > .links {
position: relative;
background: #757093;
width: 100%;
height: 47px;
color: #fff;
font-size: 13px;
font-weight: bold;
text-align: right;
line-height: 13px;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
list-style: none;
margin: 0;
padding: 10px 0 0 0;
}
.global-footer .wrapper > .links li {
display: inline;
margin: 0 0 0 3px;
}
.global-footer .wrapper > .links .parents,
.global-footer .wrapper > .links .app {
font-size: 17px;
}
.global-footer .wrapper > .links .fb-like {
position: absolute;
top: 0;
right: 0;
background: #f1eff4;
padding: 4px;
width: 85px;
overflow: hidden;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.global-footer .wrapper > .links .company {
font-size: 15px;
color: #37332e;
display: block;
}
.global-footer .wrapper > .links .company-caption {
display: block;
margin-top: 6px;
text-align: right;
color: #bbb9ca;
}
.global-footer .wrapper > .links a {
font-weight: normal;
font-family: ApexRounded, sans-serif;
background: #696485;
border-bottom: 2px solid #65607f;
padding: 3px 6px;
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.global-footer .wrapper > .links a:hover {
background: #5e5977;
text-decoration: none;
}
.global-footer .wrapper > .links ul.pull-left {
margin-top: 8px;
}
.global-footer .wrapper > .links ul {
text-align: right;
list-style: none;
margin: 0;
padding: 0;
}
.global-footer .wrapper > .links ul li {
display: inline;
margin: 0 0 0 2px;
}
.global-footer .wrapper > .links ul li.big a {
padding: 5px 15px;
}
.global-footer .wrapper > .links .company-caption,
.global-footer .wrapper > .links ul {
margin-right: 105px;
}
.global-footer .wrapper > .links .global-footer-logo {
background: transparent;
border: none;
}
.global-footer .wrapper > .links .global-footer-logo:hover {
background: transparent;
}
.global-footer .wrapper > .links .global-footer-logo img {
width: 40px;
margin-top: -10px;
}
/*! fancyBox v2.1.3 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp {
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #fff;
color: #444;
text-shadow: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}
.fancybox-outer,
.fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image,
.fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
.fancybox-close,
.fancybox-prev span,
.fancybox-next span {
background-image: url('/images/lib/fancybox/fancybox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
opacity: 0.2;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.8) url('/images/www/spinners/45x45_000_FFF.gif') center center no-repeat;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('/images/lib/fancybox/blank.gif');
/* helps IE */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: rgba(0, 0, 0, 0.04);
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent;
/* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, 0.8);
}
/**********************************************************
* Circular Red Close Button *
**********************************************************/
.close-btn {
z-index: 1;
background: #f36b61;
border: 4px solid #f2a39e;
padding: 0.2em;
font-family: ApexRounded, sans-serif;
font-size: 28px;
color: #fff !important;
width: 38px;
height: 38px;
text-align: center;
top: -10px;
right: -10px;
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 9999px;
-moz-border-radius: 9999px;
border-radius: 9999px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.close-btn:hover {
color: #fff !important;
background: #ef4f45;
border-color: #ee8b86;
text-decoration: none;
}
/**********************************************************
* Page Headers *
**********************************************************/
.page-header {
position: relative;
margin: -30px 0 0 0;
padding: 0;
border: 0 none;
min-height: 130px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
*zoom: 1;
}
.page-header:before,
.page-header:after {
display: table;
content: "";
}
.page-header:after {
clear: both;
}
.page-header h1 {
margin: 45px 0 5px 0;
font-size: 48px;
line-height: 48px;
text-align: right;
}
.page-header .subtitle {
text-align: right;
font-family: ApexRounded, sans-serif;
font-size: 18px;
}
.page-header .logo {
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/parents/logo_header.png');
width: 122px;
height: 123px;
margin-top: -30px;
margin: 0 auto;
}
.page-header a.logo:active {
margin-top: -29px;
margin-bottom: -1px;
}
/**********************************************************
* General Layout *
**********************************************************/
body {
text-align: center;
background: #efefef;
}
.inverse-background body {
background-color: #292929;
color: #ffffff;
}
.container {
text-align: left;
padding: 20px 0 190px 0;
}
#top {
position: relative;
height: 40px;
margin-bottom: 20px;
*zoom: 1;
}
#top:before,
#top:after {
display: table;
content: "";
}
#top:after {
clear: both;
}
.top-buttons {
position: absolute;
top: 0;
right: 0;
z-index: 15;
}
.top-buttons .btn-group,
.top-buttons a.btn {
float: left;
}
.top-buttons .btn-group a.btn {
margin-right: 0;
}
.top-buttons a.btn {
margin-right: 10px;
font-weight: bold;
font-size: 18px;
font-family: ApexRounded, sans-serif;
padding: 8px 15px;
margin-right: 15px;
height: 20px;
}
.top-buttons a.btn .avatar {
height: 25px;
vertical-align: middle;
margin: -2px 0 0 -6px;
}
#content {
padding: 0 0 100px 0;
}
/**********************************************************
* Paragraph Styles *
**********************************************************/
.none {
margin: 0;
padding: 25px 0;
font-size: 20px;
font-family: ApexRounded, sans-serif;
line-height: 20px;
color: #aaa;
}
.none:before {
content: ' ';
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/icons/none.png');
width: 25px;
height: 25px;
display: inline-block;
vertical-align: middle;
margin: -2px 10px 0 0;
opacity: 0.2;
filter: alpha(opacity=20);
}
p.alert,
div.alert {
background: #fdfb62;
padding: 15px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
p.alert p,
div.alert p {
margin: 0;
}
/**********************************************************
* Inner / Outer Wrappers *
**********************************************************/
.outer {
text-align: center;
position: relative;
}
.outer .inner {
position: relative;
}
.outer .inner {
width: 960px;
margin: 0 auto;
text-align: left;
*zoom: 1;
}
.outer .inner:before,
.outer .inner:after {
display: table;
content: "";
}
.outer .inner:after {
clear: both;
}
.outer .inner > .nav-tabs {
float: left;
}
.outer .inner > h2 {
margin: 20px 0 10px 0;
}
.outer .inner > h2:first-child {
margin-top: 0;
}
.outer.content > .inner {
padding: 20px 0;
}
.outer.tabs {
margin-top: -70px;
}
.outer.tabs .nav-tabs {
margin-bottom: -1px;
}
/**********************************************************
* Chunklets *
**********************************************************/
.chunklet.loading {
padding: 25px 0;
font-size: 20px;
line-height: 20px;
color: #aaa;
}
.chunklet.loading:before {
background-image: url(/images/www/spinners/45x45_000_FFF.gif);
background-repeat: no-repeat;
background-size: 100%;
content: ' ';
width: 25px;
height: 25px;
display: inline-block;
vertical-align: middle;
margin: -2px 10px 0 0;
opacity: 0.3;
filter: alpha(opacity=30);
}
.content-page .chunklet.loading {
padding: 25px 0 0 0;
text-align: left;
}
/**********************************************************
* Large Modals *
* e.g. flag project, etc *
**********************************************************/
.modal {
-webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
overflow: visible;
}
.modal textarea {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.modal-header {
background: #eaeaea;
padding: 20px 35px;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.modal-header h3 {
color: #5f5f5f;
font-size: 20px;
line-height: 20px;
margin: 0;
}
.modal-header p {
color: #a7a7a7;
font-size: 16px !important;
line-height: 16px !important;
margin: 3px 0 0 0 !important;
}
.modal-header h3,
.modal-header p {
font-family: ApexRounded, sans-serif;
}
.modal .close-btn + .modal-body {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.modal-body {
*zoom: 1;
position: relative;
padding: 25px 35px;
background: #f8f8f8;
color: #7a7a7a;
font-size: 17px;
line-height: 17px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.modal-body:before,
.modal-body:after {
display: table;
content: "";
}
.modal-body:after {
clear: both;
}
.modal-body a {
color: #3290d8 !important;
}
.modal-body a:hover {
color: #1e679f !important;
}
.modal-body label,
.modal-body .control-label {
color: #7a7a7a;
font-size: 18px !important;
line-height: 18px;
margin-bottom: 10px !important;
}
.modal-body label a,
.modal-body .control-label a {
font-size: 14px;
margin-left: 5px;
}
.modal-body label a:before,
.modal-body .control-label a:before {
content: '(';
color: #e2e2e2;
margin-right: 3px;
}
.modal-body label a:after,
.modal-body .control-label a:after {
content: ')';
color: #e2e2e2;
margin-left: 3px;
}
.modal-body input,
.modal-body textarea,
.modal-body select,
.modal-body .uneditable-input {
margin: 0;
}
.modal-body .controls {
margin-bottom: 15px;
}
.modal-body .controls:last-child {
margin-bottom: 0;
}
.modal-body .controls.buttons {
margin-top: 25px;
}
.modal-body .btn,
.modal-body .btn:hover {
color: #fff !important;
}
.modal-body h2 {
color: #2b2b2b;
font-family: ApexRounded, sans-serif;
font-size: 23px !important;
line-height: 23px;
margin: 0 0 15px 0 !important;
}
.modal-body h4 {
color: #2b2b2b;
font-size: 19px;
line-height: 19px;
}
.modal-body h5 {
color: #a7a7a7;
font-size: 13px;
line-height: 13px;
}
.modal-body h4,
.modal-body h5 {
font-family: ApexRounded, sans-serif;
font-weight: normal;
margin-bottom: 15px;
}
.modal-body h4 + h5 {
margin-top: -10px;
}
.modal-body ul,
.modal-body ol {
margin-left: 18px;
margin-bottom: 15px;
}
.modal-body li {
margin-bottom: 5px;
}
.modal-body .sidebar {
float: none;
border-left: 1px solid #ececec;
position: absolute;
top: 0;
right: 0;
bottom: 0;
padding: 25px;
}
.modal-body span.error {
font-size: 16px;
line-height: 16px;
font-weight: normal;
font-family: ApexRounded, sans-serif;
margin: 7px 0 0 0;
}
.modal-body p:last-child {
margin-bottom: 0;
}
.modal-body .small {
font-size: 15px;
line-height: 15px;
}
.modal-body .btn {
padding: 10px 20px 6px 20px;
line-height: 16px;
font-size: 16px;
}
.modal-footer {
background: #f8f8f8;
border-top: 1px solid #e8e8e8;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.modal .buttons .btn,
.modal-footer .btn {
font-size: 20px;
font-weight: normal;
color: #fff;
line-height: 20px;
padding: 13px 30px;
margin-right: 5px;
border-bottom-width: 3px;
}
/**********************************************************
* Mini Modals *
* e.g. reset password, etc *
**********************************************************/
.modal-mini {
background: #f2f2f2;
border: 0 none;
-webkit-box-shadow: 0 10px 70px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 70px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 70px rgba(0, 0, 0, 0.5);
}
.modal-mini .modal-header,
.modal-mini .modal-body,
.modal-mini .modal-footer {
background: none;
border: 0 none;
padding: 10px 20px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.modal-mini .modal-header h3 {
font-family: ApexRounded, sans-serif;
font-size: 24px;
padding: 7px 0 0 0;
color: #27b08b;
}
.modal-mini .modal-body {
max-height: none;
overflow-y: visible;
padding-top: 0;
padding-bottom: 0;
}
.modal-mini .modal-body .control-label {
padding: 0 0 5px 0;
}
.modal-mini .modal-body .control-group:last-child {
margin-bottom: -5px;
}
.modal-mini .modal-footer {
padding-bottom: 20px;
}
.modal-mini .modal-footer .btn {
font-size: 20px;
padding: 5px 12px;
}
/**********************************************************
* Hexagon (generic) *
* *
**********************************************************/
/**********************************************************
* Hexagon Images (patches & tokens) *
* Fills the parent with a properly scaled hex image. *
**********************************************************/
/**********************************************************
* Patch Medallions (tokens) *
* Used to represent to challenges. *
**********************************************************/
/**********************************************************
* Skill Progress Ring *
* *
**********************************************************/
.background-inverse {
background-color: #292929;
}
.background-highlight {
background-color: #fefb94;
}
.background-light {
background-color: #ffffff;
}
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
font-family: ApexRounded, sans-serif;
color: #333333;
font-weight: bold;
}
.inverse-background h1,
.inverse-background h2,
.inverse-background h3,
.inverse-background h4,
.inverse-background .h1,
.inverse-background .h2,
.inverse-background .h3,
.inverse-background .h4 {
color: #ffffff;
}
.lrg-heading {
font-size: 64px;
font-size: 4rem;
line-height: 1;
margin-bottom: 40px;
}
.h1 {
font-size: 32px;
font-size: 2rem;
}
.h2 {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.5;
}
.sml-text {
font-size: 26px;
font-size: 1.625rem;
line-height: 1;
margin-bottom: 10px;
}
.h3 {
line-height: 1;
margin-bottom: 40px;
}
.section-pull {
font-size: 14px;
font-size: 0.875rem;
font-family: ApexRounded, sans-serif;
}
@media screen and (min-width: 30em) {
.h1 {
font-size: 38px;
font-size: 2.375rem;
}
.section-pull {
font-size: 18px;
font-size: 1.125rem;
font-family: ApexRounded, sans-serif;
}
}
@media screen and (min-width: 50em) {
.h1 {
font-size: 45px;
font-size: 2.8125rem;
}
.h2,
html.hq .outer.header .h2 {
font-size: 28px;
font-size: 1.75rem;
}
.h3,
html.hq .outer.header .h3 {
font-size: 24px;
font-size: 1.5rem;
}
}
.h2 .diy-icn,
.h3 .diy-icn {
color: #b3b3b3;
font-size: 28px;
font-size: 1.75rem;
vertical-align: -2px;
}
.muted-text-color {
color: #999999;
}
.inverse-muted-text-color {
color: #c6c6c6;
}
.tight-line {
line-height: 1;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.body-text,
.body-text p {
color: #bbbbbb;
font-family: ApexRounded, sans-serif;
}
.body-text p {
font-size: 18px;
font-size: 1.125rem;
}
.box {
text-align: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.box .box-title {
font-size: 16px;
font-size: 1rem;
margin-bottom: 10px;
}
.box .box-body {
color: #9895a6;
font-size: 18px;
font-size: 1.125rem;
}
.box-highlight {
background: #fff04d;
border-radius: 6px;
-webkit-box-shadow: 0 3px 0 #e6cf5c;
-moz-box-shadow: 0 3px 0 #e6cf5c;
box-shadow: 0 3px 0 #e6cf5c;
}
.box-highlight .info-icn {
position: absolute;
left: 6px;
bottom: 0;
color: rgba(0, 0, 0, 0.4);
font-size: 20px;
font-size: 1.25rem;
}
.box-dialog {
background: #1f1f26;
color: #fff;
font-family: ApexRounded, sans-serif;
}
.box-error {
padding: 27px 10px 27px 70px;
}
.box-error .alert-icn {
color: #696485;
font-size: 40px;
font-size: 2.5rem;
position: absolute;
top: 27px;
left: 20px;
}
.box-padded {
padding: 10px;
}
.box-padded :last-child {
margin: 0;
}
.box-padded-lrg {
padding: 30px;
}
.box-padded-lrg :last-child {
margin: 0;
}
.badge {
position: absolute;
z-index: 1;
padding: 3px 5px 0 5px;
font-weight: bold;
font-size: 16px;
line-height: 1;
box-sizing: border-box;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.badge-default {
background-color: #f9fd5b;
font-weight: normal;
right: 3px;
top: 2px;
}
.notifications-badge {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 26px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
background: #696485;
color: #3f3d4d;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.notifications-badge.notifications-badge-active {
color: #fff04d;
}
.notifications-badge .diy-icn {
padding-top: 1px;
}
.notifications-badge-count {
font-weight: bold;
font-size: 13px;
background: #fff04d;
color: #3f3d4d;
padding: 2px;
top: -6px;
left: 20px;
}
.featured-badge {
font-family: Icons;
display: inline-block;
font-style: normal;
line-height: 78px;
position: relative;
font-weight: normal !important;
}
.featured-badge:before {
content: "&";
font-size: 78px;
color: #ffc000;
}
.featured-badge:after {
content: "P";
color: #fff;
position: absolute;
top: 20px;
left: 11px;
font-size: 21px;
line-height: 21px;
}
.mod-badge-mini {
width: 15px;
height: 15px;
border-radius: 15px;
background: #53f49a;
font-size: 10px;
padding: 3px 3px;
font-family: ApexRounded, sans-serif;
}
hr {
display: block;
clear: both;
width: 100%;
height: 8px;
background-image: url(/images/www/pages/gra_hr_background.gif);
background-repeat: repeat-x;
background-position: -12px 0px;
margin: 0;
padding: 0 0 10px 0;
border: none;
outline: none;
}
.btn {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
font-weight: bold;
}
.btn-sml {
padding: 5px 6px 3px 6px;
}
.btn-sml .diy-icn,
.btn-sml .label {
line-height: 1 !important;
padding: 0 !important;
}
.btn-full-width {
width: 100%;
}
.btn-transparent,
.btn-transparent:hover {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
}
.btn .label,
.btn-context,
.btn .diy-icn {
font-size: 18px;
font-size: 1.125rem;
line-height: 1;
padding: .2em 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
text-align: center;
vertical-align: middle;
}
.btn .btn-label-padded {
padding: .2em .5em 0;
}
.btn-padded {
padding: .6em;
}
.btn-context {
min-width: 30px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 3px;
margin-bottom: -0.1em;
padding: .2em .2em 0;
}
.btn-lowlight-text {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
font-size: 0.875rem;
}
.btn-active-on-hover .btn {
background: rgba(0, 0, 0, 0.2);
color: #fff;
border-color: transparent;
}
.btn-reveal-on-hover .btn {
opacity: 0;
transition: opacity 0.08s ease-in-out;
}
.btn-reveal-on-hover:hover .btn {
opacity: 1;
}
.btn .diy-icn {
font-size: 20px;
font-size: 1.25rem;
display: inline-block;
width: 24px;
height: 24px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
vertical-align: top;
position: absolute;
}
.btn > .diy-icn ~ .label {
margin-left: 24px;
}
.btn > .fork-icn ~ .label {
margin-left: 18px;
}
.btn-icn-only,
.btn-active-on-hover .btn-icn-only {
color: rgba(0, 0, 0, 0.2);
font-size: 24px;
font-size: 1.5rem;
font-weight: normal;
padding: 6px 6px 3px 6px;
min-width: 33px;
text-align: center;
}
.btn-icn-only .diy-icn,
.btn-active-on-hover .btn-icn-only .diy-icn {
line-height: 1;
padding: 0;
width: auto;
height: auto;
position: relative;
}
.btn .skull-icn,
.btn .paw-icn {
font-size: 24px;
font-size: 1.5rem;
}
.btn .edit-icn,
.btn .delete-icn {
font-size: 22px;
font-size: 1.375rem;
font-weight: normal;
margin-top: 1px;
}
.btn .favorite-icn,
.btn .share-icn {
margin-top: 2px;
}
.btn-danger.btn-icn-only:hover {
color: #de9b1d;
}
.btn-left {
margin-left: 1em;
}
.btn-right {
margin-right: 1em;
}
.avatar img,
.avatar-anonymous {
border-radius: 2px;
}
.avatar-anonymous {
background: #b5b5b5;
position: relative;
display: inline-block;
}
.avatar-anonymous:before {
font-family: Icons;
display: inline-block;
font-style: normal;
content: "X";
color: #fff;
position: absolute;
bottom: 14px;
line-height: 0;
}
.avatar-anonymous.avatar-xsml {
width: 50px;
height: 50px;
}
.avatar-anonymous.avatar-xsml:before {
font-size: 40px;
}
.avatar-anonymous.avatar-xxsml {
width: 30px;
height: 30px;
}
.avatar-anonymous.avatar-xxsml:before {
font-size: 32px;
bottom: 12px;
left: 0;
}
.avatar img {
max-width: 100%;
cursor: pointer;
}
.avatar-sml {
width: 60px;
display: inline-block;
}
.avatar-xsml {
width: 50px;
display: inline-block;
}
.avatar-med {
width: 100px;
}
.diy-icn {
display: inline-block;
}
.diy-icn:before {
font-family: Icons;
display: inline-block;
font-style: normal;
font-weight: normal !important;
}
.cog-icn:before {
content: 'E';
}
.paw-icn:before {
content: 'Z';
}
.comment-icn:before {
content: '>';
}
.favorite-icn:before {
content: 'D';
}
.favorite-active-icn:before {
color: #fd4d44;
}
.badge-icn:before {
content: 'K';
}
.share-icn:before {
content: "+";
}
.fork-icn:before {
content: "A";
font-size: 24px;
font-size: 1.5rem;
}
.play-icn:before {
content: "G";
}
.edit-icn:before {
content: "Q";
}
.delete-icn:before {
content: "U";
}
.skull-icn:before {
content: "`";
}
.reply-icn:before {
content: "M";
}
.emoji-icn:before {
content: "9";
}
.send-icn:before {
content: "^";
}
.how-to-icn:before {
content: ",";
}
.book-icn:before {
content: ")";
}
.stream-icn:before {
content: ".";
}
.tri-hex-icn:before {
content: "L";
}
.tri-group-icn:before {
content: "8";
}
.explore-icn:before {
content: "P";
}
.blog-icn:before {
content: "/";
}
.portfolio-icn:before {
content: "N";
font-size: 26px;
}
.maker-icn:before {
content: "X";
}
.photos-icn:before {
content: "H";
}
.power-icn:before {
content: "(";
font-size: 34px;
}
.check-icn:before {
content: "T";
}
.lock-icn:before {
content: "<";
}
.lightning-icn:before {
content: "%";
}
.link-icn:before {
content: "+";
}
.search-icn:before {
content: "C";
}
.close-icn:before,
.error-icn:before {
content: "\\";
}
.alert-icn:before {
content: "-";
}
.pizza-icn:before {
content: "]";
}
.info-icn:before {
content: "0";
}
.stories .media .media-object {
float: left;
position: relative;
}
.stories .media .media-object-extension {
float: right;
}
.stories .media .bd {
overflow: hidden;
_overflow: visible;
zoom: 1;
}
.inline-list {
margin: 0;
list-style: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.inline-list li {
display: inline-block;
vertical-align: top;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.inline-avatar-list {
text-align: center;
}
.inline-avatar-list > li {
width: 25%;
box-sizing: border-box;
}
.inline-avatar-list .avatar {
width: 60%;
display: block;
padding: .4em;
margin: auto;
border-radius: 3px;
}
.inline-avatar-list img {
margin: auto;
width: 100%;
height: 100%;
}
.maker-list {
font-family: ApexRounded, sans-serif;
font-weight: bold;
}
.maker-list li {
width: 50%;
margin-bottom: 10px;
}
.maker-list .media-body {
margin-left: 30px;
}
.maker-list .avatar {
position: relative;
}
.maker-list .mod-badge-mini {
right: -6px;
margin-top: -9px;
color: #333;
}
.maker-list .nickname {
display: inline-block;
padding: 5px 5px 0 5px;
width: 95%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.maker-list .anonymous-maker {
pointer-events: none;
}
.maker-list .anonymous-maker .media-body {
margin-left: 0;
}
.maker-list .anonymous-maker .nickname {
width: auto;
color: #a5a5a5;
}
.inline-maker-list li {
width: auto;
margin-right: 10px;
}
.inline-maker-list .nickname {
width: 100%;
}
.plain-list {
list-style: none;
margin: 0;
padding: 0;
}
.plain-list li {
margin: 0;
}
.linked-list {
font-family: ApexRounded, sans-serif;
}
.linked-list .linked-item {
font-size: 20px;
font-size: 1.25rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background-color: #eaf4fb;
padding: .6em;
display: block;
border-radius: 3px;
}
.linked-list--fixed li {
margin: 0 20px 10px 0;
}
.linked-list--fixed li:nth-child(4n) {
margin-right: 0;
}
.linked-list--fixed .linked-item {
width: 220px;
}
.achievements-list {
*zoom: 1;
}
.achievements-list:before,
.achievements-list:after {
display: table;
content: "";
}
.achievements-list:after {
clear: both;
}
.achievements-list li {
*zoom: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 15px 20px;
position: relative;
}
.achievements-list li:before,
.achievements-list li:after {
display: table;
content: "";
}
.achievements-list li:after {
clear: both;
}
.achievements-list li .skill-medallion {
top: -5px;
}
.achievements-list li .skill-medallion.achievement-badge:before {
left: 0;
font-size: 80px;
}
.achievements-list li:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.achievements-list li:hover {
background: #2f93dc;
}
.achievements-list li:hover .challenge-title {
color: #fff;
}
.achievements-list .media-body {
text-align: left;
min-height: 60px;
display: table;
padding-left: 15px;
}
.achievements-list .challenge-title {
display: table-cell;
vertical-align: middle;
font-family: ApexRounded, sans-serif;
font-size: 18px;
font-size: 1.125rem;
color: #2f93dc;
font-weight: bold;
}
.comments-list {
margin: 0;
list-style: none;
}
.comments-list li {
margin: 0;
}
.comments-list .comment-body {
margin-bottom: 0.7em;
}
.comments-list .replies {
margin-left: 70px;
}
.comment-body {
background: #fff;
margin-left: 70px;
padding: 15px 10px 15px 20px;
border-radius: 4px;
position: relative;
}
.comment-body .message {
word-wrap: break-word;
}
.comment-read > .comment-body {
padding-right: 55px;
}
.comment-body:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.comment-body:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 13px;
top: 0;
margin-top: 12px;
}
.maker-comment > .comment-body {
background-color: #f8fcff;
}
.maker-comment .comment-body:after {
border-right-color: #f8fcff;
}
.active-comment > .comment-body {
background-color: #feffdb;
}
.active-comment .comment-body:after {
border-right-color: #feffdb;
}
.comment-actions {
width: 30px;
text-align: right;
position: absolute;
right: 10px;
top: 10px;
bottom: 10px;
}
.comment-actions .btn {
position: absolute;
right: 0;
}
.comment-actions .btn-danger,
.comment-actions .btn-edit {
top: 0;
right: -1px;
}
.comment-actions .btn-reply {
bottom: 0;
}
.comment-editor {
float: none !important;
margin-bottom: 20px;
}
.comment-editor .meta {
margin-top: 0;
margin-bottom: 10px;
}
.comment-editor .btn.emoji:after {
content: '9';
margin: 1px 0 0 -1px;
}
.comment-editor .btn.save:before {
display: inline-block;
vertical-align: middle;
margin: -1px 2px -2px 0;
font-size: 20px;
font-family: Icons;
content: '^';
}
.comment-editor .delete {
font-size: 15px;
float: right;
margin-top: 6px;
margin-right: 8px;
display: block;
}
.comment-editor textarea,
.comment-editor .emoji-wysiwyg-editor {
margin: 0 0 10px 0;
height: 68px;
font-size: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
height: 150px;
}
.scorecard,
.scorecard-naked {
width: 40px;
height: 60px;
display: inline-block;
text-align: center;
font-size: 1.2rem;
padding-top: 9px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
.scorecard .diy-icn,
.scorecard-naked .diy-icn {
display: block;
font-size: 25px;
font-size: 1.5625rem;
}
.scorecard {
background: #ddd;
border-radius: 3px;
color: #949494;
}
.achievement-badge {
font-size: 25px;
font-size: 1.5625rem;
position: relative;
width: 54px;
margin-right: -2px;
height: 60px;
display: block;
}
.achievement-badge .achievement-content {
color: #fff;
position: absolute;
top: 20px;
left: 12px;
font-family: ApexRounded, sans-serif;
font-weight: bold;
}
.achievement-badge.achivement-badge-sml {
font-size: 20px;
}
.achievement-badge.achivement-badge-sml:before {
font-size: 70px;
}
.achievement-badge:before {
position: absolute;
font-size: 78px;
font-size: 4.875rem;
top: 20px;
left: -1px;
color: #00d3a3;
}
.skill-medallion {
position: relative;
text-align: left;
width: 57px;
height: 67px;
display: inline-block;
}
.skill-medallion:before {
content: 'K';
font-family: Icons;
color: #d5d5d5;
margin: 0;
font-size: 82px;
line-height: 82px;
display: block;
position: absolute;
top: -6px;
left: -1px;
z-index: 0;
}
.skill-medallion * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
.skill-medallion.approved:before {
color: #00cd9f;
}
.skill-medallion.rejected:before {
color: #fd4d10;
}
.skill-medallion.pending:after,
.skill-medallion.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
.skill-medallion.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
.skill-medallion.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
.achievement .skill {
position: relative;
text-align: left;
width: 70px;
height: 82px;
display: inline-block;
margin: 0 0 8px 4px;
}
.achievement .skill:before {
content: 'K';
font-family: Icons;
color: rgba(0, 0, 0, 0);
margin: 0;
font-size: 100px;
line-height: 100px;
display: block;
position: absolute;
top: -8px;
left: -1px;
z-index: 0;
}
.achievement .skill * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
.achievement .skill.approved:before {
color: #00cd9f;
}
.achievement .skill.rejected:before {
color: #fd4d10;
}
.achievement .skill.pending:after,
.achievement .skill.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
.achievement .skill.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
.achievement .skill.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
.achievement .skill:before {
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.achievement-featured {
background: url(/images/www/awards/featured.png) -1px center no-repeat;
width: 51px;
height: 63px;
display: block;
}
.skill-achievement-list li {
margin: 0 10px 0 10px;
position: relative;
}
.skill-achievement-list li:first-child {
margin-left: 0;
}
.skill-achievement-list li:last-child {
margin-right: 0;
}
.skill-achievement-list .achievement-goal-item {
margin: 0 20px 0 0;
width: 140px;
}
.skill-achievement-list .achievement-goal-item .achievement-goal {
top: -10px;
position: absolute;
}
.skill-achievement-list .achievement-goal-item .achievement-img .inner-wrapper {
margin-top: 7px;
border: 3px solid white;
}
.skill-achievement-list .achievement-goal-item .achievement-img .goal-text {
top: 5px;
}
.achievement-box {
width: 140px;
height: 93px;
text-align: center;
font-size: 44px;
font-size: 2.75rem;
font-family: ApexRounded, sans-serif;
}
.achievement-placeholder {
border: 3px dashed rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.4);
display: table-cell;
vertical-align: middle;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.achievement-placeholder .achievement-text {
display: inline-block;
position: relative;
margin-bottom: -5px;
}
.achievement-img .inner-wrapper {
display: inline-block;
overflow: hidden;
height: 93px;
}
.achievement-img img {
max-width: 100%;
}
.achievement-goal {
background: #dbdbdb;
position: relative;
width: 160px;
height: 135px;
}
.achievement-goal .goal-text {
display: block;
position: relative;
top: 29px;
font-size: 18px;
font-size: 1.125rem;
font-weight: bold;
color: #fff;
}
.achievement-goal:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -50px;
height: 50px;
display: block;
background: linear-gradient(135deg, #dbdbdb 25%, transparent 25%) -30px 0, linear-gradient(225deg, #dbdbdb 25%, transparent 25%) -30px 0, linear-gradient(315deg, transparent 25%, transparent 25%), linear-gradient(45deg, transparent 25%, transparent 25%);
background-size: 20px 30px;
background-repeat: repeat-x;
}
.achievement-goal .skill-medallion {
top: 17px;
position: relative;
text-align: left;
width: 70px;
height: 82px;
display: inline-block;
}
.achievement-goal .skill-medallion:before {
content: 'K';
font-family: Icons;
color: #ffffff;
margin: 0;
font-size: 100px;
line-height: 100px;
display: block;
position: absolute;
top: -8px;
left: -1px;
z-index: 0;
}
.achievement-goal .skill-medallion * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
.achievement-goal .skill-medallion.approved:before {
color: #00cd9f;
}
.achievement-goal .skill-medallion.rejected:before {
color: #fd4d10;
}
.achievement-goal .skill-medallion.pending:after,
.achievement-goal .skill-medallion.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
.achievement-goal .skill-medallion.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
.achievement-goal .skill-medallion.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
.achievement-goal .skill-medallion * {
text-indent: 0;
}
.achievement-goal .skill-medallion .skill-text {
position: absolute;
top: 23px;
left: 23px;
line-height: 1;
color: #dbdbdb;
}
.achievement-goal.achievement-goal--approved {
background: #00d3a3;
}
.achievement-goal.achievement-goal--approved:after {
background: linear-gradient(135deg, #00d3a3 25%, transparent 25%) -30px 0, linear-gradient(225deg, #00d3a3 25%, transparent 25%) -30px 0, linear-gradient(315deg, transparent 25%, transparent 25%), linear-gradient(45deg, transparent 25%, transparent 25%);
background-size: 20px 30px;
background-repeat: repeat-x;
}
.achievement-goal.achievement-goal--approved .skill-medallion .skill-text {
color: #00d3a3;
}
.blank {
position: relative;
text-align: left;
width: 254px;
height: 297px;
display: inline-block;
position: absolute;
top: -4px;
left: 0;
z-index: 0;
}
.blank:before {
content: 'K';
font-family: Icons;
color: #313131;
margin: 0;
font-size: 363px;
line-height: 363px;
display: block;
position: absolute;
top: -28px;
left: -5px;
z-index: 0;
}
.blank * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
.blank.approved:before {
color: #00cd9f;
}
.blank.rejected:before {
color: #fd4d10;
}
.blank.pending:after,
.blank.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
.blank.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
.blank.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
.blank:hover:before {
color: #ff9900;
}
.odd {
left: 130px;
}
.row2 {
top: -80.75px;
}
.row3 {
top: -161.5px;
}
.skill-patch-grid {
background-color: #313131;
background-image: url('/images/www/skill/hex-grid-sml2.png');
background-position: center;
position: relative;
overflow: hidden;
}
.skill-patch-grid .patch {
position: absolute;
top: 50%;
margin-top: -146px;
left: 50%;
margin-left: -126.5px;
opacity: .5;
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.1s ease-in-out;
-webkit-backface-visibility: hidden;
}
.skill-patch-grid .patch a {
display: block;
width: 253px;
height: 291px;
line-height: 0;
z-index: 1;
position: relative;
}
.skill-patch-grid .patch.hero-patch {
z-index: 2;
opacity: 1;
}
.skill-patch-grid .patch.hero-patch .blank {
text-shadow: 0 0 80px rgba(0, 0, 0, 0.8);
}
.skill-patch-grid .patch.loading {
-webkit-transform: translate3d(0, 0, 0) scale3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.1s ease-in-out;
opacity: 0;
}
.skill-patch-grid .patch.hover {
opacity: 1;
-webkit-transform: translate3d(0, -4px, 0) scale3d(1, 1, 1);
}
.skill-patch-grid-inset:before {
pointer-events: none;
content: "";
height: 10px;
width: 120%;
position: absolute;
top: 0;
left: -10%;
background-color: black;
opacity: 0.2;
z-index: 6;
}
.skill-patch-grid-inset:after {
pointer-events: none;
content: "";
height: 20px;
width: 120%;
position: absolute;
bottom: 0;
left: -10%;
background-color: black;
opacity: 0.2;
z-index: 5;
}
.summary-card {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background, 0.2s, ease-in-out;
-moz-transition: background, 0.2s, ease-in-out;
-o-transition: background, 0.2s, ease-in-out;
-ms-transition: background, 0.2s, ease-in-out;
transition: background, 0.2s, ease-in-out;
position: relative;
height: 412px;
text-align: left;
background: #f5f5f5;
}
.summary-card:after {
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
height: 30px;
content: "";
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #f7f7f7 77%, #f5f5f5 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(77%, #f7f7f7), color-stop(100%, #f5f5f5));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #f7f7f7 77%, #f5f5f5 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #f7f7f7 77%, #f5f5f5 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #f7f7f7 77%, #f5f5f5 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f7f7f7 77%, #f5f5f5 100%);
/* W3C */
opacity: 1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#f5f5f5', GradientType=0);
/* IE6-9 */
}
.summary-card .inner-wrapper {
overflow: hidden;
max-height: 412px;
}
.summary-card:hover {
background: #fff;
}
.summary-card:hover .summary-content {
-webkit-transform: translate3d(0, -40px, 0);
-moz-transform: translate3d(0, -40px, 0);
-ms-transform: translate3d(0, -40px, 0);
-o-transform: translate3d(0, -40px, 0);
transform: translate3d(0, -40px, 0);
background: #fff;
}
.summary-card:hover .summary-media {
-webkit-transform: scale(1.08);
-moz-transform: scale(1.08);
-ms-transform: scale(1.08);
-o-transform: scale(1.08);
transform: scale(1.08);
}
.summary-card:hover:after {
opacity: 0;
}
.summary-media {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform .2s cubic-bezier(0.860, 0.000, 0.070, 1.000);
-moz-transition: -moz-transform .2s cubic-bezier(0.860, 0.000, 0.070, 1.000);
-o-transition: -o-transform .2s cubic-bezier(0.860, 0.000, 0.070, 1.000);
-ms-transition: -ms-transform .2s cubic-bezier(0.860, 0.000, 0.070, 1.000);
transition: transform .2s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
.summary-content {
-webkit-transition: -webkit-transform .2s cubic-bezier(0.860, 0.000, 0.070, 1.000), background .2s ease-in-out;
-moz-transition: -moz-transform .2s cubic-bezier(0.860, 0.000, 0.070, 1.000), background .2s ease-in-out;
-o-transition: -o-transform .2s cubic-bezier(0.860, 0.000, 0.070, 1.000), background .2s ease-in-out;
-ms-transition: -ms-transform .2s cubic-bezier(0.860, 0.000, 0.070, 1.000), background .2s ease-in-out;
transition: transform .2s cubic-bezier(0.860, 0.000, 0.070, 1.000), background .2s ease-in-out;
}
.summary-media {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
overflow: hidden;
height: 248px;
}
.summary-media img {
min-width: 100%;
}
.summary-card .summary-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: relative;
z-index: 1;
padding: 15px;
min-height: 300px;
background: #f5f5f5;
}
.summary-card .summary-content p {
font-size: 16px;
font-size: 1rem;
color: #666666;
line-height: 1.3;
}
@-webkit-keyframes flip-hover {
50% {
-webkit-transform: translate3d(0, -40px, 0);
-moz-transform: translate3d(0, -40px, 0);
-ms-transform: translate3d(0, -40px, 0);
-o-transform: translate3d(0, -40px, 0);
transform: translate3d(0, -40px, 0);
}
100% {
-webkit-transform: translate3d(0, -30px, 0);
-moz-transform: translate3d(0, -30px, 0);
-ms-transform: translate3d(0, -30px, 0);
-o-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
}
@-webkit-keyframes shadow-pulse {
50% {
-webkit-transform: scale3d(0.8, 0.8, 0);
-moz-transform: scale3d(0.8, 0.8, 0);
-o-transform: scale3d(0.8, 0.8, 0);
-ms-transform: scale3d(0.8, 0.8, 0);
transform: scale3d(0.8, 0.8, 0);
opactiy: 1;
}
100% {
-webkit-transform: scale3d(0.5, 0.5, 0);
-moz-transform: scale3d(0.5, 0.5, 0);
-o-transform: scale3d(0.5, 0.5, 0);
-ms-transform: scale3d(0.5, 0.5, 0);
transform: scale3d(0.5, 0.5, 0);
opacity: .8;
}
}
.challenge-summary-card .summary-content {
padding-left: 90px;
padding-bottom: 4px;
}
.challenge-summary-card .summary-content .challenge-desc {
font-size: 14.5px;
font-size: 0.90625rem;
}
.challenge-summary-card .summary-content .skill-medallion-wrapper {
-webkit-transition: -webkit-transform .2s cubic-bezier(0.860, 0.000, 0.070, 1.000);
-moz-transition: -moz-transform .2s cubic-bezier(0.860, 0.000, 0.070, 1.000);
-o-transition: -o-transform .2s cubic-bezier(0.860, 0.000, 0.070, 1.000);
-ms-transition: -ms-transform .2s cubic-bezier(0.860, 0.000, 0.070, 1.000);
transition: transform .2s cubic-bezier(0.860, 0.000, 0.070, 1.000);
position: absolute;
top: -20px;
left: 5px;
padding: 5px;
}
.challenge-summary-card .summary-content .skill-medallion-border {
position: relative;
text-align: left;
width: 67px;
height: 78px;
display: inline-block;
}
.challenge-summary-card .summary-content .skill-medallion-border:before {
content: 'K';
font-family: Icons;
color: #f5f5f5;
margin: 0;
font-size: 96px;
line-height: 96px;
display: block;
position: absolute;
top: -7px;
left: -1px;
z-index: 0;
}
.challenge-summary-card .summary-content .skill-medallion-border * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
.challenge-summary-card .summary-content .skill-medallion-border.approved:before {
color: #00cd9f;
}
.challenge-summary-card .summary-content .skill-medallion-border.rejected:before {
color: #fd4d10;
}
.challenge-summary-card .summary-content .skill-medallion-border.pending:after,
.challenge-summary-card .summary-content .skill-medallion-border.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
.challenge-summary-card .summary-content .skill-medallion-border.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
.challenge-summary-card .summary-content .skill-medallion-border.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
.challenge-summary-card .summary-content .skill-medallion-border:before {
-webkit-transition: color .2s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: color .2s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: color .2s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: color .2s cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: color .2s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.challenge-summary-card .summary-content .skill-medallion {
position: absolute;
top: 10px;
left: 10px;
}
.challenge-summary-card .summary-content .skill-medallion .skill-text {
font-size: 28px;
font-size: 1.75rem;
position: absolute;
top: 18px;
left: 11px;
color: #fff;
text-indent: 0;
font-weight: bold;
line-height: 1;
}
.challenge-summary-card .summary-content .medallion-shadow {
-webkit-transform: scale3d(0.5, 0.5, 0);
-moz-transform: scale3d(0.5, 0.5, 0);
-o-transform: scale3d(0.5, 0.5, 0);
-ms-transform: scale3d(0.5, 0.5, 0);
transform: scale3d(0.5, 0.5, 0);
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
position: absolute;
top: 35px;
left: 10px;
display: block;
width: 67px;
height: 1px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
opacity: 0;
}
.challenge-summary-card > a {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
}
.challenge-summary-card .label {
position: absolute;
background: #333;
padding: 10px;
right: -5px;
top: 20px;
font-weight: bold;
line-height: 1;
}
.challenge-summary-card .difficulty-label {
text-align: center;
background: #ffc000;
width: 44px;
-webkit-transition: width .2s ease-in-out;
-moz-transition: width .2s ease-in-out;
-ms-transition: width .2s ease-in-out;
-o-transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
color: white;
}
.challenge-summary-card .difficulty-label:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 17px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 17px solid transparent;
border-right: 12px solid #ffc000;
position: absolute;
top: 0;
right: 100%;
z-index: 2;
}
.challenge-summary-card .difficulty-label--medium {
background: #ffbb1c;
}
.challenge-summary-card .difficulty-label--medium:before {
border-right-color: #ffbb1c;
}
.challenge-summary-card .difficulty-label--hard {
background: #de5d41;
}
.challenge-summary-card .difficulty-label--hard:before {
border-right-color: #de5d41;
}
.challenge-summary-card:hover .skill-medallion-wrapper {
-webkit-transform: translate3d(0, -30px, 0);
-moz-transform: translate3d(0, -30px, 0);
-ms-transform: translate3d(0, -30px, 0);
-o-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
-webkit-animation: flip-hover 1.2s cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite .2s;
-moz-animation: flip-hover 1.2s cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite .2s;
-o-animation: flip-hover 1.2s cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite .2s;
-ms-animation: flip-hover 1.2s cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite .2s;
animation: flip-hover 1.2s cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite .2s;
}
.challenge-summary-card:hover .skill-medallion-border:before {
color: #fff;
}
.challenge-summary-card:hover .medallion-shadow {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: shadow-pulse 1.2s cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite .2s;
-moz-animation: shadow-pulse 1.2s cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite .2s;
-o-animation: shadow-pulse 1.2s cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite .2s;
-ms-animation: shadow-pulse 1.2s cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite .2s;
animation: shadow-pulse 1.2s cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite .2s;
opacity: .8;
}
.hide-visually {
position: absolute;
top: -9999px;
left: -9999px;
}
.zero-count {
display: none;
visibility: hidden;
}
.floating-tabs li {
margin-right: 20px;
line-height: 1;
text-align: center;
}
.floating-tabs a,
.floating-tabs .active {
display: inline-block;
border-radius: 3px;
padding: 13px 18px;
border: 2px solid #cee1f0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.floating-tabs a:hover,
.floating-tabs a:active {
background-color: #288ed7;
border-color: #288ed7;
color: #fff;
}
.floating-tabs .active {
background-color: #2f2f2f;
border-color: #2f2f2f;
color: #fff;
}
.notifications-tab {
width: 70px;
height: 80px;
display: table-cell;
vertical-align: middle;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background 0.2s ease-in-out;
-moz-transition: background 0.2s ease-in-out;
-ms-transition: background 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}
.notifications-tab.tab-item-active,
.notifications-tab:hover {
background: #3f3d4d;
}
.notifications-tab .tab-content {
position: relative;
width: 30px;
height: 30px;
margin: auto;
}
.section-tabs {
background: #efefef;
font-size: 18px;
font-size: 1.125rem;
display: inline-block;
padding: 10px 10px 0 10px;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
font-weight: bold;
}
.section-tabs .tab-item {
font-family: ApexRounded, sans-serif;
text-align: center;
margin-right: 10px;
display: inline-block;
position: relative;
}
.section-tabs .tab-item:last-child {
margin-right: 0;
}
.section-tabs .tab-item a {
min-width: 150px;
display: inline-block;
background: #fff;
color: #b4b4b1;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 4px solid #e6e6e6;
border-radius: 4px;
}
.section-tabs .tab-item a:hover {
border-color: #c8c8c8;
}
.section-tabs .tab-item .diy-icn:before {
font-size: 24px !important;
font-size: 1.5rem;
position: absolute;
margin-top: -17px;
}
.section-tabs .tab-item.tab-item-stream .text {
padding-left: 35px;
}
.section-tabs .tab-item.tab-item-forks .text {
padding-left: 15px;
}
.section-tabs .tab-item-active a,
.section-tabs .tab-item-active a:hover {
border: 4px solid #949494;
background: #949494;
color: #fff;
}
.inverse-tooltip {
background: rgba(0, 0, 0, 0.5);
color: #fff;
}
.inverse-tooltip:before {
border-color: transparent transparent rgba(0, 0, 0, 0.5) transparent;
}
.popover.bottom .arrow,
.popover.top .arrow {
border-bottom-color: #666;
}
.popover-inner {
padding: .6em 0 0;
background: #666;
}
.sml-padding {
padding: 0.7em;
}
.med-padding {
padding: 1.4em;
}
.lrg-padding {
padding: 1.75em;
}
.xx-lrg-padding {
padding: 2em;
}
.sml-padding-v {
padding: 0.7em 0;
}
.med-padding-v {
padding: 1.4em 0;
}
.lrg-padding-v {
padding: 1.75em 0;
}
.lrg-padding-l {
padding-left: 1.75em;
}
.sml-margin-v {
margin: 0.7em 0;
}
.sml-margin-l {
margin-left: 0.7em;
}
.sml-margin-r {
margin-right: 0.7em;
}
.sml-margin-b {
margin-bottom: 0.7em;
}
.med-margin-v {
margin: 1.4em 0;
}
.med-margin-b {
margin-bottom: 1.4em;
}
.lrg-margin-v {
margin: 1.75em 0;
}
.gallery-grid li img,
.gallery-grid li video {
max-width: 100%;
}
.gallery-grid li {
overflow: hidden;
margin: 0;
margin-bottom: 20px;
}
.gallery-grid .media-wrapper {
max-width: 100%;
max-height: 100%;
height: 100%;
}
.gallery-grid .size1 .media-wrapper {
height: 640px;
}
.gallery-grid .size2 {
width: 50%;
height: 320px;
}
.gallery-grid .size3 {
width: 33.33%;
height: 200px;
}
.gallery-grid li:first-child {
width: 100%;
}
.gallery-grid li:first-child .media-wrapper {
margin-left: 0;
margin-right: 0;
}
.gallery-grid .media-wrapper {
margin-right: 20px;
}
.gallery-grid .range-end .media-wrapper {
margin-right: 0;
}
.gallery-grid .media-wrapper {
border-radius: 2px;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.gallery-grid .media-wrapper > a > img {
opacity: 0;
}
.global-header {
background: #1f1f26;
color: #ffffff;
font-size: 20px;
font-family: ApexRounded, sans-serif;
height: 80px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: block;
z-index: 1000;
position: relative;
}
.global-header .content-wrapper {
width: 980px;
height: 80px;
margin: auto;
}
.global-header .content-wrapper > .global-nav {
float: right;
}
.tv-bar li {
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
.tv-bar li:hover {
background-color: #3f3d4d;
}
.tv-bar a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
position: relative;
overflow: hidden;
}
.tv-bar a:before,
.tv-bar a:after {
content: "";
position: absolute;
background: #1f1f26;
transition: background 0.1s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.1s ease-in-out;
-moz-transition: -moz-transform 0.1s ease-in-out;
transition: transform 0.1s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
.tv-bar.horizontal-tv-bar .nav-item-active {
background-color: #15151a;
background-image: -moz-linear-gradient(top, #696485, #696485 5px, #15151a 5px);
background-image: -webkit-linear-gradient(top, #696485, #696485 5px, #15151a 5px);
/* Chrome10+,Safari5.1+ */
background-image: linear-gradient(top, #696485, #696485 5px, #15151a 5px);
}
.tv-bar.horizontal-tv-bar a:hover {
background-color: #3f3d4d;
}
.tv-bar.vertical-tv-bar .nav-item-active {
background-color: #15151a;
background-image: -moz-linear-gradient(top, #696485, #696485 5px, #15151a 5px);
background-image: -webkit-linear-gradient(top, #696485, #696485 5px, #15151a 5px);
/* Chrome10+,Safari5.1+ */
background-image: linear-gradient(top, #696485, #696485 5px, #15151a 5px);
}
.tv-bar.vertical-tv-bar a:hover {
background-color: #3f3d4d;
}
.global-nav .nav-item-active,
.nav-fat .nav-item-active {
color: #ffffff;
}
.global-nav .nav-item-active .global-nav-icn,
.nav-fat .nav-item-active .global-nav-icn {
color: #696485;
}
.global-nav .nav-item a,
.nav-fat .nav-item a {
color: #ffffff;
transition: background 0.08s ease-in-out, color 0.08s ease-in-out;
}
.global-nav .nav-item a .global-nav-icn,
.nav-fat .nav-item a .global-nav-icn {
transition: color 0.08s ease-in-out;
}
.global-nav .nav-item a:hover,
.nav-fat .nav-item a:hover {
color: #ffffff;
}
.global-nav .nav-item a:hover .global-nav-icn,
.nav-fat .nav-item a:hover .global-nav-icn {
color: #696485;
}
.global-nav .nav-item a:active,
.nav-fat .nav-item a:active {
background: #15151a;
}
.global-nav .nav-item a:active:after,
.nav-fat .nav-item a:active:after {
background: #696485;
}
.global-nav .nav-item-join a,
.nav-fat .nav-item-join a {
color: #1bc7a2;
}
.global-nav .nav-item-join a .text,
.nav-fat .nav-item-join a .text {
font-weight: bold;
}
.global-nav .nav-item-join a .diy-icn,
.nav-fat .nav-item-join a .diy-icn {
color: #1bc7a2;
}
.global-nav .global-nav-icn,
.nav-fat .global-nav-icn {
color: #696485;
line-height: 0;
position: relative;
}
.global-nav-fat,
.nav-fat {
overflow: hidden;
height: 80px;
}
.global-nav-fat .nav-item,
.nav-fat .nav-item {
position: relative;
}
.global-nav-fat .nav-item a,
.nav-fat .nav-item a {
padding: 0 20px 0 20px;
height: 80px;
line-height: 80px;
}
.global-nav-fat .global-nav-icn,
.nav-fat .global-nav-icn {
font-size: 28px;
top: 3px;
margin-right: 5px;
line-height: 1;
}
.lt-ie9 .global-nav-fat .global-nav-icn,
.lt-ie9 .nav-fat .global-nav-icn,
.ie9 .global-nav-fat .global-nav-icn,
.ie9 .nav-fat .global-nav-icn {
top: 3px;
line-height: 0;
}
.global-nav-fat .global-nav-icn.stream-icn,
.nav-fat .global-nav-icn.stream-icn {
margin-right: 0;
}
.user-controls {
float: left;
margin: 10px;
position: relative;
}
.user-controls .maker-name {
font-weight: bold;
margin-left: 20px;
color: #fff;
}
.user-controls .maker-name:hover {
color: #fff;
}
.user-controls-popover {
z-index: 1000;
position: absolute;
width: 240px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background: #1f1f26;
border-radius: 3px;
top: 65px;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
-webkit-transition: visibility 0.01s linear 0.01s, -webkit-transform 0.12s ease-in-out 0.05s, opacity 0.2s ease-in-out 0.05s;
transition: visibility 0.01s linear 0.01s, transform 0.12s ease-in-out 0.05s, opacity 0.2s ease-in-out 0.05s;
}
.user-controls-popover:after,
.user-controls-popover:before {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.user-controls-popover:after {
border-width: 10px;
margin-left: -10px;
}
.user-controls-popover:after {
border-color: transparent transparent #3f3d4d transparent;
bottom: 100%;
left: 30px;
}
.user-controls-popover.s--inactive {
opacity: 0;
-webkit-transform: translate3d(0, 15px, 0);
transform: translate3d(0, 15px, 0);
visibility: hidden;
-webkit-transition: visibility 0.01s linear 0.12s, -webkit-transform 0.12s ease-in-out, opacity 0.12s ease-in-out;
transition: visibility 0.01s linear 0.12s, transform 0.12s ease-in-out, opacity 0.12s ease-in-out;
}
.user-controls-nav {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
.user-controls-nav .nav-item {
margin-bottom: 0;
}
.user-controls-nav .nav-item a {
width: 100%;
padding: 13px 15px 17px 20px;
}
.user-controls-nav .nav-item:last-child a {
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.user-controls-nav .global-nav-icn {
top: 4px;
margin-right: 10px;
margin-left: 2px;
font-size: 34px;
line-height: 1;
}
.lt-ie9 .user-controls-nav .global-nav-icn,
.ie9 .user-controls-nav .global-nav-icn {
top: 8px;
line-height: 0;
}
.user-controls-nav .text {
margin-top: -2px;
}
.user-controls-nav .power-icn {
margin-left: 3px;
margin-right: 12px;
}
.user-stats {
background: #3f3d4d;
color: #9895a6;
padding: 10px 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 1px;
pointer-events: none;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.user-stats h2 {
font-size: 20px;
line-height: 34px;
text-align: left;
color: #696485;
margin-left: 4px;
}
.user-stats li {
margin: 0 0 0 21px;
}
.user-stats li:first-child {
margin-left: 0;
}
.user-stats .diy-icn {
color: #696485;
font-size: 30px;
margin-bottom: 5px;
}
.user-stats .diy-icn.favorite-icn {
font-size: 26px;
}
.user-stats .scorecard-naked {
width: 35px;
}
.user-stats .score-count {
font-size: 16px;
font-weight: bold;
}
.global-header-logo {
background: #1bc7a2;
display: inline-block;
height: 80px;
width: 80px;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 9px;
}
.account-cta {
float: left;
}
.badge-nav-item {
position: relative;
background: #1bc7a2;
color: #1f1f26;
margin-left: 5px;
}
.badge-nav-item:after,
.badge-nav-item:before {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.badge-nav-item:after {
border-width: 5px;
margin-left: -5px;
}
.badge-nav-item:after {
border-color: transparent #1bc7a2 transparent transparent;
left: -5px;
top: 6px;
}
.global-notifications {
float: left;
}
.global-notifications .notifications-panel {
position: absolute;
margin-left: -70px;
}
/*
* Search
*/
.global-nav .nav-item.search .wrapper {
height: 80px;
line-height: 80px;
padding: 0 0 0 20px;
font-size: 0;
max-width: 270px;
}
.global-nav .nav-item.search .wrapper:hover,
.global-nav .nav-item.search.active .wrapper {
background-color: #3f3d4d;
}
.global-nav .nav-item.search .search-form {
height: 80px;
white-space: nowrap;
overflow: hidden;
}
.global-nav .nav-item.search .search-form input[name="search"] {
width: 1px;
-webkit-transition: width 160ms ease;
-moz-transition: width 160ms ease;
-o-transition: width 160ms ease;
transition: width 160ms ease;
margin-left: -1px;
background-color: transparent;
padding: 10px 0;
font-size: 28px;
vertical-align: baseline;
color: #fff;
font-weight: normal;
-webkit-font-smoothing: antialiased;
/* IE 10 remove 'X' clear button */
}
.global-nav .nav-item.search .search-form input[name="search"],
.global-nav .nav-item.search .search-form input[name="search"]:active,
.global-nav .nav-item.search .search-form input[name="search"]:focus {
border: 0;
outline: 0;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
.global-nav .nav-item.search .search-form input[name="search"]::-ms-clear {
width: 0;
height: 0;
}
.global-nav .nav-item.search .search-form .search-icn {
margin: 0;
padding-right: 8px;
padding-top: 10px;
padding-bottom: 10px;
}
.global-nav .nav-item.search .search-form .text {
display: inline-block;
font-size: 20px;
margin-right: 0;
padding-right: 20px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
-webkit-transition: -webkit-transform 200ms ease, opacity 200ms ease;
-moz-transition: -webkit-transform 200ms ease, opacity 200ms ease;
-o-transition: -webkit-transform 200ms ease, opacity 200ms ease;
transition: -webkit-transform 200ms ease, opacity 200ms ease;
}
.global-nav .nav-item.search .search-form .cursor {
display: none;
width: 1px;
height: 34px;
padding: 0;
background-color: #fff;
position: absolute;
right: 18px;
top: 22px;
}
.global-nav .nav-item.search:hover .search-form .cursor {
display: block;
}
.global-nav .nav-item.search.active .wrapper {
padding-left: 30px;
}
.global-nav .nav-item.search.active .search-form input[name="search"] {
width: 226px;
margin-left: 0;
}
.global-nav .nav-item.search.active .search-form .search-icn {
cursor: pointer;
}
.global-nav .nav-item.search.active .search-form .search-icn:hover {
color: #fff;
}
.global-nav .nav-item.search.active .search-form .text {
-webkit-transform: translate3d(13px, 0, 0);
-moz-transform: translate3d(13px, 0, 0);
-ms-transform: translate3d(13px, 0, 0);
-o-transform: translate3d(13px, 0, 0);
transform: translate3d(13px, 0, 0);
opacity: 0;
}
.global-nav .nav-item.search.active .search-form .cursor {
display: none;
}
.notifications-panel {
background: #3f3d4d;
width: 400px;
max-height: 600px;
font-family: ApexRounded, sans-serif;
font-size: 15px;
text-align: left;
overflow-y: auto;
opacity: 1;
padding-top: 10px;
color: #9895a6;
-moz-transition: visibility 0.01s linear 0.01s, -moz-transform 0.12s ease-in-out 0.05s, opacity 0.2s ease-in-out 0.05s;
-webkit-transition: visibility 0.01s linear 0.01s, -webkit-transform 0.12s ease-in-out 0.05s, opacity 0.2s ease-in-out 0.05s;
transition: visibility 0.01s linear 0.01s, transform 0.12s ease-in-out 0.05s, opacity 0.2s ease-in-out 0.05s;
}
.notifications-panel p {
font-family: ApexRounded, sans-serif;
}
.notifications-panel a {
color: #1bc7a2;
font-weight: bold;
}
.notifications-panel.s--inactive {
opacity: 0;
-moz-transform: translate3d(0, -15px, 0);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
visibility: hidden;
-moz-transition: visibility 0.01s linear 0.12s, -moz-transform 0.12s ease-in-out, opacity 0.12s ease-in-out;
-webkit-transition: visibility 0.01s linear 0.12s, -webkit-transform 0.12s ease-in-out, opacity 0.12s ease-in-out;
transition: visibility 0.01s linear 0.12s, transform 0.12s ease-in-out, opacity 0.12s ease-in-out;
}
.notifications-panel.notifications-panel-empty {
height: 320px;
text-align: center !important;
}
.notifications-panel.notifications-panel-empty .notifications-empty-message {
padding-top: 50px;
}
.notifications-panel.notifications-panel-empty .notifications-empty-message .lightning-icn {
font-size: 120px;
font-size: 7.5rem;
color: #343240;
margin-bottom: 65px;
}
.notifications-panel.notifications-panel-empty .notifications-empty-message p {
font-size: 16px;
padding: 0 100px;
line-height: 1.3;
}
.notifications-header {
color: #fff;
font-size: 24px;
margin-bottom: 13px;
}
.notifications-list li {
border-bottom: 1px solid #4d4b5e;
}
.notification-item {
position: relative;
background: #565466;
font-weight: bold;
padding: 20px 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
*zoom: 1;
transition: background 0.08s ease-in-out, color 0.08s ease-in-out;
}
.notification-item:before,
.notification-item:after {
display: table;
content: "";
}
.notification-item:after {
clear: both;
}
.notification-item strong {
color: #fff;
}
.notification-item.notification-read {
background: transparent;
}
.notification-item:hover {
background: #6a667d;
}
.notification-item:hover .notification-timestamp {
color: #9895a6;
}
.notification-item .achievement-badge {
margin-top: -5px;
}
.notification-item .featured-badge {
margin-top: -15px;
margin-bottom: -10px;
}
.notification-item .media-body {
min-height: 50px;
display: table;
}
.notification-item .notification-body {
padding-left: 20px;
margin-left: 50px;
line-height: 1.3;
display: table-cell;
vertical-align: middle;
}
.notification-item .notification-timestamp {
font-size: 13px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
position: absolute;
right: 20px;
bottom: 5px;
color: #9895a6;
transition: color 0.08s ease-in-out;
}
.notification-item .favorite-icn {
padding: 0 3px;
}
.notification-item .btn-delete {
position: absolute;
right: 12px;
top: 5px;
-webkit-backface-visibility: hidden;
}
.notification-item .btn-delete .delete-icn {
font-size: 14px;
color: #9895a6;
}
.notification-item .btn-delete:hover .delete-icn {
color: #3f3d4d;
}
.notification-item .patch {
width: 51px;
margin-top: -5px;
}
.notification-item .icn-wrapper {
width: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
text-align: center;
}
.notification-item .icn-wrapper .diy-icn:before {
font-size: 60px;
}
.notification-body-med {
font-size: 16px;
}
.notification-body-med strong {
font-size: 18px;
}
.fill-anchor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
text-indent: -9999px;
}
.responsive {
font-size: 100%;
line-height: 1;
font-family: ApexRounded, sans-serif;
min-width: 320px;
}
.responsive .l-container {
max-width: 940px;
margin: auto;
}
.responsive.lt-ie9 .l-container {
min-width: 700px;
}
.responsive body {
font-size: 12px;
}
.responsive .img-container {
overflow: hidden;
}
.responsive img {
display: inline-block;
border: 0;
max-width: 100%;
}
.responsive .global-footer {
display: none;
visibility: hidden;
}
@media screen and (max-width: 30em) {
.responsive .row-fluid > div {
clear: both;
width: 100%;
}
.responsive [class^=span] {
margin: 0;
}
}
@media screen and (min-width: 50em) {
.responsive body {
font-size: 16px;
}
.responsive .global-footer {
display: block;
visibility: visible;
}
}
.stories .paw-logo-inverse {
display: block;
background: transparent url(/images/inverse-logo.svg);
}
.stories .paw-logo-sml {
width: 76px;
height: 78px;
background-size: 76px 78px;
}
.stories .media-list {
list-style: none;
margin: 0;
*zoom: 1;
}
.stories .media-list:before,
.stories .media-list:after {
display: table;
content: "";
}
.stories .media-list:after {
clear: both;
}
.stories .media-list > li {
float: left;
width: 100%;
margin-right: 1em;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
}
@media screen and (min-width: 30em) and (max-width: 50em) {
.stories .media-list > li {
width: 48.9%;
}
.stories .media-list > li:nth-child(2n) {
margin: 0;
}
.stories .media-list > li:nth-child(2n+1) {
clear: left;
}
}
@media screen and (min-width: 50em) {
.stories .media-list > li {
width: 31.9%;
}
.stories .media-list > li:nth-child(3n) {
margin: 0;
}
.stories .media-list > li:nth-child(3n+1) {
clear: left;
}
}
.stories .media-list .media-list-object {
position: relative;
max-height: 154px;
}
.stories.lt-ie9 .media-list > li {
width: 31.9%;
}
.stories.lt-ie9 .media-list > li:nth-child(3n) {
margin: 0;
}
.stories.lt-ie9 .media-list > li:nth-child(3n+1) {
clear: left;
}
.stories .media-list-low-light > li {
background-color: #333;
background-color: rgba(255, 255, 255, 0.05);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
border-radius: 3px;
border: 1px solid transparent;
}
.stories .media-list-low-light > li:hover {
background-color: #444;
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.1);
}
.stories .media-list-low-light > li.active,
.stories .media-list-low-light > li.active:hover {
background-color: #00c796;
border-color: transparent;
}
.stories .media-list-low-light .avatar {
border: 1px solid transparent;
}
.stories .media-list-low-light .active .avatar {
border-color: rgba(255, 255, 255, 0.2);
}
/*
* Pages
*/
/**********************************************************
* Generic Styling *
* (common to splash & hq) *
**********************************************************/
/**********************************************************
* Modal Dialogs *
* (see ../_inc/common.less) *
**********************************************************/
#dialog-forgot-password .next-step {
margin-top: -8px;
}
#dialog-signin.has-sidebar {
width: 650px;
}
#dialog-signin {
width: 400px;
}
#dialog-signin .signin {
width: 330px;
float: left;
}
#dialog-signin .join {
width: 200px;
float: right;
}
#dialog-signin .join ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
#dialog-signin .join ul li {
position: relative;
padding: 0 0 0 25px;
margin-bottom: 10px;
}
#dialog-signin .join ul li:before {
font-family: Icons;
position: absolute;
top: 0;
left: 0;
font-size: 20px;
opacity: 0.4;
filter: alpha(opacity=40);
}
#dialog-signin .join ul .portfolio:before {
content: 'H';
}
#dialog-signin .join ul .skills:before {
content: 'K';
font-size: 21px;
}
#dialog-signin .join ul .comment:before {
content: '>';
font-size: 17px;
}
#dialog-signin .join ul .follow:before {
content: 'X';
font-size: 20px;
}
#dialog-signin .join ul .favorite:before {
content: 'D';
font-size: 16px;
}
#dialog-signin .parent-notice {
background: #eaeaea;
padding: 11px 35px;
margin: -5px 0 0 0;
color: #808080;
border-top: 1px solid #e0e0e0;
}
#dialog-signin .parent-notice:before {
content: 'Note: ';
font-weight: bold;
color: #2b2b2b;
}
#dialog-signin .maker-image {
position: absolute;
width: 50px;
margin-left: 10px;
margin-top: -3px;
}
#dialog-signin .modal-header {
padding-left: 100px;
background-repeat: no-repeat;
background-image: url(/images/www/species/gra_raccoon_small.png);
background-position: 35px 15px;
background-size: 50px;
}
#dialog-signin .modal-header:before {
content: ' ';
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/icons/attention.png');
width: 20px;
height: 20px;
position: absolute;
top: 41px;
left: 69px;
}
/**********************************************************
* Sign In Dropdown *
**********************************************************/
.sign-in .btn.dropdown-toggle .caret {
margin: 9px 0 0 4px;
}
.sign-in .dropdown-menu {
padding: 25px;
margin-top: 6px !important;
background: #fff;
color: #202020 !important;
border: 0 none;
font-size: 14px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 240px;
}
.sign-in .dropdown-menu .parent {
float: right;
display: block;
margin-top: -5px;
font-weight: bold;
}
.sign-in .dropdown-menu .controls {
margin-bottom: 5px;
}
.sign-in .dropdown-menu .controls:last-child {
margin-bottom: 0;
}
.sign-in .dropdown-menu .btn {
font-size: 22px;
padding: 10px 20px 7px 20px;
}
.sign-in .dropdown-menu .nickname label,
.sign-in .dropdown-menu .password label,
.sign-in .dropdown-menu .email label {
font-family: ApexRounded, sans-serif;
font-size: 17px;
}
.sign-in .dropdown-menu .nickname {
margin-top: 10px;
}
.sign-in .dropdown-menu .maker-image {
position: absolute;
width: 50px;
margin-left: 10px;
margin-top: -3px;
}
.sign-in .dropdown-menu .password {
margin-bottom: 10px;
}
.sign-in .dropdown-menu .remember {
width: 160px;
margin: -8px 0 0 0;
}
.sign-in .dropdown-menu .remember label {
font-size: 14px;
}
.sign-in .dropdown-menu a {
padding: 0;
text-shadow: none !important;
color: #3290d8 !important;
}
.sign-in .dropdown-menu a:hover {
color: #1e679f !important;
}
.sign-in .dropdown-menu input[type=text],
.sign-in .dropdown-menu input[type=password] {
width: 100%;
padding: 6px 8px;
font-family: ApexRounded, sans-serif;
font-size: 22px;
}
.sign-in .dropdown-menu span.error {
margin: -6px 0 10px 0;
}
.sign-in .dropdown-menu:before {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
top: -6px;
right: 19px;
}
.hq #top .dropdown-menu a {
color: #3290d8 !important;
}
.hq #top .dropdown-menu a:hover {
color: #1e679f !important;
}
/**********************************************************
* DIY.org Homepage Splash *
**********************************************************/
.splash {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* ------------------------------------------- */
/**********************************************************
* Sign In Button + Dropdown *
* (see ./components/sign-in.less) *
**********************************************************/
/**********************************************************
* Wood Panel *
**********************************************************/
/**********************************************************
* Purple Footer *
**********************************************************/
}
.splash body {
background: #212622 url(/images/www/backgrounds/skills/artist.png);
color: #fafafa;
height: 100%;
overflow: hidden;
text-align: center;
}
.splash li {
margin-bottom: 0;
}
.splash span.error {
font-family: ApexRounded, sans-serif;
font-weight: normal;
}
.splash .modal {
z-index: 1070;
}
.splash .modal-backdrop {
z-index: 1060;
opacity: 0.7;
filter: alpha(opacity=70);
}
.splash .wood-backdrop {
z-index: 1040;
opacity: 0.3;
filter: alpha(opacity=30);
}
.splash body .modal-body {
color: #2b2b2b;
}
.splash body .modal-body .control-label {
margin-bottom: 2px;
font-size: 20px;
}
.splash .content .btn-focus.disabled {
background: #D8A351;
border-color: #A47328;
}
.splash #logo {
position: relative;
text-align: left;
width: 300px;
height: 351px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -345px;
margin-left: -150px;
z-index: 3;
}
.splash #logo:before {
content: 'K';
font-family: Icons;
color: #98fcc2;
margin: 0;
font-size: 429px;
line-height: 429px;
display: block;
position: absolute;
top: -33px;
left: -6px;
z-index: 0;
}
.splash #logo * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
.splash #logo.approved:before {
color: #00cd9f;
}
.splash #logo.rejected:before {
color: #fd4d10;
}
.splash #logo.pending:after,
.splash #logo.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
.splash #logo.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
.splash #logo.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
.splash #logo:before {
text-shadow: 0 10px 45px rgba(0, 0, 0, 0.8);
}
.splash #logo a {
background-image: url(/images/www/splash/logo_patch.png);
}
.splash .featured-block {
position: absolute;
background-color: #ffffff;
background-color: rgba(255, 255, 255, 0.07);
zoom: 1;
background-color: transparent\9;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#12ffffff, endColorstr=#12ffffff)";
padding: 10px 10px 4px 10px;
top: 44px;
left: 0;
z-index: 3;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}
.splash .featured-block a {
font-size: 16px;
display: block;
font-family: ApexRounded, sans-serif;
}
.splash .featured-block .thumb {
margin: 0 0 5px 0;
background-position: center center;
}
.splash .featured-block .thumb .play-icn {
font-size: 45px;
font-size: 2.8125rem;
position: absolute;
top: 35px;
left: 0;
width: 100%;
text-align: center;
color: rgba(255, 255, 255, 0.8);
}
.splash .featured-block .anthem-thumb {
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/splash/anthem.jpg?2');
width: 220px;
height: 76px;
}
.splash .featured-block .app-thumb {
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/splash/ios.jpg');
width: 220px;
height: 76px;
background-size: 100%;
text-indent: 0;
}
.splash #patches {
position: relative;
width: 100%;
height: 100%;
}
.splash #patches > div {
position: relative;
text-align: left;
width: 253px;
height: 296px;
display: inline-block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 0.8;
filter: alpha(opacity=80);
}
.splash #patches > div:before {
content: 'K';
font-family: Icons;
color: #303030;
margin: 0;
font-size: 362px;
line-height: 362px;
display: block;
position: absolute;
top: -28px;
left: -5px;
z-index: 0;
}
.splash #patches > div * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
.splash #patches > div.approved:before {
color: #00cd9f;
}
.splash #patches > div.rejected:before {
color: #fd4d10;
}
.splash #patches > div.pending:after,
.splash #patches > div.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
.splash #patches > div.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
.splash #patches > div.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
.splash #patches > div.hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate(0, -3px);
-moz-transform: translate(0, -3px);
-ms-transform: translate(0, -3px);
-o-transform: translate(0, -3px);
transform: translate(0, -3px);
}
.splash #patches > div.hover:before {
text-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}
.splash input[type=text],
.splash input[type=password] {
font-family: ApexRounded, sans-serif;
font-size: 18px;
}
.splash section > .wrapper > .body,
.splash section > .body,
.splash footer .colophon {
width: 960px;
margin: 0 auto;
text-align: left;
position: relative;
*zoom: 1;
}
.splash section > .wrapper > .body:before,
.splash section > .body:before,
.splash footer .colophon:before,
.splash section > .wrapper > .body:after,
.splash section > .body:after,
.splash footer .colophon:after {
display: table;
content: "";
}
.splash section > .wrapper > .body:after,
.splash section > .body:after,
.splash footer .colophon:after {
clear: both;
}
.splash section > .wrapper > .body .top,
.splash section > .body .top,
.splash footer .colophon .top {
*zoom: 1;
}
.splash section > .wrapper > .body .top:before,
.splash section > .body .top:before,
.splash footer .colophon .top:before,
.splash section > .wrapper > .body .top:after,
.splash section > .body .top:after,
.splash footer .colophon .top:after {
display: table;
content: "";
}
.splash section > .wrapper > .body .top:after,
.splash section > .body .top:after,
.splash footer .colophon .top:after {
clear: both;
}
.splash section > .wrapper > .body .left,
.splash section > .body .left,
.splash footer .colophon .left {
float: left;
}
.splash section > .wrapper > .body .right,
.splash section > .body .right,
.splash footer .colophon .right {
float: right;
top: 0;
right: 0;
text-align: right;
}
.splash section.sign-in {
position: fixed;
top: 20px;
z-index: 1000;
width: 100%;
text-align: right;
pointer-events: none;
}
.splash section.sign-in .pull-right {
pointer-events: auto;
}
.splash section.sign-in .btn-group,
.splash section.sign-in .btn.dropdown-toggle {
float: left;
}
.splash section.sign-in .btn.dropdown-toggle {
cursor: pointer !important;
font-size: 20px;
padding: 7px 20px;
margin-left: 10px;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.35);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.35);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.splash section.sign-in .btn.dropdown-toggle {
color: #303030;
background-color: #f2f2f2;
background-image: -moz-linear-gradient(top, #f2f2f2, #f2f2f2);
background-image: -ms-linear-gradient(top, #f2f2f2, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #f2f2f2, #f2f2f2);
background-image: -o-linear-gradient(top, #f2f2f2, #f2f2f2);
background-image: linear-gradient(top, #f2f2f2, #f2f2f2);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#f2f2f2', GradientType=0);
border-color: #f2f2f2 #f2f2f2 #cccccc;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.splash section.sign-in .btn.dropdown-toggle:hover,
.splash section.sign-in .btn.dropdown-toggle:active,
.splash section.sign-in .btn.dropdown-toggle.active,
.splash section.sign-in .btn.dropdown-toggle.disabled,
.splash section.sign-in .btn.dropdown-toggle[disabled] {
background-color: #f2f2f2;
}
.splash section.sign-in .btn.dropdown-toggle:active,
.splash section.sign-in .btn.dropdown-toggle.active {
background-color: #d9d9d9 \9;
}
.splash section.sign-in .dropdown-menu {
cursor: default;
background: #f8f8f8;
width: 240px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.splash section.sign-in .dropdown-menu:before {
border-bottom-color: #e6e6e6;
}
.splash section.content {
position: fixed;
bottom: 0;
width: 100%;
height: 252px;
z-index: 1050;
overflow: visible !important;
background-image: url(/images/www/backgrounds/skills/artist.png);
background-color: rgba(42, 42, 42, 0.95) !important;
border-top: 1px solid rgba(255, 255, 255, 0.15);
background-color: #2a2a2a;
background-color: rgba(42, 42, 42, 0.95);
zoom: 1;
background-color: transparent\9;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f22a2a2a, endColorstr=#f22a2a2a)";
-webkit-box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.4);
box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.4);
/* ------------------------------------------- */
/**********************************************************
* STAGE 1: *
* Welcome *
**********************************************************/
/**********************************************************
* STAGE 2: *
* Animal Selector *
**********************************************************/
/**********************************************************
* STAGE 3: *
* Pick Nickname *
**********************************************************/
/**********************************************************
* STAGE 4: *
* Pick Password + Enter Parent Email *
**********************************************************/
}
.splash section.content label {
font-weight: bold;
color: #fafafa;
}
.splash section.content .error {
color: #ff7930;
}
.splash section.content .close-btn {
position: absolute;
top: -18px;
right: 0;
z-index: 1053;
opacity: 0;
filter: alpha(opacity=0);
}
.splash section.content .step-common {
z-index: 1051;
position: absolute;
width: 100%;
}
.splash section.content .step-common .btn.next {
position: absolute;
right: 0;
top: 515px;
z-index: 1060;
font-size: 18px;
font-weight: bold;
font-family: ApexRounded, sans-serif;
padding: 14px 20px;
}
.splash section.content .step-common .selected-specie {
position: relative;
width: 460px;
height: 460px;
background-repeat: no-repeat;
background-position: center center;
margin: 95px 0 0 0;
}
.splash section.content .step-common .selected-specie.loading:before {
content: ' ';
width: 64px;
height: 64px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin: -32px 0 0 -32px;
opacity: 0.1;
filter: alpha(opacity=10);
background: url(/images/www/spinners/64x64_FFF_000.gif);
}
.splash section.content .step-common .character-name {
width: 460px;
text-align: center;
font-family: ApexRounded, sans-serif;
font-size: 30px;
margin-top: -10px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}
.splash section.content .btn-focus {
font-family: ApexRounded, sans-serif;
font-size: 22px;
padding: 10px 30px;
}
.splash section.content .steps {
height: 130px;
position: absolute;
top: 8px;
right: 0;
}
.splash section.content .steps * {
margin-left: 5px;
float: left;
background-repeat: no-repeat;
}
.splash section.content .steps .sep {
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/splash/ui_splash_progressdot_empty.png?3');
width: 12px;
height: 12px;
margin-top: 70px;
}
.splash section.content .steps .sep.filled {
background-image: url('/images/www/splash/ui_splash_progressdot_full.png?3');
}
.splash section.content .steps .step-1.viewed {
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/splash/ui_splash_step1_phase2.png?3');
width: 79px;
height: 130px;
}
.splash section.content .steps .step-1.checked {
background-image: url('/images/www/splash/ui_splash_step1_phase3.png?3');
}
.splash section.content .steps .step-2 {
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/splash/ui_splash_step2_phase1.png?3');
width: 72px;
height: 130px;
}
.splash section.content .steps .step-2.viewed {
background-image: url('/images/www/splash/ui_splash_step2_phase2.png?3');
}
.splash section.content .steps .step-2.checked {
background-image: url('/images/www/splash/ui_splash_step2_phase3.png?3');
}
.splash section.content .steps .step-3 {
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/splash/ui_splash_step3_phase1.png?3');
width: 69px;
height: 130px;
}
.splash section.content .steps .step-3.viewed {
background-image: url('/images/www/splash/ui_splash_step3_phase2.png?3');
}
.splash section.content .steps .step-3.checked {
background-image: url('/images/www/splash/ui_splash_step3_phase3.png?3');
}
.splash section.content .wrapper > .body {
margin-top: -40px;
padding: 0 0 55px 0;
min-height: 540px;
}
.splash section.content .body .body {
margin-top: 100px;
}
.splash section.content .right {
margin-top: 20px;
}
.splash section.content h2 {
color: #18c390;
font-family: ApexRounded, sans-serif;
font-size: 40px;
position: absolute;
top: 60px;
left: 0;
width: 460px;
text-align: center;
text-shadow: 0 1px 0 rgba(20, 16, 25, 0.2);
}
.splash section.content .container {
background-color: #ffffff;
background-color: rgba(255, 255, 255, 0.09);
zoom: 1;
background-color: transparent\9;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#17ffffff, endColorstr=#17ffffff)";
font-family: ApexRounded, sans-serif;
font-weight: bold;
padding: 25px;
width: 400px;
float: right;
font-size: 15px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.splash section.content .container h3 {
font-size: 25px;
font-weight: bold;
margin-bottom: 15px;
font-family: ApexRounded, sans-serif;
}
.splash section.content .container h3 .light {
color: #656a65;
}
.splash section.content .container h3 strong {
font-weight: normal;
}
.splash section.content .container label {
font-size: 15px;
}
.splash section.content .container input[type=text],
.splash section.content .container input[type=password] {
border: 0 none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
height: auto;
width: 100%;
padding: 10px;
}
.splash section.content .container input[type=text]:hover,
.splash section.content .container input[type=password]:hover {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.splash section.content section {
display: none;
padding: 30px 0 0 0;
margin-bottom: 20px;
position: relative;
z-index: 1052;
height: 480px;
}
.splash section.content section.join {
display: block;
height: auto;
text-align: center;
padding-bottom: 0;
}
.splash section.content section.join .btn.join,
.splash section.content section.join .btn.explore {
font-size: 24px;
font-weight: bold;
font-family: ApexRounded, sans-serif;
padding: 14px 43px;
letter-spacing: 0;
margin: 13px 25px 11px 0;
}
.splash section.content section.join .btn.join:hover {
background-image: none;
background-color: #14ac7f !important;
}
.splash section.content section.join .btn.explore {
padding: 14px 30px;
}
.splash section.content section.join .btn:last-child {
margin-right: 0 !important;
}
.splash section.content section.join .tagline {
font-size: 45px;
font-family: ApexRounded, sans-serif;
color: #f2f2f2;
margin: 24px 0 20px 0;
font-weight: bold;
}
.splash section.content section.join .cta-block {
text-align: left;
padding-left: 280px;
}
.splash section.content section.animal {
*zoom: 1;
}
.splash section.content section.animal:before,
.splash section.content section.animal:after {
display: table;
content: "";
}
.splash section.content section.animal:after {
clear: both;
}
.splash section.content section.animal .specie-options {
float: right;
width: 500px;
margin: 0 -15px 0 0;
*zoom: 1;
}
.splash section.content section.animal .specie-options:before,
.splash section.content section.animal .specie-options:after {
display: table;
content: "";
}
.splash section.content section.animal .specie-options:after {
clear: both;
}
.splash section.content section.animal .specie-options a {
margin: -1px 4px;
padding: 5px;
display: block;
position: relative;
width: 82px;
height: 80px;
background-position: center center;
background-repeat: no-repeat;
background-size: 80px;
float: left;
cursor: pointer;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.splash section.content section.animal .specie-options a .caption {
display: block;
position: absolute;
bottom: -5px;
right: -5px;
padding: 5px 9px;
font-family: ApexRounded, sans-serif;
font-size: 15px;
background: #404040;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
color: #fff;
text-decoration: none;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.1s linear;
-moz-transition: opacity 0.1s linear;
-ms-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
}
.splash section.content section.animal .specie-options a:hover .caption {
opacity: 1;
filter: alpha(opacity=100);
}
.splash section.content section.animal .specie-options a.selected {
background-color: #ffe953;
}
.splash section.content section.nickname .container {
margin-top: 150px;
}
.splash section.content section.nickname span.error {
margin: 0;
padding: 10px 0 0 0;
clear: left;
}
.splash section.content section.nickname .nickname-generator {
*zoom: 1;
}
.splash section.content section.nickname .nickname-generator:before,
.splash section.content section.nickname .nickname-generator:after {
display: table;
content: "";
}
.splash section.content section.nickname .nickname-generator:after {
clear: both;
}
.splash section.content section.nickname .nickname-generator input {
display: block;
height: auto;
width: 325px;
float: left;
border-top: 2px solid #d0d0d0;
border-bottom: 2px solid #d0d0d0;
border-left: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
height: 49px;
background: #fff;
overflow: hidden;
padding: 10px;
font-size: 22px;
font-family: ApexRounded, sans-serif;
margin: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.splash section.content section.nickname .nickname-generator .left-cap {
background: url(/images/www/splash/gra_splash_nickname_leftbumper.png?2) right center no-repeat;
width: 20px;
height: 50px;
}
.splash section.content section.nickname .nickname-generator .lever {
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/splash/ui_lever.png?2');
width: 43px;
height: 103px;
margin-top: -53px;
position: relative;
}
.splash section.content section.nickname .nickname-generator .left-cap,
.splash section.content section.nickname .nickname-generator .textfield,
.splash section.content section.nickname .nickname-generator .lever {
display: block;
float: left;
vertical-align: top;
}
.splash section.content section.nickname #nickname-warning {
font-weight: normal;
margin-top: 15px;
opacity: 0;
filter: alpha(opacity=0);
}
.splash section.content section.password .container {
margin-top: 100px;
}
.splash section.content section.password .controls {
margin-top: 5px;
}
.splash section.content section.password .controls.email {
margin-bottom: 10px;
}
.splash section.content section.password .controls.password {
width: 187px;
float: left;
}
.splash section.content section.password .controls.password input {
width: 100%;
}
.splash section.content section.password .controls.password.again {
margin-left: 25px;
}
.splash section.content section.password .password-text {
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.splash section.content section.password .password-title {
margin-bottom: 5px;
}
.splash section.content section.password .password-edit {
cursor: pointer;
float: right;
font-size: 14px;
}
.splash section.content section.password .password-background {
font-size: 24px;
width: 380px;
padding: 10px;
background-color: #808080;
background-image: url(/images/www/backgrounds/noise.png);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.splash section.content section.password .password-notice {
margin-top: 10px;
width: 380px;
}
.splash section.content section.password .custom-password {
display: none;
}
.splash footer {
position: fixed;
bottom: 0;
z-index: 1060;
width: 100%;
padding-top: 10px;
background: #202020;
color: #fff;
font-size: 13px;
line-height: 13px;
font-weight: bold;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
}
.splash footer .colophon {
height: 47px;
position: relative;
text-align: right;
}
.splash footer .colophon .fb-like {
position: absolute;
top: 0;
right: 0;
background: #f1eff4;
padding: 4px;
width: 85px;
overflow: hidden;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.splash footer .colophon .company {
font-size: 15px;
color: #37332e;
display: block;
}
.splash footer .colophon .company-caption {
display: block;
margin-top: 3px;
color: #606060;
}
.splash footer .colophon a {
font-weight: normal;
font-family: ApexRounded, sans-serif;
background: #131313;
padding: 3px 6px;
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.splash footer .colophon a:hover {
background: #060606;
text-decoration: none;
}
.splash footer .colophon .links {
list-style: none;
margin: 0;
padding: 0;
}
.splash footer .colophon .links li {
display: inline;
margin-left: 2px;
}
.splash footer .colophon .links.pull-left {
margin-top: 8px;
}
.splash footer .colophon li.big {
font-size: 17px;
color: #fff;
}
.splash footer .colophon li.big a {
padding: 5px 15px;
}
.splash footer .colophon .company-caption,
.splash footer .colophon .links {
margin-right: 105px;
}
/**
* DIY HQ Stylesheet
*/
html.hq {
/**********************************************************
* Following Stream *
**********************************************************/
/**********************************************************
* Skills List *
* /skills *
**********************************************************/
/**********************************************************
* Skill Permalink Page *
* /skills/:id *
**********************************************************/
/**********************************************************
* Background Images by Skill Pole *
**********************************************************/
/**********************************************************
* Challenge Detail *
* /skills/:skill/challenge/:id *
**********************************************************/
/**********************************************************
* @font-face Icons *
**********************************************************/
/**********************************************************
* Neutral Header *
**********************************************************/
/**********************************************************
* No Projects Yet *
**********************************************************/
/**********************************************************
* Project List *
* (see ../components/project-list.less for more styling) *
**********************************************************/
/**********************************************************
* Patches *
**********************************************************/
/**********************************************************
* Tabs *
**********************************************************/
/**********************************************************
* Welcome to DIY CTA *
**********************************************************/
/**********************************************************
* Earned Skills List *
**********************************************************/
/**********************************************************
* Followers / Following List *
**********************************************************/
/**********************************************************
* Drag & Drop Feature Detection *
**********************************************************/
/**********************************************************
* Stacked Shots Experiment *
**********************************************************/
/*
&.explore .projects > ul > li {
@shots-bg: #eaeaea;
@shots-border: #ddd;
@shots1: "1px 1px 0 @{shots-border}";
@shots2: "2px 3px 0 @{shots-bg}, 3px 4px 0 @{shots-border}";
@shots3: "4px 6px 0 @{shots-bg}, 5px 7px 0 @{shots-border}";
@shots4: "6px 9px 0 @{shots-bg}, 7px 10px 0 @{shots-border}";
& {
@shadow: ~`@{shots1}`,~`@{shots2}`,~`@{shots3}`,~`@{shots4}`,5px 10px 11px rgba(0,0,0,0.2);
.box-shadow(@shadow);
}
&.shots-1, &.shots-0 {
@shadow: 0 0 16px rgba(0,0,0,0.01);
.translate(0, 10px);
.box-shadow(@shadow);
}
&.shots-2 {
@shadow: ~`@{shots1}`,~`@{shots2}`,3px 5px 6px rgba(0,0,0,0.06);
.translate(0, 6px);
.box-shadow(@shadow);
}
&.shots-3 {
@shadow: ~`@{shots1}`,~`@{shots2}`,~`@{shots3}`,4px 5px 14px rgba(0,0,0,0.17);
.translate(0, 4px);
.box-shadow(@shadow);
}
}
*/
/**********************************************************
* Skill Complete Takeover *
**********************************************************/
/**********************************************************
* Popover "Welcome to DIY" Splash *
* https://diy.org/username#welcome *
**********************************************************/
/**********************************************************
* Maker Porfolio Design Panel *
**********************************************************/
/**********************************************************
* Vertical Nav Lists (side) *
**********************************************************/
/**********************************************************
* Tab Containers *
**********************************************************/
/**********************************************************
* Pagination *
* prev / next *
**********************************************************/
/**********************************************************
* Project Select Control *
* Note: extends .custom-control (forms.css) *
**********************************************************/
/**********************************************************
* Page Headers *
**********************************************************/
/**********************************************************
* Content Blocks *
**********************************************************/
/**********************************************************
* Hidden Projects *
**********************************************************/
}
html.hq.blog .outer.content > .inner {
*zoom: 1;
}
html.hq.blog .outer.content > .inner:before,
html.hq.blog .outer.content > .inner:after {
display: table;
content: "";
}
html.hq.blog .outer.content > .inner:after {
clear: both;
}
html.hq .blog-feed {
width: 540px;
float: left;
}
html.hq .blog-post {
background: #fafafa;
padding: 20px;
margin: 0 0 15px 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
*zoom: 1;
}
html.hq .blog-post:before,
html.hq .blog-post:after {
display: table;
content: "";
}
html.hq .blog-post:after {
clear: both;
}
html.hq .blog-post h1,
html.hq .blog-post h2 {
font-size: 24px;
line-height: 30px;
margin-bottom: 15px;
}
html.hq .blog-post h3 {
font-size: 18px;
line-height: 25px;
}
html.hq .blog-post .body,
html.hq .blog-post .caption {
*zoom: 1;
}
html.hq .blog-post .body:before,
html.hq .blog-post .caption:before,
html.hq .blog-post .body:after,
html.hq .blog-post .caption:after {
display: table;
content: "";
}
html.hq .blog-post .body:after,
html.hq .blog-post .caption:after {
clear: both;
}
html.hq .blog-post .photo {
margin: 0 0 15px 0;
}
html.hq .blog-post .photo img {
max-width: 500px;
}
html.hq .blog-post blockquote {
border-left: 10px solid #E9D66F;
}
html.hq .blog-post p,
html.hq .blog-post [class*="span"],
html.hq .blog-post .player,
html.hq .blog-post h3 {
float: none !important;
margin: 0 0 15px 0 !important;
}
html.hq .blog-post p:last-child,
html.hq .blog-post blockquote:last-child {
margin-bottom: 0 !important;
}
html.hq .blog-post .meta {
margin-top: 25px;
color: #808080;
}
html.hq .blog-post .meta span {
margin-right: 10px;
}
html.hq.blog .sidebar {
float: right;
width: 370px;
}
html.hq.blog .outer.comments {
background: #fafafa;
}
html.hq.blog ul.tweets {
margin: 10px 0 0 0;
list-style: none;
}
html.hq.blog ul.tweets .text {
font-size: 18px;
padding: 10px;
background: #f2f2f2;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq.blog ul.tweets .ts {
margin: 4px 0 -4px 0;
display: block;
font-size: 14px;
color: #808080;
}
html.hq #explore {
min-height: 650px;
}
html.hq #explore-keyword,
html.hq #explore {
*zoom: 1;
}
html.hq #explore-keyword:before,
html.hq #explore:before,
html.hq #explore-keyword:after,
html.hq #explore:after {
display: table;
content: "";
}
html.hq #explore-keyword:after,
html.hq #explore:after {
clear: both;
}
html.hq #explore-keyword {
background: none;
-webkit-border-radius: none;
-moz-border-radius: none;
border-radius: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin-top: 0px;
}
html.hq.explore {
/**********************************************************
* "At A Glance" Area *
* Trending / Featured Challenge / Featured Maker *
**********************************************************/
/**********************************************************
* Search Suggestions *
**********************************************************/
/**********************************************************
* Projects List *
**********************************************************/
}
html.hq.explore .content {
position: relative;
}
html.hq.explore .outer.tabs .nav-tabs a,
html.hq.explore .outer.tabs .nav-tabs a:hover {
color: rgba(0, 0, 0, 0);
color: #f0f0f0;
}
html.hq.explore .outer.glance,
html.hq.explore .outer.tabs .nav-tabs {
background: #f0f0f0;
}
html.hq.explore .outer.tabs {
padding-top: 15px;
margin-top: 0;
background: #e0e0e0;
}
html.hq.explore .outer.header {
background: #fff;
padding-bottom: 26px;
}
html.hq.explore .glance {
*zoom: 1;
}
html.hq.explore .glance:before,
html.hq.explore .glance:after {
display: table;
content: "";
}
html.hq.explore .glance:after {
clear: both;
}
html.hq.explore .glance .col {
float: left;
margin-right: 20px;
}
html.hq.explore .glance .col.trending {
width: 140px;
}
html.hq.explore .glance .col.featured-challenge {
width: 460px;
}
html.hq.explore .glance .col.featured-maker {
width: 300px;
}
html.hq.explore .glance .col:last-child {
margin-right: 0;
}
html.hq.explore .glance h3 {
font-size: 20px;
color: #aaa;
margin: -5px 0 10px 0;
}
html.hq.explore .glance h3:before {
font-family: Icons;
margin: 0 5px 0 0;
opacity: 0.3;
filter: alpha(opacity=30);
}
html.hq.explore .glance .trending h3:before {
content: '=';
}
html.hq.explore .glance .trending ul {
list-style: none;
margin: 0;
padding: 0;
}
html.hq.explore .glance .trending li {
margin: 0 0 2px 0;
}
html.hq.explore .glance .trending a {
display: block;
text-align: center;
color: #fff;
font-size: 17px;
font-family: ApexRounded, sans-serif;
line-height: 18px;
padding: 13px 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq.explore .glance .trending li a {
background-color: #fe346a;
}
html.hq.explore .glance .trending li a:hover {
background-color: #fe1b57;
}
html.hq.explore .glance .trending li:nth-child(1) a {
background-color: #fe346a;
}
html.hq.explore .glance .trending li:nth-child(1) a:hover {
background-color: #fe1b57;
}
html.hq.explore .glance .trending li:nth-child(2) a {
background-color: #fc4368;
}
html.hq.explore .glance .trending li:nth-child(2) a:hover {
background-color: #fc2a54;
}
html.hq.explore .glance .trending li:nth-child(3) a {
background-color: #fd5269;
}
html.hq.explore .glance .trending li:nth-child(3) a:hover {
background-color: #fd3953;
}
html.hq.explore .glance .trending li:nth-child(4) a {
background-color: #fa5e64;
}
html.hq.explore .glance .trending li:nth-child(4) a:hover {
background-color: #f9454c;
}
html.hq.explore .glance .trending li:nth-child(5) a {
background-color: #fa7162;
}
html.hq.explore .glance .trending li:nth-child(5) a:hover {
background-color: #f95b49;
}
html.hq.explore .glance .trending li:nth-child(6) a {
background-color: #f87d5f;
}
html.hq.explore .glance .trending li:nth-child(6) a:hover {
background-color: #f76947;
}
html.hq.explore .glance .trending li:nth-child(7) a {
background-color: #f6875c;
}
html.hq.explore .glance .trending li:nth-child(7) a:hover {
background-color: #f57544;
}
html.hq.explore .glance .trending li:nth-child(8) a {
background-color: #f49259;
}
html.hq.explore .glance .trending li:nth-child(8) a:hover {
background-color: #f28241;
}
html.hq.explore .glance .challenge,
html.hq.explore .glance .maker {
padding: 12px;
color: #8f8f8f;
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq.explore .glance .challenge .references {
height: 278px;
overflow: hidden;
position: relative;
}
html.hq.explore .glance .challenge .thumb {
display: block;
width: 100%;
height: 278px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-size: cover;
background-position: center center;
}
html.hq.explore .glance .challenge .details {
position: relative;
margin: 20px 0 0 0;
padding-left: 64px;
}
html.hq.explore .glance .challenge .title {
font-size: 24px;
font-family: ApexRounded, sans-serif;
}
html.hq.explore .glance .challenge .medallion {
position: relative;
text-align: left;
width: 50px;
height: 59px;
display: inline-block;
position: absolute;
top: -11px;
left: 0;
}
html.hq.explore .glance .challenge .medallion:before {
content: 'K';
font-family: Icons;
color: #d5d5d5;
margin: 0;
font-size: 72px;
line-height: 72px;
display: block;
position: absolute;
top: -6px;
left: -1px;
z-index: 0;
}
html.hq.explore .glance .challenge .medallion * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
html.hq.explore .glance .challenge .medallion.approved:before {
color: #00cd9f;
}
html.hq.explore .glance .challenge .medallion.rejected:before {
color: #fd4d10;
}
html.hq.explore .glance .challenge .medallion.pending:after,
html.hq.explore .glance .challenge .medallion.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
html.hq.explore .glance .challenge .medallion.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
html.hq.explore .glance .challenge .medallion.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
html.hq.explore .search-suggestions {
padding: 12px 0px;
}
html.hq.explore .search-suggestions h2 {
position: relative;
color: #a7a7a7;
font-size: 26px;
line-height: 30px;
margin: 0 0 20px 0;
padding: 0 0 0 45px;
}
html.hq.explore .search-suggestions h2:before {
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/awards/search_small_bw.png');
width: 36px;
height: 45px;
opacity: 0.18;
filter: alpha(opacity=18);
background-repeat: no-repeat;
content: ' ';
position: absolute;
z-index: 999;
top: -8px;
left: 0;
}
html.hq.explore .search-suggestions .tag-list {
font-size: 0;
font-size: 0rem;
list-style: none;
margin: -10px;
padding: 10px;
max-height: 70px;
overflow: hidden;
}
html.hq.explore .search-suggestions .tag-list .tag {
display: inline-block;
margin: 0 10px 10px 0;
padding: 1px;
}
html.hq.explore .search-suggestions .tag-list .tag a {
display: block;
padding: 0 11px 0 8px;
height: 30px;
line-height: 30px;
font-size: 18px;
font-size: 1.125rem;
font-family: ApexRounded, sans-serif;
font-weight: normal;
color: #3290d8;
background-color: #eaf4fb;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
html.hq.explore .search-suggestions .tag-list .tag a:hover {
color: #1e679f;
}
html.hq.explore .chunklet-wrapper:first-child .recede {
margin-top: -25px !important;
}
html.hq.explore .chunklet > .recede {
margin-top: 0 !important;
}
html.hq.explore .projects {
margin-top: 12px;
}
html.hq.explore .projects h2 {
position: relative;
color: #a7a7a7;
font-size: 26px;
line-height: 30px;
margin: 0 0 20px 0;
padding: 0 0 0 45px;
}
html.hq.explore .projects h2:before {
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/awards/featured_small_bw.png');
width: 36px;
height: 45px;
opacity: 0.18;
filter: alpha(opacity=18);
background-repeat: no-repeat;
content: ' ';
position: absolute;
z-index: 999;
top: -8px;
left: 0;
}
html.hq.explore .projects li {
width: 300px;
}
html.hq.explore .projects li .thumb img {
width: 300px;
}
html.hq.explore .projects li .thumb a {
height: 193px;
}
html.hq.explore .projects li .by {
top: 22px !important;
}
html.hq.explore .projects li .by .fork-icn:before {
font-size: 17px;
font-size: 1.0625rem;
line-height: .5;
}
html.hq.explore .projects li .featured {
display: none;
}
html.hq.explore .projects .pagination .next {
margin-right: 19px;
}
html.hq.explore .projects .title {
font-weight: bold;
}
html.hq.explore .ctrl-favorites {
margin-right: -6px;
margin-top: -2px;
}
html.hq.explore .ctrl-favorites .btn {
padding: 7px 10px;
}
html.hq.explore .ctrl-favorites .btn .label {
display: none;
}
html.hq.explore .outer.content,
html.hq.explore .chunklet.loading {
background: #f0f0f0;
}
html.hq.explore .outer.content.trending {
background: #fff;
}
html.hq.explore .stream {
list-style: none;
margin: -10px 0 0 0;
padding: 0;
}
html.hq.explore .stream .btn {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}
html.hq.explore .stream > li {
margin: 0;
padding: 23px 0;
border-bottom: 1px solid #e0e1e7;
*zoom: 1;
}
html.hq.explore .stream > li:before,
html.hq.explore .stream > li:after {
display: table;
content: "";
}
html.hq.explore .stream > li:after {
clear: both;
}
html.hq.explore .stream > li:last-child {
border-bottom: 0 none;
}
html.hq.explore .stream .type {
float: left;
width: 60px;
height: 60px;
padding: 14px 16px 0 0;
margin-left: -2px;
color: #dcdcdc;
font-family: Icons;
font-size: 60px;
}
html.hq.explore .stream .type.Tcomment::before {
content: '>';
}
html.hq.explore .stream .type.Treply::before {
content: 'M';
}
html.hq.explore .stream .type.Tproject::before {
content: 'K';
font-size: 1.25em;
padding: 19px 16px 0 0;
}
html.hq.explore .stream .type.Tachievement::before {
content: 'K';
font-size: 1.25em;
padding: 19px 16px 0 0;
}
html.hq.explore .stream .type.Tfavorite::before {
content: 'D';
}
html.hq.explore .stream .projects,
html.hq.explore .stream .feed {
float: left;
}
html.hq.explore .stream .projects > ul {
margin: 0;
}
html.hq.explore .stream .projects > ul > li {
margin: 0;
}
html.hq.explore .stream .feed {
width: 546px;
list-style: none;
font-family: ApexRounded, sans-serif;
margin: 0 0 0 20px;
font-size: 16px;
line-height: 16px;
}
html.hq.explore .stream .highlight-items {
margin: 0;
list-style: none;
}
html.hq.explore .stream .highlight-items > li,
html.hq.explore .stream .highlight-items > div {
position: relative;
padding: 10px;
margin-bottom: 10px;
min-height: 60px;
background-color: white;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq.explore .stream .message {
margin: 0 0 5px 0;
font-size: 19px;
line-height: 19px;
font-weight: bold;
}
html.hq.explore .stream .feed > .message:first-letter {
text-transform: capitalize;
}
html.hq.explore .stream .time,
html.hq.explore .stream .notice-inline {
color: #b9b9b9;
margin-bottom: 8px;
font-size: 18px;
}
html.hq.explore .stream .time:first-letter {
text-transform: capitalize;
}
html.hq.explore .stream .challenge img {
width: 60px;
height: 68px;
float: left;
margin-right: 10px;
}
html.hq.explore .stream .challenge .message {
margin: 9px 0 0 70px;
font-size: 14px;
line-height: 16px;
}
html.hq.explore .stream .facelist a {
display: block;
position: relative;
float: left;
margin: 0 20px 20px 0;
}
html.hq.explore .stream .facelist img {
width: 60px;
height: 60px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq.explore .stream .facelist .heart {
position: absolute;
top: 88%;
left: 72%;
color: #ef5b3b;
font-size: 26px;
font-family: Icons;
}
html.hq.explore .stream .comment {
position: relative;
}
html.hq.explore .stream .comment,
html.hq.explore .stream .comment p {
line-height: 20px;
font-size: 18px;
font-family: ApexRounded, sans-serif;
padding: 0;
overflow-x: hidden;
}
html.hq.explore .stream .comment p {
margin: 0 0 -2px 0;
padding: 0;
}
html.hq.explore .stream .comment img {
vertical-align: middle;
width: 16px;
height: 16px;
margin: -4px 0 0 0;
}
html.hq.explore .stream .comment .avatar {
position: relative;
float: left;
display: block;
margin: 0 10px 0 0;
width: 60px;
}
html.hq.explore .stream .comment .avatar img {
width: 60px;
height: 60px;
margin: 0px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq.explore .stream .comment .staff {
display: none;
}
html.hq.explore .stream .comment .btns {
position: absolute;
top: 9px;
left: 100%;
margin-left: -35px;
}
html.hq.explore .stream .comment > .btns a {
font-size: 10px;
padding: 0px 6px;
}
html.hq.explore .stream .comment .meta > .stamp {
display: none;
}
html.hq.explore .stream .comment .nickname {
font-size: 19px;
}
html.hq.explore .stream .comment .message {
margin: 9px 0 0 0;
}
html.hq.explore .stream .comment .message p {
font-size: 14px;
line-height: 16px;
}
html.hq.explore .stream .comment .comment-body {
padding: 0;
}
html.hq.explore .stream .comment .comment-body:before {
display: none;
}
html.hq.explore .stream .comment-editor {
margin-bottom: 0;
}
html.hq.explore .stream .comment-editor .btns {
top: 0;
margin-left: -25px;
}
html.hq.explore .stream .comment-editor .avatar {
width: 45px;
}
html.hq.explore .stream .comment-editor .avatar img {
width: 100%;
height: auto;
}
html.hq.explore .stream .comment-editor .comment .message .btns {
position: relative;
margin-left: 0;
left: 0;
top: 0;
margin-top: 5px;
}
html.hq.explore .outer .nav-tabs a[data-chunklet=me]:before {
content: 'X';
font-size: 28px !important;
}
html.hq.explore .outer .nav-tabs a[data-chunklet=following]:before {
content: ';';
font-size: 28px !important;
}
html.hq.skills .sort {
height: 50px;
*zoom: 1;
}
html.hq.skills .sort:before,
html.hq.skills .sort:after {
display: table;
content: "";
}
html.hq.skills .sort:after {
clear: both;
}
html.hq.skills .sort .btn-group {
float: right;
}
html.hq ul.skills {
list-style: none;
margin: -10px;
padding: 0;
*zoom: 1;
}
html.hq ul.skills:before,
html.hq ul.skills:after {
display: table;
content: "";
}
html.hq ul.skills:after {
clear: both;
}
html.hq ul.skills li {
width: 220px;
float: left;
margin: 10px;
border-radius: 3px;
overflow: hidden;
background: #fefefe;
-webkit-box-shadow: 0 2px 0 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 2px 0 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 0 2px rgba(0, 0, 0, 0.05);
}
html.hq ul.skills li h2 {
font-weight: normal;
font-size: 18px;
line-height: 25px;
}
html.hq ul.skills li .graphic {
position: relative;
height: 220px;
background: #f0f0f0;
}
html.hq ul.skills li .progress-ring {
position: absolute;
top: 15px;
left: 24px;
position: relative;
width: 171px;
height: 200px;
display: inline-block;
height: 193px;
text-align: left;
}
html.hq ul.skills li .progress-ring:before {
content: '6';
font-family: Icons;
color: #ffffff;
margin: 0;
font-size: 245px;
line-height: 245px;
display: block;
position: absolute;
top: -19px;
left: -4px;
z-index: 0;
}
html.hq ul.skills li .progress-ring:before {
text-shadow: 0 0 2px rgba(0, 0, 0, 0.05);
}
html.hq ul.skills li .progress-ring > * {
position: relative;
text-align: left;
width: 171px;
height: 200px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
html.hq ul.skills li .progress-ring > *:before {
content: ' ';
font-family: Icons;
color: #00cd9f;
margin: 0;
font-size: 245px;
line-height: 245px;
display: block;
position: absolute;
top: -19px;
left: -4px;
z-index: 0;
}
html.hq ul.skills li .progress-ring:before,
html.hq ul.skills li .progress-ring > *:before {
font-size: 241px;
line-height: 241px;
left: -3px;
top: -21px;
}
html.hq ul.skills li .progress-ring * {
display: block;
width: 100%;
height: 100%;
}
html.hq ul.skills li .progress-ring.progress-0 > *:before {
display: none;
}
html.hq ul.skills li .progress-ring.progress-1 > *:before {
content: '1';
}
html.hq ul.skills li .progress-ring.progress-2 > *:before {
content: '2';
}
html.hq ul.skills li .progress-ring.progress-3 > *:before {
content: '3';
}
html.hq ul.skills li .progress-ring.progress-4 > *:before {
content: '4';
}
html.hq ul.skills li .progress-ring.progress-5 > *:before {
content: '5';
}
html.hq ul.skills li .progress-ring.progress-6 > *:before {
content: '6';
}
html.hq ul.skills li .progress-ring > * > * {
position: relative;
text-align: left;
width: 143.298px;
height: 168px;
display: inline-block;
}
html.hq ul.skills li .progress-ring > * > *,
html.hq ul.skills li .progress-ring > * > *:before {
left: 14px;
top: 12px;
}
html.hq ul.skills li .progress-ring > * > *:before {
text-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}
html.hq ul.skills li .progress-ring > * > *:before {
content: 'K';
font-family: Icons;
color: #ffffff;
margin: 0;
font-size: 205px;
line-height: 205px;
display: block;
position: absolute;
top: -16px;
left: -3px;
z-index: 0;
}
html.hq ul.skills li .progress-ring > * > * * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
html.hq ul.skills li .patch {
display: block;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
position: relative;
z-index: 2;
}
html.hq ul.skills li .info {
background: url(/images/www/gra_skill_bottom_small.png?2) center top no-repeat;
position: relative;
height: 170px;
padding: 15px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html.hq ul.skills li .title {
margin-bottom: 5px;
font-weight: bold;
}
html.hq ul.skills li .description {
margin-bottom: 15px;
font-size: 14px;
line-height: 18px;
color: #505050;
}
html.hq ul.skills li .meta {
position: absolute;
bottom: 15px;
}
html.hq ul.skills li.featured .graphic {
background: url(/images/www/gra_skill_bg_featured.png);
}
html.hq ul.skills li.featured .info {
background-color: #fff8ca;
background-image: url(/images/www/gra_skill_bottom_small_featured.gif);
}
html.hq ul.skills li.featured .progress-ring:before {
color: #fff8ca;
}
html.hq ul.skills li.featured .progress-ring > * > *:before {
text-shadow: 0 0 40px rgba(255, 230, 50, 0.3);
}
html.hq ul.skills li:hover .patch,
html.hq ul.skills li:hover .progress-ring > * > *:before {
margin-top: -3px;
}
html.hq ul.skills .graphic:active .patch,
html.hq ul.skills .graphic:active .progress-ring > * > *:before {
margin-top: 0;
}
html.hq #skill ul.skills .challenges {
background: none;
}
html.hq.skill .content-page {
margin-top: 25px;
}
html.hq.skill header.skill-info {
height: 340px;
border-bottom: 0 none;
margin-bottom: 0;
font-size: 14px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
*zoom: 1;
}
html.hq.skill header.skill-info:before,
html.hq.skill header.skill-info:after {
display: table;
content: "";
}
html.hq.skill header.skill-info:after {
clear: both;
}
html.hq.skill header.skill-info h1 {
width: 360px;
margin-top: 8px;
font-size: 36px;
line-height: 36px;
}
html.hq.skill header.skill-info .info {
width: 300px;
float: left;
}
html.hq.skill header.skill-info .description {
color: #808080;
font-size: 16px;
line-height: 22px;
}
html.hq.skill header.skill-info .progress-ring {
position: relative;
width: 302px;
height: 354px;
display: inline-block;
height: 341px;
text-align: left;
position: absolute;
top: 15px;
left: 50%;
margin-left: -151px;
z-index: 1;
}
html.hq.skill header.skill-info .progress-ring:before {
content: '6';
font-family: Icons;
color: #ffffff;
margin: 0;
font-size: 432px;
line-height: 432px;
display: block;
position: absolute;
top: -33px;
left: -6px;
z-index: 0;
}
html.hq.skill header.skill-info .progress-ring:before {
text-shadow: 0 0 2px rgba(0, 0, 0, 0.05);
}
html.hq.skill header.skill-info .progress-ring > * {
position: relative;
text-align: left;
width: 302px;
height: 354px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
html.hq.skill header.skill-info .progress-ring > *:before {
content: ' ';
font-family: Icons;
color: #00cd9f;
margin: 0;
font-size: 432px;
line-height: 432px;
display: block;
position: absolute;
top: -33px;
left: -6px;
z-index: 0;
}
html.hq.skill header.skill-info .progress-ring:before,
html.hq.skill header.skill-info .progress-ring > *:before {
font-size: 426px;
line-height: 426px;
left: -6px;
top: -38px;
}
html.hq.skill header.skill-info .progress-ring * {
display: block;
width: 100%;
height: 100%;
}
html.hq.skill header.skill-info .progress-ring.progress-0 > *:before {
display: none;
}
html.hq.skill header.skill-info .progress-ring.progress-1 > *:before {
content: '1';
}
html.hq.skill header.skill-info .progress-ring.progress-2 > *:before {
content: '2';
}
html.hq.skill header.skill-info .progress-ring.progress-3 > *:before {
content: '3';
}
html.hq.skill header.skill-info .progress-ring.progress-4 > *:before {
content: '4';
}
html.hq.skill header.skill-info .progress-ring.progress-5 > *:before {
content: '5';
}
html.hq.skill header.skill-info .progress-ring.progress-6 > *:before {
content: '6';
}
html.hq.skill header.skill-info .progress-ring > * > * {
position: relative;
text-align: left;
width: 253.076px;
height: 296px;
display: inline-block;
}
html.hq.skill header.skill-info .progress-ring > * > *,
html.hq.skill header.skill-info .progress-ring > * > *:before {
left: 25px;
top: 21px;
}
html.hq.skill header.skill-info .progress-ring > * > *:before {
text-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}
html.hq.skill header.skill-info .progress-ring > * > *:before {
content: 'K';
font-family: Icons;
color: #ffffff;
margin: 0;
font-size: 362px;
line-height: 362px;
display: block;
position: absolute;
top: -28px;
left: -5px;
z-index: 0;
}
html.hq.skill header.skill-info .progress-ring > * > * * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
html.hq.skill .skill-info:after {
display: block;
content: ' ';
position: absolute;
background: url(/images/www/gra_skill_bottom.png?4) top center no-repeat;
width: 990px;
height: 51px;
top: 340px;
left: 9px;
z-index: 0;
}
html.hq.skill .tabs {
position: absolute;
margin-top: -69px;
*zoom: 1;
}
html.hq.skill .tabs:before,
html.hq.skill .tabs:after {
display: table;
content: "";
}
html.hq.skill .tabs:after {
clear: both;
}
html.hq.skill .nav-tabs {
float: left;
background: #fefefe;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
html.hq.skill .nav-tabs a,
html.hq.skill .nav-tabs a:hover {
color: rgba(0, 0, 0, 0);
color: #fefefe;
}
html.hq.skill .nav-tabs a[data-chunklet=challenges]:before {
content: 'K';
font-size: 24px;
}
html.hq.skill .nav-tabs a[data-chunklet=gallery]:before {
content: 'H';
font-size: 24px;
}
html.hq.skill .challenges > .status {
position: absolute;
right: 20px;
margin: -18px 0 0 0 !important;
}
html.hq.skill .challenges > .status .counter {
margin-left: 15px;
float: right;
}
html.hq.skill .challenges > .status .medallion {
position: relative;
text-align: left;
width: 40px;
height: 47px;
display: inline-block;
}
html.hq.skill .challenges > .status .medallion:before {
content: 'K';
font-family: Icons;
color: #d5d5d5;
margin: 0;
font-size: 57px;
line-height: 57px;
display: block;
position: absolute;
top: -4px;
left: -1px;
z-index: 0;
}
html.hq.skill .challenges > .status .medallion * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
html.hq.skill .challenges > .status .medallion.approved:before {
color: #00cd9f;
}
html.hq.skill .challenges > .status .medallion.rejected:before {
color: #fd4d10;
}
html.hq.skill .challenges > .status .medallion.pending:after,
html.hq.skill .challenges > .status .medallion.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
html.hq.skill .challenges > .status .medallion.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
html.hq.skill .challenges > .status .medallion.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
html.hq.skill .challenges > .status .message {
text-align: right;
font-size: 15px;
line-height: 17px;
font-weight: bold;
color: #c2c2c2;
width: 185px;
float: right;
margin-top: 4px;
}
html.hq.skill .content-page > .chunklet-wrapper > .chunklet > section {
padding: 25px 25px 0 25px;
margin: 0 -25px 0 -25px;
}
html.hq.skill .gallery ul {
margin-top: 5px;
}
html.hq.skill .gallery li {
width: 300px !important;
-webkit-box-shadow: 0 2px 0 1px rgba(0, 0, 0, 0.06);
-moz-box-shadow: 0 2px 0 1px rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 0 1px rgba(0, 0, 0, 0.06);
}
html.hq.skill .gallery li .thumb img {
height: 193px;
}
html.hq.skill .challenges {
margin-top: 8px;
}
html.hq.skill .challenges > ul {
list-style: none;
margin: 20px 0 0 0;
padding: 0;
}
html.hq.skill .challenges > ul > li {
margin: 0 0 50px 0;
}
html.hq.skill .challenges > ul > li:last-child {
margin-bottom: 0;
}
html.hq.skill .challenges .references {
float: left;
max-width: 640px;
}
html.hq.skill .challenges .references > ul {
list-style: none;
margin: 0 0 -20px 0;
padding: 0;
*zoom: 1;
}
html.hq.skill .challenges .references > ul:before,
html.hq.skill .challenges .references > ul:after {
display: table;
content: "";
}
html.hq.skill .challenges .references > ul:after {
clear: both;
}
html.hq.skill .challenges .references > ul li {
background: #f6f6f6;
padding: 15px;
margin: 0 20px 20px 0;
width: 300px;
height: 230px;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
html.hq.skill .challenges .references > ul li .title {
font-weight: bold;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
html.hq.skill .challenges .references > ul li .thumb {
display: block;
margin-bottom: 10px;
height: 154px;
overflow: hidden;
}
html.hq.skill .challenges .references > ul li .thumb img {
width: 100%;
}
html.hq.skill .challenges .references > ul li .source {
font-size: 13px;
margin-top: -4px;
}
html.hq.skill .challenges .references > ul li:nth-child(n+5) {
display: none;
}
html.hq.skill .challenges .details {
position: relative;
*zoom: 1;
padding-bottom: 30px;
margin-bottom: -15px;
border-bottom: 1px solid #eee;
}
html.hq.skill .challenges .details:before,
html.hq.skill .challenges .details:after {
display: table;
content: "";
}
html.hq.skill .challenges .details:after {
clear: both;
}
html.hq.skill .challenges .details .subhead {
color: #d5d5d5;
font-size: 16px;
font-weight: bold;
margin-bottom: 2px;
}
html.hq.skill .challenges .details .subhead:first-letter {
text-transform: capitalize;
}
html.hq.skill .challenges .description {
font-size: 18px;
width: 300px;
float: left;
}
html.hq.skill .challenges p {
margin-bottom: 20px;
}
html.hq.skill .challenges .status {
color: #8b8b8b;
font-size: 14px;
line-height: 18px;
margin: 5px 0 15px 0;
}
html.hq.skill .challenges .status p {
margin: 0;
}
html.hq.skill .challenges .status strong {
font-size: 16px;
}
html.hq.skill .challenges .status.approved {
color: #00cd9f;
}
html.hq.skill .challenges .status.rejected {
color: #fd4d10;
}
html.hq.skill .challenges .btn {
font-size: 17px;
line-height: 18px;
padding: 14px 36px;
}
html.hq.skill .challenges .btn:before {
content: 'I';
font-family: Icons;
font-size: 18px;
margin: 0 8px 0 0;
}
html.hq.skill .challenges h3.header {
position: relative;
font-size: 30px;
margin: 0 0 30px 0;
padding: 0 0 0 70px;
}
html.hq.skill .challenges h3.header .title {
padding: 0 0 3px 0;
border-bottom: 5px solid #ffe14c;
}
html.hq.skill .challenges h3.header .title a {
color: #333;
}
html.hq .skill-patch-grid {
width: 100%;
height: 390px;
}
html.hq .skill-header,
html.hq .skill-challenges,
html.hq .skill-tools {
width: 940px;
margin: auto;
}
html.hq .skill-header,
html.hq .skill-tools {
position: relative;
background: #ffffff;
}
html.hq .skill-header {
padding: 25px 0 30px 0;
}
html.hq .skill-challenges {
padding: 40px 0 30px 0;
}
html.hq .skill-challenges .sort {
height: 50px;
margin-top: -2px;
}
html.hq .skill-challenges .h2 {
line-height: 1;
margin-bottom: 30px;
clear: none;
}
html.hq .skill-tools {
padding: 30px 0 40px 0;
margin-bottom: -43px;
}
html.hq .skill-header:before,
html.hq .skill-header:after,
html.hq .skill-tools:before,
html.hq .skill-tools:after {
content: "";
position: absolute;
background: #ffffff;
top: 0;
bottom: 0;
width: 9999px;
}
html.hq .skill-header:before,
html.hq .skill-tools:before {
right: 100%;
}
html.hq .skill-header:after,
html.hq .skill-tools:after {
left: 100%;
}
html.hq .maker-challenges {
position: relative;
}
html.hq .maker-challenges .signin {
display: block;
position: absolute;
top: -5px;
left: -5px;
width: 960px;
height: 192px;
z-index: 2;
}
html.hq .maker-challenges-heading {
margin-bottom: 20px;
}
html.hq .maker-challenges-heading .avatar {
position: relative;
top: -3px;
margin-right: 10px;
}
html.hq .skill-achievement-list {
z-index: 1;
position: relative;
margin-bottom: 40px;
}
html.hq.skill .outer .inner {
width: 100%;
}
html.hq.skill #top .inner {
width: 940px;
}
html.hq.skill .content > h2 {
margin: 25px 0 10px 0;
}
html.hq .skill-challenges-list li {
width: 460px;
height: 388px;
margin: 0 20px 20px 0;
}
html.hq .skill-challenges-list li .summary-card {
height: 388px;
}
html.hq .skill-challenges-list li .summary-card .inner-wrapper {
height: 388px;
}
html.hq .skill-challenges-list li:nth-child(2n) {
margin-right: 0;
}
html.hq .skill-summary {
text-align: center;
margin-bottom: 35px;
}
html.hq .skill-summary .lrg-heading {
margin-bottom: 10px;
}
html.hq .skill-summary p {
font-size: 20px;
font-size: 1.25rem;
color: #666666;
line-height: 1.5;
}
html.hq .skill-summary :last-child {
margin-bottom: 0;
}
html.hq.pole-artist #content,
html.hq.skills #content,
html.hq.page #content {
background-image: url(/images/www/backgrounds/skills/artist.png);
}
html.hq.pole-builder #content {
background-image: url(/images/www/backgrounds/skills/builder.png);
}
html.hq.pole-engineer #content {
background-image: url(/images/www/backgrounds/skills/engineer.png?2);
}
html.hq.pole-hacker #content {
background-image: url(/images/www/backgrounds/skills/hacker.png);
}
html.hq.pole-farmer #content {
background-image: url(/images/www/backgrounds/skills/farmer.png);
}
html.hq.pole-scientist #content {
background-image: url(/images/www/backgrounds/skills/scientist.png);
}
html.hq.fontface .skill .references li .meta {
padding-left: 30px;
position: relative;
}
html.hq.fontface .skill .references li .meta:before {
display: block;
position: absolute;
top: 3px;
left: 0;
font-family: Icons;
font-size: 26px;
color: #d0d0d0;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}
html.hq.fontface .skill .references li.type-video .meta:before {
content: 'J';
font-size: 20px;
}
html.hq.fontface .skill .references li.type-photo .meta:before {
content: 'I';
font-size: 24px;
}
html.hq.fontface .skill .references li.type-diy .meta:before {
content: '@';
top: 6px;
font-size: 31px;
}
html.hq.fontface .skill .references li.type-page .meta:before {
content: 'O';
font-size: 29px;
top: 7px;
}
html.hq.fontface .skill .tools h2:before {
content: 'Q';
font-family: Icons;
color: rgba(0, 0, 0, 0.2);
margin: 2px 6px 0 0;
}
html.hq.fontface .challenges > ul > li > .header .medallion {
position: relative;
text-align: left;
width: 57px;
height: 67px;
display: inline-block;
position: absolute;
top: -13px;
left: 1px;
}
html.hq.fontface .challenges > ul > li > .header .medallion:before {
content: 'K';
font-family: Icons;
color: #d5d5d5;
margin: 0;
font-size: 82px;
line-height: 82px;
display: block;
position: absolute;
top: -6px;
left: -1px;
z-index: 0;
}
html.hq.fontface .challenges > ul > li > .header .medallion * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
html.hq.fontface .challenges > ul > li > .header .medallion.approved:before {
color: #00cd9f;
}
html.hq.fontface .challenges > ul > li > .header .medallion.rejected:before {
color: #fd4d10;
}
html.hq.fontface .challenges > ul > li > .header .medallion.pending:after,
html.hq.fontface .challenges > ul > li > .header .medallion.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
html.hq.fontface .challenges > ul > li > .header .medallion.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
html.hq.fontface .challenges > ul > li > .header .medallion.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
html.hq .challenge .challenge-header {
width: 940px;
margin: auto;
}
html.hq .challenge .challenge-header {
position: relative;
background: #ffffff;
margin-top: 10px;
}
html.hq .challenge .challenge-header {
padding: 40px 0 30px 0;
}
html.hq .challenge .challenge-header .skill-link {
display: block;
position: relative;
height: 60px;
background-color: #efefef;
line-height: 60px;
margin-top: -40px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
font-size: 20px;
font-size: 1.25rem;
font-family: ApexRounded, sans-serif;
font-weight: bold;
color: #292929;
padding: 0 21px;
}
html.hq .challenge .challenge-header .skill-link:hover {
color: #2f93dc;
}
html.hq .challenge .challenge-header .skill-link:before,
html.hq .challenge .challenge-header .skill-link:after {
content: "";
border-width: 10px;
border-style: solid;
position: absolute;
top: -10px;
width: 10px;
height: 10px;
}
html.hq .challenge .challenge-header .skill-link:before {
border-color: #efefef #efefef transparent transparent;
-webkit-border-radius: 0 15px 0 0;
-moz-border-radius: 0 15px 0 0;
border-radius: 0 15px 0 0;
left: -20px;
}
html.hq .challenge .challenge-header .skill-link:after {
border-color: #efefef transparent transparent #efefef;
-webkit-border-radius: 15px 0 0 0;
-moz-border-radius: 15px 0 0 0;
border-radius: 15px 0 0 0;
right: -20px;
}
html.hq .challenge .challenge-header .skill-link img {
width: 40px;
margin-right: 15px;
margin-bottom: 5px;
}
html.hq .challenge .challenge-header .medallion-container {
text-align: center;
}
html.hq .challenge .challenge-header .medallion-container .skill-medallion {
position: relative;
text-align: left;
width: 80px;
height: 94px;
display: inline-block;
}
html.hq .challenge .challenge-header .medallion-container .skill-medallion:before {
content: 'K';
font-family: Icons;
color: #d5d5d5;
margin: 0;
font-size: 114px;
line-height: 114px;
display: block;
position: absolute;
top: -9px;
left: -2px;
z-index: 0;
}
html.hq .challenge .challenge-header .medallion-container .skill-medallion * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
html.hq .challenge .challenge-header .medallion-container .skill-medallion.approved:before {
color: #00cd9f;
}
html.hq .challenge .challenge-header .medallion-container .skill-medallion.rejected:before {
color: #fd4d10;
}
html.hq .challenge .challenge-header .medallion-container .skill-medallion.pending:after,
html.hq .challenge .challenge-header .medallion-container .skill-medallion.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
html.hq .challenge .challenge-header .medallion-container .skill-medallion.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
html.hq .challenge .challenge-header .medallion-container .skill-medallion.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
html.hq .challenge .challenge-header .medallion-container .skill-medallion .skill-text {
font-size: 36px;
font-size: 2.25rem;
position: absolute;
top: 26px;
left: 18px;
color: #fff;
text-indent: 0;
font-weight: bold;
line-height: 1;
}
html.hq .challenge .challenge-header .challenge-info {
margin-left: -20px;
width: 480px;
padding: 30px 0;
}
html.hq .challenge .challenge-header .challenge-info h1 {
font-size: 48px;
font-size: 3rem;
line-height: 1.05;
padding: 0 0 30px 0;
}
html.hq .challenge .challenge-header .challenge-info p {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.5;
color: #999;
}
html.hq .challenge .challenge-header .challenge-info .label {
display: inline-block;
background: #333;
padding: 10px;
font-size: 14px;
height: 14px;
font-family: Helvetica, arial, sans-serif;
font-weight: bold;
line-height: 1;
}
html.hq .challenge .challenge-header .challenge-info .difficulty-label {
position: relative;
top: -11px;
margin-left: 12px;
text-align: center;
background: #ffc000;
width: 44px;
-webkit-transition: width .2s ease-in-out;
-moz-transition: width .2s ease-in-out;
-ms-transition: width .2s ease-in-out;
-o-transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
color: white;
}
html.hq .challenge .challenge-header .challenge-info .difficulty-label:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 17px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 17px solid transparent;
border-right: 12px solid #ffc000;
position: absolute;
top: 0;
right: 100%;
z-index: 2;
}
html.hq .challenge .challenge-header .challenge-info .difficulty-label--hard {
background: #de5d41;
}
html.hq .challenge .challenge-header .challenge-info .difficulty-label--hard:before {
border-right-color: #de5d41;
}
html.hq .challenge .challenge-header .makeit {
position: absolute;
top: 50%;
right: 0;
margin-top: -30px;
height: 60px;
padding: 1em;
}
html.hq .challenge .challenge-header .makeit .diy-icn {
font-size: 32px;
font-size: 2rem;
font-weight: normal;
}
html.hq .challenge .challenge-header .makeit .label {
font-size: 24px;
font-size: 1.5rem;
}
html.hq .challenge .challenge-projects {
padding: 40px 0 30px 0;
}
html.hq .challenge .challenge-projects .sort {
height: 50px;
margin-top: -2px;
}
html.hq .challenge .challenge-projects .h2 {
line-height: 1;
margin-bottom: 30px;
clear: none;
}
html.hq .challenge .challenge-projects-list li:nth-child(3n) {
margin-right: 0;
}
html.hq .challenge .challenge-projects-list > li {
width: 300px;
margin: 0 20px 20px 0;
padding: 0 0 8px 0;
float: left;
position: relative;
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq .challenge .challenge-projects-list > li .thumb {
overflow: hidden;
display: block;
position: relative;
line-height: 0;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
html.hq .challenge .challenge-projects-list > li .thumb > a {
display: block;
text-decoration: none;
height: 193px;
}
html.hq .challenge .challenge-projects-list > li .thumb > a:active {
margin-top: 1px;
margin-bottom: -1px;
}
html.hq .challenge .challenge-projects-list > li .thumb img {
min-height: 0;
width: 100%;
height: auto;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
position: absolute;
}
html.hq .challenge .challenge-projects-list > li.reference .thumb img {
min-width: 0;
min-height: 100%;
width: auto;
}
html.hq .challenge .challenge-projects-list > li.reference .meta {
padding-left: 15px;
}
html.hq .challenge .challenge-projects-list > li.reference .meta .title {
padding-right: 60px;
}
html.hq .challenge .challenge-projects-list > li .meta {
position: relative;
padding: 7px 15px 6px 56px;
margin: 5px 0 0 0;
height: 45px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
html.hq .challenge .challenge-projects-list > li .meta .title,
html.hq .challenge .challenge-projects-list > li .meta .by {
display: block;
position: absolute;
white-space: nowrap;
text-overflow: ellipsis;
text-rendering: optimizelegibility;
overflow: hidden;
width: 100%;
z-index: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin-left: 4px;
}
html.hq .challenge .challenge-projects-list > li .meta .title {
padding-right: 165px;
line-height: 20px;
font-size: 16px;
font-family: ApexRounded, sans-serif;
font-weight: bold;
}
html.hq .challenge .challenge-projects-list > li .meta .by {
padding-right: 60px;
font-size: 12px;
top: 24px;
}
html.hq .challenge .challenge-projects-list > li .meta .avatar {
position: absolute;
top: 1px;
left: 7px;
width: 45px;
height: 45px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq .challenge .challenge-projects-list > li .by {
color: #454545;
top: 22px !important;
}
html.hq .challenge .challenge-projects-list > li .stats {
display: block;
float: right;
font-size: 16px;
font-family: ApexRounded, sans-serif;
position: relative;
z-index: 1;
font-weight: bold;
}
html.hq .challenge .challenge-projects-list > li .comments {
display: inline-block;
margin: -2px 5px 0 0;
}
html.hq .challenge .challenge-projects-list > li .comments:after {
content: '>';
font-family: Icons;
font-size: 1.2em;
display: inline-block;
vertical-align: middle;
margin: -3px 0 0 5px;
color: #ccc;
}
html.hq .challenge .challenge-projects-list > li .ctrl-favorites {
display: inline-block;
}
html.hq .challenge .challenge-projects-list > li .comments,
html.hq .challenge .challenge-projects-list > li .ctrl-favorites {
vertical-align: middle;
}
html.hq .challenge .challenge-projects-list > li.reference .awards {
pointer-events: none;
display: block;
position: absolute;
top: 10px;
right: 10px;
opacity: 0.85;
filter: alpha(opacity=85);
}
html.hq .challenge .challenge-projects-list > li.reference .awards > * {
display: block;
float: left;
margin-left: 5px;
}
html.hq .challenge .challenge-projects-list .ref-indicator {
position: relative;
width: 52px;
height: 52px;
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
background: rgba(0, 0, 0, 0.5);
}
html.hq .challenge .challenge-projects-list .ref-indicator .link-icn {
position: absolute;
top: 50%;
left: 50%;
color: white;
font-size: 23px;
font-size: 1.4375rem;
margin-left: -10px;
margin-top: -10px;
}
html.hq .challenge .challenge-projects-list .awards {
display: none;
}
html.hq .challenge .challenge-projects-list .featured a {
margin-top: 1px;
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/awards/featured.png');
width: 52px;
height: 63px;
}
html.hq .challenge .challenge-header:before,
html.hq .challenge .challenge-header:after {
content: "";
position: absolute;
background: #ffffff;
top: 0;
bottom: 0;
width: 9999px;
z-index: -1;
}
html.hq .challenge .challenge-header:before {
right: 100%;
}
html.hq .challenge .challenge-header:after {
left: 100%;
}
html.hq.project {
/**********************************************************
* "Still Processing" Graphic *
**********************************************************/
/**********************************************************
* Viewer / Shots *
* (hero shot of the project) *
**********************************************************/
/**********************************************************
* Social Media Buttons *
* (see ../../_inc/components/social-media.less) *
**********************************************************/
/**********************************************************
* Favorites *
**********************************************************/
/**********************************************************
* Shots List *
* (shown if there are more than one shot) *
**********************************************************/
/**********************************************************
* Individual Comment *
**********************************************************/
/**********************************************************
* Comments Container *
**********************************************************/
}
html.hq.project section.project {
*zoom: 1;
}
html.hq.project section.project:before,
html.hq.project section.project:after {
display: table;
content: "";
}
html.hq.project section.project:after {
clear: both;
}
html.hq.project .outer.header,
html.hq.project .outer.content {
background: #fafafa;
}
html.hq.project .notification:last-child {
margin-bottom: 20px !important;
}
html.hq.project .box-remake .row-fluid > .span4 {
width: 34.014894%;
}
html.hq.project .box-remake,
html.hq.project .box-remake .info-icn {
cursor: help;
}
html.hq.project.lt-ie9 .row-fluid > .span4 {
width: 31.5%;
}
html.hq.project .box-remake p.remake-text {
font-family: ApexRounded, sans-serif;
text-align: right;
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.2;
color: #292929;
padding: 2px 20px 0 0;
cursor: help;
}
html.hq.project .box-remake p.remake-text .remake-text-padded {
padding-top: 10px;
display: inline-block;
}
html.hq.project #challenge-note {
position: absolute;
top: 13px;
right: 60px;
text-align: right;
width: 250px;
font-size: 16px;
line-height: 20px;
font-family: ApexRounded, sans-serif;
}
html.hq.project #challenge-note span {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
html.hq.project #challenge-note .title {
font-weight: bold;
font-size: 20px;
margin-bottom: 3px;
}
html.hq.project .processing p {
padding-top: 480px;
text-align: center;
font-size: 24px;
font-family: ApexRounded;
font-weight: bold;
}
html.hq.project .viewer,
html.hq.project .viewer .slideshow,
html.hq.project .viewer .shots {
position: relative;
}
html.hq.project .viewer .thumbs {
top: 15px;
left: 15px;
right: 15px;
position: absolute;
z-index: 400;
opacity: 0;
filter: alpha(opacity=0);
}
html.hq.project .viewer .thumbs a {
position: relative;
display: block;
float: right;
margin: 0 0 15px 15px;
width: 130px;
height: 70px;
background-color: #f0f0f0;
background-size: 100%;
border: 3px solid #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
html.hq.project .viewer .thumbs a.video:before {
font-size: 20px;
font-family: Icons;
color: #fff;
position: absolute;
content: 'G';
left: 50%;
top: 50%;
margin: -16px 0 0 -14px;
padding: 4px 8px 4px 10px;
background: rgba(0, 0, 0, 0.7);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq.project .viewer .thumbs a:last-child {
margin-right: 0;
}
html.hq.project .viewer .thumbs .add-shot {
background-color: #318ee3;
}
html.hq.project .viewer .thumbs .add-shot:before {
content: 'I';
display: block;
font-family: Icons;
font-size: 34px;
margin-left: 47px;
margin-top: 17px;
color: white;
}
html.hq.project .viewer .thumbs .add-shot:after {
content: 'Add More Shots';
font-family: ApexRounded, sans-serif;
display: block;
text-align: center;
margin-top: 5px;
font-size: 16px;
color: white;
}
html.hq.project .viewer .caption {
margin: 0;
font-size: 20px;
line-height: 28px;
}
html.hq.project .viewer .caption textarea {
height: 80px !important;
}
html.hq.project .viewer .shots {
margin: 0;
}
html.hq.project .viewer .shots .image,
html.hq.project .viewer .shots .image img {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
html.hq.project .viewer .shots .image img,
html.hq.project .viewer .shots video,
html.hq.project .viewer .shots .video-js {
width: 940px !important;
height: 626.6666666666666px !important;
}
html.hq.project .viewer .shots .video-js:-webkit-full-screen,
html.hq.project .viewer .shots .video-js:-webkit-full-screen video {
width: 100% !important;
height: 100% !important;
}
html.hq.project .viewer .shots .video-js:-moz-full-screen,
html.hq.project .viewer .shots .video-js:-moz-full-screen video {
width: 100% !important;
height: 100% !important;
}
html.hq.project .viewer .shots .video-js.vjs-fullscreen,
html.hq.project .viewer .shots .video-js.vjs-fullscreen video {
width: 100% !important;
height: 100% !important;
}
html.hq.project .social-media {
margin: 0;
}
html.hq.project .social-media a {
vertical-align: middle;
margin: 0 .4em;
}
html.hq.project .social-media .hidden {
display: none;
}
html.hq.project .ctrl-favorites {
margin: 15px 0 0 0;
float: right;
}
html.hq.project .btn-favorite.on i {
color: #ff0000;
}
html.hq.project .shots {
height: 640px;
}
html.hq.project .shots ul {
list-style: none;
margin: -10px;
padding: 0;
*zoom: 1;
}
html.hq.project .shots ul:before,
html.hq.project .shots ul:after {
display: table;
content: "";
}
html.hq.project .shots ul:after {
clear: both;
}
html.hq.project .shots ul li {
float: left;
margin: 10px;
position: relative;
width: 460px;
}
html.hq.project .shots ul li .image,
html.hq.project .shots ul li .image img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq.project .shots ul li .media img,
html.hq.project .shots ul li .media video,
html.hq.project .shots ul li .media .video-js {
width: 460px !important;
height: 306.66666666666663px !important;
}
html.hq.project .shots ul li:nth-child(2n+1) {
clear: left;
}
html.hq.project .comments-header {
position: relative;
}
html.hq.project .comments-header .anonymous-user {
position: absolute;
right: 0;
z-index: 1;
top: 6px;
}
html.hq.project .comments .comment {
font-size: 16px;
font-size: 1rem;
position: relative;
color: #333333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html.hq.project .comments .comment .meta a,
html.hq.project .comments .comment a {
color: #3290d8 !important;
font-weight: bold;
}
html.hq.project .comments .comment .meta {
font-size: 18px;
font-size: 1.125rem;
margin: 0 0 10px 0;
display: block;
}
html.hq.project .comments .comment .meta a {
max-width: 250px;
font-family: ApexRounded, sans-serif;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 26px;
margin-right: 5px;
}
html.hq.project .comments .comment .stamp {
color: #a0a0a0;
font-size: 13px;
font-size: 0.8125rem;
font-weight: normal;
display: inline-block;
overflow: hidden;
}
html.hq.project .comments .comment .avatar {
width: 50px;
position: relative;
}
html.hq.project .comments .comment .avatar img {
height: auto;
width: 100%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq.project .comments .comment .staff {
display: inline-block;
background: #53f49a;
color: #2f2f2f;
text-align: center;
line-height: 15px;
font-size: 13px;
font-family: ApexRounded, sans-serif;
padding-top: 3px;
position: absolute;
bottom: -10px;
left: 50%;
width: 44px;
margin-left: -22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
html.hq.project .comments .comment .message p {
margin-bottom: 16px;
font-size: 16px;
}
html.hq.project .comments .comment .message p:last-child {
margin-bottom: 0;
}
html.hq.project .comments .comment .message img {
vertical-align: middle;
width: 26px;
height: 26px;
margin: -5px 0 0 0;
}
html.hq.project .comments .comment .message .btns .btn {
margin-right: 3px;
}
html.hq.project .comments .comment .btns {
display: none;
}
html.hq.project .outer.comments {
background: rgba(255, 255, 255, 0.07);
}
html.hq.project .outer.comments h2 {
margin-top: 0;
}
html.hq.project .outer.comments h3 {
font-size: 20px;
margin-bottom: 10px;
}
html.hq.project .outer.comments .list {
overflow: hidden;
*zoom: 1;
}
html.hq.project .outer.comments .list:before,
html.hq.project .outer.comments .list:after {
display: table;
content: "";
}
html.hq.project .outer.comments .list:after {
clear: both;
}
html.hq.project .outer.comments .list .editor {
float: left !important;
}
html.hq.project .outer.comments .loading {
font-size: 20px;
padding: 0 0 20px 0;
}
html.hq.project .more-projects {
margin: 30px 0 0 0;
}
html.hq.project .outer.header .media-body {
margin-left: 79px;
}
html.hq.project .outer.header .media-body .media-body {
margin-left: 40px;
}
html.hq.project .outer.header h1 {
width: auto;
line-height: auto;
font-weight: bold;
}
html.hq.project .project-header header {
line-height: 1;
}
html.hq.project .project-header .inline-list > li {
position: relative;
margin-right: 5px;
}
html.hq.project .project-header .inline-list > li:last-child {
margin: 0;
}
html.hq.project .project-header .inline-list > .project-featured {
margin-right: 14px;
}
html.hq.project .project-header .inline-list > .project-achievements {
margin-right: 20px;
}
html.hq.project .project-header .inline-list .project-achievements .challenge {
list-style: none;
margin-bottom: 0;
}
html.hq.project .project-header .inline-list .project-achievements .challenge .approved {
position: absolute;
z-index: 1;
left: 0;
}
html.hq.project .project-header-fork:before {
font-size: 60px;
font-size: 3.75rem;
}
html.hq.project .project-achievements {
margin-right: 20px;
}
html.hq.project .project-edit {
text-align: right;
}
html.hq.project .project-edit .inline-list li {
margin-right: 10px;
}
html.hq.project .project-edit .inline-list li:last-child {
margin-right: 0;
}
html.hq.project .project-actions {
float: left;
padding-left: 0;
}
html.hq.project .project-actions .inline-list li {
margin-right: 20px;
}
html.hq.project .achievement-featured {
margin-top: -2px;
}
html.hq.project .footer-content {
padding: 20px 0;
}
html.hq.project .footer-content .forks .projects {
margin-bottom: 60px;
}
html.hq #comments-wrapper {
margin-bottom: 60px;
}
html.hq .more-projects-wrapper {
margin-top: -60px;
}
html.hq.fontface .shots h2:before {
content: 'H';
font-family: Icons;
margin-right: 10px;
}
html.hq.no-fontface .back-to-portfolio {
display: none;
}
html.hq.portfolio #top {
background: #dddddd !important;
}
html.hq.portfolio .notification:last-child {
margin-bottom: 20px !important;
}
html.hq .maker-empty {
display: block;
width: 100%;
text-align: center;
}
html.hq #section-projects .projects li {
padding: 0 0 7px 0 !important;
}
html.hq #section-projects .projects li .ctrl-favorites {
margin-right: 13px;
}
html.hq #section-projects .meta {
height: 22px !important;
overflow: hidden;
margin: 10px 0 0 !important;
padding: 0 0 0 11px !important;
font-weight: bold;
}
html.hq #section-projects .meta .avatar,
html.hq #section-projects .meta .by {
display: none !important;
}
html.hq #section-projects .meta .title {
font-size: 18px !important;
line-height: 22px !important;
}
html.hq #section-projects .projects .size-full {
width: 460px;
}
html.hq #section-projects .projects .size-full .thumb img {
width: 460px !important;
height: 310px !important;
}
html.hq #section-projects .projects .size-poster .thumb img {
width: 960px !important;
height: 627px !important;
}
html.hq #section-projects .size-full {
width: 460px;
}
html.hq #section-projects .size-web_460 img {
width: 460px;
height: 306px;
}
html.hq #section-projects.cols1 ul li,
html.hq #section-projects .size-poster {
width: 940px !important;
}
html.hq #section-favorites .projects li {
width: 300px;
}
html.hq #section-favorites .projects li .thumb img {
width: 300px !important;
height: 200px !important;
}
html.hq.portfolio .patches li {
position: relative;
text-align: left;
width: 140px;
height: 164px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
html.hq.portfolio .patches li:before {
content: 'K';
font-family: Icons;
color: rgba(0, 0, 0, 0.1);
margin: 0;
font-size: 200px;
line-height: 200px;
display: block;
position: absolute;
top: -15px;
left: -3px;
z-index: 0;
}
html.hq.portfolio .patches li * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
html.hq.portfolio .patches li.approved:before {
color: #00cd9f;
}
html.hq.portfolio .patches li.rejected:before {
color: #fd4d10;
}
html.hq.portfolio .patches li.pending:after,
html.hq.portfolio .patches li.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
html.hq.portfolio .patches li.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
html.hq.portfolio .patches li.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
html.hq.portfolio .patches li.i1 {
left: 150px;
}
html.hq.portfolio .patches li.i2 {
left: 300px;
}
html.hq.portfolio .patches li.i3 {
left: 225px;
top: 132.18px;
}
html.hq.portfolio .patches li.i4 {
left: 225px;
top: -132.18px;
}
html.hq.portfolio .patches li.i5 {
left: 450px;
}
html.hq.portfolio .patches li.i6 {
left: 375px;
top: 132.18px;
}
html.hq.portfolio .patches li.i7 {
left: 75px;
top: -132.18px;
}
html.hq.portfolio .patches li.i8 {
left: 375px;
top: -132.18px;
}
html.hq.portfolio .patches li.i9 {
left: 0;
top: 0;
}
html.hq.portfolio .patches li.i10 {
left: 75px;
top: 132.18px;
}
html.hq.portfolio .patches li.i11 {
left: 525px;
top: 132.18px;
}
html.hq.portfolio .patches li.i12 {
left: 525px;
top: -132.18px;
}
html.hq.portfolio .patches li.i13 {
left: 600px;
}
html.hq.portfolio .patches li.i14 {
left: 675px;
top: -132.18px;
}
html.hq.portfolio .patches li.i15 {
left: 675px;
top: 132.18px;
}
html.hq.portfolio .patches li.i16 {
left: 750px;
}
html.hq.portfolio .patches li.i17 {
left: 825px;
top: -132.18px;
}
html.hq.portfolio .patches li.i18 {
left: 825px;
top: 132.18px;
}
html.hq.portfolio .patches li.i19 {
left: 900px;
}
html.hq.portfolio .patches li.i20 {
left: 975px;
top: -132.18px;
}
html.hq.portfolio .patches li.i21 {
left: 975px;
top: 132.18px;
}
html.hq.portfolio .patches li.i22 {
left: 1050px;
}
html.hq.portfolio .outer .nav-tabs a[data-chunklet=projects]:before {
content: 'H';
font-size: 28px !important;
}
html.hq.portfolio .outer .nav-tabs a[data-chunklet=favorites]:before {
content: 'D';
}
html.hq.portfolio .outer .nav-tabs a[data-chunklet=follows]:before {
content: 'X';
font-size: 28px !important;
}
html.hq.portfolio .outer .nav-tabs a[data-chunklet=skills]:before {
content: 'L';
font-size: 28px !important;
}
html.hq.portfolio .outer.header {
height: 315px;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html.hq.portfolio .outer.header .inner {
padding-top: 25px;
}
html.hq.portfolio .outer.header .bio,
html.hq.portfolio .outer.header h1 {
position: relative;
z-index: 2;
}
html.hq.portfolio .outer.header .bio {
float: left;
width: 300px;
min-height: 40px;
max-height: 100px;
margin-top: 5px;
font-family: ApexRounded, sans-serif;
font-size: 24px;
line-height: 24px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html.hq.portfolio .outer.header .bio.editable {
-webkit-transition: border-color 0.4s;
-moz-transition: border-color 0.4s;
-ms-transition: border-color 0.4s;
-o-transition: border-color 0.4s;
transition: border-color 0.4s;
}
html.hq.portfolio .outer.header .bio.editable:hover {
border-color: rgba(0, 0, 0, 0.05);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
html.hq.portfolio .outer.header .bio.editable,
html.hq.portfolio .outer.header textarea.bio {
padding: 5px;
margin: -5px -8px;
border: 3px solid rgba(0, 0, 0, 0);
}
html.hq.portfolio .outer.header textarea.bio {
height: 100px;
color: #2b2b2b !important;
}
html.hq.portfolio .outer.header .patches {
z-index: 0;
position: absolute;
left: 420px;
}
html.hq.portfolio .outer.header:before {
pointer-events: none;
content: "";
height: 10px;
width: 120%;
position: absolute;
top: 0;
left: -10%;
background-color: black;
opacity: 0.2;
z-index: 6;
}
html.hq.portfolio .outer.content {
background: #f7f7f7;
}
html.hq.portfolio .cta {
background: none !important;
}
html.hq.portfolio .cta .headers {
color: #333;
font-family: ApexRounded, sans-serif;
font-size: 26px;
text-decoration: none;
margin-top: 5px;
}
html.hq.portfolio .cta .headers .label {
display: inline-block;
text-align: left;
line-height: 30px;
max-width: 175px;
margin: 9px 0 5px 2px;
}
html.hq.portfolio .cta .details .step {
padding-top: 10px;
}
html.hq.portfolio .cta .step {
float: left;
width: 286px;
text-align: center;
padding: 0 10px 0 10px;
margin: 0;
}
html.hq.portfolio .cta .step-1 {
width: 283px;
border-right: 1px solid rgba(0, 0, 0, 0.05);
}
html.hq.portfolio .cta .step-3 {
width: 283px;
border-left: 1px solid rgba(0, 0, 0, 0.05);
}
html.hq.portfolio .cta .number {
vertical-align: top;
}
html.hq.portfolio .cta .incomplete .number {
background: url(/images/www/gra_stepicons_bg.png) center center no-repeat;
border: 0 none;
color: #454545;
width: 51px;
height: 51px;
margin: -4px 0 0 0;
padding: 16px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
html.hq.portfolio .cta .complete .number {
width: 48px;
height: 48px;
margin-top: -2px;
vertical-align: middle;
}
html.hq.portfolio .cta .desc {
display: block;
padding: 0 20px;
color: #333;
font-size: 15px;
line-height: 20px;
text-decoration: none;
text-align: left;
margin: 20px 0px;
}
html.hq.portfolio .cta .sub-column {
display: block;
float: left;
width: 142px;
text-size: 8px;
text-align: center;
}
html.hq.portfolio .cta .sub-column .btn {
width: 90px;
color: #ffffff;
font-size: 14px;
margin: 10px 0px;
}
html.hq.portfolio .cta .sub-column:first-child .btn {
width: 60px;
}
html.hq.portfolio .cta .mini-panel {
display: block;
width: 80%;
padding: 5%;
color: #333;
margin: 0 20px;
background-color: rgba(0, 0, 0, 0.04);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
html.hq.portfolio .cta .mini-panel a {
font-weight: bold;
}
html.hq.portfolio ul.earned-skills {
list-style: none;
padding: 0;
margin: -5px -10px;
*zoom: 1;
}
html.hq.portfolio ul.earned-skills:before,
html.hq.portfolio ul.earned-skills:after {
display: table;
content: "";
}
html.hq.portfolio ul.earned-skills:after {
clear: both;
}
html.hq.portfolio ul.earned-skills li {
float: left;
width: 300px;
height: 97px;
position: relative;
padding: 29px 0 0 90px;
background: #fff;
margin: 5px 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html.hq.portfolio ul.earned-skills .title {
font-size: 18px;
font-family: ApexRounded, sans-serif;
white-space: nowrap;
}
html.hq.portfolio ul.earned-skills .stamp {
margin-top: -3px;
color: #a0a0a0;
}
html.hq.portfolio ul.earned-skills .patch {
position: relative;
text-align: left;
width: 70px;
height: 82px;
display: inline-block;
top: 7px;
left: 10px;
position: absolute;
}
html.hq.portfolio ul.earned-skills .patch:before {
content: 'K';
font-family: Icons;
color: #e8e8e8;
margin: 0;
font-size: 100px;
line-height: 100px;
display: block;
position: absolute;
top: -8px;
left: -1px;
z-index: 0;
}
html.hq.portfolio ul.earned-skills .patch * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
html.hq.portfolio ul.earned-skills .patch.approved:before {
color: #00cd9f;
}
html.hq.portfolio ul.earned-skills .patch.rejected:before {
color: #fd4d10;
}
html.hq.portfolio ul.earned-skills .patch.pending:after,
html.hq.portfolio ul.earned-skills .patch.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
html.hq.portfolio ul.earned-skills .patch.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
html.hq.portfolio ul.earned-skills .patch.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
html.hq.portfolio ul.earned-skills .patch:before {
text-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
}
html.hq .follows ul {
list-style: none;
margin: 0;
padding: 0;
*zoom: 1;
}
html.hq .follows ul:before,
html.hq .follows ul:after {
display: table;
content: "";
}
html.hq .follows ul:after {
clear: both;
}
html.hq .follows li {
float: left;
width: 440px;
background: #fff;
padding: 10px;
font-family: ApexRounded, sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
*zoom: 1;
}
html.hq .follows li:before,
html.hq .follows li:after {
display: table;
content: "";
}
html.hq .follows li:after {
clear: both;
}
html.hq .follows li:nth-child(2n+1) {
margin-right: 20px;
}
html.hq .follows .avatar {
width: 45px;
height: 45px;
display: block;
float: left;
margin: 0 10px 0 0;
background-size: 40px;
background-position: center center;
background-repeat: no-repeat;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq .follows .nickname {
font-size: 18px;
margin-top: 11px;
display: inline-block;
}
html.hq .follows .stats {
color: #b9b9b9;
}
html.hq .follows .details {
width: 270px;
float: left;
}
html.hq .follows .you {
float: right;
color: #CCC;
font-size: 18px;
line-height: 18px;
margin: 13px 10px 0 0;
}
html.hq .follows .follow {
float: right;
padding: 7px 11px;
margin-top: 4px;
}
html.hq .follows .follow:before {
content: 'X';
font-size: 21px;
line-height: 21px;
font-family: Icons;
margin: -3px 6px 2px 0;
display: inline-block;
vertical-align: middle;
}
html.hq #follow:before {
content: 'X';
font-size: 24px;
font-family: Icons;
}
html.hq.draganddrop .drag-area {
padding-top: 58px !important;
border: 4px dotted #e0e0e0;
}
html.hq.no-draganddrop .drag-area,
html.hq.no-filereader .drag-area {
padding-top: 83px !important;
border: 4px dotted #f2f2f2;
}
html.hq.no-draganddrop .drag-area p,
html.hq.no-filereader .drag-area p {
display: none;
}
html.hq.draganddrop .clips .drag-area {
padding-top: 42px !important;
}
html.hq.no-draganddrop .clips .drag-area,
html.hq.no-filereader .clips .drag-area {
padding-top: 65px !important;
}
html.hq.page-popover .has-shots .body {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
html.hq.add-project {
position: relative;
/**********************************************************
* Good / Bad Things to Upload Guide *
**********************************************************/
/**********************************************************
* STAGE 1: *
* Before the user has uploaded any files. *
**********************************************************/
/**********************************************************
* STAGE 2: *
* After the user has uploaded a file. *
**********************************************************/
}
html.hq.add-project form {
margin: 0;
}
html.hq.add-project .upload-area {
text-align: center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html.hq.add-project .drag-area {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
height: 100%;
}
html.hq.add-project .drag-area.drag-over {
border-color: #ffeb62;
}
html.hq.add-project header .skill img {
height: 48px;
margin: 0 5px 0 0;
}
html.hq.add-project header .challenge p {
margin-bottom: 0;
font-size: 16px;
color: #808080;
}
html.hq.add-project header .challenge h2 {
margin: -5px 0 5px 0;
}
html.hq.add-project header .challenge h2 a {
padding: 0 0 3px 0;
border-bottom: 5px solid #ffe14c;
}
html.hq.add-project header .toggle-mode {
position: absolute;
top: 9px;
right: 0;
font-size: 16px;
}
html.hq.add-project .header .achievement-badge {
float: right;
margin-top: -10px;
}
html.hq.add-project .toggle-mode a {
font-weight: bold;
}
html.hq.add-project #pick-method {
color: #999;
text-align: center;
font-size: 20px;
padding: 5px 0;
}
html.hq.add-project #pick-method .btn {
font-size: 20px;
padding: 10px 18px;
margin: 0 7px;
}
html.hq.add-project #pick-method .upload:before,
html.hq.add-project #pick-method .choose:before {
font-family: Icons;
margin: -3px 11px 0 0;
display: inline-block;
vertical-align: middle;
}
html.hq.add-project #pick-method .upload:before {
content: 'I';
}
html.hq.add-project #pick-method .choose:before {
content: 'H';
font-size: 23px;
}
html.hq.add-project .verify {
margin: 0;
font-size: 16px;
}
html.hq.add-project .guide {
padding: 0 20px;
margin-top: 25px;
*zoom: 1;
}
html.hq.add-project .guide:before,
html.hq.add-project .guide:after {
display: table;
content: "";
}
html.hq.add-project .guide:after {
clear: both;
}
html.hq.add-project .guide .good,
html.hq.add-project .guide .bad {
display: block;
width: 100%;
}
html.hq.add-project .guide .good h3,
html.hq.add-project .guide .bad h3 {
color: #5abd8d;
font-family: ApexRounded, sans-serif;
font-size: 24px;
}
html.hq.add-project .guide .good p,
html.hq.add-project .guide .bad p {
margin-top: -2px;
}
html.hq.add-project .guide .good img,
html.hq.add-project .guide .bad img {
margin-top: -8px;
}
html.hq.add-project .guide .good {
width: 440px;
float: left;
}
html.hq.add-project .guide .good img {
margin-top: -35px;
}
html.hq.add-project .guide .bad {
width: 410px;
margin: 0 0 10px 0;
float: right;
}
html.hq.add-project .guide .bad h3 {
color: #dd6256;
}
html.hq.add-project .no-files .upload-area {
height: 205px;
}
html.hq.add-project .no-files .upload-area .drag-area {
padding: 30px;
}
html.hq.add-project .no-files .upload-area .file-button {
cursor: pointer;
width: 35%;
}
html.hq.add-project .no-files .upload-area p {
font-size: 19px;
font-family: ApexRounded, sans-serif;
margin: 0 0 15px 0;
}
html.hq.add-project .no-files .upload-area input {
display: none !important;
}
html.hq.add-project .no-files .upload-area [name=media] {
display: inline-block !important;
}
html.hq.add-project .no-files .upload-area .graphic {
display: block;
margin: 0 0 15px 0;
background: url(/images/www/gra_upload_media.png) center top no-repeat;
height: 175px;
text-indent: -1000em;
overflow: hidden;
}
html.hq.add-project .has-files .body {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
*zoom: 1;
}
html.hq.add-project .has-files .body:before,
html.hq.add-project .has-files .body:after {
display: table;
content: "";
}
html.hq.add-project .has-files .body:after {
clear: both;
}
html.hq.add-project .has-files .clips {
width: 110%;
list-style: none;
margin: 0 0 -10px 0;
*zoom: 1;
}
html.hq.add-project .has-files .clips:before,
html.hq.add-project .has-files .clips:after {
display: table;
content: "";
}
html.hq.add-project .has-files .clips:after {
clear: both;
}
html.hq.add-project .has-files .clips li {
width: 197px;
height: 142px;
position: relative;
float: left;
margin: 0 15px 15px 0;
padding: 13px;
background: #fff;
-webkit-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.12);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
html.hq.add-project .has-files .clips li.sortable-placeholder {
background: rgba(0, 0, 0, 0.02);
-webkit-box-shadow: inset 0 2px 30px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 2px 30px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 2px 30px rgba(0, 0, 0, 0.08);
}
html.hq.add-project .has-files .clips li.new,
html.hq.add-project .has-files .clips li.new:hover {
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
html.hq.add-project .has-files .clips li.new .upload-area {
margin: -13px;
}
html.hq.add-project .has-files .clips li.new .drag-area {
height: 171px;
}
html.hq.add-project .has-files .clips li.new p {
font-family: ApexRounded, sans-serif;
font-size: 19px;
}
html.hq.add-project .has-files .clips li.new .file-button {
width: 70%;
}
html.hq.add-project .has-files .clip .set-cover,
html.hq.add-project .has-files .clip .delete {
cursor: pointer;
width: 40px;
height: 31px;
display: block;
position: absolute;
top: 13px;
z-index: 3;
}
html.hq.add-project .has-files .clip .set-cover {
left: 13px;
background: #c0c0c0 url(/images/www/buttons/glyphs/gra_white_star_20x20.png) center center no-repeat;
}
html.hq.add-project .has-files .clip .set-cover:hover {
background-color: #c5c5c5;
}
html.hq.add-project .has-files .clip .set-cover:active {
background-color: #b8b8b8;
}
html.hq.add-project .has-files .clip .set-cover.active {
background-color: #ffd42a;
}
html.hq.add-project .has-files .clip .set-cover.active:hover,
html.hq.add-project .has-files .clip .set-cover.active:active {
background-color: #ffd42a;
}
html.hq.add-project .has-files .clip .delete {
right: 13px;
background: #f15d5f url(/images/www/buttons/glyphs/gra_white_delete_20x20.png) center center no-repeat;
}
html.hq.add-project .has-files .clip .delete:hover {
background-color: #f56a6c;
}
html.hq.add-project .has-files .clip .delete:active {
background-color: #cf4f50;
}
html.hq.add-project .has-files .clip .image {
background-position: center center;
background-size: cover;
z-index: 1;
}
html.hq.add-project .has-files .clip .image,
html.hq.add-project .has-files .clip .overlay,
html.hq.add-project .has-files .clip .spinner {
width: 197px;
height: 142px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
html.hq.add-project .has-files .clip .caption {
display: none;
margin-top: 5px;
}
html.hq.add-project .has-files .clip .caption input {
margin: 0;
padding: 0;
background: none;
color: #454545;
font-weight: normal;
font-size: 18px;
font-family: Helvetica, arial, verdana, sans-serif;
border: 0 none;
width: 100%;
cursor: pointer;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
html.hq.add-project .has-files .clip .caption input.empty {
color: #c0c0c0;
}
html.hq.add-project .has-files .clip .caption input:focus {
cursor: text;
color: #202020;
background-color: #FFFADC;
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
}
html.hq.add-project .has-files .clip .overlay {
display: none;
position: absolute;
overflow: hidden;
left: 13px;
top: 13px;
z-index: 4;
background: rgba(255, 255, 255, 0.75);
}
html.hq.add-project .has-files .clip .overlay .progress-bar,
html.hq.add-project .has-files .clip .overlay .spinner {
position: absolute;
height: 100%;
top: 0;
left: 0;
}
html.hq.add-project .has-files .clip .overlay .progress-bar {
width: 0;
background: #7764a6 url(/images/www/ui_add_progress_stripes.gif) top right;
z-index: 5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
html.hq.add-project .has-files .clip .overlay .spinner {
width: 100%;
z-index: 6;
background-image: url(/images/www/ui_add_progress_spinner.gif?3);
background-repeat: no-repeat;
background-position: center center;
}
html.hq.add-project .has-files .clip > .spinner {
position: absolute;
left: 98.5px;
top: 71px;
width: 28px;
height: 28px;
border: 1px solid #fff;
background: #ffffff url(/images/www/spinners/22x22_000_FFF.gif) center center no-repeat;
z-index: 2;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
}
html.hq.add-project .has-files .bottom {
clear: both;
position: relative;
padding: 20px 0 0 0;
}
html.hq.add-project .has-files .bottom .thumb {
float: left;
overflow: hidden;
width: 114px;
height: 76px;
margin: 0 20px 0 0;
background: rgba(255, 255, 255, 0.3);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
html.hq.add-project .has-files .bottom .thumb img {
width: 100%;
}
html.hq.add-project .has-files .bottom input[type=text] {
width: 480px;
}
html.hq.add-project .has-files .bottom .control-group.title {
margin: 0 0 -10px 0;
}
html.hq.add-project .has-files .bottom .control-group.title label {
font-family: ApexRounded, sans-serif;
font-size: 22px;
}
html.hq.add-project .has-files .bottom .save {
position: absolute;
top: 32px;
right: 0;
text-align: right;
width: 300px;
margin-top: 20px;
}
html.hq.add-project .has-files .bottom .save .btn {
font-size: 20px;
font-family: ApexRounded, sans-serif;
padding: 8px 30px;
}
html.hq.fontface.add-project header .challenge {
position: relative;
}
html.hq.fontface.add-project header .challenge .icon {
position: relative;
text-align: left;
width: 57px;
height: 67px;
display: inline-block;
position: absolute;
top: -7px;
left: 0;
}
html.hq.fontface.add-project header .challenge .icon:before {
content: 'K';
font-family: Icons;
color: #d5d5d5;
margin: 0;
font-size: 82px;
line-height: 82px;
display: block;
position: absolute;
top: -6px;
left: -1px;
z-index: 0;
}
html.hq.fontface.add-project header .challenge .icon * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
html.hq.fontface.add-project header .challenge .icon.approved:before {
color: #00cd9f;
}
html.hq.fontface.add-project header .challenge .icon.rejected:before {
color: #fd4d10;
}
html.hq.fontface.add-project header .challenge .icon.pending:after,
html.hq.fontface.add-project header .challenge .icon.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
html.hq.fontface.add-project header .challenge .icon.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
html.hq.fontface.add-project header .challenge .icon.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
html.hq.fontface.add-project header .challenge h2,
html.hq.fontface.add-project header .challenge p {
padding-left: 70px;
}
html.hq.ie9 .add-project .no-files .upload-area input[name="media"],
html.hq.lt-ie9 .add-project .no-files .upload-area input[name="media"],
html.hq.ie9 .add-project .has-files .upload-area input[name="media"],
html.hq.lt-ie9 .add-project .has-files .upload-area input[name="media"] {
opacity: 1;
display: block !important;
filter: none;
-ms-transform: none !important;
transform: none !important;
}
html.hq.ie9 .add-project .no-files .upload-area .file-button a,
html.hq.lt-ie9 .add-project .no-files .upload-area .file-button a,
html.hq.ie9 .add-project .has-files .upload-area .file-button a,
html.hq.lt-ie9 .add-project .has-files .upload-area .file-button a {
display: none;
}
html.hq .dashboard .nickname-url-message {
padding: 15px;
margin-top: 10px;
background-color: #f0f0f0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
html.hq .dashboard .nickname-url-message a {
font-weight: bold;
}
html.hq .dashboard .nickname-url-message input[name=nickname] {
display: block;
float: left;
width: 60%;
height: 75px;
font-size: 40px;
font-weight: bold;
}
html.hq #page-static-about {
/**
* General
*/
/**
* Typography
*/
/**
* Color
*/
/**
* About block
*/
/**
* Press block
*/
/**
* Staff block
*/
/**
* Stories
*/
}
html.hq #page-static-about .content-box {
padding: 30px;
}
html.hq #page-static-about section {
display: block;
position: relative;
clear: both;
}
html.hq #page-static-about hr {
display: block;
clear: both;
width: 100%;
height: 8px;
background-image: url(/images/www/pages/gra_hr_background.gif);
background-repeat: repeat-x;
background-position: -12px 0px;
margin: 0;
padding: 0 0 10px 0;
border: none;
outline: none;
}
html.hq #page-static-about .pull {
display: block;
position: absolute;
top: 0px;
left: 100%;
width: 200px;
margin: 6px 0 0 -200px;
text-align: right;
}
html.hq #page-static-about .pull a {
font-size: 16px;
font-family: ApexRounded, sans-serif;
}
html.hq #page-static-about .pull img {
margin: -3px 0 0 8px;
}
html.hq #page-static-about h1 {
font-size: 36px;
}
html.hq #page-static-about h2 {
font-size: 32px;
margin-bottom: 20px;
}
html.hq #page-static-about h3 {
font-size: 22px;
}
html.hq #page-static-about h4 {
font-size: 18px;
}
html.hq #page-static-about #about h1 {
margin: -10px 0 20px 0;
}
html.hq #page-static-about #about p {
display: block;
float: left;
width: 49%;
color: #bbbbbb;
font-family: ApexRounded, sans-serif;
font-size: 23px;
line-height: 30px;
}
html.hq #page-static-about #about p:last-child {
float: right;
width: 47%;
}
html.hq #page-static-about #press ul {
list-style: none;
margin: 0 0 0 50px;
}
html.hq #page-static-about #press li {
display: block;
float: left;
width: 25%;
margin-right: 12px;
}
html.hq #page-static-about #press li a {
display: block;
}
html.hq #page-static-about #press li .credit {
display: block;
color: #bbbbbb;
font-family: ApexRounded, sans-serif;
font-size: 14px;
}
html.hq #page-static-about #press li blockquote {
display: block;
margin-top: 30px;
padding: 0;
border: none;
color: #bbbbbb;
font-family: ApexRounded, sans-serif;
font-size: 17px;
line-height: 23px;
}
html.hq #page-static-about #press li:first-child {
margin-left: -50px;
}
html.hq #page-static-about #staff .member {
display: block;
float: left;
width: 33%;
text-align: center;
margin-bottom: 30px;
}
html.hq #page-static-about #staff .member h3,
html.hq #page-static-about #staff .member h4 {
margin: 0px;
padding: 0px;
}
html.hq #page-static-about #staff .member h4 {
color: #bbbbbb;
}
html.hq #page-static-about #staff ul {
list-style: none;
}
html.hq #page-static-about #staff li {
display: inline-block;
}
html.hq #page-static-about #staff li:first-child {
margin-left: -50px;
}
html.hq #page-static-about #stories ul {
margin-left: -20px;
}
html.hq #page-static-about #stories li {
width: 33.33%;
padding-left: 20px;
}
html.hq #page-static-about #stories iframe {
width: 100%;
height: 160px;
}
html.hq.guides .guides-header {
margin-bottom: 40px;
}
html.hq.guides .guides-header .floating-tabs li {
margin-right: 20px;
}
html.hq.guides .guides-header .floating-tabs li .diy-icn {
font-size: 24px;
font-size: 1.5rem;
line-height: 24px;
position: relative;
top: 2px;
right: 5px;
}
html.hq.guides .guides-header .floating-tabs a,
html.hq.guides .guides-header .floating-tabs .active {
width: 142px;
}
html.hq.guides h1 {
margin-bottom: 35px;
}
html.hq.guides h2 {
font-size: 32px;
font-size: 2rem;
margin-bottom: 10px;
}
html.hq.guides h3 {
font-size: 24px;
font-size: 1.5rem;
margin: 10px 0;
}
html.hq.guides hr {
margin-bottom: 20px;
}
html.hq.guides section {
margin-bottom: 20px;
}
html.hq.guides section > p,
html.hq.guides #video {
margin: 0 0 20px 0;
}
html.hq.guides section h2 + p {
margin-top: 0;
}
html.hq.guides section p:last-child,
html.hq.guides section #video:last-child {
margin-bottom: 0;
}
html.hq.guides .faq-header,
html.hq.guides .press-header {
position: relative;
}
html.hq.guides .pull {
display: block;
position: absolute;
bottom: 6px;
left: 100%;
width: 200px;
margin: 0 0 0 -200px;
text-align: right;
}
html.hq.guides .pull a {
font-size: 16px;
font-family: ApexRounded, sans-serif;
}
html.hq.guides .pull img {
margin: -3px 0 0 8px;
display: inline-block;
}
html.hq.guides .guide-description p {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.3;
}
html.hq.guides .section-callout {
padding: 20px;
margin-bottom: 40px;
}
html.hq.guides .section-callout h3 {
margin-top: 0;
}
html.hq.guides .section-callout p {
color: rgba(0, 0, 0, 0.35);
}
html.hq.guides .callout-img {
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: -moz-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
html.hq.guides .section-callout:hover .callout-img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
html.hq.guides .club-maker-callout .skill-badge {
margin-right: 30px;
margin-top: -18px;
}
html.hq.guides .diy-artwork-callout .download-folder {
margin-left: -12px;
margin-top: -37px;
}
html.hq.guides .challenges-list {
margin-left: -20px;
margin-bottom: 20px;
}
html.hq.guides .challenges-list li {
width: 25%;
}
html.hq.guides .challenges-list img {
margin-bottom: 10px;
width: 220px;
height: 126px;
}
html.hq.guides .challenges-list .label {
display: block;
}
html.hq.guides .challenges-list .challenge-wrapper {
margin-left: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html.hq.guides .faq-list li {
width: 50%;
}
html.hq.guides .faq-list .faq-wrapper {
margin-right: 10px;
min-height: 470px;
}
html.hq.guides .faq-list img {
width: 460px;
height: 278px;
}
html.hq.guides .faq-list li:nth-child(even) .faq-wrapper {
margin-right: 0;
margin-left: 10px;
}
html.hq.guides .resource-list {
text-align: center;
}
html.hq.guides .resource-list li {
width: 293px;
margin-right: 20px;
text-align: left;
}
html.hq.guides .resource-list li:last-child {
margin-right: 0;
}
html.hq.guides .resource-list img {
width: 142px;
height: 142px;
}
html.hq.guides .resource-list .pull-left {
margin-right: 20px;
}
html.hq.guides .resource-list .media-body {
padding-top: 35px;
}
html.hq.guides .press-list {
margin-left: -20px;
}
html.hq.guides .press-list li {
width: 25%;
padding-left: 20px;
}
html.hq.guides .press-list blockquote {
border: none;
margin: 0;
padding: 0;
}
html.hq.guides .press-list .credit {
display: inline-block;
margin-bottom: 30px;
}
html.hq.error-page {
/**********************************************************
* Error 401 *
* Not Authorized *
**********************************************************/
/**********************************************************
* Error 404 *
* Not Found *
**********************************************************/
/**********************************************************
* Error 500 *
* Server Errorz *
**********************************************************/
}
html.hq.error-page body {
background: #f2f2f2 url(/images/www/backgrounds/noise.png);
}
html.hq.error-page .illo {
margin-top: 20px;
background-size: 55% !important;
}
html.hq.error-page header {
text-align: center;
font-family: ApexRounded, sans-serif;
}
html.hq.error-page h1 {
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
color: #202020;
margin-bottom: 15px;
font-size: 40px;
}
html.hq.error-page h2 {
font-size: 25px;
line-height: 30px;
color: #7ac1e5;
text-shadow: 0 2px 1px rgba(0, 70, 100, 0.1);
width: 60%;
margin: 0 auto;
}
html.hq.error-page header.generic h1 {
letter-spacing: -1px;
font-size: 75px;
margin-right: 5px;
}
html.hq.error-page header.generic h2 {
font-size: 35px;
line-height: 40px;
}
html.hq.error-page .outer.error {
padding-top: 45px;
}
html.hq.error-page .code-401 .illo {
background: url(/images/www/errors/gra_401.png) top center no-repeat;
width: 100%;
height: 550px;
}
html.hq.error-page .code-404 .illo {
background: url(/images/www/errors/gra_404.png) top center no-repeat;
width: 100%;
height: 510px;
}
html.hq.error-page .code-500 .illo {
background: url(/images/www/errors/gra_500.png) top center no-repeat;
width: 100%;
height: 500px;
}
html.hq .projects > ul {
list-style: none;
margin: 0 -10px;
padding: 0;
*zoom: 1;
}
html.hq .projects > ul:before,
html.hq .projects > ul:after {
display: table;
content: "";
}
html.hq .projects > ul:after {
clear: both;
}
html.hq .projects > ul > li {
float: left;
margin: 10px;
padding: 0 0 8px 0;
position: relative;
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq .projects > ul > li .thumb {
overflow: hidden;
display: block;
position: relative;
line-height: 0;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
html.hq .projects > ul > li .thumb > a {
display: block;
text-decoration: none;
}
html.hq .projects > ul > li .thumb > a:active {
margin-top: 1px;
margin-bottom: -1px;
}
html.hq .projects > ul > li .thumb img {
min-width: 100%;
height: auto;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
html.hq .projects > ul > li .meta {
position: relative;
padding: 7px 15px 6px 55px;
margin: 5px 0 0 0;
height: 45px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
html.hq .projects > ul > li .meta .title,
html.hq .projects > ul > li .meta .by {
display: block;
position: absolute;
padding-right: 200px;
white-space: nowrap;
text-overflow: ellipsis;
text-rendering: optimizelegibility;
overflow: hidden;
width: 100%;
z-index: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin-left: 4px;
}
html.hq .projects > ul > li .meta .title {
line-height: 20px;
font-size: 16px;
font-family: ApexRounded, sans-serif;
}
html.hq .projects > ul > li .meta .by {
font-size: 12px;
top: 24px;
}
html.hq .projects > ul > li .meta .by .fork-icn:before {
font-size: 17px;
font-size: 1.0625rem;
line-height: .5;
}
html.hq .projects > ul > li .meta .avatar {
position: absolute;
top: 1px;
left: 7px;
width: 45px;
height: 45px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq .projects > ul > li .by {
color: #454545;
}
html.hq .projects > ul > li .stats {
display: block;
float: right;
font-size: 16px;
font-family: ApexRounded, sans-serif;
position: relative;
z-index: 1;
font-weight: bold;
}
html.hq .projects > ul > li .comments {
display: inline-block;
margin: -2px 5px 0 0;
}
html.hq .projects > ul > li .comments:after {
content: '>';
font-family: Icons;
font-size: 1.2em;
display: inline-block;
vertical-align: middle;
margin: -3px 0 0 5px;
color: #ccc;
}
html.hq .projects > ul > li .ctrl-favorites {
display: inline-block;
}
html.hq .projects > ul > li .comments,
html.hq .projects > ul > li .ctrl-favorites {
vertical-align: middle;
}
html.hq .projects .awards {
position: absolute;
top: 10px;
right: 10px;
opacity: 0.85;
filter: alpha(opacity=85);
}
html.hq .projects .awards > * {
display: block;
float: left;
margin-left: 5px;
}
html.hq .projects .featured a {
margin-top: 1px;
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/awards/featured.png');
width: 52px;
height: 63px;
}
html.hq .favorites-disabled .title,
html.hq .favorites-disabled .by {
padding-right: 165px !important;
}
html.hq.fontface .projects .challenge,
html.hq.fontface .cover .challenge {
position: relative;
text-align: left;
width: 57px;
height: 67px;
display: inline-block;
}
html.hq.fontface .projects .challenge:before,
html.hq.fontface .cover .challenge:before {
content: 'K';
font-family: Icons;
color: #d5d5d5;
margin: 0;
font-size: 82px;
line-height: 82px;
display: block;
position: absolute;
top: -6px;
left: -1px;
z-index: 0;
}
html.hq.fontface .projects .challenge *,
html.hq.fontface .cover .challenge * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
html.hq.fontface .projects .challenge.approved:before,
html.hq.fontface .cover .challenge.approved:before {
color: #00cd9f;
}
html.hq.fontface .projects .challenge.rejected:before,
html.hq.fontface .cover .challenge.rejected:before {
color: #fd4d10;
}
html.hq.fontface .projects .challenge.pending:after,
html.hq.fontface .cover .challenge.pending:after,
html.hq.fontface .projects .challenge.rejected:after,
html.hq.fontface .cover .challenge.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
html.hq.fontface .projects .challenge.pending:after,
html.hq.fontface .cover .challenge.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
html.hq.fontface .projects .challenge.rejected:after,
html.hq.fontface .cover .challenge.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
html.hq.fontface .thumb.video a:first-child:before {
font-family: Icons;
font-size: 34px;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
content: "G";
padding: 30px 0 0 4px;
color: #fff;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin: -32px 0 0 -30px;
background-color: #3a3a3a;
background-image: -moz-linear-gradient(top, #404040, #303030);
background-image: -ms-linear-gradient(top, #404040, #303030);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#404040), to(#303030));
background-image: -webkit-linear-gradient(top, #404040, #303030);
background-image: -o-linear-gradient(top, #404040, #303030);
background-image: linear-gradient(top, #404040, #303030);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#404040', endColorstr='#303030', GradientType=0);
border: 1px solid #303030;
position: absolute;
z-index: 10;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0.8;
filter: alpha(opacity=80);
}
html.hq.fontface .thumb.video a:first-child:active:before {
margin-top: -29px;
opacity: 1;
filter: alpha(opacity=100);
}
html.hq.fontface .thumb.video a:first-child:hover:before {
opacity: 1;
filter: alpha(opacity=100);
}
html.hq .footer-content .projects li .meta .comments {
margin: -2px 0 0 5px;
float: right;
}
html.hq .takeover {
z-index: 1060;
position: fixed;
top: 0;
left: 0;
right: 0;
color: #f7f7f7 !important;
font-family: ApexRounded, sans-serif;
}
html.hq .takeover .message a,
html.hq .takeover .caption a {
color: #f0f0f0 !important;
}
html.hq .takeover .message a:hover,
html.hq .takeover .caption a:hover {
color: #e0e0e0 !important;
}
html.hq .takeover .message {
color: #ffdc7c;
font-family: ApexRounded, sans-serif;
font-size: 75px;
line-height: 75px;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
margin: 35px 0 0 0;
}
html.hq .takeover .caption {
margin-top: 10px;
font-size: 24px;
line-height: 24px;
}
html.hq .takeover .banner {
font-size: 45px;
line-height: 45px;
margin-bottom: 20px;
}
html.hq .takeover .close-btn {
display: block;
position: fixed;
top: 10px;
left: 100%;
margin-left: -50px;
}
html.hq .takeover.skill .patch {
position: relative;
text-align: left;
width: 253px;
height: 296px;
display: inline-block;
margin-bottom: -30px;
margin-top: 5px;
}
html.hq .takeover.skill .patch:before {
content: 'K';
font-family: Icons;
color: #101010;
margin: 0;
font-size: 362px;
line-height: 362px;
display: block;
position: absolute;
top: -28px;
left: -5px;
z-index: 0;
}
html.hq .takeover.skill .patch * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
html.hq .takeover.skill .patch.approved:before {
color: #00cd9f;
}
html.hq .takeover.skill .patch.rejected:before {
color: #fd4d10;
}
html.hq .takeover.skill .patch.pending:after,
html.hq .takeover.skill .patch.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
html.hq .takeover.skill .patch.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
html.hq .takeover.skill .patch.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
html.hq .takeover.skill .patch:before {
text-shadow: 0 0 600px rgba(255, 255, 255, 0.5);
}
html.hq .takeover.welcome {
height: 400px;
}
html.hq .takeover.welcome #welcome .card {
padding: 15px 25px;
}
html.hq .takeover.welcome .card {
margin: 0 auto;
position: relative;
width: 585px;
height: 320px;
background: url(/images/www/takeovers/welcome/card_bg.png);
border-bottom: 3px solid #c3c0b7;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
html.hq .takeover.welcome .card .logo {
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/takeovers/welcome/card_logo.png');
width: 122px;
height: 145px;
margin: 0 auto;
}
html.hq .takeover.welcome .card .avatar,
html.hq .takeover.welcome .card .nickname {
position: absolute;
bottom: 18px;
height: 115px;
background: url(/images/www/takeovers/welcome/card_bg_hatched.png);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq .takeover.welcome .card .avatar div {
background-position: center center;
background-repeat: no-repeat;
background-size: 88%;
height: 100%;
}
html.hq .takeover.welcome .card .nickname {
left: 170px;
right: 25px;
text-align: left;
padding: 38px 25px;
font-size: 40px;
line-height: 40px;
font-family: ApexRounded;
color: #5A5958;
white-space: nowrap;
text-shadow: 0 -2px 0 rgba(255, 255, 255, 0.4);
overflow: hidden;
}
html.hq .takeover.welcome .card .avatar {
width: 125px;
left: 25px;
}
html.hq .takeover.welcome .tagline {
font-family: ApexRounded, sans-serif;
font-size: 25px;
margin-top: 10px;
}
html.hq .takeover.welcome .glow {
opacity: 0;
filter: alpha(opacity=0);
}
html.hq .takeover.welcome.show-glow .glow {
position: absolute;
margin-left: -250px;
left: 50%;
width: 500px;
height: 250px;
z-index: 0;
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 0.4s linear;
-moz-transition: opacity 0.4s linear;
-ms-transition: opacity 0.4s linear;
-o-transition: opacity 0.4s linear;
transition: opacity 0.4s linear;
-webkit-box-shadow: 0 0 400px 60px rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0 0 400px 60px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 400px 60px rgba(255, 255, 255, 0.5);
}
html.hq .takeover.welcome .btn {
margin-top: 30px;
font-size: 25px;
padding: 15px 35px;
font-family: ApexRounded, sans-serif;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
html.hq .takeover.welcome .slide {
position: absolute;
left: 50%;
opacity: 0;
filter: alpha(opacity=0);
pointer-events: none;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
html.hq .takeover.welcome .slide.active {
opacity: 1;
filter: alpha(opacity=100);
pointer-events: auto;
}
html.hq .takeover.welcome .card {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(1.2) translate(0, 50px) rotateX(30deg) perspective(50px);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
}
html.hq .takeover.welcome .slide.active .card {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1) translate(0, 0) rotateX(0) perspective(50px);
-webkit-transition-delay: .2s;
}
html.hq .takeover.welcome #welcome {
width: 660px;
margin-left: -330px;
}
html.hq .takeover.welcome #anthem {
width: 961px;
margin-left: -480.5px;
top: -50%;
}
html.hq .takeover.welcome #anthem .message {
margin-top: 10px;
}
html.hq .takeover.welcome #anthem .btn {
margin-top: 0;
}
html.hq .takeover.welcome #cta {
width: 1000px;
margin-left: -500px;
}
html.hq .takeover.welcome #cta .card img {
width: 585px;
height: 320px;
}
html.hq #design-panel {
background: #2c2c2c;
display: none;
position: fixed;
top: 0;
margin: 0 auto;
width: 980px;
z-index: 1040;
color: #f2f2f2;
padding: 15px 20px 20px 20px;
margin: 0 0 0 -20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-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);
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
*zoom: 1;
}
html.hq #design-panel:before,
html.hq #design-panel:after {
display: table;
content: "";
}
html.hq #design-panel:after {
clear: both;
}
html.hq #design-panel h2 {
color: #fff;
font-family: ApexRounded, sans-serif;
position: absolute;
font-size: 35px;
right: 20px;
bottom: 70px;
}
html.hq #design-panel .foreground,
html.hq #design-panel .background,
html.hq #design-panel .layout {
float: left;
margin-right: 15px;
}
html.hq #design-panel .foreground .title,
html.hq #design-panel .background .title,
html.hq #design-panel .layout .title {
font-family: ApexRounded, sans-serif;
font-weight: bold;
display: block;
margin-bottom: 5px;
font-size: 15px;
}
html.hq #design-panel .layout {
*zoom: 1;
}
html.hq #design-panel .layout:before,
html.hq #design-panel .layout:after {
display: table;
content: "";
}
html.hq #design-panel .layout:after {
clear: both;
}
html.hq #design-panel .layout a {
float: left;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #454545;
margin-right: 10px;
}
html.hq #design-panel .layout a:hover {
background: #5f5f5f;
}
html.hq #design-panel .layout a.on span {
opacity: 1;
filter: alpha(opacity=100);
}
html.hq #design-panel .layout a span {
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/ui_design_layout_options.png');
width: 49px;
height: 68px;
opacity: 0.18;
filter: alpha(opacity=18);
}
html.hq #design-panel .layout a.cols2 span {
background-position: -49px 0;
}
html.hq #design-panel .swatch {
width: 110px;
height: 56px;
background: #000;
display: block;
border: 6px solid #454545;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
html.hq #design-panel .swatch:hover {
border-color: #5f5f5f;
}
html.hq #design-panel .color-picker-popup {
background: #fff;
position: absolute;
width: 294px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 14px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 14px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 14px rgba(0, 0, 0, 0.15);
}
html.hq #design-panel .color-picker-popup .options {
padding: 3px;
*zoom: 1;
}
html.hq #design-panel .color-picker-popup .options:before,
html.hq #design-panel .color-picker-popup .options:after {
display: table;
content: "";
}
html.hq #design-panel .color-picker-popup .options:after {
clear: both;
}
html.hq #design-panel .color-picker-popup .options a {
width: 30px;
height: 30px;
margin: 3px;
display: block;
float: left;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
html.hq #design-panel .color-picker-popup .close-btn {
width: 25px;
height: 25px;
font-size: 22px;
line-height: 22px;
padding: 0;
border-width: 3px;
color: #fff !important;
}
html.hq #design-panel .buttons {
position: absolute;
bottom: 20px;
right: 20px;
}
html.hq #design-panel .buttons .btn {
font-family: ApexRounded, sans-serif;
font-weight: bold;
font-size: 15px;
padding: 7px 20px;
margin-left: 10px;
color: #fff !important;
text-shadow: none !important;
background-color: #505050;
background-image: -moz-linear-gradient(top, #505050, #505050);
background-image: -ms-linear-gradient(top, #505050, #505050);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#505050), to(#505050));
background-image: -webkit-linear-gradient(top, #505050, #505050);
background-image: -o-linear-gradient(top, #505050, #505050);
background-image: linear-gradient(top, #505050, #505050);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#505050', endColorstr='#505050', GradientType=0);
border-color: #505050 #505050 #2a2a2a;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
html.hq #design-panel .buttons .btn:hover,
html.hq #design-panel .buttons .btn:active,
html.hq #design-panel .buttons .btn.active,
html.hq #design-panel .buttons .btn.disabled,
html.hq #design-panel .buttons .btn[disabled] {
background-color: #505050;
}
html.hq #design-panel .buttons .btn:active,
html.hq #design-panel .buttons .btn.active {
background-color: #373737 \9;
}
html.hq #design-panel .buttons .btn.disabled {
background-color: #454545;
background-image: -moz-linear-gradient(top, #454545, #454545);
background-image: -ms-linear-gradient(top, #454545, #454545);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#454545), to(#454545));
background-image: -webkit-linear-gradient(top, #454545, #454545);
background-image: -o-linear-gradient(top, #454545, #454545);
background-image: linear-gradient(top, #454545, #454545);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#454545', GradientType=0);
border-color: #454545 #454545 #1f1f1f;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
html.hq #design-panel .buttons .btn.disabled:hover,
html.hq #design-panel .buttons .btn.disabled:active,
html.hq #design-panel .buttons .btn.disabled.active,
html.hq #design-panel .buttons .btn.disabled.disabled,
html.hq #design-panel .buttons .btn.disabled[disabled] {
background-color: #454545;
}
html.hq #design-panel .buttons .btn.disabled:active,
html.hq #design-panel .buttons .btn.disabled.active {
background-color: #2b2b2b \9;
}
html.hq #design-panel .loading {
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/spinners/25x25_FFF_2C2C2C.gif');
width: 25px;
height: 25px;
display: inline-block;
margin: -2px 3px 0 0;
vertical-align: middle;
opacity: 0.3;
filter: alpha(opacity=30);
}
html.hq .tab-pages > section,
html.hq .content-box,
html.hq .nav-list {
background: rgba(255, 255, 255, 0.9);
-webkit-border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
html.hq .nav-list {
font-family: ApexRounded, sans-serif;
font-size: 18px;
overflow: hidden;
}
html.hq .nav-list .header {
padding: 10px 0 5px 0;
color: #ccc;
font-size: 16px;
}
html.hq .nav-list .active a {
color: #ffffff;
text-shadow: 0 1px 0 rbga(0, 0, 0, 0.05);
background-color: #3290d8;
}
html.hq .nav-list li {
margin-bottom: 0;
}
html.hq .nav-list li a {
padding: 8px 15px;
}
html.hq .nav-list a i {
margin: 2px 10px 0px 0px;
}
html.hq .nav-list a {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
html.hq .content-box,
html.hq .tab-pages > .pages {
padding: 20px;
overflow: hidden;
clear: left;
background: #F7F7F7;
-webkit-border-radius: 0 3px 3px 3px;
-moz-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
html.hq .content-box h4,
html.hq .tab-pages > .pages h4 {
margin: 10px -20px 10px -20px;
padding: 10px 20px 15px 20px;
font-family: ApexRounded, sans-serif;
font-size: 16px;
}
html.hq .content-box h4 + .control-group,
html.hq .tab-pages > .pages h4 + .control-group {
margin-top: -10px;
}
html.hq .content-box h4:first-child,
html.hq .tab-pages > .pages h4:first-child {
padding-top: 0;
margin-top: -21px;
}
html.hq .content-box .control-group:first-child,
html.hq .tab-pages > .pages .control-group:first-child {
margin-top: -20px;
}
html.hq .content-box .control-group,
html.hq .tab-pages > .pages .control-group {
padding: 20px;
margin: 0 -20px;
border-bottom: 1px solid #e8e8e8;
}
html.hq .content-box .control-group.textfield .control-label,
html.hq .tab-pages > .pages .control-group.textfield .control-label {
padding-top: 13px !important;
}
html.hq .content-box .form-horizontal .control-label,
html.hq .tab-pages > .pages .form-horizontal .control-label {
padding-top: 12px;
}
html.hq .content-box .form-horizontal .form-actions,
html.hq .tab-pages > .pages .form-horizontal .form-actions {
padding-left: 180px;
}
html.hq .content-box .form-actions,
html.hq .tab-pages > .pages .form-actions {
margin: -1px -20px -20px -20px;
}
html.hq .pagination {
margin: 20px 0 0 0;
*zoom: 1;
}
html.hq .pagination:before,
html.hq .pagination:after {
display: table;
content: "";
}
html.hq .pagination:after {
clear: both;
}
html.hq .pagination a.next,
html.hq .pagination a.prev,
html.hq .pagination a.more {
padding: 12px 22px;
font-size: 20px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
html.hq .pagination a.next {
float: right;
}
html.hq .pagination a.next:after {
display: inline-block;
vertical-align: middle;
margin: -3px 0 0 8px;
font-family: Icons;
content: 'Y';
opacity: 0.8;
filter: alpha(opacity=80);
}
html.hq .pagination a.prev {
float: left;
}
html.hq .pagination a.prev:before {
display: inline-block;
vertical-align: middle;
margin: -3px 8px 0 0;
font-family: Icons;
content: 'R';
opacity: 0.8;
filter: alpha(opacity=80);
}
html.hq .pagination a.more {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html.hq .notification {
overflow: hidden;
position: relative;
background: #fdfb62;
padding: 13px 15px 13px 78px;
margin: 0 0 10px 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
color: #333333 !important;
}
html.hq .notification a {
color: #3290d8 !important;
}
html.hq .notification a:hover {
color: #1e679f !important;
}
html.hq .notification p {
font-size: 14px;
margin: 0;
color: #857642;
}
html.hq .notification p:first-child {
font-size: 18px;
color: #333333 !important;
}
html.hq .notification p:last-child {
margin-bottom: 0;
}
html.hq .notification .icon {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 60px;
background: rgba(255, 219, 43, 0.6);
height: 100%;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
html.hq .notification .dismiss {
display: block;
position: absolute;
top: 9px;
right: 15px;
text-indent: -1000em;
overflow: hidden;
width: 32px;
height: 32px;
}
html.hq .notification .dismiss:before {
content: '\00D7';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 2px 0;
font-size: 34px;
text-indent: 0;
text-align: center;
color: #c78614;
opacity: 0.4;
filter: alpha(opacity=40);
}
html.hq .notification .dismiss:hover:before {
opacity: 0.6;
filter: alpha(opacity=60);
}
html.hq .notification.challenge .medallion,
html.hq .notification.skill .medallion {
position: relative;
text-align: left;
width: 30px;
height: 35px;
display: inline-block;
position: absolute;
top: 50%;
left: 15px;
margin-top: -17px;
}
html.hq .notification.challenge .medallion:before,
html.hq .notification.skill .medallion:before {
content: 'K';
font-family: Icons;
color: #2b2b2b;
margin: 0;
font-size: 43px;
line-height: 43px;
display: block;
position: absolute;
top: -3px;
left: -1px;
z-index: 0;
}
html.hq .notification.challenge .medallion *,
html.hq .notification.skill .medallion * {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
image-rendering: optimizeSpeed;
position: relative;
text-indent: -1000em;
overflow: hidden;
z-index: 1;
}
html.hq .notification.challenge .medallion.approved:before,
html.hq .notification.skill .medallion.approved:before {
color: #00cd9f;
}
html.hq .notification.challenge .medallion.rejected:before,
html.hq .notification.skill .medallion.rejected:before {
color: #fd4d10;
}
html.hq .notification.challenge .medallion.pending:after,
html.hq .notification.skill .medallion.pending:after,
html.hq .notification.challenge .medallion.rejected:after,
html.hq .notification.skill .medallion.rejected:after {
content: ' ';
display: block;
position: absolute;
width: 21px;
height: 21px;
z-index: 3;
bottom: -2px;
right: 1px;
}
html.hq .notification.challenge .medallion.pending:after,
html.hq .notification.skill .medallion.pending:after {
background: url(/images/www/icons/pending.png) 0 0 no-repeat;
}
html.hq .notification.challenge .medallion.rejected:after,
html.hq .notification.skill .medallion.rejected:after {
background: url(/images/www/icons/attention.png) 0 0 no-repeat;
right: -2px;
}
html.hq .notification.challenge .medallion:after,
html.hq .notification.skill .medallion:after {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-o-transform: scale(0.7);
transform: scale(0.7);
}
html.hq .notification.challenge .medallion:before,
html.hq .notification.skill .medallion:before {
color: #2b2b2b !important;
}
html.hq .notification.challenge.approved .icon {
background-color: #34d099;
}
html.hq .notification.challenge.rejected .icon {
background-color: #fe626d;
}
html.hq .notification .icon:before {
position: relative;
z-index: 1;
font-family: Icons;
-webkit-font-smoothing: auto;
display: block;
color: #2b2b2b;
line-height: 100%;
}
html.hq .notification.project.featured .icon:before {
content: 'P';
font-size: 29px;
margin: 11px 0 0 12px;
}
html.hq .notification.comment .icon:before {
content: '^';
font-size: 32px;
color: '#fff';
margin: 9px 0 0 14px;
}
html.hq .notification.broadcast .icon {
background-image: url(/images/www/species/gra_raccoon_medium.png);
background-position: center center;
background-size: 40px;
background-repeat: no-repeat;
}
html.hq .notification:first-child {
margin-top: 20px;
}
html.hq .notification:last-child {
margin-bottom: 20px;
}
html.hq .outer.notifications {
background: rgba(200, 200, 200, 0.6);
}
html.hq .species-selector {
margin: -10px 0;
*zoom: 1;
}
html.hq .species-selector:before,
html.hq .species-selector:after {
display: table;
content: "";
}
html.hq .species-selector:after {
clear: both;
}
html.hq .species-selector a {
margin: 8px;
padding: 1px;
display: block;
position: relative;
width: 90px;
height: 90px;
background-position: center center;
background-repeat: no-repeat;
float: left;
cursor: pointer;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
html.hq .species-selector a .caption {
display: block;
position: absolute;
bottom: -5px;
right: -5px;
padding: 5px 9px;
font-family: ApexRounded, sans-serif;
font-size: 15px;
background: #2c2c2c;
opacity: 0;
filter: alpha(opacity=0);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #fff;
text-decoration: none;
-webkit-transition: opacity 0.1s linear;
-moz-transition: opacity 0.1s linear;
-ms-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
}
html.hq .species-selector a:hover .caption {
opacity: 1;
filter: alpha(opacity=100);
}
html.hq .species-selector a.active {
background-color: #ffeb62;
}
html.hq .project-selector {
max-height: 500px;
overflow-y: scroll;
}
html.hq .project-selector li {
width: 217px;
height: 177px;
float: left;
}
html.hq .project-selector .title {
font-family: arial, verdana, sans-serif;
font-size: 13px;
font-weight: bold;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
html.hq .project-selector .thumb {
width: 100%;
height: 130px;
margin: 0 0 7px 0;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
html.hq .ctrl-favorites {
font-size: 16px;
line-height: 16px;
display: block;
font-family: ApexRounded, sans-serif;
}
html.hq .ctrl-favorites .count {
font-size: 24px;
vertical-align: middle;
}
html.hq .ctrl-favorites .btn {
font-size: 16px;
padding: 7px 13px;
margin: 0 0 0 5px;
}
html.hq .ctrl-favorites .btn .label {
margin-left: 6px;
}
html.hq .ctrl-favorites .btn:before {
content: 'D';
font-size: 18px;
font-family: Icons;
display: inline-block;
vertical-align: middle;
margin: 0;
}
html.hq .ctrl-favorites .btn.on:before {
color: #fd4d44;
}
html.hq .favorites-disabled .ctrl-favorites .btn,
html.hq .ctrl-favorites .btn.disabled {
color: #ccc !important;
background: none !important;
border: 0 none !important;
text-shadow: none !important;
padding: 0 !important;
margin-left: 1px !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
opacity: 1;
filter: alpha(opacity=100);
}
html.hq .favorites-disabled .ctrl-favorites .btn .label,
html.hq .ctrl-favorites .btn.disabled .label {
display: none;
}
html.hq .projects .ctrl-favorites {
margin-top: -3px;
}
html.hq .projects .ctrl-favorites .count {
font-size: 16px;
}
html.hq .emoji-wysiwyg-editor {
overflow: auto;
outline: none;
}
html.hq .emoji-wysiwyg-editor img {
width: 20px;
height: 20px;
vertical-align: middle;
margin: -3px 0 0 0;
}
html.hq .emoji-button {
position: absolute;
z-index: 1;
margin-top: 10px;
right: 10px;
}
html.hq .emoji-menu {
position: absolute;
z-index: 999;
width: 324px;
margin-left: -20px;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html.hq .emoji-menu:before {
content: ' ';
position: absolute;
top: -5px;
height: 5px;
right: 0;
left: 0;
background: url(/images/www/notches/n_FFF.png) 6px top no-repeat;
}
html.hq .emoji-menu > div {
overflow: hidden;
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}
html.hq .emoji-menu img {
width: 25px;
height: 25px;
vertical-align: middle;
border: 0 none;
}
html.hq .emoji-menu a {
margin: -1px 0 0 -1px;
border: 1px solid #f2f2f2;
padding: 5px;
display: block;
float: left;
}
html.hq .emoji-menu a:hover {
background-color: #fffae7;
}
html.hq .emoji-menu:after {
content: ' ';
display: block;
clear: left;
}
html.hq .emoji-menu a .label {
display: none;
}
html.hq .social-media a {
display: inline-block;
width: 36px;
height: 36px;
text-indent: -1000em;
overflow: hidden;
}
html.hq .social-media .tumblr {
background-image: url(/images/www/ui_social_tumblr.png);
}
html.hq .social-media .facebook {
background-image: url(/images/www/ui_social_facebook.png);
}
html.hq .social-media .twitter {
background-image: url(/images/www/ui_social_twitter.png);
}
html.hq .social-media .pinterest {
background-image: url(/images/www/ui_social_pinterest.png);
}
html.hq.stories .active-story {
padding: 40px;
}
html.hq.stories .paw-logo,
html.hq.stories .tagline-container {
float: none;
}
html.hq.stories .active-story {
display: none;
visibility: hidden;
}
html.hq.stories.lt-ie9 .active-story {
display: block;
visibility: visible;
}
html.hq.stories .paw-logo a {
display: inline-block;
}
html.hq.stories .paw-logo img {
display: block;
margin: auto;
}
html.hq.stories #social {
position: absolute;
top: 0;
right: 0;
width: 175px;
height: 20px;
padding: 10px;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
html.hq.stories #social .twitter-share-button,
html.hq.stories #social .fb-like {
position: absolute;
}
html.hq.stories #social .twitter-share-button {
width: 90px !important;
right: 105px;
}
html.hq.stories #social .fb-like {
right: 20px;
}
html.hq.stories #social.ready {
opacity: 0.5;
filter: alpha(opacity=50);
}
html.hq.stories #social.ready:hover {
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
opacity: 1;
filter: alpha(opacity=100);
}
html.hq.stories .active-story {
background-position: top;
background-attachment: fixed;
background-size: 100%;
}
html.hq.stories #stories-content {
clear: both;
}
@media screen and (min-width: 30em) {
html.hq.stories .active-story {
display: block;
visibility: visible;
}
html.hq.stories .paw-logo,
html.hq.stories .tagline-container {
float: left;
}
html.hq.stories .paw-logo img {
display: block;
margin: auto;
}
html.hq.stories .tagline-container {
text-align: left;
}
html.hq.stories .section-pull {
text-align: right;
}
html.hq.stories #video {
box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.7);
}
html.hq.stories .fluid-width-video-wrapper {
padding-top: 56% !important;
}
}
html.hq.stories .thumb.video a:first-child:before {
padding-top: 19px !important;
}
html.hq p.big {
font-size: 20px;
line-height: 20px;
}
html.hq h1,
html.hq h2,
html.hq h3,
html.hq h4 {
font-weight: bold;
}
html.hq,
html.hq body {
overflow-x: hidden;
}
html.hq .parent-controls {
text-align: left;
padding-top: 8px;
}
html.hq .parent-controls a {
color: #9895a6;
}
html.hq .parent-controls a:hover {
color: #fff;
}
html.hq .outer.header.has-character {
min-height: 140px;
padding: 40px 0 0 0;
}
html.hq .outer.header.has-character h1 {
margin-top: 22px;
font-weight: bold;
}
html.hq .outer.header.has-character .achievements {
padding-top: 20px;
}
html.hq .outer.header {
position: relative;
padding-top: 30px;
min-height: 0;
}
html.hq .outer.header h1 {
margin: 0;
padding: 0;
text-align: left;
font-weight: normal;
font-size: 40px;
width: 60%;
}
html.hq .outer.header h1 .sep {
opacity: 0.15;
filter: alpha(opacity=15);
}
html.hq .outer.header .subtitle {
text-align: left;
}
html.hq .outer.header .tagline {
color: #695ea7;
font-size: 20px;
font-family: ApexRounded, sans-serif;
line-height: 20px;
margin: 0 !important;
}
html.hq .outer.header .timestamp,
html.hq .outer.header .attribution .label {
text-shadow: none;
}
html.hq .outer.header .attribution a {
margin: 0 4px 0 3px;
}
html.hq .outer.header .attribution img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq .outer.header .character:hover .more-projects {
opacity: 1;
filter: alpha(opacity=100);
}
html.hq .outer.header .buttons {
position: relative;
margin: 10px 0 0 0;
}
html.hq .outer.header .buttons .btn {
margin-right: 5px;
font-weight: bold;
}
html.hq .outer.header .stats {
margin-top: -2px;
}
html.hq .outer.header .stats > span,
html.hq .outer.header .stats > a {
margin: 0 10px 0 0;
}
html.hq .outer.header .stats a,
html.hq .outer.header .stats a:hover {
color: #202020;
}
html.hq .outer.header .stats .label {
line-height: 20px;
font-size: 15px;
}
html.hq .outer.header .stats .icon {
display: inline-block;
vertical-align: middle;
margin: 0 6px -1px 0;
font-size: 18px;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
opacity: 0.6;
filter: alpha(opacity=60);
}
html.hq .outer.header .stats .icon:before {
font-family: Icons;
font-size: 20px;
}
html.hq .outer.header .stats .projects .icon:before {
content: 'H';
}
html.hq .outer.header .stats .challenges .icon:before {
content: 'F';
}
html.hq .outer.header .stats .skills .icon:before {
content: 'K';
}
html.hq .outer.header .character {
width: 600px;
text-align: left;
font-family: ApexRounded, sans-serif;
font-size: 22px;
margin-left: -10px;
}
html.hq .outer.header .character a {
position: relative;
}
html.hq .outer.header .character > a:first-child {
display: block;
float: left;
width: 170px;
margin-top: -10px;
}
html.hq .outer.header .character a:hover {
text-decoration: none;
}
html.hq .outer.header .character a:active img {
margin: 1px 0 2px 0;
}
html.hq .outer.header .character a .staff {
display: inline-block;
background: #53f49a;
color: #2f2f2f;
text-align: center;
line-height: 23px;
font-size: 18px;
font-family: ApexRounded, sans-serif;
font-weight: bold;
padding-top: 3px;
position: absolute;
bottom: -11px;
left: 50px;
width: 62px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
html.hq .outer.header .character .avatar {
margin-bottom: 3px;
max-width: 100%;
}
html.hq .outer.header .character .nickname {
display: block;
width: 170px;
text-align: center;
color: #202020;
}
html.hq .sort .btn {
padding: 5px 20px;
}
html.hq .content-page {
position: relative;
padding: 25px;
margin: 10px -25px;
background: #fefefe;
-webkit-box-shadow: 0 2px 0 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 2px 0 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 0 2px rgba(0, 0, 0, 0.05);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
html.hq .content-page .form-actions {
margin: 25px -25px -25px -25px;
}
html.hq .content-page .recede {
padding: 25px;
background: #f0f0f0;
margin: 0 -25px 25px -25px;
}
html.hq .content-page .recede h1 {
font-size: 40px;
margin: 0 0 15px 0;
}
html.hq .content-page .recede:first-child {
margin-top: -25px;
}
html.hq .content-page .recede:last-child {
margin-bottom: -25px;
}
html.hq .hidden-notice {
background: rgba(0, 0, 0, 0.8);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 500px rgba(0, 0, 0, 0.8);
-moz-box-shadow: inset 0 0 500px rgba(0, 0, 0, 0.8);
box-shadow: inset 0 0 500px rgba(0, 0, 0, 0.8);
z-index: 999;
}
html.hq .hidden-notice p {
font-size: 18px;
}
html.hq .hidden-notice .icon {
margin-top: 10%;
text-indent: 100%;
white-space: nowrap;
text-indent: 1000em;
overflow: hidden;
display: block;
background-image: url('/images/www/gra_hidden_yieldsign.png');
width: 94px;
height: 84px;
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
}
html.hq .hidden-notice .title {
margin-top: 5px;
font-family: ApexRounded, sans-serif;
color: #ffe953;
font-size: 24px;
}
html.hq .hidden-notice .talk {
margin-top: 40px;
font-family: ApexRounded, sans-serif;
font-size: 20px;
}
/**********************************************************
* Various Controls *
**********************************************************/
.text-tabs {
font-size: 18px;
font-family: ApexRounded, sans-serif;
margin-bottom: 15px;
}
.text-tabs a:after {
content: '/';
margin: 0 5px;
color: #aaa;
}
.text-tabs a:last-child:after {
content: '';
}
.text-tabs a.active {
color: #2a2a2a;
}
.btn.follow[data-following='1'] {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ffffff;
background-color: #da4f49;
background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
background-image: linear-gradient(top, #ee5f5b, #bd362f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
border-color: #bd362f #bd362f #802420;
font-weight: bold;
color: #fff;
background-color: #e97256;
background-image: -moz-linear-gradient(top, #e97256, #e97256);
background-image: -ms-linear-gradient(top, #e97256, #e97256);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e97256), to(#e97256));
background-image: -webkit-linear-gradient(top, #e97256, #e97256);
background-image: -o-linear-gradient(top, #e97256, #e97256);
background-image: linear-gradient(top, #e97256, #e97256);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e97256', endColorstr='#e97256', GradientType=0);
border-color: #e97256 #e97256 #d73f1c;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
border-bottom-color: #db654b !important;
}
.btn.follow[data-following='1']:hover,
.btn.follow[data-following='1']:active,
.btn.follow[data-following='1'].active,
.btn.follow[data-following='1'].disabled,
.btn.follow[data-following='1'][disabled] {
background-color: #bd362f;
}
.btn.follow[data-following='1']:active,
.btn.follow[data-following='1'].active {
background-color: #942a25 \9;
}
.btn.follow[data-following='1'] .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
}
.btn.follow[data-following='1']:hover,
.btn.follow[data-following='1']:active,
.btn.follow[data-following='1'].active,
.btn.follow[data-following='1'].disabled,
.btn.follow[data-following='1'][disabled] {
background-color: #e97256;
}
.btn.follow[data-following='1']:active,
.btn.follow[data-following='1'].active {
background-color: #e34c29 \9;
}
.btn.follow[data-following='1']:before {
border-bottom-color: #e97256 !important;
}
.nav-tabs a,
.nav-tabs-tooltip {
font-weight: bold;
}