article h1 {
	font-family:'Roboto',Georgia,Times,serif;
	font-weight:normal;
	color:#1C205B;
	margin:0 0 12px 0;
	font-size:200%;
	line-height:100%;
}

article h2 {
	font-family:'Roboto',Georgia,Times,serif;
	color:#BF1722;
	font-size:150%;
	border-bottom:1px solid;
	margin:0;
	margin-bottom:6px;
	line-height:1.25em;
	font-weight:normal;
}

article h1 code, article h2 code {
	font-weight:bold;	/* JBN */
}

article h3 {
	border-left: #AAD solid .5em;
	border-bottom: #AAD solid 1px;
	color:#1C205B;
	font:1.2em 'Kameron',Georgia,Times,serif;
	font-weight: normal;
	letter-spacing:1px;
	margin: .75em 0 .4em 0;
	padding-left: .3em;
}

article h4 {
	border-bottom: 1px solid #CCC;
	font-family:'Kameron',Georgia,Times,serif;
	font-weight: bold;
	letter-spacing:1px;
}

article p, pre {
	line-height:1.5em;
	padding-bottom:1em;
}

section, .section {
	outline:0;
}

section section, .section .section {
	margin:.5em 15px .5em 15px;
	padding-left:10px;
	outline:0;
}

section ul, section ol, .section ul, .section ol {
	line-height:1.5em;
	margin-left:40px;
	margin-bottom:1em;
}

section ul ul, section ol ol, .section ul ul, .section ol ol {
	margin-bottom:0;
}

section dl dt, .section dl dt {
	font-weight:bold;
}

section dl dd, .section dl dd {
	margin:0 0 10px 20px;
}

#breadcrumbs {
	font-weight:lighter;
	font-family:'Kameron',Georgia,Times,serif;
	font-size:110%;
	letter-spacing:.4px;
}

article nav {
	border-radius:6px;
	margin-bottom:20px;
	padding:10px 20px;
	background-color:#F0F0F0;
}	

article nav h2 {
	border:none;
		margin:0;
}

article nav ol {
	margin-bottom:0px;
}

article nav ol li {
	margin-top:0px;
	padding-left:14px;
	list-style:none;
}

article nav ol li {
	list-style:square;
	padding-left:0px;
	margin-left:20px;
}

article nav li.currentpage {
	 list-style-image:url(../media/template/arrowbullet.svg);
	 font-weight:bold;
}

article nav li.currentpage ol li {
	padding-left:0px;
	margin-left:30px;
	font-weight:normal;
	list-style:circle;
	line-height:1.25em;
}

fieldset {
	padding:6px;margin-bottom:10px;
}


table {
	margin-bottom:1em;
	border:2px solid #333;
	border-collapse:separate;
	}

td, th {
	padding:4px;
	border:1px solid #333;
	border-collapse:separate;
}

#nextpage {
	text-align:right;
}

#nextpage a {
	text-align:right;
	padding:12px 40px 10px 8px;
	margin-bottom:15px;
	background:url(../media/template/bg_next.svg) 53px 6px no-repeat;
}

.important, .tip, .note, .example, .samp, .callout {
	padding:4px 1.5em 0px 1.5em;
	margin:1em auto;
	border-radius:6px;
}

.important .title, .tip .title, .note .title, .example .title, .callout .title {
	padding:3px 0 15px 35px;
	display:block;
	font:bold 1.25em 'Open Sans', sans-serif;
}

.important, .note {
		background:#F3F3F3;
		border-style:solid;
		border-width:.2em .2em .2em 2em;
}

.important {
	border-color:#BF1722;
}

.important .title {
	background:url(../media/template/bg_important.svg) no-repeat;
	color:#BF1722;
}

.note {
	border-color:#1C205B;
}

.note .title {
	background:url(../media/template/bg_note.svg) no-repeat;
	color:#1C205B;
}


.example {
	background-color:#F1F5F7;
	border:1px solid #CCC;
}

.example .title {
	background:url(../media/template/bg_example.svg) no-repeat;
}

.tip {
		background-color:#FFECD5;
		border:1px solid #CCC;
}

.tip .title {
		background:url(../media/template/bg_note.svg) no-repeat;
}

.callout {
	border:.2em solid #BF1722;
	background:#F3F3F3;
	border-radius:2px;
}

.callout .title {
	background:url(../media/template/bg_webaim.svg) no-repeat;
	color:#BF1722;
}

.calloutlink {
	text-align: center;
}

.calloutlink a {
	background-color:#fff;
	padding:5px;
	border:1px solid #1C205B;
	border-radius:4px;
	text-decoration: none;
	font-weight: bold;
	display: inline-block;	/* JBN: for tidy wrapping on narrow screens */
}

code, .code {
	background:#F3F3F3;
	font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size:.9em;
}

.code {
		border-radius:6px;
		color:#000;
		margin:0 0 1em 0;
		padding:1em;
}

.samp {
	border:2px solid #BF1722;
	background-color:#f3f6f9;
	font:.9em 'Open Sans';
	padding:1em;
}

.samp select, .samp input:not([type=image]), .samp button {
		border:1px solid #888;
		border-radius:6px;
		font-size:.9em;
		padding:.2em;
}

.samp button, .samp input[type=submit], .samp input[type=reset] {
		background-color:rgb(239, 243, 246);
		background-image:linear-gradient(-180deg, rgb(250, 251, 252), rgb(239, 243, 246) 90%);
		padding:.2em 1em;
		vertical-align:middle;
}

figure {
	text-align:center;
}

figcaption {
	text-align:left;
	font-style: italic; 
}

blockquote {
	margin:.5em auto 1em auto;
	width:70%;
	border:1px #666 dashed;
	border-radius:6px;
	padding:.5em;
	padding-bottom:0px;
	background-color:#f1f1f1;
	font-family:Geneva, Times, serif;
}

input, textarea, select {
	font-size:100%;
}

#fade {
	padding:6px;
	border:1px dashed #BF1722;
	border-radius: 6px;
	outline-color: #BF1722;
}

.anchorlink {
	float:left;
	margin-left:-25px;
	margin-top:2px;
	padding-right:6px;
}

.anchorlink a:hover, .anchorlink a:focus {
	background-color:transparent !important;
	border:none;
}

.floatright {
	float:right;
	margin:8px 0px 1px 10px;
}

.floatleft {
	float:left;
	margin:8px 10px 1px 0px;
}

.border {
	border:gray solid 1px;
}

.fullwidth {
	margin:1em 0;
	width:100%;
}
	
.subtitle {
	font-size:60%;
}

.center, .mediaobject {
	text-align:center;
	margin-bottom:1em;
}

.menuchoice
	{
	font-weight:bold;
	color:#555;
}

kbd, .keycap {
	background-color:#f1f1f1;
	border:1px solid #666;
	border-width:1px 2px 2px 1px;
	border-radius:5px;
	color:#333;
	padding:0 2px;
	margin:1px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	min-width:17px;
	display:inline-block;
	text-align:center;
}
		
.keycombo {
	font-weight:bold;
}

.smallcaps {
	font-variant: small-caps;
	font-weight: bold;
	color:#222222;
}

/* Blog styles */

#updated img {
	max-width:100px;
}

.comments {
	text-align:center !important;
}

#blogcomments {
	border-top:3px #ccc dotted;
	margin-top:25px;
}

#blogcomments h2, #respond h2 {
	font-family:'Kameron',Georgia,Times,serif;
}

.post>h2, .post>h2 {
	border:none;
}

#respond input, #respond textarea, .searchform input {
	border-radius:3px;
	border:1px solid #bbb;
	border-collapse:collapse;
	padding:3px;
	margin-bottom:4px;
}

.commentlist {
	list-style-type:none;
}

.commentlist li {
	background-color:#fff;
	border:1px solid #ccc;
	border-radius:6px;
	margin-bottom:10px;
	margin-left:90px;
	position:relative;
	padding:5px;
}

.commentlist li:nth-child(even) {
	background-color:#eee;
}

.commentlist .fn {
	font-weight:bold;
}

.commentlist .commentdate {
	display:block;
	float:right;
}

.commentlist .avatar {
	position:absolute;
	left:-90px;
	border-radius:6px;
}

/* Unordered List "tiles" (https://webaim.org/services/evaluation/ and https://webaim.org/intro/) */
ul.tiles {
	background:#F1F5F7;
	border-radius:1em;
	list-style:none;
	margin:2em 0;
}
.tiles > li {
	display:inline-block;
	margin:0;
	padding:2%;
	text-align:center;
	vertical-align:top;
	width:45%;
}
.tiles > li > a {
	border:1px solid transparent;	/* this is to prevent the link from "jumping" because of the added border on hover/focus. */
	display:block;
	font-weight:bold;
	text-decoration:none;
}
.tiles span {
	display:block;
	font-size:5em;
}
.tiles li li {	/* https://webaim.org/services/evaluation/ */
	list-style-type: disc;
	margin-top: .5em;
	text-align: left;
}

@media all and (max-width:30em) {
	.tiles li {
		display:block;
		width:auto;
	}
}
#trending-forum-topics { display:none !important} .docs-code-copy {display:none !important} .docs-page-title {margin-top: 1rem !important} #notice, .marketing-topbar, .twitter-typeahead, .docs-newsletter, .title-bar, .small.secondary.expanded.button.hide-for-medium, .global-zeroclipboard-container, .large-3.columns.sticky-container, .medium-3.large-2.medium-pull-9.large-pull-10.columns, .docs-heading-icon {display:none !important} .off-canvas-content {box-shadow:none !important} .medium-9.large-10.medium-push-3.large-push-2.columns { width: 100% !important; left:0 !important} html, body {height:auto !important} .top-bar {display:none !important} .docs.subheader, .docs.header {display:none !important} #studiosCallout {display:none !important} .newsletter-signup, .footer-contact, footer {display:none !important} .large-12.columns hr {display:none !important} .large-3.pull-9.columns {display:none} #copyright {display:none !important} footer.full-width {display:none !important} .zurb-footer-top {display:none !important} .docs-toc-wrap, .docs-sticky-top-bar {display:none !important} button[data-toggle=motion-header-example] { display:none } .docs-off-canvas-content {padding-top:0 !important} .zurb-footer-bottom {display:none !important} .sidebar {display:none !important} .large-9 {float:none !important; width:100% !important;} #sidebar {display:none !important} body {background:white !important} .large-9.push-3.columns {position:static !important; width:100% !important} .scroll-container .top-bar {display:block !important} .docs-component-inner {padding-left:2.7rem !important; padding-right:2.7rem !important}