/*
|
* Licensed to Jasig under one or more contributor license
|
* agreements. See the NOTICE file distributed with this work
|
* for additional information regarding copyright ownership.
|
* Jasig licenses this file to you under the Apache License,
|
* Version 2.0 (the "License"); you may not use this file
|
* except in compliance with the License. You may obtain a
|
* copy of the License at the following location:
|
*
|
* http://www.apache.org/licenses/LICENSE-2.0
|
*
|
* Unless required by applicable law or agreed to in writing,
|
* software distributed under the License is distributed on an
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
* KIND, either express or implied. See the License for the
|
* specific language governing permissions and limitations
|
* under the License.
|
*/
|
|
:root {
|
-webkit-background-origin: padding-box;
|
-webkit-background-clip: content-box;
|
-webkit-background-size: 10px 1px;
|
}
|
body {
|
margin:0;
|
padding:0;
|
font:normal 17px Helvetica, sans-serif; /* Base font rules */
|
-webkit-user-select: none; /* prevents child elements content from being selected - desired? */
|
-webkit-text-size-adjust:none; /* http://website-engineering.blogspot.com/2009/07/stop-adjusting-text-size-in-iphone-when.html */
|
}
|
h1, h2, h3, h4, h5, h6 {margin:0.25em;}
|
h1 {font-size:1.5em;}
|
h2 {font-size:1.1em;}
|
h3 {font-size:1em;}
|
h4 {}
|
h5 {}
|
h6 {}
|
img {border:none;}
|
|
|
/***************************************/
|
/**
|
* Basic overrides for fss layout
|
*/
|
|
.fl-icon {
|
width:30px;
|
height:30px;
|
margin-top:-5px;
|
-webkit-border-radius: 5px;
|
}
|
.fl-label {
|
width:25%;
|
}
|
|
|
/***************************************/
|
/* to override any widths for a mobile device.
|
* This eliminates the width, allowing for device specific screen settings
|
*/
|
.fl-panel {
|
width:auto;
|
}
|
|
/***************************************/
|
/* iPhone general purpose gel buttons */
|
/* effect is applied anywhere but the navbar, which has its own button look */
|
|
.fl-button {
|
border-width: 10px;
|
text-align:center;
|
-webkit-border-radius:10px;
|
-webkit-background-origin: border;
|
-webkit-background-clip: border;
|
}
|
|
/*************************************************/
|
/* Navigation Bar
|
*/
|
body::before, .fl-navbar {
|
width:100%;
|
height:43px;
|
text-align:center;
|
}
|
body::before {
|
content:" ";
|
margin-bottom:-43px;
|
display:block;
|
border-style:solid;
|
border-width:1px 0;
|
-webkit-background-origin: padding-box;
|
-webkit-background-clip: content-box;
|
}
|
|
.fl-navbar .fl-table-cell:not(h1) {
|
width:1px;
|
white-space:nowrap;
|
}
|
|
.fl-navbar .fl-table-cell:first-child {
|
padding-left:5px;
|
}
|
.fl-navbar .fl-table-cell:last-child {
|
padding-right:5px;
|
}
|
.fl-navbar h1 {
|
padding:0;
|
text-align:center;
|
font-size:1.17em;
|
font-weight: bold;
|
}
|
.fl-navbar a {
|
text-decoration:none;
|
font-size: 0.7em;
|
font-weight:bold;
|
}
|
|
.fl-navbar [class*=fl-button] {
|
-webkit-border-radius:5px;
|
padding:0;
|
}
|
|
.fl-navbar .fl-backButton {
|
padding:10px 0;
|
/*
|
* To create the oddly shaped back button with fully customizable CSS colors, there are 2 main things:
|
* 1) The stencil for the shadow and hilights along the angled edge
|
* 2) The mask to crop the background along the angled edge
|
*/
|
/* Angled effect is just a single border with a transaprent stencil image */
|
border-width:0 0 0 15px;
|
-webkit-border-top-right-radius: 5px;
|
-webkit-border-bottom-right-radius: 5px;
|
-webkit-background-origin: border;
|
-webkit-background-clip: border;
|
-webkit-mask-repeat: no-repeat;
|
-webkit-mask-origin: border;
|
-webkit-mask-clip: border;
|
}
|
|
.fl-navbar .fl-backButton .fl-button-inner {
|
margin-left:-3px; /* close tiny gap between angled border + button-inner on Mobile Safari */
|
border-left-width:0;
|
}
|
.fl-navbar .fl-button-inner {
|
float:none;
|
padding:5px;
|
border-width:5px;
|
-webkit-background-origin: border;
|
-webkit-background-clip: border;
|
}
|
|
|
|
/*************************************************/
|
/* iPhone tabs: general purpose dividers, or fixed to the bottom of the screen
|
*/
|
/*************************************************/
|
.fl-tabs {
|
margin:0;
|
padding:0;
|
border:none;
|
text-align:center;
|
}
|
|
.fl-tabs li {
|
display:inline-block;
|
margin-right:-5px;
|
border-width:5px 0;
|
text-align:center;
|
}
|
|
.fl-tabs li:first-child {
|
border-left-width:5px;
|
-webkit-border-top-left-radius:5px;
|
-webkit-border-bottom-left-radius:5px;
|
}
|
|
.fl-tabs li:last-child {
|
margin-right:0;
|
border-right-width:5px;
|
-webkit-border-top-right-radius:5px;
|
-webkit-border-bottom-right-radius:5px;
|
}
|
|
.fl-tabs li.fl-tabs-active a,
|
.fl-tabs li a {
|
display:block;
|
margin:-4px 0;
|
text-decoration:none;
|
padding:0.35em 0.5em;
|
font-weight:bold;
|
background:none;
|
border-width:0 1px;
|
border-style:solid;
|
}
|
|
.fl-tabs li:last-child a {
|
border-right:none;
|
}
|
.fl-tabs li:first-child a {
|
border-left:none;
|
}
|
|
.fl-tabs.fl-tabs-functionBar {
|
|
}
|
|
/*************************************************/
|
/* iPhone list menu styles: Ordered lists, Unordererd lists, Thumbnail lists, Icon lists, Definition lists
|
* By default, all list formats fit to width
|
* When nested within a fl-panel element, they are indented and therefore contain rounded corners
|
*/
|
/*************************************************/
|
/* Default list system setup */
|
[class*=fl-list] {
|
border: none;
|
list-style:none;
|
margin:0 0 10px;
|
padding:0;
|
}
|
|
[class*=fl-list] > li {
|
display:block;
|
padding: 12px 0px 12px 12px;
|
text-decoration: none;
|
font-weight: bold;
|
outline: none;
|
border-style:solid;
|
border-width:1px 1px 0 1px;
|
overflow:auto; /* to encapsulate floating elements within */
|
}
|
|
[class*=fl-list] > li:last-child {
|
border-bottom-width:1px;
|
}
|
|
[class*=fl-list] .fl-link-loading .fl-link-secondary {
|
display:none;
|
}
|
|
/* secondary link info behaviour */
|
[class*=fl-list] > li .fl-link-secondary {
|
float:right;
|
margin-right:25px;
|
font-weight:normal;
|
font-size:.9em;
|
}
|
|
/* summary link info ehaviour */
|
[class*=fl-list] > li .fl-link-summary {
|
display:block;
|
clear:right;
|
margin:0 25px 0 0px;
|
font-weight:normal;
|
font-size:0.8em;
|
|
}
|
[class*=fl-list] li .fl-icon ~ .fl-link-summary {
|
margin-left:30px; /* default size of fl-icon */
|
}
|
|
/* icon behaviour */
|
[class*=fl-list] li .fl-icon {
|
float:left;
|
margin-left:-6px;
|
}
|
|
.fl-panel [class*=fl-list] > li:first-child,
|
.fl-panel [class*=fl-list] > li:first-child a {
|
-webkit-border-top-left-radius: 8px;
|
-webkit-border-top-right-radius: 8px;
|
}
|
|
.fl-panel [class*=fl-list] > li:last-child,
|
.fl-panel [class*=fl-list] > li:last-child a {
|
-webkit-border-bottom-left-radius: 8px;
|
-webkit-border-bottom-right-radius: 8px;
|
}
|
|
/*************************************************/
|
/**
|
* fl-listmenu is now the way to create a link list
|
* The links create a hotspot over the entire list item, just like how it was by default
|
*/
|
.fl-listmenu {
|
}
|
.fl-listmenu li {
|
padding:0;
|
}
|
.fl-listmenu li a {
|
display:block;
|
padding: 12px 0px 12px 12px;
|
text-decoration: none;
|
font-weight: bold;
|
outline: none;
|
}
|
|
|
/*************************************************/
|
/* Thumbnail and Expanded Thumbnails list features */
|
|
.fl-list-thumbnails > li {
|
margin-bottom:5px;
|
}
|
|
.fl-list-thumbnails > li a {
|
border-bottom-width:1px;
|
padding-top:6px;
|
overflow:auto;
|
}
|
/* summary behaviour */
|
.fl-list-thumbnails > li a > .fl-icon ~ .fl-link-summary {
|
margin:0 25px -12px 42px;
|
|
}
|
.fl-list-thumbnails:not(.fl-thumbnails-expanded):not(.fl-list-brief) > li a > .fl-icon ~ .fl-link-summary {
|
padding-bottom:10px;
|
}
|
/* icon behaviour */
|
.fl-list-thumbnails > li a > .fl-icon {
|
width:44px;
|
height:44px;
|
margin:-6px 10px -12px -12px;
|
-webkit-border-radius:0;
|
}
|
.fl-panel .fl-list-thumbnails > li a {
|
-webkit-border-radius:8px;
|
}
|
.fl-panel .fl-list-thumbnails > li a > .fl-icon {
|
-webkit-border-bottom-left-radius: 8px;
|
-webkit-border-top-left-radius: 8px;
|
}
|
.fl-list-thumbnails.fl-thumbnails-expanded li {
|
margin:0;
|
}
|
.fl-list-thumbnails.fl-thumbnails-expanded > li a {
|
border-bottom-width:0;
|
-webkit-border-radius:0;
|
padding:10px;
|
}
|
.fl-list-thumbnails.fl-thumbnails-expanded > li a > .fl-icon {
|
width:60px;
|
height:60px;
|
margin:-5px 5px -5px -5px;
|
-webkit-border-radius:0;
|
}
|
.fl-list-thumbnails.fl-thumbnails-expanded > li:last-child a {
|
border-bottom-width:1px;
|
}
|
|
.fl-list-thumbnails.fl-thumbnails-expanded > li a > .fl-icon ~ .fl-link-summary {
|
margin: 0px 0px -5px 60px;
|
}
|
.fl-list-thumbnails.fl-thumbnails-expanded > li a > .fl-link-secondary {
|
padding-top:0;
|
}
|
/*************************************************/
|
/* Brief lists auto trim summary content + add ellipsis if necessary */
|
|
.fl-list-brief > li a {
|
padding-bottom:6px;
|
}
|
|
.fl-list-brief > li a > .fl-link-summary {
|
height:1.3em;
|
overflow:hidden;
|
text-overflow:ellipsis;
|
white-space:nowrap;
|
}
|
|
.fl-list-brief > li a > .fl-link-secondary {
|
padding-top:6px;
|
}
|
|
.fl-list-brief > li a > .fl-icon ~ .fl-link-summary {
|
margin-left:0;
|
}
|
|
.fl-list-brief.fl-list-thumbnails:not(.fl-thumbnails-expanded) > li a > .fl-icon {
|
margin:-6px 10px -6px -12px;
|
}
|
.fl-list-brief.fl-list-thumbnails:not(.fl-thumbnails-expanded) > li a > .fl-link-secondary {
|
padding-top:0px;
|
}
|
|
/*************************************************/
|
/* Glossy icons (and thumbnails?) */
|
|
/* Glossiness for 30x30 icons */
|
.fl-list-glossy > li a::before {
|
position:absolute;
|
content:" ";
|
float:left;
|
width:28px;
|
height:28px;
|
margin:-4px 0 0 -5px;
|
-webkit-border-radius:3px;
|
-webkit-background-size: 30px 60px;
|
background-repeat:no-repeat;
|
}
|
/* Glossiness for 44x44 thumbnails */
|
.fl-list-thumbnails.fl-list-glossy > li a::before {
|
width:42px;
|
height:42px;
|
margin:-11px;
|
-webkit-border-radius:0px;
|
-webkit-background-size: 44px 50px;
|
}
|
/* Glossiness for 60x60 thumbnails */
|
.fl-list-thumbnails.fl-thumbnails-expanded.fl-list-glossy > li a::before {
|
width:58px;
|
height:58px;
|
margin:-4px;
|
-webkit-border-radius:0px;
|
-webkit-background-size: 60px 40px;
|
}
|
|
|
/*************************************************/
|
/* Content Panels */
|
/*************************************************/
|
|
[class*=fl-panel] {
|
margin:10px;
|
}
|
/* Panel Auto Headings */
|
/* The first element found becomes the "heading" */
|
.fl-panel-autoHeading > *:first-child {
|
padding:10px;
|
margin:0;
|
-webkit-border-top-left-radius: 8px;
|
-webkit-border-top-right-radius: 8px;
|
}
|
/* The last element found becomes the "content" - list or otherwise */
|
.fl-panel-autoHeading > *:last-child {
|
margin:0;
|
-webkit-border-radius:0;
|
-webkit-border-bottom-left-radius:8px;
|
-webkit-border-bottom-right-radius:8px;
|
}
|
|
.fl-panel-autoHeading [class*=fl-list] > li {
|
margin:0;
|
}
|
.fl-panel-autoHeading [class*=fl-list] > li:first-child,
|
.fl-panel-autoHeading [class*=fl-list] > li:first-child a {
|
-webkit-border-radius:0;
|
}
|
.fl-panel-autoHeading [class*=fl-list] > li:first-child:last-child,
|
.fl-panel-autoHeading [class*=fl-list] > li:first-child:last-child a {
|
-webkit-border-bottom-left-radius:8px;
|
-webkit-border-bottom-right-radius:8px;
|
}
|
.fl-panel-autoHeading .fl-list-thumbnails > li a {
|
/*padding:5px;*/
|
/*overflow:auto;*/
|
}
|
|
/* Collapsing and expanding panels */
|
.fl-panel-collapsable {
|
max-height:900px;
|
overflow:hidden;
|
-webkit-border-radius:8px;
|
}
|
/***************************/
|
.fl-table {
|
display:table;
|
border-collapse:collapse;
|
border:none;
|
}
|
.fl-table-row {
|
display:table-row;
|
border:none;
|
}
|
.fl-table-cell {
|
display:table-cell;
|
vertical-align:middle;
|
border:none;
|
}
|
|
/***************************/
|
