@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: normal;
  src: url(../../Style/CSS/GILLSAN3.eot) format("embedded-opentype"),
    url(../../Style/CSS/GILLSAN3.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: normal;
  src: url(../../Style/CSS/GILLSAN2.eot) format("embedded-opentype"),
    url(../../Style/CSS/GILLSAN2.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: 700;
  src: url(../../Style/CSS/GILLSAN1.eot) format("embedded-opentype"),
    url(../../Style/CSS/GILLSAN1.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: 700;
  src: url(../../Style/CSS/GILLSAN0.eot) format("embedded-opentype"),
    url(../../Style/CSS/GILLSAN0.woff) format("woff")}

html {background: hsl(149,100%,30%); color: black; padding: 1em;
  background: linear-gradient(to right,hsl(149,100%,29%),hsl(149,100%,33%),
  hsl(149,100%,29%)); font: 1em /*Gill Sans,*/ My Gill Sans, sans-serif}
body {background: white; border-radius: 1.2em; margin: 0; padding: 1em}
p {margin: 0 1em}
p + p {text-indent: 1.5em}
p.medbreak {text-indent: 0; margin-top: 1.2em}

:link, :visited {color: inherit; text-decoration: underline}
:link:hover, :visited:hover {outline: 1px solid hsl(149,100%,30%);
  text-decoration: none}

p.navbar {margin: 1.2em 0; padding: 0.5em;
  border-bottom: solid 5px hsl(51,100%,50%); clear: both}
p.navbar a {font-weight: bold; color: #333; padding: 1em 0.6em;
  border: none; outline: none; text-decoration: none;
  text-transform: uppercase; text-align: center; color: #005300}

p.letterhead {float: left; margin: 0 4em 1.2em 1em}
p.letterhead img {vertical-align: middle}
h1 {font-size: 1.7em; color: #005300; margin: 0 0.59em 0 0;
  margin: 0 1rem 0 0; text-align: right}
h2.subtitle {font-size: 1.2em; text-align: right;
  margin: 0 0.833em 1em 0; margin: 0 1rem 1.2rem 0; color: hsl(149,100%,30%)}

p.previous {float: left; margin: 0 1em 1.2em 0; text-indent: 0}
.networks {float: right; margin: 0 1em 1.2em 1em}
.networks li {display: inline}
.networks img {vertical-align: middle}

#tutorials, #w3c-track {width: 50%; box-sizing: border-box;
  -moz-box-sizing: border-box; float: left; margin: 2.4em 0 1.2em 0}
#tutorials {padding-right: 0.5em}
#w3c-track {padding-left: 0.5em}
#tutorials > *:first-child, #w3c-track > *:first-child {margin-top: 0}
#w3c-track + * {clear: both}

h3 {font-size: 1.2em; margin: 1em auto; padding: 0 0.833em; padding: 0 1rem}
#tutorials > h3, #w3c-track > h3 {padding: 0;
  margin: 0 0.833em; margin: 0 1rem}
#tutorials h2, #w3c-track h2 {background: hsl(51,100%,50%); color: #005300;
  padding: 0.3em 0.714em; padding: 0.5rem 1rem; min-height: 2.4em;
  background: linear-gradient(to right,hsl(51,100%,50%),hsl(51,100%,58%),
  hsl(51,100%,50%)); border-radius: 0.64em; font-size: 1.4em}
.date {color: #777; font-weight: bold; clear: right;
  border-radius: 0.9em 0.9em 0 0; text-indent: 0; margin: 2.4em 1em 0 1em}

.box {border: 3px dotted #333; padding: 0.6em 1em; clear: both;
  border-radius: 0.9em; margin: 2.4em 0 1.2em 0}
.box > *:first-child {margin-top: 0}
.box h3 {padding: 0; margin-left: -3px; margin-right: -3px}
.box p {padding: 0; margin-left: -3px; margin-right: -3px}

.intro {font-weight: bold; clear: both}

.schedule {margin: 0 1em; padding: 0 0 0 1.5em; list-style: disc}
.schedule ul {padding: 0; list-style: circle}
.schedule em {font-style: normal; font-weight: bold}

#footer {font-style: italic; color: #005300; text-indent: 0;
  margin-top: 1.2em; margin-bottom: 1.2em; text-align: right}

img {border: none; vertical-align: middle}

#tutorials .logo {float: right; margin: 0 0 0.3em 1em}

q {font-style: oblique}
q em {font-style: normal}

/* Give the titles some colors :-) */
#css span {color: #FF7F00}
#css span + span {color: #F80043}
#css span + span + span {color: #0A479D}
#semweb span {color: #005B9C}
#html5 span:nth-child(1), #html5 span:nth-child(2) {color: #E44B25}
#html5 span:nth-child(3), #html5 span:nth-child(4) {color: #F16528}
#html5 span:nth-child(5) {color: white; text-shadow: -1px -1px #E44B25,
  1px -1px #F16528, 1px 1px #F16528, -1px 1px #E44B25}

#about {color: #005300}
