/* 6 January 2007:
- minor cleanup
- add CSS3 selectors
*/
html {
margin: 0px;
padding: 0px;
border-top: 1.4em #000033 solid;
font-size: 12px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
background-color: white;
}
body {
margin: 0px;
padding: 0px;
font-family: "Trebuchet MS", Arial, sans-serif;
color: #171717;
line-height: 1.45; /* something smart Eric Meyer said: no unit here */
text-align: justify;
width: 40em;
padding-left: 15em;
padding-right: 2em;
border-right: 1px #000033 dotted;
}
h1 {
padding: 2em 1em 2em 1em;
font-size: 2em;
color: white;
text-align: right;
margin-left: -10em;
margin-top: 0em;
margin-right: -1em;
background-image: url(../images/logoESS.gif);
background-position: left 25%;
-o-background-size: 100% auto;
background-size: 100% auto;
background-origin: content;
border-bottom: 0.4em #000033 solid;
border-left: 0.1em #000033 solid;
text-transform: uppercase;
text-shadow: white 0px 0px 10px, black 3px 3px 5px;
}
h2 {
font-size: 1.4em;
border-left: 0.6em black solid;
padding-left: 0.3em;
border-bottom: 1px black solid;
padding-bottom: 0.1em;
margin-top: 1.5em;
letter-spacing: 0.1em;
}
h3 { margin-bottom: 0em; }
h2,h3 { clear: both; }
h1 span { font-size: 0.7em; color: #EFEFEF; }
h2 span { font-size: 0.7em; color: gray; }
h2[id]:hover::after, h3[id]:hover::after { content: "#" attr(id); float:right; font-size:0.7em; /*line-height:2em;*/ color: maroon; padding-left: 1em;}
p { margin-top: 0px; margin-bottom: 0.5em;}
dt {
font-weight: bold;
margin: 10px 0px 2px 0px;
padding: 2px 0px;
border-top: 1px black solid;
border-bottom: 1px black solid;
text-indent: 1em;
letter-spacing: 0.1em;
position: relative;
}
dd + dd { margin-top: 0.7em; }
table { font-size: inherit; } /* so that the font-size is inherited into table */
small { margin-top: 2em; display:block; clear: both; }
pre { padding: 0.5em; border: 1px gray solid; overflow:auto; background-color: #EFEFEF; }
kbd { border: 2px gray outset; padding: 0em 0.1em; background-color: white; }
kbd:active { border: 2px gray inset;}
img.left { float: left; clear: both; margin-right: 1em; margin-bottom: 0.5em; margin-top: 0.3em; max-width: 45%; }
img.right { float: right; clear: both; margin-left: 1em; margin-bottom: 0.5em; margin-top: 0.3em; max-width: 45%; }
/* link styles */
a:link, a:visited {color: navy; text-decoration: none; font-weight: bold;}
p:hover a, p:hover + p a, ul:hover a, dl:hover a, table:hover a { text-decoration: underline; }
a:hover { text-decoration: none !important; border-width: 1px 0px; border-style: none; color: green; background-color: #efefef;}
/* navigation menu */
#navmenu {
width: 150px;
position: fixed; /* f*ck, Opera 8 'loses' abs positioned content within fixed */
position: absolute;
top: 0px;
right: 0px;
padding: 0px;
margin: 0px;
display: none; /* the TOC script will make it appear */
text-align: left;
}
#navmenu > li:first-child { font-weight: bold; color: white; background-color: #000033; }
#navmenu li {
line-height: 1.4em;
padding-left: 3px;
list-style-type: none;
background-color: #2E2E58;
color: white;
margin: 0px 0px 1px 0px;
position: relative;
}
#navmenu li:hover { background-color: maroon; color: white; }
#navmenu > li:first-child:hover { width: auto; right: 0px; }
#navmenu > li:hover { width: 298px; position: relative; right: 151px; font-weight: bold; }
#navmenu li:hover > ul { display: block; }
#navmenu li ul {
margin: 0px;
padding: 0px;
position: absolute;
top: 1.4em;
right: 141px;
width: 150px;
margin-top: -9px; /* 1px between list, but with 10px padding */
padding-top: 10px;
padding-right: 10px; /* so that the box still overlap; helps with hovering */
font-weight: normal;
display:none;
}
#navmenu li ul li { padding-left: 0px; } /*the links should fill to full size of list item */
#navmenu li a { display: block; text-decoration:none !important; color:white; padding-left: 3px; }
#navmenu li a:hover { border-style: none !important; background-color: inherit !important;}
#navmenu #toc li.h2 a { padding-left: 0.3em; font-size: 0.9em; font-weight:bold;}
#navmenu #toc li.h3 a { padding-left: 0.8em; font-size: 0.8em;}
#navmenu #toc li.h4 a { padding-left: 1.2em; font-size: 0.8em; font-style: italic; }
/* for IE: with some scripting and these styles the menus also work in IE */
/* Do not put complex selectors IE does not understand in same style declaration!! */
#navmenu li.first { color: white; background-color: #000033; }
#navmenu li.expand ul { display: block; }
#navmenu li.expand { width: 299px; position: relative; margin-left: -152px; font-weight: bold; background-color: maroon; color: white; }
#navmenu li.expand a:hover { background-color: maroon; }
#navmenu ul.ulhover { display:block; background-color: #CDD5DD; /* background-color so there's a background so hovering works... */ padding-top: 1px; margin-top: 0px; margin-right: 0em;}
/* -------- Requires CSS3 Selectors (O9, IE7, FF, SF) -------- */
/* well implemented by http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html */
a[href$='.pdf'], a[rel='pdf'], a[rel*='pdf'], a[rel~='pdf'] { padding-right: 18px; background: transparent url(../images/icons/icon_pdf.png) no-repeat center right; }
a[href^="mailto:"] { padding-right: 18px; background: transparent url(../images/icons/icon_mailto.png) no-repeat center right; }
a[class ="popup"] { padding-right: 18px; background: transparent url(../images/icons/icon_popup.png) no-repeat center right; }
a[href$='.doc'] { padding-right: 18px; background: transparent url(../images/icons/icon_doc.png) no-repeat center right; }
a[href$='.xls'] { padding-right: 18px; background: transparent url(../images/icons/icon_xls.png) no-repeat center right; }
a[href$='.ppt'] { padding-right: 18px; background: transparent url(../images/icons/icon_ppt.png) no-repeat center right; }
a[rel ~='external'] { padding-right: 18px; background: transparent url(../images/icons/icon_external.png) no-repeat center right; }
/* faviconize script needs some styling */
img.faviconimg {
max-width: 1.1em;
margin: 0;
padding: 0;
margin-left: 2px;
border-width: 0px;
vertical-align: top;
opacity: 0.5;
}
a:hover img.faviconimg { opacity:1; }
p:hover a img, p:hover + p a img, ul:hover a img, dl:hover a img, table:hover a img{ opacity:1; }
/* -------- page specific stuff -------- */
/* Sortable tables */
table.sortable span.sortarrow { color: black; padding-left: 0.5em; font-family: sans-serif; }
table.sortable th { vertical-align: middle; cursor: pointer; }
/* CSS Exp style */
dt span.expdate { font-size: 0.7em; line-height: 2em; color:gray; position:absolute;right:0em;}
/* -------- various media styles -------- */
@media print {
html, body { border-style:none; margin: 0px; padding: 0px; font-size: 10pt; width: 100%; background-color: transparent;}
h1 { border-style: none; }
h1:first-letter { margin: 0px; border-style: none; }
#navmenu { display:none !important; }
h1, h2, h3 { page-break-after: avoid; }
img { width: auto; max-width: 100%; }
}
@media projection {
html { font-size: 1.2em; }
body { width: auto; padding-left: 3em; }
}
/* voice styles */
@media speech {
title { display:block; speak:normal; }
h1, h2, h3 { voice-family: female; }
p, dl, ul, ol { voice-family: male; }
acronym { speak:spell-out; voice-family: female; }
abbr[title]::after { content: "This abbreviation means" attr(title); speak:normal; }
acronym[title]::after { content: "This acronym means" attr(title); speak:normal; }
}
