/* Import the help formatting when the help pages are embedded in the
 * application pages
 * - is processed using the substitute mechanism in it11_css.jsp
 *
 */
 
@import url("../help/it11_help.css");

@import url("defaults.css");

@import url("layout.css");

@import url("menu.css");

/* Global inherited definitions */

/* Self defined elements */
.line {
	display: block;
}

.title_ruler {
	overflow: hidden;
	height: 1px;
	width: 100%;
	background-color: #0099D8;
}

/* Label in an overview */
.label {
	float: left;
	clear: left;
	width: 20em;
	font-weight: bold;
}

/* Label in a form */
form .label {
	color: #000000;
	padding-left: 20px;
}

form .label .help {
	color: #484747; /* help text label has lighter color */
	padding-left: 20px;
	font-weight: normal;
}

.value {
	font-weight: normal;
}

/* paragraph of normal text */
.content {
	padding-top: 0px;
	font-weight: normal;
	line-height: 1.3em;
}

/* footnote */
.note {
	font-size: 70%;
}

/* item title of a list */
.item {
	font-weight: bold
}

/* Top bar of the application: logo, title image and various links */
div#top_bar {
	/* becomes containing block for absolute positioned children */
	position: relative;
	width: 100%;
	height: 80px;
	background-color: #0099D8;
	overflow: hidden;
	/* border: 1px solid green; */
}

#minjus_logo {
	position: absolute;
	top: 0px;
	margin: 0px;
	padding: 0px
}

#it11_title_image {
	position: absolute;
	top: 22px;
	left: 167px; /* logo + 30px margin */
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}

#app_navigation_menu {
	font-weight: bold;
	color: #ffffff;
	white-space: nowrap;
	position: absolute;
	right: 10px;
	top: 22px; /* same as it11_title_image */
}

/* Link appearance in top bar */
#top_bar a:link,#top_bar a:visited,#top_bar a:hover {
	color: white;
	text-decoration: none;
}

/* Project menu background, used to cover the left-hand side when the 
 * body is smaller then the viewport 
 */
#project_menu_background {
	position: fixed;
	width: 137px; /* logo width */
	bottom: 0px; /* anchor to the bottom of the viewport */
	top: 81px;
	left: 0px;
	padding: 1px;
	background-color: #e5e5e5;
}

/* Project Menu, left-hand side */
div#project_menu {
	width: 137px; /* logo width */
	height: 100%;
	position: absolute; /* within the body */
	bottom: 0px; /* anchor to the bottom of the body */
	top: 81px; /* logo height + a single pixel edge */
	left: 0px;
	padding: 1px;
	background-color: #e5e5e5;
	/*   border: 1px solid red;  */
}

/* Link appearance in project menu */
#project_menu a:link,#project_menu a:visited,#project_menu a:hover {
	text-decoration: none;
}

.print {
    background-image: url('../images/print.gif');
    background-repeat:no-repeat;
    background-position:0 4px;
    display: inline-block;
    text-align: center;
    padding-left: 10px;
}

/* TODO: links should span button boxes , not just the label text */
	/* General button box layout */
#project_menu div {
	border-style: solid;
	border-top-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 2px;
	padding-bottom: 2px;
}

#project_menu .navigation {
	color: #ffffff;
	background-color: #2bcbf9;
	font-size: 110%;
	font-weight: bold;
	border-color: #9e9c9b;
}

#project_menu .navigation a {
	color: #ffffff
}

#project_menu .module {
	background-color: #e5e5e5;
	border-color: #b2b3b2;
	border-left-width: 1px;
}

#project_menu .module a {
	color: #484747; /* link color */
	font-weight: normal;
}

#project_menu .module.current {
	background-color: #cecfce;
	border-top-width: 1px;
	border-top-color: #e5e5e5;
}

#project_menu .module.current  a:link, #project_menu .module.current a:visited
	{
	color: #484747;
	font-weight: bold;
}

#project_menu #dimension_menu {
	padding: 0px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-color: #8f8f8f;
}

#project_menu .dimension {
	padding-left: 8px;
	background-color: #d8f2f9;
	border-color: #8fb5d5;
}

#project_menu .dimension a:link,#project_menu .dimension a:visited {
	color: #484747; /* link color */
	font-weight: normal;
	white-space: normal;
}

#project_menu .dimension.current a:link,#project_menu .dimension.current a:visited 
{
	color: #f9ae2b; /* link color */
	font-weight: bold;
}

#project_menu .dimension.visited a:link,#project_menu .dimension.visited a:visited
{
	color: #ac4c6f; /* link color */
	font-weight: bold;
}

/* Login status, embedded in the project menu, make sure to overrule
 * some settings of the project menu div
 */
div#login_status {
	font-size: 90%;
	background-color: #b2b3b2;
	color: #ffffff;
	border-style: solid;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-width: 1px;
	border-color: #8f8f8f;
	margin: 4px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 120px;
	overflow: hidden;
}

div#login_status div {
	border-bottom-width: 0px;
}

div#login_status .label {
	width: auto;
	text-align: left;
	float: none;
	clear: none;
	font-weight: bold;
}

div#login_status .value {
	height: auto;
	text-align: left;
	float: none;
	clear: none;
}

/* Project details page */
#project_details #error {
	margin: 0px;
	padding: 0px;
}

#project_details .spacer { /*    border: solid 1px green; */
	
}

#project_details div.question_ruler {
	position: relative;
	height: 5px;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

#project_details div.question_ruler div.line {
	position: absolute;
	height: 1px;
	top: 2px;
	background-color: #dde0dd;
}

#project_details .input {
	width: 300px;
}

/* select's are displayed differently ? */
#project_details .input_select {
	width: 305px;
	overflow: scroll;
}

#project_details form #submit {
	padding-left: 20px; /* align with form labels */
}

#project_details .title { /* TODO: 
        * width should really be "auto", but this causes "ghost images"
        * in explorer. Setting it to 100% does not take the padding of 
        * the parent div into account.
        */
	width: 97%;
	/* border: solid 1px red; */
}

/* Login page */
#login form .label {
	padding-left: 0px;
	width: 150px;
}

#login .input .large {
	width: 200px;
}

#login .input .small {
	width: 70px;
}

#login form .submit {
	margin-left: 150px; /* line up the arrow */
}

/* Login introduction text */
#login #intro p {
	margin-top: 0px;
	margin-bottom: 0px
}

#login #intro h1 {
	margin-top: 5px;
	margin-bottom: 0px
}

/* Subscription page */
#subscription form .label {
	padding-left: 0px;
	width: 200px;
}

#subscription .input .large {
	width: 200px;
}

#subscription .input .small {
	width: 70px;
}

#subscription div.question_ruler {
	position: relative;
	height: 5px;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

#subscription div.question_ruler div.line {
	position: absolute;
	height: 1px;
	top: 2px;
	background-color: #dde0dd;
}

/* Project management page */
#project_management select {
	width: 360px;
}

#project_management .spacer {
	height: 10px;
}

/* Form layout */
form {
	position: relative;
}  /* establish positioning context */ /*
 * User Interface
 */ /* Link (or submit) in the content of a page, usually with image */

a, .link {
	font-weight: bold;
	color: #008DCB; /* link color */
}

.link {
	cursor: pointer;
}  /* is not always an <a>, so force the cursor */
	/* error message output */
.error {
	color: red;
	font-weight: bold
}

/* warning output */
.warning {
	color: black;
	font-weight: bold
}


/* most common ruler in a page, with various spacings */
#page .question_ruler {
	position: relative;
	height: 20px;
	overflow: hidden;
	/* background-color: #ffffff; */
	clear: both;
}

/* Just above/below a "slider" answer */
#page .question_ruler .line_answer {
	position: relative;
	height: 10px;
	overflow: hidden;
	/* background-color: #ffffff; */
}

#page .question_ruler .line {
	height: 1px;
	padding: 0px;
	overflow: hidden;
	background-color: #dde0dd;
	position: absolute;
	left: 0px;
	top: 9px;
	width: 100%;
}

#page .question_ruler .line_answer .bottom .line {
	height: 1px;
	padding: 0px;
	overflow: hidden;
	background-color: #dde0dd;
	position: absolute;
	top: 0px;
	width: 100%;
}

#page_title {
	position: relative; /* establish positioning context */
	width: 100%;
	/*            height: 40px;  */ /* 50 px - #page top padding */
	overflow: hidden;
	font-weight: bold;
	color: #0099D8;
	/*  border: solid 1px red; */
}

#page_title .text {
	font-size: 140%;
}

#page_title a {
	float: right;
	/*            right: 1px; */
	bottom: 3px; /* above the ruler */
	color: #008DCB; /* link color */
}

#page_title .title_ruler {
	margin-top: 2px;
	/*            position: absolute;
            bottom: 1px;
            height: 1px;
  
            width: 100%; */
	background-color: #0099D8;
}

#project_info .spacer .top {
	height: 5px;
}

#project_info .spacer .bottom {
	height: 10px;
}

#dimension_info {
	position: relative
}

.spacer .subdimension_info {
	height: 15px
}  /* don't include the ruler height */
.spacer .subdimension_info .first {
	height: 25px
}

.spacer .dimension_epilog .first {
	height: 5px;
}

.spacer .dimension_epilog .last {
	height: 25px;
}

/* Generic light grey title bar */
.title {
	clear: left;
	/*     width: auto; */
	height: auto;
	color: #ffffff;
	background-color: #cecfce;
	font-size: 140%;
	font-weight: bold;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 10px;
	padding-right: 10px;
}

/* Also used in report formatting */
.subtitle {
	clear: left;
	color: #0099D8;
	font-size: 120%;
	font-weight: bold;
}

#dimension_info .spacer {
	clear: left;
	height: 5px;
}

#dimension_info a {
	float: right;
	margin-left: 10px; /* prevent the subtitle from running into
            help */
}

.subdimension_info {
	color: #0099D8;
	font-size: 110%;
	font-weight: bold;
}

.subdimension_info .spacer {
	clear: left;
	height: 25px;
}

.spacer {
	clear: left;
	height: 20px;
}


#dimension_navigation_bar {
   padding: 0;
   list-style: none;
   padding-right: 20px;
   clear: both;
}

#dimension_navigation_bar li {
   float: right;
   position: relative;
}

#dimension_navigation_bar li {
   font-weight: bold;
}

#dimension_navigation_bar li a {
   padding: 7px 15px 8px;
   display: block;
   color: #fff;
   border: 0 none;
   background: #000000;
}

#dimension_navigation_bar a:hover {
   background: #4d4d4d;
}

#dimension_navigation_bar .actief a,
#dimension_navigation_bar .actief a:hover {
   background: #efefef;
   color: #000;
}


/* Table layout */
thead td {
	font-weight: bold;
	color: #0099D8;
	text-align: center;
}

tbody td.center {
	text-align: center;
}

/* Module / dimension layout */ /* Question div */
.question {
	position: relative;
	width: auto;
	/* border: solid 1px red; */
}

.question_text_number {
	/* space for absolutely positioned multiple choice/number answers */
	margin-right: 150px;
}

/* label in front of the question text */
.question .question_number {
	font-size: 110%;
}

.question .question_text {
	font-size: 110%;
}

/* mark the replaced text in the question text */
.question .question_text .replaced {
	font-weight: bold;
	}

/* labels on sliders etc. */
.question .label {
	color: #000000;
	font-weight: normal;
	font-style: italic;
	vertical-align: middle;
}

/*
    Added Tedla
*/

#page div.report, #page div.wipe {
    margin:5px 0;
}

#page .text_fragment {
    margin-top:10px;
}

#page .text_fragment table, #page .text_fragment th, #page .text_fragment td {
   border:1px solid black;
   padding:2px;
}

/* large / medium input fields are textareas */
.question .multiple_choice_text textarea.large, .question .simple_text textarea.large {
    width: 100%;
    height: 150px;
}

.question .multiple_choice_text textarea.medium, .question .simple_text textarea.medium {
    width: 50%;
    height: 75px;
}

.question .multiple_choice_text textarea.small, .question .simple_text textarea.small {
    width: 20%;
    height: 20px;
}

.question .multiple_choice_text input.small, .question .simple_text input.small {
    width: 20%;
}

.inlinePopUp {
    background-color:#CECFCE;
    color:black;
    font-weight:normal;
    height:auto;
    border:1px solid black;
    padding:5px;
}

.inlinePopUp strong {
   display:block;
   font-size:110%;
   font-weight:bold;
   margin-bottom:5px;
}

.closePopUpButton {
    width:10px;
    background-color:black;
    color:white;
    cursor:pointer;
    cursor:hand;
    text-align:center;
    position:absolute;
    right:10px; 
}
/* different answer types  */
	/* These two types are positioned at the right in the same line as the 
 * question
 */
.question .multiple_choice,.question .simple_number {
	float: right;
}

.question .label_slider {
	width: 80px;
	text-align: left;
	color: #000000
}

.question .label_slider_middle {
	text-align: center;
	color: #000000
}

.question .label_input {
	text-align: center;
	color: #000000;
}

.question .slider table {
	border-collapse: collapse;
	padding: 0px;
	margin-left: 10px;
	margin-right: 10px;
}

.question .slider table .input {
	text-align: center;
	/* border: 1px solid green; */
}

.question .slider table input {
	color: #000000;
	width: 13px;
	height: 13px;
}

.question .simple_number input {
	color: #000000;
	width: 3em;
	font-size: 110%;
}

.question .multiple_choice input {
	color: #000000;
	width: 10px;
	height: 10px;
}

.question .simple_number {
	padding-left: 2em
}

/* not applicable cell */
.question .not_applicable {
	vertical-align: middle;
}

/* Dependent questions layout */
.question .dependencies .question_answer {
	color: #0099D8;
	font-weight: bold;
	font-size: 110%;
}

/* answer block, placeholder for ajax */
.answer {
	margin: 0px;
	padding: 0px;
	}

/* error output */
.annotation .input {
	text-align: center
}

/* annotation window popup (300x300 px */
.popup_page {
	margin: 5px;
	background-color: #ffffff;
	background-image: none;
}

.popup_page #comment_area {
	width: 280px;
	height: 180px
}

/* Report formatting, overrides certain settings for question etc. */
#report .detail {
	clear: left
}

#report .subtitle {
	font-weight: bold;
	font-size: 110%;
	color: #0099D8;
	clear: left;
}

#report .question_and_answer {
	clear: left;
	position: relative;
	overflow: hidden;
}

#report .question {
	float: left;
	width: 450px;
	margin-right: 60px;
}

/* Same as dependent questions in question list */
#report .answer {
	color: #0099D8;
	font-weight: bold;
	font-size: 110%;
	padding-left: 510px;  /* 450 + 60 of .question */
}

#report .standarddeviation {
	color: #0099D8;
	font-weight: normal;
	font-size: 100%;
}

#report .comment {
	clear: left;
	float: left;
	font-weight: bold
}

#report .chart {
	float: none;
	clear: left;
	margin-right: 1em;
}

#report .legend {
	position: relative
}  /* establish positioning context */
#report .legend .value {
	float: left;
	text-align: right;
	width: 3em
}

#report .legend .label {
	padding-left: 3px;
	clear: none;
	float: none;
	font-weight: normal;
}

#report .question_ruler {
	height: 16px;
	width: 100%;
	clear: left;
	padding: 0px;
	position: relative;
}

#report .question_ruler .line {
	padding: 0px;
	top: 8px;
	overflow: hidden;
	background-color: #dde0dd;
	height: 1px;
	width: 100%;
}

/* Project management, delete confirmation */
.alert_message {
	font-weight: bold;
	color: red
}

.project_name {
	font-weight: bold
}

/* User Management, table layout */
#user_management {
	border-collapse: collapse;
}

#user_management td {
	padding-left: 1em;
	padding-right: 1em;
}

#user_management .odd {
	background-color: #dedede
}

#user_management .label {
	width: 250px
}

#user_details form .label {
	padding-left: 0px;
	width: 150px;
}

#user_details .input .large {
	width: 200px;
}

#user_details .input .small {
	width: 70px;
}

#about .ruler {
	margin-top: 10px;
	margin-bottom: 10px;
	height: 1px;
	overflow: hidden;
	background-color: #0099D8;
}

.filter_modalities {
	border-collapse: collapse;  /* columns don't line up with 'separate' ? */
    background-color: white;
}

.filter_modalities .group {
	height: 100%;
	padding: 3px;
	vertical-align: top;
	border: 1px solid gray;
}

.filter_modalities .group_header {
	font-weight: bold;
	font-size: 120%;
}
.filter_modalities {
    width: 708px;
}
 .group_table {
/*  height: 100%; */
    width: 100%;
}

.filter_modalities .group_table tr {
	vertical-align: top
}

.filter_modalities .column_title {
	white-space: nowrap;
	font-weight: bold;
}

.help_shield {

    background-image: url('../images/arrow.gif');
    /*background-image: url('../images/help_16_q.png');*/
    /*width: 24px;*/
    height: 24px;
    background-repeat:no-repeat;
    background-position:0 4px;
    display: inline-block;
    text-align: center;
    padding-left: 8px;
}

.filter_modalities .column_help {
	background-color: #fffebe;
	color: black;
	text-align: left;
}

.filter_modalities .help_header {
	font-weight: bold;
}

.filter_modalities .help_body {
	font-weight: normal;
}

.filter_modalities .group_table .filter_option_box_row {
	height: 100%; 
    vertical-align: top;
}

.filter_modalities .filter_option_box {
	border-width: 0px;
	vertical-align: top;
	font-weight: normal;
	white-space: nowrap;
}

.filter_command_row {
}

/* filter options use a table layout, reduce the margins for this */
.filter_modalities .filter_option_box table {
	border-collapse: collapse;
}

.filter_modalities .filter_option_box form {
	position: static;
	/* otherwise ie doesn't place the controls inside box */
}

.filter_modalities .column_sub_header {
	text-align: center;
	font-weight: bold;
}

.filter_modalities .filter_option_box table td {
	margin: 0px;
}

.filter_modalities .filter_link_box {
	vertical-align: middle;
}

.nof_modalities {
	font-size: 120%;
	font-weight: bold;
}

.report_modalities {
	width: 100%;
    background-color: white;
}

.report_modalities .large {
	width: 20em
}

.report_modalities .small {
	width: 5em
}

.report_modalities .cell {
	overflow: hidden
}

.report_modalities .cell {
	vertical-align: middle
}

.report_modalities .cell.first {
	font-weight: bold;
	padding-left: 1.5em;
	text-indent: -1.5em;
	overflow: visible;
}

.report_modalities .cell.center {
	text-align: center
}

.report_modalities .cell a {
	white-space: normal
}  /* override global link setting */
.report_modalities .row.even {
	background-color: #e0f0df
}

/* Interactive voting settings */

.question.active {
	margin: 1em; 
	padding: 1em;
	border: 2px solid gray;
	background-color: #d8f2f9;
}

.expert_mode_question { padding: 5px; }
.expert_mode_answer_report { padding: 5px; }

.vote_choices { padding: 15px; }
.vote_choice_text { text-align: right; width: 15em; }
.vote_choice_key { font-weight: bold }

.expert_mode_buttons { }
#nl_keypad_nof_keypads { font-weight: bold }


.intermediate_vote_count { margin-left: 2em }