html, body {
    font-family: grlp,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-smooth: always;
	text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
	font-size: 18px;
}

/*IE8 upgrade banner styles*/

#upgrade-banner{
    height:auto;
    background-color: white;
    border: 1px solid black;    
    z-index:100;
    left: 0px;
    top:0px;
    position: fixed;
    clear:both;
}

#upgrade-banner > p{
    margin:10px;
    float:center;
    text-align: center;
    font-weight:bold;

}



/* Matter and Materials Styles
------------------------------------------------- */
.matterandmaterials .offset3 > .section >h1.title {
	background: #3788C7;
	color:#fff;
	padding: 20px 20px 30px;
	margin-top: 0;
	font-size: 30px
}

.matterandmaterials .Activitykid {
	background: url(../img/tom/Tomactivityleft.png) no-repeat;
	background-size: 100%;
	height: 370px
}
.matterandmaterials .keyquestionskid,
.matterandmaterials .keyconceptskid {
	background: url(../img/tom/Tomkeyleft.png) no-repeat;
	background-size: 100%;
	height: 430px
}
.matterandmaterials .Questionskid {
	background: url(../img/tom/Tomquestionleft.png) no-repeat;
	background-size: 100%;
	height: 440px
}
.matterandmaterials .Revisionkid {
	background: url(../img/tom/Tomrevisionleft.png) no-repeat;
	width: 100%;
	background-size: 100%;
	height: 350px;
}
.matterandmaterials .Investigationkid {
	background: url(../img/tom/Tominvestigationsleft.png) no-repeat;
	background-size: 100%;
}

.matterandmaterials [type*="Activity"] div[data-type*="visit"]:after {
    background: url(../img/tom/tom2visitleftbottom.png) no-repeat #E1E6D1;
    background-size: 100%;
}
.matterandmaterials [type*="Activity"] [data-type*="newword"]:after {
    background: url(../img/tom/Tom2newwordsleftbottom.png) no-repeat #E1E6D1;
    background-size: 100%;
}
.matterandmaterials [type*="Activity"] [data-type*="didyouknow"]:after {
    background: url(../img/tom/Tom2didyouknowleftbottom.png) no-repeat #E1E6D1;
    background-size: 100%;
}
.matterandmaterials [data-type*="newwords"]:after {
    background: url(../img/tom/Tom2newwordsleftbottom.png) no-repeat #fff;
    background-size: 100%;
}
.matterandmaterials [data-type*="didyouknow"]:after {
    background: url(../img/tom/Tom2didyouknowleftbottom.png) no-repeat #fff;
    background-size: 100%;
}
.matterandmaterials div[data-type*="visit"]:after {
    background: url(../img/tom/Tom2visitleftbottom.png) no-repeat #fff;
    background-size: 100%;
}

/* Life and Living Styles
------------------------------------------------- */
.lifeandliving .offset3 > .section >h1.title {
	background: #7FC56D;
	color:#fff;
	padding: 20px 20px 30px;
	margin-top: 0;
	font-size: 30px
}

.lifeandliving .Activitykid {
	background: url(../img/farrah/Farrahactivitiesleft.png) no-repeat;
	background-size: 100%;
	height: 380px
}
.lifeandliving .keyquestionskid,
.lifeandliving .keyconceptskid {
	background: url(../img/farrah/Farrahkeyleft.png) no-repeat;
	background-size: 100%;
	height: 280px;
	width: 100%;
	float: left
}
.lifeandliving .Questionskid {
	background: url(../img/farrah/Farrahquestionsleft.png) no-repeat;
	background-size: 100%;
	height: 450px
}
.lifeandliving .Revisionkid {
	background: url(../img/farrah/Farrahrevisionsleft.png) no-repeat;
	width: 100%;
	background-size: 100%;
	height: 430px;
}
.lifeandliving [type*="Activity"] div[data-type*="visit"]:after {
    background: url(../img/farrah/Farrah2visitleftbottom.png) no-repeat #E1E6D1;
    background-size: 100%;
}
.lifeandliving [type*="Activity"] [data-type*="newword"]:after {
    background: url(../img/farrah/Farrah2newwordsleftbottom.png) no-repeat #E1E6D1;
    background-size: 100%;
}
.lifeandliving [type*="Activity"] [data-type*="didyouknow"]:after {
    background: url(../img/farrah/Farrah2didyouknowleftbottom.png) no-repeat #E1E6D1;
    background-size: 100%;
}
.lifeandliving [data-type*="newwords"]:after {
    background: url(../img/farrah/Farrah2newwordsleftbottom.png) no-repeat #fff;
    background-size: 100%;
}
.lifeandliving [data-type*="didyouknow"]:after {
    background: url(../img/farrah/Farrah2didyouknowleftbottom.png) no-repeat #fff;
    background-size: 100%;
}
.lifeandliving div[data-type*="visit"]:after {
    background: url(../img/farrah/Farrah2visitleftbottom.png) no-repeat #fff;
    background-size: 100%;
}
.lifeandliving .Investigationkid {
	background: url(../img/farrah/Farrahinvestigationsleft.png) no-repeat;
	background-size: 100%;
}
/* Energy and Change Styles
------------------------------------------------- */
.energyandchange .offset3 > .section >h1.title {
	background: #FEC042;
	color:#fff;
	padding: 20px 20px 30px;
	margin-top: 0;
	font-size: 30px
}

.energyandchange .Activitykid {
	background: url(../img/jojo/Jojoactivitiesleft.png) no-repeat;
	background-size: 100%;
	height: 430px
}
.energyandchange .keyquestionskid,
.energyandchange .keyconceptskid {
	background: url(../img/jojo/Jojokeyleft.png) no-repeat;
	background-size: 100%;
	height: 420px
}
.energyandchange .Questionskid {
	background: url(../img/jojo/Jojoquestionsleft.png) no-repeat;
	background-size: 100%;
	height: 330px
}
.energyandchange .Revisionkid {
	background: url(../img/jojo/Jojorevisionsleft.png) no-repeat;
	width: 100%;
	background-size: 100%;
	height: 430px;
}
.energyandchange [type*="Activity"] div[data-type*="visit"]:after {
    background: url(../img/jojo/Jojo2visitleftbottom.png) no-repeat #E1E6D1;
    background-size: 100%;
}
.energyandchange [type*="Activity"] [data-type*="newword"]:after {
    background: url(../img/jojo/Jojo2newwordsleftbottom.png) no-repeat #E1E6D1;
    background-size: 100%;
}
.energyandchange [type*="Activity"] [data-type*="didyouknow"]:after {
    background: url(../img/jojo/Jojo2didyouknowleftbottom.png) no-repeat #E1E6D1;
    background-size: 100%;
}
.energyandchange [data-type*="newwords"]:after {
    background: url(../img/jojo/Jojo2newwordsleftbottom.png) no-repeat #fff;
    background-size: 100%;
}
.energyandchange [data-type*="didyouknow"]:after {
    background: url(../img/jojo/Jojo2didyouknowleftbottom.png) no-repeat #fff;
    background-size: 100%;
}
.energyandchange div[data-type*="visit"]:after {
    background: url(../img/jojo/Jojo2visitleftbottom.png) no-repeat #fff;
    background-size: 100%;
}
.energyandchange .Investigationkid {
	background: url(../img/jojo/Jojoinvestigationsleft.png) no-repeat;
	background-size: 100%;
}
/* Earth and Beyond Styles
------------------------------------------------- */
.earthandbeyond .offset3 > .section >h1.title {
	background: #E1614E;
	color:#fff;
	padding: 20px 20px 30px;
	margin-top: 0;
	font-size: 30px
}

.earthandbeyond .Activitykid {
	background: url(../img/sophie/Sophieactivitiesleft.png) no-repeat;
	background-size: 100%;
	height: 435px
}
.earthandbeyond .keyquestionskid,
.earthandbeyond .keyconceptskid {
	background: url(../img/sophie/Sophiekeyleft.png) no-repeat;
	background-size: 100%;
	height: 360px;
	width: 100%;
	float: left
}
.earthandbeyond .Questionskid {
	background: url(../img/sophie/Sophiequestionsleft.png) no-repeat;
	background-size: 100%;
	height: 440px
}
.earthandbeyond .Revisionkid {
	background: url(../img/sophie/Sophierevisionsleft.png) no-repeat;
	width: 100%;
	background-size: 100%;
	height: 300px;
}

.earthandbeyond [type*="Activity"] div[data-type*="visit"]:after {
    background: url(../img/sophie/Sophie2visitleftbottom.png) no-repeat #E1E6D1;
    background-size: 100%;
}
.earthandbeyond [type*="Activity"] [data-type*="newword"]:after {
    background: url(../img/sophie/Sophie2newwordsleftbottom.png) no-repeat #E1E6D1;
    background-size: 100%;
}
.earthandbeyond [type*="Activity"] [data-type*="didyouknow"]:after {
    background: url(../img/sophie/Sophie2didyouknowleftbottom.png) no-repeat #E1E6D1;
    background-size: 100%;
}
.earthandbeyond [data-type*="newwords"]:after {
    background: url(../img/sophie/Sophie2newwordsleftbottom.png) no-repeat #fff;
    background-size: 100%;
}
.earthandbeyond [data-type*="didyouknow"]:after {
    background: url(../img/sophie/Sophie2didyouknowleftbottom.png) no-repeat #fff;
    background-size: 100%;
}
.earthandbeyond div[data-type*="visit"]:after {
    background: url(../img/sophie/Sophie2visitleftbottom.png) no-repeat #fff;
    background-size: 100%;
}
.earthandbeyond .Investigationkid {
	background: url(../img/sophie/Sophieinvestigationsleft.png) no-repeat;
	background-size: 100%;
}
/* Activity Styles
-------------------------------------------------- */

[type*="Activity"] {
    padding: 10px;
    float: left;
    background: #E1E6D1;
    max-width: 100%;
    margin: 10px 0 20px;
    width: 100%
}

[type*="Activity"] figure,
[type*="Activity"] .figure {
    clear: both;
    margin: 0;
    padding: 20px 0;
    text-align: center;
    width: 100%;
    max-width: 100%;
    float: left
}
[type*="Activity"] > .title:before {
	content: "Activity: ";
	text-transform: uppercase;
	font-family: grb,"Helvetica Neue",Helvetica,Arial,sans-serif
}

.afrikaans [type*="Activity"] > .title:before {
	content: "Aktiwiteit: ";
}

[type*="Activity"] > .title {
    max-width: 100%;
    font-family: @font
    ,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
[type*="Activity"] article > p {
    clear:both;
    float: left
}

[type*="Activity"] tr:first-child {
    background: #BDD995;
    margin-top: 20px
}



/* Revision
-------------------------------------------------- */
[type*="Revision"] {
    background: #FEE5DA;
    clear: both;
    padding: 10px;
    float: left;
    margin-top: 20px
}
[type*="Revision"] > h1.title:before {
	content: "Revision: ";
	text-transform: uppercase;
    font-family: grb,"Helvetica Neue",Helvetica,Arial,sans-serif;

}
[type*="Revision"] tr:first-child {
    background: #FBC6B2
}

/* Revision Afrikaans
-------------------------------------------------- */
.afrikaans  [type*="Revision"] > h1.title:before {
	content: "Hersiening: ";
	text-transform: uppercase;
    font-family: grb,"Helvetica Neue",Helvetica,Arial,sans-serif;

}


/* Investigation Styles
-------------------------------------------------- */
[type*="Investigation"] {
    background: #FFF1D9;
    clear: both;
    padding: 10px;
    float: left;
    margin-top: 20px
}
[type*="Investigation"] > h1.title:before {
	content: "Investigation: ";
	text-transform: uppercase;
    font-family: grb,"Helvetica Neue",Helvetica,Arial,sans-serif;

}
[type*="Investigation"] tr:first-child {
    background: #FEE481
}
.Investigationkid {
	height: 440px
}

/* Investigation Styles afrikaans
-------------------------------------------------- */
.afrikaans [type*="Investigation"] > h1.title:before {
	content: "Ondersoek: ";
	text-transform: uppercase;
    font-family: grb,"Helvetica Neue",Helvetica,Arial,sans-serif;
}


/* Key Questions & Key Concepts
------------------------------------------------- */
[data-type*="keyquestions"]:before {
    content:"Key Questions";
    clear: both;
    float: left;
    font-size: 20px;
    margin-top: 60px;
    margin-bottom: 30px;
    font-family: grb,"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform: uppercase;
}

[data-type*="keyconcepts"]:before {
    content:"Key Concepts";
    clear: both;
    float: left;
    font-size: 20px;
    margin-top: 40px;
    margin-bottom: 30px;
    font-family: grb,"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform: uppercase
}
[data-type*="keyquestions"], [data-type*="keyconcepts"] {
    background: url(../img/pins.png) no-repeat 50% 10px #fce78e;
    background-size: contain;
    -ms-behavior: url(/js/backgroundsize.min.htc);
    padding: 0 10px;
    float: left;
    width:100%
}
/* Key Questions & Key Concepts afrikaans
------------------------------------------------- */
.afrikaans [data-type*="keyquestions"]:before {
    content:"Sleutelvrae";
}

.afrikaans [data-type*="keyconcepts"]:before {
    content:"Sleutelkonsepte";
}

/* New Words
------------------------------------------------- */
[data-type*="newwords"]:before {
    background: url(../img/newwordslefttop.png) no-repeat;
    background-size: 100%;
    content:"New Words";
    float: left;
    margin-top: -21px;
    width: 100%;
    text-align: center;
    font-size: 13px;
    padding-top: 15px;
    text-transform: uppercase;
    font-family: grb,"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-align: center
}

.afrikaans [data-type*="newwords"]:before {
    content:"Nuwe Woorde";
}

[data-type*="newwords"] {
    background: url(../img/newwordsleftmiddle.png) repeat-y;
    background-size: 100%;
    width: 100%;
    float: left;
    font-size: 13px;
    margin: 0!important
}
[data-type*="newwords"]:after {
    content:"";
    float: left;
    height: 380px;
    width: 100%;

}
[data-type*="newwords"] ul {
	padding: 0px 8px;
	list-style: none;
	word-break:break-word
}

[data-type*="newwords"] li {
	margin: 0
}

/* Did You Know Styles
-------------------------------------------------- */

[data-type*="didyouknow"]:before {
    background: url(../img/didyouknowlefttop.png) no-repeat;
    background-size: 100%;
    -ms-behavior: url(/js/backgroundsize.min.htc);
    content:"Did You Know?";
    text-align: center;
    font-size: 15px;
    float: left;
    margin-top: -25px;
    width: 100%;
    max-width: 100%;
    padding-top: 15px;
    text-transform: uppercase;
    font-family: grb,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

.afrikaans [data-type*="didyouknow"]:before {
    content:"Het Jy Geweet?";
}

[data-type*="didyouknow"] {
    background: url(../img/didyouknowleftmiddle.png) repeat-y;
    background-size: 100%;
    -ms-behavior: url(/js/backgroundsize.min.htc);
    width: 100%;
    float: left;
    margin: 0!important;
    font-size: 13px;
}

[data-type*="didyouknow"]:after {
    content:"";
    float: left;
    height: 400px;
    width: 100%;
}

[data-type*="didyouknow"] p {
    padding: 0 11px 0 8px;
    text-align: center
}
/* Figure
-------------------------------------------------- */

figure,
.figure {
    float: left;
    margin: 20px 0;
    max-width: 100%;
    width: 100%
}
figure img,
.figure img {
	margin: auto;
	float: none;
	max-height: 500px;
	width: auto
}
figure a.lightbox,
.figure a.lightbox {
	width: 300px;
	float: left;
	text-align: center
}
.nofigc {
	width: 100%!important
}
figcaption.caption,
.caption {
    float: right;
    text-align: center;
    padding: 0 20px;
    font-style: italic;
    width: 40%;}

[data-class*="ExternalLink"] {
	padding: 5px 0;
	word-wrap: break-word;
	float: left;
	max-width: 100%;
}
td [data-class*="ExternalLink"] {
word-break: break-all
}
/* Navigation Styles
-------------------------------------------------- */

.frontpage #wrap div.home-buttons {
	background: none transparent;
	padding-bottom:25px;
}
 #wrap div.home-buttons {
    font-size:large;
    padding-top: 10px;
    padding-bottom: 60px;
    background: #fff;
}
.link {
    clear: both;
    float: left;
    width: 100%;
    text-align: center;
    font-family: flb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: #3c3c3c;
    font-size: 16px
}
.home-buttons .span2 img {
	max-width: 96px;
}
.home-buttons .span2 img, .meetkids .text-center a img {
    width: 100%;
    margin-bottom: 10px;
    -webkit-transition: -webkit-transform 0.8s ease-in;
    -moz-transition: -moz-transform 0.8s ease-in;
    -o-transition: -o-transform 0.8s ease-in;
    -ms-transition: -ms-transform 0.8s ease-in;
    transition: transform 0.8s ease-in;
}
.home-buttons .span2 a:hover img, .meetkids .text-center a:hover img {
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
/* Chapter Navigation
-------------------------------------------------- */
.navbar-fixed-top {
    left: 40px;
    top:260px;
}
.attop {
    top:260px
}
div.notattop {
    top:30px
}
.nav li {
    width: 100%;
    margin: 0;
    float: left;
    list-style: none;
    font-size: 17px
}
.nav li a {
    width: 100%;
    color: #404040
}
.nav ul {
    padding: 0
}
.nav > li {
    margin: 0 0 15px
}
.nav > li > a, .nav > li > ul > li {
    font-family: ftb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    border-bottom: 1px solid #fff;
    line-height: 1.2
}
.nav > li > ul > li {
    padding-left: 30px;
}
.navbar .nav > li > ul > li >ul >li >ul >li {
    padding: 0 10px
}
.navbar .nav > li > ul > li >ul >li >ul >li > a {
    padding:5px 0 0
}
.nav > li > ul > li > ul > li {
    font-family: flb, "Helvetica Neue", Helvetica, Arial, sans-serif !important
}
.nav > li > ul > li > ul > li:last-child ul li:last-child {padding-bottom: 5px;}
.navbar .nav > li > ul > li a {
    padding: 8px 10px 8px 0px;
    float: left;
    line-height: 1.1
}
a.nav-eng {
    margin: 0!important;
    text-align: center;
    width: 50%;
    float: left;
}
a.nav-afr {
    margin: 0!important;
    text-align: center;
    width: 50%;
    float: left;
}
.active.nav-eng:after {
    width: 0;
    height: 0;
    border-top: 33px solid #8F2E73;
    border-right: 33px solid transparent;
    content:"";
    float: right;
    background: #C896B9
}
.active.nav-afr:after {
    width: 0;
    height: 0;
    border-top: 33px solid #C896B9;
    border-right: 33px solid transparent;
    content:"";
    float: left;
    background: #8F2E73
}
#afrikaans {
    display: none
}
.language-nav {
	height: 30px;
	overflow: hidden
}
.language-nav a {
    background: #C896B9;
    color: #8F2E73;
    line-height: 30px;
    font-family: ftb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    height: 30px
}
.language-nav .active {
    background: #8F2E73;
    color: #fff
}
.menu-gr4 {
    background: #9CCD8B
}
.menu-gr5 {
    background: #FAC581
}
.menu-gr6 {
    background: #66A7C7
}
.ll {
    background: #CDE6C6
}
.mm {
    background: #B2D1E3
}
.ec {
    background: #FCE2BF
}
.eb {
    background: #F1C1BF
}
/*
Home Page Styles
-------------------------------------------------
*/
.bannerimg {
    background: url(../img/ani12.png) no-repeat;
    width: 440px;
    height: 540px;
    animation: animate-kids 2.5s steps(32) infinite;
    -webkit-animation: animate-kids 2.5s steps(32) infinite;
    -moz-animation: animate-kids 2.5s steps(32) infinite;
}
@keyframes animate-kids {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -14080px 0;
    }
}

@-webkit-keyframes animate-kids {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -14080px 0;
    }
}
@-moz-keyframes animate-kids {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -14080px 0;
    }
}

.frontpage body {
    background: url(../img/homebg.jpg) no-repeat 50% 20px;
}
.frontpage .main-content {
    padding-top: 0!important
}
.grades {
    float: left;
    width:100%
}
.logo {
    margin-left: 0;
    max-width: 100%;
}
.thin {
    font-weight: 200
}
.banner-text {
    color:#fff;
    font-family: fc, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-left: 0;
    text-align: center;
    opacity: 1
}
.banner-text .bold {
    color:#fff;
    font-family: fcb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-left: 0;
    font-weight: normal
}
.banner-image {
    margin-left: 0;
    opacity: 1
}
.grade {
    font-size: 60px;
    float: left;
    margin-left: 16px;
    margin-right: -8px;
    position: relative;
    z-index: 90
}
.grade-number {
    font-size: 98px;
    line-height: 87px;
    margin-left: -6px !important;
    float: left;
    position: relative;
    z-index: 1
}
.books {
    font-weight: bolder;
    font-size: 38px;
    margin-top: -20px!important
}
.lam {
    font-size: 22px;
    font-family: flb, "Helvetica Neue", Helvetica, Arial, sans-serif!important
}
.click-here {
    font-weight: bolder;
    font-size: 22px;
    margin-top:20px!important
}
.gr4 .grade-number, .gr4 .click-here, .gr4 .books {
    color:#5aac3e
}
.gr5 .grade-number, .gr5 .click-here, .gr5 .books {
    color:#f59f2b
}
.gr6 .grade-number, .gr6 .click-here, .gr6 .books {
    color:#00679d
}
/* Meet The Kids Styles
-------------------------------------------------- */
.pagebg {
    background: url(../img/opbg.jpg) repeat-y 50% -300px;
    background-size: 100%;
    -ms-behavior: url(/js/backgroundsize.min.htc);
}
.headbg {
    background: url(../img/headbg.jpg) no-repeat 50% 0;
    background-size: 100%;
    -ms-behavior: url(/js/backgroundsize.min.htc);
}
.content {
    padding: 10px
}
.page-title {
    font-family: fcb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-transform: uppercase
}
.meetkids .kid-name {
    text-align: center;
    width: 100%;
    float: left;
    text-transform: uppercase;
    font-family: fcb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #3c3c3c
}
.span8 .kid-name {
    font-family: fcb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 30px;
    text-transform: uppercase;
    font-weight: normal;
    margin-bottom: 0
}
.meetkids .text-center {
    max-width: 80px;
    margin-right: 10px;
    float: left
}
.farrah-container {
    background: url(../img/greenline.png) no-repeat 80% 100%;
    background-size: 620px;
    -ms-behavior: url(/js/backgroundsize.min.htc);
    padding-bottom: 60px
}
.tom-container {
    background: url(../img/blueline.png) no-repeat 55% 100%;
    background-size: 760px;
    -ms-behavior: url(/js/backgroundsize.min.htc);
    padding-bottom: 100px
}
.jojo-container {
    background: url(../img/yellowline.png) no-repeat 85% 100%;
    background-size: 530px;
    -ms-behavior: url(/js/backgroundsize.min.htc);
    padding-bottom: 60px
}
#farrah {
    color: #5aac3e;
}
#tom {
    color: #00679d
}
#jojo {
    color: #f59f2b
}
#sophie {
    color: #d0332c
}
.kid-relation {
    font-size: 20px;
    font-family: flb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    margin-top: 0;
    line-height: 1
}
.kid-bio {
    margin-top: 20px
}
/* Science Adventures Styles
-------------------------------------------------- */
.grade-4:before, .grade-5:before, .grade-6:before, .projectoverview:before, .sasolinzalo:before, .siyavula:before, .contact:before, .thinking-skills:before {
    border-radius: 100%;
    content:"";
    float: left;
    height: 20px;
    width: 20px;
    margin-right: 5px
}
.grade-4:before, .projectoverview:before {
    background:#5AAC3E;
}
.grade-5:before, .sasolinzalo:before {
    background: #f59f2b
}
.grade-6:before, .siyavula:before {
    background: #00679d
}
.contact:before, .thinking-skills:before {
    background: #d0332c
}
.grade-4, .grade-5, .grade-6, .projectoverview, .sasolinzalo, .siyavula, .contact, .thinking-skills {
    color: #3c3c3c;
    font-size: 17px;
    font-family: ftb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    float: left;
    margin-right: 5px
}
.adv-intro {
    margin-top: 50px;
}
.advhy, #adv-gr4-comic h2 {
    color: #5aac3e;
    font-family: ftb, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#adv-gr4-comic h2 {
	text-transform: uppercase
}
#adv-gr5-comic h2 {
    color: #f59f2b;
    font-family: ftb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase
}
#adv-gr6-comic h2 {
    color: #0174b0;
    font-family: ftb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase
}
#thinking-skills {
	color: #D0332C;
	font-family: ftb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase
}
.etabs {
    margin: 0;
    padding: 0;
    margin: 0!important;
    height: 567px;
}
#adv-gr4-comic, #adv-gr5-comic, #adv-gr6-comic {
    margin-bottom: 60px;
}
.etabs-gr4 {
    background: #5aac3e;
}
.etabs-gr5 {
    background: #f59f2b
}
.etabs-gr6 {
    background: #0174b0
}
.etabs-thinkingskills {
    background: #d0332c
}
.etabs-gr4 a.active {
    background: #6bbd4f;
}
.etabs-gr5 a.active {
    background: #ffb551;
}
.etabs-gr6 a.active {
    background: #198bc6;
}
.etabs-thinkingskills a.active {
    background: #db4740
}
.etabs .tab {
    display: inline-block;
    zoom:1;
    *display:inline;
    width: 100%;
    float: left;
    margin: 0
}
.etabs .tab a {
    font-size: 13px;
    line-height: 2em;
    display: block;
    outline: none;
    font-family: ftb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 10px;
    color: #3c3c3c;
    text-transform: uppercase
}
.etabs .tab a:hover {
    text-decoration: underline;
}
.etabs .tab.active {
    background: #6abb4e;
    position: relative;
    border-color: #666;
}
.etabs .tab a.active {
}
.tab-container .panel-container {
    background: #fff;
    border: solid #666 1px;
    padding: 10px;
}
.comic-thumb {
    border: 2px solid #3c3c3c;
    margin-right: 10px;
    border-radius: 4px;
}
/* About the Project Styles
-------------------------------------------------- */
#project-overview h2 {
    color: #5aac3e
}
#project-overview a {
    color: #5aac3e;
    font-family: ftb
}
#sasol-inzalo h2 {
    color: #f59f2b
}
#sasol-inzalo a {
    color: #f59f2b;
    font-family: ftb
}
#siyavula h2 {
    color: #016fa8
}
#siyavula a {
    color: #016fa8;
    font-family: ftb
}
#contact h2 {
    color: #d0332c
}
#contact a {
    color: #d0332c;
    font-family: ftb
}
.about-the-project .row-fluid {
    padding-top: 30px
}
.about-the-project a.smooth {
    margin: 10px
}
.about-the-project .span12 p {
	max-width: 850px
}
/* Read a Book Styles
-------------------------------------------------- */

.chapter-pix .span6 {
    text-align: center;
    box-shadow: 0 0 15px #ccc;
    margin-bottom: 40px;
    float: left
}
.chapter-pix .span6 span {
    padding: 10px 0;
    float: left;
    width: 100%;
    color: #fff;
    font-family: fcb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 30px;
    line-height: normal
}
.chapter-pix .span6 img {
	width: 100%;
}
.grade-info-con {
    text-align: center;
    margin-bottom: 40px;
}
.chll {
    background: #5aac3e
}
.chmm {
    background: #027cbd
}
.chec {
    background: #f59f2b
}
.cheb {
    background: #d0332c
}
/* Products and Pricing Styles
-------------------------------------------------- */
.products .span6 {
    margin-bottom: 30px
}
.products #workbooks {
    background: #cde6c5
}
#workbooks h2, #workbooks h3,#workbooks .row-fluid p > a, #workbooks .order.btn {
    color: #5aac3e
}
#workbooks .price {
    background: #5aac3e
}
.products #teachers-guides {
    background: #fce2bf
}
#teachers-guides h2, #teachers-guides h3, #teachers-guides .row-fluid p > a, #teachers-guides .order.btn {
    color: #f59f2b
}
#teachers-guides .price {
    background: #f59f2b
}
.products #posters {
    background: #b3d7ed
}
#posters h2, #posters h3,#posters .row-fluid p > a, #posters .order.btn {
    color: #027cbd
}
#posters .price {
    background: #027cbd
}
#posters ul {list-style: none}
#posters ul li {float: left;clear: none;margin: 5px}
.products #concept-maps {
    background: #f1c1bf
}
#concept-maps h2, #concept-maps h3,#concept-maps .row-fluid p > a, #concept-maps .order.btn {
    color: #d0332c
}
#concept-maps .price {
    background: #d0332c
}
.products #sci-adv {
    background: #c796b9
}
#sci-adv h2, #sci-adv h3,#sci-adv .row-fluid p > a, #sci-adv .order.btn {
    color: #902e73
}
#sci-adv .price {
    background: #902e73
}
.products-pricing .email {
    font-family: ftb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    ;
    color: #5aac3e
}
.price {
    font-family: fcb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    height: 200px;
    margin-left: 0px!important;
    border-right: 10px solid #fff;
    border-bottom: 10px solid #fff;
    padding: 30px 0;
    text-transform: uppercase;
}
.price > span {
    width: 100%;
    text-align: center;
    float: left;
    font-size: 40px;
    line-height: 1;
}
.price .black {
}
.price .white {
    color: #fff;
    margin-bottom: 30px
}
.price .white > span {
    font-size: 24px;
    vertical-align: top
}
.price .order.btn {
    display: table;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1
}
.products ul {
    list-style: none;
    padding-left: 0;
}
.products ul li {
    font-family: fcb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px
}
.product-title {
    padding: 0 20px 20px;
}
.product-title h2 {
    margin-bottom: 0
}

/* Products and Pricing Styles
-------------------------------------------------- */
.tap {
}
.tap .dl {
    list-style-image: url(../img/dl.png)
}
.tap .dl li {
    float: left;
    clear: none;
    width: 50%;
    font-family: fcb, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #404040
}
.tap .dl li a {
    color: #404040
}
#sci-adv .dl li,
#concept-maps .dl li {
    width: auto;
    clear: both
}
.tap span {
    margin-bottom: 20px;
    float: left;
    width: 100%
}

/* Animations
-------------------------------------------------- */
 @-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
    }
}
@-moz-keyframes shake {
    0%, 100% {
        -moz-transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -moz-transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -moz-transform: translateX(10px);
    }
}
@-o-keyframes shake {
    0%, 100% {
        -o-transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -o-transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -o-transform: translateX(10px);
    }
}
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}
.shake {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
}
@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% {
        -webkit-transform-origin: top center;
    }
    20% {
        -webkit-transform: rotate(15deg);
    }
    40% {
        -webkit-transform: rotate(-10deg);
    }
    60% {
        -webkit-transform: rotate(5deg);
    }
    80% {
        -webkit-transform: rotate(-5deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes swing {
    20% {
        -moz-transform: rotate(15deg);
    }
    40% {
        -moz-transform: rotate(-10deg);
    }
    60% {
        -moz-transform: rotate(5deg);
    }
    80% {
        -moz-transform: rotate(-5deg);
    }
    100% {
        -moz-transform: rotate(0deg);
    }
}
@-o-keyframes swing {
    20% {
        -o-transform: rotate(15deg);
    }
    40% {
        -o-transform: rotate(-10deg);
    }
    60% {
        -o-transform: rotate(5deg);
    }
    80% {
        -o-transform: rotate(-5deg);
    }
    100% {
        -o-transform: rotate(0deg);
    }
}
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
.swing {
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    -moz-animation-name: swing;
    -o-animation-name: swing;
    animation-name: swing;
}
.animated {
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:1.5s;
    -moz-animation-duration:1.5s;
    -ms-animation-duration:1.5s;
    -o-animation-duration:1.5s;
    animation-duration:1.5s;
}/* Responsive Styles
-------------------------------------------------- */

[data-type*="keyquestions"] h1, [data-type*="keyquestions"] h2, [data-type*="keyquestions"] h3, [data-type*="keyquestions"] h4, [data-type*="keyquestions"] h6, [data-type*="keyconcepts"] h1, [data-type*="keyconcepts"] h2, [data-type*="keyconcepts"] h3, [data-type*="keyconcepts"] h4, [data-type*="keyconcepts"] h6, {
    padding-top: 20px
}



div[type*="Questions"]:before {
	content: "Questions";
	text-transform: uppercase;
	float: left;
	font-family: grb,"Helvetica Neue",Helvetica,Arial,sans-serif;
	padding-top: 10px;
	width: 100%
}

.afrikaans div[type*="Questions"]:before {
	content: "Vrae";
}


div[type*="Questions"] {
    border: 10px solid #FBC1C1;
    background: transparent;
    float: left;
    padding: 10px;
    margin: 15px 0;
}
div[type*="Questions"] > p {
    padding: 10px 0px
}
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
    font-smooth: always;
}


div[data-type*="visit"]:before {
	background: url(../img/visitlefttop.png) no-repeat;
	background-size: 100%;
	-ms-behavior: url(/js/backgroundsize.min.htc);
	content:"Visit";
    text-align: center;
    font-size: 15px;
    float: left;
    margin-top: -19px;
    padding-top: 10px;
    text-transform: uppercase;
    font-family: grb,"Helvetica Neue",Helvetica,Arial,sans-serif;
    width: 100%
}

.afrikaans div[data-type*="visit"]:before {
	content:"Besoek";
}


div[data-type*="visit"] {
	background: url(../img/visitleftmiddle.png) repeat-y;
    background-size: 100%;
    -ms-behavior: url(/js/backgroundsize.min.htc);
    width: 100%;
    float: left;
    font-size: 14px
}
div[data-type*="visit"]:after {
    height: 310px;
    width: 100%;
    content: "";
    float: left
}

div[data-type*="visit"] p,
div[data-type*="visit"] a {
	width: 100%;
	padding: 0 13px 0 6px;
	text-align: center
}
div[data-type*="visit"] a {
	width: 100%;
	word-wrap: break-word;
	float: left
}
article {
    padding: 0 15px;
    max-width: 100%
}
table {
	margin: 20px 0
}

.teachers-guide, .solution {
	display: none
}
.sidebar div:first-child:not([data-type]) {margin-bottom: 30px}
.sidebar [data-type]:first-child {margin-top: 30px!important}


.problem {
    float: left;
    width: 100%;
    clear: both;
    margin: 15px 0;
}
td .lightbox {
	clear: both
}

.solution {
	float: left
}
.solution p:before {
    content:"*";
    float: left;
    padding: 0 4px
}
.solution > p {
    background: none repeat scroll 0 0 #CEFFC8;
    border: 1px solid #30592B;
    float: left;
    padding: 5px;
    margin: 10px 0
}
.title {
    clear: both;
    width: 100%;
    float: left;
    font-family: grb,"Helvetica Neue",Helvetica,Arial,sans-serif;
    padding-left: 20px;
}
.teachers-guide {
    border: 1px solid #ccc;
    float: left;
    padding: 10px;
    margin: 10px 0
}
.teachers-guide p {
    margin: 0
}

p {
    float: left;
}
strong {
	 font-family: grb,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
a,a:focus {
    outline: none
}
section > p {
   clear:both;
    float: left;
    width: 100%;
    margin: 10px 0 20px
}
li {
	line-height: 1.5;
	margin-bottom: 10px
}
hr {
    border-color: #000;
    clear: both
}
tr:first-child {

}
h2.title {
	font-size: 24px
}
h1.title {font-size: 20px}
table {
	width: 99%;
	padding:0 5px
}

td p {
	width: 100%;
	text-align: center
}

td img {
	margin: auto;
	float: none;
	max-height: 170px;
}
td {
    border: 1px solid #000;
    padding: 8px 5px;
    width: 100%;
    min-height: 40px;
    text-align: center;
    float: left
}
td > ul {
	text-align: left
}
td:first-child:nth-last-child(2),
td:first-child:nth-last-child(2) ~ td {
    width: 50%;
}

td:first-child:nth-last-child(3),
td:first-child:nth-last-child(3) ~ td {
    width: 33.3333%;
}
td:first-child:nth-last-child(4),
td:first-child:nth-last-child(4) ~ td {
    width: 25%;
}
td:first-child:nth-last-child(5),
td:first-child:nth-last-child(5) ~ td {
    width: 20%;
}
td:first-child:nth-last-child(6),
td:first-child:nth-last-child(6) ~ td {
    width: 16.66%;
}
td p {
    margin: 0
}
ul, ol {
	float: left;
	margin: 0;
	padding: 0 0 10px 25px;
	max-width: 100%;
	width: 100%
}
ol > li > p {
	float: none
}
li > ol {list-style: lower-latin}
.frontpage .container.main-content,
.frontpage .grades {
	background: none transparent
}
.container,
.section.span9  {
	background: #fff;
}
.container > .row > .section > h1.title {
    clear: both;
    width: 100%
}

aside.sidebar {
    margin-left: 0!important;
}
section,.section {
    float: left;
    max-width: 100%
}

/* ======================================================= */

/* #FONT-FACE TEMPLATE */

/* ======================================================= */

/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */
/*
 @font-face {
    font-family:'grl';
    src: url('../fonts/gotham-rounded-light_21020.eot');
    src: url('../fonts/gotham-rounded-light_21020.eot?iefix') format('eot'), url('../fonts/gotham-rounded-light_21020.svg') format('svg'), url('../fonts/gotham-rounded-light_21020.ttf') format('truetype'),url('../fonts/gotham-rounded-light_21020.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*/
 @font-face {
    font-family:'grlp';
    src: url('../fonts/alrightsans-light-v3-webfont.eot');
    src: url('../fonts/alrightsans-light-v3-webfont.eot?iefix') format('eot'), url('../fonts/alrightsans-light-v3-webfont.svg') format('svg'), url('../fonts/alrightsans-light-v3-webfont.ttf') format('truetype'),url('../fonts/alrightsans-light-v3-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
 @font-face {
    font-family:'grb';
    src: url('../fonts/gotham-rounded-bold_21016.eot');
    src: url('../fonts/gotham-rounded-bold_21016.eot?iefix') format('eot'),  url('../fonts/gotham-rounded-bold_21016.svg#webfontZam02nTh') format('svg'), url('../fonts/gotham-rounded-bold_21016.woff') format('woff'), url('../fonts/gotham-rounded-bold_21016.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
 @font-face {
    font-family:'fc';
    src: url('../fonts/futura-condensedlight.eot');
    src: url('../fonts/futura-condensedlight.eot?iefix') format('eot'), url('../fonts/futura-condensedlight.svg#webfontZam02nTh') format('svg'), url('../fonts/futura-condensedlight.woff') format('woff'), url('../fonts/futura-condensedlight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 @font-face {
    font-family:'fcb';
    src: url('../fonts/futura_lt_condensed_extra_bold.eot');
    src: url('../fonts/futura_lt_condensed_extra_bold.eot?iefix') format('eot'),url('../fonts/futura_lt_condensed_extra_bold.svg#webfontZam02nTh') format('svg'), url('../fonts/futura_lt_condensed_extra_bold.woff') format('woff'), url('../fonts/futura_lt_condensed_extra_bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 @font-face {
    font-family:'ftb';
    src: url('../fonts/futura_lt_bold.eot');
    src: url('../fonts/futura_lt_bold.eot?iefix') format('eot'), url('../fonts/futura_lt_bold.woff') format('woff'), url('../fonts/futura_lt_bold.ttf') format('truetype'), url('../fonts/futura_lt_bold.svg#webfontZam02nTh') format('svg');
    font-weight: normal;
    font-style: normal;
}
 @font-face {
    font-family:'flb';
    src: url('../fonts/futura_lt_book.eot');
    src: url('../fonts/futura_lt_book.eot?iefix') format('eot'), url('../fonts/futura_lt_book.woff') format('woff'), url('../fonts/futura_lt_book.ttf') format('truetype'), url('../fonts/futura_lt_book.svg#webfontZam02nTh') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Sticky styles
-------------------------------------------------- */

#footer .grey .container {
	background: none transparent!important
}
footer,#footer {
    color: #fff;
    height: auto;
}
#footer .grey, #footer .grey {
    background-color: #3c3c3c;
}
#footer .white, #footer .white {
    background-color: #fff;
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
}
#footer .white .span3 img, #footer .white .span3 img {
	padding: 0 20px
}
#footer .credits, #footer .credits {
    color: #3c3c3c;
    padding-top: 20px;
    font-family: flb,"Helvetica Neue",Helvetica,Arial,sans-serif;
    background: #fff
}
footer a, #footer a {
    color: #fff
}
footer ul, #footer ul {
    list-style: none;
    margin-left: 0
}
footer ul li, #footer ul li {
	line-height: 1.6;
	font-family: flb,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 18px
}

/* Custom page CSS
-------------------------------------------------- */

/* Not required for template or sticky footer method. */

.container .credit {
    margin: 20px 0;
    padding: auto;
    clear: both;
    width: 100%;
    font-family: ftb,"Helvetica Neue",Helvetica,Arial,sans-serif
}
code {
    font-size: 80%;
}
.outline {
    outline-color: black;
    outline-style: solid;
    outline-width: 2px;
}
div.sasollogo {
    padding: 5% 0;
}
div.container.main-content {
    min-height: 100px;
}
div.main-content {
    padding: 20px;
}
.grade-button {
    margin-top:40px;
    background: #fff;
    box-shadow: 0px 0px 20px 0px #333;
    padding: 30px 0
}
.grade-button p {
	width:100%;
	max-width:300px;
	float:none;
	margin:auto
}
.grade-button span {
    font-family: ftb, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div.grade-button {
    position: relative;
}
div.grade-button > a {
    margin: auto;
    color: black;
    float: left;
    width: 100%
}
.grade-button {
    font-size:xx-large;
    line-height:1;
}

 img {
    max-width: 100%;
    height: auto;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (min-width: 1400px) {
	.frontpage body {
	    background-size: 100% auto;
	    background-position: 50% 0!important
	}
}
@media (min-width: 1200px) {
	.frontpage body {
	    background-position: 50% 20px;
	}
	.grade {
		font-size: 55px;
		margin-left: 16px;
		margin-right: -8px;
		z-index: 90
	}
	.grade-number {
		font-size: 93px;
		line-height: 87px;
		margin-left: -6px !important;
	}
	[data-type*="newwords"]:before {
		margin-top: -29px
	}
	[data-type*="newwords"] ul {
		padding: 0px 12px 0px 25px;
		list-style: disc;
	}
	[data-type*="didyouknow"]:before {
		margin-top: -30px
	}
	.etabs .tab a {
		font-size: 14px;
	}
}
@media (max-width:1024px) {
	.etabs {height: auto!important}

	.headbg,.pagebg {
		background: none
	}
	.bannerimg {
    	background: url(../img/24TK.png) 50% 50% no-repeat;
		width: 100%;
		height: 540px;
		background-size: 100%;
		-ms-behavior: url(/js/backgroundsize.min.htc);
		animation: 0s ease 0s normal none 1 none;
		-webkit-animation: 0s ease 0s normal none 1 none;
		-moz-animation: 0s ease 0s normal none 1 none
    }
    [data-type*="newwords"]:before {
	    margin-top: -22px
    }
    [data-type*="didyouknow"]:before {
    	margin-top: -25px
    }
    div[data-type*="visit"]:before {
    	margin-top: -18px;
   }
}
@media (max-width:979px) {
	.bannerimg {
		height: 440px
	}
	.etabs .tab a {
	    font-size: 12px;
    }
    .attop,
    .navbar-fixed-top {
	    top:231px
    }
    .flexslider .slides {
    	max-height: 340px
    }
    .comic-thumb {
	    width: 30px
    }
    [data-type*="didyouknow"]:before {
		margin-top: -15px
    }

    .keyquestionskid,
    .keyconceptskid,
    .Questionskid,
    .Activitykid,
    .Revisionkid {
	    height: 1px!important;
	    opacity: 0
    }
    div[data-type*="visit"]:after {
	    height: 325px;
    }
    .maincontent.span9 {
	    float: left;
	    margin: 0;
	    max-width: 100%;
	    padding: 0;
	    width: 100%;
    }
    [data-type*="newwords"] ul {
    	margin-left: 0px;
    	list-style:none outside none
    }
    .grade {
		font-size: 42px;
		margin-left: 16px;
		margin-right: 0;
		z-index: 90
	}
	span.grade-number {
		font-size: 60px;
		line-height: 55px;
		margin-left: 0!important
	}
	.language-nav a,
    .language-nav a:after {
	    width: 100%;
	    border: 0 none!important;
	    padding: 8px 0;
	    float: left;
	    height: auto
    }
    .language-nav {
    	margin-bottom: 10px;
    	float: left;
    	width: 100%
    }
    aside.sidebar {
	    clear: both;
	    float: none!important;
	    width: 200px !important;
	    margin: auto!important;
	}
	.sidebar [data-type]:first-child {
		margin-top:30px!important
	}
	[data-type*="newwords"]:before {
		margin-top: -27px
	}
	[data-type*="didyouknow"]:before{
		margin-top:-32px
	}
	div[data-type*="visit"]:before {
		margin-top:-22px
	}
	[data-type*="keyquestions"],
	[data-type*="keyconcepts"] {
		width: 90%
	}
	.language-nav {
		height: auto;
		overflow: visible
	}

}
@media (max-width: 767px) {
	.frontpage body {
        background:none!important
    }
    .flexslider .slides {
	    max-height: none
    }
    .banner-text {
        padding:30px 0 10px;
        background:#f49f2b
    }
    .banner-text h1 {
        text-align:center
    }
    .banner-image {
        text-align:center;
        background:#f49f2b
    }
    .grades div.grade-button, .grades div.grade-button:first-child {
        width:90%;
        margin:40px 5%
    }
    .frontpage .main-content {
        background:#0274b0!important
    }
    .grades {
        background:#5bad3f
    }
    footer#footer .grey, #footer .grey {
        padding:20px
    }
    #footer .white .span3 img, footer#footer .white .span3 img {
		padding: 20px 0
	}

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
        margin-right:-20px;
        margin-left:-20px
    }
	.bannerimg {
	    float: none;
	    height: 410px;
	    margin: 0 25%;
	    width: 50%;
	}
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    section > figure a,
    section > figure figcaption {
    	width: 100%!important;
    	margin: 5px 0
    }
    .etabs {
	    float: left!important
    }
    .Jojokeyleft,
    .Jojoactivitiesleft {
    height: auto; display: none
    }
    .page-title,
    .white .span3 {
    	text-align: center;
    }
	[data-type*="newword"]:before {
		margin-top: -31px;
	}
	[data-type*="newword"]:after {
		height: 360px;
	}

    [data-type*="didyouknow"]:before {
		margin-top: -31px;
    }
    [data-type*="didyouknow"]:after {
		height: 260px;
    }

    [data-type*="newword"]:before ,
    [data-type*="newword"],
    [data-type*="newword"]:after,
    [data-type*="didyouknow"]:before,
    [data-type*="didyouknow"],
    [data-type*="didyouknow"]:after{
		width:200px
    }
    .farrah-container,.tom-container,.jojo-container {background: none!important; padding-bottom: 10px;margin-bottom: 10px; }
    .farrah-container {border-bottom: 3px dashed #5AAC3E}
    .tom-container {border-bottom: 3px dashed #00679D}
    .jojo-container {border-bottom: 3px dashed #F59F2B}
    .home-buttons .span2 {width: 50%;float: left}
    .row {margin-left: -35px}
    [data-type*="keyquestions"], [data-type*="keyconcepts"] {width: 100%}
    .sidebar [data-type] {margin-top: 30px!important}
    [data-type*="newwords"] ul {margin-left: 20px; list-style: disc}
    .grade-button {
	    float: left!important
    }
    .books,
    .grade,
    .grade-number,
    .lam {
	    width: 100%;
	    float: left;
	    margin: 0!important;
    }
    #wrap div.home-buttons {
	    padding: 10px 0
    }
    .logo {
	    text-align: center
    }
    .home-buttons .span2 {
	    margin-bottom: 10px;
    }
    .grades div.grade-button, .grades div.grade-button:first-child {
	    margin: 20px 5%;
    }
    footer ul, footer#footer ul {
	    padding: 0
    }
    .navbar-inner {
	    padding: 0!important
    }
    div.navbar-fixed-top {
    	left: 0;
		position: relative;
		top:0
    }
    .navbar .nav {
    	display: none
    }
    .nav > li,
    .language-nav {
    	margin-bottom: 0
    }

    .about-the-project a.smooth {
		clear: both
	}
	.products ul.span8 li,
	.product-title {
		text-align: center
	}

}
@media only screen and (min-width: 320px) and (max-width: 568px) {
	.language-nav a {padding: 0!important}
}

@media (max-width: 480px) {
	td {
		word-break: break-all;
	}
}
@media (max-width: 479px) {

}