Click the images to access some of the publications featured at NACo's Annual Conference, and click here to access multimedia highlights and additional conference resources.
$(document).ready(function(){
$("div.article-content img").wrap("
");
$( "div.caption" ).addClass( "twip-element");
$("div.twip-element").wrapAll("
");
$( "div.caption" ).wrap("
");
$( "div.caption" ).removeClass( "twip-element");
$( "#content .column.main .intro h1" ).prependTo( "div.twip-title-container");
});
$(document).ready(function(){
var $children = $('.twip-element');
for(var i = 0, l = $children.length; i < l; i += 2) {
$children.slice(i, i+2).wrapAll('
');
}
});
$(document).ready(function() {
$('.twip-img').find('img').each(function(n, image){
var image = $(image);
var thisurl = $(this).attr('src');
image.parents('.twip-img').css('background-image', 'url(' + thisurl + ')');
});
});
$(document).ready(function () {
$('div.twip-element-container').on('click', function () {
$(this).toggleClass('widget-selected');
$('.twip-element-container:nth-of-type(1)').addClass('hide-instructions');
});
});
/*----------------Temporary Styling----------------*/
#admin-menu-wrapper {
display: none;
}
body.admin-menu {
top: 0px !important;
margin-top: 0px !important;
}
header nav.bar {
top: 0px !important;
background-color: #333 !important
}
/*---------------------General---------------------*/
h1 {
display: none;
}
.inset-shadow {
-moz-box-shadow: inset 0 18px 18px -18px #333333,
inset 0 -18px 18px -18px #333333;
-webkit-box-shadow: inset 0 18px 18px -18px #333333,
inset 0 -18px 18px -18px #333333;
box-shadow: inset 0 18px 18px -18px #333333,
inset 0 -18px 18px -18px #333333;
}
.inset-shadow-top {
-moz-box-shadow: inset 0 18px 18px -18px #333333;
-webkit-box-shadow: inset 0 18px 18px -18px #333333;
box-shadow: inset 0 18px 18px -18px #333333;
}
.inset-shadow-bottom {
-moz-box-shadow: inset 0 -18px 18px -18px #333333;
-webkit-box-shadow: inset 0 -18px 18px -18px #333333;
box-shadow: inset 0 -18px 18px -18px #333333;
}
/*---------------------Full Width Nav---------------------*/
/*One Column*/
#content .grid .column.main {
width: 100% !important;
padding: 0px !important
}
#content .grid .column.content-right {
display: none;
}
#content .grid .column.main .grid.intro {margin: 0px !important;}
article.event {
margin-bottom: 0px !important;
}
@media screen and (min-width: 1025px) {
#utility {
border-width: 0px !important
}
#utility .stripe-inner {
display: none !important;
}
header .grid .column.branding {
display: none;
}
header nav.bar {
position: fixed;
left: 0;
right: 0;
width: 100%;
z-index: 900 !important;
margin: 0;
border-top: 6px solid #f60;
background-color: #333;
text-align: center;
}
header nav.bar ul.menu li.top-nav-logo, header nav.bar ul.menu li.top-nav-search {
display: list-item !important;
}
header ul.menu {
max-width: 1600px !important;
margin: 0 auto !important;
text-align: center !important;
}
a.cic-new {
padding-right: 8px !important;
padding-left: 48px !important;
background-color: #f93 !important;
color: #fff !important;
background-image: url(/sites/all/themes/custom/naco_ui/assets/img/county-data-icon.png?1436196918);
background-repeat: no-repeat;
background-position: 10px 7px;
-moz-background-size: 49px;
-o-background-size: 49px;
-webkit-background-size: 49px;
background-size: 49px;
}
}
@media screen and (max-width: 1280px) and (min-width: 1025px) {
a.cic-new {
background-position: 10px 7px !important;
-moz-background-size: 36px !important;
-o-background-size: 36px !important;
-webkit-background-size: 36px !important;
background-size: 36px !important;
padding-left: 40px !important;
}
}
@media screen and (max-width: 1024px) {
a.cic-new {
padding: 11.2px 16px !important;
padding-left: 58px !important;
background-color: #f93 !important;
color: #fff !important;
background-image: url(/sites/all/themes/custom/naco_ui/assets/img/county-data-icon.png?1436196918);
background-repeat: no-repeat !important;
background-position: 14px 8px !important;
-moz-background-size: 32px !important;
-o-background-size: 32px !important;
-webkit-background-size: 32px !important;
background-size: 32px !important;
}
}
a.cic-new:hover {
background-image: url(/sites/all/themes/custom/naco_ui/assets/img/county-data-icon-black.png?1436196918) !important;
background-color: #feca95 !important;
color: #333 !important;
}
@media screen and (max-width: 1024px) {
body.admin-menu header, body.admin-menu #content, body.admin-menu footer {
top: 0px !important;
}
}
/*Full Width Blocks*/
#content, #content .stripe-inner, footer {
max-width: none !important;
}
#content .stripe-inner {
padding: 0px !important
}
#content.full .column.main {
padding: 0px !important;
transition: top 0.69s;
}
#content .column.main .wrapper{
display: none;
}
#page-title h1 {
display: inline !important;
font-family: "MuseoSans" !important;
font-size: 15.5px !important;
line-height: 15.5px !important
}
#content .grid .column.content-right .block:first-child {
width: 100%;
display: table;
padding: 0px !important;
margin: 0px 0px 32px 0px !important;
border-width: 0px !important;
}
/*-----------------------Mobile vs. Desktop Only-----------*/
@media screen and (min-width: 1025px) {
.mobile-only {
display: none !important;
}
}
@media screen and (max-width: 1024px) {
.desktop-only {
display: none !important;
}
}
}
/*---------------------General Fonts---------------------*/
.baskerville {
font-family: "baskerville-urw" !important;
font-style: italic !important;
}
#content .grid .column.main article.hero > .content h3 a:hover, #content .grid .column.content-right article.hero > .content h3 a:hover {
text-decoration: none !important;
}
/*Pub font Styles*/
.twip-element-container .caption-outer .caption h3, .twip-element-container .caption-outer .caption h3 a {
font-size: 28px !important;
line-height: 28px !important;
font-family: "AlternateGotNo2D" !important
}
.wht-text p,
.wht-text li,
.wht-text a,
.wht-text h1,
.wht-text h2,
.wht-text h3,
.wht-text h4,
.wht-text h5,
.wht-text h6 {
color: #ffffff !important
}
.wht-text a {
text-decoration: underline;
}
.wht-text a.btn {
text-decoration: none !important;
border-color: #fff !important;
}
.wht-text a.btn:hover {
border-color: #08b !important;
}
.cn-body article{
margin: 0px !important;
}
.cn-body ul.links {
display: none;
}
/*-----------------TWIP Menu Bar-----------------*/
.twip-title-container h1 {
display: inline-block !important;
font-size: 30px !important;
line-height: 30px !important;
text-transform: uppercase !important;
color:#fff !important;
}
.twip-menu p {
font-size: 14px !important;
line-height: 1.2 !important;
}
.menu-item {
text-align: left !important;
display: block !important;
padding: 8px 0px;
border-bottom: solid 1px rgba(255,255,255,0.5);
color: #fff !important;
font-size: 14px !important;
line-height: 14px !important;
font-family: "MuseoSans300" !important;
}
.menu-item i {
color: #33ccff !important;
min-width: 24px;
}
.menu-item:hover {
color:#ffcc66 !important;
}
.menu-item.menu-item-last {
border-width: 0px !important
}
@media screen and (max-width: 600px) {
.twip-title-container h1, .twip-title-container i {
font-size: 20px !important;
line-height: 20px !important;
}
}
.twip-menu {
position: fixed;
z-index: 10;
width: 250px;
height: 100vh;
background-color: #000;
color: #fff;
padding: 90px 16px 16px 16px;
-webkit-box-shadow: 0px 0px 16px 0px rgba(50, 50, 50, 0.45);
-moz-box-shadow: 0px 0px 16px 0px rgba(50, 50, 50, 0.45);
box-shadow: 0px 0px 16px 0px rgba(50, 50, 50, 0.45);
}
.twip-title-mobile {
width: 100%;
display: block;
overflow: hidden;
transition: all 0.69s;
}
@media screen and (min-width: 1401px) {
.twip-menu {
top: 0px;
left: 0px;
transition: left 0.69s;
}
.twip-title-mobile {
max-height: 0px;
padding: 0px;
}
nav.bar.tabs {z-index: 150 !important;}
footer {z-index: 100;}
.twip-all {
padding: 64px 0px 0px 250px;
transition: padding 0.69s;
}
}
@media screen and (max-width: 1400px) {
.twip-menu {
top: 0px;
left: -270px;
transition: left 0.69s;
}
.twip-all {
padding: 0px;
transition: padding 0.69s;
}
.twip-title-mobile {
max-height: 500px;
padding: 72px 16px 16px 16px !important;
transition-delay: 0.5s;
}
}
.footer-1 {
width: 100%;
border-top: solid 6px #ff9933;
background-color: #eaeaea;
}
footer .footer-1 .grid {
border-width: 0px !important
}
/*---Twip Images---*/
article.full-page .content {
background-color: #000;
min-height: 600px
}
article.full-page .content .inner-content .article-content img,
article.full-page .content .inner-content .article-content .caption {
display: none;
}
.caption-outer.twip-element .caption {
display: block !important;
}
.caption, .caption p, .caption a {
word-wrap: break-word;
}
.twip-all {
width: 100%;
position: relative;
display: table;
background-color: #000;
-webkit-animation-name: slide; /* Safari 4.0 - 8.0 */
-webkit-animation-duration:2s; /* Safari 4.0 - 8.0 */
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0.6s;
-webkit-animation-fill-mode: both;
animation-name: slide;
animation-duration: 2;
animation-timing-function: ease;
animation-delay: 0.6s;
animation-fill-mode: both;
}
@-webkit-keyframes slide {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes slide {
from {opacity: 0;}
to {opacity: 1;}
}
/*
@-webkit-keyframes slide {
from {transform:translate(100vw);}
to {transform:translate(0px);}
}
@keyframes slide {
from {transform:translate(100vw);}
to {transform:translate(0px);}
}
*/
div.twip-element-container {
cursor: pointer;
}
@media screen and (min-width: 1401px) {
.twip-all div.twip-element-container {
width: 25%;
height: 0px;
padding-bottom: 18.75%;
border-left: solid 5px #000;
border-bottom: solid 5px #000;
position: relative;
float: left;
overflow: hidden;
transition: all 0.69s;
}
}
@media screen and (min-width: 769px) and (max-width: 1400px) {
.twip-all div.twip-element-container {
width: 33.333%;
height: 0px;
padding-bottom: 25%;
border-left: solid 5px #000;
border-bottom: solid 5px #000;
position: relative;
float: left;
overflow: hidden;
transition: all 0.69s;
}
.twip-all div.twip-element-container:nth-of-type(3n+1) {
border-left: solid 0px #000 !important
}
}
@media screen and (min-width: 601px) and (max-width: 768px) {
.twip-all div.twip-element-container {
width: 50%;
height: 0px;
padding-bottom: 37.5%;
border-left: solid 5px #000;
border-bottom: solid 5px #000;
position: relative;
float: left;
overflow: hidden;
transition: all 0.69s;
}
.twip-all div.twip-element-container:nth-of-type(2n+1) {
border-left: solid 0px #000 !important
}
}
@media screen and (max-width: 600px) {
.twip-all div.twip-element-container {
width: 100%;
height: 0px;
padding-bottom: 75%;
border-bottom: solid 5px #000;
position: relative;
float: left;
overflow: hidden;
transition: all 0.69s;
}
}
/*----------------Image styling----------------*/
.twip-all div.twip-element-container .twip-img {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 15%
}
.twip-all div.twip-element-container .twip-img img {
width: 1px !important;
height: auto !important;
opacity: 0 !important;
}
/*----------------Caption styling----------------*/
.twip-all div.twip-element-container:nth-of-type(1):after {
content: "Click each thumbnail to find more information and download the resource.";
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
font-size: 18px;
line-height: 1.2;
background-color:rgba(51,204,255,0.92);
background-image: url(/sites/default/files/leg-menu-close.png);
background-size: 16px 16px;
background-position: 16px 24px;
background-repeat: no-repeat;
color: #fff;
padding: 16px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
-webkit-animation-name: fade-in; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode: backwards;
animation-name: fade-in;
animation-duration: 1s;
animation-delay: 2s;
animation-fill-mode: backwards;
transition: top 0.5s, opacity 0.5s;
}
.twip-all div.twip-element-container.hide-instructions:nth-of-type(1):after {
top: 100% !important;
opacity: 0 !important;
transition: top 0.5s, opacity 0.5s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes fade-in {
from {opacity: 0;}
to {opacity: 1}
}
/* Standard syntax */
@keyframes fade-in {
from {opacity: 0}
to {opacity: 1}
}
.twip-all div.twip-element-container .caption-outer {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
overflow: hidden;
}
.twip-all div.twip-element-container .caption-outer:before {
content: "";
position: absolute;
top: 40%;
left: 40%;
width: 10%;
height: 10%;
border-radius: 50%;
background-color: rgba(0,0,0,0);
transition: all 1s;
}
.twip-all div.twip-element-container .caption-outer .caption {
position: relative;
margin-top: 150%;
width: 100%;
padding: 16px;
transition: margin 0.69s;
transition-delay: 0.5s;
}
.twip-all div.twip-element-container.widget-selected .caption-outer:before {
background-color: rgba(0,0,0,0.75) !important;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
transition: all 1s;
}
.twip-all div.twip-element-container.widget-selected .caption-outer .caption {
margin-top: 0px !important;
transition: margin 0.69s;
transition-delay: 0.5s;
}
.twip-all div.twip-element-container .caption-outer .caption p,
.twip-all div.twip-element-container .caption-outer .caption h3 {
color: #fff !important
}
.twip-all div.twip-element-container .caption-outer .caption a {
color: #33ccff !important;
}
Find some of the latest resources from NACo featured during the 2017 Annual Conference.
