body {
    font-size: 12pt;
    background   : #fff url(temp.png) top left no-repeat;
    width: 75%;
}

* html body {
    font-size: 14pt;
}

#nav .new {
    display: block;
}

ul#nav li.new {
    font-weight: bold;
}

:link {
    color: #f00;
}

:link:hover {
    color: #0f0;
}

*::before {
  content: "text";
}

:first-child::after {
  display: none;
}

.class:first-child:focus::after {
  display: none;
}

#thing {
  font: normal 400 12px/35px Helvetica, Arial, sans-serif;
}

@media screen {
  body {
    background: #ccc;
  }
}

@namespace "http://www.w3.org/1999/xhtml";

@import url("mystyle.css");

@charset "ISO-8859-1";

@font-face { font-family: "Example Font"; src: url("http://www.example.com/fonts/example"); }

@media screen { body { font-size: 16px } } @media print { body { font-size: 12pt } }


@page { body { margin: 1in 1.5in; } }

@page linke-seite:left { body { margin:20mm; margin-right:25mm; } }

@-moz-document url-prefix(http://pygments.org) {  a {font-style: normal !important;} }

#foo {
  unrecognized-prop: 1;
  -moz-prefixed-prop: 2;
  font-size: 29px ! important;
}

a[target="_blank"] {
    background-color: yellow;
}

/* Unicode example */
œuvre 书名[语言="français"] {
  color: blue;
}

/* CSS Nesting examples */
.container {
  padding: 20px;

  .header {
    color: blue;

    .title {
      font-weight: bold;
    }
  }

  &:hover {
    background-color: #f0f0f0;
  }

  &.active {
    border: 2px solid red;

    .content {
      display: block;
    }
  }

  .sidebar {
    width: 200px;

    ul {
      li {
        a {
          &:hover {
            color: #666;
          }
        }
      }
    }
  }
}

/* Nested CSS with media queries */
@media (max-width: 768px) {
  .container {
    padding: 10px;

    .header {
      font-size: 1.5em;
    }
  }
}

.container {
  padding: 10px;

  @media (width > 768px) {
    padding: 20px;
  }
}
