/*
	1. Button Image Replacements Common
		1.1 Base Styles
		1.2 Sizes Styles
		1.3 Icon Styles
	2. Custom Styles - Add Project names seperated by comma.
		2.1 Style 1
		2.2 Style 2 - buildasign.com, 
		2.3 Style 3 - buildasign.com,
		2.4 Style 4
		2.5 Style 5
                2.6 Style 6
	3. Clearfix
*/

/* Only used for sample set-up. Delete when styles are used on site(s) */
body.Page-button-ref div.sLayout {width: 960px;}
body.Page-button-ref div.outer div.inner {
	float: left;
	width: 280px;
}
body.Page-button-ref h2 {
	font-size: 16px;
	margin: 30px 0 0 10px;
}

/* --- 1 Button Image Replacements ---*/
/* --- 1.1 Base Styles --- */
.button {
	border-color: #fff;
	border-style: solid;
	border-width: 2px;
	border-radius: 4px;
	clear: both;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	box-shadow: inset 1px 1px .5px #fff, inset -1px -1px .5px #fff;
	-o-box-shadow: inset 1px 1px .5px #fff, inset -1px -1px .5px #fff;
	-webkit-box-shadow: inset 1px 1px .5px #fff, inset -1px -1px .5px #fff;
	-moz-box-shadow: inset 1px 1px .5px #fff, inset -1px -1px .5px #fff;
	cursor: pointer;
	display: block;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	height: 18px;
	margin: 10px 10px 10px 0;
	outline: none;
	padding: 0 12px;
	text-align: center;
	width: auto;
}
.button * {
	color: #fff;
	display: block;
	font-weight: bold;
	text-decoration: none;
}
.button input {
	border: none;
	background-color: transparent;
	color: #fff;
	cursor: pointer;
	font-weight: bold;
	padding-bottom: 4px;
	text-decoration: none;
}
.button.inline {clear: none;}


/* --- 1.2 Size Styles --- */
.button.xx-small,
.button.xx-small input {
	border-width: 1px;
	box-shadow: none;
	-o-box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	font-size: 10px;
	font-weight: normal;
	height: 15px;
	line-height: 15px; /* Add padding top and font-size for consistent display */
	padding: 0 3px;
}
.button.xx-small * {
	font-size: 10px;
	font-weight: normal;
}
.button.xx-small input {
	height: 17px;
	padding: 0 0 3px 0;
}

.button.x-small,
.button.x-small input {
	border-width: 1px;
	font-size: 11px;
	font-weight: normal;
	height: 20px;
	line-height: 21px; /* Add padding top and font-size for consistent display */
	padding: 1px 8px 0 8px;
}
.button.x-small * {
	font-size: 11px;
	font-weight: normal;
}
.button.x-small input {padding: 0 0 2px 0;}

.button.small,
.button.small input {
	font-size: 12px;
	height: 24px;
	line-height: 25px; /* Add padding top and font-size for consistent display */
	padding-top: 1px;
}
.button.small * {font-size: 12px;}
.button.small input {
	height: 23px;
	padding: 0 0 3px 0;
}

.button.medium,
.button.medium input {
	font-size: 14px;
	height: 27px;
	line-height: 28px; /* Add padding top and font-size for consistent display */
}
.button.medium * {font-size: 14px; text-decoration: none;}
.button.medium input {
	height: 26px;
	padding: 0 0 3px 0;
}

.button.large,
.button.large input {
	font-size: 16px;
	height: 31px;
	line-height: 32px;
	padding-top: 2px;
}
.button.large * {font-size: 16px; text-decoration: none;}
.button.large input {
	height: 30px;
	padding: 0 0 3px 0;
}


/* --- 1.3 Icon Styles --- */
.button.icon * {
	background-image: url(/cmsimages/famfam-silk_v1_3.png?v=734A5765704A7135346F493D);
	background-position: -2px 0;
	background-repeat: no-repeat;
	padding: 0 0 0 20px;
}
.button.small.icon input,
.button.medium.icon input,
.button.large.icon input {
	padding-left: 18px;
}

.button.icon.checkmark * {
        height: 16px;
        line-height: 15px;
        position: relative;
}
.button.small.icon.checkmark * {
	background-position: -2px -1px;
        top: 4px;
}
.button.medium.icon.checkmark * {
	background-position: -2px 0;
        top: 5px;
}
.button.large.icon.checkmark * {
	background-position: -2px -1px;
        top: 7px;
}

.button.small.icon.print * {
background-position: -2px -25px;
}
.button.medium.icon.print * {
background-position: -2px -22px;
}
.button.large.icon.print * {
background-position: -2px -21px;
}

.button.small.icon.add-text * {
background-position: -1px -54px;
}
.button.medium.icon.add-text * {
background-position: 0 -52px;
}
.button.large.icon.add-text * {
background-position: -1px -50px;
}

.button.small.icon.add-clipart * {
background-position: -1px -85px;
}
.button.medium.icon.add-clipart * {
background-position: -1px -83px;
}
.button.large.icon.add-clipart * {
background-position: -1px -81px;
}

.button.small.icon.image-upload * {
background-position: -1px -115px;
}
.button.medium.icon.image-upload * {
background-position: -1px -113px;
}
.button.large.icon.image-upload * {
background-position: -1px -111px;
}

.button.small.icon.image-edit * {
background-position: 0 -146px;
}
.button.medium.icon.image-edit * {
background-position: 0 -144px;
}
.button.large.icon.image-edit * {
background-position: 0 -142px;
}

.button.small.icon.zoom * {
background-position: -1px -178px;
}
.button.medium.icon.zoom * {
background-position: -1px -176px;
}
.button.large.icon.zoom * {
background-position: -1px -174px;
}

/* --- 2. Base Styles --- */
/* --- 2.1 Style 1 --- */
.button.style-1 {
	background: #ccc; /* old browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
	background: -moz-linear-gradient(top, #eeeeee, #cccccc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc'); /* IE */
	border-color: #999999;
	color: #000;
}
.button.style-1 *,
.button.style-1 input {
	color: #000;
}
.button.style-1:hover,
.button.style-1:focus {
	background: #cfcfcf;
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfcfcf', endColorstr='#cfcfcf'); /* IE */
}
.button.style-1:active {background: #999990;}
.button.style-1 *:visited {color: #000;}

/* --- 2.2 Style 2 --- */
.button.style-2 {
	background: #004392; /* old browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#0062D9), to(#004392));
	background: -moz-linear-gradient(top, #0062D9, #004392);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0062D9', endColorstr='#004392'); /* IE */
	border-color: #0049a0;
	color: #fff;
}
.button.style-2:hover,
.button.style-2:focus {
	background: #0058C4;
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0058C4', endColorstr='#0058C4'); /* IE */
}
.button.style-2:active {background: #00316C;}
.button.style-2 *:visited {color: #fff;}

/* --- 2.3 Style 3 --- */
.button.style-3 {
	background: #FA5E12; /* old browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#FF7C2A), to(#FA5E12));
	background: -moz-linear-gradient(top, #FF9351, #FA5E12);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF7C2A', endColorstr='#FA5E12');
	border-color: #F26522;
	color: #fff;
}
.button.style-3:hover,
.button.style-3:focus {
	background: #FF7628;
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF7628', endColorstr='#FF7628');
}
.button.style-3:active {background: #EC5800;}
.button.style-3 *:visited {color: #fff;}

/* --- 2.4 Style 4 --- */
.button.style-4 {
	background: #CC3300; /* old browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#F43E00), to(#CC3300));
	background: -moz-linear-gradient(top, #F43E00, #CC3300);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#F43E00', endColorstr='#CC3300');
	border-color: #9F2800;
	color: #fff;
}
.button.style-4:hover,
.button.style-4:focus {
	background: #E63900;
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#E63900', endColorstr='#E63900');
}
.button.style-4:active {background: #B32D00;}
.button.style-4 *:visited {color: #fff;}

/* --- 2.5 Style 5 --- */
.button.style-5 {
	background-color: #01582D; /* old browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#01AF58), to(#01582D));
	background: -moz-linear-gradient(top, #01AF58, #01582D);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#01AF58', endColorstr='#01582D');
	border-color: #014724;
	color: #fff;
}
.button.style-5:hover,
.button.style-5:focus {
	background: #01783D;
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#01783D', endColorstr='#01783D');
}
.button.style-5:active {background: #01582D;}
.button.style-5 *:visited {color: #fff;}

/* --- 2.5 Style 6 --- */
.button.style-6 {
	background-color: #01582D; /* old browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#DCECF8), to(#A6D2EE));
	background: -moz-linear-gradient(top, #DCECF8, #A6D2EE);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCECF8', endColorstr='#A6D2EE');
	border-color: #A6D2EE;
	color: #195486;
}
.button.style-6:hover,
.button.style-6:focus {
	background: #A1CFED;
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#A1CFED', endColorstr='#A1CFED');
}
.button.style-6:active {background: #a1caed;}
.button.style-6 *:visited {color: #195486;}

.button.style-6 * { color: #195486; }

/* --- 3. Clearfix --- */
.clear-fix:after,
.button:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clear-fix,
.button {
	display: inline-block;
}
 
html[xmlns] .clear-fix,
html[xmlns] .button {
	display: block;
}
 
* html .clear-fix,
* html .button {
	height: 1%;
}