/**
 * General Customizations
 */

/* This makes room for the fixed nav bar. */
body {
  padding-top: 70px;
}

/* Centers the footer and adds some extra space at the bottom of the page. */
footer {
  text-align: center;
  margin-bottom: 20px;
}

/* Use Montserrat for all headers, it's pretty. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight: 400;
}

/**
 * Misc
 */

.clear {
  clear: both;
}

.clear.left {
  clear: left;
}

.clear.right {
  clear: right;
}

/**
 * Navbar Customizations
 */

 /* Paprika logo in nav bar should be Futura in red. */
.navbar-default .navbar-brand {
  color: #d10505;
  font-family: Futura,"futura-pt",sans-serif;
  font-size: 24px;
}

/* Use Montserrat for the menu font. */
#menu > ul > li > a {
  font-weight: 400;
  text-transform: uppercase;
  font-family: 'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
}

/**
 * Bootstrap Overrides
 */

/* Set the table headings to slightly off-white. */
.table tbody tr.heading td {
  background-color: #fafafa;
}

/**
 * Home Page
 */

#splash {
  background:url("../images/feature_images/pepper_bg_blur_crop.jpg") center center;
  border-radius:5px;
  margin-bottom:10px;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

#tagline {
  letter-spacing: 6px;
  font-family: Futura,"futura-pt",sans-serif;
  font-weight: normal;
  text-align: center;
  color: #fff;
  font-size:50px;
}

#sub_tagline {
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: Futura,"futura-pt",sans-serif;
  font-weight: normal;
  text-align: center;
  color: #fff;
  font-size:20px;
}

@media (min-width: 768px) {
  
  #splash {
    border-radius: 10px;
    margin-top:10px;
    margin-bottom:30px;
  }

  #tagline {
    font-size: 80px;
    letter-spacing: 8px;
  }
  
  #sub_tagline {
    letter-spacing: 4px;
    font-size:30px;
  }
}


/* Center the Downloads, Our Best Features, Screenshots, and Press headings. */
.heading {
  text-align: center;
  margin-bottom: 20px;
}

/* Center aligns the images and text for each download link. */
.download {
  margin-top: 20px;
  text-align: center;
}

/* Add extra spacing below the features. */
.feature {
  margin: 20px 0 20px 0;
}

/* This makes panel headings that contain a link use their normal color instead of the blue link color, and removes the outline around the link when it is clicked. */
.panel-heading > a {
  color: inherit;
  outline-style: none;
}

/* Adds a bit more vertical space between the heading and the accordion, centers it better vertically. */
#screenshots-accordion {
  margin-top: 40px;
}

/* Adds a bit more vertical space between the screenshot thumbnails and the top of the accordion panel. */
.screenshot.thumbnail {
  margin-top: 20px;
}

/* Center the press images. */
#press {
  text-align: center;
}

/* Space out the images a bit better. */
#press img {
  margin: 20px;
}

/* Kills the underline that appears on hover over the images. */
#press a:hover {
  text-decoration: none;
}

/**
 * Fancybox Customizations
 */

.fancybox-nav {
  width: 60px;       
}

.fancybox-nav span {
  visibility: visible;
  opacity: 0.5;
}

.fancybox-nav:hover span {
  opacity: 1;
}

.fancybox-next {
  right: -60px;
}

.fancybox-prev {
  left: -60px;
}

/**
 * Help Pages
 */

.help img {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 4px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.help img.left {
  float: left;
  margin: 0 20px 20px 0;
}

.help img.right {
  float: right;
  margin: 0 0 20px 20px;
}

.help hr {
  clear: both;
}

.help table {
  margin-top: 20px;
}

.help ol li ol {
  list-style: lower-alpha;
}

/**
 * Forms
 */

/* Extra top and bottom margin separates the first form field from the text above. Used on
 * the password reset, bookmarklet login, change email, and supported sites search forms. */
form {
  margin: 20px 0;
}

/* Make error lists red and italic. */
ul.errorlist {
  color: #b94a48;
  font-size: 12px;
  font-style: italic;
}

/* Remove list indicators from form error list. */
ul.errorlist li {
  list-style-type: none;
}

/**
 * Single panels. Used for bookmarklet, password reset, but also in the blog.
 */

/* Push the panel away from the nav bar. */
.panel-single {
  margin-top: 20px;
}

/* Increases padding on single panels from 15px to 20px. */
.panel-single .panel-body {
  padding: 20px;
}

/**
 * Sites
 */

/* Adds a bit more vertical space between the heading and the accordion, centers it better vertically. */
#recommended-sites {
  margin-top: 20px;
}

/* Removes default bottom padding, so the last element doesn't end before the panel does. */
#recommended-sites .panel-body {
  padding: 0;  
}

/* Removes default left padding and bottom margin, lets the inner link elements expand to fill the box. */
ul.sites {
  padding: 0;
  margin: 0;
}

/* Give each site link its own line, and make them big and easy to click. */
ul.sites li a {
  border-bottom: 1px solid #DDDDDD;
  display: block;
  padding: 10px 15px;
  position: relative;
}

/**
 * Bookmarklet
 */

/* Float the image left of the description on the login screen, with appropriate margins from the text. */
#bookmarklet img#example {
  float: left;
  margin: 0 20px 10px 0;
}

/* Customize sizing of bookmarklet 'Save Recipe' button. */
#bookmarklet a#script {
  font-size: 16px;
  color: #ffffff;
  background-color: #666666;
  padding: 5px 15px 5px;
  border-radius: 16px;
  text-decoration: none;
  text-shadow: 0 -1px #000000;
  margin: 10px 0 20px 0;
  display: inline-block;
}