﻿#main-content
{
    overflow-x:hidden;
}

.header
{
    background-image: url("../Images/hay.jpg");
    background-repeat: no-repeat;
    background-position:0% 100%;
    background-attachment:fixed;
    background-size:100% auto;
}

@media (max-width:1024px) /*and (orientation:portrait)*/
{
    .header
    {
        background-size:auto 100%;
    }
}

.large-header
{
    
    height:80vh;
}

.small-header
{
    height:150px;
}

#login-panel
{
    background-color:white;
    padding-top:5px;
    padding-bottom:5px;
    margin-bottom: 5px;
}

#register-panel
{
    background-color:white;
    margin-bottom:30px;
    padding-bottom:5px;
    margin-bottom: 5px;
}

#get-started-button
{
    text-align:center;
}

.center-item
{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

footer
{
    background-color:lightgray;
    padding-bottom:20px;
    padding-top:10px;
}

footer #footerHelpText
{
    text-align:center;
}

.fill-container
{
    max-height:100%;
    max-width:100%;
}

/*standard text classes*/
.text-bold
{
    font-weight:bold;
}

.image_square 
{
    position: relative;
    padding: 25px;
}

.features_text {
}

.features_image {
}

.features_monitor_image {
}

.features_text_longest {
}

.hiw_text {
}

.hiw_image {
}

.hiw_monitor_image {
}

.hiw_text_longest {
}

@media (min-width: 768px) {
    .marginLoginCreateAccount {
        margin-top:108px;
    }
}

@media (max-width: 767px) {
    .marginLoginCreateAccount {
        margin-top:20px;
    }
}

/*@media (max-width:1024px) and (min-width:768px) and (orientation:landscape) {
    nav .collapse {
        padding-left: 0px;
        padding-right: 0px;
    }
}*/

/*override the bootstrap navbar collapse*/
@media (max-width: 1024px) and (orientation:portrait){
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
        border-bottom-width:0px;
        margin-top:20px;
        background-color:rgb(127,127,127);
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }

   .navbar-collapse{
       margin-top:20px;
       border-bottom-width:0px;
       border-top-width:0px;
   }

   #lblHello{
       display:block;
       font-size:20px;
       margin-bottom:20px;
   }

   #btnLogout{
       display:block;
       margin-bottom:20px;
   }

}

/*home page styling fixes for mobile*/
#splash
{
    background:url('../Images/hero_image.jpg') no-repeat; 
    background-size:75vw;
}

#login
{
    background-color:white; 
    margin-top:60px; 
    margin-right:100px; 
    padding: 20px 40px 40px 40px;
}

#firstSection
{
    margin-top:150px;
}

#secondSection
{
    background:url('../Images/blue_background.png') no-repeat center; 
    background-size:cover; 
    padding:150px 100px 50px 0px;
}

#secondSection h1
{
    color:white; 
    font-size:60px; 
    font-weight:bold;
}

.sponsor
{
    padding: 0px 50px;
}

.sponsorImageHolder
{
    min-height:200px;
}

.btnHolder
{
    position: absolute; 
    bottom: -30px; 
    right: 15px;
}

#supporterHeading
{
    text-align:center; 
    font-weight:bold; 
    color: #005192; 
    font-size:60px;
}

/*portrait ipad styling*/
@media (max-width:1024px) and (min-width:768px) and (orientation:portrait)
{
    #splash
    {
        background-size:90vw;
    }

    #login
    {
        margin-right:0px;
    }

    #firstSection
    {
        margin-top:250px;
    }

    .sectionPanel
    {
        margin-top:50px;
    }

    #secondSection
    {
        padding:150px 25px 50px 0px;
    }

    .ipadTopMargin
    {
        margin-top: 30px;
    }
}

/*ipad landscape*/
@media (max-width:1024px) and (min-width:768px) and (orientation:landscape)
{
    #login
    {
        margin-right:0px;
    }

    #firstSection
    {
        margin-left:0px;
        margin-top:25px;
    }

    #secondSection
    {
        padding:50px 5px 50px 10px;
    }

    .secondSectionHeading
    {
        padding-bottom:20px;
    }

    .sponsor
    {
        padding:0px 15px;
    }
}

/*phone styling*/
@media (max-width:768px) {
    #splash {
        background-size: initial;
        height:auto;
    }

    #login {
        margin-right: 0px;
    }
    #firstSection
    {
        margin-left:0;
        margin-right:0;
        margin-top:0px;
    }
    .sectionPanel
    {
        margin-top:50px;
    }
    .btnHolder
    {
        position:initial;
        width:100%;
    }
    .btnHolder input[type=submit]
    {
        width:100%;
    }
    #secondSection h1
    {
        font-size:35px;
    }
    #secondSection
    {
        padding: 0;
    }
    #supporterHeading
    {
        font-size:35px;
    }
    .sponsor
    {
        padding: 5px 5px;
    }
    .sponsorImageHolder
    {
        min-height:200px;
    }
}


/*Feature page fixes*/
.imagePadding
{
    padding-right:5vw;
}

@media (max-width:1024px) and (min-width:768px) and (orientation:portrait)
{
    .imagePadding
    {
        padding-right:0vw;
    }

    .sectionPadding
    {
        padding-right:5vw;
    }
}

/*how it works fixes*/
@media (max-width:1024px) and (min-width:768px) and (orientation:landscape)
{
    .hiw_monitor_image
    {
        margin-left:20px;
        margin-right:20px;
    }
}

@media (max-width:1024px) and (min-width:768px) and (orientation:portrait)
{
    .getStartedButton
    {
        position:relative;
        transform: translate(0px, 340px);
        z-index: 10;
    }
}
