/*
 * NOTE: The content below is ripped straight from maia:
 * https://maia.googlegoro.com/goro/template/css/maia/base.css
 *
 * After copying the following tweaks need to be made:
 * 1) Anywhere a ".maia-button" selector appears, also add ".maia-nav .button"
 *    and ".maia-nav .search-button".
 * 2) Add ".footer-nav-streamlined" and ".main-content-container" to all
 *    "#maia-main" blocks.
 */

/* Page header */
#maia-header,
#maia-nav-x,
.maia-stage {
  margin: 0 -15px;
}

#maia-header .maia-aux:after,
#maia-header .maia-util:after,
#maia-main:after {
  clear: both;
  content: ' ';
  display: block;
  height: 0;
  visibility: hidden;
}

#maia-main,
.maia-aux,
.maia-breadcrumb,
.header-bar,
.main-content-container,
.footer-nav-streamlined {
  margin: auto;
  max-width: 978px;
}

#maia-header {
  background: #f5f5f5;
  background-image: -moz-linear-gradient(top, #fafafa, #f5f5f5);
  background-image: -webkit-linear-gradient(top, #fafafa, #f5f5f5);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #f5f5f5));
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#fafafa, EndColorStr=#f5f5f5)";
  background-image: linear-gradient(top, #fafafa, #f5f5f5);
  border-bottom: 1px solid #eee;
  color: #444;
  min-height: 44px; /* Line-height of the headings and pipe */
  padding: 14px 15px 13px;
}

#maia-header h1,
#maia-header h2 {
  float: left;
  font-family: "open sans", arial, sans-serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.375; /* 44px / 32px */
  margin: 0;
}

.rtl #maia-header h1,
.rtl #maia-header h2 {
  float: right;
}

#maia-header h1,
#maia-header h1 a {
  color: #63666a;
}

#maia-header h1 img {
  margin: -1px 8px -4px 0;
  vertical-align: middle;
}

.rtl #maia-header h1 img {
  margin: -1px 0 -4px -5px;
}

#maia-header h2,
#maia-header h2 a {
  color: #9fa2a6;
}

#maia-header h2:before {
  border: solid #e5e5e5;
  border-width: 0 0 0 1px;
  content: '';
  float: left;
  height: 44px;
  margin: 0 12px 0 14px;
}

.rtl #maia-header h2:before {
  border-width: 0 1px 0 0;
  float: right;
  margin: 0 14px 0 12px;
}

#maia-header h1 a,
#maia-header h2 a {
  text-decoration: none;
}

#maia-header .maia-head {
  float: left;
}

.rtl #maia-header .maia-head {
  float: right;
}

#maia-header .maia-base,
#maia-header .maia-util {
  float: right;
  min-height: 44px;
}

.rtl #maia-header .maia-base,
.rtl #maia-header .maia-util {
  float: left;
}

#maia-header .maia-util p {
  margin: 0;
}

/* Navigation “x” (horizontal) */
#maia-nav-x,
#maia-nav-x.maia-compact h1 {
  background: #325da7; /* Fallback */
  background-image: -moz-linear-gradient(top, #4e78c2, #325da7);
  background-image: -webkit-linear-gradient(top, #4e78c2, #325da7);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4e78c2), color-stop(1, #325da7));
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#4e78c2, EndColorStr=#325da7)";
  background-image: linear-gradient(top, #4e78c2, #325da7);
  color: #fff;
  padding: 0 15px;
}

#maia-nav-x ul {
  padding: 6px 0;
}

#maia-nav-x ul,
#maia-nav-y ul {
  list-style: none;
  margin: 0;
}

#maia-nav-x ul,
#maia-nav-x li a,
#maia-nav-x li.active li a,
#maia-nav-x .maia-aux {
  position: relative;
}

#maia-nav-x ul:after {
  clear: both;
  content: '';
  display: block;
}

#maia-nav-x ul ul,
#maia-nav-x ul + ul {
  background: none;
  color: #444;
  padding: 0;
  margin: 6px 0;
}

#maia-nav-x ul ul {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.rtl #maia-nav-x ul ul {
  left: auto;
  right: 0;
}

#maia-nav-x ul ul:after,
#maia-nav-x ul + ul:after {
  border-bottom: 1px solid #eee;
  padding: 0 0 6px;
}

#maia-nav-x ul ul:before {
  content: '';
  display: block;
  height: 100%;
}

#maia-nav-x ul ul li,
#maia-nav-x ul + ul li {
  font-size: 13px;
  line-height: 1.54; /* 20px / 13px (approx) */
  text-shadow: none;
}

* html #maia-nav-x ul ul li { /* IE 6 */
  font-size: 13px;
}

#maia-nav-x ul ul ul,
#maia-nav-y ul ul ul {
  display: none;
}

#maia-nav-x li {
  float: left;
  font-size: 14px;
  line-height: 1.43; /* 20px / 14px (approx) */
  margin: 0 20px 0 0;
  padding: 6px 0;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .08);
}

.rtl #maia-nav-x li {
  float: right;
  margin: 0 0 0 20px;
}

#maia-nav-x li:last-child {
  margin: 0;
}

#maia-nav-x li a,
#maia-nav-y li a {
  display: block;
  margin: -6px 0;
  padding: 6px 0;
  text-decoration: none;
}

#maia-nav-x li a,
#maia-nav-x li.active li a {
  z-index: 1;
}

/* Navigation “x” (horizontal) and “y” (vertical): font weights and text colors */
#maia-nav-x li,
#maia-nav-x li.active a,
#maia-nav-x li.active li.active a,
#maia-nav-y li,
#maia-nav-y li.active a,
#maia-nav-y li.active li.active a {
  font-weight: bold;
}

#maia-nav-x li a,
#maia-nav-x li.active li a,
#maia-nav-y li a,
#maia-nav-y li.active li a {
  font-weight: normal;
}

#maia-nav-x li a {
  color: #e1e5f2;
}

#maia-nav-x li a:hover,
#maia-nav-x li.active a {
  color: #fff;
}

#maia-nav-x li li a:hover,
#maia-nav-x li li.active a,
#maia-nav-x li.active li a:hover,
#maia-nav-x li.active li.active a,
#maia-nav-y li a:hover,
#maia-nav-y li.active a,
#maia-nav-y li.active li a:hover,
#maia-nav-y li.active li.active a {
  color: #164495;
}

/* Note: Keep these rules separate to prevent older browsers ignoring the rule */
#maia-nav-x ul + ul li a:hover,
#maia-nav-x ul + ul li.active a {
  color: #164495;
}

#maia-nav-x li li a,
#maia-nav-x li.active li a,
#maia-nav-y li a,
#maia-nav-y li.active li a {
  color: #245dc1;
}

/* Note: Keep these rules separate to prevent older browsers ignoring the rule */
#maia-nav-x ul + ul li a {
  color: #245dc1;
}

/* Navigation “x” (horizontal): “complex” (i.e. 2-tier) enhancements */
#maia-nav-x.maia-complex {
  margin-bottom: 45px;
}

#maia-nav-x.maia-complex + #maia-main {
  margin-top: 75px;
}

#maia-nav-x.maia-complex.maia-compact {
  margin-bottom: 0;
}

#maia-nav-x.maia-complex.maia-compact + #maia-main {
  margin-top: 30px;
}

/* Navigation “x” (horizontal): “compact” (i.e. mobile) enhancements */
#maia-nav-x.maia-compact {
  background: none;
  box-shadow: none;
  color: #444;
}

#maia-nav-x.maia-compact h1 {
  cursor: pointer;
  font: bold 14px/3.15 arial, sans-serif;
  margin: 0 -15px;
  overflow: hidden;
  position: relative;
  padding: 0 59px 0 15px;
  text-overflow: ellipsis;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .08);
  user-select: none; /* Note: Although not part of the CSS spec, it’s widely supported and improves UX */
  white-space: nowrap;
}

#maia-nav-x.maia-compact h1:after {
  background: transparent url({{"sites/maia/images/maia-nav-icons.png"|data_uri}}) no-repeat top;
  content: '';
  display: block;
  height: 29px;
  position: absolute;
  right: 15px;
  top: 8px;
  width: 29px;
}

#maia-nav-x.maia-compact.active h1:after {
  background-position: bottom;
}

#maia-nav-x.maia-compact h1 + ul {
  background: #304f8a;
  color: #fff;
  height: 0;
  margin: 0 -15px;
  overflow: hidden;
  padding: 0 15px;
  transform: scale(1, 0);
  transform-origin: 0% 0%;
  transition: transform .2s ease-out;
}

#maia-nav-x.maia-compact.active h1 + ul {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
  height: auto;
  transform: scale(1, 1);
}

#maia-nav-x.maia-compact h1 + ul li {
  opacity: 0;
  transition: opacity .2s ease-out;
  transition-delay: -.2s;
}

#maia-nav-x.maia-compact.active h1 + ul li {
  opacity: 1;
  transition-delay: .2s;
}

#maia-nav-x.maia-compact h1 + ul li {
  float: none;
  margin: 0;
  padding: 12px 0;
}

#maia-nav-x.maia-compact h1 + ul li + li {
  border-top: 1px solid #405d93;
}

/* Note: Only needed for static implementations */
#maia-nav-x.maia-compact .maia-aux {
  max-width: none;
}

/* Note: Hide all in-nav CTA buttons and containing elements */
#maia-nav-x.maia-compact .maia-aux > div,
#maia-nav-x.maia-compact .maia-aux > a {
  display: none;
}

/* Navigation “y” (vertical) */
#maia-nav-y {
  float: left;
  margin: 0 0 120px;
  width: 14.1104296%;
}

.rtl #maia-nav-y {
  float: right;
}

#maia-nav-y + .maia-article {
  float: right;
  width: 82.822085889571%; /* (10*54px+9*30px) / 978px */
}

.rtl #maia-nav-y + .maia-article {
  float: left;
}

#maia-nav-y + .maia-article > :first-child,
#maia-nav-y + .maia-article > .maia-nav-aux + h1 {
  margin-top: 0;
}

#maia-nav-y ul ul,
#maia-nav-y li {
  border: solid #eee;
}

#maia-nav-y ul ul {
  border-width: 1px 0 0;
  margin: 9px 0 -9px;
}

#maia-nav-y li {
  border-width: 0 0 1px;
  padding: 9px 0;
}

#maia-nav-y li:last-child {
  border: 0;
}

#maia-nav-y li li {
  margin: 0 0 0 18px;
}

.rtl #maia-nav-y li li {
  margin: 0 18px 0 0;
}

/* Special "sign up" button. */
#maia-nav-x .maia-aux .button {
  margin-top: 7px;
}

.maia-button,
.maia-nav .button,
.maia-nav .search-button {
  background-color: #4173c9;
  background-image: -webkit-linear-gradient(top, #5e8ee4, #4173c9);
  background-image: -moz-linear-gradient(top, #5e8ee4, #4173c9);
  background-image: linear-gradient(top, #5e8ee4, #4173c9);
  border: 0;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-family: arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.54;
  padding: 7px 12px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .08);
}

a.maia-button,
.maia-nav .button,
.maia-nav .search-button {
  color: #fff !important;
  text-decoration: none;
}

button.maia-button,
.maia-nav .button,
.maia-nav .search-button {
  margin: 0;
  overflow: visible; /* IE 7 */
  white-space: normal; /* Presto */
}

.maia-button:hover,
.maia-button:focus,
.maia-nav .button:hover,
.maia-nav .button:focus,
.maia-nav .search-button:hover,
.maia-nav .search-button:focus {
  background-color: #396bbc;
  background-image: -webkit-linear-gradient(top, #5587d7, #396bbc);
  background-image: -moz-linear-gradient(top, #5587d7, #396bbc);
  background-image: linear-gradient(top, #5587d7, #396bbc);
}

.maia-button:active,
.button:active,
.maia-nav .search-button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .24);
}

.maia-button-box {
  text-align: center;
}

#maia-nav-x .maia-button,
#maia-nav-x .button {
  box-shadow: 0 0 2px rgba(0, 0, 0, .4), inset 0 0 2px rgba(255, 255, 255, .4);
  float: right;
  margin: 7px 0 0;
  padding: 5px 12px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.rtl #maia-nav-x .maia-button,
.rtl #maia-nav-x .maia-nav .button {
  float: left;
  left: 0;
  right: auto;
}

#maia-nav-x .maia-button:active,
#maia-nav-x .button:active {
  box-shadow: 0 0 2px rgba(0, 0, 0, .4), inset 0 2px 4px rgba(0, 0, 0, .24);
}

/* AdWords Nav Experiment fixes. */
.awr-nav {
  margin-left: -43px;
  width: 204px;
}

.rtl .awr-nav {
  margin-left: 0px;
  margin-right: -43px;
  width: 204px;
}

.awr-nav .awr-nav-left-selected {
  border: transparent;
  color: #5C6785;
  font-weight: bold;
  margin-left: 5px;
}

.rtl .awr-nav .awr-nav-left-selected {
  margin-left: 0;
  margin-right: 5px;
}

/* Breadcrumbs */
/* Local overrides */
.yarnlet a {
  background-image: none;
}

.yarnlet .left-yarn {
  display: none;
}

.yarnlet.first a,
.yarnlet.first a:link,
.yarnlet.first a:visited {
  padding-left: 0;
}

/* The following selectors are taken from:
   https://www.googlegoro.com/goro/branches/maia/editor/css/maia/library.css
   Note: All selectors below have been prefixed with "header-wrapper" to
   increase their sepcifity (to beat yarnball). */
.header-wrapper .maia-breadcrumb {
  font-size: 11px;
  line-height: 1.82; /* 20px / 11px (approx) */
  min-height: 28px;
  overflow: hidden;
}

.header-wrapper .maia-breadcrumb ol,
.header-wrapper .maia-breadcrumb ul {
  margin: 0 auto;
  max-width: 978px;
  padding: 12px 0;
}

.header-wrapper .maia-breadcrumb ol:after,
.header-wrapper .maia-breadcrumb ul:after {
  clear: both;
  content: ' ';
  display: block;
  height: 0;
  visibility: hidden;
}

.header-wrapper .maia-breadcrumb li {
  float: left;
  font-weight: bold;
  list-style: none;
}

[dir='rtl'] .header-wrapper .maia-breadcrumb li {
  float: right;
}

.header-wrapper .maia-breadcrumb li a {
  font-weight: normal;
  margin: 0 5px 0 0;
  padding: 1px 0 0;
}

[dir='rtl'] .header-wrapper .maia-breadcrumb li a {
  margin: 0 0 0 5px;
}

.header-wrapper .maia-breadcrumb li + li:before {
  content: '›';
  padding: 0 6px 0 3px;
}

[dir='rtl'] .header-wrapper .maia-breadcrumb li + li:before {
  padding: 0 3px 0 6px;
}