/*--- Section 0: Clearup  --- */

/* Purpose: undo some of the default styling of common (X)HTML browsers */
/* derived from UndoHTML by Tantek Celik */

/* link underlines can make hypertext less readable */
/* I often reverse this, as users are used to underlined */
:link,:visited {text-decoration:  none;}

/* list often used for menus etc, so remove icons etc */
ul,ol {list-style: none;}

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code {font-size: 1em;}

/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
body,html,ul,ol,li,h1,h2,h3,h4,h5,h6,p,th,td,tr {
  margin: 0;
  padding: 0;
}

pre,form,blockquote,fieldset,input {
  margin: 0;
  padding: 0;
}

/* get rid of stupid borders round linked images */
a img,:link img,:visited img {border:none}

/* de-italicize address */
address {font-style: normal}

/*--- Section 1: Typo  --- */
/* typographic settings for site, font typs & sizes*/
/* link styling is included here, as is line-height*/
/* and list styling */
body{font: normal  medium  Arial, Helvetica, sans-serif;}


/*--- header details ---*/
h1 {
  font-size: 300%;
  font-weight: bold;
  text-align: left;
  letter-spacing: -1px;
  font-family: "Times New Roman", Georgia, serif;
}
h1 span{
  font-style: normal;
  font-weight: normal;
  font-size:50%;
  letter-spacing: 0;
}

h1 span#kword0{
  font-size:30%;
}

h1 span#kword2{
  font-style: italic;
  font-size:30%;
  text-align: center;
}

p#strapline{font-size: 100%; font-weight: bold;}

/*--- content detail ---*/
#content #introsect h2 {
  text-align: center;
  font-weight: bold;
  font-size: 120%;
}

/*h2{font-size: 110%; font-weight: bold; }*/
h3{font-weight: normal;}

#content blockquote {margin-bottom: 2em;}

#content blockquote p{
  font-family: Verdana;
  font-size: 90%;
  color: #444;
  font-style: italic; /*see iehack file */
}
#content blockquote.textright p{text-align: right;}

#content blockquote.revquote p{
  font-family: "Lucida Sans";
  font-size: 85%;
  text-align: left;
}

#content blockquote.revquote p.quotesrc{
  font-style: normal;
  color: black;
  line-height: 100%;
  margin-bottom: 2em;
  padding-bottom: 1em;
}

/*#content blockquote p:first-child > *:first-letter{font-size: 140%;}*/

#content blockquote p.quotesrc {text-align: right;}

#content div#comments p{font: italic 100% Verdana;}


p.para1 {font-size: 110%;}

#helps p{
  font-size: 70%;
  text-align: right;
}

#helps2 {font-size: 80%;}

#content {text-align: left;}
#content p {
  font-size: 100%;
  line-height: 140%;
  text-align: justify;
}
#content p.permalink, #content p.permalink_arc,#content p.archive_link {font-size: 80%;}
#content p.localnav, #content p.prevnext{
  text-align: center;
  font-size: 90%;
  font-style: italic;
}
#content p.linkstext {
  font-size: 90%;
  margin: 5px 30px;
}

#content h2 span#instruments{
  font-size: 90%;
  font-weight: normal;
  color: #888;
}

#content h3 span.teacher{
  font-size: 80%;
}

#content strong {font-weight: bold;}

#contentsec ul li {
  font-size: 85%;
}
/*--- footer detail ---*/
#footer{
  font-size: 90%;
  text-align: left;
}
#fcol1, #fcol2, #fcol3{text-align:center;}

#footer p#bot {text-align: center;}


/*--- Section 2: Colour  --- */
/* Purpose: colour schemes & background pics for site */
body{
  color: black;
  background-color: white; /* #f4a854;*/ /* orange */
}

/*--- link colouration ---*/
/*:link,:visited {text-decoration: underline}*/
a{
  text-decoration: none; /*underline;*/
  color: #526BB5;
  border-right: 1px solid transparent;
  border-bottom: 1px dotted #888;
  .border-bottom: 1px solid #888; /* IE6 hack */
}
a.rssfeed, #content ul li a.rssfeed {
  padding-right: 15px;
  padding-top: 2px;
  background: url(../images/custom/0design/rss2feed.gif) no-repeat bottom right ;
}

a:visited  {color: #526BB5;}

/*  highlighting external links using CSS3 selector  */
#content a[href^="http:"],#content a[href^="https:"] {
  background: url(../images/custom/0css/external_link.gif) no-repeat right 25%;
  padding-right: 8px;
}

#content a[href^="http://www.violinbabies.com"], a[href^="http://violinbabies.com"]  {
  background-image: none;
  padding-right: 0;
}

a:hover {
  color: black;
  background-color: #edebd5;
  text-decoration: none;
  border-bottom: 1px solid #800;
  border-right: 1px solid #800;
}


#logo a, #logo a:link {
  border: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
}

  /*--- links colour secondary content ---*/
#contentsec a{
  color: #444;
  border-right: 1px solid #DB903D;
}
#contentsec a:visited{color: #444;}


/* --- other colour stuff ---*/
#wrapper {
 background: #fffbee url(../images/custom/0css/logo_q1.jpg) no-repeat top left;
}

#header {
}
#header_marg {
  background: white url(../images/custom/0css/logo_q2.jpg) no-repeat top left;
}

h1{color: #a00;}
h1 span{color: black ;}
#header h1 a {
  border-bottom: none;
  color: #a00;
}
#header #header_txt h1 a:hover {border-bottom: 1px solid black;}

p#strapline{
  color: #990033;
  background-color: transparent;
}

#content {
  background: #fffbee url(../images/custom/0css/logo_q3.jpg) no-repeat top left;
  .background: #fffbee url(../images/custom/0css/logo_q3.jpg) no-repeat top left; /* IE6 hack */
 }
.#content_marg  a{border-right: 1px solid #fff4cc;}

#content h2,#content h3 a{
  color: #a00;
}

#content #introsect h2 {
  color: black;
  background: transparent url(none);
}

#content h3, #content h3 a{
  color: #a00;
}
#content p.para1 {color: black;}
#content p.para1 em {color: #a00;}
#content h2 a{color: #a00;}

div.imgcen img, div.imgleft img, div.imgright img  {
  border: 1px solid #bbb;
  background-color: #eee;
}
#content div#googlemap img{
  background-color: transparent; /*crucial color images otherwise google map markers dont show!!*/
}

#content li{
  list-style: square;
  list-style-position: inside;
}

div#googlemap div#map_canvas{border: 5px solid white;}

#contentsec {
}
#contentsec_marg {
}
#contentsec h2{
  color: #a00;
}
#contentsec a{
  border-right:0;
}


hr {
  color: #fffbee; /* IE6 */
  background-color: transparent;
  border: 0;
}
#introsect hr {
  padding: 0;
  margin: 0;
  color: white;
  background-color: white;
}

#helps {
  color: #444;
}
#helps a {
 color: #444;
 border-right: 1px solid transparent;
 border-bottom: 1px dotted #888;
 .border-bottom: 1px solid #888;
 .border-right: 1px solid #c2d09d; /* IE6 hacks */
}


#helps a:hover {
  background: black;
  color: white;
}

#helps2_marg {
  color: #ddd;
  background-color: #7F7F65;

}
/*--- footer detail ---*/

#footer{
  color: #ddd;
  background-color: #7F7F65;
}

#footer p#bot {
  color: #aaa;
  background-color: transparent;
}

#footer a, #helps2 a{
  color: #eee;
  border-right: 1px solid #7F7F65;
  border-bottom: 1px dotted #ddd;
  _border-bottom: 1px solid #ddd; /*IE6 hack */
}
#footer a:visited, #helps2 a:visited{color: #ddd;}
#footer a:hover, #helps2 a:hover {color: black; border-right: 1px solid #a00;}


/*--- Section 3: Layout  --- */
/* layout of pages start with main sections */

/*--- main sections ---*/
#wrapper{
  position: relative;
  /*min-width: 800px;
  max-width: 1140px; */
  width: 906px;
}

#wrapper_marg {
  position: relative;
  width: 100%;
  /*padding-left: 306px; /* width of secondary content on LHS */*/
}

#header {
  position: relative;
  float: right;
  width: 600px;
  right: 0;
  top: 0;
  height: 244px;  /* [logo_q2]*/
  z-index: 1000;
}

#content{
  position: relative;
  padding-top: 70px;
  float: right;
  width: 600px;
  right: 0;
}

/* this floats up to bottom of header [logo_q2] */
#contentsec {
  position: relative;
  top: 0;
  float: left;
  width: 306px;
  padding-top: 86px; /* 330px[logo_q1]-244px[logo_q2] */
}

#footer{
  clear: both;
}

#contentsec_marg {
  position: relative;
  margin-left: 10px;
  margin-bottom: 1em;
  font-size: 90%;
}

/*--- header details ---*/
#header {
  /*border: 1px solid blue;
  padding: 1px; */

}

#header_marg {
  position: relative;
  padding: 0 0 0 0;
  height: 244px;
  width: 100%;
}

#header_txt {
  width: 100%;
}


h1 {
  position: absolute;
  top: 65px;
  left: 188px;
width: 410px;
  margin-top: -0.5em;
}

h1 span {
  display: block;
  margin-top: 40px;
  margin-left: 22px;
}

h1 span#kword0 {
  margin-top: -4px;
}

h1 span#kword {
position: absolute;
top: 85px;
}

h1 span#kword2 {
position: absolute;
top: 170px;
  margin-top: 0;
}

p#strapline {
  position: absolute;
  top: 125px;
  left: 210px;
  /*margin-left: 1em;*/
  margin-top: -0.5em;
}

#content blockquote.revquote{
  margin-left: 20px;
  margin-right: 60px;
}

/*--- content detail ---*/
#content_marg {
  margin-left: 30px;
}

h2 {
  margin: 0 0 0.1em 0;
  padding: 0.9em 0 0em 15px;
}
#content #introsect #cloud {
  width: 30%;
  float: right;
  font-size: 90%;
  padding-left: 10px;
  font-style: italic;
}
#content #introsect #cloud p {
  margin: 1em 0 0 0;
}

#content #introsect #search_teacher {
  padding-top: 0.2emm;
}

#content #introsect #search_teacher p{
  margin-left: 0;
  margin-top: 0;
}


#content #introsect h2 {
  position: absolute;
  padding: 0.5em 10px 0.4em 10px;
  margin-top: -65px;
  margin-left: 60px;
}

h3 {
  /*margin-left: 3px;
  margin-right: 3px;*/
  padding: 3px 0 3px 15px;
}

#content ul li{
  margin: 0px 30px 10px 28px
}

#content p {
  margin: 0 10px 1em 15px;
  text-align: left;
}

div.youtube {
  text-align: center;
  margin-bottom: 30px;
}

div.imgcen {text-align: center;}

div.imgleft {float: left;
  text-align: left;
  margin: 10px 10px 10px 30px;
  .margin-left: 10px; /*IE6 hack */
}
div.imgright {float: right;
  text-align: left;
  margin: 10px 30px 10px 10px;
  .margin-right: 0px; /*IE6 hack */
}
div.floatleft {float: left;}

div.imgcen img, div.imgleft img, div.imgright img {padding: 3px 4px 10px 3px;}

img.rssfeed {
  float: left;
  padding: 0;
  border: 0;
  margin-right: 10px;
}

hr {clear: both;}

.clearfloat{clear: both;}


#content a.backtotop{
      text-decoration: none;
      margin: 0 0 1em 20px;
      padding: 0 0 0 10px;
      font-size: 80%;
      color: green;
      background-image: url(../images/custom/0css/subnav_up.gif);
      background-repeat: no-repeat;
      background-position: center left;
}

#content dt{
      font-weight: bold;
      margin: 10px 0 0 20px;
}

#biopic{
      float: right;
      border: 2px solid red;
      margin: 15px 0 10px 10px;
}

#mailinglist_form {
  margin: 0 0 1em 10px;
}

/*--- content secondary detailed layout---*/
#contentsec_marg h2{
  padding-left: 0;
}
#contentsec_marg p{
  margin-bottom: 0.25em;
  font-size: 90%;
}

/* search */
#contentsec form p span{
  display: block;
  font-size: 90%;
}

/*--- site help links ---*/
#helps {
  position: absolute;
  top: 0px;
  right: 2px;
  z-index: 10000;
}

#helps2 {
  margin-top: 1em;
  clear: both;
  position: relative;
}
#helps2_marg {
  padding: 1em 0 0.15em 8px;
}


/*--- footer detail ---*/
#footer {position: relative;}

#footer_marg {
  position: relative;
  margin-left: 336px;
}

#footer_marg p{
  padding: 0 0 2px 0;
  margin-bottom: 0;
}

/* footer columns */
#fcol1, #fcol2, #fcol3{
  position: relative;
  width: 189px;
  float: left;
}

#footer_marg p {margin-left: 5px;}
#footer_marg ul {margin-left: 8px;}
#footer p#bot {
  clear: both;
  padding: 5px 0 5px 0;
  margin:0;
}

/*--- Section 4: Nav  --- */
  /*--- navigation layout/font/colours in one place ---*/
#nav {
  position: relative;
  left: 0;
  text-align: left;
  font: normal bold 110%/120%;
  background-color: #fff3ca;  /* pale yellow/straw */
}

#nav_marg {
  margin: 0 0 0 0;
  padding-bottom: 0;
  background-color:  transparent;
}

#nav h2{
  /* background: #eee url(/images/custom/0css/h2back.gif) repeat-x bottom left ;*/
  background-color: #fd7433; /*orange */
  color: black;
  padding-top: 15px;
  padding-bottom: 15px;
  margin: 0;
}
#nav ul {padding: 0; }
#nav li {
  padding: 0;
  margin: 0;
  color: white;
}

#nav li a {
  color: #448;
  padding: 15px 10px 13px 35px;
  font-weight: bold;
  border-bottom: 0;
  border-right: 0;
  text-decoration: none;
  display: block;
  background: transparent url(../images/custom/0css/octagon.gif) no-repeat 5px 55%;
}

#nav li a:hover{
  color: #a00;
  background: #edebd5 url(../images/custom/0css/octagon_hov.gif) no-repeat 5px 55%;
}

#subnav ol{
      margin-left: 20px;
      margin-bottom: 0.75em;
}

#subnav li {
      display: inline;
      list-style-type: none;
      margin: 0 0 0 0;
      padding: 0 3px 0 0;
      font-size: 80%;
      background-image: url(../images/custom/0css/subnav_down.gif);
      background-repeat: no-repeat;
      background-position: left;
}

#subnav a{
      color: red;
      text-decoration: none;
      margin-left: 10px !important;
      padding-right: 1px !important;
}

#subnav a:hover, #content a.backtotop:hover{
      border-bottom: 1px solid red;
      color: white;
      background-color: black;
      outline: 1px solid red;
}

/* single page items in main nav */
#pid_home li#navlnk_home a,
#pid_about li#navlnk_about a,
#pid_blog li#navlnk_blog a,
#pid_contact li#navlnk_contact a,
#pid_gallery li#navlnk_gallery a,
#pid_links li#navlnk_link a,
#pid_materials li#navlnk_matls a
{
  color: #a00;
  text-transform: uppercase;
  font-weight: bold;
  padding-left: 10px;
  border-right: 1px solid c2d09d;
  background: #c2d09d url(../images/custom/0css/triangle.gif) no-repeat 275px 55%;
}

/* multi page items in main nav */
#pid_reviews li#navlnk_reviews a,
#pid_events li#navlnk_events a,
#pid_tutors li#navlnk_tutors a, #pid_tutor li#navlnk_tutors a,
#pid_members li#navlnk_members a
{
  color: #a00;
  text-transform: uppercase;
  font-weight: bold;
  padding-left: 10px;
  border-right: 1px solid c2d09d;
  background: #c2d09d url(../images/custom/0css/triangle.gif) no-repeat 275px 55%;
}

/* hover effects */
#pid_home li#navlnk_home a:hover,
#pid_about li#navlnk_about a:hover,
#pid_blog li#navlnk_blog a:hover,
#pid_events li#navlnk_events a:hover,
#pid_reviews li#navlnk_reviews a:hover,
#pid_gallery li#navlnk_gallery a:hover,
#pid_links li#navlnk_link a:hover,
#pid_materials li#navlnk_matls a:hover,
#pid_tutors li#navlnk_tutors a:hover, #pid_tutor li#navlnk_tutors a:hover,
#pid_members li#navlnk_members a:hover {

  background: #C2D09D url(../images/custom/0css/triangle.gif) no-repeat 280px 55%;
}

/*--- Section 5: IEHacks  --- */