/* ************************** */
/* Fluid button documentation */
/* ************************** */
/*

Code
----

The minimum rendered code needed is basically this:

<a href="data.html" class="isBtn particularClass">
	<span>
		text of the button
	</span>
</a>


In aspx, an example would be:

<asp:LinkButton ID="btnPayBill" runat="server" OnClick="btnPayBill_Click" CssClass="isBtn submitButtonFluid">
	<span>
		<asp:Literal ID="Literal3" Text="<%$ Resources:LanguageResourceFile, btnPay %>" runat="server">
		</asp:Literal>
	</span>
</asp:LinkButton>

For each case the attributes OnClick, CssClass and ID should be changed; and also the literal.


To create a Big Blue Button with a PDF icon, add a span class="printPdfBtn" inside the existing span, like so:

<a href="#" class="isBtn submitButtonFluid">
	<span>
		<span class="printPdfBtn">
			Ver Factura
		</span>
	</span>
</a>

NOTE: The class 'isBtn' should always be present. This is the handle used to position the button in an external CSS. The other class gives the button the look and feel.


Resume
------

submitButtonFluid - Big Blue Button, fluid width
BFBlueMedium - Medium Blue Button, fluid width
BFBlueSmall - Small Blue Button, fluid width

BFOrangeBig - Big Orange Button, fluid width
BFOrangeMedium - Medium Orange Button, fluid width
BFOrangeSmall - Small Orange Button, fluid width

BFWhiteSmall - Small White/Orange Button, fluid width

submitButtonFixed - Big Blue Button, fixed width
editSome - Edit Blue Button, fixed width


submitButtonFluidDisabled - Big Blue Button, fluid width, disabled
BFBlueMediumDisabled - Medium Blue Button, fluid width, disabled
BFBlueSmallDisabled - Small Blue Button, fluid width, disabled
BFOrangeBigDisabled - Big Orange Button, fluid width, disabled
BFOrangeMediumDisabled - Medium Orange Button, fluid width, disabled
BFOrangeSmallDisabled - Small Orange Button, fluid width, disabled
BFWhiteSmallDisabled - Small White/Orange Button, fluid width, disabled

*/
/* documentation ends */





/* Button fluidity */

	/* common */

a.submitButtonFluid,
a.BFBlueMedium,
a.BFBlueSmall,
a.BFOrangeBig,
a.BFOrangeMedium,
a.BFOrangeSmall,
a.BFWhiteSmall,

a.submitButtonFluid span,
a.BFBlueMedium span,
a.BFBlueSmall span,
a.BFOrangeBig span,
a.BFOrangeMedium span,
a.BFOrangeSmall span,
a.BFWhiteSmall span,

a.submitButtonFluidDisabled,
a.BFBlueMediumDisabled,
a.BFBlueSmallDisabled,
a.BFOrangeBigDisabled,
a.BFOrangeMediumDisabled,
a.BFOrangeSmallDisabled,
a.BFWhiteSmallDisabled,

a.submitButtonFluidDisabled span,
a.BFBlueMediumDisabled span,
a.BFBlueSmallDisabled span,
a.BFOrangeBigDisabled span,
a.BFOrangeMediumDisabled span,
a.BFOrangeSmallDisabled span,
a.BFWhiteSmallDisabled span
{
	background-repeat:no-repeat !important;
	float:left;
	display:inline !important;
}

a.submitButtonFluid,
a.BFBlueMedium,
a.BFBlueSmall,
a.BFOrangeBig,
a.BFOrangeMedium,
a.BFOrangeSmall,
a.BFWhiteSmall {
	background-image:url(/midirectv/App_Themes/MyDirectv/images/btns/buttons_right.png) !important;
	margin-top:0 !important;
	cursor:pointer !important;
}
a.submitButtonFluid span,
a.BFBlueMedium span,
a.BFBlueSmall span,
a.BFOrangeBig span,
a.BFOrangeMedium span,
a.BFOrangeSmall span,
a.BFWhiteSmall span {
	background-image:url(/midirectv/App_Themes/MyDirectv/images/btns/buttons_left.png) !important;
	font-family:Arial, Helvetica, sans-serif !important;
	cursor:pointer !important;
}
a.submitButtonFluidDisabled,
a.BFBlueMediumDisabled,
a.BFBlueSmallDisabled,
a.BFOrangeBigDisabled,
a.BFOrangeMediumDisabled,
a.BFOrangeSmallDisabled,
a.BFWhiteSmallDisabled {
	background-image:url(/midirectv/App_Themes/MyDirectv/images/btns/buttons_right_disabled.png) !important;
	margin-top:0 !important;
	cursor:default !important;
}
a.submitButtonFluidDisabled span,
a.BFBlueMediumDisabled span,
a.BFBlueSmallDisabled span,
a.BFOrangeBigDisabled span,
a.BFOrangeMediumDisabled span,
a.BFOrangeSmallDisabled span,
a.BFWhiteSmallDisabled span {
	background-image:url(/midirectv/App_Themes/MyDirectv/images/btns/buttons_left_disabled.png) !important;
	font-family:Arial, Helvetica, sans-serif !important;
	cursor:default !important;
}
	/* /common */

	/* Blue Big */
a.submitButtonFluid,
a.submitButtonFluidDisabled {
	height:28px !important;
	background-position:100% 0 !important;
	padding:0 11px 0 0 !important;
}
a.submitButtonFluid span,
a.submitButtonFluidDisabled span {
	height:28px !important;
	color:#FFF !important;
	font-size:15px !important;
	font-weight:bold !important;
	line-height:28px !important;
	background-position:0 0 !important;
	padding:0 0 0 11px !important;
}
a.submitButtonFluid:hover {
	background-position:100% -28px !important;
}
a.submitButtonFluid:hover span {
	background-position:0 -28px !important;
}
a.submitButtonFluid:active {
	background-position:100% -56px !important;
}
a.submitButtonFluid:active span {
	background-position:0 -56px !important;
}
a.submitButtonFluid span:active {
	background-position:0 -56px !important;
}
	/* /Blue Big */

	/* pdf modifier for Blue Big */
a.submitButtonFluid span span.printPdfBtn,
a.submitButtonFluidDisabled span span.printPdfBtn {
	background-repeat:no-repeat !important;
	background-position:0 0 !important;
	padding:0 0 0 28px !important;
	font-size:12px !important;
}
a.submitButtonFluid span span.printPdfBtn {
	background-image:url(/midirectv/App_Themes/MyDirectv/images/btns/pdfForButton.png) !important;
}
a.submitButtonFluidDisabled span span.printPdfBtn {
	background-image:url(/midirectv/App_Themes/MyDirectv/images/btns/pdfForButton_disabled.png) !important;
}
a.submitButtonFluid:hover span span.printPdfBtn {
	background-position:0 -28px !important;
}
a.submitButtonFluid:active span span.printPdfBtn {
	background-position:0 -56px !important;
}
	/* /pdf modifier for Blue Big */

	/* Blue Medium */
a.BFBlueMedium,
a.BFBlueMediumDisabled {
	height:23px !important;
	background-position:100% -84px !important;
	padding:0 8px 0 0 !important;
}
a.BFBlueMedium span,
a.BFBlueMediumDisabled span {
	height:23px !important;
	color:#FFF !important;
	font-size:13px !important;
	font-weight:bold !important;
	line-height:23px !important;
	background-position:0 -84px !important;
	padding:0 0 0 8px !important;
}
a.BFBlueMedium:hover {
	background-position:100% -107px !important;
}
a.BFBlueMedium:hover span {
	background-position:0 -107px !important;
}
a.BFBlueMedium:active {
	background-position:100% -130px !important;
}
a.BFBlueMedium:active span {
	background-position:0 -130px !important;
}
a.BFBlueMedium span:active {
	background-position:0 -130px !important;
}
	/* /Blue Medium */

	/* Blue Small */
a.BFBlueSmall,
a.BFBlueSmallDisabled {
	height:19px !important;
	background-position:100% -153px !important;
	padding:0 7px 0 0 !important;
}
a.BFBlueSmall span,
a.BFBlueSmallDisabled span {
	height:19px !important;
	color:#FFF !important;
	font-size:11px !important;
	font-weight:bold !important;
	line-height:19px !important;
	background-position:0 -153px !important;
	padding:0 0 0 7px !important;
}
a.BFBlueSmall:hover {
	background-position:100% -172px !important;
}
a.BFBlueSmall:hover span {
	background-position:0 -172px !important;
}
a.BFBlueSmall:active {
	background-position:100% -191px !important;
}
a.BFBlueSmall:active span {
	background-position:0 -191px !important;
}
a.BFBlueSmall span:active {
	background-position:0 -191px !important;
}
	/* /Blue Small */

	/* Orange Big */
a.BFOrangeBig,
a.BFOrangeBigDisabled {
	height:28px !important;
	background-position:100% -210px !important;
	padding:0 11px 0 0 !important;
}
a.BFOrangeBig span,
a.BFOrangeBigDisabled span {
	height:28px !important;
	color:#FFF !important;
	font-size:15px !important;
	font-weight:bold !important;
	line-height:28px !important;
	background-position:0 -210px !important;
	padding:0 0 0 11px !important;
}
a.BFOrangeBig:hover {
	background-position:100% -238px !important;
}
a.BFOrangeBig:hover span {
	background-position:0 -238px !important;
}
a.BFOrangeBig:active {
	background-position:100% -266px  !important;
}
a.BFOrangeBig:active span {
	background-position:0 -266px  !important;
}
a.BFOrangeBig span:active {
	background-position:0 -266px  !important;
}
	/* /Orange Big */

	/* Orange Medium */
a.BFOrangeMedium,
a.BFOrangeMediumDisabled {
	height:23px !important;
	background-position:100% -294px !important;
	padding:0 8px 0 0 !important;
}
a.BFOrangeMedium span,
a.BFOrangeMediumDisabled span {
	height:23px !important;
	color:#FFF !important;
	font-size:13px !important;
	font-weight:bold !important;
	line-height:23px !important;
	background-position:0 -294px !important;
	padding:0 0 0 8px !important;
}
a.BFOrangeMedium:hover {
	background-position:100% -317px !important;
}
a.BFOrangeMedium:hover span {
	background-position:0 -317px !important;
}
a.BFOrangeMedium:active {
	background-position:100% -340px  !important;
}
a.BFOrangeMedium:active span {
	background-position:0 -340px  !important;
}
a.BFOrangeMedium span:active {
	background-position:0 -340px  !important;
}
	/* /Orange Medium */

	/* Orange Small */
a.BFOrangeSmall,
a.BFOrangeSmallDisabled {
	height:19px !important;
	background-position:100% -363px  !important;
	padding:0 7px 0 0 !important;
}
a.BFOrangeSmall span,
a.BFOrangeSmallDisabled span {
	height:19px !important;
	color:#FFF !important;
	font-size:11px !important;
	font-weight:bold !important;
	line-height:19px !important;
	background-position:0 -363px  !important;
	padding:0 0 0 7px !important;
}
a.BFOrangeSmall:hover {
	background-position:100% -382px  !important;
}
a.BFOrangeSmall:hover span {
	background-position:0 -382px  !important;
}
a.BFOrangeSmall:active {
	background-position:100% -401px  !important;
}
a.BFOrangeSmall:active span {
	background-position:0 -401px  !important;
}
a.BFOrangeSmall span:active {
	background-position:0 -401px  !important;
}
	/* /Orange Small */

	/* White with orange borders */
a.BFWhiteSmall,
a.BFWhiteSmallDisabled {
	height:20px !important;
	background-position:100% -420px !important;
	padding:0 7px 0 0 !important;
}
a.BFWhiteSmall span,
a.BFWhiteSmallDisabled span {
	height:20px !important;
	color:#000 !important;
	font-size:11px !important;
	font-weight:normal !important;
	line-height:20px !important;
	background-position:0 -420px !important;
	padding:0 0 0 7px !important;
}
a.BFWhiteSmall:hover {
	background-position:100% -440px !important;
}
a.BFWhiteSmall:hover span {
	background-position:0 -440px !important;
}
a.BFWhiteSmall:active {
	background-position:100% -460px !important;
}
a.BFWhiteSmall:active span {
	background-position:0 -460px !important;
}
a.BFWhiteSmall span:active {
	background-position:0 -460px !important;
}
	/* /White with orange borders */

/* /Button fluidity */

/* Buttons fixed width */
.submitButtonFixed,
.submitButtonFixedDisabled {
	background-color:transparent;
	width:63px !important;
	height:28px !important;
	float:left;
	display:inline !important;
	color:#FFF !important;
	font-family:Arial, Helvetica, sans-serif !important;
	font-size:15px !important;
	font-weight:bold !important;
	line-height:28px !important;
	background-position:0 0 !important;
	padding:0 !important;
	text-align:center !important;
	background-repeat:no-repeat !important;
	margin-top:0 !important;
	border:none !important;
}
.submitButtonFixed:hover,
.submitButtonFixedDisabled:hover {
	background-position:0 -28px !important;
}
.submitButtonFixed:active,
.submitButtonFixedDisabled:active {
	background-position:0 -56px !important;
}
.submitButtonFixed {
	background-image:url(/midirectv/App_Themes/MyDirectv/images/btns/submitButtonFixed.png) !important;
	cursor:pointer !important;
}
.submitButtonFixedDisabled {
	background-image:url(/midirectv/App_Themes/MyDirectv/images/btns/submitButtonFixedDisabled.png) !important;
	cursor:default !important;
}

a.editSome {
	display:block !important;
	background-image:url(/midirectv/App_Themes/MyDirectv/images/btns/editSome.png) !important;
	background-repeat:no-repeat !important;
	background-position:0 0 !important;
	width:49px !important;
	height:23px !important;
	color:#FFF !important;
	padding:0 0 0 31px !important;
	line-height:23px !important;
	font-size:13px !important;
	font-weight:bold !important;
	font-family:Arial, Helvetica, sans-serif !important;
}
input.editSome {
	display:block !important;
	background-image:url(/midirectv/App_Themes/MyDirectv/images/btns/editSome.png) !important;
	background-repeat:no-repeat !important;
	background-position:0 0 !important;
	width:80px !important;
	height:23px !important;
	color:#FFF !important;
	padding:0 0 0 20px !important;
	line-height:23px !important;
	font-size:13px !important;
	font-weight:bold !important;
	border:0 !important;
	font-family:Arial, Helvetica, sans-serif !important;
	cursor:pointer !important;
}
/* /Buttons fixed width */