/* ------------------------------------------
PURE CSS SPEECH BUBBLES
by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-speech-bubbles/

http://nicolasgallagher.com
http://twitter.com/necolas

Created: 02 March 2010
Version: 1.2 (03 March 2011)

Dual licensed under MIT and GNU GPLv2 Nicolas Gallagher
------------------------------------------ */

/* NOTE: Some declarations use longhand notation so that it can be clearly
explained what specific properties or values do and what their relationship
is to other properties or values in creating the effect */

/* ============================================================================================================================
== GENERAL STYLES
** ============================================================================================================================ */

.container {
    position: relative;
}

@font-face {
 font-family: "Libre Baskerville";
 src: url("librebaskerville-regular.eot");
 src: url("librebaskerville-regular.eot?#iefix") format("embedded-opentype"),
      url("librebaskerville-regular.woff") format("woff"),
      url("librebaskerville-regular.ttf") format("truetype");
 font-weight: normal;
 font-style: normal;
}


.h1 {
    font-family: "Helvetica Neue", "Arial", sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    padding-bottom: 10px;
}

.readmore{
    font-family: "Helvetica Neue", sans-serif;
    font-size: 1em;
    background: #da352A;
    color: white;
    border: 1px solid #da352A;
    padding-left: 1%;
    padding-right: 1%;
    border-radius: 5px;
    position: absolute;
    z-index: 100;
    bottom:5px;
    right: 5px;
}

.photo {
    height: 100%;
    position: absolute;
    bottom:0px;
    right: -70px;
    z-index: 80;
}

.sneakybox {
    width:32%;
    height:100%;
    background: white;
    float: right;
}

body {
  padding:0;
  margin:0;
    font-size: 1em;
  font: "Libre Baskerville", serif;
  color:#333;
  background:#fff;
}

a:link,
a:visited {
  border-bottom:1px solid #c55500;
  text-decoration:none;
  color:white;
}

a:visited {
  border-bottom:1px solid #730800;
  color:white;
}

a:hover,
a:focus,
a:active {
  border:0;
  color:#fff;
  background:#4a90e2;
}

a:visited:hover,
a:visited:focus,
a:visited:active {
  color:#fff;
  background:#4a90e2;
}

#container {
  width:500px;
  padding:0 0 50px;
  margin:0 auto;
}

h1 {
  margin:1em 0 0;
  font-size:2.5em;
  font-weight:normal;
  line-height:1.2;
  text-align:center;
}

h2 {
  margin:0.5em 0 1.5em;
  font-size:1.25em;
  font-weight:normal;
  font-style:italic;
  text-align:center;
}

p {
  margin:1em 0;
}

.content h2 {
  margin:2em 0 0.75em;
  font-size:2em;
  font-weight:bold;
  font-style:normal;
  text-align:left;
}

blockquote {
  margin:1em 0;
}

blockquote p {
  margin:0;
  font-size:1.2em;
    text-align: left;
}

.follow {
  clear:both;
  margin-top:2em;
  font-size:1.125em;
}

.follow span {
  font-weight:bold;
}


/*
 Should you want to set a background colour on a containing element
 certain types of bubble effect may require you to include these
 style declarations.
 */
.content {
  position:relative;
  z-index:1;
}

/* ============================================================================================================================
== BLOCKQUOTE WITH RIGHT-ANGLED TRIANGLE
** ============================================================================================================================ */

.ScoMoQuo {
  position:relative;
  padding:15px 5%;
  margin:0;
  color:#fff;
  background:#b5b5b5; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#b5b5b5), to(#727272));
  background:-moz-linear-gradient(#b5b5b5, #727272);
  background:-o-linear-gradient(#b5b5b5, #727272);
  background:linear-gradient(##b5b5b5, #727272);
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.ScoMoQuo + p {margin:15px 0 1.5em 5%;}

.who {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: lighter;
    padding-bottom: 50px;
}

/* creates the triangle */
.ScoMoQuo:after {
  content:"";
  position:absolute;
  bottom:-50px;
  left:45%;
  border-width:0 20px 50px 0;
  border-style:solid;
  border-color:transparent #727272;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

@media screen and (max-width: 550px) {
    .readmore {
        font-size: 0.8em;
    }
    .photo {
        height:30%;
        right: 0px;
    }
    .sneakybox {
        display: none;
    }
    .ScoMoQuo:after {
  content:"";
  position:absolute;
  bottom:-50px;
  left:70%;
  border-width:0 20px 50px 0;
  border-style:solid;
  border-color:transparent #727272;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}
}