body { 
    background:#CCCCCC url(../img/site_bg.jpg) repeat scroll left top;
    color:#616161;
    /*direction:rtl;*/
    font-family:"Traditional Arabic",Dejavu/*Homa*//*Nazli*/,serif;
    font-size:16px;
    margin-top:10px;
    padding:0;
    text-align:right;
    font-weight:bold;
} 

h1, h2, h3, span {
    margin-top: 0;
    text-transform: uppercase;
    color: #528DC8;
}

.flash_bad{
    background: #FFBC33 url(../img/wrong.png) no-repeat right top;
    font-size: 0.9em;
    height: 50px; /* set the div heigh manually to make the background image visible*/
    line-height: 50px; /* make the line-height of the div the same as the div height to centerize the inner text */
    border: 1px solid #FF8D1C;
    padding-right: 55px;
}

.flash_good{
    background: #65FF31 url(../img/success.png) no-repeat right top;
    font-size: 0.9em;
    height: 50px; /* set the div heigh manually to make the background image visible*/
    line-height: 50px; /* make the line-height of the div the same as the div height to centerize the inner text */
    border: 1px solid #2DB000;
    padding-right: 55px;
}

h1 {
    font-size: 1.3em;
    font-weight: normal;
}

h2 {
    font-size: 1.3em;
}

h3 {
    font-size: 1em;
}

span {
    font-size: 1em;
    display:inline;
}

a {
    text-decoration: none;
    color: #1D46A2;
    font-weight: bold;
}
a:hover {
    border-bottom: none;
    color: #528DC8;
}
a img {
    border: none;
}

/*///// Header /////*/
#masthead{
    width: 90%;
    min-width:754px;
    margin:0 auto;
}

/*///// Banner /////*/
#siteBanner{
    padding-bottom:5px;
}
#siteBannerLeft{
    background: url(../img/header_l.gif) no-repeat;
    float:left;
    width:32px;
    height:130px;
}

#siteBannerRight{
    background: url(../img/header_r.gif) no-repeat;
    float:right;
    height:130px;
    width:707px;
    color:#FFFFFF;
    font-size:20px;
}

#siteBannerRight img{
    border-width:0px;
    height:75px;
    width:347px;
    float:left;
}

#slogan{
    float:right;
    direction:rtl;
    padding:10px 0px;
}

#logoLink{
    float:right;
}

#logoLink a{
    height:130px; width:330px; display:block;
}

#siteBannerMid{
    background: url(../img/header_m.jpg) repeat-x;
    margin:0 9px 0 9px;
}

/* TopMenu */
#topMenu{
    width:100%;
    height:52px;
    padding-bottom:5px;
}

#topMenuLeft {
    width:12px;
    height:52px;
    float:left;
    background: url(../img/img-2_1_1.gif) no-repeat;
}

#topMenuRight {
    width:12px;
    height:52px;
    float: right;
    background: url(../img/img-2_3_1.gif) no-repeat;
}

#topMenuCenter {
    background: url(../img/img-2_2_1.gif) repeat-x;
    height:52px;
    margin: 0px 12px -19px 12px;
}

#topMenuCenter ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    direction: rtl;
    line-height:52px;
}

#topMenuCenter li {
    display: block;
    float:right;
}

#topMenuCenter a {
    margin: 0px;
    padding: 0px 30px;
    text-decoration: none;
    background: url(../img/img03.gif) no-repeat left ;
    color: #1D46A2;
    display: block;
}

#topMenuCenter a:hover {
    color: #fff;
    background: url(../img/hover.gif) repeat-x;
}

#wrapper {}
#page { 
    width: 90%;
    margin: 0px auto;
    min-width:754px;
}
#allContents{
    
}
#mainContent {
    background: url(../img/cont_bg.jpg) repeat left top;
    overflow:hidden;	/* this property is nessesary to hide the space between #contentHeader and #mainContent in FF, opera and IE8. see: http://www.codingforums.com/showthread.php?t=84484 */
    margin: 0px 0px 0px 184px;
}
#content{
    text-align:right;
    margin: 0px 190px auto 9px;
    border: 0px solid yellow;
}
#pageTitle{
    font-weight:bold;
    text-align:center;
}
#contentHeader {
    height:9px;
    line-height:9px; /* without this property the text will not be centered vertically (v-align:middle) if there is a text inside #contentHeaderMid div*/
    margin: 0 0 0 184px;
    /*the following 2 properties will cause no problem if the #contentHeaderMid had contain no text, and may affect the text size if there is */
    font-size:0px; /* this property is needed to solve the ie6 bug of increased empty div height if height <= 18px , as here: http://kempwire.com/ie/bizarre-empty-div-line-height-bug-in-ie6.html */
    line-height:0px; /* this property is needed to solve the ie6 bug of increased empty div height if height <= 18px */
}
#contentHeaderLeft {
    background: url(../img/cont_t_l.gif) no-repeat scroll left top;
    float:left;
    height:9px;
    width:12px;
}
#contentHeaderRight {
    background: url(../img/cont_t_r.gif) no-repeat scroll right top;
    float:right;
    height:9px;
    width:12px;
}
#contentHeaderMid {
    background: url(../img/cont_t_m.gif) repeat-x scroll 0 0;
    margin:0 12px;
    /*the following 2 properties will cause no problem if the #contentHeaderMid had contain no text, and may affect the text size if there is */
    font-size:0px; /* this property is needed to solve the ie6 bug of increased empty div height if height <= 18px , as here: http://kempwire.com/ie/bizarre-empty-div-line-height-bug-in-ie6.html */
    line-height:0px; /* this property is needed to solve the ie6 bug of increased empty div height if height <= 18px */
} 
#contentFooter {
    height:36px;
    line-height:36px; /* without this property the text will not be centered vertically (v-align:middle) if there is a text inside #contentFooterMid div*/
    margin: 0px 0 0 184px;
    border:0px red solid;
    /*the following 2 properties will cause no problem if the #contentFooterMid had contain no text, and may affect the text size if there is */
    font-size:0px; /* this property is needed to solve the ie6 bug of increased empty div height if height <= 18px , as here: http://kempwire.com/ie/bizarre-empty-div-line-height-bug-in-ie6.html */
    line-height:0px; /* this property is needed to solve the ie6 bug of increased empty div height if height <= 18px */
}
#contentFooterLeft{
    background: url(../img/cont_b_l.gif) no-repeat left bottom;
    float:left;
    height:36px;
    width:12px;
}
#contentFooterRight{
    background: url(../img/cont_b_r.gif) no-repeat right bottom;
    float:right;
    height:36px;
    width:12px;
}
#contentFooterMid{
    background: url(../img/cont_b_m.gif) repeat-x scroll 0 0;
    margin:0 12px;
    /*the following 2 properties will cause no problem if the #contentFooterMid had contain no text, and may affect the text size if there is */
    font-size:0px; /* this property is needed to solve the ie6 bug of increased empty div height if height <= 18px , as here: http://kempwire.com/ie/bizarre-empty-div-line-height-bug-in-ie6.html */
    line-height:0px; /* this property is needed to solve the ie6 bug of increased empty div height if height <= 18px */
    border:0px red solid;
}
#indicator{
    padding:0px 10px 10px 0;
    font-weight:bold;
}

.newsTitleBar{
    height:50px;
    line-height:50px; /* without this property the text will not be centered vertically (v-align:middle) */
}

.newsTitleBar div.left{
    background: url(../img/title_l.gif) no-repeat left top; height:50px; width:9px; float:left;
}

.newsTitleBar div.right{
    background: url(../img/title_r.gif) no-repeat right top; height:50px; width:9px; float:right;
}

.newsTitleBar div.mid{
    background: url(../img/title_m.gif) repeat-x;
    margin:0 9px;
    padding-right:5px;
}

.post {
    padding-bottom: 30px;
    margin-right: 3px;
    margin-left: 3px;
    line-height: 200%;
}

.post h1 {
    font-weight: bold;
}

.byline {
    margin: auto 10px 10px 10px;
}

.entry {
    padding: 0 5px;
    direction:rtl;
}
/*////////// tables ///////////*/
table.bordered{
    border-spacing: 0px;
    border-collapse: collapse;
    margin:10px 10px 0 0;
    width:95%;
    text-align: center;
}
table.bordered th{
    background-color:#0452A4; /*#0452A4;*/ /*#1D46A2;*/
    color:white;
    text-align:center;
}
table.bordered td{
    border: 1px solid #0452A4;
}
table.link img{
    float:left;
    display:inline;
    padding: 5px;
}

table.borderlessTable{
    /* when i created this selector i tried to use just the class name (.borderlessTable) but the priority of the selector (.entry table) was higher than this. so i useed the current formula */
    border-width: 0px;
}
table.borderlessTable td{
    border-width: 0px;
}

/*Attribute selectors. not supported in ie6 */
.post input[type="text"] {
    width:200px;
}
.post textarea{
    width:300px;
    height:120px;
}

.centered {
    text-align: center;
}

#pagination{ 
    padding-top:10px;
}

/*///// Sidebars /////*/

#sidebar1 {
    font-size:16px;
    float: right;
    margin: 0px 8px 0 0;
    border: 0px solid green;
}

#sidebar2 {
    /*float: left;*/
    margin:0 0 0 0px;
}

#sidebar2 li h2 {
    padding: 0 32px 10px 0;
}

#sidebar1 ul {
    padding-bottom: 20px;
}

/* (Child selectors: http://w3.org/TR/CSS2/selector.html#child-selectors) : Matches any div element that is a child of an element body. */
#sidebar1 > ul > li {
    margin-bottom:10px;
}

#sidebar1 li {
    background: url(../img/menu_b.gif) no-repeat left bottom;
}

#sidebar1 li ul {
    background: url(../img/menu_m.jpg) repeat-y left top;
}

#sidebar1 li li {
    background: url(../img/bullet.gif) no-repeat right 16px;
}

#sidebar1 li h2 {
    height: 25px;
    background: url(../img/menu_t.gif) no-repeat left top;
    color: #333333;
    padding: 8px 30px 0 0;
}

#sidebar1 li li a {/*font-size: 18px;*/}

#rightMenu, #topMenu{
    font-size:1.1em;
}

.sidebar {
    float: left;
    width: 180px;
}

.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar li {
    padding: 0 0 20px 0;
}

.sidebar li ul {}

.sidebar li li {
    margin: 0 10px 0 10px;
    padding: 8px 14px 8px 3px;
    border-bottom: 1px #B5B5B5 dashed;
    background: url(../img/bullet.gif) no-repeat right 17px;
    text-align: right;
    line-height:1.3em;
    font-weight:bold;
}


.sidebar li h2 {
    height: 30px;
    margin: 0 0 0 0;
    background: url(../img/block_head.jpg) no-repeat center top;
    font-size: 20px;
    color: #FFFFFF;
}

/* Footer */
#siteFooter {
    width: 90%;
    min-width:754px;
    height: 70px;
    margin: 0 auto;
    padding-left: 20px;
}

#siteFooter p {
    margin: 0;
    padding: 25px 0 0 0;
    font-size: smaller;
}

#siteFooter a {}

#siteFooter .link {
    float: right;
}

#siteFooter .copyright {
    text-align:center;
    font-weight:bold;
}


/* palyer styles*/
.parents{

    padding-right:15px;
}
.fileInfo{
    display:none;
}
.player{
    height:6px;
    text-align:center;
}
.listen{
    cursor:pointer;
    color:#0000CC;
}