/*!
 * Ernie Ball BOTB Sitewide CSS
 *
 * Authors: Mark Edwards
 *
 */


/***********************************/
/********* SITEWIDE STYLES *********/
/***********************************/

/* Override default body style with Proxima Nova font (using typekit) and text color to #646464. 
 * Added body padding to accomodate larger navbar height (70px).*/

/* extra whitespace fix, for now */

html {
    overflow-x: hidden !important;
}

body {
    margin: 0;
    font-family: "proxima-nova", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #646464;
    background-color: #ffffff;
    padding-top: 100px;
    padding-bottom: 40px;
}

/* Override body padding-top to 0px for mobile, set font size to 16px sitewide */
@media (min-width: 320px) and (max-width: 979px) {
    body {
        padding-top:0 !important;
        font-size: 16px;    
    }
}

/* Default background color for grids (content must be in a container 'row-fluid' div that uses this class) */
.greybackground {
    background-color: #f0f0f0;
}

.darkgreybackground {
    background-color: #646464;
}

.inlineheader {
    display:inline-block;
}

/* these links should only be visible on small desktops */

.smalldesktop-socialmedialink {
    display:none;
}

/***********************************/
/********* UTILITY CLASSES *********/
/***********************************/

/* overrides image width to be 100% the width of the parent */
.image-100-percent {
    width:100% !important;
}

.reminderError {
	background-color: #f2dede !important;
	border-color: #eed3d7 !important;
}

img.desaturate {
    -webkit-transition:all .4s;
    -moz-transition:all .4s;
    -ms-transition:all .4s;
    -o-transition:all .4s;
    transition:all .4s;
}
img.desaturate:not(:hover) {
    -webkit-filter:grayscale(100%) opacity(60%);
    -moz-filter:greyscale(100%) opacity(60%);
    -ms-filter:greyscale(100%) opacity(60%);
    -o-filter:greyscale(100%) opacity(60%);
    filter:grayscale(100%) opacity(60%);
}

img.desaturate:hover {
    -webkit-filter:greyscale(0%) opacity(100%);
    -moz-filter:greyscale(0%) opacity(100%);
    -ms-filter:greyscale(0%) opacity(100%);
    -o-filter:greyscale(0%) opacity(100%);
    filter:greyscale(0%) opacity(100%);
}
/* Footer styles */
#sponsor-section {
   margin-top: 30px;
   margin-bottom: 30px;
}

/* start of modification for 5 columns in bootstrap */
       @media (min-width: 768px){
            .fivecolumns .span2 {
              width: 18.297872340425532%;
              *width: 18.2234042553191494%;
            }
        }
        @media (min-width: 1200px) {
          .fivecolumns .span2 {
            width: 17.9487179487179488%;
            *width: 17.87424986361156592%;
          }
        }
        @media (min-width: 768px) and (max-width: 979px) {
          .fivecolumns .span2 {
            width: 17.79005524861878448%;
            *width: 17.7155871635124022%;
          }
        }
/* end of modification for 5 columns */

/* start of modification for 7 columns in bootstrap */
       @media (min-width: 980px) and (max-width: 1199px) {
            .sevencolumns .span1 {
              width: 11.11111111111111%;
              *width: 11.018518518518517%;
              margin-left: 3.7037037037037033%;
              *margin-left: 3.6111111111111107%;
            }

            .sevencolumns .span1:first-child {
                margin-left:0;
            }
        }
        @media (min-width: 1200px) {
          .sevencolumns .span1 {
            width: 10.44776119402985%;
            *width: 10.355168601437256%;
            margin-left: 4.477611940298507%;
            *margin-left: 4.3850193477059145%;
          }

          .sevencolumns .span1:first-child {
            margin-left:0;
          }
        }
        @media (min-width: 768px) and (max-width: 979px) {
          .sevencolumns .span1 {
            width: 10.144927536231885%;
            *width: 10.052334943639291%;
            margin-left: 4.830917874396135%;
            *margin-left: 4.738325281803543%;
          }

          .sevencolumns .span1:first-child {
            margin-left:0;
          }
        }

        
/* end of modification for 7 columns */

.flex-video {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
 
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
 
.flex-video iframe,
.flex-video object,
.flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video { padding-top: 0; }
}

.fluid-width-video-wrapper {
  width: 100%;
  position: relative;
  padding: 0;
}
#sponsor-section img {
    width: 220px;
    margin: 0 auto;
    display: block !important;
}

.secondsponsorrow {
    margin-top:30px;
}

.secondsponsorrow img {
    width:150px !important;
}

#footerlinks-section {
    margin-bottom:30px;
}

#footerlinks-section a {
    margin-bottom:30px;
    color: #aaaaaa !important;
    font-weight: bold;
}

#copyright, #footerlinks-section {
    float:none;
    text-align: center;
}

/* Override default hr margins of 20px to 15px */
hr {
    margin: 30px 0 15px 0;
    display:block;
}

footer {
    margin-top:15px;
}

.caret {
    border-top: 8px solid #646464;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.btn .caret {
    margin-top: 7px;
}

.subtitle {
    font-family: 'proxima-nova', Helvetica, Arial, sans-serif;
    font-weight: 100;
    letter-spacing: 5px;
    text-align: center;
}

.margintop10 {
    margin-top: 10px;
}

/* Override Dropdown menu hover color */
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-submenu:hover>a,
.dropdown-submenu:focus>a{
    background-color: #3C5B9B;
    background-image: -moz-linear-gradient(top,#4467af,#3C5B9B);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#4467af),to(#3C5B9B));
    background-image: -webkit-linear-gradient(top,#4467af,#3C5B9B);
    background-image: -o-linear-gradient(top,#4467af,#3C5B9B);
    background-image: linear-gradient(to bottom,#4467af,#3C5B9B);
}

.modal {
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}

.modal-footer {
    -webkit-border-radius: 0 0 1px 1px;
    -moz-border-radius: 0 0 1px 1px;
    border-radius: 0 0 1px 1px;
}

.table tbody+tbody {
    border-top:none !important;
}

/***********************************/
/********** NAVBAR STYLES **********/
/***********************************/

/* Override navbar height to 70px, set navbar fonts */
.navbar, .navbar-inner {
    min-height: 80px;
    text-transform: uppercase;
    font-family: "futura", Helvetica, Arial, sans-serif;
}

.navbar .dropdown-menu {
    font-family: "proxima-nova", Helvetica, Arial, sans-serif;
    background-color: #333;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}

.navbar .nav>li {
    margin: 0 3px;
}

.navbar .dropdown-menu>li>a {
    color:#fff !important;
}

.nav-collapse .dropdown-menu li>a:hover {
    border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
}

/* remove default bootstrap dropdown arrow thingy */
.navbar .nav>li>.dropdown-menu:after {
    content:none;
}

/* position navbar caret nicer */
.navbar .nav .dropdown-toggle .caret {
margin-top: 6px;
}

.input-prepend .uneditable-input {
    border-radius: 1px 0 0 1px;
    -webkit-border-radius: 1px 0 0 1px;
    -moz-border-radius: 1px 0 0 1px;
}

.nav-wrapper {
        float: right;
        width: auto;
        display:inline-block;
    }

    .menubuttons {
        margin-left: 6px;
    }


/* On small desktop screens and larger, fix nav-wrapper to the right, set the correct width */
@media (min-width: 980px) {
    .nav-collapse.collapse {
        display: inline-block;
    }

}

/* Override default navbar color to #282828 */
.navbar-inverse .navbar-inner {
    background: #282828; /* Old browsers */
    background: -moz-linear-gradient(top,  #282828 0%, #282828 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282828), color-stop(100%,#282828)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #282828 0%,#282828 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #282828 0%,#282828 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #282828 0%,#282828 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #282828 0%,#282828 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#282828',GradientType=0 ); /* IE6-8 */
}

/* Override default navbar height and padding */
.navbar-inner .container {
            height:30px;
            padding:25px;
        }
.navbar .brand {
    padding: 11px 10px 10px 265px;
    margin-left: 0px;
    margin-top: -4px;
    background: url('/media/img/botb-logo-with-subtitle.png') no-repeat 0px 0px;
    float: left;
    text-indent: -9999px;
    color: #282828;
    width:1px;

}

/* Style input fields (like the search bar in the nav) */
:focus::-webkit-input-placeholder{
    color:transparent !important;
}

::-webkit-input-placeholder {
   color: #C8C8C8 !important;
}

:-moz-placeholder { /* Firefox 18- */
   color: #C8C8C8 !important;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #C8C8C8 !important;  
}

:-ms-input-placeholder {  
   color: #C8C8C8 !important;  
}

input {
    font-family: "proxima-nova", Helvetica, Arial, sans-serif;
}

input.input-medium.search-query {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    padding:4px;
    margin-top:0;
    font-size: 16px;
}

.navbar-form {
    display: inline-block !important;
    margin:0 !important;
}

/* Give navbar buttons and social media links 20px margins */
.navbar-btns .btn, .navbar-btns .socialmediabtn {
    margin:0 8px 0 8px;
}

.navbar .btn-navbar .icon-bar {
    width:30px;
    height: 4px;
    margin-top: 4px;
    background-color: #c8c8c8;
}

.navbar.nav {
    float:none !important;
}

.navbar-btns {
        display: inline-block;
        font-size:0;
        text-align: center;
        vertical-align: top;
    }

a.facebook44 {
    margin-left:0 !important;
}

.navbar-btns .btn:last-child {
    margin-right:0 !important;
}

.navbar .nav>li>a {
        padding: 5px 8px 5px;
    }

.desktop-nav-fix {
    display:inline-block !important;
}

ul.dropdown-menu {
    border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
}

label {
    font-size:16px;
}

span.redstar {
    color:#d23b35;
}

/* override popover rounded corners */

.popover {
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}

.nav-pills a {
    margin:0 4px;
}

h4.pillmarginfix {
    margin:2px 0;
}

/***********************************/
/****** SMALL DESKTOP STYLES *******/
/***********************************/

/* Contract padding and margins to 5px at small-desktop breakpoint, and shrink the nav-wrapper and search bar */
@media (min-width: 980px) and (max-width: 1199px) {
    .navbar .nav>li>a {
        padding: 5px 5px 5px;
    }

    .navbar .nav>li {
        margin:0 2px;
    }

    .navbar .nav {
        margin: 0 2px 0 0;
    }

    .navbar-btns .btn, .navbar-btns .socialmediabtn {
    margin: 0 4px 0 4px;
    }

    /* hide social media btns on small desktop (since we added extra contests link in header, no room for them) */
    .hide-sd-twitter {
        display:none !important;
    }

    .hide-sd-facebook {
        display:none !important;
    }

    .smalldesktop-socialmedialink {
        display:block;
    }

    .smalldesktop-socialmedialink img {
        width:16%;
    }

    .sd-facebook {
        background: url("/media/img/facebook30.jpg") no-repeat right;
    }

    .sd-twitter {
        background: url("/media/img/twitter30.jpg") no-repeat right;
    }

    .navbar-btns .btn {
        font-size: 14px;
        padding:4px;
    }

    .navbar-btns:last-child {
        margin-right:0;
    }

    .nav-wrapper input.input-medium.search-query {
        width: 94px !important;
        font-size: 14px !important;
    }

    .menubuttons {
        margin-left: 0;
    }

} 


/***********************************/
/********** MOBILE STYLES **********/
/***********************************/

/* Set new navbar height to 55px for mobile devices, fix height, colors, padding, borders, and margins */
@media (max-width: 979px) {
    /* make all buttons standard touch target height of 44px */
    .btn {
        min-height: 28px;
        line-height: 28px;
        font-size: 16px;
        
    }

    /* When in mobile size and nav is collapsed, override nav-wrapper float:right; */
    .nav-wrapper {
        float:none;
    }

    .navbar .brand{
        margin-left:20px;
        margin-top:9px;
    }

    .navbar, .navbar-inner {
        min-height: 55px !important;
        padding:0;
        border-bottom-width: 0px;
    }

    .navbar-fixed-top .navbar-inner,
    .navbar-fixed-bottom .navbar-inner {
        padding:0;
    }

    .navbar-inner .container {
            height:44px;
            padding:0;
        }

    .nav-collapse {
        background-color: #3C3C3C;
        color:#FFFFFF;
        top:4px;
        /* appear above carousel z-index fix */
        z-index: 99;
    }

    div.nav-collapse.in.collapse {
        box-shadow: 0 5px 5px -5px #222;
        -moz-box-shadow: 0 5px 5px -5px #222;
        -webkit-box-shadow: 0 5px 5px -5px #222;
    }

    .nav-collapse .navbar-form {
        padding:10px 0;
        border:none;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
        display:block !important;
    }

    span.navbar-btns {
        padding:10px 0;
        width:320px !important;
        display:block !important;
        vertical-align: top;
    }

    .navbar-btns .socialmediabtn {
        margin: 0 5px;
    }

    .nav {
        float:none !important;
    }

    .nav-wrapper {
        float:none !important;
        width:100%;
    }

    .nav-collapse .btn {
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        border-radius: 1px;
        padding:7px 8px 7px 8px;
        margin: 0 5px;
    }

    .menubuttons {
        margin: 0 auto 0 auto;
        width: auto;
    }

    .nav-collapse .nav>li>a {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        padding:12px !important;
        margin:5px 0px !important;
        background-color: #646464;
        text-align: center;
    }

    .nav-collapse .nav {
        margin:10px;
    }

    .navbar-inverse .nav-collapse .nav>li>a,
    .navbar-inverse .nav-collapse .dropdown-menu a {
        color:#FFFFFF;
    }

    .navbar-inverse .nav .active>a,
    .navbar-inverse .nav .active>a:hover,
    .navbar-inverse .nav .active>a:focus,
    .navbar-inverse .nav-collapse .nav>li>a:hover {
        color: #646464 !important;
        background-color: #C8C8C8;
    }

    .navbar-btns {
        margin: 0 auto 10px auto !important;
        width: 100%;
        border:none !important;  
    }
    

    .navbar-inverse input.input-medium.search-query {
        width: 80% !important;
        height:34px !important;
        margin: 0 auto 0 auto;
        display:block !important;
        text-align: center;
        font-size: 16px;
    }

    .mobile-nav-fix {
        display:inline-block !important;
    }
    
    .desktop-nav-fix {
        display:none !important;
    }

    #footerlinks-section {
        display:none !important;
    }

    .image-100-percent {
        margin:0 auto;
        display:block;
        width:auto !important;
    }

    img.desaturate:not(:hover) {
        -webkit-filter: none;
        -moz-filter: none;
        -ms-filter: none;
        -o-filter: none;
        filter: none;
    }

    #sponsor-section .span3 {
        margin-bottom:30px;
    }

} /* END MOBILE STYLES */

/***********************************/
/******** RESPONSIVE FIXES *********/
/***********************************/

/* Branding fix for mobile phones */
@media (max-width: 480px) {

.navbar .brand {
        margin-left:10px;
        margin-top:10px;
        background:url('/media/img/botb-logo-with-subtitle-mobile.png') no-repeat;
        padding-left:230px;
    }
}

/* sponsor section fix for prettier grids at mobile sizes */

/* This media query allows sponsors to show up in rows of two */
@media (max-width: 767px) {

    /*#sponsor-section .span2:nth-child(odd) {
        margin-right:10px !important;
    }*/

    #sponsor-section .span1 {
        display:inline-block !important;
        width:50%;
        float:left;
        margin-bottom:30px;
        height: 100px;
    }

    /* #sponsor-section .span2:nth-child(5) {
        display: block !important;
        margin: 0 auto;
        width: 130px;
        float: none;
    } for five column sponsor layout */

    /* for seven column layout */
    #sponsor-section .span1:nth-child(7) {
        display: block !important;
        margin: 0 auto;
        width: 130px;
        float: none;
        height: auto;
    }

    #sponsor-section .span1 img {
        width:130px;
    }

    img.desaturate:not(:hover) {
        -webkit-filter: none;
        -moz-filter: none;
        -ms-filter: none;
        -o-filter: none;
        filter: none;
    }
}

/***********************************/
/********** BUTTON STYLES **********/
/***********************************/

/* Override default buttons with 1px radius */
.btn {
    -webkit-border-radius: 1px !important;
    -moz-border-radius: 1px !important;
    border-radius: 1px !important;
    text-transform: uppercase;
    font-family: "futura", Helvetica, Arial, sans-serif;

}

.btn:hover {
    background-color:none;
    color:#ddd !important;
}

/* Create custom btn class "btn-red" */
.btn-red {
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #d23b35;
    *background-color: #d23b35;
    background-image: -moz-linear-gradient(top, #EE5034, #d23b35);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#EE5034), to(#d23b35));
    background-image: -webkit-linear-gradient(top, #EE5034, #d23b35);
    background-image: -o-linear-gradient(top, #EE5034, #d23b35);
    background-image: linear-gradient(to bottom, #EE5034, #d23b35);
    background-repeat: repeat-x;
    border-color: #d23b35;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EE5034', endColorstr='#d23b35', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-red:hover,
.btn-red:active,
.btn-red.active,
.btn-red.disabled,
.btn-red[disabled] {
    color: #FFFFFF;
    background-color: #d23b35;
    *background-color: #003bb3;
}

/* Create custom btn class "btn-grey" */
.btn-grey {
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #545454;
    *background-color: #545454;
    background-image: -moz-linear-gradient(top, #646464, #545454);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#646464), to(#545454));
    background-image: -webkit-linear-gradient(top, #646464, #545454);
    background-image: -o-linear-gradient(top, #646464, #545454);
    background-image: linear-gradient(to bottom, #646464, #545454);
    background-repeat: repeat-x;
    border-color: #545454;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#646464', endColorstr='#545454', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-grey:hover,
.btn-grey:active,
.btn-grey.active,
.btn-grey.disabled,
.btn-grey[disabled] {
    color: #FFFFFF;
    background-color: #545454;
    *background-color: #003bb3;
}

.btn-blue {
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #0086ED;
    *background-color: #0086ED;
    background-image: -moz-linear-gradient(top, #008FFF, #0086ED);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#008FFF), to(#0086ED));
    background-image: -webkit-linear-gradient(top, #008FFF, #0086ED);
    background-image: -o-linear-gradient(top, #008FFF, #0086ED);
    background-image: linear-gradient(to bottom, #008FFF, #0086ED);
    background-repeat: repeat-x;
    border-color: #0086ED;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008FFF', endColorstr='#0086ED', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-blue:hover,
.btn-blue:active,
.btn-blue.active,
.btn-blue.disabled,
.btn-blue[disabled] {
    color: #FFFFFF;
    background-color: #0086ED;
    *background-color: #003bb3;
}

.btn-lightgrey {
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #969696;
    *background-color: #969696;
    background-image: -moz-linear-gradient(top, #AFAFAF, #969696);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#AFAFAF), to(#969696));
    background-image: -webkit-linear-gradient(top, #AFAFAF, #969696);
    background-image: -o-linear-gradient(top, #AFAFAF, #969696);
    background-image: linear-gradient(to bottom, #AFAFAF, #969696);
    background-repeat: repeat-x;
    border-color: #969696;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AFAFAF', endColorstr='#969696', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-lightgrey:hover,
.btn-lightgrey:active,
.btn-lightgrey.active,
.btn-lightgrey.disabled,
.btn-lightgrey[disabled] {
    color: #FFFFFF;
    background-color: #969696;
    *background-color: #003bb3;
}