body {
	background-color: #19a194;
	font-family: Helvetica, Arial, sans-serif;
	margin: 0;
}

h1, h2, h3 {
	margin: 0px;
}

a {
	text-decoration: none;
	color: red;
}

a:hover {
	transform: rotate(-15deg);
}

#container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#headerArea {
	margin-bottom: 10px;
}

#logo {
	width: 100%
}

#header {
	width: 1000px;
	height: 182px;
	background-color: #19a194;
	background-image: url(https://geoledgy.weebly.com/uploads/2/5/2/6/25266389/pattitradebg_orig.png);
    background-size: 100%;
}

#nav {
	width: 100%;
	height: 40;
	background-color: white;
	margin-bottom: 10;
}

#nav ul {
	display: flex;
	padding: 0;
	margin: 0;
	list-style-type: none;
    justify-content: space-evenly;
}

#nav li {
	padding-top: 10px;
	padding-bottom: 10px;
}

#nav li a {
	display:inline-block;
	color: red;
	text-decoration: none;
	margin: 5px;
}


#nav li a:hover {
	transform: rotate(-15deg);
	color: blue;
	text-decoration: underline;
}

#mainArea {
	display: flex;
	width: 1000;
	margin-top: 10;
	margin-bottom: 10;
}

#sidebarLeft {
	overflow-y: scroll;
	word-wrap: break-word;
	width: 150px;
	height: 500px;
	padding: 20px 20px 20px 20px;
	margin-right: 10px;
	font-size: smaller;
	background-color: white;
}

#content {
	word-wrap: break-word;
	width: 700px;
	height: 500px;
	background-color: white;
	padding: 20px 20px 20px 20px;
}

#sidebarRight {
	overflow-y: scroll;
	word-wrap: break-word;
	width: 150px;
	height: 500px;
	padding: 20px 20px 20px 20px;
	margin-left: 10px;
	font-size: smaller;
	background-color: white;
}

#charactercontent {
	word-wrap: break-word;
	width: 1000px;
	height: auto;
	background-color: white;
	padding: 20px 20px 20px 20px;
}

.flex-container {
	width: 1000px;
	height: auto;
	display: flex;
	justify-content: center;
	background-color: white;
}

.flex-container > div {
	width: 450px;
	background-color: red;
	margin: 20px;
	padding:20px;
}

#profile {
	width: 400px;
	padding: 20px 20px 20px 20px;
	margin-left: 10px;
	background-color: red;
}

#about {
	width: 400px;
	padding: 20px 20px 20px 20px;
	margin-right: 10px;
	background-color: red;
}

#footer {
	background-color: #f28144;
    color: #EBF8FF;
    width: 100%;
    text-align: center;
    padding: 10px 0px 10px 0px;
	margin-top: 10px;
    clear: both;
}

#containertemp {
	width: 1000px;
}

#containerheader {
	width: 960px;
	padding: 5px 10px 0px 30px;
	align-items: center;
}

#containerinfo {
	width: 980px;
	padding: 10px;
	align-items: center;
}

#containerinfoinner {
	display: flex;
	align-items: flex-start;
}

#tprofile {
	margin-left:20px;
	margin-right: 20px;
}

#containerinfo2 {
	width: 980px;
	padding: 10px;
	align-items: center;
}

div.tgallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.tgallery:hover {
  border: 1px solid #777;
}

div.tgallery img {
  width: 100%;
  height: auto;
}

#tfriendprofile {
	display: flex;
	align-items: flex-start;
	padding-top: 10px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 10px;
}

.image-cropper {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}