NIHVIVO-556: Making name selectors and markup consistent (using dash in between words VS camel notation), adding more aria roles, shortening selector names, just continuing cleaning markup for templates and optimizing css files.

This commit is contained in:
mb863 2010-11-24 18:26:04 +00:00
parent 534face143
commit da905d48c2
7 changed files with 109 additions and 115 deletions

View file

@ -783,7 +783,7 @@ padding-top:36px;
/* styles for error alerts */ /* styles for error alerts */
#errorAlert{ #error-alert{
color:#900; color:#900;
padding:0px; padding:0px;
margin-bottom:5px; margin-bottom:5px;
@ -792,7 +792,7 @@ padding-top:36px;
} }
#errorAlert img{ #error-alert img{
float:left; float:left;
margin:0; margin:0;
padding:0; padding:0;
@ -801,7 +801,7 @@ padding-top:36px;
} }
#errorAlert p{ #error-alert p{
padding-left:30px; padding-left:30px;
font-size:0.9em; font-size:0.9em;

View file

@ -99,7 +99,7 @@
} }
/* styles for error alerts */ /* styles for error alerts */
#errorAlert{ #error-alert{
color:#900; color:#900;
padding:0px; padding:0px;
margin-bottom:5px; margin-bottom:5px;
@ -108,14 +108,14 @@
} }
#errorAlert img{ #error-alert img{
float:left; float:left;
margin:0; margin:0;
padding:0; padding:0;
vertical-align:middle; vertical-align:middle;
} }
#errorAlert p{ #error-alert p{
padding-left:35px; padding-left:35px;
font-size:0.9em; font-size:0.9em;
line-height:30px; line-height:30px;

View file

@ -27,9 +27,9 @@ ${stylesheets.addFromTheme("/css/screen.css")}
<div id="contentwrap"> <div id="contentwrap">
<#if flash?has_content> <#if flash?has_content>
<div id="flash-message"> <section id="flash-message" role="alert">
${flash} ${flash}
</div> </section>
</#if> </#if>
<div id="content"> <div id="content">

View file

@ -64,19 +64,19 @@
padding: 15px; padding: 15px;
} }
/* styles for error alerts */ /* styles for error alerts */
#errorAlert { #error-alert {
color: #900; color: #900;
padding: 0px; padding: 0px;
margin-bottom: 5px; margin-bottom: 5px;
height: 30px; height: 30px;
} }
#errorAlert img { #error-alert img {
float: left; float: left;
margin: 0; margin: 0;
padding: 0; padding: 0;
vertical-align: middle; vertical-align: middle;
} }
#errorAlert p { #error-alert p {
padding-left: 35px; padding-left: 35px;
font-size: 0.9em; font-size: 0.9em;
line-height: 30px; line-height: 30px;

View file

@ -118,6 +118,7 @@ ul#header-nav a:active {
height:38px; height:38px;
top:40px; top:40px;
right:10px; right:10px;
padding-top:5px;
} }
#search-field { #search-field {
width:396px; width:396px;
@ -190,6 +191,7 @@ ul#main-nav {
background: #fff; background: #fff;
min-height: 450px; min-height: 450px;
padding: 20px; padding: 20px;
overflow:hidden;
} }
/* INTRO ------> */ /* INTRO ------> */
#intro { #intro {
@ -217,11 +219,8 @@ ul#main-nav {
color: #b2d15a; color: #b2d15a;
} }
/* LOG IN------> */ /* LOG IN------> */
/* Login container on home page */ #login {
#login-container {
float: right; float: right;
}
#log-in-form {
width:314px; width:314px;
border:1px solid #e8ece9; border:1px solid #e8ece9;
margin-right:25px; margin-right:25px;
@ -229,41 +228,40 @@ ul#main-nav {
margin-bottom:30px; margin-bottom:30px;
overflow:hidden; overflow:hidden;
} }
#log-in-form h2 { #login h2 {
font-size: 22px; font-size: 22px;
color: #2485ae; color: #2485ae;
padding-left:15px; padding-left:15px;
padding-top:18px; padding-top:18px;
border-bottom:none; border-bottom:none;
} }
#errorAlert { #error-alert {
padding:12px 10px 10px 10px; margin:0 12px;
width:294px; padding:12px;
border-top:1px dotted #a12424; padding-bottom:25px;
border-left:1px dotted #a12424; border:1px dotted #a12424;
border-right:1px dotted #a12424;
} }
#errorAlert img { #error-alert img {
float:left; float:left;
margin:0; margin:0;
padding:0; padding:0;
vertical-align:middle; vertical-align:middle;
} }
#errorAlert p { #error-alert p {
padding-left:40px; padding-left:40px;
font-size:0.9em; font-size:0.9em;
line-height: 1.3em; line-height: 1.3em;
color:#a12424; color:#a12424;
padding-top:5px; padding-top:5px;
} }
#log-in-form label { #login-form label {
display:block; display:block;
color: #5e6363; color: #5e6363;
padding-top:20px; padding-top:20px;
padding-left:38px; padding-left:38px;
font-size:14px; font-size:14px;
} }
#log-in-form input.text-field { #login-form input.text-field {
border:0; border:0;
font-size:14px; font-size:14px;
padding:5px; padding:5px;
@ -277,22 +275,22 @@ ul#main-nav {
-moz-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
} }
#log-in-form input.text-field:focus { #login-form input.text-field:focus {
border:1px solid rgba(57, 138, 172, 0.5); border:1px solid rgba(57, 138, 172, 0.5);
background-color: rgba(57, 138, 172, 0.1); background-color: rgba(57, 138, 172, 0.1);
} }
#log-in-form p.submit { #login-form p.submit {
width:100px; width:100px;
height:40px; height:40px;
margin-top:20px; margin-top:20px;
margin-left:38px; margin-left:38px;
} }
#log-in-form p.submit-password{ #login-form p.submit-password{
height:40px; height:40px;
margin-top:20px; margin-top:20px;
margin-left:38px; margin-left:38px;
} }
#log-in-form input.checkbox-remember-me { #login-form input.checkbox-remember-me {
float:left; float:left;
height:14px; height:14px;
width:14px; width:14px;
@ -301,7 +299,7 @@ background-color: rgba(57, 138, 172, 0.1);
margin-top:33px; margin-top:33px;
margin-left:20px; margin-left:20px;
} }
#log-in-form label.label-remember-me { #login-form label.label-remember-me {
display:block; display:block;
float:right; float:right;
color: #5e6363; color: #5e6363;
@ -343,6 +341,7 @@ p.passwordNote{
border:1px dotted #E2C822; border:1px dotted #E2C822;
background-color:#FFF9D7; background-color:#FFF9D7;
padding:0.8em; padding:0.8em;
margin-bottom:20px;
} }
/* HOME SEARCH ------> */ /* HOME SEARCH ------> */
#search-home { #search-home {
@ -401,7 +400,7 @@ input.search-home-vivo {
font-size: 20px; font-size: 20px;
} }
/* BROWSE CLASS GROUPS ------> */ /* BROWSE CLASS GROUPS ------> */
ul#browse-classGroups { ul#browse-classgroups {
float: left; float: left;
width: 200px; width: 200px;
border: 1px solid #dde4e3; border: 1px solid #dde4e3;
@ -412,7 +411,7 @@ ul#browse-classGroups {
margin-top: 10px; margin-top: 10px;
padding-top: 10px; padding-top: 10px;
} }
ul#browse-classGroups li { ul#browse-classgroups li {
display: block; display: block;
border-bottom: 1px solid #dde4e3; border-bottom: 1px solid #dde4e3;
font-size: 18px; font-size: 18px;
@ -420,10 +419,10 @@ ul#browse-classGroups li {
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
} }
ul#browse-classGroups li:last-child { ul#browse-classgroups li:last-child {
border-bottom: none border-bottom: none
} }
ul#browse-classGroups a { ul#browse-classgroups a {
display: block; display: block;
padding-left: 15px; padding-left: 15px;
width: 200px; width: 200px;
@ -431,15 +430,15 @@ ul#browse-classGroups a {
color: #5e6363; color: #5e6363;
text-decoration: none; text-decoration: none;
} }
ul#browse-classGroups a:hover { ul#browse-classgroups a:hover {
background: url(../images/arrow.gif) 0 12px no-repeat; background: url(../images/arrow.gif) 0 12px no-repeat;
color: #2ea0cf; color: #2ea0cf;
} }
ul#browse-classGroups a.selected { ul#browse-classgroups a.selected {
color: #2ea0cf; color: #2ea0cf;
background: url(../images/arrow.gif) 0 12px no-repeat; background: url(../images/arrow.gif) 0 12px no-repeat;
} }
ul#browse-classGroups .count-classes { ul#browse-classgroups .count-classes {
font-size: 14px font-size: 14px
} }
/* BROWSE CLASSES IN CLASS GROUP ------> */ /* BROWSE CLASSES IN CLASS GROUP ------> */
@ -511,7 +510,7 @@ ul#class-group-list .count-individuals {
height: 400px; height: 400px;
border: 1px solid #dfe6e6; border: 1px solid #dfe6e6;
background: #f7f9f9; background: #f7f9f9;
padding-bottom: 30px; padding-bottom: 50px;
} }
#highlights h4 { #highlights h4 {
width: 13%; width: 13%;
@ -621,7 +620,7 @@ p.summary time {
font-weight: normal; font-weight: normal;
} }
/* LATEST PUBLICATIONS ------> */ /* LATEST PUBLICATIONS ------> */
article.latest-publications-item { #latest-publications article {
width: 232px; width: 232px;
height: 35px; height: 35px;
background: url(../images/icon-pub.png) 0 0 no-repeat; background: url(../images/icon-pub.png) 0 0 no-repeat;

View file

@ -10,6 +10,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>${title}</title> <title>${title}</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
${stylesheets.addFromTheme("/css/screen.css")} ${stylesheets.addFromTheme("/css/screen.css")}
<#include "stylesheets.ftl"> <#include "stylesheets.ftl">
@ -34,23 +36,23 @@
</#if>--> </#if>-->
<nav role="navigation"> <nav role="navigation">
<ul id="header-nav"> <ul id="header-nav" role="list">
<#if user.loggedIn> <#if user.loggedIn>
<li><span class="pictos-arrow-10">U</span> ${user.loginName}</li> <li role="listitem"><span class="pictos-arrow-10">U</span> ${user.loginName}</li>
<li><a href="${urls.logout}">Log out</a></li> <li role="listitem"><a href="${urls.logout}">Log out</a></li>
<#if user.hasSiteAdminAccess> <#if user.hasSiteAdminAccess>
<li><a href="${urls.siteAdmin}">Site Admin</a></li> <li role="listitem"><a href="${urls.siteAdmin}">Site Admin</a></li>
</#if> </#if>
<#else> <#else>
<li><a title="log in to manage this site" href="${urls.login}">Log in</a></li> <li role="listitem"><a title="log in to manage this site" href="${urls.login}">Log in</a></li>
</#if> </#if>
<#-- List of links that appear in submenus, like the header and footer. --> <#-- List of links that appear in submenus, like the header and footer. -->
<li><a href="${urls.about}">About</a></li> <li role="listitem"><a href="${urls.about}">About</a></li>
<#if urls.contact??> <#if urls.contact??>
<li><a href="${urls.contact}">Contact Us</a></li> <li role="listitem"><a href="${urls.contact}">Contact Us</a></li>
</#if> </#if>
<li><a href="http://www.vivoweb.org/support" target="blank">Support</a></li> <li role="listitem"><a href="http://www.vivoweb.org/support" target="blank">Support</a></li>
</ul> </ul>
</nav> </nav>
@ -58,7 +60,7 @@
<fieldset> <fieldset>
<legend>Search form</legend> <legend>Search form</legend>
<form id="searchForm" action="${urls.search}" name="searchForm" role="search"> <form id="search-form" action="${urls.search}" name="search-form" role="search">
<#if user.showFlag1SearchField> <#if user.showFlag1SearchField>
<select id="search-form-modifier" name="flag1" class="form-item" > <select id="search-form-modifier" name="flag1" class="form-item" >
<option value="nofiltering" selected="selected">entire database (${user.loginName})</option> <option value="nofiltering" selected="selected">entire database (${user.loginName})</option>
@ -69,8 +71,7 @@
</#if> </#if>
<div id="search-field"> <div id="search-field">
<input type="text" name="querytext" class="search-vivo" value="${querytext!}" /> <input type="text" name="querytext" class="search-vivo" value="${querytext!}" />
<a class ="submit" href="javascript:document.searchForm.submit();">Search</a> <a class ="submit" href="javascript:document.search-form.submit();" role="button">Search</a>
<!-- <input class ="submit" name="submit" type="submit" value="Search" /> -->
</div> </div>
</form> </form>
</fieldset> </fieldset>
@ -78,14 +79,14 @@
</header> </header>
<nav role="navigation"> <nav role="navigation">
<ul id="main-nav"> <ul id="main-nav" role="list">
<#list tabMenu.items as item> <#list tabMenu.items as item>
<li><a href="${item.url}" <#if item.active> class="selected" </#if>>${item.linkText}</a></li> <li role="listitem"><a href="${item.url}" <#if item.active> class="selected" </#if>>${item.linkText}</a></li>
</#list> </#list>
</ul> </ul>
</nav> </nav>
<div id="wrapper-content"> <div id="wrapper-content" role="main">
<#if flash?has_content> <#if flash?has_content>
<section id="flash-message" role="alert"> <section id="flash-message" role="alert">
${flash} ${flash}
@ -111,36 +112,34 @@
</section> <!-- #search-home --> </section> <!-- #search-home -->
</section> <!-- #intro --> </section> <!-- #intro -->
<section id="login-container" role="region">
<@widget name="login" /> <@widget name="login" />
</section>
<section id="browse" role="region"> <section id="browse" role="region">
<h4>Browse</h4> <h4>Browse</h4>
<ul id="browse-classGroups"> <ul id="browse-classgroups" role="list">
<li><a class="selected" href="#">People<span class="count-classes"> (1,280)</span></a></li> <li role="listitem"><a class="selected" href="#">People<span class="count-classes"> (1,280)</span></a></li>
<li><a href="#">Courses<span class="count-classes"> (1,300)</span></a></li> <li role="listitem"><a href="#">Courses<span class="count-classes"> (1,300)</span></a></li>
<li><a href="#">Activities<span class="count-classes"> (980)</span></a></li> <li role="listitem"><a href="#">Activities<span class="count-classes"> (980)</span></a></li>
<li><a href="#">Topics<span class="count-classes"> (345)</span></a></li> <li role="listitem"><a href="#">Topics<span class="count-classes"> (345)</span></a></li>
<li><a href="#">Events<span class="count-classes"> (670)</span></a></li> <li role="listitem"><a href="#">Events<span class="count-classes"> (670)</span></a></li>
<li><a href="#">Organizations<span class="count-classes"> (440)</span></a></li> <li role="listitem"><a href="#">Organizations<span class="count-classes"> (440)</span></a></li>
<li><a href="#">Publications<span class="count-classes"> (670)</span></a></li> <li role="listitem"><a href="#">Publications<span class="count-classes"> (670)</span></a></li>
<li><a href="#">Locations<span class="count-classes"> (903)</span></a></li> <li role="listitem"><a href="#">Locations<span class="count-classes"> (903)</span></a></li>
</ul> </ul>
<section id="browse-classes" role="navigation"> <section id="browse-classes" role="navigation">
<nav> <nav>
<ul id="class-group-list"> <ul id="class-group-list" role="list">
<li><a href="#">Faculty Member<span class="count-individuals"> (18,080)</span></a></li> <li role="listitem"><a href="#">Faculty Member<span class="count-individuals"> (18,080)</span></a></li>
<li><a class="selected" href="#">Graduate Student<span class="count-individuals"> (2,550)</span></a></li> <li role="listitem"><a class="selected" href="#">Graduate Student<span class="count-individuals"> (2,550)</span></a></li>
<li><a href="#">Librarian <span class="count-individuals"> (1,280)</span></a></li> <li role="listitem"><a href="#">Librarian <span class="count-individuals"> (1,280)</span></a></li>
<li><a href="#">Non-Academic <span class="count-individuals"> (280)</span></a></li> <li role="listitem"><a href="#">Non-Academic <span class="count-individuals"> (280)</span></a></li>
<li><a href="#">Non-Faculty Academic <span class="count-individuals"> (2,380)</span></a></li> <li role="listitem"><a href="#">Non-Faculty Academic <span class="count-individuals"> (2,380)</span></a></li>
<li><a href="#">Person<span class="count-individuals"> (2,480)</span></a></li> <li role="listitem"><a href="#">Person<span class="count-individuals"> (2,480)</span></a></li>
<li><a href="#">Postdoc <span class="count-individuals"> (1,380)</span></a></li> <li role="listitem"><a href="#">Postdoc <span class="count-individuals"> (1,380)</span></a></li>
<li><a href="#">Professor Emeritus<span class="count-individuals"> (680)</span></a></li> <li role="listitem"><a href="#">Professor Emeritus<span class="count-individuals"> (680)</span></a></li>
<li><a href="#">Undergraduate Student<span class="count-individuals"> (880)</span></a></li> <li role="listitem"><a href="#">Undergraduate Student<span class="count-individuals"> (880)</span></a></li>
</ul> </ul>
</nav> </nav>
@ -197,19 +196,19 @@
<section id="latest-publications" class="global-highlights" role="region"> <section id="latest-publications" class="global-highlights" role="region">
<h5>LATEST PUBLICATIONS</h5> <h5>LATEST PUBLICATIONS</h5>
<article class="latest-publications-item" role="article"> <article role="article">
<p class="publication-content">Solar masses<span><em>Journal</em> <time datetime="2010-02-13T20:00Z"> | December 2010</time></p> <p class="publication-content">Solar masses<span><em>Journal</em> <time datetime="2010-02-13T20:00Z"> | December 2010</time></p>
</article> </article>
<article class="latest-publications-item" role="article"> <article role="article">
<p class="publication-content">Link data and the Web<span><em>Article</em> <time datetime="2010-02-13T20:00Z"> | December 2010</time></p> <p class="publication-content">Link data and the Web<span><em>Article</em> <time datetime="2010-02-13T20:00Z"> | December 2010</time></p>
</article> </article>
<article class="latest-publications-item" role="article"> <article role="article">
<p class="publication-content">Building a community<span><em>Book</em> <time datetime="2010-02-13T20:00Z"> | November 2010</time></p> <p class="publication-content">Building a community<span><em>Book</em> <time datetime="2010-02-13T20:00Z"> | November 2010</time></p>
</article> </article>
<article class="latest-publications-item" role="article"> <article role="article">
<p class="publication-content">Biology 101<span><em>Series</em> <time datetime="2010-02-13T20:00Z"> | November 2010</time></p> <p class="publication-content">Biology 101<span><em>Series</em> <time datetime="2010-02-13T20:00Z"> | November 2010</time></p>
</article> </article>
@ -232,12 +231,12 @@
</p> </p>
</#if> </#if>
<nav role="navigation"> <nav role="navigation">
<ul id="footer-nav"> <ul id="footer-nav" role="list">
<li><a href="${urls.about}">About</a></li> <li role="listitem"><a href="${urls.about}">About</a></li>
<#if urls.contact??> <#if urls.contact??>
<li><a href="${urls.contact}">Contact Us</a></li> <li role="listitem"><a href="${urls.contact}">Contact Us</a></li>
</#if> </#if>
<li><a href="http://www.vivoweb.org/support" target="blank">Support</a></li> <li role="listitem"><a href="http://www.vivoweb.org/support" target="blank">Support</a></li>
</ul> </ul>
</nav> </nav>
</footer> </footer>

View file

@ -10,8 +10,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>${title}</title> <title>${title}</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
${stylesheets.addFromTheme("/css/screen.css")} ${stylesheets.addFromTheme("/css/screen.css")}
<#include "stylesheets.ftl"> <#include "stylesheets.ftl">
<#include "headScripts.ftl"> <#include "headScripts.ftl">
@ -34,22 +37,22 @@
</#if>--> </#if>-->
<nav role="navigation"> <nav role="navigation">
<ul id="header-nav"> <ul id="header-nav" role="list">
<#if user.loggedIn> <#if user.loggedIn>
<li><span class="pictos-arrow-10">U</span> ${user.loginName}</li> <li role="listitem"><span class="pictos-arrow-10">U</span> ${user.loginName}</li>
<li><a href="${urls.logout}">Log out</a></li> <li role="listitem"><a href="${urls.logout}">Log out</a></li>
<#if user.hasSiteAdminAccess> <#if user.hasSiteAdminAccess>
<li><a href="${urls.siteAdmin}">Site Admin</a></li> <li role="listitem"><a href="${urls.siteAdmin}">Site Admin</a></li>
</#if> </#if>
<#else> <#else>
<li><a title="log in to manage this site" href="${urls.login}">Log in</a></li> <li role="listitem"><a title="log in to manage this site" href="${urls.login}">Log in</a></li>
</#if> </#if>
<#-- List of links that appear in submenus, like the header and footer. --> <#-- List of links that appear in submenus, like the header and footer. -->
<li><a href="${urls.about}">About</a></li> <li role="listitem"><a href="${urls.about}">About</a></li>
<#if urls.contact??> <#if urls.contact??>
<li><a href="${urls.contact}">Contact Us</a></li> <li role="listitem"><a href="${urls.contact}">Contact Us</a></li>
</#if> </#if>
<li><a href="http://www.vivoweb.org/support" target="blank">Support</a></li> <li role="listitem"><a href="http://www.vivoweb.org/support" target="blank">Support</a></li>
</ul> </ul>
</nav> </nav>
@ -57,7 +60,7 @@
<fieldset> <fieldset>
<legend>Search form</legend> <legend>Search form</legend>
<form id="searchForm" action="${urls.search}" name="searchForm" role="search"> <form id="search-form" action="${urls.search}" name="search-form" role="search">
<#if user.showFlag1SearchField> <#if user.showFlag1SearchField>
<select id="search-form-modifier" name="flag1" class="form-item" > <select id="search-form-modifier" name="flag1" class="form-item" >
<option value="nofiltering" selected="selected">entire database (${user.loginName})</option> <option value="nofiltering" selected="selected">entire database (${user.loginName})</option>
@ -70,35 +73,28 @@
<div id="search-field"> <div id="search-field">
<input type="text" name="querytext" class="search-vivo" value="${querytext!}" /> <input type="text" name="querytext" class="search-vivo" value="${querytext!}" />
<a class ="submit" href="javascript:document.searchForm.submit();">Search</a> <a class ="submit" href="javascript:document.search-form.submit();">Search</a>
</div> </div>
<!-- <input class ="submit" name="submit" type="submit" value="Search" /> -->
</form> </form>
</fieldset> </fieldset>
</section> </section>
</header> </header>
<nav role="navigation"> <nav role="navigation">
<ul id="main-nav"> <ul id="main-nav" role="list">
<#list tabMenu.items as item> <#list tabMenu.items as item>
<li><a href="${item.url}" <#if item.active> class="selected" </#if>>${item.linkText}</a></li> <li role="listitem"><a href="${item.url}" <#if item.active> class="selected" </#if>>${item.linkText}</a></li>
</#list> </#list>
</ul> </ul>
</nav> </nav>
<div id="wrapper-content"> <div id="wrapper-content" role="main">
<#if flash?has_content> <#if flash?has_content>
<section id="flash-message" role="alert"> <section id="flash-message" role="alert">
${flash} ${flash}
</section> </section>
</#if> </#if>
<#-- mb863: using for now until we have controllers page.ftl to render the templates commented below-->
<#--<#include "menupage/menupage.ftl">-->
<#--<#include "menupage/menupage--classgroup-people.ftl">-->
<#--<#include "individual/individual--generic-class.ftl">-->
<#--<#include "individual/individual--foaf-person.ftl">-->
${body} ${body}
</div> <!-- #wrapper-content --> </div> <!-- #wrapper-content -->
@ -117,12 +113,12 @@
</#if> </#if>
<nav role="navigation"> <nav role="navigation">
<ul id="footer-nav"> <ul id="footer-nav" role="list">
<li><a href="${urls.about}">About</a></li> <li role="listitem"><a href="${urls.about}">About</a></li>
<#if urls.contact??> <#if urls.contact??>
<li><a href="${urls.contact}">Contact Us</a></li> <li role="listitem"><a href="${urls.contact}">Contact Us</a></li>
</#if> </#if>
<li><a href="http://www.vivoweb.org/support" target="blank">Support</a></li> <li role="listitem"><a href="http://www.vivoweb.org/support" target="blank">Support</a></li>
</ul> </ul>
</nav> </nav>
</footer> </footer>