/*  IAT 235 Project 2 Part 3 Wireframes
	Posting page 5 (Review/Publish) - CSS | www.sfu.ca/~rllee/dPost1.html	*/
	
/* Posting page styling - "desktop" */	
@media(min-width:500px) {		/* previously specified width: 1280px */

.header{					/*Beginning of header*/
	font-family:Arial;
}
.header li{
	list-style-type:none;
}

.pRow1m{
	display:none;
}
.pRow1{
	height:20%;
	display:flex;
	margin:0;
	padding:0;
}
.pRow1 li {
	float:left;
	text-align:center;
	padding:1% 0%;
}

.logo{
	width:18%;
	border:1px solid black;	
}
.mid{
	width:62%;
	border:none;
}
.account{
	width:20%;
	border:1px solid black;	
}

.pRow2m{
	display:none;
}
.pRow2 {
	clear:both;
	display:flex;
	margin:1% 0%;
	padding:0;	
}

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

.pageTitle{
	width:80%;
}
.changeLoc{
	width:20%;
	font-size:80%;
}

.pRow3m {
	display:none;
}
.pRow3 {
	clear:both;
	display:flex;
	width:100%;
	padding:0;
	margin:0;
}

.pRow3 li{
	float:left;
	width:50%;
	padding:1% 0%;
	text-align:center;
	border:1px solid black;
}

.postProg{
	text-indent:30px; 
	font-size:20px;
}

.progCat{
  background:#EBEBEB;
}
.progLoc{
  background:#EBEBEB;  
}
.progDet{
  background:#EBEBEB;  
}
.progImg{
  background:#EBEBEB;  
}
.progRev{
  background:#EBEBEB; 
}
.progPub{

}
.progInd{
	display:none;
}

.pageInstruct{						/* Page Instructions */
	display:flex;
	width:40%;
	margin:2% 0%;
	padding:1% 0%;
	border:1px solid black;
}
.pageHead {
	display:flex;
	width:100%;
	border:1px solid black;
	padding:1% 0%;
	text-align:center;
	background:#999999;
}
.dropSelect {						/* Drop-down menu rows */
	display:flex;
	margin:0;
	padding:0;
}
.dropSelect li {
	list-style-type:none;
	margin:2% 0%;
	padding:1% 0%;
	text-align:center;
}
.stepHead {
	width:60%;
	border:1px solid black;
}
.dropMenu {
	width:40%;
	text-align:center;
}
.titleForm{
	display:flex;
	margin:2% 0%;
	padding:0;
	width:100%;
}
.itemDesc {
	width:100%;
}
.priceForm {
	margin:2% 0%;
}
.contactStepHead{
	width:40%;
	border:1px solid black;
}


#postContent{
	font-family:Arial;
}

.listContent{						/* For Lists */
	display:flex-row;
	width:95%;
}
.listContent li{
	border:1px solid black;
	list-style-type:none;
	width:50%;
	margin-left:20%;
}

#itemInfo{

}
#contactInfo{

}
#itemInfoM{
	display:none;
}
#contactInfoM{
	display:none;
}
#contentHead{						/* Page 3 - Filling information */
  display:flex;
  background:#B2B2B2;
  border:1px solid black;
  padding:5px;
  margin-left:5%;
  width:90%;
  position:relative;
}

#contentTitle{
  background:white;
  border:1px solid red;
  padding:5px;
  top:20px;
  left:1%;
  width:90%;
  position:relative;
}
#contentList{
  background:white;
  border:1px solid black;
  padding:5px;
  top:40px;
  left:1%;
  width:25%;
  position:relative;
}
#contentList2{
  background:white;
  border:1px solid black;
  padding:5px;
  top:60px;
  left:1%;
  width:25%;
  position:relative;
}
#contentList3{
  background:white;
  border:1px solid black;
  padding:5px;
  top:80px;
  left:1%;
  width:25%;
  position:relative;
}
.contentSides{
	display:flex;
	width:90%;
	position:relative;
	top:130px;
}
.contentSides li{
	float:left;
	list-style-type:none;
	border:1px solid black;
}
.contentSides1{
  background:white;
  border:1px solid black;
  padding:5px;
  top:180px;
  width:250px;
  position:relative;  
  left:10px; 
}
.contentSides2{
  left:300px;
  background:white;
  border:1px solid black;
  padding:5px;
  top:330px;
  width:250px;
  position:absolute;  
}
.contentSides3{
  left:600px;
  background:white;
  border:1px solid black;
  padding:5px;
  top:330px;
  width:250px;
  position:absolute;  
}

#contentDesc{
  float: right;
  background:white;
  border:1px solid black;
  padding:5px;
  bottom:140px;
  right:30px;
  width:60%;
  height:200px;
  position:relative;  
}

#contentTags{
  left:10px;
  background:white;
  border:1px solid black;
  padding:5px;
  top:200px;
  width:900px;
  position:relative;   
}

#contactBox{
  background:white;
  border:1px solid black;
  padding:5px;
  width:400px;
  position:relative;   
}
.nameBox{
  left:10px;
  top:240px;
}
.emailBox{
  left:10px;
  top:260px;
}
.phoneBox{
  top:230px;
  background:white;
  border:1px solid black;
  padding:5px;
	left:500px;
  width:400px;
  position:absolute;   
}

#prefBox{
  left:500px;
  background:white;
  border:1px solid black;
  padding:5px;
  top:480px;
  width:400px;
  position:absolute;   
}

#addImg {						/* Page 4 - Images */
	font-family:Arial;
	background:#EBEBEB;
	width:20%;
	top:5px;
	height:100px;
	left:15%;
	padding: 20px 20px 20px 20px;
	border:1px solid black;  
	text-align:center;  
	position:relative;
}

#prevImg {
	font-family:Arial;
	background:white;
	width:30%;
	height:100px;
	left:40%;
	bottom:138px;
	padding: 20px 20px 20px 20px;
	border:1px solid black;  
	text-align:center;  
	position:relative;
	margin-left:10%;
}

#uploadTitle {
	font-family:Arial;
	background:#B2B2B2;
	width:90%;
	height:5px;
	left:10%;
	bottom:100px;
	padding: 20px 20px 20px 20px;
	border:1px solid black;  
	text-align:left;  
	position:relative;
}

#uploadBox{
	width:90%;

}
.uploadThumb {
	background:white;
	left:9%;
	width:15%;
	height:70px;
	padding: 20px 20px 20px 20px;
	border:1px solid black;  
	text-align:center;  
	display:inline-block;
	position:relative;
	margin:2%;
	bottom:100px;
}

.end{
	display:flex;
}
.end li{
	list-style-type:none;
	border:1px solid black;
	width:90%;
}
.next{
	clear:both;
	width:50%;
	margin-left:60%;
}
.back{
	clear:both;
	width:50%;
	margin-left:30%;
	margin-bottom:20%;
}
}

/* Posting page styling - "mobile" */
@media(max-width:499px) {
.header{					/*Beginning of header*/
	font-family:Arial;
	border:1px solid red;
	width:100%;	
}
.header li{
	list-style-type:none;
}

.pRow1{
	display:none;
}
.pRow1m{
	display:flex;
	width:100%;	
	padding:0;
	margin:0;
}
.pRow1m li {
	border:1px solid black;
}

.logo{
	width:25%;
	text-align:center;	
}
.location{
	width:50%;
	text-align:center;	
}
.account{
	width:25%;
	text-align:center;
}	

.pRow2{
	display:none;
}
.pRow2m {
	display:flex;
	width:100%;
	text-align:center;
	padding:0;
	margin:1% 0%;
}

.pRow2m li{
	padding:2% 0%;
	border:1px solid black;
}

.pageTitle{
	width:85%;
}
.pageMenu{
	width:15%;
}
.changeLoc{
	display:none;
}

.pRow3{
	display:none;
}

.pRow3m {
	display:flex;
	width:100%;
	text-align:center;
	padding:0;
	margin:1% 0% 0%;
}

.pRow3m li{
	border:1px solid black;
}

.postProg{
	display:none;
}

.progCat, .progLoc, .progDet, .progImg, .progRev, .progPub {
  width:10%;
}

.progInd{
	width:40%;
	text-align:center;
}

#postContent{
	text-align:center;
	font-family:Arial;
}

.pageInstruct{						/* Page Instructions */
	display:flex;
	width:100%;
	padding:2% 0%;
	text-align:center;
	border:1px solid black;
	margin-top:2%;
}

.listContent{						/* For Lists */
	display:flex-row;
	width:95%;
}
.listContent li{
	border:1px solid black;
	list-style-type:none;
	width:80%;
	margin-bottom:3%;
	padding:5%;
}


#itemInfo{
	display:none;
}
#contactInfo{
	display:none;
}
#itemInfoM{
	width:100%;
	list-style-type:none;
}
#contactInfoM{
	width:100%;
	list-style-type:none;	
}
#contentHead{						/* Page 3 - Filling information */
  display:flex;
  background:#B2B2B2;
  border:1px solid black;
  padding:5px;
  margin:2%;
  width:100%;
  position:relative;
}

#contentTitle{
  border:1px solid red;
}
.contentList{
	list-style-type:none;
	text-align:center;
	padding:0% 5%;
}
.contentList li {
	border:1px solid black;
	padding:2% 5%;
	margin-bottom:3%;
}

.contentDesc{
  height:150px; 
}

.contentList2{
	list-style-type:none;
	text-align:center;
	padding:0% 5%;
}
.contentList2 li {
	padding:2% 5%;
	margin-bottom:3%;
}
.borderBox{
	border:1px solid black;
}

.prefBox{
  list-style-type:none; 
	width:100%;
	display:flex;
}
.prefBox li{
	width:15%;
	margin-right:5%;
	border:1px solid black;
}

#previewBox{
	margin-left:10%;
	margin-top:3%;
	padding:0% 5%;
	border:1px solid black;
	width:70%;
	height:400px;
}

#addImg {						/* Page 4 - Images */
	background:#EBEBEB;
	width:70%;
	padding:3% 10%;
	margin:2% 5%;
	border:1px solid black;  
	text-align:center;  
}

#prevImg {
	background:white;
	width:70%;
	padding:10% 10%;
	margin:2% 5%;
	border:1px solid black;  
	text-align:center;  
}

#uploadTitle {
	background:#B2B2B2;
	width:90%;
	height:5px;
	left:10%;
	bottom:100px;
	padding: 20px 20px 20px 20px;
	border:1px solid black;  
	text-align:left;  
}

#uploadBox{
	width:90%;
}
.uploadThumb {
	background:white;
	list-style-type:none;
	width:100%;
	padding:5%;
	text-align:center;  
	display:flex-wrap;
}
.uploadThumb li{
	border:1px solid black;  	
}

.end{
	display:flex;
	text-align:center;
}
.end li{
	list-style-type:none;
	border:1px solid black;
	width:90%;
}
.noEnd{
	display:none;
}
.next{
	clear:both;
	width:50%;
	margin-left:60%;
}
.back{
	clear:both;
	width:50%;
	margin-left:30%;
	margin-bottom:20%;
}

}