body {
/*background: #bbb none repeat top left;*/
font-family: "Open Sans Regular", Arial, Helvetica, sans, san-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.4em;
color: #444;
background-color: #FFF;
padding: 0px;
margin: 0px;
}

html, body
{
/* to force the side scroll bar to always be on to stop the page jumping left
 * and to keep the footer bar in place on short pages. */
 height:100%;
}

b
{
font-weight: 600;
}

#backdrop{
min-height: 101%;
width: 100%;
/*background-color: #eee;*/
}

h1, h2, h3, h4, h5, h6, p {
font-family: "Open Sans", Arial, Helvetica, sans, san-serif;
margin-bottom: 4px;
text-decoration: none;
font-weight: 300;
letter-spacing: 0em;
color: #444;
}

h1 {
font-size: 30px;
line-height: 1.0em;
margin-top: 0px;
}

h2 {
font-size: 20px;
padding: 0 4px;
background-color: #678;
color: #fff;
letter-spacing: 0.0em;
width: 100%;
padding: 6px;
border: 0px;
margin-top: 0px;
margin-bottom: 8px;
border-radius: 2px;
box-sizing: border-box;
}

h2 a, a h2{
text-decoration: none;
}

h2.block-title {
text-transform: uppercase;
font-size: 16px;
color: #fff;
letter-spacing: 0.0em;
background-color: #678;
width: 100%;
padding: 6px;
border: 0px;
margin-top: 0px;
margin-bottom: 8px;
border-radius: 4px;
box-sizing: border-box;
}

h3 {
color: #345;
font-size: 18px;
}

h4 {
color: #345;
font-size: 16px;
}

h5, h6 {
font-size: 13px;
}

.smaller, span.smaller
{
font-size: 0.85em;
line-height: 1;
}

div.topmenu
{
    background-color: #345;
}

ul {
    list-style: outside disc;
    margin-left: 0px;
}

ul.unwanted li {
    position: relative;
    left: 0.5em;
}​


a, a:visited, a:link, a:active
{
    text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

button:focus, button:active, input:focus, input:active, select:focus, select:active, textarea:focus, textarea:active {
    box-shadow: 0px 0px 2px #0040A1;
    z-index: 1;
}

.vc
/*For voucher codes to distinguish between 0 and O, 1l and I etc.*/
{
font-size: 14px;
font-family: Consolas, "Roboto Mono", "Noto Sans Mono", "DejaVu Sans Mono", Monospace;
text-transform: uppercase;
}

#header
{
font-family: "Open Sans", Arial, Helvetica, sans, san-serif;
height: 32px;
background-color: #678;
color: #fff;
font-weight: 300;
font-size: 20px;
width: 100%;
}

#site_logo
{
height: 26px;
float: left;
margin-right: 20px;
}

#logo {
    margin: 3px;
    max-width: 200px;
}

#header_title
{
display: table-cell;
height: 28px;
vertical-align: middle;
}

.centred
{
    text-align: center;
}

.product_image, .centred_image
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.sel1, .sel2, .sel3, .sel4
{
    color: #0040A1;
    font-weight: 600;
}

.thumb
{
max-width: 100px;
margin-right: 5px;
margin-bottom: 5px;
}

.floated_left
{
    float: left;
    margin-right: 10px;
}

.floated_right
{
    float: right;
    margin-left: 10px;
}


div.table-wrapper
{
overflow-x:auto;
}

table.product-table
{
width: 100%;
}

table.product-table td
{
padding: 3px;
background-color: #fff;
}

tr.product-table-header td
{
background-color: #667788;
color: #fff;
font-weight: 600;
}


#page-title
{
margin-left: 10px;
}

.white-card{
background-color: #fff;
overflow: auto;
padding: 12px;
margin-bottom: 10px;
/*
border: 0px;
border-radius: 4px;
box-shadow: 1px 1px 3px #888;
*/
}

#page{
position: relative;
display: table;
width: 100%;
min-height: 100vh;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}

#content{
clear: left;
padding: 10px;
/*border-radius: 4px;
box-shadow: 1px 1px 3px #888;*/
padding-bottom: 190px;
}

.dark_red
{
   color: #800000;
}

#footer{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #345;
padding-left: 15px;
padding-right: 15px;
color: #fff;
border-radius: 3px;
box-shadow: 3px 3px 8px #666;
}

#footer a
{
 color: #bcf;
}

ul.menu{
padding: 0px 0px;
padding-left: 10px;
margin: 0px;
}

ul.menu li a{
display: block;
height:100%;
width: 100%;
color: #ffffff;
text-decoration: none;
margin: 2px 0px;
padding: 4px 0px;
text-align: center;
}

ul.menu li
{
display: inline;
float: left;
width: 16%;
margin-bottom: 2px;
}

.action_button
{
display: inline-block;
float: left;
width: 16%;
background-color: #314E9D;
background: linear-gradient(#3655B3, #293763);
color: #ffffff;
text-decoration: none;
margin: 2px 2px;
padding: 4px 0px;
text-align: center;
min-width: 110px;
border-radius: 3px;
box-shadow: 1px 1px 2px #444;
}

.nav_button
{
display: inline-block;
float: left;
width: 50px;
background-color: #314E9D;
background: linear-gradient(#3655B3, #293763);
color: #ffffff;
text-decoration: none;
margin: 2px 2px;
padding: 4px 0px;
text-align: center;
border-radius: 3px;
box-shadow: 1px 1px 2px #444;
}

.nav_list
{
margin: 2px 2px;
padding: 2px 2px;
}

.action_button:hover, .nav_button:hover {
background-color: #001F80;
font-weight: 600;
text-decoration: none;
}

select
{
 max-width: 100%;
}


ul.menu li a:hover
{
font-weight: 600;
}

ul.menu li a.active, .action_button.active {
background-color: #001760;
/*background: linear-gradient(#264AB8, #293763);*/
font-weight: 600;
box-shadow: 2px 2px 4px #00165D inset;
}

/*Specifications table*/
table.specs, table.specs2, table.specs3
{
width: 100%; margin-right: -3px; border: 0px; padding: 0px; margin: 0px; border-spacing: 1px;
}

table.specs tr, table.specs2 tr
{
background-color: #FFF;
}

table.specs tr.highlight_row, table.specs2 tr.highlight_row, table.specs3 tr.highlight_row
{
background-color: #eee;
}

table.specs th, table.specs2 th, table.specs3 th
{
text-align: left;
font-weight: 400;
color: #fff;
background-color: #345;
padding: 4px;
border-radius: 3px;
}

table.specs3 th.rowheader
{
text-align: left;
font-weight: 400;
color: #fff;
background-color: #678;
padding: 4px;
border-radius: 3px;
}


table.specs td, table.specs2 td, table.specs3 td, table.specs3 th
{
vertical-align: top;
padding: 4px;
border-radius: 3px;
}

table.specs3 td
{
background-color: #EDEDED;
}


table.specs td.nesting
{
vertical-align: top;
padding: 0px;
background-color: #eee;
}

table.nested
{
background-color: #eee;
}

table.specs td:first-child
{
width: 30%;
color: #293763;
background-color: #ccc;
}

/*for multiple columns*/
table.specs2 td:first-child
{
color: #293763;
background-color: #ccc;
}


table.specs td.subhead
{
background-color: #678;
color: #fff;
font-weight: 400;
}

table.specs2 td.subhead
{
background-color: #678;
color: #fff;
font-weight: 400;
}

.oktext {color: #00DD00;}
.errtext {color: #FF0000;}
.warntext {color: #DD8800;}

.inverrtext
{
font-weight: 600;
background-color: #FF0000;
color: #FFFFFF;
padding: 1px 4px 1px;
border-radius: 3px;
}

.invoktext
{
font-weight: 600;
background-color: #00DD00;
color: #FFFFFF;
padding: 1px 4px 1px;
border-radius: 3px;
}

.invwarntext
{
font-weight: 600;
background-color: #DD8800;
color: #FFFFFF;
padding: 1px 4px 1px;
border-radius: 3px;
}


/*  RESPONSIVE SECTIONS  */
.flow_section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.flow_col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.flow_col:first-child { margin-left: 0; }


/*  GROUPING  */
.flow_group:before,
.flow_group:after {
    content:"";
    display:table;
}
.flow_group:after {
    clear:both;
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}


/*  GRID OF TW0  */
.span_1_of_2 {
    width: 49.2%;
}

/*  GRID OF FIVE  */
.span_1_of_5 {
    width: 18%;
}

.span_3_of_5 {
    width: 59%;
}

div.icon_columniser
{
 padding: 0 10%;
}


/*FLOW USAGE:

<div class = "flow_section flow_group">
<div class = "flow_col span_1_of_3">
    Column 1 text here - 1/3rd width
</div><!-- end flow_col -->
<div class = "flow_col span_2_of_3">
    Column 2 text here - 2/3rd width
</div><!-- end flow_col -->
</div><!-- end flow_section flow_group -->
 *
 * Also requires media queries to change flow
 */

/*stop overflow*/
img, embed, object, video {
 max-width: 100%;
 max-height: 100%;
 border: 0px;
 height: auto; /*needed to override fixed height declarations and
 maintain aspect ratio when the width is restricted*/
 width: auto;
}

@media screen and (max-width: 700px){

    /*Flow columns:*/
    .span_1_of_3, .span_2_of_3, .span_3_of_3, .span_1_of_2, .span_1_of_5, .span_3_of_5{
        width: 100%
    }

    div.icon_columniser
    {
     padding: 0 0;
    }

    .flow_col{
        margin: 1% 0 1% 0;
    }

}


@media screen and (min-width: 979px){
    ul.menu li, .action_button
    {
    max-width: 110px;
    }


}

@media screen and (max-width: 1000px){

    ul.menu li, .action_button
    {
    width: 24%;
    }

}


@media screen and (max-width: 480px){


    ul.menu li, .action_button
    {
    width: 47.5%;
    }


}


@media screen and (max-width: 320px){


    ul.menu li, .action_button
    {
    width: 95%;
    }


}