/* 
Trine
Version 1.1
Design Santtu
Technical Joel
*/



/*///////////////////////////////*/
/* RESETS                        */
/*///////////////////////////////*/

/* Reset styles - START - these will clear the different browser defaults for various margins, borders and such */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
	margin: 0px;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	list-style-type: square;
 	list-style-position: outside;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/*///////////////////////////////*/
/* RESETS END                    */
/*///////////////////////////////*/


body,html
{
line-height: 1;
color: white;
/* background: #808080;	*/
background: black;
text-align: center;
top: 0px;
}

#container_background
{
margin: 0 auto 0 auto;
width: 100%;
height: 1200px;
background: transparent url('../graphics/site_background.jpg') top center no-repeat;
position: absolute;
top: 0px;
}

* html #container_background
{
<!--[if lte IE 6]>
margin: 0 auto 0 auto;
width: 100%;
height: 12000px;
background: transparent url('../graphics/site_background.jpg') top center no-repeat;
position: absolute;
top: 80px;
<![endif]-->
}




#container_page
{
top: 0px;
margin: 0 auto 0 auto;
width: 100%;
min-height: 960px;
position: relative;
}

#container_siteframe_forfooter
{
margin: 0 auto 0 auto;
width: 1200px;
background: transparent;
overflow-y: hidden;
overflow-x: hidden;
}

#container_siteframe
{
margin: 0 auto 0 auto;
width: 1000px;
background: transparent;
overflow-y: hidden;
overflow-x: hidden;
}

#container_site
{
width: 1000px;
background: transparent;
position: relative;
float: left;
overflow-y: hidden;
overflow-x: hidden;
text-align: left;
}

* html #container_site
{
<!--[if lte IE 6]>
width: 1000px;
background: transparent;
position: relative;
float: left;
overflow-y: hidden;
overflow-x: hidden;
text-align: left;
<!--[endif]>
}

#container_header
{
width: 1000px;
height: 243px;
background: transparent;
position: relative;
float: left;
z-index: 2;
}

* html #container_header
{
<!--[if lte IE 6]>
width: 1000px;
height: 100px;
background: transparent;
position: relative;
float: left;
z-index: 2;
<!--[endif]>
}


#header_logo
{
margin: 0 auto 0 auto;
background: transparent url('../graphics/site_header.png') center top no-repeat;
width: 400px;
height: 115px;
position: relative;
top: 60px;
left: -130px;
z-index: 20;
}


#header_awards
{
position: absolute;
margin: 0 auto 0 auto;
background: transparent;
/* url('../graphics/trine_gamespot_e3_2009_award.gif') left top no-repeat;
*/
width: 110px;
height: 118px;
top: 60px;
left: 580px;
z-index: 21;
}





#langBoxPosition
{
position: absolute;
margin: 0 auto 0 auto;
width: 50px;
/* height: 176px; */
height: 228px;
top: 280px;
right: -3px;
z-index: 5;
background: url('../graphics/site_languages_holder.png') bottom no-repeat;
}

#container_menu
{
width: 80px;
position: relative;
top: 0px;
float: left;
/*
background: white;
filter:alpha(opacity=20);-moz-opacity:.20;opacity:.20;
*/
margin-right: 0px;
}

* html #container_menu
{
<!--[if lte IE 6]>
width: 250px;
position: absolute;
top: 250px;
left: -26px;
float: left;
background: transparent;
/*
background: white;
filter:alpha(opacity=20);-moz-opacity:.20;opacity:.20;
*/
margin-right: 0px;
<!--[endif]>
}

#menu
{
vertical-align: top;
width: 80px;
min-height: 300px;
height: 300px;
background: transparent;
padding-left: 30px;
font-family: Arial, verdana, tahoma, sans-serif;
font-size: 18px;
color: white;
text-align: right;
position: relative;
top: 30px; left: -18px;
}

* html #menu
{
<!--[if lte IE 6]>
vertical-align: top;
width: 80px;
min-height: 400px;
height: 400px;
background: transparent;
padding-left: 30px;
font-family: Arial, verdana, tahoma, sans-serif;
font-size: 18px;
color: white;
text-align: right;
position: relative;
top: 0px; left: 0px;
float: left;
<!--[endif]>
}

#menu_ornament_bottom
{
position: absolute;
top: 300px;
left: 114px;
background: url('../graphics/site_menu_ornament_bottom.png') no-repeat;
width: 50px;
height: 51px;
}

#container_absolute_bordertop_left
{
position: absolute;
top: 244px;
left: 146px;
width: 12px;
height: 174px;
background: url('../graphics/border_left_top.png') no-repeat;
z-index: 10;
}

#container_absolute_bordertop_right
{
position: absolute;
top: 244px;
right: 45px;
width: 12px;
height: 174px;
background: url('../graphics/border_right_top.png') no-repeat;
z-index: 10;
}

#container_absolute_bordertop_top
{
position: absolute;
top: 224px;
right: 35px;
width: 837px;
height: 50px;
/* height: 82px; */
background: transparent url('../graphics/site_absolute_bordertop.png') no-repeat;
z-index: 11;
}

#container_content_container
{
float: left;
position: relative;
left: 66px;
width: 809px;
background: url('../graphics/site_content_pushcontainer.png') repeat-y;
}


#container_content_area
{
background: blue;
width: 785px;
min-height: 960px;
margin-left: 12px;
background: black url('../graphics/site_content_background.jpg') no-repeat;
}

#container_content_border_bottom
{
width: 890px;
height: 82px;
left: 105px;
background: transparent url('../graphics/site_border_bottom.png') no-repeat;
position: relative;
float: left;
z-index: 5;
}



#content
{
width: 700px;
position: relative;
padding: 34px 10px 20px 20px;
z-index: 1;
}


#video
{
width: 500px;
/*height: 330px;
*/
/* 480 298 */
float: left;
margin-top: 0px;
margin-left: 28px;
background: url('../graphics/site_graphics_videoborder.png') no-repeat;
padding: 10px 0px 0px 10px;
}

/* OLD VIDEO #video
{
width: 425px;
height: 344px;
float: left;
margin-top: 10px;
position: relative;
}
*/

.buycolumn_container
{
float: left;
width: 600px;
margin: 24px 0px 0px 0px;
}

.buycolumn
{
float: left;
background: transparent;
/* url('../graphics/site_graphics_hr.png') no-repeat;
*/ 
padding: 0px 0px 0px 14px;
margin: 0px 0px 0px 4px;
color: #EBDBA4;
}

#container_indexpage_rightcolumn
{
position: absolute;
top: 134px;
/* sales:
top: 300px;
*/
right: -54px;
width: 220px;
background: url('../graphics/site_graphics_hr.png') no-repeat;
background-position: 36px 140px;
color: #EBDBA4;
}




#container_footer
{
margin: 0 auto 0 auto;
width: 100%;
height: 250px;
/* height: 260px; */
position: relative;
float: left;
/* top: -82px; */
top: 0px;
text-align: left;
margin-left: 0px;
overflow-x: hidden;
overflow-y: hidden;
}

#container_footer_container
{
margin: 0 auto 0 auto;
width: 990px;
height: 250px;
position: relative;
top: 0px;
text-align: left;
left: 80px;
}

#container_footer_logos
{
margin: 0 auto 0 auto;
width: 990px;
height: 250px;
background: transparent url('../graphics/site_footer_logos.png') no-repeat;
position: relative;
float: left;
top: 0px;
text-align: left;
/* margin-left: 80px; */
}

#container_footer_logos_russian
{
margin: 0 auto 0 auto;
width: 990px;
height: 250px;
background: transparent url('../graphics/site_footer_logos_ru.png') no-repeat;
position: relative;
float: left;
top: 0px;
text-align: left;
/* margin-left: 80px; */
}

#text_copyright
{
float: left;
width: 600px;
height: 80px;
position: relative;
top: 5px;
left: 200px;
/* color: #a4a8a9;
*/
color: #6F6F6F;
font-size: 8px;
font-family: verdana, arial, tahoma, sans-serif;
font-weight: normal;
background: transparent;
text-align: left;
}

.textbox_index
{
width: 580px;
/*text-align: center; */
text-align: left;
float: left;
padding-left: 10px;
}

.site_menu_item
{
width: 150px;
height: 36px;
margin: 3px 0px 3px 3px;
float: left;
text-align: right;
}

a.menulink
{
font-family: Arial, verdana, tahoma, sans-serif;
font-size: 18px;
text-decoration: underline;
color: white;
text-align: right;
padding-right: 14px;
}

a.menulink:hover
{
font-size: 20px;
text-decoration: underline;
}

a
{
text-decoration: underline;
color: #FFC37A;
font-weight: normal;
}

a:hover
{
text-decoration: none;
}


/* ****
* Navigation links included from separate file
********
*/



.imagelink, .imagelink:link
{
font-family: Arial, verdana, tahoma, sans-serif;
font-size: 12px;
color: #F89912;
text-decoration: none;
border: 1px solid #76513F;
margin: 5px;
}

.imagelink:hover
{
border: 1px solid #AF8977;
}

p
{
font-family: verdana, arial, tahoma, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
line-height: 1.2;
padding: 5px;
}

.quote
{
text-decoration: none;
font-style: italic;
padding-left: 50px;
color: #EBDBA4;
}

.header_trine, .trine_header
{
font-family: verdana, arial, tahoma, sans-serif;
font-size: 14px;
color: white;
font-weight: bold;
text-decoration: none;
line-height: 1.2;
padding: 5px;
}


/*
*	LANG BOX
*/
.langBox
{
	width: 50px;
	border: 0px solid #4F5457;
	background: transparent;
}
.langBox img
{
	vertical-align: middle;
	margin: 1px 0px 1px 4px;
}

/*
.language_flag
{
float: left;
position: relative;
width: 40px;
height: 24px;
text-align: center;
}
*/

.language_flag_link
{
font-family: Verdana, arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: white;
border: 0px solid red;
}

.language_flag_link:hover
{
/* border: 1px solid grey; */
margin-left: 3px;
}



.textbox_basic
{
width: 700px;
}




.screenshot_container
{
/*  position: float;  */
  float: left;
  top: 0px;
  left: 0px;
  z-index: 1;
  width: 230px;
  height: 150px;
  overflow: hidden;
}

.screenshot_image
{
  position: relative;
  top: 10px;
  left: 5px;
  z-index: 1;
/*  width: 200px;
  height: 125px;
*/
}

.screenshot_chains
{
  position: relative;
  top: -125px;
  left: 0px;
  z-index: 2;
}

.screenshot_hover:hover
{
background: white;
filter:alpha(opacity=20);-moz-opacity:.20;opacity:.20;
}

ul
{
list-style-position: outside;
list-style-image: url('../graphics/bulletpoint.png');
margin: 5px 5px 5px 30px;
text-indent: 0px;
color: #a4a8a9;
}

li
{
padding: 3px 3px 3px 0px;
}


.unnecessarylistuff
{
background:url('../graphics/bulletpoint.png') no-repeat 0px 4px; /* sets list backgorund for ff position */
/* this may not be needed if the _height works but I want to be certain its going to work */
/* background:url('../graphics/bulletpoint.png') no-repeat 0px 6px; /* same thing for ie 6 hack to make lower*/
/* min-height:*/ /* 0px;  /* for ie7 bullets to align in the right position  **use firefox, prevents us having to hack css** */
/* height:1; */ 	
*/

/* list-style-image: url('../graphics/bulletpoint.png');*/
/* list-style-type: square; */

}





.blend img 
{
opacity: 0;
-moz-opacity: 0;
-khtml-opacity:0;
filter: alpha(opacity=0);
}

.footer_logo
{
margin-left: 40px;
margin-top: 0px;
float: left;
}

.footer_logolinks
{
width: 400px;
height: 60px;
margin-left: 60px;
margin-top: 72px;
}

.footer_logolinks_left
{
float: left;
width: 50px;
height: 60px;
margin-left: 80px;
margin-top: 125px; 
}


.footer_logolinks_right
{
float: left;
width: 200px;
height: 60px;
margin-top: 125px;
margin-left: 50px;
}

#text_copyright2
{
float: left;
width: 520px;
height: 80px;
position: relative;
top: 125px;
left: 30px;
/* color: #a4a8a9;
*/
color: #6F6F6F;
font-size: 8px;
font-family: verdana, arial, tahoma, sans-serif;
font-weight: normal;
background: transparent;
text-align: left;
}


.textbox_basic_makingof
{
width: 700px;
position: relative;
top: 0px; left: 10px;
}

.makingof_question
{
font-weight: bold;
margin: 12px 0px 5px 0px;
}

.makingof_answer
{
font-weight: normal;
font-family: verdana, arial, tahoma, sans-serif;
font-size: 12px;
/* old layout color: #a4a8a9; */
color: #EBDBA4;
text-decoration: none;
line-height: 1.2;
}

.makingof_concept
{
text-align: center;
margin: 16px 0px 10px 0px;
}

.makingof_screens
{
float: left;
text-align: center;
margin: 16px 0px 10px 0px;
width: 100%;
clear: both;
}


/* CHARACTER BIOS */

#container_for_characters
{
width: 700px;
background: transparent;
/* background: black; */
float: left;
clear: both;
}

.container_for_characters_character
{
width: 200px;
height: 250px;
margin: 16px;
float: left;
}

.character_image
{
float: left;
width: 200px;
background: transparent;
/* background: purple; */
height: 220px;
text-align: center;
}

.character_text
{
width: 190px;
float: left;
background: transparent;
/* background: grey; */
font-family: verdana, arial;
font-size: 18px;
font-weight: bold;
text-align: center;
margin: 6px 0px 6px 0px;
padding: 2px;
text-transform: uppercase;
}


/* CHARACTER BIOS FACTS */

.character_fullbio_container
{
width: 650px;
background: transparent;
float: left;
clear: both;
border-top: 2px solid grey;
margin-top: 16px;
padding-top: 4px;
}

.character_fullbio_headline
{
width: 650px;
float: left;
font-family: verdana, arial;
text-align: center;
font-size: 20px;
font-weight: bold;
height: 30px;
}

.character_fullbio_image
{
width: 200px;
text-align: center;
float: left;
height: 220px;
background: transparent;
text-align: center;
}

.character_fullbio_facts
{
width: 430px;
float: left;
padding-left: 20px;
line-height: 1.5;
}

.character_fullbio_text
{
width: 650px;
text-align: left;
float: left;
}

a.nolink
{
text-decoration: none;
color: white;
}


/* SALES STUFF */

#mainmenu_sales_75off
{
position: absolute;
top: 50px;
right: -54px;
width: 216px;
height: 300px;
}



/* REVIEW PAGE */

img.award
{
float: left;
padding: 7px;
padding-right: 7px;
}

div.quotesource
{
padding-left: 40px;
font-size: 14px;
}



/* CONTENT NOT FOUND */
#content_notavailable
{
position: relative;
float: left;
width: 700px;
height: 24px;
text-align: center;
border-bottom: 2px solid #FFC37A;
margin-bottom: 5px;
}