/*
========================================
Global
========================================
*/
/*
html {
  box-sizing: border-box;
  }

  *, *:before, *:after {
  box-sizing: inherit;
  }
 */
 :root{
    --light-gray: #f2f0f0;
    --gray: #e3e3e3;
    --dark-gray: #919191;
    --darker-gray: #545454;
    --logo-blue: rgb(0, 51, 153);
    --darker-blue: #1E40AF;
    --lighter-blue: rgb(102, 153, 204);
    --even-lighter-blue: #BFDBFE;
    --lightest-blue: #DBEAFE;
    --red: #FF0000;
    --dark-orange: #ED0707;
    --light-orange: #f9c56c;
    --even-lighter-orange: #fcdbb8;
    --strange-yellow: #dbae2e;
    --green: #34D399;
    --light-green: #E6F8DD;
    --medium-green: #A0C99C;
    --dark-green: #059669;

    accent-color: #1D4ED8;
    accent-color: var(--logo-blue);
  }

  *{
    box-sizing: border-box;
  }
  html{
    line-height: 1.225;
  }

  html, body{
    margin: 0;
    padding: 0;
  }

  body {
    font-family: verdana, arial, sans-serif, helvetica;
    background-color: #e5e5e5;
    /*font-size: 10pt;*/
    margin: 0;
  }

  /**
  a {
    font-weight: bold;
    text-decoration: none;
  }
  **/


  a:hover {
    text-decoration: underline;
    color: #cc0000;
  }

  h2 {
    font-size: 9pt;
    margin: 0;
    font-weight: bold;
  }

  p {
    line-height: 1.3;
  }

  /*
  ========================================
  Master Container
  ========================================
  */
  .master-container {
    margin: auto;
    width: 800px;
    background-color: white;
  }

  .container{
    width: 810px;
    max-width: 100%;
    margin: 0 auto 10px;
  }


  /*
  ========================================
  Main Header
  ========================================
  */
  .main-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgb(0, 51, 153);
    color: #ffffff;
    font-size: 10pt;
  }

  .main-header ul {
    list-style-type: none;
  }

  .main-header a:link {
    color: #ffffff;
    font-weight: normal;
  }

  .main-header a:visited {
    color: #ffffff;
  }

  .main-header a.active {
    font-weight: bold;
  }

  /*
  ========================================
  Search Bar
  ========================================
  */
  .search-bar {
    display: grid;
    grid-template-columns: .25fr 1fr .25fr;
  }

  .search-bar form {
    justify-self: center;
    margin: 0;
  }

  .search-bar form [type="text"] {
    width: 160px;
  }

  .search-bar form [type="radio"] {
    margin-right: .33rem;
  }

  .search-bar ul {
    display: flex;
  }

  .submit-btn {
    margin: 8px;
    border: 1px solid black;
    padding: 2px 7px;
    background-color: #E0FFFF;
    font-size: 10px;
    border-color: rgb(186, 186, 186);
  }

  .topnav {
    padding: 0;
    margin: 8px;
  }

  .topnav li:first-child::after {
    content: '|';
    margin: .33rem;
  }

  .home {
    justify-self: start;
  }

  .signup {
    justify-self: end;
  }

  /*
  ========================================
  Navigation Bar
  ========================================
  */

  .navbar {
    display: flex;
    align-items: center;
    margin-top: auto;
    background-color: rgb(102, 153, 204);
    height: 26px;
  }

  .navbar ul {
    display: flex;
    margin: 0 auto;
    padding: 0;
  }

  .navbar li.active {
    font-weight: bolder;
  }

  .navbar li::after {
    content: '|';
    margin: .33rem;
    color: black;
  }

  .navbar li:last-child::after {
    content: '';
  }

  .navbar a:hover {
    color: #003399;
  }

  /*
  ========================================
  Page Content Container
  ========================================
  */
  .page-content-container {
    display: grid;
    grid-template-columns: 325px 453px;
    grid-column-gap: 20px;
    grid-template-areas: "sidebar main";
  }

  /*
  ========================================
  Profile Sidebar Column
  ========================================
  */
  .profile-sidebar {
    grid-area: sidebar;
    margin-left: 27px;
    width: 300px;
  }

  h1 {
    font-size: 12.25pt;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 0px;
  }

  .profile-sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  /*
  ========================================
  Profile Picture Container
  ========================================
  */
  .profile-picture-container {
    display: grid;
    grid-template-columns: 170px 115px;
    grid-template-rows: 176px;
    grid-column-gap: 15px;
    margin-bottom: 12px;
  }

  .profile-picture-container p {
    margin: 0;
  }

  .general-about .profile-pic{
    display: block;
    float: left;
    margin: 0 15px 8px 0;
    height: 160px;
  }

  .profile-pic {
    grid-area: 1/1;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .personal-msg {
    grid-area: 1/2;
    margin: 0;
  }

  .gender-age {
    grid-area: 1/2;
  }

  .gender-age li:first-child {
    margin-top: 28px;
  }

  .last-login {
    grid-area: 1/2;
    align-self: end;
  }

  .last-login li:last-child {
    margin-bottom: 15px;
  }

  .pics-videos {
    grid-area: 1/1;
    justify-self: center;
    align-self: end;
  }

  /*
  ========================================
  Contact Box
  ========================================
  */
  .contact-box {
    border: 2px solid rgb(102, 153, 204);
    height: 149px;
    width: 300px;
    margin-bottom: 24px;
  }

  .contact-box h2 {
    color: white;
    background-color: rgb(102, 153, 204);
    height: 17px;
    padding-left: 10px;
  }

  .contact-images {
    display: grid;
    grid-template-columns: 150px 150px;
    margin: 0;
    margin-top: 5px;
    margin-left: 10px;
  }

  /*
  ========================================
  MySpace URL
  ========================================
  */
  .myspace-url-box {
    border: 1px solid rgb(102, 153, 204);
    height: 26px;
    margin-bottom: 24px;
  }

  .myspace-url-box h3,
  .myspace-url-box p {
    margin: 0;
    padding: 0;
  }

  .myspace-url-box h3 {
    font-size: 8pt;
    padding-left: 2px;
  }

  .myspace-url-box p {
    padding-left: 6px;
    ;
  }

  /*
  ========================================
  Sidebar Table Class
  ========================================
  */
  .sidebar-table {
    border: 2px solid rgb(102, 153, 204);
    display: table;
    border-collapse: separate;
    border-spacing: 3px;
  }

  .sidebar-table-h2 {
    background-color: rgb(102, 153, 204);
    color: white;
    text-align: left;
    height: 17px;
    padding-left: 15px;
    padding-top: 2px;
  }

  .sidebar-table-header {
    vertical-align: top;
    text-align: left;
    width: 107px;
    background-color: rgb(177, 208, 240);
    color: #336699;
    padding: 3px;
    font-weight: bold;
    font-size: 8pt;
  }

  .sidebar-table-data {
    width: 184px;
    background-color: rgb(213, 232, 251);
    padding: 3px;
  }

  /*
  ========================================
  Interests
  ========================================
  */
  .interests p {
    margin-top: 0;
  }

  .interests p:only-child,
  .interests p:last-child {
    margin-bottom: 0;
  }

  .interests table {
    margin-bottom: 13px;
  }

  /*
  ========================================
  Details
  ========================================
  */
  .details table {
    margin-bottom: 22px;
  }

  /*
  ========================================
  Schools
  ========================================
  */
  .schools .sidebar-table-header {
    width: 228px;
    color: black;
    font-weight: normal;
  }

  .schools .sidebar-table-data {
    width: 63px;
    text-align: center;
    vertical-align: top;
  }

  .schools ul {
    margin-bottom: 2em;
  }

  /*
  ========================================
  Main Column
  ========================================
  */
  main {
    grid-area: main;
  }

  /*
  ========================================
  User Network
  ========================================
  */
  .user-network {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 433px;
    margin: auto;
    height: 75px;
    border: 2px solid black;
    margin-top: 13px;
  }

  .user-network h2 {
    font-size: 12pt;
  }

  /*
  ========================================
  Blog
  ========================================
  */
  .blog {
    display: grid;
    grid-auto-rows: 29px;
    flex-direction: column;
    margin-top: 13px;
    margin-left: 12px;
    margin-bottom: 16px;
  }

  .blog p {
    margin-top: 3px;
  }

  /*
  ========================================
  Blurbs
  ========================================
  */
  .main-section-header {
    background-color: #ffcc99;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-bottom: 8px;
  }

  .main-section-h2 {
    color: #FF6600;
    margin-left: 20px;
  }

  .blurbs h3 {
    margin: 0;
    color: #FF6600;
    font-size: 9pt;
    margin-left: 15px;
  }

  .blurbs p:nth-of-type(5) {
    margin-bottom: 2em;
  }

  .blurbs p {
    margin: 0 10px 15px 15px;
  }

  .info {
    color: green;
    font-weight: bold;
  }

  /*
  ========================================
  Friend Space
  ========================================
  */
  .friends header {
    margin-bottom: 6px;
  }

  .friends p:nth-of-type(1) {
    margin-top: 0;
    margin-left: 15px;
  }

  .focus-highlight {
    color: #cc0000;
    font-weight: normal;
    font-size: 10pt;
  }

  .friend-pic-container {
    display: grid;
    grid-template-columns: repeat(4, 109px);
    grid-template-rows: 160px 193px;
  }

  .friend-pic-container figure {
    margin: 0;
  }

  .friend-pic-container figcaption {
    text-align: center;
  }

  .friend-pic-container img {
    display: block;
    margin: auto;
  }

  .friends-list-link {
    display: flex;
    justify-content: flex-end;
  }

  .friends-list-link {
    margin-top: 7px;
    margin-right: 8px;
    margin-bottom: 30px;
  }

  .friends-list-link a {
    color: #cc0000;
  }

  /*
  ========================================
  Comment Wall
  ========================================
  */
  .comment-wall .main-section-header {
    margin-bottom: 3px;
  }

  .comment-wall .main-section-h2 {
    margin-bottom: 0;
  }

  #comment-counter {
    margin-top: 0;
    margin-left: 15px;
    margin-bottom: 3px;
  }

  .comment-wall table {
    margin: auto;
    margin-bottom: 5px;
  }

  .comment-wall th {
    background-color: rgb(255, 153, 51);
    width: 158px;
    padding: 3px;
    vertical-align: top;
  }

  .comment-wall td {
    vertical-align: top;
    background-color: rgb(249, 214, 180);
    width: 269px;
    padding: 3px;
  }

  .comment-wall figcaption,
  .comment-wall figure {
    margin: 0;
  }

  .comment-wall figcaption {
    margin-bottom: 1em;
  }

  .comment-wall figure {
    margin-bottom: 49.33px;
  }

  .comment-wall h3 {
    font-size: 10pt;
    margin: 0;
    margin-bottom: 1em;
  }

  .comment-wall p {
    font-weight: normal;
    text-align: left;
    margin: 0;
  }

  #add-comment {
    text-align: right;
    margin-right: 10px;
    margin-bottom: 5px;
  }

  /*
  ========================================
  Footer
  ========================================
  /*
  footer {
    display: grid;
    grid-template-rows: 16px 39px;
    background-color: #e5e5e5;
    padding-top: 10px;
    height: 65px;
  }

  footer a {
    text-decoration: underline;
    font-weight: normal;
    font-size: 8pt;
  }

  footer ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  footer li:after {
    content: ' | ';
    font-weight: normal;
  }

  #last:after {
    content: none;
  }

  footer small {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
    font-size: 8pt;
    font-weight: normal;
  }

  */
  /** breaks homepage columns
  .left {
    float: left;
    width: calc(40% - 20px);
  }

  .right {
    float: right;
    width: calc(60% - 20px);
  }
  **/

  audio {
    width: 190px;
  }

  .info {
    background-color: #6699cc;
    color: white;
  }

  .commentLeft {
    background-color: #fc9;
  }

  .commentRight {
    background-color: #f93;
    margin-bottom: 1px;
  }

  .commentRight img{
    width: 100px;
  }

  .commentRight .commentPictures{
    width: 80px;
  }

  .contactInfo {
    padding: 5px;
    border: 1px solid black;
  }

  .contactInfoTop {
    background-color: #6699cc;
  }

  .friendsGrid {
    display: grid;
    grid-template-columns: auto auto auto auto;
    padding: 5px;
  }

  .friendsGridItem {
    border: 1px solid black;
    padding: 10px;
  }

  .banner {
    color: white;
    border: 1px solid black;
  }

  .commentRight span {
    font-size:medium!important;
  }

  .friendRequestAlert {
    color: yellow;
  }

  .topBarWithItemsThing {
    background-color: #f1f6f2;
    border: 1px solid #e7e8e2;
    border-radius: 5px;
    padding: 5px;
    color: #838d96;
  }

  .topBarWithItemsThing a {
    color: #838d96;
  }