/* 

MAIN STYLESHEET
AUTHOR : RENEE CARMICHAEL
YEAR : 2014 

*/

/* GENERAL DEFINITIONS ----------------------------------------- */

body{
	margin:0 0;
	font-family:'Josefin Sans', sans-serif;
	font-weight: 300;
}

.box{ 
	float: left; 
}

#root{ 
	margin: 0 auto; 
}

h1{
	font-size: 20px;
	font-weight: 200;

}


h1 {
	font-family:'Josefin Sans', sans-serif;
	font-size:15px;
	text-transform:uppercase;
}

h2 {
	font-family:'Josefin Sans', sans-serif;
	font-size:14px;
	text-transform:uppercase;
	font-weight: 300;
}

h3 {
	font-family:'Josefin Sans', sans-serif;
	font-size:12px;
	text-transform: none;
}

.clear{
	clear:both;
}

/* ------ FONT FOR ICONS -----*/

.entypo-class {
	display: inline-block;
	font-family: 'entypo';
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 0;
	-webkit-font-smoothing: antialiased;
	font-size: 240%;
	background:transparent;
	vertical-align:middle;
}


/* MAIN STRUCTURE ELEMENTS ----------------------------------------- */

/* ----------------------------------------- */
/*	HEADER 									 */
/* ----------------------------------------- */

#header { 
	width: 100%;
	border-bottom:1px solid #00cc99;
	height:65px;
	margin-bottom: 20px;
}

#project-title {
	float:left;
	font-size:27px;
	padding-left:40px;
	padding-top:20px;
}

#project-title a {
	text-decoration:none;
	color:#000;
}

#project-title a:hover {
	color:#00cc99;
}

#main-nav{
	float:left;
	list-style-type: none;
	font-size:14px;
	text-transform: uppercase;
	padding-top:15px;
	position:relative;
	padding-left:20px;
}

#main-nav li {
	display: inline;	
}

#main-nav li a {
	text-decoration: none;
	padding: .2em 2em;
	color: #000;
}

#main-nav li a:hover {
	color:#00cc99;
}

#main-nav li a:active {
	color:#00cc99;
}

#small-390-break {
	display: none;
}

#project-logo {
	float:right;
	height:75px;
}

#right-side-nav{
	float:right;
	list-style-type:none;
	font-size:10px;
	text-transform:uppercase;
	padding-right:10px;
	text-align:right;
	padding-top:10px;
}

#right-side-nav li a {
	text-decoration:none;
	color:#000;
}

#right-side-nav li a:hover {
	color:#00cc99;
}

#right-side-nav li a:hover {
	color:#00cc99;
}

/* styles the hide/show information button */
#sub-header {
	width:100%;
	overflow:hidden;
}

/*moves the right side nav to the bottom when screen size is small */
#sub-footer {
	display:none;
}

/* ----------------------------------------- */
/*	IMAGE CONTAINER 						 */
/* ----------------------------------------- */


#image-container { 
	width: 70%;
	margin-bottom:20px;
}

/*styles svg when inline and makes it responsive to screen sizes */
#svg-map {
	position: relative;
	padding-bottom: 5%;
	vertical-align:middle;
	padding-right:10px;
	margin:0 auto;
}

#svg3089 {
	margin-top:0 auto;
	float:left;
}

#svg-map-exact {
	position: relative;
	padding-bottom:5%;
	vertical-align:middle;
	padding-right:10px;
	margin:0 auto;
	display:none;
}

#svge03 {
	margin-top:0 auto;
	float:left;
}

#map-title{
	text-align: center;
}

/*------ switches between image views (e.g. exact or abstract) */
#toggle-image {
	float:right;
	margin-right:50px;
}

#toggle-image a {
	padding-right:10px;
	text-decoration:none;
	color:#000;
	font-size:10px;
}

/* ----------------------------------------- */
/*	RIGHT COLUMN    						 */
/* ----------------------------------------- */

#right-column{ 
	width: 30%; 
}

#meta-data{
	border: 1px solid #00cc99;
	padding-top:5px;
	text-size:13px;
	margin-right:20px;
	margin-top:10px;
	clear:both;
	height: 300px;
}

#meta-data-title {
	text-align:center;
}


#meta-data-content {
	padding:10px;
	height:226px;
	overflow-y:scroll;
}

.meta-data-text{
	font-size: 12px;
	text-transform: none;
	margin-top:0;
}

#history{
	margin-right:20px;
	margin-top:20px;
	text-align:left;
	
}

#history-title {
	text-align:center;
}

/*displays and moves right column to bottom on smaller screen sizes  */
#right-column-bottom{
	display: none;
}

/*---- 'show / hide information' */
#button-hide {
	float:right;
	font-size:10px;
	margin-right:25px;
	list-style-type:none;
	text-decoration:none;
	color:#000;
}

/* ----------------------------------------- */
/*	FOOTER          						 */
/* ----------------------------------------- */

#footer{ 
	width: 100%; 	
}

ul#secondary-nav{
	display:none;
	list-style-type: none;
	border-top:1px solid #00cc99;
	margin-top:60px;
	margin-bottom:60px;
	float:right;
	font-size:10px;
	padding-top:10px;
}

ul#secondary-nav li{
	float:left;
	margin-right: 10px;
}

ul#secondary-nav li a{
	text-decoration:none;
	color:#000;
}

ul#secondary-nav li a:hover {
	color:#00cc99;
}

#project-logo-2 {
	height:75px;
}

/*----------------------------------------------*/
/* ADVANCED SEARCH RESULTS OVERLAY              */
/*----------------------------------------------*/

/*Eliminates padding, centers the div */

body, html {
padding: 0;
margin: 0;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display:block;
width:49px;
height:49px;
box-sizing: border-box;
background: white;
color: black;
text-decoration:none;
text-align:center;
position: absolute;
top: -80px;
left: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
border:1px solid #00cc99;
}

/* Provides part of the "X" to eliminate overlay from the close link */

a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 23px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate overlay from the close link */

a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 23px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}

.lightbox-target:target a {
max-height: 100%;
max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
top: 0px;
}

/* styles the overlay content 'advanced search' box */

#advanced-search {
	border: 1px solid #00cc99;
	margin-top: 65px!important;
	margin-bottom: 20px!important;
	margin: 0 auto;
	background-color:#fff;
	width:55%;
	height:85%!important;
	overflow: scroll;
}

#search-title {
	margin-top:20px!important;
	margin-bottom:20px!important;
	width:50%;
	text-transform:uppercase;
	margin: 0 auto;
	border:1px solid #00cc99;
	text-align:center;
	padding-top:5px;
	padding-bottom:5px;	
}

#advanced-search-content {
	text-align:left;
	padding-left:30px;
}

/* Creates the navigation drop down menu and filters and styles them when needed */

#filter-button-nav {
	margin-bottom:10px;
	font-size:13px;
	list-style:none;
}

#filter-button-nav-option1 {
	margin-bottom:10px;
	font-size:13px;
	list-style:none;
}

#filter-button-nav-option2 {
	margin-bottom:10px;
	font-size:13px;
	list-style:none;
}

#filter-button-nav ul {
	list-style:none;
}

#filter-button-nav-option1 ul {
	list-style:none;
}

#filter-button-nav-option2 ul {
	list-style:none;
}

#filter-button-nav li {
	list-style: none;
}
#filter-button-nav-option1 li {
	list-style: none;
}

#filter-button-nav-option2 li {
	list-style: none;
}

#filter-button-nav li a {
	color:#000;
	text-decoration:none;
	display:block;
}

#filter-button-nav-option1 li a {
	color:#000;
	text-decoration:none;
	display:block;
}

#filter-button-nav-option2 li a {
	color:#000;
	text-decoration:none;
	display:block;
}

#filter-button-nav li a:hover {
	color:#00cc99;
}

#filter-button-nav-option1 li a:hover {
	color:#00cc99;
}

#filter-button-nav-option2 li a:hover {
	color:#00cc99;
}

/* filter button hover */
#filter-button-nav li:hover, #filter-button-nav-option1 li:hover, #filter-button-nav-option2 li:hover {
	@include transition(background, 0.2s);
	background: #fff;
	cursor: pointer;
	color:#00cc99;
}
 
/* the drop down menu list */
#filter-button-nav ul li ul, #filter-button-nav-option1 ul li ul, #filter-button-nav-option2 ul li ul {
	border:1px solid #00cc99;
	visibility: hidden;
	width: 90px;
    transition: visibility 0.65s ease-in;
    margin-top:10px;
	left: 0;
	z-index: 999!important;
	padding-top:10px;
	padding-bottom:5px;
	margin-bottom:10px;
	padding-right:5px;
	padding-left:15px;
	text-align:center;
}


/* Styles the individual list items in dropdown */
#filter-button-nav ul li ul li, #filter-button-nav-option1 ul li ul li, #filter-button-nav-option2 ul li ul li  {
	clear: both;
	padding-bottom:5px;
	width:75px;
}



/* adds menu list on hover */
#filter-button-nav ul li:hover > ul,
#filter-button-nav ul li ul:hover {
   visibility: visible;
}

/* adds menu list on hover */
#filter-button-nav-option1 ul li:hover > ul,
#filter-button-nav-option1 ul li ul:hover {
   visibility: visible;
}

/* adds menu list on hover */
#filter-button-nav-option2 ul li:hover > ul,
#filter-button-nav-option2 ul li ul:hover {
   visibility: visible;
}

#filter-button-nav ul li ul li:hover {
	background: #fff;
}

#filter-button-nav-option1 ul li ul li:hover {
	background: #fff;
}

#filter-button-nav-option2 ul li ul li:hover {
	background: #fff;
}

ul.dropdown{
	padding-left: 20px;
	background-color:#ffffff!important;
	z-index: 100!important;
}

ul.dropdown li a {
	background-color:#ffffff!important;
	z-index: 100!important;
}

.filter{
	height:20px;
	margin-top:15px;
	padding-left:0;
}

.filter li{
	height: 20px;
	width:20%;
}

.filter ul {
	margin-top:0px;
}

/*---- STYLES THE SEARCH BY TEXT INPUT ------*/

form {
	width:inherit;
}

input {
	font-size:15px;
	margin-top:10px;
}

input.text {
	border:1px solid #00cc99;
	width:40%;
	font-family:'Josefin Sans', sans-serif;
	height:26px;
	padding-left:5px;
	float: left;
	box-shadow: none;	
	
}

input.search {
	font-family: 'entypo';
	font-size:xx-large;
	border: none;
	background-color: #ffffff;
	width: 25px;
	height: 25px;
	padding: 0;
	margin: 0;
	float: left;
	margin-top: -2px;
	margin-left: 1px;
}

/*centers magnifying glass icon in fireforx */
@-moz-document url-prefix() {
    input.search {
    font-family: 'entypo';
	font-size:xx-large;
	border: none;
	background-color: #ffffff;
	width: 27px;
	height: 27px;
	padding: 0;
	margin: 0;
	float: left;
	margin-top: -5px;
	margin-left: 1px
    }
}

input.search:hover {
	color:#00cc99;
}

#button-container {
	float: left;
	display:inline;
	border: 1px solid #00cc99;
	overflow: hidden; 
	width: 28px!important;
	height: 28px!important;
	margin-top:10px;
	margin-left:5px;
}


/*----- FILTER STYLES ---- CHECKBOXES AND FILTER OPTIONS ------*/

/*styles the 'filter by..' text once a filter is added */
.filter-1 {
	padding-left:1px;
	height:20px;
	margin:0;
	margin-top:35px;
}

.filter-1 li {
	height: 20px;
	width:20%;
}

.filter-1 ul {
	margin-top:0px;
	margin:0;
}

/* styles the filter options once a filter is chosen */
#filter-option {
	margin-right:10px;
	padding-left:30px;
	display:none;
}

#filter-option-2 {
	margin-right:10px;
	padding-left:30px;
	display:none;
}

.check-container {
	float:left;
	margin-right:25px;
	margin-bottom:10px;
}

/* styles the checkboxes */
input[type="checkbox"] {
	display:none;
}

input[type="checkbox"] + label span {
	display:inline-block;
	width:12px;
	height:12px;
	border:1px solid #00cc99;
	vertical-align:middle;
	cursor:pointer;
	margin: -1px 4px 0 0;	
}

input[type="checkbox"]:checked + label span {
	background-color:#00cc99;
}

#filter-button-nav-2 {
	margin-bottom:10px;
	font-size:13px;
	list-style:none;
	display:none;
}

#filter-button-nav-2 ul {
	list-style:none;
}

#filter-button-nav-2 li {
	list-style: none;
}

#filter-button-nav-3 {
	margin-bottom:10px;
	font-size:13px;
	list-style:none;
	display:none;
}

#filter-button-nav-3 ul {
	list-style:none;
}

#filter-button-nav-3 li {
	list-style: none;
}

/* styles the apply filters button */
#apply {
	margin-right:20px;
	text-decoration:none;
	margin-bottom:20px;
	border:1px solid #00cc99;
	width:20%;
	text-align:center;
	padding:10px;
	float:right;
	z-index: -10!important;
}

#apply-1 {
	display:none;
	margin-right:20px;
	text-decoration:none;
	margin-bottom:20px;
	border:1px solid #00cc99;
	width:20%;
	text-align:center;
	padding:10px;
	float:right;
	z-index: -10!important;
}

#apply a {
	text-decoration:none;
	color:#000;
}

#apply-1 a {
	text-decoration:none;
	color:#000;
}

#apply a:hover {
	color:#00cc99;
}

#apply-1 a:hover {
	color:#00cc99;
}

#apply-text {
	width:80%;
	float:left;
	margin:0;
}


/* RESPONSIVE AND ADAPTATION --------------------------------------------------------------------------------------------------------------------- */

/* Browser Small 1 (1065px) -- moves the righ column to the bottom */
@media only screen and (max-width: 1065px) {
	#right-side-container {
		display: none;
	}
	
	#header { 
		width: 100%; 
		height:70px;
	}
	
	#image-container { 
		width: 100%!important;
		
	}
	
	#main-container {
		width:100%!important; 
	}
	
	#right-column-bottom { 
		display: block;
		margin-top:20px;
		width: 100%;  
	}
	
	#right-column{
		display: none!important;
	}
	
	#meta-data {
		margin:0 auto;
		width:70%;
	}
	
	#meta-data-content {
	padding:10px;
	height:226px;
	overflow-y:scroll;
	}
	
	#history {
		margin:0 auto;
		width:70%;
	}
	
	#footer { 
		width: 100%;
		
	}
	
	ul#secondary-nav{
		display: inherit;
	}
	
	#button-hide {
		float:left;
		margin-left:145px;
	}
	
	#sub-header{
		display: none;
	}
	
	input.text {
	width:60%;
	font-family:'Josefin Sans', sans-serif;
	}
	
	#apply {
	margin-right:20px;
	text-decoration:none;
	margin-bottom:20px;
	border:1px solid #00cc99;
	width:23%;
	text-align:center;
	padding:10px;
	float:right;
	}
	
	#apply-1 {
	width:23%;
	}
	
	
	.filter li{
	height: 20px;
	width:50%;
	}
	#toggle-image {
	float:right;
	margin-right:55px;
}
			
}




/*tablet landscape 1024x768 */
@media only screen and (max-width: 1024px) {
	#header { 
		width: 100%; 
		height:70px;
	}
	
	#apply-1 {
	width:28%;
	}
	
	#apply {
		width:28%;
	}
	#toggle-image {
	float:right;
	margin-right:50px;
	}
}


/* Browser Small 2 (863px) */
@media only screen and (max-width: 863px) {
	#main-nav{
		margin-top: 14px;
	}
	
	#header{
		height: 70px;
	}
	
	#apply {
	margin-right:20px;
	text-decoration:none;
	margin-bottom:20px;
	border:1px solid #00cc99;
	width:30%;
	text-align:center;
	padding:10px;
	float:right;
	}
	
	#apply-1 {
	display:none;
	margin-right:20px;
	text-decoration:none;
	margin-bottom:20px;
	border:1px solid #00cc99;
	width:30%;
	text-align:center;
	padding:10px;
	float:right;
	z-index: -10!important;
	}
	
}

@media only screen and (max-width: 850px) {
	#header{
		height: 100px;
	}
	#main-nav{
		margin-top: 0;
		padding-left:20px;
	}
}

/*small tablet landscape 800x600 */
@media only screen and (max-width: 800px) {
	#main-nav{
	float:left;
	list-style-type: none;
	font-size:14px;
	text-transform: uppercase;
	padding-top:15px;
	position:relative;
	padding-left:13px;
	}
	#advanced-search {
	border: 1px solid #00cc99;
	margin-top: 70px!important;
	margin-bottom: 20px!important;
	margin: 0 auto;
	background-color:#fff;
	width:55%;
	height:85%!important;
	overflow: scroll;
	}
	#toggle-image {
	float:right;
	margin-right:40px;
	}
}

/*tablet portrait 768x1024 */
@media only screen and (max-width: 768px) {
	#advanced-search {
	border: 1px solid #00cc99;
	margin-top: 100px!important;
	margin-bottom: 20px!important;
	margin: 0 auto;
	background-color:#fff;
	width:60%;
	height:85%!important;
	overflow: scroll;
	}
	#toggle-image {
	float:right;
	margin-right:40px;
	}

}


/* Browser Small 3 (695px) */
@media only screen and (max-width: 695px) {
	#header{
		height: 120px;
	}
	
	#main-nav li a{
		margin-top: 10px;
	}
	
	#apply {
		width:35%;
	}
	
	#apply-1 {
		width:35%;
	}
	
	#advanced-search {
	border: 1px solid #00cc99;
	margin-top: 70px!important;
	margin-bottom: 20px!important;
	margin: 0 auto;
	background-color:#fff;
	width:60%;
	height:85%!important;
	overflow: scroll;
	}
	.filter li {
		width:50%;
	}
	
	.filter-1 li {
		width:50%;
	}
	
	#filter-button-nav-option1 li {
		width:50%;
	}
	
	#filter-button-nav-option2 li {
		width:50%;
	}
	
	#filter-button-nav li {
		width:50%;
	}
}

@media only screen and (max-width: 638px) {
	#header{
		height: 120px;
	}
	
	#main-nav li a{
		margin-top: 10px;
	}
}

/*small tablet portrait 600x800 */
@media only screen and (max-width: 600px) {
	#advanced-search {
	border: 1px solid #00cc99;
	margin-top: 100px!important;
	margin-bottom: 20px!important;
	margin: 0 auto;
	background-color:#fff;
	width:60%;
	height:85%!important;
	overflow: scroll;
	}
	
	#apply-1 {
		width:35%;
	}
	
	#apply {
		width:35%;
	}
	#toggle-image {
	float:right;
	margin-right:30px;
	}
}

@media only screen and (max-width: 580px) {
	#apply {
		width:40%;
	}
	
	#apply-1 {
		width:40%;
	}
}
@media only screen and (max-width: 575px) {
	#main-nav #main-nav-sixth{
		margin-left: 15px;
	}
}

@media only screen and (max-width: 515px) {
	#apply-text {
		display:none;
	}
	
	#apply {
		width:10%;
	}
	
	#apply-1 {
		width:10%;
	}
}

/* Browser Small 5 (506px) */
@media only screen and (max-width: 506px) {
	#main-nav #main-nav-fifth{
		margin-left: 0;
	}

	#main-nav #main-nav-sixth{
		margin-left: 15px;
	}
	
}

@media only screen and (max-width: 483px) {
	#main-nav #main-nav-fifth{
		margin-left: -10px;
	}

	#main-nav #main-nav-sixth{
		margin-left: 30px;
	}
	
}

/*Mobile Landscape 480x320 */
@media only screen and (max-width: 480px) {
	#apply-1 {
		width:10%;
	}
	#apply {
		width:10%;
	}
	
	#advanced-search {
	border: 1px solid #00cc99;
	margin-top: 50px!important;
	margin-bottom: 20px!important;
	margin: 0 auto;
	background-color:#fff;
	width:60%;
	height:85%!important;
	overflow: scroll;
	}
	
	.filter li {
		width:50%;
	}
	
	.filter-1 li {
		width:50%;
	}
	
	#filter-button-nav-option1 li {
		width:50%;
	}
	
	#filter-button-nav-option2 li {
		width:50%;
	}
	
	#filter-button-nav li {
		width:50%;
	}
	
	#apply-text {
		display:none;
	}
	#toggle-image {
	float:right;
	margin-right:20px;
	}

}

@media only screen and (max-width: 450px) {
		.filter li {
		width:50%;
	}
	
	.filter-1 li {
		width:70%;
	}
	
	#filter-button-nav-option1 li {
		width:70%;
	}
	
	#filter-button-nav-option2 li {
		width:70%;
	}
	
	#filter-button-nav li {
		width:70%;
	}
}

/* Phone Small 1 (390px) */
@media only screen and (max-width: 390px) {
	#main-nav #main-nav-fourth{
		margin-left: 0;
	}	
	#main-nav #main-nav-fifth{
		margin-left: -8px;
	}

	#main-nav #main-nav-sixth{
		margin-left: 28px;
	}
	
	input.text {
	border:1px solid #00cc99;
	width:73%;
	font-family:'Josefin Sans', sans-serif;
	height:26px;
	padding-left:5px;
	float: left;	
	}
}

@media only screen and (max-width: 365px) {
	#main-nav #main-nav-third{
		margin-left:0;
	}

	#main-nav #main-nav-fourth{
		margin-left: -22px;;
	}	
	#main-nav #main-nav-fifth{
		margin-right:110px;
		margin-left:0;
	}

	#main-nav #main-nav-sixth{
		margin-left: -95px;
	}
}


/* Phone Portrait (320px) */
@media only screen and (max-width: 390px) {
	.filter li {
		width:70%;
	}
	
	.filter-1 li {
		width:70%;
	}
	
	#filter-button-nav-option1 li {
		width:100%;
	}
	
	#filter-button-nav-option2 li {
		width:100%;

	}
	
	#filter-button-nav li {
		width:100%;
	}
	
	#advanced-search-content {
	text-align:left;
	padding-left:10px;
	}
	
	#apply-1 {
		margin-right:0;
		
	}
	#apply {
		margin-right:0;
	}
}