/*
	'Canadian Red Cross Youth' main stylesheet
*/

/* =General
---------------------------------------------------------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
	border: 0;
}
ul, ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
body {
	background: #730102;
	font-family: 'trebuchet ms', arial, sans-serif;
	font-size: 13px;
}
table tr td {
	font-family: 'trebuchet ms', arial, sans-serif;
	font-size: 13px;
	vertical-align: top;
}
img, a img {
	border: 0;
}
.clearit:after { 
    content: "."; 
    display: block; 
    clear: both; 
    height: 0; 
    visibility: hidden; 
}
.clearit { 
    min-height: 0; 
    height: 0; 
}
html>body .clearit { 
    height: auto; 
}
.clear {
	clear: both;
	display: block;
	width: 100%;
	height: 0;
	font-size: 1px;
}

/* =Header + Branding
--------------------------------------------------------------------------------------------------- */
#header {
	min-height: 46px;
	height: auto !important;
	height: 46px;
}
#header #header-inner {
	width: 984px;
	text-align: left;
	margin: 0 auto;
	padding-top: 11px;
	padding-left: 76px;
}
#header #header-inner a { 
	margin-right: 20px;
}
#header #header-inner a.lang { 
	margin-right: 602px;
}
#header #header-inner a.lang-f { 
	margin-right: 592px;
}
#branding {
	min-height: 77px;
	height: auto !important;
	height: 77px;
	padding: 16px 0 6px 39px;
}
#branding #logo {
	width: 418px;
	height: 71px;
}
.fr #branding #logo {
	width: 496px;
	height: 71px;
}
/* =Layout
--------------------------------------------------------------------------------------------------- */
#wrapper {
	background: #f1e8dc url('../images/wrapper/wrapper-bg.jpg') 50% 0 no-repeat;
}
#wrapper-inner {
	width: 984px;
	margin: 0 auto;
}
#wrapper-inner #main-wrap {
	background: url('../images/wrapper/main-wrap-bg.gif') 0 0 repeat-y;
	width: 983px;
	margin: 11px auto 35px auto;
}
#wrapper-inner #main-wrap-btm {
	background: url('../images/wrapper/main-wrap-btm.gif') 0 100% no-repeat;
	padding-bottom: 3px;
}
#wrapper-inner #main-wrap-inner {
	background: url('../images/wrapper/main-wrap-top.gif') 0 0 no-repeat;
	min-height: 600px;
	height: auto !important;
	height: 600px;
	padding-top: 3px;
}	
#wrapper-inner #main-wrap #main-content {
	float: left;
	width: 677px;
	padding-top: 40px;
}
#wrapper-inner #main-wrap #main-content #text-content {
	padding: 0 14px 10px 0;
}

#wrapper-inner #main-wrap #main-content #text-content ul {
	margin: 0 0 10px 20px;
	padding: 0;
}
#wrapper-inner #main-wrap #main-content #text-content ul li {
	background: url('../images/wrapper/sub-content-list-bullet.gif') 0 7px no-repeat;
	margin: 0;
	padding: 0 0 10px 12px;
	color: #000000;
}

/* aside */
#wrapper-inner #main-wrap #main-content #text-content #aside {
	float: right;
	width: 280px;
	margin: 0 0 10px 10px;
}
#wrapper-inner #main-wrap #main-content #text-content #aside .sub-content {
	width: 210px;
	color: #5a5959;
	font-size: 12px;
	margin-top: -14px;
	margin-left: 35px;
	padding: 16px 16px 20px 16px;
	border: 1px dashed #b7b7b7;
}
#wrapper-inner #main-wrap #main-content #text-content #aside .sub-content p {
	line-height: 18px;
	margin: 0 0 20px 0;
}
#wrapper-inner #main-wrap #main-content #text-content #aside .sub-content h3 {
	color: #c60004;
	font-size: 13px;
	padding-bottom: 13px;
	border-bottom: 1px dashed #b7b7b7;
}
#wrapper-inner #main-wrap #main-content #text-content #aside .sub-content ul {
	margin: 0;
	padding: 0;
}
#wrapper-inner #main-wrap #main-content #text-content #aside .sub-content ul li {
	background: url('../images/wrapper/sub-content-list-bullet.gif') 0 7px no-repeat;
	margin: 0;
	padding: 0 0 10px 12px;
}

/* aside - poll */
#wrapper-inner #main-wrap #main-content #text-content #aside .sub-content .poll ul li {
	background: none;
	clear: both;
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
}
#wrapper-inner #main-wrap #main-content #text-content #aside .poll ul li label {
	display: block;
	float: left;
	width: 180px;
}
#wrapper-inner #main-wrap #main-content #text-content #aside .poll ul li input {
	display: block;
	float: left;
	margin-top: 3px;
	margin-right: 10px;
}
#wrapper-inner #main-wrap #main-content #text-content #aside .poll .poll-btns {
	padding-left: 23px;
}
#wrapper-inner #main-wrap #main-content #text-content #aside .poll .poll-btns input,
#wrapper-inner #main-wrap #main-content #text-content #aside .poll .poll-btns a {
	display: block;
	float: left;
	margin-right: 6px;
}
#wrapper-inner #main-wrap #main-content #text-content #aside .poll .poll-submit {
	background: url('../images/btn-poll-submit.gif') 0 0 no-repeat;
	display: block;
	width: 62px;
	height: 28px;
	text-indent: -10000px;
	text-transform: capitalize;
	cursor: pointer;
}

/* =Layout homepage 
--------------------------------------------------------------------------------------------------- */
#home #wrap {
	background: url('../images/wrapper/homepage-layout-bg.jpg') 0 0 no-repeat;
	min-height: 400px;
	height: auto !important;
	height: 400px;
	margin-top: 8px;
	margin-bottom: 17px;
}
#home #wrap #left-col {
	float: left;
	width: 330px;
}
#home #wrap #left-col .featured-story-thb {
	float: left;
	margin-right: 10px;
}
#home #wrap #left-col .btn-more-featured-stories {
	margin: 20px 0 0 36px;
}
#home #wrap #middle-col {
	float: left;
	width: 300px;
	padding: 0 0 0 21px;
}
#home #middle-col #flash-player {
	height: 272px;
}
#home #middle-col h2 {
	background: url('../images/wrapper/red-dashed-divider.gif') 10px 100% no-repeat;
	margin-bottom: 18px;
	padding-bottom: 10px;
}
#home #middle-col .social-btns {
	padding-left: 10px;
}
#home #middle-col .social-btns li {
	float: left;
	padding-right: 30px;
}
#home #middle-col .social-btns li.last {
	padding-right: 0;
}
#home #wrap #right-col {
	float: left;
	width: 306px;
}
#home .scroller-col-left {
	background: url('../images/wrapper/red-dashed-divider.gif') 40px 100% no-repeat;
 	padding: 0 0 20px 0;
}
#home .scroller-col-right {
	background: url('../images/wrapper/red-dashed-divider.gif') 33px 100% no-repeat;
	padding: 0 0 18px 14px;
}
#home .scroller-col-left p {
	margin-bottom: 18px;
	padding-left: 20px;
}
#home .scroller-col-right p {
	margin-bottom: 18px;
} 
#home .scroller-col-left h1 {
	background: url('../images/wrapper/red-dashed-divider.gif') 40px 100% no-repeat;
	margin-bottom: 16px;
	padding: 0 0 10px 16px;
}
#home .scroller-col-right h1 {
	background: url('../images/wrapper/red-dashed-divider.gif') 20px 100% no-repeat;
	margin-bottom: 18px;
	padding: 0 0 10px 0;
}
#home #middle-col h1 {
	margin-bottom: 8px;
}
#home .scroller-col-right ul {
	width: 242px;
}
#home .scroller-col-right ul li {
	background: url('../images/wrapper/twitter-divider.gif') 0 100% no-repeat;
	margin-bottom: 8px;
	padding: 0 0  10px 0;
}
#home .scroller-col-right ul li:last-child,
#home .scroller-col-right ul li.lastTweet {
	background: none;
}
#home .scroller-col-right ul li p {
	margin: 0;
}
#home .scroller-col-right ul li h3 {
	color: #a90304;
	font-size: 12px;
	margin: 0;
}
#home .scroller-col-right ul li p.time-posted {
	color: #a90304;
	font-size: 12px;
	margin: 0;
}

/* Scroll Panes */
.jScrollPaneTrack {
	background: url('../images/wrapper/pane-track-bg.gif') 50% 0 repeat-y;
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
}
.jScrollPaneDrag {
	background: url('../images/wrapper/btn-drag.png') 50% 0 no-repeat;
	height: 38px !important;
	position: absolute;
	cursor: pointer;
}
.scroll-pane {
	width: 298px;
	overflow: auto;
	padding-left: 20px;
}
#home .scroller-col-right .scroll-pane {
	width: 280px;
}
#pane1, #pane2 {
	height: 280px;
}
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

/* Homepage bottom content */
#home #home-bottom-wrap {
	background: url('../images/wrapper/texture-bg.png') 50% 0 no-repeat;
	min-height: 390px;
	height: auto !important;
	height: 390px;
}
#home #home-bottom-wrap #home-bottom-wrap-inner {
	width: 994px;
	margin: 0 auto;
}
#home #home-bottom-wrap #home-bottom-wrap-inner #flash-gallery { 	
	float: left;
	width: 673px;
	padding-top: 38px;
}
#home #home-bottom-wrap #home-bottom-wrap-inner #right-features {
	float: left;
	width: 318px;
	padding-top: 36px;
}
#home #home-bottom-wrap #home-bottom-wrap-inner #right-features h3 {
	margin-bottom: 5px;
}
#home #home-bottom-wrap #home-bottom-wrap-inner #right-features h3.dotted {
	background: url('../images/wrapper/red-dashed-divider-286.gif') 20px 100% no-repeat;
	margin-bottom: 13px;
	padding-bottom: 10px;
}
#home #home-bottom-wrap #home-bottom-wrap-inner #right-features #flikr-wrap {
	padding: 0 0 13px 20px;
}
#home #home-bottom-wrap #home-bottom-wrap-inner #right-features #flikr-wrap ul {
	padding-bottom: 20px;
	height: 120px;
}
#home #home-bottom-wrap #home-bottom-wrap-inner #right-features #flikr-wrap ul li {
	float:left;
	height:64px;
	margin-right:6px;
	margin-bottom: 6px;
	overflow:hidden;
	width:64px;
}

/* Sign Up form */
#home #home-bottom-wrap #home-bottom-wrap-inner #right-features #signup-form {
	padding-left: 20px;
}
#home #home-bottom-wrap #home-bottom-wrap-inner #right-features #signup-form label {
	display: block;
	margin-bottom: 10px;
}
#home #home-bottom-wrap #home-bottom-wrap-inner #right-features #signup-form #signup-wrap {
	background: #fff;
	width: 254px;
	height: 30px;
	padding: 3px 3px 1px 3px;
	border-top: 1px solid #003250;
	border-left: 1px solid #003250;
}
#home #home-bottom-wrap #home-bottom-wrap-inner #right-features #signup-form .email-field {
	display: block;
	width: 175px;
	float: left;
	margin-top: 6px;
}
#home #home-bottom-wrap #home-bottom-wrap-inner #right-features #signup-form .submit-btn {
	background: url('../images/btn-signup.gif') 0 0 no-repeat;
	display: block;
	float: right;
	width: 71px; 
	height: 28px;
	text-indent: -10000px;
	text-transform: capitalize;
	cursor: pointer;
}

/* =Main nav
---------------------------------------------------------------------------------------------------- */ 
#main-nav {
	background: url('../images/wrapper/main-nav-bg.jpg') 0 0 no-repeat;
	width: 984px; 
	height: 61px;
	position: relative;
	z-index: 9999;
}	
.fr #main-nav {
	background: url('../images/wrapper/main-nav-fr-bg.jpg') 0 0 no-repeat;
}
ul#menu {
	width: 984px;
	padding-top: 11px;
	position: relative;
}
ul#menu li a {
	display: block;
	height: 37px;
	text-indent: -9999px;
}
ul#menu li a#home-link {
	background: url('../images/menu-home.gif') 0 0 no-repeat;
	width: 53px;
	margin: 0 0 0 39px;
}
ul#menu li a#about {
	background: url('../images/menu-about.gif') 0 0 no-repeat;
	width: 83px;
	margin: 0 0 0 48px;
}
ul#menu li a#our-work-canada {
	background: url('../images/menu-work-canada.gif') 0 0 no-repeat;
	width: 182px;
	margin: 0 0 0 49px;
}
ul#menu li a#our-work-overseas  {
	background: url('../images/menu-work-overseas.gif') 0 0 no-repeat;
	width: 172px;
	margin: 0 0 0 49px;
}
ul#menu li a#take-action {
	background: url('../images/menu-take-action.gif') 0 0 no-repeat;
	width: 106px;
	margin: 0 0 0 49px;
}
ul#menu li a#join-us {
	background: url('../images/menu-join.gif') 0 0 no-repeat;
	width: 67px;
	margin: 0 0 0 49px;
}
/* French items */
.fr #main-nav ul#menu li a#home-link {
	background: url('../images/menu-home-fr.gif') 0 0 no-repeat;
	width: 58px;
	margin: 0 0 0 39px;
}
.fr #main-nav ul#menu li a#about {
	background: url('../images/menu-about-fr.gif') 0 0 no-repeat;
	width: 134px;
	margin: 0 0 0 27px;
}
.fr #main-nav ul#menu li a#our-work-canada {
	background: url('../images/menu-work-canada-fr.gif') 0 0 no-repeat;
	width: 169px;
	margin: 0 0 0 33px;
}
.fr #main-nav ul#menu li a#our-work-overseas  {
	background: url('../images/menu-work-overseas-fr.gif') 0 0 no-repeat;
	width: 203px;
	margin: 0 0 0 28px;
}
.fr #main-nav ul#menu li a#take-action {
	background: url('../images/menu-take-action-fr.gif') 0 0 no-repeat;
	width: 33px;
	margin: 0 0 0 31px;
}
.fr #main-nav ul#menu li a#join-us {
	background: url('../images/menu-join-fr.gif') 0 0 no-repeat;
	width: 161px;
	margin: 0 0 0 28px;
}
ul#menu li a:hover, ul#menu li a.active {
	background-position: 0 -37px !important;
}
ul#menu li a.current {
	background-position: 0 -37px !important;
}
ul#menu li ul {
	background: #fff;
	width: 200px;
	border-top: 1px solid #c5b7aa;
	border-right: 1px solid #c5b7aa;
	border-left: 1px solid #c5b7aa;
	margin: 4px 0 0 0;
	padding: 0;
}
ul#menu li ul li {
	line-height: 13px;
	border-bottom: 1px solid #c5b7aa; 
}
ul#menu li ul li ul {
	margin-left: 0;
}
ul#menu li ul li a {
	background: none;
	color: #cf0003;
	display: block;
	font-size: 12px;
	font-weight: bold;
	line-height: 13px;
	width: auto;
	min-height: 14px;
	height: auto !important;
	height: 14px;
	text-indent: 0;
	text-decoration: none;
	padding: 8px 10px 7px 10px;
} 
ul#menu li ul li a:hover {
	background: #cf0003;
	color: #fff;
}	
.sf-menu li:hover,
.sf-menu li.sfHover,
.sf-menu a:focus,
.sf-menu a:hover,
.sf-menu a:active {
	outline: 0;
}
/* Essential Styles - modify with caution */
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu ul {
	position: absolute;
	top: -999em;
	width: 10em;
	z-index: 9999;
}
.sf-menu ul li {
	width: 100%;
}
.sf-menu li:hover {
	visibility: inherit; /* Fixes IE7 'sticky bug' */
}
.sf-menu li {
	float: left;
	position: relative;
}
.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left: 0;
	top: 2.5em; /* Match top ul list item height */
	z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left: 200px; /* Match ul width */
	top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left: 10em; /* Match ul width */
	top: 0;
}
.sf-sub-indicator { /* Use if needed */
	position: absolute;
	display: block;
	right: .75em;
	top: 1.05em; /* IE6 only */
	width: 10px;
	height:	10px;
	text-indent: -999em;
	overflow: hidden;
}
/* Apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	margin: 0;
}
/* Main menu item styles */
#menu li.sfHover a, #menu li a.active {
	background-position: 0 -37px !important;
}

/* =Left column
--------------------------------------------------------------------------------------------------- */
#left-column {	
	float: left;
	width: 295px;
	position: relative;
	top: 14px;
	left: -31px;
}
#left-column .contact-us {	
	margin: 20px 0 0 47px;
}
	
/* =Left navigation
--------------------------------------------------------------------------------------------------- */
#left-nav-no {
	background: none;
	width: 295px;
}
#left-nav {
	background: url('../images/wrapper/left-nav-bg-repeat.gif') 8px 0 repeat-y;
	width: 295px;
}
#left-nav ul {
	background: url('../images/wrapper/left-nav-bg.jpg') 0 0 no-repeat;
	min-height: 300px;
	height: auto !important;
	height: 300px;
	padding-top: 25px;
}

#left-nav ul li {
	background: url('../images/wrapper/left-nav-divider.gif') 32px 100% no-repeat;
	width: 222px;
	padding-left: 33px;
	padding-bottom: 2px;
}
#left-nav ul li.last {
	background: none;
}
#left-nav ul li a {
	color: #000;
	display: block;
	min-height: 25px;
	height: auto !important;
	height: 25px;
	line-height: 16px;
	text-decoration: none;
	/*text-indent: 37px;*/
	padding: 10px 0 0 37px;
}
#left-nav ul li a:hover {
	background: url('../images/wrapper/left-nav-item-hover.png') 0 0 repeat-y;
}
#left-nav ul li a.current {
	background: url('../images/wrapper/left-nav-item-hover.png') 0 0 repeat-y;
	font-weight: bold;
	cursor: default;
}
#left-nav ul li ul {
	background: none;
	min-height: 0px;
	height: auto !important;
	height: 0px;
	padding: 0;
	margin: 0;
}
#left-nav ul li ul li  {
	background-position: 0 0;
	padding: 0;
	margin: 0;
}
#left-nav ul li ul li a {
	text-indent: 48px;
}
#left-nav ul li ul li a span {
	background: url('../images/wrapper/sub-item-bullet.gif') 0 7px no-repeat;
	padding-left: 12px;
}

/* =Global Contact Us
--------------------------------------------------------------------------------------------------- */
#contact-us {
	float: left;
	margin-top: 14px;
}

/* =Breadcrumb
---------------------------------------------------------------------------------------------------- */
#breadcrumb {
	background: url('../images/wrapper/breadcrumb-btm.gif') 0 100% no-repeat;
	color: #c90000;
	line-height: 16px;
	margin-bottom: 20px;
	padding-bottom: 19px;
}
#breadcrumb span {
	color: #b7b7b7;
	margin: 0 3px 0 3px;
}
#breadcrumb a {
	color: #5a5959;
}
#breadcrumb a:hover {
	color: #c90000;
}

/* =Links
---------------------------------------------------------------------------------------------------- */
a, a:link, a:focus{
	outline: none;
	color: #c60004;
}
a:hover {
	outline: none;
	color: #333333;
}

/* =lists
--------------------------------------------------------------------------------------------------- */
#main-content #text-content li {
	color: #434343;
	line-height: 18px;
}
#main-content #text-content ul {
	margin: 15px 0 15px 14px;
}
#main-content #text-content ul li {
	padding: 0 0 2px 13px;
} 
#main-content #text-content ol {
	list-style: decimal;
	margin: 15px 0 15px 32px;
}
#main-content #text-content ol li {
	list-style: decimal;
	padding: 0 0 2px 0;
}

/* =Typography
---------------------------------------------------------------------------------------------------- */
#main-content #text-content p {
	line-height: 20px;
	margin: 0 0 18px 0
}
#main-content #text-content h1 {
	color: #ca0001;
	font-family: 'times new roman', times, serif;
	font-size: 20px;
	margin: 0 0 16px 0;
}
#main-content #text-content h2 {
	color: #5a5959;
	font-size: 16px;
	font-weight: normal;
	margin: 0 0 16px 0;
}
#main-content #text-content h3 {
	color: #000;
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 16px 0;
}

/* =Footer
---------------------------------------------------------------------------------------------------- */
#footer {
	background: url('../images/wrapper/footer-bg.gif') 50% 0 no-repeat;
	color: #fff;
	font-size: 12px;
	width: 945px;
	min-height: 63px;
	height: auto !important;
	height: 63px;
	margin: -5px auto 0 auto;
	padding: 32px 0 0 39px;
	clear: both;
}
#footer a {
	color: #fff;
}
#home #footer {
	background: none;
}

/* =Forms
---------------------------------------------------------------------------------------------------- */
form {
	margin: 0;
	padding: 0;
}

fieldset {
	padding: 0 10px 10px 10px;
	border: 1px solid #333333;
	margin: 0;
}

input {
	border: 1px solid #333333;
}

.buttons
{
	color: #ca0001;
	font-weight: bold;
	background: #ffffff;
	border: #333333 1px solid;
	padding: 4px;
}

/* =Misc
---------------------------------------------------------------------------------------------------- */
.bio
{
	padding: 4px 0 4px 0;
}