.offscreen {
  position: absolute;
  left: -300em;
  top: -30em;
}

body {
  margin: 0;
  padding: 0;
  font-size: medium;
  font-family:arial, helvetica, sans-serif;
  background-color: white;
  color: black;
}

div#banner {
  margin: 0;
  padding: 0;
  background-image: url(../images/OpenAjaxAllianceBanner.jpg);
  background-repeat: no-repeat;
  background-color: #4C8303;
  height: 120px;
  border-bottom: medium solid #fbcb46;
}

div#title {
  margin: 0;
  padding: 0;
  padding-bottom: 1em;
  margin-left: 270px;
  font-family: 'times new roman', times, serif;
  background-color: transparent;
}

div#title div.user {
  margin: 0;
  padding: 0;
  font-size: 80%;
  margin-right: 2em;
  text-align: right;
  color: #F9F9F9;
}

div#title div.user a:link,
div#title div.user a:visited
{
  color: #fbcb46;
  text-decoration: none;
  padding-left: .25em;
  padding-right: .25em;
  border: 1px solid transparent;
  border-bottom: #E0E0E0 solid 1px;
}

div#title div.user a:active,
div#title div.user a:focus,
div#title div.user a:hover
{
  color: white;
  border: #fbcb46 thin solid;
}



div#title div.title {
  margin: 0;
  padding: 0;
  padding-left: 20px;
  font-size: 350%;
  font-weight: bold;
  letter-spacing: .05em;
  color: #F9F9F9;
}


div#title div.link {
  margin: 0;
  padding: 0;
  padding-top: .75em;
  padding-left: 20px;
  font-size: 90%;
  font-family:arial, helvetica, sans-serif;
}


div#title div.link a {
  padding-left: .25em;
  padding-right: .25em;
  text-decoration: none;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-bottom: #E0E0E0 1px solid;
}

div#title div.link a:link,
div#title div.link a:visited
{
  color: #fbcb46;
}

div#title div.link a:hover,
div#title div.link a:focus,
div#title div.link a:active
{
  color: white;
  border-color: #fbcb46;
}
div#title div.link h2 {
  position: absolute;
  top: -30em;
  left:-300em;
}

div#title div.link ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

div#title div.link li {
  margin: 0;
  padding: 0;
  padding-right: .5em;
  display: inline;
}


div#maintabs {
  margin: 0;
  padding: 0;
  padding-left: 15%;
  font-size: 125%;
  background-color: #faf7f0;
}

div#maintabs h2 {
  position: absolute;
  top: -30em;
  left:-300em;
}

div#maintabs ul {
  margin: 0;
  padding: 0;
  padding-left: 3em;
  padding-top: 5px;
  padding-bottom: 3px;  
  list-style: none;
  border-left: #DDD solid 1px;
}

div#maintabs li {
  margin: 0;
  padding: 0;
  padding-left: .25em;
  padding-right: .25em;
  display: inline;
}

div#maintabs a {
  text-decoration: none;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 2px;
  border: 1px solid transparent;
  border-bottom: 3px solid #DDD;
}

div#maintabs a:visited,
div#maintabs a:link {
  color: #333333;
}

div#maintabs a:hover,
div#maintabs a:active,
div#maintabs a:focus {
  color: #366dba;
  background-color: #F4F4F4;
  border-color: #366dba;
}

div#maintabs a.selected:visited,
div#maintabs a.selected:link {
  border: 1px solid #880000;
  border-bottom: 3px solid #880000;
  background-color: white;
}


div#container {
  margin: 0;
  padding: 0;
  background-color: white;
  clear: both;
  border-top: #DDD solid 1px;
}


div#mainnav {
  margin: 0;
  padding: 0;
  padding-top: 2em;
  float: left;
  width: 15%;
  background-color: #FaF7F0;
  border-right: thin solid #DDD;
  border-bottom: thin solid #DDD;
  padding-bottom: 3em;
}

div#mainnav div.menu {
  margin: 0;
  padding: 0;
}

div#mainnav h2 {
  margin: 0;
  padding: 0;
  padding-top: .5em;
  padding-bottom: .5em;
  font-size: 1.1em;
  text-align: center;
}

div#mainnav ul.menu {
  margin: 0;
  padding: 0;
  margin-left: .25em;
  list-style:none;
}

div#mainnav ul.menu li {
  margin: 0;
  padding: 0;
  padding-top: .125em;
  padding-bottom: .125em;
}


div#mainnav ul.menu li a,
div#mainnav ul.menu li li a {
  display: block;
  text-decoration: none;
  font-size: 100%;
  padding-top: .25em;
  padding-bottom: .25em;
  padding-left: .25em;
  border: solid 1px transparent;
  border-bottom: 1px solid #DDD;
}

div#mainnav ul.menu li a:visited,
div#mainnav ul.menu li a:link {
  color: #333333;
}


div#mainnav ul.menu li a.selected:visited,
div#mainnav ul.menu li a.selected:link,
div#mainnav ul.menu li li a.selected:visited,
div#mainnav ul.menu li li a.selected:link {
  border: 1px solid #880000;
  border-right: 3px solid #880000;
  background-color: white;
}

div#mainnav ul.menu li a:hover,
div#mainnav ul.menu li a:active,
div#mainnav ul.menu li a:focus {
  color: #366dba;
  border-color: #366dba;
  background-color: #F4F4F4;
}


div#mainnav ul.menu li.edit a:visited,
div#mainnav ul.menu li.edit a:link {
  color: #333333;
  border: none;
  text-align: center;
  font-size: 90%;
  text-decoration: underline;
}

div#mainnav ul.menu li.edit a:hover,
div#mainnav ul.menu li.edit a:active,
div#mainnav ul.menu li.edit a:focus {
  color: #007700;
}

div#mainnav ul.tree,
div#mainnav ul.tree ul {
  margin: 0;
  padding: 0;
}

div#mainnav ul.tree li {
  list-style:none;
  margin: 0;
  padding: 0;
  padding-top: .125em;
  padding-bottom: .125em;
}

div#mainnav ul.tree a {
  display: block;
  margin: 0;
  padding: 0;
  padding-left: 18px;
  text-decoration: none;
  font-size: 110%;
  border: solid 1px transparent;
  color: #007700;
}

div#mainnav ul.tree li div a  {
  margin: 0;
  padding: 0;
  color: #007700;
  font-size: 110%;
  padding-left: 18px;
  border: solid 1px transparent;
  background-image: url(../images/open-arrow.png);
  background-repeat: no-repeat;
  background-position: 3px center;
}

div#mainnav ul.tree li div a.close {
  background-image: url(../images/closed-arrow.png);
}

div#mainnav ul.tree li li a {
  margin: 0;
  padding: 0;
  margin-left: 14px;
  padding-left: 2px;
  padding-top: .125em;
  padding-bottom: .125em;
  color: #222222;
  font-size: 100%;
}

div#mainnav ul.tree li li div a {
  margin: 0;
  padding: 0;
  margin-left: 16px;
  padding-top: .125em;
  padding-bottom: .125em;
  color: #000000;
  font-weight: normal;
  font-size: 95%;
  padding-left: 18px;
  border: solid 1px transparent;
  background-image: url(../images/open-arrow.png);
  background-repeat: no-repeat;
  background-position: 3px center;
}

div#mainnav ul.tree li li div a.close {
  background-image: url(../images/closed-arrow.png);
}

div#mainnav ul.tree li li li a {
  margin: 0;
  padding: 0;
  margin-left: 26px;
  padding-left: 5px;
  padding-top: .125em;
  padding-bottom: .125em;
  color: #222222;
  font-size: 95%;
}

div#mainnav ul.tree a:hover,
div#mainnav ul.tree a:active,
div#mainnav ul.tree a:focus,
div#mainnav ul.tree li a:active,
div#mainnav ul.tree li a:focus,
div#mainnav ul.tree li li a:hover,
div#mainnav ul.tree li li a:active,
div#mainnav ul.tree li li a:focus {
  color: #007700 !important;
  border-color: #007700;
  border-right: 3px solid #007700;
  background-color: #F4F4F4;
}

div#mainnav ul.tree li div a:hover,
div#mainnav ul.tree li div a:active,
div#mainnav ul.tree li div a:focus,
div#mainnav ul.tree li li li div a:hover,
div#mainnav ul.tree li li li div a:active,
div#mainnav ul.tree li li li div a:focus {
  border-color: #007700 !important;
  border-right: 3px solid #007700;
  background-color: #F4F4F4;
}

div#mainnav ul.tree li a.selected:visited,
div#mainnav ul.tree li a.selected:link,
div#mainnav ul.tree li li a.selected:visited,
div#mainnav ul.tree li li a.selected:link,
div#mainnav ul.tree li li li a.selected:visited,
div#mainnav ul.tree li li li a.selected:link {
  color: black;
  border: 1px solid #880000;
  border-right: 3px solid #880000;
  background-color: white;
  padding-right: 3px;
}

div#mainnav ul.tree li.edit a:visited,
div#mainnav ul.tree li.edit a:link {
  color: #007700;
  border: none;
  text-align: center;
  font-size: 60%;
  text-decoration: underline;
}

div#mainnav ul.tree li li.edit a:hover,
div#mainnav ul.tree li li.edit a:active,
div#mainnav ul.tree li li.edit a:focus,
div#mainnav ul.tree li li li.edit a:hover,
div#mainnav ul.tree li li li.edit a:active,
div#mainnav ul.tree li li li.edit a:focus {
  color: #880000;
}



div#breadcrumbs {
  margin: 0;
  padding: 0;
  margin-top: 1em;
  margin-bottom: .5em;
  margin-left: 17%;
  font-size: 80%;
}

div#breadcrumbs h2 {
  position:absolute;
  left: -330em;
  top: -30em;
}

div#breadcrumbs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

div#breadcrumbs ul li {
  display: inline;
  margin: 0;
  padding: 0;
  padding-right: 0.5em;
}

div#breadcrumbs a {
  text-decoration: none;
  border-bottom: thin solid #DDD;
}

div#breadcrumbs a:visited,
div#breadcrumbs a:link {
  color: #007700;
}

div#breadcrumbs li a:hover,
div#breadcrumbs li a:active,
div#breadcrumbs li a:focus {
  color: #007700;
  border-color: #880000;
}

h2#nav_rules_label {
	position: absolute;
	top: -30em;
	left: -300em;
}

div.rule_navigation {
	padding: 0;
	margin: auto;
	width: 35.8em;
}

div.rule_navigation ul {
	list-style: none;
	padding: 10px;
	height: 1.5em;
}
div.rule_navigation ul li {
	float: left;
	height: 1.2em;
	width: 6em;
  	text-align: center;
	font-weight: bold;
  	border: 1px solid black;
}

div.rule_navigation ul li.first a,
div.rule_navigation ul li.previous a,
div.rule_navigation ul li.next a,
div.rule_navigation ul li.last a {
  	width: 6.5em;
	border: none !important;
}
div.rule_navigation ul li.first {
  background: url(../images/arrow-first-black.png) no-repeat 2% center;
  background-color: #FAF7F0;
  width: 6.5em;
}

div.rule_navigation ul li.previous {
  background: url(../images/arrow-prev-black.png) no-repeat left center;
  background-color: #FAF7F0;
  width: 8em;
}

div.rule_navigation ul li.next {
  background: url(../images/arrow-next-black.png) no-repeat right center;
  background-color: #FAF7F0;
  width: 6.5em;
}

div.rule_navigation ul li.last {
  background: url(../images/arrow-last-black.png) no-repeat 98% center;
  background-color: #FAF7F0;
  width: 6.5em;
}

div.rule_navigation ul li.first.disabled,
div.rule_navigation ul li.previous.disabled,
div.rule_navigation ul li.next.disabled,
div.rule_navigation ul li.last.disabled {
  font-weight: normal;
  color: #888;
}

div.rule_navigation ul li:hover,
div.rule_navigation ul li:active {
  	background-color: white;
}
div.rule_navigation ul li.disabled:hover,
div.rule_navigation ul li.disabled:active {
  	background-color: #FAF7F0;
}

div.perm {
   margin: 15px 2px 5px 2px;
   padding: 3px;
   font-size: 75%;
   border-top: 1px solid #ccc;
}
div#content {
  margin: 0;
  margin-left: 17%;
  margin-top: .5em;
  padding: .25em;
  min-height: 30em;
  background-color: white;
}

div#content p.edit {
  padding: .25em;
  font-size: 90%;
  text-align: right;
}

div#content ul.edit {
  padding: .25em;
  font-size: 90%;
  text-align: right;
  list-style: none;
}

div#content ul.edit li a:before {
	content: "[ ";  
}

div#content ul.edit li a:after {
	content: " ]";  
}

div#content div.code {
  padding: .75em;
  font-family: courier, fixed, monospace;
  border: solid black thin;
  background-color: #F9F9F9;
  margin-bottom: 1em;
}

div#content a {
  text-decoration: none;  
  color: #000088;
  border-bottom: thin solid #AAAAAA;
}

div#content a:visited
{
  color: #004400;
}

div#content a:hover,
div#content a:active,
div#content a:focus
{
  color: #880000;
  border-color: #880000;
}

div#content p.sh {
  margin-top: .5em;
  margin-left: .5em;
  font-size: 110%;
}

div#content a.closed {
  background-image: url(../images/plus-black.png);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 20px;
}

div#content a.open {
  background-image: url(../images/minus-black.png);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 20px;
}


div#content h1 {
  margin: 0;
  padding: .25em;
  font-size: 2.5em;
  text-align: center;
  color: #007700;
  font-weight: normal;
}

div#content h2 {
  margin: 0;
  padding: 0;
  padding-top: .5em;
  font-size: 1.3em;
  font-weight: normal;
  letter-spacing: .03em;
  text-align:left;
  border-bottom: #444444 1px solid;
}


div#content h3 {
  margin: 0;
  padding: 0;
  margin-top: 1.25em;
  margin-bottom: .25em;
  font-size: 100%;
  font-weight:bold;
  text-align:left;
  letter-spacing: .02em;
  }

div#content h3 span.type {
  font-size: 90%;
  font-weight: normal;
  font-style:italic;
}

div#content h4 {
  margin: 0;
  padding: 0;
  margin-top: 1.25em;
  margin-bottom: .25em;
  font-size: 100%;
  font-weight:bold;
  text-align:left;
  font-style:italic;
  letter-spacing: .01em;
  }

div#content p {
  margin: 0;
  padding: 0;
  margin-bottom: .5em;
}

div#content p.error404 {
  margin-top: 1em;
  text-align: center;
  font-size: 250%;
}

div#content ul {
  margin: 0 0 .75em 0;
  padding-left: 1em;
  text-align: left;
}

div#content ul.quote {
  margin: 0;
  padding: 0;
  padding-left: 1em;
  list-style:none;
  font-style:italic;
}

div#content ul.quote li {
  margin: 0;
  pading: 0;
  margin-bottom: .5em;
}

div#content span.yes {
	color: black;
	font-weight: bold;
}

div#content span.u, /* not tested for browser compatibility */
div#content span.no {
  font-style: italic;
  color: gray !important;
  font-size: 80%;
}

div#content span.c, /* complete browser compatibility */
div#content span.acc, /* rule accepted */
div#content span.low {
  color: black;
  font-size: 80%
}

div#content *.n, /* no browser compatibility */
div#content *.high,
div#content *.very,
div#content span.f,
div#content *.fail,
div#content *.bad,
div#content *.violation {
  color: red;
}

div#content span.p, /* partial browser compatibility */
div#content span.dep, /* rule deprecated */
div#content span.w,
div#content *.warning,
div#content *.warn,
div#content *.poor,
div#content span.pv,
div#content *.potential {
  color: #C08b00; /* amber text color */
}

div#content span.recommendation,
div#content *.pro, /* rule proposed */
div#content *.pass,
div#content *.good {
  color: green;
}

div#content *.hc, /* Issues in high contract mode */
div#content *.check,
div#content *.exp {
  color: purple;
}

div#content *.na {
  color: gray;
}

div#content table {
  margin: .5em;
  border: black solid 1px;
  border-collapse: collapse;
}

div#content table caption {
  margin-top: 1em;
  text-align: center;
  font-size: 125%;
}


div#content table th {
  margin: 0;
  padding: .25em .3em;
  border: 1px solid black;
  background-color: #f9f9f9;
}

div#content table.rule_files tbody th {
  text-align: left;
}

div#content table.rule_files td.num {
  text-align: center;
}

th.id {
  background-color: transparent !important;
}

div#content table td {
  margin: 0;
  vertical-align: top;
  text-align: left;
  padding: .25em .35em;
  border: 1px solid black;
}

div#content table td.sta,
div#content table td.pri,
div#content table td.sev,
div#content table td.boolean {
	text-align: center;
}

div#content table.examples tbody td {
  font-weight: normal;
  text-align: center;
}

div#content table.examples tbody th {
  font-weight: normal;
  text-align: center;
}

div#content table.examples tbody td.title {
  text-align: left;
}

div#content table td span.desc {
  font-style:italic;
  font-size: 80%;
}

div#content table th#tim {
  width: 10%;
}

div#content table th#bre,
div#content table th#brw,
div#content table th#bl
{
  width: 20%;
}

div#content table td a:link,
div#content table td a:visited
{
  text-decoration: none;
}

div#content table td a:hover,
div#content table td a:active,
div#content table td a:focus
{
  text-decoration: underline;
}

div#content table.rules td.id,
div#content table.rules td.type,
div#content table.rules td.reference,
div#content table.rules tbody th
{
  text-align: center;
  font-weight: normal;
}

div#content table.rules ul {
  margin: 0;
  padding: 0.25em;
  list-style: none;
}

div#content table.rules ul li {
  padding-bottom: .5em;
}

div#content table.rules th#all {
  width: 15em;
}

div#content table.rules th#test {
  width: 4.5em;
}


div#content table.rules td.reference ul {
  text-align: center;
}

div#content table.rules td.reference li {
  margin: 0;
  padding: 0;
}

div#content table.rules div.notes {
  margin: 0;
  padding: 0;
  margin-top: .75em;
  margin-left: 1em;
}

div#content table.rules div.notes p.title {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 90%;
}


div#content table.examples tr.Bad td,
div#content table.examples tr.Bad th {
  background: #FFDDDD;
}

div#content table.examples tr.Poor td,
div#content table.examples tr.Poor th {
  background: #FFFFDD;
}

div#content table.examples tr.Good td,
div#content table.examples tr.Good th {
  background: #DDFFDD;
}


div#content table.form h2 {
  border: none;
}

div#content table.form p.textile {
  font-size: 80%;
  text-align: right
}

div#content table.form td.sect {
  background-color: #F9F9F9;
}

div#content table.form td.image {
  text-align: center;
}

div#content table.form td.checkbox {
  text-align: right;
}

div#content table.eval th.sub {
  text-align: left;
    font-weight: normal;
}

div#content table.eval th.total {
  text-align: right;
}

div#content table.eval th.tool {
  text-align: center;
  width: 4em;
}


div#content table.eval td.man,
div#content table.eval td.auto,
div#content table.eval td.ns,
div#content table.eval td.total
{
  text-align: center;
}

div#content table.eval th.AUTO,
div#content table.eval td.auto
{
   color: #009966;
   font-weight: bold;
}

div#content table.eval th.MANU,
div#content table.eval td.man
{
  color: #660088;
}

div#content table.test {
  border-collapse:collapse;
}

div#content table.test th.testdesc {
  text-align: left;
  font-weight: normal;
  padding: .5em;
}

div#content table.test th a,
div#content table.test td a {
  text-decoration: underline;
}

div#content table.test td.test {
  text-align: center;
}

div#content table.test ul.markup {
  margin: 0;
  padding: 0;
  list-style: none;
}

div#content table.test span.spec {
  color: gray;
  font-size: 60%;
}

div#content div.example {
  margin: 0;
  padding: 1em;
  margin-bottom: .5em;
  margin-left: 1em;
  margin-right: 8em;
  background-color: #F8F8F8;
  border: 2px solid black;
}

div#content h3.start {
  margin: 0;
  padding: .25em;
  margin-left: 1em;
  font-size: 100%;
  font-weight: normal;
  background-color: #F9F9F9;
  width: 7em;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

div#content ul.errorlist {
  color: red;
}

div#errors {
  border: red double medium;
  margin-left: 2em;
  margin-right: 4em;
  padding-left: 1em;
  padding-right: 1em;
} 

div#errors h2 {
  border: none;
  color: red;
}



div#content div.example form p.text label {
  margin: 0;
  padding: 0;
  padding-right: .5em;
  width: 10em;
  text-align: right;
  float: left;
}

div#content div.example fieldset ul {
  margin: 0;
  padding: 0;
  list-style: none;
}



div#footer {
  margin: 0;
  margin-top: 1em;
  padding: 0;
  padding-top: .5em;
  padding-bottom: .5em;
  border-top:#007700 medium double;
  border-bottom:#007700 medium solid;
  background-color: #FAF7F0;
  color: #007700;
  clear:both;
  font-size: 80%;
}

div#footer h2 {
  position:absolute;
  left: -330em;
  top: -30em;
}

div#footer ul {
  margin: 0;
  padding: 0;
}

div#footer ul li {
  list-style:none;
  margin: 0;
  padding: 0;
  text-align:center;
}

div#footer li a {
  text-decoration: none;
  font-size: 100%;
}

div#footer li a:visited,
div#footer li a:link {
  color: #007700;
  border-bottom: thin solid #DDD;
}

div#footer li a:hover,
div#footer li a:active,
div#footer li a:focus {
  border-bottom-color: #880000;
}

div#footer div.copyright {
  text-align: center;
}
