/* styles for P6 */


* {

margin: 0px;
padding: 0px;

}

html, body {

margin: 0px;
padding: 0px 0px 0px 0px;
text-align: left;

font-family: arial, helvetica, sans-serif;
font-size: 14px;

/*background: #dfdddc;*/
background: #ffffff;

/* adjust font-size for everything but ie5 */
voice-family: "\"}\"";
voice-family: inherit;
font-size: 14px;

height: 100%;
}

html>body {

font-size: 14px;
margin-left: 0px;

}

/* end ie5 fontsize fix */

#page_content {
    display: block;
    width: 100%;
    position: relative;
}

#banner {
    display: block;
    width: 100%;
    height: 116px;
    min-height: 116px;
    padding: 0px 0px 0px 0px;
    margin: 0px;
    background: url("../img/bg-banner.png") 0px 0px #a9a8a8 repeat;
    overflow: hidden;
    height: 0px !important;
    text-align: left;

/* ie 5 hack to correct height */
voice-family: "\"}\"";
voice-family: inherit;
height: 116px;

}

html>body #banner {

height: 116px;

}

/* end hack */

#banner a {
    border: none;
    margin: 0px;
    padding: 0px;
}
    
#banner a img {
    border: none;
    margin: 0px;
    padding: 0px;
}

#breadcrumbs {
    display: block;
    overflow: hidden;
    font-size: 18px;
    color: #ffffff;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    text-align: left;
    background: #8888ff;
    /*url("../img/bg-breadcrumbs.png") 0px 0px #0000ff repeat;*/
    border-top: 1px solid #000000;
    border-bottom: 2px solid #999999;
}

#breadcrumbs p {
    
    font-size: 12px;
    color: #ffffff;
    text-decoration: none;
    vertical-align: middle;
}

#breadcrumbs a {
    color: #ffffff;
    text-decoration: none;
}

#breadcrumbs a:visited {
    color: #ffffff;
    text-decoration: none;
}

#breadcrumbs a:hover {
    color: #00ff00;
    text-decoration: underline;
}

#menu {
    /*display: block;*/
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    /*background: #eeeeee;*/
    border: none;
    float: left;
    clear: left;
    /*position: absolute;*/
    left: 0px;
    top: 0px;
    text-align: left;
    font-size: 10px;
    /*margin-right: 16px;*/
}

#menu p {
    padding-top: 2px;
    padding-bottom: 2px;
}

#menu ul {
    list-style: none;
    list-style-position: outside;
}

#menu li {
    border-top: solid;
    border-top-width: 1px;
    border-top-color: #ffffff;
    padding-right: 4px;
}

#menu li.level1 {
    padding-left: 8px;
    background: #dddddd;
    border-top: solid;
    border-top-width: 1px;
    border-top-color: #ffffff;
}

#menu li.level2 {
    /*margin-left: -16px;*/
    padding-left: 16px;
    background: #cccccc;
}

#menu li.level3 {
    /*margin-left: -32px;*/
    padding-left: 24px;
    background: #bbbbbb;
}

#menu li.active1 {
    padding-left: 8px;
    background: #ffffff;
}

#menu li.active2 {
    padding-left: 16px;
    background: #ffffff;
}

#menu li.active3 {
    padding-left: 24px;
    background: #ffffff;
}

#menu li:hover {
    background: #ffffff;
}

#menu a, a:visited {
    text-decoration: none;
    color: #000000;
    padding-bottom: 4px;
    padding-top: 4px;
}

#menu a:hover {
    text-decoration: underline;
    color: #00ff00;
}

#maincontent {
    /*display: inline;*/
    text-align: left;
    /*position: absolute;*/
    right: 0px;
    left: 256px;
    top: 0px;
    margin-left: 256px;
    margin-right: 16px;
    padding-top: 12pt;
    line-height: 20px;
    /*float: right;*/
}

#maincontent p {
    padding-bottom: 12pt;
    color: #000088;
}

#maincontent p a, #maincontent p a:visited {
    color: #0000ff;
    text-decoration: none;
}

#maincontent p a:hover {
    color: #00ff00;
    text-decoration: underline;
}

#maincontent p.alert {
    color: #aa0000;
}

#maincontent p.equation {
    color: #000000;
}

#maincontent p.equation-top {
    text-align: left;
    vertical-align: top;
    color: #000000;
}

#maincontent p.equation-top img {
    vertical-align: top;
}

#maincontent p.equation-middle {
    text-align: left;
    vertical-align: middle;
    color: #000000;
}

#maincontent p.equation-middle img {
    vertical-align: middle;
}

#maincontent p.reference {
    color: #008800;
}

#maincontent p.reference a, #maincontent p.reference a:visited {
    color: #008800;
    text-decoration: none;
}

#maincontent p.reference a:hover {
    color: #00ff00;
    text-decoration: underline;
}

#maincontent p.paging {
    color: #888888;
    text-decoration: none;
}

#maincontent p.paging a {
    color: #888888;
    text-decoration: none;
}

#maincontent p.paging a:visited {
    color: #888888;
    text-decoration: none;
}

#maincontent p.paging a:hover {
    color: #00ff00;
    text-decoration: underline;
}

#maincontent p img {
    vertical-align: middle;
    padding-left: 4pt;
    padding-right: 4pt;
}

#maincontent img.left {
    float: left;
    padding-left: 4px;
}

#maincontent img.right {
    float: right;
    padding-left: 4px;
}

#maincontent h2 {
    padding-bottom: 12pt;
    color: #000088;
}

#maincontent h3 {
    padding-bottom: 12pt;
    color: #000088;
}

#maincontent table {
    font-size: 14px;
    padding-left: 30px;
    padding-bottom: 12pt;
    color: #000088;
}

#maincontent table.equation {
    padding-left: 0px;
}

#maincontent table.equation td {
    color: #000000;
    text-align: right;
}

#maincontent table.equation td+td {
    color: #000000;
    text-align: left;
}

#maincontent table.grid {
    padding: 0px;
    border: 1px solid #000088;
    border-collapse: collapse;
    background-color: #000088;
    margin: 2px;
    margin-bottom: 12pt;
}

#maincontent table.grid td {
    border: 1px solid #000088;
    border-collapse: collapse;
    background-color: #ffffff;
    padding: 2px;
    vertical-align: middle;
}

#maincontent table.grid td+td {
    text-align: right;
}

#maincontent table.grid th+td {
    text-align: right;
}

#maincontent table.grid th {
    border: 1px solid #000088;
    border-collapse: collapse;
    background-color: #ddddff;
    padding: 2px;
    vertical-align: baseline;
}

#maincontent table.grid input {
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
    color: #000088;

    border: none;
    padding: 0px;
    width: 5em;
    text-align: right;
}


#maincontent table.grid-left {
    padding: 0px;
    border: 1px solid #000088;
    border-collapse: collapse;
    background-color: #000088;
    margin: 2px;
    margin-bottom: 12pt;
    text-align: left;
}

#maincontent table.grid-left th {
    border: 1px solid #000088;
    border-collapse: collapse;
    background-color: #ddddff;
    padding: 2px;
    vertical-align: baseline;
}

#maincontent table.grid-left td {
    border: 1px solid #000088;
    border-collapse: collapse;
    background-color: #ffffff;
    padding: 2px;
    vertical-align: baseline;
}

#maincontent table.image-desc td {
    vertical-align: top;
}

#maincontent table.numeric th {
    text-align: left;
}

#maincontent table.numeric th+td {
    text-align: right;
}

#maincontent table.numeric td+td {
    text-align: right;
}

#maincontent table.equipment_chart td {
    width: 160px;
    max-width: 160px;
}

#maincontent table.all-centre td {
    text-align: center;
}

#maincontent table.steps td {
    white-space: nowrap;
}

#maincontent table.steps td+td {
    white-space: normal;
}

#maincontent td.born-haber1 {
    border-right: solid 3px #0000aa;
    text-align: right;
    vertical-align: middle;
}

#maincontent td.born-haber2 {
    color: #000000;
    text-align: left;
    padding-left: 4em;
    vertical-align: middle;
}

#maincontent tr.equation-middle td {
    text-align: left;
    vertical-align: middle;
    color: #000000;
}

#maincontent td {
    padding-right: 4pt;
    vertical-align: text-top
}

#maincontent td.equation {
    color: #000000;
}

#maincontent td.leftside {
    text-align: right;
    color: #000000;
}

#maincontent td.rightside {
    text-align: left;
    color: #000000;
}

#maincontent td.mirror {
    width: 10px;
    min-width: 10px;
    max-width: 10px;
    background: url("../img/mirror.png") repeat-y;
}
/*
#maincontent td *.info {
    color: #008800;
}
 */

#maincontent dt {
    font-weight: 600;
}

#maincontent dt a {
    text-decoration: none;
}

#maincontent dt a:hover {
    color: #00ff00;
    text-decoration: underline;
}

#maincontent input.display_field {
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
    color: #000088;

    border: none;
    padding: 0px;
    width: 5em;
    text-align: left;
}

#maincontent li {
    color: #000088;
}

#maincontent li.equation {
    color: #000000;
}

#maincontent li.equation p {
    color: #000000;
}

#maincontent li img {
    vertical-align: text-top;
}

#maincontent li a, #maincontent li a:visited {
    color: #000088;
    text-decoration: none;
}

#maincontent li a:hover {
    color: #00ff00;
    text-decoration: underline;
}

#maincontent ol {
    list-style: decimal;
    padding-left: 40px;
}

#maincontent ol ol {
    list-style: lower-alpha;
    padding-left: 40px;
}

#maincontent ol.alpha {
    list-style: lower-alpha;
    padding-left: 40px;
    padding-bottom: 12pt;
}

#maincontent ol.roman {
    list-style: lower-roman;
    padding-left: 40px;
    padding-bottom: 12pt;
}

#maincontent ol.numeric {
    list-style: decimal;
    padding-left: 40px;
    padding-bottom: 12pt;
}

#footer {
    display: block;
    position: relative;
    /*bottom: 0px;*/
    clear: both;
    background-color: #8888ff;
    width: 100%;
    border: none;
    border-top: 4px solid #ffffff;
    border-bottom: 1px solid #000000;
    font-size: 0.7em;
    color: #ffffff;
    height: 3.2em;
    min-height: 3.2em;
}

#footermenu {
    padding: 1em;
    color: #ffffff;
    text-align: left;
    float: left;
}

#footercredits {
    padding: 1em;
    color: #ffffff;
    text-align: right;
    float: right;
}

#footercredits a, #footercredits a:visited {
    color: #0000ff;
    text-decoration: none;
}

#footercredits a:hover {
    text-decoration: underline;
    color: #00ff00;
}


#maincontent ul {
    padding-left: 16pt;
    padding-bottom: 12pt;
}

#maincontent ul.none {
    list-style: none;
    padding-left: 40px;
}

#maincontent div.reminder {
    border: solid;
    border-width: 1px;
    border-color: #000000;
    color: #aa0000;
    font-weight: 600;
    font-style: oblique;
    padding: 2pt;
    margin-left: 12pt;
    margin-bottom: 12pt;
    margin-right: 50%;
}

#maincontent div.reminder p {
    margin: 0px;
    padding-bottom: 0px;
    color: #aa0000;
}

#user_entry p {
    color: #008800;
}

#user_error {
    color: #ff0000;
    font-weight: 600;
}

#equipment {
    height: 100%;
}

.equipment {
    height: 100%;
}

/* hide the head section of tables, as we don't need often need them, but we do want to provide the structural information */
thead {
    visibility: collapse;
    display: none;
}

/* equation bits */

.equation {
    text-align: left;
    color: #000000;
}

.equation-top {
    text-align: left;
    vertical-align: top;
    color: #000000;
}

.protect {
    clear: both;
    padding: 0px;
    margin: 0px;
    height: 12pt;
    border: none;
}

.protectfooter {
    clear: both;
    padding: 0px;
    margin: 0px;
    height: 0pt;
    border: none;
}

.equation-middle {
    text-align: left;
    vertical-align: middle;
    color: #000000;
}

.leftside {
    text-align: right;
    color: #000000;
}

.rightside, #maincontent .rightside {
    text-align: left;
    color: #000000;
}

/* generic classes */

.normal {
    color: #000088;
}

.error {
    font-weight: bold;
    color: #ff0000;
}

.question {
    
}

.hide {
    display: none;
}

.hidden {
    display: none;
    border: solid 1px #888888;
    border-top: solid 2px #000000;
    background: url("../img/answer-box.png") top left no-repeat;
    padding: 2pt;
    padding-left: 16px;
    margin-bottom: 12pt;
}

.hidden table {
    margin: 0px;
    padding: 0px;
}

.hidden_cell {
    border: solid;
    border-width: 1px;
    border-color: #ff0000;
    /*
    width: 150px;
    height: 75px;
    */
    padding: 1px;
}
.hidden_cell * {
    visibility: hidden;
}

td.bordernone {
    border: none;
    background: #ff0000;
}

td.borderright {
    border-bottom: none;
    border-top: none;
    border-left: none;
    background: #00ff00;
}

span.hidden * {
    visibility: hidden;
}

/*
.hidden_cell * * {
    visibility: visible;
}

.hidden_cell mathml * {
    visibility: hidden;
}
*/
.note {
    color: #0000ff;
    font-style: oblique;
}

.nowrap {
    white-space: nowrap;
}

.info {
    color: #008800;
}

.info a, .info a:visited {
    color: #008800;
    text-decoration: none;
}

.info a:hover {
    color: #00ff00;
    text-decoration: underline;
}

#maincontent p.info {
    color: #008800;
}

#maincontent p.info a {
    color: #008800;
}

#maincontent p.info a:visited {
    color: #008800;
}


#error_report {
    font-family: arial, helvetica, sans-serif;
    font-style: normal;
}
#error_report h2 {
    padding-left: 4px;
    padding-top: 4px;
    padding-bottom: 6pt;
    color: #000088;
}
#error_report table {
    font-size: 12px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 12pt;
    color: #000088;
}
#error_report td {
    font-size: 12px;
    padding-bottom: 6pt;
    color: #000088;
}
#error_report textarea {
    font-weight: 100;
    font-family: arial, helvetica, sans-serif;
    font-style: normal;
    font-size: 12px;
    color: #000000;

    /*border: solid 1px #000000; */
    padding: 0px;
    text-align: left;
}
#error_report input {
    font-weight: 100;
    font-family: arial, helvetica, sans-serif;
    font-style: normal;
    font-size: 12px;
}


.animleft {
    float:left;
    padding: 8px 4px;
}

.animright {
    float:right;
    padding: 8px 4px;
}

.alert {
    display: block;
    padding: 8px 0px 12pt 32px;
    background: url("../img/icon-alert.png") no-repeat 4px 8px;
    color: #aa0000;
    font-weight: 600;
}

div.alert li {
/*    background-color: #88ffff;*/
    color: #aa0000 !important;
    font-weight: 600;
}

.alert *[mathcolor] {
    color: #aa0000;
}

.red, *[mathcolor="red"] {
    color: #aa0000;
    font-weight: 600;
}

.red_block {
    text-align: center;
    color: #ffffff;
    background-color: #aa0000;
    font-weight: 600;
}

.red_bar {
    text-align: left;
    border: none;
/*
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #aa0000;
*/
    color: #aa0000;
    font-weight: 600;
    background: url("../img/red-arrow.png") no-repeat right center;
}

.red_bar span {
    background: #ffffff;
    border-right: solid 2px #ffffff;
}

.bright_red_block {
    color: #ffffff;
    background-color: #ff0000;
    font-weight: 600;
}

.black, *[mathcolor="black"] {
    color: #000000;
    font-weight: 600;
}

.black_block {
    text-align: center;
    color: #ffffff;
    background-color: #000000;
    font-weight: 600;
}

.blue, *[mathcolor="blue"] {
    color: #0000ff;
    font-weight: 600;
}

.blue_block {
    text-align: center;
    color: #ffffff;
    background-color: #0000ff;
    font-weight: 600;
}

.blue_bar {
    text-align: left;
    border: none;
/*
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #0000ff;
*/
    color: #0000ff;
    font-weight: 600;
    background: url("../img/blue-arrow.png") no-repeat right center;
}

.blue_bar span {
    background: #ffffff;
    border-right: solid 2px #ffffff;
}

.green, *[mathcolor="green"] {
    color: #00ff00;
    font-weight: 600;
}

.orange, *[mathcolor="orange"] {
    color: #ff6600;
    font-weight: 600;
}

.input, *[mathcolor="input"] {
    color: #00ff00;
    font-weight: 600;
    border: solid;
    border-width: 1px;
    border-color: #000000;
    width: 40px;
    min-width: 40px;
    padding-left: 1em;
    padding-right: 1em;
    /*background: #ffffff;*/
}


.answer_option {
    border: none;
    border-right: solid;
    border-bottom: solid;
    border-width: 1px;
    border-color: #666666;
    background-color: #ddddaa;
    padding: 2px;
    line-height: 2em;
    white-space: nowrap;
}

.answer_option a {
    text-decoration: none;
}

img.answer_option {
    vertical-align: top;
}

.crossout {
    background-image: url("../img/crossout.png");
    color: #000000;
}

.term {
    color: #aa0000;
    font-weight: 600;
    font-style: italic;
}

.imagemap {
    border: none;
}

.imagemap-hidden {
    border: none;
    display: none;
}

.overlap {
    z-index: 2;
    position: absolute;
    font-size: 1.5em;
}

.eq {
    display: inline;
    clear: right;
    float: left;
    vertical-align: text-top;
}

.eqr {
    display: inline;
    clear: right;
    float: left;
    vertical-align: text-top;
    text-align: right;
}

.block-left {
    display: inline;
    clear: right;
    float: left;
    vertical-align: text-top;
    margin-right: 24pt;
}

.graph {
    border: none;
    padding: 0px;
    padding-bottom: 12pt;
}

.plotgraph {
    position: relative;
}

.plotgraph img {
    float: left;
}

.rollover {
    display: none;
    position: absolute;
    background: #ffffff;
    border: solid 1px #000000;
    padding: 4px;
    color: #000000;
    z-index: 5;
}

/* now for a set of classes used to draw indicators */
.indicator1 {
    background: #ff0000 !important;
}
.indicator2 {
    background: #cc00ff !important;
}
.indicator3 {
    background: #0000ee !important;
}
.indicator4 {
    background: #ff6600 !important;
}
.indicator5 {
    background: #ffff00 !important;
}
.indicator6 {
    background: #eeeeee !important;
}
.indicator7 {
    background: #ffccff !important;
}
.indicator8 {
    background: #990099 !important;
}
.indicator9 {
    background: #00bb00 !important;
}

sup {
    line-height: 0em;
    vertical-align: super;
/*    color: #00ffff; */
}

sub {
    line-height: 0em;
    vertical-align: sub;
/*  color: #00ffff; */
}