/* Imports
-------------------------------------------------------------- */
@import "inc/vars.less";
@import "cave/cave.less";
//@import "cave/collumns.less";
@import "inc/collumns.less";
//@import "inc/pages.less";


/* Body
-------------------------------------------------------------- */
body 	{ background-image: url(../img/layout/backgrounds/03.jpg); background-color: #000; background-position: top center; background-repeat: no-repeat; margin: 0; padding: 0; }
body, p, 
input, 
button 	{ font-family: "Lucida Grande",  "Arial", sans-serif; font-size: 11px; }


/* Headings
-------------------------------------------------------------- */
h1 			{ font-size: 14px; font-weight: bold; margin: -4px 0px 11px @vmargin; }
.content h1 { margin-left: 0px !important; }
h2 			{ font-size: 14px; font-weight: bold; margin-bottom: 3px; }
.content h2 { margin-bottom: 13px;}
h3 			{ font-size: 12px; font-weight: bold; margin-bottom: 7px; }
h4 			{ font-size: 14px; font-weight: normal; margin-bottom: 6px; }
h5 			{ margin-bottom: 10px; }


/* Links
-------------------------------------------------------------- */
a 				{ color: #333333; font-weight: bold; }
a:hover 		{ color: #fff; padding: 3px 0px; text-decoration: none; background-color: #3D9225;}
a.button 		{
				 
	background		: url(../img/layout/buttons/button-small-n.gif);
	width			: 120px; 
	height			: 27px; 
	display			: block; 
	text-decoration	: none; 
	color			: #fff; 
	margin-top		: 25px; 
	position		: relative;
	
	span 		{ display: block; position: absolute; margin: 4px 0 0 12px; z-index: 2; }
	.hover 		{ width: 120px; height: 27px; position: absolute; z-index: 1; display: none; background: url(../img/layout/buttons/button-small-hover.gif); margin: 0; padding: 0; }
}
a.button:hover 	{ padding: 0; }

a.download		{ background: url(../img/layout/buttons/button-download-260-h.png); width: 260px; height: 47px; font-size: 12px; line-height: 16px; 
	.hover 		{ background: url(../img/layout/buttons/button-download-260-n.png); width: 260px; height: 47px; }
	span		{ margin-top: 16px; }
}
	
a.download-wide	{ background: url(../img/layout/buttons/button-download-h-280.gif); width: 280px; height: 47px; font-size: 13px; 
	.hover 		{ background: url(../img/layout/buttons/button-download-n-280.gif); width: 280px; height: 47px; }
	span		{ margin-top: 14px; }
}

a.buzz:hover 	{ background: none}

a.link-image:hover {background: none}

ul.tour 		{
	padding: 0;
	margin-bottom: @margin !important;
	
	li
	{
		list-style		: none;
		margin			: 0;
		margin-right	: 15px;
		padding			: 0;
		float			: left;
		display			: block;
		height			: @menu-height;
		position		: relative;
		
		_display		: inline;
		
		height			: 27px;
		color			: #fff !important;
		width			: 260px; 
		
		a
		{
			display			: block;
			text-decoration	: none;
			text-align		: center;
			
			position		: absolute;
			top				: 0;
			z-index			: 2;
			color			: #fff; 
			
			margin			: 0;
			padding			: 0;
			
			height			: 27px;
			width			: 260px;
			
			background-image: url(../img/layout/buttons/button-260-right-n.png);
		
		}
		span 		{ display: block; position: absolute; margin: 4px 0 0 12px; z-index: 2; }
		a:hover 	{ background-color: transparent !important; }
		.hover 		{ z-index: 1; height: 27px; width: 260px; display: none; background-image: url(../img/layout/buttons/button-260-right-h.png); }
		.active 	{ background-image: url(../img/layout/buttons/button-260-right-a.png); }
	}
}

.footer a.button 	{ bottom: 23px; left: 20px; position: relative; margin-top: 0; }
.footer a.download, .footer a.download-wide 	{ bottom: 47px; margin-top: 0; }

a.download-legacy, 
a.download-legacy-25, 
a.goto-source-legacy, 
a.goto-source 				{ border-bottom: 2px solid #bfbfbf; text-decoration: none;}
a.download-legacy:hover, 
a.download-legacy-25:hover, 
a.goto-source-legacy:hover, 
a.goto-source:hover			{ border-bottom: none}

.repository-link	{display: block; margin-top: 5px;}			

/* Lists
-------------------------------------------------------------- */
ol, ul 		{ padding-left: @vmargin; margin-bottom: (@hmargin * 1.5); }
ol li 		{ list-style: decimal; }
ul 			{ padding-left: 10px; }
ul li 		{ list-style-image: url(../img/layout/list-item.gif); }



/* Tables
-------------------------------------------------------------- */
td.label,
tbody th { font-weight: normal; text-align: left; padding-right: @vmargin; }
thead th { font-weight: bold;   text-align: left; padding-right: @vmargin; }



/* Layout
-------------------------------------------------------------- */
#container			{ color: #333333; }
#center 			{ width: @container_width; position: relative; margin: 0px auto; }
#content_container 	{
	background-color: #dcdedc; 
	width			: @container_width;

	#content		{ margin: 26px @container_padding 0; overflow: visible; }
}
#header 			{
	width			: @container_width; 
	margin-top		: 40px;
	height			: @top_offset - 40px; 

	.logo 				{
		margin-top		: 22px;
		margin-bottom	: 15px;
		width			: 262px;
		height			: 53px;
		background		: url(../img/layout/logo.png); 
		_behavour		: url(/PIE/PIE.htc);
	}
	
	.annotation 		{
		position		: relative;
		display			: table-cell; 
		padding			: 10px 40px 14px 40px; 
		background-color: #fff;
		
		.rounded_corners;
	}
}

#round_top 			{
	width			: @container_width;
	height			: 10px;
	border			: none;
 	background-image: url(../img/layout/header.png);
 	_behavour		:url(/PIE/PIE.htc);
 }

#bottom 			{
	width			: @container_width;
	height			: 60px;
	background-color: #262626;
	color			: #fff; 
	margin			: 0px auto 125px;
	font-weight		: bold;
	
	.rounded_corners_bottom;
	
	p { margin: 0; padding-top: @margin; padding-left:@container_padding + @margin; }
}


.line-1,
.line-2, .line-3	{ height: 2px; background-color: #666666; margin: 29px 0 30px 0; }

a.view_project {
	
	background: url(../img/layout/buttons/button-small-n.gif);
	
	width: 120px;
	height: 27px;
	
	display: block;
	text-decoration: none;
	color: #fff;
	margin-top: 25px;
	
	position: relative;
	
	span {
		display: block;
		position: absolute;
		margin: 4px 0 0 12px;
		z-index: 2;
	}
	
	.bg {
		background: url(../img/layout/buttons/button-small-hover.gif);
		width: 120px;
		height: 27px;
		position: absolute;
		z-index: 1;
		display: none;
		
		margin: 0;
		padding: 0;
	}
}
a.view_project:hover, a.scroll-down:hover, a.next_project:hover, a.prev_project:hover {
	padding: 0;
}

.tour_navigation {
	position: relative;
	height: 27px;
	background: transparent !important;
}


a.prev_tour {
	
	background: url(../img/layout/buttons/button-260-left-n.png);
	
	width: 260px;
	height: 27px;
	
	display: block;
	text-decoration: none;
	color: #fff;
	
	position: absolute;
	
	top: 0;
	left: 20px;
	
	margin: 0;
	padding: 0;
	
	span {
		display: block;
		position: absolute;
		margin: 4px 0 0 28px;
		z-index: 2;
	}
	
	.bg {
		background: url(../img/layout/buttons/button-260-left-h.png);
		
		width: 260px;
		height: 27px;
		position: absolute;
		z-index: 1;
		display: none;
		
		margin: 0;
		padding: 0;
	}
}

a.next_tour {
	
	top: 0;
	right: 20px;
	
	background: url(../img/layout/buttons/button-260-right-n.png);
	
	width: 260px;
	height: 27px;
	
	display: block;
	text-decoration: none;
	color: #fff;
	
	position: absolute;
	
	margin: 0;
	padding: 0;
	
	span {
		display: block;
		position: absolute;
		margin: 4px 0 0 12px;
		z-index: 2;
	}
	
	.bg {
		background: url(../img/layout/buttons/button-260-right-h.png);
		
		width: 260px;
		height: 27px;
		position: absolute;
		z-index: 1;
		display: none;
		
		margin: 0;
		padding: 0;
	}
}

span.question{
	font-weight: bold;
}

.hover img {
    display: none;
}

.about-image{
	width: 260px;
	height: 145px;
	margin-bottom: (@margin / 2);
}

.content.game-holder{	
	width: 900 - (@vmargin *2);
	height: 600px;
	background-color: #000;
	margin: 0 auto;
	text-align: center;
}

#game_teaser{
	margin-bottom: 10px;
}

.collumn-1.filled
{
	background: #fff;
	
	.header {
		height: 20px;
		background-image: url(../img/layout/header-1.gif);
		background-repeat: no-repeat;
		background-color: transparent;
	}
	.footer {
		height: 27px;
		background-image: url(../img/layout/footer-1.gif);
		background-repeat: no-repeat;
		background-color: transparent;
		background-position: bottom center;
	}
	
}
.collumn-2.filled
{
	background: #fff;
	
	.header {
		height: 20px;
		background-image: url(../img/layout/header-2.gif);
		background-repeat: no-repeat;
		background-color: transparent;
	}
	.footer {
		height: 27px;
		background-image: url(../img/layout/footer-2.gif);
		background-repeat: no-repeat;
		background-color: transparent;
		background-position: bottom left;
	}
}
.collumn-3.filled
{
	background: #fff;
	
	.header {
		height: 20px;
		background-image: url(../img/layout/header-3.gif);
		background-repeat: no-repeat;
		background-color: transparent;
	}
	.footer {
		height: 27px;
		background-image: url(../img/layout/footer-3.gif);
		background-repeat: no-repeat;
		background-color: transparent;
		background-position: bottom center;
	}
}
.collumn-3.filled-dark
{
	background: #262626;
	.content {
		color: #fff;
		a, table, td, p { color: #fff; }
		a.image img { margin-bottom: 0px; }
		a.image:hover { background-color: transparent; }
		tbody tr{ display: block; padding-bottom: 10px; }
		tbody th{ width: 55px;}
	}
	.header {
		height: 20px;
		background-image: url(../img/layout/header-3-black.gif);
		background-repeat: no-repeat;
		background-color: transparent;
	}
	.footer {
		height: 27px;
		background-image: url(../img/layout/footer-3-black.gif);
		background-repeat: no-repeat;
		background-color: transparent;
		background-position: bottom center;
	}
	
}
.collumn-4.filled
{
	background: #fff;
}
.collumn-3-wide.filled
{
	background: #fff;
	
	.header {
		height: 20px;
		background-image: url(../img/layout/header-3-wide.gif);
		background-repeat: no-repeat;
		background-color: transparent;
	}
	.footer {
		height: 27px;
		background-image: url(../img/layout/footer-3-wide.gif);
		background-repeat: no-repeat;
		background-color: transparent;
		background-position: bottom center;
	}
}

.content p.icons img {display: inline; margin-bottom: 0; position: relative; bottom: -2px}

.content img.traces, .content pre.traces{ margin-bottom: @hmargin; }
.content .annotation { margin-top: -10px;}