/*
         _    _ _  __  _____  _      _____ 
   ____ | |  | | |/ / |  __ \| |    / ____|
  / __ \| |  | | ' /  | |__) | |   | |     
 / / _` | |  | |  <   |  ___/| |   | |     
| | (_| | |__| | . \  | |    | |___| |____ 
 \ \__,_|\____/|_|\_\ |_|    |______\_____|
  \____/

Monday 6th April - Complete change of colour pallet and some background graphics added. Reworked the footer and some promo graphics.
Tuesday 7th April - Consolidation of CSS and some class name changes to more relevent and descriptive names. Some comments added as well.

*/

/* CSS Begins */

html {
	background: #423d37 url(../images/brown_bg.jpg) repeat-x;
}

body {
	font: 12px "Lucida Grande", Verdana, Arial, sans-serif;
	color: #3b5133;
	padding: 0;
	margin: 0;
}

#wrapper {
	background: white url(../images/wrapper_bg.jpg)  0 99px repeat-x;
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}

img {
	border: none; /* Removes any potential borders applied to images with links */
}

/* ======================== */
/* ! Main layout elements   */
/* ======================== */

#header {
	background: #f6f2e7 url(../images/header_bg.jpg) no-repeat;
	height: 60px;
	width: 960px;
	margin: 0 auto;
}

#logo {
	float: left;
	margin-left: 10px;
}

#search {
	float: right;
	margin: 6px 5px 0 0;
}

	#search input { /* Styles the input box font, colour etc for the Search function */
		height: 20px;
		width: 230px;
		margin-right: 5px;
		padding-left: 5px;
		font: 12px "Lucida Grande", Verdana, Arial, sans-serif;
		color: #5a2e42;
	}

#telNumber {
	font: 30px Garamond, 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
	float: right;
	text-align: right;
	margin: 15px 10px 0 0;
	padding: 0;
}

	#telNumber a { /* iPhone only link, clever hey! */
		color: #3b5133;
		text-decoration: none;
		cursor: default;
		margin: 0;
	}

/* ================== */
/* ! NavBars Styling   */
/* ================== */

#headerNav { /* Small links at the top of the page */
	position: absolute;
	z-index: 1;
	margin: 15px 0 0 400px;
	color: #e4dbc3;
	font-size: 11px;
	font-weight: bold;
}

	#headerNav a {
		text-decoration: none;
		color: #5a2e42;
	}
	
		#headerNav a:hover {
			color: #ff9000;
		}

#navBar {
	background: #bbb5a4 url(../images/navbar_bgBeige.jpg) repeat-x;
	border-top: 1px solid #bbb5a4;
	clear: both;
	font-size: 1.1em;
	height: 40px;
	width: 100%;
	margin-bottom: 20px;
}

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

		#navBar li {
			background: url(../images/navbar_dividers.jpg) 0 3px no-repeat;
			float: left;
		}

			#navBar .noDivider { /* this class removes the divider image from the first list item, common practise */
				background: none;
			}

				#navBar li a {
					float: left;
					padding: 10px;
					text-decoration: none;
					color: #5a2e42;
				}

					#navBar li a:hover {
						color: #3b5133;
					}

/* ================== */
/* ! NavBars Styling   */
/* ================== */

/* =========================== */
/* ! Company Name Search Box   */
/* =========================== */

#nameSearch {
	background: url(../images/cfSearch_bg.jpg) top no-repeat;
	height: 80px;
	width: 475px;
	text-align: right;
}

	#nameSearch input {
		width: 240px;
		margin-top: 48px;
		height: 20px;
		font: 12px "Lucida Grande", Verdana, Arial, sans-serif;
		color: #5a2e42;
	}

		#nameSearch button {
			margin: 10px 10px 0 10px;
		}

/* =========================== */
/* ! Company Name Search Box   */
/* =========================== */

/* ================= */
/* ! Stage Section   */
/* ================= */

#stage { /* Main holding div for Stage element, adds extra 50px to the bottom of .screen for rollover tabs */
	background: white url(../images/stage/stage_bg.jpg) no-repeat;
	position: relative;
	width: 475px;
	height: 250px;
	margin-bottom: 30px;
}

.screen { /* Overall style, width and height for holding element */
	position: absolute;
	overflow: hidden;
	width: 475px;
	height: 200px;
}

#screen1 { /* have the choice of adding background images to the div or directly in the HTML */
	background: white url(../images/stage/img1.jpg) no-repeat;
}

	#screen2 {
		background: white url(../images/stage/img2.jpg) no-repeat;
	}

		#screen3 {
			background: white url(../images/stage/img3.jpg) no-repeat;
		}

			#screen4 {
				background: white url(../images/stage/img4.jpg) no-repeat;
			}

				#screen5 {
					background: white url(../images/stage/img5.jpg) no-repeat;
				}

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

	#stage li a {
		color: #5a2e42;
		display: block;
		text-decoration: none;
	}

		#stage li a:hover {
			color: #3b5133;
			display: block;
		}

.tab { /* Tab class has a small divider background image applied rather than the "li" element */
	background: url(../images/navbar_dividers.jpg) 0 3px no-repeat;
	margin-top: 210px;
	font-size: 10px;
	width: 95px;
	height: 25px;
	display: block;
	float: left;
	cursor: pointer;
	text-align: center;
}

	#tab1 { /* Much like the navbar, the first background image is removed from the first "li". Done this way due to the tabs having a default class and ID applied for Mootools script to work. Not as straight forward as the navBar li's */
		background: none;
	}

.stageContent {
	width: 130px;
	text-align: left;
	float: right;
	padding-right: 10px;
}

		.stageContent h2 {
			font: 22px Garamond, 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
			font-weight: normal;
			padding: 10px 0 0 0;
			margin: 0;
			color: #5a2e42;
		}

			.stageContent a {
				font-size: .9em;
				color: #5a2e42;
				display: block;
				text-decoration: none;
				font-style: italic;
				font-weight: bold;
				margin-top: 15px;
			}

				.stageContent a:hover {
					color: #ff9000;
					font-size: .9em;
					display: block;
				}

/* ================= */
/* ! Stage Section   */
/* ================= */

/* ========================================= */
/* ! Main holding elements for all content   */
/* ========================================= */

#leftContent {
	width: 220px;
	float: left;
	overflow: hidden;
	margin: 5px 5px 5px 7px;
}

#centralContent {
	width: 485px;
	float: left;
	border-left: 1px solid #bbb5a4;
	border-right: 1px solid #bbb5a4;
	padding-left: 9px;
	margin-bottom: 30px;
	overflow: hidden;
}

#rightContent {
	width: 220px;
	float: right;
	overflow: hidden;
	margin: 5px 5px 5px 3px;
}

/* ========================================= */
/* ! Main holding elements for all content   */
/* ========================================= */

/* ============================= */
/* ! Footer Section and styles   */
/* ============================= */

#footer {
	background: #17120e url(../images/footer_bg.jpg) repeat-x;
	border-top: 4px solid #bbb5a4;
	font-size: 9px;
	position: relative;
	color: #f6f2e7;
	width: 960px;
	overflow: auto;
	margin: 0 auto;
}

	#footer h4 {
		font: 16px Garamond, 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
		text-align: center;
		padding: 0 0 5px 0;
		margin: 0;
	}
	
		#footer a {
			color: #bbb5a4;
			text-decoration: none;
		}
		
			#footer a:hover {
				color: #ff9000;
			}
			
				#footer ul {
					list-style: none;
				}
				
					#footer li {
						background: url(../images/footerLi.jpg) 0% 3px no-repeat;
						padding: 0px 0 5px 15px;
					}

#aboutUs {
	width: 210px;
	float: left;
	padding: 0 10px 5px 10px;
	margin-top: 10px;
	border-right: 1px solid #bbb5a4;
}

	#aboutUs ul {
		padding-left: 59px;
	}

#aboutSite {
	width: 210px;
	float: right;
	padding: 0 10px 5px 10px;
	margin-top: 10px;
	border-left: 1px solid #bbb5a4;
}

	#aboutSite ul {
		padding-left: 44px;
	}

#cFormation {
	width: 475px;
	float: left;
	padding: 0 10px 5px 10px;
	margin-top: 10px;
}

	#cFormation ul {
		padding-left: 135px;
	}

#copyRight {
	margin: 0 auto;
	padding: 5px 0 0 0;
	width: 960px;
	font-size: 8px;
	color: #f6f2e7;
}

#copyRight a {
	color: #ff9000;
	text-decoration: none;
}

/* ============================= */
/* ! Footer Section and styles   */
/* ============================= */

/* ======================== */
/* ! Small Module Styling   */
/* ======================== */

.smlModule { /* Used for anything other than, Newsletter, Basket and Testimonial sections in the left and right content areas */
	background: #f6f2e7;
	width: 215px;
	overflow: hidden;
	margin-bottom: 20px;
	border-bottom: 2px solid #e4dbc3;
}

	.smlModule h2 {
		border-bottom: 1px solid #ffc000;
		font: 22px Garamond, 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
		padding: 5px;
		margin: 0 0 5px 5px;
	}

		.smlModule h2 a {
			color: #3b5133;
		}

			.smlModule h4 {
				font-size: .9em;
				font-weight: normal;
				color: #3b5133;
				padding: 0 0 0 5px;
				margin: 0;
			}

				.smlModule a {
					color: #5a2e42;
					text-decoration: none;
				}

					.smlModule a:hover {
						color: #ff9000;
					}

						.smlModule input {
							height: 20px;
							width: 190px;
							margin: 0  0 8px 8px;
						}

							.smlModule textarea {
								font: 1.3em "Lucida Grande", Verdana, Arial, sans-serif;
								color: #666;
								width: 190px;
								margin: 0  0 8px 11px;
							}

								.smlModule p {
									font-size: .9em;
									padding: 0 0 10px 5px;
									margin: 0;
								}

/* ======================== */
/* ! Small Module Styling   */
/* ======================== */

/* ===================== */
/* ! Newsletter Module   */
/* ===================== */

#newsLetter {
	background: #f6f2e7 url(../images/newsletter_bg.jpg) bottom right no-repeat;
	width: 215px;
	overflow: hidden;
	margin-bottom: 20px;
	border-bottom: 2px solid #e4dbc3;
}

	#newsLetter h2 {
		border-bottom: 1px solid #ffc000;
		font: 22px Garamond, 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
		padding: 5px;
		margin: 0 0 5px 5px;
		color: #3b5133;
	}

		#newsLetter p {
			font-size: .9em;
			padding: 0 0 10px 5px;
			margin: 0;
		}

			#newsLetter a {
				color: #4977ad;
				text-decoration: none;
			}

				#newsLetter a:hover {
					color: #ff9000;
				}

					#newsLetter input {
						height: 20px;
						width: 190px;
						margin: 0  0 8px 8px;
						font: 12px "Lucida Grande", Verdana, Arial, sans-serif;
						color: #5a2e42;
					}

/* ===================== */
/* ! Newsletter Module   */
/* ===================== */


/* ================== */
/* ! Basket Styling   */
/* ================== */

#basket {
	background: #eee;
	width: 215px;
	overflow: hidden;
	border-bottom: 2px solid #e4dbc3;
	margin-bottom: 20px;
}

		#basket h2 {
			border-bottom: 1px solid #ffc000;
			font: 22px Garamond, 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
			color: #3b5133;
			padding: 5px;
			margin: 0 0 5px 5px;
		}
		
			#basket p {
				padding: 0 5px 5px 5px;
			}
			
.basketImg {
	float: right;
}

/* ================== */
/* ! Basket Styling   */
/* ================== */

/* ====================== */
/* ! Testimonial Module   */
/* ====================== */

#testimonialMod {
	background: #eee;
	width: 215px;
	overflow: hidden;
	border-bottom: 2px solid #e4dbc3;
	margin-bottom: 10px;
}

	#testimonialMod h2 {
		border-bottom: 1px solid #ffc000;
		font: 22px Garamond, 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
		padding: 0;
		margin: 0 0 5px 5px;
	}
	
		#testimonialMod h2 a {
			color: #3b5133;
			text-decoration: none;
		}
		
			#testimonialMod h2 a:hover {
				color: #ff9000;
			}

				#testimonialMod p {
					font-size: .8em;
					padding: 0 5px 0 5px;
				}

					#testimonialMod p a {
						color: #5a2e42;
						text-decoration: none;
						font-style: italic;
					}

						#testimonialMod p a:hover {
							color: #ff9000;
						}

/* ====================== */
/* ! Testimonial Module   */
/* ====================== */

/* ================ */
/* ! Large module   */
/* ================ */

.lrgModule { /* Large modules are for textual content in the middle section of the three column layout */
	background: white;
	text-align: justify;
	color: #3b5133;
	width: 475px;
	overflow: hidden;
	border-bottom: 1px solid #bbb5a4;
	margin-bottom: 10px;
}

	.lrgModule h1 {
		border-bottom: 1px solid #ffc000;
		font: 22px Garamond, 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
		color: #3b5133;
		margin-left: 5px;
	}

		.lrgModule p {
			padding: 0 5px 5px 5px;
			font-size: .9em;
		}

/* ================ */
/* ! Large module   */
/* ================ */

/* ================================= */
/* ! Classes for Repeated Elements   */
/* ================================= */

.defaultList { /* Will give you the same effect used in the secondary navigation structure */
	font: .9em "Lucida Grande", Verdana, Arial, sans-serif;
	padding: 0 0 10px 8px;
	margin: 0;
}

	.defaultList li {
		background: url(../images/liDotted.gif) 0% 2px no-repeat;
		padding: 0px 0 8px 15px;
		margin: 0;
		list-style: none;
	}

		.defaultList li a {
			color: #5a2e42;
			display: block;
			font-weight: bold;
			text-decoration: none;
		}

			.defaultList li a:hover {
				color: #ff9000;
				display: block;
			}

.moduleBtn { /* Button class used on any module sections within the page */
	float: left;
	margin: 0 0 10px 10px;
	cursor: pointer;
}

.calltos { /* Gives 20px margin to all call to action images used on pages */
	margin-bottom: 20px;
}

.clear { /* Always useful. probably won't use though */
	clear: both;
}

.italic {
	font-style: italic;
}

/* ================================= */
/* ! Classes for Repeated Elements   */
/* ================================= */

/* ======================= */
/* ! Zebra Table Styling   */
/* ======================= */

.zebra { /* Uses MooTools 1.2 to add fancy effects and styling to tables with the class "zebra" applied */
	margin-bottom: 30px;
}

.highlight {
	background: #ffffcb;
}

.even {
	background: white;
}

.mo {
	background: #ffffcb;
}

.odd {
	background: #e3ecf3;
}

.zebra th {
	width: 130px;
	padding: 5px;
	background: #ddd;
	border-bottom: 1px solid #999;
	text-align: center;
	font-weight: bold;
}

.zebra td {
	text-align: center;
	height: 80px;
	padding: 5px 20px 5px 5px;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

/* ======================= */
/* ! Zebra Table Styling   */
/* ======================= */


/* ====================================== */
/* ! Additional styles for all elements   */
/* ====================================== */

input:focus {
	background: lightyellow;
}

textarea:focus {
	background: lightyellow;
}

button {
	color: #5a2e42;
}

	button:hover {
		color: #ff9000;
	}

.bold { /* Class for applying font weight to stuff randomly */
	font-weight: bold;
	font-size: 13px;
}

/* ====================================== */
/* ! Additional styles for all elements   */
/* ====================================== */