@charset "UTF-8";
/* CSS Document */
/*
Blue #2c8fc8
Grey #efefef
Black #282828
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(7, 7, 7, 0.75);
-moz-box-shadow: 2px 2px 5px 0px rgba(7, 7, 7, 0.75);
box-shadow: 2px 2px 5px 0px rgba(7, 7, 7, 0.75);
*/
body {
background: white;
margin: 0 auto;
-webkit-text-size-adjust: none;
font-family: Verdana, Tahoma, arial, sans-serif;
}
a img {
border: none;
}
hr {
border: none;
border-top: 1px dotted #132441;
margin: 20px 0 20px 0;
}
hr.inner {
border: none;
border-top: 1px dotted #132441;
margin: 20px 0 20px 0;
}
#headerBackground {
float: left;
width: 100%;
background-color: #2c8fc8;
z-index: 1000;
}
header {
margin: 0 auto;
width: 1200px;
}
#logo {
float: left;
width: 280px;
height: 100px;
margin: 0 0 10px 0;
position: relative;
}
#logo h1 {
position: absolute;
margin: 0;
padding: 0;
font: bolder 44px 'Trebuchet MS', Arial, Sans-serif;
letter-spacing: -2px;
color: #FFF;
text-transform: none;
top: 25px;
left: 47px
}
#logo h2 {
position: absolute;
margin: 1;
padding: 2;
font: 400 12px 'Trebuchet MS', Arial, Sans-serif;
text-transform: none;
color: #FFF;
top: 70px;
left: 55px
}
#logo:hover {
cursor: pointer;
}
/* Nav */
nav {
float: right;
margin: 50px 0 0 0;
padding: 0;
}
nav ul {
float: right;
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
nav li {
display: inline;
color: white;
font-size: 100%;
padding: 0;
text-transform: uppercase;
}
nav li a {
color: white;
text-decoration: none;
margin: 0 0 0 40px;
font-weight: normal;
padding: 0;
}
nav li a:hover {
color: #282828;
text-decoration: none;
}
nav li a.active {
color: #282828;
text-decoration: none;
}
/*Mobile Menu*/
#accordionSection {
float: left;
display: none;
text-align: left;
}
.accordionButton {
padding: 0;
}
.accordionButton h4 {
color: white;
height: 40px;
width: 40px;
padding: 0;
margin:0;
}
.accordionContent {
float: left;
}
.accordionContent ul {
float: left;
list-style-type: none;
padding: 0;
text-align: left;
margin: 0;
}
#accordionSection .accordionContent li {
display: block;
font-size: 90%;
margin: 0;
padding: 0;
line-height: 35px;
color: #282828;
float: none;
text-align: left;
}
#accordionSection .accordionContent li a {
float: none;
color: white;
border: none;
text-align: left;
padding: 5px;margin: 0;
}
#accordionSection .accordionContent li a:hover {
border: none;
text-decoration: none;
color: #282828;
}
#accordionSection .accordionContent li a.active {
border: none;
text-decoration: none;
color: #282828;
}
/*Browse Fonts*/
#browseBackground {
float: left;
width: 100%;
background-color: #282828;
}
#browseFonts {
margin: 0 auto;
width: 1200px;
text-align: center;
padding: 10px 0 10px 0;
}
#browseFonts p {
color: white;
font-size: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#browseFonts a {
color: white;
font-size: 90%;
margin: 0;
padding: 0 3px 0 3px;
text-decoration: none;
text-align: center;
}
#browseFonts a:hover {
color: white;
text-decoration: underline;
}
/* Copyright */
#footerBackground {
float: left;
width: 100%;
background-color: #282828;
padding: 5px 0 10px 0;
text-align: center;
font-weight: normal;
}
footer {
width: 1200px;
margin: 0 auto;
padding: 6px 0 3px 0;
}
footer ul {
list-style-type: none;
padding: 0 0 10px 0;
margin: 0;
}
footer li {
display: inline;
color: white;
font-size: 80%;
}
footer li a {
color: white;
text-decoration: none;
}
footer p {
color: white;
font-size: 80%;
margin: 0 0 3px 0;
}
footer p a {
text-decoration: none;
color:white;
}
footer p a:hover {
text-decoration: underline;
color:white;
}
/* Side Bar */
#sideBarSection {
float: left;
width: 25%;
display: none;
}
.sideBarButton {
float: left;
padding: 10px 0 10px 0;
background-color: #282828;
width: 100%;
}
.sideBarButton h4 {
float: left;
color: white;
margin: 0 0 0 10px;
font-weight: normal;
font-size: 100%;
}
.sideBarButton img {
float: right;
margin: 0 3px 0 0 !important;
padding: 0 !important;
}
.sideBarContent {
float: left;
border: 1px solid #282828;
padding: 10px;
}
.sideBar {
float: left;
width: 25%;
}
.sideBarBox {
background-color: #efefef;
padding-bottom: 20px;
margin-bottom: 20px;
}
.sideBarBox h4 {
color: white;
background-color: #2c8fc8;
text-align: left;
padding: 10px;
margin: 0;
}
.sideBarBoxBody {
width: 96%;
padding-left: 2%;
padding-right: 2%;
margin-top: 10px;
}
.sideBarBox input {
color: #282828;
border: none;
float: left;
height: 30px;
width: 65%;
background-color: white;
border-radius: 0;
}
.sideBarBox input.button {
float: left;
width: 25%;
height: 32px;
font-size: 90%;
background-color: #2c8fc8;
color: white;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
text-transform: uppercase;
border-radius: 0;
}
.sideBarBox input.button:hover {
background-color: #282828;
color: white;
cursor: pointer;
}
.sideBarBox input[type="radio"] {
float: none;
width: auto;
font-size: 90%;
margin-top: 10px;
}
.sideBarBox select {
color: #282828;
border: none;
height: 30px;
width: 100%;
background-color: white;
}
.sideBarBox ul {
list-style-type: none;
padding: 0;
text-align: left;
}
.sideBarBox table {
float: left;
width: 100%;
}
.sideBarBox table input {
float: left;
width: 90%;
}
.sideBarBox table td {
float: left;
width: 100%;
text-align: left;
font-size: 90%;
margin-bottom: 10px;
}
#mainBody table.services th {
background-color: #118887;
color: white;
padding: 10px 0 10px 0;
font-weight: bold;
font-size: 100%;
border-bottom: 5px solid #282828;
}
#mainBody table.services td {
border-bottom: 1px dotted #282828;
padding: 10px 0 10px 0;
font-size: 90%;
}
#mainBody table.services td.column2 {
font-weight: bold;
}
/* Main */
#main {
float: right;
width: 70%;
}
/* Main Body */
#mainBodyOuter {
float: left;
width: 100%;
min-height: 750px;
padding-bottom: 20px;
padding-top: 20px;
}
#mainBody {
margin: 0 auto;
width: 1200px;
}
#mainBody h1 {
font-size: 110%;
color: #2c8fc8;
border-bottom: 2px solid #2c8fc8;
padding: 0 0 10px 0;
}
#mainBody h2 {
font-size: 110%;
color: #2c8fc8;
border-bottom: 2px solid #2c8fc8;
padding: 0 0 10px 0;
}
#mainBody h2 a {
color: #2c8fc8;
text-decoration: none;
}
#mainBody h2 a:hover {
color: #282828;
text-decoration: none;
}
#mainBody p {
font-size: 90%;
line-height: 26px;
color: #282828;
}
#mainBody p b {
color: #282828;
font-weight: bold;
}
#mainBody p a {
color: #2c8fc8;
text-decoration: underline;
}
#mainBody p a:hover {
color: #282828;
text-decoration: none;
}
#mainBody li {
font-size: 90%;
line-height: 30px;
color: #282828;
}
#mainBody li b {
font-weight: bold;
color: #282828;
}
#mainBody li a {
color: #2c8fc8;
text-decoration: none;
}
#mainBody li a:hover {
color: #282828;
text-decoration: underline;
}
#mainBody img {
margin: 0px 0 0px 0;
max-width: 100%;
height: auto;
}
/* Contact Form */
#contactForm {
 float: left;
 border: none;
 padding: 0;
 width: 100%;
 margin-bottom: 20px;
 margin-top: 15px;
}


#contactForm .button {
 float: right;
 font-size: 110%;
 background-color: #282828;
 color: white;
 -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
 border: none;
 text-transform: uppercase;
}

#contactForm .button:hover {
 background-color: #2c8fc8;
 color: white;
 cursor: pointer;
}

#contactForm label {
 font-size: 90%;
 color: #2c8fc8;
 font-weight: bold;
 width: 100%;
 float: left;
 margin-bottom: 5px;
} 

#contactForm input {
 color: #282828;
 float: left;
 height: 30px;
 width: 100%;
 background-color: white;
 border: 1px solid #282828;
 margin-bottom: 20px;
}

#contactForm textarea {
 color: #282828;
 float: left;
 height: 120px;
 width: 100%;
 background-color: white;
 border: 1px solid #282828;
 margin-bottom: 20px;
}
.main form {
border: none;
padding: 0;
width: 450px;
margin-bottom: 20px;
margin-top: 15px;
}
.main form .button {
float: right;
width: 65px;
height: 25px;
background-color: #282828;
color: white;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
text-transform: uppercase;
}
.main form .button:hover {
background-color: #2c8fc8;
color: white;
cursor: pointer;
}
.main form label {
font-size: 90%;
color: #118887;
font-weight: bold;
}
.main form input {
color: #282828;
border: none;
float: right;
height: 30px;
width: 280px;
background-color: white;
border: 1px solid #282828;
}
.main form textarea {
color: #282828;
float: right;
height: 120px;
width: 278px;
background-color: white;
border: 1px solid #282828;
}
iframe {
width: 100% !important;
height: auto !important;
}
#banner {
width: 100% !important;
height: auto !important;
}
/* 1199*/
@media only screen
and (max-width : 1199px)
{
header {
width: 100%;
}
footer {
width: 100%;
}
#mainBody {
width: 100%;
}
#browseFonts {
width: 100%;
}
nav li a {
margin-left: 25px;
}
}
/* 959*/
@media only screen
and (max-width : 959px)
{
#logo {
float: left;
width: 100%;
}
#logo img {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
}
header {
width: 100%;
}
#accordionSection {
display: block;
margin-left: 10px;
}
nav ul.mainNav {
display: none;
}
nav {
float: left;
width: 100%;
margin: 0;
padding: 0;
border-top: 1px solid white;
}
#banner {
float: left;
width: 95%;
padding: 1%;
height: auto;
margin-bottom: 15px;
}
#mainBody {
width: 95%;
padding: 1%;
}
#mainBodyOuter #mainBody {
border-top: none;
margin-top: 0;
}
#mainBodyOuter {
margin-top: 10px;
}
footer {
width: 95%;
padding: 1%;
}
#copyright {
width: 95%;
padding: 1%;
}
.iframe {
float: left;
width: 100%;
}
#browseFonts p {
float: left;
padding: 10px;
text-align: left;
}
#browseFonts p span {
float: left;
}
#browseFonts a {
float: left;
text-align: left;
}
}
/* 730*/
@media only screen
and (max-width : 730px)
{
#headerBackground {
position: fixed;
}
#browseBackground {
display: none;
}
.sideBar {
float: left;
width: 100%;
}
.sideBarMain {
display: none;
}
#sideBarSection {
float: left;
width: 100%;
margin-bottom: 20px;
display: block;
}
#main {
float: left;
width: 100%;
}
#mainBody {
width: 95%;
padding: 1%;
padding-top: 200px;
}
#copyright {
width: 95%;
padding: 1%;
}
.iframe {
float: left;
margin-bottom: 10px;
}
.main form {
width: 100%;
}
.main form input {
float: left;
width: 100%;
}
.main form textarea {
float: left;
width: 100%;
}
}
/* 480*/
@media only screen
and (max-width : 480px)
{
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
}
.cc-cookies { position:fixed; width: 100%; bottom: 0; padding: 5px; background: #282828; color: white; font-size: 90%; z-index: 99999; text-align: center; }
.cc-cookies a, .cc-cookies a:hover { color: #fff; text-decoration: underline; }
.cc-cookies a:hover { text-decoration: none; }
.cc-overlay { height: 100%; padding-top: 25%; }
.cc-cookies-error { float: left; width: 90%; text-align: center; margin: 1em 0 2em 0; background: #fff; padding: 2em 5%; border: 1px solid #ccc; font-size: 18px; color: #333; }
.cc-cookies a.cc-cookie-accept, .cc-cookies-error a.cc-cookie-accept, .cc-cookies a.cc-cookie-decline, .cc-cookies-error a.cc-cookie-decline, .cc-cookies a.cc-cookie-reset { display: inline-block; color: white; text-decoration: none; background:#2c8fc8; padding: 0.5em 0.75em; border-radius: 3px; box-shadow: 0 0 2px rgba(0,0,0,0.25); text-shadow: 0 -1px 0 rgba(0,0,0,0.35); -o-transition: background 0.5s ease-in; -webkit-transition: background 0.25s ease-in; -moz-transition: background 0.25s ease-in; }
.cc-cookies a.cc-cookie-decline, .cc-cookies-error a.cc-cookie-decline { background: #2c8fc8; margin-left: 0.5em; }
.cc-cookies a.cc-cookie-reset { background: #868ab5; }
.cc-cookies a:hover.cc-cookie-accept, .cc-cookies-error a:hover.cc-cookie-accept, .cc-cookies a:hover.cc-cookie-decline, .cc-cookies-error a:hover.cc-cookie-decline, .cc-cookies a:hover.cc-cookie-reset { background: #efece8; -o-transition: background 0.5s ease-in; -webkit-transition: background 0.25s ease-in; -moz-transition: background 0.25s ease-in; color: black;}
.cc-cookies-error a.cc-cookie-accept, .cc-cookies-error a.cc-cookie-decline { display: block; margin-top: 1em; }
.cc-cookies.cc-discreet { width: auto; padding: 0.5em 1em; left: auto; top: auto; }
.cc-cookies.cc-discreet a.cc-cookie-reset { background: none; text-shadow: none; padding: 0; text-decoration: underline; }
.cc-cookies.cc-discreet a:hover.cc-cookie-reset { text-decoration: none; }.ui-autocomplete-loading {
    background: white url("/gfx/ui-anim_basic_16x16.gif") right center no-repeat;
  } input.button{font:700 12px Arial,Sans-serif;height:24px;margin:0;padding:2px 3px;color:#FFF;background:#2C8FC8 url(button-bg.jpg) repeat-x;border:none}.searchform{background-color:transparent;border:none;margin:0;padding:5px 0 15px;width:190px}#fwrapper {
  margin-left: 10px;
}
#fpad {
  float: left;
  width: 375px;
  }
#fmet {
  float: left;
  width: 400px;
  margin-left: 10px;
}
#fcleared {
  clear: both;
}
.pad-ad {
  width:340px;
  height:150px;
  text-align:center;
  overflow:hidden;
}