#topbar {
  background: #4f4a41;
  padding: 10px 0 10px 0;
  text-align: center;
  height: 36px;
  overflow: hidden;
  -webkit-transition: height 0.5s linear;
  -moz-transition: height 0.5s linear;
  transition: height 0.5s linear;
}
#topbar a {
  color: #fff;
  font-size:1.3em;
  line-height: 1.25em;
  text-decoration: none;
  opacity: 0.5;
  font-weight: bold;
}
#topbar a:hover {
  opacity: 1;
}
/** page structure **/
#w {
  display: block;
  width: 850px;
  margin: 0 auto;
  padding-top: 150px;
  padding-bottom: 45px;
}

#content_profile {
  display: block;
  width: 100%;
  /*background: #fff;*/
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  border: 0.0625rem solid #1c1c1c;
  background-color: #252525;
}

#userphoto {
  display: block;
  float: right;
  margin-left: 10px;
  margin-bottom: 8px;
}
#userphoto img {
  display: block;
  width: 250px;
  padding: 2px;
  background: #fff;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}


/** profile nav links **/
#profiletabs {
  display: block;
  margin-bottom: 4px;
  height: 50px;
}

#profiletabs ul { list-style: none; display: block; width: 70%; height: 50px; }
#profiletabls ul li { float: left; }
#profiletabs ul li a { 
 display: block;
 float: left;
 padding: 8px 11px;
 font-size: 1.2em;
 font-weight: bold;
 background: #1c1c1c;
 /* color: #666; */
 /* margin-right: 7px; */
 border: 1px solid #fff;
 /* -webkit-border-radius: 5px; */
 /* -webkit-border-bottom-left-radius: 0; */
 -moz-border-radius: 5px;
 -moz-border-radius-bottomleft: 0;
 /* border-radius: 5px; */
 /* border-bottom-left-radius: 0;*/
}
/*#profiletabs ul li a:hover {
  text-decoration: none;
  background: #dad7c2;
  color: #565656;
}

#profiletabs ul li a.sel {
  background: #fff;
  border-color: #d1cdb5;
}*/


/** profile content sections **/
/*.hidden {
  display: none;
}*/

/* Style the tab */
.tab {
    overflow: hidden;
    /*border: 1px solid #ccc;*/
    /*background-color: #f1f1f1;*/
}

/* Style the buttons inside the tab */
.tab button {
 display: block;
 float: left;
 padding: 8px 11px;
 font-size: 1.2em;
 font-weight: bold;
 background: #1c1c1c; 
 border: 1px solid #fff; 
 -moz-border-radius: 5px;
 -moz-border-radius-bottomleft: 0;
}

/* Change background color of buttons on hover */
.tab button:hover {
    
}

/* Create an active/current tablink class */
.tab button.active {
display: block;
float: left;
padding: 8px 11px;
font-size: 1.2em;
font-weight: bold;
background: #ffe401; 
border: 1px solid white 
-moz-border-radius: 5px;
color: #1c1c1c;
-moz-border-radius-bottomleft: 0;
}

/* Style the tab content */
.tabcontent {
display: none;
/*padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;*/
}

.activity {
border-bottom: 1px solid #d6d1af;
padding-bottom: 4px;
}

.setting {
  display: block;
  font-weight: normal;
  padding: 7px 3px;
  /*border-top: 1px solid #d6d1af;*/
  margin-bottom: 5px;
}
.setting span {
  float: left; 
  width: 250px;
  font-weight: bold;
}
.setting span img { 
  cursor: pointer;
}


#friendslist {
  display: block;
  font-size: 1.1em;
  font-weight: bold;
}
#friendslist li { line-height: 30px; }
#friendslist li a {
  float: left;
  height: 30px;
  padding: 3px 6px;
  line-height: 22px;
   margin-right: 15px;
  border: 1px solid #c9d8b8;
}

#friendslist li a img { float: left; margin-right: 5px; }

/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
/*html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }*/