/**
 * @file
 * DRAccess Customizations
 *
 * @see url for image links: url(../../images/images.png)
 */


/* Load Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Oswald:wght@200;300;400;500;600;700&display=swap');

/* Global box-sizing rule at the top to make calculations easier */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
	background-color: #b3c4d7;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.5;
}


/* GLOBAL LAYOUT */
.layout-container {
  background-color: #ffffff;
  width: 100%;
  max-width: 1200px;
  overflow-x: hidden;
  margin: 0 auto; /* centers the container */
  padding: 0;
  border-right: 1px solid #5b86ab;
  border-left: 1px solid #5b86ab;
  text-align: left;
  color: #333;
}
.region-content {
  margin-top: 0;
  padding-top: 0;
}

/* Top Menu Container Styles (Global) */
.region-primary-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 16px;
  background-color: #d7e0ea; /* The blue bar background */
  border-top: 1px solid #b3c4d7;
  border-bottom: 1px solid #b3c4d7;
  box-sizing: border-box;
}



/* BASIC STYLES */
p {
	color: #000;
	margin: 0;
	padding: 0 0 1em 0;
	font-size: 1em;
	line-height: 1.5;
}
hr {
	border: 0;
	margin-bottom: 3px;
	width: 100%;
	height: 1px;
	color: #b3c4d7;
	background-color: #5b86ab;
}

/* LINK STYLES */
a {
	color: #365980;
	text-decoration: none;
}
p a:link, p a:visited, td a:link, td a:visited, li a:link, li a:visited, h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited, .views-field-view-node a {
	color: #365980;
	text-decoration: none;
	border-bottom: 1px dotted #32749e;
}
.views-field-view-node { font-size: .9em; } /* Read more... link */
#block-draccess-content p a, #block-draccess-content li a, #block-draccess-content td a, #footer p a {
	border-bottom: 1px dotted #32749e;
}
p a:hover, td a:hover, li a:hover, h1 a:hover, h2 a:hover, h3 a:hover, .views-field-view-node a:hover {
	color: #f15a29;
	border-bottom: 1px dotted #f15a29;
}



/* MAIN MENU - TOP HORIZONTAL NAVIGATION */
#block-draccess-main-menu {
    flex: 1;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
#block-draccess-main-menu ul.menu {
    padding: 0;
    display: inline;
  }
#block-draccess-main-menu ul.menu li.menu-item {
	float: left;
    list-style-type: none;
    list-style-image: none;
	margin: 4px 0;
    padding: 0 6px 0 0;
}
#block-draccess-main-menu ul li.menu-item a, #main-menu ul li a:link, ul.button-links li a {
	margin: 4px 0;
	border: 1px solid #7193b5;
	padding: 2px 8px;
	background-color: #b3c4d7;
	color: #000;
	font-size: 1.05em;
	line-height: 1.5;
}
#block-draccess-main-menu ul li.menu-item--active-trail a, #block-draccess-main-menu ul li a.is-active {
	color: #285c7e;
	background-color: #d7e0ea;
}
#block-draccess-main-menu ul li.menu-item a:hover {
	border: 1px solid #84abc4;
	background-color: #eaf1f5;
	color: #f15a29;
}
#block-draccess-main-menu .menu-item--active-trail a:hover { color: #555; background-color: #d7dfe9; }
#block-draccess-main-menu ul.links.inline.clearfix { height: 100px; }
#block-draccess-main-menu ul li.last { margin-right: 136px; }



/* SOCIAL MEDIA ICONS IN TOP NAVIGATION BAR */
#block-draccess-webpropertiesicons {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#webProperties {
    margin: 0;
    padding: 0;
    line-height: 0;
	text-align: right;
}
#webProperties a img {
    margin: 0;
}


/* @ToDo ADMIN USER MENU */
#block-draccess-account-menu {
	position: relative;
	text-align: right;
	margin: 0 20px 10px 20px;
	padding: 0;
}
#block-draccess-account-menu ul.menu { padding: 0; display: inline; }
#block-draccess-account-menu ul.menu li.menu-item {
	float: right;
    list-style-type: none;
    list-style-image: none;
	margin: 0;
    padding: 0;
}
.region-secondary-menu {
	position: relative;
	top: 0;
	right: 0;
}
.region-secondary-menu ul li a {
	margin: 4px 0 4px 6px;
	border: 1px solid #7193b5;
	padding: 2px 8px;
	background-color: #b3c4d7;
	color: #000;
	font-size: 1em;
	line-height: 1.5;
}
.region-secondary-menu ul li a.active { color: #555; background-color: #d7dfe9; }
.region-secondary-menu ul li a:hover { color: #a04a23; background-color: #d7e0ea; }
.region-secondary-menu .active a:hover { color: #555; background-color: #d7dfe9; }
.region-secondary-menu { padding-top: 6px; }



/* SEARCH FIELD */
#block-draccess-search-form-narrow {
	position: relative;
	text-align: right;
	margin: 8px 0 0 0;
	padding: 0;
}
#block-draccess-search-form-narrow .form-type-search {
	margin: 0;
	padding: 0;
}
#block-draccess-search-form-narrow .form-search,
#block-draccess-search-form-narrow #edit-submit {
	line-height: 1.5;
	margin: 0;
	padding: 2px 8px;
}



/* HEADERS */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.5;
	color: #a04a23;
	margin: 0;
}
h1 { font-size: 1.8em; font-weight: 800; padding: 18px 0 6px 0; }
h2 { font-size: 1.6em; font-weight: 700; padding: 14px 0 0 0; }
h3 { font-size: 1.4em; font-weight: 700; padding: 14px 0 0 0; }
h4 { font-size: 1.3em; font-weight: 600; padding: 12px 0 0 0; }
h5 { font-size: 1.2em; font-weight: 600; padding: 12px 0 0 0; }
h6 { font-size: 1.05em; font-weight:500; padding: 10px 0 0 0; }
.views-field-title h2,
.views-field-title h3 {
	font-size: 1.2em; font-weight: 700;	padding: 6px 0 0 0; }
.views-field-title h2 a:link,
.views-field-title h3 a:link {
	border-bottom: 0; }



/* NAVIGATION - VERTICAL SIDE NAVIGATION */
#block-draccess-sidenavigation, #block-draccess-sidenavigation2 {
	width: 99%;
	margin: 0 0 1em 0;
	border-right: 1px solid #b3c4d7;
}
#block-draccess-sidenavigation ul, #block-draccess-sidenavigation2 ul {
	list-style-type: none;
	font-size: 1em;
	line-height: 1.25em;
	margin: 0;
	padding: 0;
}
#block-draccess-sidenavigation ul ul, #block-draccess-sidenavigation2 ul ul {
	font-size: .95em;
	line-height: 1.1em;
}
#block-draccess-sidenavigation ul ul li a, #block-draccess-sidenavigation2 ul ul li a { text-indent: 0; }
#block-draccess-sidenavigation ul ul ul li a, #block-draccess-sidenavigation2 ul ul ul li a { padding-left: 50px; }
#block-draccess-sidenavigation ul li, #block-draccess-sidenavigation2 ul li { padding: 0; margin: 0; }
#block-draccess-sidenavigation ul li.menu__item.is-collapsed, #block-draccess-sidenavigation ul li.menu__item.is-expanded, #block-draccess-sidenavigation ul li.menu__item.is-leaf, #block-draccess-sidenavigation2 ul li.menu__item.is-collapsed, #block-draccess-sidenavigation2 ul li.menu__item.is-expanded, #block-draccess-sidenavigation2 ul li.menu__item.is-leaf {
	list-style-type: none;
	list-style-image: none;
}
#block-draccess-sidenavigation ul li a, #block-draccess-sidenavigation2 ul li a {
	margin: 0;
	border-bottom: 1px solid #fff;
	padding: 7px 3px 7px 27px;
	text-indent: -15px;
	display: block;
	overflow: hidden;
}
#block-draccess-sidenavigation ul li a {
	background: #3f7055;
	background-image: url(/images/sidebar_green.png);
	background-repeat: no-repeat;
}
#block-draccess-sidenavigation2 ul li a {
	background: #32749e;
	background-image: url(/images/sidebar_blue.png);
	background-repeat: no-repeat;
}
ul.contextual-links li a { background: #fff; }
#block-draccess-sidenavigation ul li a:link, #block-draccess-sidenavigation a:visited, #block-draccess-sidenavigation2 ul li a:link, #block-draccess-sidenavigation2 a:visited {
	text-decoration: none;
	color: #fff;
}
#block-draccess-sidenavigation ul li a:hover {
    background: #9ccc57;
	background-image: url(/images/sidebar_green.png);
	background-repeat: no-repeat;
    color: #000;
}
#block-draccess-sidenavigation ul li.menu-item--active-trail a.active, #block-draccess-sidenavigation ul li a.is-active {
	background: #c5d4cc;
	background-image: url(/images/sidebar_green.png);
	background-repeat: no-repeat;
    color: #254333;
}
#block-draccess-sidenavigation2 ul li a:hover {
    background: #98b9ce;
	background-image: url(/images/sidebar_blue.png);
	background-repeat: no-repeat;
    color: #000;
}
#block-draccess-sidenavigation2 ul li a.active {
	background: #7193b5;
	background-image: url(/images/sidebar_blue.png);
	background-repeat: no-repeat;
    color: #222;
}
.region-sidebar-first { padding: 0; }
.menu-item--collapsed {
    list-style-type: none;
    list-style-image: none;
}
.menu-item--expanded {
    list-style-type: none;
    list-style-image: none;
}
#block-draccess-sidenavigation ul.menu li ul.menu {
	display: none;
}
#block-draccess-sidenavigation ul.menu li.menu-item--active-trail ul.menu {
	display: block;
}
#block-draccess-sidenavigation ul li.is-active ul {
	display: block;
}


/* DOWNLOAD PDF FIELD */
.field--name-field-pdf-upload { margin: 16px 0 26px 0; }
.field--name-field-pdf-upload .field__label { color: #222; }
.file--application-pdf { border-bottom: 1px dotted #32749e; }


/* External URL (Read more...) FIELD */
.field--name-field-external-url {
	float: left;
	width: auto;
	max-width: 60%;
	margin: 0 0 16px 0;
	border: solid 1px #b3c4d7;
	padding: 6px 16px;
	background-color: #fafcfe;
}
.field--name-field-external-url .field__item {
	text-overflow: clip;
	overflow: hidden;
	}
.field--name-field-external-url a {
	font-weight: 600;
	border-bottom: 1px dotted #365980;
	color: #365980;
	text-decoration: none;
}
.field--name-field-external-url a:hover {
	color: #f15a29;
	border-bottom: 1px dotted #f15a29;
}


/* LIST STYLES */
 p + ul {
  margin-top: -10px;
}


/* IMAGE STYLES */
img {
	max-width: 100%;
	border: none;
}
.pix,
.css_medium_pix {
	float: right;
	max-height: 100%; /* prevent overflow vertically */
	width: auto;
	max-width: 34%;
	object-fit: contain; /* maintain aspect ratio within constraints */
	margin: 1px 0px 8px 10px;
	border: 1px solid #32749e;
}
.pix_lrg {
	float: right;
	width: auto;
	max-width: 42%;
	min-width: 320px;
	object-fit: contain;
	margin: 6px 0px 18px 22px;
	border: 1px solid #32749e;
}
.pix_left {
	float: left;
	width: 38%;
	margin: 3px 10px 16px 0px;
	border: 1px solid #32749e;
}
img.border { border: 1px solid #4e6a89; }
img.noBorder { border: 0; }

.views-body-smPix p .pix { /* @todo still needed? */
	width: 22%;
}


/* --- TABLE STYLES --- */
main table {
  width: auto;
}
main table, main td, main th {
  border: 1px solid #bdceb2;
  border-collapse: collapse;
  padding: 4px;
  vertical-align: top;
  background-color: #fff;
  white-space: normal;
  overflow-wrap: break-word;
}
main table td ul { padding: 0 0 0 2px; list-style: disc inside; }
main table td ul.indent { padding: 0 16px 0 2px; list-style: disc inside; }
main table th { font-size: 1em; font-weight: bold; line-height: 1.5; text-align: left; color: #333; }
table p { padding-bottom: 3px; }
main table th.header1 { background-color: #d7dfe9; vertical-align: bottom; }
main table th.header2 { background-color: #f7f8fc; vertical-align: bottom; }
main table.noBorder, table.noBorder td, table.noBorder th { border: 0; }
main th.rtecenter { text-align: center !important; }

/* Table Wrapper - Can add scrolling when table is wider than content area */
main .table-wrapper, main .table-wrapper_sm {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto; /* Enable horizontal scroll */
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1em;
  min-width: 0;
}

/* Table inside the wrapper, allowed to be wider than wrapper */
main .table-wrapper table {
  width: auto;
  max-width: none !important;
  min-width: 690px;
  display: table !important;
}
main .table-wrapper_sm table {
  width: auto;
  max-width: none !important;
  min-width: none;
  display: table !important;
}

/* Control wrapping within cells inside the wrapper */
main .table-wrapper table th,
main .table-wrapper table td {
  white-space: normal;
  overflow-wrap: normal;
}



/* WELCOME SIDEBAR */
.layout-sidebar-second {
	font-size: .95em;
}
#block-draccess-welcomecolumn { }
#block-draccess-welcomecolumn h2 {
	margin-top: 0;
}



/* CUSTOM PAGE STYLES */

/* BOXED TEXT AT BEGINNING OF SECTION VIEWS OR ARTICLES */
.equal_boxes, /* for showing two equal width boxed divs */
.unequal_boxes { /* for showing two divs with two-thirds and a third widths */
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 8px 0 16px 0;
}
.equal_box_item {
	flex: 1 1 45%;
	min-width: 280px;
	background-color: #fff;
	border: 1px solid #adc7d8;
	padding: .9em;
	box-sizing: border-box;
	overflow: hidden;
}
.unequal_box_item--big   {
	flex: 2 1 0%;
	min-width: 200px;
	background-color: #fff;
	border: 1px solid #adc7d8;
	padding: .9em;
	box-sizing: border-box;
}
.unequal_box_item--small {
	flex: 1 1 0%;
	min-width: 200px;
	background-color: #fff;
	box-sizing: border-box;
}
.unequal_box_item--small img {
	border: 1px solid #adc7d8;
	margin-bottom: 4px;
}
.equal_box_item > p:last-child,
.unequal_box_item--small > p:last-child,
.unequal_box_item--big > p:last-child {
	padding-bottom: 0;
}
.equal_box_item > ul:last-child,
.unequal_box_item--small > ul:last-child,
.unequal_box_item--big > ul:last-child {
	margin-bottom: 0;
}


.block_intro_text { /* for showing a single div with full width at top */
	margin: 6px 0px 16px 0px;
	border: solid 1px #b3c4d7;
	padding: 14px 12px 0 16px;
	font-size: .95em;
}
.block_moreinfo_text { /* for showing a single div with full width at bottom */
	margin: 22px 0px 14px 0px;
	border: solid 1px #b3c4d7;
	padding: 6px 16px 10px 16px;
	font-size: .95em;
}

.equal_box_item.noBorder {
	border: 0;
	padding: 0;
}


#learnButtons { /* @ToDo Links on Courses and Tutorials page */
	
}



/* @ToDo PHASE THIS PART OUT */
/* BOXED TEXT and BUTTONS AT BEGINNING of POCKET RATING BOOKLET */
.reports_intro {  }
.reports_intro a img { margin: 6px 0px 0px 0px; border: 1px solid #b3c4d7; }
.reports_intro a:hover img { border: 1px solid #a04a23; cursor: pointer; }
.reports_intro a:first-child { margin-right: 30px; }
/* BUTTONS FOR SUMMARY OF DRDP MANUALS AND POCKET RATING BOOKLETS */
.download_print_buttons { }
.download_print_buttons a img { margin: 0px; border: 1px solid #b3c4d7; }
.download_print_buttons a:hover img { border: 1px solid #a04a23; cursor: pointer; }
.download_print_buttons a:first-child, .download_print_buttons a:nth-child(2) { margin-right: 20px; }




/* FAQs PAGE */
.question {
	background: url(/images/FAQquestionBackground.png) left top no-repeat;
	padding-left: 38px;
	padding-bottom: 3px;
	margin-top: 6px;
	margin-bottom: 0px;
}
.question h6 {
	padding-top: 8px;
	cursor: pointer;
}
.answer {
	background: url(/images/FAQanswerBackground.png) left top no-repeat;
	padding-left: 38px;
	margin-bottom: 18px;
}

/* SUBSCRIBE PAGE */
.MailingListSection {
	text-align: left;
	display: inline-block;
}
#SignupFormPreview table {
	border: 0;
}
#SignupFormPreview td {
	white-space: nowrap;
	border: 0;
}
.SignupFormPreview label {
	font-weight: 400;
}
.SignupFormPreview label {
	display: inline-block;
	text-align: right;
}
.SignupFormPreview input {
	display: inline-block;
	min-width: 180px;
	text-align: left;
}
.SignupFormPreview select {
	display: inline-block;
	width: 206px;
}
.button {
	margin: 0;
	border: 1px solid #7193b5;
	padding: 6px 12px;
	background-color: #b3c4d7;
	color: #000;
	font-size: 1.1em;
	font-weight: 500;
}
.button:hover {
	border-color: #84abc4;
	background-color: #eaf1f5;
	color: #f15a29;
	cursor: pointer;
}
.star {
	font-size: 1.1em;
	font-weight: bold;
	color: #ea7b23;
}
#newsletterArchiveHeading {
    display: block;
    width: 100%;
    overflow: hidden;
    height: 110px;
	margin-top: 32px;
    padding-top: 0;
    background-image: url(/images/ConnectArchiveHeader.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: auto 110px;
}
#newsletterArchiveHeading h2 {
	display: none;
}



/* VIEWS LISTS LAYOUT */
.views-row {
	display: block;
	margin: 0 0 12px 0;
	border: 1px solid #d7dfe9;
	padding: 10px;
	background-color: #f2f7f9;
	overflow: hidden; /* Ensure container adjusts height properly */
	transition: background-color 0.2s, border-color 0.2s;
}
.views-row-link {
  display: block;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.views-row-link:hover .views-row,
.views-row-link:focus .views-row {
	border-color: #84abc4;
	background-color: #fff;
}
.views-row-link .views-row h2,
.views-row-link .views-row h3 {
  color: #4e6a89;
}
.views-row-link:hover .views-row h2,
.views-row-link:hover .views-row h3 {
  color: #f15a29;
}



/* VIEWS GRID LAYOUT */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}
.resource-card {
    border: 1px solid #d7dfe9;
    overflow: hidden;
    transition: border-color 0.2s, background-color 0.2s;
    background-color: #f2f7f9;
}
.resource-card:hover {
    border-color: #84abc4;
    background-color: #fff;
}
.resource-card:hover .resource-title {
    color: #f15a29;
}
.resource-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.resource-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-color: #f5f5f5;
    overflow: hidden;
}
.resource-thumbnail::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
.resource-thumbnail::after {
	content: '';
	width: 32px;
	height: 32px;
	background: url('/images/LinkIcon.svg') no-repeat center/contain;
	position: absolute;
	top: 50%; 
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}
.resource-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
	object-position: top;
    border-bottom: 1px solid #d7dfe9;
	cursor: pointer !important;
}
.resource-content {
    padding: 6px 15px;
}
.resource-title {
    margin: 0 0 10px 0;
    font-size: 1.15em;
    color: #4e6a89;
    transition: color 0.2s;
}
.resource-description {
    font-size: .95em;
    color: #444;
    margin-bottom: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .resource-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 480px) {
    .resource-grid {
        grid-template-columns: 1fr;
    }
}



/* VIDEO LIBRARY GRID LAYOUT WITH TABS */

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin: 20px 0;
}
.video-card {
    border: 1px solid #d7dfe9;
    overflow: hidden;
    transition: border-color 0.2s, background-color 0.2s;
    background-color: #f2f7f9;
}
.video-card:hover {
    border-color: #84abc4;
    background-color: #fff;
}
.video-card:hover .video-title {
    color: #f15a29;
}
.video-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.video-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-color: #f5f5f5;
    overflow: hidden;
}
.video-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom: 1px solid #d7dfe9;
	cursor: pointer !important;
}
.video-content {
    padding: 6px 15px;
}
.video-title {
    margin: 0 0 10px 0;
    font-size: 1.15em;
    color: #4e6a89;
    transition: color 0.2s;
}
.video-description {
    font-size: .95em;
    color: #444;
    margin-bottom: 10px;
}

/* Play button overlay */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.play-button:before {
    content: '';
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid white;
    margin-left: 5px; /* Center the triangle */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}
@media (max-width: 480px) {
    .video-grid {
        grid-template-columns: 1fr;
    }
}

/* Tab styles */
/* Base video tabs container */
#videotabs {
  margin: 20px 0 0 0;
}

/* Reset the ul styling */
#videotabs ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  border-bottom: 1px solid #7193b5;
  position: relative;
}

/* Tab items */
#videotabs ul li {
  margin: 0;
  padding: 0;
  text-align: center;
  border: 1px solid #7193b5;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  position: relative;
  bottom: -1px; /* Overlap the ul bottom border */
}

/* Tab links */
#videotabs ul li a,
#videotabs ul li a:link {
  display: block;
  margin: 0;
  padding: 4px 12px;
  background-color: #b3c4d7;
  color: #000;
  font-size: 0.95em;
  line-height: 1.3;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  min-width: 80px;
  border-radius: 3px 3px 0 0;
  border-bottom: none;
}

/* Hover states */
#videotabs ul li a:hover,
#videotabs ul li:hover {
  background-color: #eaf1f5;
  color: #f15a29;
  cursor: pointer;
}

/* Active tab */
#videotabs ul li a.active {
  color: #000;
  background-color: #fff;
  border-bottom: 1px solid #fff;
}
#videotabs ul li a.active:hover {
  cursor: default;
  color: #000;
}

/* Content boxes */
.videoboxes {
  margin: 0 0 32px 0;
  border: 1px solid #5b86ab;
  border-top: none;
  padding: 16px;
  font-size: 0.95em;
  line-height: 1.5;
}
#videobox2, #videobox3, #videobox4, #videobox5, #videobox6, #videobox7, #videobox8 {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #videotabs ul {
    gap: 2px;
  }
  #videotabs ul li a,
  #videotabs ul li a:link {
    padding: 4px 8px;
    font-size: 0.85em;
    min-width: 70px;
  }
}
@media (max-width: 480px) {
  /* Three-column layout for tabs on small screens */
  #videotabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: none;
    padding: 0 1px; /* Small padding to help with alignment */
  }
  #videotabs ul li:first-child { /* First tab takes full width */
    width: 100%;
    margin-bottom: 4px;
  }
  #videotabs ul li:not(:first-child) { /* Other tabs arranged in 3 columns */
    flex: 1 1 30%;
    margin-bottom: 4px;
    min-width: 0; /* Allow shrinking below content size */
  }
  #videotabs ul li:nth-child(3n+2) { /* Adjust every 3rd item to ensure proper row alignment */
    margin-left: 0;
  }
  #videotabs ul li {
    border: 1px solid #7193b5;
    border-radius: 4px;
  }
  #videotabs ul li a,
  #videotabs ul li a:link {
    padding: 6px 2px;
    border-radius: 3px;
    min-width: unset;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.8em;
  }
  #videotabs ul li a.active {
    border-bottom: none;
  }
  .videoboxes {
    border-top: 1px solid #5b86ab;
    margin-top: 8px;
  }
}




/* FOOTER */
footer {
	clear: both;
	font-size: .8em;
	padding: 10px 2%;
	margin: 20px 0 0 0;
	text-align: left;
	background-color: #fff;
	text-decoration: none;
	color: #555;
}



/* EXTRAS */
.clear { clear: both; }
.hidden { display: none; }
.largeCheckbox { color: #666; text-align: center; font-size: 3em; line-height: 1; }
.mediumCheckbox { color: #666; font-size: 2em; line-height: 1; }
.small-text { font-size: .9em; }
.smaller-text { font-size: .8em; }
.smallest-text { font-size: .7em; }
.large-text { font-size: 1.15em; }
.larger-text { font-size: 1.3em; }
.largest-text { font-size: 1.6em; }
.center-text { text-align: center; }
.grey-text { color: #666; }
.boldBrown {
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: 1.1em;
	color: #a04a23;
	margin: 0;
	padding: 12px 0 2px 0;
}
.block_color_text { /* BOXED TEXT WITH COLOR BACKGROUND */
	margin: 0 0 6px 0;
	border: solid 1px #b3c4d7;
	padding: 6px 16px;
	background-color: #fafcfe;
}



/* RESPONSIVE LAYOUT */

/* Mobile-first: Default styles apply up to 720px */
main {
  padding: 0 10px;
  position: relative;
  overflow: hidden;
}
.left-sidebar-toggle {
  position: absolute;
  z-index: 1000;
  top: 0px;
  left: 0px;
  width: 48px;
  height: 48px;
  background-image: url('/images/SideNavSlide.png');
  background-size: contain;
  background-repeat: no-repeat;
}
.left-sidebar-toggle-link:hover .left-sidebar-toggle {
  background-image: url('/images/SideNavSlide_over.png');
}
.layout-sidebar-first { /* Sidebar is absolute and hidden by default */
  position: absolute;
  width: 260px;
  height: 100%;
  background-color: #fff;
  border: none;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1001;
  overflow-y: auto;
  padding: 0;
  box-sizing: border-box;
}

.layout-sidebar-first.sidebar-visible {
  transform: translateX(0); /* Slide in */
  transition: transform 0.3s ease;
  width: 100%;
  left: 0px;
}
.layout-content { /* Content takes full width in block/grid layout */
  width: 100%;
  min-width: 0;
}
.layout-sidebar-second {
  width: 100%;
  position: static;
}



/* Desktop layout: use CSS Grid (>= 960px) */
@media (min-width: 960px) {
 /* Default 3-column layout (Applies to Home page) */
 main {
    display: grid;
    grid-template-columns: 260px 48fr 29fr;
    column-gap: 20px;
    row-gap: 0;
    grid-template-areas: "sidebar-first content sidebar-second";
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  /* Inner Pages: Override to 2-column layout with stacked right side */
  body:not(.path-frontpage) main {
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "sidebar-first sidebar-second" /* Sidebar-second (search) top right */
        "sidebar-first content";      /* Content bottom right */
    padding: 0;
    row-gap: 0;
  }

  /* Left Sidebar (Common for Desktop) */
  .layout-sidebar-first {
    grid-area: sidebar-first;
    position: static;
    transform: none;
    height: auto;
    z-index: auto;
    background-color: transparent;
    overflow-y: visible;
    border: none;
    padding: 0;
  }
  /* Ensure sidebar spans rows in inner page layout */
  body:not(.path-frontpage) .layout-sidebar-first {
     grid-row: 1 / span 2;
     align-self: start;
  }

  /* Center Content (Common for Desktop) */
  .layout-content {
    grid-area: content;
  }

  /* Right Sidebar (Welcome) - Only styled for Home page */
  /* Applies only when main has 3 columns */
  .layout-sidebar-second {
    grid-area: sidebar-second;
    padding: 0 16px;
    border-left: 1px solid #b3c4d7;
    border-bottom: 1px solid #b3c4d7;
    overflow-x: hidden;
    align-self: start !important; /* force it to only be as tall as its content */
    display: block;
  }
  /* Place in grid and ensure visibility for inner pages */
  body:not(.path-frontpage) .layout-sidebar-second {
      grid-area: sidebar-second;
      display: block;
      align-self: start;
  }
}


/* Inner Pages Layout (Tablet: 721px - 959px) */
@media (min-width: 721px) and (max-width: 959px) {
 body:not(.path-frontpage) main {
    display: grid !important;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 40px auto;
    grid-template-areas:
      "sidebar-first search"
      "sidebar-first content";
    column-gap: 20px;
    row-gap: 0;
    margin: 0;
	padding: 0;
    align-items: start;
    overflow: visible;
  }
  body:not(.path-frontpage) .layout-sidebar-first {
    grid-area: sidebar-first;
    grid-row: 1 / span 2;
    align-self: start;
    position: static;
    transform: none;
    height: auto;
    z-index: auto;
    background-color: transparent;
    overflow-y: visible;
    border: none;
    padding: 0;
  }
  body:not(.path-frontpage) .layout-sidebar-second {
    grid-area: search;
	position: static;
  }
  body:not(.path-frontpage) .layout-content {
    grid-area: content;
  }

/* Home Page Layout (Tablet: 721px - 959px) */
  body.path-frontpage main {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto auto;
    grid-auto-rows: auto;
    column-gap: 20px;
    row-gap: 0;
    margin: 0;
	padding: 0 16px 0 0;
    align-items: start;
    position: relative;
    overflow: visible;
  }
  body.path-frontpage .layout-sidebar-first {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    position: static;
    transform: none;
    height: auto;
    z-index: auto;
    background-color: transparent;
    overflow-y: visible;
    border: none;
    padding: 0;
  }
  body.path-frontpage .layout-sidebar-second {
    grid-column: 2;
    grid-row: 1;
    background-color: #fff;
    padding: 0;
    border: none;
    box-sizing: border-box;
    position: static;
  }
  body.path-frontpage .layout-content {
    grid-column: 2;
    grid-row: 2;
  }
}


/* Tablet & Desktop Common Styles */
@media (min-width: 721px) {
   /* Logo Padding */
   .site-logo img {
        padding: 0 16px;
   }
   /* Top Menu Styling */
   #block-draccess-main-menu {
    flex: 1;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   }
   #block-draccess-webpropertiesicons {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   }
   #webProperties {
    margin: 0;
    padding: 0;
    line-height: 0;
   }
   #webProperties a img {
    margin: 0;
   }


  .left-sidebar-toggle {
    display: none;
  }

  /* Inner Page Content Padding */
  body:not(.path-frontpage) .layout-content {
     padding-right: 16px;
  }

  /* Inner Page Sidebar Second Padding & Styling */
  body:not(.path-frontpage) .layout-sidebar-second {
      padding-right: 16px; /* <<< ADDED right padding */
      border: none;
      background: none;
  }

  /* Welcome column collapse specific to tablet range */
  @media (max-width: 959px) {
      #block-draccess-welcomecolumn {
        background-color: #eaf1f5;
        margin: 16px 0 0 0;
        border: 1px solid #b3c4d7;
        padding: 0 10px 10px 10px;
        box-sizing: border-box;
        max-height: 46px;  /* Collapsed height – adjust as needed */
        overflow: hidden;
        transition: max-height 0.3s ease;
      }
      #block-draccess-welcomecolumn:hover {
        border: 1px solid #84abc4;
      }
      #block-draccess-welcomecolumn h2 {
        color: #365980;
        font-size: 1.4em;
        background: url(/images/DropDown.png) right top 12px no-repeat;
        padding: 10px 0 4px 0;
        cursor: pointer;
      }
      #block-draccess-welcomecolumn h2:hover {
        color: #f15a29;
        background: url(/images/DropDown_over.png) right top 12px no-repeat;
      }
      #block-draccess-welcomecolumn.open {
        background-color: #fff;
        max-height: none; /* Allow full height when open */
      }
      #block-draccess-welcomecolumn.open h2 {
        color: #365980;
        font-size: 1.6em;
        background: url(/images/RollUp.png) right top 12px no-repeat;
      }
      #block-draccess-welcomecolumn.open h2:hover {
        color: #f15a29;
        background: url(/images/RollUp_over.png) right top 12px no-repeat;
      }
  }
}


/* HEADER BACKGROUND IMAGES - Change on different site sections */
@media (min-width: 820px) {
	.region-header {
		background: url(/images/headerpics/headerpic_home.png) right bottom no-repeat;
    }
	body.path-frontpage .region-header {
		background: url(/images/headerpics/headerpic_home.png) right bottom no-repeat;
	}
	body.path-about .region-header {
		background: url(/images/headerpics/headerpic_about.png) right bottom no-repeat;
	}
	body[class^="path-about"] .region-header {
		background: url(/images/headerpics/headerpic_about.png) right bottom no-repeat;
	}
	body.path-faq .region-header {
		background: url(/images/headerpics/headerpic_faq.png) right bottom no-repeat;
	}
	body.path-subscribe .region-header {
		background: url(/images/headerpics/headerpic_subscribe.png) right bottom no-repeat;
	}
	body.path-contact .region-header {
		background: url(/images/headerpics/headerpic_contact.png) right bottom no-repeat;
	}
	body.path-links .region-header {
		background: url(/images/headerpics/headerpic_links.png) right bottom no-repeat;
	}
	body.path-parent-timeline .region-header {
		background: url(/images/headerpics/headerpic_timeline.png) right bottom no-repeat;
	}
	body.path-parent-drdp2015-ps .region-header {
		background: url(/images/headerpics/headerpic_drdp2015-ps.png) right bottom no-repeat;
	}
	body.path-parent-drdp2015-it .region-header {
		background: url(/images/headerpics/headerpic_drdp2015-it.png) right bottom no-repeat;
	}
	body.path-parent-assessors .region-header {
		background: url(/images/headerpics/headerpic_assessors.png) right bottom no-repeat;
	}
	body.path-parent-learn .region-header {
		background: url(/images/headerpics/headerpic_learn.png) right bottom no-repeat;
	}
	body[class^="path-recordedwebinars"] .region-header {
		background: url(/images/headerpics/headerpic_learn.png) right bottom no-repeat;
	}
	body[class^="path-tutorials"] .region-header {
		background: url(/images/headerpics/headerpic_learn.png) right bottom no-repeat;
	}
	body.path-parent-families .region-header {
		background: url(/images/headerpics/headerpic_families.png) right bottom no-repeat;
	}
	body.path-parent-videolibrary .region-header {
		background: url(/images/headerpics/headerpic_videolibrary.png) right bottom no-repeat;
	}
	body[class^="path-videolibrary"] .region-header {
		background: url(/images/headerpics/headerpic_videolibrary.png) right bottom no-repeat;
	}
	body.path-parent-professionaldevelopment .region-header {
		background: url(/images/headerpics/headerpic_professionaldevelopment.png) right bottom no-repeat;
	}
	body.path-parent-policy .region-header {
		background: url(/images/headerpics/headerpic_policy.png) right bottom no-repeat;
	}
}


/* === Mobile Layout (Max Width: 720px) === */
@media (max-width: 720px) {
	.region-header {
        text-align: center;
    }
    .site-logo img {
        margin: 0 auto;
        padding: 0 3px;
    }
	.region-primary-menu {
	  padding: 3px 10px;
	}
  /* Reflow main into a grid layout to control order */
  /* Use body main to increase specificity over homepage tablet grid */
  body main {
    display: grid; /* <<< Use grid */
    grid-template-columns: 1fr; /* Single column */
    grid-template-rows: min-content auto; /* Row 1 shrinks, Row 2 takes rest */
    grid-template-areas:
      "sidebar-second" /* Area for search/welcome */
      "content"; /* Area for main content */
    column-gap: 0;
    row-gap: 0;
	margin: 0 10px; /* Use original mobile padding */
    padding: 0; /* Remove padding from main container */
    overflow: hidden; /* Re-apply overflow hidden for mobile */
    position: relative; /* Keep relative for absolute sidebar */
  }

  /* Left Sidebar (Navigation) – absolutely positioned and hidden by default */
  /* These rules apply to BOTH home and inner pages below 720px */
  .layout-sidebar-first {
    /* Inherits absolute positioning, transform, padding, background, border from default */
    /* No overrides needed here specifically for max-width 720px */
  }
  /* When toggled (via JS), add the class "sidebar-visible" to slide it in */
  .layout-sidebar-first.sidebar-visible {
    transform: translateX(0);
	width: 100%;
	left: 0px;
  }

  /* Main Content */
  .layout-content {
    grid-area: content; /* <<< Assign to grid area */
    padding: 0;
  }

  /* Right Sidebar (search/welcome) */
  .layout-sidebar-second {
    grid-area: sidebar-second; /* <<< Assign to grid area */
    padding: 0;
  }

  /* Style the welcome text container (if present) */
  #block-draccess-welcomecolumn {
	background-color: #eaf1f5;
    margin: 16px 0 0 0;
    border: 1px solid #b3c4d7;
    padding: 0 10px 10px 10px;
    box-sizing: border-box;
    max-height: 46px;  /* Collapsed height */
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  #block-draccess-welcomecolumn:hover {
    border: 1px solid #84abc4;
  }
  #block-draccess-welcomecolumn h2 {
	color: #365980;
	font-size: 1.4em;
	background: url(/images/DropDown.png) right top 12px no-repeat;
	padding: 10px 0 4px 0;
	cursor: pointer;
  }
  #block-draccess-welcomecolumn h2:hover {
	color: #f15a29;
	background: url(/images/DropDown_over.png) right top 12px no-repeat;
  }
  #block-draccess-welcomecolumn.open {
	background-color: #fff;
    max-height: none; /* Allow full height when open */
  }
  #block-draccess-welcomecolumn.open h2 {
	color: #365980;
	font-size: 1.6em;
	background: url(/images/RollUp.png) right top 12px no-repeat;
  }
  #block-draccess-welcomecolumn.open h2:hover {
	color: #f15a29;
	background: url(/images/RollUp_over.png) right top 12px no-repeat;
  }
  .videoboxes {
    border: none;
  }
}

@media (max-width: 480px) {
	.equal_boxes,
	.unequal_boxes {
		flex-direction: column;
	}
	.equal_box_item,
	.unequal_box_item--big,
	.unequal_box_item--small {
		flex: 1 1 100%;
	}
	.pix_lrg {
		float: none;
		width: 98%;
		max-width: 98%;
		min-width: none;
		margin: 12px 0 22px 0;
	}
   /* Top Menu Styling */
	#block-draccess-main-menu ul.menu li.menu-item {
		margin: 6px 0;
		padding: 0 6px 0 0;
	}
	#block-draccess-main-menu ul li.menu-item a, #main-menu ul li a:link, ul.button-links li a {
		padding: 3px 9px;
		font-size: 1.1em;
	}
	#block-draccess-main-menu {
		flex: 3;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	#block-draccess-webpropertiesicons {
		flex: none;
		width: 36px;
		margin: 0 0 0 20px;
		padding: 0;
		box-sizing: border-box;
	}
	#webProperties {
		margin: 0;
	}
	#webProperties a img {
		display: block;
		margin: 2px 0;
	}
}