@charset "utf-8";

/*
Application: Galatea webCMS
Screens: Desktop & Mobile
Theme: cppe
Version: 1.0
Author: Qiubits SARL
Last modified: 12-07-2013
*/

/*------------------------------------------------

CSS STRUCTURE:

1. GENERAL TYPOGRAPHY
	1.1 Global Reset 
	1.2 General Styles
	1.3 Font Styles

2. HEADER: LOGO & NAVIGATION 
	2.1 Grid 1 Styles
	2.2 Logo Styles
	2.3 Navigation Main Styles
	
3. WRAPPER
	3.1 Grid System 

4. CONTENT
	4.1 Globals
	4.2 Welcome Page
	4.3 History Page
	4.4
	4.5
	4.6
	4.7
	4.8
	4.9 Article Styles
	4.10 Footer Styles
	
5. MISCELLANEOUS


------------------------------------------------*/

/*============================================================================================*/
/* 1. GENERAL */
/*============================================================================================*/
/*----------------------------------------------*/
/* 1.1 Global Reset */
/*----------------------------------------------*/
html, body  
{
	height: 100%;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video 
{
	margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;
}
body 
{
	line-height: 1;
}
ol, ul 
{ 
	list-style: none; 
}
blockquote, q 
{ 
	quotes: none; 
}
blockquote:before, blockquote:after, q:before, q:after 
{ 
	content: ''; 
	content: none;
}
:focus 
{ 
	outline: 0; 
}/* remember to define focus styles! */
del 
{ 
	text-decoration: line-through; 
}
table 
{ 
	border-collapse: collapse; 
	border-spacing: 0; 
}/* tables still need 'cellspacing="0"' in the markup */
.clearElement
{
	clear:both;
}
.clear	
{
	clear:both;
	height:0;
}

::selection {background:#4c4c4c;color:#ffffff;}
::-moz-selection {background:#4c4c4c;color:#ffffff;}

/*----------------------------------------------*/
/* 1.2 General Styles */
/*----------------------------------------------*/
* {margin:0;padding:0;}
html,
body
{	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #000000;
}

@media only screen and (max-width: 970px) {

}

/*----------------------------------------------*/
/* 1.3 Font Styles */
/*----------------------------------------------*/


/*============================================================================================*/
/* 2. HEADER (LOGO & NAVIGATION) */
/*============================================================================================*/
/*----------------------------------------------*/
/* 2.1 Grid Styles */
/*----------------------------------------------*/
#header {
	display:block;
	overflow:visible;
	padding-top:20px;
}

#header .inside {
	display:block;
	margin: 0 auto;
	height:140px;
}

@media only screen and (max-width: 970px) {
	#header
	{
		padding:25px 20px 0;
	}
	#header .inside {
		height:auto;
	}
}

/*----------------------------------------------*/
/* 2.2 Logo Styles */
/*----------------------------------------------*/
#logo 
{
	width: 960px;
	display: block;
	position:relative;
	margin:0 auto;
	z-index:9999;
	height:70px;
}

#logo a
{
	width:300px;
	height:45px;
	display: block;
	position: relative;
	background:url(../images/logo-cppe.png) no-repeat;
}

#logo span,
#logo h1,
#logo h2,
#logo h3,
#logo h4,
#logo h5,
#logo h6
{
	display:none;
}

@media only screen and (max-width: 970px) {	
	#logo
	{
		width:auto !important;
		padding:10px 0 20px;
		height:auto;
	}
	#logo a
	{
		margin:0 auto;
		width:300px;
		height:47px;
		display: block;
		position: relative;
		background:url(../images/logo-cppe-mobile.png) no-repeat;
	}
}

/*----------------------------------------------*/
/* 2.3 Navigation Styles */
/*----------------------------------------------*/
#navigation-top
{
	position:relative;
	width:100%;
	display: block;
	position: relative;
	background-color:#000;
	height:36px;
	/*z-index:999\9; hack IE8 and below */ 
}

#navigation-top .inside
{
	display:block;
	width:960px;
	margin:0 auto;
	height:20px;
}

#navigation-top ul
{
	display:inline;
	/*float:right;*/
	position: relative;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

#navigation-top ul li
{
	padding: 0;
	margin: 0;
	float: left;
	position: relative;
	list-style:none;
}
#navigation-top ul li a
{
	text-decoration: none;
}
#navigation-top ul li span
{
	display: block;
	padding: 0 32px;
	/* padding: 0 6px\9; hack IE8 and below */  
	font: 14px 'Oxygen', sans-serif;
	color: white;
	font-weight:bold;
	/*text-transform: uppercase;*/
	text-decoration: none;
	line-height:36px;
	border-right:#666 solid 1px;
	/*background-color:#a30202;*/
}
#navigation-top ul li.last span
{
	border-right:0px;
}
#navigation-top ul li.trail span,
#navigation-top ul li.trail:hover span,
#navigation-top ul li span:hover,
#navigation-top ul li:hover span
{
	background-color: #0071bd;
	color:#fff;
	cursor:pointer;
}
#navigation-top ul li ul
{
	display:none;
	position:absolute;
	top:36px;
	left:0;
	z-index:99999;
}
#navigation-top ul li:hover ul
{
	display:block;
}
#navigation-top ul li ul li
{
	background-color:#fff;
	width:200px;
	border-bottom:solid 1px #fff;
}
#navigation-top ul li ul li.last
{
	border-bottom:solid 0px;
}
#navigation-top ul li ul li.last
{
	border-bottom:solid 0px #fff;
}
#navigation-top ul li.trail ul li span,
#navigation-top ul li.trail:hover ul li span,
#navigation-top ul li:hover ul li span
{
	background-color:#e6eef5;
	color:#000;	
	background-image:none;
}
#navigation-top ul li.trail ul li.active span,
#navigation-top ul li.trail ul li:hover span,
#navigation-top ul li ul li:hover span
{
	background-color: #0071bd;
	color:#fff;
}
#navigation-top ul li ul li span
{
	display: block;
	padding: 3px 7px;
	font: 14px 'Oxygen', sans-serif;
	color: white;
	font-weight:normal;
	text-decoration: none;
	line-height:26px;
	border-right:0px;
	/*white-space:nowrap;*/
}
#navigation-top sub
{
	font: 8px 'Oxygen', sans-serif;
}
#navigation-top ul li ul li span sup
{
	vertical-align:super;
	font-size:8px;
}
#navigation-top-mobile
{
	display:none;
	position: relative;
	padding: 20px 0px;
}
#navigation-top-mobile select
{
	width: 100%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;  
	padding: 5px 5px 5px 5px;
	font-weight:bold;
	font-size: 16px;
}
#navigation-top-mobile option.level_1
{
	text-transform:uppercase;
}
#navigation-top-mobile option.level_2
{
	text-transform:none;
}
#navigation-top-mobile select sub
{
	font: 8px 'Oxygen', sans-serif;
}

@media only screen and (max-width: 970px) {
	#navigation-top .inside
	{
		width:auto;
	}
	#navigation-top
	{
		display:none;
	}

	#navigation-top-mobile
	{
		display:block;
	}
}


/*============================================================================================*/
/* 3. WRAPPER */
/*============================================================================================*/
/*----------------------------------------------*/
/* 3.1 Wrapper Styles */
/*----------------------------------------------*/
#wrapper
{
	min-height: 100%;
	/*height: 100%;*/
	margin: 0 auto;
	position:relative;
}
#container_wrapper
{
	padding: 20px 0;	
	padding-bottom:120px;   /* Height of the footer */
}
#container
{
	margin: 0 auto;
	width: 960px;
	min-height:375px;
}
@media only screen and (max-width: 970px) {
	#container
	{
		margin: 0 auto;
		width: 100%;
		min-height:auto;
	}

	
	#container_wrapper
	{
		padding: 20px;	
	}
}


/*============================================================================================*/
/* 4. CONTENT */
/*============================================================================================*/
/*----------------------------------------------*/
/* 4.1 Globals */
/*----------------------------------------------*/
.grid-1-l,
.grid-1-r
{
	width:440px;
	position:relative;
}
.grid-1-l
{
	float:left;
}
.grid-1-r
{
	float:right;
	padding-top:35px;
}
.grid-1-l h1,
.grid-1-r h1,
.grid-2 h1
{
	font: 40px 'Oxygen', sans-serif;
	/*color:#fff;*/
	color:#0071bd;
	text-transform:uppercase;
	display:inline;
	font-weight:bold;
	padding:0;
	margin:0;
	line-height:32px;
	height:32px;
	overflow:hidden;
}
.article .grid-1-l,
.article .grid-1-r
{
	padding:0;
}
.article h2
{
	font: 25px 'Oxygen', sans-serif;
	color:#0071bc;
	text-transform:uppercase;
	display:block;
	font-weight:bold;
	padding:20px 0 5px;
	margin:0;
}
.article h3
{
	font: 18px 'Oxygen', sans-serif;
	color:#0071bc;
	display:block;
	font-weight:bold;
	padding:20px 0 5px;
	margin:0;
}
.article img.widthFlex
{
	width:100%;
	height:auto !important;
	padding:10px 0;
}
.article
{
	background-color:#FFF;
	padding:15px;
}
.article p
{
	padding:5px 0;
	text-align:justify;
}
.article div.patent
{
	padding:20px;
	text-align:center;
}
.article div.patent span
{
	font: 40px 'Oxygen', sans-serif;
	color:#000;
	display:inline-block;
	font-weight:bold;
	padding:5px 20px;
	margin:0 auto;
	text-align:center;
	background-color: #e6eef5;
	border:solid #0071bc 1px;
}
.article p.formula
{
	background-color:#e6eef5;
	padding:10px;
	display:block;
	text-align:center;
	margin:10px 0;
}
.article ul
{
	padding:10px 20px;
}
.article ul li
{
	list-style:square;
}
.article a
{
	color:#0171bb;
	text-decoration:none;
}
.article a:hover
{
	color:#fff;
	background-color:#0171bb;
	text-decoration:none;
}
.article .report
{
	width:100%;
	margin:20px 0;
}
.article th
{
	width:25%;
	text-align:center;
	background-color: #0071bd;
	color: #fff;
	padding:5px;
}
.article th:first-child
{
	text-align:left;
}
.article tr td
{
	text-align:center;
	padding:5px;
	background-color:#f1f8fb;
	border-top:solid 2px #fff;
}
.article tr td:first-child
{
	text-align:left;
}
.article .images:after
{
	content:" ";
	float:none;
	display:table;
	width:100%;
	height:1px;
	clear:both;
}
.article .images .img1 {float:left;padding:10px 0;}
.article .images .img2 {float:left;padding:10px 0;}
.article .images .img3 {float:left;padding:10px 0;}
.article .images .img4 {float:left;padding:10px 0;}
.article .images .img5 {float:left;padding:10px 0;}
.article .images .img6 {float:left;padding:10px 0;}
.article .images img {
	max-height:240px;
	max-width:450px;
	width:auto;
	height:auto;
	vertical-align: middle;
}
.article .images {
	margin: 20px 0;
}
.article .images span {
	display:block;
	text-align:center;
	font-style: italic;
}

.article .images > div:not(:last-child) {
	margin-right: 2%;
}
.article .date
{
	font: 18px 'Oxygen', sans-serif;
	font-style:italic;
	padding-top:10px;
}
.article .logo
{
	max-width:350px;
	height:auto;
	margin:25px 0;
}
#container sub,
.article sub,
.grid-1-l sub,
.grid-1-r sub
{
	vertical-align:sub;
	font-size:10px;
}
#container h1 sub,
.article h1 sub,
.grid-1-l h1 sub,
.grid-1-r h1 sub
{
	/*vertical-align:sub;*/
	font-size:20px;
}
#container sup,
.article sup,
.grid-1-l sup,
.grid-1-r sup
{
	vertical-align:super;
	font-size:10px;
}
#container h1 sup,
.article h1 sup,
.grid-1-l h1 sup,
.grid-1-r h1 sup
{
	vertical-align:super;
	font-size:20px;
	line-height:auto;
}
.article .imgRight
{
	float:right;
	padding:5px 0 5px 25px
}


@media only screen and (max-width: 970px)
{
	.grid-1-l,
	.grid-1-r
	{
		width:100%;
		position:relative;
		float:none;
		clear:both;
		padding:0;
	}
	.grid-1-r
	{
		padding-top:25px;
	}
	.article
	{
		padding:0 20px;
	}
	.grid-1-l h1,
	.grid-1-r h1,
	.grid-2 h1
	{
		font: 25px 'Oxygen', sans-serif;
		color:#0171bb;
		text-align:left;
		text-shadow:none;
		filter: dropshadow(color=#fff, offx=0, offy=0);
		padding:0 0 20px;
		font-weight:bold;
		text-transform:uppercase;
	}
	
	.article div.patent span
	{
		font: 25px 'Oxygen', sans-serif;
		padding:5px 20px;
	}
	
	.article img.mresize
	{
		width:100%;
		height:auto !important;
		padding:10px 0;
	}
}

/*----------------------------------------------*/
/* 4.2 Welcome Page */
/*----------------------------------------------*/
#home
{
	/*position:absolute;*/
    /*top:25%;*/
	width:960px;
	text-align:center;
    margin-bottom:25px;
}
#home h1
{
	font: 45px 'Oxygen', sans-serif;
	color:#0171bb;
	text-align:center;
	/*text-shadow: 0px 0px 25px #000000;*/
	/*filter: dropshadow(color=#000, offx=0, offy=0);*/
	/*filter: glow(color=black,strength=1);*/
	padding:80px 0px 20px;
	font-weight:bold;
}
#home ul
{
	list-style: none;
    text-align: center;
}
#home ul li
{
	display: inline;
	margin-right:5px;
	list-style:none;
}
#home ul li a
{
	background:url(../images/home-ul-li.png);
	display:inline-block;
}
#home ul li a span
{
	display:inline-block;
	padding:20px 20px 0;
	color:#fff;
	font: 18px 'Oxygen', sans-serif;
	height:45px;
}
#home ul li a span:hover
{
	/*background-color:#0171bb;*/
}
#home sub
{
	font-size:10px;
}


#news
{
    width:872px;
    margin:auto;
    color:#ffffff;
    font-size:13px;
    height:100px;
    line-height:20px;
}
#news h2
{
    font:20px 'Oxygen', sans-serif;
    font-size:20px;
    color:#ffffff;
    text-transform:uppercase;
    display:block;
    font-weight:normal;
    padding:3px 13px;
    margin:0 5px 0 0;
    border-bottom:1px solid #ffffff;
    background:url(../images/news-bg.png);
    /*letter-spacing:5px;*/
}
#news .scroller-container
{
    padding:8px 3px;
    margin-right:5px;
    background:url(../images/news-bg.png);
}
#news ul
{
    list-style:none;
}
/* IE 10 + hack *//*
@media screen and (min-width:0\0)
{
    #news ul
    {
    }
}
*/
#news ul li
{
    padding:10px;
    list-style:none;
}
#news ul li .title
{
    font-size:14px;
    font-weight:bold;
    padding:2px;
}
#news ul li .date
{
    font-size:14px;
    color:#ffffff;
    padding:2px 5px;
    border:1px solid #ffffff;
    border-right:1px solid #ffffff;
}

#news ul li .text
{
    display:block;
    padding-top:4px;
    padding-bottom:5px;
}

@media only screen and (max-width: 970px)
{	
	#home
	{
		position:relative;
		top:0;
		width:auto;
	}
	#home h1
	{
		font: 25px 'Oxygen', sans-serif;
		color:#0171bb;
		text-align:left;
		text-shadow:none;
		/*filter: dropshadow(color=#fff, offx=0, offy=0);*/
		/*filter: glow(color=white,strength=5);*/
		padding:0 0 20px;
		text-transform:uppercase;
		font-weight:bold;
	}
	#home ul
	{
		list-style: none;
		text-align:left;
	}
	#home ul li
	{
		display: block;
		width:100%;
		margin-right:0;
		margin-bottom:5px;
		list-style:none;
	}
	#home ul li a
	{
		background:url(../images/home-ul-li.png);
		display:block;
		text-decoration:none;
	}
	#home ul li a span
	{
		display:block;
		padding:5px 20px;
		color:#fff;
		font: 16px 'Oxygen', sans-serif;
		text-decoration:none;
		height:auto;
	}
	#home ul li a span:hover
	{
		background-color:#0171bb;
	}

    #news
    {
        display:none;
    }
}

/*----------------------------------------------*/
/* 4.3 History Page */
/*----------------------------------------------*/
.timelineQ .border-bg
{
	width:30px;
	background:url(../images/history-border-bg.png) repeat-y;
}
.timelineQ .bullet
{
	width:30px;
	height:18px;
	display:inline-block;
	background:url(../images/history-bullet.png) no-repeat;
	vertical-align:middle;
}
.timelineQ .bullet-year
{
	width:30px;
	height:18px;
	display:inline-block;
	background:url(../images/history-bullet-year.png) no-repeat;
	vertical-align:middle;
}
.timelineQ .date
{
	background-color:#0171bb;
	display:inline-block;
	padding:10px 15px;
	color:#fff;
	font-weight:bold;
	vertical-align:middle;
}
.timelineQ .logo
{
	max-width:200px !important;
	height:auto;
	margin:15px 20px 0 !important;
}
.timelineQ .year
{
	background-color:#fff;
	display:inline-block;
	padding:10px 15px;
	color:#0171bb;
	font-weight:bold;
	vertical-align:middle;
	margin-top: 20px;
	margin-bottom: 20px;
}
.timelineQ .description
{
	background-color:#fff;
	display:inline-block;
	vertical-align:middle;
	width:100%;
}
.timelineQ .description h2+p
{
	padding-top:0 !important;
}
.timelineQ .description p
{
	padding:15px;
}
.timelineQ .description h2
{
	padding:15px 15px 0;
	color:#0171bb;
	font-weight:bold;
	font-size:15px;
}
.timelineQ .description .more
{
	padding:0 18px 15px;
	color:#0171bb;
	text-transform: lowercase;
	display:inline-block;
	font-weight:bold;
	text-decoration:none;
	background:url("../images/bullet-news.png") no-repeat right 5px;
	margin-right:15px;
}
.timelineQ .description img
{
	max-width:100%;
	height:auto;
}
.timelineQ .size
{
	width:50%;
}
.timelineQ .right
{
	text-align:right !important;
}
.timelineQ .left
{
	text-align:left;
}
@media only screen and (max-width: 970px)
{
	.timelineQ .border-bg,
	.timelineQ .bullet
	{
		background:none;
		width:1%;
	}
	.timelineQ td
	{
		/*display: table-cell;
		display:block;*/
		padding:10px 0;
	}
	.timelineQ .date
	{
		background-color:#0171bb;
		padding:2px 5px;
		color:#fff;
		font-weight:bold;
		vertical-align:auto;
		width:100%;
		text-align:left;
	}
	.timelineQ .description
	{
		vertical-align:auto;
		display:inline-block;
		width:100%;
		background-color:#f2f2f2;
	}
	.timelineQ .size
	{
		/*width:45%;*/
	}
}

/*----------------------------------------------*/
/* 4.4 Global References
/*----------------------------------------------*/
@media only screen and (max-width: 970px)
{
	.references img
	{
		width:100%;
		height:auto;
	}		
}
/*----------------------------------------------*/
/* 4.5 
/*----------------------------------------------*/
/*----------------------------------------------*/
/* 4.6
/*----------------------------------------------*/
/*----------------------------------------------*/
/* 4.7
/*----------------------------------------------*/
/*----------------------------------------------*/
/* 4.8
/*----------------------------------------------*/
/*----------------------------------------------*/
/* 4.9
/*----------------------------------------------*/



/*----------------------------------------------*/
/* 4.10 Footer Styles */
/*----------------------------------------------*/
#footer
{
	height:75px;
	width:100%;
	position:absolute;
	bottom:0;
}
#footer .inside
{
	margin: 0 auto;
	width: 100%;
}
/*timeline*/
#footer div.timeline
{
	background:url(../images/footer-timeline-bg.png) repeat-x;
	height:36px;
}
#footer div.timeline ul
{
	width:960px;
	margin:0 auto;
	list-style:none;
}
#footer div.timeline ul li
{
	display:inline-block;
	float:left;
}
#footer div.timeline ul li.t1
{
	padding-right:150px;
}
#footer div.timeline ul li.t2
{
	padding-right:75px;
}
#footer div.timeline ul li.t3
{
	padding-right:65px;
}
#footer div.timeline ul li.t4
{
	padding-right:90px;
}
#footer div.timeline ul li.t5
{
	padding-right:110px;
}
#footer div.timeline ul li.t6
{
	padding-right:90px;
}
#footer div.timeline ul li.t7
{
	padding-right:20px;
}
#footer div.timeline ul li.t8
{
	padding-right:20px;
}
#footer div.timeline ul li a
{
	text-decoration:none;
}
#footer div.timeline ul li a span
{
	display:inline-block;
	font: 14px 'Oxygen', sans-serif;
	font-weight:bold;
	color: white;
	background:url(../images/footer-timeline-ul-li.png) no-repeat bottom center;
	padding:0 0 10px;
}
.qtip img
{
	padding:10px 5px;
}
#footer div.timeline ul li a span:hover
{
	color: #0071bd;
}
#footer a.timeline
{
	position:relative;
}
/*end timeline*/

#footer div.adress
{
	display:none;
}
#footer .clear
{
	clear:both;
	height:15px;
}
@media only screen and (max-width: 970px) {	
	#footer
	{
		position:relative;
		height:auto !important;
		padding-top:25px;
	}
	#footer div.timeline
	{
		display:none;
	}
	#footer div.adress
	{
		display:block;
		padding:20px;
		background-color:#e4e4e4;
		margin:0 20px;
	}
	#footer div.adress span
	{
		display:block;
		color:#000;
	}
	#footer div.adress a
	{
		color:#0171bb;
		text-decoration:none;
	}
	#footer div.adress a:hover
	{
		color:#fff;
		background-color:#0171bb;
		text-decoration:none;
	}
}


/*============================================================================================*/
/* 5. MISCELLANEOUS */
/*============================================================================================*/
/*----------------------------------------------*/
/* 5.1 Vega Styles */
/*----------------------------------------------*/
.vegas-loading {
	/* Loading Gif by http://preloaders.net/ */
	/*
	-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;
	background:#000 url(../images/loading.gif) no-repeat center center;
	background:rgba(0, 0, 0, 0.7) url(../images/loading.gif) no-repeat center center;
	height:32px;
	left:20px;
	position:fixed;
	top:20px;
	width:32px; 
	z-index:0;
	*/
}

.vegas-overlay {
	background:transparent url(../images/overlays/06.png);
	opacity:0.3;
	z-index:-1;
}

.vegas-background {
	image-rendering: optimizeQuality;
	-ms-interpolation-mode: bicubic;
	z-index:-2;
    /* counteracts global img modification by twitter bootstrap library */
    max-width: none !important;
}