/*
 * The overall layout
 *
 */
body
{
  font-family:  Arial, Helvetica, sans-serif;
  font-size: 76%;
  margin: 0px;
  padding: 0px;
  background-color: #0033cc;
}

#homebody { background: url("../images/searchback_r2.jpg") #0033cc no-repeat 90px 0; }
#restbody { background: url("../images/background_r.jpg") #0033cc no-repeat 90px 0; }


/* Main text areas for most pages */

div.maintitle
{
  position: absolute;
  top: 35px;
  left: 90px;
  width: 500px;
  height: 95px;
  font-size: 1.1em;
  background: url("../images/bar-with-ball.jpg") transparent no-repeat 0 100%;
/*border: 1px solid white;    */
}

div.mainwindow
{
  position: absolute;
  top: 150px;
  left: 145px;
  width: 630px;
/*border: 1px solid white;     */
}

#occupationsmain { width: 630px; }
#faqsmain { width: 600px; }
#linksmain { width: 440px; }

/*
 * DECORATION
 *
 * The picture in a circle top right of most pages
 * note this is a CLASS *and* an ID
 * The class specifies the general properties (mostly
 * exact absolute location). The ID specifies the page
 * specific variants (mostly the image filename)
 */
.decoration
{
  position: absolute;
  top: 0px;
  left: 520px;
  width: 258px;
  height: 230px;
/*border: 1px solid black; */
}

#homedec        { background: url("../images/circle-home_r.jpg") transparent no-repeat; }
#appempsdec     { background: url("../images/appscircle_r.jpg") transparent no-repeat; }
#appsdec        { background: url("../images/apprenticecircle_r.jpg") transparent no-repeat; }
#empsdec        { background: url("../images/empcircle_r.jpg") transparent no-repeat; }
#successdec     { background: url("../images/successcircle_r.jpg") transparent no-repeat; }
#occupationsdec { background: url("../images/occ-circle_r.jpg") transparent no-repeat; }
#faqsdec        { background: url("../images/faqscircle_r.jpg") transparent no-repeat; }
#contactdec     { background: url("../images/contact-circle_r.jpg") transparent no-repeat; }
#providersdec   { background: url("../images/providerscircle_r.jpg") transparent no-repeat; }


/*
 * HOME / SEARCH / RESULTS
 * ***********************
 */
div.hometitle
{
  position: absolute;
  top: 60px;
  left: 130px;
  width: 500px;
/*border: 1px solid white;  */
}

div.hometitle#providerdetails
{
  top: 45px;
}

div.hometitle#applyform
{
  top: 50px;
}

div.homemainwindow
{
  position: absolute;
  top: 190px;
  left: 130px;
  width: 300px;
  height: 310px;
  padding: 0px;
  overflow: auto;
/*border: 1px solid white;   */
}

/* Search and results panes */
.searchpane
{
  position: absolute;
  top: 170px;
  left: 390px;
  height: 250px;
  width: 380px;
  background-color: transparent;
/*border: 1px solid black;  */
}

form.searchform
{
  position: absolute;
  top: 62px;
  left: 74px;
  width: 300px;
/*border: 1px solid black; */
}


.resultspane
{
  position: absolute;
  top: 134px;
  left: 386px;
  height: 420px;
  width: 400px;
  background-color: transparent;
  background: url("../images/searchresults_r.jpg") no-repeat 0 100%;
/*border: 1px solid white; */
}

div.resultscount
{
  position: absolute;
  top: 103px;
  left: 274px;
  width: 100px;
/*border: 1px solid white; */
}


/* the pane containing (only) alternating light/dark individual results */
.searchresults
{
  position: absolute;
  top: 122px;
  left: 15px;
/*  height: 260px; */
  width: 360px;
/*  overflow: auto; */
/*border: 1px solid white; */
}


.aresult
{
/*  height: 50px; */
}


/*
 * OCCUPATIONS
 * ***********
 */
div.blankoccupation
{
  float: left;
  width: 200px;
  font-size: 1.1em;
  height: 2.6em;
/*border: 1px solid white;   */
}


/*
 * SUCCESS STORIES
 * ***************
 */
div.storypanel
{
  float: left;
  margin-right: 35px;
  width: 115px;
}

div.instorypanel
{
  float: left;
  width: 140px;
  padding-top: 140px;   /* to reveal the bgnd image */
/*border: 1px solid white;  */
}

#monkey  { background: url(../images/emps-monkey.jpg) no-repeat 0 0; }
#toomeys { background: url(../images/emps-toomeys.jpg) no-repeat 0 0; }
#drays   { background: url(../images/emps-drays.jpg) no-repeat 0 0; }
#argos   { background: url(../images/emp-argos.jpg) no-repeat 0 0; }

#hannah  { background: url(../images/success-hannah.jpg) no-repeat 0 0; }
#john    { background: url(../images/success-john.jpg) no-repeat 0 0; }
#karen   { background: url(../images/success-karen.jpg) no-repeat 0 0; }
#phil    { background: url(../images/success-phil.jpg) no-repeat 0 0; }

div.instorytext
{
  float: left;
  width: 470px;
/*border: 1px solid white; */
}

/* button to go to employer or app stories */
div.otherstories
{
  padding-top: 35px;
  padding-bottom: 50px;
  padding-left: 297px;
/*border: 1px solid white;  */
}

/*
 * CONTACT
 * *******
 */
div.contactlogolocate
{
  position: absolute;
  top: 310px;
  left: 560px;
}

div.contactappslogolocate
{
  position: absolute;
  top: 400px;
  left: 550px;
}


/*
 * PROVIDER PAGE
 * *************
 * as found from provider listing page
 */
div.ppagedatacontainer
{
  margin-top: 20px;
  background-color: #ffe5ba;   /* #ffe5ba light */
  padding-bottom: 10px;
  clear: left;
/*border: 1px solid black;  */
}

/* the courses table */
table.provcourses
{
  background-color: #ffe5ba;   /* #ffe5ba light */
  border-collapse: collapse;
  width: 580px;
  color: brown;
  font-weight: 600;
  margin: 10px auto 10px auto;
/*margin-left: 20px; */
/*margin-top: 10px; */
/*margin-bottom: 10px; */
/*border: 1px solid black; */
}

tr.provcourseheadline
{
  background-color: #ffcc66;  /* dark */
}

tr.provcourseline
{
}

th.titletitle
{
  width: 200px;
  padding: 10px 0 10px 5px;
  font-size: 1.2em;
  text-align: left;
}

th.coursetitle
{
  width: 200px;
  padding: 8px 0 4px 5px;
  text-align: left;
  border-bottom: 1px solid brown;
}

th.qualtitle
{
  font-size: 0.8em;
  text-align: center;
width: 85px;
}

td.yesqualification
{
  background: url("../images/tick.jpg") transparent no-repeat center center;
  border-bottom: 1px solid brown;
}

td.noqualification
{
  background: url("../images/cross.jpg") transparent no-repeat center center;
  border-bottom: 1px solid brown;
}

span.printqual{ display: none; }

/* the town table */

table.provtowns
{
  background-color: #ffe5ba;   /* #ffe5ba light */
  width: 580px;
  color: brown;
  font-weight: 600;
  margin: 10px auto 10px auto;
  border: 20px;
}

td.towndarkyes, td.towndarkno,
td.townlightyes, td.townlightno
{
  padding: 8px 0 4px 10px;
  border-left:  14px solid #ffe5ba;
  border-right: 14px solid #ffe5ba;
}

td.towndarkyes
{
  background: url("../images/tickyellow.jpg") #ffcc66 no-repeat 95% 50%;
}
td.towndarkno
{
  background: url("../images/crossyellow.jpg") #ffcc66 no-repeat 95% 50%;
}
td.townlightyes
{
  background: url("../images/tick.jpg") transparent no-repeat 95% 50%;
}
td.townlightno
{
  background: url("../images/cross.jpg") transparent no-repeat 95% 50%;
}

span.printtown{ display: none; }




/*
 * FINAL RESULT
 * ************
 * Individual details
 */
/* the overall container with background image */
div.providerresultpane, div.applypane
{
  position: absolute;
  top: 130px;
  left: 129px;
  width: 646px;
  height: 424px;
  background: url("../images/largesearchresults_r.jpg") transparent no-repeat 0 10px;
/*border: 1px solid white; */
}

/* the new application form */
div.applypane
{
/*   background: url("../images/application_bgnd.jpg") transparent no-repeat 0 10px; */
/*border: 1px solid white; */
}

div.providerresultsubline
{
  margin-left: 18px;
  margin-right: 15px;
/*border: 4px solid white; */
}

div.providerbuttoncontainer
{
  margin-left: 18px;
  padding-left: 20px;
  margin-right: 15px;
  background-color: #ffcc66;
  height: 38px;
/*  width: 660px; */
}

div.pbutshift
{
  float: left;
  width: 198px;
  height: 34px;
}

div.providerdatacontainer
{
  margin-left: 18px;
  margin-right: 15px;
  margin-top: 0px;
  height: 230px;
/*  overflow: auto; */
  background-color: transparent;
/*border: 1px solid white; */
}

div.datasection
{
/*border: 1px solid white; */
}

div.datasectionheading
{
  background-color: brown;
}

/*
 * Provider application form
 */

div.providerapplyform
{
  margin-left: 20px;
  margin-right: 20px;
  background-color: #ffe5ba;
}



/*
 * BUTTON LOCATING is done by absolute div positioning
 * ***************
 */

/* Apprenticeship pages */
div.aboutappsimage
{
  position: absolute;
  top: 110px;
  left: 0px;
  width: 400px;
  height: 160px;
}

#appimage{background: url(../images/appskick.jpg) no-repeat 0 0;}
#empimage
{
  top: 330px;
  background: url(../images/empjump.jpg) no-repeat 0 0;
}

/*
 * FOOTER (on home page)
 */
.footer
{
  position: absolute;
  top: 425px;
  left: 105px;
  width: 660px;
  height: 150px;
/*border: 1px solid black; */
}

.homemovie
{
  float: left;
  width: 102px;
  height: 177px;
  margin-top: 40px;
  padding-left: 33px;
  padding-right: 20px;
  background: transparent;
/*border: 1px solid black;  */
}

.homenews
{
  float: left;
  padding-top: 20px;
  margin-left: 20px;
  width: 420px;
  height: 70px;
/*border: 1px solid black; */
}