@import url(reset.css);

html {
    background: #a0d0f4;
    background: -webkit-linear-gradient(#9fcff1, #a0d0f4); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#9fcff1, #a0d0f4); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#9fcff1, #a0d0f4); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#8888a7, #ddddeb, #8888a7); /* Standard syntax (must be last) */
    background: white;

    /*Sets default background colour for entire page*/

}

body {
    margin: 0 auto; /*centres the body in the viewport */
    padding: 0;
    border: 0;
    /* This removes the border around the viewport in old versions of IE */
    /* min-width:800px; Minimum width of layout - remove line if not required */
    /* The min-width property does not work in old versions of Internet Explorer */
    text-align: center;
    /*Setting this helps to ensure design stays centred in older browsers - use text-align left on inner elements to achieve left aligned text. */

    /*Sets default background colour for entire page*/


    max-width: 960px;
    /*Set for fixed max-width for entire site - remove if not necessary. */

}

/* ------------------ Fonts ------------------ */
body {
    font-family: Verdana, Arial, sans-serif;

}

#header, #footer, #skip-link, ul.links, .item-list .pager, table, .breadcrumb {
    font-family: Verdana, Arial, sans-serif;
}

input, textarea, select, a.button {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
}

/* Some standard page settings - to be over-ridden where there are special requirements */

/**
 * Hide elements from all users.
 *
 * Used for elements which should not be immediately displayed to any user. An
 * example would be a collapsible fieldset that will be expanded with a click
 * from a user. The effect of this class can be toggled with the jQuery show()
 * and hide() functions.
 */
.element-hidden {
    display: none;
}

/**
 * Hide elements visually, but keep them available for screen-readers.
 *
 * Used for information required for screen-reader users to understand and use
 * the site where visual display is undesirable. Information provided in this
 * manner should be kept concise, to avoid unnecessary burden on the user.
 * "!important" is used to prevent unintentional overrides.
 */
.element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

/**
 * The .element-focusable class extends the .element-invisible class to allow
 * the element to be focusable when navigated to via the keyboard.
 */
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
    position: static !important;
    clip: auto;
}

/**
 * Markup free clearing.
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
 */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* IE7 */
*:first-child + html .clearfix {
    min-height: 1%;
}

a {
    color: #369;
    text-decoration: underline;
}

a:hover, a:active, a:focus {
    color: #00f;
}

a:visited {
    color: #800080;
}

h1, h2, h3 {
    margin: .8em 0 .2em 0;
    padding: 0;

}

p {
    margin: .4em 0 .8em 0;
    padding: 0;
}

xp:first-child {
    margin: 0;
}

img {
    max-width: 100%;
    outline: 0;
    height: auto;
}

ul {
    padding: 0 0 7px 20px;
    margin: 0;
    list-style-type: disc;
}

li {
    list-style: disc;
    margin:.5em 10% .5em 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 1.0em 0 0.5em;
    font-weight: inherit;
}

h1 {
    font-size: 1.5em;
    font-weight: bold;

}

h2, caption {
    font-size: 1.25em;
    font-weight: bold;
    color: #2e3591;
}

h3 {
    font-size: 1.15em;
    font-weight: bold;
}

h4 {
    font-size: 1.05em;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

tr.odd {
    background-color: #dddddd;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

/* ------------------ Code Styles ------------------ */

code, pre, kbd, samp, var {
    padding: 0 0.4em;
    font-size: 0.77em;
    font-family: Menlo, Consolas, "Andale Mono", "Lucida Console", "Nimbus Mono L", "DejaVu Sans Mono", monospace, "Courier New";
}

code {
    background-color: #f2f2f2;
    background-color: rgba(40, 40, 0, 0.06);
}

pre code, pre kbd, pre samp, pre var, kbd kbd, kbd samp, code var {
    font-size: 100%;
    background-color: transparent;
}

pre code, pre samp, pre var {
    padding: 0;
}

.description code {
    font-size: 1em;
}

kbd {
    background-color: #f2f2f2;
    border: 1px outset #575757;
    margin: 0 3px;
    color: #666;
    display: inline-block;
    padding: 0 6px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

pre {
    background-color: #f2f2f2;
    background-color: rgba(40, 40, 0, 0.06);
    margin: 10px 0;
    overflow: hidden;
    padding: 15px;
    white-space: pre-wrap;
}

/* ------------------ Table Styles ------------------ */
table {
    border: 0;
    border-spacing: 0;
    font-size: 0.857em;
    margin: 5% 0;
    width: 100%;
}

table table {
    font-size: 1em;
}

#footer-wrapper table {
    font-size: 1em;
}

table tr th {
    background: #757575;
    background: rgba(0, 0, 0, 0.51);
    border-bottom-style: none;
}

table tr th, table tr th a, table tr th a:hover {
    color: #FFF;
    font-weight: bold;
}

table tbody tr th {
    vertical-align: top;
}

tr td, tr th {
    padding: 4px 9px;
    border: 1px solid #fff;
    text-align: right; /* LTR */
}

td:first-child, th:first-child {
    text-align: left;
}

tr.odd {
    background: #e4e4e4;
    background: rgba(0, 0, 0, 0.105);
}

tr, tr.even {
    background: #efefef;
    background: rgba(0, 0, 0, 0.063);
}

table ul.links {
    margin: 0;
    padding: 0;
    font-size: 1em;
}

table ul.links li {
    padding: 0 1em 0 0;
}

/* ------------------ List Styles ------------------ */

/* Header styles */
#header {
    width: 100%;
    border-bottom: 2px solid #292929;
    overflow: hidden;
    background-color: #2d358e;
    text-align: left;
}

#logo {

    padding: 0;
}

#logo, #name-and-slogan {
    margin: 1.66666666667% 0.833333333333% 0 2.083%;
    xfloat: left;
}

#name-and-slogan {
    padding: 1.66666666667% 1.66666666667% 0.666666667% 0.833333333333%;
}

#site-name:link, #site-name:visited {
    font-size: 2.5em;
    font-weight: normal;
    text-decoration: none;
    color: #000;
}

#site-name:hover {
    text-decoration: underline;
}

#site-slogan {
    font-size: 1.2em;
    font-weight: bold;
    color: #444;
}


#header ul {
    /*Main menu */
    clear: left;
    float: right;
    list-style: none;
    margin: 0.41666667%;
    padding: 0;
    width: 100%;
    text-align: right;

    /* set width to 100% for menu bar to fill header */
}

#header ul li {
    display: inline;
    xlist-style: none;
    margin: 0.416666667%; /*5/1200 */
    padding: 0;
}

#header ul li a {
    xdisplay: block;
    xfloat: left;
   xmargin: 0.416666667%; /*5/1200 */
    padding: 10px 0 0 14px;
    xtext-align: right;
    color: #fff;
    text-decoration: none;
    position: relative;
    line-height: 1.5em;
    font-size: 1.2em;

}

#header ul li a:hover {

    xbackground: url('images/blades.png') no-repeat -1px 0px ;
    color: #a9d4f0

}

#header ul li a.active, #header ul li a.active:hover {
    background: url('images/blades.png') no-repeat -1px 0px ;


}

#header ul li a span {
    display: block;
}

#phone {
    float: right;
    color: white;
    font-family: serif;
    font-size: 2.8em;
    padding-right: 1.66667%;

}

.site-edit {
    position: absolute;
    top: 0px;
    left: 0px;
    background: #999;
    margin: 5px 5px 5px 5px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    float: left;
    padding: 10px;
}

#search-form {
    float: right;
    padding: 1.66667% 1.66667% 0 0;
}

/* -------------Feature section------------
 * This styling would typically be used for a content area that sits above
 * the column layout. Delete if not required.
 * */
#featured {
    margin: 0;
    padding: 0;

    zoom: 1;



}



/*This seems to be important for slide resizing in IE8 */
.slide {
    width: 100%;
    zoom: 1;

}
/* Slide text block styles */
.ckslide-textblock {

    padding: 5px 1.041666667% 5px 1.041666667%;
    background: #656565;
    background: rgba(0, 0, 0, 0.6);
    position: relative;
    xbottom: -80px;

}

.ckslide-textblock a, .ckslide-textblock a.hover, .ckslide-textblock p {
    color: white;
    padding: 0px 10px;
}

.cycle-slideshow {
    overflow:hidden;
    position: relative;
    zoom: 1;
}


/* General slide control styles */
.ckslide-controls {
    position: absolute;
    bottom: 3.4375%;
    left: 3.4375%;
    xfloat: left;
    xheight: 0px; /*stops the div retaining space in the layout where it would be without positioning. */
    z-index: 600;
    overflow: hidden;
    zoom: 1;
    xdisplay: inline;

}

.xckslide-controls img {
    xfloat: left;
    display: inline;
}

.xckslide-controls span {
    display: inline;
    *display: inline;
    zoom: 1;
    list-style: none;
    padding-left: 5px;
}


/* slide pager */
.ckslide-pager {
    clear: both;
    width: 100%;
    z-index: 500;
    position: relative;
    bottom: -10px;
    overflow: hidden;
    xfloat: right;

}

.ckslide-pager span {
    font-family: arial;
    font-size: 20px;
    width: 16px;
    height: 5px;
    display: inline;
    color: #2e3591;
    background: #2e3591;
    border: 2px white solid;
    margin: 0 5px;
    cursor: pointer;
    padding: 0 8px;
    line-height: 2.5em;
}

.ckslide-pager span.cycle-pager-active {
    color: #a9d4f0;
    background: #a9d4f0;
}

.ckslide-pager > * {
    cursor: pointer;
}
/* Slide previous/next styles */
.cycle-prev, .cycle-next {
    position: absolute;
    top: 0;
    width: 50%;
    opacity: 0;
    filter: alpha(opacity = 0);
    z-index: 800;
    height: 70%;
    cursor: pointer;
}

.cycle-prev {
    left: 0;
    background: url(images/prev.png) 5% 35% no-repeat;
}

.cycle-next {
    right: 0;
    background: url(images/next.png) 95% 35% no-repeat;
}

.cycle-prev:hover, .cycle-next:hover {
    opacity: .85;
    filter: alpha(opacity = 85);
}

.disabled {
    opacity: .5;
    filter: alpha(opacity = 50);
}

/* Fixed width styles */
.fixed {
    margin: 0 auto;

    /* you can use px, em or %  - this can also be used to shrink the size of the fixed area so the background shows at the margins*/

    max-width: 960px;

    /* set the min and max widths of the fixed area, if required */
    text-align: left;
}

/* column container */
/* Column calculations based on 1024px width 3 columns. Left and right column is 308px.
   Middle column is 408px. The details for each column are:
   Left column: left padding 20px, content 278px, right padding 10px
   Middle column: left padding 10px, content 388px, right padding 10px
   Right column: left padding 10px, content 278px, right padding 20px */
#ckrow1 {
    position: relative; /* This fixes the IE7 overflow hidden bug */
    clear: both;
    float: left;
    width: 100%; /* width of whole page */
    overflow: hidden; /* This chops off any overhanging divs */
    margin: 0 auto;
    text-align: left;
}

/* common column settings */
.colright, .colmid, .colleft {
    float: left;
    width: 100%; /* width of page */
    position: relative;

}

.col1, .col2, .col3 {
    float: left;
    position: relative;
    padding: 0;
    overflow: hidden;
    /* no left and right padding on columns, we just make them narrower instead
                    only padding top and bottom is included here, make it whatever value you need */

}
/* Calculating left values for three column settings assuming no padding
When Col1 is left column, left = 100%-width(col1)
When Col1 is middle column, left = 100%
When Col1 is right column, left = 100%+width(middle column)

When Col3 is left column, left = 0%
When Col3 is middle column, left = width(column 3)
When Col3 is right column, left = width(middle column) + width (col3)

(Not sure about Col2)
When Col2 is left column, left = 100 - (width(col1) + width(col2))
When Col2 is middle column, left = 100 - width(col1)
When Col3 is right column, left = col1 left + col 3 left
*/



/* 3 Column settings Column order 2-1-3 */
.c2-1-3 {
    background: #ccc; /* right column background colour */
}

.c2-1-3 .colmid {
    right: 20%; /* width of the right column */
    background: #fff; /* center column background colour */
}

.c2-1-3 .colleft {
    right: 50%; /* width of the middle column */
    background: #ccc; /* left column background colour */
}

.c2-1-3 .col1 {
    width: 50%;
    /* width of column1 content (column width minus padding on either side) */
    left: 100%; /* 100% plus left padding of center column */
}

.c2-1-3 .col2 {
    width: 30%;
    /* Width of left column content (column width minus padding on either side) */
    left: 20%;
    /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
    overflow: hidden;
}

.c2-1-3 .col3 {
    width: 20%;
    /* Width of right column content (column width minus padding on either side) */
    left: 70%;
    /* Please make note of the brackets here:
                       (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

/* 3 Column settings Column order 1-2-3 */
.c1-2-3 {
    background: #ccc; /* right column background colour */
}

.c1-2-3 .colmid {
    right: 20%; /* width of the right column */
    background: #ddd; /* center column background colour */
}

.c1-2-3 .colleft {
    right: 30%; /* width of the middle column */
    background: #fff; /* left column background colour */
}

.c1-2-3 .col1 {
    width: 50%;
    /* width of center column content (column width minus padding on either side) */
    left: 50%; /* 100% plus left padding of center column */
}

.c1-2-3 .col2 {
    width: 30%;
    /* Width of left column content (column width minus padding on either side) */
    left: 50%;
    /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
    overflow: hidden;
}

.c1-2-3 .col3 {
    width: 20%;
    /* Width of right column content (column width minus padding on either side) */
    left: 50%;
    /* Please make note of the brackets here:
                       (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

/* 3 Column settings Column order 3-1-2 */
.c3-1-2 {
    background: #ddd; /* right column background colour */
}

.c3-1-2 .colmid {
    right: 30%; /* width of the right column */
    background: #fff; /* center column background colour */
}

.c3-1-2 .colleft {
    right: 50%; /* width of the middle column */
    background: #ccc; /* left column background colour */
}

.c3-1-2 .col1 {
    width: 50%;
    /* width of center column content (column width minus padding on either side) */
    left: 100%; /* 100% plus left padding of center column */
}

.c3-1-2 .col2 {
    width: 30%;
    /* Width of left column content (column width minus padding on either side) */
    left: 100%;
    /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
    overflow: hidden;
}

.c3-1-2 .col3 {
    width: 20%;
    /* Width of right column content (column width minus padding on either side) */
    left: 0%;
    /* Please make note of the brackets here:
                       (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

/* 3 Column settings Column order 2-3-1 */
.c2-3-1 {
    background: #fff; /* right column background colour */
}

.c2-3-1 .colmid {
    right: 50%; /* width of the right column */
    background: #ddd; /* center column background colour */
}

.c2-3-1 .colleft {
    right: 20%; /* width of the middle column */
    background: #ccc; /* left column background colour */
}

.c2-3-1 .col1 {
    width: 50%;
    /* width of center column content (column width minus padding on either side) */
    left: 120%; /* 100% plus left padding of center column */
}

.c2-3-1 .col2 {
    width: 30%;
    /* Width of left column content (column width minus padding on either side) */
    left: 20%;
    /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
    overflow: hidden;
}

.c2-3-1 .col3 {
    width: 20%;
    /* Width of right column content (column width minus padding on either side) */
    left: 20%;
    /* Please make note of the brackets here:
                       (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

/* 3 Column settings Column order 3-2-1 */
.c3-2-1 {
    background: #fff; /* right column background colour */
}

.c3-2-1 .colmid {
    right: 50%; /* width of the right column */
    background: #ddd; /* center column background colour */
}

.c3-2-1 .colleft {
    right: 30%; /* width of the middle column */
    background: #ccc; /* left column background colour */
}

.c3-2-1 .col1 {
    width: 50%;
    /* width of center column content (column width minus padding on either side) */
    left: 130%; /* 100% plus left padding of center column */
}

.c3-2-1 .col2 {
    width: 30%;
    /* Width of left column content (column width minus padding on either side) */
    left: 50%;
    /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
    overflow: hidden;
}

.c3-2-1 .col3 {
    width: 20%;
    /* Width of right column content (column width minus padding on either side) */
    left: 0%;
    /* Please make note of the brackets here:
                       (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

/* 3 Column settings Column order 1-3-2 */
.c1-3-2 {
    background: #ddd; /* right column background colour */
}

.c1-3-2 .colmid {
    right: 30%; /* width of the right column */
    background: #ccc; /* center column background colour */
}

.c1-3-2 .colleft {
    right: 20%; /* width of the middle column */
    background: #fff; /* left column background colour */
}

.c1-3-2 .col1 {
    width: 50%;
    /* width of center column content (column width minus padding on either side) */
    left: 50%; /* 100% plus left padding of center column */
}

.c1-3-2 .col2 {
    width: 30%;
    /* Width of left column content (column width minus padding on either side) */
    left: 70%;
    /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
    overflow: hidden;
}

.c1-3-2 .col3 {
    width: 20%;
    /* Width of right column content (column width minus padding on either side) */
    left: 20%;
    /* Please make note of the brackets here:
                       (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

/* 2 column left menu settings - c2-1 */
/* 2 Column (left menu) settings */
.leftmenu {
    background: #fff; /* right column background colour */
}

.leftmenu .colleft {
    right: 75%; /* right column width */
    background: #ccc; /* left column background colour */
}

.leftmenu .col1 {
    width: 75%; /* right column content width */
    left: 100%; /* 100% plus left column left padding */

}

.leftmenu .col2 {
    width: 25%;
    /* left column content width (column width minus left and right padding) */
    left: 0%
    /* (right column left and right padding) plus (left column left padding) */
}

/* 2 Column (right menu) settings c1-2 */
.rightmenu {
    background: #ccc; /* right column background colour */
}

.rightmenu .colleft {
    right: 34%; /* right column width */
    background: #fff; /* left column background colour */
}

.rightmenu .col1 {
    width: 66%; /* left column content width (left column width minus left and right padding) */
    left: 34%; /* (right column width) plus (left column left padding) */
}

.rightmenu .col2 {
    width: 34%; /* right column content width (right column width minus left and right padding) */
    left: 34%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

/* Full page settings c1 */
.fullpage {
    background: #a0d0f4;
    background: -webkit-linear-gradient(#9fcff1, #a0d0f4); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#9fcff1, #a0d0f4); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#9fcff1, #a0d0f4); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#f8fafc, #a0d0f4); /* Standard syntax (must be last) */

}

.fullpage .col1 {

    float: none;
    padding: 0 3.4375%  3.4375%;
    background: #a0d0f4;
    background: -webkit-linear-gradient(#9fcff1, #a0d0f4); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#9fcff1, #a0d0f4); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#9fcff1, #a0d0f4); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#f8fafc, #a0d0f4); /* Standard syntax (must be last) */
}

/* ------------------ Footer Styles ------------------ */
#footer {
    clear: both;
    float: left;
    width: 100%;
    height: 100%;
    xborder-top: 2px groove #888;

    position: relative;
    z-index: 500;
}

#footer p {
    xpadding: 7px;
    margin: 0;
    xtext-align: center;
    xcolor: #fff;

}

#footer a:link, #footer a:visited {
    text-decoration: none;
    color: #c9e4ff;
}

#footer a:hover, #footer a:active, #footer a:focus {
    text-decoration: underline;
    color: #c9e4ff;
}

img#trueliklogo {
    position: absolute;
    bottom: 9%;
    left: 3.4375%;
    z-index: 500;
    max-width: 30%;
}

img#riverinalogo {
    position: absolute;
    bottom: 9%;
    right: 3.4375%;
    z-index: 500;
    max-width: 40%;
}

#copyright {
    position: absolute;
    bottom: 2%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    xbackground: rgba(46,53,145,.5);
    font-weight: bolder;
    color: #fff;

    z-index: 510;
}

/* ----------------- Main Content ------------------ */
#contentcol {
    /*There is no padding on col1, so this div provides padding for the actual content if required. */
    padding: 10px 3.125% 0 3.125%;
}


#page-title {
    color: #2e3591;
    margin: 0;
    padding: 1.0em 0 0.5em 20px;
}

/* ------------------ Sidebars ----------------- */

#page-nav {
    font-size: small;
    background: #f8fafc;
    background: -webkit-linear-gradient(#a0d0f4, #f8fafc); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#a0d0f4, #f8fafc); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#a0d0f4, #f8fafc); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#a0d0f4, #f8fafc); /* Standard syntax (must be last) */
    border: 1px solid #2e3591;
    margin: 5% 5% 5% 5%;
    padding: 0 0 0 5%;
    border-radius: 8px;
}
.sideblock {
    margin: 0;
    padding: 0;
}

.sideblock h2, .sideblock h2 a {
    margin: 0 0 0.5em;
    padding: 5px 0px 5px 5px;
    font-size: 1em;
    font-weight: bolder;
    color: white;
    background: #666;
}

.sideblock .content {
    padding: 5px 3.472%;
}

.sideblock .content ul {
    font-size: 0.914em;
    line-height: 1.4;
    padding-left: 5px;
}

.sideblock .content ul li {
    list-style: none;
    padding-top: 5px;
    list-style: none;
}

.sideblock .content ul li ul li {

    border-bottom: none;
    list-style: none;
    padding-top: 5px;

}

/* Home page styles */
.home .title {
    display: none;

}

.home #contentcol {
    padding-top: 10px;
}

.homepage-section {
    border-bottom: 10px solid #2e3591;
    overflow: hidden;
    position: relative;
    padding-top: 8%;
}

.homepage-section img {
    float: left;
    width: 32.43848%;
    position: absolute;
    bottom: 0;
    overflow: visible;

}


.homepage-section .homepage-content {
    float: right;
    width: 63.75839%;
}

h2 a, h2 a:visited, h2 a:link  {
    color: #2e3591;
    text-decoration: none;
}
h2 a:hover  {
    text-decoration: underline;
}

/*Page specific styles */

.content-logo {
    float: left;
    padding: 0 10px 10px 0;
    margin: 0;
}
/* Contact page */
.contact-us li {
    list-style: none;
}

.contact-us #contentcol img {
    float: right;
    border: 3px #2e3591 solid;
}

label.InputfieldHeaderHidden {
    display: none;
}

/*Products and services */
.product {
    background: #f8fafc;
    background: -webkit-linear-gradient(#a0d0f4, #f8fafc); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#a0d0f4, #f8fafc); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#a0d0f4, #f8fafc); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#a0d0f4, #f8fafc); /* Standard syntax (must be last) */
    border: 1px solid #2e3591;
    margin: 2% 2% 2% 0%;
    padding: 0;
}

.product h2 {
    xbackground: #2e3591;
    background: #757575;
    background: rgba(0, 0, 0, 0.51);
    color: white;
    padding: 1%;
    margin: 0;
}
.product .content {
    padding: 1%;
}

.product h2 a, .product h2 a:visited, .product h2 a:link  {
    color: white;
    text-decoration: none;
}
.product h2 a:hover  {
    text-decoration: underline;
}

/*About us */
#service-map {
    float: right;
    margin-left: 5%;
    border: 3px solid #2e3591;
}

input, textarea, select {
    max-width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.align-right {
    float: right;
    padding: 10px 10px 10px 20px;
}

.InputfieldStateRequired label:after {
    content: "*";
    color: red;
}

.error {
    color: red;
    font-weight: bold;
}

.body2 {
    background-color: white;
    border-radius: 8px;
    padding: 5px 20px;
    margin: 0 -10px;
    border: #2e3591 solid 3px;
    clear: both;
}

.important {

    font-size: 1.25em;
    font-weight: bold;
    color: #2e3591;
}

.important2 {
    font-size: larger;
}


/*Responsive styles 
 * 
 * 
 * 
 * */
@media screen and (max-width: 480px) {

/* Threecol layouts always linearise in 1-2-3 order, regardless of layout order */

    .threecol {
        background: #ccc; /* right column background colour */
    }

    .threecol .colmid {
        right: 0%; /* width of the right column */
        background: #fff; /* center column background colour */

    }



    .threecol .colleft {
        right: 100%; /* width of the middle column */
        background: #ccc; /* left column background colour */
    }



    .threecol .col1 {
        width: 100%;
        background: #fff;
        clear: both;
        /* width of center column content (column width minus padding on either side) */
        left: 100%; /* 100% plus left padding of center column */
    }



    .threecol .col2 {
        width: 100%;
        background: #ccc;
        clear: both;
        /* Width of left column content (column width minus padding on either side) */
        left: 100%;
        /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
        overflow: hidden;
    }


    .threecol .col3 {
        width: 100%;
        background: #aaa;
        clear: both;
        /* Width of right column content (column width minus padding on either side) */
        left: 100%;
        /* Please make note of the brackets here:
                           (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
    }


    /* 2 column  settings
       These always linearise in order 1-2
    */

    /* 2 Column (left menu) settings */
    .leftmenu {
        background: #fff; /* right column background colour */
    }

    .leftmenu .colleft {
        right: 100%; /* right column width */
        background: #ccc; /* left column background colour */
    }

    .leftmenu .col1 {
        clear: both;
        width: 100%; /* right column content width */
        background: #fff;
        xright: 100%; /* 100% plus left column left padding */
    }

    .leftmenu .col2 {
        clear: both;
        width: 100%;
        background: #ccc; /* left column background colour */
        /* left column content width (column width minus left and right padding) */
        left: 100%;
        /* (right column left and right padding) plus (left column left padding) */
    }

    /* 2 Column (right menu) settings */
    .rightmenu {
        background: #ccc; /* right column background colour */
    }

    .rightmenu .colleft {
        right: 100%; /* right column width */
        background: #fff; /* left column background colour */
    }

    .rightmenu .col1 {
        clear: both;
        background: #fff;
        width: 100%; /* left column content width (left column width minus left and right padding) */
        left: 100%; /* (right column width) plus (left column left padding) */
    }

    .rightmenu .col2 {
        clear: both;
        width: 100%; /* right column content width (right column width minus left and right padding) */
        left: 100%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */
    }

    .homepage-section img {
        float: left;
        width: 40%;
        position: absolute;
        top: 8%;
        border-bottom: 5px #2e3591 solid;



    }

    .homepage-section .homepage-content {
        width: 50%;
    }

    .mobile-exclude {
        display: none;
    }

    #header ul {
        xclear: both;
        float: left;
        text-align: left;
    }

    #phone {
        float: left;
        font-size: 2em;
        padding-left: 5%;
    }

    .align-right {
        float: none;
        xpadding: 10px 10px 10px 20px;
    }



}

@media screen and (min-width: 481px) and (max-width: 800px) {
    /* The intermediate layout is for three column layouts, retaining cols 1-2 in the first 'row' and col3 in the third
    row */

    .threecol {
        background: #ccc; /* right column background colour */
    }

    .threecol .colmid {
        right: 0%; /* width of the right column */
        background: #ccc; /* center column background colour */

    }

    .threecol .colleft {
        right: 40%; /* width of the middle column */
        background: #ccc; /* left column background colour */
    }

    .threecol .col1 {
        width: 60%;
        background: #fff;
        /* width of center column content (column width minus padding on either side) */
        left: 40%; /* 100% plus left padding of center column */
    }

    .threecol .col2 {
        width: 40%;
        background: #ccc;
        /* Width of left column content (column width minus padding on either side) */
        left: 40%;
        /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
        overflow: hidden;
    }

    .threecol .col3 {
        width: 100%;
        background: #aaa;
        clear: both;
        /* Width of right column content (column width minus padding on either side) */
        left: 40%;
        /* Please make note of the brackets here:
                           (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
    }


}