/* $Id: common-006.css,v 1.1 2014/02/26 22:06:18 tako Exp $ */
/* Table of Contents:
* Reset
* Base Elements
* Grid
* Typography
* Header
* Navigation
* Content
* Footer
* Messages
* Forms
* Lists
* Tabbed Sections
* Tables
* Helpers
* Overrides
* Shame
Vertical rythm should be based on default font size and line height.
Since default font size is 12px and line height 18px then padding and margins should be fractions or multiples of line height.
In terms of font size, half line height is .75em, full line height is 1.5em. So margins and padding should be in terms of these two numbers.
Font scale:
10,
36,
24,
16,
12
--------- 1 ---------|--- 2 ---|--- 3 ---|------ 12 -----|
6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72
For font sizing use rem with px fallback
*/
/* RESET
------------------------------------------------------------------
* reset some properties for elements since defaults are not crossbrowser - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
* TODO : Check out vanilla css https://github.com/csswizardry/vanilla and normalize.css https://github.com/necolas/normalize.css
------------------------------------------------------------------ */
html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6,
pre, a, abbr, em, img, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
pre, code, kbd, samp, tt {
/* fix monospace sizing issue */
font-family: monospace, monospace;
font-size: 12px;
font-size: 1rem;
}
em, i {
font-style: italic;
font-weight: 400;
}
strong, caption, th {
font-style: normal;
font-weight: 700;
}
/* BASE
------------------------------------------------------------------ */
html {
font-size: 75%; /* 12px | set default fornt size on html for rem size to work */
line-height: 1.5; /* 18px | to establish a vertical rhythm pay attention to vertical spacing ( margin, padding, border, top, bottom ) and sizing ( height ). They should be set in fractions or multiples of 18px */
font-family: sans-serif;
overflow-y: scroll; /* force a vertical scrollbar on short pages to avoid jump when navigating between short and long pages */
}
body {
margin-bottom: 1.5em;
background-color: #fff; /* ??? should background-color and color be on html */
color: #333;
/* text-size-adjust for mobile */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* lists */
dl { margin: .75em 0; }
dd { margin: .75em 0 .75em 2em; } /* based on a 12px default font size, margin is 9px or half line height | line-height:1.5; margin:0 0 0 40px; */
ol, ul {
margin: 0 0 1.5em; /* set bottom margin of 18px or the same as line height */
padding: 0 0 0 3em; /* 0 0 0 40px */
}
ul ul,
ol ol { margin-bottom: 0; }
/* TYPOGRAPHY
------------------------------------------------------------------
Font Stacks: http://code.stephenmorley.org/html-and-css/the-myth-of-web-safe-fonts/
narrow serif -> font-family:'Times New Roman',Times,serif;
wide serif -> font-family:Georgia,Utopia,Charter,serif;
narrow sans-serif -> font-family:Helvetica,Arial,sans-serif;
wide sans-serif -> font-family:Verdana,Geneva,sans-serif;
monospace -> font-family:'Courier New',Courier,monospace;
------------------------------------------------------------------ */
/* headings */
h1, h2, h3, h4, h5, h6 {
position: relative; /* to allow for absolute positioning of child elements */
overflow: hidden; /* make room for floated elements so they are next to not under the headings | makes top links clickable */
clear: left; /* overflow hidden above messes up tabs and headings */
}
h1, .h1, h2, .h2, h3, .h3 {
font-weight: 400;
font-family: Georgia, "Times New Roman", serif;
text-transform: capitalize; /* ??? is this technically incorrect because it caps "the" or "a" words in titles */
letter-spacing: -0.025em;
}
h1, .h1 {
font-size: 36px;
font-size: 3rem; /* 36px */
line-height: 72px; /* absolute | multiple of 18px */
line-height: 2; /* relative to element's font size */
}
h2, .h2 {
font-size: 24px;
font-size: 2rem; /* 24px */
line-height: 54px;
line-height: 2.25;
}
h3, .h3 {
font-size: 16px;
font-size: 1.33333333333333rem; /* 16px */
line-height: 2.25; /* 36px */
text-transform: uppercase; /* override capitalize */
letter-spacing: .025em; /* override -.025em */
word-spacing: .25em;
}
h4, .h4, h5, h6 {
font-family: sans-serif;
font-size: 12px;
font-size: 1rem; /* 12px | 1.166666666666667em x 12px = 14px */
line-height: 3; /* 36px | 2.571428571428571 x 14px = 36px*/
text-transform: uppercase;
letter-spacing: .025em;
word-spacing: .25em;
}
/* paragraphs and separators */
p {
/* give only bottom margin (1.5em x 12px = 18px | maintain vertical rhythm, avoid margin collapsing, easier to swap elements in and out */
margin: 0 0 18px;
margin: 0 0 1.5em;
margin: 0 0 1.5rem;
color: #444;
/* break long strings, such as URLs, so they wrap instead of breaking layout
can use the tag as well to indicate a good break point
TODO : test this code since it doesn't seem to look good */
word-wrap: break-word;
word-break: break-all;
overflow-wrap: break-word;
/* add hyphens when breaking long words | lang attribute may need to be set on p for this to work */
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
/* word break */
wbr:after { content: "\00200B"; } /* TODO : test support */
q { quotes: none; } /* remove default "" since some browsers don't show them | using q changes line-height slightly */
hr {
margin-bottom: 18px;
margin-bottom: 1.5rem;
border: 0;
height: 1px;
background: #777;
background-image: -webkit-linear-gradient(left, #fff, #777, #fff);
background-image: -moz-linear-gradient(left, #fff, #777, #fff);
background-image: -ms-linear-gradient(left, #fff, #777, #fff);
background-image: -o-linear-gradient(left, #fff, #777, #fff);
}
/* text links */
a { color: #36c; }
a:visited { color: #969; } /* 93c */
a:hover, a:focus, a:active {
color: #d21033;
text-decoration: none;
}
a:active { outline: 1px dotted #d21034; }
/* external */
a[rel="external"] {
background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCw0IEw4LDQgTDYsNiBMMiw2IEwyLDE0IEwxMCwxNCBMMTAsMTAuNSBMMTIsOC41IEwxMiwxNiBMMCwxNiBaIE0wLDQiIGZpbGw9InJnYmEoMCwwLDAsMC4zMykiPjwvcGF0aD48cGF0aCBkPSJNNiwwIEwxNiwwIEwxNiwxMCBMMTQsMTAgTDE0LDMuNSBMNy41LDEwIEw2LDguNSBMMTIuNSwyIEw2LDIgWiBNNiwwIiBmaWxsPSJyZ2JhKDAsMCwwLDAuMzMpIj48L3BhdGg+PC9zdmc+") no-repeat right 40%;
background-size: 12px;
padding-right: 1em;
}
/* tag */
a[rel="tag"] {
font-size: 0.75em; /* 12px */
line-height: 1.3334; /* 16px */
text-transform: lowercase;
border: 0;
}
/* links at the bottom of long pages for going back to the top */
/*p*/.top {
overflow: hidden;
position: relative;
margin: 1.5em 0 0;
}
/*a*/.top__link {
position: relative;
float: right;
text-decoration: none;
text-align: center; /* center arrow above TOP */
text-transform: uppercase;
font-size: .8333333333333333em; /* 10px */
font-weight: 400; /* reset inherited */
/* width:3em; */
}
X.top__link:before {
content: "\25B2"; /* up triangle pointer | can be done with ▲ */
display: block;
}
.top__link > span { display: block; } /* alternative to .top:before | requires a ▲ | more browser compatible */
.top__link > i {
position: absolute;
bottom: 50%;
left: 50%;
margin-left: -8px;
}
/* tooltip cursors */
abbr[title] {
/* use abbr since acronym not supported by HTML5 or IE < 5.5,
abbr not supported by < IE6;
in th or td use abbr attribute for abbreviations */
cursor: help;
border-bottom: 1px dotted #ccc;
}
a[title] { cursor: pointer; }
[title] { cursor: help; } /* TODO : remove? slow selector */
/* decorative & */
.amp {
font-family: Cochin, Baskerville, Palatino, "Book Antiqua", serif;
font-style: italic;
}
/* GRID - http://oocss.org/grids_docs.html | https://github.com/stubbornella/oocss/wiki/Grids
------------------------------------------------------------------ */
.line:after { /* .row */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.lastUnit:after { /* .row_col-last */
content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
visibility: hidden;
clear: both;
height: 0 !important;
display: block;
line-height: 0;
}
.line { zoom: 1; } /* .row .l- */
.unit { float: left; } /* .row_col .row_col-last .l_col*/
.size1of1 { float: none; } /* span width */
.size1of2 { width: 50%; }
.size1of3 { width: 33.33333%; }
.size2of3 { width: 66.66666%; }
.size1of4 { width: 25%; }
.size3of4 { width: 75%; }
.size1of5 { width: 20%; }
.size2of5 { width: 40%; }
.size3of5 { width: 60%; }
.size4of5 { width: 80%; }
/* widths */
.w-1of1 { width: 100%; }
.w-3of4 { width: 75%; }
.w-1of2 { width: 50%; }
.w-2of3 { width: 66.6%; }
.w-1of3 { width: 33.3%; }
.w-1of4 { width: 25%; }
.w-1of5 { width: 20%; }
.lastUnit { /* .col-last */
display: table-cell;
*display: block;
zoom: 1;
float: none;
_position: relative;
_left: -3px;
_margin-right: -3px;
width: auto;
}
/* HEADER --------------------------------- */
.header {
position: relative;
border-top: 2px solid #a13;
}
/* .app-name = .myr || .rus || .ess || .soc || .csp, etc. */
.app-name {
padding: 26px 0 26px 185px; /*26px 0 1px 185px;*/ /* because of * box-sizing: border-box; */
min-height: 52px; /*25px;*/
font-size: 18px;
font-size: 1.5rem;
line-height: 0;
color: #fefafb;
background: #d21033 url("../img/RU_banner.jpg") no-repeat;
letter-spacing: 0;
}
.logo {
position: absolute;
left: 0;
top: 0;
height: 52px;
width: 175px;
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
z-index: 10;
cursor: pointer;
}
/* NAVIGATION
------------------------------------------------------------------ */
/* http://csswizardry.com/2011/09/the-nav-abstraction/ */
.nav {
list-style: none;
margin: 0;
padding: 0;
}
/* nav buttons */
.nav-pills > li,
.nav-main li.dd {
float: left;
position: relative;
}
/* TODO : refactor - apply to all buttons not just pills | this may be redundant with .btn */
.nav-pills button,
.nav-pills input[type="button"],
.nav-pills input[type="reset"],
.nav-pills input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
/* TODO : refactor - apply to all inputs and buttons? or should this be localized to nav/submit buttons only? | this may be redundant with .btn */
.nav-pills input::-moz-focus-inner,
.nav-pills button::-moz-focus-inner {
padding: 0;
border: 0;
} /* mozilla fix */
.nav-pills a,
.nav-pills > li > input[type="submit"],
.nav-pills > li > input[type="button"],
.nav-pills > li > button,
.nav-main .dd ul a {
float: left;
line-height: normal;
margin: 0 1px;
border: 0;
padding: .5em 1em;
text-decoration: none;
white-space: nowrap;
background: #D21033;
color: #FFF;
cursor: pointer;
border-radius: 5px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
} /* X-webkit-box-sizing:content-box; /* Safari/Chrome, other WebKit ^/ X-moz-box-sizing:content-box; /* Firefox, other Gecko ^/ Xbox-sizing:content-box; /* Opera/IE 8+ ^/ */
/* hover color for main nav tabs and nav-sys pills */
.nav-pills a:hover,
.nav-pills a:focus,
.nav-pills a:active,
.nav-pills .active,
.nav-pills input[type="submit"]:hover,
.nav-pills input[type="submit"]:focus,
.nav-pills input[type="submit"]:active,
.nav-pills input.active,
.nav-pills input[type="button"]:hover,
.nav-pills input[type="button"]:focus,
.nav-pills input[type="button"]:active,
.nav-pills button:hover,
.nav-pills button:focus,
.nav-pills button:active,
.nav-main .dd ul a:hover,
.nav-main .dd ul a:focus,
.nav-main .dd ul a:active,
.nav-main .dd ul .active { background-color: #a13; } /* #a13 | #C20F2F; | #BF0B30;*/
/* applies to dropdown links */
.nav-pills ul a, .nav-main ul ul a {
float: none !important;
display: block;
background-color: transparent;
}
.nav .dd a { background-color: transparent; }
.nav .dd:hover {
border-radius: 5px 5px 0 0;
background-color: #a13; /* dd hover background color on nav-system and nav-menu */
} /* BA0E2E Xz-index:599; Xbox-shadow:0 2px 5px rgba(0,0,0,.5); */
.nav .dd > a:hover {
cursor: text;
background-color: #a13; /* dd hover background color */
}
/* show dropdown submenu when hovering over li with arrow down */
.nav .dd:hover > ul { visibility: visible; }
.nav form {
visibility: hidden;
position: absolute;
left: -100%;
top: 100%;
margin-left: -50%;
margin-top: .5em;
}
.nav .dd:hover form,
X.form-search:target,
X.nav .dd form { visibility: visible; }
/* TODO : what is this for ??? */
.menu {} /* stacked menu as a stand alone component */
.nav_menu {} /* dropdown menu as part of a nav bar */
.nav-menu a {
display: block;
padding: .5em;
}
.nav-menu a:hover {
background: #f0f0f0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/* position the dropdown | TODO : this may need to be renamed, it looks too generic, but is intended for a specific use .nav_menu */
.nav .nav_menu {
position: absolute;
top: 90%;
right: 0;
margin: 0;
padding: 0;
width: auto;
border-radius: 5px 0 5px 5px; /* rounded dropdown in nav-sys */
visibility: hidden;
list-style: none;
background: #a13; /*#C20F2F;*/ /* nav sys background */
} /* Xleft:0; Xz-index:598; Xbox-shadow:0 2px 5px rgba(0,0,0,.5); */
.nav ul li {
float: none;
text-align: left;
}
.nav ul a {
line-height: 1.5;
display: block;
letter-spacing: 0;
} /* Xpadding:7px 10px; */
/* dropdown menu link highlight */
.nav ul a:hover,
.nav ul a:focus,
.nav ul ul a:hover,
.nav ul ul a:focus { background: #BA0E2E !important; }
/* system nav | position system nav container */
/*div*/.nav-system {
position: absolute;
right: 25px;
top: 13px;
z-index: 11; /* needed so that main nav doesn't cover drop-down links */
color: #FFF;
}
/* style the profile link */
.welcome > .link-profile {
float: none;
display: inline-block;
}
.link-logout { padding-right: 0 !important; } /* since the icon already has some padding */
.link-logout > .icon { visibility: hidden; } /* initially hide the logout link arrow */
.link-logout:hover > .icon,
.link-logout:focus > .icon,
.link-logout:active > .icon { visibility: visible; } /* show the logout link arrow on focus */
/* main nav */
.nav-main {
float: left;
position: relative;
z-index: 10; /* show drop-down menus above body content */
margin: 0 0 1.5em; /* Xpadding-top:3px; */
width: 100%;
Xheight: 3.3em; /* 2.5em */
background: #d21033;
line-height: normal;
}
.nav-main .nav > li { /* .nav-tabs li */
float: left;
margin-right: 3px; /* space between main nav tabs | margin moved from .nav-main li > a to
so that sub-menu (.dd) can be made min-width: 100%; */
}
.nav-main li > a {
float: left;
Xmargin: 0 3px 0 0; /* replaced with .nav-main .nav > li */
padding: 5px 0 1px;
background: #c20f2f;
color: #ffcdc0;
text-decoration: none;
border-top: 3px solid #d21033;
}
.nav-main a:hover, .nav-main a:focus, .nav-main .dd:hover > a {
background-color: #a13;/*#BF0B30;*//*#c20f2f;*/ /* main nav dd link background color */
border-top: 0;
padding: 5px 0 4px;
}
.nav-main .dd:hover { background: none; }
.nav-main .dd:hover > a:first-child span {
color: #fff;
}
.nav-main ul ul {
border-radius: 0;
left: 0;
right: auto;
background-color: #a13; /*#BF0B30;*/
min-width: 100%; /* expand the dropdown to at least the width of the tab if all of the links are short */
}
.nav-main .dd ul a {
margin: 0;
border-radius: 0;
background: none;
}
.nav-main .dd:hover ul a {
border-top: 0;
}
.nav-main .dd > a {
background: #BF0B30; /*#c20f2f;*/
}
.nav-main a span {
display: block;
padding: 2px 10px;
color: #ffcdc0;
}
.nav-main a:hover span, .nav-main a:focus span, .nav-main a:hover, .nav-main a:focus {
color: #fff;
}
/* progress bar */
.progress {
float: left;
margin: 0 0 1em;
border-bottom: 1px solid #eee;
padding: 5px 0;
width: 100%;
color: #000;
background-color: #fff;
}
.progress > li {
float: left;
position: relative;
background: transparent url(../img/breadcrumb_divider.png) no-repeat scroll 100% 50%;
}
.progress a, .progress a:visited {
display: block;
padding: 10px 30px 10px 15px;
cursor: pointer;
color: #666;
text-decoration: none;
text-transform: uppercase;
line-height: 1.8;
}
.progress a:hover {
color: #000
}
.progress .first a {
padding-left: 0;
}
.progress a.current {
color: #000;
font-weight: 700;
}
.progress .last {
background: none;
}
.progress .one-line a {
line-height: 3.6em;
}
/* progressbar */
.progressbar {
float: left;
margin: 0 0 1em;
border-bottom: 1px solid #eee;
padding: 5px 0;
width: 100%;
color: #000;
background-color: #fff;
}
.progressbar > li {
float: left;
Xlist-style: none;
position: relative;
line-height: 1.8;
Xfont-size: 11px;
background: transparent url(../img/breadcrumb_divider.png) no-repeat scroll 90% 50%;
}
.progressbar a {
Xfont-size: 10px;
cursor: text;
color: #666;
text-decoration: none;
text-transform: uppercase;
padding: 10px 30px 10px 0;
display: block;
float: left;
}
/* step number */
.progressbar b {
float: left;
margin-right: .1em;
font-family: serif;
font-size: 48px;
font-size: 4rem;
line-height: 1.3;
color: #aaa;
}
.progressbar .no-arrow {
background: none;
}
.progressbar .current a, .progressbar .current b {
color: #000;
}
/* status indicators */
.progressbar .icon {
position: absolute;
visibility: hidden;
margin: -1px 0 0 3px;
}
.progress .icon {
position: absolute;
margin: -1px 0 0 3px;
}
.one-line .icon {
margin-top: -10px;
top: 50%;
right: 10px;
}
/* vertical nav - stacked | horizontal nav is default */
.nav-stacked > li { display: list-item; } /* TODO : rename .stacked to .menu | same for .dd -> .nav_menu */
X.nav-stacked > li > a { display: block; }
/* breadcrumbs and horizontal link list */
.nav-breadcrumb a { text-decoration: none; }
.nav-breadcrumb strong { text-transform: uppercase; }
X.nav-breadcrumb,
X.nav-links { margin: 0 0 1.5em; } /* abstract margins to a .margin class ??? */
.nav-breadcrumb > li,
.nav-links > li { display: inline; }
.nav-breadcrumb li:first-child:before,
.nav-links li:first-child:before { /* :first-child is more browser compatible than :last-child */
content: ""; /* remove dividers before first link */
padding: 0; /* zero out left AND right padding on first divider */
}
.divider-space li:before,
.divider-path li:before,
.divider-pipe li:before,
.divider-dot li:before,
.divider {
color: #ccc;
padding: 0 .5em;
}
.divider-space li:before { content: " "; } /* adds space divider | or use in HTML */
.divider-path li:before {content: "/";} /* adds path divider | with spaces content:"\a0\a0/\a0"; */
.divider-pipe li:before { content: "|"; } /* adds a pipe divider | or use | in HTML */
.divider-dot li:before { content: "•"; } /* adds a mid dot divider | or use · in HTML */
/* another way of doing above without :first-child */
.divider li + li:before {
content: "•"; /* · as divider */
display: inline-block;
font-size: 16px;
font-weight: 700;
margin-left: 5px;
margin-right: 5px;
vertical-align: -2px;
}
/* pagination */
.pagination {
margin-left: 0;
}
.pagination li {
display: inline;
margin-left: 0;
text-indent: 0;
}
.pagination a {
display: inline-block;
padding: 0.5em 0;
width: 2.5em;
text-align: center;
line-height: 1;
margin: 0.1em;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background-clip: padding-box;
text-decoration: none;
background-color: transparent;
color: #333;
}
.page-prev a, .page-next a {
width: 6em;
text-transform: uppercase;
}
X.page-prev a:before {
content: "\25C0\a0";
} /* use .back in HTML right 25B6 or 25BA, up 25B2, down 25BC, left 25C0 */
X.page-next a:after {
content: "\a0\25B6";
} /* use .next in HTML */
.pagination a:link, .pagination a:visited {
color: #333; /* 36c */
background-color: #fff;
border-color: #ccc;
}
.pagination a[href]:hover, .pagination a[href]:focus {
color: #d21034; /* 36c */
background-color: #FFF7EE; /* CFDFFF 36c c20f2f */
border-color: #d21034; /* 36c d21034 */
}
.pagination a:active {
color: #fff;
background-color: #900;
border-color: #d21034;
}
mark, .highlight { background: #F9FDA2; }
code {
font-weight: 700;
color: #B00;
}
blockquote,
.indent {
font: 400 1.5em serif;
color: #000;
margin:0 0 1.5em 3em;
border-left: 5px solid #ddd;
padding:0 1.5em;
}
/* highlighted sections of content; for long asides or content that's not suitable for sidebar; use for diversions/backstory; similar to msg error, msg info */
/* ??? should this be done with