/******** General page structure styling ********/

/* Move down content because we have a fixed navbar that is 50px tall */

body
{
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Each .row is set off a bit from the content below it. */

.row
{
    padding-bottom: 10px;
}

/*
    The text of the headline on pages derived from the Page Template is right aligned.
    The text of the headline on the home page is left-aligned (by default).
*/

.page-headline
{
    text-align: right;
}


.distributor-locator
{
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}



/******** CUSTOM ICONS ********/

@font-face{
    font-family: 'icomoon';
    src:url('/static/fonts/icomoon.eot');
    src:url('/static/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('/static/fonts/icomoon.woff') format('woff'),
        url('/static/fonts/icomoon.ttf') format('truetype'),
        url('/static/fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}


/******** Navbar styling ********/

.navbar
{
    z-index: 9999999;
}

/* Remove 1px border line below navbar logo. */

.navbar-fixed-top {
    border-bottom-width: 0;
}

/* Make the Tsubaki logo float as far to the left as possible. */

.navbar.img
{
    float: left;
}

.tsubaki-logo
{
    float: left;
}

/*
    Right now, we have no customizations on the menus in the navbar.
    However, the idea for proper Bootstrap implementation of these menus came from "menubar" at http://bootsnipp.com/snippets/KBR6Q.
*/

/* This is the original styling of .menuitems in navbar.  Retained here in case we want to style the current menus in this fashion at some point. */

.menuitem
{
    color: #ffffff;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.1;
    text-transform: capitalize;
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.search-icon
{
    font-family: 'icomoon'!important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.search-icon:before
{
    content: "\e986";
}

.tsubaki-search
{
    display: block;
    position: absolute;
    top: 100%;
    width: 100%;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    -o-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 0 0 0;
    -moz-transform-origin: 0 0 0;
    -o-transform-origin: 0 0 0;
    -ms-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    opacity: 0;
    visibility: hidden;
}

.tsubaki-search.open
{
     -webkit-transform: rotateX(0);
     -moz-transform: rotateX(0);
     -o-transform: rotateX(0);
     -ms-transform: rotateX(0);
     transform: rotateX(0);
     opacity: 1;
     visibility: visible;
     z-index: 9999999 !important;
}

/******** Jumbotron-related styling, consolidating the former jumbotron.css ********/

.jumbotron
{
    color: #ffffff;
    background-size: cover;
    font-style: italic;
    padding-top: 5em; /* Trying 5em per Github Issue #12. */
    height: 400px; /* Adding at the request of Bill Perrin, because overlay text has been padded
                      in production to this size. */
    position: relative; /* This sets us up so we can position .jumbotron h1 as we wish when we define it. */
}

/* Currently, the way the background-image is defined in .jumbotron is by adding a class which controls which image is selected. */ 

.index
{
    background-image: url('/static/img/jumbotron/homepage-jumbotron.jpg');
}

.page
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-grain.jpg');
}

.agriculture
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-agriculture.jpg');
}

.automotive
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-automotive.jpg');
}

.chain
{
    color: #ffffff;
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-heavydutychain.jpg');
}

.baler
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-bailer.jpg');
}

.basicmetals
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-basicmetals.jpg');
}

.mining
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-mining.jpg');
}

.cans
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-canfeeder.jpg');
}

.foodbeverage
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-foodbeverage.jpg');
}

.food
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-food.jpg');
}

.pharma
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-pharma.jpg');
}

.port
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-portfacility.jpg');
}

.rtg
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-rtg.jpg');
}

.sawmill
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-sawmill.jpg');
}

.seeddrill
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-seeddrill.jpg');
}

.spreader
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-spreader.jpg');
}

.thermoforming
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-thermoforming.jpg');
}

.wood
{
    background-image: url('/static/img/jumbotron/tsubaki-jumbotron-wood.jpg');
}
/******** Text-related styling ********/

.jumbotron h1
{
    text-shadow: 2px 2px 4px black;
    text-align: right;  /* Default alignment should be to the right. */
    position: absolute;
    bottom: 1.25em;      /* h1 text should be positioned 100px/1.25em above the .jumbotron baseline. */
    right: 0.85em;      /* h1 text should end (in left-to-right languages 50px/0.85em from the right edge
                           of the jumbotron. */
}

.spot-blue-color
{
    color: #ffffff;
    background: #0081c3;
    padding-bottom: 10px;
    padding-top: 10px;
}

.white-headline
{
    color: #ffffff;
    font-size: 21px;
    line-height: 30px;
}

.blue-headline
{
    color: #0081c3;
    font-size: 21px;
    line-height: 30px;
}

.black-headline-bar
{
    padding-top: 30px !important;
    padding-right: 30px !important;
    padding-bottom: 30px !important;
    padding-left: 30px !important;
    background-color: #333333 !important;
    color: #ffffff !important;
    margin-bottom: 4px !important;
}

.blue-headline-bar
{
    padding-top: 30px !important;
    padding-right: 30px !important;
    padding-bottom: 30px !important;
    padding-left: 30px !important;
    background-color: #0081c3 !important;
    color: #ffffff !important;    
}

.corner-blue, /* h2 span, */ .industry-widget > h3
{
    -webkit-clip-path: polygon(0% 0%, 97% 0, 100% 42%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 97% 0, 100% 42%, 100% 100%, 0% 100%);
}

/* 

h2 > span :not(.blue-headline)
{
    padding: 10px;
    background-color: #0081c3;
    color: #fff;
}

h2 > span a,
h2 > span a:hover
{
    color: #fff;
    text-decoration: none;
}

*/

/* Added this class definition to address the on-page links not displaying below the navbar.
   The fix is discussed in https://css-tricks.com/hash-tag-links-padding/#article-header-id-0.
*/


h2 > span a
{
    padding-top: 60px;
    margin-top: -60px;
    display: block;
}

/* .col-md-8 h2 styling originally came from jumbotron.css.  Not sure if this could just be .blue-headline or not. */

.col-md-8 h2
{
    color: #0081c3;
}

.blue-text
{
    color: #0081c3;    
}

.grey-headline
{
    color: #777;
    text-transform: capitalize;
}

.dark-grey-background-box
{
    color: #ccc;
    background-color: #333;
    padding-bottom: 25px;
}

/* #overlaid-image, .overlay-text, and .distributor-locator-callout were derived from "Text on Image", http://bootsnipp.com/snippets/2pW32. */

#overlaid-image
{
    left: 0;
    top: 0;
}

/* Overriding the background and border in .thumbnail so there is no white border and 1 px line around the thumbnail. */

.thumbnail
{
    background: none;
    border: none;
}

/* We need a smaller class than .thumbnail to display industry icons, so we created .small-thumbnail which are supposed to be 72px square. */

.small-thumbnail > img,
.small-thumbnail a > img {
  max-width: 72px;
  max-height: 72px;
  height: auto;
}

.small-thumbnail {
  padding: 4px;
  margin-bottom: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
       -o-transition: border .2s ease-in-out;
          transition: border .2s ease-in-out;
}

.small-thumbnail > img,
.small-thumbnail a > img {
  margin-right: auto;
  margin-left: auto;
}

/*
    Using "display: inline-block;" to force the link button to be about the same size as the icon that's being displayed inside it.
    Not sure this is the best way to declare it, but it looks reasonable for the time being.
*/

a.small-thumbnail {
    display: inline-block;
}

a.small-thumbnail:hover,
a.small-thumbnail:focus,
a.small-thumbnail.active {
  border-color: #337ab7;
}

.small-thumbnail .caption {
  padding: 9px;
  color: #333;
}

/* We need a media query here because the absolute positioning and font size of .overlay-text has to be proportional to the viewport,
   otherwise the text takes up too much vertical space on mobile devices. */

@media (min-width:480px)
{
    .overlay-text
    {
        z-index: 100;
        position: absolute;
        color: white;
        font-size: 24px;
        font-weight: bold;
        left: 110px;
        top: 100px;
    }

    .distributor-locator-callout
    {
        margin-top: -100px;
        margin-left: 100px;
        z-index: 999;
    }

    .jumbotron
    {
      background-position: 0% 25%;
    }
}

@media (max-width:479px)
{
    .overlay-text
    {
        position: absolute;
        z-index: 100;
        color: white;
        font-size: 18px;
        font-weight: bold;
        left: 30px;
        top: 45px;
    }

    .jumbotron
    {
      background-position: 0% 10%;
    }
}

.blue-overlay-text
{
    color: #0081c3;
}

/******** Sidebar styling ********/

.col-md-3.sidebar {
    line-height: 0.3;
}

.col-md-3.sidebar ul {
    line-height: 1.0;
}

.col-md-3.sidebar ul li {
    line-height: 1.5;
}

.col-xs-8.industry-widget > h3 {
    background-color: #333;
    color: #FFF;

}

.col-md-3.sidebar,
.col-md-3.sidebar > industry-widget
.industry-widget > .row,
.industry-widget > .col-xs-6,
.col-xs-6 > .industry-icon {
   margin-right: 0px;
   margin-left: 0px;
   padding-bottom: 1px;
}

/* For more information on this class definition, see https://css-tricks.com/equidistant-objects-with-css/ */

.col-xs-6.industry-icon {
  display: flex;
  justify-content: space-between;
}

.col-xs-6.industry-icon > img, .col-xs-6.industry-icon > a > img {
    width: 121px;
    height: 121px;
}


/******** Footer styling ********/

.footer-container
{
    margin-bottom: 10px;
}

#social{
	float: right;
	padding-bottom: 5px;
}
#social aside,
#social div{
	float: left;
	margin-left: 4px;
	}
#social a:hover img{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

/******** Table styling ********/

table
{
    margin: 0 0 20px;
    padding: 0;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: #fff;
    border-top: 1px solid #ececec;
}

tr, th, td
{
    vertical-align: baseline;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

caption, th, td
{
    font-weight: normal;
    text-align: left;
}

th
{
    border-left: medium none;
    border-style: none solid solid none;
    border-top: medium none;
    border-width: medium 1px 1px medium;
    font-weight: bold;
    padding: 10px;
    text-align: left;
    border-color: #ececec;
    text-transform: uppercase;
}

tr th:first-child
{
    border-left-style: solid;
    border-left-width: 1px;
    border-color: #ececec;
}

table tbody tr:nth-child(2n+1) {
    background-color: #f0f0f0;
}

td {
    border: 1px solid #ececec;
}

/********* Entry Tools Styling for Blog Entries *********/

.entry-tools .fb-like,
.entry-tools .twitter-share-button {
    display: block;
    float: right;
    margin-left: 10px;
}

.entry-tools {
    display: block;
    float: right;
}