/* <!--last edit by D, as of: Aug 4, 12:05PM-->*/


*{
	font-family: 'Titillium Web', sans-serif;
	text-decoration:none;
}

li{
	list-style-type:none;
}

ul{
	text-align:center;
}


/*HEADER*/ 

.row{
	display:flex;
	border:1px solid black;
}

#siteName{
	width:100%;
	border:1px solid black;
	background:#528f47;
	text-align:center;
}

#siteName h1{
	color:white;

}

#logoContainer{
	width:15%;
}

.logo{
	max-width:100%; /*keeps image contained*/
	max-height:5em;
	width:auto; /*keeps aspect ratio of logo*/
	height:auto;
	margin-left:35%;
	padding-top:2%;
}

#postButton{
	text-align:center;
	padding-top:1em;
	background: #ffad2e;
	border-radius: 5px;
	font-weight: bold;
}

#postButton a{
	color:white;

}

#postButton a:hover{
	/*color:#f38c2f; /*dark orange*/
	color:gray;
}

#locMenu{
	width:80%;
	margin-left:10%;
	margin-top:1em;
	margin-bottom:1em;
}

.input{
	width:70%;
	margin-left: 28%;
	margin-top: 0.8em;
}

#searchButton{
	padding-top:0.7em;
}

.sb-click{
	width:100%;
}

.column-1{
	width:15%;
}

.column-2{
	width:25%;
}

.column-3{
	width:50%;
}

.column-4{
	width:8%;
}


/*FOOTER*/
footer{
	text-align:center;
	margin-top:2em;
}

footer a{
	color:black;
}

footer a:hover{
	color: #528f47; /*dark green*/
}

/*BODY COONTAINER*/
.bodyContainer{
	display:flex;
}

.bodyContainer ul{
	padding:0;
	margin:0;
}

/*SIDE NAVIGATION BAR*/
nav{
	width:20%;
	border:1px black solid;

}

nav ul  li{
	padding-top:1em;
}

nav ul li a{
	color: #528f47; /*dark green*/
}

nav ul li a:hover{
	color:black;
	font-weight:bold;
}

nav .categories{
	border-bottom:1px black solid;
}

nav .help{
	padding-bottom:1em;
}

/*HOME PAGE*/
#homePage .item{
	border:1px solid black;
	display:block;
}

#homePage .subCategory{
	box-sizing:border-box;
	width:100%;
	text-align:left;
	padding:0;
	padding-left: 2%;
	margin:0;
	border:1px solid black;
	background: #8eba5f; /*mid-green*/
	text-decoration:white;
}

#homePage .subCategory a{
	color:white;
}

#homePage .subCategory a:hover{
	/*color:#528f47; /*dark green*/
	color:#e2e8ca; /*light green*/
}

#homePage .item ul{
	width:80%;
}

#homePage .item li{
	width:100%;
	text-align:left;
	color: #528f47; /*dark green*/
}


/*CONTENT*/   

#container{
	width:80%;
}

.title{
	background:#e2e8ca; /*light green*/
}

.title a{
	font-weight:normal;
	color:black;
}

.title a:hover{
	font-weight:bold;
	color:#528f47; /*dark green*/
}

		/*BUTTON DISPLAY*/
.changeView {
	display:flex;
}

.changeView li{
	display:inline;
	margin-left:2%;
	margin-top:2%;
}

	
		/*LIST VIEW*/
.listView .item{
	/*border:1px black solid;/**/
	width:100%;
	display:flex;
	flex-wrap:wrap;
	margin-left:1em;
}

.listView .item ul{
	width:95%;
}

.listView .detailsContainer{
	display:flex;
	flex-wrap:wrap;
	margin-top:2em;
}

.listView .img{
	display:none;
	border:1px black solid;
}

.listView .title{
	border:1px black solid;
	width:100%;
	margin:0;
	padding-top:1em;
	padding-bottom:.5em;
	box-sizing:border-box;
}

.listView .location{
	border:1px black solid;
	width:65%;
	margin:0;
	padding-top:.5em;
	padding-bottom:.5em;
	box-sizing:border-box;
}

.listView .price{
	border:1px black solid;
	width:35%;
	margin:0;
	padding-top:.5em;
	box-sizing:border-box;
}

		/*THUMBNAIL VIEW*/ /**need to change class of content container to activate**/	
.thumbView .item{
	width:100%;
	display:flex;
	margin-top:1em;
	margin-left:1em;
}

.thumbView .item ul {
	display:flex;
	width:100%;
}

.thumbView .imgContainer{
	border:1px black solid;
	width:20%;
}

.thumbView .detailsContainer{
	width:80%;
	display:flex; /*makes img and details containers side-by-side */
	flex-wrap:wrap; /*moves location and price to second row*/
}


.thumbView .img{
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
}

.thumbView .title{
	border:1px black solid;
	width:90%;
	padding:0;
	margin:0;
	box-sizing:border-box;
}

.thumbView .location{
	border:1px black solid;
	width:50%;
	padding:0;
	margin:0;
	box-sizing:border-box;
}

.thumbView .price{
	border:1px black solid;
	width:40%;
	padding:0;
	margin:0;
	box-sizing:border-box;
}

		/*GALLERY VIEW*/
.galleryView .item{
	border:1px solid black;
	display:flex;
	width:40%;
	margin-top:1em;
	margin-right:1em;
	margin-left:1em;
	
}

.galleryView ul {
	display:flex;
	flex-wrap:wrap;
}

.galleryView .imgContainer{
	width:100%;
}

.galleryView .img {
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
}

.galleryView .detailsContainer{
	border:1px black solid; /**/
	width:100%;
	display:flex; 
	flex-wrap:wrap; 
}

.galleryView .title{
	border-bottom:1px black solid;
	width:100%;
	padding:0;
	margin:0;
	box-sizing:border-box;
}

.galleryView .location{
	width:60%;
	padding:0;
	margin:0;
	box-sizing:border-box;
}

.galleryView .price{
	border-left:1px black solid;
	width:40%;
	padding:0;
	margin:0;
	box-sizing:border-box;
}

/*ITEM POST*/

.postContainer{
	display:flex;
	border:1px solid black;
	margin:5%;
	background:white;
}

.info{
	padding-left:1.5em;
}

.itemInfo{
	border:1px solid black;
	display:flex;
	flex-wrap:wrap;
	background:white;
}

.itemInfo h2{
	width:100%;
}

.mainDetails {
	border: 1px black solid;
	width:40%;
	margin-top:5%;
	padding-left:2.5%;
	background:#e2e8ca; /*light green*/
}

.details{
	text-align:left;
	width:100%;
} 

.details li{
	padding-left:1em;
}

.text{
	padding-left:10%;
}

.itemInfo .imgContainer{
	border:1px solid black; 
	width:50%;
	margin-top:5%;
	padding-left:2.5%;
	background:white; /*light green*/
}

.itemInfo .imgContainer img{
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
}

.itemDescription{
	border:1px black solid;
	width:80%;
	padding:7.7%;
	background:#e2e8ca; /*light green*/
}

.address ul{
	text-align:left;
}

.return{
	margin-left:2%;
	color:black;
	position:absolute;
	right:5em;
	border:1px solid black;
	border-radius: 2px;
	padding:0.7%;
	background:#F0F0F0;
}

.return:hover{
	color:#528f47;
}

		

@media (min-width: 1080px){
nav {
	width:13em; /*keeps nav bar at a static size until it gets shrunk smaller*/
}
} 		


@media (max-width:1350px) { /*tag for screen width SMALLER than 1350px*/
.logo{
	margin-left:30%;
}

/*HEADER*/
.column-3{
	width:45%;
}


} 


@media (max-width:920px) { /*tag for screen width SMALLER than 920px*/

/*HEADER*/
.logo{
	margin-left:20%;
}

.column-3{
	width:40%;
}

/*ITEM POST*/
.mainDetails{
	order:2;
	width:100%;
	margin-right:4.5%;
}

.info .imgContainer{
	order:1; /*reflows image to top above text*/
	width:93%;
}

.itemDescription{
	order:3;
}

.tags{
	order:4;
}

}


@media (max-width:750px) { /*tag for screen width SMALLER than 750px*/
/*BROWSE VIEW*/
.galleryView .item{
	width:100%;
}

/*HEADER*/

.column-1{
	width:7em;
}

.logo{
	margin-left:2%;
}

.sb-click{
	height:25px;
}


#postButton{
	padding-top:2%;

}
}
		
		
@media(max-width: 650px){ /*screen width SMALLER than 650px*/
.sb-click{
	display:none;
}

.column-3{
	width:50%;
}

.column-4{
	width:5%;
}
}
		
@media(max-width: 480px){ /*screen width SMALLER than 650px*/

/*HOME PAGE*/
.mainButton{
	padding:10%;
	margin:5%;
	border:1px black solid;
}

nav{
	display:none;
}

/*BROWSE VIEW*/
#container{
	width:100%;
}

.listView .item{
	margin:0;
}

.listView .item ul{
	width:100%;
}

.thumbView .item{
	margin-right:0;
	margin-left:0;
}

.thumbView .title{
	width:100%;
}

.thumbView .location{
	width:55%;
}

.thumbView .price{
	width:45%;
}

.galleryView .item{
	margin-right:0;
	margin-left:0;
}

/*ITEM POST*/
.postContainer{
	width:90%;
}

}