! Linear gradients are supported without prefix in IE10, FF since FF17 and Opera since 12.1 provided the right format is used. Chrome supports it too, but some of the mobile browsers still need the -webkit prefix.

Signed-off-by: Peter Spicer <sleeping@myperch.org>

Themes/default/css/index.css

@@ -152,11 +152,8 @@ input:focus, textarea:focus, button:focus, select:focus, textarea.editor:focus {
 	border-bottom: 1px solid #aaa;
 	border-radius: 1px;
 	box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
-	background: linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -o-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -moz-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
 	background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -ms-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
+	background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
 }
 .button_submit:hover, .button_reset:hover, .button_link:hover {
 	color: #af6700;
@@ -164,11 +161,8 @@ input:focus, textarea:focus, button:focus, select:focus, textarea.editor:focus {
 	border-left: 1px solid #bbb;
 	border-top: 1px solid #aaa;
 	box-shadow: -1px -1px 2px rgba(0,0,0,0.07), -1px -2px 4px rgba(255,255,255,0.33) inset;
-	background: linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -o-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -moz-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
 	background: -webkit-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -ms-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
+	background: linear-gradient(to top, #FFFFFF 1%, #E2E9F3 70%);
 }
 a.button_link {
 	color: #000;
@@ -506,21 +500,15 @@ a img {
 	color: #444;
 	font-size: /*1.1em*/1em;
 	font-weight: bold;
-	background: linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
-	background: -o-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
-	background: -moz-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
 	background: -webkit-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
-	background: -ms-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
+	background: linear-gradient(to top, #FFFFFF 1%, #F1F3F5 96%);
 }
 .catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th {
 	color: #fff;
 	font-size: 1.1em;
 	font-weight: bold;
-	background: linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -o-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -moz-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
 	background: -webkit-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -ms-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
+	background: linear-gradient(to top, #FFFFFF 1%, #E2E9F3 70%);
 }
 
 /* adjust the table versions of headers */
@@ -617,11 +605,8 @@ div.pagesection div.floatright input, div.pagesection div.floatright select {
 	padding: 2px 7px 1px 7px;
 	margin: 5px 8px 0 0;
 	color: #222;
-	background: linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -o-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -moz-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
 	background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -ms-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
+	background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
 }
 .topbottom:hover {
 	text-decoration: none;
@@ -631,11 +616,8 @@ div.pagesection div.floatright input, div.pagesection div.floatright select {
 	border-left: 1px solid #bbb;
 	border-top: 1px solid #aaa;
 	box-shadow: -1px -1px 2px rgba(0,0,0,0.07), -1px -2px 4px rgba(255,255,255,0.33) inset;
-	background: linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -o-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -moz-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
 	background: -webkit-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -ms-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
+	background: linear-gradient(to top, #FFFFFF 1%, #E2E9F3 70%);
 }
 
 /* Sticky topics get a different background */
@@ -1176,11 +1158,8 @@ img.sort, .sort {
 	border-top: solid 1px #ccc;
 	border-radius: 2px 7px 0 4px;
 	box-shadow: 3px 3px 4px rgba(0,0,0,0.3);
-	background: linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -o-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -moz-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
 	background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -ms-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
+	background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
 }
 /* Level 2 link background. */
 .dropmenu li li {
@@ -1238,22 +1217,16 @@ img.sort, .sort {
 	border: 1px solid #cfcfcf;
 	border-top: 1px solid #d4dee6;
 	border-bottom: 1px solid #cbdae6;
-	background: linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -o-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -moz-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
 	background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -ms-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
+	background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
 }
 .dropmenu li li:hover>a, .dropmenu li li.sfhover a:focus, .dropmenu li li a:hover, .dropmenu li li a:focus {
 	color: #333;
 	text-decoration: none;
 	border: 1px solid #cfcfcf;
 	border-top: 1px solid #d4dee6;
-	background: linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -o-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -moz-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
 	background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -ms-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
+	background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
 }
 /* Reposition Level 2 submenu as visible on hover. */
 .dropmenu li:hover ul, .dropmenu li.sfhover ul {
@@ -1318,11 +1291,8 @@ img.sort, .sort {
 	overflow: visible;
 	color: #444;
 	font-size: 0.8em;
-	background: linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -o-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -moz-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
 	background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -ms-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
+	background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
 }
 /* Keep a consistent size when wrapped in pagesection. */
 .pagesection .buttonlist ul li a {
@@ -1335,11 +1305,8 @@ img.sort, .sort {
 	border-left: 1px solid #bbb;
 	border-top: 1px solid #aaa;
 	box-shadow: -1px -1px 2px rgba(0,0,0,0.07), -1px -2px 4px rgba(255,255,255,0.33) inset;
-	background: linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -o-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -moz-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
 	background: -webkit-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -ms-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
+	background: linear-gradient(to top, #FFFFFF 1%, #E2E9F3 70%);
 }
 .buttonlist ul li a span {
 	display: block;
@@ -1392,11 +1359,8 @@ img.sort, .sort {
 	padding: 0 4px;
 	border-bottom: 1px solid #bbb;
 	box-shadow: 0 1px 4px rgba(0,0,0,0.16);
-	background: linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -o-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -moz-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
 	background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -ms-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
+	background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
 }
 #top_section .frame{
 	clear: both;
@@ -1445,11 +1409,8 @@ img.sort, .sort {
 	padding: 1px 2px;
 	border-radius: 3px;
 	color: #333;
-	background: linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -o-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -moz-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
 	background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -ms-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
+	background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
 }
 /* @todo In practice it may be better to set a different value for Firefox and Opera only, */
 /*	just to save a little bit of code. Will wait for Opera detection on body tag. */
@@ -1460,11 +1421,8 @@ img.sort, .sort {
 #search_form .button_submit:hover {
 	color: #a85400;
 	text-decoration: none;
-	background: linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -o-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -moz-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
 	background: -webkit-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -ms-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
+	background: linear-gradient(to top, #FFFFFF 1%, #E2E9F3 70%);
 }
 /* The logo and slogan. */
 #header {
@@ -1513,11 +1471,8 @@ img#smflogo {
 #inner_section {
 	padding: 12px 10px 2px 10px;
 	border-radius: 6px 6px 0 0;
-	background: linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 98%);
-	background: -o-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 98%);
-	background: -moz-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 98%);
 	background: -webkit-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 98%);
-	background: -ms-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 98%);
+	background: linear-gradient(to top, #FFFFFF 1%, #F1F3F5 98%);
 }
 #inner_section:after {
 	content:"";
@@ -1595,11 +1550,8 @@ ul li.greeting {
 	border-radius: 2px;
 	box-shadow: 0 -2px 2px rgba(0,0,0,0.08);
 	-moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing: border-box;
-	background: linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
-	background: -o-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
-	background: -moz-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
 	background: -webkit-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
-	background: -ms-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
+	background: linear-gradient(to top, #FFFFFF 1%, #F1F3F5 96%);
 }
 .navigate_section ul li {
 	float: left;
@@ -1774,11 +1726,8 @@ ul li.greeting {
 }
 .table_list .icon, .table_list .info, .table_list .stats, .table_list .lastpost {
 	border-top: double #ddd;
-	background: linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
-	background: -o-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
-	background: -moz-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
 	background: -webkit-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
-	background: -ms-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
+	background: linear-gradient(to top, #FFFFFF 1%, #F1F3F5 96%);
 }
 /* Hiding unwanted border repeats. */
 .table_list .content tr:first-child .icon, .table_list .content tr:first-child .info,
@@ -2187,11 +2136,8 @@ div#pollmoderation {
 }
 .dropmenu  li ul li:hover {
 	border: none;
-	background: linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -o-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -moz-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
 	background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -ms-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
+	background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
 }
 .poster .dropmenu  li ul li.im_icons, .poster .dropmenu   ul ol li {
 	padding: 3px;
@@ -2403,11 +2349,8 @@ ul.quickbuttons li.inline_mod_check {
 	color: #222;
 	margin: 3px 19px;
 	overflow: visible;
-	background: linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -o-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -moz-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
 	background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -ms-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
+	background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
 }
 .quickbuttons li:first-child {
 	border-radius: 4px 1px 1px 4px;
@@ -2419,11 +2362,8 @@ ul.quickbuttons li.inline_mod_check {
 	border-bottom: 1px solid #aaa;
 	border-radius: 1px;
 	box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
-	background: linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -o-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -moz-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
 	background: -webkit-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
-	background: -ms-linear-gradient(bottom, #FFFFFF 1%, #E2E9F3 70%);
+	background: linear-gradient(to top, #FFFFFF 1%, #E2E9F3 70%);
 }
 .quickbuttons li.quick_edit, .quickbuttons li.post_options {
 	padding: 0 6px 0 22px;
@@ -2470,11 +2410,8 @@ ul.quickbuttons li.inline_mod_check {
 	border-top: solid 1px #bbb;
 	border-radius: 4px 2px 4px 0;
 	box-shadow: 2px 3px 3px rgba(0,0,0,0.2);
-	background: linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -o-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -moz-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
 	background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -ms-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
+	background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
 }
 .quickbuttons li:hover ul, .quickbuttons li.sfhover ul {
 	left: auto;
@@ -2493,11 +2430,8 @@ ul.quickbuttons li.inline_mod_check {
 	border: 1px solid #cfcfcf;
 	border-top: 1px solid #d4dee6;
 	border-bottom: 1px solid #cbdae6;
-	background: linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -o-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -moz-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
 	background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -ms-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
+	background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
 }
 .quickbuttons ul li a, .quickbuttons ul li a:focus {
 	padding: 0 6px 0 26px;
@@ -2509,11 +2443,8 @@ ul.quickbuttons li.inline_mod_check {
 /* Note: The next declarations are for keyboard access with js disabled. */
 .quickbuttons ul li a:focus {
 	margin: 0 -9910px 0 9910px;
-	background: linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -o-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -moz-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
 	background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -ms-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
+	background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
 }
 /* Cancel for hover and/or js access. */
 .quickbuttons ul li:hover a:focus, .quickbuttons ul li.sfhover a:focus {
@@ -3989,11 +3920,8 @@ span.hidelink {
 	border-radius: 7px 7px 3px 3px;
 	max-height: none!important; /* Is this declaration necessary? None is the default anyway. */
 	overflow: visible!important;
-	background: linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -o-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -moz-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
 	background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
-	background: -ms-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
+	background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
 }
 .popup_heading
 {
@@ -4017,11 +3945,8 @@ span.hidelink {
 	border-bottom: 1px solid #ccc;
 	border-radius: 6px 6px 2px 2px;
 	box-shadow: 0 -2px 3px rgba(0,0,0,0.15), 0 1px 1px rgba(255,255,255,0.2);
-	background: linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
-	background: -o-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
-	background: -moz-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
 	background: -webkit-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
-	background: -ms-linear-gradient(bottom, #FFFFFF 1%, #F1F3F5 96%);
+	background: linear-gradient(to top, #FFFFFF 1%, #F1F3F5 96%);
 }
 .popup_heading .hide_popup
 {
@@ -4064,10 +3989,7 @@ span.hidelink {
 	height: 15pt;
 	background-color: #c1ffc1;
 	background-image: -webkit-linear-gradient(top, #c1ffc1, green);
-	background-image: -moz-linear-gradient(top, #c1ffc1, green);
-	background-image: -ms-linear-gradient(top, #c1ffc1, green);
-	background-image: -o-linear-gradient(top, #c1ffc1, green);
-	background-image: linear-gradient(top, #c1ffc1, green);
+	background-image: linear-gradient(to bottom, #c1ffc1, green);
 	border-radius: 3px;
 	z-index: 1;
 }
@@ -4075,10 +3997,7 @@ span.hidelink {
 	height: 15pt;
 	background-color: #98b8f4;
 	background-image: -webkit-linear-gradient(top, #98b8f4, blue);
-	background-image: -moz-linear-gradient(top, #98b8f4, blue);
-	background-image: -ms-linear-gradient(top, #98b8f4, blue);
-	background-image: -o-linear-gradient(top, #98b8f4, blue);
-	background-image: linear-gradient(top, #98b8f4, blue);
+	background-image: linear-gradient(to bottom, #98b8f4, blue);
 	border-radius: 3px;
 	z-index: 1;
 }