PersonalProfile.css

#completeProfile {/*includes both the sidebar and the largeDiv. Total 12/12*/
	width:100%;
}

/*RIGHT SIDE STYLING*/
#largeDiv {/*contains profileText, images and profileGrid. Total 9/12*/
	border:solid black 1px;
	background-color:#FFFFFF;
	padding-right:0;
	padding-left:0;
}

#images {/*matches size of the current image on display*/
	width:50%;
	float:right;
	margin:auto;
}

#profilegrid {/*grid showing the user's listings*/
	padding-top:10px;
	border-top:1px solid black;
	background:white;
	width:100%;
	clear:both;
}

#profileText {
	width:50%;
	float:left;
	padding: 20px;
	background: #fff;
	min-height:400px;
	border-right: 1px solid black;
	max-height:200px;
	overflow: scroll;
}

a > img {/*the images for the listings*/
	max-height:200px;
	max-width:200px;
	min-height:200px;
	min-width:200px;
	margin-top:10px;
	border:ridge 8px #558C89;
}

#profileAddListing {/*centers the add a listing button*/
  text-align: center;
  margin: 30px;
}

#profileAddListing .btn {/*edit the add a listing button*/
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
}

/*END RIGHT SIDE STYLING*/

/*LEFT SIDE STYLING*/
#profileSidebar {/*includes Basic info and comments. Total 3/12*/
  padding: 10px 0 10px 0;
  background: #ececec;
  border:1px solid black;
  min-height:400px;
}

#profilePic {
  max-height:125px;
  max-width:125px;
  min-height:125px;
  min-width:125px;
  float: left;
  margin-left: 10px;
  border:ridge 4px #558C89;
}

#profileTitle {/*includes profileName and profileJob*/
  text-align: center;
  margin-top: 20px;
}

#profileName {
  color: black;
  font-size: 16px;
  font-weight:bold;
  margin-bottom: 5px;
}

#profileJob {
  text-transform: uppercase;
  color: #558C89;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 15px;
}

#profileChangePic {/*centers the update profile picture button*/
  text-align: center;
  margin-top: 10px;
}

#profileChangePic .btn {/*update profile picture button*/
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
}

#profileEdit {/*positions the edit profile button info button*/
  margin-top: 30px;
  display:inline-block;
}

#profileEdit .btn {/*edit profile edit button*/
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
}

#profileUploadImage {/*positions the upload image button info button*/
  margin-top: 30px;
  display:inline-block;
}

#profileUploadImage .btn {/*edit upload image button*/
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
}
    
#profileBasicInfo {/*moves the basic info down*/
  margin-top: 30px;
}

#profileBasicInfo ul li {/*skills, location, email, telephone*/
  margin-top:10px;
  margin-bottom:10px;
  margin-right:40px;
  list-style-type:none;
  padding:5px;
  border:1px solid black;
  background-color:#fff;
}

/*Comment section styling*/
#commentsHeader{
	padding-left: 15px;
	border-top:1px black solid;
}

#commentsList{
	max-height:200px;
	overflow: scroll;
}

#commentsList .media{
    border-bottom: 1px dotted black;
	padding-left:15px;
	padding-bottom:10px;
	padding-right:15px;
}

.userName{
    font-size:14px;
    font-weight: bold;
}

#commentButton{
	border-top:1px dotted black;
	margin-top:20px;
	padding-top:10px;
}
/*End comment section styling*/

/*END LEFT SIDE STYLING*/