body { font-family: Open Sans, sans-serif}

/* Regular fonts */
h1 { color: #0100A9; font-size: 1.5em; }
h2 { color: #0100A9; font-size: 1.2em; }
p { margin-bottom: 10px; }
ul li { line-height:1em; }
em { font-style: italic }

#container { margin-bottom: 100px; }
#header { background: white; position: relative;  }
#header .inner { position: relative; }
#header .logo { text-align: center;  }
#header .logo a img { width: 30%; padding: 10px}
#header .contactdetails { padding-bottom: 10px; text-align:center; color: #656265;  font-family: 'CenturyGothicStd', cursive; }
#header .contactdetails p { display: inline; margin-right: 10px; font-size: 0.8em; font-weight: 300; } 
#header .contactdetails p:last-child { margin-right: 0px }
#header .contactdetails p a { color: #656265; text-decoration: none; }
#header .search { display: none;  }

.gsc-search-box { width: 200px !important; border-collapse: collapse }
table.gsc-search-box { width: 200px !important; }
.gsc-input:before { }
td.gsc-input { width: 200px; text-align: right; padding: 0px !important; }
.gsc-input input { width: 120px !important; margin-left: 5px;  height: 20px !important; }
.gsc-search-button  { width: 10px; margin: 0px !important; border: 0px !important; border-radius: 0px !important;}
.gsc-clear-button { display: none }

.inner { max-width: 900px; margin: 0px auto }

.mainmenucontainer { width: 100%; font-family: 'CenturyGothicStd-Bold', cursive; }

nav.mainmenu a#pull { display: block; width: 100%; position: relative; text-decoration: none }  
nav.mainmenu a#pull:after { position: absolute; top: -27px; content:""; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; background: url('../images/nav-icon.png') no-repeat; }  
nav.mainmenu a#pull.open:before { content: "Menu:"; border-bottom: 1px solid #bebebe; background: #4b4b4b; color: #ffc600; padding: 10px; font-size: 16pt; text-decoration: none; width: 200px; position: absolute; top: -42px; }
nav.mainmenu a#pull.open:after { content: "x"; position: absolute; top: -38px; right: -5px; background: none; color: white; font-size: 20pt; }

nav.mainmenu { width: 200px; padding: 0px; z-index: 1000; position: absolute; top: -40px; right: 0px; border-radius: 5px }  
nav.mainmenu ul { display: none; height: auto; }  
nav.mainmenu ul li { position:relative; width: 200px; display: block; padding: 8px 8px 8px 12px; margin: 0px; z-index: 3000; text-transform: uppercase; 
    border-bottom: 1px solid #bebebe; 
    background: #606060; /* Old browsers */
    background: -moz-linear-gradient(left,  #606060 0%, #939393 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#606060), color-stop(100%,#939393)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #606060 0%,#939393 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #606060 0%,#939393 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #606060 0%,#939393 100%); /* IE10+ */
    background: linear-gradient(to right,  #606060 0%,#939393 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#939393',GradientType=1 ); /* IE6-9 */
}
nav.mainmenu ul li, nav.mainmenu ul li a { font-weight: 300; color: white; text-decoration: none; line-height:1em; }
nav.mainmenu ul li.hasdropdown { cursor: pointer }
nav.mainmenu ul li a:hover { text-decoration: underline }
/*nav.mainmenu ul li:last-child { background: #c51149 }*/
nav.mainmenu ul li.highlight { background: #c51149 } /* Replaced the above line so that any menu item can be highlighted, not just the last item */
nav.mainmenu ul li .dropdown { display: none; margin-top: 10px; margin-left: -12px; border: none; }
nav.mainmenu ul li.hasdropdown:after { content: "v"; position: absolute; right: 15px; top: 12px; font-size: 8pt; font-weight: 300; color: white; 
    -webkit-transform:scale(2.0, 1.0);
    -moz-transform:scale(2.0, 1.0);
    -ms-transform:scale(2.0, 1.0);
    -o-transform:scale(2.0, 1.0);
    transform:scale(2.0,1.0);
}
nav.mainmenu ul li.open.hasdropdown:after { 
    -webkit-transform:scale(-2.0, -1.0);
    -moz-transform:scale(-2.0, -1.0);
    -ms-transform:scale(-2.0, -1.0);
    -o-transform:scale(-2.0, -1.0);
    transform:scale(-2.0,-1.0);
}
nav.mainmenu ul li.open .dropdown { display: block; }
nav.mainmenu ul li .dropdown ul li { background: white; color: black;  border: none; padding: 8px 10px 5px 10px; }
nav.mainmenu ul li .dropdown ul li:last-child { padding-bottom: 10px; }
nav.mainmenu ul li .dropdown ul li a { font-size: 10pt; margin-left: 0px; color: black;}

#breadcrumbs { position: relative; height: 38px; width: 100%; background: #5585c4; color: #fff; }
#breadcrumbs .inner { padding: 10px; font-size: 0.7em; }
#breadcrumbs li { float: left; margin-left: 30px; padding-left: 9px; }
#breadcrumbs li a { text-decoration: none; color: #fff; }
#breadcrumbs li.homecrumb { list-style: none; margin-left: 0px; padding-left: 0px }
#breadcrumbs li.homecrumb a { color: #ccc; }

.inner .join {
    position:absolute;
    right: -49px; top: 5px;
    display:block;
    text-align:right;
    padding:15px 0;
}
.inner .join ul li {
    display: inline-block;
    margin-left: 0;
    margin-right: 10px;
}
.inner .join ul li:last-of-type {
    display: inline-block;
    margin-right: 0;
}
#header .inner {
  /*  height:139px; Removed because it stopped the menu preview working in the backend */ 
}
.inner .join ul li a{
    display:inline-block;
    padding:10px 25px;
    background:#C51149;
    color:#fff;
    font-weight:bold;
    cursor:pointer;
    text-decoration:none;
}

.bannerpreview { width: 600px }
.banner .slide, .bannerpreview .slide { position: relative; }
.banner .slide img, .bannerpreview.slide img { width: 100%; }

.banner .slick-prev { left: 0px; }
.banner .slick-next { right: 6px; }
.banner .slick-dots { bottom: -30px; }
.banner .slick-dots li button:before { font-size: 8px !important;  }

.inner ul {	list-style-type: square; }
.inner ul li { margin-left: 20px; line-height:1.2em; padding-left: 10px }

#content .inner { padding: 10px; font-size: 0.7em; }

.contentpanels { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px; padding-bottom: 10px; }
.contentpanels .contentpanel { width: calc(100% - 20px); margin: 0 10px; }
.contentpanels .contentpanel .prompanel h2 { color: #c51149; text-transform: uppercase; }
.contentpanels .contentpanel .prompanel p { font-size: 0.9em; }
.codeforembed { display: -ms-flexbox; display: flex; justify-content: center; }

.logoitembox { float: left; width: 30%; margin: 0px auto; margin-bottom: 30px; }
.logoitembox img { width: 100px; }
.logitemboxright { float: left; width: 70%; }

#social { float: left; width:100% }
#social .middlesocial { margin: 5px auto; width: 180px;  }
#social img { float: left; vertical-align: top; padding: 1px; width: 30px; height: 30px; }

.zoomable { background-color: red; padding: 10px; }

#footer { margin-top: 30px;  }
#footer .sitelinks { background: #ebebeb; }
#footer .sitelinks .col { float: left; width: calc(100% - 20px); padding-bottom: 10px; margin: 10px; }
#footer .sitelinks .colhead { border-bottom: 1px solid #cccccc; text- }
#footer .sitelinks .col ul { float: left; width: 50%; padding-right: 20px; margin-left: 0px; }
#footer .sitelinks .col ul li { list-style: none; font-size: 0.8em; padding: 6px 0px 0px 0px  }
#footer .sitelinks .col ul li a { color: inherit; text-decoration: none; }

#footer .sublinks { text-align: center; margin: 10px 0px; padding: 20px 0px; position: relative; height: 120px;  }
#footer .sublinks p { display: inline-block; margin-right: 10px; font-size: 0.8em; font-weight: 300; margin-bottom: 0px } 
#footer .sublinks p:last-child { margin-right: 0px }
#footer .sublinks .ukyouthlogo { position: absolute; bottom: 5px; right: calc(50% - 85px)}

#footer .institutions { display: none; }
#footer .institutions img.isopng { max-height: 70px; position:relative; top: 5px; }
#footer .institutions img.isopng:first-of-type { margin-right: 30px  }

.cookiewarning { position:fixed; bottom: 0px; width: 100%; background: #656265; z-index: 1000; padding: 10px }
.cookiewarning .inner { margin: 0px auto; }
.cookiewarning .head { font-size: 1em; color: white; margin-right: 20px;   }
.cookiewarning p { color: #bbb; margin: 0px; padding: 0px; font-size: 0.8em}
.cookiewarning a { color: #fa0; margin: 0px 0px 0px 0px; padding: 0px; }
.cookiewarning a:hover  { color: #c90; cursor: pointer; }
.cookiewarning form a { display: inline-block; margin-top: 5px; padding: 2px; border-radius: 2px; color: white; background: #e64619; text-decoration: none; }
.cookiewarning form a:hover { color: white; background: #c90; }

/* Cookie consent edit floating button */
.ccb__edit { border: 6px solid #2b7abb; position: absolute; bottom: 15px; left: 15px; background-color: #2b7abb; }

/* For forms when adding contact form to a webpage */
.label { width: 180px; padding: 5px; margin-top: 3px; float:left; clear: left}
.input { float: left; padding: 5px; }
textarea, input[type="text"], input[type="password"], select { min-width: 200px; font-size: 10pt !important }
select { min-width: 205px }
textarea { width: 500px; height: 100px; } 

@media(max-width:1280px) {
    .join {display:none !important;}
    .search {display:none !important;}
}

@media screen and (max-width: 500px) /* All mobiles */
{
	.logoitembox { float: left; width: width: 30%; margin: 0px auto; margin-bottom: 30px; }
  	.logoitembox img { width: 50%; }  	
}

@media screen and (min-width: 600px)
{
  nav.mainmenu { top: -50px; }
  #header .logo img { width: unset;}
  #footer .sublinks { height: 110px }
}

@media screen and (min-width: 620px)
{  
  #footer .sitelinks .col { width: calc(50% - 20px); }
  #footer .institutions { display: block; padding: 10px 10px; text-align: center; }  
}

@media screen and (max-width: 700px)
{
	 #breadcrumbs { display: none; }
	 .slick-dots { display: none !important; }
	 .slick-slider { margin-bottom: 0px !important; }
	 #container { margin-bottom: 10px !important; }
}

@media screen and (min-width: 700px)
{
  .left { float: left; width: calc(100% - 350px); }
  .right { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 20px; }
  #content .inner { font-size: 0.8em; } 
  
  .contentpanels .contentpanel { width: calc(50% - 20px); margin: 10px; border-bottom: 1px solid #cccccc; }
  nav.mainmenu { top: -15px; }
  nav.mainmenu a#pull:after { top: -37px; }
  #header .logo { text-align: left; margin-left: 5px }
  #header .contactdetails { text-align:left; position: absolute; right: 25%; top: 20px }
  #header .contactdetails p { margin-right: 40px; font-size: 1.0em;  } 
  
  #social { position: fixed; left: 0px; top: 55%; width: 40px;}
  #social .middlesocial { width: 40px; }
  #social img { vertical-align: top; width: 40px; height: 40px; padding:0px; }
}

@media screen and (min-width: 960px)
{
  #content .inner { font-size: 1em; } 
  #breadcrumb .inner { font-size: 0.85em; } 
  #footer .inner { font-size: 1em }
  #header .search { display: inline; position: absolute; right: 10px; top: 75px; color: white; }
  #header .contactdetails { padding-bottom: 10px; padding-top:50px; text-align:center; color: #656265;  font-family: 'CenturyGothicStd', cursive; }
  nav.mainmenu { width: 100%; position: unset; }  
  .mainmenucontainer { width: 100%; height: 35px; background: #2354a2;}
  
  nav.mainmenu { width: auto; position: static; }  
  nav.mainmenu ul { display: inline; height: auto;  }  
  nav.mainmenu ul li { background: none; float: left; width: auto; padding: 10px 21px 12px 20px; position: relative; font-weight: 300; font-size: 10pt; border: none; }
  nav.mainmenu ul li.hasdropdown:after { content: "" }
  nav.mainmenu ul li:hover a { text-decoration: underline; }
  nav.mainmenu ul li:hover .dropdown ul li a { text-decoration: none; }
  nav.mainmenu ul li:first-child { padding-left: 10px; }
  nav.mainmenu ul li:hover .dropdown, .menu ul li:focus .dropdown  { display: block !important; }
  nav.mainmenu ul li .dropdown { display: none; position: absolute; top: 25px; left: calc(50% - 75px); margin-left: 0px; background: #f7f7f7; border-radius: 5px; }
  nav.mainmenu ul li .dropdown:before { content: ""; position: absolute; left: 70px; top: -10px; 
	width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent !important; border-bottom: 10px solid #f7f7f7; color: #69BDCC;  }
  nav.mainmenu ul li .dropdown ul { margin-left: -2px; }
  nav.mainmenu ul li .dropdown ul li { padding: 5px 4px 0px 4px; float: none; width: 150px; height: auto; background: none; border-top: 1px solid #cfcfcf; }
  nav.mainmenu ul li .dropdown ul li a { display: block; font-size: 12px; padding: 3px 0px 6px 10px; color: #656265  }
  nav.mainmenu ul li .dropdown ul li a:hover { text-decoration: underline; }
  nav.mainmenu ul li .dropdown ul li:last-child a { padding-bottom: 5px; border-bottom: 1px solid #cfcfcf;}

  nav.mainmenu a#pull { display: none }  
  .contentpanels .contentpanel { width: calc(33.3333% - 20px);}

  #footer .sublinks { text-align: left; margin: 15px auto; width: 800px; height: 50px }
  #footer .sublinks .ukyouthlogo { top: -1px; right: 0px }
}

@media screen and (min-width: 950px) and (max-width: 1150px) 
{
  nav.mainmenu ul li { padding: 10px 20px 12px 10px; }
  
}

@media screen and (min-width: 1150px)
{
  .inner { max-width: 1100px; }
  .mainmenucontainer { height: 38px; }
  nav.mainmenu ul li { font-size: 12pt; padding: 10px 21px 12px 21px; }
  .logoitembox { float: left; width: 30%; margin: 0px auto; margin-bottom: 30px; }
  .logoitembox img { width: 150px; }
  
  /* Tabbed items on template 2 */
  .ui-tabs  { margin: 20px 0px; padding: 0px; border: none !important; }
.ui-tabs .ui-tabs-nav.ui-widget-header { border-bottom: 0px !important; margin: 0px; padding: 0px; }
.ui-tabs .ui-tabs-nav.ui-widget-header li { background: #2354a2; border: none; border-radius: 0px !important; width: auto; }
.ui-tabs .ui-tabs-nav.ui-widget-header li a {  color: white; text-shadow: none }
.ui-tabs .ui-tabs-nav.ui-widget-header li.ui-tabs-selected { background: #DDEEF5; border: none;  }
.ui-tabs .ui-tabs-nav.ui-widget-header li.ui-tabs-selected a {  color: #333; }
.ui-tabs .ui-tabs-nav.ui-widget-header li.ui-state-hover { background: #399ED4; border: none;  }
.ui-tabs .ui-tabs-nav.ui-widget-header li:after { display:none; }
	.ui-tabs .ui-tabs-nav.ui-widget-header li.ui-tabs-selected:after { display:none; }
.ui-tabs-panels .ui-tabs-panel { background: #DDEEF5; border-radius: 0px }
.ui-tabs-panels .ui-tabs-panel a { color: #4444F3 !important; }
}
  
@media screen and (min-width: 1350px)
{
  .inner { max-width: 1350px; }
  .mainmenucontainer { height: 38px; }
  nav.mainmenu ul li { font-size: 12pt; padding: 10px 30px 12px 30px } 
  .logoitembox { float: left; width: 30%; margin: 0px auto; margin-bottom: 30px; }
  .logoitembox img { width: 200px; }
}