/* Buttons Shape Styles */

/* Begin Button Medium Shape */
.btn
{
    float: left;
    position: relative;
    display: block;
    background: #ED9812; /* Accent8 */
    padding: 5px;
    cursor: pointer;
    margin-right: 10px;
    width: auto;
    height: auto;
    white-space: nowrap;
}
.btn *
{
    position: relative;
    display: block;
    background-image: url(../images/btn.png);
    background-repeat: no-repeat;
}
.btn i
{
    position: absolute;
    background-position: top left;
    width: 5px;
    height: 5px;
    top: 0;
    left: 0;
    margin-bottom: -5px;
}
.btn span
{
    background-position: bottom left;
    left: -5px;
    margin-bottom: -5px;
    padding: 0 0 5px 10px;
}
.btn span i
{
    position: absolute;
    background-position: bottom right;
    width: 10px;
    height: 100%;
    top: 0;
    left: 100%;
    margin-bottom: 0;
}
.btn span span
{
    position: absolute;
    background-position: top right;
    height: 0;
    top: -5px;
    right: -10px;
    margin-left: 10px;
}
.btn:hover
{
    background-color: #719ac6; /* Primary4 */
}
/*------special for upload button-----------*/
.buthover
{
    background-color: #719ac6; /* Primary4 */
}
/*-----------------------------------------*/
.btn:active
{
    background-color: #ED9812; /* Accent8 */
}
.btn[class]
{
    background-image: url(../images/shade_op90.png);
    background-position: bottom;
}
.btn img
{
    float: left;
    border: 0px;
    background-image: none;
    padding-right: 5px;
}
* html .btn span, * html .btn i
{
    float: left;
    width: auto;
    background-image: none;
    cursor: pointer;
}
* html .btn
{
    border: 3px double #ED9812; /* Accent8 */
}
* html .btn:hover
{
    border-color: #719ac6; /* Primary4 */
}
* html .btn img
{
    float: left;
    border: 0px;
    background-image: none;
    padding: 0px;
    margin: 0px;
}
/* End Button Medium Shape */

/* Begin Button Large Shape */
.large.btn
{
    float: left;
    position: relative;
    display: block;
    background: #b4d3f0; /*Primary5*/
    padding: 8px;
    cursor: pointer;
    margin-right: 16px;
    height: 15px;
    white-space: nowrap;
}
.large.btn *
{
    position: relative;
    display: block;
    background-image: url(../images/btn_4.png);
    background-repeat: no-repeat;
    white-space: inherit;
}
.large.btn i
{
    position: absolute;
    background-position: top left;
    width: 8px;
    height: 8px;
    top: 0;
    left: 0;
    margin-bottom: -8px;
}
.large.btn span
{
    background-position: bottom left;
    left: -8px;
    margin-bottom: -8px;
    padding: 0 0 8px 16px;
}
.large.btn span i
{
    position: absolute;
    background-position: bottom right;
    width: 16px;
    height: 100%;
    top: 0;
    left: 100%;
    margin-bottom: 0;
}
.large.btn span span
{
    position: absolute;
    background-position: top right;
    height: 0;
    top: -8px;
    right: -16px;
    margin-left: 16px;
}
.large.btn:hover
{
    background-color: #39699a; /*Primary3*/
}
.large.btn:active
{
    background-color: #b4d3f0; /*Primary5*/
}
.large.btn[class]
{
    background-image: url(../images/shade_3.png);
    background-position: bottom;
}
.large.btn img
{
    float: left;
    border: 0px;
    background-image: none;
    padding: 0 5 0 0px;
    margin: 0 0 0 -5px;
}
* html .large.btn span, * html .large.btn i
{
    float: left;
    width: auto;
    background-image: none;
    cursor: pointer;
}
* html .large.btn
{
    border: 8px double #b4d3f0; /*Primary5*/
}
* html .large.btn:hover
{
    border-color: #39699a; /* Primary3 */
}
* html .large.btn img
{
    float: left;
    border: 0px;
    background-image: none;
    padding: 0px;
    margin: 0px;
}
/* End Button Large Shape */

/* Begin Button Small Shape */
.sm.btn
{
    float: left;
    position: relative;
    display: block;
    background: #7ab9fc; /*Primary7 */
    padding: 4px 4px 4px 4px;
    cursor: pointer;
}
.sm.btn *
{
    position: relative;
    display: block;
    background-image: url(../images/btn_2.png);
    background-repeat: no-repeat;
}
.sm.btn i
{
    position: absolute;
    background-position: top left;
    width: 4px;
    height: 4px;
    top: 0;
    left: 0;
    margin-bottom: -4px;
}
.sm.btn span
{
    background-position: bottom left;
    left: -4px;
    margin-bottom: -4px;
    margin-top:-1px;
    padding-right: 0px;
    padding-left: 8px;
    padding-top: 0px;
    padding-bottom:3px;
}
.sm.btn span i
{
    position: absolute;
    background-position: bottom right;
    width: 8px;
    height: 100%;
    top: 0;
    left: 100%;
    margin-bottom: 0;
    z-index: 100;
}
.sm.btn span span
{
    position: absolute;
    background-position: top right;
    height: 0px;
    top: -2px;
    right: -8px;
    padding-bottom:4px;    
    margin-left: 8px;
}

/*------special for upload button-----------

for upload button we hard code the hover and active color in js code. 
If those colors are changed we also need to update those js files.

--------------------------------*/

.sm.btn:hover
{
    background-color: #719ac6; /* Primary4 */
}

.sm.btn:active
{
    background-color: #7ab9fc; /* Primary7 */
}
.sm.btn[class]
{
    background-image: url(../images/shade_op75.png);
    background-position: bottom;
}
.sm.btn img
{
    float: left;
    border: 0px;
    background-image: none;
    padding-right: 4px;
}

* html .sm.btn span, * html .sm.btn i
{
    float: left;
    background-image: none;
    width: auto;
    cursor: pointer;
}
* html .sm.btn
{
    border: 4px double #7ab9fc; /* Primary7 */
}
* html .sm.btn:hover
{
    border-color: #719ac6; /* Primary4 */
}
* html .sm.btn img
{
    float: left;
    border: 0px;
    background-image: none;
    padding-right: 4px;
}
/* End Button Small Shape */

p
{
    /*clear:both;*/
    padding-top: 10px;
}
form p .btn
{
    margin-right: 10px;
}

/* Buttons Text Styles */
A.btnText1Bold, A.btnText1Bold:visited, A.btnText1Bold:link, A.btnText1Bold:hover, A.btnText1Bold:active
{
    font-size: 8pt;
    color: #fff; /* Neutral1 */
    font-weight: bold;
    text-decoration: none;
    padding: 0 5 0 5px;
}
A.btnText2Bold, A.btnText2Bold:visited, A.btnText2Bold:link, A.btnText2Bold:active
{
    font-size: 8pt;
    color: #fff; /* Neutral1 */
    font-weight: bold;
    text-decoration: none;
    padding: 0 5 0 5px;
}
.btnText2Bold:hover
{
    font-size: 8pt;
    color: #fff; /* Neutral1 */
    font-weight: bold;
    text-decoration: none;
    padding: 0 5 0 5px;
}
.btnText3Bold
{
    font-size: 10pt;
    font-family: Arial;
    color: #39699A; /* Primary3 */
    font-weight: bold;
    text-decoration: none;
}
.btnText3Bold:hover
{
    font-size: 10pt;
    font-family: Arial;
    color: #fff; /* Neutral1 */
    font-weight: bold;
    text-decoration: none;
}
A.btnText1BigBold, A.btnText1BigBold:visited, A.btnText1BigBold:link, A.btnText1BigBold:hover, A.btnText1BigBold:active
{
    font-size: 13pt;
    color: #fff; /* Neutral1 */
    font-weight: bold;
    text-decoration: none;
}

div.RightFloat
{
    float: right;
    clear: both;
    margin-right: -13px;
}
div.LeftFloat
{
    float: left;
    clear: both;
    margin-left: -13px;
}

div.RightFloatNoneMargin
{
    float: right;
    clear: both;
}

div.LeftFloatNoneMargin
{
    float: left;
    clear: both;
}

/*special for buttonTable*/
.btn .buttonDiv *
{
    background-image: none;
}
.btnText3Bold .arrowDiv
{
    padding-right: 20px;
    background-image: url(../images/ico-next.gif);
    background-position: right;
}

.btnText1Bold .arrowDiv
{
    padding-right: 8px;
    background-image: url(../images/arrow-right.gif);
    background-position: top right;
}

/*special for buttonTable*/

.ButtonBottom
{
	float: left;
	padding-top: 20px;
}

.QCButton
{
	margin-right:6px;	
}