@import url('normalize.css');
@import url('navigation.css');
@import url('columns.css');

body { margin:0; padding:0; width:100%; height:100%; background-color: white; }
body p, ul, li, td, div  { font:normal 14px Arial; color:#545454;  }
html { padding:0; margin:0; height:100%; position:relative;}

.clr { overflow: hidden; width: 100%; clear: both;}
.imgsiz { width: auto !important; max-width:98%; display: block;}

.wrapper { width:100%; padding: 0; margin: 0 auto; }
.content { max-width:1020px; margin:0 auto; }
.container { width:100%; }
.main { margin: 0 auto; padding:25px 0; background:#f4f4f4; width:100%; }
.colLeft {  margin: 0 50% 0 7%; }
.colRight {  margin: 0 10% 0 50%;  } 
.floLeft { float: left; width:49%; }
.floRight { float: right;  width:49%;}
.floLeft2 { float: left; width:29%; }
.floRight2 { float: right;  width:69%;}
.bgGray { background: url(../images/graytrans.png);  padding:5px; }
.bgWhite { background: url(../images/whitetrans.png);   padding:5px;}

.toglogin {}

div#close_demo { z-index: 4; position: absolute; top:0; right:0; background-color: #000; padding: 10px; }
div#close_demo a { color:#fff; text-align: center; cursor: pointer;}
div#overlay { display: none; z-index: 2; background: #000; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; }

div#demo_firstaid { display: none; position: relative; z-index: 3; width:100%; height: 100%; padding:0; margin: 0 auto; }
div#demo_whmis { display: none; position: relative; z-index: 3; width:100%; height: 100%; padding:0; margin: 0 auto; }
div#demo1 { display: none; position: relative; z-index: 3; width:100%; height: 100%; padding:0; margin: 0 auto; }
div#demo2 { display: none; position: relative; z-index: 3; width:100%; height: 100%; padding:0; margin: 0 auto; }
div#demo3 { display: none; position: relative; z-index: 3; width:100%; height: 100%; padding:0; margin: 0 auto; }
div#demo4 { display: none; position: relative; z-index: 3; width:100%; height: 100%; padding:0; margin: 0 auto; }

div#demo.widescreen { padding-bottom: 0; }
div#demo.vimeo { padding-top: 0; }

div#demo iframe,
div#demo object,
div#demo embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
}

.error { width:100%; background-color: #ffffe3; padding: 10px; color: #ed2335; }


h1 { font-size: 36px; font-weight: normal; padding:0; margin:0; color:#545454; }
h2 { font-size: 21px; font-weight: normal; padding: 0; margin: 0;}
h3 { font-size: 17px; font-weight: normal; padding: 0; margin: 0; color:#545454; }
h4 { font-size: 24px; font-weight: bold; padding: 0; margin: 0; color:#545454; }
h5 { font-size: 18px; font-weight: normal; padding:0; margin:0; color:#f58220; }
h6 { font-size: 28px; font-weight: normal; padding:0; margin:0; color:#545454; }


/*.game { padding-top: 30px; display: block; font-size: 21px; font-weight: normal; color:#545454; text-decoration: none; background: url(../images/gameicon.png) no-repeat left center;  height:43px;}*/
.game { padding-top: 30px; display: block; font-size: 21px; font-weight: normal; color:#545454; }
.game span { /*padding-left:65px;*/ }



a { color: #3095d1; }
a:hover { text-decoration: none; color: #f58220; }
a.active { color: #f58220;  pointer-events: none;
   cursor: default;}

.line { border-top:1px solid #c3c3c3; clear: both; padding: 2px 0;  margin: 0px; }
.line2 { border-top:1px solid #e9e9e9; clear: both; padding: 2px 0;  margin: 0px; }
.line_vert { border-left:1px solid #f4f4f4; padding: 2px 10px;  margin: 0px; }



.icon img { display: inline-block; padding-top: 5px; padding-left: 5px;  z-index: 10; }


.btn:before, .btn2:before
{
  float: left;
  width: 1em;
  text-align: center;
  font-size: 1.7em;
  margin: 0 0.5em 0 -1em;
  padding: 0 .2em;
  pointer-events: none;
}
.btn:after, .btn2:after
{
  display:block;
  padding:18px;
content: '';
    display: block;
    clear: both;
  }




.btn { clear: both;  padding:0; display: inline-block; }
.btn a { background-color: #f58220; color: #FFF; padding:15px 60px;  font-size: 15px; text-decoration:none; border: #fff 2px solid; 
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; 
  -khtml-border-radius: 3px; 
}
.btn a:hover {  border: #f58220 2px solid; color:#f58220; background-color: #fff; }


.completed { font-size: 18px; font-weight: normal; padding:0; margin:0; color:#3095d1;  }
.status { font-size: 18px; font-weight: normal; padding:0; margin:0; color:#f58220;  }


.btn2 { clear: both;  padding:0 10px 10px 0;  display: inline-block; }
.btn2 a { border: #fff 2px solid; background-color: #3095d1; color: #FFF; padding:15px 60px;  font-size: 15px; text-decoration:none; 
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; 
  -khtml-border-radius: 3px; 
}
.btn2 a:hover {  border: #3095d1 2px solid; color:#3095d1; background-color: #fff; }


.btnI { clear: both;  padding:0; }
.btnI a { border: #ffffff 2px solid; padding:15px 50px; color:#ffffff; font-size: 15px; font-weight: bold; text-decoration:none; 
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; 
  -khtml-border-radius: 3px; 
}
.btnI a:hover { background-color: #ffffff; color: #f58220;  }


.courseimage {
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden
}
.courseimage img {
    flex-shrink:0;
    min-width:100%;
    min-height:100%
}



/* Form style ----------------------------- */

input[type=text],
input[type=password],
select,
textarea { 
  background-color: #ffffff; border:solid 1px #cccccc; padding:6px; 
}
input[type=text]:focus {border-color:#333; }
input[type=submit] { border: #ffffff 2px solid; padding:15px 30px; color:#ffffff; background-color: #f58220; font-size: 15px; text-decoration:none; }
input[type=submit]:hover { border: #f58220 2px solid; color:#f58220;  background-color: #ffffff; font-size: 15px; text-decoration:none; }
input[type=submit], input[type=text], textarea
{
    -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; 
  -khtml-border-radius: 3px; 
}


/* TABLES ------------------------------------------------- */


table.data-form
{
  text-align: left;
  border-collapse: collapse;
  border: 6px solid #fff;
}
table.data-form thead tr td
{
  font-size: 18px;
  padding: 12px 15px;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  background-color:#c8c8c8;
}
table.data-form tr td
{
  padding: 8px 15px;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
}
table.data-form tr:nth-child(odd)   { background-color:#f0f0f0; }
table.data-form tr:nth-child(even)    { background-color:#ffffff; }

table.data-form-odd
{
  background: #f0f0f0;
}
table.data-form-even
{
  background: #f6f3f3;
}


/* HOME / INTRO ------------------------------------------------- */

.topbar { background:#3095d1; height:130px ; }

.logo { float: left; width:30%; }
.logo img { width: auto !important; max-width:100%; display: block; }

.regular_nav { float: right; padding: 50px 10px 0 10px; width:65%; }
.regular_nav2 { float: right; padding: 30px 10px 0 10px; width:65%; }
.header {}
.logo2 { margin: 0 auto; padding: 50px 40px; float: right; width: 40%; }
.logo3 { padding-bottom: 15px;}
.logo3 img { width: auto !important; max-width:60%; display: block; }

.student { float: left; width: 40%; padding-left:20px;}
.student img { width: auto !important; max-width:98%; display: block; position: relative; top: -40px; margin-left: 50px;}


/* WHAT IS LIFESMART ------------------------------------------------- */

.courses { padding:0; margin:0; background:#fff; /* url(../images/cpr.jpg) no-repeat bottom right; min-height:560px;*/ }
.subnav { padding: 50px 0; }

.studentimage {background-image:url('../images/cpr.jpg');
background-repeat:no-repeat;
background-size:contain;
background-position:right; }

div.toggle{ display: none; width:100%; min-height:400px; padding:0; margin:0;}
div.toggle.first { display: block; width:100%;}


/* WHMIS ------------------------------------------------- */

.WHMIS { padding:0;  min-height:500px; background:#ffffff; /* url(../images/cpr.jpg) no-repeat bottom right; min-height:560px;*/ }
.whmisimage {background-image:url('../images/whmiskid.jpg');
background-repeat:no-repeat;
background-size:contain;
background-position:left; }


/* Course Catalogue ------------------------------------------ */

.Course { padding:0;  min-height:200px; }

.CourseLeft { float: left; width:59%; }
.CourseRight { float: right;  width:39%;}
.CourseLeft_odd { float: right; width:59%; }
.CourseRight_odd { float: left;  width:39%;}



/* Register ------------------------------------------------- */

.register { background:#35aada url(../images/tile.png); padding: 50px 0; text-align:center; }
.register h1 { color:#ffffff; padding:0 0  50px 0;}


/* EDUCATORS ------------------------------------------------- */

.educators { margin: 0 auto; padding:50px 10px;  background:#f4f4f4; width:100%; }



/* LOGIN ------------------------------------------------- */
div.login_toggle{ display: none; width:100%; min-height:100px; background:#dddddd url(../images/login_background.png) repeat-x bottom left; }
div.login_toggle .content { width: 80%; padding: 0 1%; }
label{ font-size: 16px; color:#545454; font-weight: 400; }
.form-group{margin-bottom:15px}
.form-control:-moz-placeholder{color:#999}
.form-control::-moz-placeholder{color:#999}.form-control:-ms-input-placeholder{color:#999}
.form-control::-webkit-input-placeholder{color:#999}
.form-control{display:block;width:100%;padding:12px;font-size:16px;line-height:1.75;color:#555;vertical-align:middle;background-color:#fff;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)}.form-control[disabled],.form-control[readonly],fieldset[disabled] 
.form-control{cursor:not-allowed;background-color:#eee;}
.form-control input[type=submit] {  padding:15px 60px; color:#ffffff; font-size: 15px; font-weight: bold; text-decoration:none;     
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; 
  -khtml-border-radius: 3px; }
.form-control input[type=submit]:hover { background-color: #ffffff; color: #f58220; }





/* FOOTER ------------------------------------------------- */
.footer { width: 100%; height: 100px; margin: 0 auto;  padding: 10px 0; background: #ffffff; }


.sponsors { margin: 0 auto; float: right; text-align: right;   padding: 0 8%; font:normal 13px Arial; color:#7e7e7e; }
.sponsors span { vertical-align: middle; height: 50px; }
.copyright { margin: 0 auto;  padding: 0 5%; float: left;   font:normal 13px Arial; color:#7e7e7e;  }

.back-to-top {
    position: fixed;
    bottom: 2em;
    right: 2em;
    width:40px;
    height:40px;
    background: url(../images/backtotop.png) no-repeat; 
    display: none;
}

.back-to-top:hover {    
    background: url(../images/backtotop_over.png) no-repeat; 
}



select.schools { width:200px; }
select.schools:focus { width: 100%;}


 /*Hide / or resize if screen is too small ---*/
@media only screen and (max-width : 900px) {
 /* .studentimage {  background-size:400px;  }
  .whmisimage {  background-size:400px;  }
*/
  .colLeft {  margin: 0 50% 0 1%; }
  .colRight {  margin: 0 1% 0 50%; }
}


 /*Hide / or resize if screen is too small ---*/
@media only screen and (max-width : 640px) {
  .logo { margin:0; text-align:center; } 
  .logo { width: 250px;}
  .regular_nav {  display: none; }
  .regular_nav2 {  display: none; }
  .student {  display: none; }
  .logo2 { width: 80%; }
  .studentimage {  background-image:none;  }
  .whmisimage {  background-image:none;  }
  .colLeft {  margin: 0 1% 0 1%; }
  .colRight {  margin: 0 1% 0 1%; }
  .courseimage { display: none; }
  .eduL { padding: 1% 1%; width:99%; }
.eduR { margin: 0 1% 0 1%; padding: 0; width:99%; }
.telus { padding: 1% 1%; width:99%; }
.copyright { padding: 1% 1%; width:99%; }
.floLeft { float: left; width:99%; }
.floRight { float: right;  width:99%;}
.CourseLeft { float: left; width:99%; }
.CourseRight { float: right;  width:99%;}
.CourseLeft_odd { float: right; width:99%; }
.CourseRight_odd { float: left;  width:99%;}

}
@media only screen and (max-width : 480px) {
.teacher {height: 454px; width:360px; padding-bottom: 10px;}
}

@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
div#demo { padding-top: 0; }
}