.clearboth {
   clear: both;
}


div#header_cookies {
   width: 80%; margin: 0 auto; margin-top: 5px; margin-bottom: 5px; border: 4px solid #263E5F; padding: 3px;
   font-size: 1.2em;
   line-height: 1.2em;
   text-align: center;
   color: white;
   background-color: #004E8F;
}

div#header_cookies a {
   color: white;
   text-decoration: underline;
}

img.left {
	float: left; 
	padding: 0.2em;
    padding-left: 0.15em;
	margin-right: 0.7em;
    margin-left: 0;
    margin-bottom: 0.7em;
    border: 1px solid #d0d0d0;	
}


img.right {
   float: right;
   padding: 0.2em;
   padding-right: 0.15em;
   margin-right: 0;
   margin-left: 0.7em;
   margin-bottom: 0.7em;
   border: 1px solid #d0d0d0;
}

h2.pageheadingunderline {
   font-size: 1.9em;
   border-bottom: 1px solid #226DAC;
   margin-right: 0.5em;
}

a {
   word-wrap: break-word;
}

div.archivedmaterial {
/*   background-color: #f9f9f9;*/
   background-color: #ffffff;
   border-bottom: 4px solid #226dac;
/*   border: 2px solid #226DAC;*/
/*   border-top: 8px solid #226DAC;*/
   padding: 0.0em 0.6em 0.6em 0.6em;
   margin-left: -6px;
   margin-right: -4px;
   margin-bottom: 1.0em;
   text-align: center;
}
div.archivedmaterial h2 {
   display: inline;
}
div.archivedmaterial img {
   padding-right: 0.6em;
   vertical-align: middle;
}
div.archivedmaterial p {
  padding-top: 0.6em; 
}

/* NEWS items */
div.news_item {
   border: 2px solid #e4e3e3;
   background-color: #ffffff;
   clear: both;
   float: left;
   width: 99.5%;
/*   margin-left: 1.2em;
   margin-right: 1.2em;
*/}
div.news_item h2.headline {
   font-weight: 400;
   border-bottom: 1px solid #e0e0e0;
   padding-bottom: 0.3em;
   padding-left: 0.6em;
   padding-top: 0.3em;
   background-color: #e4e3e3;
   color: #000000;
}
div.news_item img {
   margin-bottom: 0.4em;
   padding-left: 0.1em;
   padding-right: 0.1em;
   display: inline;
}

div.news_item .videoWrapper {
   position: relative;
   padding-bottom: 56.25%; /* 16:9 */
   padding-top: 25px;
   height: 0;
}

div.news_item .videoWrapper iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.img-float-left {margin-right: 20px;}

/* CSS for making Youtube iFrame responsive */

div.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
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%;
}

/* CSS for making Twitter iFrame responsive */

div.twitter-container {
position: relative;
padding-bottom: 0; /* */
padding-top: 600px; 
height: 50%; 
overflow: hidden;
}

.twitter-container iframe,
.twitter-container object,
.twitter-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/* CSS for making HTML 5 video banners responsive */
/* experiment on /research/groups/culture-politics-justice/ - change to KPP 111021*/

div.video-container-html-banner {
position: relative;
padding-bottom: 45%; /* 16:9 */
padding-top: 0; 
height: 0; 
overflow: hidden;
}

.video-container-html-banner video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* CSS for highlight text */

mark.green {
  background-color: #00d2b9;
  color: black;
 font-style: normal;
	font-family: "Spectral", "myriad-pro", myriad, verdana, arial, sans-serif;
}

mark.bubblegum {
  background-color: #ff5a87;
  color: black;
 font-style: normal;
	font-family: "Spectral", "myriad-pro", myriad, verdana, arial, sans-serif;
}

mark.purple {
  background-color: #9655ff;
  color: white;
 font-style: normal;
	font-family: "Spectral", "myriad-pro", myriad, verdana, arial, sans-serif;
}

mark.yellow {
  background-color: #ebeb05;
  color: black;
 font-style: normal;
	font-family: "Spectral", "myriad-pro", myriad, verdana, arial, sans-serif;
}

/* CSS for the "Read More" buttons that show/hide paragraph content */
a.morelink {
display: table;
    text-decoration:none;
    outline: none;
    background-color: #0072CF;
    /*padding-top: 2em;*/
   margin-top: 0.5em;
    padding: 4px;
    color: #ffffff;
   font-size: 0.9em;
   float: right;
   margin-bottom: 0.3em;
}

a.morelink:hover {
display: table;
    text-decoration:none;
    outline: none;
	background-color: #000;}

.artcontent span {
    display: none;
}
.art {
    background-color: #ffffff;
    margin: 0px;
   margin-top: 0;
}
.inline {
   display: inline;
}
/* HOWTO : use <div class="art inline">{content}</div> */
/* END : "Read More" links */


/* RESEARCH pages from 2016-08-05 onwards */
div.research-typical-project {
   float: left; 
   width:95%;
   background-color: #ffffff;
   border: 1px solid #5D8AA8;
   border-top: 4px solid #5D8AA8;
   padding: 0.3em;
}
div.research-typical-project > div.research-typical-project-info-container {
   float: right;
   width: 71%;
}
div.research-typical-project > div.research-typical-project-info-container > div.maintext {
   width: 100%;
   border-bottom: 1px solid #5d8aa8;
}
div.research-typical-project > div.research-typical-project-info-container > div.pi {
   width: 99%;
   padding-top: 0.0em;
   float: left;
}
div.research-typical-project > div.research-typical-project-image-container {
   float: left;
   width: 28%;
   padding-right: 0.2em;
}
div.research-typical-project > div.research-typical-project-image-container img {
   border: 1px solid #e0e0e0;
}

table td.centered {
   text-align: center;
}

/* PEDAL Custom CSS for pedal/index.html 16/09/19 jlh208 */

   /* individual box text */
   .campl-theme-ff h2.campl-teaser-title.pedal {
   font-size: 1.5em;
   font-weight: 600;
   color: #3E3E3E;
   }
/* END */
/* individual small green link box with arrow 
.campl-focus-link.pedalgreen {
    width: 33px;
    height: 33px;
    background: #ffffff url(/images/template-images/icon-fwd-btn.png) 14px 13px no-repeat;
        background-color: rgb(49, 49, 49);
    position: absolute;
    bottom: 0;
    right: 0;
}*/
/* END */


.campl-theme-ff .campl-focus-link.pedalgreen {
    background-color: #A9B338;
}
.campl-theme-ff .campl-focus-link.pedallightblue {
    background-color: #01AEBF;
}
.campl-theme-ff .campl-focus-link.pedaldarkblue {
    background-color: #0272BA;
}
.campl-theme-ff .campl-focus-link.pedalpurple {
    background-color: #902C8E;
}

/* Accessible right menu with buttons and overlayed text to replace the non accessible image button menu */

/* Reset the ul and li styles */
.educrightmenu ul.vertical-menu, .educrightmenu ul.vertical-menu li {
    list-style-type: none;
	list-style-image: none; /* Remove any list-style images */
    margin: 0;
    padding: 0;
}

/* General styles for the menu */
.educrightmenu ul.vertical-menu {
    display: flex;
    flex-direction: column;
    width: 200px;
}

/* Button styles with higher specificity */
.educrightmenu ul.vertical-menu li .menu-button {
    display: block;
    padding: 10px 15px;
    background-color: #007BFF; /* WCAG AA compliant blue */
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: normal;
    border: none;
    border-radius: 4px;
    margin-bottom: 5px;
    text-align: left;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Focus and hover states */
.educrightmenu ul.vertical-menu li .menu-button:hover,
.educrightmenu ul.vertical-menu li .menu-button:focus {
    background-color: #0056b3; /* Darker blue for better contrast */
    outline: 1px solid #0d0d0d;
}

/* Active state */
.educrightmenu ul.vertical-menu li .menu-button:active {
    background-color: #003f7f;
}

/* Ensure visited links remain white */
.educrightmenu ul.vertical-menu li .menu-button:visited {
    color: white; /* Override the purple visited color */
}

/* High contrast focus state */
.educrightmenu ul.vertical-menu li .menu-button:focus-visible {
    outline: 3px solid #ffeb3b;
}

/* Ensure transitions are removed for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .educrightmenu ul.vertical-menu li .menu-button {
        transition: none;
    }
}

/* Active button styling */
.educrightmenu ul.vertical-menu li .menu-button.active {
    background-color: #003f7f; 
    color: white; /* Keep text white */
}
/* Submenu styling */
.educrightmenu ul.vertical-menu li .submenu {
    display: none;
    margin-left: 20px; /* Indentation for submenu */
    padding-top: 5px;
}

.educrightmenu ul.vertical-menu li .submenu-button {
    background-color: #007bff; /* WCAG AA compliant blue */
    color: white; /* Ensure text stays white */
}
.educrightmenu ul.vertical-menu li .submenu-button.active {
    background-color: #003f7f; /* Different color for active submenu item */
    color: white; /* Ensure text stays white */
}

/* Show the submenu on hover, focus, or when the parent button is active */
.educrightmenu ul.vertical-menu li:hover > .submenu,
.educrightmenu ul.vertical-menu li:focus-within > .submenu,
.educrightmenu ul.vertical-menu li .menu-button.active + .submenu {
    display: flex;
    flex-direction: column;
}

/* Submenu button styles */
.educrightmenu ul.vertical-menu li .submenu-button {
    display: block;
	list-style-type: none;
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    margin-bottom: 5px;
    text-align: left;
    transition: background-color 0.3s ease;
}

/* Submenu hover and focus states */
.educrightmenu ul.vertical-menu li .submenu-button:hover,
.educrightmenu ul.vertical-menu li .submenu-button:focus {
    background-color: #003f7f;
    outline: 2px solid #fff;
}

/* Ensure visited submenu links remain white */
.educrightmenu ul.vertical-menu li .submenu-button:visited {
    color: white;
}

/* High contrast for focus */
.educrightmenu ul.vertical-menu li .submenu-button:focus-visible {
    outline: 3px solid #ffeb3b;
}

/* Ensure transitions are removed for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .educrightmenu ul.vertical-menu li .submenu-button {
        transition: none;
    }
}