/*
  demo1.css
  Collapsible/Expandable Sections
  This is the CSS for the tutorial.
*/

html, body {
  margin:0;
  padding:0;
  color:#000;
  background:#fff;
  font-size:small;
  font-family:verdana,arial,helvetica,sans-serif;
}
body {
  min-width:750px;
  text-align:center; /* to center layout-container in IE6 */
}
a {
  color:#339;
  text-decoration:none;
}
a:hover {
  color:#fff;
  background-color:#339;
  text-decoration:none;
}
h1 {
  color:#009;
  font-size:225%;
  font-weight:bold;
}
h2 {
  font-size:166%;
  font-weight:bold;
}
h3 {
  font-size:133%;
  font-weight:bold;
}
h4 {
  font-size:100%;
  font-weight:bold;
}

#layout-container {
  margin:1em auto; /* to center layout-container in modern browsers */
  padding:0;
  width:750px;
  text-align:left; /* to keep body's "text-align:center" from being inherited */
}
#layout-header {
  margin:0;
  padding:.5em 2em;
  background:#ccc;
}
#layout-header h1 {
  margin:0;
  padding:0;
}
#layout-header p {
  margin:0;
  padding:.2em 0;
}
#layout-hmenu {
  background:#ddd;
  margin:0;
  padding:.2em 2em;
}
#layout-hmenu ul {
  margin:0;
  padding:0;
  list-style:none;
}
#layout-hmenu li {
  display:inline;
  margin:0 .6em 0 0;
  padding:0;
}
#layout-hmenu li a {
  font-size:smaller;
}
#layout-main-col {
  margin:0;
  padding:1em 2em;
  background:#eee;
}
#layout-footer {
  margin:0;
  padding:.2em 2em;
  background:#ccc;
}

/* Rules for the Collapsible/Expandable enhancement */

.collapsible {
  position:relative;
}
.CollapseIcon, .ExpandIcon {
  position:absolute;
  overflow:hidden;
  left:-16px;
  top:5px;
  width:9px;
  height:9px;
  margin:0;
  padding:0;
  cursor:pointer;
}
.CollapseIcon {
  background-image:url("../../images/minus9x9.gif");
}
.ExpandIcon {
  background-image:url("../../images/plus9x9.gif");
}