@charset "UTF-8";

@import url("normalization.css");
@import url("sifr.css");

html, body {
	height: 100%;
}
body {
	font-size: 90%;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	line-height: 1.25em;
	background: #000 url("bgPage.png") repeat top center;
	color: #333;
}

/* header */
#header {
	position: absolute;
	top: 10%;
	left: 0%;
	width: 100%;
	height: 10%;
	padding-bottom: 32px;
	background: transparent url("bgHeader.png") repeat-x bottom left;
	_background-image: url("bgHeader.ie6.png");
	z-index: 1;
}
#header img {
	position: absolute;
	top: 50%;
	left: 1.25%;
	margin-top: -36px;
}

/* menu */
#menu {
	position: absolute;
	bottom: 80%;
	right: 0%;
	z-index: 2;
	padding-bottom: 0.5em;
}
#menu li {
	float: left;
	position: relative;
	border-left: 1px solid #333;
	border-left: none;
}
#menu .first {
	border-left: none;
}
#menu li a {
	display: block;
	padding-left: 1em;
	padding-right: 1em;
	line-height: 1.5em;
	text-decoration: none;
	color: #666;
}
#menu li a:hover, #menu li a:active {
	color: #fff;
	background: transparent url("bgArrow.png") no-repeat 0.25em center;
}
#menu li ul {
	display: none;
	position: absolute;
	top: 1.5em;
	left: -6px;
	width: 200px;
	background: transparent url("bgMenu.png") no-repeat bottom center;
	_background-image: url("bgMenu.ie6.png");
	padding: 8px;
	padding-bottom: 32px;
	z-index: 3;
}
#menu li:hover ul, #menu li.hover ul {
	display: block;
}
#menu li ul li {
	float: none;
	border-left: none;
	_position: static;
	_height: 1.5em;
}
#menu li ul li a {
	color: #999;
	font-weight: normal;
	padding-left: 12px;
	padding-right: 12px;
}
#menu li ul li a {
	background-image: none ! important;
}
#menu li ul li a:hover {
	color: #900;
}

/* body */
#body {
	position: absolute;
	top: 20%;
	left: 0%;
	height: 60%;
	width: 100%;
	background: #fff;
	z-index: 0;
}

/* ad */
#ad {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 50%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
	background: transparent none no-repeat top right;
	text-align: center;
	font-size: 1.25em;
}
#ad .padding {
	height: 100%;
	padding: 16px;
	padding-right: 32px;
	background: transparent url("bgAdOverlay.png") repeat-y top right;
	_background-image: url("bgAdOverlay.ie6.png");
}
#ad span {
	display: block;
}
#ad a {
	display: block;
	float: right;
	white-space: nowrap;
	height: 48px;
	background: transparent url("bgButtonDisabledL.png") no-repeat top left;
	_background-image: url("bgButtonDisabledL.ie6.png");
	color: #fff;
	font-size: 0.85em;
	position: relative;
	padding-left: 21px;
	padding-right: 2px;
	margin-right: 28px;
	line-height: 32px;
}
#ad a:hover {
	text-decoration: none;
}
#ad a span {
	position: absolute;
	top: 0px;
	left: 100%;
	display: block;
	width: 28px;
	height: 48px;
	background: transparent url("bgButtonDisabledR.png") no-repeat top right;
	_background-image: url("bgButtonDisabledR.ie6.png");
}
#ad a:hover {
	background-image: url("bgButtonL.png");
	_background-image: url("bgButtonL.ie6.png");
}
#ad a:hover span {
	background-image: url("bgButtonR.png");
	_background-image: url("bgButtonR.ie6.png");
}

/* content */
#content {
	position: absolute;
	top: 0%;
	right: 0%;
	width: 50%;
	height: 100%;
	background: #fff url("bgContent.png") no-repeat center center;
	z-index: 2;
	overflow: auto;
}
#content .padding {
	padding: 16px;
	padding-top: 96px;
	padding-left: 0px;
	padding-bottom: 32px;
}
#content p {
	margin-bottom: 1em;
	text-align: justify;
}
#content a {
	text-decoration: underline;
}

/* cms */
#cms fieldset {
	padding-top: 24px;
	padding-left: 0px;
}
#cms ul {
	text-align: center;
	margin-top: 1em;
}
#cms ul li {
	display: inline;
}
#cms ul .first {
	border-right: 1px solid #666;
}
#cms ul li a {
	padding-left: 1em;
	padding-right: 1em;
}

/* login */
#login {
	display: none;
	position: absolute;
	top: 50%;
	left: -18em;
	width: 18em;
	margin-top: -4em;
	z-index: 2;
	background: transparent url("bgLogin.png") no-repeat bottom center;
	padding-right: 32px;
}
#login fieldset {
	background: #333;
	padding: 1em;
	padding-top: 1.5em;
	padding-bottom: 0em;
}
#login fieldset h2 {
	text-align: center;
	color: #666;
	margin-bottom: 0.5em;
}
#login fieldset .field label {
	color: #999;
	width: 30%;
}
#login fieldset .field div {
	width: 65%;
}
#login .toggle {
	position: absolute;
	right: 0px;
	top: 50%;
	margin-top: -68px;
	color: #999;
	text-decoration: none;
	width: 32px;
	height: 136px;
	background: transparent url("bgLogin.png") no-repeat top center;
	display: block;
	text-indent: -999em;
}

/* footer */
#footer {
	position: absolute;
	bottom: 10%;
	left: 0%;
	height: 10%;
	width: 100%;
	padding-top: 16px;
	text-align: center;
	color: #666;
	background: transparent url("bgFooter.png") repeat-x top left;
	_background-image: url("bgFooter.ie6.png");
	z-index: 1;
}
#footer p {
	padding-top: 1em;
}

/* h1 */
h1 {
	position: absolute;
	top: 48px;
	width: 90%;
	left: 50%;
	margin-left: -45%;
	font-family: Georgia, Times, "Times New Roman", serif;
	text-align: center;
	color: #900;
	font-size: 1.5em;
}
h2 {
	color: #666;
	font-size: 1.1em;
	margin-bottom: 0.5em;
}
#content ul {
	list-style: disc outside;
	margin-left: 1.5em;
	margin-bottom: 1em;
}

/* a */
a {
	color: #900;
	text-decoration: none;
}
a:hover, a:active {
	text-decoration: underline;
	color: #c00;
}

/* forms */
form {
	text-align: center;
	margin-bottom: 1em;
}
form .field, form .buttons {
	clear: both;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}
form .field:after, form .buttons:after {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
form .buttons {
	padding-top: 0.75em;
}
form .buttons input {
	border: 1px solid #600;
	background: #900;
	color: #fff;
	padding: 0.1em;
	cursor: pointer;
}
form .field label {
	float: left;
	width: 25%;
	text-align: right;
	line-height: 1.25em;
}
form .field div {
	float: right;
	width: 70%;
	text-align: left;
}
form .field input, form .field select, form .field textarea {
	border: 1px solid #900;
	background: #fff;
	width: 50%;
	color: #333;
}
form .field textarea {
	width: 100%;
	height: 8em;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 1em;
}

/* floats */
.left {
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}
.right {
	float: right;
	margin-left: 1em;
	margin-bottom: 1em;
}
.center {
	text-align: center;
}

/* services */
#services:after {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#services .type {
	width: 47.5%;
	_width: 45%;
}
#services .creative {
	float: left;
	padding-right: 2.5%;
}
#services .technical {
	float: right;
	padding-left: 2.5%;
}
#services .type p {
	margin-bottom: 0.5em;
	text-align: left;
}

/* team */
#team dt {
	font-weight: bold;
}
#team dd {
	margin-bottom: 1em;
}

/* affiliations */
#affiliations dt {
	font-weight: bold;
}
#affiliations dd {
	margin-bottom: 1em;
}

/* contact */
#contact dt {
	float: left;
	width: 5em;
	margin-right: 1em;
	clear: left;
	margin-bottom: 1em;
}
#contact dd {
	margin-bottom: 1em;
}

/* errors */
.errors {
	margin: 1em auto;
	width: 80%;
	padding: 1em;
	border: 1px solid #ccc;
	background: #eee;
	color: #c00;
}
#content .errors p {
	margin-bottom: 0em;
}
#content .errors ul {
	margin-top: 0em;
	margin-bottom: 0em;
}

/* message */
#content .message {
	text-align: center;
}

/* ads */
.sky #ad {
	background-image: url("ads/sky.jpg");
	color: #039;
}
.sky #ad .padding {
	padding-top: 64px;
}
.sky #ad p span {
	margin-top: 0.5em;
	font-weight: bold;
}
.sky #ad a {
	position: absolute;
	bottom: 5%;
	right: 10%;
}

#admin {
	text-align: left;
}
#admin li {
	margin-bottom: 1em;
	margin-top: 1em;
	clear: both;
}
#admin li span {
	float: left;
	width: 15em;
}
.admin #content .messages {
	border: 1px solid #ccc;
	background: #eee;
	padding: 1em;
	margin: 1em;
	color: #333;
	list-style-type: none;
}
.admin #content .errors {
	border: 1px solid #c00;
	background: #fee;
	padding: 1em;
	margin: 1em;
	color: #f00;
	list-style-type: none;
}


@media print {

	/* Make the background plain white */
	body {
		background: #fff;
	}
	
	/* Display only the header, footer, and content */
	#menu, #ad {
		display: none;
	}
	
	/* Position the logo at the top */
	#header {
		top: 0%;
		margin-bottom: 2em;
	}
	#header img {
		top: 0%;
		left: 0%;
		margin-top: 0px;
		border: none;
	}
	
	/* Make the content static */
	#body {
		position: static;
		height: auto;
	}
	#content {
		position: static;
		width: 100%;
		height: auto;
	}
	
	/* Make the footer static */
	#footer {
		position: static;
		height: auto;
		margin-top: 2em;
		margin-bottom: 2em;
	}

}