/* Style sheet for www.BarryMerchantSeamen.org.uk    Updated 5 September 2009 */

/* http://jigsaw.w3.org/css-validator/validator?uri=http://www.barrymerchantseamen.org.uk/bms.css */


/* ееееееееее                                                              еее */
/* ееееееееее   PPPPPPP     RRRRRRR     IIIIII   NN      NN   TTTTTTTTTT   еее */
/* ееееееееее   PP     PP   RR     RR     II     NNNN    NN       TT       еее */
/* ееееееееее   PP     PP   RR     RR     II     NN NN   NN       TT       еее */
/* ееееееееее   PPPPPPPP    RRRRRRRR      II     NN  NN  NN       TT       еее */
/* ееееееееее   PP          RR  RRR       II     NN   NN NN       TT       еее */
/* ееееееееее   PP          RR    RR      II     NN    NNNN       TT       еее */
/* ееееееееее   PP          RR     RR   IIIIII   NN      NN       TT       еее */
/* ееееееееее                                                              еее */

@media print
{



body,div,p 
{
	font-family: georgia, garamond, serif;
	font-size: medium;
	color: #000000;				/* black */
	background-color: #ffffff;	/* white */
}
	
p 
{
	margin-top: 0.5em;
}

blockquote   /*     */
{
	margin-top: 0.5em;
	color: #666666;         /* GREY text */
	font-size: medium;
	font-weight: bold;
}

.cb
{
	clear: both;
	font-size: x-small;
	text-align: right;
}

.left
{
	float: left;
	clear: left;
	margin-top: 1em;
	margin-right: 1em;
	margin-bottom: 1em;
	margin-left: 0em;
	page-break-inside: avoid;
}

.right
{
	float: right;
	clear: right;
	margin-top: 1em;
	margin-right: 0em;
	margin-bottom: 1em;
	margin-left: 1em;
	page-break-inside: avoid;
}

.boxed   /* highlighted text box*/
{
	background: #aaaaaa;     /* light grey */
	border-style: solid;
	border-color:  #666666;  /* grey */
	border-width: 0.1em;
	line-height: 1.5em;
	text-align: center;
	padding: 1em;
	page-break-inside: avoid;
}

.edges
{
	padding: 0px;
}

.printonly
{
	margin-top: 0em;
	color: #666666;
}



#fade	/* Narrow fade zone under header */
{
/*
	display: none;
*/
}


#fade	/* Narrow fade zone under header - just to hide Safari print artefact */
{
	position: static; 
	height: 20px;                /* height of repeating graphic */
	background:url(../pix/grade.png);
	background-repeat:repeat-x;
	overflow: hidden;
	z-index: 6;
}

#heading
{
	width: 100%;
	height: 7.2em;             
	border-style: solid;
	border-color:  #666666;		/* grey */
	background-color:#ffffff;	/* white */
	color: #ffffff;				/* hide punctuation text, but leave for screen readers to find */
	border-top-width: 0.2em;
	border-left-width:0em;
	border-right-width:0em;
	border-bottom-width: 0.2em;
	text-align:center;
	font-size: 1em;
	line-height: 1.2em;
	z-index: 8;
	}

#main
{
	position: static;
}


#footing	/* Page footer for all pages */
{
	height: 1.5em; 
	width: 100%;
	border-style: solid;
	border-top-width: 0.2em;
	border-left-width: 0em;
	border-right-width: 0em;
	border-bottom-width: 0.2em;
	border-color:  #666666;    /* grey */
	background-color: #ffffff;  /* white */
	color: #666666;         /* GREY text */
	padding-top: 0.4em;
	font-size: 1.0em;
	font-weight: bold;
	line-height: 1.0em;
	text-align: center;
	z-index: 4;
}


h1,h2,h3,h4,h5,h6,h7    			/* common features */
{
	margin-top: 0.3in;
	margin-bottom: 0.1in;
	background-color: transparent;
	color: #666666;
}

h2
{
	margin-top: 1em;	/* override for heading "Barry Merchant Seamen" */
}



th,td,td.c,td.nav,td.dark,td.top          /* common features */
{
	font-family: geneva, verdana, sans-serif;
}

th   /* normal table header - expect browser to add bold */
{
	font-size: small;
}

td   /* normal (for here) text data cell */
{
	font-size: small;
}

td.c   /* centred text data cell */
{
	font-size: medium;
	text-align: center;
}



a:link   /* unvisited - text colour */
{
	background-color: transparent;
	color: #000000;
	text-decoration: underline;
}

a:link.headernav, a:link.thisone   /* header nav - remove */
{
	display: none; 
}

a:link.headertitle   /* header title - make grey */
{
	background-color: transparent;
	color: #666666;
	text-decoration: none;
}



a:visited   /* visited - text colour */
{
	background-color: transparent;
	color: #000000;
	text-decoration: underline;
}

a:visited.headernav, a:visited.thisone   /* header nav - remove */
{
	display: none;
}

a:visited.headertitle   /* header title - make grey */
{
	background-color: transparent;
	color: #666666;
	text-decoration: none;
}




ul    /* unordered list */
{
	margin-top: 0.1in;
	line-height: 1em;
}

li
{
	margin-bottom: 0.1in;
}

dl    /* definition list */
{
	margin-top: 0.1in;
}

dt    /* defined term */
{
	margin-top: 0.1in;
}

dd    /* definition */
{
	margin-top: 0.1in;
	font-size: small;
	margin-bottom: 0.2in;
}



hr   /* horizontal rule */
{
	background-color: #ffffff;
	height: 2px;
	color: #666666;
}



}    /*end @media:print */





/* ееееееееее                                                                        еее */
/* ееееееееее    SSSSSS      CCCCCC   RRRRRRR     EEEEEEEE  EEEEEEEE  NN      NN     еее */
/* ееееееееее   SS    SS   CCC    CC  RR     RR   EE        EE        NNNN    NN     еее */
/* ееееееееее    SS       CC          RR     RR   EE        EE        NN NN   NN     еее */
/* ееееееееее     SSSS    CC          RRRRRRRR    EEEEEE    EEEEEE    NN  NN  NN     еее */
/* ееееееееее        SS   CC          RR  RRR     EE        EE        NN   NN NN     еее */
/* ееееееееее   SS    SS   CCC    CC  RR    RR    EE        EE        NN    NNNN     еее */
/* ееееееееее    SSSSSS      CCCCCC   RR     RR   EEEEEEEE  EEEEEEEE  NN      NN     еее */
/* ееееееееее                                                                        еее */

@media screen
{

/*
Colours:
Main text:	#663300		dark brown			text, borders,
others:		#006633		greener
			#cc3333		redder
			#333366		bluer
			
			#660033		red-brown			header text hovered links
			#aaaa33		lime yellow			picture links on hover
			
Header		#ffdd66		light brown			background for header and graphics
Highlight:	#eeff99		lighter brown		boxed text
*/


/* PAGE AND TEXT BLOCKS */

html
{
	overflow: hidden;
}

body, div, p 
{
	cursor: default;
	font-family: georgia, garamond, serif;
	font-size: medium;
	color: #630;
}
	
body
{
	position: absolute;
	top: 0;
	bottom: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #ffffff;  /* white */ 
}

div 
{
	font-size: medium;
	background-color: transparent;
}

p, pre
{
	margin-top: 0.5em;
	max-width: 45em;
	margin-left: auto;
	margin-right: auto;
	background-color: transparent;
}

.limit    /* limited width anything */
{
	max-width: 45em;
	margin-left: auto;
	margin-right: auto;
}

blockquote   /* to indent left and right  GREEN */
{
	margin-top: 0.5em;
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
	color: #006633;         /* GREEN text */
	font-size: medium;
}



.printonly
{
	display: none;
	margin-top: 0em;
	margin-bottom: 1em;
	color: #aaa;
}



.centre   /* centre text */
{
	text-align: center;
}

.mono
{
	font-family: monaco, courier, mono;
	font-size: medium;
}

.red
{
	color: #cc3333;
}

.green
{
	color: #006633;
}

.blue
{
	color: #333366;
}

.sub
{
	margin-top: 0.1in;
	margin-bottom: 0in;
	margin-left: 2em;
	margin-right: 3em;
	font-size: medium;
}


.cb
{
	clear: both;
	font-size: x-small;
	text-align: right;
}

.left
{
	float: left;
	clear: left;
	margin-top: 1em;
	margin-right: 1em;
	margin-bottom: 1em;
	margin-left: 0em;
}

.right
{
	float: right;
	clear: right;
	margin-top: 1em;
	margin-right: 0em;
	margin-bottom: 1em;
	margin-left: 1em;
}


.boxed   /* highlighted text box */
{
	font-size: medium;
	font-weight: normal;
	line-height: 1.5em;
	background: #ffee88;
	text-align: center;
	padding-top: 1em;
	padding-right: 0.5em;
	padding-bottom: 1em;
	padding-left: 0.5em;

	border-style: solid;
	border-color:  #630;
	border-width: 0.1em;

	max-width: 45em;
	margin-left: auto;
	margin-right: auto;
}


.edges
{
	padding: 12px;
	min-height: 425px;
}



/* stacking sequence (z-index)              */
/*  z   #                                   */

/*  8   heading                             */
/*  6       fade                            */
/*  4                              footing  */
/*  2   margin-main-main-main-main          */



#fade	/* Narrow fade zone under header */
{
	position: fixed; 
	top: 7.4em;                  /* overlap top border */
	left: 0px; 
	right: 16px;                 /* leave room for scroll bar */
	height: 20px;                /* height of repeating graphic */
	border-style: solid;
	border-color:  #630; 
	border-top-width: 0.2em;
	border-left-width: 0px;      /* specify because different */
	border-right-width: 0px;
	border-bottom-width: 0px;
	background:url(../pix/grade.png);
	background-repeat:repeat-x;
	overflow: hidden;
	z-index: 6;
}

#heading
{
	position: fixed;
	top: 0px;	
	left: 0px;
	width: 100%;
	height: 7.2em;             
	padding: 0;
	margin: 0;
	border-style: solid;
	border-color:  #630;
	border-top-width: 0.2em;
	border-left-width:0em;
	border-right-width:0em;
	border-bottom-width: 0.2em;
	background-color:#FD6;
	color: #FD6;					/* hide the punctuation text needed by screen readers */
	text-align:center;
	font-size: 1em;
	line-height: 1.2em;
/*
	overflow: hidden;
*/
	z-index: 8;
}

#main
{
	position: fixed;	
	top: 7.5em;         /* allow a bit to accommodate Firefox! */
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0px;
	padding-left: 0px;
	margin: 0px;
	overflow: auto;
	z-index: 2;
}

#footing	/* Page footer for all pages */
{
	height: 1.5em; 
	width: 100%;
	border-style: solid;
	border-top-width: 0.2em;
	border-left-width:0em;
	border-right-width:0em;
	border-bottom-width: 0.2em;
	border-color: #630;
	background-color: #FD6;
	padding-top: 0.4em;
	font-size: 1.0em;
	line-height: 1.0em;
	font-weight: bold;
	text-align: center;
	z-index: 4;
}




/* HEADERS */

h1,h2,h3,h4,h5,h6,h7    			/* common features */
{
	margin-top: 0.3in;
	margin-bottom: 0.1in;
	background-color: transparent;
	color: #630;
}

h2
{
	margin-top: 0.6em;			/* override for heading "Barry Merchant Seamen" */
}


/* TABLE FEATURES */

th,td,td.c,td.nav,td.dark,td.top      /* common features */
{
	font-family: geneva, verdana, sans-serif;
}

th   /* normal table header - expect browser to add bold */
{
	font-size: small;
}

td   /* normal (for here) text data cell */
{
	font-size: small;
}

td.c   /* centred text data cell */
{
	font-size: medium;
	text-align: center;
}



/* LINK APPEARANCE - note "hover" is not always supported */
/* LINK definition sequence allows for normal priorities  */
/* LINK classes for heading and printing dropout permit   */

a:link   /* unvisited - black */
{
	cursor: pointer;
	background-color: transparent;
	color: #000000;
	text-decoration: underline;
}

	a:link.headernav   /* unvisited - header, nav */
	{
		cursor: pointer;
		background-color: transparent;
		color: #630;
		text-decoration: underline;
		font-weight: normal;
		letter-spacing: 0.1em;		/* font-stretch doesn't work */
	}

		a:link.headertitle   /* unvisited - header, title */
		{
			cursor: pointer;
			background-color: transparent;
			color: #630;
			text-decoration: none;
		}



a:visited   /* visited - force our text colour */
{
	cursor: pointer;
	background-color: transparent;
	color: #630;
	text-decoration: underline;
}

	a:visited.headernav   /* visited - header, nav */
	{
		cursor: pointer;
		background-color: transparent;
		color: #630;
		text-decoration: underline;
		font-weight: normal;
		letter-spacing: 0.1em;		/* font-stretch doesn't work */
	}
	
		a:visited.thisone   /* visited - header, nav */
		{
			cursor: pointer;
			background-color: transparent;
			color: #630;
			text-decoration: underline;
			font-weight: bold;
		}

			a:visited.headertitle   /* visited - header, title */
			{
				cursor: pointer;
				background-color: transparent;
				color: #630;
				text-decoration: none;
			}



a:hover    /* pointed at */
{
	cursor: pointer;
	background-color: #EF9;
	color: #603;
	text-decoration: underline;
}

	a:hover.headernav    /* pointed at - header, nav */
	{
		cursor: pointer;
		background-color: #EF9;
		color: #603;
		text-decoration: underline;
	}

		a:hover.thisone    /* pointed at - header, nav */
		{
			cursor: pointer;
			background-color: #EF9;
			color: #603;
			text-decoration: underline;
		}

			a:hover.headertitle    /* pointed at - header, title */
			{
				cursor: pointer;
				background-color: #EF9;
				color: #603;
				text-decoration: underline;
			}

				a:hover.logo    /* pointed at changes picture border colour (as if text) */
				{
					cursor: pointer;
					background-color: #ff0000;
					color: #AA3;  
					text-decoration: underline;
				}


a:active   /* loading - red */
{
	cursor: pointer;
	background-color: transparent;
	color: #ff0000;
	text-decoration: underline;
}



/* TWIDDLY BITS */


hr   /* horizontal rule */
{
	background-color: #ffffff;
	height: 2px;
	color: #630;
}



/* LISTS */

ul    /* unordered list */
{
	margin-top: 0.1in;
	line-height: 1em;
	max-width: 45em;
	margin-left: auto;
	margin-right: auto;
}

li
{
	margin-bottom: 0.1in;
}


dl     /* definition list - dt width MUST accommodate maximum dt text length*/
{
	max-width: 45em;
    margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	background-color: #eeff99;
	border: 2px solid #006633; 
	padding: 5px;
}
dt
{
    float: left;
    clear: left;
    width: 12em;
    text-align: left;
    font-weight: bold;
}
dd
{
    font-weight: normal;
    margin-left: 13em;
}


ol
{
	font-size: small;
	max-width: 45em;
	margin-left: auto;
	margin-right: auto;
	text-indent: 1em;
	list-style-position: outside;
	list-style-type: decimal;
}


}     /*end @media:screen */




/* END OF STYLESHEET */







/* NB   from   http://www.quirksmode.org/css/position.html

What is this reference point?

position: static: No reference point, since a static block cannot be
moved.

position: relative: Position the block would take if it were not moved
(i.e. if it had position: static).

position: absolute: The containing block, which is the first ancestor
element that does not have position: static. If there is no such
ancestor, the <html> element serves as the containing block. (Note: in
older browsers the <body> element serves as the default containing
block.)

position: fixed: The viewport (browser window).



A relatively positioned element serves as a containing block; this is the usual reason to use position: relative.

*/

/*
  dt:after { content: " -"; }
*/


/* end of file */