
/* layout -------------------------------------------------- */

/* right sidebar */

#main {
    float: left;
    width: 100%;
}

#sidebar { 
    margin: 0em 0em 1em 1.5em;
    width: 15em;
    clear: both;
    float: right;
}

.sidebox {
    padding: 0.5em 0em 1em 0.75em;
}  

.sidebox li {
    font-size: 0.8em;
}

@media print {
    #main { width: 100%; }
    #sidebar { display: none; }
}

/* two equal columns */

#left_column {
    width: 48%;
    float: left;
    margin: 0em;
    padding: 0em;
    margin-top: -1em;
    margin-bottom: 2em;
}

#right_column {
    width: 48%;
    float: right;
    margin: 0em;
    padding: 0em;
    margin-top: -1em;
    margin-bottom: 2em;
}


/* links --------------------------------------------------------- */
	
a:link, a:visited, a:active { 
    color: #303b97; 
    text-decoration: none; 
    background-color: transparent;
    font-weight: bold;
}
a:active { background-color: #FD0; }
a:hover { border-bottom: 1px dashed #ccc; }
a.offsite:hover { 
  background-color: #d0dbe7; 
  text-decoration: none;
  border-bottom: none;
}
a.offsite:hover:after { 
  content: " \2708 "; 
  color: white; }
a img { border: none; }

[id]:hover:after { 
  content: " #" attr(id) " "; 
  font-size: 50%;
  color: #ccc;
  text-decoration: none;
}

@media print {
    a.offsite:after {
        content: " <" attr(href) "> ";
        font-size: 85%;
        font-weight: lighter;
    }
} 

         
/* blocks ------------------------------------------------------- */

p { margin: 0px; }
p + p { margin-top: 0.5em; }

@media screen {
    body {
        color: black;
        background-color: #fcfcfc;
        margin: 36pt 80pt;
    }
    p, td, th, li, dt, dd, blockquote { 
        font: 0.9em/1.35em Optima, Lucidia Sans, sans-serif; 
        color: black;
    }
    pre { font-family: helvetica, sans-serif; }
}

@media print {
    body {
        color: black;
        background-color: white;
        margin: 18pt 48pt 18pt 32pt;
    }
    p, td, th, li, dt, dd, blockquote { 
        font: 8.5pt/10.5pt Palatino Linotype, palatino, Book Antiqua, serif; 
    } 
}


/* headings  -------------------------------------------------- */

h1, h2, h3, h4 {
    page-break-after: avoid;
    page-break-inside: avoid;
    background-color: transparent;
    font-weight: normal;
    padding: 0;
}

@media screen {
  h1, h2, h3, h4 {
    margin: 24px 0px 0px 0px; 
    font-family: Helvetica Neue, Geneva, sans-serif;
    font-weight: bold;
  }

  h1 .accent, h2, h3 .accent, h4 { color: #864; } 
  h1, h2 .accent, h3, h4 .accent { color: #369; }

  h1 { font-size: 42px; }
  h2 { font-size: 31px; }
  h3 { font-size: 26px; }
  h4 { font-size: 18px; }

  h1 {
    line-height: 38px;
    padding: 0;
    border-bottom: 1px solid #333;
    background-color: transparent;
  }

  h1.frontpage { padding-bottom: 15px; margin-bottom: 15px; }  
  h1 + .subtitle { margin: 0; }
  h1 + .navtop, h1 + .subtitle + .navtop {
    margin: 0.5em 0 0 0;
    position: relative;
    text-align: right;
    top: -3.25em;
  }
  h1 + .navtop { top: -2em; }
  h1 + p {margin-top: 1.5em; }  
  h4 + .navtop {
    position: relative;
    top: -1.3em;
    text-align: right;
  }

  div#sidebar + h2  {
    margin-top: 0.2em;
    padding-top: 0em;
  }

}

@media print {
  h1, h2, h3, h4 {
    font-family: Palatino, Palatino Linotype, serif; 
    margin: 8pt 0 0 0;
    color: black;
  }

  h2 {
    font-size: 14pt;
    margin-top: 16pt;
    margin-bottom: 10.5pt;
  }

  h3 {
    font-size: 12pt;
    margin-top: 10.5pt;
    margin-bottom: 0pt;
  }

  h4 {
    font-size: 10pt;
    margin-top: 5.5pt;
    margin-bottom: 0pt;
  }
  
  .navtop {
    display: none;
  }
}

/* tables -------------------------------------------------------- */

table.grid th {
  font-weight: normal;
  text-align: right;
  color: white;
  background-color: #333;
  padding: 3px 6px;
}

table.grid td {
  background-color: #d0dbe7;
  padding: 3px 6px;
}


/* lists -------------------------------------------------------- */

ul { list-style-type: disc; margin: 0 0 0.5em 0.5em; padding-left: 1.5em; }
dt { font-weight: bold; }
dd { padding-bottom: 0.5em; }

@media screen {
    ul { list-style-type: none; padding-left: 0em; }
    ul li:before { content: '\FF0A\00A0 '; color: #740; font-size: 0.9em; } 
}

ul.inline { list-style-type: none; }
ul.inline li { display: inline; margin-right: 1em; white-space: nowrap}
ul.inline li:before { content: ''; }

/* other redefinitions ------------------------------------------ */

@media screen {
  strike { text-decoration: none; }
  strike:after { content: "^H^H^H^H^H"; }
}

acronym:hover, abbrev:hover { cursor: help; }
abbrev[title], acronym[title], span[title] {
  border-bottom: thin dotted;
  cursor: help;
}

input[type='text'], textarea, select {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  margin: 2px 1px;
  padding: 1px;
}

@media print {
  form { display: none; }
}

hr {
  border-style: none;
  background-color: #ddd;
  padding: 1px;
}

h1 + pre hr { display: none; }


blockquote {
  border-style: solid;
  border-color: #d0dbe7;
  border-width: 0 0 0 .25em;
  padding-left: 0.5em;
}


q { quotes: '\201C' '\201D' '\2018' '\2019'; }          
q:before {
  content: "\201C";
  content: open-quote;
  font-size: 1.5em;
}
q:after {
  content: "\201D";
  content: close-quote;
  font-size: 1.5em;
}

/* specialisations --------------------------------------------------- */

p.intro {
	font-size: 1.05em;
	line-height: 1.35em;
    font-family: Helvetica Neue, Geneva, sans-serif;
	page-break-inside: avoid;
}

p.intro a {
	font-weight: bolder;
}

p.intro+h2, p.intro+h3, p.intro+h4 {
	margin-top: 2em;
}

.callout {
    width: 33%;
    font: 1.3em/1.3em Garamond, "Times New Roman", Times, serif;
    padding: 0em 0em 0em 1em;
    border-left: #a30 solid 0.25em;
    page-break-inside: avoid;
}

.left {
    float: left;
    margin: .5em 2em .5em 0em;
}

.right {
    float: right;
    margin: .5em 0em .5em 2em;
}

.ad1 {
  margin: 1em 0;
}

@media print {
    .ad1 {
        display: none;
    }
}

@media print {
    .callout {
        font-size: 1.15em;
        line-height: 1.2em;
        width: 40%;
    }
}


@media screen {
  .banner {
    margin: 2em 0;
    padding: 1em;
    background-color: #ececda;
    border-left: #a30 solid 1em;
  }
}

@media print {
  .banner {
    margin: 8pt 0;
    padding: 12pt;
    border-left: solid black 12pt;
  }
}

.footnote {	 /* piddling detail */
  text-align: right;
  font-size: 0.8em;
  margin-top: 0px;
}

.button {   /* one of those little buttons that say I'm a good boy */
  text-align: right;
}

/* text-based button */
.textbutton, a.textbutton:link, a.textbutton:visited, a.textbutton:active, a.textbutton:hover {
  border:1px solid;
  border-color:#FC9 #630 #330 #F96;
  padding:0 3px;
  font:bold 10px verdana,sans-serif;
  color:#fff;
  background:#F60;
  text-decoration:none;
  margin:0;
}

@media print {
  a.textbutton, .ad {
    display: none;
  }
}

p.navtop {
  font-family: arial, helvetica, sans-serif;
  font-size: 0.9em;
}

/* navigation banner at the bottom of the page */
p.navigation {
  font-family: arial, helvetica, sans-serif;
  font-weight: bold;
  color: white;
  font-size: 0.85em;
  text-align: right;
  margin-top: 2em;
  padding: 0.1em 80pt 0.5em 80pt;
  background-color: #369;
  opacity: .9;
  border-top: white solid 3px; 
  clear: both;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
}

p.navigation a {
  color: white;
  margin-left: 1.5em;
}

@media print {
  .navigation {
    display: none;
  }
}

.detail {
  font-size: 0.8em;
  page-break-inside: avoid;
}

.warning {
  background-color: #F60;
  border: #C30 solid 1px;
  padding: 3px;
  text-align: center;
}

.author {
  text-align: right;
  font-style: italic;
  font-size: 0.8em;
  margin: 0pt;
}

.version {  /* bottom right or in the top right header */
  text-align: right;
  font-style: italic;
  font-size: 0.8em;
  margin: 0pt;
  padding-top: 12px;
  color: #999;
}

.example {
  font-family: monospace;
  font-size: 0.9em;
  background: #ececda;
  margin-left: 2em;
  margin-right: 2em;
  overflow: auto;
}

.spec {
  font-family: monospace;
  font-size: 0.9em;
  margin-left: 1.2em;
  margin-right: 1.2em;
  overflow: auto;
}

@media print {
  .example, .spec {
	font: 9pt/10pt monospace;
	page-break-inside: avoid;
	text-align: left;
    border-color: black;
    border-style: solid;
    border-width: 0.5pt;
    padding: 6pt 3pt;
  }
}


/* images -------------------------------------------------------- */


.image {
	text-align: center;
}

.image img, .flickrimg {
	background-color: white;
	padding: 1.5em 1.5em 2em 1.5em;
	border: solid 1px #ddd;
    margin: 0.25em 0;
}

h3.imgtitle {
	text-align: right;
    margin: 3px 0px;
    padding: 0px;
    color: #666;
}

.imgdate {
	text-align: right;
    color: #ccc;
    font-size: 0.8em;
    margin: 10px 0px 3px 0px;
}

.imgdesc {
	text-align: center;
}

.imgnav {
    float: left;
	text-align: left;
    color: #ccc;
    font-weight: bold;
    margin: 0px 0px 0px 3em;
	clear: both;
}

@media print {
  .imgnav { display: none; }
}

.gallery {
	text-align: center;
}

td.gallery {
    width: 20%;
}

.galimg {
	text-align: center;
}

.galimg img {
	background-color: white;
	padding: 1em;
	border: solid #eee 2px;
}

.galimg a:hover img {
    border-style: inset;
    border-color: blue;
    border-width: 2px;
}

.galimg a:hover {
    background-color: transparent;
}

.galimg:hover:after, div:hover:after {
  display: none;
}

.galsubtitle {
	text-align: center;
    color: #999999;
}

.tableframe {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* bookmarks -------------------------------------------------- */


ul li.folder {
  list-style-image: url(/icons/folder.gif);
  margin-left: 3em;
}
ul li.folder:before { content: ""; }

.bmnew {
  color: #900;
  font-size: 0.8em;
  vertical-align: super;
}


