Replace old elements with one for new navbar

I independently developed a new style while retaining a similar look
which removed the flat metro-like style and added depth. Also included
is the old css (just because I'm a packrat during development and I wasn't
totally sure that my custom style would work right away).

assets/css/elements.css

@@ -35,6 +35,10 @@ body{
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 15px rgba(94, 125, 142, 0.9) !important;
 }
 
+.navbar-nav a:focus{
+  background: rgba(0, 0, 0, 0.275) !important;
+}
+
 #selected{
   background: rgba(0, 0, 0, 0.275);
   -webkit-box-shadow: 0 8px 6px -6px rgba(94, 125, 142, 0.9);
@@ -127,27 +131,36 @@ ul.nav li.dropdown:hover > ul.dropdown-menu {
   color: #eee;
 }
 
+.form-shorten #radio-center .btn:checked{
+  border: 1px solid rgba(200, 200, 200, 0.64);
+  background-color: #1e3148;
+}
+
 .form-shorten input[type="text"], .form-shorten textarea{
   position: relative;
   font-size: 14px;
   padding: 7px;
+  margin-bottom: -1px;
+  box-shadow: 0;
+  border: 1px solid rgba(200, 200, 200, 0.64);
+  padding: 6px 0px 6px 6px;
+  resize: none;
+  
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
 }
 
-.form-shorten input[type="text"]:focus,{
+.form-shorten input[type="text"]:focus, .form-shorten textarea:focus{
   z-index: 2;
-}
+  border: 1px solid rgba(200, 200, 200, 0.64);
-
+  box-shadow: 0;
-.form-shorten input[type="text"], .form-shorten textarea{
-  margin-bottom: -1px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
 }
 
 .form-shorten .radio-center input[type="radio"]:hover{
-  color:#200;
+  background:#200;
 }
 
 .form-shorten .btn-primary{
@@ -157,12 +170,21 @@ ul.nav li.dropdown:hover > ul.dropdown-menu {
   -moz-transition: all 0.30s ease-in-out;
   -ms-transition: all 0.30s ease-in-out;
   -o-transition: all 0.30s ease-in-out;
+  padding-bottom: 5px;
 }
 .form-shorten .btn-primary:hover{
   background-color: #3c6190;
   border: 1px solid rgba(81, 203, 238, 1);
 }
 
+.form-shorten input[type="radio"]{
+  display:none;
+}
+
+.form-shorten .fbtn{
+  width:58.47% !important;
+}
+
 #message{
   float: center;
   text-align: center;
@@ -243,8 +265,8 @@ input[type=text], textarea, input[type=password] {
 }
  
 input[type=text]:focus, textarea:focus, input[type=password]:focus {
-  box-shadow: 0 0 5px rgba(106, 90, 205, .5);
+  box-shadow: 0 0 5px rgba(200, 200, 200, 0.64);
-  border: 1px solid rgba(106, 90, 205, 1);
+  border: 1px solid rgba(200, 200, 200, 0.64);
   padding: 6px 0px 6px 6px;
 }
 

assets/css/elements.css.old

@@ -0,0 +1,235 @@
+.hidden { display: none; }
+.unhidden { display: block; }
+     
+body{
+  line-height:1;
+  font-family:"Lucida Grande", Arial, Helvetica, Sans-Serif;
+  background-color: #434C56;
+  background-image: url(../images/body.jpg);
+}
+      
+.navbar-wrapper {
+  position: relative;
+  z-index: 15;
+}
+
+.navbar{
+  background: rgba(34, 34, 34, 0.5);
+}
+
+.navbar-nav a{
+  -webkit-transition: all 0.30s ease-in-out;
+  -moz-transition: all 0.30s ease-in-out;
+  -ms-transition: all 0.30s ease-in-out;
+  -o-transition: all 0.30s ease-in-out;
+}
+
+.navbar-nav a:hover{
+  background-color: #000;
+  color: #248;
+  webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 15px rgba(94, 125, 142, 0.9) !important;
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 15px rgba(94, 125, 142, 0.9) !important;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 15px rgba(94, 125, 142, 0.9) !important;
+}
+
+#selected{
+  -webkit-box-shadow: 0 8px 6px -6px rgba(94, 125, 142, 0.9);
+     -moz-box-shadow: 0 8px 6px -6px rgba(94, 125, 142, 0.9);
+          box-shadow: 0 8px 6px -6px rgba(94, 125, 142, 0.9);
+}
+
+/* Set widths on the navbar form inputs since otherwise they're 100% wide */
+.navbar-form input[type="text"], .navbar-form input[type="password"] {
+  width: 140px;
+}
+
+.dropdown-menu{
+  background-color: rgba(34, 34, 34, 0.7);
+  color: #ffffff;
+}
+
+.dropdown-menu li a{
+  color: #ffffff;
+}
+
+#profile-pic{
+  max-height: 18px;
+  max-width: 18px;
+  border-radius: 20%;
+  -webkit-border-radius: 20%;
+  -moz-border-radius: 20%;
+  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
+  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
+  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
+}
+
+#uname-dropdown{
+  color: rgb(96, 123, 152);
+}
+
+#uname-dropdown:hover{
+  color: rgb(152, 123, 96);
+}
+
+#logout-link:hover{
+  color: red;
+  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
+  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
+  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
+}
+
+#wrap {
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
+  margin: 0 auto -46px;
+  padding: 0 0 46px; 
+}
+
+#note{
+  color: #eee;
+  font-size: 12px;
+  margin: 0 auto;
+  padding: 4px;
+  text-align: center;
+  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
+  width: 400px;
+}
+
+.form-shorten {
+  max-width: 600px;
+  padding: 15px;
+  margin: 0 auto;
+}
+
+.form-shorten .form-shorten-heading{
+  margin-bottom: 10px;
+  color: #eee;
+}
+
+.form-shorten .radio-center .btn{
+  color: #eee;
+}
+
+.form-shorten input[type="text"], .form-shorten textarea{
+  position: relative;
+  font-size: 14px;
+  padding: 7px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.form-shorten input[type="text"]:focus,{
+  z-index: 2;
+}
+
+.form-shorten input[type="text"], .form-shorten textarea{
+  margin-bottom: -1px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.form-shorten .radio-center input[type="radio"]:hover{
+  color:#200;
+}
+
+.form-shorten .btn-primary{
+  background-color: #333;
+  border: 1px solid #444;
+  -webkit-transition: all 0.30s ease-in-out;
+  -moz-transition: all 0.30s ease-in-out;
+  -ms-transition: all 0.30s ease-in-out;
+  -o-transition: all 0.30s ease-in-out;
+}
+.form-shorten .btn-primary:hover{
+  background-color: #3c6190;
+  border: 1px solid rgba(81, 203, 238, 1);
+}
+
+#message{
+  float: center;
+  text-align: center;
+  color: #bbb;
+  padding-left: 25.6% !important;
+}
+
+#message #error{
+  float: center;
+  text-align: center;
+  background: rgba(203, 52, 52, 0.7);
+  color: #fff;
+  border-radius: 5px;
+  padding: 5px;
+  width: 66%;
+}
+
+#message #success{
+  float: center;
+  text-align: center;
+  background: rgba(0, 158, 0, 0.7);
+  color: #fff;
+  border-radius: 5px;
+  padding: 5px;
+  width: 66%;
+}
+
+#message a{
+  color: #76b4ef;
+}
+
+#message a:hover{
+  color: #e2e6e9;
+}
+
+#footer {
+  height: 46px;
+  background-color: rgba(51, 51, 51, 0.5);
+  color: #eee;
+}
+ 
+@media (max-width: 767px) {
+  #footer {
+    margin-left: -17px;
+    margin-right: -20px;
+    padding-left: 17px;
+    padding-right: 20px;
+  }
+}
+
+#privacy-link, #tos-link, #reg-link{
+  float: right;
+  padding-right: 10px;
+  color: #eee;
+}
+
+#privacy-link:hover, #tos-link:hover, #reg-link:hover{
+  -webkit-box-shadow: 0 8px 6px -6px rgba(94, 125, 142, 0.9);
+     -moz-box-shadow: 0 8px 6px -6px rgba(94, 125, 142, 0.9);
+          box-shadow: 0 8px 6px -6px rgba(94, 125, 142, 0.9);
+  -webkit-transition: all 0.90s ease-in-out;
+  -moz-transition: all 0.90s ease-in-out;
+  -ms-transition: all 0.90s ease-in-out;
+  -o-transition: all 0.90s ease-in-out;
+}
+
+input[type=text], textarea {
+  -webkit-transition: all 0.30s ease-in-out;
+  -moz-transition: all 0.30s ease-in-out;
+  -ms-transition: all 0.30s ease-in-out;
+  -o-transition: all 0.30s ease-in-out;
+  outline: none;
+  border: 1px solid #DDDDDD;
+}
+ 
+input[type=text]:focus, textarea:focus {
+  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
+  border: 1px solid rgba(81, 203, 238, 1);
+  padding: 6px 0px 6px 6px;
+}
+
+h2 {
+  background: -webkit-linear-gradient(#eee, #aaa);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}