@charset "UTF-8";
/* CSS Document */
body {background: url(/_img/mytrip/backgrounds/body.png) left top repeat-x #e6f7fc; color: #333;}


body#photos {background:none;}

dt { border-top: 1px dotted #ccc; clear:  padding: 5px 0; float: left;  width: 175px; line-height: 1.4; font-weight:bold}
dd { padding: 3px 0; border-top: 1px dotted #ccc; border-bottom: none; line-height: 1.4; float:left;margin:0; width:225px;}

dl.expanded dt{width:150px;}
dl.expanded dd{float:none;width:300px;}

table.departments th#leftcol {width:20%;background:none;}
table.departments th#rightcol {background:none;}
table.departments td.description p {padding:5px 0;}

br#spacer{padding:0;margin-top:5px;}

/*.wide_infobox dt {width:400px;}
  .wide_infobox dd {width:450px;text-align:right;} */

h1 { background: #efefef; border-bottom: 1px dotted #999; color: #333; margin: 10px 0 1em; padding: 5px;}
h1 .subsidary { font-size: 0.8em; color: #999;}
h1.break { color: #000; margin:0; padding: 5px 13px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; font-size: 1.6em; width: 915px}

h2 { /*border-bottom: 1px solid #999; margin: 1em 0; padding: 0 0 3px;*/ background:#0a7894; color: #fff; margin: -5px -5px 5px -5px; padding: 5px 13px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px }

p { padding: 10px 0; margin:0}
form p { padding: 0; }

/* mytrip navigation */
#navigation ul.mytrip  { list-style: none; padding: 0; margin: 0; }
#navigation ul.mytrip  li { float: left; }
#navigation ul.mytrip a {  background: url(/_img/mytrip/backgrounds/navigation_link.png) left 50px repeat-x; color: #0a7894; border-right: 1px solid #fff; display: block; padding: 9px 22px; text-decoration: none; }
#navigation ul.mytrip a:hover {  background: url(/_img/mytrip/backgrounds/navigation_link.png) left top repeat-x; }


ul.sf-menu li li, ul.sf-menu li li li {
  background:#B0E8F5; /* TODO change it to a nice color or background */
  border-top:1px solid #FFFFFF;
}

#navigation .sf-menu li:hover, #navigation .sf-menu li.sfHover, #navigation .sf-menu a:focus, #navigation .sf-menu a:hover, #navigation .sf-menu a:active {
  background:#B0E8F5;
  color: #0a7894;
  text-decoration:none;
}

/* redefine .left and .right to two equal width column */
.housemates, .team { border: 1px solid #9c0; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin: 0 0 15px ; padding: 0 10px 10px; min-height:500px; width: 430px; float:left }
.team { float: right;}
.housemates h2, .team h2 { background: #9c0; margin: 0 -10px 10px; }
.wide_infobox { border: 1px solid #CDF0FA; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin: 10px 0 15px 0; padding: 5px; }
.wide_infobox h3 { margin: 12px 10px; padding: 7px 0 6px 8px; color:#333; font-size: 1.2em; background: #ccc; border-bottom: 1px dotted #333; }
.wide_infobox dl { margin-left: 18px}
p.indent {margin-left:100px}



/* nested three col layout my trip*/
.col1 { float: left; margin: 0; /*min-height: 352px;*/ width: 294px; border: 1px solid #0a7894; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin: 0 11px 20px 0; padding: 0 5px 5px; }
.col1.last {margin:0 0 20px;}
.col3 { float: left; margin: 0; /*min-height: 352px;*/ width: 437px; border: 1px solid #0a7894; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin: 0 11px 20px 10px; padding: 0 5px 5px;}
.col1 h2, .col2 h2, .col3 h2 {color: #fff; margin: 0 -5px 10px; padding: 5px 5px 5px 13px; background-color:#0a7894}
.col1 iframe {border: 1px solid #fff}
.col1 dl { margin-left: 15px}
.col1 dt { font-weight:bold}
.col1.countryfacts dl { margin: 10px 0; }
.col1.countryfacts dt { font-weight:normal; margin: 0; padding: 5px 5px 5px 0; width: 135px;}
.col1.countryfacts dd { margin: 0; padding: 5px 0; width: 145px;}
.col1 .casestudies { margin: 0 0 8px}
.case { clear: both; border-top: 1px dotted #ccc; padding: 5px 0;}
#mytrip_home .col1 {min-height:280px; position: relative;  padding: 0 5px 30px;}
.casefoot {margin-left: 10px; border-top: 1px dotted #009999; padding: 6px 0; position:absolute; bottom:0; width: 283px}
.col2 .blogentries { width: 275px; margin: 15px 8px; padding:0}
.col2 .blogentries a:link { color:#009999; text-decoration:underline;}
.col2 .blogentries a:hover { color:#000; text-decoration:none;}
.col2 .blogdate { font-size: 0.8em; color:#999}
p.blogentries { padding: 5px; margin: 0; border-top: 1px dotted #ccc;}
.update {border-top: 1px dotted #ccc; padding: 7px 3px 2px 0; clear:both; margin:0; text-align:right}
#mytrip_home p.update { border-top: 1px solid #999; position: absolute; bottom: 5px; right: 5px; width: 293px; }


/*redefine main block background colors to white - to sit on coloured body bg */
#header, #navigation { background: #fff; margin: 0 auto; padding: 0 10px; width: 940px; }
#navigation { background: url(/_img/mytrip/backgrounds/navigation.png) 10px top no-repeat #fff;}
#content { background: #fff;  font-size: 0.8em; text-align: left; padding: 5px 10px 20px; width: 940px; }





#footer { background: none; color: #333; font-size: 0.7em; margin: 0 auto 15px; padding: 10px 15px 15px; width: 920px; }
#footer a { color: #0a7894;}

.hidden { display: none; }

#loggedin { color: #0a7894;  margin: 5px 0 0; padding: 3px 3px 3px 15px; float: right; width: auto;}
#loggedin a#logout { background: #0bbede; border: 1px solid #0a7894; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: #fff; padding: 3px; text-decoration: none;}
#loggedin img { border: 1px solid #000; vertical-align: top; margin-left: 5px;}


/* Styles used in My Trip home page */

#mytimeline { background: url(/_img/mytrip/backgrounds/timeline.png) left 100% repeat;   border: 1px solid #0a7894; -moz-border-radius: 5px; -webkit-border-radius: 5px; height: 405px; margin: 0 0 20px; padding: 5px; position: relative; }

#mytimeline #line { background: url(/_img/mytrip/backgrounds/timeline-line.png) left bottom no-repeat; position: absolute;  width: 926px; height: 80px; bottom: 170px }
#mytimeline #userprogress {height: 33px; border-bottom: 3px solid #000; position: absolute; bottom: 204px; margin-left: 23px; width: 310px;}
#mytimeline #you { background: url(/_img/mytrip/backgrounds/you.png) left bottom no-repeat; width: 25px;  position: absolute; bottom: 203px; height: 33px; }
#mytimeline #key { background: url(/_img/mytrip/backgrounds/timeline_Key.png) left bottom no-repeat; width: 445px;  position: absolute; bottom: 0; height: 33px; margin-left: 255px}


#mytimeline .welcomemessage { background: #ffc; border: 1px solid #fc0; font-size: 1.2em;  padding: 25px; position: absolute; top: 60px; left: 60px; width: 740px; z-index: 100;}

.notification { background:url(/_img/mytrip/backgrounds/timeline_notice.png) left bottom no-repeat;  border-top: 2px solid #3366cc;  padding: 5px 5px 15px;  width: 115px;  }
.notification.complete { background:url(/_img/mytrip/backgrounds/timeline_notice_complete.png) left top no-repeat; border-bottom: 2px solid #9acc12; border-top: none; padding: 15px 5px 5px; }
.notification.overdue { background: url(/_img/mytrip/backgrounds/timeline_notice_overdue.png) left bottom no-repeat; border-top: 2px solid #c00; }

#content .notification p { border-top: 1px dotted #333; font-size: 0.8em; color: #003399; margin: 0; padding: 3px;}

.notification a:link, .notification a:visited { color: #003399;}
.notification a:hover { color: #000;}
.notification.overdue a:link, .notification.overdue a:visited { color: #990000;}
.notification.overdue a:hover { color: #000;}
.notification.complete a:link, .notification.complete a:visited { color: #360;}
.notification.complete a:hover { color: #360;}

#content .notification.overdue p, #content .notification p.overdue { border-top: 1px dotted #333; font-size: 0.8em; margin: 0; padding: 3px; }
#content .notification p:first-child { border-top: none;}


#content .notification.complete p { border-top: 1px dotted #333; font-size: 0.8em; color: #336600; margin: 0; padding: 3px;}
#content .notification p:first-child { border-top: none;}

.notification#now {  position: absolute; left: 6px; bottom: 230px; }
.notification#nowc { position: absolute; left: 6px; top: 235px; bottom: auto;}
.notification#n180 {  position: absolute; left: 136px; bottom: 230px; }
.notification#n180c { position: absolute; left: 136px; top: 235px; bottom: auto;}
.notification#n150 {  position: absolute; left: 264px; bottom: 230px; }
.notification#n150c { position: absolute; left: 264px; top: 235px; bottom: auto;}
.notification#n120 {  position: absolute; left: 392px; bottom: 230px; }
.notification#n120c { position: absolute; left: 392px; top: 235px; bottom: auto;}
.notification#n90 {  position: absolute; left: 520px; bottom: 230px; }
.notification#n90c { position: absolute; left: 520px; top: 235px; bottom: auto;}
.notification#n60 {  position: absolute; left: 649px; bottom: 230px; }
.notification#n60c { position: absolute; left: 649px; top: 235px; bottom: auto;}
.notification#n30 {  position: absolute; left: 776px; bottom: 230px; }
.notification#n30c { position: absolute; left: 776px; top: 235px; bottom: auto;}

#mytimeline h2 { background: #0a7894;  color: #fff; margin: -5px; padding: 10px 5px 5px; }
#mytimeline h2 a { color: #0a7894;}

/* Styles used in My Trip itinery */

.tablebg { background:url(/_img/mytrip/backgrounds/itineryTblBgd.jpg) repeat-y top left;  margin: 0; padding: 0 3px 0 2px; width: 940px; }
#itinerarytable {  margin-bottom: 0; width: 940px; }

#itinerarytable td, #itinerary table th { border-left: 1px solid #fff; padding: 2px;  }

#itinerarytable th { background: #000; color: #fff; height: 30px;}
#itinerarytable th.headerRoundL { background:url(/_img/mytrip/backgrounds/itineryTblHeadRoundL.png) no-repeat; font-size: 1.2em; text-align:center;padding-top: 10px;}
#itinerarytable th.headerRoundR { background:url(/_img/mytrip/backgrounds/itineryTblHeadRoundR.png) no-repeat top right; font-size: 1.2em; text-align:center;padding-top: 10px;}
#itinerarytable th.header1 { background:url(/_img/mytrip/backgrounds/itineryTblHeadBgd1.png) no-repeat; font-size: 1.2em; text-align:center;padding-top: 10px; }
#itinerarytable th.header { background:url(/_img/mytrip/backgrounds/itineryTblHeadBgd.png) repeat-x; font-size: 1.2em; text-align:center; padding-top: 10px;}

#itinerarytable td { height: 32px; text-align: center; line-height:32px;}

#itinerarytable td.date { background:url(/_img/mytrip/backgrounds/datesBgd.png) no-repeat 7px 0;color: #000;font-size: 1em; }
#itinerarytable td.date.start { color: #666; }
#itinerarytable td div.end { color: #666; background: #efefef; margin: 0 5px 0 0; height: 32px;}

#itinerarytable td.live { background: #fff; border: 1px solid #fff; color:#6CAEBF; vertical-align: top;}
#itinerarytable td.work { background: #fff; border: 1px solid #fff; color: #6caebf; vertical-align: top;}
*#itinerarytable td.work.department { background: #fff; border-left: 1px dotted #a3ddfa; color: #6caebf; vertical-align: middle;}
#itinerarytable td.extras { color:#999; vertical-align: top; }

#itinerarytable td img { display: block; -webkit-box-shadow: 3px 3px 10px #333;  -moz-box-shadow: 3px 3px 10px #333;  box-shadow: 3px 3px 10px #333; border: 4px solid #fff; margin: 5px auto;  }

#itinerarytable td img.normal { border: none; display: inline; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin: none;}

.housename { background: #d7fadd;-moz-border-radius:5px; -webkit-border-radius:5px;vertical-align: middle;}
.hospitalname { background: #c9eafb;-moz-border-radius:5px; -webkit-border-radius:5px; vertical-align: middle;}
.department { background: #86b5e4;-moz-border-radius:5px; -webkit-border-radius:5px; vertical-align: middle; color: #fff;}
.addonname { background: #fde6fd;-moz-border-radius:5px; -webkit-border-radius:5px; vertical-align: middle; margin: 0 5px 0 0; }
.noaddons { background: #efefef;-moz-border-radius:5px; -webkit-border-radius:5px; vertical-align: middle; }
.noaddons a { color: #666;}
#itinerarytable .tableFoot {background:url(/_img/mytrip/backgrounds/itineryTblFootBgd.png) no-repeat; width: 940px; height: 17px;}


/* Styles used in My Trip hospitals & houses */

#photobox { float: left; width: 365px; margin: 0;}
#infobox { float: left; width: 430px;  margin-top: 20px }

/* unless there is ie7.js on the site (talk to Simon) this will cause a double margin bug in ie6 */
.person { border: 1px solid #ccc; float: left; font-size: 0.85em; margin: 4px; padding: 5px; text-align: center; width: 120px; height: 165px; }
.person img { padding-bottom: 5px;}

.person_details {clear:both;}

img.staffmember {margin:0 auto;}

/*.infobox { border: 1px solid #9ACC12; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin-bottom: 15px; padding: 5px; margin:10px; width: 908px; float:left}
.infobox h2 { background:url(/_img/mytrip/backgrounds/homepage_h2b.png); color: #000; margin: -5px; padding: 5px 5px 5px 13px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px}
#infobox .leadin {font-size:1.2em;}
.infobox dl { margin: 10px 0 10px 125px}
.infobox dt, .interests dt { font-weight:bold} */
.interests dt { margin: 0 0 0 10px}

.experience { border: 1px solid #cdf0fa; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin: 0 0 15px 0; padding: 5px 9px 5px 9px;  width: 457px; float:left}

.interests { border: 1px solid #cdf0fa; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin: 10px auto; padding: 5px; width: 448px;}

#popup #wrapper { border:1px solid #CDF0FA; margin:10px 0 15px; width:500px; background:#FFFFFF none repeat scroll 0 0; font-size:0.8em;  padding:5px 10px 20px; text-align:left; }

#popup #wrapper .download {font-size:0.8em;}

#cola {float:left; margin:0 10px 15px 0;width:460px;}
#colb {float:right; margin:0 0 15px 10px; width:460px;}

.myphoto .known img {width:120px;height:120px;text-align:left;}
.myphoto .unknown img {width:26px; height:26px;padding:30px;}

.placeleft {float:left;}

p.unknown {padding:5px 5px;float:left;border:1px solid #ccc;text-align: center; color:#003399;}
p.known {padding:0 5px;float:left;text-align: center; color:#003399;}

div.unknown {padding:5px 5px;text-align: center; color:#003399;}
div.known {padding:0 5px;text-align: center; color:#003399;}

#deptlist ul { list-style: none; margin: 0; padding: 0; }
#deptlist ul li { border-top: 1px dotted #ccc; list-style: none; margin: 0; padding: 5px;}

/* TOOLTIP STYLING START */
#tooltip {
    display:none;
    background:transparent url(/_img/backgrounds/black_arrow-trans.png);
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#fff;
    z-index: 150;
}

#mytrip_home .col1, #mytrip_home .col2 {min-height:280px; position: relative;  padding: ;}

/* remove margins from the image */
#mytrip_home .items img, #hospital .items img, #house .items img {
	margin:0;
}

/* make A tags our floating scrollable items */
.items a {
	display:block;
	float:left;
	margin:20px 11px;

}

/* scrollable should not disable gallery navigation */
#gallery .disabled {
	visibility:visible !important;
}

#gallery .inactive {
	visibility:hidden !important;
}

.photogallery, .family { float: left; margin: 0; min-height: 50px; width: 926px; border: 1px solid #CDF0FA; -moz-border-radius: 5px; -webkit-border-radius: 5px; height: 180px; margin: 1px 0 20px; padding: 5px; }

.photogallery h2, #quickfacts h2, #house .family h2{color: #fff; margin: -5px -5px 10px; padding: 5px 5px 5px 13px; background-color:#0a7894;}

#house .photogallery, #house .family { border: 1px solid #9c0;}
#house .photogallery h2, #house .family h2 { background: #9c0;}
#photostrip { margin: 20px 10px 0;}
#photostrip img { margin-right: 5px; border: 5px solid #fff}

#quicksummary { background: #fff; float: left; border: 1px solid #CDF0FA; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin: 1px 20px 20px 0; padding: 5px; width: 590px; }
#quickfacts { background: #fff; float: right; border: 1px solid #CDF0FA; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin: 1px 0 20px; padding: 5px; width: 300px;}
#quickfacts table { width: 300px; }
#quickfacts th {background: #efefef; border-bottom: 1px solid #ccc; line-height: 1.4; padding-right: 10px; width: 120px; vertical-align: top;}
#quickfacts td {border-bottom: 1px solid #ccc; vertical-align: top;}
#house #quicksummary, #house #quickfacts { border: 1px solid #9c0; min-height: 245px;}
#house #quicksummary h2, #house #quickfacts h2 { background: #9c0;}
.interests h2, #quickfacts h2, #quicksummary h2, .infobox_wide h2, #house h2, #hospital h2, .photogallery h2, .col1 h2 { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px;}


#mytrip_home .scrollable, #hospital .scrollable, #house .scrollable { width: 818px;}
#quickfacts h2 {background-color:#0a7894}

/*#partners #logos {height:150px; margin:10px 5px; padding:10px;}*/
.mytripoffer {display: block; float:left;  width:297px; padding:0; margin:5px;position: relative; overflow: hidden;-moz-border-radius: 5px; -moz-border-radius: 5px}
.offerpic { border-left: 1px solid #9acc12; border-right: 1px solid #9acc12; }
.offerpic a { display: block; width: 297px; height: 160px; text-align: center; vertical-align: middle;}
#partners .description {height: 80px;}
.logo {float: left; width: 160px;}
.offer {float: right; width: 120px; line-height: 17px;}
.discount {font-size: 1.3em; font-weight: bold; padding: 0;height:30px;}
.mytripoffer h2 { background: url(/_img/mytrip/backgrounds/offer_header.png) top left no-repeat #9acc12; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; color: #000; text-shadow: 0 1px 0 #e4ff99; padding: 8px; margin: 0;}
.offerlinks { background: #e4ff99; border: 1px solid #9acc12;-moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; padding: 5px 8px;}
.offerlinks p { margin: 0; padding: 0}
.offerlinks a { text-decoration: none; }

table#payments td { border-bottom: 1px dotted #ccc;}
table#payments td { padding-left:10px;padding-right:10px;}

.charge td { background: #fae6e6; border-bottom: 1px dotted #c00;}
.payment td { background: #ebf5d0; border-bottom: 1px dotted #9acc12;}
.balancerow td { border-top: 2px solid #000; font-weight: bold; }

a.pseudobutton2 { background: url(/_img/backgrounds/button_blue_2.png) left top repeat-x; border: 1px solid #0a7894; -moz-border-radius: 4px; -webkit-border-radius: 4px; color: #fff; display: inline; float: none; margin: 0 0 0 5px; padding: 5px; text-decoration: none; text-align: center; }
a.pseudobutton2:hover { background: url(/_img/backgrounds/button_blue_2.png) left -50px repeat-x; }

/* TOOLTIP STYLING END */

.nolink {cursor:default;}