/* ----------------------------------------------------------------
Copyright (c) Demosphere International Inc.
No permission is granted for any purpose without prior
written consent from Demosphere International Inc.
-------------------------------------------------------------------*/

/* General Page Styles */
body#design-body { margin: 0; padding: 0; background: #0b1c38 url('../images/bg.jpg') top center no-repeat; border-top: 5px solid #4bac24; font: 14px/16px 'Open Sans', sans-serif; font-weight: 400; color: #0c1a36; }

#design-wrapper { margin: 0 auto; width: 100%; max-width: 1040px; }

/* Header */
header { margin: 0; width: 100%; height: 195px; max-height: 195px; }
header > div#design-header-inner { position: relative; margin: 0; width: 100%; box-sizing: border-box; z-index: 1; }
header > div#design-header-inner > div#design-logo { position: absolute; top: 64px; left: -2px; }
header > div#design-header-inner > div#design-title { position: absolute; top: 112px; left: 188px; }

nav {
	width: 100%;
	height: 42px;
  background: #2f7e0f; /* Old browsers */
  background: -moz-linear-gradient(top,  #2f7e0f 0%, #4bac24 2%, #41951f 98%, #6ebf4e 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f7e0f), color-stop(2%,#4bac24), color-stop(98%,#41951f), color-stop(100%,#6ebf4e)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #2f7e0f 0%,#4bac24 2%,#41951f 98%,#6ebf4e 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #2f7e0f 0%,#4bac24 2%,#41951f 98%,#6ebf4e 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #2f7e0f 0%,#4bac24 2%,#41951f 98%,#6ebf4e 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #2f7e0f 0%,#4bac24 2%,#41951f 98%,#6ebf4e 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f7e0f', endColorstr='#6ebf4e',GradientType=0 ); /* IE6-9 */
	border-top: 2px solid #fcfcfc;
	border-bottom: 2px solid #0f1a0a;
	box-sizing: border-box;
}

nav > div#design-nav-menu { margin: 0; padding-left: 185px; width: 100%; height: 42px; box-sizing: border-box; }

/* Main */
main { margin: 0; width: 100%; background: #fff; box-sizing: border-box; }
main > #design-main { margin: 0; padding: 15px; width: 100%; background: #fff; box-sizing: border-box; }
main > #design-main > div { padding: 0; box-sizing: border-box; }
main div#design-main-content { padding-top: 30px; width: 100%; box-sizing: border-box; }

main > #design-main .design-span_4_of_12 { position: relative; padding-left: 10px; background: url('../images/rightBg.gif') repeat-y; box-sizing: border-box; }

/* Footer */
footer {
	margin: 0;
	padding-top: 30px;
	width: 100%;
	height: 150px; 
  background: #07152e; /* Old browsers */
  background: -moz-linear-gradient(top,  #07152e 0%, #0c234c 50%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#07152e), color-stop(50%,#0c234c)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #07152e 0%,#0c234c 50%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #07152e 0%,#0c234c 50%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #07152e 0%,#0c234c 50%); /* IE10+ */
  background: linear-gradient(to bottom,  #07152e 0%,#0c234c 50%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#07152e', endColorstr='#0c234c',GradientType=0 ); /* IE6-9 */
	border-top: 4px solid #48a525;
	box-sizing: border-box;
}
footer div#design-footer { margin: 0 10px; width: 100%; max-width: 1020px; height: 120px; background: url('../images/line.gif') repeat-x; }
footer div#design-footer-left { float: left; }
footer div#design-footer-right { float: right; width: 230px; }
footer div#design-footer-left #design-copyright { margin: 15px 0 0 10px; font-size: 11px; line-height: 14px; font-weight: bold; color: #fff; }
footer div#design-footer-left #design-copyrightDII { margin: 2px 0 0 10px; font-size: 11px; line-height: 14px; font-weight: normal; color: #fff; }
footer div#design-footer-left #design-copyrightDII a { font-size: 11px; color: #fff; text-decoration: none; }

/* Content Boxes */
.design-sectionHeader {
	margin: 15px 0 0 0;
	padding: 14px 10px;
	height: 52px;
  background: #1e3152; /* Old browsers */
  background: -moz-linear-gradient(top,  #1e3152 0%, #283e63 98%, #0c1a36 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e3152), color-stop(98%,#283e63), color-stop(100%,#0c1a36)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #1e3152 0%,#283e63 98%,#0c1a36 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #1e3152 0%,#283e63 98%,#0c1a36 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #1e3152 0%,#283e63 98%,#0c1a36 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #1e3152 0%,#283e63 98%,#0c1a36 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e3152', endColorstr='#0c1a36',GradientType=0 ); /* IE6-9 */
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0em;
	text-transform: uppercase;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
	line-height: 16px;
  border-bottom: 2px solid #959595;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
}
.design-sectionHeader:first-child { margin-top: 0; }

.design-sectionContent {
	padding: 0;
	width: 100%;
  max-height: 300px;
	overflow-y: auto;
	background: #fff;
	border-bottom: 3px solid #283e63;
	box-sizing: border-box;
}
.design-clear { clear: both; }

/* Tabs */
.design-tabs { width: 100%; height: 350px; border-bottom: 3px solid #283e63; box-sizing: border-box; }
.design-tabs div.tabs { height: 52px; border-bottom: 2px solid #959595; box-sizing: border-box; }
.design-tabs div.tabs > div { display: inline; }
.design-tabs div.tabs > div > a {
  left: 0;
  display: block;
  float: left; 
	padding: 12px 10px;
	height: 50px;
  background: #1e3152; /* Old browsers */
  background: -moz-linear-gradient(top,  #172847 0%, #172847 98%, #0c1a36 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#172847), color-stop(98%,#172847), color-stop(100%,#0c1a36)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #172847 0%,#172847 98%,#0c1a36 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #172847 0%,#172847 98%,#0c1a36 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #172847 0%,#172847 98%,#0c1a36 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #172847 0%,#172847 98%,#0c1a36 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#172847', endColorstr='#0c1a36',GradientType=0 ); /* IE6-9 */
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0em;
	text-transform: uppercase;
  text-decoration: none;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
	line-height: 13px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
}
.design-tabs div.tabs > div > a { background: #1e3152; }
/*.design-tabs div.tabs > div:not(:target) > a { background: #072e56; }*/

.design-tabs div.tabs > div.active > a {
	padding: 12px 10px;
	height: 50px;
  background: #1e3152; /* Old browsers */
  background: -moz-linear-gradient(top,  #1e3152 0%, #283e63 98%, #0c1a36 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e3152), color-stop(98%,#283e63), color-stop(100%,#0c1a36)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #1e3152 0%,#283e63 98%,#0c1a36 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #1e3152 0%,#283e63 98%,#0c1a36 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #1e3152 0%,#283e63 98%,#0c1a36 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #1e3152 0%,#283e63 98%,#0c1a36 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e3152', endColorstr='#0c1a36',GradientType=0 ); /* IE6-9 */
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0em;
	text-transform: uppercase;
  text-decoration: none;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
	line-height: 13px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
}
/*.design-tabs > div > div { z-index: -1; left: 0; top: 41px; bottom: 0; right: 0; padding: 5px; }*/
/*.design-tabs > div:not(:target) > div { position: absolute; }*/
/*.design-tabs > div:target > div { position: absolute; z-index: 1; }*/
.design-tabs div.tabs > div.design-tab-first > a { border-left: 0; }
.design-tabs div.tabs > div.design-tab-last > a { border-right: 0; }
.design-tabs div.tabs > #design-tab-1 a { width: 30%; border-right: 1px solid #0e2249; box-sizing: border-box; }
.design-tabs div.tabs > #design-tab-2 a { width: 35%; border-left: 1px solid #2a487f; border-right: 1px solid #0e2249; box-sizing: border-box; }
.design-tabs div.tabs > #design-tab-3 a { width: 35%; border-left: 1px solid #2a487f; box-sizing: border-box; }
.design-tabs div.dii-container { margin-top: -16px; padding: 8px; width: 100%; height: 300px; overflow-y: auto; box-sizing: border-box; }

#design-bottomLogos { margin: 15px 0; padding: 25px 10px 10px 10px; width: 100%; background: url('../images/shadow.png') top center no-repeat; box-sizing: border-box; }

/* Responsive */

@media screen and (max-width: 800px) {

	nav div#design-nav-menu { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
  
  main > #design-main .design-span_8_of_12 { width: 57.66%; }
  main > #design-main .design-span_4_of_12 { width: 40.73%; }

}

@media screen and (max-width: 480px) {
	
	body#design-body { background-image: none; }

	/* Header */
	header { margin: 0; width: 100%; height: 120px; max-height: 120px; }
	header > div#design-header-inner { position: relative; margin: 0; width: 100%; box-sizing: border-box; z-index: 1; }
	header > div#design-header-inner > div#design-logo { position: absolute; top: 0; left: -2px; width: 110px; }
	header > div#design-header-inner > div#design-logo img { max-width: 100%; }
	header > div#design-header-inner > div#design-title { position: absolute; top: 45px; left: 110px; width: 240px; }
	header > div#design-header-inner > div#design-title img { max-width: 100%; }
	
	nav { width: 100%; background: #4bac24; box-sizing: border-box; }
	nav > div#design-nav-menu { margin: 0; padding: 0; width: 100%; height: 40px; }
	
	main { margin: 0; width: 100%; background: #0b183e; box-sizing: border-box; }
	main > #design-main { 
		margin: 0 auto;
		padding: 5px; 
		width: 100%; 
		background: #fff;
		box-sizing: border-box;
	}
  main > #design-main .design-span_4_of_12 { position: relative; padding-left: 0; background-image: none; box-sizing: border-box; }
  
	main > #design-main .design-span_4_of_12, 
	main > #design-main .design-span_8_of_12 { width: 100%; }

	.design-sectionHeader {	margin: 10px 0 0 0; box-sizing: border-box; }
	.design-sectionContent { margin: 0 0 5px 0; }

	/* Footer */
	footer { margin: 0; padding: 0; width: 100%; height: 150px; }
  footer div#design-footer { margin: 0; width: 100%; background-image: none; }
	footer div#design-footer-left { display: block; width: 100%; text-align: center; }
	footer div#design-footer-right { display: block; margin-top: 10px; width: 100%; text-align: center; }
}