@charset "utf-8";

/* (c) Ro York consulting 2014+
-------------------------------------------------------------------------------------------*/

/* Fonts 
-------------------------------------------------------------------------------------------*/
	@import url( /css/fntTitillium.css );
	@import url( /css/fntSansumi.css );

	.thin, span.charCount, #tagline, #botBar #nav p
		{ font-family: 'TitilliumText22LThin', Arial, sans-serif; }	
	.light, h3, table h5, th, #testimonials p.a
		{ font-family: 'TitilliumText22LLight', Arial, sans-serif; font-weight: normal; }	
	.base, body, input, textarea, select, #caseEG h3
		{ font-family: 'TitilliumText22LRegular', Arial, sans-serif; }	
	.bold, b, #subBot, #testimonials p.b
		{ font-family: 'TitilliumText22LMedium', Arial, sans-serif; font-weight: normal; }	
	.bolder, strong, label, table h4, .usm, #topBar h2
		{ font-family: 'TitilliumText22LBold', Arial, sans-serif; font-weight: normal; }	
	.heavy, h1, h2, #seeAlso h4
		{ font-family: 'TitilliumText22LXBold', Arial, sans-serif; font-weight: normal; }	

	p.dropCap:first-letter 
		{ font-family: 'TitilliumText22LXBold', Arial, sans-serif; font-weight: normal; }	
		
	#background { font-family: 'SansumiRegular', Arial, sans-serif; font-size: 300%; }


/* Globals
-------------------------------------------------------------------------------------------*/
	* { margin: 0; padding: 0; font-size: 100%; }
	body { margin: 20px auto; margin-top: 0; width: 800px; }
	h1 { font-size: 200%; padding-top: 30px; }
	h2 { font-size: 165%; }
	h3 { margin-top: 1ex; font-size: 180%; }
	table h4 { font-size: 135%; }
	table h5 { font-size: 120%; }
	table p { margin-top: 0; margin-bottom: 1ex; font-size: 100%; }
	th { vertical-align: top; text-align: left; }

	p { margin-top: 1em; line-height: 1.4; font-size: 120%; }
	h3 + p { margin-top: 0.5ex; }
	ul { list-style: none; }
	li { margin-bottom: 1ex; line-height: 1.4; 
		background: url( /img/widg/bullet.png ) 0 0.5ex no-repeat; list-style-position: outside; 
		padding-left: 1.5em; }
	a { text-decoration: none; border-bottom: 2px dotted; }
	a:hover { border-bottom-style: solid; }
	
	fieldset { margin-bottom: 2em; border: 1px solid silver; border-radius: 6px; }
	legend { margin-left: 12px; font-size: 1.2em; }
	legend + p { margin-top: 0; margin-left: 14px; font-size: 0.8em; }
	fieldset label:not(.radio), fieldset label.radio span 
		{ display: block; float: left; margin-top: 1ex; width: 200px; text-align: right; padding-right: 15px; }
	fieldset input, fieldset textarea, fieldset select { margin-top: 1ex; }
	fieldset .radio input { margin-top: 1.5ex; }
	fieldset input[type=text], fieldset input[type=password], fieldset textarea, fieldset select { width: 400px; }
	p.cue { margin: 1ex 1em 1ex 215px; line-height: 1em; font-size: 0.85em; }
	input.skinny { width: 2em; }
	fieldset br { clear: both; }

	span.cke_skin_kama + p, fieldset + p { line-height: 1; font-size: 80%; }
	span.cke_skin_kama + p { margin-top: 0.2ex; }
	fieldset + p { margin-top: -2em; }


/* Colours
-------------------------------------------------------------------------------------------*/
	/* text */
	html { color: #444; }
	.colourMain, h2, h3, table h5, a, #subBot, #nameBlock
		{ color: #588c34; }
	.colourContrast, h4, table h4, th, .cue, p.dropCap:first-letter, #signIn legend, #cases strong, #seeAlso h4
		{ color: #f69914; }
	h1, .usm, #topBar h2 { color: white; }
	h1, #topBar h2 { text-shadow: 0 -1px rgba( 0, 0, 0, 0.5 ); }
	#background { color: #bcdda5; }
	
	/* backgrounds */
	body { background: #deeed2; }
	.bgPale, #signIn fieldset, #signIn legend, #wordCloud, #seeAlso, #contact { background: #f0f7e9; }
	.bgReg, #topBar, #botBar { background-color: #82c157; }
	#main { background: white; }
	.usm { background-color: #f69914; box-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.5 ); }
	#botBar { 
		background: -moz-linear-gradient( top, #54a11f, #74c040, #386b15 );
		background: -webkit-linear-gradient( top, #54a11f, #74c040, #386b15 );
		background: -o-linear-gradient( top, #54a11f, #74c040, #386b15 );
		background: linear-gradient( top, #54a11f, #74c040, #386b15 ); }
	
	/* borders */
	a { border-color: #f69914; }
	#cases p.b, #testimonials p.b { border-color: #bcdda5; }
	#signIn fieldset, #signIn legend, #nameBlock a, #caseEG h3 { border-color: #588c34; }

		
/* Template items
-------------------------------------------------------------------------------------------*/
	#background { position: relative; }
#background { display: none; }
	#background div { position: absolute; text-align: center; }

	#bg01 { top: -10px; left: -200px; }
	#bg02 { top: 20px; right: -200px; }
	#bg03 { top: 80px; left: -150px; }
	#bg04 { top: 130px; right: -200px; font-size: 80%; transform: rotate( 345deg ); }
	#bg05 { top: 320px; right: -200px; font-size: 80%; }
	#bg06 { top: 240px; left: -200px; font-size: 80%; transform: rotate( 20deg ); }
	#bg07 { top: 440px; left: -220px; font-size: 80%; }
	#bg08 { top: 700px; right: -300px; }

	#foreground { position: absolute; z-index: 10; width: 800px; }

	#topBar, #botBar { z-index: 10; box-shadow: 1px 1px 3px rgba( 0, 0, 0, 0.5 ); }
	#topBar { position: relative; height: 180px; vertical-align: middle; border-radius: 0 0 24px 24px; }
	#topBar #spacer { display: inline-block; width: 30px; height: 120px; float: left; }
	#logo { box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5 ); border-radius: 12px; margin: 30px; }
	h1#tagline { padding: 0; font-size: 150%; }
	#topBar h2 { float: right; padding-top: 30px; margin-right: 30px; font-size: 150%; }
	#nameBlock { float: right; margin: 1ex 18px 0 0; text-align: right; font-size: 0.9em; }
	#nameBlock a { font-size: 0.9em; cursor: pointer; }
	#qr { position: absolute; bottom: 30px; right: 30px; width: 80px; height: 80px; }

	#main { margin: 3px 18px 0 18px; padding: 1em; }

	#botBar { clear: both; height: 36px; vertical-align: middle; border-radius: 24px; }
	#botBar #nav a, #botBar #nav p { display: block; padding: 4px 16px; height: 28px; line-height: 1.2; 
		font-size: 20px; color: white; 
		text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.5 ); }	
	#botBar #nav a { float: right; border: none; border-left: 1px solid rgba( 255, 255, 255, 0.5 ); 
		box-shadow: -1px 0 0 rgba( 0, 0, 0, 0.5 ); text-decoration: none; }	
	#botBar #nav p { float: left; margin-top: 0; }	
	#subBot { vertical-align: middle; padding: 0 30px; padding-bottom: 60px; }
	#copyright { float: left; font-size: 80%; }
	#devCred { float: right; font-size: 75%; }


/* Objects
-------------------------------------------------------------------------------------------*/
	/* home */
	#wordCloud { position: relative; margin-top: 1ex; width: 100%; height: 400px; font-size: 3em; }
	#wordCloud p { position: absolute; margin: 0; line-height: 1; }
	#wordCloud p { text-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.2 ); }
	
	/* skills */
	table.cv { width: 100%; }
	table.cv h5 { margin-bottom: 1ex; }
	table.cv th { width: 10%; font-size: 135%; padding-right: 1em; }
	
	/* cases */
	#cases h3 { font-size: 150%; }
	#cases p.a { font-size: 110%; }
	#cases p.b { margin-top: 0; margin-bottom: 1em; text-align: right; font-style: italic; 
		border-bottom-width: 2px; border-bottom-style: solid; padding-bottom: 1em; }
	#cases p.b:last-child { margin-bottom: 0; border-bottom: none; }

	#caseEG { margin-bottom: 2em; }
	#caseEG h3 { margin-top: 1em; font-size: 150%; 
		border-bottom-style: solid; border-bottom-width: 1px; }
	#caseEG p { margin-top: 1em; font-size: 105%; }
	#caseEG p + ul { margin-top: 1ex; }
	
	#seeAlso { width: 40%; float: right; margin: 1em 0 1ex 1em; padding: 12px; 
		border-radius: 12px; box-shadow: 2px 2px 3px #ccc; }
	#seeAlso h4 { font-size: 105%; }
	#seeAlso p { font-size: 90%; font-style: italic; }
	#seeAlso li { margin-top: 1ex; font-size: 90%; line-height: 1.2; 
		background: url( /img/widg/bulletSm.png ) 0 0.5ex no-repeat; }
	
	/* testimonials */
	#testimonials p.a { font-size: 135%; }
	#testimonials p.b { margin-top: 0; margin-bottom: 1em; text-align: right; font-style: italic; 
		border-bottom-width: 2px; border-bottom-style: solid; padding-bottom: 1em; }
	#testimonials p.b:last-child { margin-bottom: 2em; border-bottom: none; }
	
	/* contact */
	#contact { margin-top: 1em; float: right; font-size: 150%; }
	#contact th, #contact td { padding: 6px; padding-bottom: 1em; }
	#contact th { padding-right: 1em; }
	
	/* sign-in */
	#signIn fieldset { margin: 4em auto; border-width: 4px; border-style: solid; border-radius: 24px; 
		font-size: 120%; }
	#signIn legend { margin-left: 18px; text-transform: lowercase; padding: 6px; 
		border-width: 1px; border-style: solid; border-radius: 12px; }
	#signIn legend + p { margin-top: 1ex; ; }
	#signIn p:not(.cue) { margin-left: 24px; } 
	#signIn label { width: 150px; }
	#signIn input[type=submit] { margin: 1ex 0 1ex 165px; font-size: 1.6em; text-shadow: 0 -1px #888; }
	
	
	#signIn fieldset a { font-weight: bold; }
		
	/* backstage */
	#pageList { width: 100%; }
	#pageList td { padding: 1ex 0; }
	form h4 { margin-top: 1em; font-size: 1.2em; }
	form h3 + h4 { margin-top: 0.5ex; }
	span.charCount { font-size: 90%; color: #666; }
	p.msgPfW { margin: 0 0 0 100px; height: 24px; font-size: 80%; font-style: italic; }
	span.imgPfW { display: inline-block; width: 16px; height: 24px; vertical-align: middle; overflow: hidden; 
		background: url( /ckeditor4/skins/moono/icons.png ) 0 -692px; } 
	.usm { display: none; border-radius: 16px; padding: 0.5ex 0.5em; }

/*
p.msgPfW { margin: 0 0 0 145px; height: 24px; font-size: 80%; font-style: italic; }
span.imgPfW { display: inline-block; width: 16px; height: 16px; vertical-align: middle; overflow: hidden; 
	background: url( /ckeditor/skins/office2003/icons.png ) 0 -160px; } 
*/


/* Open
-------------------------------------------------------------------------------------------*/
	p.dropCap:first-letter { float: left; font-size: 3.5em; margin-right: 0.1em; line-height: 0.75em; 
		text-shadow: 2px 2px 3px #ccc; }
	p.draw { margin-top: 0; font-size: 135%; }


/* Screen size-specific
--------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width: 1000px) {
																	/* lose body background */
																	#background { display: none; }
		/* lose backdrop */
		body, #foreground { width: 100%; }
	
	}