/*
Theme Name: DS12 2026
Author: Oliver M
*/





/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}



/*Fonts*/


@font-face {
font-family: 'Graphik Web';
src: url('https://uosdesign.org/wp-content/themes/DS11-2025THEME/fonts/Graphik-Regular-Web.woff2') format('woff2'),
url('https://uosdesign.org/wp-content/themes/DS11-2025THEME/fonts/Graphik-Regular-Web.woff') format('woff');
font-weight: 400;
font-style: normal;
font-stretch: normal;
}

@font-face {
font-family: 'Graphik Black';
src: url('https://uosdesign.org/wp-content/themes/DS11-2025THEME/fonts/Graphik-Black.woff2') format('woff2'),
url('https://uosdesign.org/wp-content/themes/DS11-2025THEME/fonts/Graphik-Black.woff') format('woff');
font-style: normal;
font-stretch: normal;
}

@font-face {
font-family: 'Graphik Semibold';
src: url('https://uosdesign.org/wp-content/themes/DS12-2026THEME/fonts/Graphik-Semibold-Trial.woff2') format('woff2');
font-style: normal;
font-stretch: normal;
}



/* Global sizing selector */
html{font-size:100%}



/* Body */
body {
	background:transparent;
	color:#222;
	font-family: 'Graphik Web', Arial, sans-serif;
	line-height:1.5;
	font-feature-settings: "liga", "kern";}




/* Main Structure */


#header{
	height: 100px;
	padding-top: 20px;
	padding-bottom: 4px;
	border:0px solid magenta
}

#wholepage{
	padding:0px;
	clear:both;
}

#container{
    width: 90%;
    max-width: 62.5rem;
    margin-inline: auto;
    margin:0 auto;
    padding:0px;
    xxwidth:65.625rem;/* was 1050px */
	xxmax-width:90%;
}

#content {
	padding-top:0px;
	clear:both;
}



/* Typography */

p, h3,  li, #threecol{ 
    font-size: clamp(1rem, 1.7vw, 1.3rem); 
    max-width:500px
}

#single-post h3 { 
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    margin:1.2rem 0px;
}


#single-page-content h3{
margin-bottom:35px
}

h2 {
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    margin: 1.9rem 0px 0.4rem 0px;
    font-weight: 600;
}

p{
    margin:1.2rem 0px;
}

#single-page-content p strong {
  font-family: 'graphik semibold';
}



#catdes, #top-text p {
    font-size: clamp(1.4rem, 3.4vw, 2.2rem);
    max-width: 1024px; 
    line-height:1.25; 
    margin-top:0px;
    margin-bottom: 2%; 
}

#thumbcaption, #category-badge {
    font-size: clamp(1rem, 1.9vw, 1.4rem)
}

#single-post-title{
    width:max-content;
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    padding: 0px 5px;
}


#threecol{
    columns:3;
    max-width:100%;
}



#top-text h2 {
    line-height: 32px;
	margin-bottom:9px
}

#top-text h3 {
    line-height: 30px;
}

#top-text h4 {
    line-height: 26px;
}

#top-text em {
    display: inline;
    line-height: 32px;
    width: max-content;
    float: none;
	margin: 0px;
    padding: 0.2% 1.3%;
    xxpadding: 2px 8px 4px 8px;
    xxpadding(old): 2px 5px 2px 5px;
}

#top-text strong{
    margin-left:Xpx; margin-right:Xpx

}

#about-page-headline{
    font-family: 'Graphik Black', Arial, sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    max-width: 1024px;
    font-weight: normal;
    line-height: 1.25;
    margin-top: 4%;
    margin-bottom: 3%;
    padding: 0% 0% 0% 0%;
    xborder-top: 4px solid #000;
    xborder-bottom: 4px solid #000;
}


#xxcategory-badge {
	left: 25px;
	color: #222;
	background: white;
	padding: 5px;
	position: absolute;
	top: 23%;
}



#categorytextblock{
	min-height:39px;
	margin-bottom:39px; /* To maintain bottom margin when no top-text */
}


#post-6581 #category-badge, #post-6434 #category-badge, #post-7895 #category-badge
 {
    display: none!important;  /* Remove Climate Change + Process category badges */
}

#frontpageposts #category-badge
	 {
    display: none!important;  /* Remove front page posts category badges */
}

/* Badges, Captions, Tags */

#thumbcaption {
		left: 5%;
		background:#fcd100;
		color: #222;
		padding: 0.5% 2%;
		position: absolute;
		top: 7%;
		width: max-content;
		font-family: 'Graphik Web', Arial, sans-serif;
		font-weight: 400;

}

#category-badge {
		left: 5%;
		color: #222;
		background: white;
		padding: 0.5% 2%;
		position: absolute;
		top: 20.5%;
		width: max-content;
		font-family: 'Graphik Web', Arial, sans-serif;
}



		

/* Links*/

a{font-family:"Graphik web", Arial, sans-serif;color:#222;text-decoration:none}




/* PASSWORD PROTECT LOG 2026 */
.ppwp-sitewide-protection {
	background: url("images/DS12-logo-v001-500px.jpg");
}



/* MAIN COLOURS 2026 */
#cattitle, #title, .title-Frontpage, #thumbcaption, #single-post-title, .html5-title, #navbar li a:hover, .menu.main ul li a:hover, #top-text em {
	background:#5873B8!important;
    color:#fff!important;
	} 

.html5-description h3, .html5-description h4
{color:#5873B8;!important;font-weight: 800!important;font-weight:bold!important}




/* RESPONSIVE VIDEO FOR OEMBEDS 2026 */
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    margin-top: clamp(10px, 2vw, 17px);/* to space out below single post title */
    margin-bottom: clamp(10px, 2vw, 20px);/* to space out below single post  video*/

}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Youtube Video Styling*/
.ytp-impression-link-text, .ytp-impression-link-logo,.watch-on-youtube-button-wrapper {
  display:none!important;
}

/* Login logo page styling*/
.login form {
  margin-top: 20px;
  margin-left: 0;
  padding: 26px 24px 34px;
  font-weight: 400;
  overflow: hidden;
  background: #fff;
  border: 1px solid #c3c4c7;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}




/* Video Lightbox */

.html5lightbox-web {
    overflow-y: scroll; /* Add the ability to scroll */
}
	/* Hide scrollbar for Chrome, Safari and Opera */
	.html5lightbox-web::-webkit-scrollbar {
		display: none;
	}

	/* Hide scrollbar for IE, Edge and Firefox */
	.html5lightbox-web{
	  -ms-overflow-style: none;  /* IE and Edge */
	  scrollbar-width: none;  /* Firefox */
	}

.html5-elem-box{
	    overflow-y: scroll; /* Add the ability to scroll */
}
	/* Hide scrollbar for Chrome, Safari and Opera */
	.html5-elem-box::-webkit-scrollbar {
		display: none;
	}

	/* Hide scrollbar for IE, Edge and Firefox */
	.html5-elem-box{
	  -ms-overflow-style: none;  /* IE and Edge */
	  scrollbar-width: none;  /* Firefox */
	}
	

.html5lightbox-web 
  ~ html {
  overflow:hidden; /* stop background page scrolling when lightbox pops up */
  }

html{
    overflow-y: scroll;/* Add the ability to scroll */
}
	/* Hide scrollbar for Chrome, Safari and Opera */
	html::-webkit-scrollbar {
		display: none;
	}

	/* Hide scrollbar for IE, Edge and Firefox */
	html{
	  -ms-overflow-style: none;  /* IE and Edge */
	  scrollbar-width: none;  /* Firefox */
	}


/* Lightboxed video vertical position */

#html5-lightbox-box{
	display: block;
	position: relative;
	margin: 80px auto 0px!important;
	width: 1000px;
	height: auto;
}

/* Slideshow watermark */

#html5-watermark{display:none!important}

#html5-close-fullscreen .mh-icon-close {
    font-size: 44px;
    padding: 10px;
    color: #eee;
    background-color: rgba(0, 0, 0, 0);
opacity: 1;}

#html5-close {cursor: pointer; position: absolute; top: -50px!important; right: 0px; margin: 0px 0px 0px 0px !important; padding: 0px; background: transparent none repeat scroll 0% 0%; border: medium none;}



/* Slideshow title + description */


#html5-lightbox-overlay {opacity:0.9!important} /* override default 0.8 */


.html5-title,
.html5-description,
.html5-description p,
.html5-description h3, 
.html5-description h4{
		display:xxxnone;
		font-size:18px;
		line-height:1.25
  }

.html5-title{
	font-family: 'Graphik Web', Arial, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	margin:30px 0px 0px 0px;
	background:xx#ffe132;
	padding:4px 7px;
	width:max-content;
	color: #222;
	clear:both;
	}
	
.html5-description {
	font-family: 'Graphik Web', Arial, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	opacity: 0.8;
	float:left!important;
	width:430px;
	border:0px solid red;
	overflow:x;
	}
	
.html5-description h3, .html5-description h4{
	font-family:"Graphik semibold", Arial, sans-serif;;
	clear:both;
	margin:0px 0px 0px 0px;
	float: left;
		}
	
.html5-description p{
	color:white;
	opacity: 1;
	padding:0px 0px 20px 6px;
	height:90px;
	overflow:visible;
    margin: 12px 0px;
	}
	
.html5-description ul{
	clear:both;
	color:white;
	opacity: 1.0;
	margin:0px 0px 10px 0px
	}
	
.html5-description li{
	font-size:inherit
	}

.html5-description h3, .html5-description h4, .html5-description ul{
	position: relative; /* credits position hack */
	left: 610px;
	top: -120px;
	}



/* Navigation */

.custom-menu-class{
	padding-top: 32px;
	padding-left: 8px;}

#navbar  {
    height: 90px; /* menu height  */
    margin: 0 0 10px; /* spacing */
    
}
#navbar  ul    {
    margin: 0; padding: 0; /* belts and braces as well as the CSS reset! */
}

#navbar li    {
    display: block;
    float: left;
    line-height: 30px; /* should be the same as #main-nav height */
    height: 30px; /* should be the same as #main-nav height */
    margin: 0; padding: 0; /* only needed if I don't use the CSS reset */
    position: relative; /* Needed to position sub menus */
}
#navbar li a  {
    display: block;
	font-size:clamp(1rem, 1.7vw, 1.3rem); /* was 20px!important; */
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
	 margin: 0px;
    text-decoration:none;
	margin-left:10px; /* !!match this value with #navbar  ul ul li sub menus below!! */
    border: 0px solid red;
   font-family: "Graphik web", Arial, sans-serif;
  font-weight: 600;
}

#navbar li a:hover  {
    /*background:#f7bbc3 !important*/
}

#navbar  .current-menu-item a, #main-nav .current_page_item a, #main-nav a:hover {
    color: #222;
}

#navbar ul ul { /* targets all sub menus */
    display:none ; /* hide all sub menus from view */
    position: absolute;
    top: 30px; /* should be same height as the top level menu -- height + padding + borders */
}
#navbar ul ul li { /* targets all submenu items */
    float: none; /* overwriting the float up above */
    width: max-content; /* set width for sub menus. Needs to match the value set below */
    background:white;
	margin-left: 10px;/* !!match this value with #navbar li a above!! */}

#navbar ul ul li:hover a{ /* targets all submenu items */
    float: none; /* overwriting the float up above */
    width: max-content; 
    /*  background:#f7bbc3;*/
	color:black;
	margin-left:0px;}
	

#navbar  ul ul li a { /* target all sub menu item links */
	padding: 0px 10px;
	margin: 0px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);}


#navbar ul li:hover > ul {
    display: block; /* show sub menus when hovering over parent */
	background:none}




/* Logos */


.DS-logo-container{
    background-image: url("images/DS12-logo-v001-500px.jpg");
    background-repeat: no-repeat;
    background-position: center;
    width: 90px;
    height: 90px;
    background-color:none;
    background-size: cover;
	float:none;
	}
	
.soton-logo-container {
    border: 0px solid red;
    height: 100%;
    width: 180px;
    float: right;
    position:relative;
    }

img.soton-logo{
    max-width: 142px;
    float: left;
    border: 0px;
    background: none;
	z-index: 8000;
    mix-blend-mode: multiply;
    position: absolute;
    right:0px;
    top: 50%;
    transform: translateY(-50%);
}

/* DS7 logo/Navigation offset */

.DS-logo-container, #navbar{
	position: relative;
	float:left;
	left:-45px;
	border: 0px solid green;
	z-index: 999;
	}



/* Picture Grid */

.picture-grid {
    display: grid;
	grid-template-columns: repeat( auto-fill, minmax(360px, 1fr) );
    justify-items: center;
    grid-gap: 40px;
    grid-row-gap: 40px;	
	clear:both;
	margin-top:0px;
}

.grid-box img {
    max-width: 100%;
	height: auto !important;
}


/* Footer */

#footer {
    border-top: 1px solid #ccc;
    /*margin: 0px 20px;*/
    clear: both;
    color: #696969;
    font-size: 12px !important;
    font-weight: normal !important;
    padding-top: 13px;
    margin-top: 40px;
    height:80px;
}

.social {
    float: right;
    position: relative;
    top: 0px;
}


.social img {
    width: 35px;
    height: auto;
    margin: 2px 0 0 8px;
    opacity: 0.7;
}





/*DESIGN SHOW METADATA*/

#credits-container{
	margin-top:0px
}

#credits-left-block{
	width:430px;
	float:left;
	margin-right:140px;
	padding-top:18px;
}

#credits-right-block{
	width:310px;float:left;
}

.post-meta,
.post-meta-key,
.winner, 
.metaitem,
.metaheader,
.metasubheading,
.description{
	font-family: 'Graphik Web', Arial, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	font-size:18px;
	line-height:1.3;
	opacity:0.8
	
}

.post-meta {color: #fff;}
.post-meta-key {color: #fff;}
.post-meta li {color: #fff;}
.winner{color: #fff;}
.metaitem{color: #fff;}
.metaheader{color: #fcd100;padding-top:18px}
.metasubheading {color: #fff;}



	



/*Images*/

img{max-width:100%; height:auto}

img.attachment-thumbnail {border:none!important}
.gallery-item{text-align:left!important;}

.wp-block-image figcaption {
    margin-top: .5em;
    margin-bottom: 1em;
    color: #555d66;
    text-align: left!important;
	font-size: 13px;}


#static {
  position:relative;  /*change this to relative to put active gifs back in*/
  background: white; 
    overflow:hidden;
    aspect-ratio: 5 / 2.83;
}

#activegif {display:none}  /*remove this to put active gifs back in*/

#static, #activegif {
border:0px solid #F0F0F0;
}




/*fotorama increase saturation hack
.fotorama img{
filter:saturate(1.3)
}*/



/*2023 amendment to stop gif on mouseover - delete this comment to recover
#static:hover {
opacity:0;
}
*/

/*2023 amendment to darken on mouseover and zoom in- delete this comment to recover*/
/*#static:hover {
    -webkit-filter: brightness(70%);
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    transition: all 0.7s ease;
}*/

#static img {
  width: 100%;
  height: 100%;
       object-fit: cover;
  transition: all 1.2s ease-in-out;
  
}

#static:hover img {
  transform: scale(1.3,1.3)
}   
/* end 2023 amendment*/

#static:hover 
  ~ #category-badge  {
  display: xnone; /* Hide on mouseover */
}

#static:hover 
 ~ #thumbcaption  {
  display: xnone; /* Hide on mouseover */
}

/* Hide animated gif on lightbox - doesn't work!
.html5-title ~ .active{
  display: none!important; 
	}*/

#active{}

/* To keep static thumbnails only the same size as the gifs */
#thumbnailpost{max-width:730px;}









/* Simple Lightbox */

#slb_viewer_wrap .slb_theme_slb_black .slb_container {
    background-color: transparent;
    display: block;
}
	
#slb_viewer_wrap .slb_theme_slb_default .slb_container {
    box-shadow: none;
    border-radius: 5px;	
}













/* MEDIA QUERIES BELOW THIS LINE */
/* ============================= */
/* Standard code example:  @media only screen and (min-width:0px) and (max-width: 600px)*/





	
/* Mobile Menu ================================================*/
	
.mobmenu-content li > .sub-menu li {
    padding-left: inherit!important; /* removes indents on subheading*/
}

.show-nav-left .mobmenu-overlay, .show-nav-right .mobmenu-overlay {
    width: 100%;
    height: 100%;
    z-index: 99999;
    left: 0;
    top: 0;
    opacity:0!important; /* removes black overlay on background*/
    position: fixed;
	cursor: pointer;
}


.show-nav-left .mob-menu-header-holder, .show-nav-right .mob-menu-header-holder, .mob-menu-header-holder, .mobmenu-panel, .mobmenu-overlay, .show-nav-left .mobmenu-push-wrap, .show-nav-right .mobmenu-push-wrap, .show-nav-left .mob-menu-header-holder, .show-nav-left .mobmenu-left-alignment, .show-nav-right .mobmenu-right-alignment, .show-nav-left .mobmenu-overlay, .show-nav-right .mobmenu-overlay {
    -webkit-transition: -webkit-transform .2s!important;
    -moz-transition: -moz-transform .2s!important;
    -ms-transition: -ms-transform .2s!important;
    -o-transition: -o-transform .2s!important;
    transition: transform .2s!important; /* sets transition speed*/
}	
	
.show-panel .mob-cancel-button {
    display: none!important;
}

.mobmenu-content li{
	width:max-content!important
	}

.mob-expand-submenu i { /* siza + position of dropdown arrow*/
    font-size: 15px!important;
	margin-left: 12px;!important
}

	
	
/* Slideshow title + description============================================= */
@media only screen and (max-width: 960px){	
	
	.html5-title,
	.html5-description,
	.html5-description p,
	.html5-description h3, 
	.html5-description h4{
			font-size:16px;
			line-height:1.25
	  }

	.html5-title{
		font-family: 'Graphik Web', Arial, sans-serif;
		font-weight: 400;
		font-style: normal;
		font-stretch: normal;
		margin:27px 0px 0px 0px;
		background:#ffe132;
		padding:3px 6px;
		width:max-content;
		color: #222;
		clear:both;
		}
		
	.html5-description {
		font-family: 'Graphik Web', Arial, sans-serif!important;
		font-weight: 400;
		font-style: normal;
		font-stretch: normal;
		opacity: 1;
		float:left!important;
		max-width:100%; /* allows responsive width */
		border:0px solid red;
		overflow:x;
		}
		
	.html5-description h3, .html5-description h4{
		font-family: 'Graphik semibold', Arial, sans-serif;
		font-weight: 400;
		font-style: normal;
		font-stretch: normal;
		clear:both;
		margin:0px 0px 0px 6px;
		position: static; /* allows wrap */

	
		}
		
	.html5-description p{
		color:white;
		opacity: 1;
		padding:10px 0px 10px 6px;
		float:left!important;
		width:100%; /* allows responsive width */
		height:auto;
		overflow:visible;
        margin: 5px 0px 15px 0px;
		}
		
	.html5-description ul{
		clear:both;
		color:white;
		opacity: 1.0;
		position: static; /* allows wrap */
	 	margin:0px 0px 10px 6px
		}

	#html5-lightbox-overlay {opacity:1!important} /* hack to obscure gif playing in background */
	
}


@media only screen and (max-width: 1050px){

#wpadminbar{display:none}

#wholepage {
    max-width:100%;
    padding: 0px 0px;
    clear: both;
}

#content{
    margin-top:120px;
    max-width:100%}


#threecol{columns: 1;margin-bottom: 0px;}

	
#iframecontainer {
    margin: 20px 0px 0px 0px!important;
}
	
.picture-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(290px, 1fr) );
	justify-items: center;
	grid-gap: 30px;
	grid-row-gap: 30px;	
}

		
		
#header {
    height: 100px;
    padding-top: 0px;
    position: fixed;
    width: 90%;
    background: white;
    z-index: 9000;
    top: 0px;
    left: 0%;
    margin: 0px;
    padding: 0 5%;
    border:0px solid blue;
  }
	

.DS-logo-container, #navbar {
  position: relative;
  float: left;
  left: 0px;
  border: 0px solid green;
  z-index: 999;
}

 .DS-logo-container {
    background-image: url("images/DS12-logo-v001-500px.jpg");
    background-repeat: no-repeat;
    background-position: center;
    width: 70px;
    height: 70px;
    margin: 15px 0px;
    background-size: cover;

}

.soton-logo-container {
  width: 200px;}


img.soton-logo {
    width: 65%;
    float: right;
    border: 0px;
    background: none;
    position: absolute;
    left:0px;
    top: 50%;
    transform: translateY(-50%);
	}



}


/* MEDIA QUERIES for smallest screens (iPhone SE etc) */

/* Max-width below was 400px... */
@media only screen and (min-width:0px) and (max-width: 470px){


	
	.soton-logo-container {
    height: 100%;
    width: 170px;
    float: right;
    position: relative;
    padding-right: 0px;
	}
	
	img.soton-logo {
    width: 90px;
    float: right;
    border: 0px;
    background: none;
    position: absolute;
    left:0px;
    top: 50%;
    transform: translateY(-50%);
	}