/* -------------------------------------------------------------
  History    : 
	Name       : ConText_style
	Version    : 1.016
	Released   : 13 April 2016
	Designer   : T Sherlock for ConText
	             Design by T Sherlock/ConText advisory services
	             http://www.SetConText.com
  Fonts      :
	heads  : font-family: Arvo, "Times New Roman", serif;
	para   : font-family: "Duru Sans", Verdana, sans-serif;
	tables : font-family: Convergence, Tahoma, sans-serif;
	blog   : font-family: Belleza, Georgia, sans-serif;
  Colors     :
	ConText green	: #57a57d 
	ConText blue	: #768fc9
	ConText gray	: #81868b
	Context lt gray	: #b8bec2
   ------------------------------------------------------------- */

/* ______________________________________________________________
                       General page design

     +------------------------ 960px ---------------------+
     | ConText_banner  [box 1]                            |
     +----------------------------------------------------+
     | Navigation                                         |
     +----------------------------------------------------+
     | Seasonal_graphic [box 2]                           |
     +----------------------------------------------------+
     | Main [box 3]                                       |
     |----------------------------------------------------+
     |Sidebar| Body                             | Sidebar |
     |left   | [box 5]                          | right   |
     |[box 4]|                                  | [box 6] |
     | 80px  | 720px                            | 120px   |
     |       |                                  |         |
     +----------------------------------------------------+
     | Footer              [box 7]                        |
     +----------------------------------------------------+
     | Production_date     [box 8]                        |
     +----------------------------------------------------+
     | HTML5               [box 9]                        |
     +----------------------------------------------------+
   ______________________________________________________________ */



/* General page setup --------------------------------------------------- */

	{
							/* Emply brackets for page setup | do not delete */
}

h1,h2,h3,h4,h5	{
	margin: 0px 0px 0px 0px;			/* top right bottom left head margins */
	font-family: Arvo, "Times New Roman", serif;	/* font for heads 		 */
	color:#768fc9;					/* color for heads		 */
}

p	{
	font-family: "Duru Sans", Verdana, sans-serif;	/* font for paragraphs 		 */
	font-size: 12pt;				/* text size of paragraphs	 */
	line-height: 1.3em;				/* text spacing of paragraphs	 */
}

ul	{
	list-style-type: square;			/* use square bullets in unordered lists	 */
	margin: 0px 0px 0px 0px;			/* top right bottom left list margins	 */
	font-family: "Duru Sans", Verdana, sans-serif;	/* font for paragraphs		 */
	line-height: 1.3em;				/* text spacing of paragraphs	 */
}


a.reg:link	{
	text-decoration: none; 				/* no underline			 */
	color: #57a57d;					/* set unvisited links color	 */
}

a.reg:visited	{
	text-decoration: none; 				/* no underline			 */
	color: #008080;					/* set visited link color	 */
}

a.reg:hover	{
	border-bottom-width: 1px;			/* set hover underline width	 */
	border-bottom-style: solid;			/* set hover underline style	 */
	border-bottom-color: #57a57d;			/* set hover underline style 	 */
	color: #daa520;					/* set hover text color		 */
}

a.reg:active	{
	text-decoration: none; 				/* no underline			 */
	color: green;					/* set active text color	 */
}

/* Table display definitions +++++++++++++++++++++++++++++++++++ */
table	{
	font-family: "Duru Sans", Verdana, sans-serif;	/* font for table		 */
	color: black;					/* table font color		 */
	border-collapse: collapse;			/* thin table head rule		 */
}

th	{
	border-style: solid;				/* overall border style		 */
	border-width: 1px;				/* overall border width		 */
	border-color: white;				/* overall border color		 */
	border-collapse: collapse;			/* thin table head rule		 */
	color: white;					/* table head text color	 */
	background-color: #768fc9;			/* table head cell color	 */
}

td	{
	border-style: solid;				/* overall border style		 */
	border-width: 1px;				/* overall border width		 */
	border-color: #768fc9;				/* overall border color		 */
	border-collapse:collapse;			/* thin table head rule		 */
	color: black;					/* table head text color	 */
	background-color: white;			/* table head cell color	 */
	padding: 0px 3px 0px 3px; 			/* top right bottom left	 */
	font-size: 11pt;				/* text size inside box		 */
	line-height: 1.25em;				/* text spacing inside box	 */
	vertical-align: top;				/* align text to top of cell	 */
}

td.no_rule	{
	border-style: solid;				/* overall border style		 */
	border-width: 1px;				/* overall border width		 */
	border-color: white;				/* overall border color		 */
	border-top-color: #768fc9;			/* table top border color	 */
	border-top-width: 1px;				/* table top border width	 */
	border-bottom-color: white;			/* table bottom border color	 */
	border-bottom-width: 1px;			/* table bottom border width	 */
	border-left-color: white;			/* table left border color	 */
	border-left-width: 1px;				/* table left border width	 */
	border-right-color: white;			/* table right border color	 */
	border-right-width: 1px;			/* table right border width	 */
	color: black;					/* table head text color	 */
	background-color: white;			/* table head cell color	 */
	padding: 0px 3px 0px 3px; 			/* top right bottom left	 */
	font-size: 11pt;				/* text size inside box		 */
	line-height: 1.25em;				/* text spacing inside box	 */
	vertical-align: top;				/* align text to top of cell	 */
}


/* Fancy stuff +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#initial_cap	{
	display: block;					/* box type			 */	
	margin: 0px 0px -15px -10px;			/* top right bottom left head margins */
	padding: 0px 0px 0px 0px;			/* top right bottom left: spacing around box*/
	height: 10px;					/* box height	 	 	 */
	width: 10px;					/* box width			 */
	background: white;				/* background color		 */

	font-family: Belleza, Georgia, sans-serif;	/* font for initial cap		 */
	font-size: 36pt;				/* font size for initial cap 	 */
	font-weight: bolder;				/* font weight for initial cap	 */	
	color: #768fc9;					/* color for initial cap = ConText blue	 */
	text-align: right;				/* right align initial cap	 */

	-moz-box-flex: 0;				/* browser-specific info	 */
	-moz-box-orient: horizontal;			/* browser-specific info	 */
	-webkit-box-flex: 0.0; 				/* Safari and Chrome browsers	 */
	-ms-flex: 0.0; 					/* Internet Explorer 10 	 */
}

initial_cap	{
	font-family: Share, Arial, cursive;		/* font for initial cap		 */
	font-family: Belleza, Georgia, sans-serif;	/* font for initial cap		 */
	font-size: 30pt;				/* font size for initial cap 	 */
	font-weight: bolder;				/* font weight for initial cap	 */	
	color: #57a57d;					/* color for initial cap = ConText green */
	color: #768fc9;					/* color for initial cap = ConText blue	 */
	text-align: right;				/* right align initial cap	 */
}


/* Custom colors definitions +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
color_ConText_green	{
	color: #57a57d;					/* spot text color ConText green */
}

color_ConText_blue		{
	color: #768fc9;					/* spot text color ConText blue	 */
}

color_ConText_dk_gray		{
	color: #81868b;					/* spot text color ConText dark gray	 */
}

color_ConText_lt_gray		{
	color: #b8bec2;					/* spot text color ConText light gray	 */
}

spotcolor_white	{
	color: white;					/* spot text color white (invisible text) */
}

banner_text	{
	font-family: Belleza, Georgia, serif;		/* font for banner box text 		 */
	font-size: 20pt;				/* font size for banner box text	 */
	font-style: italic;				/* font style for banner box text	 */
	font-weight: bold;				/* font weigth for banner box text	 */
	line-height: 0.7;				/* text spacing for banner box text	 */
	color: #768fc9;					/* font color for banner box text 	 */
}


/* Page layout sections +++++++++++++++++++++++++++++++++++ */

#ConText_banner_box {
	box-flex: 0;					/* box flexibility 0=none 2=2x1	 */
	height: 100px;					/* box height	 	 	 */
	width: 960px;					/* box width			 */
	background: white;				/* background color		 */
	margin: 0px 0px 5px 0px;			/* top right bottom left spacing around box */

	background-image: url('../images/ConText_logo_2018__web____12_02_2018.jpg'); /* image 	 */
	background-repeat: no-repeat;			/* show the image 1 time only	 */
	background-size: 271px 157px;			/* image size 100%= 271px 157px	 */
	background-size: 203px 118px;			/* image size  75%= 203px 118px	 */
	background-size: 190px 110px;			/* image size  70%= 190px 110px	 */
	background-size: 163px  94px;			/* image size  60%= 163px  94px	 */

	background-position: left top; 			/* position the image in the box */

	padding: 0px 0px 0px 0px;			/* top right bottom left spacing around box */
	text-align: right;				/* right align text in banner box	 */
	align-content: center;				/* center contents vertically in box	 */

	-moz-box-flex: 0;				/* Firefox browser workaround	 */
	-moz-box-orient: horizontal;			/* browser-specific info	 */
	-webkit-box-flex: 0.0; 				/* Safari and Chrome browsers	 */
	-ms-flex: 0.0; 					/* Internet Explorer 10 	 */
}

#Seasonal_graphic_box {
	box-flex: 0;					/* box flexibility 0=none 2=2x1	 */
	height: 80px;					/* picture height		 */
	width: 960px;					/* picture width		 */
	margin: 5px 0px 20px 0px;			/* top right bottom left spacing around box */
	background: white;				/* background color		 */

	background-image:url('../Images/Seasonal_image.jpg');  /* image 		 */
	background-repeat:no-repeat;			/* show the image 1 time only	 */
	background-size: 960px 80px;			/* image size width height	 */
	background-position: left top; 			/* position the image in the box */

	-moz-box-flex: 0;				/* Firefox browser workaround	 */
	-moz-box-orient: horizontal;			/* Firefox browser info		 */
	-webkit-box-flex: 0.0; 				/* Safari and Chrome browsers	 */
	-ms-flex: 0.0; 					/* Internet Explorer 10 	 */
}


/* Lay out the page boxes =================================== */
#Page_box {
	display: box;					/* treat as flexible boxes	 */
	box-orient: horizontal;				/* stack boxes across 		 */
	height: 100%;					/* height of box		 */
	width: 960px;					/* width of box			 */
	font-size: 12pt;				/* text size inside box		 */
	line-height: 1.75em;				/* text spacing inside box	 */
	font-family: "Duru Sans", Verdana, sans-serif;	/* font info for box		 */
	background: white;				/* background color		 */
	color: black;					/* text color			 */

	display: -moz-box;				/* how to display in Mozilla browser */
	-moz-box-flex: 1;				/* Firefox browser workaround	 */
	-moz-box-orient: horizontal;			/* how to display in Mozilla browser */
	display: -webkit-box;				/* Safari, Opera, Chrome browser */
	-webkit-box-flex: 1.0; 				/* Safari and Chrome browsers	 */
	-webkit-box-orient: horizontal;			/* Safari, Opera, Chrome browser */

}


#Left_sidebar_box {
	box-flex: 1;					/* box flexibility 0=none 2=2x1	 */
	width: 80px;					/* left sidebar width		 */
	background: white;				/* background color		 */
	padding: 10px 10px 10px 10px;			/* top right bottom left spacing around box */

	-moz-box-flex: 1;				/* Firefox browser workaround	 */
	-webkit-box-flex: 1.0; 				/* Safari and Chrome browsers	 */
	-ms-flex: 1.0; 					/* Internet Explorer 10 	 */
}

#Content_box {
	box-flex: 1;					/* box flexibility 0=none 2=2x1	 */
	width: 720px;					/* content area width		 */
	background: white;				/* background color		 */
	padding: 10px 10px 10px 10px;			/* top right bottom left spacing around box */

	-moz-box-flex: 1;				/* Firefox browser workaround	 */
	-webkit-box-flex: 1.0; 				/* Safari and Chrome browsers	 */
	-ms-flex: 1.0; 					/* Internet Explorer 10 	 */
}

#Right_sidebar_box {
	box-flex: 1;					/* box flexibility 0=none 2=2x1	 */
	width: 160px;					/* right sidebar width		 */
	background: white;				/* background color		 */
	padding: 10px 10px 10px 10px;			/* top right bottom left spacing around box */

	-moz-box-flex: 1;				/* Firefox browser workaround	 */
	-webkit-box-flex: 1.0; 				/* Safari and Chrome browsers	 */
	-ms-flex: 1.0; 					/* Internet Explorer 10 	 */
}

#Footer_box {
	box-flex: 1;					/* box flexibility 0=none 2=2x1	 */
	display: box;					/* box type 			 */
	height: 16px;					/* height of footer box		 */
	width: 960px;					/* width of footer box		 */
	color: white;					/* color of footer text		 */

	margin: 0px 0px 0px 0px;			/* top right bottom left spacing around box */
	padding: 0px 0px 0px 0px;			/* top right bottom left spacing around box */
	background-color: #57a57d;			/* background color: color | transparent */

	border-style: solid;				/* all borders style 	 	 */
	border-width: 1px;				/* all borders width		 */
	border-color: white;				/* all borders color 		 */
	border-top-width: 0px;				/* top border width		 */
	border-top-color: #57a57d;;			/* top border color		 */
	border-bottom-width: 0px;			/* bottom border width		 */
	border-bottom-color: #57a57d;			/* bottom border color		 */

        font-family: Convergence, Tahoma, sans-serif;	/* font for footer 		 */
	font-size: 10pt;				/* font size for footer 	 */
	text-align: center;				/* center the text in the footer bar */
	vertical-align: bottom;				/* align text to bottom of box	 */

	-moz-box-flex: 1;				/* Firefox browser workaround	 */
	-moz-box-orient: horizontal;			/* Firefox browser info		 */
	-webkit-box-flex: 1.0; 				/* Safari and Chrome browsers	 */
	-ms-flex: 1.0; 					/* Internet Explorer 10 	 */
}

#Production_date_box	{
	display: block;					/* box type 			 */
	box-flex: 0;					/* box flexibility 0=none 2=2x1	 */
	width: 960px;					/* content area width		 */
	background: white;				/* background color		 */
	margin: 0px 0px 0px 0px;			/* top right bottom left box margins */
	padding: 0px 0px 0px 0px;			/* top right bottom left spacing around box*/

	font-family: "Duru Sans", Verdana, sans-serif;	/* font for production_date paragraphs 	*/
	color: gray;					/* color of production_date box text	*/
	font-size: 8pt;					/* font size for production_date box  	*/
	text-align: right;				/* right align the text in the production_date box */

	-moz-box-flex: 0;				/* Firefox browser workaround	 */
	-moz-box-orient: horizontal;			/* Firefox browser info		 */
	-webkit-box-flex: 0.0; 				/* Safari and Chrome browsers	 */
	-ms-flex: 0.0; 					/* Internet Explorer 10 	 */
}

#HTML5_box {
	box-flex: 0;					/* box flexibility 0=none 2=2x1	 */
	height: 20px;					/* picture height		 */
	width: 960px;					/* picture width		 */
	margin: -12px 0px 0px 0px;			/* top right bottom left spacing around box */
	background: white;				/* background color		 */

	background-image: url('../Images/html5_badge_128.gif'); /* image 	 */
	background-repeat: no-repeat;			/* show the image 1 time only	 */
	background-size: 20px 20px;			/* image size width height	 */
	background-position: left top; 			/* position the image in the box */

	font-family: "Duru Sans", Verdana, sans-serif;	/* font for box paragraphs	 */
	color: #768fc9;					/* color of box text		 */
	font-size: 8pt;					/* font size for box		 */

	-moz-box-flex: 0;				/* Firefox browser workaround	 */
	-moz-box-orient: horizontal;			/* Firefox browser info		 */
	-webkit-box-flex: 0.0; 				/* Safari and Chrome browsers	 */
	-ms-flex: 0.0; 					/* Internet Explorer 10 	 */
}

/* Navbar setup +++++++++++++++++++++++++ */
nav	{
	z-index: 4; 					/* stacked order of nav box [higher number = closer to front]	*/
	display: block; 				/* position of navbar text		 */
	width: 958px;					/* width of navigation bar 		 */
	height: 17px;					/* height of navigation bar		 */
	margin: 0px 0px 0px 0px;  			/* top right bottom left		 */
	padding: 0px 0px 3px 0px;  			/* top right bottom left		 */

	background-image: none;				/* background image: url | none 	 */
	background-color: #57a57d;			/* background color= color | transparent */

	border-style: solid;				/* all borders style 			 */
	border-width: 1px;				/* all borders width			 */
	border-color: #57a57d;				/* all borders color 			 */
	border-top-width: 1px;				/* top border width			 */
	border-top-color: #57a57d;			/* top border color			 */
	border-bottom-width: 1px;			/* bottom border width			 */
	border-bottom-color: #57a57d;			/* bottom border color			 */
}

/* Navbar main list characteristics +++++++++++++++++++++++++ */
li.nav_bar {
	list-style: none; 				/* no bullet character		 */
	margin: 0px 0px 0px 0px;  			/* top right bottom left		 */
	padding: 0px 30px 0px 30px; 			/* top right bottom left = spacing between list elements	*/

	font-family: Convergence, Tahoma, sans-serif;	/* font for navbar 	 	 */
	float: left;					/* left-to-right order of list elements	*/
}

/* Navbar drop-box sublist characteristics +++++++++++++++++++++++++ */
nav li ul {
	width: 300px;  					/* sublist text box width 	 */
	margin: 0px 0px 0px 0px;  			/* top right bottom left 	 */
	padding: 3px 0px 6px 0px; 			/* top right bottom left	 */
	display: none; 					/* box type		 	 */

	font-family: Convergence, Tahoma, sans-serif;	/* font for navbar 		 */

	-moz-transition: all 1s ease-in-out;  		/* browser-specific		 */
	-webkit-transition: all 1s ease-in-out; 	/* browser-specific		 */
	-o-transition: all 1s ease-in-out;  		/* browser-specific		 */
	transition: all 1s ease-in-out;  		/* browser-specific		 */
}

/* Sublist drop-box background flyout characteristics  +++++++++++++++++++++++++ */
nav li:hover ul {
	display: block;  				/* hover sublist box type	 */
	position: absolute;  				/* sublist box position		 */
	background: #57a57d; 				/* sublist box fill		 */
	opacity: .85;  					/* sublist box opacity 0=opaque | 1=transparent */

	border-style: solid;				/* all borders style 		 */
	border-width: 1px;				/* all borders width		 */
	border-color: #57a57d;				/* all borders color 		 */
	border-top-width: 1px;				/* top border width		 */
	border-top-color: transparent;			/* top border color		 */
}

/* Navbar drop-box sublist characteristics  +++++++++++++++++++++++++ */
nav li ul a	{
	width: 300px;  					/* sublist text area width 	*/
	background: none; 				/* sublist text bar color=none	*/
}

/* Navbar link characteristics +++++++++++++++++++++++++ */
nav a:link	{
	text-decoration: none; 				/* no underline			 */
	color: white;					/* set navbar unvisited link color */
}

nav a:visited	{
	text-decoration: none; 				/* no underline			 */
	color: white;					/* set navbar visisted link color */
}

nav a:hover	{
	text-decoration: none; 				/* no underline			 */
	color: black;					/* set navbar hover text color	 */
}

nav a:active	{
	text-decoration: none; 				/* no underline			 */
	color: white;					/* set navbar select link color	 */
}


/* Navbar link background charateristics +++++++++++++++++++++++++ */
nav li:link {
	position: relative; 				/* static|relatve|absolute|fixed */
	text-decoration: none; 				/* no underline			 */
}

nav li:visited {
	position: relative; 				/* static|relatve|absolute|fixed */
	text-decoration: none; 				/* no underline			 */
}


nav li:hover {
	position: relative; 				/* static|relatve|absolute|fixed */
	text-decoration: none; 				/* no underline			 */
/*	font-weight: bolder;	*/			/* hover box text weight	 */
	background: #768fc9;				/* hover box highlight color	 */
}