[java-identity-provider] branch main updated: IDP-1669 - Accessibility on IdP pages

Scott Cantor cantor.2 at osu.edu
Fri Feb 25 17:04:36 UTC 2022


This is an automated email from the git hooks/post-receive script.

scantor pushed a commit to branch main
in repository java-identity-provider.

View the commit online:
http://git.shibboleth.net/view/?p=java-identity-provider.git;a=commit;h=ea22b7cee6733ed5a584f7900cc98b733f2954e7

The following commit(s) were added to refs/heads/main by this push:
     new ea22b7cee IDP-1669 - Accessibility on IdP pages
ea22b7cee is described below

commit ea22b7cee6733ed5a584f7900cc98b733f2954e7
Author: Scott Cantor <cantor.2 at osu.edu>
AuthorDate: Fri Feb 25 12:04:33 2022 -0500

    IDP-1669 - Accessibility on IdP pages
    
    https://shibboleth.atlassian.net/browse/IDP-1669
    
    First round of view template replacements.
---
 .../shibboleth/idp/messages/messages.properties    |   3 +-
 .../shibboleth/idp/messages/messages_de.properties |   3 +-
 .../idp/messages/messages_de_CH.properties         |   3 +-
 .../shibboleth/idp/messages/messages_fr.properties |   3 +-
 .../shibboleth/idp/messages/messages_it.properties |   3 +-
 .../shibboleth/idp/messages/messages_ja.properties |   3 +-
 .../module/views/intercept/attribute-release.vm    | 203 +++---
 idp-conf/.settings/org.testng.eclipse.maven.prefs  |   2 +
 .../views/client-storage/client-storage-read.vm    |  41 +-
 .../views/client-storage/client-storage-write.vm   |  38 +-
 idp-conf/src/main/resources/views/custom-styles.vm | 188 +++++
 idp-conf/src/main/resources/views/error.vm         |  43 +-
 .../src/main/resources/views/logout-complete.vm    |  78 +-
 .../src/main/resources/views/logout-propagate.vm   |  65 +-
 idp-conf/src/main/resources/views/logout.vm        |  78 +-
 idp-conf/src/main/resources/views/user-prefs.vm    |  90 +--
 idp-conf/src/test/resources/conf/idp.properties    |   2 +-
 idp-war/src/main/webapp/css/logout.css             |   3 +
 idp-war/src/main/webapp/css/placeholder.css        | 798 +++++++++++++++++++++
 .../src/main/webapp/images/placeholder-logo.png    | Bin 0 -> 2525 bytes
 .../webapp/images/placeholder-service-logo.png     | Bin 0 -> 2371 bytes
 21 files changed, 1307 insertions(+), 340 deletions(-)

diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages.properties b/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages.properties
index 08cb76647..79a128671 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages.properties
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages.properties
@@ -59,9 +59,10 @@ ExternalAuthenticationException = stale
 
 # General strings
 
+idp.css = /css/placeholder.css
 idp.title = Web Login Service
 idp.title.suffix = Error
-idp.logo = /images/dummylogo.png
+idp.logo = /images/placeholder-logo.png
 idp.logo.alt-text = Replace or remove this logo
 idp.message = An unidentified error occurred.
 idp.footer = Insert your footer text here.
diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_de.properties b/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_de.properties
index a108bedf5..a20408bdc 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_de.properties
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_de.properties
@@ -53,9 +53,10 @@ NTLMUnsupported=ntlm
 NoSuchFlowExecutionException=stale
 FlowExecutionRestorationFailureException=stale
 ExternalAuthenticationException=stale
+idp.css=/css/placeholder.css
 idp.title=Web Anmeldedienst
 idp.title.suffix=Fehler
-idp.logo=/images/dummylogo.png
+idp.logo=/images/placeholder-logo.png
 idp.logo.alt-text=Dieses Logo ersetzen oder entfernen
 idp.message=Ein unbekannter Fehler ist aufgetreten.
 idp.footer=Bitte Fußtext hier einfügen.
diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_de_CH.properties b/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_de_CH.properties
index 9103d2851..ad86c410a 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_de_CH.properties
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_de_CH.properties
@@ -53,9 +53,10 @@ NTLMUnsupported=ntlm
 NoSuchFlowExecutionException=stale
 FlowExecutionRestorationFailureException=stale
 ExternalAuthenticationException=stale
+idp.css=/css/placeholder.css
 idp.title=Web Anmeldedienst
 idp.title.suffix=Fehler
-idp.logo=/images/dummylogo.png
+idp.logo=/images/placeholder-logo.png
 idp.logo.alt-text=Dieses Logo ersetzen oder entfernen
 idp.message=Ein unbekannter Fehler ist aufgetreten.
 idp.footer=Bitte Fusstext hier einfügen.
diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_fr.properties b/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_fr.properties
index 6bef6f1ab..e5bff3157 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_fr.properties
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_fr.properties
@@ -53,9 +53,10 @@ NTLMUnsupported=ntlm
 NoSuchFlowExecutionException=stale
 FlowExecutionRestorationFailureException=stale
 ExternalAuthenticationException=stale
+idp.css=/css/placeholder.css
 idp.title=Service Web d'Authentification
 idp.title.suffix=Erreur
-idp.logo=/images/dummylogo.png
+idp.logo=/images/placeholder-logo.png
 idp.logo.alt-text=Remplacez ou supprimez ce logo
 idp.message=Une erreur non identifiée a été rencontrée.
 idp.footer=Insérez votre texte de pied de page ici.
diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_it.properties b/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_it.properties
index 2090b8147..48b05f8c4 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_it.properties
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_it.properties
@@ -53,9 +53,10 @@ NTLMUnsupported=ntlm
 NoSuchFlowExecutionException=stale
 FlowExecutionRestorationFailureException=stale
 ExternalAuthenticationException=stale
+idp.css=/css/placeholder.css
 idp.title=Servizio di accesso web
 idp.title.suffix=Errore
-idp.logo=/images/dummylogo.png
+idp.logo=/images/placeholder-logo.png
 idp.logo.alt-text=Sostituisci o rimuovi il logo
 idp.message=Si è verificato un errore non identificato.
 idp.footer=Inserisci qui il tuo testo a piè di pagina.
diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_ja.properties b/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_ja.properties
index 818337146..9b0a25b33 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_ja.properties
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/messages/messages_ja.properties
@@ -53,9 +53,10 @@ NTLMUnsupported=ntlm
 NoSuchFlowExecutionException=stale
 FlowExecutionRestorationFailureException=stale
 ExternalAuthenticationException=stale
+idp.css=/css/placeholder.css
 idp.title=ウェブログインサービス
 idp.title.suffix=エラー
-idp.logo=/images/dummylogo.png
+idp.logo=/images/placeholder-logo.png
 idp.logo.alt-text=ロゴを変更するか削除してください。
 idp.message=不明なエラーが発生しました。
 idp.footer=ここにフッターのテキストを挿入します。
diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/attribute-release.vm b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/attribute-release.vm
index c170b699b..18e9054e6 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/attribute-release.vm
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/attribute-release.vm
@@ -28,133 +28,128 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
-        <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/consent.css">
         <title>#springMessageText("idp.attribute-release.title", "Information Release")</title>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")">
+        #parse("custom-styles.vm")
     </head>
     <body>
-        <form action="$flowExecutionUrl" method="post" style="padding:10px" >
+        <form action="$flowExecutionUrl" method="post" style="padding:10px">
             #parse("csrf/csrf.vm")
-            <div class="box">
-                <header>
-                    <img src="$request.getContextPath()#springMessage("idp.logo")" alt="#springMessageText("idp.logo.alt-text", "logo")" class="federation_logo">
-                    #if ($rpOrganizationLogo)
-                        <img src="$encoder.encodeForHTMLAttribute($rpOrganizationLogo)" alt="logo for $encoder.encodeForHTMLAttribute($serviceName)" class="organization_logo">
-                    #end
-                </header>
+
+        <main class="main">
+            <header>
+                <img class="main-logo" src="$request.getContextPath()#springMessageText("idp.logo", "/images/placeholder-logo.png")" alt="#springMessageText("idp.logo.alt-text", "logo")" />
+            </header>
+
+            <section>
+                <h2>Information Release</h2>
+                #if ($rpOrganizationLogo)
+                    <img class="service-logo" src="$encoder.encodeForHTMLAttribute($rpOrganizationLogo)" alt="logo for $encoder.encodeForHTMLAttribute($serviceName)" />
+                #end                
+
                 #if ($serviceName)
-                    <p style="margin-top: 70px;">
+                    <p>
                         #springMessageText("idp.attribute-release.serviceNameLabel", "You are about to access the service:")<br>
-                        <span class="service_name">$serviceName</span>
+                        <strong>$encoder.encodeForHTML($serviceName)</strong>
                         #if ($rpOrganizationName)
-                            #springMessageText("idp.attribute-release.of", "of") <span class="organization_name">$encoder.encodeForHTML($rpOrganizationName)</span>
+                            #springMessageText("idp.attribute-release.of", "of") $encoder.encodeForHTML($rpOrganizationName)
                         #end
                     </p>
                 #end
+                
                 #if ($serviceDescription)
-                    <p style="margin-top: 10px;">
+                    <p>
                         #springMessageText("idp.attribute-release.serviceDescriptionLabel", "Description as provided by this service:")<br>
-                        <span class="service_description">$encoder.encodeForHTML($serviceDescription)</span>
-                        <br>
+                        <strong>$encoder.encodeForHTML($serviceDescription)</strong>
                     </p>
                 #end
+
+                <ul>
                 #if ($informationURL)
-                    <p style="margin-top: 10px;">
+                    <li>
                         <a href="$informationURL">#springMessageText("idp.attribute-release.informationURLLabel", "Additional information about the service")</a>
-                    </p>
+                    </li>
                 #end
-                <div id="attributeRelease">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th colspan="3">
-                                    #springMessageText("idp.attribute-release.attributesHeader", "Information to be Provided to Service")
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            #foreach ($attribute in $attributeReleaseContext.getConsentableAttributes().values())
-                                <tr>
-                                    <td>$encoder.encodeForHTML($attributeDisplayNameFunction.apply($attribute))</td>
-                                    <td>
-                                        #foreach ($value in $attribute.values)
-                                            #if ($replaceDollarWithNewline)
-                                                #set ($encodedValue = $encoder.encodeForHTML($value.getDisplayValue()).replaceAll($encoder.encodeForHTML('$'),"<br>"))
-                                            #else
-                                                #set ($encodedValue = $encoder.encodeForHTML($value.getDisplayValue()))
-                                            #end
-                                            #if ($attributeReleaseFlowDescriptor.perAttributeConsentEnabled)
-                                                <label for="$attribute.id"><strong>$encodedValue</strong></label>
-                                            #else
-                                                <strong>$encodedValue</strong>
-                                            #end
-                                            <br>
-                                        #end
-                                    </td>
-                                    <td style="vertical-align: top">
-                                        #if ($attributeReleaseFlowDescriptor.perAttributeConsentEnabled)
-                                            #set ($inputType = "checkbox")
-                                        #else
-                                            #set ($inputType = "hidden")
-                                        #end
-                                        <input id="$attribute.id" type="$inputType" name="_shib_idp_consentIds" value="$encoder.encodeForHTML($attribute.id)" checked>
-                                    </td>
-                                </tr>
-                            #end
-                        </tbody>
-                    </table>
-                </div>
+                
                 #if ($privacyStatementURL)
-                    <p style="margin-top: 10px;">
+                    <li>
                         <a href="$privacyStatementURL">#springMessageText("idp.attribute-release.privacyStatementURLLabel", "Data privacy information of the service")</a>
-                    </p>
+                    </li>
                 #end
-                <div style="float:left;">
-                    <p>
-                        #springMessageText("idp.attribute-release.confirmationQuestion", "The information above would be shared with the service if you proceed. Do you agree to release this information to the service every time you access it?")
-                    </p>
-                    #if ($attributeReleaseFlowDescriptor.doNotRememberConsentAllowed || $attributeReleaseFlowDescriptor.globalConsentAllowed)
-                        <div id="generalConsentDiv" style="display: block; background-color: #F6F6F6;border: 1px gray solid; padding: 10px; width: 92%;">
-                        #springMessageText("idp.attribute-release.consentMethod", "Select an information release consent duration:")
-                    #end
-                    #if ($attributeReleaseFlowDescriptor.doNotRememberConsentAllowed)
-                        <p>
-                            <input id="_shib_idp_doNotRememberConsent" type="radio" name="_shib_idp_consentOptions" value="_shib_idp_doNotRememberConsent">
-                            <label for="_shib_idp_doNotRememberConsent">#springMessageText("idp.attribute-release.doNotRememberConsent", "Ask me again at next login")</label>
-                            <ul>
-                                <li>#springMessageText("idp.attribute-release.doNotRememberConsentItem", "I agree to send my information this time.")</li>
-                            </ul>
-                        </p>
-                    #end
-                    #if ($attributeReleaseFlowDescriptor.doNotRememberConsentAllowed || $attributeReleaseFlowDescriptor.globalConsentAllowed)
-                        <p>
-                            <input id="_shib_idp_rememberConsent" type="radio" name="_shib_idp_consentOptions" value="_shib_idp_rememberConsent" checked>
-                            <label for="_shib_idp_rememberConsent">#springMessageText("idp.attribute-release.rememberConsent", "Ask me again if information changes")</label>
-                            <ul>
-                                <li>#springMessageText("idp.attribute-release.rememberConsentItem", "I agree that the same information will be sent automatically to this service in the future.")</li>
-                            </ul>
-                        </p>
-                    #end
-                    #if ($attributeReleaseFlowDescriptor.globalConsentAllowed)
-                        <p>
-                            <input id="_shib_idp_globalConsent" type="radio" name="_shib_idp_consentOptions" value="_shib_idp_globalConsent">
-                            <label for="_shib_idp_globalConsent">#springMessageText("idp.attribute-release.globalConsent", "Do not ask me again")</label>
-                            <ul>
-                                <li>#springMessageText("idp.attribute-release.globalConsentItem", "I agree that <strong>all</strong> of my information will be released to <strong>any</strong> service.")</li>
-                            </ul>
-                        </p>
-                    #end
-                    #if ($attributeReleaseFlowDescriptor.doNotRememberConsentAllowed || $attributeReleaseFlowDescriptor.globalConsentAllowed)
-                        #springMessageText("idp.attribute-release.consentMethodRevoke", "This setting can be revoked at any time with the checkbox on the login page.")
-                        </div>
+                </ul>
+                
+                <div class="boxed">
+                    <h3>#springMessageText("idp.attribute-release.attributesHeader", "Information to be Provided to Service")</h3>
+                                                
+                    #foreach ($attribute in $attributeReleaseContext.getConsentableAttributes().values())
+                        <p>$encoder.encodeForHTML($attributeDisplayNameFunction.apply($attribute))</p>
+                        <fieldset>
+                            #foreach ($value in $attribute.values)
+                                #if ($replaceDollarWithNewline)
+                                    #set ($encodedValue = $encoder.encodeForHTML($value.getDisplayValue()).replaceAll($encoder.encodeForHTML('$'),"<br>"))
+                                #else
+                                    #set ($encodedValue = $encoder.encodeForHTML($value.getDisplayValue()))
+                                #end
+                                #if ($attributeReleaseFlowDescriptor.perAttributeConsentEnabled)
+                                    <input id="$attribute.id" type="checkbox" name="_shib_idp_consentIds" value="$encoder.encodeForHTML($attribute.id)" checked>
+                                    <label for="$attribute.id"><strong>$encodedValue</strong></label>
+                                #else
+                                    <strong>$encodedValue</strong>
+                                    <input id="$attribute.id" type="hidden" name="_shib_idp_consentIds" value="$encoder.encodeForHTML($attribute.id)" checked>
+                                #end
+                            #end
+                        </fieldset>
                     #end
-                    <p style="text-align: center;">
-                        <input type="submit" name="_eventId_AttributeReleaseRejected" value="#springMessageText("idp.attribute-release.reject", "Reject")" style="margin-right: 30px;">
-                        <input type="submit" name="_eventId_proceed" value="#springMessageText("idp.attribute-release.accept", "Accept")">
-                    </p>
                 </div>
+
+                <p>#springMessageText("idp.attribute-release.confirmationQuestion", "The information above would be shared with the service if you proceed. Do you agree to release this information to the service every time you access it?")</p>
+
+                #if ($attributeReleaseFlowDescriptor.doNotRememberConsentAllowed || $attributeReleaseFlowDescriptor.globalConsentAllowed)
+                    <p><strong>#springMessageText("idp.attribute-release.consentMethod", "Select an information release consent duration:")</strong></p>
+                #end
+                
+                #if ($attributeReleaseFlowDescriptor.doNotRememberConsentAllowed)
+                    <fieldset>
+                        <input id="_shib_idp_doNotRememberConsent" type="radio" name="_shib_idp_consentOptions" value="_shib_idp_doNotRememberConsent">
+                        <label for="_shib_idp_doNotRememberConsent">#springMessageText("idp.attribute-release.doNotRememberConsent", "Ask me again at next login")<br /><small>#springMessageText("idp.attribute-release.doNotRememberConsentItem", "I agree to send my information this time.")</small></label>
+                    </fieldset>
+                #end
+                #if ($attributeReleaseFlowDescriptor.doNotRememberConsentAllowed || $attributeReleaseFlowDescriptor.globalConsentAllowed)
+                    <fieldset>
+                        <input id="_shib_idp_rememberConsent" type="radio" name="_shib_idp_consentOptions" value="_shib_idp_rememberConsent" checked>
+                        <label for="_shib_idp_rememberConsent">#springMessageText("idp.attribute-release.rememberConsent", "Ask me again if information changes")<br /><small>#springMessageText("idp.attribute-release.rememberConsentItem", "I agree that the same information will be sent automatically to this service in the future.")</small></label>
+                    </fieldset>
+                #end
+                #if ($attributeReleaseFlowDescriptor.globalConsentAllowed)
+                    <fieldset>
+                        <input id="_shib_idp_globalConsent" type="radio" name="_shib_idp_consentOptions" value="_shib_idp_globalConsent">
+                        <label for="_shib_idp_globalConsent">#springMessageText("idp.attribute-release.globalConsent", "Do not ask me again")<br /><small>#springMessageText("idp.attribute-release.globalConsentItem", "I agree that <strong>all</strong> of my information will be released to <strong>any</strong> service.")</small></label>
+                    </fieldset>
+                #end
+
+                <div class="grid md-2">
+                    <div class="grid-item">
+                        <button class="button--full" type="submit" name="_eventId_proceed">#springMessageText("idp.attribute-release.accept", "Accept")</button>
+                    </div>
+                    
+                    <div class="grid-item">
+                        <button class="button--secondary button--full" type="submit" name="_eventId_AttributeReleaseRejected">#springMessageText("idp.attribute-release.reject", "Reject")</button>
+                    </div>
+                </div>
+                
+                #if ($attributeReleaseFlowDescriptor.doNotRememberConsentAllowed || $attributeReleaseFlowDescriptor.globalConsentAllowed)
+                    <p>#springMessageText("idp.attribute-release.consentMethodRevoke", "This setting can be revoked at any time with the checkbox on the login page.")</p>
+                #end
+            </section>
+        </main>
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
             </div>
+        </footer>
         </form>
     </body>
 </html>
diff --git a/idp-conf/.settings/org.testng.eclipse.maven.prefs b/idp-conf/.settings/org.testng.eclipse.maven.prefs
new file mode 100644
index 000000000..3a6c4f350
--- /dev/null
+++ b/idp-conf/.settings/org.testng.eclipse.maven.prefs
@@ -0,0 +1,2 @@
+eclipse.preferences.version=1
+userprojectsettings=false
diff --git a/idp-conf/src/main/resources/views/client-storage/client-storage-read.vm b/idp-conf/src/main/resources/views/client-storage/client-storage-read.vm
index 1993c14d7..a08143668 100644
--- a/idp-conf/src/main/resources/views/client-storage/client-storage-read.vm
+++ b/idp-conf/src/main/resources/views/client-storage/client-storage-read.vm
@@ -17,37 +17,34 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
         <title>$title - $titleSuffix</title>
-        <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/main.css">
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")">
+        #parse("custom-styles.vm")
         <script>
         <!--
-        #include( "client-storage/local-storage-read.js" )
+        #include("client-storage/local-storage-read.js")
         // -->
         </script>
     </head>
-    <body onload="doLoad()">
-        <div class="wrapper">
-            <div class="container">
-                <header>
-                    <h3>$title - $titleSuffix</h3>
-                </header>
-                <div class="content">
-                $springMacroRequestContext.getMessage("idp.client-storage-read.text", "Loading login session information from the browser...")
-                </div>
+    <body onload="doLoad()">        
+        <main class="main">
+            <section>
+                <h2>$title - $titleSuffix</h2>
+                <p>$springMacroRequestContext.getMessage("idp.client-storage-read.text", "Loading login session information from the browser...")</p>
                 <noscript>
-                    <div class="content">
                     $springMacroRequestContext.getMessage("idp.client-storage.no-js", "Since your browser does not support JavaScript, you must press the Continue button once to proceed.")
-                    </div>
                 </noscript>
-                #parse( "client-storage/read.vm" )
+                #parse("client-storage/read.vm")
+            </section>
+            
+        </main>
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
             </div>
-            <footer>
-                <div class="container container-footer">
-                    <p class="footer-text">#springMessageText("idp.footer", "Insert your footer text here.")</p>
-                </div>
-            </footer>
-        </div>
+        </footer>
     </body>
 </html>
diff --git a/idp-conf/src/main/resources/views/client-storage/client-storage-write.vm b/idp-conf/src/main/resources/views/client-storage/client-storage-write.vm
index 4b92d6b81..a3356df02 100644
--- a/idp-conf/src/main/resources/views/client-storage/client-storage-write.vm
+++ b/idp-conf/src/main/resources/views/client-storage/client-storage-write.vm
@@ -17,37 +17,35 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
     <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
         <title>$title - $titleSuffix</title>
-        <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/main.css">
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")">
+        #parse("custom-styles.vm")
         <script>
         <!--
-        #include( "client-storage/local-storage-write.js" )
+        #include("client-storage/local-storage-write.js")
         // -->
         </script>
     </head>
-    <body onload="doSave()">
-        <div class="wrapper">
-            <div class="container">
-                <header>
-                    <h3>$title - $titleSuffix</h3>
-                </header>
-                <div class="content">
-                $springMacroRequestContext.getMessage("idp.client-storage-write.text", "Saving login session information to the browser...")
-                </div>
+    <body onload="doSave()">    
+        <main class="main">
+            <section>
+                <h2>$title - $titleSuffix</h2>
+                <p>$springMacroRequestContext.getMessage("idp.client-storage-write.text", "Saving login session information to the browser...")</p>
                 <noscript>
                     <div class="content">
                     $springMacroRequestContext.getMessage("idp.client-storage.no-js", "Since your browser does not support JavaScript, you must press the Continue button once to proceed.")
                     </div>
                 </noscript>
-                #parse( "client-storage/write.vm" )
+                #parse("client-storage/write.vm")
+            </section>
+        </main>
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
             </div>
-            <footer>
-                <div class="container container-footer">
-                    <p class="footer-text">#springMessageText("idp.footer", "Insert your footer text here.")</p>
-                </div>
-            </footer>
-        </div>
+        </footer>
     </body>
 </html>
\ No newline at end of file
diff --git a/idp-conf/src/main/resources/views/custom-styles.vm b/idp-conf/src/main/resources/views/custom-styles.vm
new file mode 100644
index 000000000..4c3e481de
--- /dev/null
+++ b/idp-conf/src/main/resources/views/custom-styles.vm
@@ -0,0 +1,188 @@
+## Custom styles
+##
+## idp.styles.background-color (Default: #ECEFF1)
+## idp.styles.link-color (Default: #1534E3)
+## idp.styles.button-color (Default: #1534E3)
+## idp.styles.button-hover-color (Default: #1A237E)
+## idp.styles.body-color (Default: #32424A)
+## idp.styles.message-color (Default: #7A2D00)
+## idp.styles.error-color (Default: #B50024)
+## idp.styles.success-color (Default: #1C7D40)
+## idp.styles.inactive-color (Default: #999999)
+##
+<style>
+body, hr {
+	background-color: #springMessageText("idp.styles.background-color", "#ECEFF1");
+}
+main section + section {
+  border-top: 1px solid #springMessageText("idp.styles.background-color", "#ECEFF1");
+}
+header {
+	border-bottom: 1px solid #springMessageText("idp.styles.background-color", "#ECEFF1");
+}
+input[type="text"]:read-only, 
+input[type="email"]:read-only, 
+input[type="password"]:read-only, 
+input[type="telephone"]:read-only,
+input[type="tel"]:read-only, 
+input[type="url"]:read-only, 
+textarea:read-only, 
+select:read-only, 
+input[type="text"]:disabled, 
+input[type="email"]:disabled, 
+input[type="password"]:disabled, 
+input[type="telephone"]:disabled, 
+input[type="tel"]:disabled, 
+input[type="url"]:disabled, 
+textarea:disabled, 
+select:disabled {
+  background-color: #springMessageText("idp.styles.background-color", "#ECEFF1");
+}
+
+a[href], a[href]:hover, a[href]:active, a[href]:focus {
+	color: #springMessageText("idp.styles.link-color", "#1534E3");
+}
+ul li:before {
+	background-color: #springMessageText("idp.styles.link-color", "#1534E3");
+}
+label:focus {
+	color: #springMessageText("idp.styles.link-color", "#1534E3");
+}
+input[type="text"]:focus, 
+input[type="email"]:focus, 
+input[type="password"]:focus, 
+input[type="telephone"]:focus, 
+input[type="tel"]:focus, 
+input[type="url"]:focus, 
+textarea:focus, 
+select:focus,
+input[type="text"]:active, 
+input[type="email"]:active, 
+input[type="password"]:active, 
+input[type="telephone"]:active, 
+input[type="tel"]:active, 
+input[type="url"]:active, 
+textarea:active, 
+select:active {
+	border-color: #springMessageText("idp.styles.link-color", "#1534E3");
+}
+input[type="checkbox"]:checked + label, input[type="radio"]:checked + label,
+input[type="checkbox"]:focus + label, input[type="radio"]:focus + label {
+  color: #springMessageText("idp.styles.link-color", "#1534E3");
+}
+input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before,
+input[type="checkbox"]:focus + label:before, input[type="radio"]:focus + label:before {
+  border-color: #springMessageText("idp.styles.link-color", "#1534E3");
+}
+input[type="checkbox"] + label:after {
+	border: solid #springMessageText("idp.styles.link-color", "#1534E3");
+}
+input[type="radio"] + label:after {
+  background-color: #springMessageText("idp.styles.link-color", "#1534E3");
+}
+button, input[type=button], input[type=submit], a.button, .button {
+  background-color: #springMessageText("idp.styles.link-color", "#1534E3");
+  border: 4px solid #springMessageText("idp.styles.link-color", "#1534E3");
+}
+button.button--secondary, 
+input[type=button].button--secondary, 
+input[type=submit].button--secondary, 
+a.button.button--secondary, 
+.button.button--secondary {
+  background-color: transparent;
+  border-color: #springMessageText("idp.styles.link-color", "#1534E3");
+  color: #springMessageText("idp.styles.link-color", "#1534E3");
+}
+
+button:hover, 
+input[type=button]:hover, 
+input[type=submit]:hover, 
+a.button:hover, 
+.button:hover, 
+button:focus, 
+input[type=button]:focus, 
+input[type=submit]:focus, 
+a.button:focus, 
+.button:focus {
+  background: #springMessageText("idp.styles.button-hover-color", "#1A237E");
+  color: #fff !important;
+  text-decoration: none !important;
+  border-color: #springMessageText("idp.styles.button-hover-color", "#1A237E");
+}
+button.button--secondary:hover, 
+input[type=button].button--secondary:hover, 
+input[type=submit].button--secondary:hover, 
+a.button.button--secondary:hover, 
+.button.button--secondary:hover,
+button.button--secondary:focus, 
+input[type=button].button--secondary:focus, 
+input[type=submit].button--secondary:focus, 
+a.button.button--secondary:focus, 
+.button.button--secondary:focus {
+  background: #springMessageText("idp.styles.button-hover-color", "#1A237E");
+  border-color: #springMessageText("idp.styles.button-hover-color", "#1A237E");
+}
+
+body {
+  color: #springMessageText("idp.styles.body-color", "#32424A");
+}
+label {
+  color: #springMessageText("idp.styles.body-color", "#32424A");
+}
+input[type="text"], 
+input[type="email"], 
+input[type="password"], 
+input[type="telephone"], 
+input[type="tel"], 
+input[type="url"], 
+textarea, 
+select {
+  border: 2px solid #springMessageText("idp.styles.body-color", "#32424A");
+  color: #springMessageText("idp.styles.body-color", "#32424A");
+}
+input[type="checkbox"] + label:before, input[type="radio"] + label:before {
+  border: 2px solid #springMessageText("idp.styles.body-color", "#32424A");
+}
+
+
+.output-message {
+  color: #springMessageText("idp.styles.message-color", "#7A2D00");
+}
+
+.output-message.output--error {
+  color: #springMessageText("idp.styles.error-color", "#B50024");
+}
+fieldset .error {
+  color: #springMessageText("idp.styles.error-color", "#B50024");
+}
+input[type="text"].error, 
+input[type="email"].error, 
+input[type="password"].error, 
+input[type="telephone"].error, 
+input[type="tel"].error, 
+input[type="url"].error, 
+textarea.error, 
+select.error {
+  border-color: #springMessageText("idp.styles.error-color", "#B50024");
+}
+
+.output-message.output--success {
+  color: #springMessageText("idp.styles.success-color", "#1C7D40");
+}
+
+button.button--secondary:disabled, 
+input[type=button].button--secondary:disabled, 
+input[type=submit].button--secondary:disabled, 
+a.button.button--secondary:disabled, 
+.button.button--secondary:disabled {
+  color: #springMessageText("idp.styles.inactive-color", "#999999");
+}
+button:disabled, 
+input[type=button]:disabled, 
+input[type=submit]:disabled, 
+a.button:disabled, 
+.button:disabled {
+  background-color: #springMessageText("idp.styles.inactive-color", "#999999");
+  border-color: #springMessageText("idp.styles.inactive-color", "#999999");
+}
+</style>
\ No newline at end of file
diff --git a/idp-conf/src/main/resources/views/error.vm b/idp-conf/src/main/resources/views/error.vm
index 723eda862..63d368c01 100644
--- a/idp-conf/src/main/resources/views/error.vm
+++ b/idp-conf/src/main/resources/views/error.vm
@@ -48,31 +48,28 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
-        <title>$title - $titleSuffix</title>
-        <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/main.css">
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")">
+        #parse("custom-styles.vm")
     </head>
   	
     <body>
-    <div class="wrapper">
-    	<div class="container">
-        	<header>
-				<img src="$request.getContextPath()#springMessage("idp.logo")" alt="#springMessageText("idp.logo.alt-text", "logo")">
-				<h3>$title - $titleSuffix</h3>
-			</header>
-		
-        	<div class="content">
-            #evaluate($message)
+        <main class="main">
+            <header>
+                <img class="main-logo" src="$request.getContextPath()#springMessageText("idp.logo", "/images/placeholder-logo.png")" alt="#springMessageText("idp.logo.alt-text", "logo")" />
+            </header>
+            
+            <section>
+                <h2>$title - $titleSuffix</h2>
+                <p>#evaluate($message)</p>
+            </section>
+        </main>
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
             </div>
-    	</div>
-
-      	<footer>
-        	<div class="container container-footer">
-          		<p class="footer-text">#springMessageText("idp.footer", "Insert your footer text here.")</p>
-        	</div>
-      	</footer>
-      	
-    </div>
+        </footer>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/idp-conf/src/main/resources/views/logout-complete.vm b/idp-conf/src/main/resources/views/logout-complete.vm
index 7341e6962..e9d17a9dd 100644
--- a/idp-conf/src/main/resources/views/logout-complete.vm
+++ b/idp-conf/src/main/resources/views/logout-complete.vm
@@ -19,49 +19,47 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
         <title>#springMessageText("idp.title", "Web Login Service")</title>
-        <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/main.css">
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")">
+        #parse("custom-styles.vm")
     </head>
 
     <body>
-    <div class="wrapper">
-      <div class="container">
-        <header>
-          <img src="$request.getContextPath()#springMessage("idp.logo")" alt="#springMessageText("idp.logo.alt-text", "logo")">
-        </header>
-
-        <div class="content">
-          <div class="column one">
-          #if ($activeIdPSessions)
-            <p>#springMessageText("idp.logout.cancelled", "Logout has been cancelled.")</p>
-          #elseif ($activeSPSessions)
-            <p>#springMessageText("idp.logout.local", "You elected not to log out of all the applications accessed during your session.")</p>
-          #else
-            <p>#springMessageText("idp.logout.complete", "The logout operation is complete, and no other services appear to have been accessed during this session.")</p>
-          #end
-          </div>
-          <div class="column two">
-            <ul class="list list-help">
-              <li class="list-help-item"><a href="#springMessageText("idp.url.password.reset", '#')"><span class="item-marker">›</span> #springMessageText("idp.login.forgotPassword", "Forgot your password?")</a></li>
-              <li class="list-help-item"><a href="#springMessageText("idp.url.helpdesk", '#')"><span class="item-marker">›</span> #springMessageText("idp.login.needHelp", "Need Help?")</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      <!-- If SAML logout, complete the flow by adding a hidden iframe. -->
-      #if ( $profileRequestContext.getProfileId().contains("saml2/logout") )
-          <iframe style="display:none" src="$flowExecutionUrl&_eventId=proceed"></iframe>
-      #end
-
-      <footer>
-        <div class="container container-footer">
-          <p class="footer-text">#springMessageText("idp.footer", "Insert your footer text here.")</p>
-        </div>
-      </footer>
-    </div>
-    
+        <main class="main">
+            <header>
+                <img class="main-logo" src="$request.getContextPath()#springMessageText("idp.logo", "/images/placeholder-logo.png")" alt="#springMessageText("idp.logo.alt-text", "logo")" />
+            </header>
+            
+            <section>
+            #if ($activeIdPSessions)
+                <h2>#springMessageText("idp.logout.cancelled", "Logout has been cancelled.")</h2>
+            #elseif ($activeSPSessions)
+                <p>#springMessageText("idp.logout.local", "You elected not to log out of all the applications accessed during your session.")</p>
+            #else
+                <p>#springMessageText("idp.logout.complete", "The logout operation is complete, and no other services appear to have been accessed during this session.")</p>
+            #end
+            
+                <ul>
+                    <li><a href="#springMessageText("idp.url.password.reset", '#')">#springMessageText("idp.login.forgotPassword", "Forgot your password?")</a></li>
+                    <li><a href="#springMessageText("idp.url.helpdesk", '#')">#springMessageText("idp.login.needHelp", "Need Help?")</a></li>
+                </ul>
+                
+              <!-- If SAML logout, complete the flow by adding a hidden iframe. -->
+              #if ( $profileRequestContext.getProfileId().contains("saml2/logout") )
+                  <iframe style="display:none" src="$flowExecutionUrl&_eventId=proceed"></iframe>
+              #end
+              
+      
+            </section>
+            
+        </main>
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
+            </div>
+        </footer>
  	</body>
 </html>
\ No newline at end of file
diff --git a/idp-conf/src/main/resources/views/logout-propagate.vm b/idp-conf/src/main/resources/views/logout-propagate.vm
index cdf74593a..682e7a28d 100644
--- a/idp-conf/src/main/resources/views/logout-propagate.vm
+++ b/idp-conf/src/main/resources/views/logout-propagate.vm
@@ -20,44 +20,41 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
         <title>#springMessageText("idp.title", "Web Login Service")</title>
-        <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/main.css">
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")">
         <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/logout.css">
+        #parse("custom-styles.vm")
     </head>
 
     <body>
-    <div class="wrapper">
-      <div class="container">
-        <header>
-          <img src="$request.getContextPath()#springMessage("idp.logo")" alt="#springMessageText("idp.logo.alt-text", "logo")">
-        </header>
-
-        <div class="content">
-          <div class="column one">
-              #if($hidden == "true")
-              <p>#springMessageText("idp.logout.hidden", "Your single sign-on session has been terminated, but you are still logged into many of the services you have accessed during your session.")</p>
-              #else
-              <p>#springMessageText("idp.logout.attempt", "Attempting to log out of the following services:")</p>
-              #end
-              #parse("logout/propagate.vm")
-          </div>
-          <div class="column two">
-            <ul class="list list-help">
-              <li class="list-help-item"><a href="#springMessageText("idp.url.password.reset", '#')"><span class="item-marker">›</span> #springMessageText("idp.login.forgotPassword", "Forgot your password?")</a></li>
-              <li class="list-help-item"><a href="#springMessageText("idp.url.helpdesk", '#')"><span class="item-marker">›</span> #springMessageText("idp.login.needHelp", "Need Help?")</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      <footer>
-        <div class="container container-footer">
-          <p class="footer-text">#springMessageText("idp.footer", "Insert your footer text here.")</p>
-        </div>
-      </footer>
-    </div>
-    
+        <main class="main">
+            <header>
+                <img class="main-logo" src="$request.getContextPath()#springMessageText("idp.logo", "/images/placeholder-logo.png")" alt="#springMessageText("idp.logo.alt-text", "logo")" />
+            </header>
+            
+            
+            <section>
+                #if($hidden == "true")
+                <p>#springMessageText("idp.logout.hidden", "Your single sign-on session has been terminated, but you are still logged into many of the services you have accessed during your session.")</p>
+                #else
+                <p>#springMessageText("idp.logout.attempt", "Attempting to log out of the following services:")</p>
+                #end
+                #parse("logout/propagate.vm")
+                
+                <ul>
+                    <li><a href="#springMessageText("idp.url.password.reset", '#')">#springMessageText("idp.login.forgotPassword", "Forgot your password?")</a></li>
+                    <li><a href="#springMessageText("idp.url.helpdesk", '#')">#springMessageText("idp.login.needHelp", "Need Help?")</a></li>
+                </ul>
+            </section>
+            
+        </main>
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
+            </div>
+        </footer>
  	</body>
 </html>
\ No newline at end of file
diff --git a/idp-conf/src/main/resources/views/logout.vm b/idp-conf/src/main/resources/views/logout.vm
index 3d8d50b9e..a0ad69df4 100644
--- a/idp-conf/src/main/resources/views/logout.vm
+++ b/idp-conf/src/main/resources/views/logout.vm
@@ -23,30 +23,31 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <title>#springMessageText("idp.title", "Web Login Service")</title>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        #*
         #if ($promptForSP)
             <meta http-equiv="refresh" content="10;url=$flowExecutionUrl&_eventId=propagate">
         #elseif ($promptForIdP)
             <meta http-equiv="refresh" content="10;url=$flowExecutionUrl&_eventId=local">
         #end
-        <title>#springMessageText("idp.title", "Web Login Service")</title>
-        <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/main.css">
+        *#
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")">
+        #parse("custom-styles.vm")
     </head>
 
-    <body>
-    <div class="wrapper">   
-      <div class="container">
-        <header>
-          <img src="$request.getContextPath()#springMessage("idp.logo")" alt="#springMessageText("idp.logo.alt-text", "logo")">
-        </header>
+   <body>
+        <main class="main">
+            <header>
+                <img class="main-logo" src="$request.getContextPath()#springMessageText("idp.logo", "/images/placeholder-logo.png")" alt="#springMessageText("idp.logo.alt-text", "logo")" />
+            </header>
 
-        <div class="content">
-          <div class="column one">
-            <p>This page is displayed when a logout operation at the Identity Provider completes. This page is an example
-            and should be customized. It is not fully internationalized because the presentation will be a highly localized
-            decision, and we don't have a good suggestion for a default.</p>
-            <br>
+            <section>
+                <div class="output-message">
+                    <p><strong>Note for deployers:</strong> This page is displayed when a logout operation at the Identity Provider completes. This page is an example and should be customized. It is not fully internationalized because the presentation will be a highly localized decision, and we don't have a good suggestion for a default.</p>
+                </div>
     
             #if ($rpContext)
               <p>#springMessageText("idp.logout.sp-initiated", "You have been logged out of the following service:")</p>
@@ -66,17 +67,13 @@
 
               <form id="propagate_form" method="POST" action="$flowExecutionUrl">
                 
-                <div class="form-element-wrapper">
-                  <button id="logout_local" class="form-element form-button" type="submit" name="_eventId" value="local">#springMessageText("idp.logout.idponly", "Logout Locally")</button>
+                  <p><button id="logout_local" type="submit" name="_eventId" value="local">#springMessageText("idp.logout.idponly", "Logout Locally")</button></p>
                   <p>#springMessageText("idp.logout.idponly.caption", "End your SSO session.")</p>
-                </div>
             #end
 
             #if ($promptForSP)
-                <div class="form-element-wrapper">
-                  <button id="logout_propagate" class="form-element form-button" type="submit" name="_eventId" value="propagate">#springMessageText("idp.logout.global", "Logout Globally")</button>
+                  <p><button id="logout_propagate" type="submit" name="_eventId" value="propagate">#springMessageText("idp.logout.global", "Logout Globally")</button></p>
                   <p>#springMessageText("idp.logout.global.caption", "End your SSO session and attempt logout of services accessed during session.")</p>
-                  <br>
                   <p>#springMessageText("idp.logout.contactServices", "If instructed, the system will attempt to contact the following services:")</p>
                   <ol>
                   #foreach ($sp in $logoutContext.getSessionMap().keySet())
@@ -91,15 +88,11 @@
                     #end
                   #end
                   </ol>
-                  <br>
-                </div>
             #end
 
             #if ($promptForIdP)
-                <div class="form-element-wrapper">
-                  <button id="logout_cancel" class="form-element form-button" type="submit" name="_eventId" value="end">#springMessageText("idp.logout.cancel", "Cancel")</button>
+                  <p><button class="button--secondary" id="logout_cancel" type="submit" name="_eventId" value="end">#springMessageText("idp.logout.cancel", "Cancel")</button></p>
                   <p>#springMessageText("idp.logout.cancel.caption", "Cancel logout and retain your SSO session.")</p>
-                </div>
             #end
             
             #if ($promptForIdP or $promptForSP)
@@ -110,22 +103,17 @@
                 <iframe style="display:none" src="$flowExecutionUrl&_eventId=proceed"></iframe>
             #end
 
-          </div>
-          <div class="column two">
-            <ul class="list list-help">
-              <li class="list-help-item"><a href="#springMessageText("idp.url.password.reset", '#')"><span class="item-marker">›</span> #springMessageText("idp.login.forgotPassword", "Forgot your password?")</a></li>
-              <li class="list-help-item"><a href="#springMessageText("idp.url.helpdesk", '#')"><span class="item-marker">›</span> #springMessageText("idp.login.needHelp", "Need Help?")</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      <footer>
-        <div class="container container-footer">
-          <p class="footer-text">#springMessageText("idp.footer", "Insert your footer text here.")</p>
-        </div>
-      </footer>
-    </div>
-    
-  </body>
+                <ul>
+                    <li><a href="#springMessageText("idp.url.password.reset", '#')">#springMessageText("idp.login.forgotPassword", "Forgot your password?")</a></li>
+                    <li><a href="#springMessageText("idp.url.helpdesk", '#')">#springMessageText("idp.login.needHelp", "Need Help?")</a></li>
+                </ul>
+            </section>
+            
+        </main>
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
+            </div>
+        </footer>
+    </body>
 </html>
\ No newline at end of file
diff --git a/idp-conf/src/main/resources/views/user-prefs.vm b/idp-conf/src/main/resources/views/user-prefs.vm
index 8de0503cd..54165ee70 100644
--- a/idp-conf/src/main/resources/views/user-prefs.vm
+++ b/idp-conf/src/main/resources/views/user-prefs.vm
@@ -10,51 +10,51 @@
 <!DOCTYPE html>
 <html>
     <head>
-    	<meta charset="utf-8">
-    	<meta name="viewport" content="width=device-width,initial-scale=1.0">
-    	<title>#springMessageText("idp.userprefs.title", "Web Login Service") - #springMessageText("idp.userprefs.title.suffix", "Login Preferences")</title>
-    	<link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/main.css">
-    	<script language="Javascript">
-    	<!--
-    	#parse( "user-prefs.js" )
-    	// -->
-    	</script>
+        <title>#springMessageText("idp.userprefs.title", "Web Login Service") - #springMessageText("idp.userprefs.title.suffix", "Login Preferences")</title>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")">
+        #parse("custom-styles.vm")
+        <script language="Javascript">
+        <!--
+        #parse( "user-prefs.js" )
+        // -->
+        </script>
     </head>
-    <body onLoad="document.getElementById('content').style.display='block'; load('spnego')">
-    <div class="wrapper">
-      <div class="container">
-        <header>
-          <img src="$request.getContextPath()#springMessage("idp.logo")" alt="#springMessageText("idp.logo.alt-text", "logo")">
-          <h3>#springMessageText("idp.title", "Web Login Service") - #springMessageText("idp.userprefs.title.suffix", "Login Preferences")</h3>
-          <p>
-          #springMessage("idp.userprefs.info")
-          </p>
-        </header>
 
-        <noscript>
-          <div id="content" class="content">
-            $springMacroRequestContext.getMessage("idp.userprefs.no-js", "This feature requires Javascript.")
-          </div>
-        </noscript>
+   <body onLoad="document.getElementById('content').style.display='block'; load('spnego')">
+        <main class="main">
+            <header>
+                <img class="main-logo" src="$request.getContextPath()#springMessageText("idp.logo", "/images/placeholder-logo.png")" alt="#springMessageText("idp.logo.alt-text", "logo")">
+            </header>
+            
+            
+            <section>
+                <h2>#springMessageText("idp.title", "Web Login Service") - #springMessageText("idp.userprefs.title.suffix", "Login Preferences")</h2>
+                <p>#springMessage("idp.userprefs.info")</p>
+                
+                <noscript>
+                  <div id="content" class="content">
+                    $springMacroRequestContext.getMessage("idp.userprefs.no-js", "This feature requires Javascript.")
+                  </div>
+                </noscript>
         
-        <div id="content" class="content" style="display:none">
-          <div class="form-element-wrapper">
-          <h4>#springMessageText("idp.userprefs.options", "The following options are available:")</h4>
-          </div>
-
-          <div class="form-element-wrapper">
-            <input type="checkbox" id="spnego" name="_idp_spnego_autologin" value="1" onClick="check(this)">
-            #springMessageText("idp.userprefs.spnego", "Automatically try desktop login when available.")
-          </div>
-        </div>
-      </div>
-
-      <footer>
-        <div class="container container-footer">
-          <p class="footer-text">#springMessageText("idp.footer", "Insert your footer text here.")</p>
-        </div>
-      </footer>
-    </div>
-    
- 	</body>
-</html>
+        
+                <form>
+                    <fieldset>
+                        <label>#springMessageText("idp.userprefs.options", "The following options are available:")</label>
+                        <input type="checkbox" id="spnego" name="_idp_spnego_autologin" value="1" onClick="check(this)">
+                        <label for="spnego"> #springMessageText("idp.userprefs.spnego", "Automatically try desktop login when available.")</label>
+                    </fieldset>
+                </form>
+            </section>
+            
+        </main>
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
+            </div>
+        </footer>
+    </body>
+</html>
\ No newline at end of file
diff --git a/idp-conf/src/test/resources/conf/idp.properties b/idp-conf/src/test/resources/conf/idp.properties
index 2b290c34c..6e80a0ce0 100644
--- a/idp-conf/src/test/resources/conf/idp.properties
+++ b/idp-conf/src/test/resources/conf/idp.properties
@@ -174,7 +174,7 @@ idp.logout.assumeAsync = true
 #idp.logout.propagationHidden = false
 
 # Bean to determine whether user should be allowed to cancel logout
-#idp.logout.promptUser=shibboleth.Conditions.FALSE
+idp.logout.promptUser=shibboleth.Conditions.TRUE
 
 # Message freshness and replay cache tuning
 #idp.policy.messageLifetime = PT3M
diff --git a/idp-war/src/main/webapp/css/logout.css b/idp-war/src/main/webapp/css/logout.css
index dcd10d241..5cd06c1a1 100644
--- a/idp-war/src/main/webapp/css/logout.css
+++ b/idp-war/src/main/webapp/css/logout.css
@@ -1,4 +1,7 @@
 /* Success/Failure indicators for logout propagation. */
+ol li:before {
+    content: ''
+}
 li.logout {
     line-height: 36px;
     padding-left: 36px;
diff --git a/idp-war/src/main/webapp/css/placeholder.css b/idp-war/src/main/webapp/css/placeholder.css
new file mode 100644
index 000000000..b23eda0e0
--- /dev/null
+++ b/idp-war/src/main/webapp/css/placeholder.css
@@ -0,0 +1,798 @@
+/* Colours pallet
+
+To change the colours, use find and replace with the values below:
+
+ #ECEFF1 - Body background, header / section border, read only / disabled input fields.
+
+ #1534E3 - Links, buttons, list items, selected radio, selected checkbox.
+
+ #1A237E - Hover buttons.
+
+ #32424A - Body text, input fields border.
+ 
+ #7A2D00 - Output message.
+ 
+ #B50024 - Error messages / fields.
+ 
+ #1C7D40 - Success messages / fields.
+ 
+ #999999 - read only / disabled input fields.
+
+*/
+
+html, html * {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+  box-sizing: border-box;
+  background: none;
+  background-repeat: no-repeat;
+  background-position: left top;
+  border: 0;
+  outline: 0;
+}
+
+html {
+  height: 100%;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
+  display: block;
+}
+
+/* Default document styles - fonts, font sizes, text colours, font weight */
+body {
+  font-family: Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 24px;
+  line-height: 1.5rem;
+  color: #32424a;
+  font-weight: 400;
+  max-width: 3000px;
+  margin: 0 auto;
+  background-color: #eceff1;
+  padding: 24px;
+}
+
+/* Links */
+a[href] {
+  text-decoration: none;
+  color: #1534e3;
+}
+
+/* Link hover states */
+a[href]:hover, a[href]:active, a[href]:focus {
+  text-decoration: underline;
+  color: #1534e3;
+}
+
+/* Heading styles */
+h1 {
+  font-size: 30px;
+  font-size: 1.875rem;
+  line-height: 36px;
+  line-height: 2.25rem;
+  font-weight: 700;
+}
+
+h2 {
+  font-size: 24px;
+  font-size: 1.5rem;
+  line-height: 28px;
+  line-height: 1.75rem;
+  font-weight: 400;
+}
+
+h3 {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 22px;
+  line-height: 1.375rem;
+  font-weight: 700;
+}
+
+h4 {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 18px;
+  line-height: 1.125rem;
+  font-weight: 700;
+  margin-bottom: 0.5em;
+}
+
+h5 {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 18px;
+  line-height: 1.125rem;
+  font-weight: 400;
+}
+
+h1, h2, h3, h4, h5, h6, p {
+  margin-bottom: 1em;
+}
+
+h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child {
+  margin-bottom: 0px;
+}
+
+/* List styles */
+ol, ul {
+  list-style: none;
+  margin: 20px 0;
+}
+
+ol:before, ol:after,
+ul:before, ul:after {
+  content: " ";
+  display: table;
+}
+
+ol:after,
+ul:after {
+  clear: both;
+}
+
+ol:last-child,
+ul:last-child {
+  margin-bottom: 0px;
+}
+
+ol:first-child,
+ul:first-child {
+  margin-top: 0px;
+}
+
+ul li {
+  padding-left: 22px;
+  margin-bottom: 4px;
+  position: relative;
+  list-style: none;
+}
+
+ul li:last-child {
+  margin-bottom: 0px;
+}
+
+ul li:before {
+  content: '';
+  -webkit-border-radius: 2px;
+  -ms-border-radius: 2px;
+  -moz-border-radius: 2px;
+  -o-border-radius: 2px;
+  border-radius: 2px;
+  background-color: #1534e3;
+  height: 7px;
+  width: 7px;
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 7px;
+}
+
+ol {
+  counter-reset: item;
+}
+
+ol li {
+  padding-left: 22px;
+  margin-bottom: 10px;
+  position: relative;
+  list-style: none;
+}
+
+ol li:last-child {
+  margin-bottom: 0px;
+}
+
+ol li:before {
+  color: #1534e3;
+  position: absolute;
+  left: 0;
+  content: counter(item) ". ";
+  counter-increment: item;
+  font-weight: 700;
+  top: 1px;
+}
+
+ol li:nth-child(n+10) {
+  padding-left: 30px;
+}
+
+ol li:nth-child(n+100) {
+  padding-left: 38px;
+}
+
+hr {
+  width: 100%;
+  clear: both;
+  border: 0;
+  outline: 0;
+  background-color: #eceff1;
+  height: 1px;
+  display: block;
+  margin: 30px 0;
+}
+
+b, strong {
+  font-weight: 700;
+}
+
+i, em {
+  font-style: italic;
+}
+
+small {
+  font-size: 0.8em;
+}
+
+big {
+  font-size: 1.2em;
+}
+
+.cc {
+  clear: both;
+  margin: 0 auto;
+  width: 100%;
+  max-width: 649px;
+  padding: 0 0;
+}
+
+.cc:before, .cc:after {
+  content: " ";
+  display: table;
+}
+
+.cc:after {
+  clear: both;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Main content area */
+main {
+  clear: both;
+  margin: 0 auto;
+  width: 100%;
+  max-width: 649px;
+  background-color: #fff;
+  -webkit-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -o-border-radius: 8px;
+  border-radius: 8px;
+  -webkit-box-shadow: 0px 0px 10px 0px rgba(38, 50, 56, 0.11);
+  -ms-box-shadow: 0px 0px 10px 0px rgba(38, 50, 56, 0.11);
+  -moz-box-shadow: 0px 0px 10px 0px rgba(38, 50, 56, 0.11);
+  -o-box-shadow: 0px 0px 10px 0px rgba(38, 50, 56, 0.11);
+  box-shadow: 0px 0px 10px 0px rgba(38, 50, 56, 0.11);
+}
+
+/* Add a border top when 2 sections are together */
+main section + section {
+  border-top: 1px solid #eceff1;
+}
+
+/* Header */
+header {
+  display: block; /* Change to display: none to hide */
+  border-bottom: 1px solid #eceff1;
+  text-align: center;
+  padding: 6% 8%;
+}
+
+header .main-logo {
+  display: block;
+  margin: 0 auto;
+}
+
+.service-logo {
+	display: block;
+	margin: 24px 0;
+}
+
+section {
+  padding: 8%;
+}
+
+/* Output Messages */
+.output-message {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 18px;
+  line-height: 1.125rem;
+  font-style: italic;
+  -webkit-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  background-color: #FFD8C2;
+  display: block;
+  padding: 4%;
+  margin-bottom: 20px;
+  color: #7A2D00;
+}
+
+.output-message:last-child {
+  margin-bottom: 0px;
+}
+
+/* Output Message Success */
+.output-message.output--success {
+  background-color: #DCF9E7;
+  color: #1C7D40;
+}
+
+/* Output Message Error */
+.output-message.output--error {
+  background-color: #FFF0F3;
+  color: #B50024;
+}
+
+.boxed {
+  -webkit-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0px 0px 10px 0px rgba(38, 50, 56, 0.11);
+  -ms-box-shadow: 0px 0px 10px 0px rgba(38, 50, 56, 0.11);
+  -moz-box-shadow: 0px 0px 10px 0px rgba(38, 50, 56, 0.11);
+  -o-box-shadow: 0px 0px 10px 0px rgba(38, 50, 56, 0.11);
+  box-shadow: 0px 0px 10px 0px rgba(38, 50, 56, 0.11);
+  background-color: #fff;
+  padding: 6%;
+  margin: 30px 0;
+}
+
+.boxed:last-child {
+  margin-bottom: 0px;
+}
+
+.boxed:first-child {
+  margin-top: 0px;
+}
+
+/* Footer style */
+footer {
+  z-index: 1;
+  position: relative;
+  text-align: center;
+  margin-top: 20px;
+  font-size: 12px;
+  font-size: 0.75rem;
+  line-height: 16px;
+  line-height: 1rem;
+}
+
+/* Forms styles */
+fieldset {
+  display: block;
+  margin-bottom: 20px;
+}
+
+fieldset:last-child {
+  margin-bottom: 0px;
+}
+
+fieldset .field-validation {
+  display: block;
+  margin-top: 10px;
+}
+
+fieldset .error {
+  color: #B50024;
+}
+
+fieldset legend span {
+  display: block;
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  height: 0;
+}
+
+/* Form labels */
+label {
+  vertical-align: top;
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 18px;
+  line-height: 1.125rem;
+  font-weight: 700;
+  display: block;
+  color: #32424a;
+  margin-bottom: 6px;
+}
+
+label:focus {
+  color: #1534E3;
+}
+
+/* Form input fields */
+input[type="text"], 
+input[type="email"], 
+input[type="password"], 
+input[type="telephone"], 
+input[type="tel"], 
+input[type="url"], 
+textarea, 
+select {
+  background-color: #fff;
+  border: 2px solid #32424a;
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -ms-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  color: #32424a;
+  padding: 13px 20px;
+  display: block;
+  width: 100%;
+  -webkit-appearance: none;
+  -ms-appearance: none;
+  -moz-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  -webkit-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+}
+
+/* Form input focus */
+input[type="text"]:focus, 
+input[type="email"]:focus, 
+input[type="password"]:focus, 
+input[type="telephone"]:focus, 
+input[type="tel"]:focus, 
+input[type="url"]:focus, 
+textarea:focus, 
+select:focus,
+input[type="text"]:active, 
+input[type="email"]:active, 
+input[type="password"]:active, 
+input[type="telephone"]:active, 
+input[type="tel"]:active, 
+input[type="url"]:active, 
+textarea:active, 
+select:active {
+  border-color: #1534e3;
+  background-color: #fff;
+}
+
+/* Form input errors */
+input[type="text"].error, 
+input[type="email"].error, 
+input[type="password"].error, 
+input[type="telephone"].error, 
+input[type="tel"].error, 
+input[type="url"].error, 
+textarea.error, 
+select.error {
+  border-color: #B50024;
+}
+
+/* Form input read only / disabled */
+input[type="text"]:read-only, 
+input[type="email"]:read-only, 
+input[type="password"]:read-only, 
+input[type="telephone"]:read-only,
+input[type="tel"]:read-only, 
+input[type="url"]:read-only, 
+textarea:read-only, 
+select:read-only, 
+input[type="text"]:disabled, 
+input[type="email"]:disabled, 
+input[type="password"]:disabled, 
+input[type="telephone"]:disabled, 
+input[type="tel"]:disabled, 
+input[type="url"]:disabled, 
+textarea:disabled, 
+select:disabled {
+  background-color: #ECEFF1;
+  pointer-events: none;
+}
+
+/* Text areas */
+textarea {
+  height: 124px;
+  resize: none;
+}
+
+
+/* Dropdowns */
+select {
+  -webkit-appearance: auto;
+  -ms-appearance: auto;
+  -moz-appearance: auto;
+  -o-appearance: auto;
+  appearance: auto;
+}
+
+select:read-only {
+  background-color: #fff;
+  pointer-events: unset;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+/* Checkboxes / Radio buttons */
+input[type="checkbox"], input[type="radio"] {
+  position : absolute;
+  opacity: 0;
+  height: 0;
+  width: 0;
+}
+
+input[type="checkbox"] + label, input[type="radio"] + label {
+  display: block;
+  font-weight: 400;
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 24px;
+  line-height: 1.5rem;
+  cursor: pointer;
+  position: relative;
+  padding-left: 30px;
+  padding-top: 3px;
+  margin-bottom: 4px;
+  margin-right: 12px;
+  display: inline-block;
+}
+
+input[type="checkbox"] + label:before, input[type="radio"] + label:before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  background-color: #fff;
+  border: 2px solid #32424a;
+  -webkit-transition: all 0.2s ease-out;
+  -ms-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+input[type="checkbox"] + label:after, input[type="radio"] + label:after {
+  content: "";
+  position: absolute;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+  display: none;
+}
+
+input[type="checkbox"]:checked + label, input[type="radio"]:checked + label,
+input[type="checkbox"]:focus + label, input[type="radio"]:focus + label {
+  color: #1534e3;
+}
+
+input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before,
+input[type="checkbox"]:focus + label:before, input[type="radio"]:focus + label:before {
+  border-color: #1534e3;
+}
+
+input[type="checkbox"]:checked + label:after, input[type="radio"]:checked + label:after {
+  display: block;
+}
+
+input[type="checkbox"] + label:before {
+  -webkit-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+}
+
+input[type="checkbox"] + label:after {
+  left: 8px;
+  top: 5px;
+  width: 4px;
+  height: 10px;
+  border: solid #1534e3;
+  border-width: 0 4px 4px 0;
+}
+
+input[type="radio"] + label:before {
+  -webkit-border-radius: 100%;
+  -ms-border-radius: 100%;
+  -moz-border-radius: 100%;
+  -o-border-radius: 100%;
+  border-radius: 100%;
+}
+
+input[type="radio"] + label:after {
+  background-color: #1534e3;
+  height: 12px;
+  width: 12px;
+  -webkit-border-radius: 100%;
+  -ms-border-radius: 100%;
+  -moz-border-radius: 100%;
+  -o-border-radius: 100%;
+  border-radius: 100%;
+  left: 6px;
+  top: 8px;
+}
+
+/* Buttons / Submit buttons */
+button, input[type=button], 
+input[type=submit], 
+a.button, 
+.button {
+  display: inline-block;
+  text-align: center;
+  background-color: #1534e3;
+  border: 4px solid #1534e3;
+  font-weight: 700;
+  padding: 11px 74px;
+  cursor: pointer;
+  color: #fff;
+  -webkit-appearance: none;
+  -ms-appearance: none;
+  -moz-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  -webkit-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-transition: all 0.2s ease-out;
+  -ms-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+/* Button hover & focus states */
+button:hover, 
+input[type=button]:hover, 
+input[type=submit]:hover, 
+a.button:hover, 
+.button:hover, 
+button:focus, 
+input[type=button]:focus, 
+input[type=submit]:focus, 
+a.button:focus, 
+.button:focus {
+  background: #1a237e;
+  color: #fff !important;
+  text-decoration: none !important;
+  border-color: #1a237e;
+}
+
+/* Secondary button styles */
+button.button--secondary, 
+input[type=button].button--secondary, 
+input[type=submit].button--secondary, 
+a.button.button--secondary, 
+.button.button--secondary {
+  background-color: transparent;
+  border-color: #1534e3;
+  color: #1534e3;
+}
+
+/* Secondary button hover & focus states */
+button.button--secondary:hover, 
+input[type=button].button--secondary:hover, 
+input[type=submit].button--secondary:hover, 
+a.button.button--secondary:hover, 
+.button.button--secondary:hover,
+button.button--secondary:focus, 
+input[type=button].button--secondary:focus, 
+input[type=submit].button--secondary:focus, 
+a.button.button--secondary:focus, 
+.button.button--secondary:focus {
+  background: #1a237e;
+  border-color: #1a237e;
+}
+
+/* Secondary button disabled states */
+button.button--secondary:disabled, 
+input[type=button].button--secondary:disabled, 
+input[type=submit].button--secondary:disabled, 
+a.button.button--secondary:disabled, 
+.button.button--secondary:disabled {
+  background-color: transparent;
+  color: #999999;
+}
+
+/* Full width buttons */
+button.button--full, 
+input[type=button].button--full, 
+input[type=submit].button--full, 
+a.button.button--full, 
+.button.button--full {
+  width: 100%;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+/* Button disabled states */
+button:disabled, 
+input[type=button]:disabled, 
+input[type=submit]:disabled, 
+a.button:disabled, 
+.button:disabled {
+  pointer-events: none;
+  background-color: #999999;
+  border-color: #999999;
+}
+
+/* Placeholder styles */
+::-webkit-input-placeholder {
+  color: #a9b0b4;
+}
+
+:-moz-placeholder {
+  color: #a9b0b4;
+}
+
+::-moz-placeholder {
+  color: #a9b0b4;
+}
+
+:-ms-input-placeholder {
+  color: #a9b0b4;
+}
+
+/* Grid (used for 2 columns) */
+.grid:before, .grid:after {
+  content: " ";
+  display: table;
+}
+
+.grid:after {
+  clear: both;
+}
+
+.grid > .grid-item {
+  margin-bottom: 18px;
+  min-height: 1px;
+  width: 100%;
+}
+
+.grid:last-child > .item:last-child {
+  margin-bottom: 0px;
+}
+
+ at media screen and (min-width: 760px) {
+	
+  .grid.md-2 > .grid-item {
+    float: left;
+    width: 48.34436%;
+    margin-right: 3.31126%;
+  }
+  
+  .grid.md-2 > .grid-item:nth-child(n), .grid.md-2 > .grid-item:nth-of-type(n) {
+    margin-right: 3.31126%;
+    clear: none;
+  }
+  
+  .grid.md-2 > .grid-item:nth-child(2n) {
+    margin-right: 0;
+  }
+  
+  .grid.md-2 > .grid-item:nth-child(2n+1) {
+    clear: both;
+  }
+  
+}
diff --git a/idp-war/src/main/webapp/images/placeholder-logo.png b/idp-war/src/main/webapp/images/placeholder-logo.png
new file mode 100644
index 000000000..f5807ed22
Binary files /dev/null and b/idp-war/src/main/webapp/images/placeholder-logo.png differ
diff --git a/idp-war/src/main/webapp/images/placeholder-service-logo.png b/idp-war/src/main/webapp/images/placeholder-service-logo.png
new file mode 100644
index 000000000..efae81bd9
Binary files /dev/null and b/idp-war/src/main/webapp/images/placeholder-service-logo.png differ

-- 
To stop receiving notification emails like this one, please contact
the administrator of this repository.


More information about the commits mailing list