/* Styled blockquote with obtuse triangle
------------------------------------------ */

.example-obtuse {
	position:relative;
	padding:15px 20px;
	margin: 30px 10px 10px 20px;
	color:#000;
	width: 370px; 
	background:#ffcc66; /* default background for browsers without gradient support */

	/* css3
	Using longhand to avoid inconsistencies between Safari 4 and Chrome 4
	*/
	-webkit-border-top-left-radius:25px 50px;
	-webkit-border-top-right-radius:25px 50px;
	-webkit-border-bottom-right-radius:25px 50px;
	-webkit-border-bottom-left-radius:25px 50px;
	-moz-border-radius:25px / 50px;
	border-radius:25px / 50px;
	/* NOTE: webkit gradient implementation is not as per spec */
	background:-webkit-gradient(linear, left top, left bottom, from(#ffffdc), to(#ffcc66));
	background:-moz-linear-gradient(top, #ffffdc, #ffcc66);
	background:-o-linear-gradient(top, #ffffdc, #ffcc66);
	background:linear-gradient(top, #ffffdc, #ffcc66); }

p.bubble1 { font-size: 20px; font-weight: bold; }

/* display of quote author (alternatively use a class on the element following the blockquote) */
.example-obtuse + p {margin: 10px 0 20px 220px; text-align: left; font-style:italic;}

/* creates the larger triangle */
.example-obtuse:before {
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-30px;
	right:80px;
	width:0;
	height:0;
	border-width:0 0 30px 50px;
	border-style:solid;
	border-color:transparent #ffcc66;
}

/* creates the smaller triangle */
.example-obtuse:after {
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-30px;
	right:110px;
	width:0;
	height:0;
	border-width:0 0 30px 20px;
	border-style:solid;
	border-color:transparent #fff;
}



/* Rectangle-border style with curve
------------------------------------------ */

.rectangle-speech-border {
	position: relative;
	padding: 30px 15px;
	margin: 30px 10px;
	border:10px solid #302010;
	text-align:center;
	color: #302010;
	background: #fcc56a;
	width: 460px; 

	/* css3 */
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
}

/* creates larger curve */
.rectangle-speech-border:before {
	content:"\00a0";
	position:absolute;
	z-index:10;
	bottom:-40px;
	left:50px;
	width:50px;
	height:30px;
	border-style:solid;
	border-width:0 10px 10px 0;
	border-color: #302010;
	background: transparent;

	/* css3 */
	-moz-border-radius-bottomright:80px 50px;
	-webkit-border-bottom-right-radius:80px 50px;
	border-bottom-right-radius:80px 50px;
}

/* creates smaller curve */
.rectangle-speech-border:after {
	content:"\00a0";
	position:absolute;
	z-index:10;
	bottom:-40px;
	left:50px;
	width:20px;
	height:30px;
	border-style:solid;
	border-width:0 10px 10px 0;
	border-color: #302010;
	background: transparent;

	/* css3 */
	-moz-border-radius-bottomright:40px 50px;
	-webkit-border-bottom-right-radius:40px 50px;
	border-bottom-right-radius:40px 50px;
}

/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border>:first-child:before {
	content:"\00a0";
	position:absolute;
	z-index:1;
	bottom:-40px;
	left:45px;
	width:10px;
	height:10px;
	background: #302010;

	/* css3 */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

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

p.rsb	{ font-size: 20px; font-weight: bold; line-height: 20px; }




#weiss	{ text-aling: left; width: 460px; margin: 30px 10px; background-color: #e9e9e9; 
	padding: 10px 10px 20px 10px; }

/* Oval speech buble (empty, with border)
------------------------------------------ */

.oval-speech-border {
	position:relative; 
	padding:70px 30px;
	margin: 30px 10px;
	border:10px solid #f3961c; 
	text-align:center;
	color:#333; 
	background: #e9e9e9; 
	width: 360px; 
	
	/* css3 */
	/*
	NOTES:
	-webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
	-webkit-border-radius:240px / 140px; // 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:240px 140px;
	-webkit-border-top-right-radius:240px 140px;
	-webkit-border-bottom-right-radius:240px 140px;
	-webkit-border-bottom-left-radius:240px 140px;
	-moz-border-radius:240px / 140px;
	border-radius:240px / 140px;
}

p.osb	{ font-size: 20px; font-weight: bold; line-height: 20px; }

/* creates larger curve */
.oval-speech-border:before {
	content:"\00a0"; 
	position:absolute; 
	z-index:2; 
	bottom:-40px; 
	right:50%; 
	width:50px; 
	height:30px;
	border-style:solid;
	border-width:0 10px 10px 0;
	border-color:#f3961c;
	margin-right:-10px;
	background:transparent;

	/* css3 */
	-moz-border-radius-bottomright:80px 50px;
	-webkit-border-bottom-right-radius:80px 50px;
	border-bottom-right-radius:80px 50px;
}

/* creates smaller curve */
.oval-speech-border:after {
	content:"\00a0"; 
	position:absolute; 
	z-index:2; 
	bottom:-40px; 
	right:50%; 
	width:20px; 
	height:31px; 
	border-style:solid;
	border-width:0 10px 10px 0;
	border-color:#f3961c;
	margin-right:20px;
	background:transparent;

	/* css3 */
	-moz-border-radius-bottomright:40px 50px; 
	-webkit-border-bottom-right-radius:40px 50px; 
	border-bottom-right-radius:40px 50px; 
}

/* creates a small circle to produce a rounded point where the two curves meet */
.oval-speech-border>:first-child:before {
	content:"\00a0"; 
	position:absolute; 
	z-index:1; 
	bottom:-40px; 
	right:50%; 
	width:10px; 
	height:10px;
	margin-right:45px;
	background:#f3961c;
	
	/* css3 */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

/* creates a white rectangle to cover part of the oval border*/
.oval-speech-border>:first-child:after {
	content:"\00a0"; 
	position:absolute; 
	z-index:1; 
	bottom:-10px; 
	right:50%; 
	width:30px; 
	height:15px; 
	background: #e9e9e9; 
}