.pictocon{
	font: 22px Pictos, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
.pictocon.largest{
	font-size:42px;
}
.pictocon.larger{
	font-size:32px;
}
.pictocon.bigger{
	font-size:30px;
}
.pictocon.big{
	font-size:25px;
}
.pictocon.small{
	font-size:15px;
}
.pictocon.smaller{
	font-size:12px;
}

@font-face {
	font-family: 'Pictos';
	src: url('pictos-web.eot');
	src: local('☺'), url('pictos-web.woff') format('woff'), url('pictos-web.ttf') format('truetype'), url('pictos-web.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

.greenGradient 			{	
		border-top:solid 2px #c9dc3c;
		border-bottom: solid 2px #5e9615;
		background-image: -webkit-gradient(    linear,    left bottom,    left top,    color-stop(1, rgb(179,205,49)),    color-stop(0, rgb(122,169,28)));
		background-image: -moz-linear-gradient(    center bottom,    rgb(179,205,49) 100%,    rgb(122,169,28) 0%);		
}

.greenGradient:hover	{	
		border-top:solid 2px #c9dc3c;
		border-bottom: solid 2px #5e9615;
		background-image: -webkit-gradient(    linear,    left bottom,    left top,    color-stop(0, rgb(179,205,49)),    color-stop(1, rgb(122,169,28)));
		background-image: -moz-linear-gradient(    center bottom,    rgb(179,205,49) 0%,    rgb(122,169,28) 100%);		
}

.yellowGradient 		{		
		border-top:solid 2px #f3da00;
		border-bottom: solid 2px #dc9100;
		background-image: -webkit-gradient(    linear,    left bottom,    left top,    color-stop(1, rgb(239,203,0)),    color-stop(0, rgb(227,163,0)));
		background-image: -moz-linear-gradient(    center bottom,    rgb(239,203,0) 100%,    rgb(227,163,0) 0%);		
}

.yellowGradient:hover	{		
		border-top:solid 2px #f3da00;
		border-bottom: solid 2px #dc9100;
		background-image: -webkit-gradient(    linear,    left bottom,    left top,    color-stop(0, rgb(239,203,0)),    color-stop(1, rgb(227,163,0)));
		background-image: -moz-linear-gradient(    center bottom,    rgb(239,203,0) 0%,    rgb(227,163,0) 100%);		
}

.redGradient 			{
		border-top:solid 2px #eead70;
		border-bottom: solid 2px #cd3b26;
		background-image: -webkit-gradient(    linear,    left bottom,    left top,    color-stop(1, rgb(231,140,91)),    color-stop(0, rgb(214,82,53)));
		background-image: -moz-linear-gradient(    center bottom,    rgb(231,140,91) 100%,    rgb(214,82,53) 0%);		
}

.redGradient:hover 			{
		border-top:solid 2px #eead70;
		border-bottom: solid 2px #cd3b26;
		background-image: -webkit-gradient(    linear,    left bottom,    left top,    color-stop(0, rgb(231,140,91)),    color-stop(1, rgb(214,82,53)));
		background-image: -moz-linear-gradient(    center bottom,    rgb(231,140,91) 0%,    rgb(214,82,53) 100%);		
}

.blueGradient 			{
		border-top:solid 2px #74d9d6;
		border-bottom: solid 2px #268b81;
		background-image: -webkit-gradient(    linear,    left bottom,    left top,    color-stop(1, rgb(94,200,196)),    color-stop(0, rgb(55,161,152)));
		background-image: -moz-linear-gradient(    center bottom,    rgb(94,200,196) 100%,    rgb(55,161,152) 0%);		
}

.blueGradient:hover		{
		border-top:solid 2px #74d9d6;
		border-bottom: solid 2px #268b81;
		background-image: -webkit-gradient(    linear,    left bottom,    left top,    color-stop(0, rgb(94,200,196)),    color-stop(1, rgb(55,161,152)));
		background-image: -moz-linear-gradient(    center bottom,    rgb(94,200,196) 0%,    rgb(55,161,152) 100%);		
}

.purpleGradient 		{
		border-top:solid 2px #efc5f9;
		border-bottom: solid 2px #b02be3;
		background-image: -webkit-gradient(    linear,    left bottom,    left top,    color-stop(1, rgb(224,169,244)),    color-stop(0, rgb(145,39,216)));
		background-image: -moz-linear-gradient(    center bottom,    rgb(224,169,244) 100%,    rgb(145,39,216) 0%);		
}

.purpleGradient:hover 		{
		border-top:solid 2px #efc5f9;
		border-bottom: solid 2px #b02be3;
		background-image: -webkit-gradient(    linear,    left bottom,    left top,    color-stop(0, rgb(224,169,244)),    color-stop(1, rgb(145,39,216)));
		background-image: -moz-linear-gradient(    center bottom,    rgb(224,169,244) 0%,    rgb(145,39,216) 100%);		
}

.ribbon {
	padding: 0 25px;
	height: 80px;
	
	color: #301607;
	
	background-color: #c94700;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c94700), to(#b84100)); 
    background-image: -webkit-linear-gradient(top, #c94700, #b84100); 
    background-image:    -moz-linear-gradient(top, #c94700, #b84100); 
    background-image:     -ms-linear-gradient(top, #c94700, #b84100); 
    background-image:      -o-linear-gradient(top, #c94700, #b84100); 
    background-image:         linear-gradient(top, #c94700, #b84100);
	
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        
	position: relative;
	float: left;
	clear: left;
	
	font-family: 'Montez', cursive;
	font-size: 32px;			
	line-height: 80px;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
	
	-moz-box-shadow:        -7px 7px 0px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow:    	-7px 7px 0px rgba(0, 0, 0, 0.3); 
    box-shadow:             -7px 7px 0px rgba(0, 0, 0, 0.3);
    
    border-bottom-right-radius: 20px 5px;
	}
	
.ribbon:after {
	content: "";	
	display: block;
	width: 40px;
	height: 0px;
	
	position: absolute;
    right: 0;
    bottom: 4px;
    z-index: 20;
	
	border-bottom: 80px solid #de6625;
	border-right: 80px solid transparent;
	
	-webkit-transform: rotate(90deg);
    -webkit-transform-origin: right bottom;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: right bottom;
    -o-transform: rotate(90deg);
    -o-transform-origin: right bottom;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: right bottom;
    transform: rotate(90deg);
    transform-origin: right bottom;
	}	
	
.ribbon:before {
	content: "";	
	display: block;
	width: 20px;
	height: 0px;
	
	position: absolute;
    right: 0;
    bottom: 4px;
    z-index: 10;
	
    border-bottom: 80px solid rgba(0, 0, 0, 0.3);
	border-right: 80px solid transparent;
	
	-webkit-transform: rotate(80deg);
    -webkit-transform-origin: right bottom;
    -moz-transform: rotate(80deg);
    -moz-transform-origin: right bottom;
    -o-transform: rotate(80deg);
    -o-transform-origin: right bottom;
    -ms-transform: rotate(80deg);
    -ms-transform-origin: right bottom;
    transform: rotate(80deg);
    transform-origin: right bottom;
	}	
	
/*let's solve the unusual display problem caused by firefox*/	

.ribbon#ff-proof:after {	
	width: 0px;
	height: 40px;
	
	position: absolute;
    right: -160px;
	
	border-left: 80px solid #de6625;
	border-bottom: 80px solid transparent;
	
	-webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
	}