/* ---------------------------------------------------------------

	English Stylesheet for KRCS
	Kuwait Red Crescent Society
	
	Developed by: KCCG (Kuwaiti Canadian Consulting Group)

--------------------------------------------------------------- */

/* ------ HTML Tags ------ */
body {
	font:16px "Lucida Sans",verdana,arial,sans-serif;
	background:#D6D5EE;
	text-align:center;
	margin:0px;
	padding:0px;
}
div,p,td,span {
	direction:rtl;
}

h1,h2,h3,h4,h5,h6 {
	margin:0px;
	padding:0px;
}
a {
	color:#393484;
	text-decoration:none;
}
a:hover {
	color:#FFF;
	text-decoration:underline;
}
h2 {
	color:#990000;
	text-align:right;
	font:20px "Lucida Sans",verdana,arial,sans-serif;
	text-transform:uppercase;
}
h3 {
	font:bold 15px "Lucida Sans",verdana,arial,sans-serif;
}
h3.archive {
	font:16px "Lucida Sans",verdana,arial,sans-serif;
	color:#990000;
}
h3 a:hover {
	color:#990000;
}
a span {
	display:none;
}


/* ------ Various Class ------ */
.clear {
	clear:both;
}


/* ------ Layout ------ */
#container {
	width:720px;
	height:450px;
	margin:0px auto;
	text-align:right;
	position:relative;
	z-index:0;
	margin-top:5%;
	background:transparent url("../images/bg_contentarea.jpg") no-repeat bottom right;
}
#topcontent {
	background:transparent url("../images/bg_topcontent.jpg") no-repeat top right;
	width:687px;
	height:165px;
	position:absolute;
	z-index:1;
}
#wrap {
	position:relative;
	z-index:2;
	height:auto !important;
	height:1px;
}



#webtitle {
	position:relative;
	z-index:1;
	background:transparent url("../images/bg_krcs_arabic.gif") no-repeat top right;
	width:413px;
	height:77px;
	top:20px;
	right:30px;
}
#webtitle span {
	display:none;
}
#webtitle h1 a,
#webtitle-int h1 a {
	display:block;
	width:413px;
	height:77px;
}
#content-area {
	position:relative;
	z-index:1;
	width:230px;
	top:30px;
	right:35px;
}
#content-area p {
	color:#333;
	line-height:18px;
	margin:0px;
	padding:0px;
}

/* Photo */
#photo {
	position:absolute;
	bottom:-28px;
	left:5px;
	width:449px;
	height:329px;
	background:transparent url("../images/bg_photo.gif") no-repeat top right;
	z-index:10;
}
#photo .img-pict {
	position:absolute;
	top:32px;
	right:27px;
}

/* Footer */
#footer {
	width:720px;
	margin:0px auto;
	text-align:right;
	position:relative;
	z-index:0;
}
#footer p {
	margin:0px;
	padding:0px;
	color:#FFF;
	margin-right:10px;
}
#footer p a {
	color:#FFF;
	text-decoration:underline;
}



/* ------ Interior page ------ */
#container-interior {
	width:762px;
	margin:0px auto;
	position:relative;
	text-align:right;
	background:transparent url("../images/bg_krcs_interior.jpg") repeat-y top right;
}
#interior-top {
	background:transparent url("../images/bg_interior_top.jpg") no-repeat top right;
	position:absolute;
	top:0px;
	right:0px;
	width:762px;
	height:212px;
}

#webtitle-int {
	position:relative;
	text-indent:-9000px;
	z-index:1;
	background:transparent url("../images/bg_krcs_interior_arabic.gif") no-repeat top left;
	top:25px;
	right:30px;
	height:68px;
	width:341px;
}

#page {
	position:relative;
	z-index:10;
	width:694px;
	right:35px;
	top:40px;
	padding-bottom:50px;
}
#page-content {
	padding-bottom:30px;
}
#page-content,
#page-content p {
	font:16px "Lucida Sans",verdana,arial,sans-serif;
	color:#333;
	line-height:25px !important;
	margin-bottom:10px;
	position:relative;
	z-index:1000;
}
h2.pagetitle {
	margin-bottom:20px;
	margin-top:10px;
	font-size:30px;
}
#archive {
	background:#E4E1F4;
	padding:10px 0px;
	border:1px solid #CCC;
	margin-top:20px;
}
#archive-content {
	width:95%;
	margin:0px 10px;
}
#archive ul {
	margin:0px;
	padding:0px;
	margin-top:10px;
}
#archive ul li {
	list-style:none;
	width:150px;
	float:right;
	border-bottom:1px dotted #CCC;
}
ul.archive {
	margin:0px;
	padding:0px;
	margin-top:10px;
}
ul.archive li {
	width:250px;
	list-style:none;
	float:right;
	border-bottom:1px dotted #CCC;
}
ul.archive li a {
	padding:2px 0px;
}

/* ------ Top Content ------ */
#content-top {
	width:690px
	position:relative;
	margin:0px auto;
	text-align:right;
	z-index:10;
	margin-left:25px;
	margin-bottom:50px !important;
	margin-bottom:30px;
	
}
#welcome {
	width:350px;
	margin-right:40px;
	position:relative;
	margin-top:60px;
	z-index:100;
}
#welcome h2 {
	color:#990000;
}
#welcome p {
	font:14px "Lucida Sans",verdana,arial,sans-serif;
	color:#535353;
	line-height:20px;
	margin-top:4px;
	position:relative;
}
#photo-interior {
	position:absolute;
	top:120px;
	left:40px;
	z-index:100;
	background:transparent url("../images/bg_photos_int.gif") no-repeat top left;
	width:317px;
	height:253px;
}
#photo-interior img{
	position:relative;
	top:40px;
	right:26px;
}


/* ------ Content Middle ------ */
#content-middle {
	background:#E1DFF3;
	width:724px;
	text-align:right;
	border-bottom:8px solid #D7D3EF;
	margin:0px auto;
	
}
#middle {
	margin:0px auto;
	width:700px;
	padding:10px 0px !important;
	padding:5px 0px;
}
#middle h2 {
	margin-right:10px;
	text-transform:uppercase;
	/*background:transparent url("../images/bg_news_icon.gif") no-repeat top right;
	padding-right:18px;*/
}
#middle h2 a {
	/*background:transparent url("../images/bg_news_icon.gif") no-repeat top right;
	padding-right:18px;
	padding-top:2px;*/
}
#content-middle ul {
	width:700px;
	margin:0px auto;
	margin-right:10px;
	padding:0px;
}
#content-middle ul li {
	list-style:none;
	float:right;
	width:220px;
	margin-left:10px;
}
.date {
	background:#D7D3EF url("../images/bg_date.gif") no-repeat 99% 40%;
	margin-top:15px;
	padding:3px 0px;
	border:1px solid #C9C6EA;
}
.date p {
	font-size:12px !Important;
}
#middle li p {
	color:#4573A5;
	width:180px;
	padding-right:23px;
}

/* ------ Content Bottom ------ */
#content-bottom {
	width:700px;
	margin:0px auto;
	padding:20px 0px;
	position:relative;
	z-index:100;
}
#content-bottom h2 {
	margin-right:10px;
	text-transform:uppercase;
	background:transparent url("../images/bg_picture.gif") no-repeat top right;
	padding-right:18px;
}

ul.gallery {
	margin:0px;
	padding:0px;
	margin-right:5px;
	margin-top:10px;
	min-height:100px;
	z-index:1000;
	padding-bottom:10px;
}
ul.gallery li {
	list-style:none;
	display:block;
	float:right;
	margin-left:10px;
	background:none !important;
	padding:0px !important;
	height:auto !Important;
	height:110px;
	min-height:110px;
}
ul.gallery li img {
	border:1px solid #CCC;
	padding:2px;
}


/* Browse More */
#browse-more {
	margin-top:10px;
	padding-bottom:20px;
}
#browse-more h3 {
	font:18px "Arial Narrow",verdana,arial,sans-serif;
	color:#990000;
	margin-bottom:8px;
}



/* List Items */
ul.browse {
	font:14px/20px "arial narrow",verdana,arial,sans-serif;
	height:auto !important;
	height:20px;
	margin:0px;
	padding:0px;
	width:600px;
}
ul.browse li {
	list-style:none;
	float:right;
	width:270px;
	margin-left:8px;
	font-size:14px;
}
ul.browse li a {
	background:transparent url("../images/bg_page.gif") no-repeat top right;
	padding-right:19px;
	display:block;
	border-bottom:1px solid #CCC;
}

#page-content ul {
	margin:8px 0px;
	padding:0px;
}
#page-content ul li {
	list-style:none;
	display:block;
	background:transparent url("../images/bg_list.gif") no-repeat center right;
	padding-right:15px;
	margin-bottom:3px;
}

ul.news {
	font:14px/20px "Lucida Sans",verdana,arial,sans-serif;
	height:auto !important;
	height:20px;
	margin:0px;
	padding:0px;
	width:620px;
	margin-bottom:20px;
}
ul.news li {
	list-style:none;
	float:right;
	width:290px;
	margin-left:8px;
}
ul.news li a {
	background:transparent url("../images/bg_newspaper.gif") no-repeat center right;
	padding-right:19px;
	display:block;
}

/* ------ Sitemap ------ */
ul.sitemap {
	margin:0px;
	padding:0px;
	margin-top:15px;
}
ul.sitemap ul {
	margin:0px;
	padding:0px;
}
ul.sitemap li {
	list-style:none;
	font:13px/25px arial,sans-serif;
	display:block;
	height:auto !important;
	height:25px;
	padding:0px !important;
	background:none !important;
}
ul.sitemap li a {
	background:transparent url("../images/bg_page.gif") no-repeat 100% 30%;
	padding-right:19px;
	display:block;
	text-decoration:none;
	border-bottom:1px solid #CCC;
	font-weight:bold;
	color:#393484;
	text-transform:uppercase;
}
ul.level1 li a {
	background:transparent url("../images/bg_sitemap_l1.gif") no-repeat 98% 30%;
	padding-right:33px;
	font-weight:normal;
	color:#333;
	text-transform:capitalize;
}
ul.level2 li a {
	background:transparent url("../images/bg_sitemap_l2.gif") no-repeat 96% 30%;
	padding-right:43px;
	font-weight:normal;
	color:#666;
	text-transform:capitalize;
}
ul.sitemap a:hover {
	color:#333 !important;
	text-decoration:underline;
}





/* ------- Footer Interior ------- */
#footer-int {
	background:transparent url("../images/bg_interior_bottom.jpg") no-repeat top right;
	width:762px;
	height:125px;
	position:absolute;
	z-index:1;
	bottom:-30px;
	right:0px;
}
#footer-int p {
	position:absolute;
	bottom:-20px;
	right:15px;
}
#footer-int .social {
	position:absolute;
	bottom:-20px;
	left:10px;
}
#footer-int .social a {
	width:32px;
	height:32px;
	display:block;
	float:left;
	margin-right:8px;
}


/* ------ Navigation ------ */
#nav {
	margin-right:72px;
	padding-top:13px;
	position:relative;
	z-index:10000;
}
#nav-int {
	margin-right:115px;
	padding-top:24px;
	position:relative;
	height:30px;
	z-index:10000;
}
#nav ul,
#nav-int ul {
	margin:0px;
	padding:0px;
}
#nav li a,
#nav-int li a {
	color:#393283;
	display:block;
	font:bold 14px/30px verdana,arial,verdana,sans-serif;
	height:auto !important;
	height:30px;
	position:relative;
	z-index:10000;
	padding:0px 5px;
}
#nav li a:hover,
#nav-int li a:hover {
	color:#333;
	background:#CAC6EB;
}



/* ------ JDMenu ------ */
ul.jd_menu {
	position: relative;
	margin: 0px;
	padding: 0px;
	height: 19px;
	list-style-type: none;
	margin-top:3px !important;
	margin-right:0px !important;
	z-index:10000;
}

ul.jd_menu ul {
	display: none;
}
ul.jd_menu a, 
ul.jd_menu a:active,
ul.jd_menu a:link,
ul.jd_menu a:visited
{
	text-decoration: none;
	color: #333;
	
}
ul.jd_menu li {
	float: right;
	font:14px/20px "Lucida Sans",Tahoma, sans-serif;
	height:auto !important;
	height:20px;
	cursor: pointer;
	white-space: nowrap;
	color: #333;
	width:100px;
	text-align: center;
}
ul.jd_menu li.jd_menu_hover_toolbar {
	color: #333;
	background:#CAC6EB;
}
ul.jd_menu a.jd_menu_hover_toolbar {
	color: #333;
	background:#CAC6EB;
}
ul.lev1 a {
	color:#333 !important;
	background:#CAC6EB;
}

/* -- Sub-Menus Styling -- */
ul.jd_menu ul {
	position: absolute;
	display: none;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	background: #CAC6EB;
	z-index:1000;
}
ul.jd_menu ul li {
	float: none;
	margin: 0px;
	background: #CAC6EB;
	border: none;
	color: #333 !important;
	width:250px;
	text-align:right;
	z-index:1000;
	font:13px verdana,arial,sans-serif !important;
}
ul.jd_menu ul li.jd_menu_hover {
	color: #333 !important;
}
ul.jd_menu ul a, 
ul.jd_menu ul a:active,
ul.jd_menu ul a:link,
ul.jd_menu ul a:visited {
	text-decoration: none;
	color: #333;
	padding:0px 10px;
	z-index:1000;
}
ul.jd_menu ul a:hover {
	background:#393283 !important;
}
ul.jd_menu ul a.jd_menu_hover {
	color: #FFF !important;
	background:#393283;
}

ul.jd_menu ul ul {
	background:#393283;
}
ul.jd_menu ul ul li {
	background:#393283;
	color:#FFF !important;
}
ul.jd_menu ul ul a {
	color:#FFF;
}
ul.jd_menu ul ul a.jd_menu_hover {
	color: #FFF;
	background:#393283;
}
ul.lev1 li a {
	color:#333 !important;
}
ul.lev2 li a {
	color:#FFF !important;
}

/* ------ Javascript Hit ------ */
/* All form elements are within the definition list for this example */
dl {
	font:normal 15px/15px Georgia,verdana,arial,sans-serif;;
    position: relative;
    width: 450px;
}
dt {
    clear: both;
    float:right;
    width: 150px;
    padding: 4px 0 2px 0;
    text-align: right;
}
dd {
    float: right;
    width: 250px;
    margin: 0 0 10px 0;
    padding-right: 6px;
}


/* The hint to Hide and Show */
.hint {
   	display: none;
    position: absolute;
    left: -250px;
    width: 200px;
    margin-top: -4px;
    border: 1px solid #c93;
    padding: 10px 12px;
    /* to fix IE6, I can't just declare a background-color,
    I must do a bg image, too!  So I'm duplicating the pointer.gif
    image, and positioning it so that it doesn't show up
    within the box */
	font:11px arial,verdana,sans-serif;
}

/* The pointer image is hadded by using another span */
.hint .hint-pointer {
    position: absolute;
    right: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background:transparent url("../images/pointer.gif") left top no-repeat;
}

/* Poll */
#poll {
	position:relative;
	color:#333;
	font:13px Arial,Georgia,verdana,arial,sans-serif;
	display:block;
}
#poll h3 {
	margin-bottom:15px;
}
#poll .radio {
	position:relative;
	top:3px;
}
#poll span {
	position:relative;
	top:-7px;
	padding-right:3px;
}
.poll-line {
	padding:2px 0px;
}
.poll-question {
	margin-bottom:10px;
	
}
#poll-question {
	float:right;
	width:310px;
}

#result-div {
	float:left;
	width:320px;
}

.albums {
	width:85px;
	height:85px;
	float:right;
	margin:10px;
	border:1px solid #CCC;
	position:relative;
}
.albums div.caption {
	font:12px georgia,verdana,sans-serif;
	text-align:center;
	position:absolute !important;
	padding:5px 0px;
	display:block;
	color:#000;
	width:85px !important;
	bottom:0px !important;
}

/* Superfish */
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	line-height:	1.0;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			right;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	right:			0;
	top:			2em; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	right:			10em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	right:			10em; /* match ul width */
	top:			0;
}


/*** DEMO SKIN ***/
.sf-menu {
	
	margin-bottom:	1em;
}
.sf-menu a {
	border-right:	1px solid #fff;
	border-top:		1px solid #CFDEFF;
	padding: 		.75em 1em;
	text-decoration:none;
	text-align:center;
	padding-left:13px !important;
	padding-right:13px !important;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#13a;
}
.sf-menu li {
	background:		none;
}
.sf-menu li li {
	background:		#CAC6EB;
}
.sf-menu li li li {
	background:		#CAC6EB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:		#CAC6EB;
	outline:		0;
}
.sf-menu li li a {
	text-align:right !Important;
	color:#000 !Important;
}
.sf-menu li li a:hover {
	background:#00539A !Important;
	color:#FFF !Important;
	text-decoration:none !important;
}
ul.lev2 {
	right:12.5em !important;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-left: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../images/shadow.png') no-repeat bottom left;
	padding: 0 0 9px 8px;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-left-radius: 17px;
	-webkit-border-bottom-right-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}


/* Search */
#search {
	position:absolute;
	z-index:100;
	width:200px;
	left:40px;
	top:90px;
}
.imgsearch {
	top:3px;
	position:relative;
}
.search-result {
	border-bottom:1px solid #E0DFF1;
	padding-bottom:10px;
	margin-bottom:15px;
}
.search-result h3{
	font-size:15px;
}
p.search-content {
	margin-bottom:0px !important;
}
p.search-url {
	font-size:11px !important;
	margin:0px !Important;
	padding:0px !important;
	color:#127F4F !important;
}

p.welcometext {
	font-size:13px !important;
	top:30px;
}

ul.founder {
	margin:0px;
	padding:0px;
	width:693px;
	height:auto !Important;
	height:300px;
	min-height:300px;
}
ul.founder li {
	width:170px;
	float:right;
	margin:10px;
	height:auto !important;
	height:250px;
	min-height:250px;
	background:none !important;
	padding:0px !Important;
}
ul.founder li img {
	padding:4px;
	background:#FFF;
	border:1px solid #CCC;
}
ul.foounder li div {
	text-align:center;
	font:14px arial,verdana,sans-serif;
}

.theimg p,
.theimg {
	font-size:13px !important;
}



/* Form Details */
.form-item {
	padding:4px 0px;
	border-bottom:1px solid #CCC;
}
.form-item label {
	width:80px;
	float:right;
}
.noborder {
	border:0px !important;
}

#details p, #details label {
	color:#333;
}

.loading-info p {
	padding:4px 0px;
	font-weight:bold;
	color:#990000;
	text-align:center;
	margin-bottom:8px;
	background:#D7D3EF;
	border-top:1px solid #C9C6EA;
	border-bottom:1px solid #C9C6EA;
}
textarea {
	font-size:12px;
	padding:4px;
}

#others {
	width:680px;
	margin:0px auto;
	padding:0px;
	background:#EFEEF6;
	position:relative;
	top:-25px;
}
.thelinks {
	background:#E1DFF3;
}
.thelinks-content {
	width:95%;
	margin:5px auto;
	padding:10px 0px;
}
.thelinks h3 {
	color:#990000 !important;
}
.thelinks a.thelinks-source {
	float:right;
	width:105px;
}

#poll {
	display:block;
	position:relative;
	z-index:1000;
}
#poll p {
	display:block !important;
}
a.discussion {
	display:block !important;
	float:right;
	right:0px;
	top:0px;
}

#fix-index {
	display:block;
	position:relative;
	z-index: 100000;
}

.thelinks .source-link {
	width:300px;
	float:right;
	margin-left:10px;
}
.last-link {
	margin-left:0px !important;
	text-align:center;
}

.social {
	margin-right:10px;
	display:block;
}
.social a {
	margin-left:5px;
}