#header {
  height: 180px;
  margin: 30px 0 -20px;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

#header > div {
  position: relative;
  display: block;
}

#header > div div {
  text-align: center;
  display: inline-block;
}

#header > div h1 {
  margin: 0;
}

#header > div p {
  font-weight: bold;
}

#article {
  padding: 30px 20px 20px;
}

nav {
  margin-top: 0 !important;
  background: -webkit-linear-gradient(right, #303939 0%, #A1A1A1 100%);
  background: -moz-linear-gradient(right, #303939 0%, #A1A1A1 100%);
  background: -o-linear-gradient(left, #303939 0%, #A1A1A1 100%);
  background: linear-gradient(to left, #303939 0%, #A1A1A1 100%);
  position: fixed;
  width: 100%;
  top: 0;
}

nav ul li {
  float: left;
  display: inline;
  position: relative;
  background: #4F5150;
  border-right: 1px solid white;
  padding: 0;
}

nav li:hover > ul {
  position: absolute;
  width: 235px;
}

nav ul ul {
  padding-top: 0;
}

nav ul ul li {
  min-width: 235px;
}

nav ul ul li:hover > ul {
  right: -220px;
  top: 0;
}

/*BEGIN* Do not cascade 3rd-level-menus */
nav ul ul li:hover ul {
  right: inherit;
  top: inherit;
}

nav ul ul ul {
  display: inherit;
}

nav ul ul ul li a:before,
nav ul ul ul li div:before {
  content: '\0000A0\0000A0\0000A0\0000A0\0000A0\0000A0\0025CF\0000A0\0000A0'
}
/*END* Do not cascade 3rd-level-menus */

div.ref {
  position: relative;
  top: -6ex;
}

dt.title span {
  background: -webkit-radial-gradient(center, ellipse, white 20%, olive);
  background: -moz-radial-gradient(center, ellipse, white 20%, olive);
  background: -o-radial-gradient(center, ellipse, white 20%, olive);
  background: radial-gradient(ellipse at center, white 20%, olive);
}

a.link {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

a.link:hover {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

div.link-block {
  display: inline-block;
  width: 49%;
}

.show,
.footnote:target {
  display: block !important;
}

.footnote {
  display: none;
}

.whitebordered {
  margin: 2em 0 2em 2em;
  background: -webkit-linear-gradient(bottom right, #E2E2E2 0%, #C5C3C3 100%);
  background: -moz-linear-gradient(bottom right, #E2E2E2 0%, #C5C3C3 100%);
  background: -o-linear-gradient(top left, #E2E2E2 0%, #C5C3C3 100%);
  background: linear-gradient(to top left, #E2E2E2 0%, #C5C3C3 100%);
  -webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, .4);
  -moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, .4);
  box-shadow: 5px 5px 8px rgba(0, 0, 0, .4);
}

.collapse {
  background: -webkit-linear-gradient(top, #B0B9B9 0%, #E1E1E1 100%);
  background: -moz-linear-gradient(top, #B0B9B9 0%, #E1E1E1 100%);
  background: -o-linear-gradient(bottom, #B0B9B9 0%, #E1E1E1 100%);
  background: linear-gradient(to bottom, #B0B9B9 0%, #E1E1E1 100%);
}

.code-table {
  text-align: center;
}

.code-table div {
  margin: 0 .5ex;
  width: 46%;
}

.svg-area {
  display: block;
}

.gallery {
  border: none;
  background: -webkit-linear-gradient(top left, rgba(220,150,150,.5), rgba(220,170,170,.5), rgba(220,150,150,.5), rgba(220,170,170,.5), rgba(220,150,150,.5)), -webkit-linear-gradient(top right, rgba(170,170,255,.5), rgba(150,150,255,.5), rgba(170,170,255,.5), rgba(150,150,255,.5), rgba(170,170,255,.5));
  background: -moz-linear-gradient(top left, rgba(220,150,150,.5), rgba(220,170,170,.5), rgba(220,150,150,.5), rgba(220,170,170,.5), rgba(220,150,150,.5)), -moz-linear-gradient(top right, rgba(170,170,255,.5), rgba(150,150,255,.5), rgba(170,170,255,.5), rgba(150,150,255,.5), rgba(170,170,255,.5));
  background: -o-linear-gradient(bottom right, rgba(220,150,150,.5), rgba(220,170,170,.5), rgba(220,150,150,.5), rgba(220,170,170,.5), rgba(220,150,150,.5)), -o-linear-gradient(bottom left, rgba(170,170,255,.5), rgba(150,150,255,.5), rgba(170,170,255,.5), rgba(150,150,255,.5), rgba(170,170,255,.5));
  background: linear-gradient(to bottom right, rgba(220,150,150,.5), rgba(220,170,170,.5), rgba(220,150,150,.5), rgba(220,170,170,.5), rgba(220,150,150,.5)), linear-gradient(to bottom left, rgba(170,170,255,.5), rgba(150,150,255,.5), rgba(170,170,255,.5), rgba(150,150,255,.5), rgba(170,170,255,.5));
  -webkit-box-shadow: inset 0 0 15px 5px #DDDDE5;
  -moz-box-shadow: inset 0 0 15px 5px #DDD;
  box-shadow: inset 0 0 15px 5px #DDD;
  -webkit-background-size: 40px 40px;
  -moz-background-size: 40px 40px;
  -o-background-size: 40px 40px;
  background-size: 40px 40px;
  background-attachment: fixed;
}

.gallery img {
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

.gallery img:hover {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.gallery div.wide {
  width: 493px;
}

.gallery div.wide div {
  height: 224px;
  width: 475px;
}

.gallery div.wide img {
  width: auto;
}

.gallery div span.tag {
  margin: 0.5ex 2em 0.5ex 0;
}

.tiles div {
  border: none;
  -webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, .4);
  -moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, .4);
  box-shadow: 5px 5px 8px rgba(0, 0, 0, .4);
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
}

.tiles div.tile-1 {
  background: -webkit-linear-gradient(top left, #909010, lightgreen 70%);
  background: -moz-linear-gradient(top left, #909010, lightgreen 70%);
  background: -o-linear-gradient(bottom right, #909010, lightgreen 70%);
  background: linear-gradient(to bottom right, #909010, lightgreen 70%);
}

.tiles div.tile-2 {
  background: -webkit-linear-gradient(bottom, yellow 10%, orange);
  background: -moz-linear-gradient(bottom, yellow 10%, orange);
  background: -o-linear-gradient(top, yellow 10%, orange);
  background: linear-gradient(to top, yellow 10%, orange);
}

.tiles div.tile-3 {
  background: -webkit-radial-gradient(center, ellipse farthest-corner, #FFFBED 20%, #FF5269 100%);
  background: -moz-radial-gradient(center, ellipse farthest-corner, #FFFBED 20%, #FF5269 100%);
  background: -o-radial-gradient(center, ellipse farthest-corner, #FFFBED 20%, #FF5269 100%);
  background: radial-gradient(ellipse farthest-corner at center, #FFFBED 20%, #FF5269 100%);
}

.tiles div.tile-4 {
  background: -webkit-linear-gradient(top left, aqua, #DDEEFF, #5ECFFF, gainsboro 80%, deepskyblue);
  background: -moz-linear-gradient(top left, aqua, #DDEEFF, #5ECFFF, gainsboro 80%, deepskyblue);
  background: -o-linear-gradient(bottom right, aqua, #DDEEFF, #5ECFFF, gainsboro 80%, deepskyblue);
  background: linear-gradient(to bottom right, aqua, #DDEEFF, #5ECFFF, gainsboro 80%, deepskyblue);
}

.tiles div.tile-footer {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.textbox {
  padding: 1.5em;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
}

.ascii-art {
  display: block !important;
/*
  min-width: 500px;
  max-width: 590px;
*/
  width: 550px;
  margin: 1em auto;
  padding: 1em 0;
  background-color: #EFEFEF;
  background: -webkit-linear-gradient(right, bisque 0%, silver 80%);
  background: -moz-linear-gradient(right, bisque 0%, silver 80%);
  background: -o-linear-gradient(left, bisque 0%, silver 80%);
  background: linear-gradient(to left, bisque 0%, silver 80%);
  -webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, .4);
  -moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, .4);
  box-shadow: 5px 5px 8px rgba(0, 0, 0, .4);
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
}

.ascii-art table {
  margin: 1em auto;
}

.ascii-art td {
  vertical-align: bottom;
}

.ascii-art td.inner-text {
  font-family: Arial;
}

.ascii-art .in {
  display: none;
}

.ascii-art:hover .in {
  display: inline;
}

.ascii-art:hover .out {
  display: none;
}

.info-box,
.info-box > div {
  border-color: black;
  -webkit-border-radius: 55px 10px 10px 20px;
  -moz-border-radius: 55px 10px 10px 20px;
  border-radius: 55px 10px 10px 20px;
}

.info-box div div {
  padding-left: 3em;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-bottom-left-radius: 10px;
  border-bottom-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
}

.info-box.bronze > div {
  background: -webkit-linear-gradient(left top, olive 0%, white 46%);
  background: -moz-linear-gradient(295deg, olive 0%, white 46%);
  background: -o-linear-gradient(155deg, olive 0%, white 46%);
  background: linear-gradient(155deg, olive 0%, white 46%);
}

.info-box.bronze div div {
  background: -webkit-linear-gradient(left, black 0%, #9A8478 100%);
  background: -moz-linear-gradient(left, black 0%, #9A8478 100%);
  background: -o-linear-gradient(right, black 0%, #9A8478 100%);
  background: linear-gradient(to right, black 0%, #9A8478 100%);
}

.info-box.graphit > div {
  background: -webkit-linear-gradient(left top, #A5B2C0 0%, white 46%);
  background: -moz-linear-gradient(295deg, #A5B2C0 0%, white 46%);
  background: -o-linear-gradient(155deg, #A5B2C0 0%, white 46%);
  background: linear-gradient(155deg, #A5B2C0 0%, white 46%);
}

.info-box.graphit div div {
  background: -webkit-linear-gradient(left, black 0%, #8592A0 100%);
  background: -moz-linear-gradient(left, black 0%, #8592A0 100%);
  background: -o-linear-gradient(right, black 0%, #8592A0 100%);
  background: linear-gradient(to right, black 0%, #8592A0 100%);
}

.info-box.dust > div {
  background: -webkit-linear-gradient(left top, #A87771 0%, white 46%);
  background: -moz-linear-gradient(295deg, #A87771 0%, white 46%);
  background: -o-linear-gradient(155deg, #A87771 0%, white 46%);
  background: linear-gradient(155deg, #A87771 0%, white 46%);
}

.info-box.dust div div {
  background: -webkit-linear-gradient(left, black 0%, #9E5E6F 100%);
  background: -moz-linear-gradient(left, black 0%, #9E5E6F 100%);
  background: -o-linear-gradient(right, black 0%, #9E5E6F 100%);
  background: linear-gradient(to right, black 0%, #9E5E6F 100%);
}

.info-box.blue > div {
  background: -webkit-linear-gradient(left top, steelblue 0%, white 40%);
  background: -moz-linear-gradient(295deg, steelblue 0%, white 40%);
  background: -o-linear-gradient(155deg, steelblue 0%, white 40%);
  background: linear-gradient(155deg, steelblue 0%, white 40%);
}

.info-box.blue div div {
  background: -webkit-linear-gradient(left, black 0%, darkblue 100%);
  background: -moz-linear-gradient(left, black 0%, darkblue 100%);
  background: -o-linear-gradient(right, black 0%, darkblue 100%);
  background: linear-gradient(to right, black 0%, darkblue 100%);
}

.info-box.red > div {
  background: -webkit-linear-gradient(left top, lightcoral 0%, white 40%);
  background: -moz-linear-gradient(295deg, lightcoral 0%, white 40%);
  background: -o-linear-gradient(155deg, lightcoral 0%, white 40%);
  background: linear-gradient(155deg, lightcoral 0%, white 40%);
}

.info-box.red div div {
  background: -webkit-linear-gradient(left, black 0%, firebrick 100%);
  background: -moz-linear-gradient(left, black 0%, firebrick 100%);
  background: -o-linear-gradient(right, black 0%, firebrick 100%);
  background: linear-gradient(to right, black 0%, firebrick 100%);
}

.info-box.green > div {
  background: -webkit-linear-gradient(left top, mediumaquamarine 0%, white 40%);
  background: -moz-linear-gradient(295deg, mediumaquamarine 0%, white 40%);
  background: -o-linear-gradient(155deg, mediumaquamarine 0%, white 40%);
  background: linear-gradient(155deg, mediumaquamarine 0%, white 40%);
}

.info-box.green div div {
  background: -webkit-linear-gradient(left, black 0%, darkgreen 100%);
  background: -moz-linear-gradient(left, black 0%, darkgreen 100%);
  background: -o-linear-gradient(right, black 0%, darkgreen 100%);
  background: linear-gradient(to right, black 0%, darkgreen 100%);
}

.info-box.lilac > div {
  background: -webkit-linear-gradient(left top, orange 0%, white 40%);
  background: -moz-linear-gradient(295deg, orange 0%, white 40%);
  background: -o-linear-gradient(155deg, orange 0%, white 40%);
  background: linear-gradient(155deg, orange 0%, white 40%);
}

.info-box.lilac div div {
  background: -webkit-linear-gradient(left, black 0%, darkmagenta 100%);
  background: -moz-linear-gradient(left, black 0%, darkmagenta 100%);
  background: -o-linear-gradient(right, black 0%, darkmagenta 100%);
  background: linear-gradient(to right, black 0%, darkmagenta 100%);
}

.info-box.lime > div {
  background: -webkit-linear-gradient(left top, lime 0%, white 50%);
  background: -moz-linear-gradient(295deg, lime 0%, white 50%);
  background: -o-linear-gradient(155deg, lime 0%, white 50%);
  background: linear-gradient(155deg, lime 0%, white 50%);
}

.info-box.lime div div {
  background: -webkit-linear-gradient(left, black 0%, darkgreen 100%);
  background: -moz-linear-gradient(left, black 0%, darkgreen 100%);
  background: -o-linear-gradient(right, black 0%, darkgreen 100%);
  background: linear-gradient(to right, black 0%, darkgreen 100%);
}

.do-show {
  display: inherit !important;
}

@media (min-width: 642px) and (max-width: 1059px) {
  .gradient-area p { max-width: 100% !important; width: 100%; }
}

@media (min-width: 642px) and (max-width: 939px) {
  .info-area .info-text { max-width: 100%; }
  .info-box.lime { max-width: 480px; }
  .info-box.lime p { margin: 0 2em; }
}

@media (min-width: 642px) and (max-width: 819px) {
  .info-box { max-width: 550px; }
  .info-box a.link { width: 300px; }
}

@media (min-width: 642px) and (max-width: 759px) {
  .tiles div { max-width: 550px; }
  .tiles a.link { width: 280px; }
}

@media screen {
  #header { display: block !important; }
  .gradient-area { text-align: center; }
  .gradient-area p { max-width: 700px; }
  .gradient-area > div { display: inline-block !important; }
}