body {
    font-family: Arial,Helvetica,sans-serif;
	background-color: #fff;
}

p {font-size: 9pt;}

ul li {list-style:none; font-size: 9pt;}
ol li {font-size: 9pt;}

a, a:visited {color: #8D79AC;}
a:hover {
    color: #4A2F74;
}
a:active {
    color: #000099;
    font-family: Arial,Helvetica,sans-serif;
}

select {height: 30px; margin-top: 10px;}

input[type="submit"], input[type="reset"] {
    background-color: #8d79ac; 
    color: #fff; 
    border: solid 1px #8d79ac;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

input[type="submit"]:hover, input[type="reset"]:hover, input[type="image"]:hover, a.button:hover
{
    background-color: #4A2F74; 
    border: solid 1px #4A2F74;
}

table th {font-weight: bold;}

.titles 
{
	font-size: 12pt; 
	font-weight: bold; 
	color: #000000; 
	font-style: normal; 
	line-height: normal
}

.data8blue 
{
	font-size: 9pt; 
	color: #003399 
}

.titlesblue16 
{  
	font-size: 12pt; 
	color: #3333cc;
}
.size10 
{ 
	font-size: 10pt
}

.size10bold 
{ 
	font-size: 10pt; 
	font-weight: bold
}

.cellspacing 
{  
	padding-left: 20px; 
	padding-right: 20px; 
	padding-top: 20px
}
.size10boldred 
{ 
	font-size: 10pt; 
	font-weight: bold; 
	color: #ff8000
}


/************ GRID STYLES *************/

.columns 
{
    float:left; 
    margin-left: 0.128%;
    min-height: 1px;
    position: relative;
}

.columns:first-child {margin-left: 0;}

.columns.twelve {width:100%;}
.columns.eleven {width: 91.4895%;}
.columns.ten {width: 82.9789%;}
.columns.nine {width: 72.4682%;}
.columns.eight {width: 65.9576%;}
.columns.seven {width: 57.4469%}
.columns.six {width: 48.9362%;}
.columns.five {width: 40.4256%;}
.columns.four {width: 31.9149%}
.columns.three {width: 23.4043%;}
.columns.two {width: 14.8936%;}
.columns.one {width: 6.38299%;}

.row {
    width: 100%;
    margin-bottom: 15px;
}

.row::before, .row::after, .clearfix::before, .clearfix::after {
  content: "";
  display: table;
}

.row::after, .clearfix::after {
  clear: both;
}

/************ END GRID STYLES *************/

/************ HEADER ************/

.header {width: 100%;}
.header div {width: 100%}

.header .bannerContainer {border-bottom: 5px solid #7086EB;}
.header .intro {
    border-bottom: 5px solid #8D79AC;
}

.header .intro p {
    font-style: italic;
    font-weight: bold;
    color: #848484;
    font-size: 9pt;
    padding: 0 10px;
}
.header .topNav {
    border-bottom: 5px solid #C387BB;
    position:relative;
    display: inline-block;
}

.header .topNav ul {
    padding-left: 0;
    margin: 10px 0;
    position:relative;
    display: inline-block;
}

.header .topNav ul li {
    list-style: none; 
    float:left; 
    border-right: solid 2px #000;
    padding: 0 10px;
}

.header .topNav ul li a{
    font-size: 0.9rem;
    color: #000;
    text-decoration: none;
}
.header img {max-width: 100%;}

/************ END HEADER ************/

/************ MAIN CONTENT **********/

.main {overflow: hidden;}
.main.columns.nine { width: 75.468% }
.main p, .main ul li {line-height: 1.5em;}
.main h1 {margin-bottom: 0;}
.main img {max-width: 100%;}

/************ END MAIN CONTENT **********/

/************ RIGHT BAR ************/

.rightBar.columns.three { width: 20.402% }
.mobileRightBar, .rightBar {padding: 5px 10px; float:left; width: 200px;}
.mobileRightBar ol, .rightBar ol {padding-left: 0;}
.mobileRightBar ol li, .rightBar ol li {
    padding: 10px 5px;
    border: solid 2px #8d79ac;
    margin-bottom: 5px;
    border-radius: 5px;
    list-style-position:inside;
    color: #8d79ac;
    background-color: #8d79ac;
    color:#fff;
	cursor: pointer;
}

.mobileRightBar ol.databases li, .rightBar ol.databases li {
	background-color: #7E82AF;
	border: solid 2px #7E82AF;
}

.mobileRightBar ol.databases li:hover, .rightBar ol.databases li:hover {
	background-color: #333876;
	border: solid 2px #333876;
}

.mobileRightBar ol li:hover, .rightBar ol li:hover {
    background-color: #4A2F74;
    border: solid 2px #4A2F74;
}

.mobileRightBar ol li a, .rightBar ol li a {text-decoration: none; color: #fff;}


.rightBar div.info
{
    border: solid 2px #8d79ac;
    border-radius: 5px;
    padding: 10px 5px;
    margin-bottom: 18px;
}

.mobileRightBar div.info ul, .rightBar div.info ul {
    padding:0;
}
.mobileRightBar div.info ul li, .rightBar div.info ul li {padding-bottom: 3px;}
.mobileRightBar div.info p, .rightBar div.info p {
    font-weight: bold;
    margin: 0;
}

.mobileRightBar p.heading, .rightBar p.heading {text-align: center; font-size: 9pt;}

.mobileRightBar div.info.contact, .rightBar div.info.contact
{
    text-align: center;
}

/************ END RIGHT BAR ************/

/************ PRICING TABLE ************/

div.row.pricing { font-size: 0.8em; color: #000000;}
div.row.pricing .columns .inner { 
	margin:0 5px; 
	background-color: #efefef; 
	border: solid 1px #efefef;
	border-radius: 5px;
	padding: 5px;
}

/************ END PRICING TABLE ************/

/************ CONTACT FORM ************/

span.note {font-size: 0.8em;}

div.section-separator 
{
    text-align: center; 
    background-color: #4A2F74; 
    width: 100%;
    color: #fff;
    font-size: 1em;
    padding: 5px 0;
    margin-bottom: 20px;
    border: solid 1px #4A2F74;
    border-radius: 5px;
}

a.button img {
    margin-left: 10px;
    margin-top: 5px;
}

a.button, input[TYPE=image] {
    background-color: #8d79ac; 
    color: #fff; 
    border: solid 1px #8d79ac;
    border-radius: 5px;
    padding: 5px 10px;
    text-decoration: none;
    margin-bottom: 10px;
    font-size: 0.9em;
}

img.photo { padding: 5px; border: solid 2px #4a2f74; }


.columns.contact {text-align: center;}
.columns.contact .box {min-height: 350px;}

label, textarea {margin-top: 10px;}

h2 {font-size: 1.1rem;}
ul.formContainer { padding-left: 0; }

.row.contactDetails .columns .formContainer li
{
	padding-top: 5px;
}

/************ END CONTACT FORM ************/

/************** SHOPPING BASKET ***************/

.basketHeader { font-weight: bold; }

.row.basketTable .row.basketTableBody .mobileHeader { display: none }

/************** END SHOPPING BASKET ***************/

/************** DOWNLOADS ***************/

ol.downloads { padding-left: 20px; }
ol.downloads li { padding-bottom: 5px; }

/************** END DOWNLOADS ***************/

/************** MOBILE ***************/

.header .topNav ul li a span.icon { display: none; }

.mobileRightBar { 
	border-top: 2px solid #8d79ab;
	border-bottom: 2px solid #8d79ab;
}

.mobileOptions { display:none; }
.mobileOptions.headerBar {margin-bottom: 0;}
.mobileOptions .columns .topOption { 
	border: 2px solid #8D79AB;
	border-radius: 8px;
	width: 85%;
	margin: 5px;
	padding: 5px;
	color: #8D79AB;
	font-size: 3vw;
	position: relative;
	cursor: pointer;
	background-color: #fff;
	z-index: 100;
}

.mobileOptions .columns .topOption.selected
{
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	padding-bottom: 10px;
}

.mobileOptions .columns .topOption svg { float:right; }

.row.mobileOptions.expandedOption { display: none; }
.row.mobileOptions.expandedOption.selected 
{
	display: inline-block;
	margin-top: -7px;
}


.row.mobileOptions.expandedOption .columns.twelve {width: 95%; }
.row.mobileOptions.expandedOption ol {padding-left: 0; }

@media only screen and (max-width: 380px )
{
	.header .topNav ul { width: 100%; }
	.header .topNav ul li { border: none; width: 18%; }
	.header .topNav ul li a span.icon { display: block; }
	.header .topNav ul li a span.text { display: none; }
	
	.mobileOptions .columns .topOption { font-size: 3.5vw; }
	
}

@media only screen and (max-width: 550px )
{
	.rightBar { display: none; }
	
	.mobileOptions { display:block; }
	
	.columns { margin-left: 1.128% }
	
	.main.columns.nine,
	.columns.one,
	.columns.two,
	.columns.three,
	.columns.nine,
	.columns.ten,
	.columns.eleven
	{
		width: 95%;
	}
	
	.row.contactDetails .columns { width: 95%; }
	
	.row.pricing .row.pricingHeader
	{
		margin-bottom: 0;
		margin-left: 5px;
	}
	
	.row.basketTable { font-size: 4vw }
	.row.basketHeader { display:none; }
	.row.basketTable .row.basketTableBody, .row.pricing .row.pricingTable
	{
		border: solid 2px #8d79ab;
		border-radius: 8px;
		padding: 5px;
	}
	
	.row.basketTable .button, .row.pricing .row.pricingTable .button { float:right; }
	.row.pricing .row.pricingTable .button img { margin-top: 0; }
	
	.row.basketTable .columns,
	.row.pricing .columns 
	{
		width: 95%;
		margin-left: 0;
		margin-bottom: 10px;
	}
	
	.row.basketTable .row.basketTableBody .mobileHeader { display: block; font-weight: bold;}
}



/************** MOBILE END ***************/