/* SITE SELECTORS
---------------------------------*/

/* PAGE */
html { background:#2c2f3a; }
body { color: #fff; }
a:link,a:visited,a:hover,a strong { color:#ebebeb; }
#home,#internal { position:relative; padding: 16px 0 0; }
.site { width: 950px; text-align:left; margin: 0 auto 0 auto; padding: 0 0 61px 0; position:relative; border: solid #999; border-width: 1px 0 0 0; }

/* BRANDING */
#branding { height: 125px; position:relative; border: solid #999; border-width: 0 1px; }
#logo-capello { width: 154px; height: 53px; position:absolute; background: url(../img/site.png) 0 0; text-indent:-6000px }
#logo { width: 679px; height: 33px; position:absolute; top: 47px; left:134px; background: url(../img/site.png) 0 -198px; text-indent:-6000px }
#globe { width:100px; height: 100px; position: absolute; top: 11px; right: 10px; }

#address { position:absolute; color:#000; top: -6000; left: -6000px; z-index:10; }

/* SLIDESHOW */
#slideshow { display:block; position:absolute; top: 0; left: 0; width: 335px; height: 500px; background: url(../img/loading-slideshow.gif) 50% 50% no-repeat #000; }
#slideshow span { display:block; position:absolute; z-index:8; height: 100%; width:100%; background-image: url(../img/site-slideshow-index.jpg); }
#slideshow.volunteers span { background-image: url(../img/site-slideshow-volunteers.jpg); }
#slideshow.eco-tourism span { background-image: url(../img/site-slideshow-tourism.jpg); }
#slideshow.about-us span, #slideshow.mission-and-vission span, #slideshow.eps-members span { background-image: url(../img/site-slideshow-tourism.jpg); }
#slideshow.media span { background-image: url(../img/site-slideshow-costa-rica.jpg); }
#slideshow.eco-internship span { background-image: url(../img/site-slideshow-internship.jpg); }
#slideshow.donations span { background-image: url(../img/site-slideshow-donations.jpg); }
#slideshow.costa-rican-gallery span { background-image: url(../img/site-slideshow-costa-rica.jpg); }
#slideshow span.active { z-index:10; }
#slideshow span.last-active { z-index:9; }

#slideshow #photo-01 { background-position: 0 0; }
#slideshow #photo-02 { background-position: -335px 0; }
#slideshow #photo-03 { background-position: -670px 0; }
#slideshow #photo-04 { background-position: -1005px 0; }
#slideshow #photo-05 { background-position: -1340px 0; }

/*NAV*/
#nav { position:relative; z-index: 100; height: 22px; background: url(../img/site-x.png) 0 -145px repeat-x #478dc0; border: solid #999; border-width: 0 1px; }
#nav > ul > li { float:left; display:block; width: auto; position:relative; }
#nav > ul > li:first-child { background:none; }
#nav > ul > li > a { font-size: 1.2em; color:#fff; display:block; text-transform: uppercase; height:22px; padding: 0 44px; text-decoration:none; font-weight:bold; line-height:22px; }
#nav > ul > li:hover { background: url(../img/site-x.png) 0 -187px repeat-x #365570; }
#nav > ul > li:hover > a { color:#fff; }
#nav > ul > li.last > a { padding-right: 44px; }

/* nav dropdown */
#nav ul li:hover > ul{ display:block; }
#nav ul ul { display:none; padding: 5px 0; position: absolute; top: 22px;left: 0; width: auto; min-width:200px; list-style:none; background: url(../img/site-24.png); }
#nav ul ul a { display:block; color:#ccc; padding: 6px 3px 6px 20px; height:100%; width: auto; text-decoration:none; }
#nav ul ul a:hover { background-color:#3e5d77; }
#nav li ul li { position:relative; width:100%; display:block; }
* html #nav li ul li { height:1%; float:left; }
*+html #nav li ul li { height:1%; float:left; }
#nav li ul li:hover { }
#nav li ul li ul { position: absolute; top: 5px; left: 100%; } /*flyout positioning */

/*MAIN*/
#main { overflow:hidden; margin: 0; position:relative; border: solid #999; border-width: 0 1px 1px 1px; }

/* CONTENT */
#content { overflow:hidden; width:615px; height:490px; padding: 5px 0; margin: 0 0 0 335px; position:relative; }
#content > .l { background: url(../img/site-y.png) repeat-y -38px 0; width: 6px; height: 100%; }
#content .c { padding: 10px 20px; height:470px; }
#content h2, #content h3 { color:#4a9edb; }

.jScrollPaneContainer {	position: relative;	overflow: hidden;z-index: 1;  }
.jScrollPaneTrack {	position: absolute;	right: 0;top: 0px;height: 100%;	background: #999; }
.jScrollPaneDrag {position: absolute; background: #ddd url(../img/site-y.png) 0 0 repeat-y;overflow: hidden; }
.jScrollPaneDragTop {position: absolute;top: 0;	left: 0; overflow: hidden;}
.jScrollPaneDragBottom {position: absolute;	bottom: 0; left: 0; overflow: hidden;}

a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; background: url(../img/site.png) no-repeat 2px -286px;height: 25px; width:18px; }
a.jScrollArrowDown {display: block;	position: absolute;	z-index: 1;	bottom: 0;	right: 0;text-indent: -2000px;overflow: hidden;	background: url(../img/site.png) no-repeat -22px -286px;height: 25px; width:18px; }

#social-media { position:absolute; top:0; left:0; z-index:10; }
#social-media ul { }
#social-media li { width:24px; height:24px; margin: 0; position:absolute; }
#social-media li a { display:block; height:100%; font-size:.9em; line-height:12px; text-indent:-6000px; text-decoration:none; background-image: url(../img/site.png); background-repeat: no-repeat; }
#social-media #link-twitter {top:11px;left:44px;}
#social-media #link-twitter a{background-position:0 -356px; width: 25px; }
#social-media #link-facebook{ top:11px;left:10px;}
#social-media #link-facebook a{ background-position:0 -165px; top:0; left:0; }
/*
#social-media #link-eps{ top:11px;left:10px; width:151px;}
#social-media #link-eps a{ background-position:0 -97px; width: 25px; }
#social-media #link-rainforests { top:11px;left:44px; width:151px; }
#social-media #link-rainforests a{ background-position:0 -428px; width: 25px; }
#social-media #link-eps a:hover{ background-position:0 -97px; }
#social-media #link-rainforests a:hover{ background-position:0 -428px; }
#social-media #link-facebook a:hover{ background-position:0 -165px; }
#social-media #link-twitter a:hover{ background-position:0 -356px; }
*/

#banner { position:absolute; bottom:0; left:0; border:1px solid #509fd9; width: 432px; height:81px; }
#banner a{display:block; height:100%; }
#banner img{}

/* SITE INFO */
#site-info { color:#999; position:relative; }
#site-info address { margin:0; font-style: normal; }
#site-info address span { background: url(../img/site.png) -px -px; padding: 0 6px 0 9px; }
#site-info address span:first-child { background:none; }
#site-info address br { display:none; }
#site-info ul { }
#site-info li { display:inline; background: url(../img/site.png) no-repeat -px -px; white-space:nowrap; }
#site-info li:first-child { background:none; }
#site-info li a { line-height: 1.1em; margin: 0 5px 0 9px; }

/*CORE101*/
#logo-core101 { color: #555761; position:absolute; text-align:left; bottom:-60px; right:3px; height:15px; line-height:14px; width: 410px; padding: 0 0 0 0; }
#logo-core101 a { color: #555761; text-decoration:none; }
#logo-core101 > .r { left:auto!important; right:0; position:absolute; text-indent:-6000px; top:0; display:block; width: 86px; height:17px; background:url(../img/site.png) top right no-repeat; }

/* CUSTOM SELECTORS*/
