/* Big Yellow Buttons */ /* Note there is duplicate css lower down for the black version of these buttons*/ button.greenButton, button.greenButton:hover, button.greenButton:active, a.greenButton, a.greenButton:hover, a.greenButton:active { overflow : visible; cursor : pointer; background : none; margin : 0px; border : none; padding : 0px; text-decoration : none; white-space : nowrap; color : #FFFFFF; } button.greenButton span.left-large-arrow, button.greenButton:hover span.left-large-arrow, button.greenButton:active span.left-large-arrow, button.greenButton span.left-large-body, button.greenButton:hover span.left-large-body, button.greenButton:active span.left-large-body, a.greenButton span.left-large-arrow, a.greenButton:hover span.left-large-arrow, a.greenButton:active span.left-large-arrow, a.greenButton span.left-large-body, a.greenButton:hover span.left-large-body, a.greenButton:active span.left-large-body { display : inline-block; white-space : nowrap; background : transparent url(../images/buttons/site_buttons_03.png) no-repeat; margin-right : 0px; padding : 0px 0px 0px 9px; vertical-align : middle; font-size : 16px; line-height : 40px; height : 40px; } button.greenButton span.left-large-arrow, button.greenButton:hover span.left-large-arrow, button.greenButton:active span.left-large-arrow, a.greenButton span.left-large-arrow, a.greenButton:hover span.left-large-arrow, a.greenButton:active span.left-large-arrow { padding-left : 37px; } button.greenButton span.left-arrow, button.greenButton:hover span.left-arrow, button.greenButton:active span.left-arrow, button.greenButton span.left-body, button.greenButton:hover span.left-body, button.greenButton:active span.left-body, a.greenButton span.left-arrow, a.greenButton:hover span.left-arrow, a.greenButton:active span.left-arrow, a.greenButton span.left-body, a.greenButton:hover span.left-body, a.greenButton:active span.left-body { display : inline-block; white-space : nowrap; background : transparent url(../images/buttons/site_buttons_03.png) no-repeat; margin-right : 0px; padding : 0px 0px 0px 6px; vertical-align : middle; font-size : 14px; line-height : 30px; height : 30px; } button.greenButton span.left-arrow, button.greenButton:hover span.left-arrow, button.greenButton:active span.left-arrow, a.greenButton span.left-arrow, a.greenButton:hover span.left-arrow, a.greenButton:active span.left-arrow { padding-left : 37px; } button.greenButton span.left-large-arrow, a.greenButton span.left-large-arrow { background-position : 0px 0px;} button.greenButton:hover span.left-large-arrow, a.greenButton:hover span.left-large-arrow { background-position : 0px -43px;} button.greenButton span.left-large-body, a.greenButton span.left-large-body { background-position : 0px -152px;} button.greenButton:hover span.left-large-body, a.greenButton:hover span.left-large-body { background-position : 0px -195px;} button.greenButton span.left-arrow, a.greenButton span.left-arrow { background-position : 0px -86px;} button.greenButton:hover span.left-arrow, a.greenButton:hover span.left-arrow { background-position : 0px -119px;} button.greenButton span.left-body, a.greenButton span.left-body { background-position : 0px -238px;} button.greenButton:hover span.left-body, a.greenButton:hover span.left-body { background-position : 0px -271px;} button.greenButton span.right-large-arrow, button.greenButton:hover span.right-large-arrow, button.greenButton:active span.right-large-arrow, button.greenButton span.right-large-edge, button.greenButton:hover span.right-large-edge, button.greenButton:active span.right-large-edge, a.greenButton span.right-large-arrow, a.greenButton:hover span.right-large-arrow, a.greenButton:active span.right-large-arrow, a.greenButton span.right-large-edge, a.greenButton:hover span.right-large-edge, a.greenButton:active span.right-large-edge { display : inline-block; white-space : nowrap; background : transparent url(../images/buttons/site_buttons_03.png) no-repeat; margin-left : 0px; padding : 0px; vertical-align : middle; font-size : 16px; line-height : 40px; width : 40px; height : 40px; } button.greenButton span.right-large-edge, button.greenButton:hover span.right-large-edge, button.greenButton:active span.right-large-edge, a.greenButton span.right-large-edge, a.greenButton:hover span.right-large-edge, a.greenButton:active span.right-large-edge { width : 10px; } button.greenButton span.right-arrow, button.greenButton:hover span.right-arrow, button.greenButton:active span.right-arrow, button.greenButton span.right-edge, button.greenButton:hover span.right-edge, button.greenButton:active span.right-edge, a.greenButton span.right-arrow, a.greenButton:hover span.right-arrow, a.greenButton:active span.right-arrow, a.greenButton span.right-edge, a.greenButton:hover span.right-edge, a.greenButton:active span.right-edge { display : inline-block; white-space : nowrap; background : transparent url(../images/buttons/site_buttons_03.png) no-repeat; margin-left : 0px; padding : 0px; vertical-align : middle; font-size : 14px; line-height : 30px; width : 40px; height : 30px; } button.greenButton span.right-edge, button.greenButton:hover span.right-edge, button.greenButton:active span.right-edge, a.greenButton span.right-edge, a.greenButton:hover span.right-edge, a.greenButton:active span.right-edge { width : 10px; } button.greenButton span.right-large-arrow, a.greenButton span.right-large-arrow { background-position : -261px -152px;} button.greenButton:hover span.right-large-arrow, a.greenButton:hover span.right-large-arrow { background-position : -261px -195px;} button.greenButton span.right-large-edge, a.greenButton span.right-large-edge { background-position : -291px 0px;} button.greenButton:hover span.right-large-edge, a.greenButton:hover span.right-large-edge { background-position : -291px -43px;} button.greenButton span.right-arrow, a.greenButton span.right-arrow { background-position : -261px -238px;} button.greenButton:hover span.right-arrow, a.greenButton:hover span.right-arrow { background-position : -261px -271px;} button.greenButton span.right-edge, a.greenButton span.right-edge { background-position : -291px -86px;} button.greenButton:hover span.right-edge, a.greenButton:hover span.right-edge { background-position : -291px -119px;} /* ------------------------------------------------------------------------------------------------------------------- */ /* exact copy of the above for grey version ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------- */ button.greyButton, button.greyButton:hover, button.greyButton:active, a.greyButton, a.greyButton:hover, a.greyButton:active { overflow : visible; cursor : pointer; background : none; margin : 0px; border : none; padding : 0px; text-decoration : none; white-space : nowrap; color : #FFFFFF; } button.greyButton span.left-large-arrow, button.greyButton:hover span.left-large-arrow, button.greyButton:active span.left-large-arrow, button.greyButton span.left-large-body, button.greyButton:hover span.left-large-body, button.greyButton:active span.left-large-body, a.greyButton span.left-large-arrow, a.greyButton:hover span.left-large-arrow, a.greyButton:active span.left-large-arrow, a.greyButton span.left-large-body, a.greyButton:hover span.left-large-body, a.greyButton:active span.left-large-body { display : inline-block; white-space : nowrap; background : transparent url(../images/buttons/site_buttons_03_bw.png) no-repeat; margin-right : 0px; padding : 0px 0px 0px 9px; vertical-align : middle; font-size : 16px; line-height : 40px; height : 40px; } button.greyButton span.left-large-arrow, button.greyButton:hover span.left-large-arrow, button.greyButton:active span.left-large-arrow, a.greyButton span.left-large-arrow, a.greyButton:hover span.left-large-arrow, a.greyButton:active span.left-large-arrow { padding-left : 37px; } button.greyButton span.left-arrow, button.greyButton:hover span.left-arrow, button.greyButton:active span.left-arrow, button.greyButton span.left-body, button.greyButton:hover span.left-body, button.greyButton:active span.left-body, a.greyButton span.left-arrow, a.greyButton:hover span.left-arrow, a.greyButton:active span.left-arrow, a.greyButton span.left-body, a.greyButton:hover span.left-body, a.greyButton:active span.left-body { display : inline-block; white-space : nowrap; background : transparent url(../images/buttons/site_buttons_03_bw.png) no-repeat; margin-right : 0px; padding : 0px 0px 0px 6px; vertical-align : middle; font-size : 14px; line-height : 30px; height : 30px; } button.greyButton span.left-arrow, button.greyButton:hover span.left-arrow, button.greyButton:active span.left-arrow, a.greyButton span.left-arrow, a.greyButton:hover span.left-arrow, a.greyButton:active span.left-arrow { padding-left : 37px; } button.greyButton span.left-large-arrow, a.greyButton span.left-large-arrow { background-position : 0px 0px;} button.greyButton:hover span.left-large-arrow, a.greyButton:hover span.left-large-arrow { background-position : 0px -43px;} button.greyButton span.left-large-body, a.greyButton span.left-large-body { background-position : 0px -152px;} button.greyButton:hover span.left-large-body, a.greyButton:hover span.left-large-body { background-position : 0px -195px;} button.greyButton span.left-arrow, a.greyButton span.left-arrow { background-position : 0px -86px;} button.greyButton:hover span.left-arrow, a.greyButton:hover span.left-arrow { background-position : 0px -119px;} button.greyButton span.left-body, a.greyButton span.left-body { background-position : 0px -238px;} button.greyButton:hover span.left-body, a.greyButton:hover span.left-body { background-position : 0px -271px;} button.greyButton span.right-large-arrow, button.greyButton:hover span.right-large-arrow, button.greyButton:active span.right-large-arrow, button.greyButton span.right-large-edge, button.greyButton:hover span.right-large-edge, button.greyButton:active span.right-large-edge, a.greyButton span.right-large-arrow, a.greyButton:hover span.right-large-arrow, a.greyButton:active span.right-large-arrow, a.greyButton span.right-large-edge, a.greyButton:hover span.right-large-edge, a.greyButton:active span.right-large-edge { display : inline-block; white-space : nowrap; background : transparent url(../images/buttons/site_buttons_03_bw.png) no-repeat; margin-left : 0px; padding : 0px; vertical-align : middle; font-size : 16px; line-height : 40px; width : 40px; height : 40px; } button.greyButton span.right-large-edge, button.greyButton:hover span.right-large-edge, button.greyButton:active span.right-large-edge, a.greyButton span.right-large-edge, a.greyButton:hover span.right-large-edge, a.greyButton:active span.right-large-edge { width : 10px; } button.greyButton span.right-arrow, button.greyButton:hover span.right-arrow, button.greyButton:active span.right-arrow, button.greyButton span.right-edge, button.greyButton:hover span.right-edge, button.greyButton:active span.right-edge, a.greyButton span.right-arrow, a.greyButton:hover span.right-arrow, a.greyButton:active span.right-arrow, a.greyButton span.right-edge, a.greyButton:hover span.right-edge, a.greyButton:active span.right-edge { display : inline-block; white-space : nowrap; background : transparent url(../images/buttons/site_buttons_03_bw.png) no-repeat; margin-left : 0px; padding : 0px; vertical-align : middle; font-size : 14px; line-height : 30px; width : 40px; height : 30px; } button.greyButton span.right-edge, button.greyButton:hover span.right-edge, button.greyButton:active span.right-edge, a.greyButton span.right-edge, a.greyButton:hover span.right-edge, a.greyButton:active span.right-edge { width : 10px; } button.greyButton span.right-large-arrow, a.greyButton span.right-large-arrow { background-position : -261px -152px;} button.greyButton:hover span.right-large-arrow, a.greyButton:hover span.right-large-arrow { background-position : -261px -195px;} button.greyButton span.right-large-edge, a.greyButton span.right-large-edge { background-position : -291px 0px;} button.greyButton:hover span.right-large-edge, a.greyButton:hover span.right-large-edge { background-position : -291px -43px;} button.greyButton span.right-arrow, a.greyButton span.right-arrow { background-position : -261px -238px;} button.greyButton:hover span.right-arrow, a.greyButton:hover span.right-arrow { background-position : -261px -271px;} button.greyButton span.right-edge, a.greyButton span.right-edge { background-position : -291px -86px;} button.greyButton:hover span.right-edge, a.greyButton:hover span.right-edge { background-position : -291px -119px;} /* CSS3 gradients */ html.cssgradients .greenButton { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#38B100), to(#339900), to(#38B100)); /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(top, #38B100, #339900, #38B100); /* Safari 5.1, Chrome 10+ */ background: -moz-linear-gradient(top, #38B100, #339900, #38B100); /* Firefox 3.6+ */ background: -ms-linear-gradient(top, #38B100, #339900, #38B100); /* IE 10 */ background: -o-linear-gradient(top, #38B100, #339900, #38B100); /* Opera 11.10+ */ } html.cssgradients .greenButton:hover { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#339900), to(#38B100), to(#339900)); background: -webkit-linear-gradient(top, #339900, #38B100, #339900); background: -moz-linear-gradient(top, #339900, #38B100, #339900); background: -ms-linear-gradient(top, #339900, #38B100, #339900); background: -o-linear-gradient(top, #339900, #38B100, #339900); } html.cssgradients .greyButton { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#585858), to(#4E4E4E), to(#585858)); background: -webkit-linear-gradient(top, #585858, #4E4E4E, #585858); background: -moz-linear-gradient(top, #585858, #4E4E4E, #585858); background: -ms-linear-gradient(top, #585858, #4E4E4E, #585858); background: -o-linear-gradient(top, #585858, #4E4E4E, #585858); } html.cssgradients .greyButton:hover { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4E4E4E), to(#585858), to(#4E4E4E)); background: -webkit-linear-gradient(top, #4E4E4E, #585858, #4E4E4E); background: -moz-linear-gradient(top, #4E4E4E, #585858, #4E4E4E); background: -ms-linear-gradient(top, #4E4E4E, #585858, #4E4E4E); background: -o-linear-gradient(top, #4E4E4E, #585858, #4E4E4E); } /* ie9 */ /* green buttons */ html.no-cssgradients.borderradius .greenButton { background: transparent url(/assets/images/buttons/site_buttons_03_green_gradient.svg) 0 0 repeat-x; } html.no-cssgradients.borderradius .greenButton:hover { background-position: 0 100%; } /* grey buttons */ html.no-cssgradients.borderradius .greyButton { background: transparent url(/assets/images/buttons/site_buttons_03_grey_gradient.svg) 0 0 repeat-x; } html.no-cssgradients.borderradius .greyButton:hover { background-position: 0 100%; }