@charset "utf-8";

.f-left { float:left; }
.f-right { float:right; }
@media (min-width:760px) {
  .pull-right-lg { float:right; }
}
  
/* FONT
========================================================================================*/
body, .activitySelectMenu select { font-family: Helvetica, Arial, sans-serif; font-weight:normal }
h3 { font-family:"Myriad Pro", Arial, Helvetica, sans-serif; }

h1, .card, .topCard, .logoutLink, .login2 .userDetail  { font-family: 'Open Sans', sans-serif; font-weight:normal; }

/* END FONT
========================================================================================*/


/* Branding
========================================================================================*/
body { background-color:#ffffff; padding-top:125px; }
body.rewardsBg { background:url(../img/body-bg.png) repeat 0 0; }

#header { background-color:#ffffff; border-bottom:solid 2px #eaeaea; margin-bottom:30px; box-shadow:0 3px 5px rgba(0,0,0,0.10) }

.navbar { margin-bottom:0; min-height:80px; }
.navbar-header { display:block; float:left; margin-top:11px; padding-right:2.5%; }
.navbar-brand { display:block; padding:0; float:none; height:auto; padding-right:29px; position:relative; }
.navbar>.container-fluid .navbar-brand { margin-left:0; }
.unsuperText { display:block; color:#979394; line-height:24px; }


.navbar-form { float:left; padding:0 2.5% 0 0; margin-top:13px; margin-bottom:0 }
.input-group-lg>.input-group-btn> button[type=submit] { color:#808080; padding-left:13px; padding-right:14px;  }
button[type=submit] .fa { font-size:1.35em; }

.coinsList { color:#16A2DF; font-size:14px; font-weight:bold; padding:19px 0 0%; float:left; margin-bottom:0; width:auto; }
.coinsList li { float:left; display:block; margin-right:46px; }
.coinsList li.lastchild { margin-right:0; }
.coins { background:#1682bf; width:140px; display:block; border-radius:7px; padding:6px; position:relative;  box-shadow:0 2px 3px rgba(24,116,183,0.55), inset -1px -1px 4px rgba(0,55,113,1);
 background: linear-gradient(#41bae7, #1682bf); margin-left:8px; }
.coinsCollect { background:#1076a0; width:85px; border-radius:5px;  color:#FFF; text-shadow:0 2px 0 #1578bb; padding:2px 7px; white-space:nowrap; overflow:hidden; font-size:15px; text-align:left; float:right; box-shadow:inset 0 5px 4px rgba(0,0,0,0.26), inset 0 0 6px rgba(0,0,0,0.23); min-height:25px;  }
.coinsList li:hover .iconCoinStar, .coinsList li:hover .iconCoin, .loginHeader nav li:hover { transform: rotate(0deg) scale(1.1) skew(0deg) translate(0px); }

.login { position:relative; padding:11px 0 0 26px; float:right}
.profileTitle { font-size:22px; color:#2cade4; font-weight:bold; position:relative}
.userDetail { font-size:18px; line-height:19px; display:block; }

.login2 {  padding-left:0; padding-top:0; }
.login2 .settingIcon { position:inherit; left:auto; top:auto; display:inline-block }
.profileImgCircle { background-color:#3abbf2; display:block; width:80px; height:80px; border-radius:100%; overflow:hidden; margin:0 10px 0 0; text-align:center; float:right; }
.profileImgCircle  {
    position: relative;
    text-align: center;
}
.profileImgCircle img {
    width: 100%;
    vertical-align: middle;
}
.profileImgCircle .avatar-premium {
    margin-top: -20px;
}
.profileImgCircle .avatareyes {
    position: absolute;
    left: 0px;
    top: 0px;
}

.profileCol { min-width:180px; float:right; padding-top:21px; }
.profileCol .profileTitle { line-height:21px;}
.settingIcon { color:#cccccc; font-size:1.7em; line-height:1.25em; position:absolute; left:0; top:11px; margin-right:5px; }
.settingIcon:focus { color:#cccccc; text-decoration:none; }

/* Start Change Date 19-01-2016 */
.login2 .userDetail { line-height:34px; }
/* End Change Date 19-01-2016 */

.joinButtons { float:right; padding-top:17px; }
.joinButtons a.joinnowButton { margin-left:15px; }

.progress-bar-grey {
  background-image: -webkit-linear-gradient(top, #C1C1C1 0, #808080 100%);
  background-image: -o-linear-gradient(top, #C1C1C1 0, #808080 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C1C1C1), to(#808080));
  background-image: linear-gradient(to bottom, #C1C1C1 0, #808080 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffC1C1C1', endColorstr='#ff808080', GradientType=0);
}

/* End Branding
============================================fa fa-volume-up============================================*/


/* Start Heading
========================================================================================*/
.content h1 { font-weight:600; margin-top:0; margin-bottom:16px; color:#231f20; }
.topCard h4 { margin-top:0; }
.topCard h4 a { color:#0098d9; line-height:24px; }
.subTitle { font-size:13px; }
.card-type h5 { line-height:11px; }

/* End Heading
========================================================================================*/


/* Links AND Button
========================================================================================*/
a:focus{ outline:none;}
a:hover { text-decoration:none; }
.logoutLink { color:#727272; font-size:13px; text-align:right; }

.homeLink { font-size:1.3em; position:absolute; top:7px; right:0; }

.cardLink { font-size:15px; color:#231f20; font-weight:600; position:absolute; bottom:90px; left:0; right:0; display:block; padding:0 20px;  }
.cardLink em { font-family:Times, serif; font-style:normal; font-weight:300; color:#727272; }
.cardLink span { font-size:0.8em; float:right; margin-top:5px;}

.blueButton { background-image:-webkit-linear-gradient(top, #08b0e2 0, #0682a7 100%); background-image:-o-linear-gradient(top, #08b0e2 0, #0682a7 100%); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #08b0e2), to(#0682a7)); background-image:linear-gradient(to bottom, #08b0e2 0, #0682a7 100%); color:#ffffff; }
.blueButton:hover, .blueButton:focus { background:#08b0e2; color:#ffffff; }

/* Links AND Button
========================================================================================*/

/* Main Navigation
========================================================================================*/
nav ul { float:right; padding:13px 0 0; margin-bottom:0; margin-left:3%; }
nav ul li { float:left;  margin-left:21px; }
nav ul li:first-child { margin-left:0; }
nav ul li a:hover, nav ul li a:focus i { color:#2cade4; }
/* Start Change Date 19-01-2016 */
.soundLink { font-size:35px; color:#a2a0a0; line-height:50px; font-weight:bold; line-height:43px; }
/* End Change Date 19-01-2016 */
.starlink, .soundon, .list-ul-link { font-size:2.4em; color:#2cade4; font-weight:bold; display:inline-block; border:solid 3px #FFF; border-radius:100%; text-align:center;}
.starlink, .soundon { font-size:30px; color:#ffd700; line-height:42px; }
.starlink:hover, .starlink:focus i { color:#ffd700 }

/* End Navigation
========================================================================================*/


/* Start Icons and Shapes
========================================================================================*/
.iconFlash { font-size:2em; color:#7cebff; font-weight:bold; text-shadow:1px 1px 1px #158fd3; float:left; margin-right:11px; }
.iconLight { float:left; font-size:4em; color:#FFF; margin-right:20px;}
.settingIcon.view600, .joinButtons .settingIcon { display:none}

.smiles i {  color:#ffffff; margin-right:5px; vertical-align:middle }
.deck a .smiles  {  color:#ffffff }
.deck a .smiles:hover  {  color:#dcdcdf }
.card .fa.fa-search { color:#6d6e70; }
.card .fa.fa-arrow-right { margin-left:5px; }
.fa.red { color:#ed5a48;}
.fa.blue { color:#00b0e8; }
.fa.yellow { color:#ffc600;}
.fa.purple { color:#9467bd; }
.fa.orange { color:#ff7f0e; }
.fa.green { color:#ff7f0e; }
.fa.black { color: #000; }
.fa.brown { color: #BD5A14; }
.fa.green { color: #9eab3a; }

.outcomes .fa-info-circle { margin-left:18px; padding-top:2px; }
.deck .outcomes .fa-info-circle { color:#FFF; }
.outcomes .fa { font-size:1.8em; }

/* For Rounded Icons */
.roundIcon { font-size:30px; color:#FFF; font-weight:bold; width:53px; height:53px; display:inline-block; background-color:#37b6e6; border:solid 4px #FFF; border-radius:100%; text-align:center; line-height:42px; text-shadow:0 1px 1px rgba(0,0,0,0.25); box-shadow:0 3px 0 1px rgba(0,0,0,0.25); position:absolute; top:-10px; left:-8px; }
.roundIcon:hover i, .roundIcon:focus i { color:#ffffff;}
.userIcon { box-shadow:0 2px 1px rgba(217,217,217,1), 0 -1px 1px rgba(0,0,0,0.75) inset, 2px 2px 0 rgba(200,161,217,1) inset, -2px -2px 0 rgba(111,66,146,1) inset; background: linear-gradient(180deg, #aa80c4, #7d4ea0) no-repeat 25% 25% ; background-size: 100%	;}
.userIcon2 { box-shadow:0 2px 1px rgba(217,217,217,1), 0 -1px 1px rgba(0,0,0,0.75) inset, 2px 2px 0 rgba(207,225,120,1) inset, -2px -2px 0 rgba(88,136,31,1) inset; background: linear-gradient(180deg, #9dc45a, #6da02a) no-repeat 25% 25% ; background-size: 100%	;}

.roundIcon.iconDone { background-color:#78c800; line-height:1.5em; }

/* Start Change Date 19-01-2016 */
.orangeIcon { box-shadow:0 2px 1px rgba(217,217,217,1), 0 -1px 1px rgba(0,0,0,0.75) inset, 2px 2px 0 rgba(251,170,73,1) inset, -2px -2px 0 rgba(211,115,0,1) inset; background: linear-gradient(180deg, #e07d06, #f7941e) no-repeat 25% 25% ; background-size: 100%; }
.input-group-lg>.input-group-btn> button[type=submit] { line-height:0; }
/* End Change Date 19-01-2016 */

/* For dollarGoldCoin */
.dollarGoldCoin { display:inline-block; border:solid 4px #FFF; box-shadow:0 4px 0 0 rgba(0,0,0,0.15); border-radius:100%;  }
.dollarGoldCoin.top-dollarGoldCoin { position:absolute; top:-10px; left:-12px; }
.dollarGoldCoin:before { content:"\f005"; font:normal normal normal 14px/1 FontAwesome; color:#FFF; display:inline-block; position:absolute; top:-3px; right:3px;
transform: rotate(330deg); 	}
#gp-start, #gp-start2 {   width:46px; height:46px; display:block; border-radius:40px; background-color: #febf2a; text-align:center; font-size:30px; line-height:35px; }
.next-btn {background: linear-gradient(#fec93e, #fda919); border: solid 4px #ffe556; color: #ffe556;text-decoration: none; text-shadow: 1px 1px 0 rgba(137,64,0,0.7);
box-shadow: 0px 1px 1px 1px #be6803, inset 0 1px 1px 0 #d0810c, inset 0 4px 8px 0 rgba(210,131,12,0.50); }
.next-btn:hover { color:#ffe556; text-decoration:none; }
.next-btn:before { content:''; display:inline-block; }
.dollarIcon { font-style:italic; margin-left:-5px; font-weight:bold; font-size:28px; }
#gp-start2.star { background-color:inherit; text-decoration:3px 3px 0 #FFF, -3px -3px 0 #FFF; position:absolute; top:-8px; left:-10px; transform: rotate(345deg); }
.starIcon { margin-left:-10px; font-weight:bold; font-size:50px; color:#ffed48; text-shadow: 0 2px 3px #b66605; }

/* For Med dollarGoldCoin */
.dollarGoldCoin.dollarGoldCoin-med { position:relative; border-width:3px; display:inline-block; box-shadow:0 3px 0 0 rgba(0,0,0,0.15); }
.dollarGoldCoin.dollarGoldCoin-med:before { font-size:12px; top:-5px; right:-2px; }
.dollarGoldCoin.dollarGoldCoin-med #gp-start, .circleBorder.medCoin #gp-start2 {   width:29px; height:29px; line-height:12px; }
.dollarGoldCoin.dollarGoldCoin-med .next-btn { border-width:3px;}
.dollarGoldCoin.dollarGoldCoin-med .dollarIcon { font-size:18px; line-height:24px; margin-left:-3px;}

/* For Small dollarGoldCoin */
.dollarGoldCoin.dollarGoldCoin-small { position:relative; border-width:3px; display:inline-block; box-shadow:0 3px 0 0 rgba(0,0,0,0.15); }
.dollarGoldCoin.dollarGoldCoin-small:before { font-size:10px; top:-5px; right:0}
.dollarGoldCoin.dollarGoldCoin-small #gp-start, .circleBorder.smallCoin #gp-start2 {   width:19px; height:19px; line-height:0 }
.dollarGoldCoin.dollarGoldCoin-small .next-btn { border-width:3px;}
.dollarGoldCoin.dollarGoldCoin-small .dollarIcon { font-size:10px; line-height:12px; margin-left:-2px;}

.rightTaskCount { float:right; color:#FFF; font-size:21px; line-height:45px; text-align:center; padding-left:10px; }
.rightTaskCount.smallCount { font-size:18px; }
.rightTaskCount.smallCount .rank { line-height:24px; display:inline-block; vertical-align:-3px;  }

/* For ribbon */

.ribbon { font-size: 16px !important;  position: relative;  background: #dc4a4a;  color: #fff;  text-align: center;  padding: 0.1em 2em;  margin: 10px 44px 6em; z-index:999  }
.ribbon strong { font-size:28px; }
.ribbon:before, .ribbon:after {  content: "";  position: absolute;  display: block;  bottom: -1.8em;  border: 1.3em solid #dc4a4a;  z-index: -1; }
.ribbon:before {  left: -2em;  border-right-width: 2.5em;  border-left-color: transparent; }
.ribbon:after {  right: -2em;  border-left-width: 2.5em;  border-right-color: transparent; }
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {  content: "";  position: absolute;  display: block;  border-style: solid;  border-color: #a53737 transparent transparent transparent;  bottom: -1em; }
.ribbon .ribbon-content:before {  left: 0;  border-width: 1em 0 0 1em; }
.ribbon .ribbon-content:after {  right: 0;  border-width: 1em 1em 0 0; }

/* For smileFace */
.smileFace { position:absolute; top:-10px; right:-5px; background-color:#c7c8ca; width:33px; height:32px; display:inline-block; border-radius:100%; box-shadow:-1px 3px 1px rgba(0,0,0,0.50);
background: radial-gradient( 50% 50%, circle, rgba(255,255,255,0.65), #dedede, #d6d6d6) ; }

.smileEyeShape { background-color:#ffffff;  display:inline-block; border-radius:100%; position:absolute;   }
.smileEyeShape:before { content:''; background:rgba(0,0,0,0.70); display:inline-block; position:absolute; }
.smileEyeShape1 { width:11px; height:11px; top:8px; left:4px; }
.smileEyeShape1:before { width:3px; height:3px; border-radius:100%; top:4px; left:7px; box-shadow:1px 1px 1px #8ec741;  }
.smileEyeShape2 { width:10px; height:13px; border-radius:35% 61%; top:4px; left:15px; }
.smileEyeShape2:before { width:3px; height:3px; border-radius:100%; top:6px; left:3px; box-shadow:-1px 1px 1px #8ec741;  }
.smile-shape { position:absolute; top:12px; left:10px; width:15px; height:15px; display:inline-block; background-color:transparent; border-radius:100%; box-shadow:0 1px 0 rgba(0,0,0,1.00);
transform: rotate(342deg) ;}


/* For bonusPoints */
.bonus { position:fixed; top:106px; left:11px;  display:block;  z-index:999; }
.bonusCircle { position:absolute; top:-10px; left:-8px; border-radius:100%; border:solid 5px #404042; width:63px; height:63px; display:block;
 animation: colorBg 5s infinite; overflow:hidden; z-index:999999; }
@keyframes colorBg {
	 0%   {background-color: #6b3193;}
    25%  {background-color: #1c99d5;}
    50%  {background-color: #019344;}
    75% {background-color: #d64429;}
	100% {background-color: #6b3193;}
}

.diamond{
 transform:rotate(135deg);
 background:

 /* 1st */
 linear-gradient(-45deg, rgba(0,0,0,0.25) 50%, rgba(255,255,255,0) 50%) no-repeat 25% 25%,
 linear-gradient(45deg, rgba(0,0,0,0.25) 50%, rgba(255,255,255,0) 50%) no-repeat 74% 25%,
 linear-gradient(225deg, rgba(0,0,0,0.25) 50%, rgba(255,255,255,0) 50%) no-repeat 25% 75%,
 linear-gradient(135deg, rgba(0,0,0,0.25) 50%, rgba(255,255,255,0) 50%) no-repeat 74% 75%,
 /* 2nd */
 linear-gradient(135deg, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0) 50%) no-repeat 22% 22%,
 linear-gradient(225deg, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0) 50%) no-repeat 77% 22%,
 linear-gradient(45deg, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0) 50%) no-repeat 22% 78%,
 linear-gradient(315deg, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0) 50%) no-repeat 77% 78%,
 /* 3rd */
 linear-gradient(200deg, rgba(0,0,0,0.5) 50%, rgba(255,255,255,0) 50%) no-repeat 32% -3%,
 linear-gradient(-200deg, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 50%) no-repeat 67% -3%,
 linear-gradient(15deg, rgba(0,0,0,0.5) 50%, rgba(255,255,255,0) 50%) no-repeat 67% 104%,
 linear-gradient(345deg, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 50%) no-repeat 32% 104%,
 /* 4th */
 linear-gradient(75deg, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 50%) no-repeat -2% 33%,
 linear-gradient(107deg, rgba(0,0,0,0.5) 50%, rgba(255,255,255,0) 50%) no-repeat -2% 68%,
 linear-gradient(260deg, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 50%) no-repeat 102% 69%,
 linear-gradient(280deg, rgba(0,0,0,0.5) 50%, rgba(255,255,255,0) 50%) no-repeat 102% 34%
 ;

 background-size: 33% 33%, 33% 33%, 33% 33%, 33% 33%,
				  33% 33%, 33% 33%, 33% 33%, 33% 33%,
				  25% 25%, 25% 25%, 25% 25%, 25% 25%,
				  25% 25%, 25% 25%, 25% 25%, 25% 25%
 ;

 }

.bonusCircle i { color:#ffffff; position:absolute;  }
.bonusCircle i.star1 { font-size:4px; top:25%; left:60%; animation:stars-a 1s  infinite; }
.bonusCircle i.star2 { font-size:5px; top:76%; left:20%; animation:stars-b 1s  infinite; }
.bonusCircle i.star3 { font-size:6px; top:50%; left:70%; animation:stars-c 1s  infinite; }
.bonusCircle i.star4 { font-size:7px; top:80%; left:53%; animation:stars-d 1s  infinite; }
.bonusCircle i.star5 { font-size:9px; top:34%; left:21%; animation:stars-e 1s  infinite; }
@keyframes stars-a {
	0%   { animation-duration: 0.60s; font-size:7px; transform: scale(0.700); }
    25%  { animation-duration: 0.60s; font-size:6px; top:15px; transform: scale(0.600); }
    50%  { animation-duration: 0.60s; font-size:8px; transform: scale(0.800); }
	100%  { animation-duration: 0.60s; font-size:0; transform: scale(0); }
}

@keyframes stars-b {
	0%   { font-size:3px; line-height:3px; top:65%; left:8px; transform: scale(0.300);  }
    25%  { font-size:5px; -moz-transform: scale(0.500);  }
    50%  { font-size:2px; left:10px; line-height:10px; transform: scale(0.200);  }
	100%  { font-size:4px; -moz-transform: scale(0.400);  }
}

@keyframes stars-c {
	0%   { animation-duration: 0.30s; font-size:5px; line-height:5px; top:45%; transform: scale(0.500); }
    25%  { animation-duration: 0.30s; opacity:0.8; font-size:0; transform: scale(0);  }
    50%  { animation-duration: 0.30s; font-size:9px; line-height:15px; transform: scale(0.900);  }
	100%  { animation-duration: 0.30s; font-size:0; transform: scale(0);  }
}

@keyframes stars-d {
	0%   { font-size:9px; transform: scale(0.900); }
    25%  { font-size:0; transform: scale(0); }
    50%  { font-size:4px; transform: scale(0.400); }
	100%  { font-size:0; transform: scale(0); }
}

@keyframes stars-e {
	0%   { font-size:8px; transform: scale(0.800);  }
    25%  { font-size:10px;transform: scale(1); }
    50%  { font-size:7px; transform: scale(0.700); }
	100%  { font-size:0; transform: scale(0); }
}

.bonusPoints { text-align:center; color:#ffffff; padding-top:54px; border:solid 5px #404042; width:46px; height:360px; border-radius:25px;
 background-image:linear-gradient(90deg, #b4dfd4, #368199);
}

.bonusPoints li { font-size:12pxpx; line-height:7px; margin-bottom:9px; height:20px; transition: all 0.1s ease-out; }
.bonusPoints li span { font-size:5px; line-height:12px; display:block;  }
.step1 .point-10, .step2 .point-9, .step3 .point-8, .step4 .point-7, .step5 .point-6, .step6 .point-5, .step7 .point-4 , .step8 .point-3 , .step9 .point-2 , .step10 .point-1 { font-size:18px; line-height:18px; }

.bonusPoints li:before { position:absolute; content:"\f0a3"; font:normal normal normal 5px/1 FontAwesome; color:#ebd07e; display:block; text-shadow:0 0 5px rgba(235,208,126,0.75); opacity:0.80; }

.bonusPoints li.point-1:before { top:51%; left:19%;  animation:staright-a 1s infinite;  font-size:6px; }
.bonusPoints li.point-2:before { top:20%; left:74%; animation:starLight-b 1s infinite; }
.bonusPoints li.point-3:before { top:60%; left:34%; animation:starLight-c 1s infinite; }
.bonusPoints li.point-4:before { top:37%; left:46%; animation:starLight-d 1s infinite; font-size:7px; }
.bonusPoints li.point-5:before { top:94%; left:59%; animation:starLight-e 1s infinite; }
.bonusPoints li.point-6:before { top:58%; left:61%; animation:starLight-f 1s infinite; }
.bonusPoints li.point-7:before { top:28%; left:17%; animation:starLight-g 1s infinite; }
.bonusPoints li.point-8:before { top:46%; left:30%; animation:starLight-h 1s infinite; font-size:6px; }
.bonusPoints li.point-9:before { top:73%; left:57%; animation:starLight-i 1s infinite; font-size:8px;  }
.bonusPoints li.point-10:before { top:85%; left:44%; animation:starLight-j 1s infinite; }


@keyframes staright-a {
	0%   { top:51%; left:19%; }
    25%  { top:55%; left:19%; }
    50%  { top:53%; left:24%; }
    100%  { top:51%; left:19%; }
}
@keyframes starLight-b {
	0%   { top:20%; left:74%; } 50%  { top:14%; left:74%; }	100%  { top:20%; left:74%; }
}
@keyframes starLight-c {
	0%   { top:60%; left:34%; } 50%  { top:68%; left:75%; } 100%  { top:60%; left:34%; }
}
@keyframes starLight-d {
	0%   { top:37%; left:46%; } 25%  { top:45%; left:70%; } 50%  { top:37%; left:46%; }	100%  { top:37%; left:46%; }
}
@keyframes starLight-e {
	0%   { top:94%; left:59%; } 25%  { top:91%; left:25%; } 50%  { font-size:0 }	100%  { top:94%; left:59%; }
}
@keyframes starLight-f {
	0%   { top:61%; left:58%; } 25%  { top:61%; left:71%; } 50%  { top:58%; left:58%; }	100%  { top:61%; left:58%; }
}
@keyframes starLight-g {
	0%   { top:28%; left:17%; } 25%  { top:24%; left:15%; } 50%  { top:28%; left:15%; }	100%  { top:28%; left:17%; }
}
@keyframes starLight-h {
	0%   { top:46%; left:30%; } 25%  { top:44%; left:80%; } 50%  { top:44%; left:18%; }	100%  { top:46%; left:30%; }
}
@keyframes starLight-i {
	0%   { top:73%; left:57%; } 25%  { top:68%; left:65%; } 50%  { top:65%; left:57%; }	100%  { top:73%; left:57%; }
}
@keyframes starLight-j {
	0%   { top:85%; left:44%; } 25%  { top:83%; left:20%; } 50%  { top:85%; left:18%; }	100%  { top:85%; left:44%; }
}

/* For bonusPoints */

/* For Modal */
.modal-header { border-bottom:solid 10px #34aadc;}
.newPopUpDesign .modalBox { width:985px; margin-top:5%   }
.newPopUpDesign .modal-content { background:#FFF; border-bottom-left-radius:6px; border-bottom-right-radius:6px; box-shadow:15px 15px 20px rgba(0,0,0,0.3); border:none }
.newPopUpDesign .modal-body, .newPopUpDesign .modal-footer { background:none; padding:43px 5% 47px 5%; border-top:solid 5px #2285af; }
.newPopUpDesign .modal-footer { padding:15px 5% 15px 5% }
.newPopUpDesign .modal-title { background:#fdb913; color:#ffffff; display:inline-block; position:relative; left:-15px; font-weight:600; text-shadow:0 2px 2px rgba(0,0,0,0.25); font-size:24px; padding:4px 41px 8px 48px  }
.newPopUpDesign .modal-header { background:#60caf4; border-top-left-radius:6px; border-top-right-radius:6px; position:relative; padding:23px 10px 32px 0 }
.newPopUpDesign button.close { opacity:1; filter: alpha(opacity=100); background-color:#df4d52; border:solid 3px #ffffff; display:inline-block;  position:absolute; right:-21px; top:-19px; border-radius:100%; height:44px; width:44px; color:#fff; font-size: 2em; line-height: 0.8em; }
.newPopUpDesign button.close:hover { opacity:0.7; filter: alpha(opacity=70); }
.closeArrow:before, .closeArrow:after { content:''; display:inline-block; background:#ffffff; width:22px; height:3px; position:absolute;  top:18px;  }
.closeArrow:before { transform: rotate(45deg) ; left:8px; }
.closeArrow:after { transform: rotate(130deg) ; right:8px;}

.menuList > li:not(li.col-md-*) { width:30%; float:left; margin-left:0%; margin-bottom:30px; }
.menuList > li:first-child { margin-left:0 }
.menuList li h3 { border:solid 1px #e3813b; border-radius:5px; color:#e3813b; font-size:24px; padding:10px 14px 12px 16px }
.menuList li h3 i { font-style:normal; }
.menuList li h3.menuTitle2 { border-color:#87b53e; color:#87b53e; }
.menuList li h3.menuTitle3 { border-color:#9767b6; color:#9767b6; }
.menuList li h3.menuTitle4 { border-color:#e24264; color:#e24264; }
.menuList > li ul li { border-bottom:solid 1px #e5e5e5; padding:9px 7px 9px 18px }
.menuList > li section { margin-bottom:42px; display:block }
.menuList > li ul li a { color:#231f20; font-size:20px; display:inline-block }
.menuList > li ul li a:hover { color:#e3813b; text-decoration:none }
.menuList > li ul.menuList2 li a:hover { color:#87b53e }
.menuList > li ul.menuList3 li a:hover { color:#9767b6 }
.menuList > li ul.menuList4 li a:hover { color:#e24264 }

.newPopUpDesign .modal-title:before { width:0; height:0; border-top: 15px solid #ac7f14; content:''; border-left: 15px solid transparent; position:absolute; bottom:-16px; left:0 }

.modal-body h3 { color: #6d6e70 }

/* End Icons and Shapes
========================================================================================*/


/* HEADING
========================================================================================*/
h3 { font-size:18px; line-height:24px; font-weight:normal; }
.box h3 { margin-top:-8px; }
.fixBox h3 span { font-size:17px; line-height:22px; display:block; }
.blueBox h3 { font-size:16px; line-height:21px; margin-top:-4px; margin-bottom:15px; }
h3.box-title { min-height:45px; }




/* END HEADING
========================================================================================*/


/* MIDDLE
========================================================================================*/
.middel { background-color:rgba(255,255,255,0.80); box-shadow:0 0 3px rgba(0,0,0,0.25); padding:50px; }
.rewardsBox { background-color:#FFFFFF; box-shadow:0 0 3px rgba(0,0,0,0.25); padding:20px; position:relative; overflow:hidden; }
.content { font-size:16px; line-height:18px;}

/* Start Change Date 19-01-2016 */
.taskBox { border-radius:10px; padding:17px 15px 15px; box-shadow:0 -3px 0 rgba(0,0,0,0.25) inset; margin-bottom:20px; display:block }
/* End Change Date 19-01-2016 */

.leftTaskCount { font-size:16px; font-weight:bold; line-height:20px; width:50%; text-align:center; float:left; border-right:solid 1px rgba(0,0,0,0.25); padding-right:10px;  }
.leftTaskCount strong { font-size:24px; line-height:28px;}
.taskBox strong { display:block; text-align:center }

.lightOrange-color { background-color:#fec342; }
.green-color { background-color:#a6d178; }
.blue-color { background-color:#2cade4; }

.nextActivity { font-size:14px; color:#ffffff; padding:20px 20px 13px; }
.nextActivity p {  margin-bottom:0; }
/* Start Add Css Date 19-01-2016 */
.nextActivity p a { color:#ffffff; }
/* End Add Css Date 19-01-2016 */
.nextActivity .rightTaskCount.smallCount { margin-top:-9px; }
.activitySelectMenu { background:#ffffff; border:0; width:100%; font-size:16px; height:30px; line-height:30px; border-radius:3px; display:inline-block; color:#000; position:relative; }
.activitySelectMenu select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:0; background:none; width:100%;  padding:0 6px; cursor:pointer }
.selectArrow { font-size:20px; position:absolute; top:5px; right:12px; }

.yeallowText { font-size:13px; color:#ffeda9; line-height:24px; padding-top:5px; display:inline-block; float:left }
/* Start Add Css Date 19-01-2016 */
.yeallowText:hover { color:#ffeda9; }
/* End Add Css Date 19-01-2016 */
.playNowImg { font-size:18px; width:100%; height:100px; border:solid 1px #56bde9; display:inline-block; background-color:#cccccc; border-radius:5px; text-align:center; position:relative }
.playNowImg .playIcon { display:block; font-size:3.5em; margin-top:5px; }

.leftSlide { font-size:17px; line-height:16px; float:left; display:inline-block; margin-right:10px; font-weight:bold; width:21%; }
.slidePagination { padding-top:9px;  }
.slidePagination li { float:left; margin:0 2px;}
.slidePagination li a { width:17px; height:17px; border-radius:100%; display:inline-block; background-color:#cdf9f9; box-shadow:-3px 3px 3px 0 rgba(0,0,0,0.25) inset }
.slidePagination li a:hover, .slidePagination li.active a { background-color:#38e8e9; }

.updateTitle { font-size:22px; position:relative; margin-bottom:35px; }
.updateTitle:before { content:""; border-bottom:solid 2px #231f20; width:74%; display:block; position:absolute; top:11px; right:0; }

.box { margin-bottom:20px; }
.box a { padding:20px; display:block; color:#000000; position:relative }
.forwardArrow { color:#ffffff; position:absolute; bottom:20px; right:15px; }
.whiteBox { background-color:#fff;}
.whiteBox:hover { background-color:#fff;}
.yeallowBox { background-color:#f4d936;}
.yeallowBox:hover { background-color:#dcc329;}
.orangeBox { background-color:#ffa726; }
.orangeBox:hover { background-color:#e48e10; }
.blueBox { background-color:#01AFD9; }
.blueBox:hover { background-color:##018DB7; }
.box a time { font-size:14px; line-height:16px; color:rgba(255,255,255,0.6); }

.leftImg { float:left; margin-right:20px;}
.orange-color.box { color:#ffffff; }
.orangeBox a { padding:20px 0;}
.leftData .rightTaskCount { display:inline-block; text-align:right; }
.leftData { color:#ffffff; padding:0 25px 0 0 }
.leftDataText { margin-bottom:9px; }
.frankyImg img { width:100%; }

.fixBox { min-height:130px;}
.fixBox span { font-size:19px; }

.chanlangeData { position:fixed; bottom:20px; right:10px; z-index:999 }
.chanlangeBox { background-color:#7aebff; color:#231f20; width:140px; text-align:center; font-size:18px; line-height:33px; border-radius:12px; padding:14px 10px; position:absolute; top:30px; left:-62% }
.right-arrow { width: 0; height: 0;	border-bottom: 20px solid #7aebff;	border-right: 28px solid transparent; position:absolute; bottom:11px; right:-28px }

.rewardWorld-img { position:absolute; bottom:0; left:0; }
.reward-world { background-color:#ffa726; color:#ffffff; font-size:18px; line-height:22px; display:inline-block; text-align:center; padding:21px 15px 15px; border-radius:100% 100% 100% 100%;
box-shadow:3px 3px 1px rgba(0,0,0,0.15); z-index:10; position:absolute; right:-69%; top:0 }
.left-arrow { font-size:3em; color:#ffa726; position:absolute; top:28px; left:-13px; z-index:-1; transform: rotate(38deg);  }
.doggyImg { position:absolute; bottom:0; right:30% }
.dollImg { position:absolute; bottom:0; right:26px }

.skyBg { width:100%; height:145px; background:#59ccfa; position:absolute; top:0; right:0; left:0;
background: linear-gradient( 180deg, #5ac8fa, #52eefc) ;  }

.skyMiddel { position:relative; z-index:0;  min-height:389px; overflow:hidden; z-index:1 }

.skyCloud { overflow:hidden; height:70px; position:absolute; left:0; right:0; top:75%; z-index:1  }
.skyShape { background-color:#ffffff; position:absolute; display:inline-block;  }
.skyShape1 { width:15%; height:76px; border-radius:45%; top:30%; left:-6%; }
.skyShape2 { width:24%; height:100px; border-radius:45%; top:33%; left:7%;  }
.skyShape3 { width:40%; height:188px; border-radius:100%; top:0; left:20%; }
.skyShape4 { width:33%; height:178px; border-radius:100%; top:30%; left:45%; }
.skyShape5 { width:14%; height:57px; border-radius:100%; top:30%; left:68%; }
.skyShape6 { width:49%; height:244px; border-radius:100%; top:10%; right:-20%; }

.skyCloud2 { z-index:0; height:100px; overflow:hidden; position:absolute; left:0; right:0; top:50%; }
.skyCloud2 .skyShape { background:#86f2fd; }
.skyCloud2 .skyShape1 { width:30%; height:140px; border-radius:100%; top:0; left:-18%; }
.skyCloud2 .skyShape2 { width:18%; height:84px; border-radius:100%; top:36%; left:10%; }
.skyCloud2 .skyShape3 { width:24%; height:103px; border-radius:100%; top:20%; left:23%;}
.skyCloud2 .skyShape4 { width:22%; height:86px; border-radius:100%; top:30%; left:45%; }
.skyCloud2 .skyShape5 { width:19%; height:126px; border-radius:100%; top:42%; left:63%;  }
.skyCloud2 .skyShape6 { width:25%; height:126px; border-radius:100%; top:42%; left:71%}
.skyCloud2 .skyShape7 { width:30%; height:126px; border-radius:100%; top:10%; right:-15% }

.glebeShape { display:inline-block; position:absolute; left:0; right:0; bottom:0; overflow:hidden; height:90px; z-index:0 }
.glebeShape span{background-color:#c0e896; width:120%; height:160px; display:block ; position:absolute; left:-20%; top:1%; border-radius:100%; z-index:2}
.glebeShape .span1{ z-index:1; background:#a6d178; width:50%; left:auto; right:-20%; top:1%}
.glebeShape .span2{ z-index:0; background:#87af5b; width:35%; left:auto;  right:3%; top:0;}


/*----- Strat Change Date 10DEC2015 -----*/
.row.margineNone { margin:0; }

.dataList { border-top:solid 1px #d2d2d2; padding:25px 0 0; }
.dataList > li { display:inline; position:relative }

.card { box-shadow:0 0 5px rgba(0,0,0,0.35); color:#231f20; border-radius:5px; width:100%; height:252px; padding:14px 20px; float:left; position:relative; }
.card-title {

  font-size: 1.2em;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 1.3em;
  max-height: calc(2.6em + 15px);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 15px 0 6px;
}
.deck .textEllipse {
  font-size: 1.1em;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 1.3em;
  height: 3.9em;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  padding: 0px 0 6px;
}

.card.shadow:before { content:'';  display:inline-block; background-color:#fe9148; height:10px; position:absolute; border-radius:0 0 5px 5px; box-shadow:0 1px 3px rgba(0,0,0,0.40); width:240px; bottom:-10px; left:10px; z-index:1 }
.card.shadow:after  { content:'';  display:inline-block; background-color:#fe9148; height:10px; position:absolute; border-radius:0 0 5px 5px; box-shadow:0 1px 3px rgba(0,0,0,0.40); width:220px; bottom:-20px; left:20px; }
.outcome-card-group .card.shadow:before, .outcome-card-group .card.shadow:after { background-color:#FFFFFF; }

.card-space { margin:0 13px 30px; width:260px; float:left; clear:right; position:relative; }
.card-space.deck-space{ margin-bottom:56px;}
.outcomes { background-color:#15a1dc; color:#ffffff; display:block; position:absolute; bottom:0; left:0; right:0; padding:24px 20px 20px; border-radius:0 0 5px 5px; }
.orange .outcomes { background-color:#ff8c3e; }

.topCard { border:solid 1px #e0e0e0; color:#FFFFFF; min-height:115px; width:100%; display:inline-block; padding:15px; box-shadow:0 1px 5px rgba(0, 0, 0, 0.35); margin-bottom:26px; }
.topCard img { height:90px; width:auto}

.content { line-height:28px; }
.buttonList { margin-bottom:30px; }
.buttonList li { margin:0 15px 20px; }

.card.cardGame, .cardPrintable, .cardVideo { background-color:#ffffff; color:#333333; padding:0; height:278px; }
.card img, .cardPrintable img, .cardVideo img { width:100%; max-height:100%; }
.card.cardGame { border-color:#9eab3a; }
.cardPrintable { border-color:#9467bd; }
.cardVideo { border-color:#15a1dc; }
.cardGame .outcomes, .cardPrintable .outcomes, .cardVideo .outcomes { background-color: #f4f4f4; padding:20px 20px }
.cardGame .outcomes .fa-smile-o, .cardPrintable .outcomes .fa-smile-o, .cardVideo .outcomes .fa-smile-o { color:#221e1f; }

.card-top { height:118px; position:relative; padding:0 35px; }
.card-top .smiley { position:absolute; bottom:0; left:0; width:100%; background:rgba(255, 255, 255, 0.75); padding:0.25em 0.5em; border-top:solid transparent 4px; }
.card-type { background-color:#8ab234; color: white;  width: 45%;  box-sizing: border-box;  margin: 0;  position: absolute;  bottom: 0;  right: 35px;  padding-left: 1.5em;  border-radius: 30px 0 0 30px; }
.cardPrintable .card-type {  background-color: #9467bd;}
.cardVideo .card-type {  background-color: #15a1dc;}

.textEllipse { font-size:19px; font-weight:bold; line-height:32px; margin-left:3px; }
.small { font-size:14px; font-weight:600; line-height:24px; display:block; margin-bottom:13px; margin-left:3px; }
.ellip { display: block; height: 100%; }
.ellip-line { display: inline-block; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; max-width: 100%; }
.ellip, .ellip-line { position: relative; overflow: hidden; }
/*----- End Change Date 10DEC2015 -----*/

/* Start Change Date 19-01-2016 */
.menuList > li h3 { margin-top:0}
.menuList > li ul li a { padding:0}
/* End Change Date 19-01-2016 */

.dollarGoldCoin.top-dollarGoldCoin:hover, .starIcon:hover, .soundLink:hover, nav ul li a:hover, .coins .roundIcon:hover { transform: scale(1.1); }

/* transition
===============================================*/
.dollarGoldCoin.top-dollarGoldCoin, .starIcon, nav ul li a, .soundLink, .coins .roundIcon { transition: all 0.4s;  }


a.red { background:red !important}

/*Added New class On 23 January*/

.clearfBox:after {  content: "."; display:block; font-size:0; line-height:0; height:0; clear:both; visibility:hidden; }
.clearfBox { display:inline-block; }
* html .clearfBox { height:1%; }
.clearfBox { display:block; }


.page-header { color:#000;}
.page-header h2{ font-weight:700;}
.page-header .fa{ vertical-align:middle}

/* padding Class
==================================*/

.p-t-0 { padding-top:0;}
.m-t-0 { margin-top:0}

/*Btn
=======*/
.btn-blue{ background:#3abbf2; border-color:#3abbf2;  box-shadow:0 3px 0 #319fce;}

.printButton { background:#6ebb14; border-bottom:solid 3px #5e9f11; color:#FFF; font-size:28px; line-height:32px; float:right; padding:11px 42px 9px 43px; margin-right:5%; margin-left:5%; }
.printButton:hover { color:#FFF; background:#64ab11;}

/* Color casses
======================*/
.fa{ vertical-align:middle;}
.text-orange{ color:#f79017;}
.text-green{ color:#9fd03e;}
.text-cyan{ color:cyan;}
.faiconGreen{background-color: #8ab234;color: white; border-radius: 30px;padding:10px;}
.faiconpurple{background-color: #9467bd;color: white; border-radius: 30px;padding:10px;}

/* Backgound casses
======================*/
.bg-green{}
.bg-White{ background-color:#FFF;}
.container_index{background-color:#FFF;}


/*Game page*/
.gamesTitle{ font-size:28px; padding:9px 16px 6px 16px; margin-bottom:40px; border-radius:5px; color:#FFF; background: #accb66; /* Old browsers */
background: -moz-linear-gradient(top,  #accb66 0%, #99b852 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #accb66 0%,#99b852 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #accb66 0%,#99b852 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#accb66', endColorstr='#99b852',GradientType=0 ); /* IE6-9 */ line-height:1.1em}
.gamesTitle .fa{ font-weight:normal;}

.yellowTitle{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffc61f+0,eab40c+100 */
background: #ffc61f; /* Old browsers */
background: -moz-linear-gradient(top,  #ffc61f 0%, #eab40c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffc61f 0%,#eab40c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffc61f 0%,#eab40c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc61f', endColorstr='#eab40c',GradientType=0 ); /* IE6-9 */
}


.galleryContainer{ position:relative;}
.thumbnail img{ width:100%; border-radius:5px;}
.thumbnail  h3{ margin:0; padding:0; font-size:16px;}
.thumbnail  h3 a{ color:#000; text-transform:uppercase;}
.thumbnail .Resettonone{ text-align:center; padding-left:0;}


/* alien Page css
=============================*/
.petAlianDetails { position:relative; margin-bottom:32px }
.petAlianContainer { position:absolute; left:38%; top:-5px; background:#f0af1f; font-size:21px; color:#FFF; text-shadow:0 1px 0 rgba(0,0,0,0.2); text-align:center; line-height:29px; width:62%; box-sizing:border-box; padding:48px 7.3% 21px; border-radius:100%; box-shadow:inset -30px -30px 79px rgba(0,0,0,0.05);  }
.petAlianContainer p { margin-bottom:31px }
.boxArrow { background:url(https://static.studyladder.com.au/cdn/site/f9/2a93b500ae96.png) no-repeat 0 0; width:110px; height:140px; display:block; position:absolute; left:-97px; top:123px;  }


.roundedList { float:right; margin:-4px 1% 0 0 }
.roundedList li { background:url(https://static.studyladder.com.au/cdn/site/12/571aeab43c13.png) no-repeat -545px -278px; width:51px; height:55px; float:left; display:inline-block; margin-left:6px; }
.roundedList li:first-child { margin-left:0 }
.roundedList li.active { background-position:-545px -220px }
.iconEnergy { background-position:-545px -339px; width:34px; height:53px;  margin-right:6px !important  }
.enerygyTitle { float:right; font-size:18px; line-height:20px; width:130px; text-transform:uppercase; padding-right:1%;}


.openBooxContainer { position:relative; display:inline-block; }
.leftStoryBook, .rightStoryBook { width:51.5%; text-align:center; position:absolute; left:0; top:7.5% }
.rightStoryBook { left:auto; right:4% }
.storyTitle { color:#6e696a; margin-bottom:7px; font-size:20px; text-align:center; line-height:23px }
.storyTitle span { display:block; font-size:18px; color:#231f20 }
.photoFrame { display:inline-block; position:relative; margin-bottom:10px; }

.jpFrame { display:inline-block; position:relative; margin-bottom:10px; }
.frameImg { position:absolute; left:10%; top:7.4%; right:9%  }
.frameImg2 { position:absolute;  bottom: 8.6%; left:10.9%; top:8.6%; right:9%  }
.frameImg3 { position:absolute;  bottom: 8.6%; left:35.9%; top:110%; right:9%  }
.frameImg > img { width:100% }
.frameImg > videoDiv { width:100%; height:247px; }
.frameImg3 > jp-gui { width:100%;}
.frameImg figcaption { position:absolute; left:0; top:25%; right:0; color:#FFF; font-size:18px; line-height:30px; text-shadow:0 1px 0 rgba(0,0,0,0.15); font-weight:600 }
.frameImg2 > img { width:100% }
.frameImg2 figcaption { position:absolute; left:0; top:25%; right:0; color:#FFF; font-size:18px; line-height:30px; text-shadow:0 1px 0 rgba(0,0,0,0.15); font-weight:600 }

.numberLeft, .numberRight { position:absolute; bottom:-19%; font-size:12px; left:0; border-right:solid 1px #bfbdbd; color:#6e696a; display:inline-block; font-weight:bold; line-height:10px;
padding-right:6px; font-family:Arial, Helvetica, sans-serif  }
.numberRight { left:auto; right:0;  border-right:none; border-left:solid 1px #bfbdbd; padding-left:6px; }
.photoFrame .btn-block.text-center { position:absolute;  }


/*backgrounds*/
.unlockBg{ position:absolute; left:0; top:0; right:0; bottom:0; z-index:99; border-radius:0; background:rgba(0,0,0,0.5); text-align:center; line-height:100%; color:#FFF;}
.unlockBg .fa{ position:absolute; top:30%;}

.heading-congratulation b{ display:block; font-weight:normal; padding-top:10px;}

.table-responsive{ border:0;}

.table{ font-size:16px; line-height:24px; color:#231f20}
.table th{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#49c0f3+0,36addf+100 */
background: #49c0f3; /* Old browsers */
background: -moz-linear-gradient(top,  #49c0f3 0%, #36addf 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #49c0f3 0%,#36addf 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #49c0f3 0%,#36addf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f3', endColorstr='#36addf',GradientType=0 ); /* IE6-9 */ 
color:#FFF; 
font-size:18px; 
line-height:30px; 
font-weight:400;
}

/*certificates*/
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td{ padding-left:30px;}
.table tr th.pointsRaduis{border-bottom-right-radius:5px; border-top-right-radius:5px;}

.iconNotPrinted, .iconPrinted, .iconNotGained{ width:16px; height:16px; display:inline-block; vertical-align:middle; background:#76d33d; border-radius:50%;}
.iconPrinted{ background:#d369e6}
.iconNotGained{ background:#918f92}

.printDetail { float:right; font-size:16px; line-height:20px; color:#231f20; font-style:italic; margin-bottom:19px;}
.printDetail li { display:inline; margin-left:24px;}

section.congratulation { border-bottom:solid 1px #d3d2d2; display:block; padding-bottom:40px; margin-bottom:17px;}
.congratulation h2 { text-align:center; padding-bottom:16px; margin-bottom:52px;}
.congratulation h2 b { font-weight:normal; display:block; padding-top:6px; color:#231f20;}
.congratulation img { width:100%;}
.carousel-control.right, .carousel-control.left { background:none;}
.congratulation h3{ color:#000;}
.congratulation .carousel-inner h2{ font-size:24px; margin-top:0;}

.carousel { width:90%; left:5%; margin-bottom:40px;}
.carousel-control { bottom:inherit; opacity:1; top:50%;}
.glyphicon-chevron-right:before, .glyphicon-chevron-left:before { content:"";}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next { width:32px; height:32px; margin:-16px 0 0;}
.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right { right:-50px;}
.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left { left:-50px;}
.glyphicon-chevron-right, .glyphicon-chevron-left {  display:block; color:#000;}
.glyphicon-chevron-left { }

.nameoncert { right:22%;  text-align:right; width:auto; top:41%; position: absolute;  }
.nameoncert2 { left:20%;  text-align:right; width:auto; top:45%; position: absolute;  }
.nameoncert3 {right:25%;  text-align:right; width:auto; top:48%; position: absolute;  }
.nameoncert4 { left:23%;  text-align:right; width:auto; top:50%; position: absolute;  }
.nameoncert5 { right:45%;  text-align:right; width:auto; top:81%; position: absolute;  }
.nameoncert6 { right:47.5%;  text-align:right; width:auto; top:75%; position: absolute;  }


/*course Pages*/

.previousMenuBox { background:#3abbf2 }
.nextMenuBox { background:#76d33d }
.coursesList { float:right; width:39% }
.coursesList .col-xs-6 { padding:0; width:47.6%; margin-left:0; text-align:center; float:right }
.coursesList .col-xs-6:first-child { margin-left:3.5% }
.coursesList .col-xs-6 .nextMenuBox, .coursesList .col-xs-6 .previousMenuBox { padding:14px; border-radius:5px; }
.coursesList .col-xs-6 .previousMenuBox div, .coursesList .col-xs-6 .nextMenuBox div { border-radius:4px; border:solid 1px #61c9f5;  }
.coursesList .col-xs-6 .nextMenuBox div { border-color:#91dc64; }
.coursesList .col-xs-6 img { border-radius:4px;  }
.coursesList .col-xs-6 a div { position:relative }
.coursesList .col-xs-6 a span { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.3); border-radius:4px; }
.smilySmile { position:absolute; top:-6px; right:-6px; z-index:99 }
.nextCourse, .prevCourse { width:64px; height:66px; position:absolute; left:50%; margin-left:-32px; margin-top:-33px; top:50%; z-index:99; color:#FFF; }

.selectpicker.btn-default { background:#FFF !important; box-shadow:inset 0 2px 2px rgba(0,0,0,0.08); height:56px; color:#231f20; font-size:24px }
.bootstrap-select .dropdown-menu.open { top:52px }
.bootstrap-select.form-control { height:auto; margin-bottom:-1px !important }
.btn-group.open .dropdown-toggle { box-shadow:none }
.bootstrap-select .btn:focus { outline:none !important }
.bootstrap-select.btn-group .btn .caret { width:18px; height:10px; padding:0; border:none; right:18px; margin-top:-4px;}
.bootstrap-select.btn-group .btn .caret:before{ content:"\f078"; font-family:FontAwesome; line-height:10px; position:relative;  display:block}
.courseList .col-xs-7 { width:61%; padding-right:10px }
.courseList { border-bottom:solid 1px #d3d2d2; padding-bottom:8px; margin-bottom:21px }

.leavlLists { background:#f2f1f1; display:block; border-radius:5px }
.levalTitle { float:left; font-size:24px; color:#231f20; padding:11px 0 0 18px }
.colorList { float:right; margin-bottom:0 }
.colorList li { float:left; padding:2px }
.colorList li a { padding:15px 10px 12px 10px; display:inline-block }
.colorList li span { width:24px; height:24px; display:inline-block; background:#FFF; border-radius:100%; padding:1px  }
.colorList li:hover, .colorList li.active { padding:0; border: dotted 2px #808080; }
.colorList li:hover span, .colorList li.active span { padding:0; border:solid 1px #a8a7a7 }
.colorList li.leval2 span { background:#ffcb05 }
.colorList li.leval2:hover span, .colorList li.leval2.active span { padding:0; border-color:#e9ba07 }
.colorList li.leval3 span { background:#e11a2c }
.colorList li.leval3:hover span, .colorList li.leval4.active span { padding:0; border-color:#c51323 }
.colorList li.leval4 span { background:#FFA500 }
.colorList li.leval5 span { background:#3abbf2 }
.colorList li.leval5:hover span, .colorList li.leval6.active span { padding:0; border-color:#28aae2 }
.colorList li.leval6 span { background:#76d33d }
.colorList li.leval6:hover span, .colorList li.leval7.active span { padding:0; border-color:#67c32f }
.colorList li.leval7 span { background:#a77436 }
.colorList li.leval7:hover span, .colorList li.leval8.active span { padding:0; border-color:#9a6321 }
.colorList li.leval8 span { background:#000000 }
.colorList li.leval8:hover span, .colorList li.leval9.active span { padding:0; border-color:#292929 }
.colorList li.leval9 span { background:black url(https://static.studyladder.com.au/cdn/site/99/5fae3dfee4b7.png) repeat-y 50% 0 }
.colorList li.leval9:hover span, .colorList li.leval9.active span { padding:0; border-color:#aeaeae }
.flash-smile{ position:absolute;left:0px;top:0px;width:30px !important; z-index: 1000; }
.smile-icon {position: absolute; top: 0; right:0; width:30px !important; z-index: 1000; }
.next-prev-box{ height:94px;  overflow: hidden; }





.smilyDetailsList .panel-default > .panel-heading { border:solid 1px #d3d2d2; border-radius:5px  }
.smilyDetailsList .panel-default > .panel-heading:hover { background:#daf9fd; border-color:#b4cdd0 }
.smilyDetailsList .panel-default > .panel-heading:hover a { text-decoration:none }
.smilyDetailsList .panel .panel-title a { padding:14px 10px 14px 16px }
.smilyDetailsList .panel .panel-title a:focus { text-decoration:none }
.smilyDetailsList .panel .panel-title { font-size:24px; }

.smilyDetailsList .panel {margin-bottom:14px; border:none; border-top:none; border-radius:0; background:#FFF; box-shadow:none }
.smilyDetailsList .panel:first-child { border-top:solid 1px #DDDDDD; }
.smilyDetailsList .panel-body, .smilyDetailsList .panel:first-child { border:none !important; }
.smilyDetailsList .panel + .panel { margin-top:0 }
.smilyDetailsList .panel-default > .panel-heading { background:none; padding:0; border-radius:0 }
.smilyDetailsList .panel .panel-title { font-size:24px; }
.smilyDetailsList .panel .panel-title a { display:block; padding:10px 10px; position:relative }
.smilyDetailsList .panel .panel-title a:hover, .smilyDetailsList .panel .panel-title a:focus { outline:none }


.smilyList { position:absolute; left:auto; right:0; top:0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fefefe+0,eaeaea+100 */
background: #fefefe; /* Old browsers */
background: -moz-linear-gradient(top,  #fefefe 0%, #eaeaea 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fefefe 0%,#eaeaea 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fefefe 0%,#eaeaea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */

}
.smilyList li { float:right; position:relative; font-weight:bold; padding:11px 14px 12px 17px; height:auto; min-width:111px; text-align:left; border-left:solid 1px #dfdfdf; border-right:solid 1px #FFF  }
.smilyDetailsList .panel-default > .panel-heading:hover .smilyList li { border-left:solid 1px #c1dde0; border-right:solid 1px #daf9fd }
.smilyList li.lastChild {  padding:11px 14px 11px 6px; min-width:101px; border-right:none; border-left-color:#14dae1 }
.smilyList li.lastChild {  padding:11px 14px 0 6px; min-width:101px; border-right:none; border-left-color:#14dae1 }

.smilyList li .sprite { width:28px; height:28px; margin-left:5px; background:url(https://static.studyladder.com.au/cdn/site/12/571aeab43c13.png) no-repeat 0 0 }
.smilyList li strong { font-weight:bold; float:right; position:relative; top:3px }
.smilyList li .sprite { margin-right:12px; float:left }
.smilyList li .iconSmilyFive, .smilySmile { background-position:-595px 0; width:33px; height:32px }
.smilyList li .iconSmilyFour { background-position:-595px -35px; width:33px; height:32px }
.smilyList li .iconSmilyThree { background-position:-595px -70px; width:33px; height:32px }
.smilyList li .iconSmilyTwo { background-position:-595px -105px; width:33px; height:32px }
.smilyList li .iconSmilyOne { background-position:-547px -407px; width:54px; height:38px; position:relative; top:-3px; left:-3px }

.iconSmilyOne { background-position:-156px -254px; width:28px; height:28px; }
.iconSmilyTwo { background-position:-187px -254px; width:28px; height:28px; }
.iconSmilyThree { background-position:-156px -285px; width:28px; height:28px; }
.iconSmilyFour { background-position:-187px -285px; width:28px; height:28px; }
.iconSmilyFive { background-position:-156px -316px; width:28px; height:28px; }
.iconSmallSmily { background-position:-187px -316px; width:20px; height:20px; margin-top:8px; }
.smilyDetailsList .panel .panel-title a:hover .smilyList li, .smilyDetailsList .panel .panel-title a:focus .smilyList li { color:#000 }

.smilybg1 { background:#93c8ce; }
.smilybg2 { background:#b5d8dc; }
.smilybg3 { background:#c9e2e7; }
.smilybg4 { background:#d4e9ec; }
.smilybg5 { background:#e8f2f4; }

.subAccordion, .subAccordion2 { margin-bottom:0 }
.subAccordion .panel-default > .panel-heading { background:#DDDDDD }
.subAccordion .panel .panel-title a { padding:8px; font-size:13px; }
.subAccordion .panel-body { background:#DDDDDD; color:#000 }
.subAccordion .panel .panel-title a:hover, .subAccordion .panel .panel-title a:focus { background:#DDDDDD; color:#000; text-decoration:none; outline:none }



.smallSmiley { position:absolute; right:5px; top:1px  }
.smallSmiley li { float:right; margin-left:5px; }

.subAccordion2 .panel-default > .panel-heading { background:#cccccc }
.subAccordion2 .panel-body { background:#cccccc; }
.subAccordion2 .panel .panel-title a:hover, .subAccordion2 .panel .panel-title a:focus { background:#cccccc; color:#000; text-decoration:none; outline:none }

.sma{ position:absolute;top:2px;right:2px; z-index: 888;}
.numberGameList:after {  content: "."; display:block; font-size:0; line-height:0; height:0; clear:both; visibility:hidden; }
.numberGameList { display:inline-block; }
* html .numberGameList { height:1%; }
.numberGameList { display:block; }
.numberGameList li { float:left; margin-left:20px; width:150px}
.numberGameList li:first-child { margin-left:0 }
.activity-image { max-width:100%; }
.numberGameList li a { position:relative; display:block; color:#000 }
.numberGameList li a .iconSmilyFive { position:absolute; right:5px; top:5px }



.smilyList li { min-width:85px; padding:7px 10px; text-align:right }
.subAccordion .panel { border-top:solid 1px #FFF }
.flashSmallIcon { width:30px; position:absolute; left:2px; top:2px; }

.activity_thumb{height: 94px; overflow: hidden;}

/*FAQ
===========================*/
.accordianContain { font-size:20px; line-height:26px; color:#231f20; margin-bottom:49px; }
.accordianContain .panel-body { padding-top:13px; padding-bottom:5px;}
.accordianContain .panel-body p { margin-bottom:24px; line-height:28px;}
.accordianContain .panel-default > .panel-heading { background:none; }
.accordianContain .panel-default { border:0; box-shadow:none; border-bottom:solid 1px #ececec;}
.accordianContain .panel-heading + .panel-collapse .panel-body { border:none; }
.accordianContain .panel-heading { padding:0 15px 0; }
.accordianContain .panel-default { padding:17px 0 20px; }
.accordianContain .panel-title > a.collapsed { color:#979394; text-decoration:none; font-weight:normal; }
.accordianContain .panel-title > a { font-weight:bold; color:#231f20; text-decoration:none; font-size:20px;}
.accordianContain .panel-title > a:hover { color:#231f20; text-decoration:underline; }
.accordianContain .panel { padding-left:41px; }

.containAccordian h3.gamesTitle {
background: #3fa9d9; /* Old browsers */
background: -moz-linear-gradient(top,  #3fa9d9 0%, #2c96c5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #3fa9d9 0%,#2c96c5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #3fa9d9 0%,#2c96c5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3fa9d9', endColorstr='#2c96c5',GradientType=0 ); /* IE6-9 */
 margin-bottom:15px; padding:9px 16px 8px; }

.containAccordian .panel-title > a.collapsed .iconPlus { background:none;  }
.containAccordian .panel-title > a.collapsed .iconPlus:before{ content:"\f055"}
.containAccordian .panel-title > a .iconPlus:before { content:"\f056"; margin-left:-25px; color:#2fa2d6; font-family:FontAwesome}

.containAccordian2 h3.gamesTitle { background: #accb66; /* Old browsers */
background: -moz-linear-gradient(top,  #accb66 0%, #99b852 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #accb66 0%,#99b852 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #accb66 0%,#99b852 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#accb66', endColorstr='#99b852',GradientType=0 );  }
.containAccordian2 .panel-title > a .iconPlus:before { color:#98b852}

.containAccordian3 h3.gamesTitle {background: #1b5ea9; /* Old browsers */
background: -moz-linear-gradient(top,  #1b5ea9 0%, #084a96 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #1b5ea9 0%,#084a96 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #1b5ea9 0%,#084a96 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b5ea9', endColorstr='#084a96',GradientType=0 ); /* IE6-9 */
}
.containAccordian3 .panel-title > a .iconPlus:before { color:#084a96 }

.containAccordian4 h3.gamesTitle { background: #f79829; /* Old browsers */
background: -moz-linear-gradient(top,  #f79829 0%, #e48516 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f79829 0%,#e48516 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f79829 0%,#e48516 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79829', endColorstr='#e48516',GradientType=0 ); /* IE6-9 */
}
.containAccordian4 .panel-title > a .iconPlus:before { color:#f79829; }

.containAccordian5 h3.gamesTitle {background: #df5858; /* Old browsers */
background: -moz-linear-gradient(top,  #df5858 0%, #cb4545 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #df5858 0%,#cb4545 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #df5858 0%,#cb4545 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df5858', endColorstr='#cb4545',GradientType=0 ); /* IE6-9 */
}
.containAccordian5 .panel-title > a .iconPlus:before { color:#df5858; }

.containAccordian6 h3.gamesTitle {background: #ffc620; /* Old browsers */
background: -moz-linear-gradient(top,  #ffc620 0%, #ebb30d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffc620 0%,#ebb30d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffc620 0%,#ebb30d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc620', endColorstr='#ebb30d',GradientType=0 ); /* IE6-9 */
}
.containAccordian6 .panel-title > a .iconPlus:before { color:#ffc620; }

.backToTop {position:fixed; bottom:15.5%; width:40px; height:48px; display:block;  right:20px;}

/* Overview*/
.advertiseImage {  border:solid 1px #f0f0f0 }
.advertiseImage, .advertiseImage img { border-radius:10px; display:block; width:100%; }
.advertiseImage:hover, .advertiseImage:focus { box-shadow:0 0 5px rgba(0,0,0,0.1); outline:none }
.petGifImage { position:absolute; top:6px; right:10px; width:135px; height:137px; overflow:hidden; background:#fff; -moz-border-radius: 10px; border-radius: 10px; }
.petGifImage figure img { width:140px; }
.blinkingEyes { position:absolute; top:3px; left:3px }
.blinkingEyes .eye { width:130px; }
.avatarGifImage figure img { width:125px; }
.avatarGifImage .blinkingEyes .eye { width:120px; }
.alienBoxImg { border:solid 1px #000 }
.alienBoxImg, .alienBoxImg figure img { width:120px; }
.alienTextContainer { padding:30px 0 0 0; width:95px; text-align:center; }

.galleryContainer > a.redRibin { position:absolute; left:-11px; top:16px; background:#dc4a4a; color:#FFF; font-size:15px; z-index:99; padding:3px 14px 5px 15px; text-shadow:0 1px 0 rgba(0,0,0,0.15); border-radius:0; margin:0; overflow:inherit }
.galleryContainer > a.redRibin span { display:block; position:absolute; bottom:-10px; left:0px; top:auto;  width:0; height:0; border:6px solid #dc4a4a; border-left: 5px solid transparent;
	border-bottom: 5px solid transparent;

	border-right:5px solid #dc4a4a;    }

/*End New class On 23 January*/

.footer-navigation { margin:0; padding:0 }
.footer-navigation li { list-style:none; float:left; margin-left:5% }
.footer-navigation li:first-child { margin-left:0 }
.footer-navigation li a { font-size:12px; color:#58585B }
.footer-navigation li a:focus { outline:none }
.frameImg .videoDiv { width:100%; height:242px; }
.left-button{ margin-left: 72px; margin-top: 20px;}
.sm.tiny { height: 20px; width: 20px; }
.sm { height: 27px; width: 27px; }
.profile-pop-up-section { height:200px; padding-left:5px; padding-top:40px; }
.pop-up-image {width:125px;}
.avatar-body { width:125px; margin-top:-40px; }
.pet-body { width:140px; }
.avatar-eyes { width:120px; }
.avatar-eyes-div { top:-37px; left:17px; position: absolute;}
.pet-eye-div { left: 15px; top: 0px; position: absolute;}
.pet-eyes { width:140px; }
.pet-glasses{ width:140px; }
.pet-glasses-div{ left:12px; top:0px; position: absolute; z-index:9999;}
.avatar-glass{ width:125px; margin-top:-40px; }
.avatar-glass-div { position: absolute; z-index:9999; top:-5px !important; left:15px !important;}
.cert-img { margin-top:190px; }
.pop-up-first-col { height:130px; }
.pop-up-first-col1 { height:130px; }
.label-div { float:left; width:100%;text-align: center; }
.upgrade_topdiv{ height:65px; }
.holiday-join img {width:100%;}
.holiday-page .modalBox{ width: 418px !important; }

.modalBox { width:550px; }
.bigModalBox { width:950px; }
.formLabel { color:#939498; font-family:Tahoma,Geneva,sans-serif, Arial, Helvetica, sans-serif; font-weight:normal; margin-bottom:2px; padding-left:0; font-size:13px; padding-top:0 }
.col-offset { padding-left:0 }

.r-modal-activity .modal-dialog{width:980px}
.r-modal-activity .modal-dialog>.modal-content>.modal-body{padding:10px}
.r-modal-activity .modal-dialog>.modal-content>.modal-body .r-modal-close{margin-top:-10px;margin-right:-5px;opacity:.5}
.r-modal-activity .modal-dialog>.modal-content>.modal-body .r-modal-close:hover{opacity:1}
.r-modal-activity .modal-dialog>.modal-content>.modal-body h3{margin:0 0 5px}
.r-modal-activity .modal-dialog>.modal-content>.modal-body h4{margin:0 0 5px;font-size:14px;font-style:italic}
.r-modal-activity .modal-dialog>.modal-content>.modal-body ul{margin-bottom:0}
.r-modal-activity .modal-dialog>.modal-content>.modal-body center{background-color:#000;margin:0 -10px}
.r-modal-activity .modal-dialog>.modal-content>.modal-body .grade-key{width:10px;height:10px}


.sideBanner { position:fixed; right:0; top:110px; z-index:99999  }
.bonusButton { display:inline-block; font-size:18px; text-align:center; font-weight:bold; width:30px; padding-top:15px; padding-bottom:15px; text-transform:uppercase; border-top-left-radius:15px; border-bottom-left-radius:15px; float:left; min-height:254px }
.bonusButton:hover, .bonusButton:focus { color:#FFF; text-decoration:none }
.sideBanner .bonusButton {background:#669966; color:#FFF;}
.sideBannerImage { position:relative; float:right;  }
.sideBanner.leftSideBanner .sideBannerImage { float:left; }
.popup-bg { background:#000; position:fixed; left:0; right:0; bottom:0; top:0; z-index:9999; }
.bannerClose { width:34px; height:34px; position:absolute; right:0; top:0; background:#FFF; color:#31889c; border:solid 4px #73a5aa; line-height:23px; text-align:center; font-size:20px; border-radius:3px; }
.advertiseImage img.desktopBanner, .desktopBanner { display:block }
.advertiseImage img.tabletBanner, .advertiseImage img.mobileBanner, .tabletBanner, .mobileBanner { display:none }

.leftSideBanner { position:fixed; top:80px; z-index:99999;   left:0;right:auto }
.leftSideBanner .bonusButton { border-radius:0 15px 15px 0;background:none;float:none; }
.leftSideBanner .bannerClose { left:0; right:auto }
.leftSideBanner .iconBannerSide { background:url(https://static.studyladder.com.au/cdn/site/c9/c6334c9b84b8.gif); left:0; right:auto; float:left; background-repeat:no-repeat; }
.minheight { min-height:70px;}


@media only screen and (max-width : 1500px) {
.navbar { min-height:66px; }
.navbar-header, .navbar-form { padding-right:2%; }
.navbar-form.search { width:14%; }
.navbar-brand>img { width:100%; }
nav ul { margin-left:2%;}
.coinsList li { margin-right:25px; }

.soundLink { margin-right:0}
.profileTitle { font-size:19px; }
.userDetail { font-size:14px; }

.login2 { padding-top:6px;}
.profileCol { min-width:120px; padding-top:13px; }
.profileImgCircle { width:60px; height:60px; overflow:hidden;}

.joinButtons { padding-top:12px; }
.joinButtons a.joinnowButton { margin-left:10px; }

/* Start Change Date 19-01-2016 */
.login2 .userDetail { line-height:26px; }
/* End Change Date 19-01-2016 */

}


/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
.med-none { display:none; }

.navbar-header { margin-top:11px; }
.navbar-brand { width:186px; }
.homeLink { top:2px; }
.unsuperText { line-height:18px; }
.navbar-form { width:auto}
.coinsList li { margin-right:15px; }
nav ul { margin-left:2%; }
/* Start Change Date 19-01-2016 */
.navbar-form .input-group>.form-control { display:none; }
/* End Change Date 19-01-2016 */
nav ul li:first-child { display:none }

/* Start Change Date 19-01-2016 */
.userName { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; width:120px; }
/* End Change Date 19-01-2016 */

.chanlangeData { display:none; }
.middel { padding:30px; }
.leftSlide { width:25%; }
.content .rightTaskCount { float:right; }

/* For Modal */
.newPopUpDesign .modalBox { width:700px; }
.newPopUpDesign .modal-body, .newPopUpDesign .modal-footer { padding:18px 2% 23px }
.menuList li h3 { padding:7px 8px 8px; font-size:18px; }
.menuList li h3 i { display:inline-block; padding-top:4px }
.menuList > li ul li { padding:7px 7px 7px 10px }
.menuList > li ul li a { font-size:18px; }
.menuList li h3 span { margin-top:5px; display:inline-block }

}

/* For Header */
@media only screen and (max-width : 1024px) {
nav ul li { margin-left:10px; }
nav ul li.firstchild { margin-left:0}
.petGifImage { width:110px; height:98px; }

.bonusButton { display:none  }
.sideBannerImage img { width:100% }
.sideBanner { left:0; right:0 }


}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
.navbar-header { margin-top:12px; }
.navbar-brand { width:109px; }
.unsuperText { font-size:13px; padding-top:8px;}
.homeLink { top:-7px; }
nav ul { padding-top:8px;}
/* Start Change Date 19-01-2016 */
.navbar-header, .navbar-form { padding-right:5%; }
/* End Change Date 19-01-2016 */
.navbar-form { margin-top:11px; }
/* Start Change Date 19-01-2016 */
.input-group-lg>.input-group-btn> button[type=submit] { padding:8px 14px 12px 10px; height:46px; }

.login2 .userDetail { line-height:18px; }
/* End Change Date 19-01-2016 */
button[type=submit] .fa { font-size:1.1em; }

/* Start Change Date 19-01-2016 */
.userName { width:90px; font-size:16px; }
/* End Change Date 19-01-2016 */

.coinsList { padding-top:18px; }
.coinsList li { margin-right:10px; }
.coins { width:90px; padding:4px;  }
.coinsCollect { font-size:9px; width:57px; min-height:16px; }
.roundIcon { width:36px; height:36px; font-size:20px; line-height:30px; left:-9px; top:-8px; border-width:3px; }

.login { padding:6px 0 0 23px; }
.profileTitle { font-size:19px; }
.updateTitle:before { width:71%; }
.userDetail { font-size:13px; line-height:15px; }
.settingIcon { font-size:1.4em; top:6px;  }

.joinButtons { padding-top:9px; }

/* For dollarGoldCoin */
#gp-start, #gp-start2 { width:33px; height:33px; line-height:20px; }
.dollarIcon { font-size:19px; }
.dollarGoldCoin.top-dollarGoldCoin { top:-11px; }

.container { width:100%; }

/* For ribbon */
.ribbon{ padding: 0.5em 2em ;}
.ribbon strong { font-size:18px; }
.ribbon:before, .ribbon:after { bottom:-1.2em; }
.ribbon:before { left:-2.6em; }
.ribbon:after { right:-2.6em; }

.taskBox { padding:10px 7px 0; margin-bottom:15px; }
.leftTaskCount { font-size:14px; line-height:16px; min-height:70px; padding-top:8px; }
.taskBox.green-color .leftTaskCount { padding-top:18px; }

.leftTaskCount strong { font-size:20px; }
.taskBox .dollarGoldCoin.dollarGoldCoin-med { display:block; }
.content { font-size:13px; line-height:15px; }
.yeallowText { float:none}
.content .rightTaskCount { float:none; text-align:left; padding-left:0; margin-top:-10px;}

.leftSlide { width:35%; }
.dollImg { max-width:100%; right:0 }
.doggyImg { width:20%; }

.reward-world { font-size:16px; line-height:20px; padding:16px 10px 10px; right:-55%; top:10px; }
.left-arrow { bottom:148px; left:2px; transform: rotate(27deg); }

.bonusPoints { display:none; }
.bonusCircle { width:45px; height:45px; top:-27px; }

.buttonList li { margin-left:0; margin-right:0}


/* Added Css on 23 Janyary 2016 */
.petAlianDetails > figure { width:50% }
.petAlianContainer { line-height:27px; font-size:19px }

.roundedList li { width:35px; height:38px; background-position:-598px -271px }
.roundedList li.active { background-position:-598px -231px }
.roundedList { margin:6px 3% 0 0 }

.colorList li a { padding:8px 5px 5px }
.levalTitle { padding-top:5px;}

.enerygyTitle{ font-size:13px;}

.openBooxContainer.pull-right > figure img, .openBooxContainer.pull-left > figure img { width:100% }
.photoFrame { width:62%; margin:0 auto 10px; display:block }
.jpFrame { width:62%; margin:0 auto 10px; display:block }
.photoFrame img { width:100% }
.jpFrame img { width:100% }
.activity-image { height:95px; }

.bigModalBox { width:700px;  margin:30px auto; }
.avatar-eyes { width:125px !important; }
.avatar-body { width:125px !important; }
.avatar-glass{ width:125px !important;}
.pet-eyes { width:140px !important; }
.pet-glasses{ width:140px !important; }
.pet-body { width:140px !important; }
.pop-up-image {width:125px !important;}
.label-div { float:left; width:100% !important; text-align: left; padding: 10px; margin-left: 25px;}

.avatar-eyes-div { top: -45px !important; left: -2px !important; }
.newPopUpDesign .bigModalBox .modal-body, .newPopUpDesign  .bigModalBox .modal-footer { padding:18px 7px 23px }
.newPopUpDesign .bigModalBox .col-md-3, .newPopUpDesign .bigModalBox .col-md-6, .newPopUpDesign .bigModalBox .col-md-2 { float:left }
.newPopUpDesign .bigModalBox .col-md-3 { width:24%; padding-left:0; padding-right:0 }
.newPopUpDesign .bigModalBox .col-md-2 { width:20%; padding-left:0 !important; padding-right:0 }
.newPopUpDesign .bigModalBox .col-md-6 { width:45%; padding-left:0 }
.newPopUpDesign .bigModalBox .col-md-3 figure img, .newPopUpDesign .bigModalBox img { width:100%}
.bigModalBox .col-md-2 img { max-width:100%; height:auto }
.newPopUpDesign .col-md-2 img { max-width:95%; height:auto }
.newPopUpDesign .bigModalBox .col-md-3 .blinkingEyes { left:0 !important; top:0 !important}

.sideBanner.leftSideBanner { top:80px; }
.bonusButton { display:none }
.iconBannerSide { display:inline-block }
.sideBannerImage { width:85% !important }
.sideBanner.leftSideBanner { top:80px; }
.sideBannerImage img { width:100%  }

.minheight{ min-height:80px}

}

/* Small Devices, Tablets */
@media only screen and (max-width : 767px) {
body { padding-top:80px; }
.mobNone, .navbar-brand img, .unsuperText { display:none; }

.navbar { min-height:42px; }
.container-fluid .navbar-header { width:20px; padding:0; margin-left:0; margin-right:20px }
.navbar-brand  { background:url(/images/new_design/logo-mobile.png) no-repeat 0 0; display:block; width:20px; height:17px; float:left; }
nav ul { padding-top:6px; margin-left:2% }
nav ul li, .starlink, .list-ul-link { line-height:0; font-size:1.3em; }

.navbar-form { margin:7px 0 0; }
.input-group-btn { width:auto}
/* Start Change Date 19-01-2016 */
.input-group-lg>.input-group-btn> button[type=submit] { padding:0 8px 9px; border-radius:0 4px 4px 0; line-height:46px; }

/* End Change Date 19-01-2016 */
button[type=submit] .fa { font-size:0.8em; }

/* Start Change Date 19-01-2016 */
.userName { width:80px; font-size:14px; }
/* End Change Date 19-01-2016 */


.coinsList { padding-top:8px; margin-bottom:0 }

.login { width:25%; padding-top:11px; }
.settingIcon { top:7px; }
.logoutLink { margin:0}
.profileImgCircle { width:30px; height:30px; margin-right:5px; }
.profileImgCircle img { width:25px;}
.profileTitle { font-size:13px; }

.login2 { padding:6px 0 0; width:auto }
.profileCol { padding-top:0; min-width:115px; }
.login2 .profileTitle { padding-top:0; line-height:30px; }

.joinButtons { padding-top:4px; }
.joinButtons a.btn { font-size:14px; line-height:22px; padding:5px 12px; }
.joinButtons a.joinnowButton { margin-left:5px; }

.middel { padding-left:15px; padding-right:15px; }
.rewardsBox { margin-bottom:30px; padding:10px; }
.taskBox { padding:20px 15px; }
.taskBox .dollarGoldCoin.dollarGoldCoin-med { display:inline-block}
.content .rightTaskCount { float:right; margin-top:0; }
.nextActivity p { margin-bottom:15px; }
.taskBox .rightTaskCount { margin-top:10px; }
.taskBox.green-color .leftTaskCount { padding-top:28px; }

/* For dollarGoldCoin */
#gp-start, #gp-start2 { width:30px; height:30px; line-height:12px; }
.dollarIcon { font-size:16px; }
.dollarGoldCoin.top-dollarGoldCoin { left:-11px;}

.updateTitle:before { width:46%; }
.ribbon { margin-bottom:5.2em; }
.leftSlide { width:100%; margin-bottom:10px; position:relative; z-index:1 }
.slidePagination { position:relative; z-index:1}

/* For Modal */
.newPopUpDesign .modalBox { width:auto; margin:30px 25px 20px }
.holiday-page .modalBox{ width:auto;}
.newPopUpDesign .modal-body, .newPopUpDesign .modal-footer { padding:18px 2% 23px }
.newPopUpDesign .modal-title { font-size:18px; padding:6px 15px 8px 20px;  line-height:16px }
.menuList > li { margin-left:0; float:none; width:auto }
.menuList > li ul { margin-bottom:20px; }
.menuList > li section { margin-bottom:0 }
.newPopUpDesign .modal-header { border-bottom-width:3px; background-size:cover; padding-top:15px; padding-bottom:20px; }

.content h1 { font-size:26px; line-height:34px; }
.topCard img { width:auto; margin-bottom:10px; }

/* Start Change Date 20-01-2016 */
/*.panel-footer { position:relative; }*/
#footer-feedback { position:absolute; top:5px; right:0; width:45%; text-align:right }
#footer-feedback h4 { font-size:14px; }
/* End Change Date 20-01-2016 */


/* Added Change Date 26-01-2016 */
.profileImgCircle .avatar-premium {
    margin-top: -3px;
}
.petGifImage { width:70px; height:70px; }

.thumbnail .caption h3{ font-size:12px;}
.thumbnail .caption{ font-size:12px; min-height:30px}

.roundedList li { background-position:-182px -163px; width:30px; height:31px; margin-left:3px; }
.roundedList li.active { background-position:-182px -196px; }

.page-header h2{ font-size:21px;}

.carousel{ width:85%; }
.carousel-control.left{ left:15px;}
.carousel-indicators{ display:none;}

.coursesList { width:auto; float:none;  }
.courseList .col-xs-7 { width:auto; float:none}
.colorList li a { padding:5px 2px 4px }
.colorList li span { width:17px; height:17px; }
.coursesList .col-xs-6 { width:48.2%; padding:0 0.5% }
.coursesList .col-xs-6 .nextMenuBox, .coursesList .col-xs-6 .previousMenuBox { padding:7px }

.smallSmiley { position:inherit; margin:0; right:inherit; top:inherit }
.numberGameList li { width:auto; float:none; margin:0 0 10px 0 }
.activity-image { width:100%}
.numberGameList li img.flashSmallIcon { width:30px }

.smilyDetailsList .panel .panel-title { font-size:20px; }
.smilyDetailsList .panel .panel-title a { padding:10px; }
.smilyList { display:none; }

.enerygyTitle{ display:none;}

.leftStoryBook, .rightStoryBook { top:4% }
.storyTitle { margin-bottom:-5px }
.photoFrame { margin-bottom:0;  }
.jpFrame { margin-bottom:0;  }
.frameImg figcaption { top:16% }
.frameImg2 figcaption { top:16% }

.congratulation h2{ margin-bottom:0px; }
.printButton{ font-size:20px;}
/* End Change Date 26-01-2016 */

.modal-dialog { width:auto }

.bigModalBox { margin:30px; }
.bigModalBox .col-md-3, .bigModalBox .col-md-6 { height:auto !important }
.bigModalBox .col-md-3 div, .bigModalBox .col-md-6 div { float:none !important }

.newPopUpDesign .modalBox { width:auto; margin:30px 25px 20px }
.holiday-page .modalBox{ width:auto;}
.newPopUpDesign .modal-body, .newPopUpDesign .modal-footer { padding:18px 2% 23px }
.newPopUpDesign .modal-title { font-size:18px; padding:6px 15px 8px 20px;  line-height:16px }

.newPopUpDesign .bigModalBox .col-md-3, .newPopUpDesign .bigModalBox .col-md-6, .bigModalBox .col-md-2 { float:none; height:auto !important }
.newPopUpDesign .bigModalBox .col-md-3 .blinkingEyes { right:0 }
.newPopUpDesign .bigModalBox .modal-body, .newPopUpDesign .bigModalBox .modal-footer { padding:18px 20px 23px }
.newPopUpDesign .bigModalBox .col-md-6, .bigModalBox .col-md-2, .newPopUpDesign .bigModalBox .col-md-3 { width:auto }



.sideBanner { top:100px; }
.sideBanner.leftSideBanner { top:60px; }
.minheight{ min-height:inherit;}


}


@media only screen and (max-width : 600px) {
.login { width:auto; }
.settingIcon { top:7px; }
.login2 { padding-top:5px; }
.login2 .profileTitle { font-size:12px; line-height:38px; }
.dollarGoldCoin.top-dollarGoldCoin { top:-8px; }

.starlink { font-size:20px; line-height:0; }

.settingIcon.view600 { display:none; }
.coinsList { padding-top:10px; }
.joinButtons { padding-top:7px }
.joinButtons a.btn { font-size:11px; line-height:18px; padding:4px 8px; border-radius:3px; }
.joinButtons .settingIcon { color:#78c800; position:inherit; top:auto; left:auto; }

.topCard img { width:100%; }
.profileCol { min-width:inherit; }

/* Start Change Date 19-01-2016 */
.userName { width:40px; font-size:12px; }
.logoutLink { font-size:12px; }

.navbar-form .input-group-lg>.input-group-btn> button[type=submit] { line-height:24px; height:26px; }
/* End Change Date 19-01-2016 */

/* For ribbon */
.ribbon { padding:0.5em 1em }
.ribbon strong { font-size:15px; }
.ribbon:before { left:-2.8em; bottom:-1em }
.ribbon:after { right:-2.8em; bottom:-1em }

.rewardWorld-img img { width:100%; }
.dollImg { width:30%; }


/*Added on 23 January 2016*/
.petAlianContainer { position:inherit; width:auto; left:inherit; top:inherit; margin-bottom:15px }
.boxArrow { display:none }
.petAlianDetails > figure { width:auto }
.petAlianContainer { padding:35px 12% 15px }

.table{ font-size:14px; line-height:30px; }
.table th{ font-size:14px;}

h3.gamesTitle{ font-size:20px;}
.accordianContain{ font-size:17px;}
a.redRibin{ font-size:12px}
.storyTitle{ font-size:14px; line-height:14px;}
.storyTitle span{ font-size:12px;}
a.jp-play{ background-position:-635px -234px !important; width:27px !important; height:27px !important}

.modal-dialog { width:auto }
.label-div { float:left; width:100% !important; text-align: left; padding: 10px; margin-left: 5px; font-size: 10px;}
.pet-body { width:140px !important; }
.pet-eye-div { left: 0px !important; top: 0px !important; }
.pet-eyes { width:140px !important; }
.pet-glasses{ width:140px !important; }
.pop-up-image {width:90px !important;}
.pet-glasses-div{ left:0px !important; top:0px !important; position: absolute; z-index:9999;}
}


/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) and (max-width : 600px) {
.lastchild .coinsCollect { display:none }
.lastchild .coins { height:24px; width:27px; }


}

/* Custom, iPhone Retina */
@media only screen and (max-width : 480px)  {
.navbar-form { padding-right:5%; width:auto}
nav ul { margin-left:5%;}
/* Start Change Date 20-01-2016 */
nav ul li { margin-left:0}
/* End Change Date 20-01-2016 */

.coins { width:auto; padding:0; margin:0; background:none; box-shadow:none }
.coinsCollect, .coinsList li.lastchild { display:none}
.coinsList { padding-top:0}


.login { padding:0 0 0; width:auto; }
.profileCol, .profileTitle { display:none}
.roundIcon, .settingIcon {  position:inherit; top:auto; left:auto; }
.roundIcon { border:0; width:31px; height:31px; font-size:15px; line-height:30px; margin-top:5px; }
.settingIcon { font-size:1.7em; padding-top:3px; }
.dollarGoldCoin.top-dollarGoldCoin { position:inherit; top:auto; left:auto; }

/* Start Change Date 19-01-2016 */
.profileImgCircle { margin-top:5px; }

.settingIcon.view600, .joinButtons .settingIcon  { display:inline-block; }
.joinButtons { padding-top:7px; }
/* End Change Date 19-01-2016 */
.dollarGoldCoin { border:0; box-shadow:none; margin-top:5px;}

/* Start Change Date 20-01-2016 */
#footer-feedback { display:none; }
/* End Change Date 20-01-2016 */
.col-xs-6.col-md-4{ width:100%;}

}

/*Added on 23 January 2016*/
@media only screen and (max-width: 320px) {
.petAlianDetails > figure img{ width:230px; }
}

/* ------- course-box css for index and games page */
.course-box {
  border:2px solid #e6e6e6;border-radius:7px;padding:0;margin-top: 15px;margin-bottom: 15px;
  /* *** border radius = (.course-box h2 border-radius (top-right & top left values) ) + (.course-box border-width) -- otherwise issues occur with the borders merging */
}
.course-box h2 {
  margin-top:0;background-color:#e6e6e6;padding:10px;border-radius:5px 5px 0 0;color:#fff
}

.course-box a {
    font-size: 1.4em;
}

.course-box.mathematics,
.course-box.art {
  border-color: #01AFD9 /* blue */
}
.course-box.mathematics h2,
.course-box.art h2 {
  background-color: #01AFD9 /* blue */
}

.course-box.literacy,
.course-box.music {
  border-color: #90C046 /* green */
}
.course-box.literacy h2,
.course-box.music h2 {
  background-color: #90C046 /* green */
}

.course-box.science,
.course-box.ict
{
  border-color: #F0B708 /* yellow */
}
.course-box.science h2,
.course-box.ict h2
{
  background-color: #F0B708 /* yellow */
}

.course-box.culture,
.course-box.naplan
{
  border-color: #9177F6 /* purple */
}
.course-box.culture h2,
.course-box.naplan h2
{
  background-color: #9177F6 /* purple */
}

.course-box.studysheets,
.course-box.safety{
  border-color: #FB7272 /* pink */
}
.course-box.studysheets h2,
.course-box.safety h2 {
  background-color: #FB7272 /* pink */
}

.course-box .details{ padding:0 10px 2.5px }
.course-box a{ display:block;margin:10px 0 }

.bg-grad {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#abdff8+25,ffffff+100 */
  background: #abdff8; /* Old browsers */
  background: -moz-linear-gradient(top,  #abdff8 25%, #ffffff 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #abdff8 25%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #abdff8 25%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abdff8', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

  margin-top:-80px;
  margin-bottom: 15px;
  padding-top:80px;
}

#intro p, #intro h1 {
  font-weight: bold;
}

.layer2, .layer3{ position:relative;margin-top:-71% }

.search-form { padding-top:30px; }
/* ------- end of course-box css for index and games page */


/* ----------- styles for curriculum boxes on games index. */
@media only screen and (min-width: 1200px) {
  .curriculum-active{padding-right:30px}
  .curriculum-inactive{padding-left:30px}
}
/* ------- end styles for curriculum boxes on games index. */

/* added xl-screen fix for container class. only works on larger than 1400px screens.  added 9th Feb 2016 */
@media (min-width:1400px) {
  .container.stretch { width: 90%; max-width: 2100px;}
}
/* ------------ games page styling added 22/02/2016 --------------- */

/* *************** Navigation CSS ****************************** */
a.no-decoration:hover{
  text-decoration: none;
}

.activity-nav {
  border-style:solid;
  border-width:2px;
  border-radius:5px;
  text-align:center;
  color:white;
  text-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
  box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
  font-weight:900;
  font-size:2em;
}
@media (max-width:640px) {
  .activity-nav{
    font-size: 1.5em;
  }
}
@media (max-width:480px) {
  .activity-nav{
    font-size: 1em;
  }
}
.activity-nav:hover {
  color:#e8e8e8;
  text-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
}
.activity-nav:hover .preview:after{
  background-color: rgba(200, 200, 200, 0.85);
}
.activity-nav.prev{
  border-color:#01AFD9;
  background-color:#01AFD9;
}
.activity-nav.prev:hover{
  border-color:#37a;
  background-color:#37a;
}
.activity-nav.next{
  border-color:#90C046;
  background-color:#90C046;
}
.activity-nav.next:hover{
  border-color:#7a3;
  background-color:#7a3;
}

.activity-nav .preview{
 padding: 0.5em 0.5em 0.2em;
}
.activity-nav .preview img{
  position:relative;
  width:80%;
}
.activity-nav .preview:after {
  content: "\f060";
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 900;
  text-decoration: inherit;
  font-size: 2em;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom:0.5em;
  border-radius:100%;
  background:rgba(255, 255, 255, 0.75);
  width:1.4em;
  height:1.4em;
  margin:auto;
}
.activity-nav.prev .preview:after {
  color: #01AFD9;
  content: "\f060";
}
.activity-nav.prev:hover .preview:after {
  color: #37a;
}
.activity-nav.next .preview:after {
  color: #90C046;
  content: "\f061";
}
.activity-nav.next:hover .preview:after {
  color: #7a3;
}

.va-btm { vertical-align: bottom; }

/* **************** END OF Navigation CSS ******************* */

/* push down footer styles */
html {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 100px;
  min-height: 100%;
}

footer {
  position: absolute;
  bottom: 0;
  width:100%;
}

/* **************** Panel CSS ******************************* */
.panel-heading a:after {
    font-family:'fontawesome';
    content:"\f077";
    float: right;
}
.panel-heading a.collapsed:after {
    content:"\f078";
}

.panel-sl {
  border-width:2px;
  border-color:#F0B708;
  border-radius:5px;
}
.panel-sl a{
  cursor: pointer;
}
.panel-sl > .panel-heading {
  background-color:#F0B708;
  color: #fff;
}
.panel-sl .panel-title{
  font-size:24px;
}
.panel-sl.green {
  border-color:#90C046;
}
.panel-sl.green > .panel-heading {
  background-color:#90C046;
}
.panel-sl.red {
  border-color:#DC0114;
}
.panel-sl.red > .panel-heading {
  background-color:#DC0114;
}
.panel-sl.blue {
  border-color:#01AFD9
}
.panel-sl.blue > .panel-heading {
  background-color:#01AFD9
}
.panel-sl.purple {
  border-color:#9177F6;
}
.panel-sl.purple > .panel-heading {
  background-color:#9177F6;
}
.panel-sl.pink {
  border-color: #FB7272;
}
.panel-sl.pink > .panel-heading {
  background-color: #FB7272;
}

/***************** panel-sl fill styles *****************/
.panel-sl.fill, .panel-sl.blue.fill, .panel-sl.green.fill {
  color: white;
}
.panel-sl.fill {
  background-color: #F0B708;
  padding: 10px;
}
.panel-sl.fill.hover {
  background-color: #CDA52D;
  border-color: #CDA52D;
}
.panel-sl.blue.fill {
  background-color: #01AFD9;
}
.panel-sl.blue.fill.hover{
  background-color: #018DB7;
  border-color: #018DB7;
}
.panel-sl.red.fill {
  background-color: #DC0114;
}
.panel-sl.red.fill.hover{
  background-color: #BE3131;
  border-color: #BE3131;
}
.panel-sl.green.fill{
  background-color:#90C046;
}
.panel-sl.green.fill.hover{
  background-color: #7EA348;
  border-color: #7EA348;
}
.panel-sl.fill a.title-link{
  background-color: rgba(255, 255, 255, 0.65);
  margin: -12px;
  padding: 12px;
}
/********** end of panel-sl fill styles *****************/

.panel-sl.fill>a {color:#FFFFFF;}
.panel-sl.fill>a:hover {color:#CBCCCE;}


/* **************** End of Panel CSS ************************* */


/* **************** Blockquote CSS *************************** */

blockquote {
  border-color:#59c;
}
blockquote p:after, blockquote p:before, blockquote footer{
  color: #59c;
}
blockquote p:after, blockquote p:before {
  font-family: fontawesome;
  font-size: 2em;
}
blockquote p:before {
  content: "\f10d";
  margin-right: 20px;
  float:left;
}
blockquote p:after {
  content: "\f10e";
  margin-left: 20px;
  margin-bottom:15px;
  float:right;
}
.quote-footer { clear:both; }
@media (min-width:768px) {
  .quote-footer .btn {margin-top: -7px /* half height of blockquote footer font size. */}
}

/* *********** End of Blockquote CSS ************************* */

/* ------------------------- end of changes 22/02/2016 ------------------------- */

/* ------------ games page styling added 23/02/2016 --------------- */

/* *************** .alert-sl CSS styles **************************** */

/* .alert-sl colour styling */
.alert.alert-sl {
  border-width: 2px;
  background-image: none;
  border-radius: 5px;
  box-shadow: 1px 2px 3px 2px rgba(0,0,0,.12),0 1px 2px 0px rgba(0,0,0,0.37);
}

.alert-sl.alert-info {
  background-color: #DFF3FB;
  color: #2A7998;
  border-color: #01AFD9;
}
.alert-sl.alert-success {
  background-color: #EAF3DD;
  color: #577628;
  border-color: #90C046;
}
.alert-sl.alert-warning {
  background-color: #FDF0C9;
  color: #CC9900;
  border-color: #F0B708;
}
.alert-sl.alert-danger {
  background-color: #FDC9C9;
  color: #8F0505;
  border-color: #F10909;
}

/* .alert-sl icon styling */
.alert-sl p:first-of-type:before {
  font-family: "fontawesome";
  float: left;
  font-size: 1.5em;
  line-height: 1em;
  margin: 0 0.25em 0.25em 0;
}
.alert-sl.alert-info p:first-of-type:before {
  content: "\f05a";
}
.alert-sl.alert-success p:first-of-type:before {
  content: "\f00c";
}
.alert-sl.alert-warning p:first-of-type:before {
  content: "\f06a";
}
.alert-sl.alert-danger p:first-of-type:before {
  content: "\f071";
}
/* *********** End of .alert-sl CSS ************************* */

/* ------------------------- end of changes 23/02/2016 ------------------------- */

/* xs screen portrait (iphone 5-6+, galaxy, notes etc) */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 767px)
  and (orientation: portrait) {

  .memberDetails .coins {
      width: 100%;
      padding: 4px;
      background: #1682bf;
      display: block;
      border-radius: 7px;
      padding: 4px;
      position: relative;
      box-shadow: 0 2px 3px rgba(24,116,183,0.55), inset -1px -1px 4px rgba(0,55,113,1);
      background: linear-gradient(#41bae7, #1682bf);
      margin-left: 8px;
      margin-top: 15px;
  }
  .memberDetails .coinsCollect {
    display: block;
      background: #1076a0;
      width: calc(100% - 10px);
      min-height:24px;
      border-radius: 5px;
      color: #FFF;
      text-shadow: 0 2px 0 #1578bb;
      padding: 3px 10px;
      white-space: nowrap;
      overflow: hidden;
      font-size:12px;
      text-align: left;
      float: right;
      box-shadow: inset 0 5px 4px rgba(0,0,0,0.26), inset 0 0 6px rgba(0,0,0,0.23);
  }
  .memberDetails .coins .roundIcon {
      transition: all 0.4s;
  }
  .memberDetails .roundIcon.iconDone {
    background-color: #78c800;
    line-height: 1.5em;
    width:45px;
    height:45px;
    font-size:24px;
    line-height:36px;
    left:-25px;
    top:-12px;
    border-width:3px;
  }
  .memberDetails .roundIcon {
      font-size: 30px;
      color: #FFF;
      font-weight: bold;
      width: 53px;
      height: 53px;
      display: inline-block;
      background-color: #37b6e6;
      border: solid 4px #FFF;
      border-radius: 100%;
      text-align: center;
      line-height: 42px;
      text-shadow: 0 1px 1px rgba(0,0,0,0.25);
      box-shadow: 0 3px 0 1px rgba(0,0,0,0.25);
      position: absolute;
      top: -10px;
      left: -8px;
      width: 36px;
      height: 36px;
      font-size: 20px;
      line-height: 30px;
      left: -9px;
      top: -13px;
      border-width: 3px;
  }


  .memberDetails .coinsCollect {  }
}
/*********************** END xs screen portrait ***********/
/* xs screen landscape (iphone 5-6+, galaxy, notes etc) */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 767px)
  and (orientation: landscape) {

  .memberDetails .coins { width:100px; padding:4px;  }
  .memberDetails .coinsCollect { font-size:12px; width:80px; min-height:24px; }
  .memberDetails .roundIcon.iconDone { width:45px; height:45px; font-size:24px; line-height:36px; left:-30px; top:-8px; border-width:3px; }

  .landscape-xs-25 {
    width: 25%;
  }
  .landscape-xs-33 {
    width: 33%;
  }
  .landscape-xs-50 {
    width: 50%;
  }
  .landscape-xs-75 {
    width: 75%;
  }
}
/*********************** END xs screen landscape ***********/

/* twitter typeahead css rules for search bar. */
.twitter-typeahead{width:100%}
.twitter-typeahead-group>*{vertical-align:top}
.input-group-lg>.twitter-typeahead>input[type=text]{height:46px;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}
.input-group>.twitter-typeahead>input[type=text]{border-radius:6px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}
.tt-input,.tt-hint{font-size:15px;line-height:20px;padding:6px 12px;border:1px solid rgba(0, 0, 0, 0.2);border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,0.075) inset;width:100% !important}
.tt-hint{color:#999}
.tt-menu{
 min-width:280px;
 width:100%;
 background-color:#fff;
 border: 1px solid rgba(0, 0, 0, 0.2);
 box-shadow:0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
 text-align:left !important;
 padding:6px 12px;
 font-size: 15px;
 line-height: 20px;
}
.tt-suggestion:hover {
 cursor: pointer;
 color: #fff;
 background-color: #0097cf;
}
.tt-suggestion.tt-cursor {
 color: #fff;
 background-color: #0097cf;
}
/* END of twitter typeahead css */


/* media queries to fix certificate name placement */
@media only screen
  and (min-width: 320px)
  and (max-width: 600px) {
  
  #nameoncert {
    font-size: 1em;
  }
}

/* header tweaks for search buttons etc added 03/08/2016 */
@media (max-width:1199px){ /* 1199px is md size and below in BS sizes*/
  #header-search-btn {
    /* overides input button group hard left edge. */
    border-radius: 6px;
  }
}
@media (max-width:991px){ /* 991px is sm size in BS sizes*/
  #header-search-form {
    margin-top: 7px;
  }
}
@media (max-width:767px){ /* 767px is xs size, 991px is sm size in BS sizes*/
  #header-search-form {
    margin-top: 3px;
  }
  #header-search-btn {
    /* overides input button group hard left edge. */
    height: 35px;    line-height: 30px;
  }
}
/* END header tweaks for search buttons */


/* social media colours 

twitter:     #00aced     rgb(0, 172, 237)
facebook:    #3b5998     rgb(59, 89, 152)
googleplus:  #dd4b39     rgb(221, 75, 57)
*/
.text-twitter     { color: #00aced; }
.text-facebook    { color: #3b5998; }
.text-googleplus  { color: #dd4b39; }
a:hover .text-twitter     { color: #0087b8; }
a:hover .text-facebook    { color: #2c4272; }
a:hover .text-googleplus  { color: #c43421; }


/* END social media colours */

/* Truncation utility classes */
.trunc {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 1.4em;
  height: calc(1.4em);
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.trunc-2 {
  height: calc( 2 * 1.4em );
  -webkit-line-clamp: 2;
}
.trunc-3 {
  height: calc( 3 * 1.4em );
  -webkit-line-clamp: 3;
}
.trunc-4 {
  height: calc( 4 * 1.4em );
  -webkit-line-clamp: 4;
}
.trunc-5 {
  height: calc( 5 * 1.4em );
  -webkit-line-clamp: 5;
}
.trunc-3 {
  height: calc( 3 * 1.4em );
  -webkit-line-clamp: 3;
}