@charset "utf-8";

/*
==========================================================================
	
	STYLE.CSS | CSS FRAMEWORK
	--------------------------
 	Main Project specific styles
	
	- PROJECT NAME HERE -

	Contents:
	--------------------------
	1 - Default Typography Sizing, Colours and Margins
	2 - Global Styles for types
	3 - Main Structural Divs
	4 - Header styles
	5 - Main body Styles
	6 - Footer Styles
	7 - Page Specific styles
	8 - CMS Overrides

==========================================================================
*/

	@import url("base.css");
	@import url("forms.css");

/*
==========================================================================
1 - Default Typography Sizing, Colours and Margins
==========================================================================
*/
body { color:#000; font-size:0.8em; line-height:1.2em; text-align:center; font-family:Helvetica,Arial,sans-serif;font-style:normal;font-weight:normal;font-variant:normal; }
body { background:#c7c7c7 url(../images/structure/bg/bg-inner.png) repeat-x scroll 0 0; }
body.home { background:#c7c7c7 url(../images/structure/bg/bg-home.png) repeat-x scroll 0 0;}
table tr td {vertical-align:top;}
/*
==========================================================================
2 - Global Styles for types
==========================================================================
*/
/* links */
a:link, a:visited { border-bottom:0px none; color:#900; }
a:hover, a:active { border-bottom:1px solid #999; }
/* remove dotted outlines in FF */
a:hover, a:active, a:focus { outline-style:none; outline-width:medium; }

a:link.external, a:visited.external { background: transparent url(../images/structure/bg/external.gif) top right no-repeat; padding-right: 12px; }

/* list types */
ul { margin-left:25px; }
ul li { }

ol { margin-left:25px; }
ol li { /*list-style-type:lower-alpha;*/ list-style-position:inside; }

.container ol.blogsitesummary { margin-left:0px; list-style-position:outside; }
.container ol.blogsitesummary li { /*list-style-type:lower-alpha;*/ list-style-position:outside; }

dl {}
dl dt { font-weight:bold; }
dl dd img { display:inline; }

/* blockquotes */
blockquote { background-color: #F5F5F5; margin-bottom: 1em; }
blockquote p { font-family: georgia, "times new roman", serif; color: #CCC; font-size: 1.5em; margin: 5px 5px 5px 10px; }
blockquote cite { font-style: normal; color: #CCC; font-weight: bold; }

/* strong */
strong.error { color: #F00; }

/* em */
em.required { color: #F00; font-weight: bold; font-style: normal; }

/* headers */
h1, h2, h3, h4 { color: #333; }

/* box model padding */
p, blockquote { padding:10px 0px 5px; }
h1, h2, h3, h4 { padding:14px 0px 5px; width:100%;text-transform:uppercase;font-weight:bold;color:#940223;border-bottom:2px solid #a5334d; }
h1 { font-size:26px; line-height:24px; padding:25px 0px 0px 0px }
h2 { font-size:17px; }

/*
==========================================================================
3 - Main Structural Divs
==========================================================================
*/
.thrColAbs #globalContainer { position:relative;width:100%;margin:0px auto;overflow:hidden;background:transparent url(../images/structure/header/bg-inner-container.png) repeat-x scroll left top; } 
.thrColAbs #container { 
	position: relative; /* adding position: relative allows you to position the two sidebars relative to this container */
	width: 954px;  /* using 20px less than a full 900px width allows for browser chrome and avoids a horizontal scroll bar */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-color: transparent;
}

/* Tips for absolutely positioned sidebars:
1. Absolutely positioned (AP) elements must be given a top and side value, either right or left. (As a default, if no top value is given, the AP element will begin directly after the last element in the source order of the page. This means, if the sidebars are first element in the #container in the document's source order, they will appear at the top of the #container even without being given a top value. However, if they are moved later in the source order for any reason, they'll need a top value to appear where you desire.
2. Absolutely positioned (AP) elements are taken out of the flow of the document. This means the elements around them don't know they exist and don't account for them when taking up their proper space on the page. Thus, an AP div should only be used as a side column if you are sure the middle #mainContent div will always contain the most content. If either sidebar were to contain more content, that sidebar would run over the bottom of the parent div and the sidebar would not appear to be contained.
3. If the above mentioned requirements are met, absolutely positioned sidebars can be an easy way to control the source order of the document.
*/
.thrColAbs #leftSideBar { position:absolute; top:0px; left:0px; width:200px; background-color:#EBEBEB; } /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
.thrColAbs #rightSideBar { position:absolute; top:0px; right:0px; width:200px; background-color:#EBEBEB; } /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
.thrColAbs #mainContent { position:relative; float:left; font-family:Arial, Helvetica, sans-serif;background-color:#F7F7F7;margin:0px auto;width:954px;min-height:500px; } /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. */
.thrColAbs #header { width:100%;height:151px;text-align:left; background-color:#f3f3f3; border-bottom:1px solid #fff; }
.thrColAbs #footer { width:100%;height:154px;text-align:left; background:#a90329 url(../images/structure/header/bg-footer.png) repeat-x scroll left top; }

.home #leadInHeader { width:100%;height:176px;text-align:left; }
#leadInHeader { width:100%;height:130px;text-align:left;  }

.container { position:relative; }
#header .container { margin:0px auto;width:954px;height:151px;overflow:hidden; }
#footer .container { margin:0px auto;width:954px;height:auto;text-align:right; }

.home #leadInHeader .container { z-index:99999;position:relative;margin:0px auto;width:954px;height:176px; }
#leadInHeader .container { position:relative;margin:0px auto;width:954px;height:130px;}

#lhs-main {width:655px; margin:0px; padding:0px; float:left}


#rhs-main {width:240px; margin:45px 0px 0px 36px; padding:0px; float:left}

/*
==========================================================================
4 - Header styles
==========================================================================
*/
#header a:hover, #header a:focus, #header a:active { border:0px none;text-decoration:none; }
#leadInHeader a:hover, #leadInHeader a:focus, #leadInHeader a:active { border:0px none;text-decoration:none; }

#header #logo-title { z-index:5;position:absolute;bottom:1px;left:0px;text-transform:uppercase;font:bold 31px Helvetica, Arial, sans-serif; }
#header #dnaStrand { z-index:0;position:absolute;top:0px;left:0px;width:719px;height:152px;background:transparent url(/images/structure/header/bg-header-dna-v2.jpg) no-repeat left top; }

ul#navs { z-index:10;position:absolute;top:0px;left:0px;margin:0px; }
ul#navs li { list-style:none;float:left; border-left:2px solid #73001b;border-right:1px solid #b8828e; }
ul#navs li.first { border-left:0px none; }
ul#navs li.last { border-right:0px none; }
ul#navs a { display:block;text-transform:uppercase;padding:10px 12px 0px;font:bold 13px Helvetica, Arial, sans-serif;color:#333; }
ul#navs a:hover,ul#navs a:active,ul#navs a:focus,ul#navs .current a { color:#990728; }

a#btn-login {
	width:69px;
	height:31px;
	position:absolute;
	top:0px;
	right:0px;
	background:transparent url(../images/structure/img/btn-login.png) no-repeat scroll left top;
}
a:hover#btn-login,a:active#btn-login,a:focus#btn-login { background-position:right top; }

a#btn-disclaimer { z-index:9999; width:89px;height:31px;position:absolute;top:36px;right:0px;background:transparent url(../images/structure/img/btn-disclaimer.png) no-repeat scroll left top; }
a:hover#btn-disclaimer,a:active#btn-disclaimer,a:focus#btn-disclaimer { background-position:right top; }

a#btn-donate { width:169px;height:35px;position:absolute;top:40px;right:0px;background:transparent url(../images/structure/img/btn-paypal.png) no-repeat scroll left top; }
a#btn-donation { width:107px;height:49px;position:absolute;top:40px;right:0px;background:transparent url(../images/structure/img/btn-donate-inner.png) no-repeat scroll left top; }
a#btn-donation-home { width:107px;height:49px;position:absolute;top:112px;right:5px;background:transparent url(../images/structure/img/btn-donate-inner.png) no-repeat scroll left top; }

.home #leadInHeader #earth-man-top { position:absolute;right:11px;top:-79px; }
.home #leadInHeader #earth-man-bottom { position:absolute;right:11px;top:-4px; }
#leadInHeader #earth-man-top { position:absolute;right:40px;top:-114px; }
#leadInHeader #earth-man-bottom { position:absolute;right:40px;top:-4px; }

blockquote.leadin { background-color:transparent; width:470px;position:absolute;left:5px;top:0px;margin:0px; }
blockquote.leadin p { color:#BDBDBD;font-family:Arial,Helvetica,sans-serif;font-size:1.4em;font-style:italic;font-weight:normal;line-height:1.2em;margin:0px; }

ul.quicklinks {
    height: 71px;
    left: 0;
    margin: 0;
    overflow: hidden;
    position: absolute;
    top: 95px;
    width: 584px;
}
ul.quicklinks li {
    float: left;
    height: 73px;
    list-style: none outside none;
    margin: 0 15px 0 0;
    width: 277px;
}

ul.quicklinks a {
    background: url("../images/structure/bg-header-description.png") no-repeat scroll left top transparent;
    color: #333333;
    display: block;
    font-size: 18px;
    font-weight: bold;
    height: 51px;
	line-height:1.5;
    text-indent: 13px;
    width: 259px;
	padding:10px;
}

ul.quicklinks a span {
	font-size:12px;
	color:#990000;
	font-style:italic;
	font-weight:normal;
	padding:10px;
}


ul.quicklinks a:hover,ul.quicklinks active,ul.quicklinks a:focus { background-position:right top;border:0px none; }
/*
==========================================================================
5 - Main content styles
==========================================================================
*/

/* #leftSideBar styles */
.thrColAbs #leftSideBarPadding { padding:15px 10px 15px 20px; }
#leftSideBar {}

/* #rightSideBar styles */
.thrColAbs #rightSideBarPadding { padding:15px 10px 15px 20px; }
#rightSideBar {}

/* #mainContent styles */
.thrColAbs #mainContentPadding { float:left; padding:20px 0px 0px 20px; float:left; }
#mainContent {}

/*
==========================================================================
6 - Footer styles
==========================================================================
*/
#footer .container { padding:50px 10px 0px 0px;color:#fff; }
#footer p { padding:0px; }

ul#foot-nav { float:right;margin:0px; }
ul#foot-nav li { list-style: none; float:left; font-size: 12px; padding-left:4px; margin-left: 0px; }
#foot-nav a { color: #fff;font-family:Arial, Helvetica, sans-serif; }
#foot-nav a:hover, #foot-nav a:active {  color: #999; }

/*
==========================================================================
7 - Page specific styles
==========================================================================
*/
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* homepage */
.homeColumnContainers { width:914px; }
.home-2-Column { width:676px; }

.homeContent { width:410px;float:left;margin:0px; }
.homeResources { background-color:#EEE;float:left;margin:3px 0px;width:232px; }
.top-margin {margin:60px 0px 15px 0px;}
.col { width:222px;float:left;margin:0px 10px 0px 0px; }

.homeColumnContainers .container { padding:5px 0px 10px; }
.homeColumnContainers .container ul, .homeColumnContainers .container ol, #rhs-main .container ol, #mainContentPadding .container ol { margin:0px; }
.homeColumnContainers .container li, #rhs-main .container li, .homeColumnContainers .faqs p, #mainContentPadding .container li { list-style:none;padding:5px 5px 5px 0px;border-bottom:1px solid #ccc; }
.homeColumnContainers .container li a, #rhs-main .container li a, .homeColumnContainers .faqs p a, #mainContentPadding .container li a, { color:#424242; }
.homeResources h2 { padding:0px;text-indent:20px;height:33px;line-height:33px;color:#fff;font-size:13px;border:0px none; background:#a5334d url(../images/structure/header/bg-header-gradient.png) repeat-x scroll left top; }
.homeColumnContainers .homeResources .container { padding:5px 10px 10px; }

.welcomeBlog .blog-post h2.post-title { font-size:16px; padding:14px 0px 5px; }
.welcomeBlog .blog-post .post-details { margin:0px; }
.welcomeBlog .blog-post .post-body { margin:0px 0px 14px; }

/* resources */
.pageContent {
    float: left;
    margin: 0;
    padding-top: 10px;
    width: 670px;
}

.leftContent {
    float: left;
    left: 20px;
    margin: 27px 0px 0px 20px;
    width: 227px;
}

#cat_246202_divs, #cat_255274_divs {
    background-color: #E4E4E4;
}

#cat_246202_divs ul, #cat_255274_divs ul { padding:10px; margin:0px; }
#cat_246202_divs li, #cat_255274_divs li { list-style:none;padding:5px;border-bottom:1px solid #ccc; }
#cat_246202_divs li a, #cat_255274_divs li a { color:#424242; }

/* Hilarys Desk */
.blog .leftContent h4 { display:block;border-bottom:1px solid #D6D6D6;color:#333;font-size:12px;margin:0px;padding:10px 0px 0px;text-indent:5px; }
.blog .leftContent li { color:#E4E4E4; }
.blog .leftContent li .date { display:none; }

/*
==========================================================================
8 - CMS Overrides
==========================================================================
*/ 

/* homepage */

/* FAQs page overrides */
.faq-details { 
	background:#eee;
	margin:5px 0px 20px 20px;
	padding:20px; }
.faq-details .answer {  }
.faqsAjaxContainer .answer { padding:10px; background-color:#CCCCC; }
.faqsAjaxContainer h1,.faqsAjaxContainer .moduleFooter { display:none; }

/* forms */
table.webform td { line-height:24px;padding:0px; }
.form label, .webform label { font-size:1em; }
form input, form select, form textarea { color:#111; }

/* Blog overrides */
.container ol.blogsitesummary { margin:0px; padding:0px; text-indent:0px; list-style-position:inside; }
.container ol.blogsitesummary li { margin-left:0px; text-indent:0px; list-style-position:inside; padding-left:0px; }
.container ol.blogsitesummary li a { margin-left:0px;  text-indent:0px;}


/* BRIAR add your stuff here - code is art, lol :-p */
.blog-post h2.post-title {
border-bottom:1px solid #CCCCCC;
color:#333333;
margin:20px 0px 0px;
padding:0pt 0pt 3px;
text-transform:none;
font-size:15px;
}

.blog-post .post-details {
color:#888888;
font-size:11px;
margin:0px;
}

.blog-container .post-list {
    float: left;
    margin: 0px 40px 0px 0px;
    width: 651px;
}

.blog-container .side-panel {
float:left;
width:210px;
margin:10px 0px 0px;
}

.side-panel h4 {
color:#333333;
font-size:12px;
padding:10px 0px 0px 10px;
border-bottom:1px solid #d6d6d6;
margin:0px;
}

.BlogRecentPost li, .BlogTagList li, .BlogPostArchive li {
border-bottom:1px solid #d6d6d6;
font-size:11px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px;
padding:7px 0px;
}

.BlogRecentPost a:link, .BlogPostArchive a:link{
border-bottom:0px none;
color:#333;
}

.BlogRecentPost a:hover, .BlogPostArchive a:hover {
border-bottom:0px none;
color:#000;
}

.gray-bg {
	background:#e4e4e4;
	margin:10px 0px 0px 0px;
padding:5px;
}

p.literature-container span.icon, p.literature-container span.name {
	float:left;
}

.container img {	
	display:inline;
	margin:4px;
}

h3 {
	border-bottom:1px solid #CCCCCC;
	color:#333333;
	font-weight:bold;
	padding:14px 0px 5px;
	text-transform:uppercase;
}

h4 {
	background:#CCCCCC none repeat scroll 0%;
border:medium none;
color:#000000;
padding:10px;
width:auto;
}
input.cat_textbox, textarea.cat_listbox, select.cat_dropdown, select.cat_listbox {
width:200px;}


input#fullname, input#website, input#emailaddress, input#Captcha {
width:200px;}

.secure-login, .newsletter-form {
	margin: 0px 20px;
}

.faq-question {
	padding:5px 0px;
	border-bottom:1px #CCCCCC solid;
}

.faq-question a {
	color:#333333;
}

.BlogRecentPost li, .BlogTagList li, .BlogPostArchive li {
padding:7px 10px;
}

.gray-bg {
	padding:0px;
}

.thrColAbs #mainContentPadding {
    padding: 20px 0 40px 20px;
    width: 932px;
}

#footer a {
	color:#FFFFFF;
}

#footer a:hover, #foot-nav a:active {
	color:#999999;
}

/** TAG CLOUD STYLES **/

.BlogTagCloud {
	margin:10px 0px 10px 10px;
}

.BlogTagCloud a:link, .BlogTagCloud a:visited, .BlogTagCloud a {
	color:#333333;
}

.BlogTagCloud-XX-Small {
	font-size:10px;
	color:#666666;
}

.BlogTagCloud-X-Small {
	font-size:14px;
	color:#333;
}

.BlogTagCloud-Small {
	font-size:15px;
	color:#ccc;
}

.BlogTagCloud-Medium  
{
	font-size:12px;
	font-weight:bold;
	color:#fff;
}

.BlogTagCloud-Large {
	font-size:16px;
	color:#000;
}

.BlogTagCloud-X-Large {
	font-size:17px;
	font-weight:bold;
	color:#636363;
}

.BlogTagCloud-XX-Large {
	font-size:18px;
	color:#999;
}

.who-logged-in {
    bottom: 21px;
    position: absolute;
    right: 11px;
    width: 150px;
}

li .author {
	display:none;
}

.search-box input.cat_textbox_small {
width:90px;
}

.gray-bg .form {
padding-bottom:12px;
}

.search-box {
	padding:5px;
	width:150px;	
}

#secure-header {
	position:absolute;
	bottom:2px;
	right:0px;
	height:30px;
}

#secure-header a {
	color:#CCC;
	text-decoration:none;
}

#secure-header a:hover {
	color:#FFF;
	text-decoration:underline;
}

#secure-header ul .resources {
	float:left;
	height:20px;
	padding:10px 0px 0px 0px;
	margin:0px 6px 0px 3px;
	list-style:none;
}

#secure-header ul .blog {
	margin:0px 2px;
	height:20px;
	padding:10px 0px 0px 0px;
	float:left;
	list-style:none;
}

#secure-header ul .members-only {
	margin:0px 2px;
	float:left;
	height:20px;
	padding:10px 0px 0px 0px;
	color:#FFFFFF;
	list-style:none;
	background:none;
}

/** FORUM OVERRIDES **/

.forum-posts-container h2 {
width:680px;
}

table.forum h3 {
	border:none;
}

.forum-search-box {
	background:#E0E0E0 none repeat scroll 0% 50%;
	border-bottom:1px solid #999999;
	border-top:1px solid #999999;
	color:#222222;
	font-weight:normal;
	height:24px;
	margin:5px 0px;
	padding:12px;
	position:relative;
}

.forum-search-box input#CAT_Search {
	border:1px solid #fff;
	font-size:14px;
	margin:0pt 3px;
	position:relative;
	top:2px;
	width:260px;
	height:15px;
}

.forum-search-box {
	display:block;
}

.forum-search-box form {
	float:left;
}

.forum-search-box p {
	float:left;
	width:100px;
}

.forum-search-box input.search-button {
	padding:0pt;
	vertical-align:middle;
}

table.topic-list a {
	color:#940223;
}

table.topic-list a:hover {
	border-bottom:#940223 solid 1px;
}

.forum-posts-container form {
	padding-bottom:0px;
}

.forum-posts-container td.author {
	font-size:11px;
	width:160px;
}

table.forum td.lastpost {
	width:100px;
}

table.forum td.posts, table.forum td.topics {
	width:60px;
}

table.forum .forum {
	margin:0pt 0pt 0pt 10px;
}


form label {
	color:#990000;
	margin:0 10px 0 0;
	text-align:right;
}

/* drop down menu styles */
ul#navs li {
	position: relative;
}
ul#navs div.subMenuWrapper {
	/*height: 200px;*/
	left: 0px;
	overflow: hidden;
	position: absolute;
	top: 27px;
        width: 180px;
}
ul#navs div.subMenu {
	margin-top: -100px;
}
ul#navs div.subMenu div {
        background: url(../images/structure/bg/menu-bg.jpg) repeat-x top left;
        height: 29px;
        /* Webkit cannot handle positioned elements overlapping and animating */
        position: relative;
        z-index: 50;
}
/* Not used - thank you IE */
ul#navs div.subMenuHidden {
	margin-top: -100px;
}
ul#navs div.subMenuDisplay {
	margin-top: 0px;
}
img#earth-man-top2 {
	bottom: 0px;
	margin: 0px;
	position: absolute;
	right: 15px;
}

.homeResources h3 {
	margin:0px 10px 0px 10px;
	width:212px;
}

.home-right-side {
	float:left;
	margin:0px 0px 0px 32px;
	padding:0px;
	width:220px;
}

#rss {
	position:absolute;
	top:92px;
	right:0px;
	z-index:9999;
}

#search-site-wide {
position:absolute;
right:10px;
top:14px;
width:210px;
height:33px;
padding:12px;
background:url(/images/structure/bg-search-box.png) no-repeat;
}

#search-site-wide div {
	float:left;
	}
	
.cat_search {
	height:20px;
	padding:2px;
	font-size:14px;
	color:#990000;
	font-style:italic;
	width:160px;
}

.submit {
	margin:0px 0px 0px 6px;
	}
	
.disclaimer-button {
	position:absolute;
	z-index:9999999999999;
	bottom:5px;
	right:246px;
}

img.inside-man {
	position:absolute;
	top:-125px;
	right:100px;
}

img.home-man {
	position:absolute;
	top:-89px;
	right:100px;
}

.home-description {
	background:url(../images/structure/bg-header-description.png no-repeat;
	float:left;
	margin:0px 10px 0px 0px;
	width:300px;
}