@charset "utf-8";
/* CSS Document */
body  {
	background:#EAE7D0;
	background-image: url(../images/jpg/htmlDarkBkgnd.jpg);
	background-repeat:repeat-x;
	margin: 0 auto; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	maximum-width:1024px;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #735818;
	
}

/* ---------------- header specific styles ----------------*/
/*#mainNav {
	width:90%;	
}
*/

#mainNav {
  margin-top: -3.85em;
  float:right;
  text-transform: uppercase;
 }

/**************** CSS Drop-down Menu for Archived Installations **************/
/* To ensure the items in the drop-down menus stack up vertically, set the width
* of the list to be the same as the width of the enclosed list items. 
* see http://htmldog.com/articles/suckerfish/dropdowns/ for more on this technique */
ul.nav, ul.nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: left;
	border: 1px solid #CAE6EE;
	background-color: #005825;
}

ul.nav li {
	float: left;
	width: 8em;
}
/* To hide the actual drop-downs until they are activated, set their position to absolute
    then hide them off the left-handside of the screen*/
ul.nav li ul {
	position: absolute;
	width: 8em;
	left: -999em;
	margin-left: -1px;
}
/* This is where the magic happens by adding a hover pseudo-selector to the parent list
    item, make the drop-down list reappear by changing its location back to its regular
	position */
.nav li:hover ul {
	left: auto;
}

ul.nav a, ul #secNav a{
	display: block;
	color: #2B3F00;
    text-decoration: none;
	padding: 0.3em 1em;
    border-right: 1px solid #486B02;
	border-left: 1px solid #E4FFD3;
}

ul.nav li li a {
	border-top: 1px solid #E4FFD3;
	border-bottom: 1px solid #486B02;	
	border-left: 0;
	border-right: 0;
}
/* Remove unwanted borders on the end list items */
ul.nav li:last-child a {
	border-right: 0;
	border-bottom: 0;
}

ul a:hover,
ul a:focus {
	color: #E4FFD3;
	background-color: #4F947C;
}
/*  For Internet Explorer we need to use the Suckerfish JavaScript cooked up by Patrick Griffiths & Dan Webb:
	This applies the 'sfhover' class to li elements in the 'nav' id'd ul element when they are 'moused over' and removes it, using a regular expression, when 'moused out'. So now we've got the Suckerfish pumping out new classes, the next step is to simply duplicate    the :hover selector with 'sfhover' class selectors:*/
#nav li:hover, .nav li:hover{
	left: auto;
	display:block;
}



#juanLuis #mainNav .juanLuis a,
#juana #mainNav .juana a,
#dona #mainNav .dona a,
#couples #mainNav .couples a,
#about #mainNav .about a, 
#home #footer .home a,
#juanLuis #footer .juanLuis a,
#juana #footer .juana a,
#dona #footer .dona a,
#couples #footer .couples a,
#about #footer .about a
{
	color:#005825;
	background:#DDF3F6;
	border-bottom:1px solid #D8F0F2;
	cursor: default;
}

#about #mainNav .about a,
#cork #mainNav .cork a,
#jose #mainNav .jose a,
#chindo #mainNav .chindo a,
#home #mainNav .home a
{
	color:  #005825;
	font-weight: 400;
	cursor:default;
	background: #DDF3F6;
	border-bottom:1px solid #C1DED4;
}

#header {
	height:150px;
	margin:.25em;
}
#logo {
	position:relative;
	height: 150px;
	width: 50%;
	background: url(../images/logo.png) no-repeat left;
	top:-1.8em;
	left:0;
}
#header h1 {
	margin-left: -1000px;
}

/*.................................................footer specific styles..............................*/
#footer {
	font-size:.85em;
	margin-left:2em;
	width: 100%;
}
#footer ul  li {
  float: left;
  margin-right: .25em;
  list-style:none;
}

#footer a  {
	color:#AD3A18;
}
#footer ul a:hover{
	color: #005825;
	background:#C1DED4;
	text-decoration: none;
}



/* ---------------- list specific styles ----------------*/

#about.partners {
	float: left;
	margin-top:-.5em;
}

 .partners li	{
	list-style:none;
}
.partners  a {
	font-weight:bold;
	text-decoration: none;
	color:#BF8E2F;
	display:inline;
	padding:.25em;
}
.partners a:hover {
	color:#005825;
	background:#eae7d0;
}

#home #re_types {
	width:100%;
	text-align: left;
	line-height:1.25em;
	margin:0 auto;
	clear:left;
	/*padding-left:5em;
	padding-bottom:.25em;*/
	list-style-type: none;
}
#about #re_types {
	float:left;
	width:100%;
	text-align: left;
	line-height:1.25em;
	margin:0 auto;
	/*padding-left:5em;
	padding-bottom:.25em;*/
	list-style-type: none;
}
#re_types li {
	background:url(../images/gif/circleRep.gif) no-repeat 0  50%;
	padding-left:30px;
	padding-bottom:5px;
}
#juana #container {
	float:left;	
}
#juana #mainContent {
	float:left;	
}
/*#juana #subContent {
	float:left;	
}*/
#mainContent {
	float:right;
	width:53%;
	margin-top:-3em;
	margin-right:1em;
/*	border-left:1px solid #A4C5EC;*/
}

#home #mainContent {
	float:right;
	width:53%;
	margin-top:-3em;
	margin-right:2em;
/*	border-left:1px solid #A4C5EC;*/
}

#courseNum {
	color:#005825;
	width:100%;
	margin-top: 3em;
	/*border-top:1px solid #A4C5EC;*/
	background:#005825;

}

#courseNum h5{
	color: #fff;
	margin: 0 5%;
	padding-left: 7.5em;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
}

#subContent {
	line-height:1.25em;
	float:left;
	margin-top: 2em;
	width:380px;
	background:#F4DFAA;
	border-top:1px solid #C35A11;
	color: #005825;
	
}
#subContentWindow {
	width:380px;
	height: 286px;
	position:relative;
	margin:auto;
	overflow:hidden;
}

#subContent ul li {
	list-style: none;	
}

#subContent #nav ul {
	margin-left:4em;
}

#subContent #nav li {
	display:inline;
}

#nav img{
	margin-right:1em;
	border:1px solid #000;
}
 
#chindo #contentPanels {
	position: absolute;
	top: 0;
	left: 0;
	width: 760px;
	margin: 0;
	padding: 0;
	z-index: 100;
}

#jose #contentPanels {
	position: absolute;
	top: 0;
	left: 0;
	width: 760px;
	margin: 0;
	padding: 0;
	z-index: 100;
}

#juanLuis #contentPanels {
	position: absolute;
	top: 0;
	left: 0;
	width: 760px;
	margin: 0;
	padding: 0;
	z-index: 100;
}

.panel {
	width: 380px;
	height: 286px;
	position: relative;
	float: left;
	color:#066;
	background: blue;
	border:2px solid #000;
}

#chindo #panel1 {
	background-image:url(../images/jpg/DagoChindo1.jpg);
}
#chindo #panel2 {
	background-image: url(../images/jpg/DagoChindo2.jpg);
}
#chindo #panel3 {
	background-image: url(../images/jpg/DagoChindo3.jpg);
}
#chindo #panel4 {
	background-image: url(../images/jpg/DagoChindo4.jpg);
}

#jose #panel1 {
	background-image:url(../images/jpg/JosePatricia_01.jpg);
}
#jose #panel2 {
	background-image: url(../images/jpg/JosePatricia_02.jpg);
}
#jose #panel3 {
	background-image: url(../images/jpg/JosePatricia_03.jpg);
}
#jose #panel4 {
	background-image: url(../images/jpg/JosePatricia_04.jpg);
}


#juanLuis #panel1 {
	background-image:url(../images/jpg/juanAna_05_photo-JonChristian.jpg);
}
#juanLuis #panel2 {
	background-image: url(../images/jpg/juanAna_subcontent_04.jpg);
}
#juanLuis #panel3 {
	background-image: url(../images/jpg/juanAna_subcontent_02a.jpg);
}
#juanLuis #panel4 {
	background-image: url(../images/jpg/juanAna_subcontent_08.jpg);
}

#dona #mainContent {
	float:right;
	margin:0 auto;	
}
#dona #mainContent .juanAna{
	float:left;
	margin:1em;	
}
#dona #mainContent .team{
	float:right;
	margin:1em;	
}
#couples #mainContent .juanAna{
	float:left;
	margin:1em;	
}


#juana #mainContent img {
	float:right;
	margin:1em;
}

.team{
	float:right;
	margin:1em;	
	padding:15px;
	background:#F4DFAA;
	border-radius:8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

#juana #subContent {
	position:relative;
	width:100%;
}
#juana #subContent img{
	margin: 0 auto;
}

#sidebar img {
	float:left;
	margin-bottom: 1em;
	border-right:1px solid #BCC4CD;
	border-bottom:2px solid #BCC4CD;
}
#aboutContent {
	float:right;
	width:60%;
	margin:0 auto;
	border-left:1px solid #A4C5EC;
}

#couples #subContent {
  max-width:780px;	
}
#subContent img.couplesSubL {
	margin:0 1em;
	float:left;
	display:block;
}
#subContent img.couplesSubR {
	margin:0 1em 0 1em;
	float:right;
	display:block;
}
#about SubContent {
	line-height:1.25em;
	/*display:inline;
	margin:1em auto;*/
	width:100%;
	background:#F4DFAA;
	border-top:1px solid #C35A11;
	color: #896712;
}


 #container { 
 	color:#735818;
	/*width: 92%;   this will create a container 80% of the browser width */
	max-width:960px;
	min-width:700px;
	/*background: #EAE7D0;
	background-repeat:repeat-x;*/
	background: url(../images/jpg/containerBkgnd.jpg);
	/*background: url(../images/jpg/960_grid_16_col.jpg) no-repeat left top;*/
	margin: 2em auto; /* the auto margins (in conjunction with a width) center the page */
	padding:2em;
	border: 2px solid #7A6636;
	text-align: left; /* this overrides the text-align: center on the body element.*/ 
} 

/* Tips for sidebar1:
1. Since we are working in relative units, it's best not to use padding on the sidebar. It will be added to the overall width for standards compliant browsers creating an unknown actual width. 
2. Since em units are used for the sidebar value, be aware that its width will vary with different default text sizes.
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColHybLt #sidebar1 p" rule.
*/
/*.twoColHybLt #sidebar {
	height:600px;
	float: left; 
	width: 260px;  since this element is floated, a width must be given 
	background-image:url(../images/costa_rica_GoogleMap.png);
	background-repeat: no-repeat; background: #E6CCB4;  the background color will be displayed for the length of the content in the column, but no further 
	border-left:1px solid #FF8000;
	border-right:4px solid #FF8000;
	border-top:1px solid #FF8000;
	margin-right:1em;
	padding: 1em; top and bottom padding create visual space within this div  
}
*/

/* rounded corner box
================================== */

.box {
  width: 300px;
  background: #ccc url(images/gif/bottom-left.gif) no-repeat left bottom;
  margin:1em auto;
}

.box-outer {
  background: url(images/gif/bottom-right.gif) no-repeat right bottom;
  padding-bottom: 5%;
}

.box-inner {
  background: url(images/gif/top-left.gif) no-repeat left top;
}

.box h2 {
  background: url(images/gif/top-right.gif) no-repeat right top;
  padding-top: 5%;
}


.box h2, .box p {
  padding-left: 5%;
  padding-right: 5%;
}


/* ------------------sidebar specific styles -----------------------*/
 #sidebar {
	float: left;
	margin:0 auto;
	width: 42% ; /*380px since this element is floated, a width must be given */
	background:#ECF3FB;
	border:1px solid #A4C5EC;
	border-top:8px solid #005825;
	padding: .25em; /*top and bottom padding create visual space within this div*/ 
}
 .juanAna {
	float:left;
	margin:1em;	
	padding:15px;
	background:#F4DFAA;
	border-radius:8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}
 #aboutSidebar {
	float: left; 
	width: 280px; /* since this element is floated, a width must be given */
	background:#ECF3FB;
	border:1px solid #A4C5EC;
	padding: .5em; /*top and bottom padding create visual space within this div*/ 
	
}
#aboutSidebar img {
	float:left;
	margin-right:.5em;
	border-right:1px solid #AD3A01;
	border-bottom:2px solid #AD3A01;
}




.twoColHybLt #mainContent { 
	margin: 0 auto; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
}
#mainContent p{ 

	color:#544625;
	text-align:left;
}
#mainContent h2 {
	margin: 0 .87em;
	color:#307950;
}

#jose #mainContent h2 {
	margin: 0 .5em;
	color:#307950;
}

#cork #mainContent h2 {
	margin: 0 auto;
	color:#307950;
}

/* Miscellaneous classes for reuse */
.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;
}
 
</style>[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColHybLt #sidebar { margin-right:1em; padding-top: 30px; border: 2px solid #000;}
.twoColHybLt #mainContent { zoom: 1; /*padding-top: 15px; */}
/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
</style>
<![endif]

blockquote {
	margin: 2em 10%;
}