/* ------------------------------------------------------------------------ */
/*
	CSS for Faces of Suicide site
	Copyright (c) 2014-2015 by Rick Hellewell
	and CellarWeb, All Rights Reserved
	*/

@charset "utf-8";
body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	width: auto;
	min-width: 780px;
	color: #000;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	background-color: #4e4e4e;
	/*margin-left: 150px;*/
	/*background: url(../images/43.jpg);*/
}
textarea {
	font-family: Verdana, Geneva, sans-serif;
	font-size-adjust: 0.4 !important;
}
div {
	margin-top: 0px;
	margin-bottom: 0px;
}
/*  HEADER area ---------------------------------------------------------- */
.header {
	width: 1180px;
	margin-right: 20px;
	margin-left: 20px;
	border: none;
}
.header img {
	border: none;
	max-width: 100%;
	height: auto;
	width: auto; /* for ie9 */
}
.header_pix img {
	border: none;
	max-width: 100%;
	height: auto;
	width: auto; /* for ie9 */
}
.header_pix {
	background-repeat: no-repeat;
	background-position: center top;
	background-image: url(../images/faceslogo01.png);
	max-width: 100%;
	height: auto;
	width: auto; /* for ie9 */
	border: none;
}
/*  MAIN CONTENT area ---------------------------------------------------------- */
.content {
	width: auto;
	padding: 15px;/*background-color: #6699FF;
    border: 1px black solid;*/
	padding-bottom: 150px !important;		/* make sure the footer doesn't overwrite content on smaller screens
}
.content_wide {
	/*width: 95%;*/
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;/*background-color: #6699FF;
    border: 1px black solid;*/
}
.content_pix {
	width: 1180px;
	padding: 5px;
	margin-left: 20px;
}
/*  POPOVER BOX  area ---------------------------------------------------------- */
#middletextbox {
	position: absolute;
	border-top: solid black 2px;
	border-left: solid black 2px;
	border-right: solid black 4px;
	border-bottom: solid black 4px;
	top: 30%;
	right:25%;
    /*bottom:25%;*/
	/*left: 200px;*/
	padding: 5px 15px;
	margin-top: 10px;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 10px;
	width: 800px;
	background-color: #8CC1F6;
}
/*  NAVIGATION BAR area ---------------------------------------------------------- */
.nav {
	float: left;
	padding: 0;
	list-style: none;
	width: 720px;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 50px;
}
.nav li {
	float: left;
}
.nav li a {
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	font-weight: bold;
	color: #069;
}
.nav li a:hover {
	color: #c00;
}
/*  MENU area ---------------------------------------------------------- */
.menu {
	display: inline-block;
	width: 95%;
	margin-top: 3px;
	margin-bottom: 25px;
	margin-left: 0px;
}
.menu img {
	border: none;
	width: 79px;
	height: 18px;
}
.menu_2015 {
	font-size: 0.9em;
	background-color: #406180;
	text-align: center;
	margin-top: 5px;
	margin-right: 8px;
	margin-bottom: 5px;
	margin-left: 8px;
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 8px;
	border: 1.5px outset #333;
	text-decoration: none !important;
}
.menu_2015 a:hover {
	color: #000 !important;
	background-color: #6D8FB4 !important;
}
.menu_item, .menu_item a:hover, .menu_item a:link, .menu_item a:visited, .menu_item a:active {
	font-size: 10px;
	color: #FFF;
	display: inline-block;
	background-color: #036;
	margin-right: 3px;
	margin-left: 3px;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	text-align: center;
	text-decoration: none;
}
/*  LINK HOVER w/o UNDERLINE area ---------------------------------------------------------- */

.nounderline a:hover, .nounderline a:visited, .nounderline a:active, .nounderline a:link {
	text-decoration: none;
}
hr {
	border: thin inset #666;
}
form {
	margin: 0px;
}
/*  TEXT SIZING area ---------------------------------------------------------- */
.tinytext {
	font-size: 8px;
}
.tinytext_white {
	font-size: 9px;
	color: #FFFFFF;
}
/*   area ---------------------------------------------------------- */
.linkbox {
	font-size: 11px;
	font-family: Verdana, Geneva, sans-serif;
	padding: 15px;
	color: #000;
	width: 885px;/*border: 1px solid #FFF;*/
	margin:20px auto;
}
.linkbox table tr td {
	padding: 12px 20px 12px 20px;
	vertical-align: top;
}
.linkbox a:link {
	color: #000099;
	text-decoration: underline;
	outline: none;
}
.linkbox a:hover {
	color: #3366CC;
	text-decoration: underline;
	outline: none;
}
.linkbox a:active {
	color: #000099;
	text-decoration: underline;
	outline: none;
}
.linkbox a:visited {
	color: #000099;
	text-decoration: underline;
	outline: none;
}
/* FAQ PAGE ITEMS  area ---------------------------------------------------------- */
.faq_box {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #ccf;
	border: thin solid #000099;
}
.faq_box a:link {
	color: #000099;
	text-decoration: underline;
	outline: none;
}
.faq_box a:hover {
	color: #3366CC;
	text-decoration: underline;
	outline: none;
}
.faq_box a:active {
	color: #000099;
	text-decoration: underline;
	outline: none;
}
.faq_box a:visited {
	color: #000099;
	text-decoration: underline;
	outline: none;
}
/*   area ---------------------------------------------------------- */
.showpage {
	font-size: 11px;
	font-family: Verdana, Geneva, sans-serif;
	padding: 8px;
	color: #000;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 20px;
	width: 850px;/*border: 1px solid #FFF;*/
}
/* LINKS   area ---------------------------------------------------------- */
a, a:hover, a:visited, a:active, a:link {
	outline: none;
	color: #CCFFFF;
	text-decoration: underline;
}
.table_refs a, a:hover, a:visited, a:active, a:link {
	outline: none;
	color: #006699;
	text-decoration: underline;
}
/* FOOTER  area ---------------------------------------------------------- */
.footer {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #ffffff;
	/*margin-top: 25px;*/
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;/*width: 980px;*/
}
#sticky {
  width:100%;
  height:auto;
  padding-top:20px;
  background:black;
  color:white;
  text-align:center;
  position:fixed;    /*Here's what sticks it*/
  bottom:0;          /*to the bottom of the window*/
  left:0;            /*and to the left of the window.*/
}
.footer_refs a, a:hover, a:visited, a:active, a:link {
	outline: none;
	color: #FFFFFF;
	text-decoration: underline;
}
.footer img {
	border: none;
	margin-top: 5px;
	margin-bottom: 0px;
}
/* FACE IMAGE  area ---------------------------------------------------------- */
.picture_box {
	width: 120px;
	height: 115px;
	margin-left: 80px;
	padding: 2px;
	border: 1px solid #fff;
	/* position: relative;*/
	float: left;
	background-color: #055;
}
/* FACE IMAGE - ADMIN  area ---------------------------------------------------------- */
.admin_picture_box {
	width: 225px;
	height: 225px;
	margin: 5px 15px 5px auto;
	padding: 5px auto 5px auto;
	border: 1px solid #fff;
	/* position: relative;*/
	float: left;
	background-color: #055;
}
/*  EXPLODE FACE PICTURE  area ---------------------------------------------------------- */
.bigpicture {
	margin-left: 80px;
	padding: 2px;
	border: 1px solid #fff;
	/* position: relative;*/
	float: left;
	background-color: #055;
}
/*  REMEMBRANCE area ---------------------------------------------------------- */
.remember_box {
	width: 450px;
	margin-left: 220px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid #000;
	color: #000;
	text-align: left;
	background-color: #099;
	/* following required to wrap text in boxes across browsers */
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	white-space: normal;
}
/* hide from mac \*/

* html .picture_box {
	margin-right: -3px;
}
* html .remember_box {
	margin-left: 0;
}
/* end hide */

/* TABLE  area ---------------------------------------------------------- */
.table_1 {
	margin: 20px auto;
		border: thin solid #000099;
	/*padding-right: 5px;
	padding-left: 5px;*/
  /*padding-right: 14px;
  padding-left: 14px;*/
	font-size: 9px;
	font-family: Verdana, Geneva, sans-serif;
	color: #000;
	/*width: 100%;*/
}
.table_1 td, tr {
	border: thin solid #CCCCFF;
	padding-right: 15px;
	padding-left: 15px;
	padding-top: 5px;
	padding-bottom: 8px;
	color: #000;
	font-size: 12px;
	margin: 5px;
	background-color: #DCDCDC;
}
.table_1 input {
	background: #9999FF;
	background-color: #FFFFFF;
	color: #000000;
	text-align: left;
}
/*.table_2  table, td, tr {
	border: thin solid #FFF;
	font-size: 11px;
	font-family: Verdana, Geneva, sans-serif;
	color: #000;
	vertical-align: top;
	margin: 0px;
	padding: 10px;
}
.table_3  table, td, tr {
	font-size: 11px;
	font-family: Verdana, Geneva, sans-serif;
	color: #000;
	vertical-align: top;
	margin: 0px;
	padding: 10px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
*/

/* MESSAGE BOXES */
.box_message {
	width:60%;
	margin:auto;
}

/* COLORED BOXES  area ---------------------------------------------------------- */
.red_box {
	color: #FFF;
	background-color: #FF5E5E;
	padding: 5px;
	border: thin solid #FFF;
	margin-left: 15px;
}
.purple_box {
	color: #FFF;
	background-color: #F0F;
	padding: 5px;
	border: thin solid #333;
	font-weight: bold;
}
.green_box {
	color: #000;
	background-color: #82FF82;
	padding: 5px;
	font-weight: bold;
	border: thin solid #333;
}
.blue_box {
	color: #FFF;
	background-color: #287EFF;
	padding: 5px;
	border: thin solid #333;
}
/* TEXT COLORS AND EFFECTS  area ---------------------------------------------------------- */
.text_red {
	color: #F00;
}
.text_yellow {
	color: #FF0;
}
.text_black {
	color: #000;
}
.text_white {
	color: #fff;
}
.small_text {
	font-size: 9px;
}
.right_text {
	text-align: right;
	float: right;
	font-size: 80%;
}
.right_text a:link, .right_text a:hover, .right_text a:visited, .right_text a:active {
	color: #006;
	text-decoration: underline;
}
.secret_link a:link, .secret_link a:hover, .secret_link a:visited, .secret_link a:active {
	color: #000;
	text-decoration: none;	/*font-size: 6px;*/
}
/* HEADINGS TEXT  area ---------------------------------------------------------- */
h3 {
	color: #FFFFFF;
}
h4 {
	color: #000000;
	padding: 0px;
	margin: 0px;
}
/* ------------------------------------------------------------------------ */
/* add responsive stuff */
/* spacing/font sizes recommendations
from http://typecast.com/blog/a-more-modern-scale-for-web-typography
*/

@charset "utf-8";
/* CSS Document */

body {
	font-size: 1.0em;
}
body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 {
	font-family: Verdana, Geneva, sans-serif;
}
#page {
	font-size: 1em;
	/* equivalent to 16px */
	line-height: 1.25;/* equivalent to 20px */
}
 @media (min-width: 43.75em) {
#page {
	font-size: 1em;
	/* equivalent to 16px */
	line-height: 1.375;/* equivalent to 22px */
}

h1 {
	font-size: 2em;
	/* 2x body copy size = 32px */
	line-height: 1.25;/* 45px / 36px */
}
 
}
 @media (min-width: 56.25em) {
h1 {
	font-size: 3em;
	/* 3x body copy size = 48px */
	line-height: 1.05;/* keep to a multiple of the 20px line height and something more appropriate for display headings */

}
h2 {
	font-size: 1.625em;
	/* 1.625x body copy size = 26px */
	line-height: 1.15384615;/* 30px / 26px */
}
}
 @media (min-width: 43.75em) {
h2 {
	font-size: 2em;
	/* 2x body copy size = 32px */
	line-height: 1.25;
}
}
 @media (min-width: 56.25em) {
h2 {
	font-size: 2.25em;
	/* 2.25x body copy size = 36px */
	line-height: 1.25;
}
}
h3 {
	font-size: 1.375em;
	/* 1.375x body copy size = 22px */
	line-height: 1.13636364;/* 25px / 22px */
}
 @media (min-width: 43.75em) {
h3 {
	font-size: 1.5em;
	/* 1.5x body copy size = 24px */
	line-height: 1.25;
}
}
 @media (min-width: 56.25em) {
h3 {
	font-size: 1.75em;
	/* 1.75x body copy size = 28px */
	line-height: 1.25;
}
}
h4 {
	font-size: 1.125em;
	/* 1.125x body copy size = 18px */
	line-height: 1.11111111;
}
 @media (min-width: 43.75em) {
h4 {
	line-height: 1.22222222;/* (22px / 18px */
}
}
blockquote {
	font-size: 1.25em;
	/* 20px / 16px */
	line-height: 1.25;/* 25px / 20px */
}
 @media (min-width: 43.75em) {
blockquote {
	font-size: 1.5em;
	/* 24px / 16px = */
	line-height: 1.45833333;/* 35px / 24px */
}
.menu {
/* width:90%;*/
}
.menu img {
	border: none;
	width: 160px;
	height: 36px;
}
}

/* responsive add-in for Faces site 
	december 2014
	Rick Hellewell
	CellarWeb
	Copyright 2014-2015 by Rick Hellewell and CellarWeb
	All Rights Reserved
	*/

@charset "utf-8";
/* CSS Document */

@media only screen and (min-width:651px ) and (max-width:979px) {
/*Small Desktop / Large Tablet View*/
#wrap {
	width: 650px;
}
#nav {
	float: none;
	margin-bottom: 20px;
}
#content {
	margin-left: 0;
	float: none;
	width: auto;
}
#wrapClear {
	clear: none;
}
#logo, .header_pix img {
	float: left;
x max-width: 100%;
	height: auto;
	margin: 0 auto;
}

#menu {
	float: left;
	margin-left: 20px;
	margin-top: 24px;
}
#menu ul li {
	float: left;
	margin: 0 2px 0 0;
}
#menu ul li a {
	padding: 10px 15px;
}
#navClear {
	display: inline;
	clear: left;
}
#featureWrap .feature {
	width: 190px;
}
}
@media only screen and (min-width:481px ) and (max-width:650px) {
/* Small Tablet View */
#wrap {
	width: 480px;
}
#nav {
	float: none;
	margin-bottom: 20px;
}
#content {
	margin-left: 0;
	float: none;
	width: auto;
}
#wrapClear {
	clear: none;
}
#logo, .header_pix img {
	float: left;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
#menu {
	float: left;
	margin-left: 10px;
	margin-top: 24px;
	font-size: 12px;
}
.menu img {
	border: none;
	width: 80px;
}
#menu ul li {
	float: left;
	margin: 0 2px 0 0;
}
#menu ul li a {
	padding: 8px 12px;
}
#navClear {
	display: inline;
	clear: left;
}
#featureWrap .feature {
	width: 212px;
	margin-bottom: 10px;
}
}
@media only screen and (max-width:480px) {
/* Smartphone view*/
#wrap {
	width: 300px;
}
#nav {
	float: none;
	margin-bottom: 20px;
}
#content {
	margin-left: 0;
	float: none;
	width: auto;
}
#wrapClear {
	clear: none;
}
#logo, .header_pix img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
#menu {
	float: left;
	font-size: 12px;
}
#menu ul li {
	float: left;
	margin: 0 2px 0 0;
}
#menu ul li a {
	padding: 8px 12px;
}
.menu {
	width: 90%;
}
.menu img {
	border: none;
	width: 80px;
}
#navClear {
	display: inline;
	clear: left;
}
#featureWrap .feature {
	width: 284px;
	margin-bottom: 10px;
}
}
/* ------------------------------------------------------------------------ */