/* ===============================================================================================
 * Theme Name:	NJT HTML5 / CSS3 Layout
 * Date:		30 Sep 2015
 * Description:	Neilson James Technology HTML5/CSS3 responsive framework
 * Version:		1.5
 * Author:		Neil Cudbertson
  * ==============================================================================================  */


/* -----------------------------------------------------------------------------------------------
 * Element Default Settings 
 * -----------------------------------------------------------------------------------------------  */

* { 
	margin: 0;
	padding: 0;
}

/* ----- html Document -----*/
html { 
	background-color: #000000;
    background: url('../images/background01.jpg') no-repeat top left fixed; 
	background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
}

/* ----- Body -----*/
body {
	clear: both; 
	color: #1E4B73;
	margin: 0 auto; 
	width: 90%;

	font-size: 15px; /* Base font size */
	font-family: 'Segoe UI', 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', sans-serif;
	text-align: left;
}

/* ----- Anchor Hyperlinks ----- */ 
a, a:link {
	color: #1E4B73;
	text-decoration: none;  /* removes underscore */
}

a:visited { color: #B85344; }

a:hover, a:active {
	color: #B85344;
	text-shadow: none !important;
}

p { font-size: 0.9em; }

/* ----- Headings -----*/
h2 { font-size: 1.571em; }	/* 22px */
h3 { font-size: 1.429em; }	/* 20px */
h4 { font-size: 1.286em; }	/* 18px */
h5 { font-size: 1.143em; }	/* 16px */
h6 { font-size: 1em; }		/* 14px */

h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: normal;
}

/* ----- Responsive Image -----*/	
img {
    max-width: 100%;
    width: 100%;
    height: auto;
/*    width: auto\9; /* ie8 */ 
}

.large-para {
	font-weight: 500;
	font-size: 1em;
	line-height: 1.7em ;		
	padding-left: 3%;
	padding-right: 3%;
}

.text-centre {
	text-align: center;
	padding-top: 0;
}

.green-text-centre {
	text-align: center;
	padding-top: 0;
	color: #0d8947;
}

.green-text-centre-normal {
	font-weight: normal;
	text-align: center;
	padding-top: 0;
	color: #0d8947;
}

.orange-text-centre {
	text-align: center;
	padding-top: 0;
	color: #C65911;
}

.orange-text-centre-normal {
	font-weight: normal;
	text-align: center;
	padding-top: 0;
	color: #C65911;
}

.red-text-centre {
	text-align: center;
	padding-top: 0;
	color: #B85344;
}

.red-text-centre-normal {
	font-weight: normal;
	text-align: center;
	padding-top: 0;
	color: #B85344;
}
.text-break {
	word-wrap;
	break-word;
	text-align: left;
	padding-top: 0;
	max-width: 100%;
    /* white-space: nowrap; */ 
    /* overflow: visible; */
    /* text-overflow: ellipsis; */
}

.text-long {
	word-wrap;
	break-word;
	text-align: left;
	/*padding-top: 0; */
	width: 100%;
    height: auto;
	/* min-height: 60px; */
	font-family: monospace;
    /* white-space: nowrap; */ 
    /* overflow: visible; */
    /* text-overflow: ellipsis; */
}

/* -----------------------------------------------------------------------------------------------
 * Theme Colours 
 * -----------------------------------------------------------------------------------------------  */	

/* ----- Theme Colours -----
 * Orange HEX #C65911  RGB(198,089,017) 
 * Red    HEX #B85344  RGB(184,083,068) 
 * Green  HEX #007236  RGB(000,114,054) 
 * Blue   HEX #1E4B73  RGB(030,075,115) 
 * Tan    HEX #CCB284  RGB(204,179,134) used for text
 * Tan    HEX #CCCDAA  RGB(204,205,170) used for background
 * Tan    HEX #FFFFCC  RGB(255,255,204) used for Lighter background
 * Grey   HEX #CCCCCC  RGB(204,204,204) used for borders
 * White  HEX #FFFFFF 
 */
.u-red {color: #B85344;}
.u-red-bold {color: #B85344; font-weight: bold;}

.u-green {color: #007236;}
.u-green-bold {color: #007236; font-weight: bold;}

.u-blue {color: #1E4B73;}
.u-blue-bold {color: #1E4B73; font-weight: bold;}

.u-tan {color: #CCB284;}
.u-tan-bold {color: #CCB284; font-weight: bold;}

.u-white {color: #FFFFFF;}
.u-white-bold {color: #FFFFFF; font-weight: bold;}

.colour-green {color: #4CAF50;}

/* ----- COMMENTS -----
 * The above 'Class' colours are used for specific word & phrases 
 * where multiple colours are required within same paragraph */
 

/* -----------------------------------------------------------------------------------------------
   Page Header Banner  
   ----------------------------------------------------------------------------------------------- */
.banner {
	width: 100%;
	height: auto;
	margin: 0 auto;
	margin-top: 10px;
/*	border: #cccdaa solid; */
}

.banner table {
	display: inline;
	width: 100%;
	height: auto;
	margin: 0 auto;
/*	border: #cccdaa solid; */
}

.banner tr {
    overflow: visible;
	width: 100%;
    vertical-align: top;
}
 
.banner td {
/*	border-style: solid; */
}    

td.banner-col1 {
	width: 15%;
}

td.banner-col2 {
	width: 57%; 
	padding-left: 2%; 
}

td.banner-col3 {
	width: auto; 
}

.banner-col3 ul {
	list-style: none; 
	text-align: right; /* Set for Child li*/
}

.banner-col3-list li {
	display: block; 
	font-size: 100%;
	font-weight: normal;
	line-height: 30px;
/*    float: right; */

}

.banner-col3-list li div{
	width: 50%;
	height: auto;
	padding-left: 50%;
}

/* -----------------------------------------------------------------------------------------------
   Dropdown Menu  
   ----------------------------------------------------------------------------------------------- */

/* Add a black background color to the top navigation */
.menu {
    /*background-color: #333;*/
    color: white;
    background-color: #1E4B73;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.menu a {
    float: left;
    display: block;
    text-align: center;
    /*padding: 14px 16px;*/
    padding: 12px 12px;
    text-decoration: none;
    color: white;
    font-size: 14px;
	font-family: 'Segoe UI', 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', sans-serif;
	
	/*
	font: inherit; /* Important for vertical align on mobile phones */
	
	margin: 0; /* Important for vertical align on mobile phones */
}

/* Hide the link that should open and close the menu on small screens */
.menu .icon {
    display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Style the dropdown button to fit inside the menu */
.dropdown .dropbtn {
    font-size: 14px; 
    border: none;
    outline: none;
    color: white;
    padding: 12px 12px;
    background-color: inherit;
    /*font-family: inherit;*/
	
	/*
	font: inherit; /* Important for vertical align on mobile phones */
	font-family: 'Segoe UI', 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', sans-serif;
	
	margin: 0; /* Important for vertical align on mobile phones */
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
	color: #01447E;
    /*background-color: #f9f9f9;*/
    background-color: #f9f9f9;
    min-width: 160px;
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
    float: none;
    color: #01447E;
    /*padding: 12px 16px;*/
    padding: 6px 8px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.menu a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
	text-shadow: none !important;
}

/*
.dropdown-content a:visited {
	color: #B85344;
	text-shadow: none !important;
}
*/

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}


/* -----------------------------------------------------------------------------------------------
   New Mega Dropdown Submenu  
   ----------------------------------------------------------------------------------------------- */

/* The dropdown container */

.megadropdown {
	float: left;
	overflow: hidden;
}

/* Dropdown button */
.megadropdown .megadropbtn {
	font-size: 14px; 
	border: none;
	outline: none;
	color: white;
	padding: 12px 12px;
	background-color: inherit;
	
	/*
	font: inherit; /* Important for vertical align on mobile phones */
	font-family: 'Segoe UI', 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', sans-serif;
	
	margin: 0; /* Important for vertical align on mobile phones */
}

/* Dropdown content (hidden by default) */
.megadropdown-content {
	display: none;
	position: absolute;
	color: #1E4B73;
	background-color: white;
	width: 90%;
	left: 5%;
	padding-left: 12px;
	padding-bottom: 12px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

/* Mega Menu header, if needed */
.megadropdown-content .megaheader {
	/*background: red;*/
	padding: 3px;
	color: #4CAF50;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.megadropdown:hover .megadropdown-content {
	display: block;
}

/* Create three equal columns that floats next to each other */
.megacolumn {
	float: left; 
	width: 32%;
	padding-left: 12px;
	/*background-color: white;*/
	/*color: #000000;*/
	height: auto;
}

.megacolumn ol {
	padding-left: 15px;
}

/* Style links inside the columns */
.megacolumn a {
	float: none;
	color: #01447E;
	background-color: white;
	padding-top: 0px;
	padding-bottom: 3px;
	text-decoration: none;
	display: block;
	text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.megadropdown:hover .megadropbtn {
    background-color: #555;
    color: white;
	text-shadow: none !important;
}

/*
.megacolumn a:visited {
	color: #B85344;
	text-shadow: none !important;
}
*/

/* Add a background color on Anchor link hover */

.megacolumn a:hover {
	background-color: #ddd;
    color: #B85344;
}


/* Add a grey background to dropdown links on hover */
/*
.megadropdown-content a:hover {
    background-color: #CCCCCC;
}
*/

/* Clear floats after the columns */
.megarow:after {
	content: "";
	display: table;
	clear: both;
}


/* -----------------------------------------------------------------------------------------------
   New Breadcrumbs Menu  
   ----------------------------------------------------------------------------------------------- */
ul.breadcrumb {
    padding: 3px 6px 6px 6px; /* Top > Right > Bottom > Left */
    list-style: none;
    background-color: #eee;
}

/* Display list items side by side */
ul.breadcrumb li {
    display: inline;
    font-size: 12px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
    padding: 3px;
    color: black;
    content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
    color: #0275d8;
    text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------------------
   Accordion for Main Routine Pages  
   -------------------------------------------------------------------------------------- */

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #eee;
    color: #1E4B73;
    font-size: 14px;
	font-weight: bold;
    cursor: pointer;
    padding: 8px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion.active, .accordion:hover {
    background-color: #FFFFCC;
}

.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

.accordion.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}

/* --------------------------------------------------------------------------------------
   Content Wrappers  
   -------------------------------------------------------------------------------------- */
.content-wrapper {
    font-size: 0.9em;
	width: 100%;
	height: auto;

	border-style: none;
/*	border: #CCCCCC solid;  */
}

.content {
	/* NOTE: #filterGroup in this Div is Used to display/hide articles using javascript */
	width: 100%;
	height: auto;

	border-style: none;
/*	border: #CCCCCC solid;  */
}
/* -----------------------------------------------------------------------------------------------
   Content Summary  #e3f2cd
   ----------------------------------------------------------------------------------------------- */
.news-summary {
	/* background-color: #e3f2cd; */	
	margin: 2% auto;

	width: 96%;              /* 100% Minus 4% padding */
	padding: 10px 2%;
	height: auto;
		
	border-style: solid; 
	border-width: 1px;
	border-color: #CCCCCC;
/*	box-shadow: 6px 6px 5px #aaaaaa; */
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;		
}

.content-summary {
	background-color: #FFFFCC;	
	margin: 2% auto;

	width: 96%;              /* 100% Minus 4% padding */
	padding: 10px 2%;
	height: auto;
		
	border-style: solid; 
	border-width: 1px;
	border-color: #CCCCCC;
/*	box-shadow: 6px 6px 5px #aaaaaa; */
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;		
}

.content-summary h2, .news-summary h2 {
	color: #1E4B73;	
	text-align: center;
}

.content-summary p, .news-summary p {
	color: #1E4B73;	
	height: auto;
	padding-top: 10px;
	font-size: 100%;
	font-weight: normal;
	text-align: justify;
}

/* -----------------------------------------------------------------------------------------------
   Content Arcticle  
   ----------------------------------------------------------------------------------------------- */

.divider {
    border: 0;
    height: 2px;
    background: #1E4B73;
    background-image: linear-gradient(to right, #ccc, #1E4B73, #ccc);
}

.content-table, .content-article, .content-news {
	overflow: hidden;

	background-color: #FFFFFF;	

	margin: 2% auto;
	width: 96%;              /* 100% Minus 4% padding  */		
	padding: 10px 2% 20px 2%;
	height: auto;

	border-style: solid; 
	border-width: 1px;
	border-color: #CCCCCC; 
/*	box-shadow: 6px 6px 5px #aaaaaa; */
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;		
}

.content-news h3 {
	color: #B85344;	
	text-align: center;
}

.content-table h3, .content-article h3 {
	color: #1E4B73;	
	text-align: center;
}

.content-table h4, .content-article h4,  .content-news h4 { padding-bottom: 1%; }
.content-table h5, .content-article h5, .content-news h5 { padding-top: 1%; }	

.content-table p, .content-article p, .content-news p {
	color: #1E4B73;	
	height: auto;
	padding-top: 5px;
	font-size: 100%;
	font-weight: normal;
	text-align: justify;
}

.content-table a, .content-article a, .content-news a {
	font-size: 100%;
	font-weight: 900;
}

.content-table th a {
	color: #FFFFFF;
	text-shadow: none !important;
}

.content-table td a {
	color: #B85344;
	text-shadow: none !important;
}

.content-table a:hover, .content-table a:active, .content-table a:visited {
	color: #B85344;
	text-shadow: none !important;
}

.content-table ul, .content-table ol, .content-article ul, .content-article ol, .content-news ul, .content-news ol {
	overflow: hidden;        /* Required to position bullets next to List Item text. */
	color: #1E4B73;	
	width: auto; 
	height: auto;
	padding: 5px 0px 5px 20px;

	font-size: 100%;
	font-weight: normal;
	text-align: left;
}

/* -----------------------------------------------------------------------------------------------
   Tables  
   ----------------------------------------------------------------------------------------------- */

.content-table a {
	color: #FFFFFF;
	text-shadow: none !important;
}

table#t01, table#t02 {
	margin: 0 auto;
	margin-top: 20px;
	width: 100%;
 	border-spacing: 1px;
	text-align: center;
}

table#t03, table#04 {
	margin: 0 auto;
	margin-top: 20px;
	width: 100%;
 	border-spacing: 1px;
	text-align: left;
}
table#t01, #t01 th, #t01 td, table#t02, #t02 th, #t02 td, table#t03, #t03 th, #t03 td, table#t04, #t04 th, #t04 td {
   border: 1px solid #CCCCCC; 
}

#t01 th, #t02 th, #t03 th, #t04 th {
	color: #FFFFFF;
	background-color: #1E4B73;
}

#t01 th, #t01 td, #t02 th, #t02 td, #t03 th, #t03 td, #t04 th, #t04 td {
	padding: 5px;
}

#t01 tr td:nth-child(1), #t02 tr td:nth-child(1) { text-align: left; }    /* Option      */
#t01 tr td:nth-child(2), #t02 tr td:nth-child(2) { text-align: center; }  /* Period      */
#t01 tr td:nth-child(3), #t02 tr td:nth-child(3) { text-align: center; }  /* Price       */
#t01 tr td:nth-child(4), #t02 tr td:nth-child(4) { text-align: left; }    /* Description */
#t01 tr td:nth-child(5), #t02 tr td:nth-child(5) { text-align: center; }  /* Delivery    */


#t03 tr td:nth-child(1) { width: 25%; vertical-align:top; }  /* VRM */
#t03 tr td:nth-child(2) { width: 25%; vertical-align:top; }  /* NDR */
#t03 tr td:nth-child(3) { width: 25%; vertical-align:top; }  /* TRM */
#t03 tr td:nth-child(4) { width: 25%; vertical-align:top; }  /* TBC */

#t01col1, #t02col1 { width: 10%; }
#t01col5, #t02col5 { width: 20%; }

#t03col3 { width: 25%; }

#t04 tr td:nth-child(1) { width: 10%; vertical-align:top; }  /* Date          */
#t04 tr td:nth-child(2) { width: 10%; vertical-align:top; }  /* Licence Type  */
#t04 tr td:nth-child(3) { width: 80%; vertical-align:top; }  /* Comments      */


.screenshot-20pc {
	float: left;
	width: 20%;
	height: auto;
	padding-right: 20px;       /* as it is floated left */
	padding-bottom: 20px;
}

.screenshot-30pc {
	float: left;
	width: 35%;
	height: auto;
	padding-right: 20px;       /* as it is floated left */
	padding-bottom: 20px;
}

.tablescreenshot-40pc {
	float: left;
	width: auto;
	height: 40%;
	padding-right: 20px;       /* as it is floated left */
	padding-bottom: 20px;
}

.screenshot-40pc {
	float: left;
	width: 40%;
	height: auto;
	padding-right: 20px;       /* as it is floated left */
}

.screenshot-50pc {
	float: left; 
	width: 50%;
	height: auto;
	padding-right: 20px;       /* as it is floated left */
}

.screenshot-60pc {
	float: left;
	width: 60%;
	height: auto;
	padding-right: 20px;       /* as it is floated left */
}

.screenshot-100pc {
	clear: left; 
	width: 100%;
	height: auto;
/*	padding-right: 0px; */      /* as it is floated left */
/*	border: #CCCCCC solid; */
}

.clear-float {
	clear: left; 
	width: 100%;
	height: auto;
}

.no-space {
	padding-top; 0;
	padding-bottom: 0;
	line-height: normal;
}
/* checker-download-150 */

#download-vatchecker {
	background:url('../images/vatchecker-download-150.png') left center no-repeat;
	width: 150px;
	height: 51px;
	line-height: 51px;
	display:inline-block;    
	text-decoration: none;
	vertical-align: bottom;
}

#download-mtddemo {
	background:url('../images/vatdemo-download-150.png') left center no-repeat;
	width: 150px;
	height: 51px;
	line-height: 51px;
	display:inline-block;    
	text-decoration: none;
	vertical-align: bottom;
}

#download-mtdinstall {
	background:url('../images/vatmanager-download-150.png') left center no-repeat;
	width: 150px;
	height: 51px;
	line-height: 51px;
	display:inline-block;    
	text-decoration: none;
	vertical-align: bottom;
}

#download-mtdserver {
	background:url('../images/vatmanager-download-150.png') left center no-repeat;
	width: 150px;
	height: 51px;
	line-height: 51px;
	display:inline-block;    
	text-decoration: none;
	vertical-align: bottom;
}

#download-vrmmanager {
	background:url('../images/vatmanager-download-150.png') left center no-repeat;
	width: 150px;
	height: 51px;
	line-height: 51px;
	display:inline-block;    
	text-decoration: none;
	vertical-align: bottom;
}

#download-vrmform {
	background:url('../images/vatform-download-150.png') left center no-repeat;
	width: 150px;
	height: 51px;
	line-height: 51px;
	display:inline-block;    
	text-decoration: none;
	vertical-align: bottom;
}
#download-ba {
	background:url('../images/ba-download60-150.png') left center no-repeat;
	width: 150px;
	height: 51px;
	line-height: 51px;
	display:inline-block;    
	text-decoration: none;
	vertical-align: bottom;
}

/* -----------------------------------------------------------------------------------------------
   Media Only Div  
   ----------------------------------------------------------------------------------------------- */
.media-only {
	display: none;    
}

/* -----------------------------------------------------------------------------------------------
   Contact Form  
   ----------------------------------------------------------------------------------------------- */
.form-error { color: #B85344; }

.contact-form {
	overflow: hidden;

	background-color: #FFFFCC;	

	margin: 20px auto;
	width: 96%;              /* 100% Minus 4% padding  */		
	padding: 10px 2%;
	padding-bottom: 20px;
	height: auto;

	border-style: solid; 
	border-width: 1px;
	border-color: #CCCCCC; 
/*	box-shadow: 6px 6px 5px #aaaaaa; */
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;		
}

.contact-form h3 {
	color: #1E4B73;	
	text-align: center;
	padding-bottom: 1%;
}

.contact-table {
	background-color: #FFFFFF;	
	margin: 0 auto;
	width: 100%;
	padding: 20px 20px;
	text-align: left;
 	border-spacing: 1px;
	border: 1px solid #CCCCCC; 
}

.contact-table td {
	vertical-align: top;
	text-align: left;
	padding: 5px;
}

.contact-table tr td:nth-child(1) { min-width: 100px; width: 20% }      /* Label */
.contact-table tr td:nth-child(2) { width: auto }                       /* Input */
.contact-table tr td:last-child(1) { width: auto }                      /* Reset */
.contact-table tr td:last-child(2) { width: auto }                     /* Submit */

.contact-form input, .contact-form textarea {
	font-family: 'Segoe UI', 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', sans-serif;
	font-size: 100%;
	border: 2px solid #ccc;
}

.contact-form label, .contact-form input  {
	width: 100%;
	height: 30px;	
}

.contact-table textarea {
	width: 100%;
	height: 90px;
}

.contact-table textarea:focus, .contact-table input:focus {
	border: 2px solid #B85344;
}

.contact-table textarea:hover, .contact-table input:hover {
	border: 2px solid #B85344;
}

.contact-table button {
	width: 100px; 
	height: 40px;
	font-size: 120%;
}

#resetButton { float: left; }
#submitButton { float: right; }


/* -----------------------------------------------------------------------------------------------
   PayPal Form  
   ----------------------------------------------------------------------------------------------- */
.paypal-button form {
	margin: 20px 20px;
	height: 120px;

/*
	overflow: hidden;
	background-color: #FFFFCC;	

	width: auto;              	
	padding: 10px 2%;
	padding-bottom: 20px;
	height: 100px;

	border-style: solid; 
	border-width: 1px;
	border-color: #CCCCCC; 
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;		
*/
}


/* -----------------------------------------------------------------------------------------------
   Page Footer  
   ----------------------------------------------------------------------------------------------- */
.page-footer {
/*	float: left; */
	font-size: 0.9em;
	color: #1E4B73;	
	background-color: #FFFFCC;
		
	width: 96%;
	height: auto;
	margin: 2% auto;
	padding: 1% 2%;
	border-style: solid;
	border-width: 1px;
	border-color: #CCCCCC;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
}

.page-footer p {
	margin: 0 auto;
	padding: 0 2%;
	text-align: center;
}

.page-footer ul {
	text-decoration: none;
	text-align: center;
	
}

.page-footer li {
	display: inline;	
	padding: 1% 2%;
	text-align: center;
}


/* ===============================================================================================
   Media Queries  
   =============================================================================================== */
/* MODEL				DEVICE W x H
 * Galaxy S3 to S5		320px x 640px
 * iPhone 4				320px x 480px
 * iPhone 5				320px x 568px
 * iPhone 6				375px x 667px
 * iPhone 6+			414px x 736px
 * iPad					768px x 1024px
*/

/* The "responsive" class is added to the '.menu' with JavaScript when the user clicks on the icon.
 * This class makes the '.menu' look good on small screens (display the links vertically instead of horizontally) */
@media only screen and (max-width: 736px),
(min-device-width: 180px) and (max-device-width: 736px) {
	/* Devices with Width <= 736 pixels E.G S5 */	

	body {
		font-size: 12px; /* Base font size */
	}

  	/* -------------------------------------------------------------------------------------------
	   Page & Footer Menu  
	   ------------------------------------------------------------------------------------------- */
	.menu a:not(:first-child), .dropdown .dropbtn, .megadropdown .megadropbtn {
    	display: none;
  	}
  
  	.menu a.icon {
    	float: right;
    	display: block;
  	}
	
	.menu.responsive {position: relative;}
	
	
	.menu.responsive a {
	    float: none;
	    display: block;
	    text-align: left;
		padding: 1% 1%;
	}
	
	.menu.responsive a.icon {
    	position: absolute;
    	right: 0;
    	top: 0;
	}

	.menu.responsive .dropdown {float: none;}
	.menu.responsive .dropdown .dropbtn a {padding: 0% 1%;}
	.menu.responsive .dropdown-content {position: relative; padding: 1% 1%;}
	.menu.responsive .dropdown-content a {padding: 0% 1%;}
	
	.menu.responsive .dropdown .dropbtn {
		display: block;
	    width: 100%;
	    text-align: left;
		padding: 1% 1%;
	}

	.menu.responsive .megadropdown {float: none;}
	.menu.responsive .megadropdown-content {position: relative;}
	
	.menu.responsive .megadropdown .megadropbtn{
		display: block;
	    width: 100%;
	    text-align: left;
		padding: 1% 1%;
	}

	.menu.responsive .megadropdown-content {
		width: 100%;
		left: 0;
		padding: 0% 1%;
	}

	.menu.responsive .megacolumn {
		display: block;
	    width: 100%;
	    text-align: left;
		padding: 1% 1%;
	}

	.menu.responsive .megacolumn a {
		display: block;
	    width: 100%;
	    text-align: left;
		padding: 0% 1%;
	}

	.menu.responsive .megaheader {
		display: none;
	}
	.screenshot-20pc, .screenshot-30pc, .screenshot-40pc, .screenshot-50pc, .screenshot-60pc {
		clear: both;
		margin 0 auto;
		padding: 0;
		padding-bottom: 2%;
		width: 100%;
		height: auto; 
	}

}


@media only screen and (max-width: 950px),
(min-device-width: 180px) and (max-device-width: 950px){
	.accordion {
	    font-size: 10px;
	    padding: 6px;
	}


	/* -------------------------------------------------------------------------------------------
	   Page Header Banner  
	   ------------------------------------------------------------------------------------------- */
	.banner table, .banner tr, .banner td {
		display: block;
		margin: 0 auto;
		width: 100%;
		padding: 0;	
		text-align: center;
	}

	.banner-col1 img { max-width: 25%; }

	.banner-col2 img { max-width: 100%; }


	td.banner-col3 {
		display: none; 
	}

	/* -------------------------------------------------------------------------------------------
	   Tables  
	   ------------------------------------------------------------------------------------------- */
	#t01 tr th:nth-child(1), #t02 tr th:nth-child(1) { width: 50%; text-align: left; }    /* Option      */
	#t01 tr th:nth-child(2), #t02 tr th:nth-child(2) { width: 25%; text-align: center; }  /* Period      */
	#t01 tr th:nth-child(3), #t02 tr th:nth-child(3) { width: 25%; text-align: center; }  /* Price       */
	#t01 tr th:nth-child(4), #t02 tr th:nth-child(4) { display: none; }                   /* Description */
	#t01 tr th:nth-child(5), #t02 tr th:nth-child(5) { display: none; }                   /* Delivery    */

	#t01 tr td:nth-child(1), #t02 tr td:nth-child(1) { width: 50%; text-align: left; }    /* Option      */
	#t01 tr td:nth-child(2), #t02 tr td:nth-child(2) { width: 25%; text-align: center; }  /* Period      */
	#t01 tr td:nth-child(3), #t02 tr td:nth-child(3) { width: 25%; text-align: center; }  /* Price       */
	#t01 tr td:nth-child(4), #t02 tr td:nth-child(4) { display: none; }                   /* Description */
	#t01 tr td:nth-child(5), #t02 tr td:nth-child(5) { display: none; }                   /* Delivery    */

	#t03 tr th:nth-child(1) { display: none; }  /* checker   */
	#t03 tr th:nth-child(2) { width: 100%; }    /* MTD       */
	#t03 tr th:nth-child(3) { display: none; }  /* Old Style */
	#t03 tr th:nth-child(4) { display: none; }  /* BA        */

	#t03 tr td:nth-child(1) { display: none; }  /* checker   */
	#t03 tr td:nth-child(2) { width: 100%; }    /* MTD       */
	#t03 tr td:nth-child(3) { display: none; }  /* Old Style */
	#t03 tr td:nth-child(4) { display: none; }  /* BA        */

	#t04 tr th:nth-child(1) { display: none; }  /* Date         */
	#t04 tr th:nth-child(2) { display: none; }  /* Licence Type */
	#t04 tr th:nth-child(3) { width: 100%; }    /* Comments     */

	#t04 tr td:nth-child(1) { display: none; }  /* Date         */
	#t04 tr td:nth-child(2) { display: none; }  /* Licence Type */
	#t04 tr td:nth-child(3) { width: 100%; }    /* Comments     */

	/* -------------------------------------------------------------------------------------------
	   Media Only Div  
	   ------------------------------------------------------------------------------------------- */
	.media-only {
		display: block;    
	}

	/* -------------------------------------------------------------------------------------------
	   Content Wrappers  
	   ------------------------------------------------------------------------------------------- */
	.content-wrapper {
		width: 100%;
	}
	
	/* -------------------------------------------------------------------------------------------
	   Content Article  
	   ------------------------------------------------------------------------------------------- */
	.content-table { display: block; } 

	.content-article h4, .content-news h4 { clear: both; }

	.content-article p, .content-news p { font-size: 100%; }

	.content-article ul, .content-article ol, .content-news ul, .content-news ol {
		display: block;
	}

	.screenshot-100pc {
		clear: both;
		margin 0 auto;
		padding: 0;
		padding-bottom: 2%;
		width: 100%;
	}

	.screenshot-20pc, .screenshot-30pc, .screenshot-40pc, .screenshot-50pc {
		clear: both;
		margin 0 auto;
		padding: 0;
		padding-bottom: 2%;
		width: 100%;
	}
	
	/* -------------------------------------------------------------------------------------------
	   Content Form  
	   ------------------------------------------------------------------------------------------- */
	.contact-form {
		width: 96%;              /* 100% Minus 4% padding  */		
	}

	/* -------------------------------------------------------------------------------------------
	   Page Footer 
	   ------------------------------------------------------------------------------------------- */
	.page-footer li {
		display: block;	
		padding: 0;
		text-align: center;
	}

}