ITPDM squishy stacked

by mrjordy

HTML

<div id ="HeaderContainer">
     <div class="HeaderTitle">IT Portfolio Design &amp; Management</div>
     <div class="HeaderTitleSmall">ITPDM</div>
     <div class="HeaderSub"></div>
     <div class="GUI"></div>
     <div class="Background-Canvas"></div>
     <div class="Background-Image"></div>
     <div class="Background-Overlay"></div>
     <div class="Floating-Image"></div>
     <div class="Floating-Image2"></div>
     <div class="diag-noselect"></div>
     <div class="C toggle"></div>
     <div class="C-popup hidden">
		<a href="">
         <div class="PopupTitle">Control</div>
		</a>
         <div class="PopupText">Description.
         </div>
    </div>
     <div class="TL toggle"></div>
     <div class="TL-popup hidden">
		<a href="#">
		 <div class="PopupTitle">Select</div>
		</a>
         <div class="PopupText">Description.
         </div>
         <a href="#">
             <div class="NavToPage">Navigate To Page &nbsp;&#187;</div>
         </a>
    </div>
     <div class="TR toggle"></div>
     <div class="TR-popup hidden">
		<a href="#">
		 <div class="PopupTitle">Prioritize</div>
		</a>
         <div class="PopupText">Description.
         </div>
         <a href="#">
             <div class="NavToPage">Navigate To Page &nbsp;&#187;</div>
         </a>
    </div>
     <div class="BR toggle"></div>
     <div class="BR-popup hidden">
		<a href="#">
         <div class="PopupTitle">Analyze</div>
		</a>
         <div class="PopupText">Description.
         </div>
         <a href="#">
             <div class="NavToPage">Navigate To Page &nbsp;&#187;</div>
         </a>
    </div>
     <div class="BL toggle"></div>
     <div class="BL-popup hidden">
		<a href="#">
         <div class="PopupTitle">Evaluate</div>
		</a>
         <div class="PopupText">Description.
         </div>
         <a href="#">
             <div class="NavToPage">Navigate To Page &nbsp;&#187;</div>
         </a>
    </div>
</div>
<div id="preload">
    <img...

CSS

#preload {
    display: none; 
}
#HeaderContainer {
    width: 100%;
    height: 308px;
    overflow: hidden;
    border-radius: 4px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30px;
    position: relative;
}
#HeaderContainer > .HeaderTitle {
    font-family: helvetica;
    position: absolute;
    z-index: 9;
    margin-top: 8px;
    padding-left: 16px;
    padding-top: 2px;
    width: calc(100% - 24px);
    height: 32px;
    color: white;
    vertical-align: middle;
    line-height: normal;
    font-size: 24px;
    background: #3E628F;
}
@media screen and (min-width: 721px) {
#HeaderContainer > .HeaderTitleSmall {
    display: none;
}
}
@media screen and (max-width: 720px) {
#HeaderContainer > .HeaderTitleSmall {
    font-family: helvetica;
    position: absolute;
    z-index: 9;
    margin-top: 8px;
    padding-left: 16px;
    padding-top: 2px;
    width: calc(100% - 24px);
    height: 32px;
    color: white;
    vertical-align: middle;
    line-height: normal;
    font-size: 24px;
    background: #3E628F;
}
#HeaderContainer > .HeaderTitle {
    display: none;
}
}
#HeaderContainer > .HeaderSub {
    font-family: helvetica;
    position: absolute;
    z-index: 9;
    margin-top: 16px;
    margin-left: 355px;
    width: auto;
    height: 32px;
    color: #ddd;
    vertical-align: middle;
    line-height: normal;
    font-size: 16px;
}
@media screen and (min-width: 900px) {
#HeaderContainer > .Background-Canvas {
    background: black;
    background: linear-gradient(to bottom, #763D34 0%,rgb(114, 55, 40) 45%,#560000 74%,#161604 74%,#170000 71%,#0C0000 100%);
    width: calc(100% - 8px);
    height: 279px;
    margin-top: 40px;
    position: absolute;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    overflow: hidden;
    background-position: right;
    z-index: 1;
    background-repeat: no-repeat;
}
#HeaderContainer > .Background-Image {
    background:...

JavaScript

jQuery(document).ready(function() {
    jQuery(".toggle").next(".hidden").hide();
    jQuery(".toggle").click(function() {
        $('.active').not(this).toggleClass('active').next('.hidden').fadeToggle(100);
        $(this).toggleClass('active').next().fadeToggle(500);

    });
});