/*
Theme Name: MST2
Description: New Media Standards Trust Theme for May 2014
Version: 1.0
*/



html {
    /* our base size - change this to scale everything */
    /* using rem units as elastic pixels. Change fontsize here and everything else adaptes gracefully */
    /* 1rem = 10px under most defaults */
    font-size: 10px;    /* RESPONSIVE */
}

body {
    font-size: 1.6rem;
    padding: 0;
    margin: 0;

    font-family: 'Droid Serif', serif;
    line-height: 2.8rem;
    color: #444;
    background-color: #fff;
}


pre {
}


h1,h2,h3,h4,h5,h6 {
    color: #222;
    line-height: 1.42; 
/*    margin: 0; */
    padding: 0;
    font-family: 'Droid Serif', serif;
    font-weight: normal;
    margin: 1rem 0;
}

h1 { font-size:244%; }
h2 { font-size:195%;}
h3 { font-size:136%; margin-top:0; letter-spacing:-0.05rem; margin-bottom:0.3rem;}
h4 { font-size:125%;}
h5 {font-size:100%; }
h6 {font-size:80%; }

small, .small { font-size: 75%; }

/* secondary headings */
h1 small, h1 .small,
h2 small, h2 .small,
h3 small, h3 .small,
h4 small, h4 .small,
h5 small, h5 .small,
h6 small, h6 .small {
    color: #888;
    font-weight: normal;
}

p {
    padding: 0;
    margin: 0 0 0.75rem 0;
}
h1 {
    font-family: 'Bree Serif', serif;
    line-height: 1.2;
    letter-spacing: -0.01rem; 
}
h2 {
    font-family: 'Cabin', sans-serif;
    text-transform: uppercase;
    font-size: 2.3rem;
    padding: 2.5rem 0 2rem 0;
}
a {
    text-decoration: none;
    color: #329737;
}
a:visited {
    color: #000;
}

a:hover {
    text-decoration: none;
    color: #329737;
}
.site-header-inner a:hover {
    text-decoration: underline;
}
label {
    font-weight: bold;
}

input[type="password"] {
}

img {
    border: none;
}

/* form errors */
.has-error input,
.has-error select,
.has-error textarea {
  border-color: #b94a48;
}

.has-error label,
.has-error .help-block {
  color: #b94a48;
}

/* form misc */

.form-group {
    margin-bottom: 0.5em;
}

.help-block {
    display: block;
}


/* buttons */


.btn {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    line-height: 1.42;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.5rem 0.7rem;
}


.btn:hover,
.btn:visited,
.btn:focus {
  color: #333333;
  text-decoration: none;
}


.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
  cursor: not-allowed;
  opacity: 0.65;
}

.btn-default {
    background: #000;
    color: #fff;
    font-family: 'Bree Serif', serif;
}

.btn-default:visited {
    color: #fff;
}

.btn-default:hover {
    background: #329737;
    color: #fff!important;
}

.front-tools .btn-default:hover {
    background: #000;
    color: #fff!important;
}

.btn-primary { }
.btn-success { }
.btn-info { }
.btn-warning { }
.btn-danger { }


.btn-link {
    border-radius: 0;
    background: none;
}

.btn-link:hover {
  text-decoration: underline;
}


.pagination a.btn {
    padding: 0.6rem 1.2rem 1rem 1.2rem;
    font-size: 2rem;
}
.pagination {
    margin-top: 4.5rem;
    margin-bottom: 1.9rem;
}
.category-publications .pagination {
    margin-top: 0;
    margin-bottom: 1.9rem;
}

/* alerts */

.alert {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-danger {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.alert-success {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-info {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-warning {
  color: #c09853;
  background-color: #fcf8e3;
  border-color: #faebcc;
}




.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.text-left{
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}


.pull-right {
    float:right;
}

/* END BASE STYLING */


/****
 *  general state classes
 */
.is-hidden { display: none; }
.is-active {}




/****
 * LAYOUT
 */


/* pull content into place horizontally */
.l-contain {
    min-width: 300px;   /* allow 10px margins */
    padding: 0;
    margin: auto;
    max-width: 965px;
}

.l-rel {
    position: relative;
}

/* stackable items - 4 horizontal items, stacks when room is short */
.l-stackable {
    display: block;
    padding: 0;
    font-size: 0;   /* cheesiness to remove whitespace between elements */
    margin-right: -2rem;
    margin-top: 0; /* cheesiness to compensate for item gutters */
}

/*
.l-stackable:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
*/

.l-item25, .l-item50, .l-item75 {
    font-size: 1.6rem;  /* cheesiness: restore after whitespace-hiding hack TODO: RESPONSIVE */
    vertical-align: top;
/*    float: left; */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    padding-right: 2rem;    /* item gutter */
}


/* RESPONSIVE: these change as screen shrinks */
.l-item25 { width: 25%; }
.l-item50 {
    width: 50%; }
.l-item75 { width: 75%; }


.footer-r {   
    width: 50%;
    padding-left: 15rem;
}
.footer-r a {
    color: #fff;
}


input {
    font-family: 'Cabin', sans-serif;
    font-size: 1.4rem;
    background-color: #ededed;
    border: none;
    padding: 0.4rem;
    color: #333;
}
/****/

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #333;
}



.front a:link {
    color: #000;
}
.front a.btn:link {
    color: #FFF;
}
.front a:hover {
    color: #329737;
    text-decoration: none;
}


/* MODULES */


/****/

.site-header {
    position: fixed;
    height: 11.0rem;
    background-color: #fff;
    display:block;
    top:0;
    width:100%;
    z-index: 1;
    border-bottom: solid 1px #ededed;
/*
    remoed the faded line JSC 17/11/14
    -moz-box-shadow: 0px 0px 8px 2px #efefef;
    -webkit-box-shadow: 0px 0px 8px 2px #efefef;
    box-shadow: 0px 0px 8px 2px #efefef;
*/    
}

.site-header-inner {
    position: relative;
    text-align: center;
}

.site-header .btn-hotdog {
    position: absolute;
    right: 0;
    top: 3.7rem;
}


/****
 * hotdog menu button
 */
.btn-hotdog {
    width: 34px;
    height: 34px;
    width: 3.4rem;    
    height: 3.4rem;
    padding: 0;
    margin: 0;
    background-color: #000;
    background-image: url(img/hotdog.png);
}



.btn-hotdog:hover {
    background-color: #444;
}

.btn-hotdog.is-active {
    background-color: #888;
}

/* */
.site-nav-hotdog {
    position: fixed;
    background-color: #fff;
    display: block;
    top: 11rem;
    width: 100%;
    z-index: 1;
    text-align: center;
    height: 3rem;
    max-width: none;
}
.site-nav-hotdog.is-hidden {
    display: none;
}

.site-nav-hotdog.is-fancy {
    background: none;
}

.site-header .searchform {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    margin: 3.7rem 0 0 0;
    width: 36rem;
    padding: 0;
}

.site-logo {
    position: absolute;
    top: 3rem;
    left: 0;
}


.site-content {
    margin-top: 11.0rem;
    padding-bottom: 7.5rem;
}
body.home .site-content {
    padding-bottom: 0;
}

.site-footer {
    background-color: #333;
    color: #fff;
    padding: 5rem 0;
    font-size: 1.5rem;
}
.site-footer p {
    font-size: 1.5rem;
    margin-bottom: 2rem;    
}
br.both {
    clear: both;

}
.site-footer a:visited { color: #fff; }
.site-footer a:hover { color: #07c55c; }

.site-footer h3 {
    font-family: 'Cabin', sans-serif;
    font-size: 2.2rem;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;
    /* text-align: center; */
}

/****
 * front - sections on the front page (news, publications etc)
 */

/* icky spacing hack */
.front-body {
    padding-bottom: 8.5rem;
}

.front h2 {
    padding: 7rem 0 3rem 0;
    font-family: 'Cabin', sans-serif;
    font-size: 3.2rem;
    /*line-height: 3.84rem; */
    margin: 0;
    text-transform: uppercase;
    text-align: center;
}

.front-events {
    background-color: #AFDA4A;
    color: #333;
}

.front-orwell {
    color: #fff;
    background-color: #000;
}

.front-news .breadcrumbs {
    display: none;    
}
.cat-list .breadcrumbs {
    display: none;    
}

.front-publications {
    background-color: #ededed;
}
.newslist {    
}
/*
.front-publications .text-center {
    padding-top: 40px;
}
*/

/* actually, this'll be an image */
.front-orwell h2 {
    color: #fff;
}
.front-orwell a {
    color: #fff;
}
.orwell-wrapper a.more-link, {
    color: #fff!important;
}

.front-news .more-link {
    margin-top: 4rem;
    display: block;
}

/* strapline: background image (+ js glitch effect) + text */
.front-strapline {
    height: 480px;  /* RESPONSIVE */
/*      padding-bottom: 0; */
    overflow: hidden;
    position: relative;
} 

.strapline-img {
    min-width: 100%;
    height: auto;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
}

/* icky hack to center strapline */
.strapline-outer {
    display: table;
    height: 480px;      /* RESPONSIVE */
    width: 100%;
}

.strapline-inner {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
}


.strapline {
    display: inline-block;
    font-family: 'Bree Serif', serif;
    font-size: 4.0rem;
    line-height: 4.5rem;
    padding: 1.0rem 2.0rem 2.0rem 2.0rem;
    background-color: #000;
    color: #fff;
}


/****/
.tool-icon {
    height: 92px;
    overflow: hidden;
}
.tool {
    display: block;
    max-width: 30rem;
    padding: 3.5rem 1rem 4rem 1rem;
    margin: 0.5rem auto;
    border: 1px solid #999999;
    text-align: center;
    position: relative;
}

.tool img {
    display: inline-block;
    height: 15.1rem;
}

.tool p {
    min-height: 9rem;
    color: #000; 
}

.tool a:hover {
    color: #000;    
}

.tool-journalisted:hover {
    background-color: #d4d4d4;
}
.tool-unsourced:hover {
    background-color: #fabfc0;
}
.tool-churnalism:hover {
    background-color: #fdefc7;
}
.tool-presscomplaints:hover {
    background-color: #b2e1f4;
}



/****/
.categorypage {
    padding-bottom: 5em;
}

/****/
.category-header {
    background-color: #ededed;
    text-align: center;
    margin-bottom: 9rem;
    padding: 4rem 0 12.5rem 0;
}


/****
 * events category page
 */

.category-events {
    background-color: #AFDA4A;
    color: #333;
}

.category-events .category-header {
    background-color: #AFDA4A;
    color: #333;
    padding: 2rem 0 2rem 0;
    text-align: center;
    margin-bottom: 4rem;
}


/****/
.archive-description {
    font-family: 'Bree Serif', serif;
    font-size: 2.4rem;
    line-height: 3rem;
    color: #333;
}


/****/

.more-link {
    font-family: 'Bree Serif', serif;
    color: #000;
    font-size: 2rem;
}

svg {
  fill: currentColor;
}


.dl-link {
    font-family: 'Bree Serif', serif;
    color: #000;
    font-size: 1.7rem;
    background: url(img/downloadicon.svg) bottom left no-repeat;
    background-size: 1.6rem 1.6rem;
    padding-left: 1.6rem;
}
.dl-link:hover {
    color: #329737;
}

/***
 *  post
 * 
 *  note: using hatom structure as selectors
 *  whole-page posts and inside .single
 *  multiple posts contained within .archive
 */

/* generic post styles */

.post {
    margin: 2rem 0; /* RESPONSIVE */
}

.entry-thumb {
    float: left;
    margin-right: 1rem;
    display: block;
    width: 15.0rem;   /* TODO: RESPONSIVE? */
}

.entry-main {
}
.breadcrumbs {
   text-align: left; 
   font-size: 1.6rem;
   color: #666;
   font-family: 'Bree Serif', serif;
   max-width: 965px;
   margin: auto;
   padding: 1.2rem 0 1rem 0;
}
.breadcrumbs a {
    color: #666;
    display: inline;
}
.post:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    height: 0;
    clear: both;
}
.breadcrumbs .post {
    visibility: inherit;
    display: inline;
    font-size: auto;
    height: auto;
    clear: auto;
    margin: auto!important;
}


.dt-published {
    text-transform: uppercase;
    font-family: 'Cabin', sans-serif;
    padding-bottom: 0.2rem;
    display: block;
}

.e-content {
    width: 60rem;
    margin: 4rem auto 0 auto;
}

.p-summary {
    width: 75%; /* room for a "read more" button */
}


/* mods for fullpage single posts (and pages) */

.page .p-name,
.single .p-name {
    font-family: 'Bree Serif', serif;
}

.page .dt-published,
.single .dt-published {
    font-size: 2.1rem;
    line-height: 4.2rem;
}

.page .entry-header,
.single .entry-header {
    background-color: #ededed;
    text-align: center;
    padding: 0 0 9.5rem 0;
}


/* mods for lists of posts */

.archive .post {
    border-bottom: 1px solid #999;
    padding-bottom: 2rem;
    margin-top: 0;
    padding-left: 2rem;;
}

.archive .post:first-child {
    border-top: 1px solid #999;
    padding-top: 0;
    margin-top: 0;
}

/* homepage news list  */

.newslist .archive .post,
.cat-list .archive .post {
    border-bottom: 10px solid #999;
    padding-bottom: 2rem;
    margin-top: 2rem;
    padding-left: 2rem;
}

.newslist .post:first-child,
.cat-list .post:first-child {
    padding-top: 2rem;
    margin-top: 0;
    padding-bottom: 2rem;
    border-top: 1px solid #999;
}



/* fancypub - for publications in 2-column lists. Smaller titles, outline around thumbnail */

.archive .post.fancypub {
    border: none;
    padding-left: 0;
}


.archive .fancypub .entry-thumb img {
 
}

.archive .fancypub .p-name {
    font-family: 'Droid Serif', serif;
    font-size: 2rem;
    margin: 0;
    padding: 0;
}

/****/
.fook {
    position: absolute;
    bottom: 2rem;
    right: 0;
}

.search-results .entry-main {
    border-top: 1px solid #999;
    padding: 1.5rem 0;
}

/****/
.searchform input[type="search"] {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: block;
    background: #ededed url(img/searchicon.png) 330px 10px no-repeat;
    /* background-size: 3.5rem 3.5rem; */
    padding: 1rem 4rem 1rem 1rem;
    color: red!important;
}

.searchform  {
    color: #333;

}

/****/
.event {
    max-width: 60rem;
    margin: auto;
}

.archive .post.event {
    border: none;
}

.event h3 {
    color: #000;
    font-size: 2rem;
    margin-top: 0;
}

/****
 * make images a bit more responsive by default (from twentyeleven theme)
 */
.entry-content img,
.entry-thumb img,
.comment-content img,
.widget img {
    
}
body.category-publications .entry-thumb {
    width: 150px;
    height: 214px;
    
}
.entry-thumb {
    border: solid 1px #999; 
}
.entry-thumb img {
    display: block;
    margin-left: auto;
    margin-right: auto;  
}
img[class*="align"],
img[class*="wp-image-"],
img.wp-post-image { /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

img.size-full {
    max-width: 97.5%;
    height: 100%;
    
    /* width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}

/****
 * calendar-style icon for showing day/month
 */
.dateicon {
    display: inline-block;
    width: 13.8rem;
    height: 13.8rem;
    padding: 0;

    background-color: #fff;
    border-radius: 1rem;
}

.dateicon-month {
    display: block;
    height: 3.4rem; /* 25%; */
    width: 100%;
    text-align: center;
    font-size: 1.9rem;
    line-height: 3.4rem;
    color: #fff;
    background-color:#329737;
    border-radius: 1rem 1rem 0 0;
}
.dateicon-day {
    width: 100%;
    height: 10.3rem; /* 75%; */
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 6.5rem;
    line-height: 10.3rem;
}


/****
 *
 */


.front-orwell .front-body {
    background: url(img/orwell.jpeg) bottom right no-repeat #000;
    padding-top: 7.5rem;
}

.orwell-title {
    display: inline-block;
    width: 48.8rem;
    height: 6rem;
}

.orwell-title:hover {
    background-color: #D71921;
}


/****
 * menus
 */

.menu {
    padding: 0;
    margin: 0;
    display: block;
}


.menu-item {
    display: inline;
    margin: 0;

    color: #329737;
    border-left: 1px solid #fff;
}

.menu-item:first-child {
    border-left: none;
    padding-left: 0;
    /* padding-left: 0; */
}

.menu-item a:link { color: #329737; }
.menu-item a:visited { color: #329737; }
.menu-item a:hover { color: #07c55c; }

/****
 */
.menu-footermenu-container {
    margin-top: 3rem;
}

.menu-footermenu-container ul li {
    padding-left: 2.1rem;
    padding-right: 2.1rem;
}

/***
 * fancy menu (used for site nav)
 */

.menu-fancy {
    background-color: #000;
    padding: 7.5rem 0 0 0;
}

#navigation-wrapper {
    padding: 0 0 60rem 0;
    background-color: #000;
    display: block;
    height: 1600px;
}
.social {
    display: inline-block;
    margin-top: 60px;
}
ul.social {
    padding: 0 0 0 10px;
}
ul.social li {
    float : left;
    display: block;
}
.socialicon {
    width: 29px;
    height: 29px;
    display: block;
    text-indent: -9999px;
    background-image:url(img/social.png);
    background-repeat: no-repeat;
    margin-right: 10px;
}

.socialicon-twitter {
    background-position: 0px 0px;
}
.socialicon-facebook {
    background-position: -30px 0px;
}
.socialicon-googleplus {
    background-position: -60px 0px;
}
.socialicon-rss {
    background-position: -90px 0px;
}
.site-footer .social {
    padding: 0;
    margin-top: 10px;
}
.menu-fancy .menu-item {
    display: block;
    color: #fff;
    border-bottom: 1px solid #888;
    border-left: none;
    border-right: none;
    font-family: 'Cabin', sans-serif;
    font-size: 2.1rem;
    line-height: 6.8rem;
    max-width: 60rem;
    margin: auto;
}


.menu-fancy .menu-item:first-child {
    border-top: 1px solid #888;
    border-left: none;
    border-right: none;
}

.menu-fancy .menu-item a {
    color: #fff;
    text-transform: uppercase;
    display: block;
}

.menu-fancy .menu-item a:hover {
    color: #888;
    text-decoration: none;
}

/****
 */
.copyright {
    font-size: 1.1rem;
    padding: 0;
    margin-top: 0;
}
.copyright a {
    color: inherit;
}


/****
 *
 */
.attribution {
    color: #ccc;
    background-color: rgba(0,0,0,0.5);
    display: none;
    padding: 0rem 0.5rem;
}

.attribution a:link { color: #ccc; }
.attribution a:visited { color: #ccc; }

.front-strapline:hover .attribution {
    display: block;
}

.front-strapline .attribution {
    position: absolute;
    bottom: 0;
    right: 0;
}

/****
 * RESPONSIVE STUFF
 * Adjustments for smaller screen sizes
 */

/* small - eg phone */
@media (max-width: 450px) {
    html { font-size: 8px; }

    .l-item25 { width: 100%; }
    .l-item50 { width: 100%; }

    .hidden-sm { display: none; }
    
    .front-strapline { height: 200px; } 
    .strapline-outer { height: 200px; }
    
    .post { margin: 0rem 0; }

    .footer-r {   
    padding-left: 0;
    }   
}

/* medium - eg tablet, desktop */
@media (min-width: 451px) and (max-width: 800px) {
    html { font-size: 9px; }

    .l-item25 { width: 50%; }
    .l-item50 { width: 100%; }

    .front-strapline { height: 300px; } 
    .strapline-outer { height: 300px; }

    .footer-r {   
    padding-left: 0;
    }   
}