/* -----------------------------------------------------------------
	Creation: 	Original:	17/01/2010
	Author:		Robert Dillon
				www.refreshingedge.com
	Contents
	-----------------------------
	///		globals
	00	pageContainer 
	01 	body
	02	siteWidth
	03	topLinks	
	04	logo		
	05	mainNav	
	06a	bannerHome
		06b	bannerSubpage
		06c	buttons and hover effects
		06d	secodaryNav
	07a	col_main
		07b	col_secondary
		07c	col_highlight	(blue background, with lego and coloured header)
		07d	pre-designed (column) examples
	08	specific sections for individual use
 		08a	pagination
 		08b	storeList
 		08c	form styling
	09	footer	


	
	
/* globals */
html, body {																					/*	sticky footer	*/
	height: 100%;
}
* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
}
.noDisplay {
	display: none;
}
.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}
a {
	color: #424ca0;
	text-decoration: underline;
}
	a:hover {
		color: #2d336e;
		text-decoration: none;
	}
h1, h2, h3 {
	color: #676773;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: 100;
	padding: 0.5em 0;
}
h1 {
	font-size: 24px;
	letter-spacing: 0px;
/*	text-transform: capitalize; */
	word-spacing: 0px;
}
	h2 {
	font-size:1.5em;
	line-height: 1.5em;
	}
		h3 {
		font-size:1.17em;
		line-height: 1.4em;
		}
p {
	padding: 0.95em 0;
	word-spacing: 2px;
}
ul {
	list-style: none;
	margin: 10px 0 20px 0;
}
ol {
	list-style-position:inside
}


	
/*	00	body
------------------------------------------------------------------*/	
body {
	background: #fff;
	border-top: 10px solid #3d4347;													/* not needed but keep due to margin */
	color: #0f1222; 
	line-height: 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}



/*	01	pageContainer 																	/* CURRENTLY NOT USED (will be needed for sticky footer) 
------------------------------------------------------------------*/	
#pageContainer {
	margin: 0 auto;
	min-height: 100%;
	position: relative;
}



/*	02	siteWidth
------------------------------------------------------------------*/	
.siteWidth { 
	clear: both;
	margin: 0 auto;
	padding: 0px 10px 0px 10px;
	width: 940px;																				/*	960px -20px padding */
}
	.siteWidth:after {																		/* fixes the float problem */
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}

/*	03	topLinks
------------------------------------------------------------------*/	
ul#topLinks { 
	background: url(assets/topLinks_bg.png) 50% 0 no-repeat;
	display: block;
	float: right;
	font-size: 10px;
	font-weight: bold;
	height: 23px;
	margin: -10px 50px 0 0;
	position: relative;
	width: 245px;
	z-index: 1;																					/*	make these links above mainNav */
}
	ul#topLinks li { 
		float: left;
		line-height: 22px;
		margin: 0 25px 0 24px;
	}
	ul#topLinks a {
		color: #e6f3fd;
		display: inline-block;
		height: 100%;
		text-decoration: none;
		width: 100%;
	}
		ul#topLinks a:hover {
			color: #fff;
			text-decoration: none;
		}
		/*********		NOT CROSS BROWSER COMPATABLE	**********
			ul#topLinks li:after {															/*	add a seperator with css * /
				color: #e6f3fd;
				content: "|";
				margin: 0 -20px 0 15px;
			}	
			ul#topLinks li:last-child:after {												/*	don't show for last * /
				content: "";
				color: red;
			}		
		/*********		NOT CROSS BROWSER COMPATABLE	**********	*/

/*	04	logo
------------------------------------------------------------------*/		
#logo { 
	float: left;																					/* allows mainNav to float over */	
	margin: 20px 0;
}

#homepageImage { 
	float: right;																					/* allows mainNav to float over */	
	margin: -5px 10px 20px 15px;
}

/*	05	mainNav
------------------------------------------------------------------*/		
ul#mainNav {  
	height: 120px;
	float: right;
	margin: -10px 0 0 0;		
	width: 570px;	
}
	ul#mainNav li {
		background: url(assets/mainNav_sep.png) 0 0 no-repeat;		/* hard to find an alternative with so many images already, this requires an empty <li></li> in the markup */
		float: left;
		height: 100%;
		line-height: 120px;
		text-align: center;
		width: 4px;
	}
		ul#mainNav li#home {
			background: url(assets/home.jpg) no-repeat;
			width: 142px;
		}
		ul#mainNav li#services {
			background: url(assets/services.jpg) no-repeat;
			width: 138px;
		}
		ul#mainNav li#features {
			background: url(assets/features.jpg) no-repeat;
			width: 136px;
		}
		ul#mainNav li#support {
			background: url(assets/support.jpg) no-repeat;
			width: 138px;
		}
			ul#mainNav li#home:hover {
				background-position: 0 0;
			}
			ul#mainNav li#services:hover {
				background-position: 0 0;
			}
			ul#mainNav li#features:hover {
				background-position: 0 0;
			}
			ul#mainNav li#support:hover {
				background-position: 0 0;
			}
				ul#mainNav li#home a {
					background: url(assets/home.png) 50% 50% no-repeat;
					display: block;
					height: 100%;
					width: 100%;
				}
				ul#mainNav li#services a {
					background: url(assets/services.png) 50% 50% no-repeat;
					display: block;
					height: 100%;
					width: 100%;
				}
				ul#mainNav li#features a {
					background: url(assets/features.png) 50% 50% no-repeat;
					display: block;
					height: 100%;
					width: 100%;
				}
				ul#mainNav li#support a {
					background: url(assets/support.png) 50% 50% no-repeat;
					display: block;
					height: 100%;
					width: 100%;
				}



/*	06a	bannerHome
------------------------------------------------------------------*/		
#bannerHome { 
	background: url(assets/bannerHome_bg.jpg) 0 0 repeat-x;
	clear: both;			
	height: 285px;	
	width: 100%;
}
	#bannerHome h1, #bannerHome h2 {
		background: url(assets/bannerHome_text.png) 10px 50px no-repeat;
		float: left;
		height: 160px;
		width: 511px;
	}
	#bannerHome ul#call2action {
		float: left;
		width: 600px;
	}
		#bannerHome ul#call2action li {
			float: left;
			margin: 10px 35px 0 10px;
		}
	#monitor { 
		float: right;
		margin: -10px 10px;
	}
	/*	06b	bannerSubpage
	------------------------------------------------------------------*/		
	#bannerSubpage {   
		background: url(assets/bannerSubpage_bg.jpg) 0 0 repeat-x;
		clear: both;			
		height: 90px;		
		width: 100%;
	}	
		#bannerSubpage .siteWidth {  												/* this solves a lot of problems re:siteWidth */
			height: 52px;																		
			padding: 0;
		}	
		#bannerSubpage h1, #bannerSubpage h2 {
			color: #424ca0;
			float: left;
			height: 47px;
			line-height: 50px;
			margin-left: 10px;														
		}	
		#bannerSubpage ul {  															/* prevent global margin in the secondaryNavigation */
			margin: 0;
		}
		#bannerSubpage ul#call2action { 
			float: right;
		}
			#bannerSubpage ul#call2action li {
				float: left;
				margin: 20px 10px -30px 0;
			}
	/*	06c	buttons and hover effects
	------------------------------------------------------------------*/		
	li.buttonSignup {
		background: url(assets/button-signup.png) 0 0 no-repeat;
		width: 215px;
		height: 50px;
	}	
		li.buttonSignup:hover, li.buttonSignup:focus {
			background: url(assets/button_hover-signup.png) 0 0 no-repeat;
			width: 215px;
			height: 50px;
		}	
	li.buttonFeatures {
		background: url(assets/button-features.png) 0 0 no-repeat;
		width: 215px;
		height: 50px;
	}	
		li.buttonFeatures:hover, li.buttonFeatures:focus {
			background: url(assets/button_hover-features.png) 0 0 no-repeat;
			width: 215px;
			height: 50px;
		}	
	li.buttonControlPanel {
		background: url(assets/button-controlPanel.png) 0 0 no-repeat;
			width: 215px;
			height: 50px;
	}	
		li.buttonControlPanel:hover, li.buttonControlPanel:focus {
			background: url(assets/button_hover-controlPanel.png) 0 0 no-repeat;
			width: 215px;
			height: 50px;
		}		
	li.buttonSignup a, li.buttonFeatures a, li.buttonControlPanel a {
		display: block;
		width: 198px;
		height: 46px;
	}
	/*	06d	secodaryNav
	------------------------------------------------------------------*/	
	h1.pageTitle {
		padding: 0;
	}
	ul#secondaryNav { 
		clear: both;
		height: 45px;
		margin: 0 auto;			
		width: 960px;
	}
		ul#secondaryNav li {
			background: url(assets/bannerSubpage_navSep.jpg) 100% 6px no-repeat;
			display: block;
			float: left;
			line-height: 45px;
			padding: 0 1.5em;
			margin-top: -9px;
		}	
		ul#secondaryNav a {
			display: block;
			height: 100%;
			text-decoration: none;
			width: 100%;
		}	
			ul#secondaryNav a:hover {
				color: #2d336e;
				text-decoration: underline;
			}		

/*	07a	col_main
------------------------------------------------------------------*/		
#col_main {
	float: left;
	padding: 12px 0;
	width: 620px;
}
	#col_main li {
		margin: 5px 0;
	}	
	
	.col_split_main { 																			/* overall width 320 (padding considered) to be used with no background or heading (body content) */
		float: left;
		margin: 20px 20px 0 0;
		width: 290px;
	}

	ul.ticky li {
		background: url(assets/li-tick.png) 0 1px no-repeat;
		padding-left: 25px;
	}
	
	.floatRight li {
		float: right;
	}
	.floatTick li {
		background: url(assets/li-tick.png) 0 2px no-repeat;
		padding: 0 0 3px 25px;
	}
	
	.small_text p {
		font: 9px normal Verdana, Arial, Helvetica, sans-serif;
		padding-bottom: 0.8em;
	}

 	/*	07b	col_secondary
	------------------------------------------------------------------*/		
	.col_secondary { 																			/* overall width 320 (padding considered) to be used with no background or heading (body content) */
		float: right;
		padding: 20px 0;
		width: 300px;
	}
 	/*	07c	col_highlight	(blue background, with lego and coloured header)
	------------------------------------------------------------------*/		
	.col_highlight {																				/*  overall width 320 (padding and margin considered) to be used with background colour and heading (highlight content) */
		background: #eaebf5 url(assets/col_highlight_bg.jpg) 50% 100% no-repeat;
		float: left;
		margin: 0 13px 0 0;																	/*	this should be 20px with a :last-child @ 0 but IE is crap */
		padding: 0 25px 25px 30px;
		width: 245px;
	}
		.col_highlight h1 {																		/*  overall width 320 (padding and margin considered) to be used with background colour and heading (highlight content) */
			font: normal 22px Arial, Helvetica, sans-serif;
			background: #1f34a3;
			color: #EFEFEF;
			height: 45px;																			/*	actual header (image) height 69px, weird */
			line-height: 45px;
			margin: 0 -30px 10px;
			padding-left: 30px;
			width: 270px;
		}
		.col_highlight li {					
			padding: 0.4em 0;
		}
 	/*	07d	pre-designed (column) examples
	------------------------------------------------------------------*/		
	/* features */
	.features h1 {
		background: url(assets/col_highlight_features.png) 50% 0 no-repeat;
	}
	/* paymentGateways */
	.paymentGateways h1 {
		background: url(assets/col_highlight_paymentGateways.png) 50% 0 no-repeat;
	}
	/* featuredStores */
	.featuredStores h1 {
		background: url(assets/col_highlight_featuredStores.png) 50% 0 no-repeat;
	}
	/* purple */
	.purple h1 {
		background: url(assets/col_highlight_purple.jpg) 50% 0 no-repeat;
	}
	/* green */
	.green h1 {
		background: url(assets/col_highlight_green.jpg) 50% 0 no-repeat;
	}
	/* pink */
	.pink h1 {
		background: url(assets/col_highlight_pink.jpg) 50% 0 no-repeat;
	}
 	/*	07e	list styles 
	------------------------------------------------------------------*/		
	ul.ticks li {
		background: url(assets/li-tick.png) 0 7px no-repeat;
		padding-left: 25px;
	}
	


/*	08	specific sections for individual use
 	/*	08a	pagination
	------------------------------------------------------------------*/		
	ul.pagination {
		clear: both;
		display: block;
		margin: 10px auto;
		overflow: auto;
		width: 50%;
	}
		ul.pagination li {
			float: left;
			margin: 0 3px;
			text-align: center;
		}
		ul.pagination a {
			height: 100%;
			margin: 0 3px;
			text-align: center;
			text-decoration: none;
		}
			ul.pagination a:hover {
				text-decoration: underline	;
			}
 	/*	08b	storeList
	------------------------------------------------------------------*/		
	ul.storeList {
		margin: 20px 0;
	}
		ul.storeList li {
			line-height: 1em;																		/* this is needed as inherit line-height is too large */
		}
 	/*	08c	form styling
	------------------------------------------------------------------*/		
	form {
		margin-bottom: 20px;
	}
		fieldset {
			border: 1px solid #dedede; 
/*			background: #fff url(assets/logo_brick.jpg) 80% 80% no-repeat;  */
			padding: 8px 15px;
			-moz-border-radius:0.4em;
			-khtml-border-radius:0.4em;
		}
			fieldset div {  
				margin: 5px 20px;
				width: 43%;
			}

		legend {
			color: #424ca0;
			font-size: 1.5em;
			padding: 4px 20px;
			border: 1px solid #dedede; 
		}
		label { 
			text-align: right;
			padding-right: 10px;
		}		
		input {
			border:1px solid #dedede; 
			padding: 0.2em;
			width: 150px;
/*			-moz-border-radius:0.5em;
			-khtml-border-radius:0.5em; */
		}
			input.year {
				width: 3em;
			}
			input.submit {
				background: url(assets/submit.jpg) 50% 50% no-repeat;
				color: #fff;
				padding: 0.45em;
				margin-top: 10px;
				width: 100%;
/*				-moz-border-radius: 0.8em;
				-khtml-border-radius: 0.8em; */
			}
				input.submit:hover {
					background: url(assets/submit-hover.jpg) 50% 50% no-repeat;
					color: #fff;
				}
			select.day, select.month {
				border:1px solid #dedede; 
				width: 3em;
			}
	div.button { 
		margin: 20px auto 5px auto;
		width: 240px;
		clear: both;
	}
	
	textarea {
			border:1px solid #dedede; 
			width: 25em;
	}	

/*	09	footer
------------------------------------------------------------------*/		
#footerWrapper { 
	background: #3d4347 url(assets/footer_bg.jpg) 50% 0 no-repeat;
	bottom: 0;																						/*	force footer to bottom no matter how much content */
	height: 100px;
	position: relative;																			/*	SET TO ABSOLUTE, HTML NEEDS MORE MARKUP THOUGH force footer to bottom no matter how much content */
	width: 100%;
} 
	ul#footerLinks {   
		height: 50px;
		margin: 0 auto;
		width: 60%;  
	}
		ul#footerLinks li { 
			float: left; 
			height: 50px;
			line-height: 50px;
			text-align: center;
/*			width: 20%; */
		padding: 0 25px;
		}	
		ul#footerLinks a {
			color: #e6f3fd;
			display: block;
			height: 100%;
			text-decoration: none;
			width: 100%;
		}	
			ul#footerLinks a:hover {
				text-decoration: underline;
			}		
	p#byLine {
		clear: both;
		color: #c0c0c0;
		font-size: 10px;
		padding: 0;
		text-align: center;
		width: 100%;
		line-height: 18px;
		margin-bottom: -4px;
	}		
	p#byLine a {
		color: #c0c0c0;
		text-decoration: none;
	}		
		p#byLine a:hover {
			color: #99ff00;
			text-decoration: underline;
		}