@charset "utf-8";
/* CSS Document */

/*Template Layout*/

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 0;
	color: #000;
	background-color: #999;
}


a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color:#414958;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/* ~~ skip to content for accessibility ~~ */
#skip a
{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
 
#skip a:focus
{
position:static;
width:auto;
height:auto;
} 


/* ~~the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo~~ */
.header {
	background-color: #6F7D94;
}

/* ~~ This is the layout information. ~~ 


/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

.gridContainer {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	clear: none;
	float: none;
	background-color: #FFFFFF;
}

/* header items on all pages */

#breadcrumb-box {
	margin: 0 auto;
	background-color: #3e4956;
	height: 50px;
}

.zeroMargin-mobile {
	margin-left: 0;
}


#masthead {
	width: 100%;
	background-image: url(../graphics/gna-header.jpg);
	background-repeat: no-repeat;
	background-position: center;
}

	#gna-title-m {
		margin-left: 2%;
	 	display: block;
	}
	
	#gna-title {
		display: none;
	}

#menu-container {
}

	.home-links a {
	}
	
	.home-links a:hover { 
	}

	#search-form {
	}

#content-container {
	background-color: #FFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
	overflow: hidden; /* this declaration makes the .container understand where the floated columns within ends and contain them */
}

#footer {
	background-color: #274B8B;
	width: 100%;
}

	#footer-logo {
		margin: 4% auto;
	}

	.footer-text-box {
		text-align: center;
		margin-top: 5%;
		}
	
	.footer-links {
		font: inherit;
		font-size: 1.2em;
		line-height: 1.5em;
		padding-bottom: 1em;
		color: #97A9BF;
	}
	
	.footer-links a:link {
		text-decoration: none;
		color: #FFF;
	}
	
	.footer-links a:visited {
		text-decoration: none;
		color: #FFF;
	}
	
	.footer-links a:hover {
		text-decoration: underline;
		color: #B7A98B;
	}
	
	.smaller {
		font-size: 1em;
		line-height: 1.9em;
	}

	.footer-date {
		font-size: .9em;
		font-style: oblique;
		padding-top: .6em;
		color: #97A9BF;
	}


.hide-mobile {
	display: none;
}

#left-column {
	clear: both;
	float: left;
	margin-left: 0;
	display: block;
}

#right-column {
	clear: none;
	float: left;
	display: block;
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 350px) {

.gridContainer {
	width: 100%;
	padding: 0;
	clear: none;
	float: none;
	margin: auto;
	
	background-color: #FFF;
	overflow: hidden;
}

#breadcrumb-box {
	height: 30px;
}

	.breadcrumb-links {
		font-size: .95em;
		color: #FFF;
		word-spacing: .5em;
		padding-top: .8%;
		padding-right: 2%;
		text-align: right;
	}
	
	.breadcrumb-links a:link {
		color: #FFF;
		font-weight: bold;
		text-decoration: none;
	}
	
	.breadcrumb-links a:visited {
		color: #FFF;
	}
	
	.breadcrumb-links a:hover, a:active {
		text-decoration: underline;
	}

#masthead {
	width: 100%;
	height: 105px;
}

	#gna-title-m {
		display: none;
	}
	
	#gna-title {
		margin-left: 1.5%;
		display: block;
	}

#menu-container {
	margin: 0 auto;
	background-color: #3e4956;
	height: 40px;
	clear: both;
}

	#search-form {
		margin-right: 2%;
		float: right;
		margin-top: .5em;
	}
	
	.inputtext {
		height: 1em;
	}
	
.hide-tablet {
	display: none;
}

.hide-mobile {
	display: block;
}

.zeroMargin-tablet {
	margin-left: 0;
}

#footer {
	background-color: #3e4956;
	overflow: visible;
	clear: both;
}
	
	#footer-logo {
		float: right;
		margin-top: -5%;
	}

	.footer-text-box {
		margin: 2% 3% 0% 3%;
		text-align: left;
		}
	
	.footer-links {
		padding-bottom: .7em;
		font-size: 1.1em;
		line-height: 1.3em;
		padding-bottom: .7em;
	}

	.footer-links a:link {
	}
	
	.footer-links a:hover {
	}
	
	.smaller {
		font-size: .9em;
	}	
	
	.footer-date {
	}

#left-column {
	clear: both;
	float: left;
	margin-left: 0;
	display: block;
}

#right-column {
	clear: none;
	float: left;
	display: block;
}
	
}



/* Desktop Layout: 769px to a max of 1050px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
	width: 89%;
	max-width: 1050px;
}

#breadcrumb-box {
}

	.breadcrumb-links {
	}
	
	.breadcrumb-links a:link {
	}
	
	.breadcrumb-links a:visited {
	}
	
	.breadcrumb-links a:hover, a:active {
	}

#masthead {
}

	#gna-title-m {
		display: none;
	}

	#gna-title {
		display: block;
	}

#menu-container {
}

#footer {
}

#footer-logo {
	}

	.footer-text-box {
		}
	
	.footer-links {
	}
	
	.smaller {
	}
	
	.footer-links a {
	}
	
	.footer-links a:hover {
	}
		
	.smaller {
	}
	
	.footer-date {
	}

.hide-mobile {
}

.hide-tablet {
}

.hide-desktop {
	display: none;
}

#left-column {
	clear: both;
	float: left;
	margin-left: 0;
	display: block;
}

#right-column {
	clear: none;
	float: left;
	display: block;
}


}



/* Navigation */

#nav
{
	width: 60em; /* 1000 */
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	position: relative;
	overflow: visible;
    	z-index: 1000;
}

	#nav > a
	{
		display: none;
	}

	#nav li
	{
		position: relative;
		list-style:none;
	}
		#nav li a
		{
			color: #fff;
			display: block;
			text-decoration: none;
		}
		#nav li a:active
		{
			background-color: #3e4956;!important;
		}

	#nav span:after
	{
		width: 0;
		height: 0;
		border: 0.313em solid transparent; /* 5 */
		border-bottom: none;
		border-top-color: #858f9c;
		content: '';
		vertical-align: middle;
		display: inline-block;
		position: relative;
		right: -0.313em; /* 5 */
	}

	/* first level */

	#nav > ul
	{
		height: 40px; /* 60 */
		background-color: #3e4956;
;
	}
		#nav > ul > li
		{
			width: 20%;
			height: 100%;
			float: left;
		}
			#nav > ul > li > a
			{
				height: 100%;
				font-size: 1em; /* 24 */
				line-height: 2.8em; /* 60 (24) */
				text-align: center;
			}
				#nav > ul > li > a
				{
					border-right: 1px solid #5f6c7d;
				}
				#nav > ul > li:hover > a,
				#nav > ul:not( :hover ) > li.active > a
				{
					background-color: #5b6879;
				}


		/* second level */

		#nav li ul
		{
			background-color: #336699;
			display: none;
			position: absolute;
			top: 100%;
		}
			#nav li:hover ul
			{
				display: block;
				left: 0;
				right: 0;
			}
				#nav li:not( :first-child ):hover ul
				{
					left: -1px;
				}
				#nav li ul a
				{
					font-size: 1em; /* 20 */
					border-top: 1px solid #fff;
					padding: 0.75em; /* 15 (20) */
				}
					#nav li ul li a:hover,
					#nav li ul:not( :hover ) li.active a
					{
						background-color: #5f6c7d;
					}


@media only screen and ( max-width: 62.5em ) /* 1000 */
{
	#nav
	{
		width: 100%;
		position: static;
		margin: 0;
	}
}

@media only screen and ( max-width: 350px )
{
	html
	{
		font-size: 75%; /* 12 */
	}

	#nav
	{
		position: relative;
		top: auto;
		left: auto;
	}
		#nav > a
		{
			width: 3.125em; /* 50 */
			height: 3.125em; /* 50 */
			text-align: left;
			text-indent: -9999px;
			background-color: #3e4956;
			position: relative;
		}
			#nav > a:before,
			#nav > a:after
			{
				position: absolute;
				border: 2px solid #fff;
				top: 35%;
				left: 25%;
				right: 25%;
				content: '';
			}
			#nav > a:after
			{
				top: 60%;
			}

		#nav:not( :target ) > a:first-of-type,
		#nav:target > a:last-of-type
		{
			display: block;
		}


	/* first level */

	#nav > ul
	{
		height: auto;
		display: none;
		position: absolute;
		left: 0;
		right: 0;
	}
		#nav:target > ul
		{
			display: block;
		}
		#nav > ul > li
		{
			width: 100%;
			float: none;
		}
			#nav > ul > li > a
			{
				height: auto;
				text-align: left;
				padding: 0 0.833em; /* 20 (24) */
			}
				#nav > ul > li:not( :last-child ) > a
				{
					border-right: none;
					border-bottom: 1px solid #cc470d;
				}


		/* second level */

		#nav li ul
		{
			position: static;
			padding: 1.25em; /* 20 */
			padding-top: 0;
		}
}


/* Mobile Layout: 480px and below. */

.column-30 {
	width: 100%;
	height: auto;
}

.column-50 {
	width: 100%;
	height: auto;
}

.column-70 {
	width: 100%;
	height: auto;
}

.column-80 {
	width: 100%;
	height: auto;
}

.column-100 {
	width: 100%;
	clear: none;
}

.left-pad-6 {
}

.image-container {
	margin: 0 auto;
	padding: 1% 3% 0 3%;
}

	.image-container img {
		border: thin solid #CCC;
	}

.line {
	border-top: thin solid #DBDBDB;
	margin: 0 auto 10% auto;
	width: 90%;
}

.text-container {
	padding: 0 4% 0 4%;
	margin: 0 auto;
	width: 80%;
	text-align: left;
}

	.text-container h1 {
		font-size: 1.8em;
		line-height: 1.3em;
		color: #000;
	}
	
	.text-container h2 {
		font-size: 1.5em;
		color: #000;
		padding-top: .8em;
	}
	
	.text-container p {
		font-size: 1.2em;
		line-height: 1.7em;
		padding-bottom: .9em;
	}
	
	.text-container li { 
		font-size: 1.2em;
		line-height: 1.7em;
		padding-bottom: 1.5em;
	}
	
	.text-container img {
		margin: 0 auto;
		padding: 1% 1% 4% 1%;
	}
	
.loop {
	background-color: #EEE;
	margin: 2% auto 4% auto;
	font-size: 1.2em;
	font-weight: bold;
	padding: .8em 0;
	text-align: center;
	width: 100%;
}

	
.loop a:visited, .loop a:link {
 		color: #426E9F;
		text-decoration: underline;
		margin-top: 2%;
		margin-bottom: 4%;
		padding: .8em 1.5em;
	}
	
	
	.loop a:hover {
		color: #96845C;
	}	

.alert-message {
	width: 100%;
	background-color: #FFC;
	text-align: center;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
}
	
	.alert-message p {
		font-size: 1.1em;
		color: #000;
		padding: 0 10%;
		margin-bottom: 1.5em;
	}
	
	.alert-title {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.5em;
		font-weight: bold;
		color: #900;
		padding-top: 1em;
	}
    
	.label-heading {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.2em;
		font-weight: bold;
		line-height: 2em;
	}
	
	
	
/* Tablet Layout: up to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 350px) {

.column-30 {
	width: 30%;
	float: left;
}

.column-50 {
}

.column-70 {
	width: 70%;
	height: auto;
	float: left;
}

.column-80 {
	width: 91.5%;
	height: auto;
	float: left;
}

.column-100 {
	float: left;
}

.left-pad-6 {
	padding-left: 6%;
}

.image-container {
	margin: 3% auto 0 auto;
	padding: 0;
	max-width: 680px;
	max-height: 550px;
}

.line {
	margin: 0 auto 4% auto;
}

.text-container {
	width: 90%;
	margin: 2% auto 1% auto;
	text-align: left;
}

	.text-container h1 {
	}
	
	.text-container h2 {
	}
	
	.text-container p {
	}
	
	.text-container img {
	}
	
	.label-heading {
	}

.indent-box {
	padding: 0 0 0 3%;
	margin: 0 0 0 6%;
	clear: none;
    }
}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.column-30 {
}

.column-50 {
	width: 50%;
	float: left;
}

.column-70 {
}

.column-80 {
	width: 91.5%;
	height: auto;
	float: left;
}

.column-100 {
	width: 100%;
	clear: none;
}

.left-pad-6 {
}

.indent-box {
}

	.alert-message {
}
	
	.alert-message p {
	}
	
	.alert-title {
	}
	
	.label-heading {
	}

}


/* Mobile Layout: 480px and below. */

h1 {
	font-size: 1.5em;
	line-height: 1.2em;
    padding-top: 1em;
}

h2 { font-size: 1.3em; }
h3 { font-size: 14px; }
h4 { font-size: 13px; }
h5 { font-size: 12px; }

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	color: #333;
	padding-bottom: 1em;
}

strong { font-weight: bold; }


a:link, a:visited {	color: #3D509E; }
a:hover, a:active {	color: #96845C; }

a.lighten {
    display: inline-block;
    background-color: #FFF;
    padding: 0;
}

a.lighten img {
    display: block;

    -webkit-transition: all 0.1s linear;
       -moz-transition: all 0.1s linear;
        -ms-transition: all 0.1s linear;
         -o-transition: all 0.1s linear;
            transition: all 0.1s linear;
}

a.lighten:hover img {
    opacity: 0.5;
}

.text {
	margin-top: 0;
	padding-bottom: 1em;
	padding-left: 7%;
}

.text ul {
	list-style: square inside;
	padding-bottom: 1em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 2em;
	color: #333;
}

.text li {
}

	
	
/* Tablet Layout: up to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 350px) {

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 6%;
	padding-left: 6%; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}

h1 { font-size: 1.9em; }
h2 { font-size: 1.3em; }

.list {
	margin-top: 0;
	padding-right: 6%;
	padding-left: 10%;
	list-style: none;
}

.list-bullet {
	padding-bottom: 1.2em;
	margin-bottom: 1.2em;
	border-bottom: thin solid #E7E5E5;
}

.line-height-adjust {
	padding-top: .5em;
}

.column-100 h1, .column-100 p {
	margin-top: 0;
	padding-right: 6%;
	padding-left: 3%;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{
	border: #3e4956 !important;
	background: #3e4956 !important;
}

}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
	
}


/*Responsive Table*/

table { 
  width: 100%; 
  border-collapse: collapse;
  margin-left: 46px; 
  
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #87aaae; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table.responsive, .responsive thead, .responsive tbody, .responsive th, .responsive td, .responsive tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.responsive thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.responsive tr { border: 1px solid #ccc; }
	
	.responsive td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.responsive td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	.responsive td:before { content: attr(data-table-header); }
}



/*Filter Grid*/

/*====================================================
	- HTML Table Filter Generator v1.6 
	elements and classes
	- edit classes below to change filter grid style
=====================================================*/

.fltrow{ /* filter grid row appearance */
	height:30px;
}

.btnflt{ /* button appearance */
	font-size:11px;
	margin:0 2px 0 2px;
	padding:0 1px 0 1px;
	text-decoration:none;
	color: #fff;
	background-color:#666;
}

.flt{ /* filter (input) appearance */
	border:1px inset #ccc; 
	margin:0;
	width:100%;
}

.flt_s{ /* small filter (input) appearance */
	background-color:#f4f4f4;
	border:1px inset #ccc; 
	margin:0;
	width:80%;
}

.inf{ /* div containing left, middle and right divs */
	clear:both; width:auto; height:20px; 
	background:#f4f4f4; font-size:11px; 
	margin:0; padding:1px 3px 1px 3px; 
	border:1px solid #ccc;
}
.ldiv{ /* left div */
	float:left; width:30%; position:inherit; 
}
.mdiv{ /* middle div */
	float:left; width:30%; position:inherit; text-align:center; 
}
.rdiv{ /* right div */
	float:right; width:30%; position:inherit; text-align:right; 
}
.loader{ /* loader appearance */
	position:absolute; padding: 15px 0 15px 0;
	margin-top:7%; width:200px; left:40%; 
	z-index:1001; font-size:14px; font-weight:bold;
	border:1px solid #666; background:#f4f4f4; 
	text-align:center; vertical-align:middle;
}
div.mdiv select{ height:20px; }/*paging drop-down list*/
div.inf a{ color:#CC0000; }/*link appearence in .inf div*/
div.inf a:hover{ text-decoration:none; }/*link appearence in .inf div*/
.tot{ font-weight:bold; }/*rows counter*/
.even{ background-color:#fff; }/*row bg alternating color*/
.odd{ background-color:#f4f4f4; }/*row bg alternating color*/


/*Table 2
/* For mobile devices */

.table-box {
	background-color: #FFF;
	width: 90%;
	margin: 3em auto;
	padding-top: 1.1em;
	}
	
	.table-box h2 {
		font-size: 1.3em;
		margin-bottom: 0;
	}
	
	.table-box p {
		font-size: 1.1em;
	}

table.large { 
	border: thin solid #CCC;
	border-collapse: collapse;
	margin: 4% auto 5% auto;
	width: 60%;
}

	table.large th { 
		background-color: #415B7C;
		font-weight: bold;
		font-size: 1.2em;
		color: #FFF;
		text-align: center;
		height: 2.2em;
	}
	
	table.large td, table.large th { 
		padding: 3px;
		text-align: center;
	}
	
	table.large td { 
		background-color: #FFF;
		text-align: center;
		padding-bottom: 1em;
	}
	
	table.large td img { 
		padding: 6% 0;
	}

table.imagery { 
		border: thin solid #CCC;
		border-collapse: collapse;
		margin: 3% auto 4% auto;
		width: 60%;
}

	table.imagery th { 
		background-color: #415B7C;
		font-weight: bold;
		font-size: 1.2em;
		color: #FFF;
		text-align: center;
		height: 2em;
	}
	
	table.imagery td, table.imagery th { 
		padding: 3px;
	}
	
	table.imagery td { 
		background-color: #FFF;
		text-align: center;
		padding-bottom: 1em;
	}
	
	table.imagery td img { 
		padding: 6% 0 6% 0;
	}

.table-wrapper {
	margin: 0 auto 4% auto;
	display: inline-block;
}
	
table.column { 
	border: thin solid #CCC;
	border-collapse: collapse;
	margin: 0 auto 0 auto;
	width: 100%;
}

	table.column th { 
		background-color: #415B7C;
		font-weight: bold;
		color: #FFF;
		text-align: center;
		padding: 6% 0;
	}
	
	table.column td, table.column th {
		border: thin solid #CCC;
		border-collapse: collapse;
	}
	
	table.column td { 
		text-align: center;
		padding: 1em .3em 2em .3em;
		background-color: #FFF;
	}
	
	table.column td img { 
		padding: 6% 0 10% 0;
	}

table.full {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	margin: 0 auto 5%; auto;
	border-collapse: collapse;
	width: 90%;
}

	table.full th {
		border: solid thin #CCC;	
		background-color: #717171;
		padding: 1.5%;	
		font-size: 1.1em;	
		color: #FFF;
	}

	table.full td {
		border: solid thin #999;
		padding: 1.5%;
	}



/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout.  */

@media only screen and (min-width: 769px) {

.table-box {
	width: 100%;
	}
	
/* For image tables with just three channels */

table.large { 
		display: inline-block;
		margin: 2%;
		width: 40%;
}

	table.large th {
		font-size: 1.3em;
	}
	
	table.large td, table.large th { 
		width: 50%;
		padding: 0 10%;
	}
	
	table.large td { 
	}
	
	table.large td img { 
	}

table.imagery { 
	display: inline-block;
	width: 30%;
	margin: 1% 0 3% 0;
}

table.imagery th {
	font-size: 1.1em;
	}
	
	table.imagery td {
		line-height: 1.5em;
	}
	
	table.imagery td, table.imagery th { 
		width: 30%;
	}
	
	table.imagery td img { 
	}

.table-wrapper {
	display: inline-block;
	margin: .3%;
}

table.column { 
}

	table.column th { 
		font-size: 1.1em;
	}
	
	table.column td, table.column th {
	}
	
	table.column td { 
		padding: 1em .6em 2em .6em;
	}
	
	table.column td img { 
	}

table.full {
}

	table.full th {
	}

	table.full td {
	}
	
}
*/

/*gna-tables*/

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 350px) {


	
}



/* Desktop Layout: 769px to a max of 1050px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {


table.prod {
	color: #929292;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 1em;
	color: black;
	border: 1px solid #c0c0c0;
	border-collapse:collapse;
	margin: 0 6%;
}

	table.prod td {
		padding: .5em;
		border: 1px solid #c0c0c0;
	}

}


/*gna Text Tables*/

@charset "UTF-8";
/* CSS Document */



/* Mobile Layout: 480px and below. */

h1 {
	font-size: 1.5em;
	line-height: 1.2em;
    padding-top: 1em;
}

h2 { font-size: 1.3em; }
h3 { font-size: 14px; }
h4 { font-size: 13px; }
h5 { font-size: 12px; }

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	color: #333;
	padding-bottom: 1em;
}

strong { font-weight: bold; }


a:link, a:visited {	color: #3D509E; }
a:hover, a:active {	color: #96845C; }

a.lighten {
    display: inline-block;
    background-color: #FFF;
    padding: 0;
}

a.lighten img {
    display: block;

    -webkit-transition: all 0.1s linear;
       -moz-transition: all 0.1s linear;
        -ms-transition: all 0.1s linear;
         -o-transition: all 0.1s linear;
            transition: all 0.1s linear;
}

a.lighten:hover img {
    opacity: 0.5;
}

.text {
	margin-top: 0;
	padding-bottom: 1em;
	padding-left: 7%;
}

.text ul {
	list-style: square inside;
	padding-bottom: 1em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 2em;
	color: #333;
}

.text li {
}

	
	
/* Tablet Layout: up to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 6%;
	padding-left: 6%; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}

h1 { font-size: 1.9em; }
h2 { font-size: 1.3em; }

.list {
	margin-top: 0;
	padding-right: 6%;
	padding-left: 10%;
}
	
.list2 {
	margin-top: 0;
	padding-right: 6%;
	padding-left: 10%;
}

.list-bullet {
	padding-bottom: 1.2em;
	margin-bottom: 1.2em;
	border-bottom: thin solid #E7E5E5;
}
	
.disc {
	margin-bottom: 1em;
	list-style: disc;
}

.line-height-adjust {
	padding-top: .5em;
}

.column-100 h1, .column-100 p {
	margin-top: 0;
	padding-right: 6%;
	padding-left: 3%;
}

}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
	
}

/*Accordion CSS*/

.accordion {
	margin: 130px 0 0 31px;
	max-width: 985px;
	width: auto;
padding-right: 10px;
}
.accordion input {
	display: none;
}
.box {
	position: relative;
	background: white;
    height: 64px;
    transition: all .15s ease-in-out;
}
.box::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
}
header.box {
	background: #87aaae;
	z-index: 100;
	cursor: initial;
	box-shadow: 0 -1px 0 #e5e5e5,0 0 2px -2px rgba(0,0,0,.12),0 2px 4px -4px rgba(0,0,0,.24);
}
header .box-title1 {
	font-weight: normal;
	font-size: 16pt;
	color: white;
	cursor: initial;
	margin:0 0 20px 20px;
}
.box-title {
	width: calc(100% - 40px);
	min-height: 64px;
	line-height: 64px;
	padding: 0 0 0 20px;
	display: inline-block;
	cursor: pointer;
	-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.box-content {
	width: calc(100% - 40px);
	padding: 30px 20px;
	font-size: 11pt;
	color: rgba(0,0,0,.54);
	display: none;
}
.box-close {
	position: absolute;
	height: 64px;
	width: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
	display: none;
}
input:checked + .box {
	height: auto;
}
input:checked + .box .box-title {
	border-bottom: 1px solid rgba(0,0,0,.18);
}
input:checked + .box .box-content,
input:checked + .box .box-close {
	display: inline-block;
}
.arrows section .box-title {
	padding-left: 44px;
	width: calc(100% - 64px);
}
.arrows section .box-title:before {
	position: absolute;
	display: block;
	content: '\203a';
	font-size: 18pt;
	left: 20px;
	top: -2px;
	transition: transform .15s ease-in-out;
	color: rgba(0,0,0,.54);
}
input:checked + section.box .box-title:before {
	transform: rotate(90deg);
}
.madeby {
	position: fixed;
	bottom: 4px;
	left: 4px;
	color: rgba(0,0,0,.38);
	font-size: 12pt;
}