//
// ANDROID THEME 
//

@android-orange: #e89c00;
@android-light-orange: #ffdb66;
@android-light-orange-2: #fdd824;
@android-dark-grey: #636363;

@button-color: #f4f4f4;
@border-color: #6b6d6b;
@background-color:#181818;

@dialog-background-color: #424242;

@highlighted-text-color: @android-orange;

//
// ANDROID CLICKABLE STYLE
//

.clickable {
  color: #222222;

  // Less "darken method" helps to make use of gradient-buttons easier. 
  // It takes button-color and darkens it. 
  // No second gradient color is needed.
  #gradient > .vertical(@button-color, darken(@button-color, 20%));
  border: 1px solid #555555;
}

.clickable-active {
  color:black;
  #gradient > .vertical-three(@android-light-orange, @android-orange, @android-light-orange-2);
}

//
// GLOBAL
//

.fontNormal {
  color: #ffffff;
}

.page {
  background: @background-color;
}

.root {
  background: @background-color;
  color: #ffffff;
}

a, a:active, a:visited {
  color: @android-orange;
}

a:hover {
  color: @android-orange;
}

h1 {
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
}

h2 {
  text-shadow: rgba(255,255,255,.2) 0 1px 1px;
  color: #bdbebd;
  background-color: #212021;
  border-bottom: 1px solid #313431;
}

//
// BUTTON
//

.button {
  .clickable();
}

.button.active{
  .clickable-active();
}

.content.group > .button {
  margin:5px;
}

//
// LIST
//

li:first-child, li:first-child a {
  .border-radius-top(0px);
}


li:last-child, li:last-child a {
  .border-radius-bottom(0px);
}

ul {
  background-color:@background-color;
  //border:1px solid @border-color;
  .border-radius(0);
}

ul li {
  color: #ffffff;
  border-top: 1px #313431 solid;
}

ul li.arrow {
  background: url("../icon/android/arrow.png") no-repeat right center;
}

ul li.active.arrow, ul li.selected.arrow {
  background-image: url("../icon/android/arrow_pressed.png"), -webkit-gradient(linear, center top, center bottom, color-stop(0%,@android-light-orange), color-stop(50%,@android-orange),color-stop(100%,@android-light-orange-2));
  background-image: url("../icon/android/arrow_pressed.png"), -webkit-linear-gradient(top, @android-light-orange, @android-orange 50%, @android-light-orange-2);
  background-image: url("../icon/android/arrow_pressed.png"), -moz-linear-gradient(top, @android-light-orange, @android-orange 50%, @android-light-orange-2);
  background-image: url("../icon/android/arrow_pressed.png"), linear-gradient(to bottom, @android-light-orange, @android-orange 50%, @android-light-orange-2);
  background-position: right center;
  background-repeat: no-repeat;
}

ul li.active, ul li.selected{
  .clickable-active();
}

ul li .subtitle {
  color: #949a94;
}

ul li.active .subtitle {
  color: #313429;
}

//
// GROUP
//

.group:not(.content){
  margin:5px;
}

.bordered {
  
}

//
// FORM 
//

input[type="text"]:not(.selectbox), input[type="number"], input[type="password"], textarea {
  .border-radius(0);
}

input[type="text"]:not(.selectbox):not(.invalid), input[type="number"]:not(.invalid), input[type="password"]:not(.invalid), textarea:not(.invalid) {
  border: 0px solid #242424;
}

.formRowContent {
  @ul-padding:5px;
  padding: @ul-padding @ul-padding*2 @ul-padding @ul-padding*2;
}

//
// SCROLL CONTAINER
//

@scShadowOffset:10px;
@scShadowColor:rgba(0,0,0,0.3);
@scShadowColorLight:rgba(0,0,0,0.2);
@scGradientVerticalOffset:15px;

.scrollContainer {
  background-color:white;

  .box-inset-multi-shadow (
      0px @scShadowOffset @scShadowOffset -@scShadowOffset @scShadowColorLight, 
      0px -@scShadowOffset @scShadowOffset -@scShadowOffset @scShadowColorLight
  );
}

.scrollContainer textarea {
  padding:2px;
  border:none;
  background:none;
}

.scrollContainer:before {
  position:absolute;
  top:0px;
  z-index:500;

  .box-inset-multi-shadow(
      0px @scShadowOffset*1.4 @scShadowOffset -@scShadowOffset @scShadowColor, 
      0px 0px @scShadowOffset -@scShadowOffset @scShadowColor
  );

  content:'';
  width:100%;
  height:0px;
}

.scrollContainer.scrollableTop:before {
  height:30px;
}

.scrollContainer:after {
  position:absolute;
  bottom:0px;
  z-index:500;

  .box-inset-multi-shadow(
      0px 0px @scShadowOffset -@scShadowOffset @scShadowColor, 
      0px -@scShadowOffset*1.4 @scShadowOffset -@scShadowOffset @scShadowColor
  );

  content:'';
  width:100%;
  height:0px;
}

.scrollContainer.scrollableBottom:after {
  height:30px;
}

//
// FORM RENDERING
//

.formSeparationRow {
  background-color: @border-color;
}

.formRowGroupTitle {
  text-shadow: rgba(255,255,255,.2) 0 1px 1px;
  color: #bdbebd;
  background-color: #212021;
  font-size: 0.8em;
  padding: 0px 10px 0px 10px;
}

.formRowGroupFirstItem {
  padding:0px;
  height:0px;
}

.formRowGroupLastItem {
  height:0px;
  border-top:none;
  padding:0px;
}

//
// SLIDER 
//

.slider {
  /* Background left and right from slider, position set in JavaScript */
  background: -webkit-gradient(linear,left top,left bottom,from(#9EA09D), color-stop(0.85, #5B5D5A), color-stop(0.95, #5F615E), to(#757774)) 0px 0px no-repeat, -webkit-gradient(linear,left top,left bottom,from(#ecd343), color-stop(0.85, #fab907), color-stop(0.95, #f0b705), to(#f8ce2e));
  background: -webkit-linear-gradient(top, #9EA09D, #5B5D5A 85%, #5F615E 95%, #757774) 0px 0px no-repeat, -webkit-linear-gradient(top, #ecd343, #fab907 85%,#f0b705 95%, #f8ce2e) 0px 0px no-repeat;
  background: -moz-linear-gradient(top, #9EA09D, #5B5D5A 85%, #5F615E 95%, #757774) 0px 0px no-repeat, -moz-linear-gradient(top, #ecd343, #fab907 85%,#f0b705 95%, #f8ce2e) 0px 0px no-repeat;
  background: linear-gradient(to bottom, #9EA09D, #5B5D5A 85%, #5F615E 95%, #757774) 0px 0px no-repeat, linear-gradient(to bottom, #ecd343, #fab907 85%,#f0b705 95%, #f8ce2e) 0px 0px no-repeat;
}

.slider > div {
  #gradient > .vertical(@button-color, #c4c4c4);
  .box-shadow(0 0 2px 1px #4A4A4A);
  
  // OVERRIDDEN
  .border-radius(0.4em);
  width:50px;
}

//
// TABBAR   
//

.tabBar {
  border-bottom: 3px solid @android-orange;
}

.tabButton {
  color:white;

  background: @android-dark-grey;
  background: -moz-linear-gradient(top,  @android-dark-grey 83%, #444444 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(83%,@android-dark-grey), color-stop(100%,#444444));
  background: -webkit-linear-gradient(top,  @android-dark-grey 83%,#444444 100%);
  background: linear-gradient(top,  @android-dark-grey 83%,#444444 100%);

  border: 1px solid lighten(@android-dark-grey, 10%);
}


.tabButton.active, .tabButton.selected {
  background: #ffffff;
  background: -moz-linear-gradient(top,  #ffffff 2%, @android-light-orange 4%, @android-light-orange-2 49%, @android-orange 53%, @android-orange 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#ffffff), color-stop(4%,@android-light-orange), color-stop(49%,@android-light-orange-2), color-stop(53%,@android-orange), color-stop(100%,@android-orange));
  background: -webkit-linear-gradient(top,  #ffffff 2%,@android-light-orange 4%,@android-light-orange-2 49%,@android-orange 53%,@android-orange 100%);
  background: linear-gradient(top,  #ffffff 2%,@android-light-orange 4%,@android-light-orange-2 49%,@android-orange 53%,@android-orange 100%);

  color:black;
  border: 1px solid @android-orange;
}

//
// NAVIGATIONBAR 
//

.navigationbar {
  #gradient > .vertical(#9a9a9a, #7c7e7c);
  border-bottom: 1px solid #2d3642;
}

.navigationbar-button, .navigationbar-backbutton {
  .clickable();
}

.navigationbar-button.active, .navigationbar-backbutton.active {
  .clickable-active();
}

//
// SCROLLBAR 
//

.scrollbarV > div {
  #gradient > .vertical(#b5b6b5, #949294);
  border: 1px solid #000;
}

//
// CHECKBOX
//


input[type="checkbox"] + label {
  position:relative;
  .clickable();

  box-sizing:border-box;

  .border-radius(.3em);
}

.checkbox-label:before {
  #gradient > .vertical(darken(@button-color, 60%),darken(@button-color, 40%));
  .border-radius(.1em);
}


// The tick of the checkbox.
input[type="checkbox"] + label:after {
    @checkbox-check-color:@android-orange;

    opacity: 0;
    content: '';
    position: absolute;
    width: 11px;
    height: 6px;
    background: 
    transparent;
    top: 8px;
    left: 8px;
    border: 3.5px solid lighten(@checkbox-check-color,10%);
    border-top: 0;
    border-right: 0;
    .transform(rotate(-45deg));

    .box-shadow(-1px 1px 1px 0px @checkbox-check-color);
}

input[type="checkbox"]:checked + label:after {
    opacity: 1;
}


//
// RADIOBUTTON
//

// Border style
input[type=radio] + label {
    background: #fcfff4;
    #gradient > .vertical-three(#fcfff4, #dfe5d7, #b3bead, 40%);
    
    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);

    box-sizing:border-box;
}


// Inner Area
input[type=radio]+ label:before {
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    
    #gradient > .vertical(darken(@button-color, 60%),darken(@button-color, 40%));

}


// Color dot
input[type=radio] + label:after {
    background: @android-orange;

    @dot-color: @android-orange;
    @dot-dark-color: darken(@dot-color, 10%);

    background: -webkit-linear-gradient(top, @dot-color 0%, @dot-dark-color 100%);
    background: -moz-linear-gradient(top, @dot-color 0%, @dot-dark-color 100%);
    background: linear-gradient(top, @dot-color 0%, @dot-dark-color 100%);

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}


//
// DIALOG 
//

.popup {
  background-color: @dialog-background-color;
  border: 2px solid #ffffff;
}

.dialog { 
  background-color: @dialog-background-color;
  border: 2px solid #ffffff;
}

.arrow() {
  position:absolute;
  content:'';
}

@arrow-size: 12px;

// ARROW TOP

.popupAnchorPointerTop:before
{
  .arrow();
  #triangle > .up(@arrow-size+2, #ffffff);
}

.popupAnchorPointerTop:after
{
  .arrow();
  #triangle > .up(@arrow-size, @dialog-background-color);
}

// ARROW BOTTOM

.popupAnchorPointerBottom:before
{
  .arrow();
  #triangle > .down(@arrow-size+2, #ffffff);
}

.popupAnchorPointerBottom:after
{
  .arrow();
  #triangle > .down(@arrow-size, @dialog-background-color);
}

// ARROW LEFT

.popupAnchorPointerLeft:before
{
  .arrow();
  #triangle > .left(@arrow-size+2, #ffffff);
}

.popupAnchorPointerLeft:after
{
  .arrow();
  #triangle > .left(@arrow-size, @dialog-background-color);
}

// ARROW RIGHT

.popupAnchorPointerRight:before
{
  .arrow();
  #triangle > .right(@arrow-size+2, #ffffff);
}

.popupAnchorPointerRight:after
{
  .arrow();
  #triangle > .right(@arrow-size, @dialog-background-color);
}


//
// TOOLBAR
// 

.toolbar-button {
  .clickable();
}

.toolbar-button.active {
  .clickable-active();
}

//
// SELECTBOX
//

.selectbox {
  .clickable();
  background-color:transparent;
}

.selectbox.active {
  #gradient > .vertical-three(@android-light-orange, @android-orange, @android-light-orange-2);
  color:#000000;
}

.selectbox-selected {
  .clickable-active();
}

.selectbox-selected.active > div > .list-itemlabel {
  color:black;
}

.selectbox-selected > div > .list-itemlabel:after {
  border: 0px solid transparent;
}

//
// MENU
//

.item-selected {
  .clickable-active();
}

.menu ul {
  border: 1px solid @border-color;
}

//
// MASTER DETAIL
// 

@master-popup-border-color:white;

.master-popup * {
  background: none;
}

.master-detail-master.attached {
  border-right: 1px solid @border-color;
}

.master-popup {
  //#gradient > .vertical-three(@ios-button-gradient-stop-1, @ios-button-gradient-stop-3,@ios-button-gradient-stop-3, 20px);
  border:2px solid @master-popup-border-color;
}

.master-popup .page {
  border: 1px solid @border-color;
}

.master-popup .layout-card {
  background-color: @background-color;
}

// 
// MASTER PARENT CONTAINER ARROWS
//
.master-popup.popupAnchorPointerTop:before  {
  @arrow-color:@dialog-background-color;
  
  border-right:none;
  border-bottom:none;

  #gradient > .diagonal(@arrow-color, transparent, 50.9%, 51%);

  top:-10px;
}


//
// CAROUSEL
//

@pagination-label-size:8px;

.carousel-pagination-label {
  .box-shadow(0px 0px 2px rgba(0,0,0,0.5));
  opacity:0.4;
  background-color:white;

  width:@pagination-label-size;
  height:@pagination-label-size;
  text-align:center;
  line-height:@pagination-label-size;
  .border-radius(15px);

  font-size:1px;
  font-color:transparent;
}

.carousel-pagination-label.active {
  opacity:1.0;
}

.carousel-pagination {
  top: -(@pagination-label-size+15px);
}

//
// PICKER
//


.picker-container {
  background-color:darken(@android-dark-grey,20%);
  .box-shadow(0px 1px 1px rgba(255, 255, 255, 0.5));
}

.picker-label {
  color:white;
  font-weight:bold;
}

.picker-slot:before, .picker-slot:after {
  background-color: @border-color;
}

// Spinning Wheel Overlay Gradient
.picker-container:after {
  #gradient > .vertical-four(rgba(0,0,0,0.8),rgba(0, 0, 0, 0),rgba(0, 0, 0, 0),rgba(0,0,0,0.8),33%,66%);
}

// Selected Area Overlay
.picker-container:before {
  top:33px;
  height:28px;

  .box-shadow(0px 2px 2px rgba(0, 0, 0, 0.5));

  border-top:1px solid @android-orange;
  border-bottom:1px solid @android-orange;
}