/* custom stuff */

html {
  height: 100%;
  margin-bottom: 1px;
}


body {
	margin: 0;
	padding: 0;
}

p {
  margin-top: 0;
  margin-bottom: 5px;
}

fieldset {
	border: 0;
	padding: 5px 0;
}

span.pathway {
	display: block;
	vertical-align: middle;
	margin-top: 5px;
	font-weight: normal;
}

span.pathway img {
  padding: 0px 10px;
  vertical-align: middle;
}

span.pathway a {
  line-height: 150%;
}

div#pathway {
	margin-bottom: 10px;
	padding-left: 8px;
}

a.readon {
  line-height: 300%;
}

/*** fonts ***/
body {
		line-height: 125%;
		font-family: Tahoma, Helvetica, sans-serif;
}

/* size attributes */

body.f-smaller {
	font-size: 10px;
}

body.f-default {
	font-size: 11px;
}

body.f-larger {
	font-size: 13px;
}

.small,
.modifydate,
.createdate,
div.mosimage_caption {
	font-size: 90%;
}

#nav a,
#inset a {
	font-size: 100%;
}

div.moduletable h3,
div.moduletable-hilite h3,
td.side h3,
.componentheading {
	font-size: 14px;
	line-height: 100%;
        font-weight: bold;
}

div.contentheading, {
        font-family: Tahoma, Helvetica, sans-serif;
        font-size: 18px;
        margin-top: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 6px;
	border-bottom: 15px;
	border-bottom-color:#dacabe;
	border-bottom-style:solid;
        text-transform: lowercase;
        line-height: 50px;
        
}

div.componentheading {
        text-transform: lowercase;
	font-weight: normal;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}


/* font family */
h1,
h2,
h3,
h4,
h5,

.componentheading,
.sectiontableheader {
	
}

a:link,
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

/* component heading */

.componentheading {
	margin-top: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 12px;
        padding-top: 6px;
        padding-bottom: 6px;
	border-bottom: 15px;
	border-bottom-color:#dacabe;
	border-bottom-style:solid;
}

/* module settings */

div.moduletable h3,
div.moduletable-hilite h3 {
  text-transform: lowercase;
	font-weight: normal;
  padding-left: 15px;
  padding-top: 6px;
  padding-bottom: 6px; 
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  border-bottom: 15px;
	border-bottom-color:#dacabe;
	border-bottom-style:solid;
}

div.moduletable,
div.moduletable-hilite {
	margin-bottom: 0px;
	padding: 0px 0px;
}

td.left div.moduletable-hilite,
td.right div.moduletable-hilite {
	margin: 0 -6px;
	padding: 6px 12px;
	border-width: 6px 0;
	border-style:  solid;
}

/* default menu link styles */
a.sublevel {

}

a.mainlevel:hover {
	text-decoration: none;
}

td a.sublevel:hover {
	text-decoration: underline;
}

/** regular joomla menu **/

a.mainlevel {
	display: block;
	padding: 3px 0px;
	text-indent: 4px;
	width: 100%;
}

/* headings */

h1 {
	line-height: 100%;
	font-size: 200%;
}

h2 {
   line-height: 121%;
   font-size: 16px;
   font-style:normal; 
   font-weight:lighter;
}

h3 { 

   line-height: 121%;
   font-size: 14px;
   font-style:normal; 
   font-weight:lighter;
}

h4 {
   line-height: 100%;
   font-size: 12px;
   font-style:normal; 
   font-weight:bold;
   margin-bottom: 2px;
}

.small,
.modifydate,
.createdate {
	font-weight: normal;
}

.modifydate {
	height: 20px;
	vertical-align: bottom;
}

.createdate {
	height: 20px;
	vertical-align: top;
	vertical-align: top;
	padding-bottom: 5px;
	padding-top: 0px;
}

/** some joomla class stuff */

table.contenttoc {
  margin: 5px;
  padding: 5px;
}

table.contenttoc td {
  padding: 0 5px;
}


td.buttonheading {
 	vertical-align: bottom;
}

td.buttonheading img {
	margin-right: 5px;
}

table.outer td.sectiontableheader {
  font-weight: bold;
  padding: 0 4px;
  line-height: 20px;
}

table.outer tr.sectiontableentry1 td, 
table.outer tr.sectiontableentry2 td,
table.outer td.sectiontableentry1, 
table.outer td.sectiontableentry2 {
  padding: 4px;
}

table.contentpaneopen, table.contentpane {
  border-collapse: collapse;
  padding: 0;
  margin-left: 35px;
  width: 90%;
}

table.contentpaneopen td p {
  padding-right: 10px;
}

div.contentpane, div.contentpaneopen {
  width: 100%;
}

.clr {
  clear: both; 
}

div.mosimage {
  margin: 5px;
}


table.adminform textarea {
  width: auto;
  color: #666;
}

/** width stuff **/

.w-wide div.wrapper {
	width: 950px;
}

.w-thin div.wrapper {
	width: 775px;
}

.w-fluid div.wrapper {
	
}

/** template layout stuff **/

body {
	height: 100%; 
	padding: 0;
	margin-bottom: 1px;
}

div.wrapper {
	margin: auto;
	position: relative;
}

div#outer-border {
	/*border-width:  0 6px 6px 6px;
	border-style:  solid;*/
}

table.outer,
table.nopad {
	width: 100%;
	border:  0;
	padding:  0;
}

table.outer tr,
table.nopad tr {
	vertical-align:  top;
}

table.outer td,
table.nopad td {
	padding: 0;
}

table.nopad td {
  width: 33%;
  padding-right: 0px;
}

div#top-head {
	/*border-width: 0 6px;
	border-style:  solid;*/
	height: 131px;
}

div#access-bar {
	height: 25px;
}

span#logo {
	position: absolute;
	z-index: 10000;
	/* change these values below if you want to move your logo */
	top: -121px;
	right: 21px;
	/* change these values below if you change your logo image size */
	width: 283px; 
	height: 113px;
	float:right;
}

div#color-insert {
	position:  absolute;
	z-index: 1;
	top:  32px;
	left: 23px;
	width: 28px;
	height: 50px;	
}

div#top-mod {
	margin: 221px 5px -110px 209px;  /* 370 here is to make room for the logo */
	height: 121px;
	background-color:#009999;
	background-image:url(../images/top-menu-bg.png);
	width: 740px;
}

/*div#horiz-menu {
	border-width: 6px 6px 0 6px;
	border-style: solid;
	height:  22px;
}*/


table.outer td.left {
	width:  22%;
	border-width:  0px 15px 0px 15px;
	border-style:  solid;
}

table.outer td.middle {
	
}

.mainbody {
        border-width:  0px 15px 0px 15px;
	border-style:  solid;
        border-color: #dacabe;
        margin-top: -21px;
        padding-top: 21px;
}

table.outer td.right {
	width:  22%;
	border-width:  6px 6px 0 6px;
	border-style:  solid;
}

div.path-padding {
  margin-left:-21px;
  margin-top: -10px;
}

div.padding {
  margin-left: -15px;
  margin-right: -15px;
}

div.smallpad {
  padding-left: 0px;
}

div.sidepad {
  padding: 0 0px;
}

div.midbox {
	border-width:  6px 0 0 0;
	padding-left: 6px;
	border-style:  solid;
  margin-bottom: 6px;
}

div.botbox {
	margin-top: 0px;
	margin-bottom: 0px;
        margin-right: 0px;
        margin-left: 0px;
}

div#bot-footer{
	border-width: 6px 6px 0 6px;
	border-style:  solid;
	height: 38px;
	text-align: center;
	line-height: 38px;
}

div#bot-footer a:hover {
	text-decoration: underline;
}

#bot-rocket {
	text-align: center;
}

span.rocket {
	margin: 10px auto;
	display: block;
	position: relative;
	width: 137px;
	height: 35px;
}

/* accessibility stuff */

#access {
	position: absolute;
	z-index: 10000;
	top: 4px;
	right: 12px;
	width: 300px;
	height: 16px;
	overflow: hidden;
}

#access span {
	background-repeat: no-repeat;
}

#access a {
	text-decoration: none;
}

#access .spacer {
	display:  block;
	float:  right;
	width: 10px;
	overflow:  hidden;
}

#access #buttons {
	float: right;
}

#access .button {
	display: block;
	float: right;
	width: 16px;
	height: 16px;
	margin-left: 4px;	
	background-repeat: no-repeat;
}

/* some page content things */

.hide {
	display: none;
}

td.left ul,
td.right ul {
  margin: 0;
  padding: 5px 0px 5px 12px;
}

form {
	border: 0;
	margin: 0;
	padding: 0;
}

table.blog span.article_seperator {
	display: block;
	height: 20px;
}

blockquote {
	margin: 10px 0;
	line-height: 140%;
	padding: 10px;
}

pre {
	padding: 10px;
}

table.pollstableborder td {
	text-align: left;
	padding: 2px 0;
}

ul.arrow li {
	background:transparent url(../images/green-arrow.png) no-repeat scroll 0 0;
}

ul.arrow li {
	font-weight:normal;
	line-height:14px;
	margin:15px 0;
	padding-left:25px;
	margin-left: -35px;
}

ul.arrow {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

ul.arrow-red {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

ul.arrow-red li {
	background:transparent url(../images/red-arrow.png) no-repeat scroll 0 0;
}

ul.arrow-red li {
	font-weight:normal;
	line-height:14px;
	margin:15px 0;
	padding-left:25px;
	margin-left: -35px;
}

ul.arrow-red {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}


ul.arrow-orange {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

ul.arrow-orange li {
	background:transparent url(../images/orange-arrow.png) no-repeat scroll 0 0;
}

ul.arrow-orange li {
	font-weight:normal;
	line-height:14px;
	margin:15px 0;
	padding-left:25px;
	margin-left: -35px;
}

ul.arrow-orange {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}


ul.arrow-green {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

ul.arrow-green li {
	background:transparent url(../images/green-arrow.png) no-repeat scroll 0 0;
}

ul.arrow-green li {
	font-weight:normal;
	line-height:14px;
	margin:15px 0;
	padding-left:25px;
	margin-left: -35px;
}

ul.arrow-green {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

a#rollover { background-image:url(../images/story01.png); height: 69px; width:201px; display:block; }
a#rollover:hover { background-image:url(../images/story02.png); }

a#rollovercecile { background-image:url(../images/cecile_link_btn.png); height: 90px; width:91px; display:block; }
a#rollovercecile:hover { background-image:url(../images/cecile_hover_btn.png); }
a#rollovercecile span {display: none}

a#activececile { background-image:url(../images/cecile_hover_btn.png); height: 90px; width:91px; display:block; }
a#activececile:hover { background-image:url(../images/cecile_hover_btn.png); }
a#activececile span {display: none}

a#rolloversarah { background-image:url(../images/sarah_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloversarah:hover { background-image:url(../images/sarah_hover_btn.png); }
a#rolloversarah span {display: none}

a#activesarah { background-image:url(../images/sarah_hover_btn.png); height: 90px; width:91px; display:block; }
a#activesarah:hover { background-image:url(../images/sarah_hover_btn.png); }
a#activesarah span {display: none}

a#rollovermzukisi { background-image:url(../images/mzukisi_link_btn.png); height: 90px; width:91px; display:block; }
a#rollovermzukisi:hover { background-image:url(../images/mzukisi_hover_btn.png); }
a#rollovermzukisi span {display: none}

a#activemzukisi { background-image:url(../images/mzukisi_hover_btn.png); height: 90px; width:91px; display:block; }
a#activemzukisi:hover { background-image:url(../images/mzukisi_hover_btn.png); }
a#activemzukisi span {display: none}

a#rollovermagda { background-image:url(../images/magda_link_btn.png); height: 90px; width:91px; display:block; }
a#rollovermagda:hover { background-image:url(../images/magda_hover_btn.png); }
a#rollovermagda span {display: none}

a#activemagda { background-image:url(../images/magda_hover_btn.png); height: 90px; width:91px; display:block; }
a#activemagda:hover { background-image:url(../images/magda_hover_btn.png); }
a#activemagda span {display: none}

a#rolloveraudrey { background-image:url(../images/audrey_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloveraudrey:hover { background-image:url(../images/audrey_hover_btn.png); }
a#rolloveraudrey span {display: none}

a#activeaudrey { background-image:url(../images/audrey_hover_btn.png); height: 90px; width:91px; display:block; }
a#activeaudrey:hover { background-image:url(../images/audrey_hover_btn.png); }
a#activeaudrey span {display: none}

a#rollovermampho { background-image:url(../images/mampho_link_btn.png); height: 90px; width:91px; display:block; }
a#rollovermampho:hover { background-image:url(../images/mampho_hover_btn.png); }
a#rollovermampho span {display: none}

a#activemampho { background-image:url(../images/mampho_hover_btn.png); height: 90px; width:91px; display:block; }
a#activemampho:hover { background-image:url(../images/mampho_hover_btn.png); }
a#activemampho span {display: none}

a#rolloverlolita { background-image:url(../images/lolita_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloverlolita:hover { background-image:url(../images/lolita_hover_btn.png); }
a#rolloverlolita span {display: none}

a#activelolita { background-image:url(../images/lolita_hover_btn.png); height: 90px; width:91px; display:block; }
a#activelolita:hover { background-image:url(../images/lolita_hover_btn.png); }
a#activelolita span {display: none}

a#rollovertomilolo { background-image:url(../images/tomilolo_link_btn.png); height: 90px; width:91px; display:block; }
a#rollovertomilolo:hover { background-image:url(../images/tomilolo_hover_btn.png); }
a#rollovertomilolo span {display: none}

a#activetomilolo { background-image:url(../images/tomilolo_hover_btn.png); height: 90px; width:91px; display:block; }
a#activetomilolo:hover { background-image:url(../images/tomilolo_hover_btn.png); }
a#activetomilolo span {display: none}

a#rollovermpho { background-image:url(../images/mpho_link_btn.png); height: 90px; width:91px; display:block; }
a#rollovermpho:hover { background-image:url(../images/mpho_hover_btn.png); }
a#rollovermpho span {display: none}

a#activempho { background-image:url(../images/mpho_hover_btn.png); height: 90px; width:91px; display:block; }
a#activempho:hover { background-image:url(../images/mpho_hover_btn.png); }
a#activempho span {display: none}

a#rolloverjocelyn { background-image:url(../images/jocelyn_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloverjocelyn:hover { background-image:url(../images/jocelyn_hover_btn.png); }
a#rolloverjocelyn span {display: none}

a#activejocelyn { background-image:url(../images/jocelyn_hover_btn.png); height: 90px; width:91px; display:block; }
a#activejocelyn:hover { background-image:url(../images/jocelyn_hover_btn.png); }
a#activejocelyn span {display: none}

a#rolloverarnot { background-image:url(../images/arnot_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloverarnot:hover { background-image:url(../images/arnot_hover_btn.png); }
a#rolloverarnot span {display: none}

a#activearnot { background-image:url(../images/arnot_hover_btn.png); height: 90px; width:91px; display:block; }
a#activearnot:hover { background-image:url(../images/arnot_hover_btn.png); }
a#activearnot span {display: none}

a#rolloverkgomotso { background-image:url(../images/kgomotso_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloverkgomotso:hover { background-image:url(../images/kgomotso_hover_btn.png); }
a#rolloverkgomotso span {display: none}

a#activekgomotso { background-image:url(../images/kgomotso_hover_btn.png); height: 90px; width:91px; display:block; }
a#activekgomotso:hover { background-image:url(../images/kgomotso_hover_btn.png); }
a#activekgomotso span {display: none}

a#rolloverreinette { background-image:url(../images/reinette_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloverreinette:hover { background-image:url(../images/reinette_hover_btn.png); }
a#rolloverreinette span {display: none}

a#activereinette { background-image:url(../images/reinette_hover_btn.png); height: 90px; width:91px; display:block; }
a#activereinette:hover { background-image:url(../images/reinette_hover_btn.png); }
a#activereinette span {display: none}

a#rolloverjohan { background-image:url(../images/johan_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloverjohan:hover { background-image:url(../images/johan_hover_btn.png); }
a#rolloverjohan span {display: none}

a#activejohan { background-image:url(../images/johan_hover_btn.png); height: 90px; width:91px; display:block; }
a#activejohan:hover { background-image:url(../images/johan_hover_btn.png); }
a#activejohan span {display: none}

a#rolloverkarl { background-image:url(../images/karl_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloverkarl:hover { background-image:url(../images/karl_hover_btn.png); }
a#rolloverkarl span {display: none}

a#activekarl { background-image:url(../images/karl_hover_btn.png); height: 90px; width:91px; display:block; }
a#activekarl:hover { background-image:url(../images/karl_hover_btn.png); }
a#activekarl span {display: none}

a#rollovermarelize { background-image:url(../images/marelize_link_btn.png); height: 90px; width:91px; display:block; }
a#rollovermarelize:hover { background-image:url(../images/marelize_hover_btn.png); }
a#rollovermarelize span {display: none}

a#activemarelize { background-image:url(../images/marelize_hover_btn.png); height: 90px; width:91px; display:block; }
a#activemarelize:hover { background-image:url(../images/marelize_hover_btn.png); }
a#activemarelize span {display: none}

a#rolloverkanetsi { background-image:url(../images/kanetsi_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloverkanetsi:hover { background-image:url(../images/kanetsi_hover_btn.png); }
a#rolloverkanetsi span {display: none}

a#activekanetsi { background-image:url(../images/kanetsi_hover_btn.png); height: 90px; width:91px; display:block; }
a#activekanetsi:hover { background-image:url(../images/kanetsi_hover_btn.png); }
a#activekanetsi span {display: none}

a#rolloveraderyn { background-image:url(../images/aderyn_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloveraderyn:hover { background-image:url(../images/aderyn_hover_btn.png); }
a#rolloveraderyn span {display: none}

a#activeaderyn { background-image:url(../images/aderyn_hover_btn.png); height: 90px; width:91px; display:block; }
a#activeaderyn:hover { background-image:url(../images/aderyn_hover_btn.png); }
a#activeaderyn span {display: none}

a#rolloverburger { background-image:url(../images/burger_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloverburger:hover { background-image:url(../images/burger_hover_btn.png); }
a#rolloverburger span {display: none}

a#activeburger { background-image:url(../images/burger_hover_btn.png); height: 90px; width:91px; display:block; }
a#activeburger:hover { background-image:url(../images/burger_hover_btn.png); }
a#activeburger span {display: none}

a#rollovercarol { background-image:url(../images/carol_link_btn.png); height: 90px; width:91px; display:block; }
a#rollovercarol:hover { background-image:url(../images/carol_hover_btn.png); }
a#rollovercarol span {display: none}

a#activecarol { background-image:url(../images/carol_hover_btn.png); height: 90px; width:91px; display:block; }
a#activecarol:hover { background-image:url(../images/carol_hover_btn.png); }
a#activecarol span {display: none}

a#rolloverarno { background-image:url(../images/arno_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloverarno:hover { background-image:url(../images/arno_hover_btn.png); }
a#rolloverarno span {display: none}

a#activearno { background-image:url(../images/arno_hover_btn.png); height: 90px; width:91px; display:block; }
a#activearno:hover { background-image:url(../images/arno_hover_btn.png); }
a#activearno span {display: none}

a#rolloverandrea { background-image:url(../images/andrea_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloverandrea:hover { background-image:url(../images/andrea_hover_btn.png); }
a#rolloverandrea span {display: none}

a#activeandrea { background-image:url(../images/andrea_hover_btn.png); height: 90px; width:91px; display:block; }
a#activeandrea:hover { background-image:url(../images/andrea_hover_btn.png); }
a#activeandrea span {display: none}

a#rolloverkaren { background-image:url(../images/karen_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloverkaren:hover { background-image:url(../images/karen_hover_btn.png); }
a#rolloverkaren span {display: none}

a#activekaren { background-image:url(../images/karen_hover_btn.png); height: 90px; width:91px; display:block; }
a#activekaren:hover { background-image:url(../images/karen_hover_btn.png); }
a#activekaren span {display: none}

a#rollovercliff { background-image:url(../images/cliff_link_btn.png); height: 90px; width:91px; display:block; }
a#rollovercliff:hover { background-image:url(../images/cliff_hover_btn.png); }
a#rollovercliff span {display: none}

a#activecliff { background-image:url(../images/cliff_hover_btn.png); height: 90px; width:91px; display:block; }
a#activecliff:hover { background-image:url(../images/cliff_hover_btn.png); }
a#activecliff span {display: none}

a#rolloversue { background-image:url(../images/sue_link_btn.png); height: 90px; width:91px; display:block; }
a#rolloversue:hover { background-image:url(../images/sue_hover_btn.png); }
a#rolloversue span {display: none}

a#activesue { background-image:url(../images/sue_hover_btn.png); height: 90px; width:91px; display:block; }
a#activesue:hover { background-image:url(../images/sue_hover_btn.png); }
a#activesue span {display: none}

a.info {
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}

a.info:hover {z-index:25; background-color:#f3f3eb;}

a.info span {display: none}

a.info:hover span { /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:-300px; left:-227px; width:621px; height:265px;
    border:1px dashed #8aa551;
    background-color: #e4dcc3; color:#7f3d36;
    text-align: left;
	padding: 15px;
}