@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Roboto:400,500');

/* 
    font-family: 'Roboto', sans-serif;
    font-family: 'Fjalla One', sans-serif;

*/

body {
	font-size: 100%;
	margin: 0px;
	font-family: 'Roboto', sans-serif;
	color: #000000;
}

p,li,dt,dd,a,td	{font-size: 0.938rem;}
p,li					{line-height:140%;}


/**************** header *****************************/

.headerMenuContainer {background-color:#033666;}
.headerMenu {width:63.750em;margin:auto;text-align:right;}
.banner			{width:63.750em;margin:auto;padding-top:11px;padding-bottom:20px;}
.logo				{width:60%;float:left;}
.logo img		{display:block;}
.topRight		{width:40%;float:right;text-align:right;}

.phone			{font-size:1.250em;margin-top:14px;font-family: 'Fjalla One', sans-serif;letter-spacing:2px;}
.phone a			{font-size:1em;text-decoration:none;cursor:default;color:#3f3f3f;}	
.phone a:hover	{color:#3f3f3f;}	

	
/**************** nav - topnav *************************/
.topnav {
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#23579A, #013567); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#23579A, #013567); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#23579A, #013567); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#23579A, #013567); /* Standard syntax */
}
.topmenu{
	width:63.750em;
	margin:auto;
	background-color: transparent;
	height:45px;
}
.mlddm {display:flex !important;justify-content:space-between;}

/* top level */

.mlddm li a, .mlddm li a#buttonnohover {	
		padding-left:16px;
		line-height: 45px;
		color: #ffffff;
		font-size: 0.875rem;
		text-transform:uppercase;
}
.mlddm li a:hover, .mlddm li a#buttonhover,
.mlddm li a.selected, .mlddm li a.selected#buttonnohover,
.mlddm li a.selected:hover, .mlddm li a.selected#buttonhover	{}

.mlddm>li:first-child>a {padding-left:0;}
.mlddm>li:last-child>a {padding-right:0;}

/* drop down list */
	.mlddm ul {border:1px solid #013567;border-bottom:0;}
	.mlddm ul li a {	
		line-height: 40px;
		padding: 0 16px 0 6px;
		border-bottom:1px solid #013567;
		text-align:left;
		height:auto;
		background-color: #ffffff;	
		color:#013567; 

	}
	.mlddm ul li a:hover,
	.mlddm ul li a.selected,
	.mlddm ul li a:hover.selected,
	.mlddm .hsub:hover, .mlddm .selectedhsub:hover	{color: #ffffff;background-color:#013567;}

/**************** nav - mobile header *************************/

.slicknav_menu {background-color:transparent;padding:0;}
.slicknav_nav {z-index:10000000;}
.slicknav_nav {font-size:1.750em;}
.slicknav_nav .slicknav_arrow	{background-color:transparent;font-size:1.500em;}
.slicknav_nav .slicknav_row	{padding: 12px 20px;} /* row is for subs that are parents */
.slicknav_nav a					{padding: 12px 20px;font-size:1.125rem;}

/* first level */
li.slicknav_collapsed.slicknav_parent > a .slicknav_arrow	{color:#000000;}
li.slicknav_parent.slicknav_open > a .slicknav_arrow			{color:#ffffff;}

.slicknav_nav > li:nth-of-type(1)	{border-top:1px solid #000000;}
.slicknav_nav > li 						{background-color:#ffffff;color:#000000;border-bottom:1px solid #000000;}
.slicknav_nav a 							{color:#000000;}
.slicknav_nav a:hover					{background-color:#dedede;color:#222222;}
.slicknav_row:hover, 
li.slicknav_collapsed .slicknav_row:hover a	{background-color:#dedede;color:#222222;}
.slicknav_nav li.slicknav_open,
.slicknav_nav li.slicknav_open > a,
.slicknav_nav li.slicknav_open > a a,
.slicknav_nav li.slicknav_open > a:hover 		{background-color:#6599ff;color:#ffffff;border:none;}

/* second level */
ul li ul li.slicknav_collapsed.slicknav_parent > a .slicknav_arrow	{color:#333333;}

.slicknav_nav ul li 						{background-color:#dedede;border-bottom:1px solid #333333;}
.slicknav_nav ul li a 					{color:#333333;}	
.slicknav_nav ul li a 					{padding: 12px 20px 12px 30px;}
.slicknav_nav ul li .slicknav_row	{padding: 12px 20px 12px 30px;}

.slicknav_nav ul li.slicknav_parent.slicknav_open,
.slicknav_nav ul li.slicknav_parent.slicknav_open > a,
.slicknav_nav ul li.slicknav_parent.slicknav_open > a a,
.slicknav_nav ul li.slicknav_parent.slicknav_open > a:hover 	{background-color:#626673;color:#ffffff;}

/* third levels */
.slicknav_nav ul li ul li 					{background-color:#f0f0f0;}
.slicknav_nav ul li ul li a 				{color:#333333;}
.slicknav_nav ul li ul li a 				{padding-left: 60px;}
	
.slicknav_nav ul li .slicknav_arrow	{}
.slicknav_nav ul li.slicknav_parent.slicknav_open  .slicknav_arrow:before {content:"-";}


/* overrides */

.slicknav_nav li:nth-child(even) 	{background-color:#ffffff;}
.slicknav_nav ul li:nth-child(even) {background-color:#dedede;}
.slicknav_nav ul li ul li:nth-child(even) {background-color:#f0f0f0;}
.slicknav_nav .slicknav_item a, .slicknav_nav .slicknav_parent-link a {font-size: 1.125rem;}
.slicknav_nav .slicknav_row {padding: 12px 20px;}
.slicknav_nav .slicknav_arrow {background-color: transparent;width: 44px;}
.slicknav_row:hover, li.slicknav_collapsed .slicknav_row:hover a {background-color: transparent;color: #000000;}	
	
	
	
/**************** footer *****************************/

.footer			{background-color:#000000;color:#ffffff;background: linear-gradient(#333333, #000000);margin-top:12px;}
.footerInfoContainer {border-bottom:1px solid #303030;}
.footerInfo		{width:63.750em;margin:auto;padding:0 0 22px 0;}
.footerInfo .sideBySide-Col2 {text-align:right;padding-top:20px;}
.footerInfo p 	{margin-top:20px;margin-bottom:18px;line-height:160%;}

.footerPhone {font-family: 'Fjalla One', sans-serif;font-size:1.375em;}
.footerPhone a 	{font-size:1em;color:#ffffff;text-decoration:none;cursor:default;letter-spacing:2px;}
.footerPhone a:hover 	{color:#ffffff;text-decoration:none;}

.socialMedia {padding-top:30px;letter-spacing:1px;}
.socialMedia img {vertical-align:middle;padding-left:10px;}


.footerBase				{width:63.750em;margin:auto;padding: 10px 0;color: #ffffff;line-height:140%;}
.footerLeft				{width:66%;float: left;font-size:0.563em;}
.footerRight			{width:33%;float: right;text-align:right;font-size:0.563em;}
.footerBase a 			{font-size: 0.563rem;color:#ffffff;}
.footerBase a:hover	{color:#dedede;}

/**************** slideshow *****************************/

@media (min-width:64.063em){

	.slideshowContainer {
		background-image: url('/extras/styles/webideas/slide-bg.jpg');
		background-position: center;
		padding:14px 0 20px 0;
	}
	.slideshow {width:63.750em;margin:auto;box-shadow: 6px 6px 5px gray;}
}


    

/**************** content *****************************/

/* layout */

.middleHome	{padding:20px 0;width:63.750em;margin:auto;}
.middle		{padding: 0 0 32px 0; width:63.750em;margin:auto;min-height:400px;}
.crumb		{padding: 16px 0 16px 3px;font-size:0.813em;color:#999999;}
.crumb a    {color:#999999;font-size:1em;}
.crumb a:hover {color:#325678;}
.colourRow	{background: #f0f0f0;padding-bottom:12px;margin-bottom:20px;}
.crumb a:last-child {text-decoration:none;}


/* general */
a 			{color: #063A6F;text-decoration: underline;}
a:hover	{color: #000000;}
a img		{border:0;}

strong {font-weight:500;}

h1, h2, h3, h4, h5 {}
h1 		{font-size: 2.500em;color:#000000;font-weight:400;margin-top:0;margin-bottom:20px;font-family: 'Fjalla One', sans-serif;}
h2 		{font-size: 2.125em;color:#003763;font-weight:400;font-family: 'Fjalla One', sans-serif;}
h3 		{font-size: 1.750em;color:#000000;font-weight:normal;font-family: 'Fjalla One', sans-serif;}
h4 		{font-size: 1.250em;color:#063A6F;font-weight:500;margin-top:0;}
h5 		{font-size: 1.000em;color:#ffffff;font-weight:normal;margin-top:0;}

.introText {color:#063A6F;font-size:1.375em;}

.middleHome h1 {font-size: 2.875em;}
.middleHome h2 {font-size: 2.500em;margin-top:0;margin-bottom:0;border-bottom:2px solid #6599FF;text-align:center;padding-bottom:8px;}
.middleHome h3 {font-size: 1.750em;margin-top:0;margin-bottom:0;}
.middleHome h4 a {font-size:1em;text-decoration:none;}
p, ul, li		{margin-top:0;}
.formRequired	{color:#cc0000;font-size:0.625rem;}


/* buttons */

.highlightButton {text-align:center;}

.highlightButton a {
	display:inline-block;
	padding:10px 20px;
	line-height:30px;
	background-color: #323232;
	color:#ffffff;
	font-size:1.375rem;
	text-decoration: none;
	font-family: 'Fjalla One', sans-serif;
	background: linear-gradient(#323232, #111111);
	white-space:nowrap;
}
.highlightButton a:hover {background: linear-gradient(#6599ff, #6599ff);color:#ffffff;}

.linkButton,
.categoryButton,
.rootTitleLink,
.galleryLink .horizontalMenu a  {
	display:inline-block;
	padding:4px 20px;
	line-height:30px;
	background-color: #000000;
	color:#ffffff;
	font-size:0.875rem;
	font-weight:500;
	text-decoration: none;
	background: linear-gradient(#23579A, #013567);
	font-family: 'Roboto', sans-serif;
	margin-top:10px;
}
.linkButton:hover,
.categoryButton:hover,
.rootTitleLink:hover,
.galleryLink .horizontalMenu a:hover {
	background: linear-gradient(#6599ff, #6599ff);
	color:#ffffff;
}
.productButton,
.categories .horizontalMenu a {
	display:inline-block;
	padding:4px 20px;
	line-height:30px;
	background-color: #ffffff;
	border:1px solid #134781;
	color:#134781;
	font-size:0.875rem;
	font-weight:500;
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
	margin-top:10px;
}
.horizontalMenu a {text-transform:uppercase;}

.productButton:hover,
.categories .horizontalMenu a:hover {
	background: linear-gradient(#6599ff, #6599ff);
	color:#ffffff;
}

/* home */

.highlightBox {text-align:center;background-color:#ffffff;padding:20px 16px;border:1px solid #dadada;}
.highlightBox p {font-size:0.875rem;}
.highlightBox .mainImg	{padding-bottom:20px;}



/**************** category browse *****************************/

.categories {border:1px solid #dadada;padding:14px 12px;}
.categories h2 {font-family: 'Roboto', sans-serif;font-size:1.250em;font-size:500;margin-top:0;}
.categories h2 a {font-size:1em;text-decoration:none;}
.categories h2 a:hover {color:#063A6F;}

.productButton {margin-right:4px;}
.horizontalMenu {margin-left:4px;}


/********************** Galleries ********************************/	

div[class^="row gallery"] > div {float:left;text-align:center;margin-bottom:20px;}

.gallery2Cols > div {width:47.5%;margin-right:5%;}
.gallery2Cols div:nth-of-type(2n) {margin-right:0;}
.gallery2Cols div:nth-of-type(2n+1) {clear:both;}

@media (min-width:36.875em) { /* 590px */
   .gallery3Cols > div {width:30%;margin-right:5%;}
   .gallery3Cols > div:nth-of-type(3n) {margin-right:0;}
   .gallery3Cols > div:nth-of-type(3n+1) {clear:both;}
}
@media (min-width:48.063em) { /* 769px */
   .gallery4Cols > div {width:23.5%;margin-right:2%;}
   .gallery4Cols > div:nth-of-type(4n) {margin-right:0;}
   .gallery4Cols > div:nth-of-type(4n+1) {clear:both;}

   .gallery5Cols > div {width:18.4%;margin-right:2%;}
   .gallery5Cols > div:nth-of-type(5n) {margin-right:0;}
   .gallery5Cols div:nth-of-type(5n+1) {clear:both;}
}
@media (min-width:36.876em) and (max-width:48em) { /* 768px */
   .gallery4Cols > div {width:30%;margin-right:5%;}
   .gallery4Cols > div:nth-of-type(3n) {margin-right:0;}
   .gallery4Cols > div:nth-of-type(3n+1) {clear:both;}
   
   .gallery5Cols > div {width:30%;margin-right:5%;}
   .gallery5Cols > div:nth-of-type(3n) {margin-right:0;}
   .gallery5Cols > div:nth-of-type(3n+1) {clear:both;}
}
@media (min-width:0) and (max-width:36.875em) { /* 590px */
   .gallery3Cols > div {width:47.5%;margin-right:5%;}
   .gallery3Cols > div:nth-of-type(2n) {margin-right:0;}
   .gallery3Cols > div:nth-of-type(2n+1) {clear:both;}
   
   .gallery4Cols > div {width:47.5%;margin-right:5%;}
   .gallery4Cols > div:nth-of-type(2n) {margin-right:0;}
   .gallery4Cols > div:nth-of-type(2n+1) {clear:both;}
   
   .gallery5Cols > div {width:47.5%;margin-right:5%;}
   .gallery5Cols > div:nth-of-type(2n) {margin-right:0;}
   .gallery5Cols > div:nth-of-type(2n+1) {clear:both;}
}

/* galleries with descriptions */


@media (min-width:48em) { /* 768px */
   .gallery3ColsDesc > div {width:31%;margin-right:2%;}
   .gallery3ColsDesc > div:nth-of-type(3n) {margin-right:0;}
   .gallery3ColsDesc > div:nth-of-type(3n+1) {clear:both;}
}

@media (min-width:64.000em) { /* 1024px */
	.gallery4ColsDesc > div			{width:23.5%;margin-right:2%;}
	.gallery4ColsDesc > div:nth-of-type(4n) {margin-right:0;} 
	.gallery4ColsDesc > div:nth-of-type(4n+1) {clear:both;} 
}
@media (min-width:48.000em) and (max-width:63.938em) { /* 1023px */	
	.gallery4ColsDesc  > div {width:31%;margin-right:2%;}
	.gallery4ColsDesc > div:nth-of-type(3n) {margin-right:0;} 
	.gallery4ColsDesc > div:nth-of-type(3n+1) {clear:both;} 
}
@media (min-width:35.063em) and (max-width:47.938em) { /* 767px */

	.gallery3ColsDesc > div {width:48%;margin-right:4%;}
	.gallery3ColsDesc > div:nth-of-type(2n) {margin-right:0;} 
	.gallery3ColsDesc > div:nth-of-type(2n+1) {clear:both;}
	
	.gallery4ColsDesc > div {width:48%;margin-right:4%;}
	.gallery4ColsDesc > div:nth-of-type(2n) {margin-right:0;} 
	.gallery4ColsDesc > div:nth-of-type(2n+1) {clear:both;} 
}
@media (min-width:0) and (max-width:35.000em) { /* 560px */	
	.gallery3ColsDesc > div {width:100%;}
	.gallery4ColsDesc > div {width:100%;}
}



/**************** product pages *****************************/

.viewSpecs,.specsIntro p {text-align:right;}
.wobjectPhotoGallery h1, .specsIntro h1 {margin-bottom:10px;}
.productPage h3 {margin-bottom:14px;}
.CTA {padding-top:30px;font-size:1.125em;text-align:center;font-weight:500;}
.CTA a {font-size:1em;}
.galleryLink .horizontalMenu {display:block;text-align:right;padding-bottom:15px;}
.galleryLink .horizontalMenu a {margin-top:0;color:#ffffff;}

.galleryLink .horizontalMenu a:before {content:"view "}


/* ListColumn Styles */
.ListColumnTable		{width:100%;border-collapse:collapse;border:1px solid #000000;}
.ListColumnTable tr:nth-child(odd) {background-color:#efefef;}
.ListColumnTable th, .ListColumnTable td	{padding:3px 3px 3px 5px;vertical-align:top;}
.ListColumnTable th {background-color:#cccccc;font-weight:500;text-align:left;}
.ListColumnTableLeft th {background-color:#cccccc;font-weight:500;text-align:left;border-right:1px solid #000000;width:150px;}



