html 	{width:100%; }
body	{background-color:#333333; color: silver; font-family:"Trebuchet MS", Verdana, Arial, "Times New Roman", serif; }

p		{padding:0 0 15px 0; margin:0; line-height:140%; }
h1		{margin:0; padding:0; font-size:120%; font-weight:normal; }
h2		{margin:0; padding:0; font-size:140%; font-weight:normal; }
h3		{margin:0; padding:0; font-size:160%; font-weight:bold; }
h4		{margin:0; padding:0; font-size:80%; font-weight:bold; font-style:italic; color:#AD5507; }
h5		{margin:0; padding:0; font-size:200%; font-weight:bold; font-style:italic; color:#FF0000; text-decoration:blink; }
h6		{margin:0; padding:0; font-size:90%; font-weight:normal; font-style:italic; }
h7		{margin:0; padding:0; font-size:80%; font-weight:bold; font-style:italic; color:#50B948; }
h8		{margin:0; padding:0; font-size:110%; font-weight:normal; font-style:italic; }

a { color: blue; } 
a:link { color: #B0C4DE; }
a:visited { color: #B0C4DE; } 
a:hover { color: #B22222; }
span.a:hover { color: #8B0000; }
span.b:hover { color: #FF0000; }
span.c:hover { color: #FF6347; }
span.d:hover { color: #FF4500; }
span.e:hover { color: #FF8C00; }
span.f:hover { color: #FFA500; }
span.g:hover { color: #FFD700; }
span.h:hover { color: #FFFF00; }
span.i:hover { color: #ADFF2F; }
span.j:hover { color: #00FF00; }
span.k:hover { color: #228B22; }
span.l:hover { color: #556B2F; }
span.m:hover { color: #008080; }
span.n:hover { color: #4169E1; }
span.o:hover { color: #0000CD; }
span.p:hover { color: #191970; }

span.special { font-size:80%; font-weight:bold; font-style:italic; color:#EEEE00;  }

ul.a {list-style-type:none;}
ul.b {list-style-type:square; margin-left: 20px;}

#title-wrapper {
 border:medium solid #C0C0C0;
 margin-left: auto;
 margin-right: auto;
 height:200px;
 width:800px;
 }
#title-box-left {
 float: left;
 width:300px;
}
#title-box-right {
 float: right;
 width: 250px;
padding-top: 10px;
}
#vid-wrapper {
 border:medium solid #C0C0C0;
 margin-left: auto;
 margin-right: auto;
 height:720px;
 width:1280px;
 }
#simplebox {
 border:medium solid #C0C0C0;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 6px;
 height:45px;
 padding: 20px;
 padding-right: 30px;
 width:760px;

 }
 
.textbox {
 border:medium solid #C0C0C0;
 margin-left: auto;
 margin-right: auto;
 margin-top: 20px;
 width:800px;
 }

#footer {
 padding-top:100px;
 text-align:center;
}

#footer2 {
 position:absolute;
 top:90%;
}

#javaslide {
 position:absolute;
 left:20%;
 top:20%;
}

span.dropt {border-bottom: thin dotted; background: #ffeedd;}
span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; }
span.dropt span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:black; border-width:1px; z-index: 6;}
span.dropt:hover span {left: 2%; background: #ffffff;} 
span.dropt span {position: absolute; left: -9999px;
  margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
  border-style:solid; border-color:black; border-width:1px;}
span.dropt:hover span {margin: 20px 0 0 170px; background: #ffffff; z-index:6;} 

/* // JQuery Cycle Styling */

.slideshow { height: 180px; width: 240px; margin: auto; padding-right: 10px}
.slideshow img

/* // Easy Slider Styling */

	img{border:none;}
	pre{
		display:block;
		font:12px "Courier New", Courier, monospace;
		padding:10px;
		border:1px solid #bae2f0;
		background:#333333;	
		margin:.5em 0;
		width:800px;
		}	
			
    /* image replacement */
        .graphic, #prevBtn, #nextBtn{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */
			

	#container{
            	/* 
			this seems to control the div which holds everything
		*/ 
		margin:0 auto;
		position:relative;
		text-align:left;
		width:800px;
		background:#333333;		
		margin-bottom:2em;
		}	

	#content{
		position:relative;
		}			

/* Easy Slider */

	#slider{}	
	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:800px;
		height:600px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn{
            	/* 
			this seems to control just the small boxes containing the buttons
		*/ 
        border:none;
        background:#333333;	
        margin-left: auto;
        margin-right: auto;
        height:20px;
        padding: 20px;

		}	
														
	#prevBtn a, #nextBtn a{
            	/* 
			this seems to control the actual buttons
		*/ 
		display:block;
		width:100px;
		height:40px;
		background:url(costarica/prev.png) no-repeat 0 0;
                position:absolute;
                left:-110px;
                top:200px;
		}	
	#nextBtn a{ 
		background:url(costarica/next.png) no-repeat 0 0;
                position:absolute;
                left:800px;
                top:200px;
		}
                
        #homeBtn {
                position:absolute;
                left:350px;
                top:600px;
                }    	

/* // Easy Slider */