@charset "UTF-8";
@import url('global.css.php');

/***** Content container with footer ******************************************/

body
{
	background-image:url('./graphics/content_background.png'),url('./graphics/body_texture.jpg');
	background-position:center top,top left;
	background-repeat:repeat-y,repeat;
	text-align:center; /* center content container */
}

div#content_container
{
	text-align:left; /* restore default alignment */
	display:inline-block;
	min-height:100%;
	max-width:680px;
	position:relative; /* so footer can be placed in relation to this */
	
	margin:0 1%;
	background-image:url('./graphics/cte_background_logo.png');
	background-position:center 0.667em;
	background-size:100%;
	background-repeat:no-repeat;
}

main
{
	margin-top:1em; /* so first block element in main is not required to have a top margin */
	margin-bottom:2.5em; /* approximate footer height + margin */
}

footer
{
	white-space:nowrap;
	overflow:hidden;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	
	color:rgb(64,64,64);
	border-top:1px solid rgb(64,64,64);
	text-align:right;
	font-size:0.75em;
	padding:0.33em 0;
}

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

h1
{
	font-size:inherit; /* so em's relate to the standard font size */
	margin:0.667em 0 0 0;
	padding:0 10px;
	text-align:center;
}

h1 img { width:100%; height:auto; padding-top:4.394%; }

/***** Navigation links *******************************************************/

nav ul
{
	list-style-type:none;
	margin:0;
	padding:0;
	text-align:center;
	
	font-family:"Courier New",Verdana,Arial,sans-serif;
	font-weight:bold;
}

nav li
{
	display:inline-block;
	
	margin:0.33em;
}

nav a
{
	display:inline-block;
	
	padding:0.5em;
	background-color:black;
	border:1px solid rgb(102,102,255);
}

nav a:hover,nav a:focus { color:black; background-color:rgb(102,102,255); }
nav a:active { color:black; background-color:rgb(160,160,255); }

/***** Social-media logo links ************************************************/

section#logo_links ul { text-align:center; }

/***** Current page headline **************************************************/

h2
{
	color:rgb(102,102,255);
	text-align:right;
	font-style:italic;
	letter-spacing:normal;
	margin:0;
}

/***** Content ****************************************************************/

main section+section,main article+article { margin-top:2.33em; }

/***** Wide format (level 1) **************************************************/

@media (min-width: 680px)
{
	dt { float:left; }
	dt,dd { margin-top:0.33em; }
	dt:first-child,dd:first-of-type { margin-top:0; }
}

/***** Wide format (level 2) **************************************************/

@media (min-width: 1020px)
{
	/* Navigation links */
	nav
	{
		position:absolute;
		top:2em;
		right:740px;
		
		border:2px solid rgb(102,102,255);
	}
	
	nav li { display:block; margin:0; }
	nav a { display:block; border-style:none; }
	nav li.new_group a { border-top:1px dotted rgb(102,102,255); }
	nav li.new_group:first-of-type a { border-top-style:none; }
	
	/* Social-media logo links */
	section#logo_links
	{
		position:absolute;
		top:2em;
		left:740px;
	}
	
	section#logo_links ul { text-align:left; }
	section#logo_links li { display:block; margin:1em 0 0 0; }
	section#logo_links li:first-child { margin-top:0; }
	section#logo_links img, section#logo_links a { vertical-align:bottom; } /* fix space problem in IE */
	
	/* Current page headline */
	h2 { min-height:65px; /* no content in main over CtE logo */ }
}