/* Primary Colors */
/* Secondary Colors */
/* Derivative Colors */
/**
 * PAGE LAYOUT
 */
.aui-header,
#footer {
  clear: both;
  float: left;
  width: 100%;
}
#content {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  clear: both;
  position: relative;
}
#content:before {
  content: "";
  clear: both;
  display: table;
}
#footer .footer-body a {
  color: #707070;
}
#footer .footer-body > ul,
#footer .footer-body > p {
  margin: 10px 0 0 0;
}
#footer .footer-body > ul:first-child,
#footer .footer-body > p:first-child {
  margin: 0;
}
#footer .footer-body > ul {
  display: block;
  font-size: 0;
  list-style: none;
  padding: 0;
}
#footer .footer-body > ul > li {
  display: inline-block;
  font-size: 12px;
  line-height: 1.66666666666667;
  padding: 0;
  white-space: nowrap;
}
#footer .footer-body > ul > li + li {
  margin-left: 10px;
}
#footer .footer-body > ul > li:after {
  content: "\b7";
  /* mid dot */

  margin-left: 10px;
  speak: none;
}
#footer .footer-body > ul > li:last-child:after {
  display: none;
}
/**
 * GROUP/ITEM
 */
.aui-group {
  display: table;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
}
.aui-group > .aui-item {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: table-cell;
  margin: 0;
  vertical-align: top;
}
.aui-group > .aui-item + .aui-item {
  padding-left: 20px;
}
/* defensive header allowance */
.aui-layout .aui-group > header {
  display: table-caption;
}
/* .aui-group-split: two items; alignment is left, then right (splits the layout). */
.aui-group.aui-group-split > .aui-item {
  text-align: right;
}
.aui-group.aui-group-split > .aui-item:first-child {
  text-align: left;
}
/* .aui-group-trio: three items; alignment is left, center, right */
.aui-group.aui-group-trio > .aui-item {
  text-align: left;
}
.aui-group.aui-group-trio > .aui-item + .aui-item {
  text-align: center;
}
.aui-group.aui-group-trio > .aui-item + .aui-item + .aui-item {
  text-align: right;
}
/**
 * DEFAULT THEME SPACING
 */
#content {
  margin: 0;
  padding: 0;
}
/**
 * PAGE DESIGN
 */
body {
  background: #f5f5f5;
  color: #333333;
}
a {
  color: #3b73af;
  text-decoration: none;
}
a:focus,
a:hover,
a:active {
  text-decoration: underline;
}
#footer .footer-body {
  color: #707070;
  font-size: 12px;
  line-height: 1.66666666666667;
  margin: 20px 0;
  padding: 0 10px 21px 10px;
  min-height: 44px;
  /* margin + height of image, means footer is just as high if no footer link present */

  text-align: center;
}
/**
 * CONTENT PANEL
 */
#content > .aui-panel {
  background: #ffffff;
  margin: 20px 0 0 0;
  padding: 20px;
  border-color: #cccccc;
  border-style: solid;
  border-width: 1px 0;
}
#content > .aui-page-header {
  padding: 20px;
}
#content > .aui-page-header + .aui-panel {
  margin-top: 0;
}
#content > .aui-page-header:first-child {
  margin-top: 0;
}
.aui-panel + .aui-panel {
  margin-top: 20px;
}
/*! AUI Page Panel */
.aui-page-panel {
  background: #ffffff;
  border: 1px solid #cccccc;
  border-left-width: 0;
  border-right-width: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  clear: both;
  display: block;
  margin: 20px 0 0 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.aui-page-panel-inner {
  border-spacing: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}
.aui-page-panel-nav,
.aui-page-panel-content,
.aui-page-panel-item,
.aui-page-panel-sidebar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: table-cell;
  padding: 20px;
  vertical-align: top;
}
.aui-page-panel-nav {
  border-right: 1px solid #cccccc;
  width: 240px;
}
.aui-page-panel-sidebar {
  width: 35%;
}
.aui-page-panel-item {
  padding: 0;
}
.aui-page-panel-nav ~ .aui-page-panel-sidebar {
  width: 30%;
}
/* Page Panel Interops */
.aui-page-header + .aui-page-panel,
.aui-navbar + .aui-page-panel {
  margin-top: 0;
}
.aui-navbar + .aui-page-panel {
  border-top: none;
}
.aui-page-panel-nav > .aui-nav-vertical {
  margin-left: -10px;
  margin-right: -10px;
}
/**
 * Page variations
 */
.aui-page-focused .aui-page-header,
.aui-page-focused .aui-page-panel,
.aui-page-focused #footer .footer-body,
.aui-page-fixed .aui-header-inner,
.aui-page-fixed .aui-page-header-inner,
.aui-page-fixed .aui-navgroup-horizontal .aui-navgroup-inner,
.aui-page-fixed .aui-page-panel-inner,
.aui-page-fixed #footer .footer-body,
.aui-page-hybrid .aui-page-header,
.aui-page-hybrid .aui-navgroup-horizontal .aui-navgroup-inner,
.aui-page-hybrid .aui-page-panel-inner,
.aui-page-hybrid #footer .footer-body {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}
/* extra width so left edge of hoverable content aligns with left edge of content while inactive. On hover, the hover affordance does extend outside the alignment but this looks better than the other way around. */
.aui-page-fixed .aui-header-inner,
.aui-page-hybrid .aui-navgroup-horizontal .aui-navgroup-inner,
.aui-page-fixed .aui-navgroup-horizontal .aui-navgroup-inner {
  width: 420px;
}
.aui-page-focused-small .aui-page-header,
.aui-page-focused-small .aui-page-panel,
.aui-page-focused-small #footer .footer-body {
  width: 400px;
}
.aui-page-focused-medium .aui-page-header,
.aui-page-focused-medium .aui-page-panel,
.aui-page-focused-medium #footer .footer-body {
  width: 600px;
}
.aui-page-focused-large .aui-page-header,
.aui-page-focused-large .aui-page-panel,
.aui-page-focused-large #footer .footer-body {
  width: 800px;
}
.aui-page-focused-xlarge .aui-page-header,
.aui-page-focused-xlarge .aui-page-panel,
.aui-page-focused-xlarge #footer .footer-body {
  width: 980px;
}
.aui-page-focused .aui-page-panel {
  border-width: 1px;
  border-radius: 5px;
}
.aui-page-fixed .aui-page-panel-inner,
.aui-page-fixed #content > .aui-page-header {
  padding-left: 0;
  padding-right: 0;
}
.aui-page-fixed .aui-page-panel-nav:first-child,
.aui-page-fixed .aui-page-panel-content:first-child,
.aui-page-fixed .aui-page-panel-item:first-child,
.aui-page-fixed .aui-page-panel-sidebar:first-child,
.aui-page-hybrid .aui-page-panel-nav:first-child,
.aui-page-hybrid .aui-page-panel-content:first-child,
.aui-page-hybrid .aui-page-panel-item:first-child,
.aui-page-hybrid .aui-page-panel-sidebar:first-child {
  padding-left: 0;
}
.aui-page-fixed .aui-page-panel-nav:last-child,
.aui-page-fixed .aui-page-panel-content:last-child,
.aui-page-fixed .aui-page-panel-item:last-child,
.aui-page-fixed .aui-page-panel-sidebar:last-child,
.aui-page-hybrid .aui-page-panel-nav:last-child,
.aui-page-hybrid .aui-page-panel-content:last-child,
.aui-page-hybrid .aui-page-panel-item:last-child,
.aui-page-hybrid .aui-page-panel-sidebar:last-child {
  padding-right: 0;
}
/* reset to 100% inside page panel */
.aui-page-panel .aui-page-header {
  width: auto;
}
.aui-page-panel .aui-page-header-inner {
  width: 100%;
}
/**
 * TABS AS FIRST CHILD IN CONTENT
 * Explicitly sets bg to white, changes horizontal hovers to work on grey.
 * Remember these extend the standard component styles.
 */
#content > .aui-tabs {
  margin: 20px;
  background: transparent;
}
#content > .aui-tabs > .tabs-pane {
  padding: 20px;
}
#content > .aui-tabs.horizontal-tabs > .tabs-pane {
  border: 1px solid #cccccc;
  border-top: none;
  border-radius: 0 0 3px 3px;
  background: #ffffff;
}
#content > .aui-tabs.horizontal-tabs > .tabs-menu {
  display: table;
  /* stops a gap appearing */

}
/**
 * AUI Forms inside of a focused page
 */
.aui-page-focused .aui-page-panel-content > h2:first-child {
  border-bottom: 1px solid #cccccc;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.aui-page-focused .aui-page-panel-content > form.aui .buttons-container {
  border-top: 1px solid #cccccc;
  margin-top: 20px;
  padding-top: 20px;
}
