/** OVERALL **/
body {
	margin: 0;
	padding: 0;
	font-family: "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
	background: #ffffff;
}

a,
a:link {
	color: #ff0000;
	text-decoration: none;
	cursor: pointer;
}

a:hover,
a:visited {
	color: #000000;
}

#nav-section #wg-logo,
#nav-section #primary-nav-wrapper {
  float: left;
}

#nav-section {
  position: fixed;
  width: 100%;
  text-align: left;
  top: 51px;
  background: #ffffff;
  border-bottom: 1px solid #ECEEF0;
  transition: all 0.4s ease;
}

#nav-section.sticky {
  top: 0;
  background: #ffffff;
  opacity: 0.95;
}

#wrapper {
  width: 100%;
}

.info-block {
  background: #ffffff;
  padding: 0;
}

#wg-content {
	clear: both;
	padding-top: 70px;
	padding-bottom: 70px;
	text-align: left;
	background-color: #fff;
}

#main-page-container #wg-content {
  padding-top: 0;
  padding-bottom: 0;
}

.content-wrapper {
	padding: 0 30px;
	margin: 0 auto;
	max-width: 1200px;
}

#content-section {
	padding: 20px 30px 0;
}

/** Overriding old legacy content sections **/
.page-main p, .page-alt p {
  padding-bottom: 24px;
  position: inherit;
  line-height: 18px;
}

.page-main #rdconfigpanel p,
.page-main #rdconfigpass p,
.page-main .wp-registration-gate-inner p.wp-registration-header,
.page-main .wp-registration-gate-inner p.wp-registration-subhead {
    position: relative;
}

.contain-me {
  width: 1200px;
  position: relative;
  padding: 0;
}

#main-masthead-wrap {
  background: none;
  height: 107px;
  z-index: 400;
  position: relative;
}

#main-page-container {
  padding: 0;
  font-size: 12px;
  line-height: 18px;
}

#main-page-container #content-section {
  padding: 0;
}

#contact-sales {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#contact-tab {
  float: right;
  clear: left;
  margin-left: 798px;
  width: 107px;
  height: 30px;
  background: transparent url('/images/ripley/wgt_slide_bg_sp.png') no-repeat scroll 0px -155px;
  padding: 7px 15px 0 40px;
  color: #fff;
  cursor: pointer;
}

#contact-sales-content {
  padding: 0 15px;
  width: 930px;
  float: right;
  clear: both;
  background-color: #1d1d1d;
  height: 0;
  overflow: hidden;
  color: #fff;
}


/** Activation workflow pages UIContainer overrides of legacy styles **/
.activation-button-row {
  width: 530px;
}

.activation-inner-container {
  width: 525px;
}

.activation-content {
  position: inherit;
}


/** Product Details page overrides of legacy styles **/
#pdetails table {
  width: 100%;
  position: inherit;
  top: -10px;
}

#pdetails .helplink {
  position: inherit;
  top: 0;
  text-align: right;
  height: auto;
  padding-right: 23px;
  background: url("https://watchguard.com/images/remote-config-help-icon.png") 100% 50% no-repeat;
  padding: 2px 23px 0 0;
}

#pdetails.activation-inner-container .helplink {
	float: none;
  display: inline-block;
  padding-left: 200px;
}

#activation-container .activation-inner-container {
	margin: 0;
	padding-bottom: 0;
}

#activation-container.rnded-gray-mod .activation-inner-container {
  margin: 0 0 0 5px;
}

#pdetails > h5 {
  font-size: 150%;
  color: #575757 !important;
  font-family: geneva, arial, sans-serif;
  float: left;
}

#activation-container.rnded-gray-mod #pdetails.activation-inner-container {
	margin: 0;
}

#pdetails.activation-inner-container > h5 {
	float: none;
	display: inline-block;
}

#pdetails.activation-inner-container .desc {
	width: 400px;
}

#pdetails.activation-inner-container #divnone {
	padding-bottom: 20px;
}

#pdetails.activation-inner-container ul.RdGuide {
      width: 90%;
}

#activation-container .activation-inner-container .activation-content {
	padding: 0;
}

#activation-container .activation-inner-container .activation-content .activation-form-line {
  padding: 15px;
}

.pdc {
  width: 100%;
  border-top: 8px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-bottom: 3em;
  padding: 0em;
  clear: both;
}

.firebox-trial-migration-message {
    width: 100%;
    padding-top: 5px;
    padding-bottom: 15px;
    clear: both;
    font-size: 15px;
}

.firebox-trial-migration-message a {
        color: red;
}

.div-trial-migration-message {
    padding-bottom: 10px;
    font-size: 15px;
}

.div-trial-migration-message a {
    color: red;
}

#main-page-container .news-top {
    padding-top: 70px;
}

#divrightcol .helplink {
  position: inherit;
  top: 0;
  text-align: right;
  height: 30px;
  padding-right: 23px;
  background: url("https://watchguard.com/images/remote-config-help-icon.png") 100% 50% no-repeat;
  padding: 15px 23px 0px 0;
}

.helpLinkWrapper {
  text-align: right;
  width: auto;
  position: inherit;
}

.header-panel-content.rightpanel_sm > p > a {
  color: #ff0000;
}

.header-panel-content.rightpanel_sm > p > a:hover {
  text-decoration: underline;
}


/** PRIMARY LOGIN **/
#login-section {
  display: block;
	background-color: #ffffff;
	border-bottom: 1px solid #ECEEF0;
	margin-top:15px;
}

#login-section #primary-login-wrapper {
	height: 35px;
}

#login-section #primary-login-wrapper ul {
	list-style: none;
	position: relative;
	float: right;
	margin: 0;
	padding: 0;
	font-size: 12px;
}

#login-section #primary-login-wrapper ul a {
	display: block;
	color: #ff0000;
	text-decoration: none;
	font-weight: 700;
	font-size: 12px;
	line-height: 12px;
	padding: 0 15px;
}

#login-section #primary-login-wrapper ul li {
	position:relative;
	float: left;
	margin: 0;
	padding: 0;
	line-height: 15px;
}

#login-section #primary-login-wrapper ul li.first {
	height: 33px;
}


#login-section #primary-login-wrapper ul ul  {
	display: none;
	position: absolute;
	top: 80%;
	left: -5px;
	background: #000;
	padding: 0;
	z-index: 1;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	opacity: 0.9;
  filter: alpha(opacity=90);
  z-index: 5000;
}

#login-section #primary-login-wrapper ul ul:after { /*arrow added to uparrowdiv DIV*/
	content: '';
	display: block;
	position: absolute;
	top: -10px; /*should be set to -border-width x 2 */
	left: 20px;
	width: 0;
	height: 0;
	border-color: transparent transparent black transparent; /*border color should be same as div div background color*/
	border-style: solid;
	border-width: 5px;

}

#login-section #primary-login-wrapper ul ul li {
	float: none;
	width: 110px;
	text-align: left;
	border-left: none;
}

#login-section #primary-login-wrapper ul ul.tooltip li {
	float: none;
	width: 50px;
	text-align: center;
	border-left: none;
}

#login-section #primary-login-wrapper ul ul li:first-child {
	padding: 5px;
	border-bottom: 1px solid #fff;
	color: #fff;
}

#login-section #primary-login-wrapper ul ul a {
	line-height: 120%;
	padding: 5px;
	color: #fff;
}

#login-section #primary-login-wrapper ul ul a:hover {
	color: #999;
}

#login-section #primary-login-wrapper ul ul ul {
	top: 0;
	left: 100%;
}

#login-section #primary-login-wrapper ul li:hover > ul {
	display: block;
}


/** NAVIGATION **/
#primary-nav-wrapper ul {
  width: 100%;
  list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary-nav-wrapper ul li {
    display: inline;
    float: left;
}

#primary-nav-wrapper ul li a {
  display:block;
  padding: 0 20px 0 0;
  height: 70px;
  line-height: 70px;
  color: #000000;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
}

#primary-nav-wrapper ul li a:hover {
  color: #ff0000;
}

#primary-nav-wrapper ul li {
	float: left;
	margin: 0;
	padding: 0;
}

#primary-nav-wrapper ul li.current-menu-item {
	background: #ddd;
}

#primary-nav-wrapper ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #ffffff;
	padding: 0;
	min-width: 770px;
	box-shadow: 0px 2px 2px #eee;
	z-index: 1;
}

#primary-nav-wrapper ul #products-nav ul {
	min-width: 800px;
}

#primary-nav-wrapper ul ul ul {
	top: 0;
	left: 100%;
}

#primary-nav-wrapper ul li ul li {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  -moz-transition: ;
  -o-transition: opacity 0.4s ease-in-out;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}

#primary-nav-wrapper ul li:hover > ul li {
	max-height: 400px;
	opacity: 1
}

#primary-nav-wrapper ul li ul div {
	width: 210px;
}

#primary-nav-wrapper ul li#products-nav ul div {
	width: 265px;
}

#primary-nav-wrapper ul li ul a {
  height: auto;
  line-height: 8px;
  color: #000000;
  font-weight: normal;
  font-size: 12px;
  text-transform: none;
  text-decoration: none;

  padding: 0 20px 10px;
}

#primary-nav-wrapper ul li ul a:hover {
  color: #ff0000;
}

#primary-nav-wrapper ul li ul p {
	padding: 0;
	margin: 5px 0;
}

#primary-nav-wrapper ul li ul a img {
	vertical-align: middle;
}

.sub-nav-banner {
	float: none;
	padding: 0 10px;
	margin-top: 10px;
}

.md-separator, .md-separator-text {
  border-bottom: 1px solid #eee;
  margin: 10px 0 20px;
}


/** MOBILE NAVIGATION **/
#primary-nav-mobile {
  display: none;
}

#primary-nav-mobile {
  background-color: #fff;
  box-shadow: 3px 0 10px 0 rgba(0,0,0,0.28);
  list-style: none;
  position: fixed;
  top: 70px;
  left: 0;
  width: 250px;
}

#primary-nav-mobile li {
  padding: 10px 20px;
}

#primary-nav-mobile li,
#primary-nav-mobile li a {
  color: #848688;
  font-size: 14px;
}

#primary-nav-mobile li a {
  display: block;
}

#primary-nav-mobile li:not(.last){
  border-bottom: 1px solid #ECEEF0;
}

.nav-switch {
  cursor: pointer;
}

.nav-switch .bars {
  position: absolute;
  top: 20px;
  left: 10px;
  margin: 0 12px;
}

.nav-switch .bar-1, 
.nav-switch .bar-2, 
.nav-switch .bar-3 {
  width: 32px;
  height: 3px;
  background-color: #666666;
  margin: 5px 0;
  -moz-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  -webkit-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
  top: 0;
}

.nav-switch.closable .bar-1 {
  position: absolute;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 8px;
}

.nav-switch.closable .bar-2 {
  position: absolute;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}

.nav-switch.closable .bar-3 {
  position: absolute;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 8px;
}

.mobile-display {
  display: none;
}



/** Logo **/
#nav-section #wg-logo {
	height: 70px;
  width: 20%;
  position: relative;
}

#nav-section #wg-logo img {
	max-height: 100%;  
  max-width: 100%; 
  width: auto;
  height: auto;
  position: absolute;  
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  margin: auto;
  margin-left: 0;
}

#wg-logo-mobile {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}


/** CONTENT **/
/** heading banner **/
#page-title-section,
#main-page-title-wrap {
  background-image: url(/images/wg-header/parallex-inner.jpg);
  background-attachment: fixed;
  background-position: 50% 0;
  padding: 40px 0;
}

#main-page-title-wrap {
	padding: 0;
}

#main-page-title-wrap #breadcrumb,
#main-page-title-wrap #breadcrumb a {
	color: #eeeeee;
	min-height: auto;
}

.page-title,
#main-page-title-wrap h1,
#main-page-title-wrap h2 {
	font-family: 'raleway';
  font-size: 36px;
  font-weight: 100;
  letter-spacing: -1px;
  line-height: 36px;
  color: #FFF;
}


/** ERROR PAGE **/
#error-page #main {
    position: inherit;
    z-index: 0;
    background-color: #ffffff;
	padding: 0;
}

#error-page table {
    margin: 0;
}


/** FOOTER **/
/** footer nav **/
#footer-nav-section {
	background-color: #232D37;
	padding: 20px 5px;
}

/** footer info **/
#wg-info,
#footer-nav {
	overflow: hidden;
}

.footer-info-block,
.footer-info-block div,
.footer-info-block p {
	color: #BCC1C5;
  font-size: 13px;
	font: normal 13px/1.5 "Open Sans","HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
  padding: 0 20px 0 0;
  width: 280px;
  text-align: left;
  float: left;
}

#footer-nav .footer-info-block {
  line-height: 15px;
  padding-bottom: 30px;
}

#footer-nav .footer-info-block a {
  color: #BCC1C5;
}

#footer-nav .footer-info-block a:hover {
  color: #ff0000;
}

.footer-info-block h3 {
	color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.footer-info-block ul {
	list-style: none outside none;
	padding: 0;
}

.footer-info-block ul i {
	margin-right: 10px;
}

.wg-social-media a {
	color: #BCC1C5;
}


/** copyright **/
div#copyright-section,
#copyright-section {	
	font-family: "Open Sans","HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
	font: normal 14px/1.3 "Open Sans","HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
	padding: 20px 0;
}

div#copyright,
#copyright,
#copyright p {
	float: left;
	font-size: 14px;
}

#legal-info-nav {
	float: right;
	text-align: right;
	font-family: "Raleway";
	font-size: 12px;
}

#legal-info-nav a {
	color: #ff0000;
	text-decoration: none;
}

#legal-info-nav a:hover {
	color: #000000;
}


/** TOOLTIP **/
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 100%;
  left: 100%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 60px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 0%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -20px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 0%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}



/** MEDIA QUERIES **/

@media screen and (min-width: 1px) and (max-width: 1150px) {
  div#copyright, 
  #copyright, 
  #copyright p {
      float: none;
      text-align: left;
  }

  #legal-info-nav {
      float: none;
      text-align: left;
      padding: 20px 0;
  }
}

@media screen and (min-width: 1px) and (max-width: 1008px) {
  #nav-header,
  #login-section {
    display: none;
  }

  #nav-section {
    top: 0;
    padding: 12px 10px;
  }

  .mobile-display {
    display: inline-block;
  }
}

@media screen and (min-width: 1px) and (max-width: 980px) {
  body {
    min-width: inherit;
  }
}

@media screen and (min-width: 1px) and (max-width: 850px) {
  .footer-info-block, 
  .footer-info-block div, 
  .footer-info-block p {
    float: none;
  }
}