Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

The he EmpowerID web user interface is made up of the comprises pages within the UI container role as well as the user interfaces provided by the microservices applications (e.g., IAM Shop, My Identity, etc.). The Understanding the defined structure of the user interface within the UI container role adheres to a defined structure which is helpful to understand when is beneficial for supporting the EmpowerID platform and communicating with EmpowerID support staff.

...

Key features of the pages in the UI container role

...

include:

  1. A responsive design web application built using Microsoft http://ASP.NET MVC and HTML5.

...

  1. A brandable user interface

...

  1. that can be

...

  1. customized and styled using CSS and JavaScript

...

  1. .

  2. The ability to "override" out-of-the-box pages

...

  1. with custom pages by copying your custom page of the same name into a mirrored folder structure called

...

  1. "Overrides."

  2. Pages can be classified based on a few specific templates that are repeated for different types of objects (e.g., People, Groups, etc.).

Navigation Sidebar

  • The Navigation Sidebar is how you navigate the primary tool for navigating through the pages of the EmpowerID Web site website and search searching for people and other various types of resources.

  • The Notably, the sidebar is “security trimmed” which means "security trimmed," meaning that the number of sections and links in the sidebar that visible to a user can see will differ according to the amount depends on the level of access granted by your organization has given them.

  • The sidebar also contains Additionally, the sidebar includes the Global Search control

    Image RemovedImage Removed

    for quick and easy searches.

    Image AddedImage Added
Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>About the Navigation Sidebar</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/NavSidebar.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth: 80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

Find Pages

  • Each type of object in In the EmpowerID system, each object type has a Find page that lists displays the objects of that type stored or referenced in the Identity Warehouse.

  • The URL for Find pages is: https://%yourserver%/ui#Common/Find/%ObjectName%

  • On the server, Find pages are located under %InstallFolder%\EmpowerID\Web Sites\EmpowerID.Web.PortableAreas.Common\Views\ObjectTypeSearch

  • Find pages typically contain usually consist of one or more tabs listing objects of that specific type

  • Optionally, Find pages can optionally also include feature a Tree pane of locations on the left and an action pane of workflows and page actions on the right.


Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Find Pages</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/FindPages.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth: 80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}


Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Management Role Find Page</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/FindPageExample.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth: 80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

View One Pages

View One pages

are what

display a single instance of any object. For example, when clicking on

the

a group link

for a group

in the Find Group page, the next page to load is the View One page for that group.

Key characteristics of View One pages include:

  1. They are typically read-only and

are
  1. used to display information about an object and any related data.

More than one
  1. Multiple View One

page
  1. pages can exist for a specific object type

of object in order
  1. to

show
  1. display only relevant fields

in cases where
  1. when a single type

might have many subtypes –
  1. has various subtypes (e.g., Account for AD versus Account for Office 365).

  2. The specific View One page to be loaded is

defined
  1. determined by logic on the SQL view and configured in

what is called ResourceTypeFormIdentitifiers that
  1. ResourceTypeFormIdentifiers, which define each subtype and the View One and Editone to load.

  2. View One pages are located:

    • %InstallPAth%Root\UI\Web Sites\EmpowerID.Web\EmpowerID.Web.PortableAreas.Common\Views\ViewOne\Details

    Image Modified


Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>View One Page</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/ViewOnePages.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth: 80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}


Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>View One Page Example</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/ViewOnePageExample.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth: 80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

Edit One Pages

Edit One pages

are what

display a single editable instance of any object. For example, when clicking on

the link for

a group link in the

group’s

group's View One page, the next page to load is the Edit One page for that group

More than one Edit One page

.

Key characteristics of Edit One pages include:

  1. Multiple Edit One pages can exist for a specific object type

of object in order
  1. to

show
  1. display only relevant fields

in cases where
  1. when a single type

might have many subtypes –
  1. has various subtypes (e.g., Account for AD versus Account for Office 365).

  2. The specific Edit One page to be loaded is

defined
  1. determined by logic on the SQL view and configured in

what are called ResourceTypeFormIdentitifiers that
  1. ResourceTypeFormIdentifiers, which define each subtype and the View One and Edit One to load.

EditOne

Edit One pages are located at:

%INSTALLPATH%\Root\UI\Web Sites\EmpowerID.Web\EmpowerID.Web.PortableAreas.Common\Views\EditOne

Each Edit One page

will send

sends its edited data to one or more workflows for processing.

Image Modified


Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Edit One Pages</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/EditOnePage.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth: 80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}


Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Edit One Page Example</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/EditOnePageExample.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth: 80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

ResourceTypeFormIdentifiers

The ResourceTypeFormIdentifiers determine the specific View One page or and Edit One page that loads pages to load for an object is defined by logic on , based on the logic configured in the SQL view and configured in what EmpowerID calls “ResourceTypeFormIdentitifiers. These identifiers define each subtype and the their corresponding View One and Edit One to loadpages.

They You can be seen view and configured configure ResourceTypeFormIdentifiers in the EmpowerID UI at by visiting the following URL: https://%yourserver%/ui#Common/Find/ResourceTypeFormIdentifier


Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Resource Type Form Identifiers</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/FormIdentifiers.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth: 80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

Report Pages

Report pages use the same template as Find pages and are designed to show some specific view of the data


Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Report Pages</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/ReportPages.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth: 80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

Run Workflow Page

Workflows

are run either as

in EmpowerID can be executed as either anonymous or authenticated:

  1. Anonymous workflows run from the following URL:

  1. https://%yourserver%/ui#aw/%workflowname%

Authentication
  1. Authenticated workflows run from the following URL:

  1. https://%yourserver%/ui#w/%workflowname%

Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Run Workflow Page</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/RunWorkflowsPage.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth: 80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

Branding the UI Role Container Web Site

The default

To customize the look and feel of the UI role container web application (

not

excluding microservices)

can be changed by overriding the

, you can override the default CSS rules and images used for

this

the website.

The theme of the UI role container web application can be changed

You can change the theme globally or

even

have

a

different

theme

themes for each exposed URL

you expose

.

First, create

Follow these steps:

  1. Create a new folder named after the FQDN or fully resolvable DNS of the tenant in the EmpowerID Web CDN Overrides/Tenants directory

of the EmpowerID Web CDN. E.g.
  1. : "%INSTALLPATH%\Web Sites\EmpowerID.Web.Cdn\Overrides\Tenants\CustomTenantFolder",

"
  1. where "CustomTenantFolder" is the name of the folder you

are creating.Once you have added the folder, you need to do the following:
  1. create.

  2. Create a child folder named "Themes

in the custom folder. For example, if you are creating a custom FQDN folder for a Tenant with a FQDN of sso.andysbeans.com, you first create a sso.empowerid.com folder in the above-mentioned directory, then create within that folder the Themes
  1. " within the custom folder.

  2. Create a child folder named "EmpowerID

in
  1. " within the "Themes" folder.

  2. Create a child folder named "Images

in
  1. " within the "EmpowerID" folder.

Custom images can be placed

To customize images, place them in:

%INSTALLPATH%\Web Sites\EmpowerID.Web.Cdn\Overrides\

Tenants\<YourCustomTenant>

Tenants<YourCustomTenant>\Themes\EmpowerID\Images

Custom CSS can be added to

To add custom CSS, edit the blank "overrides.css" file located in:

%INSTALLPATH%\Web Sites\EmpowerID.Web.Cdn\Overrides\

Tenants

Tenants<YourCustomTenant>\

<YourCustomTenant>\

Themes\overrides.css

Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Branding the Site</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/Branding.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth: 80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}


Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Inserting Custom Images and CSS</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/BrandingProcess.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth: 80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 20px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

Overriding Out-of-the-Box Pages

When customizing Web pages, it is recommended that you

To customize web pages without altering the original pages, use EmpowerID's Override technology

rather than modifying the original pages

.

This allows you to

quickly

easily revert

back

to the

original

default pages if

the custom pages are no longer

needed.

To

Follow these steps to use the Override technology

, you add your pages to an Overrides folder structure in

:

  1. Create an "Overrides" folder structure within the EmpowerID Web Sites directory

and place your custom pages within
  1. that

directory.The Overrides structure
  1. mirrors the shipping page directory structure

so that pages copied into the corresponding location
  1. .

  2. Place your custom pages with the same names

will be loaded preferentiallyE.g.. for View One pages
  1. as the original pages in the corresponding locations within the Overrides folder structure. EmpowerID will load the custom pages preferentially.

For example, to override View One pages, place your custom pages in:

EmpowerID.Web.Overrides\Areas\Common\Views\ViewOne\Details

Warning

Never customize any Always use the Overrides folder for customizations and avoid modifying shipping pages or JavaScript files outside of the overridesOverrides directory.

Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Overriding Pages</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/Overrides.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth: 80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

...