/* Initial principals */
* {margin: 0; padding: 0;}
html { height: 100%; width: 100%; }
a { text-decoration: none; }

/* The page has a background image of one IBRA logo */
body { display: table; background-image: url("../images/IBRA%20top.jpg"); background-repeat: no-repeat; font-family: "Verdana", "sans"; }

/* Container contains two columns - "menu" and "maincontent" */
/*#container { display: table-row; }*/

/* Column 1 = "menu" */
.menu { display: table-cell; width: 180px; padding-left: 10px; padding-right: 50px; }
/* and for IE: */
*:first-child+html .menu { float: left; } /* Hack for IE7 */
* html .menu { float: left; } /* Hack for IE6 and below */

.menu ul { padding-top: 240px; list-style: none; min-width: 150px; width: 150px; }
.menu li { padding-top: 0.8em; text-align: center; border-bottom: thin solid #800000; font-family: "Tahoma", "Verdana", "sans"; }
.menu a { color: #800000; background: transparent;} /* NB - this "includes" visited etc and is overridden for hover below */
.menu a:hover { color: #000080; }

/* Column 2 = "maincontent", contains "header", "maintext" and "middleimages" in vertical order */
.maincontent { padding-top: 0; display: table-cell; padding-right: 10px; min-width: 60px;  }
/* and for IE: */
*:first-child+html .maincontent { float: left; } /* Hack for IE7 */
* html .maincontent { float:left; } /* Hack for IE6 and below */

.heading h1 { color: #000080; margin-top: 1em; padding-bottom: 0.5em; }


.maintext { background-color: #800000; color: #CCCCCC; padding-bottom: 0em; }
/* When CSS3 finally works we can do this:  border-radius: 5px; and have bottom padding 1em, but until then see the following lines! */
.maintext:before {
  background: transparent url("../images/top-right.png") scroll no-repeat top right;
  margin-bottom: -20px;
  height: 30px;
  display: block;
  border: none;
  content: url("../images/top-left.png");
  padding: 0;
  line-height: 0.1;
  font-size: 1px;
}
.maintext:after {
  display: block;
  line-height: 0.1;
  font-size: 1px;
  content:  url("../images/bottom-left.png");
  margin: 0 0 -1px 0;
  height: 30px;
  background: white;
  background: transparent url("../images/bottom-right.png") scroll no-repeat bottom right ;
  padding: 0;
}
/* and IE doesn't even support the above so to tidy up we need to put our padding-bottom back to 1em */
*:first-child+html .maintext {  padding-bottom: 1em; } /* Hack for IE7 */
* html .maintext {  padding-bottom: 1em; } /* Hack for IE6 and below */

.maintext p { text-align: justify; padding-left: 1em; padding-top: 1em; padding-right: 1em; }
.maintext .bible { font-size: 0.8em; font-family: "Tahoma", "Verdana", "sans"; padding-left: 5%; padding-right: 5%;  }
.maintext ul { padding-left: 2em; padding-top: 1em; }
.maintext h2 { font-size: 1.2em; padding-top: 0.833333em; padding-left: 0.833333em; }
.maintext h3 { font-size: 1.1em; padding-top: 0.909090em; padding-left: 0.909090em; }
.maintext address { text-align: left; padding-left: 2em; padding-top: 1em; padding-right: 1em; }
.maintext a { color: #CCCCCC; text-decoration: underline; }
.maintext b { font-style: italic; text-decoration: none; }
.maintext form { padding-left: 2em; padding-top: 1em; }


.quotetext { background-color: #800000; color: #CCCCCC; padding-bottom: 0em; }
/* When CSS3 finally works we can do this:  border-radius: 5px; and have bottom padding 1em, but until then see the following lines! */
.quotetext:before {
  background: transparent url("../images/top-right.png") scroll no-repeat top right;
  margin-bottom: -20px;
  height: 30px;
  display: block;
  border: none;
  content: url("../images/quo-top-left.png");
  padding: 0;
  line-height: 0.1;
  font-size: 1px;
}
.quotetext:after {
  display: block;
  line-height: 0.1;
  font-size: 1px;
  content:  url("../images/bottom-left.png");
  margin: 0 0 -1px 0;
  height: 30px;
  background: white;
  background: transparent url("../images/quo-bottom-right.png") scroll no-repeat bottom right ;
  padding: 0;
}
/* and IE doesn't even support the above so to tidy up we need to put our padding-bottom back to 1em */
*:first-child+html .quotetext {  padding-bottom: 1em; } /* Hack for IE7 */
* html .quotetext {  padding-bottom: 1em; } /* Hack for IE6 and below */

.quotetext p { text-align: justify; padding-left: 1em; padding-top: 1em; padding-right: 1em; }
.quotetext .bible { font-size: 0.8em; font-family: "Tahoma", "Verdana", "sans"; padding-left: 5%; padding-right: 5%;  }
.quotetext ul { padding-left: 2em; padding-top: 1em; }
.quotetext h2 { font-size: 1.2em; padding-top: 0.833333em; padding-left: 0.833333em; }
.quotetext h3 { font-size: 1.1em; padding-top: 0.909090em; padding-left: 0.909090em; }
.quotetext address { text-align: left; padding-left: 2em; padding-top: 1em; padding-right: 1em; }
.quotetext a { color: #CCCCCC; text-decoration: underline; }
.quotetext b { font-style: italic; text-decoration: none; }
.quotetext form { padding-left: 2em; padding-top: 1em; }

#middleimages { height: 162px; margin-top: 20px; margin-bottom: 20px; width: 100%; min-width: 100%; background-image: url("../images/image-layer.jpeg"); background-repeat: repeat-x; }

#flagimages { height: 98px; margin-top: 20px; margin-bottom: 20px; width: 100%; min-width: 100%; background-image: url("../images/flag-layer.gif"); background-repeat: repeat-x; }

#focusimages { height: 191px; margin-top: 20px; margin-bottom: 20px; width: 100%; min-width: 100%; background-image: url("../images/focus-layer.jpeg"); background-repeat: repeat-x; }