<style>
	// Flexbox display
	// flex or inline-flex
	.flex-display(@display: flex) {
		display: ~"-webkit-@{display}";
		display: ~"-moz-@{display}";
		display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
		display: ~"-ms-@{display}"; // IE11
		display: @display;
	}


	// The 'flex' shorthand
	// - applies to: flex items
	// <positive-number>, initial, auto, or none
	.flex(@columns: initial) {
	  -webkit-flex: @columns;
		 -moz-flex: @columns;
		  -ms-flex: @columns;
			  flex: @columns;
	}


	// Flex Flow Direction
	// - applies to: flex containers
	// row | row-reverse | column | column-reverse
	.flex-direction(@direction: row) {
	  -webkit-flex-direction: @direction;
		 -moz-flex-direction: @direction;
		  -ms-flex-direction: @direction;
			  flex-direction: @direction;
	}


	// Flex Line Wrapping
	// - applies to: flex containers
	// nowrap | wrap | wrap-reverse
	.flex-wrap(@wrap: nowrap) {
	  -webkit-flex-wrap: @wrap;
		 -moz-flex-wrap: @wrap;
		  -ms-flex-wrap: @wrap;
			  flex-wrap: @wrap;
	}


	// Flex Direction and Wrap
	// - applies to: flex containers
	// <flex-direction> || <flex-wrap>
	.flex-flow(@flow) {
	  -webkit-flex-flow: @flow;
		 -moz-flex-flow: @flow;
		  -ms-flex-flow: @flow;
			  flex-flow: @flow;
	}


	// Display Order
	// - applies to: flex items
	// <integer>
	.flex-order(@order: 0) {
	  -webkit-order: @order;
		 -moz-order: @order;
		  -ms-order: @order;
			  order: @order;
	}


	// Flex grow factor
	// - applies to: flex items
	// <number>
	.flex-grow(@grow: 0) {
	  -webkit-flex-grow: @grow;
		 -moz-flex-grow: @grow;
		  -ms-flex-grow: @grow;
			  flex-grow: @grow;
	}


	// Flex shrink
	// - applies to: flex item shrink factor
	// <number>
	.flex-shrink(@shrink: 1) {
	  -webkit-flex-shrink: @shrink;
		 -moz-flex-shrink: @shrink;
		  -ms-flex-shrink: @shrink;
			  flex-shrink: @shrink;
	}


	// Flex basis
	// - the initial main size of the flex item
	// - applies to: flex itemsnitial main size of the flex item
	// <width>
	.flex-basis(@width: auto) {
	  -webkit-flex-basis: @width;
		 -moz-flex-basis: @width;
		  -ms-flex-basis: @width;
			  flex-basis: @width;
	}


	// Axis Alignment
	// - applies to: flex containers
	// flex-start | flex-end | center | space-between | space-around
	.justify-content(@justify: flex-start) {
	  -webkit-justify-content: @justify;
		 -moz-justify-content: @justify;
		  -ms-justify-content: @justify;
			  justify-content: @justify;
	}


	// Packing Flex Lines
	// - applies to: multi-line flex containers
	// flex-start | flex-end | center | space-between | space-around | stretch
	.align-content(@align: stretch) {
	  -webkit-align-content: @align;
		 -moz-align-content: @align;
		  -ms-align-content: @align;
			  align-content: @align;
	}


	// Cross-axis Alignment
	// - applies to: flex containers
	// flex-start | flex-end | center | baseline | stretch
	.align-items(@align: stretch) {
	  -webkit-align-items: @align;
		 -moz-align-items: @align;
		  -ms-align-items: @align;
			  align-items: @align;
	}


	// Cross-axis Alignment
	// - applies to: flex items
	// auto | flex-start | flex-end | center | baseline | stretch
	.align-self(@align: auto) {
	  -webkit-align-self: @align;
		 -moz-align-self: @align;
		  -ms-align-self: @align;
			  align-self: @align;
	}



	* {
		box-sizing: border-box;
	}

	@media screen {
		html {
			height: 100%;
		}
		
		body {
			display: flex;
			background-color: #fff;
			flex-direction: column;
			height: 100%;
			margin: 0;
			font-family: 'Open+Sans', sans-serif;
			color: #222;
			font-size: .9em;
		}
	}
	
	@media print {
		body {
			display: flex;
			background-color: #fff;
			flex-direction: column;
			height: 100%;
			margin: 0;
			font-family: 'Open+Sans', sans-serif;
			color: #222;
			font-size: .6em;
		}
	}

	main {
		flex: 1 0 auto;
		display: flex;
	}

	a:link {
		color: #2c696d;
		text-decoration: underline;
	}
	
	a:visited {
		color: #60b9bf;
		text-decoration: underline;
	}
	a.v:link, a.v:visited {
		color: #ffffff;
		text-decoration: underline
	}
	a.v:hover {
		color: #60B9BF;
		text-decoration: underline
	}
	section.content {
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
	}

	section.content .pin-head {
		flex: 0 1 auto;
		display: flex;
		padding: 0px 0px 0px 15px;
		background-color: #121212;
		font-size: 200%;
		font-weight: bold;
		color: #ffffff;
		//margin-top: -.5em;
		//margin-bottom: -.5em;
	}
        section.content .pin-head
	van {
		flex: 0 1 auto;
		display: flex;
		padding: 0px 0px 0px 0px;
		background-color: #121212;
		font-size: 50%;
		font-weight: normal;
		font-style: italic;
		color: #ffffff;
		//color: #60B9BF;
	}
	section.content .pin-head button
	{
		padding: 2px 15px;
		background: #f0f0f0;
		border: 1px solid #ddd;
		border-radius: 4px;
		height: 25px;
		width: 100px;
		margin-left:6px;
		margin-right:6px;
	}
	
	section.content .pin-head button:hover:enabled, button:active, button:focus {
		background: #d3d3d3;
		outline: none;
	}

	section.content .pin-foot {
		flex: 0 1 auto;
		display: flex;
		padding: 0px 0px 0px 15px;
		background-color: #121212;
		color: #ffffff;
		text-align: left;
		font-size: 80%;
		margin-top: .5em;
	}
	
	section.content .pin-colHeader {
		flex: 0 1 auto;
		display: flex;
		padding: 0px 0px 0px 5px;
		background-color: #e0e0e0;
		margin-top: 0;
		margin-bottom: -.5em;
	}
	
	section.content .pin-colHeader
	p {
		flex: 0 1 16%;
	}
	
	section.content .pin-colHeader label {
		color: #000000;
		padding: 0px 5px 0px 5px;
		font-family: 'Vollkorn', serif;
		font-size: 1.2em;
		text-decoration: underline;
	}
	
	section.content .pin-colHeader label:hover, label:active, label:focus {
		color: #ffffff;
		background-color: #000000;
		padding: 0px 5px 0px 5px;
		font-family: 'Vollkorn', serif;
		font-size: 1.2em;
	}
	
	section.content .pin-list {
		flex: 1 0 auto;
		list-style-type: none;
		padding: 0px 0px 0px 0px;
	}
	
	section.content .pin-list > ul#results
	ul {
		list-style-type: none;
		display: flex;
	}
	
	section.content .pin-list > ul#results
	li {
		display: flex;
		padding: 0 0px;
		min-height: 2em;
		margin-top: -.5em;
		margin-bottom: -.5em;
		margin-left: -2em;
		margin-right: 0em;
		//height: auto;
	}
	
	section.content .pin-list > ul#results
	li p {
		flex: 0 0 16%;
	}
	
	section.content .pin-list > ul#results
	li:nth-child(2n) {
		background-color: #f2f2f2;
	}
	
	section.content .pin-search {
		flex: 0 0 auto;
		display: flex;
		padding: 0px 0px 0px 10px;
		background-color: #f0f0f0;
		vertical-align: middle;
		border-bottom-style: double;
		border-bottom-color: #000000;
		//margin-bottom: -.5em;
		font-size: 90%;
		border-radius: 4px;
	}
	
	section.content .pin-search input {
		padding: 1px 8px 1px 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
	}
	
	section.content .pin-search select {
		padding: 0px 8px 0px 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
	}
	
	section.content .pin-search
	p {
		flex: 0 1 auto;
		padding: 0px 20px 0px 0px;
	}
	
	section.content .pin-search button {
		padding: 2px 2px;
		background: #bbfa78;
		border: 1px solid #ddd;
		border-radius: 4px;
		height: 27px;
		min-width: 80px;
	}
	
	section.content .pin-search button:hover, button:active, button:focus {
		background: #77de09;
		outline: none;
	}

	@media print {
		section.content .pageControls button
		{
			display: none;
		}
		section.content .pageControls input
		{
			display: none;
		}
	}
	
	@media screen {
		section.content .pageControls button
		{
			padding: 2px 15px;
			background: #f0f0f0;
			border: 1px solid #ddd;
			border-radius: 4px;
			height: 25px;
			width: 60px;
			margin-left:6px;
			margin-right:6px;
		}

		section.content button:hover:enabled, button:active, button:focus {
			background: #d3d3d3;
			outline: none;
		}

		section.content .pageControls input {
			padding: 2px 15px;
			background: #fbfbfb;
			border: 1px solid #ddd;
			border-radius: 4px;
			height: 25px;
			width: 75px;
			text-align: center;
		}
	}
	
	section.content .pin-detail1 {
		flex: 0 1 auto;
		padding: 0px 0px 0px 0px;
		border-bottom: 1px solid #ddd;
	}

	
	section.content .pin-detail1
	label {
		color: #222;
		font-size: 100%;
		font-weight: bold;
		text-decoration: underline;
		font-family: 'Vollkorn', serif;
		font-size: 1.2em;
	}

	section.content .pin-detail1 > ul
	ul {
		display: flex;
		list-style-type: none;
		padding: 0px 0px 0px 0px;
	}
	
	section.content .pin-detail1 > ul
	li#li1 {
		display: flex;
		padding: 0px 0px 0px 0px;
		font-size: 180%;
		font-weight: bold;
		margin-top: -1em;
		margin-bottom: -1em;
		margin-left: -.5em;
		margin-right: 0em;
	}
	
	section.content .pin-detail1 > ul
	li#li1b {
		display: flex;
		padding: 0px 0px 0px 0px;
		margin-left: -1em;
		margin-right: -1em;
	}
	
	section.content .pin-detail1 > ul
	li#li2 {
		display: flex;
		padding: 0px 0px 0px 0px;
		margin-left: -1em;
		margin-right: -1em;
	}
	
	section.content .pin-detail1 > ul
	li#li3 {
		display: flex;
		padding: 0px 0px 0px 0px;
		margin-top: -1em;
		margin-bottom: -1em;
		margin-left: -1em;
		margin-right: -1em;
	}
	section.content .pin-detail1 > ul
	li#li4 {
		display: flex;
		padding: 0px 0px 0px 0px;
		margin-top: -1em;
		margin-bottom: -1em;
		margin-left: -1em;
		margin-right: -1em;
	}
	
	section.content .pin-detail1 > ul
	li p {
		flex: 0 0 20%;
	}

	section.content .pin-detail1 > ul
	li p2 {
		flex: 0 0 100%;
	}

	section.content .pin-detail2 {
		flex: 0 1 auto;
		list-style-type: none;
		padding: 0px 0px 0px 0px;
	}
	
	section.content .pin-detail2
	h1 {
		color: #121212;
		padding: 0px 0px 0px 1.5em;
		font-size: 110%;
		font-weight: bold;
		text-decoration: underline;
		font-family: 'Vollkorn', serif;
		font-size: 1.2em;
	}

	section.content .pin-detail2
	label {
		color: #888888;
	}

	section.content .pin-detail2 > ul
	ul {
		list-style-type: none;
		display: flex;
		padding: 0px 0px 0px 0px;
	}
	
	section.content .pin-detail2 > ul
	li {
		display: flex;
		padding: 0px 0px 0px 0px;
		margin-top: -1em;
		margin-bottom: -1em;
		margin-left: -1em;
		margin-right: -1em;
	}
	
	section.content .pin-detail2 > ul
	li p {
		flex: 0 0 100%;
	}


	section.content .pin-detail3 {
		flex: 1 1 auto;
		list-style-type: none;
		padding: 0px 0px 0px 0px;
		border-top: 1px solid #ddd;
	}

	section.content .pin-detail3
	h1 {
		color: #121212;
		padding: 0px 0px 0px 1.5em;
		font-size: 110%;
		font-weight: bold;
		text-decoration: underline;
		font-family: 'Vollkorn', serif;
		font-size: 1.2em;
	}
	
	section.content .pin-detail3
	table {
		table-layout: fixed;
		width: 100%;
		border: 0px #FFFFFF;
		padding: 0px 0px 0px 1.6em;
	}

	section.content .pin-detail3
            	tr:nth-child(even) {
           		 background-color: #C8D8DE;
	}
	
	section.content .pin-detail3
	th {
    		display: table-cell;
   		vertical-align: inherit;
		text-align: left;
		color: #121212;
		padding: 0px 0px 0px 0px;
		font-size: 100%;
		font-weight: bold;
		text-decoration: underline;
		font-family: 'Vollkorn', serif;
		font-size: 1.2em;
	}

	section.content .pin-detail3
	label {
		color: #888888;
	}

	section.content .pin-detail3 > ul
	ul {
		list-style-type: none;
		display: flex;
	}
	
	section.content .pin-detail3 > ul
	li {
		display: flex;
		padding: 0px 0px 0px 0px;
		margin-top: -1em;
		margin-bottom: -1em;
		margin-left: -1em;
		margin-right: -1em;
	}
	
	section.content .pin-detail3 > ul
	li p#p1 {
		flex: 0 0 70%;
		white-space: pre;
	}
	section.content .pin-detail3 > ul
	li p#p1i {
		flex: 0 0 70%;
		padding-left: 1em;
		white-space: pre;
	}
	section.content .pin-detail3 > ul
	li p {
		flex: 0 0 15%;
	}
</style>
