/* After modifying this file, increase the version number in index.php */

@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('./fonts/Atkinson-Hyperlegible-Regular-102.woff2') format('woff2'), 
	url('./fonts/Atkinson-Hyperlegible-Regular-102.woff') format('woff');
} @font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('./fonts/Atkinson-Hyperlegible-Bold-102.woff2') format('woff2'), 
	url('./fonts/Atkinson-Hyperlegible-Bold-102.woff') format('woff');
} @font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('./fonts/Atkinson-Hyperlegible-Italic-102.woff2') format('woff2'), 
	url('./fonts/Atkinson-Hyperlegible-Italic-102.woff') format('woff');
} @font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('./fonts/Atkinson-Hyperlegible-BoldItalic-102.woff2') format('woff2'), 
	url('./fonts/Atkinson-Hyperlegible-BoldItalic-102.woff') format('woff');
}

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

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

body {
    font-size:16px;
    font-family: 'Atkinson Hyperlegible', "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #fff url('../img/noise_bg.png') repeat;
}

fieldset {
    margin:0;
    padding:0;
    border:0;
}

.header-text {
    font-size:2em;
}

a {
	color: #005e8d;
	text-decoration-color: #82acc1;
} a:visited {
	color: #511E80;
	text-decoration-color: #A792BB;
} a:hover, a:focus {
	color: #002b41;
	text-decoration-thickness: 2px;
	text-decoration-color: #002b41;
} a:visited:hover, a:visited:focus {
	color: #371257;
	text-decoration-thickness: 2px;
	text-decoration-color: #371257;
} 

a, img {
    border:none;
    outline:none;
}

img, iframe {
	max-width:100%;
}

p {
    hyphens:auto;
}

table {
    width:100%;
    border-collapse: collapse;
} table, th, td {
    border:1px solid #b7b7b7;
} th,td {
    padding:0.25em;
}

/* Accessibility */
a.skipto:link, a.skipto:hover, a.skipto:visited, .accessible-hide {
    left: -9999px;
    font-size: 0.8em;
    background: white;
    position: absolute;
    display: inline-block;
    text-decoration: none;
    border-radius:5px;
    padding:10px;
    margin-top:1em;
}
a.skipto:active, a.skipto:focus {
    left: 9px;
    position: absolute;
    display: inline-block;
}
.main {
    outline:none;
}

/* Utility */
.clear {
	clear:both;
}
.upper {
	text-transform: uppercase;
}
div.right {
    float:right;
}
div.left {
    float:left;
}

.menu ul {
    margin:0;
    padding:0;
}
.menu ul li {
    display:inline;
}
.footer .menu li:not(:last-of-type):after {
    content: " \2022\00a0"
}
div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #777;
}

.group:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.group > *:first-child {
    margin-top:0;
} .group > *:last-child {
    margin-bottom:0;
}
.contextual-menu {
	position:relative;
}
.horizontal-scroll {
	overflow:auto;
	white-space:nowrap;
	padding: 1em 2em;
}
.horizontal-scroll li {
	margin:0 0.5em;
} .horizontal-scroll li:last-child {
	padding-right:2em;
}
.horizontal-scroll:before, .horizontal-scroll:after {
	position:absolute;
	top:0;
	bottom:0;
	width:2.5em;
	display:block;
	content:"";
}
.horizontal-scroll:before {
	left:0;
	background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.horizontal-scroll:after {
	right:0;
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}

/* Icons */
.icon {
	width:30px;
	height:30px;
	position:relative;
	display:inline-block;
}
.icon:after {
	padding-bottom: 100%;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
    background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100%;
	display:block;
	content:"";
}
.home:after, .hamb:after, .obit:after, .clas:after, .sear:after, .regi:after, .opin:after, .live:after, .exte:after, .issu:after {
	background-image:url(../img/nav-icons.png);
	background-image:url(../img/nav-icons.svg),
    	linear-gradient(transparent, transparent);
} .home:after {
	background-position:0 40%;
} .clas:after {
	background-position:0 60%;
} .obit:after {
	background-position:0 50%;
} .regi:after {
	background-position:0 20%;
} .opin:after {
	background-position:0 30%;
} .live:after {
	background-position:0 80%;
} .exte:after {
	background-position:0 90%;
} .issu:after {
	background-position:0 100%;
} .hamb:after {
	background-position:0 70%;
}

.face:after, .twit:after, .lnkd:after, .patr:after {
	background-image:url(../img/icons.png);
	background-image:url(../img/icons.svg),
    	linear-gradient(transparent, transparent);
    background-size:410%;
} .twit:after {
	background-position:32.25% 0;
} .lnkd:after {
	background-position:64.51% 0;
} .patr:after {
	background-position:0 100%;
    background-size:100%;
	padding-bottom:24.39%;
}
.icon.patr {
	width:123px;
}

/* Ad Banner */
.top-banner {
	/* height:110px; */
	background-color:#f2f2f2;
	text-align:center;
	padding-bottom:6.7px
}
.top-banner img {
	margin-top:10px;
	/* width:728px */
}

/* Business Listings */
.business-wrapper {
    max-width:100%;
    width:900px;
    margin:auto;
    position:relative;
    font-size: 16px;
}
.business-header {
    margin-top:1.75em;
    margin-bottom: 0.25em;
    text-align: center;
}
.business-directory {
    overflow: hidden;
    position:relative;
}
/* Source for this extremely clever centering trick: http://www.greywyvern.com/?post=323
   I had to modify it though to center over a larger area to accomodate more listings. */
.wrapper {
    position:relative;
    right:400000%;
    text-align:center;
}
.listings {
    display:inline-block;
    margin-right:-800000%;
    position:relative;
    transform:translate(0px);
    transition: transform 0.35s;
    will-change: transform;
} .listings.right {
    transition: initial;
    transform:translate(300px);
} .listings.left {
    transition: initial;
    transform:translate(-300px);
}
.business-directory .listing {
    width:290px;
    display:inline-block;
    padding:12px;
    margin:5px;
    height: 290px;
    vertical-align: top;
    text-align:left;
    border: 1px solid #b7b7b7;
    background-color:white;
    background-color: #f7f7f7;
}
.listing .image {
    height: 200px;
    display: block;
    position: relative;
    border: 1px solid #b7b7b7;
    background-color:white;
}
.listing .image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-height:100%;
}
.business-nav {
    font-size: 30px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background-color: black;
    color: white;
    display: block;
    font-weight: bold;
    border-radius: 100%;
    cursor: pointer;
    text-align: center;
    margin:auto;
    position:absolute;
    top:0;
    bottom:0;
}
.business-nav.left {
    left:-30px;
}
.business-nav.right {
    right:-30px;
}
@media (min-width:1081px) {
    .lessNav .business-nav, .hidePlaceholder .listing:first-child {
        display:none;
    }
}
@media (max-width:1080px) {
    .business-wrapper {
        width:300px;
    }
    .business-header {
        font-size:1.65em;
    }
    .business-nav.left {
        left:-10px;
    }
    .business-nav.right {
        right:-10px;
    }
    .business-nav {
        font-size: 25px;
        width: 25px;
        height: 25px;
        line-height: 25px;
    }
}

/* All */
.margin-wrapper {
    margin:auto;
}
.header, .notice, .main, .footer {
	margin: 0 6%;
}

/* Header */
.home, .regi, .opin, .obit, .clas, .hamb {
	display:none;
}
.header a {
	text-decoration:none;
    color:black;
}
.header a:hover {
    color:black;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: #002b41;
}
.header {
	padding-top: 10px;
}
.header .top {
	position:relative;
	z-index:10;
}
.search, .search-input {
	position:absolute;
	bottom:0;
	right:0;
}
.search-input {
	padding: 0.6em 8em 0.3em 0.8em;
	width:70%;
	z-index:12;
	display:none;
}
.search-input input {
	font-size:1em;
	padding:0.4em;
	width:100%;
	position:relative;
}
.search-input .search .submit-button {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:0;
    z-index:1;
	cursor:pointer;
}
.search-input .submit-button:hover + .item, .search-input .search .submit-button:focus + .item {
	background-color:transparent;
	color:#0000FF;
}
.search-input .submit-button:hover + .item .sear:after, .search-input .search .submit-button:focus + .item .sear:after {
	background-position:0 10%;
}
.search-wrapper.visible .search-input {
	display:block;
}
.search-wrapper.visible > .search {
	display:none;
}
.logo {
	position:relative;
	padding-top:5.48%;
	width:30%;
	float:left;
	background:url(../img/logo.png);
	background:url(../img/logo.svg),
    	linear-gradient(transparent, transparent);
    background-size:100%;
}
.navigation-main {
	margin-left:0.8em;
	position:absolute;
	bottom:0;
	left:30%;
	height:3em;
}
.navigation-main > .menu-button, .navigation-main > a > .menu-button, .navigation-main li {
	float:left;
}
.header .item, .navigation-main .nav > li > a {
	text-transform: uppercase;
	font-size:1.1em;
	padding:0.8em;
	display:block;
}
.search .item {
	padding-right:0.3em;
	padding-left:0.3em;
    cursor: pointer;
}
.parent .nav-child li > a {
    width:100%;
    display:block;
}
.parent:hover .item {
    background-color:transparent;
}
.parent:focus-within {
	background-color:#f6f6f6;
}
.header .menu-button {
	display:none;
}
.parent {
	position:relative;
}
.nav-child {
	display:none;
	position:absolute;
	left:0;
	right:0;
	border:1px solid #e8e8e8;
} .parent .nav-child li {
	text-align:center;
    width:100%;
    padding:0.3em;
	float:left;
	clear:left;
	background-color:white;
    font-weight:normal;
} .parent .nav-child li:not(:last-child) {
	border-bottom:1px solid #e8e8e8;
}
.nav li:hover, .parent .nav-child li:hover,
.nav li:focus, .parent:focus, .parent .nav-child li:focus-within {
	background-color:#f6f6f6;
}
.nav li:hover, .nav li:focus-within, .parent:hover, .parent:focus {
    background-color:rgba(237,237,237,0.5);
}
.secondary-navigation {
	background-color:#E8E8E8;
	font-size:0.95em;
}
.secondary-navigation ul {
	float:left;
	overflow:auto;
	margin:0;
}
.secondary-navigation li {
	padding:0.5em 0.7em;
	float:left;
}
.secondary-navigation .external-links {
	position:relative;
	float:right;
}
.secondary-navigation .external-links > * {
	float:left;
}
.external-links > span {
	display:none;
}
.secondary-navigation .everything-frontenac {
	position:relative;
	background-color: #f5f2e4;
}
.secondary-navigation .everything-frontenac:before {
	position:absolute;
	left:-1px;
	top:10%;
	bottom:10%;
	width:2px;
	content:"";
	background-color:black;
}
.everything-frontenac img {
	height:1.11em;
	width:1.11em;
} .issu {
	height:2.03em;
	width:2.03em;
}
.secondary-navigation .issuu {
	padding: 0 0.8em;
}
.sear {
	margin-bottom:-0.5em;
	margin-right:0.5em;
}
.exte {
	height:0.9em;
	width:0.9em;
}

.menu-focus-stealer {
	display:none;
	position:absolute;
	right:0;
	top:3.02em;
	z-index:16;
	padding:5px 0;
	width:16.66%;
}

.notice p {
	margin:0;
	padding:0.5em 1em;
	border:3px solid #E8E8E8;
	border-top:1px solid #b1b1b1;

	background: rgb(255,255,255);
	background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%);
	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
	background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=1 );
}

/* Footer */
.footer {
	background-color:#f2f2f2;
	padding:2em 6%;
	margin:2em 0 0;
	font-size:1.1em;
} .footer .visit-fl {
	float:right;
	padding-right:2em;
	font-size:1.2em;
	width:35%;
	text-align:right;
	line-height:1.5em;
} .footer .visit-fl img {
	vertical-align:top;
	padding-left:0.5em;
	width:170px;
} .footer .visit-fl p {
	margin:0;
} .footer .links {
	float: left;
	width: 65%;
}
.mobile-footer {
	text-align: center;
	font-size: 1.5em;
	background-color: #E8E8E8;
	margin: 2em 0 0;
	border-radius: 10px 10px 0 0;
	padding: 0.2em;
} .mobile-footer a {
	text-decoration:none;
}

/* Category Banner (common to most pages) */
div.itemCategory{
	background-color:#316494;
	margin:0;
	padding:0.5em 0.5em 0.2em 0.5em;
	font-size:1.4em;
	border-bottom-right-radius: 1em;
}
.itemCategory a {
	text-decoration:none;
	color:white;
}
div.itemCategory > a, div.itemCategory > h2, div.itemCategory > h1  {
    display:inline-block;
}
div.itemCategory p {
    margin:0;
}
div.categoryNotice {
    background-color: white;
    float: right;
    margin: 0 1% 0;
    max-width: 40%;
    padding: 2px 4px 0;
}
div.categoryNotice a {
    color:#316494;
}
div.categoryNotice p {
    font-size: 0.5em;
    line-height: 1.4em;
}

@media (max-width:1460px) {
	.everything-frontenac ul.links li:nth-child(2) {
		display:none;
	}
}
@media (max-width:1280px) {
	.everything-frontenac ul.links li {
		display:none;
	}
}
@media (max-width:1180px) {
	.navigation-main {
		position:relative;
		clear:both;
		left:0;
		margin-left:0;
		height:auto;
	}
	.search-wrapper > .search {
		display:none;
	}
	.search, .search-input {
		top:0;
		display:block;
		height:3.1em;
	}
	.search-input {
	 	margin:0;
	}
	.secondary-navigation {
		position:relative;
	}
	.secondary-navigation .regional ul {
		float:none;
		display:block;
		text-align:center;
	}
	.secondary-navigation .regional li {
		float:none;
		display:inline-block;
	}
	.secondary-navigation .external-links {
		position:absolute;
		bottom:100%;
		right:0;
		z-index:10;
	}
	a.issuu:hover, a.issuu:focus {
		background-color: #f6f6f6;
	}
}
@media (max-width:1000px) {
	div.itemCategory {
		border-radius: 0;
	}
}
@media (max-width:900px) {
    div.itemCategory > a, div.itemCategory > h2, div.itemCategory > h1 {
        display:block;
        text-align:center;
    }
    div.categoryNotice {
        width:100%;
        max-width:100%;
        margin:0;
        padding: 2px 0 0;
        float:none;
        min-height:0;
    }
}
@media (max-width:850px) {
	.search-input {
		top:-0.5em;
	}
}
@media (max-width:800px) {
    .header, .notice, .footer {
		margin: 0;
	}
	.main {
		margin:0 0.4em;
	}
}
@media (min-width:761px) {
    .mobile {
        display:none !important;
    }
}
/* Mobile */
@media (max-width:760px) {
	.mobile {
		display:block;
	}
	.desktop {
		display:none !important;
	}

	.header, .notice {
		margin: 0;
	}
	.main {
		margin:0 0.4em;
	}
	.top-banner {
		position:fixed;
		z-index:13;
		left:0;
		right:0;
		bottom:0;
		height:auto;
	}
    .top-banner img {
        padding:0 1em;
    }
	.logo {
		position:relative;
		padding-top:2.4em;
		width:2.4em;
		float:left;
		background-size:100%;
		background-image:url(../img/logo-small.png);
		background-image:url(../img/logo-small.svg),
	    	linear-gradient(transparent, transparent);
	}
	.search, .search-input {
		height:0;
	}
	.search-input, .search {
		bottom:auto;
	}
	.search-input {
		top:auto;
		padding:0.1em 3em 0.1em 2.7em;
		width:100%;
	}
	.search {
		height:auto;
	}
	.search .item {
		padding:0.2em;
	}
	.navigation-main {
		height:40px;
		overflow:hidden;
	}
	.home, .regi, .opin, .obit, .clas, .hamb {
		display:block;
		margin:auto;
		margin-bottom:5px;
	}
	.navigation-main > .menu-button, .navigation-main > a > .menu-button, .navigation-main li {
		width:16.66%;
		padding:0;
		overflow:hidden;
		float:left;
	}
	.header .navigation-main > ul > li > a {
		padding:0;
        text-align:center;
		padding:5px 0;
	}
	.secondary-navigation {
		display:none;
	}
	.header {
		position: relative;
		z-index: 1;
		-webkit-box-shadow: 0px -6px 5px 7px rgba(0,0,0,0.5);
		-moz-box-shadow: 0px -6px 5px 7px rgba(0,0,0,0.5);
		box-shadow: 0px -6px 5px 7px rgba(0,0,0,0.5);
	}
	.header .menu-button {
		display:block;
		cursor:pointer;
	}
	/* Mobile Menu Extended */
	.mobile-menu .header .secondary-navigation, .mobile-menu .header .secondary-navigation li,
    .secondary-navigation .external-links, .external-links a, .external-links ul, .everything-frontenac, .menu .everything-frontenac ul.links li {
		display:block;
		width:100%;
		position:static;
	}
	.mobile-menu .header .navigation-main > .menu-button, .mobile-menu .header .navigation-main li {
		width:100%;
	}
	.mobile-menu .header .navigation-main .icon {
		display:inline-block;
		vertical-align:middle;
		margin-left:0.5em;
		margin-right:1em;
	}
	.header .navigation-main > ul > li > a, .external-links li {
		text-align:left;
		border-bottom:1px solid #e8e8e8;
	}
	.mobile-menu .header .navigation-main {
		height:auto;
	}
	.mobile-menu .contextual-menu, .mobile-menu .notice, .mobile-menu .main, .mobile-menu .footer, .mobile-menu .top-banner, .secondary-navigation .everything-frontenac::before, .mobile-menu .mobile-footer  {
		display:none;
	}
	.mobile-menu .header .menu-button {
		position:absolute;
		left:-1000px;
	}
    .no-js .mobile-menu .header .menu-button {
        left:auto;
        right:0;
    }
	.external-links, .external-links .everything-frontenac  {
		background-color:white;
	}
    .external-links span {
        display:inline-block;
    }
	.external-links > span {
		display:inline;
		font-weight:bold;
		padding: 0.5em 0.7em;
	}
	.issu, .live {
		vertical-align:middle;
		margin-right:1em;
	}
	.issu:after {
		background-position:0 101.5%;
	}
	.everything-frontenac img {
		height:1.7em;
		width:1.7em;
		margin-left:0.165em;
		margin-right:1.165em;
	}
	.everything-frontenac a:hover, .everything-frontenac a:focus {
		background-color: #f6f6f6;
	}
	.everything-frontenac .links li .mobile {
		margin-left:3em;
	}
}

/* Scale the text up on larger screens so that the proportions are more or less maintained. */
@media (min-width:1521px) and (max-width:1920px) {
    .margin-wrapper {
        width:1519px;
    }
}
@media (min-width:1921px) {
    .margin-wrapper {
        width:79.16666%;
    }
    .page-wrapper {
        font-size:16px;
    }
}
@media (min-width:3841px) {
    .page-wrapper {
        font-size:32px;
    }
}
/* CSS seems to reject media queries at these sizes in my testing, but maybe not for people with larger monitors, so I'll leave it as a backup. */
@media (min-width:7681px) {
    .page-wrapper {
        font-size:64px;
    }
}