/*
Company:	
File:		main.css - This contains all the main styles for the website.
Docs:		File is based on html5boilerplate and YUI3 Fonts CSS.
			Learn more:
			http://html5boilerplate.com/docs/css/
			http://yuilibrary.com/yui/docs/cssfonts/

All the styles are separated into the following groups:
HTML, Body - for the html and body tags
Layout - styles that define the layout of the site
Common Text Styles - Styles for text
Default Headings - headings like h1, h2, etc
Default Lists - unordered and ordered lists
Nav - navigation bar
Forms - html forms
Default Links - links
Media Queries - media queries
Non-Semantic Helper Classes - helper styles
Print Styles - default print styles
*/

/* @group HTML, Body */
html {
	background-color: #ebeae9;
}
body {
	padding: 0 0 25px 0;
}
/* @end */

/* @group Layout */
/* Container */
div.container {
	width: 904px;
	overflow: hidden;
	position: relative;
	z-index: 10;
	margin: 0 auto 10px auto;
	padding: 0 52px 32px 51px;
	background: #FFF url(../images/bg-container.jpg) top left no-repeat;
	-moz-box-shadow:    0px 0px 68px #dedddc;
	  -webkit-box-shadow: 0px 0px 68px #dedddc;
	  box-shadow:         0px 0px 68px #dedddc;
}

body.home div.container {
	padding: 0 52px 50px 51px;
}

/* Head Utility */
div.hd-util {
	width: 664px;
	margin: 0 auto;
	padding: 20px 0 18px 343px;
}

/* Head Inputs */
div.hd-input {
	background-color: #d1d1d0;
	border: 1px solid #f6f6f5;
	width: 222px;
	padding: 3px 0 4px 0;
	position: relative;
	z-index: 20;
}

div.hd-input .txt {
	background-color: #d1d1d0;
	border: none;
	width: 184px;
	padding: 0 0 0 13px;
	color: #000000;
	font-size: 93%;
	display: block;
	float: left;
	height: 23px;
	line-height: 23px;
}

div.hd-input .btn {
	background-color: #ffcd00;
	border: none;
	color: #FFF;
	width: 22px;
	height: 23px;
	display: block;
	float: left;
}

div.hd-input .btn:hover {
	background-color: #d22630;
}

/* Get Email Updates */
div.get-email-updates {
	float: left;
	margin: 0 11px 0 0;
}

/* Search Servlife */
div.search-servlife {
	float: left;
}

/* Head */
/*Logo */
div.logo {
	width: 288px;
	float: left;
}

div.logo h2 {
	margin: 0;
	font-size: 100%;
}

div.logo h2 a:link, div.logo h2 a:visited {
	display: block;
	width: 288px;
	height: 143px;
	text-indent: -9999px;
	background: url(../images/servlife-logo.png) top left no-repeat;
}

div.logo h2 a:hover {
	background: url(../images/servlife-logo.png) 0 -143px no-repeat;
}

/* Head Top Side */
div.hd-top-side {
	width: 570px;
	float: right;
	padding: 0 0 20px 0;
}

/* Mission Text */
div.mission-text {
	margin: 22px 0 23px 0;
	font-family: 'Open Sans Condensed', sans-serif;
}

div.mission-text h2 {
	background-color: #000;
	color: #FFF;
	font-size: 232%;
	margin: 0;
	padding: 5px 13px;
	float: right;
	font-weight: normal;
}

div.mission-text h3 {
	clear: both;
	float: right;
	background-color: #d22630;
	color: #FFF;
	padding: 3px 11px;
	font-weight: normal;
	font-size: 138.5%;
	margin: 0;
}

/* Head Social Icons */
div.hd-social-icons {
	position: relative;
	top: 5px;
	left: -8px;
	z-index: 10;
}

div.hd-social-icons ul {
	padding: 0;
	margin: 0;
	float: right;
}

div.hd-social-icons ul li {
	float: left;
	list-style: none;
	padding: 0 0 0 8px;
}

div.hd-social-icons ul li a:link,
div.hd-social-icons ul li a:visited {
	display: block;
	float: left;
}

/* Body */

/* Homepage Columns */
div.item-columns {
	padding: 0;
}

body.home div.item-columns {
	padding: 0 0 24px 0;
}

div.item-columns div.item {
	border-bottom: none;
	padding: 25px 28px 0px 30px;
}

body.home div.item-columns div.item {
	border-bottom: 1px solid #bdbdbd;
	padding: 25px 28px 10px 30px;
}



div.item-columns div.item:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

div.item-columns div.item {display: inline-block;}

/* Hides from IE-mac \*/
* html div.item-columns div.item {height: 1%;}
div.item-columns div.item {display: block;}
/* End hide from IE-mac */

div.item-columns div.item div.item-image {
	width: 65px;
	height: 69px;
	overflow: hidden;
	float: left;
	margin: 0 20px 0 0;
}

div.item-columns div.item div.item-image img {
	width: 65px;
	height: auto;
}

div.item-columns div.item div.item-text {
	width: 306px;
	float: left;
	min-height: 125px;
	height:auto !important;
	height: 125px;
}

div.item-columns div.item h3 {
	color: #000;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 215%;
	margin: 0;
	font-weight: normal;
}

div.item-columns div.item p.date {
	line-height: 1em;
	margin: 0 0 6px 0;
}

div.item-columns div.item p {
	font-size: 93%;
	line-height: 1.6em;
}

div.item-columns div.item h3 a:link,
div.item-columns div.item h3 a:visited {
	color: #000;
}

div.item-columns h2.section-heading {
	background-color: #959595;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: normal;
	color: #FFF;
	padding: 10px 0 10px 30px;
	font-size: 182%;
	margin: 0;
	text-transform: uppercase;
}

div.item-columns h2.section-heading a:link,
div.item-columns h2.section-heading a:visited {
	color: #FFF;
}

/* Homepage Slideshow */
div.homepage-slideshow {
	height: 336px;
	position: relative;
	margin: 0 0 11px 0;
}

div.homepage-slideshow div.slides {
	border: none;
	background-color: transparent;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

li.slide {
	position: relative;
	height: 336px;
}

div.slide-text {
	position: absolute;
	z-index: 20;
	background: url(../images/bg-slide-text.png);
	top: 0px;
	left: 0px;
	width: 230px;
	height: 306px;
	color: #e9c9c7;
	padding: 30px 28px 0 30px;
}

div.slide-text h2 {
	color: #FFF;
	text-transform: uppercase;
	line-height: 1em;
	font-size: 325%;
	margin: 0 0 25px 0;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: normal;
}

div.slide-text p.learn-more {
	position: absolute;
	bottom: 14px;
	margin: 0;
	right: 28px;
	z-index: 200;
	font-family: 'Open Sans Condensed', sans-serif;
}

div.slide-text p.learn-more:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

div.slide-text p.learn-more {display: inline-block;}

/* Hides from IE-mac \*/
* html div.slide-text p.learn-more {height: 1%;}
div.slide-text p.learn-more {display: block;}
/* End hide from IE-mac */

div.slide-text p.learn-more a:link,
div.slide-text p.learn-more a:visited {
	background-color: #FFCD00;
	color: #060606;
	font-size: 138.5%;
	text-transform: uppercase;
	padding: 0 16px;
	height: 35px;
	line-height: 35px;
	display: block;
	text-decoration: none;
}

/* Slide Video */
div.slide-video {
	position: absolute;
	top: 0;
	left: 288px;
}

.video-slide-container div.slide-text {
	background-color: #D22630;
}

div.slide-image {
	position: relative;
	z-index: 15;
}

/* Slidenav */
.flex-control-nav {
	position: absolute;
	bottom: 14px;
	left: 28px;
	z-index: 40;
	width: 90px;
}

.flex-control-nav li {
	float: left;
}

.flex-control-nav a,
.flex-control-nav a:link,
.flex-control-nav a:visited {
	width: 11px;
	height: 11px;
	display: block;
	text-indent: -9999px;
	background-color: #FFF;
	vertical-align: bottom;
	margin: 0 4px 0 0;
	cursor: pointer;
}

.flex-control-nav a.flex-active,
.flex-control-nav a:hover {
	background-color: #FFCD00;
}

/* Latest News */
div.latest-news,
div.featured-story {
	width: 449px;
	float: left;
}

div.latest-news {
	margin: 0 6px 0 0;
}

/* Featured Photo */
div.featured-photo {
	position: relative;
	width: 904px;
	height: 221px;
}

div.featured-photo div.imagery {
	position: relative;
	z-index: 30;
}

div.featured-photo div.text {
	position: absolute;
	z-index: 40;
	color: #FFF;
	bottom: 22px;
	left: 30px;
	padding: 11px 13px 11px 13px;
	background: url(../images/bg-featured-photo.png);
	width: 334px;
}

div.featured-photo div.text h3 {
	color: #FFCD00;
	font-size: 138.5%;
	margin: 0 0 6px 0;
}

div.featured-photo div.text p {
	font-size: 108%;
}

div.featured-photo div.text span.view-gallery {
	margin: 0 0 0 10px;
}

div.featured-photo div.text span.view-gallery a:link,
div.featured-photo div.text span.view-gallery a:visited {
	background-color: #000;
	color: #FFF;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0 11px;
	font-size: 85%;
}

div.featured-photo div.text span.view-gallery a:hover {
	background-color: #FFCD00;
	color: #060606;
}

/* Page Share - Social Share Buttons */
div.page-share {
	float: right;
	font-size: 85%;
	font-weight: bold;
	position: relative;
	top: 10px;
}

div.page-share ul {
	padding: 0;
	margin: 0;
	position: relative;
	left: -11px;
}

div.page-share ul li {
	float: left;
	list-style: none;
	width: 105px;
	margin: 0 4px 0 0;
}

div.page-share ul li a:link,
div.page-share ul li a:visited {
	display: block;
	background-color: #FFCD00;
	padding: 6px 0 6px 8px;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
}

div.page-share ul li.share-tweet a:link,
div.page-share ul li.share-tweet a:visited {
	background: #FFCD00 url(../images/bg-page-share-twitter.png) top right no-repeat;
}

div.page-share ul li.share-fb a:link,
div.page-share ul li.share-fb a:visited {
	background: #FFCD00 url(../images/bg-page-share-fb.png) top right no-repeat;
}

div.page-share ul li a:hover {
	background-color: #d22630!important;
	color: #FFF!important;
}

/* Page Banner */
div.page-banner {
	position: relative;
	width: 904px;
	position: relative;
	left: -29px;
	margin: 0 0 15px 0;
	height: 198px;
}

div.page-banner img {
	position: relative;
	z-index: 10;
	display: block;
}

div.page-banner h2 {
	position: absolute;
	bottom: 19px;
	left: 0px;
	text-transform: uppercase;
	font-size: 277%;
	z-index: 15;
	background: url(../images/bg-page-banner.png);
	color: #FFF;
	margin: 0;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: normal;
	padding: 0 86px 0 28px;
}

/* Breadcrumbs */
div.page-container div.breadcrumbs p {
	font-size: 85%;
}

div.breadcrumbs a:link,
div.breadcrumbs a:visited {
	color: #000;
}

/* Page Container */
div.page-container {
	padding: 0 25px 10px 29px;
	min-height: 490px;
	height:auto !important;
	height: 490px;
}

/* Footer */

/* Footer Top Content */
div.ft-top-content {
	width: 927px;
	margin: 0 auto;
	background-color: #FFF;
	padding: 20px 0 24px 80px;
	position: relative;
	z-index: 20;
}

div.ft-top-content h3 {
	color: #000;
	font-size: 195%;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 1em;
}

div.ft-top-content div.our-work {
	width: 301px;
	float: left;
	margin: 0 155px 0 0;
}

div.ft-top-content div.our-work h3 {
	margin: 0 0 20px 0;
}

div.ft-top-content div.our-work p {
	font-size: 93%;
	line-height: 1.6em;
}

div.ft-top-content div.latest-tweet {
	width: 415px;
	float: left;
}

div.ft-top-content div.latest-tweet h3 {
	margin: 0 0 11px 0;
}

div.latest-tweet div.tweet-icon {
	width: 95px;
	float: left;
	background: url(../images/bg-tweet-icon.gif) top right no-repeat;
	padding: 20px 0 0 0;
}

div.latest-tweet div.tweet-icon p {
	margin: 0;
	position: relative;
	top: -3px;
	width: 85px;
}

div.latest-tweet div.tweet-icon p a:link,
div.latest-tweet div.tweet-icon p a:visited {
	background-color: #d22630;
	color: #FFF;
	text-transform: uppercase;
	display: block;
	padding: 4px 0;
	text-align: center;
	text-decoration: none;
	font-size: 116%;
	font-family: 'Open Sans Condensed', sans-serif;
}

div.latest-tweet div.tweet-icon p a:hover {
	background-color: #FFCD00;
	color: #060606;
}

div.latest-tweet div.tweet-content {
	width: 283px;
	float: left;
	background-color: #d9d9d6;
	padding: 15px 20px 15px 17px;
	font-size: 93%;
}

div.latest-tweet div.tweet-content a:link,
div.latest-tweet div.tweet-content a:visited {
	color: #d22630;
}

div#ft {
	width: 927px;
	margin: 0 auto;
	padding: 43px 0 1px 80px;
}

/* Footer Left Column */
div.ft-info {
	width: 294px;
	float: left;
}

div.ft-info p {
	font-weight: bold;
	font-size: 108%;
	color: #a09f9f;
	margin: 0 0 15px 0;
}

div.ft-logo {
	margin: 0 0 20px 0;
}

/* Footer Navigation */
div.ft-nav-container {
	width: 633px;
	float: left;
	padding: 5px 0 0 0;
}

div.ft-nav {
	font-size: 108%;
	font-weight: bold;
}

div.ft-nav-secondary {
	font-weight: normal;
}

div.ft-nav ul {
	margin: 0;
	padding: 0 0 9px 0;
}

div.ft-nav ul:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

div.ft-nav ul {display: inline-block;}

/* Hides from IE-mac \*/
* html div.ft-nav ul {height: 1%;}
div.ft-nav ul {display: block;}
/* End hide from IE-mac */

div.ft-nav ul li {
	float: left;
	background: url(../images/bg-ft-nav.png) center right no-repeat;
	padding: 0 11px 0 0;
	margin: 0 8px 0 0;
	list-style: none;
}

div.ft-nav ul li:last-child {
	background: none;
	margin: 0;
	padding: 0;
}

/* Duplicate Rule - older versions of IE ignore entire rules which use modern pseudo selectors */
div.ft-nav ul li.last {
	background: none;
	margin: 0;
	padding: 0;
}

div.ft-nav ul li a:link,
div.ft-nav ul li a:visited {
	color: #5e5e5e;
}

/* @end */

/* @group Common Text Styles */
span.tags {
	font-weight: bold;
}

span.tags a:link,
span.tags a:visited {
	font-weight: normal;
}

div.page-container p {
	font-size: 108%;
	line-height: 1.4em;
	margin: 0 0 1.4em 0;
}

div.page-title {
	padding: 0 0 13px 0;
}

div#bd div.page-container div.page-title h2 {
	font-family: 'Open Sans Condensed', sans-serif;
    font-size: 315%;
	margin: 0 0 4px 0;
	line-height: 1em;
	font-weight: normal;
}

div.page-title p {
	font-size: 85%;
	margin: 0;
}

span.date {
	font-style: italic;
}

span.read-more a:link,
span.read-more a:visited {
	background-color: #d22630;
	color: #FFF;
	text-decoration: none;
	font-size: 85%;
	text-transform: uppercase;
	padding: 0 8px;
	font-weight: bold;
}

span.read-more a:hover {
	background-color: #FFCD00;
	color: #060606;
}
	
/* @end */

/* @group Default Headings */
div.page-container h1,
div.page-container h2,
div.page-container h3,
div.page-container h4,
div.page-container h5,
div.page-container h6 {
 	font-weight: normal;
	margin: 0;
	font-family: 'Open Sans Condensed', sans-serif;
	margin: 0 0 .45em 0;
}

div.page-container h1 {font-size: 330%;}
div.page-container h2 {font-size: 300%;}
div.page-container h3 {font-size: 270%;}
div.page-container h4 {font-size: 240%;}
div.page-container h5 {font-size: 210%;}
div.page-container h6 {font-size: 180%;}

/* @end */

/* @group Default Lists */
/* Make default ul and ol styles to match p styles */
div.page-container ul li,
div.page-container ol li {
	font-size: 108%;
	line-height: 1.4em;
}

div.page-container ul,
div.page-container ol {
	margin-bottom: 1.4em;
}

/* @end */

/* @group Nav */
div#nav {
	font-family: 'Open Sans Condensed', sans-serif;
	margin: 0 0 11px 0;
	background: url(../images/bg-nav-hover.png) -9999px -9999px no-repeat;
}

div#nav ul {
	margin: 0;
	padding: 0;
	background: url(../images/bg-nav-what-we-do-hover.png) -9999px -9999px no-repeat;
}

div#nav ul:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

div#nav ul {display: inline-block;}

/* Hides from IE-mac \*/
* html div#nav ul {height: 1%;}
div#nav ul {display: block;}
/* End hide from IE-mac */

div#nav ul li {
	float: left;
	display: inline;
	list-style: none;
	width: 146px;
	margin: 0 8px 0 0;
}

div#nav ul li.donate {
	margin: 0;
}

div#nav ul li a {
	display: block;
	background: url(../images/bg-nav.png);
	text-transform: uppercase;
	height: 45px;
	text-align: center;
	line-height: 45px;
	text-decoration: none;
	color: #000;
	font-size: 182%;
}

div#nav ul li a:hover {
	background: url(../images/bg-nav-hover.png);
}

div#nav ul li.donate a:link,
div#nav ul li.donate a:visited {
	background-image: none;
	background-color: #FFCD00;
}

div#nav ul li.donate a:hover {
	background-color: #d22630;
	color: #FFF;
}

div#nav ul li.what-we-do {width: 288px;}

div#nav ul li.what-we-do a:link,
div#nav ul li.what-we-do a:visited {
	text-align: left;
	padding: 0 0 0 28px;
	background: url(../images/bg-nav-what-we-do.png) top right no-repeat;
}

div#nav ul li.what-we-do ul a:link,
div#nav ul li.what-we-do ul a:visited {
	padding: 0;
	background: none;
}

div#nav ul li.what-we-do a:hover,
div#nav ul li.what-we-do:hover a {
	background: url(../images/bg-nav-what-we-do-hover.png) top right no-repeat;
}

/* Nav Drop Down */
div#nav ul ul {
	padding: 10px 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	background: url(../images/bg-nav-drop.png);
	position: absolute;
	left: -999em;
	z-index: 500;
	width: 288px;
}

div#nav ul li ul li,
div#nav ul li.what-we-do ul li {
	background-image: none;
	width: auto;
	display: block;
	float: none;
	margin: 0;
	padding: 0;
	list-style: none;
}
div#nav ul li ul li a:link,
div#nav ul li ul li a:visited,
div#nav ul li.what-we-do ul a:link,
div#nav ul li.what-we-do ul a:visited {
	text-align: left;
	line-height: 1em;
	padding: 5px 0 5px 28px;
	font-size: 160%;
	height: auto;
	width: auto;
	margin: 0;
	display: block;
	font-weight: normal;
}
div#nav ul li:hover ul, div#nav ul li.sfhover ul {
	left: auto;
}
div#nav ul li ul a:hover {
	background-color: #58595b!important;
	color: #FFF;
}


/* 3rd Level Dropdown */
div#nav ul ul ul {
	position: absolute;
	left: -999em!important;
	margin: -2em 0 0 5em;
	background-color: #456595;
}
div#nav ul ul ul li {

}
div#nav ul li ul li:hover ul, div#nav ul li ul li.sfhover ul {
	left: auto!important;
}
div#nav ul li ul li ul li a {
	white-space: nowrap;
}
div#nav ul li ul li ul li:hover a, div#nav ul li ul li ul li.sfhover a {

}


/* Fix for sticky IE drop downs */
div#nav ul li:hover, div#nav ul li.sfhover {position: static;}













	
/* Secondary Nav */
div.secondary-nav {
	font-family: 'Open Sans Condensed', sans-serif;
}

div.secondary-nav ul {
	margin: 0;
	padding: 0;
	float: right;
	text-transform: uppercase;
}

div.secondary-nav ul:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

div.secondary-nav ul {display: inline-block;}

/* Hides from IE-mac \*/
* html div.secondary-nav ul {height: 1%;}
div.secondary-nav ul {display: block;}
/* End hide from IE-mac */

div.secondary-nav ul li {
	list-style: none;
	float: left;
	padding: 0 0 0 5px;
}

div.secondary-nav ul li a:link,
div.secondary-nav ul li a:visited {
	background-color: #58595b;
	color: #FFF;
	font-size: 138.5%;
	display: block;
	padding: 2px 6px;
	text-decoration: none;
}
	
div.secondary-nav ul li a:hover {
	background-color: transparent;
	background-image: url(../images/bg-nav.png);
	color: #000;
}	

/* @end */

/* @group Forms */
	
/* @end */

/* @group Default Links - link visited hover active */
a:link, a:visited {
	text-decoration: none;
	color: #D22630;
}
a:hover, a:active {
	text-decoration: underline;
}
/* @end */

/* @group Media Queries */
@media only screen and (min-width: 35em) {
	/* Style adjustments for viewports that meet the condition */
}
/* @end */

/* @group Non-Semantic Helper Classes */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.clear { clear: both; }
/* @end */

/* @group Print Styles */
@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !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; }
}
/* @end */