/******************************************************************************************\
*			 NOTE: All styles an place holder images assume dims of 640x480 				*
\******************************************************************************************/
/* ToDo: make #D1D1D1 a dotLess constant (grey color used for lines and borders) */
/* ToDo: make #1786EB a dotLess constant (light blue for link hover and other feedback) */


/*
** Responsive Setup
*/
html {
    -webkit-text-size-adjust: none;
}
body, ul, p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-margin-before:0;
    -webkit-margin-after:0;
    -webkit-margin-start:0;
    -webkit-margin-end:0;
    -webkit-padding-start:0;
}
section img {
    max-width: 100%;
    height: auto;
}
iframe {
    width: 100%;
    height: auto;
}


/*
** Kendo Setup
*/  
/**********  BEGIN scrollview specifics **********/
.km-pages {
    padding-top: 0.2em;
}
.km-pages li {
    border: 1px solid #C0C0C0;
    border-radius: 5px;
}
.km-pages .km-current-page {
    background-color: #303030;
}
section .km-scrollview {
 	width: 100%;
    padding-right: 5%;
 	/* change box model so the addition of padding doesn't change our width */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
section .fullWidth .km-scrollview {
    padding-right: 0%;
}
.km-scrollview .contentBlock {
    position: relative;
    display: inline-block;
    vertical-align: top;
    /*width: 250px;
    margin-right: 15px;*/
    width: 100%;

    /* change box model so the addition of padding doesn't change our width */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.km-scrollview .carouselImg,
.km-scrollview .captionWrap {
    margin-right: 15px;
}
.fullWidth .carouselImg,
.fullWidth .captionWrap {
    margin-right: 0;
}
.km-scrollview .contentBlock img {
    border-radius: 10px;
    margin-bottom: 15px;
}
.fullWidth .km-scrollview .contentBlock img {
    border-radius: 0px;
}
.km-scrollview .last img,
.km-scrollview .last .carouselImg,
.km-scrollview .last .captionWrap {
    margin-right: 0px;
}
.km-scrollview .contentBlock a,
.km-scrollview .contentBlock img {
    display:block;
}
/* 
Add a margin to the bottom of the carousel images on smaller
screens to avoid covering the whole photo with caption text
*/
@media only screen and (max-width: 400px) {
    .km-scrollview .contentBlock img {
        margin-bottom: 0px;
    }
}
.km-scrollview .contentBlock .captionLink {
    display: block;
}

.mobileHome h2{
    margin: 5% 5%;
    width: 90%;
    border-top: 1px solid #999;
    padding: 10px;
}

.mobileHome .km-scrollview .contentBlock .captionWrap {
    background: #000;
    /* safari v4.0+ and by Chrome v3.0+ */
    background: transparent -webkit-gradient(linear,color-stop(0, rgba(0,0,0,0)),color-stop(1, rgba(0,0,0,.5)),color-stop(1, rgba(0,0,0,1)));
    /* Chrome v10.0+ and by safari nightly build*/
    background: transparent -webkit-linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,1)47%,rgba(0,0,0,1) 100%);
    /* Opera v11.10+ */
    background: transparent -o-linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,1) 47%,rgba(0,0,0,1) 100%);
    background: transparent linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,1) 47%, rgba(0,0,0,1) 100%);


    
    padding: 12px 10px 5px 10px;

    position: absolute;
    bottom:0px;
    left:0;
    border-radius: 0 0 10px 10px;
    /*max-width: 604px;*/
    cursor: pointer;
 	/* change box model so the addition of padding doesn't change our width */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.fullWidth .contentBlock .captionWrap {
    padding: 10px;
    width: 100%;
}
.fullWidth .km-scrollview .contentBlock div {
    border-radius: 0;
}
.km-scrollview .contentBlock h2 {
    color: #fff;
    margin: 0 0 .25em 0;
    padding: 0;
    line-height: 24px;
    width: auto;
    font-size: 22px;
    font-weight: bold;
    text-shadow:1px 2px 4px rgba(0,0,0,0.75);
    white-space: normal;
}
.km-scrollview .contentBlock p {
    color: #fff;
    font-size: 14px;
    line-height: 16px;
    white-space: normal;
    margin: 0;
}
.km-scrollview .contentBlock .actions {
    display: none;
}
/**********  End scrollview specifics **********/


/*
** Structural Setup
*/
header {
    background-color: #0054A9;
    /* safari v4.0+ and by Chrome v3.0+ */
    background-image:-webkit-gradient(linear,color-stop(0, rgb(0,84,169)),color-stop(1, rgb(0,50,100)));
    /* Chrome v10.0+ and by safari nightly build*/
    background-image:-webkit-linear-gradient(rgb(0,84,169) 0%,rgb(0,50,100) 100%);
    /* Opera v11.10+ */
    background-image:-o-linear-gradient(rgb(0,84,169) 0%,rgb(0,50,100) 100%);
    background-image:linear-gradient(rgb(0,84,169) 0%,rgb(0,50,100) 100%);

    /* change box model so the addition of padding doesn't change our width */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    display: block;
    height: 60px;
    padding: 0; /* 1% = 6px @ 650px wide */
    width: 100%;
}
header table {
    width:100%;
    border-spacing: 0px;
}
header table td {
    vertical-align: middle;
    text-align: center;
}
header img 
{
    margin: 0 auto;
    display: block;
}
header .btn
{
    width: 62px;
    padding-top: 9px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    height: 50px;
}
#btnMenu {
    float: left;
    border-right: 1px solid #000;
    text-align: center;
}
#btnMenu .close {
    display: none;
}
#btnMenu.active .close {
    width: 45px;
    height: 40px;
    background: #fff url("/images/mobile/icons-36-black.png") -176px -30px;
    margin: 8px 0 0 8px;
    border-radius: 20px 20px 0 0 ;
    display: block;
}
#btnMenu.active {
    /* safari v4.0+ and by Chrome v3.0+ */
    background-image:-webkit-gradient(linear,color-stop(0, rgb(68,68,68)),color-stop(0.86, rgb(24,20,18)),color-stop(1, rgb(24,20,18)));
    /* Chrome v10.0+ and by safari nightly build*/
    background-image:-webkit-linear-gradient(rgb(68,68,68) 0%,rgb(24,20,18) 86%,rgb(24,20,18) 100%);
    /* Opera v11.10+ */
    background-image:-o-linear-gradient(rgb(68,68,68) 0%,rgb(24,20,18) 86%,rgb(24,20,18) 100%);
    background-image:linear-gradient(rgb(68,68,68) 0%,rgb(24,20,18) 86%,rgb(24,20,18) 100%);
    
    /* change box model so the addition of padding doesn't change our width */
    color: #fff;
}
#btnMenu img {
    display: block;
    margin-bottom: 3px;
}
#btnHome {
    display: inline-block;
    text-align: center;
}
#btnHome img 
{
    margin-top: 3px;
    width: 125px;
}
#btnCall {            
    float: right;
    border-left: 1px solid #000;
}

#pageWrap {
    width: 100%;
}
section {
    width: 100%;
    padding-top: 10px;
}

.mobileHome section 
{
    padding-top: 0;
}

section > h1, section > h2, section > h3, section > h4, section > h5, section > h6 {
    padding: 0px 15px; /* 3% = 20px @ 650px wide */
    width: 100%;
 	/* change box model so the addition of padding doesn't change our width */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
section > p, section > div, section > a {
    padding: 0 15px 10px 15px; /* 3% = 20px @ 650px wide */
    width: 100%;
 	/* change box model so the addition of padding doesn't change our width */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
section > table, section > ul {
    margin: 0 3%; /* 3% = 20px @ 650px wide */
    width: 94%;
}
section .carousel {
    padding-right: 0px;
}
section .fullWidth {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
section ul {
    margin-left: 2em;
}
section #sidebar {
    display: none;
}

#navMenu {
    border-bottom: 1px solid #D1D1D1;
    display: none;
    background: #000;
}
nav ul {
    list-style-type: none;
}
nav ul ul {
    display: none;
    border-left: 16px solid #b5b5b5;
    font-size: 18px;
    background: #003264;
}
nav ul ul ul {
    border-left: 16px solid #b5b5b5;
    background: #0054A9;
}
nav ul li a {
    display: block;
    padding: 12px 3%;
    font-size: 18px;
    border-top: 1px dashed #ddd;
    color: #b5b5b5;
    text-decoration: none;
    background-color: #0054A9;
    /* safari v4.0+ and by Chrome v3.0+ */
    background-image:-webkit-gradient(linear,color-stop(0, rgb(0,84,169)),color-stop(1, rgb(0,50,100)));
    /* Chrome v10.0+ and by safari nightly build*/
    background-image:-webkit-linear-gradient(rgb(0,84,169) 0%,rgb(0,50,100) 100%);
    /* Opera v11.10+ */
    background-image:-o-linear-gradient(rgb(0,84,169) 0%,rgb(0,50,100) 100%);
    background-image:linear-gradient(rgb(0,84,169) 0%,rgb(0,50,100) 100%);
}
nav ul ul li a {
    display: block;
    padding: 12px 3%;
    font-size: 18px;
    border-top: 1px dashed #ddd;
    color: #b5b5b5;
    text-decoration: none;
}
nav ul li a:hover,
a.active {
    color: #fff;
}
nav a .more {
    width: 20px;
    height: 20px;
    float: right;
    display: block;
    background: url("/images/mobile/icons-18-black.png") -17px -14px;
}
nav a.active .more {
    width: 20px;
    height: 20px;
    float: right;
    display: block;
    background: url("/images/mobile/icons-18-black.png") -53px -14px;
}
footer {
    /* safari v4.0+ and by Chrome v3.0+ */
    background-image:-webkit-gradient(linear,color-stop(0, rgb(0,84,169)),color-stop(1, rgb(0,67,133)));
    /* Chrome v10.0+ and by safari nightly build*/
    background-image:-webkit-linear-gradient(rgb(0,84,169) 0%,rgb(0,67,133) 100%);
    /* Opera v11.10+ */
    background-image:-o-linear-gradient(rgb(0,84,169) 0%,rgb(0,67,133) 100%);
    background-image:linear-gradient(rgb(0,84,169) 0%,rgb(0,67,1330,50,100) 100%);

    border-top: 2px solid #003c77;
    color: #fff;
    font-size: 14px;
    padding: 15px 10px;
}
footer ul {
    list-style: none;
}
footer a {
    color: #fff;
    text-decoration: none;
}
footer ul a {
    vertical-align: middle;
    padding: 5px 0;
    display: block;
}
footer a span {
    width: 26px;
    height: 26px;
    margin-right: 2px;
    display: inline-block;
    vertical-align: middle;
}

footer .iso a {
    height: 46px;
}

footer .iso img {
    display: inline-block;
}

footer .iso span {
    width: auto;
    height: auto;
    margin-bottom: 20px;
    display: inline-block;
}
footer .phone span {
    background: url("/images/mobile/icons-18-white.png") -806px -15px;
}
footer .email span {
    background: url("/images/icon-envelope.png")  7px 9px no-repeat;
}
footer .find span {
    background: url("/images/mobile/icons-18-white.png") -1509px -15px;
}
footer .ask span {
    background: url("/images/icon-question.png") 9px 5px no-repeat;
}
footer .address {
    margin: 0 0 4px 0;
    padding-bottom: 0.75em;
    text-align: center;
    border-bottom: 1px solid #fff;
}
footer .copyright {
    border-top: 1px solid #fff;
    padding-top: 15px;
    margin: 2px 0 0 0;
    font-size: 12px;
}
footer .creditLine {
    margin-bottom: 0;
    font-size: 12px;
}
footer .websiteBy {
    text-decoration: underline;
}
footer .fullSite {
    text-decoration: underline;
    display: inline-block;
    float: right;
}
.top {
	background: #D1D1D1;
	color: #000;
	text-align: center;
	text-decoration: none;
	font-size: 14px;
	display: block;
	padding: 5px 0;
}
.top span {
	background: url("/images/mobile/icons-18-black.png") -197px -12px;
	width: 20px;
	height: 20px;
	display: inline-block;
}

/*
** MoJo Active CMS styles
*/
h1 {
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0 10px 0;
    letter-spacing: -1px;
}
h2 {
    font-size: 20px;
    font-weight: 400;
    margin: 10px 0 10px 0;
}
h3 {
    font-size: 18px;
    font-weight: 400;
    margin: 20px 0 10px 0;
}
h4 {
    font-size: 18px;
}
h5, h6 {
    font-size: 16px;
}
.ui-li .ui-btn-inner { padding-right: 3em; }

.sectionHead { display: none; }

p { margin: 0.4em 0 0.75em 0; }

#footer a, #footer .ui-link { text-shadow: none; }

td, th { vertical-align: top; }

.imgLt { float: left; margin: 0 0.8em 0.8em 0; }
.imgRt { float: right; margin: 0 0 0.8em 0.8em; }
.clr { clear: both; }

#breadCrumb a,
#breadCrumb span { padding-right: 0.25em; }

.infoDisplay { }
.infoDisplay th,
.infoDisplay td { padding: 0 10px 5px 0; }
.infoDisplay th { text-align: right; }

.twoCol .col {
    width: 100%;
    display: block;
    vertical-align: top;
    margin-bottom: 20px;
}
a.external, a.doc, a.xls ,a.pdf {
    padding-left: 25px;
    background: url("/images/icons/external.gif") 3px 0 no-repeat;
}
a.doc {
    background: url("/images/icons/doc.gif") 3px 0 no-repeat;
}
a.xls {
    background: url("/images/icons/xls.gif") 3px 0 no-repeat;
}
a.pdf {
    background: url("/images/icons/pdf.gif") 3px 0 no-repeat;
}


/*
** Homepage Styles
*/
.viewAll {
    display: block;
	padding: 0 0 1% 0;
    font-size: 18px;
    font-weight: 400;
    width: auto;
    color: #1786EB;
    text-decoration: none;
}

.homePage #sidebar{ display: none;}

.carousel {
    padding-bottom: 5px;
    border-bottom: 1px solid #999999; 
}

.carousel a {
    text-decoration: none;
}


/*
** Secondary Page Styles
*/

#content .contentBlock 
{
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #999999; 
}

#content .contentBlock .imgRt,
#content .contentBlock .imgLt
{
    float: none;
    margin-left: 0;
    margin-right: 0;
}


.actions {
	width: 130px;
	margin: 0 auto;
		}

.actions li {
		display: inline-block;
		font-size:14px;
		font-weight:bold;
		text-align:center;
		width: 40px;
		overflow: hidden; 
		text-indent: -999em;
}	
.actions a {
			padding-left: 40px;
			padding-top: 4px;
			margin-right: 25px;
			color:#181412;
			text-decoration: none;
			background-repeat: no-repeat;
			background-position: 0 0;
			display: block;
			height: 30px;
		}

.actions a:hover {
			opacity: 0.80;
			filter: alpha(opacity=80);
		}
	
.learn a {
	background-image: url(/images/icon-btn-info.png);
}

.ask a {
	background-image: url(/images/icon-btn-question.png);
}

.download a {
	background-image: url(/images/icon-btn-arrow.png);
}

/*
** Form Styles
*/
.formDisplay th {
    display: block;
    text-align: left;
}

.formDisplay td {
    display: block;
    padding-bottom: 10px;
}

.formDisplay textarea { width: 200px;}
/*
** Events
*/
.mobile .eventDetails {
    float: none;
    width: auto;
    margin: 0 0 20px;
    padding: 0 10px;
}
.eventInfo .external{ padding: 0;}
.event h4{ color: #333132;}
.event h3{ margin: 20px 0 5px 0;}
#search {
    /* safari v4.0+ and by Chrome v3.0+ */
    background: transparent -webkit-gradient(linear,color-stop(0, rgba(0,0,0,0)),color-stop(1, rgba(190,190,190,.5)),color-stop(1, rgba(190,190,190,1)));
    /* Chrome v10.0+ and by safari nightly build*/
    background: transparent -webkit-linear-gradient(rgba(0,0,0,0) 0%,rgba(190,190,190,1)47%,rgba(190,190,190,1) 100%);
    /* Opera v11.10+ */
    background: transparent -o-linear-gradient(rgba(0,0,0,0) 0%,rgba(190,190,190,1) 47%,rgba(190,190,190,1) 100%);
    background: transparent linear-gradient(rgba(0,0,0,0) 0%,rgba(190,190,190,1) 47%, rgba(190,190,190,1) 100%);
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    float: right;
}
#search span{ color: #000;}
.events #sidebar{ margin: 15px 0 0;}
#siteSearch{ display: none;}
.dateRange { margin: 15px 0 0;}
.mobile .dateRange label {
    display: block;
    float: none;
}
.mobile .dateRange span {
    float: left;
}
.mobile #eventSearch {
    float: none;
    display: block;
    margin: 20px 0;
    /* safari v4.0+ and by Chrome v3.0+ */
    background: transparent -webkit-gradient(linear,color-stop(0, rgba(0,0,0,0)),color-stop(1, rgba(190,190,190,.5)),color-stop(1, rgba(190,190,190,1)));
    /* Chrome v10.0+ and by safari nightly build*/
    background: transparent -webkit-linear-gradient(rgba(0,0,0,0) 0%,rgba(190,190,190,1)47%,rgba(190,190,190,1) 100%);
    /* Opera v11.10+ */
    background: transparent -o-linear-gradient(rgba(0,0,0,0) 0%,rgba(190,190,190,1) 47%,rgba(190,190,190,1) 100%);
    background: transparent linear-gradient(rgba(0,0,0,0) 0%,rgba(190,190,190,1) 47%, rgba(190,190,190,1) 100%);
    padding: 5px 10px;
    border-radius: 10px;
}

 .mobile.productDetails .cbText{
     width: auto;
}

.mobile.productDetails section ul {
    margin-left: 15px;
}

.mobile  .abBlock {
    display: block;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

.mobile .abBlock.first {
    padding-top: 10px;
    margin-top: 20px;
    border-top: 1px solid #ccc;
}

.mobile .abBlock .magGlass,
.mobile .abBlock .icon-head,
.mobile .abBlock .icon-pdf {
    float: left;
    padding-right: 5px;
    margin-bottom: 0px;
    display: inline-block;
}

.mobile .abBlock a {
    display: block;
}

.mobile .abBlock .btn-findAHead,
.mobile .abBlock .btn-GetAQuote,
.mobile .abBlock .btn-GetBrochure {
    float: right;
}

.mobile .abBlock {
    display: block;
    padding-bottom: 40px;
}

.mobile .abBlock span {
    display: block;
}

.mobile .abGetAQuote h3 {
    margin-bottom: 12px;
}

.mobile #content .contentBlock>div>img.imgLt {
    float: left;
    margin-right: 15px;
}

.mobile .contentBlock>div>h3 {
    display: inline-block;
    margin: 5px 0px;
    width: 70%;
}

.mobile .contentBlock>div {
    padding-bottom: 10px;
}

.mobile #pageNav {
    display: none;
}

.mobile .carousel {
    border-bottom: none;
}

/*
.mobile .km-scrollview .contentBlock .captionWrap {
    background: none;
}
*/

.mobile #content .km-scrollview .contentBlock {
    border-bottom: none;
}

.mobile #content .contentBlock {
    margin-bottom: 0px;
    padding-bottom: 0px;
    vertical-align: top;
}

.mobile #content .contentBlock.first {
    border-bottom: 0px;
}

.mobile .imgCarouselNumNav .km-scrollview .contentBlock .carouselImg {
    background: #f1f1f1;
    border-radius: 20px;
}

.mobile .imgCarouselNumNav .km-scrollview .contentBlock .captionWrap,
.mobile .imgCarouselNumNav .km-scrollview .contentBlock .captionWrap p {
    position: relative;
    padding: 0px;
    white-space: normal;
    color: #3F3F3F;
    margin: 0.4em 0 0.75em 0;
}

.mobile .imgCarouselNumNav .km-scrollview .contentBlock .captionWrap h2 {
    text-shadow: none;
    color: #5F5F5F;
    font-family: 'Titillium Web',sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 24px;
}

.mobile.content1214 .contentBlock th,
.mobile.content1214 .contentBlock thead {
    display: none;
}

.mobile.content1214 .contentBlock tr {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    display: block;
}

.mobile.content1214 .contentBlock tr:last-child {
    border-bottom: none;
    padding-bottom: 0px;
}

.mobile.content1214 .contentBlock td {
    display: block;
    width: 100%;
}

.mobile.content1212 .contentBlock tr {
    display: block;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

.mobile.content1212 .contentBlock thead tr {
    display: inline;
    margin-bottom: 10px;
}

.mobile.content1212 .contentBlock th,
.mobile.content1212 .contentBlock td {
    width: 50%; 
}

.mobile.content1212 .contentBlock tr:last-child {
    border-bottom: none;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.mobile.content1227 .contentBlock .cbText ul{
    display: block;
    margin-bottom: 20px;
}

.mobile.content1224 #content .contentBlock {
    margin-bottom: 30px;
    border-bottom: 1px solid #999999;
}

.mobile.contactPage .formFieldWrap li{
    position: relative;
}

.mobile.contactPage input {
    position: relative;
    right: 0px;
    display: inline-block ;
}

.mobileHome #svHomeCarousel .km-scrollview .contentBlock .captionWrap {
    display: none;
}

.TitilliumRed {
	font-family: 'Titillium Web', sans-serif;
	font-size:32px;
	color:#9D0B0F;
	display:block;
	line-height: 36px;
	font-weight:200;
	margin-bottom:4px;
}

.TitilliumBlue {
	font-family: 'Titillium Web', sans-serif;
	font-size:32px;
	color:#2777AB;
	display:block;
	line-height: 36px;
	font-weight:200;
	margin-bottom:4px;
}

.TitilliumGreen {
	font-family: 'Titillium Web', sans-serif;
	font-size:32px;
	color:#55A31C;
	display:block;
	line-height: 36px;
	font-weight:200;
	margin-bottom:4px;
}