@import 'grid.css';

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ul, ol, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

tr, th, td { vertical-align: middle; }

ul { list-style: none; }

ol { list-style: decimal outside; padding-left: 1em; margin-left: 1em; }

ol ol { list-style-type: upper-alpha; }

ol.roman {
  list-style-type: upper-roman;
  color: red;
}

#content ul.services {
  
  margin-left: 0;
}

#content ul.services li {
  padding-top: 15px;
  background: url(../img/bullet.gif) no-repeat 0% 1.7em;
  padding-bottom: 15px;
  
  
}
a.pdf {
  display: block;
  width: auto;
  min-height: 32px;
  background: url(../img/pdf.gif) no-repeat 0% 50%;
  padding: 4px 4px 4px 36px;
  font-weight: bold;
  line-height: 32px;
  text-decoration: none;
}

address { font-style: normal; }

body {
  text-align: center;
  background: #013960;
  color: white;
  font-size: 76%;
  font-family: Arial, Helvetica, sans-serif;
}

#wrapper {
  text-align: left;
  margin: 0 auto;
  margin-top: 17px;
  position: relative;
  background: /*#FFEC99*/ url(../img/side-borders.gif) repeat-y 50% 100%;
  color: #023960;
  width: 888px;
  padding-left: 19px;
  padding-right: 20px;
  overflow: hidden;
  padding-bottom: 0;
}

#header {
  background: url(../img/header-base.png) no-repeat 0 0;
  height: 277px;
  width: 927px;
  /*position: relative; left: -19px;*/
  margin-left: -19px;
}

#content {
  margin-left: 16px;
  margin-right: 17px;
  margin-top: 8px;
  padding: 20px;
  /*background: #FEF3C0 url(../img/content-gradient.gif) repeat-x 0 0;*/
  position: relative;
  overflow: hidden;
}

#home #content {
  padding-right: 290px;
  background: url(../img/cards.jpg) no-repeat 100% 815px;
  min-height: 869px;
}

#home .box-float {
  position: absolute;
  float: none;
  right: 0;
}

#footer {
  padding-left: 8px;
  padding-right: 8px;
  
  background: #013960 url(../img/bottom-border.gif) no-repeat 0 0;
  padding-top: 40px;
  
  text-align: center;
  color: white;
  
  font-size: 8px
  
  padding-bottom: 1px;
  border-bottom: 1px solid #013960;
}

#header ul {
  position: absolute;
  z-index: 1;
  left: 28px; top: 232px;
  width: 868px; height: 40px;
  display: block;
  background: url(../img/menu.gif) no-repeat 0 -40px;
}

#header li {
  display: block;
  position: absolute;
  height: 40px;
}

#header li.home          { left:   0px; width: 100px; }
#header li.about-us      { left: 101px; width: 123px; }
#header li.contact-us    { left: 224px; width: 123px; }
#header li.the-game      { left: 347px; width: 112px; }
#header li.about-phonics { left: 459px; width: 143px; }
#header li.testimonials  { left: 602px; width: 132px; }
#header li.useful-links  { left: 734px; width: 134px; }

#header li a {
  display: block;
  height: 40px;
  text-indent: -9999px;
  background: url(../img/menu.gif) no-repeat 0 -40px;
  overflow: hidden;
}

#header li.home          a { background-position:    0px 0px; }
#header li.about-us      a { background-position: -101px 0px; }
#header li.contact-us    a { background-position: -224px 0px; }
#header li.the-game      a { background-position: -347px 0px; }
#header li.about-phonics a { background-position: -459px 0px; }
#header li.testimonials  a { background-position: -602px 0px; }
#header li.useful-links  a { background-position: -734px 0px; }

#home          #header li.home          a, #header li.home          a:hover, #header li.home          a:focus { background-position:    0px -40px; }
#about-us      #header li.about-us      a, #header li.about-us      a:hover, #header li.about-us      a:focus { background-position: -101px -40px; }
#contact-us    #header li.contact-us    a, #header li.contact-us    a:hover, #header li.contact-us    a:focus { background-position: -224px -40px; }
#the-game      #header li.the-game      a, #header li.the-game      a:hover, #header li.the-game      a:focus { background-position: -347px -40px; }
#about-phonics #header li.about-phonics a, #header li.about-phonics a:hover, #header li.about-phonics a:focus { background-position: -459px -40px; }
#testimonials  #header li.testimonials  a, #header li.testimonials  a:hover, #header li.testimonials  a:focus { background-position: -602px -40px; }
#useful-links  #header li.useful-links  a, #header li.useful-links  a:hover, #header li.useful-links  a:focus { background-position: -734px -40px; }

/*
#thingy {
  position: absolute;
  z-index: 2;
  background: url(../img/thingy.png) no-repeat 0 0;
  width: 231px; height: 186px;
  left: 651px; top: 24px;
}
*/

#footer ul {
  display: block;
  text-align: center;
  font-size: 80%;
}

#footer li {
  display: inline;
  margin-right: 10px;
}

#footer a:link    { color: white; text-decoration: none; }
#footer a:visited { color: white; text-decoration: none; }
#footer a:focus   { color: white; text-decoration: underline; }
#footer a:hover   { color: white; text-decoration: underline; }
#footer a:active  { color: white; text-decoration: underline; }

h1 {
  font-size: 200%;
  color: #ED008C;
  margin-bottom: 20px;
  background: url(../img/rule.png) no-repeat 0 100%;
  padding-bottom: 10px;
}

.col h1 {
  background-image: url(../img/underline.gif);
}

h1 small {
  display: block;
  font-size: 75%;
}

h1 small strong {
  color: #015998;
}

h2 {
  font-size: 150%;
  clear:left;
}

p, h2, ul.bulleted {
  margin-bottom: 20px;
}

h3 {
  font-weight: bold;
  margin-bottom: 10px;
}

.box-float {
  float: right;
}

.box {
  position: relative;
  background: url(../img/box/bottom.gif) no-repeat 100% 100%;
  width: 269px;
}

.box .inner {
  background: url(../img/box/top.gif) no-repeat 0 0;
  padding: 182px 18px 8px 18px;
}

.box li {
  margin-bottom: 10px;
}

/* ----  */

a.pink-button, a.pink-button:visited {
  padding: 3px;
  background: #ED008C;
  color: #FBCCE8;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  font-weight: bold;
  text-align: center;
  border-top: 2px solid #F137A5;
  border-right: 2px solid #AB0065;
  border-bottom: 2px solid #AA0065;
  border-left: 2px solid #F137A5;
  cursor: pointer;
}

a.pink-button:focus, a.pink-button:hover {
  color: white;
  text-decoration: underline;
  border-top-color: #F245AB;
  border-right-color: #9A005B;
  border-bottom-color: #99005B;
  border-left-color: #F245AB;
}

a.pink-button:active {
  color: white;
  text-decoration: underline;
  border-top-color: #99005B;
  border-right-color: #F245AB;
  border-bottom-color: #F245AB;
  border-left-color: #9A005B;
}

a.blue-button, a.blue-button:visited {
  padding: 3px;
  background: #00ADEF;
  color: #CCEFFC;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  font-weight: bold;
  text-align: center;
  border-top: 2px solid #37BFF2;
  border-right: 2px solid #007DAD;
  border-bottom: 2px solid #007CAC;
  border-left: 2px solid #37BFF2;
}

a.blue-button:focus, a.blue-button:hover {
  color: white;
  text-decoration: underline;
  border-top-color: #45C3F3;
  border-right-color: #00719C;
  border-bottom-color: #00709B;
  border-left-color: #45C3F3;
}

a.blue-button:active {
  color: white;
  text-decoration: underline;
  border-top-color: #00709B;
  border-right-color: #45C3F3;
  border-bottom-color: #45C3F3;
  border-left-color: #00719C;
}

h2.bullet { padding-left: 30px; background: url(../img/bullet-green.gif) no-repeat 0 50%; }

ul.bulleted li {
  margin-left: 35px;
  padding-left: 20px;
  background: url(../img/bullet-green-s.gif) no-repeat 0 7px;
  padding-top: 2px;
  padding-bottom: 2px;
}

ul.quotes {
}

ul.quotes li {
  display: block;
  margin-bottom: 20px;
}

blockquote {
  font-style: italic;
  font-family: Arial, sans-serif;
  /*
  margin-left: 64px;
  margin-right: 64px;
  */
}

blockquote .lq, blockquote .rq {
  font-weight: bold;
  font-size: 100%;
}

blockquote:before, blockquote:after { content: ''; }

ul.quotes li div.by {
/*
  margin-left: 64px;
  margin-right: 64px;
  text-align: right;
*/
  font-style: italic;
  font-weight: bold;
  margin-top: -15px;
}

/*
#home          h1, #home          blockquote, #home          ul.quotes { color: #00720F; }
#about-us      h1, #about-us      blockquote, #about-us      ul.quotes { color: #C20054; }
#contact-us    h1, #contact-us    blockquote, #contact-us    ul.quotes { color: #CD4900; }
#the-game      h1, #the-game      blockquote, #the-game      ul.quotes { color: #007AC6; }
#about-phonics h1, #about-phonics blockquote, #about-phonics ul.quotes { color: #6D2474; }
#testimonials  h1, #testimonials  blockquote, #testimonials  ul.quotes { color: #5C9C2F; }
#useful-links  h1, #useful-links  blockquote, #useful-links  ul.quotes { color: #00919B; }

#home          ul.bulleted li, #home          h2.bullet { background-image: url(../img/bullet-green.gif); }
#about-us      ul.bulleted li, #about-us      h2.bullet { background-image: url(../img/bullet-pink.gif); }
#contact-us    ul.bulleted li, #contact-us    h2.bullet { background-image: url(../img/bullet-orange.gif); }
#the-game      ul.bulleted li, #the-game      h2.bullet { background-image: url(../img/bullet-blue.gif); }
#about-phonics ul.bulleted li, #about-phonics h2.bullet { background-image: url(../img/bullet-purple.gif); }
#testimonials  ul.bulleted li, #testimonials  h2.bullet { background-image: url(../img/bullet-mint.gif); }
#useful-links  ul.bulleted li, #useful-links  h2.bullet { background-image: url(../img/bullet-cyan.gif); }
*/

#home          h1, #home          blockquote, #home          ul.quotes { color: #CD4900; }
#about-us      h1, #about-us      blockquote, #about-us      ul.quotes { color: #C20054; }
#contact-us    h1, #contact-us    blockquote, #contact-us    ul.quotes { color: #00720F; }
#the-game      h1, #the-game      blockquote, #the-game      ul.quotes { color: #CD4900; }
#about-phonics h1, #about-phonics blockquote, #about-phonics ul.quotes { color: #6D2474; }
#testimonials  h1, #testimonials  blockquote, #testimonials  ul.quotes { color: #00720F; }
#useful-links  h1, #useful-links  blockquote, #useful-links  ul.quotes { color: #007AC6; }

#home          h2.bullet { background-image: url(../img/bullet-orange.gif); }
#about-us      h2.bullet { background-image: url(../img/bullet-pink.gif); }
#contact-us    h2.bullet { background-image: url(../img/bullet-green.gif); }
#the-game      h2.bullet { background-image: url(../img/bullet-orange.gif); }
#about-phonics h2.bullet { background-image: url(../img/bullet-purple.gif); }
#testimonials  h2.bullet { background-image: url(../img/bullet-green.gif); }
#useful-links  h2.bullet { background-image: url(../img/bullet-blue.gif); }

#home          ul.bulleted li { background-image: url(../img/bullet-orange-s.gif); }
#about-us      ul.bulleted li { background-image: url(../img/bullet-pink-s.gif); }
#contact-us    ul.bulleted li { background-image: url(../img/bullet-green-s.gif); }
#the-game      ul.bulleted li { background-image: url(../img/bullet-orange-s.gif); }
#about-phonics ul.bulleted li { background-image: url(../img/bullet-purple-s.gif); }
#testimonials  ul.bulleted li { background-image: url(../img/bullet-green-s.gif); }
#useful-links  ul.bulleted li { background-image: url(../img/bullet-blue-s.gif); }

/* ------------------- */

.vcard {
  padding-bottom: 30px;
}

.vcard .country-name {
  display: none;
}

.vcard .adr {
  margin-bottom: 10px;
}

.vcard .email {
  display: block;
  margin-bottom: 10px;
  margin-top: 10px;
}

/* ------------------- */

/*
.two-cols {
  overflow: auto;
  margin-top: -20px;
  padding-top: 20px;
  margin-bottom: -20px;
  padding-bottom: 20px;
}

.two-cols .left-col {
  float: left;
  width: 380px;
}

.two-cols .right-col {
  float: right;
  width: 380px;
}
*/

/* ------------------- */

abbr.req {
  font-weight: bold;
  font-size: 150%;
  border: none;
}

#home          abbr.req { color: #00720F; }
#about-us      abbr.req { color: #C20054; }
#contact-us    abbr.req { color: #CD4900; }
#the-game      abbr.req { color: #007AC6; }
#about-phonics abbr.req { color: #6D2474; }
#testimonials  abbr.req { color: #5C9C2F; }
#useful-links  abbr.req { color: #00919B; }

form {
  width: 380px;
  margin-bottom: 20px;
}

form.mini { width: auto; margin: 0; padding: 0; }

form .row {
  overflow: hidden;
  margin-bottom: 10px;
}

form .row .label {
  float: left;
  width: 150px;
}

form .row .field {
  float: left;
  overflow: visible;
  margin-right: 2px;
  margin-bottom: 2px;
}

form .row .field .txt {
  width: 200px;
  border: none;
  background: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  color: black;
}

form .submit {
  text-align: center;
}

form .submit input {
  padding: 4px 8px;
}

fieldset {
  border: none;
  padding-left: 150px;
  padding-top: 5px;
  margin-bottom: 10px;
}

fieldset label {
  margin-right: 10px;
}

fieldset input {
  margin-right: 3px;
}

fieldset legend {
  margin-left: -150px;
}

div.section {
  background: #FFEC99;
  margin: 10px 0px 10px 0px;
  padding: 10px 10px 0px 10px;
}

/* -------------------- */

.col-box {
  background: url(../img/pane-box-bg.png) no-repeat 0 0;
  padding: 32px 175px 18px 18px;
}

/* --------------------- */

#all-options-chunks {
  overflow: hidden;
  margin-left: -12px;
  margin-right: -24px;
  position: relative;
}

.product-list {
  overflow: hidden;
}

.product-list li.product {
  display: block;
  position: relative;
  padding: 18px;
  background: url(../img/product-bg-big.png) no-repeat 0 0;
  /* note: image is 162 px exactly, so we add 160 to the l-padding */
  padding-left: 178px;
  min-height: 195px;
}

.product-list h3 {
  color: #E10915;
  font-size: 150%;
}

* html .product-list li.product { height: 86px; }

.product-list li img.thumb {
  position: absolute;
  left: 14px; top: 18px; width: 158px; height: 143px;
}

.product table {
  width: 100%;
}

.product th {
  text-align: left;
  font-weight: bold;
}

.product td {
  text-align: right;
}

.product td form {
  display: inline;
}

/*
.product-list .col, .product-list .col-span2 { border: 1px solid red; }
*/

.product-list .inner { padding: 0px 3px; }

.product-list p.price { text-align: center; }

.buy-holder { width: 120px; margin: 0 auto; margin-top: -10px; }

/*
.buy-holder {
  position: absolute;
  right: 18px;
  bottom: 18px;
  height: 24px;
  width: 100px;
}

* html .buy-holder {
  bottom: 28px;
}
*/





.toggler, .toggler:visited {
cursor:pointer;
clear:left;
  padding: 3px;
  background: #00ADEF;
  color: #CCEFFC;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  width:150px;
  font-weight: bold;
  text-align: center;
  border-top: 2px solid #37BFF2;
  border-right: 2px solid #007DAD;
  border-bottom: 2px solid #007CAC;
  border-left: 2px solid #37BFF2;
display:none;
}

.toggler:focus, .toggler:hover {
  color: white;
  text-decoration: underline;
  border-top-color: #45C3F3;
  border-right-color: #00719C;
  border-bottom-color: #00709B;
  border-left-color: #45C3F3;
}