/* hier stel jy die globale styl van die website */
body {
	text-align: center; 	/*center hack*/ /* deel van 3 stappe om te verseker dat selfs die ouer browsers die site sentreer op die bladsye */
	font-size:87%;		/* hierdie stel die "default" grote van al die text op die website */
	font-family:Times New Roman, Times, serif;
	line-height:1.7em;
	color: #666666;			/* hier stel jy "default" kleur van al die text op die website */
         padding-left: 0px;

}

a:link { color: #663366; }
a:hover { color: #663366; }
a:active { color: #663366; }
a:visited { color: #663366; 

} 


div.clearFloat{
	clear: both; 
	height: 0;
}

/* 
	Hierdie stel jy alles wat te doen het met die tabel wat die hoof inhoud van die bladsy hou 
	Hierdie table bevat twee kolomme, die eerste kolum (linker kolom) word net geskep as daar iets is om in dit te sit
	Dus as die bladsy nie iets het om in die linker kolum te wys nie, sal die regter kolum die enigste kolum wees en dan ook die hele wydte van die tabel op neem
	Die cellpadding en cellspacing van die table word in die template getsel want om die een of ander rede will dit nie lekker werk as ek dit in CSS probeer doen nie.
*/
table.jbpContentTable {
	width: 100%; 			/* stel die table op 100% wydte */
         margin-left:-1px;
}

/* Hier word die defaults van alle table-kolomme op die website gestel */
td {
	vertical-align: top; 	/* Hier word gespesifiseer dat alles in alle tabelle op die website teen die boonste rand van die table moet begin, by default is dit in die middel, dus hier word die default gekanseleer */
}

/* 
	jbpWrap is 'n blok in die template wat alles van die website bevat
	dit word gedoen om die posisie van alle inhoud op een plek te stel
	Alles binne die blok word volgens die posisie van die blok geplaas
*/
#jbpWrap {
	width:1000px; 			/* Hier word die wydte van die website gestel */ /*center hack*/  /* deel van 3 stappe om te verseker dat selfs die ouer browsers die site sentreer op die bladsye */
	margin:0 auto; 			/*center hack*/  /* deel van 3 stappe om te verseker dat selfs die ouer browsers die site sentreer op die bladsye */i
	text-align:left;		/* hier word sekergemaak alles text in die website default na links */
	/*border: 1px solid black; *//*#B0864C;*/ /* Hier word die border van die website gestel (1px wyd, 'n solid lyn [nie dashed nie] en die border se kleur is swart */
         padding: 0px;
}

/* hier word enige verstellings aan die Header gedoen - die deel wat die website logo bevat */
#jbpHeader{
	overflow: hidden;		/* Die overflow verseker dat as die inhoud van die header blok nie perongeluk oor die randte gaan nie - dit kan gebeur as text in die header geplas word - NVT op die website*/
         padding: 0px 0px 0px 0px;
         margin-bottom: -3px;

}

/* Die is 'n extra lagie (blok) wat om die hoof inhoud van die website geplaas word om te cerseker daar is 'n netjiese 0px spasie rondom al id inhoud, sodat dit nie raak aan enige ander dele van die website nie */
.jbpInside {
	padding: 0px 0px 0px 0px; /* padding stel die spasie rondom die BINNE randte van 'n blok */
         margin-left: -2px;
         margin-bottom: -5px;
         padding: 0px 0px 0px 0px;
         margin-top: -3px;
         align: left;

}

/* 
Hier maak jy verstellings aan die blok wat blok wat die site the boonste menu hou
Let wel verstellings aan die blokkie affekteer nie die menu sisteem self nie, dit word van binne Joomla gedoen
*/
#jbpMenuarea{
	height: 36px; 		/* Hier word die hoogte van die menu-houer gestel */
	width: 100%;		/* Hier word die wyde getsel, relatief tot die website se wydte, nie die hele bladsy nie */
	align: right;
	background: url(../images/buttons_bg.jpg); /* hier word die agtergrond kleur van die menu blokkie gestel - LET WEL, ek gebruik 'n 1px by 1px image en herhaal die (by default vir die hele area */
    margin-top:-2px;
    border: none;
}

/*
	Hier verstel jy die area wat die veranderende hoof inhoud van die website gaan wys
	Hiedie is die regter kolum van die tabel wat al die inhoud van die website bevat.
	Dit word by default gestel as 74% sodat die linker kolum by default 26% is
	LET WEL: die linker kolum word net geskep as daar iets is om in dit te vertoon, as daar nie inhoud vir die linker kolum is nie, bestaan net die regter kolom
		in die geval word die regter kolum, bo in die template getsel na 100% wydte
*/
#jbpContent{
	width: 100%; /* Default wydte van die regter kolom van die inhoud tabel */
}

/* Hierdie deel stel die strokie op die website wat die kontak besonderhede bevat */
#jpbContactDetails{
	height: 35px;			/* die verstel die hoogte van die strook wat die kontak details bevat */
	width: 700px;			/* Die wydte van die strook is 700px, 100 px minder as die wydte van die website, om op te maak vir die 100px padding-left wat hieronder gebruik word */
	background: url(../images/mkwekery_contact_details_bg.jpg) repeat-x; /* image is 1 px wyd en 35px hoog en word horisontaal (op die x-as) herhaal todat die area gevul is */
	padding-top: 15px;		/* die padding-top stel die spasie tussen die bokant van die blok en die bokant van die text */
	padding-left: 100px;	/* die padding-left stal die spasie tussen die linker kant van die blok en die linker kant van die text */
	font-size:80%;			/* die verstel die text na 80% van die grote van die hoof text verstelling in die "body" deel (soos gesien kan word bo in die CSS file) */
}

/* hier vestel ek die "anchor" (email link) in die kontak besonderhede strook */
#jpbContactDetails a{
/*a{*/
	color: #B0864C;	/* hier verseker ons dat die email link se kleur ten alle tye in pas by die website kleure */
}

/* Hier verstel ek die effekte wat gebeur as die muis oor die email link in die kontak besonderhede strook beweeg (hover) */
#jpbContactDetails a:hover{
/*a:hover{*/
	color: #fff;				/* die text kleur verander na swart */
	background-color: #B0864C	/* die agtergrond kleur van die link verander na die website kleur skema */
}

/* hier verstel ek die blokkie wat die onderste image van die site bevat */
#jpbBottomBanner{
	height: 209px;		/* 209px hoog */
	width: 1000px;		/* 1000px wyd */
         margin-top: -24px;
}

/*
	hierdie word as 'n class aan enige prentjie gekoppel wat jy binne 'n spasie wil sentreer 
	sien hoe dit gebruik word op die logo wat aandui dat die site deur Jacques Botha ontwerp word
*/
.centerpic{
	display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Hierdie is die verstelling vir die heel onderste deel van die website, waar die "Design by" informasie gehou word */
#jbpFooter{
	text-align: center;
	color: #ffffff;
	font-size:80%; /* verseker dat alle text gesentreerd is*/
 
}

#jbpFooter a:link { color: #ffffff; }
#jbpFooter a:hover { color: #ffffff; }
#jbpFooter a:active { color: #ffffff; }
#jbpFooter a:visited { color: #ffffff; 

} 


#jpbLeft{
	background-color: #C5A67B;
	text-align: center;
	color: #B0864C;
}