/* mission statement */
#welcome{
	position : relative;
	width : 600px;
	float : left;
	margin-top : 10px;
}

/* misc flyer */
#advert{
	position : relative;
	width : 600px;
	min-height : 290px;
	float : left;
	margin-top : 20px;
	margin-bottom : 20px;
}

#advert h2{
	margin-top : 10px;
	margin-bottom : 20px;
}

#subvert{
	position : relative;
	width : 310px;
	float : right;
	margin-top : 20px;
	margin-right : 1px;
}

/* latest news box */
#news{
	float : right;
	margin-top : 10px;
	position : relative;
	width : 310px;
}

#news h2{
	margin-top : 15px;
	margin-bottom : 15px;
	font-size : 1.5em;
}

#news img{
	border : 0px;
	max-width : 310px;
}

#news .title{
	color : #000;
	font-weight : bold;
	font-size : 1.1em;
	overflow : hidden;
	white-space : nowrap;
	text-overflow : ellipsis;
}

/* slideshow */
#slideshow{
	overflow : hidden;
	position : relative;
	width : 940px;
	height : 590px;
	margin-top : 35px;
}

#slideshow .prev{
	position : absolute;
	z-index : 9000;
	margin : 0;
	display : none;
	cursor : pointer;
	top : 275px;
	left : 0px;
	height: 50px;
	width: 50px;
	background : transparent url(../../image/spritemap.png) no-repeat -10px -79px;
}

#slideshow .next{
	position : absolute;
	z-index : 9000;
	margin : 0;
	display : none;
	cursor : pointer;
	top : 275px;
	right : -2px; /** why? **/
	height: 50px;
	width: 50px;
	background : transparent url(../../image/spritemap.png) no-repeat -70px -79px;
}

#slideshow .prev:hover{
	background : transparent url(../../image/spritemap.png) no-repeat -130px -79px;
}

#slideshow .next:hover{
	background : transparent url(../../image/spritemap.png) no-repeat -190px -79px;
}

#slideshow .legend{
	display : none;
	position : absolute;
	bottom : 0px;
	left : 0px;
	right : 0px;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQIW2NkYGCoB2IGRhgDAAmaAQFQjrCUAAAAAElFTkSuQmCC") repeat;
	z-index : 100;
	padding-left : 18px;
	padding-right : 18px;
	height : 48px;
	line-height : 48px;
}

#slideshow .legend p{
	width: 100%;
	text-overflow: ellipsis;
	overflow : hidden;
	white-space: nowrap;
	margin : 0px;
}

#slideshow .legend h2,
#slideshow .legend h3,
#slideshow .legend p{
	color : #fff;
}

#slideshow img{
	border : 0px;
}

/* slideshow */
@media (max-width:980px) {

	#slideshow{
		max-width: 100% !important;
	}
	
	#slideshow img{
		max-width: 100% !important;
	}

}

@media (width:768px) {

	#slideshow{
		height: 460px;
	}

	#slideshow .prev,
	#slideshow .next{
		top : 200px;
	}
	
	#welcome{
		margin-top: 30px;
		float : none;
		width: 100%;
	}
	
	#news{
		position: relative;
		float : none;
		width : 100%;
		margin-top: 30px;
	}
	
	#news-text{
		position: absolute;
		top: 3.2em;
		left: 330px;
		right: 20px;
	}

	#news-text .title{
		overflow: visible;
		white-space : normal;
		height: auto;
	}

	#advert{
		width: 100%;
		float : none;
		margin-top: 30px;
	}

	#advert img{
		width: 400px;
		float: right;
	}
	
	#advert p + p{
		width: 310px;
	}

	#advert h2{
		font-size: 1.5em;
	}

}

@media (max-width:640px) {

	#slideshow{
		height: 380px;
	}

	#slideshow .prev,
	#slideshow .next{
		top : 150px;
	}

	#welcome{
		max-width : 100%;
		float : none;
	}

	#advert{
		max-width : 100%;
		float : none;
	}

	/* TODO: #subvert */

	#news{
		display: none !important; /* FIXME */
		float : right;
		width : 310px;
	}

	#news img{
		max-width : 100%;
	}

}

@media (max-width:480px) {

	#slideshow{
		height: 279px;
	}

	#slideshow .prev,
	#slideshow .next{
		top : 110px;
	}

}

@media (max-width:320px) {

	#slideshow{
		height: 170px;
	}

	#slideshow .prev,
	#slideshow .next{
		top : 55px;
	}

	#slideshow .legend{
		padding-left : 8px;
		padding-right : 8px;
		height : 32px;
		line-height : 32px;
		font-size: 0.8em;
	}
	
}