/* <!--last edit by D, as of: July 16, 5:26PM-->*/


*{
	/*font-family:"Arial";/**/
	font-family: 'Titillium Web', sans-serif;
}



/*HEADER*/

li{
	list-style-type:none;
}

ul{
	/*border:1px solid black;*/
	text-align:center;
}

.row1{
	display:flex;
	margin:0;
	padding:0;
}

.row1 li{
	height:3em;
	border:1px solid black;
}

.logoContainer{
	width:20%;
}

.place{
	width:60%;
}

.changeLoc{
	width:20%;
}

.logo{
	max-width:100%; /*keeps image contained*/
	max-height:100%;
	width:auto; /*keeps aspect ratio of logo*/
	height:auto;
}

.row2{
	display:flex;
	margin:0;
	padding:0;

}

.row2 li {
	height:3em;
	border:1px solid black;
}

.post{
	width:20%;
}

.search{
	width:80%;
}

.input{
	border:1px solid black;
	width:70%;
	height:2em;
	margin-top:0.5em;
}


.pageTitle{
	display:flex;
	border: 1px solid black;
	margin: 0px;
}

/*FOOTER*/
footer{
	/*border:1px black solid;/**/
	text-align:center;
	margin-top:2em;
}


@media(min-width:480px){ /*big screens BIGGER than 480px*/

/*BODY COONTAINER*/
.bodyContainer{
	/*border:1px black solid;*/
	display:flex;
	
}

.bodyContainer ul{
	padding:0;
	margin:0;
}

} /*closing tag for media screen width bigger than 480px*/

/*SIDE NAVIGATION BAR*/
nav{
	width:20%;
	/*height: 35em;*/
	border:1px black solid;

}

nav ul  li{
	padding-top:1em;
}

nav .categories{
	border-bottom:1px black solid;
}

nav .help{
	padding-bottom:1em;
}

.categories li{
	
}

/*HOME PAGE*/
.mainButton{
	padding:10%;
	margin:5%;
	border:1px black solid;
}


/*CONTENT*/   

#container{
	width:80%;
}

		/*BUTTON DISPLAY*/
.changeView {
	display:flex;
}

.changeView li{
	display:inline;
	margin-left:1em;
}
	
	
		/*LIST VIEW*/
.listView .item{
	/*border:1px black solid;*/
	width:100%;
	display:flex;
	flex-wrap:wrap;
}

.listView .item ul{
	width:100%;
}

.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:90%;
	margin:0;
	padding-top:1em;
	padding-bottom:.5em;
	box-sizing:border-box;
}

.listView .location{
	border:1px black solid;
	width:60%;
	margin:0;
	padding-top:.5em;
	padding-bottom:.5em;
	box-sizing:border-box;
}

.listView .price{
	border:1px black solid;
	width:30%;
	margin:0;
	padding-top:.5em;
	box-sizing:border-box;
}

		/*THUMBNAIL VIEW*/ /**need to change class of content container to activate**/	
.thumbView .item{
	/*border:1px black solid;*/
	width:100%;
	display:flex;
	margin-top:2em;
}

.thumbView .item ul {
	display:flex;
	width:100%;
}

.thumbView .imgContainer{
	/*border:1px black solid;*/
	width:20%;
}

.thumbView .detailsContainer{
	/*border:1px black solid; /**/
	width:80%;
	display:flex; /*makes img and details containers side-by-side */
	flex-wrap:wrap; /*moves location and price to second row*/
}

.thumbView .img{
	border:1px black solid;
	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:2em;
	margin-right:2em;
	
}

.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; /*makes img and details containers side-by-side */
	flex-wrap:wrap; /*moves location and price to second row*/
}

.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*/
		/*ITEM DETAILS*/
.itemPost{
	display:flex;
	border:1px solid black;
	margin:5%;
}

.postTitle{
	/*border:1px solid black;/**/
}

.itemInfo{
	border:1px solid black;
	display:flex;
	flex-wrap:wrap;
}

.itemInfo h2{
	border:1px black solid;
	width:100%;
}

.itemDetails{
	border:1px black solid;/**/
	text-align:left;
	width:40%;
} 

.itemDetails li{
	border:1px black solid;
	width:40%;
}

.itemInfo .imgContainer{
	width:50%;
}

.itemInfo .imgContainer img{
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	
}

.itemDescription{
	border:1px black solid;
	width:80%;
	padding:5%;
	margin:5%;
}

.address ul{
	text-align:left;
}

		/*CONTACT INFO*/
		

@media(max-width:480px){ /*screen width SMALLER than 480px*/

/*HOME PAGE*/
.mainButton{
	padding:10%;
	margin:5%;
	border:1px black solid;
}

}/*end tag for screen width SMALLER than 480px*/