/*This defines the Style for the Navigation Bar links*/
.navbar {
    border-bottom: 1px solid #5A5A5A;
}

.navbar .nav {
    padding-top: 10px; /*Margin top did not work but padding top did work */
}

.navbar .nav > li {
    font-size: 14px;
    display: inline;
}

.navbar .nav > li > a {
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline;
}

.navbar .nav .brand { /*Be more specific than boot strap override */
    color: #ccc;
    margin-left: 20px; /* was 132 */
    margin-right: 10px;
    font-size: 16px;
    letter-spacing: 1px;
    font-family: "Droid Serif", serif;
}

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #fcf0e4; /* To fix the white space between Jumbotron and the about panel */
}

/*New CSS Additions */

/*This is for the jumbotron below the nav bar*/
.jumbotron {
    margin: 0;
    padding-top: 30px;
    height:100%; /* IE6: treated as min-height COMMENT MIGHT BE REVERSED */
    min-height:100%; /* real browsers */
    min-width: 100%;
    background: url('../img/laos.jpg');
    background-repeat: no-repeat;
    background-size: 120% 120%;
    display: inline-block;
    text-align: center;
    overflow: hidden; /*This FIXED the blur overflow bug! */

    }

.jumbotron .container {
    padding-top: 30px;
    overflow: hidden;
    background: rgba(32,26,22,.7);
    min-height: 107%;
    min-width: 100%; 
    text-align: center;
}

.jumbotron .container .text-box {
    margin-top: 10%; /* This is how I centered the text */
    display: inline-block;
    vertical-align: middle;
}

/*When I did not Specify to container the text did not change*/
.jumbotron .container .text-box h1 {
    font-size: 100px;
    margin: 40px 0 0px;
    text-align: center;
    font-weight: 100;
    line-height: 120%;
    color: White; /*222*/
    font-family: "futura-pt", sans-serif;
}

.jumbotron .container .text-box h2 {
    font-size: 30px;
    color: white;
    text-align: center;
    font-weight: 200;
    font-family: 'futura-pt', sans-serif;
    color: white;
}


/*This is for the landing page part below the jumo*/
.landing-page {
    padding-top: 30px;
    margin: 0px;
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    vertical-align: top;
    text-align: center;
    //position: relative;
    background-color: #fcf0e4;
    /*background-color: red; This is the big block of what I found up top!!!*/
    //background-size: cover; /*change to color below*/
    overflow: auto; /* THIS SOLVED THE COLLAPSE INTO THE PASSION PANEL */
}

.landing-page .container {
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    text-align: center;
    outline: 0;
    background-color: #fcf0e4;
}

.landing-page .container .text-box h1 {
    text-align: center;
    color: #5A5A5A;
    font-size: 60px;
    font-family: "futura-pt", sans-serif;
    font-weight: 200;
    line-height: 120%;
}


.landing-page .container .text-box h2 {
    color: #5A5A5A;
    font-size: 30px;
    text-align: center;
    font-weight: 200;
    font: "futura", serif;
}


.landing-page .container .text-box p {
    color: #5A5A5A;
    font-size: 20px;
    text-align: center;
    /*line-height: 1.5;*/
    color: #5A5A5A;
    font-size: 14px;
    margin-left: 30px;
    font-weight: 100;
    font-family: "Titillium Web", serif;
}


/*Pusheen Related Styling*/
.landing-page .container .pusheen-panel {
    background-color: #fcf0e4;
    outline: 0;
}

.landing-page .container .pusheen-panel h1 {
    text-align: center;
    color: #5A5A5A;
    font-size: 60px;
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
    line-height: 150%;
}

.landing-page .container .pusheen-panel h2 {
    text-align: center;
    color: #5A5A5A;
    font-size: 30px;
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
    line-height: 150%;
}

.landing-page .container .pusheen-panel .thumbnail {
    background-color: #fcf0e4;
    outline: 0;
    border: none; 
/* THIS IS HOW I GET RID OF BORDERS  a not complete this shifted things*/
}

.landing-page .container .pusheen-panel .pusheen-pic {
    /* display: block; */
    width:250px;
    height:200px;
    outline: 100;
    /* max-width, setting width: auto will prevent streching*/ 
}

/*Final Panel Styling*/
.final-panel {
    padding-top: 50px;
    margin: 0px;
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    background-color: #C7D0D5;
    text-align: center;
}

.final-panel .container {
    vertical-align: middle;
    background-color: #C7D0D5;
    position: relative; /*Code here to keep vert centered box */
    top: 30%;
    text-align: center;
}

/* .final-panel .connect-panel .social-buttons instead of what is bellow shifted everything to the right*/
.final-panel .connect-panel {
    vertical-align: middle;
    text-align: center;
    display: block; /* This centered the buttons! display as block */
    margin: auto;
    position: relative;
}

.final-panel h1 {
    text-align: center;
    color: #5A5A5A;
    font-size: 60px;
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
    line-height: 150%;
    margin-bottom: -10px;
}

.final-panel h2 {
    text-align: center;
    font-weight: 200;
    margin-bottom: 5px;
    font: "Titillium Web", sans-serif;
}

.final-panel p {
    font-size: 16px;
    text-align: center;
    line-height: 1.5;
}