/*==== Change header layout on shrink width. ====*/
@media screen and (max-width:999px) {
header #logo {
   margin: 0 auto;
   float: none;
}
header #tagline {
   padding: 0;
   margin: 0;
  text-align: center;
}
header #tagline h1 {
   margin: 0.5em 0 1em 0;
}
header #tagline #globalContact .contactBlock {
   margin: 0 1em 1em 1em;
   text-align: left;
}
} /* End Media query. */

/*==== Tablet view ====*/
@media screen and (max-width:768px){
.notOnDesktop {  /* Search box shown only in mobile view and Tablet view */
   display: block;
}
#mainwrapper header {
   width: 100%;
   text-align: center;
}
#mainwrapper header #logo {
   padding: 1em  0em 1em;
   width: 100%;
   float: none;
   //text-align: center;
}
#mainwrapper header #tagline {
   width: 100%;
   float: none;
   height: auto;
   padding: 0em 0 0.5em;
   font-size: 0.9em;
}
#sidebar {
   /* Sidebar change to full width. */
   float: none;
   display: block;
   width: 100%;
   border-radius: 0px;
   margin: 0;
   padding: 2% 0;
}
#sidebar img,
#sidebar p {
   /* Hide the sidebar images */
   display: none;
}
.mobileHide { display: none; }

#mainContent {
   width: 96%;
   padding: 0 2%;
}
#mainContent table {
   overflow: auto;
}

/*==== Footer region ====*/
footer {
   width: 96%;
   padding: 1em 2%;
}
footer article {
   /*Each footer article */
   width: 46%;
}

} /* END Media Query */


/*===== Mobile view layout =====*/
@media screen and (max-width:480px){

#mainwrapper { width: 100%; }

/*==== sidebar ====*/
#sidebar {
   padding-bottom: 0px;
}

#content #mainContent h3 {
   /* Title under maincontent, if any */
   font-size: 14px;
}
#content footer article {
   /* Each footer article */
   width: 96%;
}
}

/* Stylesheet: FFSS_2015_responsive Modified On 2015-12-16 11:03:30 */
.clearb {
    clear: both;   /* needed for some browsers */
}
header nav {
   /*Nav bar containing links in header */
   font: 0.8em Verdana, "Trebuchet MS", Arial, sans-serif;
   text-align: center;
   width: 100%;
   color: #FFFFFF;
   background-color: #124E7E;
   padding: 0;
   margin: 0;
}

nav #menuwrapper {
   text-align: center;
   height: 1%;  /* IE6 Hack */
   width: auto;
   margin: 0px;
   padding: 0px;
}
#primary-nav li.menuparent { position: relative; }
nav #menuwrapper ul { text-align: center; }
ul#primary-nav, 
ul#primary-nav ul {
   list-style-type: none; /* remove any default bullets */
   margin: 0;
   padding: 0;
}
ul#primary-nav {
   padding-top: 0px;   /* pushes the menu div up to give room above for background color to show */
   padding-left: 0px;   /* keeps the first menu item off the left side */
}
ul#primary-nav ul {
   position: absolute; /* make the ul stay on hover, dropdowns go over the content below */
   top: auto;          /* top being the bottom of the li it comes out of */
   display: none;      /* keeps it hidden till hover event */
}
ul#primary-nav ul ul {
   margin-top: 1px;   /* now we move the next level ul down from the top a little for distinction */
   margin-left: -1px; /* pull it in on the left, helps us not lose the hover effect when going to next level */
   left: 100%;        /* keeps the left side of this ul on the right side of the one it came out of */
   top: 0px;          /* sets the top of it inline with the li it came out of */
}
ul#primary-nav li {
   display: inline-block;  /* better than float */
   margin: 0px;   /* no margin/padding keeps them next to each other, the padding will be in the "a" */
   padding: 0px;
}
#primary-nav li li {
   width: 200px;   /* Set the width of the menu elements at second level. Leaving first level flexible. */
   margin-left: 0px;   /* removes any left margin it may have picked up from the first li */
   margin-top: -1px;   /* keeps them tight to the one above, no missed hovers */
   padding: 0;
   float: none;   /* removes the left float set in first li so these will stack from top down */
   position: relative;   /* relative to the ul they are in */
}
/* set the "a" link look here */
ul#primary-nav li a {
   font-size: 0.9em;
   font-weight: normal;
   color: #fff;
   padding: 3px 6px;
   margin: 3px 1px;
   display: block;
   text-decoration: none;
   background-color: #16609B;
   border-radius: 2px;
}
ul#primary-nav li a:hover {
   color: #fff200;
   background-color: transparent;
}
ul#primary-nav li li a:hover {
   color: #FFF200;
   background: #0A2D4A;
}
ul#primary-nav li a.menuactive {
   color: #fff;
   background: #0A2D4A;
}
ul#primary-nav li a.menuactive:hover {
   color: #fff;
}
#primary-nav li li a.menuparent span {
   display: block;   /* makes it hold a shape */
   background: url(http://ffss.com.au/uploads/images/parent.png) no-repeat 98% center;   /* submenu image here, right arrow */
}

/* gif for IE6, as it can't handle transparent png */
* html #primary-nav li li a.menuparent span {
/* set your image here, right arrow, 98% over from the left, 100% or 'right' puts it to far */
   background:  url(http://ffss.com.au/uploads/images/parent.gif) no-repeat 98% center;
}

ul#primary-nav li ul a {
   text-align: left;   /* insures alignment */
   margin: 2px 1px;
   position: relative;   /* keeps it relative to it's container */
   padding: 3px 3px 3px 10px;   /* less padding than first level no need for large links here */
   font-weight: normal;   /* if first level is set to bold this will reset this level */
   border: 0 none;
}
ul#primary-nav li ul {
   background: #124E7E;
   margin: 0px;
   padding: 2px;
   position: absolute;
   width: auto;
   height: auto;
   display: none;
   z-index: 999;
   border-radius: 0px 0px 5px 5px;
   opacity: 0.95;   /* CSS 3 */
}
ul#primary-nav li ul ul {
   opacity: 95;   /* CSS 3 */
}
/* Styling the appearance of menu items on hover */
/*#primary-nav li:hover > a,
#primary-nav li.menu > a,
#primary-nav li.menuparent > a,
#primary-nav li.menuactive {
   background: #0A2D4A;
   color: #fff;
}*/
#primary-nav li:hover,
#primary-nav li.menuactive {
   background: #0A2D4A;
   color: #fff;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited, for fourth level add
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparent ul ul ul,
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparent ul,
#primary-nav li.menuparent ul ul {
   display: none;
}
/* for fourth level add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparent ul,
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li:hover.menuparent ul,
#primary-nav ul li:hover.menuparent ul,
#primary-nav ul ul li:hover.menuparent ul {
   display: block;
}
/* IE6 Hacks */
#primary-nav li li {
   float: left;
   clear: both;
}
#primary-nav li li a {
   height: 1%;
}


/*=== SIDEBAR NAV STYLES === */

#sidebar nav {
   font: 0.8em Verdana, "Trebuchet MS", Arial, sans-serif;
   display: block;
   width: 100%;
   margin: 0;
   background-color: #124E7E;
   border-radius: 3px;
}

#sidebar nav ul,
#sidebar nav ul li {
   list-style-type: none;
   margin: 0px;
   padding: 2px;
}
#sidebar nav ul { margin: 0 0 10px 0; }
#sidebar nav li a {
   display: block;
   //width: 100%;
   color: white;
   background-color: #16609B;
   font-size: 0.9em;
   font-weight: normal;
   text-decoration: none;
   padding: 3px 6px;
   margin: 2px 2px;
   border-radius: 2px;
}
#sidebar nav li a:hover,
#sidebar nav li a.menuactive {
   color: #FFF200;
}
#sidebar nav li a.menuactive:hover {
   background: #0A2D4A;
}
/* Stylesheet: FFSS_2015_NAV Modified On 2016-01-21 14:17:31 */
/*==== Tablet view ====*/
@media screen and (max-width:768px){

#mainwrapper header nav {
   font-size: 1em;
   text-align: center;
   background-color: #124E7E;
   width: 100%;
   display: block;
}
header nav ul {
   margin: 0 auto;
}
header nav ul li {
	width: 30%;
	display: inline-block;
}
header nav ul li a {
   display: block;
   border-collapse: collapse;
}
header nav ul ul li {
   display: none;
}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li:hover.menuparent ul,
#primary-nav ul li:hover.menuparent ul,
#primary-nav ul ul li:hover.menuparent ul {
   display: none;
}

#sidebar nav {
   /* Navigation links in sidebar */
   width: 100%;
   float: none;
   padding: 0;
   text-align: center;
   border-radius: 0;
}
#sidebar nav ul {
   margin: 0px auto;
}
 #sidebar nav ul li {
   display: inline-block;
   text-align: center;
   width: 30%;
   padding: 0;
}
} /* END Media query. */

/*==== Mobile phone view. ====*/
@media screen and (max-width:480px){
header nav ul li {
   width: 48%;
   //display: block;
}

#sidebar nav {}
#sidebar nav ul li {
   //display: block;
   width: 48%;
}
} /* END Media query. */

/* Stylesheet: FFSS_2015_NAV_responsive Modified On 2015-12-16 10:51:19 */
/* Sample FormBuilder CSS base */

form {margin-top:0}

form, form td, form th, form li { font-size: 9pt}

form div { margin-bottom:0; }

fieldset {
    margin-bottom:1em;
    border:1px solid #69C;
    padding:0.5em;
    border-radius: 5px;
}

fieldset legend {
   color:#fff;
   background:#69C;
   font-size:10px;
   font-weight: bold;
   text-align: center;
   margin-bottom:5px;
   padding: 2px;
   width: 40%;
   border-radius: 5px;
}

fieldset div {
   margin-bottom: 0.5em;
   margin-left:1em;
}

fieldset div div {
   margin-top:0.5em;
   margin-left:1em;
}
form div div {
   margin: 0 0 0.5em 0;
}

textarea {
   margin: 0.5em 0;
   width:98%;
   height: 6em
}

form div.fieldTitle {
    display: block;
    width: 120px;
    color: #333;
}

div.sectionText {
   font-size: 9pt;
   font-weight: bold;
   display: block;
   background: #ccc;
   padding: 2px 10pt;
   color: black;
   margin: 1em 0 0.5em 0;
}

.inputLong input[type="text"] { width: 250px; }
.inputLong input[type="email"] { width: 250px; }
.inputShort input[type="text"] { width: 125px; }

form div div div input[type="checkbox"],
form div div div input[type="radio"] { margin: 0; }

form div label {
   width: 200px;
   display: inline-block;
   font-weight: bold;
}
form div label.label { font-weight:normal; }

form div div.agreement label {
   width: 90%;
   display: inline-block;
}
form div div input[type="checkbox"] { vertical-align: top; }

form div div div label {
   text-align: left;
   font-weight: normal;
   display: inline-block;
   width: auto;
   margin: 0 1em 0 0;
}

form div div div {
   margin: 0 0 0 200px;
}
form div div div:first-of-type {
   display: inline-block;
   margin: 0;
}

form input[type="submit"] {
   font-size: 100%;
   font-weight: bold;
   padding: 5px;
   color: white;
   background-color: #69C;
   border-radius: 5px;
   border: 0 none;
   cursor: pointer;
   box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
   -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
   -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
form input[type="submit"]:hover {
   background-color: black;
}

/* Apply this class to text/select input fields with shorter labels to help alignment */
.short-label label {float:left; width:10em}
.short-label fieldset div input,
.short-label fieldset div select {width:16em}

/* Pretty up your Captcha image output */
.captcha {
   margin:0.5em 0;
   width:200px;
   text-align:center
}
.captcha img {border:1px solid #F60; margin-bottom:0.5em}
.captcha input {width:196px; margin-top:0.5em}

/* Just a bit more room for the Submit button */
.submit { margin-top:0.5em; }

/* Apply this class to text/select input fields with shorter labels to help alignment */
.short-label label {float:left; width:10em}
.short-label fieldset div input,
.short-label fieldset div select {width:16em}

/* Pretty up your Captcha image output */
.captcha {
   margin:0.5em 0;
   width:200px;
   text-align:center
}
.captcha img {border:1px solid #F60; margin-bottom:0.5em}
.captcha input {width:196px; margin-top:0.5em}

/* Just a bit more room for the Submit button */
.submit {margin-top:0.5em}

.contactform input {border: 1px solid #f60;}
.contactform input.checkbox {border: none;}
.contactform label {
   display: block;
   float: left;
   width: 150px;
}
.contactform label.label {
   display: inline;
   float: none;
   width: 50px;
   font-size: 10px;
}
.contactform textarea {
   background-color: #ffc;
   border: 1px solid #f60;
}
.formbuilderform .message {
   line-height: 16px;
   padding: 0 0 8px 0;
}
/*===== Mobile view layout =====*/
@media screen and (max-width:480px){
  form>div>label,
  form>div>fieldset>div>label {
    display: block;
  }
  form div div div,
  form div div div:first-of-type {
    display: block;
    margin: 0;
  }
}

/* Stylesheet: FormBuilder Default Style Modified On 2016-10-06 13:44:57 */