Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » ASP.NET » General » Downloads
 
Add your own
alternative version

MVC4 Mobile Friendly Web Applications

, 13 Sep 2012
Mobile enable your ASP.NET MVC4 Web applications
MvcMobileFriendly.zip
MvcMobileFriendly
MvcDesktop.v11.suo
MvcDesktop
App_Start
Content
images
ajax-loader.gif
ajax-loader.png
icons-18-black.png
icons-18-white.png
icons-36-black.png
icons-36-white.png
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
minified
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
Controllers
favicon.ico
Filters
Global.asax
Images
accent.png
ajax-loader.gif
ajax-loader.png
bullet.png
heroAccent.png
icons-18-black.png
icons-18-white.png
icons-36-black.png
icons-36-white.png
orderedList0.png
orderedList1.png
orderedList2.png
orderedList3.png
orderedList4.png
orderedList5.png
orderedList6.png
orderedList7.png
orderedList8.png
orderedList9.png
Models
MvcDesktop.csproj.user
Properties
Scripts
Views
Account
Home
Shared
packages
DotNetOpenAuth.AspNet.4.0.3.12153
DotNetOpenAuth.AspNet.4.0.3.12153.nupkg
lib
net40-full
DotNetOpenAuth.AspNet.dll
DotNetOpenAuth.Core.4.0.3.12153
DotNetOpenAuth.Core.4.0.3.12153.nupkg
lib
net40-full
DotNetOpenAuth.Core.dll
DotNetOpenAuth.OAuth.Consumer.4.0.3.12153
DotNetOpenAuth.OAuth.Consumer.4.0.3.12153.nupkg
lib
net40-full
DotNetOpenAuth.OAuth.Consumer.dll
DotNetOpenAuth.OAuth.Core.4.0.3.12153
DotNetOpenAuth.OAuth.Core.4.0.3.12153.nupkg
lib
net40-full
DotNetOpenAuth.OAuth.dll
DotNetOpenAuth.OpenId.Core.4.0.3.12153
DotNetOpenAuth.OpenId.Core.4.0.3.12153.nupkg
lib
net40-full
DotNetOpenAuth.OpenId.dll
DotNetOpenAuth.OpenId.RelyingParty.4.0.3.12153
DotNetOpenAuth.OpenId.RelyingParty.4.0.3.12153.nupkg
lib
net40-full
DotNetOpenAuth.OpenId.RelyingParty.dll
EntityFramework.5.0.0
Content
App.config.transform
Web.config.transform
EntityFramework.5.0.0.nupkg
lib
net40
EntityFramework.dll
net45
EntityFramework.dll
tools
EntityFramework.PowerShell.dll
EntityFramework.PowerShell.Utility.dll
EntityFramework.PS3.psd1
EntityFramework.psd1
EntityFramework.psm1
init.ps1
install.ps1
migrate.exe
jQuery.1.7.1.1
Content
Scripts
jQuery.1.7.1.1.nupkg
Tools
common.ps1
install.ps1
uninstall.ps1
jquery.mobile.1.1.1
content
Content
images
ajax-loader.gif
ajax-loader.png
icons-18-black.png
icons-18-white.png
icons-36-black.png
icons-36-white.png
Scripts
jquery.mobile.1.1.1.nupkg
jQuery.UI.Combined.1.8.20.1
Content
Content
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
minified
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
Scripts
jQuery.UI.Combined.1.8.20.1.nupkg
jQuery.Validation.1.9.0.1
Content
Scripts
jQuery.Validation.1.9.0.1.nupkg
knockoutjs.2.1.0
Content
Scripts
knockoutjs.2.1.0.nupkg
Microsoft.AspNet.Mvc.4.0.20710.0
lib
net40
System.Web.Mvc.dll
Microsoft.AspNet.Mvc.4.0.20710.0.nupkg
Microsoft.AspNet.Razor.2.0.20710.0
lib
net40
System.Web.Razor.dll
Microsoft.AspNet.Razor.2.0.20710.0.nupkg
Microsoft.AspNet.Web.Optimization.1.0.0
lib
net40
System.Web.Optimization.dll
Microsoft.AspNet.Web.Optimization.1.0.0.nupkg
Microsoft.AspNet.WebApi.4.0.20710.0
Microsoft.AspNet.WebApi.4.0.20710.0.nupkg
Microsoft.AspNet.WebApi.Client.4.0.20710.0
lib
net40
System.Net.Http.Formatting.dll
Microsoft.AspNet.WebApi.Client.4.0.20710.0.nupkg
Microsoft.AspNet.WebApi.Core.4.0.20710.0
content
web.config.transform
lib
net40
System.Web.Http.dll
Microsoft.AspNet.WebApi.Core.4.0.20710.0.nupkg
Microsoft.AspNet.WebApi.WebHost.4.0.20710.0
lib
net40
System.Web.Http.WebHost.dll
Microsoft.AspNet.WebApi.WebHost.4.0.20710.0.nupkg
Microsoft.AspNet.WebPages.2.0.20710.0
lib
net40
System.Web.Helpers.dll
System.Web.WebPages.Deployment.dll
System.Web.WebPages.dll
System.Web.WebPages.Razor.dll
Microsoft.AspNet.WebPages.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.Data.2.0.20710.0
lib
net40
WebMatrix.Data.dll
Microsoft.AspNet.WebPages.Data.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.OAuth.2.0.20710.0
lib
net40
Microsoft.Web.WebPages.OAuth.dll
Microsoft.AspNet.WebPages.OAuth.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.WebData.2.0.20710.0
lib
net40
WebMatrix.WebData.dll
Microsoft.AspNet.WebPages.WebData.2.0.20710.0.nupkg
Microsoft.jQuery.Unobtrusive.Ajax.2.0.20710.0
Content
Scripts
Microsoft.jQuery.Unobtrusive.Ajax.2.0.20710.0.nupkg
Microsoft.jQuery.Unobtrusive.Validation.2.0.20710.0
Content
Scripts
Microsoft.jQuery.Unobtrusive.Validation.2.0.20710.0.nupkg
Microsoft.Net.Http.2.0.20710.0
lib
net40
System.Net.Http.dll
System.Net.Http.WebRequest.dll
net45
_._
Microsoft.Net.Http.2.0.20710.0.nupkg
Microsoft.Web.Infrastructure.1.0.0.0
lib
net40
Microsoft.Web.Infrastructure.dll
Microsoft.Web.Infrastructure.1.0.0.0.nupkg
Modernizr.2.5.3
Content
Scripts
Modernizr.2.5.3.nupkg
Newtonsoft.Json.4.5.6
lib
net40
Newtonsoft.Json.dll
Newtonsoft.Json.4.5.6.nupkg
WebGrease.1.1.0
lib
Antlr3.Runtime.dll
WebGrease.dll
tools
WG.exe
WebGrease.1.1.0.nupkg
MvcMobileFriendlyV1_1-noexe.zip
MvcDesktop.v11.suo
ajax-loader.gif
ajax-loader.png
icons-18-black.png
icons-18-white.png
icons-36-black.png
icons-36-white.png
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
favicon.ico
Global.asax
accent.png
ajax-loader.gif
ajax-loader.png
bullet.png
heroAccent.png
icons-18-black.png
icons-18-white.png
icons-36-black.png
icons-36-white.png
orderedList0.png
orderedList1.png
orderedList2.png
orderedList3.png
orderedList4.png
orderedList5.png
orderedList6.png
orderedList7.png
orderedList8.png
orderedList9.png
MvcDesktop.csproj.user
DotNetOpenAuth.AspNet.4.0.3.12153.nupkg
DotNetOpenAuth.Core.4.0.3.12153.nupkg
DotNetOpenAuth.OAuth.Consumer.4.0.3.12153.nupkg
DotNetOpenAuth.OAuth.Core.4.0.3.12153.nupkg
DotNetOpenAuth.OpenId.Core.4.0.3.12153.nupkg
DotNetOpenAuth.OpenId.RelyingParty.4.0.3.12153.nupkg
App.config.transform
Web.config.transform
EntityFramework.5.0.0.nupkg
EntityFramework.PS3.psd1
EntityFramework.psd1
EntityFramework.psm1
init.ps1
install.ps1
jQuery.1.7.1.1.nupkg
common.ps1
install.ps1
uninstall.ps1
ajax-loader.gif
ajax-loader.png
icons-18-black.png
icons-18-white.png
icons-36-black.png
icons-36-white.png
jquery.mobile.1.1.1.nupkg
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
jQuery.UI.Combined.1.8.20.1.nupkg
jQuery.Validation.1.9.0.1.nupkg
knockoutjs.2.1.0.nupkg
Microsoft.AspNet.Mvc.4.0.20710.0.nupkg
Microsoft.AspNet.Razor.2.0.20710.0.nupkg
Microsoft.AspNet.Web.Optimization.1.0.0.nupkg
Microsoft.AspNet.WebApi.4.0.20710.0.nupkg
Microsoft.AspNet.WebApi.Client.4.0.20710.0.nupkg
web.config.transform
Microsoft.AspNet.WebApi.Core.4.0.20710.0.nupkg
Microsoft.AspNet.WebApi.WebHost.4.0.20710.0.nupkg
Microsoft.AspNet.WebPages.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.Data.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.OAuth.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.WebData.2.0.20710.0.nupkg
Microsoft.jQuery.Unobtrusive.Ajax.2.0.20710.0.nupkg
Microsoft.jQuery.Unobtrusive.Validation.2.0.20710.0.nupkg
_._
Microsoft.Net.Http.2.0.20710.0.nupkg
Microsoft.Web.Infrastructure.1.0.0.0.nupkg
Modernizr.2.5.3.nupkg
Newtonsoft.Json.4.5.6.nupkg
WebGrease.1.1.0.nupkg
MvcMobileFriendlyV1_1.zip
MvcDesktop.v11.suo
App_Data
ajax-loader.gif
ajax-loader.png
icons-18-black.png
icons-18-white.png
icons-36-black.png
icons-36-white.png
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
favicon.ico
Global.asax
accent.png
ajax-loader.gif
ajax-loader.png
bullet.png
heroAccent.png
icons-18-black.png
icons-18-white.png
icons-36-black.png
icons-36-white.png
orderedList0.png
orderedList1.png
orderedList2.png
orderedList3.png
orderedList4.png
orderedList5.png
orderedList6.png
orderedList7.png
orderedList8.png
orderedList9.png
MvcDesktop.csproj.user
DotNetOpenAuth.AspNet.4.0.3.12153.nupkg
DotNetOpenAuth.AspNet.dll
DotNetOpenAuth.Core.4.0.3.12153.nupkg
DotNetOpenAuth.Core.dll
DotNetOpenAuth.OAuth.Consumer.4.0.3.12153.nupkg
DotNetOpenAuth.OAuth.Consumer.dll
DotNetOpenAuth.OAuth.Core.4.0.3.12153.nupkg
DotNetOpenAuth.OAuth.dll
DotNetOpenAuth.OpenId.Core.4.0.3.12153.nupkg
DotNetOpenAuth.OpenId.dll
DotNetOpenAuth.OpenId.RelyingParty.4.0.3.12153.nupkg
DotNetOpenAuth.OpenId.RelyingParty.dll
App.config.transform
Web.config.transform
EntityFramework.5.0.0.nupkg
EntityFramework.dll
EntityFramework.dll
EntityFramework.PowerShell.dll
EntityFramework.PowerShell.Utility.dll
EntityFramework.PS3.psd1
EntityFramework.psd1
EntityFramework.psm1
init.ps1
install.ps1
migrate.exe
jQuery.1.7.1.1.nupkg
common.ps1
install.ps1
uninstall.ps1
ajax-loader.gif
ajax-loader.png
icons-18-black.png
icons-18-white.png
icons-36-black.png
icons-36-white.png
jquery.mobile.1.1.1.nupkg
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
jQuery.UI.Combined.1.8.20.1.nupkg
jQuery.Validation.1.9.0.1.nupkg
knockoutjs.2.1.0.nupkg
System.Web.Mvc.dll
Microsoft.AspNet.Mvc.4.0.20710.0.nupkg
System.Web.Razor.dll
Microsoft.AspNet.Razor.2.0.20710.0.nupkg
System.Web.Optimization.dll
Microsoft.AspNet.Web.Optimization.1.0.0.nupkg
Microsoft.AspNet.WebApi.4.0.20710.0.nupkg
System.Net.Http.Formatting.dll
Microsoft.AspNet.WebApi.Client.4.0.20710.0.nupkg
web.config.transform
System.Web.Http.dll
Microsoft.AspNet.WebApi.Core.4.0.20710.0.nupkg
System.Web.Http.WebHost.dll
Microsoft.AspNet.WebApi.WebHost.4.0.20710.0.nupkg
System.Web.Helpers.dll
System.Web.WebPages.Deployment.dll
System.Web.WebPages.dll
System.Web.WebPages.Razor.dll
Microsoft.AspNet.WebPages.2.0.20710.0.nupkg
WebMatrix.Data.dll
Microsoft.AspNet.WebPages.Data.2.0.20710.0.nupkg
Microsoft.Web.WebPages.OAuth.dll
Microsoft.AspNet.WebPages.OAuth.2.0.20710.0.nupkg
WebMatrix.WebData.dll
Microsoft.AspNet.WebPages.WebData.2.0.20710.0.nupkg
Microsoft.jQuery.Unobtrusive.Ajax.2.0.20710.0.nupkg
Microsoft.jQuery.Unobtrusive.Validation.2.0.20710.0.nupkg
System.Net.Http.dll
System.Net.Http.WebRequest.dll
_._
Microsoft.Net.Http.2.0.20710.0.nupkg
Microsoft.Web.Infrastructure.dll
Microsoft.Web.Infrastructure.1.0.0.0.nupkg
Modernizr.2.5.3.nupkg
Newtonsoft.Json.dll
Newtonsoft.Json.4.5.6.nupkg
Antlr3.Runtime.dll
WebGrease.dll
WG.exe
WebGrease.1.1.0.nupkg
html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

a {
    color: #333;
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    text-decoration: underline;
}

    a:link, a:visited,
    a:active, a:hover {
        color: #333;
    }

    a:hover {
        background-color: #c7d1d6;
    }

header, footer, hgroup,
nav, section {
    display: block;
}

mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }


/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
}

#body {
    background-color: #efeeef;
    clear: both;
    padding-bottom: 35px;
}

    .main-content {
        background: url("../Images/accent.png") no-repeat;
        padding-left: 10px;
        padding-top: 30px;
    }

    .featured + .main-content {
        background: url("../Images/heroAccent.png") no-repeat;
    }

header .content-wrapper {
    padding-top: 20px; 
}

footer {
    clear: both;
    background-color: #e2e2e2;
    font-size: .8em;
    height: 100px;
}


/* site title
----------------------------------------------------------*/
.site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0;
}

.site-title a, .site-title a:hover, .site-title a:active {
    background: none;
    color: #c8c8c8;
    outline: none;
    text-decoration: none;
}


/* login
----------------------------------------------------------*/
#login {
    display: block;
    font-size: .85em;
    margin: 0 0 10px;
    text-align: right;
}

    #login a {
        background-color: #d3dce0;
        margin-left: 10px;
        margin-right: 3px;
        padding: 2px 3px;
        text-decoration: none;
    }

    #login a.username {
        background: none;
        margin: 0;
        padding: 0;
        text-decoration: underline;
    }

    #login ul {
        margin: 0;
    }

    #login li {
        display: inline;
        list-style: none;
    }


/* menu
----------------------------------------------------------*/
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}

    ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 15px;
    }

        ul#menu li a {
            background: none;
            color: #999;
            text-decoration: none;
        }

        ul#menu li a:hover {
            color: #333;
            text-decoration: none;
        }


/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
    background-color: #fff;
}

    .featured .content-wrapper {
        background-color: #7ac0da;
        background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
        background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        color: #3e5667;
        padding: 20px 40px 30px 40px;
    }

        .featured hgroup.title h1, .featured hgroup.title h2 {
            color: #fff;
        }

        .featured p {
            font-size: 1.1em;
        }

/* page titles */
hgroup.title {
    margin-bottom: 10px;
}

hgroup.title h1, hgroup.title h2 {
    display: inline;
}

hgroup.title h2 {
    font-weight: normal;
    margin-left: 3px;
}

/* features */
section.feature {
    width: 300px;
    float: left;
    padding: 10px;
}

/* ordered list */
ol.round {
    list-style-type: none;
    padding-left: 0;
}

    ol.round li {
        margin: 25px 0;
        padding-left: 45px;
    }

        ol.round li.zero {
            background: url("../Images/orderedList0.png") no-repeat;
        }

        ol.round li.one {
            background: url("../Images/orderedList1.png") no-repeat;
        }

        ol.round li.two {
            background: url("../Images/orderedList2.png") no-repeat;
        }

        ol.round li.three {
            background: url("../Images/orderedList3.png") no-repeat;
        }

        ol.round li.four {
            background: url("../Images/orderedList4.png") no-repeat;
        }

        ol.round li.five {
            background: url("../Images/orderedList5.png") no-repeat;
        }

        ol.round li.six {
            background: url("../Images/orderedList6.png") no-repeat;
        }

        ol.round li.seven {
            background: url("../Images/orderedList7.png") no-repeat;
        }

        ol.round li.eight {
            background: url("../Images/orderedList8.png") no-repeat;
        }

        ol.round li.nine {
            background: url("../Images/orderedList9.png") no-repeat;
        }

/* content */
article {
    float: left;
    width: 70%;
}

aside {
    float: right;
    width: 25%;
}

    aside ul {
        list-style: none;
        padding: 0;
    }

        aside ul li {
            background: url("../Images/bullet.png") no-repeat 0 50%;
            padding: 2px 0 2px 20px;
        }

.label {
    font-weight: 700;
}

/* login page */
#loginForm {
    border-right: solid 2px #c8c8c8;
    float: left;
    width: 55%;
}

    #loginForm .validation-error {
        display: block;
        margin-left: 15px;
    }

    #loginForm .validation-summary-errors ul {
        margin: 0;
        padding: 0;
    }

    #loginForm .validation-summary-errors li {
        display: inline;
        list-style: none;
        margin: 0;
    }

    #loginForm input {
        width: 250px;
    }

    #loginForm input[type="checkbox"],
    #loginForm input[type="submit"],
    #loginForm input[type="button"],
    #loginForm button {
        width: auto;
    }

#socialLoginForm {
    margin-left: 40px;
    float: left;
    width: 40%;
}

    #socialLoginForm h2 {
        margin-bottom:  5px;
    }

#socialLoginList button {
    margin-bottom: 12px;
}

#logoutForm {
    display: inline;
}

/* contact */
.contact h3 {
    font-size: 1.2em;
}

.contact p {
    margin: 5px 0 0 10px;
}

.contact iframe {
    border: 1px solid #333;
    margin: 5px 0 0 10px;
}

/* forms */
fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

    fieldset legend {
        display: none;
    }

    fieldset ol {
        padding: 0;
        list-style: none;
    }

        fieldset ol li {
            padding-bottom: 5px;
        }

label {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
}

label.checkbox {
    display: inline;
}

input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
}

textarea {
    font-family: inherit;
    width: 500px;
}

    input:focus, textarea:focus {
        border: 1px solid #7ac0da;
    }

    input[type="checkbox"] {
        background: transparent;
        border: inherit;
        width: auto;
    }

    input[type="submit"],
    input[type="button"],
    button {
        background-color: #d3dce0;
        border: 1px solid #787878;
        cursor: pointer;
        font-size: 1.2em;
        font-weight: 600;
        padding: 7px;
        margin-right: 8px;
        width: auto;
    }

    td input[type="submit"],
    td input[type="button"],
    td button {
        font-size: 1em;
        padding: 4px;
        margin-right: 4px;
    }

/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d;
}

/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}


/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}

th {
    font-size: 1.2em;
    text-align: left;
    border: none 0px;
    padding-left: 0;
}

    th a {
        display: block;
        position: relative;
    }

    th a:link, th a:visited, th a:active, th a:hover {
        color: #333;
        font-weight: 600;
        text-decoration: none;
        padding: 0;
    }

    th a:hover {
        color: #000;
    }

    th.asc a, th.desc a {
        margin-right: .75em;
    }

    th.asc a:after, th.desc a:after {
        display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
    }

    th.asc a:after {
        content: '▲';
    }

    th.desc a:after {
        content: '▼';
    }

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}


/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }

    /* logo */
    header .site-title {
        margin: 10px;
        text-align: center;
    }

    /* login */
    #login {
        font-size: .85em;
        margin: 0 0 12px;
        text-align: center;
    }

        #login ul {
            margin: 5px 0;
            padding: 0;
        }

        #login li {
            display: inline;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #login a {
            background: none;
            color: #999;
            font-weight: 600;
            margin: 2px;
            padding: 0;
        }

        #login a:hover {
            color: #333;
        }

    /* menu */
    nav {
        margin-bottom: 5px;
    }

    ul#menu {
        margin: 0;
        padding: 0;
        text-align: center;
    }

        ul#menu li {
            margin: 0;
            padding: 0;
        }


    /* main layout
    ----------------------------------------------------------*/
    .main-content,
    .featured + .main-content {
        background-position: 10px 0;
    }

    .content-wrapper {
        padding-right: 10px;
        padding-left: 10px;
    }

    .featured .content-wrapper {
        padding: 10px;
    }

    /* page content */
    article, aside {
        float: none;
        width: 100%;
    }

    /* ordered list */
    ol.round {
        list-style-type: none;
        padding-left: 0;
    }

        ol.round li {
            padding-left: 10px;
            margin: 25px 0;
        }

            ol.round li.zero,
            ol.round li.one,
            ol.round li.two,
            ol.round li.three,
            ol.round li.four,
            ol.round li.five,
            ol.round li.six,
            ol.round li.seven,
            ol.round li.eight,
            ol.round li.nine {
                background: none;
            }

     /* features */
     section.feature {
        float: none;
        padding: 10px;
        width: auto;
     }

        section.feature img {
            color: #999;
            content: attr(alt);
            font-size: 1.5em;
            font-weight: 600;
        }

    /* forms */
    input {
        width: 90%;
    }

    /* login page */
    #loginForm {
        border-right: none;
        float: none;
        width: auto;
    }

        #loginForm .validation-error {
            display: block;
            margin-left: 15px;
        }

    #socialLoginForm {
        margin-left: 0;
        float: none;
        width: auto;
    }


    /* footer
    ----------------------------------------------------------*/
    footer .float-left,
    footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }

        footer p {
            margin: 0;
        }
}



/* jQuery mobile styles
-----------------------------------------------------------*/

/* Make listview buttons fill the whole horizontal width of the screen */
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding-right: 15px;
}

.ui-bar-a, .ui-body-a, .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a,
.ui-bar-b, .ui-body-b, .ui-btn-up-b, .ui-btn-hover-b, .ui-btn-down-b,
.ui-bar-c, .ui-body-c, .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c,
.ui-bar-d, .ui-body-d, .ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d,
.ui-bar-e, .ui-body-e, .ui-btn-up-e, .ui-btn-hover-e, .ui-btn-down-e,
.ui-btn-active  {
    text-shadow: none;
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Carl Randall
Architect AssemblySoft
United Kingdom United Kingdom
Carl Randall has specialized in Information Technology solutions for over 15 years. Specializing in full life-cycle development projects for both enterprise-wide systems, desktop applications and Internet based solutions.

Carl has been involved in .Net since it's inception and is currently a Microsoft Certified Professional Developer (Enterprise).

When not coding and designing, Carl enjoys playing table tennis, tennis, sailing and spending time by the beach - when the british weather permits Wink | ;)
Follow on   Twitter

| Advertise | Privacy | Mobile
Web03 | 2.8.140821.2 | Last Updated 13 Sep 2012
Article Copyright 2012 by Carl Randall
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid