/*
	This css stylesheet contains all necesary style specifications to 
	create a nice neutral look.
*/

/***************************
	index.htm 
***************************/
#header
{
	height:100px; /* check #options.top and #index_content.top */
	background-color: Silver;
}

#options
{
	top:100px; /* == #header.height */
	height:1.5em;
	background-color: Black;
	
	font-weight: bold;
	font-family:verdana;
}

#search
{
	margin-top: 1.5em; /* == #options.height */
	top: 100px; /* == #header.height */
	bottom: 30px; /* == #footer.height */
	right: 0px;
	
	padding: 10px;
	
	border-left: solid 1px black;
	background-color: White;
}

#filter
{
	margin-top: 1.5em; /* == #options.height */
	top: 100px; /* == #header.height */
	bottom: 30px; /* == #footer.height */
	right: 0px;
	
	padding: 10px;
	
	border-left: solid 1px black;
	background-color: White;
}

#index_content
{
	top:100px; /* == #header.height */
	margin-top: 1.5em; /* == #options.height */
	bottom: 30px; /* == #footer.height */
}

#footer
{
	height:30px;
	bottom:0px;

	background-color: Black;
}

/* #header children */
#title
{
	font-size: xx-large;
	font-weight: bold;
}

/* #options children */
#options_right
{
	float: right;
}	

.options_button
{
	color: White;
	
	text-decoration: none;
}

.options_button:hover
{
	color: Red;
}

.options_button_active
{
	color: #000000;
	background-color: #FFFFFF;
}

/***************************
	Path
***************************/
.path_seperator:after
{
	content: " - ";
}

.path_button
{
	text-decoration: none;
	color: Blue;
}

.path_button:hover
{
	color: Red;
}


/***************************
	menuitem.htm 
***************************/
#menuitem_content
{
	height: 100%;
}

/***************************
	Main Menu
***************************/
.mainMenu
{
	border-right: solid 1px gray;
	padding-left: 10px;
	padding-right: 10px;
	
	overflow: auto;
}

.main_submenu 
{
	margin-left: 19px; /* indent treemenu */
}

.main_toggle
{
	margin-right: -19px;
}

.main_menuitem
{
	/* give menuitems some space, so they become bold without leaving the screen */
	margin-right: 14px;
	margin-left: 19px;
	
	/* font */
	text-decoration: none;
	font-family: Arial;
	font-size: 16px;
	
	/* make sure the menuitem is not put on another line */
	white-space: nowrap;
}

.main_link
{
	color: Blue;
}

.main_link_active
{
	color: Red;
	font-weight: bold;
}

/*filtered nodes*/
.main_node_invisible
{
	display: none;
}

.main_node_grayed
{
	color: gray;
}

/***************************
	Tree Menu
***************************/
.rightMenu
{
	border-left: solid 1px gray;
	padding-left: 10px;
	padding-right: 10px;

	overflow: auto;	
}

.tree_submenu 
{
	margin-left: 19px; /* indent treemenu */
}

.tree_toggle
{
	width: 19px;
	height: 16px;
	margin-right: -19px;
}

.tree_toggle_opened
{
	background-image: url('../images/tree_toggle_opened.gif');
}

.tree_toggle_closed
{
	background-image: url('../images/tree_toggle_closed.gif');
}

.tree_menuitem
{
	/* give menuitems some space, so they become bold without leaving the screen */
	margin-right: 14px;
	margin-left: 19px;
	
	/* font */
	text-decoration: none;
	font-family: Arial;
	font-size: 16px;
	
	/* make sure the menuitem is not put on another line */
	white-space: nowrap;
}

.tree_link
{
	color: Blue;
}

.tree_link_active
{
	color: Red;
	font-weight: bold;
}

/*filtered nodes*/
.tree_node_invisible
{
	display: none;
}

.tree_node_grayed
{
	color: gray;
}

/***************************
	Tab Menu
***************************/
.tabMenu
{
	background-color: Gray;
	width: 100%;
}

.tab
{
	font-size: 16px;
	background-color: #EEEAE7;
	text-decoration: none;
	font-family: Arial;
	font-weight: bold;
}

.tab_link_active
{
	background-color: white;
}

/***************************
	Button Menu
***************************/
.button
{
	padding-left: 19px;
	
	background-position: 0px 5px;
	background-image: url('../images/button.gif');
	background-repeat:no-repeat;
}

/***************************
	Page Menu
***************************/
.page_previous_container
{
	text-align: center;
	width: 33%;
}

.page_select_container
{
	text-align: center;
	width: 33%;
}

.page_next_container
{
	text-align: center;
	width: 33%;
}

.page_link
{
	text-decoration: none;
	color: Maroon;
}

.page_option_active
{
	color: Red;
}

.page_button_disabled
{
	display: none;
}

/* filter options */
.page_option_grayed
{		
	color:Gray;	
}

.page_option_invisible
{
	display:none;
}

/***************************
	Dropdown menu
***************************/
#Dropdown_main
{
	background-color: Silver;
}

.dropdown_submenu
{
	padding-top: 10px;
	padding-bottom: 10px;
	
	background-color: White;
	border: solid 1px gray;
}

.dropdown_button
{
	padding-left: 10px;
	padding-right: 10px;
}

.dropdown_node
{
	color: Blue;
}

.dropdown_node a
{
	color: inherit;
}

.dropdown_link, .dropdown_parent
{
	text-decoration: none;
}

.dropdown_submenu_parent
{
	background-image: url(../images/page_next.gif);
	background-position: right;
	background-repeat:no-repeat;
	
	padding-right: 19px;
}

.dropdown_link_active
{
	color: Red;
}

.dropdown_expanded
{
	background-color: Gray;
	color: white;
}

/***************************
	excursion.htm
***************************/
#excursion_header
{
	background-color: Gray;
	font-size: x-large;
	text-align: center;
	
	height: 1.5em;
}

#excursion_content
{
	top: 1.5em; /* == #excursion_header.height */
	bottom: 0px;
	right: 0px;
	left: 0px;
}

/***************************
	general buttons
***************************/
.close_button
{
	background-image: url('../images/close_button.gif');
	
	width: 11px;
	height: 11px;
}

.menu_header
{
	text-align: right; /* close button should be on the right */
}

/***************************
	filter
***************************/
.filter_property
{
	border: solid 1px gray;
	margin: 5px;
	padding: 5px;
}

#filter_types
{
	border: solid 1px gray;
	margin: 5px;
	padding: 5px;
}

.search_results_invisible, .main_node_invisible, .tab_invisible, 
.page_option_invisible, .tree_node_invisible, .button_invisible,
.paragraph_invisible, .dropdown_node_invisible
{
	display: none;
}

.search_results_grayed, .main_node_grayed, .tab_grayed, 
.page_option_grayed, .tree_node_grayed, .button_grayed, 
.paragraph_grayed, .dropdown_node_grayed
{
	color: Gray;
}

/***************************
	search
***************************/
#search_input
{
	border: solid 1px gray;
	margin: 5px;
	padding: 5px;
}

.search_results_link 
{
	color: Blue;	
	font-weight: bold;
}

.search_results_indent
{
	margin-left: 20px;
}

.search_results_node_grayed
{
	color: Gray;	
}

.search_results_node_invisible
{
	display: none;
}

.search_results_table td
{
	padding-left: 5px;
	padding-right: 5px;
}

/***************************
	Marking menu
***************************/
.mark_option
{
	font-size:small;
}

.mark_option:hover
{
	color: Red;
}

/* mark color */
.textmarkRemark
{
    BACKGROUND-COLOR: #ffff00;
    CURSOR:pointer;
    POSITION: relative
}

.textmarkEmpty
{
    BACKGROUND-COLOR: #90ee90;
    CURSOR:pointer;
    POSITION: relative
}

.embedmarkRemark
{
    BACKGROUND-COLOR: #f4a460;
    CURSOR:pointer;
    POSITION: relative
}

.embedmarkEmpty
{
    BACKGROUND-COLOR: #32cd32;
    CURSOR:pointer;
    POSITION: relative
}

.textmarkClear
{
    BACKGROUND-COLOR: #ffffcc;
    CURSOR: text;
    POSITION: relative
}

.embedmarkClear
{
    BACKGROUND-COLOR: #999999;
    CURSOR: text;
    POSITION: relative
}

.Menu
{
	width:72px;
	height: 54px;
	font-size: 8pt;
	font-family:  Verdana;
	position: absolute;
	visibility: hidden;
	border: #927CBA 1px solid ;
	background-color: #E1DAEB;
	z-index: 1000;
}
/***************************
	document.htm
***************************/
#document_body
{
	font-family:verdana;
}

.excursion
{
	width: 19px;
	height: 16px;
	
	background-image: url('../images/excursion_4.gif');
	background-repeat: no-repeat;
}

.embed_toggle
{
	width: 19px;
	height: 16px;
}

.embed_toggle_opened
{
	background-image: url('../images/embed_opened.gif');
}

.embed_toggle_closed
{
	background-image: url('../images/embed_closed.gif');
}

.embed_content
{
	border: solid 1px gray;
	padding: 5px;
}

.tooltip
{
	color: Navy;
	cursor: pointer;
}

.link
{
	color: Blue;
	text-decoration: none;
	padding-left: 20px;
}

.link:hover
{
	color: Red;
}

.link_internal
{
    background: url("../images/link_internal.gif") no-repeat left center;
}

.link_external
{
    background: url("../images/link_external.gif") no-repeat left center;
}

.link_email
{
    background: url("../images/link_email.gif") no-repeat left center;
}

.link_download
{
    background: url("../images/link_download.gif") no-repeat left center;
}

.includeFrame
{
	width: 100%;
	border-width: 0px;
	border-style: none;
}
/***************************
	interactions
***************************/
.interaction_root
{
	border: solid 1px silver;
	padding: 1em 10px;
	margin: 0.5em 0.5em;
	
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 11px;	
}

.interaction_title
{
	position: absolute;
	top: -0.7em;
	left: 2em;
	background-color: White;
	padding: 0px 5px;
}

.interaction_state
{
	height: 1.5em;
	border-bottom: solid 1px silver;
}

.interaction_score, .interaction_attempts
{
	position: absolute;
	display: inline-block;
	width: 50%;
}

.interaction_attempts
{
	right: 0;
	text-align: right;
}

.interaction_body
{
	padding: 1em 0;
}

.interaction_description, .interaction_question
{
	margin: 0 0 1em 0;
}

.interaction_choices
{
	margin: 0 1em;
	
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 11px;	
}

.interaction_button
{
	margin: 0 5px;
}

.interaction_choice
{
}

.interaction_choice_wrong
{
	background: url(../images/option_wrong.gif) no-repeat center left;
}

.interaction_choice_right
{
	background: url(../images/option_correct.gif) no-repeat center left;
}

.interaction_choice_container
{
	padding-left: 20px;
	width: 21px;
	height: 21px;
}

.interaction_inlineFeedback
{
	color: Blue;
	padding: 0 2em;
}

.interaction_feedback
{
	padding-bottom: 1em;
}
/***************************
	sco.htm
***************************/
#sco_header
{
	height: 1.5em;
	width: 100%;
}

#sco_options
{
	top: 1.5em; /* same as #sco_header.height */
	height: 1.5em;
	width: 100%;

	background-color: Black;
	color: White;
	
	font-weight: bold;
	font-family:verdana;
	
}

.state_item
{
	text-align: center;
	width: 33%;
}

#sco_content
{
	top: 3em;
}