/*
-------------------------------------------
Koko - Home Styles
Version: April 02, 2010
------------------------------------------- */



/* Begin koko w/ kitty in the left nav
------------------------------------------- */ 
#block-block-9 h2 { display:none;}
#block-block-9 #koko-kitty { display: block;}

/* End koko w/ kitty in the left nav
------------------------------------------- */ 

/* BeginHome Pg. Buttons Wrapper
------------------------------------------- */ 
#node-16 #block-block-4 {
	position: absolute;
	top: 30px;
	height: 40px;
	margin: 0;
	padding: 10px 0 0 26px;
}
#node-16 #block-block-4 .content {margin: 0;padding: 0;}
#node-16 #block-block-4 .content #btnWrapper {margin: 0;padding: 0 22px 0 0;}
#block-block-4 .content #btnWrapper .btn {
	padding: 0;
	margin: 0 22px 0 0;
	cursor: pointer;
}
#intro_btn,
#news_btn,
#video_btn {
	float:left;
	height:20px;
	width:84px;
	padding-right:22px;
	background-repeat:no-repeat;
	cursor: pointer;
}
.intro_on {background:url(images/intro_btn_on.png);}
.news_on {background:url(images/news_btn_on.png);}
.video_on {background:url(images/video_btn_on.png);}
.intro_off {background:url(images/intro_btn_off.png);}
.news_off {background:url(images/news_btn_off.png);}
.video_off {background:url(images/video_btn_off.png);}

/* BeginHome Pg. Buttons Wrapper
------------------------------------------- */ 
/* Home Pg. Intro[3], News[5], Video[6] - Blocks
------------------------------------------- */ 
#block-block-5, 
#block-block-6, 
#block-views-frontPageVideos-block_1 {display: none;}

#block-block-3,
#block-block-5, 
#block-views-frontPageVideos-block_1 {	
	top: 50px;
	height: 370px;
	width: 714px;
	background: #000;
	margin: 0;
	padding: 0;
}
#node-16 #block-block-3 .content,
#node-16 #block-block-6 .content,
#block-views-frontPageVideos-block_1 .content{margin: 0;padding: 0;}
#node-16 #block-block-3 .content {margin: 0 auto;text-align: center;}

/* intro block slideshow */
#block-block-3 {
	z-index:3;
}
#block-block-3 .numbers-wrapper {
    z-index: 5;
    position: absolute;
	z-index: 11;
    top: 41px;
    right: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
}
#block-block-3 .numbers .number {
    text-indent: -99em;
    overflow: hidden;
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    float: left;
    background-color: transparent;
    border-radius: 8px;
    border: 2px solid #FFF;
	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.2);
	box-shadow: 0 0 15px 0 rgba(0,0,0,.2);
	cursor: pointer;
}
#block-block-3 .numbers .number.active {
    background: none repeat scroll 0% 0% #FFF;
}
#block-block-3 p {
	position:absolute;
	left:0;
	display:none;
	margin:0;
	padding:0;
}
/* #block-block-3 span {
	padding:0 4px;
	cursor:pointer;
} */
#block-block-3 span.prev {
    cursor: pointer;
    position: absolute;
	z-index: 10;
    width: 55px;
    text-align: left;
    left: 0;
    height: 370px;
}
#block-block-3 span.next {
    cursor: pointer;
    position: absolute;
	z-index: 10;
    width: 55px;
    text-align: right;
    right: 0;
    height: 370px;
}
#block-block-3 span.pause,
#block-block-3 span.play {
	width:16px;
	height:16px;
	padding:0;
	margin:1px 0 0 0;
	display:block;
	float:right;
}
#block-block-3 span.pause{
	background:#000 url(images/pause.png) no-repeat;
	border:1px solid #fff;
}
#block-block-3 span.play{
	background:#000 url(images/play.png) no-repeat;
	border:1px solid #fff;
}
/* top news */
#topnews {
	font-size: 11px;
	padding: 35px 31px 0 26px;
	color: #c7c59d;
}
#topnews .topnews-top .date {
	font: bold 11px Arial, Helvetica, sans-serif;
}
#topnews .topnews-top h1 {
	color:#C7C59D;
	font:20px Arial,Helvetica,sans-serif;
	line-height:normal;
	padding:0 20px 0 0;
}
#topnews .topnews-top .news{
	color:#C7C59D;
	font:11px Arial,Helvetica,sans-serif;
	height:108px;
	line-height:normal;
	margin:10px 0 0;
	overflow:hidden;
	padding:0;
}
#topnews .readMore {
	font: 9px Arial, Helvetica, sans-serif;
	color: #c8862a;
	text-transform: uppercase;
}
#topnews .topnews-top h5,
#topnews .topnews-top h5 a {
	margin: 15px 0 0 0;
	font: 9px Arial, Helvetica, sans-serif;
	color: #c8862a;
	text-transform: uppercase;
}
#topnews .topnews-top hr { 
	margin: 8px 0 0 0;
	background: #666 none repeat;
	height: 2px;
}
#topnews .topnews-top img {
	margin: 13px 0 0 48px;
	padding: 0;
	float: right;
}
#topnews .topnews-left { 
    margin-top: 15px;
	width: 345px;
    position: absolute;
	float: left;
	left: 0;
}
#topnews .topnews-left img {
	margin-left:32px;
}
#topnews .topnews-right { 
	margin-top: 15px;
	width: 345px;
	position: absolute;
	float: left;
	left: 350px;
}
#topnews .topnews-left img,
#topnews .topnews-right img{ 
	margin-left:32px;
	float: left;
}
#topnews .topnews-left div.sp,
#topnews .topnews-right div.sp { 
	display: inline-block;
	padding: 10px 0 0 32px;
	vertical-align: top;
	width: 180px;
	font:bold 11px Arial, Helvetica, sans-serif;
	line-height: normal;
}
.topnews-node {
	width: 520px;
}
/* End Home Pg. Intro[3], News[5], Video[6] - Blocks
------------------------------------------- */ 
/* Begin frontpage video container
------------------------------------------- */ 
#videoContainer {
	float: left;
	width: 400px;
	padding: 55px 0 0 25px;
	z-index: 99;
}
#videoFlixContainer {

}
#videoContainer  #videoIntro {
	width: 378px;
	height: 324px;
	margin: 18px 29px 22px 21px;
	padding: 0;
	z-index: 100;
}
#videoThumbsContainer {
	margin: 44px 0 0 0;
	float: left;
	width: 276px;
	height: 301px;
    overflow: auto;
}
#videoThumbsContainer .videoThumbItem {
	width: 255px;
	height: 80px;
	cursor: pointer;
}
#videoThumbsContainer .videoThumbItem:hover {
	background: #3F3F3F;
}
#videoThumbsContainer .videoThumbItem img {
	float: left;
	margin: 10px;
	border: 1px solid #fff;
	width: 76px;
	height: 58px;
}
#videoThumbsContainer .videoThumbItem h3 {
	padding: 22px 0 0 0;
	margin:0;
	font: bold 10px Arial, Helvetica, sans-serif;
	color: #fff;
	display: block;
	text-align: left;
}
#videoThumbsContainer .videoThumbItem p {
	margin: 0;
	padding:0;
	font: 10px Arial, Helvetica, sans-serif;
	color: #fff;
	text-align: left;
	display: block;
}
.view-frontPageVideos a.viewall {
	font: 9px Arial, Helvetica, sans-serif;
	color: #fff;
	padding: 0 10px 0 0;
	background: url(images/arrowhite.gif) no-repeat center right;
	text-align: right;
	margin: 0 40px 0 0;
	float: right;
}

/* End frontpage video container
------------------------------------------- */ 

/* Begin KokoPIX, KokoFLIX, Research Blog, Conservation Blog
------------------------------------------- */ 
#block-block-7 {
    clear: both;
    border-bottom: 1px solid #FFF;
    margin: 0px;
    padding: 5px 0px 15px 26px;
    display: block;
    background: none repeat scroll 0% 0% #E7E7DA;
}
#block-block-7 .kokoAreas {
    float: left;
    width: 228px;
    margin: 1em 0px 0px;
    padding: 0px;
    color: #FFF;
    font: 12px Arial,Helvetica,sans-serif;
}
#block-block-7 .kokoAreas h3 {
    margin: 0px 0px 2px;
    padding: 0px;
    color: #3f3f3f;
    font: 20px Arial,Helvetica,sans-serif;
    text-transform: uppercase;
}
#block-block-7 .kokoAreas img {
	margin: 0px 0px 5px;
	padding: 0px;
	width: 205px;
	height: 133px;
}
#block-block-7 .kokoAreas .views-field-title span {
    display: block;
    width: auto;
    padding: 0px;
    margin: 0px;
    font: 14px Arial,Helvetica,sans-serif;
    color: #404040;
}

/* End KokoPIX, KokoFLIX, Research Blog, Conservation Blog
------------------------------------------- */ 

/* Accordion All Headers
------------------------------------------- */ 
/*
 * Don't use padding/margin top/bottom on .views-accordion-item, or the animation will jump for that ammount
 * so apply it to the header and the first divs inside the accordion-content
 */
 
#block-views-test_accordian-block_1,
#views-accordion-test_accordian-block_1,
.accordion-item-0 {margin: 0;padding: 0;}

.accordion-header {background: #6F7061 !important;}

.accordion-item-first .accordion-header { border-top: 0; }
/* .accordion-item-last .accordion-header { background: #928D3C; } */

.accordion-header {
	height: 25px;
	padding: 6px 0 1px;
	border-top: 1px solid #f3f3e5;
	cursor: pointer;
	background: #000000;
	line-height: 26px;
}
.accordion-header > .field-content {
	color: #FFF;
	background: url('images/arrowCollpased.png') no-repeat scroll left 1px transparent;
	padding: 0 0 0 23px !important;
	font: 400 16px Arial,Helvetica,sans-serif;
	line-height: 28px !important;
	margin: 0 0 0 10px;
}
.accordion-header-active > .field-content {
	color: #fff;
	background: url('images/arrowExpanded.png') no-repeat scroll left 1px transparent;
	padding: 0 0 0 17px;
}
.views-accordion-item .accordion-header-active {background: #44B8D2;}


/* Accordion [0][1][2] - KokoCAMPAIGN[0], KokoZEST[1], KokoTEACH[2]  
------------------------------------------- */ 
.accordion-content { padding: 0;background:#000000; height: 273px; }
.accordion-content .accordion_title { display: none; } /* Not using this */
.accordion-content .accordion_mainimage a { display: block; }
.accordion-content .accordion_mainimage img { width: 100%; height: 100%; }
.accordion-content .views-field-field-accordion-image-fid { height: 100%; }
.accordion-item-1 .accordion-content,
.accordion-item-3 .accordion-content,
.accordion-item-4 .accordion-content {margin: 0;}
.accordion-item-4 .accordion-content {margin: 0;}
.accordion-item-0 .accordion-content {margin: 0;}
.accordion-item-0 .accordion-content .views-field-body,
.accordion-item-1 .accordion-content .views-field-body,
.accordion-item-2 .accordion-content .views-field-body,
.accordion-item-3 .accordion-content .views-field-body,
.accordion-item-4 .accordion-content .views-field-body,
.accordion-item-0 .accordion-content .views-field-body > .field-content,
.accordion-item-1 .accordion-content .views-field-body > .field-content,
.accordion-item-2 .accordion-content .views-field-body > .field-content,
.accordion-item-3 .accordion-content .views-field-body > .field-content,
.accordion-item-4 .accordion-content .views-field-body > .field-content,
.accordion-item-3 .accordion-content .views-field-body > .field-content ul li {margin: 0;}
.accordion-item-0 .accordion-content .views-field-body > .field-content h3,
.accordion-item-1 .accordion-content .views-field-body > .field-content h3,
.accordion-item-2 .accordion-content .views-field-body > .field-content h3,
.accordion-item-3 .accordion-content .views-field-body > .field-content h3,
.accordion-item-4 .accordion-content .views-field-body > .field-content h3 {font: 20px Arial, Helvetica, sans-serif;color: #c7c59d;	}
.accordion-item-3 .accordion-content .views-field-body > .field-content ul {
	margin: 0;
	padding: 0;
	font: 12px Arial, Helvetica, sans-serif;
	color: #c7c59d;
	line-height: 1.1em;
}



/* accordion subtitle */
.sub-title { 
    font:12px Arial,Helvetica,sans-serif;
    padding-left: 1em;
}