/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion {
	background: #010099;
	height:100px;
	padding:10px 0 10px 10px;
	width: 977px;
	border:1px solid #39389F;
}

/* accordion header */
#accordion img {
	float:left;
	margin-right:10px;
	cursor:pointer;
	opacity:0.5;
	filter: alpha(opacity=50);
}

/* currently active header */
#accordion img.current {
	cursor:default;
	opacity:1;
	filter: alpha(opacity=100);
}

/* 
	accordion pane. should initially have zero width and display:none.
	the first pane should override these with inline style
*/
#accordion div {
	width:0px;
	float:left;	
	display:none;		
	margin-right:10px;
}

/* content inside a pane should have fixed width */
#accordion div h3 {
	margin:0 0 -10px 0;
	width:190px;
	font-size:15px;	
}
	
#accordion div p {	
	font-size:11px;
	width:190px;
}

#accordion div a {	
	color: #999;
	text-decoration: none;
}

#accordion div a:hover {	
	color: #FFF;
	text-decoration: none;
}

/* menu */
ul.irisStoryMenu {
	list-style-type: none;
	height: 80px;
	width: 990px;
	margin: auto;
}

ul.irisStoryMenu li {
	float: left;
	color: #3EC5DD;
	padding: 0 13px;
	display: block;
	line-height: 80px;
	text-decoration: none;
	font-family: Georgia, "Times New Roman", Times, serif, "MS PGothic", "MS Gothic";
	font-size: 21px;
}

ul.irisStoryMenu a {
	text-decoration: none;
	color: #ADB2B3;
}

ul.irisStoryMenu a:hover {
color: #371C1C;
}

/* menu BLUE */
ul.irisStoryMenu_bl {
	list-style-type: none;
	height: 40px;
	width: 951px;
	margin: auto;
	background-color: #010099;
}

ul.irisStoryMenu_bl li {
	float: left;
	padding: 0 13px;
	display: block;
	line-height: 40px;
	text-decoration: none;
	font-family: Georgia, "Times New Roman", Times, serif, "MS PGothic", "MS Gothic";
	font-size: 18px;
}

ul.irisStoryMenu_bl a {
	text-decoration: none;
	color: #E8E8EA;
}

ul.irisStoryMenu_bl a:hover {
	color: #FFFFFF;
}

ul.irisStoryMenu_bl a.nowhere {
	text-decoration: none;
	color: #3EC5DD;
}

ul.irisStoryMenu_bl a.nowhere:hover {
	color: #FFFFFF;
}

/* tab page */
	body {
		background-color: #212386;
}
	/* get rid of those system borders being generated for A tags */
	a:active {
	  outline:none;
	}
	
	:focus {
	  -moz-outline-style:none;
	}
	

	/* navigation */
	#nav {
		background:#ddd url('../Pic_index/h300_reverse_gn.png');
		border-bottom:1px solid #CCCCCC;
		height:156px;	
		width: 990px;
	}
	
	#nav ul {	
		width:950px;
		margin:0 auto;	
	}
	
	#nav li {	
		border-right:1px solid #ddd;
		float:left;
		padding-left:1px;
		width:120px;
		list-style-type:none;
		text-align:center;
		margin-top:0px;
	}
	
	#nav a {
		color:#FFFFFF;
		display:block;
		padding:17px;
		position:relative;
		word-spacing:-2px;
		font-size:11px;		
		height:122px;
		text-decoration:none;
	}	
	
	#nav a.current {
		background:url(../Pic_index/down_large_gn.png);	
	}
	
	#nav img {
		background-color:#fff;
		border:1px solid #ccc;
		margin:3px 0px 5px 5px;
		padding:4px;		
		display:block;
	}
	
	#nav strong {
		display:block;		
		font-size:13px;
	}
	
	/* panes */
	#panes {
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-bottom: 0 solid #ccc;
	background: #fff url('../Pic_index/h300_reverse_gn.png') 0 0;
	width:988px;	
	height:400px;
	margin-bottom:-20px;
	padding-bottom:20px;
		
		/* must be relative so the individual panes can be absolutely positioned */
			position:relative;
	}
	
	/* crossfading effect needs absolute positioning from the elements */
	#panes div {
		display:none;		
		position:absolute;
		top:20px;
		left:20px;
		font-size:10pt;
		color:#D8D9DA;	
		width:900px; 
	}
	
	.images {
		float:left;
		margin:0 40px 0 0;
		display: block;	
		width: 200px;
		padding: 0;
	}
		
	#panes img {
		float:left;
		margin:40px;		
	}
	
	#panes h1 {
		margin:0 0 -5px 0;
		font-size:22pt;
		font-weight:bold;
		color: #97D2D0;
		padding: 0 0 5px 0;
	}
	
	#panes h2 {
		margin:0 0 -5px 0;
		font-size:14pt;
		font-weight:bold;
		color: #FFFFFF;
		text-decoration: none;
		padding: 0 0 5px 0;
	}
	
	#panes h3 {
		margin:0 0 -5px 0;
		font-size:12pt;
		font-weight: bold;
		color: #DBB6D5;
		padding: 2px 0 5px 0;
	}

	#panes p.more {
		color:#F6E0EA;
		font-weight:bold;
		font-size:12pt;
		font-family: Arial, Helvetica, sans-serif;
		text-decoration: underline;
	}
	
	ul.chatting li {
		list-style-type: none;
		font-weight: bold;
	}
	.note {
		margin:0 0 -5px 0;
		font-size:12pt;
		font-weight: normal;
		color: #9DCECC;
		text-decoration: underline;
		padding: 0 0 5px 0;
	}

	.note:hover {
		margin:0 0 -5px 0;
		font-size:12pt;
		font-weight: normal;
		color: #9DCECC;
		text-decoration: underline;
		padding: 0 0 5px 0;
	}

	.overlay {
		display:none;
		width:500px;
		padding:20px;
		background-color:#ddd;
	}

/* index page */
dt {
	font-family: Arial, Helvetica, sans-serif;
	color: #AD1BAB;
	font-weight: bold;
	font-size: 12pt;
}

dd {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
	font-weight: normal;
	color: #333333;
	padding: 0 0 0 50px;

}

dd a{
	font-size: 12pt;
	text-decoration: none;
	color: #5AAEBA;
	font-family: Arial, Helvetica, sans-serif;
}

dd a:hover{
	text-decoration: underline;
	color: #5AAEBA;
}

table.trainingTableBox {
	border: 0px #E3CEE6 solid;
	border-collapse: separate;
	width: 964px;
	margin: auto;
	background-color: #FFFFFF;
}

table.trainingTableBox td {
	border: 1px #E3CEE6 solid;
}

table.trainingTableBox td.main {
	vertical-align: top;
	padding: 5px;
	}
	
table.trainingTableBox td.main h1 {
	font-size: 14pt;
	font-weight: bold;
	color: #BF64BE;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

table.trainingTableBox td.main p {
	font-size: 11pt;
	font-family: Arial, Helvetica, sans-serif;
}