Skip to content

Instantly share code, notes, and snippets.

@Shavindra
Created April 14, 2013 21:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Shavindra/5384245 to your computer and use it in GitHub Desktop.
Save Shavindra/5384245 to your computer and use it in GitHub Desktop.
A CodePen by Shavin Fonseka. SASS + Compass test
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VSAM - Vega Swiss Asset Management </title>
<link rel="shortcut icon" href="/wp-content/themes/vsam/assets/img/favicon.ico" />
<meta name="description" content="">
<meta name="author" content="">
<meta name='robots' content='noindex,nofollow' />
<link rel='stylesheet' id='contact-form-7-css' href='http://dev.vsam.co.uk/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.3.2' type='text/css' media='all' />
<script type='text/javascript' src='http://dev.vsam.co.uk/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<link rel='next' title='Team' href='http://dev.vsam.co.uk/team' />
<link rel='canonical' href='http://dev.vsam.co.uk/' />
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<script src="/wp-content/themes/vsam/assets/js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="/vsam/assets/css/grid.css">
<link rel="stylesheet" href="/vsam/style.css">
<link rel="stylesheet" type="text/css" media="all" href="http://dev.vsam.co.uk/wp-content/themes/vsam/css/style.css" />
<script src="/wp-content/themes/vsam/assets/js/libs/jquery.tools.min.js"></script>
<script src="/wp-content/themes/vsam/assets/js/libs/waypoints.js"></script>
<script src="/wp-content/themes/vsam/assets/js/libs/clock.js"></script>
</head>
<body class="home page page-id-6 page-template page-template-page-templateshome-php">
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<div id="wrapper" class="home-page">
<div class="header-container">
<header class="">
<div class="branding grid-1">
<div id="text-2" class="header-widget col4 widget_text"> <div class="textwidget">&ndash;
<br>
<h1>
<object id="object" width="263" height="72" data="/wp-content/themes/vsam/assets/img/vsam_logo.svg" type="image/svg+xml"> VSAM</object></h1>
&ndash;
<span>Vega <br>Swiss <br>Asset <br>Management</span>
&ndash;</div>
</div>
<div class="clocks">
<!-- <div class="abu_dhabi">
&ndash;
<canvas class="CoolClock:classic:22:noSeconds:4 leftRightPad" id="abu_dhabi"></canvas>
<span>Abu Dhabi</span>
&ndash;
<br>
<br>
<br>
<br>
&ndash;
</div>
<div class="nyc">
&ndash;
<canvas class="CoolClock:classic:22:noSeconds:-4 leftRightPad" id="nyc"></canvas> <span>New York</span>
&ndash;
<!-- <br>
<br>
<br>
<br>
&ndash;
</div>
<div class="londn">
&ndash;
<canvas class="CoolClock:classic:22:noSeconds:1 leftRightPad" id="london"></canvas> <span>London</span>
&ndash;
<!-- <br>
<br>
<br>
<br>
&ndash;
</div>
<div class="geneva">
&ndash;
<canvas class="CoolClock:classic:22:noSeconds:2 leftRightPad" id="geneva"></canvas>
<span>Zurich</span>
&ndash;
<!-- <br>
<br>
<br>
<br>
&ndash;
</div>-->
</div>
</div>
<!-- Start home Sections -->
<div id="head-scroller" class="scroller">
<div class="home-slides scrollitem">
<!-- Start Section -->
<section style="background:url('http://dev.vsam.co.uk/media/2012/12/vsam.jpg') no-repeat center bottom; background-repeat:no-repeat; background-size:cover; " class="scrollitem">
<div class="scroll-content"> </div>
</section>
</div>
</div>
<div id="main-nav-holder">
<nav id="main-nav" class="main-nav">
<ul id="menu-primary" class="menu"><li id="company-link" class="company col1 menu-item-company col1" data-link-id="company"><a title="Company" href="/#company">Company</a></li>
<li id="team-link" class="team col1 menu-item-team col1" data-link-id="team"><a title="Team" href="/#team">Team</a></li>
<li id="services-link" class="services col1 menu-item-services col1" data-link-id="services"><a title="Services" href="/#services">Services</a></li>
<li id="contact-link" class="contact col1 menu-item-contact col1" data-link-id="contact"><a title="Contact" href="/#contact">Contact</a></li>
<li id="news-link" class="news col1 menu-item-news col1" data-link-id="news"><a href="/news">News</a></li>
<li id="media-centre-link" class="media-centre col1 menu-item-media-centre col1" data-link-id="media-centre"><a title="Media Centre" href="/media-centre">Media Centre</a></li>
<li id="logo" class="col3 logo inc"><a href="/"><span></span><object width="66.5" height="18" id="object" type="image/svg+xml" data="/wp-content/themes/vsam/assets/img/vsam_logo.svg">
Please use a modern browser!
</object></a></li></ul>
</nav>
</div>
</header>
</div>
<div class="main-container content-home">
<div id="main" class="content">
<!-- Start Section: -->
<section class="full company company-section" id="company">
<div class="section-wrapper">
<h2>Company
</h2>
<div class="content-wrapper">
<div class="section-content">
<blockquote><p>Innovative Investment Solutions and Wealth Management for High Net Worth Clients and Companies.</p>
</blockquote>
</div>
<div class="section-slide sub-content">
<div class="items">
<!-- 1-4 -->
<div class="grid-1 panel-list">
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> We are completely independent.<br><br>
We are flexible and efficient, having a highly motivated and focused team with a long track record in the industry.</p></div>
</div>
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> We believe that prudent investment decisions require a great deal of time, experience and expertise. Therefore, at VSAM we focus exclusively on Asset Management and Corporate Finance, allowing us to achieve a high degree of specialization and provide our clients with the most accurate and up-to-date market information available.</p></div>
</div>
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> In essence, we have the positive attributes typical of a multi-family office, uniquely enhanced by a skill-set that canvasses various niche specializations across a number of markets.</p></div>
</div>
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> We strive to build a sustainable business as a distinctive specialist investment group, driven by commitment to our core philosophies and values.</p></div>
</div>
</div>
<!-- 5-8 -->
<div class="grid-1 panel-list">
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> We are not all things to all people; and we never strive to be. We compete in our niche areas of specialization where we can truly add value.</p></div>
</div>
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> We are active managers of each Client’s bespoke portfolio, using a 100% open and transparent architecture platform.</p></div>
</div>
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> Our innovative, tailor-made financing and investment solutions are based on sophisticated financial engineering and private placement investments, which allow us to achieve considerable yield enhancement on clients’ funds while keeping the principal secure.</p></div>
</div>
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> Authorized and regulated by the Financial Services Authority</p></div>
</div>
</div>
</div>
</div>
<!-- <nav class="sect-nav"> -->
<a class="prev browse left "><span ></span><object width="13" height="15" id="object" type="image/svg+xml" data="/wp-content/themes/vsam/assets/img/arw.svg" ></object></a>
<a class="next browse right "><span></span><object width="13" height="15" id="object" type="image/svg+xml" data="/wp-content/themes/vsam/assets/img/arw.svg"></object></a>
<!-- </nav> -->
</div>
</div>
</section>
<!-- End Section -->
<!-- Start Section: -->
<section class="full team team-section" id="team">
<div class="section-wrapper">
<div class="featured-img">
<a href="http://dev.vsam.co.uk/team" title="Team"><img width="1030" height="645" src="http://dev.vsam.co.uk/media/2013/01/LANDING-PAGE_V5_14.jpg" class="attachment-full wp-post-image" alt="LANDING-PAGE_V5_14" /></a> <!-- <span id="team" data-content-pos="start"></span> -->
</div>
<h2>Team
</h2>
<div class="content-wrapper">
<div class="page-slider">
<div class="items">
<section class="page-slide col8">
<div class="section-content">
<p><span class="col col4">Ramon Vega<br />
<span class="title">MANAGING PARTNER / FOUNDER </span></span></p>
<aside class="right"><img class="wp-image-149 alignright col2" alt="Ramon-Vega" src="http://dev.vsam.co.uk/media/2013/03/Ramon-Vega.jpg" width="168" height="168" /></aside>
</div>
<div class="sub-content">
<div class="items">
<!-- 1-4 -->
<div class="grid-1 panel-list">
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> Swiss citizen of Spanish origin. In 2008, he founded Vega Swiss Asset Management UK LLP. In 2002, he was a founding member of Duet Asset Management, a London-based hedge fund, which currently manages $2.5bn.</p></div>
</div>
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> Ramon left Duet in 2008. Ramon is also the chairman and owner of Matterhorn Capital in Switzerland, a real estate company focusing on boutique hotels around Europe. </p></div>
</div>
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> He was a professional football player for Switzerland, Tottenham Hotspur and Celtic Glasgow.</p></div>
</div>
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> Ramon holds a business degree with a specialization in Banking, Finance and Corporate Finance from the Zurich Business School.</p></div>
</div>
</div>
</div>
</div>
</section>
<section class="page-slide col8">
<div class="section-content">
<p><span class="col col4">Stuart Cheek<br />
<span class="title">Head of Investor Relations</span></span></p>
<aside class="right"><a href="http://dev.vsam.co.uk/media/2013/01/Stuart_Cheeky_thumb.jpg"><img class="size-full wp-image-438 alignright" alt="Stuart_Cheeky_thumb" src="http://dev.vsam.co.uk/media/2013/01/Stuart_Cheeky_thumb.jpg" width="233" height="233" /></a></aside>
</div>
<div class="sub-content">
<div class="items">
<!-- 1-4 -->
<div class="grid-1 panel-list">
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> Stuart has over 30 years experience in the City, beginning his career on the floor of The London Stock Exchange and then the London International Financial Futures Exchange.</p></div>
</div>
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> From there be became one of the original UK partners at Cantor Fitzgerald before moving into Investment Banking.</p></div>
</div>
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> Stuart spent over 13 years at UBS and Santander as Managing Director and Head of UK Institutional Sales where he was responsible for overseeing and integrating sales and relationship management across various asset classes.</p></div>
</div>
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> In 2010, he joined Vega Swiss Asset Management where his role principally involves introducing new customers, especially leveraging off his extensive institutional client base, and managing those and existing relationships.</p></div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<a class="prev browse left"><span ></span><object width="13" height="15" id="object" type="image/svg+xml" data="/wp-content/themes/vsam/assets/img/arw.svg" ></object></a>
<a class="next browse right"><span></span><object width="13" height="15" id="object" type="image/svg+xml" data="/wp-content/themes/vsam/assets/img/arw.svg"></object></a>
</div>
</div>
</section>
<!-- End Section -->
<!-- Start Section: -->
<section class="full services services-section" id="services">
<div class="section-wrapper">
<div class="featured-img">
<a href="http://dev.vsam.co.uk/services" title="Services"><img width="1030" height="645" src="http://dev.vsam.co.uk/media/2013/01/LANDING-PAGE_V5_07.jpg" class="attachment-full wp-post-image" alt="LANDING-PAGE_V5_07" /></a> <!-- <span id="services" data-content-pos="start"></span> -->
</div>
<h2>Services
</h2>
<div class="content-wrapper">
<div class="section-content">
<blockquote><p>We do not offer generic one-size-fits-all solutions; we understand that each individual has their own distinct temperament with specific goals, which may themselves change over time. We offer the following services:</p></blockquote>
</div>
<div class="section-tab sub-content">
<div class="items">
<!-- Tab layout -->
<nav role="menu">
<ul>
<li class="item col2 col current" role="menuitem">
<span data-icon="sq"></span>
<h3>Discretionary Management</h3>
</li>
<li class="item col2 col " role="menuitem">
<span data-icon="sq"></span>
<h3>Capital Protected Management</h3>
</li>
<li class="item col2 col " role="menuitem">
<span data-icon="sq"></span>
<h3>Corporate Finance</h3>
</li>
</ul>
</nav>
<div class="tab-content">
<div class="content-entry"><p> We engage in active daily trading. We trade only the most liquid instruments ensuring easy access into and exit from trades to capture fast market moves. We mostly carry short-term positions to ensure we are not caught in rapid adverse market moves. VSAM is unique in offering total transparency - our investors see every trade we have executed for their account. Employing some of the best traders in the industry, we deliver superior returns, targeting 1-2% per month net to investors, with the target often exceeded. </p></div>
<div class="content-entry"><p> For investors who prefer a more conservative, risk-averse approach, we have developed a range of alternatives designed to weather a market downturn. (1) Structured products conservatively tilted through a low volatility, higher yielding investment. (2) Principal protected structured deposit with the capital protected by an instrument issued by a top-rated provider coupled with partial complementary allocation to an actively managed sub-portfolio ensuring enhanced return on capital.</p></div>
<div class="content-entry"><p> We arrange financing for companies using different types of collateral acting as an exclusive advisor to one of the biggest investment funds in the world. We assist companies in securing lending facilities. We advise on capital investment decisions and help to structure corporate bonds.</p></div>
</div>
</div>
</div>
<!-- <nav class="sect-nav"> -->
<a class="prev browse left backward"><span ></span><object width="13" height="15" id="object" type="image/svg+xml" data="/wp-content/themes/vsam/assets/img/arw.svg" ></object></a>
<a class="next browse right forward"><span></span><object width="13" height="15" id="object" type="image/svg+xml" data="/wp-content/themes/vsam/assets/img/arw.svg"></object></a>
<!-- </nav> -->
</div>
</div>
</section>
<!-- End Section -->
<!-- Start Section: -->
<section class="full contact contact-section" id="contact">
<div class="section-wrapper">
<div class="featured-img">
<a href="http://dev.vsam.co.uk/contact" title="Contact"><img width="1031" height="646" src="http://dev.vsam.co.uk/media/2013/01/Contact_image.jpg" class="attachment-full wp-post-image" alt="Contact_image" /></a> <!-- <span id="contact" data-content-pos="start"></span> -->
</div>
<h2>Contact
</h2>
<div class="content-wrapper">
<div class="section-content">
<blockquote><p>VEGA SWISS ASSET<br />
MANAGMENT UK LLP</p></blockquote>
</div>
<div class="sub-content">
<div class="items">
<!-- 1-4 -->
<div class="grid-1 panel-list">
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p>80 Park Lane<br>
Mayfair<br>
London, W1K 7TR
United Kingdom</p></div>
</div>
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p>Tel: +44 (0) 203 44 028 50<br>
Fax: +44 (0) 203 44 027 01<br>
Email: info@vsam.co.uk</p></div>
</div>
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p>We understand that each individual has their own distinct temperament with specific goals, which may themselves change over time. </p></div>
</div>
<div class="panel item col2 col">
<span data-icon="sq"></span>
<div class="content-entry"><p> For personal service and advice please contact us:</p></div>
</div>
</div>
</div>
</div>
<div class="contact-form widget_text"> <div class="textwidget"><div class="wpcf7" id="wpcf7-f182-w1-o1"><form action="/#wpcf7-f182-w1-o1" method="post" class="wpcf7-form">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="182" />
<input type="hidden" name="_wpcf7_version" value="3.3.2" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f182-w1-o1" />
<input type="hidden" name="_wpnonce" value="1d5e31a6cc" />
</div>
<div class="col6">
<p>
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" class="wpcf7-form-control wpcf7-textarea" cols="40" rows="10" placeholder="Type your message here_ "></textarea></span> </p>
</div>
<div class="col col2">
<p>
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" placeholder="Name_ " /></span> </p>
<p>
<span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" placeholder="Email_ " /></span> </p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
</div>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div></div>
</div> </div>
</div>
</section>
<!-- End Section -->
</div>
</div> <!-- Close main container -->
<div class="footer-container">
<nav class="footer-nav">
<ul class="grid-1">
<li class="col col1"><a href="/disclaimer" class="top">Disclaimer</a></li>
<li class="col6 description">Vega Swiss Asset Management UK LLP is authorised and regulated by the Financial Services Authority </li>
<!--<li class="col1">
<object width="20" height="18" data="/wp-content/themes/vsam/assets/img/fsa.svg" type="image/svg+xml" id="object"> FSA
</object>
</li>-->
</ul>
</nav>
</div>
</div> <!-- END WRAPPER -->
<script> //window.jQuery || document.write('<script src="assets/js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="/vsam/assets/js/script.js"></script>
<script type="text/javascript">
/*$(document).ready(function() {
$('.top').addClass('hidden');
$.waypoints.settings.scrollThrottle = 30;
$('#wrapper').waypoint(function(event, direction) {
$('.top').toggleClass('hidden', direction === "up");
}, {
offset: '-100%'
}).find('#main-nav-holder').waypoint(function(event, direction) {
$(this).parent().toggleClass('sticky', direction === "down");
event.stopPropagation();
});
});*/
</script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
@import "compass"
/** Theme Name: VSAM
* * Theme URI: http://www.jagopartners.com
* * Description: VSAM.
* * Version: 1.0
* * Date: Dec 2012
*
* * Author: Shavin Fonseka / JagoPartners
* * Author URI: http://shavindra.wordpress.com/
* * Contact: shvindra2001 [at] yahoo.co.uk
* * Twitter: twitter.com/shavindra
* * linkedIn: linkd.in/shavin
*
* * Design Agency: JagoPartners
* * Site: jagopartners.com
* * Contact: hello@jagopartners.com
*
* * License: Reproduction or Distribution is prohibited.
* * General comments (optional).
**
/*
* ===== Table of Content ======================================
*
* 1. Typogrpahy
* 2. Content
* 4. Forms
* 5. Generic
* 6. Mobile
* 6.1 asdasd
* 6.2
/* 1. TYPOGRAPHY
*
* Embed Ref: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
*
* ============================================================== */
@font-face
font-family: 'EuclidBPtestFontBold'
src: url('assets/fonts/euclid_bptestfont_bold.eot')
src: url('assets/fonts/euclid_bptestfont_bold.eot') format("embedded-opentype"), url('assets/fonts/euclid_bptestfont_bold.woff') format("woff"), url('assets/fonts/euclid_bptestfont_bold.ttf') format("truetype"), url('assets/fonts/euclid_bptestfont_bold.svg#EuclidBPtestFontBold') format("svg")
@font-face
font-family: 'MyFontFamily'
src: url('myfont.eot?#iefix') format("embedded-opentype"), url('myfont.woff') format("woff"), url('myfont.ttf') format("truetype"), url('myfont.svg#svgFontName') format("svg")
$bodyFonts : Helvetica, Helvetica Neue, Arial, sans-serif
$bodyFont-size : 1.3em / 1.4em
$primaryColor : #A40234
body
font: 62.5% / 100% $bodyFonts
.main-nav, .footer-nav
font-size: 1.3em
p
font: $bodyFont-size $bodyFonts
color: $primaryColor
margin: 0 0 3em 0
.home-page p
margin: 0
ul, ol
margin: 18px 0 0 36px
nav ul
margin: 0
#page.content ul, article ul
font: $bodyFont-size $bodyFonts
color: $primaryColor
list-style: disc outside none
#page.content ol
font: $bodyFont-size $bodyFonts
color: $primaryColor
list-style: decimal outside none
h1, header h2
font: 4.9em / 1em "EuclidBPtestFontBold", Helvetica, Helvetica Neue, Arial, sans-serif
line-height: 0.925em
color: #FFFFFF
max-width: 300px
padding: 0
.content h1
max-width: 100%
margin: 0 0 18px 0
.home-page h2
border: none
h2
font: 1.3em / 1em Helvetica, Helvetica Neue, Arial, sans-serif
color: #A40234
padding: 20px 0
border-bottom: 1px solid #A40234
article
h1
font: $bodyFont-size $bodyFonts
color: $primaryColor
padding: 20px 0
border-bottom: 1px solid $primaryColor
h2
font-weight: bold
border: none
&:after
content: '\2013'
display: block
margin: 5px 0 0 0
h3
font: 2.6em / 1.3em Helvetica, Helvetica Neue, Arial, sans-serif
color: #a40234
blockquote p, .team .section-content p
font: 4.8em / 1.2em "EuclidBPtestFontBold", Helvetica, Helvetica Neue, Arial, sans-serif
padding: 30px 0 10px 0
letter-spacing: -0.5px
.section-content p .title
font-size: 0.68em
strong
font-weight: bold
article a, #page.content a
font-weight: bold
text-decoration: underline
color: #A40234
/* 2. CONTENT
*
* Embed Ref: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
*
* ==============================================================
/* ===== General =================================== */
body
height: 100%
/* ===== Header =================================== */
.header-container
bottom: 0
color: #FFF
header
height: 100%
section!
h1 a, h2 a, h3 a
color: #FFFFFF
text-decoration: none
/* branding */
.branding
z-index: 1
padding: 36px 18px
border-top: 18px solid rgba(255, 255, 255, 0.7)
overflow: auto
font: 1.6em / 1.125em $bodyFonts
height: 100%
.header-widget
h1
line-height: 0.6em
padding: 10px 0 8px 0
display: block
float: left
padding: 0
span
padding: 10px 0 8px 0
display: block
letter-spacing: 0.5px
.clocks
float: right
float: right
text-align: center
color: #FFF
> div
float: right
margin: 0 0 0 18px
canvas
display: block
padding: 10px 0 20px 0
span
font-size: 0.5em
line-height: 1em
display: block
padding: 0 0 8px 0
letter-spacing: 1px
/* Scroller */
.scroller
position: absolute
top: 0
min-width: 1110px
width: 100%
z-index: -1
.head-scroller img
width: 100%
height: auto
.scrollitem
height: 100%
width: 100%
.img
text-align: center
.main-nav
.active a, .current-menu-item a
text-decoration: underline
/* test */
html, body, #wrapper, .header-container, .scroller
height: 100%
.img
img
height: 100%
max-height: 100%
display: block
position: absolute
height: 100%
#main-nav-holder
min-width: 1110px
width: 100%
position: absolute
bottom: 0
z-index: 2
.sticky #main-nav-holder
position: fixed
top: 0
bottom: auto
/* ===== Navigation =================================== */
.main-nav, .footer-nav
background: #A40234
min-height: 20px
width: 100%
.main-nav ul, .footer-nav ul
padding: 20px
min-height: 10px
margin: 0 auto
width: auto
max-width: 990px
.main-nav .grid-1, .footer-nav .grid-1
width: 1012px
.main-nav li, .footer-nav li
float: left
display: block
text-align: center
.main-nav li.col1, .footer-nav li.col1
width: 124px
border-left: #FFF solid 1px
.main-nav li:nth-last-child(2)
border-right: #FFF solid 1px
li.logo
float: right
width: 239px
.logo span
position: absolute
width: 66.5px
height: 18px
.main-nav
#logo a
text-align: right
padding: 0
a
display: block
color: #FFF
text-decoration: none
padding: 5px 0
.description, .footer-nav a
display: block
color: #FFF
text-decoration: none
padding: 5px 0
/* ===== Content ================================== */
.home-page #main
background: #F4F4F4
border: none
#main > section
position: relative
.header-container:after, .main-container:after, .footer-container:after, .content-wrapper > div:after, .items:after
clear: both
content: "."
display: block
font-size: 0
height: 0
visibility: hidden
.header-container, .main-container, .footer-container, #main > section, #wrapper, .header-container header
min-width: 1110px
width: 100%
.content-wrapper > div:not(.section-slide).sub-content, .content > section:only-child, .home-page .section-wrapper > h2, .content-wrapper > *, .home-page .section-slide .panel-list, .page-slider .page-slide
padding: 20px
/* Sections */
.main-container > section
min-height: 300px
.home-page .content > section:last-of-type
padding: 0
.content >
section
&:only-of-type, &:last-of-type
padding: 0 0 80px 0
article:only-of-type
padding: 0 0 80px 0
.home-page .section-wrapper
min-width: 1030px
margin: auto
padding: 0
.section-wrapper > *
width: auto
.home-page .section-wrapper > h2, .content-wrapper > *
padding: 20px
.home-page .content-wrapper
overflow: auto
background: #FFF
padding: 0 0 80px 0
.section-content
overflow: auto
.page-slide
padding: 20px
float: left
> *
padding: 20px 0
[data-content-pos="start"]
height: 56px
padding: 38px !important
bottom: 0
position: absolute
[data-icon="sq"]
width: 8px
height: 8px
background: #A40234
display: block
margin-top: -9px
position: absolute
.content-entry
padding: 20px 0 0 0
margin: 0 108px
.item .content-entry, .tab-content .content-entry
margin: 0
aside
float: right
width: 234px
min-height: 200px
img
width: 234px
height: auto
/* 4 Column Sliders
.investor
background: #A40234
.featured-img, .item
position: relative
.home-page
.item
border-top: 2px solid #A40234
.section-slide .panel-list
padding: 20px
/* Slider */
.page-slide
padding: 20px
.section-slide
/* required settings */
position: relative
overflow: hidden
min-height: 274px
padding: 0
.page-slider
/* required settings */
position: relative
overflow: hidden
min-height: 274px
padding: 0
min-height: 525px
.sect-nav
display: block
height: 30px
width: 300px
z-index: 20
position: absolute
bottom: 0
left: 0
.browse
z-index: 2
background: #A40234
position: absolute
display: block
height: 15px
width: 13px
float: left
bottom: 250px
cursor: pointer
padding: 12.5px 13.5px
.services .browse
bottom: 330px
.disabled
opacity: 0.5
.media-centre-page .browse
top: 160px
.browse span
position: absolute
width: 13px
height: 15px
.left
left: 0
transform: rotate(180deg)
-ms-transform: rotate(180deg)
.right
right: 0
.panel-list
float: left
padding: 20px 0
overflow: auto
.section-slide > .items, .page-slider > .items
width: 20000em
position: absolute
.section-tab
.item
border-top: 2px solid #CCC
h3
color: #CCC
.item.current-i
border-top: 2px solid #A40234
.tab-content
min-height: 150px
.section-tab
.current-i
h3
color: #A40234
[data-icon="sq"]
background: #A40234
[data-icon="sq"]
background: #CCCCCC
*[role~=menu] li
cursor: pointer
/* Articles */
.items article
background: #A40234
text-align: center
min-height: 234px
color: #FFF
position: relative
font-size: 1.6em
h3
color: #FFF
padding: 25px 0 0 0
font-size: 1em
article
.view
font-size: 0.625em
time
margin: 5px 0 0 0
div:not(.home-page) .header-container
padding: 35px 0 70px 0
background: #A40234
margin: 57px 0 0 0
height: auto
.section-wrapper, .content > article
width: 990px
padding: 0 20px
margin: auto
.docs-section .view
background: #E7E7E7
.item:hover .view
display: block
.video-section
.section-slide
height: 360px
.browse
top: 50%
.view
display: none
height: 234px
position: absolute
text-align: center
top: 0
width: 234px
background: rgba(255, 255, 255, 0.5)
span
position: relative
top: 50%
margin: -33px auto
width: 23px
padding: 25px 20px
height: auto
background: #A40234
color: #FFF
display: block
date
display: block
padding: 20px 0
font-size: 0.8125em
.items article img
padding: 10px 0
a[rel~="lightbox[images]"]
width: 234px
height: 234px
display: block
img
width: 234px
height: 234px
display: block
#lightboxOverlay
position: absolute
top: 0
left: 0
z-index: 9999
background: #FFF
background: rgba(255, 255, 255, 0.95)
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95)
/*opacity: 0.85; */
display: none
#lightbox
position: absolute
left: 0
width: 100%
z-index: 10000
text-align: center
line-height: 0
font-family: "lucida grande", tahoma, verdana, arial, sans-serif
font-weight: normal
img
width: auto
height: auto
a img
border: none
.lb-outerContainer
position: relative
background-color: white
*zoom: 1
width: 250px
height: 250px
margin: 0 auto
-webkit-border-radius: 4px
-moz-border-radius: 4px
-ms-border-radius: 4px
-o-border-radius: 4px
border-radius: 4px
&:after
content: ""
display: table
clear: both
.lb-container
padding: 10px
.lb-loader
position: absolute
top: 40%
left: 0%
height: 25%
width: 100%
text-align: center
line-height: 0
.lb-nav
position: absolute
top: 50%
left: 0
height: 30px
width: 100%
z-index: 10
.browse
bottom: 0
.lb-container > .nav
left: 0
.lb-nav a
outline: none
.lb-dataContainer
margin: 0 auto
padding-top: 5px
*zoom: 1
width: 100%
-moz-border-radius-bottomleft: 4px
-webkit-border-bottom-left-radius: 4px
-ms-border-bottom-left-radius: 4px
-o-border-bottom-left-radius: 4px
border-bottom-left-radius: 4px
-moz-border-radius-bottomright: 4px
-webkit-border-bottom-right-radius: 4px
-ms-border-bottom-right-radius: 4px
-o-border-bottom-right-radius: 4px
border-bottom-right-radius: 4px
&:after
content: ""
display: table
clear: both
.lb-data
padding: 0 10px
color: #bbbbbb
.lb-details
width: 85%
float: left
text-align: left
line-height: 1.1em
.lb-caption
font-size: 13px
font-weight: bold
line-height: 1em
.lb-number
display: block
clear: left
padding-bottom: 1em
font-size: 11px
.lb-close
width: 35px
float: right
padding-bottom: 0.7em
outline: none
&:hover
cursor: pointer
.lb-video
display: none
background: rgba(255, 255, 255, 0.95)
position: fixed
top: 0
z-index: 9999
width: 100%
height: 100%
.vid-container
width: 486px
height: 320px
background: #000
display: none
position: fixed
top: 50%
margin: -160px 0 0 -242px
left: 50%
z-index: 9999
.OoyalaVideoPlayer
display: block
width: 486px
height: 320px
background: #000
position: fixed
top: 50%
margin: -160px 0 0 -242px
left: 50%
z-index: 99999
.vid-container > *
width: 486px
height: 320px
.lb-on
overflow: hidden
/* ===== Forms ==================================== */
/* Contact form */
form
div ~ div
float: left
input
width: 194px
padding: 20px
border: 0
margin: 0
color: #FFFFFF
background: #A40234
font: 1em Helvetica, Helvetica Neue, Arial, sans-serif
textarea
color: #FFFFFF
background: #A40234
padding: 20px
border: 0
margin: 0
min-width: 698px
max-width: 698px
height: 132px
overflow: auto
font: 1em Helvetica, Helvetica Neue, Arial, sans-serif
\::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder
color: #FFFFFF
opacity: 1
.wpcf7-response-output
display: block
width: 698px
font: 1.3em Helvetica, Helvetica Neue, Arial, sans-serif
border: none !important
.wpcf7-validation-errors
color: #A40234
margin-top: -16px
.div.wpcf7-response-output!
input:focus
color: #FFF
form .col2 p
margin-bottom: 1px
input[type~=submit]
width: 234px
text-align: left
background: #a40234 url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjU1LjczNHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9Ii0yMC4xMTcgLTIzLjQ1NyA1NS43MzQgNjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIwLjExNyAtMjMuNDU3IDU1LjczNCA2MCINCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8Zz4NCgkJPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9Ii0wLjExNyIgeTE9IjYuNTQyIiB4Mj0iMTMuODgzIiB5Mj0iNi41NDIiLz4NCgkJPGc+DQoJCQk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjguNTgxLDEzLjA4NiA3LjQ5LDExLjkxNCAxMy4yNjksNi41NDMgNy40OSwxLjE3MiA4LjU4MSwwIDE1LjYxNyw2LjU0MyAJCQkiLz4NCgkJPC9nPg0KCTwvZz4NCjwvZz4NCjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEiIHgxPSItMTkuNjEyIiB5MT0iLTIzLjQ1OCIgeDI9Ii0xOS42MTIiIHkyPSIzNi41NDIiLz4NCjwvc3ZnPg0K") no-repeat right center
/* Unencoded
-x-background-image: url("data:image/svg+xml,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='55.734px' height='60px' viewBox='-20.117 -23.457 55.734 60' enable-background='new -20.117 -23.457 55.734 60' xml:space='preserve'><g><g><line fill='none' stroke='#FFFFFF' stroke-width='2' stroke-miterlimit='10' x1='-0.117' y1='6.542' x2='13.883' y2='6.542'/><g><polygon fill='#FFFFFF' points='8.581,13.086 7.49,11.914 13.269,6.543 7.49,1.172 8.581,0 15.617,6.543 '/></g></g></g><line fill='none' stroke='#FFFFFF' stroke-miterlimit='1' x1='-19.612' y1='-23.458' x2='-19.612' y2='36.542'/></svg>")
/* ===== Footer =================================== */
.footer-container
background: #A40234
color: #FFF
.footer-nav
.description
display: block
color: #FFF
text-decoration: none
padding: 5px 0 5px 35px
text-align: left
width: 705px
border-left: 1px solid #FFFFFF
li:last-child
text-align: right
border: none
article footer p
margin: 0
/* 2. Mobile
*
*
* ============================================================== */
/* ===== Images =================================== */
.mobile
.featured-img img
width: 100%
height: auto
.sticky #main-nav-holder
postion: static
/* ===== Navigation =============================== */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment