/***************************************************************
*
* Panel Style Sheet
* Version 2-00
*
This style sheet has had the @font-face commands 
removed and this site now uses google fonts which 
are well supported. @font-face caused many 
secondary issues including that the fonts simply
did not appear rather than use the fallback fonts.

Also @media is ignored by some browsers so code 
has been added to support the multi columns that
means that if all the @media statements are 
ignored there is some fallback.

Fonts are still a problem in that the font is loaded in the 
html file but specified by the stylesheet causing a dependency
*/ 



/*
.nosplit
{
clear: left;
page-break-inside: avoid;
background: none; 	
color: white;
}

wwwTomdeHavas.com
*/


/***************************************************************
* Local fonts
*/

/*Comment out below to use google fonts*/
@font-face {
    font-family: mainFont;
    src: url('fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: mainFont;
    src: url('fonts/Roboto-Italic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;

}

@font-face {
    font-family: mainFont;
    src: url('fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;

}


@font-face {
    font-family: mainFont;
    src: url('fonts/Roboto-BoldItalic-webfont.woff') format('woff'),
    src: url('fonts/Roboto-BoldItalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;

}



/***************************************************************
* Base styles
*/


.clear
	{clear: both;}


body
	{
	margin: 0;
	border: 0;
	padding: 0;
	background: #333;
	color: #333;
	font-family: 'mainFont', sans-serif;   /*When not using google fonts*/
	/*font-family: 'Roboto', sans-serif;*/ /*When using google fonts*/
	font-weight: normal;
	font-style: normal;
	font-size: 1em;
	letter-spacing: 0em;
	line-height: 1.5em;
	}


img
	{
	margin: 0;
	border: 0;
	padding: 0;
	background: none;
	color: black;
	}


p, i, b, ul, li, a
	{
	position: relative;
	background: none;
	}



i
	{font-style: italic;}

b
	{font-weight: bold;}


a
	{
	color: #00f;
	text-decoration: none;
	line-height: 1em;
	}


a:hover
	{
	color: #0f0;
	text-decoration: underline;
	}


a:visited
	{
	color: #f00;
	text-decoration: underline;
	}


h1 
	{
	position: relative;
	/*text-align: left;*/
	margin: 16px 0 1em 0;
	border: 0;
	padding: 0 0 0 2em;
	font-size: 2em;
	font-weight: normal;
	background: none;
	/*color: #008888;*/
	/*text-shadow: 0px 0px 1px black;*/ /************Safari bug patch or font disappears!*/
	}


h2 
	{
	position: relative;
	/*text-align: left;*/
	margin: 0 0 0 1em;
	font-size: 2em;
	font-weight: normal;
	text-transform: none;
	/*background: none;*/
	/*color: #00ffff;*/
	/*text-shadow: 0px 0px 1px black;*/ /************Safari bug patch or font disappears!*/
	}

h3 
	{
	position: relative;
	/*text-align: left;*/
	margin: 0 0 0 1em;
	font-size: 1.5em;
	font-weight: normal;
	text-transform: none;
	/*background: none;*/
	/*color: #00ffff;*/
	/*text-shadow: 0px 0px 1px black;*/ /************Safari bug patch or font disappears!*/
	}



/***************************************************************
* The Social Media Icons
*/


#Icons 
	{
position: absolute;
	right: 1em;
top: 1em;
	margin: 0 0 0 0;
	padding: 0;
	background: none;
	color: green;

	}


#Icons a
	{
	font: 64px SocialMedia;
	background: none;
	color: #880000;
	text-decoration: none;

	}





/***************************************************************
*
*  The Main Content Styles
*
*/


#MainContent
	{
	}


/***************************************************************
* The Panel Styles
*
The panels arrange themselves in left-right up-down order 
across the screen. If the browser ignores @media then the panels 
will not scale to fill the width of the screen and blank space 
may remain on the right. This is the Fallback condition.
*/


#MainContent div.panel
	{
	position: relative;
	float: left;
	border: 0;
	/*margin: 0;*/
	padding: 0;
	background: white;
	/*color: #222;*/
	overflow:hidden;
	line-height: 1.35em; /******************************* usefull to make it all fit was 1.4*/
	}


#MainContent div.panel p, i, b, ul, li, a
	{
	margin: 0.7em 1.5em; /***/
	background: none; /*************Safari bug patchtransparent won't work on safari*/
	}

#MainContent div.panel i
	{margin: 0em; font-style: italic;}

#MainContent div.panel b
	{margin: 0em; font-weight: bold;}


#MainContent div.panel ul
	{
	margin: 0.7em 1.5em 0.7em 3em;
	padding: 0;
	line-height: 1em;
	list-style-type: disc;
	}

#MainContent div.panel ul ul
	{
	margin: 0.7em 0em 0.7em 1.5em;
	padding: 0;
	line-height: 1em;
	list-style-type: disc;
	}



#MainContent div.panel li
	{
	margin: 0.2em 0 0.2em 0.0em;
	font-size: 1em;
	line-height: 1.1em;
	background: none;
	color: #404040;
	}

#MainContent div.code
	{
	padding: 0 0 0 2em;
	background: white;
	color: #006600;
	font: 110% monospace;
	line-height: 1.5em;
	}

#MainContent div.panel code
	{
	padding: 0 0 0 0em;
	background: white;
	color: #007700;
	font: 100% monospace;
	line-height: 1.5em;
	}

#MainContent div.panel code>b
	{
	padding: 0 0 0 0em;
	background: white;
	color: #ff0000;
	font: 100% monospace;
	line-height: 1.5em;
	}

#MainContent div.panel code>d
	{
	padding: 0 0 0 0em;
	background: white;
	color: blue;
	font: 100% monospace;
	line-height: 1.5em;
	}

#MainContent div.panel code>f
	{
	padding: 0 0 0 0em;
	background: white;
	color: black;
	font: 100% monospace;
	line-height: 1.5em;
	}

#MainContent div.panel table
	{
	margin: 0.7em 1.5em; /***/
	background: none; /*************Safari bug patchtransparent won't work on safari*/
	text-align: left;
	}

#MainContent div.panel table, th, td 
	{
  /*border: 1px solid black;*/
	padding: 0 1em 0 0;
	}


#MainContent div.panel h1
	{
	position: absolute;
	top: 0em;
	left: 0em;
	padding: 0;
	text-shadow: 1px 1px 5px black;
	color: white;
	line-height: 1.2em;
	margin: 0.8em 0.90em 0.33em 0.90em;
	line-height: 1.2em;
	}


#MainContent div.panel h1.rev
	{
	text-shadow: 1px 1px 5px white;
	color: black;
	}


#MainContent div.panel h1.x2
	{
	margin: 0.37em 0.33em 0.33em 0.43em;
	line-height: 1em;
	}



#MainContent div.panel.head
	{
	background: none;
	}


#MainContent div.panel.head h1
	{
	margin: 0.5em;
	position: absolute;
	top: 0.0em;
	left: 0.15em;
	line-height: 1em;
	color: #eeeeff;
	font-size: 2.5em;
	line-height: 1.2em;
	}



#MainContent div.panel h2
	{
	margin: 1.00em 0.90em 0.33em 0.90em;
	line-height: 1.2em;
	}

#MainContent div.panel.bar h2
	{
	margin: 0.7em 0.90em 0.7em 0.90em;
	line-height: 1.2em;
	color: white;
	}

#MainContent div.panel h3
	{
	margin: 1em 1.1em;
	margin: 1em 1.1em 0.5em 1.1em;
	line-height: 1.2em;
	}

#MainContent div.panel iframe 
	{
	padding: 0;
	margin: 0;
	border: 0;
	}

#MainContent div.panel video 
	{
	padding: 0;
	margin: 0;
	border: 0;
	background: white;
	color: white;
	}



#MainContent div.panel a
	{
	color: #009933;
	text-decoration: none;
 	margin: 0;
	}

#MainContent div.panel a:hover
	{
	color: #00aa33;
	text-decoration: underline;
	}

#MainContent div.panel a:visited:hover
	{
	color: #00aa33;
	text-decoration: underline;
	}

#MainContent div.panel a:visited
	{
	color: #005522;
}



/***************************************************************
* Menu
*/


#MainContent div.bar
	{
	background: #2e6d33;
	}

#MainContent div.menu
	{
	padding: 1em 0em 1em 0em;
	background: #2e6d33;
	font-size: 1.3em;
	color: yellow;
	}
#MainContent div.menu a
	{
	margin: 1em;
	font-size: 1.3em;
	color: #ffff24;
	text-decoration: none;
	}
#MainContent div.menu a:hover
	{
	color: #ffffff;
	text-decoration: underline;
	}

#MainContent div.menu a:visited:hover
	{
	color: #ffffff;
	text-decoration: underline;
	}

#MainContent div.menu a:visited
	{
	color: #cccc12;
	}

#MainContent div.menu a.selected
	{
	padding: 0.5em 0.5em 0.5em 0.5em;
	/*background: #2e5a8d;*/
	color: white;
	font-weight: bold;
	text-decoration: none;
	line-height: 1.5em;
	}





/***************************************************************
* All Panel Fall back for those not understanding the media tag
*/


	/*border: 0;
	padding: 0;
	background: red;
	color: green;*/


	#MainContent
		{margin: 1%;	padding: 0em;}
	#MainContent div.panel
		{
		margin: 1%;
		width: 24.65em;
		height: 34.8em;
		font-size: 0.98em;
		}
	#MainContent div.panel p, i, b, ul, li
		{font-size: 0.95em;}
	#MainContent div.panel h1
		{font-size: 1.5em;}
	#MainContent div.panel h1.x2
		{font-size: 3em;}
	#MainContent div.panel h2
		{font-size: 1.5em;}
	#MainContent div.panel h3
		{font-size: 1.3em;}
	#MainContent div.panel iframe
		{width: 24.65em;height:13.8em;} /*9 / 16*/
	#MainContent div.panel iframe.full
		{width: 24.65em;height:9.04em;} /*1.414 /4*/
	#MainContent div.panel iframe.fill
		{width: 24.65em;height:36.16em;} /*1.414 fill the panel 36.16em*/
	#MainContent div.panel video 
		{width: 24.65em;height:13.8em;}

	#MainContent div.heightx2
		{height: 70em;}
	#MainContent div.heightd2
		{height: 16em;}
/*
	#MainContent div.widthx2
		{width: 50em;}
	#MainContent div.widthx2 iframe
		{width: 50em;height: 28.1em;}
	#MainContent div.widthx2 video 
		{width: 50em;height: 28.1em;}
*/
	#MainContent div.widthfull
		{width: 96%; height: auto;}
	#MainContent div.widthfull iframe
		{width: 96%;height: auto;}
	#MainContent div.widthfull iframe.full
		{width: 96%;height: auto;}
	#MainContent div.panelfull iframe.fill
		{width: 96%;height: auto;}
	#MainContent div.widthfull video 
		{width: 96%;}



@media all and (min-width: 0px)
	{
	#MainContent
		{margin: 1em;	padding: 0em;}
	#MainContent div.panel
		{
		margin: 1em;
		width: 24em;
		height: 34em;
		font-size: 0.99em; /*If this is 1em mike's little laptop shifts panel to next row leaving empty!*/
		}
	#MainContent div.panel iframe
		{width: 24em;height:13.5em;} /*9 / 16*/
	#MainContent div.panel iframe.full
		{width: 24em;height:8.84em;} /*1.414 /4*/
	#MainContent div.panel iframe.fill
		{width: 24em;height:33.94em;} /*1.414 fill the panel was 35.36em but this upset dynamics javascript!!*/
	#MainContent div.panel video 
		{width: 24em;height:13.5em;}
	#MainContent div.widthx2
		{width: 50em;}
	#MainContent div.widthx2 iframe
		{width: 50em;height: 28.1em;}
	#MainContent div.widthx2 video 
		{width: 50em;height: 28.1em;}
	}

/***************************************************************
* Standard Panal Styles
*/


@media all and (min-width: 1485px)
	{
	#MainContent
		{margin: 1em 0em 1em 1em;}
	#MainContent div.panel
		{font-size: calc(((100vw - 32px) /4 ) / 26.20);} /*calc(((100vw - 16px) /4 ) / 26.61)*/
	}

@media all and (max-width: 1485px) and (min-width: 990px)
	{
	#MainContent
		{margin: 1em 0em 1em 1em;}
	#MainContent div.panel
		{font-size: calc(((100vw - 32px) /3 ) / 26.25);} /*26.87  26.83*/
	}

@media all and (max-width: 990px) and (min-width: 495px)
	{
	#MainContent
		{margin: 0.5em 0em 0.5em 0.5em;}
	#MainContent div.panel
		{
		font-size: calc(((100vw - 32px) /2 ) / 24.90);  /*25.81  25.76*/
		margin: 0.5em;
		}
	}

@media all and (max-width: 495px)
	{
	#MainContent
		{margin: 0.5em 0em 0.5em 0.5em;}
	#MainContent div.panel
		{
		font-size: calc(((100vw - 32px) /1 ) / 24.80); /*25.70*/
		margin: 0.5em;
		height: auto;
		}
	#MainContent div.panel.head h1
		{
		margin: 0.20em;
		}

	}



#MainContent div.panel img
	{
	padding: 0;
	margin: 0;
	/*background: none;*/
	width: 100%;
	/*overflow:hidden;*/
	}




/***************************************************************
* Standard Panal Double Height Modifyer Styles
*/

@media all and (min-width: 990px)
	{
	#MainContent div.heightx2
		{height: 70em;}
	}

@media all and (max-width: 990px) and (min-width: 495px)
	{
	#MainContent div.heightx2
		{height: 69em;}
	}

@media all and (max-width: 495px)
	{
	#MainContent div.heightx2
		{height: auto;}
	}



/***************************************************************
* Standard Panal half Height Modifyer Styles
*/

@media all and (min-width: 990px)
	{
	#MainContent div.heightd2
		{height: 16em;}
	}

@media all and (max-width: 990px) and (min-width: 495px)
	{
	#MainContent div.heightd2
		{height: 16.5em;}
	}

@media all and (max-width: 495px)
	{
	#MainContent div.heightd2
		{height: auto;}
	}



/***************************************************************
* Standard Panal Free Height Modifyer Styles
*/



	#MainContent div.heightfree
		{height: auto;}



/***************************************************************
* Standard Panal Double Width Modifyer Styles
*/


@media all and (min-width: 990px)
	{
	#MainContent div.widthx2
		{width: 50em;}
	#MainContent div.widthx2 iframe
		{width: 50em;height: 28.1em;                         }
	#MainContent div.widthx2 iframe.fill
		{width: 50.1em;height: 34.1em;                         }
	#MainContent div.widthx2 video 
		{width: 50em;height: 28.1em;}

	}



@media all and (max-width: 990px) and (min-width: 495px)
	{
	#MainContent div.widthx2
		{
		width: 49em;
		height: auto; 
		}
	#MainContent div.widthx2 iframe
		{width: 49em;height: calc(49em * 9 / 16);}
	#MainContent div.widthx2 iframe.full
		{width: 49em;height: auto;}
	#MainContent div.widthx2 iframe.fill
		{width: 49.1em;height: 34.5em;                         }
	#MainContent div.widthx2 video 
		{width: 49em;}
	}


@media all and (max-width: 495px)
	{
	#MainContent div.widthx2
		{
		width: 24em;
		height: auto; 
		}
	#MainContent div.widthx2 iframe
		{width: 24em;height: calc(24em * 9 / 16);}
	#MainContent div.widthx2 iframe.full
		{width: 24em;height: auto;}
	#MainContent div.widthx2 iframe.fill
		{width: 24em;height: 34em;                   }
	#MainContent div.widthx2 video 
		{width: 24em;}
	}






/***************************************************************
* Standard Panal Full Width Modifyer Styles
*/



@media all and (min-width: 1485px)
	{
	#MainContent div.widthfull
		{
		width: 102em;
		height: auto; 
		}
	#MainContent div.widthfull iframe
		{width: 102em;height: calc(102em * 9 / 16);}
	#MainContent div.widthfull iframe.full
		{width: 102em;height: auto;}
	#MainContent div.widthfull video 
		{width: 102em;}
	}

@media all and (max-width: 1485px) and (min-width: 990px)
	{
	#MainContent div.widthfull
		{
		width: 76em;
		height: auto; 
		}
	#MainContent div.widthfull iframe
		{width: 76em;height: calc(76em * 9 / 16);}
	#MainContent div.widthfull iframe.full
		{width: 76em;height: auto;}
	#MainContent div.widthfull video 
		{width: 76em;}
	}

@media all and (max-width: 990px) and (min-width: 495px)
	{
	#MainContent div.widthfull
		{
		width: 49em;
		height: auto; 
		}
	#MainContent div.widthfull iframe
		{width: 49em;height: calc(49em * 9 / 16);}
	#MainContent div.widthfull iframe.full
		{width: 49em;height: auto;}
	#MainContent div.widthfull video 
		{width: 49em;}
	}

	
@media all and (max-width: 495px)
	{
	#MainContent div.widthfull
		{
		width: 24em;
		height: auto; 
		}
	#MainContent div.widthfull iframe
		{width: 24em;height: calc(24em * 9 / 16);}
	#MainContent div.widthfull iframe.full
		{width: 24em;height: auto;}
	#MainContent div.widthfull video 
		{width: 24em;}
	}





/*
*
*  End
*
**************************************************************/