/* RECAP:
- Never define a padding for an element that has a width defined, it breaks in IE.
- Duplicate chars in IE6: remove html comments between first and last series of floated elements.
- Use px except for text, in order to get same rendering in all browsers.
*/

/* ************************************ IE6 fixes *************************************** */

* html {
	font-size:						small; /* IE6 hack, now text size renders exactly as on FF and Safari */
}

/* #################################### Global styles ##################################### */

/* The best reset money can buy */
* { 
	margin:								0;
	padding:							0;
}

/* width = 700(#main) + 1(main-border) + 300(#sidebar) */
body {
	background:						#ffffff;
	color:								#333;
	text-align:						left;
	font-family:					arial, sans-serif;
	font-size:						14px;
	width:								1001px;
	margin:								auto;
}

a {
	color:								#0078D7;
	text-decoration:			none;
}

a:hover {
	text-decoration:			underline;
}

h1, h2, h3 {
	font-weight:					normal;
}

h3 {
	margin-bottom:				5px;
}

h6 {
	font-size:						14px;
	text-transform:				uppercase;
	margin-bottom:				10px;
	/*background:						#eaeaea;*/
	/*border-top:						3px solid #000;*/
	/*padding:							5px 0 5px 3px;*/
}

	h6 a {
		color:							#03497E;
	}

img {
	vertical-align:				middle;
	border:								none;
}

p {
	margin-bottom:				1em;
}

/* ********************************** Lists *********************************** */

li {
	list-style-image:			none;
	list-style-type:			none;
	padding-left:					14px;
	background:						url('/images/icons/bullet-dot.png') no-repeat 0 8px;
}

/* ********************************* Header *************************************** */

#header {
	overflow:							hidden;
}
	
	#header #logo {
		float:								left;
	}
	
	#header #logo a {
		color:								black;
		text-decoration:			none;
	}

	#header #menu {
		font-size:						11px;
		float:								right;
	}

/* ********************************* Menu *************************************** */

/* Height must be the same as #menu li's line-height */
#navigation {
	background: 					#03497e;
	overflow:							hidden;
	height:								27px;
	font-family:					arial, sans-serif;
	font-size:						12px;
	font-weight:					bold;
	text-transform:				uppercase;
}

	/* <li> with line-height trick for rollover-like cross-browser compatiblity */
	#navigation li {
		background:						none;
		padding:							0;
		float:								left;
		line-height:					27px;
		border-right:					1px solid #fff;
	}

	#navigation a {
		display:							block;
		color:								#fff;
		padding:							0 25px 0 25px;
	}

	#navigation a:hover {
		background:						#439BE9;
		text-decoration:			none;
	}

/* ********************************* Page *************************************** */

#page {
	overflow:							hidden;
}

#sidebar {
	width:								300px;
	float:								right;
	padding:							10px 0 0 10px;
	border-left:					1px solid #ccc;
}

	#sidebar h6 {
		border-top:					1px solid #ccc;
		padding-top:				10px;
		margin-top:					10px;
	}
	
	#sidebar h6.top {
		border-top:					none;
		margin-top:					0;
		padding-top:				0;
	}
	
#main {
	width:								690px;
	float:								left;
	padding:							10px 0 10px 0;
}
	
	#main .full {
		padding:						0px 10px 10px 0;
		float:							left;
		width:							680px;
	}
	
	/* total_width = 400 + 9(padding) + 1(border-right) = 410 */
	#main #left {
		float:							left;
		width:							400px;
		padding:						10px 9px 10px 0;
		border-right:				1px solid #ccc;
	}
		
	/* width = 690(#main) - 410(#left) - 2*10(padding) */
	#main #right {
		float:							left;
		width:							260px;
		padding:						10px;
	}
	
	#main #left, #main #right {
		border-top:					1px solid #ccc;
	}
	
	#main .container {
		margin-bottom:			20px;
		overflow:						hidden;
	}

/* ********************************* Footer *************************************** */

#footer {
	border-top:						1px solid #ccc;
	padding:							10px;
	font-size:						80%;
	text-align:						center;
}

/* ****************************** Navigations ************************************* */

#navigations {
	overflow:							hidden;
}
	
	#navigations .navigation {
		width:							300px;
	}
	
	#navigations .next {
		float:							left;
	}

	#navigations .previous {
		float:							right;
		text-align:					right;
	}