/*********************************************************
		BASICS
*********************************************************/
* {
	font-family: ECSquareSansPro;
	font-size: 16px;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
html {
	height: 100%;
}

strong {
	font-family: ECSquareSansProBold;
	font-weight: normal;
}
/* because jquery mobile adds a div we don't want: */
.ui-loader {
	display: none;
}


/*********************************************************
		SLIDES AND COVERS (INCLUDED LAYERED)
*********************************************************/
div.slide {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
div.cover {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	height: 100%;
}
div.cover.layered {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
div.startHidden {
	display: none;
}

/*********************************************************
		INFORMATION ICON
*********************************************************/
img.imgCover {
	max-height: 100%;
	margin: 0 auto;
	display: block;
	z-index: 99999;
}
div.imageCover * {
	margin: 0 auto;
}

/*********************************************************
		INFORMATION ICON
*********************************************************/
a.infobox {
	position: absolute;
	top: 50px;
	right: 25px;
	display: block;
	background-image: url('slides/info-box.png');
	width: 40px;
	height: 35px;
	background-size: contain;
}
a.infobox-close {
	background-image: url('slides/info-close.png');
	width: 40px;
	height: 35px;
	display: block;
	position: absolute;
	background-size: contain;
	top: -16px;
	right: -18px;
}
div.full-infobox {
	display: block;
	position: absolute;
	top: 65px;
	right: 42px;
	border: 1px solid white;
	background-color: #22A0D8;
	padding: 20px;
	max-width: 33%;
	border-radius: 10px;
	box-shadow: 0 0 10px #231f20;
}
div.full-infobox h1 {
	color: #ffc63a;
	font-size: 20px;
	font-family: ECSquareSansProBold;
	font-weight: normal;
}
div.full-infobox p,
div.full-infobox ul {
	color: #ffffff;
}
div.full-infobox p strong {
	font-family: ECSquareSansProBold;
	font-weight: normal;
}
div.full-infobox ul {
	list-style-image: url('slides/bullet-square.png');
}
div.full-infobox ul ul {
	list-style-image: url('slides/bullet-triangle.png');
}

/*********************************************************
		SLIDE BACKGROUND COLOURS
*********************************************************/
div#factory .background,
div#closing .background {
	background-image: url('slides/factory-background.png');
	background-repeat: repeat;
	z-index: -9;
}
div#earth {
	background-color: #2b2b2b;

}
div#ineu,
div#howinvolve,
div#mainactivity,
div#keys,
div#fuelcycle {
	background-color: #2c5871;
}
div#circles,
div#reactorfuel,
div#nsafeguards,
div#nsecurity,
div#remonitor,
div#nkmte,
div#reactorsafety,
div#fuelsafety {
	background-color: #e9e3cd;
}

/*********************************************************
		EUROPEAN COMMISSION BANNER
*********************************************************/
div.banner {
	background-color: #21a0d7;
	width: 100%;
	height: 115px;
	position: fixed;
	z-index: 1;
}
div.banner img {
	height: 175px;
	display: block;
	margin: 0 auto;
}

/*********************************************************
		NAVIGATIONAL PANEL
*********************************************************/
a.panel,
div.panel {
	background-color: #231f20;
	border: 2px solid white;
	border-radius: 15px;
	color: white;
	position: fixed;
	bottom: 25px;
	right: 25px;
	padding: 10px;
	text-align: center;
	box-shadow: 0 0 10px #231f20;
	font-size: 14px;
	text-decoration: none;
	z-index: 999;
}
a.panel {
	font-size: 22px;
}

div.panel,
a.panel {
	width: 326px;
	height: 32px;
}
div.panelBlocker {
	width: 350px;
	height: 56px;
	background-color: rgba(0, 0, 0, 0.75);
	border-radius: 15px;
	position: absolute;
	z-index: 999;
}

/*********************************************************
		NAVIGATION PANEL BUTTONS
*********************************************************/
/* general */
div.panel a.button {
	height: 32px;
	width: 32px;
	display: inline-block;
	background-size: contain;
	text-decoration: none;
	margin: 0 5px;
	background-repeat: no-repeat;
}
/* width and height overrides */
div.panel a.button.safetysecurity { width: 40px; }
div.panel a.button.home,
div.panel a.button.next,
div.panel a.button.prev { width: 35px; }
/* margin overrides */
div.panel a.button.next { margin-left: 0; }
div.panel a.button.prev { margin-right: 0; }
/* images for normal, active and hover */
div.panel a.home {
	background-image: url("icons/home.png");
}
div.panel a.home.active,
div.panel a.home:hover {
	background-image: url("icons/home-active.png");
}
div.panel a.refresh {
	background-image: url("icons/refresh.png");
}
div.panel a.refresh.active,
div.panel a.refresh:hover {
	background-image: url("icons/refresh-active.png");
}
div.panel a.prev {
	background-image: url("icons/prev.png");
}
div.panel a.prev.active,
div.panel a.prev:hover {
	background-image: url("icons/prev-active.png");
}
div.panel a.next,
div.panel a.next.nohover:hover {
	background-image: url("icons/next.png");
}
div.panel a.next.active,
div.panel a.next:hover {
	background-image: url("icons/next-active.png");
}
div.panel a.fuelcycle {
	background-image: url("icons/fuelcycle.png");
}
div.panel a.fuelcycle.active,
div.panel a.fuelcycle:hover {
	background-image: url("icons/fuelcycle-active.png");
}
div.panel a.safetysecurity {
	background-image: url("icons/safetysecurity.png");
}
div.panel a.safetysecurity.active,
div.panel a.safetysecurity:hover {
	background-image: url("icons/safetysecurity-active.png");
}
div.panel a.info {
	background-image: url("icons/info.png");
}
div.panel a.info.active,
div.panel a.info:hover {
	background-image: url("icons/info-active.png");
}

/*********************************************************
		JRC FOOTER SQUARE
*********************************************************/
div.footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
	margin-left: -12px;
}
div.footer div.jrc {
	background-color: #21a0d7;
	color: #ffffff;
	font-style: italic;
	width: 65px;
	height: 45px;
	margin: 0 auto;
	padding: 3px;
	font-size: 11px;
}

/*********************************************************
		FACTORY SLIDE
*********************************************************/
div.factory-text {
	position: absolute;
	bottom: 110px;
	margin: 0 auto;
	width: 100%;
}
div.factory-text div {
	width: 49%;
	display: inline-block;
	font-size: 22px;
	color: #2c5871;
}
div.factory-text div.left p {
	font-size: 30px;
	text-align: right;
	padding-right: 34px;
	width: 400px;
	float: right;
	margin: 0;
}
div.factory-text div.right p {
	font-size: 40px;
	text-align: left;
	padding-left: 32px;
	width: 450px;
	float: left;
	margin: 0;
}
div.factory-text div p pulse {
	font-size: 30px;
}
div.factory-text div strong {
	font-size: 45px;
	font-weight: normal;
	font-family: ECSquareSansPro;
	color: #21a0d7;
}

/*********************************************************
		CLOSING STYLES
*********************************************************/
#closing div#followus {
	width: 45%;
	float: right;
	text-align: center;
	position: absolute;
	top: 35%;
	left: 50%;
}
#closing div#followus img.social {
	width: 55px;
	height: 55px;
}
#closing div#followus p,
#closing div#closing-text p {
	color: #2c5871;
}
#closing div#followus p {
	margin-top: 0;
}
#closing div#followus p strong,
#closing div#closing-text p strong {
	font-size: 36px;
	font-weight: bold;
	color: #21a0d7;
	font-family: ECSquareSansPro;
}
#closing div#closing-text {
	position: absolute;
	top: 20%;
	right: 50%;
	width: 35%;
	z-index: 9999;
}
#closing div#closing-text p {
	font-size: 26px;
	margin: 0;	
}
#closing div#closing-text p.copyright {
	font-size: 16px;
}
#closing div#closing-text p a {
	font-size: 26px;
	font-weight: bold;
	color: #21a0d7;
	font-family: ECSquareSansPro;
	text-decoration: none;
}

/*********************************************************
		CLOSING BUBBLES
*********************************************************/
.balloon {
	position: fixed !important;
	top: 25% !important;
}

/*********************************************************
		DEBUG ID DIV
*********************************************************/
.id {
	position: absolute;
	z-index: 999;
	left: 5px;
	top: 5px;
	border: 1px solid black;
	border-radius: 5px;
	padding: 5px;
	background-color: grey;
	color: white;
	font-family: Verdana;
	font-size: 12px;
}

/*********************************************************
		CLICKABLE BIG BUTTON ICONS
*********************************************************/
.button.clickable {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 10px solid #e9e3cd;
	display: inline-block;
	float: left;
	cursor: pointer;
}

.button.noaction {
	cursor: default !important;
}

.button.clickable span {
	width: 200px;
	height: 200px;
	display: table-cell;
	font-size: 20px;
	color: #ffffff;
	vertical-align: middle;
	padding: 0 5px;
}
#reactorsafety .button.clickable,
#fuelsafety .button.clickable { background-color: #740708; }
#nsafeguards .button.clickable { background-color: #FFC63A; }
#nsecurity .button.clickable { background-color: #FF004B; }
#remonitor .button.clickable { background-color: #85A825; }
#nkmte .button.clickable { background-color: #1B75AE; }

.slide .cover.buttons-top,
.slide .cover.buttons-bottom,
.slide .cover.buttons-middle {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	left: 0;
	right: 0;
	text-align: center;
}
.slide .cover.buttons-four {
	width: 880px;
}
.slide .cover.buttons-three {
	width: 660px;
}
.buttons-top {
	top: 20% !important;
	z-index: 999;
}
.buttons-bottom {
	top: 60% !important;
}
.buttons-middle {
	top: 35% !important;
}
.button.clickable.invisible {
	border-color: transparent !important;
	background-color: transparent !important;
	cursor: default;
}
.button-list-block.invisible {
	border-left: none;
	cursor: default;
}
.button-list-block {
	width: 200px;
	float: left;
	min-height: 50px;
	margin: 0 10px 0 9px;
	border-left: 1px solid black;
	cursor: pointer;
	padding-top: 100px;
}
.button-list-block.biggerChildren {
	width: 450px;
}
.button-list-block span {
	display: block;
	text-align: left;
	padding: 10px 0px 10px 18px;
	font-size: 20px;
}
.button-list-block span.bullet {
	font-size: 10px;
	display: inline-block;
	padding: 0px;
	position: relative;
	background-color: red;
	width: 15px;
	border-radius: 50%;
	border: 1px solid black;
	margin-right: 10px;
	position: relative;
	left: -27px;
	margin-right: -20px;
}

#reactorsafety .button-list-block span.bullet,
#fuelsafety .button-list-block span.bullet { background-color: #740708; }
#nsafeguards .button-list-block span.bullet { background-color: #FFC63A; }
#nsecurity .button-list-block span.bullet { background-color: #FF004B; }
#remonitor .button-list-block span.bullet { background-color: #85A825; }
#nkmte .button-list-block span.bullet { background-color: #1B75AE; }

.button-link-line {
	border-bottom: 1px solid black;
	-webkit-transform: rotate(-45deg);
	width: 45px;
	position: relative;
	left: -7px;
	top: -16px;
}
/*********************************************************
		POPUP SCREENS
*********************************************************/
div.popup {
	position: absolute;
	border: 3px solid black;
	top: 0;
	left: 0;
	right: 0;
	width: 75%;
	height: 70%;
	bottom: 0;
	margin: auto;
	margin-top: auto;
	padding-top: 0px;
	border-radius: 25px;
	background-color: white;
	overflow: hidden;
	box-shadow: 0 0 10px #231f20;
	z-index: 6000;
}
#reactorsafety div.popup, #reactorsafety div.popup div.popup-header,
#fuelsafety div.popup, #fuelsafety div.popup div.popup-header { background-color: #740708; }
#nsafeguards div.popup, #nsafeguards div.popup div.popup-header { background-color: #FFC63A; }
#nsecurity div.popup, #nsecurity div.popup div.popup-header { background-color: #FF004B; }
#remonitor div.popup, #remonitor div.popup div.popup-header { background-color: #85A825; }
#nkmte div.popup, #nkmte div.popup div.popup-header { background-color: #1B75AE; }

div.popup div.background {
	height: 100%;
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center 71px;
	z-index: -9;
	position: absolute;
	top: 0px;
}

div.popup div.popup-header {
	width: 100%;
	text-align: center;
	font-size: 25px;
	line-height: 70px;
	color: white;
	border-bottom: 1px solid black;
}

div.popup div.content {
	color: white;
	background-color: rgba(0, 0, 0, 0.7);
	height: 100%;
	height: calc(100% - 70px);
	width: 50%;
	overflow-y: auto;
	margin-top: 70px;
}
div.popup div.content * {
	font-size: 20px;
}
div.popup div.content>*,
div.popup div.fifty50>* {
	padding: 15px 40px;
	display: block;
}
div.popup div.content ul {
	margin-top: 0px;
	margin-left: 20px;
	margin-bottom: 0px;
}
div.popup div.content p {
	margin: 0px;
}
div.popup div.content div.fifty50 {
	float: left;
	width: 40%;
}

div.popup span.closer {
	float: right;
	right: 20px;
	color: transparent;
	background-image: url("slides/popups/close.png");
	background-repeat: no-repeat;
	background-size: contain;
	margin-top: 13px;
	height: 20px;
	width: 20px;
	position: absolute;
	cursor: pointer;
}

/*********************************************************
		OVERLAY DIV
*********************************************************/
div#overlay {
	opacity: 0.7;
	position: fixed;
	top: 0;
	left: 0;
	background-color: black;
	width: 100%;
	z-index: 5000;
}
div#overlayTimeout {
	opacity: 0.7;
	position: fixed;
	top: 0;
	left: 0;
	background-color: black;
	width: 100%;
	z-index: 5000;
}

/*********************************************************
		PRELOADING DIV
*********************************************************/
#preloader img {
	width: 50px;
	height: 50px;
}
#preloader div#tbl-container {
	display: table;
	position: absolute;
	height: 100%;
	width: 100%;
}
#preloader div#tbl-row {
	display: table-row;
}
#preloader div#loading {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	background-color: rgba(0, 0,0, 0.28);
	color: white;
	font-size: 100px;
	font-family: Verdana;
	font-weight: bold;
}

/*********************************************************
		VIDEO DISPLAY OVERRIDES
*********************************************************/
.vjs-volume-control {
	display: none;
}
.vjs-mute-control {
	display: none;
}
div.fifty50 .video-js {
	margin-top: 25%;
}

/*********************************************************
		SHOW WHAT'S CLICKABLE
*********************************************************/
.button-list-block span.bullet { height:28px; width:28px; background-image:url("icons/clickable-noborder.png"); background-repeat:no-repeat; background-position:center center; }
.button.clickable { background-image:url("icons/clickable.png"); background-repeat:no-repeat; background-position:center 15px; }
.button.clickable.invisible, .button.clickable.noaction { background-image:none; }
.vjs-fullscreen-control.vjs-control  { display: none; }

/*********************************************************
		QR CODES
*********************************************************/
#closing div#followus { top:20%; }
#closing div#followus > span { text-align: left; }
#closing div#followus .social.qr { width: 50px; height:50px;position:relative;top:-5px;left:5px; }
#closing div#followus .social-href {
	font-size: 21px;
	font-weight: bold;
	color: #21A0D7;
	font-family: ECSquareSansPro;
	text-decoration: none;
	display: block;
	position: relative;
	left: 44%;
	max-width: 320px;
}
#closing div#closing-text img.social { width:50px;height:50px; position:relative;top:30px;left:10px; }

/*********************************************************
		TIMEOUT BOX
*********************************************************/
div.timeoutprompt {
	z-index: 9999;
	background-color: #21a0d7;
	position: absolute;
	top: 200px;
	left: 25%;
	width: 50%;
	border: 5px solid white;
	border-radius: 10px;
	padding: 10px;
	font-size: 30px;
	color: white;
	min-height: 100px;
	cursor: pointer;
}

/*********************************************************
		VERSION NUMBER IN ID BOX
*********************************************************/
div.id:before { content: "v1.0 "; }
div.id { display: none; }