/*
Project  : Abdulnasser Gharem
Comments : Layout-only styles. 
Author   : John Tsevdos
email    : tsevdosjohn@googlemail.com

version : 0.8
*/

@import "reset.css";
@import "typography.css";


/* ELEMENTs
-------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 20px 0; text-transform: uppercase; color: #000; letter-spacing: 0.2em; font-weight: 900; font-size: .9em;
}

h4, h5, h6 {
	margin-bottom: 0;
}

input, textarea {
	font-size: 1em;
}

hr {
	border: 0; border-top: 1px dashed #a4a19e; margin: 1.5em 0; line-height: 0; height: 0;
}


/* CLASSes
-------------------------------------------------------------- */


/* navs */
	.nav {
		list-style: none; margin: 0; padding: 0; list-style-position: outside;
	}

	.nav a {
		padding:1px 1px 1px 15px; background: transparent url(../images/sprite_bracket.gif) 2px 1px no-repeat;
		font-size:0.95em; font-weight:bold; letter-spacing:0.2em; text-transform:uppercase; color:#000; text-decoration:none;
	}
	
	.nav a:hover {
		color:#fff; background: #d87f06 url(../images/sprite_bracket.gif) -728px 1px no-repeat;
	}
	
	.nav .here a,
	.nav .here a:hover,
	.nav .current a,
	.nav .current a:hover,
	.nav .active a,
	.nav .active a:hover {
		color:#d87f06; background: transparent url(../images/sprite_bracket.gif) -363px 1px no-repeat;
	}
	
	.subnav {
		margin: 0;
	}
	
	.subnav a {
		color:#8f8f8f;
	}
	
	.subnav a:hover {
		color: #fff;
	}

	.subnav .active a,
	.subnav .current a,
	.subnav .here a,
	.subnav .parent-here a,
	.subnav .here a:hover,
	.subnav .parent-here a:hover,
	.subnav .active a:hover,
	.subnav .current a:hover {
		color:#d87f06; background: transparent url(../images/sprite_bracket.gif) -363px 1px no-repeat;
	}

/* audo flowplayer */
.audioflowplayer {
	display: block; width: 420px; height: 30px;
}	

.videoflowplayer {
	display: block; width: 420px; height: 345px;
}

/* COMMON IDs
-------------------------------------------------------------- */
	h1#site_title {
		margin: 0; font-size:1.1em;
	}
	
	h1#site_title a {
		text-decoration: none; color: #000;
	}

	h2#site_subtitle {
		margin:15px 0 10px; padding:0 0 5px; font-size:1em; font-weight:normal; letter-spacing:0.1em; color:#a4a19e; border-bottom:1px dashed #a4a19e;
	}
	
	#credits {
		position: fixed; bottom: 10px; left: 35px; font-family: Arial, sans-serif; font-size: 9px; color: #999;
	}
	
	#credits a {
		color: #999;
	}
	
	#credits a:hover {
		color: #000;
	}
	
/* Language Switcher

/* LANGUAGE SWITCHER
-------------------------------------------------------------- */
#language_switcher {
	position: absolute; top: 0; left: 0px; width: 20em; z-index: 100;
}

	#language_switcher li {
		display: inline; float: left; list-style: none; margin-right: 1px;
	}
	
		#language_switcher a {
			display: inline; float: left; width: 7em; color: #fff; text-decoration: none; font-family: Arial; font-weight: 900;
			text-align: center; line-height: 11px; padding: 3px 0; text-transform: uppercase; font-size: 8px;
			background-color: #000;
		}
		
		#language_switcher a:hover {
			color: #fb8902;
		}
		
		#language_switcher .ar a {
			font-size: 10px;
		}
		
		#language_switcher a.active {
			color: #000; background-color: #fb8902;
		}

		#language_switcher li.last a {
			background-image: none;
		}

		#language_switcher li.arabic a {
			line-height: 14px; margin-top: -3px;
		}
	

/* Index
-------------------------------------------------------------- */
	body.index #container { width:290px; margin:137px 0 0 0; padding:35px; background:#fff; border:1px solid #f2f2f1; 
	/* Cross-browser transparency */
		opacity:0.9;/*css3*/
		filter:alpha(opacity=90);/*msie*/
		-moz-opacity:0.9;/*firefox1.0*/
		-khtml-opacity:0.9;/*webkit*/
	}

	body.index #container #nav { margin:0 0 0 30px; height:250px; }
	
	body.index #container #info { padding:10px 0 0; background:transparent url(../images/left_arrow.gif) 0 0 no-repeat; }
	body.index #container #info ul { margin:0; padding:5px 0 0; list-style-type:none; line-height:1.1em; border-top:1px dashed #a4a19e; }
	body.index #container #info ul li { list-style-type:none; font-size:0.9em; letter-spacing:0.2em; text-transform:uppercase; color:#000; }
	body.index #container #info ul li a { color:#000; }


/* PAGE
-------------------------------------------------------------- */
	
	body.page #container { width:1000px; border:0; margin:0; padding:0; }
	
	body.page #container .leftColumn { width:422px; margin:28px 0 0 0; padding:35px 35px 28px 36px; float:left; display: inline; }
	
	body.page #container #navigation { border-bottom:1px dashed #898ea6; padding:0 0 20px; }
	body.page #container #nav { width:170px; float:left; display: inline; margin:0 20px 0 30px; }
	 
	body.page #container #subnav { width:200px; float:left; display: inline; }
	
	body.page #container #subnavigation { padding:0 0 0 220px; }
	body.page #container #subnavigation h2 { margin:15px 0 10px; font-size:1em; font-weight:bold; letter-spacing:0.1em; }
	
	body.page #container .rightcolumn { float:left; display: inline; width:505px; margin-top:125px; overflow: visible; }

	body.page #container .rightcolumn img.leading {
		display: block; margin-bottom: 20px;
	}

	body.page #container .rightcolumn .text { padding-right:85px; overflow: visible; width: 420px; }
	body.page #container .rightcolumn .text p { color:#808080; }
	
	body.page #container .rightcolumn .text ol li,
	body.page #container .rightcolumn .text ul li {
		margin-bottom: 1em;
	}

/* Projects
-------------------------------------------------------------- */
	body.projects { overflow: hidden; }
	body.projects #container { width:422px; padding:35px 35px 28px; background:#fff; border:1px solid #f2f2f1; position: relative; overflow: hidden; z-index: 10; top: 27px;
	/* Cross-browser transparency */
		opacity:0.9;/*css3*/
		filter:alpha(opacity=90);/*msie*/
		-moz-opacity:0.9;/*firefox1.0*/
		-khtml-opacity:0.9;/*webkit*/
	}
	
	body.projects .wrapper {
		position: absolute; min-width: 500px; min-height: 400px; top: 0; left: 0; padding: 0 20px 50px 0;
	}
	
	body.projects #container #nav { width:170px; float:left; display: inline; margin:0 20px 0 30px; }
	body.projects #container #subnav { width:200px; float:left; display: inline; }
	
	body.projects #gallery { width:494px; background:#000; position:relative; z-index: 10; top: 27px;
	/* Cross-browser transparency */
		opacity:0.8;/*css3*/
		filter:alpha(opacity=80);/*msie*/
		-moz-opacity:0.8;/*firefox1.0*/
		-khtml-opacity:0.8;/*webkit*/
	}

		body.projects #gallery a.control {
			display: block; padding: 8px 10px 6px 10px; width: 80px; line-height: 1em; color:#fff; text-transform: uppercase;
			text-decoration:none; font-size:0.8em; letter-spacing:0.2em;
		}
	
		body.projects #gallery a.control:hover {
			color:#d87f06;
		}
		
		body.projects #gallery .top {
			 border-bottom:1px dashed #a4a19e;
		}

		body.projects #gallery #prev { position:absolute; top:0; left:11px; width: 100px; text-align: left; }
		body.projects #gallery #prev a.control { background: transparent url(../images/sprite_arrow_left.gif) 0 50% no-repeat; }
		body.projects #gallery #prev a.control:hover { background-position: -295px 50%; }
		
		body.projects #gallery #next { position:absolute; top:0; right:14px; width: 100px; text-align: right; }
		body.projects #gallery #next a.control { background:transparent url(../images/sprite_arrow_right.gif) right 50% no-repeat; }
		body.projects #gallery #next a.control:hover { background-position: 95px 50%; }
	
		body.projects #gallery #title {
			display: block; font-size: 0.8em; letter-spacing:0.2em; color:#fff; text-transform:uppercase; padding: 8px 0 6px 0; text-align:center; line-height: 1em;
		}
		
		body.projects #gallery #more { padding: 0 10px; }
		body.projects #gallery #more a.toggle { color: #b8bab9; }
		body.projects #gallery #more a.toggle:hover { color:#d87f06; }
		
		body.projects #gallery #more a.visible {
			background:transparent url(../images/sprite_arrow_up_down.gif) -600px 50% no-repeat;
		}

		body.projects #gallery #more a.visible:hover {
			background-position: -895px 50%;
		}

		body.projects #gallery #more a.hidden {
			background:transparent url(../images/sprite_arrow_up_down.gif) 0 50% no-repeat;
		}

		body.projects #gallery #more a.hidden:hover {
			background-position: -295px 50%;
		}
		
		body.projects #gallery #gallery_caption {
			padding-top: 10px; color: #fff;
		}
		
		body.projects #gallery #more .toggle {
			display: none;
		}

	body.projects .galleria {
		display: none;
	}

	/* GALLERIA
	-------------------------------------------------------------- */
	html.projects,body.projects,#fsImage,#fsImage table,#fsImage td{width:100%;height:100%;overflow:hidden;background:#fff; margin: 0; padding: 0; border-collapse: collapse;}
	#fsImage td {
		background: #fff url(../images/ajax-loader.gif) 50% 50% no-repeat;
	}
	#fsImage { position: absolute; z-index: 0; }
	#fsImage div{position:absolute;width:200%;height:200%;top:-50%;left:-50%}
	#fsImage td{vertical-align:middle;text-align:center;}
	#fsImage img{min-height:50%;min-width:50%;margin:0 auto;display:block;}

	/* GALLERIA
	-------------------------------------------------------------- */

	#comments {
		padding-right:135px; width:420px;
	}
		.comment_list .entry {
			border-top:1px dashed #a4a19e; padding: 10px 0 0 0; margin: 10px 0;
		}
		
			.comment_list .author {
				color: #000;
			}
		
			.comment_list .message {
				padding: 10px 0;
			}
			
			.group_id_5 .message {
				padding: 10px; background-color: #000;
			}
			
				.message ul.posted {
					margin: 0;
				}

				.message li {
					list-style: none;
				}
			
				.group_id_5 .message li {
					color: #fff;
				}

		#comment_form {
			border-top:1px dashed #a4a19e; padding: 30px 0 0 0; margin: 10px 0;
		}
			
			#comment_form h2 {
				margin-bottom: 0;
			}
			
			#comment_form .input-box {
				margin-bottom: 10px; overflow: hidden; width: 500px;
			}
			
				#comment_form .input-box br {
					display: none;
				}
			
				#comment_form label {
					display: block;
				}
				
					#comment_form label .note {
						font-style: italic;
					}
					
				#comment_form fieldset.logged_out input {
					display: inline; float: left; width: 300px;
				}

				#comment_form fieldset.captcha input {
					display: inline; float: left; width: 100px;
				}

				#comment_form input,
				#comment_form textarea {
					color: #000;
				}
		
				#comment_form textarea {
					width: 420px;
				}
				
				#comment_form button {
					border: 0; background-color: #fff; color: #000; padding: 0; border-bottom: 1px solid #000; font-weight: 900;
					cursor: pointer;
				}

				#comment_form label.error {
					display: inline; float: right; width: 180px; margin-left: 10px;
					color: #900; font-style: italic;
				}
				
				#comment_form input.error {
					background-color: #ffc;
				}

				#comment_form fieldset.captcha label.error  {
					width: 380px;
				}

	/* COLLECTORS
	-------------------------------------------------------------- */
	#collectors_signin {
		overflow: hidden; width: 100%;
	}

		#collectors_signin h2 {
			padding-bottom: 12px;
			border-bottom: 1px dashed #A4A19E; color: #000;
		}
		
		#collectors_signin p.message {
			text-transform: uppercase; margin-bottom: 20px; margin-top: 15px;
		}

		/* needed to overcome cascade */
		body.page #container .rightcolumn .text p.message {
			color: #000;
		}
	
		#collectors_signin .input_box {
			width: 100%; overflow: hidden;
			padding: 30px 0; margin: 10px 0;
			border-top: 1px dashed #A4A19E; color: #000;
			border-bottom: 1px dashed #A4A19E; color: #000;
		}
		
			#collectors_signin label {
				display: inline; float: right;
			}
			
			#collectors_signin label.error {
				clear: right; font-style: italic; margin-top: 5px;
			}
			
			#collectors_signin input {
				width: 150px; margin-left: 15px;
			}
		
		#collectors_signin button {
			border: 0; text-transform: uppercase; text-decoration: underline;
			display: inline; float: right; background: none;
			font-family: "Courier New",Courier,monospace;
		}


		
/* ARABIC overrides
-------------------------------------------------------------- */
body.ar .nav a,
body.ar #gallery,
body.ar .text {
	direction: rtl;
}

body.ar #container .rightcolumn .text {
	width: 500px; padding-right: 0;
}