/* ***
  international-style.css
Used for: Int'l, library, learning centre and CTLR
***/


/*===============================================================
CSS Stylesheet for Vancouver Community College
Copyright 2014 
Written by Michael Mason on behalf of TERMINALFOUR
www.terminalfour.com
=================================================================*/
/* Bootstrap */
/*
 * Bootstrap v2.3.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

/* 
  2023/2024 - brand reskin changes

  1. Navy blue - #002b52 >> dark green - #043D2B 

  2. Resposive untilities:
     Phone  0px <= 768px     >> 0px <= 768px
     Tablet 768px <= 960px   >> 769px <= 992px 

  3. Breadcrumbs dividers 
     .breadcrumb ul.inline li
     .breadcrumb ul.inline li a
     .breadcrumb ul.inline li+li:before 
*/

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic);/*--googlefont:Source Sans Pro---*/
@import url(https://fonts.googleapis.com/css?family=Roboto:700); /*---googlefont: RobotoCondensed fior H1---*/
/* Edmond Sans font */
@font-face {
  font-family: "EdmondSans";
  font-weight: normal;
  src: url(/media/vancouver-community-college/style-assets/fonts/regular/edmondsans-regular-webfont.eot);
  /* IE 9 */
  src: url(/media/vancouver-community-college/style-assets/fonts/regular/edmondsans-regular-webfont.eot#iefix) format("embedded-opentype"), url(/media/vancouver-community-college/style-assets/fonts/regular/edmondsans-regular-webfont.woff) format("woff"), url(/media/vancouver-community-college/style-assets/fonts/regular/edmondsans-regular-webfont.ttf) format("truetype"), url(/media/vancouver-community-college/style-assets/fonts/regular/edmondsans-regular-webfont.svg) format("svg"); }

@font-face {
  font-family: "EdmondSans";
  font-weight: 500;
  src: url(/media/vancouver-community-college/style-assets/fonts/medium/edmondsans-medium-webfont.eot);
  /* IE 9 */
  src: url(/media/vancouver-community-college/style-assets/fonts/medium/edmondsans-medium-webfont.eot#iefix) format("embedded-opentype"), url(/media/vancouver-community-college/style-assets/fonts/medium/edmondsans-medium-webfont.woff) format("woff"), url(/media/vancouver-community-college/style-assets/fonts/medium/edmondsans-medium-webfont.ttf) format("truetype"), url(/media/vancouver-community-college/style-assets/fonts/medium/edmondsans-medium-webfont.svg) format("svg"); }

@font-face {
  font-family: "EdmondSans";
  font-weight: bold;
  src: url(/media/vancouver-community-college/style-assets/fonts/bold/edmondsans-bold-webfont.eot);
  /* IE 9 */
  src: url(/media/vancouver-community-college/style-assets/fonts/bold/edmondsans-bold-webfont.eot#iefix) format("embedded-opentype"), url(/media/vancouver-community-college/style-assets/fonts/bold/edmondsans-bold-webfont.woff) format("woff"), url(/media/vancouver-community-college/style-assets/fonts/bold/edmondsans-bold-webfont.ttf) format("truetype"), url(/media/vancouver-community-college/style-assets/fonts/bold/edmondsans-bold-webfont.svg) format("svg"); }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Source Sans Pro', 'EdmondSans',  'Helvetica Neue', Helvetica, Arial, sans-serif, 'Open Sans',  'Ubuntu', 'Roboto';  
  font-size: 17px;/*--was-14----*/font-weight:400;
  line-height: 1.5em;/*---was-20px-----*/
  color: #4d4d4d;
  background-color: white; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

audio:not([controls]) { display: none; }

a { color: #327ec1;/*---hz--from:#004278--*/ text-decoration: none; }
a:hover, a:focus { color: #51A100;/*---hz--from:#004278--*/ text-decoration: underline; } /*haziel: from "underline" to "none" - remove underline on mouseover of matrix promo homepage...but not it's not it.*/
a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
a:hover, a:active { outline: 0; }

sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

img {
  /* Responsive images (ensure images don't scale beyond their parents) */
  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */
  width: auto\9;
  /* IE7-8 need help adjusting responsive images */
  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic; }

.img-rounded {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px; }
/* Image caption */
p.img-caption { font-size: 0.941em; /* 16px */ margin-top: 8px ;}


/* For Google maps */
#map_canvas img, .google-maps img { max-width: none; }

button, input, select, textarea { margin: 0; font-size: 100%; vertical-align: middle; }
button, input { *overflow: visible; line-height: normal; }
button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { cursor: pointer; }
input[type="search"] { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
textarea { overflow: auto; vertical-align: top; }

@media print {
  * { text-shadow: none !important; color: #000 !important; background: transparent !important; box-shadow: none !important; }
  a,a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .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; }
  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; } 
}/* End @print */

/* If iframe is in a centered block */  
.centered iframe { padding: 0 17.44186046511628% ; /* 150px */ }


/**  ==============  **/
/**  Bootstrap grid  **/
/**  ==============  **/
.row { margin-left: 0px; *zoom: 1; }
.row:before, .row:after { display: table; content: ""; line-height: 0; }
.row:after, .row:before { clear: both; }

[class*="span"] { float: left; min-height: 1px; margin-left: 20px; }
.container { margin-right: auto; margin-left: auto; *zoom: 1; }
.container:before, .container:after { display: table; content: ""; line-height: 0; }
.container:after { clear: both; }
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 940px; }
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
.span4 { width: 300px; }
.span5 { width: 380px; }
.span6 { width: 460px; }
.span7 { width: 540px; }
.span8 { width: 620px; }
.span9 { width: 700px; }
.span10 { width: 780px; }
.span11 { width: 860px; }
.span12 { width: 940px; }

.span2 { width: 14.8936170212766%; /* 140px / 940px */  }
.span3 { width: 23.40425531914894%; /* 220px / 940px */  }
.span4 { width: 31.91489361702128%; /* 300px / 940px */ } 
.span6 { width: 48.93617021276596%; /* 460px / 940px */ } 
.span7 { width: 57.4468085106383%; /* 540px / 940px */ } 
.span8 { width: 65.95744680851064%; /* 620px / 940px */ } 
.span9 { width: 74.46808510638298%; /* 700px / 940px */ } 
.span12 { width: 100%; /* 940px / 940px */ } 

[class*="span"] { margin-left: 2.127659574468085%; }
[class*="span"]:first-child { margin-left: 0px !important; }
[class*="span"].centered { margin-left: auto !important; margin-right: auto; float: none; }


.offset1 { margin-left: 100px; }
.offset2 { margin-left: 180px; }
.offset3 { margin-left: 260px; }
.offset4 { margin-left: 340px; }
.offset5 { margin-left: 420px; }
.offset6 { margin-left: 500px; }
.offset7 { margin-left: 580px; }
.offset8 { margin-left: 660px; }
.offset9 { margin-left: 740px; }
.offset10 { margin-left: 820px; }
.offset11 { margin-left: 900px; }
.offset12 { margin-left: 980px; }

.offset1 { margin-left: 10.63829787234043%;  /* 100px/940px */}
.offset2 { margin-left: 19.14893617021277%; /* 180px/940px */}
.offset3 { margin-left: 27.65957446808511%; /* 260px/940px */}
.offset4 { margin-left: 36.17021276595745%; /* 340px/940px */}
.offset5 { margin-left: 44.68085106382979%; /* 420px/940px */}
.offset6 { margin-left: 53.19148936170213%; /* 500px/940px */}
.offset7 { margin-left: 61.70212765957447%; /* 580px/940px */}
.offset8 { margin-left: 70.21276595744681%; /* 660px/940px */}
.offset9 { margin-left: 78.72340425531915%; /* 740px/940px */}
.offset10 { margin-left: 87.23404255319149%; /* 820px/940px */}

[class*="span"].hide, .row-fluid [class*="span"].hide { display: none; }
[class*="span"].pull-right, .row-fluid [class*="span"].pull-right { float: right; }

@media screen and (max-width: 480px) {
  [class*='span'] { width: 100%; float: none; clear: both; margin: 0px; margin-bottom: 10px ;}
}

/*===============================
Grid for this site
=================================*/
.container { width: 940px; max-width: 940px ; }
.container.main-body { padding-bottom: 40px; }

/* Columns in use */
.span140 { width: 140px; }
.span260 { width: 260px; }
.span685 { width: 625px; }
.span820 { width: 820px; }
.span860 { width: 860px; }
.span900 { width: 900px; }

/* > 1024px make flexible */
@media only screen and (max-width: 1024px) {
  #content-wrap { min-width: 95.83333333333333%; /* 920 / 960 */ padding-left: 2.083333333333333%; /* 20px / 960px */ padding-right: 2.083333333333333%; /* 20px / 960px */} 
  .container { width: 100% ; max-width: 940px ;}
  .span860 { width: 100%; }
  .news-landing .span860 { width: 91.48936170212766%; }
}
@media screen and (max-width: 940px) {
  .back-to-boxes.visible {display: none !important;}
  .news-landing .back-to-boxes.visible {display: block !important;}
} 
@media screen and (max-width: 768px) {
  .international-homepage .container { width: 93.75% !important; }
  .container.main-body { padding-bottom: 20px; }
  .span140, .span685, .span820, .span860, .news-landing .span860, .span900 { width: 100%; }
  [class*='span'] { width: 100%; float: none; clear: both; margin: 0px; margin-bottom: 0px ;}
  #mtx-slideshow.span12 { margin-bottom: 0px;} 
  #content-wrap { width: auto ; min-width: 0 ;} 
  .news-landing .back-to-boxes.visible {display: none !important;}
}

/*==============================*/
/** Base typography, lists etc **/
/*==============================*/
p { margin: 0 0 10px; }
.lead { margin-bottom: 20px; font-size: 21px; font-weight: 200; line-height: 30px; }
small { font-size: 85%; }
strong { font-weight: bold; }
.stronger { font-weight: 500;}
em { font-style: italic; }
cite { font-style: normal; }
.muted { color: #687c87; }
a.muted:hover, a.muted:focus { color: #52626a; }
.text-warning { color: #c09853; }
a.text-warning:hover, a.text-warning:focus { color: #a47e3c; }
.text-error { color: #b94a48; }
a.text-error:hover, a.text-error:focus { color: #953b39; }
.text-info { color: #3a87ad; }
a.text-info:hover, a.text-info:focus { color: #2d6987; }
.text-success { color: #468847; }
a.text-success:hover, a.text-success:focus { color: #356635; }
/* Text alignment classes */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
/* Headings */
h1 {font-family: 'Roboto Condensed','Source Sans Pro',Arial,'EdmondSans', 'Helvetica Neue', Helvetica,  sans-serif;} /*---hz-roboto---*/
h1, h2, h3, h4, h5, h6 { 
  margin: 10px 0;
  font-family: font-family: 'Roboto Condensed','Source Sans Pro',Arial,'EdmondSans', 'Helvetica Neue', Helvetica,  sans-serif;/*-----was inherit-----*/
  font-weight: bold;
  line-height: 1.5em; /*--was 20px--*/
  color: inherit;
  text-rendering: optimizelegibility; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-weight: normal; line-height: 1; color: #687c87; }
h1, h2, h3 { line-height: 40px; }
h1 { font-size: 38.5px; }
h2 { font-size: 31.5px; }
h3 { font-size: 24.5px; }
h4 { font-size: 17.5px; }
h4.plainheader { font-size: 17.5px; margin:0; padding:0; font-weight:normal;display: inline;} /*for visually impaired who needs headers for JAW reader*/
h5 { font-size: 14px; }
h6 { font-size: 11.9px; }
h1 small { font-size: 24.5px; }
h2 small { font-size: 17.5px; }
h3 small { font-size: 14px; }
h4 small { font-size: 14px; }
.page-header { padding-bottom: 9px; margin: 20px 0 30px; border-bottom: 1px solid #7d7d7d; }

/* Lists */
ul, ol { padding: 0; margin: 0 0 10px 25px; }
ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; }
li { line-height: 1.5em; }/*hz: from 20px*/
/* Plain lists - no bullets or numbering */
ul.unstyled, ol.unstyled { margin-left: 0; list-style: none; }
/* Inline lists */
ul.inline, ol.inline { margin-left: 0; list-style: none; }
ul.inline > li, ol.inline > li { 
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
  padding-left: 5px;
  padding-right: 5px; 
}
/* Definition lists */
dl { margin-bottom: 20px; }
dt, dd { line-height: 1.5em; }/*--was 20px--*/
dt { font-weight: bold; }
dd { margin-left: 10px; }
/* Horizontal dls */
.dl-horizontal { *zoom: 1; }
.dl-horizontal:before, .dl-horizontal:after { display: table; content: ""; line-height: 0; }
.dl-horizontal:after { clear: both; }
.dl-horizontal dt {
  float: left;
  width: 160px;
  clear: left;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}
.dl-horizontal dd { margin-left: 180px; }
/* Misc typography */
hr { margin: 20px 0; border: 0; border-top: 1px solid #7d7d7d; border-bottom: 1px solid white; }
abbr[title], abbr[data-original-title] { cursor: help; border-bottom: 1px dotted #687c87; }
abbr.initialism { font-size: 90%; text-transform: uppercase; }
blockquote { padding: 0 0 0 15px; margin: 0 0 20px; /*border-left: 5px solid #7d7d7d;*/ }
blockquote p { margin-bottom: 0; /*font-size: 17.5px; font-weight: 300; line-height: 1.25;*/ }
blockquote small { display: block; line-height: 1.5em;/*--was 20px--*/ color: #687c87; } 
blockquote small:before { content: '\2014 \00A0'; }
blockquote.pull-right { float: right; padding-right: 15px; padding-left: 0; border-right: 5px solid #7d7d7d; border-left: 0; }
blockquote.pull-right p, blockquote.pull-right small { text-align: right; }
blockquote.pull-right small:before { content: ''; }
blockquote.pull-right small:after { content: '\00A0 \2014'; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
address { display: block; margin-bottom: 20px; font-style: normal; line-height: 1.5em; }/*--was 20px--*/

/*========================================================**/
/*            Forms base styling              **/
/** See http://getbootstrap.com/2.3.2/base-css.html#forms **/
/*========================================================**/
form { margin: 0 0 20px; }
fieldset { padding: 0; margin: 0; border: 0; }
legend { display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: 40px; color: #4d4d4d; border: 0; border-bottom: 1px solid #e5e5e5; }
legend small { font-size: 15px; color: #687c87; }
label, input, button, select, textarea { font-size: 14px; font-weight: normal; line-height: 1.5em; }
input, button, select, textarea { font-family:  'Source Sans Pro','EdmondSans', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
label { display: block; margin-bottom: 5px; }
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
  display: inline-block;
  height: 20px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5em;/*--was 20px--*/
  color: #4b4c4f;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  vertical-align: middle;
}
input, textarea, .uneditable-input { width: 206px; }
textarea { height: auto; }
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"],
input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"],
.uneditable-input {
  background-color: white;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s; 
}
textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus,
input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus,
input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
}
input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; *margin-top: 0; /* IE7 */ margin-top: 1px \9; /* IE8-9 */ line-height: normal; }
input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] { width: auto; }
select, input[type="file"] { 
  height: 30px;
  /* In IE7, the height of the select element cannot be changed by height, only font-size */
  *margin-top: 4px;
  /* For IE7, add top margin to align select with labels */
  line-height: 30px;
}
select { width: 220px; border: 1px solid #cccccc; background-color: white; }
select[multiple], select[size] { height: auto; }
select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; 
}
.uneditable-input, .uneditable-textarea {
  color: #687c87;
  background-color: #fcfcfc;
  border-color: #cccccc;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
  cursor: not-allowed; 
}
.uneditable-input {
  overflow: hidden;
  white-space: nowrap; 
}
.uneditable-textarea {
  width: auto;
  height: auto; 
}
input:-moz-placeholder, textarea:-moz-placeholder { color: #687c87; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #687c87; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #687c87; }
.radio, .checkbox { min-height: 20px; padding-left: 20px; }
.radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; margin-left: -20px; }
.controls > .radio:first-child, .controls > .checkbox:first-child { padding-top: 5px; }
.radio.inline, .checkbox.inline {
  display: inline-block;
  padding-top: 5px;
  margin-bottom: 0;
  vertical-align: middle; 
}
.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { margin-left: 10px; }
.input-mini { width: 60px; }
.input-small { width: 90px; }
.input-medium { width: 150px; }
.input-large { width: 210px; }
.input-xlarge { width: 270px; }
.input-xxlarge { width: 530px; }

/* Form elements which use spanN classes ie use 960 grid widths  */
input[class*="span"], select[class*="span"], textarea[class*="span"],
.uneditable-input[class*="span"], .row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"] { float: none; margin-left: 0; }
.input-append input[class*="span"], .input-append .uneditable-input[class*="span"], .input-prepend input[class*="span"], .input-prepend .uneditable-input[class*="span"],
.row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"],
.row-fluid .input-prepend [class*="span"], .row-fluid .input-append [class*="span"] { display: inline-block; }
input, textarea, .uneditable-input { margin-left: 0; }
.controls-row [class*="span"] + [class*="span"] { margin-left: 20px; }
input.span1, textarea.span1, .uneditable-input.span1 { width: 46px; }
input.span2, textarea.span2, .uneditable-input.span2 { width: 126px; }
input.span3, textarea.span3, .uneditable-input.span3 { width: 206px; }
input.span4, textarea.span4, .uneditable-input.span4 { width: 286px; }
input.span5, textarea.span5, .uneditable-input.span5 { width: 366px; }
input.span6, textarea.span6, .uneditable-input.span6 { width: 446px; }
input.span7, textarea.span7, .uneditable-input.span7 { width: 526px; }
input.span8, textarea.span8, .uneditable-input.span8 { width: 606px; }
input.span9, textarea.span9, .uneditable-input.span9 { width: 686px; }
input.span10, textarea.span10, .uneditable-input.span10 { width: 766px; }
input.span11, textarea.span11, .uneditable-input.span11 { width: 846px; }
input.span12, textarea.span12, .uneditable-input.span12 { width: 926px; }

/* .controls-row should wrap around several input.span elements laid out in a grid. Causes them to float. */
.controls-row { *zoom: 1; }
.controls-row:before, .controls-row:after { display: table; content: ""; line-height: 0; }
.controls-row:after { clear: both; }
.controls-row [class*="span"], .row-fluid .controls-row [class*="span"] { float: left; }
.controls-row .checkbox[class*="span"], .controls-row .radio[class*="span"] { padding-top: 5px; }

input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { cursor: not-allowed; background-color: #7d7d7d; }
input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] { background-color: transparent; }
/* .form-actions wraps around the end form controls eg button type="submit" etc */
.form-actions {
  padding: 19px 20px 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: whitesmoke;
  border-top: 1px solid #e5e5e5;
  *zoom: 1; 
}
.form-actions:before, .form-actions:after { display: table; content: ""; line-height: 0; }
.form-actions:after { clear: both; }

input.search-query {
  padding-right: 14px;
  padding-right: 4px \9;
  padding-left: 14px;
  padding-left: 4px \9;
  /* IE7-8 doesn't have border-radius, so don't indent the padding */
  margin-bottom: 0;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px; 
}

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
  margin-top: 1px; }

/**=========================================================**/
/** ----------------------- Buttons ----------------------- **/
/** See http://getbootstrap.com/2.3.2/base-css.html#buttons **/
/**=========================================================**/
/* Base style */
.btn {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
  padding: 5px 12px;
  margin-bottom: 0;
  font-size: 12.6px;
  line-height: 1.5em;/*--was 20px--*/
  text-align: center;
  text-transform: none;/*----was-uppercase-----*/
  vertical-align: middle;
  cursor: pointer;
  color: #4d4d4d;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  background-color: whitesmoke;
  background-image: -moz-linear-gradient(top, white, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, white, #e6e6e6);
  background-image: -o-linear-gradient(top, white, #e6e6e6);
  background-image: linear-gradient(to bottom, white, #e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFE6E6E6', GradientType=0);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #e6e6e6;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  border: 1px solid #2d2d2d;
  /**border: 0; // Remove the border to prevent IE7's black border on input:focus*/
  /*border-bottom-color: darken($btnBorder, 10%);*/
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  *margin-left: .3em;
  /*@include box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));*/ 
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { color: #4d4d4d; background-color: #e6e6e6; *background-color: #d9d9d9; }
.btn:active, .btn.active { background-color: #cccccc \9; }
.btn:first-child { *margin-left: 0; }
.btn:hover, .btn:focus { 
  color: #4d4d4d; text-decoration: none; background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}
.btn:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
.btn.active, .btn:active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
}
.btn.disabled, .btn[disabled] {
  cursor: default;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.btn-large {
  padding: 11px 19px;
  font-size: 17.5px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px; 
}
.btn-large [class^="icon-"],.btn-large [class*=" icon-"] { margin-top: 4px; }
.btn-small { padding: 2px 10px; font-size: 11.9px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }
.btn-small [class^="icon-"], .btn-small [class*=" icon-"] { margin-top: 0; }
.btn-mini [class^="icon-"], .btn-mini [class*=" icon-"] { margin-top: -1px; }
.btn-mini { padding: 0px 6px; font-size: 10.5px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }
.btn-block { display: block; width: 100%; padding-left: 0; padding-right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.btn-block + .btn-block { margin-top: 5px; }
input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block { width: 100%; }
.btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active, .btn-info.active, .btn-inverse.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary { color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #003278;
  background-image: -moz-linear-gradient(top, #004278, #001a78);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#004278), to(#001a78));
  background-image: -webkit-linear-gradient(top, #004278, #001a78);
  background-image: -o-linear-gradient(top, #004278, #001a78);
  background-image: linear-gradient(to bottom, #004278, #001a78);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF004278', endColorstr='#FF001A78', GradientType=0);
  border-color: #001a78 #001a78 #00092b;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #001a78;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
  color: white;
  background-color: #001a78;
  *background-color: #00145e; }
.btn-primary:active, .btn-primary.active { background-color: #000f45 \9; }
.btn-warning {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #f9a732;
  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  background-image: -o-linear-gradient(top, #fbb450, #f89406);
  background-image: linear-gradient(to bottom, #fbb450, #f89406);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFBB450', endColorstr='#FFF89406', GradientType=0);
  border-color: #f89406 #f89406 #ad6704;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #f89406;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); }
  .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
  color: white;
  background-color: #f89406;
  *background-color: #df8505; }
  .btn-warning:active, .btn-warning.active {
  background-color: #c67605 \9; }

.btn-danger {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #da4e49;
  background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEE5F5B', endColorstr='#FFBD362F', GradientType=0);
  border-color: #bd362f #bd362f #802420;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #bd362f;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); }
  .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
  color: white;
  background-color: #bd362f;
  *background-color: #a9302a; }
  .btn-danger:active, .btn-danger.active {
  background-color: #942a25 \9; }

.btn-success {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #7fac02;
  background-image: -moz-linear-gradient(top, #7fba00, #819705);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7fba00), to(#819705));
  background-image: -webkit-linear-gradient(top, #7fba00, #819705);
  background-image: -o-linear-gradient(top, #7fba00, #819705);
  background-image: linear-gradient(to bottom, #7fba00, #819705);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF7FBA00', endColorstr='#FF819705', GradientType=0);
  border-color: #819705 #819705 #424d03;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #819705;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); }
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
  color: white;
  background-color: #819705;
  *background-color: #6c7e04; 
}
.btn-success:active, .btn-success.active { background-color: #576603 \9; }
.btn-info {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #49afcd;
  background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
  background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF5BC0DE', endColorstr='#FF2F96B4', GradientType=0);
  border-color: #2f96b4 #2f96b4 #1f6377;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #2f96b4;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); }
  .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
  color: white;
  background-color: #2f96b4;
  *background-color: #2a85a0; 
}
.btn-info:active, .btn-info.active {
  background-color: #24748c \9; }

.btn-inverse {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #403f40;
  background-image: -moz-linear-gradient(top, #444444, #3b393a);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#3b393a));
  background-image: -webkit-linear-gradient(top, #444444, #3b393a);
  background-image: -o-linear-gradient(top, #444444, #3b393a);
  background-image: linear-gradient(to bottom, #444444, #3b393a);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF444444', endColorstr='#FF3B393A', GradientType=0);
  border-color: #3b393a #3b393a #141314;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #3b393a;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); 
}
.btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
  color: white;
  background-color: #3b393a;
  *background-color: #2e2c2d; }
.btn-inverse:active, .btn-inverse.active { background-color: #212021 \9; }
button.btn, input[type="submit"].btn { *padding-top: 3px; *padding-bottom: 3px; }
button.btn::-moz-focus-inner, input[type="submit"].btn::-moz-focus-inner { padding: 0; border: 0; }
button.btn.btn-large, input[type="submit"].btn.btn-large { *padding-top: 7px; *padding-bottom: 7px; }
button.btn.btn-small, input[type="submit"].btn.btn-small { *padding-top: 3px; *padding-bottom: 3px; }
button.btn.btn-mini, input[type="submit"].btn.btn-mini { *padding-top: 1px; *padding-bottom: 1px; }
.btn-link, .btn-link:active, .btn-link[disabled] {
  background-color: transparent;
  background-image: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; 
}
.btn-link {
  border-color: transparent;
  cursor: pointer;
  color: #004278;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0; 
}
.btn-link:hover, .btn-link:focus {
  color: #004278;
  text-decoration: underline;
  background-color: transparent; 
}
.btn-link[disabled]:hover, .btn-link[disabled]:focus { color: #4d4d4d; text-decoration: none; }
.btn-group { position: relative; display: inline-block; *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
  font-size: 0;
  vertical-align: middle;
  white-space: nowrap;
  *margin-left: .3em; 
  }
.btn-group:first-child { *margin-left: 0; }
.btn-group + .btn-group { margin-left: 5px; }
.btn-toolbar { font-size: 0; margin-top: 10px; margin-bottom: 10px; }
.btn-toolbar > .btn + .btn, .btn-toolbar > .btn-group + .btn, .btn-toolbar > .btn + .btn-group { margin-left: 5px; }
.btn-group > .btn { position: relative; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover { font-size: 14px; }
.btn-group > .btn-mini { font-size: 10.5px; }
.btn-group > .btn-small { font-size: 11.9px; }
.btn-group > .btn-large { font-size: 17.5px; }
.btn-group > .btn:first-child { margin-left: 0; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px; }
.btn-group > .btn:last-child, .btn-group > .dropdown-toggle { -webkit-border-top-right-radius: 0px; -moz-border-radius-topright: 0px; border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-bottomright: 0px; border-bottom-right-radius: 0px; }
.btn-group > .btn.large:first-child { margin-left: 0; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px; }
.btn-group > .btn.large:last-child, .btn-group > .large.dropdown-toggle {
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topright: 0px;
  border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-radius-bottomright: 0px;
  border-bottom-right-radius: 0px; 
}
.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active { z-index: 2; }
.btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { outline: 0; }
.btn-group > .btn + .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
  -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  *padding-top: 5px;
  *padding-bottom: 5px; 
}
.btn-group > .btn-mini + .dropdown-toggle {
  padding-left: 5px;
  padding-right: 5px;
  *padding-top: 2px;
  *padding-bottom: 2px;
}
.btn-group > .btn-small + .dropdown-toggle { *padding-top: 5px; *padding-bottom: 4px; }
.btn-group > .btn-large + .dropdown-toggle { padding-left: 12px; padding-right: 12px; *padding-top: 7px; *padding-bottom: 7px; }
.btn-group.open .dropdown-toggle { 
  background-image: none;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
}
.btn-group.open .btn.dropdown-toggle { background-color: #e6e6e6; }
.btn-group.open .btn-primary.dropdown-toggle { background-color: #001a78; }
.btn-group.open .btn-warning.dropdown-toggle { background-color: #f89406; }
.btn-group.open .btn-danger.dropdown-toggle { background-color: #bd362f; }
.btn-group.open .btn-success.dropdown-toggle { background-color: #819705; }
.btn-group.open .btn-info.dropdown-toggle { background-color: #2f96b4; }
.btn-group.open .btn-inverse.dropdown-toggle { background-color: #3b393a; }
.btn .caret {margin-top: 8px; margin-left: 0; }
.btn-large .caret { margin-top: 6px; }
.btn-large .caret { border-left-width: 5px; border-right-width: 5px; border-top-width: 5px; }
.btn-mini .caret, .btn-small .caret { margin-top: 8px; }
.dropup .btn-large .caret { border-bottom-width: 5px; }
.btn-primary .caret,
.btn-warning .caret,
.btn-danger .caret,
.btn-info .caret,
.btn-success .caret,
.btn-inverse .caret { border-top-color: white; border-bottom-color: white; }
.btn-group-vertical { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; }
.btn-group-vertical > .btn { display: block; float: none; max-width: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
.btn-group-vertical > .btn + .btn { margin-left: 0; margin-top: -1px; }
.btn-group-vertical > .btn:first-child {
  -webkit-border-radius: 0px 0px 0 0;
  -moz-border-radius: 0px 0px 0 0;
  border-radius: 0px 0px 0 0; 
}
.btn-group-vertical > .btn:last-child { -webkit-border-radius: 0 0 0px 0px; -moz-border-radius: 0 0 0px 0px; border-radius: 0 0 0px 0px;  }
.btn-group-vertical > .btn-large:first-child { -webkit-border-radius: 0px 0px 0 0; -moz-border-radius: 0px 0px 0 0; border-radius: 0px 0px 0 0; } 
.btn-group-vertical > .btn-large:last-child { -webkit-border-radius: 0 0 0px 0px; -moz-border-radius: 0 0 0px 0px; border-radius: 0 0 0px 0px; }
.form-inline input { margin-bottom: 0px ;}
.input-append, .input-prepend { display: inline-block; font-size: 0; margin-bottom: 10px; vertical-align: middle; white-space: nowrap; margin-bottom: 0px ; }
.btn-radius {
 -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}
.input-append .add-on, .input-append .btn, .input-append .btn-group {
  margin-left: -1px;
  vertical-align: top;
}

/** ===================== **/
/** -- Main navigation basics -- **/
/** ===================== **/
.nav {
  margin-left: 0;
  margin-bottom: 20px;
  list-style: none; }
.nav > li > a {
  display: block; }
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #7d7d7d; }
.nav > li > a > img {
  max-width: none; }
.nav > .pull-right {
  float: right; }
.nav-header {
  display: block;
  padding: 3px 15px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.5em;/*--was 20px--*/
  color: #687c87;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-transform: uppercase; }
.nav li + .nav-header {
  margin-top: 9px; }
.nav > .disabled > a {
  color: #687c87; }
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  cursor: default; }
.breadcrumb {
  padding: 8px 15px;
  margin: 10px 0 0px;
  list-style: none;
  background-color: #f5f5f5;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px; 
}
.breadcrumb > li {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
  text-shadow: 0 1px 0 white; 
}
.breadcrumb > li > .divider { padding: 0 5px; color: #ccc; }
.breadcrumb .active { color: #687c87; }
.breadcrumb { background-color: #fff; padding: 0; }
.breadcrumb > a span { margin-right: 10px; }

.breadcrumb ul.inline li {
  /*background: url(/media/vancouver-community-college/style-assets/css/style-images/sprites-23-june-2016.png) 0 -83px no-repeat #fff; /* sprites.png */
  /*
  padding-left: 20px;
  margin-top: 10px; 
  margin-right: 4px ;
  */
  display: inline-block;
  padding: 0;
}

.breadcrumb ul.inline li a { padding: 0 10px; }
.breadcrumb ul.inline li:first-child a { padding-left: 0; }

.breadcrumb ul.inline li+li:before {
    content: "\f054";
    font-family: "Font Awesome 6 Pro";
    color: #445C6A;
    text-align: center;
    vertical-align: middle;
}

/* <= 768px */
@media screen and (max-width: 768px) {
  .breadcrumb {
    margin-right: 0px; 
    margin-bottom: 0px;    
    margin-left: 15px; 
  }
  
  /*
  .breadcrumb ul.inline li {
    
     background-position: 0px -170px;
     padding-right: 0px;
     padding-left: 15px;
     margin-top: 0px; 
  }
  .breadcrumb span.sprite-house {
     background-position: 0px -1640px;
     margin-right: 0px;
     width: 25px;
     height: 20px; 
  } 
  */
}

.breadcrumb { font-size: .8rem; }

@media (min-width: 768px) {
  .breadcrumb { font-size: .9rem; }
}

/* Image thumbnails */
.thumbnails { margin-left: -20px; list-style: none; *zoom: 1; }
.thumbnails:before, .thumbnails:after { display: table; content: ""; line-height: 0; }
.thumbnails:after { clear: both; } 
.row-fluid .thumbnails { margin-left: 0; }
.thumbnails > li { float: left; margin-bottom: 20px; margin-left: 20px; }
.thumbnail {
  display: block;
  padding: 4px;
  line-height: 1.5em; /*--was 20px--*/
  border: 1px solid #ddd;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
a.thumbnail:hover, a.thumbnail:focus { border-color: #004278; -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); }
.thumbnail > img { display: block; max-width: 100%; margin-left: auto; margin-right: auto; }
.thumbnail .caption { padding: 9px; color: #4b4c4f; }
.accordion { margin-bottom: 20px; }
.accordion-group { margin-bottom: 2px; border: 1px solid #e5e5e5; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }
.accordion-heading { border-bottom: 0; }
.accordion-heading .accordion-toggle { display: block; padding: 8px 15px; }
.accordion-toggle { cursor: pointer; }
.accordion-inner { padding: 9px 15px; border-top: 1px solid #e5e5e5; }
.pull-right { float: right; }
.pull-left { float: left; }
.hide { display: none; }
.show { display: block; }
.invisible { visibility: hidden; }
.affix { position: fixed; }
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; }
.clearfix:before, .clearfix:after { clear: both; }
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0; }
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*@import "lib/responsive.scss";*/
/*============================
Table of Contents
==============================

Typography
Global
Sprites (Not yet complete)
Header
Matrix
Content Area
Grid overwrites 
Footer
Content Elements
Lists
Tables
Utility Classes
Background Color Classes
Misc
Homepage Content Elements
Inner pages

3rd Party CSS
-- Dropkick

============================*/
/*============================
T4 Typography overrides
============================*/
h1, h2, h3, h4, h5 { font-weight: normal; }
h1 {font-weight: bold; color: #2d2d2d;font-family: 'Roboto Condensed','Source Sans Pro',Arial,'EdmondSans', 'Helvetica Neue', Helvetica,  sans-serif;letter-spacing: -0.5px;}/*---haziel added to make all h1 roboto----*/
/*---h1,--hz took out---*/ h2, h3 { font-weight: bold; color: #2d2d2d; font-family: font-family: 'Roboto Condensed','Source Sans Pro',Arial,'EdmondSans', 'Helvetica Neue', Helvetica,  sans-serif; letter-spacing: -0.5px; }
#info-pathways h1, #info-pathways h2, .test h1, .test h2 {
  font-family:  'Roboto Condensed','Source Sans Pro',Arial,'EdmondSans', 'Helvetica Neue', Helvetica,  sans-serif;
  font-weight: 400; 
}/*---was-"normal"-hz----*/
#info-pathways h2, .test h2 { font-size: 1.3em; }
h1 { font-size: 1.875em; font-family:  'Roboto Condensed','Source Sans Pro',Arial,'EdmondSans', 'Helvetica Neue', Helvetica,  sans-serif; /* 30px */ }
h2 { font-size: 1.5em; /* 24px */ }
h3 { font-size: 1.250em; /* 20px */ }
.heading-green {
  font-family:  'Source Sans Pro','EdmondSans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  color: #7fba00; 
  font-weight: 600;
  letter-spacing: normal;line-height:1.5em; }

h4 {
  font-size: 1.063em;
  /* 17px  uses EdmondSans*/ }

h5 {
  font-size: 1em;
  /* 16px uses EdmondSans */ }
p {
  line-height: 1.5em;
 font-family:  'Source Sans Pro','EdmondSans', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
/* indent by ~60px */
ol, ul {
  margin-left: 6.38298%;
  /* 60px / 940px */ }

ul li {
  line-height: 1.8em; }

/* Override form elements font size */
label,
input,
button,
select,
textarea {
  font-size: inherit;
  /* 18px from <body> */ }

.small-text {
  font-size: 0.66666666666667em; }

.large-text {
  font-size: 1.2em; }

/* Responsive type */
@media screen and (max-width: 480px) {
  h1, h2 {
  margin: 0.21em 0;
  line-height: 35px; }

  h3, h4 {
  margin: 0.21em 0;
  line-height: 24px; }

  ul li {
  line-height: 1.65em; } }
/*============================
Global
============================*/
body {
  border-top: 5px solid #4d4d4d;
  font-family: 'Source Sans Pro', 'EdmondSans',  'Helvetica Neue', Helvetica, Arial, sans-serif, 'Open Sans', 'Ubuntu', 'Roboto';  font-weight:400;/*haziel google font*/
  font-size: 17px;line-height: 1.5em; /*---was 20px---*/
  /* 16px */
  padding: 0px;}


form {
  margin: 0; }

.row {
  margin-bottom: 20px; }

.row.no-margin {
  margin-bottom: 0; }

/* .btn overrides. Create a $green to $greenDark and $grayLighter to $black gradient */
.btn.greenButton {
  color: #4d4d4d;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  background-color: #7fac02;
  background-image: -moz-linear-gradient(top,#7fba00, #819705); 
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7fba00), to(#819705));
  background-image: -webkit-linear-gradient(top, #7fba00, #819705); 
  background-image: -o-linear-gradient(top, #7fba00, #819705); 
  background-image: linear-gradient(to bottom, #7fba00, #819705); 
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF7FBA00', endColorstr='#FF819705', GradientType=0);
  border-color: #819705 #819705 #424d03;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #819705;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  border: 1px solid #819705; }
  .btn.greenButton:hover, .btn.greenButton:focus, .btn.greenButton:active, .btn.greenButton.active, .btn.greenButton.disabled, .btn.greenButton[disabled] {
  color: #4d4d4d;
  background-color: #819705;
  *background-color: #6c7e04; }
  .btn.greenButton:active, .btn.greenButton.active {
  background-color: #576603 \9; 
}

.btn.blackButton {
  color: white;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  background-color: #5d5d5d;
  background-image: -moz-linear-gradient(top, #7d7d7d, #2d2d2d);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7d7d7d), to(#2d2d2d));
  background-image: -webkit-linear-gradient(top, #7d7d7d, #2d2d2d);
  background-image: -o-linear-gradient(top, #7d7d7d, #2d2d2d);
  background-image: linear-gradient(to bottom, #7d7d7d, #2d2d2d);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF7D7D7D', endColorstr='#FF2D2D2D', GradientType=0);
  border-color: #2d2d2d #2d2d2d #070707;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #2d2d2d;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  border: 1px solid #2d2d2d;
  text-shadow: none; }
  .btn.blackButton:hover, .btn.blackButton:focus, .btn.blackButton:active, .btn.blackButton.active, .btn.blackButton.disabled, .btn.blackButton[disabled] {
  color: white;
  background-color: #2d2d2d;
  *background-color: #202020; }
  .btn.blackButton:active, .btn.blackButton.active {
  background-color: #141414 \9; }

.btn.blueDarkButton {
  background-color: #043D2B; /* #002b52; */
  border: 1px solid #2d2d2d;
  background-image: none; }

/* Break point 460px */
@media screen and (max-width: 480px) {
  body {
  font-size: 95%;
  border-top: none; } 
}
/*============================
Sprites
============================*/
.sprite { background: url(/media/vancouver-community-college/style-assets/css/style-images/sprites-23-june-2016.png) no-repeat top left; } /* sprites.png */
.sprite-arrow-left-dark-jumbo { background-position: 0 0; width: 22px; height: 35px; }
.sprite-arrow-left-small-light { background-position: 0 -55px; width: 9px; height: 11px; }
.sprite-arrow-right-blue-large { background-position: 0 -86px; width: 11px; height: 19px; }
.sprite-arrow-right-dark-jumbo { background-position: 0 -125px; width: 22px; height: 35px; }
.sprite-arrow-right-dark-small { background-position: 0 -180px; width: 9px; height: 11px; }
.sprite-arrow-right-dark-blue-small{ background-position:0 -1663px;width:9px;height:15px; }
.sprite-arrow-right-small-light { background-position: 0 -211px; width: 9px; height: 11px; }
.sprite-calendar-dark-small { background-position: 0 -242px; width: 16px; height: 13px; }
.sprite-calendar-white-large { background-position: 0 -275px; width: 68px; height: 67px; }
.sprite-conversation-white-large { background-position: 0 -362px; width: 109px; height: 74px; }
@media screen and (max-width: 480px) {
 .sprite-conversation-white-large {
   width: 75px;
   height: 51px;
   background-position: 0 0px;
   background-image: url(/media/vancouver-community-college/style-assets/css/style-images/conversation-white-75x51.png); 
 } 
}
.sprite-conversation-white-mid { background-position: 0 -456px; width: 45px; height: 33px; }
.sprite-dollar-white-mid { background-position: 0 -509px; width: 13px; height: 25px; }
.sprite-facebook-black-small { background-position: 0 -554px; width: 10px; height: 22px; }
.sprite-facebook-dark-small { background-position: 0 -596px; width: 8px; height: 15px; }
.sprite-facebook-white { background-position: 0 -631px; width: 22px; height: 22px; }
.sprite-flickr-black-small { background-position: 0 -673px; width: 22px; height: 10px; }
.sprite-flickr-white { background-position: 0 -698px; width: 22px; height: 22px; }
.sprite-grad-white-large { background-position: 0 -733px; width: 45px; height: 56px; }
@media screen and (max-width: 480px) {
  .sprite-grad-white-large {
    width: 26px;
    height: 32px;
    background-position: 0 -805px; 
  } 
}
.sprite-graduation-white-mid { background-position: 0 -809px; width: 26px; height: 32px; }
.sprite-graph-white-mid { background-position: 0 -861px; width: 31px; height: 27px; }
.sprite-head-question-white-mid { background-position: 0 -908px; width: 22px; height: 26px; }
.sprite-head-tick-white-mid { background-position: 0 -954px; width: 22px; height: 26px; }
.sprite-house { background-position: 0 -997px; width: 36px; height: 37px; }
.sprite-info-white-mid { background-position: 0 -1054px; width: 24px; height: 24px; }
.sprite-news-dark-small { background-position: 0 -1098px; width: 20px; height: 14px; }
.sprite-person-white-mid { background-position: 0 -1132px; width: 31px; height: 29px; }
.sprite-pin-dark-large { background-position: 0 -1181px; width: 41px; height: 41px; }
.sprite-star-white-mid { background-position: 0 -1242px; width: 31px; height: 30px; }
.sprite-thumbs-up-white-mid { background-position: 0 -1292px; width: 26px; height: 27px; }
.sprite-twitter-black-small { background-position: 0 -1339px; width: 20px; height: 17px; }
.sprite-twitter-white { background-position: 0 -1374px; width: 20px; height: 22px; }
.sprite-white-arrow-small-right { background-position: 0 -1413px; width: 5px; height: 10px; }
.sprite-youtube-black-small { background-position: 0 -1443px; width: 25px; height: 17px; }
.sprite-youtube-white { background-position: 0 -1478px; width: 25px; height: 22px; }
.sprite-show-more { background-position: 0px -1530px; width: 25px; height: 20px; }
.sprite-show-less { background-position: 0 -1550px; width: 564px; height: 28px; }
.sprite-show-more-progareas { background-position: 0px -1704px; width: 564px;height: 28px; } /*Haziel: Program Areas collapsed +*/
.sprite-show-less-progareas { background-position: 0 -1550px; width: 25px; height: 20px; }/*Haziel: Program Areas collapsed -*/
.sprite-mouse-white { background-position: 0 -1580px; width: 27px; height: 27px; }
.sprite-pdf-download { background-position: 0 -1615px; width: 15px; height: 15px; }
.sprite-dept-event-white { background-position: 0 -1686px; height: 36px; width: 36px; }
.sprite-dept-event-white-small { background-position: 0 -1890px; height: 28px; width: 28px; }
.sprite-dept-gallerycamera-white { background-position: 0 -1729px; width: 26px; height: 20px; }
.sprite-dept-news-white { background-position: 0 -1757px; width: 26px; height: 28px; }
.sprite-dept-partnerships-white { background-position: 0 -1800px; width: 26px; height: 23px; }
.sprite-dept-testimonyquotes-white { background-position: 0 -1828px; width: 36px; height: 22px; }
.sprite-dept-bios-white { background-position: 0 -1857px; width: 39px; height: 27px; }
.sprite-dept-success-white { background-position: 0 -2055px;/*0 -2013px*/ width: 28px;/*34px;*/ height: 26px;/*32px;*/ }
.sprite-dept-success-white-large { background-position: 0 -2013px; width: 28px;/*34px*/ height: 26px;/*32px*/ }
.sprite-dept-awards-white { background-position: 0 -1970px; width: 26px;/*28px;*/ height: 26px;/*28px;*/ }
.sprite-dept-video-white { background-position: 0 -1928px; width: 28px; height: 28px; }
span.sprite { display: inline-block; }

/*============================
Header
============================*/
.logo { margin-top: 10px; }
.logo a { margin-left: 0% ; display: block; }/*margin-left: 4.347826086956522% */
.logo img { border: 2px solid white; }
.header-site-title {color: #fff; margin-left: 4.347826086956522% ; }

.logo .header-site-title {   
    font-size: 2.118em; /* 36px */
    margin-top: 35px;
    line-height: 40px;
    font-family: 'Roboto','Source Sans Pro',Arial,'EdmondSans', 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: -.5px;
}

.meta-nav { min-width: 390px; }
.meta-nav  nav.quick-links { line-height: 14px; position: relative; width: 101%; }
.meta-nav nav.quick-links ul {
  list-style: none;
  position: relative;
  display: block;
  margin: 0;
  z-index: 9999;
  float: right;
}

.meta-nav nav.quick-links ul:after { content: ""; clear: both; display: block; }
.meta-nav nav.quick-links ul li { float: left; padding: 6px 1.739130434782609% 3px; display: block; }
.meta-nav nav.quick-links ul li a { display: block; }
.meta-nav nav.quick-links a:hover, .meta-nav .quick-links a:focus { text-decoration: none; }
.meta-nav nav.quick-links li#myVCC-link a:hover { text-decoration: underline; }
.meta-nav nav.quick-links li.switch-site-link, .meta-nav nav.quick-links #myVCC-link {
  padding: 3px 20px; /* 2% */
  /*padding-right: 20px;*/ 
  /*background-image: url(/media/vancouver-community-college/style-assets/css/style-images/sprites-23-june-2016.png);*/ /* sprites.png */
  /*background-repeat: no-repeat;*/
  /*background-position: 154px -1399px;*/ 
}
.meta-nav nav.quick-links li.switch-site-link a:hover, .meta-nav li.switch-site-link a:focus { text-decoration: underline;}
.meta-nav nav.quick-links #myVCC-link { background-position: 65px -1399px; }
.meta-nav nav.quick-links li.quick-links a:hover { text-decoration: underline; }
.meta-nav nav.quick-links li#meta-fb-link { padding-left: 3.260869565217391%;}
/*.meta-nav nav.quick-links li#meta-flickr-link { padding-right: 3.260869565217391%;}*/

@media screen and (max-width: 920px) {
.logo .header-site-title {margin-left: 4.347826086956522% ; /* ~20px */ font-size: 1.882em; /* 32px */}
}

@media screen and (max-width: 848px) {
  
  .logo a {width: 24.15458937198068%;}
  .logo a img {width: 100%}
  .logo .header-site-title {margin-top: 25px;}
}

#primary-nav { text-transform: uppercase; font-size: 0.882em;/*15px*/ margin-top: 10px; margin-left: auto; }
#primary-nav ul { margin: 0; }
#primary-nav li { display: block; float: left; padding: 5px 0; }
#primary-nav li:hover, #primary-nav li.active { background-color: #51b3b4; }
#primary-nav li:hover a, #primary-nav li.active a { border-right-color: #51b3b4; }
#primary-nav li.last a { border-right: none;}
#primary-nav a { 
  color: white;
  padding: 0 10px; /* 10px / 700px */
  border-right: 1px solid #4d4d4d;
  text-decoration: none; 
}

/* For the 'sticky' row that contains the main-nav and site search - class added when page scrolls */
.row.sticky {
  border-bottom: 2px solid #6abebf;
  position: fixed;
  z-index: 500;
  width: 100%;
  background-color: rgba(106, 190, 191, 0.90);
  left: 0px;
  top: 0px;
  padding: 2px 0px; 
}
.row.sticky .sticky-wrap { margin: 0 auto; width: 940px; }
.row.sticky .site-search { margin-top: 6px; }
.row.sticky #primary-nav { margin-top: 0px; }
.row.sticky #primary-nav a { border-color: #fff;}
.row.sticky #primary-nav li:hover, .row.sticky #primary-nav li.active { background-color: #fff; }
.row.sticky #primary-nav li:hover a, .row.sticky #primary-nav li.active a { border-right-color: #fff; color: #51b3b4; }
/* Make the subnavs sticky - fix their position and make background 0.85 opacity. They are fixed below the sticky top level navigation */
.subnav.sticky-subnav {
  position: fixed;
  width: 100%;
  background-color: rgba(77, 77, 77, 0.95);
  top: 39px;
  z-index: 600; 
}

.site-search {
  float: right;
  margin-top: 12px;
  margin-right: 0% ; /* 10px / 940px */
  text-align: right; 
}
.site-search input, .site-search button, #mob-site-search button {
  height: 29px;/*---was 26px---*/
  line-height: 25px;
  padding: 0;
  margin: 0;
  border: none; 
}
.site-search input { padding: 0 5px; }
.site-search input#q { width: 79.54545454545455%; /* 175px /220px */ margin-right: -3.181818181818182%; /* -7px/220px */ }
.site-search button, #mob-site-search button {
  width: 15.90909090909091%; /* 35 /220px */
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/magnifying_glass_16x16.png);
  background-repeat: no-repeat;
  background-position: 8px 5px; 
}


/* Primary nav break points */
@media screen and (max-width: 870px) {
  #primary-nav a { padding: 0px 6px ;}
}
@media screen and (max-width: 805px) {
  #primary-nav  { font-size: 0.824em ; /* 14px */}
  p.faux-heading, .subnav li > a {font-size: 0.941em; /* 16px */}
}
/**
  Responsive overrides for Header
  Michael TERMINALFOUR Sept '13 
**/
@media only screen and (min-width : 768px) and (max-width : 1023px) {
  .row.header-top-row { height: 120px; }
  /* For the subnav elements */
  .faux-heading.span3 { width: 100%;}
  .site-search { margin-right: 10px;}
}

/** Mega subnav **/
.subnav {
  border-top: 5px solid #51b3b4;
  border-bottom: 1px solid #3f3f3f;
  padding-top: 10px; 
}
#programs-subnav #prog-areas-links ul.split-list.split-2 li {
  width: 245px ;
  padding-right: 10px ;
}
#programs-subnav .mega-search-buttons {
  padding: 20px 25px 0px;
  height: 220px;
  margin-left: -30px;
  margin-right: 10px;
  border-color: white;
  border-style: solid;
  border-width: 0px;
  border-right-width: 1px;
  border-left-width: 1px; 
}
.container.header .row { margin-left: 0px ; margin-right: 0px;}

/* specifically for the Contact Us subnav which contains nested columns */
.subnav#contact-us-subnav .row .row { margin-bottom: 0px ;}
.subnav#contact-us-subnav .span6 .span6 {width: 47.82608695652174%; /* 220px/460px */ margin-left: 4.347826086956522%; /* 20px / 460px */ }

/* Mega subnavs responsive - Michael TERMINALFOUR Sept-Oct 2013 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .subnav .container { padding: 0px 2.127659574468085%; width: 95.74468085106383% ;}
  #programs-subnav #prog-areas-links { width: 28.8888888888889% !important; /* 260px */ padding-right:  1.111111111111111%;  margin-right: 1.111111111111111% ;/* 20px */ }
  #programs-subnav .mega-search-buttons.span2 {width:26.66666666666667% !important; /* 260px/900px */ padding-right: 2.22222222222222% !important; padding-left: 2.22222222222222% !important; /* 10px / 900*/ margin: 0; margin-right: 2.22222222222222% !important; /* 10px */ }
  #programs-subnav .ways-to-study { width: 33.33333333333333%; margin-right: 0px ; margin-left: 0px}
  #programs-subnav .offset6 { margin-left: 41.04018912529551% !important; }
}

@media screen and (max-width: 1024px) { .sticky-wrap { width: 100%} }

/* Mobile header */
.container.mobile-header { padding: 0px; width: 100% !important; }
/* Logo */
.logo-mobile {
  margin-top: 10px;
  margin-left: 4.34782608695652%;
  width: 10%;
  float: left; 
}
.logo-mobile img { border: 2px solid white; }
.mobile-header .header-site-title { margin-top: 25px;}
/* 
  Tablet adjustments 
  Covers tablet portrait
*/
@media screen and (min-width:481px) and (max-width: 768px) {

}
@media screen and (max-width: 768px) { /*logo container*/
.logo-mobile {
  margin-left: 4.34782608695652%;
  width: 10%; /* 80px /320px */
  min-width: 72px;
  /*border: 1px red solid;*//*see container*/
  float: left; }
  .logo-mobile img { border: 2px solid white; }  /*width: 70%*/
}
/* Nav buttons */
.mobile-nav-buttons {
  width: 160px;/*188px - 50th logo*/
  float: right;
  margin-top: 25px;
  margin-right: 10px;
  text-align: right;
  height: 40px; 
}
.mobile-nav-buttons .button-wrap {
  width: 42px;
  height: 45px;
  margin-left: 8px;
  display: inline-block; 
}
.mobile-nav-buttons .button-wrap .btn { box-shadow: 0px 0px 1px 1px #7d7d7d; }
.mobile-nav-buttons .button-wrap .btn a {
    background-repeat: no-repeat;
    display: inline-block;
    background-position: 0px 0px; 
}
.mobile-nav-buttons .button-wrap .btn.active { border: 1px solid #b9b9b9; }
.mobile-nav-buttons .button-wrap #search { padding: 13px 13px; width: 14px; height: 14px; }
.mobile-nav-buttons .button-wrap #my-VCC-login { padding: 13px 13px; width: 14px; height: 14px; }
.mobile-nav-buttons .button-wrap #site-nav { padding: 10px 8px; width: 24px; height: 20px; }
.mobile-nav-buttons #search a { background-image: url(/media/vancouver-community-college/style-assets/css/style-images/magnifying_glass_16x16.png); width: 16px; height: 16px; }
.mobile-nav-buttons #my-VCC-login a {
   background-image: url(/media/vancouver-community-college/style-assets/css/style-images/person-white-small.png); /* person-white-small.png */
   width: 16px;
   height: 14px; 
 }
 .mobile-nav-buttons #site-nav a {
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/mob_nav_2.png); /* mob_nav_2.png */
  width: 24px;
  height: 21px; 
}
.mobile-nav-buttons .black-line {
  width: 17px;
  height: 43px;
  margin-left: 6px;
  background-color: #2d2d2d;
  display: none; 
}

/* drop-down menus hidden until associated button is clicked. */
#mobile-menus-wrap { overflow: hidden; }
.mobile-menu {
  position: absolute;
  top: 0px;
  left: 0px;
  margin-bottom: 20px;
  width: 100%;
  display: none; 
}
.mobile-menu ul { width: 100%; list-style: none; margin: 0; }
.mobile-menu ul li {
   clear: both;
   width: 100%;
   *zoom: 1;
   padding-top: 7px;
   background-color: #2d2d2d;
   border-bottom: 1px solid #043D2B; /* #002b52; */
   text-transform: uppercase; 
}
.mobile-menu ul li.canadian-residents { text-transform: none; }
.mobile-menu ul li:before, .mobile-menu ul li:after { display: table; content: ""; line-height: 0; }
.mobile-menu ul li:after { clear: both; }
.mobile-menu ul li a { padding-left: 23px; padding-bottom: 5px; width: 75%; display: block; float: left; }
.mobile-menu ul li span.more-less { 
  float: right; height: 24px; width: 24px; display: block;
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/mob_nav_more_less_sprite.png); /* mob_nav_more_less_sprite.png */
  background-repeat: no-repeat;
  margin-top: 0px; 
}
.mobile-menu ul li span.more-less:hover { cursor: pointer; }
.mobile-menu ul li ul { margin: 0; display: none; }
.mobile-menu ul li ul li { background-color: #4b4c4f; border-bottom: none; list-style: none; margin: 0; border-top: 1px solid #043D2B; } /* #002b52; */
.mobile-menu ul li ul li a { padding-left: 46px; }
.mobile-menu ul li ul li:first-child { margin-top: 4px; }
.mobile-menu ul li ul li span.more-less { background-position: 0px -24px; }
.mobile-menu ul li ul li ul li a { padding-left: 69px ; }
.mobile-menu ul li.expanded { background-color: #4b4c4f; }
.mobile-menu ul li.expanded > span.more-less { background-position: 0px -48px; }
#my-VCC-login-menu { z-index: 100; }
#site-nav-menu { z-index: 200; }

/* Mobile site search */
#mob-site-search { padding: 20px 0.625% ; /* 2px */ width: 98.75%; background-color: #2d2d2d; z-index: 50; }
#mob-site-search form { width: 100%;  }
#mob-site-search .row {margin-bottom: 0px ;}
#mob-site-search input#q { padding: 4px 0.8075370121130552%; width: 78.38492597577389%; /* 272.4/316px */ margin-right: 0px ; display: block; float: left; }
/* should be 10% of 316px = 31.6px. padding is 6px r- and l- so width is 19.6px.  */
#mob-site-search button#searchsubmit { width: 19.34%; display: block; float: left; height: 30px; padding: 4px 0.6329113924050633%; background-position: 48% 7px ;}
/* mobile site search options */
#mobile-menus-wrap #searchScope { width: 100% ; /*316px*/ margin-bottom: 0px; margin-right: 0px; font-size: 14px}
#mobile-menus-wrap label[for*='searchScope'] { float: none; clear: both; width: 100% ; font-size: 14px; }

@media screen and (max-width: 588px) {
  .mobile-header .header-site-title { 
    font-size: 24px;
  }
  
}
@media screen and (max-width: 588px) {
  .mobile-header .header-site-title { 
   margin-top: 25px; 
    font-size: 28px;
  }
}
@media screen and (max-width: 542px) {
  .mobile-header .header-site-title { 
    font-size: 26px;
  }
}

/*===========line 1521-1547 are for 50th logo anniversary. To revert to plain logo hide lines 1521-1547 and unhide*/
@media screen and (max-width: 568px){
  .logo-mobile {width: 40%;/*25%*/}
  .mobile-header .header-site-title { 
    margin-top: 25px; 
    font-size: 28px;
    float: right;
    margin-right: 10px ;
    margin-top: 10px;
    margin-bottom: 0px ;
  }
  .mobile-nav-buttons { margin-top: 10px;}
}
@media screen and (max-width: 480px) {
  .logo-mobile {width: 40%;}
  .mobile-header .header-site-title {font-size: 25px}
}
@media screen and (max-width: 360px) {
  .logo-mobile {width: 33%; margin-top: 15px;}
  .mobile-header .header-site-title {font-size: 22px}
}
@media screen and (min-width: 768px) and (max-width: 800px) {
   .logo-mobile {width: 20%;}
  .mobile-header .header-site-title {font-size: 30px;}
}
/*=============END of 5oth anniversary from line 1521-1546=======*/

/*=END=unhide lines1548-1572to revert back to plain logo=*/
/*@media screen and (max-width: 530px) {
  .logo-mobile {width: 25%}
  .mobile-header .header-site-title { 
    margin-top: 25px; 
    font-size: 28px;
    float: right;
    margin-right: 10px ;
    margin-top: 10px;
    margin-bottom: 0px ;
  }
  .mobile-nav-buttons { margin-top: 10px;}
}
@media screen and (max-width: 420px) {
  .logo-mobile {width: 25%}
  .mobile-header .header-site-title {font-size: 25px}
}
@media screen and (max-width: 350px) {
  .logo-mobile {width: 28%; margin-top: 15px;}
  .mobile-header .header-site-title {font-size: 22px}
}
@media screen and (min-width: 321px) and (max-width: 768px) {
}
*/
/*===END=unhide lines1548-1572to revert back to plain logo*/

/*============================
Matrix
============================*/
/* class used to add background wrap to containers to provide background colour */
.background-wrap { width: 100%; }
.container.matrix {margin-top: 20px ; }
.container.matrix h3 { font-weight: 500; }
.matrix p { line-height: 1.25em; }
.matrix-item { width: 100%; height: 270px; overflow: hidden; }
.matrix-item.promo a { display: none ; }
.matrix-item.promo a:hover { text-decoration: none ;}
.item-billboard { height: 187px ;}
.item-billboard h3 { padding-left: 8px !important; padding-top: 2px !important; padding-bottom: 2px !important; line-height: normal; }
.item-detail { display: block; } 
.item-billboard {
  margin-top: 0px;
  height: 270px ;
  position: relative;
  transition-property: margin-top;
  transition-duration: .4s; } 
/* Original */
/* transition-duration: 2s; }  extended time Doris */
.item-billboard h3 {
  font-size: 18px;  /*Haziel: resize homepage matrix - added line "font-size:18px" - made text smaller or prog name on matrix promo blocks*/
  letter-spacing: -0.5px ;
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 0 15px 0 15px; /*Haziel: changed "padding:0 50px 0 15px" to "padding: 0 15px 0 15px;" to fit prog name in one line*/
  margin: 0;
  background: black;
  background: -moz-linear-gradient(left, black 100%, rgba(125, 185, 232, 0) 100%);/*Haziel: changed 65% to 100% - remove opacity on black box bg on program name on matrix promo blocks*/
  background: -webkit-gradient(linear, left top, right top, color-stop(100%, black), color-stop(100%, rgba(125, 185, 232, 0)));/*Haziel: changed 65% to 100%*/
  background: -webkit-linear-gradient(left, black 100%, rgba(125, 185, 232, 0) 100%);/*Haziel: changed 65% to 100%*/
  background: -o-linear-gradient(left, black 100%, rgba(125, 185, 232, 0) 100%);/*Haziel: changed 65% to 100%*/
  background: -ms-linear-gradient(left, black 100%, rgba(125, 185, 232, 0) 100%);/*Haziel: changed 65% to 100%*/
  background: linear-gradient(to right, black 100%, rgba(125, 185, 232, 0) 100%);/*Haziel: changed 65% to 100%*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#007db9e8',GradientType=1 );
  color: white; 
}
.item-billboard.slideshow { width: 100% ;}
.item-billboard.slideshow img { height: auto; width: 100% ;}
.item-detail { height: 270px; }
.detail-content { padding: 40px 30px 0px; }
.matrix-item:hover .item-billboard { margin-top: -270px; }
.matrix-item:hover .item-billboard.static { margin-top: 0; }
.matrix .slideshow-item { position: relative; }
.matrix ul.slideshow-items { height: 270px;}
.matrix ul.slideshow-items li { width: 100%;}
.matrix .slideshow-item h3 { position: absolute; bottom: 0; left: 0; }
#mtx-slideshow .matrix-item, .matrix .item-billboard.slideshow, .matrix .item-billboard .slideshow-items { overflow: hidden; width: 100%;  height: 270px; margin-bottom: 0px;}
.matrix .slideshow-nav, .rslides_nav {
  position: absolute;
  top: 40%;
  z-index: 9999;
  width: 51px;
  height: 51px;
  background-repeat: no-repeat; 
  text-indent: -99999px;
}
.matrix .slideshow-nav { display: none !important;}
.matrix .slideshow-nav, .rslides_nav  {
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/slideshow_prev_next.png); /* slideshow_prev_next.png */  
  background-position: 0px 0px;
  transition-property: all;
  /* Original below*/
  transition-duration: .2s;
  transition-delay: 0.2s; 
  /* Longer timer below Doris 
  transition-duration: 1s;
  transition-delay: 1s;*/
  cursor: pointer; 
}
/* Responsive slideshow on inner pages */
.matrix .slideshow-nav.prev, .rslides_nav.prev { left: -8%; }
.matrix .slideshow-nav.next, .rslides_nav.next { right: -8%; }
.matrix-item:hover .slideshow-nav.prev, .matrix-item:hover .rslides_nav.prev { left: -25px; }
.matrix-item:hover .slideshow-nav.next, .matrix-item:hover .rslides_nav.next { right: -27px; }

/* Specific overrides for matrix elements */
.matrix-item.video-holder { height: 250px; background-color: black; padding: 10px 6.666666666666667% 10px; /* 20px/300px */ width: 86.66666666666667%; /* 260px/300px*/ }
.matrix-item.video-holder hr { margin-top: 1.785714285714286%; margin-bottom: 3.571428571428571%; color: white; }
.matrix-item.video-holder h3 { margin-top: 0px; margin-bottom: 0px; color: white; text-transform: uppercase; font-size: 1.529em; /* 26px*/ }
.matrix-item.video-holder .first { margin-right: 20px; }
.matrix-item.video-holder a.overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: url(/media/vancouver-community-college/style-assets/css/style-images/youtube_play.png) no-repeat 50% 50%; /* 110px 81px */ /* youtube_play.png */
  width: 100%;
  height: 195px;
  display: block; 
}
.matrix-item.video-holder img {
  width: 100%;
  height: auto; 
}

/**
  International site 
  Homepage matrix Responsive overrides
  Michael Mason TERMINALFOUR Jan '14.
**/

/* General >= tablet portrait view */
@media screen and (max-width: 768px) {
  /* Make iamges 100% width */  
  .matrix .item-billboard img { width: 100% ;}  
  /* for the visible billboard items span wrappers */
  .matrix .span3 { width: 48.93617021276596% ; /* 470px / 960px */ margin-left: 0px }  
  .matrix .span3:first-child { margin-right: 2.127659574468085%;  /* 20px / 960px */  }
  .matrix-item:hover .item-billboard { margin-top: 0px ;}
  .matrix-item.video-holder hr { margin-bottom: 3.571428571428571%;}
  .matrix .matrix-item.video-holder .relative { overflow: hidden;  }
  .matrix .matrix-item.video-holder img {margin-top: -7.177033492822967%; }
  .matrix-item.video-holder a.overlay {height: auto; min-height: 100%; /*background-position: 120px 79px*/}
  .matrix .row#video-promo .span6 { width: 48.93617021276596%; float: left; clear: none; margin-left: 2.127659574468085% }
  #mtx-slideshow .matrix-item, .matrix .item-billboard.slideshow, .matrix .item-billboard .slideshow-items { overflow: hidden; width: 100%; height: auto; }

  .matrix .item-billboard.slideshow img {min-width: 100%;width: 100%; height: auto;}
  .matrix .item-billboard.slideshow .slideshow-nav.prev {left: -27px;}
  .matrix-item:hover .item-billboard.slideshow .slideshow-nav.prev { left: -27px; }
  .matrix .item-billboard.slideshow .slideshow-nav.next {right: -27px;}
  .matrix-item:hover .item-billboard.slideshow .slideshow-nav.next { right: -27px; }

  .matrix-item .slideshow-nav.prev, .matrix-item .rslides_nav.prev { left: -25px; }
  .matrix-item .slideshow-nav.next, .matrix-item .rslides_nav.next { right: -27px; }

}/* End general >= tablet portrait view */
/* Phone and Tablet portrait */


@media screen and  (max-width: 690px) {
  .matrix-item.video-holder hr { margin-bottom: 10.71428571428571% ;}

}
@media screen and  (max-width: 570px) {
  .matrix-item.video-holder hr { margin-bottom: 16.07142857142856% ;}

}
@media screen and  (max-width: 500px) {
  .matrix-item.video-holder hr { margin-bottom: 21.42857142857142% ;}

}
@media screen and (min-width: 340px) and (max-width: 480px) {
    
      .matrix .matrix-item.video-holder h3 { /*font-size: 1.765em;  30px */ margin-top: 6.944444444444444%;} 
      .matrix .matrix-item.video-holder hr { margin-top: 6.944444444444444%;}
    
}
@media screen and (max-width: 480px) {

  .matrix-item { height: auto !important;}
  .matrix .item-billboard.slideshow, .matrix .item-billboard.slideshow-items {height: auto;}
  .item-billboard.slideshow img {   width: 436px ; height: auto;}
  .matrix .slideshow-nav { top: 68px; }
  .matrix .item-billboard { height: auto; }
  .matrix .row { margin-bottom: 10px; }
  /*.matrix-item.promo, .matrix-item.promo .item-billboard  { height: auto !important; } /*187px !important;*/
  .matrix .row#video-promo .span6 { margin-bottom: 10px;}
  .matrix .row#video-promo .span6:first-child { margin-bottom: 20px ; }
  #mtx-slideshow.span12 { margin-bottom: 10px ;}

  .matrix-item.video-holder a.overlay { height: 0px ;}
  
  .matrix .matrix-item.video-holder { height: auto; max-height: 280px;}
  .matrix .matrix-item.video-holder h3 { margin-top: 1.785714285714286%; /* 5px */} 
  .matrix .matrix-item.video-holder hr { margin-top: 3.472222222222222%; margin-bottom: 3.571428571428571%; /* 10px */}
  .matrix .matrix-item.video-holder img {margin-top: -8%; }
  .matrix .row#video-promo .span6 { width: 100%; float: none; clear: both; margin-left: 0 }

}/* End matrix @phone view */

@media only screen and (min-width : 769px) and (max-width : 1024px) {  
  .background-wrap { min-width: inherit; width: 100%; }
}
@media only screen and (min-width : 769px) and (max-width: 939px) {
  .container.matrix {  width: 97.87234042553191% ; /* 920px/940px*/ }
}
@media only screen and (min-width : 940px) and (max-width : 1024px) {  
  .container.matrix {  width: 91.796875% ; /* 940px/1024px*/ }
}

/* End Tablet @media only screen and (min-width : 768px) and (max-width : 1024px), (min-width : 600px) and (max-width : 1024px) for .background wrap */ 


/*============================
Content Area
============================*/
/* News page features */
.news-row { *zoom: 1; }
.news-row:before, .news-row:after { display: table; content: ""; line-height: 0; }
.news-row:after { clear: both; }
.news-feature {
  font-size: 0.95em;
  width: 30.34883720930233%;
  padding: 10px 17px 0 18px;
  border-right: 1px solid #b9b9b9;
  border-bottom: 1px solid #b9b9b9;
  float: left;
  height: 380px; 
}
.news-feature:first-child { padding-left: 0; }
.news-feature:first-child .soc_icons { position: absolute; bottom: 10px; left: 3px; }
.news-feature > span.news-date { display: block; margin-top: 12px; }
.news-feature h3 { line-height: 1.25em; margin-top: 8px; }
.news-feature p { line-height: 1.4em; }
.news-feature p a { color: inherit; }
.news-feature .soc_icons { position: absolute; bottom: 10px; left: 18px; }
.news-feature.first .soc_icons { *zoom: 1; position: absolute; bottom: 10px; left: 3px; }
.news-feature .soc_icons:before, .news-feature .soc_icons:after { display: table; content: ""; line-height: 0; }
.news-feature .soc_icons:after { clear: both; }
.news-feature .soc_icons a {
   display: block;
   background-position: 0px 0px;
   height: 16px;
   width: 16px; 
   background-repeat: no-repeat;
   float: left;
   margin-right: 10px; 
 }
.news-feature .soc_icons .fbook_link { background-image: url(/media/vancouver-community-college/style-assets/css/style-images/facebook-icon_16px.png); } /* facebook-icon_16px.png */
.news-feature .soc_icons .twitter_link { background-image: url(/media/vancouver-community-college/style-assets/css/style-images/twitter-icon_16px.png); } /* twitter-icon_16px.png */
.news-feature .soc_icons .folder_link { background-image: url(/media/vancouver-community-college/style-assets/css/style-images/folder_fill_16x16.png); } /* folder_fill_16x16.png */
.news-feature.first { padding-left: 0px ; }
.news-feature.first .soc_icons { bottom: 10px; left: 3px; position: absolute; }
.news-feature.third { padding-right: 0px ; border-right: none ;}
/* News page */
.news-row.first .news-feature { padding-top: 0px; }
.news-feature h3, .news-listings h3 { font-family:  'Source Sans Pro','EdmondSans', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: normal; }
.news-listings h3 { margin-top: 15px; margin-bottom: 0px; margin-left: 16px; font-size: 1.188em; }
.news-listings h3 a { color: inherit; }
.news-listings .news-date { margin-left: 16px; margin-top: 10px; }

/* Additional styling for Events features - Micheal TERMINALFOUR March 2014 */
.news-feature.event-feature .event-date { font-family: 'Source Sans Pro','EdmondSans', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: normal; color: #fff;}
.news-feature.event-feature .event-month, .news-feature.event-feature .event-day, .news-feature.event-feature img { position: relative; display: block; }  
.news-feature.event-feature .event-date .event-month, .news-feature.event-feature .event-date .event-day { z-index: 10; }
.news-feature.event-feature .event-date .event-month { width: 96.16858237547893%; margin-top: 20px; padding-left: 3.831417624521073%; font-size: 1.750em;  }
.news-feature.event-feature .event-date .event-day { width: 91.9% ;  text-align: center; font-size: 3em; margin-top: 15px; padding-left: 8.1%;  }
.news-feature.event-feature .event-date img { margin-top: -85px ; } 

/* Responsive News >= 768px */
@media screen and (max-width: 930px) {
  /* news landing only */
  .news-landing .main-body .row { margin-bottom: 0px; }
  .news-landing .main-body #international-home-link.row { margin-bottom: 20px ; }
  /* news features */
  .news-feature {
    width: 47%;
    padding: 0px 0px 10px;
    border-right: none;
    margin-bottom: 15px;
    font-size: 1em;
    min-height: 400px; 
  }
  .news-feature:nth-child(even) { margin-left: 6%; }
  .news-feature h3 { margin-bottom: 10px; }
  .news-feature img { width: 100%; }
  .news-feature.third {padding-right: 0px !important ; }
  .news-listings h3 { margin-top: 15px; line-height: 1.3; }
  .news-listings h3, .news-listings span.news-date { margin-left: 0; }
  .news-listings span.news-date { margin-top: 0px; } 
  .news-feature .soc_icons { bottom: 10px; left: 3px; }
  
  .news-feature.event-feature .event-date .event-month { margin-top: 35px; font-size: 2.25em; }
  .news-feature.event-feature .event-date .event-day { margin-top: 30px; font-size: 4.5em;  }
  .news-feature.event-feature .event-date img { margin-top: -115px ; } 
}  
@media screen and (max-width: 768px)  {
  .news-feature.event-feature .event-date .event-month { font-size: 1.75em; }
  .news-feature.event-feature .event-date .event-day { font-size: 4.0em;  }
  .news-feature.event-feature .event-date .event-month { margin-top: 30px; }
  .news-feature.event-feature .event-date img { margin-top: -110px ; } 
}
@media screen and (max-width: 720px)  {
  .news-feature.event-feature .event-date .event-month { margin-top: 20px; font-size: 1.5em; }
  .news-feature.event-feature .event-date .event-day { margin-top: 30px; font-size: 3.5em; padding-left: 4%; }
  .news-feature.event-feature .event-date img { margin-top: -100px ; } 
}
@media screen and (max-width: 620px)  {
  .news-feature.event-feature .event-date .event-day { margin-top: 25px; font-size: 3em; padding-left: 4%; }
  .news-feature.event-feature .event-date img { margin-top: -95px ; } 
}
@media screen and (max-width: 530px)  {
  .news-feature.event-feature .event-date .event-month { margin-top: 10px; font-size: 1.25em; }
  .news-feature.event-feature .event-date .event-day { margin-top: 20px; font-size: 2.75em; padding-left: 4%; }
  .news-feature.event-feature .event-date img { margin-top: -80px ; } 
}
@media screen and (max-width: 521px) {
  .news-feature.event-feature .event-date .event-month { margin-top: 40px; font-size: 2em; }
  .news-feature.event-feature .event-date .event-day { margin-top: 60px; font-size: 4em; padding-left: 4%; }
  .news-feature.event-feature .event-date img { margin-top: -145px ; } 
  .news-feature { width: 100% !important; margin-left: 0px !important; }
}
@media screen and (max-width: 480px) {
  .news-feature.event-feature .event-date .event-month { margin-top: 30px; font-size: 2em; }
  .news-feature.event-feature .event-date .event-day { margin-top: 60px; font-size: 4em; padding-left: 4%; }
  .news-feature.event-feature .event-date img { margin-top: -135px ; } 
  .news-feature { width: 100% !important; margin-left: 0px !important; }
}
@media screen and (min-width: 400px) and (max-width: 520px) {
 .news-feature { height: auto ; min-height: 420px ; } 
}
@media screen and (max-width: 399px) {
  .news-feature { height: auto ; min-height: 360px ;} 
  .news-feature.event-feature .event-date .event-month { margin-top: 30px; font-size: 1.75em; }
  .news-feature.event-feature .event-date .event-day { margin-top: 35px; font-size: 3.5em;  }
  .news-feature.event-feature .event-date img { margin-top: -110px ; } 
}
@media screen and (max-width: 320px) {
  .news-feature.event-feature .event-date .event-month { margin-top: 20px; font-size: 1.75em; }
  .news-feature.event-feature .event-date .event-day { margin-top: 25px; font-size: 3.5em;  }
  .news-feature.event-feature .event-date img { margin-top: -90px ; } 
}
/*============================
Footer
============================*/
footer.small-text {/* 0.722em*/ }
footer { font-size: 0.875em; /** Social media links **/ }
footer h4 { text-transform: uppercase; font-weight: 600; }
footer > div { padding-top: 10px; }
footer address { margin-bottom: 0; }
footer .green, footer .green a { color: #2d2d2d; }
footer form + p { margin-top: 10px; }
.footer-meta ul { margin-left: 0px; }
.footer-meta li a { padding: 0 8px; border-right: 1px solid white; }
.footer-meta li.last-child a { border-right: none; }

@media screen and (max-width: 768px) {
  footer { 
    font-size: 0.855em;
    /* 13px */
    min-width: 320px;
    /* 280px available - #media needs padding-left of 10px and has a 1px border-left. #connect width is 130px */ 
  }
  footer .background-wrap-footer { background-image: none; }
  footer ul li { line-height: 2em; }
} /* end query max-width 767px */


@media screen and (min-width: 769px) and (max-width: 1024px)  { 
  footer .row { margin-left: 1.04% ; margin-right: 1.04% ; /* 10px / 960px */}
}
/*============================
Content Elements
============================*/
.box, .box .box-heading { padding: 5px 10px; margin-bottom: 10px; }
.box .box-heading { margin: -5px 0px 0 -10px; }
.box-heading-arrow {
  width: auto;
  height: 10px;
  margin-top: -1px;
  background-color: none;
  background-repeat: no-repeat;
  background-position: 0px 0px;
  position: relative;
  z-index: 2; 
}
.box-heading { height: 20px; box-shadow: 0px 2px 4px 0px #b9b9b9; }
.box-heading a, .box-heading span { display: block; float: left; }
.box-heading a { color: #4d4d4d !important; padding-top: 1px; }

  .box-heading span.arrow-right-icon {
  width: 15px;
   background-image: url(/media/vancouver-community-college/style-assets/css/style-images/sprites-23-june-2016.png); /* sprites.png */
  background-position: 0px -173px; }

/* full-width images */
img.full-width {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 10px;
  display: block; 
}
@media screen and (max-width: 320px) {
  img.full-width {
  width: 100%;
  margin-bottom: 5px; } 
}
/*============================
Lists
============================*/
.no-bullets {
  list-style: none;
  margin: 0; }

ul.inline-list li {
  display: inline-block; }

ul.split-list-2 {
  margin: 0; 
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
}
ul.split-list-3 {
  margin: 0; 
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
}
ul.split-list-3 {
  margin: 0; 
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
}
ul[class*='split-list'] li {
  margin-bottom: 0.5em; line-height:1.5em;padding-bottom:5px;
}
ul.divided-list li {
  border-bottom: 1px solid #b9b9b9;
  padding: 8px 0px; 
}
ul.divided-list li:last-child {
  border-bottom: none;
  padding-bottom: 0; 
}

ul.quick-links {
  text-transform: uppercase;
  margin: 10px;
  padding: 0; }

ul.quick-links .part-full-time {
  text-transform: none;
 }  /*Haziel: part/full-time image*/

  ul.quick-links li {
  line-height: 1.5em;/*--was 20px--*/
  margin: 0 0 1em 0;
  padding: 0 0 0 1em;
  list-style: none;
  background: url(/media/vancouver-community-college/style-assets/css/style-images/sprites-23-june-2016.png) 0 -177px no-repeat transparent; 
  } /* sprites.png */

/*============================
 Forms 
 ============================*/
form { width: 100%; }
form label {
  display: block;
  float: left;
  clear: both ;
  width: 11.90476%;
  /* 100px / 840 */
  margin-right: 2.39234%;
  /* 20px */
  padding-top: 4px; 
}
form input, form textarea {
  display: block;
  float: left;
  width: 79.52381%;
  /* 668px / 100 */
  border-color: #4d4d4d; 
}
form input { height: 1.6em; }
form textarea { resize: none; height: 120px; }
form input[type="submit"] {
  height: auto;
  /*width: 11.90476%;*/ /*--hz hid this---*/
  /* 100px / 840 */
  clear: both;
  margin-left: auto; /*----was 83.45238%;----*/
  /* 681px / 840px */
  margin-top: 10px;
  background-color: #043D2B; /* #002b52; */
  color: white;
  border: 1px solid #2d2d2d;
  text-transform: none;
  font-size: 0.9em;
  padding: 4px 15px; 
}

/* Responsive */
@media screen and (max-width: 320px) {
.program-detail form label, .program-detail form input, .program-detail form textarea {
   width: 96.05263157894737%;
   clear: left;
   float: none ; 
  }
  .program-detail form input[type=submit] {
   width: 100% ;
   margin-left: auto ;
   margin-right: auto ;
  } 
} /* End form responsive for phone */

@media screen and (min-width: 321px) and (max-width: 794px) { 
  .program-detail form input[type=submit] {
   width: auto ;
   margin-left: 0 ;
  } 
}
@media screen and  (max-width: 794px) { 
  .program-detail form label, .program-detail form input, .program-detail form textarea {
   width: 96.05263157894737%;
   clear: left;
   float: none ; 
  } 
}

/*============================
Tables
============================*/
/* Bootstrap overrides */
table { width: 100%;  border-collapse: collapse; }

.table {
  font-size: 0.95em;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse; 
}
table th, table td { border-width: 3px; /* width: 20%;*/ text-align: left; }
.table th {
  padding: 10px 1.4556%;
  /* 10px / 687px */
  vertical-align: middle;
  border-top-style: solid;
  border-top-color: #b9b9b9;
  border-left-style: solid;
  border-left-color: white;
  background-color: #4d4d4d;
  color: white; 
}
.table td {
  width: 17.70774%;
  padding: 10px 1.14613%;
  /* 16px / 687px */
  border-right-style: solid;
  border-right-color: #b9b9b9;
  border-bottom: 3px solid #b9b9b9; 
}
.table th:first-child, .table td:first-child { border-left-style: solid; border-left-color: #b9b9b9; }
.table th:last-child { border-right-style: solid; border-right-color: #b9b9b9; }

/* Course outline table including styling for the header which is a div */
.course-outline-table-head {
  width: 97.61904%;
  margin-left: -3px;
  *zoom: 1;
  color: #2d2d2d;
  padding: 6px 1.19048%;
  /* 10px */ }
.course-outline-table-head:before, .course-outline-table-head:after {
  display: table;
  content: "";
  line-height: 0; 
}
.course-outline-table-head:after { clear: both; }
.course-outline-table-head > span { display: block; }
.course-outline-table-head .course-title { float: left; font-weight: bold; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: -1px; }
.course-outline-table-head .course-title .course-required {font-family:  'Source Sans Pro','EdmondSans', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.course-outline-table-head .course-required { content: ""; float: left; }
.course-outline-table-head .course-outline-download { text-align: right; float: right; }
.course-outline-table-head .course-credits { text-align: right; float: right; margin-left: 5.35714%; /* 45px */ }
.course-outline-table {
  max-width: none;
  width: 100%;
  margin-left: -3px;
  margin-bottom: 20px; 
}
.course-outline-table tr { border: 3px #dbe06a solid; }
.course-outline-table td {
  text-align: center;
  border-left-width: 1px;
  border-bottom-color: #dbe06a;
  width: auto;
  border-right: 2px solid #b9b9b9;
  width: 13.13008%;
/* ~107px */ 
}
.course-outline-table td:first-child { text-align: left; padding-left: 0.85366%; padding-right: 0.85366%; }
.course-outline-table .course-start-end { width: 31.21951219512195%; /* 256px */ }
.course-outline-table .course-time { width: 19.02439%; }
.course-outline-table .course-day { width: 10.36585%; /* 85px */ }

.program-availability-table { border: 1px solid #b9b9b9; }
.program-availability-table thead tr { background-color: #b9b9b9; color: #3b393a; font-weight: bold;} 
.program-availability-table thead th { border: none; text-align: center; padding: 8px 2%;} 
.program-availability-table tbody tr td {text-align: center;  padding: 10px 1%; border-top: 1px solid #dbe06a; border-left: 1px solid #dbe06a;}
.program-availability-table tbody tr.program-area td { padding: 3px 1%; font-weight: bold; width: 98%; } 
.program-availability-table tbody tr td:first-child { text-align: left; border-left: none;  }
/*.program-availability-table tbody tr td.intake-date p{  padding: 4px 10% 4px 1%;}
.program-availability-table tbody td.status  { display: block; padding: 4px 1%;}*/
.program-availability-table tbody td.intake-date span, .program-availability-table tbody td.status span  { display: block; padding: 4px 0; }

@media screen and (max-width: 880px) {
  .program-availability-table thead th:first-child { text-align: left; width: 30%;} 
  .program-availability-table {font-size: 0.941em;}
}

/* Add to main-site
 CSS, add classes to mark-up */
/* Works at >= 480px now - may need to be specialised for different tables */
@media screen and (max-width: 480px) {
  table.resp-with-header { border: 2px #b9b9b9 solid; border-bottom: none; margin-right: 0px; width: 99.0% ; background-color: #fff; color: #2d2d2d;}
  table.resp-with-header, table.resp-with-header thead, table.resp-with-header tbody, table.resp-with-header tr, table.resp-with-header th, table.resp-with-header td { display: block; }
  table.resp-with-header thead tr { position: absolute; top: -9999px; left: -9999px; }
  table.resp-with-header tbody, table.resp-with-header tbody tr {width: 100%; min-width: 100%; }
  table.resp-with-header tbody td { position: relative; padding-left: 50%;  width: 48.85387%; border-left: none !important; border-right: none; border-bottom: none; text-align: left }
  table.resp-with-header tbody td:nth-child(even) { background-color: #687c87; color: #fff }
  table.resp-with-header tbody td:last-child { border-bottom: 2px #b9b9b9 solid; }
  table.resp-with-header tbody td:before { 
    position: absolute;
    font-weight: bold;
    top: 10px;
    left: 1.75%;
    width: 48.25%; 
    height: 42px; 
    white-space: nowrap;
    content: attr(data-headervalue) ; 
  }
  /* For the program-availability table */
  .program-availability-table tbody tr.program-area td { padding: 10px 1%;  } 
}

/*============================
Utility
============================*/
.left { float: left; }
.right { float: right; }
.cf { clear: both; }
.hidden { display: none !important; }
.visible { display: block !important; }
.relative { position: relative; }
.padded { padding: 0.25em 0.5em; }
.bordered { border: 1px solid #b9b9b9; }
.borderThick { border-width: 2px; border-style: solid; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.icon { width: 26px; height: 23px; background-repeat: no-repeat; }
.margin-right-none { margin-right: 0px !important; }
.margin-left-none { margin-left: 0px !important; }
.not-bold { font-weight: normal; }
.display-block { display: block; }

/*============================
Background Color Classes
============================*/
.green { background-color:#7fba00; color: white; } 
.grayDarker { background-color: #3b393a; color: white; }
.grayDark { background-color: #4d4d4d; color: white; }
.grayDarkBorder { border-color: #4d4d4d; }
.gray { background-color: #4b4c4f; color: white; }
.grayLight { background-color: #687c87; color: white; }
.grayLighter { background-color: #7d7d7d; color: white; }
.grayLighterBorder { border-color: #7d7d7d; }
.grayWhite { background-color: #b9b9b9; color: white; }
.white { background-color: white; }
.blue { background-color: #009ee0; color: white; }
.blueBorder { border-color: #009ee0; }
.blueDark { background-color: #043D2B;  color: white; } /* #002b52; */
.blueDarkBorder { border-color: #043D2B; } /* #002b52; */
.black  {  background-color: #2d2d2d; color: white; }
.blackBorder { border-color: #2d2d2d; }
.seaBlue { background-color: #0699bf; color: white; }
.seaBlueBorder { border-color: #0699bf; }
.blueGray { background-color: #687c87; color: white; }
.greenLight { background-color: #95c62c; color: white; }
.greenBorder { border-color: #7fba00; } 
.greenDark { background-color: #819705; color: white; }
.greenDarkBorder { border-color: #819705; }
.seaGreen { background-color: #01a89e; color: white; }
.seaGreenBorder { border-color: #01a89e; }
.yellowHoney { background-color: #c7be14; color: white; }
.yellowHoneyBorder { border-color: #c7be14; }  
.tealLight { background-color: #73b89b; color: white; }
.tealLightBorder { border-color: #73b89b; }  
.oliveGreen { background-color: #dbe06a; }
.red { background-color: #bc0505; color: white; }
/* Red used in the international site for the 'Canadian residents' link to main site */
.international-red { background-color: #850116; color: white; }
.redBorder { border-color: #bc0505; }
.yellow { background-color: #ffc40d; color: white; }
.orange { background-color: #f89406; color: white; }
.pink { background-color: #c0004e; color: white; }
.pinkBorder { border-color: #c0004e; }
.purple { background-color: #014a7f; color: white; }
.cyan { background-color: #009ee0; color: white; }
.yellowGreen { background-color: #bfc942; color: white; }
.teal { background-color: #5daab4; color: white; }
/* Tesal used for main-nav hover and trim in international site and international site link in main site meta nav */
.international-teal { background-color: #51b3b4; color: white; }

 /*--------colors used in Dept marketing buttons----------------------*/ 
.teal-news { background-color: #05997e; color: white; }
.teal-news-border { border-color: #05997e;} 
.green-bio { background-color: #99cc00; color: white; }
.green-bio-border { border-color: #99cc00;}
.mustard-testimonials { background-color: #b3a900; color: white; }
.mustard-testimonials-border { border-color: #b3a900; }
.grass-events { background-color: #659400; color: white; }
.grass-events-border { border-color: #659400;}
.bluegreen-partnerships{ background-color: #3c9495; color: white; }
.bluegreen-partnerships-border { border-color: #3c9495; }
.green-galleries { background-color: #5ba20b; color: white; }
.green-galleries-border { border-color: #5ba20b; }

 /*-------END-colors used in Dept marketing buttons----------------------*/ 
.green a, .grayDarker a, .grayDark a, .gray a, .grayLight a, .grayLighter a, .grayWhite a, .white a, .blue a, .blueDark a, .seaBlue a, .blueGrey a, .greenLight a, .greenDark a, .seaGreen a, .red a, .yellow a, .orange a, .pink a, .purple a, .cyan a, .yellowGreen a, .teal a , .teal-news a, .green-bio a, .mustard-testimonials a, .grass-events a,.grass-events a,.bluegreen-partnerships a, .green-galleries a  { color: white; }
/*============================
Misc
============================*/
.faux-heading {
  font-size: 1.059em; /* 18px */
  /*font-size: 1.125em;*/
  line-height: 1.25em;
  background-color: #3b393a;
  padding: 5px 8px;
  margin-left: -5px;
  font-weight: 500; 
}

/*============================
3rd Party CSS
============================*/
/* Lightview */
.lv_window {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0;
  overflow: hidden;
  text-align: left;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
}
.lv_window, .lv_controls_top, .lv_controls_top_close, .lv_thumbnails, .lv_thumbnails_top_close { z-index: 100000; }
.lv_skin { float: left; width: 100%; height: 100%; position: relative; overflow: visible; }
.lv_bubble, .lv_shadow { position: absolute; }
.lv_bubble * { display: inline; position: relative; float: left; z-index: none; }
.lv_skin * { margin: 0; padding: 0; }
.lv_overlay { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 99999; }

/* wrapper for the spinner */
.lv_spinner_wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  cursor: pointer; 
}

/* The the previous/next overlay buttons on top of images */
.lv_inner_previous_next_overlays {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  zoom: 1;
  background: url(/media/vancouver-community-college/style-assets/css/style-images/lightview-imgs/blank.gif); 
} /* lightview/blank.gif */

.lv_inner_previous_next_overlays * {
  padding: 0;
  margin: 0; 
}

.lv_inner_previous_next_overlays .lv_button {
  position: relative;
  height: 100%;
  width: 49%;
  background: url(/media/vancouver-community-college/style-assets/css/style-images/lightview-imgs/blank.gif); /* lightview/blank.gif */
  zoom: 1;
  cursor: pointer; 
}
.lv_button_inner_previous_overlay { float: left; }
.lv_button_inner_next_overlay { float: right; }
.lv_title_caption { position: absolute; font: 11px/18px "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Tahoma, Arial, sans-serif; ccolor: #eaeaea; }
.lv_title_caption_slider { position: relative; float: left; overflow-y: hidden; }
.lv_title_caption_slide {
  position: relative;
  float: left;
  top: 0;
  left: 0;
  padding: 15px 0 7px 0; 
}
.lv_title { font-weight: bold; }
.lv_title, .lv_caption { float: left; clear: both; }
.lv_update_queue {
  position: absolute;
  top: -15000px;
  left: -15000px;
  width: 5000px;
  height: 5000px;
  visibility: hidden; 
}
.lv_update_queue .lv_window, .lv_update_queue .lv_content {
  position: relative;
  overflow: visible;
  float: left;
  top: auto;
  left: auto;
  width: 100%; 
}
.lv_content .lv_content_wrapper { float: left; clear: both; position: relative; }
.lv_update_queue .lv_content_wrapper { position: absolute; top: 0; left: 0; }
.lv_content_wrapper canvas { float: left; zoom: 1; }
.lv_content {
  position: absolute;
  padding: 0;
  margin: 0;
  overflow: auto;
  /* scrollbars */
  text-align: left;
 background: url(/media/vancouver-community-college/style-assets/css/style-images/lightview-imgs/blank.gif); /* lightview/blank.gif */
  /* Chrome 18+ opacity bug */ 
}
.lv_measure_element { position: relative; float: left; clear: both; }
.lv_content_canvas,
.lv_content_image,
.lv_content_flash,
.lv_content_object,
.lv_content_iframe,
.lv_content_html {
  float: left;
  border: 0;
  clear: both;
  padding: 0;
  margin: 0;
  background: none; 
}
.lv_blank_background, .lv_content { background-image: url(/media/vancouver-community-college/style-assets/css/style-images/lightview-imgs/blank.gif); /* lightview/blank.gif */ }

/* The buttons on the side when you view a gallery */
.lv_side_buttons_underneath {
  position: absolute;
  top: 50%;
  left: 50%;
  clear: both;
  width: 100%;
  padding: 0;
  height: 67px;
  margin-top: -34px; 
}

.lv_side_buttons_underneath * { padding: 0; margin: 0; }
.lv_side_buttons_underneath .lv_side_left { float: left; }
.lv_side_buttons_underneath .lv_side_right { float: right; }
.lv_side, .lv_side_button { height: 37px; width: 41px; position: absolute; }
.lv_side { position: relative; overflow: hidden; padding: 15px 0; cursor: pointer; }
.lv_side_left { margin-left: -41px; }
.lv_side_right { margin-right: -41px; }
.lv_side_button { height: 31px; width: 41px; cursor: pointer; }
.lv_side_button_previous {
  margin-left: 0px;
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/lightview-imgs/blank.gif); /* lightview/lv-sprite.png */
  background-repeat: no-repeat;
  background-position: 0px -33px; 
}
.lv_side_button_previous:hover, .lv_side_left .lv_side_button_out { background-position: 0px -64px; }
.lv_side_button_next {
  margin-left: 0px;
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/lightview-imgs/blank.gif); /* lightview/lv-sprite.png */
  background-repeat: no-repeat;
  background-position: -41px -33px; 
}
.lv_side_button_next:hover, .lv_side_right .lv_side_button_out { background-position: -41px -64px; }
.lv_side_buttons_underneath .lv_side_button_out { margin-left: 0; }

/* disabled states */
.lv_side_buttons_underneath .lv_side_left_disabled .lv_side_button,
.lv_side_buttons_underneath .lv_side_left_disabled:hover .lv_side_button { background-position: 0px -95px; }

.lv_button_top_close {
  width: 33px;
  height: 33px;
  position: absolute;
  cursor: pointer;
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/lightview-imgs/blank.gif); /* lightview/lv-sprite.png */
  background-repeat: no-repeat;
  background-position: 0px 0px;
  /* the spacing option set on the relative controls is taken into account when positioning */
  top: 17px;
  /* left or right is set on the css of the skin */ 
}
.lv_button_top_close:hover { background-position: -33px 0px; }

/*
 * Top Controls
 */
.lv_controls_top {
  position: fixed;
  top: 0;
  left: 50%;
  width: 126px;
  margin-left: -63px;
  height: 63px;
  overflow: hidden; }
.lv_controls_top_with_slideshow {
  width: 147px;
  margin-left: -74px; }
.lv_controls_top .lv_top_middle {
  width: 100%;
  height: 33px;
  margin-top: 15px;
  float: left;
  position: relative; }
.lv_controls_top .lv_top_button {
  height: 100%;
  float: left;
  position: relative; }
.lv_controls_top .lv_icon {
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/lightview-imgs/blank.gif); /* lightview/lv-sprite.png */
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  float: left;
  cursor: pointer;
  font-family: "Lucida Sans", "Lucida Grande", Tahoma, sans-serif;
  color: #d4d4d4;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  position: relative; }
.lv_controls_top .lv_icon_disabled {
  cursor: default;
  color: #2e2e2e;
  text-shadow: none; }
.lv_top_previous {
  width: 63px; }
.lv_top_previous .lv_icon {
  background-position: 0px -96px; }
.lv_top_previous:hover .lv_icon {
  background-position: 0px -129px; }
.lv_top_previous .lv_icon_disabled,
.lv_top_previous:hover .lv_icon_disabled {
  background-position: 0px -162px; }
.lv_top_slideshow {
  width: 21px;
  display: none;
  position: relative; }
.lv_controls_top_with_slideshow .lv_top_slideshow {
  display: block; }
.lv_top_slideshow .lv_icon {
  background-position: -63px -96px; }
.lv_top_slideshow:hover .lv_icon {  background-position: -63px -129px; }
.lv_top_slideshow .lv_icon_disabled,
.lv_top_slideshow:hover .lv_icon_disabled { background-position: -63px -162px; }
.lv_top_slideshow_playing .lv_icon { background-position: -148px -96px; }
.lv_top_slideshow_playing:hover .lv_icon { background-position: -148px -129px; }
.lv_top_next { width: 62px; }
.lv_top_next .lv_icon { background-position: -84px -96px; }
.lv_top_next:hover .lv_icon { background-position: -84px -129px; }
.lv_top_next .lv_icon_disabled,
.lv_top_next:hover .lv_icon_disabled { background-position: -84px -162px; }
.lv_icon span {
  margin-top: 5px;
  width: 30px;
  text-align: center;
  line-height: 23px; }
.lv_top_previous span { float: right; margin-right: 7px; }
.lv_top_next span { float: left; margin-left: 6px; }
.lv_controls_top_close {  height: 33px; width: 33px; 
  /* 46 */
  position: fixed;
  top: 0;
  right: 0;
  padding: 13px; }

.lv_controls_top_close_button {
  height: 33px;
  width: 33px;
  float: left;
  position: relative;
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/lightview-imgs/blank.gif); /* lightview/lv-sprite.png */
  background-repeat: no-repeat;
  background-position: -166px -21px;
  cursor: pointer; }

.lv_controls_top_close_button:hover {
  background-position: -166px -54px; }

/*
 * Relative Controls / Slider
 */
.lv_controls_relative {
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -150px;
  height: 50px;
  overflow: hidden;
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/lightview-imgs/blank.gif); /* lightview/lv-sprite.png */ }

.lv_slider {
  font-family: "Lucida Sans", "Lucida Grande", Tahoma, sans-serif;
  font-size: 9px;
  height: 21px;
  line-height: 21px;
  padding: 15px 0 14px 0;
  position: relative;
  overflow: hidden; }

.lv_slider .lv_slider_numbers {
  float: left;
  position: relative;
  height: 21px;
  overflow: hidden;
  margin: 0 2px; }

.lv_slider .lv_slider_slide {
  position: absolute;
  top: 0;
  left: 0;
  height: 21px; }

.lv_slider_number,
.lv_slider_number_empty {
  float: left;
  position: relative;
  height: 21px;
  width: 28px;
  line-height: 21px;
  overflow: hidden;
  color: #d4d4d4;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  background: #4a4a4a;
  text-align: center;
  padding: 0;
  margin: 0;
  zoom: 1;
  text-transform: none;
  text-decoration: none;
  border: none;
  background-repeat: no-repeat;
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/lightview-imgs/blank.gif); /* lightview/lv-sprite.png */
  background-position: -67px 0px;
  cursor: pointer; 
}
.lv_slider_number_empty { background-position: -151px 0px; cursor: default; }
.lv_slider_number_last { margin-right: 0; }
.lv_slider_number:hover { background-position: -95px 0px; }
.lv_slider_numbers .lv_slider_number_active,
.lv_slider_numbers .lv_slider_number_active:hover {
  background-position: -123px 0px;
  color: #808080;
  cursor: default; 
}
.lv_slider .lv_slider_icon,
.lv_slider .lv_icon { height: 21px; width: 21px; }
.lv_slider .lv_slider_icon {
  zoom: 1;
  padding: 0 2px;
  /* IE6 needs padding instead of margin */
  display: inline;
  position: relative;
  cursor: pointer;
  float: left; 
}
.lv_slider .lv_icon {
 background-image: url(/media/vancouver-community-college/style-assets/css/style-images/lightview-imgs/blank.gif); /* lightview/lv-sprite.png */
  background-repeat: no-repeat;
  /* IE6 */
  position: absolute;
  top: 0;
  left: 2px;
  display: block; 
}
.lv_slider_previous .lv_icon { background-position: -82px -21px; }
.lv_slider_previous .lv_icon:hover { background-position: -82px -42px; }
.lv_slider_previous_disabled .lv_icon, .lv_slider_previous_disabled .lv_icon:hover { background-position: -82px -63px; cursor: default; }
.lv_slider_next .lv_icon { background-position: -103px -21px; }
.lv_slider_next .lv_icon:hover { background-position: -103px -42px; }
.lv_slider_next_disabled .lv_icon, .lv_slider_next_disabled .lv_icon:hover { background-position: -103px -63px; cursor: default; }
.lv_slider_slideshow {
  position: relative;
  top: 0;
  left: 0;
  display: inline; 
}
.lv_slider_slideshow .lv_icon { background-position: -125px -21px; }
.lv_slider_slideshow .lv_icon:hover { background-position: -125px -42px; }
.lv_slider_slideshow_playing .lv_icon { background-position: -146px -21px; }
.lv_slider_slideshow_playing .lv_icon:hover { background-position: -146px -42px; }
.lv_slider_slideshow_disabled .lv_icon, .lv_slider_slideshow_disabled .lv_icon:hover { background-position: -125px -63px; cursor: default; }

/* thumbnails */
.lv_thumbnails {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 92px;
  padding: 15px 0 25px 0;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
}
.lv_thumbnails_slider {
  position: relative;
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden; 
}
.lv_thumbnails_slide {
  position: absolute;
  top: 0;
  left: 0; 
}
.lv_thumbnail {
  width: 92px;
  height: 92px;
  float: left;
  position: relative;
  display: inline;
  overflow: hidden;
  /* IE6 */ 
}
.lv_thumbnail_image {
  position: relative;
  background: red;
  background: #161616;
  width: 80px;
  height: 80px;
  margin: 6px;
  float: left;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  overflow: hidden;
  display: inline;
  /* IE6 */
  z-index: 0;
  /* IE8 */ 
}
.lv_thumbnail_image img { position: absolute; }
.lv_thumbnail_active .lv_thumbnail_image {  filter: alpha(opacity=35); opacity: .35; display: inline; }
.lv_thumbnail_icon {
  width: 36px;
  height: 36px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -18px;
  margin-top: -18px;
  background-position: 99px 99px;
  background-repeat: no-repeat;
  display: block !important;
  display: none;
  /* IE6 */ 
}

.lv_thumbnail_image_spinner_overlay { 
  width: 100%;
  height: 100%;
  float: left;
  position: relative;
  background: #161616; 
}
.lv_thumbnail_icon_video { background-position: 0px -196px; }
.lv_thumbnail:hover .lv_thumbnail_icon_video { background-position: -36px -196px; }
.lv_thumbnail_active:hover .lv_thumbnail_icon_video { background-position: 0px -196px; }

/* 
 * Skins
 */
/* normalization for all skins */
.lv_content { text-align: left; }
.lv_content,
.lv_content h1,
.lv_content h2,
.lv_content h3,
.lv_content h4,
.lv_content h5,
.lv_content h6 { color: #333; }
.lv_content a, .lv_content a:hover {
  color: #0088cc;
  font-weight: normal;
  background: none;
  border: 0;
  text-decoration: none; 
}
.lv_content a:hover { text-decoration: underline; }
.lv_title_caption a, .lv_title_caption a:hover {
  color: #b4b4b4;
  font-weight: normal;
  background: none;
  border: 0;
  text-decoration: none; 
}
.lv_title_caption a:hover { text-decoration: underline; }

/** DropKick.js theme **/
/* One container to bind them... */
/* Styling for Vancouver by T4 */
.dk_container {
  text-align: left;
  background-color: #687c87;
  font-family: 'Source Sans Pro','EdmondSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative; 
  z-index: 100;
  /* Opens the dropdown and holds the menu label */ 
}
.dk_container a {
  padding: 3px 8px;
  cursor: pointer;
  text-decoration: none;
  width: 30px !important;
  height: 23px; 
}
.dk_container:focus { outline: 0; }
.dk_container .dk_options, .dk_container .dk_options a { background-color: inherit; }
.dk_container .dk_toggle {
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/sprites-23-june-2016.png); /* sprites.png */
  background-repeat: no-repeat;
  background-position: 30px -1504px;
  color: white; 
}
.dk_container .dk_options {
  border: 1px solid #7fba00;
  width: 120px;
  padding: 12px;
  left: 0;
  top:25px; 
  margin-top: 0px;
  display: none;
  position: absolute;
  z-index: 1000;
  /* Inner ul for options, this is what makes the scrollbar possible. */ 
}
.dk_container .dk_options li:first-child { display: none; }
.dk_container .dk_options a, .dk_container .dk_options a:link, .dk_container .dk_options a:visited { display: block; }
.dk_container .dk_options li { height: 26px; display: block; }
.dk_container .dk_options li a { width: 120px !important; overflow: hidden; }
.dk_container .dk_options .dk_options_inner { color: #333; max-height: 250px; margin: 0px; }
.dk_container .dk_options .dk_options_inner .dk_option_current a { background-color: #7fba00;}

/* Set a max-height on the options inner */
.dk_options_inner, .dk_touch .dk_options { max-height: 250px; }

/*.dk_open a.dk_toggle { height: 29px;}*/
/******  End Theme ******/
/***** Critical to the continued enjoyment of working dropdowns - set-up CSS ******/
.dk_container {
  display: none;
  float: left;
  position: relative; }
  .dk_container a {
  outline: 0; }
  .dk_container .dk_toggle {
  display: -moz-inline-stack;
  display: inline-block;
  *display: inline;
  position: relative;
  zoom: 1; }
  .dk_container .dk_options_inner {
  overflow: hidden;
  position: relative; }

.dk_open { position: relative; }
  .dk_open .dk_options { display: block; }
  .dk_open .dk_label { color: inherit; }
.dk_touch .dk_options { overflow: hidden; }
.dk_touch .dk_options_inner { max-height: none; overflow: visible; }

.dk_fouc select { position: relative; }

/*============================
Homepage Content Elements
============================*/
/* Info sessions boxes */
#info_sessions { font-size: 0.813em; }
#info_sessions .box-heading-arrow { background-image: url(/media/vancouver-community-college/style-assets/css/style-images/upside_down_triangle_gn.png); } /* upside_down_triangle_gn.png */

/** Social, more news, more events boxes **/
#social, #more_news, #more_events, #bulletins-box { font-size: 0.889em; position: relative; }
#social .box-heading,  #more_news .box-heading,  #more_events .box-heading, #bulletins-box .box-heading 
 { width: 94.3%; padding: 2px 3% 9px ; /* 10px /300px */ }

#social .box-heading { width: 50%; float: left; padding-left: 0px ; padding-right: 0px; }

#social.box, #more_news.box, #more_events.box { width: 93.33333333333333%; }

#social.bordered, #more_news.bordered, #more_events.bordered, #bulletins-box.bordered { padding-left:0% ; padding-right: 0%; padding-bottom: 10px; /* 10px /300px */}

#more_news, #more_events, #bulletins-box  {height: 113px; margin-bottom: 20px ; padding-bottom: 9px;}

#bulletins-box .box-heading { margin-left: 0; }

#social [class*="features"], #more_news [class*="features"], #more_events [class*="features"], #bulletins-box [class*="features"] {
  height: 100px;
  margin-top: 3%;
  width: 92.14285714285714%; /*258px/280px*/
  margin-left: auto;
  margin-right: auto; 
}
#more_news [class*="features"], #more_events [class*="features"], #bulletins-box [class*="features"] { height: 65px ;}
#social .feature-item, #more_news .feature-item, #more_events .feature-item, #bulletins-box .feature-item { width: 100%; /* 228px / 280px */ }
#social .feature-item p a, #more_news .feature-item p a, #more_events .feature-item p a, #bulletins-box .feature-item p a { display: inline; width: auto; }
#social .feature-item p, #more_news .feature-item p, #more_events .feature-item p, #bulletins-box .feature-item p { line-height: 1.25em; padding: 0px 12px; }
#social .next, #social .prev, #more_news .next, #more_news .prev, #more_events .next, #more_events .prev, #bulletins-box .next, #bulletins-box .prev {
  display: block;
  height: 50px;
  position: absolute;
  top: 57.14285714285714%;
  width: 8.66667%;
  z-index: 800;
  /* 26px / 300px */ 
}

#social .next:hover, #social .prev:hover, #more_news .next:hover, #more_news .prev:hover, #more_events .next:hover, #more_events .prev:hover,
#bulletins-box .next:hover, #bulletins-box.prev:hover{ cursor: pointer; }

#social .next, #more_news .next, #more_events .next, #bulletins-box .next {
  right: 0px;
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/arrow-right-small-light.png); /* arrow-right-small-light.png */
  background-position: 8px 0px; 
}

#social .next:hover, #more_news .next:hover, #more_events .next:hover, #bulletins-box .next:hover{ background-image: url(/media/vancouver-community-college/style-assets/css/style-images/arrow-right-dark-small.png); } /* arrow-right-dark-small.png */
#social .prev, #more_news .prev, #more_events .prev {
  left: 0px;
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/arrow-left-small-light.png); /* arrow-left-small-light.png */
  background-position: 8px 0px; 
}

#social .prev:hover, #more_news .prev:hover, #more_events .prev:hover, #bulletins-box.prev:hover { background-image: url(/media/vancouver-community-college/style-assets/css/style-images/arrow-left-dark-small.png); } /* arrow-left-dark-small.png */

#social .feature-date, #more_news .feature-date, #more_events .feature-date, #bulletins-box .feature-date {
  font-size: 0.875em;
  display: block;
  margin-top: 3px; 
}
#social .feature-item a, #more_news .feature-item a, #more_events .feature-item a, #bulletins-box .feature-item a { display: block; }
#social a.more, #more_news a.more, #more_events a.more, #bulletins-box a.more { width: 88.5% ; /*245px/280px*/ margin-right: 2.857142857142857%; /* 8px/280px*/ }

#more_news a, #more_events a, #bulletins-box a { width: 4.285714285714286%; /* 12px/280px */ margin-right: 0; }

#more_news .box-heading a, #bulletins-box .box-heading a { color: #2d2d2d !important; }

#more_news .box-heading .arrow-right-icon {
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/arrow-right-black-small.png); /* arrow-right-black-small.png */
  background-position: 0px 7px; 
}

#more_news .box-heading-arrow {
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/upside_down_triangle_blGray.png); } /* upside_down_triangle_blGray.png */
#more_news span.news-icon {
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/news-black-small.png); /* news-black-small.png */
  background-position: 0px 5px; 
}
#more_events .box-heading-arrow {
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/upside_down_triangle_grayWhite.png); } /* upside_down_triangle_grayWhite.png */
#more_events span.calendar-icon {
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/sprites-23-june-2016.png); /* sprites.png */
  background-position: 0px -239px; 
}

#bulletins-box span.bulletins-icon {
  background-image: url(/media/vancouver-community-college/content-assets/image/icons/icon-pin-25x23.png); /* icon-pin-25x23.png */
  background-position: 0px 0px; 
  background-size: 20px; 
}

#social { height: 260px; }/*---was160px---*/
#social .box-heading-arrow { background-image: url(/media/vancouver-community-college/style-assets/css/style-images/upside_down_triangle_yellowGreen.png); } /* upside_down_triangle_yellowGreen.png */
#social .box-heading .social-icon-link { margin-left: 3.355704697986577% ; margin-right: 3.355704697986577%; /* ~5px each at fullwidth */ }
#social .box-heading span.icon { width: 26px; /* 26px / 139px */ }

#social .box-heading .instagram-icon {
    background-image: url(/media/vancouver-community-college/style-assets/css/style-images/instagram-grey.png); /* instagram-grey.png */
    background-position: 0px 0px; }

#social .box-heading .twitter-icon {
    background-image: url(/media/vancouver-community-college/style-assets/css/style-images/twitter_grey.png); /* twitter_grey.png */
    background-position: 0px 0px; }
#social .box-heading .facebook-icon {
    background-image: url(/media/vancouver-community-college/style-assets/css/style-images/sprites-23-june-2016.png); /* sprites.png */
   background-position: 5px -591px; }
#social .facebook_box, #social .twitter_box {
  position: absolute;
  top: 40px;
  left: 0px;
  width: 93.28859060402685% !important; 
  height: 230px;
  overflow: hidden;
  padding: 0px 3.355704697986577%;  /* 10px */ 
}
#social .twitter_box iframe {height: 230px;}
#social .facebook_box .fb-like-box.fb_iframe_widget, #social .facebook_box .fb-like-box.fb_iframe_widget span  { width: 100% !important;  }

@media screen and (max-width: 768px) {
  #social .box-heading .social-icon-link { margin-right: 1.420454545454545% ; /* ~5px @ > 768px */ margin-left: 2.840909090909091%; /* ~5px @ > 768px */ }
}

@media screen and (max-width: 480px) {
  #more_news .box-heading,  #more_events .box-heading  { width: 94.7%}
}
@media screen and (max-width: 320px) {
  #social .next { right: 5px; } 
}
/*============================
Inner pages
============================*/
.inner-page .container, .program-page .container { position: relative; }
#content-wrap > .back-to-boxes { top: 800px; position: absolute; right: 0; *zoom: 1; }
#content-wrap > .back-to-boxes:before, #content-wrap > .back-to-boxes:after { display: table; content: ""; line-height: 0; }
#content-wrap > .back-to-boxes:after { clear: both; }
.back-to-top, .back-to-prog-menu { float: right; clear: right; text-align: center; font-size: 0.7em; line-height: 1.2; }
.back-to-top {
  width: 30px;
  height: 55px;
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/up_arrow.png); /* up_arrow.png */
  background-repeat: no-repeat;
  background-position: 9px 13px;
  margin-bottom: 10px; 
}
.back-to-top a { display: inline-block; width: 30px; height: 55px; }
.back-to-top a span {margin-left: -99999px;}
.back-to-prog-menu {
  background-color: #c0004e;
  color: white;
  width: 51px;
  height: 40px;
  padding: 24px 0px 10px;
  text-align: center;
  background: url(/media/vancouver-community-college/style-assets/css/style-images/white_arrow_up.png) 9px 10px no-repeat #c0004e; /* white_arrow_up.png */
} 
.back-to-prog-menu a { color: white; }

/* Override span11 and span9 to center in the page */
.article, .prog-details-container, .expand-details {
  margin-left: auto !important;
  margin-right: auto  !important;
  float: none !important; 
}
.program-status { width: 690px; margin-bottom: 50px; float: none; }
.program-status span.sprite { display: block; float: left; height: 40px; width: 40px; margin-right: 20px; }
.program-status p { width: 630px; float: left; /* 560px / 620px */ }
@media (max-width: 320px) {
  .program-status span.sprite {
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px;
    background-image: url(/media/vancouver-community-college/style-assets/css/style-images/pin-dark-small.png); /* pin-dark-small.png.png */
    background-position: 0px 0px; 
  }
  .program-status p { width: 87%; margin-bottom: 0px; } 
}
@media screen and (max-width: 768px) {
  .program-status { width: 100%; margin-bottom: 0px; }
} 

.program-menu {float: none;}
.program-menu .row { margin: inherit; margin-bottom: 30px; }
.program-menu .prog-menu-item { margin-left: 0px ; margin-right: 30px; margin-bottom: 20px; float: left; clear: none; height: 115px; }
.program-menu .prog-menu-item:last-child { margin-right: 0; }
.program-menu .prog-menu-item a { height: 95px; display: block; margin: 10px 7.14286%; /* 10px /140px */ position: relative; }
.program-menu .prog-menu-item a:hover { text-decoration: none; }
.program-menu .prog-menu-item .text-bottom { position: absolute; left: 0px; bottom: 0px; }
.program-menu .prog-menu-item:first-child { margin-left: 0; }
.program-menu .prog-menu-item.pink:hover { background-color: #600027; }
.program-menu .prog-menu-item.green:hover { background-color: #405d00; }
.program-menu .prog-menu-item.seaBlue:hover { background-color: #034d60; }
.program-menu .prog-menu-item.grayLighter:hover { background-color: #3f3e3e; }
.program-menu .prog-menu-item.seaGreen:hover { background-color: #01544f; }
.program-menu .prog-menu-item.grayDark:hover { background-color: #3f3e3e; }
.program-menu .prog-menu-item.blue:hover { background-color: #004f70; }
.program-menu .prog-menu-item.blueDark:hover { background-color: #0595bd; }
.program-menu .prog-menu-item.greenDark:hover { background-color: #414c03; }
.program-menu .prog-menu-item.red:hover { background-color: #5e0303; }
.prog-row { display: none; }
.prog-details { display: block; width: 100%; }
.prog-details-container { margin-left: auto; margin-right: auto; }
.prog-detail-tab { float: left; width: 260px; margin-left: 0px; height: 40px; }
.prog-detail-tab .sprite { display: block; float: left; margin: 8px 0 7px 5%; /* 15px / 300px */ }
.prog-detail-tab p { margin: 9px 0 0 6.66667%; float: left; }

/* styling for program detail boxes */
.program-detail { *zoom: 1; clear: left; padding: 20px 2.39234%; /*  20px / 840px */ /* Course availability-type inline drop-down */ }
.program-detail:before, .program-detail:after { display: table; content: ""; line-height: 0; }
.program-detail:after { clear: both; }
.program-detail h3:first-child { margin-top: 0px; }
.program-detail h3 { line-height: 30px; }
.program-detail select.filterer { margin-left: 1.19048%; /* 10px / 840px */ font-size: 0.95em; line-height: auto; }
.program-detail .program-title { display: none; }
.program-detail .program-detail-title { display: none; }

/* Sprite margin overrides */
#applyNow .sprite, #progHighlights .sprite { margin-top: 5px; }
#infoSessions .sprite { margin-top: 4px; }
#contact .sprite { margin-top: 6px; }
.program-status .table, .apply-now-table { width: 685px; margin: 30px auto; }

/* Table within program details */
.program-detail .table th {
  background-repeat: no-repeat;
  background-position: 18px 12px;
  padding: 15px 20px; 
}
.program-detail .table th.apply-online { background-image: url(/media/vancouver-community-college/style-assets/css/style-images/mouse_white.png); } /* mouse_white.png */
.program-detail .table th.apply-in-person { background-image: url(/media/vancouver-community-college/style-assets/css/style-images/person-white-smaller.png); } /* person-white-smaller.png */

/* background colors for hot-links in program details blocks */
.program-detail.pinkBorder a.hot-link { background-color: #c0004e; color: white; }
.program-detail.pinkBorder a.hot-link:hover { background-color: white; color: #c0004e; }
.program-detail.greenBorder a.hot-link { background-color: #7fba00;  color: white; } 
.program-detail.greenBorder a.hot-link:hover { background-color: white; color: #7fba00; } 
.program-detail.seaBlueBorder a.hot-link { background-color: #0699bf; color: white; }
.program-detail.seaBlueBorder a.hot-link:hover { background-color: white; color: #0699bf; }
.program-detail.grayLighterBorder a.hot-link { background-color: #7d7d7d; color: white; }
.program-detail.grayLighterBorder a.hot-link:hover { background-color: white; color: #7d7d7d; }
.program-detail.seaGreenBorder a.hot-link { background-color: #01a89e; color: white; }
.program-detail.seaGreenBorder a.hot-link:hover { background-color: white; color: #01a89e; }
.program-detail.grayDarkBorder a.hot-link { background-color: #4d4d4d; color: white; }
.program-detail.grayDarkBorder a.hot-link:hover { background-color: white; color: #4d4d4d; }
.program-detail.blueBorder a.hot-link { background-color: #009ee0; color: white; }
.program-detail.blueBorder a.hot-link:hover { background-color: white; color: #009ee0; }
.program-detail.blueDarkBorder a.hot-link { background-color: #043D2B; color: white; } /* #002b52 */
.program-detail.blueDarkBorder a.hot-link:hover { background-color: white; color: #043D2B; } /* #002b52 */
.program-detail.greenDarkBorder a.hot-link { background-color: #819705; color: white; }
.program-detail.greenDarkBorder a.hot-link:hover { background-color: white; color: #819705; }
.program-detail.redBorder a.hot-link { background-color: #bc0505; color: white; }
.program-detail.redBorder a.hot-link:hover { background-color: white; color: #bc0505; }
/* For the +/- sprite used for hidden details eg 'International Students' */
.expand-details { margin-bottom: 50px; }
.expand-details li { padding: 0 5px; }
.expand-details li:first-child { border-right: 1px solid #2d2d2d; padding-left: 0px; padding-right: 12px; }

/* expandible block which uses +/- sprite position -1530px in sprites.png */
.is-expandible:hover { cursor: pointer; }
.is-expandible div { display: none; margin-top: 5px; margin-left: 0px; }

/* Back to program menu link for program pages */ 
.mob-back-to-menu { display: none; text-align: right; }
.mob-back-to-menu a {
  background: url(/media/vancouver-community-college/style-assets/css/style-images/up-arrow_blue.png) no-repeat 10px 7px ; /* up-arrow_blue.png */
  float: right ;
  display: block;
  width: 200px;
  height: 100%; 
}
@media screen and (max-width: 940px) {
  .mob-back-to-menu { display: block;}
}

  /* Program details, program status boxes responsive <= 480px ie for phone */
@media screen and (max-width: 480px) {
  .span820.expand-details { margin-left: 5px !important; } 
  .prog-detail-tab { display: none; }
  .program-detail .program-title {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     letter-spacing: -1px;
     color: #2d2d2d;
     font-weight: bold;
     font-size: 1.17em;
     display: block; 
     padding-top: 12px;
     margin-top: -10px;
     margin-bottom: 10px;
  }
  .program-detail { color: white; border: none; } 
  .program-detail .program-title:hover { cursor: pointer; }
  .program-detail .program-title a {
    display: block;
    width: 86.84211%;
    color: #2d2d2d; 
    background: url(/media/vancouver-community-college/style-assets/css/style-images/mob-back-to-program-menu.png) no-repeat 0px 0px;  /* mob-back-to-program-menu.png */
    padding-left: 13.15789%;
  }
  #contact .program-title a { color: #fff;}
  .program-detail .program-detail-title { display: block; }
  .program-detail .program-detail-title p {
    padding-left: 15px;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 2px solid white;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    letter-spacing: -1px; 
  }
  .program-detail h2, .program-detail h3, .program-detail a { color: white; }
  .program-detail .btn-group a { width: 100%; padding-top: 8px ; padding-bottom: 8px  }
  .program-detail .btn-large  { padding-left: inherit !important;  padding-right: inherit !important; font-size: 14px } 

  #applyNow .table-wrapper .pinned { background-color: #c0004e !important; }
  /* Specific background colors for program details boxes */  
  #applyNow .program-detail { background-color: #c0004e; }
  #progDescription .program-detail { background-color: #7fba00;}
  #admissionReqs .program-detail { background-color: #0699bf; }
  .program-detail .table th {
    background-repeat: no-repeat;
    background-position: 18px 12px;
    padding: 10px 3.125% 10px 3.125% ; /* 10 / 320 */ 
  }
  .mob-back-to-menu a { background: url(/media/vancouver-community-college/style-assets/css/style-images/up-arrow_blue.png) no-repeat 20px 7px; /* up-arrow_blue.png */ }

  /*----------------Dept marketing page buttons-------------------*/
  #dept-news .program-detail { background-color: #05997e; }
  #dept-bios .program-detail {background-color: #99cc00; }
  #dept-testimonials .program-detail { background-color: #b3a900; }
  #dept-events .program-detail { background-color: #659400; }
  #dept-partnerships .program-detail { background-color: #3c9495; }
  #dept-galleries .program-detail { background-color: #5ba20b; }
  #dept-awards .program-detail {background-color: #73b89b; }
  #dept-success .program-detail {background-color: #c7be14; }
  /*-----------------------------------*/
  #courseSched .program-detail { background-color: #7d7d7d; }
  #fees .program-detail { background-color: #01a89e; }
  #fees .program-detail { background-color: #01a89e; }
  #programFAQ .program-detail { background-color: #4d4d4d; }
  #infoSessions .program-detail { background-color: #009ee0; }
  #contact .program-detail { background-color: #043D2B; } /* #002b52 */
  #contact .program-detail input[type=submit] { border-color: #687c87; }
  #progHighlights .program-detail { background-color: #819705; }
  #career .program-detail { background-color: #bc0505; } 

}/* End media query Program details, program status boxes responsive for phone */

/* Program details, program status boxes responsive <= 767px - uses phone view */
@media screen and (max-width: 768px) {
  /* tables */
  iframe { width: 100% !important;}
  .centered iframe { padding: 0 0% ; /* 150px */ }
  .table-wrapper { width: 100%; }
  /* Course availability table head div */
  /* Add to main-site css */
  .course-outline-table-head .course-outline-download { float: left !important; margin-top: 6px; width: 49.25373134328358%; text-align: left;}
  .course-outline-table-head .course-credits {
    margin-top: 6px;
    text-align: left ;
    float: left !important;
    clear: left;
    margin-left: 0px;
    margin-right: 1.492537313432836px; 
    width: 49.25373134328358%;
  }
  .course-outline-table { width: 100%; border-bottom-color: #b9b9b9;  }
  .course-outline-table td {
    border-bottom-color: #b9b9b9;
    border-bottom-width: 1px ;
    border-left: none ;
    border-right-width: 0.2941176470588235% ; /* 2px /~680px - width of the row at this resolution */ 
    display: block;
    width: 46.76902479053295% !important;
    padding: 4px 1.468428781204112% !important; /* ~10px */
    float: left;
    min-height: 40px; 
  }
  .course-outline-table td:first-child { border-left-width: 0px !important; text-align: center; }
  .course-outline-table td.course-start-end, .course-outline-table td.course-time  { border-bottom: none;  }
  .course-outline-table td.course-price, .course-outline-table td.course-day, .course-outline-table td.course-time  {  width: 47.06314243759178% ; border-right: none;} 
  /* End add to main-site css */
  .program-status .table, .apply-now-table { width: 99%; }
  .apply-now-table td { background-color: white; color: #2d2d2d; }
  .container.program-menu-wrap, .container.program-descriptions-wrap { width: 100% !important; padding: 0px !important; }
  .program-menu { width: 93.75%; /* 300px / 320px */ background-color: #b9b9b9; padding: 5px 3.125% 0% 3.125%; /* 10px / 320px */ }
  .program-menu .prog-menu-item { width: 48.33333%; /* 145px / 300px */ margin-right: 3.33333% !important; /* 10px / 300px */ margin-bottom: 10px !important; }
  .program-menu .prog-menu-item:nth-child(even) { margin-right: 0% !important; }
  .program-detail {
    /*Hidden in Desktop*/
    width: 95%;
    /* padding left and right ~8px, width is 304px */
    padding-left: 2.5%;
    /* 8px / 320px */
    padding-right: 2.5%;
    /* 8px / 320px */
  }
  .program-detail a { text-decoration: underline; }
  .program-detail a:hover { text-decoration: none; }

}/* End media query Program details, program status boxes responsive <= 767px */
@media screen and (max-width: 392px) { .course-outline-table td { width: 46.45523970202947% !important; }}

@media screen and (max-width: 852px) {
  .program-menu {
    width: 93.75%; /* 300px / 320px */
    background-color: #b9b9b9;
    padding: 5px 3.125% 0% 3.125%; /* 10px / 320px */ 
  }
  .program-menu .prog-menu-item {
    width: 48.33333%;
    /* 145px / 300px */
    margin-right: 3.33333% !important;
    /* 10px / 300px */
    margin-bottom: 10px !important;
  }
  .program-menu .prog-menu-item:nth-child(even) { margin-right: 0% !important; }
}

/* Program details boxes responsive */
/* Image slideshow */
.image-slider-wrap { margin-bottom: 60px; }
.image-slider-wrap .slideshow { margin-left: 20px !important; }
.image-slider-wrap h3 {
  position: absolute;
  bottom: 30px;
  left: 0px;
  background-color: #7fba00; 
  color: white;
  width: 45.1219512195122%;
  padding-left: 2.43902%;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 1.21951%;
  font-family:  'Source Sans Pro','EdmondSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: normal;
  font-weight: 500;
  font-size: 1.625em;
  /* 26px */
  /* background opacity */
  background-color: rgba(127, 186, 0, 0.75); 
}
.image-slider-wrap h3 a {display: block; color: inherit; background-color: transparent; }
.image-slider-wrap .image-slide { width: 820px; height: 500px; overflow: hidden; margin-bottom: 20px; }
.image-slider-wrap img { width: 820px; }
.image-slider-wrap .next, .image-slider-wrap .prev { position: absolute; width: 40px; height: 500px; top: 0px; }
.image-slider-wrap .next span, .image-slider-wrap .prev span {
  display: block;
  height: 40px;
  width: 40px;
  margin-top: 230px;
  background-image: url(/media/vancouver-community-college/style-assets/css/style-images/sprites-23-june-2016.png); /* sprites.png */
  background-repeat: no-repeat; 
 }
.image-slider-wrap .next span:hover, .image-slider-wrap .prev span:hover { cursor: pointer; }
.image-slider-wrap .next { right: 0px; }
.image-slider-wrap .next span { background-position: 7px -125px; }
.image-slider-wrap .prev { left: 0px; }
.image-slider-wrap .prev span { background-position: 9px 0px; }
/* End Image slideshow */

/** Responsive slider on inner pages for responsiveslides.js slideshow **/
.slideshow.inner-slider, .slideshow-resp.inner-slider {margin: 20px auto; width: 90%; height: 520px;  }
.slideshow-resp.inner-slider ul.rslides { margin: 0px auto; width: 100%; overflow: hidden; position: relative;   }
.slideshow-resp.inner-slider ul.rslides li { 
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0; 
}
.slideshow-resp.inner-slider .rslides li:first-child { position: relative; display: block; float: left;  }
.slideshow-resp.inner-slider .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }
.slideshow-resp.inner-slider .rslides_nav  { background-image: url(/media/vancouver-community-college/style-assets/css/style-images/sprites-23-june-2016.png) } /* sprites.png */
.slideshow-resp.inner-slider .rslides_nav.prev { background-position: 9px 0px }
.slideshow-resp.inner-slider .rslides_nav.next { background-position: 17px -125px }

@media screen and (max-width: 900px) { 
  .slideshow-resp.inner-slider { height: 500px; }
 }
@media screen and (max-width: 800px) { 
  .slideshow-resp.inner-slider { height: 450px; }
}
 @media screen and (max-width: 768px) { 
  .slideshow-resp.inner-slider { height: 402px; }
}
@media screen and (max-width: 600px) { 
  .slideshow-resp.inner-slider { height: 296px; }
}
@media screen and (max-width: 480px) { 
  .slideshow-resp.inner-slider { height: 241px; }
  .slideshow-resp.inner-slider .rslides_nav  { background-image: none; width: 5% }
  .slideshow-resp.inner-slider .rslides_nav.prev { 
    left: -5%;
    background-position: 0px 0px ; 
    background-image: url(/media/vancouver-community-college/style-assets/css/style-images/arrow-left-dark-small.png) ;
  }
  .slideshow-resp.inner-slider .rslides_nav.next { 
    right: -7%; background-position: 0px 0px; background-image: url(/media/vancouver-community-college/style-assets/css/style-images/arrow-right-dark-small.png) ;
  }
}
@media screen and (max-width: 400px) { 
  .slideshow-resp.inner-slider { height: 206px; }
}
@media screen and (max-width: 350px) { 
  .slideshow-resp.inner-slider { height: 178px; }
}
/* Image slideshow Responsive for cycle.js slideshow */
@media screen and (max-width: 480px) {
  .image-slider-wrap {
    margin-bottom: 20px;
    padding: 0px;
    width: 100%;
    min-width: 480px; 
  }
  .image-slider-wrap .slideshow { margin-left: 0px !important; }
  .image-slider-wrap .slideshow-items { width: 100%; max-width: 260px; }
  .image-slider-wrap h3 { font-size: inherit; }
  .image-slider-wrap .image-slide { width: 100%; height: 159px; overflow: hidden; }
  .image-slider-wrap img { width: 100% !important; max-width: 260px; }
  .image-slider-wrap .next, .image-slider-wrap .prev { width: 30px; height: 159px; }
  .image-slider-wrap .next span, .image-slider-wrap .prev span { width: 30px; height: 20px; background-position: 0px; margin-top: 72px; }
  .image-slider-wrap .prev span {
    background-image: url(/media/vancouver-community-college/style-assets/css/style-images/arrow-left-dark-small.png); /* arrow-left-dark-small.png */
    background-position: 19px 0px; 
  }
  .image-slider-wrap .next span {
    background-image: url(/media/vancouver-community-college/style-assets/css/style-images/arrow-right-dark-small.png); /* arrow-right-dark-small.png */
    background-position: 2px 0px; 
  } 
} /* End Image slideshow Responsive <= 480px */
/* Student testimonial boxes */
#student-testimonials h3 {
  background-color: #7fba00;
  color: white;
  width: 45.12195%;
  /* padding is 20px left and right, so it's half the width minus 40 = 370px */
  padding: 0px 1.21951%; /* 12px / 820 px */ 
}
#student-testimonials .testimonial { width: 816px; border: 2px solid #7fba00; border-bottom: none; } 
#student-testimonials .testimonial sub, #student-testimonials .testimonial sup { font-size: 3.1em; color: #7fba00; font-weight: bold; }
#student-testimonials .testimonial p { margin: 25px; margin-left: 0px; float: left; width: 728px; line-height: 1.6em; font-size: 1.1em; font-weight: 500; color: #4b4c4f; }
#student-testimonials .testimonial p.super { margin-right: 0px; margin-left: 25px; width: 23px; }
#student-testimonials .testimonial sup { margin-right: 1px; top: 0.2em; }
#student-testimonials .testimonial sub { margin-left: 1px; bottom: -0.7em; }
#student-testimonials .tesimonial-bottom { width: 816px; height: 37px; border: 2px solid #7fba00; border-top: none; position: relative; margin-bottom: 20px; }
#student-testimonials .tesimonial-bottom .bottom-left {
  position: absolute;
  bottom: 1px;
  left: 44px;
  width: 246px;
  border: 2px solid #7fba00;
  border-top: none;
  border-right: none;
  height: 34px;
  transform: skew(68deg, 0deg);
  -ms-transform: skew(68deg, 0deg);
  /* IE 9 */
  -webkit-transform: skew(68deg, 0deg);
  /* Safari and Chrome */
  display: none; 
}
#student-testimonials .tesimonial-bottom .student {
  position: absolute;
  bottom: -2px;
  right: -2px;
  color: #4d4d4d;
  background-color: #b9b9b9;
  text-align: right;
  width: 508px;
  clear: left;
  float: right;
  padding: 5px 20px;
  font-weight: bold; 
}
#student-testimonials .tesimonial-bottom .student .student-skew {
  display: none;
  background-color: inherit;
  position: absolute;
  height: 100%;
  width: 100px;
  left: -36px;
  bottom: 0px;
  transform: skew(48deg, 0deg);
  -ms-transform: skew(48deg, 0deg);
  /* IE 9 */
  -webkit-transform: skew(48deg, 0deg);
  /* Safari and Chrome */ 
 }

/* Student testimonial responsive */
@media screen and (max-width: 480px) {
  #student-testimonials {
    width: 98.75% !important;
    /* 320 - 4px for padding = 316px / 320px */
    margin: 0px !important;
    padding-left: 0.625%;
    /* 2px / 320px*/
    padding-right: 0.625%;
    /* 2px / 320px*/
    max-width: 480px;
    /* testimonial availiable width = 312 (316 -- 4px for the border) */ 
  }
  #student-testimonials h3 {
    width: 93.67088607594937%;
    letter-spacing: normal;
    margin-bottom: 8px;
    padding: 5px 3.16456%; 
  }
  #student-testimonials .testimonial { padding-top: 10px; width: 98.73418%; /* 312px / 316px */ }
  #student-testimonials .testimonial p {
    width: 286px !important;
    line-height: 1.6em;
    margin: 0;
    margin-right: 2px;
    margin-left: 5px;
    margin-top: 10px;
    font-size: 1em;
    line-height: inherit;
    font-weight: normal; 
  }
  #student-testimonials p.super {
    width: 1.602564102564103% !important;
    /* 5px */
    margin: 0px !important;
    margin-left: 5px !important;
    margin-top: 10px; 
  }
  #student-testimonials p.super sup { font-size: 1.3em; }
  #student-testimonials p sub { font-size: 1.3em !important; margin-left: 3px !important; bottom: -0.9em; }
  .tesimonial-bottom { width: 312px !important; border-right: 2px solid #7fba00!important; }
  .student {
    width: 290px !important;
    /* 280 / 312px */
    bottom: 0px;
    right: 0px;
    font-size: 0.85em;
    padding: 4px 1.602564102564103% !important;
    /* 5px */
    line-height: 1.3em; 
  } 
}/* Student testimonial responsive <= 480px */

/*==================================== 
Responsive utility class overrides 
to make layout responsive. 
Supports Desktop, tablet and phone.

Phone  0px <= 768px
Tablet 769px <= 992px 
=====================================*/

.visible-desktop { display: inherit !important; }
.hidden-tablet { display: inherit !important; }
.hidden-desktop { display: none !important; }

@media screen and (max-width: 768px) {
  .visible-phone { display: block !important;} 
  .hidden-phone { display: none !important;}
}

@media screen and (min-width: 769px) and (max-width: 992px) {
  .visible-tablet { display: inherit !important;} 
  .hidden-tablet { display: none !important;}
}

/* this covers everything up to 768px ie phone and tablet portrait */
@media screen and (max-width: 769px) and (min-width: 1020px) {
   div.mob-back-to-menu { 
    display: block !important;
    width: 98.75%;
    text-align: right;
    margin-top: 10px; 
   }
  .mob-back-to-menu a { background: url(/media/vancouver-community-college/style-assets/css/style-images/up-arrow_blue.png) no-repeat 10px 7px; /* up-arrow_blue.png */ }
  .back-to-boxes { display: none !important;}
}

.hidden-intl { display: none !important; }

/* Brand reskin 2023/2024 adjustments */
/* Variables */

:root {
  	--spacer: 12px;
  	--vcc-body-text: #3a4150;
	--vcc-primary: #043D2B;
    --vcc-secondary: #ADF979;
    --bs-primary: #043D2B;
  	--vcc-dark: #3A8600;
	--vcc-light: #E6F2CC;
    --vcc-lighter: #F8FBF0;
    --vcc-grey: #F3F3F3;
    --vcc-grey-primary-contrast-text: #2A6100;
    --vcc-indigenous-primary: #cb333b;
    --vcc-indigenous-primary-body-text: #fff;
    --vcc-indigenous-light: #ffbdc5;
    --vcc-gray-100: #3a4150;
    --vcc-gray-200: #616773;
    --vcc-gray-300: #888c95;
    --vcc-gray-400: #d7d8db;
    --vcc-gray-500: #f3f3f3;
    --vcc-green-100: #043d2b;
    --vcc-green-200: #356456;
    --vcc-green-300: #84bd00;
    --vcc-green-400: #adf979;
    --vcc-green-500: #e1fdcf;      
    --vcc-off-black: #000d09;
    --vcc-white: #ffffff;
    --vcc-red: #cc0025;
    --vcc-orange: #ffca53;
}
      
.gray-100 { color: var(--vcc-gray-100); }
.gray-200 { color: var(--vcc-gray-200); }
.gray-300 { color: var(--vcc-gray-300); }
.gray-400 { color: var(--vcc-gray-400); }
.gray-500 { color: var(--vcc-gray-500); } 
.bg-gray-100 { background-color: var(--vcc-gray-100); }
.bg-gray-200 { background-color: var(--vcc-gray-200); }
.bg-gray-300 { background-color: var(--vcc-gray-300); }
.bg-gray-400 { background-color: var(--vcc-gray-400); }
.bg-gray-500 { background-color: var(--vcc-gray-500); }  
.green-100 { color: var(--vcc-green-100); }
.green-200 { color: var(--vcc-green-200); }
.green-300 { color: var(--vcc-green-300); }
.green-400 { color: var(--vcc-green-400); }
.green-500 { color: var(--vcc-green-500); } 
.bg-green-100 { background-color: var(--vcc-green-100); }
.bg-green-200 { background-color: var(--vcc-green-200); }
.bg-green-300 { background-color: var(--vcc-green-300); }
.bg-green-400 { background-color: var(--vcc-green-400); }
.bg-green-500 { background-color: var(--vcc-green-500); }         

      .row.sticky { 
        background-color: var(--vcc-green-100); 
        border-color: var(--vcc-green-100);  
      }
     
      section.vc-logo-desktop {
        display: flex;
        align-items: flex-end;
      }
      
      div.vc-logo-mobile {
        display: inline-flex; 
        align-items: flex-end;        
        margin: 15px;
        width: 50%;
      }      

      .vc-logo-desktop > span,
      .vc-logo-mobile > span {
        width: 13%;
        max-width: 124px;
        min-width: 68px;
        flex: 1 0 auto;
        display: block;
        align-self: end;

    padding-right: 2em;         
    border-right: 1px solid;
    border-image: linear-gradient(var(--vcc-green-100) 34%, var(--vcc-white) 34%, var(--vcc-white) 100%) 6;
                
      }
      
      .vc-logo-desktop > span a,
      .vc-logo-mobile > span a { width: 100%; }
      
      .vc-logo-desktop > span img,
      .vc-logo-mobile > span img { border: 0; }
      
      .vc-logo-desktop > a,
      .vc-logo-mobile > a  { 
        height:64px; 
        position:relative;
      }
      
      .vc-logo-desktop > a { flex: 0 1 auto; }
      .vc-logo-mobile > a { flex: 1 0 60%;}
      
      .vc-logo-desktop > a div,
      .vc-logo-mobile > a div {       
        margin-left: 2em; 
        /*border-left: 1px solid #ffffff; /*#ADF979*/*/
        height:100%;
      }

      
      .vc-logo-desktop > a div span.header-site-title,
      .vc-logo-mobile > a div span.header-site-title {
        font-size: calc(24px + (29 - 24) * ((100vw - 300px) / (1600 - 300))); 
        line-height: 1.3;
        letter-spacing: normal;
        margin: 0;
        position:absolute; 
        bottom:-10px;
        font-weight: 700;
      }

 
.no-margin { margin: 0 !important; }
.no-padding { padding: 0 !important; }
.no-padding iframe { padding: 0 !important; }