/*
	:: layout.css ::
	
	Layout-ul general pt toate paginile site-ului.
	
	Copyright (c) 2010 Bits&Coffee SRL. All Rights Reserved.
*/


/*------------------------------------------------------------------------------
	Header
------------------------------------------------------------------------------*/

#header
{
	display: block;
	width: 940px;
	height: 130px;
	padding: 0px;
	margin: 0 auto;
}

#header .logo
{
	display: inline;
	width: 340px;
	height: 130px;
	float: left;
}

#header .logo a
{
	display: block;
	width: 170px;
	height: 100px;
	margin: 15px 15px;
	background: transparent url(../../image/template/logo-bp-small.png) repeat scroll 0 0;
}


/* menu */

#header .menu
{
	display: inline;
	width: 600px;
	height: 130px;
	float: right;
}

#header .menu ul
{
	float: right;
	width: 500px;
	height: 40px;
	margin: 45px auto;
	padding: 0;
}

#header .menu ul li
{
	list-style: none;
	list-style-image: none;
	float: left;
}

#header .menu ul li a
{	
	display: block;
	width: 100px;
	height: 40px;
	background: transparent url(../../image/template/menu.png) repeat scroll 0 0;
	/*opacity: 0.7;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);*/
}

#header .menu ul li.home a { background-position: 0 0; }
#header .menu ul li.home a:hover { background-position: 0 -40px; }
#header .menu ul li.home a.selected { background-position: 0 -80px !important; }

#header .menu ul li.download a { background-position: -100px 0; }
#header .menu ul li.download a:hover { background-position: -100px -40px; }
#header .menu ul li.download a.selected { background-position: -100px -80px !important; }

#header .menu ul li.purchase a { background-position: -200px 0; }
#header .menu ul li.purchase a:hover { background-position: -200px -40px; }
#header .menu ul li.purchase a.selected { background-position: -200px -80px !important; }

#header .menu ul li.support a { background-position: -300px 0; }
#header .menu ul li.support a:hover { background-position: -300px -40px; }
#header .menu ul li.support a.selected { background-position: -300px -80px !important; }

#header .menu ul li.company a { background-position: -400px 0; }
#header .menu ul li.company a:hover { background-position: -400px -40px; }
#header .menu ul li.company a.selected { background-position: -400px -80px !important; }


/*------------------------------------------------------------------------------
	Content
	
	In #content putem avea multiple .container-e. Putem de-asemenea avea si
	elemente specifice anumitor pagini (vezi .product-slot).
	
	Un .container poate contine .slot-uri in diferite configuratii, ex. main +
	right, trei coloane etc.
	
	Un .slot nu este altceva decat un place-holder in care putem pune contentbox
	-uri sau text.
------------------------------------------------------------------------------*/

#content
{
	display: block;
	width: 940px;
	margin: 0 auto;
}

.container
{
	display: block;
	width: 940px;
	height: auto;
	margin-bottom: 40px;
}

/* Main + Right */

.container .slot-main
{
	display: block;
	float: left;
	width: 600px;
	height: 100%;
}

.container .slot-right
{
	float: left;
	width: 300px;
	height: 100%;	
	margin-left: 40px;
	vertical-align: top;
}

/* Left + Main */

.container .slot-left
{
	float: left;
	width: 300px;
	height: 100%;
	margin-right: 40px;
	vertical-align: top;
}

/* Two Columns */

.container .slot-460
{
	display: inline;
	float: left;
	
	width: 460px;
	height: 100%;
	margin-left: 20px;
}
.container .slot-460:first-child { margin-left: 0; }

/* Three Columns */

.container .slot-300
{
	display: inline;
	float: left;
	
	width: 300px;
	height: 100%;
	margin-left: 20px;
}
.container .slot-300:first-child { margin-left: 0; }
/*.container .slot-300:hover { background-color: #dddddd; }*/


/*------------------------------------------------------------------------------
	Banner
------------------------------------------------------------------------------*/

.banner
{	
	width: 940px;
	height: 300px;
	display: block;
	
	/*background-color: #6699FF;*/
	background-color: transparent;
	background-image: url(../../image/template/banner-simple.png);
	background-repeat: no-repeat;

	margin-bottom: 40px;
}

/* Text */

.banner .text
{
	position: relative;
	display: block;
	z-index: 2;
	
	width: 500px;
	height: 170px;
	
	padding: 50px 270px 0 40px;
	margin-bottom: 40px;
}

.banner .text h1
{
	font-family: arial;
	font-size: 24px;
	color: #ffffff;
	text-shadow: 0 -1px 0 #666666;
}

.banner .text p
{	
	font-size: 13px;
	text-align: justify;
	color: #eeeeee;	
}

.banner .text ul
{	
	color: #eeeeee;
}

.banner .text a
{
	color: #ddddff;
}

/* Tabs */

.banner .tabs-placeholder
{
	display: block;
	position: relative;
	height: 40px;
	padding: 0 0 0 40px;
	margin: 0;
}

/* Overlay */

.banner .overlay-bp-symbol
{
	position: relative;
	display: block;
	z-index: 1;

	left: 645px; /* 940px - width */
	top: -303px;
	width: 305px;
	height: 315px;
	background-image: url(../../image/template/logo-bp-symbol.png);
}

.banner .overlay-bp-boxshot
{
	position: relative;
	display: block;
	z-index: 1;

	left: 698px;
	top: -310px;
	width: 192px;
	height: 350px;
	background-image: url(../../image/template/boxshot-bp.png);
}

.banner .overlay-bc-symbol
{
	position: relative;
	display: block;
	z-index: 1;

	left: 710px;
	top: -310px;
	width: 170px;
	height: 300px;
	background-image: url(../../image/template/logo-bc-symbol.png);
}


/*------------------------------------------------------------------------------
	Footer
------------------------------------------------------------------------------*/

#footer
{	
	display: block;
	width: 940px;
	margin: 0 auto;
	
	height: 1px;
	border: 0 none;
	clear: both;
	background-color: #D4D4D4;
}

#footer .links
{
	display: block;
	/*background-color: #eeeeee;*/
	text-align: center;
	padding: 10px;	
}
#footer .links a
{
	font-size: 10px;
	color: #6699FF;
	text-decoration: none;
	margin-right: 20px;
}
#footer .links a:hover
{
	text-decoration: underline;
}

#footer .copyright
{
	display: block;
	text-align: center;
	padding: 10px;
}
#footer .copyright p
{
	font-size: 10px;
	margin: 0;
}