Section 1. Innovation
Here is a little game for you. Have a go and enjoy!
Imagine!
In this activity, you are given a scenario and a question about it. Get creative about how you answer it!
forkText
Generate New Scenario
Have you enjoyed that? Feel free to keep playing. Share with us, what has been the most challenging about this game – Section 1.
Section 2. Challenge
Activity : DETECTIVE – get comfy and let’s start with a little observation exercise. Below you will see a reel of photographs taken on Lancaster University Campus. Flick through the photos and consider the following questions:
What is one thing you observe – don’t try to make sense of it, just observe and describe what you see.
Why might this be happening? – add your interpretation, empathise with these students you see and focus on possible challenges and frustrations of these students you see on the photos.
This inspires me to think about solutions that… – can you think of any products or services that the students would really appreciate on the Campus? Pop in your answer on Innovation board below – Section 2.
Well done Sherlock Holmes! Good effort observing, looking, and being attentive! Such an important skill for every good innovator.
Section 3. Prototype
Diversion
For this, you are given the what, who and why of a design concept, and three constraints to abide by.
Question
BUT…
don’t what
don’t who
don’t why
Generate New Concept
Have you enjoyed that? Feel free to keep playing. Share with us, what has been the most challenging about this game? Share on our innovation board Section 3!
.top-bar {
background-color: #666666!important;
}
.footer-widgets-wrapper {
background-color: #666666!important;
}
.site-footer {
background-color: #666666!important;
}
.site-info {
display: none!important;
}
.button {
border-color: #cccccc;
color: #666666!important;
}
.post a {
color: #339933!important;
font-weight: bold;
text-decoration: none;
transition: 0.3s;
}
.post a:hover {
color: #339933!important;
}
.footer-widgets-wrapper a {
color: #ffffff!important;
font-weight: bold;
text-decoration: none;
transition: 0.3s;
}
.footer-widgets-wrapper a:hover {
color: #ffffff!important;
text-decoration: underline;
}
.entry-header {
/*display: none!important;*/
color: #339933!important;
}
.entry-header h1 {
color: #339933!important;
}
.site-content {
margin-top: 30px!important;
}
.widget {
border-bottom: 0px solid #eee;
margin: 0 0 0!important;
padding-bottom: 0.7em!important;
}
.highlightbox {
border: 4px dotted #2592A5;
padding: 20px;
margin-bottom: 20px;
}
.highlightbox a {
color: #2592A5;
text-decoration: underline;
font-weight: bold;
}
.subhead {
font-size: 20px;
/*text-decoration: underline;*/
margin: 0;
color: #ABABAB;
}
.header {
font-size: 34px;
margin: 0;
line-height: 40px;
}
.headblock {
margin-top: 20px;
margin-bottom: 20px;
}
.title {
font-size: 26px;
text-decoration: underline;
margin-bottom: 20px;
color: #2592A5;
font-weight: bold;
}
.fullblock {
padding: 20px;
margin-bottom: 20px;
background-color: #CDE7EB;
}
.ref {
font-size: 18px;
/*text-decoration: underline;*/
margin: 0;
color: #ABABAB;
}
.imgBlock {
margin-bottom: 20px;
}
.lonelink {
margin: -30px 0 30px 0;
color: #2592A5;
text-decoration: underline;
font-weight: bold;
}
function generateFork() {
const fork = ["If university policies were decided by business students", "If university was free", "If the government implemented a 4-day work week", "If Brexit never happened", "If coffee didn’t exist", "If ducks were carnivorous", "If Costa disappeared"];
const question = ["would the world economy be improved?", "would you still want to attend Lancaster University?", "would clubs be more or less popular?", "would education be more accessible?", "how would this affect the economy?", "would we be wealthier?", "would climate change be reversed?"];
const randomFork = Math.floor(Math.random() * fork.length);
const randomquestion = Math.floor(Math.random() * question.length);
var combinedFork = (fork[randomFork] + " " + question[randomquestion]);
document.getElementById("forkText").innerHTML = combinedFork;
}
generateFork();
var btn = document.getElementById("Generate_new_fork");
btn.onclick = function() {
generateFork();
};
function generateQuestion() {
const what = ["a library", "a society", "an organisation", "a place on campus", "a shop", "a building",];
const who = ["students", "scientists", "academics", "parents", "ducks", "children"];
const why = [" to grow fruit", "to raise awareness of a social issue", "to have fun", "to compete with one another", "to cook vegetarian meals", "to eat for free"];
const dont_what = ["You don’t have funding", "You can use only items salvaged from campus bins", "You can’t use tools", "The entire University must agree to support it", "You have a month", "You have three days to complete it", "You cannot use the internet"];
const dont_who = ["The Foreign languages department can’t find out about it", "The engineering department can’t find out about it", "The accounting and finance department can’t find out about it", "The economics department can’t find out about it", "The sociology department must be involved", "The law department must be involved", "The Foreign languages department must be involved", "The engineering department must be involved", "The accounting and finance department must be involved", "The economics department must be involved", "The history department must be involved"];
const dont_why = ["It has to last for at least a decade ", "Make it durable for the long term", "Make it sharable", "Make it for inside use only", "Make it work in extreme circumstances"];
const rand_what = Math.floor(Math.random() * what.length);
const rand_who = Math.floor(Math.random() * who.length);
const rand_why = Math.floor(Math.random() * why.length);
const rand_dont_what = Math.floor(Math.random() * dont_what.length);
const rand_dont_who = Math.floor(Math.random() * dont_who.length);
const rand_dont_why = Math.floor(Math.random() * dont_why.length);
var combinedQuestion = ("Create " + what[rand_what] + " for " + who[rand_who] + " " + why[rand_why]);
document.getElementById("questionText").innerHTML = combinedQuestion;
document.getElementById("dont_whatText").innerHTML = ("- " + dont_what[rand_dont_what]);
document.getElementById("dont_whoText").innerHTML = ("- " + dont_who[rand_dont_who]);
document.getElementById("dont_whyText").innerHTML = ("- " + dont_why[rand_dont_why]);
}
generateQuestion();
var btn = document.getElementById("Generate_new_question");
btn.onclick = function() {
generateQuestion();
};
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
.h5p-iframe-wrapper {
}
.welcomeHome {
font-weight: bold;
margin: 0;
padding: 0;
}
.exploreHead {
height: 100px;
width: 100%;
background-color: #000;
text-align: center;
/*line-height: -100px;*/
font: 400 50px/1.7 'Pacifico', Helvetica, sans-serif;
color: #fff;
text-shadow: 3px 3px 0px rgba(0,0,0,0.1), 7px 7px 0px rgba(0,0,0,0.05);
margin-right: -100px;
margin-bottom: 20px;
}
#tileMenu {
width: 100%;
margin: auto;
}
#tileMenu p {
display: inline-grid;
width: 300px;
height: 300px;
margin-left: 30px;
background-color: #fff;
}
#tileMenu::after {
content: "";
clear: both;
display: table;
}
div#scrollmenu {
background-color: #fff;
overflow: auto;
white-space: nowrap;
margin-bottom: 30px;
display: none;
}
div#scrollmenu p {
display: inline-block;
color: #000;
font-weight: bold;
text-align: center;
padding: 14px;
text-decoration: none;
width: 200px;
height: 200px;
margin: 0px;
}
div#scrollmenu p a {
color: #000!important;
padding: 5px 10px 5px 10px;
}
div#scrollmenu p a span {
background-color: #fff;
padding: 5px 10px 5px 10px;
}
.scrollmenu-1 {
/*background-image: url("http://wp.lancs.ac.uk/designthinkinglab/files/2022/07/Home-page-page-001.jpg");
background-repeat: no-repeat;
background-size: 200px 200px;*/
}
.scrollmenu-2 {
border: 4px dotted #006699;
/*background-image: url("http://wp.lancs.ac.uk/designthinkinglab/files/2022/07/1-Innovation-page-001.jpg");
background-repeat: no-repeat;
background-size: 300px 300px;
border: 4px solid #333;!important;
opacity: 0.2;*/
}
.scrollmenu-2 .bg {
opacity: 0.2;
position: relative;
left: 0;
top: 0;
width: 300px;
}
.scrollmenu-2 a {
font-weight: bold;
font-size: 150%;
color: #000;
text-decoration: underline;
line-height: 260px;
display: block;
width: 300px;
height: 300px;
position: absolute;
/*opacity: 0.2;*/
text-align: center;
text-shadow: 8px 8px 16px #fff;
}
.scrollmenu-3 {
border: 4px dotted #006699;
/*background-image: url("http://wp.lancs.ac.uk/designthinkinglab/files/2022/07/2-Challenge-page-001.jpg");
background-repeat: no-repeat;
background-size: 300px 300px;
border: 4px solid #333;!important;
opacity: 0.6;*/
}
.scrollmenu-3 .bg {
opacity: 0.2;
position: relative;
left: 0;
top: 0;
width: 300px;
}
.scrollmenu-3 a {
font-weight: bold;
font-size: 150%;
color: #000;
text-decoration: underline;
line-height: 260px;
display: block;
width: 300px;
height: 300px;
position: absolute;
/*opacity: 0.2;*/
text-align: center;
text-shadow: 8px 8px 16px #fff;
}
.scrollmenu-4 {
border: 4px dotted #006699;
/*background-image: url("http://wp.lancs.ac.uk/designthinkinglab/files/2022/07/3-Inspiration-page-001.jpg");
background-repeat: no-repeat;
background-size: 300px 300px;*/
}
.scrollmenu-4 .bg {
opacity: 0.2;
position: relative;
left: 0;
top: 0;
width: 300px;
}
.scrollmenu-4 a {
font-weight: bold;
font-size: 150%;
color: #000;
text-decoration: underline;
line-height: 260px;
display: block;
width: 300px;
height: 300px;
position: absolute;
/*opacity: 0.2;*/
text-align: center;
text-shadow: 8px 8px 16px #fff;
}
.scrollmenu-5 {
border: 4px dotted #006699;
/*background-image: url("http://wp.lancs.ac.uk/designthinkinglab/files/2022/07/4-Ideas-page-001.jpg");
background-repeat: no-repeat;
background-size: 300px 300px;
border: 4px solid #333;!important;*/
}
.scrollmenu-5 .bg {
opacity: 0.2;
position: relative;
left: 0;
top: 0;
width: 300px;
}
.scrollmenu-5 a {
font-weight: bold;
font-size: 150%;
color: #000;
text-decoration: underline;
line-height: 260px;
display: block;
width: 300px;
height: 300px;
position: absolute;
/*opacity: 0.2;*/
text-align: center;
text-shadow: 8px 8px 16px #fff;
}
.scrollmenu-6 {
border: 4px dotted #006699;
/*background-image: url("http://wp.lancs.ac.uk/designthinkinglab/files/2022/07/5-Prototype-page-001.jpg");
background-repeat: no-repeat;
background-size: 300px 300px;*/
}
.scrollmenu-6 .bg {
opacity: 0.2;
position: relative;
left: 0;
top: 0;
width: 300px;
}
.scrollmenu-6 a {
font-weight: bold;
font-size: 150%;
color: #000;
text-decoration: underline;
line-height: 260px;
display: block;
width: 300px;
height: 300px;
position: absolute;
/*opacity: 0.2;*/
text-align: center;
text-shadow: 8px 8px 16px #fff;
}
.scrollmenu-7 {
border: 4px dotted #006699;
/*background-image: url("http://wp.lancs.ac.uk/designthinkinglab/files/2022/07/6-Share-page-001.jpg");
background-repeat: no-repeat;
background-size: 300px 300px;*/
}
.scrollmenu-7 .bg {
opacity: 0.2;
position: relative;
left: 0;
top: 0;
width: 300px;
}
.scrollmenu-7 a {
font-weight: bold;
font-size: 150%;
color: #000;
text-decoration: underline;
line-height: 260px;
display: block;
width: 300px;
height: 300px;
position: absolute;
/*opacity: 0.2;*/
text-align: center;
text-shadow: 8px 8px 16px #fff;
}
.scrollmenu-8 {
border: 4px dotted #006699;
/*background-image: url("http://wp.lancs.ac.uk/designthinkinglab/files/2022/07/7-Reflections-page-001.jpg");
background-repeat: no-repeat;
background-size: 300px 300px;*/
}
.scrollmenu-8 .bg {
opacity: 0.2;
position: relative;
left: 0;
top: 0;
width: 300px;
}
.scrollmenu-8 a {
font-weight: bold;
font-size: 150%;
color: #000;
text-decoration: underline;
line-height: 260px;
display: block;
width: 300px;
height: 300px;
position: absolute;
/*opacity: 0.2;*/
text-align: center;
text-shadow: 8px 8px 16px #fff;
}
.scrollmenu-blank-1 {
/*background-image: url("");
background-repeat: no-repeat;
background-size: 300px 300px;
border: 4px dotted #ABB2B9;!important;*/
}
.scrollmenu-blank-1 .bg {
position: relative;
left: 0;
top: 0;
width: 300px;
}
.scrollmenu-blank-1 a {
/*font-weight: bold;
font-size: 150%;
color: #666;
text-decoration: underline;
line-height: 260px;
display: block;
width: 300px;
height: 300px;
position: absolute;
opacity: 0.2;
text-align: center;*/
}
.scrollmenu-blank-2 {
/*background-image: url("");
background-repeat: no-repeat;
background-size: 300px 300px;
border: 4px dotted #ABB2B9;!important;*/
}
.scrollmenu-blank-2 .bg {
position: relative;
left: 0;
top: 0;
width: 300px;
}
.scrollmenu-blank-2 a {
font-weight: bold;
font-size: 150%;
color: #000;
text-decoration: underline;
line-height: 260px;
display: block;
width: 300px;
height: 300px;
position: absolute;
/*opacity: 0.2;*/
text-align: center;
}
#sectionscrollhead {}
#sectionscrollhead p {
text-align: center;
font-weight: bold;
font-size: 30px;
text-decoration: underline;
margin: 0 0 20px 0;
}
h3.textblockdotted {
background-color: #fff;
border-top: 3px solid #999;
border-bottom: 3px solid #999;
margin-bottom: 20px;
padding: 20px 30px 20px 30px;
font-size: 200%!important;
}
.textblockdotted p {
font-size: 24px;
font-weight: bold;
margin: 0;
padding: 0;
/*padding: 20px 30px 20px 30px;*/
}
.textblocksolid {
background-color: #BCDCE6;
margin-bottom: 30px;
padding: 20px 30px 20px 30px;
}
.textblocksolid p {
margin: 0;
}
.questionblock {
background-color: #ccc;
padding: 20px 30px 20px 30px;
}
.podnight {
background-color: #99D8D3;
padding: 20px 30px 20px 30px;
background-image: url("http://wp.lancs.ac.uk/designthinkinglab/files/2022/07/2743534799_e1c988d6be_c.jpg");
background-repeat: no-repeat;
background-size: 100% 110%;
margin-bottom: 30px;
}
.podnight .textblock {
background-color: #ffffff;
padding: 20px 30px 20px 30px;
font-weight: bold;
font-size: 110%;
}
.podnight iframe {
width: 100%;
}
.podbanner {
height: 100px;
width: 100%;
background-color: #000;
text-align: center;
/*line-height: -100px;*/
font: 400 50px/1.7 'Pacifico', Helvetica, sans-serif;
color: #fff;
text-shadow: 3px 3px 0px rgba(0,0,0,0.1), 7px 7px 0px rgba(0,0,0,0.05);
margin-right: -100px;
}
.movienight {
background-color: #99D8D3;
padding: 20px 30px 20px 30px;
background-image: url("http://wp.lancs.ac.uk/designthinkinglab/files/2022/07/movie-scaled.jpg");
background-repeat: no-repeat;
background-size: 100% 110%;
margin-bottom: 30px;
}
.movienight .textblock {
background-color: #ffffff;
padding: 20px 30px 20px 30px;
font-weight: bold;
font-size: 110%;
}
.movienight iframe {
width: 100%;
}
.movbanner {
height: 100px;
width: 100%;
background-color: #000;
text-align: center;
/*line-height: -100px;*/
font: 400 50px/1.7 'Pacifico', Helvetica, sans-serif;
color: #fff;
text-shadow: 3px 3px 0px rgba(0,0,0,0.1), 7px 7px 0px rgba(0,0,0,0.05);
margin-right: -100px;
}
.learning {
border: 6px dotted #CC0033;
display:inline-block;
margin: 0 auto;
text-align:center;
width: 100%;
margin-bottom: 20px;
padding: 20px 30px 20px 30px;
font-size: 120%!important;
}
.learning h4 {
font-weight: bold;
font-size: 140%!important;
}
.learning .BGcolor {
background-color: #CC0033;
padding: 20px 30px 20px 30px;
color: #fff;
}
.question {
padding: 20px 30px 20px 30px;
margin-bottom: 30px;
text-align: center;
background-color: #000;
color: #fff;
font-weight: bold;
}
.question h4 {
font-size: 200%!important;
font-weight: bold;
}
.question .questionText {
background-color: #fff;
font-size: 120%!important;
font-weight: bold;
color: #000;
padding: 20px 30px 20px 30px;
}
.questionTextQ {
color: #CC0033!important;
}
.structure {
padding: 20px 30px 20px 30px;
margin-bottom: 30px;
text-align: center;
background-color: #006699;
color: #fff;
font-weight: bold;
}
.structure ul {
padding: 20px 20px 20px 40px;
margin: 0 0 20px 0;
background-color: #fff;
text-align: left;
color: #000;
font-size: 110%!important;
}
.structure h4 {
font-size: 140%!important;
font-weight: bold;
}
.structureText {
background-color: #fff;
font-size: 120%!important;
font-weight: bold;
color: #006699;
padding: 20px 30px 20px 30px;
}
.structureTextQ {
color: #ff0000!important;
}
.activity-block {
border: 6px dotted #006699;
display:inline-block;
margin: 0 auto;
text-align:center;
width: 100%;
margin-bottom: 30px;
padding: 20px 30px 20px 30px;
color: #006699;
font-weight: bold;
}
.activity-block h4 {
font-size: 140%!important;
font-weight: bold;
}
.activity-block ul {
padding: 20px 20px 20px 40px;
margin: 0 0 20px 0;
background-color: #006699;
text-align: left;
color: #fff;
font-size: 110%!important;
}
.activity-block .blueBG {
padding: 20px 20px 20px 40px;
margin: 0 0 20px 0;
background-color: #006699;
text-align: left;
color: #fff;
font-size: 110%!important;
}
.activity-block a {
color: #ccc;
text-decoration: underline;
}
.activity-block a:hover {
color: #fff;
text-decoration: none;
}
.spannerButton {
text-align: center;
margin-bottom: 20px;
}
.spannerButton button {
background-color: #247218;
text-decoration: underline;
font-weight: bold;
}
.innovationButton {
text-align: center;
margin-bottom: 20px;
}
.innovationButton button {
background-color: #CC0033;
text-decoration: underline;
font-weight: bold;
}
.h5pblock {
margin-bottom: 20px;
}
.bodyText {
font-size: 120%;
}
.bodyText a {
color: #006699;
text-decoration: underline;
}
.nextBtn {
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px 30px 20px 30px;
background-color: #000;
color: #fff;
line-height: 60px;
font-size: 120%;
}
.nextBtn p {
margin: 0;
color: #fff;
font-weight: bold;
line-height: 50px;
font-size: 120%;
}
.nextBtn button {
background-color: #006699;
text-decoration: underline;
font-weight: bold;
float: right;
}
.nextBtn::after {
content: "";
clear: both;
display: table;
}
.skills {
text-align: center;
}
.skills img {
width: 80%;
}
.imgInfoIconsA {
width: 100px;
height: 100px;
float: left;
position: relative;
left: -140px;
top: -200px;
}
.imgInfoIconsB {
width: 100px;
height: 100px;
float: left;
position: relative;
left: -140px;
top: -250px;
}
.imgInfoIconsQues {
width: 100px;
height: 100px;
float: left;
position: relative;
left: -130px;
top: -150px;
}
.imgInfoIconsMov {
width: 100px;
height: 100px;
float: left;
position: relative;
left: -100px;
top: -0px;
}
.imgInfoIconsLearn {
width: 100px;
height: 100px;
float: left;
position: relative;
left: -140px;
top: -140px;
}
.pageHeaderBlock {
margin-bottom: 20px!important;
}
.row {
}
.row::after {
content: "";
clear: both;
display: table;
}
.iconCol {
float: left;
width: 10%;
}
.iconCol img {
width: 100%;
}
.contentCol {
float: left;
width: 90%;
}
.insetText {
padding: 0 20px 0 20px;
}
.emphasis-A {
font-weight: bold;
text-decoration: underline;
}
#podGrid {
width: 100%;
margin: auto;
}
#podGrid p {
/*float: left;
width: 350px;
margin: 0;
padding: 0;*/
}
.podImages {
float: left;
width: 350px;
margin: 0;
padding: 0;
}
.podcast {
float: right;
width: 500px;
margin: 0;
padding: 0;
}
#podGrid p img {
width: 100%;
}
.h5p-iframe-wrapper {
}
#podGrid::after {
content: "";
clear: both;
display: table;
}
.podImages {
}
.podcast {
}
.skillflowertext {
float: left;
width: 400px;
}
.skillflower {
float: left;
width: 450px;
margin-left: 20px;
margin-top: 20px;
}
.pageHeaderBlockText {
float: left;
width: 65%;
font-size: 130%;
padding-right: 20px;
}
.pageHeaderBlockText a {
color: #006699;
text-decoration: underline;
}
.pageHeaderBlockImg {
float: right;
width: 35%;
text-align: center;
}
.clear {
clear: both;
}
.pageHeaderBlockImg a {
color: #006699;
}
.pageHeaderBlockImg img {
float: right;
width: 95%
}
.bottleText {
width: 60%;
float: left;
text-align: right;
}
.bottleTextImg {
float: right;
padding: 0 20px 20px 0;
}
#exploreText-B {
display: none;
}
#exploreText-A {
display: block;
}
#begin-A {
display: block!important;
}
#begin-B {
display: none!important;
}
#skillflower .h5p-iframe-wrapper {
width: 400px!important;
float: left!important;
}
.skillInterativeH5P {
float: left;
width: 450px;
border-right: 3px dotted #666;
}
.skillInterativeH5P a {
color: #006699;
text-decoration: underline;
}
.skillInterativeImg {
float: left;
width: 45%
}
.skillInterativeImg img {
width: 500px;
}
#skillInterative .h5p-iframe-wrapper {
width: 400px!important;
float: left!important;
}
@media only screen and (max-width: 600px) {
.podImages {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.podcast {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.skillflowertext {
float: left;
width: 100%;
}
.skillflower {
float: left;
width: 100%;
margin-left: 0;
}
.site-branding {
background-image: url(http://wp.lancs.ac.uk/designthinkinglab/files/2022/05/lab-2-100.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%!important;
height: 300px!important;
/* background: #336666; */
display: inline-block;
padding: 1.7em;
}
.pageHeaderBlockText {
float: left;
width: 100%;
padding-right: 0px!important;
}
.pageHeaderBlockImg {
float: left;
width: 100%;
}
.pageHeaderBlockImg img {
width: 95%
}
.bottleText {
width: 100%;
float: left;
text-align: center;
}
.bottleTextImg {
float: left;
padding: 0 20px 20px 0;
width: 300px;
margin-left: 40px;
}
#exploreText-B {
display: none;
}
#exploreText-A {
display: block;
}
#begin-A {
display: block!important;
}
#begin-B {
display: none!important;
}
#tileMenu {
width: 300px;
height: 460px;
overflow-y: auto;
overflow-x: hidden;
transform: rotate(-90deg);
transform-origin: right top;
transform:rotate(-90deg) translateY(-380px);
margin-bottom: -140px;
}
#tileMenu p {
width: 300px;
height: 300px;
transform: rotate(90deg);
transform-origin: right -30px;
}
.scrollmenu-blank-1 {
display: none!important;
}
.scrollmenu-blank-2 {
display: none!important;
}
.pageHeaderBlockImg {
margin-top: 20px!important;
}
.skillInterativeH5P {
float: left;
width: 450px;
border-right: none;
}
.skillInterativeImg {
float: left;
width: 45%
}
.skillInterativeImg img {
width: 400px;
}
#skillflower .h5p-iframe-wrapper {
width: 320px!important;
float: left!important;
}
}
@media only screen and (max-width: 400px) {
.site-branding {
background-image: url(http://wp.lancs.ac.uk/designthinkinglab/files/2022/05/lab-2-100.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%!important;
height: 200px!important;
/* background: #336666; */
display: inline-block;
padding: 1.7em;
background-position: -30px 0;
}
.pageHeaderBlockText {
float: left;
width: 100%;
padding-right: 0px!important;
}
.pageHeaderBlockImg {
float: left;
width: 100%;
}
.pageHeaderBlockImg img {
width: 95%
}
.bottleText {
width: 100%;
float: left;
text-align: center;
}
.bottleTextImg {
float: left;
padding: 0 20px 20px 0;
width: 200px;
margin-left: 0px;
}
#exploreText-B {
display: block!important;
}
#exploreText-A {
display: none!important;
}
#begin-A {
display: none!important;
}
#begin-B {
display: block!important;
}
#tileMenu {
width: 300px;
height: 360px;
overflow-y: auto;
overflow-x: hidden;
transform: rotate(-90deg);
transform-origin: right top;
transform:rotate(-90deg) translateY(-300px);
margin-bottom: -40px;
}
#tileMenu p {
width: 300px;
height: 300px;
transform: rotate(90deg);
transform-origin: right -30px;
/*display: inline-block;
white-space: nowrap;
overflow: auto;
color: #000;
font-weight: bold;
text-align: center;
padding: 14px;
text-decoration: none;
width: 300px;
height: 300px;
margin: 0px;*/
}
.scrollmenu-blank-1 {
display: none!important;
}
.scrollmenu-blank-2 {
display: none!important;
}
.pageHeaderBlockImg {
margin-top: 20px!important;
}
/*
#tileMenu {
display: none;
}
#scrollmenu {
background-color: #fff;
overflow: auto;
white-space: nowrap;
margin-bottom: 30px;
display: block!important;
}
*/
}