@import url("animations.css");
@import url("steam.css");

/* ---------------------------------------*/
/* ---------------- Main -----------------*/ 
/* ---------------------------------------*/

body 
{ 
    background-image: url(../background/new.jpg);
    background-repeat:no-repeat;
    background-position:center top;
    background-color:#becbba;
    min-height:1333px;
}

ul#tropico4_menu
{
	list-style:none;
	width: 680px;
	text-align: center;
	position: absolute;
	top: -15px;
	left: -71px;
	z-index:5;
	color: black;
	font-family:Helvetica, sans-serif;
	
	-webkit-transition:opacity 1.5s linear;
	-moz-transition:opacity 1.5s linear;
	-o-transition:opacity 1.5s linear;
	-ms-transition:opacity 1.5s linear;
	transition:opacity 1.5s linear;
}

ul#tropico4_menu.hidden
{
	
}

ul#tropico4_menu li
{
	display:inline;
	padding-left:12px;	
}

ul#tropico4_menu li a
{
	text-underline:none;
	text-decoration:none;
	text-transform:uppercase;
	color:inherit;
	font-size:14px;
	font-weight:bold;
	font-size:12px;
	
	-webkit-transition:color 0.4s linear;
	-moz-transition:color 0.4s linear;
	-o-transition:color 0.4s linear;
	-ms-transition:color 0.4s linear;
	transition:color 0.4s linear;	
}

ul#tropico4_menu li.current_page a
{
	color:#8d130e;
	border-bottom: 1px solid #8d130e;	
}

ul#tropico4_menu li a:hover
{
	color:#8d130e;	
}

h1 img#heading
{
	position:absolute;
	top: -81px;
	left: 44px;	
	
	-webkit-transition:-webkit-transform 1.5s ease-out;
	-moz-transition:-moz-transform 1.5s ease-out;
	-o-transition:-o-transform 1.5s ease-out;
	-ms-transition:-ms-transform 1.5s ease-out;
	transition:transform 1.5s ease-out;
}

h1.hidden img#heading
{
	-webkit-transform:translateY(-200px);
	-moz-transform:translateY(-200px);
	-o-transform:translateY(-200px);
	-ms-transform:translateY(-200px);
	transform:translateY(-200px);	
}

#privacypolicy {
	position: fixed;
	bottom: 20px; right: 20px;
	background-color: #FFF;
	width: auto;
	padding: 3px 10px 2px;
	margin-top: 10px;
	color: #000;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	z-index: 10;
	font-size: 12px;
}

#privacypolicy:hover {
	color: #000;
	font-weight: bold;
	padding: 3px 7px 2px;
}

#menu_esrb_logo 
{
	position: fixed !important;
	bottom: 20px;
	left: 20px !important;
	z-index: 10;
}

img#presidente
{
	position:absolute;
	top: 102px;
	left: -21px;
	
	-webkit-transition:opacity 1.5s linear;	
	-moz-transition:opacity 1.5s linear;	
	-o-transition:opacity 1.5s linear;	
	-ms-transition:opacity 1.5s linear;	
	transition:opacity 1.5s linear;	
}


.dlc img#presidente
{
	position:absolute;
	top: 102px;
	left: -21px;
}

.image_popup 
{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	z-index: 999;
	background: rgba(0,0,0,0.7);
	vertical-align: middle;
	text-align: center;
}

.image_popup img
{
	position:relative;
	top:26px;	
	border:3px white solid;
}

div.image_popup:target
{
	display:block;	
}

.close_button
{
	position: relative;
	top: -589px;
	left: 19px;
	z-index:2;
}

.close_button > img
{	
	border:none;
}

.hidden
{
	opacity:0;	
}

#mute_bar
{
	background-image:url("../images/sound/control_background.png");
	background-repeat:no-repeat;
	width:144px;	
	height:18px;
	top: 82px !important;
	left: -165px !important;
}

#mute_bar input#volumeControl
{
	background-image:url("../images/sound/level_bar.png");
	background-repeat:no-repeat;
	height: 5px;
	position: relative;
	left: 2px;
	top: -1px;
	width: 106px;	
	-webkit-border-radius: 0 !important;
	-webkit-box-shadow: none !important;
	-moz-border-radius: 0 !important;
	-moz-box-shadow: none !important;
	-o-border-radius: 0 !important;
	-o-box-shadow: none !important;
	-ms-border-radius: 0 !important;
	-ms-box-shadow: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
}
#mute_bar input#volumeControl::-moz-range-track {
  -moz-appearance: none;
	background-image:url("../images/sound/level_bar.png");
	background-repeat:no-repeat;
	border: 0;
	height: 5px;
}

div#mute_bar div#muteControl
{
	width: 30px;
	height: 30px;
	position:relative;
	top: -15px;
	left: 127px;	
}

div#mute_bar div#muteControl div#muted
{
	background-image:url("../images/sound/mute_on.png");
	background-repeat:no-repeat;
	width:30px;
	height:30px;
}

div#mute_bar div#muteControl div#unmuted
{
	background-image:url("../images/sound/mute_off.png");
	background-repeat:no-repeat;
	width:30px;
	height:30px;
}

input#volumeControl::-webkit-slider-thumb {  
    -webkit-appearance: none;  
    background-image:url("../images/sound/slider.png");
    background-repeat:none;
    height:17px;
    width:10px;
} 

input#volumeControl::-moz-range-thumb {  
    -moz-appearance: none;  
    background-image:url("../images/sound/slider.png");
    background-repeat:none;
    border: 0;
    height:17px;
    width:10px;
} 

@-moz-document url-prefix()
{
	div#mute_bar div#muteControl
	{
		top:-14px;	
	}
	#mute_bar input#volumeControl {
	  left: -2px;
	  top: 1px;
	}
}

/* ---------------------------------------*/
/* ---------------- Home -----------------*/ 
/* ---------------------------------------*/

div#home_text
{
	position:absolute;
	top: 268px;
	left: -75px;
	height: 494px;
	width: 344px;
	
	background-image:url(../images/text_background.png);
	background-repeat:no-repeat;
	
	-webkit-animation:home_text 2s 3s linear both;
	-moz-animation:home_text 2s 3s linear both;
	-o-animation:home_text 2s 3s linear both;
	-ms-animation:home_text 2s 3s linear both;
	animation:home_text 2s 3s linear both;
}

.de div#home_text
{
	height: 520px;
	background-size: 100% 100%;	
}

div#home_text.hidden
{
	opacity:1;
}

div#home_text h2
{
	position:absolute;
	top:26px;
	left:2px;
	width:100%;
	font-family: Courier New, monospace;
	text-transform:uppercase;
	text-align:center;
	
	margin:0;	
}

.fr div#home_text h2, .es div#home_text h2 {
  font-size: 15px;
}

div#home_text p
{
	font-family: Courier New, monospace;
	line-height: 15px;
	padding-bottom:20px;
	margin-left:26px;
	margin-right:26px;	
	text-align:left;
	color:black;
	font-size:14px;
	font-weight:bold;
}

div#home_text p:nth-of-type(1)
{
	margin-top:65px
}

div#home_trailer
{
	position:absolute;
	top: 300px;
	left: 267px;
	width: 435px;
	height: 258px;
	
	background-image:url(../images/home/trailer.png);
	background-repeat:no-repeat;
	
	-webkit-animation:home_trailer 2s 5s linear both;
	-moz-animation:home_trailer 2s 5s linear both;
	-o-animation:home_trailer 2s 5s linear both;
	-ms-animation:home_trailer 2s 5s linear both;
	animation:home_trailer 2s 5s linear both;
}
div#home_trailer:-moz-full-screen-ancestor {
  -moz-animation: none;
}

div#home_trailer.hidden
{
	opacity:1;	
        
}

div#home_trailer video 
{
    display:none;
    position: absolute;
    left: 19px;
    top: 15px;
    z-index: 1;
    opacity: 0;	
}

div#home_trailer div#play_section
{
	position: absolute;
	top: 174px;
	left: 149px;
	width: 129px;
	height: 48px;
	cursor:pointer;
	z-index:1;
}

div#home_trailer div#play_section img
{
	position:absolute;
	top: 4px;
	left: 57px;
}

div#home_trailer div#play_section img#play_hover
{
	opacity:0;	
	-webkit-transition:opacity 0.3s linear;
	-moz-transition:opacity 0.3s linear;
	-o-transition:opacity 0.3s linear;
	-ms-transition:opacity 0.3s linear;
	transition:opacity 0.3s linear;
}

div#home_trailer div#play_section:hover img#play_hover
{
	opacity:1;	
}

div#home_trailer div#play_section span
{
	font-family: Courier New, monospace;
	font-weight:bold;
	position:absolute;
	top: 29px;
	left: -31px;
	width: 200px;
	text-align: center;
		
}

/* -------------------------------------------*/
/* ---------------- Features -----------------*/ 
/* -------------------------------------------*/


div#features_text
{
	position:absolute;
	top: 285px;
	left: 130px;
	height: 701px;
	width: 353px;
	
	background-image:url(../images/text_background_long.png);
	background-repeat:no-repeat;
	
	-webkit-animation: features_text 2s 4s linear both;
	-moz-animation: features_text 2s 4s linear both;
	animation: features_text 2s 4s linear both;
}

.de div#features_text,
.it div#features_text, 
.fr div#features_text
{
	background-size: 100% 100%;	
}

.it div#features_text
{
	height:737px;	
}

.de div#features_text,
.fr div#features_text
{
	height:807px;	
}

div#features_text h2
{
	position:absolute;
	top:27px;
	left:4px;
	width:100%;
	font-family: Courier New, monospace;
	text-transform:uppercase;
	text-align:center;
	
	margin:0;	
}

.de div#features_text h2,
.fr div#features_text h2
{
	top:31px;	
}

ul#features_list
{
	text-decoration: none;
	color: black;
	padding-left: 26px;
	margin: 0;
	margin-top: 75px;
	margin-right: 26px;
}

ul#features_list li
{
	list-style:none;
	padding-bottom:10px;
	padding-left:25px;
	background:url('../images/bullet.png') no-repeat 0 1px;	
	padding-top:5px;
}

ul#features_list li span
{
	font-family:Courier New, monospace;
	font-size:13px;
	font-weight:bold;	
}

div#features_screenshots div#screen1
{
	position:absolute;
	top:211px;
	left:-182px;
	
	-webkit-transform:rotate(-4deg);	
	-moz-transform:rotate(-4deg);	
	-o-transform:rotate(-4deg);	
	-ms-transform:rotate(-4deg);	
	transform:rotate(-4deg);
	
	-webkit-animation: screenshot_topleft 2s 5s linear both;
	-moz-animation:screenshot_topleft 2s 5s linear both;
	animation:screenshot_topleft 2s 5s linear both;
}

div#features_screenshots div#screen2
{
	position: absolute;
	top: 405px;
	left: -190px;
	
	-webkit-transform: rotate(4deg);	
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);
	
	-webkit-animation:screenshot_bottomleft 2s 3s linear both;
	-moz-animation:screenshot_bottomleft 2s 3s linear both;
	animation:screenshot_bottomleft 2s 3s linear both;
}

div#features_screenshots div#screen3
{
	position:absolute;
	top: 425px;
	left: 566px;
	
	-webkit-transform: rotate(13deg);
	-moz-transform: rotate(13deg);
	-o-transform: rotate(13deg);
	-ms-transform: rotate(13deg);
	transform: rotate(13deg);
	
	-webkit-animation:screenshot_bottomright 2s 3s linear both;
	-moz-animation:screenshot_bottomright 2s 3s linear both;
	animation:screenshot_bottomright 2s 3s linear both;
	
}

div#features_screenshots div#screen4
{
	position:absolute;
	top: 224px;
	left: 491px;
	
	-webkit-transform: rotate(-7deg);	
	-moz-transform: rotate(-7deg);	
	-o-transform: rotate(-7deg);	
	-ms-transform: rotate(-7deg);	
	transform: rotate(-7deg);	
	
	-webkit-animation:screenshot_topright 2s 5s linear both;
	-moz-animation:screenshot_topright 2s 5s linear both;
	animation:screenshot_topright 2s 5s linear both;
}

.features div#features_screenshots div img.thumb
{
	position: absolute;
	top: 14px;
	left: 12px;	
}

.features div#screenshots_full div#screen2_full a 
{
	top:-581px;
}

/* -----------------------------------------------*/
/* ---------------- Modern Times -----------------*/ 
/* -----------------------------------------------*/

img#cityscape
{
	position:absolute;
	top: 68px;
	left: -143px;	
	
	-webkit-transition:opacity 1s linear;
	-moz-transition:opacity 1s linear;
	-o-transition:opacity 1s linear;
	-ms-transition:opacity 1s linear;
	transition:opacity 1s linear;
}

img#boats1
{
	position:absolute;
	top: 1028px;
	left: 151px;	
}

img#boats2
{
	position:absolute;
	top: 958px;
	left: 740px;	
}

img#moderntimes_heading
{
	position:absolute;
	top: 19px;
	left: 46px;	
	
	-webkit-transition:-webkit-transform 2s ease-out;
	-moz-transition:-moz-transform 2s ease-out;
	-o-transition:-o-transform 2s ease-out;
	-ms-transition:-ms-transform 2s ease-out;
	transition:transform 2s ease-out;
	
	
}

img#moderntimes_heading.hidden
{
	opacity:1;
	
	-webkit-transform:translateY(400px) scale(0);
	-moz-transform:translateY(400px) scale(0);
	-o-transform:translateY(400px) scale(0);
	-ms-transform:translateY(400px) scale(0);
	transform:translateY(400px) scale(0);	
}

div#moderntimes_text
{
	position:absolute;
	top: 286px;
	left: 136px;
	height: 718px;
	width: 353px;
	
	background-image:url(../images/text_background_long.png);
	background-repeat:no-repeat;	
	
	-webkit-animation: features_text 2s 3s linear both;
	-moz-animation: features_text 2s 3s linear both;
	animation: features_text 2s 3s linear both;
}

div#moderntimes_text > p
{
	font-family: Courier New, monospace;
	font-size: 13px;
	font-weight: bold;	
	
	margin-left: 38px;
	margin-right: 43px;
}

div#moderntimes_text > p:nth-of-type(1) {
	margin-top: 70px;
}

div#moderntimes_text h2
{
	position:absolute;
	top:26px;
	left:2px;
	width:100%;
	font-family: Courier New, monospace;
	text-transform:uppercase;
	text-align:center;
	
	margin:0;	
}

.es div#moderntimes_text h2
{
	font-size: 15px;
	top: 29px;	
}

.de div#moderntimes_text h2
{
	font-size: 16px;
	top: 28px;	
}

.fr div#moderntimes_text h2
{
	font-size: 17px;
	top: 28px;	
}

ul#moderntimes_list
{
	text-decoration: none;
	color: black;
	padding-left: 31px;
	margin: 0;
	margin-right: 26px;
}

ul#moderntimes_list li
{
	list-style:none;
	padding-bottom:10px;
	padding-left:25px;
	background:url('../images/bullet.png') no-repeat 0 1px;	
	padding-top:5px;
}

ul#moderntimes_list li span
{
	font-family:Courier New, monospace;
	font-size:13px;
	font-weight:bold;
}

div#moderntimes_screenshots div
{
	position:absolute;
}

div#moderntimes_screenshots div#screen1
{
	top: 419px;
	left: 498px;
	
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);
	
	-webkit-animation:moderntimes_screenshot_bottomright 2s 5s linear both;
	-moz-animation:moderntimes_screenshot_bottomright 2s 5s linear both;
	animation:moderntimes_screenshot_bottomright 2s 5s linear both;
}

div#moderntimes_screenshots div#screen2
{
	top: 226px;
	left: 498px;
	
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	transform: rotate(-4deg);
	
	-webkit-animation:moderntimes_screenshot_topright 2s 6s linear both;
	-moz-animation:moderntimes_screenshot_topright 2s 6s linear both;
	animation:moderntimes_screenshot_topright 2s 6s linear both;
}

div#moderntimes_screenshots div#screen3
{
	top: 402px;
	left: -145px;
	
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	transform: rotate(-4deg);	
	
	-webkit-animation:moderntimes_screenshot_bottomleft 2s 5s linear both;
	-moz-animation:moderntimes_screenshot_bottomleft 2s 5s linear both;
	animation:moderntimes_screenshot_bottomleft 2s 5s linear both;
}

div#moderntimes_screenshots div#screen4
{
	top: 214px;
	left: -139px;
	
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);	
	
	-webkit-animation:moderntimes_screenshot_topleft 2s 6s linear both;
	-moz-animation:moderntimes_screenshot_topleft 2s 6s linear both;
	animation:moderntimes_screenshot_topleft 2s 6s linear both;
}

.moderntimes div#moderntimes_screenshots div img.thumb
{
	position: absolute;
	top: 14px;
	left: 11px;	
}

div#moderntimes_vehicles img#plane
{
	position: absolute;
	top: 352px;
	left: 154px;	
}

div#moderntimes_vehicles img#plane.animation
{	
	opacity:1;
	-webkit-animation:plane_fly 12s 5s infinite cubic-bezier(.62, 0, .97, .79) both;
	-moz-animation:plane_fly 12s 5s infinite cubic-bezier(.62, 0, .97, .79) both;
	animation:plane_fly 12s 5s infinite cubic-bezier(.62, 0, .97, .79) both;
}

div#moderntimes_vehicles img#shuttle
{
	position: absolute;
	top: 371px;
	left: 377px;
}

div#moderntimes_vehicles img#shuttle.animation
{	
	opacity:1;
	-webkit-animation: shuttle_fly 12s 5s infinite cubic-bezier(.83, .01, .69, 1) both;
	-moz-animation: shuttle_fly 12s 5s infinite cubic-bezier(.83, .01, .69, 1) both;
	animation: shuttle_fly 12s 5s infinite cubic-bezier(.83, .01, .69, 1) both;
}

div#moderntimes_vehicles img#zeppelin_big
{
	position: absolute;
	top: 106px;
	left: -29px;
	
	-webkit-transition:-webkit-transform 5s ease-in-out;
	-moz-transition:-moz-transform 5s ease-in-out;
	-o-transition:-o-transform 5s ease-in-out;
	-ms-transition:-ms-transform 5s ease-in-out;
	transition:transform 5s ease-in-out;
	
}

div#moderntimes_vehicles img#zeppelin_big.hidden
{
	-webkit-transform: translate(250px, 220px);	
	-moz-transform: translate(250px, 220px);	
	-o-transform: translate(250px, 220px);	
	-ms-transform: translate(250px, 220px);	
	transform: translate(250px, 220px);		
}

div#moderntimes_vehicles img#zeppelin_big.animation
{
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	-ms-transition:none;
	transition:none;	
	
	-webkit-animation:zeppelin_float 10s infinite linear both; 
	-moz-animation:zeppelin_float 10s infinite linear both; 
	animation:zeppelin_float 10s infinite linear both; 
}

div#moderntimes_vehicles img#zeppelin_small
{
	position: absolute;
	top: 492px;
	left: 406px;	
}

div#moderntimes_vehicles img#balloon_big
{
	position: absolute;
	top: 693px;
	left: 581px;	
}

div#moderntimes_vehicles img#balloon_small
{
	position: absolute;
	top: 542px;
	left: -22px;	
}

.moderntimes div#screenshots_full div#screen4_full a 
{
	top:-610px;
}





/* -----------------------------------------------*/
/* ------------------- DLC page ------------------*/
/* -----------------------------------------------*/

a.dlc_mark {
	position: absolute;
	top: -6px;
	right: 2px;
	background-color: #333;
	border: solid 1px #ee7c02;
	border-radius: 3px;
	box-shadow: 0px 0px 0px 1px #333;
	color: #ee7c02;
	-webkit-transition: color 0.3s linear;
	-moz-transition: color 0.3s linear;
	transition: color 0.3s linear;
}

a.dlc_mark img {
	float: left;
	margin: 4px 3px 4px 6px;
}

a.dlc_mark span {
	margin: 2px;
	padding: 4px 7px 4px;
	margin-left: 0px;
	border-left: solid 1px #4d4d4d;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 11px;
	line-height: 10px;
	display: inline-block;
}

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

.dlc a.dlc_mark {
	display: none;
}

.dlc div#dlc_body
{
	position:absolute;
	top: -100px;
	left: -86px;
	height: 563px;
	width: 790px;
	padding-top: 400px;
	background:none;	
	font-family:Courier New, monospace;
	font-size: 13px;
	font-weight: bold;
	-webkit-transition:opacity 2s linear;
	-moz-transition:opacity 2s linear;
	-o-transition:opacity 2s linear;
	-ms-transition:opacity 2s linear;
	transition:opacity 2s linear;
}

.dlc #dlc_nav {
	display: block;
	background-image:url('../images/dlc/dlcnavbackground.png');
	background-repeat:no-repeat;
/*	background-size: 85%;*/
	background-size: 100% 100%;
	padding: 23px 35px 20px 31px;
	margin-left: 80px;
	width: 560px;
}

.dlc #dlc_nav a {
	display: inline-block;
	padding: 5px 10px 4px;
	position: relative;
	text-decoration: none;
	z-index: 10;
	background: white;
	color: #911811;
	font-size: 11px;
	text-transform: uppercase;
	margin-top: -4px;
	border: 1px solid white;
	margin-left: 8px;
}

.dlc #dlc_nav a:hover {
	background: #911811;
	color: white;
}


.dlc div#dlc1.hidden, .dlc div#dlc2.hidden, .dlc div#dlc3.hidden {
	opacity: 0;
	z-index: 2;
		-webkit-transition:opacity 1s linear;
	-moz-transition:opacity 1s linear;
	-o-transition:opacity 1s linear;
	-ms-transition:opacity 1s linear;
	transition:opacity 1s linear;
	position: absolute;
	top: 0;
	padding-top: 460px;
}

.dlc div#dlc1.hidden:target, .dlc div#dlc2.hidden:target, .dlc div#dlc3.hidden:target {
	opacity: 1;
	display: block;
	z-index: 3;
}


.dlc div.dlcintro {
	background-image:url('../images/dlc/introbackground.png');
	background-repeat:no-repeat;
	padding: 15px 35px 0;
	margin: 0 65px;
	width: 582px;
}
.dlc h2 {
	border-bottom: 2px solid #911811;
	margin: 20px 40px 17px 150px;
	text-transform: uppercase;
	font-weight: bolder;
}

.dlc_icon {
	float: right;
	margin: 17px -3px 0 0;
	background-color: #333;
	width: 28px;
	height: 24px;
	border: solid 1px #ef7b00;
	box-shadow: 0px 0px 0px 1px #333;
	border-radius: 5px;
	text-align: center;
	-webkit-transition:background-color .2s linear;
	-moz-transition:background-color .2s linear;
	-o-transition:background-color .2s linear;
	-ms-transition:background-color .2s linear;
	transition:background-color .2s linear;
}

.dlc_icon:hover {
	background-color: black;
	box-shadow: 0px 1px 1px 2px #333;
}

.dlc_icon:active {
	margin-top: 18px;
	box-shadow: 0px 0px 1px 2px #333;
}

.dlc_icon img {
	margin-top: 5px;
	margin-right: -2px;
}

.dlc div.dlcintro p {
	padding: 45px 10px 30px 150px;
	margin-top: -47px;
	background: url('../icon/dlc-dash-for-growth.png') no-repeat transparent 5px 0;
	background-size: 120px 120px;
}

.dlc #dlc2 div.dlcintro p {
	background-image: url('../../tropico4dlc2/icon/icon.png');
}

.dlc #dlc3 div.dlcintro p {
	background-image: url('../../tropico4dlc3/icon/icon.png');
}

.dlc div.dlcinfo {
	background-image:url('../images/dlc/contentbackground.png');
	background-repeat:no-repeat;
	background-size: 100% 100%;
	padding: 20px 45px 30px;
	margin: -20px 0px 0;
	width: 694px;
}

.dlc #dlc3 div.dlcinfo {
	background-image:url('../images/dlc/dlc3contentbackground.png');
}

.dlc h3 {
	background-image:url('../images/dlc/divider.png');
	background-repeat:no-repeat;
	background-position: 0 35px;
	padding: 15px 0 18px;
	clear: both;
	font-size: 16px;
}

.dlc div.dlcinfo h3:first-child {
	padding-top: 0;
	background-position: 0 20px;
}

.dlc h3 span {
	display: inline-block;
	padding-left: 4px;
	font-size: 14px;
	font-style: italic;
}

.dlc h3 span:before {
	content: '- ';
	padding-right: 7px;
	font-size: 13px;
}

.dlc div.dlcinfo p {
	margin: 10px 370px 20px 0;
}

.dlcscreenshots {
	float: right;
	text-align: center;
	margin-top: -10px;
}
.dlc .close_button {
	top: -527px;
}

.clickformore {
	color: #911811;
	font-size: 11px;
	text-transform: uppercase;
	padding-bottom: 5px;
}

.dlc .dlcscreenshots img {
	border: 1px solid #911811;
}

.dlc #screenshots_full {
	z-index: 999;
}

.dlc .clearfix {
	height: 10px;
}

.dlc .imgbox {
	position: relative;
	width: 960px;
	max-width: 97%;
	margin: 0 auto;
}

.dlc .close_button {
	top: 15px;
	left: -13px;
	position: absolute;
	width: 1px;
	height: 1px;
	text-align: left;
}

.dlc div.image_popup:target .close_button {
	width: 100%;
	height: 100%;
}

.dlc .image_popup .imgbox > img {
	position: relative;
	top: 26px;
	border: 3px white solid;
	width: 100%;
}

.dlc .close_button > img {
	position: relative;
	top: 0;
	border: none;
}

.dlc div.image_popup:target {
	opacity: 1;
	z-index: 999;
}

.dlc .image_popup {
	width: 100%;
	height: 100%;
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	z-index: 1;
	background: 
	rgba(0,0,0,0.7);
	vertical-align: middle;
	text-align: center;
	opacity: 0;
	-webkit-transition: opacity 1.2s cubic-bezier(0,0,0,1);
	-moz-transition:opacity 1.2s cubic-bezier(0,0,0,1);
	-o-transition:opacity 1.2s cubic-bezier(0,0,0,1);
	transition:opacity 1.2s cubic-bezier(0,0,0,1);
}

/* ----------------------------------------*/
/* ---------------- Media -----------------*/ 
/* ----------------------------------------*/


li#media_desktops_button h2
{
	top:0px;	
	left:0px;
}

li#media_screenshots_button h2
{
	top: -93px;
	left: 868px !important;
}

li#media_movie_button h2 
{
	top:140px;
	left:200px;	
}
/* Overrides for rules in media.css */

/* These rules stop the inherited transitions from media.css from
/* transitioning the media logos before their intended animation */

div#media_logos li:hover h2 img
{
	opacity:0;	
}

div#media_logos li h2 img
{
	-webkit-transition:opacity 0.3s linear;
	-moz-transition:opacity 0.3s linear;
	-o-transition:opacity 0.3s linear;
	-ms-transition:opacity 0.3s linear;
	transition:opacity 0.3s linear;
		
}

div#media_logos li#media_screenshots_button
{
	position:absolute;
	top: 259px;
	left: -28px;	
	background-image:url(../images/media/screenshots_hover.png) !important;
	background-position: 0px 15px;
	width: 186px;
	
	-webkit-animation:media_screenshot 2s 2s linear both;
	-moz-animation:media_screenshot 2s 2s linear both;
	animation:media_screenshot 2s 2s linear both;
}

div#media_logos li#media_movie_button
{
	position:absolute;
	left: 457px;
	top: 261px;
	background-image:url(../images/media/trailers_hover.png) !important;
	background-position: 0px 15px;
	width: 186px;
	
	-webkit-animation:media_trailer 2s 2.5s linear both;
	-moz-animation:media_trailer 2s 2.5s linear both;
	animation:media_trailer 2s 2.5s linear both;
}

div#media_logos li#media_desktops_button
{
	position:absolute;
	top: 284px;
	left: 215px;	
	background-image:url(../images/media/desktops_hover.png) !important;
	background-position: 0px 15px;
	width: 186px;
	
	-webkit-animation:media_desktop 2s 3.5s linear both;
	-moz-animation:media_desktop 2s 3.5s linear both;
	animation:media_desktop 2s 3.5s linear both;
	
}

.popup
{
	overflow:auto;	
}

.popup div.popup_content
{
	top: 80px;	
	left:0 !important;
	margin:auto !important;
}

.popup.single_screenshot > div {
	
	width: 1040px !important;
}

.popup_content > figure > figcaption
{
	font-size:18px;	
}

#media_links li h2
{
	left: 611px;
	width: 183px;	
}

#media_links li span {
	
	display:block !important;
	position: absolute;
	font-family:Courier New, monospace;
	font-weight:bold;
	text-decoration:none;
	font-size:18px !important;
	width: 181px;
	text-align: center;
	top:69px;
	left:19px;
	color:black;
	text-transform:uppercase;
	opacity:0.7;
	
	-webkit-transition:opacity 0.3s linear;
	-moz-transition:opacity 0.3s linear;
	-o-transition:opacity 0.3s linear;
	-ms-transition:opacity 0.3s linear;
	transition:opacity 0.3s linear;
		
}

#media_links li h2:hover span 
{
	opacity:1;		
}

li#media_screenshots_button span
{
	left: 5px;
	top: 73px;
	
	text-shadow:0px 0px 2px #f3c578, 0px 0px 4px #f3c578, 0px 0px 6px #f3c578, 
	0px 0px 8px #f3c578, 0px 0px 10px #f3c578, 0px 0px 12px #f3c578, 0px 0px 14px #f3c578, 
	0px 0px 16px #f3c578, 0px 0px 18px #f3c578, 0px 0px 20px #f3c578;
	
	-webkit-transition:text-shadow 0.3s linear, opacity 0.3s linear;
	-moz-transition:text-shadow 0.3s linear, opacity 0.3s linear;
	-o-transition:text-shadow 0.3s linear, opacity 0.3s linear;
	-ms-transition:text-shadow 0.3s linear, opacity 0.3s linear;
	transition:text-shadow 0.3s linear, opacity 0.3s linear;
}

li#media_screenshots_button:hover span
{
	text-shadow:0px 0px 2px #f2dfb4, 0px 0px 4px #f2dfb4, 0px 0px 6px #f2dfb4, 
	0px 0px 8px #f2dfb4, 0px 0px 10px #f2dfb4, 0px 0px 12px #f2dfb4, 0px 0px 14px #f2dfb4, 
	0px 0px 16px #f2dfb4, 0px 0px 18px #f2dfb4, 0px 0px 20px #f2dfb4;
}

li#media_desktops_button span
{
	width: 168px;
	left: 12px;
	top: 72px;
}

.it li#media_desktops_button span
{
	top:62px;	
}

li#media_movie_button span
{
	left: 5px;
	top: 73px;
}

#movie > div > ul > li > h2
{
	display:block;
	position:static;
	left:0px;
	width:auto;	
}

#desktops > div > ul > li > ul a
{
	font-size:13px;	
}

.trailer div h2
{
	display:block;
	position: static;
	left: 0px;
	width: auto;
	font-size:18px;	
}

.popup_content h1
{
	position:static;
	width:auto;	
}

/* -------------------------------------------------------*/
/* ---------------- Links & Requirements -----------------*/ 
/* -------------------------------------------------------*/


div#content_body
{
	position:absolute;
	top: 290px;
	left: -85px;
	height: 586px;
	width: 790px;
	
	background-image:url('../images/links-requirements/new_background.jpg');
	background-repeat:no-repeat;	
	font-family:Courier New, monospace;
	
	-webkit-transition:opacity 2s linear;
	-moz-transition:opacity 2s linear;
	-o-transition:opacity 2s linear;
	-ms-transition:opacity 2s linear;
	transition:opacity 2s linear;
}

div#content_body h2 
{
	padding-top: 11px;
	padding-left: 32px;
	font-family: Courier New, monospace;
	font-weight: bold;
	text-transform: uppercase;	
}

div#content_body div#requirements_text
{
	width: 366px;
	margin-left: 30px;
	padding-top: 1px;
	
	-webkit-transition:opacity 2s linear;
	-moz-transition:opacity 2s linear;
	-o-transition:opacity 2s linear;
	-ms-transition:opacity 2s linear;
	transition:opacity 2s linear;	
}

div#requirements_text div#requirements_provisional
{
	width: 259px;
	line-height: 16px;	
}

div#requirements
{
	font-size:13px;	
}

div#requirements dl lh div
{
	font-weight: bold;
	padding-bottom: 5px;	
}

div#requirements dl dt 
{
	float: left;
	min-width: 187px;
}

div#requirements div#requirements_notices
{
	margin-top: 25px;
}

div#links_section
{
	position: absolute;
	top: 1px;
	left: 386px;
	width: 318px;
	
	
}

div#links_section h2
{
	margin-bottom:30px;	
}

div.links_section_hidden
{
	position: absolute;	
	left:300px;
	/* z-index:1; */
	
}

div.links_section_hidden > div
{
	width: 318px;	
}

div#link1_hidden
{
	top: 367px;
	z-index: -1;
	-webkit-animation:link1 3s 10s linear both;	
	-moz-animation:link1 3s 10s linear both;	
	animation:link1 3s 10s linear both;	
}

div#link2_hidden
{
	top:515px;
	z-index: -1;
	-webkit-animation:link2 3s 7.5s linear both;	
	-moz-animation:link2 3s 7.5s linear both;	
	animation:link2 3s 7.5s linear both;			
}

div#link3_hidden
{
	top:669px;	
	z-index: -1;
	-webkit-animation:link3 3s 5s linear both;	
	-moz-animation:link3 3s 5s linear both;	
	animation:link3 3s 5s linear both;	
}

.links_section_hidden a
{
	text-decoration:none;
	color:black;
}

.links_section_hidden a div h3 span
{
	color:black;
	border-bottom:transparent solid 2px;
	
	-webkit-transition:color 0.3s linear, border-bottom-color 0.3s linear;
	-moz-transition:color 0.3s linear, border-bottom-color 0.3s linear;
	-o-transition:color 0.3s linear, border-bottom-color 0.3s linear;
	-ms-transition:color 0.3s linear, border-bottom-color 0.3s linear;
	transition:color 0.3s linear, border-bottom-color 0.3s linear;	
}

.links_section_hidden a:hover div h3 span
{
	color:#8d130e;
	border-bottom-color:#8d130e;
	
}

.links_section_hidden img
{
	position: relative;
	top: 17px;
	left: 12px;	
}

.links_section_hidden h3
{
	text-align: center;
	padding-top: 28px;	
	margin-bottom:11px;
	font-family: Courier New, monospace;
	
	-webkit-transition:opacity 1s linear;
	-moz-transition:opacity 1s linear;
	-o-transition:opacity 1s linear;
	-ms-transition:opacity 1s linear;
	transition:opacity 1s linear;
}

.links_section_hidden div.link
{
	background-image:url(../images/links-requirements/link_background.png);
	background-repeat:no-repeat;
	
	margin-left: 39px;
	width: 318px;
}