/***** General *****/
html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, img, ol, ul, li,
fieldset, form, label, wup, bego {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
ad { display:none; }
body {
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 1;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: #2aacc8;
}
a:hover {
text-decoration: underline;
}
.container {
margin: auto;
width: 1000px;
}
.separation {
border-top: 1px solid #dfe1e5;
padding-top: 10px;
}
h2 {
font-size: 200%;
font-weight: bold;
margin-top: 10px;
margin-bottom: 10px;
line-height: 120%;
text-align: center;
}
h3 {
font-size: 120%;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
}
h4 {
font-size: 110%;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
}
wup {
font-size: 150%;
font-weight: bold;
color: #7B7777;
line-height: 130%;
text-align: center;
}
bego {
font-size: 150%;
font-weight: bold;
color: #7B7777;
line-height: 130%;
text-align: center;
}
.list2 {
margin-left:20px;
}
table {
border-spacing: 0px;
padding: 0px;
}
/***** General *****/
/***** Header *****/
#header {
background: #e8ebf1;
height: 100px;
}
h1 {
float: left;
margin-top: 10px;
}
/***** Header *****/
/***** Navigation *****/
#main_menu {
float: right;
margin-top: 44px;
}
.first_list {
float: left;
margin: 0 14px;
}
.main_menu_first {
color: #000;
font-weight: bold;
padding: 10px 8px;
text-transform: uppercase;
}
.main_menu_first:hover {
border-top: 5px solid #333366;
text-decoration: none;
}
.with_dropdown {
position: relative;
z-index:10;
}
.with_dropdown li a {
display: block;
}
.with_dropdown ul {
background: #fff;
border-bottom: 5px solid #333366;
padding: 2px 0;
position: absolute;
top: 24px;
visibility: hidden;
width: 140px;
}
.first_list:hover.first_list ul {
visibility: visible;
}
.with_dropdown .main_menu_first {
background: url('images/arrow_down.png') no-repeat 92% 92%;
padding-right: 23px;
}
.with_dropdown:hover .main_menu_first {
background: #fff url('images/arrow_down.png') no-repeat 92% 92%;
border-top: 5px solid #333366;
color: #333366;
}
.second_list {
/*background: #333366;*/
margin: 0 5px;
padding: 7px;
}
.second_list_border {
border-bottom: 1px solid #e7e7e7;
}
.main_menu_second {
color: #000;
text-transform: capitalize;
}
.main_menu_second:hover {
color: #2aacc8;
text-decoration: none;
}
.main_current {
border-top: 5px solid #333366;
}
/***** Navigation *****/
/***** Slider *****/
#wind_back {
height: 180px;
background: #AAAAC7 url('images/wave.jpg');
background-repeat:no-repeat;
background-position: center;
padding: 20px 0 20px 0;
vertical-align:middle;
}
#vierge_back {
height: 400px;
background: #AAAAC7;
background-repeat:no-repeat;
background-position: center;
padding: 20px 0 20px 0;
vertical-align:middle;
}
#contacts_back {
height: 100px;
background: #AAAAC7 url('images/propellers100.jpg');
background-repeat:no-repeat;
background-position: center;
padding: 20px 0 20px 0;
vertical-align:middle;
}
#sitemap_back {
height: 100px;
background: #AAAAC7 url('images/containers100.jpg');
background-repeat:no-repeat;
background-position: center;
padding: 20px 0 20px 0;
vertical-align:middle;
}
#energy_back {
height: 400px;
background: #AAAAC7 url('images/propellers.jpg');
background-repeat:no-repeat;
background-position: center;
padding: 20px 0 20px 0;
vertical-align:middle;
}
#energy_text {
position:relative;
top:25px;
left:100px;
width:800px;
color:white;
}
#energy_icon {
background: url(images/energy_icon.png) no-repeat left;
height: 32px;
margin-bottom: 15px;
padding: 12px 0 0 60px;
}
#consumers_back {
height: 400px;
background: #AAAAC7 url('images/containers.jpg');
background-repeat:no-repeat;
background-position: center;
padding: 20px 0 20px 0;
vertical-align:middle;
}
#consumers_text {
position:relative;
top:255px;
left:100px;
width:800px;
color:white;
}
#consumers_icon {
background: url(images/customers_icon.png) no-repeat left;
height: 32px;
margin-bottom: 15px;
padding: 12px 0 0 60px;
}
#tourism_back {
height: 400px;
background: #AAAAC7 url('images/ocean.jpg');
background-repeat:no-repeat;
background-position: center;
padding: 20px 0 20px 0;
vertical-align:middle;
}
#tourism_text {
position:relative;
top:25px;
left:100px;
width:800px;
color:white;
}
#tourism_icon {
background: url(images/tourism_icon.png) no-repeat left;
height: 32px;
margin-bottom: 15px;
padding: 12px 0 0 60px;
}
#insurance_back {
height: 400px;
background: #AAAAC7 url('images/storm.jpg');
background-repeat:no-repeat;
background-position: center;
padding: 20px 0 20px 0;
vertical-align:middle;
}
#insurance_text {
position:relative;
top:25px;
left:100px;
width:800px;
color:white;
}
#insurance_icon {
background: url(images/insurance_icon.png) no-repeat left;
height: 32px;
margin-bottom: 15px;
padding: 12px 0 0 60px;
}
#transport_back {
height: 400px;
background: #AAAAC7 url('images/winterroad.jpg');
background-repeat:no-repeat;
background-position: center;
padding: 20px 0 20px 0;
vertical-align:middle;
}
#transport_text {
position:relative;
top:25px;
left:100px;
width:800px;
color:white;
}
#transport_icon {
background: url(images/transport_icon.png) no-repeat left;
height: 32px;
margin-bottom: 15px;
padding: 12px 0 0 60px;
}
#weather_back {
height: 400px;
background: #AAAAC7 url('images/hills.jpg');
background-repeat:no-repeat;
background-position: center;
padding: 20px 0 20px 0;
vertical-align:middle;
}
#weather_text {
position:relative;
top:25px;
left:100px;
width:800px;
color:white;
}
#weather_icon {
background: url(images/weather_icon.png) no-repeat left;
height: 32px;
margin-bottom: 15px;
padding: 12px 0 0 60px;
}
#technology_back {
height: 400px;
background: #AAAAC7 url('images/binary.jpg');
background-repeat:no-repeat;
background-position: center;
padding: 20px 0 20px 0;
vertical-align:middle;
}
#technology_text {
position:relative;
top:25px;
left:100px;
width:800px;
color:white;
}
#data_back {
height: 400px;
background: #AAAAC7 url('images/models.jpg');
background-repeat:no-repeat;
background-position: center;
padding: 20px 0 20px 0;
vertical-align:middle;
}
#data_text {
position:relative;
top:25px;
left:100px;
width:800px;
color:white;
}
#scene {
/* Positioning and dimensions */
position: relative;
top: 0px;
left: 0px;
width: 1000px;
height: 400px;
overflow: hidden;
z-index: 0;
}
.Slide {
position:absolute;
left:0;
}
.Slide1
{
animation: SlideTransfo1 ease-out infinite;
animation-duration: 40s;
}
.Slide2
{
animation: SlideTransfo2 ease-out infinite;
animation-duration: 40s;
}
.Slide3
{
animation: SlideTransfo3 ease-out infinite;
animation-duration: 40s;
}
.Slide4
{
animation: SlideTransfo4 ease-out infinite;
animation-duration: 40s;
}
.Slide5
{
animation: SlideTransfo5 ease-out infinite;
animation-duration: 40s;
}
.Slide6
{
animation: SlideTransfo6 ease-out infinite;
animation-duration: 40s;
}
@keyframes SlideTransfo1 {
0% { transform: translateX(-1000px); }
16% { transform: translateX(-1000px); }
18% { transform: translateX(0px); }
97% { transform: translateX(0px); }
100% { transform: translateX(-1000px); }
}
@keyframes SlideTransfo2 {
0% { transform: translateX(-1000px); }
30% { transform: translateX(-1000px); }
32% { transform: translateX(0px); }
97% { transform: translateX(0px); }
100% { transform: translateX(-1000px); }
}
@keyframes SlideTransfo3 {
0% { transform: translateX(-1000px); }
44% { transform: translateX(-1000px); }
46% { transform: translateX(0px); }
97% { transform: translateX(0px); }
100% { transform: translateX(-1000px); }
}
@keyframes SlideTransfo4 {
0% { transform: translateX(-1000px); }
58% { transform: translateX(-1000px); }
60% { transform: translateX(0px); }
97% { transform: translateX(0px); }
100% { transform: translateX(-1000px); }
}
@keyframes SlideTransfo5 {
0% { transform: translateX(-1000px); }
72% { transform: translateX(-1000px); }
74% { transform: translateX(0px); }
97% { transform: translateX(0px); }
100% { transform: translateX(-1000px); }
}
@keyframes SlideTransfo6 {
0% { transform: translateX(-1000px); }
86% { transform: translateX(-1000px); }
88% { transform: translateX(0px); }
97% { transform: translateX(0px); }
100% { transform: translateX(-1000px); }
}
.titres
{
top:25px;
left:100px;
color:white;
position:absolute;
}
.titres1
{
animation: TexteAppear1 linear infinite;
animation-duration: 40s;
}
.titres2
{
animation: TexteAppear2 linear infinite;
animation-duration: 40s;
}
.titres3
{
animation: TexteAppear3 linear infinite;
animation-duration: 40s;
}
.titres4
{
animation: TexteAppear4 linear infinite;
animation-duration: 40s;
}
.titres5
{
animation: TexteAppear5 linear infinite;
animation-duration: 40s;
}
.titres6
{
animation: TexteAppear6 linear infinite;
animation-duration: 40s;
}
@keyframes TexteAppear1 {
0%, 18%, 100% { opacity:0; transform: translateY(-20px);}
20%, 30% { opacity:1; transform: translatey(0px)}
34% { opacity:0; transform: translatey(0px);}
}
@keyframes TexteAppear2 {
0%, 32%, 100% { opacity:0; transform: translateY(-20px);}
34%, 42% { opacity:1; transform: translatey(0px);}
46% { opacity:0; transform: translatey(0px);}
}
@keyframes TexteAppear3 {
0%, 46%, 100% { opacity:0; transform: translateY(-20px);}
48%, 58% { opacity:1; transform: translatey(0px);}
62% { opacity:0; transform: translatey(0px);}
}
@keyframes TexteAppear4 {
0%, 60%, 100% { opacity:0; transform: translateY(-20px);}
62%, 72% { opacity:1; transform: translatey(0px);}
76% { opacity:0; transform: translatey(0px);}
}
@keyframes TexteAppear5 {
0%, 74%, 100% { opacity:0; transform: translateY(-20px);}
76%, 86% { opacity:1; transform: translatey(0px);}
90% { opacity:0; transform: translatey(0px);}
}
@keyframes TexteAppear6 {
0%, 88%, 100% { opacity:0; transform: translateY(-20px); z-index:0;}
90%, 97% { opacity:1; transform: translatey(0px); z-index:7;}
100% { opacity:0; transform: translatey(0px);}
}
.intro1
{
top:100px;
left:50px;
color:white;
position:absolute;
font-size:60px;
animation: IntroAppear1 linear infinite;
animation-duration: 40s;
}
@keyframes IntroAppear1 {
0%, 100% { opacity:0; transform: translateY(-60px);}
3% { opacity:0.5; transform: translateY(0px);}
8%, 16% { opacity:1; transform: translateY(0px);}
20% { opacity:0; transform: translateY(0px);}
}
/***** Slider *****/
/* ----- Slideshow Styling ----- */
#mid_content {
border-bottom: 1px solid #d9d9d9;
background: #e8ebf1;
height: 380px;
}
#slideshow_pagination {
margin: 10px auto;
width: 160px;
}
#slideshow_pagination li {
float: left;
margin: 0 9px;
}
#slideshow_pagination a {
background: url('images/grey_button.png') no-repeat;
display: block;
height: 14px;
width: 14px;
}
#slideshow_pagination a.current {
background: url('images/white_button.png') no-repeat;
}
/* ----- Slideshow Styling ----- */
/***** 1 Column *****/
.Scontent {
/*clear: right;*/
float: left;
width: 1000px;
margin: 24px 0 24px 0;
color: #363636;
line-height: 20px;
}
.Scontent a img {
margin: 0 8px 1px 0;
}
/***** 1 Column *****/
/***** 2 Columns *****/
.Dcontent {
/*clear: right;*/
float: left;
width: 470px;
margin: 24px 0 24px 0;
color: #363636;
line-height: 20px;
}
.Dcontent_space {
margin-right: 60px;
}
.Dcontent a img {
margin: 0 8px 1px 0;
}
/***** 2 Columns *****/
/***** 3 Columns *****/
.Tcontent {
/*clear: right;*/
float: left;
width: 300px;
margin: 24px 0 24px 0;
color: #363636;
line-height: 20px;
}
.Tcontent_space {
margin-right: 50px;
}
.Tcontent a img {
margin: 0 8px 1px 0;
}
/***** 3 Columns *****/
/***** 4 Columns *****/
.Qcontent {
float: left;
width: 220px;
margin: 24px 0 24px 0;
color: #363636;
line-height: 20px;
}
.Qcontent_space {
margin-right: 40px;
}
.Qcontent a img {
margin: 0 8px 1px 0;
}
/***** 4 Columns *****/
/***** Footer *****/
#footer {
background: #333366;
border-top: 1px solid #d9d9d9;
clear: both;
height: 280px;
margin-top: 40px;
}
#footer p, #footer a {
color: #AAAAC7;
}
#footer h4 {
color: #fff;
font-size: 15px;
font-weight: bold;
/*text-transform: uppercase;*/
margin: 0 0 21px 0;
}
.footer_info {
float: left;
margin: 32px 128px 32px 0;
line-height: 18px;
}
#footer_about {
width: 360px;
}
#footer_explore {
width: 360px;
}
#footer a:hover {
color: #2aacc8;
text-decoration: none;
}
p#copyright {
clear: both;
float: left;
}
/***** Footer *****/
/***** Google Maps *****/
#map {
height: 100%;
}
/***** Google Maps*****/