/* Fonts */

/* Telecom National Light */
@font-face
{
  font-family: 'TelecomNational-Light';
  src: url('fonts/TelecomNationalWeb-Light.eot');
  src: local('☺︎'),
		url('fonts/TelecomNationalWeb-Light.woff') format('woff'),
    url('fonts/TelecomNationalWeb-Light.ttf') format('truetype'),
    url('fonts/TelecomNationalWeb-Light.svg#') format('svg');
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
}

/* Telecom National Regular */
@font-face
{
  font-family: 'TelecomNational-Regular';
  src: url('fonts/TelecomNationalWeb-Regular.eot');
	src: local('☺︎'),
		url('fonts/TelecomNationalWeb-Regular.woff') format('woff'),
    url('fonts/TelecomNationalWeb-Regular.ttf') format('truetype'),
    url('fonts/TelecomNationalWeb-Regular.svg#') format('svg');
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

/* Telecom National Semibold */
@font-face
{
  font-family: 'TelecomNational-Semibold';
  src: url('fonts/TelecomNationalWeb-Semibold.eot');
  src: local('☺︎'),
		url('fonts/TelecomNationalWeb-Semibold.woff') format('woff'),
    url('fonts/TelecomNationalWeb-Semibold.ttf') format('truetype'),
    url('fonts/TelecomNationalWeb-Semibold.svg#') format('svg');
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}

/* Telecom National Extrabold */
@font-face
{
  font-family: 'TelecomNational-Extrabold';
  src: url('fonts/TelecomNationalWeb-Extrabold.eot');
  src: local('☺︎'),
    url('fonts/TelecomNationalWeb-Extrabold.woff') format('woff'),
    url('fonts/TelecomNationalWeb-Extrabold.ttf') format('truetype'),
    url('fonts/TelecomNationalWeb-Extrabold.svg#') format('svg');
  font-style: normal;
  font-weight: 900;
  font-stretch: normal;
}

.light
{
  font-family: TelecomNational-Light, Calibri, Arial, sans-serif;
  font-weight: 300;
}

.regular
{
  font-family: TelecomNational-Regular, Calibri, Arial, sans-serif;
  font-weight: 400;
}

.bold
{
  font-family: TelecomNational-Semibold, Calibri, Arial, sans-serif;
  font-weight: 700;
}

.extrabold
{
  font-family: TelecomNational-Extrabold, Calibri, Arial, sans-serif;
  font-weight: 900;
}

/* Fontello - Icon Font */
@font-face
{
  font-family: 'fontello';	
  src: url('fonts/fontello.eot');
	src: local('☺︎'),
    url('fonts/fontello.woff') format('woff'),
    url('fonts/fontello.ttf') format('truetype'),
    url('fonts/fontello.svg#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icons
{
  font-family: fontello;
}

[class^="icon-"]:before, [class*=" icon-"]:before
{
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-search:before
{
  content: '\e828';
}

.icon-eye:before
{
  content: '\e823';
}

.icon-heart:before
{
  content: '\e815';
}

.icon-help:before
{
  content: '\e822';
}

.icon-tag:before
{
  content: '\e80f';
}

.icon-thumbs-up-alt:before
{
  content: '\e81e';
}

.icon-thumbs-down-alt:before
{
  content: '\e81f';
}

.icon-pencil:before
{
  content: '\e816';
}

.icon-comment:before
{
  content: '\e810';
}

.icon-chat:before
{
  content: '\e819';
}

.icon-location:before
{
  content: '\e818';
}

.icon-doc-text-inv:before
{
  content: '\e80e';
}

.icon-phone:before
{
  content: '\e807';
}

.icon-cog-alt:before
{
  content: '\e817';
}

.icon-wrench:before
{
  content: '\e802';
}

.icon-down-open:before
{
  content: '\e811';
}

.icon-left-open:before
{
  content: '\e812';
}

.icon-right-open:before
{
  content: '\e813';
}

.icon-up-open:before
{
  content: '\e814';
}

.icon-angle-circled-left:before
{
  content: '\e80c';
}

.icon-angle-circled-right:before
{
  content: '\e80b';
}

.icon-angle-circled-up:before
{
  content: '\e80a';
}

.icon-angle-circled-down:before
{
  content: '\e80d';
}

.icon-mail-alt:before
{
  content: '\e801';
}

.icon-ccw:before
{
  content: '\e82d';
}

.icon-play-circled2:before
{
  content: '\e803';
}

.icon-desktop:before
{
  content: '\e81c';
}

.icon-laptop:before
{
  content: '\e81b';
}

.icon-tablet:before
{
  content: '\e81d';
}

.icon-mobile:before
{
  content: '\e800';
}

.icon-cloud:before
{
  content: '\e809';
}

.icon-facebook-squared:before
{
  content: '\e804';
}

.icon-gplus-squared:before
{
  content: '\e82e';
}

.icon-twitter:before
{
  content: '\e805';
}

.icon-youtube-squared:before
{
  content: '\e806';
}

.icon-camera:before
{
  content: '\e825';
}

.icon-check:before
{
  content: '\e82a';
}

.icon-cancel:before
{
  content: '\e827';
}

.icon-cancel-circled:before
{
  content: '\e82b';
}

.icon-tools:before
{
  content: '\e824';
}

.icon-fast-forward:before
{
  content: '\e829';
}

.icon-signal:before
{
  content: '\e820';
}

.icon-flash:before
{
  content: '\e826';
}

.icon-briefcase:before
{
  content: '\e808';
}

.icon-gauge-1:before
{
  content: '\e821';
}

.icon-box:before
{
  content: '\e81a';
}

.icon-cw:before
{
  content: '\e82c';
}

/* Natural box layout model */
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

html
{
  overflow: -moz-scrollbars-vertical; 
  overflow-y: scroll;
  font-size: 100%;
}

/* Body Content */

body
{
  font-family: TelecomNational-Regular, Calibri, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  background: whitesmoke;
  overflow-x: auto;
  color: #414042;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.618;
}

iframe
{
  border: none; 
}

table
{
  border-collapse: collapse;
  border-spacing: 0px;
}

td, th
{
  font-family: TelecomNational-Regular, Calibri, Arial, sans-serif;
  vertical-align: top;
  font-size: 15px;
  font-weight: 400;
}

p
{
  font-family: TelecomNational-Regular, Calibri, Arial, sans-serif;
  line-height: 125%;
  font-size: 15px;
  font-weight: 400;
  margin: 0px 0px 1em 0px;
}

br.clear
{
  clear: both;
  display: block;
  line-height: 0px;
}

span.clear
{
  clear: both;
  display: block;
  height: 0px;
}

hr
{
  background: #ccc;
  clear: both; 
  display: block;
  float: none; 
  width: 100%; 
  height: 1px;
  margin: 10px auto;
  border: none; 
}

img
{
  display: inline-block;
  -ms-interpolation-mode: bicubic;
  zoom: 1;
}

a
{
  color: #0088cc;
  text-decoration: none;
}

a:hover,
a:focus
{
  color: #005580;
  text-decoration: underline;
}

a:focus
{
  outline: none;
}

a img
{
  border: none;
}

ol,
ul
{
  padding: 0px 0px 0px 30px;
}

ol.indent,
ul.indent
{
  list-style-type: none;
}

li
{
  padding: 0px 0px 8px 0px;
  line-height: 125%;
}

ol ol
{
  padding: 0px 0px 0px 10px;
}

ol ol li
{
  list-style-type: lower-alpha;
  margin-left: 12px;
  line-height: 110%;
}

/* Alignment Override */

p.left,
td.left,
th.left
{
  text-align: left !important;
}

p.center,
td.center,
th.center
{
  text-align: center !important;
}

p.right,
td.right,
th.right
{
  text-align: right !important;
}

img.left
{
  float: left !important;
  margin-right: 10px;
  border: 1px solid #999999;
}

img.right
{
  float: right !important;
  margin-left: 10px;
  border: 1px solid #999999;
}

div.left,
span.left,
ul.left,
table.left
{
  float: left !important;
  text-align: left !important;
}

div.center,
span.center,
ul.center,
table.center
{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
}

div.right,
span.right,
ul.right,
table.right
{
  float: right !important;
  text-align: right !important;
}

/* Text Formatting Override */

.inline
{
  display: inline-block !important;
}

.nowrap
{
  white-space: nowrap !important;
}

.wrap
{
  white-space: normal !important;
}

.margin
{
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.margin-box
{
  margin: 20px 20px !important;
}

.nopad
{
  margin: 0px !important;
  padding: 0px !important;
}

.strike
{
  text-decoration: line-through !important;
}

.upper
{
  text-transform: uppercase !important;
}

.underlined
{
  width: 100%;
  padding-bottom: 0px;
  margin-bottom: 10px !important;
  border-bottom: 1px solid #cccccc;
  padding: 0em 0.1em 0em 0.1em;
}

/* Small and Large Font */

.small
{
  font-size: 11px !important;
}

span.small
{
  font-size: 11px !important;
  line-height: 100%;
}

ul.small li,
ol.small li,
li.small
{
  font-size: 11px !important;
  line-height: 110%;
  list-style-type: lower-alpha;
}

.large
{
  font-size: 18px !important;
}

span.large
{
  font-size: 18px !important;
  line-height: 100%;
}

ul.large li,
ol.large li,
li.large
{
  font-size: 18px !important;
  line-height: 110%;
  list-style-type: lower-alpha;
}

/* List Styles */

ul.options
{
  display: inline-block;
  margin: 10px 0px;
  padding: 0px;
  /*-webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;*/
  /*box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);*/
  background-color: #59c6f2;
  /*filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF59C6F2', endColorstr='#FF009AD8');
  background-image: -webkit-linear-gradient(top, #59c6f2 0%, #009ad8 100%);
  background-image: -moz-linear-gradient(top, #59c6f2 0%, #009ad8 100%);
  background-image: -o-linear-gradient(top, #59c6f2 0%, #009ad8 100%);
  background-image: linear-gradient(to bottom, #59c6f2 0%, #009ad8 100%);*/
  font-size: 0px;
}

ul.options li
{
  display: inline-block;
  cursor: pointer;
  list-style: none;
  list-style-position: outside;
  font-family: TelecomNational-Regular, Calibri, Arial, sans-serif;
  padding: 0px;
  height: 40px;
  line-height: 40px;
  font-size: 19px;
  font-weight: normal;
  text-transform: uppercase;
  text-decoration: none;
  /*border-left: 1px solid #d9d9d9;
  border-bottom: 4px solid #d9d9d9;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);*/
  white-space: nowrap;
}

ul.options li:last-child
{
  /*border-right: 1px solid #d9d9d9;*/
}

ul.options li.active
{
  background-color: #604494;
  /*filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF604494', endColorstr='#FF43338F');
  background-image: -webkit-linear-gradient(top, #604494 0%, #43338f 100%);
  background-image: -moz-linear-gradient(top, #604494 0%, #43338f 100%);
  background-image: -o-linear-gradient(top, #604494 0%, #43338f 100%);
  background-image: linear-gradient(to bottom, #604494 0%, #43338f 100%);*/
  border-bottom: 4px solid #a199c7;
  color: #fff;
}

ul.options li.active:hover,
ul.options li:hover
{
  border-bottom: 4px solid #f1f1f1;
  background: #69cbf3;
}

ul.options li span,
ul.options li a
{
  display: inline-block;
  padding: 0px 20px;
  height: 40px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

ul.options li span
{
  color: #d9d9d9;
}

ul.options.pager
{
  margin: 0px 0px 10px 0px;
  display: block;
  text-align: center;
}

ul.options.pager li
{
  height: 24px;
  line-height: 20px;
  font-size: 16px;
}

ul.options.pager li span,
ul.options.pager li a
{
  padding: 0px 10px;
  height: 22px;
}

/* Input Styles */

input,
select,
textarea,
div.readonly div
{
  cursor: text;
  font-family: TelecomNational-Regular, Calibri, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  vertical-align: middle;
  height: 34px;
  padding: 0px 6px;
  margin-bottom: 5px;
  color: #049cdb;
  background: #ffffff;
  /*-webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;*/
  border: 1px solid #009ad8;
  max-width: 360px;
  min-width: 260px;
  max-height: 300px;
  display: inline-block;
  zoom: 1;
}

div.readonly
{
  max-width: 360px;
  min-width: 260px;
  display: inline-block;
  zoom: 1;
}

div.readonly div
{
  color: #989898;
  background-color: #f1f1f1;
  border: 1px solid #989898;
  padding: 5px 6px 0px 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
}

input:focus,
select:focus,
textarea:focus
{
  outline: none;
  border-color: #59c6f2;
}

select
{
  padding: 0px 6px 1px 6px;
}

textarea
{
  height: auto;
  padding: 6px 10px;
}

input[type="radio"],
input[type="checkbox"]
{
  margin: 4px 10px 0px 0px;
  line-height: normal;
  max-width: initial;
  min-width: initial;
}

input[type=button],
input[type=submit]
{
  cursor: pointer;
  font-family: TelecomNational-Regular, Calibri, Arial, sans-serif;
  font-size: 15px;
  font-weight: normal;
  text-transform: uppercase;
  /*text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);*/
  line-height: 20px;
  color: white;
  height: 40px;
  padding: 9px 19px;
  text-align: center;
  white-space: nowrap;
  /*-webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;*/
  background-color: #59c6f2;
  /*filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ff59c6f2', endColorstr='#ff009ad8');
  background-image: -webkit-linear-gradient(top, #59c6f2 0%, #009ad8 100%);
  background-image: -moz-linear-gradient(top, #59c6f2 0%, #009ad8 100%);
  background-image: -o-linear-gradient(top, #59c6f2 0%, #009ad8 100%);
  background-image: linear-gradient(to bottom, #59c6f2 0%, #009ad8 100%);*/
  border-top: none;
  border-left: none;
  border-right: none;
  /*border-bottom: 2px solid #007bac;*/
  max-width: initial;
  min-width: initial;
  display: inline-block;
  zoom: 1;
}

ul.options.blue,
input[type=button].blue,
input[type=submit].blue
{
  background-color: #59c6f2;
  /*filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ff59c6f2', endColorstr='#ff009ad8');
  background-image: -webkit-linear-gradient(top, #59c6f2 0%, #009ad8 100%);
  background-image: -moz-linear-gradient(top, #59c6f2 0%, #009ad8 100%);
  background-image: -o-linear-gradient(top, #59c6f2 0%, #009ad8 100%);
  background-image: linear-gradient(to bottom, #59c6f2 0%, #009ad8 100%);*/
  border-bottom-color: #007bac;
}

ul.options.purple,
input[type=button].purple,
input[type=submit].purple
{
  background-color: #604494;
  /*filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ff604494', endColorstr='#ff43338f');
  background-image: -webkit-linear-gradient(top, #604494 0%, #43338f 100%);
  background-image: -moz-linear-gradient(top, #604494 0%, #43338f 100%);
  background-image: -o-linear-gradient(top, #604494 0%, #43338f 100%);
  background-image: linear-gradient(to bottom, #604494 0%, #43338f 100%);*/
  border-bottom-color: #352872;
}

ul.options.pink,
input[type=button].pink,
input[type=submit].pink
{
  background-color: #de188b;
  /*filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#fff37eb2', endColorstr='#ffde188b');
  background-image: -webkit-linear-gradient(top, #f37eb2 0%, #de188b 100%);
  background-image: -moz-linear-gradient(top, #f37eb2 0%, #de188b 100%);
  background-image: -o-linear-gradient(top, #f37eb2 0%, #de188b 100%);
  background-image: linear-gradient(to bottom, #f37eb2 0%, #de188b 100%);*/
  border-bottom-color: #b1136f;
}

ul.options.orange,
input[type=button].orange,
input[type=submit].orange
{
  background-color: #f26823/*#ff9b00*/;
  /*filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffff9b00', endColorstr='#fff17030');
  background-image: -webkit-linear-gradient(top, #ff9b00 0%, #f17030 100%);
  background-image: -moz-linear-gradient(top, #ff9b00 0%, #f17030 100%);
  background-image: -o-linear-gradient(top, #ff9b00 0%, #f17030 100%);
  background-image: linear-gradient(to bottom, #ff9b00 0%, #f17030 100%);*/
  border-bottom-color: #c05926;
}

ul.options.green,
input[type=button].green,
input[type=submit].green
{
  background-color: #19ad65;
  /*filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ff19ad65', endColorstr='#ff00ad65');
  background-image: -webkit-linear-gradient(top, #19ad65 0%, #00ad65 100%);
  background-image: -moz-linear-gradient(top, #19ad65 0%, #00ad65 100%);
  background-image: -o-linear-gradient(top, #19ad65 0%, #00ad65 100%);
  background-image: linear-gradient(to bottom, #19ad65 0%, #00ad65 100%);*/
  border-bottom-color: #008a50;
}

a .block.blue:hover,
a .block.blue:hover span,
ul.options.blue li.active:hover,
ul.options.blue li:hover,
input[type=button]:hover,
input[type=submit]:hover,
input[type=button].blue:hover,
input[type=submit].blue:hover
{
  background: #59c6f2;
}

a .block.purple:hover,
a .block.purple:hover span,
ul.options.purple li.active:hover,
ul.options.purple li:hover,
input[type=button].purple:hover,
input[type=submit].purple:hover
{
  background: #7f569a;
}

a .block.pink:hover,
a .block.pink:hover span,
ul.options.pink li.active:hover,
ul.options.pink li:hover,
input[type=button].pink:hover,
input[type=submit].pink:hover
{
  background: #f37eb2;
}

a .block.orange:hover,
a .block.orange:hover span,
ul.options.orange li.active:hover,
ul.options.orange li:hover,
input[type=button].orange:hover,
input[type=submit].orange:hover
{
  background: #f8a531;
}

a .block.green:hover,
a .block.green:hover span,
ul.options.green li.active:hover,
ul.options.green li:hover,
input[type=button].green:hover,
input[type=submit].green:hover
{
  background: #19ad65;
}

input[type=button].slim,
input[type=submit].slim
{
  width: auto;
}

input[type=button].pad,
input[type=submit].pad
{
  padding: 9px 49px;
}

input[type=button].full-width,
input[type=submit].full-width
{
  width: 100%;
}

input.fit,
select.fit,
textarea.fit
{
  width: auto;
  min-width: 80px;
}

input::-moz-focus-inner,
select::-moz-focus-inner
{
  border: 0px;
}

/* Form Input */

.inputform
{
  display: block;
  margin: 0px auto;
}

.inputform table
{
  width: 100%;
  margin: 20px 0px 0px 0px;
}

.inputform th
{
  padding: 3px 20px 3px 0px;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
  font-weight: normal;
}

.inputform td
{
  padding: 3px 0px 3px 0px;
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
}

.inputform label
{
  font-size: 17px;
  font-weight: normal;
}

.inputform img
{
  width: 16px;
  height: 16px;
  position: relative;
  top: 3px;
  right: -6px;
}

.inputform select
{
  width: auto;
  min-width: 80px;
}

.inputform input[type=text],
.inputform input[type=password],
.inputform textarea
{
  width: 360px;
  min-width: 360px;
}

.inputform input[type=text].med,
.inputform input[type=password].med,
.inputform select.med
{
  width: 260px;
  min-width: 260px;
}

.inputform input[type=text].sml,
.inputform input[type=password].sml,
.inputform select.sml
{
  width: 180px;
  min-width: 180px;
}

.inputform input[type=text].num,
.inputform input[type=password].num,
.inputform select.num
{
  width: 80px;
  min-width: 80px;
}

/* Heading Styles */

.h1, .h2, .h3, .h4, .h5, .h6, .block,
h1, h2, h3, h4, h5, h6
{
  font-family: TelecomNational-Semibold, Calibri, Arial, sans-serif;
  font-weight: 700;
  vertical-align: baseline;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 10px 0px;
}

.h1,
h1
{
  font-size: 43px;
  line-height: 48px;
}

.h2,
h2
{
  font-size: 30px;
  line-height: 33px;
}

.h3,
h3
{
  font-size: 25px;
  line-height: 28px;
}

.h4,
h4
{
  font-size: 18px;
  line-height: 20px;
}

.h5,
h5
{
  font-size: 16px;
  line-height: 17px;
}

.h6,
h6
{
  font-size: 15px;
  line-height: 16px;
}

.h1.full-width, .h2.full-width, .h3.full-width, .h4.full-width, .h5.full-width, .h6.full-width,
h1.full-width, h2.full-width, h3.full-width, h4.full-width, h5.full-width, h6.full-width
{
  width: 100%;
  display: block;
  text-align: center;
  margin-bottom: 20px;
}

/* Telecom Colours for Blocks and Circles */

span.block.blue,
.block.blue span,
.blue
{
  background-color: #009ad8;
}

span.block.purple,
.block.purple span,
.purple
{
  background-color: #43338f;
}

span.block.pink,
.block.pink span,
.pink
{
  background-color: #de188b;
}

span.block.orange,
.block.orange span,
.orange
{
  background-color: #f17030;
}

span.block.green,
.block.green span,
.green
{
  background-color: #00ad65;
}

.block
{
  background-color: transparent;
  padding: 0px;
}

span.block,
.block span
{
  color: #ffffff !important;
  padding: 0em 0.2em;
}

p.block.underlined
{
  line-height: 16px;
}

div.block-detail
{
  display: inline-block;
  font-size: 11px;
  line-height: 100%;
  float: right;
}

div.block-detail .circle
{
  margin-top: 0px;
}

/* Spark Circles */

.circle
{
  width: 80px;
  height: 80px;
  margin: 4px 4px;
  padding: 0px 0px;
  line-height: 80px;
  text-align: center;
  vertical-align: text-bottom;
  text-decoration: none;
  border: none;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80px 80px;
  -webkit-box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1);
  display: inline-block;
  zoom: 1;
}

.circle.tiny
{
  width: 35px;
  height: 35px;
  line-height: 35px;
  background-size: 35px 35px;
}

.circle.small
{
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-size: 50px 50px;
}

.circle.medium
{
  width: 65px;
  height: 65px;
  line-height: 65px;
  background-size: 65px 65px;
}

.circle.large
{
  width: 120px;
  height: 120px;
  line-height: 120px;
  background-size: 120px 120px;
}

.circle.biz
{
  background-image: url("icons/icon-biz.png");
}

.circle.box
{
  background-image: url("icons/icon-box.png");
}

.circle.bulb
{
  background-image: url("icons/icon-bulb.png");
}

.circle.cloud
{
  background-image: url("icons/icon-cloud.png");
}

.circle.cog
{
  background-image: url("icons/icon-cog.png");
}

.circle.dollar
{
  background-image: url("icons/icon-dollar.png");
}

.circle.email
{
  background-image: url("icons/icon-email.png");
}

.circle.eye
{
  background-image: url("icons/icon-eye.png");
}

.circle.location
{
  background-image: url("icons/icon-location.png");
}

.circle.mobile
{
  background-image: url("icons/icon-mobile.png");
}

.circle.modem
{
  background-image: url("icons/icon-modem.png");
}

.circle.phone
{
  background-image: url("icons/icon-phone.png");
}

.circle.question
{
  background-image: url("icons/icon-question.png");
}

.circle.shout
{
  background-image: url("icons/icon-shout.png");
}

.circle.spark
{
  background-image: url("icons/icon-spark.png");
}

.circle.tag
{
  background-image: url("icons/icon-tag.png");
}

.circle.top-up
{
  background-image: url("icons/icon-top-up.png");
}

.circle.van
{
  background-image: url("icons/icon-van.png");
}

.circle.wifi
{
  background-image: url("icons/icon-wifi.png");
}

a span.circle.blue:hover,
a div.circle.blue:hover,
a.circle.blue:hover,
input.circle.blue:hover
{
  background-color: #99d6ef;
}

a span.circle.green:hover,
a div.circle.green:hover,
a.circle.green:hover,
input.circle.green:hover
{
  background-color: #55dfa5;
}

a span.circle.purple:hover,
a div.circle.purple:hover,
a.circle.purple:hover,
input.circle.purple:hover
{
  background-color: #a393cf;
}

a span.circle.pink:hover,
a div.circle.pink:hover,
a.circle.pink:hover,
input.circle.pink:hover
{
  background-color: #f670c4;
}

a span.circle.orange:hover,
a div.circle.orange:hover,
a.circle.orange:hover,
input.circle.orange:hover
{
  background-color: #ffc8a0;
}

/* Image Cutouts */

div.campaign-image
{
  float: right;
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
}

div.campaign-image img
{
  position: relative;
  width: 200px;
  height: 200px;
  padding: 0px 25px 0px 25px;
}

div.campaign-image:after
{
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  height: 200px;
  width: 200px;
  background-repeat: no-repeat;
}

div.campaign-xmas-image,
div.campaign-xmas-image img,
div.campaign-xmas-image:after
{
  width: 400px !important;
  height: 400px !important;
  background-size: cover;
  padding: 0px !important;
}

div.campaign-image.none
{
  margin: 0px 0px 0px 20px !important;
}

div.campaign-image.none img
{
  padding: 0px !important;
}

div.campaign-image.angle:after
{
  background-image: url('icons/cutout-angle.png');
}

div.campaign-image.circled:after
{
  background-image: url('icons/cutout-circle.png');
}

div.campaign-image.cloud:after
{
  background-image: url('icons/cutout-cloud.png');
}

div.campaign-image.cloud1:after
{
  background-image: url('icons/cutout-cloud1.png');
}

div.campaign-image.cloud2:after
{
  background-image: url('icons/cutout-cloud2.png');
}

div.campaign-image.fade:after
{
  background-image: url('icons/cutout-fade.png');
}

div.campaign-image.frame:after
{
  background-image: url('icons/cutout-frame.png');
}

div.campaign-image.heart:after
{
  background-image: url('icons/cutout-heart.png');
}

div.campaign-image.orbit:after
{
  background-image: url('icons/cutout-orbit.png');
}

div.campaign-image.orbit1:after
{
  background-image: url('icons/cutout-orbit1.png');
}

div.campaign-image.oval:after
{
  background-image: url('icons/cutout-oval.png');
}

div.campaign-image.pulse:after
{
  background-image: url('icons/cutout-pulse.png');
}

div.campaign-image.speech:after
{
  background-image: url('icons/cutout-speech.png');
}

div.campaign-image.stamp:after
{
  background-image: url('icons/cutout-stamp.png');
}

/* Unsupported Browsers */

#unsupported-browser
{
  position: relative;
  width: 100%;
  background: #fefbf6;
  padding: 4px 0px 10px 0px;
  margin: 0px;
  text-align: center;
  border-bottom: 4px solid #f8a531;
  font-size: 14px;
}

#unsupported-browser h4
{
  color: #f17030;
}

/* Overlays */

#blank
{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #fff;
  display: block;
  z-index: 100003;
}

/* Loading Animation */

#loading {
  top: 50%;
  left: 50%;
  position: fixed;
  z-index: 100000;
}

#loading:before {
  position: fixed;
  z-index: 100001;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.6)";
  filter: alpha(opacity=0.6);
  opacity: 0.6;
  background-color: #ffffff;
}

#loading:after {
  position: absolute;
  z-index: 100002;
  content: "";
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  -webkit-animation: loading 1s infinite linear;
  animation: loading 1s infinite linear;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}

#loading.orange:after
{
  background: url("images/spark-loading-orange.png") center center no-repeat;
}

#loading.green:after
{
  background: url("images/spark-loading-green.png") center center no-repeat;
}

#loading.pink:after
{
  background: url("images/spark-loading-pink.png") center center no-repeat;
}

#loading.blue:after
{
  background: url("images/spark-loading-blue.png") center center no-repeat;
}

#loading.purple:after
{
  background: url("images/spark-loading-purple.png") center center no-repeat;
}

@-webkit-keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Login Animation */

#thefuse-login
{
  width: 640px;
  margin: 0px auto;
}

#thefuse-back
{
  position: absolute;
  width: 640px;
  height: 480px;
  padding-top: 80px;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  visibility: hidden;
  opacity: 0;
  zoom: 1;
}

#thefuse-login:hover #thefuse-back
{
  -webkit-transition: opacity 1s 3s ease-out;
  -moz-transition: opacity 1s 3s ease-out;
  -ms-transition: opacity 1s 3s ease-out;
  -o-transition: opacity 1s 3s ease-out;
  transition: opacity 1s 3s ease-out;
  visibility: visible;
  opacity: 1;
  zoom: 1;
}

#thefuse-login #back-fade
{
  position: relative;
  width: 640px;
  height: 60px;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff", endColorstr="#ffffff", GradientType=0);
}

#thefuse-login #back-body
{
  position: relative;
  width: 640px;
  height: 340px;
  background: #ffffff;
}

#thefuse-logo
{
  position: relative;
  width: 640px;
  height: 480px;
  text-align: center;
}

#thefuse-body
{
  padding: 120px 40px 40px 40px;
}

#thefuse-logo.orange
{
  background: 40px 0px url("images/thefuse-orange.png") no-repeat;
}

#thefuse-logo.pink
{
  background: 40px 0px url("images/thefuse-pink.png") no-repeat;
}

#thefuse-logo.green
{
  background: 40px 0px url("images/thefuse-green.png") no-repeat;
}

#thefuse-logo.blue
{
  background: 40px 0px url("images/thefuse-blue.png") no-repeat;
}

#thefuse-logo.purple
{
  background: 40px 0px url("images/thefuse-purple.png") no-repeat;
}

#thefuse-logo.xmas.orange
{
  background: 40px 0px url("images/thefuse-xmas-orange.png") no-repeat;
}

#thefuse-logo.xmas.pink
{
  background: 40px 0px url("images/thefuse-xmas-pink.png") no-repeat;
}

#thefuse-logo.xmas.green
{
  background: 40px 0px url("images/thefuse-xmas-green.png") no-repeat;
}

#thefuse-logo.xmas.blue
{
  background: 40px 0px url("images/thefuse-xmas-blue.png") no-repeat;
}

#thefuse-logo.xmas.purple
{
  background: 40px 0px url("images/thefuse-xmas-purple.png") no-repeat;
}

#thefuse-logo.orange .thefuse-line
{
  background-color: #6f6f6f /*#ff8500*/;
}

#thefuse-logo.pink .thefuse-line
{
  background-color: #6f6f6f /*#d51c90*/;
}

#thefuse-logo.green .thefuse-line
{
  background-color: #6f6f6f /*#0eae64*/;
}

#thefuse-logo.blue .thefuse-line
{
  background-color: #6f6f6f /*#0ba0d9*/;
}

#thefuse-logo.purple .thefuse-line
{
  background-color: #6f6f6f /*#4d3e9e*/;
}

#thefuse-logo.xmas.orange .thefuse-line
{
  background-color: #ff8500;
}

#thefuse-logo.xmas.pink .thefuse-line
{
  background-color: #d51c90;
}

#thefuse-logo.xmas.green .thefuse-line
{
  background-color: #0eae64;
}

#thefuse-logo.xmas.blue .thefuse-line
{
  background-color: #0ba0d9;
}

#thefuse-logo.xmas.purple .thefuse-line
{
  background-color: #4d3e9e;
}

.thefuse-line
{
  position: absolute;
  display: block;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}

.thefuse-line#line1
{
  top: 81px;
  left: 414px;
  width: 0px;
  height: 9px;
}

#thefuse-logo:hover .thefuse-line#line1
{
  -webkit-transition: width .6s ease-out;
  -moz-transition: width .6s ease-out;
  -ms-transition: width .6s ease-out;
  -o-transition: width .6s ease-out;
  transition: width .6s ease-out;
  width: 226px;
}

#thefuse-logo.xmas:hover .thefuse-line#line1
{
  visibility: hidden;
}

.thefuse-line#line2
{
  top: 81px;
  right: 0px;
  width: 9px;
  height: 0px;
}

#thefuse-logo:hover .thefuse-line#line2
{
  -webkit-transition: height .8s .6s ease-out;
  -moz-transition: height .8s .6s ease-out;
  -ms-transition: height .8s .6s ease-out;
  -o-transition: height .8s .6s ease-out;
  transition: height .8s .6s ease-out;
  height: 399px;
}

.thefuse-line#line3
{
  bottom: 0px;
  right: 0px;
  width: 0px;
  height: 9px;
}

#thefuse-logo:hover .thefuse-line#line3
{
  -webkit-transition: width 1.2s 1.4s ease-out;
  -moz-transition: width 1.2s 1.4s ease-out;
  -ms-transition: width 1.2s 1.4s ease-out;
  -o-transition: width 1.2s 1.4s ease-out;
  transition: width 1.2s 1.4s ease-out;
  width: 640px;
}

.thefuse-line#line4
{
  bottom: 0px;
  left: 0px;
  width: 9px;
  height: 0px;
}

#thefuse-logo:hover .thefuse-line#line4
{
  -webkit-transition: height .8s 2.6s ease-out;
  -moz-transition: height .8s 2.6s ease-out;
  -ms-transition: height .8s 2.6s ease-out;
  -o-transition: height .8s 2.6s ease-out;
  transition: height .8s 2.6s ease-out;
  height: 399px;
}

.thefuse-line#line5
{
  top: 81px;
  left: 0px;
  width: 0px;
  height: 9px;
}

#thefuse-logo:hover .thefuse-line#line5
{
  -webkit-transition: width .2s 3.4s ease-out;
  -moz-transition: width .2s 3.4s ease-out;
  -ms-transition: width .2s 3.4s ease-out;
  -o-transition: width .2s 3.4s ease-out;
  transition: width .2s 3.4s ease-out;
  width: 40px;
}

/* Header */

#header
{
  width: 100%;
}

#headbar
{
  width: 100%;
  height: 31px;
  background-color: #e9e9e9;
}

#headinfo
{
  width: 960px;
  margin: 0px auto;
  padding: 4px 0px 0px 0px;
  font-size: 14px;
}

#headmember
{
  color: #a0a0a0;
  float: left;
}

#headmember a
{
  color: #808285;
}

#headstatus
{
  color: #a0a0a0;
  float: right;
}

#headstatus b,
#headstatus a
{
  color: #808285;
}

#headstatus span
{
  color: #a0a0a0;
}

/* Navigation Footer */

#navfooter
{
  position: relative;
  clear: both;
  padding-left: 180px;
  width: 960px;
  z-index: 998;
  margin: 0px auto;
}

#navcontent
{
  clear: both;
  width: 100%;
  margin: 10px auto 50px auto;
  padding: 5px 14px 4px 14px;
  font-size: 15px;
  color: #808285;
  background: #fff;
  /*-webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
  -webkit-box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);*/
  height: 37px;
  text-align: center;
}

#navcontent a
{
  color: inherit;
  display: inline-block;
}

#navcontent i
{
  font-size: 19px;
  padding-right: 2px;
  vertical-align: -13%;
}

#navleft
{
  float: left;
  height: 26px;
  display: inline-block;
  padding: 0px 12px;
  border-right: 1px solid #c0c0c0;
}

#navright
{
  float: right;
  height: 26px;
  display: inline-block;
  padding: 0px 12px;
  border-left: 1px solid #c0c0c0;
}

/* Navigation Bar */

#navbar
{
  border-top: 1px solid #d9d9d9;
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  padding: 3px 0px 3px 0px;
  background-color: #e9e9e9;
  z-index: 999;
}

#navsite
{
  width: 960px;
  margin: 0px auto;
  color: #a0a0a0;
}

#navitem
{
  font-size: 14px;
  float: left;
}

#navitem a
{
  color: #808285;
  margin: 0px 4px;
}

#navcopy
{
  padding-top: 2px;
  font-size: 12px;
  float: right;
}

/* Menu */

#menu
{
  position: absolute;
  padding: 20px 20px 20px 0px;
  width: 180px;
  background-color: transparent;
  z-index: 997;
}

#menu div
{
  font-family: TelecomNational-Semibold, Calibri, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  height: 30px;
  width: 160px;
  display: block;
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  border-left: 4px solid #d9d9d9;
  padding: 1px 0px 0px 6px;
  text-transform: uppercase;
}

#menu div a
{
  padding: 3px 10px;
  color: #a0a0a0;
  text-decoration: none;
}

#menu div.menu-custom
{
  padding: 1px 0px 0px 12px;
  font-size: 13px;
  height: 20px;
}

#menu div.menu-custom a
{
  padding: 2px 7px;
}

#menu div:hover
{
  border-left: 4px solid #a0a0a0;
}

#menu div.on
{
  border-left: 4px solid #808285;
}

#menu div.on a
{
  color: #ffffff;
  background-color: #808285;
}

#menu div a:hover,
#menu div.on a:hover
{
  color: #ffffff;
  text-decoration: none;
  background-color: #a0a0a0;
}

/* Menu Colours */

#menu.blue div:hover
{
  border-left: 4px solid #99d6ef;
}

#menu.blue div a:hover,
#menu.blue div.on a:hover
{
  background-color: #99d6ef;
}

#menu.blue div.on
{
  border-left: 4px solid #009ad8;
}

#menu.blue div.on a
{
  background-color: #009ad8;
}

#menu.green div:hover
{
  border-left: 4px solid #55dfa5;
}

#menu.green div a:hover,
#menu.green div.on a:hover
{
  background-color: #55dfa5;
}

#menu.green div.on
{
  border-left: 4px solid #00ad65;
}

#menu.green div.on a
{
  background-color: #00ad65;
}

#menu.purple div:hover
{
  border-left: 4px solid #a393cf;
}

#menu.purple div a:hover,
#menu.purple div.on a:hover
{
  background-color: #a393cf;
}

#menu.purple div.on
{
  border-left: 4px solid #43338f;
}

#menu.purple div.on a
{
  background-color: #43338f;
}

#menu.pink div:hover
{
  border-left: 4px solid #f670c4;
}

#menu.pink div a:hover,
#menu.pink div.on a:hover
{
  background-color: #f670c4;
}

#menu.pink div.on
{
  border-left: 4px solid #de188b;
}

#menu.pink div.on a
{
  background-color: #de188b;
}

#menu.orange div:hover
{
  border-left: 4px solid #ffc8a0;
}

#menu.orange div a:hover,
#menu.orange div.on a:hover
{
  background-color: #ffc8a0;
}

#menu.orange div.on
{
  border-left: 4px solid #f17030;
}

#menu.orange div.on a
{
  background-color: #f17030;
}

/* Points Bar */

.shadebar
{
  clear: both;
  margin: 0px auto 20px auto;
  padding: 4px 0px;
  font-size: 19px;
	font-weight:normal;
  color: #808285;
  background: #e9e9e9;
  /*-webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;*/
  /*-webkit-box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);*/
  height: 37px;
  text-align: center;
}

#pointsbar
{
  position: relative;
  width: 100%;
}

#pointsshade
{
  position: absolute;
  top: 0px;
  left: 0px;
  /*width: 37px;
  background: #d9d9d9;*/
}

#pointstext
{
  position: absolute;
  width: 100%;
  white-space: nowrap;
  text-align: center;
  font-size: 18px;
}

/* Login Site */

#login
{
  width: 720px;
  margin: 0px auto 72px auto;
  padding: 20px 20px 14px 20px;
}

#login.wide
{
  width: 960px;
}

#login.box
{
  margin: 20px auto 72px auto;
  background: white;
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

#loginhead
{
  text-align: center;
}

/* Main Body Logo */

#main-logo
{
  position: relative;
  width: 960px;
  height: 120px;
  margin: 0px auto;
  text-align: right;
}

#main-logo.orange
{
  background: 63px 0px url("images/thefuse-orange.png") no-repeat;
}

#main-logo.pink
{
  background: 63px 0px url("images/thefuse-pink.png") no-repeat;
}

#main-logo.green
{
  background: 63px 0px url("images/thefuse-green.png") no-repeat;
}

#main-logo.blue
{
  background: 63px 0px url("images/thefuse-blue.png") no-repeat;
}

#main-logo.purple
{
  background: 63px 0px url("images/thefuse-purple.png") no-repeat;
}

#main-logo.xmas.orange
{
  background: 63px 0px url("images/thefuse-xmas-orange.png") no-repeat;
}

#main-logo.xmas.pink
{
  background: 63px 0px url("images/thefuse-xmas-pink.png") no-repeat;
}

#main-logo.xmas.green
{
  background: 63px 0px url("images/thefuse-xmas-green.png") no-repeat;
}

#main-logo.xmas.blue
{
  background: 63px 0px url("images/thefuse-xmas-blue.png") no-repeat;
}

#main-logo.xmas.purple
{
  background: 63px 0px url("images/thefuse-xmas-purple.png") no-repeat;
}

#main-logo.vegas.orange
{
  background: 63px 0px url("images/thefuse-vegas-orange.png") no-repeat;
}

#main-logo.vegas.pink
{
  background: 63px 0px url("images/thefuse-vegas-pink.png") no-repeat;
}

#main-logo.vegas.green
{
  background: 63px 0px url("images/thefuse-vegas-green.png") no-repeat;
}

#main-logo.vegas.blue
{
  background: 63px 0px url("images/thefuse-vegas-blue.png") no-repeat;
}

#main-logo.vegas.purple
{
  background: 63px 0px url("images/thefuse-vegas-purple.png") no-repeat;
}

#main-logo.vegas2.orange
{
  background: 63px 0px url("images/thefuse-vegas2-orange.png") no-repeat;
}

#main-logo.vegas2.pink
{
  background: 63px 0px url("images/thefuse-vegas2-pink.png") no-repeat;
}

#main-logo.vegas2.green
{
  background: 63px 0px url("images/thefuse-vegas2-green.png") no-repeat;
}

#main-logo.vegas2.blue
{
  background: 63px 0px url("images/thefuse-vegas2-blue.png") no-repeat;
}

#main-logo.vegas2.purple
{
  background: 63px 0px url("images/thefuse-vegas2-purple.png") no-repeat;
}

#main-logo.easter.orange
{
  background: 63px 0px url("images/thefuse-easter-orange.png") no-repeat;
}

#main-logo.easter.pink
{
  background: 63px 0px url("images/thefuse-easter-pink.png") no-repeat;
}

#main-logo.easter.green
{
  background: 63px 0px url("images/thefuse-easter-green.png") no-repeat;
}

#main-logo.easter.blue
{
  background: 63px 0px url("images/thefuse-easter-blue.png") no-repeat;
}

#main-logo.easter.purple
{
  background: 63px 0px url("images/thefuse-easter-purple.png") no-repeat;
}

#main-logo-line
{
  /*position: absolute;
  display: block;
  -webkit-transition: width 1s ease-out;
  -moz-transition: width 1s ease-out;
  -ms-transition: width 1s ease-out;
  -o-transition: width 1s ease-out;
  transition: width 1s ease-out;
  top: 81px;
  left: 437px;
  width: 523px;
  height: 9px;*/
}

#main-logo:hover #main-logo-line
{
 /* width: 0px;*/
}

#main-logo.orange #main-logo-line
{
  /*background-color: #ff8500;*/
}

#main-logo.pink #main-logo-line
{
  /*background-color: #d51c90;*/
}

#main-logo.green #main-logo-line
{
  /*background-color: #0eae64;*/
}

#main-logo.blue #main-logo-line
{
  /*background-color: #0ba0d9;*/
}

#main-logo.purple #main-logo-line
{
  /*background-color: #4d3e9e;*/
}

/* Main Body Content */

#body
{
  width: 960px;
  margin: 0px auto;
  clear: both;
	padding:25px 0;
}

/* Tiles */

#tiles
{
  width: 210px;
  float: right;
  padding: 20px 0px;
}

/* Content */

#content
{
  margin-left: 180px;
  margin-right: 210px;
  padding: 20px 20px 20px 0px;
}

#content.wide
{
  margin-left: 180px;
  margin-right: 0px;
  padding: 20px 0px;
}

/* Banner */

div#banner
{
  width: 780px;
  height: 240px;
  position: relative;
  display: block;
  background-image: url("images/banner-stars.png");
  background-repeat: no-repeat;
}

div.banners
{
  width: 780px;
  height: 240px;
  display: block;
}

div.banners div
{
  width: 780px;
  height: 240px;
  display: block;
}

div.banners img
{
  width: 780px;
  height: 240px;
}

/* Content Boxes */

.content-box
{
  clear: both;
  margin: 0px 0px 20px 0px;
  padding: 20px;
  width: 100%;
  background: white;
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

.content-box .block:first-child
{
  margin-top: 0px;
}

/* My Campaigns */

.campaign-box
{
  clear: both;
  margin: 20px 0px 10px 0px;
  padding: 12px 20px 8px 20px;
  width: 100%;
  background: white;
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

.campaign-box-none
{
  clear: both;
  margin: 10px 0px !important;
  padding: 2px 16px 8px 16px;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  display: none;
}

.campaign-box:after
{
  content: "";
  display: table;
  clear: both;
}

.campaign-box ul.terms li
{
  font-size: 14px;
  line-height: 110%;
  padding: 0px;
  margin: 0px 0px 2px 0px;
}

.campaign-box table
{
  background: #f1f1f1;
  border-collapse: separate;
  margin-bottom: 20px;
}

.campaign-box table:after
{
  content: "";
  display: table;
  clear: both;
}

.campaign-box table th
{
  font-family: TelecomNational-Semibold, Calibri, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  line-height: 20px;
  color: white;
  vertical-align: middle;
  padding: 3px 8px 3px 8px;
  border: 1px solid #ffffff;
  text-align: left;
  white-space: nowrap;
}

.campaign-box.blue table th
{
  background: #009ad8;
}

.campaign-box.purple table th
{
  background: #43338f;
}

.campaign-box.pink table th
{
  background: #de188b;
}

.campaign-box.orange table th
{
  background: #f17030;
}

.campaign-box.green table th
{
  background: #00ad65;
}

.campaign-box table td
{
  font-size: 14px;
  padding: 1px 8px 1px 8px;
  border: 1px solid #ffffff;
}

.campaign-box table td.detail
{
  padding: 0px;
  border: none;
}

.campaign-box table td.detail div.detail
{
  padding: 0px;
  border-left: 31px solid white;
  border-right: none;
  border-top: none;
  border-bottom: none;
  display: none;
}

.arrow-top
{
  margin: 0px 0px 20px 0px;
  padding: 0px;
  font-size: 13px;
  color: #808285;
  text-align: right;
  line-height: 12px;
}

.arrow-top a
{
  color: inherit;
  font-size: 19px;
}

/* Catalogs */

table.cataloglist
{
  width: 100%;
}

table.cataloglist td
{
  vertical-align: middle;
  width: 50%;
}

table.cataloglist td .block
{
  margin: 0px;
}

table.cataloglist td a:hover
{
  text-decoration: none;
}

table.cataloglist tr td:first-child
{
  padding: 0px 20px 0px 0px;
  border-right: 1px solid #cccccc;
}

table.cataloglist tr td:last-child
{
  padding: 0px 0px 0px 20px;
}

p.cataloglinks
{
  font-weight: bold;
  margin: 10px 0px;
}

p.cataloglinks a:hover
{
  text-decoration: none;
}

p.catalognum
{
  font-size: 14px;
  color: #808285;
  text-transform: uppercase;
  margin: 10px 0px;
}

table.catalogitems
{
  width: 100%;
}

table.catalogitems td
{
  text-align: center;
  font-size: 13px;
  padding: 10px 10px;
  width: 20%;
}

table.catalogitems td a
{
  font-size: 13px;
  font-weight: bold;
}

table.catalogitems td a:hover
{
  text-decoration: none;
}

table.catalogitems td img
{
  border: 1px solid #d9d9d9;
  margin-bottom: 4px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}

table.catalogitems td i
{
  font-size: 10px;
  font-style: normal;
}

#catalogitem,
#catalognone
{
  margin-top: 20px;
}

#catalogitem table th
{
  padding: 10px 20px 0px 0px;
  text-align: center;
  font-weight: normal;
}

#catalogitem table td
{
  padding: 10px 0px 0px 20px;
}

#catalogitem img
{
  border: 1px solid #d9d9d9;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}

#catalogitem ul
{
  display: block;
  padding-left: 20px;
}

#catalogitem li
{
  padding: 3px 0px 3px 0px;
}

/* Expando Support */

table.datatable
{
  background: #ffffff;
  width: 100%;
}

table.datatable th
{
  background: #009ad8;
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  vertical-align: middle;
  border: 1px solid white;
  padding: 1px 3px 1px 3px;
}

table.datatable th.dataitem
{
  color: #000000;
  background: #f1f1f1;
}

table.datatable th.center
{
  color: #000000;
  background: #f1f1f1;
  text-align: center;
}

table.datatable td
{
  background: #f1f1f1;
  font-size: 10px;
  color: #000000;
  border: 1px solid white;
  padding: 1px 3px;
  text-align: right;
}

table.datatable td.left
{
  text-align: left;
}

/* Leaderboard Support */

table.leaderboard
{
  width: 100%;
  background: #f1f1f1;
  margin: 20px 0px 10px 0px;
}

table.leaderboard th
{
  color: #f1f1f1;
  background: #009ad8;
  padding: 3px 8px;
  border: 1px solid white;
  font-weight: bold;
}

table.leaderboard td
{
  font-size: 14px;
  color: black;
  padding: 1px 8px;
  border: 1px solid white;
}

/* Basket Support */

table.basket
{
  border: 1px solid #d9d9d9;
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
}

table.basket th
{
  color: #ffffff;
  background-color: #009ad8;
  border: 1px solid #d9d9d9;
  border-collapse: collapse;
  font-size: 12px;
  font-weight: bold;
  padding-top: 4px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 4px;
  vertical-align: top;
}

table.basket th.left
{
  text-align: left;
}

table.basket th.title
{
  font-size: 14px;
  padding-top: 5px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 6px;
}

table.basket td
{
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  border-collapse: collapse;
  font-size: 12px;
  padding-top: 1px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 1px;
  vertical-align: middle;
}

table.basket td.details
{
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

table.basket tr.empty
{
  background-color: #59c6f2;
}

table.basket tr.empty td
{
  background-color: #59c6f2;
  color: #000000;
  font-size: 12px;
  font-weight: bold;
  padding-top: 8px;
  padding-bottom: 8px;
}

table.basket tr.divider
{
  padding: 0px;
  height: 2px;
}

table.basket tr.divider td
{
  background-color: #59c6f2;
  border: none;
  padding: 0px;
  height: 2px;
}

table.basket td.action
{
  border: 1px solid #d9d9d9;
  border-collapse: collapse;
  vertical-align: middle;
  padding: 0px;
}

table.basket td.action a
{
  color: #ffffff;
  background-color: #59c6f2;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  padding-top: 4px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 4px;
  text-decoration: none;
  display: block;
}

table.basket td.action a:hover
{
  text-decoration: none;
}

table.basket a.quantity
{
  color: #000000;
  font-weight: bold;
  text-decoration: none;
  padding-left: 8px;
  padding-right: 8px;
}

table.basket a.quantity:hover
{
  color: #ffffff;
  background-color: #A00000;
  text-decoration: none;
}

table.basket tr.summary
{
  background-color: #A00000;
}

table.basket tr.summary td
{
  font-weight: bold;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: right;
}

table.basket tr.summary td.checkout
{
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
}

table.basket tr.summary td.checkout a
{
  color: #ffffff;
  background-color: #A00000;
  font-weight: bold;
  text-decoration: none;
  display: block;
  padding-top: 4px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 4px;
  text-align: center;
}

table.basket tr.summary td.checkout b
{
  color: #ffffff;
  background-color: #A00000;
  font-weight: bold;
  text-decoration: none;
  display: block;
  padding-top: 4px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 4px;
  text-align: center;
}

table.basket tr.summary td.checkout a:hover
{
  color: #ffffff;
  text-decoration: none;
}

/* Faqs Support */

ol.faqs li
{
  font-weight: bold;
}

ol.faqs p
{
  font-weight: normal;
  margin: 4px 0px;
}

#modaloverlay
{
  position: fixed; 
  margin: 0; 
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 50%;
  display: none;
  z-index: 1000;
  background: #000;
}

#modaloverlay.vegas
{
  background: #000 url("images/las-vegas-background.jpg") center center repeat;
}

#modaloverlay.saleswars
{
  background: #000 url("images/sales-wars-background.jpg") center center repeat;
}

#modaloverlay img
{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#modalbody
{
  margin: 0px;
  padding: 2px;
  position: absolute;
  width: 906px;
  border: 1px solid #444;
  border-radius: 10px;
  background-color: #888;
  display: none;
  z-index: 1001;
}

#modalcontent
{
  margin: 0px; 
  padding: 6px;
  border-radius: 8px;
  border: 1px solid #aaa;
  background-color: #fff;
}

#modalclose
{
  margin: 0; 
  padding: 0;
  position: absolute;
  background: url("images/close.png") 0 0 no-repeat;
  width: 24px;
  height: 27px;
  display: block;
  text-indent: -9999px;
  top: -7px;
  right: -7px;
}

/* Print Support */

@media print
{
  div#header,
  div#main-logo,
  div#navbar,
  div#pointsbar,
  div#menu,
  div#navfooter
  {
    display: none;
  }
  
  div#body
  {
    width: 100%;
    margin: 0px;
  }

  div#content, div#content.wide
  {
    margin-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    width: 100%;
  }
}


/* NEW CSS STREAM */
.TopSection		{background-color:#FFF; border-bottom:5px solid #727272; height:140px;} /* The border here could be dynamic to match up with all the color varaiants that exist */
.HomeUserName			{font-size:24px; text-transform:uppercase; padding:10px 0 20px 0; font-family: 'TelecomNational-Semibold';}