/*
  HTML5 Reset :: style.css
  ----------------------------------------------------------
  We have learned much from/been inspired by/taken code where offered from:
  
  Eric Meyer          :: http://ericmeyer.com
  HTML5 Doctor        :: http://html5doctor.com
  and the HTML5 Boilerplate :: http://html5boilerplate.com
  
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}                 

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
  don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

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

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
  people.opera.com/patrickl/experiments/keyboard/test */
a, a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
  gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  



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


/*
http://www.colourlovers.com/palette/2490456/MM_ReDesign
*/

/* MAIN
------------------------------------------------------------ */
body {
  font-size: 18px;
  color: #30283F;
  background: url(img/furley_bg.png) fixed #fff;
  font-family: 'Pontano Sans', Arial;
}
p {
  margin-bottom: 10px;
}
a {
  color: #115D7A;
  text-decoration: none;
}
  a:hover {
  }
  a:visited {
    /*color: lightblue;*/
  }

a.more {
  color: #F10C58;
  font-weight: bold;
  letter-spacing: -1px;
  font-style: italic;
}




/* CONTAINER
------------------------------------------------------------ */
#container {
  overflow: auto;
  position: relative;
  margin: 0 auto;
  width: 980px;
  box-shadow: 0px 0px 30px #999;
  background: url(img/paper2.png) left top repeat-y #fff;
  border-top: 20px solid #F10C58;
  border-bottom: 10px solid #F10C58;
}



/* HEADER
------------------------------------------------------------ */
header {
  float: left;
  width: 350px;
  
  margin-top: 100px;
  position: fixed;
}
  /**/
  header h1 {
    width: 325px;
    text-align: right;
  }
    header h1 a {
      display: block;
      width: 100%;
      height: 100%;
    }
      header h1 span.name {
        display: block;
        color: #F10C58;
        font-size: 38px;
        font-family: 'Open Sans', sans-serif;
        font-weight: bold;
        font-weight: 800;
        text-shadow: 3px 3px 0px #ddd;
        letter-spacing: -2px;
      }
      header h1 span.desc {
        font-weight: bold;
        letter-spacing: -1px;
        font-size: 18px;

      }
  /**/
  header nav {
    margin-top: 50px;
    margin-right: 20px;
    list-style: none;
    text-align: right;
    line-height: 26px;
  }
    header nav li {
    }
      header nav li a {
        text-transform: uppercase;
        color: #636365;
        font-size: 14px;
        font-weight: bold;
        
        padding: 3px 3px 3px 30px;
      }
      header nav li a:hover {
        background: #30283F;
        color: #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
      }
      header nav li.current a {
        background: #115D7A;
        color: #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
      }
  header a.back {
    display: block;
    text-align: right;
    color: #999;
    margin-right: 4px;
    font-size: 11px;
  }
  /**/
  header p.slogan {
    text-align: right;
    margin-right: 20px;
    margin-top: 30px;
    font-size: 16px;
    font-style: italic;
    color: #777;
  }



     header img.sophia {
        float: right;
        clear: right;
        width: 140px;
        margin-left: 20px;
        border: 5px solid #F10C58;
        box-shadow: 0px 0px 30px #999;
        margin-right: 30px;
      }

/* ARTICLE - GLOBAL STYLES
------------------------------------------------------------ */
article {
  line-height: normal;
  overflow: auto;
  margin: 10px auto;
  text-align: justify;
}

  article h1 {
  }
  article h2 {
    margin-bottom: 15px;
  }
  article h2 span {
    color: #F10C58;
    font-size: 26px;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-weight: 800;
    letter-spacing: 0px;
    margin-bottom: 10px;
    text-shadow: 3px 3px 0px #ddd;
    padding-left: 40px;
  }
  article h2 strong {
    font-family: Allura;
    font-weight: normal;
    font-size: 30px;
  }
  article h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 3px;
    color: #115D7A;
  }
    article h3 span {
      font-size: 12px;
      text-transform: none;
      color: #666;
    }
  article h4 {
  }
  article h5 {
  }
  article h6 {
  }
  article p {
    line-height: 22px;
  }
  article ul {
    list-style: disc outside;
    line-height: 22px;
    margin-left: 30px;
    margin-bottom: 10px;
  }
    article ul li {
    }
  article ol {
    list-style: decimal outside;
    line-height: 22px;
    margin-left: 30px;
    margin-bottom: 10px;
  }
    article ol li {
    }


















article {
  float: right;
  width: 540px;
  margin-right: 40px;
}
  article div.panel {
    margin-bottom: 60px;
    overflow: hidden;
  }
    article div.panel p {
    }
    article div.panel p.back {
      margin-bottom: 0;
    }
      article div.panel p.back a {
        font-size: 10px;
        color: #636365;
      }
  /**/
  
  
    /* PANEL - NUMBERS */
    article div.panel.numbers {
      /*position: fixed;*/
      border-bottom: 0;
      margin-bottom: 86px;
      color: #8c8c8c;
    }
      article div.panel.numbers p {
        margin-bottom: 5px;
        font-size: 15px;
      }
        article div.panel.numbers p span {
          margin-right: 10px;
        }
          article div.panel.numbers p span strong {
            font-size: 12px;
            font-weight: normal;
            border-bottom: 1px solid #CDCECF;
            text-transform: lowercase;
          }
          article div.panel.numbers p a {
            color: #8c8c8c;
          }
          
          /*
          article div.panel.numbers p span.mobile,
          article div.panel.numbers p span.office,
          article div.panel.numbers p span.email,
          article div.panel.numbers p span.skype {
            margin-right: 10px;
          }
          */


    /* slogan */
    article p.slogan {
      font-size: 20px;
      color: #777;
      /**/
      margin-bottom: 80px;
    }




    /* PANEL - ABOUT */
    article div.panel.about {
    }
      article div.panel.about h2 {
        background: url(img/icon_about.png) top left no-repeat;
      }
      img.sophia {
        float: right;
        width: 140px;
        margin-left: 20px;
        border: 5px solid #F10C58;
        box-shadow: 0px 0px 30px #999;
        margin-right: 30px;
      }




    /* PANEL - SERVICES */
    article div.panel.services {
    }
      article div.panel.services h2 {
        background: url(img/icon_services.png) top left no-repeat;
      }
      article div.panel.services div.subjects {
        overflow: auto;
        clear: both;
        float: none;
        padding: 20px 0 0 0;
      }
        article div.panel.services div.subjects ul {
          float: left;
          width: 180px;
        }
        article div.panel.services div.subjects img.standardized-tests-logos {
          float: right;
          display: block;
          width: 320px;
          margin-top: -10px;
        }
        article div.panel.services div.subjects ul.s2 {
        }
          article div.panel.services div.subjects ul li {
            margin-bottom: 3px;
          }
      article div.panel.services p.specifics {
        font-size: 14px;
        line-height: 24px;
      }
        article div.panel.services p.specifics strong {
          font-size: 16px;
          border-bottom: 1px dotted #bbb;
        }





    /* PANEL - SCHOOLS */
    article div.panel.schools {
    }
      article div.panel.schools h2 {
        background: url(img/icon_schools.png) top left no-repeat;
      }




    /* PANEL - TESTIMONIALS */
    article div.panel.testimonials {
    }
      article div.panel.testimonials h2 {
        background: url(img/icon_testimonials.png) top left no-repeat;
      }
      article div.panel.testimonials div.testimonial {
        margin-bottom: 10px;
      }
        article div.panel.testimonials div.testimonial blockquote {
          padding: 0px 20px;
          border-left: 3px solid #115D7A;
          margin-left: 10px;
        }
          article div.panel.testimonials div.testimonial blockquote p {
          }
          article div.panel.testimonials div.testimonial blockquote footer {
            font-style: italic;
            color: #777;
          }



    /* PANEL - PRESS */
    article div.panel.press {
    }
      article div.panel.press h2 {
        background: url(img/icon_press.png) top left no-repeat;
      }



    /* PANEL - CONTACT */
    article div.panel.contact {
      margin-bottom: 0;
    }
      article div.panel.contact h2 {
        background: url(img/icon_contact.png) top left no-repeat;
      }
      article div.panel.contact p.info {
        float: left;
      }
        article div.panel.contact p.info.i1 {
          margin-right: 40px;
        }
        article div.panel.contact p.info.i2 {
          margin-right: 40px;
        }
        article div.panel.contact p.info.i3 {
        }
      article div.panel.contact p.references {
        float: none;
        clear: left;
        display: block;
      }
      article div.panel.contact p.copyright {
        margin-top: 180px;
        margin-bottom: 180px;
        font-size: 11px;
      }










@media only screen and (max-width: 800px) {
  body {
    padding-bottom: 0px;
  }
  #container {
    width: auto;
    padding: 25px;
  }
  header {
    position: relative;
    float: none;
    width: auto;
    margin-top: 10px;
    margin-bottom: 0px;
  }
    header h1 {
      width: auto;
      height: 100px;
      margin: 0 auto;
      text-align: center;
    }
    header nav {
      display: none;
    }
  article {
    float: none;
    width: auto;
    margin: 0;
  }
    article h2 span {
    }
    article h2 strong {
      display: block;
    }
    article div.panel.numbers {
      display: block;
      margin-bottom: 30px;
      margin-top: 0;
      text-align: center;
    }
      article div.panel.numbers p {
        font-size: 15px;
      }
        article div.panel.numbers p span {
          display: block;
        }
    article p.slogan {
      display: none;
    }
    article img.sophia {
      display: none;
    }
    article div.panel.contact p.info {
      float: none;
      margin-right: 0;
    }
    article div.panel.contact p.copyright {
      margin-top: 30px;
    }

    article div.panel.services div.subjects ul {
      float: none;
      width: 100%;
    }
    article div.panel.services div.subjects img.standardized-tests-logos {
      float: none;
      display: block;
      width: 280px;
      height: auto;
      margin: 30px auto 40px auto;
    }
}