/*
/////////////////////////////////////////////////////////
// 
//   namesuppressed Global Stylesheet v4
//   11 January 2018
//   www.namesuppressed.com
//   syneryder@namesuppressed.com
//
//   Basic stylesheet for the namesuppressed website.
//
/////////////////////////////////////////////////////////
*/


/*******************************************************************/
/* FONT DEFINITIONS */
/*******************************************************************/

@font-face {
    font-family:'Raleway';
    src:url('/fonts/raleway-light-webfont.woff2') format('woff2'),
         url('/fonts/raleway-light-webfont.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    font-weight: bold;
    src: url('/fonts/raleway-bold-webfont.woff2') format('woff2'),
         url('/fonts/raleway-bold-webfont.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('/fonts/raleway-bolditalic-webfont.woff2') format('woff2'),
         url('/fonts/raleway-bolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Libre Franklin';
    src: url('/fonts/librefranklin-regular-webfont.woff2') format('woff2'),
         url('/fonts/librefranklin-regular-webfont.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Libre Franklin';
    src: url('/fonts/librefranklin-light-webfont.woff2') format('woff2'),
         url('/fonts/librefranklin-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Libre Franklin';
    src: url('/fonts/librefranklin-bold-webfont.woff2') format('woff2'),
         url('/fonts/librefranklin-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Libre Franklin';
    src: url('/fonts/librefranklin-extrabold-webfont.woff2') format('woff2'),
         url('/fonts/librefranklin-extrabold-webfont.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inconsolata';
    src: url('/fonts/inconsolata-regular-webfont.woff2') format('woff2'),
         url('/fonts/inconsolata-regular-webfont.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Indie Flower';
    src: url('/fonts/indieflower-webfont.woff') format('woff');
    font-display: swap;
}




/********************************************************
  Basic document style definitions
********************************************************/

/* The only definitions that should appear in this
   section are defined HTML entities (like body, h1 and
   abbr, but not classes of these well-defined entities).
   nocss, spacer and .right and .left are exceptions. */

/* For items displayed when no CSS support is present. */
.nocss {
  display: none;
  visibility: hidden;
}

div.spacer {
  margin: 0px;
  padding: 0px;
  clear: both;
}

.right {
  float: right;
}

.left {
  float: left;
}

.center {
  margin-left:  auto;
  margin-right: auto;
  text-align: center;
}

.imageleft {
  margin: 0px 6px 6px 0px;
  float: left;
}

.imageright {
  margin: 0px 0px 6px 6px;
  float: right;
}

.shadow {
  box-shadow: 0px 0px 7px rgba(0,0,0,0.75);
}

body {

  color:               #000000;
  background-color:    #000099;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000020', endColorstr='#0000b0');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000020', endColorstr='#0000b0')";
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.1, #000020), color-stop(1, #0000b0) );
  background: -moz-linear-gradient( center top, #000020 0%, #0000b0 100% );
  background: -o-linear-gradient(#000020, #0000b0);
  background: linear-gradient(#000020, #0000b0);
  background-attachment: fixed;

  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  font-family:   "Raleway","Libre Franklin","Gill Sans","Helvetica Neue",Arial,Helvetica,sans-serif;
  font-weight:   300;
}

:link {
 /* color: #777755; */
 background-color: transparent;
}

:visited {
 /* color: #555533; */
 background-color: transparent;
}


h1 {
	border-top: 0px;
    margin-top: 0px;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    margin-bottom: 15px;
    text-align: center;
    font-size:  36px;
   	font-family: "Libre Franklin","Franklin Gothic","Helvetica Neue",Arial,Helvetica,sans-serif;
   	font-weight: 900;    /* IE definitely requires this! */
   	letter-spacing: -2px;
}

h2 {
    font-size:     28px;
    margin-top:    26px;
    margin-bottom: 0px;
    font-family:   "Libre Franklin","Franklin Gothic","Helvetica Neue",Arial,Helvetica,sans-serif;
    font-weight:   bold;  /* IE requires this! */
    line-height:    31px;
    letter-spacing: -1px;
}

h3 {
    font-size:      22px;
    font-family:     "Libre Franklin","Franklin Gothic","Helvetica Neue",Arial,Helvetica,sans-serif;
    font-weight:    bold;   /* IE requires this! */
    letter-spacing: -1px;
}

ul, ol, li { font-size: 18px; line-height: 21px; }
th { font-weight: bold; }

form {
  margin:  0px;
  padding: 0px;
}

p, dl {
  text-align:  left;
  font-size:   18px;
  line-height: 21px;
  margin-top:  10px;
}

abbr, acronym {
  border-bottom: 1px dotted #CCCC99;
  cursor: help;
}

a img {
  border: 0px;
}

a:hover {
  color: #ff0000;
  background-color: transparent;
}

input[type="text"], input[type="password"], textarea {
  font-weight: bold;
  max-width: 100%;
}

textarea:focus, input:focus {
    background-color: #ffffee;
}

/* pre {
	white-space: pre-wrap;
	word-wrap: break-word;
} Old pre code, not for contact form */

pre {
  color: #333333;
  background-color: #f6f6f6;
  font-family: "Inconsolata", "Courier New", "Courier", monospace;
  font-weight: 200;
  font-size: 14px;
  line-height: 16px;
  padding: 5px;
  border: 1px #aaaaaa solid;
  overflow: auto;
  width: auto;
}




/********************************************************
  Header / Footer Definitions
********************************************************/

.globalnav {
  background: #000000;
  color: #cccccc;
  text-align: center;
  font-weight: 300;
  letter-spacing: 0px; 
}

.globalnav ul {
  margin:     	  0px;
  padding-top:    5px;
  padding-left:   0px;
  padding-right:  0px;
  padding-bottom: 10px;
}

.globalnav li {
  display: inline;
  text-decoration: none;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 16px;
  line-height: 17px;
  border-right: #555555 1px dotted;
  text-transform: lowercase;
}

.globalnav li.last {
  border-right: none;
}

.globalnav a, .globalnav a:visited {
  color: #999999;
}

.globalnav a:hover {
  color: #ff0000;
}




/********************************************************
  General layout definitions
********************************************************/

#header {
  background: #000000;
  color: #cccccc;
  text-align: right;
  clear: both;
}

#header img {
  margin:  0px;
  padding: 0px;
}

#maincontent {
  padding:      0px;
  border:       0px;
  color:        #000000;
  max-width:    776px;
  margin-left:  auto;
  margin-right: auto;
  border-collapse: collapse;
  background-color: #ffffff;
  border-style: none;
  box-shadow: 0px 0px 40px rgba(0,0,0,0.75);
}

#maincontent ol, #maincontent li {
  margin-bottom: 5px;
}

#bodytext {
  padding-top:       20px;
  padding-left:      5%;
  padding-right:     5%;
  padding-bottom:    20px;
}

#copyright, footer {
  background: #000000;
  color: #999999;
  text-align: center;
  font-size: 12px;
  line-height: 13px;
  padding: 10px;
  clear: both;
}

#copyright .smalllogo {
	float: left;
}

#copyright .address {
	text-align: right;
}

.mobilemaxwidth {
    max-width: 100%;
    height: auto;
}

@media (max-width: 420px) {

	#header, header {
		text-align: center;
	}

	#header img {
		max-width: 100%;
        height: auto;
	}

	#copyright .smalllogo {
		float: none;
		text-align: center;
		clear: both;
	}

	#copyright .address {
		text-align: center;
	}
}



/********************************************************
  Search Form styles
********************************************************/

.searchform {
  max-width:        540px;
  margin-top:       14px;
  margin-bottom:    24px;
  margin-left:      auto;
  margin-right:     auto;
  padding-top:      10px;
  padding-bottom:   10px;
  padding-left:     5px;
  padding-right:    5px;
  font-size:        13px;
  text-align:       center;
  border-width:     1px;
  border-style:     solid;
  border-color:     #CC9999;
  border-radius:    4px;
  background-color: #FFCCCC;
  color:            #000000;
}

.searchform h2 {
  padding:          0px 3px 3px 3px;
  font-size:        19px;
  text-align:       center;
  margin:           0px;
  font-weight:      bold;
  background-color: transparent;
  color:            #000000;
}

.searchform input[type="text"] {
  color: #000000;
  background-color: #fcfcfc;
  font-size: 18px;
  font-weight: bold;
}

/*.searchform input:focus {
  color: #000000;
  background-color: #ffffff;
}

.searchform input[type="submit"] {
  font-size: 18px;
  font-weight: bold;
  height: 30px;
} */



/********************************************************
  Contact form definitions
********************************************************/

table.feedback {
  margin-left:  auto;
  margin-right: auto;
  color: #4F4F4F;
}

table.feedback h2 {
  color: #000000;
  text-align: center;
}

table.feedback td {
  width:          200px;
  border-right:   1px dotted #999999;
  padding:        6px;
  vertical-align: top;
}

table.feedback td.last {
  width:        180px;
  border-right: none;
}



/********************************************************
  Feedback & Email Signup forms
********************************************************/

.contactform {
  text-align:          center;
  margin-left:         auto;
  margin-right:        auto;
  background-color:    #ffffff;
  background:          url("/design/gfx/vintage-envelope.jpg");
  background-repeat:   no-repeat;
  background-position: center;
  width:           610px;
  height:          340px;
  border:              none;
}

.contactform h3 {
  padding-top:         25px;
  font-size: 20px;
}

.contactform p {
  padding-left:  35px;
  padding-right: 35px;
}

.contactform .inset {
  max-width:        350px;
  margin-left:  auto;
  margin-right: auto;
  text-align:   left;
}


.contactformnew {
  text-align:         center;
  margin-top:         30px;
  margin-left:        auto;
  margin-right:       auto;
  margin-bottom:      0px;
  background-color:   #ffffff;
  background-image:   url('//www.namesuppressed.com/gfx/texture-rockywall-background.jpg');
  background-repeat:  repeat;
  border:             1px solid #000000;
  border-left:        0px;
  border-right:       0px;
  padding:            15px;
}

.contactformnew .emailinput {
	width: 500px;
}

.contactformnew .bodyinput {
	width: 500px;
	height: 200px;
}

@media (max-width: 575px) {
    .contactformnew .emailinput {
        width: 100%;
        padding-left: 0px;
        margin-left: 0px;
    }
    .contactformnew .bodyinput {
        width: 100%;
        padding-left: 0px;
        margin-left: 0px;
    }

}



fieldset {
  border:  0px;
}

fieldset label {
  font-weight: bold;
}

.feedback fieldset input[type="text"], .feedback fieldset textarea {
  color:            #000000;
  background-color: #F9F9F9;
}

fieldset input[type="text"], fieldset textarea {
	padding: 5px;
	border: 2px solid #ffffff;
    border-left: 10px solid #ffffff;
	font-size: 20px;
	color: #444444;
	margin: 5px;
}

fieldset input[type="text"]:focus, fieldset textarea:focus {
	border-left: 10px solid #449944;
	background-color: #ffffff;
}

fieldset input[type="submit"] {
	cursor: pointer !important;
	padding: 0px;
}

#mailchimp_signup { max-width: 620px; font-size: 22px; color: #505050; margin-top: 5px; margin-left: auto; margin-right: auto; padding: 20px 0 20px 3%; border: 1px solid #999999; border-radius: 6px; background: linear-gradient(#f2f2f2, #c9c9c9); box-shadow: 2px 2px 5px #dddddd; }

#mailchimp_signup .email { max-width: 100%; font-size: 22px; height: 30px; max-width: 300px; border: 1px solid #999999; }

/* @media (max-width: 330px) {
    #mailchimp_signup .email {
        width: 100%;
        padding-left: 0px;
        margin-left: 0px;
    }
    #mailchimp_signup .cssbutton {
        width: 100%;
        padding-left: 0px;
        margin-left: 0px;
    }
} */



/********************************************************
  Definitions applicable to all pages (???)
********************************************************/

.textlinks p {
  text-align: center;
  font-size: 14px;
}

.quote {
  text-align: right;
  font-style: italic;
  font-size: 13px;
}



/********************************************************
  namesuppressed's CSS clickable buttons
  These imageless css buttons were generated
  by CSSButtonGenerator.com
********************************************************/

.cssbutton {
	-moz-border-radius:    6px;
	-webkit-border-radius: 6px;
	border-radius:         6px;
	-moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.4);
	box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.4);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#666666');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #aaaaaa), color-stop(1, #666666) );
	background: -moz-linear-gradient( center top, #aaaaaa 5%, #666666 100% );
    background: -o-linear-gradient(#aaaaaa, #666666);
    background: linear-gradient(#aaaaaa, #666666);

    background-color: #888888;
	border:  1px solid #222222;
    vertical-align: middle;

	display: inline-block;
	color: #ffffff;
	cursor: pointer;
	font-family: "franklin-gothic-urw-1","franklin-gothic-urw-2","Trebuchet MS","Helvetica Neue",Arial,Helvetica,sans-serif;
	font-size:   21px;
	font-weight: bold;
	text-decoration: none;
	padding: 2px 0px 2px 0px;
	margin-bottom: 10px;
	width:  320px;
	height: 38px;
	line-height: 35px;
	text-align: center;
    max-width: 100%;
    height: auto;
}.cssbutton:active {
	-moz-box-shadow: 0px 0px 0px 0px #000000;
	-webkit-box-shadow: 0px 0px 0px 0px #000000;
	box-shadow: 0px 0px 0px 0px #000000;
	position:relative;
    color: #ffffff;
	top:2px;
	left:2px;
}.cssbutton img {
	vertical-align: middle;
}


.downloadbutton {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000589', endColorstr='#000046');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000589), color-stop(1, #000046) );
	background: -moz-linear-gradient( center top, #000589 5%, #000046 100% );
    background: -o-linear-gradient(#000589, #000046);
    background: linear-gradient(#000589, #000046);
	background-color: #000478;
	border: 1px solid #000000;
}.downloadbutton:hover {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3035A9', endColorstr='#000046');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3035A9), color-stop(1, #000046) );
	background: -moz-linear-gradient( center top, #3035A9 5%, #000046 100% );
    background: -o-linear-gradient(#3035A9, #000046);
    background: linear-gradient(#3035A9, #000046);
}

.largebutton {
	width:  600px;
}

.smallbutton {
	width:  250px;
}

.buybutton, .orangebutton {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6e00', endColorstr='#b44500');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff6e00), color-stop(1, #b44500) );
	background: -moz-linear-gradient( center top, #ff6e00 5%, #b44500 100% );
    background: -o-linear-gradient(#ff6e00, #b44500);
    background: linear-gradient(#ff6e00, #b44500);
	background-color: #ef5e00; /*#b44500; */
	border: 1px solid #6c2900;
}.buybutton:hover, .orangebutton:hover {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9e30', endColorstr='#b44500');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff9e30), color-stop(1, #b44500) );
	background: -moz-linear-gradient( center top, #ff9e30 5%, #b44500 100% );
    background: -o-linear-gradient(#ff9e30, #b44500);
    background: linear-gradient(#ff9e30, #b44500);
}

.redbutton {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dd0000', endColorstr='#840000');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dd0000), color-stop(1, #840000) );
	background: -moz-linear-gradient( center top, #dd0000 5%, #840000 100% );
    background: -o-linear-gradient(#dd0000, #840000);
    background: linear-gradient(#dd0000, #840000);
	background-color:#dd0000;
	border: 1px solid #6c0000;
}.redbutton:hover {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#a40000');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff0000), color-stop(1, #a40000) );
	background: -moz-linear-gradient( center top, #ff0000 5%, #a40000 100% );
    background: -o-linear-gradient(#ff0000, #a40000);
    background: linear-gradient(#ff0000, #a40000);
}

.greenbutton {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00dd00', endColorstr='#008400');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00dd00), color-stop(1, #008400) );
	background: -moz-linear-gradient( center top, #00dd00 5%, #008400 100% );
    background: -o-linear-gradient(#00dd00, #008400);
    background: linear-gradient(#00dd00, #008400);
	background-color:#00dd00;
	border: 1px solid #006c00;
}.greenbutton:hover {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00a400');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00ff00), color-stop(1, #00a400) );
	background: -moz-linear-gradient( center top, #00ff00 5%, #00a400 100% );
    background: -o-linear-gradient(#00ff00, #00a400);
    background: linear-gradient(#00ff00, #00a400);
}.greenbutton:active {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00dd00', endColorstr='#008400');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00dd00), color-stop(1, #008400) );
	background: -moz-linear-gradient( center top, #00dd00 5%, #008400 100% );
    	background: -o-linear-gradient(#00dd00, #008400);
    	background: linear-gradient(#00dd00, #008400);
}



/********************************************************
  Star Bullet Points next to hero images 
********************************************************/

ul.newstyle {
  padding-left: 22px;
  margin-left: 0px
}

ul.newstyle li {
  color: #444444;
  font-size: 17px;
  margin-left: 0px;
  padding-left:3px;
  font-weight: normal;
  vertical-align: top;
  /* list-style-image: url('//www.namesuppressed.com/design/gfx/bullet_star.gif'); */
  list-style-image: url('//www.namesuppressed.com/gfx/bullet-starburst16.png');
  list-style-position: outside;
}




/********************************************************
  Product page definitions
********************************************************/

/* Move this out of the generic, into a product-page specific CSS? */
h1.productheadline {
	font-size: 72px;
	letter-spacing: -0.05em;
	font-weight: 900;
}
.productpage h1 {
	font-size: 72px;
	letter-spacing: -0.05em;
	font-weight: 900;
}

.productpage h2 {
    text-align:    center;
}

/* Move this out of the generic, into a product-page specific CSS? */
.productpage h2.tagline {
	font-size:     24px;
	margin-top: 0px;
	text-align: center;
	color: #DD3333;
}

.testimonialbar {
	text-align: center;
	background-image: url('//www.namesuppressed.com/gfx/texture-rockywall-background.jpg');
	background-color: #FFFFFF;
	margin-top: 30px;
	margin-bottom: 0px;
	padding: 15px;
	border: 1px solid #999999;
	border-left: 0px;
	border-right: 0px;
}

.testimonialbar .testimonial {
	margin-bottom: 15px;
}

.testimonialbar .testimonial .quote {
  font-family: "Indie Flower", cursive;
  font-size: 26px;
  line-height: 33px;
  color: #333333;
}

.testimonialbar .testimonial .attribution {
  font-size: 19px;
  line-height: 21px;
  text-align: right;
  color: #333333;
}