/*
 * Selwyn stylesheet
 *
 * Author: Creative Monkeys
 * Version 0.1
*/

@import url(fonts.css);

/* ---------------- ELEMENT STYLES ---------------- */

* {
	margin: 0;
	padding: 0;
	border: none;
}

html,
body {
	width: 100%;
	height: 100%;
}

body {
	overflow: scroll;
	overflow-x: hidden;
	background: #0b0b0b;
	margin: 0;
	font: 14px 'QuicksandBook', Tahoma, sans-serif;
}

h1,h2,h3 {
	font-family: 'BebasRegular', 'Trebuchet MS', sans-serif;
}

/* ---------------- GLOBAL STYLES ---------------- */

.page404 {
	background: #fff;
	color: #777;
	padding: 60px;
}

.clear {
	clear: both;
	overflow: hidden;
	height: 0;
}

.select {
	clear: both;
	overflow: hidden;
	height: 0;
}

.list {
	list-style: none;
}

	.list li:first-child{
		margin: 0 0 20px 0;
	}

	.list li {
		margin: 20px 0;
	}
	
	#menu .list li.active {
		margin: 0 -20px;
	}
	
	#menu .list li.active a {
		background: url(../../images/arrows.gif) no-repeat 5px center;
		padding: 0 20px;
	}
	
	#menu .stacks li.active a {
		background-image: url(../../images/arrows-stack.gif);
	}
	
		.list li.active:first-child a {
			/* margin: 20px 0; */
		}
	
		.list li.active a {
			opacity: 1;
		}
		
		.list li a {
			display: block;
			color: #777;
			font-size: 11px;
			text-decoration: none;
			opacity: 0.6;
		}
		
		.list li a:hover {
			opacity: 1;
		}
		
		.list li .stack {
			position: absolute;
			background: url(../../images/stack.gif) no-repeat right top;
			width: 160px;
			height: 108px;
		}
			
			.list li a img {
				display: block;
				margin: 0 0 5px 0;
			}
	
.block {
	position: absolute;
	width: 425px;
}

	.block .minimize {
		position: relative;
		top: -12px;
		left: 369px;
		width: 16px;
		height: 16px;
		cursor: pointer;
	}

	.block .inner {
		padding: 20px 30px;
		background: #fff url(../../images/selwyn.gif) no-repeat 360px -475px;
		color: #777;
	}

	.block img {
		margin: 0 20px 20px 0;
	}

	.block h1 {
		color: #231f20;
		font-size: 28px;
		text-transform: uppercase;
		margin: 0 0 20px 0;
	}
	
	.block p {
		color: #777;
		margin: 10px 0 0 0;
		font-size: 14px;
		line-height: 150%;
	}
	
	.block a {
		color: #777;
	}
	
	.block a.big {
		font: 14px 'BebasRegular', 'Trebuchet MS', sans-serif;
		color: #231f20;
		text-decoration: none;
		text-transform: uppercase;
	}
	
	.block .meta {
		color: #231f20;
		margin: 20px 0 0 0;
		height: 30px;
		border-top: 1px solid #bfbfbf;
		border-bottom: 1px solid #bfbfbf;
		font: 13px 'BebasRegular', 'Trebuchet MS', sans-serif;
		overflow: hidden;
	}
	
		.block .meta .share {
			float: left;
			margin: 6px 15px 0 0;
		}
		
		.block .meta .facebook {
			float: left;
			margin: 10px 15px 0 0;
		}
		
		.block .meta .twitter {
			float: left;
			margin: 10px 15px 0 0;
		}
		
		.block .meta .date {
			float: right;
			margin: 6px 0 0 0;
		}
		
		.block .meta .twitter a span,
		.block .meta .facebook a span {
			display: none;
		}
		
			.block .meta .facebook a {
				display: block;
				width: 56px;
				height: 12px;
				background: url(../../images/selwyn.gif) no-repeat -39px 0;
				text-indent: -1000em;
			}
			
			.block .meta .facebook a:hover {
				background-position: -39px -12px;
			}
		
			.block .meta .twitter a {
				display: block;
				width: 53px;
				height: 12px;
				background: url(../../images/selwyn.gif) no-repeat -109px 0;
				text-indent: -1000em;
			}

			.block .meta .twitter a:hover {
				background-position: -109px -12px;
			}

.navigate {
	margin: 10px 30px;
	font-family: 'BebasRegular', 'Trebuchet MS', sans-serif;
	font-size: 38px;
	text-transform: uppercase;	
}

	.navigate a {
		opacity: 0.5;
		color: #fff;
		text-decoration: none;
	}
	
	.navigate a:hover {
		opacity: 1;
	}

.headline {
	position: absolute;
	bottom: 100px;
	left: 50px;
	height: 85px;
	padding: 0 10px;
	background: url(../../images/headline-bg.png);
	color: #fff;
	line-height: 35px;
	text-transform: uppercase;
}
	.headline h1 {
		font-size: 20px;
	}
	
	.headline h2 {
		font-size: 48px;
	}
	
	.headline a {
		color: #fff;
		text-decoration: none;
	}

.agenda-items {
	padding: 60px 0 0 0;
}
	
.agenda-item {
	padding: 15px 0 15px 40px;
	color: #fff;
	clear: both;
	text-transform: uppercase;
}
	
	.agenda-item .date {
		float: left;
		padding: 5px;
		background: url(../../images/headline-bg.png);	
	}
	
	.agenda-item .about {
		float: left;
		padding: 0 10px 5px 10px;
		background: #0b0b0b;
	}
	
	.agenda-item h2 {
		font-size: 38px;
	}

	.agenda-item h3 {
		font-size: 18px;
	}
	
	.agenda-item a {
		color: #fff;
		text-decoration: none;
	}
	
	.agenda-item .meta {
		font-size: 13px;
		color: #777;
	}
	
		.agenda-item .meta .extra {
			margin: 0 20px;
		}
	
.tooltip {
	position: absolute;
	z-index: 100;
	background: #fff;
	color: #777;
	text-align: center;
	font-size: 11px;
	line-height: 30px;
	width: 100px;
	height: 30px;
}

/* ---------------- MAIN DIVS ---------------- */

#wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

#logo {
	position: fixed;
	z-index: 15;
	top: 0;
	right: 120px;
	width: 200px;
	height: 60px;
	padding: 30px 0 0 0;
	text-align: center;
	background: #0b0b0b;
}

#logo .fade {
	position: absolute;
	bottom: -20px;
	left: 0;
	width: 100%;
	height: 20px;
	background: url(../../images/logo-bg.png) repeat-x;
}

#main {
	position: fixed;
	width: 100%;
	height: 100%;
}

	#main .cycle {
		width: 100%;
		height: 100%;
	}
	
		#main .cycle .item {
			position: relative;
			width: 100%;
			height: 100%;
		}

/*
#background {
	display: block;
	width: 100%;
	height: 100%;
}
*/


#menu {
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	width: 340px;
	height: 100%;
}

	#menu .inner {
		width: 200px;
		height: 100%;
		margin: 0 20px;
		background: #0b0b0b;
		color: #fff;
		text-align: center;
	}
		
	#menu .more {
		position: absolute;
		top: 90px;
		width: 150px;
		padding: 0 25px;
		overflow: hidden;	
	}
	
	#menu h1 {
		margin: 40px 0 0 0;
		font-size: 17px;
	}
	
	#menu p {
		font-size: 11px;
		line-height: 150%;
		color: #777;
		margin: 5px 0 10px 0;
	}
	
	#menu a {
		color: #777;
	}

#browse {
	position: absolute;
	top: 0;
	left: 0;
	width: 205px;
	height: 100%;
}

	#browse .inner {
		position: relative;
		width: 135px;
		height: 100%;
		padding: 0 25px;
		background: #0b0b0b;
		color: #fff;
		text-align: center;
	}
	
	#browse .fold {
		position: absolute;
		top: 50%;
		left: 184px;
		width: 27px;
		height: 55px;
		margin: -22px 0 0 0;
		background: url(../../images/fold.png) no-repeat right;
		
	}
	
	#browse h1 {
		padding: 40px 0 0 0;
		font-size: 20px;
	}
	
	#browse p {
		font-size: 11px;
		line-height: 150%;
		color: #777;
		padding: 20px 0;
		border-bottom: 1px solid #444;
		
	}
	
	#browse img {
		display: block;
	}
	
	#browse .list {
		margin: 0 auto;
	}
	
#loader {
	position: fixed;
	z-index: 50;
	top: 0;
	left: 50%;
	margin: 0 0 0 -80px;
	padding: 80px 20px 20px 20px;
	background: white url(../../images/loading.gif) no-repeat center 25px;	
	text-align: center;
	display: none;
}

/* ---------------- NAVIGATION ---------------- */

#navigation ul {
	list-style: none;
}
		
	#navigation ul li:first-child {
		border-top: 1px solid #454545;
	}
	
	#navigation ul li {
		height: 40px;
		border-bottom: 1px solid #454545;
	}
	
		#navigation ul li a:hover {
			color: #777;
		}
	
		#navigation ul li a {
			display: block;
			width: 100%;
			height: 100%;
			color: #fff;
			font: 14px 'BebasRegular', 'Trebuchet MS', sans-serif;
			line-height: 40px;
			text-align: center;
			text-transform: uppercase;
			text-decoration: none;
		}
		
		#navigation ul  li.active a {
			color: #777;
		}
		
/* ---------------- BUTTONS ---------------- */

#carousel-next,
#carousel-prev {
	display: block;
	width: 30px;
	height: 30px;
	font-size: 0;
	margin: 20px auto;
	color: #000;
}

#carousel-next {
	background: transparent url(../../images/browse.png) no-repeat 0 0;
	margin: 0px auto;
}

#carousel-prev.disabled,
#carousel-next.disabled {
	visibility: hidden;

}

#carousel-prev {
	background: transparent url(../../images/browse.png) no-repeat -30px 0;
}

#browse-next,
#browse-prev {
	position: absolute;
	z-index: 10;
	width: 30px;
	height: 30px;
	text-indent: -1000em;
	cursor: pointer;
	display: none;
}

#browse-next {
	background: transparent url(../../images/browse.png) no-repeat 0 0;
	bottom: 20px;
	left: 500px;
}

#browse-prev {
	background: transparent url(../../images/browse.png) no-repeat -30px 0;
	top: 10px;
	left: 500px;
}


/* ---------------- HOME ---------------- */

.selwyn #navcontent {
	background: url(../../images/backgrounds/navigation01.gif) no-repeat;
	margin: 125px 0 0 0;
	width: 100%;
	height: 200px;

}

.home #browse-next,
.home #browse-prev {
	display: none;
}

/* ---------------- JOURNAL ---------------- */

.selwyns-journal #menu .inner {
	background-image: none;
}

.selwyns-journal .block {
	bottom: 120px;
	left: 75px;
}

/* ---------------- AGENDA ---------------- */
.coming-up h1 {
	display: none;
}

.coming-up #navcontent {
	background: url(../../images/backgrounds/navigation01.gif) no-repeat;
	margin: 125px 0 0 0;
	width: 100%;
	height: 200px;

}

/* ---------------- IPHONE ---------------- */

.iphone #menu .inner {
	background-image: none;
}

.iphone .block {
	width: 380px;
	bottom: 120px;
	left: 150px;
}

/* ---------------- GALLERIES ---------------- */

.galleries #menu .inner {
	background-image: none;
}

.galleries .block {
	left: 60px;
	bottom: 160px;
	width: 350px;
}

	.galleries .block .meta {
		display: none;
		visibility: hidden;
	}

/* ---------------- BIOGRAPHY ---------------- */

.biography #logo {
	position: absolute;
}

.biography #main {
	position: absolute;
}

.biography #browse-next,
.biography #browse-prev {
	display: none;
}

.biography.item {
	background: #fff url(../../images/backgrounds/biography.gif) no-repeat right 350px;
	color: #777;
}

.biography .block {
	width: 600px;
	top: 45px;
	left: 70px;
	border-top: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
}

	.biography .block h1 {
		font-size: 60px;
		text-transform: uppercase;
		color: #231f20;
		padding: 12px 0 0 0;
	}
	
	.biography .block p.intro {
		font-family: 'QuicksandBoldOblique', sans-serif;
		margin: 0 0 20px 170px;
	}
	
	.biography .block p {
		line-height: 150%;
		margin: 20px 0;
	}
	
	.biography .block img {
		float: left;
	}
	
	
/* ---------------- CONTACT ---------------- */

#newsletter {
	position: absolute;
	bottom: 50px;
	left: 20px;
	width: 200px;
	z-index: 10;
}

	#newsletter h3 {
		margin: 0 0 10px 0;
	}

	#newsletter .textfield {
		width: 150px;
		height: 20px;
		background: #acacac;
		color: #000;
		font: 14px 'QuicksandBook', Tahoma, sans-serif;
		text-align: center;
		padding: 5px 0;
		margin: 5px;
	}
	
	#newsletter a {
		position: relative;
		top: 5px;
	}