/* Flexbox display
 flex or inline-flex */
.flex-display(@display: flex) {
		display: ~"-webkit-@{display}";
		display: ~"-moz-@{display}";
		display: ~"-ms-@{display}box";
		display: ~"-ms-@{display}";
		display: @display;
	}


	.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: #83cacf;
		text-decoration: underline;
	}
	
	a:visited {
		color: #5565f3;
		text-decoration: underline;
	}
	a.v:link, a.v:visited {
		color: #ffffff;
		text-decoration: underline
	}
	a.v:hover {
		color: #60B9BF;
		text-decoration: underline
	}

	.background-cover {
		background-image: url("Images/SidwellBackground.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	section.header1 {
		flex-direction: column;
		font-size: 200%;
		font-weight: bold;
		color: #ffffff;
		
		background-image: url("Images/SidwellBackground.png"), url("SidwellBackground.png");
		background-size: cover;
		background-position: center;
		background-color: #121212;
		height: auto;
	}

	section.header1 p:nth-of-type(1){
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		font-size: 280%;
		margin-left:1em;
		margin-right:1em;
		margin-top:1em;
		margin-bottom:1em;
	}

	section.header1 p:nth-of-type(2){
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		margin-left:1em;
		margin-right:1em;
		margin-top:1.5em;
		margin-bottom:1.5em;
	}


	section.header2 {
		flex-direction: column;
		background-color: #121212;
		font-size: 110%;
		font-weight: normal;
		color: #ffffff;
	}

	section.header2 p{
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		margin-left:1em;
		margin-right:1em;
		margin-top:1em;
		margin-bottom:1em;
	}

	section.header3 {
		flex-direction: column;
		background-color: #121212;
		font-size: 90%;
		font-weight: normal;
		color: #ffffff;
	}

	section.header3 p{
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		margin-left:1em;
		margin-right:1em;
		margin-top:1em;
		margin-bottom:1em;
	}


	section.footer {
		flex-direction: column;
		background-color: #121212;
		font-size: 90%;
		font-weight: normal;
		color: #ffffff;
	}

	section.footer p{
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		margin-left:1em;
		margin-right:1em;
		margin-top:1em;
		margin-bottom:1em;
	}

	section.content {
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		background-color: #121212;
		font-size: 110%;
		font-weight: normal;
		color: #ffffff;
	}

	section.content .doc-list {
		flex: 1 0 auto;
		list-style-type: none;
		padding: 0px 0px 0px 0px;
	}

	section.content .doc-list > div#colheader
	{
		color: #000000;
		padding: 0px 0px 0px 0px;
		font-family: 'Open+Sans', sans-serif;
		font-size: 1.1em;
		margin-top: -.5em;
		margin-bottom: -2em;
		margin-left: 1em;
		margin-right: 0em;
		text-decoration: underline;
		display: flex;
	}

	section.content .doc-list > div#description
	p {
		font-style: italic;
		color:rgb(14, 10, 6);
		background-color:#bbfa78;
		margin-left: 10px;
	}

	section.content .doc-list > h3
	{
		list-style-type: none;
		display: flex;
		background-color: #c0c0c0;
	}
	
	section.content .doc-list > ul#results
	ul {
		list-style-type: none;
		display: flex;
		background-color: #c0c0c0;
	}
	
	section.content .doc-list > ul#results
	li {
		display: flex;
		padding: 0 0px;
		min-height: 2em;
		margin-top: -1em;
		margin-bottom: -1em;
		margin-left: -1em;
		margin-right: 1em;
		/*background-color: #c0c0c0;*/
	}
	
	section.content .doc-list > ul#results
	li p:nth-of-type(1) {
		flex: 0 0 45%;
		/*border: 1px dotted lightgray;*/
	}

	section.content .doc-list > ul#results
	li p:nth-of-type(2) {
		flex: 0 1 15%;
		flex-shrink:3;
		/*border: 1px dotted lightgray;*/
	}

	section.content .doc-list > ul#results
	li p:nth-of-type(3) {
		flex: 0 1 100%;
		flex-shrink:3;
		padding-left: 12px; 
		/*border: 1px dotted lightgray;*/
	}

	section.content .doc-list > ul#results
	li p:nth-of-type(3) img {
		padding-right: 6px; 
		/*border: 1px dotted lightgray;*/
	}


	section.content .doc-list > ul#results
	li:nth-child(2n) {
		/*display: flex;
		padding: 0 0px;
		min-height: 2em;
		margin-top: -1em;
		margin-bottom: -1em;
		margin-left: -1em;
		margin-right: 1em;*/
		background-color: #e0e0e0;
	}
	


	section.content .doc-list > ul#video-results
	ul {
		list-style-type: none;
		display: flex;
		background-color: #c0c0c0;
	}
	
	section.content .doc-list > ul#video-results
	li {
		display: flex;
		flex-direction: column;
		padding: 0 0px;
		min-height: 2em;
		margin-top: -1em;
		margin-bottom: -1em;
		margin-left: -1em;
		margin-right: 1em;
		border-bottom: 1px solid lightgray;
		/*background-color: #c0c0c0;*/
	}
	
	/*
	section.content .doc-list > ul#video-results
	li p {
		flex: 1 1 30%;
	}
	*/

	section.content .doc-list > ul#video-results
	li p:nth-of-type(1) {
		flex: 0 1 10%;
		flex-shrink: 3;
		/*border: 1px dotted lightgray;*/
	}

	section.content .doc-list > ul#video-results
	li p:nth-of-type(2) {
		flex: 0 1 10%;
		flex-shrink: 3;
		/*border: 1px dotted lightgray;*/
	}

	section.content .doc-list > ul#video-results
	li p:nth-of-type(3) {
		flex: 0 0 40%;
		flex-shrink: 3;
		/*border: 1px dotted lightgray;*/
	}


	@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 p {
		flex: 0 0 14%;
	}

	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
	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%;
	}