/* 
--------------------------------------------
Author: Richard Frank (richard@flowsa.com)
Version: June 2006
-----------------------------------------*/

/*COLOUR PALETTE

#414030 -greybrown
#5f331b - main brown
#ae4f23 - orange
#6c5a41 - lighter gold-brown
#9f8058 - lightest gold-brown
#9e821e - orange-brown
#994c00 - orange with no blue
#633600 - brown with no blue
#4a2a00 - darker brown with no blue
#382803 - darker brown with a bit of blue
*/

/* INITIAL
---------------------------------------- */

* {margin:0; padding:0}


h1,h2,h3,h4,h5,h6 {
margin:0.25em 0 0.5em 0}

body {
font-family: Verdana, Arial, sans-serif;
font-size:small;
background-color:#AF6015;
}  

h1 {
color:#FFF5EF; 
font-size:x-large;
background: url(/presentation/squifboxheadline.gif) no-repeat;
padding-left:10px;
padding-top:15px;
padding-bottom:5px;
padding-right:5px;
margin-left:-5px;
font-weight:normal;

}

h2 {color:#4F2F1D; font-size:large; font-weight:normal;}

p {
line-height:1.4em;
color:#EFE6E0;
margin-bottom:1em;
}

a {color:#DFB945;}

a img {border:none;}

html, body {height:100%}

/* IMAGES
--------------------------------------------*/

.image {

font-size:x-small;
line-height:1.6em;
padding-left:2px;
padding-right:2px;
padding-top:4px;
padding-bottom:5px;}

.image img {display:block; border: 1px solid gray;}

.floatleft {float:left; margin-right:5px;}
.floatright {float:right; margin-left:5px;}

.caption {
color:#3A4956;
font-size:x-small;
padding-left:20px;
padding-right:20px;
padding-bottom:10px;
}

/* PICTUREBOXES
------------------------------------*/
.picturebox {
background: white url(/presentation/squifbox_picture2.gif);
margin-bottom:15px;
}

.picturebox img {
padding:25px 25px 15px 25px;
}

.picturebox225px {

background: white url(/presentation/squifbox_picture_225px.gif);
margin-bottom:15px;}

.picturebox225px img {
padding:20px 15px 15px 10px;
}

.picturebox450px {
background: white url(/presentation/squifbox_picture_450px.gif);
margin-bottom:15px;
}

.picturebox450px img {
padding:15px 15px 15px 10px;
}

/*HEADER 
-----------------------------------------*/

#header {
background-image: url(/presentation/header3.jpg);
height:144px;
margin-bottom:10px;
}

#logo {
margin: 25px auto;
background: url(/presentation/soweto_logo_horiz.jpg) top center no-repeat;
height:90px;
width:780px;
}

/*PRIMARY NAV
-----------------------------------------*/

#nav {
margin: 0 auto;
width:780px;
padding-top:10px;
}

#nav ul {}

#nav ul li{
display:inline;
padding:0px 7px;
color:#77452A;
font-weight:bold;
}

#nav a {
color:#EFE6E0;
text-decoration:none;
padding:3px;
}

#nav a:hover, #nav a.active {
border-top:3px solid #DFB945;
}


/*CONTENT STRUCTURE
-------------------------------------------*/

#contentarea {}
#contentcentre {margin: 0 auto; width:780px;}
#leftcolumn {float:left; width:450px;}
#rightcolumn {float:left; width:300px; margin-left:20px;}
#bottomcolumn {clear:both; width:780px; margin: 0 auto;}

/*BOTTOM EXTRAS
---------------------------------------*/

.extra {
width:215px;
margin-right:25px;
float:left;
font-size:85%;
color:#EFE6E0;
}

.extra h3 {
padding-left:22px;
padding-bottom:4px;
color:#FFF5EF;
font-size:small;
text-transform:uppercase;
}

.extra.rss h3 {background:url(/presentation/rss.gif) left 0px no-repeat;}
.extra.published h3 {background:url(/presentation/star.gif) left 0px no-repeat;}
.extra.contact h3 {background:url(/presentation/information.gif) left -1px no-repeat;}

.extra ul {margin-left:1.5em;}
.extra li {padding-bottom:0.5em;}

/*HOME PAGE
-----------------------------------*/



/*FOOTER 
-------------------------------------------*/

#footer {
clear:both;
background: #77452A url(/presentation/footer.jpg) repeat-x;
padding-top:25px;
padding-bottom:5px;
height:280px;
}

.clearfix {
display:inline-block;
}
.clearfix {
display:block;
}

#copyright {width:900px; text-align:center;}

/*LISTS
----------------------------*/
.subnav ul{list-style:none;}

.subnav ul li {
color:#EFE6E0;
padding-left:25px;
padding-bottom:10px;
background: url(/presentation/bullet6.gif) 0px 1px no-repeat;
}

#contentarea ul {
color:#EFE6E0;
margin-left:1.5em;
margin-bottom:1em;
}


#contentarea ol {
padding: 1.4em 1em 0.5em 3em;
margin-bottom:1em;
color:#EFE6E0;
background: url(/presentation/squifboxtop.gif) no-repeat;
}

#contentarea ol li {padding-bottom:0.5em;}

.subnav {
margin-left:20px;
margin-bottom:30px;
}

.subnav ul {
padding-left:5px;

}

#rightcolumn .advert {margin:0px; padding:0px; list-style-type:none;}
#rightcolumn .advert li {margin:0px; padding:0px;}

#rightcolumn .advert li a {display:block; height:90px; width:275px;}
#rightcolumn .advert li a:hover {background-position: -274px 0px;}


.had li a {background: url(/presentation/had-advert.jpg) no-repeat;}
.had li a:hover {background-position: -274px 0px;}

.pilates li a {background: url(/presentation/pilates-advert.jpg) no-repeat;}
.pilates li a:hover {background-position: -274px 0px;}

/*RESOURCES
----------------------------*/

#rightcolumn h2 {
background: url(/presentation/squifboxheadline.gif) no-repeat;
padding-left:10px;
padding-top:15px;
padding-bottom:5px;
margin-left:-5px;
width:260px;
color:#FFF5EF;
}

#rightcolumn dl {
width:210px;
margin-bottom:10px;
padding:5px;
}

#rightcolumn dt {
margin-bottom:5px;
}

#rightcolumn dt img {
border: 5px solid #5f331b;
}

#rightcolumn dt img:hover {
border: 5px solid #DFB945; ;
}

#rightcolumn dd {
padding-left:5px;
font-size:85%;
color:#EFE6E0;
}


/*SQUIFBOX
----------------------------*/

.squifboxtop {
background: #77452A url(/presentation/squifboxtop.gif) no-repeat;
padding-top:25px;
padding-left:25px;
padding-right:25px;
padding-bottom:5px;
margin-left:-20px;
}

.squifboxtop.alt {background: url(/presentation/squifboxtop.gif);}

.squifboxtop h2 {color:#FFF5EF;}

.squifboxtop.gold {
background: #77452A url(/presentation/squifboxtop4.gif) no-repeat;}


/*BUTTON ROLLOVER
-------------------------------*/

#links {
padding-left:10px;
}
#links ul li {
background: url(/presentation/buttonrollover.jpg) no-repeat;
display:block;
float:left;
}

#links ul li a {
display:block;
}

#links ul li img {
padding-left:25px;
padding-top:18px;
padding-bottom:20px;
padding-right:40px;
border:none;
}

#links ul li a:hover {
background: url(/presentation/buttonrollover.jpg) 0px -104px no-repeat;
}


/*FORM MAILER */
<!--


.mailwrapper {
	text-align: center;
}


.maildiv {
	margin: 0 auto 0 auto;
	text-align: left;
	width: 540px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#EFE6E0;

}
.maildiv form {
	text-align: left;
}
.maildiv label {
	/* used for right side captions */
	vertical-align: top;
	padding: 0 0 0 3px;
}

.maildiv .sidelbl {
	/* used for left side labels */
	width: 95px;
	text-align: right;
	padding: 0 10px 0 0;
	vertical-align: top;
	position: relative;
    display: block; 
    float: left; 
	clear: left;
}

.maildiv h2 {
	color: #005ABE;
	font-size: 120%;
}
.maildiv input {
	margin-bottom: 10px;

}
.maildiv select {
	margin-bottom: 10px;

}
.maildiv textarea {
	margin-bottom: 10px;

}
.maildiv .ver_img {
	padding: 0;
	margin: 0 0 10px 10px;
	vertical-align:bottom;  
	border: 1px solid #005ABE; 
}
.maildiv fieldset {
	padding: 5px 5px 5px 5px;
	margin-bottom: 10px;
	border:0;
}
.maildiv .legendspacing {
	height: 10px;
}
.maildiv .fmcredits {
	float: left;
	font-size: 90%;
}
.maildiv .fmsubmit {
	float: right;
}
.maildiv .fmrequired {
	color: #AA1315;
	font-size: 90%; 
	float: left;
	margin-top: 3px;
	margin-left: 5px;
}
.maildiv .fmspacer {
	height: 10px;
}

.maildiv .fminfofull {
	padding: 0 10px 0 10px;
	color: #AA1315;
	margin-bottom: 15px;
display:none;
}
.maildiv .fminfohalf {
	padding: 0 10px 0 10px;
	color: #005ABE;
	margin-left: 110px;
	margin-bottom: 15px;
}
.maildiv .fmerrorbox {
	text-align: left;
}
.maildiv li {
	margin: 0 0 4px 0;
}
.maildiv .fmerrortitle {
	color: #FF0000;
	font-size: 120%;
}

.ifactor {
color:#7D4C14;
background-color:#B19333;
font-weight:bold;
}

.citations {
color:#613B0A;
background-color:#B2926C;
font-weight:bold;
}

#newsarchive ul {}

.pullquote {
width:200px;
font-size:medium;
font-weight:bold;
padding:5px;
color:#613B0A;
line-height:1.4em;
}

#leftcolumn table {background-color:white; border:1px solid #77452A;}

#leftcolumn table p {color:black;}

#leftcolumn table td {padding:3px; background-color:white; border:1px solid #77452A;}

table.results {font-size:0.8em;}
/*COLOUR PALETTE

#414030 -greybrown
#5f331b - main brown
#ae4f23 - orange
#6c5a41 - lighter gold-brown
#9f8058 - lightest gold-brown
#9e821e - orange-brown
#994c00 - orange with no blue
#633600 - brown with no blue
#4a2a00 - darker brown with no blue
#382803 - darker brown with a bit of blue
*/

ul.profilegallery {list-style-type:none; margin:2em; font-family:Verdana, Arial, Helvetica; width:300px;}
ul.profilegallery li {float:left; width:130px; height:250px; padding:5px;}
ul.profilegallery .caption {font-size:11px; padding-top:2px; padding-left:1px; color:white;}


#links ul{
margin-left:0em;
}


/* PROJECTS ROLLOVER MENU
----------------------------------------*/

#projectnav {
height:440px;
width:270px;
margin-bottom:40px;
}

#menu li {list-style-type:none;}

#menu li a {background: url(/presentation/organogram3.jpg) no-repeat; display:block; text-decoration:none; width:270px;}

#menu li a i {visibility:hidden; }

#menu li a#project_hos {height:161px;}
#menu li a#project_pc_ai {background-position:0px -161px; height:43px;}
#menu li a#project_pc_fd {background-position:0px -204px; height:39px;}
#menu li a#project_acs   {background-position:0px -243px; height:55px;}
#menu li a#project_idc   {background-position:0px -298px; height:54px;}
#menu li a#project_ht    {background-position:0px -352px; height:45px;}
#menu li a#project_hfmp {background-position:0px -396px; height:53px;}
#menu li a#project_other {background-position:0px -447px; height:40px;}

#menu li a#project_hos:hover, a#project_hos.active {background-position: -270px 0px;}
#menu li a#project_pc_ai:hover, a#project_pc_ai.active {background-position: -270px -161px;}
#menu li a#project_pc_fd:hover, a#project_pc_fd.active {background-position: -270px -204px;}
#menu li a#project_acs:hover, a#project_acs.active {background-position: -270px -243px;}
#menu li a#project_idc:hover, a#project_idc.active {background-position: -270px -298px;}
#menu li a#project_ht:hover, a#project_ht.active {background-position: -270px -352px;}
#menu li a#project_hfmp:hover {background-position:-270px -396px;}
#menu li a#project_other:hover {background-position:-270px -448px;}


/* EXERCISES */

/*EXERCISES
---------------------*/


dl.exercise {clear:both; min-height:155px;}

dl.exercise img {border:5px solid #CBCD9B; float:left;}
dl.exercise dd.etitle {font-size:120%; font-weight:bold; margin-bottom:1em;}
dl.exercise dd {margin-bottom:0.6em; margin-left:220px; color:#EFEFEF; }

/*EXERCISE NAV
--------------------*/
ul.exnav {width:200px; margin-left:0px; margin-bottom:20px; padding-bottom:4px;}
ul.exnav li {}
ul.exnav li a {padding:2px; padding-left:10px; padding-bottom:0px; display:block; }

ul.exnav h3 {background: url(/presentation/squifboxheadline.gif) no-repeat;
padding-left:10px;
padding-top:15px;
padding-bottom:5px;
margin-left:-5px;
width:260px;
color:#FFF5EF;}