body { font-size:14px;}


.note {
	position: relative;
	padding:15px;
	margin:0px;
	width:650px;
	float:left;
	text-align:justify;
	color: #fff;
	background: #665b2f;
	overflow: hidden;
}
.note:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	border-width: 0 16px 16px 0; /* This trick side-steps a webkit bug */
	border-style: solid;
	border-color: #fff #fff #b2a880 #b2a880; /* A bit more verbose to work with .rounded too */
	background: #658E15; /* For when also applying a border-radius */
	display: block;
	width: 0; /* Only for Firefox 3.0 damage limitation */
	/* Optional: shadow */
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
	box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.note.red {
	background: #C93213;
}
.note.red:before {
	border-color: #fff #fff #97010A #97010A;
	background: #97010A;
}
.note.blue {
	background: #53A3B4;
}
.note.blue:before {
	border-color: #fff #fff transparent transparent;
	background: transparent;
}
.note.taupe {
	background: #999868;
}
.note.taupe:before {
	border-color: #fff #fff #BDBB8B #BDBB8B;
	background: #BDBB8B;
}
/* ROUNDED CORNERS VERSION
       * All modern browsers can produce this effect with a single pseudo-element.
       * However, they all have bugs (mainly to do with border-radius) that make this a bit tricky.
       * As far as I can tell, this is the only cross-browser method for the moment.
       * Can't use this method for the simple effect because Opera 11 will only show backgrounds
       * through transparent borders if there is a border-radius applied.
       */

.note.rounded {
	-webkit-border-radius: 5px 0 5px 5px;
	-moz-border-radius: 5px 0 5px 5px;
	border-radius: 5px 0 5px 5px;
}
.note.rounded:before {
	border-width: 8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
	border-color: #fff #fff transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius: 0 0 0 5px;
	border-radius: 0 0 0 5px;
}
.note p {
	margin:0 0 0 10px;
}
.note p + p {
	margin: 1.5em 0 0;
}

.note ul {list-style:square;}

.note h2 { font-size:14px; margin:10px 0 10px 10px; text-decoration:underline;}

.note a { margin:0px; padding:4px 20px; background:#FFF; color:#000; text-decoration:none;}
.note a:hover { background:#b2a880;}