Skip to content
global.styles.css 241 KiB
Newer Older
Andrew Young's avatar
Andrew Young committed
#menu-bar.nav ul.menu li a {
  border-left: 1px solid #247aac;
  -webkit-box-shadow: #224567 -1px 0px 0px;
  -moz-box-shadow: #224567 -1px 0px 0px;
  box-shadow: #224567 -1px 0px 0px;
}

  border-right: 1px solid #224567;
  -webkit-box-shadow: #247aac 1px 0px 0px;
  -moz-box-shadow: #247aac 1px 0px 0px;
  box-shadow: #247aac 1px 0px 0px;
}

.commons-pod, .page-user .pane-views-panes, .front.not-logged-in .pane-views-panes, .front.not-logged-in
body.page-node .pane-views-panes, .page-events .view-commons-events-upcoming .view-content, .pane-commons-bw-group, .view-display-id-commons_events_upcoming_page .views-row, .view-commons-groups-directory > .view-content > .views-row,
.view-commons-groups-directory > .view-filters,
.view-commons-homepage-content .node-teaser.node-group > .view-content > .views-row,
.view-commons-homepage-content .node-teaser.node-group > .view-filters, body.front.logged-in .view-commons-homepage-content > .view-content, body.front.logged-in #views-exposed-form-commons-homepage-content-panel-pane-1 .views-exposed-widgets.widgets-active, .page-events .region-three-25-50-25-third .pane-views-panes, .pane-search-result .block-content .search-results, .page-search-user .user-results {
  background-color: white;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: #858585 1px 1px 4px;
  -moz-box-shadow: #858585 1px 1px 4px;
  box-shadow: #858585 1px 1px 4px;
Andrew Young's avatar
Andrew Young committed
}
.commons-pod, .page-user .pane-views-panes .block-inner, .front.not-logged-in .pane-views-panes > div, .front.not-logged-in
.pane-views > div, .front.not-logged-in
body.page-node .pane-views-panes > div, .page-events .view-commons-events-upcoming .view-content, .pane-commons-bw-group > .block-inner, .view-display-id-commons_events_upcoming_page .views-row article, .view-commons-groups-directory > .view-content > .views-row > .node-teaser,
.view-commons-groups-directory > .view-content > .views-row form,
.view-commons-groups-directory > .view-filters > .node-teaser,
.view-commons-groups-directory > .view-filters form,
.view-commons-homepage-content .node-teaser.node-group > .view-content > .views-row > .node-teaser,
.view-commons-homepage-content .node-teaser.node-group > .view-content > .views-row form,
.view-commons-homepage-content .node-teaser.node-group > .view-filters > .node-teaser,
.view-commons-homepage-content .node-teaser.node-group > .view-filters form, body.front.logged-in #views-exposed-form-commons-homepage-content-panel-pane-1 .views-exposed-widgets.widgets-active, .page-events .region-three-25-50-25-third .pane-views-panes .block-inner, .pane-search-result .block-content .search-results, .page-search-user .user-results {
.node.node-event > .node-content, .node.node-poll > .node-content, .node.node-question > .node-content, .node-teaser.node-promoted.node-event > .node-content, .node-teaser.node-promoted.node-poll > .node-content, .node-teaser.node-promoted.node-question > .node-content {
  .node.node-event > .node-content, .node.node-poll > .node-content, .node.node-question > .node-content, .node-teaser.node-promoted.node-event > .node-content, .node-teaser.node-promoted.node-poll > .node-content, .node-teaser.node-promoted.node-question > .node-content {
    margin-right: 0;
  }
}
Andrew Young's avatar
Andrew Young committed
 * @file
 * global.styles
 *
 * Styles you add here will load for all device sizes, they are "global", as
 * opposed to "responsive" styles, which only load for a given breakpoint (media
 * query) that you set in theme settings. See the README for more details.
 *
 *
 * How to use this file:
 * --------------------
 *
 * There are many empty selectors and some basic styles to act as a guide.
 * Nothing is set in stone and you can change anything - even delete all of it
 * and start with your own clean slate.
 *
 * To FORCE PRINT all selectors you can search and replace a single { (opening
 * curly brace) and insert an empty comment. This is very useful in conjuction
 * with FireSass: https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
 *
 * See global.base also which includes normalize.css and some additional
 * helper classes and base styles.
 */
/* =============================================================================
 *   Base
 * ========================================================================== */
Andrew Young's avatar
Andrew Young committed
 * To preserve theme settings never apply font properties to the HTML element.
 * This is critically important if you are using the Responsive JavaScript
 * feature as this relies on being able to set a pseudo font family on the HTML
 * element. If you need to set default font properties of any kind use the BODY
 * element as these can be overridden using font theme settings.
 */
html {
  background: #e6e6e6;
Andrew Young's avatar
Andrew Young committed
}

body {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  color: #333333;
}

/* =============================================================================
 *   HTML Elements
 * ========================================================================== */
Andrew Young's avatar
Andrew Young committed
h1 {
  font-size: 30px;
  line-height: 30px;
  font-weight: normal;
  color: white;
}
h1 a {
  color: white;
}
h1 a :hover {
  text-decoration: none;
}
.site-name-long h1 {
  font-size: 20px;
  line-height: 25px;
}
.site-name-long-2-lines h1 {
  font-size: 20px;
  line-height: 25px;
}
Andrew Young's avatar
Andrew Young committed

Andrew Young's avatar
Andrew Young committed
h2 {
  color: #336699;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
Andrew Young's avatar
Andrew Young committed
}

h3 {
  color: #2783b9;
Andrew Young's avatar
Andrew Young committed
  font-weight: normal;
Andrew Young's avatar
Andrew Young committed
}
.sidebar h3 {
Andrew Young's avatar
Andrew Young committed
}

pre,
code,
tt,
samp,
kbd,
var {
  font-family: Consolas, Monaco, "Courier New", Courier, monospace, sans-serif;
}

/* =============================================================================
 *   Wrappers
 * ========================================================================== */
Andrew Young's avatar
Andrew Young committed
 * Page wrapper, includes the .container class which sets the overall page or section width
 * Main wrapper in page.tpl.php, the .container class sets the width of the page, do not add width to it!
 */
Andrew Young's avatar
Andrew Young committed
#page {
  margin-top: -92px;
}

Andrew Young's avatar
Andrew Young committed
 * Wraps all header elements - branding and .region-header
 */
Andrew Young's avatar
Andrew Young committed
#header {
  height: 95px;
  color: white;
  text-align: right;
  margin-right: 8px;
Andrew Young's avatar
Andrew Young committed
}
#header a {
  color: white;
}

.header-color-row-one {
  height: 64px;
  background-color: #336699;
  border-top: 4px solid black;
}
.boxshadow .header-color-row-one {
  -webkit-box-shadow: #336699 0px -1px 0px;
  -moz-box-shadow: #336699 0px -1px 0px;
  box-shadow: #336699 0px -1px 0px;
  margin-top: 1px;
}

.header-color-row-two {
  background-color: #2783b9;
  height: 26px;
  border-top: 1px solid #3d9dd6;
  border-bottom: 1px solid #1e658f;
}

Andrew Young's avatar
Andrew Young committed
 * Wraps the sidebars the content column
 */
#columns {
  margin-right: 10px;
  margin-left: 10px;
}
Andrew Young's avatar
Andrew Young committed
 * Footer wrapper
 */
  border-top: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 0 white;
  -moz-box-shadow: inset 0 1px 0 white;
  box-shadow: inset 0 1px 0 white;
 * Default credit block
 */
#block-block-1 .block-title,
#block-block-1 .block-content {
  color: #858585;
}
#block-block-1 .block-title {
  margin: 10px 0 5px;
}
#block-block-1 .block-content {
  font-size: .88em;
}
#footer #block-block-1 {
  margin-bottom: 0;
}

 * Generic pod wrappers
 */
.commons-pod {
  /* Prevent pod nesting. */
}
.commons-pod .commons-pod {
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

Andrew Young's avatar
Andrew Young committed
/* =============================================================================
 *   Branding
 * ========================================================================== */
Andrew Young's avatar
Andrew Young committed
 * Wraps all the branding elements, logo, name and slogan
 */
Andrew Young's avatar
Andrew Young committed
#branding {
Andrew Young's avatar
Andrew Young committed
  float: left;
Andrew Young's avatar
Andrew Young committed
  vertical-align: top;
Andrew Young's avatar
Andrew Young committed
}

Andrew Young's avatar
Andrew Young committed
 * Logo
 */
#logo {
Andrew Young's avatar
Andrew Young committed
  display: inline-block;
  padding: 0 10px 0 0;
Andrew Young's avatar
Andrew Young committed
}
#logo img {
  vertical-align: bottom;
}

Andrew Young's avatar
Andrew Young committed
 * Wrapper for the site name and slogan (hgroup)
 */
Andrew Young's avatar
Andrew Young committed
#name-and-slogan {
  display: inline-block;
  vertical-align: top;
  margin-top: 14px;
}
.site-name-long #name-and-slogan {
  margin-top: 16px;
}
.site-name-long-2-lines #name-and-slogan {
  margin-top: 6px;
Andrew Young's avatar
Andrew Young committed
}

Andrew Young's avatar
Andrew Young committed
 * Site name (h1)
 */
#site-name {
  margin: 0;
  font-family: 'Trebuchet MS';
  font-weight: 700;
Andrew Young's avatar
Andrew Young committed
}
#site-name a:link, #site-name a:visited {
  text-decoration: none;
}
#site-name a:hover, #site-name a:focus {
Andrew Young's avatar
Andrew Young committed
  text-decoration: none;
Andrew Young's avatar
Andrew Young committed
 * Site slogan (h2)
 */
#site-slogan {
  margin: 0;
}

/* =============================================================================
 *   Page content header
 * ========================================================================== */
Andrew Young's avatar
Andrew Young committed
 * The main page title (h1)
 */
#page-title {
Andrew Young's avatar
Andrew Young committed
}
  margin-bottom: 0;
Andrew Young's avatar
Andrew Young committed

  margin: 20px 0 0;
Andrew Young's avatar
Andrew Young committed
/* =============================================================================
 *   Misc Global Styles
 * ========================================================================== */
 * Generic styles for nodes.
 */
.node {
  position: relative;
}
.node.user-picture-available .user-picture {
.node.user-picture-available .user-picture img {
@media only screen and (max-width: 480px) {
  .node.user-picture-available {
    padding-left: 0;
  }
  .node.user-picture-available .user-picture {
    display: none;
  }
}
.node .field-name-body {
  margin-bottom: 20px;
}

  text-align: right;
}
.node-actions, .block-content .node-actions {
  padding: 0;
}
  .node-actions {
    float: none;
    width: auto;
    margin: 1.7em 0;
    text-align: left;
  }
}

  padding-bottom: 20px;
  margin-bottom: 10px;
}
.views-row-last .node-teaser {
  margin-bottom: 0;
}
.node-teaser.node-promoted {
  background-image: url('../images/node-promoted-star.png?1363371593');
  background-position: top right;
  background-repeat: no-repeat;
  background-color: #f7f7f7;
  border: none;
  padding: 10px;
  position: relative;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
.node-teaser.node-promoted.user-picture-available {
.node-teaser.node-promoted.user-picture-available .user-picture {
.node-teaser.node-promoted.user-picture-available .user-picture img {
@media only screen and (max-width: 480px) {
  .node-teaser.node-promoted.user-picture-available {
    padding-left: 10px;
  }
  .node-teaser.node-promoted.user-picture-available .user-picture {
    display: none;
  }
}
  background: white;
  display: inline-block;
  padding: 4px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: #858585 1px 1px 4px;
  -moz-box-shadow: #858585 1px 1px 4px;
  box-shadow: #858585 1px 1px 4px;
.node .user-picture:after, .comment .user-picture:after, .node
.views-field-picture:after, .comment
.views-field-picture:after {
  content: "";
  width: 5px;
  height: 8px;
  position: absolute;
  right: -5px;
  top: 10px;
  background: url('../images/user_img_arrow.png?1363371593');
}
.node .user-picture img, .comment .user-picture img, .node
.views-field-picture img, .comment
.views-field-picture img {
  width: 50px;
}
/**
 * Form styles
 *
 * These styles are extracted from the Formalize library by Nathan Smith. The
 * specific support for IE below 8 is trimmed along with references to font
 * families and the extra buttons styles.
 */
input:invalid,
button:invalid,
select:invalid,
textarea:invalid,
[class*=" action-item"]:invalid {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
input:focus,
button:focus,
select:focus,
textarea:focus,
[class*=" action-item"]:focus {
  -webkit-box-shadow: #0066ff 0 0 5px 0;
  -moz-box-shadow: #0066ff 0 0 5px 0;
  box-shadow: #0066ff 0 0 5px 0;
  z-index: 1;
}

input[type="file"]:focus, input[type="file"]:active,
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  -webkit-appearance: none;
  background-color: white;
  color: black;
  outline: 0;
  margin: 0;
  text-align: left;
  vertical-align: top;
}
textarea[disabled],
select[disabled],
input[type="date"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="email"][disabled],
input[type="month"][disabled],
input[type="number"][disabled],
input[type="password"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="text"][disabled],
input[type="time"][disabled],
input[type="url"][disabled],
input[type="week"][disabled] {
  background-color: #eeeeee;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #888888;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #888888;
}

textarea,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  width: 100%;
  max-width: 100%;
}

textarea,
select[size],
select[multiple] {
  height: auto;
}

select[size="0"],
select[size="1"] {
  height: 1.8em;
}

@media (-webkit-min-device-pixel-ratio: 0) {
  select[size],
  select[multiple],
  select[multiple][size] {
    background-image: none;
    padding-right: 3px;
  }

  select,
  select[size="0"],
  select[size="1"] {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px;
  }

  ::-webkit-validation-bubble-message {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, black));
    border: 1px solid;
    border-color: #747474 #5e5e5e #4f4f4f;
    color: white;
    overflow: hidden;
    padding: 15px 15px 17px;
    text-shadow: black 0 0 1px;
    height: 16px;
  }

  ::-webkit-validation-bubble-arrow,
  ::-webkit-validation-bubble-top-outer-arrow,
  ::-webkit-validation-bubble-top-inner-arrow {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #666666;
    border: 0;
  }
}
textarea {
  min-height: 40px;
  overflow: auto;
  resize: vertical;
  width: 100%;
}

optgroup {
  color: black;
  font-style: normal;
  font-weight: normal;
}
optgroup::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.general-settings {
  padding-top: 0;
  padding-bottom: 0;
}

.fieldset-outer-wrapper {
  margin: 1.7em 0;
  padding: 1.7em 0;
  border-top: 1px solid #cccccc;
  border-color: #cccccc;
  border-style: solid;
  border-width: 1px 0;
  /* Some form items have nested fieldsets that mess with the sibling
     selectors and need some extra love. */
}
.fieldset-outer-wrapper + .fieldset-outer-wrapper {
  border-top-width: 0;
}
.general-settings .fieldset-outer-wrapper {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 10px;
  padding-right: 10px;
}
.general-settings > .fieldset-outer-wrapper {
  margin-left: -10px;
  margin-right: -10px;
}
.general-settings > .fieldset-outer-wrapper:first-child {
  border-top: none;
}
.general-settings > .fieldset-outer-wrapper:last-child {
  border-bottom-width: 0;
}
.field-name-og-group-ref .fieldset-outer-wrapper {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.field-name-og-group-ref .fieldset-outer-wrapper, .field-type-datetime-form .fieldset-outer-wrapper {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

fieldset {
  border: none;
  margin: 0;
  padding: .01em 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

legend {
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  line-height: 1.2em;
}
legend + .fieldset-wrapper {
  -webkit-margin-top-collapse: separate;
  margin-top: 1.2em;
}

.fieldset-legend {
  display: block;
  font-size: 1.2em;
  line-height: 1.2em;
  font-weight: light;
}
html.js fieldset.collapsed .fieldset-legend, html.js fieldset.collapsible .fieldset-legend {
  padding: 0;
  background: none;
}
.fieldset-legend span.summary {
  display: block;
  margin: 0;
  font-size: .76em;
  font-weight: normal;
}
.collapsible > legend .fieldset-legend {
  display: block;
  text-indent: -.5em;
  margin-left: .6em;
}
.collapsible > legend .fieldset-legend span.summary {
  margin-left: .7em;
}
.collapsible > legend .fieldset-legend a:before {
  display: inline-block;
  position: relative;
  margin-right: .2em;
  width: 0;
  height: 0;
  overflow: hidden;
  border: .2em solid transparent;
  border-top-color: #333333;
  content: "";
  top: -.1em;
  left: -.1em;
}
.collapsed > legend .fieldset-legend a:before {
  border-top-color: transparent;
  border-left-color: #333333;
  top: -.2em;
  left: auto;
}

.form-item:first-child {
  margin-top: 0;
}
.form-item:last-child {
  margin-bottom: 0;
}

.filter-wrapper {
  margin: 0;
  padding: 0;
}

/**
 * Button styles
 */
/* Common styles for all buttons. */
button,
[type="reset"],
[type="submit"],
[type="button"],
[class*="action-item"], .pane-commons-groups-commons-groups-create-group a, #quicktabs-container-commons_bw .quicktabs-tabpage .attachment-before > a, .pane-commons-events-commons-events-create-event-link a, [class*="action-item-small"], .commons-sign-up,
.commons-login, [class*="action-item-large"] {
  -webkit-appearance: none;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: .5em .3em .5em 0;
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  /* Reset all button fonts to a similar baseline in webkit. */
  font: -webkit-small-control;
  font-family: "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
  font-weight: light;
  letter-spacing: .06em;
  text-decoration: none;
  outline: 0;
  cursor: pointer;
button:focus,
[type="reset"]:focus,
[type="submit"]:focus,
[type="button"]:focus,
[class*="action-item"]:focus, .pane-commons-groups-commons-groups-create-group a:focus, #quicktabs-container-commons_bw .quicktabs-tabpage .attachment-before > a:focus, .pane-commons-events-commons-events-create-event-link a:focus, [class*="action-item-small"]:focus, .commons-sign-up:focus,
.commons-login:focus, [class*="action-item-large"]:focus, button:hover,
[type="reset"]:hover,
[type="submit"]:hover,
[type="button"]:hover,
[class*="action-item"]:hover, .pane-commons-groups-commons-groups-create-group a:hover, #quicktabs-container-commons_bw .quicktabs-tabpage .attachment-before > a:hover, .pane-commons-events-commons-events-create-event-link a:hover, [class*="action-item-small"]:hover, .commons-sign-up:hover,
.commons-login:hover, [class*="action-item-large"]:hover {
  text-decoration: none;
}
button:active,
[type="reset"]:active,
[type="submit"]:active,
[type="button"]:active,
[class*="action-item"]:active, .pane-commons-groups-commons-groups-create-group a:active, #quicktabs-container-commons_bw .quicktabs-tabpage .attachment-before > a:active, .pane-commons-events-commons-events-create-event-link a:active, [class*="action-item-small"]:active, .commons-sign-up:active,
.commons-login:active, [class*="action-item-large"]:active {
  -webkit-box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
  -moz-box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
  box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
button::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[class*="action-item"]::-moz-focus-inner, .pane-commons-groups-commons-groups-create-group a::-moz-focus-inner, #quicktabs-container-commons_bw .quicktabs-tabpage .attachment-before > a::-moz-focus-inner, .pane-commons-events-commons-events-create-event-link a::-moz-focus-inner, [class*="action-item-small"]::-moz-focus-inner, .commons-sign-up::-moz-focus-inner,
.commons-login::-moz-focus-inner, [class*="action-item-large"]::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Dimensions for the default button type. */
button,
[type="reset"],
[type="submit"],
[type="button"],
[class*="action-item"], .pane-commons-groups-commons-groups-create-group a, #quicktabs-container-commons_bw .quicktabs-tabpage .attachment-before > a, .pane-commons-events-commons-events-create-event-link a {
  padding: 0.5em 1.5em;
  font-size: 1em;
}

/* Dimensions for the small button type. */
[class*="action-item-small"], .commons-sign-up,
.commons-login {
  padding: 0.3em 1.5em;
  font-size: 0.88em;
}

/* Dimensions for the large button type. */
[class*="action-item-large"] {
  padding: 0.5em 1.5em;
  font-size: 1.2em;
}

button,
[type="reset"],
[type="submit"],
[type="button"],
[class*="action-item"], .commons-login {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f1f1f1));
  background: -webkit-linear-gradient(#ffffff, #f1f1f1);
  background: -moz-linear-gradient(#ffffff, #f1f1f1);
  background: -o-linear-gradient(#ffffff, #f1f1f1);
  background: linear-gradient(#ffffff, #f1f1f1);
  text-shadow: -1px 1px 2px white, -1px -1px 2px white, 1px -1px 2px white, 1px 1px 2px white;
}
button,
[type="reset"],
[type="submit"],
[type="button"],
[class*="action-item"], .commons-login, button:link,
[type="reset"]:link,
[type="submit"]:link,
[type="button"]:link,
[class*="action-item"]:link, .commons-login:link, button:visited,
[type="reset"]:visited,
[type="submit"]:visited,
[type="button"]:visited,
[class*="action-item"]:visited, .commons-login:visited {
  color: #323232;
}
button:hover,
[type="reset"]:hover,
[type="submit"]:hover,
[type="button"]:hover,
[class*="action-item"]:hover, .commons-login:hover {
  color: #3f3f3f;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(100%, #e5e5e5));
  background: -webkit-linear-gradient(#fefefe, #e5e5e5);
  background: -moz-linear-gradient(#fefefe, #e5e5e5);
  background: -o-linear-gradient(#fefefe, #e5e5e5);
  background: linear-gradient(#fefefe, #e5e5e5);
  text-shadow: -1px 1px 2px #fefefe, -1px -1px 2px #fefefe, 1px -1px 2px #fefefe, 1px 1px 2px #fefefe;
}
button:focus,
[type="reset"]:focus,
[type="submit"]:focus,
[type="button"]:focus,
[class*="action-item"]:focus, .commons-login:focus, button:active,
[type="reset"]:active,
[type="submit"]:active,
[type="button"]:active,
[class*="action-item"]:active, .commons-login:active {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f1f1f1), color-stop(100%, #ffffff));
  background: -webkit-linear-gradient(#f1f1f1, #ffffff);
  background: -moz-linear-gradient(#f1f1f1, #ffffff);
  background: -o-linear-gradient(#f1f1f1, #ffffff);
  background: linear-gradient(#f1f1f1, #ffffff);
  text-shadow: -1px 1px 2px white, -1px -1px 2px white, 1px -1px 2px white, 1px 1px 2px white;
}
button[disabled],
[disabled][type="reset"],
[disabled][type="submit"],
[disabled][type="button"],
[disabled][class*="action-item"], [disabled].commons-login {
  color: #cbcbcb;
  background: #fefefe;
  border-color: #cbcbcb;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  text-shadow: none;
}

.action-item-active, .action-item-active[type="reset"], .action-item-active[type="submit"], .action-item-active[type="button"],
.action-item-small-active,
.action-item-small-active[type="reset"],
.action-item-small-active[type="submit"],
.action-item-small-active[type="button"],
.action-item-large-active,
.action-item-large-active[type="reset"],
.action-item-large-active[type="submit"],
.action-item-large-active[type="button"], [class*="flag-commons-follow-"] .unflag-action {
  -webkit-box-shadow: inset 0.1em 0.1em 0.2em #a6a6a6;
  -moz-box-shadow: inset 0.1em 0.1em 0.2em #a6a6a6;
  box-shadow: inset 0.1em 0.1em 0.2em #a6a6a6;
  border-color: silver;
  text-shadow: -1px 1px 2px white, -1px -1px 2px white, 1px -1px 2px white, 1px 1px 2px white;
}
.action-item-active, .action-item-active[type="reset"], .action-item-active[type="submit"], .action-item-active[type="button"],
.action-item-small-active,
.action-item-small-active[type="reset"],
.action-item-small-active[type="submit"],
.action-item-small-active[type="button"],
.action-item-large-active,
.action-item-large-active[type="reset"],
.action-item-large-active[type="submit"],
.action-item-large-active[type="button"], [class*="flag-commons-follow-"] .unflag-action, .action-item-active:link,
.action-item-small-active:link,
.action-item-large-active:link, [class*="flag-commons-follow-"] .unflag-action:link, .action-item-active:visited,
.action-item-small-active:visited,
.action-item-large-active:visited, [class*="flag-commons-follow-"] .unflag-action:visited {
}
.action-item-active:hover,
.action-item-small-active:hover,
.action-item-large-active:hover, [class*="flag-commons-follow-"] .unflag-action:hover {
  -webkit-box-shadow: inset 0.1em 0.1em 0.2em #9a9a9a;
  -moz-box-shadow: inset 0.1em 0.1em 0.2em #9a9a9a;
  box-shadow: inset 0.1em 0.1em 0.2em #9a9a9a;
  text-shadow: -1px 1px 2px #f3f3f3, -1px -1px 2px #f3f3f3, 1px -1px 2px #f3f3f3, 1px 1px 2px #f3f3f3;
}
.action-item-active:focus,
.action-item-small-active:focus,
.action-item-large-active:focus, [class*="flag-commons-follow-"] .unflag-action:focus, .action-item-active:active,
.action-item-small-active:active,
.action-item-large-active:active, [class*="flag-commons-follow-"] .unflag-action:active {
  background: #f3f3f3;
  -webkit-box-shadow: inset 0.1em 0.1em 0.2em #a6a6a6;
  -moz-box-shadow: inset 0.1em 0.1em 0.2em #a6a6a6;
  box-shadow: inset 0.1em 0.1em 0.2em #a6a6a6;
  border-color: silver;
  text-shadow: -1px 1px 2px white, -1px -1px 2px white, 1px -1px 2px white, 1px 1px 2px white;
}
[disabled].action-item-active,
[disabled].action-item-small-active,
[disabled].action-item-large-active, [class*="flag-commons-follow-"] [disabled].unflag-action {
  color: silver;
  background: #f3f3f3;
  border-color: silver;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  text-shadow: none;
}