@font-face
{
 font-family:'yosser';
 src:url('../media/yosser.woff') format('woff');
}
@font-face
{
 font-family:'icons';
 src:url('../media/icons.woff2') format('woff2');
}
*
{
 margin:0;
 outline:none;
 font-size:1em;
 font-family:yosser,verdana,arial,helvetica,sans-serif;
}
html
{ 
 overflow-y:scroll;
}
h2
{
 margin-top:-22px;
 padding:6px 12px;
 color:#e8e8e8;
 background:#333333;
}
a
{
 color:#333333;
 text-decoration:none;
}
a:hover
{
 color:#000000;
 text-decoration:underline;
}
hr
{
/* width:80%;*/
 margin:32px auto;
 color:#d8d8d8;
}

.page
{
 background-color:rgb(255, 255, 255, 0.6);
}

.box
{
 position:relative;
 margin:20px;
 padding:10px;
 background-color:#eeeeee;
 border-radius:20px;
 box-shadow:6px 6px 10px #999999;
}

.video
{
 position:fixed;
 display:block;
 top:50%;
 left:50%;
 min-width:100%;
 min-height:100%;
 width:auto;
 height:auto;
 z-index:-3;
 transform:translateX(-50%) translateY(-50%);
 background:url('../img/vid.png') no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
 background-size:cover;
 transition:1s opacity;
}

.nav
{
 margin-bottom:20px;
 text-align:center;
 background-color:#d8d8d8;
 box-shadow:inset 0 -12px 8px -8px #cccccc;
}

.nav ul
{
 padding:0;
}
.nav li
{
 position:relative;
 width:128px;
 height:88px;
 padding:0;
 cursor:pointer;
}
.nav a
{
 position:absolute;
 left:0;
 bottom:8px;
 width:128px;
 padding-top:120px;
 color:#777777;
 text-decoration:none;
 font-size:8em;
 font-weight:bold;
}

.hughes
{
 float:left;
 width:160px;
 height:200px;
 background-image:url('../img/hughes.svg');
 background-repeat:no-repeat;
 background-size:120px;
 background-position:24px 40px;
}
.kill
{
 float:right;
 color:#ffffff;
 background:#999999;
 border:1px #ffffff solid;
 border-radius:4px;
 cursor:pointer;
}
.clud
{
 width:80%;
 margin:4px;
 margin-left:12px;
 padding:4px;
 background:#cccccc;
 cursor:pointer;
}
.form
{
 width:calc(100% - 60px);
}
.file
{
 width:320px;
 line-height:1.2em;
 margin-right:60px;
}
.show
{
 position:absolute;
 width:100%;
 height:80%;
 background:rgba(0,0,0,0.8);
 z-index:1;
}
.clr
{
 clear:both;
}
.dlg
{
 display:block;
 position:absolute;
 left:calc(50% - 300px);
 top:120px;
 width:600px;
 padding:22px;
 background:#ffffff;
 border:12px #cccccc solid;
 border-radius:24px;
 box-sizing:border-box;
}
.dlg h2
{
 width:calc(100% + 20px);
 margin-left:-22px;
 border-top-left-radius:12px;
 border-top-right-radius:12px;
}
.dlg .msg
{
 margin:24px;
}
.tikbox
{
 line-height:2.2em;
 cursor:pointer;
}
.tik
{
 float:left;
 width:24px;
 height:24px;
 margin:4px;
 margin-right:8px;
 background:url('/img/tick.svg');
 background-repeat:no-repeat;
 background-size:24px 48px;
}
.tik0
{
 background-position:0 -24px;
}
.tik1
{
 background-position:0 0;
}
.hid
{
 display:none;
}
.txt
{
 width:100%;
 height:40px;
 margin-bottom:8px;
 padding-left:48px;
 background-color:#cccccc;
 border:0;
 border-radius:30px;
 box-sizing:border-box;
 background-repeat:no-repeat;
 background-size:36px;
 background-position:2px 2px;
}
.txta
{
 height:360px;
 padding:22px 48px 22px 48px;
 background-repeat:no-repeat;
 background-size:36px;
 background-position:4px 4px;
}
.btn
{
 float:right;
 margin-left:8px;
 padding:12px;
 color:#dddddd;
 background:#333333;
 border:4px #999999 solid;
 border-radius:12px;
 cursor:pointer;
}
.vbtn
{
 position:absolute;
 width:46px;
 right:12px;
 bottom:16px;
}
.btn:active
{
 border-top:5px #999999 solid;
 border-right:3px #999999 solid;
 border-bottom:3px #999999 solid;
 border-left:5px #999999 solid;
}


.ico
{
 margin-bottom:18px;
 font-size:2em; 
 font-family:icons;
}

.icopost
{
 background-image:url(../img/post.svg);
}
.icouser
{
 background-image:url(../img/user.svg);
}
.icosubj
{
 background-image:url(../img/subj.svg);
}
.icotitl
{
 background-image:url(../img/titl.svg);
}
.icohead
{
 background-image:url(../img/head.svg);
}
.icomssg
{
 background-image:url(../img/mssg.svg);
}
.icoclud
{
 background-image:url(../img/clud.svg);
}
.icosrch
{
 background-image:url(../img/srch.svg);
}
.icopass
{
 background-image:url(../img/pass.svg);
}

.ass:before
{
 content:"\e4a4";
}
.con:before
{
 content:"\f7d9";
}
.spm:before
{
 content:"\f674";
}
.src:before
{
 content:"\e1f9";
}
.cln:before
{
 content:"\e04d";
}