/* Float required for nested floats to work properly */
/* To center the design change left and right margins to 0 for #div and #footer */
/* Sass Variables and mixins */
/* Reset CSS */
/* Includes some blog styles */

@import url("cookies_alert.css");
@import url("banner.css");

html {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  font-weight: normal; }


@media only screen and (min-device-width : 1024px) {
  body {
    font-family: verdana;
    font-size: 9pt;
    line-height: 1.4em;
    background: #eee;
    margin: 0;
    padding: 0; }
}
body {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  font-size:16px;
  font-weight: normal;
  position: relative;
  padding: 0;
  margin: 0;
  font-family: verdana, helvetica, arial, sans-serif;
  background: #eee; }
  
i, cite, em, var, address, dfn {
  font-style: italic;
}
  
p {
    position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0; }

img {
  border: 0;
  position: relative;
  }
  img + h3 {
    margin-top: 1em; }
  img.left, img.right {
    display:block;
    z-index:1;    }
  img.left {
    margin: 0 1em 1em 0;
    float: left; 
  clear: left; }
  img.right {
    margin: 0 0 1em 1em;
  float: right;
  clear: right;}
 
.icon {border:0; width:16px;}
 
.image {
  margin:0;
  padding:0;
  z-index: 10;
/*  width: 40%; */
}
.image.small img {
  width: auto;
}
.float-left {
  float:left;
  clear:left;
  margin-right: 1em;
}
.float-right {
  float:right;
  clear:right;
  margin-left: 1em;
}
.image.border img, img.border {
  border: #999 1px solid;
  }
.image img {
  width:100%;
}

a:link, a:visited {
  text-decoration: none;
  color: #04c;
}

figcaption a, figcaption a:link, figcaption a:visited {
    color: #69f;
    }

/*MCB fix so reinit is only partial Jul08`*/
/* End Reset CSS */
div.white {
  display: none; }

#skip {
  position: absolute;
  top: -999999em; }

.thetable .two .content .aside, .thetable .two .content .alert, .thetable .two .content .highlight {
  padding: 1em;
  margin: 1em 0;
  font-weight: normal;
  background-color: #FFF480;
  color: #000; 
  border-radius: .5em;
  overflow: hidden;
  }
  
.thetable .two .content .alert {
  background-color: #fdd;
  color: #900;
}

b .blackxsmall {
  display: block;
  font-weight: normal; }

#content h3, h1.page-title {
  font-size: 2em;
  font-weight: normal;
  line-height: 1.3em;
  padding: 0 0 .5em;
  border-bottom: #999 1px solid;
  margin: 0 0 .5em;
  color: #111; }
#content h3 + p:nth-of-type(1), h1.page-title + p:nth-of-type(1), #content h3 + a + p:nth-of-type(1), h1.page-title + a + p:nth-of-type(1), #content h3 + img + p:nth-of-type(1), h1.page-title  + img + p:nth-of-type(1) {
  font-size: 1.3em;
  font-weight:normal;
  line-height: 1.4em;
}
#content h3, h1.page-title  {
    margin-top: 1em;
}
#content h3:nth-child(1), h1.page-title :nth-child(1) {
    margin-top:0;
}
h4, .entry-content h1 {
  font-size: 1.5em;
  line-height:1.3em;
  font-weight: normal; }

h5, .entry-content h2 {
  font-size: 1em; }

h6, .entry-content h3 {
  font-size: 1em;
  margin: 1em 0;
  color: #444; }

a:link.more, a:visited.more {
  color: #00f; }
a:hover {
  text-decoration: underline; }
  a:hover.more {
    color: #00f; }

/* Layout */
/* Main pages (ie not the front page */
.thetable {
  position: relative;
  display: block;
  margin: 0;
  border: 0;
  clear: both;
  border-spacing: 0; }
  .thetable .tablerow {
    padding: 1.5em;
    background: #fff; }
  .thetable .two .content {
    overflow: hidden; }
    .thetable .two .content ul {
      list-style-type: disc;
      padding-left: 1em;
      padding-right: 0.5em;
      margin: 1em 0 1em 1em; }
      .thetable .two .content ul li {
        margin: .5em 0; }
        .thetable .two .content ul li ul li {
          list-style-type: circle; }
          .thetable .two .content ul li ul li ul li {
            list-style-type: square; }
    .thetable .two .content ol {
      list-style-type: decimal;
      padding-left: 1em;
      margin-left: 1em; }
      .thetable .two .content ol li {
        margin: .5em 0; }
    .thetable .two .content p {
      padding: 0;
      margin: 0 0 1em; }
    .thetable .two .content img {
      max-width: 522px; }

/* hide this from opera6 */
head:first-child + body div.thetable {
  height: 100%; }

.tablecell {
  border: 0;
  padding: 2em 0 1em;
  margin: 0;
  vertical-align: top;
  min-height: 100%;
  /* opera6 needs min-height but moz/IE needs height */ }

/* hide this from opera6 */
head:first-child + body div.tablecell {
  height: 100%; }

/* added for mozilla which worked for others too, but op6 still needed min-height so hide this rule */
.one, .two, .three {
  position: relative;
  float: left;
  background: #fff; }

.one {
  position: relative;
  width: 14em;
  margin-right: 1.5em;
  z-index: 5; }

.two {
  position: relative;
  overflow: auto;
  padding-top:1.25em;
  width: 34em;
  margin-right: 1.5em;
}
.two, #primary {
  /* Required for column to expand correctly, esp in IE */
  font-size: 1.2em;
  line-height: 1.4em; 
}

.three {
  position: relative;
  width: 16em;
  clear: right; }

/* End main pages */
#navbar, #header, #tools, .header_container, .strapline_container, .thetable, body > #content, .footer_container {
  display: block;
  width: 78em;
  margin: 0 auto;
  overflow: hidden;
  clear: both; }
  
#content p {
}

#tools, #header, .thetable {
  background: white;
  clear: both; }

#tools {
  padding: 1em 0 0;
  position: relative;
  height: 2em;
  background: #fff;
  /*  border-bottom: #dce9f4 1px solid;*/ }
  #tools form {
    position: absolute;
    top: 1em;
    left: 1em; }
  #tools p {
    position: absolute;
    top: 1em;
    right: 1em;
    margin: 0; }
  #tools form input, #tools p a {
    font-size: smaller; }

#skip {
  position: absolute;
  top: -999999em; }

div.header_container {
  /*border-bottom:#3975c6 .25em solid;*/ }
div.strapline_container {
  /*width:100%;
  background:#dce9f4;*/ }
div.footer_container {
  }

img {
  border: 0; }

#navbar a:link, #navbar a:visited {
  text-decoration: none;
  color: #000; }

#footer a:link, #footer a:visited {
  text-decoration: none;
  color: #000; }

#navbar a:hover, #footer a:hover {
  text-decoration: underline; }

#header h1 {
  width: 100%;
  background: white url(http://citizenshipfoundation.org.uk/g_lib/citfou_toplogo_07.gif) 0 bottom no-repeat;
  height: 48px;
  padding: 0;
  margin: 0;
  float: left;
  clear: both; }
  #header h1 a {
    display: block;
    position: absolute;
    left: -99999em; }

#header {
  position: relative;
  width: 78em;
  background: white; }
  #header h1 {
    color: #fff;
    position: absolute;
    left: -99999em;
    /* Bizarrely, setting this as 'top' caused a horizontal scroll bar to appear */ }
    #header h1 + a img {
      margin: 28px 25px 14px; } /* proportionate to the logo's pink square, as per brand identity */

#strapline {
  width: 100%;
  background: #dce9f4 url(http://citizenshipfoundation.org.uk/g_lib_css/girls_cutout.png) 38.1em bottom no-repeat;
  margin: 0;
  padding: 1em 0 1em;
  font-size: 1.5em;
  line-height: 1.3em;
  clear: both; }
  #strapline span {
    display: block;
    width: 25em;
    margin-left: 1em; }
  
/* Subnav */
#subnav {
  position: relative;
  clear: left;
  margin: 0;
  text-transform: capitalize; }
  #subnav a {
    text-transform: capitalize; }
    #subnav a:hover, #subnav a:visited {
      text-transform: capitalize; }
  #subnav ul {
    position: relative;
    margin: 0 1em;
    list-style: none; }
  #subnav li {
    display: inline-block;
    margin: 0;
    padding: 0; }
  #subnav a {
    display: inline-block;
    padding: 1em;
    color: #fff; }
  #subnav ul li a:hover {
    color: #000;}
  #subnav ul li.current a, #subnav ul li.current-menu-item a {
    background: #fff;
    color: #000; }
    #subnav ul li.current a:hover, #subnav ul li.current-menu-item a:hover {
      color: #000;
      background: #fff; }

/* // Subnav */

/* Level 3 & 4 navs */
#pagenav {
  padding: 0;
  font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
  color: #333;
  line-height: 1em; }
  #pagenav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: none;
    font-size: .9em; }
  #pagenav li {
    border-bottom: 1px solid #ff79ce;
    margin: 0;
    color: #000;
    text-decoration: none; }
  #pagenav h2 {
    margin: 0;
    line-height: 1.3em;
    background-color: #fff;
    padding: 0 0 .5em;
    border-bottom: 2px solid #ff79ce;
    font-size: 1em;
    font-weight: normal; }
    #pagenav h2 a:link, #pagenav h2 a:visited, #pagenav h2 a:hover {
      color: #000; }
  #pagenav li a {
    display: block;
    padding: .5em;
    color: #000; }
    #pagenav li a:hover {
      text-decoration: underline; }
  #pagenav ul li.current {
    font-weight: bold;
    text-transform: none; }
    #pagenav ul li.current a {
      color: #000;
      background-color: #ff79ce; }
      #pagenav ul li.current a:hover {
        color: #000;
        background-color: #ff79ce; }
    #pagenav ul li.current li a {
      color: #000;
      background-color: #eee; }
      #pagenav ul li.current li a:hover {
        color: #000;
        background-color: #eee; }
    #pagenav ul li.current ul {
      background: #fff;
      border-top: #fff 1px solid;
      font-size: inherit; }
    #pagenav ul li.current li {
      font-weight: normal;
      text-transform: none;
      border-bottom: #fff 1px solid;
      background: #eee;
      margin-left: 1em; }
  #pagenav ul.current {
    border-bottom: 1px solid #ff79ce; }
  #pagenav ul ul li.current a {
    font-weight: bold;
    text-transform: none;
    background: #999;
    color: #fff; }
  #pagenav ul li.current li.current a:hover {
    color: #fff;
    background-color: #999; }

/* // Level 3 nav */
#strands, #footer, .tablerow {
  position: relative;
  float: left;
  clear: both; }

#strands, #footer {
  padding: 0; }

#strands {
  width: 100%;
  background-color: #fff;
  padding: 1em 0 1em;
  margin-bottom: 0; }
  #strands h2 a, #strands h2 a:link, #strands h2 a:hover {
    /*color: #000; */ }
  #strands h2 #strand_1 h2 a, #strands h2 #strand_3 h2 a {
    /*color: #fff;*/ }
  #strands .project a:link, #strands .project a:hover {
    color: #fff; }
  #strands .news a:link, #strands .news a:hover {
    color: #000; }

#strand_1, #strand_2, #strand_3 {
  width: 24.65em;
  margin: 0 1em 0 0;
  float: left; }

#strand_1 {
  margin: 0 1em 0; }

#strand_1 h2 {
  border-bottom: #67C4BD .5em solid; }

#strand_2 h2 {
  border-bottom: #ffbf3b .5em solid; }

#strand_3 h2 {
  border-bottom: #DF0077 .5em solid; }

#strands h3 {
  font-size: 1em;
  text-transform: uppercase;
  font-weight: normal;
  margin: 0 .5em;
  padding: 0 0 0 20px;
  border: none; }
#strands .news h3 {
  background: url("http://citizenshipfoundation.org.uk/g_lib_css/newspaper.png") 0 0.5em no-repeat;
  padding-top: .5em;
  /*position:absolute;
  top:-9999em;*/ }
#strands .news h3 a, #strands .news p a {
  color: #000; }
#strands .project h3 {
  background: url("http://citizenshipfoundation.org.uk/g_lib_css/page.png") left no-repeat;
  color: #fff; }
#strands .project h3 a {
  color: #fff; }
#strands ul {
  margin-bottom: .5em; }
  #strands ul li {
    position: relative;
    padding: .5em 0 .5em;
    margin-bottom: .5em; }
    #strands ul li.news {
      padding: 0 0 .25em; }

#strand_1 li.news {
  background: #C4E8E5; }

#strand_2 li.news {
  background: #fff799; }

#strand_3 ul li.news {
  background: #FFC7E5; }

#strand_1 ul li.project {
  background: #1B4642; }

#strand_2 ul li.project {
  background: #4d4600; }

#strand_3 ul li.project {
  background: #7A0041; }


#strands ul li img {
  position: relative;
  left: .5em;
  width: 6em;
  height: 4.5em; }
#strands ul li p {
  position: absolute;
  top: .5em;
  left: 7.25em;
  margin: 0;
  padding-right: .5em;
  width: 12em;
  /* Not required, except to force IE7 to behave properly (CSS conditional statements caused IE8 to do strange things) */ }
#strands .project p, #strands .project p a {
  color: #fff; }
#strands li ul + a {
  font-size: .9em; }

#strand_3, #meta {
  margin-right: 0;
  clear: right; }

#strands span {
  display: block;
  font-weight: bold;
  font-size: smaller; }

/* Footer */

#footer {
  position: relative;
  width: 78em;
  clear: both;
  padding: 0 0 1em;
  background: #FEF6FD;
  background: #fdc4ea; /* Remove if/when style is removed from page.php */
 border-top: #ee6bd8 .25em dotted;
border-bottom: #ee6bd8 1px dotted;
  margin: 0;
}
  #footer li {
    float: left;
    width: 18.2em;
    margin-left: 1em;
    margin-top: 1em; }
  #footer h2 {
    margin: 0;
    font-size: initial; }
  #footer li li {
    margin: .5em 0 0;
    position: relative;
    left: .5em;
    font-size: .9em; }
  #footer img {
    margin: 0; }
  #footer #siteinfo + li ul li p {
    margin: 2em 0 1.5em 16px; }

/* Organisation info */

#organisation_info {
  padding: 1em 1em 1em 1.5em;
  background: #fff;
  color: #666;
  clear: both; 
  overflow: hidden;
}

#organisation_info .funder-logo {
    float: left;
    margin-right: 1em;
}

/* Tabs */
#home #navbar {
  border-bottom: #3975c6 .25em solid;
}

#navbar {
  padding: 0;
  margin: 0;
  list-style: none;
  background: #fff;
  float: left;
  width: 78em;
  clear: both;
  color: #000;
  text-transform: capitalize;
  color: #000;}
  #navbar li {
    color: #000;}
  #navbar a {
    color: #000;
    color: #000;}
    #navbar a:hover, #navbar a:visited {
      color: #000;}
    #navbar a:hover, #navbar a:visited {
      color: #000;}
  #navbar li {
    float: left;
    display:inline-block;
    padding: 0;
    /*background: #ffcccc url("http://citizenshipfoundation.org.uk/g_lib_css/tab_right.gif") no-repeat right top;*/
    margin: 0 2px 0 0;
    }
    
  #navbar a {
    display:inline-block;
    /*background: url("http://citizenshipfoundation.org.uk/g_lib_css/tab_left.gif") no-repeat left top;*/
    padding: .75em 1em; }
  #navbar li#tab_1 {
    background-color: #1486cc;
    margin-left: 1em; }
    #navbar li#tab_1 a {
      color: #fff; }
  #navbar li#tab_2 {
    background-color: #fff14d; }
  #navbar li#tab_3 {
    background-color: #ee6bd8; }
  #navbar li#tab_4 {
    background-color: #6fbff1; }
  #navbar li#tab_5 {
    background-color: #a8eb9b; }
  #navbar li#tab_6 {
    background-color: #9cd3f5; }
  #navbar li#tab_7 {
    background-color: #FFD88A; }
  #navbar li#tab_8 {
    background-color: #ffbf3b; }
  #navbar li#tab_9 {
    background-color: #7bccc5; }
  #navbar li a:hover, #navbar li.current a:hover {
    color: #000; }
  #navbar li#tab_1 a:hover {
    color: #fff; }

/* End Tabs */

/* Right bar */
#rightbar, #secondary {
  position: static;
  font: 1em Verdana, Arial, Helvetica, sans-serif;
  text-align: left; }
  #rightbar #tools, #secondary #tools {
    position: inherit;
    height: auto;
    font-size: 1em;
    width: 100%;
    padding-top: 0; }
    #rightbar #tools form, #rightbar #tools p, #rightbar #tools div, #secondary #tools form, #secondary #tools p, #secondary #tools div {
      position: inherit;
      padding-top: 0;
      margin: 0 0 1em;
      display: block; }
      #rightbar #tools form label, #rightbar #tools form input, #rightbar #tools p label, #rightbar #tools p input, #rightbar #tools div label, #rightbar #tools div input, #secondary #tools form label, #secondary #tools form input, #secondary #tools p label, #secondary #tools p input, #secondary #tools div label, #secondary #tools div input {
        font-size: 1em; }
  #rightbar h4, #rightbar h5, #secondary h3, #secondary h5 {
    font: .9em Verdana, Arial, Helvetica, sans-serif; }
  #rightbar ul, #secondary ul {
    padding-left: 1.5em;
    margin: 0 0 2em;
    list-style-type: disc; }
    #rightbar ul li, #secondary ul li {
      margin: 0 0 .5em 0;
      color: #666; }
  #rightbar p.disclaimer, #secondary p.disclaimer {
    margin-top: -0.75em;
    color: #666; }
  #rightbar #advertsbox a:link, #rightbar #advertsbox a:visited, #rightbar #advertsbox a:hover, #secondary #advertsbox a:link, #secondary #advertsbox a:visited, #secondary #advertsbox a:hover {
    color: #fff; }
  #rightbar h4, #secondary h3 {
    margin: 1em 0 1em;
    padding: 0 0 .25em;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: #999 1px solid;
    color: #333; }
  #rightbar h5, #secondary h5 {
    margin: 0 0 .25em;
    padding: 0;
    font-weight: bold;
    text-transform: uppercase;
    color: #666; }
  #rightbar #advertsbox, #secondary #advertsbox {
    margin: 1.5em 0 0; }
    #rightbar #advertsbox div, #secondary #advertsbox div {
      position: relative;
      margin: 0 0 .5em;
      color: #fff;
      padding: 0 7px 7px; }
  #rightbar .box1, #secondary .box1 {
    background-color: #666; }
  #rightbar .box2, #secondary .box2 {
    background-color: #888; }

#advertsbox h5, #advertsbox p {
  padding: .0;
  width: 122px; }

#rightbar #advertsbox img {
  position: absolute;
  top: 6px;
  right: 6px;
  border: none;
  width: 60px;
  height: 55px;
  z-index: 1; }
#rightbar #advertsbox p, #rightbar #advertsbox h5 {
  z-index: 15; }
#rightbar #advertsbox p {
  margin: 0 0 0;
  padding: 6px 0 0; }

#advertsbox h5 {
  color: #fff;
  padding-top: 6px;
  margin-bottom: 0; }

/* News */
.introduction {
    color:#333;
 }

/* Staff list */
#staff-list .content ul, #staff-list .content li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: inherit; }
  #staff-list .content ul h4, #staff-list .content li h4 {
    font-weight: bold;
    font-size: 1.2em; }

#staff-list .content ul {
  margin-top: 2em; }

#staff-list .content li {
  position: relative;
  margin-bottom: 2em; }

/* Cludge to delineate between directors and staff without editing the html. So if the number of directors changes then ':nth-child()' will need to change too. Not ideal really. */
#staff-list .content li:nth-child(8) {
  padding-top: .5em;
  border-top: #bbb 1px solid; }

#staff-list .content img {
  position: absolute;
  top: 0;
  left: 0;
  /* In IE(6) stylesheet make this value -80px; check in IE7 too */
  width: 70px;
  height: auto;
  border: 0; }

#staff-list .content ul p, #staff-list .content h4, #staff-list .content h5 {
  position: relative;
  margin-left: 85px; }

#staff-list .content h4, #staff-list .content h5 {
  margin-bottom: 0; }

#staff-list .content h5, #trustee-list .role  + p {
  margin: .25em 0 .25em 85px;
  text-transform: uppercase;
  font-weight: normal; }

#staff-list .content .lead {
  margin-top: .5em; }

#staff-list .content ul p {
  margin: 0 0 0 85px; }

#staff-list .content .hidden, #staff-list .content .org, #staff-list .content .adr {
  display: none; }

#staff-list .vcard .adr + p {
  margin-top:.5em;
  margin-bottom:.5em; }

/* Trustee and advisers lists  - also PAC */
#trustee-list .content ul, #trustee-list .content li, #adviser-list .content ul, #adviser-list .content li,
#pac-list .content ul, #pac-list .content li {
  list-style-type: none;
  margin: 0;
  padding: 0; }

#trustee-list .content ul, #adviser-list .content ul, #pac-list .content ul {
  margin-top: 2em; }

#trustee-list .content li, #adviser-list .content li, #pac-list .content li {
  position: relative;
  margin-bottom: 2em; }

#trustee-list .content img, #adviser-list .content img, #pac-list .content img {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: auto;
  border: 0; }

#trustee-list .content ul p, #trustee-list .content h4, #trustee-list .content h5,
#adviser-list .content ul p, #adviser-list .content h4, #adviser-list .content h5,
#pac-list .content ul p, #pac-list .content h4, #pac-list .content h5 {
  position: relative;
  margin-left: 85px; }

#trustee-list .content h4, #trustee-list .content h5,
#adviser-list .content h4, #adviser-list .content h5,
#pac-list .content h4, #pac-list .content h5 {
  margin-bottom: 0; }

#trustee-list .content h5,
#adviser-list .content h5,
#pac-list .content h5 {
  margin: .25em 0 .25em 85px;
  text-transform: uppercase;
  font-weight: normal; }

#trustee-list .content ul p,
#adviser-list .content ul p {
  margin: 0 0 0 85px; }

#pac-list .content ul p {
  margin: 6px 0px 1em 85px; }

#pac-list .vcard p.hidden + p {
    font-weight: bold;
}

#trustee-list .content .hidden, #trustee-list .content .role,
#adviser-list .content .hidden, #adviser-list .content .role,
#pac-list .content .hidden, #pac-list .content .role {
  display: none; }

#trustee-list .content ul .role  + p , #adviser-list .content ul .role  + p, #pac-list .content ul .role  + p  {
  margin-top:.25em;
}


/* News list */
#news-list h4 {
  font-size: 1.2em; }

#news-list .content .content {
  padding: 1em;
  /* This is only here to prettyfy the example page */
  width: 466px;
  /* Emulates the live content width, for testing */ }

/*#news-list .content h4 {
    margin:0;
    font-size:1em;
    font-weight:normal;
    }*/
#news-list .content p {
  margin: 0; }

#news-list .content p + p {
  margin-bottom: 1.25em;
  color: #666; }

#news-list .content ol, #news-list li {
  list-style-type: none;
  margin: 0;
  padding: 0; }

/* News item */
#news-item .content .hentry {
  margin-bottom: 4em; }

#news-item .content .entry-summary {
  font-weight: bold; }

#news-item .content ul.comments, #news-item .content ul.comments li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: .958em;
  color: #333; }

#news-item .content ul.comments li {
  margin: 1em 0;
  padding: 1em;
  background: #eee; }

#news-item .content h4 {
  margin-top: 2em; }

#news-item .content form, #news-item .content label {
  position: relative; }

#news-item .content label {
  display: block;
  margin: 1em 0; }

#news-item .content input {
  position: relative;
  top: 0;
  left: 0; }

#news-item .content label:hover, #news-item .content input:hover, #news-item .content textarea:hover {
  background: #eee; }

#news-item .content #commentterms label {
  position: relative;
  padding-left: 2em; }

#news-item .content #commentterms #mypriv {
  position: absolute;
  left: 0; }

#news-item .content input.button {
  position: relative;
  left: 0; }

#news-item .content #usercomment {
  width: 100%; }

#news-item .content .commentdate {
  font-size: .9em;
  color: #666;
  margin-top: 0; }

#news-item .content .contacts {
  font-size: .9em; }

#news-item .content ul.contacts, #news-item .content .vcard ul, #news-item .content .vcard li {
  list-style-type: none;
  padding: 0;
  margin: 0; }

#news-item .content li.vcard {
  list-style-type: none;
  padding: 0;
  margin-bottom: 2em;
  clear: both; }

#news-item .content .fn {
  font-weight: bold; }

#news-item .content .vcard li {
  float: left;
  margin-right: 1em; }

/* Press release item */
#press-release-item .content h3 span {
  display: block;
  font-weight: normal; }

#press-release-item .content .entry-summary {
  font-weight: bold; }

#press-release-item .content #notes_for_editors {
  border-top: #999 1px solid; }

#press-release-item .content #notes_for_editors h4 {
  margin-top: .5em; }

#press-release-item .content #notes_for_editors p {
  font-size: .9em; }

#press-release-item .content ul.comments, #press-release-item .content ul.comments li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: .958em;
  color: #333; }

#press-release-item .content ul.comments li {
  margin: 1em 0;
  padding: 1em;
  background: #eee; }

#press-release-item .content h4 {
  margin-top: 2em; }

#press-release-item .content form, #press-release-item .content label {
  position: relative; }

#press-release-item .content label {
  display: block;
  margin: 1em 0; }

#press-release-item .content input {
  position: absolute;
  top: 0;
  left: 10em; }

#press-release-item .content label:hover, #press-release-item .content input:hover, #press-release-item .content textarea:hover {
  background: #eee; }

#press-release-item .content #commentterms label {
  position: relative;
  padding-left: 2em; }

#press-release-item .content #commentterms #mypriv {
  position: absolute;
  left: 0; }

#press-release-item .content input.button {
  position: relative;
  left: 0; }

#press-release-item .content #usercomment {
  width: 100%; }

#press-release-item .content .commentdate {
  font-size: .9em;
  color: #666;
  margin-top: 0; }

#press-release-item .content .contacts {
  font-size: .9em; }

#press-release-item .content ul.contacts, #press-release-item .content .vcard ul, #press-release-item .content .vcard li {
  list-style-type: none;
  padding: 0;
  margin: 0; }

#press-release-item .content li.vcard {
  list-style-type: none;
  padding: 0;
  margin-bottom: 2em;
  clear: both; }

#press-release-item .content .fn {
  font-weight: bold; }

#press-release-item .content .vcard li {
  float: left;
  margin-right: 1em; }
  
span.date {
    display: block;
    margin: 0 0 1em;
    color:#900;
    }
span.date + .newslink {
    margin-top: -1em;
    }
}
.news-image-inset {
    float:right;
    margin:.5em 0px .5em .5em;
    background-color:#fff;
    border: black solid 1px;
    width:208px;
    padding:.5em;
}

.news-image-inset img {
    margin-bottom: .5em;
}

/* Staff profiles */
#contact-item-2 .content h4 {
  margin-bottom: 1em; }

#contact-item-2 .content img {
  float: right;
  margin: 0 1em 1em;
  width: 50%;
  /*height: 90px;*/ }

#contact-item-2 .content .vcard ul {
  /* Needs the ul selector, presumably due to specificity */
  list-style-type: none;
  margin-left: 0;
  padding: 0; }

#contact-item-2 .content .vcard li {
  margin: 0; }

#contact-item-2 .content .adr, #contact-item-2 .content .org {
  display: none; }

#contact-item-2 .content .lead {
  font-weight: bold; }

/* Trustee & advisory board profiles */
#contact-item-3 .content h4, #contact-item-4 .content h4 {
  margin-bottom: 1em; }

#contact-item-3 .content img, #contact-item-4 .content img {
  float: left;
  margin: 0 1em .5em 0;
  width: 70px;
  height: auto; }

#contact-item-3 .content .vcard ul, #contact-item-4 .content .vcard ul {
  /* Needs the ul selector, presumably due to specificity */
  list-style-type: none;
  margin-left: 0;
  padding: 0; }

#contact-item-3 .content .vcard li, #contact-item-4 .content .vcard li {
  margin: 0; }

#contact-item-3 .content .adr, #contact-item-3 .content .org, #contact-item-4 .content .adr, #contact-item-4 .content .org {
  display: none; }

#contact-item-3 .content .lead, #contact-item-4 .content .lead {
  font-weight: bold; }

/* Resources */
#resource {
  position: relative;
  padding: 0px;
  margin: 0; }

#resources {
  position: relative;
  float: left;
  clear: both; }
  #resources h3.resitem {
    margin: 0 0 .25em;
    border-bottom: #999 1px solid;
    padding-bottom: .25em; }
  #resources .price, #resources .purchase, #resources .download {
    font-size: medium; }
  #resources #strapline {
    font-size: medium; }
  #resources.content {
    width: 100%; }

#resources p, #resources h4, #resources #author, #resources #seealso {
  margin: 0 0 .5em; }
#resources h4.resitem {
  margin-bottom: 0; }
#resources #author {
  margin: 0 0 1em; }
#resources .price, #resources #edition, #resources strong {
  font-weight: bold; }
#resources #edition {
  margin: 0; }
#resources img.resitem {
  float: left;
  margin: 0 10px 10px 0;
  position: relative;
  z-index: 1;
  border: #333 1px solid; }
#resources .purchase strong {
  /* background:#cff; removed Jan 07 */ }
#resources div #seealso {
  position: relative;
  padding: 1em 0 0;
  border-top: 1px #ccc solid; }
#resources #seealso h4 {
  padding-top: 0; }
#resources #seealso a.display_all {
  font-family: verdana, sans-serif;
  position: absolute;
  top: 11px;
  left: 25em;
  background-color: #ff9;
  padding: 1px 4px;
  font-size: xx-small;
  font-size: x-small; }
#resources a.resitem:link {
  color: blue;
  text-decoration: underline; }

a.resitem:hover {
  color: blue;
  text-decoration: underline; }

#resources p {
  width: 100%; }
#resources a.resitem {
  color: purple;
  text-decoration: underline; }
#resources h4 {
  font-size: 1em;
  font-weight: bold; }
#resources #info {
  clear: both;
  position: relative;
  margin-top: 1.5em; }
#resources #info_left {
  float: left;
  clear: left;
  width: 12em;
  margin-right: 1em;
  overflow: hidden;
  padding: 0 1em 1em;
  background: #ffc; }
#resources #info_right {
  float: left;
  clear: right;
  width: 19em; }
#resources #info .purchase {
  font-size: x-small;
  font-size: small; }
#resources #info h4 {
  margin: 1em 0 0; }
#resources .speaker {
  background-image: url(../g_lib/bullet_resspk.gif);
  background-position: top left;
  background-repeat: no-repeat;
  padding-left: 10px; }
#resources .sepdetail {
  border-bottom: solid 1px #cccc99; }
#resources .sepdetail2 {
  border-top: solid 1px #cccc99;
  border-bottom: solid 1px #cccc99; }
#resources .search_sml {
  font-size: x-small; }
#resources div.feedbackbod {
  font-size: .95em;
  color: #333; }
  #resources div.feedbackbod h4 {
    font-size: 1.25em;
    border-top: #333 2px solid;
    border-top: #333 1px solid;
    margin-top: 1em;
    padding: .5em 0; }
#resources td {
  vertical-align: top;
  padding: .5em;
  background-color: #fff;
  border: 0; }
#resources .restitle {
  font-weight: bold;
  font-size: 1.25em;
  color: #333; }

/* Main info */
/*EXTRA FOR RESOURCES SEARCH RESULTS*/
/* Feedback */

#furtherinfo {
    margin-bottom: 1em;
}

#furtherinfo h5 {
    margin-bottom: .5em;
}

script + a img {
    display:block;
    margin-top:1.5em;
}

/* Competitions list page */
#comps ul {position:relative; list-style-type:none; padding:0; margin:0;}
#comps li {position:relative; list-style-type:none; height:100px; margin:0 0 1em;}
#comps img {float:left; margin-right:1em;}
#comps h4 {margin-left:110px; margin:0px; padding-bottom:0px; border:none;}
#comps p, #comps blockquote {position:absolute; width:165px; margin:0px; padding:0px;}
#comps p {top:2em; left:110px;}
#comps blockquote {top:2em; left:285px; color: #900; padding-left:1em;}


/* Tables */
/* -- .simple = no column shading if number of columns is two or fewer */

#content table {
    position:relative;
    MARGIN:.5em 0;
  vertical-align: top;
}
#content table caption {
    padding:.5em 0 1em;
    text-align:left;
    border-top:#666 1px solid;
  font-weight:bold;
}
#content  tr {
    padding:.5em;
}
#content td {
    color:#333;
}
#content th {
    border-top:#ccc 1px solid;
}
#content th:first-child {
    text-align: left;
}
#content th, #content td {
    border-bottom:#ddd 1px solid;
    padding:.25em .5em .25em;
    margin:0;
    text-align:left;
  font-size: smaller;
}
#content th:first-child, #content td:first-child {
    padding-left:0;
}
#content th:nth-child(even), #content td:nth-child(even) {
    background-color: #eee;
}
#content .simple th:nth-child(even), #content .simple td:nth-child(even) {
    background: none;
}
#content tr:hover td, #content .simple tr:hover td:nth-child(even) {
    color:#000;
    background:#ffd;
}
#content tr:hover td:nth-child(even) {
    background:#eec;
}

.image-credit {
    display:block;
    position: absolute;
    right:0;
    bottom:.25em;
    font-size:smaller;
    padding: .5em;
    color: #fff;
    background: rgba(42,42,42,0.5);
    opacity:0.6;
}
.image-credit a { /* Only used if it is a child of a block element */
    color: #fff;
    text-decoration: underline;
}

.thetable .two .content p.caption, figcaption {
    color: #666;
    margin: .5em 0 2em;
    padding-bottom: .5em;
    border-bottom: #ccc 1px solid;
}

.thetable .two .content p:target {
  padding:1em 1em;
  border-radius:1em;
  background:rgba(255, 255, 0, .3);
}
#sponsors img {
    margin-right: 1em;
    width:120px;
    }
#sponsors p {
    margin: 1em 0;
    }
#sponsors a {
    text-decoration: none;
    }

#signup ul {
    padding:0;
    margin:0 0 2em;
}
#signup li {
    list-style-type: none;
    }
#signup ul ul {
    border:none;
    margin:.5em 0 0;
}
#signup ul li {
    position:relative;
    margin:0 0 .5em;
    padding:.5em 0 0;
    }

#signup ul ul li {
    border:none;
    }
    
#signup ul li input {
    position:absolute;
    left:12em;
    }
    
#signup ul li ul li {
    display:inline;
}
    
#signup ul li.choice input, li input#submit {
    position:relative;
    left:0;
    }
    
/* Adverts (eg Amazon links) */

#adverts {
    clear:both;
    margin-top: 2em;
    padding-top:1em;
    border-top: #ccc 1px solid;
}

#adverts p {
    margin-top: 1em;
}

/* For display of logos on a page */
.thetable .two .content ul.float-logos {
margin:0;
padding:0;
clear:both;
overflow:hidden;
}

.thetable .two .content ul.float-logos li {
list-style-type:none;
margin-right: 1em;
float:left;
width: 15.5em;
border: #ccc 1px solid;
height: 8em;
text-align: center;
padding: 1em 0;
position: relative;
top:0;
right:0;
display: table;
}

.thetable .two .content ul.float-logos li a {
display: table-cell;
vertical-align: middle;
}

.thetable .two .content ul.float-logos > p {
clear:both;}
.thetable .two .content ul.float-logos li img {
}
#youth-budget + a img, #chance-to-be-chancellor + img {
  margin-right:1em;
}
.hide {
  position: absolute;
  display: block;
  top: -99999999px; }
  
figure {
    margin: 1em 0;
    }
  
#parliament-week-logo {
    margin: 2em 4em 2em 1em;
    float: left;
}
object {
  position:relative;
  margin:0 1em;
  z-index: 10;
}

blockquote.pullout {
  float:right; clear:right; margin:0 0 2em 1em; padding:1em; width:180px;
}
blockquote.pullout span {
  color:#fff; display:block; margin-top:.5em; font-style: normal; font-weight:normal; font-size: initial; line-height: initial;
}
blockquote {
    margin-bottom:1em 0;
}

.thetable .two .content blockquote.quote-right  p {
    margin:0; 
    font-size:1.25em;
  line-height:1.4em;
  font-family: georgia, serif;
}
blockquote.quote-right :after {
  content:"";
  position:absolute;
  bottom:-40px;
  left:40px;
  border-width:0 30px 40px 0px;
  border-style:solid;
  border-color:transparent #67C4BD;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}
.thetable .two .content blockquote.quote-right {
  position:relative;
  padding:15px 30px;
  margin:1em 0 3em 1em;
  color:#111;
  background:#67C4BD; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#A0DAD5), to(#67C4BD));
  background:-moz-linear-gradient(#A0DAD5, #67C4BD);
  background:-o-linear-gradient(#A0DAD5, #67C4BD);
  background:linear-gradient(#A0DAD5, #67C4BD);
  -webkit-border-radius:1em;
  -moz-border-radius:1em;
  border-radius:1em;
}
abbr {
  border-bottom: 1px dotted;
}
/* Programmes list */
#programmes-list {
  list-style-type: none;
  margin: 0 0 1em;
  padding:0;
  overflow: hidden;
}
  #programmes-list li {
    margin:1em 0;
    padding:0;
    position:relative;
    float:left;
    clear: both;
    }
    #programmes-list li img {
    float:left;
    max-width: 130px;
    margin-right: 1em;
    }
    #programmes-list h4 {
    margin: .5em 0;
    }

/* Donate box */
.donate > p:last-child {
     margin-top: .5em;
}
    
/* Call to action button */
a.cta-button {
    color: #fff;
}
#resources .download, .cta-button {
    background-color: #FFBF3B;
    color: #fff;
    display: inline-block;
    padding: .5em 1em;
    text-align: center;
    margin: .5em auto;
    /* font-weight: bold; */
    font-size: 1.5em;
    line-height: 1.4em;
    font-family: georgia;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    text-shadow: 0 0 10px #D68F00;
    -webkit-box-shadow: inset -1px -3px 5px 1px rgba(0, 0, 0, .5);  
    box-shadow: inset -1px -3px 5px 2px rgba(214, 143, 0, .5);
}

.cta-button.ycp-scotland {
  /* Takes its colour from the cover of YCP Scotland */
  background-color: #508ED3;
  text-shadow: 0 0 10px #306EB3; 
  box-shadow: inset -1px -3px 5px 2px #306EB3;
}
/* The following breaks if earlier in the document. I think this has to do with specificity, with ids separate from classes, and nested classes later than parents.*/

.required:after {
  content: " Required";
  color: red;
  font-size: x-small;
  display: block;
}

/* General signup form */
#signup, .signup {margin: 2em 0; border: #ccc 1px solid; padding:1em; overflow: hidden; position: relative;}
#signup-2col p, .signup-2col p {float: left; width:50%;}
#signup-2col + p, .signup-2col + p {clear: both;}
#signup b, .signup b {display:block;margin-bottom:1em;}
#signup button, .signup button {display: block; float:none; clear: both;}
#signup label, .signup label {display: block;}
#signup #txtInput, .signup #txtInput {display:block;}
#signup input[type="submit"], .signup input[type="submit"] {clear:both; display:block; margin: 1em 0;}
#signup .logo, .signup .logo {margin-bottom: 1em;}
#signup .span-cols, .signup .span-cols {width: 100%;}
#signup a.privacy, .signup a.privacy {font-size: smaller;}

/* Newsletter signup form */

/* News lists paging */
.paging a {margin: 1em 2em 2em 0; font-size: smaller; display: inline-block;}
.paging:last-child {margin-top:1em padding-top: 1em;}
.paging .paging_newer::before {content: "\00ab  "}
.paging .paging_older::after {content: " \00bb"}
/* --- */

div#newsletter-list a.dmCmpLink {
    display: block;
    margin-bottom: .5em;
    padding-bottom: .5em;
    border-bottom: 1px #ccc dotted;
}


/* Small devices */
@media only screen and (min-device-width : 320px) and (max-device-width : 640px) {

  html {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    font-weight: normal; }

  body {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    font-weight: normal;
    position: relative;
    font-family: verdana, helvetica, arial, sans-serif;
    font-size: 1em;
    line-height: 1.3em;}
    
  div, ul, li {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  .header, #content, .footer, #navbar, #header, #tools, .header_container, .strapline_container, .thetable, body > #content, .footer_container {
    display: block;
    max-width: 90%;
    margin: 0 auto;
    padding: 0 20px 0 0;
    overflow: hidden;
    background: #fff;
    clear: none; }
    
  div.header {
    padding-top: 3em;
  }

  #cse-search-box {
    position: fixed;
    background-color: #67C4BD;
    top: 0;
    padding: .5em .5em .5em 1em;
    width: 100%;
    margin: 0;
    z-index: 100;
  }

  #header h1 + a img {
        margin: 1.5em 1em 1em; } /* proportionate to the logo's pink square, as per brand identity */

  h2 {
    font-size: 1em;
    margin: 0;
    padding: .25em .5em; }

  /* Subnav */
  /* // Subnav */

  /* Level 3 & 4 navs */
  /* // Level 3 nav */


  /* strands */
  /* // strands */

  /* Footer */


  /* Organisation info */


  /* Tabs */
  #navbar {
    margin: 0 1em .75em;
    width: auto;
  }
  #header #navbar li {
    margin: 0 .25em .25em 0;
  }
  #header #navbar li a {
    padding: .5em;
  }
  /* End Tabs */

  /* Right bar */


  #frontpage .article {
    position: relative;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    height: auto;
    }
      
  #frontpage .article .link {
  /*  background-position: 0 0;
    background-size: 100% auto; */
    position: relative;
    background: none;
    height: auto !important;
    width: inherit;
    }
  #frontpage .article p {
    position: relative;
      width: auto;
    color: #fff;
    font-size: 1em;
    left: inherit;
  }

  .article p b {
  font-size: 1.25em;
  }

  #strands {
    margin-top: 0;
  }
  #strands, aside {
    font-size: 1em;
  }

  #strands li, .news-and-blogs {
    margin: 0 1em;
    width: auto;
    float: none;
  }

  .news-and-blogs + .news-and-blogs  {
    left: 0;
  }

  .news-and-blogs + .news-and-blogs + .news-and-blogs  {
    left: inherit;
    width: initial;
  }

  #strands h2, .news-and-blogs h2 {
    margin-top: 1em;
    padding: 0 0 .25em;
    font-size: 1.5em;
  }

  #strands li.project {
    margin: 0;
    padding: .5em 1em;
  }

  #strands li.project h3 {
    margin: 0;
  }

  #strands li.project li {
    margin: 0;
  }

  #strands ul li img {
    left: 0;
  }

  #frontpage .article .cta-button {
    display: block;
    width: 8em;
    font-weight: bold;
    margin: .5em 0;
  }
  #organisation_info {
    font-size: smaller;
  } 

  #cse-search-box {
    position: fixed;
    top: 0;
  }

  .image-credit, li.parliament-week, #strapline {
    display:none;
  }
}

@media only screen and (min-device-width : 641px) and (max-device-width : 1235px) {
	#tools, .header_container, .strapline_container, .thetable, body > #content, .footer_container {width:auto;}
  #header {width:100%;}
  #navbar, #subnav {max-width:100%;}
}