/* ------------------------------------------
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
** ============================================================================================================================ */

.speechBox  p {
  margin:0 0;
  font-size:1.75em;
}

.speechBoxContainer{
	width:30%;
	float:left;
	margin:0 1%;
}
.widespeechBoxContainer{
	width:100%;
	float:left;
	margin:0 1%;
}

.speechBox{
	min-height:100px;
}
.speechBox  blockquote {
  margin:0;
}

.speechBox  blockquote p {
  margin:0;
  font-size:2em;
}

.speechSource{
	font-style:italic;
}


/* ============================================================================================================================
== RECTANGLE-BORDER STYLE WITH CURVE
** ============================================================================================================================ */

.rectangle-speech-border {
  position:relative;
  padding:20px 15px;
  margin:1em 0 3em;
  border:10px solid #5999b7;
  text-align:center;
  color:#333;
  background:#fff;
  /* css3 */
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
}

/* creates larger curve */
.rectangle-speech-border:before {
  content:"";
  position:absolute;
  z-index:10;
  bottom:-40px;
  left:50px;
  width:50px;
  height:30px;
  border-style:solid;
  border-width:0 10px 10px 0;
  border-color:#5999b7;
  background:transparent;
  /* css3 */
  -webkit-border-bottom-right-radius:80px 50px;
  -moz-border-radius-bottomright:80px 50px;
  border-bottom-right-radius:80px 50px;
  /* reduce the damage in FF3.0 */
  display:block;
}

/* creates smaller curve */
.rectangle-speech-border:after {
  content:"";
  position:absolute;
  z-index:10;
  bottom:-40px;
  left:50px;
  width:20px;
  height:30px;
  border-style:solid;
  border-width:0 10px 10px 0;
  border-color:#5999b7;
  background:transparent;
  /* css3 */
  -webkit-border-bottom-right-radius:40px 50px;
  -moz-border-radius-bottomright:40px 50px;
  border-bottom-right-radius:40px 50px;
  /* reduce the damage in FF3.0 */
  display:block;
}

/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border > :first-child:before {
  content:"";
  position:absolute;
  bottom:-40px;
  left:45px;
  width:10px;
  height:10px;
  background:#5999b7;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border > :first-child:after {
  content:"";
  position:absolute;
  bottom:-10px;
  left:76px;
  width:24px;
  height:15px;
  background:#fff;
}



/* Media Queries */
@media only screen and (max-width:900px){
	#speachboxes .speechBoxContainer{
		float:none;
		width:100%;
		margin:15px 0;	
	}
	#speachboxes .speechBox{
		min-height:0;
	}
}
@media only screen and (min-width:901px) and (max-width:1470px){
	#speachboxes{
		max-width:900px;
	}
	#speachboxes .speechBoxContainer{
		width:46%;
		margin:0 2%;
	}
	#speachboxes .speechBoxContainer:nth-child(1),
	#speachboxes .speechBoxContainer:nth-child(3){
		margin-left:0;
	}
	#speachboxes .speechBoxContainer:nth-child(2),
	#speachboxes .speechBoxContainer:nth-child(4){
		margin-right:0;
	}
	
	#speachboxes .speechBoxContainer:nth-child(3){
		clear:left;
	}	
	#speachboxes .speechBoxContainer:nth-child(2):after{
		content:'';
		display:table;
		clear:both;
	}
}

@media only screen and (min-width:1471px){
	#speachboxes .speechBoxContainer{
		width:28%;
		margin:0 2%;
	}

}