/*
Theme Name: KnowledgeBox
Theme URI: http://KnowledgeBox.com.au
Description: KnowledgeBox theme
Version: 1.0
Author: Nick Davies
Author URI: http://sparkdesign.com.au
Tags: KnowledgeBox
*/

/* CSS Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {line-height: 1;}

ol, ul {list-style: square inside; margin-left:16px;}

blockquote, q {quotes: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}

/* Tell the browser to render HTML 5 elements as block */  
footer, aside, nav {display: block;}

/* Layout */
body {  
margin: 0 auto;
width: 940px;
font: 14px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fff;  
}  

header {clear: left;}

a {color: #32327f}
a:hover {text-decoration: none;}

h1 a {
background:transparent url(images/Knowledge-Box.png) no-repeat scroll right top;
display:block;
height:63px;
text-indent:-9999px;
width:217px;
margin: 22px 0 23px 60px;
float: left;
}

h1 a:hover {
background:transparent url(images/Knowledge-Box-over.png) no-repeat scroll right top;
}

/* Nav */
nav {
margin-top: 57px;
float: right;
clear: right;
}

nav ul, footer ul {
list-style: none;
}

nav ul li, footer ul li {float: left;}

nav ul li a{
display: block;
margin-left: 24px;
text-transform:uppercase;
font-size: 14px;
text-align: center;
font-weight: bold;
text-decoration: none;
color: #bbb;
}

nav ul li a:hover, footer ul li a:hover {color: #32327f;}
nav ul li.current_page_item a, footer ul li.current_page_item a, li#spark a {color: #000;}

footer ul {margin: 19px 60px 0 60px; padding-bottom: 36px; padding-top:76px;}

footer ul li, footer ul li a {
	font-size: 12px;
	text-transform: none;
	color: #bbb;
	text-decoration: none;
}

.right {float: right;}

p, li {margin-bottom: 18px;}
li ul li, ul.small-list li {margin-bottom: 5px;}

.grey {color: #999;}

section, .slideshow {
	background: url(images/section-back.png) no-repeat;
	display:block;
	float: left;
	padding-left:60px;
}

article {margin-bottom: 18px; float:left;}

article#who-we-are, article#pauline-duncan {top: -108px;}

article h2, article h3 {
display:block;
height:270px;
text-indent:-9999px;
width:880px;
margin-bottom:20px;
}

article#who-we-are h2 {background:transparent url(images/who-we-are.jpg) no-repeat;}
article#what-we-do h2 {background:transparent url(images/what-we-do.jpg) no-repeat;}
article#seminars h3 {background:transparent url(images/seminars.jpg) no-repeat;}
article#training h3 {background:transparent url(images/training.jpg) no-repeat;}
article#individuals h3 {background:transparent url(images/individuals.jpg) no-repeat; margin-bottom:0;}
article#events h2 {background:transparent url(images/events.jpg) no-repeat;}
article#contact h2 {background:transparent url(images/contact.jpg) no-repeat;}
article#general h2 {background:transparent url(images/general.jpg) no-repeat;}

article#individuals {margin-bottom:0;}

article#who-we-are p {margin-bottom: 0px;}

article#pauline-duncan h2 {
background:transparent url(images/pauline-duncan.jpg) no-repeat; 
clear: left;
}

.left {
float:left;
clear:right;
margin-left:20px;
}

.half {width: 410px;}

footer {
clear:left;
background:transparent url(images/bottom-border.png) no-repeat;}


thead {font-weight: bold;}

col.col1 {
width: 100px;
}

/** SlideShow **/

.slideshow-images {
	display: block;
	overflow: hidden;
	position: relative;
}		
.slideshow-images img {
	display: block;
	position: absolute;
	z-index: 1;
}		
.slideshow-thumbnails {
	overflow: hidden;
}

/**
HTML:
	<div class="slideshow-images">
		<img />
		<img />
	</div>
	
Notes:
	The images div is where the slides are shown.
	Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/

.slideshow-images {
	height: 300px;
	width: 400px;
	float: right;
}		
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0; 
}
.slideshow-images-next { 
	opacity: 0; 
}
.slideshow-images img {
	float: left;
	left: 0;
	top: -60px;
}	

/**
Notes:
	These are examples of user-defined styles.
	Customize these classes to your usage of Slideshow.
*/

.slideshow {
	
}
.slideshow a img {
	border: 0;
}

/**
HTML:
	<div class="slideshow-captions">
		...
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions {
	background: #000;
	bottom: 20px;
	color: #FFF;
	font: 23px/29px "Helvetica Neue", Helvetica, Arial, sans-serif;
	left: 80px;
	overflow: hidden;
	position: absolute;
	padding: 18px 20px 0;
	width: auto;
	z-index: 10000;
	height: 79px; 
	visibility: visible; 
	opacity: 0.7;
}

/**
HTML:
	<div class="slideshow-loader" />
	
Notes:
	Customize the hidden / visible classes to affect the loader animation.
*/

.slideshow-loader {
	height: 28px;
	right: 0;
	position: absolute;
	top: 0;
	width: 28px;
	z-index: 10001;
}
.slideshow-loader-hidden {
	opacity: 0;
}
.slideshow-loader-visible {
	opacity: 1;
}