body{
margin:0;
background-image:url('img_youtube/fondo-.png');
background-attachment:fixed;
font:15px 'Arial';
text-align:justify
}
::-webkit-scrollbar{display:none}
html{-ms-overflow-style:none;scrollbar-width:none}
.filter{display:none}
.show{display:block}
a{color:#0033CC;cursor:pointer}
i{color:#999999;&::before{content:'|';margin:0 10px}}
sup{font-size:10px}
main{width:960px;margin:auto;padding:30px}
header{
height:60px;margin-bottom:10px;
font-size:12px;
display:flex;flex-wrap:wrap;
justify-content:space-between;
align-items:center;
& img{height:40px;margin:10px 10px 0 0}
& font{color:#999999;font-size:15px;line-height:25px}
}
nav{
height:35px;
background:linear-gradient(0deg, #DDD 0%, #F3F3F3 100%);
display:flex;
& #i{
height:100%;
padding:0 10px;
background:linear-gradient(0deg, #DDD 0%, #F3F3F3 100%);
font:bold 14px 'Arial';
color:#0033CC;
border:1px solid #999999;
border-right:none;
border-radius:0px;
box-shadow:inset 1px 1px 0px #FFFFFF;
cursor:pointer
}
& #i:hover{background:linear-gradient(0deg,#D5D5D5 0%, #F7F7F7 20%, #FFFFFF 50%);;box-shadow:none}
& #i:focus{background:linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(233, 233, 233, 1) 60%, rgba(154, 154, 154, 1) 100%);box-shadow:none}
}
#search-section{
width:635px;padding:0 5px;
border:1px solid #999999;
display:flex;
align-items:center
}
input[type='text']{
width:295px;height:25px;
margin:0 5px 0 75px;padding:0 5px;
background-color:#FFFFFF;
font:13px 'Arial';
border:1px solid #999999
}
#ii, #iii, #iv{height:25px;font:bold 13px 'Arial';border-radius:5px}
#ii{
width:75px;margin-right:80px;
background:linear-gradient(0deg, #C7D8F6 0%, #F6F9FE 100%);
color:#0033CC;
border:1px solid #A3B2D9;
}
#iii, #iv{
background:linear-gradient(0deg, #FED81B 0%, #FFF9C0 100%);
color:#994800;
border:1px solid #ECC101;
}
#iii{
padding:0;
overflow:hidden;
display:flex;
& p{margin:3px 10px 0 10px}
}
#iv{
height:fit-content;
padding:4px 10px;
position:absolute;
top:10px;right:10px;
cursor:pointer;
&:hover{background:linear-gradient(0deg,#FED926 0%, #FFF9C0 50%, #FFFFFA 100%);text-decoration:1px solid underline}
}
#lol-i{
width:23px;height:100%;
border-left:1px solid #ECC101;
box-shadow:inset 1px 1px 0px #FFFFFF;
display:flex;align-items:center;
justify-content:center
}
#lol-ii{
width:0;height:0;
border-left:6px solid transparent;
border-right:6px solid transparent;
border-top:6px solid #994800
}
#full-section{
display:flex;
justify-content:space-between;
align-items:flex-start
}
#content-i{width:640px}
#videos-section{
background-color:#FFFFFF;
border:1px solid #CCC;
border-radius:10px;
overflow:hidden
}
h2{
margin:0;padding:10px;
background-color:#EAEAEA;
font:500 12px 'Arial'
}
h3{margin:10px 0}
h4{
margin:0;padding:5px 10px;
font:500 11px 'Arial';
text-align:right;
text-transform:uppercase;
}
h5{
margin:0;padding:5px 10px;
font:700 16px 'Arial';
text-align:center;
text-transform:uppercase;
& a{margin:10px;text-decoration:1px solid underline}
& span{margin-left:5px}
}
#videos-flex{
width:97%;height:830px;
margin:0 auto;
padding:15px 0;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
display:flex;flex-wrap:wrap;
justify-content:space-around;
align-content:flex-start;
overflow:hidden
}
li{
width:fit-content;height:fit-content;
margin-bottom:20px;
list-style:none;
& aside{width:fit-content;padding:2px;border:1px solid #999999;position:relative}
& img{width:120px;margin-bottom:-3px}
& h1{margin:5px 0 0 0;color:#0033CC;font:bold 12px 'Arial'}
& a{text-decoration:none;&:hover{text-decoration:1px solid underline}}
& p{margin:0;font-size:11px;color:#666}
}
li aside::after{
width:15px;height:15px;
background-image:url('img_youtube/added-.gif');
content:'';
position:absolute;
left:3px;bottom:3px
}
#time{
padding:0 3px;
background-color:#000;
color:#FFFFFF;
font:bold 11px 'Arial';
opacity:.75;
position:absolute;
bottom:3px;right:3px
}
#stars{
width:60px;height:12px;
margin-top:2px;
background-image:url('img_youtube/stars-.gif');
}
#content-ii{width:300px}
#perfil, #content-ii aside{font-size:12px}
#perfil{
margin-bottom:15px;padding:10px;
background-color:#EEEEEE;
border:1px solid #CCCCCC;
position:relative;
& img{
width:50px;height:50px;
margin:5px 10px 0 5px;
outline:1px solid #FFFFFF;
border:1px solid #999999;
filter:drop-shadow(1px 0 0 #999999) drop-shadow(0 1px 0 #999999) drop-shadow(-1px 0 0 #999999) drop-shadow(0 -1px 0 #999999);
float:left
}
& p{margin:5px 0 0 0}
}
#perfil p.ii{margin:0;line-height:20px}
a.i{font-weight:bold;text-decoration:none}
a.ii{text-decoration:1px dotted underline}

#content-ii aside{
padding:10px;
background-color:#FFFFDB;
border:1px solid #F6E4B8;
border-radius:10px;
& h1{margin:0 0 5px 0;font-size:17px;color:#CC6600}
}