
section[role="region"] > header:first-child {
  position: relative;
  z-index: 10;
  padding: 0;
  height: 5rem;
  color: #fff;
  background-color: #F97C17;
  border: none;
}
section[role="region"] > header:first-child h1 {
  font-size: 2.5rem;
  line-height: 5rem;
  text-align: left;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0 1rem 0 3rem;
  height: 100%;
  font-weight: lighter;
}
section[role="region"] > header:first-child h1 em {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1em;
  font-style: normal;
}
section[role="region"] > header:first-child form {
  display: block;
  overflow: hidden;
  position: relative;
  padding: 1rem 1rem 0 0.5rem ;
  margin-left: 3.5rem;
}
section[role="region"] > header:first-child input[type="text"] {
  width: 100%;
  height: 3rem;
  -moz-box-sizing: border-box;
  padding: 0 0.8rem;
  border: solid 0.1rem #9d4123;
  border-top-color: #a6501e;
  border-radius: 0.3rem;
  background: #fff url(gaia/widgets/headers/images/ui/shadow.png) repeat-x left -0.1rem;
  font-size: 1.5rem;
  line-height: 3em;
  box-shadow: none;
}
section[role="region"] > header:first-child form button[type="reset"] {
  font-size: 0;
  overflow: hidden;
  position: absolute;
  right: 1rem;
  top: 1rem;
  bottom: 0;
  width: 3rem;
  height: auto;
  margin: 0;
  display: none;
  border: none;
  background: url(gaia/widgets/headers/images/icons/clear.png) no-repeat center center / 1.7rem auto;
}
section[role="region"] > header:first-child input[type="text"]:valid + button[type="reset"] {
  display: block;
}
section[role="region"] > header:first-child menu[type="toolbar"] {
  height: 100%;
  float: right;
}
section[role="region"] > header:first-child menu[type="toolbar"] a,
section[role="region"] > header:first-child menu[type="toolbar"] button {
  -moz-box-sizing: border-box;
  position: relative;
  float: left;
  width: auto;
  min-width: 5rem;
  height: 5rem;
  margin-bottom: 0;
  padding: 0 1rem;
  border-radius: 0;
  line-height: 5rem;
  background: none;
  text-align: center;
  text-shadow: none;
  z-index: 5;
}
section[role="region"] > header:first-child menu[type="toolbar"] {
  padding: 0;
  margin: 0;
}
section[role="region"] > header:first-child a,
section[role="region"] > header:first-child button {
  border: none;
  padding: 0;
  overflow: hidden;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.1em;
  color: #fff;
  border-radius: 0;
  text-decoration: none;
}
section[role="region"] > header:first-child button::-moz-focus-inner {
  outline: none;
  border: none;
  margin-top: -0.2rem; 
  padding: 0;
}
section[role="region"] > header:first-child > a:not([aria-disabled="true"]):active:after,
section[role="region"] > header:first-child > button:not(:disabled):active:after,
section[role="region"] > header:first-child > a:not([aria-disabled="true"]):hover:after,
section[role="region"] > header:first-child > button:not(:disabled):hover:after,
section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):active  {
  background-color: #dc6a0e !important;
}
section[role="region"] > header:first-child menu[type="toolbar"] a[aria-disabled="true"],
section[role="region"] > header:first-child menu[type="toolbar"] button[disabled]  {
  opacity: 0.5;
}
section[role="region"] > header:first-child .icon {
  position: relative;
  float: none;
  display: inline-block;
  vertical-align: middle;
  width: 3rem;
  height: 5rem;
  margin: 0 -1rem;
  background: transparent no-repeat center center / 3rem auto;
  font-size: 0;
  overflow: hidden;
}
section[role="region"] > header:first-child .icon.icon-add {
  background-image: url(gaia/widgets/headers/images/icons/add.png);
}
section[role="region"] > header:first-child .icon.icon-compose {
  background-image: url(gaia/widgets/headers/images/icons/compose.png);
}
section[role="region"] > header:first-child .icon.icon-edit {
  background-image: url(gaia/widgets/headers/images/icons/edit.png);
}
section[role="region"] > header:first-child .icon.icon-send {
  background-image: url(gaia/widgets/headers/images/icons/send.png);
}
section[role="region"] > header:first-child .icon.icon-close {
  background-image: url(gaia/widgets/headers/images/icons/close.png);
}
section[role="region"] > header:first-child .icon.icon-back {
  background-image: url(gaia/widgets/headers/images/icons/back.png);
}
section[role="region"] > header:first-child .icon.icon-menu {
  background-image: url(gaia/widgets/headers/images/icons/menu.png);
}
section[role="region"] > header:first-child .icon.icon-user {
  background-image: url(gaia/widgets/headers/images/icons/user.png);
}
section[role="region"] > header:first-child .icon.icon-reply {
  background-image: url(gaia/widgets/headers/images/icons/reply.png);
}
section[role="region"] > header:first-child .icon.icon-reply-all {
  background-image: url(gaia/widgets/headers/images/icons/reply-all.png);
}
section[role="region"] > header:first-child .icon.icon-options {
  background-image: url(gaia/widgets/headers/images/icons/options.png);
}
section[role="region"] > header:first-child > button,
section[role="region"] > header:first-child > a {
  position: relative;
  width: 5rem;
  height: 5rem;
  background: none;
  float: left;
  overflow: visible;
  margin: 0 -5rem 0 0;
}
section[role="region"] > header:first-child > button:after,
section[role="region"] > header:first-child > a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 2.6rem;
  height: 5rem;
}
section[role="region"] > header:first-child > button .icon,
section[role="region"] > header:first-child > a .icon {
  display: block;
  margin: 0;
  font-size: 0;
}
section[role="region"] > header {
  z-index: 0;
  height: auto;
}
section[role="region"] > header:after {
  display: none;
}
section[role="region"] header h2 {
  margin: 0;
  padding: 0.8rem 3rem;
  color: #424242;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.8rem;
  border-bottom: solid 0.1rem #e6e6e6;
}
section[role="region"].skin-dark > header:first-child,
.skin-dark section[role="region"] > header:first-child {
  background-color: #242D33;
}
section[role="region"].skin-dark > header:first-child .icon.icon-back {
  background-image: url(gaia/widgets/headers/images/icons/organic/back.png);
}
section[role="region"].skin-dark > header:first-child .icon.icon-close {
  background-image: url(gaia/widgets/headers/images/icons/organic/close.png);
}
section[role="region"].skin-dark > header:first-child .icon.icon-menu {
  background-image: url(gaia/widgets/headers/images/icons/organic/menu.png);
}
section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):active:after,
section[role="region"].skin-dark > header:first-child > button:not(:disabled):active:after,
section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):hover:after,
section[role="region"].skin-dark > header:first-child > button:not(:disabled):hover:after,
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):active  {
  
  background-color: #242D33 !important;
}
section[role="region"].skin-dark header h2,
.skin-dark section[role="region"] header h2 {
  background-color: #2c353b;
  color: #fff;
  border: none;
}
section[role="region"].skin-organic > header:first-child,
.skin-organic section[role="region"] > header:first-child {
  background-color: #F4F4F4;
}
section[role="region"].skin-organic > header:first-child h1,
.skin-organic section[role="region"] > header:first-child h1 {
  color: #868692;
}
section[role="region"].skin-organic > header:first-child .icon.icon-back,
.skin-organic section[role="region"] > header:first-child .icon.icon-back {
  background-image: url(gaia/widgets/headers/images/icons/organic/back.png);
}
section[role="region"].skin-organic > header:first-child .icon.icon-close,
.skin-organic section[role="region"] > header:first-child .icon.icon-close {
  background-image: url(gaia/widgets/headers/images/icons/organic/close.png);
}
section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):active:after,
.skin-organic section[role="region"] > header:first-child > a:not([aria-disabled="true"]):active:after,
section[role="region"].skin-organic > header:first-child > button:not(:disabled):active:after,
.skin-organic section[role="region"] > header:first-child > button:not(:disabled):active:after,
section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):hover:after,
.skin-organic section[role="region"] > header:first-child > a:not([aria-disabled="true"]):hover:after,
section[role="region"].skin-organic > header:first-child > button:not(:disabled):hover:after,
.skin-organic section[role="region"] > header:first-child > button:not(:disabled):hover:after,
section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):active,
.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):active  {
  background-color: #aae1e9 !important;
}
section[role="region"].skin-organic header h2,
.skin-organic section[role="region"] header h2 {
  background-color: #e7e7e7;
  color: #4D4D4D;
  border: none;
}
section[role="region"].skin-organic > header:first-child a,
.skin-organic section[role="region"] > header:first-child a,
section[role="region"].skin-organic > header:first-child button,
.skin-organic section[role="region"] > header:first-child button {
  color: #858585;
}
html[dir="rtl"] section[role="region"] > header:first-child h1 {
  text-align: right;
  margin: 0 3rem 0 0;
}
html[dir="rtl"] section[role="region"] > header:first-child button,
html[dir="rtl"] section[role="region"] > header:first-child a {
  left: inherit;
  right: 0;
}
html[dir="rtl"] section[role="region"] > header:first-child > button .icon,
html[dir="rtl"] section[role="region"] > header:first-child > a .icon {
  margin-left: 0;
  margin-right: -2rem;
}
html[dir="rtl"] section[role="region"] > header:first-child > button .icon:after,
html[dir="rtl"] section[role="region"] > header:first-child > a .icon:after {
  left: inherit;
  right: 0;
}
html[dir="rtl"] section[role="region"] > header:first-child .icon.icon-back {
  background-image: url(gaia/widgets/headers/images/icons/back-rtl.png);
}
section[role="status"] {
  background: rgba(64,64,64,1) url(gaia/widgets/status/images/ui/pattern.png) repeat left top;
  overflow: hidden;
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  text-align: left;
}
section[role="status"] p {
  font-size: 1.8rem;
  font-weight: normal;
  line-height: 2.2rem;
  margin: 1rem 3rem;
  padding: 0;
  text-align: left;
}
section[role="status"] p strong {
  font-weight: 500;
}
[role="toolbar"] {
  height: 4rem;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  background: rgba(0,0,0, 0.85);
}
[role="toolbar"] ul {
  float: left;
  list-style: none;
  padding: 0;
  margin: 0;
}
[role="toolbar"] ul:last-child {
  float: right;
}
[role="toolbar"] li {
  float: left;
}
[role="toolbar"] button {
  width: 5.5rem;
  height: 4rem;
  border: none;
  font-size: 0;
  background: transparent no-repeat 50% 50% / 3rem auto;
  padding: 0;
  border-radius: 0;
}
[role="toolbar"] button:active {
  background-color: #008aaa;
}
[role="tablist"] {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}
[role="tablist"] > [role="tab"] {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}
[role="tablist"][data-items="2"] > [role="tab"] {
  width: calc(100% / 2);
}
[role="tablist"][data-items="3"] > [role="tab"] {
  width: calc(100% / 3);
}
[role="tablist"][data-items="4"] > [role="tab"] {
  width: calc(100% / 4);
}
[role="tablist"][data-items="5"] > [role="tab"] {
  width: calc(100% / 5);
}
[role="tablist"] > [role="tab"] > a {
  font-size: 1.3rem;
  text-decoration: none;
  line-height: 4rem;
  text-align: center;
  color: #FFF;
  float: left;
  width: 100%;
  background: #000 no-repeat center top;
  position: relative;
  color: #fff;
}
[role="tablist"] > [role="tab"] > a:active {
  background-color: #008aaa;
  color: #fff;
}
[role="tablist"] > [role="tab"][aria-disabled="true"] > a:active {
  background-color: #000;
}
[role="tablist"] > [role="tab"] > a.icon {
  font-size: 0;
}
[role="tablist"] > [role="tab"] > a.icon:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: none no-repeat center top / 3rem auto;
  left: 0;
  z-index: 1;
}
[role="tablist"] > [role="tab"]:target > a,
[role="tablist"] > [role="tab"][aria-selected="true"] > a {
  color: #62c6f5
}
[role="tablist"] > [role="tab"]:target > a.icon:after,
[role="tablist"] > [role="tab"][aria-selected="true"] > a.icon:after {
  background-position: center -4rem;
}
[role="tablist"] > [role="tab"][aria-disabled="true"] > a {
  color: #4d4d4d;
}
[role="tablist"] > [role="tab"][aria-disabled="true"] > a.icon:after {
  background-position: center -8rem;
}
[role="tablist"] [role="tabpanel"] {
  position: absolute;
  top: 4rem;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: calc(100% - 4rem);
  z-index: -1;
  display: block;
  overflow: auto;
}
[role="tablist"] :target [role="tabpanel"],
[role="tablist"] [aria-selected="true"] [role="tabpanel"] {
  z-index: 1;
  visibility: visible;
}
[role="tablist"].bottom > [role="tab"] {
  height: 100%;
}
[role="tablist"].bottom  > [role="tab"] > a {
  position: relative;
  height: 4rem;
  top: calc(100% - 4rem);
}
[role="tablist"].bottom [role="tabpanel"] {
  top: 0;
}
[role="tablist"][data-type="filter"] {
  background: #c7c7c7;
  display: inline-block;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  background: #eef2f5 url(gaia/widgets/tabs/images/ui/background.png) repeat-x left bottom;
  height: 4rem;
}
[role="tablist"][data-type="filter"] > [role="tab"] {
  float: left;
  text-align: center;
  -moz-box-sizing: border-box;
  color: #737272;
  border-left: solid 0.1rem #b1b4b5;
}
[role="tablist"][data-type="filter"] > [role="tab"]:first-child {
  border-left: none;
}
[role="tablist"][data-type="filter"] > [role="tab"] > a {
  display: block;
  padding: 0 0.5rem;
  text-decoration: none;
  color: #737272;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: transparent;
  font-weight: normal;
  font-size: 1.6rem;
  line-height: 4rem;
  width: auto;
  float: none;
}
[role="tablist"][data-type="filter"] > [role="tab"]:target,
[role="tablist"][data-type="filter"] > [role="tab"][aria-selected="true"] {
  background: #fff;
}
[role="tablist"][data-type="filter"] > [role="tab"]:target > a,
[role="tablist"][data-type="filter"] > [role="tab"][aria-selected="true"] > a {
  color: #000;
  font-weight: 500;
}
[role="tablist"][data-type="filter"] > [role="tab"] > a:active {
  background-color: #008aaa;
  color: #fff;
}
[role="tablist"][data-type="filter"].bottom {
  bottom: 100%;
  top: auto;
  background: #eef2f5 url(gaia/widgets/tabs/images/ui/background-revert.png) repeat-x left top;
}
[role="tablist"][data-type="filter"].bottom > [role="tab"] > a {
  height: auto;
}
section[role="region"] {
  width: 100%;
  transition: all 0.25s ease;
  position: relative;
  z-index: 100;
}
section[role="region"]:target {
  transform: translateX(80%);
}
section[role="region"] > header:first-child > a:first-of-type {
  display: none;
}
section[role="region"]:target > header:first-child > a:first-of-type {
  display: block;
}
section[role="region"] > header:first-child > a:last-of-type {
  display: block;
}
section[role="region"]:target > header:first-child > a:last-of-type {
  display: none;
}
section[data-type="sidebar"] {
  position: absolute;
  width: 80%;
  background: url(gaia/widgets/drawer/images/ui/pattern.png) repeat;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
section[data-type="sidebar"] > header {
  position: relative;
  z-index: 10;
  height: 5rem;
  color: #fff;
  background: url(gaia/widgets/drawer/images/ui/header.png) repeat-x left bottom / 100% auto;
}
section[data-type="sidebar"] > header:after {
  content: "";
  height: 0.3rem;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: url(gaia/widgets/drawer/images/ui/shadow_header.png) repeat-x left top;
  background-size: auto 100%;
}
section[data-type="sidebar"] > header h1 {
  font-size: 2.2rem;
  line-height: 4.8rem;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  margin: 0 0 0 3rem;
  height: 100%
}
section[data-type="sidebar"] > header h1 em {
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1em;
}
section[data-type="sidebar"] > header menu[type="toolbar"] {
  height: 100%;
  float: right;
}
section[data-type="sidebar"] > header menu[type="toolbar"] a,
section[data-type="sidebar"] > header menu[type="toolbar"] button {
  height: 4.9rem;
  line-height: 4.9rem;
  float: left;
  background: none;
  padding: 0 1.75rem;
  -moz-box-sizing: border-box;
  min-width: 5rem;
  text-align: center;
}
section[data-type="sidebar"] > header menu[type="toolbar"] a:last-child,
section[data-type="sidebar"] > header menu[type="toolbar"] button:last-child {
  background: url(gaia/widgets/drawer/images/ui/separator.png) no-repeat left center / auto 3.1rem;
}
section[data-type="sidebar"] > header menu[type="toolbar"] {
  padding: 0;
  margin: 0;
}
section[data-type="sidebar"] > header a,
section[data-type="sidebar"] > header button {
  border: none;
  background: none;
  padding: 0;
  overflow: hidden;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.1em;
  color: #fff;
}
section[data-type="sidebar"] > header a:first-letter,
section[data-type="sidebar"] > header button:first-letter {
  text-transform: uppercase;
}
section[data-type="sidebar"] > header .icon {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  margin: 0 -1rem;
  background: transparent no-repeat center center / 100% auto;
  font-size: 0;
  overflow: hidden;
  position: relative;
  height: 4.9rem;
}
section[data-type="sidebar"]:after {
  content: "";
  width: 1rem;
  background: url(gaia/widgets/drawer/images/ui/shadow.png) right top repeat-y;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
}
section[data-type="sidebar"] > nav {
  overflow-y: auto;
  max-height: 100%;
  margin-right: -0.8rem;
}
section[data-type="sidebar"] > nav > h2 {
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 3.3rem;
  text-indent: 3rem;
  color: #fff;
  background: url(gaia/widgets/drawer/images/ui/pattern_subheader.png) repeat left top;
  border-bottom: 0.1rem solid #596068;
  margin: 0;
  padding-right: 0.8rem;
}
section[data-type="sidebar"] [role="toolbar"] {
  position: absolute;
}
section[data-type="sidebar"] > nav > ul {
  width: 100%;
  margin: 0;
  padding: 0;
}
section[data-type="sidebar"] > nav > ul > li {
  color: #fff;
  list-style: none;
  transition: background 0.2s ease;
}
section[data-type="sidebar"] > nav > ul > li:active {
  background: #00ABCC;
}
section[data-type="sidebar"] > nav > ul > li > a {
  text-decoration: none;
  color: #fff;
  font-size: 1.6rem;
  line-height: 4.35rem;
  border-bottom: 0.1rem solid #596068;
  text-indent: 3rem;
  padding-right: 0.8rem;
  width: 100%;
  -moz-box-sizing: border-box;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
[data-type="list"] {
  font-weight: 400;
  padding: 0 1.5rem;
}
[data-type="list"] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
[data-type="list"] strong {
  font-weight: 500;
}
[data-type="list"] header {
  border-bottom: 0.1rem solid #ff4E00;
  padding: 0 1.5rem;
  margin: 0;
  font-size: 1.6rem;
  height: 3rem;
  line-height: 4rem;
  font-weight: normal;
  color: #ff4E00;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-type="list"] li {
  width: 100%;
  height: 6rem;
  -moz-box-sizing: border-box;
  transition: transform 0.3s ease, padding 0.3s ease;
  border-bottom: solid 0.1rem #e7e7e7;
  color: #000;
  margin: 0;
  display: block;
  position: relative;
  z-index: 1;
}
[data-type="list"] li:last-child {
  border: none;
}
li a:active {
  background: none; 
}
[data-type="list"] li > a {
  text-decoration: none;
  color: #000;
  display: block;
  height: 6rem;
  position: relative;
  border: none;
  outline: none;
}
[data-type="list"].active li:after,
[data-type="list"] li > a:after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -1.5rem;
  top: 0;
  right: -1.5rem;
  bottom: 0;
  z-index: 3;
}
[data-type="list"].active li:active:after,
[data-type="list"].active li:hover:after,
[data-type="list"] li > a:active:after,
[data-type="list"] li > a:hover:after {
  background-color: rgba(0,213,255,0.3);
}
[data-type="list"] li[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.2;
  border-color: #888;
}
[data-type="list"] aside {
  float: left;
  margin: 0 0.5rem 0 0;
  height: 100%;
  position: relative;
  z-index: 2;
}
[data-type="list"] li > a aside,
[data-type="list"] li > a aside.icon {
  background-color: transparent;
  z-index: -1;
}
[data-type="list"] aside.pack-end {
  float: right;
  margin: 0 0 0 0.5rem;
  text-align: right;
}
[data-type="list"] aside.icon {
  width: 3rem;
  height: 6rem;
  background: #fff no-repeat left center / 100% auto;
  font-size: 0;
  display: block;
  overflow: hidden;
}
[data-type="list"] aside img {
  display: block;
  overflow: hidden;
  width: 6rem;
  height: 6rem;
  background: transparent center center / cover;
  position: relative;
  z-index: 1;
}
[data-type="list"] li p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none;
  display: block;
  margin: 0;
  color: #5b5b5b;
  font-size: 1.5rem;
  line-height: 2rem;
}
[data-type="list"] li p:first-of-type {
  font-size: 1.8rem;
  line-height: 2.2rem;
  color: #000;
  padding: 1rem 0 0;
}
[data-type="list"] li p:only-child,
[data-type="list"] li p:first-of-type:last-of-type {
  line-height: 4rem;
}
[data-type="list"] li p em {
  font-size: 1.5rem;
  font-style: normal;
}
[data-type="list"] li p time {
  margin-right: 0.3rem;
  text-transform: uppercase;
}
[data-type="list"] li > .pack-checkbox,
[data-type="list"] li > .pack-radio,
[data-type="list"] li > .pack-switch {
  pointer-events: none;
  position: absolute;
  top: -0.1rem;
  bottom: 0;
  right: 0;
  left: -4rem;
  z-index: 1;
  width: auto;
  height: auto;
}
[data-type="list"] li > .pack-checkbox input ~ span:after,
[data-type="list"] li > .pack-radio input ~ span:after,
[data-type="list"] li > .pack-switch input ~ span:after {
  left: 0;
  margin-left: 0;
}
[data-type="list"] [data-type="edit"] li {
  transform: translateX(4rem);
  padding-left: 0;
}
[data-type="list"] [data-type="edit"] li > .pack-checkbox,
[data-type="list"] [data-type="edit"] li > .pack-radio,
[data-type="list"] [data-type="edit"] li > .pack-switch {
  pointer-events: auto;
}
[data-type="list"] [data-type="edit"] li > a:active:after,
[data-type="list"] [data-type="edit"] li > a:hover:after {
  display: none;
}
label.pack-checkbox,
label.pack-radio,
label.pack-switch {
  display: inline-block;
  vertical-align: middle;
  width: 5rem;
  height: 5rem;
  position: relative;
  background: none;
}
label.pack-checkbox input,
label.pack-radio input,
label.pack-switch input {
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
label.pack-checkbox input ~ span:after,
label.pack-radio input ~ span:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -1.1rem 0 0 -1.1rem;
  width: 2.2rem;
  height: 2.2rem;
  pointer-events: none;
}
label.pack-checkbox input ~ span:after {
  background: url(gaia/widgets/switches/images/check/default.png) no-repeat center top / 2.2rem auto;
}
label.pack-radio input ~ span:after {
  background: url(gaia/widgets/switches/images/radio/default.png) no-repeat center top / 2.2rem auto;
}
label.pack-checkbox input:checked ~ span:after,
label.pack-radio input:checked ~ span:after,
label.pack-switch input:checked ~ span:after {
  background-position: center bottom;
}
label.pack-checkbox.danger input ~ span:after {
  background-image: url(gaia/widgets/switches/images/check/danger.png);
}
label.pack-radio.danger input ~ span:after {
  background-image: url(gaia/widgets/switches/images/radio/danger.png);
}
label.pack-switch input ~ span:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 6rem;
  margin: -1.4rem 0rem 0rem;
  height: 2.7rem;
  pointer-events: none;
  border-radius: 1.35rem;
  overflow: hidden;
  background: #e6e6e6 url(gaia/widgets/switches/images/switch/background_off.png) no-repeat -3.2rem 0rem / 9.2rem 2.7rem;
  transition: background 0.2s ease;
}
label.pack-switch input:checked ~ span:after {
  background: #e6e6e6 url(gaia/widgets/switches/images/switch/background.png) no-repeat 0rem 0rem / 9.2rem 2.7rem;
}
label.pack-switch input:disabled ~ span:after {
  opacity: 0.4;
}
label.pack-switch input.uninit ~ span:after {
  transition: none;
}
body {
  font-family: 'MozTTLight', Verdana, sans-serif;
}
a:hover, a:active, a:focus {
  outline: none !important;
}
button::-moz-focus-inner {
  border: 0;
}
html, body {
  color: white;
  margin: 0;
  padding: 0;
  font-size: 10px;
  background: #222;  
  height: 100%;
  overflow: hidden;
}
h2.bb-docs {
  font-size: 1.8rem;
  font-weight: lighter;
  color: #666;
  margin: -0.1rem 0 0;
  background-color: #f5f5f5;
  padding: 0.4rem 0.4rem 0.4rem 3rem;
  border: solid 0.1rem #e8e8e8;
}
section[role="region"] {
  height: 100%;
  line-height: 1em;
  font-size: 2.2rem;
}
section[role="region"].slide-out {
  -moz-transition: left 3s;
  -webkit-transition: left 1s;
  -o-transition: left 1s;
  transition: left 1s;
  left: 28rem;
}
.small{
  font-size: 1.1rem;  
}
.center{
  text-align: center;
}
[role="toolbar"] .icon {
  background: no-repeat center top / 3rem auto;
}
[role="toolbar"] .selected .icon {
  background-position: center -4rem;
}
[role="toolbar"] .icon-memory {
  background-image: url(../img/iconaction_memory.png);
}
[role="toolbar"] .icon-draw {
  background-image: url(../img/iconaction_draw.png);
}
[role="toolbar"] .icon-table {
  background-image: url(../img/iconaction_gridview.png);
}
[role="toolbar"] .icon-statistics {
  background-image: url(../img/iconaction_statistics.png);
}
[role="toolbar"] .icon-info {
  background-image: url(../img/iconaction_info.png);
}
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 15/10),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi),
only screen and (min-resolution: 1.5dppx) {
  [role="toolbar"] .icon-memory {
    background-image: url(../img/iconaction_memory@1.5x.png);
  }
  [role="toolbar"] .icon-draw {
    background-image: url(../img/iconaction_draw@1.5x.png);
  }
  [role="toolbar"] .icon-table {
    background-image: url(../img/iconaction_gridview@1.5x.png);
  }
  [role="toolbar"] .icon-statistics {
    background-image: url(../img/iconaction_statistics@1.5x.png);
  }
  [role="toolbar"] .icon-info {
    background-image: url(../img/iconaction_info@1.5x.png);
  }
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
  [role="toolbar"] .icon-memory {
    background-image: url(../img/iconaction_draw@2x.png);
  }
  [role="toolbar"] .icon-draw {
    background-image: url(../img/iconaction_draw@1.5x.png);
  }
  [role="toolbar"] .icon-table {
    background-image: url(../img/iconaction_gridview@1.5x.png);
  }
  [role="toolbar"] .icon-statistics {
    background-image: url(../img/iconaction_statistics@1.5x.png);
  }
  [role="toolbar"] .icon-info {
    background-image: url(../img/iconaction_info@1.5x.png);
  }
}
#buttonbar button{
  padding: 1.2rem 1.2rem;
}
section[role="region"]{
  background: #222 url(../img/background.jpg) repeat-x;
  background-size: auto 150%;
} 
section[role="main"] {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 5rem 0 4rem 0;
  overflow: hidden;
}
section[role="main"] a {
  color: rgb(0,171,204);
  text-decoration: none;
}
section[role="main-content"] {
  height: 100%;
  overflow: hidden;
}
section[role="main-content"] p{
  padding: 0 5px;
}
section[data-type="sidebar"] {
  width: 28rem;
}
section[data-type="sidebar"] > nav > ul > li > div.checkbox {
  float:left;
  width: 2.2rem;
  height: 2.2rem;
  margin: 1rem -3rem 1rem 0.3rem;
  background: url(gaia/widgets/switches/images/check/default.png) no-repeat left top / 2.2rem auto;
}
section[data-type="sidebar"] > nav > ul > li.selected > .checkbox{
  background-position: bottom;
}
section[data-type="sidebar"] > nav > ul > li.selected > a{
  color: rgb(0,171,204);
}
section[role="status"]{
  background: none;
  text-align: center;
}
section[role="status"] p{
  text-align: center;
  margin: 10px 0;
}
section[role="status"] button, button.box{
  color: #eee;  
  text-shadow: 0px 1px 1px rgba(250,250,250,0.1);  
  text-decoration: none;  
  background: rgb(50,50,50);  
  box-shadow: 0px 2px 0px 0px rgb(34,34,34),   
  0px 3px 10px 0px rgb(17,17,17),   
  inset 0px 1px 1px 0px rgba(250, 250, 250, .2),    
  inset 0px -12px 35px 0px rgba(0, 0, 0, .5);   
  border: 0;  
  border-radius: 3px;  
  text-align: center;  
  font-size: 1.8rem;
}
.right, #buttonbar button.right{
  color: #00FF00;
}
.wrong, #buttonbar button.wrong{
  color: #FF0000;
}
section [role="memory"]{
  padding-top: 1rem;
  text-align: center;
  line-height: 1rem;
}
button.box, #box0 {
  margin: 0.5rem;
  min-width: 8rem;
  height: 8rem;
  font-size: 4rem;
  color: #fff;
}
button.box:active {
  background-color: #000;
  background-image: none;
}
button.box-right:active {
  background-color: #000;
  border-color: #00ff00;
}
button.box-wrong{
  color: #FF0000;
  border-color: #820000;
}
section [role="draw"] {
  height: 100%;
}
section [role="draw"] canvas {
  position: absolute;
  
  width: 100%;
}
section [role="kanatable"] {
  overflow-y:auto;
  height: 100%;
}
section [role="kanatable"] table{
  margin-left:auto; 
  margin-right:auto;
}
section [role="kanatable"] .romaji{
  color: #999;
  font-size: 1.5rem;
}
section [role="kanatable"] p{
  font-size: 2.5rem;
  text-align: center;
  padding: 0;
  margin: 0;
}
section [role="info"] {
  overflow-y:auto;
  height: 100%;
  font-size:1.5rem; 
  padding-bottom: 5rem;
}
