/**
 * The Holier Grail Website Layout Framework
 * @author    Bill Brown <mailto:macnimble@gmail.com>
 * @copyright None really.
 *            You may use The Holier Grail freely, for any project.
 *            Just please don't claim credit for creating it.
 * @timestamp 2008-MAR-10 2:40 AM
 *
 * @page      Theme Style
 */

html{}
body{background:             #ffffff;}

/**
 * DEFAULT LINK STYLES FOR THIS THEME
 */
a{text-decoration:           none;}
a:link{color:                #0000CC;}
a:visited{color:             #666699;}
a:focus{color:               #0000ff;}
a:hover{color:               #0000ff;}
a:active{color:              #0000ff;}

#pageShell{
  background:                #fff;
  border:                    0;
  border-top:                3px solid #669;
  border-bottom:             1px solid #669;}
#pageShell #headFrame,
#pageShell #pageFrame{
  margin:                    0 auto;
  max-width:                 800px;
  min-width:                 600px;}

#headFrame{
  border-bottom:             1px solid #999;}
#headFrame div.panel{}
#headFrame div.panel h1{}
#headFrame div.panel h1 a:link{}
#headFrame div.panel h1 a:visited{}
#headFrame div.panel h1 a:focus{}
#headFrame div.panel h1 a:hover{}
#headFrame div.panel h1 a:active{}
#headFrame div.panel h1 a span{}

/**
 * Background for Left Column
 */
#pageFrame{
  background:                #f0f0f0;
  border-right:              0.05em solid #999999;
  border-left:               0.05em solid #999999;}
/**
 * Background for Right Column
 */
#pagePanel{
  background:                #dedede;
  border-color:              #999;}
/**
 * Background for Center Column
 */
#coreFrame{
  background:                #ffffff;
  border-color:              #999;}

#mainFrame,
#moreFrame,
#menuFrame{padding-top:      2px;}

#mainFrame p.loNote{
  font-size:                 80%;}
#pageFrame p{
  line-height:               1.5;}

#mainFrame div.panel,
#moreFrame div.panel,
#menuFrame div.panel{
  margin:                    0 5px 5px 5px;}

#moreFrame ul,
#menuFrame ul{
  list-style:                none;
  margin:                    0 0 0.5em 0;
  padding:                   0;
  text-indent:               0;}
#moreFrame ul li,
#menuFrame ul li{
  list-style:                none;
  margin:                    0;
  padding:                   0;
  text-indent:               0;}
#moreFrame ul li a,
#menuFrame ul li a{
  display:                   block;
  padding:                   4px 6px;
  text-decoration:           none;}
#moreFrame ul li a:hover,
#menuFrame ul li a:hover{
  background:                #fcfcfc;
  border:                    1px solid #CCCCCC;
  display:                   block;
  padding:                   3px 5px;
  text-decoration:           none;}

#footFrame{
  border-top:           1px solid #999;
  padding:              2px 0;}
#footFrame p{
  margin:               0 0 5px 0;
  text-align:           center;}

code{
  background:           #fcfcfc;
  border:               1px solid #CCCCCC;
  color:                #666666;
  display:              block;
  margin:               0 0 5px 0;
  padding:              2px;
  white-space:          pre;}
p.loNote{
  font-size:            80%;
  letter-spacing:       0.15em;
  margin:               0;}

/**
 * DYNAMIC MENU STYLES
 * Some or all of this could or maybe _should_ be put into a separate (global?)
 * style sheet. Maybe separating out the placement from the coloring?
 */
ul.horizontal,
ul.horizontal li,
ul.vertical,
ul.vertical li{
  list-style:           none;
  margin:               0;
  padding:              0;
  position:             relative;}
li.show ul{display:     block;}
li.show{z-index:        9999;}
li.hide ul{display:     none;}
li.hide{z-index:        9;}
ul.horizontal{
  background:           #f9f9f9;
  border-top:           1px solid #f1f1f1;
  border-bottom:        1px solid #dedede;
  list-style:           none;
  margin:               0;
  padding:              2px;}
ul.horizontal ul{
  background:           #ffffff;
  border:               1px solid #cccccc;
  left:                 0;
  list-style:           none;
  margin:               0;
  margin-top:           6px;
  padding:              2px;
  position:             absolute;
  top:                  1em;
  z-index:              9998;}
ul.horizontal ul ul{
  left:                 2px;
  margin-top:           0;
  margin-left:          100%;
  top:                  -3px;}
ul.horizontal li{
  display:              inline;
  float:                left;
  list-style:           none;
  margin:               0;
  padding:              0;
  position:             relative;
  white-space:          nowrap;}
ul.horizontal li h3{
  border-left:          2px groove #e5e5e5;
  font-size:            1em;
  margin:               2px 0 2px 3px;
  padding:              1px 5px 2px 5px;}
ul.horizontal ul li{
  float:                none;
  display:              block;
  list-style:           none;
  margin:               0;
  padding:              0;
  position:             relative;
  white-space:          nowrap;}
ul.horizontal li.hide a,
ul.horizontal li.show li.hide a,
ul.horizontal li a{
  background:           transparent;
  border:               none;
  color:                #009;
  display:              block;
  padding:              3px 26px 5px 6px;
  position:             relative;
  text-decoration:      none;}
ul.horizontal li.show a{
  background:           #ffffff;
  border:               1px solid #cccccc;
  border-bottom:        none;
  color:                #000;
  cursor:               pointer;
  display:              block;
  padding:              2px 25px 4px 5px;
  z-index:              9999;}
ul.horizontal li.show li a{
  background:           #fcfcfc;
  border:               1px solid #aaaaaa;
  color:                #000;
  cursor:               pointer;
  display:              block;
  padding:              2px 25px 4px 5px;
  z-index:              9999;}
ul.horizontal li a.indicator{
  background-image:     url("../../img/indicator.png") !important;
  background-repeat:    no-repeat !important;
  background-position:  100% 50% !important;}
ul.horizontal li.show a.indicator{
  background-image:     url("../../img/indicator.png") !important;
  background-repeat:    no-repeat !important;
  background-position:  100% 50% !important;}
ul.horizontal ul a.indicator{
  background-image:     url("../../img/indicator.png") !important;
  background-repeat:    no-repeat !important;
  background-position:  100% 50% !important;}
ul.horizontal ul li.show a.indicator{
  background-image:     url("../../img/indicator.png") !important;
  background-repeat:    no-repeat !important;
  background-position:  100% 50% !important;}
ul.vertical{
  background:           #dedede;
  border:               1px solid #999;
  list-style:           none;
  margin:               0;
  padding:              2px;
  width:                18em;}
ul.vertical ul{
  background:           #fefefe;
  border:               1px solid #999;
  left:                 2px;
  list-style:           none;
  margin:               0;
  margin-left:          100%;
  padding:              2px;
  position:             absolute;
  top:                  0;
  z-index:              5;}
ul.vertical ul ul{top:  -3px;}
ul.vertical li{
  list-style:           none;
  margin:               0;
  padding:              0;
  position:             relative;
  white-space:          nowrap;
  z-index:              9996;}
ul.vertical li h3{
  border-top:           2px groove #e5e5e5;
  border-bottom:        2px groove #e5e5e5;
  font-size:            1em;
  margin:               2px 0 2px 3px;
  padding:              1px 5px 1px 5px;}
ul.vertical li.hide a,
ul.vertical li.show li.hide a,
ul.vertical li a{
  background:           transparent;
  border:               none;
  color:                #009;
  display:              block;
  padding:              3px 18px 3px 6px;
  position:             relative;
  text-decoration:      none;}
ul.vertical li.show a{
  background:           #fefefe;
  border:               1px solid #999;
  color:                #000;
  cursor:               pointer;
  display:              block;
  padding:              2px 17px 2px 5px;
  z-index:              9997;}
ul.vertical li.show li a{
  background:           #ffffe1;
  border:               1px solid #999;
  color:                #000;
  cursor:               pointer;
  display:              block;
  padding:              2px 17px 2px 5px;
  z-index:              9997;}
ul.vertical li a.indicator{
  background-image:     url("../../img/indicator.png") !important;
  background-repeat:    no-repeat !important;
  background-position:  100% 50% !important;}
ul.vertical li.show a.indicator{
  background-image:     url("../../img/indicator.png") !important;
  background-repeat:    no-repeat !important;
  background-position:  100% 50% !important;}