/*------------------------------------------------------------*
**   Resets default browser CSS.
**   meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
**------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	/* vertical-align: baseline; */
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
/*	border-spacing: 0; */
}
/*
caption, th, td {
	text-align: left;
	font-weight: normal;
}
*/
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/*------------------------------------------------------------*
**  Global
**------------------------------------------------------------*/
html { height: 100%;  }
body {
	padding: 0;
	margin: 0;
	height: 100%;
    background-color: #2f2f59;
    font-family: Times New Roman;
}
a { color: #0000ff; text-decoration: none; }
a:hover { color: #1010a3;  text-decoration: underline;  }
small{ font-family: arial; font-size: 11px; }
h3{ font-family: arial; font-weight: bold; font-size: 13px; padding: 4px 0px; }
.avatarImg{ width: 64px; height: 64px; }
.redHover a { color: #1c1c8d; text-decoration: none; }
.redHover a:hover { color: #f20909; text-decoration: underline; }
/*------------------------------------------------------------*
**  Container
**------------------------------------------------------------*/
#mainContainer {
	height: auto !important;
 	height: 100%;
	min-height: 100%;
	position: relative;   
}
#whiteBG{       
    background-color: #ffffff;
}
#mainContainer:after {
    content: "."; 
    display: block; 
    clear: both;
    height: 0;
    visibility: hidden
}
#bodyContent{         
	margin: 0 auto;
	width: 950px;
    padding-top: 110px;
 	height: auto !important;
	min-height: 100%;     
}
#bodyContent:after {
	content: "."; 
	display: block; 
	clear: both;
	height: 0;
	visibility: hidden
}
/*------------------------------------------------------------*
**  Header
**------------------------------------------------------------*/
#header{
	background:url(../images/header/headerBG.gif) repeat-x;
	width:100%;
	height:100px;
	margin: 0 auto;
	padding: 0;
	position: fixed;
	top: 0px; 
    z-index: 100;  
}
#header #buttonUp{
    position: relative;
	top: -11px;
}
#header #content{
	width:950px;
	height:100px;
	margin: 0 auto;
	padding: 0;
}
#header #left{
        width:350px;
        float:left;
        text-align:left;
        padding-left: 50px;
        height: 53px;
}
#header #right{
        width:310px;
        float:right;
        text-align:left;
         height: 53px;
}
#header #remember{
        font-family: sans-serif;
        font-size: 11px;
        color: #ffffff;
}
#header a{
        font-family: sans-serif;
        font-size: 11px;
        color: #ffffff;
        text-decoration: none;
}
#header a:hover{
        color: #bbbbbb;
        text-decoration: underline;
}
#footer{
        clear: both;

        margin: 0px;
	width:100%;
	min-width: 950px;
	float:left;
	min-height:44px;
	background-image:url(../images/header/footerBG.gif);
	background-repeat:  repeat-x;
        background-color: #2f2f59;
	padding-top: 8px;
    margin-top: 5px; 
    height: 100%;
}

.footerText{ /* Currently used for "copyright arabicpod" text in footer */
	font-family: Bookman Old Style, Trebuchet MS, trebuchet, Geneva, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	text-align:center;
}



/*------------------------------------------------------------*
**  Navigation
**------------------------------------------------------------*/
/* =-=-=-=-=-=-=-[menu One]-=-=-=-=-=-=-=- */
#menu{
        clear: both; /* Need this here so it doesn't flow up */
        color: #ffffff;
	margin: 0 auto;
	padding: 0;
	font-family:Arial;
	font-weight: bold;
	padding-top: 4px;
}
#menu ul{
	margin: 0; /*removes indent IE and Opera*/
	padding: 0; /*removes indent Mozilla and NN7*/
	list-style-type: none; /*turns off display of bullet*/
        padding-left:25px;
}
#menu li
{
        width:100px;
        display:inline;
        text-align:center;
        float: left;
}
#menu li a {
	width: 100%;
        font-size: 13px;
	text-decoration: none;
        padding: 6px 0px 5px 0px;
        display:block;
        color: white;
        height: 30px;
}

#menu li a:hover {
	text-decoration: none;
	background: url(../images/header/buttonBG.gif) no-repeat;
        background-position: 0px -6px;
        height: 30px;
	color: #bcbcbc;
}

#menu li a:active {
	background: url(../images/header/buttonBG.gif) no-repeat;
        background-position: 0px -6px;
        height: 30px;
	color: #bcbcbc;
}
#menu #m_current a { /* Current page menu colour */
	background: url(../images/header/buttonBG.gif) no-repeat;
        background-position: 0px -6px;
        height: 30px;
	color: #bcbcbc;
}
	/* Hide from IE5-Mac \*/
#menu li a
{
float: none
}
/*------------------------------------------------------------*
**  Main Page
**------------------------------------------------------------*/
.MBoxOuter{
        width: 950px;
}

.MBoxOuter .MBoxInner{
        height: 100%;
        margin-top: -6px;
        background-color: #f1eff7;
        border-left: 1px solid #2f2f59;
        border-right: 1px solid #2f2f59;
        padding: 0px 10px;
}
.MBoxOuter .MBoxInner2{
        height: 100%;
        margin-top: -6px;
        background-color: #ffffff;
        border-left: 3px solid #9292c2;
        border-right: 3px solid #9292c2;
        padding: 0px 10px;
}
.MBlackHeader{
        font-family: verdana;
        font-size: 18px;
        font-weight: bold;
}
.MRedHeader{
        color: #eb0101;
        font-family: Lucida Bright;
        font-size: 18px;
        font-weight: bold;
        padding:12px 0px;
}
/*------------------------------------------------------------*
**  Box Backgrounds
**------------------------------------------------------------*/
/* 645px wide */
.BoxOuter645{
        width: 645px;
        float: left;
}

.BoxOuter645 .BoxInner645{
        height: 100%;
        margin-top: -4px;
        background-color: #f1eff7;
        border-left: 1px solid #2f2f59;
        border-right: 1px solid #2f2f59;
        padding: 0px 25px;
}
.BoxInner645 ul{
        list-style-type: disc;
        margin-top: 10px;
        margin-left: 14px;
}
.BoxInner645 li{
        margin-top: 10px;

}
.BoxOuter300{
        background-image: url(../images/splash/300BoxTop.gif); 
        background-repeat: no-repeat; 
        width: 300px;      
        margin-top: 6px;
}             
.BoxOuter300 .title{
        font-family: arial;
        font-size: 14px;
        font-weight: bold;
        color: #ffffff; 
        width: 300px;
        height: 35px;  
        padding-top: 12px;
        text-align: center;
}
.BoxOuter300 .BoxInner300{
        height: 100%;
        margin-top: -4px;
        background-color: #ffffff;
        border-left: 3px solid #6060af;
        border-right: 3px solid #6060af;
        padding: 0px 25px;     
}
.padTop10{
        padding: 10px 0px;
}

.error{
        border: 4px solid #a94e4e;
        background-color: #e4bebe;
        padding: 16px 10px 10px 65px;
        min-height: 40px;
        color: #b60000;
        font-family: arial;
        font-weight: bold;
        font-size: 16px;
        background-image: url(../images/splash/errorIcon.gif);
        background-repeat: no-repeat;
        background-position: 8px 8px;
        margin-bottom: 15px;
}
.error ul{
        list-style-type: disc;
        margin-top: 10px;
        margin-left: 14px;
}
.error li{
        margin-top: 5px;

}
.formBoldText{
        font-family: arial;
        font-weight: bold;
        font-size: 18px;
}
.formBoldText td{
        padding-top: 10px;
}
.formBoldText td input{
        font-size: 16px;
}
.left645{
        width: 645px;
        float: left;
        text-align: left;
}
.right300{
        width: 305px;
        float: right;
        text-align: left;
}
/*------------------------------------------------------------*
**  Lesson Box
**------------------------------------------------------------*/
.lessonBox {
	width: 622px;
	margin-top: 15px;
}
.lessonBox .boxtext{
	padding:0px 15px;
	background-image: url(../images/splash/lessonBoxSides.gif);
	background-repeat: repeat-y;
}
.lessonBox a{ color: #0048ff; text-decoration: none; }
.lessonBox a:hover{ color: #024889; text-decoration: underline; }
.lessonBox .lessonTitle{
	font-family: arial;
    font-weight: bold;
	font-size: 18px;
	color: #992c2c;
	margin-top:-5px;
	border-bottom: solid 2px #1c1c8d;   
}
.lessonBox .lessonTitle a{
	color: #1c1c8d;
	text-decoration: none;	
}
.lessonBox .lessonTitle a:hover {
	color: #f20909 !important;
}
.lessonBox .date{
	font-family: Arial;
	font-size:12px;
	font-weight:bold;
	padding-top: 2px;
	border-bottom: solid 1px #1c1c8d;
	width:130px;
}
.lessonBox .comment{
	font-family: Tahoma;
	font-weight: bold;
	font-size:13px;
	padding-top: 2px;
	border-bottom: solid 1px #1c1c8d;
	float:right;
}
.lessonBox .comment a{
	color: #1c1c8d;
	text-decoration: none;
}
.lessonBox .comment a:hover{
	color: #f20909;
}
.lessonBox .text{
	font: 12px Verdana, Lucida sans;
	padding: 6px; 
	line-height: 1.5em;
}
.lessonBox hr{
	color: #992c2c;
	height:1px;
}
.lessonBox .flashPlayer{
	margin-top:-6px;
	margin-bottom: -7px;
}
.lessonBox .additions{ /* PDFs, MP3 download etc */
	margin-top: -6px;
	font-family: Tahoma;
	font-weight: bold;
	font-size:13px;
}
.lessonBox .additions a{
	color: #1c1c8d;
	font-weight: bold;
	text-decoration: none;
}
.lessonBox .additions a:hover{ 
	color: #f20909;
	text-decoration: underline;
}
.lessonBox .additions td{ 
 	border-right:1px solid #1c1c8d;
 	text-align: center;
}
.lessonBox .additions th{ 
 	border-right:1px solid #1c1c8d;
 	border-bottom:1px solid #1c1c8d;
 	background-color: #ececf6;
 	color:#374f87;
 	font-size:11px;
 	padding-top:3px;
 	text-align: center;
 	font-weight: bold;
}
.lessonBox .additions .none{
 	border-right:0;
}
.lessonBox .borderRight{
	border-right: 1px solid #992c2c;
	padding-right:40px;
	padding-left:40px;	
}
.lessonBox .stats{
	font: 12px "Trebuchet MS",Verdana,Arial,sans-serif;
	text-align:center;
	padding-top:4px;
	margin-bottom: -5px;
	color: #4c5c4c;
}
.lessonBox .footer{
  
}
.la{ /* lesson additionals styles */
	padding:4px;
}
.la .name{
	color:#024889;
	font-weight:bold;
	background-color: #f2f3f9;
}
.la .desc{
	padding: 2px 8px;
	font-style: italic;
	margin-bottom:4px;
}
/* styles for lesson comments */
.comment_user{
    font:16px Britannic;
    color: #1c1c8d;   
    margin: 4px 5px; 
}
.comment_user a{
    color: #1c1c8d;
    text-decoration: none;
}
.comment_user a:hover{
    color: #f20909;
    text-decoration: underline;
}
.comment_comment{
    margin: 10px;
    font: 15px Calibri;
    clear: both;
    margin-top: 4px;
    word-wrap: break-word;
    width: 480px;
}
.comment_form_label{
    font:14px Arial;
    font-weight: bold;
    color: #575757;    
}
.comment_signin{
    margin-left: 140px;
    font: 16px Calibri;
    font-weight: bold;
}
.comment_signin a{
    color: #1c1c8d;
    text-decoration: none;    
}
.comment_signin a:hover{
    color: #f20909;
    text-decoration: underline;
}
.my-rtl {direction:RTL; unicode-bidi:embed; font-size:15px;} 
.pageHeading{
    font:20px Britannic Bold;
    line-height:24px;
    color: #1c1c8d;
} 
#tabs {
  float:left;
  width:100%;
/*  background:#F4F4F4; */
  font-size:93%;
  line-height:normal;
  }
#tabs ul {
  margin:0;
  /* padding:10px 10px 0 50px; */
  list-style:none;
  }
#tabs li {
  display:inline;
  margin:0;
  padding:0;
  }
#tabs a {
  float:left;
  background:url("../images/splash/tableftB.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 4px;
  text-decoration:none;
  }
#tabs a span {
  float:left;
  display:block;
  background:url("../images/splash/tabrightB.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#666;
  }

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
  color:#000;
  }
#tabs a:hover {
  background-position:0% -42px;
  }
#tabs a:hover span {
  background-position:100% -42px;
  }
#tabs #active a {
  background-position:0% -42px;
  }
#tabs #active a span {
color:#000;    
background-position:100% -42px;
}
#difficultyDetails {
    width: 705px;
    display: block;
    font-family:Arial;
    line-height: 1.5;
    background-color:#dfdfed;
    border-left: 1px solid #acacd3;
    border-right: 1px solid #acacd3;
    padding: 10px 10px 5px 10px;
    font-size: 14px;
}
.arrangeResults{ /* arrange Results option in lessons page */
    padding: 3px 10px;    
    background-color:#d0d0e4;
    font: 14px Arial;
    font-weight:bold;
    color: black;
    border-bottom: 5px solid white;
    border-top: 2px solid white;
        
}
.lessonResult{
    width: 670px;
    padding: 10px 10px 10px 10px;    
    display: block;
    font-size:13px;
}
.lessonResult .lessonTitle a{
    font: 18px Arial;
    color:black;
    text-decoration: none;
}
.lessonResult .lessonTitle a:hover{
    color:#0d1adc;
    text-decoration: underline;
}
.lessonResult a{
    color:#0d1adc;
    text-decoration: none;    
}
.lessonResult a:hover{
    color:#0d1adc;
    text-decoration: underline;    
}
.pageLink{ /* style for lesson page links and main page previous lessons link */
    margin: 10px;
    text-align: center;    
    font: 12px Arial;
    font-weight: bold;
}
.pageLink a{ /* style for lesson page links and main page previous lessons link */
    background-color:#e5e5f2;
    border: 1px solid #a2a2cb;
    padding: 4px;
    text-decoration: none;
    color: #4d4d4d;    
}
.pageLink a:hover{ /* style for lesson page links and main page previous lessons link */
    text-decoration: none;
    color: #ffffff;
    background-color:#024889;
}
.pageLinkSmall{ /* style for lesson page links and main page previous lessons link */
    margin: 2px;
    text-align: center;    
    font: 10px Arial;
    font-weight: bold;
}
.pageLinkSmall a{ /* style for lesson page links and main page previous lessons link */
    background-color:#e5e5f2;
    border: 1px solid #a2a2cb;
    padding: 2px;
    text-decoration: none;
    color: #4d4d4d;    
}
.pageLinkSmall a:hover{ /* style for lesson page links and main page previous lessons link */
    text-decoration: none;
    color: #ffffff;
    background-color:#024889;
}
.checklist ul{ 
     margin-top: 6px;
}
.checklist li{
     list-style-image: url(../images/splash/check.gif);
     margin-top: 2px;
     font-family: arial;
     font-size: 12px; 
     margin-left: 32px;     
}

.h3red{
    font-family: arial;
    font-weight: bold;
    font-size: 14px;
    padding: 4px 0px;
    color: #d30f0f;
}
#gradient-style-table
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    width: 480px;
    text-align: left;
    border-collapse: collapse;
}
#gradient-style-table th
{
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe url('../images/splash/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;
}
#gradient-style-table td
{
    padding: 8px; 
    border-bottom: 1px solid #fff;
    color: black;
    border-top: 1px solid #fff;
    background: #e8edff url('../images/splash/gradback.png') repeat-x;
}
#gradient-style-table tfoot tr td
{
    background: #e8edff;
    font-size: 12px;
    color: #99c;
}
#gradient-style-table tbody tr:hover td
{
    background: #d0dafd url('../images/splash/gradhover.png') repeat-x;
    color: #d30f0f; 
}
#gradient-style-table td.brown
{
    padding: 8px; 
    border-bottom: 1px solid #fff;
    color: black;
    border-top: 1px solid #fff;
    background: #ece3ff url('../images/splash/gradbackBrown.png') repeat-x;
}
#gradient-style-table tbody tr:hover td.brown
{
    background: #d9c8fc url('../images/splash/gradhoverBrown.png') repeat-x;
    color: #d30f0f; 
}

#gradient-style-table .selected
{
    background: #d0dafd url('../images/splash/gradhover.png') repeat-x;
    color: #d30f0f; 
}
#gradient-style-table .selectedBrown
{
    padding: 8px; 
    border-bottom: 1px solid #fff;
    color: #d30f0f; 
    border-top: 1px solid #fff;
    background: #d9c8fc url('../images/splash/gradhoverBrown.png') repeat-x;
}
.hidden { display: none; }
.unhidden { display: block; }
/*------------------------------------------------------------*
**  Dictionary
**------------------------------------------------------------*/
.arabic{
    font-size:20px;
    font-weight: bold;
    padding: 0px;
}
.desc{
    text-align: left;
    background-color: #fafafa;
    color: #808080;
    padding: 10px 6px;
    padding-right: 25px;
    border-top: 1px dotted #d5d5d5;
    border-left: 1px dotted #d5d5d5;
    border-bottom: 1px dotted #d5d5d5;
}
.relatedLessonsH{
    background-color: #fafafa;
    border-top: 1px dotted #d5d5d5;
    border-left: 1px dotted #d5d5d5;
    border-right: 1px dotted #d5d5d5;
    color: #a3a3a3;
    padding: 6px;
    font-family: arial black;
    letter-spacing: 4px;
}
#moreResults th{
    background-color: #fafafa;
    color: #7b7b7b;
    padding: 10px 6px;
    padding-right: 25px;
    border-top: 1px dotted #d5d5d5;
    border-left: 1px dotted #d5d5d5;
    border-right: 1px dotted #d5d5d5;    
}
#moreResults td{
    padding: 10px;    
}
.skypeUsers th{
        background-color:#5d5c89;
        font: 14px Garamond, Verdana;
        color: #ffffff;
        font-weight: bold;
}
.skypeUsers{
    padding: 4px;
    margin-top:8px;
    color: #400c0c;
    font: 14px Garamond, Verdana;
}
.skypeUsers .field a:hover{
    border-bottom: 1px dashed #bbb;
}
.skypeUsers .field tr:hover{ 
    background:#d4d0f0;
}
.formError
{
    color: #d60000;
    font-style: italic;
}
.profileComments tr:hover{ 
    background:#d4d0f0;
    color: #000000;
}
.profileComments td{
    padding: 8px;
}
/*- Menu 4--------------------------- */
    
#aboutus_menu {
    width: 130px;
    margin: 10px;
    border-style: solid solid none solid;
    border-color: #000;
    border-size: 1px;
    border-width: 1px;
    font-weight: bold;
    }
    
#aboutus_menu li a {
    height: 32px;
      voice-family: "\"}\""; 
      voice-family: inherit;
      height: 24px;
    text-decoration: none;
    }    
    
#aboutus_menu li a:link, #aboutus_menu li a:visited {
    color: #CCC;
    display: block;
    background:  url(../images/splash/about_us/contactMenu.gif);
    padding: 8px 0 0 10px;
    }
    
#aboutus_menu li a:hover {
    color: #FFF;
    background:  url(../images/splash/about_us/contactMenu.gif) 0 -32px;
    padding: 8px 0 0 10px;
    }   
    
#aboutus_menu #m_current a{
    color: #FFF;
    background:  url(../images/splash/about_us/contactMenu.gif) 0 -65px;
    padding: 8px 0 0 10px;
    }     

#activities_menu {
    width: 180px;
    margin: 10px;
    border-style: solid solid none solid;
    border-color: #000;
    border-size: 1px;
    border-width: 1px;
    font-weight: bold;
    }
    
#activities_menu li a {
    height: 32px;
      voice-family: "\"}\""; 
      voice-family: inherit;
      height: 24px;
    text-decoration: none;
    }    
    
#activities_menu li a:link, #activities_menu li a:visited {
    color: #CCC;
    display: block;
    background:  url(../images/activities/activitiesMenu.gif);
    padding: 8px 0 0 10px;
    }
    
#activities_menu li a:hover {
    color: #FFF;
    background:  url(../images/activities/activitiesMenu.gif) 0 -32px;
    padding: 8px 0 0 10px;
    }   
    
#activities_menu #m_current a{
    color: #FFF;
    background:  url(../images/activities/activitiesMenu.gif) 0 -65px;
    padding: 8px 0 0 10px;
    }     
    
    
.tablePadding td
{
    padding: 8px 0px;   
}
.tablePadding2 td
{
    padding: 6px 0px;   
}
.noPadding td
{
    padding: 0px;
}

td.blueHed
{ 
border-bottom: 2px solid #6699CC;
border-left: 1px solid #6699CC;
background-color: #BEC8D1;
text-align: center;
text-indent: 5px;
font-family: Verdana;
font-weight: bold;
font-size: 11px;
color: #404040;
height: 20px;
}

td.blueBod
{ border-bottom: 1px solid #9CF;
border-top: 0px;
border-left: 1px solid #9CF;
border-right: 0px;
text-align: left;
text-indent: 10px;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 11px;
color: #404040;
background-color: #fafafa; 
padding: 4px;}

.showEmoticons{ /* style for show imoticons link on add comment form */
    margin-right: 10px;    
    font-size: 14px;
    color: #024889;
    text-decoration: underline;    
    cursor:hand;
}
.shrinkImg img
{
   max-width: 320px;
   max-height: 80px;
}
#paypal_button input{ font-weight:bold; font-size:16px; padding: 10px; }
.accessTable table{
    margin:5px 0px;
}
.accessTable td{
    border-color:#beb5d7;
    border-width:1px;
    border-style: solid;
    font-family: times;
    font-weight: bold;
    color:#616161;
    text-align:center;
    padding: 5px 0px;
}
.redHoverTitle{
    font-family: arial;
    font-weight: bold;
    color: #992c2c;
}
.redHoverTitle a{
    color: #1c1c8d;   
}
.redHoverTitle a:hover {
    color: #f20909 !important;
}