/* styles for rotating content box on upper right of home page */

.contentWrapper{
position: relative;
display: block;
text-align: right;
float: right;
width: 97.5%;
height: 300px;
direction: rtl;
margin: 0px 5px;
border: 2px solid #494949;
background-color: #eee;overflow: hidden;
z-index: 2;
}

.newsCategory{
position: absolute;
background-color: #eee;visibility: hidden;
margin: 3px;
padding: 3px;
}

.categoryToggler{
width: 100%;
margin-top: 6px;
text-align: center;
float: right;
clear: right;
overflow: hidden;
}

.categoryToggler a{
background: transparent url(../images/icons/square-gray-left.jpg) no-repeat top left;color: black;
display: block;
float: left;
margin: 0px 1px;
font: normal 12px Arial;
line-height: 19px;
height: 27px;
padding-left: 4px;
text-decoration: none;
}

.categoryToggler a span{
background: transparent url(../images/icons/square-gray-right.jpg) no-repeat top right;display: block;
padding: 4px 4px 4px 0;
vertical-align: center;
}

.categoryToggler a.selected{
background-position: bottom left;
color: black;
}

.categoryToggler a.selected span{
background-position: bottom right;
color: black;
}

.categoryToggler a:hover{
background-position: bottom left;
color: #860303;
}
.categoryToggler a:hover span{
background-position: bottom right;
color: #860303;
}

.categoryToggler a.toc{ 
}

.categoryToggler img {
float: right;
width: 20px;
height: auto;
margin: 0px 0px 0px 3px;
}

.categoryHeading {
}

.category {
font-weight: bold;
color: black;
margin: 5px;
}

.categoryLogo {
float: right;
margin: 0px 0px 0px 7px
}


/* styles for expandable content box on lower right of home page */

#latestIssueCategory {
display: block;
text-align: right;
float: right;
width: 95.5%;
height: 300px;
direction: rtl;
margin: 0px 5px;
vertical-align: top;
border: 2px solid #494949;
background-color: #eee;overflow-y: scroll;
overflow-x: hidden;
position: relative;
padding-right: 5px;
}

.latestIssueCategoryContents{
margin: -5px 3px 0px 0px;
padding: 3px;
position: absolute;
}

ul.dropdownlist{
font: normal 12px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
text-align: left;
list-style-type: none;
background: white;
border: 1px solid #414e6e;
direction: rtl;
}


ul.dropdownlist li a{
display: block;
background: #eee;
color: black;
text-decoration: none;
padding: 3px 5px 3px 3px;
}

ul.dropdownlist li a:hover{
background: #860303;
color: #eee;
}

ul.dropdownlist li.active a{
background: #eee;
color: #860303;
}




/* styles for category menu in right column */

div.categoryMenu {
float: left;
width: 100%;
font-family: Tahoma, sans-serif;
font-size: 9px;
font-weight: 600;
padding-bottom: 10px;
color: #eee;}

div.categoryMenu div {
background: url(../images/icons/elMasriIcons/title.jpg) repeat-x;overflow: hidden;
text-align: right;
}

div.categoryMenu div.collapsed {
height: 25px;
}

div.categoryMenu div span.languageName {
display: block;
padding: 5px 15px 5px 25px;
font-weight: bold;
color: #eee;background: url(../images/icons/expanded.gif) no-repeat right;cursor: pointer;
}

div.categoryMenu div.collapsed span.languageName {
background: url(../images/icons/collapsed.gif) no-repeat right;}

div.categoryMenu div a {
padding: 5px 10px;
background-color: #eee;display: block;
border-bottom: 1px solid #ddd;
color: #860303;
text-decoration: none;
}

div.categoryMenu div a.current {
background-color: #ccc;
text-decoration: none;
}

div.categoryMenu div a:hover {
background-color: #860303;
background: url(../images/icons/linkarrow.gif) no-repeat left center;color: #eee;text-decoration: none;
}



// styles for staff photo gallery

.portrait img {
display: block;
margin-left: auto;
margin-right: auto;
float: left;
clear: left;
}

.nameA {
font-size: 90%;
}
.titleA {
font-size: 75%;
}
.nameE {
display: block;
margin-left: auto;
margin-right: auto;
font-size: 90%;
float: left;
clear: left;
}
.titleE {
display: block;
margin-left: auto;
margin-right: auto;
font-size: 75%;
float: left;
clear: left;
}

div.sc_menu_wrapper {
  position: relative;
  height: 600px;
  width: 160px;
margin: 0px 10px 10px 10px;
  overflow: auto;
}
div.sc_menu {
  padding: 15px 0;
}
.sc_menu a {
  display: block;
  margin-bottom: 5px;
  width: 120px;
text-decoration: none;

  border: 4px #4f4f4f solid;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;              

  /* When image support is turned off */
  color: #fff;
  background: #4f4f4f;
}
.sc_menu a:hover {
  border-color: #828282;
  border-style: dotted;
}
.sc_menu img {
  display: block;
  border: none;
}

.sc_menu_wrapper .loading {
  position: absolute;
  top: 50px;
  left: 10px;

  margin: 0 auto;
  padding: 10px;

  width: 100px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;      

  text-align: center;
  color: #fff;
  border: 1px solid rgb(79, 79, 79);
  background: #1F1D1D;
}


// styles for mediaKit

#gallery {
background-color: #444;
padding: 10px;
width: 820px;
}

#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
width: 72px;
height: auto;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }

#mediaKitCover
{
width: 100px;
height: auto;
float: right;
}

.directive {
clear: left;
margin:40px 0px;
}

.invisible {
color: #eee;
clear: left;
margin:40px 0px;
}

// styles for tab menu

.colortabs{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.colortabs ul{
font: normal 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

.colortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
}

.colortabs a{
float:left;
color: white;
background: #828282 url(../images/icons/color_tabs_left.gif) no-repeat left top;margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

.colortabs a span{
float:left;
display:block;
background: transparent url(../images/icons/color_tabs_right.gif) no-repeat right top;padding: 6px 8px 3px 7px;
}

.colortabs a:hover{
background-color: #4f4f4f;
cursor: pointer;
}

.colortabs a:hover span{
background-color: #4f4f4f;
}

.colortabs a.current, #colortabs a.current span{ /*currently selected tab*/
background-color: #4f4f4f;
}

.colortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #828282;
border-top: 1px solid #eee; /*Remove this to remove border between bar and tabs*/
}

.tabcontainer{
clear: left;
width:95%; /*width of 2nd level sub menus*/
height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
}

.tabcontent{
display:none;
text-align: left;
font-size: .75em;
}

.tabcontent ul{
line-height: .5;
}

#tabs {
margin: 15px 5px;
}

#languagetab a{
float:right;
padding: 6px 8px 3px 7px;
}