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

@import 'content.css';
@import 'menus.css';

/* General Page Styles */
body#design-body { margin: 0; padding: 0; background: #091555 url('../images/bg.jpg') center top no-repeat; border-top: 8px solid #ff5110; font: 16px Verdana, Arial, sans-serif; font-weight: normal; color: #000; }

#design-wrapper { margin: 0; width: 100%; border-top: 1px solid #fff; }

/* Header */
header { position: relative; margin: 0 auto; width: 100%; max-width: 1170px; height: 174px; background: url('../images/headerBg.png') center top no-repeat; box-sizing: border-box; }
header #design-logo { position: absolute; top: 50px; left: -9px; z-index: 1; }
header #design-title { position: absolute; top: 88px; left: 198px; }
header #design-social { position: absolute; top: 10px; right: 5px; }
header #design-social .design-social { float: left; margin-left: 6px; width: 24px; height: 24px; box-sizing: border-box; }
header #design-affiliates { position: absolute; top: 75px; right: 0; text-align: right; }
header #design-affiliates img { height: 90px; }

@media screen and (max-width: 1024px) {
  
  header #design-affiliates img { height: 75px; }
  
}

@media screen and (max-width: 768px) {
  
  header { height: 143px; }
  header #design-logo { top: 40px; }
  header #design-logo img { width: 75%; }
  header #design-title { top: 75px; left: 150px; }
  header #design-title img { width: 75%; }
  header #design-affiliates { top: 67px; }
  header #design-affiliates img { height: 55px; }
  
}

@media screen and (max-width: 667px) {
  
  header { height: 140px; }
  header #design-logo img { width: 70%; }
  header #design-title { top: 70px; left: 140px; }
  header #design-title img { width: 70%; }
  
}

@media screen and (max-width: 480px) {
  
  header { height: 109px; background-image: none; }
  header #design-logo { top: 34px; }
  header #design-logo img { width: 60%; }
  header #design-title { top: 60px; left: 115px; }
  header #design-title img { width: 95%; }
  header #design-affiliates { display: none; }
  
}

/* Nav */
nav {
	margin: 0 auto;
  padding-left: 180px;
  width: 100%;
  max-width: 1170px; 
	height: 44px;
  background: #ff5212; /* Old browsers */
  background: -moz-linear-gradient(top,  #ff865a 0%, #ff6931 50%, #ef4d10 51%, #ff5212 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff865a), color-stop(50%,#ff6931), color-stop(51%,#ef4d10), color-stop(100%,#ff5212)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ff865a 0%,#ff6931 50%,#ef4d10 51%,#ff5212 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ff865a 0%,#ff6931 50%,#ef4d10 51%,#ff5212 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ff865a 0%,#ff6931 50%,#ef4d10 51%,#ff5212 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #ff865a 0%,#ff6931 50%,#ef4d10 51%,#ff5212 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff865a', endColorstr='#ff5212',GradientType=0 ); /* IE6-9 */
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
	border: 1px solid #ffad8f;
	box-sizing: border-box;
}
nav #design-container-main-nav { margin: 0; width: 100%; height: 44px; box-sizing: border-box; }
nav #design-container-main-nav #ww-btn-main-nav { padding: 10px; width: 100%; height: 44px; background: none; border: 0 none; font-weight: bold; color: #fff; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7); box-sizing: border-box; }
nav #design-container-main-nav #ww-btn-main-nav i { margin-right: 4px; }

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

  nav { padding-left: 105px; border-radius: 0; border: 0 none; }
  
}

/* Main */
main { display: table; margin: 0 auto; padding: 15px 0 10px 0; width: 100%; max-width: 1170px; box-sizing: border-box; }
main #design-main-content { padding: 10px; width: 100%; background: #a6a6a6; box-sizing: border-box; }

main #design-bottom-logos { margin: 10px 0 0 0; padding: 10px; width: 100%; background: rgba(3, 10, 48, 0.7); text-align: center; box-sizing: border-box; }

main #design-container-5 .dii-content.dii-content-image .dii-content-title-photo,
main #design-container-6 .dii-content.dii-content-image .dii-content-title-photo,
main #design-container-7 .dii-content.dii-content-image .dii-content-title-photo,
main #design-container-8 .dii-content.dii-content-image .dii-content-title-photo,
main #design-container-9 .dii-content.dii-content-image .dii-content-title-photo { margin: 0; padding: 0; border: none; }

@media screen and (max-width: 480px) {
	
	main { margin: 0; padding: 5px; width: 100%; box-sizing: border-box; }
	
}

/* Footer */
footer {
	margin: 0 auto;
  width: 100%;
  max-width: 1170px; 
	height: 70px;
  background: url('../images/footerBg.png') right 1px no-repeat;
  border-top: 4px solid #fff;
	box-sizing: border-box;
}
footer #design-footer-left { float: left; width: 100%; max-width: 649px; }
footer #design-footer-middle { float: left; width: 66px; }
footer #design-footer-right { float: right; width: 275px; text-align: right; }
footer #design-footer-left #design-copyright { margin: 10px 0 0 10px; font-size: 10px; line-height: 14px; font-weight: bold; color: #fff; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); }
footer #design-footer-left #design-copyrightDII { margin: 2px 0 0 10px; font-size: 10px; line-height: 14px; font-weight: normal; color: #fff; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); }
footer #design-footer-left #design-copyrightDII a { font-size: 10px; color: #fff; text-decoration: none; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); }

@media screen and (max-width: 480px) {
	
	footer { margin: 0; padding: 0; width: 100%; height: 140px; background: none; }
	footer div#design-footer-left { display: block; width: 100%; text-align: center; }
  footer div#design-footer-middle { display: block; margin-top: 15px; width: 100%; text-align: center; }
	footer div#design-footer-right { display: block; width: 100%; text-align: center; }

}

/* Content Boxes */
.design-sectionHeader {
  position: relative;
	margin: 10px 0 0 0;
	padding: 12px 10px;
	height: 45px;
  background: #ff5212; /* Old browsers */
  background: -moz-linear-gradient(top,  #ff865a 0%, #ff6931 50%, #ef4d10 51%, #ff5212 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff865a), color-stop(50%,#ff6931), color-stop(51%,#ef4d10), color-stop(100%,#ff5212)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ff865a 0%,#ff6931 50%,#ef4d10 51%,#ff5212 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ff865a 0%,#ff6931 50%,#ef4d10 51%,#ff5212 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ff865a 0%,#ff6931 50%,#ef4d10 51%,#ff5212 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #ff865a 0%,#ff6931 50%,#ef4d10 51%,#ff5212 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff865a', endColorstr='#ff5212',GradientType=0 ); /* IE6-9 */
  border-bottom: 3px solid #dfdfdf;
	font-family: Verdana, Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
  line-height: 15px;
	box-sizing: border-box;
}
.design-sectionHeader:first-of-type { margin-top: 0; }
.design-sectionContent {
	margin: 0; 
	padding: 0;
	width: 100%;
  min-height: 200px;
	overflow-y: auto;
	background: #a6a6a6;
	box-sizing: border-box;
}

@media screen and (max-width: 800px) {
  
  .design-sectionHeader { font-size: 14px; }
  
}

.design-clear { clear: both; }