/* =========  ifsu.css  ========= 

International Fisheries Science Unit style sheet
Ian Gleadall July, 2016

Updated July, 2018
Incorporating meaningless name-change with no consultation
from	IFSU
to		Trans-Faculty Erudition Unit (so-called gu-ro-o-ba-ru nougaku kyouiku yu-ni-tto)

Model sidemenu code: thanks to Eric A. Meyer   http://meyerweb.com/eric/
*/

html {
scrollbar-base-color: #ffffcc;
scrollbar-arrow-color: #667;
scrollbar-track-color: #00411b;

scrollbar-shadow-color: #000000;
scrollbar-lightshadow-color: #000000; 
scrollbar-darkshadow-color: #cccccc;

scrollbar-highlight-color: #667;
scrollbar-3dlight-color: #000000;
box-sizing: border-box; }

*, *:before, *:after {box-sizing: inherit; }

body {
background: #eeeeee /* #eeece2 */; color: #998800; margin: 0; padding: 0; }
/* font-size: 100%; */ /* line-height: 1; */

/* h1, h2, h3, h4, h5, h6 {font-family: Palatino, Garamond, "Times NR Latin", Times, serif; }*/ 
/* h2, h3, h4, h5, h6 {font-weight: normal; } */
h2 {margin: 0; padding: 0;}
h3 {margin-top: 1.5em; }
h4 {margin: 1.5em auto 0.5em 2em; }
h4.h4cen, #header h4 {text-align: center; }
a, a:visited {color: #0000ff; }
a:hover {color: #ff0000; }
a img {border: 0; }
hr {display: block; 
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset; 
	border-width: 1px; 
	background-color: #cccccc; 
	border-width:0; 
	color: #ffcccc; 
	height: 1px; 
	line-height: 1px; }

hr.sepabreak {height: 5px; color: #006600; background-color: #006600; }

/* text-align: left; width: 85%; */

/*	Font Reference 
	  (examples in each line cover each of the 5 generic font families)
	Calibri, Garamond, "comic sans ms", 						sans-serif 
	Forte, Georgia, Garamond, "Times NR Latin",					serif 
	"monotype corsiva",											script 
	"Courier New", "Lucida Console", "Lucida Sans Typewriter",	monospace 
	Copperplate,												fantasy
*/

/*  #header-cont {width:100%; position:fixed; top:0px;}  */


/* =================== Header =================== */ 

#header {width:100%; position: fixed; top:0; margin: 0; padding: 0; z-index: 2; 
background: url("ifsu_images/ifsuhead_mod.jpg") 0 0 repeat; 
height: 100px; outline: none; } /*** must be set so the following absolutely positioned divs are placed correctly on initial load of the page***/ 

#header h1 {position: absolute; font-family: "Garamond", "Times NR Latin", serif; margin: auto; left: 9em; margin-bottom: 50px; top: 20px; /* z-index: 100; */ white-space: nowrap; }
#header h1 span {font-size: 40%; margin-left: 2em; padding: 0.5em 1em; border: solid 1px; border-radius: 60%;}

#header p.tonpeilogo {top: 0; padding:0; width: 59px; margin-top: 0; background-color: #00411b; }
#header p.tonpeilogo a, #header p.tonpeilogo a:visited {text-decoration: none; background-color: #00411b;} /* removes bluish background and lines behind link text in IE */

#header img {margin-left: 5px; margin-top: 5px; background-color: #00411b; border: 0; background: transparent; }

#header h4 {position: absolute; color: #ffffff; left: 80px; top: 10px; font: 10px Verdana, sans-serif; text-decoration: none; /* z-index: 100; */}
#header h4 a {color: #ffffff; text-decoration: none; text-align: justify; }

p.headdate {position: absolute; top: 50px; left: 400px; padding:0; /*padding-left: 2em; padding-right: 2em;*/ font: 10px Verdana, sans-serif; /* text-align: center; */ color: #ffffff /*#00411b*/; white-space: nowrap; z-index: 3; } 

p.headdate span {margin-left: 2em; color: #998800; font-size: 140%; }

/* =================== Side menu 1 =================== */ 

.sidemenu {position: fixed; top: 121px; left: 0; width: 166px; /* height: 700px; */ font: 16px Verdana, sans-serif; z-index: -2; }

/* body>.sidemenu {position: fixed;} */

.sidemenu a, .sidemenu p  {display: block; 
text-align: center; font: 15px Verdana, sans-serif; padding: 5px 10px; margin: 0 0 1px; border-style: none double none none; border-width: 0; } 
.sidemenu a {background: #447788 url("ifsu_images/blugreyseabg.jpg") 0 0; border-right: double 5px; text-decoration: none; color: #ffeecc; border-right: 5px double #cc9966; }
.sidemenu a:hover {color: #ffffff; background: #00411b; border-right: 5px double #824c17; z-index: 1; }
.sidemenu a span {display: none;}
.sidemenu a:hover span {display: block; position: absolute; top: 200px; left: 0; width: 125px; padding: 5px; margin: 10px 10px 10px 18px; color: #00411b /*#664400*/ ; /*background: #ffeecc;*/ font: 10px Verdana, sans-serif; text-align: center; }

.sidemenu p {position: absolute; top: 250px; left: 0; width: 125px; padding: 5px; margin: 10px 10px 10px 18px; color: #00411b; font-size: 18px; font-weight: bold; }

/* =================== Side menu 2 =================== */ 

.sidemenu2 {position: fixed; top: 420px; left: 0; width: 166px; z-index: -2; }
.sidemenu2 a {background: #eeddbb; color: #888888; font: 10px Verdana, sans-serif;}
.sidemenu2 span, .sidemenu2 a:hover span {display: none; }
.sidemenu2 a:hover {background: #ddccaa; }

/* ==================== Content ====================== */ 

#content {display:block; position: absolute; top: 100px; left: 161px; right: 3px; z-index: -1; color: #004411; background: #ffeecc; min-width: 900px; font: 13px Verdana, sans-serif; padding: 10px; border: double 5px #cc9966; border-radius: 8px; margin-right: 10px; padding-top: 20px; } /* New padding to acommodate top menu */ 
   
/*	#content changed/removed/experimented
	background: #ffe6cc; background: url("introback.jpg") 0 0 no-repeat 
	border: solid 5px #cc9966; 
	border-left: double 5px #cc9966; 
	border-top: double 5px #cc9966; 
	
	Why doesn't this work? . . . bottom: 50px; 
	. . . when added, the content splits just above the table! Doesn't make sense. Revalidate ASAP! */  

#content h2 span {font-size: 60%; }
#content h3 {margin-bottom: 0.5em;}

#content p {margin: 0 1em 1em; text-indent: 20px; text-align: justify; }
#content p.firstpara {text-indent: 0; } 
.bloat span {line-height: 400%;} 
#header a.bloat:hover {color: #ffff00; text-decoration: underline; }

.pfloatleft {display: inline; width: auto; padding: 0; float: left; } 
.pfloatright {display: inline; width: auto; padding: 0; float: right; } 
.ptext_hilite span {color: #ff0000; background: #ffff00; font-weight: bold;}

#content a:link, #content p a:link {color: #0000ff; text-decoration: none; }
/* #content a:visited {color: #BBC;} */
#content a:link:hover, #content p a:link:hover {color: #ff0000; text-decoration: underline; }
#content p.decnone a:link:hover {text-decoration: none; } 
#content p.inblue span {color: #0000ff; }
ul.deadlink li {list-style: none; }
#content ul.deadlink li a, #content ul.deadlink li a:link:hover {font-style: italic; text-decoration: none; color: #0000ff; font: italic 126%/80% "Times New Roman", Times, serif; }
#content ul.deadlink li::before {content: "\2022"; color: #ff0000;
  display: inline-block; width: 1em; margin-left: -1em; }

/* ================ Content Misc ================ */ 

/*
h1 {margin: -9px -9px 0.5em; border-bottom: dotted 2px #e0c285; padding: 10px 5px 10px 90px; text-align: left; /* background: #fff7cc; *//* color: #664400; letter-spacing: 0.1em; /* text-transform: lowercase; *//* font: italic 30px sans-serif; height: 28px; vertical-align: middle; white-space: nowrap;}
*/

ul.nobul li {list-style-type: circle; }
/* .nobul li:before {content: ""; } */
/* Image features - see also Tables section */ 
	/* Note: for images, the following attributes must be declared in css, not in 	the html 'img' tag 
			border: solid #dddddd; 
	*/
.floatleft {float: left; margin: 0 1em 1em 0; }
.floatright {float: right; margin: 0 0 1em 1em; }
.floatcenter {display: block; margin-left: auto; margin-right: auto; text-align: center; }
p.anchor {clear: both; visibility: hidden; } 

ul.textpoints li {padding-bottom: 0.5em; list-style: disc inside; text-align: justify; }

/* These extra styles were added trying to deal with
	problems ariing from tables within lists - bad idea! 
ul.nobul li {list-style-type: circle; }
ul.textpoints li {padding-bottom: 0.5em; list-style: disc inside; text-align: justify; }
ul.textpoints li.bulloff {list-style: none; }
li .leftalign {margin-left: -1.5em; }
ul.textpoints li.bulloffadjustup {list-style: none; margin-top: -1.5em; } 
*/ 


/* The only valid way to prevent blocks floating either side of a given <p> element. 

That is, THIS ONLY WORKS FOR PARAGRAPH STATEMENTS, although it will also work in DIVs

p.clear {clear: both; } 
Ref: http://www.w3schools.com/cssref/pr_class_clear.asp

There are other values for 'clear' available, such as | left | right |
*/

.niceoval {padding: 2px; border-radius: 50%; }

.withborder {background: #ffffff; margin: 5px; padding: 2px; border: solid #ccccff 1px; border-radius: 4px; }

.listhold {margin: 0; padding-left: 1em; padding-top: 0; padding-bottom: 0.5em; }
.listhold ul {line-height: 1.5em; list-style: disc outside; margin-left: 1em; padding-left: 1.5em; }

/* The following does not work. Need to investigate later to wrap <li> text indented from first line. Not a problem unless browser display is greatly narrowed  
ul li {text-indent: -1.5 em; }
ul li::first-line {text-indent: 0;}
*/ 

.minspaceround {border: 0; margin: 1px; padding: 0; }

/* Class pair to run on text - but does not seem to work! */
/*
.runinto {text-align: left; vertical-align: top; float: left; padding-top: 0; padding-right: 0; padding-bottom: 0; }
.runon {text-align: left; vertical-align: top; float: left; padding-top: 0; padding-left: 0; padding-bottom: 0; }
*/

/* Definition lists (dl) */
dl {text-align: justify; }
dt {font-weight: bold; border-top: solid 1px; padding: 3px; }
dd {margin-bottom: 0.66em; }
dl.palerbg dt:nth-child(odd) {background-color: #ddddee; }

/* ============== Plates of images ============== */ 

div.plate400x2 {width: 880px; } 
div.plate200x2 {width: 480px; } 
div.plate200x4 {width: 930px; margin: 0 auto; padding:0;}
/* With individual figure legends */

/* =================== Tables =================== */ 

.tablehold {margin-left: 0; padding: 1em 3em 3em 3em; }
table.palerbg {width: 100%; border: none /* solid 1px*/; border-radius: 5px; }
table.palerbg tr:nth-child(odd) {background-color: #eeeeee; }
/*table.withborder {background: transparent; } */

.mailcon span {/*background-color: #cccccc;*/ padding: 0.5em 1em; border: solid 1px #0044bb; border-radius: 60%; } 

.palerbg th, .palerbg td {padding: 10px; text-align: left; vertical-align: text-top; } 

/* Tables for holding images & adding legends */ 
table.fig {table-layout: fixed; /* padding-top: 1em; */}
 .w80 {width: 80px; }
.w100 {width: 100px; }
.w150 {width: 150px; }
.w200 {width: 200px; }
.w300 {width: 300px; }
.w400 {width: 400px; }
.w500 {width: 500px; }
.w600 {width: 600px; } 

.figleg {font-size: 60%; font-family: Verdana, Arial, sans-serif; text-align: center; }
/* td.figleg {font-size: 100%; } */ 

/*  The following will add figure acknowledgements, but the effects are not consistent
across browsers - particularly for Opera - therefore not used 

.imgack200 {position:relative; top: -0.5em; margin:0; padding:0; padding-left: 16em; line-height: 80%; border-bottom: 1px solid #dddddd; font-size: 60%; } 

.imgack200v2 {position:relative; top: -20px; margin:0; padding:0; padding-left: 18em; line-height: 80%; font-size: 60%; color: #ffffff; }

.imgack300 {position:relative; top: -0.5em; margin:0; padding:0; padding-left: 30em; line-height: 80%;  border-bottom: 1px solid #dddddd; font-size: 60%; } 

.imgack300v2 {position:relative; top: -20px; margin:0; padding-left: 30em; line-height: 80%;  font-size: 60%; color: #ffffff; } 

.imgack400 {position:relative; top: -0.5em; margin:0; padding:0; padding-left: 18em; line-height: 80%; border-bottom: 1px solid #dddddd; font-size: 60%; } 

.imgack400v2 {position:relative; top: -20px; margin:0;  padding-left: 18em; line-height: 80%;   font-size: 60%; color: #ffffff; }

*/

/* ==========  Various list style classes (mostly on CV page) ========== */

.inpagemenu {text-align: center; }
.inpagemenu a {margin: 0 1em 5px 0; padding: 0; white-space: nowrap;}

.leclist {margin-left: 1em; margin-bottom: 2em; }
.leclist li {list-style: none; margin-bottom: 5px; }
.leclist li span {color: #552288; }

.projecthead {list-style: none; padding:0; margin: 0 0 0 1em; }
.projecthead li {list-style: inside disc; font-style: normal /* font-size: 90%/1.1em */ ; font-family: tahoma, arial, helvetica, sans-serif; color: #990000; }

.collabs {list-style: none; padding:0; margin:0 0 1em 0; }
.collabs li {margin: 0 0 0 3em; list-style: none; font: normal 90%/1.1em tahoma, arial, helvetica, sans-serif;}

.biblio {margin: 1em auto 2em; } 
.biblio li {margin-bottom: 1em;} 

.publ {font-style:italic; color:#993333; } 


/* =================== Footer =================== */ 

#content #footer p {margin: auto; margin-right: 1em; border:0; background: transparent; text-align: right; }
#content #footer p a img {border: 0 ; background: transparent; } 
#content #footer p a {text-decoration: none;} /* removes bluish background and lines behind xhtml badge */
#content #footer p#ack {font-size: 80%; }

/* ============== More Content Misc ============== */ 

/* Download links highlights */

/* .pdfblock {margin-bottom: 2em;} */     /* font-size: 31px/15px; */    /* background: #ffffff; font-weight: 600; padding: 2px; white-space: nowrap; */

p span.pdfblock {white-space: nowrap; } 
.pdfblock a {color: #ff0033; }  /* red PDF files  */
#content p span.pdfblock a:hover {color: #ffffff; background: #ff0033; text-decoration: none; } /* PDF download hovering */

/* Following *block classes not used: need to modify if wish to use */

.docblock a {color: #3300cc; } /* blue DOC files */
.docblock a:hover {background: #3366ff; }
.ooblock a {color: #66ccff; background: #333333; } /* pale blue OpenOffice files */
.ooblock a:hover {color: #000000; background: #66ccff; }
.pptblock a {color: #ff6600; } /* orange-red PPT files */
.pptblock a:hover {background: #ff6600; }
.xlsblock a {color: #006600; } /* green XLS files */
.xlsblock a:hover {background: #00cc00; }

/* Invoking font changes within the same text line */

/* 1. Change to italic font and adjust to same size and line height as normal text */
.italix span, span.italix, ul.italix li span, p span a.italix {font: italic 126%/80% "Times New Roman", Times, serif; white-space: nowrap; } 

/* 2. Change to italic font without line height adjustment (prevents minute text by overriding "reductio")  */
/* It would have been best to just move this style declaration 
	AFTER "reductio" (but currently no time to adjust HTML pages)*/
.italix01 span, span.italix01, span.reductio span.italix01, td span.italix01 {font: italic 126%/80% "Times New Roman", Times, serif; white-space: nowrap; } 

/* 3. Bold section of text */
ul.emfatix li span, .emfatix span, span.emfatix /* dl.palerbg dd.emfatix span */ {font-weight: 800; }

/* 4. Paler section of text */
.ghosted span, span.ghosted {color: #337744; }

/* 5. Section of text of reduced font size, etc. (e.g.run-on from a header) */
.reductio span, span.reductio, td.reductio, reductio td {font-size: 80%; }

/* 6. Beginning of section not indented (similar to .firstpara) */
.flushleft {text-indent: -1em; }

/* 7. Space out a section of text from previous text  */
.clearrt {margin-right: 2em; } /* with tables */ 
.padleft {margin-left: 0.5em; } 
.padright {margin-right: 0.5em; } 
.pullover span, span.pullover {padding-left: 1em; } 
.elbowroom {margin-top:1em;margin-bottom:1em; }

/* 8. Indent text block after first line */
#content div.indentp p {margin-left: 3.5em; text-indent: -1em; }
#content div li, table.indentli td {padding-left: 2em; text-indent: -1.5em; } 
table.indentli td ul li {list-style-type: none; padding-left: 0; text-indent: 0; }

/* ============= Content Footer ============= */ 
/* 
Why doesn't this work? 
#pagefooter {display: block; position: fixed; border: 0; width: 100%; }
*/

/* done */