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

* html {
	font-size:						small; /* Now text size renders exactly as on FF and Safari */
}

* html object.mov {
	display: 							none; /* For displaying a Quicktime movie in the webpage */
}

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

/* Use this tiny little rule instead of a bloated reset.css file */
* { 
	margin:								0;
	padding:							0;
}

body {
	background:						#ffffff;
	color:								#555; /* color of the text, this is nicer than pure black */
	text-align:						left;
	font:									15px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

br {
	clear:								both
}

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

h1 {
	line-height:					30px;
}

h2 {
	line-height:					26px;
	margin:								0px 0 10px 0;
}

h3 {
	margin-top:						14px;
}

img {
	border:								0;
	margin-right:					8px;
	/*float:								left;*/
	vertical-align:				middle;
}

p {
	margin:								10px 0 5px 0;
	line-height:					20px;
}

cite {
	color:								#bbb;
}

/* ################################### Hyperlinks ################################# */

a {
	text-decoration:			none;
	color:								#0060bf;
}

a:hover {
	text-decoration:			underline;
}

a.highlight {
	color:								orange;
}

/* ###################################### Forms ################################### */

form {
	padding:							15px 20px 20px 20px;
	border: 							2px solid #ccc;
	overflow:							hidden;
}
	
	/* Do not define as "form .input" or you'll have to create a ".end" rule for the right-margin */
	.input {
		margin:								0 30px 20px 0;
		float:								left;
	}
	
	textarea {
		width:									100%;
		border:									2px solid #999;
	}
	
		form .input input {
			border:								2px solid #999999;
			float:								left;
			margin-top:						3px;
		}
		
	form .submit {
		clear:								left;
	}
	
	/* That's white on white for my reverse captcha */
	form .email {
		color:								#fcfcfc; /* Slightly different color to pass W3C validation */
		border:								1px solid #fefefe;
		width:								1px;
		height:								1px;
		float:								right;
	}

label {
	margin-right:					5px;
	float:								left;
}

legend {
	font-size:						18px;
	color:								#333333; /* legend doesn't inherit color from body in IE*/
	margin-bottom:				10px;
}

/* ################################## Lists ################################## */

li {
	list-style-position: 	inside;
	padding-left:					20px;
}

/* ################################## Tables ################################## */
/* Beware, Firefox only supports width attribute for col and colgroup :-( */

table {
	border-collapse:			collapse; /* Also add cellspacing=0 in the html for FF */
	border-width: 				0px 1px 1px 0px;
	border-style: 				solid;
	clear:								both;
	width:								100%;
	margin:								5px 0 0 0;
}

table, td, th.end, th.no_border {
	border-color:					#ddd;
	border-style:					solid;
}

td {
	border-width:					1px 0 0 1px;
	padding:							5px 8px 5px 8px;
}

	td .heading {
		text-align:						right;
		font-weight:					bold;
	}

th {
	padding:							0 5px 0 5px;
	font-weight:					bold;
	border-left:					1px solid white;
	border-bottom:				1px solid #ccc;
	background:						url("/images/backgrounds/table.png") repeat-x;
}

	table .no_border {
		border-width:					0 0 1px 0;
		background:						none;
	}

/* Cycle colors for better readability */
tr.even {
	background-color:			#e8e8e8;
}
	
/* ##################################### Page ##################################### */

#page {
	position:							relative;
	padding-bottom:				120px;
}

.wrapper {
	width:								980px; /* as IE and FF don't render the same em size, I must use px */
	margin:								auto; /* width + auto + no_float = centered div */
	overflow:							hidden;
}

.column_half {
	width:								458px;
	float:								left;
	margin-right:					44px;
}

.column_quarter {
	width:								229px;
	float:								left;
	margin-right:					44px;
}

.column_double_third {
	width:								640px;
	float:								left;
	margin-right:					40px;
}

.column_third {
	width:								300px;
	float:								left;
	margin-right:					40px;
}

.center {
	margin:								auto;
	float:								none;
}

.container {
	margin-bottom:				40px;
	overflow:							hidden;
}

.end {
	margin-right:					0;
}

/* ################################## Error messages ################################## */

#errorExplanation {
	padding:							20px;
	background:						#ecd5d8;
	color:								#bc2a4d;
	margin-bottom:				20px;
}

	#errorExplanation h2 {
		font-size:						24px;
	}

	#errorExplanation li {
		background:						url('/images/icons/bullet_red.png') no-repeat 0 3px;
		list-style:						none;
	}

.fieldWithErrors {
	float:								left;
}

form .fieldWithErrors input, form .fieldWithErrors textarea, form .fieldWithErrors select {
	background:						#ecd5d8 url("/images/icons/error.png") no-repeat right top;
	border:								1px solid #fa3f3f;
}

/* ################################## Flash messages ################################## */

#flash {
	/*display:							none;*/ /* For jQuery so that it can fade in the flash div */
	margin-bottom:				20px;
}

.flash {
	padding:							12px 12px 12px 50px;
}

.flash_error {
	background:						#ffffaa url('/images/icons/error_big.png') 10px center no-repeat;
	color:								#998833;
}

.flash_info {
	background:						#c4e0ff url('/images/icons/information_big.png') 10px center no-repeat;
	color:								#0066cc;
}

.flash_info a {
	color:								green; /* Otherwise you can't see it's a link */
}

.flash_notice {
	background:						#ccffcc url('/images/icons/tick_big.png') 10px center no-repeat;
	color:								green;
}

/* ###################################### Header ######################################## */

#header {
	height:								55px;
}

	#header #logo {
		margin:								0;
		float:								left;
		margin-top:						2px;
	}

	#header #logo a {
		width:								177px;
		height:								55px;
		display:							block;
		text-indent:					-1234px;
		background: 					url('/images/logo.png') no-repeat;
	}
	
	#header #menu {
		font-weight:					bold;
		margin-top:						14px;
		line-height:					24px; /* Cool trick to vertically center-align the connection button */
	}
	
		#header #menu ul {
			float:								right;
		}
		
			#header #menu ul li {
				background:						none;
				padding:							0;
				float:								left;
				list-style-type:			none;
				list-style-image:			none;
				margin:								0 0 0 30px;
			}
			
			#header #menu ul li.end {
				margin-left:					0;
			}

/* #################################### Headline ##################################### */

#headline {
	background:						#005cb8;
	padding:							10px;
	color:								white;
}

	#headline h1 {
		font-size:						24px;
	}
	
	#headline a {
		color:							#b3cfeb;
	}

/* #################################### Sidebar ##################################### */

.sidebars {
	width:								280px;
	float:								right;
}

/* #################################### Admin #################################### */

#admin {
	background:						#ffdfe0;
	padding:							5px;
}

#admin a {
	color:								red;
}

/* #################################### Content #################################### */

#content {
	overflow:							hidden;
	padding-top:					20px;
}

.content_with_sidebars {
	overflow:							hidden;
	width:								670px;
}

	.content_with_sidebars h1 {
		margin:							0 0 15px 0;
	}
	
.content_with_sidebars p {
	text-align:						justify;
}

/* #################################### Pagination #################################### */

#paginations {
}

	#paginations .pagination {
		width:							250px;
		padding:						0 18px 0 18px;
	}

	#paginations .next {
		float:							left;
		background:					url("/images/icons/navigation_next.png") no-repeat 0 3px;
	}
	
	#paginations .previous {
		float:							right;
		text-align:					right;
		background:					url("/images/icons/navigation_previous.png") no-repeat 100% 3px;
	}

#pagination_index .pagination {
	text-align:						center;
	width:								100%;
}

/* ##################################### Footer ##################################*/

#footer {
	margin-top:						20px;
	padding:							20px;
	font-size:						12px;
	text-align:						center;
	background:						#dcdcdc;
}

	#footer a {
		color:							#555;
		text-decoration:		underline;
	}

/* ##################################### Misc ##################################*/

.small {
	font-size:						12px;
}