Merge new Metro Theme as default Theme

WebsitePanel/Sources/WebsitePanel.WebPortal/App_Containers/Default/Browse.ascx

@@ -1,18 +1,9 @@
 <%@ Control Language="C#" AutoEventWireup="false" %>
 <div class="BrowseContainer">
-    <table class="Header" cellpadding="0" cellspacing="0">
-        <tr>
-            <td class="HeaderLeft"></td>
-            <td class="HeaderTitle">
-                <div class="HeaderIcon">
-                    <asp:Image ID="imgModuleIcon" runat="server" ImageAlign="AbsMiddle" Width="48" Height="48" />
+  <div class="Header">
+    <asp:Image ID="imgModuleIcon" runat="server" alt="" />                
+    <asp:Label ID="lblModuleTitle" runat="server"></asp:Label>
   </div>
-                
-                <asp:Label ID="lblModuleTitle" runat="server" CssClass="Head"></asp:Label>
-            </td>
-            <td class="HeaderRight"></td>
-        </tr>
-    </table>
   <div class="Content">
     <asp:PlaceHolder ID="ContentPane" runat="server"/>
   </div>

WebsitePanel/Sources/WebsitePanel.WebPortal/App_Containers/Default/Edit.ascx

@@ -1,18 +1,9 @@
 <%@ Control language="C#" AutoEventWireup="false" %>
 <div class="EditContainer">
-    <table class="Header" cellpadding="0" cellspacing="0">
-        <tr>
-            <td class="HeaderLeft"></td>
-            <td class="HeaderTitle">
-                <div class="HeaderIcon">
-                    <asp:Image ID="imgModuleIcon" runat="server" ImageAlign="AbsMiddle" Width="48px" Height="48px" />
+  <div class="Header">
+    <asp:Image ID="imgModuleIcon" runat="server" alt="" />
+    <asp:Label ID="lblModuleTitle" runat="server"></asp:Label>
   </div>
-                
-                <asp:Label ID="lblModuleTitle" runat="server" CssClass="Head"></asp:Label>
-            </td>
-            <td class="HeaderRight"></td>
-        </tr>
-    </table>
   <div class="Content">
     <asp:PlaceHolder ID="ContentPane" runat="server"/>
   </div>

WebsitePanel/Sources/WebsitePanel.WebPortal/App_Containers/Default/Login.ascx

@@ -1,17 +1,9 @@
 <%@ Control language="C#" AutoEventWireup="false" %>
 <div class="LoginContainer">
-    <table class="Header" cellpadding="0" cellspacing="0">
-        <tr>
-            <td class="HeaderLeft"></td>
-            <td class="HeaderTitle">
-				<div class="HeaderIcon">
-					<asp:Image ID="imgModuleIcon" runat="server" ImageAlign="AbsMiddle" Width="48" Height="48" />
+  <div class="Header">
+    <asp:Image ID="imgModuleIcon" runat="server" alt="" />
+    <asp:Label ID="lblModuleTitle" runat="server"></asp:Label>
   </div>
-                <asp:Label ID="lblModuleTitle" runat="server" CssClass="Head"></asp:Label>
-            </td>
-            <td class="HeaderRight"></td>
-        </tr>
-    </table>
   <div class="Content">
     <asp:PlaceHolder ID="ContentPane" runat="server"/>
   </div>

WebsitePanel/Sources/WebsitePanel.WebPortal/App_Containers/Default/Right.ascx

@@ -1,5 +1,7 @@
 <%@ Control Language="C#" AutoEventWireup="false" %>
+xxxx
 <div class="RightContainer">
+xxxxxx
     <div class="Top">
 		<div class="Title">
 			<asp:Image ID="imgModuleIcon" runat="server" ImageAlign="AbsMiddle" Width="48px" Height="48px" />

WebsitePanel/Sources/WebsitePanel.WebPortal/App_Skins/Default/Login.ascx

@@ -4,9 +4,7 @@
 
 <div id="LoginSkinOutline">
   <div id="LoginSkinContent">
-		<div id="HeaderLogin">
-			<a href='<%= Page.ResolveUrl("~/") %>'><asp:Image runat="server" SkinID="Logo" /></a>
-		</div>
+    <a href='<%= Page.ResolveUrl("~/") %>'><asp:Image runat="server" SkinID="Logo" alt="" /></a>
     <div id="ContentLogin">
       <asp:PlaceHolder ID="ContentPane" runat="server"></asp:PlaceHolder>
     </div>

WebsitePanel/Sources/WebsitePanel.WebPortal/App_Themes/Default/Styles/Containers.css

@@ -1,278 +1,40 @@
 /* BROWSE MIDDLE */
-.BrowseContainer
-{
-	margin-bottom: 15px;
-}
-
-.BrowseContainer .Header
-{
-	width: 100%;
-}
-
-.BrowseContainer .HeaderLeft
-{
-	width: 6px;
-	height: 27px;
-	background: transparent url(../images/module_header_left.gif) left top no-repeat;
-}
-
-.BrowseContainer .HeaderRight
-{
-	width: 6px;
-	height: 27px;
-	background: transparent url(../images/module_header_right.gif) right top no-repeat;
-}
-
-.BrowseContainer .HeaderIcon
-{
-	float: left;
-	margin-right: 5px;
-}
-
-.BrowseContainer .HeaderTitle
-{
-	background: #FCFCFC url(../images/module_header_bkg.gif) left top repeat-x;
-	padding: 6px 4px 4px 4px;
-	font-family: Arial;
-	font-size: 9pt;
-	font-weight: bold;
-	width: auto;
-}
-
-.BrowseContainer .Content
-{
-	clear: both;
-	border: solid 1px #7F7F7F;
-	border-top: none;
-	background-color: #FCFCFC;
-}
-
-
-/* EDIT */
-.EditContainer
-{
-	width: 100%;
-	margin-left: auto;
-	margin-right: auto;
-	margin-top: 20px;
-	margin-bottom: 20px;
-}
-
-.EditContainer .Header
-{
-	width: 100%;
-}
-
-.EditContainer .HeaderLeft
-{
-	width: 6px;
-	height: 27px;
-	background: transparent url(../images/module_header_left.gif) left top no-repeat;
-}
-
-.EditContainer .HeaderRight
-{
-	width: 6px;
-	height: 27px;
-	background: transparent url(../images/module_header_right.gif) right top no-repeat;
-}
-
-.EditContainer .HeaderIcon
-{
-	float: left;
-	margin-right: 5px;
-}
-
-.EditContainer .HeaderTitle
-{
-	background: #FCFCFC url(../images/module_header_bkg.gif) left top repeat-x;
-	padding: 6px 4px 4px 4px;
-	font-family: Arial;
-	font-size: 9pt;
-	font-weight: bold;
-	width: auto;
-}
-
-.EditContainer .Content
-{
-	clear: both;
-	border: solid 1px #7F7F7F;
-	border-top: none;
-	background-color: #FCFCFC;
-}
-
-/* RIGHT */
-.RightContainer
-{
-}
-
-.RightContainer .Title
-{
-	background: #4F7BBE url(../images/side_module_left_curve.gif) left top no-repeat;
-	padding: 3px;
-	font-family: Arial;
-	font-size: 9pt;
-	font-weight: bold;
-	color: #ffffff;
-	margin-right: 5px;
-}
-
-.RightContainer .Top
-{
-	background: #4F7BBE url(../images/side_module_right_curve.gif) right top no-repeat;
-}
-
-.RightContainerContent
-{
-	border: solid 1px #BABABA;
-	border-top: none;
-	background-color: #FCFCFC;
-	padding: 5px;
-	margin-bottom: 10px;
-}
-
-/* LOGIN */
-.LoginContainer
-{
-	width: 550px;
-	margin-left: auto;
-	margin-right: auto;
-	margin-top: 40px;
-	margin-bottom: 90px;
-}
-
-.LoginContainer .Header
-{
-	width: 100%;
-}
-
-.LoginContainer .HeaderLeft
-{
-	width: 6px;
-	height: 27px;
-	background: transparent url(../images/module_header_left.gif) left top no-repeat;
-}
-
-.LoginContainer .HeaderRight
-{
-	width: 6px;
-	height: 27px;
-	background: transparent url(../images/module_header_right.gif) right top no-repeat;
-}
-
-.LoginContainer .HeaderIcon
-{
-	float: left;
-	margin-right: 5px;
-}
-
-.LoginContainer .HeaderTitle
-{
-	background: #FCFCFC url(../images/module_header_bkg.gif) left top repeat-x;
-	padding: 6px 4px 4px 4px;
-	font-family: Arial;
-	font-size: 9pt;
-	font-weight: bold;
-	width: auto;
-}
-
-.LoginContainer .Content
-{
-	padding-top: 10px;
-	clear: both;
-	border: solid 1px #7F7F7F;
-	border-top: none;
-	background-color: #FCFCFC;
-	text-align: center;
-}
-
+.BrowseContainer, .EditContainer {margin:0 10px 10px 10px;}
 
+.LoginContainer .Header, .BrowseContainer .Header, .EditContainer .Header {width:100%; overflow:hidden; margin-bottom:10px;}
+.LoginContainer .Header img, .BrowseContainer .Header img, .EditContainer .Header img {float:left; opacity:0.8;}
+.LoginContainer .Header span, .BrowseContainer .Header span, .EditContainer .Header span {font-size:26px; line-height:44px; font-weight:300; color:#333;}
+.LoginContainer .Content, .BrowseContainer .Content, .EditContainer .Content {clear:both}
 
 /* POPUP */
-.PopupContainer
-{
-	width: 450px;
-	margin-left: auto;
-	margin-right: auto;
-	margin-top: 40px;
-	margin-bottom: 150px;
-}
-
-.PopupContainer .Header
-{
-	width: 100%;
-}
-
-.PopupContainer .HeaderLeft
-{
-	width: 6px;
-	height: 27px;
-	background: transparent url(../images/module_header_left.gif) left top no-repeat;
-}
-
-.PopupContainer .HeaderRight
-{
-	width: 6px;
-	height: 27px;
-	background: transparent url(../images/module_header_right.gif) right top no-repeat;
-}
-
-.PopupContainer .HeaderIcon
-{
-	float: left;
-	margin-right: 5px;
-}
-
-.PopupContainer .HeaderTitle
-{
-	background: #FCFCFC url(../images/module_header_bkg.gif) left top repeat-x;
-	padding: 6px 4px 4px 4px;
-	font-family: Arial;
-	font-size: 9pt;
-	font-weight: bold;
-	width: auto;
-}
-
-.PopupContainer .Content
-{
-	clear: both;
-	border: solid 1px #7F7F7F;
-	border-top: none;
-	background-color: #FCFCFC;
-}
-
-.PopupContainer .Body
-{
-	padding-left: 20px;
-	font-size: 8pt;
-}
-
-
+.PopupContainer {background:#fff; padding:20px 40px;}
+.PopupContainer .Header {width:100%;}
+.PopupContainer .HeaderLeft, .PopupContainer .HeaderRight {display:none;}
+.PopupContainer .HeaderIcon {}
+.PopupContainer .HeaderTitle {text-align:center;}
+.PopupContainer .Content {}
+.PopupContainer .Body {}
 
 /* Exchange Module Styles */
 .ExchangeHeader
 {
 	float: left;
-    background: transparent url(../images/Exchange/main_bg_sh.gif) left top repeat-y;
     background-size:991px 1px;  
 }
 .ExchangeBody
 {
 	float: left;
-    background: transparent url(../images/Exchange/module_header_sh.gif) left -35px no-repeat;
     background-size:991px 142px;  
 	clear: both;
 }
 .ExchangeBottom
 {
 	float: left;
-    background: transparent url(../images/Exchange/module_footer_sh.gif) left bottom no-repeat; 
     background-size:991px 5px; 
 }
 .ExchangeFooter
 {
 	float: left;
-    background: transparent url(../images/Exchange/bottom_bg_sh.gif) left top repeat-y; 
     background-size:991px 1px;
 	padding-bottom: 10px;
 }
@@ -297,7 +59,7 @@
 
 #ExchangeContainer .Header .Breadcrumb
 {
-	font-family: Tahoma;
+	/*font-family: Tahoma;*/
 	font-size: 9pt;
 	color: #000000;
 	text-decoration: none;
@@ -337,7 +99,7 @@
 
 #ExchangeContainer .Title
 {
-	font-family: Arial;
+	/*font-family: Arial;*/
 	font-size: 14pt;
     margin-top: 9px;
 	margin-bottom: 7px;
@@ -346,7 +108,7 @@
 #ExchangeContainer .MenuGroup 
 {
 	
-	font-family: Tahoma;
+	/*font-family: Tahoma;*/
 	font-size: 8pt;
 	color: #000000;
 	text-decoration:none;
@@ -364,7 +126,7 @@
 #ExchangeContainer .Menu A
 {
 	padding-left: 20px;
-	font-family: Tahoma;
+	/*font-family: Tahoma;*/
 	font-size: 8pt;
 	color: #000000;
 	text-decoration: none;
@@ -436,7 +198,7 @@
 
 #VpsContainer .Header .Breadcrumb
 {
-	font-family: Arial;
+	/*font-family: Arial;*/
 	font-size: 9pt;
 	color: #000000;
 	text-decoration: none;
@@ -476,7 +238,7 @@
 
 #VpsContainer .Title
 {
-	font-family: Arial;
+	/*font-family: Arial;*/
 	font-size: 12pt;
 	font-weight: bold;
 	margin-bottom: 5px;
@@ -486,7 +248,7 @@
 
 #VpsContainer .SubTitle
 {
-	font-family: Arial;
+	/*font-family: Arial;*/
 	font-size: 11pt;
 	font-weight: bold;
 	margin-bottom: 5px;
@@ -495,7 +257,7 @@
 #VpsContainer .MenuGroup 
 {
 	
-	font-family: Tahoma;
+	/*font-family: Tahoma;*/
 	font-size: 8pt;
 	color: #000000;
 	text-decoration:none;
@@ -513,7 +275,7 @@
 #VpsContainer .Menu A
 {
 	padding-left: 20px;
-	font-family: Tahoma;
+	/*font-family: Tahoma;*/
 	font-size: 8pt;
 	color: #000000;
 	text-decoration: none;
@@ -549,33 +311,9 @@
 }
 
 /* POPUP */
-.Popup
-{
-	width: 450px;
-	margin-left: auto;
-	margin-right: auto;
-	margin-top: 40px;
-	margin-bottom: 150px;
-}
-
-.Popup-Header
-{
-	width: 100%;
-}
-
-.Popup-HeaderLeft
-{
-	width: 6px;
-	height: 27px;
-	background: transparent url(../images/module_header_left.gif) left top no-repeat;
-}
-
-.Popup-HeaderRight
-{
-	width: 6px;
-	height: 27px;
-	background: transparent url(../images/module_header_right.gif) right top no-repeat;
-}
+.Popup {width:450px; margin:40px auto 150px auto;}
+.Popup-Header {width: 100%;}
+.Popup-HeaderLeft, .Popup-HeaderRight {display:none;}
 
 .Popup-HeaderIcon
 {
@@ -587,7 +325,7 @@
 {
 	background: #FCFCFC url(../images/module_header_bkg.gif) left top repeat-x;
 	padding: 6px 4px 4px 4px;
-	font-family: Arial;
+	/*font-family: Arial;*/
 	font-size: 9pt;
 	font-weight: bold;
 	width: auto;

WebsitePanel/Sources/WebsitePanel.WebPortal/App_Themes/Default/Styles/Grids.css

@@ -3,110 +3,22 @@
 /* This style sheet is intended to contain OFTEN CHANGED rules used when the GridView control adapter is enabled. */
 /* Empty rules are provided merely as a convenience for your future use or experimentation. */
 
-.LightGridView .AspNet-GridView
-{
-    width: 100%;
-}
+.LightGridView .AspNet-GridView {width:100%;}
+.AspNet-GridView input[type=image] {vertical-align:-3px; margin:0 !important;}
+.LightGridView .AspNet-GridView div.AspNet-GridView-Pagination {padding:8px; font-size:8pt;}
+.LightGridView .AspNet-GridView table tbody tr td {padding:5px; text-align:left;}
+.NormalGridView .AspNet-GridView {width:100%; margin-top:10px;}
+.NormalGridView .AspNet-GridView table {width:100%;}
+.NormalGridView .AspNet-GridView div.AspNet-GridView-Empty {padding:30px 0 50px 0; font-size:10pt; text-align:center; border-radius:2px; color:#ccc;}
 
-.LightGridView .AspNet-GridView div.AspNet-GridView-Pagination
-{
-    padding: 8px;
-	background: #F7F6F3 url(../images/grid_footer_bkg.gif) left top repeat-x;
-	font-size: 8pt;
-}
+.NormalGridView .AspNet-GridView div.AspNet-GridView-Pagination {margin:30px 0; font-size:11px; text-align:center; white-space:nowrap; cursor:default; line-height:23px; color:#313131;}
+.NormalGridView .AspNet-GridView div.AspNet-GridView-Pagination a, .NormalGridView .AspNet-GridView div.AspNet-GridView-Pagination span {display:inline-block; width:26px; height:24px;border:1px solid #e6e6e6; cursor:pointer; margin:0 2px; border-radius:1px;}
+.NormalGridView .AspNet-GridView div.AspNet-GridView-Pagination span {font-weight:600; color:#222; border:none;}
 
-.LightGridView .AspNet-GridView table tbody tr td
-{
-    background: White;
-    padding: 5px;
-    text-align: left;
-    border-bottom: 1px solid #e0e0e0;
-}
-
-
-
-
-.NormalGridView .AspNet-GridView
-{
-    width: 100%;
-}
-
-.NormalGridView .AspNet-GridView table
-{
-    border-left: solid 1px #CCCCCC;
-    border-bottom: solid 1px #CCCCCC;
-    width: 100%;
-}
-
-.NormalGridView .AspNet-GridView div.AspNet-GridView-Empty
-{
-	border: solid 1px #CCCCCC;
-    padding: 10px;
-    font-size: 8pt;
-}
-
-.NormalGridView .AspNet-GridView div.AspNet-GridView-Pagination
-{
-	border-left: solid 1px #CCCCCC;
-    border-bottom: solid 1px #CCCCCC;
-    border-right: solid 1px #CCCCCC;
-    padding: 4px;
-	background: #F7F6F3 url(../images/grid_footer_bkg.gif) left top repeat-x;
-	/*border-top: solid 1px #98B3C3;*/
-}
-
-.NormalGridView .AspNet-GridView div.AspNet-GridView-Pagination a,
-.NormalGridView .AspNet-GridView div.AspNet-GridView-Pagination span
-{
-    color: #505050;
-    font-size: 8pt;
-    font-weight: normal;
-    padding-left: 1px;
-    padding-right: 1px;
-    text-decoration: none;
-}
-
-.NormalGridView .AspNet-GridView div.AspNet-GridView-Pagination span
-{
-	font-weight: bold;
-	color: #000000;
-}
-
-.NormalGridView .AspNet-GridView table thead tr th
-{
-    background: #efefef url(../images/grid_header.gif) left top repeat-x;
-	border-top: solid 1px #CCCCCC;
-    border-bottom: solid 1px #CCCCCC;
-    border-right: solid 1px #CCCCCC;
-    text-align: left;
-    vertical-align: middle;
-    padding-left: 5px;
-    padding-right: 5px;
-    height: 22px;
-	font-family: Tahoma;
-	font-size: 8pt;
-    color: #000000;
-}
-
-.NormalGridView .AspNet-GridView table thead tr th span
-{
-	white-space: nowrap;
-}
-
-.NormalGridView .AspNet-GridView table thead tr th a
-{
-    color: #000000;
-	padding-top: 4px;
-	padding-bottom: 4px;
-    width: 100%;
-    display: inline-block;
-}
-
-.NormalGridView .AspNet-GridView table thead tr th.AspNet-GridView-Sort
-{
-	background: #efefef url(../images/grid_header_sort.gif) left top repeat-x;
-    border: solid 1px #96D9F9;
-}
+.NormalGridView .AspNet-GridView table thead tr th {color:#333; background-color:#f5f5f5; border-color:#ddd; text-align:left; font-size:13px; font-weight:300; border-bottom:1px solid #ddd;}
+.NormalGridView .AspNet-GridView table thead tr th span {white-space:nowrap;}
+.NormalGridView .AspNet-GridView table thead tr th a {width:100%; display:inline-block; text-transform:uppercase; padding:10px 5px; color:#333;}
+.NormalGridView .AspNet-GridView table thead tr th.AspNet-GridView-Sort {font-weight:600;}
 
 .NormalGridView .AspNet-GridView table thead.Centered th
 {
@@ -125,30 +37,12 @@
 	font-weight: normal;
 }
 
-.NormalGridView .AspNet-GridView table tbody tr td
-{
-	font-family: Tahoma;
-	font-size: 8pt;
-    color: #333333;
-    background: White;
-    padding: 5px;
-    /*border-bottom: solid 1px #CCCCCC;*/
-    border-right: solid 1px #CCCCCC;
-    text-align: left;
-}
-
-.NormalGridView .AspNet-GridView table tbody tr.AspNet-GridView-Alternate td
-{
-    background: #F7F6F3;
-}
-
-.NormalGridView .AspNet-GridView table tbody tr.AspNet-GridView-Selected td
-{
-}
-
-.NormalGridView .AspNet-GridView table tfoot tr td
-{
-}
+.NormalGridView .AspNet-GridView table tbody tr td {font-weight:300; font-size:14px; color:#888; text-align:left; padding:10px 5px; border-bottom:solid 1px #ddd; /*white-space:nowrap;*/}
+.NormalGridView .AspNet-GridView table tbody tr td a {display:inline-block;}
+.NormalGridView .AspNet-GridView table tbody tr td a:hover {text-decoration:underline;}
+.NormalGridView .AspNet-GridView table tbody tr.AspNet-GridView-Alternate td {background:#f9f9f9;}
+.NormalGridView .AspNet-GridView table tbody tr.AspNet-GridView-Selected td {}
+.NormalGridView .AspNet-GridView table tfoot tr td {}
 
 .SelectedRow TD
 {
@@ -167,7 +61,7 @@
 
 .RadioButtonsGridView .AspNet-GridView table tbody tr td
 {
-	font-family: Tahoma;
+	/*font-family: Tahoma;*/
 	font-size: 9pt;
     color: #333333;
     background: White;
@@ -188,7 +82,7 @@
 	background: #f5f5f5;
 	padding: 4px;
 	border-top: solid 1px #CCCCCC;
-	font-family: Tahoma;
+	/*font-family: Tahoma;*/
 	font-size: 9pt;
 	color: #333333;
     text-align: left;