/*
 * DESCRIPTION
 * CSS styles used by the lay-out of the customcomponents ATVO
 * Alter these styles to let the component have a custom look.
 *
 * CONTENT
 *	   - Colors & fonts
 *     - Button styles
 *	   - Layout styles
 *	   - Overview
 *	   - Definition
 *	   - Result styles
 *	   - Tooltip
 *	   - Lightview
 */

/* Colors & fonts 
-------------------------------------------------------------------------------------------------*/


/* Button styles 
-------------------------------------------------------------------------------------------------*/

	.button__left,
	.button__left_over,
	.button__left_down,
	.button__left_disabled,
	.button__left_active {
		height: 17px;
		display: inline;
		border: 1px solid #e6f5fb;
		background: #FFF;
		font-size: 0;
		float: left;
		line-height: 17px;
		padding: 1px;
		margin: 2px 0;
		-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
	}
	
		.button__left .button__right,
		.button__left_over .button__right,
		.button__left_down .button__right,
		.button__left_disabled .button__right,
		.button__left_active .button__right {
			height: 17px;
			display: inline;
			font: normal 11px/14px Tahoma,Verdana,Arial,sans-serif;
			color: #333;
			padding: 0 8px;
			cursor: default;
			background: url(/fs/ATVO3Portlets/images/button_bg.gif) repeat-x bottom;
			float: left;
			clear: both;
		}
		
	.button__left_over {
		background: #2E9F9D;
	}
	
	.button__left_disabled {
		border: none;
	}
	
	.button__left_active {
		background: #AECAF2;
	}
	
		.button__left_down .button__right {
			background: url(/fs/ATVO3Portlets/images/button_bg_pressed.gif) repeat-x bottom;
		}
		
		.button__left_disabled .button__right {
			background: #EDEDED;
		}
	
/* Layout styles 
-------------------------------------------------------------------------------------------------*/
	
	form {
		padding: 0;
		margin: 0;
	}
	
	.small_text {
		font-size: 10px;
	}
	
	.italic_text {
		font-style: italic;
	}
	
	.bold_text {
		font-weight: bold;
	}
	
	.layout__wrapper {
		display: block;
		overflow: hidden;
	}
	
	.normal_whitespace {
		white-space: normal;
	}
	
	.nowrap_whitespace {
		white-space: nowrap;
	}
	
	.zero_height {
		height: 0;
	}
	
		.layout__header {
			
			
			border: 1px solid #e6f5fb;
			background: #f4fafd;
			display: block;
			margin: 0;
			overflow:hidden;
			padding: 0 4px 4px 4px;
			_width: 100%;
			-moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
		}
		
			.layout__header_print {
				display: inline-block;
				background: url(/fs/ATVO3Portlets/images/layout_print.gif) no-repeat left 50%;
				padding-left: 15px;
				padding-right: 5px;
				margin-top: 5px;
				float: right;
			}
				
				.layout__wrapper .layout__header_print a,
				.layout__wrapper .layout__header_print a:visited,
				.layout__wrapper .layout__header_print a:hover {
					font-size: 10px;
					text-decoration: none;
					color: #666;
					line-height: 18px;
				}
		
			.layout__titletext {
				font-size: 16px;
				line-height: 20px;
				display: block;
				height: 20px;
				padding: 4px;
			}
			
			.layout__summary {
				display: block;
				padding: 3px 0;
				float: left;
				clear: both;
			}
			
			.layout__summary_item {
				display: block;
				padding: 2px 0;
			}
			
				.layout__wrapper .layout__summary_item label {
					display: inline;
					width: 150px;
				}
			
			.layout__header_table {
			}
				
				.layout__wrapper .layout__header_table td {
					padding: 0 2px;
					white-space: nowrap;	
				}
				
					.layout__wrapper .layout__header_table td.first {
						padding-left: 0;	
					}
					
					.layout__wrapper .layout__header_table td.last {
						padding-right: 0;
						text-align: right;
					}
				
				.layout__header_table td input.text,
				.layout__header_table td .input {
					width: 70px;
				}
			
			.layout__wrapper .layout__header_navigation {
				padding: 0;
				list-style: none;
				display: block;
				margin: 0;
				width: 100%;
			}
		
				.layout__wrapper .layout__header_navigation li {
					float: left;
					line-height: 18px;
					margin-left: 4px;
				}
			
			.layout__seperator {
				height: 1px;
				line-height: 1px;
				background: #CCC;
				margin: 4px 0;
				clear: both;
				font-size: 1px;
				width: 100%;
				display: block;
				overflow: hidden;
			}
			
			.layout__header_msg {
				display: block;
				float: left;
				clear: both;
				white-space: nowrap;
				margin: 5px 0;
			}
			
		.layout__body {
			display: block;
			overflow:scroll;
width: 660px;
		}
		
			.layout__body h3 {
				font-size: 14px;
				font-weight: normal;
			}
		
		.layout__footer {
			background: #F2F2F2 url("/fs/ATVO3Portlets/images/tableCloseArrowUp.png") 50% no-repeat;
			
			/* BORDER COLOR AANGEPAST */
			border: 1px solid #e6f5fb;
			display: block;
			text-align: right;
			white-space: nowrap;
			overflow:hidden;
			clear: both;
			-moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
			cursor:pointer;
		}
			.layout__footer.closed {
				background-image: url("/fs/ATVO3Portlets/images/tableCloseArrowDown.png");
			}
		
			.layout__footer span {
				display: block; 
				padding: 4px;
			}
	
	.layout__default_msg {
		padding: 6px;
	}
	
	.layout__succes_msg {
		padding: 6px;
		color: #3AB137;
		font-weight: bold;
	}
	
	.eduweb_input,
	.eduweb_input_long {
		height: 19px;
		border: 1px solid #C2C2C0;
		line-height: 16px;
		font-size: 11px;
		margin: 4px 4px 4px 0;
		-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
		padding: 2px 4px;
	}
	
	.eduweb_input_long {
		width: 200px;
	}
	
	.eduweb_select {
	    font-size: 11px;
	    margin-right: 4px;
	}
		

/* Overview 
-------------------------------------------------------------------------------------------------*/
	
	.overview__header {
		padding: 0;
		margin: 0;
		list-style: none;
		display: block;
		height: 18px;
		
		
		border: 0px solid #e6f5fb;
		background: #25aae1;
		color: #fff;
		margin-top: 5px;
		overflow: hidden;
	}
	
		.overview__header li {
			display: inline;
			float: left;
			padding: 2px 5px;
			border-right: 1px solid #2E9F9D;
		}
		
		.overview__header li.last {
			border: none;		
		}
		
			.overview__indicator,
			.overview__indicator_collapsed,
			.overview__indicator_expanded {
				width: 9px;
				height: 9px;
				display: inline;
				margin-right: 5px;
				font-size: 9px;
			}
		
			.overview__indicator_collapsed {
				background: url('/fs/ATVO3Portlets/images/plus.gif') no-repeat;
				background-position: 2px left;
			}
			
			.overview__indicator_expanded {
				background: url('/fs/ATVO3Portlets/images/minus.gif') no-repeat;
				background-position: 2px left;
			}
		
		.overview__container {
			display: block;
			width: 100%;
		}
		
			.overview__container_col {
				padding: 8px;
			}
			
				.overview__container_col .studyIcon,
				.overview__container_col .studyIcon_active {
					width: 16px;
					height: 16px;
					display: block;
					cursor: pointer;
					background: url('/fs/ATVO3Portlets/images/show_studies.gif') no-repeat;
				}
				
				.overview__container_col .studyIcon_active {
					background: url('/fs/ATVO3Portlets/images/hide_studies.gif') no-repeat;
				}
			
			.overview__table {
				display: block;
				width: 100%;
			}
			
				.overview__table thead td {
					font-weight: bold;
					padding: 2px 5px;
				}
				
				.overview__table tbody td {
					padding: 0 5px;
					vertical-align: top;
				}
				
		.overview__records {
			list-style: none;
			margin: 0;
			padding: 4px;
		}
		
			.overview__records li {
				padding: 4px 6px;
			}
			
				.overview__records li b {
					width: 25px;
				}
		
				.overview__records li table {
					margin: 4px 10px;
				}
		
					.overview__records li table td {
						padding: 4px;
					}		
	
		.homework__record {
			padding: 6px;
		}
			
			.homework__record span {
				line-height: 18px;
			}
			
			.homework__record .small_caption {
				font-size: 90%; 
				opacity: .5; 
				filter: alpha(opacity=50); 
				height: 16px;
				line-height: 16px;
			}

/* Definition 
-------------------------------------------------------------------------------------------------*/

	.layout__definitionlist {
		margin: 0;
		padding: 0;
		display: block;
		float: left;
		width: 100%;
	}
	
	.layout__two_columns {
		width: 260px;
		float: left;
		margin: 0 4px;
	}
	
		.layout__definitionlist dt {
			margin: 0;
			display: block;
			line-height: 18px;
			height: 20px;
			
			
			border: 0px solid #e6f5fb;
			background: #25aae1;
			clear: both;
			padding: 0 5px;
			margin: 5px 0; 
			overflow: hidden;
			color: #fff;
			-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
		}
		
		.layout__definitionlist dd {
			padding: 0;
			margin: 0;
			display: block;
			line-height: 16px;
			clear: both;
			overflow: hidden;
			padding: 5px;
		}
		
			.layout__definitionlist dd img,
			.layout__definitionlist dd address,
			.layout__definitionlist dd .communication {
				float: left;
			}
			
			.layout__definitionlist dd img {
				margin-right: 12px;
				margin-bottom: 12px;
				-moz-box-shadow: 0 0 10px 0 #969696; -webkit-box-shadow: 0 0 10px 0 #969696; box-shadow: 0 0 10px 0 #969696;
			}
				.layout__definitionlist dd img[height='70'] {
					-moz-box-shadow: 0 0 6px 0 #969696; -webkit-box-shadow: 0 0 6px 0 #969696; box-shadow: 0 0 6px 0 #969696;
				}
			
			.layout__definitionlist dd address {
				font-style: normal;
				width: 195px;
			}
			
			.layout__definitionlist dd p {
				display: block;
				clear: both;
			}
			
			.layout__definitionlist dd .communication {
				padding: 0;
				margin: 0;
				list-style: none;
				width: 195px;
			}
			
				.layout__definitionlist dd .communication li {
					padding: 0;
					margin: 0;
				}
	.layout__tiles div.tile {
		display: -moz-inline-stack;
        display: inline-block;
		margin-right: 3px;
		width: 325px; 
		vertical-align: top;
		zoom: 1;
        *display: inline;
	}

/* Result styles 
-------------------------------------------------------------------------------------------------*/

	.result__subjectlabels {
		width: 70px;
		white-space: nowrap;
		display: block;
		float: left;
		margin-top: 10px;
	}
	
		.result__subjectlabels ul {
			padding: 0;
			margin: 0;
			list-style: none;
		}
		
			.result__subjectlabels ul li {
				
				border-bottom: 1px solid #CCC;
				line-height: 21px;
				width: 70px;
				padding-left: 3px;
				cursor: default;
			}
			
	.result__header,
	.result__subjectlabels ul li.result__header,
	.result__header_left,
	.result__subjectlabels ul li.result__header_left,
	.result__header_empty,
	.result__subjectlabels ul li.result__header_empty {
		margin: 0;
		height: 18px;
		line-height:18px;
		border: 1px solid #e6f5fb;
		border-width: 1px 0;
		background: #25aae1;
		color: #fff;
		padding: 2px 5px;
	}

		.result__subjectlabels ul li.result__header_left {
			border-width: 1px 0 1px 1px;
			height: 18px;
			line-height: 18px;
			padding: 0;
			width: 70px;
			-moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0;
		}
		
		.result__subjectlabels ul li.result__header_empty {
			border-width: 1px 0 1px 1px;
			border-color: #FFF;
			background: #FFF;
			height: 16px;
			line-height: 16px;
			padding: 0;
			width: 70px;
		}
	
	
	.result__wrapper {
		width: 100%;
	}
			
	.result__overview {
		overflow-x: auto;
	}
	
		.result__overview {
			
		}
		
		.result__table {
			margin-top:10px;
		}
		
		.result__table thead tr td {
			margin: 0;
			height: 18px;
			line-height: 18px;
			
			
			border: 1px solid #e6f5fb;
			border-width: 1px 0;
			background: #25aae1;
			color: #fff;
			padding: 0 5px;
			cursor: default;
			text-align: center;
			white-space: nowrap;
		}
		
		.result__table thead tr td.nohead {
			border: 1px solid #FFF;
			background: #FFF;
			text-align: left;
			font-weight: bold;
		}
		
		.result__table thead tr td.last {
			border-right-width: 1px;
			width: 100%;
			text-align: right;
			padding-right: 3px;
		}
		
		.result__table tbody tr td {
			height: 22px;
			border-bottom: 1px solid #CCC;
			border-left: 1px solid #F2F2F2;
			line-height: 20px;
			white-space: nowrap;
			overflow: visible;
			-moz-nowrap: nowrap;
		}
			.result__table>tbody>tr>td>table>tbody>tr>td {
				padding: 0 5px;
			}
		
			.result__table tbody tr td a.result__figure,
			.result__table tbody tr td a.result__figure:visited {
				border: 1px solid #EDEDED;
				margin: 0 1px;
				padding: 1px 2px;
				line-height: 20px;
				color: #333;
				text-decoration: none;
				cursor: default;
			}
		
			.result__table tbody tr td a.result__figure:hover {
				color: #333;
				text-decoration: none;
				border: 1px solid #333;
			}
			
		.result__overview .scroll_spacer {
			display: block;
			height: 20px;
			float: left;
		}
		
		.result__overview .period__end span {
			border-bottom: 1px dotted #333;
			border-top: 1px solid #FFF;
			line-height: 11px;
			margin: 0 1px;
			padding: 1px 2px;
			color: #2E9F9D;
			cursor: default;
		}
		
		.result__overview .all__end {
			border-left-width: 2px;
			border-color: #CCC;
		}
			.result__overview .all__end span {
				font-weight: bold;
				cursor: default;
			}
			
		.result___periode { margin-top:10px; }
		
		.periodeWrapper {
			 white-space:nowrap; 
			 overflow-x:auto; 
			 vertical-align: top;
		}
		
			.periodeDiv { 
				margin: 10px 0px 10px 0px;
				*margin: 10px 0px 20px 3px;
				display:inline-block; 
				zoom:1;
				*display:inline;
				
				
				border: 1px solid #e6f5fb; 
				border-bottom:2px solid transparent; 
				vertical-align:top;
				-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
				position: relative;
			}
				.periodeDiv .Toetssoort { 
					display:inline-block; 
					zoom:1;
					*display:inline;
				}
				#result__overview .periodeDivHeader { 
					padding:0 5px; 
					text-align:center; 
					cursor:pointer; 
				}
		
				div.periodeDiv_open div.Toetssoort_Berekendrapportcijfer, 
				div.periodeDiv_open div.Toetssoort_Rapportcijfer,
				div.periodeDiv_open div.Results { 
					display:inline-block; 
					zoom:1;
					*display:inline;
				}
				
				.Toetssoort_Periodegemiddelde table tbody tr td, 
				.Toetssoort_Rapportcijfer table tbody tr td,
				.Toetssoort_BerekendRapportcijfer table tbody tr td	{ 
					background-color: #f5f5f5; 
					font-weight:bold;
				}
				
				div.periodeDiv_open div.cijferWrapper>div {
					margin-left: -0.3em;
					*margin-left:0;
					vertical-align:top;
				}
				div.periodeDiv_open div.cijferWrapper>div:first-child {
					margin-left:0;
				}
				
				div.periodeDiv_open table.result__table thead tr td { 
					background-color: #0e76bc; 
				}
				div.periodeDiv_open { 
					border:2px solid #CCC; 
					margin-top: 9px; 
				}
				
				div.periodeDiv_closed div.Toetssoort_Berekendrapportcijfer, 
				div.periodeDiv_closed div.Toetssoort_Rapportcijfer,
				div.periodeDiv_closed div.Results { 
					display:none; 
				}
				
				div.periodeDiv_closed div.empty { 
					display:inline-block; 
					zoom:1;
					*display:inline;
				}
				div.periodeDiv_open div.empty { 
					display:none; 
				}
				div.cijferLoader {
					background-color: white;
					opacity: 0.5;
					height: 100%;
					width: 100%;
					position: absolute;
					top: 0;
					text-align: center;
					vertical-align: middle;
				}
		
		.result__table thead tr.toggler td { 
			padding:0 15px; 
			height:18px; 
			line-height: 18px; 
		}
		
		.boxWrapper {
			width: 100%;
			
				display: -webkit-box;
				display: -moz-box; 
				display: box; 
				-webkit-box-orient: horizontal;
				-moz-box-orient: horizontal;
				box-orient: horizontal;
			
			background: url(/fs/ATVO3Portlets/images/pattern.gif) top left repeat;
		}
		.boxWrapper > div { 
			border-right: 1px solid #ccc; 
			padding: 0 5px;
			position: relative;
		}
		
		.boxWrapper > .uren { width: 30px; padding: 46px 0; }
		
			.boxWrapper > .day {
				-webkit-box-flex:1;
				-moz-box-flex:1;
			}
		
		.boxWrapper > .day.current { background: url(/fs/ATVO3Portlets/images/pattern_active.gif) top left repeat; }
		.boxWrapper > .uren > ul { padding: 0; margin: 0; }
		.boxWrapper > .uren > ul > li { list-style-type:none; display:block; height: 46px; line-height: 46px; text-align: center; }
		
		.boxWrapper > .day > .uur, .boxWrapper > .day > .dagTitle { position: absolute; left: 5px; right: 5px; height: 38px; overflow:hidden; cursor: pointer; }
		.boxWrapper > .day > .dagTitle { text-align: center; padding: 4px; }
		.boxWrapper > .day > .uur { overflow: hidden; height: 44px; border: 1px solid #e6f5fb; background: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
		.boxWrapper > .day > .uur > div { padding: 0 5px; line-height: 17px; position: relative; }
		.boxWrapper > .day > .uur > .iconContainer { position: absolute; right: 3px; bottom: 3px; }
		.boxWrapper > .day > .uur > .iconContainer > img { width: 16px; height: 16px; float:left; margin-left:2px; }
		.boxWrapper > .day > .uur > .title { height: 20px; overflow: hidden; background: #2E9F9D; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; }
		.boxWrapper > .day > .uur > .huiswerk { display:none; }
		.boxWrapper > .day:last-child { border-right-width: 0; }
		


/* Tooltip styles 
-------------------------------------------------------------------------------------------------*/



	.jTooltip .effectWrapper,
	.jTooltip .tooltip { 
		position: relative; 
	}
	
	.jTooltip .toolbar,
	.jTooltip .toolbar .title {
		position: relative;
		display: block;
	}
	
	.jTooltip .content { 
		clear: both; 
	}
	
		.jTooltip .toolbar a.close {
			position: relative;
			text-decoration: none;
			float: right;
			width: 15px;
			height: 15px;
			background: transparent;
			display: block;
			line-height: 0px;
			font-size: 0px;
			border: 0;
		}
		
		.jTooltip .toolbar a.close:hover { 
			background: transparent; 
		}
		
		.iframeShim { 
			position: absolute;
			border: 0;
			margin: 0;	
		    padding: 0;
		    background: none;
		}


	.jTooltip.default { 
		
		border: 1px solid #e6f5fb;
		background-color: #25aae1;
		color: #fff;
		font-size: .8em;
		line-height: 14px;
		-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
		z-index: 50;
	}
		.jTooltip.default table tr td {
			color: #fff;
			font-size: 10px;
			line-height: 12px;
			padding:1px;
			vertical-align:top;
		}
		
			.jTooltip.default div.deelresultWrapper {
				margin:1px;
				padding:2px;
				border: 1px solid #e6f5fb;
			}
	
		.jTooltip div:first-child { 
			margin: 5px;
			max-width: 200px;
		}
		
		.jTooltip div:first-child span.title {
			font-size: 13px;
			color: #333;
			display: inline-block;
			margin-bottom: 5px;
			font-weight: bold;
		}
	
		.jTooltip .personeel {
			background-color: #F2F2F2;
			width: 150px;
		}
		
	.jTooltip .person,
	.jTooltip .department { 
		width: 180px;
		
		
		border: 1px solid #e6f5fb;
		background-color: #F2F2F2;
		padding: 10px;
		color: #333;
	}
	
	
	input.phoneInput.error, input.emailInput.error {
		border: 1px solid red;
	}
	


/* PTA styles 
-------------------------------------------------------------------------------------------------*/


	tr.slideTrigger {
		cursor: pointer;
	}
	span.slide_div {
		border: 1px solid #e6f5fb;
		margin-left:20px;
		-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	}