/* Reset & base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati;
    font-size: 15px;
    line-height: 1.5;
    color: #222;
    background: #f5f5f5;
}

/* Top thin bar */
.top-bar {
    background: #1a1a1a;
    color: #ccc;
    font-size: 12px;
    padding: 20px 20px;
    text-align: left;
}

/* Main dark header */
.main-header {
    background: #2c2c2c;
    color: #fff;
    padding: 28px 0 18px;
}

.header-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

.main-header h1 {
    font-size: 36px;
    font-weight: normal;
    letter-spacing: -0.5px;
    margin: 0;
}
.main-header h1 a:link, a:visited {
    color: #FFF;
    text-decoration: none;   /* optional */
}
.main-header h1 a:hover {
	color: #2d83d5;
}

/* Navigation tabs */
.main-nav {
    background: #2c2c2c;
    border-bottom: 1px solid #1a1a1a;
}

.main-nav ul {
    list-style: none;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 2px;
}

.main-nav li a {
    display: block;
    padding: 9px 18px;
    background: #4a4a4a;
    color: #ddd;
    text-decoration: none;
    font-size: 14px;
    border-radius: 4px 4px 0 0;
}

.main-nav li a:hover {
    background: #5a5a5a;
    color: #fff;
}

.main-nav li.active a {
    background: #fff;
    color: #222;
    font-weight: bold;
}

/* Content area */
.content {
    max-width: 960px;
    margin: 0 auto;
    padding: 30px 20px 50px;
    background: #fff;
    min-height: 600px;
}

.content h2 {
    font-size: 28px;
    font-weight: normal;
    margin-bottom: 18px;
    color: #111;
}

.content p {
    margin-bottom: 16px;
}

/* Macmillan banner */
.macmillan-banner {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 25px 0;
    padding: 12px;
}

.mac-logo {
    background: #00a651; /* Macmillan green */
    color: #fff;
    padding: 10px 14px;
    text-align: center;
    font-size: 13px;
    line-height: 1.25;
    min-width: 140px;
}

.mac-logo .we-are {
    font-size: 11px;
    letter-spacing: 1px;
}

.mac-logo strong {
    font-size: 18px;
    display: block;
}

.mac-logo .cancer {
    font-size: 11px;
}

.mac-cta .sponsor-btn {
    display: block;
    background: #f7941d; /* orange */
    color: #fff;
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.2;
    border-radius: 3px;
}

.mac-cta .sponsor-btn:hover {
    background: #e07d00;
}

.mac-text {
    font-size: 14px;
    flex: 1;
}

/* Map area */
.map-container {
    margin-top: 25px;
}

.map-placeholder {
    height: 380px;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    text-align: center;
}

.map-attribution {
    background: #f0f0f0;
    font-size: 11px;
    color: #666;
    padding: 4px 10px;
    text-align: right;
    border-top: 1px solid #ccc;
}

/* Footer */
.site-footer {
    background: #eaeaea;
    border-top: 1px solid #ccc;
    text-align: center;
    padding: 18px 20px;
    font-size: 13px;
    color: #555;
}

.site-footer a {
    color: #0066cc;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* Responsive tweaks */
@media (max-width: 700px) {
    .main-header h1 {
        font-size: 26px;
    }
    .macmillan-banner {
        flex-direction: column;
        text-align: center;
    }
    .main-nav ul {
        flex-wrap: wrap;
    }
}
/* clearfix */
.clearfix:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix{
  min-width: 0;		        /* trigger hasLayout for IE7 */
  display: inline-block;
  /* \*/ display: block;	/* Hide from IE Mac */
}

* html .clearfix{
/* \*/  height: 1%;	    /* Hide from IE Mac */
}
.cb {
	clear:both;
	  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;   /* allows horizontal scrolling instead of wrapping */
  white-space: nowrap;
	  flex: 0 0 auto;     /* don't shrink or grow */
  white-space: normal;
}
/* ===== POSTS ===== */
.post {
  margin-bottom: 40px;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 25px;
}
.post h2 {
  font-size: 22px;
  font-weight: normal;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}
.post h2 a {
  color: #222;
  text-decoration: none;
}
.post h2 a:hover {
  color: #1a5f9e;
}

.postheader {
  background: #f0f0f0;
  padding: 6px 10px;
  margin-bottom: 15px;
  font-size: 11px;
  color: #666;
  border-radius: 3px;
}
.postinfo a {
  color: #1a5f9e;
}

.postbody {
  font-size: 13px;
  line-height: 1.6;
}
.postbody p {
  margin-bottom: 12px;
}
.postbody img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border: 1px solid #ccc;
  padding: 3px;
  background: #fff;
}

.postcontrols {
  margin-top: 15px;
  font-size: 12px;
}
.postcontrols .comments {
  padding: 4px 10px;
  border-radius: 3px;
  color: #e5e5e5;
  float: right;
  margin: 0;
}
a.comments, .story p.postcontrols a.comments, .post p.postcontrols a.comments{
  background: transparent url(images/post-icons.png) no-repeat 2px bottom; /* fixed position from top */
  padding: 5px 10px 2px 19px;   /* top padding pushes text down */
  display: inline-block;         /* important */
  line-height: 1.2;
  color: #ed1f24;
  vertical-align: middle;
}

a.comments:hover, .story p.postcontrols a.comments:hover, .post p.postcontrols a.comments:hover{
  background: #ed1f24;
  color: #fff;
}

a.no.comments, .post p.postcontrols a.no.comments{
  color: #2d83d5;
}

a.no.comments:hover, .post p.postcontrols a.no.comments:hover{
  background: #2d83d5;
  color: #fff;
}
.pointer {
	cursor: pointer;
}
li.comment{
  background: transparent url(images/comment-div-bg.png) repeat-y left bottom;
  list-style-position: outside; /* ie 7 bugfix */
  position: relative;           /* ie 6 bugfix */
}

li.comment .wrap{
  background: transparent url(images/comment-div-start.png) no-repeat left top;
  min-height: 120px;
  position: relative;
  margin: 4px 0;
}

li.comment.with-avatars{ background-position: 96px bottom; }
li.comment.with-avatars .wrap{ background-position: 96px top; }
ol#comments, ol#comments li,
ol#trackbacks, ol#trackbacks li{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* threaded comments? */
ol#comments li.comment.depth-2,
ol#comments li.comment.depth-3,
ol#comments li.comment.depth-4,
ol#comments li.comment.depth-5,
ol#comments li.comment.depth-6,
ol#comments li.comment.depth-7,
ol#comments li.comment.depth-8,
ol#comments li.comment.depth-9{ margin-left: 14px; }

/* threaded comments, with avatars */
ol#comments li.comment.with-avatars.depth-2,
ol#comments li.comment.with-avatars.depth-3,
ol#comments li.comment.with-avatars.depth-4,
ol#comments li.comment.with-avatars.depth-5,
ol#comments li.comment.with-avatars.depth-6,
ol#comments li.comment.with-avatars.depth-7,
ol#comments li.comment.with-avatars.depth-8,
ol#comments li.comment.with-avatars.depth-9{ margin-left: 96px; }

a{
  color: #2d83d5;
  text-decoration: underline;
}

a:hover{
  color: #fff;
  background: #2d83d5;
  text-decoration: none;
}

li.comment .avatar{
  float: left;
  width: 90px;
  padding-top:10px;
}

li.comment .avatar img{
  padding: 3px;
  margin: 4px 10px;
  border: 1px solid #E7E8E6;
  border-radius: 4px;
  -moz-border-radius: 4px;
}
/* gravatar */
li.comment .avatar{
  float: left;
  width: auto !important;
  padding-top:6px;
  padding-left: 8px;
}

li.comment .details .text{
  background: transparent url(images/comment-bg.png) repeat-x left top;
  padding: .3em .8em;
  margin-top: 3px;
  min-height: 64px;
  font-size: 90%;
  color: #4e5359;
}

li.comment .details.admincomment .text{
  background: #f0f0f0 url(images/comment-bg-admin.png) repeat-x left top;
}
li.comment.with-avatars .details{ margin-left: 108px;}

li.comment .details .head{
  background: #f7f8f8 url(images/postinfo-bg.gif) repeat-x left bottom;
  padding: 2px 10px;
  margin: 0;
  display: block;
  color: #8f9090;
}

li.comment .details.admincomment .head{
  background: #59b2e4 url(images/postinfo-bg-admin.gif) repeat-x left bottom;
  color: #fff;
}

li.comment .details.admincomment .head a{ color: #fff; }
li.comment .details.admincomment .head a:hover{ background: none; color: #fcb722; }
/* sidebars */

#sidebar h2, #sidebar2 h2{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 130%;
  margin: 1em 0 .4em;
}

#sidebar li, #sidebar2 li{
  list-style-type: none;
  line-height: 140%;
  margin: 0;
  padding: 0;
  list-style-position: outside; /* ie 7 bugfix */
}

/* sidebar menu */

#sidebar ul.nav{
  margin-top: 1.8em;
}

#sidebar ul.nav li{
  list-style-type: none;
  background: transparent url(images/div-h.gif) repeat-x left bottom;
  padding: 2px 0 3px 0;
  margin: 0;
  position: relative;
}

/* no bg on the last menu item */
#sidebar ul.nav li.last{
  background: none
}


#sidebar ul.nav ul{
  margin: 0px 0 12px;
}

#sidebar ul.nav ul ul{
  margin: 0px 0 8px; /* lower bottom-padding for 2+ level menu */
}

/* 2nd level menu */
#sidebar ul.nav li li{
  background: none;
  padding: 0;
  margin-left: 25px;
}

/* 3rd ... n levels */
#sidebar ul.nav li li li{
  margin-left: 10px;
}

#sidebar ul.nav li a{
  background: none;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 110%;
  padding: 3px 27px 3px 8px;
  color: #000;
  cursor: pointer;
}

#sidebar ul.nav li a:hover{
  background: #efefee url(images/side-nav-bg.png) repeat-y right top;
  color: #ed2124;
}

#sidebar ul.nav li a span{
  background: transparent url(images/b1.png) no-repeat left 3px;
  padding-left: 17px;
  display: block;
}

#sidebar ul.nav li a:hover span{
  background-position: left -97px;
  color: #ed2124;
}

#sidebar ul.nav li li a{
  text-transform: none;
  font-size: 100%;
  padding: 0;
}

#sidebar ul.nav li li a:hover{
  background: none
}

#sidebar ul.nav li li a span{
  background: none;
  padding: 0;
}

#sidebar ul.nav li a.rss{
  background: transparent url(images/side-nav-rss.gif) no-repeat left top;
  display: none;
  width:26px;
  position: absolute;
  height: 13px;
  right: 0;
  padding: 0 4px 0 0;
  margin-top: 2px;
  top: 0;
  text-decoration: none;
  cursor: pointer;
  z-index: 5;
}

#sidebar ul.nav li li a.rss{
  visibility: hidden;
}

#sidebar ul.nav li a.rss:hover{
  background-position: 0px -13px;
}


/* sidebar content box */

#sidebar .box, #sidebar2 .box{
  margin: 16px 0 2px;
}

#sidebar .box h2, #sidebar2 .box h2{
  background: transparent url(images/side-box-top.png) no-repeat left bottom;
  padding: 4px 0 4px 20px;
  color: #8d8b8b;
  margin: 20px 0 0 0;
}

#sidebar .box ul, #sidebar2 .box ul{
  background: transparent url(images/side-box-bg.png) repeat-y left bottom;
  padding: 10px 20px;
  display: block;
}

#sidebar .box ul ul, #sidebar2 .box ul ul{ background: none; }
#sidebar .box ul li, #sidebar2 .box ul li{ line-height: 150%; }

#sidebar .box caption, #sidebar2 .box caption{
  text-align: left;
  font-weight: bold;
}

#sidebar-wrap1{
  background: transparent url(images/side-start.png) no-repeat left top;
  padding-left: 28px;
  margin-top: 36px;
  height: 100%;
}

#sidebar-wrap2{
  background: transparent url(images/side-bg.png) no-repeat right top;
  padding-right: 30px;
  height: 100%;
}



.profile .avatar img{
  padding: 3px;
  margin: 0 6px 6px 0;
  border: 1px solid #E7E8E6;
  border-radius: 4px;
  -moz-border-radius: 4px;
}

.profile .info{
  margin-left: 148px;
}
.info a:visited {
	color:#2d83d5;
}
p.im{
  margin: .1em 0 .2em;
  padding: 1px 0;
}

.post .postbody img, .attachment img, .navigation .alignleft img, .navigation .alignright img{
  padding: 3px;
  margin: 4px 10px;
  border: 1px solid #E7E8E6;
  border-radius: 4px;
  -moz-border-radius: 4px;
}
.navigation{
  font-size: 80%;
  color: #c4c3c1;
  margin: 0;
  padding: 0;
}

.navigation a{
  text-decoration: none;
  color: #d2d0cf;
}

.navigation a:hover{
  background: none;
  color:#ed1f24;
}
#page-wrap1{ background: transparent url(images/header-bg.jpg) repeat-x left top; }
#page-wrap2{
  background: transparent url(images/header-center.jpg) no-repeat center top;
  height: 200px;
  min-height: 500px;
  width: 100%;
  display:block;
}

/* actual layout width: default is 960px (for 1024x768+); 100% = fluid width */
#page{
  width: 960px;
  min-width: 780px;
  margin:0 auto;
}

/* content area (sidebars + main) */
#main-wrap {
  position:relative;		/* IE7 overflow bugfix */
  clear:both;
  float:left;
  width:100%;
  overflow:hidden;			/* chops off any overhanging divs */
}

#mid-wrap, #side-wrap {
  float:left;
  width:100%;
  position:relative;
}

#mid, #sidebar, #sidebar2 {
  float:left;
  position:relative;
  padding:0;
  overflow:hidden;
}


/* no sidebar? */

#page #main-wrap #mid-wrap { right:100%; }
#page #main-wrap #side-wrap { right:0; }

#page #main-wrap #mid {
  width:100%;			/* main column width */
  left:100%;			/* same */
}


/* if sidebar exists... */

#page.with-sidebar #main-wrap #mid-wrap { right:0%;   /* width of the 2nd column, 0 because it doesnt exist */ }
#page.with-sidebar #main-wrap #side-wrap { right:66%; /* width of the main column */ }

#page.with-sidebar #main-wrap #mid {
  width:66%;			/* width of main column */
  left:66%;				/* same */
}

#page.with-sidebar #sidebar {
  width:30%;			/* width of the sidebar */
  float:right;
right:30px;
	pointer-events: auto;
}
.sidebarcontainer {
	width:960px;
	min-width:780px;
	margin: auto;
	position:absolute;
	top:0px;
	pointer-events: none;
}

/* if 2nd sidebar exists... */

#page.with-sidebar2 #main-wrap #mid-wrap { right:25%; }
#page.with-sidebar2 #main-wrap #side-wrap { right:25%; }

#page.with-sidebar2 #main-wrap #mid {
  width:50%;			/* width of main column */
  left:50%;
}

#page.with-sidebar2 #main-wrap #sidebar {
  width:30%;			/* width of the sidebar (narrower than on 2 column pages)  */
  left:50%;
}

#page.with-sidebar2 #main-wrap #sidebar2 {
  width:20%;            /* width of 2nd sidebar */
  left:50%;

}

#sidebar2-wrap{
  margin-top: 230px;
  padding-left: 10px;
}


#mid-content{
  margin: 40px 0 10px;
}
.inside a {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati;
    font-size: 12px;
   color: #2d83d5;
	text-decoration: none;
}

.inside a a:visited {
   	color: #fff;
	text-decoration: none;
}
/* no border on smilies */
img.wp-smiley, .post .postbody img.wp-smiley, .attachment img.wp-smiley{
  padding: 0;
  margin: 0;
  border: 0;
}
img.wp-smiley { vertical-align: -20%; }
.alignleft { float: left; }
.alignright { float: right; }