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

/* General Page Styles */
body { margin: 0; padding: 40px 0; background: #000 url('../images/bg.jpg') top center no-repeat; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

#design-wrapper { margin: 0 auto; width: 100%; max-width: 1000px; text-align: left; }

/* Header */
header { position: relative; width: 100%; max-width: 1000px; height: 220px; }
header > #design-logo { position: absolute; top: 22px; left: 10px; z-index: 1; }
header > #design-logo img { width: 100%; }
header > #design-title { position: absolute; top: 55px; left: 185px; }
header > #design-title img { width: 100%; }
header > #design-nav { position: absolute; top: 180px; left: 0; width: 100%; max-width: 1000px; height: 40px; background: url('../images/navBg.gif') repeat-x; }
header > #design-nav > #design-nav-left { float: left; width: 89.2%; padding-left: 170px; box-sizing: border-box; }
header > #design-nav > #design-nav-right { float: right; }

#design-topLinks { width: 108px; height: 40px; }
.design-topLinks { float: left; padding: 9px 6px 7px 6px; width: 36px; height: 40px; background: url('../images/linksBg.gif') top right no-repeat; text-align: center; box-sizing: border-box;}

/* Main */
main { padding: 1%; width: 100%; max-width: 1000px; background: #000; box-sizing: border-box; }
main > div { float: left; }
main > div:last-child { clear: both; float: none; margin-bottom: 10px; }
main div#design-block1 { width: 100%; }
main div#design-block1 > div {  }
main div#design-block1 > div#design-main-content { padding: 10px; background: #fff; box-sizing: border-box; }
main div#design-block2 { width: 25%; margin-bottom: 10px; }
main div#design-block2 > div {  }
main div#design-block3 { width: 25%; margin-bottom: 10px; }
main div#design-block3 > div {  }
main div#design-block4 { width: 25%; margin-bottom: 10px; }
main div#design-block4 > div {  }

/* Footer */
footer { position: relative; clear: both; width: 100%; max-width: 1000px; height: 60px; background: url('../images/footerBg.png') repeat-x; }
footer > #design-footer-left { float: left; width: 77%; }
footer > #design-footer-right { float: right; width: 23%; }

#design-copyright { margin: 10px 0 0 10px; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; color: #fff; }
#design-copyrightDII { margin: 2px 0 0 10px; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: normal; color: #fff; }
#design-copyrightDII a { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #fff; text-decoration: none; }

/* Content Boxes */
.design-content { min-height: 150px; background: #002056; border: 1px solid #0e3f91; border-top: 0; box-sizing: border-box; }
.design-content-divider { margin: 0 8px; border-top: 1px solid #001539; border-bottom: 1px solid #133878;}
.design-titleBg { 
	width: 100%; 
	height: 40px; 
	background: #0e3e8f; /* Old browsers */
	background: -moz-linear-gradient(top,  #0e3e8f 0%, #002056 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0e3e8f), color-stop(100%,#002056)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #0e3e8f 0%,#002056 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #0e3e8f 0%,#002056 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #0e3e8f 0%,#002056 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #0e3e8f 0%,#002056 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e3e8f', endColorstr='#002056',GradientType=0 ); /* IE6-9 */
	border: 1px solid #0e3f91;
	border-bottom: 0;
	box-sizing: border-box;
}
.design-titleText { display: block; padding: 12px 11px; font-size: 12px; font-family: 'Alfa Slab One', cursive; font-weight: 400; color: #fff; letter-spacing: 1.0; text-shadow: 0px 0px 3px rgba(0, 0, 0, 1.0); text-transform: uppercase; }
.design-clear { clear: both; }

/* Responsive */
@media screen and (max-width: 800px) {
	
	body { margin: 0; padding: 20px 0; }
	#design-wrapper { margin: 0 auto; width: 98%; }
	
	header > div#design-header-block3 > ul > li { float: none; }
	header > div#design-header-block3 > ul > li > a { padding-bottom: 5px; font-size: 11px; }
	
	main div#design-block1 { width: 100%; }
	main div#design-block1 > div { margin: 0; }
	main div#design-block1 > div#design-main-content { margin-bottom: 10px; padding: 10px; width: 100%; height: auto; background: #fff; box-sizing: border-box; }
	main div#design-block2 { height: auto; }
	main div#design-block2,
	main div#design-block3 { width: 49%; margin: 0 0.5%; }
	
	footer > #design-footer-left { float: left; width: 70.5%; }
	footer > #design-footer-right { float: right; width: 29.5%; }
	
}

@media screen and (max-width: 480px) {
	
	header { position: relative; width: 100%; max-width: 1000px; height: 120px; }
	header > #design-logo { display: none; }
	header > #design-title { position: static; width: 100%; }
	header > #design-nav { position: absolute; top: 80px; left: 0; width: 100%; max-width: 1000px; height: 40px; background: url('../images/navBg.gif') repeat-x; }
	header > #design-nav > #design-nav-right { display: none; }
	
	main div#design-block1,
	main div#design-block2,
	main div#design-block3 { margin: 0; margin-bottom: 2%; width: 100%; }
	main div#design-block1 > div,
	main div#design-block2 > div,
	main div#design-block3 > div { margin: 0; }
	
	footer { position: relative; clear: both; width: 100%; max-width: 1000px; height: 60px; background: url('../images/footerBg.png') repeat-x; }
	footer > #design-footer-left { width: 100%; text-align: center; }
	footer > #design-footer-right { width: 100%; text-align: center; }
	
}