/* --------------------------------------------------------------------------
   Fonts.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'League Spartan';
    src: url('../fonts/leaguespartan-bold.woff2') format('woff2'),
		url('../fonts/leaguespartan-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
	}

@font-face {
    font-family: 'Overpass';
    src: url('../fonts/Overpass-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
	}

@font-face {
    font-family: 'Overpass';
    src: url('../fonts/Overpass-Bold-Italic.woff') format('woff');
    font-weight: bold;
    font-style: oblique;
	}

@font-face {
    font-family: 'Overpass';
    src: url('../fonts/Overpass-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	}

@font-face {
    font-family: 'Overpass';
    src: url('../fonts/Overpass-Light-Italic.woff') format('woff');
    font-weight: normal;
    font-style: oblique;
	}

/* --------------------------------------------------------------------------
   Main.
   -------------------------------------------------------------------------- */

#masthead {
	padding: 0;
	margin-top: 0;
	margin-bottom: 2.5em;
	margin-left:-1em;
	margin-right:-1em;
	}

#masthead img {
	width: 100%;
	background: #6294de;
	}

html,
button,
input,
select,
textarea {
    color: #222;
	}

html {
    font-size: 1em;
    line-height: 1.4;
    background-color: #5a5857;
	}

body {
	margin-left: 0em;
	margin-right: 0em;
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 3em;
	padding-top: 0;
	background-color: white;
	color: #1f1f1f;
	}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px dotted #ccc;
    margin: 2em 0;
    padding: 0;
	}

h1, h2, h3, h4, h5, h6 {
	font-family: 'League Spartan', Futura, Verdana, sans-serif;
	}

p, li {
	font-family: Overpass, ClearSans, Helvetica, Arial, sans-serif;
	line-height: 1.62em;
	}

h1 span { display: none; }
h1 {
	background-image: url('../images/iot-with-esp8266.svg');
	background-repeat: no-repeat;
	background-size: 260px auto;
	width: 260px;
	height: 91px;
	margin: 0 auto;
	padding: 0;
	display: block;
	}

table {
	border-bottom: 2px solid #ccc;
	border-top: 2px solid #ccc;
	}

th {
	text-align: left;
	padding: 0.2em 1em 0.2em 0;
	font-size: 0.9em;
	line-height: 1em;
	font-weight: normal;
	}

td {
	border-top: 1px solid #ccc;
	vertical-align: top;
	padding: 0.2em 1em 0.2em 0;
	margin: 0 1em 0 1em;
	}

td ul {
	padding: 0 1em;
	margin: 0;
	}

.Model {
	font-weight: bold;
	}

a:link    { text-decoration: none; color: #5060cc; }
a:visited { text-decoration: none; color: #5372a0; }
a:hover   { text-decoration: none; color: #6aa6ff; }
a:active  { text-decoration: none; color: #7b5eac; }

.Note { font-size: small }
.NoteLesser { font-size: small; color: gray; line-height: 1.4em; }

/* --------------------------------------------------------------------------
   Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 70em) {
    /* Style adjustments for viewports that meet the condition */

    body {
		margin-left: 3em;
		margin-right: 3em;
		padding-left: 3em;
		padding-right: 3em;
		}
	h1 span { display: none; }
	h1 {
		background-color: #76a7ff;
		background-image: url('../images/iot-with-esp8266-banner.svg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 110%; height: 200px;
		margin: 0 -3em; padding: 0;
		display: block;
		}
	#masthead {
		padding: 0;
		margin-top: 0;
		margin-bottom: 2.5em;
		margin-left:-3em;
		margin-right:-3em;
		}
	}

/* --------------------------------------------------------------------------
   Print styles.
   Inlined to avoid required HTTP connection.
   -------------------------------------------------------------------------- */

@media print {

	html { background: transparent; margin: 3em; }
	body { border: none; }

	a:link    { text-decoration: none; color: #415f8c; }
	a:visited { text-decoration: none; color: #415f8c; }
	a:hover   { text-decoration: none; color: black; }
	a:active  { text-decoration: none; color: black; }

    a,
    a:visited { text-decoration: underline; }
    a[href]:after { content: " [" attr(href) "]"; }
    abbr[title]:after { content: " [" attr(title) "]"; }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after { content: ""; }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
		}

    thead {
        display: table-header-group; /* See <h5bp.com/t> */
    	}

    tr,
    img { page-break-inside: avoid; }

    img { max-width: 100% !important; }

  /* Figure this out later... */
  /*  @page { margin: 3em 3em; }  */

	h1, h2, h3, h4, h5, h6 {
		font-family: 'League Spartan', Futura, Verdana, sans-serif;
		}
	h1 span { display: block; }
	h1 {
		background: none;
		height: auto;
		width: auto;
		}
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    	}

    h2,
    h3 { page-break-after: avoid; }
	}