.ydsf {
  display: block;
  position: relative;
  margin: 8px -8px -8px 8px;
  background: url(gfx/shadow-grid.gif) repeat; }

html>body .ydsf {
  margin: 14px -14px -14px 14px;
  background: url(gfx/shadow.png) right bottom no-repeat; }

.ydsf:before, .ydsf:after {
  content: " ";
  display: block;
  width: 14px;
  height: 14px;
  background: inherit; }
.ydsf:before {
  position: absolute;
  top: 0;
  right: 0;
  margin: -14px 0 0 auto;
  background-position: right top; }
.ydsf:after {
  margin: -14px 0 0 -14px;
  background-position: left bottom; }
.ydsf .inner {
  display: block;
  position: relative;
  overflow: hidden;
  left: -8px;
  top: -8px; }

html>body .ydsf .inner {
  left: -14px;
  top: -14px;
  margin: 0; }

.demo-ydsf {
  position: relative;
  border: 1px solid #999;
  padding: 10px;
  background: #fff url(gradient.jpg) left top repeat-x; }

.clear {
  clear: both;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: 0 -1px -1px 0;
  border: 0;
  padding: 0;
  font-size: 0;
  line-height: 0; }

.left {
  float: left;
  display: inline; }

.right {
  float: right; }

.note {
  width: 200px;
  border: 1px solid #666;
  padding: 10px;
  background: #ffc;
  color: #333; }