/* ============================================================================================================================
== OVAL SPEECH BUBBLE WITH QUOTATION MARKS (more CSS3)
** ============================================================================================================================ */

/* A2Z > 

  position:relative;
  width:400px;
  height:350px;
  margin:2em auto 10px;
  margin-bottom: 50px;
  color:#666;
  border: #000;
  background:#ffed26;

*/


.oval-quotes {
  position:relative;
  width:400px;
  height:150px;
  margin:2em auto 10px;
  margin-bottom: 50px;
  color:#666;
  /*border:inset*/
  border: 2px inset rgba(0,153,0,0.80);
  /*border-color: #090;*/
  background:#efe;
  /* css3 */
  /*
  NOTES:
  -webkit-border-radius:Apx Bpx; // produces oval in safari 4 and chrome 4
  -webkit-border-radius:Apx / Bpx; // produces oval in chrome 4 (again!) but not supported in safari 4
  Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
  */
  -webkit-border-top-left-radius:400px 350px;
  -webkit-border-top-right-radius:400px 350px;
  -webkit-border-bottom-right-radius:400px 350px;
  -webkit-border-bottom-left-radius:400px 350px;
  -moz-border-radius:400px / 350px;
  border-radius:400px / 350px;
}

/* creates opening quotation mark 
ORIGINAL:
  content:"\201C";
  position:absolute;
  z-index:1;
  top:20px;
  left:20px;
  font:80px/1 Georgia, serif;
  color:#ffed26;
*/
.oval-quotes:before {
}

/* creates closing quotation mark 
ORIGINAL:
  content:"\201D";
  position:absolute;
  z-index:1;
  bottom:0;
  right:20px;
  font:80px/0.25 Georgia, serif;
  color:#ffed26;

*/
.oval-quotes:after {
}

/* A2Z > 
ORIGINAL:
  width:250px;
  height:250px;
  padding:50px 0 0;
  margin:0 auto;
  text-align:center;
  vertical-align: middle;
  font-size:18px;

*/

.oval-quotes p {
  width:350px;
  height:150px;
  padding:40px 0px 0px 0px;
  margin:0 auto;
  text-align:center;
  vertical-align: middle;
  font-size:22px;
}

/* creates smaller curve */
.oval-quotes p:before {
  content:"";
  position:absolute;
  z-index:-1;
  bottom:-30px;
  right:55%;
  width:180px; /* wider than necessary to make it look a bit better in IE8 */
  height:60px;
  background:#fff; /* need this for webkit - bug in handling of border-radius */
  /* css3 */
  -webkit-border-bottom-right-radius:40px 50px;
  -moz-border-radius-bottomright:40px 50px;
  border-bottom-right-radius:40px 50px;
  /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
  -webkit-transform:translate(-30px, -2px);
  -moz-transform:translate(-30px, -2px);
  -ms-transform:translate(-30px, -2px);
  -o-transform:translate(-30px, -2px);
  transform:translate(-30px, -2px);
}

/* creates larger curve */
/* A2Z > 
ORIGNIAL:
  content:"";
  position:absolute;
  z-index:-2;
  bottom:-30px;
  right:25%;
  height:80px;
  border-right:200px solid #ffed26;
  background:#ffed26; / * need this for webkit - bug in handling of border-radius * /
  / * css3 * /
  -webkit-border-bottom-right-radius:200px 100px;
  -moz-border-radius-bottomright:200px 100px;
  border-bottom-right-radius:200px 100px;
  / * using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers * /
  -webkit-transform:translate(0, -2px);
  -moz-transform:translate(0, -2px);
  -ms-transform:translate(0, -2px);
  -o-transform:translate(0, -2px);
  transform:translate(0, -2px);
  / * reduce the damage in FF3.0 * /
  display:block;
  width:0;
*/
.oval-quotes p:after {
  content:"";
  position:absolute;
  z-index:-2;
  bottom:-30px;
  right:25%;
  height:80px;
  border-right:200px solid rgba(0,153,0,0.80);
  background:#fff; /* need this for webkit - bug in handling of border-radius */
  /* css3 */
  -webkit-border-bottom-right-radius:200px 100px;
  -moz-border-radius-bottomright:200px 100px;
  border-bottom-right-radius:200px 100px;
  /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
  -webkit-transform:translate(0, -2px);
  -moz-transform:translate(0, -2px);
  -ms-transform:translate(0, -2px);
  -o-transform:translate(0, -2px);
  transform:translate(0, -2px);
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

.oval-quotes + p {
  position:relative; /* part of the IE8 width compromise */
  width:150px;
  margin:0 0 2em;
  font-size:18px;
  font-weight:bold;
}