/* styling rules for vector.org.uk
   sjt 15/11/2008 11:39:55
 */

@import url("common.css");


body {
  background: rgb(0,82,148);
  font-size: small;
  position: relative; /* reference frame for FOOT */
}

/* LAYOUT */
/*
  +-body-----------------------------------------------------------+
  |                                                                |
  | +-INNER----------------------------------------+ +-RHS-------+ |
  | | +-LHS-------+ +-MAIN-----------------------+ | |+-liner---+| |
  | | |+-liner---+| |                            | | ||         || |
  | | ||         || |                            | | ||         || |
  | | |+---------+| |                            | | ||         || |
  | | +-----------+ +----------------------------+ | |+---------+| |
  | +----------------------------------------------+ +-----------+ |
  |                                                                |
  | +-W3C------+                                       +-FOOT----+ |
  | |          |                                       |         | |
  | +----------+                                       +---------+ |
  +----------------------------------------------------------------+
 *
 * DOM

   	body
   	 	#INNER
   	 	 	#LHS
   	 	 		.liner
   	 	 		#NAV
   	 	 		#SEARCH
   	 	 		#SUSMEM
   	 	 	#MAIN
   	 	 		#BANNER
   	 	 		#contents
   	 	 			#contleft
   	 	 			#contright
   	 	#RHS
   	 	#W3C
   	 	#FOOT

  */

#BANNER {
/* height: 8em; */
}
#contents {position: relative} /* frame children */
#contleft {
	width: 20em;
}
#contright {
	width: 20em;
}
#contright .liner {
	background: #EEF;
	padding: 1em;
}

#INNER {
  background: url(bgnav.jpg) white;
	margin: 1em auto 5em 1em;
	height: 150em; /* IE6-hack: read as min-height */
	min-height: 150em; /* IE reads as min-height */
	position: relative;
	width: 60em;
}
body>#INNER {height: auto} /* counter IE6-hack */

#LHS {
  background: url(logo161x150.gif) no-repeat;
  position: absolute; top: 0; left: 0;
  width: 13em;
}
#LHS .liner {padding: 150px 2em 2em 1em} /* liner */


#RHS {
  position: absolute; top: 0; left: 62em;
  width: 11em;
}
#RHS .liner {
  color: white;
  font-size: 0.8em;
}

#MAIN {
	line-height: 1.4em;
	margin: 0 0 0 12em; /*for IE6 */
	padding: 0 3em 0 2em;
}
#INNER>#MAIN {margin-left: 13em} /* counter IE6 hack */

#FOOT {position: absolute; left: 78em; bottom: 0em;}
#W3C  {position: absolute; left:  3em; bottom: 0em;}

#SEARCH {
	background: url(google.gif) no-repeat top right;
	font-size: 0.8em;
}
#SEARCH input {font-size: 1.0em}
#SEARCH .initial {color: #CCC}
#SEARCH button {padding-top: 3px}
#SEARCH .user {color: maroon}


/* TYPEFACES */

body, .plain,
#article #MAIN h1.prefix,
#contents .title
  {font-family: "Trebuchet MS", Arial, Helvetica, swiss, sans-serif}

code, pre, .code {
  color: black;
  font-family: "APL385 Unicode", "Courier New", monospace;
  font-size: 1em;
  font-style: normal;
}

.body, .print,
#article #MAIN, #article #MAIN .plain,
#contents dl
	{font-family: Cambria, "Linotype Palatino", Palatino, "Book Antiqua", "Times New Roman", Times, serif}


/* LEADING */

dt, h2, h3, li
	{margin-bottom: 0.3em}
dd, dl, ol, p, ul, .p
	{margin-bottom: 0.8em}
pre
	{margin-bottom: 1.0em}


/* HEADINGS */
h1 {
  border-bottom: 1px solid gray;
  font-size: 2.0em;
  font-weight: normal;
  margin: 0.5em 0 1.5em 0;
  padding-bottom: 0.3em;
}
h2, h3 {
  font-weight: bold;
  margin-top: 1.5em;
}
h2 {font-size: 1.3em}
h3 {font-size: 1.0em}


/* ELEMENTS */

a {color: #B6CCE2}
a:hover {color: red}

dd {margin-left: 2em}

td, td {vertical-align: top}



/* LHS NAVIGATION */

#LHS a {color: #333}
#LHS ul {list-style: none}

#NAV {
  font-size: 120%;
  margin: 0 0 0.8em 1em;
}
#NAV a {color: #777}
#NAV a:hover {color: red}
#NAV ul {
  font-size: 80%;
  margin: 0.5em 0 0.5em 1em;
}

/* highlight selected nav link */
#home 				#NAV a.home,
#archive 			#NAV a.archive,
#contribute		#NAV a.contribute,
#subscribe 		#NAV a.subscribe,
#advertise 		#NAV a.advertise,
#team     		#NAV a.team,
#comm 				#NAV a.comm,
#books 				#NAV a.books,
#contributors #NAV a.contributors,
#whitepgs 		#NAV a.whitepgs,
#dnld 				#NAV a.dnld,
#interpreters #NAV a.interpreters,
#fonts 				#NAV a.fonts,
#abaa 				#NAV a.abaa,
#about 				#NAV a.about
	{color: maroon}


#SUSMEM {
  background: #CCC;
  border: 1px solid #AAA;
  font-size: 80%;
  margin: 2em 0 1em 0;
}
#SUSMEM a 			{color: #777}
#SUSMEM a:hover {color: navy}
#SUSMEM h2 {
  background: #5F91BE;
  color: #DDD;
  font-size: 120%;
  font-weight: normal;
  margin: 0.8em 0 0 0;
  text-align: center;
}
#SUSMEM li {margin: 0}
#SUSMEM ul {padding: 1em}


/* RHS CONTENT */

#RHS h1 {
  color: #CCC;
  font-size: 1.3em;
  letter-spacing: 0.1em;
  margin: 2em 0 0.5em 0;
  text-align: center;
  text-transform: uppercase;
}
#RHS ul {list-style: none}





/* LINKS WITH ICONS */

#MAIN a[href $=".bmf"] 			 		{background-image: url(icons/bmf.gif)}
#MAIN a[href $=".doc"] 					{background-image: url(icons/doc.gif)}
#MAIN a[href $=".dws"] 					{background-image: url(icons/dws.gif)}
#MAIN a[href ^="mailto:"], .eml	{background-image: url(icons/eml.gif)}
#MAIN a[href $=".odp"]					{background-image: url(icons/odp.gif)}
#MAIN a[href $=".pdf"], .pdf		{background-image: url(icons/pdf.gif) ! important}
#MAIN a[href $=".ppt"]					{background-image: url(icons/ppt.gif) ! important}
#MAIN a[href $=".ttf"] 					{background-image: url(icons/ttf.gif)}
#MAIN a[href ^="http://"],
#MAIN a[href ^="https://"] 			{background-image: url(icons/www.gif)}
#MAIN a[href $=".zip"]   				{background-image: url(icons/zip.gif)}

#MAIN a[href ^="http://"],
#MAIN a[href ^="https://"],
#MAIN a[href ^="mailto:"], .eml,
#MAIN a[href $=".bmf"],
#MAIN a[href $=".doc"],
#MAIN a[href $=".dws"],
#MAIN a[href $=".odp"],
#MAIN a[href $=".pdf"], .pdf,
#MAIN a[href $=".ppt"],
#MAIN a[href $=".ttf"],
#MAIN a[href $=".zip"]
{
	background-repeat: no-repeat;
	background-position: right 50%;
	padding-right: 19px;
	white-space: nowrap;
}
/* exceptions */
#MAIN a[href ^="http://"] {padding-right: 13px} /* exception: 10×10 icon */
/* exception to above exception */
#MAIN a[href $=".pdf"], .pdf,
#MAIN a[href $=".ppt"]
	{padding-right: 19px ! important}
/* cancel all this */
#MAIN a.noicon {
	background-image: none;
	padding: 0;
	white-space: normal;
}



/* MAIN CONTENT */

#MAIN a {color: #337}

#MAIN ul.bullet {list-style: disc}
#MAIN ol, #MAIN ul.bullet
	{padding-left: 2em}


/* PAGE-SPECIFIC RULES */

/* committee table on about us page */
#abaa #committee {margin: 1em 3em}
#abaa #committee td {padding: 0.8em 1em 1em 0}
#abaa #committee td img {border: 1px solid #AAA}

#archive table#volumes {margin-left: 3em}


/* embedded articles */
#article #MAIN {
	font-size: 1.1em;
	line-height: 1.3em;
	padding-top: 2em;
}
#article #MAIN #publication,
#article #MAIN #validation
	{display: none}
#article #MAIN blockquote {
	font-size: 90%;
	line-height: 1.3em;
	margin: 1.2em 2em;
}
#article #MAIN caption {
	font-size: 90%;
	font-style: italic;
}
#article #MAIN code,
#article #MAIN .code {
	font-size: 90%;
	font-style: normal;
	padding: 0 0.3em;
	white-space: nowrap;
}

#article #MAIN h1 {
	border: none;
	font-size: 1.4em;
	font-weight: normal;
	line-height: 1.4em;
	margin: 0 0 0.3em 0;
	text-align: center;
}
#article #MAIN h1.prefix {
	color: gray;
	font-size: 80%;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
#article #MAIN h1.subtitle {
	font-size: 1.1em;
	margin: 0 0 0.3em 0;
}
#article #MAIN h1.author,
#article #MAIN h1#author {
	font-size: 100%;
	font-style: italic;
	font-weight: normal;
	margin: 0 0 3em 0;
}

#article #MAIN h2 {
	font-size: 1.2em;
	line-height: 1.2em;
	margin: 1.3em 0 0.3em 0;
}
#article #MAIN h3 {
	font-size: 1em;
	margin: 1.3em 0 0.3em 0;
}

#article #MAIN img {max-width: 40em}

#article #MAIN p {text-align: justify}

#article #MAIN dl,
#article #MAIN dd,
#article #MAIN ol,
#article #MAIN p,
#article #MAIN ul,
#article #MAIN table,
#article #MAIN .block
	{margin-bottom: 0.8em}

#article #MAIN dd {margin-left: 2em}
#article #MAIN dt {
	font-style: italic;
	margin: 0.8em 0 0.3em 0;
}

#article #MAIN sup {vertical-align: 40%}

#article #MAIN ul {padding-left: 1.5em}

#article #MAIN p.attribution { 	/* source attribution following a quotation */
	margin: -0.8em 0 1.5em 0;			/* nullify preceding bottom margin */
	text-align: right;
}
#article #MAIN p.bcrumb {
	font-size: 0.9em;
	margin: 0 0 2em 0;
	text-align: right;
}
#article #MAIN p.caption {			/* to contain an image */
  font-size: 85%;
  font-style: italic;
  padding-bottom: 1em;
  text-align: center;
}
#article #MAIN p.abstract, p.ednote {				/* editorial note above an article */
	font-size: 85%;
	line-height: 1.4em;
	margin: 0 5em 2em 5em;
}
#article #MAIN p.epigraph {									/* epigraph */
	font-style: italic;
	margin: 0 0 1.5em 20em;
	text-align: left;
	width: 23em;
}
#article #MAIN p.pullquote {
	border: 1px solid maroon; border-left: none; border-right: none;
	font-size: 1.2em;
	font-style: italic;
	line-height: 1.4em;
	margin: 1em 25%;
	padding: 0.5em;
	text-align: center;
	}
#article #MAIN p.pubdetails {								/* review publication details */
	font-size: 80%;
	text-align: left;
}

#article #MAIN p.verse {											/* verse */
	font-style: italic;
	text-align: left;
}
#article #MAIN p.attribution,
#article #MAIN p.epigraph
	{font-size: 90%}

/* lists */
#article #MAIN li {margin: 0 0 0.3em 0}
#article #MAIN ol {padding-left: 1.5em}

#article #MAIN pre {
	font-size: 80%;
	line-height: 1.2em;
	margin: 0 0 1em 1em; /* allow for all pre elements beginning and ending with a line break */
/*
	long listings can be divided into successive pre elements
	so vertical whitespace between them needs to be in whole ems
 */
}

#article #MAIN table {border-collapse: collapse}

#article #MAIN td,
#article #MAIN th
	{padding: 0 0.5em}
#article #MAIN td {
	text-align: right;
	vertical-align: top;
}
#article #MAIN th {vertical-align: bottom}

#article #MAIN td.th,
#article #MAIN th {
	color: #777;
	font-size: 80%;
	font-weight: normal;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
}
#article #MAIN table.bdr {padding: 1em}

#article #MAIN table.left td,
#article #MAIN table.left th
	{text-align: left}
	
#article #MAIN table.math td {
  padding: 0 0.1em;
  line-height: 1em;
  text-align: center;
  vertical-align: middle;
}

#article #MAIN tt {
	font-size: 85%;
	white-space: nowrap;
}



/* books page */
#books dl {padding: 0 3em}
#books dd, #books dt {clear: right}
#books dt {
	font-size: 1.2em;
	font-weight: bold;
}
#books dd {margin-bottom: 2.5em}
#books dd cite.title {
	color: navy;
	font-style: normal;
	font-weight: bold;
}

#comm #MAIN ul {margin-left: 2em}
#comm #MAIN dl {margin-left: 2em}

/* table of contents on home page */
#contents {color: #333}
#contents dt {font-weight: bold}
#contents h1 {
  border: none;
	font-size: 2em;
	line-height: 1em;
	margin: 0;
}
#contents dd {
  margin: 0 0 1em 0;
}
#contents dd .author {padding-left: 2em}
#contents dd .label {
  color: gray;
  font-size: 80%;
  font-style: italic;
}
#contents dd .title {font-weight: bold}
#contents dd .pix {
  float: right;
  margin: 0 0 1em 2em;
}
#contents dt {
  border-bottom: 1px solid #CCC;
  font-size: 1.2em;
  font-weight: normal;
  margin: 1.5em 0 0.5em 0;
}
#contents p.dateline {
  color: #999;
  font-size: 1.4em;
  font-weight: bold;
  margin: 0 0 2.5em 0;
}

#contents #display {
	font-size: 1.4em;
	font-weight: bold;
}
#contents li {
	margin-bottom: 1em;
}
#contents #left {
	padding-right: 2em;
}
#contents #left {float: left}

#contents .imgcol100 {text-align: center}
#contents .imgcol100 img {
	margin: 0 0 20px 0;
	width: 100px;
}
#contents .nextissue {margin: 0 0 4em 0}
#contents .nextissue dt {
	border: none;
	display: block; /* => float img within */
	margin: 0 0 0.3em 0;
}
#contents .nextissue dd {margin: 0 0 1.2em 2em}
#contents .nextissue dd a,
#contents .nextissue dt a
	{font-weight: bold}
#contents dd.leadstory {font-size: 1.2em}
#contents dt.leadstory {
	font-size: 4.0em;
	line-height: 1em;
	padding: 0.5em 0 0.3em 0;
}


#contributors table,
#team         table
	{margin: 0 2em}
#contributors td,
#team         td
	{padding: 0 0 1em 1em}
#contributors #MAIN img,
#team         #MAIN img
	{border: 1px solid #AAA}

#jobs strong {font-size: 1.1em}
#jobs .jobdetail {
	color: #555;
	display: none;					/* for onpage script to reset */
	font-size: 85%;
	margin: 0 0 2em 1em;
}
#jobs .jobdetail strong {
	background-color: yellow;
	padding: 1px 2px;
}

#jobs p.detaillink {
	background: #FFD;
	border: 1px solid #AAA;
	color: black;
	cursor: pointer;
	font-size: 0.8em;
	letter-spacing: 0.2em;
	margin-bottom: 2em;
	padding: 0 1em;
	text-transform: uppercase;
	width: 6em;
}