/*
 * default.css --
 *
 *      Main CSS file.
 *
 * Copyright (c) 2012, 2013 Peter Sevens, Sevens ICT.  All rights reserved.
 *
 */




/* Basic elements */


html,
body {

	/* Use darkest background-gradient color as default. */
	background-color: #004174;
	color: #EAEAEA;
	font-size: 13px;
	/* Use same line-height everywhere to ensure proper alignment */
	line-height: 17px;
	text-align: justify;

	background-image: url( '../img/background-full.png' );
	background-repeat: repeat-x;

}

h1,
h2,
h3,
h4,
h5,
h6 {
	/* TODO: color somewhere between text- and (net!) bg-color? */
	text-shadow: #727272 1px 1px 2px;
	text-shadow: rgba( 114, 114, 114, 0.8 ) 1px 1px 3px; /* RGBA variant for supporting browsers */
}

a,
a:link,
a:active,
a:visited {
	color: #6CB1E6;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

/* Different text color needs different shadow color. */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	/* Same deviation as on regular header shadow color (roughly RGB values divided
	 * by 2)
	 */
	text-shadow: #34536F 1px 1px 2px;
	text-shadow: rgba( 60, 96, 128, 0.8 ) 1px 1px 3px; /* RGBA variant for supporting browsers */
}

pre {
	/* TODO: resets.css? */
	overflow: auto;
}


	/* Alignment of regular elements */

	h1 {
		font-size: 16px;
/* 		background-color: rgba( 0, 255, 0, 0.5 ); */
	}
	h1:first-line {
/* 		background-color: rgba( 0, 0, 255, 0.5 ); */
	}
	h2 {
		font-size: 15px;
	}
	h3 {
		font-size: 14px;
	}
	h4,
	h5,
	h6 {
		font-size: 13px;
	}

	/* Use same margin on most block-elements that (can) directly contain text */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	dl,
	ol,
	ul {
		/* Use (multiple of) line-height for vertical spacing */
		margin: 17px 0;
	}

	p {
/* 		background-color: rgba( 126, 0, 0, 0.3 ); */
		padding: 0!important;
	}

	dl,
	ol,
	ul {
		/* TODO: resets.css? */
		padding: 0 default;
/* 		background-color: rgba( 0, 0, 255, 0.3 ); */
	}

	/* Horizontal spacing alignments */
	ol,
	ul {
		/* NOTE: this is too small for 3-digit numbers on the list items... */
		padding-left: 34px;  /* Multiple of line-height */
	}
	dl dd {
		margin-left: 34px;  /* Multiple of line-height, same as listings */
	}
	blockquote {
		margin: 0 34px;  /* Multiple of line-height, same as listings */
	}


	/*
	 * Some testing.  Keeping it for now, need to decide if it needs further tuning.  Like the
	 * basics but need to see it on some proper text to be sure.
	 */

	/* Give largest headings some extra spacing */
	h1,
	h2 {
		margin-top: 34px;  /* 2x line-height */
		margin-bottom: 17px;  /* line-height */
	}
	h3,
	h4,
	h5,
	h6 {
		margin-top: 17px;
		margin-bottom: -17px;  /* Stick directly to paragraph */
	}

	/* Reduce spacing on double heading */
	h1+h2 {
		margin-top: 17px;
	}

	/* /Alignment of regular elements */


/* /Basic elements */




/* Reusables */

/* Class for elements that only exist for non-CSS UAs */
.nocss {
	display: none;
	visibility: hidden;
}

/* Class for elements that should be cleared of floats.
 *
 * NOTE: this is just a shorthand for 'clear: both;'.
 */
.clear {
	clear: both;
}

/* Generic class for various notes, short info text, etc.  Displayed in a tinier font and
 * with a darker text-color.
 */
.note {
	font-size: 85%;
	/* Rough approximation of rgba color */
	color: #94A6B3;
	/* Regular text color with 0.6 opacity */
	color: rgba( 234, 234, 234, 0.6 );
}

/* Generic class for a target element for the fragment identifier of a URL.  Usually an
 * empty element who's sole purpose is being the target of a fragment id.
 *
 * Especially useful when the position that the fragment id points to should be a
 * (slightly) different one than the actual content it targets.  E.g. to allow for some
 * spacing to make all the visual effects around the target (or its container) visible
 * and/or for easier readability of the target content.
 */
.fragment_target {
	float: left;
	/* Always take up visual space so positioning works predictable across browsers */
	/* TODO: min-width and height?  Might contain something in some cases! */
	width: 1px;
	height: 1px;
	/* TODO: move to separate class (probably .spaced), to be more clear on the
	 *       intended behavior?  Also probably not always needed.
	 */
	margin-top: -17px;
/* 	background-color: white; */
}

/* /Reusables */




/* Basic containers */

/* TODO: unneeded? */
#container {
	position: relative;
	width: 100%;
	height: 100%;
/* 	background-color: orange!important; */
/* 	border: 2px solid green; */
}

#page_container {

	/* TODO: too wide for 1024x768! */
	width: 1024px;
	/* TODO: add (much) larger margin at bottom? */
	margin: 10px auto;
	overflow: auto;  /* Catch-all */

/* 	background-color: #14181A; */
/* 	opacity: 0.44; */
	background: url( '../img/background-page_container.png' ) repeat;
	/* For rgba-supporting browsers */
	background: rgba( 20, 24, 26, 0.44 );
	/* TODO: apply to *? */
	border-radius: 7px;
	/* TODO: use text color as border-color? */
	border: 1px solid #6E99B9; /* Color picked in Gimp somewhere at the top */
	border-color: rgba( 255, 255, 255, 0.4 ); /* RGBA variant for supporting browsers */

}

/* /Basic containers */




/* #page_container details */

#page_container #header_container {
/* 	background-color: green; */
	height: 295px;
/* 	border-bottom: 1px solid rgba( 255, 255, 255, 0.44 ); */
	/* Mimic logo color */
	border-bottom: 1px solid #2C5370; /* Color picked in Gimp from logo */
	/* Using border-bottom-color doesn't work properly in IE 6 and 7 (falls back to
	 * browser default instead of the above defined border-bottom's color, even though
	 * using the exact same code and structure for footer's border-top generates a
	 * color somewhere inbetween IE's default (white) and the fallback color)...
	 */
	border-color: rgba( 224, 232, 238, 0.14 ); /* For sane browsers */
}

#page_container #header_container img {
	margin: 31px;
/* 	background-color: rgba( 192, 192, 0, 0.3 ); */
}

#page_container #body_container {
	/* TODO: old IEs? */
	/* TODO: do use a min-height (should result in no scrollbar at a good minimal
	 *       resolution though) and screw IE6 with this, it's OK if it shows a shorter
	 *       page, no content gets lost (and it's just a visual effect anyway).
	 */
/* 	min-height: 600px; */
/* 	background-color: red; */
/* 	clear: both; */
/* 	margin: 0; */
/* 	padding: 0; */
	/* NOTE: put the border on #body_container so #footer_container can use margins
	 *       for the edge spacing (otherwise it'd need an inner/outer container hack
	 *       like the content box).
	 */
	/* Mimic logo color */
	border-bottom: 1px solid #2C5370; /* Color picked in Gimp from logo */
	/* See comment on #header_container for why it's implemented this way */
	border-color: rgba( 224, 232, 238, 0.14 ); /* For sane browsers */
/* 	clear: both; */
/* 	position: relative; */
}

#page_container #footer_container {
	margin: 17px;
	/* Half of line-height */
/* 	padding: 8px; */
	text-align: center;
/* 	color: rgba( 224, 232, 238, 0.14 ); */
	/* From original design */
	color: #8295A4;
	/* Slightly darker variant */
/* 	color: #415E75; */
}


	/* #body_container details */

	#page_container #body_container #navigation_container {
		width: 171px;
		float: left;
/* 		background-color: rgba( 0, 0, 0, 0.4 ); */
		overflow: auto;  /* Catch-all */
	}

	#page_container #body_container #content_outer_container {
		/* Same as parent */
/* 		min-height: 600px; */
		/* Same as #navigation_container's width (+1px for border compensation) */
		/* TODO: this makes the container 171px smaller *on the right side* too,
		 *       in konqueror and webkit (rekonq) at least, don't know why.
		 *       Seems to work without it but investigate some...
		 *       Also, according to comment above, it should actualy be *172* px!
		 */
/* 		margin-left: 171px; */
/* 		margin-right: 171px; */
/* 		border-right: 1px solid; */
		/* Mimic logo color */
		border-left: 1px solid #2C5370; /* Color picked in Gimp from logo */
		/* See comment on #header_container for why it's implemented this way */
		border-color: rgba( 224, 232, 238, 0.14 ); /* For sane browsers */
/* 		background-color: rgba( 0, 0, 255, 0.075 ); */
		/* TODO: seems to be required for proper positioning of border and
		 * #body_container boxes.  Why?
		 */
		overflow: auto;  /* Catch-all */
	}

	#page_container #body_container #content_inner_container {
		margin: 34px;
/* 		background-color: blue!important; */
	}

	/* /#body_container details */


	/* #footer_container details */

	/* Blend in */
	#page_container #footer_container a,
	#page_container #footer_container a:visited,
	#page_container #footer_container a:link {
/* 		color: rgba( 224, 232, 238, 0.14 ); */
		color: #8295A4;
	}

	/* /#footer_container details */


/* /#page_container details */




/* Navigation specifics */


/* Put .navigation first for IE6... */
/* TODO: ( .menu padding + .menu margin + .menu li margin + .menu li a padding ) should be
 *       34!  This way the text starts 34px from the left-edge, as it should.
 */
#navigation_container .navigation.menu {
	background: url( '../img/background-navigation_container.png' ) repeat;
	/* For rgba-supporting browsers.
	 * Same base-color as #page_container but different opacity
	 */
	background: rgba( 20, 24, 26, 0.129 );
	/* Distance from container edge to background-box's edge */
	margin: 17px;
	/* Distance from background-box's edge to :hover background's edge */
	/* NOTE: was 4px but changed to 5px as a quick fix for the fact that the text
	 *       started 1px too high.  4px looks better though so should find a better
	 *       solution that has both.
	 */
	padding: 5px;
	border-radius: 4px;
}

#navigation_container .navigation.menu li {
	/* Distance from background image to actual text */
/* 	margin: 12px; */
	/*
	 * Version for 7px padding on the link (formula: (2x line-height -
	 * line-height self a) - (padding self a * 2)).  Distance between two
	 * li elements should be 2x line-height.
	 */
	margin: 7px;
	display: block;
}

#navigation_container .navigation.menu li a {
/* 	display: block; */
	/*
	 * Distance from background image to actual text
	 * Half of line-height
	 */
	padding: 7px;
	/* TODO: why??  Probably needs padding to get same spacing at left and right side too */
	line-height: 1em;
/* 	background: rgba( 0, 0, 0, 0.1 ); */
}

/* IE6: just put this on a, with less padding if needed? */
#navigation_container .navigation.menu li a:hover,
#navigation_container .navigation.menu li a.active {
	background: url( '../img/background-navigation_hover.png' ) repeat-x;
	/* Temp work-around for FF until bg size is final */
/* 	background-image: -moz-linear-gradient( top, rgba( 23, 100, 159, 0.655 ), rgba(0, 61, 113, 0.655 ) ); */
	border-radius: 4px;
}

#navigation_container .navigation.menu li a.active {
	font-weight: bold;
}

#navigation_container .navigation.menu li a {
	display: block;
/* 	background-color: rgba( 0, 0, 200, 0.3); */
/* 	padding: 0; */
/* 	margin: 0; */
}

#navigation_container .navigation.menu li a,
#navigation_container .navigation.menu li a:link,
#navigation_container .navigation.menu li a:visited {
	/* TODO: use .blend_in for this? */
	color: #EAEAEA;
	text-decoration: none;
}


/* /Navigation specifics */




/* Message specifics */

/* Info message on browser support for IE6 users */
.message.info {
	background-color: #FFFFC0;
	color: #000;
	text-align: center;
	/* Same as header logo */
	padding: 12px 31px;
}

/* /Message specifics */




/* EOF */