Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:office:office">
<head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><META NAME="referrer" CONTENT="no-referrer">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://fonts.googleapis.com/css?family=Tauri" rel="stylesheet">
		<link rel="icon" type="image/x-icon" href="http://lobby.rail-nation.com/images-ltr/favicons/favicon-96x96.png?v=2" />
<style type="text/css">
table {
	mso-table-lspace: 0pt;
	mso-table-rspace: 0pt;
}
table td {
	border-collapse: collapse;
}
body {
	-ms-text-size-adjust: 100%;
	margin: 0;
	padding: 0;
	color: #18243a;

	mso-margin-top-alt: 0px;
	mso-margin-bottom-alt: 0px;
	mso-padding-alt: 0px 0px 0px 0px;
}
.ExternalClass, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
	line-height: 100%
}
.ReadMsgBody, .ExternalClass {
	width: 100%
}
img {
	outline: none;
	text-decoration: none;
	-ms-interpolation-mode: bicubic
}
html {
	-webkit-text-size-adjust: none!important
}
#outlook a {
	padding: 0/* Forces Outlook desktop to provide a "view in browser link" */
}
.ExternalClass .outlook-button {
	padding: 7px 30px 9px !important;/* Outlook.com does not like line-height:0px => adjusting padding top/bottom on our bulletproof CTA button */
}
* [summary=desktop-hide] {
	display: none !important;
}
div, table, td, tr, span, label, input {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Global style for mobile devices */
        
@media only screen and (max-device-width: 737px) {
	.play-button {
	padding-top: 1px !important
}
.full-width {
	width: 100% !important;
}
.disclaimer {
	width: 100% !important;
	font-size: 12px !important;
	line-height: 15px !important;
	padding: 20px 10px !important
}
.body-copy {
	padding-left: 20px !important;
	padding-right: 20px !important;
	color: #d1d1d1 !important
}
.float-left {
	float: left !important;
	width: 100% !important;
	text-align: center !important
}
.top {
	padding-bottom: 25px !important
}
.p0 {
	padding: 0 !important
}
.hl2, .price-cell, .font-black {
	color: #f1f1f1 !important
}
.no-border {
	border: 0px !important
}
.align-right {
	text-align: right !important
}
.toggle table {
	width: 250px !important;
	height: 26px !important
}
    
tr[summary="toggle"] table td, * tr.toggle table td {
	width: 115px !important;
	height: 19px !important;
	line-height: 12px !important;
	font-size: 14px !important;
}
#toggle + div div {
	height: 32px !important;
	margin-left: -2px !important;
	width: 122px !important
}
#toggle:checked + div div {
	margin-left: 122px !important
}
}
.imgs {
	height: 595px !important;
}

/* Target iPhone 5 and less */
        
@media only screen and (min-device-width: 219px) and (max-device-width: 374px) {
.hl {
	font-size: 31px !important;
	line-height: 36px !important;
	padding-bottom: 0px !important
}
.hl2 {
	font-size: 18px !important;
	line-height: 18px !important;
	padding-bottom: 5px 0 15px 0 !important;
}
.cta-table {
	width: 85% !important;
	text-align: center !important
}
.imgs {
	height: 290px !important;
}
}

/* Target iPhone 6 */
        
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
.hl {
	font-size: 35px !important;
	line-height: 38px !important;
	padding-bottom: 5px !important
}
.hl2 {
	font-size: 20px !important;
	line-height: 20px !important;
	padding-top: 5px 0 15px 0 !important;
}
.cta-table {
	width: 75% !important;
	text-align: center !important
}
.imgs {
	height: 390px !important;
}
}

/* Target iPhone 6+ */
        
@media only screen and (min-device-width: 414px) and (max-device-width: 735px) {
.hl {
	font-size: 39px !important;
	line-height: 42px !important;
	padding-bottom: 0px !important
}
.hl2 {
	font-size: 22px !important;
	line-height: 32px !important;
	padding-bottom: 5px 0 20px 0 !important;
	color: #000000 !important
}
.cta-table {
	width: 65% !important;
	text-align: center !important
}
.imgs {
	height: 373px !important;
}
}

/* Toogle button + gallery functionality */
/*Specific only to Gmail*/

* tr[summary="toggle"] table td, * tr.toggle table td {
	border-radius: 30px;
	height: 24px;
	font-size: 16px;
	line-height: 16px;
	top: 1px;
	padding-top: 10px;
	width: 133px;
	display: inline-block;
}
* input:checked + div td[summary="distance"], * input:checked + div td.distance, * input + div td[summary="close"], * input + div td.close {
	background-color: #f1f1f1;
}
* input:checked + div td[summary="close"], * input:checked + div td.close, * input + div td[summary="distance"], * input + div td.distance {
	background-color: #ffffff;
}
/*For all webkit enabled clients + Gmail*/

* [summary="toggle"], .toggle {
	cursor: pointer;
}
* [summary="close"], .close {
	border-radius: 30px;
	height: 26px;
	font-size: 16px;
	line-height: 16px;
	padding-top: 8px;
	width: 130px;
}
* [summary="distance"], .distance {
	border-radius: 30px;
	height: 26px;
	font-size: 16px;
	line-height: 16px;
	padding-top: 8px;
	width: 130px;
	padding-left: 10px
}
* label td[summary="close"] span, * label td.close span, * input:checked + div td[summary="distance"] span, * input:checked + div td.distance span {
	color: #000000;
	transition: all 0.75s ease-in-out;
}
* label td[summary="distance"] span, * label td.distance span, * input:checked + div td[summary="close"] span, * input:checked + div td.close span {
	color: #f1f1f1;
	transition: all 0.75s ease-in-out;
}
* input, * input + div tr[summary="imgs"] td:last-child, * input + div tr.imgs td:last-child, * input:checked + div tr[summary="imgs"] td:first-child, * input:checked + div tr.imgs td:first-child {
	display: none !important;
}
* input + div tr[summary="imgs"] td:first-child, * input + div tr.imgs td:first-child, * input:checked + div tr[summary="imgs"] td:last-child, * input:checked + div tr.imgs td:last-child {
	display: block !important;
}
/*For webkit clients only*/
    /*Make background-color transparent for Gmail specific td content*/
#toggle + div tr[summary="toggle"] [summary] {
	background-color: transparent !important;
}
#toggle + div div {
	border-radius: 30px;
	height: 37px;
	font-size: 16px;
	line-height: 16px;
	top: 1px;
	background-color: #ffffff;
	position: absolute;
	width: 138px;
	z-index: -1;
}
#toggle + div div {
	margin-left: -2px;
	transition: all 0.75s ease-in-out;
}
#toggle:checked + div div {
	margin-left: 141px;
	transition: all 0.75s ease-in-out;
}
/*For overriding hidden content*/
* input + div {
	max-height: none !important;
	overflow: visible !important;
}
@media only screen and (min-width: 737px) {
	.play-button {
	padding-top: 3px !important
}
}
       @media only screen and (max-width: 480px),
    only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        table[class="button"] {width: 45% !important;}
        table[class="button"] td[class="buttonTop"] {padding: 0 !important; font-size: 0.9em !important; }
        table[class="button"] td[class="buttonTop"] a {padding: 0.7em 0.1em 0.7em 0.1em !important; display: block !important; }
        table[class="button"] td[class="buttonBottom"] {font-size: 1.2em !important; display: block !important; }
    }
     @media only screen and (min-width: 500px) {        
    .button-td:hover,
      .button-a:hover {
    transition: all 200ms ease-in;
    background: #cf441a !important;
    border-color: #cf441a !important;
    }    
    .button-td:hover::after {

    font-size:20px;
    text-decoration:bold;
    color:#ffffff; 
     display : block !important;
    overflow : visible !important;
    float : right !important;
    }
  }
         @media only screen and (max-width: 460px) {
  
                 .button-td:hover {
   display: inline-block;
    overflow: hidden;
    white-space: nowrap;
                 }
         }
    
@media screen and (-webkit-min-device-pixel-ratio:0) {
* input + div {
	display: block !important;
	max-height: none !important;
	overflow: visible !important;
}
#outer-container #container .imgs td {
	position: absolute !important;
	display: block !important;
	left: 0;
	right: 0;
}
#toggle + div .imgs td:last-child {
	opacity: 0;
	transition: all 0.8s ease-in-out;
}
#toggle:checked + div .imgs td:last-child {
	opacity: 1;
	transition: all 0.8s ease-in-out;
}
}

@media yahoo {
* input + div {
	display: block !important;
	max-height: none !important;
	overflow: visible !important;
	width: 580px !important
}
.close div {
	display: none;
}

.desktop-hide {
	display: none !important;
}
.body-copy {
	padding-left: 30px !important;
	padding-right: 30px !important;

}
* tr[summary="toggle"] td table, * tr.toggle td table {
	width: 289px !important;
  }
}

@media screen {
@font-face {
	font-family: AkkuratProLight;
	src: url('https://nest.com/fonts/lineto_akkurat_pro/light.woff?email');
}
@font-face {
	font-family: 'FullerSansDT Regular';
	src: url('http://marketing-assets.nest.com/fullersansdt.ttf');
	src: url('http://marketing-assets.nest.com/fullersansdt.woff');
}
}
</style>
<style>
@-moz-document url-prefix() { 
  * input + div {
	display: block !important;
	max-height: none !important;
	overflow: visible !important;

  }
  #toggle + div div {
	height: 36px;
	top: 2px;
	width: 142px;
}
* tr[summary="toggle"] table td, * tr.toggle table td {
	height: 23px;
}
}
</style>
  <title>
     Rail Nation
    </title>
    </head>

<!--[if gte mso 9]>
  <style type="text/css" media="all">
    .outlook-button {
      padding: 7px 30px 9px !important;
    }
  </style>
  <xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
  </xml>
<![endif]-->
<body alink="#00AFD8" bgcolor="#18243a" class="font-size-14px" link="#00afd8" style="-webkit-text-size-adjust: none; color: #ecf2f3; font-family: AkkuratProLight,Helvetica; font-size: 14px; -ms-text-size-adjust: 100%; mso-margin-top-alt: 0px; mso-margin-bottom-alt: 0px; mso-padding-alt: 0px 0px 0px 0px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 20px; padding-right: 0; padding-bottom: 0; padding-left: 0; background: linear-gradient(to right, #425575 0%,#1e242d 100%);-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin:0;display: block;border:0;" text="#ecf2f3">
    
    	<!--[if mso]>
<style type="text/css">
body, table, td, span, p, div, h1, b {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
    
<center>
    
  <div style="position: relative; width: 100%; max-width: 700px; margin: 0 auto; ">
      
    <table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
           <tr>
              <td align="center" style="font-family: 'Tauri', sans-serif;font-size: 45px; color: #fc894e; line-height:50px; padding-top: 2px; height: 10px;"></td>
            </tr>
      <tr>
        <td align="center" class="top" style="border-collapse: collapse;padding-bottom:8px;padding-top: 18px; box-shadow: 0 4px 38px 10px rgba(22,24,38,.5);" width="59%">
            <table align="center" border="0" cellpadding="0" cellspacing="0" >
            <tr>
              <td align="center" class="hl" style="font-family: 'Tauri', sans-serif;font-size: 45px; color: #ff9a5b; line-height:50px; padding-top: 2px;">A NEW HOME FOR</td>
            </tr>
            <tr>
              <td align="center" class="hl" style="font-family: 'Tauri', sans-serif;font-size: 45px; color: #f1f1f1; line-height:50px; padding-bottom:15px">YOUR TRAINS</td>
            </tr>
          </table>
       </td>
      </tr>
    </table>
    <!--[if !mso 9]><!-->
    <table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
      <tr>
        <td align="center" style="border-collapse: collapse" width="100%"><label>
          <input id="toggle" name="myradio" style="display:none !important;" type="checkbox">
          <div style="max-height:0px; overflow:hidden; display: none" id="outer-container">
            <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" id="container">
              <tr summary="imgs" class="imgs">
                <td align="center"><center>
                    <a href="http://view.mail03.travian.com/?qs=30acd984933479ae80f27d8b9ae6c8a2baa75cf0900184aec6c38ef3e95020d0fc6300aba0a90b18a94bf0298f0ec7d0dc5433f9cc3149fea2a3666a837b420d73758a8b5009e9d3c1f579f61aa84554">  <img src="http://content.traviangames.com/pics/RailNation/newscreen/1new.jpg" width="100%" style="max-width:640px;line-height: 585px; font-size: 35px; color:#000000;box-shadow: 0 8px 38px 0 rgba(22,24,38,.5)" ></a>
                  </center></td>
                <td align="center"><center>
                    <img src="http://content.traviangames.com/pics/RailNation/newscreen/1old.jpg" width="100%" style="max-width:640px;line-height: 585px; font-size: 35px; color:#e84608;" />
                  </center></td>
              </tr>
              <tr summary="toggle" class="toggle">
                <td style="padding-bottom: 20px"><table style="margin: 0 auto; border-radius: 30px; height: 30px; width:285px; width: -moz-calc(100% - 202px); padding:0; position: relative; border: 1px solid #f1f1f1">
                    <tr>
                      <td align="center" summary="close" class="close"><div></div>
                        <span>NEW</span></td>
                      <td align="center" summary="distance" class="distance"><span>OLD</span></td>
                    </tr>
                  </table></td>
              </tr>
            </table>
          </div>
          </label>
          
          <!-- Fallback in Gmail app and you know who - No carousel but a sweet animated gif-->
          
          <div class="desktop-hide" summary="desktop-hide">
            <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="491" align="center">
              <tr>
                <td align="center" width="76%" style="position: relative; font-size: 20px; padding-top:15px"> <a href="http://view.mail03.travian.com/?qs=30acd984933479ae80f27d8b9ae6c8a2baa75cf0900184aec6c38ef3e95020d0fc6300aba0a90b18a94bf0298f0ec7d0dc5433f9cc3149fea2a3666a837b420d73758a8b5009e9d3c1f579f61aa84554"><img src="http://content.traviangames.com/pics/RailNation/newscreen/newscreen_anim.gif" width="600" height="600" style="max-width: 600px;line-height: 600px; font-size: 45px; color:#000000" alt="Click here to see the gallery ---------->" /></a></td>
              </tr>
            </table>
            
            <!-- // Fallback Gallery !--> 
          </div></td>
      </tr>
    </table>
    <!--<![endif]--> 
    
    <!--[if gte mso 9]>
<table width="600"><tr><td>
<![endif]-->
    <table class="full-width" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;max-width: 630px" width="90%">
          <td align="center" class="body-copy" style="font-family:'FullerSansDT Regular', sans-serif;  font-size:11px; line-height: 18px;color:#d1d1d1; max-width: 630px" width="630">CAN'T SEE THE NAVIGATION BAR? <a href="http://view.mail03.travian.com/?qs=30acd984933479ae80f27d8b9ae6c8a2baa75cf0900184aec6c38ef3e95020d0fc6300aba0a90b18a94bf0298f0ec7d0dc5433f9cc3149fea2a3666a837b420d297b8b05946275cc55330fe69752cf08" style="color:#fc894e;" target="_blank" title="Rail Nation"  ><u>CLICK HERE</u></a>
          <br><br><br>
       
          </td>
      <tr>
          
        <td align="center" class="body-copy" style="font-family:'FullerSansDT Regular', sans-serif;  font-size:17px; line-height: 24px;color:#d1d1d1; max-width: 630px; padding: 20px;box-shadow: 0 10px 48px 2px rgba(22,24,38,.5);" width="630">
        
            <span style="font-size: 21px;color:#f1f1f1;"><b>THE TRAIN BUY SCREEN HAS BEEN FULLY REINVENTED!   </b></span>
<br><br>
            The proportions of the <span style="color:#f1f1f1;"><b>trains are more realistic</b></span> now and we created six new engine houses for each era.
          
            <br>        <br>A brand-<span style="color:#f1f1f1;"><b>new perspective of the trains appeared</b></span> so you can see more of the detailed models.</td>
      </tr>
    </table>
    <!--[if gte mso 9]>
 </td></tr></table>
<![endif]-->
      <br> <br> 
     <div align="center">
                                                                    <img src="http://content.traviangames.com/pics/RailNation/app/separatorA1.png" style="width:60%" / >                                           
                                         <table class="button" align="center">
    <tr>
       
<td align="center" width="auto" bgcolor="#CF341A" style="padding-top: 18px; padding-right: 26px; padding-bottom: 18px; padding-left: 26px; background: #CF341A; background: -moz-linear-gradient(top,  #F27B3D 0%, #CF341A 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F27B3D), color-stop(100%,#CF341A)); background: -webkit-linear-gradient(top,  #F27B3D 0%, #CF341A 100%); -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); -moz-border-radius: 66px; -webkit-border-radius: 66px; border-radius: 66px; color: #fff; border: solid 0px #5b1b1c; font-size: 24px; font-weight: normal; text-decoration: none; display: inline-block; white-space: nowrap;font-family: 'Tauri',
 sans-serif;" class="button-td">
        <a href="http://click.mail03.travian.com/?qs=d387ea41cf848eac53f6768c24d5c54ea0fb4b1fb0d9cbcd8abbd5b0f3dbf929c1355b64248c25a2ccff8e609abe973c131d0e55435a6e4d" class="button-a" style="color: #FFF; text-decoration: none; font-family: 'Tauri', sans-serif; vertical-align: baseline;">       <b>TO THE GAME
</b></a>
           </td>
    </tr>
    
</table>  <br><br><br><br>
      </div>
  </div>
    <br> <br><br><br><br>
   <!--[if gte mso 9]>
<table width="600"  style="mso-hide:all;"><tr><td>
<![endif]-->

   
<!--[if mso]><!-->  <div style="position: relative; width: 100%; max-width: 700px; margin: 0 auto; "> 
     <table border="0" width="90%" cellpadding="0" cellspacing="0" align="center" valign="middle" style="mso-hide:all;">  <td align="center" width="100%" class="hl" style="font-family: 'Tauri', sans-serif;font-size: 40px; color: #f1f1f1; line-height:45px; padding-bottom:15px; padding-top: 10px;max-width: 500px;box-shadow: 0 0px 38px 5px rgba(22,24,38,.5);">AVAILABLE IN ALL ERAS</td>
    <tr>
      <td>
        <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="mso-hide:all;">
          <tr>
            <td align="center" valign="middle" ><div align="center">
              <table align="center" border="0" cellpadding="0" cellspacing="0" class="container"> 
              
             
          
               
                    <style type="text/css">
@charset "UTF-8";
/* CSS Document */
[owa] .hideme {
	display: none !important;
}
#carousel {
	display: block !important;
	max-height: inherit !important;
	line-height: inherit !important;
	font-size: inherit !important;
	overflow: visible !important;
}
#KURATEDFallback {
	display: none !important;
}
#slider1 {
	height: 610px;
	box-sizing: border-box;
}
.csslider {
  width: 640px;
  display: block;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.csslider > input {
  display: none;
}
.csslider > ul {
  position: relative;
  width: 100%;
  height: 451px;
  z-index: 1;
  font-size: 0;
  line-height: 0;
  margin: 0 auto;
  padding: 0;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  overflow: hidden;
}
.csslider img {
	width: 100%;
	height: auto;
}
.csslider > ul > li {
  position: relative;
  left:0;
  padding:0;
  margin:0;
  display: inline-block;
  width: 100%;
  height: auto;
  overflow: hidden;
  vertical-align: top;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
  z-index: 2;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.csslider > ul > li.scrollable {
  overflow-y: scroll;
}
.csslider > .navigation {
  position: absolute;
  top: 460px;
  left: 50%;
	width: 100%;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider > .navigation > div {
  margin-left: -100%;
}
.csslider > .navigation label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-right: 3px;
  background-size: 100px;
  background-position: center;
  background-color: #273649;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
}
.csslider > .navigation label:last-child {
	margin-right: 0;
}
.csslider > .navigation label:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 96px;
  height: 96px;
  border: 0px solid #273649 !important;
	z-index: 2;
}
.thumb {
	line-height: 14px;
	font-size: 14px;
	text-align:center;
	position: relative;
}
.thumbLabel {
	position: absolute;
	text-align:center;
	width: 92px;
	top: 105px;
	left: 6px;
	font-family: 'Tauri', sans-serif;
	font-size: 11px;
	color: #d1d1d1;
}
.thumb0 {
	background: url(http://content.traviangames.com/pics/RailNation/newscreen/era1_s.jpg);
}
.thumb1 {
	background: url(http://content.traviangames.com/pics/RailNation/newscreen/era2_s.jpg);
}
.thumb2 {
	background: url(http://content.traviangames.com/pics/RailNation/newscreen/era3_s.jpg);
}
.thumb3 {
	background: url(http://content.traviangames.com/pics/RailNation/newscreen/era4_s.jpg);
}
.thumb4 {
	background: url(http://content.traviangames.com/pics/RailNation/newscreen/era5_s.jpg);
}
.thumb5 {
	background: url(http://content.traviangames.com/pics/RailNation/newscreen/era6_s.jpg);
}
.csslider > .arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider.inside .navigation {
  bottom: 10px;
  margin-bottom: 10px;
}
.csslider.inside .navigation label {
  border: 1px solid #7e7e7e;
}
.csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after,
.csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after,
.csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after,
.csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after,
.csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after,
.csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after,
.csslider > input:nth-of-type(7):checked ~ .navigation label:nth-of-type(7):after,
.csslider > input:nth-of-type(8):checked ~ .navigation label:nth-of-type(8):after,
.csslider > input:nth-of-type(9):checked ~ .navigation label:nth-of-type(9):after,
.csslider > input:nth-of-type(10):checked ~ .navigation label:nth-of-type(10):after,
.csslider > input:nth-of-type(11):checked ~ .navigation label:nth-of-type(11):after {
  opacity: 0;
}
.csslider > .arrows {
  position: absolute;
  left: 22px;
  top: 240px;
  width: 596px;
  height: 46px;
  padding: 0 0;
  z-index: 10;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.csslider > .arrows label {
  display: none;
  position: absolute;
  top: -50%;
height: 30px;
width: 30px;
}
.csslider > .arrows label:before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  height: 300%;
  width: 300%;
}
.csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(9),
.csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(10) {
  display: block;
  left: 0;
  right: auto;
  background: url(http://i10.createsend1.com/ei/d/18/D62/474/061905/csimport/arrowl_20.png);
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}
.csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(9),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(10),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(11),
.csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(12) {
  display: block;
  right: 0;
  left: auto;
  background: url(http://i1.createsend1.com/ei/d/18/D62/474/061905/csimport/arrowr_21.png);
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (max-width:600px) {
.carouselWrapper {
	width: 320px !important;
	margin: auto !important;
}
#slider1 {
	padding: 0 0 0 !important;
	box-sizing: border-box !important;
	height: 515px !important;
}
.csslider {
  width: 320px !important;
  display: block !important;
  text-align: left !important;
  position: relative !important;
  overflow: hidden !important;
}
.csslider > .arrows {
  position: absolute !important;
  left: 5px !important;
  top: 84px !important;
  width: 310px !important;
  height: 30px !important;
  padding: 0 !important;
  z-index: 10 !important;
  -moz-box-sizing: content-box !important;
  -webkit-box-sizing: content-box !important;
  box-sizing: content-box !important;
}
.csslider > .arrows label {
  display: none !important;
  position: absolute !important;
  top: -50% !important;
	height: 92px !important;
	width: 44px !important;
}
.csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(9),
.csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(10) {
  display: block !important;
  left: 0 !important;
  right: auto !important;
  background-size: 20px !important;
  background-position: center left !important;
  background-repeat: no-repeat !important;
}
.csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(9),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(10),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(11),
.csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(12) {
  display: block !important;
  right: 0 !important;
  left: auto !important;
  background-size: 20px !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
}
	.csslider > .navigation {
  position: absolute !important;
  top: 230px !important;
  left: 50% !important;
	width: 200px !important;
  z-index: 10 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
	
.csslider > .navigation label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin: 10px 3px 0 0;;
	background-size: 97px;
  background-position: center;
  background-color: #f1f1f1;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
}
.csslider > .navigation label:nth-child(3) {
   margin: 0  0 10px 0;
	}
	csslider > .navigation label:last-child {
   margin: 0  0 10px 0;
	}
.csslider > .navigation label:after {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 88px;
  height: 88px;
  border: 0px solid #273649 !important;
	
}
	.thumb {
margin-bottom: 16px !important; 
        
	}
}
</style>   
                    <div id="carousel" style="display:none; max-height:0; line-height:0; font-size:0; overflow:hidden; mso-hide:all;">
                      <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tbody>
                          <tr>
                            <td align="center" >
                              <style type="text/css">
                                .csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {  margin-left: -500%; background: url(http://i2.createsend1.com/ei/d/18/D62/474/061905/csimport/spacer_2.jpg); }
                                .csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {  margin-left: -400%; background: url(http://i2.createsend1.com/ei/d/18/D62/474/061905/csimport/spacer_2.jpg); }
                                .csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {  margin-left: -300%; background: url(http://i2.createsend1.com/ei/d/18/D62/474/061905/csimport/spacer_2.jpg); }
                                .csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {  margin-left: -200%; background: url(http://i2.createsend1.com/ei/d/18/D62/474/061905/csimport/spacer_2.jpg); }
                                .csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {  margin-left: -100%; background: url(http://i2.createsend1.com/ei/d/18/D62/474/061905/csimport/spacer_2.jpg); }
                                .csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {  margin-left: 0%; background: url(http://i2.createsend1.com/ei/d/18/D62/474/061905/csimport/spacer_2.jpg); }
                              </style>
                              <div id="slider1" class="csslider infinity" style="box-shadow: 0 8px 38px 0 rgba(22,24,38,.5);" alt="Trains in all eras gallery">
                                <input type="radio" name="slides" checked="checked" id="slides_0" / alt="Trains in all eras gallery">
                                <input type="radio" name="slides" id="slides_1" />
                                <input type="radio" name="slides" id="slides_2" />
                                <input type="radio" name="slides" id="slides_3" />
                                <input type="radio" name="slides" id="slides_4" />
                                <input type="radio" name="slides" id="slides_5" />
                                <ul>
                                  <li>
                                    <a href="http://click.mail03.travian.com/?qs=d387ea41cf848eac53f6768c24d5c54ea0fb4b1fb0d9cbcd8abbd5b0f3dbf929c1355b64248c25a2ccff8e609abe973c131d0e55435a6e4d" target="_blank"><img src="http://content.traviangames.com/pics/RailNation/newscreen/era1_big.jpg" width="600" height="421" border="0" class="resizeImg" alt="Trains in all eras gallery"></a>
                                  </li>
                                  
                                  <li>
                                    <a href="http://click.mail03.travian.com/?qs=d387ea41cf848eac53f6768c24d5c54ea0fb4b1fb0d9cbcd8abbd5b0f3dbf929c1355b64248c25a2ccff8e609abe973c131d0e55435a6e4d" target="_blank"><img src="http://content.traviangames.com/pics/RailNation/newscreen/era2_big.jpg" width="600" height="421" border="0" alt="Trains in all eras gallery"></a>
                                  </li>
                                  
                                  <li>
                                    <a href="http://click.mail03.travian.com/?qs=d387ea41cf848eac53f6768c24d5c54ea0fb4b1fb0d9cbcd8abbd5b0f3dbf929c1355b64248c25a2ccff8e609abe973c131d0e55435a6e4d" target="_blank"><img src="http://content.traviangames.com/pics/RailNation/newscreen/era3_big.jpg" width="600" height="421" border="0" alt="Trains in all eras gallery"></a>
                                  </li>
                                  
                                  <li>
                                    <a href="http://click.mail03.travian.com/?qs=d387ea41cf848eac53f6768c24d5c54ea0fb4b1fb0d9cbcd8abbd5b0f3dbf929c1355b64248c25a2ccff8e609abe973c131d0e55435a6e4d" target="_blank"><img src="http://content.traviangames.com/pics/RailNation/newscreen/era4_big.jpg" width="600" height="421" border="0" alt="Trains in all eras gallery"></a>
                                  </li>
                                  
                                  <li>
                                    <a href="http://click.mail03.travian.com/?qs=d387ea41cf848eac53f6768c24d5c54ea0fb4b1fb0d9cbcd8abbd5b0f3dbf929c1355b64248c25a2ccff8e609abe973c131d0e55435a6e4d" target="_blank"><img src="http://content.traviangames.com/pics/RailNation/newscreen/era5_big.jpg" width="60" height="421" border="0" alt="Trains in all eras gallery"></a>
                                  </li>
                                  
                                  <li>
                                    <a href="http://click.mail03.travian.com/?qs=d387ea41cf848eac53f6768c24d5c54ea0fb4b1fb0d9cbcd8abbd5b0f3dbf929c1355b64248c25a2ccff8e609abe973c131d0e55435a6e4d" target="_blank"><img src="http://content.traviangames.com/pics/RailNation/newscreen/era6_big.jpg" width="600" height="421" border="0" alt="Trains in all eras gallery"></a>
                                  </li>
                                </ul>
                                <div class="arrows">
                                  <label for="slides_0"></label>
                                  <label for="slides_1"></label>
                                  <label for="slides_2"></label>
                                  <label for="slides_3"></label>
                                  <label for="slides_4"></label>
                                  <label for="slides_5"></label>
                                  <label for="slides_0" class="goto-first"></label>
                                  <label for="slides_5" class="goto-last"></label>
                                </div>
                                <div class="navigation">
                                  <div>
                                    <label for="slides_0" class="thumb thumb0"><div class="thumbLabel">Era 1<br>
</div></label>
                                    <label for="slides_1" class="thumb thumb1"><div class="thumbLabel">Era 2<br>
</div></label>
                                    <label for="slides_2" class="thumb thumb2"><div class="thumbLabel">Era 3<br>
</div></label>
                                    <label for="slides_3" class="thumb thumb3"><div class="thumbLabel">Era 4<br>
</div></label>
                                    <label for="slides_4" class="thumb thumb4"><div class="thumbLabel">Era 5<br>
</div></label>
                                    <label for="slides_5" class="thumb thumb5"><div class="thumbLabel">Era 6</div></label>
                                  </div>
                                </div>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                     <!--<![endif]-->
                    <img src="http://i2.createsend1.com/ei/d/18/D62/474/061905/csimport/spacer_2.jpg" height="1" width="1" style="display: block;" border="0" />
                      

                   <!-- Fallback in Gmail app and you know who - No carousel but a sweet animated gif-->
          
          <div class="desktop-hide" summary="desktop-hide">
            <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="491" align="center">
              <tr>
                  <td align="center" width="76%" style="position: relative; font-size: 20px; padding-top:15px"><a href="http://view.mail03.travian.com/?qs=30acd984933479ae80f27d8b9ae6c8a2baa75cf0900184aec6c38ef3e95020d0fc6300aba0a90b18a94bf0298f0ec7d0dc5433f9cc3149fea2a3666a837b420d73758a8b5009e9d3c1f579f61aa84554"><img src="http://content.traviangames.com/pics/RailNation/newscreen/alleras.jpg" width="650" height="386" style="max-width: 650px;line-height: 386px; font-size: 350px; color:#000000" alt="Click here to see the gallery ---------->" /></a></td>
              </tr>
            </table>
            
            <!-- // Fallback Gallery !--> 
                  </div></table></div></tr></table>
                  </td>
                </tr>
    </table>
    </div>
          
        
          
       
     <br>    <table class="full-width" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;max-width: 630px;" width="90%">  <td align="center" class="body-copy" style="font-family:'FullerSansDT Regular', sans-serif;  font-size:12px; line-height: 18px; padding-top: 15px; color:#d1d1d1; max-width: 630px" width="630">CAN'T SEE THE NAVIGATION BAR? <a href="http://view.mail03.travian.com/?qs=30acd984933479ae80f27d8b9ae6c8a2baa75cf0900184aec6c38ef3e95020d0fc6300aba0a90b18a94bf0298f0ec7d0dc5433f9cc3149fea2a3666a837b420d35f9a79e58e92a649fd1e272330a974f" style="color:#fc894e;" target="_blank" title="Rail Nation"  ><u>CLICK HERE</u></a>
          <br>  <br>
       
    </td>  
      <tr> 
        <td align="center" class="body-copy" style="font-family:'FullerSansDT Regular', sans-serif;  font-size:18px; line-height: 24px;color:#d1d1d1; max-width: 630px; padding: 20px;box-shadow: 0 10px 48px 2px rgba(22,24,38,.5);" width="630"> Just as the eras, trains and cities change in the game, now also the engine house does.
           
            It is evolving from steam filled shed to bright engine house with a glass front.
            <br> <br>
            <span style="color:#f1f1f1;font-size: 19px;"><b> Experience the game as you never did before!</b></span>
          <br>
         
          <br><br>  <div align="center">
                                                                    <img src="http://content.traviangames.com/pics/RailNation/app/separatorA1.png" style="width:60%; max-width: 430px" / >                                           
                                         <table class="button" align="center">
    <tr>
       
<td align="center" width="auto" bgcolor="#CF341A" style="padding-top: 18px; padding-right: 26px; padding-bottom: 18px; padding-left: 26px; background: #CF341A; background: -moz-linear-gradient(top,  #F27B3D 0%, #CF341A 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F27B3D), color-stop(100%,#CF341A)); background: -webkit-linear-gradient(top,  #F27B3D 0%, #CF341A 100%); -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); -moz-border-radius: 66px; -webkit-border-radius: 66px; border-radius: 66px; color: #fff; border: solid 0px #5b1b1c; font-size: 24px; font-weight: normal; text-decoration: none; display: inline-block; white-space: nowrap;font-family: 'Tauri',
 sans-serif;" class="button-td">
        <a href="http://click.mail03.travian.com/?qs=d387ea41cf848eac53f6768c24d5c54ea0fb4b1fb0d9cbcd8abbd5b0f3dbf929c1355b64248c25a2ccff8e609abe973c131d0e55435a6e4d" class="button-a" style="color: #FFF; text-decoration: none; font-family: 'Tauri', sans-serif; vertical-align: baseline;">       <b>SEE THE CHANGES
</b></a>
           </td>
    </tr>
    
</table>  <br> <br> 
      </div>
          </td>
      </tr>
    </table>
    <table class="full-width" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;max-width: 630px;" width="90%">
      <tr>  <br> 
        <td align="center" class="body-copy" style="font-family:'FullerSansDT Regular', sans-serif;  font-size:16px; line-height: 24px;color:#d1d1d1; max-width: 630px; padding-top: 30px;" width="630">  We hope you will enjoy the new game changes and will discover more about the trains.
          <br>
          <br>
            Have fun!
            <br>
            Your Rail Nation Team
             <br>
          <br>
              <br>
          <br>
          </td>
      </tr>
    </table>
    <!--[if gte mso 9]>
 </td></tr></table>
<![endif]-->

   

  <!-- footer !-->
    
  <div style="position: relative; width:100%; margin-left:auto; margin-right:auto; "  >
  
    <table id="outlook" width="86%" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:640px; margin:auto;" >
    
    </table>
    <!--[if gte mso 9]>
 </td></tr></table>
<![endif]-->
    
    <tr>
            <td align="center" style="font-family:'Tauri', sans-serif;padding: 0 15px;">
                <!--[if (gte mso 9)|(IE)]>
               <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" >
                  <tr>
                     <td align="center" valign="top" width="600" >
                        <![endif]-->
                <br />


                <table align="center" border="0" cellpadding="0" cellspacing="0" class="max-width" style="max-width:600px;" width="100%" >
                    <tr>
                        <td align="center" class="unsubscribe ptop25" style="font-family:'Tauri', sans-serif;font-size:13px;line-height:18px;color:#353a3e;">
                              <!--START social footer-->
                           <table height="10" align="center" border="0" cellpadding="0" cellspacing="5" style="padding: 1px 2px 10px 2px">
    <tbody>
        <tr>
            <td>
            <a href="http://click.mail03.travian.com/?qs=d387ea41cf848eac28a88c515537557110c98fe4560d7966d566508051ece16d032c1c8ef92394748dfe424c9351a404acf90f6e0d48ab5c" style="border:0px" title="Facebook" alt="Facebook"  target="_blank"><img width="100%" src="http://content.traviangames.com/pics/RailNation/social/facebook_45ok.png" style="border-width:0px;border-style:solid" title="Facebook" alt="Facebook" alias="Facebook"></a>
            </td>
              <td width="15">&nbsp;</td>
            <td>
            <a href="http://click.mail03.travian.com/?qs=d387ea41cf848eac37bf44080242c40919f5c291666bd5a132b3459da71f2e4d235d5bf5ea770940c5f5fe6dd7b508d963cc04c4a767af45" style="border:0px" title="Twitter" alt="Twitter"  target="_blank"><img width="100%"  src="http://content.traviangames.com/pics/RailNation/social/twitter_45ok.png" style="border-width:0px;border-style:solid" title="Twitter" alt="Twitter" alias="Twitter"></a>
            </td>
             <td width="15">&nbsp;</td>
            <td class="mobile-hidden">
            <a href="http://click.mail03.travian.com/?qs=d387ea41cf848eac0ff35c0c4840ad7217e7892036aee31430c427f2c5e508d983dc945fc434a0dff02c5e8e4fe98183c66448cbf64069c0" style="border:0px" title="Youtube" alt="Youtube"  target="_blank"><img width="100%" src="http://content.traviangames.com/pics/RailNation/social/youtube_45.png" style="border-width:0px;border-style:solid" title="Youtube" alt="Youtube" alias="Youtube"></a>
                  <td width="15" class="mobile-hidden">&nbsp;</td>
            <td>
            <a href="http://click.mail03.travian.com/?qs=d387ea41cf848eac64b7b9b3eb6d94e7f8911fa694f98aac797709dc393b5b798b59101cd4ecc0af699174b0ec3b67cccb7626e8331fa34d" style="border:0px" title="Blog" alt="Blog"   target="_blank"><img width="100%"  src="http://content.traviangames.com/pics/RailNation/social/rss_45.png" style="border-width:0px;border-style:solid" title="Blog" alt="Blog" alias="Blog" ></a>
            </td>
             <td width="15">&nbsp;</td>
            <td>
            <a href="http://click.mail03.travian.com/?qs=d387ea41cf848eac72d3ed58af7c9d026080083bc613fbdcae9fafe9f3ee2496b17c943027a54fd6a5c898d659ea6144df6cf646740f9d8c" style="border:0px"  title="iOS APP" alt="iOS APP"  target="_blank"><img width="100%" src="http://content.traviangames.com/pics/RailNation/social/apple_45.png" style="border-width:0px;border-style:solid;" title="iOS APP" alt="iOS APP" alias="iOS APP"></a>
            </td>
             <td width="15">&nbsp;</td>
            <td>
            <a href="http://click.mail03.travian.com/?qs=d387ea41cf848eac833e393b200b9457fae9ef92beb0cef9edbaa8829cc144e1df3f2ae5b4edce7027444cdce3b589a2283ecf022fe367bd" style="border:0px" title="Android APP" alt="Android APP"  target="_blank"><img width="100%" src="http://content.traviangames.com/pics/RailNation/social/android_45.png" style="border-width:0px;border-style:solid" title="Android APP" alt="Android APP" alias="Android APP"></a>
            </td>
        </tr>
    </tbody>                
</table>
                            <!--END social footer-->


                            <p style="text-align:middle;font-size:11px;font-family:'FullerSansDT Regular', sans-serif;color:#000000;vertical-align:middle; line-height:13px;"> Bei Fragen kannst du uns gerne eine E-Mail an <a href="mailto:admin@railnation.de" style="text-align:middle;font-size:11px;font-family:arial,sans-serif;color:#000000;text-decoration:underline" target="_blank">admin@railnation.de</a> schreiben.<br>
                <br>
                <strong>Impressum:</strong><br>
                Travian Games GmbH, Wilhelm-Wagenfeld-Str. 22, 80807 München, Deutschland<br>
                Tel: +49 (0)89 3249150, Fax: +49 (0)89 324915970, www.traviangames.de; <br/>Geschäftsführer: Lars Janssen<br>
                Handelsgericht: Amtsgericht München, HRB 173511, Steuernummer: DE 246258085 <br>
                <br>
                Bitte nicht direkt auf diese E-Mail antworten, da Antworten auf die verwendete Absenderadresse nicht beantwortet werden können.<br>
                Du erhältst diese Nachricht, weil Du mit folgender Emailadresse bei Travian Games angemeldet bist: raduneag@gmail.com.<br>
                <br>
                <a href="http://click.mail03.travian.com/unsub_center.aspx?qs=d248b46768f57c98411c60d980f368e2fb70cf85dda8705c0d34cfccb8e50c529b5c497bfd45750c3bbd57b957baee18241ebc11756063cd950a00443fc9c0c6af785200ab296af2" style="text-align:middle;font-size:11px;font-family:'FullerSansDT Regular', sans-serif;color:#000000;text-decoration:underline" target="_blank">Bitte klicke hier, wenn Du keine Nachrichten mehr erhalten möchtest.</a>
         </p>
                              <a href="http://view.mail03.travian.com/?qs=30acd984933479ae80f27d8b9ae6c8a2baa75cf0900184aec6c38ef3e95020d0fc6300aba0a90b18a94bf0298f0ec7d0dc5433f9cc3149fea2a3666a837b420d73758a8b5009e9d3c1f579f61aa84554" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-align:center;font-size:11px;font-family:'FullerSansDT Regular', sans-serif;color:#000000;text-decoration:underline" target="_blank"><b>ONLINE VERSION</b></a><br><br><br><br>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    <!--[if (gte mso 9)|(IE)]>
            </td>
         </tr>
      </table>
      <![endif]-->
  </div>
    </center>
    <img src="http://click.mail03.travian.com/open.aspx?ffcb10-fe9a17727561017977-fe4116717166057c741472-fe89137275620d7573-ff5f107572-fe491c797263037a7216-ffce15" width="1" height="1">
    </body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console