/* Imports */
@import url("reset.css"); /* CSS Reset */
@import url("projects.css"); /* Projects */
@import url("debug.css"); /* Debug */

/* Global Elements */
html, body { height:100%; }
body {
	overflow:hidden;
	font-family:Verdana, sans-serif;
	background:#EDEDED url("../assets/background.jpg");
}

/* Background */
#background {
	position:absolute;
	top:0px;
	left:-500px;
	overflow:hidden;
	height:100%;
	width:4500px;
}
#background div {
	height:100%;
	width:100%;
	background:url("../assets/background.jpg");
}

/* Header */
/* this could really use some cleaning up */
#header { padding-top:15px; }
#header * { 
	z-index:200;
	font-family:"Avenir", Verdana, sans-serif;
	color:#AAA;
}
#title,
#jobtitle { 
	position:absolute;
	text-indent:-9999px;
	opacity: 0.4;
	-moz-opacity: 0.4;
	filter:alpha(opacity=40);
}
#title {
	top:20px;
	left:20px;
	width:230px;
	height:35px;
	background:url("../assets/omarelsayed.png") no-repeat;
	font-size:2em;
	cursor:pointer;
}
#jobtitle {
	top:54px;
	left:20px;
	width:334px;
	height:25px;
	background:url("../assets/jobtitle.png") no-repeat;
	font-size:1em;
}
#availability {
	width:220px;
	position:absolute;
	top:15px;
	right:30px;
	height:80px;
	color:#6B6B6B;
}
#available {
	text-indent:-9999px;
	font-size:1.1em;
	margin-bottom:5px;
	height:30px;
	background:url("../assets/available.png") no-repeat;
}
#availability span { font:.9em "Helvetica Neue", "Arial", Verdana, sans-serif; }
#contact { 
	height:22px;
	font-size:.8em;
	background:url("../assets/contact.png") left bottom no-repeat;
	text-indent:-9999px;
	cursor:pointer;
	opacity: 0.8;
	-moz-opacity: 0.8;
	filter:alpha(opacity=80);
}

/* Menu */
#menu {
	position:absolute;
	top:100px;
	left:20px;
	width:180px;
	opacity:0.6;
	color:#888;
	z-index:2000;
}
#menu h4 {
	background:url("../assets/dropdown.png") left no-repeat;
	height:21px;
	line-height:21px;
	text-indent:27px;
	font-size:0.9em;
	cursor:pointer;
}
#menu #menulist {
	display:none;
	height:125px;
	margin-left:-4px;
	padding:14px 22px 15px 15px;
	background:url("../assets/dropdown-background.png") top left no-repeat;
	font-size:0.9em;
}
#menu #menulist li {
	margin-bottom:8px;
	padding:2px;
	display:none;
	cursor:pointer;
}
#menu #menulist .comingsoon { margin:13px 0px 0px 0px; }
#menu #menulist .more {
	color:#888;
	font-size:0.8em;
	margin-top:-4px;
}
#menu #menulist a:hover { color:#444; }

/* Content */
#content {
	position:absolute;
	width:100%;
	bottom:0;
	height:585px;
	overflow:hidden;
}
.section {
	position:absolute;
	top:0px;
	left:-750px;
	width:750px;
	height:585px;
	margin-left:-375px;
}
.section.selected { left:50%; }	
.section .portrait {
	display:block;
	position:absolute;
	top:0px;
	z-index:10;
	height:600px;
}
.section .shadow,
.section .bubble {
	position:absolute;
	top:100px;
	left:300px;
	z-index:20;
}
.section .bubble {
	width:370px;
	height:270px;
	padding:20px;
	color:#fff;
	font-size:1em;
	line-height:2.55em;
	background:url(../assets/bubble.png) no-repeat;
}
.section h4 {
	padding:0;
	margin:0px 0px 3px 8px;
	font-size:.9em;
	color:#6b6b6b;	
	width:60;
	height:20px;
	text-indent:-9999px;
	background:url("../assets/project.png") no-repeat;
}
.section .message p {
	margin:0px 5px 15px 0px;
	padding:0px 8px;
}
.section .message .paragraph-pink { background:url("../assets/paragraph-1.png") repeat-y; }
.section .message .paragraph-purple { background:url("../assets/paragraph-2.png") repeat-y; }
.section .message .paragraph-blue { background:url("../assets/paragraph-3.png") repeat-y; }
.section .message .paragraph-beige { background:url("../assets/paragraph-4.png") repeat-y; }
.section .message .paragraph-black { background:url("../assets/paragraph-5.png") repeat-y; }
.section .message .paragraph-aqua { background:url("../assets/paragraph-aqua.png") repeat-y; }
.section .message .paragraph-red { background:url("../assets/paragraph-red.png") repeat-y; }
.section .message .paragraph-steel { background:url("../assets/paragraph-steel.png") repeat-y; }
.section .message p a {
	font-weight:bold;
	color:#fff;
}
.section .viewproject,
.section .comingsoon {
	text-align:center;
	position:relative;
	left:110px;
	font-size:.9em;
	color:#6b6b6b;	
	height:40px;
	width:125px;
	background:url("../assets/viewproject.png");
}
.section .viewproject { cursor:pointer; }
.section .viewproject:hover { background-color:#eee; } 
.section .comingsoon { 
	opacity: 0.3;
	-moz-opacity: 0.3;
	filter:alpha(opacity=30);
}

/* Contact */
#contactinfo {
	position:absolute;
	top:-145px;
	left:50%;
	margin-left:-173px;
	width:345px;
	height:125px;
	padding-top:20px;
	z-index:4000;
	background:url("../assets/contactdialog.png") no-repeat;
	text-align:center;
}
#contactinfo .email {
	display:block;
	margin-top:10px;
}
#contactinfo a {
	color:#aaa;
	margin:-10px 10px;
	font-size:.8em;
}
#contactinfo .close {
	position:absolute;
	bottom:25px;
	right:50%;
	margin-left:-18px;
	width:36px;
	height:17px;
	background:url("../assets/close.png") no-repeat;
	text-indent:-9999px;
	font-size:.75em;
	cursor:pointer;
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter:alpha(opacity=50);
}
#contactinfo .close:hover {
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=1);
}

/* Footer & Misc */
.mainarrow {
	display:none;
	position:absolute;
	top:60%;
	z-index:100;
	width:75px;
	height:95px;
	cursor:pointer;
	opacity: 0.3;
	-moz-opacity: 0.3;
	filter:alpha(opacity=30);
}
#rightarrow { 
	right:-60px;
	background:url("../assets/arrow-right-large.png");
}
#leftarrow {
	left:-60px;
	background:url("../assets/arrow-left-large.png");
}
#startover {
	display:none;
	position:absolute;
	bottom:10px;
	left:20px;
	width:134px;
	height:31px;
	cursor:pointer;
	z-index:200;
	background:url("../assets/start-over.png");
	opacity: 0.75;
	-moz-opacity: 0.75;
	filter:alpha(opacity=75);
}
span.getintouch {
	font-weight:bold;
	cursor:pointer;
}