/*  IAT 235 Project 3
	Posting pages - CSS | www.sfu.ca/~rllee/dPost1.html	*/
	
/* Colour reference: Darkest = #528F47 | Mid = #8EBA5F | Lightest = #E2E8CA */	
	
/* Posting page styling - general (applies to all) */	
*{
	font-family: 'Titillium Web', sans-serif;
}

.header{					/*Beginning of header*/
	font-family:Titillium-web;
}
.header li{
	list-style-type:none;
}
nav {
	text-align:center;
}

.pRow1{
	display:flex;
	margin:0;
	padding:0;
	background:#528F47;
	height:3em;
	width:100%;
}
.pRow1 li {
	float:left;
	text-align:center;
	padding:.5em;
	border:1px solid black;
}

.logoImg{
	width:25px;
}

.pRow2 {
	clear:both;
	display:flex;
	margin:0;
	padding:0;	
	height:3em;
}

.pRow2 li{
	float:left;	
	padding:.1em;
}

.pRow3 {
	clear:both;
	display:flex;
	margin:1% 0%;
	padding:0;	
}

.pRow3 li{
	float:left;	
	border:1px solid black;	
	padding:1% 0%;
}

.titleForm{
	display:flex;
	margin:.8em 0em;
	padding:0%;
	width:100%;
}
.titleHeadForm{
	display:flex;
	margin:1em 0em;
	padding:0;
	width:100%;
	height:2em;
}
.titleHeadForm li{
	list-style-type:none;
	border:1px solid black;
	width:100%;
	text-align:center;
	background:#E2E8CA;	
}

.itemDesc {
	width:100%;
}
.priceForm {
	width:50%;
}


.imgElement{
	list-style-type:none;
	width:100%;
	font-family: 'Titillium Web', sans-serif;
}
.imgElement li{
	margin:1em 0em;
	font-family: 'Titillium Web', sans-serif;	
}
.imgBrowse{
	font-family: 'Titillium Web', sans-serif;
}


/*ITEM POST*/

.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;
}

/* header and selection buttons for success page */
.finalHead {
	display:flex;
	border:1px solid black;
	padding:3%;

	background:#E2E8CA;	
}
.finalSelect{
	display:flex;
	width:100%;
	margin:5% 0%;
	padding:3%;
	text-align:center;
}




/* ******************* Posting page styling - "desktop" ********************* */
@media(min-width:901px) {		/* previously specified width: 1280px */
.logo{
	width:18%;
	background:white;
}
.mid{
	width:62%;
	border:none;
	display:center;
	color:white;
}
.account{
	width:20%;
	text-align:center;
}

.pageNavTitle{		/* visual step indication */
	width:18%;
	background:#528F47;
	color:white;
	border:1px solid #8EBA5F;
}
.pageNavBlank{
	width:33.33%;
	border:4px solid #8EBA5F;	
}
.pageNavFilled{
	width:33.33%;
	background:#FFBD58;
	border:4px solid #8EBA5F;	
}

.pageHead {						/* Page Instructions */
	display:flex;
	height:2em;
	border:1px solid black;
	padding:.2em 2em;
	margin:0em;
	background:#528F47;
	color:white;
}
.pageHead li{
	text-align:center;
	list-style-type:none;
}
.pageHeadM{
	display:none;
}
.pageHeadM li{
	display:none;
}

#postContent{
	margin:.7em;	
}
.stepHead {
	width:100%;
	border:1px solid black;
	background:#E2E8CA;
	font-size:100%;
}

.dropSelect {						/* Drop-down menu rows */
	display:flex;
	margin:0;
	padding:0;
}
.dropSelect li {
	list-style-type:none;
	margin:.5em 0em;
	padding:1% 0%;
	text-align:center;
}
.dropSelectL {						/* Drop-down menu rows */
	display:none;
}
.dropMenu {
	width:100%;
	text-align:center;
	border:1px solid black;
}
.scp1 {
	width:90%;
}
.scp2{
	width:92%;
}
.scp3 {
	width:100%;
}

.contactStepHead{
	width:100%;
	border:1px solid black;
	background:#E2E8CA;	
}
.contactMenu{
	width:60%;
	border:1px solid black;
}
.contactField{
	width:70%;
}

.pRow4{
	display:flex;
	margin:0;
	padding:0;
	width:100%;
}
.pRow4 li{
	list-style-type:none;
}
.endBack{
	margin-left:4em;
	width:30%;
	text-align:right;
}
.endMid{
	width:40%;
}
.endNext{
	margin-right:4em;
	width:30%;
}

.endButtons{
	padding:4%;
	width:100%;
}

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

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

footer a{
	color:black;
}

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

}

/* ******************* Posting page styling - "middle break" ********************* */
@media (max-width:900px) {
.logo{
	width:15%;
	background:white;
}
.mid{
	width:50%;
	border:none;
	display:center;
	color:white;
}
.account{
	width:35%;
	text-align:center;
}	
	
.pageNavTitle{		/* visual step indication */
	width:23%;
	font-size:.8em;
	background:#528F47;
	color:white;
	border:1px solid #8EBA5F;	
}
.pageNavBlank{
	width:25%;
	border:4px solid #8EBA5F;	
}
.pageNavFilled{
	width:25%;
	background:#FFBD58;
	border:4px solid #8EBA5F;
}

.pageHeadM {						/* Page Instructions */
	display:flex;
	height:20%;
	border:1px solid black;
	padding:.5em 2em;
	margin:0;
	background:#528F47;
	color:white;
}
.pageHeadM li{
	text-align:center;
	list-style-type:none;
}
.pageHead{
	display:none;
}
.pageHead li{
	text-align:center;
	list-style-type:none;
}
	
#postContent{
	margin:.7em;	
}	
.stepHead {
	width:100%;
	border:1px solid black;
	background:#E2E8CA;
	font-size:90%;
}

.dropSelect {						
	display:flex;
	margin:0;
	padding:0;
	height:4em;
}
.dropSelect li {
	list-style-type:none;
	margin:.5em 0em;
	padding:1% 0%;
	text-align:center;
}
.dropSelectL {						/* Drop-down menu rows */
	display:none;
}
.dropMenu {
	width:100%;
	text-align:center;
	border:1px solid black;
}
.scp1 {
	width:90%;
}
.scp2{
	width:92%;
}
.scp3 {
	width:100%;
}

.contactStepHead{
	width:40%;
	border:1px solid black;
	background:#E2E8CA;
	font-size:90%;
}	
.contactMenu{
	width:60%;
	border:1px solid black;
}
.contactField{
	width:70%;
}

.pRow4{
	display:flex;
	margin:0;
	padding:0;
	width:100%;
}
.pRow4 li{
	list-style-type:none;
}
.endBack{
	margin-left:.5em;
	width:35%;
}
.endMid{
	width:30%;
}
.endNext{
	margin-right:.5em;
	width:35%;
}

.endButtons{
	padding:4%;
	width:100%;
}

/*ITEM POST*/
.postContainer{
	display:flex;
	border:1px solid black;/**/
	margin:2% 2%;
	background:white;
}
.mainDetails{
	order:2;
	width:93%;
}

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

.itemDescription{
	order:3;
}

.tags{
	order:4;
}

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

footer a{
	color:black;
}

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

}	

/* ******************* Posting page styling - "mobile" ********************* */
@media only screen and (max-width:480px) {
.logo{
	width:15%;
	background:white;
}
.mid{
	width:85%;
	border:none;
	display:center;
	color:white;
}
.account{
	display:none;
}	

.pageNavTitle{		/* visual step indication */
	width:23%;
	font-size:.8em;
}
.pageNavBlank{
	width:25%;
	border:4px solid #8EBA5F;	
	font-size:.8em;
}
.pageNavFilled{
	width:25%;
	background:#FFBD58;
	border:4px solid #8EBA5F;
	font-size:.8em;
}	
	
.pageHeadM {						/* Page Instructions */
	display:flex;
	height:20%;
	border:1px solid black;
	padding:.5em 2em;
	background:#528F47;
	color:white;
	text-align:center;
}	
.pageHeadM li {
	text-align:center;
}
.pageHead {						/* Page Instructions */
	display:none;
}

#postContent{
	margin:.7em 0em;
}	
.dropSelect {						/* Step containers */
	display:block;
	margin-top:.5em;
	margin-bottom:1em;
	padding:0;

}
.dropSelect li {
	width:100%;
	list-style-type:none;
	margin:0;
	padding:1% 0%;
	text-align:center;
}
.dropSelectL {						/* Step containers */
	display:block;
	margin-top:.5em;
	margin-bottom:1em;
	padding:0;

}
.dropSelectL li {
	width:100%;
	list-style-type:none;
	margin:0;
	padding:1% 0%;
	text-align:center;
}
.stepHead {							/* Step title containers */
	border:1px solid black;
	background:#E2E8CA;
}
.dropMenu {							/* Step entry field/choice containers */

	text-align:center;
}
.scp1, .scp2, .scp3 {
	display:flex;
	width:100%;
	margin-bottom:3%;
}	

.contactMenu{
	width:100%;
	border:1px solid black;
}
.contactField{
	width:90%;
}

.pRow4{
	display:flex;
	flex-wrap:wrap;
	margin:0;
	padding:0;
	width:100%;
}
.pRow4 li{
	list-style-type:none;
}
.endBack{
	width:100%;
	margin-left:0;
}
.endMid{
	width:0%;
}
.endNext{
	width:100%;
	margin-right:0;
}

.endButtons{
	padding:4%;
	margin-bottom:2%;
	width:100%;
}
footer {
	display:none;
}

/*ITEM POST*/
.postContainer{
	display:flex;
	border:1px solid black;/**/
	margin:2% 0%;
	padding:0% 4.5%;
	background:white;
}
.postContainer{
	width:90%;
}
	
}