@charset "utf-8";
/* CSS Document */
@media print {
    .noprint {
	display: none;
	width:0px;
	height:0px;
	min-height:0px;
	min-width:0px
	}

    .doprint {
	display: block;
	}
.container { padding: 2cm;}
}
@media screen,projection {
	.doprint {
	display: none;
	}
}


/*html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0px;
	padding: 0px;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}*/
body {
	line-height: 1.5;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
table, td, th {
	vertical-align: middle;
}
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* Remove annoying border on linked images. */
a img {
	border: none;
}


/* -------------------------------------------------------------- */
.container {
	width: 984px;
	position:relative;
	background-image: url(images/back_grad.png);
	background-repeat: repeat-x;
	background-position: bottom;
	margin-top: 0;
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0; 
	/* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	
	}
	/* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector *//*background-image: url(images/gradiant_medblue-1px.jpg);
	background-repeat:repeat-x;*/


/* ---  to remove text decoration from some links use this class.
   ---  Order is important. ":hover" must be last for the underline to apply to all links; otherwise it 
   ---  applies only to unvisited links */
#linkBoxTools a{
	font-weight: normal;
}

a {
	font-family: Verdana, Geneva, sans-serif;
	color: #C1272D;
	text-decoration: none;
	font-weight: 700;
}   

a:link        { text-decoration: none; font-weight: normal; color: #C1272D; }
a:active      { text-decoration: underline; color: #C1272D; }
a:visited     { text-decoration: none; font-weight: normal; color: #C1272D; }
a:hover       { text-decoration: underline; color: #C1272D; }

/* --- Left Menu --- */
#left	{
	width: 190px;
	float:left;
	/*margin-right: 10px;*/
}
#left_menu	{
	width: 190px;
	float:left;
	/*margin-right: 10px;*/
}

#left_menu	ul{
	margin-top:0px;
	padding-left: 0px;
}
#left_menu	li{

	list-style-type: none;
	margin: 0px;
}

#left_menu	a{
	display:block;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: #000;
	height:50px;
	text-decoration: none;
	padding-top: 14px;
	padding-left: 10px;
/*	border: 1px solid #FFF;*/
}


#left_menu li .current {	
	font-size: 13px;
	text-decoration: none;
	text-align: left;
	padding-top: 5px;
	list-style:inside;
	list-style-type: circle;
	padding-left:15px;
	height: 35px;
}
#left_menu li .indent {	
	margin-left:8px;
}

/*.current a:link, .current a:active, .current  a:visited, .current  a:hover {padding-left:30px;	color:#FFFFFF;	height: 20px;
}*/


/* --- Left Menu color items --- */
.m1{
	background-color: #F15A22;	
}
.m2{
	background-color: #F36820;
}
.m3{
	background-color: #F4751E;
}
/*.m4{
	background-color: #F6831C; 
}
.m5{
	background-color: #F89019;
}
.m6{
	background-color: #FA9E17;
}
.m7{
	background-color: #FBAB15;
}
.m7a{
	background-color: #FCB214;
}*/
.m4{
	background-color: #F6801C; 
}
.m5{
	background-color: #F78C1A;
}
.m6{
	background-color: #F99719;
}
.m7{
	background-color: #FAA217;
}
.m7a{
	background-color: #FCAE15;
}
.m8{
	background-color: #FDB913;
}
.m9{
	background-color: #5CC6CB;
}
.m10{
	background-color: #9CDEDD;
}
.m11{
	background-color: #9CD1DD;
}
.m12{
	background-color: #BADDE2;	
}
.m0{
	background-color: #FFFFFF;
	border: 1px solid #000;
	font-weight: 800;
	height:35px;
	font-size: 12px;
	padding-top: 10px;
	text-align: center;
}

/* --- Div --- */
#left_col{
	float: left;
	width: 550px;
	margin-right: 10px;	
}

#right_col{
	float: left;
	width: 210px;
	margin-left: 0px;	
}
#low_pict{
	float: none;
	width: 970px;
	padding-right: 7px;
	padding-left: 7px;
}
#main_frame{
	float: left;
	width: 770px;
	margin-right: 10px;
	padding-left: 10px;

}
#main_frame p {padding:0px;}
#main_frame ol, #main_frame ul, #main_black_frame ul{margin-left:35px;}
#main_frame li {margin-bottom:5px;}
#main_black_frame{
	float: left;
	width: 794px;
	/*margin-left:-10px;*/
	background-color:#000000;
}
#main_black_frame p,  #main_black_frame h1, #main_black_frame h2{color:#FFFFFF; padding-left:10px; padding-right:10px}
#main_black_frame a {color:#FFFF00; }

#main_black_frame ul  {color:#FFFFFF; }
#main_black_frame_wide{
	float: left;
	width: 984px;
	background-color:#000000
}
.box3{
	float: left;
	width: 250px;
	height: 250px;
	margin-right: 5px;
}

.box3 ul, .box3 li{margin-left:20px;}

#box4{
	float: left;
	width: 185px;
	height: 105px;
	margin-right: 10px;
}
.box5{
	float: left;
	width: 138px;
	height: 138px;
	margin-right: 5px;
}

.box5 a	{
	font-size: 1.1em;
	color: #000;
	font-weight: 900;
	background-color: #FFF;
	filter: Alpha(Opacity=85);
	opacity: 0.85;
	text-align: center;
	text-decoration: none;
	display: block;
	height: 45px;
	width: 138px;
	margin-top: 93px;
}

.box3 a	{
	font-size: 16px;
	color: #000;
	font-weight: 900;
	background-color: #FFF;
	filter: Alpha(Opacity=85);
	opacity: 0.85;
	text-align: center;
	text-decoration: none;
	display: block;
	width: 250px;
	height: 50px;
	margin-top: 200px;
}
.videos {
	background-image: url(images/videoPage_background.jpg);
	background-color: #000;
	background-repeat: repeat-x;
	height: 900px;
	width: 790px;
}
/* --- styles particulier de blocs --- */

.know{
	background-image: url(images/knowledge.jpg);
}
.fin{
	background-image: url(images/acc_finance.jpg);
}
.mark{
	background-image: url(images/single_market.jpg);
}
.part{
	background-image: url(images/partners.jpg);
}
.inco{
	background-image: url(images/int_coop.jpg);
}
.citizen{
	background-image: url(images/citizens.jpg);background-repeat:no-repeat
}
.entr{
	background-image: url(images/entrepreneur.jpg); background-repeat:no-repeat
}
.resear{
	background-image: url(images/chercheuse.jpg);background-repeat:no-repeat
}


/* --- Styles for Tales from the Future Page --- */

box_tales	{
	width:185px;
	float:left;
	margin:0;
}

.col_health	{
	background-color: #ffcb08;
}
.col_food	{
	background-color: #1ebcd8;
}
.col_energy	{
	background-color: #db6ca2;
}
.col_climate	{
	background-color: #009bdf;
}
/* --- Typography --- */
p {
	font-family: Verdana, Geneva, sans-serif;
	line-height: 2em;
	color: #000;
	margin-left: 5px;
}

ul, ol {
	font-family: Verdana, Geneva, sans-serif;
/*	font-size: 75%;
*/	line-height: 145%;
	color: #000;
	margin-bottom: 15px;
}
li {
  margin: 5px 0;
  line-height: 24px;
}

#path ul {color: #fff;}

h1{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #007081;
	margin-top: 15px;
	margin-left: 5px;
	margin-bottom:15px;
 }
h2{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #007081;
	margin-top: 15px;
	margin-left: 5px;
	margin-bottom:15px;

 }
h3{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #007081;
	margin-left: 5px;
	margin-top: 20px;
	margin-bottom: 8px;
 }
h4{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #007081;	
	margin-left: 5px 
 }
h5{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: #Ed1C24;
	margin-left: 5px;
	padding: 0px;
 }
 
.txt{font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;	
	color:#000; 
}
.date{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #ED1C24;
	text-align: left;
	margin-top:5px;
	margin-bottom: 1px;
	font-weight: 900;
}
.small{	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9px;
	color: #ED1C24;	
}
.mainlink{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 103%;
	line-height: 140%;
	font-weight: 400;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	padding-top: 18px;
}
.white{
	color:#FFF; 
}
.black{
	color:#000; 
}
.red{
	color:#ED1C24; 
}
.brown{
	color:#721203; 
}
.violet{
	color:#BA005D; 
}
.bold{
	font-weight:900;
}

/* for the pictures and rules */
.imleft {
	float: left;
	margin-right: 12px;
	margin-top: 8px;
}

.imleftsyndicated {
	float: left;
	margin-right: 12px;
	margin-top: 8px;
	margin-bottom: 4px;
	vertical-align: middle;
}
.imright {
	float: right;
	margin-left: 12px;
	margin-top: 2px;
}
.pictright {
	float: right;
	margin-left: 2px;
	margin-top: 6px;
	margin-bottom: 6px;
}
.pictleft {
	float: left;
	margin-right: 3px;
	margin-top: 6px;
	margin-bottom: 6px;
}
.around{
	padding-top: 16px;
	padding-left: 21px;
}
.aroundlogos{
	padding-top: 8px;
	padding-left: 7px;
}

/* The last column in a row needs this class. */
.last, div.last {
	margin-right: 0;
}
/* Regular clearing
   apply to column that should drop below previous ones. */
.clear {
	clear:both;
}
/* --- Round corners --- */
#boxtopleft {
	float:left;
	width:20px;
	background-image: url(images/tl.gif);
	height: 21px;
	background-repeat: no-repeat;
	background-position:bottom;
	}
	
#boxtopright {
	float:left;
	width:20px;
	background-image: url(images/tr.gif);
	height: 21px;
	background-repeat: no-repeat;
	background-position:bottom;
	}
#boxcenter { /* used with boxtopleft and -right and boxfootleft and -right, this div then determines the width of the box (specified as a style inline in the page) */
	background-color:#ffffff;
	height:21px;
	float:left;
	}

#boxfootleft {
	float:left;
	width:20px;
	background-image: url(images/bl.gif);
	height: 21px;
	background-repeat: no-repeat;
	background-position:bottom;
	}
#boxfootright {
	float:left;
	width:20px;
	background-image: url(images/br.gif);
	height: 21px;
	background-repeat: no-repeat;
	background-position:bottom;
	}
/* For the Commission banner. */



.title-en {background-image: url(/research/innovation-union/images/banner_innovation_union.gif);}

#top {padding: 0px; }

/*#linkBoxTools ul {
font-size: 100%;
line-height:100%;
padding: 0 2px 0 5px;} corrects ul settings above which are wrong for the tools */

#print-target{
		position: absolute; 
		bottom: 290px; 
		right: 750px; 
		width: 120px; 
		height: 16px; 
		background-color: transparent; 
		border: 1px solid yellow; }
		
#play-game{
		position: absolute; 
		bottom: -10px; 
		right: 670px;  
		width: 205px; 
		height: 50px; 
		background-color: transparent; 
		border: 1px solid yellow; }

/* div for syndicated news  - additional style */
.syndicated {padding-left:5px; padding-bottom:3px;}
.syndicated img { max-height:100px; clip:rect(auto, auto, auto, auto)}

#labiframe {width:795px;}



/*-------------------------------------------*/
/*REVAMPING CSS - 26/07/13*/
/*--------------------------------------------*/
/* #full{display: inline-block; padding: 10px; width: 964px;} */
#full .span2 p{padding:10px;}
#full ul, ol{margin:0 20px;}
#full .picborder-left{padding:5px; border:1px solid #ccc; margin:0 10px 0 0;}
#full .picborder-right{padding:5px; border:1px solid #ccc; margin:0 10px;}

.calendar div div img{margin-left:20px; padding:3px;}
.calendar div .date{border-top:1px dashed #cccccc; margin-top:10px;}
.calendar div ul li{padding-left:10px;}

#keytabs{margin:0 10px;}

.span2{width:45%; float:left; padding:0 10px; margin:20px 0 0 18px; /*box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);*/ }
.span3{width:55%; float:left; padding:0 10px; margin:0 0 0 18px;}
.span4{width:60%; float:left; padding:0 10px; margin:0 0 0 18px;}
.span1{width:30%; float:left; padding:0 10px; margin:0 0 0 18px;}
.span5{width:20%; float:left; padding:0; margin:0 0 0 18px;}
.span10{width:75%; float:left; padding:0; margin:0 0 0 18px;border-left: 1px dashed #CCCCCC;}
.span12{width:95%; float:left; padding:0 10px; margin:20px 0 0 18px;}

.block-shadow{box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);}
#full h1, .span4heading{color:#e76b3a; border-bottom:1px dashed #ccc; margin:0 10px; padding:10px 20px;}
#intro{border-top:0px solid #333; width:100%; background-color:#0b344e; margin-bottom:20px; margin-top:-24px;}
#intro h1{margin:0; padding:20px 10px; text-transform:none; color:#ffffff; font-size:17px;}
.title_bg1{background:url(/research/innovation-union/images/title_bg1.png) no-repeat scroll right top; padding-top:10px;}
.title_bg2{background:url(/research/innovation-union/images/title_bg2.png) no-repeat scroll right top; padding-top:10px;}
.title_bg3{background:url(/research/innovation-union/images/title_bg3.png) no-repeat scroll right top; padding-top:10px;}
.title_bg4{background:url(/research/innovation-union/images/title_bg4.png) no-repeat scroll right top; padding-top:10px;}
.title_bg5{background:url(/research/innovation-union/images/title_bg5.png) no-repeat scroll right top; padding-top:10px;}
.title_bg6{background:url(/research/innovation-union/images/title_bg6.png) no-repeat scroll right top; padding-top:10px;}
.title_bg1, .title_bg2, .title_bg3, .title_bg4, .title_bg5, .title_bg6	{border-bottom: 1px dashed #ccc;}

.black{background-color:#000000; width:100%; margin:0 auto; min-height:500px;}

#full ol.faq li{margin-bottom:10px;}

hr{height:1px; width:90%; margin:10px auto; border:0; border-bottom:1px dashed #ccc; }

#navigation-container{
	margin-top:1px; 
	clear: both;
	padding: 0;
	position: relative;
	width: 100%;
	z-index: 10000;
	background:#0b344e;		
}

ul#navigation{
	list-style:none;
	margin: 0;
	padding:0 10px;
	overflow: hidden;
	border-bottom:1px solid #ffffff;
}
	  
ul#navigation li{
	/*float: left;*/
	display:inline-block;
	margin: 0;
	padding:5px 10px;	
	font-size:1.3em;
}
ul#navigation li.showforphone{display:none;}

ul#navigation li a,
ul#navigation li a:visited{
	
	padding:0;
	display:block;
	text-align:center;
	text-decoration:none;
	color:#e76b3a;
	font-weight:normal;
}

ul#navigation li:hover a,
ul#navigation li a:hover,
ul#navigation li a:active{ 
	padding:0;
	display:block;
	text-align:center;
	text-decoration:none;
	color:#ffffff;
}


ul#navigation li ul{ 
	list-style: none;
	display:none;
	position:absolute;
	border-bottom: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid white;
}

ul#navigation li:hover ul,
ul#navigation li.hover ul
{
	
	display:block;
	text-align:center;
	text-decoration:none;
	color:#ffffff;
	padding:0;
	/*z-index:1000; */
}

ul#navigation li ul li{ 
	width:200px;
	clear:left;
	z-index:10000;
	background:#0b344e;		
	border-top:1px dashed #ccc;
	font-size:0.8em;
	display:list-item;
}

ul#navigation li ul li a:link,
ul#navigation li ul li a:visited{ 
	clear:left; 
	border:none; 
	margin-left:16px;
	position:relative; 
	z-index:10000;
	text-align:left;
	color:#e76b3a;	
}
	
ul#navigation li ul li:hover a,
ul#navigation li ul li a:active,
ul#navigation li ul li a:hover{ 
	clear:left;
	border:none;	
	position:relative;
	z-index:10000;
	color:#ffffff;
}

/*nav level 2*/
ul#navigation li:hover ul li ul
{
	display:none;
	position:absolute;
	left:220px;
	margin-top:-29px;
	
}

ul#navigation li ul li:hover ul
{
	display:block;
	font-size:1.3em;
}

ul#navigation li ul li ul li a:link,
ul#navigation li ul li ul li a:visited{ 
	clear:left; 
	border:none; 
	margin-left:16px;
	position:relative; 
	z-index:10000;
	text-align:left;
	color:#e76b3a;	
}

ul#navigation li ul li ul li:hover a,
ul#navigation li ul li ul li a:active,
ul#navigation li ul li ul li a:hover{ 
	clear:left;
	border:none;	
	position:relative;
	z-index:10000;
	color:#ffffff;
}

/* Nav level 3*/
ul#navigation li:hover ul li ul li ul
{
	display:none;
	position:absolute;
	left:220px;
	margin-top:-29px;
	
}

ul#navigation li ul li ul li:hover ul
{
	display:block;
	font-size:1.3em;
}

ul#navigation li ul li ul li ul li a:link,
ul#navigation li ul li ul li ul li a:visited{ 
	clear:left; 
	border:none; 
	margin-left:16px;
	position:relative; 
	z-index:10000;
	text-align:left;
	color:#e76b3a;	
}

ul#navigation li ul li ul li ul li:hover a,
ul#navigation li ul li ul li ul li a:active,
ul#navigation li ul li ul li ul li a:hover{ 
	clear:left;
	border:none;	
	position:relative;
	z-index:10000;
	color:#ffffff;
}

ul#navigation li a.active{color:#ffffff;}

.pic_prize{margin:0 20px; float:right;}
.video{float:left; margin:20px;}
.thumbnail {
  border-bottom: 1px solid #BEB9B9;
  border-top: 1px solid #BEB9B9;
  float: left;
  margin: 10px 15px 8px 0;
  padding: 6px;
  text-align: center;
  width: 300px;
}
.thumbnail img {width:300px;}

#social-mobile{display:none;}

/*
Back to top button 
*/
#back-top {
	position: fixed;
	bottom: 5px;
	right:30px;
}
#back-top a {
	width: 50px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}
/* arrow icon (span tag) */
#back-top span {
	width: 50px;
	height: 50px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(images/up-arrow.png) no-repeat center center;
	background-size:90%;
	/* rounded corners */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
}

#low_pict{width:99%;}
#low_pict img{max-width:100%;}
	
@media (screen and (max-width : 640px)), print{
	body{background:none;}
	#layout{min-width:100%; max-width:100%;}
	#intro{margin-bottom:10px; margin-top:0;}
	.container-slide{display:none;}
	.span1{width:95%; margin:0 2px; padding:0 2px;}
	.span2{width:95%; margin:0 2px; padding:0 2px;}
	.span4{width:95%; margin:0 2px; padding:0 2px;}
	.span12{width:95%; margin:0 2px; padding:0 2px;}
	.block-shadow{box-shadow:none;}
	
	.pic_prize{/*margin:0 0 10px 0; width:90%;*/ display:none;}
	#accordion{padding-bottom:20px;}
	.video{width:100%; margin:0; padding:0;}
	#navigation-container{text-align:center;}
	#navigation-container #navigation{display:list-item;}
	#social1{display:none;}
	#social-mobile{display:block;}
	#back-top{display:none;}
	
	ul#navigation{padding:0; text-align:left;}
	ul#navigation li{display:inline-block;  padding:5px 10px; width:150px;}
	ul#navigation li a, ul#navigation li a:visited{text-align:left;}
	ul#navigation li:hover a, ul#navigation li a:hover, ul#navigation li a:active{ text-align:left;}
		
	ul#navigation li ul li{width:120px; clear:both; display:list-item;}
	ul#navigation li ul li a:link, ul#navigation li ul li a:visited{clear:none; border:none; margin-left:0; /*position:relative; z-index:10000;*/ text-align:left; color:#e76b3a;}
	
	ul#navigation li ul li:hover a, ul#navigation li ul li a:active, ul#navigation li ul li a:hover{clear:left; border:none; position:relative; z-index:10000; color:#ffffff;}
	
	/*nav level 2*/
	ul#navigation li ul li:hover ul{display:block;font-size:1.3em; left:140px;}
	ul#navigation li ul li:hover ul li{width:100px; clear:left; display:list-item;}
	ul#navigation li ul li ul li a:link, ul#navigation li ul li ul li a:visited{ margin-left:0;}
	ul#navigation li:hover ul li ul li ul{left:120px;}
	
	#navigation .hideforphone{display:none;}
	#navigation .showforphone{display:inline-block !important;}
	.maptohide{display:none;}
}