/*
 * test that variable context evaluates correctly
 */
test {
  one: two; }
#main {
  width: 15em;
  color: blue; }
#main p {
  border-top-width: 2px;
  border-top-color: #ffcc00;
  border-left-width: 1px;
  border-left-color: black;
  -moz-border-radius: 10px;
  border-style: dotted;
  border-width: 2px; }
#main .cool {
  width: 100px; }

#left {
  border-top-width: 2px;
  border-top-color: #ffcc00;
  border-left-width: 1px;
  border-left-color: black;
  -moz-border-radius: 10px;
  font-size: 2em;
  font-weight: bold;
  float: left; }

#right {
  border-top-width: 2px;
  border-top-color: #ffcc00;
  border-left-width: 1px;
  border-left-color: black;
  -moz-border-radius: 10px;
  color: red;
  font-size: 20px;
  float: right; }

.bordered {
  border-top-width: 2px;
  border-top-color: #ffcc00;
  border-left-width: 1px;
  border-left-color: black;
  -moz-border-radius: 10px; }

.complex {
  color: red;
  font-size: 20px;
  text-decoration: none; }
.complex:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }
* html .complex {
  height: 1px;
  color: red;
  font-size: 20px; }

.more-complex {
  color: red;
  font-size: 20px;
  text-decoration: none;
  display: inline;
  -webkit-nonsense-top-right: 1px;
  -webkit-nonsense-bottom-left: 1px; }
.more-complex:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }
* html .more-complex {
  height: 1px;
  color: red;
  font-size: 20px; }
.more-complex a:hover {
  text-decoration: underline;
  color: red;
  font-size: 20px;
  border-top-width: 2px;
  border-top-color: #ffcc00;
  border-left-width: 1px;
  border-left-color: black;
  -moz-border-radius: 10px; }