html {height:100%}

body {
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    transition: opacity 1s;
    /*background-color: #E1E9F1;*/
    font-family: "Open Sans","Helvetica",Helvetica,Arial,sans-serif;
    height: 100%;
}

.wrapper {
    min-height: 87%;
}

.columns.small-centered {
    background-color: white;
    /* padding: 50px; */
}

.container {
    padding-bottom: 50px;
}

header {
    background-color: #E1E9F1;
}

header .columns, .columns.border  {
    background-color: #fff;
    /*border: 2px solid #B7C3D0;
    border-radius: 8px;*/
}

header .container > :last-child {
    margin-bottom: 0 !important;
}

header .container > :first-child {
    margin-top: 0 !important;
}

header > .columns {
    background-color: #FFF;
}

.title-area .name h1 {
}

figure {
    margin-top: 0;
}

img.logo {
    margin: 50px auto 50px auto;
    width: 275px;
}

img.fullwidth { width: 100% }

/* Some Foundation color overrides */
/*
.top-bar {
            box-shadow: 0 1px #266784, 0 4px #A9C2D0 }

.top-bar, .top-bar-section li a:not(.button) {
  background-color: #5592BB;
}

.top-bar-section li a:not(.button):hover {
background-color: #4783A9;
}

.top-bar-section ul li:hover>a {
  background-color: #5592BB;
}

.top-bar-section ul li>a {
  font-size: 16px;
  font-family: "Open Sans","Helvetica",Helvetica,Arial,sans-serif;;
}
*/

.ng-cloak {
    opacity: 0;
}

.ng-invalid {
    /* border: 1px solid red !important; */
}

div[role=main] section.demo {
    padding-top: 0px;
}

.page-header h1, .page-header h1 > small > a {
    color: #266784;
}
.page-header h1 > small > a:hover {
    text-decoration: none;
}

.footer {
    text-align: center;
    padding: 30px 0;
  /* margin-top: 70px; */
    border-top: 1px solid #e5e5e5;
    background-color: #f5f5f5;
}

.footer, .push {
    /* height: 4em; */
}

.bs-social {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

@media (min-width: 768px) {
    .bs-social {
        text-align: left;
    }
}

.nav, .pagination, .carousel, .panel-title a {
    cursor: pointer;
}

.bs-social-buttons {
    display: inline-block;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

.bs-social-buttons li {
    display: inline-block;
    padding: 5px 8px;
    line-height: 1;
}

@media (max-width: 767px) {
    .visible-xs.collapse.in {
        display: block!important;
    }
    
    .visible-xs.collapse {
        display: none!important;
    }
}

.navbar .collapse {
    border-top: 1px solid #e7e7e7;
    margin-left: -15px;
    margin-right: -15px;
    padding-right: 15px;
    padding-left: 15px;
}

.show-grid {
    margin-bottom: 15px;
}

/*
 * Container
 *
 * Tweak to width of container.
 */

/*@media (min-width: 1200px) {
  .container{
    max-width: 970px;
  }
}*/

/*
 * Tabs
 *
 * Tweaks to the Tabs.
 */

.code pre, .code code {
    border: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.tabs dd.active a {
    background-color: #FFF;
}

.code .tabs-content>.content {
    padding: 0;
    width: 100%;
}

/*
 * Buttons
*/
/*
.button, button{
  background-color: #4882AC;
  font-family: "Open Sans","Helvetica",Helvetica,Arial,sans-serif;
}

/* tabs */

 /*
 * Buttons in the masthead.
 */
 
button { border-radius: 0; } 

.btn-outline-inverse {
    color: #fff;
    background-color: transparent;
    border-color: #cdbfe3;
    margin: 10px;
}

@media (min-width: 768px) {
    .btn-outline-inverse {
        width: auto;
        margin: 20px 5px 20px 0;
        padding: 18px 24px;
        font-size: 21px;
    }
}

.btn-outline-inverse:hover, .btn-outline-inverse:focus, .btn-outline-inverse:active {
    color: #563d7c;
    text-shadow: none;
    background-color: #fff;
    border-color: #fff;
}

/* Not enough room on mobile for markup tab, js tab, and plunk btn.
And no one cares about plunk button on a phone anyway */
@media only screen and (max-device-width: 480px) {
    #plunk-btn {
        display: none;
    }
}

.navbar-nav .dropdown .navbar-brand {
    max-width: 100%;
    margin-right: inherit;
    margin-left: inherit;
}

.header-placeholder {
    /* height: 45px; */
}

@media screen and (min-width: 768px) {
    .dropdown.open > .navbar-brand + .dropdown-menu {
        left: 10px;
    }

    .header-placeholder {
        /* height: 45px; */
    }

    .navbar-nav .dropdown .navbar-brand {
        max-width: 200px;
        margin-right: 5px;
        margin-left: 10px;
    }
}

#tabs div[ng-controller=TabsDemoCtrl] .tabs:not(.vertical) dd>a {
    padding: 0.5em 1em;
}

#tabs div[ng-controller=TabsDemoCtrl] .tabs.vertical {
    width: 30%;
}

.reveal-modal {
    outline: 0;
}


/* Animations */
.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
        transition: opacity .15s linear;
}

.fade.in {
    opacity: 1;
}

.reveal-modal.fade {
    -webkit-transition: -webkit-transform .3s ease-out;
        -moz-transition:    -moz-transform .3s ease-out;
        -o-transition:      -o-transform .3s ease-out;
            transition:         transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
        -ms-transform: translate(0, -25%);
            transform: translate(0, -25%);
}

.reveal-modal.in {
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
}

.reveal-modal-bg.fade {
    filter: alpha(opacity=0);
    opacity: 0;
}

.reveal-modal-bg.in {
    filter: alpha(opacity=50);
    opacity: .5;
}

.alert-box {
    background-color: #5592BB;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
    -webkit-transition:all linear 0.5s;
    -moz-transition:all linear 0.5s;
    -o-transition:all linear 0.5s;
        transition:all linear 0.5s;
    display:block!important;
}

.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove {
  line-height:0;
  opacity:0;
  /*padding:0 10px;*/
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
    line-height:20px;
    opacity:1;
    /*padding:10px;
    border:1px solid black;
    background:white;*/
}

/*.check-element {
  padding:10px;
  border:1px solid black;
  background:white;
}*/


/* CROP AREA */
.cropArea {
    /*background: #E4E4E4;*/
    overflow: hidden;
    width:500px;
    height:350px;
}


/* CHAR VERIFICATION */
.charAlert {
    background-color:#ea2f10;
	color:#FFFFFF;
	padding:8px;
    width: 100%;
    margin-top: 20px;
    font-size: 0.775rem
}


.btn-toolbar {
    /*margin-top: 20px;*/
}


.tiny button alert change ng-scope {
    margin-top: 5px;
}

div.bibliomode p { font-size:12px; }