﻿/* http://www.alistapart.com/d/sprites/ala-buttons1.html */

/* This section handles Small sized buttons */
.btnSml {position: relative; margin: 0px; padding: 0px; width: 60px; height: 60px; background: url(pattern.gif);}
.btnSml li {width: 60px; height: 60px; position: absolute; top: 0px; background: url(../images/btnMedium.png) 0 0 no-repeat; display: block; list-style: none;}
.btnSml a {width: 60px; height: 60px; display: block; border: solid 0px #fff;}
.btnSml a:hover {border: solid 0px #000;}

.btnSml .btnEngage {left: 1px; background-position: 0 -1962px;} /* height = 75 */
.btnSml .btnEngage a:hover {background: url(../images/btnMedium.png) -65px -1962px no-repeat;}


/* This section handles Small sized buttons */
.btn75 {position: relative; margin: 0px; padding: 0px; width: 75px; height: 75px; background: url(pattern.gif);}
.btn75 li {width: 75px; height: 75px; position: absolute; top: 0px; background: url(../images/btnMedium.png) 0 0 no-repeat; display: block; list-style: none;}
.btn75 a {width: 75px; height: 75px; display: block; border: solid 0px #fff;}
.btn75 a:hover {border: solid 0px #000;}

.btn75 .btnSaveJob {left: 1px; background-position: 0 -1400px;} /* height = 75 */
.btn75 .btnSaveJob a:hover {background: url(../images/btnMedium.png) -75px -1400px no-repeat;}
.btn75 .btnSaveCandidate {left: 1px; background-position: 0 -1475px;} /* height = 75 */
.btn75 .btnSaveCandidate a:hover {background: url(../images/btnMedium.png) -75px -1475px no-repeat;}
.btn75 .btnNext {left: 1px; background-position: 0 -1550px;} /* height = 75 */
.btn75 .btnNext a:hover {background: url(../images/btnMedium.png) -75px -1550px no-repeat;}


.imgActionWrap {text-align: left;overflow: hidden;line-height: 20px;}
.imgActionWrap.right {text-align: right;}
.imgActionWrap.right .imgDotCover {float: right;}
.imgActionWrap .aText {padding-left: 22px;padding-right: 0px;}
.imgActionWrap.right .aText {padding-left: 0px;padding-right: 22px;}
.imgActionWrap a:hover .imgDot {top: -2051px;left: -22px;}
.imgActionWrap a {text-decoration: none;}
.imgDotCover {display: block;float: left;text-align: left;height: 20px;width: 20px;overflow: hidden;}
    
.imgIcon {position: relative; margin: 0px; padding: 0px; width: 20px; height: 20px; background: url(pattern.gif);}
.imgIcon .imgDot {left: 0px; background-position: 0 -2050px;}
.imgIcon li {width: 20px; height: 20px; position: absolute; top: 0px; background: url(../images/btnMedium.png) 0px -2050px no-repeat; display: block; list-style: none;}
a .imgIcon {width: 20px; height: 20px; display: block; border: solid 0px #fff;padding-left: 20px;}
a:hover .imgIcon {background: url(../images/btnMedium.png) -20px -2050px no-repeat;}


.imgDotWrap {position: relative; margin: 0px; padding: 0px; width: 20px; height: 20px; background: url(pattern.gif);}
.imgDotWrap li {width: 20px; height: 20px; position: absolute; top: 0px; background: url(../images/btnMedium.png) 0 0 no-repeat; display: block; list-style: none;}
.imgDotWrap a {width: 20px; height: 20px; display: block; border: solid 0px #fff; width:auto; padding-left: 20px;}
.imgDotWrap a:hover {border: solid 0px #000;}

.imgDotWrap .imgDot {left: 1px; background-position: 0 -2050px;}
.imgDotWrap .imgDot a:hover {background: url(../images/btnMedium.png) -20px -2050px no-repeat;}


.imgCard {position: relative; margin: 0px; padding: 0px; width: 55px; height: 60px; border: solid 0px #000;}
.imgCard .imgOn {position: relative; margin: 0px; padding: 0px; width: 55px; height: 60px;background: url(../images/btnMedium.png) -76px -1900px no-repeat;}
.imgCard .imgOff {position: relative; margin: 0px; padding: 0px; width: 55px; height: 60px;background: url(../images/btnMedium.png) -23px -1900px no-repeat;}
.imgCard a {width: 55px; height: 60px; display: block; border: solid 0px #fff;}
.imgCard a:hover {border: solid 0px #000;}

.imgCard a .imgOn {display:none;}
.imgCard a:hover .imgOn {display:block;}

.imgCard a .imgOff {display:block;}
.imgCard a:hover .imgOff {display:none;}

/* This section handles Medium sized buttons */
.btnMed {position: relative; margin: 0px; padding: 0px; width: 100px; height: 100px; background: url(pattern.gif);}
.btnMed li {width: 100px; height: 100px; position: absolute; top: 0px; background: url(../images/btnMedium.png) 0 0 no-repeat; display: block; list-style: none;}
.btnMed a {width: 100px; height: 100px; display: block; border: solid 0px #fff;}
.btnMed a:hover {border: solid 0px #000;}

.btnMed .btnSignUpFree {left: 1px;}
.btnMed .btnSignUpNow {left: 1px; background-position: 0 -101px;}
.btnMed .btnAccept    {left: 1px; background-position: 0 -201px;}
.btnMed .btnAddFish   {left: 1px; background-position: 0 -301px;}
.btnMed .btnDecline   {left: 1px; background-position: 0 -401px;}
.btnMed .btnDelete    {left: 1px; background-position: 0 -501px;}
.btnMed .btnEngage    {left: 1px; background-position: 0 -601px;}
.btnMed .btnGoFish    {left: 1px; background-position: 0 -701px;}
.btnMed .btnHookUp    {left: 1px; background-position: 0 -801px;}
.btnMed .btnNext      {left: 1px; background-position: 0 -901px;}
.btnMed .btnUpdatePro {left: 1px; background-position: 0 -1001px;}
.btnMed .btnReply     {left: 1px; background-position: 0 -1101px;}
.btnMed .btnSubmit    {left: 1px; background-position: 0 -1201px;}
.btnMed .btnUpdate    {left: 1px; background-position: 0 -1301px;}
 
.btnMed .btnSignUpFree a:hover {background: url(../images/btnMedium.png) -100px 1px no-repeat;}
.btnMed .btnSignUpNow  a:hover {background: url(../images/btnMedium.png) -100px -101px no-repeat;}
.btnMed .btnAccept     a:hover {background: url(../images/btnMedium.png) -100px -201px no-repeat;}
.btnMed .btnAddFish    a:hover {background: url(../images/btnMedium.png) -100px -301px no-repeat;}
.btnMed .btnDecline    a:hover {background: url(../images/btnMedium.png) -100px -401px no-repeat;}
.btnMed .btnDelete     a:hover {background: url(../images/btnMedium.png) -100px -501px no-repeat;}
.btnMed .btnEngage     a:hover {background: url(../images/btnMedium.png) -100px -601px no-repeat;}
.btnMed .btnGoFish     a:hover {background: url(../images/btnMedium.png) -100px -701px no-repeat;}
.btnMed .btnHookUp     a:hover {background: url(../images/btnMedium.png) -100px -801px no-repeat;}
.btnMed .btnNext       a:hover {background: url(../images/btnMedium.png) -100px -901px no-repeat;}
.btnMed .btnUpdatePro  a:hover {background: url(../images/btnMedium.png) -100px -1001px no-repeat;}
.btnMed .btnReply      a:hover {background: url(../images/btnMedium.png) -100px -1101px no-repeat;}
.btnMed .btnSubmit     a:hover {background: url(../images/btnMedium.png) -100px -1201px no-repeat;}
.btnMed .btnUpdate     a:hover {background: url(../images/btnMedium.png) -100px -1301px no-repeat;}

/* This section handles Large sized buttons */
.btnLrg {position: relative; margin: 0px; padding: 0px; width: 125px; height: 125px; background: url(pattern.gif);}
.btnLrg li {width: 125px; height: 125px; position: absolute; top: 0px; background: url(../images/btnLarge.png) 0 0 no-repeat; display: block; list-style: none;}
.btnLrg a {width: 125px; height: 125px; display: block; border: solid 0px #fff;}
.btnLrg a:hover {border: solid 0px #000;}

.btnLrg .btnFindJobs {left: 1px;}
.btnLrg .btnFindFish {left: 1px; background-position: 0 -151px;}
.btnLrg .btnMember   {left: 1px; background-position: 0 -301px;}
.btnLrg .btnNotMember{left: 1px; background-position: 0 -450px;}
.btnLrg .btnPost     {left: 1px; background-position: 0 -599px;}
.btnLrg .btnSearch   {left: 1px; background-position: 0 -751px;}

.btnLrg .btnFindJobs  a:hover {background: url(../images/btnLarge.png) -125px 1px no-repeat;}
.btnLrg .btnFindFish  a:hover {background: url(../images/btnLarge.png) -125px -151px no-repeat;}
.btnLrg .btnMember    a:hover {background: url(../images/btnLarge.png) -125px -301px no-repeat;}
.btnLrg .btnNotMember a:hover {background: url(../images/btnLarge.png) -125px -451px no-repeat;}
.btnLrg .btnPost      a:hover {background: url(../images/btnLarge.png) -125px -599px no-repeat;}
.btnLrg .btnSearch    a:hover {background: url(../images/btnLarge.png) -125px -751px no-repeat;}

/* Search Results */
.btnSrchResults {position: relative; margin: 0px; padding: 0px; width: 54px; height: 60px; background: url(pattern.gif);}
.btnSrchResults li {width: 54px; height: 60px; position: absolute; top: 0px; background: url(../images/card3.png) 0 0 no-repeat; display: block; list-style: none;}
.btnSrchResults a {width: 54px; height: 60px; display: block; border: solid 0px #fff;}
.btnSrchResults a:hover {border: solid 0px #000;}

.btnSrchResults .btnResume {left: 1px;}
.btnSrchResults .btnResume  a:hover {background: url(../images/card3.png) -54px 1px no-repeat;}

/* Icons */
.imgDot {position: relative; margin: 0px; padding: 0px; width: 20px; height: 20px; background: url(../images/btnMedium.png);}

.btn40 {position: relative; margin: 0px; padding: 0px; width: 40px; height: 40px; background: url(pattern.gif);}
.btn40 li {width: 40px; height: 40px; position: absolute; top: 0px; background: url(../images/btnMedium.png) 0 0 no-repeat; display: block; list-style: none;}
.btn40 a {width: 40px; height: 40px; display: block; border: solid 0px #fff;}
.btn40 a:hover {border: solid 0px #000;}

.btn40 .btnRight {left: 1px; background-position: -159px -1400px;}
.btn40 .btnRight a:hover {background: url(../images/btnMedium.png) -160px -1440px no-repeat;}
.btn40 .btnLeft {left: 1px; background-position: -160px -1480px;}
.btn40 .btnLeft a:hover {background: url(../images/btnMedium.png) -160px -1520px no-repeat;}

.btn40 .btnRightRight {left: 1px; background-position: -159px -1560px;}
.btn40 .btnRightRight a:hover {background: url(../images/btnMedium.png) -160px -1600px no-repeat;}
.btn40 .btnLeftLeft {left: 1px; background-position: -160px -1640px;}
.btn40 .btnLeftLeft a:hover {background: url(../images/btnMedium.png) -160px -1679px no-repeat;}

/*
#iconmenu {position: relative; margin: 10px auto; padding: 3px; width: 206px; height: 52px; background: url(pattern.gif);}
#iconmenu li {width: 50px; height: 50px; position: absolute; top: 2px; background: url(icons.gif) 0 0 no-repeat; display: block; list-style: none;}
#iconmenu a {width: 50px; height: 50px; display: block; border: solid 1px #fff;}
#iconmenu a:hover {border: solid 1px #000;}

#iconmenu #panel1c {left: 2px;}
#iconmenu #panel2c {left: 54px; background-position: -51px 0;}
#iconmenu #panel3c {left: 106px; background-position: -102px 0;}
#iconmenu #panel4c {left: 158px; background-position: -153px 0;}
 
#iconmenu #panel1c a:hover {background: url(icons.gif) -1px -52px no-repeat;}
#iconmenu #panel2c a:hover {background: url(icons.gif) -52px -52px no-repeat;}
#iconmenu #panel3c a:hover {background: url(icons.gif) -103px -52px no-repeat;}
#iconmenu #panel4c a:hover {background: url(icons.gif) -154px -52px no-repeat;}
*/

/* This section handles Small sized buttons */
.icon_01 {position: relative; margin: 0px; padding: 0px; width: 25px; height: 25px; background: url(../images/icons_01.png);}
.icon_01 li {width: 24px; height: 24px; position: absolute; top: 0px; background: url(../images/icons_01.png) 0 0 no-repeat; display: block; list-style: none;}
.icon_01 a {width: 24px; height: 24px; display: block; border: solid 0px #fff;}
.icon_01 a:hover {border: solid 0px #000;}

.icon_01 .star {background-position: 0px 0px;}

.icon_01 .plus {background-position: -25px 0px;}
.icon_01 .minus {background-position: -25px -25px;}
.icon_01 .blueMag {background-position: -25px -50px;}
.icon_01 .mag{background-position: -25px -75px;}

.icon_01 .redX {background-position: -75px 0px;}
.icon_01 .pencil {background-position: -75px -75px;}


.iconAction {cursor:pointer;display:inline-block;}
