/* CSS Document */
/* ############### tales.be css framework v0.5 (by kvd) ###############  */
/* ############### b.01.grids.custom.css ############### */



/* ############### BASIC BUILDING BLOCKS ADDONS ############### */
#outerwrapper{	}
#pagewrapper{
	width: 984px;
	padding: 0 0 0 24px;
	/* standard centered layout*/
	/* for left- or righthanded laoyout: set margin-left or -right to 0*/
	/*margin-left: 0;*/
	/*margin-right: 0;*/	
}

#topblock{
	overflow: hidden;
}

#header{
	/*overflow: hidden;*/
}

#topnav{
	height: 58px; 
	overflow: hidden;
	background: url(../image/templates/basics/background.topnav.png) no-repeat;
	background-position:  0px 0px;
	margin-left: -23px;
	width: 1008px;
	position: relative;
	top: -41px;
	z-index: 6;
	
}
	#IE6 #topnav{		background-image: url(../image/templates/basics/background.topnav.gif);}
	
	.blue   #topnav{background-position: 0px -100px;}
	.green  #topnav{background-position: 0px 0px;}
	.orange #topnav{background-position: 0px -200px;}
	.purple #topnav{background-position: 0px -300px;}
	


#contentsection, #productdetail{
	margin-top: -30px;
 }
 

 

#footer{
	overflow: hidden;
	margin: 20px 0 20px 10px;
	width: 958px;
	background: url(../image/templates/basics/background.footer.png) no-repeat;
	height: 25px;
	padding-top: 8px;
}
	#IE6 #footer{	background-image: url(../image/templates/basics/background.footer.gif);}
	
	.blue   #footer{ background-position: 0 -100px;}
	.greeen #footer{ background-position: 0 0px;}
	.orange #footer{ background-position: 0 -200px;}
	.purple #footer{ background-position: 0 -300px;}
	
	
#madeby{
	overflow: hidden;
}



/* minimum height system */
/*
First rule is mozilla + IE7
Second rule is IE6 

.oneCol#header .col1 {min-height: 200px;}
*html* .oneCol#header .col1 {height: 200px;}

*/


/* ############### 1 COLUMN LAYOUT ADDONS: dimensions, colors, backgrounds ############### */
/*.oneCol#header .col1{	height: 150px;	}*/
.oneCol#contentsection .col1{ width: 950px; margin-left: 10px;	}

/* ############### 2 COLUMN LAYOUT ADDONS: dimensions, colors, backgrounds ############### */
.twoCols#header .col1{	height: 87px;	width: 200px;
	position: relative;
	top: -35px;
	z-index: 5;}
.twoCols#header .col2{	height: 87px;	width: 760px; margin-right: 24px;}

/*.twoCols#contentsection .col1{	width: 200px;}
.twoCols#contentsection .col2{	width: 760px;}*/

/* ############### 3 COLUMN LAYOUT ADDONS: dimensions, colors, backgrounds ############### */
/*.threeCols#header .col1{	height: 150px;	width: 200px;}
.threeCols#header .col2{	height: 150px;	width: 560px;}
.threeCols#header .col3{	height: 150px;	width: 200px;}*/

/*.threeCols#contentsection .col1{	width: 200px;}
.threeCols#contentsection .col2{	width: 560px;}
.threeCols#contentsection .col3{	width: 200px;}
*/

/* ############### 4 COLUMN LAYOUT ADDONS ############### */
/*.fourCols#header .col1{	height: 150px;	width: 240px;}
.fourCols#header .col2{	height: 150px;	width: 240px;}
.fourCols#header .col3{	height: 150px;	width: 240px;}
.fourCols#header .col4{	height: 150px;	width: 240px;}*/

/*.fourCols#contentsection .col1{	width: 240px;}
.fourCols#contentsection .col2{	width: 240px;}
.fourCols#contentsection .col3{	width: 240px;}
.fourCols#contentsection .col4{	width: 240px;}*/

/* ############### 5 COLUMN LAYOUT ADDONS ############### */
/*.fiveCols#header .col1{	height: 150px;	width: 192px;}
.fiveCols#header .col2{	height: 150px;	width: 192px;}
.fiveCols#header .col3{	height: 150px;	width: 192px;}
.fiveCols#header .col4{	height: 150px;	width: 192px;}
.fiveCols#header .col5{	height: 150px;	width: 192px;}*/

/*.fiveCols#contentsection .col1{	width: 192px;}
.fiveCols#contentsection .col2{	width: 192px;}
.fiveCols#contentsection .col3{	width: 192px;}
.fiveCols#contentsection .col4{	width: 192px;}
.fiveCols#contentsection .col5{	width: 192px;}*/

/* ############### 6 COLUMN LAYOUT ADDONS ############### */
/*.sixCols#header .col1{	height: 150px;	width: 160px;}
.sixCols#header .col2{	height: 150px;	width: 160px;}
.sixCols#header .col3{	height: 150px;	width: 160px;}
.sixCols#header .col4{	height: 150px;	width: 160px;}
.sixCols#header .col5{	height: 150px;	width: 160px;}
.sixCols#header .col6{	height: 150px;	width: 160px;}*/

/*.sixCols#contentsection .col1{	width: 160px;}
.sixCols#contentsection .col2{	width: 160px;}
.sixCols#contentsection .col3{	width: 160px;}
.sixCols#contentsection .col4{	width: 160px;}
.sixCols#contentsection .col5{	width: 160px;}
.sixCols#contentsection .col6{	width: 160px;}*/



/* ############### ADDITIONAL GRIDS OR SUBGRIDS ############### */


/* ############### #TOPBLOCK GRID ############### */
#langswitch{	}
#productstop{ float: right; margin-right: 24px;	}



/* ############### #HEADER GRID ############### */

#catscontainer{
	display: block;
	margin: 0px 0 0 80px;
}
	#IE6 #catscontainer{
		/*display: none;*/
	}

#catscontainer img{margin-top: 53px;}
	#IE6 #catscontainer img{
		/*display: none;
		margin-top: 0;*/
		}

		
/* ############### #HOMEPAGE GRID ############### */		
.home #contentsection{
	padding-left: 5px;
}		
.home #contentsection .col1{
	width: 287px;
	padding: 0 !important;
	margin-right: 24px;
	border:0;
}		
	
		
.home #contentsection .col2{
	width: 648px;
	padding: 0;
}		


/* ############### #PRODUCTS GRID ############### */

#productdetail .col1{	width: 285px;margin-left: 10px; padding-top: 85px; }
#productdetail .col2{	width: 665px;}



.game #sidenav{	width: 205px;margin-left: 10px; padding-top: 85px; }
.game #contentsection .col2{	width: 745px;}



/* ############### ECARDS GRID ############### */
#ecardintro{
	margin-top: -30px;
}
#ecardintro .col1{	width: 950px; margin-left: 10px; }



#ecardgrid, #ecardviewgrid{
	margin-top: 20px;
}

#ecardgrid .col1{	width: 285px;margin-left: 10px;  }
#ecardgrid .col2{	width: 345px;margin-right: 20px;}
#ecardgrid .col3{	width: 300px;}


#ecardviewgrid .col1{	width: 285px; margin-left: 10px; margin-right: 20px;}
#ecardviewgrid .col2{	width: 645px; }


/* ############### DOWNLOADS GRID ############### */
#downloadsgrid{	margin-top: -30px;}
#downloadsgrid .col1{	width: 285px;margin-left: 10px; padding-top: 85px; }
#downloadsgrid .col2{	width: 665px;}

