/* Basic all-device representation. */

@import url(https://fonts.googleapis.com/css?family=Berkshire+Swash);
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700);

ol, ul {
  margin: 1em 0 1em 1em;
  max-width: 100%
}

ul.squarelist {
  list-style: square inside;
}

ol.decimallist {
  list-style: decimal inside;
}

ul.squarelist li, ol.decimallist  li {
  padding-bottom: 5px;
}

.licensetitle {
  padding-top: 10px;
  border-bottom: 1px solid grey;
}

html {
/* This always shows the right hand scroll bar.   This is necessary because every article
   scrolls vertically and has the bar, but the index page does not.  Whether the bar is
   present affects page centering, and placement of the nav bar down the bottom.  If the
   page centering changes between pages, then the nav bar shifts under the mouse.  */
  overflow-y: scroll;
}

body {
  font-family: Verdana, Trebuchet, Times New Roman, Arial;
  font-size: 10pt;
  background-color: black;
}

main {
  width: 100%;
  background-color: white;
}

.main {
  padding: 10px 10px 30px 10px;
  margin: 0 auto;
}

header {
  text-align: center;
  padding-bottom: 0.2em;
  z-index: 1000;
}

header * {
  font-family: "Titillium Web", sans-serif;
  background-color: black;
}

header .title a {
  font-size: 2em;
  line-height: 1.4em;
  vertical-align: top;
  font-family: "Berkshire Swash", sans-serif;
}

header  a {
  color: white;
  text-decoration: none;
  display:block;
}

.centered-row {
  clear: both;
  display: block;
  margin: 0 auto;
  min-width: 100%;
  text-align: center;
}

.action-button {
  display: inline-block;
  border-radius: 0.3em;
  color: black;
  background-color: rgb(207, 207, 207);
  text-decoration: none;
  padding: 5px;
  margin-bottom: 5px;
  border: 1px solid rgb(152, 152, 152);
}

.action-button.action-button-hover {
  background-color: rgb(55, 135, 226);
  color: white;
  border: 1px solid rgb(60, 112, 128);
}

.action-link {
  display: inline-block;
  text-decoration: none;
}

footer {
  clear: both;
  display: block;
  margin: 0 auto;
  background-color: black;
  min-width: 100%;
  text-align: center;
}

footer * {
  color: white;
  background-color: black;
  font-family: "Titillium Web", sans-serif;
  font-size: 10pt;
}

footer .section {
  display: inline-block;
  padding: 10px;
}

footer .section, footer .section * {
  vertical-align: top;
  text-align: left;
}

footer .section a {
  text-decoration: none;
  height: 18px;
  display: table;
  padding-bottom: 4px;
}

footer .section img, footer .section span {
  display: table-cell;
  vertical-align: middle;
  padding-right: 4px;
}

/* Larger for smaller devices so fumbly fingers can fumble away. */
footer .section a img.mini {
  display: table-cell;
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

footer .section a:hover {
  color: #C0C0C0;
}

.mainsection {
  clear: both;
  margin-bottom: 15px;
}

.mainheader {
  font-family: "Titillium Web", sans-serif;
  font-size: 24px;
  border-bottom: 1px solid grey;
  margin-bottom: 10px;
  text-align: center;
}

.mainbody p {
  margin-top: 8px;
}

.main {
  /* set a min-height and a z-index to be sure that the main element completely covers the lateral menu */
  z-index: 800;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.main.lateral-menu-is-open {
  /* translate to show the lateral menu - all content needs to be put in the .cd-main-content to translate*/
  -webkit-transform: translateX(-260px);
  -moz-transform: translateX(-260px);
  -ms-transform: translateX(-260px);
  -o-transform: translateX(-260px);
  transform: translateX(-260px);
}

.rcaptionblock {
  display: inline;
  float: right;
  text-align: center;
  margin-left: 4px;
  margin-bottom: 4px;
}

.aligned-examples {
  clear: both;
  padding-top: 20px;
  margin: 0 auto;
  min-width: 100%;
  text-align: center;
}

.aligned-example {
  display: inline-block;
  vertical-align: top;
}

.aligned-example.text {
  min-width: 100%;
  max-width: 100%;
  float: left;
  text-align: left;
}

.aligned-example.highlight {
  background-color: rgb(207, 207, 207);
  border: 1px solid rgb(152, 152, 152);
  border-radius: 0.3em;
  padding: 5px 5px 5px 5px;
  text-align: center;
  margin-bottom: 5px;
  max-width: 350px;
}

.aligned-example.highlight:hover {
  background-color: rgb(55, 135, 226);
  border: 1px solid rgb(60, 112, 128);
  color: white;
}

.aligned-example  img, .aligned-example  div {
  max-width: 100%;
  margin-bottom: 3px;
}

.aligned-example div.issue-label {
  text-align: left;
}

.aligned-example div.issue-feature {
  text-align: left;
}

.smaller-text {
  font-size: smaller;
}

/* ........................................................................ */

#menu-area {
  position: fixed;
  right: 0;
  top: 3em;
  height: 30px;
  width: 30px;
  z-index: 3100;
}

#menu-area, #menu-area * {
  background-color: black;
  color: white;
  font-family: "Titillium Web", sans-serif;
}

#menu-area .menu-text {
  visibility: hidden;
}
#menu-area .menu-icon {
  /* this span is the central line in the menu menu */
  display: inline-block;
  position: absolute;
  left: 10px;
  right: auto;
  top: 15px;
  bottom: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 18px;
  height: 2px;
  margin-left: 5px;
  background-color: white;
  /* these are the upper and lower lines in the menu menu */
}

#menu-area .menu-icon::before, #menu-area .menu-icon:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: inherit;
  left: 0;
}
#menu-area .menu-icon::before {
  bottom: 5px;
}
#menu-area .menu-icon::after {
  top: 5px;
}
#menu-area.is-clicked .menu-icon {
  background-color: rgba(255, 255, 255, 0);
}
#menu-area.is-clicked .menu-icon::before, #menu-area.is-clicked .menu-icon::after {
  background-color: white;
}
#menu-area.is-clicked .menu-icon::before {
  bottom: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#menu-area.is-clicked .menu-icon::after {
  top: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* ........................................................................ */

#lateral-nav, #lateral-nav * {
  background-color: black;
  font-family: "Titillium Web", sans-serif;
}

#lateral-nav {
  position: fixed;
  height: 100%;
  right: 0;
  top: 3em;
  visibility: hidden;
  /* the secondary navigation is covered by the main element */
  z-index: 900;
  width: 260px;
  overflow-y: auto;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s;
  -moz-transition: -moz-transform .4s 0s, visibility 0s .4s;
  transition: transform .4s 0s, visibility 0s .4s;
  /* this creates the subtle slide in animation of the navigation */
  -webkit-transform: translateX(260px);
  -moz-transform: translateX(260px);
  -ms-transform: translateX(260px);
  -o-transform: translateX(260px);
  transform: translateX(260px);
}

#lateral-nav .cd-navigation {
  margin: 10px 0 16px;
}

#lateral-nav .sub-menu {
  padding: 0 10px 0 15px;
  display: none;
}

#lateral-nav a {
  display: block;
  line-height: 2em;
  padding: 0 16px 0 32px;
  color: white;
  text-decoration: none;
}

#lateral-nav a.current {
  background-color: #3a4a4d;
  color: #FFF;
}

.no-touch #lateral-nav a:hover {
  background-color: #3a4a4d;
  color: #FFF;
}

#lateral-nav.lateral-menu-is-open {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  visibility: visible;
  -webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s;
  -moz-transition: -moz-transform .4s 0s, visibility 0s 0s;
  transition: transform .4s 0s, visibility 0s 0s;
  /* smooth the scrolling on touch devices - webkit browsers */
  -webkit-overflow-scrolling: touch;
}

/* style menu items which have a submenu  */
#lateral-nav .item-has-children > a {
  position: relative;
  text-transform: uppercase;
  font-weight: 600;
  /* this is the right arrow to show that the item has a submenu  */
}

#lateral-nav .item-has-children > a::after {
  content: '';
  display: block;
  height: 11px;
  width: 8px;
  position: absolute;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 1em;
  background: url("../images/cd-arrow.svg") no-repeat center center;
  background-size: 8px 11px;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

#lateral-nav .item-has-children > a.submenu-open::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
  -moz-transform: translateY(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) rotate(90deg);
  -o-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
}

#lateral-nav .socials {
  padding: 0 15px;
}

#lateral-nav .socials:after {
  content: "";
  display: table;
  clear: both;
}

#lateral-nav .socials a img {
  height: 32px;
  width: 32px;
  float: left;
  padding: 0;
  margin-right: 5px;
}

.no-touch #lateral-nav .socials a:hover {
  background-color: #4e6361;
}