/*

	Volunteering & Healthy Aging 
	Main Stylesheet

*/

/* =General
---------------------------------------------------------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body {
	background: #ffffff url('../images/wrapper/body-bg.jpg') 0 0 repeat-x;
	font-family: "Trebuchet MS", verdana, sans-serif;
	font-size: 14px;
}

table tr td {
	font-size: 14px;
	color: #000000;
	vertical-align: top;
}

.clearit:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear {
	clear: both;
	display: block;
	width: 100%;
	height: 0;
	font-size: 1px;
}

/* =Branding
--------------------------------------------------------------------------------------------------- */
#branding {
	width: 1100px;
	min-height: 183px;
	height: auto !important;
	height: 183px;
	margin: 0 auto 0 auto;
}

#branding #branding-wordmark {
	float: right;	
}

#branding #logo {
	padding: 32px 0 0 85px;
}

/* =Layout Homepage
---------------------------------------------------------------------------------------------------- */
#left {
	float: left;
	width: 550px;
	padding: 24px 0 10px 25px;
}

#right {
	float: right;
	width: 353px;
	padding: 24px 0 10px 0;
}

/* =Layout Homepage v2
---------------------------------------------------------------------------------------------------- */

#top {
	width: 954px;
	padding: 24px 0 0 25px;
}

#bottom {
	width: 954px;
	padding: 0 0 10px 25px;
	/*border: 1px solid #E4E4E4;*/
}

#bottom-col1 {
	float: left; 
	width: 366px;
}

#bottom-col2 {
	float: left; 
	width: 366px;
}

#bottom-col3 {
	float: left;
	width: 222px; 
}


/* =Layout Homepage Buttons
---------------------------------------------------------------------------------------------------- */
#right #btn-why-volunteer {
	background: url('../images/wrapper/home-btns-bg.gif') 0 0 repeat-y;
	width: 353px;
	margin: 0 0 22px 0;
	cursor: pointer;
}

#right #btn-why-volunteer #btn-why-volunteer-items {
	background: url('../images/wrapper/btn-why-volunteer-bg.jpg') 0 0 no-repeat;
	min-height: 76px;
	height: auto !important;
	height: 76px;
}

#right #btn-why-volunteer #btn-why-volunteer-items-f {
	background: url('../images/wrapper/btn-why-volunteer-bg.jpg') 0 0 no-repeat;
	min-height: 116px;
	height: auto !important;
	height: 116px;
}

#right #btn-your-way {
	background: url('../images/wrapper/home-btns-bg.gif') 0 0 repeat-y;
	width: 353px;
	margin: 0 0 22px 0;
	cursor: pointer;
}

#right #btn-your-way #btn-your-way-items {
	background: url('../images/wrapper/btn-your-way-bg.jpg') 0 0 no-repeat;
	min-height: 76px;
	height: auto !important;
	height: 76px;
}

#right #btn-your-way #btn-your-way-items-f {
	background: url('../images/wrapper/btn-your-way-bg.jpg') 0 0 no-repeat;
	min-height: 116px;
	height: auto !important;
	height: 116px;
}

#right #btn-get-started {
	background: url('../images/wrapper/home-btns-bg.gif') 0 0 repeat-y;
	width: 353px;
	margin: 0 0 22px 0;
	cursor: pointer;
}

#right #btn-get-started #btn-get-started-items {
	background: url('../images/wrapper/btn-get-started-bg.jpg') 0 0 no-repeat;
	min-height: 76px;
	height: auto !important;
	height: 76px;
}

#right #btn-find-opportunity {
	background: url('../images/wrapper/home-btns-bg.gif') 0 0 repeat-y;
	width: 353px;
	margin: 0 0 22px 0;
	cursor: pointer;
}

#right #btn-find-opportunity #btn-find-opportunity-items {
	background: url('../images/wrapper/btn-find-opportunity-bg.jpg') 0 0 no-repeat;
	min-height: 116px;
	height: auto !important;
	height: 116px;
}

#right #btn-why-volunteer h3, #right #btn-your-way h3 {
	color: #B30838;
	font-size: 19px;
	font-weight: normal;
	margin: 0;
}

#right #btn-get-started h3, #right #btn-find-opportunity h3 {
	color: #B30838;
	font-size: 19px;
	font-weight: normal;
	margin: 0;
}

#right #btn-why-volunteer h3 a, #right #btn-your-way h3 a ,#right #btn-get-started h3 a, #right #btn-find-opportunity h3 a {
	display: block;
	color: #B30838;
	text-decoration: none;
	width: 229px;
	height: 64px;
	padding: 12px 40px 0 84px;
}

#right #btn-why-volunteer h3 a:hover, #right #btn-your-way h3 a:hover ,#right #btn-get-started h3 a:hover, #right #btn-find-opportunity h3 a:hover {
	color: #61051F;
}

#right #btn-why-volunteer a span, #right #btn-your-way a span, #right #btn-get-started a span, #right #btn-find-opportunity a span {	
	color: #000000;
	text-decoration: none;
	font-size: 14px;
}

#right #btn-why-volunteer a:hover span , #right #btn-your-way a:hover span, #right #btn-get-started a:hover span, #right #btn-find-opportunity a:hover span {	
	color: #61051F;
}

/* =Layout Homepage Buttons - v2
---------------------------------------------------------------------------------------------------- */

#bottom #btn-why-volunteer {
	background: url('../images/wrapper/home-btns-bg.gif') 0 0 repeat-y;
	width: 359px;
	margin: 0 6px 6px 0;
	cursor: pointer;
	float: left;
}

#bottom #btn-why-volunteer #btn-why-volunteer-items {
	background: url('../images/wrapper/btn-why-volunteer-bg.jpg') 0 0 no-repeat;
	min-height: 76px;
	height: auto !important;
	height: 76px;
}

#bottom #btn-why-volunteer #btn-why-volunteer-items-f {
	background: url('../images/wrapper/btn-why-volunteer-bg.jpg') 0 0 no-repeat;
	min-height: 116px;
	height: auto !important;
	height: 116px;
}


#bottom #btn-your-way {
	background: url('../images/wrapper/home-btns-bg.gif') 0 0 repeat-y;
	width: 359px;
	margin: 0 6px 6px 0;
	cursor: pointer;
	float: left;
}

#bottom #btn-your-way #btn-your-way-items {
	background: url('../images/wrapper/btn-your-way-bg.jpg') 0 0 no-repeat;
	min-height: 76px;
	height: auto !important;
	height: 76px;
}

#bottom #btn-your-way #btn-your-way-items-f {
	background: url('../images/wrapper/btn-your-way-bg.jpg') 0 0 no-repeat;
	min-height: 116px;
	height: auto !important;
	height: 116px;
}

#bottom #btn-get-started {
	background: url('../images/wrapper/home-btns-bg.gif') 0 0 repeat-y;
	width: 359px;
	margin: 0 6px 12px 0;
	cursor: pointer;
	float: left;
}

#bottom #btn-get-started #btn-get-started-items {
	background: url('../images/wrapper/btn-get-started-bg.jpg') 0 0 no-repeat;
	min-height: 116px;
	height: auto !important;
	height: 116px;
}

#bottom #btn-find-opportunity {
	background: url('../images/wrapper/home-btns-bg.gif') 0 0 repeat-y;
	width: 359px;
	margin: 0 6px 12px 0;
	cursor: pointer;
	float: left;
}

#bottom #btn-find-opportunity #btn-find-opportunity-items {
	background: url('../images/wrapper/btn-find-opportunity-bg.jpg') 0 0 no-repeat;
	min-height: 116px;
	height: auto !important;
	height: 116px;
}

#bottom #btn-why-volunteer h3, #bottom #btn-your-way h3 {
	color: #B30838;
	font-size: 19px;
	font-weight: normal;
	margin: 0;
}

#bottom #btn-get-started h3, #bottom #btn-find-opportunity h3 {
	color: #B30838;
	font-size: 19px;
	font-weight: normal;
	margin: 0;
}

#bottom #btn-why-volunteer h3 a, #bottom #btn-your-way h3 a ,#bottom #btn-get-started h3 a, #bottom #btn-find-opportunity h3 a {
	display: block;
	color: #B30838;
	text-decoration: none;
	width: 229px;
	height: 64px;
	padding: 12px 40px 0 84px;
}

#bottom #btn-why-volunteer h3 a:hover, #bottom #btn-your-way h3 a:hover, #bottom #btn-get-started h3 a:hover, #bottom #btn-find-opportunity h3 a:hover {
	color: #61051F;
}

#bottom #btn-why-volunteer a span, #bottom #btn-your-way a span, #bottom #btn-get-started a span, #bottom #btn-find-opportunity a span {	
	color: #000000;
	text-decoration: none;
	font-size: 14px;
}

#bottom #btn-why-volunteer a:hover span , #bottom #btn-your-way a:hover span, #bottom #btn-get-started a:hover span, #bottom #btn-find-opportunity a:hover span {	
	color: #61051F;
}

#bottom #btn-engage {
	background: url('../images/wrapper/home-btns-bg.gif') 0 0 repeat-y;
	width: 222px;
	margin: 0 0 12px 0;
	cursor: pointer;
	float: left;
}

#bottom #btn-engage #btn-engage-items {
	background: url('../images/wrapper/btn-engage-volunteers-bg.jpg') 0 0 no-repeat;
	min-height: 174px;
	height: auto !important;
	height: 174px;
}

#bottom #btn-engage h3 {
	color: #B30838;
	font-size: 19px;
	font-weight: normal;
	margin: 0;
}

#bottom #btn-engage h3 a {
	display: block;
	color: #B30838;
	text-decoration: none;
	width: 249px;
	height: 124px;
	padding: 40px 40px 0 10px;
}

#bottom #btn-engage h3 a:hover {
	color: #61051F;
}

#bottom #btn-engage a span {	
	color: #000000;
	text-decoration: none;
	font-size: 14px;
}

#bottom #btn-engage a:hover span {	
	color: #61051F;
}

/* =Icons
---------------------------------------------------------------------------------------------------- */

#action {
	background: url('../images/wrapper/icon-volunteer-in-action.jpg') 0 4px no-repeat;
	display: block;
	padding: 0 0 0 30px;
}

#say {
	background: url('../images/wrapper/icon-volunteers-say.jpg') 0 0 no-repeat;
	display: block;
	padding: 0 0 0 30px;
}

#know {
	background: url('../images/wrapper/icon-did-you-know.jpg') 0 0 no-repeat;
	display: block;
	padding: 0 0 0 30px;
	height: 26px;
}

/* =Layout
---------------------------------------------------------------------------------------------------- */
#wrapper {
	width: 980px;
	margin: 0 auto 0 auto;
}

#main-content {
	clear: both;
	margin: 10px 0 0 0;
}

#main-content #left-col {
	float: left;
	width: 255px;
}

#main-content #middle-col {
	float: left;
	width: 511px;
	min-height: 500px;
	height: auto !important;
	height: 500px;
}

#main-content #right-col {
	float: right;
	width: 212px;
	padding: 0 0 40px 0;
}

#text-content {
	padding: 0 20px 30px 0;
}

#text-content .highlights {
	background: #EAEAEA url('../images/wrapper/highlights-border-top.gif') 0 0 no-repeat;
	width: 488px;
	margin: 0 0 18px 0;
}

#text-content .highlights .hightlights-items {
	background: url('../images/wrapper/highlights-border-btm.gif') 0 100% no-repeat;
}

/* =Left navigation
--------------------------------------------------------------------------------------------------- */
#left-nav {
	width: 235px;
}

#left-nav ul {
	width: 233px;
	border-left: 1px solid #E4E4E4;
	border-right: 1px solid #E4E4E4;
}

#left-nav ul li {
	display: inline;
	font-size: 12px;
}

#left-nav a {
	display: block;
	background: #e8e8e8 url('../images/wrapper/left-nav-item-bg.jpg') 0 0 repeat-x;
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	padding: 10px 5px 10px 10px;
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
}

#left-nav a:hover {
	background: #d7033f;
	color: #ffffff;
}

#left-nav a.on {
	background: #d7033f;
	color: #ffffff;
}

/* =Sub-content
---------------------------------------------------------------------------------------------------- */
.sub-content {
	background: url('../images/wrapper/sub-content-bg.gif') 0 0 repeat-y;
	width: 212px;
	margin: 0 0 16px 0;
}

.sub-content .sub-content-items {
	padding: 10px 16px 10px 20px;
}

/* =Breadcrumb
---------------------------------------------------------------------------------------------------- */
#breadcrumb {
	font-size: 13px;
	padding: 18px 0 24px 0;
}

/* =Font resize
---------------------------------------------------------------------------------------------------- */
#font-resize {
	color: #000000;
	margin: 16px 0 18px 0;
	font-size: 13px;
}

#font-resize ul {
	float: right;
	padding: 0 18px 0 0;
}

#font-resize ul li {
	display: block;
	float: left;
	padding: 0 0 0 5px;
}

#font-resize ul li span {
	display: block;
	padding: 2px 0 0 0;
}

#font-resize ul li#share {
	display: block;
	padding: 4px 0 0 6px;
}

/* =Footer
---------------------------------------------------------------------------------------------------- */
#footer {
	color: #555555;
	font-size: 11px;
	padding: 20px 0 30px 25px;
	border-top: 1px solid #ECECEC;
}

#footer p {
	line-height: 15px;
}

#footer #footer-right {
	float: right;
	width: 365px;
	padding: 14px 0 0 0; 
}

#footer #footer-right img{
	margin: -15px 0 0 0;
}

/* =Links
---------------------------------------------------------------------------------------------------- */
a {
	outline: none;
	color: #B30838;
}

a:focus {
	outline: none;
	color: #B30838;
}

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

/* =lists
--------------------------------------------------------------------------------------------------- */
#main-content #text-content ul {
 	list-style: square;
	margin: 0 0 0 2px;
	padding: 0 0 0 14px;
}

#main-content #text-content ol {
	list-style-type: decimal;
	margin: 0 0 0 12px;
	padding: 0 0 0 14px;
}

#main-content #text-content ul li {
 	list-style: square;
	line-height: 18px;
	margin-bottom: 6px;
}

#main-content #text-content ol li {
	list-style-type: decimal;
	line-height: 18px;
	margin-bottom: 6px;
}


/* =Tabular Data
--------------------------------------------------------------------------------------------------- */
.data
{
	margin-bottom: 15px;
	border-top: 1px solid #DDDDDD;
	border-left: 1px solid #DDDDDD;
}

.data th
{
	padding: 3px 2px 5px 5px;
	background-color: #E8E8E8;
	border-right: 1px solid #DDDDDD;
	color: #B30838;
	text-align: left;
}

.data td
{
	border-right: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
	padding: 3px 2px 5px 5px;
}

/* =Typography
---------------------------------------------------------------------------------------------------- */
#main-content #text-content p {
	margin: 0 0 18px 0;
	line-height: 18px;
}

#main-content #text-content h1 {
	color: #B30838;
	font-size: 20px;
	font-weight: normal;
	margin: 0 0 14px 0;
}

#main-content #text-content h2 {
	font-size: 16px;
	color: #000000;
	margin: 2px 0 14px 0;
}

#main-content #text-content h3 {
	font-size: 13px;
	color: #666666;
	margin: 0 0 14px 0;
}

#main-content #text-content .highlights .hightlights-items p {
	color: #676767;
	line-height: 20px;
	margin: 0;
	padding: 14px 20px 14px 20px;
}

#main-content #text-content .highlights .hightlights-items p strong {
	color: #000000;
}

#main-content .sub-content-items p {
	color: #4E4E4E;
	font-size: 13px;
	line-height: 20px;
}

#main-content .sub-content-items p a {
	font-size: 12px;
}

#main-content .sub-content-items h3 {
	color: #B30839;
	font-size: 17px;
	font-weight: normal;
	margin: 0 0 10px 0;
}

/* Homepage */
#left p, #top p  {
	margin: 14px 0 14px 0;
	line-height: 18px;
}

#left h1, #top h1 {
	color: #B30839;
	font-size: 25px;
	font-weight: normal;
	margin: 0 0 12px 0;
}

#left h2, #top h2 {
	color: #6D6D6D;
	font-size: 17px;
	font-weight: normal;
	margin: 12px 0 12px 0;
}

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

/* =Utilities
---------------------------------------------------------------------------------------------------- */
#utils-home {
	position: absolute;
	top: 11px;
	left: 738px;
	z-index: 100;
	width: 310px;
}

#utils-home-f {
	position: absolute;
	top: 11px;
	left: 742px;
	z-index: 100;
	width: 310px;
}

#utils {
	position: absolute;
	top: 11px;
	left: 652px;
	z-index: 100;
	width: 310px;
}

#utils-f {
	position: absolute;
	top: 11px;
	left: 652px;
	z-index: 100;
	width: 350px;
}

#utils ul li, #utils-home ul li, #utils-f ul li, #utils-home-f ul li {
	float: left;
	padding: 0 0 0 25px;
}

#utils ul li a, #utils-home ul li a, #utils-f ul li a, #utils-home-f ul li a {
	float: left;
	color: #ffffff;
	font-size: 12px;
	text-decoration: none;
	display: block;
	line-height: 22px;
}

#utils ul li a:hover, #utils-home ul li a:hover, #utils-f ul li a:hover, #utils-home-f ul li a:hover {
	text-decoration: underline;
}

#utils ul li a.home, #utils-f ul li a.home {
	background: url('../images/icon-home.gif') 0 0 no-repeat;
	display: block;
	padding: 0 0 0 24px;
}

#utils ul li a.contact, #utils-home ul li a.contact, #utils-f ul li a.contact, #utils-home-f ul li a.contact {
	background: url('../images/icon-contact.gif') 0 0 no-repeat;
	display: block;
	padding: 0 0 0 24px;
}

#utils ul li a.fr, #utils-home ul li a.fr, #utils-f ul li a.fr, #utils-home-f ul li a.fr {
	background: url('../images/icon-fr.gif') 0 0 no-repeat;
	display: block;
	padding: 0 0 0 24px;
}

#utils ul li a.en, #utils-home ul li a.en, #utils-f ul li a.en, #utils-home-f ul li a.en {
	background: url('../images/icon-en.gif') 0 0 no-repeat;
	display: block;
	padding: 0 0 0 24px;
}

/* =Main nav CSS Menus (Core styles - Do not modify)
---------------------------------------------------------------------------------------------------- */
.qmmc .qmdivider {display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}
.qmmc .qmdividery {float:left;width:0px;}
.qmmc .qmtitle {display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}
.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}
.qmmc {position:relative; z-index:10;}
.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}
.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}
.qmsh div a {float:left;}
.qmmc div {visibility:hidden;position:absolute;}
.qmmc .qmcbox {cursor:default;display:block;position:relative;z-index:1;}
.qmmc .qmcbox a {display:inline;}
.qmmc .qmcbox div {float:none;position:static;visibility:inherit;left:auto;}
.qmmc li {z-index:auto;}
.qmmc ul {left:-10000px;position:absolute;z-index:10;}
.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}
.qmmc li a {float:none}
.qmmc li:hover > ul {left:auto;}
#qm0 ul {top:100%;}
#qm0 ul li:hover > ul {top:0px;left:100%;}
#qm1 ul {top:100%;}
#qm1 ul li:hover > ul {top:0px;left:100%}

/* =Main nav and dropdowns (modify at will)
---------------------------------------------------------------------------------------------------- */ 
#main-nav, #main-nav-f {
	background: url('../images/wrapper/main-nav-bg.jpg') 0 0 no-repeat;
	height: 48px;
	position: relative;
	clear: both;
}	

#main-nav a span {
	padding: 12px 0 0 0;
	display: block;
}

#main-nav-f a span {
	padding: 2px 0 0 0;
	display: block;
}

#main-nav #corner-overlay, #main-nav-f #corner-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
}

/* (MAIN) Container */	
#qm0 {	
	padding: 0;
	margin: 0;
}

/* (MAIN) Items */	
#qm0 a {	
	background: url('../images/wrapper/nav-item-bg.gif') 100% 0 no-repeat;
	height: 41px;
	color: #ffffff;
	font-size: 14px;
	text-decoration: none;
	padding: 0 16px 0 16px;
}	

#qm0 a:hover {
	background-position: 100% -41px;
}

#qm0 a.on {	
	background-position: 100% -41px;
}

/* (MAIN) Parent Items */	
#qm0 .qmparent {	
}

/* (MAIN) Active State */	
body #qm0 .qmactive, body #qm0 .qmactive:hover {
	background-position: 100% -41px;
}

/* (MAIN) Active State */	
body #qm0 .qmactive span, body #qm0 .qmactive:hover span {
	background-position: 0 -41px;
}

/* (SUB) Container */	
#qm0 div, #qm0 ul {	
	background: #ffffff url('../images/wrapper/dropdown-bg.jpg') 0 0 repeat-x;
	color: #000000;
	border-top: 1px solid #484848;
	border-left: 1px solid #484848;
	border-right: 1px solid #484848;
	margin: 1px 0 0 0;
}
 
/* (SUB) Items */	
#qm0 div a, #qm0 ul a {	
	background: none;
	color: #000000;
	min-height: 16px;
	height: auto !important;
	height: 16px;
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	padding: 9px 9px 9px 16px;
	border-bottom: 1px solid #7D7D7D;
	margin: 0;
}

/* (SUB) Hover State */	
#qm0 div a:hover {	
	background-image: none;
	background: #5D5D5D;
	color: #ffffff;
	font-weight: normal;
	text-decoration: none;
	margin: 0;
	padding: 9px 9px 9px 16px;
	border-bottom: 1px solid #7D7D7D;
}

/* (SUB) Active State*/	
body #qm0 div .qmactive, body #qm0 div .qmactive:hover {	
	background-image: none;
	background: #5D5D5D;
	color: #ffffff;
	font-weight: normal;
	text-decoration: none;
	margin: 0;
	padding: 9px 9px 9px 16px;
	border-bottom: 1px solid #7D7D7D;
}