/* ==================================================================================================================== */
/* ==================================================================================================================== */
/*	30 November 2006 - This is file welkom.css, the companion of welkom.htm, de welkom pagina - in Dutch */
/*	Last updated : 30 November 2006 */
/* ==================================================================================================================== */

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  CLASS CODES  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

	/* index.css houses additional css codes for index.htm, thereby making index.htm a smaller file */
	/* the additional codes include a variety of class codes, as well as all box codes */

	/*p {text-align: justify;}*/

	div.adv6  
		{font-family:Arial; font-size:13px; color:#FF0000; font-weight:bold; line-height:15px; background-color:gold;}
	div.advertlinehite {line-height:14px;}
	div.beige {color:#FFFFFF;}
	div.bgclr {background-color:#003C56;}


	div.goldcolor {color: gold;}
	div.othercolor {color: #FFFFDA;}
	div.xcolor {color: gold;}
	div.hite  {font-size:11px; color:#003C56; line-height:20px;}
	div.hite2  {line-height:10px;}
	div.tree {font-family: Arial; font-size: 11px; color: #FFFFBB; font-weight: normal; line-height: 14px;}
	div.tree2 {font-family: Arial; font-size: 11px; color: #FFFFFF; font-weight: normal; line-height: 14px;}
	div.advertlinehite {line-height: 14px;} 
	div.imgtextlinehite {line-height: 13px;} 
	div.overall_left  {line-height: 13px;} 
	div.overall_right {line-height: 13px;} 
	div.sizex {font-size:11px; color:white;}

	span.adv6  
		{font-family:Arial; font-size:13px; color:#FF0000; font-weight:bold; line-height:15px; background-color:gold;}
	span.advertlinehite {line-height: 14px;} 
	span.beige {color:#FFFFFF;}
	/*span.bgclr {background-color:#003C56;}*/
	span.bgclr {background-color:#285C85;}
	span.blue {color:blue;}
	span.black {color:black;}
	span.goldcolor {color: gold;}
	span.hite  {font-size:12px; color:#003C56; line-height:20px;}
	span.hite2  {line-height:10px;}
	span.jbox {font-family: Arial; font-size: 12px; color: #FFFFFF; font-weight: normal; line-height: 14px;}
	span.othercolor {color: gold;}
	span.sizex {font-size:11px; color:white;}
	span.tree 
		{font-family:Arial; font-size:11px; color:#FFFFBB; font-weight:normal; font-style:normal; line-height:14px;}
	span.tree2 
		{font-family:Arial; font-size:11px; color:#FFFFFF; font-weight:normal; font-style:normal; line-height:14px;}
	span.xcolor {color: gold;}


	div.textheader1 {
		font-size: 13px;
		color: gold;
		font-weight: bold;
		}

	span.textheader1 {
		font-size: 13px;
		color: gold;
		font-weight: bold;
		}

	div.box {
		font-size: 11px;
		color: #000000;
		font-weight: normal;
		line-height: 14px;
		}	

	span.box {
		font-size: 11px;
		color: #000000;
		font-weight: normal;
		line-height: 14px;
		}	

	div.tiny {
		font-family:Tamoha;
		font-size:9px;
		color:#000000;
		line-height: 15px;
		}

	span.tiny {
		font-family:Tamoha;
		font-size:9px;
		color:#000000;
		line-height: 15px;
		}

	div.tiny2 {
		font-family:Arial;
		font-size:11px;
		color:#FFFFDA;
		line-height: 13px;
		}

	span.tiny2 {
		font-family:Arial;
		font-size:11px;
		color:#FFFFDA;
		line-height: 13px;
		}

	div.tiny3 {
		font-family:Arial;
		font-size:10px;
		color:#EEEEEE;
		line-height:14px;
		}

	div.small {
		font-family:Tahoma;
		font-size:11px;
		color:#F0BC28;
		}

	span.small {
		font-family:Tahoma;
		font-size:11px;
		color:#F0BC28;
		}

	span.small2 {
		font-family:Tahoma;
		font-size:11px;
		color:#000000;
		}

	div.medium {
		font-family:Tahoma;
		font-size:11px;
		color:#FFFFFF;
		background-color:#003C56;
		}

	span.medium {
		font-family:Tahoma;
		font-size:11px;
		color:#FFFFFF;
		background-color:#003C56;
		}

	/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  css codes for boxes  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

	div.box1a {						/* main text box */
		float: left;
		width: 364px;
		margin-left: 5px;
		padding: 10px;
		border: solid #F0BC28 1px;
		background-color: #FFFFEA;
		}

	div.box1 {						/* main text box */
		float: left;
		width: 364px;
		margin-top: 3px;
		margin-left: 7px;				/* old=5px */
		padding: 10px;
		border: solid #F0BC28 1px;
		background-color: #074B74;
		background-color: #004D67;
		background-color: #285C85;
		}

	div.box3 {						/* box 3 in column 4 (image Olga) */
		width: 139px;
		margin-top: 3px;
		margin-bottom: 0px;
		margin-left: 1px;				/* old=1px */
		padding: 4px;
		border: solid #F0BC28 1px;
		font-size: 11px;
        /*	line-height: 14px; */
		background-color: gold;
		background-color: #003C56;
		}

	div.box4 {						/* message box inside box1, at bottom */
		width: 350px;
		margin-left: 2px;
		padding: 4px;
		border: solid gold 1px;
		background-color: #285C85;
		}

	div.box5 {						/* box 5 in column 2, used for images, left of main text */
		width: 82px;
		margin-top: 3px;
		margin-bottom: 0px;
		margin-left: 6px;				/* old=4px */
		padding: 2px;
		border: solid #003C56 1px;
		border: solid #F0BC28 1px;
		font-size: 11px;
		line-height: 9px;
		background-color: gold;
		background-color: #F0BC28;
		background-color: #003C56;
		}

	div.box6 {						/* box6 in column 4  #F0BC28(gold) */
		width: 159px; 
		margin-left: 5px;				/* old=3px */ 
		padding: 0px;  
		border: solid #F0BC28 0px;
		background-color: #003C56;
		}

	div.box7 {						/* top row, box 7 is nested inside box 9 */
		width: 265px; 
		margin-left: 3px; 
		padding: 0px; 
		border: dashed cyan 0px;
		font-size: 12px;
		color: white;
		font-weight: normal;
		line-height: 14px;
		background-color: #980000;
		background-color: #003C56;
		background-color: #285C85;
		}

	div.box8 {			/* this box may somehow be required for logo, but I cannot find out anymore how precisely */
		width: 130px; 
		margin-left: 3px; 
		padding: 0px; 
		border: solid gold 1px;
		font-family: Tahoma;
		font-size: 11px;
		color: #FFFFDA;
		font-weight: bold;
		line-height: 14px;
		background-color: #285C85;
		}

	div.box8a {						/* box 8a (image of Virgin) is nested inside box 24 */
		width: 47px; 
		font-family: Arial;
		margin-left: 0px; 
		padding: 0px; 
	   	border: solid gold 0.001em;
		border: solid gold 1px;
		background-color: gold;
		}

	div.box8b {						/* box 8b (Fr Ned Music) is nested inside box 24 */
		width: 57px; 
		font-family: Arial;
		line-height: 20px;
		margin-left: 0px; 
		padding: 0px; 
		border: solid gold 0px;
		background-color: #003C56;
		}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
	div.box9 {						/* Welcome box, has box 7 nested inside */
		width: 265px; 
		margin-left: 3px; 
		padding: 4px; 
		border: solid gold 1px;
		font-size: 16px;
		color: gold;
		font-weight: bold;
		line-height: 22px;
		background-color: #980000;
		background-color: #003C56;
		background-color: #285C85;
		}
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

	div.box10 {						/* not in use */
		width: 400px; 
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 1px; 
		padding: 20px; 
		border: solid white 2px;
		font-size: 12px;
		color: white;
		font-weight: normal;
		line-height: 15px;
		background-color: #980000;
		background-color: #003C56;
		}

	div.box11 {						/* top row, date, welcome (French & Ned), homepage, music */
		width: 120px; 
		margin-left: 8px; 
		padding: 3px; 
		border: solid gold 1px;
		font-size: 11px;
		color: white;
		font-weight: normal;
		line-height: 14px;
		background-color: #980000;
		background-color: #003C56;
		background-color: #285C85;
		}

	div.box12 {						/* medieval byzantine icons */
		width: 90px; 
		margin-left: 1px; 
		padding: 2px; 
		border: solid gold 1px;
		font-size: 11px;
		font-weight: normal;
		line-height: 11px;
		background-color: #285C85;
		}

	div.box13 {						/* contemporary byzantine icons */
		width: 90px; 
		margin-left: 1px; 
		padding: 2px; 
		border: solid gold 1px;
		font-size: 11px;
		font-weight: normal;
		line-height: 11px;
		background-color: #285C85;
		}

	div.box14 {						/* byzantine icons by subject */
		width: 92px; 
		margin-left: 1px; 
		padding: 2px; 
		border: solid gold 1px;
		font-size: 11px;
		font-weight: normal;
		line-height: 11px;
		background-color: #285C85;
		}

	div.box15 {						/* general references */
		width: 75px; 
		margin-left: 1px; 
		padding: 2px; 
		border: solid gold 1px;
		font-size: 11px;
		font-weight: normal;
		line-height: 11px;
		background-color: #285C85;
		}

	div.box16 {						/* introductory pages */
		width: 75px; 
		margin-left: 3px; 
		padding: 2px; 
		border: solid gold 1px;
		font-size: 11px;
		font-weight: normal;
		line-height: 11px;
		background-color: #285C85;
		}

	div.box19 {						/* Search & SiteSearch box */
		width: 200px; 
		margin-right: 0px; 
		margin-left: 9px; 
		padding: 0px; 
		border: solid #C83410 0px;
		font-size: 12px;
		color: #004D67;
		font-weight: normal;
		line-height: 15px;
   	  /* 	background-color: #980000;
		background-color: #FFFFDA; */
		}

/*************************************************************************************************************/
/* Making the Russian Icon Tour advert: Use div.boxes 17,18,20,21, and offset imgboxes 1, 2        */
/* IMPORTANT: To make box longer (shorter) make the following greater (smaller) by the same amount           */
/*  (1) box 21 width, (2) offset imgbox1 width, (3) offset imgbox2 left distance                             */
/*   ALSO: Only use the border of offset imgbox1                                                             */
/* Note: all code for RIT advert has been put together */
/*************************************************************************************************************/

	/* Russian Icon Tour, image and border around image. On Index-Imgbase Entry, All-in-One */
	div.box17 {
		width: 48px; 
		margin-top: 0px; 
		margin-left: 0px; 
		line-height: 9px;
		padding: 0px; 
		border: solid #C83410 2px;	/* #C83410  #CBB778 */
		}

	div.box18 {				/* Russian Icon Tour, Advert - Inner box with message */
		width: 155px; 		/* The (Inner) box is nested inside box 20 */
		margin-top: 0px; 
		margin-left: 0px; 
		padding: 0px; 
		border: dashed #C83410 0px;
		font-size: 11px;
		color: #000000;
		font-weight: normal;
		line-height: 14px;
		/* background-color: #FFFFF2;*/
		}

	/* Of the next 2 lines, the 1st is code for 1st text line in advert, and the 2nd the code for 2nd line */

	div.bluelink2 {font-family:Verdana; font-size:15px; font-weight:bold; line-height:14px;}
	div.bluelink1  {font-family:Verdana; font-size:11px; font-weight:bold; line-height:17px;}

	/*div.bluelink2 {font-family:Verdana; font-size:15px; font-weight:bold;    color:#66FFFF;    line-height:16px;}*/
	/*div.bluelink1  {font-family:Verdana; font-size:15px; font-weight:bold;    color:#66FFFF;    line-height:17px;}*/

	span.rit2 {color:#900000;}
	span.rit1 {color:#0000FF;}

	span.frilya {font-size:11px; color:#900000; font-weight:bold;}	/* font-weight:bold; */
	span.sclr2 {color:#000000;}

	div.box20 {				/* Russian Icon Tour, Advert - Middle box, with 2 title lines in bold */
		width: 140px; 		/* The (Middle) box is nested inside box 21 */
		margin-left: 2px; 
		padding: 0px; 
		border: solid #C83410 0px;
		font-size: 11px;
		color: #004D67;
		font-weight: bold;
		line-height: 15px;
		/* background-color: #FFFFF2;*/
		}

	div.box21 {				/* Russian Icon Tour, Advert - Outer box enclosure */
		width: 215px; 		/* 245 */
		margin-top: 3px;
		margin-right: 0px; 
		margin-left: 7px; 	/* 35 */
		margin-bottom: 0px; 
		/* padding: 0px;*/
		/* font-size: 16px;*/
		/* color: #004D67;*/
		/* font-weight: normal;*/
		/* line-height: 15px;*/
		/*background-color: #FFFFEA;*/ 	/* #FFFFF2  #FF00FF beige #FFFFEA */
		}

	.offset_imgbox1, .offset_imgbox2 {
		position: relative;
		color: red;
		}

	.offset_imgbox1 {		/* Russian Icon Tour Advert - text on Index-Imgbase page and All-in-One page */
		left: 0px;					/* horizontal pos. of part of advert block, does not affect image pos. */
		top: 0px;					/* vertical position of entire advert block: 0 -12 */
		width: 215px;				/* 245 */
		color: white;				/* 2 lower lines: font-weight */
		font-family: Arial;			/* 3 lower lines: font-family */
		font-size: 11px;				/* 3 lower lines: font-size   */
		font-weight: normal;			/* 2 lower lines: font-weight */
		line-height: 14px;			/* 3 lower lines: line-height */
		/* text-decoration: underline;*/
		margin-top: 0px;				/* vertical distance between advert block and block above */
		margin-right: 0px;			/* not of practical use */
		margin-bottom: -76px;			/* vertical position of image inside advert block */
		margin-left: 0px;				/* horizontal pos. of part of advert block, does not affect image pos. */
		padding: 3px;				/* padding */
		border: solid #285C85 1px;		/* border color an thickness: #285C85 */
		background-color: gold;			/* background-color: gold  beige  #BA0000  #900000  #003C56  #F0DCB0 */
		}

	.offset_imgbox2 {		/* Russian Icon Tour Advert - image on Index-Imgbase page and All-in-One page */
		left: 167px;
		top: 0px;
		color: gold;
		width: 45px;
		font-family: Arial;
		font-size: 11px;
		font-weight: normal;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding: 0px;
		border: dashed blue 0px;
		/* background-color: #285C85; */
		}

/*************************************************************************************************************/
/* END of code for Russian Icon Tour advert */
/* Not that all code for advert has been put together */
/*************************************************************************************************************/

	div.box22 {						/* Google adverts */
		width: 240px; 
		margin-right: 0px; 
		margin-left: 9px; 			/* 5 */
		padding: px; 
		border: dashed cyan 0px;
		}

	div.box23 {						/* User Guide */
		width: 170px; 
		margin-right: 30px; 
		margin-left: 0px; 
		padding: px; 
		border: dashed cyan 0px;
		}

	div.box24 {						/* iec logo, at top of screen left */
		width: 655px; 
		margin-top: 5px; 
		margin-right: 0px; 
		margin-bottom: 0px; 
		margin-left: 13px; 
		padding: 5px; 
		border: solid #FF0000 0px;
		font-family: Rockwell;
		font-size: 25px;
		color: gold;
		font-weight: normal;
		line-height:25px;
		background-color: #003C56;
		}

/*	div.box25 see end of file ; this box is no longer in use */

	div.box26 {						/* Press F11 */
		width: 160px; 
		margin-right: 0px; 
		margin-left: 9px; 
		padding: 3px; 
		font-size: 12px;
		color: #FFFFFF;
		font-weight: normal;
		line-height: 14px;
		background-color: #FFFFDA;
		border: solid #BA0000 2px;
		}

	div.box27 {						/* top_of_page link, in outer right column (advert column) */
		width: 180px; 
		margin-right: 0px; 
		margin-left: 9px; 
		padding: px; 
		border: dashed cyan 0px;
		}

	div.box28 {
		/* left: 266px; */
		top: -72px;
		color: #FFFFFF;
		width: 200px;
		font-family: Arial;
		font-size: 11px;
		font-weight: normal;
		line-height: 14px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 10px;
		margin-left: 3px;
		padding: 6px;
		border: solid gold 1px;
		background-color: #285C85;
		}

	/* box 29 (A Guide to..., at top of welcome page) is nested inside box 24 */
	div.box29 {
		/* left: 266px; */
		top: -72px;
		width: 450px;
		font-family: Arial;
		font-size: 14px;
		color: #FFFFFF;
		font-weight: normal;
		line-height: 18px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 3px;
		margin-left: 3px;
		padding: 6px;
		border: dashed cyan 0px;
		background-color: #003C56;
		}

	div.box30 {						/* box 30 (date) is nested inside box 29*/
		/* left: 266px; */
		top: -72px;
		width: 400px;
		font-family: Arial;
		font-size: 11px;
		color: gold;
		font-weight: normal;
		line-height: 10px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: -10px;
		margin-left: 3px;
		padding: 6px;
		border: dashed cyan 0px;
		}

	div.box31 {				/* box31 houses menu2_cm4.js on the homepage ; works well also in Firefox */
		width: 665px;		/* interestingly, box31 holds the 6 offset_gboxes used for the menu */
		font-family: Arial;
		font-size: 11px;
		color: gold;
		font-weight: normal;
		line-height: 10px;
		margin-top: -22px;
		margin-right: 0px;
		margin-bottom: 11px;
		margin-left: 6px;
		padding: 0px;
		border: dashed cyan 0px;
		/* background-color: #285C85; */
		}

	div.box32 {				/* box32 houses menu2_cm4.js on the 'Icons by Subject' page ; also works in Firefox */
		width: 665px;
		font-family: Arial;
		font-size: 11px;
		color: gold;
		font-weight: normal;
		line-height: 10px;
		margin-top: -10px;
		margin-right: 0px;
		margin-bottom: 10px;
		margin-left: 8px;
		padding: 0px;
		border: dashed cyan 0px;
		/* background-color: #285C85; */
		}

	div.box32a {			/* box32a provides some spacing on 'Icons by Subject' page */
		width: 60px;
		line-height: 10px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: -10px;
		margin-left: 0px;
		padding: 0px;
		border: dashed red 0px;	
		}

	div.box33 {				/* box33 houses menu2_cm4.js on the 'Gen. References' page ; also works in Firefox */
		width: 665px;
		font-family: Arial;
		font-size: 11px;
		color: gold;
		font-weight: normal;
		line-height: 10px;
		margin-top: -20px;
		margin-right: 0px;
		margin-bottom: 8px;
		margin-left: 6px;
		padding: 0px;
		border: dashed cyan 0px;
		/* background-color: #285C85; */
		}

	div.box33a {				/* box33a is a border around iec logo on 'Gen. References' page */
		width: 160px;
		line-height: 10px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: -1px;
		margin-left: 0px;
		padding: 0px;
		border-top: solid #C83410 1px;	/* #C83410 */
		border-right: solid #C83410 1px;	/* #C83410 */
		border-bottom: solid white 0px;	/* #C83410 */
		border-left: solid purple 0px;	/* #C83410 */
		}

	div.box33b {			/* box33b provides some spacing on 'Gen. References' page */
		width: 60px;
		line-height: 10px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding: 3px;
		border: dashed red 0px;	
		}

	div.box35 {				/* box35 houses menu2_cm4.js on the 'Medieval Icons' page ; also works in Firefox */
		width: 665px;
		font-family: Arial;
		font-size: 11px;
		color: gold;
		font-weight: normal;
		line-height: 10px;
		margin-top: -27px;
		margin-right: 0px;
		margin-bottom: -2px;
		margin-left: 6px;
		padding: 0px;
		border: dashed cyan 0px;
		/* background-color: #285C85; */
		}

	div.box36 {				/* box36 is nested inside box37 */
		width: 238px;
		line-height: 10px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding: 0px;
		/* border: dashed cyan 1px; */
		border: solid gold 1px;
		}

	div.box37 {				/* box37 houses the images of the festal days slideshow */
		width: 240px;
		line-height: 10px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding: 3px;
		/* border: dashed cyan 1px; */
		border: solid gold 2px;
		}

	div.box38 {				/* box38 houses the page with the festal days slideshow */
		width: 750px;
		line-height: 16px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding: 0px;
		/* border: dashed cyan 1px; */
		border: solid #C8B878 1px;
		background-color: #003C56;
		}

	div.box39 {				/* box39 houses the Pantokrator of Aiden Hart - iec/lib/02493.htm */
		width: 238px;
		/*line-height: 8px;*/
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding: 0px;
		/*border: dashed cyan 1px;*/
		border: solid gold 1px;
		}

	div.box40 {				/* box40 houses all of the 'Icons for Sale' page */
		width: 929px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding: 0px;
		border: dashed cyan 0px;
		}

	div.box41 {				/* box41 houses menu2_cm4.js on the 'Icons for Sale' page ; also works in Firefox */
		width: 685px;
		font-family: Arial;
		font-size: 11px;
		color: gold;
		font-weight: normal;
		line-height: 10px;
		margin-top: -35px;
		margin-right: 0px;
		margin-bottom: 20px;
		margin-left: -5px;
		padding: 0px;
		border: dashed cyan 0px;
		/* background-color: #285C85; */
		}

	/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  end css codes for standard boxes  xxxxxxxxxxxxxxxxxxxxxxxxxx */

	/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  start css codes for offset boxes  xxxxxxxxxxxxxxxxxxxxxxxxxx */


.offset_hbox1, .offset_hbox2, .offset_hbox3, .offset_hbox4, .offset_hbox5, .offset_hbox6 {
		position: relative;
		color: red;
		}

.offset_hbox1 {							/* introductory pages */
		left: -275px;
		top: 0px;
		color:white;
		width: 89px;
		font-size: 11px;
		line-height: 11px;
		margin-top: 4px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding: 2px;
		border: solid #CBB778 1px;
		background-color: #285C85;
		}

.offset_hbox2 {							/* medieval byzantine icons */
		left: -162px;
		top: -28px;
		color: white;
		width: 90px;
		font-size: 11px;
		line-height: 11px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding: 2px;
		border: solid #CBB778 1px;
		background-color: #285C85;
		}

.offset_hbox3 {							/* contemporary byzantine icons */
		left: -50px;
		top: -78px;
		color: white;
		width: 90px;
		font-size: 11px;
		line-height: 11px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding: 2px;
		border: solid #CBB778 1px;
		background-color: #285C85;
		}

.offset_hbox4 {							/* byzantine icons by subject */
		left: 62px;
		top: -128px;
		color: white;
		width: 90px;
		font-size: 11px;
		line-height: 11px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding: 2px;
		border: solid #CBB778 1px;
		background-color: #285C85;
		}

.offset_hbox5 {							/* general references */
		left: 174px;
		top: -178px;
		color: white;
		width: 88px;
		font-size: 11px;
		line-height: 11px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding: 2px;
		border: solid #CBB778 1px;
		background-color: #285C85;
		}

.offset_hbox6 {							/* miscellaneous pages */
		left: 283px;
		top: -228px;
		color: white;
		width: 89px;
		font-size: 11px;
		line-height: 11px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: -241px;
		margin-left: 0px;
		padding: 2px;
		border: solid #CBB778 1px;
		background-color: #285C85;
		}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  end css codes for offset_hboxes  xxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  start css codes for offset_jboxes  xxxxxxxxxxxxxxxxxxxxxxxx */

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

.offset_jbox1, .offset_jbox2 {
		position: relative;
		color: red;
		}

.offset_jbox1 {						/* welcome */
		left: -70px;
		top: 2px;
		color: #FFFFDA;
		width: 265px;
		font-family: Arial;
		font-size: 11px;
		font-weight: bold;
		line-height: 14px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 3px;
		padding: 5px;
		border: solid gold 1px;
		background-color: #285C85;
		}

.offset_jbox2 {						/* date, french, dutch, home, music */
		left: 266px;
		top: -72px;
		color: #FFFFFF;
		width: 110px;
		font-family: Arial;
		font-size: 11px;
		font-weight: normal;
		line-height: 14px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: -76px;
		margin-left: 3px;
		padding: 6px;
		border: solid gold 1px;
		background-color: #285C85;
		}
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  start css codes for offset_gboxes  xxxxxxxxxxxxxxxxxxxxxxxx */

.offset_gbox1, .offset_gbox2, .offset_gbox3, .offset_gbox4, .offset_gbox5, .offset_gbox6 {
		position: relative;
		color: red;
		}

.offset_gbox1 {						/* cm4 in different location - introductory pages */
		left: 0px;
		top: 0px;
		color: #FFFFDA;
		width: 89px;				/* width:678px */
		font-family: Arial;
		font-size: 11px;
		font-weight: bold;
		line-height: 14px;
		margin-top: 15px;
		margin-right: 5px;			/* margin-right:0px */
		margin-bottom: 14px;
		margin-left: 3px;				/* margin-left:3px */
		padding: 5px;
		border: solid cyan 0px;
		}

.offset_gbox2 {						/* cm4 in different location - medieval icons */
		left: 0px;
		top: 0px;
		color: #FFFFDA;
		width: 92px;
		font-family: Arial;
		font-size: 11px;
		font-weight: bold;
		line-height: 14px;
		margin-top: 15px;
		margin-right: 0px;
		margin-bottom: 10px;
		margin-left: 1px;
		padding: 5px;
		border: solid cyan 0px;
		}

.offset_gbox3 {						/* cm4 in different location - contemporary icons */
		left: -30px;
		top: 0px;
		color: #FFFFDA;
		width: 91px;
		font-family: Arial;
		font-size: 11px;
		font-weight: bold;
		line-height: 14px;
		margin-top: 15px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 2px;
		padding: 5px;
		border: solid cyan 0px;
		}

.offset_gbox4 {						/* cm4 in different location - byzantine icons by subject */
		left: -25px;
		top: 0px;
		color: #FFFFDA;
		width: 90px;
		font-family: Arial;
		font-size: 11px;
		font-weight: bold;
		line-height: 14px;
		margin-top: 15px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 3px;
		padding: 5px;
		border: solid cyan 0px;
		}

.offset_gbox5 {						/* cm4 in different location - general references */
		left: -20px;
		top: px;
		color: #FFFFDA;
		width: 84px;
		font-family: Arial;
		font-size: 11px;
		font-weight: bold;
		line-height: 14px;
		margin-top: 15px;
		margin-right: 6px;
		margin-bottom: 0px;
		margin-left: 3px;
		padding: 5px;
		border: solid cyan 0px;
		}

.offset_gbox6 {						/* cm4 in different location - miscellaneous pages */
		left: -15px;
		top: 0px;
		color: #FFFFDA;
		width: 88px;
		font-family: Arial;
		font-size: 11px;
		font-weight: bold;
		line-height: 14px;
		margin-top: 15px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 3px;
		padding: 5px;
		border: solid cyan 0px;
		}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

	div.box25 {						/* settings for box 25. the box is presently not in use */
		width: 130px; 				/* it had box 8a nested inside (for iec logo top left) */
		margin-top: 6px; 
		margin-right: 0px; 
		margin-bottom: 0px; 
		margin-left: 16px; 
		padding: 0px; 
		border: solid gold 1px;
		font-family: Tahoma;
		font-size: 11px;
		color: #FFFFDA;
		font-weight: bold;
		line-height: 14px;
		background-color: #285C85;
		}

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */