@charset utf-8;
/* allgemeines — Arabic-first RTL; LTR via html[dir="ltr"] */
body
{
	background-color:#FFF;
	direction:rtl;
	font-size:13px;
	line-height:19px;
	margin:0;
	padding:0;
	text-align:right
}

html[dir="ltr"] body
{
	direction:ltr;
	text-align:left
}

html
{
	overflow-x:hidden;
	overflow-y:scroll
}

html,body
{
	height:100%;
	margin:0;
	padding:0;
	width:100%;
	max-width:100%;
	box-sizing:border-box
}

*,
*::before,
*::after
{
	box-sizing:inherit
}

body,button,input,select,textarea
{
	font-family:Arial, Verdana, Helvetica, sans-serif
}

a
{
	font-size:13px;
	text-decoration:none
}

a:hover
{
	color:#00BC00;
	text-decoration:underline
}

#content a:hover
{
	text-decoration:none
}

img
{
	border:0
}

.clear
{
	clear:both;
	display:block;
	font-size:0;
	height:0;
	line-height:0;
	visibility:hidden
}

ul.menu,div.menu ul
{
	list-style-type:none;
	margin:0;
	padding:0
}

.wrapper
{
	height:auto!important;
	min-height:100%;
	width:100%;
	max-width:1000px;
	min-width:0;
	margin:0 auto;
	position:relative;
	text-align:center
}

img.dynamic_btn,img.dynamic_img
{
	background-position:top;
	background-repeat:no-repeat
}

img.over
{
	background-position:bottom
}

img.clicked
{
	background-position:center
}

.f16
{
	font-size:16pt
}

.f10
{
	font-size:10pt
}

.f9
{
	font-size:9pt;
	font-weight:400;
	line-height:140%
}

.f8
{
	font-size:8pt
}

.f7
{
	font-size:7pt
}

.f6
{
	font-size:6pt
}

.c
{
	color:silver
}

.c0
{
	color:#000
}

.c3
{
	color:#228B22
}

.c4
{
	color:#F2C700
}

.c5
{
	color:red
}

body.contentpage h1
{
	font-size:26px;
	margin-bottom:40px;
	padding-top:70px;
	text-align:center
}

body.contentpage #content .characteristics,body.contentpage #content p,body.contentpage #content table,body.contentpage form
{
	margin:15px auto;
	max-width:95%
}

body.contentpage .rules
{
	margin-left:auto;
	margin-right:auto;
	max-width:95%
}

body.contentpage ul
{
	margin-bottom:15px;
	margin-top:15px
}

body.contentpage .rules strong
{
	color:#2A720B
}

body.contentpage .rules ul strong
{
	color:#3BAE18
}

body.contentpage table.table_data
{
	background-color:silver;
	text-align:center;
	width:100%;
	max-width:550px
}

body.contentpage table.culture_points
{
	margin:15px auto;
	max-width:95%;
	width:100%
}

#tutorial_nav,body.contentpage table.tutorial_table
{
	background-color:#fff;
	table-layout:fixed;
	width:100%;
	max-width:550px
}

body.contentpage #content td.beschreibung
{
	padding-top:50px;
	text-align:right
}

html[dir="ltr"] body.contentpage #content td.beschreibung
{
	text-align:left
}

body.contentpage table.tutorial_table td.visual
{
	font-size:11px;
	font-style:italic;
	text-align:center
}

body.contentpage table.tutorial_table td.visual img
{
	display:block;
	margin:auto
}

body.contentpage table.table_data th
{
	background-color:#F5F5F5
}

body.contentpage table.table_data td
{
	background-color:#fff
}

body.contentpage table.middle
{
	table-layout:fixed;
	width:100%;
	max-width:520px
}

body.contentpage table.middle input
{
	width:80px
}

td.text,th.text
{
	padding-inline-start:7px;
	text-align:right
}

html[dir="ltr"] td.text,
html[dir="ltr"] th.text
{
	text-align:left
}

body.contentpage #content h2
{
	color:#71d000;
	font-size:16px;
	line-height:20px;
	margin:50px auto 10px;
	max-width:95%
}

body.contentpage #content h3
{
	font-size:14px;
	line-height:18px;
	margin:15px auto 5px;
	max-width:95%
}

body.contentpage #content table h3
{
	margin:3px
}

body.contentpage #content ul
{
	margin-top:5px
}

#content .question
{
	color:#333;
	font-style:italic;
	padding-top:30px
}

body.indexpage
{
	background:#fff url(images/main_background_front.jpg) repeat-x top
}

body.contentpage
{
	background:#fff url(images/main_background_content.jpg) repeat-x top
}

#header
{
	left:0;
	margin:0 auto;
	position:relative;
	right:0;
	top:0;
	width:100%;
	z-index:10
}

body.indexpage #header
{
	background:transparent url(images/artwork.jpg) no-repeat top center;
	height:auto;
	min-height:280px;
	max-height:389px;
	overflow:visible;
	background-size:cover
}

body.contentpage #header
{
	background:transparent none;
	height:auto;
	min-height:120px
}

#country_select
{
	background:#fff url(images/country_background.jpg) repeat-x top;
	height:30px;
	left:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:500
}

#navigation
{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	height:auto;
	min-height:114px;
	left:auto;
	margin:0 auto;
	position:relative;
	top:auto;
	width:100%;
	max-width:830px;
	z-index:80;
	box-sizing:border-box;
	padding:8px 12px
}

.contentpage #navigation
{
	background:url(images/logo_background.jpg) no-repeat top left
}

#navigation table.menu
{
	position:static;
	right:auto;
	top:auto;
	width:auto;
	max-width:100%;
	flex:1 1 auto
}

#navigation .menu td
{
	text-align:center
}

#navigation .menu a
{
	color:#333;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:44px;
	min-width:44px;
	font-size:14px;
	line-height:20px;
	padding:6px 10px;
	text-decoration:none;
	text-shadow:1px 1px 1px #fff;
	box-sizing:border-box
}

#navigation .menu a.mark
{
	color:#a20327
}

#navigation a.home
{
	display:block;
	flex:0 0 auto;
	height:85px;
	left:auto;
	position:relative;
	top:auto;
	width:250px;
	max-width:100%
}

#navigation .menu a span
{
	padding:6px 0 7px 10px
}

#navigation .menu a:hover
{
	background:transparent url(images/nav_right.gif) no-repeat scroll bottom right
}

#navigation .menu a:hover span
{
	background:transparent url(images/nav_left.gif) no-repeat scroll bottom left
}

#navigation .menu a:active
{
	background:transparent url(images/nav_right.gif) no-repeat scroll top right
}

#navigation .menu a:active span
{
	background:transparent url(images/nav_left.gif) no-repeat scroll top left
}

#register_now
{
	color:#574b2e;
	font-weight:700;
	height:50px;
	left:auto;
	margin:0 auto;
	position:relative;
	top:auto;
	width:145px;
	max-width:95%;
	z-index:250;
	text-align:center
}

#register_now a
{
	color:#574b2e;
	display:block;
	font-size:21px;
	margin-top:7px
}

#register_now span
{
	font-size:9px
}

#t4play
{
	left:auto;
	margin:0 auto;
	position:relative;
	top:auto;
	z-index:250;
	max-width:100%;
	text-align:center
}

#t4play img
{
	height:auto;
	width:100%;
	max-width:460px
}

#content
{
	position:relative;
	z-index:50
}

body.indexpage #content
{
	padding-bottom:120px;
	padding-top:24px
}

body.contentpage #content
{
	padding-bottom:160px;
	padding-top:24px
}

#content .grit
{
	margin:0 auto;
	position:relative
}

body.indexpage #content .grit
{
	background:transparent none;
	width:100%;
	max-width:830px
}

body.contentpage #content .grit
{
	background:transparent url(images/content_background.jpg) no-repeat top left;
	min-height:400px;
	width:100%;
	max-width:840px
}

.grit .infobox
{
	background:transparent url(images/info_background.jpg) no-repeat top left;
	float:none;
	display:inline-block;
	vertical-align:top;
	margin:0 auto 12px;
	min-height:391px;
	width:100%;
	max-width:378px;
	box-sizing:border-box
}

.grit .infobox div
{
	padding-left:43px;
	padding-right:30px
}

#what_is_travian
{
	padding-top:5px
}

#what_is_travian h2
{
	color:#71d000;
	font-size:18px;
	font-weight:400;
	line-height:20px;
	margin-bottom:10px;
	text-shadow:0 2px 1px #fff
}

#what_is_travian .play_now
{
	margin:10px 0
}

#player_counter
{
	background:transparent url(images/count_background.jpg) no-repeat top left;
	height:98px;
	left:auto;
	padding:0;
	position:relative;
	width:100%;
	max-width:330px;
	margin:0 auto
}

#player_counter table
{
	border-spacing:0;
	left:auto;
	right:12px;
	position:absolute;
	top:20px;
	width:165px;
	max-width:50%
}

html[dir="ltr"] #player_counter table
{
	left:135px;
	right:auto
}

#about_the_game h2
{
	font-size:15px;
	line-height:20px;
	margin-bottom:5px
}

#about_the_game ul
{
	margin:5px 0 0 15px;
	padding:0
}

#about_the_game li
{
	line-height:19px
}

#news_from_forum h2
{
	cursor:pointer;
	font-size:15px;
	line-height:20px;
	margin-bottom:5px
}

#news_from_forum ul
{
	border-top:1px solid #999;
	list-style:none;
	margin:5px 10px 0 0;
	padding:0
}

#news_from_forum li
{
	border-bottom:1px solid #999;
	line-height:19px;
	padding:3px 5px
}

.grit .secondarybox
{
	background:transparent url(images/news_background.jpg) repeat-y top left;
	float:none;
	display:inline-block;
	vertical-align:top;
	margin:22px auto 0;
	width:100%;
	max-width:397px;
	box-sizing:border-box
}

.grit #screenshots
{
	background:transparent url(images/screenshots_background.jpg) no-repeat top left;
	background-size:100% 100%;
	height:auto;
	min-height:134px;
	position:relative;
	width:100%;
	max-width:397px
}

#screenshots h2
{
	color:#fff;
	font-size:13px;
	margin:0;
	padding:23px 20px 0
}

#screenshots_preview
{
	height:73px;
	margin:7px 53px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:294px
}

#screenshot_list
{
	height:73px;
	list-style:none;
	margin:0;
	padding:0
}

#screenshots .navi img
{
	height:26px;
	position:absolute;
	top:70px;
	width:26px
}

#screenshots .next img
{
	background-image:url(images/buttons_screenshots_next.gif);
	right:7px
}

#screenshots .prev img
{
	background-image:url(images/buttons_screenshots_prev.gif);
	left:10px
}

#screenshot_list img
{
	height:73px;
	width:98px
}

#newsbox
{
	background:transparent url(images/news_footer.jpg) no-repeat bottom left;
	padding-bottom:25px
}

#newsbox h2
{
	background:transparent url(images/news_header.jpg) no-repeat top left;
	color:#4c4c4c;
	display:block;
	font-size:17px;
	height:30px;
	margin:0;
	padding:7px 15px 0
}

#newsbox .news
{
	background:transparent url(images/news_spacer.jpg) no-repeat bottom left;
	padding-bottom:0;
	padding-left:15px;
	width:100%;
	max-width:397px;
	box-sizing:border-box
}

#newsbox .news h4
{
	margin:3px 0 0
}

#newsbox .news p.date
{
	color:#999;
	font-size:11px;
	padding-bottom:0
}

#newsbox .news p
{
	margin:0;
	padding-bottom:10px;
	padding-right:30px
}

#footer
{
	background:#F1F1F1 url(images/footer_background.jpg) repeat-x top;
	bottom:auto;
	height:auto;
	min-height:90px;
	left:0;
	margin:24px auto 0;
	position:relative;
	right:0;
	z-index:80;
	padding:12px 0;
	width:100%;
	box-sizing:border-box
}

#footer .logo_traviangames
{
	background-image:url(images/logo_traviangames.jpg);
	height:34px;
	width:182px;
	max-width:100%
}

#footer .logo
{
	left:auto;
	position:static;
	display:inline-block;
	top:auto;
	margin:0 8px
}

#footer li,#footer a
{
	color:#787878;
	font-size:11px;
	line-height:20px
}

#footer .menu
{
	position:static;
	right:auto;
	top:auto;
	display:inline-block;
	margin:0 8px
}

#footer .container
{
	margin:0 auto;
	position:relative;
	width:100%;
	max-width:840px;
	box-sizing:border-box;
	padding:0 8px
}

#footer .copyright
{
	clear:both;
	direction:inherit;
	position:static;
	right:auto;
	top:auto;
	text-align:center;
	margin-top:8px
}

#footer ul.menu a
{
	padding:0 3px
}

.overlay
{
	bottom:0;
	left:0;
	position:absolute;
	right:0;
	top:0;
	z-index:400
}

.overlay .mask
{
	background-color:#000;
	filter:alpha(opacity=25);
	height:100%;
	opacity:0.25;
	position:fixed;
	width:100%
}

.overlay_content
{
	position:absolute;
	right:50%;
	top:150px;
	z-index:600
}

.overlay_content .closer img
{
	background-image:url(images/popup_close.gif);
	height:25px;
	position:absolute;
	right:15px;
	top:15px;
	width:25px
}

.overlay_content .footer
{
	clear:both;
	height:10px
}

.overlay_content h2,.overlay_content h4
{
	font-size:16px;
	line-height:20px;
	margin:0;
	padding:20px 20px 0
}

#screenshot_layer .overlay_content
{
	background:#fff url(images/screenshot_background.gif) repeat-y top left;
	margin-right:-322px;
	text-align:center;
	width:644px
}

#screenshot_layer h4
{
	background:transparent url(images/screenshot_header.jpg) no-repeat top left;
	padding-bottom:15px;
	text-align:center
}

#screenshot_layer #screen_desc
{
	font-size:12px;
	margin:20px 0;
	padding:0 40px
}

.screenshot_view img
{
	border:1px solid #ccc
}

#screenshot_layer .footer
{
	background:transparent url(images/screenshot_footer.gif) no-repeat bottom left
}

#screenshot_layer .navi img
{
	height:25px;
	position:absolute;
	top:250px;
	width:25px
}

#screenshot_layer .next img
{
	background-image:url(images/popup_next.gif);
	right:20px
}

#screenshot_layer .prev img
{
	background-image:url(images/popup_prev.gif);
	left:20px
}

#iframe_layer .overlay_content
{
	background:#fff url(images/anleitung_background.gif) repeat-y top left;
	margin-right:-225px;
	width:450px
}

#iframe_layer h2
{
	background:transparent url(images/anleitung_header.gif) no-repeat top left;
	padding-bottom:15px
}

#iframe_layer .footer
{
	background:transparent url(images/anleitung_footer.gif) no-repeat bottom left
}

#login_layer .overlay_content,#signup_layer .overlay_content
{
	background:#fff url(images/gameworld_background.jpg) repeat-y top left;
	margin-right:-192px;
	width:384px
}

#login_layer h2,#signup_layer h2
{
	background:transparent url(images/gameworld_header.jpg) no-repeat top left;
	color:#71d000
}

#login_layer .footer,#signup_layer .footer
{
	background:transparent url(images/gameworld_footer.jpg) no-repeat bottom left
}

ul.world_list
{
	list-style:none;
	margin:0;
	padding:7px
}

.world_list li
{
	background-repeat:no-repeat;
	float:left;
	margin:4px 5px;
	position:relative
}

.world_list li div
{
	position:absolute
}

.world_list li img
{
	position:absolute;
	z-index:30
}

.world_list .w_small .players
{
	left:123px;
	top:5px
}

.world_list .w_small .online
{
	left:123px;
	top:22px
}

.world_list .w_big .players
{
	right:20px;
	top:15px
}

.world_list .w_big .online
{
	right:20px;
	top:33px
}

.world_list .label_players
{
	left:235px;
	top:15px
}

.world_list .label_online
{
	left:235px;
	top:33px
}

.world_list .worldstart
{
	right:20px;
	top:10px
}

.world_list .timer
{
	bottom:15px;
	right:20px
}

a,a:visited,.c1
{
	color:#71D000
}

a:active,.e,.c2
{
	color:#FF8000
}

#content a,.b,#player_counter table td
{
	font-weight:700
}

.menu li,#screenshot_list li
{
	float:left
}

.wrapper #content,#tutorial_nav td.nav_prev,table.middle td.no
{
	text-align:right
}

html[dir="ltr"] .wrapper #content,
html[dir="ltr"] #tutorial_nav td.nav_prev,
html[dir="ltr"] table.middle td.no
{
	text-align:left
}

.t,#player_counter table th,#news_from_forum li a
{
	font-weight:400
}

h1,body.contentpage form table,body.contentpage #content td li,body.contentpage #content td form,#what_is_travian p
{
	margin:0
}

#tutorial_nav td.nav_next,table.middle td.yes
{
	text-align:left
}

html[dir="ltr"] #tutorial_nav td.nav_next,
html[dir="ltr"] table.middle td.yes
{
	text-align:right
}

#header h1,.hide,.grit #screenshots .prev img,#screenshot_layer,#screenshot_layer h3,#iframe_layer,#login_layer,#signup_layer
{
	display:none
}

.ie6 #navigation .menu a:hover,.ie7 #navigation .menu a:hover,.ie6 #navigation .menu a:hover span,.ie7 #navigation .menu a:hover span
{
	background:transparent
}

#screenshot_layer #frame_box,#iframe_layer #frame_box
{
	margin:0 20px
}

.world_list li.w_big,.world_list .w_big img
{
	height:auto;
	width:100%;
	max-width:361px
}

.world_list li.w_small,.world_list .w_small img
{
	height:auto;
	width:100%;
	max-width:175px
}

/* ========== Travian SS — responsive RTL portal (≤768px) ========== */
@media screen and (max-width: 768px) {
	html,
	body {
		height: auto !important;
		min-height: 100%;
		overflow-x: hidden !important;
		width: 100%;
		max-width: 100%;
	}

	.wrapper {
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	#country_select {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		display: none;
	}

	#header,
	body.indexpage #header,
	body.indexPage #header,
	body.contentpage #header,
	body.contentPage #header {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 120px;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		background-size: cover !important;
		background-position: center top !important;
	}

	#navigation {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		position: relative !important;
		left: auto !important;
		top: auto !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0;
		padding: 8px;
		box-sizing: border-box;
	}

	#navigation a.home {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		max-width: 220px;
		height: 64px !important;
		margin: 0 auto 8px !important;
	}

	#navigation table.menu {
		position: relative !important;
		right: auto !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100%;
	}

	#navigation .menu td {
		display: block;
		width: 100%;
		float: none !important;
	}

	#navigation .menu a {
		display: flex !important;
		width: 100%;
		min-height: 44px;
		min-width: 44px;
		justify-content: center;
		align-items: center;
		padding: 10px 12px !important;
		box-sizing: border-box;
		float: none !important;
	}

	#navigation .menu a span {
		padding: 0 !important;
	}

	#register_now,
	#t4play {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		margin: 12px auto !important;
		width: auto !important;
		max-width: 95%;
		float: none !important;
	}

	#t4play img {
		width: 100% !important;
		max-width: 100%;
		height: auto !important;
	}

	body.indexpage #content,
	body.indexPage #content,
	body.contentpage #content,
	body.contentPage #content {
		padding-top: 12px !important;
		padding-bottom: 24px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	#content .grit,
	body.indexpage #content .grit,
	body.indexPage #content .grit,
	body.contentpage #content .grit,
	body.contentPage #content .grit,
	.grit .infobox,
	.grit .secondarybox,
	#screenshots,
	#screenshots_preview,
	#player_counter,
	#newsbox .news,
	#footer .container {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		left: auto !important;
		right: auto !important;
		box-sizing: border-box;
	}

	.grit .infobox,
	.grit .secondarybox {
		display: block !important;
		min-height: 0 !important;
		margin-bottom: 12px !important;
	}

	.grit .infobox div,
	#what_is_travian,
	#about_the_game {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	body.contentpage #content .characteristics,
	body.contentpage #content p,
	body.contentpage #content table,
	body.contentpage form,
	body.contentpage #content h2,
	body.contentpage #content h3,
	body.contentpage .rules {
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: 95% !important;
		width: auto !important;
	}

	body.contentpage table.table_data,
	body.contentpage table.tutorial_table,
	body.contentpage table.middle,
	body.contentpage table.culture_points,
	#tutorial_nav {
		width: 100% !important;
		max-width: 100% !important;
	}

	.tss-table-wrap,
	.table-responsive {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#footer {
		position: relative !important;
		height: auto !important;
		padding: 12px 8px !important;
	}

	#footer .logo,
	#footer .menu,
	#footer .copyright {
		position: static !important;
		float: none !important;
		display: block;
		text-align: center;
		margin: 6px auto;
	}

	.menu li,
	#screenshot_list li,
	.world_list li {
		float: none !important;
	}

	.world_list li.w_big,
	.world_list li.w_small,
	.world_list .w_big img,
	.world_list .w_small img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	h1,
	body.contentpage h1 {
		font-size: 22px !important;
		padding-top: 24px !important;
		margin-bottom: 16px !important;
	}

	#what_is_travian h2,
	#about_the_game h2,
	#news_from_forum h2,
	#newsbox h2 {
		font-size: 15px !important;
	}

	/* Kill legacy absolute screenshot carousel width on phones */
	ul.c1,
	#screenshot_list.c1 {
		position: relative !important;
		left: auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	div.c2 {
		left: auto !important;
	}
}