F@media screen {
/* --- RESET --- */
               

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,header,footer,aside,menu,figure{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}header,footer,aside,menu{display:block;}
               
   /* --- /RESET --- */
}
            
/* TAGS */
   body {
      background-color: #f2f2f2;
      font-size: 75%; /* 12px */
      width: 100%;
      height:100%;
   }
   html * { /* prevents font boosting in chrome */
      max-height: 999999px;
   }
   body, table, th, td{
      /*MSt font-family: 'OpenSansRegular', Verdana, sans-serif;  */
      font-family: arial, helvetica;
   }
   table, th, td, button {
      font-size: 1em;
   }
   body, li, table {
      color: #505457;
   }
   
   input[type=text], input[type=password],
   input[type=date], input[type=datetime],
   input[type=color], input[type=email],
   input[type=month], input[type=number],
   input[type=range], input[type=search],
   input[type=tel], input[type=time],
   input[type=url], input[type=week]{
      height: 20px;
      min-width: 10px;
   }
   
   h1, h2, h3, h4 {
      /* MSt    color: #fff;   MSt */
      color: black;
   }
   
   h1 {
      /*MSt font-family: 'OpenSansLight', verdana, sans-serif;  */
      font-family: arial, helvetica;
      font-weight: normal;
      font-size: 25px;
      margin: 10px 3px;
   }
   
   h3 {
      /*MSt font-family: 'OpenSansLight', verdana, sans-serif;  */
      font-family: arial, helvetica;
      font-weight: normal;
      font-size: 15px;
   }
   
   a{
   /* MSt    color: #5F9BC2;   MSt */
      color: #d33228;
      text-decoration: none;
      -webkit-transition: color .1s ease-in;
      transition: color .1s ease-in;
      cursor: pointer;  
   }
   
   a:hover{
      /* MSt    color: #0077cc;   MSt */
      color: rgb(204,0,0); 
   }
   
#page {
   /* MST background: #f2f2f2 url("../images/vo/page_bg.png") repeat-x 0 0;   MSt */
   position: relative;
   width: 100%;
   min-width: 900px;
}


/* PAGE HEADER */
#page-h {
   position: relative;
   height: 125px;
   margin: 0;
   margin-top: 0!important; /* kvuli vygenerovani search boxu v "responsive 768" */
   color: #fff;   
   margin: 0 30px;      
}

#page-h a {
   /* MSt  color: #88ccff;  MSt */ 
   color: black;
   text-decoration: none;
}
#page-h a:hover {
   /* MSt color: #fff;  MSt */
   color: black;
}

/* Logo */
#page-h-logo {
   float: left;
   margin-left: 12px;
   vertical-align: top;
   position: relative;  height: 77px;
   width: 300px;
   top: 5px;
}
#page-h-logo a {
   display: block;
   width: 211px;
   height: 91px;
   margin: 14px;
   background: url("../images/vo/logo_opencall.png") no-repeat 0 0;
}
#page-h-logo a span {
   display: none;
}

/* Container */

#page-c{
   margin-top: 0!important; /* kvuli vygenerovani search boxu v "responsive 768" */
   min-height:350px; 
   /*MSt   background-color: #F2F2F2;   */
   background-color: #ffffff;
   border-top-left-radius:3px;
   border-top-right-radius:3px;
   margin: 0 30px;
}

#page-c.loading{
   background: #F2F2F2 url("../images/loading.gif") no-repeat center center;
}

#page-c > div{
   padding:25px;
   color: #000000;
}

/* Login */
#log-in{
   width: 450px;
   text-align: center;
   margin: 20px auto;
}

#log-in #content{
   border: 1px solid #cccccc;
   width: 100%;
   height: 270px;
   text-align: center;
   
}

#log-in #content > div{
   margin: 0 auto;
}


#log-in #content .label{
   font-size: 13px;
   width: 350px;
   text-align: left;
   padding:20px 0 5px;
}

#log-in #content .error{
        font-size: 13px;
        width: 100%;
        text-align: center;
        padding:50px 0 5px;
}

#log-in #content .value{
   font-size: 11px;
   width: 350px;
   text-align: left;
}

#log-in #content .value input{
   width: 350px;
}

#log-in #content .btn{
   padding:20px 0;
}

#log-in #content .btn input{
   height:26px;
}

#log-in #forgotten-password{
   margin: 30px;
}

#log-in > h1{
  display:none;
}

/* Menu */
#page-h.menu #page-h-logo, #page-h.auth #page-h-logo{
   float: left;
}

#page-h.menu #page-h-title, #page-h.auth #page-h-title{
   float: left;
   color: #fff;
   margin: 50px 0 10px 20px;
}

#page-h.menu #page-h-action{
   float: right;
   color: #fff;
  margin: 65px 10px 10px 20px;
  display: inline-block;   
}

#page-h.menu #page-h-action ul li{
   flaot:left;
   display: inline-block;
   margin: 0 10px;
   color: #fff;
}

#page-h.menu #page-h-action ul li span.img-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    float: left;
}

#page-h.menu #page-h-action ul li span.img-icon a{
   display:block;
   width: 18px;
   height: 18px;
}

#page-h.menu #page-h-action ul li.profile span.img-icon{
/*MSt    background-image: url("../images/profile.png");  */
}

#page-h.menu #page-h-action ul li.logout span.img-icon{
/*MSt    background-image: url("../images/logout.png");   */
}

#page-h.menu #page-h-action ul li.profile:hover span.img-icon{
/*MSt    background-image: url("../images/profile.png");   */
}

#page-h.menu #page-h-action ul li.logout:hover span.img-icon{
/*MSt    background-image: url("../images/logout.png");   */
}

#page-h.menu #menu-icon{
   float: right;
   color: #fff;
  margin: 10px;
  display: none;  
}

#page-h.menu #menu-icon a{
   display: block;
   width: 35px;
   height: 34px;
   background-image: url("../images/menu_icon_70x68.png");
   background-repeat-x: no-repeat;
   background-repeat-y: no-repeat;
   background-attachment: initial;
   background-position-x: 0px;
   background-position-y: 0px;
   background-origin: initial;
   background-clip: initial;
   background-color: initial;
   background-size: 35px, 34px;
}
#page-h.menu #page-h-action ul li span.label{
   /*MSt  font-family: 'OpenSansLight', verdana, sans-serif;  */
   font-family: arial, helvetica;
   font-weight: normal;
   font-size: 15px;
}

#page-h.menu #page-h-action ul li:hover span.label{
   color: #07c;
}

#menu{
   width: 100%;
   text-align:center;
}

#menu h1{
   color: black;
}

#menu .description{
   margin: 5px 0;
}

#menu #sizebar{
   margin: 15px 0;
   font-weight:bold;
}

/*  Messages  */
#menu #messages{
   width: 100%;
   margin: 0 0px;
}

#menu #messages .header{
   height: 22px;
   display: block;
   border-bottom:1px solid #ccc;
   overflow:hidden;
}

#menu #messages .row{
   height: 40px;
   display: block;
   background-color:white;
   border-bottom:1px solid #ccc;
   overflow:hidden;
}

#menu #messages .row:hover{
   background-color:#ffffcc; 
   cursor:pointer; 
}

#menu #messages .header > div{
   float: left;
   overflow: hidden;
   line-height:20px;
   text-align:center;
   vertical-align:middle;
}

#menu #messages .row > div{
   float: left;
   overflow: hidden;
   line-height:39px;
   text-align:center;
   vertical-align:middle;
   display:inline-block;
   height:39px;   
}

#menu #messages .chkbox{
   width: 5%;
   cursor:default;
}

#menu #messages .row .chkbox{
   line-height:20px;
   height:35px;
}

#menu #messages .row .chkbox > div{
   margin-top: 10px;
}

#menu #messages .status{
   width: 10%;
}

#menu #messages .preview{
   width: 20%;
}

#menu #messages .preview.audio{
   background-image: url("../images/music_default_preview.png");
   background-repeat: no-repeat;
   background-position: center;
   height:41px;
}

#menu #messages .preview.video{
   background-image: url("../images/video_default_preview.png");
   background-repeat: no-repeat;
   background-position: center; 
   height:41px;

}

#menu #messages .preview.text{
   background-image: url("../images/text_default_preview.png");
   background-repeat: no-repeat;
   background-position: center; 
   height:41px;

}

#menu #messages .preview.image{
   background-image: url("../images/image_default_preview.png");
   background-repeat: no-repeat;
   background-position: center;
   height:41px;

}
#menu #messages .rcvd_at{
   width: 20%;
}

#menu #messages .from{
   width: 20%;
}

#menu #messages .subject{
   width: 25%;
}

#menu #messages .row .from{
   font-weight: bold;
}

#menu #messages .row .subject{
   font-weight: bold;
}

#menu #messages .row .status div{
   display:inline-block;
   width: 18px;
   height: 13px;
   background-repeat: no-repeat;
   margin: 12px 0;
}

#menu #messages .row .status div.icon-unread{
   background-image: url("../images/unread.png");
}

#menu #messages .row .status div.icon-read{
   background-image: url("../images/read.png");
}

#menu #messages .row .preview img{
   height: 34px;
   width: auto;
   margin: 2px 0;
   
}

#menu #messages .row .preview, #menu #messages .row .status{
   line-height:0;
}

#menu #messages .row .label{
   display: none;
}

#menu #messages .actions{
   display:block;
   height: 35px;
}

#menu #messages .actions > div{
   float: left;
   margin: 5px 20px 5px 0;
}

#menu #messages .pagination{
   margin: 20px 0;
   display:block;
   height: 30px;
}

#menu #messages .pagination .label{
   float: left;
   text-align:left;
}

#menu #messages .pagination .pages{
   float: right;
   display: inline-block;
}

#menu #messages .pagination .pages > div{
   float: left;
   margin:0 5px;
}

#menu #messages .pagination .pages .first, 
#menu #messages .pagination .pages .last, 
#menu #messages .pagination .pages .previous,
#menu #messages .pagination .pages .next{
   width: 8px;
   height: 15px;
   display: inline-block;
}

#menu #messages .pagination .pages .first a,
#menu #messages .pagination .pages .previous a{
   width: 8px;
   height: 15px;
   background-repeat: no-repeat;
   display: inline-block;  
}

#menu #messages .pagination .pages .first a{
   background-image: url("../images/first_enabled.png");
}

#menu #messages .pagination .pages .previous a{
   background-image: url("../images/arrow_left_enabled.png");

}

#menu #messages .pagination .pages .first.disabled a{
   background-image: url("../images/first_disabled.png");
}

#menu #messages .pagination .pages .previous.disabled a{
   background-image: url("../images/arrow_left_disabled.png");
}

#menu #messages .pagination .pages .last a,
#menu #messages .pagination .pages .next a{
   width: 8px;
   height: 15px;
   background-repeat: no-repeat;
   display: inline-block;  
}

#menu #messages .pagination .pages .last a{
   background-image: url("../images/last_enabled.png");
}

#menu #messages .pagination .pages .next a{
   background-image: url("../images/arrow_right_enabled.png");

}

#menu #messages .pagination .pages .last.disabled a{
   background-image: url("../images/last_disabled.png");
}

#menu #messages .pagination .pages .next.disabled a{
   background-image: url("../images/arrow_right_disabled.png");
}

#menu #messages .pagination .pages .numbers a{
   width: 8px;
   height: 15px;
   line-height: 15px;
   vertical-align:middle;
}

#menu #messages .pagination .pages .numbers.selected a{
   color:#000;
}

/*  Messages  Details   */
#menu #details{
      text-align:center;
      margin: 0;
        display:inline-block;
}

#menu #details .msg_detail{
   margin: 10px;
   text-align:left;
   
}

#menu #details .msg_detail .label
{
  display:inline-block;
   width: 100px;
   font-size: 12px;
   text-align: right;
   color: #999;
}

#menu #details .msg_detail .value{
   display: inline-block;
   font-size: 12px;
   text-align: left;
   margin-left: 15px;
   color: #000;
}

#menu .actions{
   display:block;
   text-align:center;
}

#menu .actions .buttons{
   display:inline-block;
}

#menu .actions .buttons > div{
   float: left;
   margin: 10px 10px 15px 0;
}

#menu #message{
   display: block;
   margin: 0 20px 10px;
   background-color:#fff;
   border-bottom:1px solid #ccc;
}

#menu #message .media{
   display: block;
   border-top:1px solid #ccc;
   padding: 10px 0;
}


#menu #message .media.bold{
   border-top:1px solid #000;
}

#menu #message .media > div{
   display: inline-block;
   width: 100%;
   text-align: left;
}

#menu #message .media > div .media_content{
   float: left;
   width: 40%;
   text-align:right;
   padding: 0 40px;
}

#menu #message .media > div .media_content img{
   width: 150px;
   height: auto;
}

#menu #message .media > div .media_content.video > div{
   display: inline-block;
   width: 150px;
   height: 150px;
   background-image: url("../images/video_default.png");
   background-repeat: no-repeat;
}

#menu #message .media > div .media_content.audio > div{
   display: inline-block;
   width: 150px;
   height: 150px;
   background-image: url("../images/music_default.png");
   background-repeat: no-repeat;
}

#menu #message .media > div .media_content.text > div{
   display: inline-block;
   width: 150px;
   height: 150px;
   background-image: url("../images/text_default.png");
   background-repeat: no-repeat;
}

#menu #message .media > div .media_action{
   display: inline-block;
   margin-left: 40px;
   width: 40%;
   margin-right: 10px;
   word-wrap: break-word;
   float:right;
}

#menu #message .media > div .media_action .label{
   margin: 0 0 5px;
   font-size: 11px;
   font-weight:bold;
}

#menu #message .media > div .media_action .label.text{
   font-weight:normal;
}

#menu #message .media > div .media_action .play_clip a{
   margin: 0 0 5px;
   padding: 0 0 0 17px;
   font-size: 11px;
   line-height:10px;
   background-image: url("../images/play_clip_icon.png");
   background-repeat: no-repeat;
   background-position: middle left;
}

#menu #message .media > div .media_action .play_clip span{
     margin: 0 0 5px;
     padding: 0 0 0 17px;
     font-size: 11px;
     line-height:10px;
     color: #a0a0a0;
} 

#menu #message .media > div .media_action .save_to_desktop a{
   margin: 0 0 5px;
   padding: 0 0 0 17px;
   font-size: 11px;
   line-height:10px;
   background-image: url("../images/download_icon.png");
   background-repeat: no-repeat;
   background-position: middle left;
}

#menu #message .media > div .media_action .orig_size a{
   margin: 0 0 5px;
   padding: 0 0 0 17px;
   font-size: 11px;
   line-height:10px;
   background-image: url("../images/zoom_icon.png");
   background-repeat: no-repeat;
   background-position: middle left;
}

/* --- Change Password Form --- */
.overall{
   display:none;
   z-index:1000;
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background-color:#ccc;
   opacity:0.5;
}

#change_password, #forgotten_password, #mms_to_mail{
   display:none;
   position:absolute;
   width:300px;
   height:260px;
   padding:10px;
   border:1px solid #6D6D6D;
   background-color:white;
   -moz-box-shadow: 0px 0px 7px #8D8D8D;
   -webkit-box-shadow: 0px 0px 7px  #8D8D8D;
   box-shadow: 0px 0px 7px  #8D8D8D;
   z-index:1001;
   top:0;
   bottom: 0;
   left: 0;
   right: 0;

   margin: auto;
}

#msg_details_popup{
   display:none;
   position:absolute;
   width:300px;
   height:260px;
   padding:10px;
   border:1px solid #6D6D6D;
   background-color:white;
   -moz-box-shadow: 0px 0px 7px #8D8D8D;
   -webkit-box-shadow: 0px 0px 7px  #8D8D8D;
   box-shadow: 0px 0px 7px  #8D8D8D;
   z-index:1001;
   top:0;
   bottom: 0;
   left: 0;
   right: 0;

   margin: auto;
}

#mms_to_mail{
   height:120px;
}

#forgotten_password{
   height:230px;
}

#change_password .row, #forgotten_password .row, #mms_to_mail .row{
   background-color:white;
   opacity:1;
}

#change_password .label, #forgotten_password .label, #mms_to_mail .label{
   font-size: 13px;
   width: 250px;
   text-align: left;
   padding:20px 0 5px;
}

#change_password .value, #forgotten_password .value, #mms_to_mail .value{
   font-size: 11px;
   width: 250px;
   text-align: left;
}

#change_password .value input, #forgotten_password .value input, #mms_to_mail .value input{
   width: 250px;
}

#change_password .btn, #forgotten_password .btn, #mms_to_mail .btn{
   text-align:center;
   padding:20px 0;
}

#change_password .btn input, #forgotten_password .btn input, #mms_to_mail .btn input{
   height:26px;
}

#change_password > div, #forgotten_password > div, #mms_to_mail > div{
   display:inline-block;
}

#change_password .close_btn, #forgotten_password .close_btn, #msg_details_popup .close_btn, #mms_to_mail .close_btn{
   float:right;
   display:block;
   width:34px;
   height:34px;
   position:absolute;
   top:-17px;
   left:305px;
   background: url("../images/closebutton.png") no-repeat 0 0;
   cursor:pointer;
}

#msg_details_popup .content{
   width:100%;
   height:100%;
   display:inline-block;
}

#msg_details_popup .content.loading{
   background: #F2F2F2 url("../images/loading.gif") no-repeat center center;
}

#wrap{
   width:170px;
   margin-left:40px;
   -webkit-border-radius: 10px;
   float:left;
   -moz-border-radius: 10px;
   border-radius: 10px;
   padding:3px;
   text-align:center;
}
#wrap .text{
   font-size:11px;
}

img#refresh{
   float:left;
   margin-top:30px;
   margin-left:4px;
   cursor:pointer;
}


label{ float:left; color:#666666; width:80px;}

label.error{ color:#CC0000; font-size:12px; margin:4px; font-style:italic; width:280px;}

label.success{ color:#009900; font-size:12px; margin:4px; font-style:italic; width:280px;}


/* --- BASIC BUTTON (wide-blue-next,wide-blue-ico,action,next,prev,add) --- */
.button,
.button.nrw-blue {
   color: #07c;
   background-color: #fff;

   /*MSt  font-family: 'OpenSansRegular',sans-serif;  */
   font-family: arial, helvetica;
   font-size: 14px;
   line-height: 2em;
   text-align: center;
   text-decoration: none;

   display: inline-block;
   min-width: 80px;
   padding: 0 1em;

   border: 1px solid #cfcfcf;
   border-bottom: 1px solid #fff;

   border-radius: 4px;

   background-color: #fff;
   /* MSt box-shadow: 0 3px #999;   MSt */

   -webkit-transition: .1s ease;
   transition: .1s ease;

   cursor: pointer;

   position: relative;
}

.button.medium{
   font-size: 12px;
}

button.not-min-width{
   min-width: auto;
}
.button:hover,
.button.hover,
.button:active{
   border: 1px solid #ccc;
   border-bottom: 1px solid #ececec;
   color: #07c;
   background-color: #ececec;
}
.button:active {
   -moz-box-shadow: 0 1px #999;
   -webkit-box-shadow: 0 1px #999;
   box-shadow: 0 1px #999;
   top: 2px;
}


/* Blue */ 
.button.blue,
.button.nrw-blue{
   /* MSt   border: 1px solid #39c;     MSt */
   border: 1px solid black;
   color: #fff;
   /* MSt   background-color: #39c;     MSt */
   background-color: #d33228;
   /* MSt   box-shadow: 0 3px #244e7e;  MSt */
} 
.button.blue:hover,
.button.blue.hover,
.button.nrw-blue:hover,
.button.nrw-blue.hover  {
   color: #fff;
   background-color: rgb(204,0,0);
   /* MSt background-color: #327db2;
   border: 1px solid #327db2;   MSt */
}
.button.blue:active,
.button.nrw-blue:active {
   color: #fff;
   background-color: #327db2;
   border: 1px solid #327db2;

   box-shadow: 0 1px #14374b;

   top: 2px;
}

/* Blue */ 
.button.white,
.button.nrw-white{
   /* MSt border: 1px solid #ccc;  MSt */
   border: 1px solid black;
   color: black;
   /* MSt color: #327db2;  MSt */
   background-color: #fff;
   /* MSt box-shadow: 0 3px #777;  MSt */
} 
.button.white:hover,
.button.white.hover,
.button.nrw-white:hover,
.button.nrw-white.hover  {
   /* MSt color: #327db2; MSt */
   color: black;
   background-color: #eee;
   /* MSt border: 1px solid #bbb; MSt */
}
.button.white:active,
.button.nrw-white:active {
   color: #327db2;
   background-color: #fff;
   border: 1px solid #ccc;

   box-shadow: 0 1px #777;

   top: 2px;
}
/*  Alert   Box   */
.alert-box
{
   border-style: solid;
   border-width: 1px;
   display: block;
   font-size: 0.72222rem;
   font-weight: normal;
   margin-bottom: 1.11111rem;
   padding: 0.77778rem 1.33333rem 0.77778rem 0.77778rem;
   position: relative;
   transition: opacity 300ms ease-out;
   background-color: #008CBA;
   border-color: #0078a0;
   color: #FFFFFF; 
}

.alert-box.radius
{
   border-radius: 3px;
}

.alert-box.info
{
   background-color: #a0d3e8;
   border-color: #74bfdd;
   color: #4f4f4f; 
}

.alert-box.success {
   color: #4F8A10;
   background-color: #DFF2BF;
   border-color: #f0c390;
}

.info1, .success, .warning, .error1, .validation, .error2 {
   border: 1px solid;
   margin: 10px 0px;
   padding:0px 20px 0px 50px;
   background-repeat: no-repeat;
   background-position: 10px center;
   font-size:12px;
   min-height:40px;
   line-height:40px;
   text-align:left;
}

.info1 ol li, .success ol li, .warning ol li, .error1 ol li, .validation ol li, .error2 ol li {
   line-height:14px;
}

.info1 {
   color: #00529B;
   background-color: #BDE5F8;
   background-image: url('../images/info.png');
}

.success {
   color: #4F8A10;
   background-color: #DFF2BF;
   background-image:url('../images/success.png');
}

.warning {
   color: #9F6000;
   background-color: #FEEFB3;
   background-image: url('../images/warning.png');
}

.error1 {
   color: #D8000C;
   background-color: #FFBABA;
   background-image: url('../images/error.png');
}

.error2 {
   color: #D8000C;
   background-color: #FFBABA;
   background-image: url('../images/error.png');
}

.validation {
   color: #00529B;
   background-color: #BDE5F8;
   background-image: url('../images/validation.png');
}

/**************************************************************************/