/**********************
** HOLY GRAIL LAYOUT **

taken from: A List Apart
http://www.alistapart.com/articles/holygrail/
by Matthew Levine

***********************/

body {
  min-width: 630px;      /* 2x (LC fullwidth +
                            CC padding) + RC fullwidth */
}
#container {
  padding-left: 200px;   /* LC fullwidth */
  padding-right: 240px;  /* RC fullwidth + CC padding */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  padding: 10px 20px;    /* CC padding */
  width: 100%;
}
#user {
  width: 180px;          /* LC width */
  padding: 0 10px;       /* LC padding */
  right: 240px;          /* LC fullwidth + CC padding */
  margin-left: -100%;
}
#info {
  width: 180px;          /* RC width */
  padding: 0 10px;       /* RC padding */
  margin-right: -240px;  /* RC fullwidth + CC padding */
}
#footer {
  clear: both;
}

/*** IE Fix ***/
* html #user {
  left: 200px;           /* RC fullwidth */
}


/* SITE SPECIFIC */


/***********************/
/*---general purpose---*/
/***********************/
html, body {
	margin: 0;
}

body {
	text-align: center;
	min-width: 1200px; /* cannot be lower than min-width above. */

	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	font-weight: normal;
	
	color: #cccccc;	
	/*background: url(../images/startile.gif);*/
	/*
	9_skin_1500x1000.jpg
	darkstalkers_skin_1500x1000.jpg
	background_template_1500x1000.jpg
	background_template_1600x1200.jpg
	*/
	background: url(../images/background_template_1600x1200.jpg) top center no-repeat fixed;
	background-color: #000000;
}

#outer {
	width: 80%;
    /*width: 832px;*/
	margin: auto;
/*	background-color: #000000; */
}

#header {
	height: 89px;
	width: 100%;
	text-align: center;
/*	background: #000000 url(../images/globe_grip.gif) no-repeat top center; */
}

#header_image {	
	width: 384px;
	height: 89px;
	float: left;
}

#header_image img{
	text-decoration: none;
	border: 0px;
}

body a:link {
	color: #c84b39;
}	
body a:visited {
	color: #c84b39;
}	
body a:hover {
	color: #b32229;
}

/* specifies that link styles also apply to images in IE */
a:link img, a:visited img {
	border-color: #c84b39;
}

a:hover img{
	border-color: #b32229;
}

body a:active {
	color: #b32229;
}

body strong {
	color: #649da6;
}

.no_border {
	border: 0px;
}

.no_border img{
	border: 0px;
}

.search_input {
	width: 60%;
	float: left;
}

.search_submit{
	width: 30%;
	float: left;
}

.search_result{
	margin-left:auto;
	margin-right:auto;
	width: 80%;
	text-align: center;
	overflow: hidden;
}

.search_result div{
	background: #333333;
}

.author_block {
	float: right;
	text-align: right;
}

div.comment_link{
	float: right;
}

.comment_link{
	text-align: right;
}

.comment_link img{
	border: 0px;
}

.tools{
	width: 100%;
	overflow: hidden;
}

.comment_tools{
	margin-left:auto;
	margin-right:auto;
	width: 90%;
	text-align: center;
	overflow: hidden;
}

div.admin_tools{
	width: 50%;
	overflow: hidden;
	float: right;
	text-align: right;
}

.admin_tools img{
	border: 0px;
}

.image_tools {
	border: 0px;
}

.rating_tools {
	width: 50%;
	float: left;
	text-align: left;
}

.vote_success {
	background: #E7FFCE url(../star_rating/images/rating_tick.gif) no-repeat 5px 50%;
	padding:0px;
	text-align:center;
	width:200px;
}

.subscription_success {
	background: #E7FFCE url(../star_rating/images/rating_tick.gif) no-repeat 5px 50%;
	padding:0px;
	text-align:center;
	width:200px;
}

.text8 {
	font-size: 8pt;
}

.timestamp {
	font-size: 8pt;
	color: #649da6;
}

p.categories {
	text-align: left;
	font-size: 8pt;
	color: #666666;
}

.category_list li {
	font-weight: bold;
	list-style-type: none;
	text-align: left;
}

.game_list {
	text-align: left;
}

.expand_button {
	background: transparent url(../images/icons/expand_16.png) no-repeat center;
	height: 16px;
	width: 16px;
	border: 0px;
}

.game_list img {
	border: 0px;
}

.game_list li {
	list-style-type: none;
	text-align: left;
	font-weight: bold;
}

.user_data a{
	font-weight: bold;
}

.user_data li{
	list-style-type: none;
	text-align: center;
}

.user_data a:link img, a:visited img, a:hover img {
border: 0px;
}

.links_list a:link img, a:visited img, a:hover img {
border: 0px;
}

a {
	text-decoration: none;
}

.login_text {
	float: left;
	text-align: right;
}

.login_input{
	float: right;
	text-align: left;
}

.form_preview fieldset {	
/*	background: #222222;*/

	border-width:2px;
	border-style:solid;
	border-color:#333333;
	
/*	padding: 1em;*/
}

.form_preview label {
	float:left;
	width:50%;
	text-align:right;
}

.form_preview legend {
	font-weight: bold;
	font-size: 150%;
}

.form_description {
	text-align: center;
/*	font-size: 8pt;*/
}

.form_description fieldset {	
	background: #222222;

	border-width:2px;
	border-style:solid;
	border-color:#333333;
	
/*	padding: 1em;*/
}

.form_description label {
	float:left;
	width:50%;
	text-align:right;
}

.form_description legend {
	font-weight: bold;
	font-size: 150%;
}

input.submit_image {
	background: #222222;
	border: 0px;
}

div.hr {
	height: 15px;
	background: url(../images/hr1.png) no-repeat scroll center;
	/*background: #222222 url(../images/hr1.gif) no-repeat scroll center;*/
}
div.hr hr {
	display: none;
}

.wrapper {
	width: 133px;
	margin: 0 auto;
}

div.button {
	height: 29px;	
	width: 133px;
	background: url(../images/icons/upload_16.png) 0 0;
	
	font-size: 14px;
	color: #C7D92C;
	text-align: center;
	padding-top: 15px;
}
/* 
We can't use ":hover" preudo-class because we have
invisible file input above, so we have to simulate
hover effect with javascript. 
 */
div.button.hover {
	background: url(../images/icons/upload_16.png) 0 56px;
}

.thumb_gallery {
	text-align: left;
    width: 100%;
    overflow: auto;	
    white-space: no-wrap; /*Don't let the images wrap to the next line*/
    height: 180px;
	background:#222222
}

.thumb_gallery_inner {
	width:1000px;
	padding:0 10px;
}

.thumb_gallery div{
	width:1000px;
	padding:0 10px;
}

.image_pallet {
 	display:none;
 	position:absolute;
 	left:80%;
 	width:800px;
}

.image_pallet div{
	height: 600px;
	overflow: auto;
}

.drag {
        position: absolute;
        border: 2px solid black;
        border-top: 20px solid blue;
        padding: 5px;
}

/******************************/
/*---end of general purpose---*/
/******************************/

/***********************/
/*---navigation menu---*/
/***********************/
img.no_border {
	border: 0px;
}

.nav_bar {
	width: 100%;
	text-align: center;
	overflow: hidden;
	/*padding: 0px 4px 0px 4px;*/
	background-color: #222222;
}

.nav_item{
	float: left;
	width: 20%;
	display: inline;
	font-size: 14pt;
}

.nav_item:hover{
	background-color: #333333;
}

.nav_item a {
	display: block;
	text-decoration: none;
}

.nav_item a:hover{
	background-color: #333333;
	text-decoration: none;
}
/******************************/
/*---end of navigation menu---*/
/******************************/

/****************/
/*---articles---*/
/****************/
.article_title_block{
	background-color: #222222;
}

.article_title_block:hover{
	background-color: #333333;
}

.article_title_block a{
	display: block;
	text-decoration: none;
}

.article_title_block a:hover{
	background-color: #333333;
	text-decoration: none;
}

.article_title{
	font-weight: bold;
}

.article_head {
	background-color: #333333;
}

.article {
	background-color: #222222;
	padding: 4px;
}

.article p{
	text-align: justify;
/*	text-indent: 40px; */
}

.article h1 {
	/*font-size: 175%;*/
	font-weight: bold;
}

.archive_list li {
	list-style-type: none;
	text-align: left;
}

.archive_list a {
	font-weight: bold;
}

.article_textarea {
	width: 100%;
	height: 500px;
}

p.full_article_link{
	text-align: center;
}
/***********************/
/*---end of articles---*/
/***********************/

/*****************/
/*---tutorials---*/
/*****************/
.tutorial_list {
	text-align: left;
	width: 100%;
	overflow: hidden;
	padding: 2px;
	background-color: #333333;
}

.tutorial_source_engine{
	background: #333333 url(../images/tutorial_source_engine.png) bottom center no-repeat;
}

.tutorial_cryengine_3{
	background: #333333 url(../images/tutorial_cryengine_3.png) bottom center no-repeat;
}

.tutorial_dunia_engine{
	background: #333333 url(../images/tutorial_dunia_engine.png) bottom center no-repeat;
}

img.tutorial_picture {
	float: right;
	border: 0px;
}

.tutorial_textarea {
	width: 100%;
	height: 500px;
}
/************************/
/*---end of tutorials---*/
/************************/

/*****************/
/*---downloads---*/
/*****************/
.download_find_text {
/*	float: left;
	text-align: right;*/
}

.download_find_input {
/*	float: right;
	text-align: left;*/
}

.download_find_item {
	width: 30%;
	float: left;
}

.download_find_item select {
	width: 90%;
}

.download_header {
	text-align: center;
	width: 100%;
	overflow: hidden;
	padding: 2px;
	background-color: #333333;
}

.download_portal{
	background: #333333 url(../images/download_portal.png) top left no-repeat;
}

.download_counter_strike_source{
	background: #333333 url(../images/download_counter_strike_source.png) top left no-repeat;
}

.download_team_fortress_2{
	background: #333333 url(../images/download_team_fortress_2.png) top left no-repeat;
}

.download_day_of_defeat_source{
	background: #333333 url(../images/download_day_of_defeat_source.png) top left no-repeat;
}

.download_half_life_2_deathmatch{
	background: #333333 url(../images/download_half_life_2_deathmatch.png) top left no-repeat;
}

.download_left_4_dead{
	background: #333333 url(../images/download_left_4_dead.png) top left no-repeat;
}

.download_header {
	text-align: center;
}

.download_body {
	text-align: center;
	width: 100%;
	overflow: hidden;
	padding: 2px;
	background-color: #222222;
}

.download_footer {
	text-align: left;
	width: 100%;
	overflow: hidden;
	padding: 2px;
	background-color: #222222;
}

.download_main_picture {
	width: 100%;
	height: 100px;
	overflow: hidden;
/*	float: left; */
	border: 0px;
}

.download_info {
	text-align: justify;
/*	float: left; */
	padding: 2px;
}

.download_more_pictures {
	text-align: center;
	width: 100%;
	overflow: hidden;
/*	float: right; */
}

.download_more_pictures img {
	border: 0px
}

/* .download_more_pictures a:link img, a:visited img, a:hover img {
	border: 2px;
} */

.download_count {
	float: right;
}

.download_delete img{
	border: 0px;
	text-align: right;
	float: right;
}

.tutorial_textarea {
	width: 100%;
	height: 500px;
}
/************************/
/*---end of downloads---*/
/************************/

/****************/
/*---comments---*/
/****************/
.comment {
	margin-left:auto;
	margin-right:auto;
	width:90%;
	overflow: hidden;
	text-align: left;
	background: #222222 url(../images/comment_head_bg.png) repeat-y right;
}

.comment_head{
	float: right;
	width: 100px;
	overflow: hidden;
	padding: 4px 4px;
	text-align: center;
	height: 100%;
}

.comment_avatar {
/*	float: right; */
}

.comment_head img {
	
}

.comment_body {
	overflow: hidden;
	padding: 4px 4px;
	height: 100%;
}

.comment_body p{
	word-wrap: break-word;
}

.comment_foot {
	overflow: hidden;
	padding: 4px 4px;
}

.enter_comment {
	text-align: center;
	width: 100%;
}

.enter_comment textarea{
	width: 100%;
}

.edit_comment {
	text-align: center;
	width: 100%;
	overflow: hidden;
}

.edit_comment textarea{
	width: 100%;
}
/***********************/
/*---end of comments---*/
/***********************/

/********************
*** MISC ************
********************/

/* ---for Lightbox2 hidden images---*/
.hide { display: none; }

/*---forms---*/

textarea            { border:1px solid #999; background:#ccc; padding:5px; }
textarea:focus      { border:1px solid #999; background:#fff; }

select              { border:1px solid #999; background:#ccc; width:200px; }
select:focus        { border:1px solid #999; background:#fff; }

input.text, input.title   { border:1px solid #999; background:#ccc; }
input.text:focus,
input.title:focus         { border:1px solid #999; background:#fff; }
input.title               { font-size:1.5em; }

input.file { border:1px solid #999; background:#ccc; }

input.image,
input.image:focus { border:0px; background:transparent; }

input.login { width:80px }

input   { border:1px solid #999; background:#ccc; }
input:focus         { border:1px solid #999; background:#fff; }

/* Success, error & notice boxes for messages and errors. */
.error,
.notice, 
.success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }
.error      { background: #FBE3E4; color: #D12F19; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #817134; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #529214; border-color: #C6D880; }
.error a    { color: #D12F19; }
.notice a   { color: #817134; }
.success a  { color: #529214; }

/*---end of forms---*/