/**
 * @title			sodexo 2013
 * @description		colored buttons style sheet
 * @requires		custom.css
 * @media			screen
 */

.btn, .white .btn,
#page .btn.white {
	display:table;
	border:1px solid #cecfd0;
	background:url(btn-colors-bg.png) repeat-x 0 -25px; color:#2a295c;
	font-weight:bold; font-size:12px; line-height:1.25;
	
}
#main .btn {text-decoration:none;}
#main .btn:hover, #main .btn:focus {text-decoration:underline;}
.red .btn, .blue .btn, .grey .btn,
#page .btn.red,
#page .btn.blue,
#page .btn.grey {border:0;}

.btn span,  .white .btn span,
#page .btn.white span {
	display:table-cell;
	height:35px;
	vertical-align:middle;
}
.red .btn span, .blue .btn span, .grey .btn span,
#page .btn.red span,
#page .btn.blue span,
#page .btn.grey span {height:37px;}
.btn .imgWrapper {padding-left:6px;}

.btn .arrow, .white .btn .arrow,
#page .btn.white .arrow {
	width:50px;
	background:url(btn-colors-icons.png) no-repeat 0 -202px;
}

.btn .sprite, .white .btn .sprite,
#page .btn.white .sprite {
	width:50px;
	background:url(btn-colors-icons.png) no-repeat;
}
.btn.discover .sprite, .white .btn.discover .sprite,
#page .btn.white.discover .sprite {background-position:0 -52px;}
.btn.canuse .sprite, .white .btn.canuse .sprite,
#page .btn.white.canuse .sprite {background-position:0 -2px;}
.btn.buy-vouchers .sprite, .white .btn.buy-vouchers .sprite,
#page .btn.white.buy-vouchers .sprite {background-position:-100px -152px;}
.btn.use-vouchers .sprite, .white .btn.use-vouchers .sprite,
#page .btn.white.use-vouchers .sprite {background-position:0px -2px;}
.btn.callback .sprite, .white .btn.callback .sprite,
#page .btn.white.callback .sprite {background-position:0 -102px;}
.btn.find .sprite, .white .btn.find .sprite,
#page .btn.white.find .sprite {background-position:0 -52px;}
.btn.sim .sprite, .white .btn.sim .sprite,
#page .btn.white.sim .sprite {background-position:0 -252px;}

.red .btn,
#page .btn.red {background-position:0 -125px; color:#fff;}
.red .btn .arrow,
#page .btn.red .arrow {background-position:-50px -202px;}
.red .btn.discover .sprite,
#page .btn.red.discover .sprite {background-position:-50px -52px;}
.red .btn.canuse .sprite,
#page .btn.red.canuse .sprite, 
.red .btn.use-vouchers .sprite,
#page .btn.red.use-vouchers .sprite {background-position:-50px -2px;}
.red .btn.buy-vouchers .sprite,
#page .btn.red.buy-vouchers .sprite {background-position:-50px -152px;}
.red .btn.callback .sprite,
#page .btn.red.callback .sprite {background-position:-50px -102px;}
.red .btn.find .sprite,
#page .btn.red.find .sprite {background-position:-50px -52px;}
.red .btn.sim .sprite,
#page .btn.red.sim .sprite {background-position:-50px -252px;}

.blue .btn,
#page .btn.blue {background-position:0 -225px; color:#fff;}
.blue .btn .arrow,
#page .btn.blue .arrow {background-position:0px -202px;}
.blue .btn.discover .sprite,
#page .btn.blue.discover .sprite {background-position:-100px -52px;}
.blue .btn.canuse .sprite,
#page .btn.blue.canuse .sprite {background-position:-100px -2px;}
.blue .btn.buy-vouchers .sprite,
#page .btn.blue.buy-vouchers .sprite {background-position:-100px -152px;}
.blue .btn.use-vouchers .sprite,
#page .btn.blue.use-vouchers .sprite {background-position:-100px -2px;}
.blue .btn.callback .sprite,
#page .btn.blue.callback .sprite {background-position:-100px -102px;}
.blue .btn.find .sprite,
#page .btn.blue.find .sprite {background-position:-100px -52px;}
.blue .btn.sim .sprite,
#page .btn.blue.sim .sprite {background-position:0 -252px;}

.grey .btn,
#page .btn.grey {background-position:0 -325px; color:#fff;}
.grey .btn .arrow,
#page .btn.grey .arrow {background-position:-150px -202px;}
.grey .btn.discover .sprite,
#page .btn.grey.discover .sprite {background-position:-150px -52px;}
.grey .btn.canuse .sprite,
#page .btn.grey.canuse .sprite {background-position:-150px -2px;}
.grey .btn.buy-vouchers .sprite,
#page .btn.grey.buy-vouchers .sprite {background-position:-100px -152px;}
.grey .btn.use-vouchers .sprite,
#page .btn.grey.use-vouchers .sprite {background-position:-150px -2px;}
.grey .btn.callback .sprite,
#page .btn.grey.callback .sprite {background-position:0 -102px;}
.grey .btn.find .sprite,
#page .btn.grey.find .sprite {background-position:-150px -52px;}
.grey .btn.sim .sprite,
#page .btn.grey.sim .sprite {background-position:-150px -252px;}

/**
 * clearing
 */
.btn:after {
	display:table;
	clear:both;
	content:'';
}