/*
 * Monk Mobile - Using HTML5 ✰ Boilerplate
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }


/* =============================================================================
   Base
   ========================================================================== */
/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #606060; }

/* =============================================================================
   Links
   ========================================================================== */

a { color: #00e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
 * 1. Correct color not inheriting in IE6/7/8/9
 * 2. Correct alignment displayed oddly in IE6/7
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"], [role="button"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/*
 * Remove inner padding and border in FF3/4: h5bp.com/l
 */

button::-moz-focus-inner { border: 0; padding: 0; }

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }



/* ==|== primary styles =====================================================
   
   ========================================================================== */

body{
  font-size:12px; /*from here on out all font sizes should be in ems.*/
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}   
   
a{
 text-decoration:none;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul#menu li a{
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  letter-spacing:0px;
}
   
#header{
  position:relative;
}
   

#logo-wrap{
  display:block;
  width:6.025%; /* total width 15.125% */
  padding:4.2% 5% 4.2% 3.625%;
  float:left;
  background:url('../img/logo-bg.png') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover; 
}
   
img#logo{
  width:100%;
}

/** Main Menu **/
ul#menu{
  margin:0;
  padding:0;
  float:left;
  width:68.42%;
  list-style:none;
  margin:0.8% 0 0 2%;
  display:none;
}

ul#menu li{
  float:left;
  display:block;
  padding:6% 4%;
  line-height:1.1;
}

ul#menu li a{
  display:block;
  float:left;
  font-size:1.3em;
  letter-spacing:1px;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.05);
  /* width of parent is undefined so I can't have % padding here */
}

#menu-more-wrap{
  width:6.687%;
  padding:4% 3.7%;
  float:right;
  cursor:pointer;
  position:relative;
}

img#menu-more{
  width:100%;
}

ul#menu-more-links{
  display:none;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
  position:absolute;
  left:0;
  top:100%;
  z-index:1001;
  background:url('../img/menu-more-links-bg-pattern.png');
}
ul#menu-more-links li a{
  display:block;
  padding:5%;
  font-size:1.5em;
  text-align:center;
  border-bottom:1px solid #ffffff;
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
  border-color:rgba(255,255,255,0.2);
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

ul#menu-more-links li a:hover,
ul#menu-more-links li a:active{
  background:url('../img/black-transparent.png');
}


#menu-more-close{
  width:100%;
  text-align:center;
  padding:3.55% 0;
  background:url('../img/more-up.png') no-repeat center center;
  opacity:80%;
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;  
  cursor:pointer;
}

#menu-more-close img{
  width:7.58%;
}


#content{
  padding:3.39%;
  -moz-box-shadow: inset 0 0 5px #888;
  -webkit-box-shadow: inset 0 0 5px #888;
  box-shadow: inset 0 0 5px #888;
  line-height:1.6;
}


#content-header{
  padding:2.71% 15.56%;
  border-bottom:2px solid #DDDDDD;
  border-color:rgba(221,221,221,0.8);
  position:relative;
}

#content-header h1{
  margin:1% 0 0 0;
  color:#609191;
  font-size:1.6em;
  font-weight:400;
}

h1{
  font-size:1.33em;
}

img#header-image{
  width:100%;
}


table{
  width:100%;
}

table caption{
  font-weight:bold;
  font-size:1.5em;
}

table th{
  text-align:left;
}

.label-pair{
  margin-bottom:1.69%
}

.label{
  color:#898989;
  display:block;
  float:left;
  margin-right:1%;
}
.label-data{
  display:block;
  float:left;
}

.button{
  width:33%;
  float:left;
  margin-right:0.5%;
}
.button.end{
  margin-right:0;
}

.button a,
.button-small {
  padding:12.07% 0;
  display:block;
  -moz-box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
  -webkit-box-shadow: inset 0 0 rgba(0,0,0,0.4);
  box-shadow: inset 0 0 16px rgba(0,0,0,0.4); 
  text-align:center;
  text-indent:16.49%;
  font-size:1.083em;
  background-repeat:no-repeat;
  background-position:center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;  
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

}



.button.full{
  width:100%;
  float:none;
}

.button.rsvp a{
  background-image:url('../img/talk-bubble.png');
  padding:4.07% 0;
  text-indent:3.49%;
}

.button.audio a{
  background-image:url('../img/icon-listen.png');
}
.button.video a{
  background-image:url('../img/icon-watch.png');
}
.button.notes a{
  background-image:url('../img/icon-notes.png');
}

.button.audio a:hover{
  background-image:url('../img/icon-listen-rollover.png');
}
.button.video a:hover{
  background-image:url('../img/icon-watch-rollover.png');
}
.button.notes a:hover{
  background-image:url('../img/icon-notes-rollover.png');
}
.button.rsvp a:hover{
  background-image:url('../img/talk-bubble-rollover.png');
}


.button a:hover{
 -moz-box-shadow: inset 0 0 16px rgba(0,0,0,0.8);
  -webkit-box-shadow: inset 0 0 rgba(0,0,0,0.8);
  box-shadow: inset 0 0 16px rgba(0,0,0,0.8); 
}


.button.rsvp a,
.button.media a,
.button.media a:hover{
  font-size:0.9em;
  text-transform:uppercase;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none; /* shadow is included in image */
}

.detail #content-header .header-back{
  float:left;
  position:absolute;
  left:0;
  top:15%;
  height:70%;
  display:block;
  width:9.79%;
  background-image:url('../img/header-back.png');
  background-repeat:no-repeat;
  background-position:center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

/* List Views */
#featured-items{
  margin-bottom:2.71%;
}
.articles #content .list-title,
.sermons #content .list-title,
.events #content .list-title{
  padding-top:7%;
  line-height:1em;
}
.articles #featured-items,
.sermons #featured-items,
.events #featured-items{
  margin-bottom:0;
}
.list-title{
  padding:2.71%;
}

.list-title h1{
  font-size:2em;
  margin:0;
  font-weight:400;
}
.list-title h2{
  font-size:1.5em;
  text-transform:uppercase;
  font-weight:400;
  margin:0;
}
.list-date{
  font:0;
}


.list #content{
  padding:0;
}

a.list-item{
 display:block;
 margin-top:1px;
}

a.list-item:hover{
  position:relative; /* so shadow will show below */
  z-index:10;
}

.list .list-item article{
  border-bottom:1px solid #dbdbdb;
  -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
  -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2); 
  padding:2.71% 0 2.71% 2.71%;
}

.list  a.list-item:hover article{
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none
}

.list .list-item .item-image{
  width:33.90%;
  float:left;
  margin-right:2.03%;
}


.list .list-item  .item-info{
  float:left;
  width:94%;
}

.list .list-item:hover{
  -webkit-box-shadow:0 0 5px 2px rgba(0,0,0,0.3);
  -moz-box-shadow:0 0 5px 2px rgba(0,0,0,0.3);
  box-shadow:0 0 5px 2px rgba(0,0,0,0.3);
}

.list .list-item  .item-info h3,
.list .list-item  .item-info h2{
  margin:0.5% 0;
  font-size:1.3em;
  line-height:1.1em;
  font-weight:400;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color:#609191;
}
.detail-header .list-text,
.list .list-item  .item-info .list-text{
  line-height:1.3;
  font-size:1.2em;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color:#898989;
}
.list-meta{
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color:#bbbbbb!important;
}
.blogs{
  box-shadow:none!important;
  -webkit-box-shadow:none!important;
  -moz-box-shadow:none!important;
}
.blogs .detail-header h1{
  color:#FFF;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.list .list-item .feature .item-info{
  width:56.68%; 
}

.list .list-item .article-inner{
  background: url('../img/list-item-bg.png') no-repeat right center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  position:relative;
}

.push51x50{
  width:100%;
}


/* list - events */
/* Most notable thing about events lists is that the padding moves
   from the outer container and handled by the internal elements as needed.
*/
.list .events article{
  padding:0;
}

.list .events  .list-item .date{
  width:17.288%;
  float:left;
  background:url('../img/transparent-square.png');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  
  text-transform:uppercase;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.list .events .list-item .date-data{
  position:absolute; /* there will be a push image that is used to create space */
  left:0;
  top:0;
  width:12.61%;
  padding:2%;
}

.list .events .list-item .date-month{
  text-align:center;
  font-size:0.9em;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.list .events .list-item .date-day{
  text-align:center;
  font-size:2em;
  line-height:1.1;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.list .events .list-item .item-info{
  width:73.26%;
  padding:2.37%;
}

.list .events .list-item .feature{
  padding:2.37% 0;
}

.list .events .list-item .feature .item-info{
  width:42.5%; 
  padding:0 2.37%;
}

.list .events .list-item .feature .item-image{
  width:30.13%;
  margin-right:0;
}

.list .events .list-item .feature .item-info h3{
  max-height:2.2em;
  overflow:hidden;
}

/* detail - events */
.detail .events #content-header h1{
  margin:0.2em 0 0;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color:#609191;
}


/* detail - articles */
.author{
  font-style:italic;
  margin:2% 0;
}

/* detail - all */
.primary-detail-text img{
  max-width:100% !important;
  height:auto;
}


/* list - blogs */
.list .blogs .blog-post-wrap{
  margin-top:1px;
}


.list .blogs .blog-image-wrap{
  padding:4.07% 8.47%;
  position:relative;
}

.list .blogs .blog-image-wrap .item-image{
  float:none;
  width:100%;
}

.list .blogs .blog-image-arrow{
  width:100%;
  position:absolute;
  left:0;
  bottom:-6%;
  z-index:11;
}

.list .blogs .list-item{
  margin-top:0;
}

.list .blogs .list-item:hover{ /*blogs get a diffent shadow because they will usually have an image on top*/
  -webkit-box-shadow: 0 6px 2px -2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 6px 2px -2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 2px -2px rgba(0, 0, 0, 0.2);
}

.list .blogs .item-info{
  float:none;
}

.list .blogs .item-info h3{
  display:inline;
}

.list .blogs .item-info .title-line{
  height:1.5em;
  overflow:hidden;
}

.list .blogs .item-info p{
  margin:0;
}


/*******************************************************************
 *   Home Page 
 *******************************************************************/

 
/** Home Logo **/
#home-logo-wrap{
  padding:0 0;
}

img#home-logo{
  width:100%;
}

#home #main{
  background:#ffffff;
}
/** Rotator **/
#rotator{
  margin-bottom:11.65%;
  position:relative;
}


.cycle-slideshow a{
  width:100%;
}

.cycle-slideshow a img{
  width:100%;
}

.cycle-pager{
  margin:0;
  padding:0;
  position:absolute;
  left:0;
  bottom:-17%;
  z-index:501;
  text-align:center;
  width:100%;
}

.cycle-pager span{
  display:inline-block;
  text-indent:-999em;
  background:#ffffff;
  -moz-box-shadow: inset 0px 3px 7px -2px rgba(0,0,0,0.7);
  -webkit-box-shadow: inset 0px 3px 7px -2px rgba(0,0,0,0.7);
  box-shadow: inset 0px 3px 7px -2px rgba(0,0,0,0.7);
  /*background:rgba(255,255,255,0.5);*/
  border-radius:50%; 
  width:12px; /* updated for larger screens in media-query below */
  height:12px; /* updated for larger screens in media-query below */
  margin:0 1.02%;
}
.cycle-pager span.cycle-pager-active{
  -moz-box-shadow: inset 0px 3px 7px -4px #000;
  -webkit-box-shadow: inset 0px 3px 7px -4px #000;
  box-shadow: inset 0px 3px 7px -4px #000;
}

.cycle-pager span:focus{
  outline:0;
}

/** Home Buttons **/
#home-buttons ul{
  list-style:none;
  margin:0;
  padding:0;
}

#home-buttons a{
  display:block;
  padding:5%;
  font-size:1.8em;
  letter-spacing:1px;
  -moz-box-shadow: inset 3px -7px 7px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 3px -7px 7px rgba(0,0,0,0.1);
  box-shadow: inset 3px -7px 7px rgba(0,0,0,0.1);
  margin-bottom:0.4%;
  text-align:center;  
}

/** Footer **/
#footer{
  position:relative;
}

#footer p{
  line-height:1.6;
  margin:0;
}

#bottom-buttons{
  background: rgba(255,255,255,0.2);
  padding:4.375% 0;
}

#bottom-buttons ul{
  position: relative;
  display: block;
  width:85%;
  list-style:none;
  margin:0 auto;
  padding:0;
}

#bottom-buttons ul li{
  display:inline-table;
  margin: 0 0 0 2.25%;
  padding:1.4%;
  background: #e3eded;
  border: 0;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}
#bottom-buttons ul li.social{
  padding:1.4%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border-radius:50%;
}
#bottom-buttons ul li.pos1{
  margin-left:0;
}
#bottom-buttons ul li a{
  color:#75a6a6;
  font-weight:bold;
  display:block;
}
#bottom-buttons ul li.text{
  padding:2.25% 3%;
}
#bottom-buttons ul #ekk-credit,
#bottom-buttons ul li.social{
  width:10.625%;
  padding:1.8%;
}
#ekk-credit a,
#bottom-buttons ul li.social a{
  padding-bottom:100%; /* HACK: calculate the height based on the width. */
  width:100%;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain; 
  position:relative;
}

#bottom-info{
  padding:3%;
  border-bottom:1px solid #414246;
  color:#FFF;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-align:center;
  -moz-box-shadow: 0px 6px 7px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 6px 7px rgba(0,0,0,0.2);
  box-shadow: 0px 6px 7px rgba(0,0,0,0.2);
}
#bottom-buttons ul #ekk-credit{
  background:transparent!important;
  border:none!important;
  margin-left:0;
}
#ekk-credit a{
  background:url('../img/ekk-logo.png') center center no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain; 
}

#ekk-credit img{
  width:100%;
}


/********************************************************************************
 * Colors - One spot to make everything pretty
 ********************************************************************************/
/* body text color */
 body,
.list-text{
 color:#606060;
}
 
/* background color */
body{
  background:#ffffff;
} 
body#home,
body.list{
  background:#3c3c3e;
}

/* Main link/accent color */
h1,
h2,
h3,
h4,
h5,
h6,
a.list-item,
#home-buttons{
  color:#666666;
} 
#footer{
  color:rgba(255, 255, 255, .20);
}
.list .events .list-item .feature .date,
.list .events  a.list-item:hover .date,
.cycle-pager span.cycle-pager-active{
  background:#609191;
}
.list .events .list-item .feature .date,
.list .events  a.list-item:hover .date{
  background:#609191;
}
a,
#bottom-info a{
  color:#75a6a6;
}


/* Main page title on list views */
.list .list-title h1,
.list .list-title h2,
.list .list-title h3,
.list .list-title h4,
.list .list-title h5,
.list .list-title h6{
  color:#ebebeb;
}

/* Gradient behind header */
#header{
  background: #d2dbdb;
  background: -moz-linear-gradient(top,  #d2dbdb 0%, #e3eded 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2dbdb), color-stop(100%,#e3eded)); 
  background: -webkit-linear-gradient(top,  #d2dbdb 0%,#e3eded 100%); 
  background: -o-linear-gradient(top,  #d2dbdb 0%,#e3eded 100%);
  background: -ms-linear-gradient(top,  #d2dbdb 0%,#e3eded 100%); 
  background: linear-gradient(to bottom,  #d2dbdb 0%,#e3eded 100%); 
  /*background: url("../img/nav-bg.jpg") ;*/
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%; 
}

/* Gradient that appears behind lists items and the heading within detail pages */
.list article{
  background: #ebebeb;
}


/* Gradient that appears behind the heading of list pages */
#content-header{

  -moz-box-shadow: inset 0px 3px 4px rgba(0,0,0,0.2);
  -webkit-box-shadow: inset 0px 3px 4px rgba(0,0,0,0.2);
  box-shadow: inset 0px 3px 4px rgba(0,0,0,0.2);

  background: #eaeaea;
}
.list .list-title{

  -moz-box-shadow: inset 0px 3px 4px rgba(0,0,0,0.2);
  -webkit-box-shadow: inset 0px 3px 4px rgba(0,0,0,0.2);
  box-shadow: inset 0px 3px 4px rgba(0,0,0,0.2);

  background: #555453; /* Old browsers */
  background: -moz-linear-gradient(top,  #5b5a58 0%, #525150 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b5a58), color-stop(100%,#525150)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #5b5a58 0%,#525150 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #5b5a58 0%,#525150 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #5b5a58 0%,#525150 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #5b5a58 0%,#525150 100%); /* W3C */
}

/* gradient that appears behind blog images */
.list .blogs .blog-image-wrap{
  background: #c8c8c8; /* Old browsers */  
  background: -moz-linear-gradient(top,  #c8c8c8 0%, #c8c8c8 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8c8c8), color-stop(100%,#c8c8c8)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #c8c8c8 0%,#c8c8c8 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #c8c8c8 0%,#c8c8c8 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #c8c8c8 0%,#c8c8c8 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #c8c8c8 0%,#c8c8c8 100%); /* W3C */

   -moz-box-shadow: inset 0px 0px 15px rgba(0,0,0,0.2);
  -webkit-box-shadow: inset 0px 0px 15px rgba(0,0,0,0.2);
  box-shadow: inset 0px 0px 15px rgba(0,0,0,0.2);
}

/* Dropdown "More" menu */
#menu-more-wrap{
  background:#272727;
  color:#ffffff;
}
#menu-more-wrap.active{
  background:#272727;
}
ul#menu-more-links{
  background-color:#2c2c2c;
}
ul#menu-more-links a{
   color: #ffffff;
}

/* Main menu link color */
ul#menu li a{
   color: #75a6a6;
}

/* Color of button bg near bottom home page */
#home-buttons a{
  /*background: url("../img/white-texture.jpg") repeat;*/
  background:#272727;
  border-bottom:1px solid #ffffff;
  color:#ffffff;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  /*text-transform: uppercase;*/
}

/* Footer bg */
#footer-wrap{
  background-color:#75a6a6;
  color: #ffff;
  border: 0;
}

/* Footer phone number color */
#footer .phone,
#footer a {
  color:#ffffff !important;
}

#bottom-buttons{
  background: #ffffff;
}

#bottom-buttons .text a {
  color: #474747 !important;
}
/* date box text color when hovering over a list item */
.list .list-item .feature .date,
.list .events  a.list-item:hover .date{
  color:#ffffff;
}

/* background color when hovering over a list item */
.list  a.list-item:hover article{
  background:#ffffff;
}

/* Meta information at top of content */
.author,
.label{
  color:#898989;
}

/* background of media buttons */
.button{
  background-color:#598787;
}

.button-row{
  background: -moz-linear-gradient(top,  #749f9f 0%, #537d7d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#749f9f), color-stop(100%,#537d7d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #749f9f 0%,#537d7d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #749f9f 0%,#537d7d 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #749f9f 0%,#537d7d 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #749f9f 0%,#537d7d 100%); /* W3C */
}

/* foreground of media buttons */
.button a{
  color:#ffffff;
}

/* table header */
table th{
  background-color:rgba(0,0,0,.2);
}

/********************************************************************************
 * Media queries for responsive design github.com/h5bp/mobile-boilerplate/wiki/The-Style
 ********************************************************************************/
/* Styles for desktop and large screen ----------- */
/*styles for 600px and up! using ems to conteract zooms from http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/*/
@media only screen and (min-width: 37.5em) { /*originally it was 800  600px = 37.5ems @ 16px/1em */
  /* Styles */
  body {
	font-size: 24px;
  }  
  
  #bottom-buttons ul li{
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
  }  
  
  .cycle-pager span{
	height:30px;
	width:30px;
  }
  
}/*/mediaquery*/


/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles - for future use? */
}

/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* prevent callout */
.nocallout {-webkit-touch-callout: none;}

/* A hack for HTML5 contenteditable attribute on mobile */
textarea[contenteditable] {-webkit-appearance: none;}

/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if they have been set as display: none */
.gifhidden {position: absolute; left: -100%;}

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

.accordion-menu-content img { max-width: 100% !important; }
.accordion-menu-content .table { width: 100%;}
.accordion-menu-content .table .row { display: -webkit-box; display: flex; flex-wrap: wrap; width: 100%; -webkit-box-pack: justify; justify-content: space-between;}
.accordion-menu-content .table .image { -webkit-box-flex: 0; flex: 0 0 30%; max-width: 30%; }
.accordion-menu-content .table .image img { position: relative; display: block; width: 100%; height: auto; }
.accordion-menu-content .table .text { -webkit-box-flex: 0; flex: 0 0 65%; max-width: 65%;}
.accordion-content ul {list-style: none; margin: 0 !important; padding: 0;}
.accordion-content li{list-style: none;margin: 0 0 8px 0 !important; padding: 0;}
.accordion-content li h2.ui-state-default{background:#ededed url(../img/accordion-more.jpg) center right no-repeat;}
.accordion-content li h2.ui-state-active{background:#ededed url(../img/accordion-more-on.jpg) center right no-repeat;}
.accordion-content li h2{font-size:15px;margin:0;padding:12px 28px 12px 12px;line-height:28px;}
.accordion-content li h2 a{color:#4c7c7c;}
.accordion-content li h2 a span{font-size:14px;color:#5b5a58;font-weight:normal;}
.accordion-content li span#email{margin:0 10px;display:inline-block;z-index:99;}
.accordion-content li ul{background-color:#f6f6f6;padding:20px;}
.accordion-content li ul li{margin:0;}