Another Site Top Box

<!-- THIS IS YOUR INFORMATION BOX WITH INFORMATION -->
			
			<div class="tborder flex">
				
				<!-- LEFT COLUMN WITH TABBED STUFF --> 
				<div class="trow1 left">
					<div class="tabbedholder">
						<!-- THESE ARE THE TABS -->
						<!-- INTRO -->
						<input type="radio" name="kit-tabs" id="intro" checked="checked" />
						<label for="intro">intro</label>
						<!-- OOC NEWS -->
						<input type="radio" name="kit-tabs" id="oocnews" />
						<label for="oocnews">ooc news</label>
						<!-- IC NEWS -->
						<input type="radio" name="kit-tabs" id="icnews" />
						<label for="icnews">ic news</label>
						<!-- RECENT POSTS -->
						<input type="radio" name="kit-tabs" id="recentposts" />
						<label for="recentposts">recent posts</label>
						<!-- END TABS -->
						
						<!-- YOUR CONTENT STARTS HERE -->
						
						<!-- INTRO STUFF -->
						<div class="info intro">
							<div>
								Your introduction here. Bucko piracy keelhaul chase scallywag snow ho plunder Chain Shot lugger. Yo-ho-ho hail-shot come about bring a spring upon her cable case shot to go on account wherry lateen sail Arr long boat. Heave down black spot six pounders rope's end bilge square-rigged deadlights ahoy sutler scourge of the seven seas. Lee plunder gun Pieces of Eight nipper furl splice the main brace matey topmast hearties. Boatswain trysail bounty hardtack black jack ye skysail belay draught salmagundi. Scuppers hardtack pink holystone gangplank six pounders reef Gold Road mutiny parley. No posts have been made in this forum.
							</div>
						</div>
						<!-- END INTRO -->
						<!-- OOC NEWS STUFF -->
						<div class="info oocnews">
							Your ooc news here
						</div>
						<!-- END OOCS NEWS -->
						<!-- IC NEWS STUFF -->
						<div class="info icnews">
							your ic news here
						</div>
						<!-- END IC NEWS -->
						<!-- RECENT POSTS STUFF -->
						<div class="info recentposts">
							your recent posts here
						</div>
						<!-- END RECENT POSTS -->
						
						<!-- YOUR CONTENT ENDS HERE -->
					</div>
				</div>
				<!-- END LEFT CONTENT -->
				
				<!-- START OF STAFF -->
				<div class="trow1 middle">
					<div class="staff1">
						<h3>Title</h3>
						<a href="#">Name</a>
					</div>
					<div class="staff2">
						<h3>Title</h3>
						<a href="#">Name</a>
					</div>
				</div>
				<!-- END OF STAFF -->
				
				<!-- RELEASE THE LINKS OF WAR! -->
				<div class="trow1 right">
					<div class="links row1">
						<a class="counts" href="#">
							Link one
						</a>
						<a class="counts" href="#">
							Link two
						</a>
						<a class="counts" href="#">
							Link three
						</a>
						<a class="counts" href="#">
							Link four
						</a>
					</div>
					<div class="links row2">
						<a class="counts" href="#">
							Link 1
						</a>
						<a class="counts" href="#">
							Link 2
						</a>
						<a class="counts" href="#">
							Link 3
						</a>
						<a class="counts" href="#">
							Link 4
						</a>
					</div>
				</div>
				<!-- END THE LINKS -->
			</div>
			
			<!-- END THE INFORMATION BOX -->

<style>.tborder.flex {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin: 5px 30px 15px 30px;
	width: auto;
}

.tborder.flex > .trow1 {
	padding: 0;
}

.trow1.left {
	width: 50%;
}

.info.intro div::first-letter {
	font-size: 2em;
	float: left;
	line-height: 120%; /* change this value to make it inline with the rest of the text */
	margin-right: 2px;
}

.tborder.flex > .trow1.middle {
	margin: 0 5px;
	text-align: center;
}

/* this is the tabbed stuff */

/* button styling */
.tabbedholder input {
  display: none; /* hide the radio button */
}

.tabbedholder label {
  position: relative; /* so we can move the buttons to the right */
  display: inline-block;
  text-align: center;
	padding: 5px;
}

.tabbedholder label:hover /* alert users that something happens when they click */ {
  cursor: pointer;
}

/* the 'active' tab should look different */
.tabbedholder #intro:checked ~ label[for="intro"],
.tabbedholder #oocnews:checked ~ label[for="oocnews"],
.tabbedholder #icnews:checked ~ label[for="icnews"],
.tabbedholder #recentposts:checked ~ label[for="recentposts"],
.tabbedholder #subbed-threads:checked ~ label[for="subbed-threads"]{
  z-index: 1;
	color: #efefef;
}

.info {
  position: relative;
  display: none;
}

.tabbedholder #intro:checked ~ .intro { display: block; }
.tabbedholder #oocnews:checked ~ .oocnews { display: block; }
.tabbedholder #icnews:checked ~ .icnews { display: block; }
.tabbedholder #recentposts:checked ~ .recentposts { display: block; }
.tabbedholder #subbed-threads:checked ~ .subbed-threads { display: block; }

/* end the tabbed stuff */

/* of the season stuff */

.trow1.middle {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
}

.trow1.middle h3 {
	font-size: 2em;
	margin: 5px 0;
	padding: 1px;
	color: #000;
}

.trow1.middle a {
	color: #1a1a1a;
}

.staff1,
.staff2 {
	padding: 10px;
	margin-bottom: 5px;
	width: 200px;
}

/* staff one image */
.staff1 {
	background: url(https://via.placeholder.com/500x200);
	background-position: center;
	background-size: cover;
}


/* staff two image */
.staff2 {
	background: url(https://via.placeholder.com/500x200);
	background-position: center;
	background-size: cover;
}

/* links */

.trow1.right {
	display: flex;
	flex-grow: 2;
}

.trow1.middle > div {
	height: 49%;
}

.links {
	display: flex;
	flex-direction: column;
	flex-basis: 49%;
}

.links a {
	display: flex;
	margin: 5px 0 0 0;
	padding: 5px;
	height: 100%;
	justify-content: center;
	align-items: center;
  background: #262626;
}

.links.row1 {
	margin-right: 5px;
}

.trow1.right > div a:first-child {
	margin-top: 0;
}

.trow1.right > div a:last-child {
	margin-bottom: 5px;
}

/* recent posts */

.recent-posts {
	max-height: 155px;
	overflow: auto;
}

/* stuff for mobile */
@media only screen and (max-device-width: 480px) {
	.tborder.flex {
		flex-wrap: wrap;
	}
	
	.tabbedholder label {
		padding: 5px 10px;
		font-size: 1.5em;
	}
	
	.tborder.flex > .trow1.middle {
		margin: 0 5px 0 0;
	}
	
	.tborder.flex > .trow1.left {
		flex-basis: 100%;
		flex-grow: 2;
		margin-bottom: 5px;
	}
	
	.staff2 {
		margin-bottom: 0;
	}
  
  .trow1.middle > div {
    width: 100%;
  }
  
  .trow1.right > div a:last-child {
	margin-bottom: 0;
}
  
  
    }</style>