/*
Title:    Better2Know index styles and reset styles.
Copyright:  (c) 2009, Bridgeview Partners LLP. All rights resevered (please do not re-use without permission).
*/

  body {
    margin: 0;
    padding: 0;
    background: rgb(245,245,245);
    
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-variant: normal;
    font-size: 0.8em;
    color: rgb(0,0,0);
  }
  
/** RESET STYLES **/
  p, ul, li, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    
    font-size: 100%;
  }

  li {
    list-style-type: none;
  }
  
  a, a:visited, a:hover {
    text-decoration: none;
  }
  
  img {
    border: none;
  }
  

/** PAGE POSITIONING **/
  div#wrap {
    margin: 0 auto;
    width: 970px;
    
    text-align: left;
  }

  div#body {
    margin: 0 auto;
    padding: 0 10px;
    width: 960px;
    
    background: rgb(235,235,235);
  }

  div#page-area {
    float: left;
    margin: 0;
    padding: 214px 0 0 0;
    width: 960px;
    
    background: transparent;
  }

  div#page-area-base {
    float: left;
    margin: 0;
    width: 960px;
    height: 5px;
    
    background: transparent url(../images/page-bg_base.gif) no-repeat left bottom;
  }

  div#footer {
    margin: 0 auto;
    padding: 20px 10px 0 10px;
    width: 960px;
    
    background: rgb(235,235,235);
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
  }
  
    div#footer div.sub-links-header {
      float: right;
      margin: 0 60px 10px 30px;
      width: 150px;
    }
  
  div#header {
    position: absolute;
    left: auto;
    top: 0;
    margin: 10px auto 0 auto;
    min-height: 205px;
    width: 960px;
    z-index: 10000;
    
    background: url(../images/page-bg_top.gif) no-repeat left top;
  }
    
    div#header img.logo {
      float: left;
      margin: 23px 0 20px 9px;
      
      font-size: 230%;
      color: rgb(108,218,118);
    }
    
    div#header div#call-us {
      float: right;
      margin: 10px 60px 5px 0;
      width: 200px;
    }
    
    div#header div#main-image-banner {
      clear: left;
      float: left;
      margin: 15px 15px 0 15px;
      width: 930px;
      height: 160px;

      background: rgb(230,230,230) url(../images/index-banner_2.jpg) no-repeat left top;
    }

      div#main-image-banner h2 {
        float: left;
        margin: 30px 10px 5px 250px;
        padding: 0;

        font-family: Arial, Helvetica, "Lucida Sans Unicode", Cambria, Georgia, "Times New Roman", serif;
        font-size: 340%;
        font-weight: normal;
        line-height: 1.0em;
        letter-spacing: -1px;
        color: rgb(80,120,200);
      }

      div#main-image-banner p {
        clear: left;
        float: left;
        margin: 0 10px 0 250px;
        padding: 0;
        width: 476px;

        font-family: Cambria, Georgia, "Times New Roman", serif;
        font-size: 150%;
        line-height: 1.4em;
        color: rgb(60,60,60);
      }

        div#main-image-banner p em {
          color: rgb(10,10,10);
        }

        div#main-image-banner p.call-to-action {
          display: none;
          float: left;
          margin: -37px 0 0 230px;
          width: 640px;
          text-align: right;
        }

        div#main-image-banner p.call-to-action a,
        div#main-image-banner p.call-to-action a:visited {
          padding: 8px 10px;

          text-decoration: none;
          color: rgb(255,255,255);

          background: url(../images/index-bg_button.jpg) repeat-x left top;
          border: 5px solid #D1F4E3;
          -moz-border-radius: 5px;
          -webkit-border-radius: 5px;
        }

        div#main-image-banner p.call-to-action a:hover {
          padding: 8px 10px;
          color: rgb(255,255,255);

          background: url(../images/index-bg_button.jpg) repeat-x left top;
          border: 5px solid #A9E0C6;
        }

      div#main-image-banner a,
      div#main-image-banner a:visited {
        color: rgb(10,140,100);
        text-decoration: underline;
      }

      div#main-image-banner a:hover {
        color: rgb(255,255,255);
        text-decoration: none;
      }
  
  div#main {
    clear: left;
    float: left;
    margin: 0;
    padding: 0;
    width: 960px;
    
    background: url(../images/page-bg.gif) repeat-y left top;
  }

    /** Main Column (Left-column) **/
    div#main-column {
      float: left;
      width: 639px;
    }

      div#why-choose-better2know {
        float: left;
        margin: 20px 20px 0 14px;
        padding: 0 0 20px 0;
        width: 626px;

        border-bottom: 1px solid rgb(220,220,220);
      }
    
        div#why-choose-better2know h1 {
          margin: 15px 10px 10px 10px;

          font-family: Helvetica, Arial, sans-serif;
          font-size: 180%;
          font-weight: normal;
          color: rgb(35,120,185);
        }

        div#why-choose-better2know h2 {
          margin: 15px 0 8px 0;

          font-family: Cambria, Georgia, "Times New Roman", serif;
          font-size: 150%;
          font-weight: normal;
          color: rgb(20,20,50);
        }

        div#why-choose-better2know p {
          margin: 0 0 10px 0;

          font-family: Cambria, Georgia, Tahoma, sans-serif;
          font-size: 110%;
          line-height: 1.5em;
          color: rgb(110,110,110);
        }

          div#why-choose-better2know p a,
          div#why-choose-better2know p a:visited {
            color: rgb(15,130,210);
            text-decoration: underline;
          }

          div#why-choose-better2know p a:hover {
            text-decoration: none;
          }

        div#why-choose-better2know div.reason-left,
        div#why-choose-better2know div.reason-right {
          float: left;
          margin: 0 10px 0 5px;
          padding: 0 0 0 45px;
          width: 250px;
        }

        div#why-choose-better2know div.reason-left {
          clear: left;
        }

        div#why-choose-better2know div#reason-1 {
          background: transparent url(../images/icon-index-clipboard.jpg) no-repeat left 15px;
        }

        div#why-choose-better2know div#reason-2 {
          background: transparent url(../images/icon-index-map.jpg) no-repeat left 15px;
        }

        div#why-choose-better2know div#reason-3 {
          background: transparent url(../images/icon-index-leaf.jpg) no-repeat -6px 20px;
        }

        div#why-choose-better2know div#reason-4 {
          background: transparent url(../images/icon-index-sterling.jpg) no-repeat left 15px;
        }

      div#introduction {
        float: left;
        margin: 20px 20px 30px 14px;
        padding: 0 10px;
        width: 606px;
      }

        div#introduction h1, div#introduction h2 {
          margin: 0 0 15px 0;

          font-family: Cambria, Georgia, "Times New Roman", serif;
          font-size: 200%;
          font-weight: normal;
          color: rgb(60,180,70);
        }


        div#introduction h3 {
          margin: 15px 0 8px 0;

          font-family: Cambria, Georgia, "Times New Roman", serif;
          font-size: 150%;
          font-weight: normal;
          color: rgb(20,20,50);
        }

        div#introduction h4 {
          margin: 20px 0 8px 0;
          padding: 0;

          font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
          font-size: 105%;
          font-weight: normal;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: rgb(28,148,58);
        }

        div#introduction p {
          margin: 0 0 15px 0;

          font-family: Helvetica, Arial, sans-serif;
          font-size: 100%;
          line-height: 1.7em;
          color: rgb(80,80,80);
        }

        div#introduction ul {
          margin: 0 0 30px 15px;
        }

        div#introduction li {
          margin: 0 0 5px 0;
          padding: 0 0 0 20px;
          background: url(../images/bullet.gif) no-repeat left 6px;

          font-family: Helvetica, Arial, sans-serif;
          line-height: 1.6em;
          color: rgb(80,80,80);
        }

        div#introduction a,
        div#introduction a:visited {
          color: rgb(15,130,210);
          text-decoration: underline;
        }

        div#introduction a:hover {
          text-decoration: none;
        }


    /** Secondary Column (Right-column) **/
    div#secondary-column {
      float: right;
      margin: 0 0 0 35px;
      padding: 0 25px 0 0;
      width: 260px;
    }

   div#secondary-column h5,
   div#secondary-column div#box-3 h2 /* Looks like H5, but given extra prominence by SEOers?! */ {
      margin: 5px 5px 15px 5px;

      text-align: left;
      font-family: "Lucida Grande", "Lucida Sans Unicode", Arial;
      font-size: 89%;
      font-weight: normal;
      text-transform: uppercase;
      color:  rgb(66,143,188);
    }

     div#secondary-column p {
      margin: 10px 5px 10px 5px;

      text-align: left;
      font-family: Cambria, Georgia, "Times New Roman", serif, "Lucida Grande", Helvetica, Arial, sans-serif;
      font-size: 100%;
      line-height: 1.6em;
      color: rgb(70,70,70);
    }

    div#secondary-column li {
      margin: 0 0 10px 18px;
      padding: 0 0 3px 0;

      font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
      font-size: 89%;
      list-style-image: url(../images/footer-bullet.gif);
      list-style-position: outside;
      color: rgb(70,70,70);
    }

      div#live-chat {
        float: right;
        margin: 20px auto 10px auto !important;
        width: 260px;
        height: 100px;
      }

      div#make-appointment-top {
        float: left;
        margin: 0;
        margin: 43px 0 0 0; /* Remove */
        padding: 0;
        width: 275px;
        height: 10px;

        background: transparent url(../images/contact-box-wide-bg_top.gif) no-repeat left top;
      }

      div#make-appointment-body {
        float: left;
        margin: 0;
        padding: 0;
        width: 255px;

        background: transparent url(../images/contact-box-wide-bg_body.gif) repeat-y left top;
      }

        div#make-appointment-body h5 {
          margin: 0;
          padding: 5px 0;

          font-family: Helvetica, Arial, sans-serif;
          font-size: 140%;
          text-align: center;
          font-weight: normal;
          text-transform: none;
          color: rgb(30,30,30);

          background: transparent;
        }

        div#make-appointment-body div#book-online {
          margin: 0 auto;
          width: 215px;

          background: transparent url(../images/icon-bg_bookonline.png) no-repeat left top;
          border-bottom: 1px solid rgb(210,240,215);
        }

          div#make-appointment-body div#book-online p {
            padding: 2px 0 0 40px;

            font-size: 160%;
          }

          div#make-appointment-body div#book-online p a,
          div#make-appointment-body div#book-online p a:visited {
            color: rgb(0,0,0);
            color: rgb(15,130,210);
            text-decoration: underline;

            border: none;
          }

          div#make-appointment-body div#book-online p a:hover {
            text-decoration: none;
          }

        div#make-appointment-body div#phone-number {
          margin: 0 auto;
          padding: 0;
          width: 215px;

          background: transparent url(../images/icon-bg_phone.png) no-repeat left 7px;
          border-top: 1px solid rgb(175,210,150);
        }

          div#make-appointment-body div#phone-number p {
            margin: 5px 0 0 50px;

            font-family: Helvetica, Arial, sans-serif;
            font-size: 89%;
            line-height: 1.3em;
            color: rgb(0,0,0);
          }

          div#make-appointment-body div#phone-number p.london-times {
            color: rgb(80,80,80);
          }

          div#make-appointment-body div#phone-number p.phone-number {
            margin:10px 5px;
            padding: 0 0 0 40px;

            font-family: Cambria, Georgia, "Times New Roman", serif;
            font-size: 170%;
            line-height: 1.6em;
            color: rgb(0,0,0);
          }

        div#make-appointment-body div#phone-number p.phone-letters {
          margin: -15px 0 0 0;
          padding: 0 0 0 50px;

          font-family: Cambria, Georgia, "Times New Roman", serif;
          font-size: 140%;
          color: rgb(10,160,120);
          line-height: 1.6em;
        }

      div#make-appointment-base {
        float: left;
        margin: 0;
        padding: 0;
        width: 275px;
        height: 10px;

        background: transparent url(../images/contact-box-wide-bg_base.gif) no-repeat left bottom;
      }

      div#dr-jessen {
        float: left;
        margin: 0;
        width: 275px;
        height: 190px;

        background: transparent url(../images/dr-jessen_box.gif) no-repeat left -10px;
      }

      div#dr-jessen h5 {
        display: block;
        height: 200px;
        text-indent: -9999px;
        overflow: hidden;
      }

        div#dr-jessen h5 a {
          text-decoration: none;
          border: none;
        }

      div#location-list {
      float: left;
      width: 255px;
      margin: 25px 0 20px 0;
      padding: 5px 0 0 0;

      border-top: 1px solid rgb(220,220,220);
      }

        div#location-list h2 {
          margin: 10px 0 15px 0;

          font-family: Cambria, Georgia, "Times New Roman", serif;
          font-size: 140%;
          font-weight: normal;
          line-height: 1.6em;
          color: rgb(120,120,120);
        }

        div#location-list a,
        div#location-list a:visited {
          color: rgb(15,130,210);
          text-decoration: underline;
        }

        div#location-list a:hover {
          text-decoration: none;
        }

      div#partners {
        float: left;
        width: 255px;
        margin: 15px 0 10px 0;
        padding: 0;

        border-top: 1px solid rgb(220,220,220);
      }

        div#partners p {
          margin-top: 15px;
        }

        div#partners img {
          float: right;
          margin: 0px 10px 10px 5px;
        }

/** Text styles **/
  #footer p {
    float: left;
    margin: 0 30px 0 60px;
    
    font-size: 80%;
    
    color: rgb(150,150,150);
  }
  
  #footer div.sub-links-header p {
    margin: 0 0 0 -110px;
    
    font-weight: bold;
  }
  
  #footer a, 
  #footer a:visited {
    display: block;
    
    color: rgb(130,130,130);
  }
  
  #footer a:hover {
    color: rgb(45,97,127);
  }
  


/** List styles **/
  #footer ul {
    margin: 0 0 0 10px;
  }
  
  #footer li {
    margin: 0 0 5px 10px;
    padding: 0 0 3px 0;
    
    list-style-image: url(../images/footer-bullet.gif);
    list-style-position: outside;
    font-size: 80%;
    
    border-bottom: 1px solid rgb(220,220,220);
  }
  
  #footer li:hover {
    border-bottom: 1px solid rgb(108,185,229);
  }


/** CMS-specific elements **/
div#main-menu {
  clear: left;
  float: left;
}

div#top_main_menu {
  float: left;
  margin: 0 15px;
  padding: 0;
  width: 930px;
  
  background: rgb(64,157,227) url(../images/menu-bg.jpg) no-repeat left top;
}

  ul#top_main_menu_menu {
    display: inline;
    float: left;
    margin: 0 0 0 2px;
    padding: 0;
    z-index: 1111;
  }
  
  ul#top_main_menu_menu li {
    display: inline;
    float: left;
    margin: 0;
    padding: 5px 10px 6px 10px;
    
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.25em;
    
    border-left: 1px dotted rgb(150,160,230);
    border-left: 1px dotted rgb(170,180,250);
  }
  
  ul#top_main_menu_menu li.last {
    border-right: 1px dotted rgb(150,160,230);
    border-right: 1px dotted rgb(170,180,250);
  }
  
  #top_main_menu_menu li.selected, 
  #top_main_menu_menu li:hover {
    padding: 5px 10px 6px 10px;
    background: url(../images/menu-bg_hover.jpg) no-repeat left -1px;
  }
  
  #top_main_menu_menu li.selected a {
    cursor: default;
  }
  
  ul#top_main_menu_menu li.subpages {
    background: url(../images/menu-arrow-down.gif) no-repeat 2px 11px;
  }
  
  ul#top_main_menu_menu li.subpages:hover, 
  ul#top_main_menu_menu li.subpages-select {
    background: url(../images/menu-bg-subpages_hover.jpg) no-repeat -3px top;
  }
  
  #top_main_menu_menu a, #top_main_menu_menu a:visited {
    color: rgb(255,255,255);
    padding: 5px 0 5px 0;
  }
  
  ul#top_main_menu_menu ul {
    display: block;
    margin: auto;
    padding: auto;
    left: -999em;
    position: absolute;
    width: 150px;
    z-index: 1000;
  }
  
  ul#top_main_menu_menu li ul li {
    display: block;
    margin: auto;
    margin: 0;
    padding: 0;
    width: 150px;
    
    font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 86%;
    color: rgb(255,255,255);
    
    border: none; /* reset border from top-level menu */
    border-bottom: 1px dotted rgb(180,180,200);
  }
  
  ul#top_main_menu_menu li ul li.first {
    background: url(../images/menu-sub-shadow-top.gif) repeat-x left top;
  }
  
  ul#top_main_menu_menu li ul li.last {
    border: none; /* reset border from toplevel menu */
    border-bottom: 2px solid rgb(46,123,168);
  }
  
  #top_main_menu_menu li:hover ul {
    left: auto;
    margin: 6px 0 0 -10px;
    padding: 0;

    background: rgb(88,155,189);
    z-index: 50020;
  }
  
  ul#top_main_menu_menu li ul li:hover {
    margin: 0;
    padding: 0;

    color: rgb(48,115,149);

    background: rgb(110,225,120);
  }
  
  ul#top_main_menu_menu li ul li.first:hover {
    background:  rgb(110,225,120) url(../images/menu-sub-shadow-top_hover.gif) repeat-x left top
  }
  
  ul#top_main_menu_menu li ul li:hover a:hover {
    color: rgb(48,115,149);
  }
  
  ul#top_main_menu_menu li ul li a {
    display: block;
    margin: 0;
    padding: 5px 15px;
  }

  ul#top_main_menu_menu li ul li a:visited {
    padding-left: 15px;
  }

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

.clearfix {
  display:inline-block;
}

html[xmlns] .clearfix {
  display:block;
}

* html .clearfix {
  height:1%;
}