/* 
IMPORTANT NOTES:

1-	BLACK = #00000000
    WHITE = #FFFFFFFF

2-  STYLES NAME ARE DEFINED IN ASP CONTROLS AS CssClass="MyStyle" AND IN HTML AS class="MyStyle"

3-	TABLES FOR EXAMPLE THAT ARE CREATED WITHOUT STYLE NAME WILL ASSUME THE DEFAULT STYLE CALLED TABLE
    OR YOU CAN ASSIGN AS STLYE NAME TO THE TABLE AS CssClass="MyTable"

	SINCE ANY TABLE THAT IS CREATED WITHOUT A STYLE NAME ASSUME THAT DEFAULT SYTLE, 
	THE STYLE WILL BE APPLIED AUTOMATICALLY TO CONTROLS AS THE asp:Menu AND WILL DISTORT ITS LOOK, THAT IS WHY
	I DELETED THE DEFAULT STYLES

4-  THE STYLE SHEET FILE StyleSheet.css MUST EXISTS AT THE ROOT DIRECTORY OF THE WEB SITE, 
    OTHERWISE I WILL NOT SEE THE STYLES ON THE PAGES IN RUN TIME.
    PLEASE NOTE THAT IF THE FILE StyleSheet.css IS LOCATED AT ANOTHER FOLDER RATHER THAT THE ROOT FOLDER,
    I WILL SEE THE STYLES APPLIED TO THE PAGES IN DESIGN VIEW ONLY, BUT WHEN I RUN THE WEB SITE TO VIEW IT ON THE BROWSER,
    I WILL NOT SEE THE STYLES APPLLIED TO THE WEB SITE PAGES

5-  IF YOU DO NOT SEE ANY CHANGES HAPPEN TO THE PAGE AFTER YOU CHANGE A STYLE, CLICK THE REFRESH BUTTON TO FORCE
    APPLYING THE NEW STYLE TO THE PAGE (THIS IS A VERY IMPORTANT STEP SINCE IT VALIDATES IF THE STYLE TOOK EFFECT)

6-  THE CSS FILE IS IMPORTED BY WRITTING THE FOLLOWING STATEMENT BETWEEN THE <head> TAG AS:
    <link href="~/StyleSheet.css" type="text/css" rel="stylesheet"/> 

7-  THE STYE IS APPLIED TO A CONTROL AS:
    <div id="MyElement"> 
    OR 
    <div class="MyClass"> 

8-  THE ELEMENT IS DECLARED AS:
    #MyElement
    {
    }
    AND CALLED AS <div id="MyElement">


    THE CLASS IS DECLARED AS:
    .MyClass
    {
    }
	AND CALLED AS <div class="MyClass">


9-  THE CLASS DESIGNATION IS USED MORE WITHIN ASP.NET

10-  BLACK = #00000000
	WHITE = #FFFFFFFF

11-  STYLES NAME ARE DEFINED IN ASP CONTROLS AS CssClass="MyStyle" AND IN HTML AS class="MyStyle"

12-	TABLES FOR EXAMPLE THAT ARE CREATED WITHOUT STYLE NAME WILL ASSUME THE DEFAULT STYLE CALLED TABLE
	OR YOU CAN ASSIGN AS STLYE NAME TO THE TABLE AS CssClass="MyTable" 


13- EXAMPLE OF USING ELEMENTS:

	#MyMenuVertical
	{
		border: 1px solid black;
		width: 200px;
		background-color: #E6E6E6;
	}
	AND IS CALLED AS: <DIV ID = "MyMenuVertical"> 

	#MyMenuVertical a
	{
		font: bold 13px Verdana;
		padding: 2px;
		padding-left: 4px;
		display: block;
		width: 100%;
		color: black;
		text-decoration: none;
		border-bottom: 1px solid black;
	}

	#MyMenuVertical a:hover
	{
		background-color: black;
		color: white;
	}


	*********************************************************************************************
	DEFAULT STYLES

	TABLE
	{
		font-weight: bold;
		color: navy;
		background-color: white;
	}

	TFOOT, THEAD	
		{	
		font-size:	15px;
		word-spacing:	normal;
		letter-spacing:	normal;
		text-transform:	none;
		font-family: Arial, Helvetica, sans-serif;
		}	
			
	TH	{	
		vertical-align:	baseline;
		font-size:	15px;
		font-weight:	bold;
		word-spacing:	normal;
		letter-spacing:	normal;
		text-transform:	none;
		font-family: Arial, Helvetica, sans-serif;
		}

	A:link	
		{	
		text-decoration:	none;
		color:	#3333cc;
		}	
			
	A:visited	
		{	
		text-decoration:	none;
		color:	#333399;
		}	
			
	A:active	
		{	
		text-decoration:	none;
		color:	#333399;
		}	
			
	A:hover	
		{	
		text-decoration:	underline;
		color:	#3333cc;
		}

	BODY
	{
		background-color: white;
		color: navy;
		font-family: Verdana, Helvetica, sans-serif;
		font-size: 12px;
		font-weight: normal;
		letter-spacing: normal;
		text-transform: none;
		word-spacing: normal;
		margin: 0px;
	}

	H1, H2, H3, H4, H5, TH, THEAD, TFOOT
	{
		COLOR: #003366;
	}
	H1
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size:        2em;
		font-weight:        700;
		font-style:        normal;
		text-decoration:        none;
		word-spacing:        normal;
		letter-spacing:        normal;
		text-transform:        none;
	}

	H2
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size:        1.75em;
		font-weight:        700;
		font-style:        normal;
		text-decoration:        none;
		word-spacing:        normal;
		letter-spacing:        normal;
		text-transform:        none;
	}

	H3
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size:        1.58em;
		font-weight:        500;
		font-style:        normal;
		text-decoration:        none;
		word-spacing:        normal;
		letter-spacing:        normal;
		text-transform:        none;
	}

	H4
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size:        1.33em;
		font-weight:        500;
		text-decoration:        none;
		word-spacing:        normal;
		letter-spacing:        normal;
		text-transform:        none;
	}

	H5, DT
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size:        1em;
		font-weight:        700;
		font-style:        normal;
		text-decoration:        none;
		word-spacing:        normal;
		letter-spacing:        normal;
		text-transform:        none;
	}

	H6
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size:        .8em;
		font-weight:        700;
		font-style:        normal;
		text-decoration:        none;
		word-spacing:        normal;
		letter-spacing:        normal;
		text-transform:        none;
	}

	TFOOT, THEAD
	{
		font-size:        1em;
		word-spacing:        normal;
		letter-spacing:        normal;
		text-transform:        none;
		font-family: Arial, Helvetica, sans-serif;
	}

	TABLE
	{
		width: 95%;
		border-right: teal thin solid;
		border-top: teal thin solid;
		font-weight: normal;
		border-left: teal thin solid;
		color: navy;
		border-bottom: teal thin solid;
		padding-right: 0px;
		padding-left: 0px;
		padding-bottom: 0px;
		margin: 0px;
		padding-top: 0px;
		cursor: auto;
		clip: rect(auto auto auto auto);
		border-collapse: collapse;
		table-layout: fixed;
		font-size: 10pt;
		font-family: Arial;
		background-color: transparent;
	}

	TH
	{
		vertical-align: baseline;
		font-size:      1em;
		font-weight:    bold;
		word-spacing:   normal;
		letter-spacing: normal;
		text-transform: none;
		font-family:    Arial, Helvetica, sans-serif;
	}

	TR
	{
		border-right: red 1px solid;
		border-top: red 1px solid;
		border-left: red 1px solid;
		border-bottom: red 1px solid;
		padding-right: 0px;
		padding-left: 0px;
		padding-bottom: 0px;
		padding-top: 0px;
	}

	TD
	{
		cursor: default;
		border-right: teal 1px solid;
		border-top: teal 1px solid;
		border-left: teal 1px solid;
		border-bottom: teal 1px solid;
		padding-right: 0px;
		padding-left: 0px;
		padding-bottom: 0px;
		margin: 0px;
		padding-top: 0px;
		vertical-align: top;
		text-align: left;
	}


	A:link
	{
		text-decoration:    none;
		color:              #3333cc;
	}

	A:visited
	{
		text-decoration:    none;
		color:              #333399;
	}

	A:active
	{
		text-decoration:    none;
		color:              #333399;
	}

	A:hover
	{
		text-decoration:    underline;
		color:              #3333cc;
	}


	SMALL
	{
		font-size:        .7em;
	}

	BIG
	{
		font-size:        1.17em;
	}

	BLOCKQUOTE, PRE
	{
		font-family:        Courier New, monospace;
	}


	UL LI
	{
		list-style-type:        square ;
	}

	UL LI LI
	{
		list-style-type:        disc;
	}

	UL LI LI LI
	{
		list-style-type:        circle;
	}

	OL LI
	{
		list-style-type:        decimal;
	}

	OL OL LI
	{
		list-style-type:        lower-alpha;
	}

	OL OL OL LI
	{
		list-style-type:        lower-roman;
	}

	IMG
	{
		margin: 5px;
	}

	*/

	
/*
THIS IS THE DEFAULT STYLE FOR PAGES BODY AND IT WILL BE USED IF NO STYLE IS USED TO THE PAGE
*/
BODY
{
	background-color: white;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	letter-spacing: normal;
	text-transform: none;
	word-spacing: normal;
	color: navy;
}

H1, H2, H3, H4, H5, TH, THEAD, TFOOT
{
    COLOR: #003366;
}


H1
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 30px;
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	word-spacing: normal;
	letter-spacing: normal;
	text-transform: none;
	color: red;
}	
		
H2	{	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:	25px;
	font-weight:	700;
	font-style:	normal;
	text-decoration:	none;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
	}	
		
H3	{	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:	20px;
	font-weight:	500;
	font-style:	normal;
	text-decoration:	none;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
	}	
		
H4	{	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:	15px;
	font-weight:	500;
	text-decoration:	none;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
	}	
		
H5, DT
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	font-style: normal;
	text-decoration: none;
	word-spacing: normal;
	letter-spacing: normal;
	text-transform: none;
}	
		
H6	{	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:	10px;
	font-weight:	700;
	font-style:	normal;
	text-decoration:	none;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
	}	
		
		
SMALL
{
	font-size: 10px;
}	

BIG	{	
	font-size:	20px;
	}	

BLOCKQUOTE, PRE	
    {	
	font-family:	Courier New, monospace;
	}	
	

UL LI	{	
	list-style-type:	square ;
	}	

UL LI LI	
	{	
	list-style-type:	disc;
	}	

UL LI LI LI	
	{	
	list-style-type:	circle;
	}	
	
OL LI	
	{	
	list-style-type:	decimal;
	}	

OL OL LI	
	{	
	list-style-type:	lower-alpha;
	}	

OL OL OL LI	
	{	
	list-style-type:	lower-roman;
	}	

IMG 	
	{
	margin-top: 5px;
	margin-left: 10px;
	margin-right: 10px;
	}
	

	
/* -------------------------------------------BEGINING OF MY STYLE--------------------------------------- */

/* ----------------------LABELS---------------------------- */
.Bold
{
	font-weight:bold;
}

/* RED SMALL TEXT ALIGNED TO THE LEFT*/
.RedSmallLeft
{
	font-weight: normal;
	font-size: small;
	color: red;
	text-align: left;
}


/* CRIMSON MEDIUM TEXT ALIGNED TO THE CENTER*/
.CrimsonMediumCenter
{
	font-weight: normal;
	font-size: medium;
	color: #dc143c;
	text-align: center;
	vertical-align: middle;
}

.CrimsonLargeCenter
{
	font-weight: normal;
	font-size: large;
	color: #dc143c;
	text-align: center;
	vertical-align: middle;
}

/* RED SMALL TEXT ALIGNED TO THE CENTER*/
.RedSmallCenter
{
	font-weight: normal;
	font-size: small;
	color: red;
	text-align: center;
	vertical-align: middle;
}

.CategoryBulletEnglish	
{
	font-weight: normal;
	font-size: 11pt;
	color: #000080;
	text-align: left;
	vertical-align: middle;
	background-color: #f5f5dc;
	cursor: pointer;
}

.CategoryBulletArabic
{
	font-weight: normal;
	font-size: 11pt;
	color: #000080;
	text-align: right;
	vertical-align: middle;
	background-color: #f5f5dc;
	cursor: pointer;
}

/* ----------------------MAIN MENU---------------------------- */
.CrimsonBackground
{
	background-color: #dc143c;
}

/* ----------------------BUTTONS---------------------------- */

.ButtonRegular
{
	font-weight: normal;
	font-size: 10pt;
	color: navy;
	height: 25px;
	width: 50px;
}

.ButtonBold
{
	font-weight: bold;
	font-size: 10pt;
	color: white;
	height: 30px;
	width: 100px;
	background-color: #507CD1;
	text-align: center;
}


.MyCalendarButton
{
	font-weight: bold;
	font-size: 10pt;
	color: navy;
	height: 40px;
	width: 60px;
	background-color: #00f0ff;
}


/* ----------------------IMAGES---------------------------- */

/*
IN ORDER TO HAVE THE PICTURE ON THE LEFT, AND THE TEXT ALIGNED BESIDE IT THE RIGHT, 
USE THE STATEMENT float:left
*/
.NoMarginNoPaddingImage
{
	padding-right: 0px;
	padding-left: 0px;
	left: 0px;
	padding-bottom: 0px;
	margin: 0px;
	padding-top: 0px;
	top: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	border-bottom-style: none;
	clip: rect(0px 0px 0px 0px);
	border-collapse: collapse;
	float:left
}



.RefreshImage
{

}
	        	        
/* ----------------------GRIDS---------------------------- */
.GridColumn
{
	font-size: 10px;
	color: navy;
	vertical-align: top;
	list-style-type: disc;
	text-align: left;
}


/* ----------------------TABLES---------------------------- */
/*
YOU CAN CENTER A TABLE AS THE FOLLOWING:
1-	INSERT THE TAG <center></center>	AROUND THE TABLE
2-	INSERT THE TAG <div align="center"> AROUND THE TABLE-THIS TAG WILL CENTER THE TABLE AND ITS CONTENTS TOO(NOT DESIRED)
3-	ADD THE FOLLOWING STATEMENTS TO THE TABLE STYLE:
	margin-left:auto; 
    margin-right:auto;
4-	ADD THE FOLLOWING STATEMENTS TO THE TABLE STYLE:
	width:80%; 
	margin-left:10%; 
	margin-right:10%;
*/


/* CENTERED TABLE IN THE MIDDEL 50% OF THE FORM, LIGHT GREY BORDER AROUND THE TABLE*/
.TableCenter
{
	margin-left: auto;
	margin-right: auto;
}


/* CENTERED TABLE IN THE MIDDEL 50% OF THE FORM, LIGHT GREY BORDER AROUND THE TABLE*/
.Table50Center
{
	border-top: lightgrey 1px solid;
	vertical-align: top;
	text-align: left;
	border-right: lightgrey 1px solid;
	border-left: lightgrey 1px solid;
	border-bottom: lightgrey 1px solid;
	width: 50%;
	font-weight: normal;
	color: navy;
	margin: 1% 25%;
}

.Table50Left
{
	border-top: lightgrey 1px solid;
	vertical-align: top;
	text-align: left;
	border-right: lightgrey 1px solid;
	border-left: lightgrey 1px solid;
	border-bottom: lightgrey 1px solid;
	width: 50%;
	font-weight: normal;
	color: navy;
}

/* CENTERED TABLE IN THE MIDDEL 70% OF THE FORM, LIGHT GREY BORDER AROUND THE TABLE*/
.Table70Center
{
	border-top: lightgrey 1px solid;
	vertical-align: top;
	text-align: left;
	border-right: lightgrey 1px solid;
	border-left: lightgrey 1px solid;
	border-bottom: lightgrey 1px solid;
	width: 70%;
	font-weight: normal;
	color: navy;
	margin: 1% 15%;
}


/* 	
	CENTERED TABLE IN THE MIDDEL 70% OF THE FORM, LIGHT GREY BORDER AROUND THE TABLE
	
	IN ORDER TO HAVE A THIN CELL BORDERS, AS OPPOSED TO DOUBLE BORDERS, ADD THE STATEMENT
	border-collapse: collapse; 

	AND IN THIS CASE, THE STYLE IS CALLED AS:
	table class="Table90CenterThinBorders" border="1"
*/

.Table90CenterThinBorders
{
	border-top: lightgrey 1px solid;
	vertical-align: top;
	text-align: left;
	border-right: lightgrey 1px solid;
	border-left: lightgrey 1px solid;
	border-bottom: lightgrey 1px solid;
	width: 90%;
	font-weight: normal;
	color: navy;
	margin: 1% 5%;
	border-collapse: collapse;
}

.Table70CenterThinBorders
{
	border-top: lightgrey 1px solid;
	vertical-align: top;
	text-align: left;
	border-right: lightgrey 1px solid;
	border-left: lightgrey 1px solid;
	border-bottom: lightgrey 1px solid;
	width: 70%;
	font-weight: normal;
	color: navy;
	margin: 1% 15%;
	border-collapse: collapse;
}

.Table50CenterThinBorders
{
	border-top: lightgrey 1px solid;
	vertical-align: top;
	text-align: left;
	border-right: lightgrey 1px solid;
	border-left: lightgrey 1px solid;
	border-bottom: lightgrey 1px solid;
	width: 50%;
	font-weight: normal;
	color: navy;
	margin: 1% 15%;
	border-collapse: collapse;
}

.Table70Left
{
	border-top: lightgrey 1px solid;
	vertical-align: top;
	text-align: left;
	border-right: lightgrey 1px solid;
	border-left: lightgrey 1px solid;
	border-bottom: lightgrey 1px solid;
	width: 70%;
	font-weight: normal;
	color: navy;
}

.Table70Right
{
	border-top: lightgrey 1px solid;
	vertical-align: top;
	text-align: left;
	border-right: lightgrey 1px solid;
	border-left: lightgrey 1px solid;
	border-bottom: lightgrey 1px solid;
	width: 70%;
	font-weight: normal;
	color: navy;
	margin-left: 30%;
	position: relative;
}


/* 	
	CENTERED TABLE IN THE MIDDEL 98% OF THE FORM, LIGHT GREY BORDER AROUND THE TABLE
	NOTE 1:	
	THE FOLLOWING STATEMENTS WILL MAKE THE CELL BORDER THIN BY MEANS OF COLLAPSING THEM:
	border-collapse: collapse; 

	NOTE 2:
	THE STATEMENT color: navy; WILL FORCE THE FONT COLOR TO BE navy ALL THE TIME AND COULD BE NOT CHANGED DYNAMICALLY
	USING THE FOLLOWING STATEMENT:
	HttpContext.Current.Response.Write(" onMouseOver = \"this.style.color='red'; this.style.backgroundColor='#fdf5e6'\" ");

	AND IN THIS CASE, THE STYLE IS CALLED AS:
	table class="Table100ThinBorders" border="1"
*/

.Table100NoBorder
{
	vertical-align: top;
	text-align: left;
	width: 100%;
	font-weight: normal;
	color: navy;
	margin: 0%;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	border-bottom-style: none;
}


.Table100ThinBorders
{
	border-top: lightgrey thin solid;
	vertical-align: top;
	text-align: left;
	border-right: lightgrey thin solid;
	border-left: lightgrey thin solid;
	border-bottom: lightgrey thin solid;
	width: 100%;
	font-weight: normal; 
	/*color: navy;*/
	margin: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
	border-collapse: collapse; /*background-color: white;*/
}

.Table98ThinBorders
{
	border-top: lightgrey thin solid;
	vertical-align: top;
	text-align: left;
	border-right: lightgrey thin solid;
	border-left: lightgrey thin solid;
	border-bottom: lightgrey thin solid;
	width: 98%;
	font-weight: normal;
	/*color: navy;*/
	margin: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
	border-collapse: collapse;
}


/* CENTERED TABLE IN THE MIDDEL 98% OF THE FORM, EXTERNAL LIGHT GREY BORDER AROUND THE TABLE*/
.Table98
{
	border-top: lightgrey thin solid;
	vertical-align: top;
	text-align: left;
	border-right: lightgrey thin solid;
	border-left: lightgrey thin solid;
	border-bottom: lightgrey thin solid;
	width: 98%;
	font-weight: normal;
	color: navy;
	margin: 1%;
}


/* THE CONTROLS APPEAR IN ORIGINAL SIZE, ALIGNED TOP LEFT, EXTERNAL LIGHT GREY BORDER AROUND THE TABLE*/
.TableOriginalSize
{
	border-top: lightgrey thin solid;
	vertical-align: top;
	text-align: left;
	border-right: lightgrey 1px solid;
	border-left: lightgrey 1px solid;
	border-bottom: lightgrey 1px solid;
	width: 1%;
	font-weight: normal;
	color: navy;
}
		

TH
{
	vertical-align: middle;
	font-size: 15px;
	font-weight: bold;
	word-spacing: normal;
	letter-spacing: normal;
	text-transform: none;
	font-family: Arial, Helvetica, sans-serif;
	color: red;
	text-align: center;
}
	

.THDisplayData
{
	vertical-align: middle;
	font-size: 15px;
	font-weight: bold;
	word-spacing: normal;
	letter-spacing: normal;
	text-transform: none;
	font-family: Arial, Helvetica, sans-serif;
	color: red;
	text-align: center;
}

.TD25
{
	vertical-align: top;
	text-align: left;
	background-color: white;
	border-right: lightgrey 1px solid;
	border-top: lightgrey 1px solid;
	border-left: lightgrey 1px solid;
	border-bottom: lightgrey 1px solid;
	width: 25%;
}

.TD75
{
	vertical-align: top;
	text-align: left;
	background-color: white;
	border-right: lightgrey 1px solid;
	border-top: lightgrey 1px solid;
	border-left: lightgrey 1px solid;
	border-bottom: lightgrey 1px solid;
	width: 75%;
}

.TD15NoBorder
{
	vertical-align: top;
	text-align: left;
	background-color: white;
	width: 15%;
}

.TD85NoBorder
{
	vertical-align: top;
	text-align: left;
	background-color: white;
	width: 85%;
}

.TD160pxNoBorder
{
	vertical-align: top;
	text-align: left;
	background-color: white;
	width: 160px;
}


.PointerCursor
{
	cursor: pointer;
}


/* THIS WILL CREATE COLUMNS WITH EQULA LENGTHES */
.TDPointerCursor
{
	vertical-align: top;
	text-align: left;
	background-color: white;
	border-right: lightgrey 1px solid;
	border-top: lightgrey 1px solid;
	border-left: lightgrey 1px solid;
	border-bottom: lightgrey 1px solid;
	cursor: pointer;
}
/* 
     cursor:hand    WORKS ONLY WITH IE
     cursor:pointer WORKS WITH IE, MOZILLA, AND FIREFOX
*/

.TDPointerCursorNoBorder
{
	vertical-align: top;
	text-align: left;
	background-color: white;
	cursor: pointer;
}

.TDPointerCursorArabic
{
	vertical-align: top;
	text-align: right;
	background-color: white;
	cursor: pointer;
}

.TDPointerCursorEnglish
{
	vertical-align: top;
	text-align: left;
	background-color: white;
	cursor: pointer;
}

.TDPointerCursor30
{
	vertical-align: top;
	text-align: left;
	background-color: white;
	cursor: pointer;
	width: 30%;
}

.TDPointerCursor30Arabic
{
	vertical-align: top;
	text-align: right;
	background-color: white;
	cursor: pointer;
	width: 30%;
}

.TDPointerCursor30English
{
	vertical-align: top;
	text-align: left;
	background-color: white;
	cursor: pointer;
	width: 30%;
}



/* ALIGN DATA WITHIN THE CELL TO TOP LEFT*/
.TDTopLeft
{
	vertical-align: top;
	text-align: left;
}

.TDTopRight
{
	vertical-align: top;
	text-align: right;
}

.TDCenter
{
	vertical-align: middle;
	text-align: center;
}


/* NAVY FONT, ALIGNED TOP LEFT*/
.TDDisplayData
{
	font-size: 12px;
	color: navy;
	vertical-align: top;
	list-style-type: disc;
	text-align: left;
}

.TDLabel
{
	font-weight: bold;
	font-size: 12px;
	color: navy;
	vertical-align: top;
	text-align: left;
}

.TDMainMenu
{
	font-weight: bold;
	font-size: 12px;
	color: white;
	vertical-align: top;
	text-align: left;
	background-color: #4169e1;
}


/*BLUE BACKGROUND AND WHITE TEXT*/
.BlueBackgroundWhiteFront
{
	font-weight: normal;
	font-size: 14px;
	color: white;
	vertical-align: top;
	text-align: center;
	background-color: #4065fe;
}

/*RED BACKGROUND AND WHITE TEXT*/
.CrimsonBackgroundWhiteFront
{
	font-weight: normal;
	font-size: 14px;
	color: white;
	vertical-align: top;
	text-align: center;
	background-color: #dc143c;
	border-right: lime solid;
	border-top: lime solid;
	border-left: lime solid;
	border-bottom: lime solid;
}

.CrimsonBackgroundWhiteFrontBACKUP
{
	font-weight: normal;
	font-size: 14px;
	color: white;
	vertical-align: top;
	text-align: center;
	background-color: #dc143c;
}

.WhiteBackground
{
	font-weight: normal;
	font-size: 14px;
	vertical-align: top;
	background-color: white;	
}

.WhiteBackgroundEnglish
{
	font-weight: normal;
	font-size: 14px;
	vertical-align: top;
	text-align: left;
	background-color: white;	
}

.WhiteBackgroundArabic
{
	font-weight: normal;
	font-size: 14px;
	vertical-align: top;
	text-align: right;
	background-color: white;	
}

.LightGreyBackground
{
	font-weight: normal;
	font-size: 14px;
	vertical-align: top;
	background-color: #d3d3d3;
}

.LightGreyBackgroundEnglish
{
	font-weight: normal;
	font-size: 14px;
	vertical-align: top;
	text-align: left;
	background-color: #d3d3d3;
}

.LightGreyBackgroundArabic
{
	font-weight: normal;
	font-size: 14px;
	vertical-align: top;
	text-align: right;
	background-color: #d3d3d3;
}

/* 
width: 10%; WORKS MUCH BETTER THAN width: 150px; SINCE width: 20% IS ENFORCED MORE SPECIALLY OVER 2 COLUMNS TABLES
WHEREAS width: 150px; DOES NOT ENFORCE OVER 2 COLUMNS TABLE AND I WILL GET 50% ON EACH COLUMN AND I AM NOT SURE WHY  
*/
.WhiteSmokeBackground10
{
	font-weight: normal;
	font-size: 12px;
	vertical-align: top;
	background-color: #f5f5f5;
	width: 10%;
}

.WhiteSmokeBackground20
{
	font-weight: normal;
	font-size: 12px;
	vertical-align: top;
	background-color: #f5f5f5;
	width: 20%;
}

.WhiteSmokeBackground30
{
	font-weight: normal;
	font-size: 12px;
	vertical-align: top;
	background-color: #f5f5f5;
	width: 30%;
}

.WhiteSmokeBackground10English
{
	font-weight: normal;
	font-size: 12px;
	vertical-align: top;
	text-align: left;
	background-color: #f5f5f5;
	width: 10%;

}

.WhiteSmokeBackground20English
{
	font-weight: normal;
	font-size: 12px;
	vertical-align: top;
	background-color: #f5f5f5;
	width: 20%;
	text-align: left;	
}

.WhiteSmokeBackground30English
{
	font-weight: normal;
	font-size: 12px;
	vertical-align: top;
	background-color: #f5f5f5;
	width: 30%;
	text-align: left;	
}

.WhiteSmokeBackground100English
{
	font-weight: normal;
	font-size: 12px;
	vertical-align: top;
	background-color: #f5f5f5;
	width: 100%;
	text-align: left;	
}

.WhiteSmokeBackground10Arabic
{
	font-weight: normal;
	font-size: 12px;
	vertical-align: top;
	background-color: #f5f5f5;
	width: 10%;
	text-align: right;
}

.WhiteSmokeBackground20Arabic
{
	font-weight: normal;
	font-size: 12px;
	vertical-align: top;
	background-color: #f5f5f5;
	width: 20%;
	text-align: right;
}

.WhiteSmokeBackground30Arabic
{
	font-weight: normal;
	font-size: 12px;
	vertical-align: top;
	background-color: #f5f5f5;
	width: 30%;
	text-align: right;
}

.WhiteSmokeBackground100Arabic
{
	font-weight: normal;
	font-size: 12px;
	vertical-align: top;
	background-color: #f5f5f5;
	width: 100%;
	text-align: right;
}



/* ------------------DIVS AND ALIGNMENT---------------------- */	
/*		
WHEN NESTED DIVS AS IN
<div class="AlignCenter">
<div class="Width780pxWithBorder">
TEXT GOES HERE
</div>
</div>

THE NESTED DIV USING CSS WAS WORKING ONLY FOR IE, BUT NOT FOR MOZILLA OR FIREFOX
I FIXED THE PROBLEM BY USING <align="center"> INSTEAD OF THE STYLE AS IN
<div align="center">
<div class="Width780pxWithBorder">
TEXT GOES HERE
</div>
</div>
*/
.AlignCenter
{
	text-align: center;
}


.AlignRight
{
	text-align: right;
	vertical-align: top;
}

/*
<td colspan="1" class="<%= Resources.MyResources.StyleAlign %>" >
<td colspan="1" class="<%$ Resources:MyResources,StyleAlign %>" >
*/
.AlignEnglish
{
	text-align: left;
	vertical-align: top;
}

.AlignArabic
{
	text-align: right;
	vertical-align: top;
}

.AlignFloatEnglish
{
	text-align: left;
	vertical-align: top;
	float: left;
}

.AlignFloatArabic
{
	text-align: right;
	vertical-align: top;
	float: right;
}



/* ----------------------PAGES---------------------------- */
.MyPageBodyNOTUSED_DELETE
{
	background-color: white;
	margin-top: 0px;
	vertical-align: top;
	text-align: left;
	margin-bottom: 0px;
}

.BodyEnglish
{
	background-color: white;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	letter-spacing: normal;
	text-transform: none;
	word-spacing: normal;
	color: navy;
	margin-top: 0px;
	margin-bottom: 0px;
	vertical-align: top;
	text-align: left;
}

.BodyArabic
{
	background-color: white;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: normal;
	text-transform: none;
	word-spacing: normal;
	color: navy;
	margin-top: 0px;
	margin-bottom: 0px;
	vertical-align: top;
	text-align: right;
}

.MyHeading
{
	margin-top: 0px;
	vertical-align: top;
	text-align: center;
	margin-bottom: 0px;
	font-weight: bold;
	font-size: 15px;
	color: navy;
	font-family: Arial;
}

.NoMarginNoPadding
{
	padding-right: 0px;
	padding-left: 0px;
	left: 0px;
	padding-bottom: 0px;
	margin: 0px;
	padding-top: 0px;
	top: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	border-bottom-style: none;
	clip: rect(0px 0px 0px 0px);
	border-collapse: collapse;
}

.MyPanelBackGround
{
	width: 780px;
	height: 60px;
	background-image: url(Graphics/Shapes/RedStripe.jpg);
}


/* ----------------------WIDTH---------------------------- */
.Width15
{
	width: 15%;
	vertical-align: top;
	text-align: left;
}

.Width20
{
	width: 20%;
	vertical-align: top;
	text-align: left;
}

.Width30
{
	width: 30%;
	vertical-align: top;
	text-align: left;
}

.Width50
{
	width: 50%;
	vertical-align: top;
	text-align: left;
}

.Width75
{
	width: 75%;
	vertical-align: top;
	text-align: left;
}

.Width80
{
	width: 80%;
	vertical-align: top;
	text-align: left;
}

.Width95
{
	width: 95%;
	vertical-align: top;
	text-align: left;
}

.Width95Multiline
{
	width: 95%;
	height: 100px;
	vertical-align: top;
	text-align: left;
}

.Width98
{
	width: 98%;
	margin: 1%;
	vertical-align: top;
}



.Width300px
{
	width: 300px;
	vertical-align: top;
	text-align: left;
}

.Width780pxWithBorder
{
	width: 780px;
	vertical-align: top;
	text-align: left;
	background-color: white;
	border-right: lightgrey 1px solid;
	border-top: lightgrey 1px solid;
	border-left: lightgrey 1px solid;
	border-bottom: lightgrey 1px solid;
}

.Width780pxWithBorderArabic
{
	width: 780px;
	vertical-align: top;
	text-align: right;
	background-color: white;
	border-right: lightgrey 1px solid;
	border-top: lightgrey 1px solid;
	border-left: lightgrey 1px solid;
	border-bottom: lightgrey 1px solid;
}
.Width800px
{
	width: 800px;
	vertical-align: top;
	text-align: left;
}

.MyDivHeading1
{
	font-size: 30px;
	color: red;
	vertical-align: top;
	text-align: left;
	font-weight: bold;
}

.MyDivHeading2
{
	font-size: 15px;
	color: red;
	vertical-align: top;
	text-align: left;
	font-weight: bold;
}


.Test
{
	vertical-align: middle;
	text-align: center;
	background-color: #dc143c;
	color: white;
}