/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/


/*---------Resets---------*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}

/*img {
max-width: 100%;
-ms-interpolation-mode: bicubic;
}*/


:focus { outline: none; }

/*---------Fonts---------*/

@font-face {
    font-family: 'TeXGyreAdventorRegular';
    src: url('//www.uen.org/fonts/adventor/texgyreadventor-regular-webfont.eot');
    src: url('//www.uen.org/fonts/adventor/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('//www.uen.org/fonts/adventor/texgyreadventor-regular-webfont.woff') format('woff'),
         url('//www.uen.org/fonts/adventor/texgyreadventor-regular-webfont.ttf') format('truetype'),
         url('//www.uen.org/fonts/adventor/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TeXGyreAdventorItalic';
    src: url('//www.uen.org/fonts/adventor/texgyreadventor-italic-webfont.eot');
    src: url('//www.uen.org/fonts/adventor/texgyreadventor-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('//www.uen.org/fonts/adventor/texgyreadventor-italic-webfont.woff') format('woff'),
url('//www.uen.org/fonts/adventor/texgyreadventor-italic-webfont.ttf') format('truetype'),
url('//www.uen.org/fonts/adventor/texgyreadventor-italic-webfont.svg#TeXGyreAdventorItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TeXGyreAdventorBold';
    src: url('//www.uen.org/fonts/adventor/texgyreadventor-bold-webfont.eot');
    src: url('//www.uen.org/fonts/adventor/texgyreadventor-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('//www.uen.org/fonts/adventor/texgyreadventor-bold-webfont.woff') format('woff'),
         url('//www.uen.org/fonts/adventor/texgyreadventor-bold-webfont.ttf') format('truetype'),
         url('//www.uen.org/fonts/adventor/texgyreadventor-bold-webfont.svg#TeXGyreAdventorBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TeXGyreAdventorBoldItalic';
    src: url('//www.uen.org/fonts/adventor/texgyreadventor-bolditalic-webfont.eot');
    src: url('//www.uen.org/fonts/adventor/texgyreadventor-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
url('//www.uen.org/fonts/adventor/texgyreadventor-bolditalic-webfont.woff') format('woff'),
url('//www.uen.org/fonts/adventor/texgyreadventor-bolditalic-webfont.ttf') format('truetype'),
url('//www.uen.org/fonts/adventor/texgyreadventor-bolditalic-webfont.svg#TeXGyreAdventorBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*---------Print Code---------*/

#header .print, #page .print {
	display: none;	
}

@media print { 
#footer, #search, #search form, #menu, #menu-bar, .search-az, .crumb, .share, .title{
	display: none;	
}

#header .print, #page .print {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}


}


/*---------Independent of Layout---------*/
	

body {
	font-family: Helvetica, Arial, sans-serif;
	color: #333;
}

.clear {
	clear: both;	
}

a {
	color: #6689cc;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	cursor: hand;	
}

a:hover {
	color:#004BBC;	
}

.upper {
	text-transform:uppercase;
}

.skipnav { display:none; }

ul { margin-left:15px;}
ul li {
	list-style-image: url('//www.uen.org/images/list-bullet.gif');
	margin:10px;
	line-height: 15px;
}
ol {
	margin-left: 20px;
}

.align-left {
	float: left;
}
.align-right {
	float: right;
	overflow:hidden;
}

.border {
	border: 1px solid #346abd;
	padding: 5px;
}

.imgPadding {
	padding: 5px;
}

.imgshadow { /* Better style on light background */
	background:#FFFFFF;
	padding:4px;
	border:1px solid #777777;
	margin-top:5px;
	-moz-box-shadow: 0 0 5px #666666;
	-webkit-box-shadow: 0 0 5px #666666;
	box-shadow: 0 0 5px #666666;
}
.img_left { /* Image sticks to the left */
	width:auto;
	float:left;
	margin:5px 15px 5px 5px;
}

.img_right { /* Image sticks to the right */
	width:auto;
	float:right;
	margin:5px 5px 5px 15px;
}

.img_middle {
	width: auto;
	vertical-align: middle;
	margin:5px;
}

.img_bottom {
	width: auto;
	vertical-align: bottom;
	margin:5px;
}

.img-max {
	max-width: 96%;	
}

.frame-shadow {
	border: 3px solid #FFFFFF;
	-webkit-box-shadow: 0 1px 2px #777;
	-moz-box-shadow: 0 1px 2px #777;
	box-shadow: 0 1px 2px #777;
}

.underline {
	border-bottom-width: 2px;
	border-bottom-style: inset;
	border-bottom: solid;
	border-bottom-color: rgb(204,204,204);
}

table.show-border { border-collapse: collapse; }

	table.show-border td { border: 1px solid #777; }

#dataTable td {
	padding: 5px;
}

tr.alt td {
	background-color: #d5e2f6;
}


.circle {
    background-image: url('//www.uen.org/k12student/stem/images/circle.png');
    background-position: 1px 3px;
    background-repeat: no-repeat;
    clear: left;
    color: #FFFFFF;
    float: left;
    font-size: 11px;
    font-weight: bold;
    height: 21px;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 5px;
    width: 20px;
}

.circle2 {
    background-image: url('//www.uen.org/k12student/stem/images/circle.png');
    background-position: 1px 3px;
    background-repeat: no-repeat;
    clear: left;
    color: #FFFFFF;
    float: left;
    font-size: 11px;
    font-weight: bold;
    height: 21px;
    padding-left: 2px;
    padding-right: 10px;
    padding-top: 5px;
    width: 20px;
}

.shade { background: -moz-linear-gradient(top,  rgba(172,197,237,0.25) 0%, rgba(255,255,255,1) 76%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(172,197,237,0.25)), color-stop(76%,rgba(255,255,255,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(172,197,237,0.25) 0%,rgba(255,255,255,1) 76%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(172,197,237,0.25) 0%,rgba(255,255,255,1) 76%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(172,197,237,0.25) 0%,rgba(255,255,255,1) 76%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(172,197,237,0.25) 0%,rgba(255,255,255,1) 76%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40acc5ed', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */}

.greenShade {
background: -moz-linear-gradient(top,  rgba(221,247,197,0.25) 0%, rgba(255,255,255,1) 76%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(221,247,197,0.25)), color-stop(76%,rgba(255,255,255,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(221,247,197,0.25) 0%,rgba(255,255,255,1) 76%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(221,247,197,0.25) 0%,rgba(255,255,255,1) 76%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(221,247,197,0.25) 0%,rgba(255,255,255,1) 76%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(221,247,197,0.25) 0%,rgba(255,255,255,1) 76%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40acc5ed', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
}

.purpleShade {
background: -moz-linear-gradient(top,  rgba(235,221,250,0.25) 0%, rgba(255,255,255,1) 76%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(235,221,250,0.25)), color-stop(76%,rgba(255,255,255,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(235,221,250,0.25) 0%,rgba(255,255,255,1) 76%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(235,221,250,0.25) 0%,rgba(255,255,255,1) 76%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(235,221,250,0.25) 0%,rgba(255,255,255,1) 76%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(235,221,250,0.25) 0%,rgba(255,255,255,1) 76%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40acc5ed', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
}
.marginBottom { 
	margin-bottom: 5px;	
}

/**Background Colors for Headings**/
.blueBackground {
	background-color: rgba(172,197,237,0.25);
}





/*---------Form Styles (may need to rethink this once on whole site)---------*/

input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], input[type="time"], input[type="password"], textarea, input[name="username"] {
	-webkit-box-shadow: 2px 2px 2px rgba(225, 225, 225, 1);
	-moz-box-shadow:    2px 2px 2px rgba(225, 225, 225, 1);
	box-shadow:         2px 2px 2px rgba(225, 225, 225, 1);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: solid 1px #ccc;
}

input[type="text"], input[type="password"] {
	height: 20px;	
}

/*---------Transitions---------*/

#container a, #logo-mark, .col_left li, .greybutton, #menu li .greybox li, #menu .more, #footer a, #footer img, .highlight-text a, .crumb a, .share a , .side-menu li div {
	-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;	
}

/*---------Selection colours (easy to forget)---------*/

::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgba(0,0,0,.1);
}

/*---------FancyBox v2.1.4 fancyapps.com ------------------*/
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}

.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}

.fancybox-skin {
	position: relative;
	background: #f9f9f9;
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}

.fancybox-opened {
	z-index: 8030;
}

.fancybox-opened .fancybox-skin {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
	position: relative;
}

.fancybox-inner {
	overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}

.fancybox-error {
	color: #444;
	font: 14px/20px;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	background-image: url('//www.uen.org/js/fancybox_latest/source/fancybox_sprite.png');
}

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8060;
}

#fancybox-loading div {
	width: 44px;
	height: 44px;
	background: url('//www.uen.org/js/fancybox_latest/source/fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
}

.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
	background: transparent url('//www.uen.org/js/fancybox_latest/source/blank.gif'); /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
}

.fancybox-prev {
	left: 0;
}

.fancybox-next {
	right: 0;
}

.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 34px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
}

.fancybox-prev span {
	left: 10px;
	background-position: 0 -36px;
}

.fancybox-next span {
	right: 10px;
	background-position: 0 -72px;
}

.fancybox-nav:hover span {
	visibility: visible;
}

.fancybox-tmp {
	position: absolute;
	top: -99999px;
	left: -99999px;
	visibility: hidden;
	max-width: 99999px;
	max-height: 99999px;
	overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
	overflow: hidden;
}

.fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: url('//www.uen.org/js/fancybox_latest/source/fancybox_overlay.png');
}

.fancybox-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

.fancybox-lock .fancybox-overlay {
	overflow: auto;
	overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
	visibility: hidden;
	font: normal 13px/20px;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}

.fancybox-opened .fancybox-title {
	visibility: visible;
}

.fancybox-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8050;
	text-align: center;
}

.fancybox-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 15px;
	   -moz-border-radius: 15px;
	        border-radius: 15px;
	text-shadow: 0 1px 2px #222;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}

.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #FFFFFF;
}

.fancybox-title-inside-wrap {
	padding-top: 10px;
}

.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #FFFFFF;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}

/*	Default Layout
	92px columns, 24 px gutters, 72 px margins, 1234px total (extra space for scrollbars)
	-------------------------------------------------------------------------------
cols    1    2     3     4     5     6     7     8     9     10     11     12     13
px      68   160   252   344   436   528   620   712   804   896	988    1050   1142 */

body {
	width: 100%;
	padding: 0;
	background-image: url('//www.uen.org/images/header/top_right_bg.png'), url('//www.uen.org/images/header/bottom_left_bg.png');
	background-position: right top, left bottom;
    background-repeat: no-repeat;
    background-attachment:fixed;
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
	font-size: 14px;
	line-height: 19px;
	}
	
a {
	font-size: 14px;	
}
	
/*---------General Styles---------*/

.small { font-size: 11px; line-height: 13px;}
.smallBold {
	font-size: 11px;
	line-height: 13px;
	font-weight: bold;
}
.big { font-size: 16px; line-height: 18px; font-family: 'TeXGyreAdventorRegular'; }
.big-bold {  font-family: 'TeXGyreAdventorBold'; font-size: 16px; line-height: 20px; letter-spacing: 1px; }
.bold {
	font-weight: bold;
	line-height: 16px;
	}
.bolder {
	font-weight: bolder;
}
.goldbar { color: #591479; font-weight: bold; font-size: 12px; line-height: 16px; }
.medium { font-size: 12px; line-height: 14px; }
.news {
	font-size: 18px;
	font-style: normal;
	line-height: normal;
	 font-family: 'TeXGyreAdventorBold';
	 letter-spacing: 1px;
}
.paratitle { color: #591479; font-weight: bold; font-size: 20px; font-family: 'TeXGyreAdventorRegular';}
.paratitlewhite { color: #FFFFFF; font-weight: bold; font-size: 20px;  text-decoration: none; font-family: 'TeXGyreAdventorRegular'; }
.paratitlewhite a:link { color: #FFFFFF; font-weight: bold; font-size: 20px; text-decoration: none; font-family: 'TeXGyreAdventorRegular'; }
.paratitlewhite a:visited { color: #FFFFFF; font-weight: bold; font-size: 20px;  text-decoration: none;  font-family: 'TeXGyreAdventorRegular';}
.smallwhite {font-size: 11px; line-height: 13px; color: #FFFFFF; }
.warning {
	color: #FF0004;	
}

h1 {
	font-size: 36px;
	color: #FFFFFF;
	font-weight: 400;
	letter-spacing: 1px;
	font-family: 'TeXGyreAdventorRegular';
	line-height: normal;
	text-shadow: -5px 0 14px rgba(0, 0, 0, 1), 1px 1px 2px rgba(73, 73, 73, 1);

}

.h1Grey {
	color: #333;
	font-size: 36px;
	font-weight: 400;
	letter-spacing: 1px;
	font-family: 'TeXGyreAdventorRegular';
	line-height: normal;
	text-shadow: 1px 1px 2px rgba(73, 73, 73, 1);
}

h2{
	font-size: 17px;
	color: #4fa600;
	font-weight: 400;
	letter-spacing: 1px;
	margin: 7px 0 14px 0;
	padding-bottom: 5px;
	border-bottom: 1px solid #4fa600;
	font-family: 'TeXGyreAdventorRegular';
	overflow: hidden; /*Ellen*/
}
h3 {
	font-size: 15px;
	font-weight: 400;
	color: #4fa600;
	letter-spacing: 1px;
	padding-bottom: 5px;
	border-bottom: 1px solid #4fa600;
	font-family: 'TeXGyreAdventorRegular';
	margin: 2px 0 5px -2px;
	overflow: hidden; /*Ellen*/
}

h4 {
	font-size: 14px;
	font-weight: 400;
	color: #4fa600;
	letter-spacing: 1px;
	padding-bottom: 5px;
	font-family: 'TeXGyreAdventorRegular';
	margin-top: 2px;
	margin-left: -2px;
	margin-bottom: 0;
}

h5 {
	font-size: 14px;
	font-weight: 400;
	color: #4fa600;
	letter-spacing: 1px;
	font-family: 'TeXGyreAdventorBold';
	margin-bottom: 0;
}

h6 {
	font-size: 40px;
	color: #6D28AA;
	font-weight: 400;
	letter-spacing: 1px;
	margin: 5px 0 -10px 15px;
	font-family: 'TeXGyreAdventorRegular';
	text-shadow: 1px 1px 2px rgba(168, 168, 168, 1);
	line-height: normal;
}

.h1 {
	font-size: 32px;
	font-weight: bold;
	line-height: .75em;
	font-family: 'TeXGyreAdventorBold';
		}

.h2 {
	font-size: 26px;
	color: #666;
	line-height: 1.2em;
	font-family: 'TeXGyreAdventorRegular';
	}
	
.h3 {
	font-size: 15px;
	font-weight: 400;
	color: #4fa600;
	letter-spacing: 1px;
	padding-bottom: 5px;
	font-family: 'TeXGyreAdventorRegular';
	margin-top: 2px;
	margin-right: 0;
	margin-bottom: 5px;
	margin-left: -2px;	
}

	
/*---------Buttons---------*/

.greybutton, .greybutton2 {
	background:#F4F4F4;
	border:1px solid #bbbbbb;
	padding:4px 6px 4px 6px;
	
	/* Rounded Corners */
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.greybutton {
	float: left;
	width: 170px;
	margin:2px 0;
}

.greybutton2 {
	margin:5px 3px;	
	display: inline-block;
}

.greybutton:hover, .greybutton2:hover{
	background:#FFFFFF;
	border:1px solid #aaaaaa;
	padding:4px 6px;
}

.more-button {
	position: absolute;
	bottom: 0;
	right: 0;
	background: rgb(204,204,204); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(204,204,204,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(204,204,204,1) 0%,rgba(255,255,255,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	border-top-left-radius: 5px;
	-webkit-box-shadow: 3px 0 3px rgba(168,168,168, 1);
	-moz-box-shadow: 3px 0 3px rgba(168,168,168, 1);
	box-shadow: 3px 0 3px rgba(168,168,168, 1);
	margin-right: 10px;
	padding: 0 10px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-left-color: #CCC;
	}
	
	.more-button a {
		color: #6D28AA;	
	}
	
	.more-button:hover {
		background: rgb(255,255,255); /* Old browsers */

background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(204,204,204,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */	
	}

.bubble, .bubbleRight {
  font-family: 'TeXGyreAdventorRegular';
  position: relative;
background: -moz-linear-gradient(top,  rgba(213,226,246,0.05) 0%, rgba(213,226,246,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(213,226,246,0.05)), color-stop(100%,rgba(213,226,246,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(213,226,246,0.05) 0%,rgba(213,226,246,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(213,226,246,0.05) 0%,rgba(213,226,246,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(213,226,246,0.05) 0%,rgba(213,226,246,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(213,226,246,0.05) 0%,rgba(213,226,246,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0dd5e2f6', endColorstr='#d5e2f6',GradientType=0 ); /* IE6-9 */


  margin: 0 0 25px 0;
  padding:10px 15px;
  width:96%;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0 3px rgba(0,0,0,0.2);
  box-shadow: 0 0 3px rgba(0,0,0,0.2); 
}
.bubble:after, .bubbleRight:after {
  position: absolute;
  display: block;
  content: "";  
  border-color: #d5e2f6 transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  bottom:-20px;
}

.bubble:after {
	left:1em;	
}

.bubbleRight:after {
  right:1em;
}

.slide-out-div {
	background: #FFFFFF;
    border: 1px solid #4fa600;
	z-index:500;
      } 



/*---------Hover Boxes---------*/

	a.info{
    position:relative; /*this is the key*/
	font-weight:bold;
    
    text-decoration:none;
	}

a.info:hover{
	z-index:25;
}

a.info span{display: none;}

a.info:hover span{ /*the span will display just on :hover state*/
	display:block;
	width:300px;
	position:absolute;
	background-color:#d5e2f6;
	border: 1px solid #000;
	z-index:20000;
	padding:3px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0, .4);
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0, .4);
	box-shadow: 2px 2px 2px rgba(0,0,0, .4);
	font-weight: lighter;
	color: #333;
}	

nav {
	display: none;	
}

/*--------------Styles for PMT --------------*/

.tablesorter, .header {
	font-size: 14px!important;	
}

.text-button {
	font-weight: bold;
	font-size: 14px;	
	color: #6689cc!important;
}


/*		10 Column Layout: 992px. 
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

@media only screen and (min-width: 992px) and (max-width: 1221px) {
	
body {
	width: 100%;
	padding: 0;
	background-image: url('//www.uen.org/images/header/top_right_bg_10.png'), url('//www.uen.org/images/header/bottom_left_bg_10.png');
	font-size: 12px;
}

a {
	font-size: 12px;	
}

.resize {
	width: 80%; /* Use this style to resize images for smaller layouts. There can be no height and width on the image for this to work. This will also resize the image based on the containing element. So if column around the image is 200px, it will be *% of the column*/
	}
	
/*---------General Styles---------*/
	
.paratitle { 
	font-size: 18px; 
}

.paratitlewhite { 
	font-size: 18px; 
}

.news {
	font-size: 17px;
}

h1 {
	font-size: 30px;
}
	
h2 {
	font-size: 14px;}

h3 {
	font-size: 12px;}

h4 {
	font-size: 11px;}
	
h5 {
	font-size: 10px;
}

h6 {
	font-size: 36px ;	
}

.h1 {
	font-size: 28px;
	}

.h2 {
	font-size: 22px;
	}

/*---------Buttons---------*/

.greybutton {
	width:160px;
}

/*---------Hover Boxes---------*/


a.info:hover span{ /*the span will display just on :hover state*/
	width:300px;
	left: -125px;
}

}



/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
body {
	width: 100%;
	padding: 0;
	background-image: url('//www.uen.org/images/header/top_right_bg_8.png'), url('//www.uen.org/images/header/bottom_left_bg_8.png');
	font-size: 12px;
}

.resize {
	width: 80%; /* Use this style to resize images for smaller layouts. There can be no height and width on the image for this to work. This will also resize the image based on the containing element. So if column around the image is 200px, it will be *% of the column*/
	}

a {
	font-size: 12px;	
}

/*---------General Styles---------*/

.paratitle { 
	font-size: 16px; 
}

.paratitlewhite { 
	font-size: 16px; 
}

.news {
	font-size: 15px;
}

h1 {
	font-size: 26px;	
}

h2 {
	font-size: 14px;}

h3 {
	font-size: 12px;}
	
h4 {
	font-size: 11px;}
	
h5 {
	font-size: 10px;
}

h6 {
	font-size: 30px;	
}

.h1 {
	font-size: 26px;
	}

.h2 {
	font-size: 20px;
	}

.big {
	font-size: 14px;	
}

.big-bold {
	font-size: 14px;	
}
.medium { font-size: 11px;}

/*---------Buttons---------*/

.greybutton {
	width:145px;
	margin-right: 6px;
}

/*---------Hover Boxes---------*/


a.info:hover span{ /*the span will display just on :hover state*/
	width:180px;
	left: -200px;
}

}

/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252 */   

@media only screen and (max-width: 479px) {
	
	body {
	width: 100%;
	background-image: url('//www.uen.org/images/header/shimT.gif'), url('//www.uen.org/images/header/bottom_left_bg_3.png');
	font-size: 12px;
	line-height: 19px;
	}
	
	a {
	font-size: 12px;	
}

.resize {
	width: 80%; /* Use this style to resize images for smaller layouts. There can be no height and width on the image for this to work. This will also resize the image based on the containing element. So if column around the image is 200px, it will be *% of the column*/
	}

/*---------General Styles---------*/

h1 {
	font-size: 22px;	
}

h2 {
	font-size: 16px;
	}
h3 {
	font-size: 14px;}

h6 {
	font-size: 22px;
	margin-left: 5px;	
}

.h1 {
	font-size: 22px;
	}

.h2 {
	font-size: 18px;
	}

.h3 {
	font-size: 14px;
}

.big {
	font-size: 13px;	
}

.big-bold {
	font-size: 13px;	
}

.paratitle { 
	font-size: 14px; 
}

.paratitlewhite { 
	font-size: 14px; 
}

/*---------Buttons---------*/

.greybutton {
	width:178px;
	margin-right: 5px;
}

.greybutton2 {
	margin:5px 3px;	
	display: inline-block;
}

.more-button {
	margin-right: 10px;
	padding: 0 10px;
}

.bubble, .bubbleRight {
  margin: 0 0 25px 0;
  padding:10px 15px;
  width:90%;
}

.bubble:after, .bubbleRight:after {
  bottom:-20px;
}

.bubble:after {
	left:1em;	
}

.bubbleRight:after {
  right:1em;
}

/*---------Hover Boxes---------*/


a.info:hover span{ /*the span will display just on :hover state*/
	width:120px;
	left: -60px;
}

nav {
	display: block;	
}

#cat_buts, .tabs-hide {
	display: none;	
}

}

/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436  */ 

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	body {
	width: 100%;
	background-image: url('//www.uen.org/images/header/top_right_bg_3.png'), url('//www.uen.org/images/header/bottom_left_bg_3.png');
	font-size: 12px;
	line-height: 19px;
	}

.resize {
	width: 80%; /* Use this style to resize images for smaller layouts. There can be no height and width on the image for this to work. This will also resize the image based on the containing element. So if column around the image is 200px, it will be *% of the column*/
	}
	
	a {
		font-size: 12px;	
	}

/*---------General Styles---------*/

h1 {
	font-size: 22px;
}

h2 {
	font-size: 16px;
	}
h3 {
	font-size: 14px;}

h6 {
	font-size: 23px;
	margin-left: 10px;	
}

.h1 {
	font-size: 22px;
	}
	
.h2 {
	font-size: 18px;
	}

.h3 {
	font-size: 14px;
}

.big {
	font-size: 13px;	
}

.big-bold {
	font-size: 13px;	
}

.paratitle { 
	font-size: 14px; 
}

.paratitlewhite { 
	font-size: 14px; 
}

/*---------Buttons---------*/

.greybutton {
	width:205px;
	margin-right: 5px;
}

.more-button {
	margin-right: 10px;
	padding: 0 10px;
}

.bubble, .bubbleRight {
  margin: 0 0 25px 0;
  padding:10px 15px;
  width:93%;
}

.bubble:after, .bubbleRight:after {
  bottom:-20px;
}

.bubble:after {
	left:1em;	
}

.bubbleRight:after {
  right:1em;
}

/*---------Hover Boxes---------*/


a.info:hover span{ /*the span will display just on :hover state*/
	width:150px;
	left: -75px;
}

nav {
	display: block;	
}

#cat_buts, .tabs {
	display: none;	
}
	
}