@import url(http://fonts.googleapis.com/css?family=PT+Sans);
/******************************************************************
Site Name:
Author:

Stylesheet: Mixins & Constants Stylesheet

This is where you can take advantage of Sass' great features:
Mixins & Constants. I won't go in-depth on how they work exactly,
there are a few articles below that will help do that. What I will
tell you is that this will help speed up simple changes like
changing a color or adding CSS3 techniques gradients.

A WORD OF WARNING: It's very easy to overdo it here. Be careful and
remember less is more.

******************************************************************/
/*********************
CLEARFIXIN'
*********************/
.clearfix {
  zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: "";
    display: table; }
  .clearfix:after {
    clear: both; }

/*********************
TOOLS
*********************/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.image-replacement {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden; }

/*********************
COLORS
Need help w/ choosing your colors? Try this site out:
http://0to255.com/
*********************/
/*
Here's a great tutorial on how to
use color variables properly:
http://sachagreif.com/sass-color-variables/
*/
/*********************
TYPOGRAPHY
*********************/
/* 	To embed your own fonts, use this syntax
	and place your fonts inside the
	library/fonts folder. For more information
	on embedding fonts, go to:
	http://www.fontsquirrel.com/
	Be sure to remove the comment brackets.
*/
/*	@font-face {
    	font-family: 'Font Name';
    	src: url('library/fonts/font-name.eot');
    	src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'),
             url('library/fonts/font-name.woff') format('woff'),
             url('library/fonts/font-name.ttf') format('truetype'),
             url('library/fonts/font-name.svg#font-name') format('svg');
    	font-weight: normal;
    	font-style: normal;
	}
*/
/*
use the best ampersand
http://simplebits.com/notebook/2008/08/14/ampersands-2/
*/
span.amp {
  font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important;
  font-style: italic; }

.text-left, .comedian-page .entry-content {
  text-align: left; }

.text-center {
  text-align: center; }

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

.alert-help, .alert-info, .alert-error, .alert-success {
  margin: 10px;
  padding: 5px 18px;
  border: 1px solid;
  color: black; }

.alert-help {
  border-color: #e8dc59;
  background: #ebe16f; }

.alert-info {
  border-color: #bfe4f4;
  background: #d5edf8; }

.alert-error {
  border-color: #f8cdce;
  background: #fbe3e4; }

.alert-success {
  border-color: #deeaae;
  background: #e6efc2; }

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

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-twitter:before {
  content: "\e600"; }

.icon-facebook:before {
  content: "\e602"; }

.icon-earth:before {
  content: "\e601"; }

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

/*********************
TRANSITION
*********************/
/*
I totally rewrote this to be cleaner and easier to use.
You'll need to be using Sass 3.2+ for these to work.
Thanks to @anthonyshort for the inspiration on these.
USAGE: @include transition(all 0.2s ease-in-out);
*/
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdo it.
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*********************
BOX SIZING
*********************/
/* @include box-sizing(border-box); */
/* NOTE: value of "padding-box" is only supported in Gecko. So
probably best not to use it. I mean, were you going to anyway? */
/*********************
BUTTONS
*********************/
.button, .button:visited {
  font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border: 1px solid #dedede;
  border-top-color: #ededed;
  border-left-color: #ededed;
  padding: 4px 12px;
  color: black;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  margin-bottom: 20px;
  line-height: 21px;
  border-radius: 4px;
  background-color: #f2f2f2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, white, #f2f2f2);
  background-image: -moz-linear-gradient(top, white, #f2f2f2);
  background-image: -o-linear-gradient(top, white, #f2f2f2);
  background-image: linear-gradient(to bottom, white, #f2f2f2); }
  .button:hover, .button:focus, .button:visited:hover, .button:visited:focus {
    color: black;
    border: 1px solid #dedede;
    border-top-color: #cccccc;
    border-left-color: #cccccc;
    background-color: #e6e6e6;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #f2f2f2, #e6e6e6);
    background-image: -moz-linear-gradient(top, #f2f2f2, #e6e6e6);
    background-image: -o-linear-gradient(top, #f2f2f2, #e6e6e6);
    background-image: linear-gradient(to bottom, #f2f2f2, #e6e6e6); }
  .button:active, .button:visited:active {
    background-color: white;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(white));
    background-image: -webkit-linear-gradient(top, #f2f2f2, white);
    background-image: -moz-linear-gradient(top, #f2f2f2, white);
    background-image: -o-linear-gradient(top, #f2f2f2, white);
    background-image: linear-gradient(to bottom, #f2f2f2, white); }

.blue-button, .blue-button:visited {
  border-color: #1472ad;
  text-shadow: 0 1px 1px #1472ad;
  background-color: #1681c4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#1990db), to(#1681c4));
  background-image: -webkit-linear-gradient(top, #1990db, #1681c4);
  background-image: -moz-linear-gradient(top, #1990db, #1681c4);
  background-image: -o-linear-gradient(top, #1990db, #1681c4);
  background-image: linear-gradient(to bottom, #1990db, #1681c4);
  box-shadow: inset 0 0 3px #59b3ec; }
  .blue-button:hover, .blue-button:focus, .blue-button:visited:hover, .blue-button:visited:focus {
    border-color: #116396;
    background-color: #1472ad;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1784c9), to(#1472ad));
    background-image: -webkit-linear-gradient(top, #1784c9, #1472ad);
    background-image: -moz-linear-gradient(top, #1784c9, #1472ad);
    background-image: -o-linear-gradient(top, #1784c9, #1472ad);
    background-image: linear-gradient(to bottom, #1784c9, #1472ad); }
  .blue-button:active, .blue-button:visited:active {
    background-color: #1990db;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1681c4), to(#1990db));
    background-image: -webkit-linear-gradient(top, #1681c4, #1990db);
    background-image: -moz-linear-gradient(top, #1681c4, #1990db);
    background-image: -o-linear-gradient(top, #1681c4, #1990db);
    background-image: linear-gradient(to bottom, #1681c4, #1990db); }

/*styles for backyard comedy club*/
.header .logo {
  background-color: #ffdd18;
  background-image: url("../../logo-comedy-768.png");
  background-size: 100%;
  height: 120px;
  -webkit-box-shadow: 0px 7px 30px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 7px 30px rgba(50, 50, 50, 0.75);
  box-shadow: 0px 7px 30px rgba(50, 50, 50, 0.75); }
  .header .logo img {
    display: none; }
@media (min-width: 440px) {
  .header .logo {
    height: 170px; } }
@media (min-width: 768px) {
  .header .logo {
    background-image: url("../../logo-comedy-1240.png");
    background-size: 65%;
    height: 228px; } }
@media (min-width: 1281px) {
  .header .logo {
    background-size: auto 228px;
    height: 275px; } }
.header .tagline {
  background-color: #ffdd18;
  color: #000; }

.article-header {
  background-color: #ffdd18;
  background-repeat: no-repeat;
  color: #000;
  padding: .2em;
  border-radius: 5px;
  text-align: center; }
  .article-header * {
    text-align: center !important;
    margin: 0; }
  .article-header h1 {
    margin-bottom: .1em !important; }
  .article-header a, .article-header:visited {
    color: #000; }
    .article-header a:hover, .article-header:visited:hover {
      color: #000;
      text-decoration: underline; }

.comedian-page .entry-content .quotes {
  margin-top: .3em;
  display: inline-block; }