/*  _______________________________________

	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: """"
}


blockquote.style2 {
  font-size: 19px !important;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  padding: 15px;
  border-left: 3px solid purple;
  background: #ebebeb;
  color: purple;
  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; 	

} 

blockquote.style2 p{
	color: #000000;
} 
/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
/*  _______________________________________

	02 GRID
    _______________________________________  */

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

.container {
	width: 910px;
	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_320, .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_320 {
	width: 340px
}


.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: 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: 70px;
}

.set_65 {
	height: 65px;
}

.set_90 {
	height: 90px;
}

.set_112 {
	height: 112px;
}

.set_107 {
	height: 107px;
}

.set_342 {
	height: 372px;
}

.set_80 {
	height: 95px;
}

.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_183 {
height: 183px;
}

.set_200 {
height: 200px;
}

.set_20 {
height: 60px;
}

.set_50 {
height: 110px;
}

.set_400 {
height: 340px;
}

.set_220 {
height: 220px;
}

.set_233 {
height: 233px;
}

.set_350 {
height: 350px;
}


.unit1intro {background:url(../images/background/unit1-intro2.jpg) no-repeat;}
.unit2intro {background:url(../images/background/unit2-intro2.jpg) no-repeat;}
.unit3intro {background:url(../images/background/unit3-intro2.jpg) no-repeat;}
.unit4intro {background:url(../images/background/unit4-intro2.jpg) no-repeat;}
.unit5intro {background:url(../images/background/unit5-intro2.jpg) no-repeat;}
.unit6intro {background:url(../images/background/unit6-intro2.jpg) no-repeat;}
.unit7intro {background:url(../images/background/unit7-intro2.jpg) no-repeat;}
.unit8intro {background:url(../images/background/unit8-intro2.jpg) no-repeat;}
.unit9intro {background:url(../images/background/unit9-intro2.jpg) no-repeat;}
.unit10intro {background:url(../images/background/unit10-intro2.jpg) no-repeat;}
.unit11intro {background:url(../images/background/unit11-intro2.jpg) no-repeat;}
.studyskillsintro {background:url(../images/background/studyskills-intro4.jpg) no-repeat;}


.bottom_margin {
	margin-bottom: 6px;
}
.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
----------------------------------------------------------------------------------------------------*/


.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: yellow !important;
	font-style: italic !important;
}
.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: 15px !important;
	line-height: 110% !important;
}
.imageFR {
	float: right;
	margin: 10px 0 10px 10px;
}

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


.unitintro {margin-top: 55px;}



.startscreen p {text-align:left;}
.startscreen .paddy {padding:50px 100px 0 50px;}
.startscreen h1 {font-size:32px !important; color: #fff; width: 430px; }
.startscreen p strong {font-size:15px;}
.startscreen p strong  {color:#fff;}
.startscreen {background: purple;
}

.tip-clicknext {
    right: 5px;
    position: absolute;
    top: 220px;
}

.tip-clicknext-study {
    right: 120px;
    position: absolute;
    top: 250px;
}

.tip-continue {
    right: -20px;
    position: absolute;
    top: 240px;
}

.tip-video {
    right: 5px;
    position: absolute;
    top: 160px;
}

.tip-video2 {
    right: 105px;
    position: absolute;
    bottom: 10px;
}

.tip-worksheet {
    right: 15px;
    position: absolute;
    top: 220px;
}


.tip-jumppage {
    right: 220px;
    position: absolute;
    top: -40px;
	z-index: 9999;
}


.tip-download {
    right: 0px;
    position: absolute;
    top: -20px;
	z-index: 999;
}


.tip-tab {
    right: 180px;
    position: absolute;
    top: 10px;
	z-index: 999;
}


.tip-reveal {
    right: 180px;
    position: absolute;
    top: 10px;
	z-index: 999;
}



.tip-resources {
    right: 85px;
    position: absolute;
    top: -20px;
	z-index: 999;
}

.tip-both {
    right: 30px;
    position: absolute;
    top: -20px;
	z-index: 999;
}


.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: 300px;
}

.scroll-short {
	height: 400px!important;
}

.jspContainer {
	overflow: hidden!important;
	position: relative!important;
}

.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 */
.unit2dragdropbackground {background: url("../images/background/unit02dragdrop1.jpg") no-repeat;}
.unit3dragdropbackground1 {background: url("../images/background/unit03dragdrop1.jpg") no-repeat;}
.unit3dragdropbackground2 {background: url("../images/background/unit03dragdrop2.jpg") no-repeat;}
.unit3dragdropbackground3 {background: url("../images/background/unit03dragdrop3.jpg") 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;}



.tipmessage {background: url("../images/diagrams/tip-message.png") 380px 0 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 */






.pageheader {
    background: purple;
	opacity: 0.9;
    height: 40px;
    margin: 0px 0 5px 4px;
    padding: 15px 15px 15px 13px;
    position: relative;
	float: left;
	width: 630px;

}
.pageheader span {
    left: 65px;
    position: absolute;
}

p.title {
    font-size: 10.5px !important;
	color: #fff;
	text-align: center;
	line-height: 10.5px;
}

.pageheader h1 {
	font-size: 21px !important;
	line-height: 28px !important;
	margin: 0 0 5px 10px;
}

.pageheader h2 {
	font-size: 12px !important;
	margin: 3px 0 0px 10px;
    text-transform: uppercase;
	
}

.pageheader-btn {
    background: #045074;
    float: right;
    height: 70px;
    margin: 0px 3px 5px 4px;
    position: relative;
	width: 70px;
	display:block;
	text-align:center;
}

.pageheader-btn hover {
    background:#fff;

}

.pageheader-btn img {
	position:relative;
	top:15px;	
}


.pageheader-btn img {
	position:relative;
	top:15px;	
}



p.pagenumber { background-color: rgba(255, 255, 255, 0.25); color:#fff; padding:12px 10px 10px 10px !important; margin:-2px 10px 10px 0px !important; font-size: 14px; font-weight:bold; float:left; height: 20px;}

.activityheader {
    background: #ffcc33 url(../images/background/activitypageheader.png);
	opacity: 0.9;
    height: 40px;
    margin: 0px 0 5px 4px;
    padding: 15px 15px 15px 13px;
    position: relative;
	float: left;
	width: 630px;

}
.activityheader span {
    left: 65px;
    position: absolute;
}

p.activitytitle {
    font-size: 10.5px !important;

	text-align: center;
	line-height: 10.5px;
}

.activityheader h1 {
	font-size: 21px !important;
	line-height: 28px !important;
	margin-bottom: 5px;
	color: #000  !important;
}

.activityheader h2 {
	font-size: 12px !important;
	margin: 3px 0 0px 0;
    text-transform: uppercase;
	font-weight: bold;
	color: #000  !important;
}

.activityheader-btn {
    background: #045074;
    float: right;
    height: 70px;
    margin: 0px 3px 5px 4px;
    position: relative;
	width: 70px;
	display:block;
	text-align:center;
}

.activityheader-btn hover {
    background:#fff;

}

.activityheader-btn img {
	position:relative;
	top:15px;	
}


.activityheader-btn img {
	position:relative;
	top:15px;	
}



p.activitynumber { background-color: rgba(255, 255, 255, 0.25); color: #000  !important; padding:12px 10px 10px 10px !important; margin:-2px 10px 10px 0px !important; font-size: 14px; font-weight:bold; float:left; height: 20px;}



.activitypageheader {
    height: 40px;
    margin: 0px 0 5px 4px;
    padding: 0px 0px 5px 0px;
    position: relative;
	float: left;
	width: 100%;

}
.activitypageheader span {
    left: 45px;
    position: absolute;
}



.activitypageheader h1 {
	font-size: 21px !important;
	line-height: 28px !important;
	margin: 5px 0 0 5px;
	color: #fff  !important;
}


p.activitypagenumber { background: #f7da47; color: #000 !important; padding:12px 10px 10px 10px !important;  text-align: center; font-size: 18px; font-weight:bold; float:left; height: 20px; width: 20px;}



.firstpage {
	opacity: 0.9;
    height: 40px;
    margin: 0px 0 5px 0px;
    padding: 5px 5px 5px 5px;
    position: relative;
	float: left;
	

}

.firstpage h1 {
    font-size: 26px !important;
	line-height: 35px;
	margin: 0 0 15px 0;
 
}

.firstpage span {
    left: 105px;
    position: absolute;
	width: 260px;
}

.firstpage span.intro {
    left: 75px;
	top: 55px;
    position: absolute;
	background-color:purple;
	width: 260px;
	padding:20px;
}

.firstpage span.intro-unit-5-1 {
    left: 75px;
	top: 55px;
    position: absolute;
	background-color:purple;
	width: 340px;
	padding:20px;
}

.firstpage span.intro-studyskills {
    left: 75px;
	top: 55px;
    position: absolute;
	background-color:purple;
	width: 260px;
	padding:20px;
	line-height:22px;
}

.firstpage span.intro-studyskills p {
  
	line-height:18px;
}




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

p.firstpagenumbersmall { background-color: rgba(255, 255, 255, 0.25); color:#fff; padding:25px 20px 25px 25px !important; margin:0px 38px 35px 0px  !important; font-size: 39px; font-weight:bold; float:left; }



 
.firstpagebtn a {
    background-color: rgba(255, 255, 255, 0.25);
    float: left;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    margin: 0 0 5px;
    padding: 7px 10px;
    position: relative;
    text-transform: uppercase;
	color: #fff;
}

.firstpagebtn a:hover {
    background-color: #045074;
	text-decoration: none;
}


.standardpagebtn a {
    background-color: rgba(255, 255, 255, 0.25);
    float: left;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    margin: 0 0 5px;
    padding: 7px 10px;
    position: relative;
	color: #fff;
	display: inline-block;
	width: 92%;
}

.standardpagebtn a:hover {
    background-color: purple;
	text-decoration: none;
}

.alternativepagebtn a {

	background-color: purple;
    float: left;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    margin: 0 0 5px;
    padding: 7px 10px;
    position: relative;
    text-transform: uppercase;
	color: #fff;
}

.alternativepagebtn a:hover {
    background-color: #006C98;
	text-decoration: none;
}




/*  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;
}




/*style the main menu*/ 

.myMenu {
	margin: 0;
	padding: 0;
	float:right;
	position:relative;
	top:17px;
	right:0px;
	
}
.myMenu li {
	list-style: none;
	float: right;
	width:240px;
	font-size:13px;


}
.myMenu li a:link, .myMenu li a:visited {
	display: block;
	text-decoration: none;
	padding: 0.5em;
	margin: 0;
	color: #fff;
	border-bottom:1px solid #ccc;
}
.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;
}

/*  _______________________________________

	07 TYPOGRAPHY
    _______________________________________  */



@font-face {
	font-family: 'DeliciousRoman';
	src: url('delicious-roman-webfont.eot');
	src: url('delicious-roman-webfont.eot?#iefix') format('embedded-opentype'),  url('delicious-roman-webfont.woff') format('woff'),  url('delicious-roman-webfont.ttf') format('truetype'),  url('delicious-roman-webfont.svg#DeliciousRoman') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'DeliciousItalic';
	src: url('delicious-italic-webfont.eot');
	src: url('delicious-italic-webfont.eot?#iefix') format('embedded-opentype'),  url('delicious-italic-webfont.woff') format('woff'),  url('delicious-italic-webfont.ttf') format('truetype'),  url('delicious-italic-webfont.svg#DeliciousItalic') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'DeliciousBold';
	src: url('delicious-bold-webfont.eot');
	src: url('delicious-bold-webfont.eot?#iefix') format('embedded-opentype'),  url('delicious-bold-webfont.woff') format('woff'),  url('delicious-bold-webfont.ttf') format('truetype'),  url('delicious-bold-webfont.svg#DeliciousBold') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'DeliciousBoldItalic';
	src: url('delicious-bolditalic-webfont.eot');
	src: url('delicious-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),  url('delicious-bolditalic-webfont.woff') format('woff'),  url('delicious-bolditalic-webfont.ttf') format('truetype'),  url('delicious-bolditalic-webfont.svg#DeliciousBoldItalic') format('svg');
	font-weight: normal;
	font-style: normal;
}


p {
	margin-bottom: 15px;
	padding: 0;
	color: #000;
	font-size: 13px;
	line-height: 110%;
	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: "Lucida Sans Unicode", "Lucida Grande", sans-serif, Helvetica;
}
a {
	color: purple;
	text-decoration: none;
	font-weight: bold;

}


.cursor {cursor: help;}
.cursor-study {
cursor: help; 
}




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

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





.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;
}






.activityscreen p {
    text-align: left;
}
.activityscreen .paddy {
    padding: 70px 100px 0 120px;
}
.activityscreen h1 {
    color: #000000;
    font-size: 34px !important;
}
.activityscreen p strong {

}
.activityscreen p strong span {
    color: #000000;
}
.activityscreen p a {
    color: yellow;
    font-weight: normal;
}
.activityscreen {
    background: url("../images/background/activity.png") no-repeat scroll right center transparent;
}





/*  _______________________________________

	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;
}




/*  _______________________________________

	08 TABS
    _______________________________________  */


.etabs { margin: 0; padding: 0; }
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #bbb; border-bottom: none; -moz-border-radius: 0 0 0; -webkit-border-radius: 0 0; }
.tab a { font-size: 15px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab a:hover { text-decoration: underline; }
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #bbb; }
.tab a.active { font-weight: bold; }
.tab-container .panel-container { background: #fff; border: solid #bbb 1px; padding: 10px; -moz-border-radius: 0 ; -webkit-border-radius: 0 0; }
.tab a img {margin: 0 5px 0 0;}

.etabs3-1 { margin: 0; padding: 0; margin-top:-10px!important; }
.tab-3-1 { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #bbb; border-bottom: none; -moz-border-radius: 0 0 0; -webkit-border-radius: 0 0; }
.tab-3-1 a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab-3-1 a:hover { text-decoration: underline; }
.tab-3-1.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #bbb; }
.tab-3-1 a.active { font-weight: bold; }
.tab-container .panel-container { background: #fff; border: solid #bbb 1px; padding: 10px; -moz-border-radius: 0 ; -webkit-border-radius: 0 0; }
.tab-3-1 a img {margin: 0 5px 0 0;}
.tab-container2 .panel-container2 { width: 450px; background: #fff; border: solid #bbb 1px; padding: 10px; -moz-border-radius: 0 ; -webkit-border-radius: 0 0; }


/*ul {
	margin: 0 0 0 0px;
	}

ul.tabs {
    float: left;
    height: 41px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}
ul.tabs li {
    float: left;
    overflow: hidden;
    padding: 0;
    position: relative;
}
ul.tabs li  {
    background-color: #009DE0;
    border-color: #CCCCCC #CCCCCC #FFFFFF;
    border-style: solid;
    border-width: thin;
    color: #FFFFFF;
    display: block;
    font-size: 16px;
    font-weight: normal;
    height: 35px;
    outline: medium none;
    text-decoration: underline;
	width:49%;
}
ul.tabs li:hover {
    border-color: #CCCCCC #CCCCCC #FFFFFF;
    border-style: solid;
    border-width: thin;
    color: #FFFFFF;
    text-decoration: none;
}
ul.tabs li,  ul.tabs li.current,  ul.tabs li.selected ,  ul.tabs li.selected:hover {
    background-color: #FFFFFF;
    border-bottom: thin solid #FFFFFF;
    border-left: thin solid #CCCCCC;
    border-right: thin solid #CCCCCC;
    color: #333333;
    cursor: default;
    font-weight: bold;
    text-decoration: none;
}
.tab_content {
    padding: 0;
}
.tab_container {
    background-color: #FFFFFF;
    border-color: #CCCCCC;
    border-left: thin solid #CCCCCC;
    border-right: thin solid #CCCCCC;
	border-top: thin solid #fff;
    border-style: solid;
    border-width: thin;
    clear: both;
    float: left;
    margin: 0;
    overflow: hidden;
    padding: 10px;
    width: 431px;
}*/
.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  {
color: #000;
	height: 150px;
	margin: 0 20px 0px 20px;
	padding: 0px 0 0 0;

}






ul.tabs  {
height:auto !important;	
}

.tab_container { margin-top:0 !important;}

ul.tabs li {	
	float: left;
	padding: 0;
	margin: 0px;
	position: relative;
	height: 80px !important; 
	text-align:center;

	background:#eee;
	padding:10px 0 5px 0;
}

ul.largetab li {
	width: 203px;
	margin-right:14px;
	}

ul.mediumtab li {
	width: 155px;
	margin-right:16px;
	}

ul.smalltab li {
	width: 110px;
	margin-right:18px;
	}

ul.verysmalltab li {
	width: 112px;
	margin-right:12px;
	}	
	

	

ul.tabs li {cursor:pointer;}

ul.tabs li div {
	background: url("../images/buttons/unit1tabs.png") no-repeat;
	height: 55px;
	width: 70px;
	margin:0 auto;
}

ul.tabs li a.tabdefault div {background-position:0 0;}
ul.tabs li a.tabdefault2 div {background-position:-85px 0;}
ul.tabs li a.tabdefault3 div {background-position: -170px 0;}
ul.tabs li a.tabdefault4 div {background-position:-255px 0;}
ul.tabs li a.tabdefault5 div {background-position: -340px 0;}
ul.tabs li a.tabdefault6 div {background-position:-420px 0;}
ul.tabs li a.tabdefault7 div {background-position:-495px 0;}
ul.tabs li a.tabdefault8 div {background-position:-570px 0;}
ul.tabs li a.tabdefault9 div {background-position:-650px 0;}
ul.tabs li a.tabdefault10 div {background-position:-730px 0;}
ul.tabs li a.tabdefault11 div {background-position:-805px 0;}
ul.tabs li a.tabdefault12 div {background-position:-890px 0;}
ul.tabs li a.tabdefault13 div {background-position: -975px 0;}
ul.tabs li a.tabdefault14 div {background-position:-1055px 0;}
ul.tabs li a.tabdefault15 div {background-position:-1140px 0;}
ul.tabs li a.tabdefault16 div {background-position: -1225px 0;}
ul.tabs li a.tabdefault17 div {background-position:-1300px 0;}
ul.tabs li a.tabdefault18 div {background-position:-1370px 0;}


ul.tabs li a.tabdefault:hover div, ul.tabs li.current a.tabdefault div {background-position: 0 -60px; color:#333;}
ul.tabs li a.tabdefault2:hover div, ul.tabs li.current a.tabdefault2 div {background-position: -85px -60px;}
ul.tabs li a.tabdefault3:hover div, ul.tabs li.current a.tabdefault3 div {background-position: -170px -60px;}
ul.tabs li a.tabdefault4:hover div, ul.tabs li.current a.tabdefault4 div {background-position: -255px -60px;}
ul.tabs li a.tabdefault5:hover div, ul.tabs li.current a.tabdefault5 div {background-position: -340px -60px;}
ul.tabs li a.tabdefault6:hover div, ul.tabs li.current a.tabdefault6 div {background-position: -420px -60px;}
ul.tabs li a.tabdefault7:hover div, ul.tabs li.current a.tabdefault7 div {background-position: -495px -60px;}
ul.tabs li a.tabdefault8:hover div, ul.tabs li.current a.tabdefault8 div {background-position: -570px -60px;}
ul.tabs li a.tabdefault9:hover div, ul.tabs li.current a.tabdefault9 div {background-position: -650px -60px;}
ul.tabs li a.tabdefault10:hover div, ul.tabs li.current a.tabdefault10 div {background-position: -730px -60px;}
ul.tabs li a.tabdefault11:hover div, ul.tabs li.current a.tabdefault11 div {background-position: -805px -60px;}
ul.tabs li a.tabdefault12:hover div, ul.tabs li.current a.tabdefault12 div {background-position: -890px -60px;}
ul.tabs li a.tabdefault13:hover div, ul.tabs li.current a.tabdefault13 div {background-position: -975px -60px;}
ul.tabs li a.tabdefault14:hover div, ul.tabs li.current a.tabdefault14 div {background-position: -1055px -60px;}
ul.tabs li a.tabdefault15:hover div, ul.tabs li.current a.tabdefault15 div {background-position: -1140px -60px;}
ul.tabs li a.tabdefault16:hover div, ul.tabs li.current a.tabdefault16 div {background-position: -1225px -60px;}
ul.tabs li a.tabdefault17:hover div, ul.tabs li.current a.tabdefault17 div {background-position: -1300px -60px;}
ul.tabs li a.tabdefault18:hover div, ul.tabs li.current a.tabdefault18 div {background-position: -1370px -60px;}

ul.tabs li.current a { color:orange !important;}
ul.tabs li a:hover {color:#333;}






.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: "Lucida Sans Unicode", "Lucida Grande", sans-serif, Helvetica;
	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: "Lucida Sans Unicode", "Lucida Grande", sans-serif, Helvetica;
	height: 75px;
	overflow: auto
}
.button {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif, Helvetica;
	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:13px;
}

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


.footlogos {
	float: right;
	position: relative;
	right:8px;
	}


.smallLogo {

	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;
}

/*  _______________________________________

	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, h2, h3, h4, h5, h6 {

	padding: 0;
	color: #fff;
}


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

}

h2 {
	font-size: 12px !important;
	margin: 3px 0 0px 0;
    text-transform: uppercase;
}


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




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

.purple {
	background-color: purple !important;
}

/*  WELCOME PAGE */

.welcome
{
background-image:url("../images/background/begin.jpg");

}

img.center {   display: block;  margin-top: 60px;  margin-left: auto;   margin-right: auto; margin-bottom: 30px; }

.welcome p
{
	text-align: center;

	color:#FFF!important;
}

.welcomebtn a {
    text-align: center ; 
	background-color: rgba(255, 255, 255, 0.25);
    float: left;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    width: 700px ;
 	margin: 20px 0 0 25px;
    padding: 7px 5px;
    position: relative;
    text-transform: uppercase;
	color: #fff;
}

.welcomebtn a:hover {
    background-color: #045074;
	text-decoration: none;
}


.purple p, .purple h1, .purple h2 {
	color: #fff !important;
}
.white {
	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 a, {
	font-color: #fff !important;
}

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

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

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

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

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

.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.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:#fff; font-weight:normal; font-size:17px; line-height:22px;}
.mainMenu p a:hover {color:yellow;}


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.9;
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 {
 
  width: 400px;
position:relative;
height:363px;}

#cardSlots, #cardSlots1,  #cardSlots2 {
  margin:30px 30px 0 0;
float:right;
	width:276px;
  height:323px;
}

/* Individual cards and slots */

#cardSlots div, #cardSlots1 div,  #cardSlots2 div  {
  float: left;
  width: 276px;
  height: 95px;
  padding: 0;

  text-align: center;
  padding-bottom: 0;
/*  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;*/
  margin: 0 0 10px 0;

/* background: #fff;
*/
}

 #cardPile div,  #cardPile1 div,  #cardPile2 div {
  float: left;
  width: 111px;
  height: 152px;
  padding: 0;
  
  text-align: center;
  padding-bottom: 0;
/*  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;*/
  margin: 0 0 0 10px;
position:absolute;
top:150px;

/* background: #fff;
*/
}



	/* CARDS */

.front1 {background:url(../images/background/prevent.png) transparent; left:70px;}
.front2 {background:url(../images/background/control.png) transparent;  left:190px;}
.front3 {background:url(../images/background/mitigate.png) transparent;  left:320px;}

.u2activity .front1 {background:url(../images/background/thehazard.png) transparent; left:70px;}
.u2activity .front2 {background:url(../images/background/theconsequence.png) transparent;  left:190px;}
.u2activity .front3 {background:url(../images/background/thefrequency.png) transparent;  left:320px;}

.activity1 .back1 {background:url(../images/background/activity1-back1.png) transparent;   text-indent:-9999px;}
.activity1 .back2 {background:url(../images/background/activity1-back2.png) transparent;   text-indent:-9999px;}
.activity1 .back3 {background:url(../images/background/activity1-back3.png) transparent;   text-indent:-9999px;}

.activity2 .back1 {background:url(../images/background/activity2-back1.png) transparent;   text-indent:-9999px;}
.activity2 .back2 {background:url(../images/background/activity2-back2.png) transparent;   text-indent:-9999px;}
.activity2 .back3 {background:url(../images/background/activity2-back3.png) transparent;   text-indent:-9999px;}

.activity3 .back1 {background:url(../images/background/activity3-back1.png) transparent;   text-indent:-9999px;}
.activity3 .back2 {background:url(../images/background/activity3-back2.png) transparent;   text-indent:-9999px;}
.activity3 .back3 {background:url(../images/background/activity3-back3.png) transparent;   text-indent:-9999px;}

.u2activity1 .back1 {background:url(../images/background/u2-activity1-back1.png) transparent;   text-indent:-9999px;}
.u2activity1 .back2 {background:url(../images/background/u2-activity1-back2.png) transparent;   text-indent:-9999px;}
.u2activity1 .back3 {background:url(../images/background/u2-activity1-back3.png) transparent;   text-indent:-9999px;}

.u2activity1 .ui-droppable-disabled.back1 {background:url(../images/background/u2-activity1-back1correct.png) transparent !important; opacity: 1 !important; }
.u2activity1 .ui-droppable-disabled.back2 {background:url(../images/background/u2-activity1-back2correct.png) transparent !important; opacity: 1 !important; }
.u2activity1 .ui-droppable-disabled.back3 {background:url(../images/background/u2-activity1-back3correct.png) transparent !important; opacity: 1 !important; }
	
.activity1 .ui-droppable-disabled.back1 {background:url(../images/background/activity1-back1correct.png) transparent !important; opacity: 1 !important; }
.activity1 .ui-droppable-disabled.back2 {background:url(../images/background/activity1-back2correct.png) transparent !important; opacity: 1 !important; }
.activity1 .ui-droppable-disabled.back3 {background:url(../images/background/activity1-back3correct.png) transparent !important; opacity: 1 !important; }

.activity2 .ui-droppable-disabled.back1 {background:url(../images/background/activity2-back1correct.png) transparent !important; opacity: 1 !important; }
.activity2 .ui-droppable-disabled.back2 {background:url(../images/background/activity2-back2correct.png) transparent !important; opacity: 1 !important; }
.activity2 .ui-droppable-disabled.back3 {background:url(../images/background/activity2-back3correct.png) transparent !important; opacity: 1 !important; }

.activity3 .ui-droppable-disabled.back1 {background:url(../images/background/activity3-back1correct.png) transparent !important; opacity: 1 !important; }
.activity3 .ui-droppable-disabled.back2 {background:url(../images/background/activity3-back2correct.png) transparent !important; opacity: 1 !important; }
.activity3 .ui-droppable-disabled.back3 {background:url(../images/background/activity3-back3correct.png) transparent !important; opacity: 1 !important; }


#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;
}



#cardPile div, #cardPile1 div, #cardPile2 div {
  text-indent:-999999px;
}

#cardSlots div, #cardSlots1 div, #cardSlots2 div {
  text-indent:-999999px;
}

#cardPile div:hover, #cardPile1 div:hover, #cardPile2 div:hover {
	cursor:pointer;
}

#cardPile div.ui-draggable-dragging, #cardPile1 div.ui-draggable-dragging, #cardPile2 div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .9em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .9em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .9em rgba(0, 0, 0, .8);
}
 

/* Individually coloured cards */

#card1.correct { background: red; }
#card2.correct { background: brown; }
#card3.correct { background: orange; }
#card4.correct { background: yellow; }
#card5.correct { background:none;/*background: purple; 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;
  top:150px;
  left:80px;
  padding:20px;
  z-index: 100;
  font-size: 15px;
  background: #ebebeb;
  width: 300px;
  border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

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

ul.focusareas li a:hover img {position:relative; top:-10px;}

.flipStyle strong, .flipStyle a{
  font-size:40px;
  padding: 0 20px 0 20px;
  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;
	
}





#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;}



.activity {
    background: url("../images/icons/ico-questionmark.png") no-repeat scroll 15px 8px #E9F3D2;
    color: #92B750;
}

.question {
    background: url("../images/icons/ico-questionmark.png") no-repeat scroll 15px 8px #E9F3D2;
    border: 1px solid #ACD556;
    color: #92B750;
}
.alert {
    padding: 8px;
    position: relative;
    text-align: left;
}
.alert .msg {
    padding: 0 0 0 60px;
}




#media-list li{
	background-color: #E5F7FD;
    list-style:none;
    padding: 12px 10px 3px 35px;
	margin: 10px 0 0 5px;
	line-height: 10px;
}

#media-list li p{
	font-size: 12px;     padding: 0 0 0 15px;

}


#activity-list li{
	background-color: #ffcc33;
    list-style:none;
    padding: 12px 10px 3px 35px;
	margin: 10px 0 0 5px;
	line-height: 10px;
	height: 35px;
	width: 270px;
}

#activity-list li p{
	font-size: 12px;   padding: 0 0 0 15px;

}


.helpresources{background: url(../images/icons/ico-helpresources.png) 10px 10px no-repeat;}
.helpdownloads{background: url(../images/icons/ico-helpdownloads.png) 10px 10px no-repeat;}
.helpnotes img{padding: -10px 0 10px 30px;}
.helpmag{background: url(../images/icons/ico-target.png) 10px 10px no-repeat;}


.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;}


.pdf{background: url(../images/icons/ico-pdf.png) no-repeat;}
.web {background: url("../images/background/unit02-plantbg.jpg") no-repeat;}




.keyterms {
  font-size: 15px !important;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  padding: 15px;
  border-left: 3px solid purple;
  background: #ebebeb;
  color: purple;
  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; 	

} 

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


.help {background: #d2f2f2 url(../images/icons/ico-questionmark.jpg) 8px 8px no-repeat;
border: 1px solid #39F;
height: auto;
padding: 10px 0 6px 0;
margin: 0 0 20px 0;}

.help p{
padding: 0 0 0 45px;}






/* =Reflection Nav
-------------------------------------------------------------------------- */
		
#nav-reflection { padding:0; margin:5px 0 0 0; list-style: none; z-index:9999; }
#nav-reflection li { margin-right: 28px; width: 162px; 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: "Lucida Sans Unicode", "Lucida Grande", sans-serif, Helvetica;
    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;
}



/* unit1 styles  */

.unit1img1 {
	
	background:url(../images/background/unit01-process-safety.jpg) no-repeat;
	background-position: right;
	}


.unit1img2 {
	
	background:url(../images/background/unit01-process-safety2.jpg) no-repeat;
	background-position: right;
	}




ul#vidthumb {
	float:left;
	list-style: none;
	font-size: 12px;

	}

ul#vidthumb li {
	float: left;
	padding: 0;
	margin: 0px 12px 25px 0px;
	position: relative;
}

ul#vidthumb li a {
	position:relative;
	float: left;
	width: 90px;
	height: 50px; 
	background: url(../images/videos/video-sprite.png) no-repeat;
	color:#fff;
	margin: 0 0 10px 0 ;
	text-decoration:none;
    border: 2px solid #FFFFFF;
}


ul#vidthumb li a span {
	position:relative;
	top:55px;
	line-height: 110%;

}

ul#vidthumb a:hover {
    border: 2px solid #bbb;

}



ul#vidthumb li a:hover {text-decoration:underline;}
ul#vidthumb a.flixborough { background-position: 0 0; }
ul#vidthumb a.seveso { background-position: -90px 0; }
ul#vidthumb a.bhopal { background-position: -181px 0; }
ul#vidthumb a.mexicocity { background-position: -272px 0; }
ul#vidthumb a.piper { background-position: 0 -51px; }
ul#vidthumb a.texas { background-position: -91px -51px; }
ul#vidthumb a.buncefield { background-position: -181px -51px; }
ul#vidthumb a.mexico { background-position: -272px -51px; }
ul#vidthumb a.emergency { background-position: -368px 0; }
ul#vidthumb a.apex { background-position: -368px -51px; }
ul#vidthumb a.firevalley { background-position: -460px 0; }





ul#vidmedium {
	float:left;
	list-style: none;
	font-size: 12px;
	width: 190px;
	padding:  0 0 0 0px;
	}

ul#vidmedium li {
	float: left;
	padding: 0;
	margin: 5px 0px 30px 0px;
	position: relative;
	width: 190px;
}

ul#vidmedium li a {
	position:relative;
	float: left;
	width: 190px;
	height: 100px; 
	background: url(../images/videos/video-sprite.png) no-repeat;
	color:#fff;
	margin: 0 0 10px 0 ;
	text-decoration:none;
    border: 2px solid #FFFFFF;
}

ul#vidmedium li a span {
	position:relative;
	top:110px;
}


ul#vidmedium a:hover {
    border: 2px solid #bbb;

}

ul#vidmedium a.buncefield1 { background-position: -192px -430px; }
ul#vidmedium a.buncefield2 { background-position: 0 -430px; }
ul#vidmedium a.fireice { background-position: -387px -430px; }
ul#vidmedium a.kansasexplosion { background-position: -585px -430px; }
ul#vidmedium a.reactivehazard { background-position: -778px -430px; }
ul#vidmedium a.blastwave { background-position: -965px -430px; }
ul#vidmedium a.anatomy { background-position: -1160px -430px; }
ul#vidmedium a.ironfire { background-position: -1350px -430px; }
ul#vidmedium a.fatalexposure { background-position: -1540px -430px; }



ul#vidmain {
	float:left;
	list-style: none;
	font-size: 12px;
	width: 300px;
	}

ul#vidmain li {
	float: left;
	padding: 0;
	margin: 5px 18px 25px 0px;
	position: relative;
}

ul#vidmain li a {
	position:relative;
	float: left;
	width: 265px;
	height: 150px; 
	background: url(../images/videos/video-sprite.png) no-repeat;
	color:#fff;
	margin: 0 0 10px 0 ;
	text-decoration:none;
    border: 3px solid #eee;
}

ul#vidmain li a span {
	position:relative;
	top:160px;
}


ul#vidmain a:hover {
    border: 3px solid #bbb;
	font-size: 11px; 
}


ul#vidmain li a:hover {text-decoration:none;}

ul#vidmain a.flixborough { background-position: 0 -102px; }
ul#vidmain a.seveso { background-position: -266px -102px; }
ul#vidmain a.bhopal { background-position: -532px -102px; }
ul#vidmain a.mexicocity { background-position: -798px -102px; }
ul#vidmain a.piper { background-position: 0 -263px; }
ul#vidmain a.texas { background-position: -266px -263px; }
ul#vidmain a.buncefield1 { baczkground-position: -532px -263px; }
ul#vidmain a.buncefield2 { background-position: 0 -424px; }
ul#vidmain a.mexico { background-position: -799px -263px; }
ul#vidmain a.ethylene  { background-position: -266px -543px; }
ul#vidmain a.formosa { background-position: -532px -543px;}
ul#vidmain a.firevalley { background-position: -798px -543px; }
ul#vidmain a.emergency { background-position: -1063px -543px; }
ul#vidmain a.apex { background-position: -1332px -543px; }
ul#vidmain a.hazards { background-position: -1065px -102px; }

.videotitle {
	padding: 7px 0 5px 40px;
	background: url(../images/icons/video.png) no-repeat;
	font-size: 18px !important;
	}
	
/* unit2 styles */




ul#vidmain a.reaction { background-position: 0 -548px; }

.unit2img1 {background: url("../images/background/unit02-plantbg.jpg") center bottom no-repeat;
}

.unit2img2 {background: url("../images/background/unit02-plantbg2.jpg") center bottom no-repeat;
}

.unit2pillars {background: url("../images/background/unit02-pillars.jpg") center bottom no-repeat;
}

.unit2img3 {background:url("../images/background/unit02-go-wrong.jpg") right no-repeat;
}

.unit2img4 {background:url("../images/background/unit02-substances.jpg") right no-repeat;
}

.unit2img5 {background:url("../images/background/unit02-containment.jpg") right no-repeat;
}

.unit2img6 {background:url("../images/background/unit02-hazard-identification.jpg") right no-repeat;
}

.unit2img7 {background:url("../images/background/unit02-hazard-identification2.jpg") left no-repeat;
}



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

.focusareas li {float:left; margin:20px 5px; width:115px; text-align:center;}
ul.focusaresa li {margin-top:10px;}


ul.pillars li a:hover img {
position: relative;
top: -10px;
}

.focuslist {
    clear: both;
    display: inline-block;
    position: relative;
	background: url("../images/icons/focus-bullet.png")  no-repeat;
}
.focuslist span {
    float: left;
    width: 300px;
	padding: 5px 0 0 60px;
}

.focuslist h2 {
	color: orange;
    line-height: 18px !important;
    margin: 0px 0 0 0px;

}

.focuslist p {
    line-height: 18px !important;
    margin: 0 0 10px;
	font-weight:bold;
}


.pillarlist {
    clear: both;
    display: inline-block;
    position: relative;
	background: url("../images/icons/pillar-bullet.png")  no-repeat;
}
.pillarlist span {
    float: left;
    width: 300px;
	padding: 5px 0 0 60px;
}

.pillarlist h2 {
	color: orange;
    line-height: 18px !important;
    margin: 0px 0 0 0px;
	font-size: 15px
}

.pillarlist p {
    line-height: 18px !important;
    margin: 0 0 10px;
	font-weight:bold;
}


/* unit5 styles */

.unit5img1 {background:url(../images/background/unit05-comah.jpg) right no-repeat;
}

.unit5img2 {background:url(../images/background/unit05-comah2.jpg) right no-repeat;
}


.unit5img3 {background:url(../images/background/unit05-CS1.jpg) left no-repeat;
}

.unit5img4 {background:url(../images/background/unit05-CS2.jpg) left no-repeat;
}

.unit5img5 {background:url(../images/background/unit05-CS3.jpg) left no-repeat;
}

/* unit6 styles */

.unit6img1 {background:url(../images/background/unit06-safety-report.jpg) right no-repeat;
}


/* unit7 styles */

.unit7img1 {background:url(../images/background/unit07-management.jpg) right no-repeat;
}

/* unit9 styles */

.unit9img1 {background:url(../images/background/unit09-action-plan.jpg) right no-repeat;
}

/* unit10 styles */

.unit10img1 {background:url(../images/background/unit10-take5.jpg) right no-repeat;
}


/* unit11 styles */

.unit11img1 {background:url(../images/background/unit11-ems.jpg) right no-repeat;
}



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


*{
	margin:0;
	padding:0;
}




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


#fin{
	font:70px "Lucida Sans Unicode", "Lucida Grande", sans-serif, Helvetica;
	text-align:center;
	padding-top:300px;
	text-transform:uppercase;
	display:none;
}

#fontPreload{
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif, Helvetica;
	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;
}


.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:purple;
	}
	

		.bar2 .mosaic-overlay {
			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 {
			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:12px 15px;}				
	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;
	}
	
	.time-small-1
{
	position:relative;
	float:right;
	width:41px;
	height:47;
	background-image: url("../images/icons/clock-small-1.jpg");
}
	
	
	.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 { padding:12px 15px;}				
	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;
	}
	
	.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);
	}
	
	.play
	{
	position:relative;
	float:left;
	width:35px;
	height:34px;	
	background:url(../images/buttons/view-on.png);
	margin-top:-6px;
	}
	
	.play:hover
	{
	background:url(../images/buttons/view-on.png);
	margin-top:-6px;
	}
		
	.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);
	}
	

.arrow {
	position: relative;
	bottom: 160px;
	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
}



.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") 0 0px no-repeat; 
}






.menuLink {
	float: left;
	margin-left: 0px;
	left: -132px;	
	background: url("../images/sprite-map.png") 0 0px no-repeat; 
	position: relative;
	top: -234px;
	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;

}





.resourcesbtn {
    background: #045074;
    float: right;
    height: 70px;
    margin: 0px 3px 5px 4px;
    position: relative;
	width: 70px;
	display:block;
	text-align:center;	
	background: url("../images/sprite-map.png") -88px 0px no-repeat;	
}

.resourcesbtn:hover {
	background: url("../images/sprite-map.png") -88px -70px no-repeat;

}


.resourcesbtn.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; 	
}

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





.resourcesbtnanimate {
    background: #045074;
    float: right;
    height: 70px;
    margin: 0px 3px 5px 4px;
    position: relative;
	width: 70px;
	display:block;
	text-align:center;	
	background: url("../images/buttons/resources.gif") 0px 0px no-repeat;	
}

.resourcesbtnanimate:hover {
	background: url("../images/buttons/resources.gif") -0px -70px no-repeat;

}


.resourcesbtnanimate.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; 	
}

.resourcesbtnanimate.inactive:hover {
	cursor:default;
	background: url("../images/buttons/resources.gif") -158px 0px no-repeat;	
}




.downloadsbtn {
    background: #045074;
    float: right;
    height: 70px;
    margin: 0px 3px 5px 4px;
    position: relative;
	width: 70px;
	display:block;
	text-align:center;	
	background: url("../images/sprite-map.png") -158px 0px no-repeat;	
}

.downloadsbtn:hover {
	background: url("../images/sprite-map.png") -158px -70px no-repeat;

}


.downloadsbtn.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; 	
}

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







.downloadsbtnanimate {
    background: #045074;
    float: right;
    height: 70px;
    margin: 0px 3px 5px 4px;
    position: relative;
	width: 70px;
	display:block;
	text-align:center;	
	background: url("../images/buttons/download.gif") 0px 0px no-repeat;	
}

.downloadsbtnanimate:hover {
	background: url("../images/buttons/download.gif") 0 -70px no-repeat;

}


.downloadsbtnanimate.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; 	
}

.downloadsbtnanimate.inactive:hover {
	cursor:default;
	background: url("../images/buttons/download.gif") -158px 0px no-repeat;
}



.portfoliobtn {
    float: left;
    height: 55px;
    margin: 0px 3px 5px 4px;
    position: relative;
	width: 200px;
	display:block;
	background: url("../images/buttons/portfolio.png") 0px 0px no-repeat;	
}

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

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

}




#slickQuiz {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px solid #CCCCCC;
    color: #353535;
    font-family: Trebuchet,Arial,Helvetica,sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    margin: 20px auto 0;
    padding: 20px;
    width: 475px;
}
#slickQuiz .startQuiz, #slickQuiz .nextQuestion, #slickQuiz .questions li.question, #slickQuiz .questions li.question .responses, #slickQuiz .questions li.question .responses .correct, #slickQuiz .questions li.question .responses .incorrect, #slickQuiz .quizResults {
    display: none;
}
#slickQuiz ol.questions, #slickQuiz ul.answers, #slickQuiz ul.responses, #slickQuiz ol.questions li, #slickQuiz ul.answers li, #slickQuiz ul.responses li {
    background: none repeat scroll 0 0 transparent;
    list-style-type: none;
}
#slickQuiz h1, #slickQuiz h2, #slickQuiz h3, #slickQuiz h4, #slickQuiz h5, #slickQuiz h6 {
    font-weight: bold;
}
#slickQuiz h1 {
    color: #0C4569;
    font-size: 26px;
    margin: 0 0 20px;
}
#slickQuiz h2 {
    font-size: 22px;
    margin: 15px 0;
}
#slickQuiz h3 {
    font-size: 18px;
    margin: 15px 0 10px;
}
h4 {
    font-size: 16px;
    margin: 10px 0;
}
#slickQuiz h5 {
    font-size: 14px;
    margin: 10px 0 5px;
}
#slickQuiz h6 {
    font-size: 12px;
    margin: 5px 0;
}
#slickQuiz strong {
    font-weight: bold;
}
#slickQuiz em {
    font-style: italic;
}
#slickQuiz ul {
    list-style-type: circle;
}
#slickQuiz ol {
    list-style-type: decimal;
}
#slickQuiz ol li {
    list-style-type: decimal;
    margin-left: 20px;
}
#slickQuiz .button {
    background-color: darkcyan;
    border: 1px solid #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    float: left;
    padding: 5px 15px;
    width: auto;
}
#slickQuiz .button:hover {
    background-color: darkslategray;
    text-decoration: none;
}
#slickQuiz .startQuiz {
    margin-top: 40px;
}
#slickQuiz .quizArea, #slickQuiz .quizResults {
}
#slickQuiz .quizArea:before, #slickQuiz .quizArea:after, #slickQuiz .quizResults:before, #slickQuiz .quizResults:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
#slickQuiz .quizArea:after, #slickQuiz .quizResults:after {
    clear: both;
}
#slickQuiz .questionCount {
    font-size: 14px;
    font-style: italic;
}
#slickQuiz .questionCount span {
    font-weight: bold;
}
#slickQuiz ol.questions {
    margin-left: 0;
    margin-top: 20px;
}
#slickQuiz ol.questions li {
    margin-left: 0;
}
#slickQuiz ul.answers {
    margin-bottom: 20px;
    margin-left: 20px;
}
#slickQuiz ul.responses {
    margin: 0;
}
#slickQuiz ul.responses li {
    margin: 10px 20px 20px;
}
#slickQuiz ul.responses li p span {
    display: block;
    font-size: 18px;
    font-weight: bold;
}
#slickQuiz ul.responses li.correct p span {
    color: #6C9F2E;
}
#slickQuiz ul.responses li.incorrect p span {
    color: #B5121B;
}
#slickQuiz .quizResults h3 {
    margin: 0;
}
#slickQuiz .quizResults h3 span {
    font-style: italic;
    font-weight: normal;
}
#slickQuiz .quizResultsCopy {
    margin-top: 20px;
}

#slickQuiz h3 {
	color:#000;
}




































#quizDetails h2 {
    padding: 40px 0 75px;
    text-align: center;
}

a.takeQuiz {
    margin-top: 5px;
    width: 70px;
}
.smallLine {
    background: url("http://cdn.tutorialzine.com/wp-content/themes/tzine/img/tzine_sprite.png") no-repeat scroll -20px -340px transparent;
    height: 2px;
    margin: 18px auto;
    width: 80px;
}
.adminLink {
    bottom: 28px;
    font-size: 10px;
    left: 125px;
    position: absolute;
}
.homeRightSection {
    float: right;
    position: absolute;
    right: -305px;
    width: 235px;
}
.homeRightSection .line {
    margin: 13px 0 13px -34px;
}
.homeRightSection .quizUserList {
    width: 200px;
}
.homeRightSection h2.light {
    font-size: 25px;
    padding: 0 0 20px;
}
h2.quizesMainTitle {
    padding: 85px 0;
}
.homeRightSection a.greenSmallButton {
    margin: 10px 50px 0;
    width: auto;
}
#createQuizForm {
    margin-bottom: 50px;
    width: 780px;
}
#createQuizForm li {
    list-style: none outside none;
}
#quizDetails li, .quizCreateSection {
    background-color: #F4F4F4;
    background-image: linear-gradient(#F6F6F6, #F3F3F3);
    border: 1px solid #FFFFFF;
    box-shadow: 1px 1px 0 #D0D0D0;
    margin-bottom: 25px;
    padding: 20px;
    position: relative;
    text-shadow: 1px 1px 0 white;
}
#createQuizForm .blueButton {
    font-size: 15px;
    font-weight: bold;
    padding: 4px 8px;
    position: absolute;
    right: 25px;
    top: 25px;
    width: auto;
}
.static {
    display: none;
    font-size: 25px;
    padding: 6px;
    text-shadow: 1px 1px 0 white;
    width: 600px;
}
.plainLine {
    background-color: #CCCCCC;
    border-bottom: 1px solid white;
    font-size: 1px;
    height: 1px;
    line-height: 1px;
    margin: 55px 0;
    overflow: hidden;
}
#createQuizForm h2.light {
    margin-top: -55px;
}
#createQuizForm input {
    font-size: 25px;
    width: 600px;
}
#createQuizForm textarea {
    font-size: 19px;
    height: 50px;
    width: 550px;
}
#createQuizForm .quizDescription .static {
    font-size: 19px;
    margin-bottom: 6px;
    width: 550px;
}
#createQuizForm .quizQuestion input, #createQuizForm .quizDescription static, #createQuizForm .quizQuestion .static {
    font-size: 19px;
    margin: 3px 0;
    width: 465px;
}
.quizAnswer {
    margin: 15px 0 0;
}
#createQuizForm .quizAnswer input, #createQuizForm .quizAnswer .static {
    font-size: 17px;
    margin: 5px 0;
    width: 380px;
}
#createQuizForm .childContainer {
    background-color: #EAEAEA;
    display: none;
    margin-bottom: 25px;
    padding: 15px 30px 30px;
}
#quizQuestions {
    display: none;
}
#quizSubmitButtons {
    height: 30px;
    margin: 0 auto;
    position: relative;
    width: 270px;
}
#quizSubmitButtons .greenSmallButton {
    float: left;
    font-size: 15px;
    font-weight: bold;
    padding: 4px 8px;
    width: 100px;
}
#quizSubmitButtons .blueButton {
    float: left;
    margin: 0 0 0 20px;
    position: static;
    width: 100px;
}
.wdqContainer blockquote.note {
    background-position: 15px 25px;
    margin-bottom: 40px;
    padding-top: 25px;
    width: 98.5%;
}
.wdqContainer blockquote.note ul {
    margin-left: 15px;
}
.wdqContainer blockquote.note li {
    padding-bottom: 10px;
}
.wdqContainer blockquote.note p {
    padding-bottom: 10px;
}
#quizDetails .correct .qIcon, #createQuizForm .correct .qIcon {
    background-position: -40px -160px;
    cursor: pointer;
}
#quizDetails .wrong .qIcon, #createQuizForm .wrong .qIcon {
    background-position: -40px -200px;
    cursor: pointer;
}
#quizDetails .qIcon, #createQuizForm .qIcon {
    background: url("http://cdn.tutorialzine.com/wp-content/themes/tzine/img/tzine_sprite.png") no-repeat scroll -40px -120px transparent;
    height: 32px;
    left: 20px;
    margin-top: -14px;
    position: absolute;
    top: 50%;
    width: 30px;
}
#createQuizForm .removeQuizItem {
    background: url("http://cdn.tutorialzine.com/wp-content/themes/tzine/img/tzine_sprite.png") no-repeat scroll -200px -180px transparent;
    cursor: pointer;
    height: 16px;
    position: absolute;
    right: 15px;
    top: 19px;
    width: 16px;
}
.quizAnswer, .quizQuestion {
    cursor: n-resize;
    padding: 10px 10px 10px 70px;
}
#createQuizForm .quizAnswer textarea, #createQuizForm .quizQuestion textarea {
    font-size: 15px;
    height: 18px;
    width: 580px;
}
#createQuizForm .quizAnswer textarea {
    width: 520px;
}
#createQuizForm .quizAnswer textarea.defaultText, #createQuizForm .quizQuestion textarea.defaultText {
    color: #999999;
}
#createQuizForm .quizAnswer .static, #createQuizForm .quizQuestion .static {
    font-size: 15px;
    padding: 3px 6px;
    width: 580px;
}
#createQuizForm .quizAnswer .static {
    width: 520px;
}
#createQuizForm .quizAnswer .blueButton, #createQuizForm .quizQuestion .blueButton {
    font-size: 12px;
    font-weight: normal;
    padding: 3px 8px;
    position: absolute;
    right: 45px;
    top: 14px;
}
#createQuizForm .quizLevel .greenSmallButton {
    font-size: 12px;
    font-weight: bold;
    margin: 0 auto;
    padding: 3px 6px;
    width: 70px;
}
#createQuizForm .ui-sortable-placeholder {
    height: 70px;
}
#createQuizForm .quizError {
    background-color: #C73737;
    border: 1px solid #B12121;
    color: white;
    font-size: 12px;
    padding: 5px 10px;
    position: absolute;
    right: -200px;
    text-align: center;
    text-shadow: 1px 1px 0 #555555;
    top: 11px;
    width: 150px;
}
#quizSubmitStatus {
    background: url("http://cdn.tutorialzine.com/wp-content/themes/tzine/img/preloader.gif") no-repeat scroll -200px center transparent;
    color: #DF3232;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: -110px;
    top: -1px;
    white-space: nowrap;
    width: 100px;
}
#quizSubmitStatus.active {
    background-position: 0 center;
}
#quizSubmitThankYou {
    display: none;
    margin-bottom: 50px;
}
#quizSubmitThankYou p {
    background-color: #F7F7F7;
    color: #888888;
    padding: 25px;
    text-shadow: 1px 1px 0 #FFFFFF;
}
#quizSubmitThankYou h2.light {
    padding: 0 0 55px;
}
.fb-loggedIn {
    display: none;
}
#quizData {
    display: none;
}
#takeQuizContainer {
    width: 1050px;
}
#takeQuizContainer #quizTitle {
    margin: 50px 0;
    padding: 0;
    position: relative;
}
#qCount {
    bottom: 0;
    color: #BBBBBB;
    font-size: 16px;
    left: 50%;
    letter-spacing: 1px;
    margin-left: 53px;
    padding: 3px 7px;
    position: absolute;
    text-shadow: 1px 1px 0 #FFFFFF;
}
#quizDetails {
    position: relative;
}
#takeQuizContainer .plainLine {
    margin: 30px 0;
}
#quizDetails h2 {
    padding: 40px 0 75px;
    text-align: center;
}
#quizDetails ul {
    margin: 0 auto;
    width: 650px;
}
#quizDetails li {
    color: #888888;
    cursor: pointer;
    font-size: 18px;
    list-style: none outside none;
    padding-left: 65px;
}
#quizDetails .blueButton {
    font-size: 15px;
    font-weight: bold;
    margin: 65px auto;
    position: relative;
}
#takeQuizContainer h2.noscript {
    margin: 100px 0;
    text-align: center;
}
#quizDetails li.validatorWrong {
    border: 2px solid #E60505;
    margin-top: -2px;
}
#quizDetails li.validatorRight {
    border: 2px solid #86B90C;
    margin-top: -2px;
}


#quizDetails .wrong .qIcon, #createQuizForm .wrong .qIcon {
    background-position: -40px -200px;
    cursor: pointer;
}
#quizDetails .qIcon, #createQuizForm .qIcon {
    background: url("http://cdn.tutorialzine.com/wp-content/themes/tzine/img/tzine_sprite.png") no-repeat scroll -40px -120px transparent;
    height: 32px;
    left: 20px;
    margin-top: -14px;
    position: absolute;
    top: 50%;
    width: 30px;
}


#quizDetails .tick, #quizDetails .cross {
    background: url("http://cdn.tutorialzine.com/wp-content/themes/tzine/img/tzine_sprite.png") no-repeat scroll -230px -220px transparent;
    height: 30px;
    left: -45px;
    position: absolute;
    top: 0;
    width: 30px;
}
#quizDetails .cross {
    background-position: -200px -220px;
    top: 2px;
}
#quizDetails .quizResult h2 {
    font-size: 150px;
}
#quizDetails .quizResult p {
    color: #AAAAAA;
    font-size: 30px;
    text-align: center;
    text-shadow: 1px 1px 0 white;
}
#quizDetails #quizSubmitStatus {
    right: -120px;
    top: -3px;
}
#fbLoginButton {
    display: block;
    margin: 15px auto 0;
    text-align: center;
}
.quizUserList {
    float: left;
    list-style: none outside none;
    padding: 20px 10px 10px 20px !important;
    width: 400px;
}
.quizUserList li {
    float: left;
    margin: 0 10px 10px 0;
}
.quizUserList li a {
    border: medium none;
    display: block;
}
.quizUserList li img {
    display: block;
}
.quizTakeSubSection {
    float: left;
    width: 50%;
}
.quizTakeSubSection h2 {
    margin-top: -20px;
}
.subsectionHolder {
    background-color: #F7F7F7;
    color: #888888;
    margin-bottom: 50px;
    padding: 20px;
}
#quizDetails h2 pre, #quizDetails h2 code {
    background-color: #E8E8E8;
    border-radius: 12px 12px 12px 12px;
    font-size: 0.8em;
    padding: 5px;
}
#quizDetails h2 pre {
    background-color: #F5F5F5;
    color: #888888;
    display: block;
    font-size: 30px;
    padding: 30px;
    text-align: left;
    white-space: normal;
}

#quizDetails .wrong .qIcon, #createQuizForm .wrong .qIcon {
    background-position: -40px -200px;
    cursor: pointer;
}
#quizDetails .qIcon, #createQuizForm .qIcon {
    background: url("http://cdn.tutorialzine.com/wp-content/themes/tzine/img/tzine_sprite.png") no-repeat scroll -40px -120px transparent;
    height: 32px;
    left: 20px;
    margin-top: -14px;
    position: absolute;
    top: 50%;
    width: 30px;
}


/*----------------------------
		timer
-----------------------------*/

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

}

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

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

}

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

}

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

}

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

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

}

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





/*----------------------------
		end-timer
-----------------------------*/


.studyoverview

{
	position:relative;
	float:left;
	height:300px!important;
	width:240px!important;	
	margin-right:20px;
}

.studyoverview P
{
	line-height:18px;
}

.studyoverview2

{
	position:relative;
	float:left;
	height:300px!important;
	width:180px!important;	
	margin-right:20px;
}


.mainMenu .studyskills-text-link{
	line-height:16px!important;
}