/* _______________________________________________

320 and Up boilerplate extension
Andy Clarke http://about.me/malarkey
Keith Clark 
Version: 2
URL: http://stuffandnonsense.co.uk/projects/320andup/
License: http://creativecommons.org/licenses/MIT/

_____________________________________________________

1 ROOT
2 HEADINGS
3 TYPOGRAPHY
4 LINKS
5 FIGURES & IMAGES
6 TABLES
7 FORMS
8 BANNER
9 NAVIGATION
10 CONTENT
11 MAIN
12 COMPLEMENTARY
13 CONTENTINFO
14 GLOBAL OBJECTS
15 VENDOR-SPECIFIC 
16 MODERNIZR
17 TEMPLATE SPECIFICS
18 MEDIA QUERIES

COLOURS 

*/

/*Last updated: 12/8/2015, added audio description toggle buttons, socialLinks buttons adjusted*/

/*Last updated: 11/8/2016, adjusted tables,removed table hover*/



.clibar_share_buttonwrapper {
	position:fixed;
	left:0;
	top:1%;
	z-index:5;
}

.clibar_cornerTopRight { z-index:5; }

#feedback {
	position:fixed;
	top:40px;
	left:0;
}

#syllabus_links {
	position:fixed;
	top:60px;
	left:0;
}

div#share_content { left:400px; }

article,
aside,
details,
figcaption,
figure,
header,
hgroup,
nav,
section { display : inline-block; }

audio[controls],
canvas,
video { display : inline-block; *display : inline;
*zoom : 1;
}

/* 1. ROOT ============================================================================= */

html {
	overflow-y : scroll;
	background : rgb(255,255,255);
/*background : rgb(255,255,255) url(../img/tmp/grid.png) repeat-y 50% 0;*/ }

body {
	margin : 0 auto;
	padding : 0;
	width : 90% /* 252px */;
	max-width:900px;
	line-height:1.4;
	color:#000;
	font-family:Verdana, helvetica, Arial, sans-serif;
	font-size:75%;
	background-color : transparent;
	/*fix for stricky footer*/
	height: 100%;
}

button,
input,
select,
textarea {
	font-family : "Helvetica Neue", Helvetica, Arial, sans-serif;
	color : rgb(40,40,40);
}

/* 2. HEADINGS (320 and Up typography defaults) ==================================================== */
img { border:none;}

#sites2see { width:50px;}
	
	
h1, 
h2,
h3,
h4,
h5,
h6 {
	font-family : "Helvetica Neue", Helvetica, Arial;
	font-weight : bold;
}

h1 {    margin: 0 0 0 10px;
        padding-top:15px;
        font-size : 1.8em;
	    color: #333;
	    display:inline-block;
        *display: inline;
}

.ui-accordion .ui-accordion-content
{
    overflow:hidden;
}

h2.ui-accordion-header {
	margin-bottom : 0;
	font-size : 1.3em;
	line-height : 1.2;
	background-color: #757575;
	/*background-image: url(graphics/h2-55px.jpg);*/
	background-repeat: no-repeat;
	background-position: right bottom;
}

h2.ui-accordion-header.ui-state-active { margin-bottom:0 }

/*  custom.css for h2 bars 1 to 8   */


/* ------ All bars STATIC ------ */

div#accordion h2.ui-state-default a{
	/*	background-color:#007C59;*/
	color:#fff;
}

/* ------ H2 Bar 1 ------ */

div#accordion h2.ui-state-default:nth-of-type(1),div#accordion h2.ui-state-active:nth-of-type(1) a{
	background-color:#0074aa;
	color:#fff;
}

/* ------ H2 Bar 2 ------ */

div#accordion h2.ui-state-default:nth-of-type(2),div#accordion h2.ui-state-active:nth-of-type(2) a{
	background-color:#006291;
	color:#fff;
}

/* ------ H2 Bar 3 ------ */

div#accordion h2.ui-state-default:nth-of-type(3),div#accordion h2.ui-state-active:nth-of-type(3) a{
	background-color:#005177;
	color:#fff;
}

/* ------ H2 Bar 4 ------ */

div#accordion h2.ui-state-default:nth-of-type(4),div#accordion h2.ui-state-active:nth-of-type(4) a{
	background-color:#00405e;
	color:#fff;
}

/* ------ H2 Bar 5 ------ */

div#accordion h2.ui-state-default:nth-of-type(5),div#accordion h2.ui-state-active:nth-of-type(5) a{
	background-color:#002e44;
	color:#fff;
}

/* ------ H2 Bar 6 ------ */

div#accordion h2.ui-state-default:nth-of-type(6),div#accordion h2.ui-state-active:nth-of-type(6) a{
	background-color:#001d2b;
	color:#fff;
}

/* ------ H2 Bar 7 ------ */

div#accordion h2.ui-state-default:nth-of-type(7),div#accordion h2.ui-state-active:nth-of-type(7) a{
	background-color:#000e14;
	color:#fff;
}

/* ------ H2 Bar 8 ------ */

div#accordion h2.ui-state-default:nth-of-type(8),div#accordion h2.ui-state-active:nth-of-type(8) a{
	background-color:#000e14;
	color:#fff;
}


/* ------ All Bars - SELECTED ------ */

div#accordion h2.ui-state-active a {
	background-color:#9191FE;
	color:#fff;
}

/*----  end custom.css ----- */


h3 {
	margin-bottom : 1em;
    font-size : 1em; /* 24 / 16 = 1.5 */
	line-height : 1.3;
}

h4 {
	margin-bottom : 1.25em;
	font-size : 0.9em; /* 20 / 16 = 1.25 */
	line-height : 1.25;
}

h5 {
	margin-bottom : 1.5em;
	font-size : 0.8em; /* 16 / 16 = 1 */
}

h6 { font-size : 0.7em; /* 16 / 16 = 1 */ }

/* 3. TYPOGRAPHY (320 and Up typography defaults) ============================================================================= */

p,
ol,
ul,
dl,
address {
	margin-bottom : 1.5em;
	line-height:1.4;
	/*font-size :small;  16 / 16 = 1 */
}

p {  
	hyphens : auto;
	margin:1em auto;
	text-align : left;
	max-width:860px;
	padding:0;
}

.ui-tabs p{ font-size:0.8em; line-height:1.6em;  }



ul,
ol {
	margin : 0 0 1.5em 24px;
	padding : 0 0 0 24px;
}

li ul,
li ol {
	margin : 0;
	font-size : 1em; /* 16 / 16 = 1 */
}

dl,
dd { margin-bottom : 1.5em; }

dt { font-weight : normal; }

blockquote {
	margin : 1em auto;
	padding :0.3em;
	/*border-left : 1px solid rgb(200,200,200);*/
background-color: #F4F4D9;
	max-width:450px;
}

.wrapped.left + blockquote,
blockquote + blockquote {
	float:left;
	width:80%; /* abitrary number */
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content : '';
	content : none;
}

abbr[title] {
	border-bottom : 1px dotted;
	cursor : help;
}

b,
strong { font-weight : bold; }

dfn { font-style : italic; }

hr {
	display : block;
	margin : 1em 0;
	padding : 0;
	height : 1px;
	border : 0;
	border-top : 1px solid rgb(204,204,204);
}

ins {
	background-color : rgb(240,240,240);
	color : rgb(0,0,0);
	text-decoration : none;
}

mark {
	background-color : rgb(240,240,240);
	color: rgb(0,0,0);
	font-style : italic;
	font-weight : bold;
}

pre,
code,
kbd,
samp {
	font-family : monospace, monospace;
	_font-family : 'courier new', monospace;
	font-size : .875em;
	line-height : 1.5;
	margin-left: 1em;
}

pre {
	white-space : pre;
	white-space : pre-wrap;
	word-wrap : break-word;
}

q { quotes : none; }

q:before,
q:after {
	content : "";
	content : none;
}

small { font-size : 1em; /* 16 / 16 = 1 */ }

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

sup { top : -.5em; }

sub { bottom : -.25em; }

/* 4.LINKS ============================================================================= */


a:link { color:#039; 	text-decoration:none; }
a:visited { color:#609; } 
a:hover { color:#039; 	text-decoration:underline; }
a:active { color:#039;  text-decoration:underline; }
a:focus { color:#039; text-decoration:underline; }


.ui-widget-content a:link { color:#039; 	text-decoration:none; }
.ui-widget-content a:visited { color:#609 !important;  }
.ui-widget-content a:hover { color:#039; 	text-decoration:underline; }
.ui-widget-content a:active { color:#039;  text-decoration:underline; }
.ui-widget-content a:focus { color:#039; text-decoration:underline; }


/* Expand sections =========================================================================*/
/*p.expand { clear:both; }

#content div.toggle p.expand,
#content div.toggle div.toggle { margin-left:1em; }*//* nested expandable sections */

a.expandable {
	padding-left:18px;
	display:inline-block; /* fixes an IE bug where the first plus is not clickable */
}

a.closed { background: url(graphics/plus.png) no-repeat top left; }

a.open { background: url(graphics/minus.png) no-repeat top left; }

#popup #nav li, #show #nav li {
    border: 1px solid #000000;
    padding: 1px 2px 2px;
}
#nav li {
    color: #333333;
    display: inline;
    font-size: 1em;
    list-style: none outside none;
    margin-left: 1em;
}
/* 5.FIGURES & IMAGES ============================================================================= */

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

figure {
	margin : 0.5em;
	padding:0.2em;
	max-width: 100%;
}

figcaption {
    
	display : block;
	font-size:0.8em;
	font-weight : normal;
	width:100%; margin:0 auto;
}
figcaption span{
	padding-left:1em;
}

.fig200  { width:200px; text-align:left; }
.fig300  { width:300px;  text-align:left;}
.fig400  { width:400px; text-align:left;  }


figure.leftwrap { float:left; }
figure.rightwrap { float:right; }
figure.center { text-align:center;  width:100% ;  }

figure.center img {  margin: 0 auto; }


/* 6.TABLES ============================================================================= */


table {	width : 100%;
 border-collapse:collapse;
  }

table , td , th{
   border:1px #333 solid;

}

thead {   background-color: #CCC;    }



/* 7.FORMS ============================================================================= */

form { margin : 0; }

fieldset {
	margin-bottom : 1.5em;
	padding : 0;
	border-width : 0;
}

legend {
*margin-left : -7px;
	padding : 0;
	border-width : 0;
}

label {
	font-weight : normal;
	cursor : pointer;
}

button,
input,
select,
textarea {
	font-size : 100%;
	margin : 0;
	vertical-align : baseline;
*vertical-align : middle;
}

button,
input { line-height : normal; *overflow : visible;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] { cursor : pointer; }

input[type="checkbox"],
input[type="radio"] { box-sizing : border-box; }

input[type="search"] { box-sizing : content-box; }
 button::-moz-focus-inner, input::-moz-focus-inner {
padding : 0;
border : 0;
}

textarea {
	overflow : auto;
	vertical-align : top;
}

/* Colors for form validity */
input:valid, textarea:valid {
/* Styles */ }
 input:invalid, textarea:invalid {
-webkit-box-shadow : 0 0 2px rgb(255,0,0);
-moz-box-shadow : 0 0 2px rgb(255,0,0);
box-shadow : 0 0 2px rgb(255,0,0);
}
 .no-boxshadow input:invalid, .no-boxshadow textarea:invalid {
background-color : rgb(240,221,221);
}

/* 8 BANNER 		============================================================================= */
header { 
	padding-top:8px;
	padding-bottom: 8px; 
	width:100%;
	background-color:#fff;

	}

.st_sharethis_custom {
	/*background: url("graphics/bookmark.png") no-repeat scroll left top transparent;*/
	padding:20px 16px 0;
	margin-left:8px;
}

#socialLinks {
position:absolute;
top:3px;
right:2%;

}

/* 9 NAVIGATION 	============================================================================= */
/*h2.ui-accordion-header.ui-state-active a { background: url("themes/images/ui-bg_highlight-soft_75_cccccc_1x100.png") repeat-x scroll 50% 50% #A4ADAD; }*/
/* ----- ui.all.css plugin stylesheet  --------- */

.ui-state-default, .ui-widget-content .ui-state-default { 
border: 1px solid #999; 
/*background: #E2E2E2 url(images/ui-bg_highlight-hard_75_a4adad_1x100.png) 50% 50% repeat-x; */
font-weight: normal; 
color: #555555; 
outline: none;  
 }
.ui-widget-content li.ui-state-default { background-color:#F7F7F7; }

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #999999; background: #f2f2f2; font-weight: normal; color: #000; outline: none; }


.ui-tabs { padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em 0 0 .2em ; }
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 5px -1px 0; padding: 0; }



.ui-tabs { /* for tabbed sections inside the accordions */ clear:both; }

.ui-tabs .ui-tabs-nav li,
.ui-tabs .ui-tabs-nav li a {/* tabbed section items should be 100% width in small screens and inline for larger */ width:100%; }

/* 10 CONTENT 		============================================================================= */
.content { width:100%; }

#accordion { max-width:100%; }


#tabs { height:100%; overflow:hidden; } 




.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video-wrapper {
	width: 600px;
	max-width: 100%;
	margin: 0 auto 0;
}

iframe {
	border:none;
	
}

/* 11 MAIN 			============================================================================= */
/* 12 COMPLEMENTARY ============================================================================= */
/* 13 CONTENTINFO 	============================================================================= */

/* 14 GLOBAL OBJECTS ============================================================================= */


footer p{ text-align:center; line-height: 1.1em;   }

footer a {  margin: 20px 0; } 

#DET , #NEALS , #copyright { display:block; text-align:center; }

/*-- fix for sticky footer in show window--*/
 #show .footer  {
    position: static;
    bottom: 20px;
    left: 5%; 
	right: 5%;
	height: 20px;
}

.footer p{line-height: 1.1em;}
.footer a {  margin: 20px 0; }  
.push { /*ensures content layer clears footer*/
	height:20px;	/*must equal the same height as the footer*/
	clear:both;
}
/*---end of fix--*/

.clearfix:before,
.clearfix:after {
	content : "\0020";
	display : block;
	/*height : 0;*/
	min-height: 100%;
	overflow : hidden;
}

.clearfix:after { clear : both; }

/* 15 VENDOR-SPECIFIC ============================================================================= */

html {
	-webkit-overflow-scrolling : touch;
	-webkit-tap-highlight-color : rgb(52,158,219);
	-webkit-text-size-adjust : 100%;
	-ms-text-size-adjust : 100%;
}

.clearfix { zoom : 1; }

::-webkit-selection {
background : rgb(23,119,175);
color : rgb(250,250,250);
text-shadow : none;
}

::-moz-selection {
background : rgb(23,119,175);
color : rgb(250,250,250);
text-shadow : none;
}

::selection {
	background : rgb(23,119,175);
	color : rgb(250,250,250);
	text-shadow : none;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] { -webkit-appearance : button; }

::-webkit-input-placeholder {
font-size : .875em;
line-height : 1.4;
}
 input:-moz-placeholder {
font-size : .875em;
line-height : 1.4;
}

.ie7 img,
.iem7 img { -ms-interpolation-mode : bicubic; }

input[type="checkbox"],
input[type="radio"] { box-sizing : border-box; }

input[type="search"] {
	-webkit-box-sizing : content-box;
	-moz-box-sizing : content-box;
}
 button::-moz-focus-inner, input::-moz-focus-inner {
padding : 0;
border : 0;
}

p {
	/* http://www.w3.org/TR/css3-text/#hyphenation */
-webkit-hyphens : auto;
	-webkit-hyphenate-character : "\2010";
	-webkit-hyphenate-limit-after : 1;
	-webkit-hyphenate-limit-before : 3;
	-moz-hyphens : auto;
}

/* Non-semantic helper classes 

.ir { display : block; 
overflow : hidden; 
background-repeat : no-repeat; 
text-align : left; 
text-indent : -999em; 
direction : ltr; }

.ir br { 
display : none; }

.hidden { 
display : none; 
visibility: hidden; }

.visuallyhidden { 
position : absolute;
margin : -1px;
padding : 0;
height  : 1px;
width : 1px;
overflow : hidden;
border : 0; 
clip : rect(0 0 0 0); }

.visuallyhidden.focusable:active, 
.visuallyhidden.focusable:focus { 
position: static;
margin : 0; 
height : auto; 
width : auto;
overflow: visible; 
clip : auto; }

.invisible { 
visibility : hidden; } */

/* 16 MODERNIZR ============================================================================= */

/* audio */
/* applicationcache */
/* backgroundsize */
/* borderimage */
/* borderradius */
/* boxshadow */
/* canvas */
/* canvastext */
/* cssanimations */
/* csscolumns */
/* cssgradients */
/* cssreflections*/
/* csstransforms */
/* csstransforms3d */
/* csstransitions */
/* draganddrop */
/* flexbox */
/* fontface */
/* geolocation */
/* hashchange */
/* history */
/* hsla */
/* indexeddb */
/* inlinesvg */
/* localstorage */
/* multiplebgs */
/* opacity */
/* postmessage */
/* rgba */
/* sessionstorage */
/* smil */
/* svg */
/* svgclippaths */
/* textshadow */
/* touch */
/* video */
/* webgl */
/* websqldatabase */
/* websockets */
/* webworkers */

/* 17 TEMPLATE SPECIFICS ============================================================================= */


/* 18 MEDIA QUERIES ============================================================================= */

@media print {

/* 1 ROOT ============================================================================= */

* {
	background : transparent !important;
	color : black !important;
	text-shadow : none !important;
	filter : none !important;
	-ms-filter : none !important;
}
 @page {
margin : 0.5cm;
}

/* 2 HEADINGS ============================================================================= */

h2,
h3 {
	orphans : 3;
	widows : 3;
	page-break-after : avoid;
}

/* 3 TYPOGRAPHY ============================================================================= */

p {
	orphans : 3;
	widows : 3;
}

pre,
blockquote {
	border : 1px solid #999;
	page-break-inside : avoid;
}

abbr[title]:after { content : " (" attr(title) ")"; }

/* 4 LINKS ============================================================================= */

a,
a:visited {
	color : #444 !important;
	text-decoration : underline;
}

a[href]:after { content : " (" attr(href) ")"; }

a[href^="javascript:"]:after,
a[href^="#"]:after { content : ""; }

/* 5 FIGURES & IMAGES ============================================================================= */

img {
	max-width : 100% !important;
	page-break-inside : avoid;
}

/* 6 TABLES ============================================================================= */

thead { display : table-header-group; }

tr { page-break-inside : avoid; }

/* 7 FORMS ============================================================================= */
/* 8 BANNER ============================================================================= */
/* 9 NAVIGATION ============================================================================= */
/* 10 CONTENT ============================================================================= */
/* 11 MAIN ============================================================================= */
/* 12 COMPLEMENTARY ============================================================================= */
/* 13 CONTENTINFO ============================================================================= */
/* 14 GLOBAL OBJECTS ============================================================================= */

.ir a:after { content : ""; }
/* 15 VENDOR-SPECIFIC ============================================================================= */
/* 16 MODERNIZR ============================================================================= */
/* 17 TEMPLATE SPECIFICS ============================================================================= */

}

/* 480px */
@media only screen and (min-width: 480px) {

/* 1 ROOT 					============================================================================= */
/* 2 HEADINGS 				============================================================================= */
h1 {    margin: 0 0 0 10px;
           font-size : 3em;
}

#sites2see { width:87px;}


h1 img#dec {
	float:left;
	margin-right:50px;
}
/* 3 TYPOGRAPHY 			============================================================================= */
/* 4 LINKS 					============================================================================= */
/* 5 FIGURES & IMAGES 		============================================================================= */
.vjs-default-skin .vjs-big-play-button {
    left: 0.2em;
    top: 0.2em;
	border:1px red solid;
}
/* 6 TABLES 				============================================================================= */
/* 7 FORMS 					============================================================================= */
/* 8 BANNER 				============================================================================= */
/* 9 NAVIGATION				============================================================================= */


/* 10 CONTENT 				============================================================================= */
/* 11 MAIN 					============================================================================= */
/* 12 COMPLEMENTARY 		============================================================================= */
/* 13 CONTENTINFO 			============================================================================= */
/* 14 GLOBAL OBJECTS 		============================================================================= */



/* 15 VENDOR-SPECIFIC 		============================================================================= */
/* 16 MODERNIZR 			============================================================================= */
/* 17 TEMPLATE SPECIFICS 	============================================================================= */

}

/* 600px */
@media only screen and (min-width: 600px) {

/* 1 ROOT 					============================================================================= */
/* 2 HEADINGS 				============================================================================= */
/* 3 TYPOGRAPHY 			============================================================================= */
/* 4 LINKS 					============================================================================= */
/* 5 FIGURES & IMAGES 		============================================================================= */
/* 6 TABLES 				============================================================================= */
/* 7 FORMS 					============================================================================= */
/* 8 BANNER 				============================================================================= */
/* 9 NAVIGATION				============================================================================= */
.ui-tabs .ui-tabs-nav li,
.ui-tabs .ui-tabs-nav li a {/* tabbed section items should be 100% width in small screens and inline for larger */ width:auto; }
/* 10 CONTENT 				============================================================================= */
/* 11 MAIN 					============================================================================= */
/* 12 COMPLEMENTARY 		============================================================================= */
/* 13 CONTENTINFO 			============================================================================= */
/* 14 GLOBAL OBJECTS 		============================================================================= */


footer p{ text-align:center;  line-height: 2em;   }

footer a { margin: 40px; } 

#DET ,  #NEALS , #copyright { display:inline;  }


/* 15 VENDOR-SPECIFIC 		============================================================================= */
/* 16 MODERNIZR 			============================================================================= */
/* 17 TEMPLATE SPECIFICS 	============================================================================= */

}
@media all and (max-width: 640px) { 
	h1 {font-size:2em}
}

/* 768px */
@media only screen and (min-width: 768px) {
/* 1 ROOT 					============================================================================= */
/* 2 HEADINGS 				============================================================================= */
/* 3 TYPOGRAPHY 			============================================================================= */
/* 4 LINKS 					============================================================================= */
/* 5 FIGURES & IMAGES 		============================================================================= */
/* 6 TABLES 				============================================================================= */
/* 7 FORMS 					============================================================================= */
/* 8 BANNER 				============================================================================= */
/* 9 NAVIGATION				============================================================================= */
/* 10 CONTENT 				============================================================================= */
/* 11 MAIN 					============================================================================= */
/* 12 COMPLEMENTARY 		============================================================================= */
/* 13 CONTENTINFO 			============================================================================= */
/* 14 GLOBAL OBJECTS 		============================================================================= */
/* 15 VENDOR-SPECIFIC 		============================================================================= */
/* 16 MODERNIZR 			============================================================================= */
/* 17 TEMPLATE SPECIFICS 	============================================================================= */

}

/* 992px */
@media only screen and (min-width: 992px) {

/* 1 ROOT 					============================================================================= */
/* 2 HEADINGS 				============================================================================= */

h1 img#dec { margin-right:100px; }
/* 3 TYPOGRAPHY 			============================================================================= */
/* 4 LINKS 					============================================================================= */
/* 5 FIGURES & IMAGES 		============================================================================= */
/* 6 TABLES 				============================================================================= */
/* 7 FORMS 					============================================================================= */
/* 8 BANNER 				============================================================================= */

#socialLinks {
	
	position:static;
float:right;
top:5px;
right:5px;


}
/* 9 NAVIGATION				============================================================================= */
/* 10 CONTENT 				============================================================================= */
/* 11 MAIN 					============================================================================= */
/* 12 COMPLEMENTARY 		============================================================================= */
/* 13 CONTENTINFO 			============================================================================= */
/* 14 GLOBAL OBJECTS 		============================================================================= */
/* 15 VENDOR-SPECIFIC 		============================================================================= */
/* 16 MODERNIZR 			============================================================================= */
/* 17 TEMPLATE SPECIFICS 	============================================================================= */

}

/* 1382px */
@media only screen and (min-width: 1382px) {
/* 1 ROOT 					============================================================================= */
/* 2 HEADINGS 				============================================================================= */
/* 3 TYPOGRAPHY 			============================================================================= */
/* 4 LINKS 					============================================================================= */
/* 5 FIGURES & IMAGES 		============================================================================= */
/* 6 TABLES 				============================================================================= */
/* 7 FORMS 					============================================================================= */
/* 8 BANNER 				============================================================================= */
/* 9 NAVIGATION				============================================================================= */
/* 10 CONTENT 				============================================================================= */
/* 11 MAIN 					============================================================================= */
/* 12 COMPLEMENTARY 		============================================================================= */
/* 13 CONTENTINFO 			============================================================================= */
/* 14 GLOBAL OBJECTS 		============================================================================= */
/* 15 VENDOR-SPECIFIC 		============================================================================= */
/* 16 MODERNIZR 			============================================================================= */
/* 17 TEMPLATE SPECIFICS 	============================================================================= */

}

/* 2x */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
/* 1 ROOT 					============================================================================= */
/* 2 HEADINGS 				============================================================================= */
/* 3 TYPOGRAPHY 			============================================================================= */
/* 4 LINKS 					============================================================================= */
/* 5 FIGURES & IMAGES 		============================================================================= */
/* 6 TABLES 				============================================================================= */
/* 7 FORMS 					============================================================================= */
/* 8 BANNER 				============================================================================= */
/* 9 NAVIGATION				============================================================================= */
/* 10 CONTENT 				============================================================================= */
/* 11 MAIN 					============================================================================= */
/* 12 COMPLEMENTARY 		============================================================================= */
/* 13 CONTENTINFO 			============================================================================= */
/* 14 GLOBAL OBJECTS 		============================================================================= */
/* 15 VENDOR-SPECIFIC 		============================================================================= */
/* 16 MODERNIZR 			============================================================================= */
/* 17 TEMPLATE SPECIFICS 	============================================================================= */

}


/********* for google maps *****************/

/*reposition the map to fit the screen*/
.gmaps{
 
               
            background-color: white;
            padding: 1em;
            overflow: hidden;
            -moz-border-radius: 10px;
            border-radius: 10px;
    
}

/********* for tables *****************
http://www.mobifreaks.com/wp-content/demos/Responsive-and-SEO-Friendly-Data-Tables-with-js/ */

/* seo friendly tables */
.table{
	display:table;	/* Defines a Table */
	font-family:Arial, Helvetica, sans-serif;
	font-size:	1em;
	border:1px solid #dddddd;
	margin:10px 0;
}
.table ul{

	margin:0;


}

.table-head{
	 display: table-header-group; /* Defines a table header group */

}
.table-head .column{ /* Column inside the table-head */
	color:#ffffff;
	border: 1px solid #eeeeee;
	font-size:	1.1em;
	background:#005164;
}
.table-head .column:hover{ /* Column hover inside the table-head */
	/*background:#f9f9f9; */
}

.table-head .row{
	color:#ffffff;
	background:#005164;
}


.row{
	display:table-row; /* Defines a table row */
}
.row .column:nth-child(1){ /* First column in a row */
	border-left:1px solid #eeeeee;
}
.row:last-child .column{  /* column in a last row */
	border-bottom:none;
}
.column{
	display:table-cell; /* Defines a table cell */
	padding:5px 10px;
	border-bottom:1px solid #eeeeee;
	border-right:1px solid #eeeeee;
}
.column:hover{
	/*background:#f9f9f9; */
}
/* Responsive table */
@media all and (max-width: 640px){
	.table,
	.row,
	.column,
	.column:before{
		display:block;	/* Converts a table, table row, table column and table column:before into a block element */
	}
	.table,
	.row .column:last-child{
		border-bottom:none;
	}
	.table-head{
		position:absolute;	/* Hides table head but not using display none */
		top:-1000em;
		left:-1000em;
	}
	.row{
		border:1px solid #eeeeee;
		border-top:2px solid #dddddd;
		border-bottom:2px solid #dddddd;
		margin:20px 0;
	}
	.row .column:nth-child(1){ /* first column of the row */
		border-left:none;
	}
	.row .column:last-child{ /* last column of the row */
		border-right:none;
	}
	.row:last-child .column,
	.column{ /* Column in the last row and column */
		border-bottom:1px solid #eeeeee;
	}
	.column:before{ /* prints the value of data-label attribute before the column data */
		font-weight:bold;
		padding-right:20px;
		font-size:12px;
		content:" "attr(data-label)" ";	/* call the attribute value of data-label and adds a string // */
	}
}


/* nav */
#popup,
#feedback,
#show { background-position:left top; }

#nav {
	padding:0.5em 0;
	margin:0;
}

#popup #nav,
#show #nav,
#feedback #nav {
	float:right;
	top:0;
	padding:0;
	margin:0 10px 0 0;
}


#nav ul {
    display: inline;
    margin: 1em 0;
    padding: 0 0 4px;
    position: relative;
    top: 0.7em;
}


#popup #nav li, #show #nav li {
    border: 1px solid #000000;
    padding: 1px 2px 2px;
}
#nav li {
    color: #333333;
    display: inline;
    font-size: 1em;
    list-style: none outside none;
    margin-left: 1em;
}

#nav li a:link, #nav li a:visited {
    color: #000000;
}
#nav li a {
    margin: 0;
    padding: 0 0.3em;
    text-decoration: none;
}

.printOnly {
	display:none !important;
	font-size:1px;
}/* for footnoteLinks */



/*------------- Image Gallery ----------------------------*/
.imagelist {list-style:none;}
.imageitem {display:inline;}

/*------------External link icon--------------------------------------*/
a.external{
	background: url("graphics/Icon_External_Link.png") no-repeat right;
	padding-right:12px;
}
a span.sr{
	position:absolute;
	left:40px;
	width:100px;
}
/*-------external link exemptions --------*/
#footer a.external, footer a.external {background:none!important;}

/*---------audio description toggle buttons---------------*/
.posterPrintOnly {display:none;}
.audioDescription{
	background: url("graphics/audio_description_off.png") right no-repeat;
    float: right;
    height: 23px;
    width: 53px;
}
.audioDescription:hover {
                background: url("graphics/audio_description_off_hov.png") right no-repeat;
}
.audioDescription:focus {
                background: url("graphics/audio_description_off_hov.png") right no-repeat;
}

.standardVideo {
	background: url("graphics/audio_description_on.png") right no-repeat;
	float: right;
   	height: 23px;
  	width: 53px;
}
.standardVideo:hover {
                background: url("graphics/audio_description_on_hov.png") right no-repeat;
}
.standardVideo:focus {
                background: url("graphics/audio_description_on_hov.png") right no-repeat;
}

.sr-only{
	display:none;
}
/*2016-11-28, fixed for tabs*/
.ui-tabs .ui-tabs-nav li { 
                overflow: hidden;
}

/*---------------------------*/
/*-----Slideshow focus highlighted 2017-2-14--------------*/
.imageitem :hover {
   background-color: red!important;
}
.imageitem :focus{
   background-color: red!important;
}