/* Viva Energy Australia - IR Base Styles
Blue: #01a7e1
Dark Blue: #021C2D
orange: #F47735
Light Grey: #DDDDDD

–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Base
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url('/FormBuilder/_Resource/_module/plugin/base.css');
@import url('/FormBuilder/_Resource/_module/plugin/font-awesome.min.css');


html { /*sticky foot*/position: relative; min-height: 100%; /*End Sticky foot*/ font-size: 100%; } 
body { /* Margin bottom by footer height */ margin-bottom: 200px;  /*End Sticky foot*/ font: 75% Arial,sans-serif,"Helvetica Neue",Helvetica; color: #666; }

/* Bootstrap Overwrites
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container{ position: relative; max-width: 1048px; margin-right: auto; margin-left: auto; }
@media (min-width:768px){.container{ width: 750px }}
@media (min-width:992px){.container{ width: 970px }}
@media (min-width:1200px){.container{ width: 1170px }}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 { font: normal 250% arial, verdana,sans-serif; color: #00a7e1; padding: 0; margin: 0 0 20px 0; }
h2 { font: normal 160% arial, verdana,sans-serif; color: #666; padding: 0; margin: 0 0 20px 0; }
h3 { font: normal 130% arial, verdana,sans-serif; color: #666; padding: 0; margin: 0 0 20px 0; }
h4 { font: bold 120% arial, verdana,sans-serif; color: #666; padding: 0; margin: 0 0 20px 0; }
h5 {  }
h6 { margin: 0 }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a { color: #01a7e1; outline: none; text-decoration: underline; }
a:hover { color: #01a7e1; }
a span { display: none; }


/* Primary Header - branding
--------------------------------------------------------*/
#header { position: relative; height: 134px; }
#header .container { padding-left: 0; padding-right: 0; }

#mobileMenuBtn {display: none; position: absolute; cursor: pointer; right: 4%; top: 20px; }
#mobileMenuBtn span { display: none;}
#mobileMenuBtn:after { content: "\f0c9";  position:absolute; font-family: 'FontAwesome'; top:0px; right:0px; font-size: 30px; color: #01a7e1; }
#mobileMenuBtn.selected:after { content: "\f00d";  position:absolute; font-family: 'FontAwesome'; top:0px; right:0px; font-size: 30px; color: #01a7e1; }

.branding { padding: 40px 0 0; }
.branding .logo-row { }
#logo { display: table-cell; padding:0 40px 0 0; border-right: 1px solid #01a7e1; }
#logo + h1 { display: table-cell; padding: 0 0 0 40px; vertical-align: middle; }
.sub-logo { padding: 5px 0; text-align: right; }

/* Primary Header - Main Navigation
--------------------------------------------------------*/
#header .header-nav { list-style: none; margin: 0; padding: 15px 0 0; }
#header .header-nav li {  }
#header .header-nav li a { color: #333; text-decoration: none; font-size: 120%; }
#header .header-nav li a:hover { color: #01a7e1; }
#header .header-nav li a .fa { padding-left: 10px; transition: .5s ease all; }
#header .header-nav li a:hover .fa { padding-left: 20px; margin-right: -10px; }

.navigation { margin: 10px 0 0; background: #01a7e1; min-height: 2px; }
.nav, .nav ul { margin: 0; padding: 0; }
.nav .main-nav { width: 100%; display: table; }
.nav > ul > li { list-style: none; margin: 0; padding: 0; cursor: pointer; display: table-cell; *display: inline; zoom: 1; }
.nav ul li a { color: #FFFFFF; text-decoration: none; padding: 0 20px; z-index: 999; display: block; cursor: pointer; border: 1px solid transparent; font-size: 120%; }
.nav > ul > li > a { line-height: 48px; }
.nav li a .fa { display: none; }
.nav ul li a:hover, .nav ul li a:focus { background: #fff; color: #053067; border: 1px solid #ccc; }
.nav ul li a.selected { background: #fff; color: #01a7e1; border: 1px solid #00a7e1; }
/*.nav ul li.parent-nav:before { height: 10px; display: inline; content: ''; border-right: 1px dotted #01a7e1; margin-left: -4px }
.nav ul li.menu-first:before { border-right: 0px; }*/


/* sub menu level */
.nav ul ul { display: none; position: absolute; top: 100%; left: auto; min-width: 200px; margin: -1px 0 0 0; background: #fff; border: 1px solid #ccc; text-align:left; padding: 0px; z-index: 99; }
.nav ul li:hover ul { display: block;  }
.nav ul ul li { position: relative; display: block; }
.nav ul ul li a { padding: 15px 20px; color: #053067; border: none!important; }
.nav ul ul li a:hover, .nav ul ul > li:hover > a { background: #01a7e1; color: #FFFFFF; }

/* sub sub menu level */
.nav ul ul ul { display: none !important; position: absolute; top: 0; left: 100%; min-width: 200px; background: #fff; border-top: 1px solid #ccc; text-align:left; padding: 0px; z-index: 99; }
.nav ul ul li:hover ul { display: block !important; }
.nav ul ul ul li {  }
.nav ul ul ul li a { color: #00a7e1; }
.nav ul ul ul li a:hover {  }


/* side nav */
.left-col { margin: 0;}
.side-nav { margin: 0; padding: 0;}
.side-nav li{ list-style: none; padding: 3px 0; margin: 0; }
.side-nav li a { display: block; padding: 5px; color: #252d59;}
.side-nav li a:hover { color: #021C2D; } 
.side-nav li a.active { color: #021C2D; font-weight: 700 }
.top-menu > a { position: relative; }
  .top-menu > a:after { content: "\f0da";  position:absolute; font-family: 'FontAwesome'; top:5px; right:5px; font-size: 14px; color: #021C2D }
.top-menu.active > a { color: #021C2D; }
  .top-menu.active > a:after { content: "\f0d7";  position:absolute; font-family: 'FontAwesome'; top:5px; right:5px; font-size: 14px; color: #021C2D }

.sub-menu {display: none; margin: 0; padding: 0;}
.sub-menu li { border-top: 1px solid #D5D5D5; background-color: #f7f7f7; }
.sub-menu li a { color: #2c2c2c; }

.tools_icon { position: absolute; top: 25px; right: 0; }
body.home .tools_icon { display: none; }
body.ifs.home .tools_icon { display: block; }
.tools_icon ul { margin: 0 0 0 20px!important; padding: 0; }
.tools_icon ul li { display:inline-block; margin-right: 10px; }
.tools_icon ul li a { border: none!important; }
.tools_icon ul li a:hover { text-decoration: none; }
.tools_icon .fa { display: block; font-size: 20px; background: #021C2D; padding: 5px; color: #FFF; border-radius: 100%; transition: .5s ease all; }
.tools_icon .fa:hover { background: #fff; color: #021C2D; }


/* Top Banner
--------------------------------------------------------*/
#top-banner { height: 290px; margin: -35px 0 10px; border: none; overflow: hidden; }
#top-banner ul { height: 100%; list-style: none; margin: 0; padding: 0; }
#top-banner ul li { position: relative; width: 100%; height: 100%; display: none; opacity: 0; }
#top-banner ul li img { position: absolute; top: 0; left: 0; }
#top-banner .banner-content { position: absolute; top: 10px; left: -350px; width: 340px; padding: 20px; background: rgba(255,255,255,.8); }
#top-banner .banner-content h3 { font-size: 225%; font-weight: bold; color: #002f5d; margin: 0 0 10px; }
#top-banner .flex-viewport { height: 100%; }
#top-banner .flex-control-nav { right: 0; bottom: 0; z-index: 99; width: auto; padding: 10px; border-radius: 5px 5px 0 0; }
#top-banner:hover .flex-control-nav { display: block; }
#top-banner .flex-control-paging li a { background: #fff; box-shadow: 0 0 5px rgba(0,0,0,.8); }
#top-banner .flex-control-paging li a.flex-active { background: #01a7e1; }


/* Primary Page content
--------------------------------------------------------*/
.page-content { padding: 35px 0 0; font-size: 125%; }
.page-content p, .page-content ul, .page-content li { line-height: 150%; }
.page-content p { margin: 0 0 20px; padding: 0; }
.page-content a { text-decoration: none; }
.page-content a:hover { text-decoration: underline; }

.page-content .announcement-container, .page-content #priceModule_SharePriceModule3, .page-content .prospectus_widget { position: relative; width: 32.6666666%; min-height: 300px; padding: 20px; float: left; background: #f5f5f5; border-bottom: solid 3px #01a7e1; color: #000; }
.page-content #priceModule_SharePriceModule3 { margin: 0 1%; background: #01a7e1; color: #fff; }
.page-content .prospectus_widget { background: none; overflow: hidden; }
.page-content .prospectus_widget:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; content: " "; background:url(http://ir.miraqle.com/FormBuilder/_Resource/_module/M-H5x4xdQ0GchTEYwGOnjw/image/prospectus_bg.jpg); background-size: auto 100%; transition: .5s ease all; }
.page-content .prospectus_widget:hover:before { transform: scale(1.5); -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); /* IE 9 */ -ms-filter:  "progid:DXImageTransform.Microsoft.Matrix(M11=1.3, M12=0, M21=0, M22=1.3, SizingMethod='auto expand')"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.3, M12=0, M21=0, M22=1.3, SizingMethod='auto expand'); /* IE6 and 7 */ }
.page-content #priceModule_SharePriceModule3 th, .page-content #priceModule_SharePriceModule3 td { border-color: #01a7e1; }
.page-content .announcement-container h4, .page-content #priceModule_SharePriceModule3 h4, .page-content .prospectus_widget h4 { padding: 0 0 10px; margin: 0 0 20px; text-align: center; font: normal 125% Arial; color: inherit; border-bottom: 1px solid rgba(0,0,0,.1); }
.page-content .announcement-container a.btn, .page-content #priceModule_SharePriceModule3 a.btn, .page-content .prospectus_widget a.btn { position: absolute; left: 0; bottom: -3px; z-index: 3; width: 100%; padding: 10px; background: #01a7e1; color: #fff; text-decoration: none; transition: .5s ease all; }
.page-content .announcement-container a.btn:hover, .page-content #priceModule_SharePriceModule3 a.btn:hover, .page-content .prospectus_widget a.btn:hover { background: #021C2D; }
.page-content #priceModule_SharePriceModule3 a.btn { background: rgba(0,0,0,.1); }
.page-content .announcement-container a.btn:before, .page-content #priceModule_SharePriceModule3 a.btn:before, .page-content .prospectus_widget a.btn:before { position: absolute; top: 7px; right: 10px; display: block; font-family: 'FontAwesome'; font-size: 18px; content: '\f18e'; }
.page-content .announcement-container a.btn:hover:before, .page-content #priceModule_SharePriceModule3 a.btn:hover:before, .page-content .prospectus_widget a.btn:hover:before { content: '\f0a9'; }

.page-content .overview-container { padding: 20px 0 40px; }
.page-content .overview-container .intro-row .eight.columns { position: relative; padding-right: 4%; }
.page-content .overview-container .intro-row .eight.columns:after { position: absolute; top: 0; right: -11px; display: block; width: 5px; height: 100%; background: #eee; content: " "; }

.page-content .breadcrumbs { margin: 0 0 30px; font-size: 90%; }
.page-content .breadcrumbs a { display: inline-block; padding: 0 0 0 10px; }
.page-content .breadcrumbs a:after { display: inline-block; margin: 0 0 0 5px; font-family: "FontAwesome"; content: "\f105"; border-radius: 100%; transition: .5s ease-out all; }
body.home .page-content .breadcrumbs { display: none; }
body.ifs.home .page-content .breadcrumbs { display: block; }
body.ifs.home .page-content .breadcrumbs a:first-child { display: none; }


/* Footer
--------------------------------------------------------*/
.page-footer { /* stkicy foot */ position: absolute; bottom: 0; width: 100%; z-index: 5; /* End sticky foot*/ background: #00a7e1; }
.page-footer > .container { padding: 15px 0 5px 0; }
.page-footer p { margin: 10px 0; color: #FFFFFF; }
.page-footer a { text-decoration: none; }
.page-footer a:hover { text-decoration: underline; }

.page-footer > .container ul { margin-top: 30px; }
.page-footer > .container ul li { display: inline-block; margin: 0 0 10px; }
.page-footer > .container ul li a { display: block; padding: 0 3px 0 5px; color: #fff; border-left: 1px solid #fff; }
.page-footer > .container ul li:first-child a { border: none; }

.page-footer-bottom { padding: 15px; background: #021C2D; color: #fff; }
.page-footer-bottom .trade { margin: 0 0 15px; padding: 0 0 15px; border-bottom: 1px solid #01a7e1; }
.page-footer-bottom .trade .footer-links-toggle { cursor: pointer; }
.page-footer-bottom .trade .footer-links-toggle:after { padding: 0 10px; font-family:'FontAwesome'; content: '\f107'; }
.page-footer-bottom .trade .footer-links-toggle.active:after { content: '\f106'; }
.page-footer-bottom .trade .text-right { font-size: 80%; }

.page-footer-bottom .footer-links { display: none; }
.page-footer-bottom .footer-links ul { list-style: none; margin: 0; padding: 0; }
.page-footer-bottom .footer-links ul li { padding: 0 0 7px; }
.page-footer-bottom .footer-links > ul {  }
.page-footer-bottom .footer-links > ul > li { width: 20%; padding: 0; float: left; }
.page-footer-bottom .footer-links > ul > li > a { font-size: 120%; color: #fff; }
.page-footer-bottom .footer-links ul ul { margin: 10px 0 0; }


/* Investor Centre
--------------------------------------------------------*/
.step { position: relative; }

.widgets { }
.widgets h2 { margin: 0; padding: 10px 0; text-align:center; }
.widgets p { text-align:left}
.widgets p a { margin: 0;}

.overview-container .row{ vertical-align:top;}
.share-container, .prospectus-container { margin: 0px; padding: 0px; }

.widgets .announcementsTable { margin: 10px auto; border: 0; width: 100%;  }
.widgets .announcementsTable th {display: none;}
.widgets .announcementsTable td { padding: 5px 0}
.widgets .announcementsTable td a:hover { text-decoration:none; }
.widgets .noresults { padding: 0 10px;}

.widgets .share-box { padding: 10px; border: 1px solid #CCCCCC; }
.widgets .priceTable { width: 100%; margin: 5px 0; border: 0;}
.widgets .priceTable td { display: block; height: auto !important; text-align: center }
.widgets .priceTable td td { display: inline-block;}
.widgets .priceTable td .price { color:#01a7e1; font-size: 32px; padding: 00;  }
.widgets .price-icon { padding: 0px 5px 0 0px; }
.widgets .priceMove { padding: 8px 0px 0 0px; display: inline-block }
.widgets .price-date {text-align:center; padding:10px 0 0px 0; margin: 0;}
.widgets .price-date span {font-size:11px;}
.widgets .priceDetails { display: none; }

.priceTable .priceMove { display: inline-block; }

.widgets #priceModule_SharePriceModule3 { display: block !important;}

.widgets .btn-subscribe { position: relative; display:block; padding:20px 20px 20px 60px; width:auto; margin: 0; background: #01a7e1; border: 0; border-radius: 4px; color: #FFF; cursor: pointer; font-size: 0.9em; text-decoration: none;}
.widgets .btn-subscribe:before {  content: "\f003";  position:absolute; font-family: FontAwesome; top:40px; left:20px; font-size: 30px}


/***** Table *****/
table {width:100%; border-collapse:collapse; margin: 0 0 10px; back }
th, td { padding:10px; margin:0; vertical-align:top; text-align:left; border-bottom: 1px solid #cbc4bc;}
th { background: #021C2D; font-weight: bold; color: #FFFFFF; }
td a { display: block; position:relative; }


/***** Tabs *****/
#tab-group { clear:both; float: left; }
#tab-group ul { margin: 0; padding: 0;}
#tab-group ul li { display: inline-block;	*display: inline;	zoom: 1; padding: 0 0; margin: 0;}
#tab-group ul li a.tab-button {  background: none; display: block; font-size: 16px; padding: 8px 10px; text-align: center; text-decoration: none;}
#tab-group ul li a.tab-button:hover { background: #01a7e1; color: #FFF}
#tab-group ul li a.tab-button.current { background: #01a7e1; color: #FFF} 


/***** Fact Sheet *****/
.factsheet tr:nth-child(odd) td { background-color: #eee; }


/***** ASX Announcements *****/
.announcements-filter { float:right; text-align: right; margin: 0 0 30px;}
.announcements-filter label { width: 20%; display: inline-block; *display: inline; zoom: 1; padding-right: 20px; font-weight: bold;}
.announcements-filter input#KeywordSearch { width: 50%; padding: 9px; border: 1px solid #B2B1B1; vertical-align: top;  }
.announcements-filter .filterButton { background-color: #01a7e1; color: #FFF; vertical-align: top; display: inline-block; height: auto; width: auto; padding: 10px 20px; bordeR: 0; }

.ASXAnnouncementsContainer { clear: both; }

.announcementsTable { margin: 0; width: 100%; border-spacing: 1px; border-collapse: separate; }
.announcementsTable th { padding: 10px; font-weight: bold; color: #fff; text-align:left; background-color: #01a7e1; margin-bottom: 10px; padding-bottom: 10px; background-size: 5px;}
.announcementsTable td {padding:10px; margin:0; vertical-align:middle; margin-bottom: 10px; padding-bottom: 10px; background-size: 5px;}
.announcementsTable tr:nth-child(odd) td { background-color: #eee; }
.announcementsTable th, .announcementsTable td { border: none; }
.announcementsTable td a { text-decoration: none; }
.announcementsTable td a:hover { text-decoration:none; color: #01a7e1}

.announcementsTable th.announcementDateHeader, .announcementsTable td.announcementDate { text-align: right; }

.announcementsTable .downloadLinkHeader, .announcementsTable .downloadLink,
.announcementsTable .priceSensitiveHeader, .announcementsTable .priceSensitive,
.announcementsTable .securityCodeHeader, .announcementsTable .securityCode { display: none;}

.announcement-container .announcementsTable { margin: -15px -20px 0; width: auto; }
.announcement-container .announcementsTable th { background-color: inherit; color: #000; }
.announcement-container .announcementsTable tr:nth-child(odd) td { background-color: inherit; }

#loadingSpinner { background: #ffffff url(/FormBuilder/_Resource/_module/5H6fE0r_N0iAfhxjV6Qu2Q/img/loadingSpinner.gif) 0 0 no-repeat; margin: 50px auto; overflow: hidden; width: 22px; height: 22px; text-indent:-100000em}

/***** Media Release *****/
.media-row {  padding-bottom:2em; margin-bottom: 3em; }
.media-row h3 { margin-bottom: 5px; font-size: 20px; font-weight: 700;}
.media-row h5 {font-size: 14px; font-weight: 300; margin-bottom: 10px;}

/***** Table *****/
table.tableStyle {width:100%; border-spacing: 1px; border-collapse:separate; }
.tableStyle th, .tableStyle td { padding:10px; margin:0; vertical-align:top; text-align:left; margin-bottom: 10px; padding-bottom: 10px; background-size: 5px;}
.tableStyle th { font-weight: bold; color: #000000; }
.tableStyle a { display: block; position:relative; font-weight: 700; color: #666666 }
.tableStyle td a:hover { text-decoration:none; color: #01a7e1 }
	.tableStyle a[data-icon="pdf"], .tableStyle a[data-icon="audio"] { padding: 0; text-align:left; font-weight: 400; color: #01a7e1 }
	.tableStyle a[data-icon="pdf"]:before { content: "\f1c1";  position:relative; font-family: FontAwesome; top:0; left:0px; font-size: 21px } /* for PDF icons */
	.tableStyle a[data-icon="audio"]:before { content: "\f028";  position:relative; font-family: FontAwesome; top:0; left:0px; font-size: 21px } /* for video icons */

/***** Calendar *****/
.events tr:nth-child(odd) td { background-color: #eee; }

/***** Presentations *****/
.presentations .tableStyle a[data-icon="pdf"],
.presentations .tableStyle a[data-icon="audio"] { text-align:center; }

/***** Reports ******/
.reports-row { position: relative;  padding-bottom:2em; margin-bottom: 3em; border-bottom:1px solid #D5D5D5}
.reports-row h3 { font-size: 20px; font-weight: 700;}
.reports-row a[data-icon="pdf"] {padding: 5px 5px 5px 30px; position:relative; text-decoration: none;}
	.reports-row a[data-icon="pdf"]:before { content: "\f1c1";  position:absolute; font-family: FontAwesome; top:0; left:0px; font-size: 21px } /* for PDF icons */

/***** Share Price *****/
table.priceTable, table.priceDetails { width: 50%; margin: 0 auto;}
table.priceTable td { height: auto !important;}
table.priceTable td td { padding: 5px 10px;}
table.priceTable td .price { font-size: 30px; }
table.priceTable .priceDetailsLabel { text-align: right;}

table.priceTable {  }
table.priceDetails { background: rgba(0,0,0,.1); }

.price-date { display: block; text-align: center; padding: 20px 0 0; }
.price-date span { font-size: 11px; }

.price-icon { position: relative; display: inline-block}
.price-icon-down:before { content: "\f0d7"; font-family: FontAwesome; font-size: 20px; top:0px; left:0px; color:#F30 }
.price-icon-up:before { content: "\f0d8"; font-family: FontAwesome; font-size: 20px; top:0px; left:0px; color: #0C0 }

#custom-price-table { width: 100%; margin: 15px 0; background: #eee; }
#custom-price-table th, #custom-price-table td { text-align:center; border-bottom: none; background: none; }
#custom-price-table th { padding:10px 5px; background: #01a7e1; color: #fff; }
#custom-price-table td {padding:15px 5px;font-size:14px; vertical-align:middle}
#custom-price-table #fill_last { font-size: 22px; font-weight: bold; }
/*#priceModule_SharePriceModule3 {display:none;}*/

#priceModule_SharePriceModule2 { display: none; }
#chartContainer_PriceVolumeChart2, #chartContainer_PriceVolumeChart2 .highcharts-container { width: 100%!important; }
/*.fin-tear-sheet #chartContainer_PriceVolumeChart2 { height: auto!important; }*/
#errorContainer_PriceVolumeChart1 { display: none;}

/*** Share Price History ***/
.priceHistoryContainer { width: 100%; }
.priceHistoryTableDiv { clear: both; }
.priceHistoryTable { margin: 10px -1px; padding-top: 10px; width: 100%; border-spacing: 1px; border-collapse: separate; }
.priceHistoryTable th { font-weight: normal; padding: 10px; background: #01a7e1; color: #fff; border-bottom: none; text-align:left }
.priceHistoryTable td { padding: 10px; margin: 0; vertical-align: middle; }
.priceHistoryTable tr:nth-child(even) { background: #f7f7f7}

/*** Investor Calculator ***/
.calc-table-filter .calc-table-filter-row { padding: 10px; background: #00a7e1; color: #fff; margin:10px 0 }
.calc-table-filter .calc-table-filter-row .horizontal { margin: 10px 0; width:100%; }
.calc-table-filter .calc-table-filter-row .text { font-size: 18px; font-weight: bold; }
.calc-table-filter .calc-table-filter-row .horizontal li { display: inline-block; list-style: none; margin-right: 10px; }
.calc-table-filter .calc-table-filter-row li label { display: inline-block; vertical-align: middle; position: relative; width: 25%; padding: 0 5px; font-weight: bold; }
.calc-table-filter .calc-table-filter-row input { vertical-align: middle; margin: 0; }
.calc-table-filter .calc-table-filter-row input[type="text"] { width: 50%; padding: 5px; border: 1px solid #B2B1B1; color: #000; }

.calc-table-row { margin: 0; clear: both; position: relative; padding: 5px 0; }
.calc-table-row:nth-child(even) { background: #f7f7f7}
.calc-table-row label { padding: 0 10px; font-weight: bold; width: 60%; display: inline-block; *display: inline; zoom: 1; line-height: 2em;; vertical-align: top }
.calc-table-row span { width: 30%; text-align: right; display: inline-block; *display: inline; zoom: 1; line-height: 2em;; vertical-align: top}

.investmentCalcChart span { *float: left; /* IE6/7 */ }

/*** My Shareholding ***/
.content-container ul li { list-style:outside disc}

/***** Email Alerts *****/
.emailSubscription {margin: 20px 0}
.emailSubscriptionView .row { margin: 20px 0}
.emailSubscriptionView .row .label { display: inline-block; *display: inline; zoom: 1; width: 20%; vertical-align: top; color: #021C2D; font-weight: bold; }
.emailSubscriptionView .row .field { display: inline-block; *display: inline; zoom: 1; width: 60%;} 

a.btn, a.loadNext, input#submitSubscription { padding: 10px 15px; background: #021C2D; color: #fff; border: none; }

ul#subscriptions { margin: 0; padding: 0;}
ul#subscriptions li { list-style:none; margin: 0; padding: 0 0 10px;}
ul#subscriptions li input { margin-right: 10px; }
ul#subscriptions li label { padding: 0;}

.subscriptionsList { margin: 20px 0;}
.subscriptionsList li { list-style-type:disc; margin-left: 2em}

/***** Fin. Tear Sheet ******/
.tearsheet-print  { text-align: right; }
.tearsheet-print a { color: #FFF; padding: 3px 10px; background: #01a7e1; display: inline-block; *display: inline; zoom: 1;}
.tearsheet-print a span { display: block; }

.fin-tear-sheet #priceModule_SharePriceModule3 { min-height: 10px; float: none!important; margin: 0 auto!important; background: #f5f5f5; color: #000; border-bottom: none; }
.fin-tear-sheet .page-content #priceModule_SharePriceModule3 th { border-color: #f5f5f5; }
.fin-tear-sheet .page-content #priceModule_SharePriceModule3 td { border: none; }
.fin-tear-sheet table.priceDetails { background: rgba(0,0,0,.08); }


/***** AGM *****/
.agm h3{ font-size: 16px; font-weight: 400 }
.agm .row { margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid #D5D5D5;}
.agm table {  border-top: 1px solid #D5D5D5; border-left: 1px solid #D5D5D5; border-right: 1px solid #D5D5D5; }
.agm table td { background: transparent; border-bottom: 1px solid #D5D5D5; }
.agm table td a { color: #01a7e1 }


/***** Calendar *****/
.calender-intro { display: block; width: 100%; float: none; margin-bottom: 30px;}
.calender-intro .color-block { height: 30px; float: left; margin: 5px 10px 10px 0px; width: 30px; background-color: #01a7e1}

#calendar_Calendar-Otherlevels { width: 320px; }
.ui-datepicker table { width: 100%; position: relative; background: #f5f5f5; }
.ui-datepicker-header { position: relative; color: #fff; font-weight: bold; text-align: center; overflow: hidden; }
.ui-datepicker-title { display: block; padding: 10px 0; background: #01a7e1; }
.ui-datepicker-prev, .ui-datepicker-next { cursor: pointer; }
.ui-datepicker-prev .ui-icon, .ui-datepicker-next .ui-icon { top: -9999px; }

.ui-datepicker-next { position: relative }
	.ui-datepicker-next:before { content: "\f0da";  position:absolute; font-family: 'FontAwesome'; top:8px; right:-145px; font-size: 25px; color: #FFFFFF }
.ui-datepicker-prev { position: relative }
	.ui-datepicker-prev:before { content: "\f0d9";  position:absolute; font-family: 'FontAwesome'; top:8px; right:145px; font-size: 25px; color: #FFFFFF }

.ui-datepicker th { color: #333; background: #ddd; text-align: center; padding: 3px 0; text-align:left }
.ui-datepicker td { padding: 0px; border: none; }
.ui-datepicker td a { color: #666; }
.ui-datepicker td a:hover { background: #fff; color: #FFF;  background: #01a7e1;  }
.ui-datepicker td .ui-state-default, .ui-datepicker td a:visited { display: block; text-decoration: none; background: #FFF; text-align: center; color: #666; margin: 1px; padding: 10px }
.ui-datepicker td .selected { font-weight: bold; background: #01a7e1 !important; color: #fff !important;  }
.ui-datepicker td .selected:hover { color: #fff; background: #01a7e1; }
.ui-datepicker td .ui-state-highlight, .ui-datepicker td .ui-state-highlight:hover { background: #01a7e1; color: #FFFFFF; font-weight: bold; }
.ui-datepicker td .ui-state-active { background: #01a7e1; color: #FFFFFF; font-weight: bold;  }
.ui-datepicker td .ui-state-default.ui-state-highlight.ui-state-active.selected { color: #fff !important; }
.ui-datepicker td .ui-state-default.ui-state-highlight.selected { color: #fff !important; }

.date-display { font-weight: bold; font-size: 14px; padding: 10px 0; }

.calendar-events { margin: 2em 0;}
.event-table { margin: 10px 0; width:100%; border-spacing: 1px; border-collapse:separate; }
.event-table th { font-weight: normal; padding: 5px 10px; background: #ECECEE; color: #FFFFFF; text-align:left }
.event-table td {padding:5px 10px; margin:0; vertical-align:middle;}
.event-table tr:nth-child(odd) { background: #f7f7f7}
.event-table td.icon-column { display: none;}
.event-table td.event-column p { display: none;}
.event-table td.event-column a:hover {  color: #dc7118;}

/***** Corporate Governance ******/
.corp-gov a { color: #01a7e1}
.corp-gov a[data-icon="pdf"] { text-align:center; position: relative }
	.corp-gov a[data-icon="pdf"]:before { font-size: 21px; font-weight: 400;  } /* for PDF icons */

/*** Board and Management ***/
.TextModule .board_management { width: 33.3333%; min-height: 340px; padding: 20px; text-align: center; border-bottom: 1px solid #ddd; float:left; }
.TextModule .board_management:hover { background: #eee; cursor: pointer; }
.board_management > div { display: block; width: auto!important; margin: 0; float: none; vertical-align: top; }
.board_management img { max-height: 200px; margin: 0 0 20px 0; border: 1px solid #eee; }
.board_management h2 { margin-bottom: 0; }
.board_management h2 strong { display: block; font: normal 80% arial, verdana,sans-serif; color: #00a7e1; }
.TextModule .board_management ul { display: none; list-style: none; }
.board_management li { position: relative; }
.board_management li:before { position: absolute; top: 6px; left: -20px; display: block; padding: 3px; background: #01a7e1; content: " "; border-radius: 100%; }

.TextModule .board_management.active { position: absolute; top: 50px; left: 0; width: 100%; height: 93%; min-height: 10px; padding: 40px; background: #eee; text-align: left; box-shadow: 0 2px 4px rgba(0,0,0,.1); box-sizing: border-box; cursor: auto; }
.board_management.active .fa-close { position: absolute; top: 10px; right: 10px; display: block; padding: 6px 7px; background: #333; color: #fff; border-radius: 3px; cursor: pointer; font-size: 18px; }
.board_management.active .fa-close:hover { background: #fff; color: #000; }
.board_management.active > div { float: left; }
.board_management.active > div.nine.columns { display: table-cell; float: none; padding-left: 40px; }
.board_management.active h2 { margin-bottom: 20px; }
.TextModule .board_management.active ul { display: block; }

/*** Media Releases ***/
.iconLink { border-bottom: 1px solid #eee; }
.iconLink a { position: relative; display: block; padding:17px 12px 12px 40px!important; display: block; text-decoration: none; color: #01a7e1; margin: 0 0 .5em; }
.iconLink a:before { content: '\f15c'; position:absolute; font-family: 'FontAwesome'; top: 13px; left: 10px; font-size: 23px; }
.iconLink a:hover { text-decoration: underline; }

/*** FAQ ***/
.QAViewer { margin-bottom: .7em; border-bottom: 1px solid #eee; }
.QAViewer .QALink { position:relative; padding:12px 12px 17px 40px!important; display: block; text-decoration: none; color: #01a7e1; }
.QAViewer .QALink:hover { text-decoration: underline; }
.QALink:before { content: '\f059'; position:absolute; font-family: 'FontAwesome'; top: 8px; left: 10px; font-size: 23px; }

.QAViewer.open .QALink {  }
.QAViewer .answer { padding: 20px 20px 10px; background-color: #eee; border-radius: 5px; color: #000; }
.QAViewer .answer p {margin:0 0 10px 0;}
.QAViewer .answer ul { padding-left: 20px;}
.QAViewer .answer ul li { margin-left: 0em; list-style:outside disc}


/* Print Styles */
@media print { 
	#main-nav, .iconLink, .returnhome, a.btn { display: none;}
	.branding { height: auto !important; float: none; width: 100%; background: none;}
	.confirmation table { width: 100%}
	.page-content { padding: 0; margin-left: 0;}
	.confirmation, #bpayBox {page-break-inside: avoid; margin: 0 0 20px}
}



/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 1200px) {
  
  .nav ul li a { padding: 0 15px; }
  
}

@media (max-width: 991px) {
  
  body{ margin-bottom: 0; }
  
  /* general */
  #wrapper { width: 100%; margin: 0 auto;}
  .container, #header .container { clear: both; display: block; margin: 0; width: 100%; padding: 0 4%;}
  .column, .columns { float: none; width: 100% !important; display: block; margin: 0; }
  .page-content {  }

  /* Header */
  .branding { }
  .branding .logo-row, .branding .sub-logo { width: auto!important; float: left!important; }
  .branding .sub-logo { position: absolute; top: -35px; right: 4%; width: auto!important; padding: 0; }
  .branding .sub-logo img { display: none; }
  .branding .logo { }
  h1.top-title{ display: none;}

  /* main-nav */
  #mobileMenuBtn {display: block;}
  .navigation { position: relative; z-index: 4; width: 100%; margin: 0; display: none; }
  .nav { position: relative; width: 100%; text-align:center; background: #01a7e1; top: 0px; margin: 0; }
  .nav > ul > li { position: relative; display: block; text-align: left; }
  .nav ul li:hover ul { display: none; }
  .nav li a { color: #FFFFFF; }
  .nav li a .fa { display: block; position: absolute; right: 20px; top: 15px; padding: 5px; border-radius: 5px; background: #fff; color: #000; }
  .nav li a:hover { background: #01a7e1; color: #FFFFFF;}
  .nav ul ul { position: static; }
  .nav ul ul li a { padding; 15px 20px 15px 40px; }

  /* page-content */
  .inputFields { width: 100% !important; }
    
  .page-content .announcement-container { width: auto; margin: 0 0 10px; float: none; }
  .page-content #priceModule_SharePriceModule3, .page-content .prospectus_widget { width: 49%; }
  .page-content #priceModule_SharePriceModule3 { margin: 0 2% 0 0!important; }
  .page-content #priceModule_SharePriceModule3, .page-content .prospectus_widget { margin-bottom: 10px; }
  
  .page-content .overview-container .intro-row .eight.columns:after { display: none; }
  .page-content .overview-container .intro-row .columns { padding: 0 0 20px; }
  
  #top-banner { margin: 0 0 10px; }
	
  /* buttons */
  .home-btn {padding: 5px;}

  /* IR */
  #priceModule_SharePriceModule3 {display:block;}
  #custom-price-table { display: none;}
  .priveVolumeChart { width: 100% !important;}
  .highcharts-input-group { display: none; }

  table.overflow, table.priceHistoryTable {overflow-x: auto; display: block; padding: 0 0 10px; position:relative; -webkit-box-shadow: inset -3px 0px 5px -1px rgba(0,0,0,0.25); -moz-box-shadow: inset -3px 0px 5px -1px rgba(0,0,0,0.25); box-shadow: inset -3px 0px 5px -1px rgba(0,0,0,0.25);}
  /***** Table *****/
  table.responsive td { display: block; width: 100%; }

  .announcements-filter input#KeywordSearch { width: 30%;}
  .widgets .btn-subscribe:before { top: 25px; }

  /*footer*/
  .page-footer { position: static; margin-top: 30px; }
  .page-footer > .container ul { padding-left: 0; }
  .page-footer .text-left, .page-footer .text-right, p.copyright { text-align: center; }
  .page-footer-bottom .trade { margin: 0 0 30px; }
  .page-footer-bottom .trade .text-right { position: absolute; bottom: 0; left: 0; }
  
  /*** Board and Management ***/
  .TextModule .board_management { width: 50%; }
		
}
@media (max-width: 630px) {
  
  #header .header-nav { position: relative; z-index: 3; }
  
  /* page-content */    
  .page-content .announcement-container, .page-content #priceModule_SharePriceModule3, .page-content .prospectus_widget { width: auto; margin: 0 0 10px!important; float: none; }
  
  .tools_icon { display: none; }
  
}
@media (max-width: 480px) {
 
  #logo { border: none; }
  #logo + h1 { display: none; }
  .branding .sub-logo { top: 80px; left: 4%; right: auto; }
  
  #top-banner { display: none; }
  
  .breadcrumbs { display: none; }
  
  /*** Board and Management ***/
  .TextModule .board_management { width: 100%; }
  .board_management.active > div { display: block!important; float: none!important; }
  .board_management.active > div.three.columns { text-align: center; }
  .board_management.active > div.nine.columns { padding-left: 0; }
  
  /*** Footer ***/
  .page-footer-bottom .footer-links > ul > li { width: 100%; float: none; margin-bottom: 20px; }
  .page-footer-bottom .footer-links ul ul li { display: inline-block; width: 49%; }
  
}