gistfile1.scss

@import "base";
// =======Sprites
// .whatever{
//     @include sized-sprite($icons, badge_hit);
// 	@include retina{
// 		@include sized-sprite($icons, badge_new);
// 	}
// }
// =======animation setting example (set it anywehere)
// @include keyframes(rotate) {
//    from {
//       @include rotate(0);
//    }
//    to {
//       @include rotate(360);
//    }
// }
// animation usage example
// body:hover{
// 	@include animation(rotate 200s linear infinite);
// }
// ========gradient example
// body{
// 	@include background-image(linear-gradient(#232323, #5c5c5c));
// }



*{margin:0;padding:0;-webkit-text-size-adjust: none; }
body{
	font: {
		family: Arial,sans-serif;
		weight: normal;
		size: 12px;
	}
	line-height:1.4;
	background: #c2dde4 url(../img/bg.png) repeat 0 0;
	min-width: 962px;
}
// resets
a img,fieldset{
	border:none;
	}
a{
	color:#3383ae;
}
// common styles, these could be attached to any block with "@extend %wyswyg;"
%wyswyg{
	p{
		margin-bottom: 1em;
	}
	ul,ol{
		margin: 1em 2em;
		list-style: disc;
	}
	ol{
		list-style: decimal;
	}
	blockquote{
		margin: 1em 2em;
	}
	table{
		border-spacing: 0;
		border-collapse: collapse;
		width: 100%;
		td{
			border: 1px solid #ccc;
			padding: 5px;
		}
	}
}
%site{
	width: 940px;
	margin: auto;
}
%button{
	display: inline-block;
	font-size: 18px;
	color: #191513;
	font-weight: bold;
	text-decoration: none;
	border-radius: 6px;
	border: 1px solid #e7d700;
	border-bottom: 1px solid #aaa300;
	box-shadow:inset 0 -1px 0 rgba(#000,.1);
	background-color: #fff800;
	@include background-image(linear-gradient(#fff800, #ffe600));
	padding: 0 18px;
	height: 32px;
	line-height: 31px;
	z-index: 10;
	@include transition(all,.3s,linear);
	cursor: pointer;
	&:hover{
		background-color: #fffbad;
		@include background-image(linear-gradient(#fffbad, #fff75f));
	}
	&:active{
		background-color: #ffd300;
		@include background-image(linear-gradient(#ffd300, #fff300));
	}
}
%bigbutton{
	@extend %button;
	font-size: 24px;
	height: 56px;
	line-height: 56px;
	padding: 0 47px;
}
%addtocart{
	@extend %bigbutton;
	text-align: center;
	width: 92px;
	padding: 0;
	line-height: 1;
	padding-top: 6px;
	height: 56px - 6px;
	span{
		display: block;
		font-size: 14px;
	}
	i{
		@include sized-sprite($icons, addtocart);
		display: inline-block;
	}
}
%h2{
	font-size: 21px;
	font-weight: bold;
	margin: 10px 0 15px 0;
	color: #000;
}
.h2{@extend %h2;}
%discount{
	position: absolute;
	top: -4px;
	right: -5px;
	@include sized-sprite($icons, discount);
	color: #000;
	font-size: 1px;
	z-index: 50;
	span{
		display: block;
		height: 35px;
		line-height: 35px;
		width: 130px;
		color: #fff;
		text-align: center;
		@include rotate(45);
		@include transform-origin(0,0);
		position: absolute;
		left: 27px;
		top: -27px;
		font-size: 27px;
		padding-top: 2px;
	}
}
%next{
	position: absolute;
	display: none;
	top: 50%;
	margin-top: -15px;
	@include sized-sprite($icons, offer_next);
	right: -6px;
	z-index: 50;
	cursor: pointer;
}
%prev{
	@extend %next;
	left: -6px;
	right: auto;
	@include sized-sprite($icons, offer_prev);
}
.content{
	position: relative;
	background: #fff;
	box-shadow:-4px 0 4px -4px rgba(#000,0.3),4px 0 4px -4px rgba(#000,0.3);
	padding: 14px 18px 30px 18px;
	&:before{
		content:'';
		@include sized-sprite($icons, contentshadow);
		position: absolute;
		top: -1px;
		left: -15px;
		display: inline-block;
	}
}