/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
html {
  height: 100%;
}
body {
  line-height: 1;
position: relative;
width: 100%;
height: 100%;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* End Reset */

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


/* Typography */

@font-face {
    font-family: 'VAGRoundedBTRegular';
    src: url('font/vagroundedbt-webfont.eot');
    src: url('font/vagroundedbt-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/vagroundedbt-webfont.woff') format('woff'),
         url('font/vagroundedbt-webfont.ttf') format('truetype'),
         url('font/vagroundedbt-webfont.svg#VAGRoundedBTRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1 {
  font-size: 50px;
line-height: 56px;
  color: #f58020;
  font-weight: normal;
  margin-bottom: 40px;
  text-align: center;
  font-family: 'VAGRoundedBTRegular', Arial, Helvetica;
}

h1.sub {
  font-size: 50px;
line-height: 52px;
  text-align: left;
  float: left;
}

h2 {
font-size: 62px;
line-height: 71px;
color: #ffffff;
font-weight: normal;
text-align: center;
font-family: 'VAGRoundedBTRegular', Arial, Helvetica;
z-index: 100;
width: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -34px;
margin-left: -90px;
background-color: #12803f;
border: 15px solid #ffffff;
-moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 2px #777;
box-shadow: 0 0 2px #777;
padding: 5px 0;
border-radius: 10px;
}

h3 {
 font-size: 28px;
  line-height: 40px;
  color: #ffffff;
  font-weight: normal;
  text-align: center;
  font-family: 'VAGRoundedBTRegular', Arial, Helvetica;
  margin-top: 50px;
}

h3.lessMarginTop {
  margin-top: 30px;
}


p {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  margin-bottom: 20px;
}


.lessonTitle p {
  font-size: 16px;
  line-height: 22px;
  font-weight: bold;
}

.lessonText p {
  font-size: 14px;
  line-height: 22px;
}

.panelText a {
  text-decoration: underline;
  color: #111111;
}

.panelText  a:hover {
  text-decoration: underline;
  color: #888888;
}

a {
  text-decoration: none;
  color: #0f192e;
}

a:hover, a:active {
  text-decoration: none;
}

.introHeadText a, #accordianContent a {
  font-weight: bold;
  text-decoration: underline;
  color: #0f192e;
}

.introHeadText a:hover, #accordianContent a:hover {
  text-decoration: underline;
  color: #666666;
}

/* Layout */

html {
  overflow-y: scroll;
}

body {
font-family: 'Raleway', sans-serif;
background-color: #fff;
background-image: url('../images/bullet.png');
}

#wrapper {
width: 900px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -450px;
}

#header {
width: 900px;
height: 70px;
float: left;
}



#main {
width: 860px;
height: 470px;
float: left;
background-color: #fdefe2;
border-radius: 10px;
border: 20px solid #fdefe2;
-moz-box-shadow:    0px 0px 2px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);
  
box-shadow: 0 0px 2px #777;
}

#innerMain {
width: 860px;
height: 470px;
padding: 0;
float: left;
border-radius: 3px;
}

.category {
width: 370px;
height: 175px;
padding: 20px;
float: left;
border-radius: 5px;
float: left;
margin: 10px;
position: relative;
text-align: center;
display: block;
}

a.category:hover {
  zoom: 1;
  filter: alpha(opacity=80);
  opacity: 0.8;
}

#casestudy {
background-color: #a66bbe;
background-image: url('../images/casestudy.png');
background-position: center center;
}

#rewards {
background-color: #e67e22;
background-image: url('../images/rewards.png');
background-position: center center;
}

#lessonplans {
background-color: #3498db;
background-image: url('../images/lessonplans.png');
background-position: center center;
}

#videos {
background-color: #2ecc71;
background-image: url('../images/videos.png');
background-position: center center;
}

#otherguides {
  position: absolute;
bottom: -20px;
left: 30px;
}

#otherguides a {
  font-size: 16px;
line-height: 18px;
  color: #f58020;
font-weight: bold;
  text-align: left;
z-index: 100;
margin-left: 10px;
text-decoration: underline
}

#otherguides .otherLabel a {
   font-weight: normal;
   color: #000000;
   text-decoration: none;
}


#otherguides a:hover {
text-decoration: none
}

#otherguides a.active {
text-decoration: none;
font-weight: normal;
}

.otherLabel {
  font-weight: normal;
}

#logo {
  position: absolute;
  bottom: -80px;
  right: -15px;
  width: 200px;
}

#logo img {
  width: 100%;
  height: auto;
}

#lessonNav {
width: 830px;
float: left;
margin: 20px 0px 20px 20px;
}

#lessonNav .lessonNavItem {
width: 142px;
height: 74px;
overflow: hidden;
border-radius: 5px;
float: left;
margin: 0px 24px 0 0;
box-shadow: 0 0 2px #777;
}


#lessonNav img {
width: 142px;
height: auto;
border-radius: 5px;
float: left;
}

#lessonNav a {
zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
  display: block;
  float: left;
}

#lessonNav a:hover {
zoom: 1;
  filter: alpha(opacity=100);
  opacity: 1;
}

#lessonNav a.active {
zoom: 1;
  filter: alpha(opacity=100);
  opacity: 1;
}

#lessonContainer {
width: 810px;
padding: 0 20px;
float: left;
position: relative;
}

.lessonItemButtonsContainer {
width: 510px;
padding: 20px 20px 10px 270px;
height: 20px;
float: left;
background-color: #f58020;
border-radius: 10px 10px 0 0;
color: #fff;
margin: 0 0px;
}

.lessonItemButtonsContainer ul li {
float: left;
padding-right: 10px;
margin-right: 10px;
border-right: 1px solid #fff;
text-decoration: underline;
}

.lessonItemButtonsContainer ul li.last {
border-right: none;
}

.lessonItemButtonsContainer .lessonItemButtons {
  cursor: pointer;
}

.lessonItemButtonsContainer li.active {
  text-decoration: none;
  font-weight: bold;
}

.lessonItemButtonsContainer li:hover {
  text-decoration: none;
}


.lessonTitle {
width: 510px;
 background-color: #ffffff;
 float: left;
   
padding: 20px 20px 0 270px;
   
margin: 0px;
}

.lessonText {
width: 510px;
padding: 0px 20px 0px 270px;
min-height: 300px;
margin: 0 0px 40px;
float: left;
background-color: #ffffff;
border-radius: 0 0 10px 10px;
}

.lessonImageItem {
width: 220px;
height: 171px;
overflow: hidden;
float: left;
border-radius: 5px;
position: absolute;
top: 75px;
left: 30px;
-moz-box-shadow:    0px 0px 1px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.3);
  box-shadow:  0px 0px 1px 1px rgba(0,0,0,0.3);
background-color: #ffffff;
}

.lessonImage {
width: 100%;
height: auto;
border-radius: 5px;
}


.lessonText p {
margin-bottom: 20px;
}

.button {
display: block;
margin-left: 20px;
border-radius: 3px;
background-color: #12803f;
color: #ffffff;
float: left;
padding: 12px 20px 10px;
text-align: center;
font-size: 19px;
font-weight: normal;
font-family: 'VAGRoundedBTRegular', Arial, Helvetica;
box-shadow: 0 0 1px #777;
}

.lessonButton {
position: absolute;
bottom: auto;
left: 30px;
top: 260px;
width: 182px;
margin-left: 0;
}

.bx-viewport li {
  margin: 0 5px;
}

.back {
  float: right;
  margin-top: 10px;
}

.button:hover {
background-color: #0b5128;
}


#videoContainer {
width: 100%;
}

.videoTitle {
  margin-top: 20px;
}

.videoThumb {
width: 108px;
margin: 5px;
float: left;
display: block;
}

.videoThumb {
width: 108px;
margin: 5px 7px;
float: left;
display: block;
}

.videoThumb:hover {
zoom: 1;
  filter: alpha(opacity=80);
  opacity: 0.8;
}

.videoThumb img {
width: 100%;
}

.videoThumb a {
  color: #fff;
font-weight: bold;
text-shadow: 0 0 2px #000;
font-size: 14px;
}


.intro {
padding: 20px 2.5% 20px;
width:90%;
margin: 20px 2.5% 0;
border-radius: 10px;
float: left;
}

.introHeadImage {
width: 200px;
margin-right: 20px;
float: left;
}

.introHeadImage img {
-moz-box-shadow:    0px 0px 2px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);
  box-shadow:         0px 0px 2px 1px rgba(0,0,0,0.1);
background-color: #ffffff;
width: 100%;
}

.introHeadText {
width: 545px;
float: left;
}


#accordianContent { 
  width:95%; 
  margin: 20px 2.5% 80px; 
  border-radius: 10px;
  float: left;
}

#accordianContent li {
  position:relative;
  overflow:hidden;
  margin-bottom:15px;
  border-radius: 10px;
  box-shadow: 0 0px 2px #777;
}

#accordianContent .downArrow {
  position: absolute;
  top: 25px;
  right: 10px;
}

#accordianContent .head { 
  text-decoration:none; 
  font-size: 16px; 
  line-height: 24px;
  display:block;
  cursor: pointer;
  padding: 20px 40px 20px 20px;
  background-color: #ffffff;
  color: #222;
}

#accordianContent .head:hover { 
  background-color: #fdf1e6;
}


#accordianContent .content { 
  display:none;
  background-color: #ffffff;

 padding-top: 20px;
}

#accordianContent h4 { 
  float: left;
  margin: 0;
}

#accordianContent .content p { 
  padding: 0 20px 20px;
  margin: 0;
}


#wrapper.long, .long #main,.long #innerMain {
  height: auto;
} 

#wrapper.long {
top: 100px;
margin-top: 0;
padding-bottom: 20px;
}


#rewardHeader {
width: 810px;
margin: 20px;
float: left;
margin-bottom: 20px;
}

#rewardHeader #rewardHeaderImageContainer {
width: 370px;
height: 245px;
float: left;
}

#rewardHeader #rewardHeaderImageContainer img {
width: 90%;
height: auto;
padding: 5px 2%;
box-shadow: 0 0 1px #888;
background-color: #ffffff;
}

#rewardHeader h3 {
  text-align: left;
  color: #000000;
  padding-left: 20px;
  float: left;
  width: 420px;
  margin-top: 0;
  font-size: 32px;
  line-height: 40px;
}

#rewardHeader .rewardButton {
  margin-top: 20px;
}

#rewardBody {
width: 810px;
margin: 0 20px;
min-height: 100px;
float: left;
}

#rewardPanels {
width: 810px;
margin: 0 20px 40px;
float: left;
}

#rewardPanels .rewardPanel {
width: 810px;
height: 400px;
float: left;
background-color: #fff;
border-radius: 10px;
margin-bottom: 20px;
border: 0px solid #fdf5ee;
box-shadow: 0 0 1px #777777;
}

#rewardPanels .orange {
background-color: #fcebdc;
}

#rewardPanels .panelImage {
background-color: #aaaaaa;
width: 200px;
height: 400px;
overflow: hidden;
float: left;
border-radius: 7px 0 0 7px;}

#rewardPanels .panelImage img {
}

#rewardPanels .panelText {
width: 610px;
float: left;
padding: 0;
}

#rewardPanels .panelText p {
color: #222222;
font-size: 14px;
line-height: 20px;
margin-bottom: 10px;
padding: 0 20px;
}

#rewardPanels .panelText p.tip {
padding: 10px;
background-color: #fdefe2;
margin: 0 20px 20px;
}

#rewardPanels .panelText ul {
margin-bottom: 10px;
padding: 0 20px;
}

#rewardPanels .panelText ul li {
color: #222222;
font-size: 14px;
line-height: 20px;
list-style-type: square;
margin-left: 20px;
margin-bottom: 5px;
}

#rewardPanels .panelText h4 {
color: #fff;
font-weight: bold;
border-radius: 0 7px 0 0;
margin-bottom: 20px;
padding: 20px;
background-color: #e77e23;
}

#carrotRewards {
  float: left;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;    html, body, div, span, applet, object, iframe,  h1, h2, h3, h4, h5, h6, p, blockquote, pre,  a, abbr, acronym, address, big, cite, code,  del, dfn, em, img, ins, kbd, q, s, samp,  small, strike, strong, sub, sup, tt, var,  b, u, i, center,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td,  article, aside, canvas, details, embed,   figure, figcaption, footer, header, hgroup,   menu, nav, output, ruby, section, summary,  time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    font: inherit;    vertical-align: baseline;  }  /* HTML5 display-role reset for older browsers */  article, aside, details, figcaption, figure,   footer, header, hgroup, menu, nav, section {    display: block;  }  html {    height: 100%;  }  body {    line-height: 1;  position: relative;  width: 100%;  height: 100%;  }  ol, ul {    list-style: none;  }  blockquote, q {    quotes: none;  }  blockquote:before, blockquote:after,  q:before, q:after {    content: '';    content: none;  }  table {    border-collapse: collapse;    border-spacing: 0;  }    /* End Reset */    .clear:after {      content: ".";      display: block;      height: 0;      clear: both;      visibility: hidden;  }      /* Typography */    @font-face {      font-family: 'VAGRoundedBTRegular';      src: url('font/vagroundedbt-webfont.eot');      src: url('font/vagroundedbt-webfont.eot?#iefix') format('embedded-opentype'),           url('font/vagroundedbt-webfont.woff') format('woff'),           url('font/vagroundedbt-webfont.ttf') format('truetype'),           url('font/vagroundedbt-webfont.svg#VAGRoundedBTRegular') format('svg');      font-weight: normal;      font-style: normal;    }    h1 {    font-size: 50px;  line-height: 56px;    color: #f58020;    font-weight: normal;    margin-bottom: 40px;    text-align: center;    font-family: 'VAGRoundedBTRegular', Arial, Helvetica;  }    h1.sub {    font-size: 50px;  line-height: 52px;    text-align: left;    float: left;  }    h2 {  font-size: 62px;  line-height: 71px;  color: #ffffff;  font-weight: normal;  text-align: center;  font-family: 'VAGRoundedBTRegular', Arial, Helvetica;  z-index: 100;  width: 150px;  position: absolute;  top: 50%;  left: 50%;  margin-top: -34px;  margin-left: -90px;  background-color: #12803f;  border: 15px solid #ffffff;  -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);  -webkit-box-shadow: 0 0 2px #777;  box-shadow: 0 0 2px #777;  padding: 5px 0;  border-radius: 10px;  }    h3 {   font-size: 28px;    line-height: 40px;    color: #ffffff;    font-weight: normal;    text-align: center;    font-family: 'VAGRoundedBTRegular', Arial, Helvetica;    margin-top: 50px;  }    h3.lessMarginTop {    margin-top: 30px;  }      p {    font-size: 16px;    line-height: 26px;    color: #000000;    margin-bottom: 20px;  }      .lessonTitle p {    font-size: 16px;    line-height: 22px;    font-weight: bold;  }    .lessonText p {    font-size: 14px;    line-height: 22px;  }    .panelText a {    text-decoration: underline;    color: #111111;  }    .panelText  a:hover {    text-decoration: underline;    color: #888888;  }    a {    text-decoration: none;    color: #0f192e;  }    a:hover, a:active {    text-decoration: none;  }    .introHeadText a, #accordianContent a {    font-weight: bold;    text-decoration: underline;    color: #0f192e;  }    .introHeadText a:hover, #accordianContent a:hover {    text-decoration: underline;    color: #666666;  }    /* Layout */    body {  font-family: 'Raleway', sans-serif;  overflow-y: scroll;  background-color: #fff;  background-image: url('../images/bullet.png');  }    #wrapper {  width: 900px;  height: 600px;  position: absolute;  top: 50%;  left: 50%;  margin-top: -300px;  margin-left: -450px;  }    #header {  width: 900px;  height: 70px;  float: left;  }        #main {  width: 860px;  height: 470px;  float: left;  background-color: #fdefe2;  border-radius: 10px;  border: 20px solid #fdefe2;  -moz-box-shadow:    0px 0px 2px 1px rgba(0,0,0,0.1);    -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);      box-shadow: 0 0px 2px #777;  }    #innerMain {  width: 860px;  height: 470px;  padding: 0;  float: left;  border-radius: 3px;  }    .category {  width: 370px;  height: 175px;  padding: 20px;  float: left;  border-radius: 5px;  float: left;  margin: 10px;  position: relative;  text-align: center;  display: block;  }    a.category:hover {    zoom: 1;    filter: alpha(opacity=80);    opacity: 0.8;  }    #casestudy {  background-color: #a66bbe;  background-image: url('../images/casestudy.png');  background-position: center center;  }    #rewards {  background-color: #e67e22;  background-image: url('../images/rewards.png');  background-position: center center;  }    #lessonplans {  background-color: #3498db;  background-image: url('../images/lessonplans.png');  background-position: center center;  }    #videos {  background-color: #2ecc71;  background-image: url('../images/videos.png');  background-position: center center;  }    #otherguides {    position: absolute;  bottom: -20px;  left: 30px;  }    #otherguides a {    font-size: 16px;  line-height: 18px;    color: #f58020;  font-weight: bold;    text-align: left;  z-index: 100;  margin-left: 10px;  text-decoration: underline  }    #otherguides .otherLabel a {     font-weight: normal;     color: #000000;     text-decoration: none;  }      #otherguides a:hover {  text-decoration: none  }    #otherguides a.active {  text-decoration: none;  font-weight: normal;  }    .otherLabel {    font-weight: normal;  }    #logo {    position: absolute;    bottom: -80px;    right: -15px;    width: 236px;  }    #logo img {    width: 100%;    height: auto;  }    #lessonNav {  width: 830px;  float: left;  margin: 20px 0px 20px 20px;  }    #lessonNav .lessonNavItem {  width: 142px;  height: 74px;  overflow: hidden;  border-radius: 5px;  float: left;  margin: 0px 24px 0 0;  box-shadow: 0 0 2px #777;  }      #lessonNav img {  width: 142px;  height: auto;  border-radius: 5px;  float: left;  }    #lessonNav a {  zoom: 1;    filter: alpha(opacity=50);    opacity: 0.5;    display: block;    float: left;  }    #lessonNav a:hover {  zoom: 1;    filter: alpha(opacity=100);    opacity: 1;  }    #lessonNav a.active {  zoom: 1;    filter: alpha(opacity=100);    opacity: 1;  }    #lessonContainer {  width: 810px;  padding: 0 20px;  float: left;  position: relative;  }    .lessonItemButtonsContainer {  width: 510px;  padding: 20px 20px 10px 270px;  height: 20px;  float: left;  background-color: #f58020;  border-radius: 10px 10px 0 0;  color: #fff;  margin: 0 0px;  }    .lessonItemButtonsContainer ul li {  float: left;  padding-right: 10px;  margin-right: 10px;  border-right: 1px solid #fff;  text-decoration: underline;  }    .lessonItemButtonsContainer ul li.last {  border-right: none;  }    .lessonItemButtonsContainer .lessonItemButtons {    cursor: pointer;  }    .lessonItemButtonsContainer li.active {    text-decoration: none;    font-weight: bold;  }    .lessonItemButtonsContainer li:hover {    text-decoration: none;  }      .lessonTitle {  width: 510px;   background-color: #ffffff;   float: left;       padding: 20px 20px 0 270px;       margin: 0px;  }    .lessonText {  width: 510px;  padding: 0px 20px 0px 270px;  min-height: 300px;  margin: 0 0px 40px;  float: left;  background-color: #ffffff;  border-radius: 0 0 10px 10px;  }    .lessonImageItem {  width: 220px;  height: 171px;  overflow: hidden;  float: left;  border-radius: 5px;  position: absolute;  top: 75px;  left: 30px;  -moz-box-shadow:    0px 0px 1px 1px rgba(0,0,0,0.3);    -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.3);    box-shadow:  0px 0px 1px 1px rgba(0,0,0,0.3);  background-color: #ffffff;  }    .lessonImage {  width: 100%;  height: auto;  border-radius: 5px;  }      .lessonText p {  margin-bottom: 20px;  }    .button {  display: block;  margin-left: 20px;  border-radius: 3px;  background-color: #12803f;  color: #ffffff;  float: left;  padding: 12px 20px 10px;  text-align: center;  font-size: 19px;  font-weight: normal;  font-family: 'VAGRoundedBTRegular', Arial, Helvetica;  box-shadow: 0 0 1px #777;  }    .lessonButton {  position: absolute;  bottom: auto;  left: 30px;  top: 260px;  width: 182px;  margin-left: 0;  }    .bx-viewport li {    margin: 0 5px;  }    .back {    float: right;    margin-top: 10px;  }    .button:hover {  background-color: #0b5128;  }      #videoContainer {  width: 100%;  }    .videoTitle {    margin-top: 20px;  }    .videoThumb {  width: 108px;  margin: 5px;  float: left;  display: block;  }    .videoThumb {  width: 108px;  margin: 5px 7px;  float: left;  display: block;  }    .videoThumb:hover {  zoom: 1;    filter: alpha(opacity=80);    opacity: 0.8;  }    .videoThumb img {  width: 100%;  }    .videoThumb a {    color: #fff;  font-weight: bold;  text-shadow: 0 0 2px #000;  font-size: 14px;  }      .intro {  padding: 20px 2.5% 20px;  width:90%;  margin: 20px 2.5% 0;  border-radius: 10px;  float: left;  }    .introHeadImage {  width: 200px;  margin-right: 20px;  float: left;  }    .introHeadImage img {  -moz-box-shadow:    0px 0px 2px 1px rgba(0,0,0,0.1);    -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);    box-shadow:         0px 0px 2px 1px rgba(0,0,0,0.1);  background-color: #ffffff;  width: 100%;  }    .introHeadText {  width: 545px;  float: left;  }      #accordianContent {     width:95%;     margin: 20px 2.5% 80px;     border-radius: 10px;    float: left;  }    #accordianContent li {    position:relative;    overflow:hidden;    margin-bottom:15px;    border-radius: 10px;    box-shadow: 0 0px 2px #777;  }    #accordianContent .downArrow {    position: absolute;    top: 25px;    right: 10px;  }    #accordianContent .head {     text-decoration:none;     font-size: 16px;     line-height: 24px;    display:block;    cursor: pointer;    padding: 20px 40px 20px 20px;    background-color: #fde4ce;    color: #222;  }    #accordianContent .head:hover {     background-color: #fdf1e6;  }      #accordianContent .content {     display:none;    background-color: #ffffff;     padding-top: 20px;  }    #accordianContent h4 {     float: left;    margin: 0;  }    #accordianContent .content p {     padding: 0 20px 20px;    margin: 0;  }      #wrapper.long, .long #main,.long #innerMain {    height: auto;  }     #wrapper.long {  top: 100px;  margin-top: 0;  padding-bottom: 20px;  }      #rewardHeader {  width: 810px;  margin: 20px;  float: left;  margin-bottom: 20px;  }    #rewardHeader #rewardHeaderImageContainer {  width: 370px;  height: 245px;  float: left;  }    #rewardHeader #rewardHeaderImageContainer img {  width: 90%;  height: auto;  padding: 5px 2%;  box-shadow: 0 0 1px #888;  background-color: #ffffff;  }    #rewardHeader h3 {    text-align: left;    color: #000000;    padding-left: 20px;    float: left;    width: 420px;    margin-top: 0;    font-size: 32px;    line-height: 40px;  }    #rewardHeader .rewardButton {    margin-top: 20px;  }    #rewardBody {  width: 810px;  margin: 0 20px;  min-height: 100px;  float: left;  }    #rewardPanels {  width: 800px;  margin: 0 20px 40px;  float: left;  }    #rewardPanels .rewardPanel {  width: 810px;  height: 400px;  float: left;  background-color: #fff;  border-radius: 10px;  margin-bottom: 20px;  border: 0px solid #fdf5ee;  box-shadow: 0 0 1px #777777;  }    #rewardPanels .orange {  background-color: #fcebdc;  }    #rewardPanels .panelImage {  background-color: #aaaaaa;  width: 200px;  height: 400px;  overflow: hidden;  float: left;  border-radius: 7px 0 0 7px;}    #rewardPanels .panelImage img {  }    #rewardPanels .panelText {  width: 610px;  float: left;  padding: 0;  }    #rewardPanels .panelText p {  color: #222222;  font-size: 14px;  line-height: 20px;  margin-bottom: 10px;  padding: 0 20px;  }    #rewardPanels .panelText p.tip {  padding: 10px;  background-color: rgba(256,256,256, 0.7);  margin: 0 20px;  }    #rewardPanels .panelText ul {  margin-bottom: 10px;  padding: 0 20px;  }    #rewardPanels .panelText ul li {  color: #222222;  font-size: 14px;  line-height: 20px;  list-style-type: square;  margin-left: 20px;  margin-bottom: 5px;  }    #rewardPanels .panelText h4 {  color: #fff;  font-weight: bold;  border-radius: 0 7px 0 0;  margin-bottom: 20px;  padding: 20px;  background-color: #e77e23;  }    #carrotRewards {    float: left;    background-color: #ffffff;    border-radius: 10px;    padding: 20px;    margin-bottom: 20px;  }    #carrotRewards img {    width: 248px;    float: left;    margin-right: 30px;  }    #carrotRewards p {    float: left;    width: 462px;    margin-top: 20px;    margin-right:20px;  }    #carrotRewards a {    font-weight: bold;  }    #carrotRewards a:hover {    text-decoration: underline;  }    .addthis_toolbox {  position: fixed;  top: 30%;  width: 48px;  z-index: 100020;  background: none;  left: 0;  float: left;  right: auto;  }    .socialShareIcon {    padding: 8px;    background-color: #738a8d;    float: left;    border-bottom: 1px solid rgba(255,255,255,.1)  }    .addthis_button_google_plusone_share {    background: #ce4d38;  }    .addthis_button_facebook {    background: #305891;  }    .addthis_button_twitter {    background: #2ca8d2  }    .addthis_button_compact {    background: #f8694d  }        /* Media Queries */      @media all and (max-width: 950px) and (min-width: 700px) {    h1 {    font-size: 34px;    line-height: 42px;  }    #wrapper {  width: 700px;  margin-left: -350px;  }    #header {  width: 700px;  height: 50px;  }    #main {  width: 660px;  }    #innerMain {  width: 650px;  height: 460px;  }    #logo {    bottom: -30px;    width: 279px;  }    .category {  width: 254px;  height: 160px;  }    h3.lessMarginTop {  margin-top: 15px;  }    #lessonNav {  width: 630px;  margin: 20px 0px 10px 20px;  }      #lessonNav img {  width: 102px;  }    #lessonContainer {  width: 610px;  margin-top: 0px;  }    .lessonImage {  width: 270px;  height: 100px;  }        #lessonContainer .button {  display: block;  margin-left: 0px;  margin-top: 10px;  width: 230px;  }    .videoThumb {  width: 80px;  margin: 2px;  }    .videoThumb a {  text-shadow: 0 0 1px #000;  font-size: 11px;  }    .videoTitle {    margin-top: 40px;  }    #videoContainer {  margin-top: 10px;  }     #accordianContent a{     color:#013b62;     text-decoration: none;    }  #accordianContent a:hover{     color:#013b62;     text-decoration: underline;       }    .lessonItemButtonsContainer {  width: 380px;  padding: 20px 20px 10px 200px;  }    .lessonTitle {  width: 380px;   background-color: #ffffff;   float: left;     padding: 20px 20px 0 200px;  }    .lessonTitle p {  margin-bottom: 0;  }    .lessonText {  width: 380px;  min-height: 340px;  padding: 20px 20px 20px 200px;  }    .lessonText p {  font-size: 14px;  }      #lessonNav .lessonNavItem {  width: 102px;  }    .lessonItemButtonsContainer ul li {  font-size: 14px;  }    .lessonImageItem {  width: 160px;  height: 100px;  }    #lessonContainer .button {  width: 120px;  }    .lessonButton {  bottom: auto;  top: 180px;  }    #rewardHeader {  width: 610px;  }    #rewardHeader #rewardHeaderImageContainer {  width: 370px;  height: 245px;  margin: 0 auto 20px;  float: none;  }    #rewardHeader h3 {  text-align: center;  padding-left: 0px;  float: none;  margin: 0 auto;  width: 100%;  }    #rewardHeader .rewardButton {  float: none;  width: 220px;  margin: 20px auto 0;  }    #rewardBody {  width: 610px;  }    #rewardPanels {  width: 600px;  }    #rewardPanels .rewardPanel {  width: 600px;  height: auto;  }    #rewardPanels .panelText {  width: 360px;  }    #rewardPanels .panelImage {  width: 160px;  height: 360px;  margin: 20px;  border-radius: 5px;  }      .introHeadImage {  width: 165px;  margin-right: 20px;  float: left;  }    .introHeadImage img {  -moz-box-shadow:    0px 0px 2px 1px rgba(0,0,0,0.1);    -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);    box-shadow:         0px 0px 2px 1px rgba(0,0,0,0.1);  background-color: #ffffff;  width: 100%;  }    .introHeadText {  width: 400px;  float: left;  }    #carrotRewards img {    width: 170px;    float: left;    margin-right: 30px;  }    #carrotRewards p {    float: left;    width: 360px;    margin: 0;  }    #otherguides {  position: absolute;  bottom: -15px;  left: 30px;  }    #wrapper.long {  padding-bottom: 20px;  }    #main {  margin-top: 20px;  }      }      @media all and (max-width: 719px) and (min-width: 0px) {    h1 {    font-size: 26px;    line-height: 34px;    margin: 20px 0;  }    #wrapper {  width: 100%;  height: auto;  position: relative;  top: auto;  left: auto;  margin-top: 0;  margin-left: 0;  }    #header {  width: 90%;  margin: 0 5%;  height: auto;  float: left;    }    #main {  width: 90%;  margin: 120px 5% 0;  height: auto;  float: left;  border-radius: 10px;  border: 5% solid #ffffff;  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */    -moz-box-sizing: border-box;    /* Firefox, other Gecko */    box-sizing: border-box;         /* Opera/IE 8+ */     margin-bottom: 150px;    position: relative;  }    #innerMain {  width: 100%;  height: auto;  float: none;  position: relative;  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */    -moz-box-sizing: border-box;    /* Firefox, other Gecko */    box-sizing: border-box;         /* Opera/IE 8+ */   }    #logo {    position: absolute;    float: left;    bottom: -200px;    right: 0;    width: 100%;    text-align: center;  }    #logo img {    width: 100%;    max-width: 400px;    height: auto;  }    .category {  width: 98%;  height: auto;  margin: 1%;  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */    -moz-box-sizing: border-box;    /* Firefox, other Gecko */    box-sizing: border-box;         /* Opera/IE 8+ */   }    h3 {    margin-top: 20px;    font-size: 26px;  line-height: 30px;  }    h3.lessMarginTop {    margin-top: 0px;  }    h2 {    width: 100%;    top: 0;    left: 0;  margin-top: -140px;  margin-left: 0px;  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */    -moz-box-sizing: border-box;    /* Firefox, other Gecko */    box-sizing: border-box;         /* Opera/IE 8+ */   }    .back {  margin: 0 5% 20px;  width: 86%;  padding: 12px 2% 10px;  border-radius: 10px;  }    h1.sub {  float: none;  text-align: center;  }    #wrapper .subMain {  margin-top: 0;  }    #lessonNav {  display: none;  }    #lessonContainer {  width: 90%;  padding: 20px 5%;  }    .lessonImage {  width: 100%;  height: auto;  }      .lessonTitle {  width: 90%;  padding: 20px 5% 0px 5%;  margin: 0;  }    .lessonText {  width: 90%;  padding: 0px 5% 10px 5%;  height: auto;  margin: 0px 0 40px;  border-radius: 0 0 10px 10px;  max-height: none;  }    .lessonText p{  margin-bottom: 10px;  }    #lessonContainer .button {  display: block;  margin: 0 0 60px;  width: 90%;  padding: 12px 5% 10px;  }    .videoThumb {  margin: 10px auto;  float: none;  }    .videoTitle {    margin-bottom: 20px;  }    .lessonItemButtonsContainer {  width: 100%;  height: auto;  padding: 20px 0 10px 0;  text-align: left;  overflow: hidden;  border-radius: 10px 10px 0 0;  margin: 10px 0 0px;  }    .lessonImageItem {  position: relative;  margin: 0 auto;  float: none;  top: 0;  left: 0;  width: 100%;  max-width:231px;  height: auto;  }    #lessonContainer .lessonButton {  position: relative;  margin: 10px auto 0;  padding: 12px 2.5% 10px;  float: left;  top: 0;  left: 0;  width: 95%;  }    .lessonItemButtonsContainer ul li {  width: 90%;  border-right: none;  text-align: center;  padding: 10px 0;  margin: 0 5%;  }    #rewardHeader {  width: 100%;  margin: 20px 0;  }    #rewardHeader #rewardHeaderImageContainer {  width: 90%;  height: auto;  margin: 0 auto 20px;  float: none;  }    #rewardHeader h3 {  text-align: left;  padding-left: 0px;  float: none;  margin: 0 auto;  width: 90%;  font-size: 22px;  line-height: 26px  }    #rewardHeader .rewardButton {  float: none;  width: 88%;  margin: 20px 4% 0;  padding: 10px 2%;  }    #rewardBody {  width: 92%;  margin: 0 4%;  }    #rewardPanels {  width: 100%;  margin: 0;  }    #rewardPanels .rewardPanel {  width: 100%;  height: auto;  border: 0px solid #ffffff;  }    #rewardPanels .panelText {  width: 90%;  padding: 5%;  }    #rewardPanels .panelImage {  width: 90%;  max-width: 250px;  height: 300px;  margin: 20px auto;  border-radius: 5px;  float: none;  }    #rewardPanels .panelText h4 {  font-size: 16px;  line-height: 20px;  }        .introHeadImage {  width: 100%;  max-width: 165px;  margin: 10px auto 20px;  float: none;  }    .introHeadImage img {  -moz-box-shadow:    0px 0px 2px 1px rgba(0,0,0,0.1);    -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);    box-shadow:         0px 0px 2px 1px rgba(0,0,0,0.1);  background-color: #ffffff;  width: 100%;  }    .introHeadText {  width: 90%;  padding: 0 5%;  float: left;  }    #carrotRewards {  padding: 20px 5%;  width: 90%;  }    #carrotRewards img {    width:97%;    max-width: 248px;    float: none;  margin: 0 auto 3% 0;  }    #carrotRewards p {  width: 90%;  margin: 10px 5% 0;  }    .addthis_toolbox {  position: relative;  top: 20%;  margin: 170px auto 50px;  width: 80%;  z-index: 100020;  background: none;  left: 10%;  float: left;  right: auto;  }      #otherguides {  position: absolute;  bottom: -86px;  left: 50%;  width: 160px;  margin-left: -80px;  text-align: center;  }    #otherguides a {  margin-top: 12px;  display: block;  float: left;  }    };
  box-shadow: 0 0 2px #777777;
}

#carrotRewards img {
  width: 200px;
  float: left;
  margin-right: 30px;
  margin-top: 15px;
}

#carrotRewards p {
  float: left;
  width: 520px;
  margin-top: 20px;
  margin-right:20px;
}

#carrotRewards a {
  font-weight: bold;
}

#carrotRewards a:hover {
  text-decoration: underline;
}

.addthis_toolbox {
position: fixed;
top: 30%;
width: 48px;
z-index: 100020;
background: none;
left: 0;
float: left;
right: auto;
}

.socialShareIcon {
  padding: 8px;
  background-color: #738a8d;
  float: left;
  border-bottom: 1px solid rgba(255,255,255,.1)
}

.addthis_button_google_plusone_share {
  background: #ce4d38;
}

.addthis_button_facebook {
  background: #305891;
}

.addthis_button_twitter {
  background: #2ca8d2
}

.addthis_button_compact {
  background: #f8694d
}



/* Media Queries */


@media all and (max-width: 950px) and (min-width: 700px) {

h1 {
  font-size: 34px;
  line-height: 42px;
}

#wrapper {
width: 700px;
margin-left: -350px;
}

#header {
width: 700px;
height: 50px;
}

#main {
width: 660px;
}

#innerMain {
width: 650px;
height: 460px;
}

#logo {
  bottom: -85px;
  width: 200px;
}

.category {
width: 254px;
height: 160px;
}

h3.lessMarginTop {
margin-top: 15px;
}

#lessonNav {
width: 630px;
margin: 20px 0px 10px 20px;
}


#lessonNav img {
width: 102px;
}

#lessonContainer {
width: 610px;
margin-top: 0px;
}

.lessonImage {
width: 270px;
height: auto;
}



#lessonContainer .button {
display: block;
margin-left: 0px;
margin-top: 10px;
width: 230px;
}

.videoThumb {
width: 80px;
margin: 2px;
}

.videoThumb a {
text-shadow: 0 0 1px #000;
font-size: 11px;
}

.videoTitle {
  margin-top: 40px;
}

#videoContainer {
margin-top: 10px;
}

 #accordianContent a{
   color:#013b62;
   text-decoration: none;

}
#accordianContent a:hover{
   color:#013b62;
   text-decoration: underline;
   
}

.lessonItemButtonsContainer {
width: 380px;
padding: 20px 20px 10px 200px;
}

.lessonTitle {
width: 380px;
 background-color: #ffffff;
 float: left;
   padding: 20px 20px 0 200px;
}

.lessonTitle p {
margin-bottom: 0;
}

.lessonText {
width: 380px;
min-height: 340px;
padding: 20px 20px 20px 200px;
}

.lessonText p {
font-size: 14px;
}


#lessonNav .lessonNavItem {
width: 102px;
}

.lessonItemButtonsContainer ul li {
font-size: 14px;
}

.lessonImageItem {
width: 160px;
height: 100px;
}

#lessonContainer .button {
width: 120px;
}

.lessonButton {
bottom: auto;
top: 180px;
}

#rewardHeader {
width: 610px;
}

#rewardHeader #rewardHeaderImageContainer {
width: 370px;
height: 245px;
margin: 0 auto 20px;
float: none;
}

#rewardHeader h3 {
text-align: center;
padding-left: 0px;
float: none;
margin: 0 auto;
width: 100%;
}

#rewardHeader .rewardButton {
float: none;
width: 220px;
margin: 20px auto 0;
}

#rewardBody {
width: 610px;
}

#rewardPanels {
width: 600px;
}

#rewardPanels .rewardPanel {
width: 600px;
height: auto;
}

#rewardPanels .panelText {
width: 400px;
}

#rewardPanels .panelImage {
width: 160px;
height: 360px;
margin: 20px;
border-radius: 5px;
}


.introHeadImage {
width: 165px;
margin-right: 20px;
float: left;
}

.introHeadImage img {
-moz-box-shadow:    0px 0px 2px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);
  box-shadow:         0px 0px 2px 1px rgba(0,0,0,0.1);
background-color: #ffffff;
width: 100%;
}

.introHeadText {
width: 400px;
float: left;
}

#carrotRewards img {
  width: 200px;
  float: left;
  margin-right: 30px;
}

#carrotRewards p {
  float: left;
  width: 330px;
  margin: 0;
}

#otherguides {
position: absolute;
bottom: -15px;
left: 30px;
}

#wrapper.long {
padding-bottom: 20px;
}

#main {
margin-top: 20px;
}


}


@media all and (max-width: 719px) and (min-width: 0px) {

h1 {
  font-size: 26px;
  line-height: 34px;
  margin: 20px 0;
}

#wrapper {
width: 100%;
height: auto;
position: relative;
top: auto;
left: auto;
margin-top: 0;
margin-left: 0;
}

#header {
width: 90%;
margin: 0 5%;
height: auto;
float: left;

}

#main {
width: 90%;
margin: 120px 5% 0;
height: auto;
float: left;
border-radius: 10px;
border: 5% solid #ffffff;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */ 
  margin-bottom: 150px;
  position: relative;
}

#innerMain {
width: 100%;
height: auto;
float: none;
position: relative;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */ 
}

#logo {
  position: absolute;
  float: left;
  bottom: -200px;
  right: 0;
  width: 100%;
  text-align: center;
}

#logo img {
  width: 100%;
  max-width: 200px;
  height: auto;
}

.category {
width: 98%;
height: auto;
margin: 1%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */ 
}

h3 {
  margin-top: 20px;
  font-size: 26px;
line-height: 30px;
}

h3.lessMarginTop {
  margin-top: 0px;
}

h2 {
  width: 100%;
  top: 0;
  left: 0;
margin-top: -140px;
margin-left: 0px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */ 
}

.back {
margin: 0 5% 20px;
width: 86%;
padding: 12px 2% 10px;
border-radius: 10px;
}

h1.sub {
float: none;
text-align: center;
}

#wrapper .subMain {
margin-top: 0;
}

#lessonNav {
display: none;
}

#lessonContainer {
width: 90%;
padding: 20px 5%;
}

.lessonImage {
width: 100%;
height: auto;
}


.lessonTitle {
width: 90%;
padding: 20px 5% 0px 5%;
margin: 0;
}

.lessonText {
width: 90%;
padding: 0px 5% 10px 5%;
height: auto;
margin: 0px 0 40px;
border-radius: 0 0 10px 10px;
max-height: none;
}

.lessonText p{
margin-bottom: 10px;
}

#lessonContainer .button {
display: block;
margin: 0 0 60px;
width: 90%;
padding: 12px 5% 10px;
}

.videoThumb {
margin: 10px auto;
float: none;
}

.videoTitle {
  margin-bottom: 20px;
}

.lessonItemButtonsContainer {
width: 100%;
height: auto;
padding: 20px 0 10px 0;
text-align: left;
overflow: hidden;
border-radius: 10px 10px 0 0;
margin: 10px 0 0px;
}

.lessonImageItem {
position: relative;
margin: 0 auto;
float: none;
top: 0;
left: 0;
width: 100%;
max-width:231px;
height: auto;
}

#lessonContainer .lessonButton {
position: relative;
margin: 10px auto 0;
padding: 12px 2.5% 10px;
float: left;
top: 0;
left: 0;
width: 95%;
}

.lessonItemButtonsContainer ul li {
width: 90%;
border-right: none;
text-align: center;
padding: 10px 0;
margin: 0 5%;
}

#rewardHeader {
width: 100%;
margin: 20px 0;
}

#rewardHeader #rewardHeaderImageContainer {
width: 90%;
height: auto;
margin: 0 auto 20px;
float: none;
}

#rewardHeader h3 {
text-align: left;
padding-left: 0px;
float: none;
margin: 0 auto;
width: 90%;
font-size: 22px;
line-height: 26px
}

#rewardHeader .rewardButton {
float: none;
width: 88%;
margin: 20px 4% 0;
padding: 10px 2%;
}

#rewardBody {
width: 92%;
margin: 0 4%;
}

#rewardPanels {
width: 100%;
margin: 0;
}

#rewardPanels .rewardPanel {
width: 100%;
height: auto;
border: 0px solid #ffffff;
}

#rewardPanels .panelText {
width: 90%;
padding: 5%;
}

#rewardPanels .panelImage {
width: 90%;
max-width: 250px;
height: 300px;
margin: 20px auto;
border-radius: 5px;
float: none;
}

#rewardPanels .panelText h4 {
font-size: 16px;
line-height: 20px;
}



.introHeadImage {
width: 100%;
max-width: 165px;
margin: 10px auto 20px;
float: none;
}

.introHeadImage img {
-moz-box-shadow:    0px 0px 2px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);
  box-shadow:         0px 0px 2px 1px rgba(0,0,0,0.1);
background-color: #ffffff;
width: 100%;
}

.introHeadText {
width: 90%;
padding: 0 5%;
float: left;
}

#carrotRewards {
padding: 20px 5%;
width: 90%;
}

#carrotRewards img {
  width: 200px;
  float: none;

  margin: 0 auto 5px auto;
}

#carrotRewards p {
width: 90%;
margin: 10px 5% 0;
}

.addthis_toolbox {
position: relative;
top: 10px;
margin: 120px 0 0px -100px;
padding-bottom: 40px;
width: 200px;
z-index: 100020;
background: none;
left: 50%;
float: left;
right: auto;
}

#otherguides {
position: absolute;
bottom: -86px;
left: 50%;
width: 160px;
margin-left: -80px;
text-align: center;
}

#otherguides a {
margin-top: 12px;
display: block;
float: left;
}

}