/*@CHARSET "ISO-8859-1";*/
@CHARSET "windows-1256";

/* dunbar-colors-13.3.css */

 html, body {
     /*height: 100%;*/
     margin: 0px;
 }

body {  font-family: sans-serif, Optima, Verdana;
		background-color: #E9E9E9; /* Light Grey 02 */
		margin: 0; padding:0;
		/*height: 100%;*/
}

a:link { color: #055; } /* dark green */

a:visited { color: #404; } /* purple */

/* background-color for header and main sections is dark green.
*/

/* ------------------------------------------------ */
#header {
			/* allocate 1.25em space in top of div-header for inserting sitenav-div and SignInNav nav-element */
			position: relative;
			padding: 1.25em 0 0.25em 0;
			background-color: #404; /* purple */
			text-align: center;
			color: #E9E9E9;
			/*border: 2px solid red; */
			/*border: 2px solid #DD0; */
			}

/* 	The background color property is applied only to the content area inside inner
	border of element box i.e. it doesn't reach the margin area and because the browser
	sets a default spacing for h1/h2/ol elements: their background color will be #E9E9E9
	and will extend after the borders of header section and we will see #E9E9E9 color
	between header and main section. That is why we suppress margin or set the
	margin to zero for them.
*/

#header h1, #header h2, #header h3, #header ol { margin: 0; }

#header h1 { color: #FFFF00; font-size: 250%; } /* FFFF00 = yellow */

#header h2, h3 { font-weight: normal; font-style: italic; }

#header h3 { color: #FFFF99; } /* FFFF00 = yellow */

/*
Note that for absolute positioning for sitenav subsection to work, its containing
section (header section) must be also positioned (irrespective if by absolute or relative method).
#sitenav subsection has been moved from content area of its containing section (#header section)
and positioned in the padding space area of the #header section. That is why we
added top-padding in #header section to 1.25em to create the space to position #sitenav.
*/

/* ------------------------------------------------ */
/* style rules in #sitenav apply to nested elements or its children like <ol> & <li> in this example  */
#sitenav {
			/* 	because the width of #sitenav is 100%, setting right to
				zero or left to zero will have no effect unless we make the width: 50%
			*/
			position: absolute;
			top: 0; right: 0;
			/* left border of li is also set to same color yellow */
			border-bottom: 1px solid #DDDD00; /* yellow */
			width: 100%;
			height: 1.25em;
			color: #E9E9E9;
			background-color: #055; } /* dark green */

#sitenav2 {
			/* 	because the width of #sitenav is 100%, setting right to
				zero or left to zero will have no effect unless we make the width: 50%
			*/
			position: absolute;
			top: 0; right: 0;
			/* left border of li is also set to same color yellow */
			border-bottom: 1px solid #DDDD00; /* yellow */
			width: 20%;
			height: 1.25em;
			color: #E9E9E9;
			background-color: #055; } /* dark green */

#sitenav ol, #sitenav2 ol, #ol-Login ol {
				/*position: absolute; top: 0; right: 0;*/
				/* 	basically, ol is a block level but can be displayed
					as inline element using display property of CSS
				*/
				padding: 0; margin: 0;
				font-size: 90%; text-align: center;
				display: inline; }

#sitenav li, #sitenav2 li, #ol-Login li {
				display: inline;
				margin-left: 1em;
				padding-left: 1em;
				text-align: center;
				border-left: 1px solid #DD0; } /* DD0 = yellow */

#sitenav li:first-child, #sitenav2 li:first-child, #ol-Login li:first-child {
							padding-left: 0;
							border-left: none;
							margin-left: 0; }

/* apply the style rules to psuedo-selector a:link element inside li of sitenav section */
/* apply the style rules to psuedo-selector a:visited element inside li of sitenav section */
/* Syntax: syntax of a list elements: e1, e2, e3.....
	where 	e1 = #sitenav li a:link
			e2 = #sitenav li a:visited
*/

#sitenav li a:link, #sitenav li a:visited,
#sitenav2 li a:link, #sitenav2 li a:visited,
#ol-Login li a:link, #ol-Login li a:visited
{ color: #E9E9E9; text-decoration: none; } /* remove the underline of li element */

#sitenav li a:hover, #sitenav2 li a:hover, #ol-Login li a:hover
{ color: #DDDD00; } /* color = yellow */




/* ------------------------------------------------ */

/*
#SignInNav li:first-child { padding-right: 0;
							border-left: none;
							margin-right: 0; }

#SignInNav li a:link, #SignInNav li a:visited
{ color: #E9E9E9; text-decoration: none; }

#SignInNav li a:hover
{ color: #DDDD00; }
*/

/* ------------------------------------------------ */

#main { background-color: #DCDCDC; /* dark green = #055 */
		padding: 0 0em 0em 66px; /* 12em */
		margin: 0;
		/* position: relative makes #main div a containing block */
		position: relative; /* => depends on preceding element which is #header div*/
		/*border: 4px solid red;*/
		height: auto;
		overflow: auto;

} /* 055 = dark green height: 100%; */

/* ------------------------------------------------ */
/* top/bottom = 1em, left/right=5em */

#content_ValidationControlBox {
			display: none;
			/*background-color: #E9E9E9;*/
			/*height: 100px;*/
			padding: 1em;
			padding-bottom: 0;
			/*margin-top: 0;*/
			margin: 0;
			border-top-left-radius:1em;
			border-top-right-radius:1em;
			/*border-radius:1em;*/
			/* height is computed on-the-fly in VAT.css ready event */
			/* height: 500px; */ /* 500px height property is the height of content area only because we are not using box-sizing property */
			overflow: auto; /* auto: specify a fixed height for content-div with scrollbars */
			/* A linear gradient that starts at top left (and goes to bottom right): */
}

#content_Main {
	position: relative; /* just to make it containing block */
	background-color: #E9E9E9; /* light grey 02 */
	padding: 0.2em;
	/*margin-top: 0;*/
	margin: 0;
	/*border-radius: 1em;*/
	/* height is computed on-the-fly in VAT.css ready event */
	/* height: 500px; */ /* 500px height property is the height of content area only because we are not using box-sizing property */
	overflow: auto; /* auto: specify a fixed height for content-div with scrollbars */
	/* border: 2px solid #404; */
	/* #404 = purple/ samer  */
	/* A linear gradient that starts at top left (and goes to bottom right): */

}

#content,
#content1, #content2, #content3, #content_1, #content_2, #content_3, #content_4, #content_5, #content_6
{
			position: absolute;
			top: 0;
			left: 0;

			width: 99%;
			height: 98%;

			padding: 0.2em;

			/*background-color: #E9E9E9;*/
			z-index:0;
}

#content {
			z-index:1; /* needed at Login step to show user the list of products or program features */
}

#content h3 { margin-top: 0; }

#content p { font-size: 90%; line-height: 1.4; }

.child {
    display: inline-block;
}

/* ----------------------------------------------------- */

#div_Tab {
	display: none;
	height: 40px;
}

/* Style the list */
ul.tab {
	height: 40px;
	list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0px solid #ccc;
    background-color: #E9E9E9; /* Light Grey 02 */
}

/* Float the list items side by side */
ul.tab li {float: left; }

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 7px 16px; /* 7px: top/bottom   16px: left/right */
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
		/* background-color: #ccc; */
}

/* ------------------------------------------------ */

#div_toggleSidebar {
	position: absolute;
	left: 0em; bottom: 0em;
	/*width: 12em;*/
	margin: 0;
	border: 0px solid #055;
}

#div_toggleSidebar a {
	display: block;
	color: #fff;
	text-decoration: none;
	margin:0; padding:0;
	width: 100%;
	font-weight: bold;
	text-align: left;
}

#div_toggleSidebar a:hover {
	color: yellow;
}

.HideSideBar {
	display: none;
}

#sidebar {
			position: absolute; left: 0; top: 0;
			width: 12em;
			height: 100px;
			overflow: auto;
			/* 	position sidebar such that it's ahead from its outer
				enclosed element (main div) by 1 em from the top border of main div
				and 1 em from the right border of main
				=> 	the slidebar is moved from content of main section-div to the
					padding space of the main section-div by positioning using
					absolute positioning to the inner border of main section-div.
			*/
			 }

#sidebar h3 { 	font-size: 100%;
				color: #E9E9E9; margin: 0;
				font-weight: bold;
				padding: 0.125em 0.25em;
				background-color: #404; } /* 404 = purple */

#sidebar h6 { 	font-size: 70%;
				color: #E9E9E9; margin: 0;
				font-weight: normal;
				padding: 0.125em 0.25em;
				background-color: #404; } /* 404 = purple */

#sidebar #userInfoSection
		/*, #MyCompaniesSection
		, #CompanyDeclarationSection, #LanguageOptionsSection, #TrialBalanceSection
		*/
{ 	margin: 0 0 0em 0;
    border-bottom: 2px solid #055; /* #404 = purple */
}

#sidebar ol { 	background-color: #FFF;
				border: 2px solid #404; /* #404 = purple */
				/*border-bottom: 2px solid #055;*/
				border-top: 0;
				margin: 0 0 0em 0;
				list-style-type: none; /* this removes numbering of li items */
				padding: 0; /* 0.125em 0.25em; */
				}

#sidebar .languages li {
			display: inline;
			padding: 0; /*0.125em 0.25em;*/
			margin: 0 ; /*1em;*/
			/*background-image: url("../images/Lang_Purple.png");*/
		}

#sidebar .Block_Level_ul li {
				font-size: 85%;
				display: block;
				padding: 0; /*0.125em 0;*/
				}

#sidebar li a:link, #sidebar li a:visited {
	text-decoration: none; color: #055;
} /* 055 = dark green */

/* next text-decoration overrides the previous one: */
#sidebar ol #en_lang {text-decoration: underline;}

/* selected is a class and at run time we assign and un-assign one li element to selected class */
/* Only one element should be assigned to this selected class */
#sidebar #sidebar li.selected, #sidebar li.selected a { /* a:visited is a pseudo class */
	background:#055; /* 055 = dark green */
	color: #FFF; /* FFF = #E9E9E9 */
}

/*
#sidebar li.selected a {} => this will set the color of a-element that is selected or assigned to class "selected"
*/

#sidebar li a:hover { /* a:hover (pseudo class) is a when mouse is over */
	background:#006E6E; /* 006E6E = light green */
	color: #FFF; /* FFF = #E9E9E9 */
}

#sidebar li a {
	/* setting display to block will make the a-element magnified to become equal to li-element */
	/* so, this makes mouse icon change when it hovers on li element not as before only on the text */
	display: block;
	text-decoration: none;
}

#sidebar li {
	padding: 0;
	}

#sidebar #userInfoSection {
}

/* ------------------------------------------------ */

#footer { 	background-color: #404;
			color: #E9E9E9;
			display: none; /* hide it in the meantime */
			height: 0px;
			width: 0px;
			}

#footer p { margin: 0em; font-size: 85%; }

/* padding of parent enclosed element is zero */
/*
#footer { 	position: absolute;
			top: 1em; right: 1em;
			width: 10em;
			padding: 0; }
*/

/* padding of p element nested inside its parent is zero 0.5em */
#footer p { padding: 0.5em; }

#footer p a:link, #footer p a:visited
{ color: #DDDD00; } /* DD0 = yellow */

/* ------------------------------------------------ */

.TrialBalanceTable, th, td { /* properties are applied to all elemets having class selector "TrialBalanceTable" */
	/* font-weight: bold; */
	/* font-variant: small-caps; */
	/* font-family: Georgia, serif; */
	/* font-style: italic; */
	/* font-size: larger or smaller */
	/* font: 1em Georgia, serif; */
	/* text-align: right; */
	/*font-size: 75%; */
	font-style: normal;
}

/* ------------------------------------------------ */

#ProgramFeatureId {
	display: none;
}

/* ------------------------------------------------ */

/*

This is the skeleton of an HTML page and this skeleton can have
different variants of CSS design based in CSS Style Sheet:
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
<div id="header"> // Section.1
	<h1>
	<h2>
	<h3>
	<div id="sitenav">
		<ol>
			<li><a>content</a></li>
		</ol>
		<ol>
			<li>
				<a>content</a>
				<div>

				</div>
			</li>
			<li><a>sign up</a></li>
		</ol>
	</div>
</div> <!-- header -->

<div id="main">    // Section.2
	<div id="content"></div>  // Nested Sections (subsections)
	<div id="sidebar"></div>
	<div id="footer"></div>
</div> <!-- main -->

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
=> all nested elements of Section.1 and Section.2 exist in their content area
   and we set a padding space in main and header sections to move/relocate nested elements
   from content area of main or header sections to padding area. The main and header div
   elements span along the width of the web page.
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

"content" div exists in content area of "main" div

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

*/