/*
 * There are so many buttons, especially roll-over ones
 * that they get their own file
 */

.alt { display: none; }

/*
 * MAIN MENU
 * *********
 */
/* location */
.mainmenu
{
/*
  position: absolute;
  top: 15px;
  left: 0px;
*/
float: left;
  width: 120px;
  height: 560px;
  background-color: transparent;
/*  border: 1px solid white;  */
}

div.apply_return
{
  position: absolute;
  top: 15px;
  left: 145px;
}

div.apply_return a{ text-decoration: underline; font-size: 1.2em; font-weight: bold; }

/*
 * The background image which will be seen during first hover image load
 * (so we make its background the same as the hover image
 * so as to prevent the 'flicker' when the user moves the mouse over the button)
 */
#button1, #button2, #button3, #button4, #button5, #button6, #button7, #button8, #buttonhere
{
  /* centre the whole DIV in the menu, drop down 10 from previous button */
  margin: 14px auto 0 auto;

  /* centre align the link text */
  text-align: center;

  /* and centre the background image */
  background: no-repeat top center;
}

/* the rest of the buttons only vary by their background image */
#button1 {background-image:url(../images/buttons/searchbutroll.jpg); }
#button2 {background-image:url(../images/buttons/appbutroll.jpg); }
#button3 {background-image:url(../images/buttons/occbutroll.jpg); }
#button4 {background-image:url(../images/buttons/successbutroll.jpg); }
#button5 {background-image:url(../images/buttons/faqsbutroll.jpg); }
#button6 {background-image:url(../images/buttons/contactbutroll.jpg); }
#button7 {background-image:url(../images/buttons/linksbutroll.jpg); }
#button8 {background-image:url(../images/buttons/provibutroll.jpg); }

/*
 * Then overlay the button divs with the main 'up' images
 * This is what the user sees most of the time (non-hover)
 */
#svc1, #svc2, #svc3, #svc4,#svc5, #svc6, #svc7, #svc8
{
  display: block;
  background: no-repeat top center;
}

#svc1 {background-image:url(../images/buttons/searchbut.jpg);}
#svc2 {background-image:url(../images/buttons/appbut.jpg);}
#svc3 {background-image:url(../images/buttons/occbut.jpg);}
#svc4 {background-image:url(../images/buttons/successbut.jpg);}
#svc5 {background-image:url(../images/buttons/faqsbut.jpg);}
#svc6 {background-image:url(../images/buttons/contactbut.jpg);}
#svc7 {background-image:url(../images/buttons/linksbut.jpg);}
#svc8 {background-image:url(../images/buttons/provibut.jpg);}

/*
 * Finally set the 'hover' image
 * As noted above, this is the same as the background
 * so as to prevent mouse-over flicker
 */
a#svc1:hover  {background-image: url(../images/buttons/searchbutroll.jpg);}
a#svc2:hover  {background-image: url(../images/buttons/appbutroll.jpg);}
a#svc3:hover  {background-image: url(../images/buttons/occbutroll.jpg);}
a#svc4:hover  {background-image: url(../images/buttons/successbutroll.jpg);}
a#svc5:hover  {background-image: url(../images/buttons/faqsbutroll.jpg);}
a#svc6:hover  {background-image: url(../images/buttons/contactbutroll.jpg);}
a#svc7:hover  {background-image: url(../images/buttons/linksbutroll.jpg);}
a#svc8:hover  {background-image: url(../images/buttons/provibutroll.jpg);}

/*
 * The text link is very tricky to explain
 * Basically the space created by padding above text
 * is filled in by the images above
 */
.subtitle
{
  display: block;
  padding: 50px 0 0 0;
/*border: 1px solid white;   */
}


/*
 * HOME PAGE
 * *********
 */
/* 'for apprentices' and 'for employers' buttons */

/* the "about apps" buttons on the home page */
#homebuttons
{
  position: absolute;
  top: 440px;
  left: 125px;
  height: 80px;
  width: 650px;
/*border: 1px solid white; */
}

/* The background image which will be seen during first hover image load */
#contactcontactbutton
{
  float: left;
  background: url(../images/buttons/contact-roll.png) no-repeat 0px;
}

#contact_contact
{
  display: block;
  width: 136px;
  height: 59px;
  background: url(../images/buttons/contact.png) no-repeat top left;
}

a#contact_contact:hover  {background-image: url(../images/buttons/contact-roll.png);}

#contactresourcesbutton
{
  float: left;
  background: url(../images/buttons/resources-roll.png) no-repeat 0px;
}

#contact_resources
{
  display: block;
  width: 136px;
  height: 59px;
  background: url(../images/buttons/resources.png) no-repeat top left;
}

a#contact_resources:hover  {background-image: url(../images/buttons/resources-roll.png);}



#appstoriesactionbutton
{
  float: left;
  background: url(../images/buttons/app-stories1.png) no-repeat 0px;
}

#empstoriesactionbutton
{
  float: left;
  background: url(../images/buttons/emp-stories1.png) no-repeat 0px;
}

#actionvideobutton
{
  float: left;
  background: url(../images/buttons/video1.png) no-repeat 0px;
}

#apprenticebutton
{
  float: left;
  background: url(../images/buttons/an-appbut-roll.jpg) no-repeat 0px;
}

#employerbutton
{
  float: left;
  background: url(../images/buttons/an-empbut-roll.jpg) no-repeat 0px;
}

#applicantsbutton
{
  float: left;
  display: inline;   /* fix IE double margin on floats */
  margin-left: 40px;
  background: url(../images/buttons/av-apps-roll.jpg) no-repeat 0px;
}

#vacanciesbutton
{
  float: left;
  display: inline;   /* fix IE double margin on floats */
  margin-left: 20px;
  background: url(../images/buttons/av-vacs-roll.jpg) no-repeat 0px;
}

#fasttrackbutton
{
  float: left;
  display: inline;   /* fix IE double margin on floats */
  margin-left: 20px;
  background: url(../images/buttons/fastrack-roll.jpg) no-repeat 0px;
}

/* Then overlay the button divs with the main 'up' images
 * This is what the user sees most of the time (non-hover) */
#app_stories
{
  display: block;
  width: 136px;
  height: 37px;
  background: url(../images/buttons/app-stories2.png) no-repeat top left;
}

#emp_stories
{
  display: block;
  width: 136px;
  height: 37px;
  background: url(../images/buttons/emp-stories2.png) no-repeat top left;
}

#action_video
{
  display: block;
  width: 90px;
  height: 37px;
  background: url(../images/buttons/video2.png) no-repeat top left;
}

#app_svc
{
  display: block;
  width: 132px;
  height: 55px;
  background: url(../images/buttons/an-appbut.jpg) no-repeat top center;
}

#emp_svc
{
  display: block;
  width: 134px;
  height: 55px;
  background: url(../images/buttons/an-empbut.jpg) no-repeat top center;
}

#applt_svc
{
  display: block;
  width: 174px;
  height: 55px;
  background: url(../images/buttons/av-apps.jpg) no-repeat top center;
}

#vac_svc
{
  display: block;
  width: 168px;
  height: 55px;
  background: url(../images/buttons/av-vacs.jpg) no-repeat top center;
}

#fastt_svc
{
  display: block;
  width: 153px;
  height: 55px;
  background: url(../images/buttons/fastrack.jpg) no-repeat top center;
}

/* Finally set the true 'hover' image */
a#app_stories:hover  {background-image: url(../images/buttons/app-stories1.png);}
a#emp_stories:hover  {background-image: url(../images/buttons/emp-stories1.png);}
a#action_video:hover  {background-image: url(../images/buttons/video1.png);}
a#app_svc:hover  {background-image: url(../images/buttons/an-appbut-roll.jpg);}
a#emp_svc:hover  {background-image: url(../images/buttons/an-empbut-roll.jpg);}
a#applt_svc:hover  {background-image: url(../images/buttons/av-apps-roll.jpg);}
a#vac_svc:hover  {background-image: url(../images/buttons/av-vacs-roll.jpg);}
a#fastt_svc:hover  {background-image: url(../images/buttons/fastrack-roll.jpg);}


/*
 * RESULTS
 * *******
 * The "back" and "seach again" silver buttons on the "results" pages
 */

/* locate the buttons (busy due to poor graphics alignments) */
div.searchagainlocator
{
/*  float: left; */
display: block;
  padding-top: 6px;
  padding-left: 16px;
/*border: 1px solid white;  */
}

#saproviderresult{ padding-top: 10px; padding-left: 118px; }

#saappln{ padding-top: 10px; padding-left: 273px; }

#searchagainshim { margin-left: 2px; }

/*
 * The search again and back buttons on most pages
 */

/* This is what the user sees most of the time (non-hover) */
.searchagain_svc
{
  display: block;
  float: left;
  width: 123px;
  height: 57px;
  background: url(../images/buttons/searchagainbut.jpg) no-repeat 0 0;
}

#searchback_svc
{
  display: block;
  float: left;
  width: 72px;
  height: 57px;
  background: url(../images/buttons/back-search-but.jpg) no-repeat 0 0;
}

/* Set the true 'hover' image */
a.searchagain_svc:hover  {background-image: none;}
a#searchback_svc:hover  {background-image: none;}

#searchagainbutton{}
#searchbackbutton{}



/*
 * And on the provider result page from whence
 * an applicant applies
 */
div.applysearchlocator
{
  padding-top: 6px;
  padding-left: 272px;
/*border: 1px solid white;  */
}

#applysearchbutton{}
#applybackbutton{}
#applyapplybutton{}

a#applysearch_svc:hover  {background-image: none;}
a#applyback_svc:hover  {background-image: none;}
a#applyapply_svc:hover  {background-image: none;}

/* This is what the user sees most of the time (non-hover) */
#applysearch_svc,
#applyback_svc,
#applyapply_svc
{
  display: block;
  float: left;
  height: 57px;
}

#applysearch_svc
{
  width: 132px;
/*  background: url(../images/buttons/apply-search-but.jpg) no-repeat 0 0; */
  background: url(../images/buttons/searchagainbut.jpg) no-repeat 1px 0;
}

#applyback_svc
{
  width: 72px;
/*   background: url(../images/buttons/apply-back-but.jpg) no-repeat 0 0; */
  background: url(../images/buttons/back-search-but.jpg) no-repeat 1px 0;
}

#applyapply_svc
{
  width: 140px;
  background: url(../images/buttons/apply-ready-but.jpg) no-repeat 0 0;
}

/*
 * FINAL SEARCH RESULT
 * *******************
 */

/* The background image which will be seen during first hover image load */
#detailemailbutton
{
  float: left;
  background: url(../images/buttons/email-but-roll.jpg) no-repeat 0px;
}

#detailwebbutton
{
  float: left;
  background: url(../images/buttons/website-but-roll.jpg) no-repeat 0px;
}

#detailapplybutton
{
  float: left;
  background: url(../images/buttons/apply-but-roll.jpg) no-repeat 0px;
}


/* Then overlay the button divs with the main 'up' images
 * This is what the user sees most of the time (non-hover) */
#detailemail_svc
{
  display: block;
  width: 79px;
  height: 38px;
  background: url(../images/buttons/email-but.jpg) no-repeat 0 0;
}

#detailweb_svc
{
  display: block;
  width: 100px;
  height: 38px;
  background: url(../images/buttons/website-but.jpg) no-repeat 0 0;
}

#detailapply_svc
{
  display: block;
  width: 82px;
  height: 38px;
  background: url(../images/buttons/apply-but.jpg) no-repeat 0 0;
}

/* Finally set the true 'hover' image */
a#detailemail_svc:hover  {background-image: url(../images/buttons/email-but-roll.jpg);}
a#detailweb_svc:hover    {background-image: url(../images/buttons/website-but-roll.jpg);}
a#detailapply_svc:hover  {background-image: url(../images/buttons/apply-but-roll.jpg);}



/*
 * ABOUT APPS
 * **********
 * The "go do a seach" silver button on the "about" pages
 */
/* and move the buttons into place */
div.aboutappsbutton
{
  margin-top: 5px;
  margin-left: 200px;
}

div.aboutsearch
{
/*
  position: absolute;
  top: 100px;
  left: 468px;
*/
float: right;

}

/* The background image which will be seen during first hover image load */
#aboutsearchbutton
{
  background: url(../images/buttons/backtosearch-but-roll.jpg) no-repeat 0px;
}

/* Then overlay the button divs with the main 'up' images
 * This is what the user sees most of the time (non-hover) */
#aboutsearch_svc
{
  display: block;
  width: 140px;
  height: 47px;
  background: url(../images/buttons/backtosearch-but.jpg) no-repeat top center;
}

/* Finally set the true 'hover' image */
a#aboutsearch_svc:hover  {background-image: url(../images/buttons/backtosearch-but-roll.jpg);}




/*
 * The "OCCUPATIONS" bullets
 */

/* The background image which will be seen during first hover image load */
#occupationbutton
{
  float: left;
  background: url(../images/buttons/occ-silverbut-roll.jpg) no-repeat 0 0;
}

/* Then overlay the button divs with the main 'up' images
 * This is what the user sees most of the time (non-hover) */
#occupation_svc
{
  display: block;
  width: 200px;
  background: url(../images/buttons/occ-silverbut.jpg) no-repeat  0 0;
}

/* Finally set the true 'hover' image */
a#occupation_svc:hover  {background-image: url(../images/buttons/occ-silverbut-roll.jpg);}


.occtitle
{
  display: block;
  width: 175px;
  height: 2.6em;
  padding: 0 0 0 25px;
/*border: 1px solid white;   */
}


/*
 * SUCCESS STORIES
 * ***************
 * The "tell me more" and "other stories"
 * buttons on the stories pages
 */

/* The background image which will be seen during first hover image load */
#tellmebutton
{
  float: left;
  margin-top: 14px;
  background: url(../images/buttons/tell-me-but-roll.jpg) no-repeat 0px;
}

#otherstoriesbutton
{
  float: left;
  margin-left: -4px;
  padding-top: 10px;
  background: url(../images/buttons/otherstories-but-roll.jpg) no-repeat 0px 10px;
}

#empstoriesbutton
{
  float: left;
  padding-right: 27px;
  background: url(../images/buttons/success-emp-but-roll.jpg) no-repeat 0px;
}

#appstoriesbutton
{
  float: left;
  padding-right: 27px;
  background: url(../images/buttons/success-app-but-roll.jpg) no-repeat 0px;
}

/* Then overlay the button divs with the main 'up' images
 * This is what the user sees most of the time (non-hover) */
#tellme_svc
{
  display: block;
  width: 115px;
  height: 37px;
  background: url(../images/buttons/tell-me-but.jpg) no-repeat top center;
}

#otherstories_svc
{
  display: block;
  width: 140px;
  height: 51px;
  background: url(../images/buttons/otherstories-but.jpg) no-repeat 0px 0px ;
}

#empstories_svc
{
  display: block;
  width: 123px;
  height: 44px;
  background: url(../images/buttons/success-emp-but.jpg) no-repeat 0 1px;
}

#appstories_svc
{
  display: block;
  width: 123px;
  height: 46px;
  background: url(../images/buttons/success-app-but.jpg) no-repeat 0 0;
}

/* Finally set the true 'hover' image */
a#tellme_svc:hover  {background-image: url(../images/buttons/tell-me-but-roll.jpg);}
a#otherstories_svc:hover  {background-image: url(../images/buttons/otherstories-but-roll.jpg);}
a#empstories_svc:hover  {background-image: url(../images/buttons/success-emp-but-roll.jpg);}
a#appstories_svc:hover  {background-image: url(../images/buttons/success-app-but-roll.jpg);}


/*
 * GENERIC back button
 * *******************
 *
 */

#backlinkbutton
{
  float: left;
/*  clear: left; */
  background: url(../images/buttons/back-but-roll.jpg) no-repeat 0 0;
}

#backlink_svc
{
  display: block;
  width: 123px;
  height: 44px;
  background: url(../images/buttons/back-but.jpg) no-repeat  0 0;
}

a#backlink_svc:hover {background-image: url(../images/buttons/back-but-roll.jpg);}


/*
 * FAQs and LINKS
 * **************
 *
 */
div.linkscontainer
{
  margin-top: 10px;
  margin-left: -10px;
  height: 55px;
}

div.linksothers
{
/*
  position: absolute;
  top: 100px;
  left: 450px;
*/
float: left;
}


/* The background image which will be seen during first hover image load */
#applinksbutton
{
  float: left;
  background: url(../images/buttons/app-links-but-roll.jpg) no-repeat 0 0;
}
#emplinksbutton
{
  float: left;
  background: url(../images/buttons/emp-links-but-roll.jpg) no-repeat 0 0;
}
#backfaqlinksbutton
{
  float: left;
  clear: left;
  background: url(../images/buttons/back-faq-but-roll.jpg) no-repeat 0 0;
}

/* Then overlay the button divs with the main 'up' images
 * This is what the user sees most of the time (non-hover) */
#applinks_svc
{
  display: block;
  width: 158px;
  height: 47px;
  background: url(../images/buttons/app-links-but.jpg) no-repeat  0 0;
}
#emplinks_svc
{
  display: block;
  width: 151px;
  height: 47px;
  background: url(../images/buttons/emp-links-but.jpg) no-repeat  0 0;
}
#backfaqlinks_svc
{
  display: block;
  width: 140px;
  height: 49px;
  background: url(../images/buttons/back-faq-but.jpg) no-repeat  0 0;
}

/* Finally set the true 'hover' image */
a#applinks_svc:hover     {background-image: url(../images/buttons/app-links-but-roll.jpg);}
a#emplinks_svc:hover     {background-image: url(../images/buttons/emp-links-but-roll.jpg);}
a#backfaqlinks_svc:hover {background-image: url(../images/buttons/back-faq-but-roll.jpg);}




/*
 * PROVIDERS
 * *********
 *
 * Practically identical to OCCS above
 * except single, full width column
 */

/* The background image which will be seen during first hover image load */
#provbutton
{
  width: 99%;     /* sort a weird IE width isse */
  float: left;
  clear: left;
  background: url(../images/buttons/occ-silverbut-roll.jpg) no-repeat 0 4px;
}

/* Then overlay the button divs with the main 'up' images
 * This is what the user sees most of the time (non-hover) */
#prov_svc
{
  display: block;
  background: url(../images/buttons/occ-silverbut.jpg) no-repeat  0 4px;
}

/* Finally set the true 'hover' image */
a#prov_svc:hover  {background-image: url(../images/buttons/occ-silverbut-roll.jpg);}

.provtitle
{
  padding: 0 0 0 25px;
}


/*
 * Provider DETAILS buttons
 */

div.ppagebuttoncontainer
{
	padding-top: 5px;
	height: 42px;
	clear: right;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;/*border: 1px solid white;  */
	width: 80%;
}

/* The background image which will be seen during first hover image load */
#provemailbutton
{
  float: left;
  background: url(../images/buttons/prov-email-but-roll.jpg) no-repeat 0px;
}

#provwebbutton
{
  float: left;
  background: url(../images/buttons/prov-web-but-roll.jpg) no-repeat 0px;
}

#provoccsbutton
{
  float: left;
  background: url(../images/buttons/prov-train-but-roll.jpg) no-repeat 0px;
}

#provtownsbutton
{
  float: left;
  background: url(../images/buttons/prov-towns-but-roll.jpg) no-repeat 0px;
}

#provfaqsbutton
{
  float: left;
  background: url(../images/buttons/prov-info-but-roll.jpg) no-repeat 0px;
}

#provbackbutton
{
  float: left;
  background: url(../images/buttons/prov-back-but-roll.jpg) no-repeat 0px;
}


/* Then overlay the button divs with the main 'up' images
 * This is what the user sees most of the time (non-hover) */
#provemail_svc
{
  display: block;
  width: 85px;
  height: 52px;
  background: url(../images/buttons/prov-email-but.jpg) no-repeat 0 0;
}

#provweb_svc
{
  display: block;
  width: 74px;
  height: 52px;
  background: url(../images/buttons/prov-web-but.jpg) no-repeat 0 0;
}

#provoccs_svc
{
  display: block;
  width: 139px;
  height: 52px;
  background: url(../images/buttons/prov-train-but.jpg) no-repeat 0 0;
}

#provtowns_svc
{
  display: block;
  width: 124px;
  height: 52px;
  background: url(../images/buttons/prov-towns-but.jpg) no-repeat 0 0;
}

#provfaqs_svc
{
  display: block;
  width: 149px;
  height: 52px;
  background: url(../images/buttons/prov-info-but.jpg) no-repeat 0 0;
}

#provback_svc
{
  display: block;
  width: 70px;
  height: 52px;
  background: url(../images/buttons/prov-back-but.jpg) no-repeat 0 0;
}


/* Finally set the true 'hover' image */
a#provemail_svc:hover  {background-image: url(../images/buttons/prov-email-but-roll.jpg);}
a#provweb_svc:hover    {background-image: url(../images/buttons/prov-web-but-roll.jpg);}
a#provoccs_svc:hover   {background-image: url(../images/buttons/prov-train-but-roll.jpg);}
a#provtowns_svc:hover  {background-image: url(../images/buttons/prov-towns-but-roll.jpg);}
a#provfaqs_svc:hover   {background-image: url(../images/buttons/prov-info-but-roll.jpg);}
a#provback_svc:hover   {background-image: url(../images/buttons/prov-back-but-roll.jpg);}