/* hotsos.com site-wide standard */
/*
Required document structure:
*/
/* links */
a:link, a:visited, a:hover, a:active { /* font-weight: bold; */ }
a:link { text-decoration: none; color: #069; } /* blue */
a:visited { text-decoration: none; color: #069; } /* blue */
a:hover { text-decoration: underline; }
a:active { text-decoration: underline; color: #900; } /* red */
/* site-wide structural elements */
html {
font: normal 9pt/12pt Verdana, Helvetica, Arial, sans-serif;
background-color: #fff;
color: #000;
}
img { border: none; }
table { border-collapse: collapse; }
abbr, acronym { border-bottom: 1pt dotted #666; cursor: help; }
sup { /* font-size: 70%; */ vertical-align: super; }
tt { font-family: "Lucida Sans Typewriter", "Courier New", Courier, monospace; }
em em { font-style: normal; }
/* site-wide classes */
.page-wide { width: 800px; }
.display { text-align: center; vertical-align: middle; }
.left { text-align: left; }
.center { text-align: center; }
.right, .number { text-align: right; white-space: nowrap; }
.float-left { float: left; padding-right: 2em; padding-bottom: 1ex; }
.float-right { float: right; padding-left: 2em; padding-bottom: 1ex; }
.clear-right { clear: right; }
.clear-all { clear: both; }
.wrap-ok { white-space: normal; }
.pre { white-space: pre; }
.ok { }
.label,
.required { text-align: right; vertical-align: baseline; white-space: nowrap; }
.required { color: #900; }
.highlight { color: black; background: #ffcc33; }
.action { font-size: 6pt; }
.indent { text-indent: 2em }
.logo { font: bold italic 9pt/12pt Arial, sans serif; color: #999; }
.working { background: #ffcc33; }
.pad { padding: 1em; }
.quote,
.attrib {
/* background: #acf; */
margin: 2ex 60px 2ex 60px;
padding: .5ex 1em;
}
.quote {
font-style: italic;
margin-bottom: 0;
padding-bottom: .5ex;
/* border-top: 1px solid #aaa; */
}
.attrib {
font-weight: bold;
font-size: 90%;
line-height: 100%;
font-style: normal;
color: #444;
text-align: right;
margin-top: 0;
padding-top: .5ex;
/* border-bottom: 1px solid #aaa; */
}
/*
.attrib:before {
content: "—";
}
*/
#masthead,
#main,
#bottomlinks {
width: 800px; /* cater to 800x600 windows */
margin-left: 15px; /* offset from LH window border */
border: 0px dashed green; /* for debugging */
}
/* masthead formatting */
/*
#masthead {
font-weight: normal;
font-size: 10pt;
line-height: 12pt;
font-style: normal;
}
*/
#masthead table,
#masthead tr,
#masthead td,
#masthead form { margin: 0; padding: 0; border: 0; }
#masthead .page-id { background: transparent; }
#masthead .breadcrumb,
#masthead .login { font-size: 8pt; padding-bottom: .5ex; }
#masthead .breadcrumb { text-align: left; }
#masthead .login { text-align: right; }
#masthead .graphic { background: black; vertical-align: middle; }
#masthead .nav {
background: #900; /* #d51a00; */
color: #ff0;
height: 4ex;
vertical-align: middle;
font-weight: bold;
}
#masthead .links {
font-size: 9pt;
/* line-height: 12pt; */
vertical-align: middle;
text-align: left;
padding: .5ex .5em;
}
#masthead .search {
vertical-align: middle;
text-align: right;
}
#masthead input {
font-size: 8pt;
line-height: 10pt;
}
#masthead a:link,
#masthead a:visited,
#masthead a:hover,
#masthead a:active {
color: white;
font-weight: bold;
}
#masthead a:hover,
#masthead a:active {
text-decoration: underline;
color: white;
}
/* bottomlinks formatting */
#bottomlinks {
font-size: 8pt;
line-height: 10pt;
border-top: 1px solid #aaa;
padding-top: 2ex;
}
#bottomlinks table {
width: 800px;
margin-left: 0;
font-size: 8pt; /* should inherit from #bottomlinks, but doesn't on IE5.5 */
}
#bottomlinks td {
vertical-align: middle;
}
#bottomlinks td.logo {
/* width: 200px; */
text-align: center;
}
#bottomlinks td.content {
text-align: left;
padding-left: 20px;
}
#bottomlinks td.w3c {
text-align: right;
}
#bottomlinks .nav {
vertical-align: top;
margin-bottom: 1ex;
}
#bottomlinks p {
margin-top: 0;
margin-bottom: 0;
}
/* header formatting */
#nav h1,
#calendar h1,
#home h1,
#home h2,
#home h3,
#content h1,
#content h2,
#content h3 {
margin: 0 0 0 20px;
color: #900; /* #d51a00; */
}
#nav h1,
#calendar h1,
#home h1,
#content h1 {
font-weight: normal;
font-size: 125%;
line-height: 125%;
font-style: normal;
padding-top: 2ex;
margin-top: 0;
margin-bottom: 4ex;
/* border-top: 2pt solid #f00; /* bug: can't make the 2pt line show unless ^N */
}
#content h3 {
margin-left: 2.25em;
}
#nav h1 {
margin-left: 5px;
color: black;
}
#calendar h1 {
text-align: center;
color: black;
}
#home h2,
#content h2 {
font-weight: normal;
font-size: 110%;
line-height: 110%;
font-style: normal;
margin-top: 4ex;
margin-bottom: 2ex;
/* border-top: 1pt solid #f00; /* bug: 1pt line won't show unless ^N */
}
#home h3,
#content h3 {
font-weight: normal;
font-size: 100%;
line-height: 150%;
font-style: italic;
margin-top: 2ex;
margin-bottom: 1ex;
}
#calendar .month {
font-weight: bold;
padding-top: 1ex;
}
#calendar .day {
vertical-align: top;
text-align: right;
padding-right: .5em;
width: 5em;
}
#calendar .event {
vertical-align: top;
padding-right: .5em;
}
/* nav formatting */
/*
#nav {
font-size: 10pt;
}
*/
#nav p, #nav table {
margin: 5px 2px 2px 5px;
}
#nav table {
border-collapse: collapse;
/* border: 0px solid black; */
}
#nav tr {
background: transparent;
}
#nav th,
#nav td {
font-size: 9pt;
padding: .5ex 2em .5ex .5em;
border: 1px solid #aaa;
}
#nav tr.current {
background: #aaa;
}
#nav tr.current a,
#nav tr.current a:hover {
text-decoration: none;
background: transparent;
}
#nav a {
background: transparent;
color: #222;
}
#nav a:hover {
text-decoration: none;
background: white;
}
/* calendar formatting */
#calendar h1 {
margin-left: 10px;
margin-bottom: 0;
}
#calendar table {
font-weight: normal;
font-size: 8pt;
line-height: 12pt;
font-style: normal;
margin: 0 0 0 10px;
}
#calendar th,
#calendar td {
font-size: 8pt;
}
#calendar th {
text-align: left;
padding-top: 2ex;
}
#calendar .date {
text-align: right;
}
/* content formatting */
#content p {
margin: 0 40px 1ex 40px;
}
#content blockquote {
margin: 1ex 60px 1ex 60px;
}
#content table,
#content ul,
#content ol,
#content dl {
font-weight: normal;
font-size: 9pt;
line-height: 12pt;
font-style: normal;
/* margin: 0 0 0 40px; */
margin: 0 0 1ex 40px;
padding-left: 0;
}
#content dt,
#content dd,
#content li {
margin-left: 40px;
margin-bottom: .5ex;
}
/*
#content dd p,
#content li p {
margin-left: 40px;
}
*/
#content dt {
font-style: italic;
}
#content table {
margin: 2ex 0 2ex 40px;
border-collapse: collapse;
border: 0px solid black;
}
#content th,
#content td {
padding: .5ex 1em .5ex 1em;
border: 1px solid #aaa;
}
#content th {
background: #ccc;
font-weight: bold;
vertical-align: bottom;
}
#content td {
vertical-align: middle;
}
#content table.inline {
background: transparent;
border: 0px solid red;
margin: 0 40px 1ex 40px;
}
#content table.inline th,
#content table.inline td {
/* background: transparent; */
border: 0px dashed blue;
padding: 0 20px 0 0;
vertical-align: top;
}
#content table.inline p {
margin: 0;
}
#content table.inline blockquote {
margin: 1ex 2em 1ex 2em;
}
#content table.form {
border: 0px solid green;
margin: 2ex 0 2ex 10px;
}
#content table.form td,
#content table.form th {
white-space: nowrap;
border: 1px solid #aaa;
}
#content table.form td.wrap-ok {
white-space: normal;
}
#content input {
padding: .5ex .5ex .5ex .5ex;
font: normal 100%/90% Arial, sans-serif;
}
#content p.question {
font-weight: bold;
}
#content p.question:before {
content: "Q: ";
}
#content p.answer {
}
#content p.answer:before {
content: "A: ";
}
#content .callout {
font: italic 150%/125% "Times New Roman", Times, serif;
padding: 1ex 2em 1ex 2em;
/* background: lightsteelblue; /* bug in IE */
}
#content .callout em {
font-style: normal;
}
#content .subtitle {
font-style: italic;
padding: 1ex 2em 1ex 2em;
}
/* home formatting */
#home table,
#home ul,
#home ol,
#home dl {
font-weight: normal;
font-size: 9pt;
line-height: 12pt;
font-style: normal;
margin: 0 0 0 10px;
}
#home dt,
#home dd,
#home li {
margin: 0;
}
#home dd p,
#home li p {
margin-left: 10px;
margin-bottom: 1ex;
}
#home dt {
font-weight: bold;
}
#home table {
margin: 2ex 0 2ex 10px;
border-collapse: collapse;
border: 0px solid black;
}
#home h1,
#home h2,
#home h3 {
margin-left: 0;
margin-bottom: 1ex;
margin-top: 0;
padding-top: 2ex;
}
#home p {
margin: 0 40px 2ex 10px;
}
/* positioning */
div#main {
/* background: yellow; */
/* border: 2px dotted blue; */
position: relative;
height: 100%;
}
div#nav {
/* background: lightblue; */
position: absolute;
top: 2ex;
left: 0;
width: 182px;
height: 100%;
z-index: 2;
background: #ccc;
}
#nav table {
width: 172px;
}
div#content {
/* background: orange; */
/* border: 2px dotted green; */
border-left: 182px solid #ccc;
}
div#bottomlinks {
position: relative;
}
/*
div#calendar {
background: #ddd;
position: absolute;
top: 0;
right: 0;
width: 310px;
height: 100%;
z-index: 2;
}
*/
div#calendar {
background: #ddd;
float: right;
}
#calendar table {
width: 300px;
}
div#home {
/* background: orange; */
/* border: 2px dotted green; */
/* border-right: 250px solid #b0c4de; /* lightsteelblue */
border-right: 310px solid #ddd;
/* #ffdab9 */
/* #fc6 */
/* ffce63 -- xhtml 1.0 compliant yellow */
}
/* BUG: Need to figure out a way to make the calendar not overlap the
* bottomlinks section when the calendar is taller than the home section.
*/