/*
Template Name : Meezio - An horizontal and vertical scrolling theme
Template URI : http://themeforest.net/item/meezio/83681
Author URI : http://themeforest.net/user/Keliah
Version : 3.1
*/

/*

TABLE OF CONTENTS

01 CSS RESET
02 GRID
03 GENERAL STYLES
04 SCROLL PANE (INTERNAL SCROLLBARS)
05 HEADER AND MENU
   1. Header
   2. Menu
   3. Submenus
06 IMAGES
07 TYPOGRAPHY
08 TABS
09 CONTACT
10 FOOTER
11 LEFT ALIGNED LAYOUT
12 VERTICAL LAYOUT
13 COLORS

*/



/*  _______________________________________

	01 CSS RESET
    _______________________________________  */



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline
}
:focus {
	outline: 0
}
body {
	line-height: 1;
	color: black;
	background: white
}
ol, ul {
	list-style: none
}
table {
	border-collapse: separate;
	border-spacing: 0
}
caption, th, td {
	text-align: left;
	font-weight: normal
}
blockquote:before, blockquote:after, q:before, q:after {
	content: ""
}
blockquote, q {
	quotes: """"
}






/*  _______________________________________

	02 GRID
    _______________________________________  */

a.thumb img {border:3px solid #eee;}
a.thumb img:hover{border:3px solid #bbb; }

.container {
	width: 960px;
	height: 450px;
	margin: 90px auto;
	position: relative;
}

.column_50, .column_100, .column_120, .column_160, .column_180, .column_200, .column_220, .column_235, .column_260, .column_300, .column_340, .column_350, .column_380, .column_400, .column_450, .column_490, .column_545, .column_640, .column_800 {
	display: inline;
	float: left;
	position: relative;
	margin-right: 15px;

}

.container .column_50 {
	width: 50px
}


.container .column_100 {
	width: 100px
}

.container .column_120 {
	width: 120px
}


.container .column_160 {
	width: 160px
}

.container .column_180 {
	width: 180px
}

.container .column_200 {
	width: 200px
}

.container .column_220 {
	width: 220px
}

.container .column_235 {
	width: 235px
}

.container .column_260 {
	width: 260px
}


.container .column_300 {
	width: 300px
}

.container .column_340 {
	width: 340px
}

.container .column_350 {
	width: 350px
}

.container .column_380 {
	width: 370px
}

.container .column_400 {
	width: 400px
}

.container .column_450 {
	width: 450px
}

.container .column_490 {
	width: 490px
}


.container .column_545 {
	width: 545px
}

.container .column_640 {
	width: 640px
}
.container .column_800 {
	width: 800px
}
.container .column_860 {
	width: 915px
}
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0
}
.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0
}
.clearfix {
	display: inline-block
}
* html .clearfix {
	height: 1%
}
.clearfix {
	display: block
}
/*
	Variable Grid System.
	Learn more ~ http://www.spry-soft.com/grids/
	Based on 960 Grid System - http://960.gs/

	Licensed under GPL and MIT.
*/

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/

body {
	min-width: 820px;
}
/* Containers
----------------------------------------------------------------------------------------------------*/
.container_10 {
	margin-left: auto;
	margin-right: auto;
	width: 820px;


}


/* Preloeder */
.preload { 
position:absolute;
background: #fff url('../images/89.gif') 50% 50% no-repeat;
width:100%;
height:100%;
top:0;
left:0;
z-index:9999;
}

/*.preload img
{
    position:absolute;
    width:64px; 
    height:64px;
    left:50%; 
    top:50%;
    margin-left:-32px; 
    margin-top:-32px; 
}
/*

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.paddy {
	padding: 15px;
}

.paddy25 {
	padding: 25px;
}

.set_450 {
	height: 450px;
}
.set_221 {
	height: 221px;
}
.set_320 {
	height: 320px;
}
.set_122 {
	height: 113px;
}
.set_150 {
	height: 150px;
}
.set_292 {
	height: 292px;
}


.set_100 {
	height: 100px;
}

.set_112 {
	height: 112px;
}

.set_107 {
	height: 107px;
}

.set_342 {
	height: 342px;
}

.set_80 {
	height: 80px;
}
.set_362 {
	height: 362px;
}

.set_300 {
	height: 300px;
}
.set_142 {
	height: 142px;
}

.set_144 {
	height: 144px;
}
.set_146 {
	height: 146px;
}

.set_167 {
height: 167px;
}

.set_180 {
height: 192px;
}

.set_200 {
height: 200px;
}

.set_20 {
height: 20px;
}

.set_50 {
height: 110px;
}

.set_400 {
height: 340px;
}

.set_220 {
height: 220px;
}

.set_233 {
height: 233px;
}




.bottom_margin {
	margin-bottom: 8px;
}
.grid_1, .grid_2, .grid_3, /* .grid_3a is a Custom Grid */.grid_3a, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_12 {
	display: inline;
	float: left;
	position: relative;
	margin-left: 4px;
	margin-right: 4px;
}
.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10  {
	position: relative;
}
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}
.omega {
	margin-right: 0;
}
/* Grid >> 10 Columns
----------------------------------------------------------------------------------------------------*/
/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */



.container_10 .grid_1 {
	width: 74px;
}

.container_10 .grid_2 {
	width: 156px;
}

.container_10 .grid_3 {
	width: 235px;
}

.container_10 .grid_4 {
	width: 320px;
}

.container_10 .grid_5 {
	width: 402px;
}

.container_10 .grid_6 {
	width: 484px;
}

.container_10 .grid_7 {
	width: 566px;
}

.container_10 .grid_8 {
	width: 648px;
}

.container_10 .grid_9 {
	width: 730px;
}

.container_10 .grid_10 {
	width: 812px;
}


/* Custom grid for 3 columns exactly. */
.container_10 .grid_3a {
	width: 265px;
}


/* Prefix Extra Space >> 10 Columns
----------------------------------------------------------------------------------------------------*/


.container_10 .prefix_1 {
	padding-left: 82px;
}
.container_10 .prefix_2 {
	padding-left: 164px;
}
.container_10 .prefix_3 {
	padding-left: 246px;
}
.container_10 .prefix_4 {
	padding-left: 328px;
}
.container_10 .prefix_5 {
	padding-left: 410px;
}
.container_10 .prefix_6 {
	padding-left: 492px;
}
.container_10 .prefix_7 {
	padding-left: 574px;
}
.container_10 .prefix_8 {
	padding-left: 656px;
}
.container_10 .prefix_9 {
	padding-left: 738px;
}
/* Suffix Extra Space >> 10 Columns
----------------------------------------------------------------------------------------------------*/


.container_10 .suffix_1 {
	padding-right: 82px;
}
.container_10 .suffix_2 {
	padding-right: 164px;
}
.container_10 .suffix_3 {
	padding-right: 246px;
}
.container_10 .suffix_4 {
	padding-right: 328px;
}
.container_10 .suffix_5 {
	padding-right: 410px;
}
.container_10 .suffix_6 {
	padding-right: 492px;
}
.container_10 .suffix_7 {
	padding-right: 574px;
}
.container_10 .suffix_8 {
	padding-right: 656px;
}
.container_10 .suffix_9 {
	padding-right: 738px;
}
/* Push Space >> 10 Columns
----------------------------------------------------------------------------------------------------*/


.container_10 .push_1 {
	left: 82px;
}
.container_10 .push_2 {
	left: 164px;
}
.container_10 .push_3 {
	left: 246px;
}
.container_10 .push_4 {
	left: 328px;
}
.container_10 .push_5 {
	left: 410px;
}
.container_10 .push_6 {
	left: 492px;
}
.container_10 .push_7 {
	left: 574px;
}
.container_10 .push_8 {
	left: 656px;
}
.container_10 .push_9 {
	left: 738px;
}
/* Pull Space >> 10 Columns
----------------------------------------------------------------------------------------------------*/


.container_10 .pull_1 {
	left: -82px;
}
.container_10 .pull_2 {
	left: -164px;
}
.container_10 .pull_3 {
	left: -246px;
}
.container_10 .pull_4 {
	left: -328px;
}
.container_10 .pull_5 {
	left: -410px;
}
.container_10 .pull_6 {
	left: -492px;
}
.container_10 .pull_7 {
	left: -574px;
}
.container_10 .pull_8 {
	left: -656px;
}
.container_10 .pull_9 {
	left: -738px;
}
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before, .clearfix:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.clearfix:after {
	clear: both;
}
/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
	zoom: 1;
}
/*  _______________________________________

	03 CONTAINERS
    _______________________________________  */



html {
	overflow: hidden
} /* Hides scrolling bars in IE */
img {
	border: none;
	margin: 0;
	padding: 0
}



body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif, Helvetica;
	font-family: Lucida Sans Unicode; /* Overpowering */
	color: #2B2B2B;
	
}

body.index-img1 {
	background: url(../images/background/index-image.jpg) no-repeat top center fixed; /* Change Background Image */
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body.img1 {
	background: url(../images/background/img1.jpg) no-repeat top center fixed; /* Change Background Image */
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body.img2 {
	background: url(../images/background/img2.jpg) no-repeat top center fixed; /* Change Background Image */
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


body.img3 {
	background: url(../images/background/img3.jpg) no-repeat top center fixed; /* Change Background Image */
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


body.img4 {
	background: url(../images/background/img4.jpg) no-repeat top center fixed; /* Change Background Image */
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


body.img5 {
	background: url(../images/background/img5.jpg) no-repeat top center fixed; /* Change Background Image */
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


body.img6 {
	background: url(../images/background/img6.jpg) no-repeat top center fixed; /* Change Background Image */
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body.img7 {
	background: url(../images/background/img7.jpg) no-repeat top center fixed; /* Change Background Image */
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body.img8 {
	background: url(../images/background/img8.jpg) no-repeat top center fixed; /* Change Background Image */
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body.img9 {
	background: url(../images/background/img9.jpg) no-repeat top center fixed; /* Change Background Image */
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


body.img10 {
	background: url(../images/background/img10.jpg) no-repeat top center fixed; /* Change Background Image */
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


body.img11 {
	background: url(../images/background/img11.jpg) no-repeat top center fixed; /* Change Background Image */
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body.img12
{
	background: url(../images/background/fibers.jpg) no-repeat top center fixed;
	-webkit-background-size:cover;
	-moz-background-size: cover;
	background-size:cover;
}

body.img13
{
	background: url(../images/background/check.jpg) no-repeat top center fixed;
	-webkit-background-size:cover;
	-moz-background-size: cover;
	background-size:cover;
}
	




/*  The following containers are all required to display properly the scrolling layout.
	The "mask" extends the layout in percentages, and "item" gives the width and the height of 1 single section.
	In the default theme, we have 2 rows containing 5 sections, for a total of 10 sections.
	So we extend the width by 5 (5 columns, or 5 section in a row) and the height by 2 (to get 2 rows).
	You could also have 4 rows containing each 10 sections, and we would have :
	
	#mask {	
		width:1000%;
		height:400%;
	}
	.item {
		width:10%;
		height:25%;
		float:left;
	}
*/

#wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
#mask {	
		width:3000%;
		height:2000%;
	}
	.item {
	
		float:left;
	}
.content {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	position: relative;
}
a.btnHome {
	float: right;
	position: relative;
	top: -35px;
}

span.subTitle {display:block; font-size:20px; background:#045074; color:#fff; padding:10px; }
/*  _______________________________________

	03A HOME PAGE FOR MODULE
    _______________________________________  */
	
.criteria p a, .unitInformation p a {
	font-size:14px !important; line-height:14px !important;;
}
	
.criteria p, .unitInformation p {
	color: #fff;
	text-transform: uppercase;
	position: relative;
	top: 85px;
	font-weight: normal;
}
.unitInformation {
	background: url(../images/buttons/part1bg.jpg) no-repeat;
}

.criteria {
	background: url(../images/buttons/part3bg.jpg) no-repeat;
}


/*  _______________________________________

	03A TITLE PAGE FOR PARTS
    _______________________________________  */


.watchVideo {border-left:1px solid #eee; color:white !important; padding: 3px 6px; font-size:14px !important; margin:0 15px 15px 0; position:absolute; right:0; bottom:0;}

/*  _______________________________________

	03A TIER PAGE - REVIEW 1
    _______________________________________  */
	

p.important {
	font-size: 80% !important;
	color: red !important;
	font-style: italic !important;
    padding: 0 0 0 15px
}
.redBack p.important {
	color: yellow !important;
}
.focus {
	color: yellow !important;
}
.bolder {
	font-weight: bold;
}
.quote {
	font-size: 140% !important;
	line-height: 110% !important;
}
.bigger {
	font-size: 17px !important;
	line-height: 110% !important;
}
.imageFR {
	float: right !important;
	margin: 10px 0 10px 10px;
}

.imageFL {
	float: LEFT;
	margin: 10px 10px 10px 10px;
}


.unitintro {margin-top: 55px;}

.endTitle p {text-align:center;}
.endTitle .paddy {padding-top:200px;}
.endTitle p strong {font-size:24px;}
.endTitle p strong span {color:yellow;}
.endTitle p a {color:yellow; font-weight:normal;}




/*  _______________________________________

	04 SCROLL PANE (INTERNAL SCROLLBARS)
    _______________________________________  */


.scroll-pane {
	height: 330px;
}
.jspContainer {
	overflow: hidden;
	position: relative
}
.jspPane {
	position: absolute
}
.jspVerticalBar {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 100%
}
.jspVerticalBar * {
	margin: 0;
	padding: 0
}
.jspCap {
	display: none
}
.jspTrack {
	background: #DDD;
	position: relative;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px
}
.jspDrag {
	background: #333 url("../images/icons/drag.png") no-repeat 50% 50%;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px
}

/* Page backgrounds */
.dragdropbackground {background: url("../images/background/drag-drop-background.gif") no-repeat;}
.healthbackground {background: url("../images/background/unit02-health-background.jpg") no-repeat;}
.riskbackground {background: url("../images/background/unit02-risk-background.jpg") no-repeat;}
.riskbackground2 {background: url("../images/background/unit09-riskbackground.jpg") no-repeat;}
.chemicalplantbg {background: url("../images/background/unit02-plantbg.jpg") no-repeat;}


/*  _______________________________________

	05 HEADER AND MENU
    _______________________________________  */


/* 0. Top Header */

#topheader { /* Footer container (whole browser width) */
	position: absolute;
	top: 0;
	border-top: #999 solid 1px;
	width: 100%;
	height: 65px;
	background-color: #000000;
}
#topheader_box { /* Centered footer container with som padding to align properly the content */
	width: 820px;
	height: 30px;
	margin: 0px auto;
	position: relative;
	padding: 0px;
}
#topheader_box h1 { /* Centered footer container with som padding to align properly the content */
	float: left;
	position: relative;
	top: 17px;
	font-size:24px !important;
	color: #ffffff;
}
#topheader_box #logo {
	background: url("../images/logo.gif") no-repeat;
	float: right;
	width: 185px; /* Modify these "width" and "height" values according to the size of your logo */
	height: 51px;
	position: relative;
	top: 10px;
}
/* 1. Header */

#header { /* Container to display the background on the whole browser width */
	width: 100%;
	height: 100px;
	margin: 0;
	padding: 0;
	position: fixed;
	z-index: 999;
}
#header_box { /* Centered container for the header, contains the menu and the logo */
	width: 820px;
	margin: 0px auto;
	position: relative;
	padding: 0px 10px 0px 10px; /* Some left and right paddings to fix an alignment issue */
}
#logo {
	background: url("../images/logo.png");
	float: right;
	width: 222px; /* Modify these "width" and "height" values according to the size of your logo */
	height: 95px;
}
/* 2. Menu */






/*style the main menu*/ 

.myMenu {
	margin: 0;
	padding: 0;
	float:right;
	position:relative;
	top:17px;
	right:4px;
	
}
.myMenu li {
	list-style: none;
	float: right;
	width:280px;
	font-size:11px;
	text-align:right;
	
	
}
.myMenu li a:link, .myMenu li a:visited {
	display: block;
	text-decoration: none;
	padding: 0.5em;
	margin: 0;
	color: #fff;
	border-bottom:1px solid #aaa;
}
.myMenu li a:hover {
	color:yellow;
	
} /*style the sub menu*/
.myMenu li ul {
	position: absolute;
	visibility: hidden;
	border-top: 1px solid #fff;
	color:#333;
	margin: 0;
	padding: 0;
	width:280px;
	
}
.myMenu li ul li {
	display: inline;
	float: none;
	font-weight:normal !important;


}
.myMenu li ul li a:link, .myMenu li ul li a:visited {
	background-color: #fff;
	width: auto;
		color:#333  !important;
}
.myMenu li ul li a:hover {
	background-color: #eee;
}





#menu {
	background: none;
	margin: 38px 0px 0px 0px; /* Some top spacing */
	list-style: none;
	float: left;
}
#menu li {
	list-style: none;
	float: left;
	padding-bottom: 8px;
}
#menu li a {
	color: #999999;
	text-decoration: none;
	margin-right: 40px; /* Spacing between menu items */
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif, Helvetica;
	font-weight: bold;
	position: relative;
	z-index: 888;
	padding-bottom: 20px;
}
#menu li a:hover, #menu li a.active {
	color: #2B2B2B;
	background: url("../images/icons/menu_hover.png") no-repeat center 22px;
 *background-position:center 23px;
	_background: none;
}
#menu li a.submenu {
	background: url("../images/icons/submenu.png") no-repeat center 19px;
 *background-position:center 20px;
	_background: none;
}
#menu .submenu:hover, #menu .submenu.active {
	background: url("../images/icons/submenu_hover.png") no-repeat center 22px;
 *background-position:center 23px;
	_background: none;
}
/* 3. Submenus */

#menu li ul {
	display: none; /* Not displayed, they appear on mouse hover */
}
#menu li:hover ul, #menu li.hover ul {
	position: absolute;
	display: inline; /* Inline positionning */
	left: 0;
	width: 100%;
	margin: 0px 10px;
	padding: 40px 0;
	top: 40px;
}
#menu li:hover li a, #menu li.hover li a {
	color: #999999;
	font-size: 12px;
	margin-right: 20px;
	background: url("../images/icons/bullet_menu.png") no-repeat left top;
	_background-position: left 4px;
	padding-left: 15px;
}
#menu li li a:hover {
	color: #2B2B2B;
	background: url("../images/icons/bullet_menu_hover.png") no-repeat left top;
	_background-position: left 4px;
}
/*  _______________________________________

	06 IMAGES
    _______________________________________  */




.arrow {
	position: relative;
	bottom: 162px;
	left: 40px;
	z-index: 0;
}
.previous a, .next a{
	display: block;
	width: 44px;
	height: 140px;
}

.home, .menuLink {
	display: block;
	width: 44px;
	height: 44px;
}

.previous {
	float: left;
	margin-left: 0px;
	left: -177px;
	background: url("../images/icons/blockprev_h-purple.jpg") no-repeat left bottom;
	position: relative;
	top: -130px;
}

.previous a:hover {
	background: url("../images/icons/blockprev_h.jpg") no-repeat right bottom;
}

.previous.inactive {
    filter:alpha(opacity=40); 
    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:0.4; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 0.4; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.4; 		
}

.previous.inactive a:hover {
	cursor:default;
	background: url("../images/icons/blockprev.jpg") no-repeat right bottom;
}


.next {
	float: right;
	background: url("../images/icons/blocknext_h-purple.jpg") no-repeat right bottom;
	position: relative;
	top: -130px;
	right:-10px;
}

.next a:hover {
	background: url("../images/icons/blocknext_h.jpg") no-repeat right bottom;
}

.next.inactive {
    filter:alpha(opacity=40); 
    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:0.4; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 0.4; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.4; 		
}

.next.inactive a:hover {
	cursor: default;
	background: url("../images/icons/blocknext_h-purple.jpg") no-repeat right bottom;
}


.previous a:hover, .next a:hover {
	text-decoration: none
}




.previous span, .next span {
	display: none
}
ul li {
	position: relative;
	z-index: 1
}

.unit-home {
	position:absolute;
	float:left;
	margin-left: 0px;
	left: -88px;
	background: url("../images/sprite-map.png")  0px -88px no-repeat; 
	top: -234px;
	/*  box-shadow: 0px 0px 3px #000; */
	cursor:pointer;	
}

.unit-home.inactive {
    filter:alpha(opacity=50); 
    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:0.5; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 0.5; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.5; 	
}

.unit-home.inactive:hover {
	cursor:default;	
	background: url("../images/sprite-map.png") 0px -88px no-repeat; 
}

.unit-home {
    display: block;
    height: 44px;
    width: 44px;
}


.unit-home:hover {
	float:left;	margin-left: 0px;
	background: url("../images/sprite-map.png")  0px -132px no-repeat; 

	/*  box-shadow: 0px 0px 3px #000; */
	cursor:pointer;	
}


.home {
	float: left;
	margin-left: 0px;
	left: -88px;
	background: url("../images/sprite-map.png") -43px 0px no-repeat; 
	position: relative;
	top: -288px;
	/*  box-shadow: 0px 0px 3px #000; */
	cursor:pointer;	
	
	 		
}

.home:hover {
	background: url("../images/sprite-map.png") -43px -44px no-repeat;

}


.home.inactive {
    filter:alpha(opacity=50); 
    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:0.5; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 0.5; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.5; 	
}

.home.inactive:hover {
	cursor:default;	
	background: url("../images/sprite-map.png") -43px 0px no-repeat;
}




.menuLink {
	float: left;
	margin-left: 0px;
	left: -132px;	
	background: url("../images/sprite-map.png") 0 0px no-repeat; 
	position: relative;
	top: -180px;
	cursor:pointer;			
}

.menuLink:hover {  
	background: url("../images/sprite-map.png") 0 -44px no-repeat; 
}

.menuLink.inactive {
    filter:alpha(opacity=50); 

    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:0.5; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 0.5; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.5; 	
}

.menuLink.inactive:hover {
	cursor:default;
	background: url("../images/sprite-map.png")  0 0px no-repeat;

}




.pageheader {
    float: left;
    height: 40px;
    margin: 0 0 5px 4px;
    padding: 0 0 5px;
    position: relative;
    width: 100%;
}
.pageheader span {
    left: 45px;
    position: absolute;
}
.pageheader h1 {
    color: #FFFFFF !important;
    font-size: 18px !important;
    line-height: 28px !important;
    margin: 5px 0 0 5px;
}


p.pagenumber {
    background: none repeat scroll 0 0 #F7DA47;
    color: #000000 !important;
    float: left;
    font-size: 16px;
    font-weight: bold;
    height: 20px;
    padding: 10px 8px 8px 8px!important;
    text-align: center;
    width: 20px;
}

/*  _______________________________________

	07 TYPOGRAPHY
    _______________________________________  */


p, h1, h2, h3, h4, h5, h6 {
	margin-bottom: 15px;
	padding: 0;
	color: #000;
}
p {
	font-size: 13px !important;
	line-height: 16px;
	padding: 0;
	text-align: left;
}


h1, h2, h3, h4, h5, h6 {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif, Helvetica;
}
strong {
	font-weight: bold;
}
.black {
	font-family: 'DeliciousBold';
}

a {
	text-decoration: none !important;
	font-weight: bold;
	color: #000;
}

a:hover {
	text-decoration: underline;
	color: 0099cc;
}

.cursor {cursor: help;}


.link1 {color: white; 	text-decoration: none;}
.link2 {color: #0099cc; text-decoration: none;}
.link3 {color:yellow !important;  text-decoration: none;}




h1 a:hover {
	text-decoration: none;
}


.list {
	font-size: 14px;
	line-height: 18px;
	margin: 0 0 15px 15px;
	list-style-type:square;
}
.list li {
	text-indent: 0px;
}


.list-large {
	font-size: 20px;
	line-height: 18px;
	margin: 0 0 15px 15px;
	list-style-type:square;
	color: #fff;
}
.list-large li {
	text-indent: 0px;
	padding: 10px 0 10px 10px;
}

.listpadding {padding: 3px 0 3px 20px};


#back {
	margin: 160px 0px 0px 340px;
}




.standardpagebtn a {

    float: left;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    margin: 0 0 5px;
    padding: 7px 10px;
    position: relative;
	color: #000;
	display: inline-block;
	width: 92%;
}

.standardpagebtn a:hover {
	text-decoration: underline;
}




.dropboxbtn {
    background: #0099ff;
    float: left;
    height: 55px;
    margin: 0px 3px 5px 170px;
    position: relative;
	width: 200px;
	display:block;
	background: url("../images/buttons/dropbox-btn.png") 0px 0px no-repeat;	
}

.dropboxbtn p{
	color: #fff;
	text-align:center;	
}

.dropboxbtn:hover {
	background: url("../images/buttons/dropbox-btn.png") -0px -57px no-repeat;

}



.btn {
	background-color: #e5e5e5;
	background-image: none;
	filter: none;
	border: 0;
	box-shadow: none;
	padding: 7px 14px; 
	text-shadow: none;
	font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;  	
  color: #333333;
	cursor: pointer;
	outline: none;
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}
.btn:hover, 
.btn:focus, 
.btn:active,
.btn.active,
.btn[disabled],
.btn.disabled {  
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  color: #333333;
  box-shadow: none;
  background-color: #d8d8d8;
}


/*  Green */
.btn.greenbtn {
  color: white;
  text-shadow: none;	 
  background-color: #35aa47;
}
.btn.greenbtn:hover, 
.btn.greenbtn:focus, 
.btn.greenbtn:active, 
.btn.greenbtn.active,
.btn.greenbtn.disabled, 
.btn.greenbtn[disabled]{ 
  background-color: #1d943b !important;
  color: #fff !important;
}


.big {
height: 38px;
font-size: 18px;
line-height: 38px;
padding: 8px 16px;
}



[class^="m-icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;;
  margin-top: 4px;
  line-height: 14px;  
  vertical-align: top;
  background-image: url(../images/buttons/syncfusion-icons-white.png);
  background-position: 0 0;
  background-repeat: no-repeat; 
}

[class^="m-icon-big-"] {
  display: inline-block;
  width: 30px;
  height: 30px; 
  margin: 6px;
  vertical-align: top;
  background-image: url(../images/buttons/syncfusion-icons-white.png);
  background-position: 0 0px;
  background-repeat: no-repeat; 
}

.m-icon-big-swapright {
background-position: -42px -28px;
}
.m-icon-white {
background-image: url(../images/buttons/syncfusion-icons-white.png);
}


/*  Misc */
.btn.icn-only {
  min-width: 14px;
}
.btn.bigicn-only {
  min-width: 34px;
}
.m-icon-swapright {
  background-position: -27px -10px;
}
.m-icon-swapdown {
  background-position: -68px -10px;
}
.m-icon-swapleft {
  background-position: -8px -10px;
}
.m-icon-swapup {
  background-position: -46px -10px;
}
.m-icon-big-swapright{
  background-position: -42px -28px;
}
.m-icon-big-swapdown{
  background-position: -115px -28px;
}
.m-icon-big-swapleft{
  background-position: -6px -28px;
}
.m-icon-big-swapup{
  background-position: -78px -28px;
}




.btn-group.open .btn-primary.dropdown-toggle, .btn-primary.disabled, .btn-primary[disabled], .btn-primary:hover, .btn-primary:focus {
background: #df4d23;
color: #fff;
}

.skypebtn {
    background: #0099ff;
    float: left;
    height: 55px;
    margin: 0px 3px 5px 0px;
    position: relative;
	width: 200px;
	display:block;
	background: url("../images/buttons/skype-btn.png") 0px 0px no-repeat;	
}

.skypebtn p{
	color: #fff;
	text-align:center;	
}

.skypebtn:hover {
	background: url("../images/buttons/skype-btn.png") -0px -57px no-repeat;

}


.glyphicons.btn-icon {
text-align: left;
padding: 5px 7px 5px 40px;
}


.emailbtn {
    background: #0099ff;
    float: left;
    height: 55px;
    margin: 0px 3px 5px 0px;
    position: relative;
	width: 200px;
	display:block;
	background: url("../images/buttons/email-btn.png") 0px 0px no-repeat;	
}

.emailbtn p{
	color: #fff;
	text-align:center;	
}

.emailbtn:hover {
	background: url("../images/buttons/email-btn.png") -0px -57px no-repeat;

}



.linkbtn {
    background: #0099ff;
    float: left;
    height: 38px;
    margin: 0px 3px 5px 0px;
    position: relative;
	width: 200px;
	display:block;
	background: url("../images/buttons/link-btn.png") 0px 0px no-repeat;	
}

.linkbtn p{
	color: #fff;
	text-align:center;	
}

.linkbtn:hover {
	background: url("../images/buttons/link-btn.png") -0px -38px no-repeat;

}





/*  _______________________________________

	table list
    _______________________________________  */



 
.tablelist ul {
  list-style-type: none;
  width: 450px;
}
 
.tablelist h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
 
.tablelist li img {
  float: left;
  margin: 0 15px 0 0;
}
 
.tablelist li p {
  font: Georgia, Times New Roman, serif;
}
 
.tablelist li {
  padding: 10px;
  overflow: auto;
}
 
.tablelist li:hover {
  background: #eee;
  cursor: pointer;
}


.tableformat img{
	float:left;
	padding:0px 5px 0 0;
}
	
.tableformat p{
	padding:5px 10px 0 0;
}



  



/*  _______________________________________

	08 TABS
    _______________________________________  */



ul.tabs {
	margin: 0px 0px 10px 0px;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	width: 100%
}
ul.tabs li {
	float: left;
	padding: 0;
	overflow: hidden;
	position: relative
}



ul.tabs li a {

	font-weight: normal;
	font-size: 16px;
	text-decoration: underline;
	color: #000;
	display: block;
	outline: none;
	height: 35px;


}
ul.tabs li a:hover {

	color: #fff;
	text-decoration: none
}
html ul.tabs li.current a, html ul.tabs li.current a:hover, html ul.tabs li a.selected, html ul.tabs li a.selected:hover {
	text-decoration: none;
	color: #fff;
	font-weight:bold;
	cursor: default;
}
.tab_content {
	padding: 0px
}
.tab_container {
	overflow: hidden;
	clear: both;
	float: left;
	width: 100%;
	margin: 35px 0 0 0;
}


.processsafetybarriertab  {
	background: url("../images/icons/tabs-process-safety.png") no-repeat center bottom;  
	width:	70px !important;
	height: 50px !important;
	vertical-align:middle !important;
	text-align:center !important;
	padding:15px 15px 0 15px !important;
	margin: 0px 15px 0px 0px;
}

ul.tabs li a.safety { background-position: -9px 0; }
ul.tabs li.current a.safety, html ul.tabs li.current a.safety:hover  { background-position: -9px -65px; }

ul.tabs li a.prevent { background-position: -124px 0; }
ul.tabs li.current a.prevent, html ul.tabs li.current a.prevent:hover { background-position: -124px -65px; }

ul.tabs li a.control { background-position: -241px 0; }
ul.tabs li.current a.control, html ul.tabs li.current a.control:hover  { background-position: -241px -65px; }

ul.tabs li a.mitigate { background-position: -356px 0; }
ul.tabs li.current a.mitigate, html ul.tabs li.current a.mitigate:hover  { background-position: -356px -65px; }



.process3Pstab  {
	background: url("../images/icons/tabs-SafetyBarrier.png") no-repeat center bottom; 
	width:	100px !important;
	height: 50px !important;
	vertical-align:middle !important;
	text-align:center !important;
	padding:15px 15px 0 15px !important;
	margin: 0px 21px 0px 0px;
}

ul.tabs li a.tabplant { background-position: -5px 0; }
ul.tabs li.current a.tabplant, html ul.tabs li.current a.tabplant:hover { background-position: -5px -65px; }

ul.tabs li a.tabprocess { background-position: -135px 0; }
ul.tabs li.current a.tabprocess, html ul.tabs li.current a.tabprocess:hover { background-position: -135px -65px; }

ul.tabs li a.tabpeople { background-position: -265px 0; }
ul.tabs li.current a.tabpeople, html ul.tabs li.current a.tabpeople:hover  { background-position: -265px -65px; }



.maintab  {
	background: url("../images/icons/tabs-default.png") no-repeat center bottom; 
	width:	115px !important;
	height: 55px !important;
	vertical-align:middle !important;
	text-align:center !important;
	padding:10px 15px 0 18px !important;
	margin: 0px 5px 0px 10px;
}

ul.tabs li a.tabdefault { background-position: -5px 0px; }
ul.tabs li.current a.tabdefault, html ul.tabs li.current a.tabdefault:hover { background-position: -5px -65px;  }

ul.tabs li a.tabdefault2 { background-position: -5px 0px; }
ul.tabs li.current a.tabdefault2, html ul.tabs li.current a.tabdefault2:hover { background-position: -5px -65px;  }





.focus  {
	background: url("../images/icons/tabs-focus.png") no-repeat center bottom; 
	width:	150px !important;
	height: 141px !important;
	vertical-align:middle !important;
	text-align:center !important;
	padding:15px 15px 0 15px !important;
	margin: 0px 21px 0px 10px;
}

ul.tabs li a.tabfocus1 { background-position: -5px 0px; }
ul.tabs li.current a.tabfocus1, html ul.tabs li.current a.tabfocus1:hover { background-position: -5px -131px;  }

ul.tabs li a.tabfocus2 { background-position: -5px 0px; }
ul.tabs li.current a.tabfocus2, html ul.tabs li.current a.tabfocus2:hover { background-position: -5px -131px;  }

ul.tabs li a.tabfocus3 { background-position: -5px 0px; }
ul.tabs li.current a.tabfocus3, html ul.tabs li.current a.tabfocus3:hover { background-position: -5px -131px;  }

ul.tabs li a.tabfocus4 { background-position: -5px 0px; }
ul.tabs li.current a.tabfocus4, html ul.tabs li.current a.tabfocus4:hover { background-position: -5px -131px;  }






.nomargin {
	margin:0 !important;	
}
/*  _______________________________________

	09 CONTACT FORM
    _______________________________________  */



.form {
	font-family: 'Delicious', Arial, Helvetica, sans-serif;
	font-size: 11px
}
.form label {
	font-weight: bold;
	padding: 0;
	margin: 0
}
.form ul li {
	list-style: none;
	display: inline
}
#name, #email, #message {
	width: 260px;
	padding: 0 3px 0 3px;
	border: none;
	margin: 5px 0 5px 0;
	background-color: #FFF;
	border: #2B2B2B solid 1px;
	font-size: 12px
}
#name, #email {
	height: 20px
}
#message {
	font-family: 'Delicious', Arial, Helvetica, sans-serif;
	height: 75px;
	overflow: auto
}
.button {
	font-family: 'Delicious', Arial, Helvetica, sans-serif;
	font-size: 11px;
	background: #FFF;
	border: #2B2B2B solid 1px;
	margin: 5px 15px 0px 0px;
	float: left;
	height: 22px;
	width: 70px
}
.button:hover {
	background: #333334;
	color: #FFF;
	border: #2B2B2B solid 1px
}
.message {
	display: none;
	width: 260px;
	float: left;
	margin-bottom: 5px;
}
#alert li {
	width: auto;
	float: left;
	list-style: none;
}
.error {
	font-size: 11px;
	color: #ED4340
}
.sent {
	font-size: 11px;
	color: #75A133
}
.contact {
	position: relative
}
.contact ul {
	list-style-type: none
}
.contact li.special {
	display: none
}
/*  _______________________________________

	10 FOOTER
    _______________________________________  */



#footer { /* Footer container (whole browser width) */
	position: absolute;
	bottom: 0;
	border-top: #999 solid 1px;
	border-bottom: #999 solid 1px;
	width: 100%;
	height: 30px;
	padding-top: 10px;
	background-color: #000000;
	z-index: 3;
}
#footer_box { /* Centered footer container with som padding to align properly the content */
	width: 820px;
	height: 30px;
	margin: 0px auto;
	position: relative;
	padding: 0px 10px 0px 10px;
}
#footer_box p { /* Centered footer container with som padding to align properly the content */
	color: #ffffff;
	font-size:12px;
}

#footer_box p a {
	color:yellow; text-decoration:none; font-weight:normal;
}
/*  _______________________________________

	11 LEFT ALIGNED LAYOUT
    _______________________________________  */



.left_aligned #mask {
	width: 20000px;
	height: 100%;
}
.left_aligned .item {
	width: 950px;
	height: 100%;
	float: left;
}
.left_aligned .content {
	width: auto;
	height: 100%;
	margin: 0;
	position: relative;
}
.left_aligned #header { /* Container to display the background on the whole browser width */
	width: 100%;
	height: 120px;
	margin: 0;
	padding: 0;
}
.left_aligned #header_box { /* Centered container for the header, contains the menu and the logo */
	width: 820px;
	margin: 0px 0px 0px 55px;
	position: relative;
	padding: 0px 10px 0px 10px; /* Some left and right paddings to fix an alignment issue */
}
/*  _______________________________________

	12 VERTICAL LAYOUT
    _______________________________________  */



.vertical_layout .previous, .vertical_layout .next {
	width: 26px;
	height: 17px;
}
.vertical_layout .previous {
	background: url("../images/icons/previous_v.png") no-repeat left bottom;
}
.vertical_layout .next {
	background: url("../images/icons/next_v.png") no-repeat right bottom;
}
/*  _______________________________________

	13 COLORS
    _______________________________________  */
	
h1 {
	font-size: 23px !important;
	line-height: 28px !important;

}

h2 {
	font-size: 18px !important;
	margin: 8px 0 10px 0;
}


h3 {
	font-size: 16px !important; font-weight: bold;
}

.purple {
	background-color:purple;
}


.welcome
{
background-image:url("../images/background/begin.jpg");
color:#FFF!important;
}

.purple p, .purple h1, .purple h2 {
	color: #fff !important;
}
.white {
	background-color: #fff !important;
}

.white-study {
	background-color: #fff !important;
}

.baige {
	background-color: #e5e0d8 !important;
}

.unit8-1 {
background-image:url("../images/background/unit8--sec1.png");
width:484px;
height:342px;
}

.unit8-3a {
background-image:url("../images/background/unit8-sec3a.jpg");
width:484px;
height:233px;
}

.unit8-3b {
background-image:url("../images/background/unit8-sec3b.jpg");
width:484px;
height:233px;
}

.unit10-sec1-background {
background-image:url("../images/background/unit10-sec1-background.jpg");
width:402px;
height:450px;
}


.pasadena
{
background-image:url("../images/background/pasadena.jpg");
width:484px;
height:450px;
}


.white p, .white h1, .white h2 {
	color: #333 !important;
}

.white-study h1, .white h2 {
	color: #333 !important;
}

.white-study p 
{
	color: #333 !important;
	line-height:18px;
}

.white a, {
	font-color: #fff !important;
}

.green {
	background-color: #045074 !important;
}

.green:hover {
	background-color: purple !important;
	top:-2px;
}

.green p, .green h1, .green h2 {
	color: #fff !important;
}

.lightgreen {
background-color: #9acc59 !important;
}
.lightgreen p, .lightgreen h1, .lightgreen h2 {
	color: #fff !important;
}


.red {
	background-color: #6A1C12 !important;
}
.red p, .red h1, .red h2 {
	color: #fff !important;
}

p.largenumber {background:#fff; color:purple !important; padding:35px 30px 35px 30px !important; margin:0px 15px 50px 0px  !important; font-size: 38px; font-weight:bold; float:left;}
p.largenumber2 {background:#fff; color:purple!important; padding:12px 10px 10px 10px !important; margin:-2px 10px 10px 3px !important; font-size: 14px; font-weight:bold; float:left; height: 20px;}

p.largenumber3 {background:#ffffff; color:purple !important; padding:5px; !important; margin:-2px 5px 10px 3px !important; font-size: 16px; float:left;}

p.largenumber4 {background:purple; color:#FFFFFF; !important; padding:10px; !important; margin:-2px 5px 10px 3px !important; font-size: 18px; float:left; height: 15px;}

.mainMenu p a {color:purple!important; font-weight:normal!important; font-size:13px!important; line-height:22px!important;}
.mainMenu p a:hover {text-decoration!important: underline!important;}

.smallLogo {
	background: url("../images/hullSmall.jpg") no-repeat;
	float: right;
	display:block;
	width: 97px; /* Modify these "width" and "height" values according to the size of your logo */
	height: 23px;
	position: relative;
	top: 0px;
	right:8px;
}

div.note { 
	background:#ddd; color:#333 !important; font-size:13px !important; line-height:16px; padding:10px; font-style:italic;	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.opacity{opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}


.add {
    background: url("img/sprites/favourites_sprite.png?jcb=1343731246") no-repeat scroll -145px -41px #FFFFFF;
    color: #4E7A21;
    padding-left: 25px;
}


/* Start */
/*

<a class='neo-download-three styleone skybluecolor' href='#1'>
	<span class='elementone'>download</span>
	<span class='elementtwo'>0.1 Free</span>
</a>

<a class='neo-download-three styleone styleone-b skybluecolor' href='#1'>
	<span class='elementone'>download</span>
	<span class='elementtwo'>0.1 Free</span>
</a>

*/
/* Framework */
.neo-download-three{
	text-transform: capitalize;
	font: bold 18px arial, helvetica, sans-serif;
	float: left;	
	color:#ffffff;
	padding:10px 0;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-ms-border-radius:10px;
	}
.neo-download-three,
.neo-download-three:link,
.neo-download-three:visited{
	text-decoration: none;
	}
.neo-download-three:focus{
	outline: none;
	box-shadow:1px 1px 1px #548193;
	-moz-box-shadow:1px 1px 1px #548193;
	-webkit-box-shadow:1px 1px 1px #548193;
	-ms-box-shadow:1px 1px 1px #548193;
}
/* End Framework */
/* skybluecolor and silvercolor:hover */
.silvercolor:hover,	
.skybluecolor{
	/* background and gradient */
	background: #800080;
	background: -webkit-gradient(/* old webkit */
		linear,
		left top,
		left bottom,
		color-stop(0%, #844885),
		color-stop(100%, #800080));	
	background: linear-gradient(top,
		#844885 0%,
		#800080 100%);
	background: -moz-linear-gradient(top,
		#844885 0%,
		#800080 100%);
	background: -webkit-linear-gradient(top,
		#844885 0%,
		#800080 100%);
	background: -o-linear-gradient(top,
		#844885 0%,
		#800080 100%);
	background: -ms-linear-gradient(top,
		#844885 0%,
		#800080 100%);
	/* end background and gradient */
	
	text-shadow: -1px 0 #800080, 0 -1px #800080;
	border: 1px solid #BFBFBF;
	}
.silvercolor:hover span.elementone:before,
.skybluecolor span.elementone:before{
	box-shadow: -1px 0 #0089BF, 0 -1px #0089BF;
	-moz-box-shadow: -1px 0 #0089BF, 0 -1px #0089BF;
	-webkit-box-shadow: -1px 0 #0089BF, 0 -1px #0089BF;
	-ms-box-shadow: -1px 0 #0089BF, 0 -1px #0089BF;
	}
.silvercolor:hover span.elementtwo:before,
.skybluecolor span.elementtwo:before{
	box-shadow: 0 -1px 0 #0089BF, -1px 0 0 #0089BF;
	-moz-box-shadow: 0 -1px 0 #0089BF, -1px 0 0 #0089BF;
	-webkit-box-shadow: 0 -1px 0 #0089BF, -1px 0 0 #0089BF;
	-ms-box-shadow: 0 -1px 0 #0089BF, -1px 0 0 #0089BF;
	}
.silvercolor:hover span.elementtwo:after,	
.silvercolor:hover span.elementtwo:before,
.skybluecolor span.elementtwo:after,	
.skybluecolor span.elementtwo:before{
	box-shadow: 0 -1px 0 #0089BF;
	-moz-box-shadow: 0 -1px 0 #0089BF;
	-webkit-box-shadow: 0 -1px 0 #0089BF;
	-ms-box-shadow: 0 -1px 0 #0089BF;
	}
.silvercolor:hover span.elementtwo,
.skybluecolor span.elementtwo{
	/* background and gradient */
	background: #007DAF;
	background: -webkit-gradient(/* old webkit */
		linear,
		left bottom,
		right bottom,
		color-stop(0%, #007DAF),
		color-stop(100%, #00668F));
	background: linear-gradient(left,
		#007DAF 0%,
		#00668F 100%);
	background: -moz-linear-gradient(left,
		#007DAF 0%,
		#00668F 100%);
	background: -webkit-linear-gradient(left,
		#007DAF 0%,
		#00668F 100%);
	background: -o-linear-gradient(left,
		#007DAF 0%,
		#00668F 100%);
	background: -ms-linear-gradient(left,
		#007DAF 0%,
		#00668F 100%);
	/* end background and gradient */
	}
.silvercolor:hover span.elementtwo:before,
.skybluecolor span.elementtwo:before{
	border-color: #006C98 #006C98 transparent transparent;
	}

/*
end skybluecolor and silvercolor:hover
*/

/*
silvercolor and skybluecolor:hover
*/
.skybluecolor:hover,
.silvercolor{
	/* background and gradient */
	background: #E0DFE3;
	background: -webkit-gradient(/* old webkit */
		linear,
		left top,
		left bottom,
		color-stop(0%, #efefef),
		color-stop(40%, #BFBFBF),
		color-stop(40%, #b8b8b8),
		color-stop(100%, #909090));			
	background: linear-gradient(top,
		#efefef 0%,
		#BFBFBF 40%,
		#b8b8b8 40%,
		#909090 100%);
	background: -moz-linear-gradient(top,
		#efefef 0%,
		#BFBFBF 40%,
		#b8b8b8 40%,
		#909090 100%);
	background: -o-linear-gradient(top,
		#efefef 0%,
		#BFBFBF 40%,
		#b8b8b8 40%,
		#909090 100%);
	background: -webkit-linear-gradient(top,
		#efefef 0%,
		#BFBFBF 40%,
		#b8b8b8 40%,
		#909090 100%);
	background: -ms-linear-gradient(top,
		#efefef 0%,
		#BFBFBF 40%,
		#b8b8b8 40%,
		#909090 100%);
	/* end background and gradient */
	border: 1px solid #BFBFBF;
	text-shadow: -1px 0 #828282, 0 -1px #828282;
	}
.skybluecolor:hover span.elementtwo,
.silvercolor span.elementtwo{
	/* background and gradient */
	background: #686767;
	background: -webkit-gradient(/* old webkit */
		linear,
		left bottom,
		right bottom,
		color-stop(0%, #686767),
		color-stop(100%, #5B5959));	
	background: linear-gradient(left,
		#686767 0%,
		#5B5959 100%);
	background: -moz-linear-gradient(left,
		#686767 0%,
		#5B5959 100%);
	background: -o-linear-gradient(left,
		#686767 0%,
		#5B5959 100%);
	background: -webkit-linear-gradient(left,
		#686767 0%,
		#5B5959 100%);
	background: -ms-linear-gradient(left,
		#686767 0%,
		#5B5959 100%);
	/* end background and gradient */
	}
.skybluecolor:hover span.elementone:before,
.silvercolor span.elementone:before{
	box-shadow: -1px 0 0 #828282, 0 -1px 0 #828282;
	-moz-box-shadow: -1px 0 0 #828282, 0 -1px 0 #828282;
	-webkit-box-shadow: -1px 0 0 #828282, 0 -1px 0 #828282;
	-ms-box-shadow: -1px 0 0 #828282, 0 -1px 0 #828282;
	}
.skybluecolor:hover span.elementtwo:before,
.silvercolor span.elementtwo:before{
	box-shadow: 0 -1px 0 #828282, -1px 0 0 #828282;
	-moz-box-shadow: 0 -1px 0 #828282, -1px 0 0 #828282;
	-webkit-box-shadow: 0 -1px 0 #828282, -1px 0 0 #828282;
	-ms-box-shadow: 0 -1px 0 #828282, -1px 0 0 #828282;
	}
.skybluecolor:hover span.elementtwo:after,
.skybluecolor:hover span.elementtwo:before,
.silvercolor span.elementtwo:after,
.silvercolor span.elementtwo:before{
	box-shadow: 0 -1px 0 #828282;
	-moz-box-shadow: 0 -1px 0 #828282;
	-webkit-box-shadow: 0 -1px 0 #828282;
	-ms-box-shadow: 0 -1px 0 #828282;
	}
.skybluecolor:hover span.elementtwo:before,
.silvercolor span.elementtwo:before{
	border-color: #5B5B5B #5B5B5B transparent transparent;
	}
/* end silver color */
.styletwo:hover span.elementtwo:before{
border-color: #fff transparent transparent transparent;
}

/*
.downloadbotton:hover span.elementone:before
.downloadbotton:hover span.elementtwo:after,
*/
.styletwo-b:hover span.elementone:before,
.styleone-b:hover span.elementone:before,
.stylesix:hover span.elementone:before,
.stylefive:hover span.elementone:before,
.stylethree:hover span.elementone:before,
.stylefour:hover span.elementtwo:after,
.stylethree:hover span.elementtwo:after,
.styletwo:hover span.elementtwo:after,
.stylesix:hover span.elementtwo:after,
.stylefive:hover span.elementtwo:after,
.stylefour:hover span.elementtwo:after,
.styletwo-b span.elementone:before,
.styleone-b span.elementone:before,
.stylesix span.elementone:before,
.stylefive span.elementone:before,
.stylethree span.elementone:before,
.stylefour span.elementtwo:after,
.stylethree span.elementtwo:after,
.styletwo span.elementtwo:after,
.stylesix span.elementtwo:after,
.stylefive span.elementtwo:after,
.stylefour span.elementtwo:after{
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	-ms-box-shadow: none;
}
.stylesix span,
.stylefive span,
.stylefour span,
.stylethree span,
.styletwo span,
.styleone span{
	display: block;
	padding: 0 20px 0 65px;
	}
.stylesix:hover span.elementtwo,
.stylefive:hover span.elementtwo,
.stylefour:hover span.elementtwo,
.stylethree:hover span.elementtwo,
.styletwo:hover span.elementtwo,
.styleone:hover span.elementtwo,
.stylesix span.elementtwo,
.stylefive span.elementtwo,
.stylefour span.elementtwo,
.stylethree span.elementtwo,
.styletwo span.elementtwo,
.styleone span.elementtwo{
	font-size: 18px;
	font-weight: normal;
	background: transparent;
	}
.stylesix span.elementone:before,
.stylefive span.elementone:before,
.stylefour span.elementone:before,
.styletwo span.elementone:before,
.styleone span.elementone:before{/* to styleone, styletwo, this style for created circle */
	position: relative;
	border: 4px solid #fff;
	content: '';
	float: left;
	width: 40px;
	height: 40px;
	margin: 0 0 0 -55px;
	border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	}
.stylefour,
.stylefive{
	overflow: hidden;
	}
.styletwo-b span.elementone:before,
.styleone-b span.elementone:before{
	border-color: transparent;
	}
.stylefour span.elementone:before{
	margin: 0 0 0 -66px;
	border: none;
	background: #fff;
	opacity: 0.5;
	border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	}
.stylesix span.elementone:before,
.stylefive span.elementone:before{
	height: 60px;
	margin: -20px 0 0 -66px;
	border: none;
	background: #fff;
	opacity: 0.5;
	
	border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	}
.stylesix span.elementone:before{
	margin: -11px 0 0 -66px;
	height: 62px;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	}
.stylesix{
	padding-bottom: 0;
	overflow: hidden;
	}
.stylethree span.elementone:before{
	position: relative;
	background: #fff;
	content: '';
	float: left;
	width: 40px;
	height: 40px;
	margin: 0 0 0 -55px;
	opacity: 0.6;
	border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	}
.stylethree-b span.elementone:before{
	background: transparent;
	}
.styleone span.elementtwo:before{
	position: relative;
	z-index: 2;
	content: '';
	width: 10px;
	height: 14px;
	float: left;
	border-width: 16px 16px 16px 16px;
	margin: -10px 0 0 -36px;
	background: #fff;
	}
.styletwo span.elementtwo:before{
	position: relative;
	clear: both;
	content: '';
	width: 0;
	height: 0;
	float: left;
	border-style: solid;
	border-width: 12px 12px 12px 12px;
	margin: -32px 0 0 -43px;
	border-color: #fff transparent transparent;
	}
.stylesix span.elementtwo:after,
.stylefive span.elementtwo:after,
.stylefour span.elementtwo:after,
.stylethree span.elementtwo:after,
.styletwo span.elementtwo:after,
.styleone span.elementtwo:after{/* triangel */
	position: relative;
	clear: both;
	content: '';
	width: 0;
	height: 0;
	float: left;
	border-style: solid;
	border-width: 12px 12px 12px 12px;
	margin: -23px 0 0 -43px;
	border-color: #fff transparent transparent;
	}
.stylethree span.elementtwo:after{
	border-width: 10px 10px 10px 10px;
	margin: -23px 0 0 -45px;
	}
.stylesix span.elementtwo:after,
.stylefive span.elementtwo:after,
.stylefour span.elementtwo:after{
	margin: -26px 0 0 -57px;
	border-top-color: #fff;
	opacity: 0.8;	
	}	
.stylesix span.elementtwo:after{
	margin-top: -34px;
	}
.styleribbon{
	padding: 15px 0 20px 0;
	}
.styleribbon span.elementone{
	display: block;
	padding: 0 20px 0 70px;
	}
.styleribbon span.elementtwo{
	float: left;
	margin: -25px 0 0 -7px;
	font-size: 14px;
	font-weight: normal;
	
	padding: 5px 5px 5px 5px;
	text-shadow: none;
	clear: both;
	position: relative;
	z-index: 2;
	display: block;
	border-radius: 3px 3px 3px 0;
	-moz-border-radius: 3px 3px 3px 0;
	-webkit-border-radius: 3px 3px 3px 0;
	}
.styleribbon span.elementtwo:before{
	content: '';
	width: 0;
	position: relative;
	z-index: 1;
	height: 0;
	float: left;
	border-style: solid;
	border-width: 3px;
	top: 21px;
	left: -5px;	
	}
/* End */

/* Slots for final card positions */

#cardSlots, #cardSlots1, #cardSlots2 {
  margin: 0 auto 0 auto;
  /*background: #ddf;*/
}

/* The initial pile of unsorted cards */

#cardPile, #cardPile1, #cardPile2 {
  margin: 0 auto;
  /*background: #ffd;*/
}

#cardSlots, #cardPile, #cardSlots1, #cardPile1, #cardSlots2, #cardPile2 {
  
  height: 120px;
  padding: 20px 25px;
  /*border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .3em rgba(0, 0, 0, .8);*/
}

/* Individual cards and slots */

#cardSlots div, #cardPile div, #cardSlots1 div, #cardPile1 div, #cardSlots2 div, #cardPile2 div {
  float: left;
  width: 140px;
  height: 75px;
  padding: 15px 10px 10px 10px;
  font-size:20px;
  text-align: center;
  padding-bottom: 0;
/*  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;*/
  margin: 0 0 0 10px;
  background: #fff;
}

.back1 {
	background: url("../images/icons/box-prevent.png") no-repeat !important;  background-position: 20px 12px !important; border: 1px dashed #999;
	}
	
.back2 {
	background: url("../images/icons/box-control.png") no-repeat !important;  background-position: 20px 12px !important;  border: 1px dashed #999;
	}
	
.back3 {
	background: url("../images/icons/box-mitigate.png") no-repeat !important;  background-position: 20px 12px !important;  border: 1px dashed #999;
}



#cardSlots div:first-child, #cardPile div:first-child, #cardSlots1 div:first-child, #cardPile1 div:first-child, #cardSlots2 div:first-child, #cardPile2 div:first-child {
  margin-left: 0;
}

#cardSlots div.hovered, #cardSlots1 div.hovered, #cardSlots2 div.hovered {
  background: #aaa;
}

#cardSlots div, #cardSlots1 div, #cardSlots2 div {
  color: #666;
  border-style: dashed;
}

#cardPile div, #cardPile1 div, #cardPile2 div {
  background: #009ee0;
  color: #fff;
  cursor: move;
  font-size: 16px;
  border: 2px solid #9ACC59;
   
}

#cardPile div li:hover, #cardPile1 div li:hover, #cardPile2 div li:hover {
   border: 5px solid #666;
}

#cardPile div.ui-draggable-dragging, #cardPile1 div.ui-draggable-dragging, #cardPile2 div.ui-draggable-dragging {
/*  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);*/
    border: 2px solid #666;
}
 

/* Individually coloured cards */

#card1.correct { background: red; }
#card2.correct { background: brown; }
#card3.correct { background: orange; }
#card4.correct { background: yellow; }
#card5.correct { background: #9acc59; color: #FFF; opacity:0.9;
filter:alpha(opacity=80); /* For IE8 and earlier */}
#card6.correct { background: cyan; }
#card7.correct { background: purple; }
#card8.correct { background: indigo; }
#card9.correct { background: purple;  }
#card10.correct { background: violet; }


/* "You did it!" message */
#successMessage, #successMessage1, #successMessage2 {
  position:absolute;
  padding:20px;
  z-index: 100;
  font-size: 18px;
  
}

.flipStyle {
  width: 102px;
  height:45px;
  padding:10px 10px 5px 10px;
  background-color: #009ee0;
  color: #fff;
  text-align: center;
  font-size:13px;
}

.flipStyle a{
  font-size:48px;
  padding: 0 50px 0 35px;
  color: #fff;
  text-decoration: none;
}

.flipStyle-06-sec4-a {
  width: 460px;
  height:35px;
  background-color: #009ee0;
  color: #fff;
  text-align: center;
  font-size:17px;
  line-height:35px;
  position:relative;
  float:left;
  margin-top:-35px;
  margin-left:-9px;
}

.flipStyle-06-sec4-a a{
  font-size:17px;
  background-color: #009ee0;
  color: #fff;
  text-decoration: none;
}

.flipStyle-06-sec4-b {
  width: 460px;
  height:35px;
  background-color: #009ee0;
  color: #fff;
  text-align: center;
  font-size:17px;
  line-height:35px;
  position:relative;
  float:left;
  margin-top:-35px;
  margin-left:-9px;
}

.flipStyle-06-sec4-b a{
  font-size:17px;
  background-color: #009ee0;
  color: #fff;
  text-decoration: none;
}

.flipStyle-06-sec4-c {
  width: 460px;
  height:35px;
  background-color: #009ee0;
  color: #fff;
  text-align: center;
  font-size:17px;
  line-height:35px;
  position:relative;
  float:left;
  margin-left:-139px;
}

.flipStyle-06-sec4-c a{
  font-size:17px;
  background-color: #009ee0;
  color: #fff;
  text-decoration: none;
}

.flipStyle-07-sec11-a {
  width: 400px;
  height:450px;
  background-color:#ffffff;
  color: #fff;
  text-align: center;
  font-size:17px;
  margin-top:-29px;
  text-align:left;
  padding:0px;

}

.flipStyle-07-sec11-a a{
  font-size:17px;
  background-color: #ffffff;
  color: #fff;
  text-decoration: none;
}

.flipStyle-07-sec11-b {
  width: 400px;
  height:450px;
  background-color: #ffffff;
  color: #fff;
  text-align: center;
  font-size:17px;
  margin-top:-29px;
  text-align:left;
  padding:0px;
}

.flipStyle-07-sec11-b a{
  font-size:17px;
  background-color: #ffffff!important;
  color: #000000;
  text-decoration: none;
}

.flipStyle-07-sec13-a {
  width: 402px;
  height:220px;
  background-color:#ffffff;
  color: #fff;
  text-align: center;
  font-size:17px;
  margin-top:-29px;
  text-align:left;
  padding:0px;

}

.flipStyle-07-sec13-a a{
  font-size:17px;
  background-color: #ffffff;
  color: #fff;
  text-decoration: none;
}


.dragdrop {
    display: block;
}
.dragdrop {
	height: 21px;
	margin-bottom: 8px;
	color: purple;
	font-size: 16px;
	padding-left: 32px;
	padding-top: 4px;
	background-image: url('../images/icons/arrow.png');
	background-repeat: no-repeat;
	
}





#q1, #q2, #q3, #q4, #q5, #q6 {
  width: 280px;
  height:15px;
  padding:10px 10px 10px 10px;
  background-color: #009ee0;
  color: #fff;
  margin: 0 0 13px 0px;
  font-size:16px;
	
}


#q1 a, #q2 a, #q3 a, #q4 a, #q5 a, #q6 a {
  color: #ffffff;
  text-decoration: none;
	
}




#frequency, #consequence{
  width: 150px;
  height:90px;
  padding:35px 10px 10px 10px;
  background-color: #009ee0;
  color: #fff;
  margin: 50px 0 13px 0px;
  font-size:20px;
  text-align:center;
	
}


#frequency a, #consequence a {
  color: #ffffff;
  text-decoration: none;
  font-size:80px;
	
}



.pillars li {float:left; margin:0 5px; width:122px; text-align:center;}
ul.pillars li {margin-top:10px;}



#my-list li{
    list-style:none;
    padding: 0 0 0 35px;
	margin: 0 0 0 15px;
	width: 5px;
	height: 32px;
	line-height: 40px;
}


.plant{background: url(../images/icons/icon-3ps.jpg) -8px -3px;}
.process{ background: url(../images/icons/icon-3ps.jpg) -8px -38px;}
.people{background: url(../images/icons/icon-3ps.jpg) -8px -70px;}


#media-list li{
    list-style:none;
    padding: 5px 10px 10px 35px;
	margin: 10px 0 0 5px;
	width: 90%;
	line-height: 10px;
}
.videoicon{background: url(../images/buttons/video-icon.png) no-repeat;}
.keypointicon{background: url(../images/buttons/key-point.png) no-repeat;}
.zoom{background: url(../images/icons/ico-zoom.jpg) no-repeat;}
.questionmark{background: url(../images/icons/ico-questionmark.jpg) no-repeat;}
.pdf{background: url(../images/icons/ico-pdf.png) no-repeat;}
.web {background: url("../images/background/unit02-plantbg.jpg") no-repeat;}

.ui-progressbar {position:relative !important; top:-65px !important; height:10px !important; margin: 0 2px !important; background:#ccc !important;}
.ui-widget-header {background:purple !important; }









/* =Reflection Nav
-------------------------------------------------------------------------- */
		
#nav-reflection { padding:0; margin:5px 0 0 0; list-style: none; z-index:9999; }
#nav-reflection li { margin-right: 28px; width: 172px; float: left; }
#nav-reflection li:last-child { margin-right:0; }
#nav-reflection a, #nav-reflection a:visited, #nav-reflection a:hover { width: 192px; height: 142px; text-indent: -9999px; overflow: hidden; background: url(../images/buttons/boxMenu.png) no-repeat; display: block; }
#nav-reflection span { margin-top: 0px; width: 200px; height: 67px; text-align: center; background: url(../images/buttons/boxMenuShadows.png) no-repeat; display: block; }

/* Button Colors */		
#nav-reflection li.button-color-1 a { background-position: -0px -0px; }
#nav-reflection li.button-color-2 a { background-position: -220px -0px; /* 11 gap */ }
#nav-reflection li.button-color-3 a { background-position: -440px -0px; }
#nav-reflection li.button-color-4 a { background-position: -661px -0px; }


/* Hover Change */		
#nav-reflection li.button-color-1 a:hover, #nav-reflection li.button-color-1 a.complete { background-position: -0px -142px; }
#nav-reflection li.button-color-2 a:hover, #nav-reflection li.button-color-2 a.complete { background-position: -220px -142px; /* 11 gap */ }
#nav-reflection li.button-color-3 a:hover, #nav-reflection li.button-color-3 a.complete { background-position: -440px -142px; }
#nav-reflection li.button-color-4 a:hover, #nav-reflection li.button-color-4 a.complete { background-position: -661px -142px; }


/* Button Reflection Color */		
#nav-reflection li.button-color-1 span { background-position: 0 0; }
#nav-reflection li.button-color-2 span { background-position: -220px 0; }
#nav-reflection li.button-color-3 span { background-position: -440px 0; }
#nav-reflection li.button-color-4 span { background-position: -661px 0; }




#glossary {
    height: 100%;
    overflow: hidden;
    padding: 5px 0 0;
}
#glossary a {
    background: #009ee0;
    color: #fff;
    display: block;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10px;
    line-height: 19px;
    margin: 6px 8px 15px 0;
    text-align: center;
    width: 19px;
	padding: 1px 1px 1px 1px;
}
#glossary a:hover {
    background: none repeat scroll 0 0 #9acc59;
}


/* unit7 sec2 background images */


.background-a
{
	background-image:url(../images/background/unit7-sec2-aa.jpg);
	height:220px;
	width:402px;
}

.background-a:hover
{
	background-image:url(../images/background/unit7-sec2-a.jpg);
}

.background-b
{
	background-image:url(../images/background/unit7-sec2-bb.jpg);
	height:220px;
	width:402px;
}

.background-c
{
	background-image:url(../images/background/unit7-sec2-cc.jpg);
	height:220px;
	width:402px;
}

.background-d
{
	background-image:url(../images/background/unit7-sec2-dd.jpg);
	height:220px;
	width:402px;
	
}



.background-b:hover
{
	background-image:url(../images/background/unit7-sec2-b.jpg);
}

.background-c:hover
{
	background-image:url(../images/background/unit7-sec2-c.jpg);
}

.background-d:hover
{
	background-image:url(../images/background/unit7-sec2-d.jpg);
}

/* =end of unit7 sec2 background images
-------------------------------------------------------------------------- */


/* unit7 sec13 background images */


.background-disaster-b
{
	background-image:url(../images/background/unit-7-shuttle.jpg);
	height:220px;
	width:402px;
}

.background-disaster-c
{
	background-image:url(../images/background/unit-7-capsize-2.jpg);
	height:220px;
	width:402px;
}

.background-disaster-d
{
	background-image:url(../images/background/unit-7-air-france-2.jpg);
	height:220px;
	width:402px;	
}




/* =end of unit7 sec13 background images
-------------------------------------------------------------------------- */

/* unit7 sec16 background images */


.background-oil-disaster-b
{
	background-image:url(../images/background/unit-7-sec-16-a.jpg);
	height:220px;
	width:402px;
}

.background-oil-disaster-c
{
	background-image:url(../images/background/unit-7-sec-16-b.jpg);
	height:220px;
	width:402px;
}

.background-oil-disaster-d
{
	background-image:url(../images/background/unit-7-sec-16-c.jpg);
	height:220px;
	width:402px;	
}

/* =end of unit7 sec16 background images
-------------------------------------------------------------------------- */


/* unit7 sec2 background images */

.causes
{
	position:relative;
	float:left;
	width:700px;
	height:300px;
	margin-left:30px;
}

/* unit7 sec6 weedroot images */


.root
{
		background-image:url(../images/background/unit7-sec6-weed.jpg);
		width:320px;
		height:450px;
}

.root:hover
{
		background-image:url(../images/background/unit7-sec6-weed-a.jpg);
}

/* End unit7 sec6 weedroot images */


/* unit7 sec6 spinning newspaper */



/*-------------------------
	Simple reset
--------------------------*/


*{
	margin:0;
	padding:0;
}




/*----------------------------
		Headers
-----------------------------*/


#fin{
	font:70px 'Anton',Arial,Helvetica;
	text-align:center;
	padding-top:300px;
	text-transform:uppercase;
	display:none;
}

#fontPreload{
	font-family:'Anton';
	visibility:hidden;
	position:absolute;
}












/*
	Mosaic - Sliding Boxes and Captions jQuery Plugin
	Version 1.0.1
	www.buildinternet.com/project/mosaic
	
	By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
	Released under MIT License / GPL License
*/



/*General Mosaic Styles*/
.mosaic-block {
	float:left;
	position:relative;
	overflow:hidden;
}


.pic-unit1 {
	background:url(../images/thumbs/unit1-thumb.jpg) no-repeat;
}.pic-unit2 {
	background:url(../images/thumbs/unit2-thumb.jpg) no-repeat;
}.pic-unit3 {
	background:url(../images/thumbs/unit3-thumb.jpg) no-repeat;
}.pic-unit4 {
	background:url(../images/thumbs/unit4-thumb.jpg) no-repeat;
}.pic-unit5 {
	background:url(../images/thumbs/unit5-thumb.jpg) no-repeat;
}.pic-unit6 {
	background:url(../images/thumbs/unit6-thumb.jpg) no-repeat;
}.pic-unit7 {
	background:url(../images/thumbs/unit7-thumb.jpg) no-repeat;
}.pic-unit8 {
	background:url(../images/thumbs/unit8-thumb.jpg) no-repeat;
}.pic-unit9 {
	background:url(../images/thumbs/unit9-thumb.jpg) no-repeat;
}.pic-unit10 {
	background:url(../images/thumbs/unit10-thumb.jpg) no-repeat;
}
.pic-unit11 {
	background:url(../images/thumbs/unit11-thumb.jpg) no-repeat;
}

.time-small-1
{
	position:absolute;
	top:3px;
	left:125px;
	width:26px;
	height:27px;
	background-image: url("../images/icons/clock-small1.png")!important;
	background-repeat:no-repeat!important;

}

.time-small-2
{
	position:absolute;
	top:3px;
	left:125px;
	width:26px;
	height:27px;
	background-image: url("../images/icons/clock-small2.png")!important;
	background-repeat:no-repeat!important;
}

.time-small-3
{
	position:absolute;
	top:3px;
	left:125px;
	width:26px;
	height:27px;
	background-image: url("../images/icons/clock-small3.png")!important;
	background-repeat:no-repeat!important;

}

.time-small-4
{
	position:absolute;
	top:3px;
	left:125px;
	width:26px;
	height:27px;
	background-image: url("../images/icons/clock-small4.png")!important;
	background-repeat:no-repeat!important;

}

.time-small-5
{
	position:absolute;
	top:3px;
	left:125px;
	width:26px;
	height:27px;
	background-image: url("../images/icons/clock-small5.png")!important;
	background-repeat:no-repeat!important;

}

.time-small-6
{
	position:absolute;
	top:3px;
	left:125px;
	width:26px;
	height:27px;
	background-image: url("../images/icons/clock-small6.png")!important;
	background-repeat:no-repeat!important;
}

.time-small-7
{
	position:absolute;
	top:3px;
	left:125px;
	width:26px;
	height:27px;
	background-image: url("../images/icons/clock-small7.png")!important;
		background-repeat:no-repeat!important;

}

.time-small-8
{
	position:absolute;
	top:3px;
	left:125px;
	width:26px;
	height:27px;
	background-image: url("../images/icons/clock-small8.png")!important;
	background-repeat:no-repeat!important;
}




.pic-unit-1 {
	background:url(../images/thumbs/grey-1.jpg) no-repeat;
}.pic-unit-2 {
	background:url(../images/thumbs/grey-2.jpg) no-repeat;
}.pic-unit-3 {
	background:url(../images/thumbs/grey-3.jpg) no-repeat;
}.pic-unit-4 {
	background:url(../images/thumbs/grey-4.jpg) no-repeat;
}.pic-unit-5 {
	background:url(../images/thumbs/grey-5.jpg) no-repeat;
}.pic-unit-6 {
	background:url(../images/thumbs/grey-6.jpg) no-repeat;
}.pic-unit-7 {
	background:url(../images/thumbs/grey-7.jpg) no-repeat;
}.pic-unit-8 {
	background:url(../images/thumbs/grey-8.jpg) no-repeat;
}.pic-unit-9 {
	background:url(../images/thumbs/grey-9.jpg) no-repeat;
}.pic-unit-10 {
	background:url(../images/thumbs/grey-10.jpg) no-repeat;
}





	
	.mosaic-overlay {
		display:none;
		z-index:5;
		position:absolute;
		width:100%;
		height:100%;
		background-color: purple !important;
			/* works for IE 5+. */
		filter:alpha(opacity=90); 
	
		/* works for IE 8. */
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	
		/* works for old school versions of the Mozilla browsers like Netscape Navigator. */
		-moz-opacity:0.9; 
	
		/* This is for old versions of Safari (1.x) with KHTML rendering engine */
		-khtml-opacity: 0.9; 
	
		/* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.9; 
	}
	

		.bar2 .mosaic-overlay {
			bottom:-85px;
			height:144px;
			/*opacity:0.8;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
			filter:alpha(opacity=80);*/
		}
		
		@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
	 {
		.bar2 .mosaic-overlay {
			bottom:0px;
			height:144px;
			/*opacity:0.8;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
			filter:alpha(opacity=80);*/
		}
	 }
		
			.bar2 .mosaic-overlay:hover {
				opacity:1;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				filter:alpha(opacity=100);
			}
			
	div.mosaic-block div.paddy { padding:6px 10px;}				
	div.mosaic-block div.paddy strong{ color:#fff;}
	div.mosaic-block div.paddy span{ clear:both; display:block; font-size:16px; margin-top:10px; font-weight:normal; color:#fff;}
	div.mosaic-block a:hover {
	text-decoration:none !important;
	}
	div.mosaic-block a:hover strong, div.mosaic-block a:hover span {
	color:yellow;
	}
	
	
	
	
	.buncefield-text
	{
		position:relative;
		float:left;
		width:390px;
		height:320px;
		margin-right:20px;
	}
	
	.mosaic-overlay-index {
		display:none;
		z-index:5;
		position:absolute;
		width:100%;
		height:100%;
		background:purple;
	}
	

		.bar2 .mosaic-overlay-index {
			bottom:-105px;
			height:144px;
			/*opacity:0.8;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
			filter:alpha(opacity=80);*/
		}
		
		@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
	 {
		.bar2 .mosaic-overlay-index {
			bottom:0px;
			height:144px;
			/*opacity:0.8;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
			filter:alpha(opacity=80);*/
		}
	 }
		
			.bar2 .mosaic-overlay-index:hover {
				opacity:1;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				filter:alpha(opacity=100);
			}
			
	div.mosaic-block div.paddy {adding:10px 15px;}				
	div.mosaic-block div.paddy strong{ color:#fff;font-size:14px;p}
	div.mosaic-block div.paddy span{ clear:both; display:block; font-size:12px; margin-top:2px; line-height:14px; font-weight:normal; color:#fff;}
	div.mosaic-block a:hover {
	text-decoration:none !important;
	}
	div.mosaic-block a:hover strong, div.mosaic-block a:hover span {
	color:yellow;
	}
	
	.button-welcome
	{
		width:420px!important;
		height:91px!important;
		background:url(../images/background/button-white.png);
		font-size:17px!important;
		text-decoration:none;
		text-align:center;
		color:#333;
	}
	
	.button-welcome:hover
	{
		color:#045074;
		
	}
	
	.link
	{
		color:#800080;
		position:relative;
		float:left;
		height:30px;
		width:110px;
		margin-left:5px;
		font-size:13px!important;
		text-decoration:none!important;
		font-weight:bold;
		display:inline-block;
	}
	
	.link:hover
	{
		color:#333333;
		text-decoration:none!important;
		font-weight:bold;
	}
	
		.skype
	{
		position:relative;
		float:left;
		background:url(../images/buttons/call_button.png);
		height:58px;
		width:222px;
		margin-left:20px;
		cursor:pointer;
		margin-left:80px!important;
		margin-top:-12px;
	}
	
	.skype:hover
	{
		text-decoration:none!important;
		background:url(../images/buttons/call_button2.png);
	}
	
		.ref
	{
		position:absolute;
		background:url(../images/buttons/ref.png);
		height:58px;
		width:222px;
		margin-left:20px;
		cursor:pointer;
		top:260px;
		left:0px;
	}
	
	.ref:hover
	{
		text-decoration:none!important;
		background:url(../images/buttons/ref-hover.png);
	}
	
	
	
	
			.glossary-button
	{
		position:absolute;
		background:url(../images/buttons/glossary-button.png);
		height:58px;
		width:222px;
		cursor:pointer;
		top:260px;
		left:0px;
		margin-left:20px;

	}
	
	.glossary-button:hover
	{
		text-decoration:none!important;
		background:url(../images/buttons/glossary-button-on.png);
	}
	
	.dropbox-button
	{
		position:absolute;
		background:url(../images/buttons/drop-box.png);
		height:58px;
		width:222px;
		margin-left:20px;
		cursor:pointer;
		top:260px;
		left:0px;
	}
	
	.dropbox-button:hover
	{
		text-decoration:none!important;
		background:url(../images/buttons/dropbox-on.png);
	}
	
	.begin-button
	{
		position:relative;
		float:left;
		background:url(../images/buttons/begin.png);
		height:58px;
		width:428px;
		margin-left:20px;
		cursor:pointer;
		margin-left:198px!important;
		margin-top:-12px;
	}
	
	.begin-button:hover
	{
		text-decoration:none!important;
		background:url(../images/buttons/begin-on.png);
	}
	
	
	
	.assessment-button
	{
		position:absolute;
		background:url(../images/buttons/drop-box.png);
		height:58px;
		width:222px;
		margin-left:20px;
		cursor:pointer;
		top:260px;
		left:270px;
	}
	
	
	.assessment-button:hover
	{
		text-decoration:none!important;
		background:url(../images/buttons/dropbox-on.png);
	}
	
	
	.view-button
	{
		position:absolute;
		background:url(../images/buttons/view.png);
		height:58px;
		width:222px;
		margin-left:20px;
		cursor:pointer;
		top:220px;
		left:30px;
	}
	
	
	.view-button:hover
	{
		text-decoration:none!important;
		background:url(../images/buttons/view-on.png);
	}
	
	
	
	.texas-button
	{
		position:absolute;
		background:url(../images/buttons/case.png);
		height:58px;
		width:222px;
		margin-left:20px;
		cursor:pointer;
		top:220px;
		left:30px;
	}
	
	
	.texas-button:hover
	{
		text-decoration:none!important;
		background:url(../images/buttons/case-on.png);
	}
	
	
	
	.piper-button
	{
		position:absolute;
		background:url(../images/buttons/case.png);
		height:58px;
		width:222px;
		margin-left:20px;
		cursor:pointer;
		top:220px;
		left:270px;
	}
	
	
	.piper-button:hover
	{
		text-decoration:none!important;
		background:url(../images/buttons/case-on.png);
	}
	
	
	.take5-button
	{
	
		
		background:url(../images/buttons/5.png);
		height:58px;
		width:222px;
		margin-left:-320px;
		margin-top:-70px;
		cursor:pointer;
	}
	
	
	.take5-button:hover
	{
		text-decoration:none!important;
		background:url(../images/buttons/5-on.png);
	}
	
	.view-reading-button
	{
		position:absolute;
		background:url(../images/buttons/view.png);
		height:58px;
		width:222px;
		margin-left:20px;
		cursor:pointer;
		top:190px;
		left:70px;
	}
	
	
	.view-reading-button:hover
	{
		text-decoration:none!important;
		background:url(../images/buttons/view-on.png);
	}
	
/* styles for main menu tiles only */


.mainMenu .container_10 .grid_1 {
	width: 134px;
}

.mainMenu .container_10 .grid_2 {
	width: 156px;
}

.mainMenu .container_10 .grid_3 {
	width: 244px;
}

.mainMenu .container_10 .grid_6 {
	width:560px;
}

.mainMenu .container_10 .grid_8 {
	margin-bottom:5px;
	background-color:#800080!important;
}

.mainMenu .container_10 .grid_8:hover {
	background-color:#045074 !important;
}

.mainMenu .container_10 .grid_8:a {
	color:#fff !important;
}

.mainMenu .container_10 .grid_8:visited {
	color:#fff !important;
}

/* menu item heights */

.mainMenu .set_118 {
	height: 118px;
}


.mainMenu .set_172 {
	height: 172px;
}


.mainMenu .set_298 {
	height: 298px;
}


/*main menu styles */

.mainMenu a p {
	font-size:14px;
	line-height:18px;
	font-weight:normal;

}

.mainMenu .bottomIcons a p {
	font-size:16px;
	line-height:18px;
	font-weight:normal;
	width:80%;	
}

.mainMenu a .gettingStarted {
	background:url(../images/buttons/getting-started-bg.jpg) no-repeat;
}

/* .mainMenu a .gettingStarted:hover {
	background:url(../images/buttons/getting-started-bg-hover.jpg) no-repeat;	
	top:-2px;
} */

.mainMenu a .gettingStarted h2{
	font-size:24px !important;
	line-height:18px;
	font-weight:normal;
	color:white;
}

.mainMenu a .gettingStarted p{
	font-size:14px;
	line-height:18px;
	font-weight:normal;
	color:white;
}

.mainMenu .welcomePanel {
	background-color: purple !important;
	    /* works for IE 5+. */
    filter:alpha(opacity=90); 

    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:0.9; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 0.9; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.9; 
	color:white;
		
}

.mainMenu .welcomePanel p{
	font-size:12px;
	width:85%;;
	line-height:16px;
	font-weight:normal;
	color:white;
	margin:25px 0px 0px 0px;
}
.mainMenu .welcomePanel h1{
	color:white;
}

.welcomeTop{
	text-transform:uppercase;
	background-color:rgba(255,255,255,0.25);	
	position:relative;
	padding:3px 5px;
	line-height:18px;
	float:left;
	margin:0px 0px 5px 0px;
	clear:right;
	font-weight:bold;
	font-size:14px;
}

.holder{
	width:200px;
	height:132px;
	padding: 20px 20px 20px 20px; 
	float:right;
	
}

.holder h2:hover {
text-decoration: underline;

}

.purple-menu{
	background-color: purple !important;
	    /* works for IE 5+. */
    filter:alpha(opacity=90); 

    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:0.9; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 0.9; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.9; 
}
	
.purple-menu p{
	color:white;
}


.purple-menu:hover {
	background-color:#045074 !important;
	top:-2px;
    filter:alpha(opacity=100); 

    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:1; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 1; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 1; 		
}



.mainMenu .learning-units-header {
	background-color: purple !important;
	    /* works for IE 5+. */
    filter:alpha(opacity=90); 

    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:0.9; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 0.9; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.9; 
	color:white;
}

.mainMenu .study-skills-header {
	background-color: purple !important;
	    /* works for IE 5+. */
    filter:alpha(opacity=90); 

    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:0.9; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 0.9; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.9; 
	color:white;
}

.mainMenu .learning-units-header h1{
	color:white;
	width:126px;
	margin-right:0px;
}

.mainMenu .unit-header h1{
	color:white;
	width:220px;
	margin-right:0px;
}

.mainMenu .study-skills-header h1{
	color:white;
	width:210px;
	margin-right:0px;
}

.mainMenu .learning-units-header p{
	color:white;
	width:270px;
	float:left;

}

.mainMenu .study-skills-header p{
	color:white;
	width:210px;
	float:left;

}

.mainMenu .method-of-assessment-double {
	background-color:#045074;
}

.mainMenu .method-of-assessment-double:hover {
	background-color:purple;
	top:-2px;
}

.mainMenu .method-of-assessment-double img{
	float:left;
}

.mainMenu .method-of-assessment-double h1{
	color:white;	
	float:left;
	margin:0px 0px 0px 0px;
	width:130px;
	font-size:18px !important;
	line-height:22px !important;
	font-weight:normal;
	position:relative;
	top:-2px;
}

.mainMenu .method-of-assessment-double p{
	color:white;
	float:left;
	font-size:12px !important;	
}

.opaque-purple {
	background-color: purple !important;
	    /* works for IE 5+. */
    filter:alpha(opacity=90); 

    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:0.9; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 0.9; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.9; 
}

.opaque-purple h1{
	color:white !important;
}

.opaque-purple h2{
	color:white !important;
	float:left;
}

.opaque-purple p{
	color:white !important;
	font-size:14px;
	line-height:18px !important;
}

.learning-outcomes-large {
	float:left;
	
}

.learning-outcomes-large img{
	float:left;
	padding:0px 5px 0 0;
}

.learning-outcomes-large h2{
	float:left;
	padding:10px;
	background:#960;
	width:12px;
	height:12px;
	margin:0px 10px 120px 0px;
	text-align:center;
	background:white;
	color:purple !important;
	font-weight:bold;
	line-height:12px;

}

.learning-outcomes-large h2-long{
	float:left;
	padding:10px;
	background:#960;
	width:12px;
	height:12px;
	margin:0px 10px 220px 0px;
	text-align:center;
	background:white;
	color:purple !important;
	font-weight:bold;
	line-height:12px;

}

.learning-outcomes-large .third{
	width:30%;
	float:left;
	margin:10px 20px 0px 0px;
}


.learning-outcomes-large .third p{
	font-size: 13px;
}

.bodgeBox {width:144px !important;}

   


        ul.shelf-visual {
			display: table;
            table-layout: auto;
            height: 80px;
            width: 640px;
			margin: 0 0 20px 30px;
			background: url(../images/background/shelf-top.png) no-repeat bottom center;
            padding: 0 25px 20px 35px;
        }
		
		ul.shelf-visual li {
			display: table-cell;
            text-align: center;
		}
		
		
		
        .shelf-visual img {
			vertical-align: bottom;
			background: #ebebeb;
			height: 100px;
			width: 80px;
			color: #fff;
			border-left: 2px solid #666;
			border-bottom: 1px solid grey;

			
        }
		
        .shelf {
            width: 680px;
            height: 40px;
			
        }
        .shelf li {
            height: 40px;
            line-height: 40px;
			
        }
		
		
		
ul.contact_details {
float: left;
margin: 0 0 0 10px;
width: 256px;
}
ul.contact_details li {
    padding: 6px 0;
}
ul.contact_details li.contact_last {
    border-bottom-style: none;
}
ul.contact_details span {
    display: block;
    float: left;
    font-size: 0.8em;
    line-height: 150%;
}
span.contact_type {
    font-weight: bold;
    margin: 0 10px 0 0;
    text-align: right;
    width: 80px;
}

	
	
	
	
	
.table-bordered {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-collapse: separate;
    border-color: #DDDDDD #DDDDDD #DDDDDD;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px 0;
}
.table {
    margin-bottom: 20px;
    width: 100%;
}
table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
}
	
	

.table-bordered caption + thead tr:first-child th, .table-bordered caption + tbody tr:first-child th, .table-bordered caption + tbody tr:first-child td, .table-bordered colgroup + thead tr:first-child th, .table-bordered colgroup + tbody tr:first-child th, .table-bordered colgroup + tbody tr:first-child td, .table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td {
    border-top: 0 none;
}
.table caption + thead tr:first-child th, .table caption + thead tr:first-child td, .table colgroup + thead tr:first-child th, .table colgroup + thead tr:first-child td, .table thead:first-child tr:first-child th, .table thead:first-child tr:first-child td {
    border-top: 0 none;
}
.table thead th {
    vertical-align: bottom;
}
.table-bordered th, .table-bordered td {
    border-left: 1px solid #DDDDDD;
}
.table-condensed th, .table-condensed td {
    padding: 5px 5px;
}
.table th {
    font-weight: bold;
}
.table th, .table td {
    border-top: 1px solid #DDDDDD;
    line-height: 20px;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}
	
.row-fluid .span6 {
    width: 48.7179%;
}
.row-fluid [class*="span"] {
    -moz-box-sizing: border-box;
    display: block;
    float: left;
    margin-left: 2.5641%;
    min-height: 30px;
    width: 100%;
}
.row-fluid .span6 {
    width: 48.9362%;
}
.row-fluid [class*="span"] {
    -moz-box-sizing: border-box;
    display: block;
    float: left;
    margin-left: 2.12766%;
    min-height: 30px;
    width: 100%;
}
.span6 {
    width: 620px;
	font-size: 13px;
}

.span7 {
    width: 445px;
	font-size: 13px;
}



.span6 p a{
text-decoration: none !important;
color: purple;
font-weight: bold;
}

.span6 p a:hover{
text-decoration: underline !important;

}


.resourcetable {
    width: 720px;
	font-size: 13px;
}



.paddingleft {
	padding: 0 0 0 10px;
	}


.table-striped tbody > tr:nth-child(2n+1) > td, .table-striped tbody > tr:nth-child(2n+1) > th {
    background-color: #F9F9F9;
}
.table-bordered th, .table-bordered td {
    border-left: 1px solid #DDDDDD;
}
.table-condensed th, .table-condensed td {
    padding: 4px 5px;
}
.table th, .table td {
    border-top: 1px solid #DDDDDD;
    line-height: 20px;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}


.greybox{background:#fafafa; padding:10px;}


.margin-none {
margin: 0 !important;
}
address {
display: block;
margin-bottom: 0px;
line-height: 20px;
  font-size: 12px;
}

address a{
color: purple;	
	}
	
address a:hover{
color: purple;
text-decoration: underline !important;	
	}	

abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #999999;
}
abbr.initialism {
  font-size: 12px;
  text-transform: uppercase;
}

.separator {
padding: 10px 0;
display: block;
}

.skypebox {
	padding: 10px 10px 10px 0;
	margin: 0 0 50px 0;
}

.skypefloat{
	float: left;
	}
	


.pic-unit1-a {
	background:url(../images/thumbs/unit1-thumb-a.png) no-repeat;
	background-color:purple;
}.pic-unit2-a {
	background:url(../images/thumbs/unit2-thumb-a.png) no-repeat;
	background-color:purple;

}.pic-unit3-a {
	background:url(../images/thumbs/unit3-thumb-a.png) no-repeat;
	background-color:purple;

}.pic-unit4-a {
	background:url(../images/thumbs/unit4-thumb-a.png) no-repeat;
	background-color:purple;

}.pic-unit5-a {
	background:url(../images/thumbs/unit5-thumb-a.png) no-repeat;
	background-color:purple;

}.pic-unit6-a {
	background:url(../images/thumbs/unit6-thumb-a.png) no-repeat;
	background-color:purple;

}.pic-unit7-a {
	background:url(../images/thumbs/unit7-thumb-a.png) no-repeat;
	background-color:purple;

}.pic-unit8-a {
	background:url(../images/thumbs/unit8-thumb-a.png) no-repeat;
	background-color:purple;

}.pic-unit9-a {
	background:url(../images/thumbs/unit9-thumb-a.png) no-repeat;
	background-color:purple;

}.pic-unit10-a {
	background:url(../images/thumbs/unit10-thumb-a.png) no-repeat;
	background-color:purple;
}
.pic-unit11-a {
	background:url(../images/thumbs/unit11-thumb-a.png) no-repeat;
	background-color:purple;
}

.pic-resources {
	background:url(../images/thumbs/unit-resources.png) no-repeat;
	background-color:purple;
}


.startscreen {
    background: none repeat scroll 0 0 purple;
}

.startscreen .paddy {
    padding: 50px 100px 0 50px;
}

p.firstpagenumber {
    background-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    float: left;
    font-size: 42px !important;
    font-weight: bold;
    margin: 0 10px 45px 0 !important;
    padding: 25px 30px !important;
}
.startscreen p {
    text-align: left;
}

.startscreen h1 {
    color: #FFFFFF;
    font-size: 32px !important;
    width: 430px;
}

p {
    color: #000000;
    font-size: 13px;
    line-height: 110%;
    margin-bottom: 15px;
    padding: 0;
    text-align: left;
}

h1 {
    font-size: 21px !important;
    line-height: 110% !important;
    margin-bottom: 20px;
}

.time-small-6b {
    background-image: url("../images/icons/clock-small6.png") !important;
    background-repeat: no-repeat !important;
    float: left;
    height: 27px;
    margin-right: 7px;
    margin-top: -7px;
    position: relative;
    width: 26px;
}

h3 {
    font-size: 16px !important;
    font-weight: bold;
	color:#fff;
}

.unit-title-block-large
{
	position:absolute;
	top:200px;
	left:4px;
	z-index:9;
	width:65px;
	padding-left:15px;
	padding-right:15px;
	padding-top:5px;
	padding-bottom:5px;
	height:30px;
	text-align:left;
	vertical-align:middle;
	color:#FFF;
	font-size:20px;
	background-color:purple;
	line-height:25px;
	margin-left:10px;
	font-weight:bold;
	
}

.unit-title-block-small
{
	position:absolute;
	top:245px;
	left:4px;
	z-index:9;
	width:250px;
	padding-left:15px;
	padding-right:15px;
	padding-top:5px;
	padding-bottom:5px;
	height:30px;
	text-align:left;
	vertical-align:middle;
	color:#FFF;
	font-size:14px;
	background-color:purple;
	line-height:25px;
	margin-left:10px;
	font-weight:bold;
	
}

.assets-button
{
	color:#FFF;
}

.assets-button:hover
{
	color:#0F3!important;
}