Vier Large Final

<style>

.pfor {display: none;}
#profile {background: transparent; border: 0;}

body{ background: #313447;
color: black;
}

::-webkit-scrollbar
{
        width: 4px;
  background-color:  gray;
}

::-webkit-scrollbar-thumb
{
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #313447 ;
}



@font-face{
  font-family: 'headerfont';
  src: url(https://dl.dropboxusercontent.com/u/4556289/Crazy%2BThoughts.ttf);
}

@font-face{
  font-family: 'bodyfont';
  src:url(https://dl.dropboxusercontent.com/u/4556289/yataghan.ttf);
}

#container {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  height: 700px;
  width: 902px;
  border: 0px solid black;
  box-sizing: border-box;
}

#centerbox {
  top: 0px;
  border: 1px solid black;
  border-top: 5px solid black;
  border-bottom: 5px solid black;
  position: absolute;
  z-index: 1;
  left: 300px;
  height: 100%;
  width: 298px;
  border-radius: 20px 20px 20px 20px;
  background: #BBBBC4;
}

#rightbox {
  border: 1px solid black;
  position: absolute;
  left: 575px;
  top: 2px;
  height: 693px;
  width: 298px;
  border-radius: 0px 180px 80px 0px;
  border-bottom: 7px solid black;
  border-top: 6px solid black;
  overflow: hidden;
  background: #BBBBC4;
}

#leftbox {
  border: 1px solid black;
  position: absolute;
  left: 30px;
  top: 2px;
  height: 693px;
  width: 298px;
  border-radius: 180px 0px 0px 80px;
  border-bottom: 7px solid black;
  border-top: 6px solid black;
  overflow: hidden;
  background: #BBBBC4;
}

#selectionone {
  position: absolute;
  left: 290px;
  width: 20px;
  top: 5px;
  height: 100%;
  border: 0px solid black;
  background: black;
  box-sizing: border-box;
  padding-top: 200px;
  z-index: 2;
}

#selectiontwo {
  position: absolute;
  left: 590px;
  width: 20px;
  top: 5px;
  height: 100%;
  border: 0px solid black;
  background: black;
  box-sizing: border-box;
  padding-top: 200px;
  z-index: 2;

}

a.lynk {
  margin-bottom: 60px;
  margin-left: 2.5px;
  float: left;
  height: 70px;
  width: 15px;
  border-radius: 10px 10px 10px 10px;
  box-sizing: border-box;
  border: 2px solid black;
  background: gray;
  -webkit-transition: all 1s;
}

a.lynk:hover{
  border: 6px solid black;
}

#tabcontainer {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 10px;
  margin: auto;
  width: 250px;
  height: 680px;
  border: 0px solid black;
  overflow: hidden;
}

.tabb {
  position: relative;
  width: 248px;
  height: 695px;
  border: 0px solid red;
  margin-bottom: 5px;
}

#headingleft {
  position: absolute;
  top: 40px;
  right: 10px;
  height: 20px;
  width: 200px;
  border: 0px solid black;
  margin-right: 5px;
  text-align: right;
  font-family: 'headerfont';
  font-size: 30pt;
}

#headingright {
  position: absolute;
  top: 40px;
  left: 10px;
  height: 20px;
  width: 200px;
  border: 0px solid black;
  margin-left: 5px;
  text-align: left;
  font-family: 'headerfont';
  font-size: 30pt;
}

#textcontainer {
  position: absolute;
  top: 75px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  height: 585px;
  width: 245px;
  border: 0px solid black;
  box-sizing: border-box;
  padding-left: 8px;
  padding-right: 8px;
  text-align: right;
  font-family:'bodyfont';
  font-size: 9pt;
  overflow: auto;
}

#textcontainer a.image{float: left;
margin-bottom: 20px;
margin-left: 10px;
width: 200px;
height: 200px;
border: 1px solid #313447;
border-radius: 20px 20px 20px 20px;
background-size: 100%;
background-repeat: no-repeat;
background-color: black;
overflow: hidden;}

#textcontainer img{
  width: 100%;
}

#centerbackground{position: absolute;
height: 100%;
width: 100%;
  background-image: url(http://i60.tinypic.com/i5dkrn.jpg);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
opacity: 1;
-webkit-transition: all 1s;
transition: all 1s;}

#centertext{
  position: absolute;
  height: 60px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  box-sizing: border-box;
  border-radius: 10px 10px 0px 0px;
  -webkit-transition: all 1s;
  transition: all 1s;
  border: 1px solid black;
  background: black;
  color: gray;
  padding-top: 2px;
  font-family: 'bodyfont';
  font-size: 9pt;
  text-align: center;
}

</style>



<div id="container">
  <div id="leftbox">
    <div id="tabcontainer">

      <div id="firstL" class="tabb">
        <div id="headingleft">

FIRST LEFT TITLE.

        </div>
        <div id="textcontainer">

FIRST LEFT INFORMATION GOES HERE.

        </div>
      </div>

      <div id="secondL" class="tabb">
        <div id="headingleft">

SECOND LEFT TITLE.

        </div>
        <div id="textcontainer">

SECOND LEFT INFORMATION GOES HERE.

        </div>
      </div>

      <div id="thirdL" class="tabb">
        <div id="headingleft">

THIRD LEFT TITLE.

        </div>
        <div id="textcontainer">

THIRD LEFT INFORMATION GOES HERE.

        </div>
      </div>

    </div>
  </div>

  <div id="centerbox">
    <div id="centerbackground">
    </div>
    <div id="centertext">

BASEBALL STATS GO HERE.

    </div>
  </div>

  <div id="rightbox">

    <div id="tabcontainer" style="left: 30px;">

      <div id="fourthL" class="tabb">
        <div id="headingright">

FIRST RIGHT TITLE.

        </div>
        <div id="textcontainer" style="text-align: left;  left:5px;">

FIRST RIGHT INFORMATION GOES HERE.

        </div>
      </div>

      <div id="fifthL" class="tabb">
        <div id="headingright">

SECOND RIGHT TITLE.


        </div>
        <div id="textcontainer" style="text-align: left; left:5px;
/* ALL GALLERY IMAGES GO HERE */">



          <a href="" class="image" target="_blank">
          <img src="http://i60.tinypic.com/i5dkrn.jpg"></a>

          <a href="" class="image" target="_blank">
          <img src="http://i60.tinypic.com/i5dkrn.jpg"></a>

          <a href="" class="image" target="_blank">
          <img src="http://i60.tinypic.com/i5dkrn.jpg"></a>

          <a href="" class="image" target="_blank">
          <img src="http://i60.tinypic.com/i5dkrn.jpg"></a>

        </div>
      </div>

      <div id="sixthL" class="tabb">
        <div id="headingright">

THIRD RIGHT TITLE.

        </div>
        <div id="textcontainer" style="text-align: left; left:5px;">

THIRD RIGHT INFORMATION GOES HERE.

        </div>
      </div>

    </div>
  </div>
  <div id="selectionone">
    <A href=#firstL class="lynk">
    </a>
    <A href=#secondL class="lynk">
    </a>
    <A href=#thirdL class="lynk">
    </a>
  </div>
  <div id="selectiontwo">
    <A href=#fourthL class="lynk">
    </a>
    <A href=#fifthL class="lynk">
    </a>
    <A href=#sixthL class="lynk">
    </a>
  </div>
</div>