/* Temporary shrink to Emergency Message */
.emergency-banner {
padding-top: 5px;
padding-bottom: 5px;
}
/* Override party logo size on desktop */
@media (min-width: 1200px){
.person-details-party-logo {
max-width: 300px;
}
}
/* Line up lists correctly */
.body-text li, .grid-rte__container li, .grid-text__container li{
text-indent: -1.1em;
}
/*People block*/
.people li{
display: block;
width: 150px;
float: left;
min-height: 356px;
text-align: center;
}
.grid-text__container ul.people li::before {
content: "";
}
.body-text ul.people li::before {
content: "";
}
.people li p a {
font-weight: bold;
}
.highlightBox {
border: 2px solid #747474;
padding-left: 10px;
padding-right: 10px;
}
/*Table Tweaks*/
* {
box-sizing: border-box;
}
table {
border-collapse: collapse;
max-width: 100%;
}
/****** Timeline styling (Pink circles) ******/
/* Set a background color */
.timeline {
background-color: #3C3C3B;
padding-top: 20px;
padding-bottom: 20px;
}
/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* Container around content */
.timeline-content {
padding: 20px 20px;
position: relative;
background-color: inherit;
width: calc(50% - 50px);
}
/* The circles on the timeline */
.timeline-content::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -32px;
background-color: white;
border: 4px solid #C9187E;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.timeline-content:nth-of-type(odd) {
left: 0;
padding: 10px 40px 10px 30px;
}
/* Place the container to the right */
.timeline-content:nth-of-type(even) {
left: 50%;
padding: 10px 30px 10px 40px;
}
/* Add arrows to the left container (pointing right) */
.timeline-content:nth-of-type(odd):before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: -10px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.timeline-content:nth-of-type(even):before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: -10px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.timeline-content:nth-of-type(even):after {
left: -42px;
}
/* The actual content */
.timeline-content {
margin: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 1200px) {
/* Place the timelime to the left */
.timeline::after {
left: 31px;
}
/* Full-width containers */
.timeline-content {
width: calc(100% - 95px);
margin-left: 70px;
margin-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.timeline-content:nth-of-type(odd):before {
left: -10px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.timeline-content:nth-of-type(odd):after, .timeline-content:nth-of-type(even):after {
left: -52px;
}
/* Make all right containers behave like the left ones */
.timeline-content:nth-of-type(even) {
left: 0%;
}
}
/*REPEAT of the above for Timelines in narrow spaces */
@media screen and (min-width: 1201px) {
/* Place the timelime to the left */
.narrow.timeline::after {
left: 31px;
}
/* Full-width containers */
.narrow .timeline-content {
width: calc(100% - 95px);
margin-left: 70px;
margin-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.narrow .timeline-content:nth-of-type(odd):before {
left: -10px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.narrow .timeline-content:nth-of-type(odd):after, .narrow .timeline-content:nth-of-type(even):after {
left: -52px;
}
/* Make all right containers behave like the left ones */
.narrow .timeline-content:nth-of-type(even) {
left: 0%;
}
}
/* Place the timelime to the left */
.narrow.timeline::after {
left: 31px;
}
/* Full-width containers */
.narrow .timeline-content {
width: calc(100% - 95px);
margin-left: 70px;
margin-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.narrow .timeline-content:nth-of-type(odd):before {
left: -10px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.narrow .timeline-content:nth-of-type(odd):after, .narrow .timeline-content:nth-of-type(even):after {
left: -52px;
}
/* Make all right containers behave like the left ones */
.narrow .timeline-content:nth-of-type(even) {
left: 0%;
}
/* In all cases Style headings as headings */
.timeline-content h2 {
font-size: 2.4rem;
margin-top: 0px;
}
/*** Timeboxes ***/
* {
box-sizing: border-box;
}
/* Set a background color */
.timeblocks {
background-color: #3C3C3B;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
display:block;
overflow: auto;
}
/* The actual timeline (the vertical ruler) */
.timeblocks {
position: relative;
max-width: 1200px;
margin: auto 0;
}
/* The actual timeline (the vertical ruler) */
.timeblocks::after {
content: '';
position: absolute;
height: 6px;
background-color: white;
left: 0;
right: 0;
top: 20px;
margin-top: -3px;
}
/* Container around content */
.timeblocks-content {
padding: 20px 20px;
position: relative;
background-color: inherit;
width: calc(20% - 20px);
float:left;
}
/* The circles on the timeblocks */
.timeblocks-content::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
left: calc(50% - 12px);
background-color: white;
border: 4px solid #C9187E;
top: -35px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.timeblocks-content {
left: 0;
padding: 10px 20px 10px 20px;
}
/* Add arrows to the top of the container */
.timeblocks-content::before {
content: " ";
height: 0;
position: absolute;
top: -10px;
width: 0;
z-index: 1;
left: calc(50% - 10px);
border: medium solid white;
border-width: 0px 10px 10px 10px;
border-color: transparent transparent white transparent;
}
/* The actual content */
.timeblocks-content {
margin: 22px 10px 10px 10px;
background-color: white;
position: relative;
border-radius: 6px;
}
/* Media queries - Responsive timeblocks on screens less than 600px wide */
@media screen and (max-width: 900px) {
/* Place the timelime to the left */
.timeblocks {
margin: 0 auto;
}
.timeblocks::after {
left: 31px;
width: 6px;
height: 100%;
top: 4px;
}
/* Full-width containers */
.timeblocks-content {
width: calc(100% - 75px);
margin-left: 40px;
margin-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.timeblocks-content::before {
left: -10px;
top: 10px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.timeblocks-content:nth-of-type(odd):after, .timeblocks-content:nth-of-type(even):after {
left: -38px;
top: 10px;
}
/* Make all right containers behave like the left ones */
.timeblocks-content:nth-of-type(even) {
left: 0%;
}
}
/*REPEAT of the above for timeblockss in narrow spaces */
@media screen and (min-width: 1201px) {
/* Place the timelime to the left */
.narrow.timeblocks::after {
left: 31px;
}
/* Full-width containers */
.narrow .timeblocks-content {
width: calc(100% - 95px);
margin-left: 70px;
margin-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.narrow .timeblocks-content:nth-of-type(odd):before {
left: -10px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.narrow .timeblocks-content:nth-of-type(odd):after, .narrow .timeblocks-content:nth-of-type(even):after {
left: -52px;
}
/* Make all right containers behave like the left ones */
.narrow .timeblocks-content:nth-of-type(even) {
left: 0%;
}
}
/* Place the timelime to the left */
.narrow.timeblocks::after {
left: 31px;
}
/* Full-width containers */
.narrow .timeblocks-content {
width: calc(100% - 95px);
margin-left: 70px;
margin-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.narrow .timeblocks-content:nth-of-type(odd):before {
left: -10px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.narrow .timeblocks-content:nth-of-type(odd):after, .narrow .timeblocks-content:nth-of-type(even):after {
left: -52px;
}
/* Make all right containers behave like the left ones */
.narrow .timeblocks-content:nth-of-type(even) {
left: 0%;
}
/* In all cases Style headings as headings */
.timeblocks-content h2 {
font-size: 2.4rem;
margin-top: 0px;
}
/* Blockquotes */
blockquote{
font-size: 1.4rem;
line-height: 2.6rem;
font-weight: 400;
border-left: 5px solid #c9187e;
padding: 15px 20px 15px 20px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
}
/*Proper CSS for floating things*/
.float-left {
float: left;
}
.float-right {
float: right;
}
@media screen and (min-width: 1201px) {
.float-left, .float-right {
width: 50%;
}
}
.clearfix {
clear: both;
}
/*If not desktop make sure images aren't too wide */
img {
max-width:100%;
height: auto;
}
img.senedd-logo{
max-width:none
}
.large {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 10px;
}
.iframe-wrapper {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
/* Then style the iframe to fit in the container div with full height and width */
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
/* Expandable Boxes */
.sys_ToggleContainer {
margin-bottom: 20px;
}
.sys_ToggleItem {
border: 1px solid #ccc;
display: block;
margin-bottom: 10px;
width:100%;
}
.sys_ToggleItem.mt-20 {
margin-top:20px;
}
.sys_ToggleShowHide {
background: url("/media/51olq1hv/expandsection-white.png") no-repeat 98% center;
color: #000;
display: block;
font-size: 16px;
font-weight: 400;
line-height: 22px;
margin-bottom: 0;
padding: 12px 40px 12px 12px;
color: #fff;
background-color: #333132;
}
.sys_ToggleShowHide.active {
background-color: #000000 !important;
color:#fff;
background: url("/media/5fzo0zkf/contractsection-white.png") no-repeat 98% center;
}
.sys_ToggleShowHide:hover {
background-color: #000000 !important;
text-decoration: none;
cursor: pointer;
color: #fff;
}
.sys_ToggleSlidingDiv {
color: #000;
line-height: 20px !important;
padding: 10px 15px 15px 15px;
display:none;
}
.sys_ToggleSlidingDiv.active {
display:block;
}
.sys_ToggleShowHide p {
color: #fff;
padding: 0;
margin: 0;
}
/* Image Gallery Fixes */
.splide__slide {
height: auto;
}
#thumbnail-slider {
width: 100%;
}
.splide ul li {
padding:0;
}
.splide ul li:before {
display: none;
}
.splide__slide img {
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
overflow: hidden;
}
#thumbnail-slider {
width: 100%;
}
.thumbnail-container {
margin-top: 10px;
}
/* End Image Gallery Fixes */
/* Fix to ensure column content fills the space correctly */
@media (min-width: 600px){
.column {
align-items: stretch;
flex-direction: column;
}
}
/* Fix for old migrated content having .text class that defaults to 30px height */
.inner.cms .text {
height: auto;
}
/* Fix for Pink Buttons on Content Pages being too narrow for longer text - Ian 31/08/2022 */
.body-text .button__with-arrow, .col-md-12 .button__with-arrow {
max-width: 60%;
width: fit-content;
}
.col-md-9 .button__with-arrow {
max-width:80%;
width: fit-content;
}
.col-md-6 .button__with-arrow, .col-md-4 .button__with-arrow {
max-width:100%;
width: fit-content;
}
.GreyBox {
padding: 25px 25px 30px 25px;
border: 1px solid #d9d9d9;
background-color: #f2f2f2;
margin: 10px 0 10px 0;
color: #000;
}
main a[href*="remunerationboard.wales"]:before,main a[href*="bwrddtaliadau.cymru"]:before {
display: none!important
}
a.link-block {
display: block;
padding: 20px 10px 20px 10px;
background-color: #f6f6f7;
text-decoration: none;
}
a.link-block:hover {
background-color: #dfe0e1;
}
a.link-block .material-icons {
font-size: 40px;
border-radius: 20px;
background-color: #ffffff;
margin-right: 10px;
float: left;
}
span.linkblock-title {
display: block;
padding-bottom: 3px;
}
/** Accessibility fix, show all footer items without need to expand contract the sections **/
@media (max-width: 599px){
.link-list {
max-height: 500px;
overflow: auto;
-webkit-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
}
.footer-title--down-arrow {
width: 100%;
cursor: default;
}
.footer-title--down-arrow:after {
display:none;
}
}
/* Fix for Image over text widget margin and padding - Ian 09/07/2024 */
.grid-item__title--title-over-image {
margin: 0;
padding: 20px 0 20px 20px;
}
