body {padding:0; margin:0; font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; background:#fff;}

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

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

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

#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:2em;}

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


.content {
    position:relative;
    z-index:1;
}


.oval-quotes {
	position:relative;
	width:400px;
	height:350px;
	margin:2em auto 10px;
	color:#000;
	background:#ffed26;
	
	/* 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 */
.oval-quotes:before {
	content:"\201C"; 
	position:absolute; 
	z-index:1; 
	top:20px; 
	left:20px; 
	font:80px/1 Georgia;
	color:#ffed26;
}

/* creates closing quotation mark */
.oval-quotes:after {
	content:"\201D"; 
	position:absolute; 
	z-index:1; 
	bottom:0; 
	right:20px; 
	font:80px/0.25 Georgia;
	color:#ffed26;
}

.oval-quotes p {
	width:250px;
	height:250px;
	padding:50px 0 0;
	margin:0 auto;
	text-align:center;
	font-size:35px;
}

/* creates larger curve */
.oval-quotes p:before {
	content:"";
	position:absolute;
	z-index:-1;
	bottom:-30px;
	right:25%;
	width:0;
	height:80px;
	border-right:200px solid #ffed26;
	background:#ffed26; /* need this for webkit - bug in handling of border-radius */

	/* css3 */
	-moz-border-radius-bottomright:200px 100px;
	-webkit-border-bottom-right-radius:200px 100px;
	border-bottom-right-radius:200px 100px;
	/* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
	-moz-transform:translate(0, -2px);
	-webkit-transform:translate(0, -2px);
	-o-transform:translate(0, -2px);
	transform:translate(0, -2px);
}

/* creates smaller curve */
.oval-quotes p:after {
	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 */
	-moz-border-radius-bottomright:40px 50px; 
	-webkit-border-bottom-right-radius:40px 50px; 
	border-bottom-right-radius:40px 50px; 
	/* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
	-moz-transform:translate(-30px, -2px);
	-webkit-transform:translate(-30px, -2px);
	-o-transform:translate(-30px, -2px);
	transform:translate(-30px, -2px);
}

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