/* --------------------------------------------------------------------------------
 * Elements - Rails Starting Base
 *
 * buttons.css.scss
 *
 * Buttons used in all the forms and other places will be defined here.
 *
 * @author : Jais Cheema 
 *
-----------------------------------------------------------------------------------*/

/** Buttons Mixins and function **/

@function ie-gradient($startcolor,$endcolor) {
	@return "progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$startcolor}, endColorstr=#{$endcolor})";
}

@mixin button($color1,$color2,$color3,$color4,$color5,$color6,$text_size: 16px,$padding1: 7px,$padding2: 27px) {

	-moz-box-shadow:inset 0px 1px 0px 0px $color5;
	-webkit-box-shadow:inset 0px 1px 0px 0px $color5;
	box-shadow:inset 0px 1px 0px 0px $color5;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, $color1), color-stop(1, $color2) );
	background:-moz-linear-gradient( center top, $color1 5%, $color2 100% );
	filter:ie-gradient($color1,$color2);
	background-color:$color1;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid $color4;
	display:inline-block;
	color:$color3;
	font-family:Trebuchet MS;
	font-size:$text_size;
	font-weight:bold;
	padding:$padding1 $padding2;
	text-decoration:none;
	text-shadow:1px 1px 3px $color6;

	&:hover {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, $color2), color-stop(1, $color1) );
		background:-moz-linear-gradient( center top, $color2 5%, $color1 100% );
		filter:ie-gradient($color2,$color1);
		background-color:$color2;
	}

	&:active {
		position:relative;
		top:1px;
	}
}

@mixin big_button($color1,$color2,$color3,$color4,$color5,$color6) {
	&.big {
		@include button($color1,$color2,$color3,$color4,$color5,$color6,18px,10px,43px);	
	}
}

@mixin small_button($color1,$color2,$color3,$color4,$color5,$color6) {
	&.small {
		@include button($color1,$color2,$color3,$color4,$color5,$color6,14px,3px,11px);	
	}
}

@mixin all_types($color1,$color2,$color3,$color4,$color5,$color6) {
	@include button($color1,$color2,$color3,$color4,$color5,$color6);	
	@include big_button($color1,$color2,$color3,$color4,$color5,$color6);	
	@include small_button($color1,$color2,$color3,$color4,$color5,$color6);	
}


/** Rounded Boxes to be used on main page */

.rounded_box {
	
	a {
		color:white;
		text-decoration:none;
		display:block;
		height:2.25em;
	}

	text-align:center;
	font-size: 40px;
	font-family: KlavikaBold;
	color: white;
	padding-top: 0.75em;
	width: 6em;
	height: 2.25em;
	-moz-border-radius: 1em;
	border-radius: 0.5em;
	margin: 0px 20px;
	display: inline-block;
}

/** Actual Button CSS */

.button {
	
	@include all_types(#ededed,#dfdfdf,#777777,#dcdcdc,#ffffff,#ffffff);
		
	&.submit {
		@include all_types(#ededed,#dfdfdf,#777777,#dcdcdc,#ffffff,#ffffff);
	}

	&.cancel {
		
	}

	&.blue {
		@include all_types(#3d93f6,#1e62d0,#ffffff,#3381ed,#97c4fe,#1571cd);
	}

	&.green {
		
	}

	&.orange {
		
	}

	&.red {
		
	}
}