x-layout {
  overflow: scroll;
  height: 100%;
}
x-layout > header {
  padding: 0;
  background-color: orange;
  color: white;
  font-weight: bold;
  text-align: center;
}

x-layout > section {
  font-size:1.5rem;
  padding: 10px;
}
x-layout > section[data-type="settings"],
x-layout > section[data-type="home"],
x-layout > section[data-type="list"],
x-layout > section[data-type="details"] {
  padding: 0;
}

/*
  Buttons
 */

x-layout > section a,
x-flipbox > section a {
  text-decoration: none;
  text-align: center;
  margin: 0;
  white-space: nowrap;
  font-size: 1.5rem;
  color: #292929;
  /*padding: 6px 18px;*/
  overflow: hidden;
  /*border: 1px solid rgba(15, 15, 15, 0.2);*/
/*  border: none;
  border-radius: 1.5rem;*/
  /*box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2);*/
  /*background: #E1E1E1 url("images/gradient.png") repeat-x bottom;*/
  text-overflow: ellipsis;
}

x-layout > section a.recommend,
x-flipbox > section a.recommend {
  /*background-color: rgba(15, 173, 45, 1);*/
  background-color: #1E824C;
  color: #F2F2F2;
}

x-layout > section a.danger,
x-flipbox > section a.danger {
  background-color: #e51e1e;
  color: #fff;
}

/*
  Lists
 */

ul {
  margin: 0px;
  padding: 0px;
  /*overflow: hidden;*/
  list-style: none outside none;
}
x-layout > [data-type="settings"] ul {
  position: inherit;
}
x-layout > [data-type="settings"] ul li {
  position: relative;
  min-height: 6rem;
  margin: 0px 1.5rem;
  border-bottom: 0.1rem solid #E6E6E3;
  color: #000;
}
x-layout > [data-type="settings"] ul li a {
  font-size: 1.5rem;
  line-height: 5rem;
}
x-layout > [data-type="settings"] ul li > label.pack-switch > span {
  padding-right: 9rem;
}
x-layout > [data-type="settings"] ul li > a,
x-layout > [data-type="settings"] ul li > span,
x-layout > [data-type="settings"] ul li > label > span {
  display: block;
  text-decoration: none;
  outline: 0px none;
  color: #000;
  height: 6rem;
  font-size: 1.9rem;
  line-height: 6rem;
  padding: 0px 3rem;
  margin: 0px -1.5rem;
}
x-layout > [data-type="settings"] ul li > *,
x-layout > [data-type="settings"] ul li > label > * {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

x-layout > [data-type="settings"] ul li p {
  font-size: 1.9rem;
  line-height: 1.9rem;
  font-weight: 400;
  margin: 0px;
  padding: 1.5rem 1.5rem 1rem;
}

x-layout > [data-type="settings"] ul li .button {
  width: 100%;
  height: 3.8rem;
  margin: 0px 0px 1rem;
  padding: 0px 1.5rem;
  display: inline-block;
  vertical-align: middle;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 0.1rem solid #A6A6A6;
  border-radius: 0.2rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 3.8rem;
  color: #333;
  text-align: center;
  text-shadow: 0.1rem 0.1rem 0px rgba(255, 255, 255, 0.3);
  text-decoration: none;
  outline: medium none;
  position: relative;
  background: none repeat scroll 0% 0% #E7E7E7;
  text-align: left;
}
x-layout > [data-type="settings"] ul li .button.icon-dialog:before {
  background-color: transparent;
  background-image: url('img/button-dialog.png');
  background-repeat: no-repeat;
  background-position: 100% 0%;
  background-size: auto auto;
  background-attachment: scroll;
  top: 100%;
  margin-top: -2.4rem;
}
x-layout > [data-type="settings"] ul li  .button.icon-dialog {
  font-size: 1.7rem;
}
x-layout > [data-type="settings"] ul li p.about a {
  text-decoration: underline;
  line-height: normal;
}
x-layout > [data-type="settings"] ul li p.about {
  font-size: 1.5rem;
  line-height: normal;
  padding: 0.5rem 0 0 0;
  white-space: normal;
}
x-layout > [data-type="settings"] ul li p.about > * {
  margin: 0;
}
x-layout > [data-type="settings"] ul li h2.about {
  font-size: 1.9rem;
  background-color: grey;
  padding: 1.5rem 1.5rem 1rem;
  margin-bottom: 1rem;
}



x-layout > [data-type="list"] ul {
  width: 100%;
}
x-layout > [data-type="list"] ul li {
  /*height: 7rem;*/
  border-bottom: solid 0.1rem #1F3A93; /* Jacksons Purple */
  /*padding-right: 1rem;
  padding-left: 1rem;*/
  padding-top:0.1rem;
  padding-bottom: 1rem;
  height: 5.5rem;
  /* padding: 1rem; */
}
x-layout > [data-type="list"] ul li:hover,
x-layout > [data-type="list"] ul li:active {
  /*background-color: #B0C4DE;*/ /* LightSteelBlue*/
  background-color: #AFEEEE; /* PaleTurquoise */
}
/*x-layout > [data-type="list"] ul li:first-child {
  padding-top:0;
}*/
/*x-layout > [data-type="list"] ul li:last-child {
  border: none;
}*/
x-layout > [data-type="list"] ul li p {
  font-size: 2rem;
}
x-layout > [data-type="list"] ul li p.new-line {
  padding-top: 2rem;
}
x-layout > [data-type="list"] ul li p span.align-left {
  margin-left: 0;
}
x-layout > [data-type="list"] ul li p span.align-right {
  margin-right: 0;
}












x-layout > [data-type="home"] ul {
  min-width: 95%;
  height: 100%;
  display: inline-block;
}
x-layout > [data-type="home"] ul li {
  /*border: solid 1px red;*/
  width: calc(50% - 1px);
  height: 23%; /*27%*/
  /*min-height: 14rem;*/
  float: left;
/*  text-align: center;*/
}
x-layout > [data-type="home"] ul li:first-child,
x-layout > [data-type="home"] ul li.button {
  width: 100%;
}
x-layout > [data-type="home"] ul li.button {
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  height: 7rem;
}
x-layout > [data-type="home"] ul li.bottom {
  height: calc(50% - 7rem);
}
x-layout > [data-type="home"] ul li:last-child {
  position: fixed;
  /*z-index: 10;*/
  width: 100%;
  height: 100%;
  background: rgba(248, 248, 255, 0.7);
}
x-layout > [data-type="home"] ul li:nth-child(odd) {
/*  border-bottom: solid 1px #1F3A93;
  border-right: solid 1px #1F3A93;*/
}
x-layout > [data-type="home"] ul li:nth-child(even) {
  /*border-bottom: solid 1px #1F3A93;*/
}



x-layout > [data-type="details"] ul {
  width: 100%;
}
x-layout > [data-type="details"] ul li div {
  font-size: 2rem;
  padding-right: 1rem;
  padding-left: 1rem;
  padding-top: 1rem;
}
x-layout > [data-type="details"] ul li:last-child {
  margin-bottom: 40px;
}