@charset "utf-8";

@white:             #fff;
@background-color: darken(@white, 10%);
@radius: 5px;
@col_width: 33;
@col_unit: 1%;


.boxShadow(@rule1, @rule2){
  -webkit-box-shadow: @rule1, @rule2;
  -moz-box-shadow: @rule1, @rule2;
  box-shadow: @rule1, @rule2; 
}

.boxShadow(@rule){
	-webkit-box-shadow: @rule;
	-moz-box-shadow: @rule;
	box-shadow: @rule; 
}

.border-radius(@radius: 4px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}



.rect(){
	border: 1px solid darken(@background-color, 25%);
	//background-color: darken(@background-color, 10%);
	.boxShadow(inset 0px 2px 2px darken(@background-color, 5%), 0px 1px 1px @white);
}
.frame(){
	.border-radius(@radius);
	.rect(); 
}

.err(){ 
  color: red; 
  border-color: red; 
}

.calculator-tipar-offset
{ 
  padding : 0;
  margin: 0;

  input, label
  {
    display: block; float: : left;
    margin: 0em;
  }

  label
  {
    margin: 1em 0em 0em 0em;
    clear: both;
  }

  legend
  {
  	margin: 1em;
  	font-weight: bold;
  	font-size: 1.3em;
  }

  input, select, button 
  {
	  .rect(); 
	  padding: 0.5em;

	  &.error {color: red; border-color: red;}
  }

  select {width: 100%}

  button 
  {
    margin-top: 1em; font-weight: bold;
    &:hover {background-color: @white;}
  }

  p, ul
  {
  	margin: 0;

  	&.info {color: blue;}
  	&.error {color: red;}
  }

  label {font-weight: bold;}

  table 
  {
    width: 100%;
    font-size: 1.2em; clear: both; margin: 1em 0em;
    .boxShadow(2px 2px 10px 0px rgba(0,0,0,0.2));
    background-color: lighten(@background-color, 5%);
    .border-radius(@radius);

    tr {cursor: pointer; &:hover {background-color: @background-color}}
    td {padding: 0.5em;}
  }

}

.calculator-tipar-offset-col1, .calculator-tipar-offset-col2, .calculator-tipar-offset-col3 {float: left; margin-top: 5em;}
.calculator-tipar-offset-col1, 
.calculator-tipar-offset-col2,
.calculator-tipar-offset-col3,
 {width: @col_width * @col_unit}
.calculator-tipar-offset  a {text-decoration: none; font-size: 1.2em;}
.calculator-tipar-offset ul.convert-row 
{

  li.unit{
    float: left;
    margin-bottom: 0.5em; 
    input, a {margin: 0em 0.15em;} 
    input, div.actions {float: left;}

    &.error
    { 
     .err()
    }
  }
  
} 

.fixed { position: fixed;}
.col-all {width: @col_width * @col_unit * 3}
.fixed.col-all
{
  background-color: lighten(@background-color, 7%);
  padding: 0em;
  margin: 0;
  .frame();
  h3{float: left;}
}

#save-configuration 
  {
    cursor: pointer;
    background-color: @background-color;
    font-size: 1.5em;
    padding: 0.5em 1em;
    float: left;
    display: block;
    margin-left: @col_width * @col_unit;
    &:hover{background-color: @white;}

    &.loading {background: transparent left center no-repeat url(../img/ajax-loader.gif)}
    &.error { .err() }
  }