@charset "utf-8";
/* CSS Document */

body {
	/* if there's no images, need a bg color ! */
	background: #000000 url(images/background_twirls_black.jpg) repeat; 
	color:#FFFFFF; /* white text */
	margin:0;
	padding:0;
	font-family: "Tahoma", "Verdana", "Arial", "Helvetica", sans-serif;
	font-size:small;
	}

#wrapper {
	width:80em; /* liquid layout with ems */
	margin:auto;
	margin-top:4em;
	background:url(images/bottom_left_corner.jpg) bottom left no-repeat;/* image at the bottom */
	background-color:#000000;  /* black */
	border-width:0.3em;
	border-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #666666;
	border-bottom-color: #333333;
	border-left-color: #999999;
	}

#banner {
	margin:0;
	padding:0;
	height:153px; /* height of the b/g image */
	background:url(images/lgd_header.jpg) top left no-repeat;
	border_bottom:#CCCCCC double 3px;
	position:relative; /* so we could move #tabs relative to the #banner */ 
	}
	
#banner h1 { /* move it off the screen */
	position:absolute;
	left:-5000px;
	top:0;
	}

#banner a#weblink { /* make logo area on the banner clickable */
	position:absolute;
	width:200px;
	height:150px;
	left:0; /* move it to the right to align with logo on the BG */
	top:0;
}

#tabs {
	width:100%; /* to extend bottom border to the whole width */
	margin: 0;
	padding:0;
	list-style:none;	
	background: url(images/tabs_border.jpg) repeat-x bottom; /* tiling bottom border image */
	position:absolute;
	right:0; /* aligns it to the bottom of the #banner */
	bottom:0;
}

	
#tabs li {
	float:right;
	margin:0 3px 0 0;
	padding:0;
	}
#tabs li.rightmost {
	margin-right: 50px;
	}

#tabs a {
	float:left; /* !!! have to float ancors within li left to avoid strange bug in IE7, menu gets messed up if float right like li */
	display:block;
	margin:0;
	padding:7px 15px 7px 15px; /* by adding padding to the a element we ensure that the whole tab is clickable ! */
	text-decoration:none;
	font-family:"Trajan Pro", "Tahoma", Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	letter-spacing:0.4em;
	/*font:small-caps;*/
	border:1px solid  #CCCCCC;
	border-bottom:none; 
	background:#000000 url(images/off_state.jpg) repeat-x top left;
	}
	
#tabs a:hover, body#home_pg #home a,
					body#about_pg #about a,
					body#portfolio_pg #portfolio a,
					body#contact_pg #contact a
  { /* rule for hover and for the current page!!! */ 
	padding-bottom:10px; /* to get rid of the tiling border */
	border-color:#CCCCCC;
	background:#000000 url(images/on_state.jpg) repeat-x top left;
	}

/*********************************/
/* Hack to clear tabs floats */
#tabs:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}	
* html #tabs {height: 1%; } /* for IE5+6 */
*:first-child+html #tabs {min-height:1px; } /* for IE 7 */
/***********************************/

/*******************************/
#main_content {
	width:45em;
	float:right;
	padding:0.8em;
	margin:2em 1.6em 0.8em 0.8em;
	/*background-color:yellow;*/
	}
	
#side_content {
	margin:2em 47em 0.8em 1.6em; /* clear on the right from main_content */
	padding:0.8em;
	padding-bottom:7em; /* to stay away from decoration image */
	line-height:1.6em;
	font-size:110%;
	/* background-color:#33CCCC;*/
}

#footer {
	clear:both;
	text-align:center;
	padding-top:0.8em;
	padding-bottom:0.6em;
	/* background-color:#6600FF;*/
	}
	
#my_name{ /* by Anna Ivanov - part of footer */
			text-align:center;
			letter-spacing:0.5em;
			font-size:70%;
			font-style:italic;		
			}
	
a {text-decoration:none;}
/* defines the link color as it looks before link was visited or hovered */
a:link{color:#FFFFFF;} /* white */
a:visited{color:#FFFFFF;} /* white the same as initial */
a:hover{color:#000;} 
a:active{color:#333333;} /*gray */
/* if we're are on the current page, make cursor look "normal" and link not to change color */
a:hover#current {cursor:default;}


/* Portfolio submenu */			
a.submenu {
			display:block;
			padding:0.5em 0.6em;
			text-decoration:none;
			width:13em;
			margin-top:1em;
			font-family:"Trajan Pro", "Tahoma", Verdana, Arial, Helvetica, sans-serif;
			font-size:95%;
			font-weight:bold;
			letter-spacing:0.3em;
			background:#000000 url(images/off_state.jpg) repeat-x top left;
			/* border:#666666 solid 1px;
			border-bottom:#333333 solid 1px;*/
			}
a.submenu:hover, a#current
  {  
	background:#000000 url(images/on_state.jpg) repeat-x top left;
	}
	
/*	
a:link.submenu{color:#FFFFFF;} 
a:visited.submenu{color:#FFFFFF;} 

a:hover.submenu{color:#999999;} 
a:active.submenu{color:#666666;} 
*/