.Border
{
    border: 1px solid #F0F0F0;
}

body
{
    display: block;
    cursor: default;
    font-family: 'Times New Roman';
    padding: 0;
    margin: 0;
    color: #111;
    background-color: #fafafa;
    min-width: 500px;
}
.InfoButton{
    position:fixed;
    top:0px;
    float:right;

    color:black;
}

.TitleBar
{
    background-color: white;
    background-color: rgba(255,255,255,0.0);
    padding-right: 25px;
    right: 15px;
    padding: 15px;
    margin: 0;
    margin-top:-50px;
    position: fixed;
    text-align: left;
    font-size: 14pt;
    letter-spacing: 0.2pt;
    float: left;
    clear: both;
    /*text-shadow: 0 0 25px #FFF;*/
    overflow: hidden;
    z-index:5000;
}

.ToTopButton{
  font-family: 'Times New Roman';
    font-size:18pt;
    padding:15px;
    font-weight: normal;
}

.Navigation
{
    padding: 0;
    margin: 0;
    min-width: 110px;
    max-width: 205px;
    width: 10%;
    top: 72px; /*110px;*/
    bottom: 25px;
    position: fixed;
    float: left;
    clear: left;
    background-color: white;
    background-color: rgba(255,255,255,0.9);
}

    .Navigation li
    {
        list-style: none;
        padding-left: 5px;
        padding-right: 5px;
        cursor: pointer;
    }

    .Navigation a:hover::after
    {
        content: ' •'
    }

.MainPanel
{
    position: absolute;
    top: 0;
    overflow-y: scroll;
    bottom: 0;
    float: left;
    clear: both;
    left: 10%;
    right: 10%;
    text-align: center;
    padding-top:0px;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
}

    .MainPanel::-webkit-scrollbar
    {
        width: 0 !important;
    }

.ProjectTile
{
    position: relative;
    min-width: 34%;
    min-height: 34%;
    float: left;
    text-align: center;
    right: 0;
}

    .ProjectTile img
    {
        width: 100px;
        height: auto;
        background-size: cover;
    }

.ImageContainer
{
    position: relative;
    width: 100%;
    float: left;
    
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:30px;        /*This is the gap between images.*/
}

/*    .ImageContainer img
    {
        padding-top: 10px; /*This is the gap at the top of the page.
        margin-left: auto;
        margin-right: auto;
        width: auto;
        height: 100%;
        background-size: cover;
    }
*/
        .MainPanel > img:last-of-type
        {
            padding-bottom: 110px;
        }

/*Does the bold effect and horizontal spacing between image info labels and info*/
.ImageInfoLabel
{
    font-weight: bold;
    width: 100px;
    clear: left;
    text-align: left;
}

.ImageInfo, .ImageInfoLabel
{
    padding-right: 15px;
}
/*Ensure the image complies with the order of the image info*/
.ImageInfo, .ImageInfoLabel
{
    float: left;
}

/*Does the spacing above image Description*/
.ImageContainer div label:last-of-type
{
    margin-top: 10px;
}

/*Drops the image description below the image description label*/
#ImgDescription
{
    margin-top: 0;
    float: left;
    clear: both;
}

a
{
    text-decoration: none;
    color: #111;
    cursor: pointer;
}

    a:visited
    {
        color: #111;
    }

    a :hover
    {
        border-radius: 3px;
        background-color: #EEF;
    }

ul
{
    padding-left: 10px;
}

footer
{
    background-color: white;
    background-color: rgba(255,255,255,0.0);
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    text-align: right;
    padding: 3px;
    padding-right: 15px;
    text-shadow: 0 0 25px #FFF;
}

li a
{
    transition-duration: 0.2s;
    padding: 2px;
    padding-left: 5px;
    display: block;
}

    li a:hover
    {
        transition-duration: 0s;
        background-color: #ddfffF;
        border-radius: 1px;
    }


.Breadcrumbs
{
    background-color: white;
    background-color: rgba(255,255,255,0.9);
    font-size: 12pt;
    color: #999;
    position: fixed;
    top: 78px;
    left: 0;
    padding: 2px;
    padding-left: 25px;
    margin: 0;
    float: left;
    clear: both;
    width: 100%;
}

    .Breadcrumbs ul
    {
        padding: 0;
        margin: 0;
    }

        .Breadcrumbs ul li
        {
            transition-duration: 0.2s;
            text-align: center;
            padding: 3px;
            padding-left: 20px;
            padding-right: 30px;
            float: left;
            margin-right: -22px;
            list-style-type: none;
            border: 1px solid lightgrey;
            border-bottom-left-radius: 15px;
            border-top-left-radius: 90px;
            border-right: none;
            background-color: #FFF;
        }

            .Breadcrumbs ul li:hover
            {
                color: black;
                transition-duration: 0.5s;
                background-color: #E0E0F0;
            }

            .Breadcrumbs ul li:last-of-type
            {
                color: #555;
                border-right: 1px solid lightgrey;
                border-bottom-right-radius: 90px;
                border-top-right-radius: 15px;
                /*content: ' > ';*/
            }

                .Breadcrumbs ul li:last-of-type:hover
                {
                    color: black;
                }

.ScrollIndicator
{
    animation: Ebb;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    background-color: black;
    background-color: rgba(0,0,0,0);
    transition-duration: 0.5s;
    color: black;
    position: absolute;
    float: left;
    width: 100%;
    z-index: 100;
    height: 75px;
    visibility: hidden;
    text-align: center;
}



.ScrollIndicatorUp
{
    top:0;
    content:'^';
}

.ScrollIndicatorDown
{
    bottom:0;
    content: 'V';
}

.ScrollIndicatorVisible
{
    visibility:visible;
}

@keyframes Ebb
{
    0%
    {
        background-color: white;
        background-color: rgba(255,255,255,0.05);
    }
    25%
    {
        background-color: white;
        background-color: rgba(255,255,255,0.1);
    }
    75%
    {
        background-color: white;
        background-color: rgba(255,255,255,0.1);
    }

    100%
    {
        background-color: white;
        background-color: rgba(255,255,255,0.05);
    }
}

.ScrollIndicator:hover
{
    animation: none;
    transition-duration: 1s;
    background-color: white;
    background-color: rgba(255,255,255,0.2);
}

@media only screen and (orientation: portrait)
{ 
    .ImageContainer
    {
        position: relative;
        width: 100%;
        float: left;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        
    }
    .ImageContainer img
    {
        padding-top: 50px; /*This is the gap between images.*/
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
        background-size: cover;
    }
        .MainPanel > .ImageContainer:first-of-type
        {
            padding-top: 50px;
        }
}

@media only screen and (orientation: landscape)
{   
    .ImageContainer
    {
        position: relative;
        height: 75%;
        float: left;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        margin-bottom:100px;
        
    }
        .ImageContainer img
        {
            padding-top: 110px;  /*This is the top gap.*/
            margin-left: auto;
            margin-right: auto;
            width: auto;
            height: 100%;
            background-size: cover;
        }
}