/* 
    Created on : Nov 25, 2014, 9:23:10 PM
    Author     : Alex Stezak, Domenet, alex@domenet.info
*/
@import url(//fonts.googleapis.com/css?family=PT+Sans+Caption:400,700,400italic,700italic);
@import url(//fonts.googleapis.com/css?family=Jura:300,400,500,600&subset=latin-ext);

* {
   margin: 0;
   padding: 0;
   outline: none;
}
html {
   font-size: 100%;
   overflow-y: scroll;
   -webkit-text-size-adjust: 100%
}
html, body {
   display: block;
  /* height: 100%;*/
   width: 100%;
   -webkit-font-smoothing: antialiased;
   font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}
body {
   background: #cb010e;
   color: #FFF;
   font-family: 'PT Sans Caption', Arial;
   font-size: 15px;
   line-height: 21px;
}
a {
   color: #FFF;
   font-weight: 600;
   text-shadow: 1px 2px 3px rgba(0,0,0,1);
   transition: 200ms all ease-in;
}
a:hover {
   color: #ff0;
}
#page {
   max-width: 640px;
   margin: 40px auto;
}
h1, h2, h3, h4 {
   font-size: 36px;
   line-height: 45px;
   font-weight: 700;
   font-family: 'Jura', Arial;
   text-shadow: 1px 2px 3px rgba(0,0,0,1);
   margin-bottom: 30px;
}
h2 {
   font-size: 28px;
   line-height: 36px;
   margin-bottom: 20px;
}
h3 {
   font-size: 24px;
   line-height: 30px;
   margin-bottom: 10px;
}
h4 {
   font-size: 20px;
   line-height: 36px;
   margin-bottom: 10px;
}
.frow {
   margin: 10px 0;
}
.frow.center {
   text-align: center;
}
.frow label {
   display: inline-block;
   width: 180px;
   margin-bottom:5px;
   vertical-align: top;
}
.frow label.autowidth {
   width: auto;
}
.frow label small {
   font-size: 12px;
   font-style: italic;
   color: #DDD;
}
.frow input[type=text], .frow input[type=number], .frow input[type=tel], .frow input[type=password] {
   width: 300px;
   width: calc(100% - 200px);
   min-width: 200px;
   max-width: 350px;
   padding: 5px;
   height: 20px;
   line-height: 20px;
   font-size: 15px;
   color: #000;
   border: 0;
   background: rgba(255,255,255,0.85);
   border-radius: 3px;
   box-shadow: 1px 1px 3px rgba(0,0,0,0.5), inset 0 0 5px rgba(255,145,145,0.1);
}
.frow input.tiny {
   min-width: 35px;
   max-width: 35px;
   width: 35px;
}
.frow input.vsmall {
   min-width: 70px;
   max-width: 70px;
   width: 70px;
}
.frow input.ralign {
   text-align: right;
}
.frow input.error {
   background: rgba(255,255,165,0.85) url(/design/input-error.png) 100% 50% no-repeat;
}
.frow input.tiny.error, .frow input.vsmall.error {
   padding: 5px 35px 5px 5px;
}
.frow select {
   width: 310px;
   width: calc(100% - 190px);
   min-width: 210px;
   max-width: 360px;
   padding: 0 5px;
   height: 30px;
   line-height: 30px;
   font-size: 15px;
   color: #000;
   border: 0;
   background: rgba(255,255,255,0.85);
   border-radius: 3px;
   box-shadow: 1px 1px 3px rgba(0,0,0,0.5), inset 0 0 5px rgba(255,145,145,0.1);
}
.frow select.error {
   background: rgba(255,255,165,0.85) url(/design/input-error.png) 95% 50% no-repeat;
}
.frow input:focus, .frow select:focus, .frow textarea:focus {
   background: rgba(255,255,255,1);
}
.frow textarea {
   width: 300px;
   width: calc(100% - 200px);
   min-width: 200px;
   max-width: 350px;
   padding: 5px;
   height: 80px;
   max-height: 160px;
   line-height: 20px;
   font-size: 15px;
   font-family: Arial;
   color: #000;
   border: 0;
   background: rgba(255,255,255,0.85);
   border-radius: 3px;
   box-shadow: 1px 1px 3px rgba(0,0,0,0.5), inset 0 0 5px rgba(255,145,145,0.1);
   resize: vertical;
}
.frow textarea.error {
   background: rgba(255,255,165,0.85) url(/design/input-error.png) 100% 100% no-repeat;
}
.frow input[type=button], .frow input[type=submit] {
   width: auto;
   max-width: 200px;
   padding: 0 15px;
   height: 45px;
   line-height: 45px;
   font-size: 18px;
   color: #FFF;
   border: 0;
   background: rgba(40,140,250,0.85);
   border-radius: 3px;
   box-shadow: 1px 1px 3px rgba(0,0,0,0.5), inset 0 0 5px rgba(255,145,145,0.1), inset 0 30px 30px rgba(255,255,255,0.1);
   cursor: pointer;
   text-shadow: 1px 1px 3px rgba(0,0,0,1);
   transition: 200ms all ease-in;
}
.frow input[type=button]:hover, .frow input[type=submit]:hover {
   background: rgba(40,140,250,1);
}
.frow input[type=button]:active, .frow input[type=submit]:active {
   background: rgba(40,140,250,1);
   box-shadow: 1px 1px 3px rgba(0,0,0,0.5), inset 0 0 5px rgba(255,145,145,0.1), inset 0 30px 30px rgba(0,0,0,0.2);
   transition: 50ms all ease-in;
}
.warnbox {
   padding: 10px;
   border-radius: 3px;
   border: 1px dashed #FFF;
   background: rgba(40,140,250,0.2);
   text-align: justify;
   font-style: italic;
   margin: 30px 0;
}
.warnbox ul {
   padding: 0 0 0 50px;
}


/*********** FILE UPLOAD ************/
.dragndropbox {
   border: 1px dashed #FFF; 
   margin: 20px 0; 
   padding: 50px 20px; 
   text-align: center; 
   border-radius: 3px; 
   background: rgba(255,255,255,0.1);
   transition: 300ms all ease;
}
.dragging .dragndropbox {
   background: rgba(200,200,200,0.4)
}
#dragndropimg {
   padding: 50px 20px 20px 270px;
   position: relative;
}
#dragndropimg .preview {
   width: auto;
   height: auto;
   border: 1px dashed #FFF;
   padding: 1px;
   position: absolute;  
   top: 50px;
   left: 20px;
   text-align: center;
}
#dragndropimg .preview img {
   max-height: 150px;
   max-width: 200px;
   line-height: 150px;
   vertical-align: middle;
}
.dragndropbox .progressbox {
   width: 100%;
   height: 22px;  
   line-height: 22px;
   color: #FFF;
   /*text-shadow: 1px 1px 2px rgba(0,0,0,0.3);*/
   text-align: center;
   position: relative;
   border: 1px solid #CCC;
   border-radius: 1px;
   background: #FFF;
   padding: 1px;
   box-shadow: 1px 1px 3px rgba(0,0,0,0.0);
   overflow: hidden;
}
.dragndropbox .hide {
   opacity: 0;
}
.dragndropbox .progress {
   background: rgba(130,200,250,1);
   width: 0px;
   transition: all 800ms ease;
}
.dragndropbox .done .progress {
   background: rgba(40,220,120,1);
}
.dragndropbox .progresspercent {
   position: absolute;
   width: 120px;
   text-align: center;
   height: 16px;
   font-size: 11px;
   line-height: 18px;
   top: 4px;
   left: 50%;
   color: #111;
   /*text-shadow: 1px 1px 2px rgba(255,255,255,1), -1px -1px 2px rgba(255,255,255,1);*/
   font-weight: 400;
   margin: 0 -60px;
   border-radius: 3px;
   background: rgba(255,255,255,0.8);
}
.dragndropbox .sizebox {
   height: 25px;
   line-height: 25px;
   margin: 5px 0 0;
   text-align: left;
   font-size: 12px;
   width: 40%;
   padding: 0 0 0 5px;
}
.dragndropbox .sizebox span {
   display: inline-block;
   padding: 0 0 0 5px;
}
.dragndropbox .timeleft {
   height: 25px;
   line-height: 25px;
   margin: 5px 0 0;
   text-align: right;
   font-size: 12px;
   width: 55%;
   float: right;
   padding: 0 5px 0 0;
}
.dragndropbox .timeleft .rmtime {
   width: 100px;
   display: inline-block;
}
.dragndropbox .specs {
   margin: 20px 0;
   font-size: 14px;
   background: rgba(40,140,250,0.4);
   padding: 10px;
}
.uploadimage-input { 
   margin: 20px auto; 
   border: 1px solid #FFF;
   width: 250px;
   height: 25px;
   line-height:25px;
   padding: 5px;
   border-radius: 5px;
   cursor: pointer;
}

/********** Overlay *********/

#overlay {
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.9);
   display: none;
   opacity: 0;
   transition: opacity 500ms ease;
   -webkit-transition: opacity 500ms ease;
   -moz-transition: opacity 500ms ease;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999;
}
#overlay.show {
   display: block;
   opacity: 1;
   transition: opacity 500ms ease;
   -webkit-transition: opacity 500ms ease;
   -moz-transition: opacity 500ms ease;
}
#overlay.hiding {
   display: block;
   opacity: 0;
   transition: all 500ms ease;
   -webkit-transition: all 500ms ease;
   -moz-transition: all 500ms ease;
}
.overlayin {
   max-width: 900px;
   margin: auto;
   height: 100%;
   text-align: center;
}
#overlay .title {
   margin: 50px 0 30px 0px;
   color: #FFF;
   text-shadow: 0 0 3px #005399;
   text-align: center; 
}
#overlay .title h1 {
   color: #FFF;
   text-shadow: 0 0 3px #005399;
   font-size: 36px;
   font-weight: 300;
}
#overlay .item {
   width: 50%;
   max-width: 500px;
   min-width: 300px;
   display: inline-block;
   margin: 30px 0;
   background: rgba(250,250,250,0.95);
   box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
   padding: 0 0 20px;
   max-height: 60%;
   max-height: calc(100% - 200px);
   overflow: auto;
}
#overlay .item ul {
   margin: 0 10px;
   padding: 0 0 0 20px;
   text-align: left;
}
#overlay .item li {
   padding: 0 0 7px 10px;
   font-size: 14px;
}
#overlay .item h1 {
   color: #cb010e;
   font-size: 32px;
   margin: 10px 0 20px;
}
#overlay .close {
   border: 2px solid #FFF;
   height: 30px;
   width: 30px;
   float: right;
   color: #FFF;
   border-radius: 30px;
   line-height: 30px;
   margin: 15px 0;
   cursor: pointer;
}
#overlay .description {
   overflow: hidden;
   line-height: 20px;
   font-size: 15px;
   color: #111;
   padding: 0 15px;
   margin: 0 0 15px;
   clear: both;
}
#overlay .convlink {
   color: #cb010e;
   font-size: 20px;
   margin: 5px 0 10px;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   font-weight: 400;
   display: inline-block;
}
.nevezesek {
   clear: both;
   padding: 20px 0 0 ;
}
.nevezesek img {
   max-width: 120px;
   min-width: 80px;
   max-height: 100px;
   min-height: 60px;
   background: #CCC;
   float: left;
   margin: 5px 20px 0 0;
   border-radius: 8px;
   box-shadow: 1px 1px 3px 1px rgba(0,0,0,1);
}
.nevezesek h4 {
   margin: 0;
   font-style: italic;
   font-size: 18px;
   line-height: 24px;
}
.nevezesek h3 {
   margin: 0;
   font-size: 22px;
   line-height: 25px;
}
.watchlist {
   width: 100%;
}
.watchlist a {
   width: 640px;
   height: 30px;
   line-height: 30px;
   text-overflow: ellipsis;
   overflow: hidden;
   display: block;
   font-size: 14px;
   font-weight: 400;
   text-decoration: none;
   border: 1px solid rgba(255,255,255,0.3);
}
.watchlist a:hover {
   background: rgba(0,0,80,0.1);
}
.watchlist a span.director {
   margin: 0 10px;
   width: 150px;
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
}
.watchlist a span.entrytitle {
   margin: 0 10px 0 0;
   width: 360px;
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
}
.watchlist a span.entrycat {
   margin: 0;
   width: 90px;
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 12px;
   text-align: center;
}
video {
   width: 100%;
   height: auto;
   margin: 30px 0;
}
div.right {
   text-align: right;
}