@charset "utf-8";
/********* element styles - after every change need to copy to editor.css *************/
body {
	background:url(images/back_body.jpg) repeat-x;
	background-color:#05343e;
	text-align: center;
	margin: 0px;
	padding: 0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color: #f2f8f9;
	direction:ltr;
}

p,h1,h2 ,h3,h4 {
	margin:0px;
	padding:0px;
}

h1 {
	font-family: Miriam, Arial, Helvetica, sans-serif;
	font-size:22px;
	color:#e0f730;
	line-height:20px;
	font-weight:bold;
	margin-bottom:3px;
}

h2 {
	font-size:16px;
	line-height:28px;
	font-weight:bold;
	margin-bottom:2px;
}

h3 {
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
}

p,li {
	line-height:20px;
}

img {
	border:none; /* otherwise imgs insid <a> get silly blue border */
}

a {
	text-decoration: underline;
	color:#d4ec1a;
}

a:hover {
	color:#d4ec1a;
}


/*********** layout *****************/

#container {
	width:923px;
	margin:auto;
	margin-top:4px;
	direction:ltr;
	text-align:left;
}

#top {
	width:923px;
	height:234px;
	margin:0px;
}

#tabs {
	width:923px;
	height:102px;
	margin-top:6px;
	margin-bottom:11px; /* partly overlapping (not adds to) the #boxes_top margin-top */
}

#boxes_top {
	background:url(images/boxes_top.gif) no-repeat;
	height:24px;
	margin-top:7px;
}

#main {
	float:left;
	background:url(images/boxes_bg.gif) repeat-y;
}

#articles {
	float:left;
	width:213px;
}

#center {
	float:left;
	width:497px;
	direction:rtl;
	text-align:right;
}

#content {
	padding:20px;
}
#content p
{
margin-top:18px;
}
#content li
{
margin-top:16px;
}
#services {
	float:left;
	width:213px;
	height:480px; /* minimum height, if the content div is too short. otherwise the services box hides the bottom of the services menu */
}


#box_articles_bottom {
	background:url(images/box_articles_bottom.gif) no-repeat;
	height:24px;
	width:213px;
	clear:left;
}

#services_bottom {
	background:url(images/services_bottom.gif) no-repeat;
	height:136px;
	margin-top:-136px;
	width:213px;
	float:right;
}

#services_bottom p{
	font-size:14px;
	line-height:24px;
	direction:rtl;
	text-align:right;
	padding-top:32px;
	padding-right:8px;
}

#services_bottom p b {
	color:#d4ec1a;
	font-weight:bold;
}

#services_bottom a {
	color: #0E3E49;
}

#bottom_spacer {
	height: 40px;
}

/************************ menus ************************************/

/* top menu ******************/
/* horizontal menu. all sub menus appears by mistake in the same place, but there are no sub-menus for this menu in this site
/*****************************/

/* menu items */
#top_menu ul {
	list-style: none;
	margin:0px;
	padding:0px;
	position:relative;
	top:210px;
	right:168px;
}

#top_menu ul a {
	font-size:17px;
	font-family:Arial, Helvetica, sans-serif;
	color: #06566b;
	text-decoration: none;
	padding-left: 25px; /* space between menu items */
	
}

#top_menu ul .menu-last a{
	padding:0px; /* otherwise pushes the width of the menu and it brakes */
}

#top_menu li {
	float: right; /* so homepage will be on the right (must be first in CMS so it will be first page to see on site */
	list-style:none; /* anti circle in mzilla */
	padding:0px;
	margin:0px;
}

#top_menu ul li a:hover, #menu ul li.over{
	color:#ffffff;
}

/* sub menus */
#top_menu li ul {
	display: none;
	position: absolute; 
	top: 25px;
	left: 45px;
}

#top_menu ul ul {/* hide sub menus */
	display:none;
} 
/* sub menus items */

#top_menu li ul li {
	background: #d4ec1a; /* IE6 Bug */
	clear:right;
	width:104px;
	border: none;
	border-bottom: 1px solid #ffffff;
	border-top: 1px solid #ffffff;
	text-align:right;
	height:27px;
	padding-right:6px; /* space between text and right border, not the location of the box */
}

#top_menu li ul a {
	text-decoration: none;
	* background: #d4ec1a; /* to fix IE6 Bug, so hide from mozilla*/
	border: none;
	padding-right:1px; /* don't try without this line */
	height:25px;
	font-weight:normal;
} 

/* ul (sub menu) two ways of refering to. first class won't work on IE6, so second class is created with javascript */	

#top_menu ul li:hover ul, #menu ul li.over ul{ 
	display: block; 
}

#top_menu ul ul li:hover, #menu ul ul li.over{
	color: #ece5cb;
}

#top_menu li ul li a:hover{ 
	color: #ece5cb;
} 

/* fix bug that causes the <a> of the sub menu's title (like "articles") to stick to the top part, only for IE.
mozilla doesn't read these lines because of the *  before them!
*/

#top_menu .menu-expand  {
	* padding-top:0px;
	* padding-bottom:13px;
}


/* articles menu *************/
/* vertical menu, no sub menus
/*****************************/
#articles_menu {
	padding-top:20px;
	padding-right:0px;
}

#articles_menu ul {
	direction:rtl;
	text-align:right;
	list-style-type:none;
	margin:0px; /* for IE */
	padding:0px /* for mozilla */
}

#articles_menu li {
	direction:rtl;
	text-align:right;
	width:213px;
	padding-right:12px;
}

#articles_menu a{
	text-decoration:none;
}

/* main menu name ("articles") - taken from <h1> */
#articles_menu li.menu-expand a{ 
	font-family: Miriam, Arial, Helvetica, sans-serif;
	font-size:22px;
	color:#e0f730;
	line-height:20px;
	font-weight:bold;
	margin-bottom:3px;
}

#articles_menu li.menu-expand li {
/* for adding "-" beofre items, ideally use:
/* list-style-image: url(images/services_li.gif);
/* but this is problematic: different vertical position in mozilla and IE, no way of controlling it */
	background-image:url(images/articles_arrow.gif);
	background-repeat:no-repeat;
	background-position:218px 10px; /* change with elements padding */
	line-height:24px;
}

#articles_menu li.menu-expand li a{
	font-size:15px;
	color:#ffffff;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
}

/* services menu *************/
/* vertical menu with 3 levels
/*****************************/
#services_menu {
	padding-top:20px;
	padding-right:28px;
}

#services_menu ul {
	direction:rtl;
	text-align:right;
	list-style-type:none;
	margin:0px; /* for IE */
	padding:0px /* for mozilla */
}

#services_menu li {
	direction:rtl;
	text-align:right;
	width:213px;
/* for adding "-" beofre items, ideally use:
/* list-style-image: url(images/services_li.gif);
/* but this is problematic: different vertical position in mozilla and IE, no way of controlling it */
	background-image:url(images/services_li.gif);
	background-repeat:no-repeat;
	background-position:218px 12px; /* change with elements padding */
}

#services_menu a{
	text-decoration:none;
}

/* main menu name ("services") - taken from <h1> */
#services_menu li.menu-expand {
	background-image:none;
}

#services_menu li.menu-expand a{ 
	font-family: Miriam, Arial, Helvetica, sans-serif;
	font-size:22px;
	color:#e0f730;
	line-height:20px;
	font-weight:bold;
	margin-bottom:3px;
}


/* categories ("search job" etc. ) */
#services_menu li.menu-expand li.menu-expand {
	padding-right:0px;
	padding-top:15px;	
	background-image:url(images/services_arrow.gif);
	background-repeat:no-repeat;
	background-position:73px 18px; /* change with elements padding */

}

#services_menu li.menu-expand li.menu-expand a{ 
	color:#d4ec1a;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
}


/* menu items (not "menu-expand" because there is no menu under them) */
#services_menu li.menu-expand li.menu-expand li { 
	padding-right:11px; /* this is added to the categories (and main) padding-right */
}

#services_menu li.menu-expand li.menu-expand li a { 
	color:#f3fcfe;
}





/*********** form **********/
form label {
	float:right;
	clear:right;
	font-size:12px;
}

.textfield, .email, .textarea {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color: #000000;
	float:none;
	clear:none;
	font-size:11px;
	width:90px;
	line-height:15px;
	border: 1px solid #000000;
	direction:rtl;
	text-align:right;
}

.textfield, .email {
	width:150px;
	height:15px;
}

.textarea {
	width:360px;
	height:90px;
}

.field_title {
	width:63px; /*overwrite backend.css to reduce space between text and field in contact us form */
}

.form_button {/* submit button in contact us */
	font-size:12px;
	font-weight:bold;
	color:#3f0000;
	border: 1px solid #3f0000;
	background-color:#ffffff;
	width: 54px;
	height:19px;
	cursor: pointer;
}

input, label, .textfield, .email, .textarea {
	margin-top:5px;
}

.email {
	direction:ltr;
	text-align:left;
}
#credit
{
text-align:center;
direction:rtl;
font-size:11px;
color:#39C0E6;
border-top:1px solid #195C6F;
width:550px;
height:30px;
}
#credit a
{
direction:rtl;
font-size:11px;
color:#39C0E6;
text-decoration:none;
}