:root {
                --header-image: url('/images/layout_images/01_dearlybeloved/header_layout01srsummertime_v4.png');
                --body-bg-image: url('/images/fullbgs/bg_destinyisland.jpg');
                
                --page-bg: #2c2c2b;
                --content-bg: #fff;
                --container-bg: #fff;
                --main-font: #333;
                --border-color: #BDE3F9;
                --link-color: #5687a8;
                --link-color-hover: #a2ffff;
                --accent-color: #5779A9;
                --h1-shadow: #E1F1F6;
                
                --speech-bubble-background: rgb(226 232 240);
                --speech-bubble-arrow-size: 1rem;
                --reply-bubble-background: rgb(20, 126, 251);
                --reply-bubble-arrow-size: 1rem;
            }
            
            body {
              font-family: 'Helvetica';
              font-size: 20px;
              color: var(--main-font);
              background-color: var(--page-bg);
              text-align: justify;
              line-height: 1.5em;
              letter-spacing: 0.05em;
            }
            
            b, strong {
              color: #513232;
              font-weight: 600;
            }
            
            a, a:visited {
              color: #70201E;
              text-decoration: none;
              font-weight: 600;
              -webkit-transition: all 0.3s;
              -moz-transition: all 0.3s;
              -ms-transition: all 0.3s;
              -o-transition: all 0.3s;
              transition: all 0.3s;
            }
            
            a:hover {
              color: #ccc;
              text-decoration: none;
              font-weight: 600;
              -webkit-transition: all 0.3s;
              -moz-transition: all 0.3s;
              -ms-transition: all 0.3s;
              -o-transition: all 0.3s;
              transition: all 0.3s;
            }
            
            h1 {
              display: block;
              border-bottom: 1px solid #ccc;
              padding-bottom: 15px;
            }
            
            .box {
              border: 1px solid #ccc;
              padding: 20px;
              width: 93%;
              display: block;
              margin: 20px auto;
              font-size: 0.7em;
              background: #eee;
            }
            
            header {
              position: fixed;
              top: 0;
              left: 0;
	            width: 100%;
	            height: 6rem;
	            background-color: var(--content-bg);
	            border-bottom: 1px solid #ccc;
	            z-index: 999999;
            }
            
header img {
  max-width: 45vw;
  height: auto;
  margin: 15px;
  position: absolute;
  left: 0vw;
  top: 0vh;
}
            
nav {
  display: inline-block;
  margin: 15px 6px 0 0;
  right: 0vw;
  top: 5vh;
  position: fixed;
}
            
            nav a, nav a:visited {
              display: inline-block;
              margin-right: 10px;
              padding: 4px 10px;
              font-size: 14px;
              color: #333;
              text-decoration: none;
              text-transform: lowercase;
              font-weight: bold;
              -webkit-transition: background-color 0.5s ease;
              -moz-transition: background-color 0.5s ease;
              -o-transition: background-color 0.5s ease;
            }
            
            nav a:hover {
              background: rgba(0,0,0,.1);
              -webkit-transition: background-color 0.5s ease;
              -moz-transition: background-color 0.5s ease;
              -o-transition: background-color 0.5s ease;
            }
            
            footer {
              display: block;
              margin: 0 auto;
              padding: 10px;
              background: #fff;
              text-align: center;
              font-size: 0.6em;
            }

            #container {
	            margin: 85px auto;
	            max-width: 900px;
            }

            section {
	            height: 100%;
	            background-color: var(--content-bg);
	            padding: 35px;
            }
            
            .items {
              width: 95%;
              margin: 0 auto;
            }

			      .pager div {
			        color: #F2E9E8;
			        background-color: #70201E;
              border: 1px solid #ccc;
              padding: 10px;
              display: inline-block;
              margin: 0 auto;
              width: auto;
			      }

			      .pager .disabled {
				      opacity: 0.25;
			      }

			      .pager .pageNumbers a {
				      display: inline-block;
				      padding: 0 10px;
				      color: #fefefe;
			      }

			      .pager .pageNumbers .active {
				      color: #D8BDBC;
			      }

			      .pager {
				      overflow: hidden;
				      margin-top: 30px;
			      }
			      
			      .alignment {
			        display: block;
			        margin: 0 auto;
			      }
            
            .hr {
              display: block;
              border: 1px solid rgba(204, 204, 204, 0.5);
              margin: 60px auto;
              height: 2px;
            }
            
            .speech-bubble {
              position: relative;
              background: var(--speech-bubble-background);
              border-radius: 1rem;
              padding: 20px;
              margin: 25px;
              text-align: left;
            }
            
            .speech-bubble::before {
              content: '';
              position: absolute;
              bottom: 0;
              left: calc(-1 * var(--speech-bubble-arrow-size));
              border-width: var(--speech-bubble-arrow-size);
              border-style: solid;
              border-color: transparent transparent
              var(--speech-bubble-background) transparent;
            }
            
            .reply-bubble {
              position: relative;
              background: var(--reply-bubble-background);
              border-radius: 1rem;
              padding: 20px;
              margin: 25px;
              text-align: right;
              color: #fff;
            }
            
            .reply-bubble::before {
              content: '';
              position: absolute;
              bottom: 0;
              right: calc(-1 * var(--reply-bubble-arrow-size));
              border-width: var(--reply-bubble-arrow-size);
              border-style: solid;
              border-color: transparent transparent
              var(--reply-bubble-background) transparent;
            }
            
            .displayname {
              display: block;
              font-size: 0.7em;
              color: #cc7e7e;
            }
            
            .displayname-reply {
              display: block;
              font-size: 0.7em;
              color: #EFD8D8;
            }
            
            table.tftwst {
              border: 2px solid #7D2422;
              width: 100%;
              height: 200%;
              text-align: center;
              border-collapse: collapse;
            }
            
            table.tftwst td, table.tftwst th {
              border: 1px solid #CCCCCC;
              padding: 6px 1px;
            }
            
            table.tftwst tbody td {
              font-size: 14px;
              color: #000000;
              width: 50%;
            }
            
            table.tftwst thead {
              background: #7D2422;
            }
            
            table.tftwst thead th {
              font-size: 15px;
              font-weight: bold;
              color: #E6E6E6;
              text-align: center;
            }
            
            table.tftwst tfoot td {
              font-size: 12px;
            }