<style type="text/css">
/* Sticky Note Node & Paged View */

.page-gratitude .region .region-content {
	margin: 10%;
	width: 100%;
}

.page-gratitude .text-center {
	margin: 0px auto;
	width: 100%;
	clear: both;
	text-align: center;
}

.print-link { display: none !important; }

/* fixed position names
.group-name {
	position: fixed;
	margin: 0 auto;
	width: 90%;
	bottom: 6vw;
	left: 1.53vw;
}*/

.group-name div {
	display: inline;
	clear: none;
}


.field-name-field-message > .field-items > .field-item::after{
	content: '"';
}


.field-name-field-author > .field-items > .field-item::before{
	content: '-';
}

.field-name-field-last-initial > .field-items > .field-item::after{
	content: '.';
}

.node-sticky-note h2{ display: none; }

.node-sticky-note { padding-bottom: 2.5vw; }

.node-sticky-note {;}

.view-gratitude table tbody tr:nth-child(2n) {
	background-color: transparent;
}

.item-list ul {
	list-style-type: none !important; /* annoying list dots */
	/* flexbox layout */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	max-width: 100%;
}

.item-list ul li { margin:unset; }

/* each matching node */
.item-list ul .views-row {
	color: #222;
	padding: unset !important;
	clear: none;
	float: left;
	text-indent: unset;
	text-align: center;
	margin: auto;
	margin-right: -2vw !important;
	margin-bottom: -5vh !important;
	margin-left: 0;
}

.item-list ul li::before{
	display: none;
}

/* content area */
.item-list {
	/* use 100% of the page body width for content - this is negated by newcity.css width: 1100px !important */
	width: 100% !important;
	padding: 0 2.5vw;
	margin: 0 auto;
	text-align: center;
	clear: both;
}



/****************** RESPONSIVE ******************/
/* portrait should be single-column - double the vw sizes */
@media only screen and (max-width : 767px) {
	.stickynote-container {
		background: transparent;
		-webkit-backface-visibility: hidden;
		-webkit-background-clip: content-box;
		outline: 1px solid transparent;
		text-align: center;
		margin: 10px auto;
		color: #222;
		/************************************/
		height: 66vw;
		width: 70vw;
		min-height: 66vw;
		min-width: 70vw;
		padding: 0vw 0.52vw 4.8vw 3.72vw; /* rough vw metric = 0.0532 * pixel value */
	}

	.field-name-field-quotation-mark .field-item{
		font-family: 'Droid Serif', serif;
		color: rgba(0, 0, 0, 0.5);
		text-align: left;
		padding: 12.5% 0 0 0;
		/************************************/
		font-size: 10vw;
	}

	.field-name-field-message, 
	.field-name-field-author,
	.field-name-field-last-initial{
		font-family: 'Permanent Marker', cursive;
		/************************************/
		font-size: 5.0vw;
	}

	.field-name-field-message {
		line-height: 1.1;
		/************************************/
		padding: 1vw 5vw;
		margin-top: -8vw;
	}

	.field-name-field-message .field-item {
		max-width: 100%;
		overflow-wrap: break-word;
	}

	.field-name-field-author {
		margin-right: 0.5vw;
	}

	.rrssb {
		position: fixed;
		width: 90%;
		text-align: center;
		margin: 0 auto;
		/************************************/
		bottom: 5vw;
		padding-left: 3vw;
	}

	.rrssb .rrssb-prefix {
		display: inline;
		clear: left;
		vertical-align: middle;
		/************************************/
		margin-right: 1.04vw;
		font-size: 4vw;
	}

	.rrssb .rrssb-buttons {
		clear: none;
		list-style-type: none;
		display: inline;
		/************************************/
		margin-left: 0.52vw;
	}

	.rrssb .rrssb-buttons li {
		display: inline;
		/************************************/
		margin-right: 0.52vw;
	}

	.rrssb .rrssb-icon img{ /* the span that holds the graphic (needs InnerHTML) */
		border: 0px;
		/************************************/
		height: 7vw;
		width: 7vw;
	}
}

@media only screen and (min-width : 768px) {
	.stickynote-container {
		background: transparent;
		-webkit-backface-visibility: hidden;
		-webkit-background-clip: content-box;
		outline: 1px solid transparent;
		text-align: center;
		margin: 10px auto;
		color: #222;
		/************************************/
		height: 33vw;
		min-height: 33vw;
		width: 35vw;
		min-width: 35vw;
		padding: 0vw 0.26vw 2.4vw 1.86vw; /* rough vw metric = 0.0532 * pixel value */
	}

	.field-name-field-quotation-mark .field-item{
		font-family: 'Droid Serif', serif;
		color: rgba(0, 0, 0, 0.5);
		text-align: left;
		padding: 12.5% 0 0 0;
		/************************************/
		font-size: 5vw;
	}

	.field-name-field-message, 
	.field-name-field-author,
	.field-name-field-last-initial{
		font-family: 'Permanent Marker', cursive;
		/************************************/
		font-size: 2.5vw;
	}

	.field-name-field-message {
		line-height: 1.1;
		/************************************/
		padding: 0.5vw 2.5vw;
		margin-top: -4vw;
	}

	.field-name-field-message .field-item {
		max-width: 100%;
		overflow-wrap: break-word;
	}

	.field-name-field-author {
		/************************************/
		margin-right: 0.25vw;
	}

	.rrssb {
		position: fixed;
		width: 90%;
		text-align: center;
		margin: 0 auto;
		/************************************/
		bottom: 2.5vw;
		padding-left: 1.5vw;
	}

	.rrssb .rrssb-prefix {
		display: inline;
		clear: left;
		vertical-align: middle;
		/************************************/
		margin-right: 0.52vw;
		font-size: 2vw;
	}

	.rrssb .rrssb-buttons {
		clear: none;
		list-style-type: none;
		display: inline;
		/************************************/
		margin-left: 0.26vw;
	}

	.rrssb .rrssb-buttons li {
		display: inline;
		/************************************/
		margin-right: 0.26vw;
	}

	.rrssb .rrssb-icon img{ /* the span that holds the graphic (needs InnerHTML) */
		border: 0px;
		/************************************/
		height: 3.5vw;
		width: 3.5vw;
	}
}


/*** COMMON **/
.rrssb-buttons li a, .rrssb-buttons li a:hover{
	color: transparent;
	background-color: transparent !important;
}

.rrssb-buttons li a.popup{
	background-color: transparent !important;
}

.rrssb .rrssb-buttons span {
	background: transparent;
}

.rrssb .rrssb-icon {
	display: inline;
	clear: none;
	background-color: transparent;
}

.rrssb .rrssb-text {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

footer { clear: left; }

/* views pager styles */
.page-gratitude .pagination > li > *,
.page-gratitude .pagination > li:first-child > * {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	/* color properties */
	color: #fee9ed;
	border: solid 1px #940e25;
	background: #b7112e;
	background: -webkit-gradient(linear, left top, left bottom, from(#d21435, to(#b7112e));
	background: -moz-linear-gradient(top,  #d21435,  #b7112e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#d21435', endColorstr='#b7112e');
}

.page-gratitude .pagination > li > *:hover {
	text-decoration: none;
	/* color properties */
	background: #940e25;
	background: -webkit-gradient(linear, left top, left bottom, from(#940e25), to(#b7112e));
	background: -moz-linear-gradient(top, #940e25,  #b7112e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#940e25', endColorstr='#b7112e');
}

.page-gratitude .pagination > .active > *:active {
	position: relative;
	top: 1px;
	/* color properties */
	color: #d21435;
	background: -webkit-gradient(linear, left top, left bottom, from(#b7112e), to(#d21435));
	background: -moz-linear-gradient(top,  #b7112e,  #d21435);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#b7112e', endColorstr='#d21435');
}

#note-links {
	margin: 0 auto;
	text-align: center;
}

ul#note-nav {
	display: inline-flex;
	list-style-type: none;
}

ul#note-nav li {
	border-radius: .25em;
	-webkit-border-radius: .25em; 
	-moz-border-radius: .25em;
	padding: 1em;
	margin: 1em;
	display: inline-flex;
}
</style>