/*
   colors:
   dark blue: #003567
   mid blue:#5d97cf
   light blue: #3483cf
   green:#00a46a
   #f8c026:#f59100
   gold: #f8c026;
   
   
*/
@import url("http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700");
@import url(assets/education/css/education.css);
/*
Theme Name: Marine Biological Assocation 2014
Theme URI: http://www.mba.ac.uk
Author: Steve Pewter
Author URI: http://www.mba.ac.uk
Description: The 2014 theme for the MBA website
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: marine, biological, association, blue, responsive, MBA
Text Domain: mba2014

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/*
   colors:
   dark blue: #003567
   mid blue:#5d97cf
   light blue: #3483cf
   green:#00a46a
   #f8c026:#f59100
   gold: #f8c026;
   
   
*/
/* Import "PT Sans Narrow" font from Google fonts */
/****************************************************************************
RESETS
*****************************************************************************/

/*Attempted fix for mobile device scrolling judder*/
html {height:100%; min-height:100%}
body{min-height:100%;}

html,
button,
input,
select,
textarea {
  color: #222;
}
body {
  font-size: 1em;
  line-height: 1.4;
}
ul,
li,
li a,
nav,
nav a {
  margin: 0px;
  padding: 0px;
}
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}
.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
/****************************************************************************
General styles / mobile first
*****************************************************************************/
body {
  font: 16px/26px 'droid sans', Helvetica, Helvetica Neue, Arial;
}
.wrapper {
  width: 90%;
  margin: 0 5%;
}
section.pageBlock {
  padding-top: 1em;
}
/*Table for mobile*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 1.4em;
  max-width: 75%;
  width: 100%;
  max-width: 100%;
  font-size: .875em;
  /* 14 / 16 = .875 */

  color: black;
}
th {
  font-weight: bold;
  text-align: left;
}
table tr,
table th {
  border-bottom: solid 1px #5d97cf;
}
th,
td,
caption {
  padding: .25em 10px .25em 5px;
}
tfoot {
  font-style: italic;
}
caption {
  background-color: transparent;
}
table tr:nth-child(even):hover,
table tr:nth-child(odd):hover {
  background-color: #5d97cf;
}

.wp-caption {max-width:100%; color: #003567; font-size:small;}

/* ===================
Header
   ===================*/
  .header-container header {
  text-shadow: 1px 1px 1px #1e4b77;
  padding-top: 1em;
  padding-bottom: 1em;
}
.header-container img#mainlogo {
  display: block;
  float: left;
  padding-right: 1em;
  padding-bottom: 1em;
  width: 10%;
  min-width: 75px;
  margin-left: 34%;
}
.header-container {
  border-bottom: 20px solid #f8c026;
  background-image: url('img/wave.png');
  background-position: right bottom;
  background-repeat: no-repeat;
  width: 100%;
}
.title {
  color: white;
  display: block;
  float: left;
  width: 85%;
  text-align: center;
}
h1.title {
  font-size: 1.2em;
  margin-bottom: 0.05em;
}
h2.title {
  font-size: 1.0em;
  margin: 0.1em;
}
.main {
  padding: 30px 0;
}
.main article h1 {
  font-size: 2em;
}
.footer-container,
#sidebar aside {
  border-top: 20px solid #f8c026;
}
.header-container,
.footer-container,
#sidebar aside {
  background-color: #003567;
}
header h1 a,
header h2 a {
  color: inherit;
  text-decoration: none;
}
header h1 a:hover,
header h2 a:hover {
  text-decoration: underline;
}

header h1 a:visited,
header h2 a:visited {
  color:white;
}

#socialMediaIcons img {
  width: 30px;
}
#socialMediaIcons {
  display: block;
  float: left;
  width: 100%;
  padding: 1em 0;
}
#searchBox {
  width: 100%;
  float: left;
  padding: 1em 0;
}
#searchBox input {
  display: block;
  float: left;
  padding: 0;
  margin: 0;
}
#searchBox input[type=text] {
  clear: none !important;
  height: 20px;
}
#searchBox input[type=submit] {
  clear: none !important;
  border: none;
  background-color: #3483cf;
  color: white;
  width: 80px;
  font-size: normal;
  height: 24px;
}

.js #skip-link {display:none;}
/* ===================
Sidebar
 ===================*/
#sidebar aside h1 {
  font-size: 1.1em;
}
#sidebar aside p {
  font-size: 1em;
}
aside a,
aside a:visited {
  color: #f8c026;
}
p.readmore {
  float: right;
  text-align: right;
}
#sidebar aside {
  display: block;
  float: left;
  width: 90%;
  color: white;
  padding: 0px 5% 10px;
  font-size: 0.8em;
  margin-bottom: 0.5em;
  margin-top: 1em;
  line-height: 1.5em;
}
.newsItemShort {
  border-bottom: solid 1px #5d97cf;
}
.newsItemShort:last-child {
  border-bottom: none;
}
/*============================
Page Content
=============================*/
h1 {line-height:1.2em;}

section.page,
section.post {
  color: black;
}

section.page ul > li,
section.page table,
section.post ul > li,
section.post table {
  list-style-type: disc;
  color: inherit;
}
section.page ul,
section.post ul {
  padding-left: 1em;
}
section.page a,
section.page a:visited,
section.post a,
section.post a:visited {
  color: #003567;
}
section.page p,
section.post p {
  margin-bottom: 1em;
}
section.page img,
section.post img {
  border: solid 1px #f8c026;
}
section#newsContainer {
  width: 100%;
}
.news-archive-thumbnail {
  float: left;
  margin-right: 0.8em;
  margin-bottom: 0.8em;
  border: solid #f8c026 1px;
}
/*front page link boxes*/
.linkBox,
#vacancy,
#donate {
  display: block;
  float: left;
  width: 100%;
  background-color: #3483cf;
  height: 8em;
  /*padding-top:1em; */

  margin-top: 1em;
  text-align: center;
  font-size: 0.8em;
  color: white;
}
.linkHead {
  margin: 1em 0 1em 0;
}
.linkBox a,
.linkSplitContainer a {
  color: white;
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  top: -1em;
  text-decoration:none;
}
.linkBox a:hover,
.linkSplitContainer a:hover {
  color: inherit;
}

.linkCaption {line-height:1em; font-size:0.95em; display:block; top:2em; position:absolute; padding:0.5em; text-align:justify;}


img.alignleft {float:left; margin:5px;}
img.alignright {float:right; margin:5px;}

/*Front page slideshow container - see bottom of this css sheet for default vendor styles */
#flexContainer .caption {
  display: block;
  position: absolute;
  top: 0px;
  background-color: black;
  /*width:60%;*/
  color: white;
  opacity: 0.7;
  right: 0px;
  padding:0px 5px;
}
#flexcontainer {
  z-index: 1;
}
#flexContainer .caption a {
  color: white;
}
#flexContainer .caption a:hover {
  color: #f8c026;
}
/*Forms*/
.page input,
.page select {
  clear: both;
  display: block;
  margin: 0 0 1.5em 2em;
}
.page input[type=radio] {
  width: 5%;
  clear: none;
  float: left;
}
.required,
.required-highlighted {
  color: #fb7200;
  font-size: small;
}
.required-highlighted {
  text-decoration: underline;
}
label {
  display: block;
  width: 80%;
  vertical-align: baseline;
  color: black;
}
/*custom lists styling*/
ol {
  margin-left: 2em;
}
#membership-form ul li,
#membership-renewal-form ul li {
  list-style-type: none;
}

aside ul {list-style-type:none;}


#membership-form input[type="text"],
#membership-renewal-form input[type="text"], #membership-form select,
#membership-renewal-form select {
  width: 80%;  
  padding: 0.6em;
                  -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
}
#membership-form input[type="email"],
#membership-renewal-form input[type="email"] {
  width: 80%;
  padding: 0.6em;
                  -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
}

#recording_form input , #recording_form textarea{width:80%;}
#recording_form textarea {margin:0px 0px 1.5em 2em;}
#recording_form fieldset p {font-weight:bold; color: #f8c026;}
#recording_form input[type=submit]{width: 100px;}
#recording_form ul li {list-style-type:none;}
section.page input[type=submit], section.post input[type=submit]{background-color:#f8c026; border-radius: 8px; color: #003567; }
section.page input[type=submit]:hover, section.post input[type=submit]:hover{}

/*===============================
Google Maps API
================================*/
#map_canvas {
	width : 100%;
	height : 400px;
}

#map_canvas img {
	max-width : none;
}

#contact-map {
	width : 100%;
	height : 400px;
}

#contact-map img {
	max-width : none;
}

/*===============================
Membership forms
================================*/
#student-note, #prof-note {display:none; color: #fb7200; margin-bottom:1em;}
.emphatic {color: #5d97cf; font-style:italic;}

/*=============================
Footer
==============================*/
.footer-container {
  font-size: 0.8em;
}
.footer-container footer {
  color: white;
  padding: 20px 0;
}
footer {
  font-size: 1em;
}
#address {
  float: left;
  width: 100%;
}
#telecoms {
  float: left;
  width: 100%;
}
#footerLinks {
  display: block;
  float: left;
  width: 100%;
}
#footerLinks a {
  color: white;
  display: block;
  float: left;
  width: 100%;
  text-align: center;
  height: 40px;
  border-bottom: dotted white 1px;
}
#copyright {
  height: 15px;
  color: white;
  background-color: #003567;
  text-align: center;
  padding-top: 5px;
  font-size: 8pt;
}
/* ===============
    ALL: IE Fixes
   =============== */
.ie7 .title {
  padding-top: 20px;
}
/* ==========================================================================
   Media Queries
   ========================================================================== */
/*=========================
 Intermediate styles - 480px up
 =========================*/
@media only screen and (min-width: 480px) {
  /* ===================
  Intermediate Header
   ===================*/#searchBox {
    float: right;
    width: 35%;
  }
  #socialMediaIcons {
    width: 50%;
  }
  .header-container img#mainlogo {
    display: block;
    margin-left: 0%;
  }
  .main-container {
    background: #3483cf;
    background-image: url('img/theSound2.jpg');
    background-repeat: no-repeat;
    background-attachment: scroll/*fixed*/;
    background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

  }
  
  /*special header for education pages */
  #content-edu{
	background-image: url('assets/education/images/educationbg2.jpg');
	background-position:scroll;
  }
  
  h1.title {
    font-size: 1.8em;
    margin-bottom: 0.05em;
  }
  h2.title {
    font-size: 1.1em;
    margin: 0.1em;
  }
  .title {
    text-align: left;
  }
  /*============================
  Intermediate Page Content
  =============================*/
  .content-text,
  section.page,
  section.post {
    border: solid 1px;
    border-top: solid 20px;
    border-color: #f8c026;
    padding: 15px;
    font-size: 0.9em;
    background-color: #003567;
    color: white;
  }
  .featured-image {
    clear: both;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
	
  }
  .featured-image img {
    max-height: 400px;
    width: auto;
  }
  .alignright {
    display: block;
    float: right;
    /* max-width : 31.55080213903743%;  236 / 748  = 31.55080213903743 */
  
    margin: 1em 0 1em 1em;
    /* 20 / 748 = 2.67379679144385 */
  
    max-width: 35%;
    height: auto;
  }
  .alignleft {
    float: left;
    /* max-width : 31.55080213903743%;  236 / 748  = 31.55080213903743 */
  
    margin: 1em 1em 1em 0;
    /* 20 / 748 = 2.67379679144385 */
  
    max-width: 35%;
    height: auto;
  }
  .aligncenter {
    clear: both;
    display: block;
    margin: 1em auto;
    max-width: 100%;
  }
  section.page,
  section.post {
    color: white;
  }
  /* intermediate link colours*/
  section.page a,
  section.page a:visited,
  section.post a,
  section.post a:visited {
    color: #f8c026;
  }
  .wp-caption-text {
    font-size: 0.8em;
    color: #fff;
  }
  /* front page link boxes */
  .linkBox,
  #vacancy,
  #donate {
    padding-left: 0px;
    margin-top: 0px;
    font-size: 1em;
    padding-top: 0em;
	transition: background-color 0.8s;
	border-radius: 4px;
	overflow:hidden;
  }
  .linkBox {
    width: 32%;
    height: 12.5em;
    float: left;
    margin-right: 1%;
    margin-top: 0px;
    margin-bottom: 15px;
    position: relative;
  }
  .linkBox p,
  .linkSplitContainer p {
    font-size: 0.8em;
    line-height: 1em;
  }
  #members:hover {
    background-color: #f8c026;
    color: #003567;
  }
  #research:hover {
    background-color: #f8c026;
    color: #003567;
  }
  .linkHead {
    color: /*#fff*/ inherit;
    font-weight: normal;
    font-size: 1em;
    position: absolute;
    width: 80%;
    top: 2%;
    left: 4%;
    text-align: left;
  }
  .linkSplitContainer {
    width: 33%;
    height: 12.5em;
    float: left;
    padding: 0%;
    margin-right: 0%;
    margin-top: 0px;
    display: block;
  }
  .linkSplitContainer div#vacancy,
  .linkSplitContainer div#donate {
    display: block;
    float: left;
    width: 100%;
    height: 49.2%;
    margin: 0;
    position: relative;
  }
  .linkSplitContainer div#vacancy:hover,
  .linkSplitContainer div#donate:hover {
    background-color: #f8c026;
    color: #003567;
  }
  .linkBox a,
  .linkSplitContainer a {
    top: 0;
    padding: 0;
    margin: 0;
  }
  #members {
    background-color: #3483cf;
    border: solid 1px #003567;
  }
  #research {
    background-color: #5d97cf;
    border: solid 1px #003567;
  }
  .linkSplitContainer div#donate {
    background-color: #003567;
    border: solid 1px #003567;
    margin-top: 1%;
  }
  .linkSplitContainer div#vacancy {
    background-color: #00a46a;
    border: solid 1px #003567;
  }
  
  
.linkCaption {font-size:0.7em; top:4em; position:absolute; padding:0.5em; text-align:left; line-height:1.2em;}
.wp-caption {font-size:inherit;}  
  
  
  .page label {
    color: white;
  }
  .fullwidth {
    width: 100%;
  }
  /* ========================
     INTERMEDIATE Sidebar
    ======================== */
  aside {
    margin-top: 0em;
  }
  /* ====================
      INTERMEDIATE: footer
     ==================== */
  footer {
    font-size: 1em;
  }
  #address {
    float: left;
    padding-left: 10px;
    width: 55%;
  }
  #telecoms {
    display: block;
    float: right;
    width: 40%;
    padding-right: 5px;
  }
  #footerLinks {
    text-align: center;
    clear: both;
    padding-top: 10px;
    font-size: 10pt;
    width: 100%;
    display: block;
  }
  #footerLinks a {
    display: inline;
    width: auto;
    color: white;
    padding: 0px 10px;
    border: none;
    border-right: solid white 1px;
  }
  #footerLinks a:last-child {
    border: none;
  }
  #copyright {
    height: 15px;
    color: white;
    background-color: #003567;
    text-align: center;
    padding-top: 5px;
    font-size: 8pt;
  }
}
@media only screen and (min-width: 768px) {
  /* ====================
      WIDE: CSS3 Effects
     ==================== */
  .main-container {
    background-attachment: fixed;
  }
	 
	 
	 
  /*=======================
  	Wide Header
  ===========================*/
  .header-container {
    -webkit-box-shadow: 0 5px 10px #aaa;
    -moz-box-shadow: 0 5px 10px #aaa;
    box-shadow: 0 5px 10px #aaa;
  }
  /*=======================
  	Wide Sidebar
  	=======================*/
  #sidebar aside {
    border-left: solid #f8c026 1px;
    border-right: solid #f8c026 1px;
    border-bottom: solid #f8c026 1px;
  }
  .main #sidebar {
    float: right;
    width: 25%;
  }
  #newsHeadlines {
    float: right;
    margin-top: 0px;
  }
  #sidebar aside#newsHeadlines {
    margin-top: 0px;
  }
  /* ============
      WIDE main content
     ============ */
  .main article {
    float: left;
    width: 70%;
  }
  #flexContainer {
    width: 100%;
    position: relative;
    float: left;
  }
  
  .linkCaption {font-size:0.8em; line-height:1.2em; top:3.5em; position:absolute; padding:0.5em; text-align:left;}
  
  
}
@media only screen and (min-width: 1140px) {
  /* ===============
      Maximal Width
     =============== */
  .wrapper {
    width: 1026px;
    /* 1140px - 10% for margins */
  
    margin: 0 auto;
  }
  
  .linkCaption {line-height:1.4em;}
}
/* ==========================================================================
   Helper classes
   ========================================================================== */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  *text-indent: -9999px;
}
.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}
.hidden {
  display: none !important;
  visibility: hidden;
}
.assistive-text,
.screen-reader-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.assistive-text.focusable:active,
.assistive-text.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
.invisible {
  visibility: hidden;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
/*clearfix on education content*/
.edu-content-block:before,
.edu-content-block:after {
  content: " ";
  display: table;
}
.edu-content-block:after {
  clear: both;
}
.edu-content-block {
  *zoom: 1;
}
/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
  
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
       * Don't show links for images, or javascript/internal links
       */
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
    /* h5bp.com/t */
  
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page  {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  .printhide {
    display: none;
  }
}
/*
RSLIDES
Responsive Slider

*/
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
}
/*==================================================
  
  Slideshow CSS for all media
  
  =====================================================*/
#flexContainer ul.rslides_tabs {
  z-index: 5;
  list-style: none;
  padding: 0px;
  margin: 0px;
}
#flexContainer ul.rslides_tabs li {
  display: block;
  float: left;
  background-color: black;
  color: white;
  width: 20%;
  position: relative;
  opacity: 0.7;
  text-align: center;
}
#flexContainer ul.rslides_tabs li a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: white;
  transition: background-color 0.5s ease;
}
#flexContainer ul.rslides_tabs li a:hover {
  background-color: #f8c026;
}

#flexContainer ul.rslides_tabs li.rslides_here a{background-color: #f8c026; transition: background-color 0.5s ease;}
/*==================================================
  
  Tooltips CSS for all media
  
  =====================================================*/
/* 
	Required Styles
*/
#aToolTip {
  position: absolute !important;
  display: none;
  z-index: 50000;
}
#aToolTip .aToolTipContent {
  position: relative;
  margin: 0;
  padding: 0;
}
/* 
	END: Required Styles
*/
/**
	Default Theme
*/
.defaultTheme {
  border: 1px solid #f8c026;
  background: #5d97cf;
  color: #fff;
  margin: 0;
  padding: 2px 6px;
  font-size: 0.9em;
  -moz-border-radius: 12px 12px 12px 0;
  -webkit-border-radius: 12px 12px 12px 0;
  -khtml-border-radius: 12px 12px 12px 0;
  border-radius: 12px 12px 12px 0;
  -moz-box-shadow: 2px 2px 5px #111;
  /* for Firefox 3.5+ */

  -webkit-box-shadow: 2px 2px 5px #111;
  /* for Safari and Chrome */

  box-shadow: 2px 2px 5px #111;
  /* for Safari and Chrome */

}
.defaultTheme #aToolTipCloseBtn {
  display: block;
  height: 18px;
  width: 18px;
  background: url(../images/closeBtn.png) no-repeat;
  text-indent: -9999px;
  outline: none;
  position: absolute;
  top: -20px;
  right: -30px;
  margin: 2px;
  padding: 4px;
}

/********************************************
Fixes for Less Than IE8
*********************************************/
html div .juiz_last_tweet_inside {background-color:#003567;}
.lt-ie9 .juiz_last_tweet_tweetlist { background-color:transparent;height:300px; overflow:scroll !important;}
 .lt-ie9 .juiz_last_tweet_inside {overflow:hidden;}
.lt-ie8 #flexContainer ul.rslides_tabs li  {display:none;}
.lt-ie9 #sub_icons{width:100%; display:block; clear:both;}
.lt-ie9 .main-container{background-image:url('img/theSoundTiled.jpg');background-repeat:repeat-x; background-position:top; background-color:#102c5e;}
.lt-ie8 .linkCaption {display:none;}
/***********************************************************************************************
	SMARTMENUS
	*************************************************************************************************/
/* SmartMenus Core CSS (it's not recommended editing this)
===============================================================*/
.js {
  /*
---------------------------------------------------------------
  Note that styles you apply to the main menu items are inherited by the sub menus items too.
  If you'd like to avoid this, you could use child selectors (not supported by IE6) - for example:
  .sm-blue > li > a { ... } instead of .sm-blue a { ... }
---------------------------------------------------------------*/

  /* Menu box
===================*/

  /* for vertical main menu subs and 2+ level horizontal main menu subs round all corners */

  /* Menu items
===================*/

  /* current items - add the class manually to some item or check the "markCurrentItem" script option */

  /* round the left corners of the first item for horizontal main menu 
	.sm-blue > li:first-child > a {
		-moz-border-radius:8px 0 0 8px;
		-webkit-border-radius:8px 0 0 8px;
		border-radius:8px 0 0 8px;
	}*/

  /* round the corners of the first and last items for vertical main menu */

  /* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." -> "more..." in the default download package
===================*/

  /* Sub menu indicators
===================*/

  /* Items separators
===================*/

  /*
---------------------------------------------------------------
  Responsiveness
  These will make the sub menus collapsible when the screen width is too small.
---------------------------------------------------------------*/

  /* decrease horizontal main menu items left/right padding to avoid wrapping */

}
.js .sm,
.js .sm ul,
.js .sm li {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: normal;
  direction: ltr;
}
.js ul.sm li {
  position: relative;
}
.js ul.sm a {
  position: relative;
  display: block;
}
.js ul.sm a.disabled {
  cursor: default;
}
.js ul.sm ul {
  position: absolute;
  top: -999999px;
  left: -800px;
  width: 100px;
}
.js ul.sm li {
  float: left;
}
.js ul.sm-rtl {
  direction: rtl;
}
.js ul.sm-rtl li {
  float: right;
}
.js ul.sm ul li,
.js ul.sm-vertical li {
  float: none;
}
.js ul.sm a {
  white-space: nowrap;
}
.js ul.sm ul a,
.js ul.sm-vertical a {
  white-space: normal;
}
.js * html ul.sm-vertical li {
  float: left;
  width: 100%;
}
.js * html ul.sm-vertical ul li {
  float: none;
  width: auto;
}
.js *:first-child + html ul.sm-vertical > li {
  float: left;
  width: 100%;
}
.js ul.sm ul.sm-nowrap > li > a {
  white-space: nowrap;
}
.js ul.sm:after {
  content: "\00a0";
  display: block;
  height: 0;
  font: 0/0 serif;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}
.js * html ul.sm {
  height: 1px;
}
.js *:first-child + html ul.sm {
  min-height: 1px;
}
.js ul.sm li *,
.js ul.sm li *:before,
.js ul.sm li *:after {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.js ul.sm {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.js .sub-menu {
  z-index: 99999;
}
.js .menu {
  z-index: 99999;
}
.js .sm-blue {
  background-color: transparent;
  z-index: 999;
}
.js .sm-blue-vertical {
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.js .sm-blue ul {
  border: 1px solid #a9a9a9;
  padding: 7px 0;
  background: #fff;
  -moz-border-radius: 0 0 4px 4px;
  -webkit-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
  -moz-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
}
.js .sm-blue-vertical ul,
.js .sm-blue ul ul {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.js .sm-blue a {
  padding: 13px 24px;
  color: #fff;
  font-size: 18px;
  line-height: 23px;
  font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.js .sm-blue a:hover,
.js .sm-blue a:focus,
.js .sm-blue a:active,
.js .sm-blue a.highlighted {
  background-color: #3483cf;
  /* Old browsers */

  color: #fff;
}
.js .sm-blue-vertical a {
  padding: 9px 40px 8px 23px;
  background: #3193c0;
  /* Old browsers */

}
.js .sm-blue ul a {
  padding: 9px 40px 8px 23px;
  background: transparent;
  color: #247eab;
  font-size: 16px;
  text-shadow: none;
}
.js .sm-blue ul a:hover,
.js .sm-blue ul a:focus,
.js .sm-blue ul a:active,
.js .sm-blue ul a.highlighted {
  background: #3483cf;
  /* Old browsers */

  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.js .sm-blue a.current,
.js .sm-blue a.current:hover,
.js .sm-blue a.current:focus,
.js .sm-blue a.current:active,
.js .sm-blue ul a.current,
.js .sm-blue ul a.current:hover,
.js .sm-blue ul a.current:focus,
.js .sm-blue ul a.current:active {
  background: #3483cf;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.js .sm-blue-vertical > li:first-child > a {
  -moz-border-radius: 8px 8px 0 0;
  -webkit-border-radius: 8px 8px 0 0;
  border-radius: 8px 8px 0 0;
}
.js .sm-blue-vertical > li:last-child > a {
  -moz-border-radius: 0 0 8px 8px;
  -webkit-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;
}
.js .sm-blue span.scroll-up,
.js .sm-blue span.scroll-down {
  position: absolute;
  display: none;
  visibility: hidden;
  overflow: hidden;
  background: #ffffff;
  height: 20px;
  /* width and position will be automatically set by the script */

}
.js .sm-blue span.scroll-up-arrow,
.js .sm-blue span.scroll-down-arrow {
  position: absolute;
  top: -2px;
  left: 50%;
  margin-left: -8px;
  /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */

  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 8px;
  /* tweak size of the arrow */

  border-style: dashed dashed solid dashed;
  border-color: transparent transparent #247eab transparent;
}
.js .sm-blue span.scroll-down-arrow {
  top: 6px;
  border-style: solid dashed dashed dashed;
  border-color: #247eab transparent transparent transparent;
}
.js .sm-blue a span.sub-arrow {
  position: absolute;
  bottom: 2px;
  left: 50%;
  margin-left: -5px;
  /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */

  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 5px;
  /* tweak size of the arrow */

  border-style: solid dashed dashed dashed;
  border-color: #a4cde1 transparent transparent transparent;
}
.js .sm-blue-vertical a span.sub-arrow,
.js .sm-blue ul a span.sub-arrow {
  bottom: auto;
  top: 50%;
  margin-top: -5px;
  right: 15px;
  left: auto;
  margin-left: 0;
  border-style: dashed dashed dashed solid;
  border-color: transparent transparent transparent #a4cde1;
}
.js .sm-blue li {
  border-left: 1px solid #3483cf;
}
.js .sm-blue li:first-child,
.js .sm-blue-vertical li,
.js .sm-blue ul li {
  border-left: 0;
}
@media screen and (max-width: 850px) {
  .js .sm-blue:not(.sm-blue-vertical) > li > a {
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media screen and (max-width: 750px) {
  .js .sm-blue:not(.sm-blue-vertical) > li > a {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media screen and (max-width: 640px) {
  .js {
    /* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */
  
    /* Uncomment this rule to disable completely the sub menus for small screen devices */
  
    /*.sm-blue ul, .sm-blue span.sub-arrow, .sm-blue iframe {
  		display:none !important;
  	}*/
  
    /* Menu box
  ===================*/
  
    /* Menu items
  ===================*/
  
    /* add some text indentation for the 2+ level sub menu items */
  
    /* round the corners of the first and last items */
  
    /* presume we have 4 levels max */
  
    /* highlighted items, don't need rounding since their sub is open */
  
    /* Sub menu indicators
  ===================*/
  
    /* Hide sub indicator "+" when item is expanded - we enable the item link when it's expanded */
  
    /* Items separators
  ===================*/
  
  }
  .js ul.sm-blue {
    width: auto !important;
  }
  .js ul.sm-blue ul {
    display: none;
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .js ul.sm-blue > li {
    float: none;
  }
  .js ul.sm-blue > li > a,
  .js ul.sm-blue ul.sm-nowrap > li > a {
    white-space: normal;
  }
  .js ul.sm-blue iframe {
    display: none;
  }
  .js .sm-blue {
    background: transparent;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }
  .js .sm-blue ul {
    border: 0;
    padding: 0;
    background: #fff;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .js .sm-blue ul ul {
    /* darken the background of the 2+ level sub menus and remove border rounding */
  
    background: rgba(100, 100, 100, 0.1);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
  }
  .js .sm-blue a {
    padding: 10px 5px 10px 28px !important;
    /* add some additional left padding to make room for the sub indicator */
  
    background: #3483cf !important;
    /* Old browsers */
  
    color: #fff !important;
  }
  .js .sm-blue ul a {
    background: transparent !important;
    color: #247eab !important;
    text-shadow: none !important;
  }
  .js .sm-blue a.current {
    background: #006892 !important;
    /* Old browsers */
  
    color: #fff !important;
  }
  .js .sm-blue ul a {
    border-left: 8px solid transparent;
  }
  .js .sm-blue ul ul a {
    border-left: 16px solid transparent;
  }
  .js .sm-blue ul ul ul a {
    border-left: 24px solid transparent;
  }
  .js .sm-blue ul ul ul ul a {
    border-left: 32px solid transparent;
  }
  .js .sm-blue ul ul ul ul ul a {
    border-left: 40px solid transparent;
  }
  .js .sm-blue > li:first-child > a {
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
  }
  .js .sm-blue > li:last-child > a,
  .js .sm-blue > li:last-child > ul > li:last-child > a,
  .js .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a,
  .js .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a,
  .js .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a,
  .js .sm-blue > li:last-child > ul,
  .js .sm-blue > li:last-child > ul > li:last-child > ul,
  .js .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul,
  .js .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul,
  .js .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul {
    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
  }
  .js .sm-blue > li:last-child > a.highlighted,
  .js .sm-blue > li:last-child > ul > li:last-child > a.highlighted,
  .js .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted,
  .js .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted,
  .js .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
  }
  .js .sm-blue a span.sub-arrow,
  .js .sm-blue ul a span.sub-arrow {
    top: 50%;
    margin-top: -9px;
    right: auto;
    left: 6px;
    margin-left: 0;
    width: 17px;
    height: 17px;
    font: bold 16px/16px monospace !important;
    text-align: center;
    border: 0;
    text-shadow: none;
    background: rgba(0, 0, 0, 0.1);
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
  }
  .js .sm-blue a.highlighted span.sub-arrow {
    display: none !important;
  }
  .js .sm-blue li {
    border-left: 0;
  }
  .js .sm-blue ul li {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }
  .js .sm-blue ul li:first-child {
    border-top: 0;
  }
}
/*end of smartmenu*/
/* Menu display without javascript*/
.no-js .header-container #menu ul,
.no-js .header-container #menu > ul > li {
  display: block;
}
.no-js .header-container #menu > ul > li {
  width: 18%;
  float: left;
  position: relative;
  padding: 1%;
  font-weight: bold;
}
.no-js .header-container #menu > ul > li > ul > li {
  display: list-item;
  border-bottom: solid #5d97cf 1px;
  font-weight: normal;
}
.no-js .header-container #menu a {
  display: block;
  text-decoration: none;
}
.no-js .header-container #menu a:hover {
  background-color: #5d97cf;
}
/*no-js fix for small screens*/
@media only screen and (max-width: 480px) {
  .no-js .header-container #menu > ul > li {
    width: 100%;
  }
}

.no-touch #education ul.menu > li  span  a{background-color:#3483cf; width:38px; padding:1px 3px;}

 /* Prevent height distortion in IE8. */
@media \0screen {.lt-ie9 .page img, .lt-ie9 .post img { width: auto; }}