/* ----- More ABC page styles ------ */
/* created by: Geoff Pack, January 2014 */
/* updated for multi-cols: May 2017 */


/* reset */
html, body, div, ol, ul, li {margin:0; padding:0;}

/* HTML5 for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}


/* ---------------------------------------------- */
/* grid: single column, flexible widths */

.abcRow {margin-left:auto; margin-right:auto;}
.abcRow .abcRow {margin-left:-10px; margin-right:-10px;}
.abcRow:before, .abcRow:after {display:table; content:" ";}
.abcRow:after {clear:both;}
.abcSpan1, .abcSpan2, .abcSpan3, .abcSpan4, .abcSpan5, .abcSpan6, .abcSpan7, .abcSpan8, .abcSpan9, .abcSpan10, .abcSpan11, .abcSpan12 {float:none; margin-left:10px; margin-right:10px;}

/*
.abcRow {outline:1px dotted red;}
.abcRow .abcRow {outline:1px dashed orange;}
.abcSpan3 {outline:1px dashed green;}
.abcSpan6 {outline:1px dotted blue;}
.abcSpan12 {outline:1px dotted purple;}
/**/


/* ---------------------------------------------- */
/* layout */

html, body {margin:0; padding:0;}

	
/* ---------------------------------------------- */
/* skin */

body {font-family:"Interval Sans Pro", Helvetica, Arial, sans-serif; font-size:100%; line-height:1.5; -webkit-text-size-adjust:100%; color:#000; background:#f0f5f9;}

/* links */
a {text-decoration:none; color:#000;}
a:hover {color:#087acb;}
a:focus {text-decoration:underline;}

/* headings */
h1 {font-size:150% /* 24px */; font-weight:normal; text-transform:uppercase;}
h1 strong {}
h1 a {color:#7a8a97;}
h2 {font-size:125%;  font-weight:normal; text-transform:uppercase;}
h3 {font-size:112.5%;  font-weight:normal;}
h4 {font-size:87.5%; font-weight:normal;}

/* wrapper */
#wrapper {min-height:calc(100vh - 190px);}


/* header */
#header {background:#fff url('../jpg/body.jpg') center -44px no-repeat;}
#header > div {position:relative;}
#header img {display:none; border:0;}
#header h1 {font-family:"Interval Sans Pro Light", "Interval Sans Pro", Helvetica, Arial, sans-serif; font-weight:normal; line-height:1.2; margin:0 10px; padding:0.5em 0;}


/* main content (error page) */
#mainContent {padding: 1em 0; background:#fff;}
#mainContent ul {margin:1em 0;}
#mainContent li {margin:0.3em 30px; padding:0;}
#mainContent a {color:#087acb;}
#mainContent a:hover {color:#5fb3f1; text-decoration:underline;}

/* explore */
#explore {padding-bottom:3.5em; background:#fff;}
#explore h2 {max-width:940px; margin:0 10px; padding:1em 0 3px 0; border-bottom:3px solid #d1e5ef;}
#explore h3 {margin:40px 0 0 0; padding:0 0 3px 0; text-transform:uppercase; border-bottom:3px solid #d1e5ef;}
#explore h3 a {display:block; padding:0;}
#explore ul {position:relative; list-style:none; margin-top:25px;}
#explore li {font-size:100%; line-height:1.5;}
#explore li a {display:block; padding:3px 0 2px 0; border-top:1px solid #e1e6e9;}
#explore li:first-child a {border-top:1px solid #fff;}
#explore p {margin-top:2em; margin-bottom:0em;}


/* footer */
#footer {padding:0 0 30px 0; background:#f0f5f9;}
#footer h3 {clear:left; margin:40px 0 0 0; padding:0 0 3px 0; text-transform:uppercase; border-bottom:3px solid #fff;}
#footer h3 a {display:block; padding:0;}
#footer ul {position:relative; list-style:none; margin-top:15px;}
#footer li a {display:block; padding:3px 0 2px 0; border-top:1px solid #e1e6e9;}
#footer li:first-child a {border-top:1px solid #f0f5f9;}
#footer .platform-switch {display:none;}

#subFooter {background:#e2e8eb;}
#subFooter h3 {float:left; margin:0; padding:0; text-indent:-9999px; border:0;}
#subFooter ul {margin-top:0; padding:0.25em 0;}
#subFooter li {margin-top:0.2em; margin-bottom:0.25em;}
#subFooter li a {padding:0.4em 14px; border:1px solid #fff;}
#subFooter li:first-child a {border-top:1px solid #fff;}
#subFooter li a:hover {color:#357bbd; background:#dee8ee;}


@media only screen and (max-width:301px) {
	/* tweaks to list margin, borders */
}

@media only screen and (min-width:301px) {
	/* two columns, flexible widths */
	
	/* columns */
	#explore .abcSpan12 ul {
		column-count:2;
		column-gap:20px;
	}
	#explore .abcSpan6 ul, #footer .abcSpan6 ul {
		column-count:2;
		column-gap:20px;
	}

	/* an inelegant hack to hide the top borders of items at the top of the columns other than the first */
	/* should only need 1px height, but browsers... */
	#explore ul:before {content: ""; position:absolute; left:0; width:100%; height:3px; background:#fff;}
	#footer  ul:before {content: ""; position:absolute; left:0; width:100%; height:3px; background:#f0f5f9;}
	#subFooter ul:before {display:none}

	/* grid */
	.abcSpan3 {float:left; width:44%; margin-left:3%; margin-right:3%;}
	.abcSpan6 {float:none;}

}

@media only screen and (min-width:500px) {
	/* two columns, fixed width, centered */
	h1 {font-size:187.5% /* 30px */;}

	#mainContent {padding: 2em 0;}
	#mainContent, #explore {background:#fff url('../jpg/body.jpg') center -134px no-repeat;}
	#mainContent + #explore {background-image:none;}
	#explore h2	{max-width:460px; margin:0 auto;}		
	#explore h3, #footer h3 {width:220px;}
	#subFooter h3 {width:auto;}

	/* grid */
	.abcRow {margin-left:auto; margin-right:auto;}
	.abcRow .abcRow {margin-left:-10px; margin-right:-10px;}
	.abcSpan3 {float:left; width:220px; margin-left:10px; margin-right:10px;}
	.abcSpan6 {float:none; width:460px; margin:0 auto;}
	.abcSpan12 {float:none; width:460px; margin:0 auto;}

	#mainContent .abcSpan12 {float:none; width:auto; margin-left:10px; margin-right:10px;} /* text area on Error pages */

	#subFooter > ul.abcRow {width:480px; margin:0 auto;}
}

@media only screen and (min-width:641px) {
	/* abcNav changes to desktop styles at this width */

	#wrapper {min-height:calc(100vh - 90px);}

	#header {min-height:90px;}
	#header img {display:block; float:left; margin:14px 0 11px 20px; padding:10px;}
	#header h1 {margin:0 10px 0 270px; padding:28px 0 20px 0;}

	#mainContent .abcSpan12 {margin-left:30px; margin-right:30px;} /* text area on Error pages */
}

@media only screen and (min-width:1000px) {
	/* four columns, fixed width, centered */

	#header, #explore, #footer {}	
	#header > div {max-width:1000px; margin:0 auto;}
	#header h1 {margin:0 30px 0 270px;}
	#explore h2	{max-width:940px;}		

	/* columns */
	#explore .abcSpan12 ul {
		column-count:4;
	}

	/* grid */
	.abcRow {max-width:960px;}
	.abcRow .abcRow {max-width:auto;}

	.abcSpan1, .abcSpan2, .abcSpan3, .abcSpan4, .abcSpan5, .abcSpan6, .abcSpan7, .abcSpan8, .abcSpan9, .abcSpan10, .abcSpan11, .abcSpan12 {float:left; margin-left:10px; margin-right:10px;}
	.abcSpan1 {width:60px;}
	.abcSpan2 {width:140px;}
	.abcSpan3 {width:220px;}
	.abcSpan4 {width:300px;}
	.abcSpan5 {width:380px;}
	.abcSpan6 {width:460px;}
	.abcSpan7 {width:540px;}
	.abcSpan8 {width:620px;}
	.abcSpan9 {width:700px;}
	.abcSpan10 {width:780px;}
	.abcSpan11 {width:860px;}
	.abcSpan12 {width:940px;}

	#mainContent .abcSpan12 {margin-left:10px; margin-right:10px;} /* text area on Error pages */

	#subFooter > ul.abcRow {width:auto; margin:0 auto;}
}

@media print {
	a:link:after, a:visited:after {content:" " attr(href) " "; float:right; margin-top:0.25em; color:#999; font-size:0.75em; text-transform:none;}

	/* style subfooter and footer like explore */
	#subFooter li a {padding:3px 0 2px 0;}	
	#footer {color:#23292d;}
	#footer a {color:#23292d;}
	#footer h3 {color:#23292d;}
	#footer h3 a {border-bottom:3px solid #d1e5ef;}
	#footer li a {border-top:1px solid #e1e6e9;}
	
	/* abcHeader */
	#abcHeader {margin-bottom:2em;}
	#abcHeader a.home,
	#abcHeader a.controller {display:none !important;}
	#abcHeader a.search img {display:none;}
}