/* 
8pt   = 0.67em = 10.667px = 66.667%
9pt   = 0.75em = 12px = 75%
10pt = 0.836em = 13.333px = 83.333%
11pt = 0.9167em = 14.667px = 91.667%
12pt = 1.0em = 16px = 100% = Medium --> Default font size for browsers
14pt = 1.2em = 18.667px = 116.667%
16pt = 1.4em = 21.333px = 133.333%
*/ 

/* ------->>> Mobile device support */

/* This will automatically resize images if they get too large for display */
/* RCL: if you need to resize an image within a <img> tag then use the following instead of 'width='
	style='width:218px'
    And if the image 'acts weird' while inside of a table (such as overlapping with adjacent text) then use this as well in the <img> tag to override the 'max-width'
	class='img_tag_fix'
    As an example: 'PAGE_HEADLINE' in okino.php
*/ 
img {
	max-width:100%;
	width: auto;
	height: auto;  
}
/* RCL: add this class into any <img> tag which ends up  working oddly due to our <img> tag override of above. For example, for our horizontal menu images */
.img_tag_fix {
	max-width: none;
}
input, textarea {
	max-width:100%; 
}
/* A work-around fix for Firefox so that it doesn't display the <img> "alt" text while the image is still loading */
img:-moz-loading {
	visibility: hidden;
}

/* We put the sidebar in a </div> so that we can dynamically hide it for hand held devices */
/* Add a media query to hide the second column when smaller - resize result pane to see it in action */
@media only screen and (max-width: 900px) {
	.menu_hide_a_few_items_under_900px
	{
		display:none;	/* Make a few horizontal menu items hidden once we drop under 900px */
	}
}
/* To make items visible when the screen width is desktop mode */
@media only screen and (min-width: 901px) {
	.top_banner_desktop_mode_hide_900
	{
		display:none;	/* Hide the wide top-banner for 900 pixels or lower */
	}
}
/* This has been copied verbatim to the top of okino.php so that Google's mobile spiderbot properly renders the page with the desktop elements hidden   
@media only screen and (max-width: 642px) {
	.menu_mobile_hide,
	.sidebar_separator_mobile_hide,
	.top_banner_mobile_hide,
	.images_to_be_hidden_for_mobile,
	#breadcrumb_div,
	#page_end_div,
	#sidebar_div
	{
		..
	}
}
*/
@media only screen and (min-width: 643px) {
	.top_banner_desktop_mode_hide_642
	{
		display:none;	/* Hide the hamurger menu until we get to 642 pixels or lower */
	}
}

/* Responsive 2 column table for the reseller overview page */
/* https://css-tricks.com/guide-responsive-friendly-css-columns */
.reseller_overview_responsive_2_column_wrapper {
	text-align:center;
}
.reseller_overview_responsive_2_column_table {
	width:90%;

	text-align:left;

	display: inline-block;	/* So that we an center it */

	-webkit-columns: 2 200px;
	-moz-columns: 2 200px;
	columns: 2 200px;

	-webkit-column-gap: 4em;
	-moz-column-gap: 4em;
	column-gap: 4em;

	-webkit-column-rule: 1px dotted #ddd;
	-moz-column-rule: 1px dotted #ddd;
	column-rule: 1px dotted #ddd;
}

/* Hamburger menu */ 
.mburger {
	color: white !important;
}

/* This implements the "sticky, non-scrolling banner" while in mobile display mode. What it does is to assocate the CSS class 'sticky_top_banner' with the top banner. */
@media only screen and (max-width: 642px) {
	.sticky_top_banner {
		position: -webkit-sticky; /* Safari */
		position: sticky;
		top: 0;
		width: 100%
	}
}

/* ---------------------- */

html { font-size: 100.1%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

@import url(https://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext,cyrillic);

html, button, input, select, textarea {
	/* font-family: "Tahoma", "Verdana", "Arial", "SansSerif"; */
	font-family: "roboto", "AvenirNext","Helvetica Neue",Helvetica,Arial,sans-serif;
}

body {
	max-width: 100%;

	margin: 0px;

	/* font-family: "Segoe UI", "Tahoma", "Verdana", "Arial", "SansSerif"; */
	font-family: "roboto", "AvenirNext","Helvetica Neue",Helvetica,Arial,sans-serif;
	color: Black;

	text-rendering: optimizeLegibility;
	webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	font-size: 1em;
	line-height: 1.5;

	font-weight: 400;

	color: #24292e;
}
@media only screen and (max-width: 642px) {
	/* To overcome "text too small" for Google validation */
	font-size: 1.1em;
}

/* These form a CSS table to hold the sidebar and main text area (to allow for a responsive text area) */
.Main_Row {
	display: table;
	width: 100%;
	table-layout: fixed;
	border-spacing: 0px;
}
/* Sidebar */
.Sidebar_Column {
	display: table-cell;
	vertical-align: top;
	/* padding-left: 10px; */
	background-color: #224F80;	/* Sidebar's background colour */
	background-image: url(/templates/topnav/background_sidebar.gif);
	background-position: left top;
	background-repeat : repeat-x;
}
/* Main text area */
.Main_Column {
	display: table-cell;
	background-color: white;
}

/* This is used to clone the <pre> tag using a <div> */
.pre_tag_clone_using_divs {
	font-family: monospace;
	white-space: pre-wrap;
	overflow: auto;
}

li {
	list-style-image : url(../images/arrow.gif);
}
h3 {
	font-size:120%;
}
h4 {
}
h5, h6 {
	font-size:80%;
}

A:Link
{
	color: #336699;
	Text-decoration: underline; 
}
A:Visited
{
    Text-decoration: none;
}
A:Hover
{
    color: #ff3300;
   Text-decoration: underline; 
}
@media only screen and (max-width: 642px) {
	/* Google requires that we provide more spacing around links for easier access to mobile device users */
	A:Link, Visited, Hover {
		line-height:250%;	/* 250min, 300% is known to be acceptable to Google */
	}
	/* Google requires that we provide more spacing around linked <img> for easier access to mobile device users */
	a img {
		padding-top: 3%;
		padding-bottom: 3%;
	}
}

/* Main text headline for each page. Text created with the PHP "PAGE_HEADLINE()" function from okino.php */
.headline {
	font-size:160%;
	/* font-size: 16pt; */
	padding-left: 5px;
	padding-bottom: 5px;
 	border-bottom: 2px solid #1C70D8;
	color: #a00000;
	font-weight: bolder;
}
/* Secondary text headline for each page. Text created with the PHP "PAGE_HEADLINE()" function from okino.php */
.subheadline {
	font-size:110%;
	/* font-size: 11pt; */
	padding-left: 5px;
	padding-bottom: 4px;
	padding-top: 4px;
	border-bottom: 2px solid #1C70D8;
 	color:#1C70D8;
	font-weight : bolder;
}

.section {
	font-size:110%;
	padding-left: 5px;
	padding-bottom: 4px;
	padding-top: 4px;
	border-bottom: 1px ridge #1C70D8;
	color:#1656a6;
	font-weight : bold;
}
/* H1 and H2 are now being used for the main SECTION() titles, for SEO positioning reasons */
h1 {
	font-size: 110%;
}
h2 {
	font-size:110%;
}

/* A section title preceeding dialog box descriptions. This is white text on a solid blue background, full width of main text area 
   Used via php as: "<?php DIALOGBOX_DESCRIPTION("This is the text"); ?> 
*/
.dialogboxdescription {
	font-size:110%;
	padding-left: 5px;
	padding-bottom: 4px;
	padding-top: 4px;
	border-bottom: 1px solid #1C70D8;
 	color:#1C70D8;
	font-weight : bold;
}

/* Left side navigation table */
.tablefill {
	background-color: #092241;
	background-image: url(/templates/topnav/background.gif);
	background-position: left top;
}

/* Background for the sidebar */
.sidebar {
	background-color: #224F80;
	background-image: url(/templates/topnav/background_sidebar.gif);
	background-position: left top;
	background-repeat : repeat-x;
}

/* The main text area */
.mainarea {
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-top: 10px;
}       
@media only screen and (max-width: 642px) {
	.mainarea {
		padding-left: 2px;
		padding-right: 2px;
		padding-bottom: 2px;
		padding-top: 2px;
	}               
}

.tilestiple {
	background-color: #215C9B;
	background-image: url(/templates/images/top-stipple-tile.gif);
	background-position: left top;
	background-repeat: repeat-x;
}

.topbannerbackground {
	background-color: #215C9B;
	background-image: url(/templates/images/top-stipple-tile.gif);
	background-position: left top;
	background-repeat: repeat-x;
}

.dashed-seperator {
	background-image: url(/templates/images/dashes2.gif); 
	background-position: left top;
	background-repeat: repeat-y;
}
.repeated-dashed-seperator {
	background-image: url(/templates/images/dashes2.gif); 
	background-position: left top;
	background-repeat: repeat-x;
}
.sidebarheader {
	background: #2C6496;
	color: #FFFFFF;
	font: bold;
}
.mastheadlogo {
	background-color: #092241;
	background-image: url(/templates/topnav/okino_masthead.gif);
	background-position: left top;
	background-repeat: no-repeat
}
/* Text entry boxes, such as on product registration page */
.textentrybox {
	background-color: #B8C9Db;
	color: #264151;
	border: 1px solid #1B3C5C;
	font: bold;
	font-size:120%;
}
.searchbox {
	background-color: #B8C9Db;
	color: #264151;
	border: 1px solid #1B3C5C;
	font: bold;
}
.searchbutton {
	background-color: #B8C9E0;
	color: #0A1116;
	border: 1px ridge #1B3C5C;
	font: bold;
}
a.goldlink:Link
{
	color: #FEBF01;
	Text-decoration: underline;
}
a.goldlink:Visited
{
	color: #EEAF01;
	Text-decoration: none;
}
a.goldlink:Hover
{
    color: #FF3300;
    Text-decoration: underline;
}

.pagebottom {
	background-color: #326BA3;
	color: #EDEDED;
	font: normal;
	padding-left: 5px;
	padding-bottom: 4px;
	padding-top: 2px;
}
a.pagebottom:link {
        text-decoration: none;
        color: #EDEDED;
}
a.pagebottom:hover {
        text-decoration: underline;
        color: #7DC0FF;
}
A:pagebottom:Visited
{
    Text-decoration: underline;
}

/* Dark blue tables, such as contact info on "support.htm" */
.darkbluetable {
	color: #EDEDED;
	background-color: #224F80;
}

/* Same as above but now with shadow */
.darkbluetable-shadowed {
	color: #EDEDED;
	background-color: #224F80;

    /* These add a drop shadow */
    border-radius: 4px 4px 4px 4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

/* Alternate cell (brighter) for the product upgrades page */
.darkbluetable2 {
	color: #EDEDED;
	background-color: #306fb3;
}

/* Dark blue tables used in the FAQ manager */
.faqmanagertable {
	color: #FFFFFF;
	/* background-color: #225B93; */
	background-color: #306fb3;
}

/* Darker blue for bottom line of each listing in Perl search */
.perlsearch2 {
	color: #FFFFFF;
	background-color: #326BA3;
}
/* Dark blue used for Perl search tables */
.perlsearch {
	background-color: #225B93;
}
/* Product registration table */
.prodregtable {
	color: #FFFFFF;
}
/* A bigger font */
.prodregtable2 {
	font-size:140%;
	/* font-size: 14pt; */
	color: #FFFFFF;
}

/* Light blue tables used on the order entry page */
.ordertable {
	background-color:#1C70D8;
	color: #FFFFFF;
	border: 1px solid #1C70D8;
}
/* Even lighter blue tables used on the order entry page */
.ordertable2 {
	background-color:#1C70D8;
	color: #FFFFFF;
	border: 1px solid #1C70F8;
}

/* A light blue background table with a heavier blue table outline used for the "Okino news" (it has an embedded style in default.htm), the 3rd party plug-ins module page, and the press release page */
.lite-blue-table {
	background-color: #DAE3F3;
	/* color: #000000; */
	 border-width:		2px;
	border-style:		solid;
	border-color:		#4E88C5;
}

// Expandable content styles as used in filefrmt.htm
// http://www.webreference.com/programming/css_content/index.html
.save{
   behavior:url(#default#savehistory);}
a.dsphead{
   text-decoration:none;
   margin-left:1.5em;}
a.dsphead:hover{
   text-decoration:underline;}
a.dsphead span.dspchar{
   font-family:monospace;
   font-weight:normal;}
.dspcont{
   display:none;
   margin-left:1.5em;}

/* This controls the main body of text */
#main {
    /* We are going to keep the main body only 960 pixels wide to fit within a non-maximized browser */
    /* width:1000px; */
    width: 90%;
    /* 20 = vertical offset of main text, Auto = horizontally centered */
    margin:10px auto;

    /* This sets the background colour of the left navigation sidebar */
    /* background: #e9f1f9; */
    padding:0px 0px;

    border-color: rgba(0, 0, 0, 0.2); 
    border-width: 1px; 
    border-style: solid; 

    /* These add a drop shadow to the main body */
    border-radius: 4px 4px 4px 4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
/* Mobile device support */
@media only screen and (max-width: 900px) {
	#main {
    		width: 97%;
	}
}
@media only screen and (max-width: 642px) {
	#main {
    		width: 100%;

		margin: 0px; 
    		border-width: 0px;

		/* border-width: 0px; -- we can't use this in non-scrolling mobile mode for the top banner */ 
		border-radius: 0px 0px 0px 0px;
		-webkit-border-radius:0px;
		-moz-border-radius:0px;
		box-shadow: 0px 0px 0px;
		-moz-box-shadow: 0px 0px 0px;
		-webkit-box-shadow: 0px 0px 0px;
	}
}

/* ---------------------------------------------------------------------------------- */

/* These are used as part of the Captcha "SecurImage" */
/* Refer to usage in "nav/confirm.php" */

#main div.note {
	/* font-size: 10pt; */
	margin: 5px 0px; padding: 10px 10px 10px 48px; border: 4px solid currentColor; text-align: left; line-height: 135%; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px;
}
#main div.note a {
	text-decoration: underline;
}
#main div.note a:hover {
	text-decoration: none;
}
#main div.alert {
	background: url("/nav/securimage/icons/alert.png") no-repeat 10px 50% rgb(155, 0, 0); border-color: rgb(255, 0, 0); color: rgb(248, 255, 0);
}
#main div.alert a {
	color: rgb(255, 255, 255);
}
#main div.info {
	background: url("/nav/securimage/icons/info.png") no-repeat 10px 50% rgb(0, 80, 186); border-color: rgb(0, 140, 255); color: rgb(214, 227, 255);
}
#main div.info a {
	color: rgb(255, 255, 255);
}
#main div.warn {
	background: url("/nav/securimage/icons/warning.png") no-repeat 10px 50% rgb(213, 170, 0); border-color: rgb(247, 210, 41); color: rgb(255, 255, 255);
}
#main div.warn a {
	color: rgb(255, 255, 255);
}

/* -------- Software Products Page --------- */

/* <div> to hold the product cards */
.software_products_box_wrapper {
	width:100%;
	text-align: center;
}

.productbox {
	display: inline-block;	/* So that we an center it */

	width: 20rem;
	margin-left:1.5em;
	margin-right:1.5em;
	margin-bottom: 5%;
}
.productbox_smaller {	/* For the 3 sub-products on the products page */
	margin-left:0.5em;
	margin-right:0.5em;
	padding: 0px 15px;
}
.productbox_wider {	/* For the wider text on the products page */
}
@media only screen and (min-width: 643px) {
	DIV#software_products_box_wrapper  {
		width:98%;
	}
	.productbox_smaller {
		width: 13rem;
	}
	.productbox_wider {
		width: 46rem;
	}
}
@media only screen and (max-width: 642px) {
	.productbox {	/* For the NRS & PT products */
		width: 17rem;
		margin-left:0;
		margin-right:0;
		margin-bottom: 5%;
	}
	.productbox_smaller {
		width: 17rem;
	}
	.productbox_wider {
		width:17rem;
	}
}

/* For the software products page */
.box-with-shadow-for-software-products {
    padding: 25px 15px;
    border-radius: 7px 7px 7px 7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    box-shadow: -1px 9px 18px 0px rgba(75, 81, 91, 0.5);
    -moz-box-shadow: -1px 9px 18px rgba(75, 81, 91, 0.5);
    -webkit-box-shadow: -1px 9px 18px rgba(75, 81, 91, 0.5);
    background: #ffffff;
    text-align: center;
}

/* Drop shadow on white tables such as on the order page */
.box-with-shadow-for-white-tables {
    padding: 10px 10px;
    border-radius: 7px 7px 7px 7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    box-shadow: -1px 9px 18px 0px rgba(75, 81, 91, 0.5);
    -moz-box-shadow: -1px 9px 18px rgba(75, 81, 91, 0.5);
    -webkit-box-shadow: -1px 9px 18px rgba(75, 81, 91, 0.5);
    background: #ffffff;
}