@keyframes slde{
  0% { left: 100%; }
  100% { left: -200%; }
}
.wrning{
    white-space: nowrap;
    overflow: visible;
    animation:slde 20s linear infinite;
    -moz-animation:slde 20s linear infinite;
    -webkit-animation:slde 20s linear infinite;
    -o-animation: slde 20s linear infinite;
}   
.wrning:hover{
    animation-play-state: paused;
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused;
    -o-animation-play-state: paused;
}

@-moz-keyframes slde{
    0%   {-moz-transform: translate(100%, 0px); }
    100% {-moz-transform: translate(-200%, 0px); }
}

@-webkit-keyframes slde{
    0%   {-webkit-transform: translate(100%, 0px); }
    100% {-webkit-transform: translate(-200%,0px); }
    }

@-o-keyframes slde{
    0%   {-o-transform: translate(100%, 0px); }
    100% {-o-transform: translate(-200%, 0px); }
}

body{

    color: #fff;
    font-weight: normal;
    font-style:normal;
    font-family:Arial,Helvetica,sans-serif;
    text-decoration:none;

}
a:link {color:#fff; text-decoration: none;}    /* unvisited link */
a:visited {color:#fff;} /* visited link */
a:hover {color:#74BBD8;}   /* mouse over link */
a:active {color:#fff;}  /* selected link */
#widget{
    display: inline-block ;
    text-align: left;
    vertical-align: top;
    height: 150;
    width: 150;
}


/*icon, temperature , and wind size for small, 16/4 (6 and 4 days),  vertical v1 widget and
horizontal 60/90 */
span.temp-max{font-size: 22px;display:inline-block; height: 22px; margin: 0px; padding: 2px; color: #A5D6FF;}
span.temp-min{font-size: 20px;	display:inline-block;height: 20px; width: 30%; margin: 0px 0px 0px 5px;   padding: 0px; border: 2px;}
img.icon{height: 50px; width:50px; }
img.arrow{	height: 16px;	width: 16px;vertical-align: 12px;}
img.wind-icon{height: 20px; width: 20px; margin-left: 5px;}
/*icon, temp and wind row*/
span.temp-row { display: inline-block; width: 100%; height: 23px; vertical-align: bottom; margin: 0px; padding: 0px; border: 0px;}
span.vertical-row{ display: inline-block; width: 100%; height: 30px; vertical-align: bottom; margin: 0px; padding: 0px; border: 0px;}
span.vertical-row-120{ display: inline-block; width: 100%; height: 24px; vertical-align: bottom; margin: 0px; padding: 0px; border: 0px;}
span.wind-row{ display: inline-block; width: 100%; height: 24px; vertical-align: bottom; margin: 0px; padding: 0px; border: 0px;}
span.wind-desc{	font-size: 12px;vertical-align: 4px; margin: 0px; padding: 0px;}
span.icon-row{display: block;  height: 50px; vertical-align: bottom;  padding: 0px; border: 0px;  width: 100%; margin-left:5px; } 



/*day title for vertical V1 and V2*/
div#day-title{width: 100%;	text-align: left;background:  rgba(0,0,0,0.5); margin: 0px; padding: 0px; border: 0px;}
span.day-title{margin: 0px 0px 0px 5px;padding: 0px; font-size: 14px;   display: block; border: 0px; height: 16px;}


/*header for small(both), large(both), vertical(both) */
img.irm{height: 28px; width: 21px;}
div#header{text-align: left;width: 100%;height: 26px; padding:0px 0px 2px 0px; border-bottom: 1px dashed white; margin: 0px;}
#header img {border: 0px;}
span.header{vertical-align: 6px;display: inline-block;margin: 0px 0px 0px 2px; border: 0px; padding: 0px; font-size: 12px;}
/*this style concerne : vertical both and small both if the city is to longueur*/
span.reduce-header-2lines{font-size: 11px;vertical-align: top;	margin-top: 0px;display: inline-block;margin: 0px 0px 0px 2px; border: 0px; padding: 0px;}
span.reduce-header{font-size: 14px;vertical-align: top;	margin-top: 0px;display: inline-block;margin: 4px 0px 0px 2px; border: 0px; padding: 0px;}
/*header horizontal*/
div#header-horizontal{ height: 16px; width: 100%;border-bottom:1px solid rgba(0,0,0,0.2);;text-align: center; margin: 0px; padding: 0px;}
span.header-horizontal{vertical-align: top;	font-size: 13px;	display: inline-block; margin: 0px; padding: 0px; border: 0px;}
span.link{vertical-align: top;	font-size: 13px; height: 17px; width: 35%; display: inline-block; float: right; margin: 0px 0px 0px 0px; border: 0px; padding: 0px;}
/*footer 3 differents style*/
div#footer-vertical{background:  rgba(0,0,0,0.5);	text-align: center;	width: 100%; height: 17px; font-size: 14px; margin: 0px; border: 0px; padding: 0px;}
div#footer-small-large{height: 20px; width: 100%; font-size: 15px;text-align: center; margin: 0px; border: 0px; padding: 0px;}
div#footer-horizontal{text-align: center;	width: 100%;font-size: 13px;  height: 15px; margin: 0px; border: 0px; padding: 0px;}


div#container{float: center;background:rgba(0,0,0,0.3); margin: 0px; border: 0px; padding: 0px; height: 100%;}

/*small */


/*large */
div.forecast-right-larg {display:inline-block;width:55%; margin: 0px; border: 0px; padding: 0px;}
div.forecast-left-larg {display:inline-block;float: left; width:44%; margin: 0px; border: 0px; padding: 0px;}


/*icon for vertical V1 and for next days of both verticals */
span.temp-max-vertical {font-size: 20px; height: 20px; display:inline-block;  margin: 0px; border: 0px; padding: 2px;}
span.temp-min-vertical {font-size: 18px; height: 18px; display:inline-block;   width: 20%; color: #A5D6FF; margin: 0px 0px 0px 5px; border: 0px; padding: 2px;}

img.icon-vertical{height: 25px;width: 25px; }
img.arrow-next-day, .arrow-v1{	height: 12px;	width: 12px; vertical-align: 6px;	}
span.icon-right{display: inline-block; float: right;  margin: 0px 5px 0px 0px; border: 0px; padding: 0px;}
div#container-vertical{width: 100%; background: rgba(0,0,0,0.3); margin: 0px; border: 0px; padding: 0px;}

span.temp-max-vertical-120 {font-size: 15px; height: 15px; display:inline-block;  margin: 0px; border: 0px; padding: 2px;}
span.temp-min-vertical-120 {font-size: 14px; height: 14px; display:inline-block;  width: 15%; color: #A5D6FF; margin: 0px 0px 0px 2px; border: 0px; padding: 2px;   }
img.icon-vertical-120{height: 20px;width: 20px; }
img.arrow-next-day-120{  height: 12px;   width: 12px; vertical-align: 4px;   }




/*tabbed menu*/
div#tabs { padding: 0px; background: none; border-width: 0px; } 
div#tabs .ui-tabs-nav { background: transparent; border-width: 0px 0px 0px 0px;border-radius: 0px; border-color: rgba(0,0,0,0.3);} 
div#tabs .ui-tabs-nav .ui-state-default a { color: white; float: left; padding: .3em 1em;text-decoration: none;}
div#tabs .ui-tabs-panel {background: transparent; /*Tab panel background*/  ;color: #fff; padding: 0px;}
div#tabs .ui-tabs-nav li {height: 20px; font-size:11px; border:0px ; background: transparent; }
div#tabs .widgetTabType1 li {width: 48%;}
div#tabs .widgetTabType2 li {width: 48%;}
div#tabs .widgetTabType3 li {width: 24%;}
div#tabs .ui-tabs-nav li:hover a {color: #74BBD8; }
div#tabs .ui-tabs-nav .ui-state-active a { color: #74BBD8; background: rgba(0,0,0,0.3) url(../img/selectedtab.fw.png) 50% 0% no-repeat; ; height: 15px;}
.arrow-up {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid black;
    
    -webkit-transform: scaleX(0.7);
    -moz-transform: scaleX(0.7);}
/*div#tabs .ui-tabs-nav li a {}*/
div.tabbed{width: 100%;   }
/*end tabbed menu*/

/*horizontal 60/90*/
span.temp-max-horizontal{font-size: 22px; color: #A5D6FF;  float: right; height: 22px; margin: 0px; border: 0px; padding: 2px;}
span.temp-min-horizontal{font-size: 20px; float: left; height: 20px; margin: 1px 0px 0px 5px; border: 0px; padding: 2px; }
span.icon-horizontal{display: block; float: center; margin: 0px; border: 0px; padding: 0px;}
/*horizontal icon if we got one icon the size will be 50/50 else 30/30*/

img.icon-horizontal {height: 35px; width: 35px; margin-top: 5px;}
.icon-horizontal img:first-child:nth-last-child(1) {height: 45px; width: 45px; margin-top: 0px;}


img.arrow-hori, .arrow-120{display: inline-block;height: 12px;width: 12px; vertical-align: 12px;}
div#container-horizontal{width: 179px; display: inline-block; vertical-align: top; margin: 0px; border: 0px; padding: 0px;}
div#container-horizontal2{width: 179px; display: inline-block; vertical-align: top; background: rgba(0,0,0,0.1); margin: 0px; border: 0px; padding: 0px;}
div#forecast-left{width: 46%;display: inline-block;vertical-align: top;  height: 45px; margin: 0px; border: 0px; padding: 0px;}
div#forecast-right{width: 46%;display: inline-block;vertical-align: bottom;  text-align: center; height: 45px; margin: 0px; border: 0px; padding: 0px;}
div.wind-row{width: 100%; height: 14px; margin: 0px; border: 0px; padding: 0px;} 




div#forecast-M-m{width: 100%;	vertical-align: top; margin: 0px 0px 0px 10px; border: 0px; padding: 0px;}
div#forecast-wind{margin: 5px 0px 0px 5px; border: 0px; padding: 0px;}

div#forecast-next-days, #forecast{display: inline-block;width: 100%; margin: 0px; border: 0px; padding: 0px;}
img.wind-icon-hori{	vertical-align: top;height: 14px;width: 14px; margin-left: 5px;}
span.wind-descr-hori{display: inline-block;	vertical-align: top;	font-size: 11px;height: 11px; margin: 0px; border: 0px; padding: 0px;}
span.day-title-hori{display: block;	font-size: 13px; height: 16px;width: 100%;background: rgba(0,0,0,0.2);text-align: center; margin: 0px; border: 0px; padding: 0px;}
img.irm-hori{height: 16px;vertical-align: top;}



table.forecast6days {height:126px;margin:0;	border:0;	padding:0px;border-collapse:collapse;width:100%; }
tr.line-colored2{background: rgba(0,0,0,0.2);}
tr.line-colored{background: rgba(0,0,0,0.1);}
.day {border: 0;	padding:4px 0px 4px 4px;font-size:12px;	background-size: 100%;}
.icontable {padding:0;background-size: 100%;text-align: left; }
.temptable {padding:2px 2px; background-size: 100%;}
.tempMaxtable {	color: #A5D6FF; text-align: right; font-size:15px; padding:2px 2px; background-size: 100%;}
.tempMintable {	text-align: right; font-size:15px; padding:2px 2px; background-size: 100%;}
img.icon-table{height: 20px; width: 20px; vertical-align:  top;}
img.arrow-table{height: 12px;width: 14px;margin-top: 6px;}


/*end widget horizont 60 - 90*/

/*small*/


/*large */

div#largToday{margin-left: 10px;		margin-top: 5px;	font-size: 15px; height: 17px;}


/*foxitip*/

div.small-desc{background-color: rgba(0, 0, 0, 0.7); z-index: 100; padding: 5px; position: fixed; width: 110px; display: inline-block; font-size: 12px;}
div#widgetComplet{ display: block;margin: 0px; border: 0px; padding: 0px;}
#picker-temp, #picker-bg {margin:0; padding:0; border:0; width:70px; height:20px; border-right:20px solid green; line-height:20px;}
/*day description text srolbar or auto scroling*/
div.small2-desc-text{height: 117px; font-size: 11px;padding: 0px 0px 0px 4px; margin: 5px 5px 0px 5px; background: rgba(0,0,0,0.3);}
div.vertical-desc-text{font-size: 11px;  height: 60px;margin: 0px 5px 5px 5px; border: 0px; padding: 0px; background: rgba(0,0,0,0.3);}
div.large-desc-text{height: 92px; font-size: 11px;  background: rgba(0,0,0,0.3); padding: 2px; margin-top: 5px; margin-right: 5px;}
div.small-desc-text{ height: 51px;background: rgba(0,0,0,0.3); margin: 2px; font-size: 11px; border: 0px; padding: 0px;}
div.v120-desc-text{ height: 45px;background: rgba(0,0,0,0.3); margin: 2px; font-size: 11px; border: 0px; padding: 0px;}



/*20% center if we got one icon*/
.icon-row img:first-child:nth-last-child(1) {margin-left: 15%; }
.icontable img:first-child:nth-last-child(1) {margin-left: 20%; }
.icon-right img:first-child:nth-last-child(1) {margin-right: 50%; float: right;  }



#wrapmeteo {
    width: 700px !important;
    height: 300px !important;
    float:left;
    text-align: center;
}

.marquee-vert-container{
    overflow: hidden;
    position: relative;
    height: 100%;
}

.marquee-vert-content{
    position: absolute;
    width: 100%;
    
    /* Starting position */
    -moz-transform:translateY(-100%);
    -webkit-transform:translateY(-100%);	
    transform:translateY(-100%);
 
    /* Apply animation to this element */	
    -moz-animation: marquee-vert-container 60s linear infinite;
    -webkit-animation: marquee-vert-container 60s linear infinite;
    animation: marquee-vert-container 60s linear infinite;
}

.marquee-vert-content:hover{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
}

.marquee-vert-content h2{
  font-size: inherit;;
  font-weight: bold;
  font-style: normal;
  padding: 0;
  margin: 0;
}

/* Move it (define the animation) */
@-moz-keyframes marquee-vert-container {
    0%   { -moz-transform: translateY(10%); }
    100% { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes marquee-vert-container {
    0%   { -webkit-transform: translateY(10%); }
    100% { -webkit-transform: translateY(-100%); }
}
@keyframes marquee-vert-container {
    0%   { 
        -moz-transform: translateY(10%); /* Firefox bug fix */
        -webkit-transform: translateY(10%); /* Firefox bug fix */
        transform: translateY(10%); 		
    }
    100% { 
        -moz-transform: translateY(-100%); /* Firefox bug fix */
        -webkit-transform: translateY(-100%); /* Firefox bug fix */
        transform: translateY(-100%); 
    }
}

.marquee-hor-container{
    overflow: hidden;
    position: relative;
    height: 100%;
}

.marquee-hor-container .marquee-hor-content{
    position: absolute;
    /*width: 100%;
    height: 100%; */
    margin: 0;
    
    /* Starting position */
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%);	
    transform:translateX(100%);
 
    /* Apply animation to this element */	
    -moz-animation: marquee-hor-container 60s linear infinite;
    -webkit-animation: marquee-hor-container 60s linear infinite;
    animation: marquee-hor-container 60s linear infinite;
    
    white-space: nowrap;
}

.marquee-hor-content:hover{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
}

@-moz-keyframes marquee-hor-container {
    0%   { -moz-transform: translateX(100%); }
    100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marquee-hor-container {
    0%   { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(-100%); }
}
@keyframes marquee-hor-container {
    0%   { 
       -moz-transform: translateX(100%); /* Firefox bug fix */
       -webkit-transform: translateX(100%); /* Firefox bug fix */
       transform: translateX(100%); 		
    }
    100% { 
        -moz-transform: translateX(-100%); /* Firefox bug fix */
        -webkit-transform: translateX(-100%); /* Firefox bug fix */
        transform: translateX(-100%); 
    }
}