/* ## Global definitions */
* { margin: 0; padding: 0; border: none; }
body {
	background: #670000 repeat-x url('images/layout/background_top_gradient.gif');
	text-align: center;

	font: 12pt 'Trebuchet MS', 'Verdana', sans-serif;
	/* color: #CDCDCD; */
	color: #eee;
}
#main {
	width: 850px;
	margin: 0 auto;
	background: repeat-y url('images/layout/main_background.gif');

	text-align: left;
}
div.clear {
	line-height: 0;
	font-size: 1px;		/* we love MSIE! we love! */
	clear: both;
}


a, a:link, a:visited {
	color: #BFBFBF;
	text-decoration: underline;
}
a.selected, a:hover {
	text-decoration: none;
}
a.selected, a:active {
	color: #B40000;
}
a.external {
	padding-right: 14px;
	background: no-repeat url('images/layout/external_link_grey.gif');
	background-position: right center;
}

p.small {
	font-size: 85%;
}

/* strict's image margin workaround */
img { display: block; }

.nobottommargin {
	margin-bottom: 0;
}
.strong {
	font-weight: bold;
}

/* ## Header */
#header {
	height: 267px;
	background: no-repeat url('images/layout/main_header_background.gif');

	position: relative;
}
	#header #navigation, #header #logo, #header #title { position: absolute; }
	#header #navigation {
		top: 55px;
		right: 45px;

		color: #BFBFBF;

		font-size: 14px;
	}
		#header #navigation a {
			margin: 0 12px;
		}

	#header #logo {
		top: 63px;
		left: 57px;
	}

	#header #title {
		bottom: 69px;
		_bottom: 65px;	/* msie6 hack */
		right: 72px;

		text-align: right;
	}
		#header #title h1 {
			color: #B40000;

			font-size: 28pt;
			font-weight: 100;

			letter-spacing: 1px;
			line-height: 22pt;
			_line-height: 1em;	/* msie6 hack */

		}
		#header #title h1 span {
			font-size: 12pt;
			color: #CDCDCD;
		}

/* ## Content, COMMON screens */
#content {
	padding: 40px 50px;
}
#content.homepage {

	background: no-repeat url('images/layout/update_info.png') 500px 30px;
}

	#content h1, #content h2 { font-weight: 100; }
	#content h1 {
		font-size: 41pt;

		letter-spacing: 3px;
	}
	#content h2 {
		font-size: 16pt;
		color: #B40000;

		letter-spacing: 8px;

		/* experimental */
		margin-top: -.4em;
		text-indent: 5px;
	}
		#content h2.lessspace {
			letter-spacing: 3px;
		}

	#content h4 {	/* just like p */
		font: 12pt 'Trebuchet MS', 'Verdana', sans-serif;
		font-weight: normal;
		margin-bottom: 1em;
	}
		#content h4 a, #content h4 a:link, #content h4 a:visited {
			color: #B40000;
		}


	#content div.desc {
		padding: 35px 50px 20px 50px;
	}
	#content div.project {
		padding: 35px 0 20px 27px;
		/* padding-right: 0; */
	}

		#content div.desc h3 {
			font-family: 'Arial', sans-serif;
			font-size: 18pt;
			font-weight: normal;

			letter-spacing: 2px;
		}

		#content div.desc p {
			margin-bottom: 1em;
		}

			#content div.desc p span, #content div.desc p a, #content div.desc p a:link, #content div.desc p a:visited {
				color: #B40000;
			}

		#content div.project p {
			margin-right: 50px;
			margin-left: 14px;
		}

	/* projects' divs */
	#content div.projects {

		margin: 15px 0 10px 0;
		/* line-height: 0; */
	}
		/* three-in-a-row */
		#content div.projects div.three {
			padding: 0 0 25px 0;
			margin: 0;
			border-top: 1px solid #090909; /* MSIE6 is really that stupid */
		}
/*
			#content div.projects div.threefirst {
				padding-top: 0 !important;
			}
			#content div.projects div.threelast {
				padding: 0 !important;
			}
*/


		#content div.projects div.show_all {
			text-align: right;
			margin: 0; padding: 0 10px 0 0;
		}
		#content div.projects a.show_all {
			cursor: pointer;
		}


	/* thumbs and popups divs */
	#content div.thumb {
		padding: 7px;
		border: 1px solid #909090;

		float: left;
	}
		#content div.thumbcenter { margin: 0 44px; }

	#content div.popup {
		width: 435px;
		height: 400px;

		background-color: #151515;
	}
		#content div.popup div.padded {
			padding: 20px 20px 0 20px;
		}

		#content div.popup h5 {
			font-size: 15pt;
			letter-spacing: 1px;

			text-indent: 10px;

			font-weight: normal;

			color: #eee;
		}
		#content div.popup p {

			margin-left: 8px;
		}
			#content div.popup p.details {
				margin-top: .8em;
			}

/* ## Content, PROJECT screen */
#content.project {
	padding-top: 0;
}

	/* projects navigation */
	#content div#projectsnav {
		padding: 5px 0;
		margin-bottom: 30px;
	}
		#content #projectsnav #projectprev {
			float: left;
		}
		#content #projectsnav #projectnext {
			float: right;
		}
		#content #projectsnav a, #content #projectsnav a:link, #content #projectsnav a:visited {
			font-size: 10pt;

			color: #C40000;

			text-decoration: none;
		}
			#content #projectsnav a span {
				margin: 0 10px;
			}
	/* typo */
	#content.project h1 {
		font-size: 30pt;
		letter-spacing: 2px;
	}
	#content.project h2 {
		margin: 3px 0;

		letter-spacing: 1px;
		text-indent: 0;
	}
	#content.project div.desc h3 {
		margin-bottom: .7em;

	}

	/* big image and technologies window */
	#content.project #bigimages {
		/* width: 444px; */
		width: 420px;
		 margin: 0 0 5px 46px;	/* text floating driving */
		/*margin: 0 0 5px 30px;	/* text floating driving */

		float: right;
		position: relative;

		text-align: center;

		/* border: 1px solid red; */
	}

		/* lovely glider! */
		#bigimages #glideprev, #bigimages #glidenext {
			width: 11px;	height: 20px;

			position: absolute;
				top: 149px;

			cursor: pointer;
		}
		#bigimages #glideprev {
			left: 1px;
			background: no-repeat url('images/layout/project_image_previous.gif');
		}
		#bigimages #glidenext {
			right: 1px;
			background: no-repeat url('images/layout/project_image_next.gif');
		}

		#bigimages #glider { }
			#glider div.scroller, #glider div.section {
				width: 370px;	height: 315px;
				overflow: hidden;
			}
			#glider div.scrollercontent {
				width: 10000px;
			}

			#glider div.scroller {
				margin: 0 auto;
			}
			#glider div.section {
				float: left;
			}

		/* teh technologies */
		#technologies {
			margin-top: 45px;
		}

		#technologies table {
			width: 100%;
		}
			#technologies table td {
				width: 50%;
				padding: 0 7px;
			}
				#technologies table td p {
					margin-right: 0 !important;	/* fix against silly content class p right margin */
				}
			#technologies table td.techleft {
				text-align: right;
				font-size: 15px;
				color: #B40000;
			}
			#technologies table td.techright {
				text-align: left;
			}

				/* keep gray in links */
				#technologies td.techright a, #technologies td.techright a:link, #technologies td.techright a:visited {
					color: #eee !important;
				}

	/* urlbox */
	#content.project #urlbox {
		width: 235px;

		margin: 45px 0 50px 0;
		padding: 9px 0 15px 18px;


		background-color: #890000;
		/* background-color: #9A0000; */
		/* background-color: #B40000; */
		/* background-color: #787878; */
	}
		#content.project #urlbox p {
			margin: 0;

			/* color: #292929; */
			color: #000;

			font-size: 11pt;
			font-weight: bold;
		}

		#content.project #urlbox p a, #content.project #urlbox p a:link, #content.project #urlbox p a:visited {
			margin-left: 5px;

			color: #fff;
			/* color: #fbfbfb; */

			font-size: 10pt;
			font-weight: normal;
		}


/* ## Content, CONTACT screen */
#content.contact { position: relative; }

	#content div.padded {
		padding: 35px 0 20px 25px;
		/* border: 1px solid red; */
	}

	#content.contact div#contact_left, #content.contact div#contact_right { float: left; }

	/* left column, CONTACT FORM */
	#content.contact div#contact_left {
		/* width: 450px; */
		width: 445px;

		/* border: 1px solid red; */
	}

	#content.contact div#contact_left p.label {
		font-size: 12pt;
		font-weight: bold;
	}

	/* workaround for easier send button animation */
	#content.contact div#contact_left div#sendHolder {
		height: 40px;
	}

	#content.contact div#contact_left p.send {
		text-align: right;
		margin-right: 90px;
	}
		p.send span {
			margin-left: 10px;
		}
		p.send a, p.send a:link, p.send a:visited {	/* redundant! redundant! :( */
			color: #B40000;
			cursor: pointer;
		}

	/* fields! */
	#content.contact div#contact_left div.field, #content.contact div#contact_left div.field input, #content.contact div#contact_left div.field textarea {
		background-color: #1A1A1A;
	}

	#content.contact div#contact_left div.field {
		width: 368px;

		margin: 7px 0 35px 5px;

		border: 1px solid #575757;
	}
	#content.contact div#contact_left div.hovered {
		border: 1px solid #890000;
	}

		/* textareas and inputs */
		div#contact_left div.field input, div#contact_left div.field textarea {
			width: 348px;

			padding: 6px 10px 3px 10px;
			font: 11pt 'Verdana', sans-serif;
			color: #adadad;
		}

		div#contact_left div.field input {
			height: 24px;

			font-weight: bold;
		}

		div#contact_left div.field textarea {
			height: 253px;

			font-weight: normal;

			color: #cdcdcd;
		}


	/* right column, INFORMATION */
	#content.contact div#contact_right {
		width: 270px;

		color: #eee;

		/* border: 1px solid green; */
	}

		div#contact_right .morespaced {
			margin-bottom: 1.4em;
		}

		#content.contact div#contact_right h1 {
			margin-bottom: .4em;
			font-size: 20pt;
			letter-spacing: normal;
		}

		

		#content.contact div#contact_right h4, #content.contact div#contact_right ul {
			margin-left: 14px;
		}
		#content.contact div#contact_right h4 {
			margin-right: 15px;
		}

			#content.contact div#contact_right h4.information {
				line-height: 2.3em;
			}

		#content.contact div#contact_right ul {
			list-style: none;
		}
			#content.contact div#contact_right li {
				padding-left: 22px;
				background: no-repeat url('images/layout/lists.gif');
				background-position: 3px 14px;

				line-height: 1.9em;
			}


	/* MessageBox component */
	#content.contact #MessageBox {
		width: 254px;	height: 75px;

		padding-top: 15px;

		position: absolute;
			/* bottom: 250px; */
			top: 540px;	/* must be top-related position for ScriptActuloUs to handle this :( */
			left: 128px;

			_top: 813px;	/* yes, IE6 is really that stupid */
			_left: 334px;

			z-index: 10;

		background-color: #090909;
		/* border: 1px solid #890000; */
		border: 1px solid #575757;

		text-align: center;
	}
		#content.contact #MessageBox * { margin: 0; padding: 0; }
		#content.contact #MessageBox img {
			margin: 5px auto;
		}

/* ## Content, ABOUT US screen */
#content.about {

}
	#content.about div#about_left, #content.about div#about_right { float: left; }

	/* left column, TEXT */
	#content.about div#about_left {
		width: 255px;
		/* border: 1px solid red; */
	}
		#content.about div#about_left div.padded {
			padding: 0 45px 0 0;
		}

			#content.about div#about_left p, #content.about div#about_left h4 {
				/* font-weight: bold; */
				letter-spacing: 1px;

				/* line-height: 1.8em; */
				line-height: 1.5em;
			}

	/* right column, FACES */
	#content.about div#about_right {
		width: 460px;
		/* border: 1px solid green; */
	}

		div#about_right div.face {
			margin: 17px 0 60px 0;
		}

			div#about_right div.face h1, div#about_right div.face p {
				width: 320px;
				float: left;
			}

			div#about_right div.face h1 {
				font-size: 12pt;
				font-weight: bold;

				margin: 10px 0 15px 0;

				letter-spacing: normal;
			}
				div#about_right div.face h1 span {
					margin-left: 5px;
					font-weight: normal;
				}

			div#about_right div.face p {
			}

			div#about_right div.face img {
				float: right;

				margin-top: 25px;
				padding: 3px;
				border: 1px solid #909090;
			}


/* ## Footer */
#footer {
	border-top: 1px solid #890000;

	margin: 0 50px;
	padding: 20px 0 25px 0;
}
	#footer #logobottom {
		float: right;
	}
		#footer #logobottom img {
			padding-right: 5px;
		}
	#footer #copyright {
		float: left;
	}
		#footer #copyright p {
			padding: 10px 5px;

			font-size: 9pt;
		}