/* EXTRAS.CSS 
This file is for any styles other than those developed by Reading Room. Please comment and add your initials and date to any additions 
*/

/* bespoke styling for awesome content links borrowed from YD Dales - DH 3/10/14 - need to tweak positioning, size and styling */
.content_social_icons { padding-left:15px; padding-top:20px; font-size:34px; margin-top: 1em !important; position: relative; bottom: 0.5em;}
.content_social_icons h4 {font-size: 0.6em; padding: 0; margin: 0;}

.content_social_icons i,
.content_social_icons ul li svg {padding-right:5px; width:auto;  overflow:hidden; float: left; }

.content_social_icons ul li svg.fa-facebook-square,
.content_social_icons i.fa-facebook-square  { color: #3b5998;}

.content_social_icons a:hover svg.fa-facebook-square,
.content_social_icons a:hover i.fa-facebook-square { color: #334d85;}


i.fa-twitter-square {color: #00aced;}
a:hover i.fa-twitter-square {color: #009ad5;}
i.fa-google-plus-square {color: #dd4b39;}
a:hover i.fa-google-plus-square {color: #ca3523;}
i.fa-pinterest-square {color: #cb2027;}
a:hover i.fa-pinterest-square {color: #a81a20;}
i.fa-envelope {color: #747474;}
a:hover i.fa-envelope {color: #606060;}

/* generic left and right classes for legacy content */
.right  { float: right; margin-right: 0.1em; margin-left: 0.5em;}
.left    {float: left; margin-right: 0.5em; margin-left: 0.1em;}

/* when you want images floating next to lists  */
.pageContent ul.noclear,              
.pageContent ol.noclear {clear: none !important;}

/* generic text transformation(ccase=Camel Case) */
.ucase {text-transform: uppercase;}
.lcase {text-transform: lowercase;}
.ccase {text-transform: capitalize;}

/* and PDF links in lists not to affect the list line-spacing (was 15px for bottom) - DH 18/5/15 */
.pageContent ul img,
.pageContent ul img     { margin: 0 0 0 0; }
.pageContent ul > li img.icon,
.pageContent ol > li img.icon    {margin: 0;}

/*  Modern.gov styles */
/* clear lists */
.pageContent div#modgov ul {clear: none !important;}
/* show crumbtrail links inline not block */
.mgSectionTitle a {display: inline; text-decoration:none !important;}
.mgImpThumbsList ul li {background: #fff; list-style-type: none !important;}

/* fix form layout */
#modgov .mgNoBr a  { display: inline !important;}
/* fix H1 color on Moderngov */
#modgov .contentHeader h1 { font-size: 2.6em; color: #8d395b; margin: 0 0 10px; }

/* attempt to force audiominutes player to show full width on desktop - DH 4/3/19 */
#modgov .jp-seek-bar, 
#modgov .large_player
{min-width: 100% !important; width:100% !important; border: 0px solid red !important;}


/* if we want to hide stuff from the front end, but retain in the system */
.hide {display:none;}

/* responsive iframes  for Youtube etc. add this class to a div around the iframe */ 
.video-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.video-container iframe,
.video-container object,
.video-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/* make H2 and img in section spotlights clickable - DH 16/11/15 */
.oneThirdSpotlight .imgContainer a {margin-top: 0;}
.oneThirdSpotlight .textContainer h3 a:hover,
.oneThirdSpotlight .textContainer h3 a:active
/*.oneThirdSpotlight .textContainer h3 a:visited*/ {color:#8D395B;}
.oneThirdSpotlight .textContainer h3 a {margin-top: -4px; text-decoration: none; font-weight: bold;}

/* avoid excessive white space between the banner and body text if a H2 gets added as the first element of the body text DH 18/11/15  */
.pageContent h2.top {margin-top: 0em !important;}

/* reduce the white at the top of the content for all pages  */
.fullWidthDesktop   {padding-top: 0px !important;}

/* overrule 11px spacing for content images */
.pageContent img.alignright { padding: 0 0 5px 10px; }
.pageContent img.alignleft { padding: 0 10px 5px 0 ; }
.pageContent img.aligncenter  { padding: 5px 10px; }

/* experimental filetype icons using CSS selectors - DH 18/02/16  */
.pageContent a[href $='.ppt'],
.pageContent a[href $='.pptx'] {background: transparent url(/__data/asset_types/powerpoint_doc/icon.png) no-repeat center right;border: 0px solid red; margin-right: 0.5em; padding: 0.1em 1.5em 0.1em 0;}

/* uncomment the rest once you've tested */

.pageContent a[href $='.doc'],
.pageContent a[href $='.docx'] {background: transparent url(/__data/asset_types/word_doc/icon.png) no-repeat center right;border: 0px solid red; margin-right: 0.5em; padding: 0.1em 1.5em 0.1em 0;}
.pageContent a[href $='.csv'],
.pageContent a[href $='.xls'],
.pageContent a[href $='.xlsx'] {background: transparent url(/__data/asset_types/excel_doc/icon.png) no-repeat center right;border: 0px solid red; margin-right: 0.5em; padding: 0.1em 1.5em 0.1em 0;}

.pageContent a[href $='.pdf'] {background: transparent url(/__data/asset_types/pdf_file/icon.png) no-repeat center right;border: 0px solid red; margin-right: 0.5em; padding: 0.1em 1.5em 0.1em 0;}


/* when the time comes to switch, uncomment these to hide the old icons from the front-end
.pageContent img[src*="58831"],
.pageContent img[src*="89638"] {display: none;}   
 */

/* amends for test remote content #873890  */

.tablestyle td a {display: inline;}
.tablestyle tr:nth-of-type(even) {background-color:#eee;}
.tablestyle .toprow {background-color:#ccc; border-bottom: 1px #000 solid;}
/* .tablestyle .row1 {background-color:#fff; }
.tablestyle .row0 {background-color:#eee; } */





.tablestyle .refh {width: 16%; font-weight: bold; padding-left:2px;}
.tablestyle .loch { font-weight: bold; }
.tablestyle .dateh {width: 13%; font-weight: bold; padding: 5px 2px 2px 0px; text-align:right;}
.tablestyle .date {width: 10%; text-align:right; border: 1px solid green;}


/* responsive table - test for DMP and cycle hire then integrate into tablestyle */
.dmptable {width: 100%;} 

.tablestyle th, 
.dmptable th {background-color: #ddd;}

.dmptable th p {text-align: center; font-weight: bold; margin: 0.5em;}
.dmptable .left {text-align: left;}
.dmptable .col4 {width: 200px;}

.tablestyle td,
.dmptable td { padding: 0  !important; margin: 0 !important; border: #ddd 1px solid;} 
.tablestyle td p {text-align: center; padding: 0.5em  !important; margin: 0 !important;} 
.dmptable td p {padding: 0.3em  !important; margin: 0 !important;} 

/* font size fix  14-05-18 DH */
.dmptable td,
.dmptable td p, 
.dmptable td p a,
.dmptable td a {font-size: 0.9em !important;}

/* mobile hack for Youtube and yr.no iframes 21/05/18 DH */
.video-container, .videocontainer, .map-container, .videowrapper, .videowrapper .video-container 

{
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
   /* min-height: 200px;*/
}
.video-container iframe, .videocontainer iframe, .map-container iframe, .videowrapper .video-container iframe
{    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%; 
}

.videowrapper .video-container  {border: 1px solid red;}


/* emergency banner */

    #emergency {width: 100%; 
                max-width: 980px;
                margin: auto; 
                background: #eee; 
               /* background-image: url('/__data/assets/image/0008/1269206/demo-header-alert-icon.png'); 
                background-repeat: no-repeat; 
                background-position: left center; */
                text-align: center; 
                border: 1px solid red; }

.mws-directions {border: 0px solid grey; border-image: none; width: auto; margin-left: 0.5em;}
.mws-directions a {background: #595959; padding: 1em; border: 1px solid black; border-image: none; color: #ffffff; font-weight: bold; text-decoration: none;}
.mws-directions a:hover {background: rgb(133, 133, 133);}

/* basic styling for alert boxes for individual pages */
.alertbox {background:#ddd; padding: 0.5rem;}


/* hide skip nav link */
.skip-link {
  background: #319795;
  color: #fff;
  font-weight: 700;
  left: 50%;
  padding: 4px;
  position: absolute;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0%);
}