html{height: 101%;}

body {
background-image: url('graphics/layout/fadedown.jpg');
background-repeat:repeat-x;
background-color: #B9B9CD;
margin: 0px;
padding: 0px;
border: 0px;
}

/*PAGE DIVS*/
div.header
{
width: 100%;
min-height: 60px;
min-width: 240px;
border: 0px;
margin: 0px;
padding: 0px;
}

div.width
{
max-width: 1200px;
min-width: 240px;
height: 100%;
margin: 0 auto;
}

div.content
{
font-family: 'exo 2', Arial,Helvetica,sans-serif, FreeSans;
font-style: normal;
font-weight: 300;
font-size: 12px;
padding:0;
margin:0;
margin-left: 3%;
margin-right: 3%;
margin-top: 10px;
margin-bottom: 10px;
background-color: white;
color: #111;
list-style-type: none;
z-index: 0;
}

div.content-left
{
float: left;
width: 55%;
}

div.content-right
{
float:right;
width: 35%;
min-width: 150px;
}

div.left-half
{
float: left;
width: 48%;
}

div.right-half
{
float:right;
width:48%;
min-width: 150px;
}

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

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


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.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%;
}

div.footer
{
text-align: center;
clear:both;
color:gray;
min-height: 80px;
background-color: #B9B9CD;
border: 0px;
margin-left: 0px;
padding: 0px;
line-height: 12px;
}

/* BSUBMENU */
ul.bsubmenu
{
float:left;
width:100%;
padding: 0px;
margin: 0px;
list-style-type:none;
}

ul.bsubmenu li
{
display:inline;
}

a.bsubmenu
{
float:left;
width:105px;
height: 30px;
background-image: url('graphics/buttons/bsub_sd_out.png');
background-repeat: no-repeat;
text-decoration:none;
background-color: white;
color: #444;
text-align: center;
padding: 5px 0px;
font-size: 12px;
font-weight: 300;
line-height: 12px;
}

a.bsubmenu:hover
{
text-decoration: none;
color: #222;
}


a.bsubmenuselected
{
float:left;
width:105px;
height: 30px;
background-image: url('graphics/buttons/bsub_sd_in.png');
background-repeat: no-repeat;
text-decoration:none;
background-color: white;
color: #222;
text-align: center;
padding: 5px 0px;
font-size: 12px;
font-weight: 400;
line-height: 12px;
}

a.bsubmenuselected:hover
{
text-decoration: none;
color: #444;
}


/* YRMENU - for years in archive */
ul.yrmenu
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

ul.yrmenu li
{display:inline}

a.yrmenu
{
float:left;
width:50px;
height: 20px;
background-image: url('graphics/buttons/bsub_sd_out_50.png');
background-repeat: no-repeat;
text-decoration:none;
background-color: white;
color: #444;
text-align: center;
padding: 2px 0px;
font: normal normal 300 13px 'exo 2', arial, helvetica, sans-serif;
}

a.yrmenu:hover { text-decoration: none;
color: #222;
}

a.yrmenuselected
{
float:left;
width:50px;
height: 20px;
background-image: url('graphics/buttons/bsub_sd_in_50.png');
background-repeat: no-repeat;
text-decoration:none;
background-color: white;
color: #222;
text-align: center;
padding: 2px 0px;
font: normal normal 400 13px 'exo 2', arial, helvetica, sans-serif;
}

a.yrmenuselected:hover { text-decoration: none;
color: #444;
}

li.inline {display:inline}


div.print_news
{
font-family: 'exo 2', Arial,Helvetica,sans-serif;
font-size: 12px;
line-height: 16px;
padding:0;
margin:30px;
background-color: white;
color: black;
list-style-type: none;
}


h1 {
font-family: 'exo 2', Arial, Helvetica, sans-serif, FreeSans;
font-weight: 500;
font-size: 20px;
line-height: 20px;
color:#3838A5;
z-index: 2;
}

h2 {
font-family: 'exo 2', Arial, Helvetica, sans-serif, FreeSans;
font-weight: 400;
font-size: 15px;
margin-bottom: 4px;
margin-top: 4px;
color:#3838A5;
padding: 3px;
padding-left: 6px;
background-color: #CDCDE3 ;
clear: both;
border-radius: 4px;
}

h3 {
font-family: 'exo 2', Arial, Helvetica, sans-serif, FreeSans;
font-weight: 500;
font-size: 14px;
margin-bottom: 2px;
margin-top: 5px;
color:#3838A5;
}

.h2_inline
{
font-family: 'exo 2', Arial, Helvetica, sans-serif, FreeSans;
font-weight: 400;
font-size: 15px;
color:#3838A5;
}

b
{
font-weight: 500;
}


.bodycopy
{
font-family: 'exo 2', Arial,Helvetica,sans-serif;
font-size: 12px;
line-height: 16px;
}

.error_text {
font-family: 'exo 2', Arial,Helvetica,sans-serif;
font-weight: 500;
font-size: 13px;
line-height: 16px;
color: red;
}

a { text-decoration: none;}
a:hover { text-decoration: underline;}

.bodysmall
{
font-family: 'exo 2', Arial,Helvetica,sans-serif;
font-size: 10px;
line-height: 12px;
font-weight: 300;
}

.graylink {
font-size: 9px;
color: rgb(153, 153, 153);
}

.smallitalics
{
font-size: 11px;
font-style: italic;
}

table.newslist
{
font-family: 'exo 2', Arial,Helvetica,sans-serif;
font-size: 12px;
line-height: 13px;
}

table.newslist td
{
vertical-align: top;
}

/*Obsolete?*/
.side2
{
text-decoration:none;
padding-left: 8px;
color: #3838a5;
font: normal normal normal 10px 'exo 2', Arial, helvetica, sans-serif;
}

.title
{
font-family: 'exo 2', Arial,Helvetica,sans-serif;
font-size: 20px;
line-height: 20px;
font-weight: bold;
color: #3838A5;
}

.plus
{
font-family: 'exo 2', Arial,Helvetica,sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #3838A5;
background-color: #cccccc;
width: 30px;
vertical-align: top;
text-align: center;
cursor: pointer;
border-radius: 4px;
}

.faqquestion
{
font-weight: 400;
color: #3838A5;
cursor: pointer;
background-color: #eee;
padding-left: 4px;
}

.faqquestion:hover
{
color: blue;
text-decoration: underline;
}

.heading
{
font-family: 'exo 2', Arial,Helvetica,sans-serif;
font-weight: 500;
color: #3838A5;
font-size: 13px;
line-height: 16px;
}

.subheading
{
font-family: 'exo 2', Arial,Helvetica,sans-serif;
font-weight: bold;
color: black;
font-size: 13px;
line-height: 16px;
color: #3838A5;
}

.param
{
color: #555;
}

.corporate
{
font-family: 'exo 2', Arial,Helvetica,sans-serif;
font-weight: normal;
font-size: 10px;
line-height: 12px;
color: #333;
}


img.vvs_line_icon
{
float: left;
margin-right: 4px;
}

img.tx_bgnd
{
background-image: url("graphics/layout/tx_bgnd.png");
}

img.logo
{
margin: 0;
border:0;
padding:0;
float: left;
width: 170px;
height: 76px;
}

img.sdlogo
{
border: 0;
position:absolute;
right:10px;
top:10px;
}

div.search
{
float: right;
width: 140px;
height: 30px;
margin-top: 1px;
margin-bottom: 0px;
border: 0px;
padding-right: 10px;
padding-top: 10px;
text-align: right;
}


div.main
{
float:left;
width:100%;
min-height: 600px;
padding:0;
margin:0;
background-color: white;
color: black;
margin-top: 1px;
border-radius: 6px;
box-shadow: 4px 4px 8px #555;
}

/* TABLE FOR TECH SPECS */
table.spectable
{width: 100%; margin-right: -3px; border:0px; padding: 0px;}

table.spectable tr
{
background-color: #E5E5E5;
color: black;
}

table.specsubtable
{width: 100%; margin-right: -3px; border: 0px; padding: 0px; border-spacing: 1px;}

table.specsubtable tr
{
background-color: #E5E5E5;
color: black;
}

td.value
{
text-align: right;
vertical-align: top;
padding: 2px;
}

td.param
{
vertical-align: top;
width: 160px;
padding: 2px;
}

table.contacttable
{width: 97%; margin-right: -3px; border:0px; padding: 0px;}

tr.shaded
{
background-color: #f8f8f8;
}

td.country
{
vertical-align: top;
width: 150px;
background-color: white;
}

td.address
{
vertical-align: top;
width: 250px;
color: black;
background-color: white;
}

td.contact
{
vertical-align: top;
color: black;
background-color: white;
}


ul.footer
{
text-align: center;
width:100%;
min-width:300px;
padding:0;
margin: 0px;
background-color: white;
list-style-type:none;
}

a.footer:hover { text-decoration: none;
}

a.footer
{
text-decoration:none;
border-right:30px solid white;
font: normal normal normal 11px 'exo 2', Arial, helvetica, sans-serif;
line-height: 120%;
}

table.faqtable
{width: 100%; margin-right: -3px; border:0px; padding: 0px;}

table.downloadtable
{width: 100%; margin-right: -3px; border:0px; padding: 0px;}

table.formtable
{width: 100%; margin-right: -3px; border:0px; padding: 0px;}

table.formtable tr
{
background-color: #E5E5E5;
vertical-align: top;
}

table.formtable td
{
padding: 4px;
}

td.formprompt
{
padding: 3px;
width: 200px;
color: black;
}

td.quizprompt
{
padding: 3px;
width: 400px;
color: black;
}

td.formentry
{
padding: 3px;
color: black;
}

td.formheader
{
background-color: #3838A5;
color: #FADF24;
font-weight: 500;
padding-left: 4px;
}

tr.faqheader
{
background-color: #3838A5;
color:  #FADF24;
}

td.download_item
{
background-color: #E5E5E5;
color: black;
padding-left: 4px;
}

td.background
{
background-color: #E5E5E5;
vertical-align: top;
color: black;
padding: 10px;
}

table.layout_table
{width: 100%; margin-right: -3px; border:0px; padding: 0px;}

table.layout_table td
{
padding: 3px;
vertical-align: top;
}

div.cardpanel
{
text-align: right;
padding: 6px;
box-shadow: 4px 4px 5px #aaa;
border-radius: 4px;
}

div.cardpanel1
{
background-color: #E5E5E5;
padding: 5px;
margin-bottom: 2px;
border-radius: 4px;
}

div.featurebox
{
padding: 10px;
margin-left: 10px;
margin-right: 10px;
Background-color: #E5E5E5;
color: black;
font-family: 'exo 2', Arial,Helvetica,sans-serif;
font-size: 11px;
font-style: normal;
line-height: 12px;
font-weight: normal;
}

ul.fivepoints{
margin: 5px;
padding: 0;
list-style-type: none;
list-style: none;
/*fix for IE bug that positions bullet graphics behind floats */
height: 1%;
}

ul.fivepoints li
{
background-image: url("graphics/buttons/micro_6.png");
background-repeat: no-repeat;
background-position: 0px 3px;
padding-left: 15px;
margin-left: 0px;
text-decoration:none;
}

input, select, button
{
font-family: 'exo 2', Arial,Helvetica,sans-serif, FreeSans;
font-size: 12px;
line-height: 18px;
font-weight: 300;
color: rgb(0, 0, 0);
}

/*Obsolete?*/
img.slogan
{
position:absolute;
left: 450px;
top: 0px
}

div.icon_button
{
font-family: 'exo 2', Arial,Helvetica,sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #3838A5;
background-color: #cccccc;
width: 30px;
vertical-align: top;
text-align: center;
cursor: pointer;
border-radius: 4px;
}

img.button_icon
{
margin-top: 0px;
margin-left: auto;
margin-right: auto;
display: block;
}

td.button_cell
{
width: 30px;
vertical-align: top;
}


table.feature_table
{
font-family: 'exo 2', Arial,Helvetica,sans-serif;
font-size: 10px;
width: 100%; margin-right: -3px; border: 0px; padding: 0px; border-spacing: 1px;
}

table.feature_table td
{
vertical-align: top;
text-align: center;
padding: 2px;
font-family: 'exo 2', Arial,Helvetica,sans-serif;
font-weight: normal;
color: #3838A5;
font-size: 11px;
line-height: 14px;
padding-left: 10px;
}

td.dl_link
{
background-color: #E5E5E5;
padding-left: 4px;
}

table.feature_table tr
{
background-color: #E5E5E5;
}

/*Stop overflow*/
img,
embed,
object,
video {
  max-width: 100%;
  border: 0px;
}

.text_input {
  width: 95%;
  max-width: 350px;
}

.text_area
{
  width: 95%;
  height: 80px;
}

#back2topcontainer
{
padding: 5px 0px;
text-align: center;
}


div.video_thumb {
width: 160px;
height: 120px;
position:relative;
display:block;
}

img.centred
{
display: block;
margin-left: auto;
margin-right: auto;
}


/* MENU DEFINITIONS */
#menu, #menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #menu {
        max-width: 100%;
        margin: 2px auto;
        border: 1px solid #232366;
        background-color: #1A1A4C;
        background-image: linear-gradient(#3939A5, #1A1A4C);
        border-radius: 6px;
        box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    }

    #menu:before,
    #menu:after {
        content: "";
        display: table;
    }

    #menu:after {
        clear: both;
    }

    #menu {
    /*  zoom: 1; */
    }

    #menu li {
        float: left;
        border-right: 1px solid #222;
        box-shadow: 1px 0 0 #3939A5;
        position: relative;
    }

    #menu a {
        float: left;
        padding: 12px 25px;
        color: #ccc;
        font: Normal 14px 'exo 2', Arial, Helvetica;
        text-transform: uppercase;
        text-decoration: none;
    }

    #menu li:hover > a {
        color: #fafafa;
    }

    #menu ul {
        margin: 20px 0 0 0;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 38px;
        left: 0;
        z-index: 2;
        background: #3939A5;
        background: linear-gradient(#3939A5, #1A1A4C);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        border-radius: 3px;
        transition: all .2s ease-in-out;
    }

    #menu li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
    }

    #menu ul ul {
        top: 0;
        left: 210px;
        margin: 0 0 0 20px;
        box-shadow: -1px 0 0 rgba(255,255,255,.3);
    }

    #menu ul li {
        float: none;
        display: block;
        border: 0;
        box-shadow: 0 1px 0 #1A1A4C, 0 2px 0 #666;
    }

    #menu ul li:last-child {
        box-shadow: none;
    }

    #menu ul a {
        padding: 10px;
        width: 190px;
        max-width: 100%;
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
    }

    #menu ul a:hover {
        background-color: #4242BF;
        background-image: linear-gradient(#4949D4, #4242BF);
    }

    #menu ul li:first-child > a {
        border-radius: 3px 3px 0 0;
    }

    #menu ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: 40px;
        top: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #3939A5;
    }

    #menu ul ul li:first-child a:after {
        left: -6px;
        top: 50%;
        margin-top: -6px;

        border-left: 0;
        border-bottom: 6px solid transparent;
        border-top: 6px solid transparent;
        border-right: 6px solid #4949D4;
    }

    #menu ul li:first-child a:hover:after {
        border-bottom-color: #4949D4;
    }

    #menu ul ul li:first-child a:hover:after {
        border-right-color: #4949D4;
        border-bottom-color: transparent;
    }

    #menu ul li:last-child > a {
        border-radius: 0 0 3px 3px;
    }


/* TOUCH MENU DEFINITIONS */
#touch {
    position: absolute;
    top: 90px;
    left: 2px;
    z-index: 1
}

#tmenu, #tmenu ul {
    opacity: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    max-width: 300px;
}

#tmenu ul {
    background: #3939A5;
    display: block;
}

#tmenu {
    width: 100%;
    border: 1px solid #232366;
    background-color: #1A1A4C;
    box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}

#tmenu a {
    border: 1px solid #232366;
    padding: 10px 10px;
    color: #ccc;
    text-transform: uppercase;
    font: bold 14px 'exo 2', Arial, Helvetica;
    text-decoration: none;
    display: block;
}

#tmenu ul a {
    padding: 10px  30px;
    white-space: nowrap;
    text-transform: none;
    font: normal 14px 'exo 2', Arial, Helvetica;

}

.subsel
{
    background: #1A1A4C;
    max-width: 100%
}

/* Buttons - MJWEBB */
.sadieButton {
    background-color: #fff;
    display: inline-block;
    width: 100%;
    max-width: 175px;
    padding: 8px 0;
    margin: 0;
    border: 2px solid #3a38a8;
    color: #3a38a8;
    font-size: 14px;
    font-weight: 600;
    font-family: 'exo 2', Arial,Helvetica,sans-serif, FreeSans;
    line-height: 1.42857143;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 4px;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.75);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.sadieButton:hover {
    text-decoration: none;
    color: #fff;
    border: 1px solid transparent;
    background-color: #4647ad;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0);
    -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0);
    box-shadow: 1px 1px 3px 0px rgba(0,0,0,0);
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
}

/* Parallax M J Webb */
.parallax {
    /* The image used */
    background-image: linear-gradient(to bottom, rgba(71, 71, 173, 0.41) 0%,rgba(71, 71, 173, 0.41) 100%),url('graphics/parallax/sadie-student-parallax-01.jpg');

    /* Full height */
    height: 250px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    line-height: 250px;
    text-align: center;

    margin-bottom: 0px; /* was 10px; */
}
.parallax.two {
    background-image: linear-gradient(to bottom, rgba(71, 71, 173, 0.41) 0%,rgba(71, 71, 173, 0.41) 100%),url('graphics/parallax/sadie-student-parallax-02.jpg');
    height: 150px;
    line-height: 150px;
}
.parallax span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    text-align: center;
    color: #00ccef;
    font-size: 3em;
}
@media screen and (max-width: 1030px) {
  .parallax span {
      font-size: 2em;
  }
}
@media screen and (max-width: 520px) {
  .parallax span {
      font-size: 1.75em;
  }
}
.parallax span strong, .parallax span em {
    background-color: #1a1a50;
    padding: 5px 10px 8px 10px;
    margin-bottom: 5px;
    line-height: 1.7em;
}
.parallax span strong {
    font-size: 1.4em;
}
.parallax span em {
    background-color: #fff;
    color: #4747ad;
    padding: 5px 10px;
    margin-bottom: 5px;
}

/*Media query break points*/
@media screen and (max-width: 700px) {

    /*Content 2 column layout - disappears below breakpoint */
    div.content-left,
    div.content-right,
    div.left-half,
    div.right-half
    {
        float: none;
        width: 100%;

    }

}


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

    #back2topcontainer
    {
        display: none;
    }

}

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

    /*Content 3 column layout - disappears below breakpoint */
    .span_1_of_3, .span_2_of_3, .span_3_of_3
    {
        width: 100%;
    }

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


    /*hide menu items below breakpoint */
    .top, .topsel, .sub, .subsel, .bsub
    {
        display: none;
    }


}


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

    .menu_home
    {
        display: none;
    }

    div.search
    {
        position: absolute;
        top: 61px;
        right: 4px;
    }

    div.content
    {
        font-size: 15px;
    }

}

/* 	CSS for FormSpammerTrap */
#formspammertrapcontactform input[type="text"] {
  padding: 5px;
}
#formspammertrapcontactform select {
  width: auto;
  padding: 5px;
}
#formspammertrapcontactform input[type="checkbox"] {
    float: none;
    vertical-align: baseline;
}