/* $Id: common-002.css,v 1.1 2014/02/26 22:06:17 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 */ 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; word-break: break-word; overflow-wrap: break-word; /* add hyphens when breaking long words */ -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; } /* 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; } /* 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 { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .lastUnit:after { content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "; visibility: hidden; clear: both; height: 0 !important; display: block; line-height: 0; } .line { *zoom: 1; } .unit { float: left; } .size1of1 { float: none; } .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%; } .lastUnit { display: table-cell; *display: block; *zoom: 1; float: none; _position: relative; _left: -3px; _margin-right: -3px; width: auto; } /* HEADER --------------------------------- */ /* .app-name = .myr || .rus || .ess || .soc || .csp, etc. */ .app-name { margin: 0; padding: 26px 0 1px 185px; min-height: 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; } .nav-pills button, .nav-pills input[type="button"], .nav-pills input[type="reset"], .nav-pills input[type="submit"] { -webkit-appearance: button; cursor: pointer; } .nav-pills input::-moz-focus-inner, .nav-pills button::-moz-focus-inner { padding:0; border:0; } /* mozilla fix */ .nav-pills a, .nav-pills input[type="submit"], .nav-pills input[type="button"], .nav-pills 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+ ^/ */ .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: #BF0B30; } .nav-pills ul a, .nav-main ul ul a { float: none !important; display: block; background: transparent; } .nav .dd a { background: transparent; } .nav .dd:hover { border-radius: 5px 5px 0 0; background: #C20F2F; } /* BA0E2E Xz-index:599; Xbox-shadow:0 2px 5px rgba(0,0,0,.5); */ .nav .dd > a:hover { cursor: text; } .nav .dd:hover > ul { visibility: visible; } .nav ul { position: absolute; top: 90%; right: 0; margin: 0; padding: 0; width: auto; border-radius: 5px 0 5px 5px; visibility: hidden; list-style: none; background: #C20F2F; } /* 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; */ .nav ul a:hover, .nav ul a:focus, .nav ul ul a:hover, .nav ul ul a:focus { background: #BA0E2E !important; /* Xtext-decoration:underline; Xcursor:pointer !important; */ } /* system nav */ .nav-system { position: absolute; right: 25px; top: 13px; z-index: 11; /* needed so that main nav doesn't cover drop-down links */ color: #FFF; } .welcome > a { float: none; display: inline-block; } .dd .arrow, .dir > .arrow {border-top-width:7px;} .link-logout > .arrow { border-left-width:7px; visibility: hidden; } .link-logout:hover > .arrow, .link-logout:focus > .arrow, .link-logout:active > .arrow { visibility: visible; } /* 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 { float: left; } /* .nav-tabs li */ .nav-main li > a { float: left; margin: 0 3px 0 0; 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: #c20f2f; 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; } .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: #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 */ .stacked > li { display: list-item; } /* TODO : rename .stacked to .menu | same for .dd */ .stacked > li > a { display: block; } /* breadcrumbs */ X.breadcrumb { margin: 0 0 1.5em; } /* abstract margins to a .margin class ??? */ .breadcrumb a {text-decoration: none;} /* horizontal link list */ X.breadcrumb, X.nav-links { margin: 0 0 1.5em; } .breadcrumb > li, .nav-links > li { display: inline; } X.breadcrumb a, X.nav-links a { margin: 0 .5em; } X.breadcrumb li:first-child a, X.nav-links li:first-child a { margin-left: 0; } .divider-path:before, .divider li:before {content: "/";} /* adds path divider | with spaces content:"\a0\a0/\a0"; */ .divider-space:before, .nav-links li:before { content: " "; } /* adds space divider | or use   in HTML */ .divider-dot:before, .divider-dot li:before { content: "•"; } /* adds a mid dot divider | or use · in HTML */ .divider-pipe:before, .nav-links.divider li:before { content: "|"; } /* adds a pipe divider | or use | in HTML */ .nav-links li:before, .divider li:before, span.divider { color: #ccc; padding: 0 .5em; } .nav-links li:first-child:before, .divider li:first-child:before { /* :first-child is more browser compatible than :last-child */ content: ""; /* zero out any dividers on first link */ padding: 0; /* zero out left AND right padding on first divider */ } /* another way of doing above without :first-child */ X.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; } /* firefox button */ .view-button { background-color: #778343; border-radius: 5px 5px 5px 5px; display: block; float: left; margin-top: 10px; padding: 5px; } .view-button a { background-color: #FFFFFF; background-image: -webkit-linear-gradient(#FFFFFF, #CCCCCC); background-image: -moz-linear-gradient(#FFFFFF, #CCCCCC); border-radius: 5px 5px 5px 5px; box-shadow: 0 -5px #BBBBBB inset; color: #666666; display: block; float: left; Xfont-size: 14px; font-weight: 700; padding: 6px 20px 12px; text-decoration: none; text-shadow: 1px 1px 0 #FFFFFF; } .view-button a:hover { background-image: -webkit-linear-gradient(#FFFFFF, #BBBBBB); background-image: -moz-linear-gradient(#FFFFFF, #BBBBBB); box-shadow: 0 -5px #AAAAAA inset; color: #444444; } .view-button a:hover strong { color: #111111; } .view-button a:active { margin-top: 2px; padding-bottom: 10px; position: relative; box-shadow: 0 -3px #999 inset; } .view-button a strong { color: #333333; } /* fragment link in heading */ /* http://www.zurb.com/playground/foundation-icons */ @font-face { font-family: 'FoundationIconsGeneral'; src: url('../fonts/foundation-icons-general/foundation-icons-general.eot'); src: url('../fonts/foundation-icons-general.eot?#iefix') format('embedded-opentype'), url('../fonts/foundation-icons-general.woff') format('woff'), url('../fonts/foundation-icons-general.ttf') format('truetype'), url('../fonts/foundation-icons-general.svg#FoundationIcons[Name]') format('svg'); font-weight: normal; font-style: normal; } /* http://www.entypo.com */ @font-face { font-family: 'EntypoRegular'; src: url('../fonts/entypo-webfont.eot'); src: url('../fonts/entypo-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/entypo-webfont.woff') format('woff'), url('../fonts/entypo-webfont.ttf') format('truetype'), url('../fonts/entypo-webfont.svg#EntypoRegular') format('svg'); font-weight: normal; font-style: normal; } /* http://johncaserta.com/modern-pictograms/ */ @font-face { font-family: 'ModernPictogramsNormal'; src: url('../fonts/modernpics-webfont.eot'); src: url('../fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/modernpics-webfont.woff') format('woff'), url('../fonts/modernpics-webfont.ttf') format('truetype'), url('../fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot'); src: url('../fonts/fontawesome-webfont.eot?#iefix') format('eot'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: normal; src: url("//www.mozilla.org/img/fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("//www.mozilla.org/img/fonts/OpenSans-Regular-webfont.woff") format("woff"), url("//www.mozilla.org/img/fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("//www.mozilla.org/img/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg"); } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: bold; src: url("//www.mozilla.org/img/fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("//www.mozilla.org/img/fonts/OpenSans-Semibold-webfont.woff") format("woff"), url("//www.mozilla.org/img/fonts/OpenSans-Semibold-webfont.ttf") format("truetype"), url("//www.mozilla.org/img/fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold") format("svg"); } @font-face { font-family: "Open Sans Light"; font-style: normal; font-weight: normal; src: url("//www.mozilla.org/img/fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("//www.mozilla.org/img/fonts/OpenSans-Light-webfont.woff") format("woff"), url("//www.mozilla.org/img/fonts/OpenSans-Light-webfont.ttf") format("truetype"), url("//www.mozilla.org/img/fonts/OpenSans-Light-webfont.svg#OpenSansLight") format("svg"); } .glyph { cursor: default; font-size: 16px; /* ??? */ line-height: 1; } .general { font-family: 'FoundationIconsGeneral'; } .entypo { font-family: 'EntypoRegular'; } .pictograms { font-family: 'ModernPictogramsNormal'; } .fontawesome { font-family: 'FontAwesome'; } .callout { } /* 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 */ .pull-quote { } mark, .highlight { background: #F9FDA2; } code { font-weight: 700; color: #B00; } blockquote, .indent { Xtext-indent: -1.5em; margin:0 0 1.5em; border-left:4px solid #ddd; padding:0 1.5em; } Xblockquote:first-line, X.indent:first-line { Xtext-indent: -1.5em; } blockquote p, X.indent p { Xtext-indent: -1.5em; } .arrow { height: 0; width: 0; border: 4px solid transparent; display: inline-block; /*BG*/ overflow:hidden; /*BG*/ } .arrow-up { border-bottom-color: inherit; border-top-width:0; } .arrow-down { border-top-color: inherit; border-bottom-width:0; } .arrow-left { border-right-color: inherit; border-left-width:0; } .arrow-right { border-left-color: inherit; border-right-width:0; } .opener { color: #B13204; display: block; float: left; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12em; line-height: 0; margin: 105px 0 0 -180px; padding-right: 10px; position: relative; text-align: right; width: 170px; } /* for images and other containers */ .rounded {border-radius: .25em;} .circular { border-radius: 100%; } .framed { box-shadow: 0 2px 2px #e9e9e9; border: 1px solid #ccc; padding: 0.25em; display:inline-block; } .framed.circular img { border-radius: 100%; } .circle { width: 200px; height: 200px; position: relative; Xbackground-image: -moz-radial-gradient(45px 45px 45deg, circle cover, lightGreen 0%, green 100%, blue 5%); Xbackground-image: -webkit-radial-gradient(45px 45px, circle cover, lightGreen, green); Xbackground-image: radial-gradient(45px 45px 45deg, circle cover, lightGreen 0%, green 100%, blue 5%); border: 1px solid green; X-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .3); box-shadow: 0 3px 8px rgba(0, 0, 0, .3); text-align: center; } .circle .number { line-height: 2; font-size: 100px; color: green; text-shadow: 1px 1px 0 #fff; } .circle .date-month { display: block; line-height: 1; margin-top: -4em; font-size: 12px; } .circle { border-radius: 50%; display: inline-block; margin-right: 20px; } /* content fragment anchor link - permalink */ .permalink { opacity: 0; text-decoration: none; background: #ffc; border-radius: 3px; line-height: 1; padding: 0 .25em; } h1:hover .permalink, h2:hover .permalink, h3:hover .permalink, h4:hover .permalink, h5:hover .permalink, h6:hover .permalink, .permalink:focus { opacity: 1; display: inline-block; line-height: 1; } X.anchor { cursor: pointer; margin-left: -2em; padding-left: 1.25em; position: absolute; left: 0; top: 0; } .mini-icon-link:before { content: "a"; font-family: 'FoundationIconsGeneral'; } /* highlight active tab */ #page-id #link2 a { border-top: 0; padding: 5px 0 4px; background: #fff; } #page-id #link2 a:hover, #page-id #link2 a:focus { cursor: text; padding: 5px 0 4px; } #page-id #link2 a span { background: #fff; color: #000; font-weight: 700; } /* CONTENT --------------------------------- */ .content { clear: both; padding: 1px 0; margin: 18px 25px 18px; } /* FOOTER --------------------------------- */ .footer { clear: both; position: relative; margin: 0 25px; border-top: 1px solid #eee; padding: 0 0 1px; background: transparent; color: #999; } .footer p { margin: 1em 160px 0 5px; font-size: 1em; line-height: 1.0; } .link-logo { display: block; position: absolute; right: 5px; top: 0; width: 150px; height: 40px; margin-top: 10px; padding: 0; } /* --------------------------------- CONTENT FRAGMENTS --------------------------------- */ /* MESSAGES ------------------------------------------------------------------ */ /* status messages */ /* messages */ .msg { position: relative; clear: both; margin: 0 0 1.5em; padding: .5em 1em; /* 6px 12px */ border-width: .25em; /* 3px */ border-style: solid; -webkit-border-radius: .8333333333333333em; /* 10px */ -moz-border-radius: .8333333333333333em; border-radius: .8333333333333333em; } X.msg + .msg { margin-top: -9px; } /* reduce vertical spacing between adjacent messages */ .msg-info, .msg-help { background-color: #D1EFEF; /*#eff*/ border-color: #B5DFDF; /*#e8f9f9*/ color: #008; /* #008; */ } .msg-success { background-color: #dfa; border-color: #ce9; color: #286F14; /* #390; */ } .msg-error { background-color: #fff7ee; border-color: #fcc; color: #a00; /* #d21034; */ } /* message heading */ .msg-heading { font-size: 1.5em; /* 18px */ line-height: 2; /* 36px */ margin-bottom: .5em; /* 9px */ color: inherit; border-bottom-width: 1px; border-bottom-style: dashed; border-color: inherit; font-family: inherit; Xoverflow: hidden; } /* message type icons - DEPRECATED : abstracted with .icon */ X.msg:before { background-image: url(../img/sprite.png); background-position: -32px 50%; background-repeat: no-repeat; content: " "; position: absolute; left: .666666em; width: 16px; /* width is based on width of icon */ height: 1.6em; /* height is based on line-height of containing element (h2) in order to vertically center */ } X.msg-icon:before { Xbackground-image: url(../img/sprite.png); Xbackground-position: -32px 50%; Xbackground-repeat: no-repeat; Xcontent: ""; Xposition: absolute; left: -24px; Xwidth: 16px; /* width is based on width of icon */ Xheight: 16px; /* height is based on line-height of containing element (h2) in order to vertically center */ } /* message close button */ .close { font-size: 1.5em; /* 18px */ font-weight: 700; text-shadow: 0 -1px 0 #777; color: inherit; cursor: pointer; line-height: 2; /* 36px */ position: absolute; right: .6666666666666667em; /* 12px */ z-index: 100; /* make close button clickable */ text-decoration: none; opacity: .25; filter: alpha(opacity=25); } p > .close { line-height: 1.1; } .close:hover { color: inherit; opacity: 1; filter: alpha(opacity=100); } /* icons */ .icon { display: inline; Xtext-indent: 100%; padding: 10px 8px 9px; /* padding can be used to align icon with text and is needed to give icon size when it is display inline */ margin-right: 8px; Xposition: relative; font-size: inherit; line-height: inherit; background-image: url("/assets/img/sprite.png"); background-repeat: no-repeat; } .icon-success { background-position: 0 50%; } .icon-error { background-position: -16px 50%; } .icon-info { background-position: -32px 50%; } .icon-x { background-position: -48px 50%; } .icon-check { background-position: -64px 50%; } .icon-help { background-position: -80px 50%; } /* arrows */ .arrow { height: 0; width: 0; border: 5px solid transparent; display: inline-block; /*BG*/ } .arrow-up {border-bottom-color: #000;} .arrow-down {border-top-color: #000;} .arrow-left {border-right-color: #000;} .arrow-right {border-left-color: #000;} /* FORMS --------------------------------- */ form { display: inline; } fieldset { margin: 2em 0; border: 1px solid #eee; border-width: 1px 0 0; padding: 10px; } legend { margin: 1em 0; } legend span { display: block; font-size: 1.3em; font-weight: 700; color: #d21033; text-transform: uppercase; } fieldset fieldset { margin: 1.5em 0; border-width: 1px; padding: 1em; background: #fafafa; } fieldset fieldset legend { font-size: 1.3em; margin: 0 0 0 -5px; padding: 0 5px; } fieldset fieldset legend span { font-size: 1em; color: #000; text-transform: capitalize; } label { cursor: pointer; font-size: 1.1em; color: #555; } label em { color: #d21033; } input[type="text"], input[type="password"], select, textarea { border-width: 1px; Xfont-family: Verdana, sans-serif; Xfont-size: 1.1em; Xcolor: #000; } input[type="text"], input[type="password"], textarea, option { padding: 3px; } option { font-family: Verdana, sans-serif; font-size: 1em; color: #000; padding: 2px 0; } input[type="text"], input[type="password"] { min-height: 1.5em; } * html select { font: normal 400 1.1em/1.0 Verdana, sans-serif; height: 1.5em } optgroup { font-weight: 700; font-style: normal; color: #777; } optgroup option { padding-left: 1em; } textarea { line-height: 1.5; } xinput.btn-submit { border-width: 2px; } /* vertically aligned form TODO: combine styles DEPRECATED: 5/22/07 - fm-v div.row select, .fm-v div.row textarea {float:left; clear:both;} can be combined with .fm-v div.row input ??? */ .fm-v div.row { float: left; margin: 0; padding: .5em 0; width: 100%; } .fm-v div.row label { float: left; width: 100%; line-height: 1.5; } .fm-v div.row input, .fm-v div.row select, .fm-v div.row textarea { float: left; clear: left; } .fm-v div.row input.check { float: left; clear: left; margin: 0 .5em 0 0; border: 0; width: 1.3em; height: 1.3em; position: relative; top: .1em; } .fm-v div.row label.check { float: left; width: auto; } .fm-v div.row input.radio { float: left; clear: left; margin: 0 .5em 0 0; border: 0; width: 1.3em; height: 1.3em; position: relative; top: .1em; } .fm-v div.row label.radio { float: left; width: auto; } .fm-v div.row span.msg-error { float: left; display: block; position: relative; top: .2em; margin: 0 0 0 1em; padding: 0 0 0 2em; font-size: 1.1em; line-height: 1.55; background: url(../img/error-s.gif) left top no-repeat; color: #d21033; } .fm-v span.msg-error { float: left; display: block; Xmargin: 1em 0; padding: 0 0 0 2em; font-size: 1.1em; line-height: 1.55; background: url(../img/error-s.gif) left top no-repeat; color: #d21033; } .fm-v div.row input.btn-submit { display: block; margin: 0; } /* float:left; clear:left; margin-bottom:0; or display:block */ /* horizontally aligned form */ .fm-h div.row { float: left; margin: 0; padding: .5em 0; width: 100%; } .fm-h div.row label { float: left; clear: left; margin-right: .5em; width: 15em; text-align: right; line-height: 1.5; } /* display:block; */ .fm-h div.row input { float: left; clear: right; } /* margin-bottom:1em; */ .fm-h div.row.check label { clear: none; width: auto; margin-right: 1.5em; } .fm-h div.row.check input { position: relative; top: -2px; } .fm-h div.row input.btn-submit { clear: both; display: block; text-align: center; } /* float:left; clear:left; margin-bottom:0; or display block */ /* highlight errors */ .error { background: #ffefef; } input.error, select.error, textarea.error { background: #FFEFEF; color: #d21033; } /* border-color:#d21033; */ /* mark as required */ /* Required text */ .required { background: #ffd; } abbr[title="Required"], abbr.required { border: 0; color: #d21033; background: transparent; } Xinput.required, Xselect.required, Xtextarea.required { border-width: 1px; } /* TABS --------------------------------- */ .tabs { clear: both; overflow: hidden; margin: 18px 0; padding: 1px 0 0; width: 100%; line-height: normal; border-bottom: 5px solid #ddd; } .tabs ul { margin: 0; padding: 0; list-style: none; } .tabs li { display: inline; margin: 0; padding: 0; } .tabs a { float: left; margin: 0 3px 0 0; border-top: 3px solid #fff; border-bottom: 1px solid #eee; box-shadow: inset 0 -5px 5px -5px #bbb; padding: 5px 0 0 9px; background: #f2f2f2; text-decoration: none; } .tabs a span { display: block; padding: 2px 15px 2px 6px; color: #999; } .tabs a:hover { border-top: 3px solid #f2f2f2; padding: 3px 0 2px 9px; } .tabs a:hover span { color: #333; } .tabs .active-tab a, .tabs .active-tab a:hover { background: #dfdfdf; border: 1px solid #ccc; border-bottom: 0; padding-bottom: 1px; cursor: text; padding: 5px 0 1px 9px; box-shadow: none; } .tabs .active-tab a span { padding-bottom: 4px; color: #000; } /* TABS (Centered) --------------------------------- */ .tabs-centered { float: left; overflow: hidden; width: 100%; background: #fff; border-bottom: 5px solid #ddd; position: relative; } .tabs-centered ul { clear: left; float: left; list-style: none; margin: 0; padding: 0; position: relative; left: 50%; text-align: center; } .tabs-centered ul li { display: block; float: left; list-style: none; margin: 0; padding: 0; position: relative; right: 50%; } .tabs-centered ul li a { display: block; margin: 0 3px 0 0; border-top: 3px solid #fff; border-bottom: 1px; padding: 7px 15px 3px 15px; background: #f2f2f2; color: #999; text-decoration: none; line-height: 1.3em; } .tabs-centered ul li a:hover { Xbackground: #369; color: #333; border: 0; padding-bottom: 6px; } .tabs-centered ul li a.active, .tabs-centered ul li a.active:hover { color: #000; background: #dfdfdf; font-weight: bold; border: 0; padding-bottom: 7px; } /* TABS (right) --------------------------------- */ .tabs-centered { float: left; overflow: hidden; width: 100%; background: #fff; border-bottom: 5px solid #ddd; position: relative; } .tabs-right ul { clear: left; float: right; list-style: none; margin: 0; padding: 0; position: relative; left: 0; text-align: right; } .tabs-right ul li { float: left; right: 0; } /* TABS-ALT (Reversed) --------------------------------- */ .tabs-alt { border: 0; background: #ccc; } /* url(../img/tab_line.gif) repeat-x left bottom; */ .tabs-alt ul { padding: 18px 0 0 20px; } .tabs-alt a { Xpadding: 5px 0 0 9px; border-color: #ccc; border-bottom: 1px solid #eee; box-shadow: none; } .tabs-alt a:hover { border-top: 3px solid #f2f2f2; padding: 3px 0 2px 9px; } /* #eaeaea */ .tabs-alt .active-tab a, .tabs-alt .active-tab a:hover { border-color: #fff; background: #fff; padding: 5px 0 2px 9px; border-top: 0; } .tabs-alt .active-tab a span { background: #fff } /* TABBED SECTION --------------------------------- */ /* tab navigation */ #nav-tab { float: left; margin: 1.5em 0 0; padding: 1px 0 0; width: 100%; line-height: normal; } .content #nav-tab ul { margin: 0; padding: 0; list-style: none; } #nav-tab li { display: inline; margin: 0; padding: 0; } #nav-tab a { float: left; margin: 0 3px 0 0; border-top: 3px solid #fff; padding: 5px 0 1px 9px; background: #f2f2f2; text-decoration: none; } #nav-tab a span { float: left; display: block; padding: 3px 15px 3px 6px; background: #f2f2f2; color: #999; } /* Hide from IE5Mac only \*/ #nav-tab a span { float: none; } /* End hack */ #nav-tab a:hover { border-top: 3px solid #f2f2f2; padding: 3px 0 3px 9px; } #nav-tab a:hover span { color: #333; } #nav-tab .active-tab a { background: #dfdfdf; border-top: 1px solid #dfdfdf; padding-bottom: 2px; } #nav-tab .active-tab a:hover { cursor: text; padding: 5px 0 2px 9px; } #nav-tab .active-tab a span { padding-bottom: 5px; color: #000; Xfont-weight: 700; background: #dfdfdf } /* tab panel */ .tab-panel { clear: both; margin: 0 0 2em; padding: 9px; background-color: #dfdfdf; } .tab-content { display: block; } * html .tab-panel { height: 1px; } * html .tab-content { height: 200px; } /* min-height workaround http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/ for Mozilla, Safari, Opera, IE5/Mac */ *>.tab-panel { padding-top: 209px; /* stretch the containing box to at least 209px tall; 9px of padding-top */ min-height: 1px; /* needed to keep containing box open; lack of an explicit height value collapses container (padding included); keep container open by setting min-height to any value; for Opera */ } /* cancel out the containing box's padding non-IE browsers */ *>.tab-panel div.tab-content { min-height: 200px; margin-top: -200px; } .tab-panel div.tab-content { padding: 10px; background: #ffe; font-size: 11px; } /* TABLES ------------------------------------------------------------------ */ table { margin: 0 0 18px; margin: 0 0 1.5rem; border-collapse: collapse; border-spacing: 0; /* old browsers may need 'cellspacing="0"' in the HTML */ empty-cells: show; background: #fff; } caption, th, td { text-align: left; padding: .5em .75em; } caption { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } th { white-space: nowrap; /* or use   between words or .nowrap helper class */ font-weight: 700; } thead th { border-bottom: 1px solid #ccc; } tfoot th, tfoot td { border-top: 1px solid #ccc; } /* zebra stripe */ .striped tr:nth-child(even), .striped .alt td { background-color: #f5f5f5; } /* Apply class="alt" on even s for backward compatibility with older IEs | TEST : ??? can background be applied to tr directly? */ /* lined
*/ .lined tbody td, .lined tbody th { border-top: 1px solid #eee; } /* grid
*/ .grid { Xmargin-left: 1px; /* BUG : Firefox expands the width of table with border by an extra 1px and moves it that distance to the left */ border: 1px solid #ccc; border-width: 1px 0 0 1px; } .grid caption { border: 1px solid #888; background-color: #999; color: #fff; } .grid thead th { background: #ddd; color: #666; } .grid th, .grid td { border: 1px solid #ccc; border-width: 0 1px 1px 0; } /* highlight table rows | does not work in some IE */ .highlighted tbody tr:hover td, .highlighted tbody tr:hover th, .highlighted tbody tr.over td { background-color: #ffc; } /* COMPONENTS ------------------------------------------------------------------ */ /* button base | |