@import url('Reset.css');

/*===========================================================
    HEADER
===========================================================*/
#header {width:990px; margin:0 auto; height:160px;}
#header #logo {float:left; margin:80px 0 0 15px; display:inline;}
#header #matchMeBanner {float:right; margin:0 45px 0 0;}
#header #matchMeBanner #banner2 a img {display: none}
/* ------------ HEADER NAVIGATION -------------- */
#navigation {background:#2660b2; color:#fff; font-size:1.7em;height: 30px;}
#navigation ul {width:990px; margin:0 auto; list-style-type:none;height: 30px;}
#navigation ul li {float:left; margin:0 2px 0 0; display:inline;height: 30px; }
#navigation ul li a {display:block; color:#fff; padding:5px 12px;}
#navigation ul li a.active, #navigation ul li a:hover {background:#00acdc; display:block;}

/* -------------- CRUMBTRAIL -------------- */
#crumbTrail {background:url('../Images/crumbtrail-bg.gif') top center repeat-x #e4e4e4; height:32px; clear:both;}
#crumbTrail .list {width:975px; margin:0 auto; position:relative; top:9px; color:#6b6b6b; padding:0 0 0 10px;}
#crumbTrail .list .youreHere {color:#848383;}
#crumbTrail a {color:#00acdc; font-weight:bold;}
#crumbTrail a:hover {text-decoration:underline;}

/*===========================================================
    MAIN CONTENT
===========================================================*/
#content {width:960px; padding:0 15px; margin:40px auto 50px; color:#464646;}
#content a:hover {text-decoration:underline;}
.hr {height:13px; background:url('../Images/timeline-bullet.gif') top left no-repeat; border-bottom:1px solid #c6c6c6; margin:0 0 20px 0; clear:both;}
.hr hr {display:none;}

/* ---------- LEFT HAND NAVIGATION --------------- */
ul#leftHandNav {float:left; margin:0 25px 0 0; display:inline; width:145px; list-style-type:none; font-size:1.2em;}
ul#leftHandNav li {border-bottom:1px solid #92afd8; padding:12px 0; float:left; width:145px;}
ul#leftHandNav li a {color:#2660b2; padding:0 0 0 12px; display:block;}
ul#leftHandNav a.active {background:url('../Images/nav-bullet.gif') left center no-repeat;}
ul#leftHandNav li a.active {font-weight:bold; color:#00acdc;}
ul#leftHandNav li ul li {margin-left: 20px;border: none}

/* ----------- HOMEPAGE *---------------------------*/
#homeWrap {width: 960px;font-size:1.4em;  }
#homeLeft {width: 600px;float: left;margin-right: 20px;}
#homeRight {float: left; width: 280px;}
/* ----------- CENTRAL CONTENT COLUMN ------------- */
#centralCol {font-size:1.4em; width:790px; float:left;}
#centralCol ul, #centralCol ol {margin:0 0 25px 40px;}
#centralCol ul li, #centralCol ol li {margin:10px 0; line-height:1.3em;}

#centralCol ul.pageNotFound {padding:4px 0 0; width: 500px;}
#centralCol ul.pageNotFound li {float: none; list-style: none; width: 500px; }
#centralCol h2.name {margin:0 0 0 0;}
#centralCol p.role {font-weight:bold; color:#666;}
#centralCol p.quote, #homeWrap p.quote {padding:10px 15px 0 20px; font-style:italic; color:#666; font-size:1.2em;}
#centralCol .quote {padding:0 15px 0 20px;}
#centralCol .quote p {font-style:italic; color:#666; font-size:1.2em;}
#centralCol p.quoteAuthor {text-align:right; position:relative; top:-12px;}
#centralCol #privacy p {font-size:0.9em;}

#centralCol img.photo {margin:0 auto 1.6em; display:block; border:1px solid #ccc; padding:14px;}
#centralCol img.ctrImage {display:block; margin:0 auto 1.6em; display:block;}
#centralCol img.profilePhoto {float:right; border:1px solid #ccc; padding:7px; margin:0 0 4px 12px;}

/* Career Timelines */
#careerLeft {float:left; width:385px;}
#careerLeft h2 {margin:0 0 8px 0;}
#careerLeft p strong {color:#666;}
#careerLeft ul {list-style-type:none; margin:0;}
#careerLeft ul li {padding:15px 10px 30px; margin:0; color:#828282; background:url('../Images/timeline-bullet.gif') left bottom no-repeat #fff;}
#careerLeft ul li h3 {color:#b6b6b6; font-size:1.4em;}
#careerLeft ul li.odd {border-top:1px solid #c6c6c6; border-bottom:1px solid #c6c6c6; background:url('../Images/timeline-bullet.gif') left bottom no-repeat #f8f8f8;}

#careerRight {float:left; width:385px; margin:0 0 0 20px; display:inline;}
#careerRight h2 {margin:0 0 8px 0;}
#careerRight p strong {color:#666;}
#careerRight ul {list-style-type:none; margin:0;}
#careerRight ul li {padding:15px 10px 30px; margin:0; color:#828282; background:url('../Images/timeline-bullet.gif') left bottom no-repeat #fff;}
#careerRight ul li h3 {color:#b6b6b6; font-size:1.4em;}
#careerRight ul li.odd {border-top:1px solid #c6c6c6; border-bottom:1px solid #c6c6c6; background:url('../Images/timeline-bullet.gif') left bottom no-repeat #f8f8f8;}

/* Typical Week */
#typicalWeek ul {list-style-type:none; margin-left:0; font-size:1.3em;}
#typicalWeek ul li {float:left; margin:0; border-right:1px solid #00acdc; padding:0 10px;}
#typicalWeek ul li.last {border:none;}
#typicalWeek h4 {font-weight:bold; color:#666; margin:0 0 2px 0;}

/* History */
#history {padding:20px 0 0;}
#history h3 span {color:#666;}

/* Alumni Drops */
#centralCol #alumni h2.reveal {cursor:pointer; font-size:1.2em; margin:0 0 16px 0;width: 300px;float: left;}
#centralCol #alumni .answer {}
#centralCol #alumni .wrap {padding:0 15px 25px;clear: both}
#centralCol #alumni .wrap p strong {font-style:normal;}
#centralCol #alumni .quote {font-size:0.9em;}
#centralCol #alumni p.quote {font-size:1.0em;}
#centralCol #alumni .backToTop {float: right}

/* FAQs Drops */
#centralCol #faqs {padding:15px 0 0 0;}
#centralCol #faqs h2.reveal {cursor:pointer;  margin:0 0 16px 0;}
#centralCol #faqs .wrap {padding:0 15px 25px;}

/* ----------- LEFT CONTENT COLUMN ------------- */
#centralColL {float:left; width:485px;}

/* ----------- RIGHT CONTENT COLUMN ------------- */
#centralColR {float:right; width:280px;}
#centralColR #yearSelector {background:#f8f8f8; padding:12px;}
#centralColR #yearSelector ul {list-style-type:none; margin:0;}
#centralColR #yearSelector ul li {float:left; padding:0 9px; margin:8px 0;}

/*----------- CAROUSEL ------------------------- */
#carousel {background:url(../Images/carousel-images/carouselRepeat.gif) repeat-x top left #e3e3e3; margin-top: -40px; padding: 10px 0 40px 0; position: relative; height:270px;}
#carousel h2 {text-align: center; padding: 20px 0;}
#carousel img.loading {position: absolute; right: 15px; bottom: 15px;display: none}
#carousel #carouselSlider {position: relative;width: 9000px;}
#carousel #carouselSlider a {display: block; float: left;outline: 0;}
#carousel #carouselSlider a img {border: 4px solid #b8b8b8; margin-right: 15px; outline: 0; }
#carousel #carouselSlider a.selected img,#carousel #carouselSlider a:hover img {border: 4px solid #00acdc}
#carousel #viewport {height: 165px;overflow: hidden;position: relative; margin: 0 auto;}
#carousel a#button_backwards,#carousel a#button_forwards {position:absolute; text-indent: -2000em;outline: 0; display: none;}
#carousel a#button_backwards {top: 150px; left: 30px;width: 30px; height: 35px;background: transparent url(../Images/carousel-images/btn_bck.gif) no-repeat;}
#carousel a#button_forwards {top: 150px; left: 876px;width: 30px; height: 35px; background: transparent url(../Images/carousel-images/btn_forwards.gif) no-repeat;}
#carousel a#button_forwards.disabled { background: transparent url(../Images/carousel-images/btn_forwards_disabled.gif) no-repeat;}
#carousel a#button_backwards.disabled { background: transparent url(../Images/carousel-images/btn_bck_disabled.gif) no-repeat;}
#carouselHolder {padding-top: 400px;}
#carousel #carouselSub {float: left;width: 100%;}
#carousel #carouselSub h3 {text-align: center;width: 400px;margin: 20px auto 0;font-size: 1.7em;}
#carouselOuter {margin-top: -360px; }
#carouselContent #carouselCopy {width: 566px;float: left;display: inline;font-size: 1.2em;margin: 0 35px;}

/* VIDEO PROFILES */
#videoProfiles {background: #e2e2e2 url(../Images/Profile-video-images/profileBck.gif) repeat-x;width: 804px;position: relative;display: none;}
/* if javascript is enabled */
.js #videoProfiles {display: block;}
h2.showTranscripts {margin-top: 20px;}
#videoProfiles #vidContainerOuter {position: absolute; left: 20px; top: 20px;background: transparent url(../Images/Profile-video-images/profilesVidBck.gif) no-repeat; width: 492px; height: 292px; }
#videoProfiles #vidContainerOuter h2 {margin:  140px 0 0 85px;}
#videoProfiles #videoContainer {width: 453px; height: 253px; margin-bottom: 45px;position: absolute; top: 25px; left: 17px;}
#videoProfiles ul {margin: 0 0 0px 40px; padding: 340px 0 40px 0;}
#videoProfiles ul li {list-style: none;float: left;display: inline; margin-right: 31px;}
#videoProfiles ul li a img {border: 2px solid #ccc;outline: 0;}
#videoProfiles ul li a { color: #2660b2;font-weight: bold;font-size: 1.2em; padding-bottom: 20px; display: block;outline: 0;}
#videoProfiles ul li a:hover {text-decoration: none}
#videoProfiles ul li a:hover img {border: 2px solid #36c3ee}
#videoProfiles #detailsContainer {position: absolute; right: 90px; top: 45px;}
#videoProfiles #detailsContainer  .details {width: 190px; display: none;padding:0 0 0 10px;  }
#videoProfiles #detailsContainer  .details .name { font-size:1.5em; font-weight:normal; color:#00acdc; }
#videoProfiles #detailsContainer  .details .title { font-size:1.3em; font-weight:normal; color:#00acdc; }
#videoProfiles #detailsContainer  .details .intro { font-size:1.1em; font-weight:normal; color:#000; }

/* SLIDER -VIDEO PROFILES PAGE */
#slider-wrap a:focus {outline:none;}

#slider-wrap {width: 730px; margin: 20px 0 0 0px;}
/* If javascript is enabled then hide the transcripts */
.js #slider-wrap {display: none}
#slider-wrap h2 {color: #2660b2;}
#slider {margin:30px 0; border-bottom:1px solid #ccc;}
#slider-wrap #tabs {margin: 0 0 0 -15px;}
#slider-wrap #tabs li {list-style: none; float: left;}
#slider-wrap #tabs li a {color: #6e6e6f; border-right: 1px solid #6e6e6f;padding: 0 15px;}
#slider-wrap #tabs li a.last {border: none}
.stripViewer {position:relative; overflow:hidden; width:730px; clear:both; background:#fff;}
.stripViewer .panelContainer {position:relative; left:0; top:0; width:100%; list-style-type:none;}
.stripViewer .panelContainer .panel {float:left; height:100%; position:relative; width:730px;}
.salesTitle {clear: left}

/* ALT CONTENT STYLES */
#avatar p.quote, #homeWrap p.quote {background-color: #f8f8f8; color: #4175bc; font-style: italic;padding-bottom: 10px;}

/* OUR LEADERS + alumni */
#ourLeaders ul, #alumni ul {margin: 0 0 25px 0px;}
#ourLeaders ul li, #alumni ul li {list-style: none}

/* APPLY */
#keydates-table table {border: 2px solid #00acdc; border-right: 0; border-bottom: 0;}
#keydates-table table tr td {border-right: 2px solid #00acdc;padding: 10px; border-bottom: 2px solid #00acdc; }


/*---------------------- FLASH ALT CONTENT STYLES ------------------------- */

/* Enforce some heights on flash content for browsers that support min-height */
#locationsFlashWrap,#careerAltContentContainer,#avatar,#historyAltContainer, #typicalWeekContainer {min-height: 480px; }
#orgStructureAltContent {min-height: 600px;}
#matchMe {min-height: 500px;}

/* ORG Structure */
#orgStrucAltContent .primaryCare {color: #0f5fe6; margin-top: 20px;}
#orgStrucAltContent .secondaryCare {color: #20b510;margin-top: 20px;}

/* Locations map alt */
#locationsFlashWrap ul li {list-style: none; margin-left: 0; padding: 0;}

/* MATCH ME */
#matchme { font-size:1.4em; }
.mmLeft { float:left;width:250px; }
.mmRight { float:left;width:486px; }
#radioList table input {  }
#radioList table label { display:inline; }


/*===========================================================
    FOOTER
===========================================================*/
#footer {width:940px; margin:0 auto; padding:75px 25px 15px; background:#e0e0e0; font-size:1.4em;}
#footer a {color:#666;}
#footer a:hover {text-decoration:underline;}
#footer p {margin:0; color:#666;}
#footer p.left, #footer p.right {width:380px;}
#footer p.right {padding:17px 0 0; text-align:right;}
#footer a.rss {position:relative; top:2px; left:4px;}


/*===========================================================
    USEFUL STUFF
===========================================================*/
.screenReaderMenu {position:absolute; top:-1000px; left:-1000px; font-size:1px; line-height:1px;}
.newline {clear:both; overflow:hidden; height:0px;}
.right {float:right;}
.left {float:left;}
.textRight {text-align:right;}
.textLeft {text-align:left;}
.last {border:none;}
p.btop {text-align:right; margin-top:-8px;}
object {outline: 0;}



/*================================================================================
Images where png fix is required for ie6, list them here at ID/class level please 
=================================================================================*/
ul#homeNav li.cooperative,
ul#homeNav li.assessmentCentre,
ul#homeNav li.rolesAndBenefits,
ul#homeNav li.whatsNext,
.theCooperativeTitle,
.rolesBenefitsTitle,
.assessmentCentreTitle,
.whatsNextTitle,
.applyTitle,
.telephoneInterviewTitle,
.onlineTestingTitle,
.assessmentCentreSmallTitle,
.startingWithUsTitle,
.salesTitle,
.servicesTitle,
.debtManagementTitle,
.benefitsTitle,
.pageNotFoundTitle,
.yourOptionsTitle,
.errorTitle,
#sections ul#tabs li.sales a,
#sections ul#tabs li.sales a:hover,
#sections ul#tabs li.customerService a,
#sections ul#tabs li.customerService a:hover,
#sections ul#tabs li.debtManagement a,
#sections ul#tabs li.debtManagement a:hover,
.tips .head,
.tips .main,
.tips .foot,
.gettingHere .head,
.gettingHere .main,            
.gettingHere .foot,
#login .welcomeTitle,
#login #entry .enterDetailsTitle,
#login #entry .emailTitle,
#login #entry .passwordTitle,
.leaf
{behavior:url('/iepngfix.htc');}