/* ====================================================================
GENERAL STYLING
-------------------------------------------------------------------- */
/* border:nones are for NN4 */
html { margin: 0px; padding: 0px; }
body
	{ margin: 0; padding: 0; background-color: #000; background-image: url(../images/bkg1.png); background-repeat: repeat-x; text-align: center; }	
div { margin: 0px; padding: 0px; }
p { font-size: 0.6em; color: #444; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.3em; margin-top: 0; margin-right: 0; margin-bottom: 0.3em; padding: 0; }
capital { font-size: 3em; font-weight: bold; text-transform: capitalize; }
ul {
	margin: 0px;
	padding: 0px;
   }
table {
	vertical-align:top;
	padding: 0px;
	margin: 0px;
   }
.table_center {
	text-align: center;
	vertical-align:middle;
	padding: 0px;
	margin: 0px;
   }
.clear { clear: both;} /* CSS HACK: only for NN4, so now use Caio hack to cleanse palette */
/*/*/ .clear { display: none; } /* */

.box-topstrip
	{ color : #ccc; font-size: 1em; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; width: 100%; height: 25px; margin: 0 0 0; background-image: url(../images/box-topstrip_bkg1.png); background-repeat: repeat-x; border:none; }
/* box-wrap is only needed if you want to set a background color for the columns, put a border round the content block or fix the content width */
.box-wrap
	{ color: #000000; background-color: #c2c2c2; width: 900px; margin: 0 auto; text-align: left; background-image: url(../images/wavebkg.png); background-repeat: no-repeat; background-position: 0 360px; border:none; }
.box-header
	{ color: #ffffff; width: 900px; height: 79px; margin: 0 auto; background-color: #000000; text-align: left; position: relative; }
.header-logo
	{ color: #ffffff; width: 252px; height: 79px; margin: 0 auto; background-color: #000000; text-align: left; position: relative; float: left; }
.header-fading-images
	{ color: #ffffff; width: 376px; height: 79px; margin: 0 auto; background-color: #000000; text-align: left; position: relative; float: right; }	
.box-navihor
	{ width: 900px; margin: 0 auto; background-color: #cccccc; height: 35px; padding: 0; border-style: none; }
.box-navihor a img
	{ margin: 0; padding: 0; border-width: 0; }
h2
	{ font-size: 1em; color: #ffffff; margin: 0 0 1.5em; padding: 0.25em; } 
	
.heading1
	{ font-size: 1.5em; color: #eaeaea; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; font-weight: bold; line-height: 0.9em; text-align: left; margin: 3px 0; padding: 0 0 0 3px; }
.heading2
	{ font-size: 0.8em; color: #000000; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; font-weight: bold; line-height: 1.2em; text-align: left; margin: 0 0 8px; padding: 0 0 0 3px; }
.heading1a { color: #c00; font-size: 1.2em; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; font-weight: bold; line-height: 1.2em; text-align: left; margin: 0 0 8px; padding: 0 0 0 3px; }
.info { font-size: 0.6em; color: #444; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; margin: 0 0 0; padding-left: 3px; }
.subtitle { color: #444; font-size: 1em; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 1.8em; margin-top: 0; margin-right: 0; margin-left: 0; }
.subheading1
	{ font-size: 0.8em; color: #000000; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; font-weight: bold; line-height: 1.1em; text-align: left; margin: 130px 0 12px; padding: 0; }
.topheading
	{ font-size: 0.9em; color: #cccccc; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-align: right; margin: 0; padding: 0; }
#bigimage { width: 540px; height: 325px; }
#imgloadarea { width: 720px; height: 137px; margin: 0; padding: 0; }
#narrativearea { padding: 22px 10px 0 30px; width: 500px; }
.box-footer
	{ font-family: Verdana, sans-serif; font-size: 0.7em; color: #ccc; background-color: #000000; padding: 0.4em; clear: both; border:none; }
.tablethumbnails { margin-top: 22px; }
.box-bottomstrip
	{ height: 7px; background-color: #414141; width: 900px; font-size: 0.1em; background-image: url(../images/box-bottomstrip_bkg1.png); background-repeat: repeat-x; margin: 0 auto; }
/* ====================================================================
COLUMNS LAYOUT
-------------------------------------------------------------------- */
.columns-float
	{
	float: left;
	width: 720px;
	}
.column-one
	{ width: 720px; float: left; border-right: 1px solid black; }
/* CSS HACK: Caio hide from NN4 since NN4's float model is all wrong */
/*/*/
.column-two { margin-left: 540px; }
.column-three { margin-left: 720px; border-left: 1px solid black; }
/* */
.column-one-content, .column-two-content, .column-three-content
	{ padding: 6px 5px 5px 4px; border: none; color: #000000; }
.column-one-content { height: 462px; margin: 0; padding: 0; }
.column-two-content {  }
.content_scroll { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; height: 310px; overflow: auto; margin: 0 0 0 4px; padding: 0; }
.column-three-content { height: 450px; }
/* HORIZONTAL PADDING OUTSIDE COLUMNS */
.column-one-content { margin: 0; padding-right: 0; }
.column-three-content { margin-right: 0px; }
/* VERTICAL PADDING ABOVE COLUMNS */
/*.box-header
	{ margin-bottom: 10px; }*/
.column_padding_after
	{
	height:0px;
	font-size: 1px;
	line-height: 0px;
	clear: both;
	}
/* CSS HACK:  position:relative needed by IE6 otherwise the header and col 2 don't show up on initial rendering - they're there but you have to minimise the window or switch to another app and back to see the full effect. But IE5(pc) doesn't like it. And nor does NN4.
NB. the use of pos:rel has to go way beyond skin-deep - any nested element that needs a background colour appears to require to be be relatively positioned */ 
/*/*/
.box-wrap, .columns-float, .column-one, .column-two, .column-three, h2
	{ position: relative; }


/*====================================================================
TRANSMENU
------------------------------------------------------------------*/

/* this is the clipping region for the menu. it's width and height get set by script, depending on the size of the items table */
.rsDropDown {
	text-align: left;
	position:absolute;
	overflow:hidden;
	left:-1000px;
	top:-1000px;
	}

/* this is the main container for the menu itself. it's width and height get set by script, depending on the size of the items table */
.rsDropDown .content {
	position:absolute;
	}

/* this table comprises all menu items. each TR is one item. It is relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
.rsDropDown .items {
	position:relative;
	width:177px;
	left:0px; top:0px;
	z-index:2;
	}

.rsDropDown.top .items {
	border-top:none;
	}

/* each TR.item is one menu item */
.rsDropDown .item { color:#444; font-size:0.7em; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration:none;
/* this is a hack for mac/ie5, whom incorrectly cascades the border properties of the parent table to each row */
border:none; cursor:pointer; }


/* this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
/* we set the background color in script because ie mac does not use it; that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
.rsDropDown .background {
	position:absolute;
	left:0px; top:0px;
	z-index:1;
	-moz-opacity:0.7;
	filter:alpha(opacity=70);
	opacity:.7;
	}

/* same concept as .background, but this is the sliver of shadow on the right of the menu. It's left, height, and background are set by script. In IE5/mac, it uses a PNG */
.rsDropDown .shadowRight {
	position:absolute;
	z-index:3;
	top:3px; width:2px;
	-moz-opacity:.4;
	filter:alpha(opacity=40);
	}

/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It's top, width, and background are set by script. In IE5/mac, it uses a PNG */
.rsDropDown .shadowBottom {
	position:absolute;
	z-index:1;
	left:3px; height:2px;
	-moz-opacity:.4;
	filter:alpha(opacity=40);
	}

/* this is the class that is used when the mouse is over an item. script sets the row to this class when required. */
.rsDropDown .item.hover {
	background:#fdfdfd;
	color:black;
	}

/* this is either the dingbat that indicates there is a submenu, or a spacer gif in it's place. We give it extra margin to create some space between the text and the dingbat */
.rsDropDown .item {
	margin-left:10px;
	}

#javascriptwrap {
text-align: left;
/* this stops the body text-align: center; from interfering with the menu rendering */
}
/* ====================================================================
SCROLLBAR STYLE
---------------------------------------------------------------*/
body
{
   scrollbar-arrow-color: #969696;
   scrollbar-face-color: #c2c2c2;
   scrollbar-highlight-color: #fff;
   scrollbar-3dlight-color: #444;
   scrollbar-shadow-color: #666666;
   scrollbar-darkshadow-color: #666666;
   scrollbar-track-color: #C2C2C2;
}
/* ====================================================================
THUMBNAILS STYLE
---------------------------------------------------------------*/
.thumbnail { font-size:0.6em; color: #444; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: left; vertical-align: text-top; }
.thumbnail img { position: relative; width: 55px; height: 55px; float: left; margin-right: 5px; border-width: 0; }
/*====================================================================
VERTICAL MENU STYLE
------------------------------------------------------------------*/

#verticalmenu ul
{ line-height: 0.9em; list-style-type: none; text-align: left; }

#verticalmenu ul li a
{ text-align: left; text-decoration: none; color: #666; font-size: 0.6em; font-family: Verdana, Arial, Helvetica, sans-serif; background-image: url(../images/list-off.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: left 6px; text-indent: 0; vertical-align: middle; margin: 0 0 5px; padding: 0 0 0 10px; display: block; }

#verticalmenu ul li a:hover
{ color: black; background-image: url(../images/list-on.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: left 6px; }
#verticalmenu ul li a#current
{ color: #666; background-image: url(../images/list-active.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: left 6px; }
li { height: 1em; }
html>body li {
height: auto;
}

/*====================================================================
TRANSITIONS
------------------------------------------------------------------*/
/* default opacity for IE */
img {
	filter:alpha(opacity=100);
	}

/* duplicate image positioning */
img.idupe {
	position:absolute;
	z-index:30000;
	visibility:hidden;
	}
	
/*====================================================================
SCROLLER
------------------------------------------------------------------*/	
#links {position:absolute; left:8px; top:140px;}
#up {position:absolute; left:162px; top:185px; cursor:pointer;}
#down {position:absolute; left:162px; top:436px; cursor:pointer;}
#cont {position:relative; left:3px; top:20px; width:150px; height:264px; overflow:hidden;}
.txt { color: #444; position:absolute; left:0; top:0; width:150px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.6em; line-height: 1.3em; text-align:left; visibility:hidden; }
/*====================================================================
HORIZONTAL MENU
------------------------------------------------------------------*/
#horizontalmenu { line-height: 0.9em; text-align: center; margin-bottom: 5px; }
#horizontalmenu a { color: #ccc; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; vertical-align: middle; }
#horizontalmenu a:hover { color: #666; }