// Base CSS styles used for both client app, and wake-up page

.O(@color){
   outline: 1px solid @color;
}

.D(){
   .O(red);
}

.debug{
   outline: 2px dashed red;
}

.Border-radius(@n){
   -webkit-border-radius: @n;
   -moz-border-radius: @n;
   border-radius: @n;
}

.no-select{
   -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;
   user-select: none;   
}

.Link(){
   cursor: pointer;
   .no-select();
}

.Alpha(@n){
   opacity: @n;
   @opacityPercentage: @n * 100;
   filter: ~"alpha(opacity=@{opacityPercentage})";
}

.Transitions(@args){
   -o-transition: @args;
   -webkit-transition: @args;
   -moz-transition: @args;
   transition: @args;
}

.Transition(@p, @t){
   .Transitions(@p unit(@t, ms) linear);
}

.Anim(@args){
   animation: @args;
   -webkit-animation: @args;
   //-moz-animation: @args;
}

.AnimOrigin(@args){
   transform-origin: @args;
   -webkit-transform-origin: @args;
}

.Popup(@outline){
   position: fixed;
   border: 1px solid @outline;
   margin: 0;
   .Border-radius(8px);
   box-shadow: 2px 2px 5px 2px rgba(0,0,0,.4);
}

.Size(@sz){
   @s: unit(@sz, px);
   width: @s; height: @s;
}
.Size(@x, @y){
   width: unit(@x, px); height: unit(@y, px);
}

//-------------------------------
@pane_padding: 12px;

body{
   font: 100% "Arial", sans-serif;
   margin: 20px;
   min-width: @body_width;
}

#bgnd-img{
   z-index: -1;
   position: fixed; 
   top: 0; left: 0; //bottom: 0; right: 0;
   width:100%; height:100%;
   background: url("img/bgnd.png") no-repeat center center fixed;
   background-size: 100% 100%;
}

@title_alpha: 30%;
@transl_bgnd: fade(#000, @title_alpha);

.Title(@fontSz, @shd_col){
   @shO: @fontSz / 12;
   text-shadow: @shO @shO @fontSz/8 @shd_col;
   vertical-align: middle;
   font-size: @fontSz;   
}

#title_bar{
   padding: 4px;
   background-color: @transl_bgnd;
   .Border-radius(8px);
   position: relative;
   width: @body_width;
   margin: 0 auto;
   #title{
      .Title(24px, #222);
      color: #fff;
      margin: 8px 0 6px 8px;
   }
   #icon{
      width: 32px; height: 32px;
      vertical-align: middle;
      margin: 5px;
   }
   .but{
      float: right; 
      margin-left: 5px;
   }
}