/* CSS Document */

/* 
	***** PAGE STYLE SETUP ***** 
	Info: Styling for body, headings and main links.

*/

body {
	padding: 0;
	margin:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	line-height: 120%;
	background: #BED8F3;	
}
body#newsNavBody 
{
	background: #e9fcff;
}
div#mainSection div#contentLeft, div#mainSection div#contentLeftNoPic
{
	background-color: #e9fcff;
}
table.allSectionsTable 
{
	background: #e9fcff;
}
div#downloadBox 
{
	background: #101072;	
}
div.subnav h5 a 
{
	color: #101072;
}
div#contentRight h2 
{
	color: #101072;
}
div#contentRight div#downloadBox1 h2 
{
	color: White;
}
div#contentRight div#downloadBox2 h2 
{
	color: White;
}
div.subnav ul li a.subNavAnchor 
{
	color: #101072;
}

div.subnav ul li a.subNavAnchor:visited
{
	color: #101072;
}

/* HEADINGS */

h1 {
	color: #FFFFFF;
	font-size: 24px;
	line-height: 120%;
	margin:57px 0 0px 129px;
	padding:0;
	float: left;
}

h2 {
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	line-height: 120%;
	margin:0;
	padding:0;
}
div#newsBox h2 
{
	color: #101072;
	font-size: 14px;
	font-weight: bold;
	line-height: 120%;
	margin:0;
	padding:0;
}
h3 {
	color: #FF9800;
	font-size: 14px;
	font-weight: bold;
	line-height: 120%;
	margin:10px 0 6px 0px;
	padding:0;
}



/* MAIN BODY LINKS*/
/*
a, a:visited {
	text-decoration:none;
	color:#E9FCFF;
}

a:hover{
	text-decoration: underline;
	color: #E9FCFF;
}
*/
/* ***** END PAGE STYLE SETUP ***** */

/* 

	***** LAYOUT *****
	Info: Page Divisions
	+ Page is sliced into 2 horizontal sections; these are the main page divisions #topSection and #mainSection. 
	+ The #mainSection is then sliced into #contentLeft and #contentRight.
	+ #contentLeft holds the main body text, so has padding to avoid text touching the edge.
	+ #contentRight holds the download box, the news bulletin and the mini kalahari logo.

*/

/*	-- Main page Divisions --	*/

#topSection{
	margin: 0 auto;
	padding: 0;
	width: 780px;
	background-color: #101072;
}

#mainSection{
	clear:both;
	margin: 0 auto;
	padding: 0;
	width: 778px;
	height: auto;
	border-right: 1px solid #101072;
	border-bottom: 1px solid #101072;
	border-left: 1px solid #101072;
	background: #e9fcff;
}

/* -- End Main page Divisions -- */

/* -- Page sub-Divisions -- */

#contentLeft{
	float: left;
	width: 522px;
	height: auto;
	padding: 160px 25px 25px 25px;
	background: url(http://www.thecmscentrehost.com/ws/a0/Looks/Look640/Images/contentLeft_welcome.jpg) no-repeat top left; 
	background-color: #FFFFFF;
}

#contentLeftNoPic{
	float: left;
	width: 522px;
	height: auto;
	padding: 25px 25px 25px 25px;
	background-color: #FFFFFF;
}

#contentRight{
	float: left;
	width: 206px;
	height: auto;
	background-color: #e9fcff;
}

/* -- End Page sub-Divisions -- */

/* 	***** END LAYOUT ***** */

/* 
	***** PAGE COMPONENTS *****
	Info: Styling for the specific divs and items in the page.
	
	Contents:
		1. Main header + secondary nav: 	Header section and sub menu.
		2. Navigation wrapper: 				Holds the main menu (main menu styling in separate sheet).
		3. Free trial download sidebar:		Styling for download breakout section.
		4. News bulletin sidebar:			Styling for news feed section.
		5. Mini kalahari logo:				Mini Logo image url + size.
		6. Footer:							Styling for footer section.

*/

/*

1).	MAIN HEADER + SECONDARY NAV
	Description: Top of page Kalahari header image, also holds the secondary navigation.
	
	+ We define the width and height for the header image and apply styling.
	+ We then hide the title (The title is simply a text version of the strapline in the header image - it allows users who are not using styles to read the title as a title, but will not render if styles are on).
	+ Next we style up our sub menu (#headerMenu) into a horizontal floated list with custom bullets.
	+ Finally we style the links for the secondary nav.
	
*/

/*	Header Image */

#headerDiv{
	background: url(http://www.thecmscentrehost.com/ws/a0/Looks/Look640/Images/headerDiv.jpg) no-repeat top left;
	width: 780px;
	height: 116px;
	border-bottom: 1px solid #FFFFFF;
}

/*	No Styles Title - will only show if styles are off */

#headerTitle{
	display: none;
}

/*	Position the header navigation */

#headerMenu ul{
	padding: 20px 0 0 20px;
	margin: 0;
}

/*	Style up the header navigation  list with custom bullet as per design and float it left */

#headerMenu li{
	padding: 0;
	margin-right: 10px;
	list-style-image: url(http://www.thecmscentrehost.com/ws/a0/Looks/Look640/Images/headerMenu.jpg);
	list-style-position: inside;
	float: left;	
}

/*	Link styling specific to heder nav */

#headerMenu a, #headerMenu a:visited {
	margin-left: -3px;
	text-decoration:none;
	color:#FFFFFF;
}

#headerMenu a:hover{
	text-decoration: none;
	color: #FF9800;
}

/*	END MAIN HEADER + SECONDARY NAV */

/*

2).	NAVIGATION WRAPPER
	Description: Div to hold the main menu bar. (NOTE: Styling for main menu is in different style sheet)
	
	+ We set the width and height for our navigation wrapper. (We will then nest the menu within this and get the styling from a different sheet specific to the menu)
	+ Set BG color and border to match design spec.
	
*/

/*	Main navigation wrapper size and styling */

#navMenu{
	margin: 0; 
	padding: 0;
	width: 780px;
	height: 32px;
	background-color: #101072;
	border-bottom:  1px solid #FFFFFF;
}

/*	END NAVIGATION WRAPPER */

/*

3).	FREE TRIAL DOWNLOAD SIDEBAR
	Description: Dark blue box within #contentRight, contains a link to free download.
	
	+ Here we set position and padding so that text will not touch the edges.
	+ We then define paragraph color.
	+ Next we style up the links with a button image.
	+ Finally we adjust the padding and the background image on the :hover state to apply a rollover effect.
	
*/

/* 	download.Positioning */

#downloadBox, #downloadBox1, #downloadBox2 
{
	margin:0;
	padding:15px 20px 25px 20px;
	width: 165px;
	height: 87px;
	background-color: #101072;
	border-bottom: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	
}

/* 	download.Paragraph */

#downloadBox p, #downloadBox1 p, #downloadBox2 p
{
	color: #FFFFFF;
}

/* 	download.Links */

#downloadBox a, #downloadBox a:visited,#downloadBox1 a, #downloadBox1 a:visited,#downloadBox2 a, #downloadBox2 a:visited
{
	display: block;
	width:138px;
	height:19px;
	margin: 5px 0;
	padding-top: 4px;
	padding-left: 6px;
	padding-bottom: 1px;
	padding-right: 1px;
	background: url(http://www.thecmscentrehost.com/ws/a0/Looks/Look640/Images/downloadBut_up.jpg) no-repeat top left;
	color: White;
}

/* 	download.Rollover */

#downloadBox a:hover, #downloadBox1 a:hover, #downloadBox2 a:hover
{
	text-decoration: none;
	padding-top: 5px;
	padding-left: 7px;
	padding-bottom: 0px;
	padding-right: 0px;
	background: url(http://www.thecmscentrehost.com/ws/a0/Looks/Look640/Images/downloadBut_down.jpg) no-repeat top left;
	color: White;
}
/*

#downloadBox a.tall, #downloadBox a.tall:visited,#downloadBox1 a.tall, #downloadBox1 a:visited,#downloadBox2 a.tall, #downloadBox2 a.tall:visited
{
	display: block;
	width:138px;
	height:50px;
	margin: 5px 0;
	padding-top: 4px;
	padding-left: 6px;
	padding-bottom: 1px;
	padding-right: 1px;
	background: url(http://www.thecmscentrehost.com/ws/a0/Looks/Look640/Images/downloadBut_up2.jpg) no-repeat top left;
	color: White;
}

/* 	download.Rollover */
/*

#downloadBox a.tall:hover, #downloadBox1 a.tall:hover, #downloadBox2 a.tall:hover
{
	text-decoration: none;
	padding-top: 5px;
	padding-left: 7px;
	padding-bottom: 0px;
	padding-right: 0px;
	background: url(http://www.thecmscentrehost.com/ws/a0/Looks/Look640/Images/downloadBut_down2.jpg) no-repeat top left;
	color: White;
}

/* 	download.Links */
/*
#downloadBox a, #downloadBox a:visited,#downloadBox1 a, #downloadBox1 a:visited,#downloadBox2 a, #downloadBox2 a:visited
{
	display: block;
	width:138px;
	height:50px;
	margin: 5px 0;
	padding-top: 4px;
	padding-left: 6px;
	padding-bottom: 1px;
	padding-right: 1px;
	background: url(http://www.thecmscentrehost.com/ws/a0/Looks/Look640/Images/downloadBut_up2.jpg) no-repeat top left;
	color: White;
}

/* 	download.Rollover */
/*
#downloadBox a:hover, #downloadBox1 a:hover, #downloadBox2 a:hover
{
	text-decoration: none;
	padding-top: 5px;
	padding-left: 7px;
	padding-bottom: 0px;
	padding-right: 0px;
	background: url(http://www.thecmscentrehost.com/ws/a0/Looks/Look640/Images/downloadBut_down2.jpg) no-repeat top left;
	color: White;
}

/*	END FREE TRIAL DOWNLOAD SIDEBAR */

/*

4).	NEWS BULLETIN SIDEBAR
	Description: Gradient filled box containing news feed entries.
	
	+ First set the padding for the news box item so text won't touch the edge.
	+ Next define the link styling - the design illustrates a bold, black link so we will replicate this.
	+ Next we style up the links with a button image.
	+ Finally set a class so that all news entries have a line at the bottom to signify the end of the item.
	
*/

/* news box padding */

#newsBox{
	padding: 20px 20px 20px 20px;
}

/* news box links */
/*
#newsBox a, #newsBox a:visited{
	display: block;
	padding: 20px 0 10px 0;
	color: #000;
	font-weight:bold;
}

#newsBox a:hover{
	text-decoration: none;
	color:#FFFFFF;
}
*/
/* news entry class (draws line after each entry) */

.newsEntry{
	border-bottom: 1px solid #FFFFFF;
}

/*	END NEWS BULLETIN SIDEBAR */


/*

5).	MINI KALAHARI LOGO
	Description: Small logo goes after news entries.
	
	+ Set dimensions of object.
	+ Set url of image.
	
*/

#logoRight{
	width:199px;
	height:78px;
	background:url(http://www.thecmscentrehost.com/ws/a0/Looks/Look640/Images/logoRight.jpg);
}

/* END MINI KALAHARI LOGO */


/*

6).	FOOTER
	Description: Dark blue row with contact information at foot of page.
	
	+ Clear the element so it sits underneath and then style up with color, centre text alignment and width.
	+ Apply styling to footer paragraph text.
	+ Style the footer-specific links.
	
*/

/* footer style and positioning */

#footer{
	margin: 0;
	padding: 2px;
	clear: both;
	text-align:center;
	width: 774px;
	background-color: #101072;
}

/* footer paragraph style */

#footer p{
	font-size: 11px;
	color: #FFFFFF;
}

/* footer link style */

#footer a, #footer a:visited{
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
}

#footer a:hover{
	font-size: 11px;
	color: #BED8F3;
	text-decoration: none;
}

/* END FOOTER */

div.sideBarSection 
{
	padding: 0px;
	margin: 0px;
}

ul.SideBarPictureList 
{
	padding: 0px;
	margin: 0px;
}

ul.SideBarPictureList li 
{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

img.SideBarPicture 
{
	width: 170px;	
	padding: 0px;
	margin: 0px;
	border: 1px solid gray;
}
span.rightHandImageTitle 
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #48009f;
	line-height: 90%;
}

/* ***** END PAGE COMPONENTS ***** */

span.pictureCaption 
{
	font-size: smaller;
	font-style: italic;
	line-height: 1.1em;
	
}