/* the methods on this page are largely the hard work (freely given) of many people from the css-discuss list [http://www.css-discuss.org], including (but not limited to) Big John, Holly Bergevin, Douglas Livingstone, Scott Sauyet, Victor Caston, Mike Papageorge, and me, Alex Robinson [css-stuff@alex.cloudband.com] */

/* ====================================================================
GENERAL STYLING
-------------------------------------------------------------------- */
/* border:nones are for NN4 */
html { 
min-width: 800px;
margin: 0px; 
padding: 0px; 
}

body {
margin: 20px;
padding: 0px;
color: #000;
background: #cfcfcf;
font: .8em/1.5em verdana, helvetica, arial, sans-serif;
}

a:link {
color: #a42630;
background: transparent;
text-decoration: none;
}

a:visited {
color: #304ea4;
background: transparent;
text-decoration: none;
}

a:hover {
color: #c9b01b;
background: transparent;
text-decoration: none;
}

p {
margin: 0;
padding: 0 0 1.0em 0; 
}

img {
border: 0;
}

table {
width: 100%;
}

td {
vertical-align: top;
}

.super {
font-size: .8em;
vertical-align: super;
}

.bold {
font-weight: bold;
}

.clear {
clear: both;
}

.clear-l {
clear: left;
}

.clear-r {
clear: right;
}

.sectionbreak {
border-bottom: 1px solid #808080;
}

/* IE-Win hack to keep list background images from disappearing */
ul, ul.bullets, ol, dl {
position: relative;  
}

/* Opera hack: to keep the list item prior to the li.current from inheriting the font-weight of bold. */
html > body ul, html > body ol, html > body dl {
position: inherit; 
}


/* ====================================================================
WRAPPERS
-------------------------------------------------------------------- */

div { 
margin: 0px; 
padding: 0px; 
}

.divclear { 
clear: both;
} /* CSS HACK: only for NN4, so now use Caio hack to cleanse palette */

/*/*/ .divclear { display: none; } /* */

/* box-wrap is only needed if you want to set a background color for the columns, put a border round the content block or fix the content width */

.box-wrap {
color : #000000;
background: #fff;
border-top: 1px solid #808080; /*** Sets the external top side border. ***/
border-right: 2px outset #808080; /*** Sets the external right side border. ***/
border-bottom: 2px outset #808080; /*** Sets the external bottom border. ***/
border-left: 1px solid #808080; /*** Sets the external left side border. ***/
}

.box-inner-wrap {
border: 0;
margin: 10px;
padding: 0;
}

.box-inner-wrap h1, .box-inner-wrap h2 {
color: #808080;
background: transparent;
font: 1.5em/1.5em verdana, helvetica, arial, sans-serif;
text-transform: lowercase;
margin: 0;
padding: 0;
}

.box-inner-wrap  ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.box-inner-wrap ul li {
margin: 0;
padding: 0 0 1.0em 0;
font: 1em/1.25em verdana, helvetica, arial, sans-serif;
}

.box-inner-wrap ul.indent {
margin: 0 0 0 20px;
padding: 0;
}

.box-inner-wrap ul.indent li {
margin: 0;
padding: 0;
}


/* ====================================================================
CRUMBTRAIL
-------------------------------------------------------------------- */

.box-crumbtrail {
color: #000000;
background: #fff;
margin: 0;
padding: 0 0 5px 0;
text-transform: lowercase;
}

/* ====================================================================
SEARCH

-------------------------------------------------------------------- */

div.box-crumbtrail .search {
position: absolute;
top: 15px;
right: 0;
width: 215px;
margin: 0;
padding: 0;
}

/* Hide from IE-mac. Only IE-win sees this. The Holly Hack. Prevents the right margin of the input box from overlapping the gray background. */
* html div.box-crumbtrail .search {
right: 20px;
}

/* hack for Opera only; will need to update when this convention is adopted by other browsers. */
@media all and (min-width: 0px) {
div.box-crumbtrail .search {
top: 15px;
right: 10px;
}
}

div.box-crumbtrail .search input {
color: #000;
background: #fff;
border: 1px solid #808080;
margin: 0;
padding: .125em;
width: 150px;
height: 1.5em;
font: .80em/1.0em verdana, helvetica, arial, sans-serif;
text-transform: none;
}


/* ====================================================================
HEADER (Navigation and Title)
-------------------------------------------------------------------- */

#nav {
color: #000000;
background: #fff;
margin: 0;
padding: 5px 5px 5px 0;
border-top: 1px solid #808080;
border-bottom: 1px solid #808080;
white-space: nowrap;						/* ??????????????? W3C CSS Validator: This property applies to block-level elements> ?????????? */
}

#nav h1 {
display: none;
}

#nav img {
margin: 0;
padding-right: 5px;
border: 0;
vertical-align: middle;
}

/* ====================================================================
FOOTER
-------------------------------------------------------------------- */

.box-footer {
clear: both;
margin: 0;
padding: 0.5em;
border-top: 1px solid #808080;
font: .8em/1.5em verdana, helvetica, arial, sans-serif;
color: #000;
background: #fff;
}

.box-footer ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.box-footer ul li {
margin: 0;
padding: 0;
line-height: 1.15em;
}

.box-footer #update {
float: right;
width: auto;
margin: 0;
padding: 0;
}

/* Hide from IE-mac. Only IE-win sees this. The Holly Hack. Prevents the right margin of the input box from overlapping the gray background. */
* html div.box-footer #update {
position: relative;
top: 0;
right: 0;
}

/* ====================================================================
COLUMNS LAYOUT
-------------------------------------------------------------------- */

.main-wrap {
float: left;
width: 100%;
margin: 10px 10px 10px 0;
padding: 0;
border-left: 1px solid #808080;
}

/* ====================================================================
MAIN CONTENT
-------------------------------------------------------------------- */

.main {
float: right;
width: 81.5%;
margin: 0;
padding: 0 0 8em 0;
border-left: 1px solid #808080;
}

/* Hide from IE-mac. Only IE-win sees this. The Holly Hack. Keeps left margin from moving 150px to the left. */
* html .main {
border-right: 1px solid #fff;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}

.main h1, .main h2 {
margin: 0;
padding: 0 0 .5em 0;
color: #304EA4;
background: transparent;
}

.main h1 {
font-size: 1.75em;
font-weight: lighter;
text-transform: lowercase;
margin: 0;
padding: 0 0 .125em 0;
}

.main h1.small {
font-size: 1.25em;
text-transform: none;
}

.main h2 {
font-size: 1.5em;
font-weight: lighter;
font-variant: small-caps;
margin: 0;
padding: 0 0 .125em 0;
line-height: 1.15em;
}

span.small {
font-size: .7em;
}


.main h2.first {
font-size: 1.5em;
font-weight: lighter;
font-variant: small-caps;
margin: 0;
padding: 0 0 .125em 0;
border-top: 1px solid #808080;
}

.main h2 a:link, .main h2 a:visited, .main h2 a:hover, 
.main h2.clear a:link, .main h2.clear a:visited, .main h2.clear a:hover, 
.main h3 a:link, .main h3 a:visited, .main h3 a:hover {
margin: 0;
padding: 0 0 0 1em;
}

.main h2 a:link, 
.main h2.clear a:link, 
.main h3 a:link {
color: #a42630;
background: #fff url(../images/gray-arrow.gif) left center no-repeat;
}

.main h2 a:visited, 
.main h2.clear a:visited, 
.main h3 a:visited {
color: #304ea4;
background: #fff url(../images/gray-arrow.gif) left center no-repeat;
}

.main h2 a:hover, 
.main h2.clear a:hover,
.main h3 a:hover {
color: #c9b01b;
background: #fff url(../images/gray-arrow.gif) left center no-repeat;
}

.main h2 a.image:link, 
.main h2 a.image:visited, 
.main h2 a.image:hover {
color: #a42630;
background: #fff;
}

.main h3 {
font-size: 1.25em;
font-weight: lighter;
margin: 0;
padding: 0 0 .125em 0;
}

.main h4 {
font-size: 1.15em;
font-weight: lighter;
margin: 0;
padding: 0 0 .125em 0;
}

/* IE-Win hack to keep list background images from disappearing */
.main ul, .main ol, .main dl {
position: relative;  
}

.main ul, .main ul.bullets {
margin: 0 0 10px 0;
padding: 0 0 5px 10px;
}

.main ul ul, .main ul.bullets ul {
margin-bottom: 0;
padding-bottom: 0;
}

.main ul li {
list-style: none;
}

.main ul.indent {
margin: 0 0 0 20px;
padding: 0;
}

.main ul.bullets li {
list-style: url(../images/default-nav.gif) outside;
margin: 0 0 0 15px;
padding: 0 0 5px 0;
color: #000;
background: transparent;
}

.main ul.bullets ul.no-bullets li {
list-style: none;
}

.main ul li.name {
list-style: url(../images/default-nav.gif) outside;
margin: 0 0 0 15px;
padding: 0;
color: #000;
background: transparent;
}

.main ul li.summary {
list-style: none;
margin: 10px 0 10px 15px;
padding: 0;
color: #000;
background: transparent;
}

.main dl.left-of-float {
margin: 0 0 10px 10px;
padding: 0 0 5px 10px;
}

.main dl.left-of-float dt {
font-weight: bold;
}

.main dl.left-of-float dd {
margin: 0;
padding: 0 0 0 210px;
}



.main p.atoz {
font-size: 1.25em;
}

.main p.top {
clear: both;
margin: 0;
padding: 0;
font-size: .75em;
}

.main p.years {
margin: 0;
padding-top: 5px;
font-size: 1.25em;
}

.main p.clear {
clear: both;
color: #fff;
background: transparent;
margin: 0;
padding: 0;
border-top: 1px solid #808080;
height: 1%;
}

.main .blockquote {
margin: 0 7em 1em 7em;
padding: 0.5em; 
border: 2px solid #9AAF6B;
}

.main .blockquote p.last {
margin: 0;
padding-bottom: 0; 
}

/* ====================================================================
													Image formatting
-------------------------------------------------------------------- */

.main #collage {
float: left;
width: 190px;
height: 250px;
margin: 0;
padding: 0 20px 20px 0;
}

.main #collage img {
margin: 17px 0 0 7px;
padding: 0;
}

.main .img-left {
float: left;
width: 190px;
height: 150px;
margin: 5px 0 0 0;
padding: 0 20px 10px 0;
}

.main .img-left img {
margin: 5px 0 0 9px;
padding: 0;
}

.main .img-right {
float: right;
width: 190px;
height: 150px;
margin: 0;
padding: 0 0 20px 20px;
}

.main .img-right img {
margin: 3px 0 0 7px;
padding: 0;
}

.main .img-caption {
margin: .5em;
padding: 10px;
border: 2px solid #9AAF6B;
text-align: center;
}

.main .img-caption p {
margin: 0;
padding: .5em 0 0 0;
font-size: .8em;
line-height: 1.5em;
text-align: left;
}

.l45, .l75, .l100, .l110, .l125, .l145, .l150, .l175, 
.l200, .l220, .l225, .l250, .l275, 
.l300, .l325, .l350, .l375, 
.l400, .l425, .l450,
.l500, .l575, .l600 {
margin: 0 10px 5px 0;
padding: 5px;
}

.r45, .r75, .r100, .r110, .r125, .r145, .r150, .r175, 
.r200, .r220, .r225, .r250, .r275, 
.r300, .r325, .r350, .r375, 
.r400, .r425, .r450,
.r500, .r575, .r600 {
margin: 0 0 5px 10px;
padding: 5px;
}

.l45 {
float: left;
width: 45px;
}

.r45 {
float: right;
width: 45px;
}

.l75 {
float: left;
width: 75px;
}

.r75 {
float: right;
width: 75px;
}

.l100 {
float: left;
width: 100px;
}

.r100 {
float: right;
width: 100px;
}

.l110 {
float: left;
width: 110px;
}

.r110 {
float: right;
width: 110px;
}

.l125 {
float: left;
width: 125px;
}

.r125 {
float: right;
width: 125px;
}

.l145 {
float: left;
width: 145px;
}

.r145 {
float: right;
width: 145px;
}

.l150 {
float: left;
width: 150px;
}

.r150 {
float: right;
width: 150px;
}

.l175 {
float: left;
width: 175px;
}

.r175 {
float: right;
width: 175px;
}

.l200 {
float: left;
width: 200px;
}

.r200 {
float: right;
width: 200px;
}

.l220 {
float: left;
width: 220px;
}

.r220 {
float: right;
width: 220px;
}

.l225 {
float: left;
width: 225px;
}

.r225 {
float: right;
width: 225px;
}

.l250 {
float: left;
width: 250px;
}

.r250 {
float: right;
width: 250px;
}

.l275 {
float: left;
width: 275px;
}

.r275 {
float: right;
width: 275px;
}

.l300 {
float: left;
width: 300px;
}

.r300 {
float: right;
width: 300px;
}

.l325 {
float: left;
width: 325px;
}

.r325 {
float: right;
width: 325px;
}

.l350 {
float: left;
width: 350px;
}

.r350 {
float: right;
width: 350px;
}

.l375 {
float: left;
width: 375px;
}

.r375 {
float: right;
width: 375px;
}

.r400 {
float: right;
width: 400px;
}

.l400 {
float: left;
width: 400px;
}

.l450 {
float: left;
width: 450px;
}

.r450 {
float: right;
width: 450px;
}

.l500 {
float: left;
width: 500px;
}

.r500 {
float: right;
width: 500px;
}

.l575 {
float: left;
width: 575px;
}

.r575 {
float: right;
width: 575px;
}

.l600 {
float: left;
width: 600px;
}

.r600 {
float: right;
width: 600px;
}



/* ====================================================================
													Table formatting
-------------------------------------------------------------------- */

.main table {
margin: 0;
padding: 0 0 10px 0;
}

.main table th {
width: 25%;
color: #808080;
font-size: 1.25em;
font-weight: lighter;
font-variant: small-caps; 						/* ??????????????? W3C CSS Validator: This property applies to block-level elements> ?????????? */
text-align: right;
vertical-align: top;
margin: 0;
padding-right: 5px;
}


/* ====================================================================
												Contacts formatting
-------------------------------------------------------------------- */

.main .research-contacts {
width: 99%;
margin: 10px 0;
padding: 0 0 10px 0;
}

/* Hide from IE-mac. Only IE-win sees this. The Holly Hack. Pushes the left margin over 5px. */
* html .main .research-contacts {
margin: 0 0 0 5px;
}

.main .research-contacts div.contacts {
float: left;
width: 30%;
margin: 0  10px 10px 0;
padding: 0 0 0 0;
}

.main .research-contacts ul {
margin: 0;
padding: 0 0 0 20px;
font: 1.0em/1.2em verdana, helvetica, arial, sans-serif;
}

.main .research-contacts ul.bullets, .main .research-contacts .multiple ul {
margin: 0 0 0 34%;
padding: 0;
}

/*\*//*/
.main .research-contacts ul.bullets {
margin: 0;
padding: 0 0 0 20px;
display: inline-block;
}
/**/

.main .research-contacts ul li, .main .contacts ul li {
list-style: none;
margin: 0;
padding: 0;
}

.main .research-contacts ul.bullets li {
list-style: url(../images/default-nav.gif);
margin: 0;
padding: 0;
}

.main .research-contacts ul li.name {
list-style: url(../images/default-nav.gif);
}

.main .research-contacts ul li.phone {
padding-top: 1.0em;
}

.main .research-contacts ul li.email {
padding-bottom: 1.0em;
}

.main .contacts ul {
float: left;
width: auto;
margin: 0;
padding: 0 0 0 20px;
font: 1.0em/1.2em verdana, helvetica, arial, sans-serif;
}

.main .contacts ul li.name {
list-style: url(../images/default-nav.gif);
}

.main .addClear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.main .addClear {
display: inline;
}

/* Start Commented Backslash Hack \*/
* html .main .addClear, * html .main .addClear * {
height: 1%;
}

.main .addClear {
display: block;
}

/* Close Commented Backslash Hack */

/* ====================================================================
											Contacts formatting ends
-------------------------------------------------------------------- */


/* ====================================================================
									Main Search form formatting begins
-------------------------------------------------------------------- */


.main .search input {
color: #000;
background: #fff;
border: 1px solid #808080;
margin: 0;
padding: .25em .5em;
height: 1.5em;
font: 1.0em/1.0em verdana, helvetica, arial, sans-serif;
text-transform: none;
}

.main .search input.submit {
color: #a42630;
background: #fff;
border-top: 1px solid #808080;
border-right: 2px solid #518fac;
border-bottom: 2px solid #518fac;
border-left: 1px solid #808080;
margin: 1em 0;
padding: 0;
width: 200px;
height: 2.0em;
font: bold 1.0em/1.0em verdana, helvetica, arial, sans-serif;
}


/* ====================================================================
									Main Search form formatting ends
-------------------------------------------------------------------- */

/* Used when the content height is smaller than the navigation's */

.main p.height-3 { 
clear: both;
margin: 0;
padding-bottom: 3.75em;
}

.main p.height-7 { 
clear: both;
margin: 0;
padding-bottom: 7.5em;
}

.main p.height-15 { 
clear: both;
margin: 0;
padding-bottom: 15em;
}

.main p.height-22 { 
clear: both;
margin: 0;
padding-bottom: 22.5em;
}

.main p.height-30 { 
clear: both;
margin: 0;
padding-bottom: 30em;
}

.main p.height-37 { 
clear: both;
margin: 0;
padding-bottom: 37.5em;
}

.main p.height-45 { 
clear: both;
margin: 0;
padding-bottom: 45em;
}

.main-content, .left-nav-content {
margin: 0;
padding: 0 10px 0 10px;
color: #000;
background: #fff;
}


/* CSS HACK:  position:relative needed by IE6 otherwise the header and col 2 don't show up on initial rendering - they're there but you have to minimise the window or switch to another app and back to see the full effect. But IE5(pc) doesn't like it. And nor does NN4.
NB. the use of pos:rel has to go way beyond skin-deep - any nested element that needs a background colour appears to require to be be relatively positioned */ 

/*/*/
.box-wrap, .main-wrap, .main, .left-nav, h2 { 
p\osition: relative; 
}
/* */


/* ====================================================================
LEFT NAVIGATION
-------------------------------------------------------------------- */

.left-nav {
float: left;
width: 17.75%;
margin: 0 0 10px 0;
padding: 0;
color: #000;
background: #fff;
}

/* Opera hack: to keep the list item prior to the li.current from inheriting the font-weight of bold. */
html > body .left-nav ul, html > body .left-nav ol, html > body .left-nav dl {
position: inherit; 
}

.left-nav ul {
margin: 0;
padding: 0;
font: 1.0em/1.15em verdana, helvetica, arial, sans-serif;
}


.left-nav ul li {
list-style: none;
margin: 0;
padding: 0;
}


/* Hide from IE-mac. Only IE-win sees this. The Holly Hack. Eliminates the extra spacing between list items. */
* html .left-nav ul li {
border: 1px solid #fff;
}

.left-nav ul.level1 li a, .left-nav ul.level2 li a, .left-nav ul.level3 li a, .left-nav ul.level4 li a, .left-nav ul.additional li a {
display: block;
margin: 0;
padding: 0;
text-decoration: none;
font-weight: normal;
}

/* For Opera 8.5: The next two font declarations are designed to keep list items from inheriting the font weight of .current. */

.left-nav ul.level1 li.current, .left-nav ul.level2 li.current, .left-nav ul.level3 li.current,  .left-nav ul.level4 li.current, .left-nav ul.additional li.current, 
.left-nav ul.level1 li.current a, .left-nav ul.level2 li.current a, .left-nav ul.level3 li.current a, .left-nav ul.level4 li.current a, .left-nav ul.additional li.current a  {
font-weight: bold;
}

.left-nav ul.level1 li.current ul.level2 li, .left-nav ul.level1 li.current ul.level2 li a,
.left-nav ul.level2 li.current ul.level3 li, .left-nav ul.level2 li.current ul.level3 li a,
.left-nav ul.level3 li.current ul.level4 li, .left-nav ul.level3 li.current ul.level4 li a {
font-weight: normal;
}

/* End hack for Opera 8.5 */

.left-nav ul.level1 li {
margin: 0;
padding: 0 0 .5em 0;
color: #3b3b3b;
background: #fff;
font: 1.25em/1.3em verdana, helvetica, arial, sans-serif;
font-weight: lighter;
text-transform: lowercase;
}

.left-nav ul.level2 li {
margin: 0 0 .25em 0;
padding: 0 0 0 1em;
color: #3b3b3b;
font: .8em/1.25em verdana, helvetica, arial, sans-serif;
font-weight: lighter;
text-transform: none;
background: #fff url(../images/default-nav.gif) 0 .5em no-repeat;
}

.left-nav ul.level3 li {
margin: .25em 0;
padding: 0 0 0 1em;
color: #3b3b3b;
font: .9em/1.15em verdana, helvetica, arial, sans-serif;
font-weight: lighter;
text-transform: none;
background: #fff url(../images/nav-arrow.gif) 0 .5em no-repeat;
}

.left-nav ul.level4 li {
margin: .25em 0;
padding: 0 0 0 1em;
color: #3b3b3b;
font: .9em/1.15em verdana, helvetica, arial, sans-serif;
font-weight: lighter;
text-transform: none;
background: #fff url(../images/default-dash.gif) 0 .5em no-repeat;
}


.left-nav ul.additional {
margin: 20px 0 0 0;
padding: 20px 0 0 0;
color: #3b3b3b;
background: #fff url(../images/sm-nav.gif) center top no-repeat;
font-weight: lighter;
text-transform: lowercase;
}