@import url('Reset.css');

#container {width:976px; margin:20px auto 0; padding:1px; border:1px solid #e6e6e6; background:#fff;}
#container #content {background:url('../Images/Containers/Home/bg.gif') top center repeat-x #e6e6e6; padding:30px 18px 18px;}
#container #content h1 {color:#7e7e7e;}
#container #content img.logo {margin:0 0 30px; display:block;}
#container #content #home {float:right; width:320px;}
#container #content #home h1 {line-height:22px; font-size:3em; font-weight:bold; margin:0 0 10px 0;}
#container #content #home h1 span {font-size:0.7em; line-height:40px;}
#container #content #home p {font-size:1.4em; line-height:1.5em;}
#container #content #home p.last {margin:0;}
#container #content #video {float:left;}

#container #content ul#navigation {list-style-type:none; margin:0 0 25px; height:39px;}
#container #content ul#navigation li {float:left; font-size:1.5em; font-weight:bold; height:39px; background:url('../Images/Navigation/navBg.gif') top left repeat-x #f10506;}
#container #content ul#navigation li.aboutHSBC, #container #content ul#navigation li.aboutHSBCActive {width:152px;}
#container #content ul#navigation li.yourInductionProcess, #container #content ul#navigation li.yourInductionProcessActive {width:230px;}
#container #content ul#navigation li.locationGuide {width:143px;}
#container #content ul#navigation li.learnDevelop, #container #content ul#navigation li.learnDevelopActive {width:184px;}
#container #content ul#navigation li.benefitsRewards, #container #content ul#navigation li.benefitsRewardsActive {width:204px;}
#container #content ul#navigation li.theEssentials, #container #content ul#navigation li.theEssentialsActive {width:170px;}
#container #content ul#navigation li a {display:block; color:#fff; padding:10px 0 11px; text-align:center; border-right:1px solid #fff; text-decoration:none;}
#container #content ul#navigation li.theEssentials a {border:none;}
#container #content ul#navigation li a:hover {background:url('../Images/Navigation/arrow.gif') left center no-repeat; text-decoration:none;}
#container #content ul#navigation li.aboutHSBCActive a,
#container #content ul#navigation li.yourInductionProcessActive a,
#container #content ul#navigation li.locationGuideActive a,
#container #content ul#navigation li.learnDevelopActive a,
#container #content ul#navigation li.benefitsRewardsActive a,
#container #content ul#navigation li.theEssentialsActive a {background:url('../Images/Navigation/arrow.gif') left center no-repeat;}


/*========================================================
    Main Content
========================================================*/

#centralCol {width:735px; float:left; margin:0 0px 0 0; font-size:1.4em;}
#centralCol h1 {font-size:1.4em;}
#centralCol h2 {font-size:1.2em;}
#centralCol ul {margin:0 0 1.6em 20px;}
#centralCol ul li {margin:0 0 8px 0;}
#centralCol a.newWindow {padding:0 17px 0 0; background:url('../Images/new-window.gif') right center no-repeat;}
#centralCol a.print {padding:0 17px 0 0; background:url('../Images/print.gif') right center no-repeat;}
#centralCol p.printSchedule {margin:15px 0 0; font-size:0.8em;}

#centralCol ul.strongDrops li {font-size:0.9em; font-style:italic; margin:0 0 14px 0; padding:0 0 0 12px;}
#centralCol ul.strongDrops li strong {display:block; font-size:1.1em; font-style:normal; margin:0 0 2px -12px; padding:0;}

#centralCol img.photoLeft {float:left; margin:0 14px 14px 0; background:#fff; padding:10px; border:1px solid #cfcece;}
#centralCol img.photoRight {float:right; margin:0 0 14px 14px; background:#fff; padding:10px; border:1px solid #cfcece;}
#centralCol img.photoLeftUL {float:left; margin:0 28px 14px 0; background:#fff; padding:10px; border:1px solid #cfcece;}
#centralCol ul.shift li {position:relative; left:30px;}

#centralCol #ourValuesVideo {float:left; margin:0 14px 14px 0; background:#fff; padding:10px; border:1px solid #cfcece;}

#centralCol .panel { float:left;margin:0 3px 0 0; }
#centralCol .panelLast { float:left; }
/* Schedule List */
#centralCol ul#schedule {list-style-type:none; margin:0;}
#centralCol ul#schedule li strong {display:block; color:#5B5B5B; margin:0 0 3px 0;}
#centralCol ul#schedule li {float:left; width:120px; margin:0; padding:10px 12px 0; color:#fff; border-right:1px solid #fff; background:url('../Images/scheduleHeadBg.gif') 0 0 repeat-x #e1e1e1; min-height:395px;}
#centralCol ul#schedule li.odd {background:url('../Images/scheduleHeadBg.gif') 0 0 repeat-x #ebebeb;}
/* IE6 - Hack the height */
* html #centralCol ul#schedule li {height:395px;}
#centralCol ul#schedule li.last {border:none;}
#centralCol ul#schedule ul {list-style-type:none; margin:10px 0 25px 0;}
#centralCol ul#schedule ul li {width:120px; min-height:0; height:auto; margin:14px 0 0 0; clear:both; background:none; padding:0; border:none; color:#d20316; font-size:0.9em;}
#centralCol ul#schedule ul li.dark {color:#970000;}

#centralCol blockquote {background:url('../Images/Qype/speech-close.gif') bottom right no-repeat; margin:0 0 1.6em 0;}
#centralCol blockquote p {background:url('../Images/Qype/speech-open.gif') 0 0 no-repeat; margin:0; padding:10px 40px 10px; font-style:italic; font-size:1.2em;}

#container #content #subNavigation {float:right; width:193px; border:1px solid #c01818; font-size:1.3em;}
#container #content #subNavigation ul {background:url('../Images/Navigation/subNavBg.png') 0 0 repeat-x #be1919; list-style-type:none; border:1px solid #fe0000; padding:14px 0;}
#container #content #subNavigation ul li {font-weight:bold; margin:0 0 10px 0; position:relative; left:-2px;}
#container #content #subNavigation ul li a {color:#fff; padding:0 0 0 18px; text-decoration:none;}
#container #content #subNavigation ul li a:hover {background:url('../Images/Navigation/subNavArrow.png') left center no-repeat; text-decoration:underline;}
#container #content #subNavigation ul li.ourValuesActive a,
#container #content #subNavigation ul li.recentHistoryActive a,
#container #content #subNavigation ul li.internationalActive a,
#container #content #subNavigation ul li.organisationChartActive a,
#container #content #subNavigation ul li.theDiscoveryProgrammeActive a,
#container #content #subNavigation ul li.theScheduleActive a,
#container #content #subNavigation ul li.usefulTipsActive a,
#container #content #subNavigation ul li.insideKnowledgeActive a,
#container #content #subNavigation ul li.trainingActive a,
#container #content #subNavigation ul li.mentoringActive a,
#container #content #subNavigation ul li.starterQuizActive a,
#container #content #subNavigation ul li.thePackageActive a,
#container #content #subNavigation ul li.environmentActive a,
#container #content #subNavigation ul li.educationActive a,
#container #content #subNavigation ul li.charitiesActive a,
#container #content #subNavigation ul li.usefulDocumentsActive a {background:url('../Images/Navigation/subNavArrow.png') left center no-repeat; text-decoration:underline;}


#container #content #promo {float:right; width:195px;}
#container #content #promo #sidePanel .header { background:url('../Images/Side-panel/header.gif') 0 0 repeat-y #ccc;margin:20px 0 0 0; }
#container #content #promo #sidePanel .header h2 { padding:7px 9px;margin:0;font-weight:bold;color:#646464; }
#container #content #promo #sidePanel .body { background:url('../Images/Side-panel/body.gif') 0 0 repeat-y #ccc; }
#container #content #promo #sidePanel .body ul { margin:0 20px 0 35px;padding:15px 0 0 0; }
#container #content #promo #sidePanel .body ul li { font-size:1.2em;padding:0 0 5px 0;list-style-image: url('../Images/Side-panel/tick.gif'); }
#container #content #promo #sidePanel .footer { background:url('../Images/Side-panel/footer.gif') 0 0 no-repeat #ccc;height:15px; }

#container #content #discoveryVideo {margin:0 0 20px 0;}
#container #content #discoveryVideo .getFlash {border:1px solid #e6e6e6; background:#fff; padding:20px;}

/*========================================================
    Locations
========================================================*/

#container h1.locations {float:left; width:400px;}

/* Search Box */
#container #search {margin:60px auto 0; padding:0 0 140px 0; width:510px;}
#container #search label {color:#7e7e7e; font-size:2.1em; margin:0 0 7px;}
#container #search label span {font-size:0.45em;}
#container #search input.text {width:390px; color:#484747; border:1px solid #bebebe; padding:10px 10px 9px; font-size:1.8em; font-family:Arial, Tahoma, Georgia, Verdana, "Trebuchet MS", sans-serif; float:left;}
#container #search input.button {float:left; position:relative; right:1px;}

#container #newSearch {float:right; width:510px;}
#container #newSearch label {color:#7e7e7e; font-size:2.1em; margin:0 0 7px;}
#container #newSearch label span {font-size:0.45em;}
#container #newSearch input.text {width:390px; color:#484747; border:1px solid #bebebe; padding:10px 10px 9px; font-size:1.8em; font-family:Arial, Tahoma, Georgia, Verdana, "Trebuchet MS", sans-serif; float:left;}
#container #newSearch input.button {float:left; position:relative; right:1px;}

#poweredByQype {width:100px; float:right; margin:0 14px 0 0;}
#poweredByQype p {text-align:right; font-style:italic; margin:0; font-size:0.9em;}
#poweredByQype img {margin:0 0 0;}

/* -------------- Results List ------------------*/
#container #locations {clear:both; margin:28px 0 0;}
#container #locations #nav {float:left; width:150px; background:#d9d9d9; padding:15px 0; font-size:1.2em;}
#container #locations #nav h3 {font-weight:bold; font-size:1.1em; color:#5c5c5c; padding:0 0 0 15px;}
#container #locations #nav ul {list-style-type:none; padding:0 0 100px 0;}
#container #locations #nav ul li {padding:10px 0 10px 15px; font-size:0.95sem;}
#container #locations #nav ul li.selected {font-weight:bold; font-style:italic; background:url('../Images/Qype/selected.png') 0 50% no-repeat;}
#container #locations #nav ul li.selected a {text-decoration:none;}
#container #locations #nav #poweredByQype {float:none; margin:0 auto 0;}


#container #locations #results {float:left; margin:0 0 0 10px; width:780px; font-size:1.5em;}
#container #locations #results h2.summary {float:left; width:665px; font-size:1.3em; margin:0 0 6px 0;}
#container #locations #results .pageCount {float:right; font-size:0.8em; margin:0 8px 0 0; position:relative; top:8px;}
#container #locations #results a {color:#484747;}
#container #locations #results .entry {border-top:1px solid #d6d6d6; padding:14px; clear:both;}
#container #locations #results .entry img.photo {float:left; margin:0 14px 14px 0; background:#fff; padding:10px; border:1px solid #cfcece;}
#container #locations #results .entry h2 {font-size:1.4em; margin:8px 0 8px; padding:0 180px 0 0; color:#c92525;}
#container #locations #results .entry h2 a {color:#c92525;}
#container #locations #results .entry p.details {margin:0 0 15px; clear:right;}
#container #locations #results .entry p.details span {font-size:1.1em;}
#container #locations #results .entry .quote {float:left; width:494px; font-style:italic; margin:10px 0 0;}
#container #locations #results .entry .quote p {color:#5b5b5b; padding:0 20px 0 25px; margin:0;}
#container #locations #results .entry .quote p a {font-weight:bold; font-size:0.9em; position:relative; left:7px;}
#container #locations #results .entry .quote .open {height:14px; width:18px; background:url('../Images/Qype/speech-open.gif') center center no-repeat; text-indent:-999999px;}
#container #locations #results .entry .quote .close {float:right; height:14px; width:18px; background:url('../Images/Qype/speech-close.gif') center center no-repeat; text-indent:-999999px; position:relative; top:-10px;}
#container #locations #results .entry p.noReviews {font-style:italic; margin:30px 0 0 250px; font-size:0.8em;}

#container #locations #results #paging {clear:both; border-top:1px solid #d6d6d6; padding:14px 0 0 14px; font-size:0.8em;}
#container #locations #results #paging #firstPrev {float:left; width:200px; margin:0 0 0 234px; display:inline;}
#container #locations #results #paging #lastNext {float:right; width:200px; text-align:right;}

/* Results List Average Ratings LARGE */
#container #locations #results .entry .averageRating {float:right; width:190px; margin:-30px 0 0; text-align:right;}
#container #locations #results .entry .averageRating img {margin:0 10px 0 0;}
#container #locations #results .entry .averageRating img.rating_0,
#container #locations #results .entry .averageRating img.rating_1,
#container #locations #results .entry .averageRating img.rating_2,
#container #locations #results .entry .averageRating img.rating_3,
#container #locations #results .entry .averageRating img.rating_4,
#container #locations #results .entry .averageRating img.rating_5 {height:16px; width:96px; background:transparent url('../Images/Qype/sprite.png') top left no-repeat;}
#container #locations #results .entry .averageRating img.rating_0 {background-position:0 -230px;}
#container #locations #results .entry .averageRating img.rating_1 {background-position:0 -214px;}
#container #locations #results .entry .averageRating img.rating_2 {background-position:0 -198px;}
#container #locations #results .entry .averageRating img.rating_3 {background-position:0 -182px;}
#container #locations #results .entry .averageRating img.rating_4 {background-position:0 -166px;}
#container #locations #results .entry .averageRating img.rating_5 {background-position:0 -150px;}
#container #locations #results .entry .averageRating a {position:relative; top:-2px; text-align:right;}

/* ------------------- Details --------------------- */
#details {clear:both; margin:28px 0 0; font-size:1.5em;}
#details h2.return a {color:#9a9a9a; font-size:0.9em;}
#details #venue {float:left; width:630px; padding:10px; color:#727272;}
#details #venue img.photo {float:left; margin:0 14px 0 0; background:#fff; padding:10px; border:1px solid #cfcece;}
#details #venue h2 {font-size:1.4em; margin:0 0 8px; color:#c92525;}
#details #venue p {color:#7d7c7c; margin:0 0 4px 0; font-size:0.9em;}
#details #venue p strong {color:#727272;}

/* Details Average Ratings LARGE */
#details #venue .averageRating {margin:0 0 18px 0;}
#details #venue .averageRating img {margin:0 10px 0 0;}
#details #venue .averageRating img.rating_0,
#details #venue .averageRating img.rating_1,
#details #venue .averageRating img.rating_2,
#details #venue .averageRating img.rating_3,
#details #venue .averageRating img.rating_4,
#details #venue .averageRating img.rating_5 {height:16px; width:96px; background:transparent url('../Images/Qype/sprite.png') top left no-repeat;}
#details #venue .averageRating img.rating_0 {background-position:0 -230px;}
#details #venue .averageRating img.rating_1 {background-position:0 -214px;}
#details #venue .averageRating img.rating_2 {background-position:0 -198px;}
#details #venue .averageRating img.rating_3 {background-position:0 -182px;}
#details #venue .averageRating img.rating_4 {background-position:0 -166px;}
#details #venue .averageRating img.rating_5 {background-position:0 -150px;}
#details #venue .averageRating span {position:relative; top:-2px; color:#434343; font-size:0.8em; font-weight:bold;}

/* Map */
#details #location {float:right; padding:10px;}
#details #location #map {width:260px; height:228px; border:1px solid #bebebe;}

/* Reviews */
#details #reviews {clear:both; padding:20px 10px;}
#details #reviews h3 {color:#c92525;}
#details #reviews p.noReviews {font-size:0.9em; font-style:italic; padding:0 10px; line-height:1.5em;}
#details #reviews .review {margin:0 0 40px 0;}
#details #reviews .review p.date {margin:0; font-size:0.8em;}
#details #reviews .review .comment {font-size:0.9em; font-style:italic; padding:0 10px; line-height:1.5em;}

/* Details Average Ratings SMALL */
#details #reviews .rating {margin:0 0 6px 0;}
#details #reviews .rating img.rating_small_0,
#details #reviews .rating img.rating_small_1,
#details #reviews .rating img.rating_small_2,
#details #reviews .rating img.rating_small_3,
#details #reviews .rating img.rating_small_4,
#details #reviews .rating img.rating_small_5 {height:12px; width:63px; background:transparent url('../Images/Qype/sprite.png') top left no-repeat;}
#details #reviews .rating img.rating_small_0 {background-position:0 -306px;}
#details #reviews .rating img.rating_small_1 {background-position:0 -294px;}
#details #reviews .rating img.rating_small_2 {background-position:0 -282px;}
#details #reviews .rating img.rating_small_3 {background-position:0 -270px;}
#details #reviews .rating img.rating_small_4 {background-position:0 -258px;}
#details #reviews .rating img.rating_small_5 {background-position:0 -246px;}


/*========================================================
    Home Page Accordion
========================================================*/

#containerSub {width:976px; margin:30px auto 0; padding:1px; border:1px solid #e6e6e6; background:#fff;}
#containerSub #contentSub {background:url('../Images/Containers/Home/bg.gif') top center repeat-x #e6e6e6; width:938px; padding:20px 19px;}
#containerSub #contentSub ul#accordion {list-style-type:none; background:url('../Images/Accordion/bg.jpg') 0 39px no-repeat; height:299px;}
#containerSub #contentSub ul#accordion li {position:relative; float:left; font-weight:bold; height:39px; background:url('../Images/Navigation/navBg.gif') top left repeat-x;}
#containerSub #contentSub ul#accordion li.aboutHSBC {width:151px;}
#containerSub #contentSub ul#accordion li.aboutHSBC .slide {width:150px;}
#containerSub #contentSub ul#accordion li.aboutHSBC .slide p {width:130px;}
#containerSub #contentSub ul#accordion li.yourInductionProcess {width:229px;}
#containerSub #contentSub ul#accordion li.yourInductionProcess .slide {width:228px;}
#containerSub #contentSub ul#accordion li.yourInductionProcess .slide p {width:208px;}

#containerSub #contentSub ul#accordion li.locationGuide {width:143px;}
#containerSub #contentSub ul#accordion li.locationGuide .slide {width:142px;}
#containerSub #contentSub ul#accordion li.locationGuide .slide p {width:122px;}

#containerSub #contentSub ul#accordion li.learnDevelop {width:183px;}
#containerSub #contentSub ul#accordion li.learnDevelop .slide {width:182px;}
#containerSub #contentSub ul#accordion li.learnDevelop .slide p {width:162px;}
#containerSub #contentSub ul#accordion li.benefitsRewards {width:204px;}
#containerSub #contentSub ul#accordion li.benefitsRewards .slide {width:203px;}
#containerSub #contentSub ul#accordion li.benefitsRewards .slide p {width:183px;}
#containerSub #contentSub ul#accordion li.theEssentials {width:171px;}
#containerSub #contentSub ul#accordion li.theEssentials .slide {border:none;}
#containerSub #contentSub ul#accordion li.theEssentials .slide p {width:151px;}
#containerSub #contentSub ul#accordion li a {display:block; color:#fff; padding:10px 0 11px; border-right:1px solid #fff; font-size:1.5em; text-decoration:none; text-align:center;}
#containerSub #contentSub ul#accordion li.theEssentials a {border:none;}
#containerSub #contentSub ul#accordion li a:hover {background:url('../Images/Navigation/arrow.gif') left center no-repeat; text-decoration:none;}
#containerSub #contentSub ul#accordion li .slide {background:#663333; border-right:1px solid #fff; top:39px; overflow:hidden; height:260px; opacity:0.9;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";}
#containerSub #contentSub ul#accordion li .slide p {font-size:1.1em; line-height:1.8em; color:#fff; padding:10px; font-weight:normal;}
#containerSub #contentSub ul#accordion li .slide a {font-size:1.1em; display:inline; padding:0; border:none; text-decoration:underline;}
#containerSub #contentSub ul#accordion li .slide a:hover {background:none; text-decoration:none;}


/*========================================================
    Footer
========================================================*/

#footer {clear:both; width:976px; margin:26px auto; padding:1px; border:1px solid #e6e6e6; background:#fff;}
#footer #contentFooter {background:url('../Images/Containers/footer.gif') top center repeat-x #e7e7e7; padding:20px 18px 14px; font-size:1.1em;}
#footer #contentFooter p {color:#666; margin:0 0 12px;}