/* YP Framework for v6 - v1*/

/* ------------------------------------------ */
/*
TABLE OF CONTENTS 
 1.HEADINGS 
 2.TYPOGRAPHY 
 3.LINKS 
 4.WRAPPERS and CONTAINERS 
 5.HEADER AREAS 
 6.CONTENT AREAS AND CALLOUTS 
 7.FOOTER AREA, UTILITY NAV, AND COPYRIGHT 
 8.MAIN NAVIGATION/MENU FOR DESKTOP 
 9.MAIN NAVIGATION/MENU FOR MOBILE DIVICES 
 10.MOBILE QUICK NAV BUTTONS 
 11. WIDGET BUTTONS, BACK TO TOP and SITE MAP 
 12. MEDIA QUERIES  
 */
/* ------------------------------------------ */

@import url("gfx/wp-skeleton.css"); 

body {
	margin: 0;
	font-family: Verdana, Geneva, sans-serif; /* Set default font styles here */
}

	body { 
		/* Set background image POSITION and REPEAT here! */
		background: #ffffff;
	}
		
.skinBg { 
}
	
	
#header-1 {
	width: 100%;
	display: inline-block;
	position:relative;
	}	
	
/* ------------------------------------------ */
/* 1.HEADINGS */
/* ------------------------------------------ */
h1,
h2,
h3, 
h4, 
h5, 
h6  {
	font-weight: normal;
	margin-bottom: 5px;
	line-height: 120%;
}

h1 { 
	font-size: 260%; 
	color: #F3002E;
}
h2 { 	
	font-size: 200%; 
}
h3 {	
	font-size: 180%;
	margin: 0 0px 15px 15px; 
}
h4 { 	
	font-size: 160%; 
}
h5 { 
	font-size: 140%;  
}
h6 { 
	font-size: 120%;  
}

/* Jobs Module Heading */
#jobs-module li .jobs-title a, .jobs-apply a, .jobs-title { /* Add the same font color as your content headings */
	font-size: 28px; 
	line-height: 1;
	}

/* if you have white or light color headings plese add a darker color below for the accordion and tabs widget */
.ui-widget h1, .ui-helper-reset h1, .diy-f-spot h1 {} 
.ui-widget h2, .ui-helper-reset h2, .diy-f-spot h2 {} 
.ui-widget h3, .ui-helper-reset h3, .diy-f-spot h3 {} 
.ui-widget h4, .ui-helper-reset h4, .diy-f-spot h4 {} 
.ui-widget h5, .ui-helper-reset h5, .diy-f-spot h5 {} 
.ui-widget h6, .ui-helper-reset h6, .diy-f-spot h6 {} 

.page-heading {
	margin-left: 15px;
	margin-bottom: 15px;
}

/* ------------------------------------------ */
/* 2.TYPOGRAPHY */
/* ------------------------------------------ */
p, ol, ul, dl, address { /* bottom margin only */
	margin-bottom: 15px; 
}

#content { /* place font size, family, color and line height here */
	font-size: 14px; 
	color: #737373;
	line-height: 150%;
	font-family: Verdana, Geneva, sans-serif;
	}
	
.ui-widget, .ui-helper-reset { /* this is for the tabs and accordion widgets. use everything from content except font color */
	font-size: 100%;
	}
	
.diy-f-spot { /* for dark background sites, adjust font color to a darker color for the spotlight widgets */

}	


/* style the blockquote to match the site design */
blockquote  { 
	margin: 0 0 15px 25px; 
	padding-left: 24px; 
	border-left: 3px solid #282828;
	font-size: 130%;
	line-height: 150%;
	font-style: italic; 
	font-weight: normal;
}



blockquote:before, 
blockquote:after, 
q:before, 
q:after {
	content: '';
	content: none; 
}


hr { 
	border: 1px solid #ddd; 
	clear: both; 
	margin: 10px 0 10px; 
	height: 0; 
}

/* Events and Jobs Module HR */
.Events_item, #jobs-module ul li.jobs-single-item {
    border-bottom: 1px solid #CCC;
}

/* ------------------------------------------ */
/* 3.LINKS */
/* ------------------------------------------ */
a, 
a:visited {
	outline: none;
	color: #F3002E; 
	text-decoration: underline;
}

a:hover { 
	outline: none;
	color: #000;
}

a:active, 
a:focus { 
	outline: none;
	color: #F3002E;
}

/* if you have white or light color links plese add a darker color below for the accordion and tabs widget */
.ui-widget a, 
.ui-widget a:visited,
.ui-helper-reset a,
.ui-helper-reset a:visited,
.diy-f-spot a,
.diy-f-spot a:visited {
	color: #fb0000;
}

.ui-widget a:hover, 
.ui-helper-reset a:hover,
.diy-f-spot a:hover, 
.diy-f-spot a:hover {
	color: #000000;
}

.ui-state-default a:hover {
	color: #555555;
}


/* ------------------------------------------ */
/* 4.WRAPPERS and CONTAINERS*/	
/* ------------------------------------------ */
#wrapper-header, #wrapper-menu, #wrapper-content, #wrapper-footer, #wrapper-footer-nav, #wrapper-subscribe, #wrapper-slider, #wrapper-copyright { 
	width: 100%;
	position: relative;
}

#wrapper-header {
	display: block;
	line-height: 0;
	padding: 1% 0;
	background: #f3002e;
	
}

#wrapper-menu {
}

#wrapper-content {
}

#wrapper-slider {
	border-top: 15px solid #D6E4E6;
	margin: 5px 0 0 0;
}

#wrapper-subscribe { background: #d6e4e6;
color: #000;
padding: 15px 0;
font-size: 90%;
}

#wrapper-footer { background: #4da859;
color: #737373;
display: inline-block;
} 

#wrapper-footer-nav {
	line-height:normal;
color: #737373;
}

#wrapper-copyright {
	display: inline-block;
color: #737373;
font-size: 65%;
}

/* ------------------------------------------ */
/* 5.HEADER AREAS */	
/* ------------------------------------------ */

/* ---------------HEADER AREA 1--------------- */

#header { background: #f3002e;}

#logo-slogan {
	padding: 0px 0px;
	text-align: left;
	font-size: 50px;  /* change font size here for logo and slogan */
	line-height: 1.1;
}

.logo {} /* add margin or padding here */

/* logo size fail safe */
.logo img {
  max-height: 300px;
  max-width: 550px;
}


a.logo, a.logo div {
	text-decoration: none;
	text-transform: uppercase;
	font-size: 100%;
	color: #fff;
}

/* Slogan */
.slogan {
	font-size: 40%;
	line-height: 130%;
	}

.slogan, .slogan div { 
}

/* CTA and Phone Number */
#phone-cta {
	padding: 15px 0px;
	text-align: center;
	background-color: #333;
	font-size: 40px;
	line-height: 110%;
	color: #fff;
	}

/* hide mobile elements by default */
#m-phone-cta {
	display: none;
	padding: 15px 0px;
	text-align: center;
	background-color: #333;
	font-size: 25px;
	line-height: 110%;
	color: #fff;
}		
	
.tagline2 { 	
	font-size: 80%;  /* add font sizes here */
	}	
	
.tagline2, .tagline2 div {
	display: inline;
	max-width: 95%;
	margin:0 auto;
}

.phone-number {
	display: inline-block;
	font-size: 80%;  /* add font sizes here */
	}

.phone-number, .phone-number a {
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

/* Header Image */
#header-image-container { 
	position: relative;
	line-height: 0px;
}

/* WP wraps #siteMainDynHeaderImage1 with #header-image-wrapper-1 by defult but removes it once the image is replaced */
div#header-image-wrapper-1 {} 

img#siteMainDynHeaderImage1 { 
	width: 100%; 
	height: auto;
}


/* ------------------------------------------ */
/* 6.CONTENT AREAS AND CALLOUTS */	
/* ------------------------------------------ */
#content {
	padding:15px 0px; 
	min-height:100px;
}


/* background to the address, business hours, and payment*/
.address-payments { 
	background: #ccc;	
}

/* background to the sidebar form*/
.address-payments.sidebar { 
	background: #ccc;	
}


/* ------------------------------------------ */
/* 7.FOOTER AREA, UTILITY NAV, AND COPYRIGHT */	
/* ------------------------------------------ */


span.footerText {
	display: none;	
}

#footerContent {
	margin: 0 10px;
}

#footerContent div {
	margin: 10px 0;
}

#mySocialList {
	margin: 20px 10px 0;
}


/* Mirror Menu Module for Utility Nav */
ul#mirror-menu-module {
	margin: 20px 0;
	padding: 0;
	text-align: center;
}
ul#mirror-menu-module li {
	display: inline-block; /* remove and add float if you want the text left justified */
	font-size: 12px;
	line-height: 18px;
	padding: 5px 10px;
}
ul#mirror-menu-module a {
	color: #fff;
	text-decoration: none; 
}
ul#mirror-menu-module a:hover {
	text-decoration: underline; 
}


/* YP Copyright */
div#copyright {
	font-size: 11px;
	line-height: 14px;
	color: #fff;
}

div#copyright a {
	color: #fff;
}

div#copyright a:hover {
	color: #ccc;
}



/* ------------------------------------------ */
/* 8.MAIN NAVIGATION/MENU FOR DESKTOP */
/* ------------------------------------------ */

/* hide mobile elements in "desktop" view */
#m-menu { display:none; }
#navTab {display:none;}

/* Main Navigation */
#menu {
	position: relative;
	z-index: 400;
	position: relative;
    top: 17px;
	
}

ul#nav {
	margin: 0;
	padding: 0;
	width: auto;
	float: right;
}

	/* Start First Level Nav Items */
	ul#nav li {
		float: left;
		padding: 0;
		list-style: none;
		list-style-image: none;
	}
	
	ul#nav li.last { }
	ul#nav li.first { }
	ul#nav li a {
		font-size: 20px;
		text-decoration: none;
		line-height: 50px; 
		display: block;
		text-align: left;
		
		text-transform: uppercase;
		color: #fff;
		transition: .3s;
		padding: 8px 30px;
	}
	
	ul#nav li.current a {
		color: #fff;
		background: #000;
	}
	
	ul#nav li a:hover {
		color: #fff;
		background: #000;
		
	}
	
	ul#nav li.first a {}
	
	ul#nav li.last a {}
	
	/* End First Level Nav Items */		
	
		/* Start Second Level Nav Items */
		ul#nav li ul { /* second-level lists */
			position: absolute;
			left: -999em; /* using left instead of display to hide menus because display: none isnt read by screen readers */
			margin: 0px;
			padding: 0px;
			background-color: #999;
			
		}
		
		ul#nav li ul li {
			float:left;
			clear:left;	
			}
		
		ul#nav li ul li a, 
		ul#nav li.current ul li a { /* second level dropdown buttons */
			width: 200px;
			border-bottom: 1px solid #ccc;
			background-color: transparent;
			text-transform: none;
			color: #fff;
			font-size: 12px;
			line-height: 16px;
			padding: 7px 10px;
		}
		
		ul#nav li ul li a:hover, 
		ul#nav li.current ul li a:hover,
		ul#nav li ul li.current a { /* second level dropdown button hover state */	
			background: red;
			color: #fff;
		}
		
		/* first and lasts in drop down */
		ul#nav li ul li.first a, 
		ul#nav li.current ul li.first a { }
		ul#nav li ul li.last a, 
		ul#nav li.current ul li.last a { }
		
		/* End Second Level Nav Items */
		
			/* Start Third Level Nav Items */
			ul#nav li ul li ul {
			  margin: -31px 0 0 220px;
			  background-color: #aaa;
			}
			
			ul#nav li ul li ul li a, 
			ul#nav li.current ul li ul li a { /* third level dropdown buttons */
				
			}
			
			ul#nav li ul li ul li a:hover, 
			ul#nav li.current ul li ul li a:hover { /* third level dropdown button hover state */						
				
			}
			
			/* first and lasts in drop down */
			ul#nav li ul li ul li.first a, 
			ul#nav li.current ul li ul li a { }
			ul#nav li ul li ul li.last a, 
			ul#nav li.current ul li ul li a { }
			
			/* End Third Level Nav Items */
			
				ul#nav li:hover ul li ul,
				ul#nav li:hover ul li ul li ul,
				ul#nav li.sfhover ul li ul,
				ul#nav li.sfhover ul li ul li ul {
					left: -999em;
				}
				 
				ul#nav li:hover ul,
				ul#nav li ul li:hover ul,
				ul#nav li ul li ul li:hover ul,
				ul#nav li.sfhover ul,
				ul#nav li ul li.sfhover ul,
				ul#nav li ul li ul li.sfhover ul { /* lists nested under hovered list items */
					left: auto;
				}

			
/* ------------------------------------------ */				
/* 9.MAIN NAVIGATION/MENU FOR MOBILE DIVICES */	
/* ------------------------------------------ */			
@media only screen and (max-width: 767px) {				
  /* hide desktop elements in "mobile" view */
  #menu { display:none; }  
  #wrapper-menu { display:none;}
  

  a#navTab { /* mobile menu open button */
	display: block;
	width: 100%;
	height: 30px;
	cursor: pointer;
	margin: 6px auto;
	z-index: 800;
	background-image: url("gfx/icon-menu.png");
	background-repeat: no-repeat;
	background-position: top center;
	z-index: 900;
  }	
		
  a#navTab:hover { } 
  a#navTab.active {
	background-position: bottom center;
  }
  
  #m-wrapper-menu {  
	display: inline-block;
	width: 100%;
	text-align: center;
	background: #F3002E; /* Old browsers */
	background: #F3002E; 

	-moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6);
	-webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6);
	box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6);
  }	
  
  #m-menu {
	height: auto;
	overflow: visible;
	padding: 0;
	position: relative;
	width: 100%;
	z-index: 800;
	display: block;
	margin: 0 auto;
	line-height:0;
  }	
  
  #m-menu-content {
	display: none; /* hides the menu by default */
  }	
		
  #m-menu ul#nav {
	margin: 0;
	padding: 0;
	width: auto;
	background: #F3002E;
	box-shadow: 0px 2px 4px rgba(000,000,000,0.5);
	-webkit-box-shadow: 0px 2px 4px rgba(000,000,000,0.5);
  }
  
  
  /* Start First Level Nav Items */
  #m-menu ul#nav li {
	float: none;
	padding: 0;
	list-style: none;
	list-style-image: none;	
  }
  
  #m-menu ul#nav li.last {
	border-left: 0px;
	border-right: 0px;
  }
  
  #m-menu ul#nav li.first {
	border-left: 0px;
	border-right: 0px;
  }	
  
  #m-menu ul#nav li a {
	text-decoration: none;
	color: #fff;
	font-size: 14px;
	line-height: 1.3;
	display: block;
	text-align: left;
	padding: 12px 15px;
	text-transform: uppercase;
	border-bottom: 1px solid #b7b7b7;
	border-left: 0px;
	border-right: 0px;
  }	
  
  #m-menu ul#nav li.current a {
	
  }
  #m-menu ul#nav li a:hover {
	
  }
  /* End First Level Nav Items */		
  
  /* Start Second First Level Nav Items */
  #m-menu ul#nav li ul { /* second-level lists */
	position: relative;
	display: block;
	width: 100%;			
	margin: 0px;
	padding: 0px;
	left: 0px;
  }
  
  #m-menu ul#nav li ul li a, 
  #m-menu ul#nav li.current ul li a { /* second level dropdown buttons */
	width: auto;
/*	background: #ccc;
	color: #000; */
	padding: 10px 15px 10px 30px;
	text-transform: none;
  }
  
  #m-menu ul#nav li ul li a:hover, 
  #m-menu ul#nav li.current ul li a:hover,
  #m-menu ul#nav li ul li a:active, 
  #m-menu ul#nav li.current ul li a:active,
  #m-menu ul#nav li ul li.current a { /* second level dropdown button hover and active states */
	
  }
  /* End Second First Level Nav Items */	
  
  /* Hide Third Level Nav Items */	
  #m-menu ul#nav li ul li ul { /* third-and-above-level lists */
  display:none;
  }
  #m-menu ul#nav li:hover ul li ul, 
  #m-menu ul#nav li:hover ul li ul li ul, 
  #m-menu ul#nav li.sfhover ul li ul, 
  #m-menu #nav li.sfhover ul li ul li ul {
	display:none;
	left: 0px;
  }
  
  #m-menu ul#nav li:hover ul, 
  /*#m-menu ul#nav li ul li:hover ul, 
  #m-menu ul#nav li ul li ul li:hover ul,*/ 
  #m-menu ul#nav li.sfhover ul, 
  #m-menu ul#nav li ul li.sfhover ul /*, 
  #m-menu ul#nav li ul li ul li.sfhover ul */{ /* lists nested under hovered list items */
	display:block;
  }
  /* End Mobile Nav Media Query */
}








/* ------------------------------------------ */				
/* 10. MOBILE QUICK NAV BUTTONS */	
/* ------------------------------------------ */
				
#m-panel {
	background: transparent none repeat scroll 0 0;
}

/* mobile bottom nav bar background */

a.m-click-phone, 
a.m-click-mail, 
a.m-click-map {
	background: transparent none repeat scroll 0 0;
    width: 25% !important; /* Old browsers */
	
}	


a.m-click-phone span, 
a.m-click-mail span, 
a.m-click-map span {
	background-image: url("gfx/mobile-panel-icons.png");
}	
  
.m-click-map { position: relative;
left: 2%;}

a.m-click-phone  {display: none;}  
  
  
  
  
  
 
  
  
  
  
  
  
  

/* ------------------------------------------ */ 
/* 11.WIDGET BUTTONS, BACK TO TOP, and Site Map */
/* ------------------------------------------ */

/* Widget Buttons, FAQ and Jobs Modules */
.widget-button, 
#FAQ_category_list > li > a,
#FAQ_category_list > li > a:visited, 
.jobs-apply a,
.buttons, a.buttons {
	filter:none;
	cursor:pointer;
	width:auto; 
	height:auto; 
	text-align:center; 
	text-decoration:none; 
	z-index:1001;
	background: #fff;
	font-size:150%;
	line-height: 120%;
	color:#d175af;
	padding: 8px 15px;
	text-transform:uppercase;
	border:2px solid #d175af;
	/* note if removing rounded corners set the number to 0 */
	-moz-border-radius:0px;
    -webkit-border-radius:0px;
     border-radius:0px;
	-webkit-appearance: none; /* this is needed to remove default styling from mobile apple devices */
}

.widget-button:hover,
#FAQ_category_list > li > a:hover,
#FAQ_category_list > li > a:focus,
#FAQ_category_list > li > a:active,
.jobs-apply a:hover,
.jobs-apply a:active,
.jobs-apply a:focus,
.buttons:hover, a.buttons:hover {
	filter:none;
	cursor:pointer;
	color: #fff;
	background:#d175af;
	}
	
.buttons {
	font-size:150%;
	line-height: 120%;
	padding: 8px 20px;
	width: 100%;
	}	
	
#job-apply .buttons {
	padding: 8px 20px;
	width: auto;
	}	

	
/* Back to Top */

#back-top a {
	width: 42px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}

#back-top a:hover {
	color: #000;
}

/* Arrow Icon (span tag) */
#back-top span {
	width: 42px;
	height: 46px;
	display: block;
	margin-bottom: 7px;
	background: #333 url("gfx/back-to-top.png") no-repeat center center;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}

#back-top a:hover span {
	background: #F3002E url("gfx/back-to-top.png") no-repeat center center;
}	

/* Site Map */

#site_map ul a:hover {
    background: #F3002E none repeat scroll 0 0;
}
#site_map ul a:before {
    background: #87ceeb none repeat scroll 0 0;  
	font-weight: normal;
}
#site_map ul a:after {
    border: 0.5em solid transparent;
}
#site_map ul a:hover:after {
    border-left-color: #87ceeb;
}

/* ------------------------------------------ */
/* 12. MEDIA QUERIES */
/* ------------------------------------------ */


 @media only screen and (max-width: 1280px) {
	 
	 #content {font-size: 13px;}
	 
	 #logo-slogan {
		font-size: 45px;
		}
	 #phone-cta {
		font-size: 30px;
		}	
		
	#menu { top: 23px;}	
		
	ul#nav li a {font-size: 15px; }
	
	.logo img {
    width: 105% !important;
}
	
	#menu {
    top: 13px;
}	

 }
 
 
/* Mobile Divices Smaller Than Standard 960 */
@media only screen and (max-width: 959px) {
	
	#logo-slogan {
		font-size: 40px;
		}
		
	#phone-cta {
		font-size: 25px;
		}		
	
	#menu { top: 13px;}	
	
	
}


/* Smartphones Landscape and Other Mobile Divices Smaller Than 768px */
@media only screen and (max-width: 767px) {
	
		/* reduced H1 - H6 for mobile */
	h1 { 
	font-size: 240%; 
	}
	h2 { 	
		font-size: 200%; 
	}
	h3 {	
		font-size: 180%;
		margin: 0 0px 15px 15px; 
	}
	h4 { 	
		font-size: 160%; 
	}
	h5 { 
		font-size: 140%;  
	}
	h6 { 
		font-size: 120%;  
	}
	
	/* mobile Phone and CTA */
	#header-1 #phone-cta {
		display:none;
	}
	
	#m-phone-cta {
		display:block;
	}
	
	
  /* HEADER AREA 1 */
	  #logo-slogan {
		  text-align: center;
		  padding: 10px 0;	
		  font-size: 35px;
	  }
	  
	  	 /* logo size fail safe */
		.logo img {
		  max-height: 200px;
		  max-width: 400px;
		}
	  
	  
	  .tagline2, .tagline2 div {
		  display: block;
	  }	
	  
	  /* Center Utility Nav on Mobile */
	  ul#mirror-menu-module {
		  text-align: center;
	  }
	  
	  
	  ul#nav { float: none; }
	  
	  .fancybox img {width:49%;}
	  
	  .social-whole, #wrapper-header .social-whole {display: none;}
	  
}

/* Smartphones Portrait */
@media only screen and (max-width: 479px) { 
 	#siteMainDynLogo /* this is for the mobile logo image */ {
		max-width:280px;
		height:auto;		
	}


a.m-click-phone, 
a.m-click-mail, 
a.m-click-map {width: 32% !important; }

	
}	


/* MY CODE */

.logo img {width: 77%;}

.fancybox-custom .fancybox-skin {
			box-shadow: 0 0 50px #222;
		}
		
.social-whole { padding: 15px 0;}

#wrapper-header .social-whole { position:relative;
text-align: end;
top: 17px;}

.grey { background: #f1eeef;
padding: 15px;}


.fancybox img {}