/*
 * Copyright (c) 2012 Somia Dynamoid Oy
 * All Rights Reserved
 */

/* Variables */

// Colors
@color-body:                           #0A2435;
@color-link:                           #0094B3;
@color-comment:                        #A9BAC5;
@color-owner:                          #4F7507;
@color-private:                        #FF54E2;
@color-text:                           white;

@color-background-comments:            #0F354D;
@color-background-dialog:              #2D789D;
@color-background-dialog2:             #07405C;
@color-background-list:                white;
@color-background-list-hover:          #348BB6;
@color-background-list-hover2:         #24698A;
@color-background-list2:               #DFDFDF;
@color-background-photo:               #0C1C29;
@color-border-dialog:                  #053045;
@color-border-list:                    #042B3E;
@color-list:                           #3B4246;
@color-list-hover:                     white;

// Fonts
@font:                                 'Helvetica Neue', Helvetica, Arial, sans-serif;

// Images
@icon-image-actions:                   url(/img/bashi/icons_lite_imageactions.png);
@icon-like-add:                        url(/img/bashi/icon_like_add.png);
@icon-like-delete:                     url(/img/bashi/icon_like_delete.png);
@image-ajax:                           url(/img/bashi/ajax_dark_background.gif);
@image-video:                          url(/img/bashi/video_thumb_overlay.png);


/* Mixins */
.background-clip                       { -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }
.background-size(@size: cover)         { -webkit-background-size: @size; -moz-background-size: @size; -o-background-size: @size; background-size: @size; }
.box-shadow(@shadow1: transparent, @shadow2: transparent 0 0 0) { -moz-box-shadow: @shadow1, @shadow2; -webkit-box-shadow: @shadow1, @shadow2; box-shadow: @shadow1, @shadow2; }
.box-sizing(@sizing)                   { -moz-box-sizing: @sizing; -webkit-box-sizing: @sizing; box-sizing: @sizing; }
.gradient-h(@from: black, @to: white)  { background-image: -moz-linear-gradient(left, @from, @to); background-image: -ms-linear-gradient(left, @from, @to); background-image: -o-linear-gradient(left, @from, @to); background-image: -webkit-gradient(linear, left top, right top, from(@from), to(@to)); background-image: -webkit-linear-gradient(left, @from, @to); background-image: linear-gradient(left, @from, @to); .background-clip; }
.gradient-v(@from: black, @to: white)  { background-image: -moz-linear-gradient(top, @from, @to); background-image: -ms-linear-gradient(top, @from, @to); background-image: -o-linear-gradient(top, @from, @to); background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); background-image: -webkit-linear-gradient(top, @from, @to); background-image: linear-gradient(top, @from, @to); .background-clip; }
.gutters(@gutter: 10px)                { bottom: @gutter; left: @gutter; right: @gutter; top: @gutter; }
.hide-text                             { overflow: hidden; text-indent: 100%; white-space: nowrap; }
.size(@size)                           { height: @size; width: @size; }
.size(@width, @height)                 { height: @height; width: @width; }
.text-overflow                         { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline()                              { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; /* IE7 inline-block hack */ }


/* Styles */

// Root elements
html                                   { background: @color-body; font-size: 75%; -webkit-text-size-adjust: none; }
body                                   { background: transparent; color: @color-text; font: 12px/20px @font; margin: 0; }
html,
body                                   { overflow-x: hidden; }
strong                                 { font-weight: bold; }
a                                      { color: @color-link; text-decoration: none; }
form                                   { overflow: auto;
  fieldset                             { border: 0 none; margin: 0; padding: 5px; }
  button                               { background-color: @color-background-list-hover2; .box-shadow(inset 0 1px 0 rgba(255, 255, 255, .2)); border: 1px solid @color-border-list; border-radius: 3px; color: @color-list-hover; cursor: pointer; font-size: 17px; font-weight: bold; .gradient-v(@color-background-list-hover, @color-background-list-hover2); padding: 9px 14px; text-shadow: -1px -1px 0 rgba(0, 0, 0, .2);  text-transform: capitalize; }
}
body > img                             { position: absolute; } // TNS Metrix
.button                                { background-color: @color-background-list-hover2; .box-shadow(inset 0 1px 0 rgba(255, 255, 255, .2)); border: 1px solid @color-border-list; border-radius: 3px; color: @color-list-hover; font-size: 17px; font-weight: bold; .gradient-v(@color-background-list-hover, @color-background-list-hover2); padding: 10px 15px; text-shadow: -1px -1px 0 rgba(0, 0, 0, .2);
  &.small                              { font-size: 14px; padding: 8px 12px; }
}

// Mainmenu
#mainmenu                              { position: fixed; right: 20px; top: 20px; z-index: 11;
  .logo                                { display: block; opacity: .8; text-align: right; }
  .logo:hover                          { opacity: 1; }
  ul                                   { background-color: @color-background-dialog2; border: 1px solid @color-border-dialog; border-radius: 3px; .box-shadow(0 0 5px black, inset 0 1px 0 rgba(255, 255, 255, .2)); .gradient-v(@color-background-dialog, @color-background-dialog2); list-style: none; margin: 0; min-width: 240px; padding: 3px; position: relative; }
  li                                   { background-color: @color-background-list; border: 1px solid @color-border-list; border-radius: 3px; .gradient-v(@color-background-list, @color-background-list2); margin-top: 3px; overflow: hidden;
    a                                  { color: @color-list; display: block; font-size: 17px; font-weight: bold; padding: 10px 15px; text-shadow: 1px 1px 0 #FFFFFF; }
    &.menu-profile                     { background: none; border: 0; padding: 3px;
      .user                            { float: left; padding: 0; }
      img.square                       { border: 1px solid @color-border-dialog; margin-right: 6px; .size(39px); }
      a                                { color: @color-list-hover; display: inline; line-height: 17px; padding: 0; text-shadow: -1px -1px 0 rgba(0, 0, 0, .2); }
    }
  }

  li:hover                             { background-color: @color-background-list-hover2; .box-shadow(inset 0 1px 0 rgba(255, 255, 255, .2)); .gradient-v(@color-background-list-hover, @color-background-list-hover2);
    &.menu-profile                     { background: none; border: 0; .box-shadow(0 0 0 transparent); }
    a                                  { color: @color-list-hover; text-shadow: -1px -1px 0 rgba(0, 0, 0, .2); }
  }

  li:first-child                       { margin-top: 0; }
  li:last-child                        { .box-shadow(0 1px 0 rgba(255, 255, 255, .2)); }
  li:last-child:hover                  { .box-shadow(0 1px 0 rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .2)); }
}

h1                                     { display: none; }
#login                                 { background: fade(black, 70%); display: none; .gutters(0); position: fixed; z-index: 10;
  fieldset                             { background-color: @color-background-dialog2; border: 1px solid @color-border-dialog; border-radius: 3px; .box-shadow(0 0 5px black, inset 0 1px 0 rgba(255, 255, 255, .2)); .gradient-v(@color-background-dialog, @color-background-dialog2); left: 50%; margin: -50px 0 0 -120px; padding: 3px; position: absolute; top: 50%; }
  input.text                           { background-color: @color-background-list; border: 1px solid @color-border-list; display: block; font-size: 17px; font-weight: bold; padding: 10px 15px; width: 200px; }
  input.text:first-of-type             { border-bottom:0; border-top-left-radius: 3px; border-top-right-radius: 3px; }
  input.text:last-of-type              { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; .box-shadow(0 1px 0 rgba(255, 255, 255, .2)); margin-bottom: 6px; }
  a                                    { position: absolute; right: 5px; top: 5px; }
}

// Web app install dialog
#app-install-dialog                    { background-color: @color-background-dialog2; border: 1px solid @color-border-dialog; border-radius: 3px; .box-shadow(0 0 5px black, inset 0 1px 0 rgba(255, 255, 255, .2)); display: none; .gradient-v(@color-background-dialog, @color-background-dialog2); padding: 15px; position: fixed; text-align: center; width: 234px; z-index: 12;
  .close-button                        { color: rgba(0, 0, 0, .6); font-family: Tahoma, Arial, sans-serif; font-size: 20px; font-style: bold; font-weight: 700; line-height: 20px; position: absolute; right: 8px; text-shadow: 0 1px 0 rgba(255, 255, 255, .2); top: 6px; }
  #app-icon                            { background: transparent; border: 1px solid #0A3D55; border-radius: 10px; .box-shadow(0 0 4px rgba(0, 0, 0, .3)); margin-bottom: 6px; margin-top: 6px; }
  p                                    { font-size: 18px; line-height: 26px; text-shadow: -1px -1px 0 rgba(0, 0, 0, .5);
    .actions-icon                      { background: transparent url(/img/bashi/lite_ios_action_glyph.png) 0 0 no-repeat; .inline(); position: relative; .size(26px, 21px); top: 4px; }
  }
}
html.iphone,
html.ipod                              {
  #app-install-dialog                  { bottom: 10px; left: 50%; margin-left: -132px; }
}
html.ipad                              {
  #app-install-dialog                  { left: 10px; top: 10px; }
}

// Section
.section                               {
  .header                              {
    .actions                           { float: right; list-style: none; margin: 0 5px 0 0; padding: 0; }
    .actions li                        { margin-left: 5px; }
  }
}

// Images
.userinfo                              { color: @color-text; .gradient-v(rgba(0, 0, 0, .69), rgba(0, 0, 0, 0)); line-height: 15px; text-align: left; text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
  img                                  { background-position: center 25%; background-repeat: none; .background-size(cover); border-radius: 3px; margin: 5px; .size(30px); vertical-align: top; }
  span                                 { font-weight: bold; .inline(); padding-top: 5px; }
}
figure                                 { background: black @image-ajax no-repeat center center; display: block; display: inline-block; margin: 0; position: relative; text-align: center;
  &.video .mask                        { background: @image-video no-repeat center center; display: block; left: 0; position: absolute; .size(100%); top: 0; z-index: 1; }
  a                                    { display: block; }
  img,
  video                                { width: 100%; }
  #player                              { margin: 64px auto 0; max-height: 100%; max-width: 100%; }
  .video-mask                          { background: @image-video no-repeat center center; display: block; .size(100%); }
  .userinfo                            { position: absolute; width: 100%; }
  figcaption                           { bottom: 0; color: @color-text; .gradient-v(rgba(0, 0, 0, 0), rgba(0, 0, 0, .69)); left: 0; position: absolute; text-align: center; width: 100%; }
  figcaption a                         { display: inline; }
  &.video figcaption                   { position: relative; }
}

// Thumbs
img.square                             { background-position: center 25%; background-repeat: no-repeat; background-size: cover; .size(30px); }
#album-list a.square-thumb             { display: block; .size(20px);
  img                                  { background-position: center 25%; background-repeat: no-repeat; background-size: cover; .size(100%); }
}


// Widgets
.prevnext                              { text-align: center; }
.closed                                { display: none; }

// Masonry
.masonry                               {
  .masonry-brick                       { background-color: @color-background-photo; display: block; }
  figure.video,
  figure.image                         { margin: 0; width: 24.9%; }
}

#loader                                { background: rgba(0, 0, 0, .55) @image-ajax no-repeat center center; bottom: 0; display: none; left: 0; padding: 20px; position: fixed; right: 0; text-align: center; z-index: 3001; }

// Modal
.jqmOverlay                            { background: black; }
#modal                                 { background: @color-body; display: none; .gutters(5px); overflow: auto; overflow-x: hidden; position: fixed;
  .loader                              { background: @image-ajax no-repeat center center; .size(100%); }
}

// Index
#index-page,
#popular-page                          {
  .prevnext                            { display: none; }
}


// Picture
#profile                               {
  figure                               { width: 100%; }
  figure a                             { display: inline-block; }
}

#profile-image                         { background-color: @color-background-photo; text-align: center;
  .close                               { display: none; color: white; cursor: pointer; font-size: 46px; font-weight: 700; left: 0; line-height: 52px; .size(64px); position: absolute; text-shadow: 0 0 1px black; top: 0; z-index: 10; }
  .close:hover,
  .prevnext a:hover							{ background-color: @color-background-list-hover; }
  .prevnext                            { display: none; background: rgba(0, 0, 0, 0); font-weight: bold; line-height: 64px; left: 0; padding: 0; position: absolute; text-shadow: 0 0 1px black; top: 0; width: 100%; z-index: 10;
    .prev,
    .next                              { background: url(/img/bashi/icons_prevnext_lite.png) no-repeat; display: inline-block; .hide-text; .size(64px); vertical-align: top; }
    .prev                              { background-position: -30px 50%; margin-right: 10px; }
    .next                              { background-position: -80px 50%; margin-left: 10px; }
    .inactive                          { opacity: .5; }
  }
  figure                               { background: none;
    figcaption                         { background: rgba(0, 0, 0, .33); bottom: 6px; font-weight: bold; padding: 2px 0; text-shadow: 0 0 1px black; }
    &.video figcaption                 { bottom: inherit; }
    figcaption:empty                   { padding: 0; }
    figcaption a                       { display: inline-block; }
  }
  .like                                { position: absolute; right: 5px;
    a                                  { background-position: center center; background-repeat: no-repeat; .button; display: block; padding-left: 30px; }
    a.button-like                      { background-image: @icon-like-add; }
    a.button-unlike                    { background-image: @icon-like-delete; }
  }
  .image-actions                       { background-color: rgba(0, 0, 0,0); display: block; position: absolute; right: 0; z-index: 10; margin-top: -6px;
    li											{ float: left; }
    a                                  { display: block; .size(57px); text-align: center; }
    a .icon,
    .heart a                           { background: @icon-image-actions no-repeat center top; display: block; height: 36px; }
    a:hover										{ background-color: @color-background-list-hover; }
    .follow .icon                      { background-position: center 7px; }
    .album .icon                       { background-position: center -266px; }
    .heart a                           { height: 57px; }
    .heart .button-like                { background-position: center -196px; }
    .heart .button-unlike              { background-position: center -128px; }
    a .label                           { color: white; text-shadow: 0 0 1px black; }
  }
  .image-actions.secondary             { background: none; left: auto; right: 0; top: 0; }
  .userinfo                            { background: none; height: 45px; padding: 3px 5px; }

  .album			                        { display: none; .size(64px); text-align: center; position: absolute; top: 0; right: 0; z-index: 10; color: white; }
  .album .icon									{ display: block; background: @icon-image-actions no-repeat center -256px; height: 60px; }
  .album .label								{ display: none; }
  .album:hover									{ background-color: @color-background-list-hover; }
}
.mobile #profile-image,
#profile-image:hover {
  .close,
  .album,
  .prevnext										{ display: block;  }
  .prevnext										{ background: rgba(0, 0, 0, .33); }
}

.mobile #profile-image,
.mobile #profile-image:hover {
  .prevnext										{ background: rgba(0, 0, 0, 0); }
  .close,
  .album,
  .prevnext										{ display: block; }
}

// Join teaser
#jointeaser                            { padding: 10px 10px 20px;}

.comments                              { background: @color-background-comments;
  .center                              { padding: 10px; }
  .comment_table                       { color: @color-comment; padding: 2px 0;
    .stamp                             { display: inline-block; }
    .sender                            { display: inline; padding: 0 0.5em;
      .nick0,
      .nick1,
      .nick0 a,
      .nick1 a,
      .nick2 a                         { font-weight: bold; }
    }
    .comment                           { display: inline; }
    .private                           { color: @color-private; }
    .owner                             { color: @color-owner; }
    .stamp,
    .sender                            { white-space: nowrap; }
  }
  form                                 { margin: 10px 0; }
  fieldset                             { float: left; padding: 0; }
  textarea                             { .box-sizing(border-box); margin: 0; min-width: 100px; padding: 4px; .size(100%, 3em); }
  .toolbar,
  label.enter                          { display: none; }
  label.checkbox,
  .private-comment-reply               { color: @color-comment; margin-left: 20px; }
  button                               { background-color: @color-background-list-hover2; border: 1px solid @color-border-list; border-radius: 3px; .box-shadow(inset 0 1px 0 rgba(255, 255, 255, .2)); color: @color-list-hover; cursor: pointer; font-size: 17px; font-weight: bold; .gradient-v(@color-background-list-hover, @color-background-list-hover2); margin: 0; padding: 3px 8px; text-shadow: -1px -1px 0 rgba(0, 0, 0, .2); }
}

// Albums
#album-list                            {
  ul                                   { list-style: none; overflow: hidden; padding: 0; }
  li                                   { float: left; margin: 5px; .text-overflow; white-space: normal; width: 150px; }
  a.square-thumb                       { float: left; margin-right: 5px; }
}
#album-album                           {
  .prevnext                            { display: none; }
}


// Responsive
html.lt-1024                           {
  .masonry                             {
    figure.video,
    figure.image                       { width: 33.2%; }
  }
}
html.lt-640                            {
  .logo img                            { width: 81px; }
  .masonry                             {
    figure.video,
    figure.image                       { width: 49.9%; }
  }
}

@media all and (min-width:768px)       {
  #modal                               { .gutters(45px); }
}