/* * HTML5 ✰ Boilerplate * * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. * * Detailed information about this CSS: h5bp.com/css * * ==|== normalize ========================================================== */ /* ============================================================================= HTML5 display definitions ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } /* ============================================================================= Base ========================================================================== */ /* * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units * 2. Force vertical scrollbar in non-IE * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g */ html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; font-size: 13px; line-height: 1.231; } body, button, input, select, textarea { font-family: sans-serif; color: #222; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection declarations have to be separate * Also: hot pink! (or customize the background color to match your design) */ ::-moz-selection { background: #001A66; color: #fff; text-shadow: none; } ::selection { background: #001A66; color: #fff; text-shadow: none; } /* ============================================================================= Links ========================================================================== */ a { color: #00e; text-decoration: none; } a:hover { color: #06e; } a:focus { outline: thin dotted; } /* Improve readability when focused and hovered in all browsers: h5bp.com/h */ a:hover, a:active { outline: 0; } /* ============================================================================= Typography ========================================================================== */ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } /* Redeclare monospace font family: h5bp.com/j */ pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } /* Improve readability of pre-formatted text in all browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } /* Position subscript and superscript content without affecting line-height: h5bp.com/k */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ============================================================================= Lists ========================================================================== */ ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } /* ============================================================================= Embedded content ========================================================================== */ /* * 1. Improve image quality when scaled in IE7: h5bp.com/d * 2. Remove the gap between images and borders on image containers: h5bp.com/e */ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } /* * Correct overflow not hidden in IE9 */ svg:not(:root) { overflow: hidden; } /* ============================================================================= Figures ========================================================================== */ figure { margin: 0; } /* ============================================================================= Forms ========================================================================== */ form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } /* Indicate that 'label' will shift focus to the associated form element */ label { cursor: pointer; } /* * 1. Correct color not inheriting in IE6/7/8/9 * 2. Correct alignment displayed oddly in IE6/7 */ legend { border: 0; *margin-left: -7px; padding: 0; } /* * 1. Correct font-size not inheriting in all browsers * 2. Remove margins in FF3/4 S5 Chrome * 3. Define consistent vertical alignment display in all browsers */ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } /* * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) * 2. Correct inner spacing displayed oddly in IE6/7 */ button, input { line-height: normal; *overflow: visible; } /* * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 */ table button, table input { *overflow: auto; } /* * 1. Display hand cursor for clickable form elements * 2. Allow styling of clickable form elements in iOS */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } /* * Consistent box sizing and appearance */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Remove inner padding and border in FF3/4: h5bp.com/l */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Remove default vertical scrollbar in IE6/7/8/9 * 2. Allow only vertical resizing */ textarea { overflow: auto; vertical-align: top; resize: vertical; } /* Colors for form validity */ input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } /* ============================================================================= Tables ========================================================================== */ table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } /* ==|== primary styles ===================================================== Author: ========================================================================== */ @navy: #122849; @grey: #5A5A5A; @gray: #5A5A5A; /* @Helvetica55: 'Conv_HelveticaNeueLTStd-Roman'; @Helvetica45: 'Conv_HelveticaNeueLTStd-Lt'; */ @Helvetica55: 'Helvetica', Arial, sans-serif; @Helvetica45: 'Helvetica', Arial, sans-serif; @lightgrey: #969696; @lightgray: #969696; /* .windows, .windows a { font-weight: bold !important; } */ /* @font-face { font-family: 'Conv_HelveticaNeueLTStd-Roman'; src: url('fonts/HelveticaNeueLTStd-Roman.eot'); src: local('☺'), url('fonts/HelveticaNeueLTStd-Roman.woff') format('woff'), url('fonts/HelveticaNeueLTStd-Roman.ttf') format('truetype'), url('fonts/HelveticaNeueLTStd-Roman.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Conv_HelveticaNeueLTStd-Lt'; src: url('fonts/HelveticaNeueLTStd-Lt.eot'); src: local('☺'), url('fonts/HelveticaNeueLTStd-Lt.woff') format('woff'), url('fonts/HelveticaNeueLTStd-Lt.ttf') format('truetype'), url('fonts/HelveticaNeueLTStd-Lt.svg') format('svg'); font-weight: normal; font-style: normal; } */ .hide(@width, @height){ display: block; text-indent: -9999px; width: @width; height: @height; } * { margin: 0; } html, body { height: 100%; } #container { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -90px; /* the bottom margin is the negative value of the footer's height */ } body { background: url(images/TopBorder.png) repeat-x left top; font-family: "Helvetica", Arial, sans-serif; color: @grey; } #container { width: 900px; } .push { height: 90px; display: block; } footer { border-bottom: 40px solid @navy; clear: both; padding-top: 50px; display: block; } header { margin-bottom: 20px; float: left; width: 100%; margin-top: 10px; position: relative; #logo { .hide(200px, 70px); background: url(images/logo.png) no-repeat; float: left; margin-top: 40px; } .subnav { float: right; width: 642px; margin-top: 12px; ul { margin: 0; padding: 0; float: left; } li { list-style: inside none; float: left; height: 18px; a { color: @grey; font-family: @Helvetica45; font-size: 13px; padding-right: 12px; margin-right: 8px; background: url(images/dot.png) no-repeat right 4px; display: block; float: left; height: 13px; line-height: 13px; margin-bottom: 5px; &.active, &:hover { color: @navy; font-family: @Helvetica55; font-weight: bold; } &.last { background: none; } } } } nav { width: 642px; float: right; margin-top: 45px; border-bottom: 1px solid @lightgrey; height: 20px; overflow: visible; li { list-style: none; float: left; margin-left: 35px; &:first-child { margin-left: 0; } } a { color: @grey; font-size: 15px; text-transform: uppercase; font-family: @Helvetica45, "Helvetica", Arial, sans-serif; font-weight: 100; height: 19px; display: block; position: relative; &.active, &:hover { color: @navy; border-bottom: 2px solid @navy; font-weight: bold; span { background: url(images/nav_arrow.png) no-repeat 15px bottom; position: absolute; width: 100%; left: 0; bottom: -8px; height: 6px; } } } } } .lang_select { position: absolute; top: 20px; right: 0; font-size: 11px; span { padding-left: 7px; margin-left: 5px; background: url(images/lang_separator.png) no-repeat left center; &:first-child { padding-left: 0; margin-left: 0; background: none; } } a { color: @lightgrey; &:hover { color: @navy; } } .yams_current { color: @navy; } } #banner_image { margin-left: -50px; } .sidebar { width: 195px; } h2 { margin: 0; color: @grey; font-size: 15px; margin-top: -20px; margin-bottom: 23px; border-bottom: 2px solid @navy; float: left; position: relative; height: 18px; font-family: @Helvetica45; text-transform: uppercase; font-weight: normal; span { background: url(images/nav_arrow.png) no-repeat 15px bottom; position: absolute; width: 100%; left: 0; bottom: -8px; height: 6px; } &.wide { width: 100%; } } h3 { margin: 0; clear: both; font-weight: normal; font-family: @Helvetica55; font-size: 13px; color: @navy; text-transform: uppercase; } p { clear: both; font-size: 14px; line-height: 18px; margin: 15px 0 15px; strong { font-weight: normal; font-family: @Helvetica55; color: @navy; } } hr { border: 0; background: url(images/separator.png) repeat-x; margin: 0; height: 3px; } .left, .sidebar, .centered { width: 503px; float: left; color: @navy; font-family: @Helvetica55; text-transform: uppercase; border-top: 1px solid @lightgrey; border-bottom: 1px solid @lightgrey; margin-top: 4em; } .centered { float: none; width: 660px; text-align: justify; margin-left: (900px-660px)/2; border-bottom: 2px solid @navy; } .sidebar { width: 195px; margin-top: 3em; padding: 0; ul { padding: 0; margin: 0; } li { list-style: none inside; background: url(images/separator.png) no-repeat left top; &:first-child { background: none; } &.active { background: none; } } a { color: @grey; font-family: @Helvetica45; padding: 1em 0; display: block; height: 15px; font-size: 15px; margin-top: -1px; &.active { color: @navy; background: url(images/sidebar_active.png) no-repeat left top; } } } .right, .stock_quote, .stock_chart { float: right; width: 345px; margin-top: 4em; border-top: 1px solid @lightgrey; border-bottom: 1px solid @lightgrey; padding-bottom: 15px; &.announcements, &.content { width: 640px; position: relative; padding-bottom: 0; .text_content { float: left; margin-left: 20px; margin-top: 2em; .title { color: @navy; } img { float: none; } ul { padding-left: 0; list-style: inside; font-family: @Helvetica45; } } img { float: left; } p img { float: none; } ul a { color: @grey; &:hover { text-decoration: underline; color: @navy; } } } &.content { border-bottom: none; p a { color: @grey; &:hover { text-decoration: underline; color: @navy; } } h4 { font-size: 13px; color: @navy; font-weight: normal; font-family: @Helvetica55; text-transform: uppercase; clear: both; margin-bottom: 0; } } &.stock_quote { width: 326px; padding-bottom: 0; } &.stock_chart { width: 301px; } &.less_margin { margin-top: 30px; } } .note { position: absolute; font-family: @Helvetica45; font-size: 10px; top: -17px; right: 0; width: 320px; height: 12px; text-align: right; a { color: @navy; } } .stock_quote { width: 326px; margin-right: 13px; position: relative; border-bottom: none; } .stock_chart { width: 301px; border-bottom: none; } &.content p { font-size: 13px; font-family: @Helvetica45; } .years { position: absolute; top: 17px; right: 0; a { font-family: @Helvetica45; font-size: 13px; color: @grey; padding-left: 12px; margin-left: 8px; background: url(images/dot.png) no-repeat left 2px; &:first-child { background: none; } &.active { font-family: @Helvetica55; color: @navy; } } } .row { clear: both; width: 640px; padding: 18px 0 15px; background: url(images/separator.png) repeat-x left top; float: left; &.first { background: none; padding-top: 0 } .title { width: 200px; padding-right: 20px; float: left; font-family: @Helvetica55; color: @navy; } .value { width: 420px; float: left; p { margin: 0; strong { color: @grey; } } } } table { width: 640px; font-family: @Helvetica45; font-size: 12px; border-collapse: collapse; } th { background-color: @navy; color: #fff; font-weight: normal; padding: 10px 8px; border: 2px solid #fff; text-align: left; } td { border: 2px solid #fff; padding: 3px 5px 3px 8px; } tr td { background-color: #ECECEC; } tr.odd td{ background-color: #A2A2A2; } #stock_quote_table { width: 326px; td { width: 25%; } th { text-align: center; } } .separator { background: url(images/separator.png); .hide(348px, 3px); float: left; margin: 1em 0; } .home_news_event { clear: both; span { font-family: @Helvetica45; font-style: italic; font-size: 10px; margin-bottom: 3px; display: block; } a { color: @grey; &:hover { color: @navy; text-decoration: underline; } } p { margin: 0; font-size: 13px; font-family: @Helvetica45; } } .announcement { clear: both; width: 640px; float: left; padding: 20px 0; background: url(images/separator.png) repeat-x left top; &.first { background: none; padding-top: 0; &.extra { padding-top: 17px; position: relative; top: 6px; } } .date { float: left; width: 70px; font-size: 10px; font-family: @Helvetica45; font-style: italic; padding-top: 2px; } p { float: left; width: 570px; clear: none; margin: 0; font-size: 13px; font-family: @Helvetica45; a { color: @grey; float: left; &:hover { color: @navy; text-decoration: underline; } img { margin-left: 5px; } } } } .footnote { font-family: @Helvetica45; font-size: 10px !important; clear: both; float: right; color: @lightgrey; margin-top: 17px; font-style: italic; a { color: @navy; } &.no_margin { margin-top: 0; } } p.justifyfull { text-align: justify; } /* ==|== non-semantic helper classes ======================================== Please define your styles before this section. ========================================================================== */ /* For image replacement */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } .ir br { display: none; } /* Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* Contain floats: h5bp.com/q */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* ==|== media queries ====================================================== PLACEHOLDER Media Queries for Responsive Design. These override the primary ('mobile first') styles Modify as content requires. ========================================================================== */ @media only screen and (min-width: 480px) { /* Style adjustments for viewports 480px and over go here */ } @media only screen and (min-width: 768px) { /* Style adjustments for viewports 768px and over go here */ } /* ==|== print styles ======================================================= Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { text-decoration: underline; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }