/* ------------------------------------------
Wellcome Tree of Life Styles
Author: Reading Room
Updated: 
------------------------------------------ */

/*----------------------------------------------------------RESET STYLES---------------------------------------------------------- */

html, body, div, span, applet, object,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, acronym, address, big, cite, code,
del, em, img, ins, q, samp,
small, strike, strong, sub, sup,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	padding:0; border:0; margin:0; font-size:100%; vertical-align:baseline; background:transparent;
}

ul {list-style:none;}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}

strong {font-weight:bold;}
em {font-style:italic;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:collapse; border-spacing:0;}

body {line-height:1;}


/*----------------------------------------------------------Layout----------------------------------------------------------*/
body{background:#000; font-size:62.5%;color:#444;}
/*.wrapper{width:954px; margin:0 auto; z-index:1;}*/
.wrapper{width:1004px; margin:0 auto; z-index:1;}
/*cols*/
.col{float:left; margin-right:36px;}
.g50{width:390px;}
.g75{width:590px;}
.g25{width:177px;}
.col.last{margin-right:0;}

#content .wrapper{margin-top:30px; position:relative;}
#content .wrapper .container{background:#fff; float:left; padding:0 92px; width:820px;}
#content .wrapper .container.higher{background:#bbe1f3 url(/images/blue-radial-grad.jpg) no-repeat 50% 0; float:left;}
#content .wrapper .container.lower{padding-bottom:15px;}
#content .wrapper .container.interactive{padding:0; width:1004px;}
/*----------------------------------------------------------General Styles----------------------------------------------------------*/
body{font-family:arial, sans-serif; background:#000 url(/images/line.gif) repeat-x 0 93px;}
p{color:#444; font-size:1.3em; margin:0.8em 0; line-height:1.4em;}
a{color:#a7c1e3 ; text-decoration:none;}
#content a{color:#580051;}
a.blockLink{background:url(/images/bullet.gif) 0 0.4em no-repeat; padding-left:10px !important; display:block; clear:both;}
a:hover{text-decoration:underline;}
#alt a{text-decoration:underline;}
.print{display:none;}
h2{font-size:5.4em; font-weight:bold; color:#000; letter-spacing:0.01em;}
h2 span.subheading{font-size:0.8em; display:block; padding-top:0.3em;}
h2 a{background:url(/images/back-arrow.gif) 100% 50% no-repeat; padding-right:25px; font-weight:normal;}
h3{font-size:2em; font-weight:bold; color:#26546a; margin-top:0.8em;}
h3.list{margin:1em 0 0.5em 30px;}
h3.pad{margin:1em 20px;}
h5{font-size:1.2em; margin-top:0.4em;}
img.pad{margin:2em 0 0 0;}
p.left{float:left; display:block;}
p.intro{font-size:1.7em; line-height:1.2em;}
a.addThis{background:url(/images/btn-addThis.gif) no-repeat 0 0; font-size:1.2em;
		padding:2px 0 2px 25px;  margin-top:1em; display:block; clear:both;}
a.addThis.right{clear:none;}
a.rss{background:url(/images/btn-rss.gif) no-repeat 0 0; font-size:1.2em;
		padding:2px 0 2px 25px;  margin-top:1em; display:block; clear:both;}

div.addthisContainer{width:100%; float:left;}
ul.bullets{font-size:1.3em; line-height:1.3em; margin-top:1em;}
ul.bullets li{background:url(/images/bullet.gif) 0 0.5em no-repeat; padding-left:15px; margin-left:10px;}
a.left, span.left{float:left;}
a.right, span.right, p.right{float:right; margin-left:1em;}
.left{float:left;}
blockquote{border-left:2px solid #a7c1e3; margin:20px 20px 0; padding-left:20px;}
p cite{margin-left:42px; font-size:0.8em; font-style:normal;}


	/*Buttons*/
	span.button{margin:0 1em -0.7em 0;}
	span.button{display:inline-block;}
	span.button a{background:#000 url(/images/bg-btn-r.gif) top right no-repeat; color:#fff !important; border:none; outline:none; text-decoration:none;
				height:27px; display:inline-block; position:relative; margin-bottom:0.5em; }
	span.button a span{background:url(/images/btn-left.gif) top left no-repeat; cursor:pointer;
					height:11px; padding:5px 1.3em 11px 1.3em; display:inline-block;}
	.lower span.button a span {background:url(/images/btn-left-white.gif) top left no-repeat; }
	span.button a:hover, 
	span.button a:focus,
	button:hover,
	span.button.down a,
	button:focus{background-position:bottom right; text-decoration:none;}

	span.button a:hover span, 
	span.button a:focus span,
	button:hover span,
	span.button.down a span,
	button:focus span{background-position:bottom left; text-decoration:none;}
	
	span.bdl.button{margin:0.5em 0 0.5em 20px;}
	
	
/*----------------------------------------------------------Header----------------------------------------------------------*/
#header{position:relative; background: url(/images/bg-body.png) repeat-x top; z-index:1;}

#header .wrapper{height:186px; margin-bottom:-50px; position:relative;}
	
	/*Logo*/
	#header #branding{width:305px; height:46px; position:absolute; top:69px; overflow:hidden;}
	
	#header #branding h1{font-size:3.4em; padding:3px; margin:10px 0 0 20px; text-decoration:none;}
	#header #branding span{background:#000 url(/images/wellcome-tree-of-life-logo.png) no-repeat top left; position:absolute; top:0; left:0; width:100%; height:100%;}
	#header #branding a:hover span{background-position:bottom left;}
	#header #branding a:hover {text-decoration:none;}
	
	#header #branding img{display:none;}

#header #wellcome-link{position:absolute;  color:#ddd; top:0; right:0; z-index:11;}
#header #wellcome-link a{font-weight:bold; color:#ddd;}
	
	/*Navigation*/
	#mainNav{height:50px; position:absolute; right:0; top:68px; padding:0 0 0 50px; 
			background:#000 url(/images/nav-top-left.gif) 0 0 no-repeat;}
	#mainNav ul{height:100%; font-size:1.9em; font-weight:bold; padding:0 50px 0 0;float:left; background:url(/images/nav-top-right.gif) top right no-repeat;}
	#mainNav ul li{float:left; display:inline-block; margin:0 14px;}
	#mainNav ul li a{text-decoration:none;}
	#mainNav ul li a:hover{color:#fff;}
	#mainNav div.extraContainer{clear:both; position:absolute; top:35px;height:2em;margin-left:-70px; 
								text-align:center; width:100%;}
	#mainNav div.extraContainer span.extra{margin:0 auto; display:inline; padding-left:30px; position:relative; width:270px;
				color:#fff; font-size:1.2em; background:#000 url(/images/star.gif) 0 -1px no-repeat;}
	#mainNav div.extraContainer span.extra span{width:100%; display:inline-block; padding:3px 30px 2px  0; background:#000 url(/images/star-right.gif) 100% -1px no-repeat;}
	
	#mainNav div.extraContainer span.extra{display:none;}
	
	.interactive li.n1 a,
	.blogPage li.n2 a,
	.resources li.n3 a,
	.about li.n5 a,
	.videoPage li.n4 a{color:#fff;}
	
	/*Secondary Navigation*/
	.secNav ul{margin-top:15px; font-size:1.2em; }
	.secNav ul li{width:100%;}
	.secNav ul li a{background:#26546a; color:#fff !important; 
				display:block; padding:0.3em 1em; margin:0.3em 0; }
	.secNav ul li a:hover{background:#062c3e; text-decoration:none;}
	.secNav ul li.active a{background:#580051;}
	
	/*Tertiary Navigation*/
	.secNav ul li ul li a{background:#e4f3fa !important;}
	.secNav ul li ul li.active a,.secNav ul li ul li.active a:hover{background:#580051 !important; color:#fff !important;}
	
	.secNav ul li ul{margin-top:0; font-size:1em; line-height:1.1em; background:#e4f3fa; border-bottom:#cde9f5 2px solid;}
	.secNav ul li ul li a,.secNav ul li.active ul li a{margin-top:0; background:none; color:#26546a !important;}
	.secNav ul li ul li a:hover{background:#cde9f5 !important; text-decoration:none;}
	
	

/*----------------------------------------------------------Content Area----------------------------------------------------------*/

/*HomePage*/
.home .container.higher .g50 img{margin-top:28px;}
.home .container.higher h2{margin-top:28px;}
.internal .container.higher h2{margin-top:15px; font-size:3.64em; padding-bottom:0.2em;}
.spotlight img{float:left; margin:15px 15px 10px 0;}
.spotlight img.last{margin-right:0;}



.video a{position:relative; z-index:100;
		margin:10px 0; display:block; 
		font-size:1.3em;text-decoration:none;}
.video a span{display:block; margin:-1px  0 0 0; padding:0.5em 0.5em 0.5em 1.5em;
			background:#000 url(/images/btn-pic.jpg) no-repeat top left; color:#fff; text-decoration:none;}
.video a:hover span{text-decoration:underline;}

.blog p {border-bottom:1px solid #ccc; padding-bottom:0.3em;}
.blog p.link {border:none; padding-bottom:0;}

.blog p span{display:block; font-size:0.8em;}




/*Listing Page*/
.sort{width:100%; display:block; clear:both; font-size:1.2em; margin-bottom:20px; position:relative; z-index:1;}
.sort{border-color:#e7e7e7 !important; border-top:1px solid; border-bottom:2px solid; float:left;}
.sort h4, .sort ul li{float:left; padding:8px 10px; position:relative; z-index:2;
				margin:-1px 0 -2px 0;
				border-color:#e7e7e7 !important; border-top:1px solid; border-bottom:2px solid;}
.sort h4{text-transform:uppercase; background:#26546a; border-color:#17394d !important; color:#fff;}
.sort ul li a{padding-right:20px; background-image:url(/images/sort.gif); background-repeat: no-repeat; background-position: 100% 7px;}
	/*Descending*/
	.sort ul.ft.desc li.sft a,
	.sort ul.spec.desc li.sspec a,
	.sort ul.az.desc li.saz a{background-position:100% -29px !important;}
	/*Ascending*/
	.sort ul.ft.asc li.sft a,
	.sort ul.spec.asc li.sspec a,
	.sort ul.az.asc li.saz a{background-position:100% -65px !important;}

	.sort ul li.active,
	.sort ul.ft li.sft,
	.sort ul.spec li.sspec,
	.sort ul.az li.saz{background:#e4f3fa; border-color:#cde9f5 !important;}

/*File listing*/
.cat{clear:both;}
.cat ul{border-bottom:1px solid #d0d0d0; margin-bottom:20px; width:100%; clear:both;}
.cat ul li {display:block; float:left; width:100%; padding:5px 0; border-top:1px solid #d0d0d0; }
.cat ul li .icon{width:64px; height:60px; display:block; background:green; float:left; margin:3px 10px 3px 0;}
.cat ul li p{font-size:1em; padding:0; margin:0.3em 0 0 0; height:2em;}
.cat ul li p span{float:left; }
.cat ul li p a{float:right; padding-right:10px;}


.cat ul li h4{font-size:1.6em; padding-top:3px;}

ul.files{font-size:1.2em; /*background:#e4f3fa; padding:10px;*/ border-bottom:1px solid #ccc; padding-bottom:10px; margin-bottom:15px;}
ul.files li{margin:0.8em 0;}
a.pdf{background:url(../images/ico-pdf.png) 0 0 no-repeat; padding:0 20px 2px;}
a.doc{background:url(../images/ico-mswd.png) 0 0 no-repeat; padding:0 20px 2px;}
	
	/*Hover Stuff*/
	.cat ul li:hover,.cat ul li.hoverforie{background:#e4f3fa !important; }
	.cat ul li p span,.cat ul li p a{display:none;}
	.nojs .ie6 .cat ul li p span,
	.nojs .ie6 .cat ul li p a{display:block;} /*Displays with no rollover if using IEs without JS*/
	.cat ul li:hover p span,.cat ul li.hoverforie p span,
	.cat ul li:hover p a,.cat ul li.hoverforie p a{display:block;padding-top:0.6em;}

	/*File Type Icons*/
	.cat ul li.imaya3dmodels .icon{background:url(../images/3dicon.png) 0 0 no-repeat;}
	.cat ul li.iflash .icon{background:url(../images/ico-flash.png) 0 0 no-repeat;}
	.cat ul li.iimages .icon{background:url(../images/ico-img.png) 0 0 no-repeat;}
	.cat ul li.ivideo .icon{background:url(../images/ico-video.png) 0 0 no-repeat;}
	.cat ul li.ixml .icon{background:url(../images/ico-xml.png) 0 0 no-repeat;}
	.cat ul li.idocuments .icon{background:url(../images/ico-doc.png) 0 0 no-repeat;}
	.cat ul li.ipsd .icon{background:url(../images/ico-psd.png) 0 0 no-repeat;}

	
.also{background:#e4f3fa; padding:1px 10px 10px; margin-top:10px; border-bottom:2px solid #CDE9F5;}
.also ul li a{height:1%; margin:0.3em;}
.also a:hover{text-decoration:underline;}
.also a:hover{text-decoration:underline;}
.blank{background:none; border:none;}

/*Content Pages*/
.internal .col img{margin:15px 0; display:block;}
.internal .col img.imgRight{float:right; margin-left:15px; margin-top:0;}
.internal .col img.imgLeft{float:left; margin-right:15px; margin-top:0;}
.internal .col img.beforeIntro{margin-top:15px;}

.internal .col .item .icon{margin:0 10px 0 0;}

.item{clear:both;margin-bottom:1em;}

.item .icon{width:80px; height:80px; background:#b2b2b2; float:left; margin:0 10px 0 0;}
.item h3{margin-top:0;}

/*BLOG*/
.blogPost{border-top:1px solid #ccc; margin-top:20px;}
.blogPost span.date {display:block; margin-top:-0.5em; margin-bottom:0.8em;}
.blogPost span.date em{background:#fff;padding:0 8px; font-style:normal; margin-left:10px;}
.blogPost h3{margin:5px 0 0 0; padding:0;}
.blogPost{margin-bottom:20px; padding-bottom:10px; }
.blogPost .blogStuff{display:block; background:#e4f3fa; padding:10px 5px 20px; border-bottom:2px solid #CDE9F5;}
.comment{font-size:0.8em; border-bottom:2px solid #ddd; background:#efefef; padding:10px; margin-bottom:10px;}
.comment .date{font-size:1.2em;}
.comment h3{margin-top:0.5em;}
.pagination{float:left; width:100%;}

/*Embedded Video Player*/
#vid{width:640px; height:385px; margin-bottom:20px; margin-right:-50px;}
embed{position:relative; z-index:10; }
object {position:relative; z-index:110 !important; outline:none;}
.size{margin-left:20px;}

/*Flash Content*/
#interactiveContainer{width:1004px	; height:565px;}
.container.interactiveFlash{background:#090d11 !important;}

/*Animals*/
#content .wrapper .animal{position:absolute; background:green; z-index:12;}
.home #content .wrapper .animal{bottom:-120px; right:-150px; width:384px; height:223px; background:url(/images/whale.png) no-repeat;}
.aboutUs #content .wrapper .animal{bottom:-110px; right:-40px; width:273px; height:174px; background:url(/images/lizardything.png) no-repeat;}

/*Generic Forms*/
fieldset label{float:left; width:120px; padding:0.4em 0 0 0;}
fieldset input, fieldsettextarea, fieldset select{margin-left:10px; font-family:arial, sans-serif; font-size:1em; float:right;}
fieldset input, fieldset textarea{border:1px solid #999; padding:0.2em 0.4em;}
fieldset input#iamspamming{display:none;}
fieldset input.checkbox{width:1em; padding;0; border:none;}
fieldset p{clear:both;}
fieldset p.info{margin-left:130px;}
fieldset img.captcha{margin-left:130px !important;}
input.button{clear:both; font-size:1.2em; border:none;}

.errors{background:#ffd9e6; padding:0.4em 1em; border-bottom:2px solid #ffc6d8;}

	/*Comment form*/
	.commentForm p input, .commentForm textarea{width:255px; margin:0.3em;}
	.commentForm input.button{clear:both;}
	
	/*Subscribe Form*/
	.subscribeForm p input, .subscribeForm textarea, .subscribeForm select{width:455px; margin:0.4em 0;}
	.subscribeForm p label{margin-top:0.1em;}
	p.optin label{width:auto; float:left; padding-right:15px;}
	p.optin input{float:left; margin-left:0; width:10px; margin:10px 0 20px;}

	
/*Disclaimer*/
p.ccItem{clear:both;float:left; width:100%;}
p.ccItem span{float:left; display:block; width:80%;}
p.ccItem img{float:left; margin:0 10px 0 0 !important;}

/*Interactive Page*/
p.right{margin-top:20px;}

.also li a  {line-height:1.2em;}

/*----------------------------------------------------------Footer----------------------------------------------------------*/
#footer{margin:30px 0 15px 0;position:relative; z-index:1;  }
#footer .wrapper .container{width:640px; float:left; background:url(/images/bg-trans.png); }
#footer .wrapper .container .left{float:left; width:215px;  margin:10px 0;}
#footer .wrapper .container p{margin:0.3em 0 0.8em 20px;}
#footer .wrapper .container .left img{margin-left:20px; margin-bottom:0.3em;}

#footer .wrapper .container .right{float:left; margin:10px 0; width:400px; position:relative; border-left:1px solid #fff;}
#footer .wrapper .container .right p{float:left; width:350px;}
#footer .wrapper .container .right p.lower{margin-top:1.2em;}
#footer .wrapper .container .right img.cc{margin:0 0 -0.5em 1em;}
#bottom{position:fixed; background:url(/images/bg-tree.jpg) 50% 100% no-repeat; height:517px; width:100%; bottom:0; z-index:0;}


/*Clearing*/
.wrapper:after, .item:after, .blogStuff a:after
{clear:both; display:block; content:"."; height:0; font-size:0; line-height:0; visibility:hidden;}