html{
    width: 100%;
}

.container-fluid {
    max-width: 1200px;
}

body{
    font-size: 11.5pt;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 18pt;
    width: 100%;
    background-image: url("/images/background.jpg");
    background-size: cover;
    background-repeat: repeat-y;
}

.page-body {
    margin-left: 0px;
    margin-right: 0px;
    background-color: rgba(255,255,255,0.9);
}

@media (min-width: 768px) {
    .row-margins {
        margin-left: 14px;
        margin-right: 14px;
    }
}

.masthead{
    padding-top: 15px;
    padding-bottom: 15px; 
}
.masthead #liger-head {
    width: 20%;
} 
.masthead #liger-text {
    width: 80%;
    vertical-align: top;
} 

/*--------------- Header ---------------*/

#header-ghost{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding-top: 700px;
    background-color: rgba(255,255,255,0.6);
    background: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,0.0));
}

.header{
    position: relative;
    margin-left: 0px;
    margin-right: 0px;
}

.header ul{
    position: absolute;
    list-style-type: none;
    bottom: 15%;
    left: 20%;
}
.header li{
    display: inline;
    padding-right: 3%;
}
.header-link:hover {
    text-decoration: none;
}

.header-link img {
    width:3%;
    transition: all .1s ease-in-out; 
}
.header-link img:hover {
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.no-side-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.no-right-padding {
    padding-right: 0 !important;
}
.no-bottom-margin {
    margin-bottom: 0;
}

.top-spacer {
    margin-bottom: 35px;
}

/*--------------- Index page panels ---------------*/

.panel-orange,.panel-blue,.panel-brag,.panel-sprs {
    border-radius: 0px;
    border-style: solid;
    border-width: 4px;
    box-shadow: 3.182pt 3.182pt 5pt rgba(0,0,0,0.25);
    background-color: transparent;
}

.panel-orange {
    border-color: rgb(208,78,29);
}
.panel-orange > .panel-heading {
    background-color: rgb(208,78,29);
}

.panel-blue {
    border-color: rgb(0,102,179);
}
.panel-blue > .panel-heading {
    background-color: rgb(0,102,179);
}

.index-heading {
    font-family: 'PT Serif', serif;
    font-weight: bold;
    letter-spacing: 0.13em;
    font-size: 17pt;
    color: white;
    text-shadow: 4px 4px 5px rgba(0,0,0,0.25);
    border-radius: 0px;
    text-align: center;
    /*height: 34.5pt;*/
    padding-top: 6pt;
    padding-bottom: 8pt;
}

.panel-orange > .panel-body {
    background-color: rgba(255,255,255,0.5);
    padding: 0;
}
.panel-blue > .panel-body {
    background-color: rgba(255,255,255,0.5);
    padding: 0;
}

.panel-body iframe {
    display: block !important;
    border-width: 0;
    padding: none;
    width: 100%;
}

.blog-image-box {
    background: black;
    margin-bottom: 20px;
}
.blog-image-box img {
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    height: 390px;
    -o-object-fit: contain;
    object-fit: contain;
}
.index-blog-text {
    height: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}    

/* for iPhone */
#cal-panel-div {
    overflow-y: auto;
    -webkit-overflow-scrolling:touch !important;
}
#cal-panel-div iframe {
    min-width: 100%;
    width: 100px;
}

.panel-brag {
    border-color: rgb(0,102,179);
    z-index: 1;
    position: relative;
    margin-bottom: 0;
}
.panel-brag > img {
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.label-blue,.label-orange {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 12.5pt;
    display: inline-block;
    padding-left: 1.5em;
    padding-right: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    color: white;
    margin-bottom: 20px;
}
.label-blue {
    background-color: rgb(0,102,179);
}
.label-orange {
    background-color: rgb(208,78,29);
}

.label-orange a {
    color: white;
}
.label-blue a {
    color: white;
}

/*--------------- Sponsor bar ---------------*/

/* WARNING: order of the vendor-extensions matter. 
   Last one that matches wins. */
.panel-sprs {
    border-radius: 0px;
    border-style: solid;
    border-width: 4px;
    box-shadow: 3.182pt 3.182pt 5pt rgba(0,0,0,0.25);
    background-color: transparent;
    
    border-color: rgb(208,78,29);
    background-color: rgba(255,255,255,0.5);
    z-index: 1;
    position: relative;
    margin-bottom: 0;
    padding: 5px;
}

.panel-sprs .spr-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;

    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.panel-sprs .spr-column {
    margin-left: 8px;
    margin-right: 8px;
}

.panel-sprs img {
    margin: 3px;
    width: 110px;
}

/*--------------- Nav bar ---------------*/

.navbar-ligerbots {
    background-color: rgb(0,102,179);
    border-radius: 0px;
    margin-bottom: 0px;
    min-height: 32px !important;
    box-shadow: 5px 5px 7px rgba(0,0,0,0.25);
}

.nav>li>a {
    /* experiment #2 - less jarring menu hover */
    transition: all 0.1s;
}

/* fix dropdowns changing to white while selected */
.nav li a:focus, .nav li a:hover, .dropdown.open a {
    color: black;
}

/* experiment #3 - nice dropdown menu transitions */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.dropdown.open .dropdown-menu {
    animation: fade-in 0.2s ease-in-out 0s forwards;
}

.navbar-toggle-ligerbots {
    border-color: white;
    border-radius: 0px;
    float: left;
    margin-left: 30px;
}

.navbar a {
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    letter-spacing: 0.03em;
    font-size: 13.5pt;
}

.navbar a:hover { 
    background-color: white;
    color: black;
}

.nav-stacked>li+li {
    margin-top: 0;
}

/* Hamburger menu line */
.icon-bar-ligerbots {
    background-color: white;
}

@media (min-width: 1101px) {
    /* justify the menu bar buttons; only needed on the non-hamburger menu */

    /* From the web: justify within the buttons */
    /*.navbar-nav > li:first-child { text-align: left; } /* aligns first element to the left border */
    /*.navbar-nav > li:last-child { text-align: right; } /* similar for right border */
    .navbar-nav {
        display: table;
        width: 100%;
        margin: 0;
        /* fixed with buttons; does not work well */
        /* table-layout: fixed; */
    }
    .navbar-nav > li {
        display: table-cell;
        text-align: center;
        float: none;
        /* width: 100%; */
    }
}

/* This media query changes the nav collapse point */
/* From http://www.bootply.com/120604 */
@media (max-width: 1100px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .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;
    }
}

/*--------------- Misc ---------------*/

.glyphicon {
    top: 0px;
    font-size: 17px;
}

.text-margins {
    margin-left: 20px;
    margin-right: 20px;
}

@media (min-width: 768px) {
    .side-margins {
        margin-left: 20px;
        margin-right: 20px;
    }
    .wide-side-margins {
        margin-left: 35px;
        margin-right: 35px;
    }
}

.bottom-margin {
    margin-bottom: 20px;
}
.bottom-padding {
    padding-bottom: 20px;
}

.side-padding {
    padding-left: 15px;
    padding-right: 15px;
}

.blog-row p{
    text-align: justify;
    margin-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
}

.read-more img {
    display: inline-block;
    padding-left: auto;
    margin-right: auto;
    /* width: 26%; */
    height: 2.5em;
}
.read-more {
    margin-bottom: 15px;
    text-align: center; 
}

/*--------------- Index page text elements ---------------*/

.announce-row {
    text-align: center;
}

.announce {
    padding-top: 3%;
}
.announce p {
    /*font-size: 110%;*/
}
.announce-title {
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 700;
    font-size: 16pt;
    line-height: 22pt;
    letter-spacing: 0.06em;
    text-align: center;
}

.announce-date {
    font-style: italic;
}

.blue-post .announce-title {
    color: rgb(0,102,179);
}

.orange-post .announce-title {
    color: rgb(208,78,29);
}

.calendar{
    border-width: 0;
    width: 100%;
    height: 800px;
    frameborder: 0;
    scrolling: no;
}

#ligerbots-login{
    background-image: url("../images/background.jpg");
}

/*--------------- Blog entries ---------------*/

.blog-title{
    font-size: 175%;
    font-weight: bold;
    margin-top: 0.5em;
}

.blog-date{
    font-size: 120%;
    margin-bottom: 0.5em;
}

.blog-content{
    /*font-size: 130%;*/
}

.blog-feed{
    font-size: 130%;
    text-align: center;
}
.blog-feed img{
    margin: 5px;
}

.blog-newer{
    font-size: 130%;
    float: left;
}
.blog-older{
    font-size: 130%;
    float: right;
}

.blog-content figure {
    max-width: 100%;
}
.blog-content img {
    height: auto !important; 
    max-width: 100%;
}
.blog-content iframe {
    max-width: 100%;
}
.blog-content figcaption {
    margin-bottom: 1.5em;
}

/*--------------- Carpool page ---------------*/

.carpool-delete {
    text-align: right;
    float: right;
}

.carpool {
    background-color: white;
    border-width: 0;
    width: 100%;
    height: 800px;
    frameborder: 0;
    scrolling: no;
}

/*--------------- Facebook page ---------------*/
.facebook-entry
{
    float:left;
    width: 150px; 
    height:280px;
    margin-right: 30px;
    font-size: 10.5pt;
    line-height: 16pt;
}
.facebook-entry img {
    width: 150px;
    height: 225px;
    border: 1px solid black;
}
.facebook-entry .name
{
    float: left;
    width: 70%;
}
.facebook-entry .exec
{
    color: red;
}
.facebook-entry .north
{
    float: right;
    color: rgb(208,78,29);
    width: 30%;
    text-align: right;
}
.facebook-entry .south
{
    float: right;
    color: rgb(0,102,179);
    width: 30%;
    text-align: right;
}

/*--------------- Default page elements ---------------*/
.notindex-margin {
    margin-left: 6em;
    margin-right: 6em;
}

.notindex-title {
    font-family: 'PT Serif', serif;
    font-weight: bold;
    font-size: 20pt;
    letter-spacing: 0.1em;
    text-align: center;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    color: white;
    background-color: rgb(208,78,29);
    display: inline-block;
    text-shadow: 4px 4px 5px rgba(0,0,0,0.25);
}

.level4-heading {
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 18pt;
    line-height: 26pt;
    letter-spacing: 0.04em;
    text-align: center;
    color: rgb(0,102,179);
    margin-top: 34pt;
    margin-bottom: 14pt;
}

.image-border-blue img {
    border-radius: 0px;
    border-style: solid;
    border-width: 4px;
    box-shadow: 3.182pt 3.182pt 5pt rgba(0,0,0,0.25);
    background-color: transparent;
    border-color: rgb(0,102,179);
}

/*--------------- Current sponsor page ---------------*/

.spr-heading {
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 18pt;
    line-height: 26pt;
    letter-spacing: 0.04em;
    color: rgb(0,102,179);
    text-align: center;
    margin-top: 10px;
    margin-bottom: 25px;
}

/* cat icons */
.spr-heading img {
    object-fit: contain;
    align-self: center;
    height: auto;
    margin-bottom: 11.5px;
    margin-left: 2.5em;
    margin-right: 2.5em;
}

.spr-logo {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.spr-margin-bottom {
    margin-bottom: 16pt;
}
.spr-margin-top {
    margin-top: 23pt;
}

.donor-name {
    list-style: none;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 700;
    font-size: 16pt;
    line-height: 28pt;
    letter-spacing: 0.06em;
    text-align: center;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

@media (min-width: 768px) {
    .blue-rule {
        margin-top: 40px;
        margin-bottom: 0;
        margin-left: -2em;
        margin-right: -2em;
        border-top: 5px solid rgb(0,102,179);
    }
}
@media (max-width: 767px) {
    .blue-rule {
        margin-top: 40px;
        margin-bottom: 0;
        border-top: 5px solid rgb(0,102,179);
    }
}

@media (min-width: 768px) {
    .spr-width135 {
        width: 135%;
        margin-left: -17.5%;
    }
    .spr-width120 {
        width: 120%;
        margin-left: -10%;
    }
}