/* 
curved is the outer container for each of the sliding tabbed notebooks of links - info1 and info2 
*/

.curved {width:15em;}

.curved .b1 {
	margin:0 4px; 
	background:#88c;/* the color of the border */
	}
	
.curved .b2 {
	margin:0 2px; 
	border-width:0 2px;
	}
	
.curved .b3 {
	margin:0 1px;
	}
	
.curved .b4 {
	height:2px; 
	margin:0;
	}

.curved .b2, .curved .b3, .curved .b4 {
	border-left:1px solid #88c; 
	border-right:1px solid #88c;
	background:#C9EBF7; /* border color */
	}

.curved .b1, .curved .b2, .curved .b3 {	height:1px;	}

.curved .b1, .curved .b2, .curved .b3, .curved .b4  {
	font-size:1px; 
	display:block; 
	background:#C9EBF7; /* the color of the border */
	/* hide overflow:hidden from IE5/Mac */ 
	/* \*/ 
	overflow: hidden; 
	/*  */ 
	}

.curved .c1 {
	margin:0 5px; 
	background:#88c; /* the color of the border */
	}
	
.curved .c2 {
	margin:0 3px; 
	border-width:0 2px;
	}
	
.curved .c3 {margin:0 2px;}
	
.curved .c4 {
	height:2px; 
	margin: 0 1px;
	}
	
.curved .boxcontent {
	/*background:transparent; */
	background:#C9EBF7;/* the color of the border */
	border-left:1px solid #88c; 
	border-right:1px solid #88c; 
	font-size:0.9em; 
	text-align:justify;
	cursor:default;
	}
/* end curved */




/*
menu is the ul inside the sliding tabbed folders that hold the links  - info1, info2 ...  .
the basics, height width etc, are set here in this CSS file
the colors for the edges and the backgrounds ought to be set in each alternate css file.
*/

.menu {
	margin:0; 
	padding:0; 
	/*
	height:29.5em;
	height:32em;  
	height:34em;
	height:36em;
	height:38em;
	change height 
	height:40em; 
	height:43em;
	height:45em;
	*/
	height:60em;
	overflow:hidden; 
	background:#C9EBF7; /* the color of the border */
	}

.menu li {
	list-style-type:none; 
	float:left; 
	display:block; 
	width:100%;
	/*margin:0; 
	padding:0;*/
	}
  
.menu li a {
	display:block; 
	text-decoration:none; 
	color:#000;
	/* menu li a - place all colors to the alternate stylesheets 	color:#8BC1D5;	*/
	margin:0; 
	padding:0;
	width:100%;
	}
  
.menu li a span {
	display:none; 
	color:#000;
	}
  
.menu li .one {
	/* background:#f1f1f1;  / * url(barbadi_software.gif) no-repeat; background-position:bottom; */
	background:#C9EBF7; /* the color of the border */
	}
	
.menu li a.one span {
	display:block; 
	/*
	height:21.5em; 
	height:29em;  	
	height:34em;
	height:36em;
	height:38em;
	change height 
	height:40em;
	height:43em;
	height:45em;
	*/
	height:20em; /*was height:60em;*/
	margin:0 10px;
	/* border:1px solid green; */
	}
	
.menu li a:hover {
	/*
	background:#f1f1f1; the color of the border 
	background:#bbbbff; the color of the border 
	*/
	background:#C9EBF7;/* the color of the border */
	color:#000;
	/* menu li a:hover   move color 
	color:#C3DFE9; 
	*/
	}
	
/*.menu li a:hover span {*/
.menu li a:hover span.collection {
	display:block; 
	/*
	height:20em;
	height:24em;
	height:26em;
	height:28em;
	height:30em;
	change height
	height:32em;
	height:35em;
	height:37em;
	*/
	
	height:53em;
	margin:0 10px; /* was 0 10px*/
	cursor:pointer;
	/* border:1px solid green; border */
	}

 /* start test  */ 
/*.menu li p {*/
.menu li p {
	display:block; 
	text-decoration:none; 
	color:#00b; 
	margin:0; 
	width:100%;
	}
	
.menu li p span {
	display:none; 
	color:#000;
	}
	
.menu li p:hover {
	/*background:#f1f1f1;/* the color of the border 
	background:#bbbbff;/* the color of the border */
	background:#C9EBF7;/* the color of the border */
	}
	
/*.menu li p:hover span {*/
.menu li p:hover span.collection {
	display:block; 
	/*interesting bit -  a different style: 
	when height was removed, this showed the span to show only to the height of the text, and the lower spans still showed.*/
	/*change height 
	height:28.5em;
	height:31.5em;
	height:33.5em;*/ 
	height:48.5em;
	margin:0 10px;  
	/* border:1px solid green; */
	}
  
/*
.menu li p:hover span.left { height:20em; position:absolute; display:block;}
.menu li p:hover span.right { height:20em; position:absolute; display:block; left:110px; top:70px;}
*/
  
/*.menu li p:hover span a {display:block;}*/
.menu li p:hover span.collection a {display:block;}
  
/*.menu li p.one span {*/
.menu li p.one span.collection {
	display:block; 
	/*
	height:24em; 
	change height 
	height:26em;
	height:29em;
	height:31em;
	*/
	height:46.5em;
	margin:0 10px;
	/* border:1px solid green; */
	}
	/* end test  */ 

.menu .h2 {
	margin:0 5px; 
	padding:0; 
	color:#000;
	/* menu .h2   move color:#8BC1D5;  */
	font-variant:small-caps; 
	font-size:1em; 
	border:none; 
	background:#C9EBF7;/* the color of the border */
	}
	
.menu .h3 {
	margin:0 5px; 
	padding:0; 
	font-size:1.1em; 
	/*color:#00b;	menu .h3   move color */
	color:#693900; 
	background:#C9EBF7;/* the color of the border */
}

/*
.h4 {
	display:inline; 
	margin:1px; 
	padding:0px; 
	font-size:8pt; 
	font-weight:bold; 
	font-style:italic; 
	color:#8BC1D5; 
	background:#335; 
	border:1px solid #000; 
	opacity:0.45; 
	text-align:left;
	
	width:100%;
}
*/


.menu .h4 {
	display:inline;
	font-size:0.9em;
	text-align:left;

	margin:4px 0px 0px 0px;
	padding:0px;
	border:solid #000000 1px;
	background:#2F3452;
	color:#FFFFFF;
	}


/*these three are a test for the two columns, not needed otherwise, can remove*/

.menu .cluster	{
	width:100%; 
	margin: 3px 0px 3px 0px;
	float:left; 
	clear:left; 
	display:block; 
	padding:0px;	
	border: 3px solid transparent;
}
.menu .cluster:hover {
	background: #444444;
	border:3px groove gray;
}

.menu .row {
/*	float:left; */
/*	clear:left; */
	display:inline; 
	width:100%; 
	/*border:solid #ebddb5 1px; */
	margin: 0px 0px 4px 0px; 
	padding:0px;
	text-align:left;
	}


.menu .rowh4 {
/*	float:left; */
/*	clear:left; */
	display:block;
	width:100%;
/*	border:solid #ebddb5 1px; */
	margin: 5px 0px 0px 0px; 
	padding:0px;
/*	display:inline; */
	color:#8BC1D5;
	text-decoration:underline;
	text-align:left;
	}

.menu .rowh5 {
/*	float:left;*/
/*	clear:left;*/
	display:block;
	width:100%;
	margin: 5px 0px 0px 0px;
	padding:0px;
	display:inline;
	color:#8BC1D5;
	text-decoration:underline;
	text-align:left;
	}

.menu .photogroup {
	display:block;
	/*font-size:0.9em;*/
	font-size:1em;
	color:#8BC1D5; 
	margin:0px;
	padding:0px;
	text-decoration:none; /*underline;*/
	text-align:left; /*left;*/
	float:left;
	width:50%;
	}
	
.menu .item { 
	display:block;
	float:none;  
	text-align: left; /*left;   */
	margin:0px; 
	padding:0px;
	
	/*width:50px;*/
	width:50%;
	height:1.2em;
	float:left;
	
	/*border:1px solid cyan; 
	width:18px;
	height:28px;*/
}
	
.menu .glyphgroup { 
	display:block; 
	float:left; 
	clear:left; 
	margin:2px; 
	width:20px; 
}

.menu .glyph { 
	float:left; 
	margin:0px; 
	text-align:left; 
	padding:0px; 
}

/* to here */



.menu img {
	margin:0px; 
	/* border:1px solid #000; */
	float:left;
	}
	
/* end menu */




/* curved-g is the gold trim on the main links */
.curved-g {	width:15em;}
	
.curved-g .b1, .curved-g .b2, .curved-g .b3, .curved-g .b4  {
	font-size:1px;
	display:block;
	/*background:#C9EBF7; / * the color of the border */
	background:#ffdd33;
	/* hide overflow:hidden from IE5/Mac */ 
	/* \*/ 
	overflow: hidden; 
	/*  */ 
	}
	
.curved-g .b1, .curved-g .b2, .curved-g .b3 {height:1px;}
	
.curved-g .b2, .curved-g .b3, .curved-g .b4 {
	border-left:1px solid #ffdd33;
	border-right:1px solid #ffdd33;
	background:#C9EBF7;/* the color of the border */
	}
	
.curved-g .b1 {
	margin:0 4px; 
	background:#ffdd33;/* the color of the border */
	}
	
.curved-g .b2 {
	margin:0 2px; 
	border-width:0 2px;
	}
	
.curved-g .b3 {margin:0 1px;}
	
.curved-g .b4 {
	height:2px; 
	margin:0;
	}
	
.curved-g .c1 {
	margin:0 5px; 
	background:#ffdd33;	/* the color of the border */
	}
	
.curved-g .c2 {
	margin:0 3px; 
	border-width:0 2px;
	}
	
.curved-g .c3 {margin:0 2px;}
	
.curved-g .c4 {
	height:2px; 
	margin: 0 1px;
	}
	
.curved-g .boxcontent {
	/*background:transparent; */
	background:#C9EBF7; /* the color of the border */
	border-left:1px solid #ffdd33; 
	border-right:1px solid #ffdd33; 
	font-size:0.9em; 
	text-align:justify;
	cursor:default;
	}
	
.curved-g .boxcontent a {	padding:0px 4px 0px 4px;}	
/* end curved */