
//Variables

// Grayscale
@black-10:                 darken(#fff, 10%);
@black-20:                 darken(#fff, 20%);
@black-30:                 darken(#fff, 30%);
@black-40:                 darken(#fff, 40%);
@black-50:                 darken(#fff, 50%);
@black-60:                 darken(#fff, 60%);
@black-70:                 darken(#fff, 70%);
@black-80:                 darken(#fff, 80%);
@black-90:                 darken(#fff, 90%);

@brand-primary:           #428bca;
@brand-success:           #5cb85c;
@brand-warning:           #f0ad4e;
@brand-danger:            #d9534f;
@brand-info:              #5bc0de;

@apple-violet: #5856d6;
@apple-blue: #007aff;
@apple-lightblue: #34aadc;
@apple-cerulean: #5ac8fa;
@apple-green: #4cd964;
@apple-rose: #ff2d55;
@apple-red: #ff3b30;
@apple-orange: #ff9500;
@apple-yellow: #ffcc00;
@apple-gray: #8e8e93;


// @font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-monospace: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;
@font-family-serif: 'Georgia', 'Times New Roman', Times, serif;
@font-family-sans-serif: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Georgia, Verdana, sans-serif;
@font-family-bs-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-bs-serif:  Georgia, "Times New Roman", Times, serif;
@font-family-frutiger: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-palatino: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
@font-family-times: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
@font-family-georgia: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
@font-family-verdana: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
@font-family-trebuchet: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
@font-family-geometric: "Century Gothic", "Tw Cen MT", Futura, "URW Gothic L", Arial, sans-serif;
@font-family-typewriter: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;


// Breakpoints

@sm: 750px;
@md: 970px;
@lg: 1170px;


.text-color(@col) {
	p, h1, h2, h3, h4, h5, h6, li, dl, dt, a, blockquote, pre{
		color: @col;
  }

}

// Quick and dirty trick to see all elements on the page

.edit() {
	* {
		background: #eee;
		background: rgba(0,0,0, 5%);
	}
}

// Center an element
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Shortcut for sizing
.size(@width, @height) {
  width: @width;
  height: @height;
}

// Makes a square
.square(@size) {
  .size(@size, @size);
}

// Hides element from screen

.hidden {
	position:absolute;
	top:auto;
	left:-999em;
	right:auto;
}

.clearfix() {
	&:before,
	&:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	}
}
.bs-shadow(){
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0,0,0, 0.4);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0,0,0, 0.4);
	
}
.delicate-shadow(){
	box-shadow: 0px 0px 9px rgba(0,0,0,0.10);
  -webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.10);
}
.curl-shadow(){
   &:before,
   &:after {
    content: '';
    z-index: -1;
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 70%;
    max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
    max-height: 100px;
    height: 55%;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    -ms-transform: skew(-15deg) rotate(-6deg);
    -o-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg); }


    &:after {
      left: auto;
      right: 10px;
      -webkit-transform: skew(15deg) rotate(6deg);
      -moz-transform: skew(15deg) rotate(6deg);
      -ms-transform: skew(15deg) rotate(6deg);
      -o-transform: skew(15deg) rotate(6deg);
      transform: skew(15deg) rotate(6deg); }

    
  }

  .emboss-light(){
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  }
  .emboss-heavy(){
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 
    inset 0 2px 3px rgba(255,255,255,0.3),
    inset 0 -2px 3px rgba(0,0,0,0.3),
    0 1px 1px rgba(255,255,255,0.9);
  }

  .gradient-light-radial(){
    background-image: radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
    background-image: -webkit-radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
  }

  .gradient-light-linear(){
    background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -webkit-linear-gradient(rgba(255,255,255,5), rgba(255,255,255,0));
  }

  .btn-metro(@color){
    display: inline-block;
    padding: 10px;
    margin: 10px;
    background: @color;
    border: 0 !important;
    /* Font styles */
    color: white;
    font-weight: bold;
    text-decoration: none;
    .transition(background-color, 0.1s, ease-in);
    &:hover {
      background-color: (tint(@color, 20%));
    }
  }

  .btn-modern(@color){
    display: inline-block;
    margin: 10px;
    padding: 8px 15px;
    background: @color;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    box-shadow: 
    inset 0 1px 0 rgba(255,255,255,0.5), 
    0 2px 2px rgba(0,0,0,0.3), 
    0 0 4px 1px rgba(0,0,0,0.2); 

    /* Font styles */
    text-decoration: none;
    text-shadow: 0 1px rgba(255,255,255,0.7);
    &:hover {
      background: saturate(tint(@color, 20%), 90%);
    }
    &:active {
      border: 0 !important;
    }
  }
  .btn-sole() {
	// Use with btn-modern
  position: relative;
  z-index: 2;

  &:after {
    background-color: green;
    content: "";
    z-index: -1;
    position: absolute;
    border-radius: 6px;
    box-shadow: 
    inset 0 1px 0 rgba(0,0,0,0.1),
    inset 0 -1px 0 rgba(255,255,255,0.7);
    top: -6px;
    bottom: -6px;
    right: -6px;
    left: -6px;
    background: -webkit-linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
    background: -moz-linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
    background: -o-linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
    background: -ms-linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
  }
}