/*
Theme Name: Creative Encounters
Theme URI: http://www.marvelandsnap.com/
Author: Ryan Macdonald
Author URI: http://www.marvelandsnap.com/
Description: Hi, I am the ultra minimal starter theme Creative Encounters!
Version: 1.0.0
License: GNU General Public License
License URI: see license.txt
Tags: starter, wordpress
*/

/* Import the necessary TK Bootstrap WP CSS additions */

@import url(includes/css/bootstrap-wp.css);

/* My Minimal WordPress Styling comes here */

/* This is a small security for too long strings titles */

body {
    word-wrap: break-word
}

/* Alignment */

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin: 0 auto;
}

/* Images and wp-captions should always fit and be responsive */

img {
    display: inline-block;
    height: auto;
    max-width: 100%;
}

img[class*="wp-image-"] {
    margin-bottom: 10px;
    margin-top: 10px;
}

.wp-caption {
    border: 1px solid #ccc;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
    max-width: 100%;
    padding: 0 10px;
}

    .wp-caption img[class*="wp-image-"] {
        display: block
    }

    .wp-caption .wp-caption-text {
        margin-top: 10px;
        text-align: center;
    }

.wp-caption.aligncenter {
    margin-bottom: 10px
}

/* WP Gallery */

.gallery {
    margin-bottom: 1.5em
}

    .gallery a img {
        border: none;
        height: auto;
        max-width: 90%;
    }

    .gallery dd {
        margin: 0
    }

/* Make sure embeds and iframes fit their containers */

embed,
iframe,
object {
    max-width: 100%
}

/* Text meant only for screen readers */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
    /* Above WP toolbar */
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Clearing */

.clear {
    clear: both
}

.container {
    padding: 0
}

/* Here some needed widget styles
 * Most widgets are adapted in the file bootstrap-wp.js - and REALLY easy to modify! ;) */

.widget {
    margin-bottom: 2em
}

    .widget select {
        max-width: 100%
    }

.widget_nav_menu ul.sub-menu li,
.widget_pages ul.children li {
    padding-left: 15px
}

/* Hiding the search widget's button in widgets. thats just too old-skool. :) but if you want it back, just delete the next line.
 * Note: you can change the whole appearance of the search_form() function in our searchform.php */

.widget_search .search-form input[type="submit"] {
    display: none
}

/* Make sure select elements fit in widgets */

/* Nested comments? They are threaded and nested already, you just need to add your own styling to finalize!
 * For example with some margin, like the line below ;) Delete, modify, change classes in HTML if you desire another style */

.comment .children {
    margin-left: 1.5em
}

/* Scroll to the top of the page styles */

#top-link {
    -moz-transition: background 0.4s ease;
    -ms-transition: background 0.4s ease;
    -o-transition: background 0.4s ease;
    -webkit-border-radius: 1px;
    -webkit-transition: background 0.4s ease;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 1px;
    bottom: 5px;
    color: #000;
    color: rgba(0, 0, 0, 0.5);
    display: none;
    padding: 8px 10px;
    position: fixed;
    right: 5px;
    transition: background 0.4s ease;
    z-index: 99999;
}

#top-link:hover,
#top-link:focus {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.9);
    color: #000;
    color: rgba(0, 0, 0, 0.9);
}

    #top-link:hover i,
    #top-link:focus i {
        color: white
    }

#top-link i {
    color: white
}

h1 {
    font-size: 32px;
    margin-top: 0;
    text-transform: capitalize;
}

h2 {
    font-size: 24px
}

h3 {
    font-size: 18px;
    text-transform: uppercase;
}

h4 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 20px;
    text-transform: uppercase;
}

.nolist {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.site-header {
    background-color: #6699ff
}

.navbar {
    -moz-box-shadow: 0 1px 3px 0 #a75e07;
    -ms-box-shadow: 0 1px 3px 0 #a75e07;
    -o-box-shadow: 0 1px 3px 0 #a75e07;
    -webkit-box-shadow: 0 1px 3px 0 #a75e07;
    box-shadow: 0 1px 3px 0 #a75e07;
    margin-bottom: 0;
}

.navbar-default .navbar-nav > li > a {
    color: #fff;
    font-size: 16px;
    padding: 15px 18px;
}

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
    background-color: #ea8409;
    color: #fff;
}

.navbar-default .navbar-nav > .current_page_parent > a {
    background-color: #ea8409
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #fff
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #fff
}

.navbar-search {
    padding: 7px 0
}

    .navbar-search .search-form label {
        margin-bottom: 0
    }

.search-field {
    color: #555;
    font-weight: 400;
}

.search-field::-webkit-input-placeholder {
    color: #555555;
    font-weight: 400;
}

.search-field:-ms-input-placeholder {
    /* IE 10+ */
    color: #555555;
    font-weight: 400;
}

.search-field::-moz-placeholder {
    /* FF 19+ */
    color: #555555;
    font-weight: 400;
}

.search-field:-moz-placeholder {
    /* FF 4-18 */
    color: #555555;
    font-weight: 400;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: none;
    background-color: #f6941e !important;
    background-image: none;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: #ea8409
}

body {
    background-color: #eee
}

.main-content-inner {
    -moz-box-shadow: 0 0 4px 1px #cccccc;
    -ms-box-shadow: 0 0 4px 1px #cccccc;
    -o-box-shadow: 0 0 4px 1px #cccccc;
    -webkit-box-shadow: 0 0 4px 1px #cccccc;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    box-shadow: 0 0 4px 1px #cccccc;
    margin-bottom: 25px;
    padding: 25px;
}

mark,
.mark {
    background: #ff0
}

.staff-member {
    border-top: 1px solid #eee;
    margin-top: 20px;
    padding-top: 20px;
}

.site-footer {
    margin-bottom: 25px;
    text-align: center;
}

/*
 == Infinite Scrolling by Jetpack ==
 You can enable this cool feature by simply decommenting the lines below and make sure you use the same classes on the right place in your html..

/* Globally hidden elements when Infinite Scroll is supported and in use.
 * Older / Newer Posts Navigation (the pagination, must always be hidden), Theme Footer only when set to scrolling.. */

/*
.infinite-scroll .page-links,
.infinite-scroll.neverending .site-footer {
	display: none;
}
*/

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */

/*
.infinity-end.neverending .site-footer {
	display: block;
}
*/