/* CSS layout */

/* STANDARD CODING FOR CONSISTENCY ACROSS BROWSERS */

/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, 
would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 
0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a,  em, img small, strike, strong, sub, sup, b, u, i, center, ol, ul, li, 
form, table, caption, tbody, tr, th, td, footer, header, menu, nav, audio, video {
	  margin:0px; padding:0px; border:0px; outline:0px; font-size: 100%; font: inherit;
}


/* This rule resets a core set of elements so that they will appear consistent across browsers. */
* {margin:0; padding:0;}


/* normalize style rendering across browsers */
html {
  font-family: sans-serif; /* Set default font family to sans-serif */
  -ms-text-size-adjust: 100%; /* Prevent iOS text size adjust after orientation change, without disabling user zoom */
  -webkit-text-size-adjust: 100%; /* Prevent iOS text size adjust after orientation change, without disabling user zoom */
  height:100%; /* needed for footer positioning*/
}

body 
{
  -ms-text-size-adjust: 100%; /* Prevent iOS text size adjust after orientation change, without disabling user zoom */
  -webkit-text-size-adjust: 100%; /* Prevent iOS text size adjust after orientation change, without disabling user zoom */
  height:100%; /* needed for footer positioning*/
}


/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

/**
 * Remove most spacing between table cells.
 */

table {border-collapse: collapse; border-spacing: 0;}

td, th {padding: 0;}


/* ===================================== */


/* MOBILE STYLING */

/* "Min width means if [device width] is greater than or equal to [specified #], then do {...}" */
/* For devices wider than 600px */

/* "Max width means if [device width] is less than [specified #], then do {...}" */
/* For devices narrower than 600px */
@media(max-width:599px) {
  .table {width: 90% !important; max-width:90% !important; margin:0 auto !important;}
  .wrapper {width:100% !important; max-width:100% !important;}
  .img {max-width:90% !important;}
}
@media only screen and (max-width: 480px){
  .img {max-width:90% !important;}
}

/* ===================================== */

/* RESPONSIVE COLUMNS */

/* Main container for all */
.onepcgrid {
	margin: 0 auto;
	clear: both;
	width:100%;
}

.onerow {clear: both; margin-bottom:20px !important}
.onerow:before,
.onerow:after { content:""; display:table; }
.onerow:after { clear:both;}

/* Common columns definitions */
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 {
	float: left;
	margin: 0 3.5% 0 0;
	background:transparent;
}

.grid1.last, .grid2.last, .grid3.last, .grid4.last, .grid5.last, .grid6.last, .grid7.last, .grid8.last, .grid9.last, .grid10.last, .grid11.last, .grid12 {
	margin: 0 !important;
}

.grid1 { width: 5.5%; }
.grid2 { width: 14%; }
.grid3 { width: 22.5%; }
.grid4 { width: 31%; }
.grid5 { width: 39.5%; }
.grid6 { width: 48%; }
.grid7 { width: 56.5%; }
.grid8 { width: 65%; }
.grid9 { width: 73.5%; }
.grid10 { width: 82%; }
.grid11 { width: 90.5%; }
.grid12 { width: 99%; margin: 0; }

.grid1 img, .grid2 img, .grid3 img, .grid4 img, .grid5 img, .grid6 img, .grid7 img, .grid8 img, .grid9 img, .grid10 img, .grid11 img, .grid12 img {
	width: 100%;
	height: auto;
	display: block;
}

/* Small devices */
@media only screen and (max-width: 480px) {
	.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 {width:100%; margin-bottom:15px !important;}
	.onepcgrid {margin-bottom:5px !important;}
}


/* ===================================== */


/* STANDARD PAGE LAYOUT ELEMENTS */

/* 1. The 'clear' statement disallows anything on either side outside of the container, but does allow other elements inside it. */
/* 2. The 'margin:0 auto' statement is what centers the container. */
/* 3. The 'overflow:auto' statement ensures that the container stretches to the same height as the longest element inside it. */
/* 4. If there is no outer wrapper enclosing the main content, then widths must have fixed px values. */

body 
{
	color:#000000; 
	font-size:14px; 
	font-family:Verdana, Geneva, sans-serif;  /* change this to suit your design */
	background: #FFFFFF;   /* adjust to suit your design */
	/* background-size:100% !important; - this stretches a background pic to fit the full screen, it adjusts to the viewer's screen - REMOVE IF NOT NEEDED */
}

#slogan /* this can go above or below the masthead */
{ 
	clear:both;
	margin:0 auto;
	overflow:auto;
	width:100%;
	position:relative;
	border:0px;
	padding-top:4px;
	text-align:center;
	z-index:999;
	background-color: #F5DD85;
	-webkit-box-shadow: 5px 5px 10px 0px rgba(153,153,153,1);
	-moz-box-shadow: 5px 5px 10px 0px rgba(153,153,153,1);
	box-shadow: 5px 5px 10px 0px rgba(153,153,153,1);
	position: fixed; top: 0px; /* these 2 attributes stop it scrolling so it always stays at the top */
}


#base  /* encloses everything on the entire page except the slogan */
{
	clear:both;
	margin:0 auto !important;
	overflow:auto;
	position:relative; /* needed for footer positioning*/
	height:auto !important; /* real browsers */
	height:80%; /* IE6: treaded as min-height*/
	min-height:80%; /* real browsers */
	max-width:1000px;
	width:auto !important;
	margin-top:15px !important; /* REMOVE IF THE SLOGAN SCROLLS, ie IF THE SLOGAN IS NOT FIXED */
	z-index:111;
}


#masthead /* this contains your main header */
{
	clear:both;
	margin:0 auto;
	overflow:auto;
	max-width:100%;
	z-index:111;
	background-color:#FFFFFF;
	font-size:15px; 
	border-bottom:8px solid #C0C0C0; /* #B69434 is gold. You can remove border completely */
}


#wrapper  /* encloses main content */
{
	clear:both;
	margin:0 auto;
	overflow:auto;
	max-width:100%;
	min-height:101% !important; /* real browsers */
	position:relative;
	padding: 10px 10px 0px 10px;
	background-color:#FFFFFF; /* #F5EFE9 #F8F3E1 */
	z-index:999;
/* -the next 4 lines are needed to create rounded corners */
 /* -moz-border-radius:40px;
    -webkit-border-radius:40px;
    -khtml-border-radius:40px;
    border-radius:40px; */
/* -the next 3 lines are needed to create shadows - you will need to adjust widths if you use these styles */
 /* box-shadow: 4px 4px 10px #CCC3B4;
	-moz-box-shadow: 4px 4px 10px #CCC3B4;
	-webkit-box-shadow: 4px 4px 10px #CCC3B4; */
/* opacity: 0.4; */
/* filter: alpha(opacity=40); For IE8 and earlier */
}

#footer
{
	clear:both;
	margin:0 auto;
	overflow:auto;
	width:100%;
	height:auto;
	padding-top:4px;
	padding-bottom:14px;
	text-align:center;
	position:relative;
}

/*  ADDITIONAL LAYOUT ELEMENTS  */

#spacer 
{ 
	clear:both;
	margin:0 auto;
	overflow:auto !important;
	width:100%;
	position:relative;
	border:0px;
	height:20px;
	z-index:999;
}


#container  /*  Slide show container - see FLEXSLIDER */
{
	width:90%; 
	max-width: 900px; 
	margin: 0 auto;
	clear:both;
}

#containerspacer /* part of the slideshow - only use if needed */
{ 
	clear:both;
	margin:0 auto;
	overflow:auto !important;
	width:100%;
	position:relative;
	border:0px;
	height:40px;
	z-index:999;
}


/* ===================================== */


/*     FORMATTING      */
/* Specific to this website */

/* gold = #A98800 or #BA9735  burgundy = #C61F25  turquoise = #2E7893 */
/* add for text shadows - text-shadow: 2px 2px 2px #000; */

h1 {color:#C61F25; font-size:24px; font-weight:600; margin-bottom:20px; font-family:"Century Gothic", Verdana, Geneva, sans-serif;}
h2 {color:#6A6A6C; font-size:22px; font-weight:normal; margin-bottom:20px; font-family: Verdana, Geneva, sans-serif; }
h3 {color:#C61F25; font-size:18px; font-weight:600; margin-bottom:20px; font-family:"Century Gothic", Verdana, Geneva, sans-serif;}
h4 {color:#6A6A6C; font-size:14px; font-weight:600; margin-bottom:20px; font-family:Verdana, Geneva, sans-serif;}
h5 {color:#C61F25; font-size:13px; font-weight:normal; margin-bottom:20px; font-family:Verdana, Geneva, sans-serif;}
h6 {color:#9D0918; font-size:12px; font-weight:normal; margin-bottom:20px;  font-family:Verdana, Geneva, sans-serif;}


p {font-size:14px; text-align:justify; font-family:Verdana, Geneva, sans-serif; line-height:200%; margin-bottom:20px;}
p.bold {font-weight:bold;}
p.center {text-align:center !important;}
p.indent {text-indent:18px;}
p.italic {font-style:italic;}
p.justify {text-align:justify;}
p.left {text-align:left;}
p.right {text-align:right;}
p.row {display:inline;}
p.uppercase {text-transform:uppercase;}

a:link {color:#C61F25; text-decoration:underline;}     
a:visited {color:#C61F25; text-decoration:underline;}  
a:active {color:#575759; text-decoration:underline;}   
a:hover {color:#575759; text-decoration:underline;}    

ol{line-height:200%; padding-left:25px; }
ul{line-height:200%; padding-left:20px; }

table {margin:0 auto !important; width:100%;} /*  margin-bottom:15px !important; */
td {padding:5px;}  /*  border: 1px #C0C0C0 solid; */

hr {margin:25px 0px 20px 0px; border:2px #C0C0C0 solid;}

.form {color:#C61F25; font-size:12px; font-family:Verdana, Geneva, sans-serif;}
.form input {border:1px #C0C0C0 solid;}
.form textarea {border:1px #C0C0C0 solid; height:60px;}

.grey  {font-size:85%; color:#999999;}
.small {font-size:85%;}


/* Reset buttons border. It's important for input and button tags. 
 * border-collapse should be separate for shadow in IE. 
 */
.button
{
   background:  #9D0918;
   background: linear-gradient(top, #9D0918 50%, #C61F25 100%) no-repeat;
   background: -webkit-linear-gradient(top, #9D0918 50%, #C61F25 100%) no-repeat;
   background: -moz-linear-gradient(top, #9D0918 50%, #C61F25 100%) no-repeat;
   background: -o-linear-gradient(top, #9D0918 50%, #C61F25 100%) no-repeat;
   background: -ms-linear-gradient(top, #9D0918 50%, #C61F25 100%) no-repeat;
   -svg-background: linear-gradient(top, #9D0918 50%, #C61F25 100%) no-repeat;
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
   border-width:0px !important;
   padding:0 10px;
   margin:0 auto;
   height:25px;
   color: #FFFFFF;
   cursor: pointer;
}
.button a:active {color:#000000; text-decoration:none;}   
.button a:hover {color:#000000; text-decoration:none;}    


/* For things you do not want to see on-screen */
.PrintOnly {display: none;}