/**
 * 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-bordered tr.heading > td, .table-bordered tr.heading > th {
  background-color: #fafafa;
}

/* Change the default 2px bottom border to 1px. */
.table-bordered > thead > tr > th, .table-bordered > thead > tr > td {
    border-bottom-width: 1px;
}

.btn-paragraph {
  margin-bottom: 10px;
}

/**
 * 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;
  }

}

/* Increase font size for the "What Is Paprika?" text. Also used in Windows page. */
#what-is {
  font-size: 16px;
}

/* 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;
}

/* Center the pricing note. */
#pricing-note {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
}

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

.feature .glyphicon {
  color: #666666;
}

/* 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;
}

/*
 * Windows buy page
 */

#windows-intro-image {
  margin-top: 10px;
  border: 1px solid #DDDDDD;
}

/* Right-aligns the image on large devices. */
@media (min-width: 768px) {

  #windows-intro-image {
    float: right;
  }

}

/* Centers the image on small devices. */
@media (max-width: 768px) {

  #windows-intro-image {
    margin: 0 auto;
  }

}

#windows-intro-header {
  color: #d10505;
  font-family: Futura,"futura-pt",sans-serif;
}

#windows-intro-text {
  font-size: 16px;
  margin-top: 15px;
  margin-bottom: 15px;
}

#windows-intro-buttons {
  margin-top: 20px;
}

#windows-intro-buttons a {
  margin-bottom: 10px;
  margin-right: 10px;
}

#windows-intro-requirements {
  margin-top: 10px;
  font-size: 13px;
}

#windows-features {
  font-size: 16px;
}

.windows-caption {
  margin-top: 10px;
  font-size: 13px;
  font-style: italic;
}

/**
 * Help Pages
 */

.help img {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  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);
  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;
}

/* Use letters first nested outline level. */
.help ol > li > ol {
  list-style: lower-alpha;
}

/* Use Roman numerals for second nested outline level. */
.help ol > li > ol > li > ol {
  list-style: lower-roman;
}

/**
 * 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;
}

/* Prevent zooming on search field */
form input[type="search"] {
  font-size: 18px;
  width: 100%;
  border: 1px solid #ccc;
}

/* Remove padding from error lists. */
div.validation-summary-errors ul {
  padding: 0;
}

/* Make error lists red and italic and remove list indicators. */
div.validation-summary-errors ul li {
  list-style-type: none;
  color: #b94a48;
  font-style: italic;
}

/**
 * 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;
}

/* Same layout as help-block except italicized. */
.error-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #b94a48;
  font-style: italic;
}

/**
 * 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;
}

/* Authorization */
#authorize-email {
  display: inline-block;
  margin: 10px 0 20px 0;
}

#authorize-logout {
  padding: 0;
  vertical-align: baseline;
}

/* Admin */
#statistics-days {
    margin-bottom: 20px;
}