/* --- Section A - reset browser styles --- */

/* Unused:
header, footer, article, nav, section, aside {
	display : block;
}
*/
html, div, body, /* header, footer, article, nav, section, aside, */ h1, h2, h3, p, a, ul, li, dl, dd, dt, table, thead, tfoot, tbody, th, tr, td {
	border : 0;
	/* font : 12px/22px Verdana, sans-serif; */
	margin : 0;
	outline : 0;
	padding : 0;
}


/* ------ Section 1 - General Settings ------ */

html {font-size: 62.5%;}
a {text-decoration: none;}

.main a:link,
.main a:visited {
	color: #1A50FF;
}

.main { padding: 0 .9em; }

.main .content {margin-bottom: 2.0em;}

.content a:hover {
	text-decoration: underline;
}
.content a:not(.button):hover { /* Prevents jerking when used as a button: */
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
a.button:hover {
	text-decoration: none;
}



img {border: none;} /* For images inside the <a> tags, for older browsers */

/* js adjustment used as well [dis] */
/*
*/
#layout{display:flex;flex-flow:column;min-height:100vh;}#wrapper{flex:1;}

body {
	overflow: scroll; /* When updating content via http scripting,
	                     prevents nav buttons from moving on pages
										   with little content */
	font-size: 20px;
	font-size: 2.0rem;
	background-color: #FFFFFF;
	color: #444444;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: 1.618;
}

h1 {
	text-align: center;
	line-height: 1.3;
	margin: .9em 0 1.1em;
	font-size: 160%;
}

h2 {
	margin: 3.0em 0 .5em .5em;
	font-size: 120%;
	font-weight: 600;
}

/*
*/
h3 {
	margin: 2.5em 0 .5em .5em;
	font-size: 110%;
	font-weight: 400;
	letter-spacing: 1px;
}

.figure {
	text-align: center;
	margin: 0 0 2.5em;
}

.directive,
p {
	margin-top: 1.2em;
	margin-bottom: .5em;
}

section {
	margin: 3.0em 0;
}

ul {
	margin-left: 1.5em;
}
li {
	margin-bottom: .35em;
}

blockquote {
	background: rgba(255,180,50,.2);
	padding: .2em .5em;
	font-size: .95em;
}

dl {
	font-size: .95em;
	background: rgba(220,200,140,.1);
	padding: .2em .4em;
	border: 1px solid hsla(0,0%,0%,.05);
}
dt {
	color: rgba(60,50,20,.6);
}
dd {
	margin-left: 1.5em;
	margin-bottom: 2.4em;
}

code, pre {
	line-height: 1.2;
	font-size: 1.6rem;
}

.container {
	max-width: 960px;
	margin: auto;
}


#header {
	background-color: rgb(255,150,0);
	margin-bottom: 10px;

	overflow: hidden;
}

.clear {
	clear: both;
}


.content img {
	border: 1px dashed #DAEABA;
	background: #FFF5F1;

	box-sizing: border-box; /* Needed for padding */
	padding: 6px;

	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	border-radius: .3em;
	max-width: 100%; /* important */
}

.content-main-image-container {
	float: right;
	margin: 2.9em;
}
	.content-main-image-container img {
		max-width: 300px;
	}

	@media (max-width: 47.999em) {
		.content-main-image-container {
			margin: .3em .3em .3em .7em;
		}
		.content-main-image-container img {
			max-width: 100px;
		}
	}


.process-step {
	position: relative;
	margin: 2.0em 0;
	background: rgba(140,60,30,.05);
	border: 1px solid hsla(0,0%,0%,.05);
	padding: .1em .5em;
}
	.process-step:nth-of-type(even) {
		background: rgba(200,30,10,.05);
	}

.process-step:before {
	content: "";
	position: absolute;
	font-size: 1.0em;
	width: 1em;
	height: 2em;
	background-color: rgba(255,150,0,.11);
	top: 5px;
	left: 5px;
}
	.process-step > *:first-child {
		text-indent: .5em;
	}

.process-step .directive-code {
	background: rgba(255,255,255,.5);
}

hr {
	border: 0;
	border-bottom: 1px solid #CCC;
	margin: 1em 3em;
}

div.lastUpdated {
	text-align: right;
	color: #AAA;
	margin-top: 3.0em;
	font-size: 16px;
	font-size: 1.6rem;
}


#footer {
	padding-top: 3em;
	text-align: center;
	font: italic .7em/1.3 'Playfair Display', serif;
	color: #ADB5BD;
}
	#footer a {
		color: inherit;
	}


.sm {font-size:80%;}
.lg {font-size:120%;}
.xl {font-size:140%;}
.center {text-align:center;}
.bM1 {margin-bottom: 1em;}
.bM2 {margin-bottom: 2em;}
.bM3 {margin-bottom: 3em;}
.bMS {margin-bottom: .5em;}
.tMS {margin-top: .4em;}
.tM1 {margin-top: 1em;}
.tM2 {margin-top: 2em;}
.tM3 {margin-top: 3em;}
.semiTransparent {color: #CCC;}


.subTitle {
	background: rgb(255,255,220);
	padding: .1em .4em;
	text-align: center;
	margin: 2.5em 0 1em;
	font-size: 1.4em;
}
	h1+.subTitle {
		margin-top: -1.1em;
		margin-bottom: 2em;
		background: transparent;
		font-size: 1em;
	}

.floatRight {
	float: right;
	margin-left: .2em;
}

.keyStroke {
	background-color: rgba(50,50,50,.8);
	color: #CCC;
	padding: 0 10px;
	font-weight:bold;
}

.fn { /* used to highlight file, directory names, and paths */
	font-family: monospace;
	color: rgba(60,50,20,.6);
}

.note {
	background: #F5F5F5;
	padding: .5em .9em;
	/*
	margin: 1.3em 0 .8em;
	*/
}
.note p:first-of-type { margin-top: 0; }
.note p:last-of-type { margin-bottom: 0; }

.note__title {
	font-weight: bolder;
	display: block;
	margin: 0 0 .5em -.5em;
}

.note--tip {
	background: rgba(230,190,130,.1);
	border: 1px solid hsla(0,0%,0%,.05);
}

.intro {
	font-size: 1.1em;
	background: rgba(230,190,130,.1);
	border: 1px solid hsla(0,0%,0%,.05);
	margin-left: auto;
	margin-right: auto;
	padding: .2em .5em;
}

.highlighted {
	background: rgba(255,170,20, .3);
	border-radius: .2em;
}
span.highlighted {
	padding: 2px 6px;
}

h1 .highlighted {
	background: transparent;
	padding: 0;
	font-family: monospace;
	letter-spacing: .05em;
	color: #888;
}

.directive {
}
.directive-label {
	margin-bottom: 1px;
}
.directive pre {margin:0;}

.directive-code {
	display: block; 
	margin-top: .0em;
	margin-bottom: .3em; /* useful when there is <div> after it */
	color: #666;
	background: rgba(200,200,200,.2);
	padding: 2px 4px;
	-moz-tab-size: 4;
	tab-size: 4;
}

.snatch-code {
	font-size: 16px;
	font-size: 1.6rem;
  border: dashed 1px #AAA;
	padding: .7em .7em .7em;
	margin-bottom: 1em;
}
	.snatch-code code {
		white-space: pre-wrap;
		color: #666;
		-moz-tab-size: 2;
		tab-size: 2;
	}


span.star {
	color: #FF5555;
}


.altColor { color: #AA8833; }

.altBgColor { background: #F9EDF9; }

details {
	background: transparent;
	padding: 0;
	border:1px solid #CCC;
	border:1px dotted #888;
	border-radius: 4px;
	font-size: 90%;
}
details summary {
/*
	display: inline-block;
*/
	background: #DFEAFC;
	background: #6F6ACC;
	color: #F5F5F5;
	padding-left:.4em;
	border: 0;
	outline: 0;
	transition: all .5s ease-out;
}
	details summary .fn {
		color: #EEE;
		font-weight: bold;
		font-style: italic;
	}
	details[open] summary {
	}

details > div {
	padding:.2em .5em;
	padding-top: .3em;
	border-top: 2px solid rgba(0,0,0,.1);
	color: #444;
}

.main .fullWidth {
    min-width: 80%; /* Don't use 100%, it will asymmetrically place the element on a smaller screen. */
		margin-left: calc(50% - 50vw + 1em);
		margin-right: calc(50% - 50vw + 1em);
}


#logoCont,
#mainMenu,
#mainMenu ul,
#mainMenu ul li {
	display: inline;
}

#logoCont {
	float: left; /* For the older FF */
}

#logoCont img { /* In a smaller screen the masked menu items are located below the logo */
	height: 32px;
	width: auto;
	padding: 6px 6px 2px 10px;
	vertical-align: middle;
}


#mainMenu ul {
	font-size: .9em;
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	float: right;
}

#mainMenu ul li a {
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	display: inline-block;
	color: white;
	/*
	*/
	line-height: 1;
	padding: 18px 12px;
}
	#mainMenu ul li a:hover {
		background: rgb(255,170,20);
	}


.breadcrump {
	font-size: 80%;
	list-style: none;
}
.breadcrump li {
	display: inline-block;
}
.breadcrump li.first {
	padding: 0 4px;
	margin-right: 4px;
	background: rgb(255,170,20);
}
.breadcrump li.first,
.breadcrump li.first a {
	color: #FAFAFA;
}
.breadcrump li.first a {transition: .6s padding;}
.breadcrump li.first a:hover {
	padding: 0px 6px;
	
}
.breadcrump .pointer {
	margin: 0 5px;
}
	.breadcrump li.first .pointer {
		margin-right: 0px;
	}


@media (max-width: 47.999em) {
	.breadcrump {
		font-size: 90%;
	}

	#mainMenu ul {
		font-size: 1em;
	}

	#mainMenu,
	#mainMenu ul,
	#mainMenu ul li,
	#mainMenu ul li a {
		display: block;
	}

	#logoCont,
	#mainMenu ul {
		float: none;
	}

	#mainMenu ul li a {
		font-size: 1em;
		padding: 10px 12px;
	}

	#logoCont img {
		vertical-align: top;
		padding: 5px 6px 2px 10px;
	}


	html { font-size: 52.5%; }
}


@media (max-width: 1024px) {
	h1 { font-size: 2.5rem; }
	h2 { font-size: 2.0rem; }
}


.error {color: #FF3333;}
.caution { background: #FFEEAA; }
.success { background: #88FF88; }

/* ------ Section n - Forms ------ */

input, /* basics */
textarea {
	padding: 0.5em 0.6em;
	display: inline-block;
	border: 0.1px solid #ccc;
	box-shadow: inset 0 1px 3px #ddd;
	border-radius: 4px;
	vertical-align: middle;
	box-sizing: border-box;
}
legend {
	display: block;
	width: 100%;
	text-align: center;
	padding: 0.3em 0;
	margin-bottom: 0.5em;
	color: #9A9863;
	border-bottom-width: 0;
	letter-spacing: 2px;
}
fieldset {
	margin: 0;
	padding: 0.35em 0 0.75em;
	border: 0;
}


.form__container {
	margin: 1em 0 0;
}

.form {
	margin-left: auto;
	margin-right: auto;
	max-width: 25em;

}


.form__field                         { padding-top: 1em; }
.form__field:has(:placeholder-shown) { padding-top: 0.2em; }

.form__field:has(:placeholder-shown) > label { display: none; }


.form input, 
.form textarea {
	width: 100%;
	border-radius: 4px;
	font-size: 80%;
}

.form label {
	font-size: 0.9em;
	letter-spacing: 1px;
	color: #AA8833;
}
	.form label:first-of-type {
		margin-top: 0;
	}

.form__field-message {
	font-size: 0.8em;
	display: block;
	margin: 0.2em 0 0.8em;
	line-height: 1.2;
}
	.form__field-message--above { /* used with textarea */
		margin: 1em 0 .25em;
	}

.form__input--error {
	background-color: rgba(255,180,180,0.15);
	border: 1px solid #FFAAAA;
	color: inherit;
}

.form__submission-challenge-question-container {
	font-size: 85%;

	background-color: rgba(255,180,180,0.15);
	display: inline-block;
	padding: .1em .3em;
}

.form__submit-container {
	margin-top: .6em;
}
.form__submit-container input {
    background-color: rgb(250, 130, 10);
    color: #fff;
}






/* ------ Section n - Comments ------ */

.noCommentsMessage {
	text-align: center;
	color: #8A8833;
	padding: .3em 0;
	border: 1px solid #EEEEEE;
	border-width: 1px 0;
}

.noCommentsMessage, .listOfComments {
	margin-bottom: 2em;
}

 /* .inPageMessageC is for non-js submissions */

.listOfComments,
.commentFormC {
	margin-left: auto;
	margin-right: auto;
}

.listOfComments,
.commentFormC {
	max-width: 400px;
	max-width: 40rem;
}

.commentFormC input, 
.commentFormC textarea {
	width: 100%;
	font-size: 80%;
}

.comm {
	margin-bottom: 1.6em;
	padding: .3em .7em;	
	border-radius: 4px;
	border: 1px solid #FFB;
	background: #FFFFE8;
}

.comm span { /* encompasses author and posted date */
	font-size: .8em;
	color: #888;
	color: rgba(50,40,10,.5);
}

.comm .a { /* author */
	color: #666;
	color: rgba(50,40,10,.6);
}

.comm div { /* content */
	margin: .0 0 .2em;
	color: #8A8833;
}

/* ------ Section n - Animations ------ */

.fadeIn {
	-webkit-animation: fade-in 400ms ease-in;
	
  -webkit-animation-name:fade-in;
	
          animation-name:fade-in;
  -webkit-animation-duration: 400ms;
          animation-duration: 400ms;   
  -webkit-animation-timing-function: ease-in;   
          animation-timing-function: ease-in;
}             

@-webkit-keyframes fade-in {
  from{opacity:0;}
  to{opacity: 1;}
}
@keyframes fade-in {
  from{opacity:0;}
  to{opacity: 1;}
}

/* ------ Section n - Customizations for Third Party Styles ------ */

.yui3-g-r { margin: 1em 0; }

.button-xsmall{font-size:70%;}
.button-small{font-size:85%;}
.button-large{font-size:110%;}
.button-xlarge{font-size:125%;}