Medal styles + start working on menu

forum/skins/light/media/style/style.css

-@import "jquery.autocomplete.css";
 html {
 /*    color: #222222; */
     color: #333;
@@ -378,19 +377,23 @@ padding-top: 4px;
     float: right;
 }
 
-#top a {
+#top > * {
     clear: none;
     color: #333333;
     display: block;
     float: left;
     text-shadow: none;
     width: auto;
-    line-height: 40px;
     margin: 0;
     padding: 0 15px;
     text-decoration: none;
 }
 
+#top * {
+    line-height: 40px;
+    height: 40px;
+}
+
 #content {
     width: 985px;
     margin: 10px auto;
@@ -492,6 +495,10 @@ padding-top: 4px;
     border-top: 0;
 }
 
+.user-stats-table {
+    margin: 0 !important;
+}
+
 .user-stats-table .short-summary {
     width: 100%;
 }
@@ -501,6 +508,8 @@ padding-top: 4px;
     font-family: "Trebuchet MS", "segoe ui", arial, sans-serif;
     font-size: 17px;
     float: left;
+    width: 50%;
+    white-space: nowrap;
 }
 
 .short-summary h2 a:hover {
@@ -741,16 +750,17 @@ padding-top: 4px;
 }
 
 .medal {
-    background: none repeat scroll 0 0 #DD4818;
-    color: white;
-    font-size: 14px;
-    font-weight: bold;
-    line-height: 250%;
-    padding: 4px 12px 4px 6px;
-    border: 1px solid #DD4818;
+    white-space: nowrap;
+    color: #626262 !important;
+    margin: 0 3px 5px 0;
+    padding: 0px 8px 0px 2px;
+    display: inline-block;
+    line-height: 24px;
+    background-color: #E8E7E5;
+    text-shadow: 0 1px 0 white;
+    font-size: 12px;
     border-radius: 3px;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
+    border: 1px solid #E2E2E2;
 }
 
 a.medal {
@@ -758,14 +768,24 @@ a.medal {
     color: white;
 }
 
-a.medal:hover {
-    background-color: white;
-    color: #DD4818;
-    text-decoration: none;
-    border: 1px solid white;
-    border-radius: 3px;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
+.medal span, .bronze, .silver, .gold {
+    background: url("../images/badges.png");
+    text-indent: -10000px;
+    width: 18px;
+    min-height: 17px;
+    display: inline-block;
+    background-position-y: center;
+    background-repeat: no-repeat;
+}
+
+.badgecount {
+    margin-right: 10px;
+    margin-left: 2px;
+}
+
+#award-list p {
+    display: table-row;
+    width: auto !important;
 }
 
 .tabBar {
@@ -871,19 +891,8 @@ a.medal:hover {
     padding: 0 6px 0 15px;
 }
 
-.headNormal {
-    border-bottom: 1px solid #777777;
-    font-size: 15px;
-    font-weight: bold;
-    margin-bottom: 12px;
-    padding: 3px;
-    text-align: left;
-}
-
-.headUser {
+.headUser, .headNormal h1 {
     font-size: 2.4em;
-    float: left;
-    width: auto;
     margin: 0.4em 0 0.8em;
 }
 
@@ -945,7 +954,9 @@ ul.errorlist li {
 
 /* Fixes OSQA-143 IE8 text overflow issue */
 div.question-body p, div.answer-body p {
-    max-width: 700px;
+    font-size: 14px; 
+    word-wrap: break-word;
+    line-height: 17px;
 }
 
 .answered-by-owner {
@@ -1002,8 +1013,12 @@ div.question-body p, div.answer-body p {
 .badge-list {
     list-style-type: none;
     margin: 0;
+    white-space: nowrap;
+    width: 204px;
+    overflow: hidden;
 }
 
+
 /*.badge-list a {
     color: #DD4818;
 }
@@ -1203,6 +1218,7 @@ ins {
     font-family: Arial;
     font-size: 200%;
     font-weight: 700;
+    margin-right: 4px;
 }
 
 .scoreNumber {
@@ -1224,9 +1240,13 @@ ins {
     overflow: auto;
     padding: 10px;
     width: 90%;
-    border: 3px solid #DD4814;
-    background-color: #D7D7D7;
-    border-radius: 5px;
+    background: none repeat scroll 0 0 #f0f0f0;
+    border: 1px solid #e7e7e7;
+    margin-right: 1px;
+    box-shadow: none;
+    border-radius: 4px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
 }
 
 .user-edit-link {
@@ -1332,46 +1352,35 @@ ins {
     color: #333333;
 }
 
-.badge1 {
+.gold, .badge1 {
     color: #FFCC00;
+    background-position-x: -115px !important;
 }
 
 .silver, .badge2 {
     color: #CCCCCC;
+    background-position-x: -88px !important;
 }
 
 .bronze, .badge3 {
     color: #CC9933;
+    background-position: -61px !important;
 }
 
 .score, .accept_rate {
     color: #333333;
     font-size: 110%;
     font-weight: bold;
-    margin-left: 3px;
+    margin: 10px;
 }
 
 #subheader .score, .accept_rate {
     float: left;
-    line-height: 40px;
     margin-left: 0px;
     min-width: 20px;
     text-align: center;
-}
-
-#top .bronze, .badge3, #top .silver, .badge2 {
-    line-height: 40px;
-    margin-left: 0px;
-}
-
-#top .bronze, #top .silver {
-    float: left;
-}
-
-#subheader .badgecount {
-    float: left;
-    line-height: 40px;
-    margin-left: 0px;
+    height: 40px;
+    padding: 0;
 }
 
 #sub_header_options {
@@ -2089,6 +2098,25 @@ div.dialog, .context-menu-dropdown {
     cursor: pointer;
 }
 
+
+.context-menu-dropdown {
+    color: white;
+    display: inline-block;
+    font-size: 11px;
+    outline: none;
+    cursor: pointer;
+    text-align: center;
+    text-decoration: none;
+    padding: 1px 3px 3px 3px;
+    text-shadow: 0 1px 1px #BBB;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    border: 2px solid #969696;
+    background: #ADA69F url('../images/menu-dropdown.png') repeat-x left bottom;
+}
+
+
 div.dialog .dialog-wcwontent {
     padding: 12px 12px 42px 12px;
     z-index: 1000;
@@ -2147,10 +2175,9 @@ div.dialog.prompt .dialog-content select, div.dialog.prompt .dialog-content text
 .feed-icon {
     width: 14px;
     height: 14px;
-    float: left;
-    margin-right: 4px;
-    vertical-align: middle;
-    margin-top: 3px;
+    display: inline-block;
+    margin-left: 4px;
+    vertical-align: top;
 }
 
 .feed-icon-big {