/* A style sheet for the Waterberg Welfare Society Website */

/* ----- Styling For Whole Page ----- */

/* Set a minimum width for the page so that the right-floated logo doesn't overlap the text logo */
/* Min width = 10px + 690px + 74px + 10px = 784px */
body {
margin: 0;
padding: 0;
background-color: white;
color: black;
font: small Arial;
min-width: 784px;
}

/* ----- container div for whole page ----- */
/* 'container' div sits inside body of all pages to set margin for whole page */
#container {
position: relative;
margin: 10px;
background-color: white;
}

/* ----- Styling for header div  -----*/
/* header div is first div inside container div */
/* Defines the margin between header and 'page_content' on all pages (bottom-margin: 20px)*/
/* Defines the spacing between the top of header and WWS wording logo (padding-top: 20px)*/
#header {
position: relative;
margin: 0 0 0 0;
padding: 10px 0 0 0;
}

/* ----- Styling for general page content ----- */
/* 'page_content' div follows header div on all pages and contains the specific page_content div */
/* It sets the overall margins/padding for all page content and defines margin to header/footer */
/* Define as relative so that any 'absolute' positioning of contained content is relative to it */
/* Set right margin to 74px if want blank column appearing under WWS ribbon logo, otherwise set to zero*/
#page_content {
position: relative;
margin: 20px 10px 20px 0;
padding: 0;
}

#page_content h1 {
padding: 0;
margin: 0 0 0.5em 0;
font-size: 2.0em;
color: gray;
}

#page_content h2 {
padding: 0;
margin: 0;
font-size: 1.3em;
color: gray;
}

#page_content h3 {
padding: 0;
margin: 0;
font-size: 1.0em;
color: gray;
}

#page_content a:link, #page_content a:visited {
text-decoration: none;
background-image: url(images/link_button.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 9px;
padding-right: 5px;
color: black;
font-weight: bold;
font-size: 1.0em;
}

#page_content a:hover {
text-decoration: none;
background-image: url(images/link_button_over.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 9px;
padding-right: 5px;
color: red;
font-weight: bold;
font-size: 1.0em;
}

/* -------------- Styling for footer Div --------------------- */
/* margin set in page_content div */
#footer{
margin: 0 0 0 0;
}

/* Set right margin to 74px to allow spacing of logo to match header, or 0 for full width */
#footer ul {
margin: 0 0 0 0;
padding: 5px 0 5px 0;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
min-width: 690px;
}

#footer li {
display: inline;
padding: 0 10px 0 0;
font-size: 0.85em;
}


/* ----- Styling For Header Links ----- */


/* Containing div for links list */
/* Set right margin to width of ribbon logo (74px) */
#header_links {
border-top: 1px solid gray;
border-bottom: 1px solid gray;
padding: 5px 0 5px 0;
margin: 0 74px 0 0;
}

#header_links a:link, #header_links a:visited {
text-decoration: none;
background-image: url(images/link_button.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 9px;
padding-right: 5px;
color: black;
font-weight: bold;
font-size: 1.1em;
}

#header_links a:hover {
text-decoration: none;
background-image: url(images/link_button_over.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 9px;
padding-right: 5px;
color: red;
font-weight: bold;
font-size: 1.1em;
}

#header_links a.home_link:link, #header_links a.home_link:visited {
text-decoration: none;
background-image: url(images/ribbon.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 16px;
padding-right: 5px;
color: black;
font-weight: bold;
font-size: 1.1em;
}

#header_links a.home_link:hover {
text-decoration: none;
background-image: url(images/ribbon.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 16px;
padding-right: 5px;
color: red;
font-weight: bold;
font-size: 1.1em;
}

#header_links a.this_page:link, #header_links a.this_page:hover ,#header_links a.this_page:visited{
color: red;
}

#header_links ul {
margin: 0;
padding: 0;
}

#header_links li {
display: inline;
}

/* If position logo image absolutely within header div */
/* This works if we fix the width of the links gray border to 690px */
/* Problem : doesn't move the logo to right if we maximise window */

/* Position logo image absolute to top right side of header div */
/* Keeps logo on the far right if we resize the window */
/* This works if we set the min-width of the links gray border to 690px and min-width of body to 784px */
/* Problem: left margin not maintained at 690px so image overlaps header text for small window */
/* Fix: set body min-width to prevent window size reducing below 784px */
/* Left margin set to min width of links lines */
#logo {
position: absolute;
top: 0px;
right: 0px;
margin: 0 0 0 690px;
}

/* WWS worded logo */
#WWSlogo {
}

/* ----- Styling for Homepage Content ----- */
/* Homepage content is relative to the 'page_content' - no special positioning for this page */
/* Still include relative position definition to ensure other contained 'absolute' elements are */
/* positioned within this div */
#homepage_content {
position: relative;
top: 0;
left: 0;
width: 100%;
}

/* ------------------ Styling for homepage images -------------------*/
/* --- container for images - as wide as widest image --- */
/* --- set the width/height to that of the total size of the absolutely positioned images --- */
/* --- so the 'clear' div will correctly align footer below this and text divs --- */
/* --- height = img1 + 4px spacing + height img4 + 10px spacing + height re-a-thusana_img ) = 164px + 90px (height img4) + 10px + 27px = 301px --- */
/* --- Set float to left so images div floats on left and text flows around to right --- */
/* --- Set right margin to determine spacing between images and text --- */
/* --- Set bottom margin to define a. spacing to wrapped text --- */
/* ---  b. spacing to footer (needed if homepage_text div is shorter than homepage_images div) --- */
#homepage_images {
float: left;
width: 421px;
height: 301px;
margin: 0 20px 20px 0;
padding: 0 0 0 0;
}

/* --- Position to right of img1 (339px plus 4px spacing) --- */
/* Positioned absolutely relative to homepage_content */
#homepage_img2{
position: absolute;
top: 0;
left: 343px;
}

/* --- Position below img2 (78px + 4px spacing), to right of img1 with 5px spacing (339px + 4px )--- */
/* Positioned absolutely relative to homepage_content */
#homepage_img3{
position: absolute;
top: 82px;
left:343px;
}

/* --- img4 below img1 ( 160px + 4px spacing ) --- */
/* Positioned absolutely relative to homepage_content */
#homepage_img4{
position: absolute;
top: 164px;
left: 0px;
}

/* --- Position below img4 (164px + 90px +10px spacing ) --- */
#re-a-thusana_img{
position: absolute;
top:274px; /* was 264px */
left:0px;
}

/* ----- Styling for homepage text ----- */
#homepage_text {
padding: 0 0 0 0;
margin: 0 0 0 0;
text-align: justify;
}

#homepage_verse {
width: 70%;
background-color: gray;
padding: 1em;
margin: 1em auto;
}

#homepage_verse p.verse_text {
color: white;
padding: 0 0 1em 0;
}

#homepage_verse p.verse {
text-align: right;
padding: 0;
margin: 0;
color: red;
}

#HIV_AIDS_community_services {
	       list-style: none;
}

#HIV_AIDS_community_services li {
			     padding: 0 0 1em 0;
}

/* --------------------- Styling for 'Under Construction' homepage -------------- */
/* --- set top margin to define spacing between wrapped text --- */
#under_construction_content {
margin: 20px 0 0 0;
padding: 0;
}

/* --------------------- Styling for 'About Us' -------------- */

#about-us_text {
text-align: justify;
}

#about-us_img {
float: right;
margin: 0 0px 10px 10px;
}

#about-us_img img {
width: 60px;
height: 228px;
}

#about-us_text ul {
list-style: none;
}

#about-us_text ul li {
padding: 5px 0 5px 0;
}


#about-us_text ul.wws_achievements_targets {
list-style: square;
}

#staff {
       float: right;
       width: 300px;
       height: 225px;
       border: 2px solid gray;
       margin: 1em;
}

#map {
float: right;
width: 389px;
height: 275px; 
border: 2px solid gray;
margin: 1em;
}

#map-link {
background-color:gray;
border-top: 1px solid gray;
}

#about-us_text a.email_link:link, #about-us_text a.email_link:hover, #about-us_text a.email_link:visited {
	     background-image: none;
	     text-decoration: underline;
	     color: rgb(0,0,238);
}

#about-us_text a.no_link {
	       background-image: none;
}

/* --------------------- Styling for 'Prevention Awareness Treatment' -------------- */
#prevention-awareness-treatment_text {
text-align: justify;
}

#prevention-awareness-treatment_img {
float: right;
margin: 0 0px 10px 20px;
 }

#prevention-awareness-treatment_img img {
width:226px; /* was 150px */
height: 150px; /* was 200px */
}

#stepping_forward_logo {
		       text-align: center;
}

#mobile-clinic {
float: right;
width: 150px;
margin: 10px 0px 10px 20px; 
}

#mobile-clinic_img {
margin: 0px 0px 4px 0px;
width: 150px;
height: 113px;
display: block; /* makes second image appear underneath */
}


#mobile-clinic_img2 {
margin: 0px;
width: 150px;
height: 113px;
margin: 0px;
}

/* --------------------- Styling for 'Youth Development' -------------- */
#youth-development_text{

}

#youth-development_img {
float: right;
margin: 0 0px 10px 10px;
}

#youth-development_img img{
width:150px; /* was 150px */
height: 188px; /* was 200px */
}

#timothy-house-youth-group_img {
float: right;
margin: 0 0px 10px 20px;
}

#timothy-house-youth-group_img img{
width:226px; /* was 150px */
height: 150px; /* was 200px */
}

#youth-development_text ul {
}

/* --------------------- Styling for 'Palliative and Respite Care Hospice' -------------- */
#palliative-and-respite-care-hospice_text {

}

#HIV-AIDS-care-support_img {
float: right;
margin: 0 0px 10px 10px;
}

#HIV-AIDS-care-support_img img {
width:226px; /* was 150px */
height: 150px; /* was 200px */
}

#palliative-care-hospice_img {
float: left;
margin: 10px 20px 10px 20px;
}

#palliative-care-hospice_img img {
width:226px; /* was 150px */
height: 150px; /* was 200px */
}

#ovc_img {
float: right;
margin: 0 0px 10px 10px;
}

#ovc_img img {
width:226px; /* was 150px */
height: 150px; /* was 200px */
}

/* --------------- Styling for 'Community Stakeholder Relationships' -- */
#community-stakeholder-relationships_text {

}

#community-stakeholder-relationships_img {
float: right;
margin: 0 0px 10px 10px;
width: 150px;
height: 188px;
}

#stakeholder-logos {
		   text-align: center;
}

#stakeholder-logos img {
		   margin: 20px 10px;
}



/* --------------------- Styling for 'Latest News' -------------- */
#latest-news_content{
}

#latest-news_content div.news{
border-bottom: 1px solid gray;
margin: 20px 0 20px 0;
min-height: 80px;
width: 100%;
}

#latest-news_content div.adobe{
border-bottom: none;
margin: 10px 0 0 0;
}

#latest-news_content div.news img{
float: left;
margin: 0 10px 10px 0;
}

#latest-news_content div.news p{
margin: 10px 0 20px 0;
padding: 0 0 0 70px;
}

#latest-news_content div p.adobe{
margin: 10px 0 10px 0;
padding: 0;
}

/* --------------------- Styling for 'Photo Gallery' -------------- */
#photo-gallery_content{
}

#photo-gallery_content ul{
margin: 0 0 10px 0;
padding: 0 0 0 0;
border-bottom: 1px solid gray;
display: inline;
}

#photo-gallery_content ul.last{
margin: 0 0 0 0;
padding: 0 0 0 0;
border-bottom: none;
}

#photo-gallery_content li{
padding: 0 0 0 0;
margin: 0 0 0 0;
display: inline;
width: 120px;
height: 120px;
}

#photo-gallery_content li div{
padding: 0 0 0 0;
margin: 0 0 0 0;
display: inline;
}

#photo-gallery_content ul li img{
margin: 0;
padding: 0 0 0 0;
width: 120px;
height: 120px;
}

#photo-gallery_content ul li p{
margin: 0;
padding: 5px 0 5px 0;
width: 120px;
}

#photo-gallery_content table {
width: 100%;
border-collapse: collapse;
margin: 10px auto 0 auto;
table-layout: fixed;
}


#photo-gallery_content table tr td{
padding: 10px;
vertical-align: top;
border-bottom: 1px solid gray;
}

#photo-gallery_content table tr td.last{
border-bottom: none;
}

#photo-gallery_content table tr td div{
margin: 0 auto;
width:120px;
}

#photo-gallery_content table tr td img{
margin: 0 auto;
width: 120px;
height: 120px;
}

#photo-gallery_content table tr td p{
margin: 0;
padding: 5px 0 5px 0;
text-align: center;
}

/* --------------------- Styling for 'DVD' page ------------------ */
#dvd_content{
	text-align: center;
	margin: 10px 0;
}

#wws_dvd {
	 margin: 30px auto 0 auto;
}

/* --------------------- Styling for 'Get Involved' -------------- */
#get-involved_content{
width:100%;
}

#get-involved_giving_img {
float: right;
margin: 10px 0 10px 20px;
}

#wilson_southwestern_logos {
			   text-align: center;
}


#wilson_foundation_logo {
margin: 20px 30px;
}

#southwestern_medical_logo {
margin: 20px 30px;
}

/* --------------------- Styling for 'WWS Trust' -------------- */
#wws-trust_content{
width:100%;
text-align: justify;
}

#wws-trust_content ul{
margin: 0;
padding: 0;
list-style: none;
}

#wws-trust_content li{
margin: 0;
padding: 0 0 10px 0;
}

/* --------------------- Styling for 'WWS Auction' -------------- */
#auction{
}

#auction iframe{
width: 100%;
height: 360px;
border: 1px solid gray;
margin: 0 0 0 0;
text-align: center;
}

/* --------------------- Styling for 'Mabatlane Vaalwater Map' -------------- */
#mabatlane-vaalwater-map_content p.map{
text-align: center;
}

/* --------------------- General Styling for 'Department' Pages -------------- */
#departmental_content{
margin: 0;
padding: 0;
width:100%;
}

#departmental_text{
margin: 0;
padding: 0 10px 0 0;
}

#departmental_sidebar{
float: right;
width: 30%;
padding: 0 0 0 20px;
border-left: 1px solid gray;
margin: 0 0 10px 20px;
}

#departmental_links{
margin: 0;
padding: 0;
}

#departmental_links h1{
}

#departmental_links ul{
margin: 0 0 1em 0;
padding: 0;
list-style: none;
}

#departmental_links li{
margin: 0;
padding: 0 0 1em 0;
}

#departmental_links ul li a.this_page:link, #departmental_links ul li a.this_page:hover ,#departmental_links ul li a.this_page:visited{
color: red;
}

div.departmental_verse{
border-top: 1px solid gray;
padding: 2em 0 2em 0;
}

p.verse_text{
color: gray;
font-size: 1.3em;
text-align: justify;
padding: 0 0 1.5em 0; /* (1/1.3)*2em i.e. equivalent to 2em in normal font 1em */
margin: 0;
}

p.verse{
color: black;
font-size: 1.3em;
font-weight:  bold;
margin: 0;
}

#auction_link{
float:right;
}





/* --------------------- General styling rules -------------------- */
.clear{
clear: both;
}

.bold {
font-weight: bold;
}

ul.square_list {
list-style: square;
}

ul.square_list li {
padding: 0.2em 0 0.2em 0;
}