@CHARSET "ISO-8859-1";
/** ----------------------------------------------------------------------
					EGYBANKS Style sheet
---------------------------------------------------------------------- **/

/** ----------------------------------------------------------------------
								 body
---------------------------------------------------------------------- **/

body				{background-color: white; font-family: 'Roboto', sans-serif;
				 		font-size: 10pt; text-rendering: optimizeLegibility; background-image: url('../img/bg.jpg');}
body[dir='rtl']		{font-family: 'Amiri', serif; font-size: 10pt;}
html, body				{box-sizing:border-box; padding: 0px; margin: 0px;  min-width: 350px;}
h1					{font-size: 12pt;}
				
/** ----------------------------------------------------------------------
								 brand image  
---------------------------------------------------------------------- **/
div.brand 			{float: left;
						/*text-shadow: white 0.0em 0.0em 0.1em;*/}
div.brand img 		{width: 70px; margin: 0px 10px 0px 10px;}
body[dir='rtl'] div.brand 
					{float: right;} 
body[dir='rtl'] div.brand img
					{margin: 0px 10px 0px 10px;} 
/** ----------------------------------------------------------------------
								 heading & language  
---------------------------------------------------------------------- **/
div.heading 		{font-size: 10pt; /*margin-left: 90px;*/ margin-top: 25px; color: white;
						float: left; /*text-shadow: white 0.0em 0.0em 0.1em;*/ vertical-align: middle; height: 100%;}
body[dir='rtl'] div.heading {float: right; margin-top: 20px;}

div.language 		{float: right; font-weight: bold; font-size: 10pt; color: grey; background-color: white; 
						font-family: calibri; padding: 2px 4px 2px 4px; border-radius: 2px;}
body[dir='rtl'] div.language 
					{float: left;}
div.language a 		{color: blue; font-family: calibri; text-decoration: none;}


div.share 			{height: 100%; margin-top: 20px; float: left; padding: 5px; padding-left: 20px;}
body[dir='rtl'] div.share
					{float: right; padding-right: 20px; padding-left: 5px;}
div.share * 		{float: left; margin-right: 4px;}
body[dir='rtl'] div.share * 
					{float: right; margin-left: 4px; margin-right: 0px;}

/** ----------------------------------------------------------------------
								 header  
---------------------------------------------------------------------- **/
div.header			{background-color: #ffeaea; min-height: 35px; vertical-align: middle; display: table;
						/**position: fixed; z-index: 100;**/
						box-sizing: border-box; width: 100%;			
						padding: 5px; overflow: auto;
						background: rgba(55,113,200,1);
						background: -moz-linear-gradient(left, rgba(55,113,200,1) 0%, rgba(55,113,200,1) 46%, rgba(19,103,183,1) 100%);
						background: -webkit-gradient(left top, right top, color-stop(0%, rgba(55,113,200,1)), color-stop(46%, rgba(55,113,200,1)), color-stop(100%, rgba(19,103,183,1)));
						background: -webkit-linear-gradient(left, rgba(55,113,200,1) 0%, rgba(55,113,200,1) 46%, rgba(19,103,183,1) 100%);
						background: -o-linear-gradient(left, rgba(55,113,200,1) 0%, rgba(55,113,200,1) 46%, rgba(19,103,183,1) 100%);
						background: -ms-linear-gradient(left, rgba(55,113,200,1) 0%, rgba(55,113,200,1) 46%, rgba(19,103,183,1) 100%);
						background: linear-gradient(to right, rgba(55,113,200,1) 0%, rgba(55,113,200,1) 46%, rgba(19,103,183,1) 100%);
						filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3771c8', endColorstr='#1367b7', GradientType=1 );
			}
			
body[dir='rtl'] div.header {
				background: rgba(73,155,234,0);
				background: -moz-linear-gradient(left, rgba(19,103,183,1) 0%, rgba(55,113,200,1) 54%, rgba(55,113,200,1) 100%);
				background: -webkit-gradient(left top, right top, color-stop(0%, rgba(19,103,183,1)), color-stop(54%, rgba(55,113,200,1)), color-stop(100%, rgba(55,113,200,1)));
				background: -webkit-linear-gradient(left, rgba(19,103,183,1) 0%, rgba(55,113,200,1) 54%, rgba(55,113,200,1) 100%);
				background: -o-linear-gradient(left, rgba(19,103,183,1) 0%, rgba(55,113,200,1) 54%, rgba(55,113,200,1) 100%);
				background: -ms-linear-gradient(left, rgba(19,103,183,1) 0%, rgba(55,113,200,1) 54%, rgba(55,113,200,1) 100%);
				background: linear-gradient(to right, rgba(19,103,183,1) 0%, rgba(55,113,200,1) 54%, rgba(55,113,200,1) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1367b7', endColorstr='#3771c8', GradientType=1 );
} 			

/** ----------------------------------------------------------------------
						container and billboard
---------------------------------------------------------------------- **/
div.container	{margin: 10px; /**margin-top: 80px;**/}
div.billboard	{background-color: #ffffff; opacity: 0.9; border-radius: 10px;
					padding: 5px; margin-bottom: 10px;}
			
div.note 	{margin: 10px; font-family: calibri; font-size: 12pt;}
/*th			{width: 50px; text-align: center;}*/
div.rates	{text-align: center; overflow-x:auto; margin-left: 165px; margin-right: -10px;}
body[dir="rtl"] div.rates
			{margin-left: -10px; margin-right: 135px;}
/**			Time
**/
div.time 	{text-align: initial; font-size: 10pt;}

/** ----------------------------------------------------------------------
								brief rates
--------------------------------------------------------------------- **/
div.brief					{width: 100%; display: block; overflow-x: scroll; overflow-y: hidden; text-align: center;}
div.brief_container			{
								overflow-y: visible;
								min-width: 1270px;
								min-height: 240px;
								display: -webkit-flex; /* Safari */
								-webkit-align-items: stretch; /* Safari 7.0+ */
								display: flex;
								align-items: stretch;
								flex-wrap: nowrap;
								}
div.brief_box 				{display: inline-block; position: relative; padding: 5px 5px 5px 5px; min-height: 240px; min-width: 232px;
								color: white; background-color: #03402e; margin: 2px 2px 2px 2px; border-radius: 5px;}
div.brief_box img			{height: 24px; background-color: #f2f2f2; border-radius: 3px; display: inline-block; margin: 5px 2px 5px 2px;}
div.brief_curr 				{font-size: 14pt; line-height: 14pt; font-weight: bold; margin-top: 5px;}
div.brief_curr div			{display: inline-block; line-height: 14pt; vertical-align: middle;}
div.brief_curr img			{height: 14pt;}
div.brief_info 				{text-align: center; width: 100%; position: absolute; bottom: 5px; left: 0px; font-size: 10pt;}
div.brief_buy, div.brief_sell 
					 		{
					 				display: inline-table;
					 				width: 100px;
					 				margin: 2px;
					 				padding: 0px 5px 0px 5px;
					 				font-size: 10pt;
					 				color: white;
					 				background-color: #404040;
					 				border-radius: 5px;
					 				}
div.brief_sell 				{background-color: #04347b;}
div.brief_title 			{font-size: 9pt; color: black; background-color: #e4e4e4; padding: 1px;}
div.brief_minititle 		{font-size: 8pt; padding: 1px; min-height: 20px; display: inline;}
div.brief_maxcontainer		{width: 100%; text-align: center; border-top: 1px solid silver; border-bottom: 1px solid silver;}
div.brief_average			{font-family: 'Droid Sans', sans-serif; font-size: 16pt; font-weight: bold; 
								color: black; background-color: white; border: 1px solid white;}
div.brief_max, div.brief_min {font-family: 'Droid Sans', sans-serif; font-size: 10pt; display: inline;}

/** ----------------------------------------------------------------------
								rates table
---------------------------------------------------------------------- **/
table 			{background-color: white; border: 0px solid silver; 
				border-collapse: collapse; table-layout: fixed; font-size: 9pt;}
body[dir='rtl'] table
				{font-size: 9pt;}
th				{padding: 0px 5px 0px 5px; border-left: 1px solid #057251; border-right: 1px solid #057251;
					background-color: #03402e; color: white; font-weight: normal;}
th				{cursor: pointer;}
th:HOVER		{background-color: #068e66;}
/** first row of currencies **/
body thead tr:FIRST-CHILD th {font-family: 'Fjalla One', sans-serif;}
body[dir='rtl'] thead tr:FIRST-CHILD th {font-family: inherit;}
thead tr:FIRST-CHILD th img 	{height: 12px; margin-top: 5px;}

thead tr:FIRST-CHILD th:HOVER,
thead tr th:FIRST-CHILD:HOVER	
				{background-color: #03402e; cursor: default;}

/** exclude first 2 cells in first column **/
thead th:FIRST-CHILD 	
				{cursor: auto;}
thead tr:FIRST-CHILD th 	
				{cursor: auto;}
/** sorting styling for columns **/
thead tr th.ascend:after
				{	content: ' ▲';}
thead tr th.descend:after 	
				{content: ' ▼';}

body[dir='rtl'] th
				{padding: 0px 5px 0px 5px;}
td				{font-family: 'Droid Sans', sans-serif; font-size: 9pt; font-weight: bold; padding: 5px; border: 0px solid black;
					position: relative;}
td.hover:HOVER 	{background-color: #dccee8; cursor: pointer;};

thead th {}				
				
/** fixed first column **/
table tr th:FIRST-CHILD			/*,table tr td:FIRST-CHILD*/
				{font-family: 'Fjalla One', sans-serif; position: absolute; width: 165px; left: 0; text-align: initial; border-top: 1px solid #057251;
					text-align: left; height: 24px; line-height: 24px;}
/** **/
table tr th:FIRST-CHILD div {height: 24px; vertical-align: middle; display: inline-block;}
table tr th:FIRST-CHILD img {width: 14px; border: 1px solid white; background-color: white; vertical-align: middle; margin-top: 4px;}					
body[dir="rtl"] table tr th:FIRST-CHILD			/*,body[dir="rtl"] table tr td:FIRST-CHILD*/ 
				{font-family: 'Amiri', serif; width: 135px; right: 0; left: inherit; text-align: right;}


/** fix broken first cell **/
thead tr th:FIRST-CHILD
				{height: 2.9em;}

/** zebra styling **/

tbody tr:nth-child(odd)
			{background-color: #e1e8ff;}
tbody tr:HOVER {background-color: #ecdef8;}
/*			{background-color: grey;}	*/

/**/
td.buy_rate		{color: #3f3f3f; border-right: 1px dashed silver; border-left: 2px solid #03402e; width: 60px; text-align: center; position: relative;}
td.sell_rate	{color: #066cb7; border-left: 0px; width: 60px; text-align: center;}

body[dir='rtl'] td.buy_rate		{border-left: 1px dashed silver; border-right: 2px solid #03402e;}
body[dir='rtl'] td.sell_rate	{border-right: 0px;}

/**td.empty		{background-color: #eeeeee; text-align: center;}**/

th a		{color: white; text-decoration: inherit;}
th a:ACTIVE {color: white; text-decoration: inherit;}
th a:VISITED {color: #f4f4f4; text-decoration: inherit;}

/**			indicator
**/
span.indicator_up	{color: green;}
span.indicator_down	{color: red;}

/**			tooltip
**/
span#title 	{ position: absolute; top: 20px; background: white; padding: 5px; left: 10px; border-radius: 5px;
    white-space: nowrap; z-index: 50; border: 1px solid grey; box-shadow: 0px 3px 3px #888888;}
body[dir='rtl'] span#title {right: 10px; left: inherit;}
/**	---------------------------------------------------------------------			
				Footer
--------------------------------------------------------------------- **/

div.footer	{font-size: 7pt; border-top: 1px solid black; padding: 5px; text-align: center; margin: 0px 10px 0px 10px;}

/** ---------------------------------------------------------------------
				Mobile phones
--------------------------------------------------------------------- **/
/*table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE" 
}*/

/* Landscape phones and down */
@media (max-width: 480px) { 
    div.share   	{ margin-top: 5px; }
    div.heading		{ margin-top: 10px;}
    body[dir='rtl'] div.heading
    				{ margin-top: 20px;}
}

div.site_block {
	background-color: white; border-radius: 5px; padding: 10px;
}

/** controls **/

select 		{height: 30; font-size: 12pt; padding: 0px 10px 0px 10px; border: 1px solid silver; border-radius: 5px;}