body { font:14px/1.5em "Segoe UI", Arial, Helvetica, sans-serif; background: #fff }
a { text-decoration:none }

/* Page */
#page
{
   width: 35%;
   margin: auto;
   background-color: #fff;
   margin-top: 18%;

   /*border: 1px solid #000;  /* Bordure du cadre principal */
}

/* Icons */
#icon
{
    display:block;
    height:60px;
    width:100px;
	
	margin-bottom: 20px;
	
	filter:alpha(opacity=50); 
    -moz-opacity: 0.5; 
    opacity: 0.5;
}

#icon:hover
{
	filter:alpha(opacity=100); 
    -moz-opacity: 1.0; 
    opacity: 1.0;
}

#icon.contact
{
	background:url(img/contact.png) no-repeat;
	background-position: center;
	background-size: 60px 60px;
}

#icon.science
{
	background:url(img/science.png) no-repeat;
	background-position: center;
	background-size: 60px 60px;
}

#icon.mail
{
	background:url(img/mail.png) no-repeat;
	background-position: center;
	background-size: 60px 60px;
}

#icon.files
{
	background:url(img/cloud.png) no-repeat;
	background-position: center;
	background-size: 60px 60px;
}

/* Searchbar */
#searchbar
{
	float: left;
	height: 35px;
	border: 5px solid #4285f4;
}

#searchbar input 
{
	padding: 0;
	margin: 0;
	border: 0px;
	height: 35px;
	font-size: 16px;
}

/* Menu (Thanks to www.emmanuelbeziat.com) */
#menu
{
	padding: 0;
	margin: 0;
}

#menu ul
{
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	font-size:16px;
	letter-spacing:-2px
}

#menu li
{
	display:inline-block;
	position:relative
}

#menu li ul
{
	display: none;
	position:absolute
}

#menu li:hover > ul
{
	display:block
}

#menu a
{
	background: #4285f4 url(img/menu.png); /* #2ab2df */
	display: block;
	width: 48px;
	height: 45px;
	font-size: 16px;
	letter-spacing: normal;
	line-height: 40px;
	color: #fff
}

#menu a:hover,
#menu li:hover > a
{
	background: #2ab2df url(img/menu.png)
}

#menu .sous-menu 
{
	background: #4285f4
}

#menu li li 
{
	display: block
}

#menu li li a
{
	display: block;
	width: 150px;
	height: 40px;
	font-size: 14px;
	letter-spacing: normal;
	line-height: 40px;
	color: #fff;
	background: #4285f4;
}

#menu li li:hover > a 
{
	background: #2ab2df
}

#menu li li:hover > ul
{
	left: 150px;
	top: 0
}

#menu li li a:hover
{
	background: #2ab2df
}

/* News */
#news
{	
	width: 88%;
	margin:0;
	margin-top: 15px;
	
	color: #2ab2df;
	
	filter:alpha(opacity=0); 
    -moz-opacity: 0.0; 
    opacity: 0.0;
	
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out; 
}

#news:hover
{
	filter:alpha(opacity=100); 
    -moz-opacity: 1.0; 
    opacity: 1.0;
}

#news a 
{
 color: #ff530f;
 text-decoration:none;
}