More work on new layout

gts/Default.aspx

@@ -5,6 +5,11 @@
 
 <asp:Content ID="Content2" ContentPlaceHolderID="cpMain" runat="server">
 
+<div class="gtsColumn gtsLeftColumn">
+Left
+</div>
+<div class="gtsMainColumn gtsMainColumnThree">
+
     <h1>Update - August 29:</h1>
     <p>Wi-fi Battle Tower and Battle Subway are now available!
     </p>
@@ -49,4 +54,13 @@ above link.</p>
 <p class="code">191.236.98.208</p>
 <p>Please note that using this DNS server may interfere with the operation of some other
     titles besides Pokémon.</p>
+
+    
+</div>
+<div class="gtsColumn gtsRightColumn">
+Right
+</div>
+<div class="clear"></div>
+
+
 </asp:Content>

gts/MasterPage.master

@@ -19,15 +19,15 @@
             <div id="gtsLogo" class="gtsLogo">
                 <asp:HyperLink ID="hlLogl" NavigateUrl="~" runat="server">
                 <pf:RetinaImage ID="imgLogo" ImageUrl="~/images/headinglogo.png"
-                    Width="368" Height="128"
+                    Width="276" Height="96"
                     AlternateSizes="2,3" runat="server" />
                     </asp:HyperLink>
                 <br />
-                Bringing back Pokémon internet services to the DS
+                Custom servers for classic Pokémon
             </div>
 
             <div id="gtsHeadMain">
-            <ul style="list-style-type: circle; margin-top: 16px;">
+            <ul class="gtsHeadContent">
                 <li>DNS: <strong>75.127.5.215</strong></li>
                 <li><asp:Literal ID="litPokemon" runat="server" />
                 Pokémon available for offer.</li>
@@ -43,22 +43,42 @@
 
             <ul id="gtsNav" class="gtsNav">
                 <li class="home">
-                    <asp:HyperLink ID="hlHome" Text="Home" NavigateUrl="~/" runat="server" />
+                    <asp:HyperLink ID="hlHome" NavigateUrl="~/" runat="server">
+                        <span class="inner">
+                        Home
+                        </span>
+                    </asp:HyperLink>
                 </li>
                 <li class="gts">
-                    <asp:HyperLink ID="hlGts" Text="GTS" NavigateUrl="~/AllPokemon.aspx" runat="server" />
+                    <asp:HyperLink ID="hlGts" NavigateUrl="~/AllPokemon.aspx" runat="server">
+                        <span class="inner">
+                        GTS
+                        </span>
+                    </asp:HyperLink>
                 </li>
                 <li class="bv">
-                    <asp:HyperLink ID="hlBattleVideos" Text="Battle Videos" NavigateUrl="~/BattleVideo.aspx" runat="server" />
+                    <asp:HyperLink ID="hlBattleVideos" NavigateUrl="~/BattleVideo.aspx" runat="server">
+                        <span class="inner">
+                        Battle Videos
+                        </span>
+                    </asp:HyperLink>
                 </li>
-                <%-- 
+
                 <li class="dw">
-                    <asp:HyperLink ID="hlDreamWorld" Text="Dream World" NavigateUrl="#" runat="server" />
+                    <asp:HyperLink ID="hlDreamWorld" NavigateUrl="#" runat="server">
+                        <span class="inner">
+                        Dream World
+                        </span>
+                    </asp:HyperLink>
                 </li>
                 <li class="dex">
-                    <asp:HyperLink ID="hlPokedex" Text="Pokédex" NavigateUrl="#" runat="server" />
+                    <asp:HyperLink ID="hlPokedex" NavigateUrl="#" runat="server">
+                        <span class="inner">
+                        Pokédex
+                        </span>
+                    </asp:HyperLink>
                 </li>
-                    --%>
+
             </ul>
 
         </div>
@@ -66,6 +86,29 @@
 
     </div>
 
+    <div id="gtsSubNav">
+        <div class="setWidth">
+            <ul class="gtsNav">
+                <li><a href="#">
+                    <span class="inner">
+                    Item 1
+                        </span>
+                    </a></li>
+                <li><a href="#">
+                    <span class="inner">
+                    Item 2
+                        </span>
+                    </a></li>
+                <li><a href="#">
+                    <span class="inner">
+                    Item 3
+                        </span>
+                    </a></li>
+            </ul>
+        <div class="clear"></div>
+        </div>
+    </div>
+
     <div id="gtsMain">
         <div class="setWidth">
     <asp:ContentPlaceHolder ID="cpMain" runat="server" />
@@ -73,19 +116,19 @@
     </div>
 
     <div id="gtsFooter">
-        <div class="setWidth">
-            <div id="gtsFooterLeft">
-                left
-            </div>
-            <div id="gtsFooterRight">
-                right
-            </div>
-            <div class="clear"></div>
+        <div id="gtsFooterBkg">
+            <div class="setWidth">
+                <div id="gtsFooterLeft">
+                    left
+                </div>
+                <div id="gtsFooterRight">
+                    right
+                </div>
+                <div class="clear"></div>
 
-            <div id="gtsFooterBottom">
-            Pokémon is © 1995-2014 Nintendo / Creatures / GAME FREAK.
-            This service is not affiliated with Nintendo or GAME FREAK in any way.<br />
-            This service is provided ‘as is’ without warranty of any kind.
+                <div id="gtsFooterBottom">
+                Pokémon is © 1995-2014 Nintendo / Creatures / GAME FREAK.
+                This service is not affiliated with Nintendo or GAME FREAK in any way.               </div>
             </div>
         </div>
     </div>

gts/MasterPage.master.designer.cs

@@ -66,6 +66,15 @@ namespace PkmnFoundations.GTS {
         /// </remarks>
         protected global::System.Web.UI.WebControls.Literal litPokemon;
         
+        /// <summary>
+        /// litVideos control.
+        /// </summary>
+        /// <remarks>
+        /// Auto-generated field.
+        /// To modify move field declaration from designer file to code-behind file.
+        /// </remarks>
+        protected global::System.Web.UI.WebControls.Literal litVideos;
+        
         /// <summary>
         /// hlHome control.
         /// </summary>
@@ -93,6 +102,24 @@ namespace PkmnFoundations.GTS {
         /// </remarks>
         protected global::System.Web.UI.WebControls.HyperLink hlBattleVideos;
         
+        /// <summary>
+        /// hlDreamWorld control.
+        /// </summary>
+        /// <remarks>
+        /// Auto-generated field.
+        /// To modify move field declaration from designer file to code-behind file.
+        /// </remarks>
+        protected global::System.Web.UI.WebControls.HyperLink hlDreamWorld;
+        
+        /// <summary>
+        /// hlPokedex control.
+        /// </summary>
+        /// <remarks>
+        /// Auto-generated field.
+        /// To modify move field declaration from designer file to code-behind file.
+        /// </remarks>
+        protected global::System.Web.UI.WebControls.HyperLink hlPokedex;
+        
         /// <summary>
         /// cpMain control.
         /// </summary>

gts/css/main.css

@@ -1,7 +1,17 @@
-body
+@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic&subset=latin,latin-ext);
+
+body
 {
     margin: 0; padding: 0;
-    font-family: Arial,sans-serif;
+    font-family: Lato,Candara,'Meiryo UI',Arial,sans-serif;
+    font-size: 10pt;
+    font-weight: 400;
+    background-color: #666666;
+}
+
+h1, h2, h3, h4, strong
+{
+    font-weight: 700;
 }
 
 .setWidth
@@ -23,10 +33,14 @@
     margin: 0; padding: 0;
 }
 
+.gtsNav li
+{
+    float: left;
+}
+
 .gtsNav li a
 {
     display: block;
-    float: left;
 }
 
 #gtsHeader
@@ -37,27 +51,31 @@
     background-image: url('../images/heading-backdrop.png');
     background-size: 32px 8px;
     overflow: hidden;
+    font-size: 12pt;
+    position: relative;
 }
 
 #gtsHeader #gtsLogo
 {
-    width: 368px;
+    width: 276px;
     margin-right: 16px;
     float: left;
     text-shadow: 0 1px 1px rgba(0,0,0,0.2);
+    text-align: center;
 }
 
 #gtsHeader #gtsHeadMain
 {
-    width: 340px;
+    width: 400px;
     float: left;
     margin-right: 16px;
+    margin-top: 9px;
     text-shadow: 0 1px 1px rgba(0,0,0,0.2);
 }
 
 #gtsHeader #gtsLogin
 {
-    width: 208px;
+    width: 240px;
     float: left;
     color: black;
     background-color: #eeeeee;
@@ -67,10 +85,19 @@
     box-shadow: 0 4px 8px 2px rgba(0,0,0,0.2);
 }
 
+#gtsHeader .gtsHeadContent
+{
+    list-style-type: circle;
+    margin-top: 0;
+    margin-left: 16px;
+    padding-left: 0;
+}
+
 #gtsHeader .gtsNav
 {
     height: 32px;
     margin: 16px 0 0 0; padding: 0;
+    font-size: 12pt;
 }
 
 #gtsHeader .gtsNav li
@@ -82,73 +109,181 @@
 #gtsHeader .gtsNav li a
 {
     width: 158px;
-    height: 16px;
-    margin-right: 12px;
-    padding-top: 16px;
+    height: 18px;
+    margin-right: 8px;
+    padding-top: 14px;
     padding-left: 8px;
     border: 1px solid #cccccc;
-    border-width: 1px 1px 0 1px;
+    border-style: solid;
+    border-color: #cccccc #bbbbbb #aaaaaa #bbbbbb;
+    border-bottom: none;
     box-shadow: 0 -2px 12px -4px rgba(0,0,0,0.5);
     border-radius: 6px 6px 0 0;
-    background-color: white;
+    background-color: #f8f8f8;
     color: black;
     text-decoration: none;
-    font-size: 14pt;
     font-weight: bold;
     line-height: 0;
     vertical-align: middle;
     position: relative;
     z-index: 0;
+    top: 2px;
+    transition: top 0.1s ease-out, background-color 0.1s ease-out;
 }
 
-.home #gtsHeader .gtsNav li.home a {z-index: 2;}
-.gts #gtsHeader .gtsNav li.gts a {z-index: 2;}
-.bv #gtsHeader .gtsNav li.bv a {z-index: 2;}
-.dw #gtsHeader .gtsNav li.dw a {z-index: 2;}
-.dex #gtsHeader .gtsNav li.dw a {z-index: 2;}
-
-#gtsHeader .gtsNav li.home a, .home #gtsSubMenu {color: #ff8063;}
-#gtsHeader .gtsNav li.gts a, .home #gtsSubMenu {color: #43c4ff;}
-#gtsHeader .gtsNav li.bv a, .bv #gtsSubMenu {color: #9761e9;}
-#gtsHeader .gtsNav li.dw a, .dw #gtsSubMenu {color: #fa79d4;}
-#gtsHeader .gtsNav li.dex a, .dex #gtsSubMenu {color: #2dd350;}
-
-.home #gtsSubMenu {border-color: #ff8063;}
-.gts #gtsSubMenu {border-color: #43c4ff;}
-.bv #gtsSubMenu {border-color: #9761e9;}
-.dw #gtsSubMenu {border-color: #fa79d4;}
-.dex #gtsSubMenu {border-color: #2dd350;}
-
-#gtsHeader #gtsHeaderBorder
+#gtsHeader .gtsNav li a:hover
 {
-    border-top: 1px solid rgba(0,0,0,0.25);
-    box-shadow: 0 -12px 12px -12px rgba(0,0,0,0.5);
-    position: relative;
-    z-index: 1;
-    height: 32px;
-    margin-bottom: -32px;
+    top: 0;
+    background-color: #fcfcfc;
 }
 
+.home #gtsHeader .gtsNav li.home a {z-index: 2; top: 0; background-color: #fcfcfc;}
+.gts #gtsHeader .gtsNav li.gts a {z-index: 2; top: 0; background-color: #fcfcfc;}
+.bv #gtsHeader .gtsNav li.bv a {z-index: 2; top: 0; background-color: #fcfcfc;}
+.dw #gtsHeader .gtsNav li.dw a {z-index: 2; top: 0; background-color: #fcfcfc;}
+.dex #gtsHeader .gtsNav li.dw a {z-index: 2; top: 0; background-color: #fcfcfc;}
+
+#gtsHeader .gtsNav li.home a, .home #gtsSubMenu.bv, .home .gtsNav li a {color: #ff8063;}
+#gtsHeader .gtsNav li.gts a, .gts #gtsSubMenu, .gts .gtsNav li a {color: #43c4ff;}
+#gtsHeader .gtsNav li.bv a, .bv #gtsSubMenu, .bv .gtsNav li a {color: #9761e9;}
+#gtsHeader .gtsNav li.dw a, .dw #gtsSubMenu, .dw .gtsNav li a {color: #fa79d4;}
+#gtsHeader .gtsNav li.dex a, .dex #gtsSubMenu, .dex .gtsNav li a {color: #2dd350;}
+
+.home #gtsSubNav .gtsNav li a:hover .inner {background-color: #ff8063;}
+.gts #gtsSubNav .gtsNav li a:hover .inner {background-color: #43c4ff;}
+.bv #gtsSubNav .gtsNav li a:hover .inner {background-color: #9761e9;}
+.dw #gtsSubNav .gtsNav li a:hover .inner {background-color: #fa79d4;}
+.dex #gtsSubNav .gtsNav li a:hover .inner {background-color: #2dd350;}
+
 #gtsMain
 {
     background-color: white;
+    margin: 0;
+    padding: 16px 0;
 }
 
-#gtsSubMenu
+#gtsMain *:first-child *
 {
-    background-color: white;
+    margin-top: 0;
+}
+
+#gtsMain .gtsColumn
+{
+    width: 236px;
+}
+
+#gtsMain .gtsLeftColumn
+{
+    float: left;
+    margin-right: 16px;
+}
+
+#gtsMain .gtsRightColumn
+{
+    float: right;
+}
+
+#gtsMain .gtsMainColumn
+{
+    float: left;
+}
+
+#gtsMain .gtsMainColumnThree
+{
+    width: 476px;
+}
+
+#gtsMain .gtsMainColumnTwo
+{
+    width: 728px;
+}
+
+#gtsSubNav
+{
+    border: 1px solid #cccccc;
+    border-width: 1px 0;
+    box-shadow: 0 -12px 12px -12px rgba(0,0,0,0.5), 0 3px 8px 0 rgba(0,0,0,0.05), 0 -4px 3px -3px rgba(0,0,0,0.1) inset;
+    background-color: #f8f8f8;
     color: #ff8063;
-    height: 16px;
-    padding: 8px 0;
+    height: 32px;
+    padding: 0;
+    position: relative;
+    z-index: 1;
+    margin-top: -1px;
+    background-image: -moz-linear-gradient(top, #fcfcfc 0%, #f8f8f8 100%); /* FF3.6+ */
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#f8f8f8)); /* Chrome,Safari4+ */
+    background-image: -webkit-linear-gradient(top, #fcfcfc 0%,#f8f8f8 100%); /* Chrome10+,Safari5.1+ */
+    background-image: -o-linear-gradient(top, #fcfcfc 0%,#f8f8f8 100%); /* Opera 11.10+ */
+    background-image: -ms-linear-gradient(top, #fcfcfc 0%,#f8f8f8 100%); /* IE10+ */
+    background-image: linear-gradient(to bottom, #fcfcfc 0%,#f8f8f8 100%); /* W3C */
+    background-size: 100%;
+}
+
+#gtsSubNav .gtsNav
+{
+    margin: 0; padding: 6px 0;
+    margin-left: 0;
+    font-size: 12pt;
+}
+
+#gtsSubNav .gtsNav li
+{
+    height: 20px;
+    display: block;
+    margin: 0; padding: 0;
+    border-left: 1px solid #cccccc;
+}
+
+#gtsSubNav .gtsNav li a
+{
+    height: 24px;
+    padding: 0 12px;
+    margin: 0;
+    text-decoration: none;
+    font-weight: bold;
+    line-height: 0;
+    vertical-align: middle;
+    position: relative;
+    top: -2px;
+    z-index: 0;
+}
+
+#gtsSubNav .gtsNav li a .inner
+{
+    display: block;
+    line-height: 0;
+    height: 12px;
+    padding: 12px 6px 0 6px;
+    border-radius: 12px;
+}
+
+#gtsSubNav .gtsNav li a:hover
+{
+    color: white;
+    text-shadow: 0 2px 2px rgba(0,0,0,0.2);
+}
+
+#gtsSubNav .gtsNav li a:hover .inner
+{
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2) inset;
+}
+
+#gtsSubNav .gtsNav li:first-child
+{
+    border-left: none;
+}
+
+#gtsSubNav .gtsNav li:first-child a
+{
+    padding-left: 3px;
 }
 
 #gtsFooter
 {
-    background-color: #666666;
     color: white;
     font-size: 9pt;
     padding: 16px 0;
-    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
+    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
     box-shadow: 0 12px 12px -12px rgba(0,0,0,0.5) inset;
 }