/*===== Layout Variables and @media-Specific Settings =====*/
:root	{
	--width:				100%;
	--outer_radius:			1.5vw;
	--inner_radius:			1.0vw;
	--border_width:			0.5vw;
	--video_width:			calc(	100%  - 32px			);
	--video_height:			calc( (	100vw - 32px )*0.5625	);
	--menu_height:			4.75vw;
	--menu_width:			16.72vw;
}
div.menuitem		img	{	height:	4vw;	margin-top:	0.5vw;	margin-bottom:	0.5vw; 
	border-radius: 0 !important;	}
div.footer			img	{	height:	3vw;	margin:		0.5vw;	}
div.personal			{	height:	14vw; 					}
div.page	{
	background:				url( './images/header.svg' ) top left no-repeat;
	background-size:		calc( var( --width ) - var( --border_width )*2);
	background-position-x:	var( --border_width );
	width:					var( --width );
	margin:					var( --border_width ) auto 0 auto;
}

@media screen and ( max-width: 600px ) {
	:root	{
		--outer_radius:		4vw;
		--inner_radius:		3vw;
		--border_width:		1vw;
		--menu_height:		9.5vw;
	}
	div.menuitem	img	{	height:	6vw;	margin-top:	1vw;	margin-bottom:	1vw;	}
	div.footer		img	{ 	height:	6vw;	margin:		1vw;	}
	div.personal		{	height:	13.5vw;						}
	div.page	{
		background:			url( './images/header_compact.svg' ) top left no-repeat;
		background-size:	calc( 100% - var( --border_width )*2);
		background-position-x:	var( --border_width );
		width:				auto;
		margin:				var( --border_width ) 8px 0 8px;
	}
}

@media screen and ( min-width: 1072px ) {
	:root	{
		--width:			1056px;
		--outer_radius:		19px;
		--inner_radius:		13px;
		--border_width:		6px;
		--video_width:		1024px;
		--video_height:		576px;
		--menu_height:		50px;
		--menu_width:		176px;
	}
	div.menuitem	img	{	height:	42px;	margin-top:	var(--border_width);	margin-bottom:	var(--border_width);	}
	div.footer		img	{	height:	38px;	margin:		6px;	}
	div.personal		{	height:	150px;						}
}

@media screen and ( min-width: 1440px ) {
	div.menu			{
		float:				left;
		margin-top:			var( --border_width )	!important;
		margin-left:		calc( 0px - ( var(--menu_width) + var( --border_width ) / 2.0 ) )	!important;
		width:				var( --menu_width );
	}
	div.menuitem		{
		display:			block	!important;
		width:				100%	!important;
		height:				auto	!important;
	}
	div.menuitem	img	{	width:	calc( var(--menu_width) - var( --border_width ) * 2.0 ) !important; height:	auto	!important;	}
}

@media screen and ( min-width: 1920px ) {
	:root	{
		--width:			55vw;
		--outer_radius:		1vw;
		--inner_radius:		0.7vw;
		--border_width:		0.33vw;
		--video_width:		calc(	55vw - 32px			);
		--video_height:		calc( (	55vw - 32px )*0.5625	);
		--menu_height:		2.6vw;
		--menu_width:		9.15vw;
	}
	div.menuitem	img	{	height:	2.2vw;	margin-top:	0.34vw;	margin-bottom:	0.34vw; }
	div.footer		img	{	height:	2vw;	margin:		0.34vw; }
	div.personal 		{	height:	7.75vw;						}
}

/*===== Main Layout =====*/
body					{
	background-color:		#fff;
	font-family:			'Trebuchet MS', Helvetica, sans-serif;
	margin:					0;
	padding:				0;
}

div.personal			{	margin-left: auto;	}
div.personal		div	{	padding: 0.25vw;	}

div.header				{
	background:				#3399ff;
	border-radius:			var( --outer_radius ) var( --outer_radius ) 0 0;
	margin-top:				var( --border_width );
	padding-top:			var( --border_width );
}

div.pagebody			{
	background:				url( './images/bg_overlay.png' ) bottom fixed no-repeat, url( './images/background_gradient.png' ) center repeat-x;
	background-size:		var(--width), auto;
	background-color:		#3399ff;
	border:					16px solid transparent;
	border-image-source:	url( './images/paperedge_border.png' );  
	border-image-repeat:	repeat round;
	border-image-slice:		50;
	border-image-width:		50px;
	overflow:				auto;
}

div.menu				{	
	padding:				0;
	font-size:				0;
	border-radius:			var( --outer_radius );
	background-color:		#1664BA;
	margin:					calc(	var( --border_width ) / 2.0 );
	margin-top:				0;
	margin-bottom:			var( --border_width );
}
div.menuitem { 
	display:				inline-block;
	margin-bottom:			0;
	position:				relative;
	width:					20%;
	text-align:				center;
	background-color:		#1664BA;
	border-radius:			var( --outer_radius );
}
div.menuitem.selected	{	background-color:	#FF9E00;	}
div.menuitem:not( .selected ):hover	{
	background-color:		#E66E00;				
}			}
div.menuitem:last-child {
	margin-right:			0;
	width:					25%;
	}
div.menuitem		a	{
	width:					100%;
	height:					100%;
	display:				block;
}

div.index				{
	font-size:				0;
	margin-bottom:			var( --border_width );
	
}
div.index:last-child	{
	margin-bottom:			0;
	
}
div.index			img	{
	width:					100%;
}

@media screen and ( max-width: 600px ) {
	div.menuitem, div.menuitem:last-child  {
		display:			block;
		width:				100%;
	}
	div.menuitem:last-child {
		margin-bottom:		0;
	}
	div.menu			{	margin-top:			3vw;	}
}
			
			
/*===== Text/Image Containers =====*/
div.container				{
	background-color:			#fff;
	border-radius:				var( --inner_radius );
	margin-bottom:				var( --border_width );
	padding:					var( --border_width ) var( --inner_radius );
	overflow:					auto;
}
.alt						{	background-color:	rgba(255,255,255,0.6) !important;	}
div.container span.header	{
	font-size:					24px;
	font-variant:				small-caps;
	display:					inline-block;
	font-weight:				bold;
	color:						#000;
	width:						100%;
}
div.container span.date		{
	font-size:					12px;
	float:						right;
	margin-top:					8px;
	margin-right:				8px;
	font-weight:				normal;
	color:						#000;
}
div.container:last-child	{	margin-bottom:				0;	}

/*===== Video Container =====*/
div.video {
	padding:				0 !important;
	width:					100%;
	height:					var( --video_height );
}
div.videoframe {
	z-index:				1;
	position:				relative;
	height:					calc( var( --video_height ) - var( --inner_radius )*2 );
	border:					var( --inner_radius ) solid transparent;
	border-image:			url( './images/video_border.svg' ) 50%;
	pointer-events:			none;
}
iframe {
	z-index:				0;
	position:				absolute;
	height:					var( --video_height );
	width:					var( --video_width );
	vertical-align:			bottom;
}

/*===== Footer =====*/
div.footer {
	margin: 				var( --border_width ) auto var( --border_width ) auto;
	text-align: 			center;
}

/*========== footer elements ==========*/
.cmexcopyright {
	font-size: 80%;
}
.cmexcopyright a {text-decoration: none}
.cmexcopyright a:hover {text-decoration: none}

/*====================[ HTML Tags ]====================*/
a {text-decoration: none}
a:link {color: #A21F2C}
a:visited {color: #A21F2C}
a:hover {color: #DE5B68;}

a:hover img {filter: brightness(1.15);}

p { text-indent: 0.6cm; }
li p { text-indent: 0.6cm; }

pre { margin: 0; white-space: pre-wrap;}

/*====================[ Text Formatting Styles ]====================*/
.b {font-weight: bold;}
.u {text-decoration: underline;}
.s {text-decoration: line-through;}
.i {font-style: italic;}

.center{text-align: center;}
.text_right{text-align: right;}
.text_left{text-align: left;}


/*========== textarea elements ==========*/


div.gallery {
	background-color:#358;
	border-radius: var( --outer_radius );
	padding:var( --border_width );
	float:left;
	margin-right:var( --border_width );
	margin-bottom:var( --border_width );
	font-size:0;
}
.pagination{margin-bottom:12px}
/*========== other ==========*/
img {
	border-width:0;
	border-radius: var( --outer_radius );
}
div.content img, div.header img, div.gallery img, div.content_data img {
	border-radius: var( --inner_radius );
}
.imgborder {
	background-color:#358;
	border-radius: var( --inner_radius );
	padding:var( --border_width );
	font-size:0;
}
a .imgborder{background-color:#38F}
a .imgborder:hover,.gallery:hover{background-color:#FFF}
.imgborder img {border-radius: calc( var( --inner_radius ) - var( --border_width ) ) !important;}

table {border-spacing: 0;border:0;}
pre {
	background-color:rgba(255,255,255,0.9);
	border-radius: var( --inner_radius );
	padding:var( --border_width );
}
/*========== positioning ==========*/
.left {float:left; margin-right:10px}
div.header:last-child {margin-right:0}
.right {float:right; margin-left:10px}
.center {margin:0 auto;text-align:center}

/*========== footer elements ==========*/
footer {
	clear: both;
	font-size: 75%;
	text-align: center;
}

.cmexcopyright {
	font-size: 80%;
}
.cmexcopyright a {text-decoration: none}
.cmexcopyright a:hover {text-decoration: none}