/*
 Theme Name: The Well
 Theme URI: http://the-well.ca
 Description: The WP theme for The Well
 Author: Soshal Group
 Author URI: http://soshalgroup.com
 Version: 1.0    
*/


/* 
COLORS

Purple: #4e284f
Green: #008171
Pink: #f16b84
Lime: #d2ff8a
Charcoal: #505052

*/


/* =============================================================================
   Structure
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }

html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
}

body {
  font: normal 18px/21px georgia,times,serif;
  color: #555;
  margin: 0;
  padding: 0;
  background: #fff url(images/backgr.png);
}

#searchForm {
  width: 100%;
  height: 80px;
  text-align: center;
  background: #4e284f;
  display: none;
}

#headerWrapper {
  width: 100%;
  min-height: 600px;
  background: #323232;
  overflow: hidden;
  z-index: 97;
}

header {
  position: relative;
  width: 100%;
  min-height: 600px;
  margin: 0 auto;
  background: #323232;
}

/*header {
  position: relative;
  width: 980px;
  height: 420px;
  margin: 0 auto;
  background: #323232;
}*/

#slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: #333;
  z-index: 1;
}

.slideshow, #banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 600px;
  overflow: hidden;
  z-index: 1;
}

nav {
  position: relative;
  width: 100%;
  height: 80px;
  text-align: center;
  background: url(images/navBackgr.png);
  z-index: 98;
}

.navInside {
  width: 980px;
  height: 80px;
  text-align: center;
  margin: -26px auto 0 auto;
  background: url(images/navInsideBackgr.png) center no-repeat;
}

#welcomeMessage {
  width: 100%;
  height: 112px;
  background: url(images/welcomeBackgr.png);
  border-bottom: 1px solid #ccc;
}

#wrapper {
  width: 980px;
  min-height: 400px;
  margin: -30px auto 0 auto;
  /*background: #fff;*/
}

#main {
  width: 670px;
  min-height: 400px;
  margin: 0 auto;
  padding: 7% 10%;
  overflow: hidden;
  clear: both;
}

footer {
  position: relative;
  width: 100%;
  min-height: 100px;
  text-align: center;
  padding: 20px 0 0 0;
  /*background: #505052;*/
  background: #888;
  border-top: 5px solid #bbb;
  clear: both;
}

.inside {
  width: 980px;
  margin: 0 auto;
}

#footerInfo {
  float: left;
  width: 430px;
  padding: 0 0 0 190px;
}

#footerImages {
  float: right: 
  width: 230px;
  text-align: left;
}


/* =============================================================================
   Menus and calls to action
   ========================================================================== */

#donateButton a {
  position: absolute;
  top: 25px;
  right: 200px;
  width: 110px;
  height: 40px;
  font-size: 1.05em;
  font-weight: 700;
  font-style: italic;
  line-height: 1em;
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 10px 20px 15px 20px;
  background: #f16b84;
  z-index: 97;
}

#donateButton a span {
  font: normal 400 0.95em 'Handlee',georgia,times,serif;
}

#donateButton a:hover {
  color: #444;
  background: #fff;
}

#searchButton a {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 90px; /* 130px */
  height: 60px;
  font-size: 1.3em;
  font-style: italic;
  line-height: 60px;
  color: #fff;
  text-decoration: none;
  text-align: left;
  text-shadow: 0px 0px 20px #000;
  padding: 0 0 0 40px;
  background: url(images/searchButtonBackgr.png) 0px 0px no-repeat;
  z-index: 97;
}

/*#searchButton a:hover, #searchButton a.active {
  color: #aaa;
  background: url(images/searchButtonBackgr.png) 0px -60px no-repeat;
}*/

#emergencyButton a {
  position: absolute;
  bottom: 0;
  right: 50px;
  width: 110px;
  height: 55px;
  font: normal 400 1.05em 'Handlee',georgia,times,serif;
  line-height: 1.1em;
  color: #333;
  text-decoration: none;
  text-align: center;
  padding: 10px 20px 15px 20px;
  background: #d2ff8a;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  z-index: 97;
}

#emergencyButton a span {
  font: italic 700 0.95em georgia,times,serif;
}

#emergencyButton a:hover {
  height: 80px;
}
   
nav ul {
  position: relative;
  margin: 0 15px 0 142px;
  padding: 0;
  list-style: none;
} 

nav ul li {
  float: left;
  position: relative;
  color: #9e849f;
}

nav ul li a {
  float: none;
  display: block;
  font: 400 1.35em 'Handlee',georgia,times,serif;
  line-height: 60px;
  color: #9e849f;
  margin: 16px 19px 0 19px;
  padding: 0 37px 0 0;
  text-decoration: none;
  background: url(images/bullet.png) right no-repeat;
}

/*nav ul li:after {
  content: '\22C5';
  margin: 0 0 0 30px;
}

nav ul li:last-child:after {
  content: '';
  margin: 0;
}*/

nav ul li:last-child a {

  background-image: none;
}

nav li:hover > a, nav ul li a.active, nav ul li a.current_page_item, nav ul li.current_page_item a {
  color: #fff;
}

nav ul ul {
  display: none;
}

nav li:hover > ul {
  position: absolute;
  display: block;
  width: 230px;
  top: 100%;
  left: 0;
  margin: 0;
}

nav ul ul li a {
  display: block;
  width: 200px;
  font: 400 0.9em georgia,times,serif;
  line-height: 1.2em;
  color: #fff;
  text-decoration: none;
  text-align: left;
  margin: 0;
  padding: 10px 15px;
  background: #3f1440;
}

nav ul ul li:last-child a {
  padding: 10px 15px 20px 15px;
  -moz-border-radius-bottomleft: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  -webkit-border-bottom-right-radius: 6px;
}

nav ul ul li a:hover {
  color: #9e849f;
}

p#back-top {
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 0;
}

p#back-top a {
  width: 60px;
  display: block;
  font-size: 1.4em;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 16px 0;
  background: #008171;
}

p#back-top a:hover {
  color: #fff;
  background: #f16b84;
}

/* =============================================================================
   Typography
   ========================================================================== */

#messageOne {
  display: block;
  width: 667px;
  font-size: 1.8em;
  font-weight: 700;
  line-height: 1em;
  color: #4e284f;
  margin: 0 auto 6px auto;
  padding: 20px 0 0 0;
}

#messageTwo {
  display: block;
  width: 667px;
  font: 400 1.5em 'Handlee',georgia,times,serif;
  line-height: 1em;
  color: #4e284f;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  font: 400 2.7em 'Handlee',georgia,times,serif;
  line-height: 1.1em;
  color: #008171;
  margin: 0 0 20px 0;
  clear: both;
}

h2 {
  font-size: 2.1em;
  margin: 40px 0 10px 0;
  color: #f16b84;
}

h2.postTitle {
  margin: 0 0 10px 0;
}

h2.postTitle a {
  color: #4e284f;
  text-decoration: none;
}

h2.postTitle a:hover {
  color: #008171;
  text-decoration: none;
}

#sidebar h2 {
  font-size: 1.4em;
  margin: 0 0 10px 0;
}

h3, h4, h5, h6 {
  font-size: 1.7em;
  color: #333;
  margin: 40px 0 10px 0;
}

h5, h6 {
  font-size: 1.4em;
}

p, address {
  line-height: 1.4em;
  margin: 0 0 20px 0;
}

#main p {
  clear: both;
}

p.box {
  color: #40153e;
  margin: 0 0 40px 0;
  padding: 20px;
  background: #fff;
  -moz-box-shadow: 0px 0px 5px #ddd;
  -webkit-box-shadow: 0px 0px 5px #ddd;
  box-shadow: 0px 0px 5px #ddd;
}

#sidebar p {
  font-size: 0.9em;
  line-height: 1.35em;
}

footer p {
  font: normal 0.75em 'Times New Roman',times,serif;
  line-height: 1.6em;
  color: #d3d3d3;
  margin: 0;
}

footer p span {
  font-size: 1.3em;
}

#main ul {
  margin: 0 0 30px 20px;
  padding: 0;
  list-style: square;
}

#main ol {
  margin: 0 0 30px 10px;
  padding: 0;
}

#main ul li, #main ol li {
  line-height: 1.6em;
}

p a, #main ul li a, #main ol li a {
  color: #4e284f;
  text-decoration: underline;
}

p a:hover, #main ul li a:hover, #main ol li a:hover {
  color: #008171;
  text-decoration: underline;
}

.postDate {
  display: block;
  font-size: 0.85em;
  font-style: italic;
  color: #777;
  margin: 0 0 15px 0;
}

.postDate.higher {
  margin: -20px 0 30px 0;
}

#main ul#categories {
  margin: 0 0 30px 0;
  list-style: none;
}

#main ul#categories li {
  display: inline;
  font-size: 0.9em;
  line-height: 1em;
  margin: 0;
  padding: 0;
}

#main ul#categories li a {
  margin: 0 0 0 6px;
}

.pagination {
  text-align: center;
  margin: 0 0 30px 0;
}

.page-numbers { 
  font-size: 1.5em;
  margin: 0 5px;
}

.page-numbers.current { 
  color: #888;
}

.page-numbers .dots { 
  letter-spacing: 1px
}

a.page-numbers { 
  color: #4e284f;
  text-decoration: none;
}

a:hover.page-numbers {
  color: #008171;
  text-decoration: underline;
}

#sidebar ul {
  margin: -10px 0 30px 0;
  padding: 0;
  list-style: none;
}

#sidebar ul li {
  display: block;
  font-size: 0.9em;
  line-height: 1.35em;
  padding: 12px 0;
  border-bottom: 1px solid #e3e3e3;
}

#sidebar ul li a {
  color: #4e284f;
  text-decoration: none;
}

#sidebar ul li a:hover {
  color: #008171;
  text-decoration: none;
}


/* =============================================================================
   Misc
   ========================================================================== */

hr {
  display: block;
  height: 1px;
  margin: 40px 0;
  padding: 0;
  background: #fff;
  border: 0;
  border-top: 1px solid #ddd;
  clear: both;
}

blockquote {
  width: 80%;
  font-size: 1em;
  line-height: 1.4em;
  font-style: italic;
  color: #fff;
  margin: 30px auto;
  padding: 20px;
  background: #222;
}

blockquote span {
  font-style: normal;
}

blockquote a {
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
}

blockquote a:hover {
  color: #fff;
  text-decoration: underline;
}

blockquote p {
  margin: 0;
}

abbr[title] { border-bottom: 1px dotted; }

dfn { font-style: italic; }

aside#sidebar hr { margin: 36px auto; }

mark { background: #ff0; color: #333; font-style: italic; font-weight: bold; }

pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

code {
  color: #b00;
}

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

::-moz-selection { background: #4e284f; color: #fff; text-shadow: none; }
::selection { background: #4e284f; color: #fff; text-shadow: none; }

a, a:hover, a:focus, input:focus, textarea:focus, select:focus {
  outline: none;
}

p strong, #main ul li strong {
  color: #333;
}

br.clearfix {
  clear: both;
}


/* =============================================================================
   Images
   ========================================================================== */

.slideshow img, #banner img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

#logo {
  position: relative;
  display: block;
  margin: 0 auto;
  border: 0;
  z-index: 96;
}

#searchButton img {
  float: left;
  margin: 0 4px 0 0;
  border: 0;
}

#searchButton a:hover > #searchButton img {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

#main img, #sidebar img {
  display: block;
  margin: 30px auto;
  padding: 5px;
  background: #fff;
  border: 1px solid #e3e3e3;
  -moz-box-shadow: 0px 0px 10px #ddd;
  -webkit-box-shadow: 0px 0px 10px #ddd;
  box-shadow: 0px 0px 10px #ddd;
}

#main img.inline {
  float: none;
  display: inline;
  margin: 10px;
  padding: 5px;
  background: #fff;
  border: 1px solid #e3e3e3;
  -moz-box-shadow: 0px 0px 10px #ddd;
  -webkit-box-shadow: 0px 0px 10px #ddd;
  box-shadow: 0px 0px 10px #ddd;
}

#sidebar img {
  margin: 20px auto;
}

#main img.right, #main img.alignright {
  float: right;
  display: inline-block;
  margin: 0 0 30px 30px;
}

#main img.left, #main img.alignleft {
  float: left;
  display: inline-block;
  margin: 0 20px 30px 0;
}

#main img.left, #main img.alignleft.staff {
  width: 100px;
  height: 100px;
}

#main img.no-border {
  padding: 0;
  border: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#main img.icon {
  float: none;
  display: inline;
  vertical-align: middle;
  margin: 0 6px 0 0;
  padding: 0;
  background: none;
  border: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

footer img#lgbt {
  float: left;
  margin: 20px 8px 0 0;
  border: 0;
}

footer img#ang {
  float: left;
  margin: 10px 0 0 0;
  border: 0;
}

footer img#fb {
  float: left;
  margin: 24px 0 0 10px;
  border: 0;
}

#main iframe {
  display: block;
  margin: 30px auto;
  padding: 5px;
  background: #fff;
  border: 1px solid #e3e3e3;
  -moz-box-shadow: 0px 0px 10px #ddd;
  -webkit-box-shadow: 0px 0px 10px #ddd;
  box-shadow: 0px 0px 10px #ddd;
}

#main iframe#right {
  float: right;
  display: inline;
  margin: 0 0 30px 30px;
}

#main form img {
  display: inline;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}


/* =============================================================================
   Forms
   ========================================================================== */

form {
  margin: 0;
  padding: 0;
  border: 0;
}

#searchForm input {
  width: 280px;
  font: normal 1em georgia,times,serif;
  color: #4e284f;
  margin: 20px 0 0 0;
  padding: 10px 25px 10px 45px;
  background: #fff url(images/magnify.png) no-repeat;
  border: 0;
  border-radius: 100px;
}

#searchForm input:focus {
}

#main form {
  margin: -20px 0 30px 0;
}

#main form.wpcf7-form {
  margin: 15px 0 0 0;
}

#main form.wpcf7-form input.wpcf7-email {
  float: left;
  display: inline-block;
  width: 290px;
  font: normal 0.9em georgia,times,serif;
  color: #444;
  margin: 0 5px 0 0;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 100px;
}

#main form.wpcf7-form input:focus.wpcf7-email {
  border: 1px solid #aaa;
}

#main form.wpcf7-form input.wpcf7-submit {
  float: left;
  display: inline-block;
  font: normal 0.85em georgia,times,serif;
  color: #fff;
  margin: 0;
  padding: 8px 18px;
  background: #4e284f;
  border: 1px solid #4e284f;
  border-radius: 100px;
  cursor: pointer;
}

#main form.wpcf7-form br {
  display: none;
}

#main form.wpcf7-form .wpcf7-response-output {
  clear: both;
  font-size: 0.9em;
  font-weight: bold;
  font-style: italic;
  color: #4e284f;
  margin: 0;
  border: 0;
  padding: 20px 0 0 0;
}


/* =============================================================================
Media queries - devices smaller than 1300px wide
   ========================================================================== */
@media screen and (max-width: 1400px) {

#headerWrapper, #banner {
  min-height: 420px;
}

header {
  min-height: 420px;
}

} /* end */

/* =============================================================================
Media queries - devices smaller than 1025px wide
   ========================================================================== */
@media screen and (max-width: 1025px) {

#headerWrapper, #banner {
  min-height: 200px;
}

header {
  min-height: 200px;
}

} /* end */