@charset "utf-8";
/* CSS Document */
@font-face { font-family: Delicious; src: url('saf.otf'); } 
.saf {font-family:'saf',helvetica, arial, sans-serif;}
body {font-family:helvetica, arial, sans-serif; color:white; background-color:#333;}
a {color:white; outline-style: none;}
a:visited {color:#fff; }
img.bg { min-height: 100%;
  min-width: 1024px;
width: 100%;
 height: auto;
 position: fixed;
  top: 0;
 left: 0;  }
.top {float:right;  width: 320px; margin-top:30px; margin-right: 5%; font-size:1em; text-align:right; margin-left:45px;
}
.2col {width: 205px;}
.meta  { position: absolute;    width: 175px; bottom:35px; left: 125px; font-size:0.9em;}
.meta2  { position: absolute;  width: 175px; bottom:35px; left: 325px; font-size:0.9em;}
h1.logor {position:absolute; background-image:url(img/logo.png); text-indent:-9999px;width:365px; height:89px; left: 125px;bottom:200px; }
h1.logoen {background-image:url(img/logo-en.png);}
h1.logofr {background-image:url(img/logo-fr.png);}
h1.logopb {background-image:url(img/logo-pb.png);}
h1.logor a {display:block; width:365px; height:89px;}
ul {position:fixed; text-indent:-9999px; height:89px; left: 500px;bottom:200px; list-style:none;  }
li {margin:5px;}
ul a {display:block; background-repeat:no-repeat; height:16px; width:100px;}
.facebook {background-image:url(img/facebook-png.png);}
.twitter {background-image:url(img/twitter.png);}
.blog-btn {background-image:url(img/blog-btn.png);}
.enlace-avatar {background-image:url(img/quieres-ser-caillou.png); text-indent:-9999px; width:187px; height:49px; position:absolute; top:288px; right: 5%; display:block;}
.avatar h1 {top: 40px; left:50px; } 
.avatar ul {top: 20px; left: 400px; }
.avatar-app { position:absolute; top:150px; left:50px;}
.avatar .top {width: 150px;}
.avatar .meta  { position: absolute;    width: 175px; bottom:5px; left: 50px; font-size:0.8em;}
.avatar .meta2  { position: absolute;  width: 175px; bottom:5px; left: 250px; font-size:0.8em;}
.fixed {position:fixed;}
.fixed .enlace-avatar{ position:relative; top:141px; left: 230px;}

.fblike iframe {top:95px;}
.fbshare { text-indent:0; margin:30px 4px;} 
.fixed ul {top: 139px; left: 25px;  }
.fixed iframe { left:5px; }
#wrapper ul {position:static; text-indent:0px; height:auto;  list-style:disc; text-align:left; padding:5px; font-size: } 
#wrapper ul a {display:inline; height:auto; width: 80%;}
object {margin:5px auto;}
.en{background-image:url(img/en-quieres-ser-caillou.png);}
.fr{background-image:url(img/fr-quieres-ser-caillou.png);}
.pb{background-image:url(img/pb-quieres-ser-caillou.png);}
ul.idiomas {position:fixed;z-index:9999; right:5%; font-size: 0.8em; right:5%; text-indent:inherit;  bottom:30px; top:inherit;left:inherit; height:inherit;}
.idiomas li a{  font-size: 0.8em; text-decoration:none; width: auto; display:inline;}
.idiomas li  {display:inline; margin:15px 5px; padding:5px; line-height:15px; background-color:#333;opacity:0.6; }
.homebody {background:url(img/bg-blog4.jpg) 0 100% no-repeat; background-attachment: fixed;   background-size: cover; -moz-background-size: cover;  background-color:#233120; }
.homevideo {background:url(img/bg-caillou.jpg) 0 100% no-repeat; background-attachment: fixed;   background-size: cover; -moz-background-size: cover;  background-color:#233120; }
.avatar {background:url(img/bg-avatar.jpg) 0 100% no-repeat; background-attachment: fixed;   background-size: cover; -moz-background-size: cover;  background-color:#233120; }
div.blogcaillou {background: none 0 0 no-repeat;}
#videoelastico {
	-webkit-animation: myanim 5s 1 ease;
     -moz-animation: myanim 5s 1 ease;
      -ms-animation: myanim 5s 1 ease;
	position:relative; left:45px; top: 10px;
	
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}


#videoelastico iframe,  
#videoelastico object,  
#videoelastico embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video-wrapper {
	width: 650px;
	max-width: 100%;
}





@-webkit-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.0; }
  100% { opacity: 1.0; }
}
@-moz-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.0; }
  100% { opacity: 1.0; }
}
@-ms-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.0; }
  100% { opacity: 1.0; }
}
ul iframe {position:absolute; left:45px; top: 70px;}
.fixed iframe { left:5px; }
 ul.enlaces  {position:relative; text-indent:0; height:auto; padding:0; left:auto; bottom:auto; font-size:0.7em;}
 ul.enlaces  a{height:auto; width:auto; display:inline;}
.fixed ul.enlaces {position:fixed; left:29px; top: 217px; font-size:1em;}
.fixed ul.enlaces a, #footer .idiomas a {text-decoration:none; color:#FFF;}
ul.articulos { float:right;bottom:50px; font-size:0.8em; width: 207px;margin-right:5%;}
ul.articulos  img {float:left; padding:0 5px; border-width:0;}
ul.articulos a {text-decoration:none;}
.articulos li {clear:both; height:60px;}
li.seguirtwitter iframe {top:119px}
.fixed li.seguirtwitter iframe {top: 30px;left: 67px;}
 @media screen and (max-width: 1025px){  img.bg {   left: 50%;   margin-left: -512px; } 
#wrapper {	margin:0 0 0 54%;}
 .avatar .top p {font-size: 0.8em;} 
 .avatar-app {    left: 0;    top: 100px; font-size: 0.8em;}
 .avatar .meta, .avatar .meta2 {font-size:0.6em;} }
 
 @media screen and (max-width: 800px){  #videoelastico {display:none;}
 }
 @media screen and (max-height: 480px){  
 img.bg {   left: 50%;   margin-left: -512px; } 

 .avatar .top p {font-size: 0.8em;} 
 .avatar-app {    left: 0;    top: 100px; font-size: 0.8em;}
 .avatar .meta, .avatar .meta2 {font-size:0.6em;}
#videoelastico {display:none;}
.homevideo h1.logor, body > ul, .meta, .meta2, .homevideo .enlace-avatar  {position:static !important; } ul.articulos, .top, .meta, .meta2 {float:none; width:80%}
  }
  @media screen and (max-height: 1050px){  .homevideo h1.logor, body > ul {bottom: 100px; } .meta, .meta2 {bottom:0}}

@media screen and (max-width: 800px){   #wrapper {margin-left: 25px;} div.blogcaillou {position:relative; height:248px;} .fixed .btn-compartir, .fixed .videoblog, .fixed a.enlace-avatar { display:none;} #content {font-size:20px;} #content p { text-align:left; padding: 10px;} #wrapper {margin:0; width:100%} .avatar h1.logor, iframe, .fixed, div.fixed ul.enlaces, div.blogcaillou, .fixed .videoblog, .fixed ul{position:static;margin-left: 10%;} .fixed ul li.seguirtwitter iframe {top: 225px;} #content p > img, #content p > object, #content p > iframe, #content a > img {margin-left:auto} ul iframe {position: static;}}
 @media screen and (max-width: 600px){ h1.logor, .meta {left:5px} .meta2 {left:225px;} ul.articulos {display:none} .avatar h1.logor, iframe, .fixed, div.fixed ul.enlaces, div.blogcaillou, .fixed .videoblog, .fixed ul{position:static;margin-left: 0;} } 
@media screen and (max-width: 321px){  #content p > img, #content p > object, #content p > iframe, #content a > img {max-width:300px;} .avatar h1.logor, iframe, .fixed, div.fixed ul.enlaces, div.blogcaillou, .fixed .videoblog, .fixed ul {margin-left:0;} h1.logor a {width:auto; height:auto;} h1.logor {
background-image: none;width: auto; padding:10px; height:auto;
text-indent: 0}} 
 @media screen and (max-width: 450px){ #content img, #content iframe, #content object   {
width: 100%;
} #content #comments img{width:auto;}}