/* ==============================================
Layout Style Sheet (for version 5 browsers and above)

version:  1.0
author:   Philip Lee (MCUBE.TV)
date:     11 February 2006
================================================= */

/* =LAYOUT =INIT
================================================= */
hr, del   { display: none   }
.imgright { float: right    }
.imgleft  { float: left     }
del.show  { display: inline }
#main .imgpad { padding: 0 6px 6px }


/* =LAYOUT =CLEAR
================================================= */
#header,
#menu,
#menu li,
#menu ul,
#top,
#bottom,
#footer
{
	margin: 0;
	padding: 0;
}

/* =CLEARFIX
================================================= */
/* Clear Fix Hacks: To ensure container div wraps around float elements
http://www.positioniseverything.net/easyclearing.html
http://www.positioniseverything.net/articles/onetruelayout/ */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* For sticking bottom div to bottom of screen*/
#clearbottom	{
	clear:both;
	height:200px;
}


/* =LAYOUT =STYLING
================================================= */
#container {
	overflow: hidden;
	padding: 0;
	margin: 0 auto;
	
	position: relative;
	
	text-align: left;
	
	min-width: 770px;
	width: 47.5em !important;
	width: 770px;
	max-width: 1000px;
}

/* commented backslash hack - hide from Mac IE \*/ 
/*#container {
	height:100%;
}*/


body #main p.center {
	text-align: center;
}


#background img {
	position: absolute;
	top: 0;
	right: 0;
}


/* =TOP/BOTTOM
================================================= */
#top, #bottom {
	position: relative;
	
	/*overflow: hidden;*/
	/*height: 100%;*/
}

#bottom {
	min-height: 160px;
	background: #ABD5A6 url('../images/en/beach.jpg') no-repeat;
	border: solid white;
	border-width: 0 5px 5px 5px;

}

* html #bottom {
	height: 160px;
}

#bottom h4 {
	margin: 0;
	color: white;
	font-size: 1.1em;
}

#topleft {
	position: relative;
	float: left;
	/*position: absolute;
	top: 0;
	left: 0;*/
	height: 180px;
	width: 45%;
	background: transparent url('../images/en/wrapper-canopy-tl.gif') top left no-repeat;
}

#topright {
	position: absolute;
	top: 0;
	right: 0;
	height: 200px;
	width: 100%;
	background: transparent url('../images/en/wrapper-canopy-tl.gif') top left no-repeat;
}

/* =COPYRIGHT
================================================= */
#copyright {
 color: white;
 font-family: arial, verdana, "trebuchet MS", helvetica, sans-serif;
 font-size: 1.1em;

}

#copyright a:link,
#copyright a:visited {
	font-weight: bold;
	color: #A6E650;
	border-bottom: dotted 1px #A6E650;
	height: 100%;
}

#copyright a:hover,
#copyright a:active {
	color: white;
	border-bottom: dotted 1px white;

}

/* =CONTENT
================================================= */
/* See typography.css */

#content	{
	min-height:400px;
	position: relative;
	text-align: left;
	border: solid white;
	border-width: 5px 5px 0 5px;
 	background: #ABD5A6 url("../images/en/background-shade.jpg") repeat-x;
}

/* IE Hack - only IE will see this! */
* html #content {
	height:400px;
}

#main {
	float: right;
	width: 50%;
	padding: 1em;
	min-height: 350px;
}

#mainimage {
	float: right;
	min-height: 450px;
}

#logo {
 position: absolute;
 left: 10px;
 top: 10px;
 z-index: 5;
}

* html #logo {
 z-index: -1;
}

/* =MENU
================================================= */

#menu {
	position: relative;
	margin: 15px 0 0 80px;
	 z-index: 10;

}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#menu li {
	margin: 0 0.5em;
	padding: 0;
	float:left;
	/*text-transform: lowercase;*/
	font-size: 0.7em;

}

#menu li h1 {
	font-family:  georgia, "times new roman", "times roman", serif;
	font-weight: normal;
	font-size: 1.6em;
	background:  #463D2E;
}

#menu li img {
	float: left;
	border: solid 1px black;
	margin-right: 1em;
}

#menu li h1 a:link,
#menu li h1 a:visited	{
	display: block;
	padding: 0.5em;
	color: white;
}


#menu li h1 a:hover,
#menu li h1 a:active	{
	background: #339933;
}

#menu abbr {
	border: none;
}
#menu a:hover abbr {
	border-bottom: 1px dotted;
}



/* =MENU-HACK
=================================================
Make entire link region clickable in IE/Win. Holly Hack explained here:
http://www.positioniseverything.net/explorer/escape-floats.html */
/** html #menu a {
	width:1%;
}*/

/******************************* Latest Books Portlet Classes ***********************************/


#latestbooks {
 padding: 0em;
 margin: 0;
 float: left;
 clear:left;
}

#latestbooks img {
 margin: 0 0.5em 0.5em 0;
 border: solid 1px black;
 float: left;
}


#latestbooks .title {
 font-family:  georgia, verdana, "trebuchet MS", helvetica, sans-serif;
 font-weight: bold; 
 font-size: 0.9em;
 margin:0 0 0.1em 0;
}

#latestbooks .author {
 font-weight: bold; 
 font-size:0.6em;
 margin:0 0 0.5em 0;
}

#latestbooks h1.latestbooks_item {
 font-family: arial, verdana, "trebuchet MS", helvetica, sans-serif;
 text-align: left;
 margin:0.3em 0 0 0;
 font-size: 0.7em;
 clear:both;
}



/* =FOOTER
================================================= */
#footer {
	text-align: left;
	clear:both;
	font-size: 0.6em;
	font-family: arial, verdana, "trebuchet MS", helvetica, sans-serif;
	color: white;
}

#footer div {
	float: left;
	/*width: 48%;*/
	margin: 0.5em 0;
}

/* =NATURE'S NICHE LINK
================================================= */

#nn {
 position: absolute;
 right: 10px;
 top: -15px;
 margin: 0;
 padding: 0;
 text-indent: -9999px;
 width: 134px;
 height: 44px;
}

#nn a	{
	display: block;
	margin: 3px 0 0 0;
	padding: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
	background: transparent url('../images/en/naturesniche.gif') top left no-repeat;
}

#nn a:hover	{
	background: transparent url('../images/en/naturesniche.gif') 0 -44px no-repeat;
	}



/* =HEADER
================================================= */
#header {
	height: 130px;
	position: relative;
	z-index: 1;
	border: solid 2px green;

}
#header a {
	position: absolute;
	z-index: 2;
	width: 90px;
	height: 90px;
	overflow: hidden;
	bottom: -29px;
	left: 16px;
	text-indent: 200px;
}