/*Copyright 2016, NCHAM, Utah State University*/


html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input {
	margin:0;
	padding:0;
}

body {
	font-family: arial, sans-serif;
	font-size: 62.5%; /*Makes the base font size of the page 10 px, but uses a percentage along with em value with the text styles (see below), allowing more flexibility*/
	background: #fff;
}


#wrap {
	width: 972px;
	position: relative;
	margin: 0 auto;
}



#container {
	display: block;
	float: left;
	width:  100%;
	margin: 100px 0 20px 10px;
	padding: 0;
}



/*Header Styles*/

#header {
	display: block;
	float: left;
	width: 100%;
	padding: 0;
	/*
	background: #fff url("img/frog.png") no-repeat 450px -50px;
	*/
}

	#header img {
		border: none;
	}
	
	#header_left {
		float: left;
		width: 50%;
		padding: 0;
	}
	
		h1 {
			float: left;
			margin: 14px 0 0 0;
			padding: 0;
		}
			
	#header_right {
		float: left;
		width: 50%;
		padding: 0;
	}
		
		/*hide the menu button in desktop mode, llc-mobile.css displays it in mobile and tablet mode*/
		#header_right h2.menu-button {
			display: none;
		}
		
		img.header_image {
			position: absolute;
			top: 42px;
			left: 826px;
		}
		
		div#subpage_section_head {
			float: right;
			margin-bottom: 5px;
		}
		
			div#subpage_section_head img {
				display: inline;
			}
			
			div#subpage_section_head h2 {
				display: inline;
				font-size: 2.4em;
				margin: 0 0 0 5px;
				padding: 0;
				color: #5378bc;
				font-weight: normal;
				text-transform: uppercase;
			}
			
			div#subpage_section_head a {
				color: #5378bc;
				text-decoration: none;
			}
		
		div#top_nav {
			display: block;
			float: right;
			width: auto;
			*width: 82%; /*targets ie7 only*/
			padding: 10px;
			background-color: #5378bc;
			margin: 0;
			clear: both;
		}
			
			#top_nav ul {
				margin: 0;
				padding: 0;
			}
			
				#top_nav ul li {
					display: inline;
					width: 25%;
					font-size: 1.6em;
					font-family: "Avenir Next", arial, sans-serif;
					color: #fff;
					border-right: 2px solid #fff;
				}
				
				#top_nav ul li.top_nav_right {
					border: none;
				} /*rightmost link on the top navigation, no border line to the right*/
				
			#top_nav a {
				color: #fff;
				text-decoration: none;	
				padding: 10px 15px;
			}


/*Main Content Styles*/

#content {
	display: block;
	float: left;
	width: 100%;
	margin: 20px 10px 0 0;
	padding: 0;
}

	#content img {
		padding: 0;
	}
	
	#content img.float-right {
		float: right;
		width: auto;
		padding: 5px;
		margin: 0 0 15px 15px;
		border: 2px solid #2c3c8e;
		background: #fff;
		clear: both;
	}
	
	
/*Footer Styles*/

#footer {
	display: block;
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

	div#social_media {
		display: block;
		width: 100%;
		float: left;
		margin-top: 25px;
	}
		
		div#social_media img {
			float: right;
			border: none;
			margin: 11px 1px 0 5px;
		}
		
		div#social_media p {
			float: left;
			margin: 11px 0 0 0;
			font-size: 1.8em;
			font-weight: 400;
			font-family: "Avenir Next", arial, sans-serif;
			padding: 2.5px 23px;
			background-color: #5679b8;
		}
		
			div#social_media p a {
				color: #fff;
				text-decoration: none;
			}
		
		div.fb-share-button {
			float: right;
			margin-top: 17px;
			margin-left: 6px;
		}
		
		
	div#bottom_nav {
		display: block;
		float: left;
		width: 100%;
		margin: 0;
		padding: 0;
		margin-top: 25px;
	}
		
		div.communities {
			text-align: left;
			width: 25%;
			float: left;
		}
		
		div.tutorials {
			text-align: center;
			width: 25%;
			float: left;
		}
		
		div.materials {
			text-align: center;
			width: 25%;
			float: left;
		}
		
		div.research {
			text-align: right;
			width: 25%;
			float: left;
		}
		
		div#bottom_nav img {
			display: inline;
			border: none;
		}
		
		div#bottom_nav p {
			display: inline;
			font-size: 2.2em;
			margin-left: 5px;
			font-weight: 500;
			font-family: "Avenir Next", arial, sans-serif;
		}
				
		#bottom_nav a {
			color: #5378bc;
			/*text-decoration: none;*/
		}
	
	
	/*begin search styles*/
		
		#search {
				float: right;
				margin-top: 11px;
			}
			
			#search label {
				display: none;
			}
			
			#q {
				background: #fff;
				font-size: 2em;
				color: #2f57a6;
				border: 2px solid #4d8bca;
				margin-top: 0px;
				padding: 0.5px;
				width: 200px;
			}
			
			div#search-field {
				border-radius: 8px;
				-moz-border-radius: 8px;
				-webkit-border-radius: 8px;
				margin-right: 1px;
			}
						
			#search-button {
				background-image: url(/img/social-media-icons/search-icon.gif);
				background-repeat: no-repeat;
				background-position: 50% 50%;
				width: 30px;
				height: 30px;
				border: none;
				float: right;
				margin-left: 6px;
				cursor: pointer;
			}
			
				#search-button span {
					display: none;
				}
		
	/*end search styles*/	
	
	
	div#footer_logos {
		float: left;
		width: 100%;
		margin: 70px 0 0 0;
	}
	
		div#footer_logos img {
			display: block;
			margin: 0;
			padding: 0;
			float: left;
			margin-right: 105px;
			border: none;
		}
		
			div#footer_logos img a {
				border: none;
			}
		
		div#footer_logos img#rightmost-logo {
			margin-right: 0;
		}
		
	div#footer_copyright {
		width: auto; 
		text-align: center;
		font-size: 1.3em;
		font-family: "Avenir Next", arial, sans-serif;
		color: #2c3c8e;
		float: left;
		margin-right: 105px;
	}
	
	div#footer_file_ext {
		width: 60%; 
		text-align: center; 
		margin-left: auto; 
		margin-right: auto; 
		display: block; 
		clear: both; 
		padding-top: 3px; 
		font-family: 'Avenir Next', arial, sans-serif; color: #2c3c8e;
	}
	
		div#footer_file_ext hr {
			color: #2c3c8e;
		}
	
	
	
/*text styles*/

#content h2 {
	color: #2f59a5;
	background-color: #22a79d;
	width: auto;
	font-size: 2.6em;
	font-weight: normal;
	margin-bottom: 20px;
	padding: 11px;
}

#content h2.blue {
	background-color: #5378bc;
	color: #fff;
}

#content h2.orange {
	background-color: #f27b35;
	color: #2a3b8f;
	text-transform: uppercase;
}


/*h2's for tutorial pages*/

#content h2.teal {
	background-color: #22a79d;
	color: #2a3b8f;
}

#content h2.light-orange {
	background-color: #f59331;
	color: #2a3b8f;
}

#content h2.light-green {
	background-color: #71bc4d;
	color: #2a3b8f;
}

#content h2.light-blue {
	background-color: #57afd0;
	/*background-color: #5797c5;*/
	color: #2a3b8f;
}


#content h2.light-yellow {
	background-color: #fec431;
	color: #2a3b8f;
}

/*end h2's for tutorial pages*/


#content_right h2 {
	color: #2f59a5;
	background-color: #22a79d;
	width: auto;
	font-size: 2.6em;
	font-weight: normal;
	margin-bottom: 20px;
	padding: 8px;
	text-align: center;
	font-weight: 500;
	font-family: "Avenir Next", arial, sans-serif;
}

#content h3 {
	font-size: 2.2em;
	font-weight: bold;
	font-family: "Avenir Next", arial, sans-serif;
	color: #5378bc;
}

	div#content h3.teal {
		background-color: #1a8c9e;
		color: #fff;
	}
	
	div#content h3.green {
		background-color: #6bb05d;
		color: #fff;
		font-weight: 500;
		text-transform: uppercase;
		padding: 15px 15px 15px 30px;
		clear: both;
	}
	
	div#content h3.light-blue {
		background-color: #5797c5;
		color: #fff;
	}
	
	div#content h3.blue {
		background-color: #5579b9;
		color: #fff;
		font-weight: 500;
		text-transform: uppercase;
		padding: 15px 15px 15px 30px;
	}
	
	div#content h3.orange {
		background-color: #f27b35;
		font-weight: 500;
		text-transform: uppercase;
		padding: 15px 15px 15px 30px;
	}
	
	div#content h3.blue a, div#content h3.green a {
		text-decoration: none;
		color: #fff;
	}
	
	div#content h3.orange a {
		text-decoration: none;
	}
	
#content h4 {
	font-size: 1.8em;
	color: #2c3b8d;
}

#content p {
	font-size: 1.9em;
	font-family: "Avenir Next", arial, sans-serif;
	color: #2c3c8e;
	margin-bottom: 20px;
}

p.center {
	text-align: center;
}

#content ul li {
	font-size: 1.9em;
	font-family: "Avenir Next", arial, sans-serif;
	color: #2c3c8e;
}

#content ul li li {
	font-size: 100%;
}/*fixes sizing issues for nested lists.  Since we're using relative font sizing (ems) the inheritance doesn't quite work right--without this rule it basically inherits the size rule twice, making text larger*/


span.bold-caps {
	font-weight: 600;
	text-transform: uppercase;
}	

span.file_ext {
	color: red;
}
	

/*table styles*/

table {
	width: 100%;
	border: none;
	border-collapse: collapse;
	margin-bottom: 8px;
}

table tr {
	background-color: #5579b9;
	border: none;
}

	table.green tr {
		background-color: #6bb05d;
	}

table tr th {
	padding: 15px 15px 15px 30px;
	color: #fff;
	font-size: 2.6em;
	font-family: "Avenir Next", arial, sans-serif;
	font-weight: 400;
	text-align: left;
	text-transform: uppercase;
	border-bottom: 8px solid #fff;
	border-top: none;
	border-left: none;
	border-right: none;
}

	th.subheadings {
		font-size: 2.2em;
		border-bottom: 2px solid #fff;
	}

table tr td {
	padding: 15px 15px 15px 30px;
	color: #fff;
	font-size: 1.9em;
	font-family: "Avenir Next", arial, sans-serif;
	border-bottom: 1px solid #fff;
	border-top: none;
	border-left: none;
	border-right: none;
	vertical-align: top;
}

	td ol li {
		margin-left: 20px;
	}

span.yellow-highlight {
	background-color: #fdc431;
	color: #2a3b8f;
	font-weight: 600;
	padding: 5px;
	text-decoration: none;
}


			



/*pseudo selectors*/

a:link {
	color: #2c3c8e;
	text-decoration: underline;
	border: none;
}

a:visited {
	color: #2c3c8e;
	text-decoration: underline;
	border: none;
}

a:hover {
	color: #2c3c8e;
	text-decoration: underline;	
	border: none;
}

a:active {
	color: #2c3c8e;
	text-decoration: underline;	
	border: none;
}






	
/*Additional Styles for Owl Carousel*/	
	
	/*styles for the h2 below the carousel*/
	
	#content h2.below {
		font-size: 1.6em;
		font-weight: bold;				
		text-transform: uppercase;
		padding: 5px 0 5px 100px;
		clear: both;
		position: relative;
		top: 265px;
		z-index: 1000;
		/*these positioning styles keep the h2 above the carousel in the html (where it should be for accessibility and semantic structure purposes), but display it below the carousel (where the designer wanted it displayed)*/
	}
	
		#content h2.below.teal {
			background-color: #1a8c9e;
			color: #fff;
		}
		#content h2.below.orange {
			background-color: #f27531;
			color: #fff;
		}
		#content h2.below.yellow {
			background-color: #faaf31;
			color: #fff;
		}
		#content h2.below.light-blue {
			background-color: #5797c5;
			color: #fff;
		}
		#content h2.below.green {
			background-color: #6bb05d;
			color: #fff;
		}
		#content h2.below.dark-blue {
			background-color: #2f59a5;
			color: #fff;
		}
	
	
	/*carousel styles*/
	
	div.carousel {
		background-color: #fff;
		overflow: hidden;
		height: 200px;
		margin-bottom: 40px;
		float: left;
	}
	
	
	div.carousel-inner-container {
		width: 175px;
		height: 200px;
		float: left;
		outline: 1px solid #999;
		outline-offset: -1px;
	}
	
		div.carousel-top-text {
			width: 100%;
			display: table-cell;
			vertical-align: top;
			height: auto;
			float: left;
			height: 65px;
			padding-top: 10px; /*65px height + 10px paddng-top totals 75px out of 200px height total*/
		}
		
			/*to have two classes on one element, all .carousel-top-text divs are styled as above, but the below styles add a second class with a different background color*/
				div.carousel-top-text.teal {
					background-color: #22a79d;
				}
				div.carousel-top-text.orange {
					background-color: #f59331;
				}
				div.carousel-top-text.yellow {
					background-color: #fec431;
				}
				div.carousel-top-text.light-blue {
					background-color: #57afd0;
				}
				div.carousel-top-text.green {
					background-color: #71bc4d;
				}
				div.carousel-top-text.dark-blue {
					background-color: #5579b9;
				}
					div.carousel-top-text.dark-blue p, div.carousel-top-text.dark-blue p a {
						color: #fff;
					}
		
			div.carousel-top-text p {
				width: 100%;
				text-align: center;
				color: #333;
				line-height: 120%;
			}
				
				div.carousel-top-text p a {
					text-decoration: none;
					color: #333;
				}
		
		div.carousel-bottom-photo {
			background-color: #22a79d;
			display: table-cell;
			vertical-align: bottom;
			height: auto;
			clear: both;
			float: left;
			height: 125px; /*height is 125px out of 200px total.  Top text div makes up the other 75px*/
			/*175w x 125h*/
		}
			
			div.carousel-bottom-photo img {
				border: none;
			}
	
	
	
		/*styles for the navigation buttons, used the info on this very helpful page for starting reference: 
		http://shhdesign.co.uk/blog/implementing-and-styling-owl-carousel/*/
			
			.owl-prev, .owl-next {
				position: absolute;
				top: 50%;
				margin-top: -25px;
				width: 50px;
				height: 50px;
				text-align: center;
				/*background-color: #fff;*/ /*makes a white square for the background*/
				/*filter: Alpha(Opacity=50);*/ /*IE7 fix*/
				filter: Alpha(Opacity=100); /*IE7 fix*/
				/*opacity: 0.8;*/  /*use this if you want the buttons to be transparent*/
				opacity: 1;
				/*font-size: 1.6em;*/ /*use this style to show the "prev" and "next" text*/
				font-size: 0em; /*makes the "prev" and "next" text invisible*/
			}
		
			.owl-next {
				right: 373.5px; /*placement for the "next" button in the middle-right of the carousel*/
				/*right: 0;*/ /*places the "next" button at the right end of the carousel*/
				background-image: url('/img/tutorial-icons/forward-arrow.png');
			}
			
			.owl-prev {
				background-image: none; /*change this if you want a "previous" button*/
			}
			
			/*hover styles for the previous and next buttons, if using a transparent button, can become opaque when hovering with this, or can change the level of opacity*/
			/*
			.owl-prev:hover, .owl-next:hover {
			    filter: Alpha(Opacity=100);*/  /*IE7 fix*/
			    /*opacity: 1;
			}
			*/