diff --git a/website/content/en/layout/css/layout.css b/website/content/en/layout/css/layout.css
index 668d2764a0..454a6bdd0a 100644
--- a/website/content/en/layout/css/layout.css
+++ b/website/content/en/layout/css/layout.css
@@ -1,528 +1,533 @@
 /*
  * FreeBSD.org - Layout Styles
  *
  * $FreeBSD$
  */
 
 /* Container Definitions */
 
 /* Page Container */
 
 #containerwrap {
   text-align: center; /* Win IE5 */
 }
 
 #container {
   margin: 0em auto;
   width: 90%;
   max-width: 1600px;
   padding: 0;
   padding-top: 0px;
   padding-bottom: 15px;
   text-align: left; /* Win IE5 */
 }
 
 /* Header */
 
 #headercontainer {
   padding-bottom: 2px;
 }
 
 #header {
   position: relative;
   height: 75px;
   margin: 0;
   padding: 0;
   clear: both;
 }
 
 #headerlogoleft {
   position: relative;
   border: 0px;
   padding: 0px;
   top: 0px;
   float: left;
 }
 
 #headerlogoleft img {
   border: 0px;
 }
 
 #headerlogoright {
   position: relative;
   border: 0px;
   padding-left: 0px;
   float: right;
 }
 
 #headerlogoright img {
   border: 0px;
 }
 
 /* Search */
 
 @media screen {
 #search {
   text-align: right;
   padding: 0;
   color: #666;
 }
 
 #search form {
   margin: 0; /* need for IE Mac */
   text-align: right; /* need for IE Mac */
   white-space: nowrap; /* for Opera */
 }
 
 #search form label {
   color: #666;
 }
 
 #search form #submit {
   background: transparent;
   color: #fff;
   border-right: 1px solid #DADADA;
   border-bottom: 1px solid #DADADA;
   border-top: 1px solid #DADADA;
   border-left: 1px solid #DADADA;
   padding: 1px 5px 1px 5px;
 }
 
 #search form #words {
   width: 65%;
   border: 1px solid #DADADA;
   background: #FFFFFF;
   color: #666;
   padding: 2px 2px 2px 5px;
 }
 }
 
 @media print {
 #search { display: none; }
 }
 
 /* Mirror Select */
 
 #mirror {
   text-align: right;
   padding: 0;
   margin: 0;
   margin-top: 6px;
   color: #666;
 }
 
 #mirror form {
   padding-top: 5px;
   right: 0;
   margin: 0; /* need for IE Mac */
   text-align: right; /* need for IE Mac */
   white-space: nowrap; /* for Opera */
 }
 
 #mirror form label {
   color: #666;
   font-size: 0.8em;
 }
 
 #mirror form select {
   font-size: 0.8em;
 }
 
 #mirror form #mirrorsel {
   font-size: 0.8em;
   width: 150px;
   border: 1px solid #DADADA;
   background: #FFFFFF;
   color: #666;
 }
 
 #mirror input {
   font-size: 0.8em;
   background: transparent;
   color: #666;
   border: 1px solid #DADADA;
 }
 
 /* Content */
 
 #content {
   clear: both;
   display: block;
 }
 
 #frontcontainer {
   width: 100%;
 }
 
 #frontfeaturecontainer {
   clear: both;
 }
 
 #frontfeatureleft{
   width: 30%;
   margin: 0;
   padding: 0;
   float: left;
 }
 
 #frontfeatureleft h2 {
   border: none;
   margin-top: 0;
 }
 
 #frontfeatureleft p {
   margin: 0 0 1em 0;
 }
 
 	#frontfeaturecontent {
 	  margin: 10px 10px 10px 13px;
 	}
 
 #frontfeaturemiddle {
   float: left;
   margin-top: 20px;
-  background: url(../images/beastie.png) no-repeat top left;
+  background: url(../images/beastie.png) no-repeat center left;
   min-height: 196px;
   width: 30%;
 }
 
 #frontfeatureright {
   position: relative;
   border: 0px;
   padding: 0px;
   margin: 0px;
   width: 30%;
   float: right;
 }
 
 /* News/Events/Media/Security Box */
 
 #frontnemscontainer {
   width: 100%;
   background: #eee;
   display: inline;
   float: left;
   margin-top: 8px;
   margin-bottom: 8px;
 }
 
 #frontnews {
   width: 24%;
   margin: 0;
   padding: 0;
   float: left;
 }
 
 #frontnewscontent {
   margin: 17px 15px 24px 18px;
 }
 
 #frontevents {
   width: 24%;
   margin: 0;
   padding: 0;
   float: left;
 }
 
 #fronteventscontent {
   margin: 17px 15px 24px 14px;
 }
 
 #frontmedia {
   width: 24%;
   margin: 0;
   padding: 0;
   float: left;
 }
 
 #frontmediacontent {
   margin: 17px 15px 24px 14px;
 }
 
 #frontsecurity {
   width: 24%;
   margin: 0;
   padding: 0;
   float: left;
 }
 
 #frontsecuritycontent {
   margin: 17px 15px 24px 14px;
 }
 
 /* No way to get equal columns in pure CSS - setting height is a temporary hack */
 .frontseparator {
   width: 0.5%;
   height: 500px;
   margin: 0;
   padding: 0;
   background-color: #fff;
   float: left;
 }
 
 .newseventswrap {
   padding-left: 5px;
 }
 
 .newseventslist {
   list-style: none;
   margin: 0;
   padding: 0;
   display: inline;
 }
 
 .newseventslist img.rssimage {
   display: inline;
   border: 0;
   vertical-align: bottom;
 }
 
 .newseventslist li {
   padding: 0 0.3em 0 0.5em;
   display: inline;
   border-right: 1px solid #B6B6B6;
 }
 
 .newseventslist li a {
 }
 
 .newseventslist li.last-child {
   border-right: 0;
   padding-right: 0;
   display: inline-block;
   line-height: 0.9em;
 }
 
 .newseventslist li.first-child {
   margin: 0;
   padding-left: 12px;
   background-image: url(../images/blt_red_arrow.png);
   background-repeat: no-repeat;
   background-position: 0px 0.5em;
 }
 
 .newseventslist li.only-child {
   border-right: 0;
   padding-left: 0;
 }
 
 /* Shortcuts */
 
 #frontshortcuts {
   margin: 0;
   padding: 0;
   color: #666;
 }
 
 #frontshortcutscontent {
   float: right;
   margin: 0;
   padding: 0;
   padding-left: 15px;
   padding-top: 20px;
 }
 
 #frontshortcutslist {
   margin: 0;
   padding: 0;
   margin-left: 5px;
   margin-top: 5px;
   list-style: none;
 }
 
 #frontshortcutslist li {
   margin: 0;
   padding-left: 12px;
   background-image: url(../images/blt_red_arrow.png);
   background-repeat: no-repeat;
   background-position: 0px 0.5em;
 }
 
 /* Latest Releases */
 
 #frontreleases {
   padding: 0;
   margin: 8px;
-  margin-left: 190px;
+  margin-left: 210px;
   margin-top: 5px;
   padding-bottom: 20px;
   color: #666;
   width: 85%;
 }
 
 #frontreleasescontent {
   margin: 0;
   padding: 0;
 }
 
 #frontreleaseslist {
   margin: 0;
   padding: 0;
   margin-left: 5px;
   margin-top: 5px;
   list-style: none;
 }
 
 #frontreleaseslist li {
   margin: 0;
   padding-left: 12px;
   background-image: url(../images/blt_red_arrow.png);
   background-repeat: no-repeat;
   background-position: 0px 0.5em;
 }
 
 /* New User Box */
 
  /* height and width details */
 .frontnewtop div, .frontnewtop, .frontnewbot div, .frontnewbot {
   width: 100%;
   height: 12px;
 }
 
 .frontnewcontent {
   margin: 0;
   padding: 0;
   margin-top: -4px;
   margin-bottom: -4px;
   text-align: center;
   font-size: 1.1em;
   font-weight: bold;
 }
 
 .frontnewcontent a, .frontnewcontent a:link, .frontnewcontent a:visited, .frontnewcontent a:hover, .frontnewcontent a:active {
   color: #990000;
   text-decoration: none;
 }
 
 .frontnewroundbox {
   float: left;
   margin: 0;
   margin-top: 30px;
   padding: 0;
   width: 130px;
   background-color: #D8D8D8;
   border-radius: 10px;
 }
 
 /* Donate Button */
  /* height and width details */
 .frontdonatetop div, .frontdonatetop, .frontdonatebot div, .frontdonatebot {
   width: 20%;
   height: 10px;
   font-size: 1px;
   text-align: center;
 }
 
 .frontdonatecontent {
   margin: 0;
   padding: 0;
   margin-top: -4px;
   margin-bottom: -4px;
   text-align: center;
   font-size: 1.1em;
   font-weight: bold;
 }
 
 .frontdonatecontent a, .frontdonatecontent a:link, .frontdonatecontent a:visited, .frontdonatecontent a:hover, .frontdonatecontent a:active {
   color: #990000;
   text-decoration: none;
 }
 
 .frontdonateroundbox {
   margin-top: 0.5em;
   padding: 0;
   white-space: nowrap;
   background-color: white;
   border-radius: 10px;
 }
 
 /* Get FreeBSD Box */
 
  /* height and width details */
 .frontgettop div, .frontgettop, .frontgetbot div, .frontgetbot {
   width: 100%;
   height: 18px;
   font-size: 1px;
 }
 
 .frontgetcontent {
   margin: 0;
   padding: 0;
   margin-top: -8px;
   margin-bottom: -8px;
   text-align: center;
-  font-size: 1.4em;
+  font-size: 1.3em;
   font-weight: bold;
 }
 
 .frontgetcontent a, .frontgetcontent a:link, .frontgetcontent a:visited, .frontgetcontent a:hover, .frontgetcontent a:active {
   color: #990000;
   text-decoration: none;
 }
 
 .frontgetroundbox {
-  margin-top: 50px;
-  margin-left: 160px;
+  margin-top: 10px;
+  margin-left: 210px;
   padding: 0;
-  width: 190px;
-  background-color: #FACC2E;
+  width: 325px;
+  background-color: #facc2e;
   border-radius: 15px;
 }
 
+.frontgetroundbox.newtofreebsd {
+  margin-top: 50px;
+  background-color: #eee;
+}
+
 /* Secondary Pages */
 
 @media screen {
 #sidewrap {
   float: left;
   width: 166px;
   margin-top: 15px;
   margin-right: -170px;
 }
 
 #rightwrap {
   float: right;
   width: 166px;
   margin-left: 15px;
 }
 
 #contentwrap {
   margin-left: 170px;
   padding-top: 15px;
 }
 }
 
 @media print {
 #sidewrap, #rightwrap { display: none; }
 #contentwrap { margin-left: 16px; padding-top: 15px; }
 }
 
 /* Footer */
 
 #footer {
   font-size: 0.9em;
   text-align: center;
   color: #737373;
   line-height: 1.3em;
   padding-top: 5px;
   clear: both;
 }
 
 /* Misc Classes */
 
 .clearboth {
   clear: both;
   margin: 0;
   padding: 0;
 }
 
 .blockhide {
   display: none;
   height: 0;
   width: 0;
   overflow: hidden;
   position: absolute;  /* IE5 Mac */
 }
 
 img {
   border: 0;
 }
diff --git a/website/themes/beastie/layouts/index.html b/website/themes/beastie/layouts/index.html
index ed91a74815..0cf789eb0d 100755
--- a/website/themes/beastie/layouts/index.html
+++ b/website/themes/beastie/layouts/index.html
@@ -1,257 +1,257 @@
 {{ define "main" }}
 {{ $currentLang := $.Site.Language.Lang }}
 <div id="content">
   <div id="frontcontainer">
     <div id="frontfeaturecontainer">
       <div id="frontfeatureleft">
         <div id="frontfeaturecontent">
           <h1>{{ i18n "freebsdProject" }}</h1>
           <p>
             {{ i18n "freebsdDescription1" }}
             <a href={{ "platforms/" | absLangURL }}>{{ i18n "freebsdDescription2" }}</a>
             {{ i18n "freebsdDescription3" }}
             <a href={{ printf "%s%s%s" "https://docs.FreeBSD.org/" $currentLang "/articles/contributors/#staff-committers" }}>{{ i18n "freebsdDescription4" }}</a>
             {{ i18n "freebsdDescription5" }}
             <a href={{ printf "%s%s%s" "https://docs.FreeBSD.org/" $currentLang "/books/handbook/introduction/#introduction-nutshell-users" }}>{{ i18n "freebsdDescription6" }}</a>
             {{ i18n "freebsdDescription7" }}
           </p>
           <div id="txtfrontfeaturelink"> »<a href={{ "about/" | absLangURL }} title={{ i18n "learnMore" }}>{{ i18n "learnMore" }}</a></div>
           <div id="txtfrontjournalblock">
             <br />»
             <span id="txtfrontjournallink">
             {{ i18n "getThe" }} <a href="https://freebsdfoundation.org/our-work/journal/" title={{ i18n "journal" }}>{{ i18n "journal" }}</a>
             </span>
           </div>
         </div>
       </div>
       <div id="frontfeaturemiddle">
+        <div class="frontgetroundbox newtofreebsd">
+            <div class="frontgettop">
+                <div>
+                <b style="display: none">.</b>
+                </div>
+            </div>
+            <div class="frontgetcontent">
+                <a href={{ "projects/newbies/" | absLangURL }}>{{ i18n "newFreeBSD" }}</a>
+            </div>
+            <div class="frontgetbot">
+            <div>
+            <b style="display: none">.</b>
+            </div>
+        </div>
+        </div>
         <div class="frontgetroundbox">
           <div class="frontgettop">
             <div>
               <b style="display: none">.</b>
             </div>
           </div>
           <div class="frontgetcontent">
             <a href={{ "where/" | absLangURL }}>{{ i18n "downloadFreeBSD" }}</a>
           </div>
           <div class="frontgetbot">
             <div>
               <b style="display: none">.</b>
             </div>
           </div>
         </div>
         <div id="frontreleases">
           <div id="frontreleasescontent" class="txtshortcuts">
             <h2>
               <a href={{ "releases/" | absLangURL }}>{{ i18n "supportedReleases" }}</a>
             </h2>
             <ul id="frontreleaseslist">
               <li>
                 {{ i18n "production" }}:
                 <a href={{ index $.Site.Data.releases "u-rel133-announce" }}>{{ index $.Site.Data.releases "rel133-current" }}</a>,
                 <a href={{ index $.Site.Data.releases "u-rel140-announce" }}>{{ index $.Site.Data.releases "rel140-current" }}</a>,
                 <a href={{ index $.Site.Data.releases "u-rel141-announce" }}>{{ index $.Site.Data.releases "rel141-current" }}</a>
               </li>
             <!--
               <li>
                 {{ i18n "legacy" }}:
                 <a href={{ index $.Site.Data.releases "u-rel124-announce" }}>{{ index $.Site.Data.releases "rel124-current" }}</a>
               </li>
             -->
               {{ $betaUpcoming := index $.Site.Data.releases "beta-upcoming" }}
               {{ if ne $betaUpcoming "IGNORE" }}
                 <li>
                   {{ i18n "upcoming" }}:
                   <a href={{ index $.Site.Data.releases "u-betarel-schedule" }}>{{ index $.Site.Data.releases "betarel-current" }}</a>
                 </li>
               {{ end }}
               {{ $beta2Upcoming := index $.Site.Data.releases "beta2-upcoming" }}
               {{ if ne $beta2Upcoming "IGNORE" }}
                 <li>
                   {{ i18n "upcoming" }}:
                   <a href={{ index $.Site.Data.releases "u-betarel2-schedule" }}>{{ index $.Site.Data.releases "betarel2-current" }}</a>
                 </li>
               {{ end }}
               {{ $beta3Upcoming := index $.Site.Data.releases "beta3-upcoming" }}
               {{ if ne $beta3Upcoming "IGNORE" }}
                 <li>
                   {{ i18n "upcoming" }}:
                   <a href={{ index $.Site.Data.releases "u-betarel3-schedule" }}>{{ index $.Site.Data.releases "betarel3-current" }}</a>
                 </li>
               {{ end }}
               <li>
                 <a href={{ "security/" | absLangURL }}#sup>{{ i18n "supportLifecycle" }}</a>
               </li>
             </ul>
           </div>
         </div>
       </div>
       <div id="frontfeatureright">
         <div id="languagenav">
           <ul id="languagenavlist">
             <!--
             {{ range $.Site.Home.AllTranslations }}
               <li><a href="{{ .Permalink }}">{{ .Language }}</a></li>
             {{ end }}
             -->
             <li><a href="{{ $.Site.BaseURL }}">en</a></li>
             <li><a href="{{ $.Site.BaseURL }}zh-tw">zh-tw</a></li>
           </ul>
         </div>
         <div id="frontshortcuts">
           <div id="frontshortcutscontent" class="txtshortcuts">
             <h2>{{ i18n "shortcuts" }}</h2>
             <ul id="frontshortcutslist">
               <li>
                 <a href={{ "community/mailinglists/" | absLangURL }} title={{ i18n "mailingLists" }}>{{ i18n "mailingLists" }}</a>
               </li>
               <li>
                 <a href={{ "support/bugreports/" | absLangURL }} title={{ i18n "reportingProblems" }}>{{ i18n "reportingProblems" }}</a>
               </li>
               <li>
                 <a href={{ printf "%s%s%s" "https://docs.FreeBSD.org/" $currentLang "/books/faq/" }} title={{ i18n "FAQ" }}>{{ i18n "FAQ" }}</a>
               </li>
               <li>
                 <a href={{ printf "%s%s%s" "https://docs.FreeBSD.org/" $currentLang "/books/handbook/" }} title={{ i18n "handbook" }}>{{ i18n "handbook" }}</a>
               </li>
               <li>
                 <a href={{ "ports/" | absLangURL }} title={{ i18n "ports" }}>{{ i18n "ports" }}</a>
               </li>
             </ul>
           </div>
         </div>
-        <div class="frontnewroundbox">
-          <div class="frontnewtop">
-            <div>
-              <b style="display: none">.</b>
-            </div>
-          </div>
-          <div class="frontnewcontent">
-            <a href={{ "projects/newbies/" | absLangURL }}>{{ i18n "newFreeBSD" }}</a>
-          </div>
-          <div class="frontnewbot">
-            <div>
-              <b style="display: none">.</b>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
     {{ $language := "" }}
     {{ $currentLang := $.Site.Language.Lang }}
     {{ $siteBaseUrl := absLangURL ($.Site.BaseURL) }}
 
     {{ if ne $currentLang "en" }}
       {{ $language = $currentLang }}
     {{ end }}
     <div id="frontnemscontainer">
       <div id="frontnews">
         <div id="frontnewscontent" class="txtnewsevent">
           <h2>{{ i18n "latestNews" }}</h2>
           <div class="newseventswrap">
             {{ partial "news.html" . }}
             <div>
               <ul class="newseventslist">
                 <li class="first-child">
                   <a href={{ printf "%s%s/%s" $siteBaseUrl $language "news/newsflash/" }} title={{ i18n "more" }}>{{ i18n "more" }}</a>
                 </li>
                 <li class="last-child">
                   <a href="{{ absLangURL ($.Site.BaseURL) }}news/feed.xml" title={{ i18n "rssNews" }}>
                   <img class="rssimage" src="{{ absLangURL ($.Site.BaseURL) }}images/rss_icon.png" alt={{ i18n "rssNews" }} width="27" height="12" />
                   </a>
                 </li>
               </ul>
             </div>
           </div>
         </div>
       </div>
       <div class="frontseparator">
         <b style="display: none">.</b>
       </div>
       <div id="frontevents">
         <div id="fronteventscontent" class="txtnewsevent">
           <h2>{{ i18n "upcomingEvents" }}</h2>
           <div class="newseventswrap">
             {{ partial "events.html" . }}
             <div>
               <ul class="newseventslist">
                 <li class="first-child">
                   <a href={{ printf "%s%s/%s" $siteBaseUrl $language "events/" }} title={{ i18n "more" }}>{{ i18n "more" }}</a>
                 </li>
                 <li class="last-child">
                   <a href="{{ absLangURL ($.Site.BaseURL) }}events/feed.xml" title={{ i18n "rssEvents" }}>
                     <img class="rssimage" src="{{ absLangURL ($.Site.BaseURL) }}images/rss_icon.png" alt={{ i18n "rssEvents" }} width="27" height="12" />
                   </a>
                 </li>
               </ul>
             </div>
           </div>
         </div>
       </div>
       <div class="frontseparator">
         <b style="display: none">.</b>
       </div>
       <div id="frontmedia">
         <div id="frontmediacontent" class="txtnewsevent">
           <h2>{{ i18n "press" }}</h2>
           <div class="newseventswrap">
             {{ partial "press.html" . }}
             <div>
               <ul class="newseventslist">
                 <li class="first-child">
                   <a href={{ printf "%s%s/%s" $siteBaseUrl $language "press/" }} title={{ i18n "more" }}>{{ i18n "more" }}</a>
                 </li>
                 <li class="last-child">
                   <a href="{{ absLangURL ($.Site.BaseURL) }}press/feed.xml" title={{ i18n "rssMedia" }}>
                     <img class="rssimage" src="{{ absLangURL ($.Site.BaseURL) }}images/rss_icon.png" alt={{ i18n "rssMedia" }} width="27" height="12" />
                   </a>
                 </li>
               </ul>
             </div>
           </div>
         </div>
       </div>
       <div class="frontseparator">
         <b style="display: none">.</b>
       </div>
       <div id="frontsecurity">
         <div id="frontsecuritycontent" class="txtnewsevent">
           <h2>{{ i18n "securityAdvisories" }}</h2>
           <div class="newseventswrap">
             {{ partial "advisories.html" . }}
             <div>
               <ul class="newseventslist">
                 <li class="first-child">
                   <a href={{ printf "%s%s/%s" $siteBaseUrl $language "security/advisories/" }} title={{ i18n "more" }}>{{ i18n "more" }}</a>
                 </li>
                 <li class="last-child">
                   <a href="{{ absLangURL ($.Site.BaseURL) }}security/feed.xml" title={{ i18n "rssSecurity" }}>
                   <img class="rssimage" src="{{ absLangURL ($.Site.BaseURL) }}images/rss_icon.png" alt="News RSS Feed" width="27" height="12" />
                   </a>
                 </li>
               </ul>
             </div>
           </div>
           <br />
           <h2>{{ i18n "errataNotices" }}</h2>
           <div class="newseventswrap">
             {{ partial "errata-notices.html" . }}
             <div>
               <ul class="newseventslist">
                 <li class="first-child">
                   <a href={{ printf "%s%s/%s" $siteBaseUrl $language "security/notices/" }} title={{ i18n "more" }}>{{ i18n "more" }}</a>
                 </li>
                 <li class="last-child">
                   <a href="{{ absLangURL ($.Site.BaseURL) }}security/feed.xml" title={{ i18n "rssSecurity" }}>
                   <img class="rssimage" src="{{ absLangURL ($.Site.BaseURL) }}images/rss_icon.png" alt="News RSS Feed" width="27" height="12" />
                   </a>
                 </li>
               </ul>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
 {{ end }}
diff --git a/website/themes/beastie/static/css/layout.css b/website/themes/beastie/static/css/layout.css
index cf9e215e95..50f8625f7d 100644
--- a/website/themes/beastie/static/css/layout.css
+++ b/website/themes/beastie/static/css/layout.css
@@ -1,561 +1,566 @@
 /*
  * FreeBSD.org - Layout Styles
  *
  * $FreeBSD$
  */
 
 /* Container Definitions */
 
 /* Page Container */
 
 #container {
   margin: 0em auto;
   width: 90%;
   max-width: 1600px;
   text-align: left; /* Win IE5 */
 }
 
 /* Header */
 header {
   display: flex;
   flex-direction: row;
   height: 75px;
 }
 
 #headerlogoright {
   display: flex;
   flex-direction: column;
   margin-left: auto;
   align-items: center;
   justify-content: center;
 }
 
 /* Search */
 
 @media screen {
 #search {
   text-align: right;
   padding: 0;
   color: #666;
 }
 
 #search form {
   margin: 0; /* need for IE Mac */
   text-align: right; /* need for IE Mac */
   white-space: nowrap; /* for Opera */
 }
 
 #search form label {
   color: #666;
 }
 
 #search form #submit {
   background: transparent;
   color: #fff;
   border-right: 1px solid #DADADA;
   border-bottom: 1px solid #DADADA;
   border-top: 1px solid #DADADA;
   border-left: 1px solid #DADADA;
   padding: 1px 5px 1px 5px;
 }
 
 #search form #words {
   width: 65%;
   border: 1px solid #DADADA;
   background: #FFFFFF;
   color: #666;
   padding: 2px 2px 2px 5px;
 }
 }
 
 @media print {
 #search { display: none; }
 }
 
 /* Mirror Select */
 
 #mirror {
   text-align: right;
   padding: 0;
   margin: 0;
   margin-top: 6px;
   color: #666;
 }
 
 #mirror form {
   padding-top: 5px;
   right: 0;
   margin: 0; /* need for IE Mac */
   text-align: right; /* need for IE Mac */
   white-space: nowrap; /* for Opera */
 }
 
 #mirror form label {
   color: #666;
   font-size: 0.8em;
 }
 
 #mirror form select {
   font-size: 0.8em;
 }
 
 #mirror form #mirrorsel {
   font-size: 0.8em;
   width: 150px;
   border: 1px solid #DADADA;
   background: #FFFFFF;
   color: #666;
 }
 
 #mirror input {
   font-size: 0.8em;
   background: transparent;
   color: #666;
   border: 1px solid #DADADA;
 }
 
 /* Content */
 
 #content {
   clear: both;
   display: block;
 }
 
 #frontcontainer {
   width: 100%;
 }
 
 #frontfeaturecontainer {
   clear: both;
 }
 
 #frontfeatureleft{
   width: 30%;
   margin: 0;
   padding: 0;
   float: left;
 }
 
 #frontfeatureleft h2 {
   border: none;
   margin-top: 0;
 }
 
 #frontfeatureleft p {
   margin: 0 0 1em 0;
 }
 
 	#frontfeaturecontent {
 	  margin: 10px 10px 10px 13px;
 	}
 
 #frontfeaturemiddle {
   float: left;
   margin-top: 20px;
-  background: url(../images/beastie.png) no-repeat top left;
+  background: url(../images/beastie.png) no-repeat center left;
   min-height: 196px;
   width: 30%;
 }
 
 #frontfeatureright {
   position: relative;
   border: 0px;
   padding: 0px;
   margin: 0px;
   width: 30%;
   float: right;
 }
 
 .center {
   text-align: center;
 }
 
 .right {
     display: block;
     float: right;
 }
 
 .screen {
   overflow: auto;
   font-family: monospace;
   padding: 1ex;
   background-color: #edc;
   border: 1px solid #ccc;
   border-radius: 4px;
 }
 
 .screen pre, .programlisting pre {
   margin: 0;
 }
 
 .programlisting {
   overflow: auto;
   font-family: monospace;
   padding: 1ex;
   background-color: #eee;
   border: 1px solid #ccc;
   border-radius: 4px;
 }
 
 .warning {
     color: #9F1313;
     background: #f8e8e8;
     border: 1px solid #e59595;
     width: 90%;
     border-radius: 4px;
     padding: 0 2ex;
     margin: .75em 3em .75em 1em;
     line-height: 1.3;
 }
 
 .note {
   color: #222;
   background: #eee;
   border: 1px solid #ccc;
   width: 90%;
   border-radius: 4px;
   padding: 0 2ex;
   margin: .75em 3em .75em 1em;
   line-height: 1.3;
 }
 
 .important {
   font-style: italic;
   border: 1px solid #a00;
   border-left-color: rgb(170, 0, 0);
   border-left-style: solid;
   border-left-width: 1px;
   border-left: 12px solid #c00;
   width: 90%;
   border-radius: 4px;
   padding: 2ex;
   margin: .75em 3em .75em 1em;
   line-height: 1.3;
 }
 
 /* News/Events/Media/Security Box */
 
 #frontnemscontainer {
   width: 100%;
   background: #eee;
   display: inline;
   float: left;
   margin-top: 8px;
   margin-bottom: 8px;
 }
 
 #frontnews {
   width: 24%;
   margin: 0;
   padding: 0;
   float: left;
 }
 
 #frontnewscontent {
   margin: 17px 15px 24px 18px;
 }
 
 #frontevents {
   width: 24%;
   margin: 0;
   padding: 0;
   float: left;
 }
 
 #fronteventscontent {
   margin: 17px 15px 24px 14px;
 }
 
 #frontmedia {
   width: 24%;
   margin: 0;
   padding: 0;
   float: left;
 }
 
 #frontmediacontent {
   margin: 17px 15px 24px 14px;
 }
 
 #frontsecurity {
   width: 24%;
   margin: 0;
   padding: 0;
   float: left;
 }
 
 #frontsecuritycontent {
   margin: 17px 15px 24px 14px;
 }
 
 /* No way to get equal columns in pure CSS - setting height is a temporary hack */
 .frontseparator {
   width: 0.5%;
   height: 500px;
   margin: 0;
   padding: 0;
   background-color: #fff;
   float: left;
 }
 
 .newseventswrap {
   padding-left: 5px;
 }
 
 .newseventslist {
   list-style: none;
   margin: 0;
   padding: 0;
   display: inline;
 }
 
 .newseventslist img.rssimage {
   display: inline;
   border: 0;
   vertical-align: bottom;
 }
 
 .newseventslist li {
   padding: 0 0.3em 0 0.5em;
   display: inline;
   border-right: 1px solid #B6B6B6;
 }
 
 .newseventslist li a {
 }
 
 .newseventslist li.last-child {
   border-right: 0;
   padding-right: 0;
   display: inline-block;
   line-height: 0.9em;
 }
 
 .newseventslist li.first-child {
   margin: 0;
   padding-left: 12px;
   background-image: url(../images/blt_red_arrow.png);
   background-repeat: no-repeat;
   background-position: 0px 0.5em;
 }
 
 .newseventslist li.only-child {
   border-right: 0;
   padding-left: 0;
 }
 
 /* Shortcuts */
 
 #frontshortcuts {
   margin: 0;
   padding: 0;
   color: #666;
 }
 
 #frontshortcutscontent {
   float: right;
   margin: 0;
   padding: 0;
   padding-left: 15px;
   padding-top: 20px;
 }
 
 #frontshortcutslist {
   margin: 0;
   padding: 0;
   margin-left: 5px;
   margin-top: 5px;
   list-style: none;
 }
 
 #frontshortcutslist li {
   margin: 0;
   padding-left: 12px;
   background-image: url(../images/blt_red_arrow.png);
   background-repeat: no-repeat;
   background-position: 0px 0.5em;
 }
 
 /* Latest Releases */
 
 #frontreleases {
   padding: 0;
   margin: 8px;
-  margin-left: 190px;
+  margin-left: 210px;
   margin-top: 5px;
   padding-bottom: 20px;
   color: #666;
   width: 85%;
 }
 
 #frontreleasescontent {
   margin: 0;
   padding: 0;
 }
 
 #frontreleaseslist {
   margin: 0;
   padding: 0;
   margin-left: 5px;
   margin-top: 5px;
   list-style: none;
 }
 
 #frontreleaseslist li {
   margin: 0;
   padding-left: 12px;
   background-image: url(../images/blt_red_arrow.png);
   background-repeat: no-repeat;
   background-position: 0px 0.5em;
 }
 
 /* New User Box */
 
  /* height and width details */
 .frontnewtop div, .frontnewtop, .frontnewbot div, .frontnewbot {
   width: 100%;
   height: 12px;
 }
 
 .frontnewcontent {
   margin: 0;
   padding: 0;
   margin-top: -4px;
   margin-bottom: -4px;
   text-align: center;
   font-size: 1.1em;
   font-weight: bold;
 }
 
 .frontnewcontent a, .frontnewcontent a:link, .frontnewcontent a:visited, .frontnewcontent a:hover, .frontnewcontent a:active {
   color: #990000;
   text-decoration: none;
 }
 
 .frontnewroundbox {
   float: left;
   margin: 0;
   margin-top: 30px;
   padding: 0;
   width: 130px;
   background-color: #D8D8D8;
   border-radius: 10px;
 }
 
 /* Donate Button */
 .donate {
   background-color: white;
   border-radius: 10px;
   padding: 2% 8%;
   margin-bottom: 3%;
   text-align: center;
   font-weight: bold;
   cursor: pointer;
 }
 
 .donate a, .donate a:link, .donate a:visited, .donate a:hover, .donate a:active {
   color: #990000;
   text-decoration: none;
 }
 
 /* Get FreeBSD Box */
 
  /* height and width details */
 .frontgettop div, .frontgettop, .frontgetbot div, .frontgetbot {
   width: 100%;
   height: 18px;
   font-size: 1px;
 }
 
 .frontgetcontent {
   margin: 0;
   padding: 0;
   margin-top: -8px;
   margin-bottom: -8px;
   text-align: center;
-  font-size: 1.4em;
+  font-size: 1.3em;
   font-weight: bold;
 }
 
 .frontgetcontent a, .frontgetcontent a:link, .frontgetcontent a:visited, .frontgetcontent a:hover, .frontgetcontent a:active {
   color: #990000;
   text-decoration: none;
 }
 
 .frontgetroundbox {
-  margin-top: 50px;
-  margin-left: 160px;
+  margin-top: 10px;
+  margin-left: 210px;
   padding: 0;
-  width: 190px;
-  background-color: #FACC2E;
+  width: 325px;
+  background-color: #facc2e;
   border-radius: 15px;
 }
 
+.frontgetroundbox.newtofreebsd {
+  margin-top: 50px;
+  background-color: #eee;
+}
+
 /* Secondary Pages */
 
 @media screen {
 #sidewrap {
   float: left;
   width: 166px;
   margin-top: 15px;
   margin-right: -170px;
 }
 
 #rightwrap {
   float: right;
   width: 166px;
   margin-left: 15px;
 }
 
 #contentwrap {
   margin-left: 170px;
   padding-top: 15px;
 }
 }
 
 @media print {
 #sidewrap, #rightwrap { display: none; }
 #contentwrap { margin-left: 16px; padding-top: 15px; }
 }
 
 /* Footer */
 
 footer {
   font-size: 0.9em;
   text-align: center;
   color: #737373;
   line-height: 1.3em;
   padding-bottom: 15px;
   padding-top: 15px;
   clear: both;
 }
 
 /* Misc Classes */
 
 .clearboth {
   clear: both;
   margin: 0;
   padding: 0;
 }
 
 .blockhide {
   display: none;
   height: 0;
   width: 0;
   overflow: hidden;
   position: absolute;  /* IE5 Mac */
 }
 
 img {
   border: 0;
 }
 
 /* Table of contents */
 #toctitle {
     font-weight: bold;
     line-height: 1.3;
     margin: 1em 0;
     margin-left: 0;
     color: #990000;
     font-size: 115%;
 }