@charset "utf-8";


/* dev

div {border:1px solid lime;} */

/* reset */
*    {margin: 0;padding: 0;border: none;}

/* structure */

body {	min-width: 950px; background: #efeee9 url('../img/bha_bg2.png') no-repeat top left ;  }

#widecontent {margin: 4% auto 0;	width: 950px;}

.column {position: relative;float: left;}
#left {width: 739px;	height: 640px;   margin-right: 6px; }
	#top {height:492px;margin-bottom: 6px;background:#efeee9; background: #efeee9 url('../img/bha_bg_content.png') no-repeat top left ;}
	#bottom {height:133px;background:#efeee9 url('../img/bha_bg_navbar.png') no-repeat top left ;width: 739px;}


#right {	width: 200px; 	height: 640px; padding: 0;  }
	#header h1 a {display:block;border:none;width:200px;height:50px;background: url('../img/bha_logo.png') no-repeat;outline: none;}
	#header h1  { text-indent:-9999px;}
	
	#description {height:421px;margin-bottom: 6px;background:#dcdad6 url('../img/bha_bg_sidebar.png') no-repeat top left ;
	padding:20px 6px 1px 6px; text-align: justify; color:#7b7877;}
    #description p {text-transform: uppercase;}
    

#footer {clear: both;}

/* Page projects */

p.title {font-weight: bold;}

#description ul {text-transform: uppercase;}

li.project_name {color:white;}
a#next {float:right;}

ul#project_name_container {height: 10px;}

/* Page project */

#right .container p {margin-bottom:5px;}
#right table {margin-bottom: 5px;}
#right table td {width:150px;}
#right table td:last-child {width:20px;}


/* Page Links */

#left .container {height:475px;width:200px;padding:6px; margin-right: 34px;float: left;}

#right .container {height:420px;width:100%;}

.container {position: relative;}
.container ul {position: absolute; bottom:0;margin:0;}
.container img {position: absolute; bottom:4px;}
.container ul li {text-transform: uppercase; text-align: justify; width: 188px;}

.links #bottom .title {width:200px;padding:6px 0 6px 20px;margin-right: 20px; position: relative;float: left;font-size: 11px;}
.links #left .container {height:475px;width:200px;padding:6px 0 6px 20px; margin-right:20px;}


.info #bottom .title {width:176px;padding:0 0 0 62px;position: relative;float: left;}
.info #left .container {height:475px;width:220px;padding:6px; margin-right: 14px;}





/* page info */


.info div.collaborator {width:242px;float: left;margin-left: 8px;}
.info div.collaborator dl dt {float: left;margin-left: 0;letter-spacing: 0.1em;}
.info div.collaborator dl {margin-left: 0;}
.info div.collaborator * {margin-left: 40px;}

.info div.collaborator dl dd {min-height: 22px;}
.info div.collaborator p {margin-bottom: 0;}
.info div.collaborator img {margin-top: 7px;}
.info div.collaborator p.title {font-weight: normal;}
.info div.collaborator p.name {font-weight: bold;margin-top:5px;}



.info #top {padding:0 6px;width:727px;}

#left td {vertical-align: top; }
#left tr.name {font-weight:bold;}
#left tr.title {height: 20px;}

 #left tr.pic {}
 
.info .scrollWrapper {width:733px;height:278px;padding-top:354px;}


/* all pages default */

/* header */



/* menu */
#menu {height:133px;background: url('../img/bha_menu.gif') no-repeat top left;}


#menu ul {list-style-type: none;margin: 0;}
#menu ul li  {margin: 0;text-indent:-9999px;}
#menu ul li, #menu ul li a {margin: 0;padding: 0;}

a.menu {display:block;width:200px;height:26px;background: url('../img/bha_menu.gif') no-repeat;outline: none;}

a.menu:hover {background: url('../img/bha_menu.gif') no-repeat;}

a.menu_projects { background-position: 0 0;}
a.menu_projects:hover { background-position: -200px 0;}
a.menu_info { background-position:  0 -26px;}
a.menu_info:hover { background-position:	-200px -26px;}
a.menu_contact { background-position:  0 -52px;} 
a.menu_contact:hover { background-position:	-200px -52px;}
a.menu_links { background-position:  0 -78px;} 
a.menu_links:hover { background-position:	-200px -78px;}
a.menu_home { background-position:  0 -104px;} 
a.menu_home:hover { background-position:	-200px -104px;}




/* typography */
body{font: 12px/1.2 Helvetica,"Trebuchet MS",Arial,Verdana,sans-serif;color:#7b7877;}

h1, h2, h3 {color:#333;letter-spacing:-0.5px;font-size-adjust:none;font-weight:normal; text-align:left;}

#content h1{font-size:24px;line-height:26px;padding:0 0 2px 5px;margin:0 0 10px 0;}
#content h2{font-size:18px;line-height:26px;padding:0 0 2px 5px;margin:20px 0 10px 0;}
#content h3{color: #666;font-size:12px;margin:25px 0 5px 0;}

#description h1, h2, h3 {text-align: right;}
#description h1 {font-size:20px; margin-bottom:2px ;}
#description h2 {font-size:15px; margin-bottom:2px ;}
#description h3 {font-size:13px; margin-bottom:5px ;}

.en   {color:#666; font-style:italic;}
p     {margin-bottom: 10px;}
hr    {border:2px solid #eee;color:#eee;height:2px; margin:10px 0;}
.small {font-size: 10px;}

#right .container *, .info, .links, .projects {letter-spacing:.2em; font-size:9px;}


/* links */


#left a:link, #widecontent a:visited  {color: #7b7877;font-weight:normal;text-decoration: none;}
#widecontent a:hover, #widecontent a:visited:hover {color: #000;text-decoration:underline;}


#right a:link, #right a:visited  {color: #7b7877;font-weight:normal;text-decoration: none;}
#right a:hover, #right a:visited:hover {color: #fff;text-decoration:none;}

#content a img, #content a img:link, a img:visited { border:4px solid white;}
#content a img:hover, #content a img:visited:hover { border:4px solid #eee;}

/* lists */
#content ul {padding:0 0 10px 10px;list-style: none inside;}
#content ul ul {padding-left:15px;list-style: disc inside;}

ul {margin-bottom: 10px;}
ul li {list-style-type: none;}
ul ul li {padding: 0 10px;}
ul ul ul li {padding: 0 10px;}
ul ul ul ul li{padding:0 10px;}
ul ul{list-style-position: inside; padding-left:10px; }



/* forms */
input, textarea {
 font: 12px monospace;
 background-color: #eee;
 border: 1px solid #ccc;
 color:#666;
 margin:3px 0;
 width:230px;
}
button {
 background-color: #eee;
 border: 1px solid #aaa;
 color:#666;
 margin:3px 0 ;
 width:230px;
}
button:hover {
 background-color: #ccc;
}
button:active {
 background-color: #eee;
}



/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 133px;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(../img/arrow_nav_left.png);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	bottom:0;
	display: none;
	/*  When positioning the mouse over one of the hot spots, the cursor should change.
	I've noticed that this varies from browser to browser though. */
	cursor:pointer;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(../images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 133px;
	background-image: url(../img/arrow_nav_right.png);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	bottom:0;

	cursor: pointer;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(../img/arrow_nav_right.png);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;

}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 739px;
	height: 133px;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
	margin-left:0px;
}

#bottom div.scrollableArea * {
		position: relative;
		float: left;
		margin: 0px;
		padding: 0;
}

#bottom div.scrollableArea a {margin-left: 3px;
	opacity: 0.5;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
	filter: alpha(opacity=50);
	}

#bottom div.scrollableArea a.activeSlide {
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
	filter: alpha(opacity=100);
	}