@import "reset.css";
@import "bootstrap-theme.css";
@import "tiles.css";

/* globals */

body {
    background: #314b5a;
}

.banner {
    color:#fff;
    padding-top:1em;
}

.banner strong {
    text-transform:uppercase;
}

.banner-content {
    font-size: 1.35em;
}

.container {
    width: auto;
    max-width: 1100px;
}

.main {
    display: block;
    overflow: hidden;
    background: #fff;
    color: #314b5a;
}

.content {
    padding:1em;
}

.home .main {
    background-image:url(/assets/img/banner_home.jpg);
    background-size:cover;
}

#secondary-navigation {
    margin-top: 2em;
    padding-top: 2em;
    background:#fff;
}

h1,
h2,
h3 {
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 0;
}

h1 {color:#689bd0; margin:1.5em 0;}

img {max-width: 100%;}

@media (min-width: 992px) {

    .home .main,
    .home .main-container,
    .home #secondary-navigation {
        min-height:82vh;
    }

    .home .main-container {
        max-width: inherit;
    }

    #content {
        float: left;
        width: 75%;
        padding-right: 2em;
        padding-bottom: 5em;
    }

    .home #content {
        padding-bottom:0;
    }

    #secondary-navigation {
        float: right;
        width: 25%;
        margin-top: 0;
        padding-top: 0;
        padding: 2em;
        position:relative;
        z-index:100;
    }

    .main {position:relative;}
    .main>.container:before {
        content:".";
        position:absolute;
        display:block;
        background:#fff;
        height:100%;
        width:25%;
        top:0;
        right:0;
        z-index:1;
    }

    .banner {
        left: 10%;
        max-width: 400px;
        position: absolute;
        top: 45%;
    }


}

/* navigation */

.navbar-nav>li>a {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-left: 0.85em;
    padding-right: 0.85em;
}
.navbar-brand {
    padding-top: 7px;
    padding-bottom: 7px;
}
.navbar-brand>img {
    max-height: 36px;
    width: auto;
}

#primary-navigation {
    margin-bottom: 0;
    padding:1em 0 ;
}

.menu {
    margin-bottom: 1em;
}
.menu a {
    display: block;
    font-size: 0.75em;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding: 0.75em;
}

.menu > ul > li > a {
    border-bottom: 1px solid #b3cde7;
}

.menu li > ul {
    padding-left:1em;
    border-left: 1px solid #b3cde7;
    display:none;
}

.menu li.active > ul {
    display:block;
}

.menu>ul>li:first-child>a {
    border-top: 1px solid #b3cde7;
}
.menu a:hover,
.menu a:focus,
.menu .active>a {
    background: #314b5a;
    color: #fff;
    text-decoration: none;
}


@media (min-width: 992px) {

}


/* tables, input, forms */

input[type=submit] {
    padding: 0.25em 0.5em;
    background: #00539f;
    color: #fff;
    border: none;
    border-radius: 4px;
}
input[type=submit]:hover,
input[type=submit]:focus {
    background: #3375b2;
}

.dataTables_wrapper {
    margin: 1.5em 0;
    padding: 0.5em 0;
    border-top: 2px solid #314b5a;
    border-bottom: 2px solid #314b5a;
}
table.dataTable {
    margin-bottom: 0.2em;
    font-size:0.9em;
}

.cutter-search-box {
    border:1px solid;
    margin:1em 0;
    padding-top:0.5em;
}

.cutter-search-box strong,
.cutter-search-box div {
    padding:0 1em 0 1em;
}

.cutter-search-box strong {
    display:block;
    font-size:1.2em;
    margin-bottom:0.5em;
    text-transform:uppercase;
    color:#6397cc;
}

.cutter-search-box input[type=submit] {
    display:block;
    width:100%;
    border-radius:0;
    margin-top:0.5em;
    background-color:#6397cc;
}

.cutter-search-box select {
    background:#fff;
    border:1px solid #000;
    padding:0 0.25em;
}


/* footer */

footer {
    padding: 1em 0 ;
    background: #314b5a;
    color: #fff;
}

footer .vcard>div {
    float:left;
    margin-right:1em;
    padding-right:1em;
    border-right:1px solid;
}

footer abbr {border:0 !important; text-decoration:none;}

footer a {color: #fff !important;}


a.tile {
    display:block;
}

a.tile:hover {
    text-decoration:none;
}

.thumbnail {
    background:#fff;
}

.thumbnail .caption {
    background:#689bcf;
    color:#fff;
}

.tile h4 {
    font-weight:bold;
    text-transform:uppercase;
}


.call {font-size:1.25em; margin-bottom:1em;}

ul.notes {list-style-type:none; margin:-2em 0 2em 0;}
ul.notes li {margin-bottom:1em;}

ul.contains>li {margin-bottom:1em;}

th {vertical-align:middle;}


h1 small {display:block; color:inherit; margin-bottom:0.5em;}

.compat {padding:2em 0;}

p {
    padding-bottom:20px;
}

.store { margin-top: 2em; }

.slide-in {
    opacity: 0;
    transform: translateX(0); /* will be set by direction classes */
    transition: all .5s ease-in;
}

.from-left {
    transform: translateX(-100px);
}

.from-right {
    transform: translateX(100px);
}

/* When visible, slide to normal position */
.slide-in.visible {
    opacity: 1;
    transform: translateX(0);
}
  @keyframes slideInFade {
    0% {
      transform: translateX(-100px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* Apply animation to the text */
  .animated-text {
    opacity: 0; /* Start hidden */
    animation: slideInFade 1.2s ease-out forwards;
  }