/*
 * portfolio.css --
 *
 *      CSS file for the Portfolio page.
 *
 * Copyright (c) 2013 Peter Sevens, Sevens ICT.  All rights reserved.
 *
 */




/* First one already has 34px spacing for some reason...  Due to collapsed margins (bottom
 * of the one and top of the other) on the other ones?  Nope, the element above it has
 * only regular margins so the margin collapsing works differently than between the
 * individual portfolio items.
 *
 * NOTE: only works on IE9 and up but that's OK, it's just a minor visual glitch
 *       otherwise...
 *
 * NOTE: it's the second <div>, now that we have the '.nocss' fallback above it!  Needs a
 *       better fix but that's for later (see #24 on what and why).
 *
 * TODO: limit to portfolio page at the selector level too!?  Also, why needed at all??
 */
.fragment_target:nth-of-type( 2 ) {
	/* line-height - ( 2 * border-width ) */
	margin-top: 15px;
}




.portfolio_item {
	/* Color is an approximation of the rgba version.  It's picked from the browser
	 * window with the rendered rgba color, picked from the bottom of it's last
	 * occurence.
	 *
	 * TODO: compensate for this (somewhere in the whitespace)!!
	 */
	border: 1px solid #62798B;
	/* Regular text color with opacity of 0.4. */
	border-color: rgba( 234, 234, 234, 0.4 );  /* For sane browsers */
	border-radius: 7px;
	padding: 34px;  /* 2x line-height */
	/* Header has margin of its own already */
	padding-top: 0;
	/* NOTE: <p> has 17px margin of it's own, compensate for that.
	 * TODO: fix nicer, probably with a spacer container inside .portfolio_item, size
	 *       the same as .portfolio_item (sans border) and using *margin* in there so
	 *       it all collapses nicer.  Needs a bit of extra elements but can't see
	 *       another (easy) way to fix this (gently, esp. wrt. CSS).
	 */
	padding-bottom: 17px;
	margin: 49px 0;  /* 3x line-height - ( 2 * border-width )*/
	/* Ensure there are no elements floating into the container accidentally
	 * (catch-all)
	 */
	clear: both;
	/* Enable absolute positioning within the container */
	position: relative;
	/* Ensure floating image fits with all the minimal spacing no matter how small the
	 * text is.
	 * Needs: header block, image itself (119px) and bottom spacing
	 * Formula:
	 *   image_height + header size
	 *   Note: header is 5x line-height (text itself and 2x line-height spacing below
	 *         and 2x line-height above (it's explicitly ignored in this box!)), rest
	 *         is padding on this box already so not an issue
	 *   119 + ( 34 + 17 + 34 ) = 204
	 *
	 * WARNING: this assumes images are never larger than 119px, otherwise it fucks up
	 *          the spacing around it (or even worse, the image might flow outside of
	 *          the bottom of the container if it's sufficiently large.  Avoiding that
	 *          requires a '<div class="clear"/>' at the bottom of each container but
	 *          that makes enforcing the proper spacing on the bottom of the container
	 *          tricky, since it needs to work for both the 'text too small' and 'text
	 *          sufficiently large' cases).  Might want to try again once a proper
	 *          spacer sub-container is implemented though.
	 *
	 * TODO: still too much spacing when text is too short *and there's no
	 *       illustration at all*...  Although *a* min height is probably a good idea
	 *       (though not necessarily this one), at least the page_nav should fit next
	 *       to the box!  Also, once one's found, use that as the regular (and
	 *       only!?) height of .page_nav itself?
	 */
	min-height: 204px;
	/* Adjusted for lower padding-bottom on this element... */
	min-height: 221px;
}

/* TODO: in case of :target, drop it (w. fade-out) after a while.  At least 30 sec though.
 *
 * NOTE: a copy of this selector and it's content exists in ie8_fixes.css, try and keep
 *       that one in sync!  See comments in that file for more information.
 */
.portfolio_item:hover,
.portfolio_item:active,
/* The actual fragment-id target-element is right above it to allow for some spacing but
 * it should look like the container was actual the target...
 *
 * TODO: use '*[id^="portfolio-"]'?
 */
*:target + .portfolio_item {
	/* Same as navigation box */
	background: url( '../img/background-navigation_container.png' ) repeat;
	background: rgba( 20, 24, 26, 0.129 ); /* For sane browsers. */
	/* TODO: lighter version?  Roughly same diff as between regular border and
	 *       text?
	 */
	/* Rough estimate of below's rgba color */
	border-color: #447092;
	/* Link proper with only alpha changed */
	border-color: rgba( 108, 177, 230, 0.5 );
	/* 0.5x line-height */
	/* TODO: moot fallback?  Any browser supporting box-shadow but not rgba? */
	box-shadow: 0 0 8px 0 #447092;
	box-shadow: 0 0 8px 0 rgba( 108, 177, 230, 0.5 );  /* For sane browsers */
}


/* Only the first header and only if it's the first *visual* element.
 * NOTE: there may be a page_navigation container in front of it (so it's positioned
 *       better for non-CSS UAs) but that's rendered outside of the box.
 */
.portfolio_item > h2:first-child,
.portfolio_item > .page_navigation:first-child + h2 {
	text-align: center;
	/* TODO: Fix by container padding? */
	margin-top: 34px;  /* 2x line-height */
	margin-bottom: 34px;  /* 2x line-height */
/* 	background-color: rgba( 255, 255, 255, 0.1 ); */
}

.portfolio_item img.illustration {
	float: right;
	margin-left: 34px;  /* 2x line-height */
	margin-bottom: 34px;  /* 2x line-height */
	/* BUG: causes issues in Firefox (makes the image disappear sometimes upon
	 *      :hover); disabled for now.
	 */
/* 	border-radius: 4px; */
	/* It's a bit more subtle but might make the images too vague on a glance, and
	 * doesn't work on touch-devices (the 'view it properly by hovering' part).
	 * Disable for tables?  Or just screw them for now?  Will be fixed with proper
	 * gallery/lightbox anyway.
	 * Alt is to add a link in the section itself to make it a :target one, probably
	 * a '#' sign, left-floating in the header row, with a dimmed text (same opacity
	 * as snote on the top?), possibly useful to have anyway.
	 */
	opacity: 0.3;
}

.portfolio_item:hover img.illustration,
.portfolio_item:active img.illustration,
*:target + .portfolio_item img.illustration {
	opacity: 0.85;
}


/* 'Used technology(/-ies) logos' container
 *
 * TODO: improve CSS for current situation (inside header).  Make header relative,
 *       right: 0; margin-bottom: -3px; (last one accounts for slightly larger images than
 *       line-height).
 */
.tech_logos {
	display: block;
	position: absolute;
	right: 34px;
	/* 2x line-height (34px).  Minus 5 for slightly larger than line-height logos. */
	top: 29px;
	/* Shared on both sides */
	top: 32px;
	text-align: center;
	opacity: 0.2;
}

/* TODO: just merge with :hover (et al) above? */
.portfolio_item:hover .tech_logos,
.portfolio_item:active .tech_logos,
/* The actual element item is right above it to allow for some spacing but it should look
 * like the actual container was the target...
 *
 * TODO: use '*[id^="portfolio-"]'?
 */
*:target + .portfolio_item .tech_logos {
	opacity: 0.85;
}

.tech_logos img {
	/* line-height */
	margin-left: 17px;
/* 	background-color: red; */
}


/* TODO: .page_navigation must always be at least as large as this one!  Calculate for
 *       now (4 rows with 4x spacing, all heights are known) but fix dynamically later
 *
 * TODO: colors and other generic stuff to main class (for this site anyways), positioning
 *       to .portfolio_item specific situation.
 *
 * TODO: is some of this more generic?  If so, move that to default.css so it can be used
 *       more.
 */
.page_navigation {
/* 	background-color: rgba( 255, 255, 255, 0.1 ); */
/* 	background-color: rgba( 255, 0, 0, 0.91 ); */
/* 	box-sizing: border-box; */
	display: block;
	position: absolute;
	/* Fake *proper* 'height: 100%' (regardless of padding or borders).  :hover needs
	 * to work on the whole right-side of the box too (even if only the 'this' link is
	 * actually shown), regardless of the actual height of the box, or otherwise it
	 * behaves counter-intuitively.
	 */
	top: 0;
	bottom: 0px;
	/* Take up all the empty space at the right */
	width: 22px;
	/* Left-over space on the right (taking this element's 1px border into account) */
	right: -35px;
	/* 6px spacing on each side but minus 1px for border width */
	padding: 0 5px;
	border: 1px solid transparent;
/* 	border-color: green; */
	/* Formula: ( 2 * line-height ) - ( margin-top of 'a' below +
	 *          padding-top of 'a' below ) - border-top - 1px (for some reason)
	 *
	 * NOTE: this position has been visually confirmed to align with the text inside
	 *       the box!
	 */
	padding-top: 13px;
}

/* TODO: use same link spacing as for main nav?  Also has the 'broken' line-spacing on
 *       it!!  Easier and more in sync
 */
.page_navigation a {
	/* Rough approximation */
	color: #1B486B;
	/* Regular link color but with low opacity */
	color: rgba( 108, 177, 230, 0.15 );
	/* Parent width minus our border */
	width: 20px;
	text-align: center;
/* 	background-color: rgba( 255, 255, 255, 0.1 ); */
/* 	background-color: rgba( 255, 0, 0, 0.91 ); */
	border: 1px solid transparent;
/* 	border-color: red; */
	/* Make space for negative margin-top of item below...
	 * Formula: ( 2 * line-height ) - ( padding-top + padding-bottom ) -
	 *          ( border-top + border-bottom )
	 */
	margin-top: 6px;
	padding: 13px 0;
	/* By default, hide all except the first */
	display: none;
	border-radius: 4px;
}

/* TODO: for :active too? */
.page_navigation a:hover {

	text-decoration: none;
	/* Rough approximation */
	background-color: #234560;
	font-weight: bold;
	/* Regular link color */
	color: #6CB1E6!important;

	/* Same as .portfolio_item :hover */
	background: url( '../img/background-navigation_container.png' ) repeat;
	background: rgba( 20, 24, 26, 0.129 ); /* For sane browsers. */
	/* Rough estimate of below's rgba color */
	border-color: #447092;
	/* Link proper with only alpha changed */
	border-color: rgba( 108, 177, 230, 0.5 );
	/* Same as portfolio_item container, but with a lower spread (much smaller box) */
	/* TODO: moot fallback?  Any browser supporting box-shadow but not rgba? */
	box-shadow: 0 0 3px 0 #447092;
	box-shadow: 0 0 3px 0 rgba( 108, 177, 230, 0.5 );  /* For sane browsers */

	/* Same as header link but with slightly more spead */
	/* TODO: slightly lighter color?  For header too?  Too unnoticable with :hover bg on most browsers */
	text-shadow: #34536F 1px 1px 6px;
	text-shadow: rgba( 60, 96, 128, 0.8 ) 1px 1px 5px; /* RGBA variant for supporting browsers */

}

/* 'Hash' link should always be visible, needed for touch! (workaround for no :hover) */
/* TODO: only on touch devices?? */
.page_navigation a:first-of-type {
	display: block;
}

/* Only show nav links on :hover
 *
 * TODO: is this selector strict enough?
 *
 * NOTE: a copy of this selector and it's content exists in ie8_fixes.css, try and keep
 *       that one in sync!  See comments in that file for more information.
 */
.portfolio_item:hover .page_navigation a,
.portfolio_item:active .page_navigation a,
/* The actual element item is right above it to allow for some spacing but it should look
 * like the actual container was the target...
 *
 * TODO: use '*[id^="portfolio-"]'?
 */
*:target + .portfolio_item .page_navigation a {
	display: block;
}

/* TODO: also on :active and :target?  Simpler, nicer and probably better for touch (esp. wrt discoverability) */
.portfolio_item:hover .page_navigation a {
	/* Rough approximation */
	color: #346992;
	/* Higher alpha value on :hover */
	color: rgba( 108, 177, 230, 0.3 );
}




/* EOF */